/* ═══════════════════════════════════════════════════════════════════════════
   LIGHTCONE · 56 — MIND · PRG · CFG · SÚGÓK · SZERTARTÁSOK  (a vonat, 2026-10-01)
   Felületek: MIND-panel (a nyúlüreg és a parancs-sor a "colony"-é, itt a váz körülöttük),
   PRG-panel 6 füllel, CFG-panel 3 füllel + a faj-magyarázó, a Terepkönyv, a toast,
   a confirm/prompt, a FIRST LIGHT varázsló + jelzőkártya, és a szertartás-fátylak
   (első kontaktus, audiencia, landolás, sír, evakuáció, a vég, az archívum, jégkupola,
   alacsony fogyasztás). Minden érték token; id-ra nem célzunk; !important nincs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A SZERTARTÁS-MÉRET: a kánon a szertartásnak megengedi a saját kijelző-léptéket —
      EGY méret (--fs-ceremony), a glifa és az évszám óriása. Minden más a szertartásban
      is 12 / 10 / 9. [mega-vonat 10-03 UI-12] a token a 00-tokens.css-ben él (28px). */

/* ═══ 1. A PANEL-TÖRZSEK — vízszintes padding, görgetés; a szekció-fejet a law adja ═══ */
.mind-pane-body, .progress-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: var(--pad-y) var(--pad-x) var(--sec-gap);
    display: flex; flex-direction: column; gap: var(--gap);
}
.progress-body { flex: 0 0 auto; overflow: visible; }
.progress-tabs .cmodal-tab, .aside-pane[data-pane="settings"] .cmodal-tabs .cmodal-tab { flex: 1 1 0; }
.cfg-tab-prefs { display: flex; flex-direction: column; }

/* a közös súgó-sor: halvány, a törzs mérete (a tech-foot-hint 51 helyen él) */
.tech-foot-hint { color: var(--text-muted); line-height: var(--lh); letter-spacing: var(--ls-body); margin: 0; }
.tech-running { color: var(--amber); letter-spacing: var(--ls-body); margin: 0; }

/* ═══ 2. MIND — tárcsák, döntés-sorok, szabály-kártyák, napló ═══ */
/* ⟟ RECAP: a panel egyetlen fő-akciója — a --primary gomb, teljes szélesség */
.mind-recap-cta { display: flex; }
.mind-recap-btn {
    /* [mega-vonat 10-03 UI-2] blokk, nem flex: a hosszú felirat ELLIPSZISSEL csonkul (a .btn recept szerint) */
    display: block; flex: 1 1 auto; text-align: center;
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x); min-width: 0;
    font-size: var(--fs-btn); font-weight: 500; letter-spacing: var(--ls-btn); line-height: calc(var(--ctl-h) - 2 * var(--bw));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text-bright); background: var(--g-16);
    border: var(--bw) solid var(--accent); border-radius: var(--r); box-shadow: var(--glow-sm); text-shadow: none;
    cursor: pointer;
}
.mind-recap-btn:hover { background: var(--g-22); }

/* tárcsa-sor: CÍMKE · CSÚSZKA · CÍMKE [· ÉRTÉK] — egy sor, a vezérlő magasságán */
.tech-weight-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, 1.3fr) minmax(0, 1fr); align-items: center;
    gap: var(--gap); min-height: var(--row-h); margin: 0; min-width: 0;
}
.tech-weight-row:has(> .tech-weight-val), .tech-weight-row:has(> .mind-dial-val) { grid-template-columns: minmax(0, 1fr) minmax(64px, 1.3fr) minmax(0, 1fr) auto; }
.tech-weight-row:has(> .tech-weight-val):not(:has(> .tech-weight-label ~ .tech-weight-label)) { grid-template-columns: minmax(0, 1fr) minmax(64px, 1.3fr) auto; }
.tech-weight-label {
    flex: none; min-width: 0; color: var(--text-muted); letter-spacing: var(--ls-body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tech-weight-row > .tech-weight-label:first-child { color: var(--text-bright); }
.tech-weight-row > .tech-weight-label:last-child:not(:first-child) { text-align: right; }
.tech-weight-val, .tech-weight-row > .mind-dial-val { flex: none; min-width: 4ch; text-align: right; color: var(--accent-bright); font-variant-numeric: tabular-nums; }
.tech-weight-row input[type="range"], .mind-dial, .mind-weight-slider, .tech-weight-slider {
    width: 100%; min-width: 0; height: var(--ctl-h); margin: 0; accent-color: var(--accent);
}

/* szegmens-sor (védelmi doktrína, beszámoló-hossz): egyenlő gombok egy sorban */
.mind-posture-row, .tech-bc-row { display: flex; gap: var(--gap); flex-wrap: nowrap; min-width: 0; margin: 0; }
.mind-posture-row > .tech-bc-btn, .tech-bc-row > .tech-bc-btn { flex: 1 1 0; }
/* a .btn recept a tech-bc-btn horogra (a .active a kiválasztott — a JS OLVASSA) */
.tech-bc-btn {
    /* [mega-vonat 10-03 UI-2] inline-block, mint a .btn recept és az 52 horog-listája: ellipszis a hosszú feliraton;
       az align/justify a flex-re váltó felülírásnak marad (54 .ark-card-actions) */
    display: inline-block; vertical-align: middle; text-align: center; align-items: center; justify-content: center; gap: var(--gap-s);
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x); min-width: 0;
    font-size: var(--fs-btn); font-weight: 500; letter-spacing: var(--ls-btn); line-height: calc(var(--ctl-h) - 2 * var(--bw));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--accent); background: var(--g-06);
    border: var(--bw) solid var(--g-30); border-radius: var(--r); box-shadow: none; cursor: pointer;
}
.tech-bc-btn:hover { background: var(--g-12); border-color: var(--surface-edge-strong); color: var(--accent-bright); }
.tech-bc-btn.active { background: var(--g-18); border-color: var(--accent); color: var(--text-bright); box-shadow: none; }
.tech-bc-btn:disabled { opacity: .45; cursor: default; }
.mind-preview-btn { display: block; width: 100%; }   /* [UI-2] blokk, nem flex: teli szélesség + ellipszis */

/* ⌖ előrejelzés-sor: csík + belső padding */
.mind-preview-row {
    display: flex; align-items: baseline; gap: var(--gap); min-width: 0;
    padding: var(--gap-s) var(--pad-x); border-left: 2px solid var(--fromdark-edge); background: var(--g-04);
    color: var(--text-muted);
}
.mind-preview-row + .mind-preview-row { margin-top: var(--gap-s); }
.mind-preview-row--act { color: var(--text-bright); border-left-color: var(--accent); }
.mind-preview-glyph { flex: 0 0 auto; color: var(--accent); }

/* ▤ szabály-kártya: a csík-recept (bal csík, belül padding); bekapcsolva fényes zöld */
.mind-policy {
    display: flex; flex-direction: column; gap: var(--gap); min-width: 0;
    padding: var(--pad-y) var(--pad-x); margin: 0;
    background: var(--g-04); border: 0; border-left: 2px solid var(--g-30); border-radius: 0;
}
.mind-policy + .mind-policy { margin-top: var(--gap); }
.mind-policy.is-on { border-left-color: var(--accent); background: var(--g-06); }
.mind-policy--coming { opacity: .5; }
.mind-policy-title { color: var(--text-bright); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); }
.mind-policy-desc { margin: 0; }
.mind-policy-soon {
    display: inline-flex; align-items: center; height: var(--chip-h); padding: 0 var(--pad-x-s); margin-left: var(--gap-s);   /* [mega-vonat 10-03 UI-15] tokenből */
    font-size: var(--fs-btn); letter-spacing: var(--ls-btn); white-space: nowrap; vertical-align: middle;
    color: var(--text-muted); background: var(--g-06); border: var(--bw) solid var(--g-18); border-radius: var(--r);
}
.mind-policy-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); margin: 0; min-width: 0; }
.mind-policy-plabel { color: var(--text-muted); letter-spacing: var(--ls-body); white-space: nowrap; }
.mind-policy-controls input { width: 6ch; height: var(--ctl-h); }

/* ⚠ válság-sáv a parancsok fölött: a csík-recept, piros */
.mind-crisis-banner {
    padding: var(--pad-y) var(--pad-x); margin: 0;
    color: var(--danger); background: rgba(255, 77, 77, .06);
    border: 0; border-left: 2px solid var(--danger); border-radius: 0;
}

/* ▤ a Mind naplója: év · üzenet — egy sor, egy bejegyzés, vonal közöttük */
.mind-ledger-row {
    display: grid; grid-template-columns: 6ch minmax(0, 1fr); gap: var(--gap); align-items: baseline;
    min-height: var(--row-h); padding: var(--gap-s) var(--pad-x-s); cursor: pointer;
    border-top: var(--bw) solid var(--g-08);
}
.mind-ledger-row:first-child { border-top: 0; }
.mind-ledger-row:hover { background: var(--g-04); }
.mind-ledger-year { color: var(--text-muted); font-variant-numeric: tabular-nums; padding: 0; }
.mind-ledger-msg { color: var(--text-base); min-width: 0; }

/* ═══ 3. PRG — hős-sor, szikra, futó programok, sávok, krónika, a „folyamatban" főkönyve ═══ */
.prg-hero {
    display: flex; align-items: baseline; gap: var(--gap); flex-wrap: wrap; min-width: 0;
    margin: 0; padding: var(--gap-s) 0 var(--gap); border-bottom: var(--bw) solid var(--line);
}
.prg-hero-num { font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-title); color: var(--text-bright); white-space: nowrap; }
.prg-trend { font-size: var(--fs-title); line-height: 1; }
.prg-trend--up { color: var(--accent); }
.prg-trend--down { color: var(--amber); }
.prg-trend--steady { color: var(--text-dim); }
.prg-hero-sub { flex: 1 0 100%; color: var(--text-muted); }
/* a szikra: a JS a clientWidth/clientHeight-ot OLVASSA — a CSS adja (szerződés: 100% × 56) */
.prg-spark { display: block; width: 100%; height: 56px; margin: 0; }
.prg-nodata { margin: 0; color: var(--text-muted); }
.prg-line { margin: 0; color: var(--text-base); letter-spacing: var(--ls-body); min-width: 0; }
.prg-line.muted { color: var(--text-muted); }
/* a szekció-alcím: a .sec-title recept + vonal fölötte */
.prg-line.prg-section-h, summary.prg-section-h {
    display: flex; align-items: center; gap: var(--gap); min-height: var(--row-h); margin: 0; padding: var(--gap-s) 0 0;
    font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); color: var(--text-bright);
    border-top: var(--bw) solid var(--line); flex-wrap: wrap;
}
summary.prg-section-h { cursor: pointer; list-style: none; }
summary.prg-section-h::-webkit-details-marker { display: none; }
summary.prg-section-h::before { content: "▸"; color: var(--accent); width: 10px; flex: 0 0 auto; }
details[open] > summary.prg-section-h::before { content: "▾"; }
.prg-section-h .petition-btn { margin-left: auto; }
.prg-run { display: flex; flex-direction: column; gap: var(--gap-s); margin: 0; }
.prg-tracks { display: flex; flex-direction: column; margin: 0; }
.prg-track {
    display: flex; justify-content: space-between; align-items: center; gap: var(--gap);
    min-height: var(--row-h); border-top: var(--bw) solid var(--g-08); min-width: 0;
}
.prg-track:first-child { border-top: 0; }
.prg-track-label { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.prg-track-pips { color: var(--accent); letter-spacing: var(--ls-head); white-space: nowrap; flex: 0 0 auto; }
/* a K-II mérő: a mérő-recept vastagabb változata, felirat MELLETTE nem rajta */
.prg-kbar { position: relative; height: var(--ctl-h); margin: 0; overflow: hidden; background: var(--g-04); border: var(--bw) solid var(--g-22); border-radius: var(--r); }
.prg-kbar-fill { position: absolute; inset: 0 auto 0 0; background: var(--g-16); border-right: var(--bw) solid var(--accent); }
.prg-kbar-cap { position: absolute; top: 0; bottom: 0; right: var(--pad-x-s); left: var(--pad-x-s); display: flex; align-items: center; justify-content: flex-end; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
/* krónika / létra / vault-sor: év · glifa · név · jobb oldali adat */
.prg-ladder { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; margin: 0; }
.prg-chron-row {
    display: grid; grid-template-columns: 6ch 14px minmax(0, 1fr) auto; align-items: center; gap: var(--gap);
    min-height: var(--row-h); padding: var(--gap-s) var(--pad-x-s); margin: 0;
    border-top: var(--bw) solid var(--g-08); min-width: 0;
}
.prg-chron-row:first-child { border-top: 0; }
.prg-chron-row:not(:has(> .prg-chron-year)) { grid-template-columns: 14px minmax(0, 1fr) auto; }
.prg-chron-row[data-vault-id] { cursor: pointer; }
.prg-chron-row[data-vault-id]:hover { background: var(--g-04); }
.prg-chron-year { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.prg-chron-glyph { color: var(--accent); text-align: center; }
.prg-chron-label { color: var(--text-bright); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-track { color: var(--text-muted); white-space: nowrap; text-align: right; }
.vault-dossier-body { padding: var(--pad-y) var(--pad-x); }

/* ⧗ a folyamatban lévők főkönyve — szűrő-chipek, sorok vonallal (a sáv a law-é) */
.ongoing-ledger { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.ongoing-filters { display: flex; flex-wrap: wrap; gap: var(--gap-s); padding-bottom: var(--gap); border-bottom: var(--bw) solid var(--line); }
.ongoing-chip {
    display: inline-flex; align-items: center; gap: var(--gap-s);
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    font-size: var(--fs-btn); letter-spacing: var(--ls-btn); line-height: 1; white-space: nowrap; text-transform: uppercase;
    color: var(--text-muted); background: var(--g-06); border: var(--bw) solid var(--g-18); border-radius: var(--r); cursor: pointer;
}
.ongoing-chip:hover { color: var(--accent); border-color: var(--surface-edge-strong); }
.ongoing-chip.active { color: var(--text-bright); background: var(--g-16); border-color: var(--accent); }
.ongoing-chip-n { color: var(--amber); font-variant-numeric: tabular-nums; }
.ongoing-list { display: flex; flex-direction: column; min-width: 0; }
.ongoing-row {
    display: flex; flex-direction: column; gap: var(--gap-s); min-width: 0;
    padding: var(--gap) var(--pad-x-s); border-top: var(--bw) solid var(--g-08);
}
.ongoing-row:first-child { border-top: 0; }
.ongoing-row--clickable { cursor: pointer; }
.ongoing-row--clickable:hover { background: var(--g-04); }
.ongoing-row-head { display: flex; align-items: center; gap: var(--gap); min-width: 0; }
.ongoing-glyph { color: var(--accent); flex: 0 0 auto; }
.ongoing-label { flex: 1 1 auto; min-width: 0; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.ongoing-eta { flex: 0 0 auto; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ongoing-detail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-s) var(--gap); color: var(--text-muted); min-width: 0; }
.ongoing-cost { color: var(--amber); }
.ongoing-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }
.ongoing-dot--healthy { background: var(--accent); }
.ongoing-dot--aging { background: var(--amber); }
.ongoing-dot--derelict { background: var(--danger); }
.ongoing-dot--building { background: var(--accent); animation: ongoing-pulse 1.6s ease-in-out infinite; }
@keyframes ongoing-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.ongoing-refurbish {
    display: inline-flex; align-items: center; height: var(--ctl-h); padding: 0 var(--ctl-pad-x); margin-left: auto;
    font-size: var(--fs-btn); letter-spacing: var(--ls-btn); line-height: 1; white-space: nowrap; text-transform: uppercase;
    color: var(--amber); background: rgba(251,191,36,.06); border: var(--bw) solid rgba(251,191,36,.45); border-radius: var(--r); cursor: pointer;
}
.ongoing-refurbish:hover { background: rgba(251,191,36,.12); border-color: var(--amber); }
.ongoing-refurbish:disabled { opacity: .45; cursor: default; }
.ongoing-scan { display: flex; flex-direction: column; gap: var(--gap-s); padding: var(--pad-y) 0; color: var(--text-muted); }
.ongoing-scan-bar { position: relative; height: var(--meter-h); background: var(--g-10); border-radius: var(--r); overflow: hidden; }
.ongoing-scan-bar span { position: absolute; top: 0; bottom: 0; width: 35%; background: var(--g-40); animation: ongoing-scan-sweep 1.6s linear infinite; }
@keyframes ongoing-scan-sweep { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ongoing-dot--building, .ongoing-scan-bar span { animation: none; } }

/* ⚛︎ a kutatás-lista (a házi dosszié research-inline-ja ugyanebből a receptből él) */
.tech-list { display: flex; flex-direction: column; min-width: 0; }
.tech-row { display: flex; flex-direction: column; gap: var(--gap-s); padding: var(--gap) 0; border: 0; border-top: var(--bw) solid var(--g-08); border-radius: 0; min-width: 0; }
.tech-row:first-child { border-top: 0; }
.tech-list > .tech-row:first-child { padding-top: 0; }   /* [mega-vonat 10-03 UI-6] az 52-ből: a .tech-* alap-szabályai itt élnek */
.tech-row-head { display: flex; align-items: center; gap: var(--gap); min-height: var(--row-h); min-width: 0; }
.tech-glyph { color: var(--accent); flex: 0 0 auto; }
.tech-label { flex: 1 1 auto; min-width: 0; color: var(--text-bright); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* [mega-vonat 10-03 UI-6] a .tech-level / --done a chip-recept horog-listáján ül (52 §7: .chip geometria, a --done = .chip--on) —
   az itteni második, ütköző szín-definíció törölve */
.tech-effect { color: var(--accent-bright); margin: 0; }
.tech-blurb { color: var(--text-base); margin: 0; line-height: var(--lh); letter-spacing: var(--ls-body); }
.tech-flatten { color: var(--amber); }
.tech-flatten--done { color: var(--text-muted); }
.tech-sub { color: var(--text-muted); margin: 0; }
.tech-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); margin: 0; }

.tech-broadcast { display: flex; flex-direction: column; gap: var(--gap-s); padding: 0; margin: 0; border: 0; border-radius: 0; background: none; }
.tech-benches { color: var(--text-muted); padding: var(--gap-s) 0; }
.tech-stream { display: flex; flex-direction: column; gap: var(--gap-s); min-width: 0; }
.tech-stream-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.tech-stream-num { color: var(--text-bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tech-stream-bar { height: var(--meter-h); background: var(--g-10); border-radius: var(--r); overflow: hidden; }
.tech-stream-bar > div { height: 100%; background: var(--accent); }
.tech-stream .tech-cancel-btn { align-self: flex-start; }
.tech-lens { display: flex; flex-direction: column; gap: var(--gap); }
.tech-lens p { margin: 0; }
.tech-discoveries { display: flex; flex-direction: column; margin: 0; }
.tech-disc-row {
    display: grid; grid-template-columns: 6ch minmax(0, 1fr) auto; gap: var(--gap); align-items: baseline;
    min-height: var(--row-h); padding: var(--gap-s) 0; border-top: var(--bw) solid var(--g-08);
}
.tech-disc-row:first-child { border-top: 0; }
.tech-disc-row[data-provenance] { cursor: pointer; }
.tech-disc-row[data-provenance]:hover { background: var(--g-04); }
.tech-disc--treasure { color: var(--amber); }
.tech-disc-year { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tech-disc-name { color: var(--accent-bright); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tech-disc-track { color: var(--text-muted); white-space: nowrap; }

/* ═══ 4. CFG — a faj tükre, a fiók, a beállítások ═══ */
/* a faj-név fej: főcím-lépték NÉLKÜL — az alcím-recept, a ceruza ikon-gomb */
.species-name-head { display: flex; align-items: center; gap: var(--gap); min-width: 0; }
.species-name-head .system-rename-btn, .sp-rename-pencil {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--ctl-h);
    width: var(--ctl-h); height: var(--ctl-h); padding: 0; margin-left: auto; font-size: var(--fs-body); line-height: 1;
    color: var(--text-muted); background: var(--g-06); border: var(--bw) solid var(--g-30); border-radius: var(--r); cursor: pointer;
}
.species-head {
    display: flex; align-items: center; gap: var(--gap); min-height: var(--row-h); min-width: 0; margin: 0;
    font-weight: var(--fw-bold); letter-spacing: var(--ls-head); color: var(--text-bright);
}
.species-head .proper-name { color: var(--text-bright); }
.species-info-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--ctl-h);
    width: var(--ctl-h); height: var(--ctl-h); padding: 0; margin-left: auto; font-size: var(--fs-body); line-height: 1;
    color: var(--accent); background: var(--g-06); border: var(--bw) solid var(--g-30); border-radius: var(--r); cursor: pointer;
}
.species-info-btn:hover { color: var(--accent-bright); background: var(--g-12); border-color: var(--surface-edge-strong); }
/* tárcsa-sor: címke · mérő · érték · jel — egy sor */
.species-row {
    display: grid; grid-template-columns: minmax(0, 11em) minmax(40px, 1fr) 4ch 14px; align-items: center; gap: var(--gap);
    min-height: var(--row-h); border-top: var(--bw) solid var(--g-08); min-width: 0;
}
.species-row:first-of-type { border-top: 0; }
.species-row .sp-label { color: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.species-row .sp-meter { display: block; height: var(--meter-h); background: var(--g-10); border: 0; border-radius: var(--r); overflow: hidden; }
.species-row .sp-fill { display: block; height: 100%; background: var(--accent-deep); }
.species-row.sp-strength .sp-fill { background: var(--accent); }
.species-row.sp-weakness .sp-fill { background: var(--g-30); }
.species-row .sp-val { text-align: right; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.species-row .sp-mark { text-align: center; color: var(--text-muted); }
/* a tükör: kulcs–érték sorok (a .kv recept) */
.species-mirror { display: flex; flex-direction: column; margin: 0; padding: var(--gap-s) 0 0; border-top: var(--bw) solid var(--line); }
.mirror-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap); min-height: var(--row-h); padding: 2px 0; min-width: 0; }
.mirror-row + .mirror-row { border-top: var(--bw) solid var(--g-08); }
.mirror-row .mirror-k { flex: 0 0 auto; color: var(--text-muted); white-space: nowrap; }
.mirror-row .mirror-v { min-width: 0; margin-left: auto; color: var(--text-bright); text-align: right; font-variant-numeric: tabular-nums; }
.species-mirror--evo .mirror-row .mirror-k { flex: 0 0 6ch; font-variant-numeric: tabular-nums; }
.species-mirror--evo .mirror-row .mirror-v { text-align: left; margin-left: 0; flex: 1 1 auto; }
.mirror-evo-head, .mirror-branch-head {
    display: flex; align-items: center; min-height: var(--row-h);
    font-weight: var(--fw-bold); letter-spacing: var(--ls-head); color: var(--text-bright);
}
.mirror-branch { display: flex; flex-direction: column; gap: var(--gap-s); }
.mirror-branch + .mirror-branch { margin-top: var(--gap); }
.mirror-branch-line { color: var(--text-base); padding-left: var(--pad-x); border-left: 2px solid var(--g-18); }
/* a faj-magyarázó (detail-modal bérlő): dt = alcím, dd = törzs */
.species-explain dt { font-weight: var(--fw-bold); letter-spacing: var(--ls-head); color: var(--text-bright); padding-top: var(--gap); border-top: var(--bw) solid var(--line); margin-top: var(--gap); }
.species-explain dt:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.species-explain dd { color: var(--text-base); margin: var(--gap-s) 0 0; }
.species-explain dd .sp-inplay { color: var(--text-muted); }
/* a fiók: blokkok vonallal; a veszélyes blokk piros vonal */
.acct-block { display: flex; flex-direction: column; gap: var(--gap); margin: 0; padding: var(--gap) 0; border-top: var(--bw) solid var(--line); }
.acct-block:first-child { border-top: 0; }
.acct-block--danger { border-top-color: rgba(255,77,77,.35); }
.acct-block .tech-foot-hint { margin: 0; }
.acct-danger { color: var(--danger); border-color: rgba(255,77,77,.45); background: rgba(255,77,77,.06); }
.acct-danger:hover { color: var(--danger-bright); border-color: var(--danger); background: rgba(255,77,77,.12); }
.cfg-build-line { color: var(--text-dim); padding: var(--pad-y) var(--pad-x); }

/* ═══ 5. TOAST — a .toast recept; az ok = alap (fényes zöld csík), warn = piros, info = halk ═══ */
.toast-stack {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: var(--z-top);
    display: flex; flex-direction: column; align-items: center; gap: var(--gap);
    width: max-content; max-width: min(480px, 90vw); pointer-events: none;
}
.toast {
    pointer-events: auto; max-width: 100%;
    padding: var(--pad-y) var(--pad-x); line-height: var(--lh); letter-spacing: var(--ls-body);
    text-transform: none;   /* a nagybetűt a showToast() adja (upperKeepGreek — a Bayer-görög marad) */
    text-align: left; color: var(--text-bright);
    background: var(--surface-deck); border: var(--bw) solid var(--g-30); border-left: 2px solid var(--accent); border-radius: var(--r);
    box-shadow: 0 0 0 1px rgba(0,0,0,.6), var(--glow-sm);
    opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;   /* ≤ 400 ms: a JS 400-nál vesz ki */
}
.toast--ok { border-left-color: var(--accent); }
.toast--warn { color: var(--danger-bright); border-color: rgba(255,77,77,.45); border-left-color: var(--danger); }
.toast--info { color: var(--text-base); border-left-color: var(--text-muted); }
.toast--in { opacity: 1; transform: none; }
.toast--out { opacity: 0; transform: translateY(-6px); }

/* ═══ 6. CONFIRM / PROMPT — a keskeny modál-váz: fej (főcím) · törzs · döntés-láb ═══ */
.ui-confirm {
    position: fixed; inset: 0; z-index: var(--z-confirm);
    display: flex; align-items: center; justify-content: center; padding: var(--sec-gap);
    background: var(--modal-veil); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.uic-box {
    display: flex; flex-direction: column; width: var(--modal-w-narrow); max-height: var(--modal-h); padding: 0; overflow: hidden;
    background: var(--surface-deck); border: var(--bw) solid var(--g-22); border-radius: var(--r);
    box-shadow: 0 0 0 1px rgba(0,0,0,.6), var(--glow-md);
}
.uic-box--danger { border-color: rgba(255,77,77,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.6), var(--glow-danger); }
.uic-title {
    display: flex; align-items: center; min-height: var(--head-h); margin: 0; padding: var(--pad-y) var(--pad-x);
    font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-title); color: var(--text-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: var(--g-04); border-bottom: var(--bw) solid var(--line-strong);
}
.uic-box--danger .uic-title { color: var(--danger-bright); }
.uic-body {
    margin: 0; padding: var(--pad-y) var(--pad-x); overflow-y: auto;
    font-size: var(--fs-body); line-height: var(--lh); letter-spacing: var(--ls-body); color: var(--text-base);
    white-space: normal; text-transform: uppercase;
}
.uic-body .uic-p { margin: 0 0 var(--gap-s); }
.uic-body .uic-li { padding-left: var(--pad-x); text-indent: calc(-1 * var(--pad-x-s)); margin: 0 0 var(--gap-s); }
.uic-body .uic-gap { height: var(--gap); }
.uic-typed, .uic-input {
    display: block; width: calc(100% - 2 * var(--pad-x)); margin: 0 var(--pad-x) var(--pad-y); height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    font-size: var(--fs-body); letter-spacing: var(--ls-body); line-height: 1;
    color: var(--text-bright); background: var(--g-04); border: var(--bw) solid var(--g-22); border-radius: var(--r); outline: none;
}
.uic-typed { text-transform: uppercase; }
.uic-typed:focus, .uic-input:focus { border-color: var(--accent); background: var(--g-06); box-shadow: none; }
.uic-box--danger .uic-typed { border-color: rgba(255,77,77,.45); color: var(--danger-bright); }
.uic-box--danger .uic-typed:focus { border-color: var(--danger); }
.uic-actions {
    display: flex; align-items: center; gap: var(--gap); margin: 0; padding: var(--pad-y) var(--pad-x);
    background: var(--g-04); border-top: var(--bw) solid var(--line-strong);
}
/* a .btn recept: a CANCEL a --quiet rang, az OK a --primary, a veszélyes OK a --danger */
.uic-btn {
    display: inline-block; vertical-align: middle; text-align: center; flex: 1 1 0;   /* [mega-vonat 10-03 UI-2] inline-block: ellipszis */
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x); min-width: 0;
    font-size: var(--fs-btn); font-weight: 500; letter-spacing: var(--ls-btn); line-height: calc(var(--ctl-h) - 2 * var(--bw)); text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--accent); background: var(--g-06); border: var(--bw) solid var(--g-30); border-radius: var(--r); box-shadow: none; cursor: pointer;
}
.uic-btn:hover { color: var(--accent-bright); background: var(--g-12); border-color: var(--surface-edge-strong); box-shadow: none; }
.uic-cancel { color: var(--text-muted); background: transparent; border-color: var(--g-14); }
.uic-ok { color: var(--text-bright); background: var(--g-16); border-color: var(--accent); box-shadow: var(--glow-sm); }
.uic-ok:hover { background: var(--g-22); }
.uic-ok--danger, .uic-box--danger .uic-ok--danger { color: var(--danger); background: rgba(255,77,77,.06); border-color: rgba(255,77,77,.45); box-shadow: none; }
.uic-ok--danger:hover { color: var(--danger-bright); background: rgba(255,77,77,.12); border-color: var(--danger); box-shadow: none; }
.uic-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.uic-btn:focus { outline: none; }
.uic-btn:focus-visible { outline: var(--bw) solid var(--accent); outline-offset: 1px; }
.uic-ok--danger:focus-visible { outline-color: var(--danger); }

/* ═══ 7. TEREPKÖNYV — a modál-váz: kártya · bal index · görgető oldal · lapozó-láb ═══ */
.field-guide-modal {
    position: fixed; inset: 0; z-index: var(--z-guide);
    display: flex; align-items: center; justify-content: center; padding: var(--sec-gap);
    background: var(--modal-veil); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.field-guide-modal.hidden { display: none; }
.fg-card {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    width: var(--modal-w); height: var(--modal-h); max-width: 100%; max-height: 100%;
    background: var(--surface-deck); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: var(--bw) solid var(--g-22); border-radius: var(--r);
    box-shadow: 0 0 0 1px rgba(0,0,0,.6), var(--glow-md); color: var(--text-base); overflow: hidden; transform-origin: 50% 50%;
}
/* (mega-vonat ui #22) a × a fej-soron ül (30-shells váz: .fg-head) — az abszolút bezáró kiment */
.fg-layout { display: flex; flex: 1 1 auto; min-height: 0; }
.fg-menu {
    flex: 0 0 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 0;
    padding: var(--pad-y) 0; border-right: var(--bw) solid var(--line); background: var(--g-04);
}
/* [mega-vonat 10-03 UI-7] EGY főcím felületenként (§2.2/§2.5): a váz feje mondja a nevet („⍰ THE FIELD GUIDE") —
   a menü második, más nevű 12 px-es címe nem jelenik meg (a sablon-sor a main.js-ben így halott, törölhető) */
.fg-menu-title { display: none; }
.fg-menu-sub { margin: 0; padding: 0 var(--pad-x) var(--pad-y); color: var(--text-muted); border-bottom: var(--bw) solid var(--line); }
.fg-menu-item {
    display: flex; align-items: center; gap: var(--gap); width: 100%; min-width: 0;
    height: var(--ctl-h); padding: 0 var(--pad-x);
    font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); line-height: 1.2; text-align: left; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text-muted); background: transparent; border: 0; border-top: var(--bw) solid var(--g-08); border-radius: 0; cursor: pointer;
}
.fg-menu-item .fg-mi-glyph { flex: 0 0 14px; text-align: center; font-size: var(--fs-body); color: var(--accent); }
.fg-menu-item:hover { color: var(--accent); background: var(--g-06); }
/* [mega-vonat 10-03 UI-7] az aktív tétel a .row.sel nyelvén: fényes szöveg + zöld csík (a borostyán figyelmet jelent, §2.9) */
.fg-menu-item.is-active { color: var(--text-bright); background: var(--g-10); box-shadow: inset 2px 0 0 var(--accent); border-color: var(--g-08); }
.fg-menu-item.is-active .fg-mi-glyph { color: var(--accent-bright); }
.fg-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fg-page {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: var(--gap); padding: var(--pad-y) var(--pad-x) var(--sec-gap);
}
.fg-eyebrow { margin: 0; padding-right: calc(var(--ctl-h) + var(--gap)); min-height: var(--row-h); display: flex; align-items: center; color: var(--text-muted); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); }
.fg-title {
    margin: 0; padding-bottom: var(--gap); border-bottom: var(--bw) solid var(--line);
    font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); line-height: 1.2; color: var(--text-bright);   /* [mega-vonat 10-03 UI-7] a lap címe alcím (10 bold) — a 12 a váz fejéé */
}
.fg-art { margin: 0; padding: var(--pad-y) var(--pad-x); background: var(--g-04); border: var(--bw) solid var(--g-14); border-radius: var(--r); }
.fg-art svg { width: 100%; height: auto; display: block; }
.fg-prose { font-size: var(--fs-body); line-height: 1.5; color: var(--text-base); display: flex; flex-direction: column; gap: var(--gap); }
.fg-prose p { margin: 0; }
.fg-prose b, .fg-prose strong, .fg-prose .fg-key { color: var(--accent-bright); font-weight: var(--fw-bold); }
.fg-prose ol, .fg-prose ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--gap); }
.fg-prose li { position: relative; padding-left: calc(18px + var(--gap)); line-height: 1.5; }
.fg-prose ol { counter-reset: fg-step; }
.fg-prose ol li::before {
    counter-increment: fg-step; content: counter(fg-step);
    position: absolute; left: 0; top: 0; width: 16px; height: 16px; line-height: 14px; text-align: center;
    border: var(--bw) solid var(--amber); border-radius: var(--r); color: var(--amber); font-size: var(--fs-btn);
}
.fg-prose ul li::before { content: "›"; position: absolute; left: var(--gap-s); top: 0; color: var(--amber); }
.fg-callout {
    margin: 0; padding: var(--pad-y) var(--pad-x);
    font-size: var(--fs-body); line-height: 1.5; color: var(--text-bright);
    background: rgba(251,191,36,.04); border: 0; border-left: 2px solid var(--amber); border-radius: 0;
}
.fg-callout b { color: var(--amber); }
.fg-pager {
    flex: 0 0 auto; display: flex; align-items: center; gap: var(--gap);
    padding: var(--pad-y) var(--pad-x); background: var(--g-04); border-top: var(--bw) solid var(--line-strong);
}
.fg-dots { display: flex; gap: var(--gap-s); }
.fg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--g-22); transition: background .15s; }
.fg-dot.is-active { background: var(--accent); }   /* [UI-7] az aktív lap pontja is zöld */
.fg-pager-spacer { flex: 1 1 auto; }
/* a .btn recept: alap · --quiet (ghost) · --primary (cta) */
.fg-btn {
    display: inline-block; vertical-align: middle; text-align: center;   /* [mega-vonat 10-03 UI-2] inline-block: ellipszis */
    height: var(--ctl-h); min-height: 0; padding: 0 var(--ctl-pad-x); min-width: 0;
    font-size: var(--fs-btn); font-weight: 500; letter-spacing: var(--ls-btn); line-height: calc(var(--ctl-h) - 2 * var(--bw)); text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--accent); background: var(--g-06); border: var(--bw) solid var(--g-30); border-radius: var(--r); box-shadow: none; cursor: pointer;
}
.fg-btn:hover { color: var(--accent-bright); background: var(--g-12); border-color: var(--surface-edge-strong); box-shadow: none; }
.fg-btn:disabled { opacity: .45; cursor: default; }
.fg-btn--ghost { color: var(--text-muted); background: transparent; border-color: transparent; }
.fg-btn--ghost:hover { color: var(--accent); background: var(--g-08); border-color: var(--g-14); }
.fg-btn--cta { color: var(--text-bright); background: var(--g-16); border-color: var(--accent); box-shadow: var(--glow-sm); }
.fg-btn--cta:hover { background: var(--g-22); }
.fg-btn--door { color: var(--amber); background: rgba(251,191,36,.06); border-color: rgba(251,191,36,.45); }
.fg-btn--door:hover { background: rgba(251,191,36,.12); border-color: var(--amber); color: var(--amber); }
/* a Terepkönyv FIRST-LIGHT-listája */










/* a bezárás: a kártya a gombba repül (szerződés: animationend a kártyán, < 520 ms) */
@keyframes fgCollapse {
    from { opacity: 1; transform: translate(0, 0) scale(1); }
    to { opacity: 0; transform: translate(var(--fg-dx, 0), var(--fg-dy, 44vh)) scale(.06); }
}
@keyframes fgBackdropFade { from { opacity: 1; } to { opacity: 0; } }
.field-guide-modal.fg-collapsing { animation: fgBackdropFade .34s ease-in forwards; pointer-events: none; }
.field-guide-modal.fg-collapsing .fg-card { animation: fgCollapse .34s cubic-bezier(.5, 0, .75, 0) forwards; }
@media (prefers-reduced-motion: reduce) {
    .field-guide-modal.fg-collapsing, .field-guide-modal.fg-collapsing .fg-card { animation: none; opacity: 0; }
}

/* ═══ 8. FIRST LIGHT — a varázsló (detail-modal bérlő), a TX-sor és a jelzőkártya ═══ */
.fl-wiz { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.fl-note { color: var(--text-bright); }   /* (mega-vonat ui #11) a padding a 54-fleet receptjéé: a csík és a szöveg közé */
.fl-bar { height: var(--meter-h); margin: 0; background: var(--g-10); border-radius: var(--r); overflow: hidden; }
.fl-bar > i { display: block; height: 100%; background: var(--accent); }
.fl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: var(--bw) solid var(--line); }
.fl-row { border: 0; border-bottom: var(--bw) solid var(--line); border-radius: 0; background: transparent; }
.fl-row.is-open { background: rgba(251,191,36,.04); box-shadow: inset 2px 0 0 var(--amber); }
.fl-row-head {
    display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: var(--gap); width: 100%;
    height: var(--ctl-h); padding: 0 var(--pad-x);
    font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); line-height: 1.2; text-align: left; text-transform: uppercase;
    color: var(--text-base); background: transparent; border: 0; cursor: pointer;
}
.fl-row-head:hover { background: var(--g-04); }
.fl-tick { width: auto; text-align: center; color: var(--text-muted); font-weight: var(--fw-bold); }
.fl-label { min-width: 0; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-state { color: var(--text-dim); font-weight: 400; letter-spacing: var(--ls-body); white-space: nowrap; }
.fl-row.is-done .fl-tick, .fl-row.is-done .fl-state { color: var(--accent-bright); text-shadow: none; }
.fl-row.is-done .fl-label { color: var(--text-muted); }
.fl-row.is-open .fl-label, .fl-row.is-open .fl-tick { color: var(--amber); }
.fl-row-body {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap);
    padding: 0 var(--pad-x) var(--pad-y) calc(var(--pad-x) + 14px + var(--gap));
}
.fl-row-body .tutor-art { margin: 0; align-self: stretch; }
.fl-text { margin: 0; color: var(--text-base); line-height: var(--lh); }
/* a .btn recept; a --primary itt BOROSTYÁN (a kiemelt akció-ige), a --ghost a --quiet */
.fl-btn {
    display: inline-block; vertical-align: middle; text-align: center;   /* [mega-vonat 10-03 UI-2] inline-block: ellipszis */
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x); min-width: 0;
    font-size: var(--fs-btn); font-weight: 500; letter-spacing: var(--ls-btn); line-height: calc(var(--ctl-h) - 2 * var(--bw)); text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--accent); background: var(--g-06); border: var(--bw) solid var(--g-30); border-radius: var(--r); cursor: pointer;
}
.fl-btn:hover { color: var(--accent-bright); background: var(--g-12); border-color: var(--surface-edge-strong); }
.fl-btn--primary { color: var(--amber); background: rgba(251,191,36,.06); border-color: rgba(251,191,36,.45); }
.fl-btn--primary:hover { color: var(--amber); background: rgba(251,191,36,.12); border-color: var(--amber); }
.fl-btn--ghost { color: var(--text-muted); background: transparent; border-color: transparent; }
.fl-btn--ghost:hover { color: var(--accent); background: var(--g-08); border-color: var(--g-14); }
.fl-line { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); min-width: 0; }
.fl-line-txt { min-width: 0; color: var(--amber); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a jelzőkártya: a tip-recept, borostyán csík; fej (alcím) · sor · gombsor */
.fl-signal {
    position: fixed; z-index: var(--z-signal); right: var(--sec-gap); bottom: calc(18px + 44px + var(--gap));
    width: 320px; max-width: calc(100vw - 2 * var(--sec-gap));
    display: flex; flex-direction: column; gap: var(--gap); padding: var(--pad-y) var(--pad-x);
    background: var(--surface-deck); border: var(--bw) solid rgba(251,191,36,.45); border-left: 2px solid var(--amber); border-radius: var(--r);
    box-shadow: 0 0 0 1px rgba(0,0,0,.6), var(--glow-amber); letter-spacing: var(--ls-body);
}
.fl-signal-msg { font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); color: var(--amber); text-shadow: none; }
.fl-signal-sub { margin: 0; color: var(--text-muted); }
.fl-signal-acts { display: flex; gap: var(--gap); margin: 0; padding-top: var(--gap); border-top: var(--bw) solid var(--line); }
.fl-signal-acts > .fl-btn { flex: 1 1 0; }
@keyframes flBtnPulse { 0%, 100% { box-shadow: 0 0 4px var(--accent-glow); } 50% { box-shadow: 0 0 12px var(--accent-glow); } }
.fl-nudge { animation: flBtnPulse 2.2s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .fl-nudge { animation: none; } }

/* ═══ 9. SZERTARTÁSOK — a kánon szerint saját kijelző-lépték (EGY: --fs-ceremony), minden más
      12 / 10 / 9; a gombok a .btn geometriáján (22, 9 px, nagybetű); a fátyol-időzítés szerződés. ═══ */
/* közös szertartás-gomb geometria (a hangulat-szín fátylanként) */
.first-contact-close, .first-contact-goto, .first-contact-share,
.landfall-btn, .grave-btn, .end-veil-btn, .ice-dome-close, .evac-info-toggle {
    display: inline-block; vertical-align: middle; text-align: center;   /* [mega-vonat 10-03 UI-2] inline-block: ellipszis */
    height: var(--ctl-h); min-width: 0; padding: 0 var(--pad-x); margin: 0;
    font-family: inherit; font-size: var(--fs-btn); font-weight: 500; letter-spacing: var(--ls-btn); line-height: calc(var(--ctl-h) - 2 * var(--bw)); text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; text-shadow: none;
    color: var(--accent); background: var(--g-06); border: var(--bw) solid var(--g-30); border-radius: var(--r); box-shadow: none; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.first-contact-close:hover, .first-contact-goto:hover, .first-contact-share:hover,
.end-veil-btn:hover, .evac-info-toggle:hover { color: var(--accent-bright); background: var(--g-12); border-color: var(--surface-edge-strong); box-shadow: none; }

/* ── ELSŐ KONTAKTUS / FELFEDEZÉS-PILLANAT ── */
.first-contact-overlay, .audience-ceremony {
    position: absolute; inset: 0; z-index: var(--z-ceremony);
    display: flex; align-items: center; justify-content: center; padding: var(--sec-gap);
    background: radial-gradient(ellipse at center, rgba(0, 20, 10, .55) 0%, rgba(0, 0, 0, .9) 75%);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    cursor: pointer; animation: fc-fade-in 1.6s ease;
}
.audience-ceremony { overflow-y: auto; }
.first-contact-panel {
    display: flex; flex-direction: column; align-items: center; gap: var(--gap-l);
    width: var(--modal-w-narrow); max-height: 92vh; overflow-y: auto; text-align: center;
    padding: var(--sec-gap) var(--pad-x) var(--pad-x);
    background: var(--surface-deck); border: var(--bw) solid var(--accent); border-radius: var(--r);
    animation: fc-pulse 3s ease-in-out infinite;
}
.first-contact-prefix { margin: 0; color: var(--accent); font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); text-shadow: var(--glow-sm); }
.first-contact-year {
    margin: 0; color: var(--accent-bright); font-size: var(--fs-ceremony); font-weight: 300; line-height: 1;
    letter-spacing: var(--ls-title); font-variant-numeric: tabular-nums; text-shadow: var(--glow-lg);
}
.first-contact-title { margin: 0; color: var(--text-bright); font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-title); }
.first-contact-body { margin: 0; max-width: 60ch; color: var(--text-base); font-size: var(--fs-body); line-height: 1.6; font-style: normal; text-transform: uppercase; }
.audience-ceremony .first-contact-body.dispatch-body { white-space: pre-line; text-align: left; max-width: 72ch; }
.first-contact-guide { align-self: stretch; margin: 0; padding-top: var(--gap); border-top: var(--bw) solid var(--line); color: var(--text-muted); font-size: var(--fs-body); line-height: 1.5; }
.first-contact-guide:empty { display: none; }
.first-contact-shares, .first-contact-controls {
    align-self: stretch; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: var(--gap); margin: 0;
}
.first-contact-shares > *, .first-contact-controls > * { flex: 1 1 0; }
.first-contact-share.hidden, .first-contact-goto.hidden { display: none; }
.first-contact-share[disabled] { opacity: .45; cursor: default; }
.first-contact-close { color: var(--text-bright); background: var(--g-16); border-color: var(--accent); }
.first-contact-hint { margin: 0; color: var(--text-muted); font-size: var(--fs-body); letter-spacing: var(--ls-head); }
/* a kártyás változat: a kép a hős, a szöveg-elemeket a kártya duplikálja → rejtve */
.first-contact-card-frame {
    position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 80vh; margin: 0 auto; overflow: hidden; border-radius: var(--r);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62); animation: fc-card-glow 4.8s ease-in-out infinite;
}
.first-contact-card-frame.hidden { display: none; }
.first-contact-card { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.fc-card-sweep {
    position: absolute; left: 0; right: 0; top: -18%; height: 18%; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(220,255,235,.10) 55%, rgba(255,255,255,.28) 100%);
    animation: fc-card-sweep 5.4s linear infinite;
}
.fc-card-grain {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.first-contact-panel.showing-card {
    width: min(94vw, 580px); padding: 0; gap: var(--gap); align-items: stretch;
    background: transparent; border: 0; box-shadow: none; animation: none;
}
.first-contact-panel.showing-card .first-contact-prefix,
.first-contact-panel.showing-card .first-contact-year,
.first-contact-panel.showing-card .first-contact-title,
.first-contact-panel.showing-card .first-contact-body { display: none; }
.first-contact-panel.showing-card .first-contact-guide { border-top: 0; padding-top: 0; }
@keyframes fc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fc-pulse { 0%, 100% { box-shadow: 0 0 40px var(--g-35); } 50% { box-shadow: 0 0 70px rgba(51,255,102,.6), 0 0 140px rgba(51,255,102,.18); } }
@keyframes fc-card-sweep { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(650%); opacity: 0; } }
@keyframes fc-card-glow { 0%, 100% { box-shadow: 0 0 30px rgba(200,220,210,.07), 0 18px 60px rgba(0,0,0,.6); } 50% { box-shadow: 0 0 46px rgba(200,220,210,.14), 0 18px 60px rgba(0,0,0,.6); } }
@media (prefers-reduced-motion: reduce) {
    .fc-card-sweep { animation: none; opacity: 0; }
    .first-contact-card-frame, .first-contact-panel, .first-contact-overlay, .audience-ceremony { animation: none; }
}

/* ── LANDOLÁS — a hajnal (arany: --gold / --bronze-ruins) ── */
.landfall-veil {
    position: fixed; inset: 0; z-index: var(--z-veil); overflow: hidden;
    display: flex; align-items: center; justify-content: center; padding: var(--sec-gap);
    background: var(--bg-deep); opacity: 0; transition: opacity 1.2s ease;      /* ≤ a JS 1400 ms-e */
}
.landfall-veil.is-lit { opacity: 1; }
.landfall-veil.is-fading { opacity: 0; transition: opacity 1.2s ease; }
.landfall-dawn {
    position: absolute; left: 50%; bottom: -40%; width: 160vmax; height: 160vmax; transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255,211,61,.40) 0%, rgba(216,162,74,.22) 22%, rgba(90,130,105,.10) 42%, rgba(0,0,0,0) 62%);
    opacity: 0; animation: landfall-rise 5s ease-out forwards;
}
.landfall-veil--schism .landfall-dawn, .landfall-veil--resent .landfall-dawn { filter: saturate(.7) brightness(.82); }
@keyframes landfall-rise { 0% { opacity: 0; bottom: -70%; } 100% { opacity: 1; bottom: -40%; } }
.landfall-card, .grave-card {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--gap-l);
    width: min(620px, 94vw); padding: var(--sec-gap) var(--pad-x); text-align: center;
}
.landfall-card { animation: landfall-card-in 4s ease .6s both; }
@keyframes landfall-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.landfall-glyph { margin: 0; font-size: var(--fs-ceremony); line-height: 1; color: var(--gold); text-shadow: var(--glow-gold); }
.landfall-star { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); color: var(--bronze-ruins); }
.landfall-title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-title); line-height: 1.3; color: var(--gold); }
.landfall-veil--schism .landfall-title, .landfall-veil--resent .landfall-title { color: var(--bronze-ruins); }
.landfall-body { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-bright); }
.landfall-stat { margin: 0; font-size: var(--fs-body); color: var(--text-muted); }
.landfall-actions, .grave-actions, .end-veil-actions {
    align-self: stretch; display: flex; justify-content: center; gap: var(--gap); margin: 0;
    padding-top: var(--gap-l); border-top: var(--bw) solid var(--line);
}
.landfall-actions > *, .end-veil-actions > * { flex: 1 1 0; }
.landfall-btn { color: var(--bronze-ruins); background: rgba(216,162,74,.06); border-color: rgba(216,162,74,.45); }
.landfall-btn:hover { color: var(--gold); background: rgba(216,162,74,.14); border-color: var(--bronze-ruins); }
.landfall-btn--go { color: var(--gold); border-color: var(--gold); }
.landfall-foot, .grave-foot { margin: 0; font-size: var(--fs-body); color: var(--text-dim); line-height: 1.5; }

/* ── A SÍR — hideg, hamuszürke (a holt hang tokenjei), felülről hulló árnyék ── */
.grave-veil {
    position: fixed; inset: 0; z-index: var(--z-veil); overflow: hidden;
    display: flex; align-items: center; justify-content: center; padding: var(--sec-gap);
    background: var(--bg-deep); opacity: 0; transition: opacity 1.2s ease;       /* ≤ a JS 1200 ms-e */
}
.grave-veil.is-lit { opacity: 1; }
.grave-veil.is-fading { opacity: 0; transition: opacity 1.1s ease; }
.grave-dark {
    position: absolute; left: 50%; top: -45%; width: 170vmax; height: 170vmax; transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(150,70,62,.16) 0%, rgba(90,80,78,.10) 28%, rgba(30,30,32,.04) 46%, rgba(0,0,0,0) 62%);
    opacity: 0; animation: grave-fall 6s ease-out forwards;
}
@keyframes grave-fall { 0% { opacity: 0; top: -70%; } 100% { opacity: 1; top: -45%; } }
.grave-card { animation: grave-card-in 3.4s ease .5s both; }
@keyframes grave-card-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
.grave-glyph { margin: 0; font-size: var(--fs-ceremony); line-height: 1; color: var(--danger); opacity: .7; }
.grave-star { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); color: var(--fromdark-bright); }
.grave-body { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--fromdark-text); }
.grave-btn { color: var(--fromdark-text); background: transparent; border-color: var(--fromdark-edge); }
.grave-btn:hover { color: var(--fromdark-bright); background: rgba(138,160,180,.08); border-color: var(--fromdark-accent); }

/* ── A VÉG — fekete; a szöveg is alig ── */
.end-veil {
    position: fixed; inset: 0; z-index: var(--z-reader);
    display: flex; align-items: center; justify-content: center; padding: var(--sec-gap);
    background: var(--bg-deep); animation: end-veil-fall 6s ease-out;
}
@keyframes end-veil-fall { 0% { background: rgba(0,0,0,0); } 60% { background: rgba(0,0,0,.85); } 100% { background: #000; } }
.end-veil-card {
    display: flex; flex-direction: column; align-items: center; gap: var(--gap-l);
    width: min(620px, 94vw); padding: var(--sec-gap) var(--pad-x); text-align: center;
    background: transparent; border: var(--bw) solid rgba(255,77,77,.18); border-radius: var(--r);
    animation: end-veil-card-in 5s ease-out;
}
@keyframes end-veil-card-in { 0%, 45% { opacity: 0; } 100% { opacity: 1; } }
.end-veil-glyph { margin: 0; font-size: var(--fs-ceremony); line-height: 1; color: var(--danger); opacity: .5; }
.end-veil-title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-title); color: var(--danger); opacity: .8; text-shadow: none; }
.end-veil-body { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--fromdark-text); }
.end-veil-body.muted-line { color: var(--text-muted); font-size: var(--fs-body); }
.end-veil-actions { flex-wrap: wrap; }
.end-veil-btn--primary { flex: 1 0 100%; display: block; width: 100%;   /* [UI-2] blokk, nem flex: ellipszis */ color: var(--text-bright); background: var(--g-16); border-color: var(--accent); box-shadow: var(--glow-sm); }
.end-veil-btn--primary:hover { background: var(--g-22); }
.end-veil-foot { margin: 0; color: var(--text-muted); font-size: var(--fs-body); }

/* ── A HOLTAK ARCHÍVUMA — a holt hang (szürkéskék), soronként egy bejegyzés ── */
.archive-reader { position: fixed; inset: 0; z-index: var(--z-reader-top); background: var(--bg-deep); overflow: hidden; }
/* [mega-vonat 10-03 UI-18] az olvasó két gombja (SAVE · CLOSE): egy sor a jobb felső sarokban, token-térközzel (volt: két inline position:fixed px-ekkel) */
.archive-reader-ctl { position: fixed; top: var(--sec-gap); right: var(--sec-gap); display: flex; align-items: center; gap: var(--gap); }
.archive-scroll { height: 100%; overflow-y: auto; max-width: 780px; margin: 0 auto; padding: var(--sec-gap) var(--pad-x) 120px; }
.archive-head { display: flex; flex-direction: column; align-items: center; gap: var(--gap); padding-bottom: var(--sec-gap); text-align: center; border-bottom: var(--bw) solid var(--fromdark-edge); }
.archive-title { font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-title); color: var(--fromdark-bright); text-shadow: none; }
.archive-sub { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--fromdark-accent); }
.archive-era { margin: var(--sec-gap) 0 var(--gap); text-align: center; font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); color: var(--fromdark-accent); }
.archive-era::before, .archive-era::after { content: " ─── "; color: var(--fromdark-edge); }
.archive-row {
    display: grid; grid-template-columns: 7ch minmax(0, 1fr); gap: var(--gap); align-items: baseline;
    min-height: var(--row-h); padding: var(--gap-s) var(--pad-x-s); font-size: var(--fs-body); line-height: 1.5;
    border-bottom: var(--bw) solid rgba(74, 90, 106, .4);
}
.archive-year { color: var(--fromdark-accent); text-align: right; font-variant-numeric: tabular-nums; }
.archive-msg { color: var(--fromdark-text); min-width: 0; }
.archive-row--ambient { opacity: .55; }
.archive-coda { margin: var(--sec-gap) 0; text-align: center; font-size: var(--fs-body); line-height: 1.6; color: var(--fromdark-accent); }

/* ── EVAKUÁCIÓ — a cím a szertartás-óriás, a pálya vékony, az infó-modál a keskeny váz ── */
.evacuation-overlay {
    position: fixed; inset: 0; z-index: var(--z-reader);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-l);
    padding: var(--sec-gap); text-align: center;
    background: rgba(2, 6, 3, .93); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.evacuation-overlay .evac-title {
    font-size: var(--fs-ceremony); font-weight: 300; line-height: 1; letter-spacing: var(--ls-title);
    color: var(--amber); text-shadow: var(--glow-amber); animation: evac-title-pulse 3.2s ease-in-out infinite;
}
@keyframes evac-title-pulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

.evacuation-overlay .evac-cause {
    display: inline-flex; align-items: center; height: var(--ctl-h); margin: 0; padding: 0 var(--pad-x);
    font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-head);
    border: var(--bw) solid currentColor; border-radius: var(--r);
}
.evacuation-overlay .evac-cause-mid { color: var(--amber); }
.evacuation-overlay .evac-cause-bad { color: var(--danger); }
.evacuation-overlay .evac-what { max-width: 60ch; margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-base); }
.evacuation-overlay .evac-sub { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-title); color: var(--text-bright); }
.evacuation-overlay .evac-note { max-width: 62ch; margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-muted); }

.evacuation-overlay .evac-track { display: flex; align-items: center; gap: var(--gap-l); width: 82%; max-width: 1100px; margin: var(--sec-gap) auto 0; }
.evacuation-overlay .evac-track-end { flex: 0 0 auto; font-size: var(--fs-title); color: var(--text-muted); }
.evacuation-overlay .evac-track-line { position: relative; flex: 1 1 auto; height: var(--meter-h); background: var(--g-12); border-radius: var(--r); overflow: visible; }
.evacuation-overlay .evac-track-fill { position: absolute; inset: 0 auto 0 0; height: 100%; background: linear-gradient(90deg, var(--g-22), rgba(51,255,102,.7)); border-radius: var(--r); }
.evacuation-overlay .evac-track-pod {
    position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    font-size: var(--fs-title); color: var(--text-bright); text-shadow: var(--glow); animation: evac-pod-pulse 2.4s ease-in-out infinite;
}
.evacuation-overlay .evac-track-pod::before {
    content: ""; position: absolute; right: 50%; top: 50%; transform: translateY(-50%); width: 46px; height: var(--meter-h); border-radius: var(--r);
    background: linear-gradient(90deg, transparent, rgba(51,255,102,.55)); animation: evac-trail 2.4s ease-in-out infinite;
}
.evacuation-overlay .evac-track-line::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--g-28), transparent); animation: evac-lightwave 4.5s linear infinite;
}
@keyframes evac-pod-pulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes evac-lightwave { 0% { left: -70px; } 100% { left: 100%; } }
@keyframes evac-trail { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
.evacuation-overlay .evac-track-legend { display: flex; justify-content: space-between; align-items: baseline; width: 82%; max-width: 1100px; margin: 0 auto; font-size: var(--fs-body); color: var(--text-dim); }
.evacuation-overlay .evac-track-legend .evac-track-pod-name { color: var(--accent-bright); }
.evacuation-overlay .evac-track-label { margin: 0 auto; font-size: var(--fs-body); color: var(--text-dim); }
.evacuation-overlay .evac-info-toggle { margin: 0; }
.evac-info-good { color: var(--accent-bright); }
.evac-info-mid { color: var(--amber); }
.evac-info-bad { color: var(--danger); }
.evac-info-old { color: var(--terra); }
.evac-info-modal {
    position: fixed; inset: 0; z-index: var(--z-evac);
    display: none; align-items: center; justify-content: center; padding: var(--sec-gap);
    background: var(--modal-veil); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.evac-info-modal.is-open { display: flex; }
.evac-info-modal .evac-modal-panel {
    position: relative; display: flex; flex-direction: column; gap: 0; width: var(--modal-w-narrow); max-height: 82vh; overflow: hidden;
    padding: 0; text-align: left;
    background: var(--surface-deck); border: var(--bw) solid var(--g-22); border-radius: var(--r); box-shadow: 0 0 0 1px rgba(0,0,0,.6), var(--glow-md);
}
/* (mega-vonat ui #22) a fej-sor a 30-shells vázáé (.evac-modal-head); a bezáró a fejben */
.evac-info-modal .evac-modal-sub { margin: 0; padding: var(--pad-y) var(--pad-x); border-bottom: var(--bw) solid var(--line-strong); color: var(--text-muted); }
.evac-info-modal .evac-modal-body { display: flex; flex-direction: column; gap: var(--gap); padding: var(--pad-y) var(--pad-x) var(--sec-gap); overflow-y: auto; min-height: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-base); }
.evac-info-modal .evac-modal-body p { margin: 0; }
.evac-info-modal .evac-modal-rule { padding-top: var(--gap); border-top: var(--bw) solid var(--line); }

@media (prefers-reduced-motion: reduce) {
    .evacuation-overlay .evac-title, .evacuation-overlay .evac-track-pod, .evacuation-overlay .evac-track-pod::before { animation: none; }
    .evacuation-overlay .evac-track-line::after { animation: none; opacity: 0; }
}

/* ── JÉGKUPOLA — a vászon a teljes fátyol; a felirat alul, középen ── */
.ice-dome-veil { position: fixed; inset: 0; z-index: var(--z-veil); overflow: hidden; background: var(--bg-deep); opacity: 0; transition: opacity .45s ease; }
.ice-dome-veil.is-lit { opacity: 1; }
.ice-dome-veil.is-fading { opacity: 0; transition: opacity .45s ease; }   /* ≤ a JS 500 ms-e */
.ice-dome-canvas { position: absolute; inset: 0; max-width: none; }
.ice-dome-caption {
    position: absolute; left: 0; right: 0; bottom: 6%; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: var(--gap-l); padding: 0 var(--pad-x); text-align: center;
}
.ice-dome-title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-title); color: var(--text-bright); }
.ice-dome-text { max-width: 60ch; margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-muted); }
.ice-dome-close { color: var(--info); background: rgba(77,212,255,.06); border-color: rgba(77,212,255,.35); }
.ice-dome-close:hover { background: rgba(77,212,255,.12); border-color: var(--info); }

/* ── ALACSONY FOGYASZTÁS — a felfüggesztett térkép helyén egy nyugodt sor ── */
.low-power-veil {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: var(--z-chrome-veil);   /* [mega-vonat 10-03 UI-17] token (5) */
    display: flex; flex-direction: column; align-items: center; gap: var(--gap); padding: var(--pad-y) var(--pad-x);
    font-size: var(--fs-body); letter-spacing: var(--ls-head); color: var(--text-muted); text-align: center; pointer-events: none;
}
.low-power-veil .lp-hint { letter-spacing: var(--ls-body); color: var(--text-dim); }

/* ═══ 10. MOBIL — [mega-vonat 10-03 UI-6] a blokk a 90-mobile.css-be költözött (a mobil-réteg EGY fájl):
       a toast / első kontaktus / jelzőkártya html.is-mobile szabályai ott eleve éltek (és nyertek), a Terepkönyv
       ≤768-as @media blokkja a „forrás: 56" szakaszba került. ═══ */

/* ── remainder 2026-10-02 ── (remB: ⓘ infó-ablak, adat-lista, tutor-ábra, állapot-sávok, közeg-próza, vándor-tábla, apró közösek) */

/* ⓘ INFÓ-ABLAK: keskeny modál — fátyol → kártya → fej (főcím 12 + × ikon-gomb) → görgető törzs; szekciók vonallal */
.info-popover {
    position: fixed; inset: 0; z-index: var(--z-info);   /* a legacy rétege: minden modál és állapot-sáv fölött */
    display: flex; align-items: center; justify-content: center; padding: var(--sec-gap);
    background: var(--modal-veil); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.info-popover-content {
    display: flex; flex-direction: column; width: var(--modal-w-narrow); max-height: var(--modal-h); min-width: 0; overflow: hidden;
    background: var(--surface-deck); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); isolation: isolate;
    border: var(--bw) solid var(--g-22); border-radius: var(--r); box-shadow: 0 0 0 1px rgba(0,0,0,.6), var(--glow-md);
}
.info-popover-header {
    flex: none; display: flex; align-items: center; gap: var(--gap); min-height: var(--head-h); padding: var(--pad-y) var(--pad-x);
    background: var(--g-04); border-bottom: var(--bw) solid var(--line-strong);
}
.info-popover-header h3 {
    flex: 1 1 auto; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--ls-title); line-height: 1.2; color: var(--text-bright);
}
.info-popover-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--pad-y) var(--pad-x); font-size: var(--fs-body); line-height: var(--lh); color: var(--text-base); }
.info-popover-body .info-section { padding: var(--pad-y) 0 var(--sec-gap); border-bottom: var(--bw) solid var(--line); }
.info-popover-body .info-section + .info-section { padding-top: var(--sec-gap); }
.info-popover-body .info-section:last-child { border-bottom: 0; padding-bottom: var(--pad-y); }
.info-popover-body .info-section h4 { margin: 0 0 var(--gap); font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); color: var(--text-bright); }
.info-popover-body p { margin: 0 0 var(--gap); }
.info-popover-body p:last-child { margin-bottom: 0; }
.info-popover-body pre { margin: var(--gap) 0; padding: var(--pad-y) var(--pad-x); overflow-x: auto; white-space: pre-wrap; font-size: var(--fs-body); color: var(--accent-bright); background: var(--bg-base); border: var(--bw) solid var(--g-14); border-radius: var(--r); }
.info-popover-body code { padding: 0 var(--gap-s); font-size: var(--fs-body); color: var(--accent-bright); background: var(--g-12); border-radius: var(--r); }
/* adat-lista (a vándor-világ lapja): kulcs halványan balra, érték fényesen jobbra; a hosszú érték egész sort kap */
.info-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap-s) var(--gap-l); margin: var(--sec-gap) 0; font-size: var(--fs-body); letter-spacing: var(--ls-body); line-height: var(--lh); }
.info-fields dt { color: var(--text-muted); }
.info-fields dd { margin: 0; color: var(--accent-bright); text-align: right; font-variant-numeric: tabular-nums; }
.info-fields dd.dd-long { grid-column: 1 / -1; text-align: left; }

/* ⚑︎ TUTOR-ÁBRA (FIRST LIGHT / flotta-sorok): keretes doboz, benne a sematikus SVG. Az SVG-szöveg a törzs-betű. */
.tutor-art { margin-bottom: var(--sec-gap); padding: var(--pad-y) var(--pad-x-s); background: var(--g-04); border: var(--bw) solid var(--g-18); border-radius: var(--r); }
.tutor-art-svg { display: block; width: 100%; height: auto; max-height: 190px; }
.tutor-art-svg .ta-dim { fill: var(--g-28); }
.tutor-art-svg .ta-accent { fill: var(--accent); }
.tutor-art-svg .ta-accent-fill { fill: rgba(51,255,102,.65); }
.tutor-art-svg .ta-accent-line { stroke: var(--accent); stroke-width: 1.4; filter: drop-shadow(0 0 3px var(--accent-glow)); }
.tutor-art-svg .ta-amber { fill: var(--amber); }
.tutor-art-svg .ta-amber-stroke { fill: rgba(251,191,36,.12); stroke: var(--amber); stroke-width: 1.2; }
.tutor-art-svg .ta-dim-stroke { fill: var(--g-04); stroke: var(--g-30); stroke-width: 1.1; }
.tutor-art-svg .ta-dash { fill: none; stroke: rgba(51,255,102,.55); stroke-width: 1.3; stroke-dasharray: 5 6; }
.tutor-art-svg .ta-ring { stroke: var(--g-40); }
.tutor-art-svg .ta-glow { filter: drop-shadow(0 0 4px var(--accent-glow)); }
.tutor-art-svg .ta-label { font-family: inherit; font-size: var(--fs-body); letter-spacing: var(--ls-body); fill: var(--text-base); }
.tutor-art-svg .ta-label-amber { fill: var(--amber); }
.tutor-art-svg .ta-dim-label { font-size: var(--fs-body); letter-spacing: var(--ls-body); fill: var(--text-muted); }
.tutor-art-svg .ta-glyph { font-size: var(--fs-title); fill: var(--accent); }
.tutor-art-svg .ta-pulse { animation: tutorPulse 1.8s ease-in-out infinite; }
@keyframes tutorPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tutor-art-svg .ta-pulse { animation: none; } }

/* ── ÁLLAPOT-SÁVOK a térkép fölött (☄︎ becsapódó, ✵ látogató, ⚖︎ követ, ⚑︎ átkelés, ⟳ javítás).
   EGY recept: mély felület, színes keret, a csík (border-left) és a szöveg közt padding; egy sor, nem törik.
   A felső sávok (☄︎ ✵ ⚱︎ ⚖︎ + az ▣ esemény-sáv) a .banner-stack verembe kerülnek (main.js bannerStack()),
   ott statikusak, és a TÉNYLEGES magasságukkal sorakoznak; a ⚑︎ átkelés és a ⟳ javítás lent ül, a vermen kívül. */
.impactor-banner, .visitor-banner, .audience-banner, .nomad-banner, .patch-banner {
    position: fixed; left: 50%; transform: translateX(-50%);
    display: block; max-width: min(92vw, 860px); min-width: 0;
    height: calc(var(--ctl-h) + 2 * var(--gap-s)); padding: var(--gap-s) var(--pad-x);
    font-size: var(--fs-body); letter-spacing: var(--ls-body); line-height: var(--ctl-h); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--accent); background: var(--surface-deck); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: var(--bw) solid var(--g-35); border-left-width: 2px; border-radius: var(--r); box-shadow: var(--glow-sm);
    cursor: pointer;
}
.impactor-banner { top: 44px; z-index: calc(var(--z-toast) + 51); color: var(--danger); border-color: rgba(255,77,77,.45); border-left-color: var(--danger); box-shadow: var(--glow-danger); animation: impactor-pulse 2.4s ease-in-out infinite; }
.impactor-banner:hover { background: var(--surface-2); border-color: var(--danger); }
.impactor-banner .imp-hint, .visitor-banner .vis-hint, .audience-banner .aud-hint { color: var(--text-muted); }
.impactor-banner .imp-min-btn {
    display: inline-block; vertical-align: middle; margin-left: var(--gap);
    width: var(--ctl-h); height: var(--ctl-h); padding: 0; line-height: calc(var(--ctl-h) - 2 * var(--bw));
    font-size: var(--fs-body); color: inherit; background: transparent; border: var(--bw) solid currentColor; border-radius: var(--r); cursor: pointer;
}
.impactor-banner.imp-enroute-banner { color: var(--accent); border-color: var(--g-35); border-left-color: var(--accent); box-shadow: var(--glow-sm); animation: none; cursor: default; }
.impactor-banner.imp-enroute-banner:hover { border-color: var(--accent); }
/* ▁ a minimalizált sarok-chip: jobb felső sarok, a tartalmáig nő */
.impactor-banner.imp-min { left: auto; right: 76px; transform: none; width: auto; min-width: 0; max-width: none; cursor: pointer; }
@keyframes impactor-pulse { 0%, 100% { box-shadow: 0 0 6px rgba(255,77,77,.22); } 50% { box-shadow: 0 0 14px rgba(255,77,77,.45); } }
.visitor-banner { top: 44px; z-index: calc(var(--z-toast) + 50); color: var(--amber); border-color: rgba(251,191,36,.45); border-left-color: var(--amber); box-shadow: var(--glow-amber); }
.visitor-banner:hover { background: var(--surface-2); border-color: var(--amber); }
.visitor-banner.visitor-banner--inert { cursor: default; }
.visitor-banner.visitor-banner--inert:hover { background: var(--surface-deck); border-color: rgba(251,191,36,.45); border-left-color: var(--amber); }
.visitor-banner--flash { animation: visitor-flash .8s ease-in-out 3; }
@keyframes visitor-flash { 0%, 100% { box-shadow: var(--glow-amber); } 50% { box-shadow: 0 0 0 2px var(--accent), var(--glow-lg); } }
.audience-banner { top: 44px; z-index: calc(var(--z-toast) + 48); max-width: min(92vw, 760px); color: var(--accent-bright); border-color: var(--g-35); border-left-color: var(--accent); cursor: default; }
.audience-banner .aud-act {
    display: inline-block; vertical-align: middle; margin-left: var(--gap);
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x); line-height: calc(var(--ctl-h) - 2 * var(--bw));
    font-size: var(--fs-btn); letter-spacing: var(--ls-btn); white-space: nowrap;
    color: var(--accent-bright); background: var(--g-06); border: var(--bw) solid var(--g-30); border-radius: var(--r); cursor: pointer;
}
.audience-banner .aud-act:hover { background: var(--g-14); border-color: var(--accent); }
.audience-banner .aud-act--away { color: var(--text-muted); background: transparent; border-color: var(--g-14); }
.audience-banner .aud-act:disabled { opacity: .45; cursor: default; }
.audience-banner .aud-hint { margin-left: var(--gap); }
/* ⚑︎ ÁTKELÉS: a sáv lent ül (a hajó-sáv fölött); kattra kerek sarok-jellé zsugorodik */
.nomad-banner { top: auto; bottom: 58px; z-index: var(--z-overlay); color: var(--amber); border-color: rgba(251,191,36,.4); border-left-color: var(--amber); box-shadow: var(--glow-amber); }
.nomad-banner .nomad-lost { color: var(--danger); }
/* ▤ A FELSŐ SÁV-VEREM (2026-10-02): egy fix oszlop az első sáv helyén (top 44, középen); a sorrend
   a vész-rang: ☄︎ becsapódó → ✵ látogató → ⚱︎ bárka → ⚖︎ követ → ▣ esemény. Átlátszó a kattra,
   csak a sávok fognak. NINCS rajta transform/filter — a minimalizált ☄︎ chip így a nézethez fix. */
.banner-stack {
    position: fixed; top: 44px; left: 0; right: 0; z-index: calc(var(--z-toast) + 51);
    display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
}
.banner-stack > * { pointer-events: auto; max-width: 100%; box-sizing: border-box; }
/* a verem a TÉRKÉP fölött áll, nem a jobb panel fölött (2026-10-02, labor: a nyitott panel fejét takarta) */
@media (min-width: 769px) {
    body:has(.app.panel-collapsed) .banner-stack { right: 64px; }
    body:has(.app:not(.panel-collapsed)) .banner-stack { right: calc(64px + clamp(360px, 35vw, 680px)); }
}
.banner-stack > :is(.impactor-banner, .visitor-banner, .ark-banner, .audience-banner, .event-banner) {
    position: static; top: auto; left: auto; transform: none; z-index: auto; flex: none;
}
.banner-stack > .impactor-banner { order: 1; }
.banner-stack > .visitor-banner { order: 2; }
.banner-stack > .ark-banner { order: 3; }
.banner-stack > .audience-banner { order: 4; }
.banner-stack > .event-banner { order: 5; }
/* ▁ a minimalizált ☄︎ chip kilép a veremből: jobb felső sarok, mint eddig */
.banner-stack > .impactor-banner.imp-min { position: fixed; top: 44px; right: 76px; left: auto; }
/* a nyitott ⇝ CMD-lista (top 60, z 13) a kérésre nyílik: a verem alá bukik, nem takarja (régen az ▣ z 12 volt) */
body:has(.cmd-panel:not(.hidden)) .banner-stack { z-index: var(--z-chrome-bar); }   /* [mega-vonat 10-03 UI-17] token (12) */
.nomad-banner-shrink { display: inline-block; white-space: nowrap; }
.nomad-banner.collapsed { width: auto; max-width: none; padding: var(--gap-s) var(--pad-x-s); font-size: var(--fs-title); letter-spacing: 0; }
.nomad-banner.collapsed .nomad-banner-text { display: none; }
/* ⟳ JAVÍTÁS ÉRKEZETT: gomb-sáv lent középen */
.patch-banner { top: auto; bottom: var(--sec-gap); z-index: var(--z-evac); font-family: inherit; font-size: var(--fs-btn); letter-spacing: var(--ls-btn); color: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.patch-banner:hover { background: var(--g-12); color: var(--accent-bright); }
@media (prefers-reduced-motion: reduce) { .impactor-banner, .visitor-banner--flash { animation: none; } }

/* ⚱︎ a bárka ébredés-lüktetése — a 54-fleet `.ark-wake` használja (a keyframe a legacy-ből ide költözött) */

/* ✉︎ KÖZEG-PRÓZA: az idegen üzenet a csatornája hangján (fény / vegyi / EM / mechanikai) — a betű a törzs, a mozgás a jelentés */
.prose--medium-photic { color: var(--text-bright); text-shadow: var(--glow); animation: photic-breathe 3.4s ease-in-out infinite; }
@keyframes photic-breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.prose--medium-chemical { font-style: italic; letter-spacing: var(--ls-title); opacity: .92; animation: chemical-linger 6s ease-out 1; }
@keyframes chemical-linger { 0% { opacity: .35; letter-spacing: calc(var(--ls-head) * 2); } 100% { opacity: .92; letter-spacing: var(--ls-title); } }
.prose--medium-EM { font-variant-ligatures: none; animation: em-jitter .9s steps(2) infinite; }
@keyframes em-jitter { 0%, 100% { opacity: .94; } 50% { opacity: .88; } }
.prose--medium-mechanical { font-weight: var(--fw-bold); letter-spacing: var(--ls-head); opacity: .9; }
@media (prefers-reduced-motion: reduce) { .prose--medium-photic, .prose--medium-chemical, .prose--medium-EM { animation: none; } }

/* ⋆ CSILLAGKÉP-VÁNDOROK tábla (küldetés-csarnok): vonal fölötte, soronként helyezés · otthon · szám */
.walker-board { margin-top: var(--sec-gap); padding-top: var(--pad-y); border-top: var(--bw) solid var(--line); }
.walker-row { display: grid; grid-template-columns: calc(var(--row-h) + var(--gap-s)) minmax(0, 1fr) auto; align-items: center; gap: var(--gap); min-height: var(--row-h); padding: var(--gap-s) 0; font-size: var(--fs-body); }
.walker-row + .walker-row { border-top: var(--bw) solid var(--g-08); }
.walker-row.is-you { color: var(--amber); }
.walker-rank, .walker-n { font-variant-numeric: tabular-nums; }
.walker-rank { color: var(--text-dim); }
/* ✦ az ereklye hatása (a kincs-lapon): arany csík, a csík és a szöveg közt padding */
.prov-effect { margin: var(--gap-s) 0 var(--sec-gap); padding: var(--pad-y) var(--pad-x); font-size: var(--fs-body); line-height: var(--lh); letter-spacing: var(--ls-body); color: var(--gold-prime); background: rgba(246,196,83,.06); border-left: 2px solid var(--gold-prime); }
/* apró közösek: a pásztázó-sor (PRG betöltő), a veszély-szöveg, a kattintható szerep */
.scan-line { line-height: var(--lh); }
.scan-line::before { content: "▸ "; color: var(--accent-bright); }
.scan-line.scan-complete { color: var(--accent-bright); }
.danger-text { color: var(--danger); }
[role="button"], .prg-chron-row[data-vault-id] { cursor: pointer; }