/* ============ DENGUE ROYALE — tactical HUD design system ============
   Cyan  = technology / scanning     Red  = danger
   Green = safe / success            Gold = rewards
   Panels: dark translucent with clipped corners.                      */
:root {
  --cyan: #2ff3ff;
  --cyan-d: #0aa7b8;
  --teal: #0f8f8a;
  --red: #ff3b4e;
  --orange: #ff9a2e;
  --green: #3dff8b;
  --gold: #ffcc33;
  --gold-d: #e59a00;
  --ink: #e9fbff;
  --panel: rgba(4, 18, 26, 0.72);
  --panel-b: rgba(47, 243, 255, 0.45);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --font: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #05121a; color: var(--ink);
  font-family: var(--font); font-stretch: condensed;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none; touch-action: none;
}
#app { position: fixed; inset: 0; overflow: hidden; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#touch-layer { position: absolute; inset: 0; touch-action: none; }
#world-ui { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-b);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 0 18px rgba(47, 243, 255, 0.08);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* ================= HUD ================= */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }
.hud-top {
  position: absolute; top: calc(var(--sat) + 8px); left: calc(var(--sal) + 8px); right: calc(var(--sar) + 8px);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.mission { padding: 7px 10px 8px; min-width: 0; max-width: 58%; }
.mission-tag { display: inline-block; font-size: 10px; letter-spacing: .14em; font-weight: 800; color: #05121a; background: var(--gold); padding: 1px 6px; }
.mission-title { font-weight: 900; font-style: italic; font-size: 15px; letter-spacing: .02em; margin: 3px 0 4px; color: #fff; text-shadow: 0 0 8px rgba(47,243,255,.5); white-space: nowrap; }
.objectives { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.objectives li { display: flex; align-items: center; gap: 6px; padding: 1px 0; color: #bfe9ef; }
.objectives li span { flex: 1; white-space: nowrap; }
.objectives li b { color: var(--cyan); font-weight: 800; }
.objectives .chk { width: 11px; height: 11px; border: 1.5px solid var(--cyan); flex: none; }
.objectives li.done { color: var(--green); }
.objectives li.done b { color: var(--green); }
.objectives li.done .chk { background: var(--green); border-color: var(--green); box-shadow: 0 0 6px var(--green); }
.objectives li.pending { opacity: .45; }

.hud-right { display: grid; grid-template-columns: auto auto; gap: 6px; justify-items: stretch; }
.stat { padding: 4px 9px; display: flex; flex-direction: column; align-items: flex-end; min-width: 70px; }
.stat .lbl { font-size: 10px; letter-spacing: .16em; color: #8fd6df; font-weight: 700; }
.stat .val { font-size: 21px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .val.gold { color: var(--gold); text-shadow: 0 0 10px rgba(255,204,51,.45); }
.timer .val { color: #fff; }
.timer.warn .val { color: var(--red); animation: blink .5s steps(2) infinite; }
.minimap-wrap { grid-column: 1 / span 2; padding: 3px; width: 112px; height: 112px; justify-self: end; border-radius: 0; }
#minimap { width: 100%; height: 100%; display: block; }
.kills { grid-column: 1 / span 2; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; justify-self: end; }
.kills .ico { width: 18px; height: 18px; color: var(--red); }
.kills .val { font-size: 18px; }

.toast {
  position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%) scale(.9);
  padding: 7px 14px; font-weight: 800; font-size: 16px; letter-spacing: .04em; text-align: center;
  background: rgba(4,18,26,.8); border: 1px solid var(--cyan); color: #fff; opacity: 0;
  transition: opacity .2s, transform .2s; max-width: 86vw; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast.red { border-color: var(--red); color: #ffd7dc; }
.toast.green { border-color: var(--green); color: #d8ffe8; }
.toast.gold { border-color: var(--gold); color: #fff3c4; }

.banner {
  position: absolute; left: 0; right: 0; top: 42%; transform: translateY(-50%);
  text-align: center; font-weight: 900; font-style: italic; font-size: 34px; letter-spacing: .03em;
  color: #fff; text-shadow: 0 0 18px var(--cyan), 0 2px 0 #000; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(4,18,26,.75) 20%, rgba(4,18,26,.75) 80%, transparent);
  padding: 10px 0;
}
.banner small { display: block; font-size: 14px; letter-spacing: .3em; font-style: normal; color: var(--cyan); text-shadow: none; }
.banner.show { animation: banner 2.2s ease forwards; }
.banner.red { text-shadow: 0 0 18px var(--red), 0 2px 0 #000; }
.banner.red small { color: var(--red); }
@keyframes banner { 0% { opacity: 0; transform: translateY(-50%) scaleX(1.4); } 12% { opacity: 1; transform: translateY(-50%) scaleX(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

.scan-card {
  position: absolute; left: 50%; top: calc(var(--sat) + 262px); transform: translateX(-50%) translateY(-8px);
  width: min(370px, 94vw); padding: 10px 14px 12px; opacity: 0; transition: opacity .25s, transform .25s;
  background: rgba(3, 20, 28, .9); border: 3px solid var(--cyan);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  pointer-events: none;
}
.scan-card.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sc-head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .14em; font-weight: 800; color: var(--cyan); }
.sc-sim { color: #7fb3bb; }
.sc-class { font-size: 36px; font-weight: 900; margin-top: 2px; line-height: 1.05; text-transform: uppercase; }
.sc-object { font-size: 12px; letter-spacing: .1em; color: #a9cfd5; text-transform: uppercase; }
.sc-text { font-size: 16px; line-height: 1.3; margin-top: 5px; color: #e6f7fa; }
.sc-points { position: absolute; right: 14px; top: 24px; font-size: 24px; font-weight: 900; color: var(--gold); }

.hud-bottom-left { position: absolute; left: calc(var(--sal) + 10px); bottom: calc(var(--sab) + 196px); }
.hp { display: flex; align-items: center; gap: 7px; padding: 5px 9px; }
.hp .lbl { font-weight: 900; font-size: 13px; color: var(--green); }
.hp-bar { width: 116px; height: 9px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
#hp-fill { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #1fd16b, var(--green)); box-shadow: 0 0 8px var(--green); transition: transform .2s; }
#hp-fill.low { background: linear-gradient(90deg, #b5142a, var(--red)); box-shadow: 0 0 8px var(--red); }
.hp-num { font-weight: 900; font-size: 14px; min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; }

.joystick {
  position: absolute; left: calc(var(--sal) + 22px); bottom: calc(var(--sab) + 30px);
  width: 140px; height: 140px; pointer-events: none; transition: opacity .2s;
}
.joystick.active { transition: none; }
.joy-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(47,243,255,.55); background: radial-gradient(circle, rgba(47,243,255,.10), rgba(4,18,26,.45) 70%); box-shadow: 0 0 16px rgba(47,243,255,.25), inset 0 0 20px rgba(47,243,255,.15); }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9fbff, #5bc6d3 45%, #0d5560); box-shadow: 0 0 14px rgba(47,243,255,.6); }
.joy-lbl { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font-size: 11px; letter-spacing: .25em; color: #8fd6df; font-weight: 800; }

.controls-right { position: absolute; right: calc(var(--sar) + 14px); bottom: calc(var(--sab) + 24px); width: 210px; height: 220px; }
.btn-round {
  position: absolute; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 900; letter-spacing: .08em; font-size: 12px; color: #fff; transition: transform .08s, filter .08s;
}
.btn-round svg { width: 44%; height: 44%; }
.btn-round:active, .btn-round.pressed { transform: scale(.92); filter: brightness(1.3); }
.btn-fire { right: 0; bottom: 0; width: 104px; height: 104px; background: radial-gradient(circle at 40% 35%, #ff7d8a, #d4122b 55%, #6e0614); border: 3px solid #ffb3bc; box-shadow: 0 0 22px rgba(255,59,78,.7), inset 0 -6px 14px rgba(0,0,0,.35); }
.btn-scan { right: 112px; bottom: 6px; width: 78px; height: 78px; background: radial-gradient(circle at 40% 35%, #8ffaff, #0aa7b8 55%, #03434b); border: 3px solid #b8fdff; box-shadow: 0 0 20px rgba(47,243,255,.7), inset 0 -6px 14px rgba(0,0,0,.35); color: #021b20; }
.btn-scan.cooldown { filter: grayscale(.7) brightness(.7); }
.btn-clean { right: 2px; bottom: 114px; width: 100px; height: 100px; font-size: 15px; background: radial-gradient(circle at 40% 35%, #a8ffcb, #16b45a 55%, #04461f); border: 3px solid #c9ffe0; box-shadow: 0 0 20px rgba(61,255,139,.7); color: #02210f; opacity: 0; transform: scale(.6); pointer-events: none !important; transition: opacity .2s, transform .2s; }
.btn-clean.show { opacity: 1; transform: scale(1); pointer-events: auto !important; animation: pulseG 1.1s ease-in-out infinite; }
@keyframes pulseG { 50% { box-shadow: 0 0 34px rgba(61,255,139,1); } }

.clean-panel {
  position: absolute; right: 0; bottom: 116px; width: min(280px, 72vw); padding: 10px; display: none; flex-direction: column; gap: 6px;
  background: rgba(3, 26, 16, .9); border: 1px solid var(--green);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.clean-panel.show { display: flex; }
.cp-title { font-size: 13px; letter-spacing: .1em; color: var(--green); font-weight: 900; }
.btn-act { min-height: 64px; padding: 8px 12px; font-size: 21px; font-weight: 900; letter-spacing: .04em; text-align: left; background: linear-gradient(90deg, rgba(61,255,139,.22), rgba(61,255,139,.05)); border: 1px solid rgba(61,255,139,.6); color: #eafff2; }
.btn-act:active { background: rgba(61,255,139,.45); }

.standin-badge { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 4px); font-size: 10px; letter-spacing: .12em; padding: 2px 8px; background: rgba(255,154,46,.85); color: #1a0d00; font-weight: 800; }
.btn-icon.pause { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--sat) + 8px); width: 36px; height: 36px; border-radius: 8px; background: var(--panel); border: 1px solid var(--panel-b); color: var(--cyan); display: none; }

#vignette-hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(255,0,30,.55) 100%); transition: opacity .35s; }
#vignette-hurt.on { opacity: 1; transition: none; }
#vignette-surge { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 70px 10px rgba(255,40,60,.65); }
#vignette-surge.on { animation: surge 1s ease-in-out infinite; }
@keyframes surge { 0%,100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes blink { 50% { opacity: .35; } }

/* ============ world-anchored UI ============ */
.wlabel { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; font-weight: 900; font-size: 15px; letter-spacing: .06em; display: flex; align-items: center; gap: 5px; will-change: transform; }
.wlabel .dia { width: 26px; height: 26px; transform: rotate(45deg); border: 2px solid var(--cyan); background: rgba(4,18,26,.7); display: grid; place-items: center; box-shadow: 0 0 10px rgba(47,243,255,.6); }
.wlabel .dia i { transform: rotate(-45deg); font-style: normal; color: var(--cyan); font-size: 13px; }
.wlabel .txt { padding: 2px 6px; background: rgba(4,18,26,.75); border-left: 3px solid var(--cyan); }
.wlabel .dist { color: #9fdbe3; font-size: 11px; }
.wlabel.risk .dia { border-color: var(--orange); box-shadow: 0 0 10px var(--orange); } .wlabel.risk .dia i { color: var(--orange); } .wlabel.risk .txt { border-color: var(--orange); color: #ffd9b0; }
.wlabel.stagnant .dia { border-color: var(--red); box-shadow: 0 0 12px var(--red); } .wlabel.stagnant .dia i { color: var(--red); } .wlabel.stagnant .txt { border-color: var(--red); color: #ffc9cf; }
.wlabel.clean .dia, .wlabel.secured .dia { border-color: var(--green); box-shadow: 0 0 10px var(--green); } .wlabel.clean .dia i, .wlabel.secured .dia i { color: var(--green); } .wlabel.clean .txt, .wlabel.secured .txt { border-color: var(--green); color: #c9ffdf; }
.wlabel.offscreen .txt { display: none; }
.edge-arrow { position: absolute; left: 0; top: 0; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 16px solid var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); will-change: transform; }

.bracket { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, width, height; }
.bracket::before, .bracket::after, .bracket i::before, .bracket i::after { content: ""; position: absolute; width: 16px; height: 16px; border: 3px solid var(--bc, var(--cyan)); filter: drop-shadow(0 0 4px var(--bc, var(--cyan))); }
.bracket::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.bracket::after { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.bracket i::before { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.bracket i::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.bracket b { position: absolute; left: 0; top: -22px; font-size: 13px; font-weight: 900; padding: 1px 6px; background: var(--bc, var(--cyan)); color: #04121a; white-space: nowrap; }
.bracket .scanline { position: absolute; left: 0; right: 0; height: 2px; background: var(--bc, var(--cyan)); box-shadow: 0 0 8px var(--bc, var(--cyan)); animation: scanY 1s linear infinite; opacity: .8; }
@keyframes scanY { from { top: 0; } to { top: 100%; } }

/* ============ start screen ============ */
.screen { position: absolute; inset: 0; z-index: 10; }
.start-bg, .end-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(22px) brightness(.55); }
.art-frame {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100vw, calc(100vh * 941 / 1672)); width: min(100vw, calc(100dvh * 941 / 1672));
  aspect-ratio: 941 / 1672; box-shadow: 0 0 60px rgba(0,0,0,.6);
}
.art-frame img { width: 100%; height: 100%; display: block; pointer-events: none; animation: dolly 14s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes dolly { from { transform: scale(1); } to { transform: scale(1.025); } }
.art-frame { overflow: hidden; }
.hotspot { position: absolute; border-radius: 10px; }
.hotspot:active { background: rgba(255,255,255,.18); box-shadow: 0 0 24px rgba(47,243,255,.6); }
.hs-sound { left: 2.7%; top: 1.7%; width: 8%; height: 4.3%; }
.hs-settings { left: 89.6%; top: 1.7%; width: 7.7%; height: 4.3%; }
.hs-start { left: 13.3%; top: 78.3%; width: 73.3%; height: 9%; animation: startGlow 1.6s ease-in-out infinite; }
@keyframes startGlow { 50% { box-shadow: 0 0 26px 4px rgba(255, 204, 51, .55); } }
.hs-booth { left: 10.1%; top: 89.1%; width: 38.3%; height: 4.8%; }
.hs-how { left: 51.5%; top: 89.1%; width: 39.3%; height: 4.8%; }
.mute-x { position: absolute; inset: 0; display: none; }
.mute-x::before, .mute-x::after { content: ""; position: absolute; left: 50%; top: 10%; width: 3px; height: 80%; background: var(--red); box-shadow: 0 0 6px var(--red); }
.mute-x::before { transform: rotate(45deg); } .mute-x::after { transform: rotate(-45deg); }
.hs-sound.muted .mute-x { display: block; }

/* ============ modal ============ */
.modal { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(0,8,12,.6); padding: calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px); }
.modal-card { width: min(380px, 100%); max-height: 100%; overflow: auto; padding: 16px; touch-action: pan-y; background: rgba(4,18,26,.94); }
.modal-card h2 { margin: 0 0 8px; font-style: italic; font-weight: 900; font-size: 24px; color: #fff; text-shadow: 0 0 10px var(--cyan); }
.modal-card h3 { margin: 12px 0 4px; font-size: 14px; letter-spacing: .14em; color: var(--cyan); }
.modal-card p, .modal-card li { font-size: 15px; line-height: 1.35; color: #d4eef2; }
.modal-card ul { padding-left: 18px; margin: 4px 0; }
.howto-step { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.howto-step .ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; }
.howto-step .ic svg { width: 26px; height: 26px; }
.ic.cy { background: rgba(47,243,255,.18); border: 2px solid var(--cyan); color: var(--cyan); }
.ic.rd { background: rgba(255,59,78,.18); border: 2px solid var(--red); color: var(--red); }
.ic.gr { background: rgba(61,255,139,.18); border: 2px solid var(--green); color: var(--green); }
.cls-chip { display: inline-block; padding: 1px 7px; font-weight: 800; color: #04121a; margin: 2px 0; }
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(47,243,255,.15); font-size: 16px; }
.toggle { min-width: 92px; min-height: 40px; font-weight: 900; border: 1px solid var(--cyan); color: var(--cyan); background: rgba(47,243,255,.1); }
.toggle.off { color: #889; border-color: #556; background: transparent; }

.btn-tac {
  display: block; width: 100%; min-height: 52px; margin-top: 12px; font-size: 20px; font-weight: 900; font-style: italic; letter-spacing: .05em;
  color: #fff; background: linear-gradient(180deg, #13c6d6, #07707c); border: 2px solid #8ff7ff;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.btn-tac.gold { color: #1b1100; background: linear-gradient(180deg, #ffe680, #ffb300); border-color: #fff3b8; box-shadow: 0 0 22px rgba(255,204,51,.6); }
.btn-tac.ghost { background: transparent; border-color: rgba(143,247,255,.5); font-size: 16px; min-height: 44px; }
.btn-tac:active { filter: brightness(1.25); }

/* ============ end screen ============ */
.end { display: grid; place-items: center; padding: calc(var(--sat) + 14px) 14px calc(var(--sab) + 14px); }
.end-card { position: relative; width: min(390px, 100%); max-height: 100%; overflow: auto; text-align: center; padding: 18px 16px; background: rgba(4,18,26,.82); border: 1px solid rgba(255,204,51,.6); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); touch-action: pan-y; }
.end-title { font-size: 38px; font-weight: 900; font-style: italic; color: var(--gold); text-shadow: 0 0 20px rgba(255,204,51,.7), 0 3px 0 #6b4300; line-height: 1; }
.end-sub { font-size: 18px; font-weight: 900; letter-spacing: .12em; color: #fff; margin-top: 4px; }
.end.failed .end-card { border-color: rgba(255,59,78,.7); }
.end.failed .end-title { color: var(--red); text-shadow: 0 0 20px rgba(255,59,78,.7), 0 3px 0 #4a0010; }
.end-rank { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 6px; }
.badge { width: 66px; height: 66px; display: grid; place-items: center; font-size: 38px; font-weight: 900; font-style: italic; color: #1b1100; background: linear-gradient(160deg, #fff3b8, #ffb300 60%, #b86f00); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.end.failed .badge { background: linear-gradient(160deg, #ddd, #777); color: #222; }
.stars { display: flex; gap: 4px; }
.star { width: 34px; height: 34px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: rgba(255,255,255,.18); }
.star.on { background: linear-gradient(180deg, #fff3b8, #ffb300); filter: drop-shadow(0 0 6px var(--gold)); animation: starPop .4s ease backwards; }
@keyframes starPop { from { transform: scale(0) rotate(-60deg); } }
.end-score-lbl { font-size: 12px; letter-spacing: .3em; color: #9fdbe3; margin-top: 6px; }
.end-score { font-size: 46px; font-weight: 900; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(255,204,51,.5); }
.end-stats { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; text-align: left; margin: 12px 0 4px; font-size: 15px; }
.end-stats .k { color: #b5dfe5; }
.end-stats .v { font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.end-stats .sep { grid-column: 1 / span 2; height: 1px; background: rgba(47,243,255,.2); margin: 4px 0; }
.end-lesson { margin-top: 8px; padding: 8px 10px; font-size: 14px; line-height: 1.3; background: rgba(61,255,139,.1); border-left: 3px solid var(--green); text-align: left; }

/* ============ loading ============ */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at 50% 40%, #0b3440, #05121a 70%); z-index: 40; }
.load-logo { font-size: 38px; font-weight: 900; font-style: italic; color: #fff; text-align: center; text-shadow: 0 0 18px var(--cyan); line-height: 1; }
.load-logo small { display: block; font-size: 20px; color: var(--cyan); letter-spacing: .12em; margin-top: 4px; }
.load-bar { width: 220px; height: 8px; background: rgba(255,255,255,.12); border: 1px solid var(--cyan-d); }
#load-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan-d), var(--cyan)); box-shadow: 0 0 10px var(--cyan); transition: width .2s; }
.load-text { font-size: 14px; letter-spacing: .12em; color: #9fdbe3; }
.load-team { position: absolute; bottom: calc(var(--sab) + 18px); font-size: 12px; letter-spacing: .14em; color: #6aa9b2; }

.rotate-msg { display: none; position: absolute; inset: 0; z-index: 50; background: #05121a; color: #fff; align-items: center; justify-content: center; flex-direction: column; text-align: center; font-size: 18px; padding: 20px; }
.rotate-msg div { font-size: 54px; color: var(--cyan); }
@media (orientation: landscape) and (pointer: coarse) and (max-height: 520px) {
  .rotate-msg { display: flex; }
}

/* small phones */
@media (max-height: 640px) {
  .minimap-wrap { width: 92px; height: 92px; }
  .scan-card { top: calc(var(--sat) + 238px); }
  .guide { top: calc(var(--sat) + 186px) !important; }
  .hud-bottom-left { bottom: calc(var(--sab) + 176px); }
  .joystick { width: 124px; height: 124px; }
}
@media (max-width: 360px) {
  .mission-title { font-size: 13px; }
  .objectives { font-size: 11.5px; }
}

/* floating score pops */
.pop { position: absolute; left: 0; top: 0; font-weight: 900; font-size: 18px; color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.6); pointer-events: none; animation: pop 0.9s ease-out forwards; white-space: nowrap; }
@keyframes pop { 0% { opacity: 0; margin-top: 0; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -46px; } }

/* ============ NEXT STEP guide ============ */
.guide {
  position: absolute; left: 50%; top: calc(var(--sat) + 206px); transform: translateX(-50%);
  display: none; align-items: center; gap: 8px; max-width: 94vw; padding: 6px 12px 6px 6px;
  background: rgba(3, 18, 26, .88); border: 2px solid var(--gold); border-radius: 30px;
  box-shadow: 0 0 16px rgba(255, 204, 51, .35); pointer-events: none;
}
.guide.show { display: flex; animation: guideIn .35s ease; }
@keyframes guideIn { from { transform: translateX(-50%) scale(.85); opacity: 0; } }
.guide-step { flex: none; min-width: 58px; text-align: center; padding: 4px 10px; border-radius: 20px; font-weight: 900; font-size: 15px; letter-spacing: .06em; color: #04121a; background: var(--gold); }
.guide-text { font-weight: 800; font-size: 16px; color: #fff; line-height: 1.15; }
.guide.step-scan { border-color: var(--cyan); box-shadow: 0 0 16px rgba(47,243,255,.4); } .guide.step-scan .guide-step { background: var(--cyan); }
.guide.step-clean, .guide.step-go { border-color: var(--green); box-shadow: 0 0 16px rgba(61,255,139,.4); } .guide.step-clean .guide-step, .guide.step-go .guide-step { background: var(--green); }
.guide.step-fire { border-color: var(--red); box-shadow: 0 0 16px rgba(255,59,78,.45); } .guide.step-fire .guide-step { background: var(--red); color: #fff; }

/* pulsing ring on the button the player should press next */
.btn-round.hint::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 4px solid #fff; animation: hintRing 1s ease-out infinite; pointer-events: none; }
@keyframes hintRing { from { transform: scale(.85); opacity: .95; } to { transform: scale(1.3); opacity: 0; } }

/* ============ stage select ============ */
.stage-card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 8px 0; padding: 12px; text-align: left; border: 2px solid var(--sc, var(--cyan)); background: rgba(255,255,255,.04); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.stage-card:active { background: rgba(255,255,255,.12); }
.stage-card .num { flex: none; width: 54px; height: 54px; display: grid; place-items: center; font-size: 28px; font-weight: 900; font-style: italic; color: #04121a; background: var(--sc); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.stage-card .info b { display: block; font-size: 20px; font-weight: 900; font-style: italic; color: #fff; }
.stage-card .info i { display: inline-block; font-style: normal; font-size: 12px; font-weight: 900; letter-spacing: .12em; padding: 1px 6px; margin: 2px 0; color: #04121a; background: var(--sc); }
.stage-card .info span { display: block; font-size: 13.5px; color: #bfe3e8; }
.stage-card .best { margin-left: auto; font-size: 13px; color: var(--gold); font-weight: 900; text-align: right; }
.stage-card.locked { opacity: .45; filter: grayscale(.8); }
.stage-card.locked .best { color: #aaa; }
.howto-big { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; margin: 10px 0; }
.howto-big .n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 18px; color: #04121a; }
.howto-big p { margin: 0; font-size: 16px; }

/* ============ install-as-app bar ============ */
.install-bar { position: absolute; z-index: 20; left: 50%; transform: translateX(-50%); top: calc(var(--sat) + 64px); width: min(360px, 92vw);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; background: rgba(4,18,26,.92); border: 2px solid var(--cyan); border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.5); animation: guideIn .4s ease; }
.install-bar img { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.install-bar div { flex: 1; min-width: 0; line-height: 1.15; }
.install-bar b { display: block; font-size: 16px; color: #fff; }
.install-bar span { font-size: 13px; color: #9fdbe3; }
.install-go { flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; font-weight: 900; font-size: 15px; color: #04121a; background: var(--cyan); }
.install-x { flex: none; width: 34px; height: 40px; font-size: 18px; color: #9fdbe3; }
.ios-share { display: inline-block; padding: 0 6px; border: 1px solid var(--cyan); border-radius: 6px; color: var(--cyan); font-weight: 900; }