:root{
  --crimson:#ff2a2a; --crimson-deep:#8b0000; --ember:#ff7a18;
  --gold:#e9c46a; --gold-bright:#ffd97a;
  --ink:#0a0608; --panel:rgba(18,8,10,.78);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#000;overflow:hidden;
  font-family:"Segoe UI",system-ui,sans-serif;color:#f5e9e9;
  -webkit-user-select:none;user-select:none;cursor:default}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 100% at 50% 0%,#1a0a0e 0%,#0a0406 55%,#000 100%)}
canvas{display:block;image-rendering:auto}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;padding:18px 26px;
  display:flex;justify-content:space-between;align-items:flex-start;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.hud-left,.hud-right{display:flex;flex-direction:column;gap:4px}
.hud-right{align-items:flex-end}
.lbl{font-size:11px;color:#b88;letter-spacing:.22em;margin-right:8px}
.hud-score #score,.hud-len #length{font-size:30px;color:#fff;
  text-shadow:0 0 18px var(--crimson),0 0 4px #fff}
.hud-score{display:flex;align-items:baseline}
.hud-len{display:flex;align-items:baseline}
.hud-sub{font-size:12px;color:var(--gold);letter-spacing:.12em;opacity:.9}
.boostbar{width:160px;height:9px;margin-top:6px;border-radius:6px;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,120,30,.35);overflow:hidden}
#boostfill{height:100%;width:100%;border-radius:6px;
  background:linear-gradient(90deg,#ff7a18,#ff2a2a);box-shadow:0 0 14px #ff5a1a;transition:width .08s linear}
.boostlbl{margin-top:3px}
.combo{font-size:34px;font-weight:900;color:var(--gold-bright);
  text-shadow:0 0 22px var(--ember),0 0 6px #fff;transform:translateY(8px);
  transition:transform .12s,opacity .3s}
.combo.pop{transform:translateY(0) scale(1.12)}

/* ---------- SCREENS ---------- */
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;text-align:center;z-index:20;
  background:radial-gradient(120% 90% at 50% 40%,rgba(40,8,12,.55),rgba(0,0,0,.86))}
.hidden{display:none!important}

/* TITLE */
.title-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:.32;filter:drop-shadow(0 0 60px #ff1a1a)}
.title-art img{max-width:74%;max-height:74%;object-fit:contain;
  animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.04) translateY(-10px)}}
.title-wrap{position:relative;z-index:2;max-width:760px;padding:0 24px}
.kicker{color:var(--gold);letter-spacing:.5em;font-size:13px;font-weight:700;margin-bottom:8px;
  text-shadow:0 0 12px rgba(233,196,106,.6)}
h1{font-size:clamp(60px,12vw,130px);line-height:.86;font-weight:900;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff 0%,#ffd97a 38%,#ff5a1a 72%,#8b0000 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 30px rgba(255,40,40,.65))}
h1 span{display:block;letter-spacing:.14em;
  background:linear-gradient(180deg,#ff8a3a,#ff2a2a 60%,#5a0000);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{margin-top:14px;font-size:clamp(13px,2vw,18px);letter-spacing:.28em;
  color:#fff;font-weight:700;text-shadow:0 0 16px var(--crimson)}
.pitch{margin:18px auto 26px;max-width:560px;color:#d8b7b7;font-size:15px;line-height:1.6;font-weight:500}
.cta{pointer-events:auto;cursor:pointer;border:none;
  padding:16px 44px;font-size:18px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:#1a0000;border-radius:50px;
  background:linear-gradient(180deg,#ffd97a,#ff9a2a 55%,#ff2a2a);
  box-shadow:0 0 0 2px rgba(255,217,122,.5),0 10px 40px rgba(255,40,40,.5),inset 0 1px 0 #fff6d6;
  transition:transform .12s,box-shadow .2s}
.cta:hover{transform:translateY(-2px) scale(1.03);
  box-shadow:0 0 0 2px #ffd97a,0 16px 50px rgba(255,60,40,.7),inset 0 1px 0 #fff6d6}
.cta:active{transform:translateY(1px) scale(.99)}
.controls{margin-top:26px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
  color:#c79; font-size:13px;letter-spacing:.06em}
.controls b{color:var(--gold-bright)}
.brand{position:absolute;bottom:18px;left:0;right:0;color:#6e4a4a;
  font-size:11px;letter-spacing:.34em;font-weight:700}

/* GAME OVER */
.go-wrap{max-width:620px;padding:0 24px}
.go-kicker{color:var(--crimson);letter-spacing:.42em;font-size:13px;font-weight:800;margin-bottom:6px}
h2{font-size:clamp(40px,8vw,78px);font-weight:900;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff,#ff5a1a 70%,#8b0000);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 26px rgba(255,40,40,.6))}
.go-stats{display:flex;gap:40px;justify-content:center;margin:30px 0 18px}
.go-stats div{display:flex;flex-direction:column}
.go-stats span{font-size:46px;font-weight:900;color:#fff;text-shadow:0 0 18px var(--crimson)}
.go-stats small{font-size:11px;letter-spacing:.24em;color:var(--gold);margin-top:2px}
.go-best{color:var(--gold-bright);font-size:14px;letter-spacing:.1em;margin-bottom:24px;min-height:18px}

/* PAUSE + LOADING */
.pause-wrap h2,.load-wrap p{filter:drop-shadow(0 0 20px #ff2a2a)}
.load-wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.load-wrap p{letter-spacing:.3em;font-size:13px;color:var(--gold)}
.load-snake{width:70px;height:70px;border-radius:50%;
  border:4px solid rgba(255,60,40,.18);border-top-color:#ff2a2a;border-right-color:#ff7a18;
  animation:spin .8s linear infinite;box-shadow:0 0 30px #ff2a2a}
@keyframes spin{to{transform:rotate(360deg)}}
.pause-wrap p{margin-top:14px;color:#c79;letter-spacing:.16em;font-size:14px}