/* ==================================================================
   FFX Runner Remaster — in-game HUD (built by src/hud.js)
   ================================================================== */
.hud2 {
  --hud-ink: #f4f1e6;
  --hud-dim: rgba(244, 241, 230, .62);
  --hud-yellow: #ffd21e;
  --hud-orange: #ff8a1e;
  --hud-red: #ff3b2f;
  --hud-blue: #39b6ff;
  --hud-glass: rgba(10, 14, 22, .58);
  --hud-edge: rgba(255, 255, 255, .14);
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  font-family: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  color: var(--hud-ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.hud2.hidden { display: none; }
.hud2 .h-k { font: 600 11px/1 "Saira", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--hud-dim); }
.hud2 .h-ico { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }

.hud2 .h-panel, .hud2 .h-run, .hud2 .h-obj, .hud2 .h-threat, .hud2 .h-vitals {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), var(--hud-glass);
  border: 1px solid var(--hud-edge);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border-radius: 14px;
}

/* ---- top --------------------------------------------------------- */
.hud2 .h-top {
  position: absolute; left: 18px; right: 18px; top: calc(var(--banner-h, 48px) + 10px);
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
}
.hud2 .h-run { padding: 8px 14px 9px; display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: baseline; transform: skewX(-6deg); }
.hud2 .h-run > * { transform: skewX(6deg); }
.hud2 .h-score { font-weight: 800; font-size: 30px; line-height: 1; color: var(--hud-yellow); font-variant-numeric: tabular-nums; }
.hud2 .h-time { grid-column: 1 / -1; font-weight: 600; font-size: 15px; color: var(--hud-dim); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.hud2 .h-obj { justify-self: center; width: min(520px, 46vw); padding: 7px 14px 10px; }
.hud2 .h-obj-head { display: flex; align-items: center; gap: 10px; }
.hud2 .h-obj-head .h-ico { width: 28px; height: 28px; }
.hud2 .h-obj-text { font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; flex: 1; }
.hud2 .h-obj-dist { font-weight: 800; font-size: 20px; color: var(--hud-yellow); font-variant-numeric: tabular-nums; }
.hud2 .h-prog { position: relative; height: 6px; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: visible; }
.hud2 .h-prog-fill { height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--hud-yellow), #fff59a); box-shadow: 0 0 12px rgba(255,210,30,.6); }
.hud2 .h-prog-car { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 2px solid var(--hud-yellow); box-shadow: 0 0 10px rgba(255,210,30,.9); }

.hud2 .h-threat { padding: 7px 12px; display: flex; gap: 8px; align-items: center; transition: background .3s, border-color .3s; }
.hud2 .h-threat-txt { display: grid; }
.hud2 .h-threat-val { font-weight: 800; font-size: 20px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hud2 .h-threat[data-level="near"] { border-color: rgba(255, 138, 30, .6); }
.hud2 .h-threat[data-level="near"] .h-threat-val { color: var(--hud-orange); }
.hud2 .h-threat[data-level="close"] { border-color: var(--hud-red); background: linear-gradient(180deg, rgba(255,59,47,.35), rgba(80,8,8,.55)); animation: h-pulse .55s ease-in-out infinite alternate; }
.hud2 .h-threat[data-level="close"] .h-threat-val { color: #fff; }
@keyframes h-pulse { from { box-shadow: 0 0 0 rgba(255,59,47,0); } to { box-shadow: 0 0 26px rgba(255,59,47,.75); } }

/* ---- vitals (bottom left) --------------------------------------- */
.hud2 .h-vitals { position: absolute; left: 18px; bottom: 18px; padding: 10px 14px 12px; display: grid; gap: 9px; width: min(330px, 34vw); }
.hud2 .h-bar { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; }
.hud2 .h-bar .h-ico { width: 38px; height: 38px; }
.hud2 .h-bar-lab { display: flex; justify-content: space-between; font: 600 12px/1 "Saira", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--hud-dim); margin-bottom: 5px; }
.hud2 .h-bar-pct { color: var(--hud-ink); font-family: "Saira Condensed", system-ui, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hud2 .h-leds { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; transform: skewX(-14deg); }
.hud2 .h-leds i { height: 13px; border-radius: 2px; background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); transition: background .15s, box-shadow .15s; }
.hud2 .is-fuel .h-leds i.on { background: linear-gradient(180deg, #ffe680, #ffb21e); box-shadow: 0 0 8px rgba(255,190,30,.6); }
.hud2 .is-car .h-leds i.on { background: linear-gradient(180deg, #a7ff7a, #2fd15a); box-shadow: 0 0 8px rgba(60,220,100,.55); }
.hud2 .h-bar.low .h-leds i.on { background: linear-gradient(180deg, #ff9c8c, #ff3b2f); box-shadow: 0 0 10px rgba(255,59,47,.8); animation: h-blink .5s steps(2) infinite; }
.hud2 .h-bar.low .h-bar-pct { color: var(--hud-red); }
@keyframes h-blink { 50% { opacity: .35; } }

/* ---- cluster (bottom right) ------------------------------------- */
.hud2 .h-cluster { position: absolute; right: 8px; bottom: 0; display: flex; align-items: flex-end; gap: 4px; }
.hud2 .h-dial { width: clamp(220px, 23vw, 300px); height: auto; overflow: visible; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); }
.hud2 .h-dial-bg { fill: url(#hBg); stroke: rgba(255,255,255,.14); stroke-width: 1.5; }
.hud2 .h-dial-inner { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 1; }
.hud2 .h-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 14; stroke-linecap: butt; }
.hud2 .h-red { fill: none; stroke: rgba(255,59,47,.55); stroke-width: 14; }
.hud2 .h-rpm { fill: none; stroke: url(#hRpm); stroke-width: 14; transition: stroke-dashoffset .06s linear; }
.hud2.redline .h-rpm { stroke: var(--hud-red); }
.hud2 .h-tick { stroke: rgba(255,255,255,.75); stroke-width: 2.5; }
.hud2 .h-tick-s { stroke: rgba(255,255,255,.35); stroke-width: 1.5; }
.hud2 .h-num { fill: rgba(244,241,230,.85); font: 700 17px "Saira Condensed", system-ui, sans-serif; text-anchor: middle; }
.hud2 .h-unit { fill: var(--hud-dim); font: 600 9px "Saira", system-ui, sans-serif; letter-spacing: .14em; text-anchor: middle; text-transform: uppercase; }
.hud2 .h-needle { transition: transform .06s linear; }
.hud2 .h-needle-b { fill: #fff; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px rgba(255,120,40,.9)); }
.hud2 .h-needle-dot { fill: #ff3b2f; }
.hud2.redline .h-needle-b { fill: #ffd9d6; filter: drop-shadow(0 0 4px #ff3b2f) drop-shadow(0 0 9px #ff3b2f); }
.hud2 .h-speed { fill: #fff; font: 800 italic 76px "Saira Condensed", system-ui, sans-serif; text-anchor: middle; font-variant-numeric: tabular-nums;
  letter-spacing: -.015em; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.hud2 .h-kmh { fill: var(--hud-dim); font: 600 11px "Saira", system-ui, sans-serif; letter-spacing: .24em; text-anchor: middle; text-transform: uppercase; }
.hud2 .h-gear-pill { fill: rgba(255,210,30,.08); stroke: rgba(255,210,30,.45); stroke-width: 1.5; transition: fill .15s, stroke .15s; }
.hud2 .h-gear { fill: var(--hud-yellow); font: 900 italic 40px "Saira Condensed", system-ui, sans-serif; text-anchor: middle; }
.hud2 .h-shiftup { fill: var(--hud-yellow); opacity: 0; transition: opacity .1s; }
.hud2.shift-now .h-shiftup { opacity: 1; animation: h-shift .22s linear infinite alternate; }
.hud2.shift-now .h-gear-pill { fill: rgba(255,210,30,.22); stroke: var(--hud-yellow); }
@keyframes h-shift { to { opacity: .25; } }
.hud2 .h-nos { fill: none; stroke: rgba(57,182,255,.16); stroke-width: 10; stroke-linecap: butt; transition: stroke .15s; }
.hud2 .h-nos.on { stroke: url(#hNos); filter: drop-shadow(0 0 5px rgba(57,182,255,.85)); }
.hud2 .h-nos-lab { fill: #8fdcff; font: 800 italic 15px "Saira Condensed", system-ui, sans-serif; text-anchor: middle; }
.hud2.nitro-on .h-nos.on { animation: h-nos 0.18s linear infinite alternate; }
.hud2.nos-fill .h-nos { animation: h-nos-fill .9s ease-out; }
@keyframes h-nos-fill { 0% { stroke: #fff; filter: drop-shadow(0 0 12px #d08bff); } 100% { filter: drop-shadow(0 0 0 transparent); } }
@keyframes h-nos { to { stroke: #e6fbff; } }

.hud2 .h-shifter { margin-bottom: 26px; padding: 8px 10px 6px; display: grid; justify-items: center; gap: 2px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.08), rgba(0,0,0,0) 60%), var(--hud-glass);
  border: 1px solid var(--hud-edge); border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hud2 .h-gate { width: 104px; height: auto; overflow: visible; }
.hud2 .h-gate-line { stroke: rgba(255,255,255,.28); stroke-width: 6; stroke-linecap: round; }
.hud2 .h-gate-lab { fill: var(--hud-dim); font: 700 11px "Saira Condensed", system-ui, sans-serif; text-anchor: middle; }
.hud2 .h-gate-lab.is-r { fill: #ff8a7f; }
.hud2 .h-knob { fill: #ffd21e; stroke: #3a2c00; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(255,210,30,.8));
  transition: cx .16s cubic-bezier(.3,1.5,.5,1), cy .16s cubic-bezier(.3,1.5,.5,1); }
.hud2 .h-shifter-lab { font: 600 9px "Saira", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--hud-dim); }

/* ---- centre messages --------------------------------------------- */
.hud2 #toast { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.9); opacity: 0;
  font: 900 italic clamp(26px, 3.6vw, 44px)/1 "Saira Condensed", system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase;
  color: var(--hud-yellow); -webkit-text-stroke: 1.5px #2a1d00; paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 30px rgba(255,210,30,.55); transition: opacity .15s, transform .25s cubic-bezier(.2,1.6,.4,1); }
.hud2 #toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hud2 .h-wrong { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); opacity: 0;
  padding: 8px 22px; border-radius: 10px; background: rgba(255, 90, 0, .9); color: #fff;
  font: 900 italic 30px/1 "Saira Condensed", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 0 40px rgba(255, 90, 0, .7); transition: opacity .2s; }
.hud2 .h-wrong.show { opacity: 1; animation: h-blink .6s steps(2) infinite; }
.hud2 .h-hit { position: absolute; inset: 0; opacity: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(255, 30, 20, .55) 100%); }
.hud2 .h-nosfx { position: absolute; inset: 0; opacity: 0; transition: opacity .25s;
  background: radial-gradient(130% 100% at 50% 60%, transparent 60%, rgba(40, 140, 255, .35) 100%); }
.hud2.nitro-on .h-nosfx { opacity: 1; }

@media (max-width: 760px) {
  .hud2 .h-obj { width: 52vw; }
  .hud2 .h-threat, .hud2 .h-shifter { display: none; }
  .hud2 .h-vitals { width: 46vw; padding: 8px 10px; }
  .hud2 .h-dial { width: 190px; }
}

/* ==================================================================
   Touch controls (src/touch.js) — only on touch devices, only in a run
   ================================================================== */
.touch-ctl { display: none; }
html.is-touch .hud2:not(.hidden) .touch-ctl { display: block; }
.touch-ctl { position: absolute; inset: 0; pointer-events: none; z-index: 8;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.t-btn { position: absolute; pointer-events: auto; touch-action: none; border: 0; color: #fff;
  font: 900 italic 20px "Saira Condensed", system-ui, sans-serif; letter-spacing: .04em;
  background: radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.22), rgba(255,255,255,.05) 60%), rgba(10,14,22,.42);
  border: 2px solid rgba(255,255,255,.28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 22px rgba(0,0,0,.35); transition: transform .06s, background .06s; }
.t-btn.on { transform: scale(.94); background: rgba(255,210,30,.55); border-color: #ffd21e; color: #160f00; }
.t-btn.steer { bottom: calc(24px + env(safe-area-inset-bottom)); width: 92px; height: 92px; border-radius: 50%; font-size: 30px; }
.t-btn.steer.left { left: calc(18px + env(safe-area-inset-left)); }
.t-btn.steer.right { left: calc(124px + env(safe-area-inset-left)); }
.t-btn.pedal { right: calc(18px + env(safe-area-inset-right)); width: 104px; border-radius: 22px; }
.t-btn.gas { bottom: calc(24px + env(safe-area-inset-bottom)); height: 118px; background-color: rgba(40,170,80,.35); }
.t-btn.brake { bottom: calc(152px + env(safe-area-inset-bottom)); height: 64px; font-size: 16px; background-color: rgba(200,50,40,.35); }
.t-btn.aux { width: 70px; height: 70px; border-radius: 50%; font-size: 15px; }
.t-btn.nitro { right: calc(134px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); background-color: rgba(40,140,255,.42); }
.t-btn.nitro.on { background: rgba(80,190,255,.85); border-color: #bff0ff; color: #001a33; }
.t-btn.hand { right: calc(134px + env(safe-area-inset-right)); bottom: calc(104px + env(safe-area-inset-bottom)); font-size: 13px; }
.t-btn.pause { top: calc(var(--banner-h, 48px) + 66px); right: calc(14px + env(safe-area-inset-right)); width: 46px; height: 46px; border-radius: 12px; font-size: 16px; }

/* On touch screens the cluster moves out of the thumbs' way */
html.is-touch .hud2 .h-cluster { right: 50%; transform: translateX(50%) scale(.72); transform-origin: bottom center; bottom: -6px; }
html.is-touch .hud2 .h-shifter { display: none; }
html.is-touch .hud2 .h-vitals { left: auto; right: calc(14px + env(safe-area-inset-right)); top: calc(var(--banner-h, 48px) + 120px); bottom: auto;
  width: 200px; padding: 8px 10px; transform: scale(.85); transform-origin: top right; }
html.is-touch .hud2 .h-threat { display: none; }
/* Portrait phones: the car sits in the lower middle of a tall screen, so the
   dial goes up under the score, the vitals stack on the right, and the aux
   buttons sit above the steering pads instead of between steer and pedals. */
@media (orientation: portrait) {
  html.is-touch .hud2 .h-cluster { right: auto; left: calc(4px + env(safe-area-inset-left)); bottom: auto;
    top: calc(var(--banner-h, 48px) + 120px); transform: scale(.52); transform-origin: top left; }
  html.is-touch .hud2 .h-obj { width: calc(100vw - 150px); }
  html.is-touch .hud2 .h-vitals { top: calc(var(--banner-h, 48px) + 150px); width: 170px; transform: scale(.8); }
  .t-btn.pause { top: calc(var(--banner-h, 48px) + 236px); }
  .t-btn.nitro { right: auto; left: calc(132px + env(safe-area-inset-left)); bottom: calc(128px + env(safe-area-inset-bottom)); }
  .t-btn.hand { right: auto; left: calc(28px + env(safe-area-inset-left)); bottom: calc(128px + env(safe-area-inset-bottom)); }
}
.rotate-hint { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  .rotate-hint { display: flex; position: absolute; left: 50%; bottom: calc(232px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    z-index: 9; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: rgba(10,14,22,.7); color: #fff;
    font: 600 13px "Saira", system-ui, sans-serif; pointer-events: none; animation: rh 4s ease forwards; }
}
@keyframes rh { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* Short screens (landscape phones, small laptop windows): shrink every panel
   so the road keeps the middle of the frame. */
@media (max-height: 520px) {
  .hud2 .h-top { transform: scale(.78); transform-origin: top center; }
  .hud2 .h-cluster { transform: scale(.6); transform-origin: bottom right; }
  .hud2 .h-vitals { transform: scale(.72); transform-origin: bottom left; left: 10px; bottom: 10px; }
  .hud2 .h-shifter { display: none; }
  html.is-touch .hud2 .h-cluster { transform: translateX(50%) scale(.56); transform-origin: bottom center; bottom: -4px; }
  html.is-touch .hud2 .h-vitals { top: calc(var(--banner-h, 48px) + 8px); bottom: auto; transform: scale(.66); transform-origin: top right; }
  html.is-touch .t-btn.pause { top: calc(var(--banner-h, 48px) + 64px); right: auto; left: calc(14px + env(safe-area-inset-left)); }
  .t-btn.steer { width: 78px; height: 78px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .t-btn.steer.right { left: calc(106px + env(safe-area-inset-left)); }
  .t-btn.gas { height: 96px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .t-btn.brake { height: 54px; bottom: calc(118px + env(safe-area-inset-bottom)); }
  .t-btn.nitro { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .t-btn.hand { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

.hud2 .h-threat.honk { animation: h-honk .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes h-honk { 20% { transform: scale(1.18) rotate(-4deg); box-shadow: 0 0 0 3px #ff3b2f, 0 0 26px rgba(255,59,47,.8); } 45% { transform: scale(1.1) rotate(3deg); } }

/* ---- minimap (src/minimap.js): bottom-left, under the fuel/bodywork box ---- */
.hud2 .h-minimap { position: absolute; left: 18px; bottom: 18px; width: clamp(150px, 15vw, 210px); aspect-ratio: 1; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.4); }
.hud2 .h-minimap canvas { display: block; width: 100%; height: 100%; }
.hud2 .h-minimap::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
.hud2 .h-mm-wrong { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 2px 9px; border-radius: 6px; opacity: 0;
  font: 800 italic 13px "Saira Condensed", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #ff3b2f; }
.hud2 .h-minimap.wrong { border-color: #ff3b2f; animation: mm-wrong .5s steps(2) infinite; }
.hud2 .h-minimap.wrong .h-mm-wrong { opacity: 1; }
@keyframes mm-wrong { 50% { box-shadow: 0 0 0 3px #ff3b2f, 0 0 26px rgba(255,59,47,.8); } }
/* vitals sit above the map; the big centre banner is retired */
.hud2 .h-vitals { bottom: calc(18px + clamp(150px, 15vw, 210px) + 10px); }
.hud2 .h-wrong { display: none; }
@media (max-height: 520px) {
  .hud2 .h-minimap { width: 120px; left: 10px; bottom: 10px; }
  .hud2 .h-vitals { bottom: calc(10px + 120px + 6px); }
}
html.is-touch .hud2 .h-minimap { left: auto; right: calc(14px + env(safe-area-inset-right)); bottom: auto; top: calc(var(--banner-h, 48px) + 200px); width: 130px; }
@media (max-height: 520px) { html.is-touch .hud2 .h-minimap { top: calc(var(--banner-h, 48px) + 60px); width: 96px; } }

/* ---- rear-view mirror frame (the image is drawn into this box by Game._renderMirror) ---- */
.h-mirror { position: absolute; left: 50%; top: calc(var(--banner-h, 48px) + 76px); width: clamp(200px, 24vw, 340px); aspect-ratio: 3.4;
  transform: translateX(-50%); border-radius: 14px / 40%; display: none; pointer-events: none;
  box-shadow: 0 0 0 3px #11151d, 0 0 0 4px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.45); }
.h-mirror.on { display: block; }
.h-mirror::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255,255,255,.14), transparent 40%); }
html.is-touch .h-mirror, .hud2.hidden ~ .h-mirror { display: none !important; }
@media (max-height: 520px) { .h-mirror { top: calc(var(--banner-h, 48px) + 52px); width: 180px; } }