/* In-flight HUD (fighter style, glowing cyan) and gameplay callouts.
   Every block scales with --hud-scale (settings.hudScale). Touch layouts keep the bottom corners
   clear for the on-screen controls. */
#hud { font-family: var(--font); }
:where(#hud) .i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.hud-main { --hud-scale: 1; --hud: 92, 225, 255; position: absolute; inset: 0; pointer-events: none; color: rgb(var(--hud)); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(var(--hud), .45), 0 1px 2px rgba(0, 0, 0, .85), 0 0 1px rgba(0, 0, 0, .9); transition: opacity .35s ease, visibility .35s; }
.hud-main.is-hidden { opacity: 0; visibility: hidden; }
.hud-main.is-dimmed { opacity: .14; }
.hud-main.is-crash { animation: hud-crash .7s ease-out; }
/* Crashed (game state 'crashed', or a wreck waiting for its results): the flight instruments
   (tapes with the G meter and VSI, compact readouts, ladder, heading, throttle) step back; the
   session panel and map stay readable. Respawning brings them straight back. */
.hud-overlay, .hud-top, .hud-tape, .hud-compact, .hud-systems { transition: opacity .3s ease; }
.hud-main.is-crashed .hud-overlay, .hud-main.is-crashed .hud-top, .hud-main.is-crashed .hud-tape,
.hud-main.is-crashed .hud-compact, .hud-main.is-crashed .hud-systems { opacity: .25; }
@keyframes hud-crash { 0%, 30% { filter: drop-shadow(0 0 0 transparent) hue-rotate(150deg) saturate(2); } 100% { filter: none; } }
.hud-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Heading tape */
.hud-top { position: absolute; top: 10px; left: 50%; width: min(460px, var(--hud-top-max, 9999px)); height: 48px; transform: translateX(-50%) scale(var(--hud-scale)); transform-origin: top center; }
.hud-heading { width: 100%; height: 100%; display: block;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }

/* Speed / altitude tapes */
.hud-tape { position: absolute; top: 50%; display: flex; flex-direction: column; gap: 6px; }
.hud-tape canvas { display: block; height: 300px;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%); }
.hud-speed { right: calc(50% + clamp(190px, 25vw, 330px)); align-items: flex-end; transform: translateY(-50%) scale(var(--hud-scale)); transform-origin: right center; }
.hud-speed canvas { width: 100px; }
.hud-alt { left: calc(50% + clamp(190px, 25vw, 330px)); align-items: flex-start; transform: translateY(-50%) scale(var(--hud-scale)); transform-origin: left center; }
.hud-alt canvas { width: 116px; }
.tape-unit { font: 800 10.5px var(--font); letter-spacing: .22em; text-transform: uppercase; opacity: .85; padding: 0 22px; }
.tape-sub { display: flex; flex-direction: column; gap: 4px; min-height: 40px; padding: 0 20px; }
.hud-speed .tape-sub { align-items: flex-end; }
.ts { font: 700 13px var(--font); letter-spacing: .04em; white-space: nowrap; }
.ts-mach, .ts-ra { display: none; }
.ts-mach.is-on, .ts-ra.is-on { display: block; }
.ts-g b { font-size: 15px; }
.ts-g.is-warn { color: var(--accent); text-shadow: 0 0 8px rgba(255, 181, 71, .5), 0 1px 2px #000; }
.ts-g.is-bad { color: var(--bad); text-shadow: 0 0 8px rgba(255, 92, 108, .6), 0 1px 2px #000; }
.ts-ra { color: #E9FBFF; }

/* Compact readouts (phones, small windows) */
.hud-compact { display: none; }
.hud-main.is-compact .hud-tape { display: none; }
.hud-main.is-compact .hud-compact { display: block; }
.hc { --hc-y: 50%; --hc-half: calc(26px * var(--hud-scale)); position: absolute; top: var(--hc-y); display: flex; flex-direction: column; gap: 1px;
  transform: translateY(-50%) scale(var(--hud-scale)); }
/* The speed readout shares the left edge with the session panel: it always starts below the
   panel (hud.js publishes --hud-ses-end), however tall the panel grows. */
.hc-spd { top: min(calc(100% - 8px - var(--hc-half)), max(var(--hc-y), calc(var(--hud-ses-end, 0px) + var(--hc-half)))); }
.hc-spd { left: calc(12px + var(--safe-l)); align-items: flex-start; transform-origin: left center; }
.hc-alt { right: calc(12px + var(--safe-r)); align-items: flex-end; transform-origin: right center; }
.hc small { font: 800 9.5px var(--font); letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.hc b { font: 800 26px/1 var(--font); color: #EAFBFF; }
.hc em { font: 700 11px var(--font); font-style: normal; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.hud-main.is-compact .hud-top { width: min(360px, var(--hud-top-max, 9999px)); top: 6px; transform: translateX(-50%) scale(calc(var(--hud-scale) * .86)); }

/* Throttle and configuration */
.hud-systems { position: absolute; left: calc(22px + var(--safe-l)); bottom: calc(20px + var(--safe-b)); display: flex; align-items: flex-end; gap: 14px;
  transform: scale(var(--hud-scale)); transform-origin: bottom left; }
.thr { display: flex; align-items: flex-end; gap: 10px; }
.thr-scale { position: relative; width: 12px; height: 118px; border-radius: 4px; overflow: hidden; background: rgba(2, 10, 18, .4);
  box-shadow: 0 0 0 1px rgba(var(--hud), .65), 0 0 14px rgba(var(--hud), .25); }
.thr-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: bottom; transform: scaleY(0);
  background: linear-gradient(0deg, rgba(var(--hud), .45), rgba(var(--hud), .95)); }
.thr.has-ab .thr-fill { height: 78%; }
.thr-ab { position: absolute; left: 0; right: 0; top: 0; height: 22%; display: none; transform-origin: bottom; transform: scaleY(0); background: linear-gradient(0deg, #FF7A59, #FFD24A); }
.thr.has-ab .thr-ab { display: block; }
.thr.has-ab .thr-scale::after { content: ''; position: absolute; left: 0; right: 0; top: 22%; height: 1px; background: rgba(255, 255, 255, .7); }
.thr-text { display: flex; flex-direction: column; gap: 2px; }
.thr-val { font: 800 22px/1 var(--font); color: #EAFBFF; }
.thr-val::after { content: '%'; font-size: 12px; opacity: .7; margin-left: 1px; }
.thr.is-ab .thr-val { color: #FFB06A; text-shadow: 0 0 12px rgba(255, 122, 89, .8), 0 1px 2px #000; }
.thr.is-ab .thr-val::after { content: ''; }
.thr-text small { font: 800 9.5px var(--font); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.sys { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ind { display: none; height: 22px; line-height: 20px; padding: 0 8px; border-radius: 5px; border: 1px solid currentColor; background: rgba(2, 10, 18, .45);
  font: 800 10.5px var(--font); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.ind.is-on { display: block; }
.ind-gear.is-good { color: var(--good); text-shadow: 0 0 8px rgba(74, 222, 128, .5), 0 1px 2px #000; }
.ind-gear.is-transit { color: var(--accent); }
.ind-flaps { color: #E9FBFF; }
.ind-flaps.is-transit { color: var(--accent); }
.ind-brake { color: var(--accent); }
.ind-ab { color: #FF9A5C; box-shadow: 0 0 14px rgba(255, 122, 89, .45); text-shadow: 0 0 10px rgba(255, 122, 89, .8), 0 1px 2px #000; }
.ind.is-flash { animation: ind-flash .6s ease-out; }
@keyframes ind-flash { 0% { background: rgba(var(--hud), .5); transform: scale(1.12); } 100% { background: rgba(2, 10, 18, .45); transform: none; } }

/* Warnings */
.hud-warn { --warn-y: 23%; position: absolute; top: var(--warn-y); left: 50%; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%) scale(var(--hud-scale)); transform-origin: top center; }
.warn { display: none; padding: 6px 18px 6px calc(18px + .26em); border-radius: 8px; border: 2px solid currentColor; font: 900 21px/1.1 var(--font); letter-spacing: .26em;
  text-transform: uppercase; color: var(--bad); background: rgba(40, 4, 10, .5);
  text-shadow: 0 0 12px rgba(255, 92, 108, .8), 0 1px 2px #000; box-shadow: 0 0 24px rgba(255, 92, 108, .35), inset 0 0 18px rgba(255, 92, 108, .18); }
.warn.is-on { display: block; animation: warn-blink .9s steps(1) infinite; }
.w-pullup { font-size: 28px; padding: 8px 24px 8px calc(24px + .26em); }
.w-pullup.is-on { animation-duration: .5s; }
.w-over, .w-gear, .w-terrain { color: var(--accent); background: rgba(40, 24, 4, .5); text-shadow: 0 0 12px rgba(255, 181, 71, .7), 0 1px 2px #000; box-shadow: 0 0 22px rgba(255, 181, 71, .3), inset 0 0 18px rgba(255, 181, 71, .14); }
.w-terrain.is-on { animation: none; }   /* a caution, not an alarm: steady */
@keyframes warn-blink { 50% { opacity: .3; } }

/* Session panel */
.hud-session { position: absolute; top: calc(12px + var(--safe-t, 0px)); left: calc(16px + var(--safe-l)); min-width: 214px; padding: 12px 15px 13px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(3, 12, 22, .58), rgba(3, 12, 22, .3)); border: 1px solid rgba(var(--hud), .2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(var(--hud), .1); transform: scale(var(--hud-scale)); transform-origin: top left; transition: opacity .3s; }
.hud-session.is-off { opacity: 0; }
.ses-head { display: flex; align-items: center; gap: 8px; max-width: 260px; }
.ses-dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--hud)); box-shadow: 0 0 8px rgb(var(--hud)); animation: dot-pulse 1.6s ease-in-out infinite; flex: none; }
@keyframes dot-pulse { 50% { opacity: .3; } }
.ses-title { font: 800 10.5px var(--font); letter-spacing: .22em; text-transform: uppercase; color: #DFF8FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ses-timer { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.ses-time { font: 800 40px/1 var(--font); letter-spacing: .01em; color: #F2FCFF; text-shadow: 0 0 14px rgba(var(--hud), .55), 0 2px 3px rgba(0, 0, 0, .8); }
.ses-time.is-finish { animation: finish-flash 1.2s ease-out; }
@keyframes finish-flash { 0%, 40% { color: var(--gold); transform: scale(1.06); } 100% { color: #F2FCFF; transform: none; } }
.ses-pen { display: none; font: 800 13px var(--font); color: var(--bad); text-shadow: 0 0 8px rgba(255, 92, 108, .6), 0 1px 2px #000; }
.ses-pen.is-on { display: inline; }
/* Perfect-ring time bonus: a green "−0.25" that pops off the clock */
.ses-bonus { font: 900 15px var(--font); color: #8CF5B4; text-shadow: 0 0 10px rgba(74, 222, 128, .7), 0 1px 2px #000; opacity: 0; pointer-events: none; }
.ses-bonus.is-flash { animation: bonus-pop 1.4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bonus-pop { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 14% { opacity: 1; transform: translateY(0) scale(1.15); } 26% { transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.ses-split { display: flex; align-items: center; gap: 8px; height: 0; overflow: hidden; opacity: 0; transition: height .25s var(--ease), opacity .25s, margin .25s; }
.ses-split.is-on { height: 28px; opacity: 1; margin-top: 6px; }
.ses-split-v { padding: 3px 9px; border-radius: 7px; font: 900 17px/1.2 var(--font); text-shadow: none; }
.ses-split small { font: 800 9px var(--font); letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.ses-split.is-good .ses-split-v { background: rgba(74, 222, 128, .22); color: #8CF5B4; box-shadow: 0 0 16px rgba(74, 222, 128, .35), inset 0 0 0 1px rgba(74, 222, 128, .5); }
.ses-split.is-bad .ses-split-v { background: rgba(255, 92, 108, .2); color: #FF9AA5; box-shadow: 0 0 16px rgba(255, 92, 108, .3), inset 0 0 0 1px rgba(255, 92, 108, .5); }
.ses-split.is-flash .ses-split-v { animation: split-pop .5s var(--ease-back, ease-out); }
@keyframes split-pop { 0% { transform: scale(1.4); } 100% { transform: none; } }
.ses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 10px; }
.ses-grid:not(:has(.is-on)) { display: none; }
.ses-grid > div { display: none; }
.ses-grid > div.is-on { display: flex; }
.ses-grid small { font: 800 9px var(--font); letter-spacing: .2em; text-transform: uppercase; opacity: .78; }
.ses-rings { flex-direction: column; gap: 3px; }
.ses-ring-txt b { font: 800 19px/1 var(--font); color: #F2FCFF; }
.ses-ring-txt em { font: 700 13px var(--font); font-style: normal; opacity: .75; }
.ses-bar { display: block; width: 76px; height: 3px; border-radius: 2px; background: rgba(var(--hud), .18); overflow: hidden; }
.ses-bar i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: rgb(var(--hud)); box-shadow: 0 0 6px rgb(var(--hud)); transition: transform .3s var(--ease, ease); }
.ses-rings.is-pulse { animation: ring-pulse .45s ease-out; }
.ses-rings.is-miss { animation: ring-miss .5s ease-out; }
@keyframes ring-pulse { 0% { transform: scale(1.18); color: #fff; } 100% { transform: none; } }
@keyframes ring-miss { 0%, 60% { color: var(--bad); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 100% { transform: none; } }
.ses-combo { position: relative; align-items: center; gap: 8px; transition: opacity .3s; }
.ses-combo svg { width: 36px; height: 36px; transform: rotate(-90deg); flex: none; overflow: visible; }
.cb-bg { fill: rgba(3, 12, 22, .4); stroke: rgba(255, 181, 71, .2); stroke-width: 3; }
.cb-fg { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 181, 71, .8)); transition: stroke-dashoffset .12s linear; }
.ses-combo-n { position: absolute; left: 0; width: 36px; text-align: center; font: 900 13px/36px var(--font); color: var(--accent); text-shadow: 0 0 8px rgba(255, 181, 71, .6), 0 1px 2px #000; }
.ses-combo > small { color: var(--accent); opacity: .8; }
/* No combo running: the slot stays (so nothing reflows) but reads as idle */
.ses-combo.is-idle { opacity: .42; }
.ses-combo.is-idle .ses-combo-n, .ses-combo.is-idle > small { color: rgb(var(--hud)); text-shadow: 0 1px 2px #000; }
.ses-combo.is-idle .cb-bg { stroke: rgba(var(--hud), .25); }
.ses-combo.is-pulse svg { animation: combo-pop .4s ease-out; }
@keyframes combo-pop { 0% { transform: rotate(-90deg) scale(1.3); } 100% { transform: rotate(-90deg); } }
.ses-target { align-items: center; gap: 8px; }
.ses-medal { width: 30px; height: 30px; flex: none; }
.ses-medal svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.ses-target-t { display: flex; flex-direction: column; gap: 1px; }
.ses-target-v { font: 800 14px/1 var(--font); color: #F2FCFF; }
.ses-target[data-medal="gold"] .ses-target-l { color: var(--gold); }
.ses-target[data-medal="silver"] .ses-target-l { color: var(--silver); }
.ses-target[data-medal="bronze"] .ses-target-l { color: var(--bronze); }
.ses-target[data-medal="ace"] .ses-target-l { color: var(--ace); }
.ses-target.is-drop { animation: target-drop .9s ease-out; }
@keyframes target-drop { 0%, 30% { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(255, 92, 108, .9)); } 100% { transform: none; filter: none; } }
.ses-target.is-up { animation: target-up .8s ease-out; }
@keyframes target-up { 0%, 30% { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(255, 210, 74, .9)); } 100% { transform: none; filter: none; } }
/* Off pace even for bronze: the bronze time stays as the thing to chase, dimmed */
.ses-target.is-off-pace .ses-medal { opacity: .45; filter: grayscale(.6); }
.ses-target.is-off-pace .ses-target-v { color: #FF9AA5; }
.ses-score { flex-direction: column; gap: 3px; }
.ses-score-v { font: 800 19px/1 var(--font); color: #F2FCFF; }
.ses-shards, .ses-near { align-items: center; gap: 7px; }
.ses-sh-ic, .ses-near-ic { font-size: 20px; display: grid; flex: none; }
.ses-near-ic { font-size: 18px; opacity: .85; }
.ses-kv { display: flex; flex-direction: column; gap: 2px; }
.ses-shards-v, .ses-near-v { font: 800 17px/1 var(--font); color: #F2FCFF; white-space: nowrap; }
.ses-shards.is-pulse { animation: ring-pulse .6s ease-out; }
.ses-free { display: none; flex-direction: column; gap: 2px; margin-top: 4px; }
.ses-free small { font: 800 9px var(--font); letter-spacing: .2em; text-transform: uppercase; opacity: .78; }
.ses-free-row { display: flex; align-items: baseline; gap: 10px; }
.ses-style { font: 800 34px/1 var(--font); color: #F2FCFF; }
.ses-style-combo { display: none; padding: 2px 8px; border-radius: 7px; font: 900 15px/1.2 var(--font); color: var(--ink, #1B1206); text-shadow: none;
  background: linear-gradient(180deg, #FFCF77, #FFB547); box-shadow: 0 0 14px rgba(255, 181, 71, .5); }
.ses-style-combo.is-on { display: inline-block; }
.ses-trick { font: 800 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ace); text-shadow: 0 0 8px rgba(183, 140, 255, .6), 0 1px 2px #000; min-height: 13px; }
.hud-session[data-kind="free"] .ses-timer, .hud-session[data-kind="free"] .ses-split { display: none; }
.hud-session[data-kind="free"] .ses-free { display: flex; }
.hud-session[data-kind="free"] .ses-grid { margin-top: 8px; padding-top: 9px; border-top: 1px solid rgba(var(--hud), .14); }
.ses-landing { display: none; align-items: center; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(var(--hud), .15); }
.ses-landing.is-on { display: flex; }
.ils-box { position: relative; display: block; width: 74px; height: 74px; border-radius: 8px; border: 1px solid rgba(var(--hud), .35); background: rgba(3, 12, 22, .35); }
.ils-box::before, .ils-box::after { content: ''; position: absolute; background: rgba(var(--hud), .35); }
.ils-box::before { left: 50%; top: 6px; bottom: 6px; width: 1px; }
.ils-box::after { top: 50%; left: 6px; right: 6px; height: 1px; }
.ils-gs, .ils-cl { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 2px solid; box-shadow: 0 0 6px currentColor; transform: rotate(45deg); }
.ils-gs { right: 3px; top: 50%; margin-right: -4.5px; color: var(--accent); }
.ils-cl { left: 50%; bottom: 3px; margin-bottom: -4.5px; color: var(--good); top: auto; }
.ld-ils { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ld-ils small { font: 800 9px var(--font); letter-spacing: .16em; text-transform: uppercase; opacity: .78; white-space: nowrap; }
.ld-data { display: flex; flex-direction: column; gap: 8px; }
.ld-data > div { display: flex; flex-direction: column; gap: 1px; }
.ld-data small { font: 800 9px var(--font); letter-spacing: .2em; text-transform: uppercase; opacity: .78; }
.ld-data b { font: 800 16px/1 var(--font); color: #F2FCFF; }
.ld-vs.is-good { color: #8CF5B4; } .ld-vs.is-warn { color: var(--accent); } .ld-vs.is-bad { color: var(--bad); }

/* Minimap */
.hud-minimap { position: absolute; right: calc(18px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); width: 188px; height: 188px; border-radius: 50%;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .4), 0 0 0 4px rgba(3, 12, 22, .35), 0 0 22px rgba(var(--hud), .18); transform: scale(var(--hud-scale)); transform-origin: bottom right; }
.hud-minimap canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
/* Touch layout (agreed with the touch overlay in css/touch.css):
   - bottom corners and the right edge belong to the thumb-stick, throttle lever and buttons;
   - the minimap moves to the top right (size --hud-minimap);
   - the strip just left of the minimap holds the pause button: the HUD publishes
     --hud-minimap-left on :root (px from the right edge to the minimap's left edge);
   - the session panel (top left) stops 70 px short of that, leaving the pause button room. */
body.touch { --hud-minimap: 128px; }
@media (max-width: 480px) { body.touch { --hud-minimap: 112px; } }
@media (max-height: 500px) { body.touch { --hud-minimap: 100px; } }
body.touch .hud-minimap { top: calc(10px + var(--safe-t, 0px)); bottom: auto; width: var(--hud-minimap); height: var(--hud-minimap); transform-origin: top right; }
body.touch .hud-session { max-width: calc((100% - 16px - var(--safe-l) - var(--hud-minimap-left, 160px) - 70px) / var(--hud-scale)); }
body.touch .ses-title { max-width: 100%; }
body.touch .hud-systems { display: none; }
/* The touch throttle lever lives on the right edge: keep the altitude readout inside it. */
body.touch .hc-alt { right: calc(104px + var(--safe-r)); }
body.touch .hc { --hc-y: 50%; }
@media (max-height: 500px) { body.touch .hc { --hc-y: 44%; } }
/* Portrait touch: the tutorial tip sits under the top panels (see .msg-dock), so both readouts
   start below the panels, and below the tip while one shows. */
@media (orientation: portrait) {
  body.touch .hc { top: min(calc(100% - 8px - var(--hc-half)), max(var(--hc-y), calc(var(--hud-top-end, 0px) + var(--hc-half)), calc(var(--hud-tip-end, 0px) + var(--hc-half))));
    transition: top .3s ease; }   /* eases aside as a tip comes and goes */
}
.hud-fps { position: absolute; top: 10px; right: calc(16px + var(--safe-r)); display: none; font: 700 11px var(--mono); letter-spacing: .04em; color: rgba(242, 245, 255, .7); text-shadow: 0 1px 2px #000; }
.hud-fps.is-on { display: block; }
body.touch .hud-fps { top: calc(var(--hud-minimap) + 18px); }

/* Narrow layouts */
@media (max-width: 760px), (max-height: 520px) {
  .hud-session { min-width: 0; padding: 9px 11px 10px; border-radius: 13px; }
  .ses-combo > small { display: none; }
  .ses-time { font-size: 28px; }
  .ses-grid { gap: 7px 10px; margin-top: 7px; }
  .ses-landing .ils-box { width: 56px; height: 56px; }
  .hud-minimap { width: 140px; height: 140px; }
  .warn { font-size: 16px; }
  .w-pullup { font-size: 21px; }
}
@media (max-height: 520px) {
  .ses-target, .ses-score { display: none !important; }
  .ses-head { display: none; }
  .ses-timer { margin-top: 0; }
  .hc { --hc-y: 58%; }
}
@media (max-width: 720px) and (min-width: 561px) {
  .hud-main.is-compact .hud-top { width: min(230px, var(--hud-top-max, 9999px)); }   /* stays clear of the session panel */
}
@media (max-width: 560px) {
  .hud-top { display: none; }
  .hud-warn { --warn-y: 30%; }
  .ses-target, .ses-score { display: none !important; }
}

/* ── Gameplay callouts ──────────────────────────────────────────────────── */
.msg-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; transition: opacity .25s, visibility .25s; }
/* Callouts belong to the flight: hide them while a menu covers it (they come back on resume). */
body:not([data-ui-screen="none"]) .msg-layer { opacity: 0; visibility: hidden; }
.msg-banner { position: absolute; left: 0; right: 0; top: 34%; display: flex; justify-content: center; }
.banner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; animation: banner-in .55s var(--ease, ease-out) both; }
.banner.is-out { animation: banner-out .4s ease forwards; }
@keyframes banner-in { from { opacity: 0; transform: scale(1.25); letter-spacing: .4em; } }
@keyframes banner-out { to { opacity: 0; transform: scale(.94); } }
.b-title { font: 900 clamp(46px, 8vw, 100px)/1 var(--font); letter-spacing: .14em; padding-left: .14em; text-transform: uppercase; color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 181, 71, .35); }
.b-sub { margin-top: 12px; font: 800 clamp(14px, 1.6vw, 19px)/1 var(--font); letter-spacing: .24em; padding-left: .24em; text-transform: uppercase; color: #F2F5FF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7); font-variant-numeric: tabular-nums; }
.banner-countdown { animation: none; }
.banner-countdown .b-title { font-size: clamp(110px, 17vw, 200px); letter-spacing: 0; padding: 0; color: #fff; animation: count-pop .95s cubic-bezier(.2, .8, .2, 1) both;
  text-shadow: 0 6px 40px rgba(0, 0, 0, .45), 0 0 60px rgba(255, 181, 71, .45); }
@keyframes count-pop { 0% { opacity: 0; transform: scale(2.1); } 22% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(.82); } }
.b-ring { position: absolute; left: 50%; top: 50%; width: clamp(190px, 26vw, 300px); height: clamp(190px, 26vw, 300px); transform: translate(-50%, -50%) rotate(-90deg); overflow: visible; }
.b-ring circle { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; filter: drop-shadow(0 0 6px rgba(255, 181, 71, .8));
  animation: ring-draw .9s ease-out forwards; }
@keyframes ring-draw { 0% { stroke-dashoffset: 289; opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.banner-go { animation: none; }
.banner-go .b-title { font-size: clamp(110px, 17vw, 200px); letter-spacing: .06em; padding-left: .06em;
  background: linear-gradient(180deg, #FFF3D0 0%, #FFB547 60%, #FF7A59 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(255, 140, 40, .55)); text-shadow: none; animation: go-pop 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes go-pop { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.15); } 40% { transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.b-burst { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 200, 110, .5) 0deg 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(closest-side, transparent 30%, #000 45%, transparent 100%); mask: radial-gradient(closest-side, transparent 30%, #000 45%, transparent 100%);
  animation: burst 1s ease-out both; }
@keyframes burst { 0% { opacity: 0; transform: scale(.3) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4) rotate(20deg); } }
.banner-finish .b-title { background: linear-gradient(180deg, #FFFFFF 0%, #FFE6A0 45%, #FFC23A 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(255, 180, 40, .5)); text-shadow: none; }
.banner-finish::after { content: ''; width: 280px; height: 12px; margin-top: 14px; order: 3; opacity: .9;
  background: repeating-linear-gradient(90deg, #fff 0 12px, #0B1020 12px 24px), repeating-linear-gradient(90deg, #0B1020 0 12px, #fff 12px 24px);
  background-size: 100% 6px; background-repeat: no-repeat; background-position: 0 0, 12px 6px; border-radius: 2px; box-shadow: 0 4px 20px rgba(0, 0, 0, .4); }
.banner-crash .b-title { color: #FF6B79; text-shadow: 0 4px 30px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 60, 80, .55); animation: crash-shake .5s ease-out; }
@keyframes crash-shake { 0%, 100% { transform: none; } 20% { transform: translate(-8px, 2px); } 40% { transform: translate(7px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(2px, 0); } }
.banner-checkpoint .b-title { font-size: clamp(34px, 5vw, 60px); color: #EAFBFF; text-shadow: 0 0 30px rgba(92, 225, 255, .6), 0 4px 20px rgba(0, 0, 0, .5); }
.banner-shard .b-title { font-size: clamp(36px, 5.6vw, 66px); color: #DDF9FF; text-shadow: 0 0 34px rgba(92, 225, 255, .8), 0 4px 20px rgba(0, 0, 0, .5); }
.banner-record .b-title { font-size: clamp(36px, 5.6vw, 66px); color: var(--gold); }
.b-icon { width: 56px; height: 56px; margin-bottom: 8px; color: var(--cyan); filter: drop-shadow(0 0 14px rgba(92, 225, 255, .9)); animation: shard-spin 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.b-icon .i { width: 100%; height: 100%; stroke-width: 1.4; }
@keyframes shard-spin { from { transform: rotateY(360deg) scale(.4); opacity: 0; } }

.msg-popups { position: absolute; left: 0; right: 0; top: 26%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.popup { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px; white-space: nowrap; animation: popup 1.5s cubic-bezier(.2, .8, .2, 1) forwards; }
.popup small { flex-basis: 100%; text-align: center; font: 800 clamp(11px, 1.15vw, 13px)/1.2 var(--font); letter-spacing: .22em; padding-left: .22em; text-transform: uppercase;
  color: #FFE2A8; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.popup b { font: 900 clamp(22px, 2.6vw, 32px)/1.15 var(--font); letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .6), 0 0 22px rgba(92, 225, 255, .5); }
.popup span { font: 900 clamp(16px, 1.8vw, 22px)/1 var(--font); letter-spacing: .06em; color: var(--accent); text-shadow: 0 2px 10px rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.popup-perfect b { background: linear-gradient(180deg, #FFFFFF 10%, #FFE08A 55%, #FFB547 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 190, 60, .6)) drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); text-shadow: none; }
.popup-bad b, .popup-bad span { color: #FF7C89; text-shadow: 0 2px 14px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 92, 108, .5); }
.popup-style b { color: #E3D4FF; text-shadow: 0 2px 14px rgba(0, 0, 0, .6), 0 0 22px rgba(183, 140, 255, .7); }
.popup-combo b { color: #FFE2A8; text-shadow: 0 2px 14px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 181, 71, .7); }
.popup-good b { color: #C9FFE0; text-shadow: 0 2px 14px rgba(0, 0, 0, .6), 0 0 20px rgba(74, 222, 128, .6); }
@keyframes popup { 0% { opacity: 0; transform: translateY(16px) scale(.6); } 12% { opacity: 1; transform: translateY(0) scale(1.12); } 22% { transform: scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px) scale(.96); } }

/* Notice dock: the tutorial tip, centred near the bottom of the view. */
.msg-dock { position: absolute; left: 0; right: 0; bottom: 15%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px; }
/* Narrower windows: the bottom-right minimap reaches in under a centred tip, so the column stops
   short of it (hud.js publishes --hud-minimap-left). */
@media (max-width: 1010px) { body:not(.touch) .msg-dock { padding-right: calc(var(--hud-minimap-left, 206px) + 10px); } }
.msg-hint { display: flex; justify-content: center; max-width: 100%; }
.msg-hint:empty { display: none; }
.hint { display: flex; align-items: center; gap: 12px; max-width: 580px; padding: 9px 18px 9px 9px; border-radius: 15px; background: rgba(9, 13, 24, .8);
  border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  font: 600 15px/1.4 var(--font); color: #fff; text-shadow: none; animation: hint-in .5s cubic-bezier(.3, 1.4, .45, 1) both; }
.hint.is-out { animation: hint-out .4s ease forwards; }
.hint-tag { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 10px; background: rgba(255, 181, 71, .16); color: var(--accent);
  font: 900 11px var(--font); letter-spacing: .18em; text-transform: uppercase; }
.hint-tag .i { width: 15px; height: 15px; }
.hint kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; margin: 0 2px; border-radius: 6px; font: 800 12px/1 var(--font); vertical-align: 1px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); border-bottom-width: 2px; }
@keyframes hint-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes hint-out { to { opacity: 0; transform: translateY(8px); } }
/* Touch: tips stay clear of the controls and the plane.
   Portrait: at the top, just below the session panel, minimap and pause button (hud.js publishes
   --hud-top-end); popups and banners start below the tip (--hud-tip-end), not under it.
   Landscape: under the heading tape, between the session panel and the pause button.
   A cockpit warning outranks a tip: while one is on (#hud.has-warn) the tip steps aside. */
body.touch .msg-dock { bottom: auto; top: var(--hud-top-end, 22%); }
body.touch .msg-hint { transition: opacity .2s ease; }
body.touch #hud.has-warn .msg-hint { opacity: 0; }
body.touch .msg-banner { top: 30%; }
@media (orientation: portrait) {
  body.touch .msg-popups { top: max(26%, var(--hud-top-end, 0px), var(--hud-tip-end, 0px)); }
  body.touch .msg-banner { top: max(30%, var(--hud-top-end, 0px), var(--hud-tip-end, 0px)); }
  body.touch .hud-warn { top: max(var(--warn-y), var(--hud-top-end, 0px)); }
}
@media (orientation: landscape) {
  body.touch .msg-dock { top: calc(54px + var(--safe-t, 0px)); padding: 0 calc(var(--hud-minimap-left, 160px) + 64px) 0 calc(var(--safe-l) + 262px); }
  body.touch .hint { padding: 7px 14px 7px 7px; font-size: 14px; }
  body.touch .msg-popups { top: 38%; }   /* below the tip, above the plane */
}
/* Phones: a shorter tip (the tag keeps just its icon), so it reaches less far down the view. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-width: 760px) {
  body.touch .hint { gap: 9px; padding: 7px 13px 7px 7px; border-radius: 13px; font-size: 13.5px; line-height: 1.35; }
  body.touch .hint-tag { width: 30px; padding: 0; gap: 0; justify-content: center; font-size: 0; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .banner, .banner .b-title, .b-burst, .b-ring circle, .b-icon, .hint, .ses-split.is-flash .ses-split-v, .ses-rings, .ses-combo svg, .ind.is-flash, .ses-dot, .hud-main.is-crash,
  .ses-target { animation: none !important; }
  .ses-bonus.is-flash { animation: rm-pop 1.4s linear forwards !important; }
  .banner.is-out, .hint.is-out { animation: rm-out .3s ease forwards !important; }
  .popup { animation: rm-pop 1.5s linear forwards !important; }
  .warn.is-on { animation: none !important; }
  body.touch .hc { transition: none; }
  @keyframes rm-out { to { opacity: 0; } }
  @keyframes rm-pop { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
}