/* ===== ECHO PANIC : Night Shift ===== */

@font-face{font-family:'Oxanium';src:url('fonts/oxanium-latin.woff2') format('woff2');font-weight:200 800;font-display:swap;}
@font-face{font-family:'Rajdhani';src:url('fonts/rajdhani-latin.woff2') format('woff2');font-weight:300 700;font-display:swap;}

:root{
  --void:#06090B;
  --ink2:#0D161B;
  --rail:#151D22;
  --catch:#2B3A41;
  --cream:#E9DFCC;
  --sub:#5F7078;
  --coral:#FF5A36;
  --coral-d:#B83B1F;
  --lime:#C6FF2E;
  --amber:#FFB627;
  --lilac:#8F7CFF;
  --lilac2:#DCD6FF;
  --hudH: clamp(52px, 7vh, 70px);
  --arenaW: 100vw;
  --rnd: 'Oxanium', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Rajdhani', 'Trebuchet MS', system-ui, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
body.touch{ --hudH: 48px; }
body.touch:not(.portrait){ --hudH: 40px; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--void);
  color:var(--cream);
  font-family:var(--body);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;-webkit-user-select:none;
}
.num{font-family:var(--rnd);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
button{font:inherit;color:inherit;}

#app{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  height:100dvh;
  padding:var(--sat) var(--sar) 0 var(--sal);
  background:
    radial-gradient(120% 120% at 50% 45%, rgba(10,16,19,0) 55%, rgba(0,0,0,.55) 100%),
    var(--void);
}
/* damage: an ember tint pulses in the outer margin only */
#app::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;
  box-shadow:inset 0 0 0 2px rgba(255,90,54,.0), inset 0 0 70px 6px rgba(255,90,54,.55);}
body.hit #app::after{animation:hitTint .45s ease-out;}
@keyframes hitTint{0%{opacity:1;}100%{opacity:0;}}

/* ---------- HUD ---------- */
#hud{
  flex:0 0 auto;
  position:relative;
  height:var(--hudH);
  width:min(100%, calc(var(--arenaW) + 8px));
  margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
  gap:10px;
  padding:0 clamp(8px, 1.4vw, 16px);
  z-index:20;
}
#hud::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:1px;
  background:linear-gradient(90deg, rgba(43,58,65,0), rgba(43,58,65,.7) 20%, rgba(43,58,65,.7) 80%, rgba(43,58,65,0));}
.hud-left{justify-self:start;display:flex;align-items:center;gap:clamp(8px,1.2vw,16px);min-width:0;}
.hud-right{justify-self:end;display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);min-width:0;}
.hud-center{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:3px;}
.clock{display:flex;flex-direction:column;align-items:center;gap:3px;}
.hud-center .echo-cell{position:absolute;right:calc(100% + clamp(12px,1.6vw,22px));top:50%;transform:translateY(-50%);flex-direction:row-reverse;}
.hud-center .echo-meta{align-items:flex-end;}
.hud-cell{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1;gap:4px;}
.hud-label{
  font-family:var(--rnd);
  font-size:10px;
  letter-spacing:.22em;
  color:var(--sub);
  font-weight:600;
  text-transform:uppercase;
  white-space:nowrap;
}
.hud-label b{color:var(--lilac2);font-weight:700;letter-spacing:.06em;}
.hud-value{font-size:clamp(18px,2.9vh,26px);font-weight:700;color:var(--cream);line-height:1;}
.score-cell .hud-value{min-width:3ch;}
#timer{font-size:clamp(22px,3.8vh,34px);font-weight:800;letter-spacing:.02em;}
.clock.beat{animation:tbeat .6s ease-out;}
.clock.beat b{color:var(--lime);}
@keyframes tbeat{0%{transform:scale(1);}30%{transform:scale(1.14);}100%{transform:scale(1);}}

/* multiplier pill */
.mult{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:clamp(44px,5.6vh,56px); height:clamp(24px,3.4vh,30px);
  border-radius:999px;
  border:1.5px solid var(--cream);
  color:var(--cream);
  transition:color .15s, border-color .15s, transform .12s, opacity .2s;
  background:rgba(0,0,0,.35);
}
.mult-x{font-weight:800;font-size:clamp(13px,2vh,17px);line-height:1;position:relative;z-index:2;}
.mult-bar{position:absolute;left:7px;right:7px;bottom:3px;height:2px;border-radius:2px;background:currentColor;opacity:.22;z-index:1;overflow:hidden;}
.mult-bar>i{display:block;height:100%;width:100%;background:currentColor;transform-origin:left center;transform:scaleX(0);}
.mult[data-m="1"]{color:var(--cream);border-color:rgba(233,223,204,.55);opacity:.7;}
.mult[data-m="1"] .mult-bar{opacity:0;}
.mult[data-m="2"]{color:var(--lime);border-color:var(--lime);opacity:1;}
.mult[data-m="3"]{color:var(--amber);border-color:var(--amber);}
.mult[data-m="4"]{color:var(--coral);border-color:var(--coral);}
.mult[data-m="5"]{color:#fff;border-color:#fff;animation:shimmer 2.4s ease-in-out infinite;}
.mult[data-m="2"],.mult[data-m="3"],.mult[data-m="4"]{box-shadow:0 0 12px -2px currentColor;}
@keyframes shimmer{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}50%{box-shadow:0 0 14px 0 rgba(255,255,255,.55);}}
.mult.pop{transform:scale(1.18);}
.mult.dead{transform:scale(.82);opacity:.5;color:var(--sub);border-color:var(--sub);}
.mult.ghostpop::after{
  content:'';position:absolute;inset:-2px;border-radius:999px;border:2px solid var(--lilac);
  opacity:0;animation:multEcho .5s ease-out;
}
@keyframes multEcho{0%{opacity:.6;transform:translate(0,0) scale(1);}100%{opacity:0;transform:translate(4px,4px) scale(1.16);}}

/* lives: every life keeps its slot */
.lives{display:flex;gap:4px;align-items:center;}
.life{position:relative;display:block;width:clamp(20px,3vh,26px);height:clamp(20px,3vh,26px);}
.life img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;}
.life-socket{filter:grayscale(1) brightness(.55);opacity:.3;}
.life-ico{filter:drop-shadow(0 0 4px rgba(255,90,54,.5));}
.life.lost .life-ico{animation:lifedie .6s cubic-bezier(.5,0,.9,.5) forwards;}
@keyframes lifedie{
  0%{transform:translateY(0) rotate(0) scale(1);opacity:1;filter:brightness(3) drop-shadow(0 0 6px #fff);}
  15%{transform:translateY(-3px) rotate(-10deg) scale(1.15);filter:brightness(1.4);}
  100%{transform:translateY(30px) rotate(70deg) scale(.8);opacity:0;}}

/* echo ring with the countdown inside it */
.echo-cell{display:flex;align-items:center;gap:8px;}
.echo-wrap{position:relative;width:clamp(28px,4.2vh,36px);height:clamp(28px,4.2vh,36px);flex:0 0 auto;}
#echoRing{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.echo-track{fill:none;stroke:rgba(220,214,255,.12);stroke-width:3.5;}
.echo-arc{fill:none;stroke:var(--lilac);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:100.53;stroke-dashoffset:0;transition:stroke .2s;
  filter:drop-shadow(0 0 3px rgba(143,124,255,.7));}
.echo-num{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:clamp(12px,1.8vh,15px);color:var(--lilac2);line-height:1;}
.echo-meta{display:flex;flex-direction:column;gap:4px;line-height:1;}
.ghost-count{font-weight:700;font-size:clamp(14px,2.2vh,19px);color:var(--lilac2);line-height:1;}
.ghost-count .gc-max{font-size:.7em;color:var(--sub);margin-left:1px;}
.echo-cell.near .echo-arc{stroke:#fff;}
.echo-cell.near .echo-wrap{animation:echoPulse .5s ease-in-out infinite;}
@keyframes echoPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}

/* icon buttons */
.hud-btns{display:flex;gap:4px;align-items:center;}
.icon-btn{
  width:clamp(32px,4.6vh,40px);height:clamp(32px,4.6vh,40px);
  border:1px solid rgba(43,58,65,.8);background:rgba(13,22,27,.7);color:var(--sub);cursor:pointer;padding:7px;
  border-radius:50%;transition:color .15s,background .15s,border-color .15s,opacity .2s;
}
.icon-btn:hover{color:var(--cream);border-color:var(--catch);}
.icon-btn svg{width:100%;height:100%;display:block;}
.pause-btn .pz,.pause-btn .pl{fill:currentColor;}
.pause-btn .pl{display:none;}
body.paused .pause-btn .pz{display:none;}
body.paused .pause-btn .pl{display:block;}
body:not(.playing) .pause-btn{opacity:0;pointer-events:none;}
.mute-btn .spk{fill:currentColor;}
.mute-btn .wave{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.mute-btn .cross{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;display:none;}
body.muted .wave{display:none;}
body.muted .cross{display:block;}
body.muted .mute-btn{color:var(--coral);}

/* ---------- narrow HUD (phones held upright) ---------- */
@media (max-width:560px){
  #hud{padding:0 8px;gap:6px;}
  #hud::after{left:0;right:0;}
  .hud-left{gap:7px;}
  .hud-right{gap:9px;}
  .hud-label{font-size:8px;letter-spacing:.16em;}
  .hud-value{font-size:18px;}
  #timer{font-size:20px;}
  .mult{width:40px;height:22px;}
  .mult-x{font-size:12px;}
  .lives-cell .hud-label,.echo-meta .hud-label{display:none;}
  .life{width:18px;height:18px;}
  .lives{gap:2px;}
  .echo-cell{gap:4px;}
  .echo-wrap{width:26px;height:26px;}
  .echo-num{font-size:11px;}
  .ghost-count{font-size:13px;}
  .icon-btn{width:30px;height:30px;padding:6px;}
  .hud-btns{gap:3px;}
}
@media (max-width:370px){
  .echo-meta{display:none;}
}
/* phones held sideways: a slim strip */
body.touch:not(.portrait) .hud-cell{flex-direction:row;align-items:center;gap:7px;}
body.touch:not(.portrait) .clock{flex-direction:row;gap:10px;}
body.touch:not(.portrait) .echo-meta{flex-direction:row;align-items:center;gap:6px;}
body.touch:not(.portrait) .lives-cell .hud-label{display:none;}
body.touch:not(.portrait) .hud-value{font-size:18px;}
body.touch:not(.portrait) #timer{font-size:20px;}
body.touch:not(.portrait) .icon-btn{width:30px;height:30px;padding:6px;}
body.touch:not(.portrait) .echo-wrap{width:28px;height:28px;}
body.touch:not(.portrait) .life{width:20px;height:20px;}
body.touch:not(.portrait) .mult{height:24px;}

/* ---------- stage ---------- */
#stage{
  position:relative;
  flex:1 1 auto;
  min-height:0; min-width:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#canvasWrap{
  position:relative;
  line-height:0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(43,58,65,.5), 0 18px 70px rgba(0,0,0,.75);
}
body.touch #canvasWrap{border-radius:0;box-shadow:none;}
#canvasWrap canvas{display:block;width:100%;height:100%;}
#boot{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--rnd);letter-spacing:.4em;color:var(--sub);font-size:14px;line-height:1;
  background:var(--void);z-index:5;
}
#boot.gone{display:none;}

/* move hint, under the robot */
#moveHint{
  position:absolute;left:0;top:0;width:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:8px;line-height:1;
  pointer-events:none;opacity:0;transition:opacity .35s ease;
}
#moveHint.show{opacity:1;}
#moveHint.show .mh-keys,#moveHint.show .mh-drag{animation:hintBob 1.6s ease-in-out infinite;}
@keyframes hintBob{0%,100%{transform:translateY(0);}50%{transform:translateY(3px);}}
.mh-keys{display:grid;grid-template-columns:repeat(3,26px);grid-auto-rows:26px;gap:4px;}
.mh-keys .kc:nth-child(1){grid-column:2;grid-row:1;}
.mh-keys .kc:nth-child(2){grid-column:1;grid-row:2;}
.mh-keys .kc:nth-child(3){grid-column:2;grid-row:2;}
.mh-keys .kc:nth-child(4){grid-column:3;grid-row:2;}
.kc{display:grid;place-items:center;border-radius:6px;
  font-family:var(--rnd);font-weight:700;font-size:13px;color:var(--cream);
  background:rgba(6,9,11,.78);border:1.5px solid rgba(233,223,204,.42);
  box-shadow:0 3px 0 rgba(233,223,204,.16), 0 0 14px rgba(0,0,0,.6);}
#moveHint.show .kc{animation:kcPress 2.4s ease-in-out infinite;}
#moveHint.show .kc:nth-child(2){animation-delay:.6s;}
#moveHint.show .kc:nth-child(3){animation-delay:1.2s;}
#moveHint.show .kc:nth-child(4){animation-delay:1.8s;}
@keyframes kcPress{0%,18%,100%{transform:translateY(0);border-color:rgba(233,223,204,.42);color:var(--cream);}
  6%,12%{transform:translateY(2px);border-color:var(--coral);color:var(--coral);box-shadow:0 1px 0 rgba(255,90,54,.3),0 0 12px rgba(255,90,54,.35);}}
.mh-drag{display:none;position:relative;width:52px;height:52px;border-radius:50%;
  border:1.5px solid rgba(220,214,255,.5);background:rgba(6,9,11,.55);}
.mh-drag i{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:var(--coral);box-shadow:0 0 0 2px #000,0 0 12px rgba(255,90,54,.6);animation:dragDot 2.2s ease-in-out infinite;}
@keyframes dragDot{0%,100%{transform:translate(0,0);}25%{transform:translate(12px,-6px);}50%{transform:translate(-4px,12px);}75%{transform:translate(-12px,-4px);}}
.mh-text{font-family:var(--rnd);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;color:var(--cream);opacity:.75;text-shadow:0 1px 6px #000,0 0 12px #000;}
.mh-t{display:none;}
body.touch .mh-keys,body.touch .mh-k{display:none;}
body.touch .mh-t{display:block;}
#moveHint.above{flex-direction:column-reverse;}

/* level-up toast with a phosphor afterimage */
#toast{position:absolute;left:0;right:0;top:16%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;
  line-height:1;pointer-events:none;opacity:0;}
#toast.show{animation:toastIn 2.4s ease-out forwards;}
.toast-big{font-family:var(--rnd);font-weight:800;font-size:clamp(28px,6vmin,52px);letter-spacing:.12em;color:var(--cream);
  text-shadow:.06em .06em 0 rgba(143,124,255,.55), .12em .12em 0 rgba(143,124,255,.25), 0 0 24px rgba(0,0,0,.8);}
.toast-small{font-family:var(--rnd);font-weight:600;font-size:clamp(10px,1.8vmin,13px);letter-spacing:.2em;text-transform:uppercase;color:var(--lilac2);
  text-shadow:0 1px 8px #000;}
@keyframes toastIn{0%{opacity:0;transform:scale(1.25);}10%{opacity:1;transform:scale(1);}75%{opacity:1;}100%{opacity:0;transform:translateY(-8px);}}

/* ---------- overlays ---------- */
.overlay{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:16px;
  overflow:auto;
  transition:opacity .22s ease;
  z-index:30;
}
.overlay.hidden{opacity:0;pointer-events:none;}
#veil{background:radial-gradient(ellipse at 50% 50%, rgba(2,4,5,.1) 0, rgba(2,4,5,.4) 70%, rgba(2,4,5,.6) 100%);padding:0;}
.veil-inner.start{position:absolute;inset:0;max-width:none;display:grid;gap:0;
  grid-template-rows:1fr var(--startgap,120px) 1fr;justify-items:center;padding:12px 16px;}
.start-top{align-self:end;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6vh,16px);
  padding:0 12px clamp(6px,1.4vh,14px);max-width:min(92vw,760px);}
.start-bottom{align-self:start;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.4vh,22px);padding-top:clamp(8px,1.6vh,16px);}
.tagline{text-shadow:0 2px 10px rgba(0,0,0,.9);}
.hint{text-shadow:0 2px 8px rgba(0,0,0,.9);}
.hint b{color:var(--cream);font-weight:700;}
.menu-link{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
  font-family:var(--rnd);font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--sub);padding:8px 12px;border-radius:8px;transition:color .15s;}
.menu-link:hover{color:var(--cream);}
.menu-link svg{width:1.3em;height:1.3em;fill:currentColor;}
#results{background:rgba(2,4,5,.74);transition:opacity .25s ease;}
#results:not(.hidden) .card{animation:cardIn .28s cubic-bezier(.2,1.2,.4,1);}
@keyframes cardIn{0%{transform:translateY(14px) scale(.96);opacity:0;}100%{transform:none;opacity:1;}}
#pauseOverlay{background:rgba(2,4,5,.82);z-index:40;}

.veil-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.4vh,22px);text-align:center;max-width:min(92vw,720px);}

/* title with phosphor afterimage */
.title{position:relative;margin:0;font-family:var(--rnd);font-weight:800;
  font-size:clamp(30px, min(10vh, 11.5vw), 92px);letter-spacing:.02em;line-height:1;color:var(--cream);
}
.title .tghost,.title .tname{position:absolute;inset:0;white-space:nowrap;}
.title .tghost{color:var(--lilac);text-shadow:0 0 10px rgba(143,124,255,.5);}
.title .g1{opacity:.5;animation:gshift1 6s steps(1,end) infinite, gburn 6s ease-in-out infinite;}
.title .g2{opacity:.3;animation:gshift2 6s steps(1,end) infinite, gburn 6s ease-in-out .3s infinite;}
.title .tname{position:relative;color:var(--cream);text-shadow:0 0 18px rgba(233,223,204,.25), 0 6px 22px rgba(0,0,0,.6);}
@keyframes gshift1{0%,49%{transform:translate(.07em,.07em);}50%,100%{transform:translate(.11em,.09em);}}
@keyframes gshift2{0%,49%{transform:translate(.14em,.14em);}50%,100%{transform:translate(.2em,.17em);}}
@keyframes gburn{0%,100%{opacity:.5;}45%{opacity:.5;}50%{opacity:.14;}55%{opacity:.5;}}

.tagline{margin:0;color:var(--lilac2);font-size:clamp(15px,2.2vh,21px);font-weight:500;letter-spacing:.05em;line-height:1.3;max-width:30ch;}
.hint{margin:0;color:var(--sub);font-size:clamp(11px,1.6vh,14px);letter-spacing:.14em;text-transform:uppercase;font-family:var(--rnd);line-height:1.4;}

.pill{
  font-family:var(--rnd);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  border:none;cursor:pointer;border-radius:999px;
  padding:clamp(12px,1.9vh,17px) clamp(40px,6vw,64px);
  font-size:clamp(17px,2.5vh,23px);line-height:1;
  transition:transform .08s ease, box-shadow .15s ease, filter .15s;
  box-shadow:0 6px 0 var(--coral-d), 0 0 30px rgba(255,90,54,.42);
}
.pill.coral{background:linear-gradient(180deg,#FF6E4E,var(--coral) 55%,#F04E2C);color:#000;}
.pill.coral:hover{filter:brightness(1.08);}
.pill.coral:active,.pill.coral.pressed{transform:translateY(5px);box-shadow:0 1px 0 var(--coral-d), 0 0 16px rgba(255,90,54,.3);}

/* results card */
.card{
  width:min(92vw,420px);
  background:var(--ink2);
  border:1px solid rgba(43,58,65,.95);
  border-radius:22px;
  padding:clamp(18px,3vh,28px) clamp(18px,4vw,30px) clamp(16px,2.6vh,24px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,12px);
  box-shadow:0 24px 80px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
}
.card-kicker{color:var(--cream);opacity:.7;margin-bottom:4px;}
.rscore{font-family:var(--rnd);font-weight:800;font-size:clamp(52px,11vh,92px);line-height:.95;color:var(--cream);
  text-shadow:.04em .04em 0 rgba(143,124,255,.35), 0 0 22px rgba(233,223,204,.22);}
.best-row{position:relative;display:flex;align-items:baseline;gap:10px;}
.rbest{font-family:var(--rnd);font-weight:700;font-size:clamp(18px,2.8vh,24px);color:var(--lilac2);}
.best-stamp{
  position:absolute;left:calc(100% + 12px);top:50%;margin-top:-14px;
  font-family:var(--rnd);font-weight:800;letter-spacing:.14em;white-space:nowrap;
  color:var(--amber);border:2px solid var(--amber);border-radius:8px;
  padding:4px 9px;font-size:12px;line-height:1;
  transform:rotate(-8deg);
  box-shadow:0 0 18px rgba(255,182,39,.45), inset 0 0 10px rgba(255,182,39,.2);
  animation:stampIn .45s cubic-bezier(.2,1.6,.4,1) .35s both;
}
@keyframes stampIn{0%{transform:rotate(-8deg) scale(2);opacity:0;}60%{transform:rotate(-8deg) scale(.92);opacity:1;}100%{transform:rotate(-8deg) scale(1);}}
.best-stamp.hidden{display:none;}
@media (max-width:420px){ .best-stamp{position:static;margin:0 0 0 4px;} .best-row{align-items:center;flex-wrap:wrap;justify-content:center;} }

.stats{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:6px 0 4px;
  padding-top:12px;border-top:1px solid rgba(43,58,65,.6);}
.stat{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.stat:first-child{grid-column:1 / -1;justify-content:center;gap:12px;}
.stat-k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);font-family:var(--rnd);font-weight:600;}
.stat-v{font-weight:700;font-size:clamp(14px,2.1vh,17px);color:var(--cream);}

.board{width:100%;margin:2px 0 4px;display:flex;flex-direction:column;gap:6px;}
.board.hidden{display:none;}
.board > .hud-label{text-align:center;}
.board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;}
.board-list li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;font-size:13px;
  color:var(--sub);padding:5px 10px;border-radius:8px;font-family:var(--rnd);background:rgba(255,255,255,.02);}
.board-list .rk{font-weight:800;text-align:center;}
.board-list .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.board-list li.top1{color:var(--amber);background:rgba(255,182,39,.07);}
.board-list li.top2{color:var(--cream);}
.board-list li.top3{color:#E0A07A;}
.board-list li.mine{color:var(--lime);font-weight:700;box-shadow:inset 0 0 0 1px rgba(198,255,46,.35);}
.board-list li a{color:inherit;text-decoration:none;}
.board-list li a:hover{text-decoration:underline;}

#playAgainBtn{margin-top:6px;}
.pause-title{font-family:var(--rnd);font-weight:800;letter-spacing:.2em;font-size:clamp(28px,6vh,52px);margin:0;color:var(--cream);
  text-shadow:.06em .06em 0 rgba(143,124,255,.45);}

/* ---------- touch control: a floating stick over the whole game ---------- */
#deck{display:none;position:fixed;left:0;right:0;top:calc(var(--hudH) + var(--sat));bottom:0;z-index:25;pointer-events:none;}
body.touch #deck{display:block;}
#joyZone{position:absolute;inset:0;pointer-events:none;touch-action:none;}
body.touch.playing:not(.paused) #joyZone{pointer-events:auto;}
#joy{
  --jr:clamp(48px, 9vmin, 64px);
  position:absolute;left:0;top:0;
  width:calc(var(--jr) * 2);height:calc(var(--jr) * 2);
  margin:calc(var(--jr) * -1) 0 0 calc(var(--jr) * -1);
  border-radius:50%;
  border:2px solid rgba(220,214,255,.5);
  background:radial-gradient(circle, rgba(6,9,11,.25), rgba(143,124,255,.08) 68%, rgba(143,124,255,0) 72%);
  box-shadow:0 0 0 1px rgba(0,0,0,.3), inset 0 0 18px rgba(143,124,255,.16);
  pointer-events:none;
  opacity:.85;
  transition:opacity .18s ease;
  will-change:transform;
}
body:not(.playing) #joy{opacity:0;}
#joy.rest{opacity:.3;transition:opacity .3s ease, transform .22s cubic-bezier(.2,.9,.3,1);}
body.idle #joy.rest{opacity:.55;}
#joyKnob{
  position:absolute;left:50%;top:50%;
  width:calc(var(--jr) * .82);height:calc(var(--jr) * .82);
  margin:calc(var(--jr) * -.41) 0 0 calc(var(--jr) * -.41);
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #FF8A66, var(--coral) 60%, #D9441F);
  box-shadow:0 0 0 2px #000, 0 0 16px rgba(255,90,54,.55), 0 4px 14px rgba(0,0,0,.5);
  will-change:transform;
}

/* a press made while the page is still loading is kept, and the button says so */
.pill.waiting{animation:waitPulse .9s ease-in-out infinite;}
@keyframes waitPulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.25);}}
/* before a run the HUD is a quiet preview, so the start screen never reads as a frozen game */
#hud .hud-left,#hud .hud-center,#hud .lives-cell{transition:opacity .25s;}
body:not(.playing) #hud .hud-left,body:not(.playing) #hud .hud-center,body:not(.playing) #hud .lives-cell{opacity:.35;}