/* style.css — HUD + overlays. No external fonts, works at 390x844 and 1280x800. */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #000; /* letterbox: everything outside the centred #app box is plain black (feature-28) */
  font-family: ui-rounded, "Segoe UI", -apple-system, system-ui, Roboto, Arial, sans-serif;
  -webkit-user-select: none; user-select: none; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#app { position: fixed; inset: 0; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
.scorebox { position: absolute; left: clamp(10px, 2.2vw, 26px); top: clamp(8px, 1.6vh, 20px); }
#score {
  font-size: clamp(38px, 7.4vh, 76px); font-weight: 900; line-height: 0.92; color: #fff;
  text-shadow: 0 3px 0 rgba(20,40,30,.42), 0 0 18px rgba(255,255,255,.35);
  font-variant-numeric: tabular-nums;
}
#score.pop { animation: pop .22s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.bestbox {
  margin-top: 2px; font-size: clamp(11px, 1.5vh, 15px); font-weight: 800; letter-spacing: .14em;
  color: rgba(255,255,255,.95); text-shadow: 0 2px 0 rgba(20,40,30,.4);
}
.tools { position: absolute; right: clamp(10px, 2.2vw, 26px); top: clamp(8px, 1.6vh, 20px); display: flex; gap: 6px; }
.tool {
  pointer-events: auto; cursor: pointer; border: 0; border-radius: 10px;
  padding: 8px 10px; min-width: 38px; font-size: 12px; font-weight: 800; letter-spacing: .08em;
  color: #14351f; background: rgba(255,255,255,.86);
  box-shadow: 0 3px 0 rgba(20,60,30,.28);
}
.tool:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(20,60,30,.28); }
.mode-muted #btnMute { background: #ffd28a; }

#warn {
  position: absolute; left: 50%; top: clamp(64px, 12vh, 130px); transform: translate(-50%, -6px);
  padding: 7px 16px; border-radius: 999px; background: rgba(226,72,58,.92); color: #fff;
  font-weight: 900; font-size: clamp(12px, 1.9vh, 17px); letter-spacing: .12em;
  opacity: 0; transition: opacity .18s, transform .18s;
  box-shadow: 0 6px 18px rgba(120,20,10,.35);
}
#warn.on { opacity: 1; transform: translate(-50%, 0); animation: pulse .7s infinite alternate; }
@keyframes pulse { to { background: rgba(255,120,60,.96); } }
/* the deadline vignette is decoration only: it must never eat taps (it sits directly on the
   canvas and covers the bottom quarter of a phone screen) */
#danger {
  pointer-events: none;
  position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; opacity: 0; transition: opacity .25s;
  background: linear-gradient(to top, rgba(214,60,44,.42), rgba(214,60,44,0));
}
/* debug readout (only with ?debug) + transient toast */
#mode {
  display: none; margin-top: 3px; font: 700 10.5px/1.2 ui-monospace, Menlo, Consolas, monospace;
  color: rgba(255,255,255,.8); text-shadow: 0 1px 0 rgba(20,40,30,.5); letter-spacing: .04em;
}
body.debug #mode { display: block; }
#toast {
  position: absolute; left: 50%; top: clamp(112px, 20vh, 190px); transform: translate(-50%, 6px);
  padding: 6px 14px; border-radius: 999px; background: rgba(20,42,34,.82); color: #ffe889;
  font-weight: 900; font-size: clamp(11px, 1.6vh, 14px); letter-spacing: .14em; white-space: nowrap;
  opacity: 0; transition: opacity .16s, transform .16s; pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
/* golden pulse on the score at every milestone */
.scorebox.mile #score { animation: mile .85s ease-out; }
@keyframes mile {
  0% { text-shadow: 0 3px 0 rgba(20,40,30,.42), 0 0 18px rgba(255,255,255,.35); }
  25% { text-shadow: 0 3px 0 rgba(20,40,30,.42), 0 0 30px rgba(255,226,120,.95); }
  100% { text-shadow: 0 3px 0 rgba(20,40,30,.42), 0 0 18px rgba(255,255,255,.35); }
}

/* ---------- touch pad (shown when a touch device is detected) ---------- */
#dpad {
  position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: none; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px);
  gap: 4px; pointer-events: auto;
}
body.touch #dpad { display: grid; }
.db {
  border: 0; border-radius: 14px; background: rgba(255,255,255,.62); color: #14351f;
  font-size: 20px; line-height: 1; box-shadow: 0 3px 0 rgba(20,60,30,.22);
}
.db:active, .db.press { background: #ffe6a8; transform: translateY(2px); }
.db.up { grid-area: 1 / 2; } .db.left { grid-area: 2 / 1; }
.db.right { grid-area: 2 / 3; } .db.down { grid-area: 3 / 2; }

/* ---------- overlays ---------- */
.overlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  padding: 18px; background: rgba(12, 30, 26, .30); backdrop-filter: blur(2px);
}
.overlay.show { display: flex; }
.panel {
  display: none; width: min(400px, 92vw); max-height: 92vh; overflow: auto;
  padding: clamp(16px, 3vh, 28px) clamp(16px, 4vw, 30px);
  border-radius: 20px; text-align: center; color: #eef8ef;
  background: linear-gradient(180deg, rgba(18,44,36,.94), rgba(11,28,24,.96));
  box-shadow: 0 18px 48px rgba(0,0,0,.42), inset 0 2px 0 rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.14);
}
.panel.on { display: block; animation: rise .22s ease-out; }
@keyframes rise { from { transform: translateY(10px) scale(.98); opacity: 0; } }
h1 { margin: 0 0 6px; font-size: clamp(28px, 5.6vh, 46px); font-weight: 900; letter-spacing: .02em; color: #ffe889; }
h1 span { color: #9be7a8; }
h2 { margin: 0 0 6px; font-size: clamp(24px, 4.6vh, 38px); font-weight: 900; color: #ffd7d2; }
.tag { margin: 0 0 14px; font-size: clamp(12px, 1.7vh, 15px); color: rgba(230,246,232,.82); }
.keys { display: grid; gap: 7px; margin: 0 0 16px; }
.keys > div {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 11px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 12.5px;
}
.keys b { color: #ffe889; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.keys span { color: rgba(232,246,234,.86); text-align: right; }
button.big {
  pointer-events: auto; cursor: pointer; border: 0; border-radius: 14px;
  padding: 13px 26px; font-size: clamp(14px, 2.1vh, 18px); font-weight: 900; letter-spacing: .1em;
  color: #16381f; background: linear-gradient(180deg, #b8f0a2, #79d47f);
  box-shadow: 0 5px 0 #3f8f57, 0 10px 22px rgba(0,0,0,.28);
}
button.big:active { transform: translateY(3px); box-shadow: 0 2px 0 #3f8f57; }
button.big small { font-weight: 700; opacity: .7; letter-spacing: 0; }
button.ghost {
  pointer-events: auto; cursor: pointer; display: block; margin: 10px auto 0; border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px; padding: 8px 16px; background: rgba(255,255,255,.06); color: rgba(238,248,239,.86);
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
}
button.ghost:active { background: rgba(255,255,255,.16); }
.fine { margin: 12px 0 0; font-size: 11.5px; color: rgba(226,244,228,.62); }
.scoreline { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 6px 0 4px; }
.scoreline span { font-size: clamp(44px, 9vh, 78px); font-weight: 900; color: #fff; line-height: 1; }
.scoreline em { font-style: normal; font-size: 13px; letter-spacing: .16em; color: rgba(230,246,232,.7); }
.newbest { display: none; margin: 4px 0 8px; font-weight: 900; color: #1d3b1f; background: #ffd45e; border-radius: 999px; padding: 4px 12px; font-size: 12px; letter-spacing: .12em; }
.newbest.on { display: inline-block; }
/* ---------- title-screen road-difficulty slider (feature-11) ---------- */
.diffrow {
  display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0 0 12px;
}
.diffcap {
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(232, 246, 234, .6);
}
.slider {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  width: min(252px, 100%); padding: 3px; border-radius: 999px; pointer-events: auto;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .22);
}
/* the three real radios stay in the DOM (keyboard + screen readers) but are visually folded away */
.slider .dpos { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; left: -3px; top: -3px; }
.slider label {
  position: relative; z-index: 1; pointer-events: auto; cursor: pointer; text-align: center;
  padding: 8px 2px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .1em;
  color: rgba(232, 246, 234, .6); transition: color .14s ease-out;
}
.slider .thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; pointer-events: none;
  width: calc((100% - 6px) / 3); border-radius: 999px;
  background: linear-gradient(180deg, #ffe9a0, #f2c055);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .26);
  transition: transform .16s ease-out, background .16s ease-out;
}
#diffEasy:checked ~ .thumb { transform: translateX(0); background: linear-gradient(180deg, #bdf0a6, #7ed487); }
#diffNormal:checked ~ .thumb { transform: translateX(100%); }
#diffHard:checked ~ .thumb { transform: translateX(200%); background: linear-gradient(180deg, #ffb49a, #f4795f); }
.slider input:checked + label { color: #1c3a22; }
#diffHard:checked + label { color: #40120c; }
.slider input:focus-visible + label { outline: 2px solid rgba(255, 232, 137, .8); outline-offset: 3px; }

/* ---------- title-screen hero picker (feature-15) ---------- */
.avrow { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 0 0 12px; }
.avcap {
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(232, 246, 234, .6);
}
.avlist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; pointer-events: auto; }
.avbtn {
  pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 7px 3px 6px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.26); color: rgba(232,246,234,.72);
  transition: transform .12s ease-out, border-color .12s, background .12s, color .12s;
}
.avbtn:hover { background: rgba(255,255,255,.10); }
.avbtn:focus-visible { outline: 2px solid rgba(255,232,137,.85); outline-offset: 2px; }
.avbtn.on {
  border-color: #ffe889; background: rgba(255,232,137,.16); color: #ffe889;
  box-shadow: 0 0 0 1px rgba(255,232,137,.35), 0 4px 12px rgba(0,0,0,.30);
  transform: translateY(-1px);
}
.avthumb { width: 44px; height: 44px; }
.avname { font-size: 10px; font-weight: 800; letter-spacing: .08em; }

/* ---------- title-screen seed box + amber river hint ---------- */
.seedrow { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 0 0 12px; }
.seed {
  pointer-events: auto; width: 148px; padding: 8px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.24);
  background: rgba(0,0,0,.26); color: #eafbee; font: 700 12.5px/1.1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .06em; text-align: center;
}
.seed::placeholder { color: rgba(226,244,228,.45); font-weight: 600; }
.seed:focus { outline: 2px solid rgba(255,232,137,.7); }
.mini {
  pointer-events: auto; cursor: pointer; border: 0; border-radius: 10px; padding: 8px 10px;
  background: rgba(255,255,255,.82); box-shadow: 0 3px 0 rgba(20,60,30,.28); display: flex;
}
.mini:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(20,60,30,.28); }
#warn.amber { background: rgba(240,168,44,.94); animation: none; }

@media (max-width: 430px) {
  .tool { padding: 7px 8px; min-width: 34px; font-size: 11px; }
  .slider { width: 100%; }
  .slider label { font-size: 10.5px; padding: 7px 2px; }
  .avbtn { padding: 5px 2px 4px; }
  .avthumb { width: 34px; height: 34px; }
  .avname { font-size: 9px; }
  .keys > div { font-size: 11.5px; }
  #dpad { grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); }
}
@media (max-height: 460px) {
  .panel { padding: 12px 16px; }
  .diffrow { gap: 3px; margin-bottom: 8px; }
  .avrow { gap: 4px; margin-bottom: 8px; }
  .keys { gap: 4px; }
  .keys > div { padding: 4px 9px; }
  .tag { margin-bottom: 8px; }
}