/* ── full-screen game shell ───────────── */
html:has(body.game){overflow:hidden;scrollbar-gutter:auto}
body.game{height:100dvh;overflow:hidden;background:var(--hero-out);overscroll-behavior:none}
.sg{position:fixed;inset:0;display:flex;flex-direction:column;color:#fff;
  background:radial-gradient(80% 90% at 50% 55%,var(--hero-in) 0%,var(--hero-mid) 45%,var(--hero-out) 100%)}

.sg-hud{flex:none;display:flex;align-items:center;gap:clamp(12px,1.6vw,32px);height:clamp(64px,5vw,84px);padding:0 clamp(14px,1.8vw,36px)}
.sg-back{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);color:#fff;font-weight:600;font-size:16px;white-space:nowrap;transition:background .25s}
.sg-back:hover{background:rgba(255,255,255,.14)}
.sg-home img{height:clamp(34px,2.4vw,46px);width:auto;display:block}
.sg-stats{display:flex;align-items:center;gap:clamp(12px,1.8vw,34px);flex:1;justify-content:center}
.sg-stats > div{display:flex;align-items:baseline;gap:6px}
.sg-stats small{font-size:clamp(13px,.9vw,16px);color:rgba(255,255,255,.75);font-weight:600}
.sg-stats b{font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(22px,1.8vw,34px);color:var(--sun);line-height:1}
.sg-lives{gap:3px!important;font-size:clamp(16px,1.3vw,22px)}
.sg-tools{display:flex;gap:8px}
.sg-tools button{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);font-size:16px;color:#fff;cursor:pointer;transition:background .25s}
.sg-tools button:hover{background:rgba(255,255,255,.2)}

.sg-stage{flex:1;min-height:0;display:grid;place-items:center;padding:0 clamp(10px,1.4vw,28px) clamp(10px,1.4vw,28px)}
.sg-board{position:relative;border-radius:22px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.sg-board canvas{display:block}
.sg-fx{position:absolute;inset:0;pointer-events:none}
.sg-fx .pop{position:absolute;direction:ltr;font-family:Anomalia,Ploni,sans-serif;font-size:clamp(20px,1.6vw,30px);color:#fff;translate:-50% -50%;animation:sgPop .9s ease-out forwards;white-space:nowrap}
@keyframes sgPop{to{translate:-50% -160%;opacity:0}}
.sg-fx .banner{position:absolute;top:16px;left:50%;translate:-50% 0;padding:10px 22px;border-radius:999px;background:var(--sun);color:var(--ink);font-weight:700;font-size:clamp(16px,1.1vw,20px);animation:sgBan 2.4s ease forwards;white-space:nowrap}
.sg-fx .banner.big{top:50%;translate:-50% -50%;font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(28px,2.6vw,48px);padding:16px 34px;animation-name:sgBanBig}
@keyframes sgBan{0%{opacity:0;translate:-50% -10px}12%,80%{opacity:1;translate:-50% 0}100%{opacity:0}}
@keyframes sgBanBig{0%{opacity:0;scale:.6}14%{opacity:1;scale:1.06}22%,80%{opacity:1;scale:1}100%{opacity:0;scale:.96}}

/* every message in a game is one popup: a white card over the dimmed game */
.sg-ov{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:clamp(12px,2vw,32px);overflow-y:auto;background:rgba(3,40,140,.62);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.sg-ov.show{opacity:1;visibility:visible}
.sg-pop{width:min(600px,100%);border-radius:32px;background:#fff;color:var(--ink);text-align:center;overflow:hidden;translate:0 18px;scale:.97;transition:translate .5s cubic-bezier(.2,.7,.2,1),scale .5s cubic-bezier(.2,.7,.2,1)}
.sg-ov.show .sg-pop{translate:none;scale:1}
.sg-pop .art{display:block;width:100%;aspect-ratio:16/9;max-height:38vh;object-fit:cover}
.sg-pop .in{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1vw,18px);padding:clamp(22px,2vw,36px)}
.sg-pop h2{font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(32px,2.8vw,50px);line-height:1.05}
.sg-pop p{font-size:clamp(16px,1.1vw,20px);line-height:1.5;color:var(--mute)}
.sg-modes{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;width:100%;margin-top:4px}
.sg-modes .btn{justify-content:center;width:100%;padding:0 12px;border:0;cursor:pointer}
.sg-lv{display:flex;flex-direction:column;align-items:center;gap:8px}
.sg-lv small{font-size:14px;line-height:1.25;color:var(--mute)}
.sg-pop .btn.ghost{border:1.5px solid var(--blue);background:none;color:var(--blue);cursor:pointer}
.sg-pop .btn.ghost:hover{background:var(--blue);color:#fff}
.sg-keys{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:15px;color:var(--mute)}
.sg-dreidel{width:clamp(110px,9vw,160px);aspect-ratio:1;display:grid;place-items:center;border-radius:24px;background:linear-gradient(150deg,#d8fbff,var(--sky) 45%,#2bb6d6);color:var(--blue);
  font-family:Anomalia,Ploni,sans-serif;font-size:clamp(60px,5vw,96px)}
.sg-dreidel.spin{animation:sgSpin 1.3s cubic-bezier(.2,.7,.2,1)}
@keyframes sgSpin{from{rotate:-1080deg;scale:.5}}

.sg-pad{display:none}
@media (hover:none){
  .sg-pad{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));translate:-50% 0;display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,52px);gap:6px;direction:ltr;opacity:.75;z-index:5}
  .sg-pad button{border:0;border-radius:16px;background:rgba(255,255,255,.2);color:#fff;font-size:20px;backdrop-filter:blur(4px)}
  .sg-pad [data-d=up]{grid-column:2}
  .sg-pad [data-d=left]{grid-column:1;grid-row:2}.sg-pad [data-d=down]{grid-column:2;grid-row:2}.sg-pad [data-d=right]{grid-column:3;grid-row:2}
  .sg-stage{padding-bottom:132px}
}
@media (max-width:720px){
  .sg-hud{flex-wrap:wrap;height:auto;padding:10px 12px 6px;row-gap:6px}
  .sg-home{order:0}.sg-back{order:0;height:36px;padding:0 12px;font-size:14px}.sg-tools{order:2;margin-inline-start:auto}
  .sg-stats{order:3;flex-basis:100%;justify-content:space-between;gap:8px}
  .sg-tools button{width:38px;height:38px}
  .sg-board{border-radius:16px}
  .sg-pop{border-radius:24px}
  .sg-pop p{font-size:15px}
  .sg-pop .art{max-height:26vh}
  .sg-modes{gap:8px}
  .sg-modes .btn{font-size:17px}
  .sg-keys{display:none}
}