/* Layout: mobile-first one-screen app — fixed-height HUD, jar fills the rest, pigment chain below */
:root{
  --bg:#0c1315; --panel:#152022; --ink:#f1e8d8; --muted:#93a29d; --accent:#f2b544; --line:#2b3b3c;
  --display:'Bagel Fat One','Arial Rounded MT Bold',system-ui,sans-serif;
  --ui:'Outfit',system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
html{height:100%;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);overflow:hidden;
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  background-image:radial-gradient(120% 60% at 50% 0%,#18282a 0%,var(--bg) 60%)}
.app{height:100%;height:100svh;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding-inline:16px;padding-block:8px}
.hud{flex:0 0 44px;width:100%;max-width:440px;display:grid;grid-template-columns:minmax(0,1fr) 34px 3.4em 3.4em 34px 34px;align-items:center;gap:7px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(14px,4.3vw,20px);margin:0;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:clip;
  background:linear-gradient(90deg,#ff5a6e,#f7a23c,#f2d544,#5fd0a0,#4aa8ff,#b07cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.stat span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1}
.stat b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.next{position:relative;width:36px;height:36px}
#nextCv{width:36px;height:36px;display:block}
.next span{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1}
.icon-btn{width:100%;aspect-ratio:1;max-width:100%;display:grid;place-items:center;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:50%;padding:0;cursor:pointer}
.icon-btn svg{width:18px;height:18px}
.icon-btn[aria-pressed="false"]{opacity:.55}
.icon-btn:hover{color:var(--ink);border-color:#4a5f60}
.icon-btn:focus-visible,.cta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stage{flex:1 1 0;min-height:0;width:100%;display:flex;justify-content:center;align-items:center;position:relative;touch-action:none}
#game{display:block;touch-action:none;border-radius:6px 6px 20px 20px;box-shadow:0 0 0 1px #2a3a3b,0 16px 50px rgba(0,0,0,.5)}
#game:focus{outline:none}
.chain{flex:0 0 auto;width:100%;max-width:440px;display:flex;flex-direction:column;gap:2px;align-items:center}
#chainCv{width:100%;height:30px;display:block}
.chain small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px}
[hidden]{display:none!important}
.card{background:rgba(12,19,21,.9);border:1px solid var(--line);border-radius:16px;padding:22px 24px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;backdrop-filter:blur(6px);width:100%;max-width:290px}
.card h2{font-family:var(--display);font-weight:400;font-size:26px;margin:0;text-wrap:balance}
.card p{margin:0;color:var(--muted)}
.card .big{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums}
.cta{font:800 16px var(--ui);color:#1a1206;background:var(--accent);border:0;border-radius:999px;padding:13px 22px;min-height:48px;cursor:pointer}
.cta:hover{filter:brightness(1.08)}
@media (min-width:600px){
  .hud{max-width:520px;grid-template-columns:minmax(0,1fr) 36px 4.4em 4.4em 36px 36px;gap:12px}
  h1{font-size:28px}
  .stat b{font-size:22px}
  .chain{max-width:520px}
  #chainCv{height:36px}
  .chain small{font-size:10px}
}
@media (max-width:350px){ .hud{gap:6px;grid-template-columns:minmax(0,1fr) 30px 3.1em 3.1em 30px 30px} }