/* SNAKE³ — a game of light in a cube */
:root{
  --bg:#070a0f;
  --bg2:#0a0e14;
  --ink:#eef4fb;
  --muted:#93a0b3;
  --dim:#5d6b7e;
  --teal:#14b8a6;
  --teal-2:#5fe6d5;
  --teal-3:#9df7ea;
  --gold:#f6c453;
  --red:#ff5a52;
  --glass:rgba(14,20,28,.62);
  --glass-2:rgba(20,28,38,.55);
  --line:rgba(120,200,190,.14);
  --line-2:rgba(255,255,255,.07);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r:20px;
  --shadow:0 20px 60px -20px rgba(0,0,0,.7);
  --pad:max(14px, env(safe-area-inset-left)) ;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background:
    radial-gradient(130% 80% at 50% -10%, rgba(20,184,166,.14), rgba(7,10,15,0) 55%),
    radial-gradient(90% 60% at 88% 0%, rgba(246,196,83,.06), rgba(7,10,15,0) 50%),
    var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  user-select:none;
  touch-action:manipulation;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
.hidden{display:none !important}
.gone{opacity:0 !important;pointer-events:none !important}

/* ---------- 3D stage ---------- */
#stage{position:fixed;inset:0;z-index:0}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
#vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 42%, rgba(0,0,0,0) 46%, rgba(3,5,8,.55) 88%, rgba(2,3,5,.85) 100%);
  mix-blend-mode:multiply;
}
#grain{position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- top bar ---------- */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  pointer-events:none;
}
#topbar > *{pointer-events:auto}
#brand{
  font-weight:800;letter-spacing:.06em;font-size:15px;
  color:var(--teal-3);text-shadow:0 0 18px rgba(95,230,213,.45);
}
#brand span{color:var(--gold)}
#conn{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:11.5px;letter-spacing:.04em;color:var(--muted);
  background:var(--glass);border:1px solid var(--line-2);
  padding:6px 11px;border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
#conn-dot{width:8px;height:8px;border-radius:50%;background:var(--dim);
  box-shadow:0 0 0 0 rgba(0,0,0,0);transition:background .3s, box-shadow .3s}
#conn.ok #conn-dot{background:#33d69f;box-shadow:0 0 10px 1px rgba(51,214,159,.7)}
#conn.wait #conn-dot{background:var(--gold);box-shadow:0 0 10px 1px rgba(246,196,83,.6);animation:pulse 1.1s infinite}
#conn.bad #conn-dot{background:var(--red);box-shadow:0 0 10px 1px rgba(255,90,82,.6)}
@keyframes pulse{50%{opacity:.35}}
#mute{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:15px;
  background:var(--glass);border:1px solid var(--line-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:.85;transition:opacity .2s}
#mute:active{transform:scale(.92)}
#mute.off{opacity:.5}

/* ---------- gnomon / compass ---------- */
#gnomon{
  position:fixed;z-index:35;right:14px;top:calc(env(safe-area-inset-top) + 60px);
  width:84px;pointer-events:none;text-align:center;
  transition:opacity .35s var(--ease);
}
#gnomon-canvas{width:84px;height:84px;display:block;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.4))}
#gnomon-label{
  margin-top:2px;font-size:10px;letter-spacing:.03em;color:var(--muted);
  font-variant-numeric:tabular-nums;line-height:1.35;
}
#gnomon-label b{color:var(--teal-3);font-weight:700}

/* ---------- screens (overlays over the cube) ---------- */
.screen{
  position:fixed;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top) + 64px) 20px calc(env(safe-area-inset-bottom) + 24px);
  overflow-y:auto;
  animation:screenIn .5s var(--ease-out) both;
}
@keyframes screenIn{from{opacity:0}to{opacity:1}}

/* wordmark */
.wordmark{
  margin-top:6vh;
  font-weight:900;letter-spacing:.02em;
  font-size:clamp(52px, 20vw, 128px);line-height:.9;
  background:linear-gradient(180deg,#eafffb,#7ff0df 55%,#14b8a6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(20,184,166,.25);
  filter:drop-shadow(0 8px 30px rgba(20,184,166,.22));
}
.wordmark .cube3{color:var(--gold);-webkit-text-fill-color:var(--gold);
  text-shadow:0 0 40px rgba(246,196,83,.5)}
.tagline{margin:8px 0 0;color:var(--muted);letter-spacing:.22em;text-transform:uppercase;font-size:12px}

/* generic glass card */
.card{
  width:100%;max-width:380px;background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:var(--shadow);
}
.stack{display:flex;flex-direction:column;gap:14px;width:100%;max-width:380px;align-items:center;margin-top:22px}

/* attract: overlay text passes clicks to the cube; only controls capture */
#screen-attract .wordmark,#screen-attract .tagline,#screen-attract .cube-note{pointer-events:none}
#screen-playing,#screen-countdown{pointer-events:none}
#screen-playing *{pointer-events:none}
#screen-spectate{pointer-events:none}
#screen-spectate #spec-banner,#screen-spectate #spec-queue,#screen-spectate #btn-leave{pointer-events:auto}

/* live banner */
#live-banner{
  margin:18px 0 2px;max-width:380px;width:100%;
  display:flex;align-items:center;gap:9px;justify-content:center;
  padding:10px 14px;border-radius:14px;
  background:linear-gradient(90deg, rgba(20,184,166,.16), rgba(20,184,166,.04));
  border:1px solid rgba(20,184,166,.3);color:var(--teal-3);font-size:13px;font-weight:600;
  animation:screenIn .4s var(--ease-out) both;
}
#live-banner .dotlive{width:8px;height:8px;border-radius:50%;background:var(--red);
  box-shadow:0 0 10px 2px rgba(255,90,82,.7);animation:pulse 1s infinite}

/* name input */
.name-row{width:100%;max-width:380px;position:relative;margin-top:14px}
#name-input{
  width:100%;padding:15px 16px;font-size:16px;color:var(--ink);text-align:center;
  background:var(--glass-2);border:1px solid var(--line);border-radius:14px;
  letter-spacing:.02em;transition:border-color .2s, box-shadow .2s;
}
#name-input::placeholder{color:var(--dim)}
#name-input:focus{outline:none;border-color:rgba(95,230,213,.6);box-shadow:0 0 0 3px rgba(20,184,166,.14)}

/* speed selector (segmented — pick the starting pace) */
.seg{display:flex;gap:6px;width:100%;max-width:380px}
.seg-pill{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 6px;border-radius:14px;background:var(--glass-2);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .12s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.seg-pill .seg-name{font-size:14px;font-weight:800;letter-spacing:.04em;color:var(--ink)}
.seg-pill .seg-hint{font-size:10px;letter-spacing:.01em;color:var(--dim)}
.seg-pill:active{transform:scale(.96)}
.seg-pill[aria-checked="true"]{
  background:linear-gradient(180deg, rgba(20,184,166,.22), rgba(20,184,166,.06));
  border-color:rgba(95,230,213,.6);
  box-shadow:0 0 0 3px rgba(20,184,166,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.seg-pill[aria-checked="true"] .seg-name{color:var(--teal-3)}
.seg-pill[aria-checked="true"] .seg-hint{color:var(--teal-2)}

/* primary button */
.primary{
  width:100%;max-width:380px;padding:17px;border-radius:16px;
  font-size:18px;font-weight:800;letter-spacing:.08em;color:#04120f;
  background:linear-gradient(180deg,#7ff0df,#14b8a6);
  box-shadow:0 10px 34px -8px rgba(20,184,166,.65), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .12s var(--ease), box-shadow .25s, filter .2s;
}
.primary:active{transform:translateY(2px) scale(.99);box-shadow:0 6px 18px -8px rgba(20,184,166,.6)}
.primary.watch{background:linear-gradient(180deg,#ffe28a,#f6c453);color:#241a02;
  box-shadow:0 10px 34px -8px rgba(246,196,83,.55), inset 0 1px 0 rgba(255,255,255,.4)}
.primary:disabled{filter:grayscale(.6) brightness(.7);pointer-events:none}

.ghost{
  padding:13px 22px;border-radius:14px;font-weight:700;letter-spacing:.06em;font-size:14px;
  color:var(--ink);background:var(--glass);border:1px solid var(--line-2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .12s, background .2s;
}
.ghost:active{transform:scale(.96);background:rgba(255,255,255,.06)}
.link{color:var(--muted);font-size:13px;padding:8px;letter-spacing:.03em;transition:color .2s}
.link:active{color:var(--teal-3)}

/* how to */
#howto{
  width:100%;max-width:380px;margin-top:4px;padding:16px;border-radius:16px;
  background:var(--glass-2);border:1px solid var(--line);font-size:13.5px;color:var(--muted);line-height:1.6;
  animation:screenIn .35s var(--ease-out) both;
}
#howto h4{margin:0 0 8px;color:var(--ink);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
#howto .k{display:inline-block;min-width:52px;padding:2px 8px;margin:2px 4px 2px 0;border-radius:7px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--teal-3);
  font-weight:700;font-size:12px;text-align:center}
#howto .row{display:flex;gap:10px;align-items:flex-start;margin:6px 0}
#howto .row .lead{color:var(--gold);min-width:66px;font-weight:700}
#howto em{color:var(--teal-3);font-style:normal}

/* leaderboard */
#leaderboard-wrap{width:100%;max-width:380px;margin-top:18px;
  padding:16px 16px 8px;border-radius:16px;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#leaderboard-wrap h3{margin:0 0 10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px}
#leaderboard-wrap h3::before{content:"✦";color:var(--gold)}
#leaderboard{list-style:none;margin:0;padding:0;counter-reset:lb}
#leaderboard li{
  display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line-2);
  font-size:14px;animation:rowIn .4s var(--ease-out) both;
}
#leaderboard li:last-child{border-bottom:0}
#leaderboard li::before{counter-increment:lb;content:counter(lb);
  width:22px;text-align:center;color:var(--dim);font-size:12px;font-weight:700}
#leaderboard li:nth-child(1)::before{color:var(--gold)}
#leaderboard li:nth-child(2)::before{color:#cfd8e3}
#leaderboard li:nth-child(3)::before{color:#e6a86b}
#leaderboard li .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
#leaderboard li .sc{font-variant-numeric:tabular-nums;font-weight:800;color:var(--teal-3)}
#leaderboard li.you{background:linear-gradient(90deg, rgba(20,184,166,.16), rgba(20,184,166,0));
  border-radius:10px;border-bottom-color:transparent}
#leaderboard li.you .nm::after{content:" you";color:var(--teal);font-size:11px;font-weight:700}
#leaderboard li.fresh{animation:freshRow .9s var(--ease-out) both}
#leaderboard .empty{color:var(--dim);font-size:13px;padding:10px 4px;text-align:center}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes freshRow{0%{opacity:0;transform:translateX(-16px);background:rgba(246,196,83,.35)}
  60%{background:rgba(246,196,83,.18)}100%{opacity:1;transform:none}}

.cube-note{margin:18px 0 4px;color:var(--dim);font-size:12px;letter-spacing:.02em;text-align:center}
.cube-note b{color:var(--teal-2)}

/* ---------- countdown ---------- */
#screen-countdown{justify-content:center;background:radial-gradient(70% 50% at 50% 42%, rgba(3,6,10,.4), rgba(3,6,10,.05))}
#count-num{
  font-size:clamp(120px, 42vw, 300px);font-weight:900;line-height:1;color:var(--teal-3);
  text-shadow:0 0 80px rgba(20,184,166,.6);animation:countPop .95s var(--ease-out);
}
#count-sub{margin-top:6px;color:var(--muted);letter-spacing:.3em;text-transform:uppercase;font-size:13px}
@keyframes countPop{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.08)}
  70%{transform:scale(1)}100%{opacity:.15;transform:scale(1.25)}}

/* ---------- playing HUD ---------- */
#screen-playing{pointer-events:none;padding-top:calc(env(safe-area-inset-top) + 58px);justify-content:flex-start}
#hud-top{display:flex;gap:10px;justify-content:center;width:100%;max-width:420px}
.stat{
  flex:1;background:var(--glass);border:1px solid var(--line-2);border-radius:14px;
  padding:9px 8px;text-align:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.stat .k{display:block;font-size:9.5px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.stat .v{display:block;font-size:24px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:1px}
#hud-score .v{color:var(--teal-3)}
.pips{display:flex;gap:4px;justify-content:center;margin-top:10px !important}
.pips i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.12)}
.pips i.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 9px rgba(246,196,83,.8)}
#hud-level{margin-top:9px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--teal-3);background:rgba(20,184,166,.1);border:1px solid rgba(95,230,213,.28);
  padding:4px 12px;border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#hud-hint{margin-top:12px;color:var(--muted);font-size:12.5px;text-align:center;max-width:320px;
  background:var(--glass);padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .6s}
#score-flash{position:fixed;top:24vh;left:50%;transform:translateX(-50%);
  color:var(--gold);font-weight:900;font-size:34px;pointer-events:none;z-index:30;opacity:0;
  text-shadow:0 0 24px rgba(246,196,83,.7)}
#score-flash.go{animation:scoreFlash 1s var(--ease-out)}
@keyframes scoreFlash{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  25%{opacity:1;transform:translate(-50%,-6px) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}

/* ---------- spectate ---------- */
#screen-spectate{justify-content:flex-start;pointer-events:none;padding-top:calc(env(safe-area-inset-top) + 58px)}
#spec-banner{
  pointer-events:auto;background:var(--glass);border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font-size:14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;gap:9px;box-shadow:var(--shadow);
}
#spec-banner::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);
  box-shadow:0 0 10px 2px rgba(255,90,82,.7);animation:pulse 1s infinite}
#spec-banner b{color:var(--teal-3)}
#spec-score{color:var(--muted);font-variant-numeric:tabular-nums}
#spec-queue{margin-top:12px;color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.04em;pointer-events:auto;
  background:rgba(246,196,83,.1);border:1px solid rgba(246,196,83,.28);padding:7px 14px;border-radius:999px}
#btn-leave{pointer-events:auto;margin-top:16px}

/* ---------- gameover ---------- */
#screen-gameover{justify-content:center;background:radial-gradient(80% 60% at 50% 45%, rgba(3,6,10,.55), rgba(3,6,10,.15))}
#go-title{
  font-size:clamp(46px, 15vw, 96px);font-weight:900;letter-spacing:.02em;line-height:1;
  color:#fff;text-shadow:0 0 50px rgba(255,90,82,.55);
  background:linear-gradient(180deg,#fff,#ff8a80 60%,#ff5a52);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:smash .6s var(--ease-out) both;
}
@keyframes smash{0%{opacity:0;transform:scale(1.4);filter:blur(6px)}
  40%{opacity:1;transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
#go-score{margin-top:10px;font-size:22px;color:var(--ink);animation:screenIn .6s .15s both}
#go-score b{color:var(--teal-3);font-size:30px;font-variant-numeric:tabular-nums}
#go-rank{margin-top:8px;color:var(--gold);font-weight:700;font-size:15px;min-height:20px;animation:screenIn .6s .3s both}
#go-next{margin-top:14px;color:var(--muted);font-size:13.5px;
  background:var(--glass);border:1px solid var(--line-2);padding:8px 16px;border-radius:999px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#go-next b{color:var(--teal-3)}
.go-actions{display:flex;gap:12px;margin-top:26px;align-items:center}
.go-actions .primary{width:auto;padding:16px 30px}

/* ---------- controls ---------- */
#controls{position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:0 var(--pad) calc(env(safe-area-inset-bottom) + 18px);
  display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;gap:16px}
#controls > *{pointer-events:auto}

#dpad{
  position:relative;width:168px;height:168px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:6px;touch-action:none;
}
.pad{
  position:relative;border-radius:16px;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:grid;place-items:center;color:var(--teal-3);font-size:22px;
  transition:transform .08s, background .12s, box-shadow .12s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.pad::after{content:"";width:0;height:0}
.pad.up{grid-column:2;grid-row:1}
.pad.left{grid-column:1;grid-row:2}
.pad.right{grid-column:3;grid-row:2}
.pad.down{grid-column:2;grid-row:3}
.pad .glyph{font-size:20px;line-height:1;filter:drop-shadow(0 0 6px rgba(20,184,166,.5))}
.pad .ax{position:absolute;font-size:9px;font-weight:800;letter-spacing:.02em;color:var(--gold);opacity:.9}
.pad.up .ax{bottom:5px}.pad.down .ax{top:5px}.pad.left .ax{right:6px}.pad.right .ax{left:6px}
.pad:active,.pad.press{transform:scale(.9);background:rgba(20,184,166,.28);
  box-shadow:0 0 22px rgba(20,184,166,.5), inset 0 0 12px rgba(95,230,213,.3)}
.pad-hub{grid-column:2;grid-row:2;display:grid;place-items:center;pointer-events:none;
  color:var(--dim);font-size:10px;font-weight:800;letter-spacing:.06em}
.pad-hub .ring{width:34px;height:34px;border-radius:50%;border:1px dashed rgba(120,200,190,.3);
  display:grid;place-items:center}

#vpad{display:flex;flex-direction:column;gap:10px;width:112px}
.vbtn{
  padding:16px 8px;border-radius:16px;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-weight:800;letter-spacing:.08em;font-size:14px;color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .08s, background .12s, box-shadow .12s;
}
.vbtn small{font-size:10px;color:var(--gold);letter-spacing:.06em;font-weight:700}
.vbtn .vg{font-size:16px;color:var(--teal-3);filter:drop-shadow(0 0 6px rgba(20,184,166,.5))}
#btn-rise:active,#btn-rise.press{transform:scale(.94);background:rgba(20,184,166,.28);
  box-shadow:0 0 22px rgba(20,184,166,.5)}
#btn-dive:active,#btn-dive.press{transform:scale(.94);background:rgba(90,140,255,.26);
  box-shadow:0 0 22px rgba(90,140,255,.5)}
#btn-dive .vg{color:#8fb4ff;filter:drop-shadow(0 0 6px rgba(90,140,255,.5))}
#btn-dive small{color:#8fb4ff}

#keys-hint{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 20px);
  z-index:31;color:var(--muted);font-size:12px;letter-spacing:.02em;pointer-events:none;
  background:var(--glass);padding:8px 16px;border-radius:999px;border:1px solid var(--line-2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:92vw;
}
#keys-hint kbd{background:rgba(255,255,255,.08);border:1px solid var(--line-2);border-radius:6px;
  padding:2px 7px;font-family:inherit;font-size:11px;color:var(--teal-3);font-weight:700}

/* connection lost toast */
#conn-lost{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 60px);transform:translateX(-50%);z-index:60;
  background:rgba(20,10,12,.85);border:1px solid rgba(255,90,82,.4);color:#ffd9d6;
  padding:11px 20px;border-radius:999px;font-size:13px;font-weight:600;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);
  display:flex;align-items:center;gap:9px;animation:screenIn .35s both;
}
#conn-lost .spin{width:13px;height:13px;border:2px solid rgba(255,90,82,.3);border-top-color:#ff5a52;
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* device-conditional */
.touch #keys-hint{display:none}
body:not(.touch) #dpad{width:150px;height:150px;opacity:.92}
body:not(.touch) #vpad{width:100px}
body:not(.touch) #controls{opacity:.9}

/* short/landscape phones: tighten */
@media (max-height:560px){
  .wordmark{margin-top:2vh;font-size:clamp(40px,14vw,90px)}
  .screen{padding-top:calc(env(safe-area-inset-top) + 52px)}
  #leaderboard-wrap{margin-top:12px}
}
@media (min-width:760px){
  #dpad{width:180px;height:180px}
  #vpad{width:120px}
}