/* ==========================================================================
   Plixoo embed shell - shared chrome for the self-contained HTML games in
   /public/games. Matches the look of the hand-authored builds (minesweeper,
   sudoku, ...) so a shell game and a bespoke game are indistinguishable
   inside the 430px portrait frame.
   ========================================================================== */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#15121d;color:#efe9f8;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  user-select:none;-webkit-user-select:none;overscroll-behavior:none;touch-action:manipulation}

#app{position:fixed;inset:0;display:flex;flex-direction:column}

/* ------------------------------------------------------------------ bar */
#bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:linear-gradient(180deg,#241d33,#1b1628);border-bottom:1px solid rgba(255,255,255,.07)}
.ico{width:36px;height:36px;flex:0 0 auto;border:none;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.08);color:#efe9f8;display:grid;place-items:center;font-size:16px;
  font-family:inherit;transition:transform .08s,background .2s}
.ico:active{transform:scale(.9)}
.ico.on{background:linear-gradient(150deg,var(--a1),var(--a2));color:#fff}
.chip{flex:1;min-width:0;display:flex;justify-content:center;gap:7px}
.kv{background:rgba(255,255,255,.07);border-radius:11px;padding:4px 10px;text-align:center;min-width:66px}
.kv span{display:block;font-size:9px;letter-spacing:.6px;color:#a99cc4;font-weight:700}
.kv b{display:block;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- stage */
#play{flex:1;min-height:0;position:relative;display:flex;align-items:center;
  justify-content:center;padding:8px}
#cv{display:block;touch-action:none;border-radius:14px}
#stage{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;min-height:0}

/* --------------------------------------------------------------- sheets */
.sheet{position:absolute;inset:0;z-index:20;background:rgba(13,10,20,.97);display:none;
  flex-direction:column;padding:18px 16px;overflow-y:auto;overscroll-behavior:contain}
.sheet.show{display:flex}
.sheet h2{margin:0 0 4px;font-size:26px;font-weight:900;letter-spacing:-.4px}
.sheet .lead{margin:0 0 16px;font-size:13.5px;color:#a99cc4;line-height:1.55}
.btn{display:block;width:100%;border:none;border-radius:16px;cursor:pointer;padding:13px 16px;
  text-align:left;font-family:inherit;font-size:16px;font-weight:800;color:#15121d;background:#fff;
  margin-bottom:10px;box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .07s,box-shadow .07s}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 rgba(0,0,0,.35)}
.btn.pri{background:linear-gradient(100deg,var(--a1),var(--a2));color:#fff}
.btn.gh{background:rgba(255,255,255,.09);color:#efe9f8;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.btn small{display:block;font-size:11.5px;font-weight:600;opacity:.75;margin-top:2px}
.btn.mid{text-align:center}
.spacer{flex:1;min-height:8px}

#brand{text-align:center;margin:14px 0 26px}
#brand .logo{font-size:38px;font-weight:900;letter-spacing:-1.5px;line-height:1.06;
  background:linear-gradient(100deg,var(--a1),var(--a2) 60%,#37bdf8);-webkit-background-clip:text;
  background-clip:text;color:transparent}
#brand .tag{font-size:13px;color:#a99cc4;margin-top:5px}

.rules{font-size:13px;color:#c7bcdf;line-height:1.72}
.rules b{color:#fff}
.rules ul{padding-left:19px;margin:8px 0}
.rules li{margin-bottom:7px}

#resIcon{font-size:58px;text-align:center;line-height:1}
#resTitle{text-align:center;font-size:28px;font-weight:900;margin:6px 0 3px}
#resSub{text-align:center;font-size:13.5px;color:#a99cc4;margin-bottom:18px;line-height:1.5}
.rewards{display:flex;justify-content:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.rw{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:9px 13px;text-align:center;min-width:84px}
.rw b{display:block;font-size:18px;font-weight:900}
.rw span{font-size:10.5px;color:#a99cc4;letter-spacing:.4px}

/* --------------------------------------------------------------- toasts */
#toast{position:absolute;left:50%;top:14px;transform:translate(-50%,-24px);z-index:15;
  background:rgba(13,10,20,.92);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:7px 15px;font-size:13px;font-weight:800;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------------- shared bits for
   DOM-stage games: a tidy grid, pill buttons and a message line.        */
.grid{display:grid;gap:6px}
.cellbtn{border:none;border-radius:12px;cursor:pointer;font-family:inherit;font-weight:800;
  color:#efe9f8;background:linear-gradient(160deg,#4b3f6b,#392f52);display:grid;place-items:center;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .08s,background .15s}
.cellbtn:active{transform:scale(.94)}
.pill{border:none;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:800;
  font-size:13px;padding:9px 16px;color:#15121d;background:linear-gradient(100deg,var(--a1),var(--a2));
  box-shadow:0 3px 0 rgba(0,0,0,.3)}
.pill.gh{background:rgba(255,255,255,.1);color:#efe9f8}
.pill:active{transform:translateY(3px);box-shadow:none}
.msg{font-size:13.5px;color:#c7bcdf;text-align:center;min-height:19px;font-weight:700}