:root{
  --glass:#cfeee0;
  --iron:#243b34;
  --deep:#0e2a23;
  --leaf:#2f7d63;
  --gold:#ffd166;
  --sun:#ffe6a7;
  --terracotta:#c96f4a;
  --blush:#ffb3c1;
  --ink:#0b211b;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#0e2a23}
body{
  font-family:"Avenir Next","Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  color:#f3fff9;
  -webkit-font-smoothing:antialiased;
  touch-action:none;
  overscroll-behavior:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#stage{position:fixed;inset:0;overflow:hidden}
#game{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- HUD ---------- */
.hud{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(14px + env(safe-area-inset-top)) 18px 0;
  pointer-events:none;z-index:3;
}
.hud-chip{
  display:flex;flex-direction:column;gap:1px;
  padding:8px 16px 9px;border-radius:14px;
  background:linear-gradient(180deg,rgba(14,42,35,.62),rgba(14,42,35,.38));
  border:1px solid rgba(207,238,224,.28);
  box-shadow:0 6px 22px rgba(6,24,19,.35), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
}
.hud-best{align-items:flex-end}
.hud-label{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(207,238,224,.72);font-weight:700;
}
.hud-value{
  font-size:30px;line-height:1;font-weight:800;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:#fff7e2;text-shadow:0 2px 10px rgba(255,209,102,.45);
}
.hud-best .hud-value{font-size:22px;color:var(--gold)}

/* ---------- Overlays ---------- */
.overlay{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:radial-gradient(120% 90% at 50% 40%, rgba(9,32,26,.28), rgba(7,24,19,.72));
  animation:fade .28s ease both;
}
.overlay.hidden{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel{
  position:relative;width:min(420px,100%);
  text-align:center;padding:30px 30px 26px;border-radius:26px;
  background:linear-gradient(170deg,rgba(23,63,52,.94),rgba(12,36,29,.96));
  border:1px solid rgba(207,238,224,.26);
  box-shadow:0 26px 70px rgba(4,18,14,.6),
             inset 0 1px 0 rgba(255,255,255,.16),
             0 0 0 6px rgba(207,238,224,.05);
  animation:rise .38s cubic-bezier(.2,.9,.25,1) both;
}
.panel::after{
  content:"";position:absolute;inset:10px;border-radius:18px;pointer-events:none;
  border:1px dashed rgba(255,209,102,.18);
}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.crest{margin:-6px auto 2px;filter:drop-shadow(0 8px 20px rgba(255,209,102,.28))}
.title{
  font-size:clamp(34px,9vw,48px);line-height:.98;font-weight:800;
  letter-spacing:.01em;
  background:linear-gradient(180deg,#fff7e2 10%,var(--gold) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 12px rgba(255,209,102,.3));
}
.title-accent{display:block;font-size:.78em;letter-spacing:.14em;color:transparent;
  background:linear-gradient(180deg,#d9ffe9,#6fe3a5);-webkit-background-clip:text;background-clip:text}
.tagline{margin-top:12px;font-size:14px;line-height:1.55;color:rgba(223,246,235,.8)}
.controls{list-style:none;margin:18px auto 4px;display:grid;gap:7px;max-width:290px}
.controls li{
  font-size:13px;padding:8px 12px;border-radius:11px;
  background:rgba(207,238,224,.07);
  border:1px solid rgba(207,238,224,.14);
  color:rgba(233,251,243,.92);
}
.controls b{color:var(--gold);font-weight:800}
.btn{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  margin-top:20px;width:100%;padding:15px 22px;border:0;border-radius:16px;
  font:inherit;font-size:17px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#16352b;
  background:linear-gradient(180deg,#ffeeb8,#ffc65c);
  box-shadow:0 10px 24px rgba(255,180,60,.3), inset 0 -3px 0 rgba(150,90,10,.28), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(2px);box-shadow:0 5px 14px rgba(255,180,60,.28), inset 0 -1px 0 rgba(150,90,10,.28)}
.btn:focus-visible{outline:3px solid #9ef0c8;outline-offset:3px}
.hint{margin-top:11px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(207,238,224,.5)}
.hint b{color:rgba(255,209,102,.85)}

.over-title{font-size:clamp(24px,7vw,32px);font-weight:800;letter-spacing:.01em;color:#fff7e2}
.newbest{
  font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:#16352b;background:linear-gradient(180deg,#ffeeb8,#ffc65c);
  display:inline-block;padding:5px 14px;border-radius:999px;margin-bottom:12px;
  box-shadow:0 8px 20px rgba(255,180,60,.35);
  animation:pop .45s cubic-bezier(.2,1.5,.4,1) both;
}
.newbest.hidden{display:none}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.score-rows{margin-top:18px;display:grid;gap:8px}
.score-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;border-radius:13px;
  background:rgba(207,238,224,.07);border:1px solid rgba(207,238,224,.14);
}
.score-key{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(207,238,224,.7);font-weight:700}
.score-val{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;color:#fff7e2}
.score-row:last-child .score-val{color:var(--gold);font-size:22px}
.gates-line{margin-top:12px;font-size:12.5px;color:rgba(223,246,235,.68)}

@media (max-height:620px){
  .crest{display:none}
  .panel{padding:20px 22px 18px;border-radius:20px}
  .tagline{margin-top:8px;font-size:13px}
  .controls{margin-top:12px;gap:5px}
  .controls li{padding:6px 10px;font-size:12px}
  .btn{margin-top:14px;padding:12px 18px;font-size:15px}
  .score-rows{margin-top:12px}
}