:root{
  --dusk:#f3c98b; --alp:#ffb27a; --ice:#bcd8f5; --deep:#1b2a44; --deeper:#101a2c;
  --ink:#f4f8ff; --muted:#a9bcd8;
  --pad-b: env(safe-area-inset-bottom); --pad-t: env(safe-area-inset-top);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;overflow:hidden;background:var(--deeper);color:var(--ink);
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  user-select:none;-webkit-user-select:none;touch-action:none;
}
#scene{position:fixed;inset:0}
canvas{display:block}

.layer{position:fixed;inset:0;z-index:10}
.hidden{display:none !important}

/* ── typography bits ─────────────────────────────────────────── */
.cap{
  display:block;font-size:10px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
h1{
  margin:12px 0 6px;font-size:40px;letter-spacing:-.02em;font-weight:800;
  background:linear-gradient(180deg,#fff 30%,var(--dusk));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
h2{margin:0 0 14px;font-size:26px;font-weight:800;letter-spacing:-.01em}
.sub{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.5}

/* ── sheets ──────────────────────────────────────────────────── */
.sheet{
  display:flex;align-items:center;justify-content:center;padding:24px;
  padding-top:calc(24px + var(--pad-t));padding-bottom:calc(24px + var(--pad-b));
  background:radial-gradient(120% 90% at 50% 0%,rgba(28,44,72,.55),rgba(10,16,28,.9));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.card{
  width:100%;max-width:360px;text-align:center;
  background:linear-gradient(170deg,rgba(38,56,88,.92),rgba(20,31,52,.94));
  border:1px solid rgba(160,196,240,.18);border-radius:22px;
  padding:28px 24px;box-shadow:0 30px 70px -30px #000,0 1px 0 rgba(255,255,255,.09) inset;
}
.mark{width:74px;margin:0 auto}
.mark svg{width:100%;display:block}

button{font:inherit;cursor:pointer;border:0;border-radius:14px;transition:transform .12s,filter .12s}
button:active{transform:scale(.96)}
button:focus-visible{outline:2px solid var(--dusk);outline-offset:3px}
.primary{
  width:100%;padding:15px;font-size:16px;font-weight:800;letter-spacing:.02em;color:#20304c;
  background:linear-gradient(180deg,#ffe3b6,var(--alp));
  box-shadow:0 10px 26px -12px var(--alp);
}
.ghost{
  padding:12px 16px;font-size:13px;font-weight:700;color:var(--ice);
  background:rgba(150,190,235,.11);border:1px solid rgba(160,196,240,.2);
}
.wide{width:100%;margin-top:10px}
.row{display:flex;align-items:center;gap:12px;margin-top:14px}
.row .ghost{flex:1}
.best{text-align:right;line-height:1.15}
.best strong{font-size:19px;font-variant-numeric:tabular-nums}

.rules{margin:0 0 20px;padding:0;list-style:none;text-align:left;font-size:13.5px;line-height:1.6;color:#d6e4f7}
.rules li{padding:9px 0;border-bottom:1px solid rgba(160,196,240,.13)}
.rules li:last-child{border:0}
.rules b{color:var(--dusk)}

.tag{margin-bottom:6px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.stats div{background:rgba(12,20,34,.5);border-radius:12px;padding:11px 6px}
.stats strong{display:block;font-size:20px;margin-top:3px;font-variant-numeric:tabular-nums}
.bestline{
  margin:0 0 16px;padding:8px;border-radius:10px;font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#2b2010;
  background:linear-gradient(90deg,var(--dusk),#ffd9a5);
}

/* ── hud ─────────────────────────────────────────────────────── */
#hud{pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}
.hud-top{
  display:flex;align-items:flex-start;gap:10px;
  padding:calc(12px + var(--pad-t)) 14px 0;
}
.readout{
  background:rgba(14,24,40,.52);border:1px solid rgba(160,196,240,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:7px 13px;border-radius:13px;line-height:1.1;
}
.readout strong{font-size:21px;font-variant-numeric:tabular-nums}
.readout.mid strong{color:var(--dusk)}
.hud-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.lives{display:flex;gap:5px}
.lives i{
  width:11px;height:11px;border-radius:50%;display:block;
  background:linear-gradient(180deg,#fff,#a8c6e8);box-shadow:0 0 9px rgba(200,225,255,.6);
}
.lives i.gone{background:rgba(255,255,255,.16);box-shadow:none}
.glyph{
  pointer-events:auto;width:40px;height:40px;border-radius:13px;font-size:13px;color:var(--ice);
  background:rgba(14,24,40,.52);border:1px solid rgba(160,196,240,.16);
}

.hud-mid{display:flex;flex-direction:column;align-items:center;gap:8px}
.combo{
  padding:6px 15px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;
  background:rgba(14,24,40,.55);border:1px solid rgba(160,196,240,.22);
}
.combo em{font-style:normal;color:var(--dusk);margin-left:5px}
.air{
  padding:5px 18px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.22em;
  color:#2b2010;background:linear-gradient(90deg,var(--dusk),#fff0d2);
  animation:pop .3s ease;
}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

.hud-bottom{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 14px calc(96px + var(--pad-b));
}
.run,.hint{
  padding:4px 12px;border-radius:999px;
  background:rgba(14,24,40,.5);border:1px solid rgba(160,196,240,.16);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.run{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dusk)}
.hint{font-size:11px;color:#cfe0f5;letter-spacing:.05em;transition:opacity .6s}

/* ── touch pads ──────────────────────────────────────────────── */
#touch{
  display:flex;align-items:flex-end;gap:12px;pointer-events:none;
  padding:0 16px calc(18px + var(--pad-b));
}
.pad{
  pointer-events:auto;width:66px;height:58px;font-size:19px;color:var(--ice);
  background:rgba(20,33,54,.6);border:1px solid rgba(160,196,240,.22);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.pad.jump{
  margin-left:auto;width:88px;font-size:13px;font-weight:900;letter-spacing:.09em;
  color:#20304c;background:linear-gradient(180deg,#ffe3b6,var(--alp));border:0;
}

/* ── boot ────────────────────────────────────────────────────── */
#boot{
  display:flex;align-items:center;justify-content:center;z-index:40;
  background:linear-gradient(180deg,#16233c,#0d1524);transition:opacity .5s;
}
.boot-inner{text-align:center}
.snowline{width:170px;height:3px;border-radius:2px;background:rgba(255,255,255,.13);overflow:hidden;margin:0 auto 14px}
.snowline i{display:block;height:100%;width:35%;border-radius:2px;background:linear-gradient(90deg,var(--dusk),#fff);animation:slide 1.15s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}

@media (min-width:760px){
  h1{font-size:48px}
  .card{max-width:400px;padding:34px 30px}
  .readout strong{font-size:24px}
  .pad{width:76px;height:64px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}