/* MadHog Air Attack — JO1903 arcade UI (navy / gold / green / yellow) */
:root {
  --navy: #0d1b3d;
  --navy2: #13285a;
  --gold: #f2b632;
  --gold2: #ffd76a;
  --green: #0f8a3c;
  --yellow: #ffd500;
  --red: #e2402e;
  --panel: rgba(13, 27, 61, 0.78);
  --hud: rgba(6, 16, 9, 0.8);          /* fase 4 HUD: JO1903 black-green glass */
  --stripe: linear-gradient(90deg, var(--green) 0 50%, var(--yellow) 50% 100%);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --u: clamp(9px, 1.25vmax, 16px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1b3d; color: #fff; font-family: 'Baloo 2', 'Arial Rounded MT Bold', Arial, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
#app, #game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

.panel { background: var(--panel); border: 2px solid var(--gold); border-radius: calc(var(--u) * 1); box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.06); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ---------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud button, #hud .stick-zone, #hud .throttle { pointer-events: auto; }
/* the touch layer covers the whole screen: only its controls take touches (top buttons + minimap stay tappable) */
#hud .touch { pointer-events: none; }
.hud-tl { position: absolute; left: calc(var(--sl) + var(--u)); top: calc(var(--st) + var(--u)); padding: calc(var(--u) * 0.45) calc(var(--u) * 0.9); max-width: min(46vw, 420px); }
.mission-name { font-family: 'Lilita One', 'Baloo 2', sans-serif; color: var(--gold); font-size: calc(var(--u) * 1.25); letter-spacing: 0.04em; line-height: 1.1; }
.mission-obj { font-size: calc(var(--u) * 0.95); line-height: 1.2; color: #fff; }
.hud-tr { position: absolute; right: calc(var(--sr) + var(--u)); top: calc(var(--st) + var(--u)); display: flex; gap: calc(var(--u) * 0.45); }
.pill { background: var(--panel); border: 2px solid rgba(242,182,50,0.8); border-radius: 999px; padding: calc(var(--u) * 0.2) calc(var(--u) * 0.8); display: flex; align-items: center; gap: calc(var(--u) * 0.4); font-size: calc(var(--u) * 1.15); }
.pill b { font-family: 'Lilita One', sans-serif; font-weight: 400; min-width: 2.2em; text-align: right; }
.pill .ico { color: var(--gold); }
.hud-buttons { position: absolute; right: calc(var(--sr) + var(--u)); top: calc(var(--st) + var(--u) * 4.2); display: flex; gap: calc(var(--u) * 0.5); }
.round-btn { width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: 50%; border: 2px solid var(--gold); background: var(--panel); color: var(--gold); font-size: calc(var(--u) * 1.2); display: grid; place-items: center; padding: 0; }
.round-btn:active { transform: scale(0.94); }

.hud-flight { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--sb) + var(--u) * 0.6); display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * 0.35) calc(var(--u) * 1); }
.fl { display: flex; flex-direction: column; align-items: center; line-height: 1; min-width: calc(var(--u) * 4.5); }
.fl .lbl, .bar .lbl { font-size: calc(var(--u) * 0.62); color: var(--gold2); letter-spacing: 0.08em; }
.fl b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: calc(var(--u) * 1.7); }
.fl .unit { font-size: calc(var(--u) * 0.6); opacity: 0.8; }
.bars { display: flex; flex-direction: column; gap: 3px; }
.bar { display: flex; align-items: center; gap: 6px; }
.bar .lbl { width: 2.6em; text-align: right; }
.track { width: calc(var(--u) * 6); height: calc(var(--u) * 0.55); background: rgba(255,255,255,0.15); border-radius: 99px; overflow: hidden; }
.fill { height: 100%; width: 50%; border-radius: 99px; transition: width 0.1s linear; }
.fill.health { background: linear-gradient(90deg, #2fd16a, #0f8a3c); }
.fill.thr { background: linear-gradient(90deg, var(--yellow), var(--gold)); }
.fill.boost { background: linear-gradient(90deg, #6fd3ff, #2f8cff); }

.minimap-wrap { z-index: 3; cursor: pointer; position: absolute; left: calc(var(--sl) + var(--u)); bottom: calc(var(--sb) + var(--u)); width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; border: 3px solid var(--gold); overflow: hidden; background: #1e6fa0; box-shadow: 0 4px 16px rgba(0,0,0,0.4); pointer-events: auto; }
#minimap { width: 100%; height: 100%; display: block; }
.minimap-wrap .n { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-family: 'Lilita One'; font-size: calc(var(--u) * 0.8); color: #fff; text-shadow: 0 1px 2px #000; }

.tutorial { position: absolute; left: 50%; top: calc(var(--st) + var(--u) * 5.2); transform: translateX(-50%); background: linear-gradient(180deg, rgba(15,138,60,0.92), rgba(10,90,40,0.92)); border: 2px solid var(--yellow); border-radius: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.5) calc(var(--u) * 1); font-size: calc(var(--u) * 1.1); max-width: min(90vw, 620px); text-align: center; display: flex; gap: calc(var(--u) * 0.7); align-items: center; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.tutorial .step { background: var(--yellow); color: var(--navy); font-family: 'Lilita One'; border-radius: 99px; padding: 0 0.6em; white-space: nowrap; }
.warn { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font-family: 'Lilita One'; font-size: calc(var(--u) * 2.1); color: #fff; background: rgba(226,64,46,0.85); border: 3px solid #fff; padding: 0.15em 0.8em; border-radius: 12px; animation: blink 0.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.toast { position: absolute; left: 50%; top: 24%; transform: translateX(-50%) translateY(-10px); font-family: 'Lilita One'; font-size: calc(var(--u) * 1.5); color: var(--gold2); text-shadow: 0 2px 0 var(--navy), 0 0 12px rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.3s, transform 0.3s; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.banner { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) scale(0.6); font-family: 'Lilita One'; font-size: calc(var(--u) * 3.6); color: var(--yellow); -webkit-text-stroke: 2px var(--navy); text-shadow: 0 5px 0 var(--navy), 0 10px 30px rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.25s, transform 0.35s cubic-bezier(.2,1.6,.4,1); white-space: nowrap; text-align: center; }
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner small { display: block; font-size: 0.38em; color: #fff; -webkit-text-stroke: 0; }
.keys-help { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--sb) + var(--u) * 5.4); font-size: calc(var(--u) * 0.78); background: rgba(13,27,61,0.55); padding: 0.25em 0.9em; border-radius: 99px; white-space: nowrap; color: #dfe7ff; }
.keys-help b { color: var(--gold2); }

/* touch controls */
.touch { position: absolute; inset: 0; pointer-events: none; }
.stick-zone { position: absolute; left: 0; bottom: 0; width: 48%; height: 70%; touch-action: none; }
.stick-base { position: absolute; left: calc(var(--sl) + var(--u) * 15); bottom: calc(var(--sb) + var(--u) * 1.5); width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: radial-gradient(circle, rgba(13,27,61,0.35), rgba(13,27,61,0.6)); border: 3px solid rgba(242,182,50,0.75); transform: translate(0, 0); }
.stick-base.active { transform: translate(-50%, -50%); bottom: auto; }
.stick-base::before, .stick-base::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,0.18); transform: translate(-50%, -50%); }
.stick-base::before { width: 2px; height: 70%; } .stick-base::after { width: 70%; height: 2px; }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold2), var(--gold) 55%, #b67d10); border: 2px solid #fff6; box-shadow: 0 3px 10px rgba(0,0,0,0.45); transform: translate(-50%, -50%); }
.right-pad { position: absolute; right: calc(var(--sr) + var(--u) * 0.8); bottom: calc(var(--sb) + var(--u) * 2.2); display: flex; align-items: flex-end; gap: calc(var(--u) * 0.8); pointer-events: none; }
.action-btns { display: grid; grid-template-columns: auto auto; grid-template-areas: 'bomb boost' 'fire fire'; gap: calc(var(--u) * 0.6); pointer-events: none; }
.act { pointer-events: auto; border-radius: 50%; border: 3px solid #fff; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(var(--u) * 1.5); line-height: 1; touch-action: none; box-shadow: 0 5px 0 rgba(0,0,0,0.35), 0 8px 16px rgba(0,0,0,0.3); }
.act span { font-family: 'Lilita One'; font-size: calc(var(--u) * 0.72); margin-top: 2px; letter-spacing: 0.05em; }
.act.fire { grid-area: fire; justify-self: end; width: calc(var(--u) * 7); height: calc(var(--u) * 7); background: radial-gradient(circle at 35% 30%, #ff8a5c, var(--red) 60%, #a02010); }
.act.boost { grid-area: boost; width: calc(var(--u) * 5); height: calc(var(--u) * 5); background: radial-gradient(circle at 35% 30%, #8fe3ff, #2f8cff 60%, #1650b0); }
.act.bomb { grid-area: bomb; width: calc(var(--u) * 5); height: calc(var(--u) * 5); background: radial-gradient(circle at 35% 30%, #6a7486, #2c3446 60%, #121722); }
.act.on { transform: translateY(3px) scale(0.95); box-shadow: 0 2px 0 rgba(0,0,0,0.35); filter: brightness(1.25); }
.act.locked { opacity: 0.45; filter: grayscale(0.6); }
.throttle { pointer-events: auto; width: calc(var(--u) * 3.6); height: calc(var(--u) * 13); padding: 14px 0; touch-action: none; }
.thr-track { position: relative; width: 38%; height: 100%; margin: 0 auto; background: rgba(13,27,61,0.65); border: 2px solid var(--gold); border-radius: 99px; }
.thr-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 99px; background: linear-gradient(0deg, var(--gold), var(--yellow)); height: 0%; }
.thr-knob { position: absolute; left: 50%; bottom: 0%; transform: translate(-50%, 50%); width: calc(var(--u) * 3.4); height: calc(var(--u) * 1.9); border-radius: 10px; background: linear-gradient(180deg, #2a3e70, var(--navy)); border: 2px solid var(--gold2); font-family: 'Lilita One'; font-size: calc(var(--u) * 0.75); color: var(--gold2); display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0,0,0,0.5); }
.engine-btn { pointer-events: auto; position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font-family: 'Lilita One'; font-size: calc(var(--u) * 1.6); color: var(--navy); background: linear-gradient(180deg, var(--yellow), var(--gold)); border: 3px solid #fff; border-radius: 99px; padding: 0.35em 1.3em; box-shadow: 0 6px 0 #a06c00, 0 10px 24px rgba(0,0,0,0.4); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.06); } }

/* ---------------------------------------------------------------- screens */
.screen { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); padding: calc(var(--st) + 12px) calc(var(--sr) + 16px) calc(var(--sb) + 12px) calc(var(--sl) + 16px); }
.screen.dim { background: rgba(8, 16, 38, 0.55); }
#menu { background: linear-gradient(180deg, rgba(13,27,61,0.15) 0%, rgba(13,27,61,0) 40%, rgba(13,27,61,0.55) 100%); justify-content: space-between; }
.logo { margin-top: 2vh; text-align: center; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45)); }
.logo-wings { position: relative; display: inline-block; padding: 0.4em 1.6em 0.5em; background: linear-gradient(180deg, #2b3a5c, #141c30); border: 4px solid var(--gold); border-radius: 18px; }
.logo-wings::before, .logo-wings::after { content: ''; position: absolute; top: 28%; width: 3.2em; height: 1.5em; background: linear-gradient(180deg, #c8ccd4, #7c8496); border: 3px solid var(--gold); border-radius: 50% 10% 50% 10%; font-size: calc(var(--u) * 1.6); }
.logo-wings::before { left: -2.6em; transform: skewY(-12deg); }
.logo-wings::after { right: -2.6em; transform: skewY(12deg) scaleX(-1); }
.logo .crown { position: absolute; top: -0.95em; left: 50%; transform: translateX(-50%); font-size: calc(var(--u) * 3); }
.logo h1 { margin: 0; font-family: 'Lilita One', sans-serif; font-weight: 400; line-height: 0.95; }
.logo .l1 { display: block; font-size: calc(var(--u) * 5.2); background: linear-gradient(180deg, #fff3b0, var(--gold) 55%, #b06d00); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #5a3600; }
.logo .l2 { display: block; font-size: calc(var(--u) * 3.6); color: #f4f6fa; -webkit-text-stroke: 2px #1a2238; text-shadow: 0 4px 0 #0b1224; }
.logo .sub { font-family: 'Lilita One'; color: var(--yellow); font-size: calc(var(--u) * 1.25); letter-spacing: 0.08em; margin-top: 0.2em; }
.logo .zone { display: inline-block; margin-top: 0.5em; font-family: 'Lilita One'; color: var(--gold2); font-size: calc(var(--u) * 1.05); background: var(--navy); border: 2px solid var(--gold); padding: 0.1em 1em; border-radius: 8px; }
.menu-buttons { margin-top: auto; display: flex; gap: calc(var(--u) * 1); flex-wrap: wrap; justify-content: center; }
.menu-foot { font-size: calc(var(--u) * 0.8); opacity: 0.85; text-shadow: 0 1px 3px #000; }
.btn { font-family: 'Lilita One', sans-serif; font-size: calc(var(--u) * 1.4); letter-spacing: 0.05em; color: #fff; background: linear-gradient(180deg, #24407e, var(--navy)); border: 3px solid var(--gold); border-radius: 14px; padding: 0.35em 1.4em; box-shadow: 0 5px 0 #060d20, 0 8px 20px rgba(0,0,0,0.35); min-width: 9em; }
.btn.primary { color: var(--navy); background: linear-gradient(180deg, var(--yellow), var(--gold)); border-color: #fff; box-shadow: 0 5px 0 #a06c00, 0 8px 20px rgba(0,0,0,0.35); }
.btn.small { font-size: calc(var(--u) * 1); min-width: 0; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #060d20; }
h2 { font-family: 'Lilita One'; font-weight: 400; color: var(--gold); margin: 0; font-size: calc(var(--u) * 2); text-shadow: 0 3px 0 var(--navy); }
#missions { background: rgba(8, 16, 38, 0.55); justify-content: flex-start; overflow-y: auto; touch-action: pan-y; }
.mission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: calc(var(--u) * 0.8); width: min(100%, 1000px); }
.mcard { text-align: left; color: #fff; background: linear-gradient(160deg, #1d3570, var(--navy)); border: 2px solid var(--gold); border-radius: 14px; padding: calc(var(--u) * 0.7) calc(var(--u) * 0.9); display: grid; grid-template-columns: auto 1fr; gap: 2px calc(var(--u) * 0.7); align-items: center; box-shadow: 0 4px 0 #060d20; }
.mcard .mi { grid-row: span 2; font-size: calc(var(--u) * 2.2); }
.mcard .mt { font-family: 'Lilita One'; font-size: calc(var(--u) * 1.15); color: var(--gold2); }
.mcard .md { font-size: calc(var(--u) * 0.85); line-height: 1.2; opacity: 0.92; }
.mcard.locked { opacity: 0.5; border-color: #6b7690; }
.mcard .lock { grid-column: 2; font-size: calc(var(--u) * 0.75); color: var(--yellow); }
.mcard.suggest { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,213,0,0.35), 0 4px 0 #060d20; }
.mcard:not(.locked):active { transform: translateY(2px); }
.settings-panel, .pause-panel, .result-panel { padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); align-items: stretch; min-width: min(92vw, 360px); text-align: center; }
#settings { background: rgba(8,16,38,0.6); }
.settings-panel label { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: calc(var(--u) * 1); }
.settings-panel label.tog { flex-direction: row; align-items: center; gap: 10px; }
.settings-panel select { font-family: inherit; font-size: calc(var(--u) * 1); padding: 4px 8px; border-radius: 8px; border: 2px solid var(--gold); background: var(--navy2); color: #fff; }
.settings-panel input[type=checkbox] { width: 1.3em; height: 1.3em; accent-color: var(--gold); }
.result-crown { font-size: calc(var(--u) * 3); }
.result-panel p { margin: 0; font-size: calc(var(--u) * 1.1); }
#loading { background: radial-gradient(circle at 50% 40%, #1b3a78, var(--navy)); z-index: 30; }
.loading-box { text-align: center; font-family: 'Lilita One'; color: var(--gold); font-size: calc(var(--u) * 1.4); }
.spinner { font-size: calc(var(--u) * 3.4); animation: fly 1.6s ease-in-out infinite; }
@keyframes hintfade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fly { 0%,100% { transform: translate(-20px, 4px) rotate(-6deg); } 50% { transform: translate(20px, -6px) rotate(6deg); } }
.rotate-hint { position: fixed; left: 50%; top: 32%; animation: hintfade 7s forwards; transform: translateX(-50%); z-index: 15; background: var(--panel); border: 2px solid var(--gold); border-radius: 99px; padding: 0.3em 1em; font-size: 14px; pointer-events: none; }
.errbar { position: fixed; left: 0; right: 0; top: 0; z-index: 99; background: #c62828; color: #fff; font: 13px/1.3 monospace; padding: 6px 10px; }

/* small phones in landscape */
@media (max-height: 430px) {
  :root { --u: clamp(8px, 1.1vmax, 12px); }
  .hud-flight { bottom: calc(var(--sb) + 4px); }
  .tutorial { top: calc(var(--st) + var(--u) * 4.4); }
}
/* portrait */
@media (orientation: portrait) {
  :root { --u: clamp(8px, 2.1vw, 14px); }
  .hud-tl { max-width: 58vw; }
  .hud-tr { flex-direction: column; align-items: flex-end; }
  .hud-buttons { top: auto; bottom: calc(var(--sb) + var(--u) * 20); right: calc(var(--sr) + var(--u)); flex-direction: column; }
  .hud-flight { bottom: auto; top: calc(var(--st) + var(--u) * 7.5); }
  .tutorial { top: calc(var(--st) + var(--u) * 13); }
  .stick-zone { width: 58%; height: 55%; }
  .stick-base { left: calc(var(--sl) + var(--u) * 3); bottom: calc(var(--sb) + var(--u) * 11); }
  .minimap-wrap { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
  .throttle { height: calc(var(--u) * 19); }   /* heli: the collective needs room to go down, away from the gesture bar */
  .logo .l1 { font-size: calc(var(--u) * 4.2); }
  .logo .l2 { font-size: calc(var(--u) * 2.9); }
}

.minimap-wrap .map-hint { position: absolute; bottom: 4%; right: 14%; font-size: calc(var(--u) * 0.9); }
.map-panel { width: min(96vw, 1100px); max-height: 96vh; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.5); padding: calc(var(--u) * 0.8); }
.map-body { display: flex; gap: calc(var(--u) * 0.8); align-items: flex-start; width: 100%; justify-content: center; }
#wm-canvas { width: min(76vh, 62vw); height: min(76vh, 62vw); border-radius: 12px; border: 3px solid var(--gold); background: #1f78ad; touch-action: manipulation; }
.wm-info { flex: 1; max-width: 300px; font-size: calc(var(--u) * 1); line-height: 1.35; text-align: left; }
.wm-info b { color: var(--yellow); font-family: 'Lilita One'; font-size: 1.2em; }
@media (orientation: portrait) { .map-body { flex-direction: column; align-items: center; } #wm-canvas { width: 88vw; height: 88vw; } .wm-info { max-width: 88vw; } }

/* ---------------------------------------------------------------- on the ground (Fase B) */
.action-pill { pointer-events: auto; position: absolute; z-index: 4; left: 50%; bottom: calc(var(--sb) + var(--u) * 7.8); transform: translateX(-50%); font-family: 'Lilita One', 'Baloo 2', sans-serif; font-size: calc(var(--u) * 1.4); letter-spacing: 0.04em; color: var(--navy); background: linear-gradient(180deg, var(--yellow), var(--gold)); border: 3px solid #fff; border-radius: 99px; padding: 0.3em 1.1em; box-shadow: 0 5px 0 #a06c00, 0 8px 20px rgba(0,0,0,0.35); white-space: nowrap; touch-action: manipulation; }
.action-pill kbd { font-family: inherit; display: inline-block; min-width: 1.4em; margin-left: 0.3em; padding: 0 0.3em; border-radius: 6px; background: var(--navy); color: var(--gold2); font-size: 0.85em; }
.action-pill:active { transform: translateX(-50%) translateY(3px); box-shadow: 0 2px 0 #a06c00; }
#hud.mode-foot .throttle, #hud.mode-car .throttle, #hud.mode-foot .act.bomb, #hud.mode-car .act.bomb { display: none; }
#hud.mode-foot .hud-flight .fl:nth-child(2), #hud.mode-foot .bars { display: none; }
@media (orientation: portrait) { .action-pill { bottom: auto; top: calc(var(--st) + var(--u) * 12.5); } }

/* ---- combat HUD: weapons, gun heat, gun sight, target marker, damage flash */
.fill.heat { background: linear-gradient(90deg, #ffd23a, #ff5a1a); }
.fill.heat.hot { background: #ff2a2a; animation: blink 0.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.fl.ammo b { color: var(--gold2); }
#hud.mode-foot .fl.ammo, #hud.mode-car .fl.ammo, #hud.mode-foot .heatbar, #hud.mode-car .heatbar { display: none; }
.crosshair { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; z-index: 2;
  border: 2px solid rgba(255, 213, 0, 0.85); border-radius: 50%; box-shadow: 0 0 0 1px rgba(13, 27, 61, 0.5), inset 0 0 0 1px rgba(13, 27, 61, 0.4); transition: transform 0.08s; }
.crosshair i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #ffd500; box-shadow: 0 0 4px #000; }
.crosshair.hit { transform: scale(1.25); border-color: #ff4040; }
.crosshair.hit i { background: #ff4040; }
.crosshair.lock { border-color: #ff4040; }
.tgt-marker { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; transform: translate(-50%, -50%); }
.tgt-marker span { display: block; width: 26px; height: 26px; border: 3px solid #ff4040; transform: rotate(45deg); box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
.tgt-marker.edge span { width: 0; height: 0; border: 12px solid transparent; border-left: 20px solid #ff4040; transform: rotate(var(--a)); box-shadow: none; }
.tgt-marker em { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 4px; font: 700 12px 'Baloo 2', Arial; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.dmg-flash { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0) 45%, rgba(220, 0, 0, 0.55) 100%); transition: opacity 0.35s; }
.dmg-flash.on { opacity: 1; transition: opacity 0.05s; }

/* ---- more vehicles (Fase C): helicopter = guns, no bombs, the lever is the collective; boat = no weapons */
#hud.mode-heli .act.bomb, #hud.mode-heli #hud-bombs, #hud.mode-boat .throttle, #hud.mode-boat .act.bomb, #hud.mode-boat .act.fire,
#hud.mode-boat .fl.ammo, #hud.mode-boat .heatbar, #hud.mode-boat .hud-flight .fl:nth-child(2) { display: none; }
#hud.mode-heli .thr-knob { font-size: 1.3em; }
@media (pointer: coarse) { .round-btn { min-width: 42px; min-height: 42px; } }

/* score (update 35) */
.score-pill { border-color: var(--yellow); }
.score-pill b { min-width: 3.2em; color: var(--yellow); }
.score-pop { position: absolute; top: 100%; right: 0; margin-top: 4px; font-family: 'Lilita One', sans-serif; font-size: calc(var(--u) * 1.1); color: var(--yellow); text-shadow: 0 2px 0 var(--navy), 0 0 8px rgba(0,0,0,0.6); opacity: 0; white-space: nowrap; pointer-events: none; }
.score-pop.show { animation: scorepop 1.4s ease-out; }
@keyframes scorepop { 0% { opacity: 0; transform: translateY(-4px) scale(0.8); } 15% { opacity: 1; transform: translateY(0) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }
.result-score { margin: 0; font-size: calc(var(--u) * 1.3); }
.result-score b { color: var(--yellow); font-family: 'Lilita One', sans-serif; }
.scores-panel { padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); align-items: stretch; width: min(92vw, 380px); max-height: 92vh; overflow-y: auto; text-align: center; }
.scores-panel h2 { margin: 0; }
.sc-now { margin: 0; font-size: calc(var(--u) * 1.2); }
.sc-now b { color: var(--yellow); font-family: 'Lilita One', sans-serif; font-size: 1.3em; }
.sc-save { display: flex; gap: 8px; }
.sc-save input { flex: 1; min-width: 0; font: 16px 'Baloo 2', system-ui, sans-serif; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--gold); background: rgba(255,255,255,0.95); color: #0d1b3d; }
.sc-msg { margin: 0; min-height: 1.2em; font-size: calc(var(--u) * 0.95); color: var(--gold2); }
.sc-list { list-style: none; margin: 0; padding: 0; text-align: left; font-size: calc(var(--u) * 1.05); }
.sc-list li { display: flex; gap: 8px; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.sc-list li .r { width: 1.8em; color: var(--gold); }
.sc-list li .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-list li .s { font-family: 'Lilita One', sans-serif; color: var(--yellow); }
.sc-list li.me { background: rgba(255,213,0,0.15); border-radius: 8px; }

/* ---------------------------------------------------------------- visual fase 4: HUD in JO1903 colours (update 37) */
#hud .panel, #hud .pill, #hud .round-btn { background-color: var(--hud); }
#hud .panel { border-color: var(--gold); background-image: var(--stripe); background-size: 100% 3px; background-repeat: no-repeat; background-position: top; }
#hud .pill { border-color: rgba(255, 213, 0, 0.75); }
#hud .round-btn { color: var(--yellow); border-color: var(--yellow); }
.mission-name { color: var(--yellow); }
.fl .lbl, .bar .lbl { color: var(--yellow); }
.fill.health { background: linear-gradient(90deg, #39e07a, var(--green)); }
.fill.health.low { background: linear-gradient(90deg, #ff6a4d, var(--red)); animation: hlow 0.7s ease-in-out infinite alternate; }
@keyframes hlow { from { opacity: 1; } to { opacity: 0.45; } }
.fill.thr { background: linear-gradient(90deg, var(--yellow), var(--gold)); }
/* speed gauge: a ring that fills with speed (green -> yellow -> gold), the number inside */
.fl.gauge { --v: 0; position: relative; width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); min-width: 0; border-radius: 50%; justify-content: center;
  background: conic-gradient(from 225deg, var(--green) 0deg, var(--yellow) calc(var(--v) * 200deg), var(--gold) calc(var(--v) * 270deg), rgba(255,255,255,0.12) calc(var(--v) * 270deg) 270deg, transparent 270deg); }
.fl.gauge .gauge-in { position: absolute; inset: calc(var(--u) * 0.45); border-radius: 50%; background: rgba(4, 10, 6, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fl.gauge b { font-size: calc(var(--u) * 1.55); color: #fff; }
/* phones in landscape: a slimmer dashboard, no unit labels */
#hud.touch-ui .hud-flight { gap: calc(var(--u) * 0.7); padding: calc(var(--u) * 0.25) calc(var(--u) * 0.8); }
#hud.touch-ui .fl .unit:not(#hud-bombs) { display: none; }
#hud.touch-ui .fl.gauge { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
#hud.touch-ui .track { width: calc(var(--u) * 5); }
.fps { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--st) + 4px); font: 600 12px/1 system-ui, sans-serif; color: var(--yellow); background: rgba(0,0,0,0.55); padding: 3px 8px; border-radius: 99px; pointer-events: none; }
.set-level { margin: 0; font-size: calc(var(--u) * 0.85); color: var(--gold2); min-height: 1em; }

/* ---- Fase D: wanted stars + siren glow on the screen edge ---- */
#hud .pill.wanted { border-color: #ff3b3b; }
.pill.wanted b { color: #ffd500; letter-spacing: 0.06em; min-width: 0; }
.pill.wanted.seen { animation: wantedblink 0.5s steps(2) infinite; }
@keyframes wantedblink { 0% { border-color: #ff3b3b; box-shadow: 0 0 10px rgba(255, 40, 40, 0.7); } 100% { border-color: #3b6bff; box-shadow: 0 0 10px rgba(40, 90, 255, 0.7); } }
.siren-edge { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.6s; box-shadow: inset 0 0 calc(var(--u) * 3) rgba(255, 30, 30, 0.45); }
.siren-edge.on { opacity: 1; animation: sirenedge 0.5s steps(2) infinite; }
@keyframes sirenedge { 0% { box-shadow: inset calc(var(--u) * 2) 0 calc(var(--u) * 2.5) -1px rgba(255, 30, 30, 0.45); } 100% { box-shadow: inset calc(var(--u) * -2) 0 calc(var(--u) * 2.5) -1px rgba(40, 90, 255, 0.45); } }