/* Widok z wnętrza hełmu: dane są projekcją na szybie, rama jest modelem 3D. */
#stage.helmet-mode #left, #stage.helmet-mode #right { display: none; }
#stage.helmet-mode #main { left: 0; top: 56px; width: 1664px; height: 688px; border: 0; border-radius: 0; }
#stage.helmet-mode #view3d { width: 100%; height: 100%; }
#stage.helmet-mode #caption { top: 88px; bottom: auto; left: 26%; right: 26%; font-size: 13px; }
#stage.helmet-mode #net { top: 90px; }

#hud { --visor: #9be8e6; --visor-dim: #71a9a9; --visor-line: #91e3e345; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; color: var(--visor); font-family: var(--mono); text-shadow: 0 0 12px #82f6f44a; }
.visor-glass { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 42%, #4bcdd308 68%, #6ce3ed12 82%, #0002 95%);
  border-radius: 22% 22% 31% 31%; box-shadow: inset 0 24px 90px #b3eff00b; }
.visor-glass::before { content: ''; position: absolute; left: 12%; right: 12%; top: 10%; height: 13%; border-radius: 50%;
  border-top: 1px solid #b8faff38; transform: rotate(-3deg); filter: blur(.4px); }
.visor-glass::after { content: ''; position: absolute; left: 8%; width: 12%; top: 19%; height: 43%; border-radius: 70%;
  border-left: 8px solid #c4fbff09; transform: rotate(12deg); filter: blur(3px); }
.visor-compass { position: absolute; left: 38%; right: 38%; top: 10%; height: 57px; text-align: center; }
.compass-ruler { height: 15px; border-bottom: 1px solid var(--visor-line); background: repeating-linear-gradient(90deg, transparent 0 19px, var(--visor-line) 19px 20px); mask-image: linear-gradient(90deg, transparent, #000 20% 80%, transparent); }
.visor-compass b { display: inline-block; font-size: 16px; letter-spacing: .12em; padding: 5px 12px; background: #0a252137; }
.visor-compass > span { display: block; font-size: 7px; margin-top: -4px; }
.visor-cross { position: absolute; left: 50%; top: 46%; display: flex; align-items: center; gap: 12px; transform: translate(-50%, -50%); opacity: .65; }
.visor-cross i { width: 18px; height: 1px; background: var(--visor-line); }
.visor-cross span { font-size: 15px; font-weight: 300; }
/* lewa strona: sam tekst — dystans i teleport wyżej, prędkość i nachylenie niżej */
.visor-nav { position: absolute; left: 12%; top: 37%; transform: perspective(800px) rotateY(12deg); }
.visor-nav small { display: block; font-size: 9px; letter-spacing: .18em; color: var(--visor-dim); margin-bottom: 8px; }
.visor-nav b { font-size: 17px; font-weight: 500; letter-spacing: .04em; }
.visor-motion { position: absolute; left: 12%; bottom: 21%; display: grid; gap: 6px; transform: perspective(800px) rotateY(12deg); }
.visor-motion b { font-size: 26px; font-weight: 400; letter-spacing: -.04em; }
.visor-motion > span { font-size: 13px; color: var(--visor-dim); letter-spacing: .06em; }
/* prawa strona: tylko tlen i energia, bez ramki — lustrzanie do bloku ruchu */
.visor-summary { position: absolute; width: 190px; right: 12%; bottom: 21%; transform: perspective(1000px) rotateY(-11deg) rotateX(3deg); }
.visor-metric { position: relative; display: flex; align-items: baseline; justify-content: space-between; padding: 6px 0 13px; margin-bottom: 2px; }
.visor-metric > span { font-size: 11px; color: #b4d8d6; }
.visor-metric em { font-style: normal; opacity: .75; }
.visor-metric b { font-size: 20px; font-weight: 400; letter-spacing: -.04em; }
.visor-bar { position: absolute; left: 0; right: 0; bottom: 5px; height: 3px; background: #94e8e41c; }
.visor-bar i { display: block; height: 100%; background: var(--visor); box-shadow: 0 0 8px #91f4e741; transition: width .2s; }
#hud[data-tone="danger"] { --visor: #ffb47d; --visor-dim: #deb392; --visor-line: #ffb47d50; }
#hud[data-tone="warning"] { --visor: #ffdb92; --visor-dim: #d0c1a1; --visor-line: #ffdb9245; }
.visor-warning { position: absolute; left: 50%; top: 26%; max-width: 48%; transform: translateX(-50%); padding: 8px 18px; font-size: 12px;
  letter-spacing: .08em; color: #ffcb91; background: #351b15b3; border-top: 1px solid #ffcb9177; border-bottom: 1px solid #ffcb9144; text-align: center; }
.visor-help { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: .02em; color: #b5cece99; white-space: nowrap; }

/* telefon i tablet: hełm w tym samym miejscu co mapa, panele stanu zostają pod spodem */
#stage.compact.helmet-mode #main { top: 0; width: 972px; height: calc(var(--mh, 648) * 1px); border: 1px solid var(--line); border-radius: 11px; }
#stage.compact.helmet-mode #left, #stage.compact.helmet-mode #right { display: flex; }
#stage.compact.helmet-mode #caption { top: auto; bottom: 13px; left: 12px; right: 12px; font-size: 16px; }
#stage.compact .visor-summary { display: none; }   /* te same dane są w panelu stanu pod obrazem; na telefonie byłyby nieczytelne */

/* ---------- panele nad widokiem 3D: przezroczyste tło, tekst w kolorze odwrotnym do obrazu pod panelem ----------
   src/ui/backdrop.js ustawia na panelu data-adapt i płynnie zmieniane --hud-fg (tekst) oraz --hud-halo (text-shadow).
   Wartości zastępcze = dawny wygląd na ciemnym tle. */
#hud { --visor: #f2fcfb; --visor-dim: #cfe3e1; --visor-line: #e6fbfa55; text-shadow: 0 1px 2px #000b, 0 0 10px #0007; }
.visor-summary { background: linear-gradient(118deg, #06222c66, #0c242a40 72%, #09313b30); backdrop-filter: blur(3px); }
.visor-motion { background: linear-gradient(90deg, #08202c55, #08202c00); }
.visor-compass b { background: #0a25211f; }
.visor-warning { background: #351b1580; }
.visor-metric > span, .visor-motion > span { color: var(--visor-dim); }
:is(#rideHud, #habHud, #driveHud)[data-adapt] { background: rgba(8, 6, 5, .45); backdrop-filter: blur(4px); }   /* backdrop.js wlicza to tło */
#caption[data-adapt] { background: rgba(12, 9, 6, .5); backdrop-filter: blur(4px); }   /* tylko nad widokiem 3D; na mapie 2D bez zmian */
#rideHud, #habHud, #driveHud, #caption { transition: background-color .35s; }   /* kolor tekstu łagodzi backdrop.js */

/* kolor tekstu i obwódki z backdrop.js; --visor* liczone w panelu, nie dziedziczone z #hud, więc paski, diody i linie idą za tekstem */
#hud [data-adapt], :is(#rideHud, #habHud, #driveHud, #caption)[data-adapt] {
  --visor: var(--hud-fg, #f2fcfb);
  --visor-dim: color-mix(in srgb, var(--visor) 78%, transparent);
  --visor-line: color-mix(in srgb, var(--visor) 35%, transparent);
  color: var(--visor); text-shadow: var(--hud-halo, 0 1px 2px #000b, 0 0 10px #0007); }
/* alarm / ostrzeżenie: tekst zabarwiony na pomarańczowo / żółto, jasność zostaje z --hud-fg */
#hud[data-tone="danger"] [data-adapt], #hud .visor-warning[data-adapt] { --visor: color-mix(in srgb, var(--hud-fg, #f2fcfb) 55%, #ff9a5a); }
#hud[data-tone="warning"] [data-adapt] { --visor: color-mix(in srgb, var(--hud-fg, #f2fcfb) 55%, #ffd36a); }
@supports (color: oklch(from red l c h)) {
  #hud[data-tone="danger"] [data-adapt], #hud .visor-warning[data-adapt] { --visor: oklch(from var(--hud-fg, #f2fcfb) clamp(.2, l, .92) .14 50); }
  #hud[data-tone="warning"] [data-adapt] { --visor: oklch(from var(--hud-fg, #f2fcfb) clamp(.2, l, .95) .13 92); }
}
#hud .visor-warning[data-adapt] { border-color: var(--visor-line); }
#hud .visor-help[data-adapt] { color: var(--visor); }   /* drobny tekst — bez przygaszenia */
:is(#rideHud, #habHud, #driveHud, #caption)[data-adapt] :is(b, span):not(.n),
:is(#rideHud, #habHud, #driveHud)[data-adapt] :is(#rhLine, #dhLine, #hhStatus, #hhZone, #rhCam) { color: var(--visor); }
:is(#rideHud, #habHud, #driveHud)[data-adapt] :is(.rh-help, .hh-help, .dh-help, .muted) { color: var(--visor-dim); }
:is(#rideHud, #habHud, #driveHud)[data-adapt] :is(.rh-warn, .hh-flash, .warn) { color: color-mix(in srgb, var(--visor) 45%, #ff8a3d); }
#habHud[data-adapt] .hh-prompt { color: color-mix(in srgb, var(--visor) 70%, #2fd0cc); }
#caption[data-adapt] .n { color: color-mix(in srgb, var(--visor) 60%, var(--route, #ffb35c)); }
:is(#rideHud, #driveHud)[data-adapt] .btn { color: var(--visor); border-color: var(--visor-line); }

/* teleport do punktów trasy (klawisze 1–9, 0 — habitat) */
.visor-teleport { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 12px; pointer-events: auto; }
.visor-teleport small { width: 100%; margin: 0 0 1px !important; }
.visor-teleport button { cursor: pointer; font: 600 11px var(--mono); letter-spacing: .04em; padding: 4px 7px; border: 1px solid var(--visor-line, #ffffff40);
  border-radius: 3px; color: var(--visor, inherit); background: #0a252140; text-shadow: inherit; }
.visor-teleport button:hover { border-color: var(--visor, currentColor); background: #34777b66; }
.visor-teleport kbd { font: inherit; opacity: .6; margin-right: 5px; }
.rh-teleport { margin-top: 6px; }
.rh-teleport small { display: none; }
.rh-teleport button { color: inherit; border-color: #ffffff38; background: #ffffff12; }
#rideHud[data-adapt] .rh-teleport button { color: var(--visor); border-color: var(--visor-line); }

/* hełm EV1: panele bez żadnego tła ani rozmycia — sam tekst (z cieniem) na obrazie terenu.
   Specyficzność (#stage.helmet-mode …) wygrywa z regułami wyżej. Kolor tekstu i obwódka — z backdrop.js jak wszędzie. */
#stage.helmet-mode :is(#hud, #rideHud, #habHud, #caption),
#stage.helmet-mode #hud :is(.visor-summary, .visor-motion, .visor-compass b, .visor-warning, .visor-teleport button),
#stage.helmet-mode :is(#rideHud, #habHud, #caption)[data-adapt],
#stage.helmet-mode :is(#rideHud, #habHud) :is(.btn, .rh-teleport button) {
  background: none; backdrop-filter: none; box-shadow: none; }
#stage.helmet-mode #hud .visor-summary::before { box-shadow: none; }
#stage.helmet-mode :is(#rideHud, #habHud, #caption) { text-shadow: var(--hud-halo, 0 1px 2px #000c, 0 0 10px #0008); }
/* hełm EV1: tekst pogrubiony, bez rozmytego cienia; kolor odwrotny do tła + kontur tylko tam, gdzie tło ma jasność tekstu */
#stage.helmet-mode :is(#hud, #rideHud, #habHud, #caption),
#stage.helmet-mode :is(#hud, #rideHud, #habHud, #caption) * { font-weight: 700; text-shadow: none;
  /* ostry kontur w odcieniu przeciwnym do tekstu; backdrop.js włącza go płynnie (--hud-edge), gdy tło pod napisem
     ma jasność zbliżoną do tekstu (np. szary kamień pod częścią napisu); paint-order: kontur pod literą, nie na niej */
  -webkit-text-stroke: max(2px, .2em) var(--hud-edge, transparent); paint-order: stroke fill; }
/* w hełmie tekst zawsze czarny (także przy ostrzeżeniu i alarmie); biały kontur dokłada backdrop.js na ciemnym tle */
#stage.helmet-mode #hud [data-adapt], #stage.helmet-mode :is(#rideHud, #habHud, #caption)[data-adapt] { --visor: var(--hud-fg, #0b0b0b); }
#stage.helmet-mode :is(#hud, #rideHud) kbd { background: none; border-color: var(--visor-line); color: var(--visor); }