/* COREWARD — true-scale space simulator
Copyright (c) 2026 SANSOFT — Bancsó Péter e.v. All rights reserved. See LICENSE. */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; }
body { font-family: "Consolas","SF Mono",ui-monospace,monospace; color:#8fe6ff; }
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; }
/* A `hidden` ATTRIBUTUM TENYLEG REJTSEN.
A bongeszo sajat szabalya (`[hidden] { display:none }`) csak egy
attributumvalaszto — barmelyik sajat szabalyunk, ami `display`-t ad es
azonositoval vagy osztallyal kezdodik, eroskodesben legyozi. Ezert allt
ott tovabbra is a `#hud-jump` (`display:inline-flex`), a `#minepad`
(`display:flex`) es a READ gomb (`.tbtn`), miutan a kod `hidden = true`-ra
allitotta oket: a JS elrejtette, a stiluslap visszatette. Harom kulon
hibanak latszott, egy oka volt. */
[hidden] { display:none !important; }
#hud { position:fixed; inset:0; pointer-events:none; font-size:12px; letter-spacing:.06em; }
#hud.hidden { display:none; }
.panel { position:absolute; padding:10px 12px; background:rgba(4,14,24,.42);
border:1px solid rgba(80,190,255,.22); border-radius:3px;
backdrop-filter:blur(3px); min-width:190px; }
#hud-tl { top:16px; left:16px; }
/* (7.49) kulso nezetben a MODE/SPEED lap helyett az allapot: test, pajzs, sebesseg */
#kulso-allapot { display:none; top:16px; left:16px; min-width:210px; }
body.view-ship #hud-tl { display:none; }
body.view-ship #kulso-allapot { display:block; }
body.view-ship #elet-ki { display:none !important; } /* (a test es a pajzs mar az allapotlapon) */
.ka-sor { display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.12em; line-height:1.9; }
.ka-sor .k { flex:0 0 58px; color:var(--hud-key,#7d7250); }
.ka-sor i { flex:1 1 auto; height:5px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14); border-radius:2px; overflow:hidden; }
.ka-sor i u { display:block; height:100%; width:0; text-decoration:none; }
.ka-sor b { flex:0 0 auto; min-width:64px; text-align:right; font-weight:600; }
.ka-hull i u { background:#ff9a3c; } .ka-hull b { color:#ff9a3c; }
.ka-pajzs i u { background:#4fb8ff; } .ka-pajzs b { color:#4fb8ff; }
.ka-seb i u { background:#f2e6a8; } .ka-seb b { color:#f2e6a8; }
.ka-seb.ftl i u { background:#d69cff; } .ka-seb.ftl b { color:#d69cff; }
.ka-seb.rev i u { background:#b3261e; } .ka-seb.rev b { color:#e0473c; }
/* (7.49) a visszatoltes fankja a celkereszt korul */
#tolto-fank { position:fixed; left:var(--view-cx,50%); top:var(--view-cy,50%); width:48px; height:48px; margin:-24px 0 0 -24px; pointer-events:none; display:none; z-index:20; }
#tolto-fank.on { display:block; }
#tolto-fank svg { width:100%; height:100%; transform:rotate(-90deg); }
#tolto-fank circle { fill:none; stroke-width:1.6; }
#tolto-fank circle.h { stroke:rgba(143,230,255,.14); }
#tolto-fank circle.e { stroke:#8fe6ff; stroke-dasharray:131.95; stroke-dashoffset:0; opacity:.75; }
/* (8.78) a lokator visszatoltese a jeladokereso helyen (main: lokatorFankLep) */
#lokator-fank { position:fixed; left:var(--view-cx,50%); top:var(--view-cy,50%); width:58px; height:58px; margin:-29px 0 0 -29px; pointer-events:none; display:none; z-index:20; }
#lokator-fank.on { display:block; opacity:.5; } /* (8.79: a felhasznalo kerte, fel atlatszo) */
#lokator-fank svg { width:100%; height:100%; transform:rotate(-90deg); }
#lokator-fank circle { fill:none; stroke-width:2; }
#lokator-fank circle.h { stroke:rgba(77,255,122,.16); }
#lokator-fank circle.e { stroke:#4dff7a; stroke-dasharray:131.95; stroke-dashoffset:0; }
/* (9.50) a rele javitasa az arboc csucsanal (main: releFank) */
#rele-fank { position:fixed; left:var(--view-cx,50%); top:var(--view-cy,50%); width:66px; height:66px; margin:-33px 0 0 -33px; pointer-events:none; display:none; z-index:20; }
#rele-fank.on { display:block; opacity:.75; }
#rele-fank svg { width:100%; height:100%; transform:rotate(-90deg); }
#rele-fank circle { fill:none; stroke-width:2; }
#rele-fank circle.h { stroke:rgba(255,176,64,.18); }
#rele-fank circle.e { stroke:#ffb040; stroke-dasharray:131.95; stroke-dashoffset:131.95; }
/* A JOBB FELSO LAP (helyzet, ido) KULSO NEZETBEN NINCS TOBBE: a fulke
muszerei mondjak ugyanezt, kivulrol nem kell; a helyen a radio arca all */
#hud-tr { display:none; }
#hud-bl { bottom:16px; left:16px; }
/* A gomb a sarokban all (lasd #hud-jump), ezert a billentyusor feljebb
kerult — HUD-nezetben egymasra csusznanak. */
#hud-br { bottom:44px; right:16px; text-align:right; min-width:0; }
.row { display:flex; justify-content:space-between; gap:18px; line-height:1.65; white-space:nowrap; }
#hud-tr .row { justify-content:flex-end; }
/* A HUD betűszíne EGY változóból megy, hogy a beállításokban átszínezhető
legyen. Alap: halvány sárga — a műszerfalak klasszikus színe, és sötét
háttéren kevésbé fárasztó, mint a hideg kék. */
.k { color:var(--hud-key,#7d7250); font-size:10px; }
.v { color:var(--hud-color,#f2e6a8); font-weight:600; }
.keys { color:#4d7f9b; font-size:10px; line-height:1.7; }
.keys b { color:#8fe6ff; font-weight:600; }
/* AZ UT ALLAPOTA A KEP KOZEPEN. Ugras kozben a celjelzo helyen egy vekony
sav all, mellette a szazalek es a hatralevo ut. Nem utmutatas — allapot:
egy hatvan masodperces uton ez az egyetlen dolog, amitol nem varakozas
lesz belole, hanem utazas. Erintokepernyon is latszik. */
#target-hint.utban { display:flex; align-items:center; justify-content:center;
gap:10px; white-space:nowrap; }
/* KOCKAKBOL, A HUD SAJAT SZINEVEL. Ugyanaz a `blockBar`, amit a muszerek
hasznalnak (lasd ui/SevenSeg.js): a `.sg-blk` a `currentColor`-bol dolgozik,
tehat elég a szint megadni, es a beallitasokban atszinezett HUD-dal egyutt
ez is atszinezodik. */
.th-sav { display:inline-block; color:var(--hud-color,#f2e6a8);
vertical-align:middle; }
.th-sav .sg-bar { gap:2px; }
.th-sav .sg-blk { width:7px; height:7px; }
.th-szam { font-variant-numeric:tabular-nums;
color:var(--hud-color,#f2e6a8); opacity:.9; }
/* UT KOZBEN EGY ARNYALATTAL SOTETEBB, MINT A TOBBI MUSZER.
A kep KOZEPEN all, ott, ahova a jatekos amugy is nez — ha ugyanolyan
fenyes, mint a muszerfal, akkor elvonja a figyelmet arrol, ami miatt az
ember odanez: a celrol. Egy arnyalattal lejjebb veve ott marad, olvashato,
de nem kiabal.
A `brightness` a HUD SAJAT szinebol dolgozik, tehat barmilyen szinre allitja
at a jatekos, a viszony ugyanaz marad — egy beegetett sotetebb szin csak az
alapertelmezessel nezne ki jol. */
#target-hint.utban { filter:brightness(.82); }
/* A NEV IS a HUD szinet veszi fel. Alapban vilagosabb (`#fff0cc`), mert ott
figyelemfelhivas a dolga; ut kozben viszont a savval es a szazalekkal EGY
dolgot alkot, es annak egy szine van. */
#target-hint.utban b { color:var(--hud-color,#f2e6a8); }
/* A TELI NEGYZET BELSEJE MEG EGY KICSIVEL LEJJEBB. Huszonnegy kockabol
tizenkilenc vilagit egy ut vegen — egymas mellett ez a legnagyobb osszefuggo
feny a kepernyo kozepen. A keret es a szoveg marad, ahol van; csak a kitoltes
halkul, es ettol a sav olvashato marad anelkul, hogy ragyogna. */
#target-hint.utban .th-sav .sg-blk.on { filter:brightness(.86); }
/* AZ UGRAS GOMBJA a HUD jobb also sarkaban. Ugyanaz a szedes, mint a
billentyu-soroke alatta — egy muszerfalon a gomb sem lehet mas betu, mint a
felirat —, csak keretet kap, mert ezt MEG lehet nyomni. A `#hud` egesze
`pointer-events:none`, tehat ezt kulon vissza kell adni. */
#hud-jump { position:fixed; right:16px; bottom:14px; z-index:40;
display:inline-flex; align-items:baseline; gap:7px;
margin:0; padding:5px 10px;
font:inherit; font-size:10px; letter-spacing:.06em;
color:#4d7f9b; background:rgba(8,24,36,.55);
border:1px solid rgba(143,230,255,.28); border-radius:3px;
cursor:pointer; pointer-events:auto; }
#hud-jump:hover { border-color:rgba(143,230,255,.7);
background:rgba(20,52,74,.65); }
#hud-jump b { color:#8fe6ff; font-weight:600; }
/* A CEL NEVE a gombon. Enelkul a gomb csak annyit mond, hogy lehet ugrani —
nem azt, hogy HOVA, es akkor a jatekosnak megis a kep kozepere kell
neznie. Hosszu nevnel elvagjuk: a sarok nem gumibol van. */
#hud-jump .hj-cel { color:var(--hud-color,#f2e6a8); font-weight:600;
max-width:16ch; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; }
.throttle { margin-top:8px; height:4px; background:rgba(80,190,255,.14); border-radius:2px; overflow:hidden; }
.throttle-fill { height:100%; width:0%; background:linear-gradient(90deg,#1f7fa8,#6fe0ff); transition:width .06s linear; }
.ftl .throttle-fill { background:linear-gradient(90deg,#7a3fd0,#e56bff); }
/* FTL-ben a sebesség lilára vált — más üzemmód, más szín. */
.ftl .v { color:var(--ftl-color,#c98bff); }
#reticle { position:fixed; left:var(--view-cx,50%); top:var(--view-cy,50%); width:34px; height:34px; margin:-17px 0 0 -17px;
pointer-events:none; opacity:.5; }
#reticle::before,#reticle::after { content:""; position:absolute; background:#8fe6ff; }
#reticle::before { left:50%; top:0; width:1px; height:9px; margin-left:-.5px; box-shadow:0 25px 0 #8fe6ff; }
#reticle::after { top:50%; left:0; height:1px; width:9px; margin-top:-.5px; box-shadow:25px 0 0 #8fe6ff; }
/* (7.68) HARCBAN a fegyvercsalad sajat celkeresztje all az alap helyen */
body.hc-on #reticle { display:none; }
#harc-cel { position:fixed; left:var(--view-cx,50%); top:var(--view-cy,50%); width:0; height:0; pointer-events:none; z-index:29; }
#harc-cel svg { position:absolute; left:-30px; top:-30px; width:60px; height:60px; overflow:visible;
fill:none; stroke:var(--hc-szin,#8fe6ff); stroke-width:2.2; opacity:.62; }
#harc-cel svg circle[r="1.4"], #harc-cel svg circle[r="1.6"], #harc-cel svg circle[r="1.8"], #harc-cel svg circle[r="2"], #harc-cel svg circle[r="2.4"] { fill:var(--hc-szin,#8fe6ff); }
#harc-cel.cel svg { opacity:1; filter:drop-shadow(0 0 4px var(--hc-szin,#8fe6ff)); }
/* a flak: nagy negyzet, vekony el, csak a negy sarok */
#harc-cel.hc-flak_cannon i { position:absolute; width:calc(var(--hc-m,80px) * .32); height:calc(var(--hc-m,80px) * .32);
border:0 solid var(--hc-szin,#ff8a3a); opacity:.6; }
#harc-cel.hc-flak_cannon i:nth-child(1) { left:calc(var(--hc-m,80px) * -1); top:calc(var(--hc-m,80px) * -1); border-left-width:1.5px; border-top-width:1.5px; }
#harc-cel.hc-flak_cannon i:nth-child(2) { right:calc(var(--hc-m,80px) * -1); top:calc(var(--hc-m,80px) * -1); border-right-width:1.5px; border-top-width:1.5px; }
#harc-cel.hc-flak_cannon i:nth-child(3) { left:calc(var(--hc-m,80px) * -1); bottom:calc(var(--hc-m,80px) * -1); border-left-width:1.5px; border-bottom-width:1.5px; }
#harc-cel.hc-flak_cannon i:nth-child(4) { right:calc(var(--hc-m,80px) * -1); bottom:calc(var(--hc-m,80px) * -1); border-right-width:1.5px; border-bottom-width:1.5px; }
#harc-cel.hc-flak_cannon.cel i { opacity:1; filter:drop-shadow(0 0 4px var(--hc-szin,#ff8a3a)); }
/* --- belépőképernyő -------------------------------------------------------
Bal oldalon a szöveg, jobb oldalon a teljes kép. A kép `cover`, tehát mindig
kitölti a fél képernyőt torzulás nélkül; keskeny kijelzőn a szöveg alá kerül,
mert egymás mellett egyik sem kapna elég helyet. */
/* A nyitóképernyő a keresősáv (12) és a veszélyjelzés (30) FÖLÖTT van, de a
beállítás, a verziótörténet és a halálképernyő alatt — azokat a nyitóképernyőn
állva is látni kell. */
#splash { position:fixed; inset:0; z-index:40; cursor:pointer;
/* FELEZVE. Az 56% akkor szuletett, amikor a bal oldalon egy egesz
prospektus allt; a menuvel a kep kapja a masik felet, es a
valaszto ott van, ahol a szem keresi: kozepen. */
display:grid; grid-template-columns:minmax(440px,50%) 1fr;
background:#03080f; transition:opacity 1.8s ease-in-out; }
#splash.gone { opacity:0; pointer-events:none; }
/* BAL FELUL, ROGZITVE. Fuggolegesen kozepre igazitva a menu az ablak
magassagaval egyutt vandorol: mas gepen mashol van, atmeretezeskor
elcsuszik a kez alol. Egy menu helye nem fugghet attol, mekkora az ablak —
ott van, ahol az olvasas kezdodik. A padding fix keppontban all, nem
vh/vw-ben, ugyanezert. */
.splash-text { display:flex; flex-direction:column; justify-content:flex-start;
align-items:flex-start; gap:22px; padding:38px 40px;
max-width:820px; }
/* Betoltes kozben a rejtett elemek is helyet foglalnak; ne csinaljanak
gorgetosavot semmibol. */
#splash.tolt .splash-text { overflow:hidden; }
.splash-brand h1 { font-size:clamp(34px,4.6vw,58px); letter-spacing:.30em;
font-weight:200; color:#cdf3ff; margin:0;
text-shadow:0 0 34px rgba(90,200,255,.45); }
.sub { color:#4d7f9b; font-size:12px; letter-spacing:.18em; margin-top:8px; }
.splash-lead { margin:0; font-size:14px; line-height:1.75; color:#a9cadd;
letter-spacing:.02em; }
.splash-points { margin:0; padding:0; list-style:none;
display:flex; flex-direction:column; gap:9px; }
.splash-points li { position:relative; padding-left:20px; font-size:12.5px;
color:#7fa6bd; letter-spacing:.03em; }
.splash-points li::before { content:''; position:absolute; left:0; top:7px;
width:6px; height:6px; border-radius:50%;
background:#3f9fc9; box-shadow:0 0 8px #3f9fc9; }
.splash-points b { color:#cdf3ff; font-weight:600; }
.splash-cta { display:flex; flex-direction:column; gap:7px; }
.splash-go { font-size:13px; font-weight:600; letter-spacing:.22em; color:#8fe6ff;
text-shadow:0 0 18px rgba(90,200,255,.5); }
.splash-note { font-size:11px; letter-spacing:.08em; color:#456f88; }
.splash-foot { display:flex; gap:16px; align-items:baseline; flex-wrap:nowrap;
white-space:nowrap;
font-size:11px; letter-spacing:.1em; color:#2f6480;
border-top:1px solid rgba(80,160,200,.16); padding-top:14px; }
#app-version { color:#5a8faa; white-space:nowrap; }
/* Sajat sor, fenntartott magassaggal: a szoveg hossza valtozik, a lablec
magassaga ne valtozzon vele. */
#loadstate { display:block; color:#2f6480; font-size:11px; letter-spacing:.1em;
margin-top:9px; min-height:1.5em; line-height:1.5; }
.splash-art { background:#03080f url('../img/login.jpg') center/cover no-repeat; }
/* Lágy átmenet a kép és a szöveg között, hogy ne éles vágás legyen a kettő közt. */
.splash-art::after { content:''; display:block; width:100%; height:100%;
background:linear-gradient(90deg,#03080f 0%,rgba(3,8,15,.55) 12%,
rgba(3,8,15,0) 34%); }
@media (max-width:860px) {
#splash { grid-template-columns:1fr; grid-template-rows:1fr 34vh; }
.splash-text { padding:5vh 7vw; gap:18px; max-width:none; }
.splash-art::after { background:linear-gradient(180deg,#03080f 0%,rgba(3,8,15,0) 42%); }
}
/* (8.35) a celkereszt alatt: ami epp a raktarba ment („+0.4t HE3") */
#begyujt { position:fixed; left:var(--view-cx,50%); top:calc(var(--view-cy,50%) + 24px); transform:translateX(-50%);
pointer-events:none; font-size:12px; letter-spacing:.08em; color:#9dffb8; opacity:0;
text-shadow:0 0 8px rgba(0,0,0,.95); white-space:nowrap; z-index:6; }
#begyujt.on { animation:begyujt 2.4s ease-out forwards; }
@keyframes begyujt { 0% { opacity:0; transform:translate(-50%,5px); } 8% { opacity:1; transform:translate(-50%,0); }
70% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-6px); } }
#mousehint { position:fixed; left:var(--view-cx,50%); top:calc(var(--view-cy,50%) + 40px); transform:translateX(-50%);
pointer-events:none; font-size:11px; letter-spacing:.08em; color:#ffcf70;
text-shadow:0 0 10px rgba(0,0,0,.9); white-space:nowrap; }
/* --- navigációs panel ---------------------------------------------------- */
#nav { position:fixed; left:50%; bottom:var(--nav-bottom,18px); transform:translateX(-50%);
display:flex; flex-direction:column; align-items:center; gap:6px;
font-family:inherit; z-index:12; }
/* A fülke képe a 8-as rétegen ül; a keresőmezőnek fölötte kell lennie,
különben fülke módban egyszerűen eltűnik a műszerfal mögött. */
/* Egérzár alatt nincs kurzor, tehát kattintani sem lehet — ilyenkor a panel
halvány és átengedi az eseményeket a vászonnak. */
#nav.locked { opacity:.30; pointer-events:none; }
/* Fülke módban az egérzár alatt egyáltalán nincs ott: a műszerfal képébe
belelógó, félig áttetsző panel csak zavarna. SPACE-re előjön. */
#nav.in-cockpit.locked { opacity:0; }
#nav.locked #nav-lockhint { opacity:1; }
#nav-lockhint { font-size:10px; letter-spacing:.12em; color:#ffcf70; opacity:0; transition:opacity .2s; }
.nav-row { display:flex; gap:8px; align-items:stretch; }
/* (9.29) a mezo elott: az F3 gomb jele, egy kis negyzetben (kattintva is a mezobe visz) */
.nav-key { flex:0 0 auto; align-self:center; font-size:10px; font-weight:600; letter-spacing:.04em; line-height:1; padding:5px 5px; border:1px solid rgba(143,224,255,.5); border-radius:3px; color:#8fe0ff; background:rgba(20,50,72,.45); cursor:pointer; user-select:none; }
.nav-key:hover { color:#fff; border-color:rgba(190,240,255,.85); }
.nav-field { position:relative; }
/* SZELESEBB MEZO, SZELESEBB LISTA. A masodik nevekkel egy sor konnyen
ketsorosra torik — „51 Pegasi b (Dimidium · Bellerophon)" —, es egy
talalati lista attol lista, hogy egy talalat egy sor. */
#nav-input { width:440px; padding:9px 12px; font:inherit; font-size:12px; letter-spacing:.05em;
color:#cdf3ff; background:rgba(4,14,24,.82);
border:1px solid rgba(80,190,255,.32); border-radius:3px; outline:none; }
#nav-input::placeholder { color:#3c7c9c; }
#nav-input:focus { border-color:rgba(120,220,255,.7); box-shadow:0 0 0 2px rgba(80,190,255,.13); }
/* AZ UGROGOMB.
A felirat elfogyott: a „JUMP DRIVE · 10 s" ket dolgot mondott — mit csinal
es mennyi ideig —, es mindketto ott van mashol is (a HUD kiirja az utat, a
billentyulista az ENTER-t). Ami marad, az a GOMB maga: egy negyzet, kek
keretben, fekete uveggel, benne a siklo felulnezetbol, jobbra dontve.
Ugyanaz a nyelv, mint a fulke uveglapjai — es az ENTER tovabbra is ugrik. */
#nav-go { width:38px; height:38px; padding:0; flex:0 0 auto; cursor:pointer;
display:flex; align-items:center; justify-content:center;
color:#8fe0ff; border:1px solid rgba(80,190,255,.55); border-radius:3px;
background:
radial-gradient(120% 90% at 50% 0%, rgba(80,190,255,.16), transparent 70%),
linear-gradient(180deg, rgba(6,18,30,.95), rgba(2,8,14,.98));
box-shadow:inset 0 1px 0 rgba(150,220,255,.18); }
#nav-go svg { width:20px; height:20px; display:block;
transform:rotate(45deg); filter:drop-shadow(0 0 4px rgba(90,200,255,.55)); }
#nav-go:hover { border-color:rgba(150,225,255,.9); color:#d6f4ff; }
#nav-go:disabled { border-color:rgba(80,190,255,.18); color:#2e6480;
cursor:default; box-shadow:none; }
#nav-go:disabled svg { filter:none; opacity:.5; }
#nav-list { position:absolute; left:0; right:0; bottom:calc(100% + 5px);
background:rgba(4,14,24,.95); border:1px solid rgba(80,190,255,.28);
border-radius:3px; overflow:hidden; display:none; }
#nav-list.open { display:block; }
.nav-item { padding:7px 12px; font-size:12px; color:#b8f0ff; cursor:pointer;
display:flex; justify-content:space-between; gap:14px;
/* Egy talalat EGY SOR. Ami nem fer ki, harom pontban vegzodik —
a nev eleje amugy is tobbet mond, mint a vege. */
white-space:nowrap; }
.nav-item > span:first-child { overflow:hidden; text-overflow:ellipsis; }
.nav-item .kind { flex:0 0 auto; }
.nav-item:hover, .nav-item.sel { background:rgba(80,190,255,.16); }
.nav-item .kind { color:#3c7c9c; font-size:10px; letter-spacing:.08em; }
/* (9.33) a tavolsag a sor vegen, jobbra igazitva: zold ha most elerheto, piros ha nem */
.nav-item .tav { flex:0 0 auto; min-width:64px; text-align:right; font-size:11px; letter-spacing:.04em; }
.nav-item .kind { margin-left:auto; }
.tav.ok, .cat-tav.ok { color:#6fdc8c; }
.tav.ki, .cat-tav.ki { color:#ff6b5b; }
.cat-head .cat-tav, .cat-row .cat-tav { font-style:normal; text-align:right; white-space:nowrap; font-size:11px; }
#nav-status { font-size:11px; letter-spacing:.06em; color:#8fe6ff; min-height:14px; }
#nav-status.err { color:#ff8a8a; }
#nav-stop { padding:9px 16px; font:inherit; font-size:11px; font-weight:700; letter-spacing:.12em;
color:#2a0808; background:linear-gradient(180deg,#ff9a9a,#e05454);
border:none; border-radius:3px; cursor:pointer; }
#nav-stop:hover { background:linear-gradient(180deg,#ffb4b4,#ef6a6a); }
#nav-const, #nav-audio { padding:9px 14px; font:inherit; font-size:11px; font-weight:600; letter-spacing:.1em;
color:#8fe6ff; background:rgba(4,14,24,.82);
border:1px solid rgba(80,190,255,.32); border-radius:3px; cursor:pointer; }
#nav-const:hover, #nav-audio:hover { border-color:rgba(120,220,255,.7); }
#nav-const.active, #nav-audio.active { color:#04101c; background:linear-gradient(180deg,#7fdcff,#38a8d8); border-color:transparent; }
/* --- object labels + targeting ------------------------------------------- */
#labels { position:fixed; inset:0; pointer-events:none; z-index:4; }
.lbl { position:absolute; left:0; top:0; will-change:transform; }
.lbl-dot { position:absolute; left:-3px; top:-3px; width:6px; height:6px;
border:1px solid rgba(140,220,255,.85); border-radius:50%; }
.lbl-line { position:absolute; left:2px; top:-2px; width:30px; height:1px;
background:rgba(140,220,255,.5); transform-origin:left center;
transform:rotate(-38deg); }
.lbl-text { position:absolute; left:26px; top:-30px; white-space:nowrap;
font-size:10px; letter-spacing:.07em; line-height:1.25;
text-shadow:0 0 6px rgba(0,0,0,.95); }
.lbl-text b { display:block; color:#b8f0ff; font-weight:600; }
.lbl-text em { display:block; color:#4d7f9b; font-style:normal; font-size:9px; }
/* (8.31) a ko tartalma a celpont tavolsaga alatt, egymas alatt */
.lbl-tart { display:block; text-decoration:none; margin-top:2px; }
.lbl-tart:empty { display:none; }
.lbl-tart i { display:block; font-style:normal; font-size:9px; opacity:.9; }
.lbl.is-target .lbl-dot { width:12px; height:12px; left:-6px; top:-6px;
border-color:#ffcf70; border-width:1px; }
.lbl.is-target .lbl-line { background:rgba(255,207,112,.75); }
.lbl.is-target .lbl-text b { color:#ffcf70; font-size:11px; }
.lbl.is-target .lbl-text em { color:#c79a48; }
/* (8.27) A QUEST CELJAI: a fo quest narancs, a mellek kek, a legkozelebbi
aszteroidamezo szurke - a cimke mindig kint van, a kepen kivul pedig a
kepernyo szelen egy korvonalas nyil (belul fekete) mutatja az iranyat */
.lbl.q-fo .lbl-dot { border-color:#ff9a3c; }
.lbl.q-fo .lbl-line { background:rgba(255,154,60,.8); }
.lbl.q-fo .lbl-text b { color:#ff9a3c; }
.lbl.q-fo .lbl-text em { color:#c8762c; }
.lbl.q-mellek .lbl-dot { border-color:#6cc4ff; }
.lbl.q-mellek .lbl-line { background:rgba(108,196,255,.8); }
.lbl.q-mellek .lbl-text b { color:#6cc4ff; }
.lbl.q-mellek .lbl-text em { color:#3f88b8; }
.lbl.q-mezo .lbl-dot { border-color:#b4bcc4; }
.lbl.q-mezo .lbl-line { background:rgba(180,188,196,.7); }
.lbl.q-mezo .lbl-text b { color:#c4ccd4; }
.lbl.q-mezo .lbl-text em { color:#7a838c; }
.cel-nyilak { position:fixed; inset:0; pointer-events:none; z-index:9; } /* (8.43: a muszerfal folott) */
.cn { position:absolute; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px; display:none; }
.cn svg { display:block; overflow:visible; }
.cn path { fill:#000; fill-opacity:.82; stroke-width:2; stroke-linejoin:round; }
.cn.fo path { stroke:#ff9a3c; }
.cn.fo { filter:drop-shadow(0 0 4px rgba(255,154,60,.75)); }
.cn.mellek path { stroke:#6cc4ff; }
.cn.mellek { filter:drop-shadow(0 0 4px rgba(108,196,255,.75)); }
.cn.mezo path { stroke:#b4bcc4; }
.cn.mezo { filter:drop-shadow(0 0 3px rgba(180,188,196,.6)); }
.nav-item.q-fo > span:first-child { color:#ff9a3c; }
.nav-item.q-mellek > span:first-child { color:#6cc4ff; }
.nav-item.q-mezo > span:first-child { color:#c4ccd4; }
/* (9.40) a tobbugrasos ut kovetkezo allomasa: lila */
.lbl.q-ut .lbl-dot { border-color:#c08cff; }
.lbl.q-ut .lbl-line { background:rgba(192,140,255,.8); }
.lbl.q-ut .lbl-text b { color:#c08cff; }
.lbl.q-ut .lbl-text em { color:#8a5fc0; }
.cn.ut path { stroke:#c08cff; }
.cn.ut { filter:drop-shadow(0 0 4px rgba(192,140,255,.75)); }
.nav-item.q-ut > span:first-child { color:#c08cff; }
/* (8.12) A RADIO JELE a cimken: aki most ad, annak a neve folott (((o))) */
.lbl-radio { display:none; position:absolute; left:-6px; top:-21px; line-height:0; }
.lbl.radio .lbl-radio { display:block; }
.lbl-radio svg { fill:none; stroke:#8fffc8; stroke-width:1.4; stroke-linecap:round; filter:drop-shadow(0 0 3px rgba(120,255,190,.6)); }
.lbl-radio circle { fill:#8fffc8; stroke:none; }
.lbl-radio path { animation:lbl-radio 1.2s linear infinite; }
.lbl-radio path.i1 { animation-delay:.2s; }
.lbl-radio path.i2 { animation-delay:.4s; }
@keyframes lbl-radio { 0% { opacity:.15; } 30% { opacity:1; } 100% { opacity:.15; } }
#nav-labels { padding:9px 14px; font:inherit; font-size:11px; font-weight:600;
letter-spacing:.1em; color:#8fe6ff; background:rgba(4,14,24,.82);
border:1px solid rgba(80,190,255,.32); border-radius:3px; cursor:pointer; }
#nav-labels:hover { border-color:rgba(120,220,255,.7); }
#nav-labels.active { color:#04101c; background:linear-gradient(180deg,#7fdcff,#38a8d8);
border-color:transparent; }
#target-hint { position:fixed; left:var(--view-cx,50%); top:calc(var(--view-cy,50%) + 62px); transform:translateX(-50%);
pointer-events:none; font-size:11px; letter-spacing:.09em; color:#ffcf70;
text-shadow:0 0 8px rgba(0,0,0,.95); white-space:nowrap; z-index:5; }
#target-hint b { color:#fff0cc; font-weight:600; }
/* --- target info panel (dark glass, right of the crosshair) --------------- */
#info-panel { position:fixed; left:calc(50% + 46px); top:50%; transform:translateY(-50%);
display:none; min-width:212px; max-width:290px; padding:12px 14px;
background:rgba(6,16,26,.62); border:1px solid rgba(120,200,255,.22);
border-radius:4px; backdrop-filter:blur(9px) saturate(140%);
-webkit-backdrop-filter:blur(9px) saturate(140%);
box-shadow:0 6px 26px rgba(0,0,0,.55); pointer-events:none; z-index:6; }
#info-panel.show { display:block; }
#info-panel h4 { font-size:13px; font-weight:600; letter-spacing:.05em; color:#d8f4ff;
margin-bottom:2px; }
#info-panel .kind { font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
color:#5d97b8; margin-bottom:9px; }
#info-panel .r { display:flex; justify-content:space-between; gap:16px; line-height:1.75;
font-size:11px; white-space:nowrap; }
#info-panel .r span:first-child { color:#5d97b8; }
#info-panel .r span:last-child { color:#cdeeff; font-weight:600; }
#info-panel .note { margin-top:9px; padding-top:8px; border-top:1px solid rgba(120,200,255,.14);
font-size:10px; line-height:1.5; color:#7fb4cd; white-space:normal; }
/* A keresomezo fokuszban van: a billentyuzet oda megy, nem a hajohoz. */
#nav-status.hint { color:#8ab4ff; margin:0; font-size:10px; letter-spacing:.06em; }
/* --- beállítás-képernyő ---------------------------------------------------
Minden KAPCSOLÓ ide költözött; a HUD-on csak a MŰSZEREK maradtak. Amit
repülés közben olvasol, az kint van; amit egyszer beállítasz, az nem. */
#setup { position:fixed; inset:0; z-index:60; display:none;
background:rgba(2,8,16,.78); backdrop-filter:blur(3px);
align-items:center; justify-content:center; }
#setup.open { display:flex; }
.set-box { width:min(880px,94vw); max-height:88vh; overflow-y:auto;
padding:22px 26px 18px; background:rgba(6,18,30,.96);
border:1px solid rgba(90,180,230,.30); border-radius:8px;
box-shadow:0 18px 60px rgba(0,0,0,.6); }
.set-box h2 { margin:0 0 14px; font-size:15px; font-weight:600; letter-spacing:.28em;
color:#bfe9ff; }
.set-sec { margin:16px 0 6px; font-size:10px; letter-spacing:.24em; color:#4e93b8;
border-bottom:1px solid rgba(90,180,230,.18); padding-bottom:5px; }
.set-row { display:flex; align-items:center; justify-content:space-between;
gap:16px; padding:7px 0; }
.set-label { font-size:12px; letter-spacing:.05em; color:#d6ecf8; }
.set-label span { margin-left:8px; font-size:10px; letter-spacing:.14em; color:#54809a; }
.set-toggle { min-width:56px; padding:5px 12px; font:inherit; font-size:10px;
font-weight:600; letter-spacing:.14em; cursor:pointer; border-radius:4px;
color:#7fa8c0; background:rgba(255,255,255,.05);
border:1px solid rgba(120,190,230,.28); }
.set-toggle.on { color:#04202e; background:linear-gradient(180deg,#8fe0ff,#40b6e4);
border-color:transparent; }
.set-slider { display:flex; align-items:center; gap:10px; }
.set-slider input { width:180px; accent-color:#5cc4ee; }
.set-val { min-width:38px; text-align:right; font-size:11px; color:#9fd4ee; }
.set-steps { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }
.set-steps button { padding:4px 9px; font:inherit; font-size:10px; letter-spacing:.08em;
cursor:pointer; border-radius:4px; color:#7fa8c0;
background:rgba(255,255,255,.05);
border:1px solid rgba(120,190,230,.24); }
.set-steps button.on { color:#04202e; background:linear-gradient(180deg,#8fe0ff,#40b6e4);
border-color:transparent; }
.set-keys { display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; margin-top:8px; }
.set-keys div { display:flex; gap:8px; font-size:11px; color:#8fb6cc; }
.set-keys b { min-width:58px; color:#e8f6ff; font-weight:600; }
.set-close { display:block; width:100%; margin-top:18px; padding:9px;
font:inherit; font-size:11px; font-weight:600; letter-spacing:.16em;
cursor:pointer; border-radius:5px; color:#cdeaf8;
background:rgba(255,255,255,.06); border:1px solid rgba(120,190,230,.3); }
.set-close:hover { background:rgba(255,255,255,.12); }
#nav-setup { padding:9px 14px; font:inherit; font-size:11px; font-weight:600;
letter-spacing:.1em; cursor:pointer; border-radius:5px; color:#cdeaf8;
background:rgba(255,255,255,.06); border:1px solid rgba(120,190,230,.3); }
#nav-setup:hover { background:rgba(255,255,255,.13); }
/* A BEALLITASOK A NAPLO KERETEBEN: kep balra, fulek es a gorgo lap jobbra */
#setup .set-box.ms-box { display:flex; padding:0; overflow:hidden; width:min(900px,94vw); height:min(640px,88vh); max-height:88vh; }
#setup .ms-hero.set-hero { background-image:url(../img/settings_hero.jpg); }
#setup .ms-jobb .hp-fej h2 { margin:0; font-size:14px; font-weight:600; letter-spacing:.28em; color:#8fe0ff; flex:1; }
#setup .ms-jobb .set-ver { font-size:10px; letter-spacing:.14em; color:#5f8298; }
#setup .ms-panel .set-sec:first-child { margin-top:2px; }
#setup .set-tab .set-close { width:auto; display:inline-block; margin-right:8px; padding:8px 14px; }
.set-bezar { color:#e8f4ff; background:rgba(40,100,140,.45); border-color:rgba(140,210,240,.55); }
.set-box h2 .set-ver { float:right; font-size:10px; font-weight:400; letter-spacing:.14em;
color:#4e93b8; padding-top:4px; }
/* --- veszélyjelzés ---------------------------------------------------------
A vignetta a képernyő SZÉLÉN izzik, nem a közepén: középen eltakarná azt,
ami miatt egyáltalán veszélyben vagy. Az átlátszatlanságát a JS állítja. */
#hazard { position:fixed; inset:0; z-index:30; pointer-events:none; opacity:0;
transition:opacity .25s linear; }
#hazard.on { opacity:1; }
#hazard::after { content:''; position:absolute; inset:0;
background:radial-gradient(ellipse at center,
rgba(255,40,0,0) 38%, rgba(255,40,0,.30) 72%, rgba(255,25,0,.85) 100%); }
/* (9.58) a zsilip ciklusa: nyomasnovekedesnel meleg, csokkenesnel hideg perem
(main: zsilipFx), a hideghez zuzmara es jegvirag a sarkokban */
#zsilip-fx { position:fixed; inset:0; z-index:29; pointer-events:none; opacity:0; }
#zsilip-fx .meleg, #zsilip-fx .hideg, #zsilip-fx canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
#zsilip-fx .meleg { background:radial-gradient(ellipse at center, rgba(255,120,30,0) 40%, rgba(255,110,20,.22) 74%, rgba(255,80,10,.62) 100%); }
#zsilip-fx .hideg { background:radial-gradient(ellipse at center, rgba(120,200,255,0) 40%, rgba(110,190,255,.22) 72%, rgba(170,225,255,.66) 100%); }
#hazard.gravity::after { background:radial-gradient(ellipse at center,
rgba(150,60,255,0) 38%, rgba(140,50,255,.28) 72%, rgba(90,20,200,.85) 100%); }
#hazard.radiation::after { background:radial-gradient(ellipse at center,
rgba(180,255,60,0) 38%, rgba(150,255,40,.26) 72%, rgba(90,200,0,.80) 100%); }
/* A figyelmeztetés a célkereszt FÖLÖTT áll, középen — ott nézel, amikor bajban
vagy. A betűkép ugyanaz a ritkított, vékony szedés, mint a nyitóképernyő
COREWARD felirata. */
#hazard-msg { position:fixed; left:var(--view-cx,50%); top:calc(var(--view-cy,50%) - 96px); transform:translateX(-50%);
z-index:31; pointer-events:none; opacity:0; transition:opacity .2s;
/* KOZEPRE MIND A KET SOR. A doboz szelesseget a hosszabbik sor
adja; kozepre igazitas nelkul a rovidebbik balra tapadna, es
a masodik sor lathatoan elcsuszna a felso alol. */
text-align:center; white-space:nowrap; }
#hazard-msg.on { opacity:1; }
#hazard-text { font-size:clamp(17px,2.1vw,26px); font-weight:200; letter-spacing:.30em;
color:#ff6a4a;
text-shadow:0 0 26px rgba(255,60,20,.75), 0 0 4px rgba(0,0,0,.95); }
/* MASODIK SOR a kozles alatt. Ugyanaz a betu, kisebben es halkabban: nem
masik uzenet, hanem ugyanannak a folytatasa — „vagy nyomj Z-t". Ures
allapotban nem foglal helyet, tehat a fo sor helye nem mozdul. */
#hazard-sub { display:block; margin-top:.45em;
/* UGYANAZ A SZEDES, csak kisebben: azonos vastagsag es azonos
RITKITAS (.30em). Fel ekkora ritkitassal ugyanaz a betu mas
betunek latszott. */
font-size:clamp(12px,1.45vw,18px); font-weight:200; letter-spacing:.30em;
color:inherit; opacity:.62; }
#hazard-sub:empty { display:none; }
#hazard-msg.gravity #hazard-text { color:#c79bff; text-shadow:0 0 18px rgba(150,80,255,.9),0 0 3px #000; }
#hazard-msg.radiation #hazard-text { color:#c6ff5a; text-shadow:0 0 18px rgba(150,255,40,.9),0 0 3px #000; }
/* A villogást a JS ütemezi, hogy a felirat CSERÉJE és a felvillanás együtt
járjon. CSS-animációval a kettő szétcsúszott, és a szöveg félvillanásnyival
a látható szakasz után váltott. */
#hazard-msg { transition:opacity .08s linear; }
/* A műszerek is elszíneződnek — a HUD ugyanabban a bajban van, mint a hajó. */
#hud.haz .panel { border-color:rgba(255,80,40,.55);
box-shadow:0 0 22px rgba(255,50,10,.28) inset; }
#hud.haz .v { color:#ffb9a4; }
#hud.haz-gravity .panel { border-color:rgba(170,110,255,.55);
box-shadow:0 0 22px rgba(120,40,255,.28) inset; }
#hud.haz-gravity .v { color:#dcc4ff; }
#hud.haz-radiation .panel { border-color:rgba(160,255,60,.5);
box-shadow:0 0 22px rgba(120,220,0,.26) inset; }
#hud.haz-radiation .v { color:#dcffa8; }
/* A sötétedés négy másodperc, nem villanás: a halál a képernyőn is egy
folyamat legyen. A felirat csak a végén úszik be, mire már fekete a kép.
Az elem MINDIG renderelve van, csak átlátszó — display:none-ról flex-re
váltva a böngésző nem animál, mert nincs kiindulási állapot, amiből
átmenetet számolhatna. Emiatt maradt eddig azonnali a besötétedés. */
/* AZ ATMENET LAPJA. Feher, mert a legkori belepes fenye feher - es mert egy
feher lap MINDENT elfed, a fulket is: a valtas alatta tortenik. A szinet a
kod allitja (a Venuszon melegebb), az atlatszosagat kepkockankent. */
/* A ki- es beszallas sotetje: a fulke es a sisak FOLOTT, a feliratok alatt. */
#sotet { position:fixed; inset:0; z-index:25; background:#000; opacity:0; pointer-events:none;
transition:opacity .5s ease; }
/* A FEJEZET LAPJA: fekete; eloszor a cim (a COREWARD logo betuivel es
ragyogasaval), aztan kulon az alcim, aztan lassan a kep. A felirat (a
radio szovege) a kep kozepen, egy fekete uveglapon - a fejezet lapja
folott is latszik */
/* A FEJEZETCIM LAPJA FEKETE UVEG, nem fekete fal. A toltes alatt meg tomor
(.tomor): ott nincs mit latni. Amint all a jelenet, uvegge halvanyul -
alatta ott a hajo a kifutopalyan, mogotte a terminal -, az indulasi
engedely utan meg vekonyabb (.vekony), es a gurulas elejen elmegy. */
#fejezet { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.70); opacity:0; pointer-events:none;
backdrop-filter:blur(3px) saturate(.85); -webkit-backdrop-filter:blur(3px) saturate(.85);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
transition:opacity 3.5s ease, background-color 2.2s ease; }
#fejezet.on { opacity:1; transition:opacity .6s ease, background-color 2.2s ease; }
#fejezet.tomor { background:#000; }
#fejezet.vekony { background:rgba(0,0,0,.34); }
#fejezet i { font-style:normal; font-size:clamp(34px,4.6vw,58px); letter-spacing:.30em; font-weight:200; color:#cdf3ff;
text-shadow:0 0 34px rgba(90,200,255,.45), 0 0 6px rgba(180,230,255,.35); opacity:0; transition:opacity 1.8s ease; }
#fejezet b { font-size:15px; font-weight:400; letter-spacing:.6em; color:#8fe0ff; opacity:0; transition:opacity 1.6s ease; }
#fejezet.cim-on i { opacity:1; }
#fejezet.alcim-on b { opacity:1; }
#felirat { position:fixed; left:50%; top:70%; transform:translate(-50%,-50%); z-index:61; width:min(880px,86vw);
padding:14px 22px 16px; border-radius:6px; text-align:center; font-size:15px; line-height:1.55; letter-spacing:.04em; color:#e8f4ff;
background:rgba(4,10,16,.62); border:1px solid rgba(140,210,240,.22); box-shadow:0 8px 40px rgba(0,0,0,.55);
backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
pointer-events:none; opacity:0; transition:opacity .25s ease; white-space:pre-line; }
#felirat.on { opacity:1; }
#felirat b { display:block; font-weight:400; font-size:10px; letter-spacing:.3em; color:#8fe0ff; margin-bottom:6px; }
/* A HIPERTERI ALAGUT: a fulke kepe (z 8) ALATT, tehat csak az ablakokon at
latszik - a feherseg nem hatol be a fulkebe. A rajz maga JS (kapuAlagut). */
#kapufeny { position:fixed; inset:0; z-index:7; width:100%; height:100%; opacity:0;
pointer-events:none; transition:opacity 2s ease; }
#atmenet { position:fixed; inset:0; z-index:5; background:#fff6e8; opacity:0;
pointer-events:none; overflow:hidden; }
/* A FEHERBEN MOZOG VALAMI. A sima szin egy kikapcsolt kepernyo volt; a
felhoben gomolyog a para (sotetebb foltok vonulnak, szorozva), es a
belepes izzasa csikokban huz at (vilagos savok, ferden, gyorsan). Ket
alreteg, mindketto a szin FOLOTT, tehat a fekete (legkor nelkuli)
valtozatban is mukodik: ott a foltok alig latszanak, a csikok igen. */
#atmenet::before, #atmenet::after { content:""; position:absolute; inset:-40%;
pointer-events:none; }
#atmenet::before {
background:
radial-gradient(ellipse 34% 26% at 30% 40%, rgba(0,0,0,.28), transparent 70%),
radial-gradient(ellipse 40% 30% at 70% 60%, rgba(0,0,0,.22), transparent 70%),
radial-gradient(ellipse 26% 22% at 55% 25%, rgba(0,0,0,.18), transparent 70%),
radial-gradient(ellipse 30% 36% at 20% 75%, rgba(0,0,0,.20), transparent 70%);
mix-blend-mode:multiply; opacity:.55;
animation:atm-gomoly 9s ease-in-out infinite alternate; }
/* A masodik reteg VILAGOS gomolyok, a masik iranyba vonulva - ket reteg
egymason mar parat ad, nem foltot. (Az elso valtozat parhuzamos csikokat
huzott at: az nem izzas volt, hanem vonalzo.) */
#atmenet::after {
background:
radial-gradient(ellipse 30% 24% at 60% 35%, rgba(255,255,255,.45), transparent 70%),
radial-gradient(ellipse 22% 30% at 25% 60%, rgba(255,250,235,.35), transparent 70%),
radial-gradient(ellipse 36% 20% at 75% 75%, rgba(255,255,255,.30), transparent 70%);
mix-blend-mode:screen; opacity:.6;
animation:atm-gomoly2 7s ease-in-out infinite alternate; }
@keyframes atm-gomoly { from { transform:translate(-6%,-4%) scale(1.05); }
to { transform:translate(6%,4%) scale(1.15); } }
@keyframes atm-gomoly2 { from { transform:translate(5%,3%) scale(1.1); }
to { transform:translate(-5%,-5%) scale(1.0); } }
/* A FEHER A KILATAS, NEM A FULKE. A muszerfal (z 8) folotte marad: a felho az
ablakon tul van, a muszerek nem feherednek ki tole. */
/* A SZEKVENCIA FELIRATA. A kep kozepe folott, borostyan, villog - ugyanazzal
az utemmel, mint a fulke figyelmeztetesei. A fenyreteg FOLOTT (z 6), hogy
a feherben is olvashato legyen. */
#szekvencia { position:fixed; left:var(--view-cx,50%); top:max(14px, calc(var(--view-cy,50%) - 136px));
transform:translateX(-50%); z-index:6;
font-size:clamp(17px,2.1vw,26px); font-weight:200; letter-spacing:.30em;
color:#ffb040; white-space:nowrap;
text-shadow:0 0 18px rgba(255,176,64,.8),0 0 3px #000; pointer-events:none; display:none;
animation:ckblink 1.1s step-end infinite; }
#szekvencia.on { display:block; }
/* (7.23) a sajat robbanasunk filmje alatt csak a 3D kep (es a halalkepernyo) */
body.halalfilm > *:not(#gl):not(#death) { opacity:0 !important; transition:opacity .5s; pointer-events:none; }
#death { position:fixed; inset:0; z-index:70; display:flex;
align-items:center; justify-content:center; background:#000; opacity:0;
pointer-events:none; visibility:hidden;
transition:opacity 4s linear, visibility 0s linear 4s; }
#death.on { opacity:1; visibility:visible; transition:opacity 4s linear, visibility 0s; }
.death-box { text-align:center; opacity:0; transition:opacity 1.4s ease-out 3.2s; }
#death.on .death-box { opacity:1; }
.death-box h2 { margin:0; font-size:clamp(26px,4vw,46px); font-weight:200;
letter-spacing:.42em; color:#ff5a3c;
text-shadow:0 0 40px rgba(255,50,20,.6); }
.death-box p { margin-top:16px; font-size:12px; letter-spacing:.18em; color:#7a4038; }
/* --- pilótafülke-nézet -----------------------------------------------------
A keret a képből jön, a lila területei átlátszóvá vannak téve, tehát a 3D
nézet egyszerűen átlátszik rajta. A kijelzők a képen DŐLNEK, ezért a
szövegdobozokat homográfiával a saját síkjukra fektetjük (matrix3d). */
#cockpit, #suit { position:fixed; inset:0; z-index:8; pointer-events:none; display:none;
overflow:hidden; }
#cockpit.on, #suit.on { display:block; }
/* A SISAK KIJELZOI: egy sor fent jobbra, egy sav alul - a fulkenel kisebb
betuvel, mert a kepen kisebbek a lapok. */
#suit .ck-panel { font-size:15px; letter-spacing:.10em; flex-direction:row; flex-wrap:wrap;
gap:6px 26px; background:none; }
#suit .ck-panel .k { display:inline; margin-right:6px; }
#suit .ck-panel .v { display:inline; }
#suit .ck-brand { display:none; }
/* a roverben kivulrol nezunk: a sisak kerete el, a lapok sotet alapon maradnak */
#suit.kulso .ck-frame { visibility:hidden; }
#suit.kulso .ck-panel { background:rgba(4,10,16,.55); border-radius:4px; }
/* ...es nem dolnek: a sisak uvegenek perspektivaja (matrix3d) a kulso
nezetben nincs mihez igazodjon - a lapok egyenesen allnak */
#suit.kulso .ck-panel { transform:none !important; }
/* GYALOG ES A ROVERBEN a kereso es az ugras gombja nem kell: a hajo
lent all, ugrani vagy celt keresni onnan nem lehet (az allapotsor marad) */
body.gyalog #nav .nav-row { display:none !important; }
/* (7.24) harc kozben nincs keresomezo es ugrogomb alul */
body.harcban #nav, body.harcban #t-jump, body.harcban #hud-jump { display:none !important; }
/* (7.73) a raketa gombja harcban, erintesen - piros, hogy ne a JUMP-nak latsszon */
#t-raketa { background:linear-gradient(#ff8a5a, #e0482a) !important; color:#200604 !important; }
#t-raketa small { margin-left:.4em; font-size:.8em; opacity:.8; }
#t-raketa.ures { filter:grayscale(1) brightness(.6); }
/* A FELSO KIJELZO SORAI: egymas alatt, a sorokon belul balra-jobbra. */
#suit .su-sor { display:flex; width:100%; justify-content:space-between; align-items:baseline; gap:14px; }
#suit .su-sor .k { font-size:.74em; margin:0; }
#suit .su-sor .v { margin-left:auto; text-align:right; }
#suit .su-nev { justify-content:flex-start; }
#suit .su-nev .v { margin-left:0; font-size:1.15em; letter-spacing:.16em; }
#suit .su-sav { font-size:.7em; letter-spacing:.05em; }
#suit .su-o2.veszely .v, #suit .su-o2.veszely .su-sav { color:#ff7a5a; animation:ckblink 1s step-end infinite; }
/* AZ ALSO SAV: kockaban a billentyuk, olvashato betuvel. */
#suit .ck-kx { gap:7px; }
#suit .ck-kx .ck-keys { flex-direction:row; gap:3px; }
#suit .ck-kx .ck-keys i { font-size:13px; padding:2px 7px; opacity:.9; }
#suit .ck-kx .k { font-size:.92em; letter-spacing:.14em; margin:0; }
/* A vászon teljes képernyős, hogy az üvegkijelzők mögé is jusson kép. A képen
KÍVÜLI sávokat viszont le kell takarni. Nem a réteg háttere csinálja: az a
kép átlátszó (lila) területét is elfedné, és az ablak koromsötét lenne.
Ehelyett a kép KÖRÉ festünk feketét egy hatalmas, elmosódás nélküli
árnyékkal — az pontosan a stage-en kívülre esik. */
.ck-stage { position:absolute; left:0; top:0;
box-shadow:0 0 0 100vmax #000; }
.ck-frame { position:absolute; left:0; top:0; width:100%; height:100%;
image-rendering:auto; }
.ck-panel { position:absolute; transform-origin:0 0; overflow:hidden;
padding:6px 10px; box-sizing:border-box;
display:flex; flex-direction:column;
justify-content:center; align-items:center; text-align:center;
font-size:14px; letter-spacing:.08em; line-height:1.3;
color:var(--hud-color,#f2e6a8);
text-shadow:0 0 12px rgba(0,0,0,.85);
background:radial-gradient(ellipse at 50% 0%,
rgba(20,70,100,.55), rgba(4,16,26,.75) 75%); }
.ck-panel .k { color:var(--hud-key,#7d7250); font-size:.60em; letter-spacing:.20em;
display:block; }
.ck-panel .v { color:var(--hud-color,#f2e6a8); display:block; }
.ck-panel .row .v { display:inline; }
.ck-panel .row { display:flex; justify-content:center; gap:10px;
align-items:baseline; width:100%; }
.ck-panel .row .k { display:inline; }
/* A sebességkijelző kicsi és széles: egyetlen nagy szám fér rá. */
.ck-speed { flex-direction:row; padding:0 6px; font-size:17px; letter-spacing:.04em;
color:var(--hud-color,#f2e6a8); }
/* FTL-ben a sebességkijelző is lilára vált. */
#cockpit.ftl .ck-speed { color:var(--ftl-color,#c98bff); }
.ck-speed .u { font-size:.45em; color:var(--hud-key,#7d7250); margin-left:.4em; letter-spacing:.16em; }
.ck-main { font-size:16px; }
/* A bal felso kijelzo betuje 10,5 px volt — a tobbi panele 14 es 17 kozott.
A tizenket szamjegyes sor csak 135 pixelt foglalt a 186-bol, tehat a hely
megvolt hozza, csak nem hasznaltuk. */
.ck-nav { font-size:14px; line-height:1.06; padding:4px 6px; }
/* A harom koordinata kozott legyen levegő: sortavolsag nelkul osszeernek. */
.ck-nav .sg-xyz { margin-bottom:2px; }
/* A szamjegyek 15%-kal kisebbek — a panel betumerete valtozatlan, tehat a
feliratok es a sortavolsagok ott maradnak, ahol voltak. */
.ck-panel.ck-nav .sg { font-size:0.98em; }
.ck-nav .k { font-size:7.6px; letter-spacing:.14em; }
.ck-nav .sg { font-size:0.78em; }
/* veszélyben a fülke kijelzői is átszíneződnek */
#cockpit.haz .ck-panel { color:#ffb9a4; text-shadow:0 0 12px rgba(255,90,40,.6);
background:radial-gradient(ellipse at 50% 0%,
rgba(90,25,10,.6), rgba(26,6,3,.8) 75%); }
#cockpit.haz .ck-panel .v { color:#ffd9cd; }
#cockpit.haz .ck-panel .k { color:#a0563f; }
/* --- verziótörténet -------------------------------------------------------- */
#history-open:not(.sm) { font:inherit; font-size:10px; letter-spacing:.14em; cursor:pointer;
color:#5a8faa; background:none; border:none; padding:0;
border-bottom:1px solid rgba(90,143,170,.45); }
#history-open:not(.sm):hover { color:#9fd4ee; border-bottom-color:#9fd4ee; }
#history { position:fixed; inset:0; z-index:80; display:none;
align-items:center; justify-content:center;
background:rgba(2,8,16,.86); backdrop-filter:blur(3px); }
#history.on { display:flex; }
.hist-box { width:min(760px,92vw); max-height:86vh; overflow-y:auto;
padding:24px 28px 22px; background:rgba(6,18,30,.97);
border:1px solid rgba(90,180,230,.28); border-radius:8px;
box-shadow:0 18px 60px rgba(0,0,0,.6); }
.hist-box h2 { margin:0 0 18px; font-size:14px; font-weight:200; letter-spacing:.30em;
color:#bfe9ff; display:flex; justify-content:space-between;
align-items:center; }
#history-close { font:inherit; font-size:10px; letter-spacing:.14em; cursor:pointer;
color:#cdeaf8; background:rgba(255,255,255,.06);
border:1px solid rgba(120,190,230,.3); border-radius:4px;
padding:5px 12px; }
#history-close:hover { background:rgba(255,255,255,.13); }
.hist-v { margin-bottom:20px; padding-bottom:16px;
border-bottom:1px solid rgba(90,180,230,.13); }
.hist-v:last-child { border-bottom:none; margin-bottom:0; }
.hist-h { display:flex; align-items:baseline; gap:12px; margin-bottom:9px; }
.hist-num { font-size:15px; letter-spacing:.14em; color:#8fe6ff; }
.hist-name { font-size:11px; letter-spacing:.22em; color:#4e93b8; }
.hist-date { margin-left:auto; font-size:10px; letter-spacing:.1em; color:#2f6480; }
.hist-v ul { margin:0; padding-left:18px; }
.hist-v li { font-size:12.5px; line-height:1.65; color:#a4c6d8; margin-bottom:6px; }
.hist-note { font-size:11px; line-height:1.6; color:#4e7f99; margin:0 0 20px;
padding-bottom:14px; border-bottom:1px solid rgba(90,180,230,.13); }
/* A hajómodell fölé kiírt jelzés — a kocka nyilvánvalóan nem a végleges hajó,
és jobb ezt kimondani, mint hagyni, hogy hibának nézzék. */
#ship-note { position:fixed; z-index:13; pointer-events:none; opacity:0;
transform:translate(-50%,-100%); white-space:nowrap;
font-size:10px; letter-spacing:.24em; color:#5f8fa8;
text-shadow:0 0 10px rgba(0,0,0,.95); transition:opacity .3s; }
#ship-note.on { opacity:1; }
#ship-note b { display:block; margin-bottom:3px; font-weight:400;
font-size:12px; letter-spacing:.3em; color:#9fd4ee; }
.set-colour { display:flex; align-items:center; gap:10px; }
.set-colour input[type=color] { width:52px; height:26px; padding:0; cursor:pointer;
background:none; border:1px solid rgba(120,190,230,.3);
border-radius:4px; }
.set-reset { padding:4px 10px; font:inherit; font-size:10px; letter-spacing:.14em;
cursor:pointer; color:#7fa8c0; background:rgba(255,255,255,.05);
border:1px solid rgba(120,190,230,.24); border-radius:4px; }
.set-reset:hover { color:#cdeaf8; }
/* --- hétszegmenses számkijelzés --------------------------------------------
A ki nem gyulladt szegmensek is látszanak, halványan. Ettől lesz a kijelző
fizikai panel és nem lebegő szám — igazi hardveren mindig ott a sötét bar. */
.sg-d { position:relative; display:inline-block; vertical-align:middle;
width:.62em; height:1.05em; margin:0 .07em; }
/* A ki nem gyulladt szegmensek SÖTÉTEK: egy igazi kijelzőn a holt szegmens
nem világos folt, hanem sötét bar a panelen. Világos szürkével úgy néztek ki,
mintha halványan égnének. */
.sg-d .s { position:absolute; background:#39424a; opacity:1;
border-radius:1px; transition:opacity .12s linear; }
/* A FENYUDVAR ARANYOS, NEM FIX.
Ot keppont egy nagy muszerszamon halvany glória; egy huszonket keppontos
szamjegyen viszont a szegmensek 1-2 keppont vastagok, es ugyanaz az ot
keppont OSSZEMOSSA oket — a rakter szama egyetlen vilagos foltta olvadt.
Betumeretben megadva minden meretnel ugyanaz a viszony marad: negyvenkét
keppontos szamjegyen ez pont ot keppont, tehat a nagy kijelzok latvanya
nem valtozik. */
.sg-d .s.on { opacity:1; background:currentColor;
box-shadow:0 0 .12em currentColor; }
/* vízszintes szegmensek */
.s-a { left:14%; right:14%; top:0; height:9%; }
.s-g { left:14%; right:14%; top:46%; height:9%; }
.s-d { left:14%; right:14%; bottom:0; height:9%; }
/* függőleges szegmensek */
.s-f { left:0; top:7%; width:9%; height:40%; }
.s-b { right:0; top:7%; width:9%; height:40%; }
.s-e { left:0; bottom:7%; width:9%; height:40%; }
.s-c { right:0; bottom:7%; width:9%; height:40%; }
.sg-dot { display:inline-block; width:.20em; height:1.05em; position:relative;
vertical-align:middle; }
.sg-dot::after { content:''; position:absolute; left:0; bottom:0;
width:.16em; height:.16em; border-radius:50%;
background:currentColor; box-shadow:0 0 5px currentColor; }
.sg-colon { display:inline-block; width:.22em; height:1.05em; position:relative;
vertical-align:middle; }
.sg-colon::before,.sg-colon::after { content:''; position:absolute; left:.03em;
width:.15em; height:.15em; border-radius:50%; background:currentColor; }
.sg-colon::before { top:26%; } .sg-colon::after { bottom:26%; }
.sg-space { display:inline-block; width:.30em; height:1.05em; vertical-align:middle; }
/* Négyzetes lépcsős sáv: a lépcsős mennyiséghez lépcsős kijelző. */
.sg-bar { display:inline-flex; gap:3px; align-items:center; vertical-align:middle; }
.sg-blk { display:inline-block; width:9px; height:9px; border-radius:1px;
border:1px solid currentColor; opacity:.22; }
.sg-blk.on { opacity:1; background:currentColor; box-shadow:0 0 6px currentColor; }
.ck-panel .sg { letter-spacing:0; font-size:1.15em; }
.sg-xyz { line-height:1.15; }
.sg-warn { font-style:normal; margin-left:.3em; color:#ffb040; }
.sg-unit { font-style:normal; font-size:.6em; margin-left:.25em; opacity:.75; }
/* A pálcikás számok közé kevert normál betűk (mértékegység). */
.sg-txt { font-style:normal; font-size:.62em; letter-spacing:.10em;
margin:0 .06em; opacity:.85; vertical-align:middle; }
/* Az időskála sora: balra a billentyűk, jobbra a szám és a lépcsős sáv. */
.ck-rate { display:flex; align-items:center; gap:9px; }
.ck-keys { display:flex; flex-direction:column; gap:2px; font-style:normal; }
.ck-keys i { font-style:normal; font-size:9px; line-height:1.15; letter-spacing:.1em;
padding:1px 4px; border:1px solid currentColor; border-radius:2px;
opacity:.55; }
.ck-rate-v { display:flex; flex-direction:column; align-items:center; gap:4px;
font-style:normal; }
/* Jobbra igazított, fix szélességű koordinátamező. */
.sg-xyz { text-align:right; align-self:stretch; line-height:1; white-space:nowrap; }
/* A pont alapból csak akkor látszik, ha ég — a szellemcellák pontja nem kell. */
.sg-dot::after { opacity:.12; }
.sg-dot.on::after { opacity:1; }
.ck-neard { margin-top:2px; }
/* Ütközésriadó: borostyán, mert nem halálos — az autopilóta közbelép. */
#hazard.collision::after { background:radial-gradient(ellipse at center,
rgba(255,180,0,0) 38%, rgba(255,170,0,.26) 72%, rgba(220,120,0,.80) 100%); }
#hazard-msg.collision #hazard-text { color:#ffc266;
text-shadow:0 0 18px rgba(255,170,0,.9),0 0 3px #000; }
#hud.haz-collision .panel { border-color:rgba(255,180,40,.55);
box-shadow:0 0 22px rgba(255,150,0,.26) inset; }
#hud.haz-collision .v { color:#ffe0a8; }
#cockpit.haz-collision .ck-panel { color:#ffe0a8; }
#nav-status.warn { color:#ffb040; }
/* Fülke-műszer: balra a címke és a hozzá tartozó billentyűk, jobbra a szám
és a lépcsős sáv. Több műszer fér egy panelre anélkül, hogy össze lehetne
téveszteni, melyik gomb melyiket szabályozza. */
.ck-g { display:flex; align-items:center; justify-content:space-between;
gap:8px; width:100%; font-style:normal; margin:0; }
.ck-g-l { display:flex; align-items:center; gap:5px; font-style:normal; }
.ck-g-l .k { font-size:8.5px; letter-spacing:.16em; }
.ck-g-r { display:flex; flex-direction:column; align-items:flex-end; gap:2px;
font-style:normal; }
.ck-g .ck-keys { flex-direction:row; gap:2px; }
.ck-g .ck-keys i { font-size:8px; padding:0 3px; }
.ck-g .sg-bar { gap:2px; }
.ck-g .sg-blk { width:6px; height:6px; }
.ck-mode { font-size:11px !important; letter-spacing:.10em; opacity:1; }
.sg-sun { font-size:.9em; }
/* A naptav balra, mellette jobbra az inercia-csillapito lampaja. */
.ck-sunrow { display:flex; align-items:center; justify-content:space-between;
gap:10px; width:100%; }
.ck-damp { display:flex; align-items:center; gap:5px; }
.ck-damp .k { font-size:7.4px; letter-spacing:.12em; }
/* A negyzet ugyanolyan, mint a billentyukupak: keret, lekerekitett sarok.
Ha megy, kitoltve — invertalva, kekesszurken. Ha nem, csak a keret marad. */
.ck-ind { display:inline-block; width:9px; height:9px; border-radius:2px;
border:1px solid currentColor; opacity:.5; background:transparent;
transition:background .18s, opacity .18s, box-shadow .18s; }
.ck-ind.on { background:#8fa6bd; opacity:1; box-shadow:0 0 7px rgba(143,166,189,.75); }
/* Villog, nem csak vilagit: egy allo lampa a mellette levo feliratnak
latszik, egy villogo viszont allapotot jelent. Egy masodperces utem. */
.ck-ind.on { animation:ckblink 1s steps(1) infinite; }
@keyframes ckblink { 0%,49% { opacity:1; } 50%,100% { opacity:.22; } }
.ck-view { display:flex; align-items:center; gap:4px; margin-top:.3em; }
.ck-view .ck-keys { flex-direction:row; }
.ck-view .ck-keys i { font-size:8px; padding:0 3px; }
.ck-view .k { font-size:8.5px; letter-spacing:.16em; }
.ck-view-2 { margin-left:10px; }
/* Magas muszer: balra egymas alatt a felirat es a sav, jobbra a szam, ami a
ketto egyuttes magassagat kitolti. Akkor kell, ha a sav tul szeles ahhoz,
hogy a szam melle is elferjen. */
/* Felirat, alatta a sav a panel TELJES szelesseben. Szam nincs: szazalekban
megadva csak ugralt, es semmit nem mondott, amit a sav ne mondana el. */
/* Feljebb csusztatva: a felirat sora es a sav egyutt egy blokk, es a RAD
alatt nincs mit tartani koztuk. */
.ck-gt { display:flex; flex-direction:column; align-items:stretch; gap:2px;
width:100%; font-style:normal; margin:0; }
.ck-gt .k { font-size:8.5px; letter-spacing:.16em; }
.ck-gt .sg-bar { display:flex; gap:2px; width:100%; }
.ck-gt .sg-blk { flex:1 1 0; width:auto; height:6px; }
/* A HUD pozíciókijelzője: három sor pálcikás szám, jobbra igazítva. */
/* A három koordináta közé kell hely: a szegmenscellák magassága 1,05em, és
sortávolság nélkül a sorok pontosan összeértek. */
#v-pos { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
#v-pos .sg { font-size:11px; line-height:1.25; letter-spacing:0; display:block; }
#v-pos .pos-u { font-size:9px; letter-spacing:.18em; color:var(--hud-key,#7d7250);
margin-top:2px; }
#hud-tr .row { align-items:flex-start; }
/* Fekete üveg: a panel félig átlátszó, tehát a mögötte lévő ég átüt rajta.
A tükröződés-csík azért kell, hogy üvegnek látszódjon és ne lyuknak. */
.ck-glass { background:linear-gradient(160deg,
rgba(120,190,255,.10) 0%, rgba(8,18,28,.42) 38%, rgba(4,10,18,.52) 100%);
box-shadow:inset 0 1px 0 rgba(160,220,255,.18); }
.set-danger { color:#ffb9a4; border-color:rgba(255,120,80,.35); }
.set-danger:hover { background:rgba(255,90,50,.14); }
.set-danger.armed { color:#04202e; background:linear-gradient(180deg,#ffb070,#e8763c);
border-color:transparent; }
/* A nyitokepernyo jogi sora. Halvany es kicsi: ott kell lennie, de nem az
elso, amit elolvasol. */
/* A jogi sor a lablechez igazodik, es olvashato: a korabbi 10 pixeles,
harmadig halvany valtozat ott volt, de senki nem latta. */
.splash-legal { margin-top:1.4em; padding-top:12px; font-size:11px;
letter-spacing:.08em; line-height:1.8;
border-top:1px solid rgba(80,160,200,.12);
color:rgba(190,205,225,.62); max-width:66ch; text-wrap:pretty; }
.splash-legal b { color:rgba(210,225,245,.85); font-weight:600; }
.splash-legal a { color:rgba(190,205,225,.78); text-decoration:none;
border-bottom:1px solid rgba(190,205,225,.32); }
.splash-legal a:hover { color:#bcd4f0; }
/* --- tamogatas a nyitokepernyon ---------------------------------------- */
/* LATHATATLAN DOBOZ. `display: contents` mellett a bongeszo ugy rendezi el a
ket gyereket, mintha ez az elem nem is lenne — gepen es allo helyzetben
tehat semmi nem valtozik tole. Csak fekvo erintokepernyon kap testet. */
.splash-right { display: contents; }
.splash-give { margin-top:1.5em; padding-top:14px;
border-top:1px solid rgba(80,160,200,.12); max-width:66ch; }
/* FEHEREN. Ez az egyetlen mondat az oldalon, ami kér valamit — halkabbra
szedve úgy nézett ki, mint egy apróbetűs kitétel. Ha egyszer kimondjuk,
mondjuk ki rendesen. */
.give-lead { font-size:11px; letter-spacing:.06em; line-height:1.7;
color:#ffffff; margin-bottom:11px; text-wrap:pretty; }
/* A támogatás sora: EGY jel, aztán KÉT EGYFORMA gomb.
Eddig mindkét gomb saját PayPal-ikont viselt, és mindkettő akkora volt,
amekkorára a felirata hízott — a „Support the project" szélesebb, tehát
fontosabbnak látszott, pedig csak hosszabb a szó. A gombok mérete így egy
nyelvi véletlenről beszélt, nem az összegről.
Most a jel egyszer szerepel a sor elején, a két gomb pedig `flex:1 1 0`:
egyforma szélesek, akármit ír rájuk a fordítás. */
.give-row { display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
/* --- TÁMOGATÁS -----------------------------------------------------------
A két gomb a MENÜ gombjaival azonos méretű és formájú, egymás alatt, és
mindegyik előtt ott a jel, hogy mivel fizetsz. Egy sorban, két gomb mellett
egyetlen jel csak az elsőre mutatott. */
.give-row { display:flex; flex-direction:column; gap:8px; }
/* A sor: jel — gomb — osszeg. Az OSSZEG a gombon KIVUL all, mert nem a
gomb resze: a gomb azt mondja meg, MIT csinalsz, az osszeg azt, MENNYIERT.
Ket kulonbozo dolog, es igy a gomb maga is pontosan akkora lehet, mint a
tobbi — belul egy szammal nem lehetne. */
.give-sor { display:flex; align-items:center; gap:var(--pp-koz); }
.give-mark { flex:0 0 auto; width:var(--pp-jel); height:auto;
/* A lap sötét, a jel pedig sötétkék: derítés nélkül beleégne. */
filter:drop-shadow(0 0 9px rgba(170,225,255,.6)) brightness(1.55); }
.give-btn { flex:0 0 auto; width:var(--gomb-sz);
color:#eefaff; background:rgba(122,180,220,.38);
border-color:rgba(180,230,255,.75); }
.give-btn:hover { color:#ffffff; background:rgba(155,210,240,.52);
border-color:rgba(215,245,255,.92); }
.give-btn.on { background:rgba(170,220,248,.6); border-color:rgba(225,250,255,.95); }
.give-ar { flex:0 0 auto; font-style:normal; font-size:11.5px;
letter-spacing:.14em; color:#bcdcf0; }
/* A PayPal gombja csak akkor foglal helyet, ha tenyleg ott van. */
.give-panel { display:none; margin-top:12px; max-width:360px; }
.give-panel.on { display:block; }
.give-msg { margin-top:9px; font-size:11px; letter-spacing:.06em;
color:rgba(190,205,225,.6); min-height:1.4em; }
.give-msg.ok { color:#7fd6a0; }
.give-msg.err { color:#ffa8a8; }
/* --- hivoszo a nyitokep felett ---------------------------------------- */
.splash-art { position:relative; }
.art-start { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
user-select:none; z-index:2; }
/* Ugyanaz a betu es ugyanaz a meret, mint a COREWARD cimen: a ketto egy
lapon all, es ha mas a szedesuk, ket kulonbozo helyrol jott feliratnak
latszanak. */
.art-start span { display:block; font-size:clamp(34px, 4.6vw, 58px);
/* A nagy, ritkitott betut a bongeszo alapertelmezesben
eros kontraszttal rasztereli, es a nagyitas kozben ez
lepcsos elt ad. Simitva es sajat retegen (will-change)
a skalazas is folyamatos marad. */
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:geometricPrecision;
will-change:transform, opacity;
letter-spacing:.30em; text-indent:.30em; font-weight:200;
color:#6fd0ff;
text-shadow:0 0 26px rgba(60,180,255,.55), 0 0 3px rgba(0,0,0,.9);
animation:artpulse 3.4s ease-in-out infinite;
transition:color .18s, text-shadow .18s, transform .18s; }
/* A pulzálás eddig CSAK az átlátszóságot mozgatta. Egy csillag nem így
viselkedik: a fényével együtt a látszó mérete és a színe is jár. Nagyon
kicsi kilengés — 1.5% méret és egy árnyalat —, mert ami feltűnő, az egy
perc múlva idegesítő. */
@keyframes artpulse { 0%,100% { opacity:.70; transform:scale(1); color:#57bff4; }
50% { opacity:1; transform:scale(1.045); color:#9ce2ff; } }
50% { opacity:1; transform:scale(1.015); color:#8fdcff; } }
/* A feliraton allo eger: itt tortenik az inditas, tehat itt vilagosodik ki.
Korabban az egesz kep kattinthato volt, ezert az egesz kep is reagalt. */
.art-start:hover span { color:#d8f2ff; transform:scale(1.05);
text-shadow:0 0 34px rgba(120,215,255,.85), 0 0 4px rgba(0,0,0,.9);
animation:none; opacity:1; }
/* A START maga a kapcsolo. A kepernyo tobbi resze nem: aki a szoveget
akarja kijelolni, ne inditsa el veletlenul a jatekot. */
.art-start { pointer-events:auto; cursor:pointer; }
/* --- felvillano csillagok --------------------------------------------- */
.art-twinkle { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.tw { position:absolute; width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
border-radius:50%; background:currentColor;
box-shadow:0 0 7px 2px currentColor;
opacity:0; animation:tw var(--tw-dur, 1.5s) ease-out forwards; }
@keyframes tw {
0% { opacity:0; transform:scale(.4); }
18% { opacity:1; transform:scale(1.5); }
100% { opacity:0; transform:scale(.6); }
}
/* --- a beallitasok ket hasabban ---------------------------------------- */
.set-cols { display:grid; grid-template-columns:1fr 1fr; gap:0 34px; }
.set-col { min-width:0; }
/* Az elso szakaszcim ne loljon el a hasab tetejen. */
.set-col > .set-sec:first-child { margin-top:6px; }
/* Keskeny kepernyon egy hasab: ket oszlop 620 pixel alatt csak osszenyom. */
@media (max-width: 620px) {
.set-cols { grid-template-columns:1fr; }
}
/* --- erintos kezeloszervek --------------------------------------------- */
/* Csak ott jelennek meg, ahol NINCS eger: a (hover:none) es a durva mutato
egyutt pontosan az erintokepernyot jelenti. Egeres gepen semmi nem valtozik. */
#touchpad { display:none; }
@media (hover: none) and (pointer: coarse) {
#touchpad { display:flex; position:fixed; left:0; right:0; bottom:96px;
justify-content:center; gap:10px; z-index:40;
pointer-events:none; padding:0 10px; }
#touchpad .tbtn { pointer-events:auto; }
}
.tbtn { min-width:58px; height:58px; border-radius:8px; font:inherit;
font-size:20px; letter-spacing:.06em; font-weight:300;
color:#bcd4f0; background:rgba(12,32,48,.66);
border:1px solid rgba(90,170,215,.42);
-webkit-tap-highlight-color:transparent; touch-action:manipulation;
display:flex; align-items:center; justify-content:center; }
.tbtn--w { font-size:12px; letter-spacing:.12em; padding:0 10px; }
.tbtn:active, .tbtn.on { background:rgba(50,115,160,.72);
border-color:rgba(140,215,255,.8); color:#eaf6ff; }
/* A vasznon a huzas KORMANYOZ, nem kijelol. */
#gl { user-select:none; -webkit-user-select:none; touch-action:none; }
/* --- objektumkatalogus (F3) --------------------------------------------- */
#catalog { position:fixed; inset:0; z-index:62; display:none;
align-items:center; justify-content:center;
background:rgba(2,7,14,.78); backdrop-filter:blur(3px); }
#catalog.on { display:flex; }
.cat-box { width:min(1500px,96vw); height:min(92vh,980px);
display:flex; flex-direction:column;
background:linear-gradient(180deg,rgba(9,26,40,.98),rgba(5,15,25,.98));
border:1px solid rgba(90,170,215,.30); border-radius:6px;
padding:18px 20px; color:#d6ecf8; }
.cat-box h2 { margin:0 0 12px; font-size:15px; font-weight:600; letter-spacing:.28em;
color:#8fe0ff; display:flex; justify-content:space-between; align-items:baseline; }
.cat-count { font-size:10px; letter-spacing:.16em; color:#4e93b8; font-weight:400; }
.cat-tools { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.cat-search { flex:0 0 220px; padding:7px 10px; font:inherit; font-size:12px;
color:#d6ecf8; background:rgba(4,16,26,.85);
border:1px solid rgba(90,170,215,.35); border-radius:3px; }
.cat-filters { display:flex; gap:5px; flex-wrap:wrap; }
.cat-filters button { padding:5px 10px; font:inherit; font-size:10px; letter-spacing:.10em;
color:#8fb6cc; background:rgba(20,50,74,.5); cursor:pointer;
border:1px solid rgba(90,170,215,.28); border-radius:3px; }
.cat-filters button.on { color:#04202e; background:linear-gradient(180deg,#8fe0ff,#40b6e4);
border-color:#8fe0ff; }
.cat-main { display:flex; gap:18px; flex:1; min-height:0; }
.cat-list { flex:1; overflow-y:auto; min-width:0;
border:1px solid rgba(90,170,215,.14); border-radius:4px; }
.cat-row:hover { background:rgba(40,95,135,.28); }
.cat-row.on { background:rgba(50,115,160,.5); }
.cat-row b { font-size:12px; font-weight:500; color:#e8f6ff; }
.cat-row i { font-size:10px; font-style:normal; letter-spacing:.10em;
color:#5a8faa; }
.cat-more { padding:9px 11px; font-size:10px; letter-spacing:.12em; color:#4e93b8; }
.cat-side { flex:0 0 250px; display:flex; flex-direction:column; align-items:center; gap:8px; }
/* Az elonezet UGYANOLYAN SZELES, mint a felszini kep alatta, es ugyanaz a
kerete — a ketto egy oszlopban all, tehat egy csaladba kell tartozniuk.
Alacsonyabb viszont: ket 4:3-as doboz egymas alatt nem fer ki a panelen.
A hatter csillagos, mert egy egitest nem fekete urben lebeg magaban. */
.cat-prev { width:100%; aspect-ratio:16/9; display:block;
border:1px solid rgba(90,140,175,.35); border-radius:3px;
background-color:#040a12;
background-image:
radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.55), transparent),
radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,.40), transparent),
radial-gradient(1px 1px at 32% 68%, rgba(255,255,255,.45), transparent),
radial-gradient(1px 1px at 62% 78%, rgba(255,255,255,.30), transparent),
radial-gradient(1px 1px at 88% 56%, rgba(255,255,255,.35), transparent),
radial-gradient(1px 1px at 46% 36%, rgba(255,255,255,.25), transparent),
radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,.30), transparent),
radial-gradient(1px 1px at 70% 44%, rgba(255,255,255,.22), transparent); }
.cat-name { font-size:14px; letter-spacing:.06em; color:#e8f6ff; text-align:center; }
.cat-kind { font-size:10px; letter-spacing:.16em; color:#5a8faa; text-transform:uppercase; }
.cat-note { font-size:11px; line-height:1.6; color:#8fb6cc; text-align:center;
max-height:76px; overflow:hidden; }
.cat-go { margin-top:auto; width:100%; padding:9px; font:inherit; font-size:11px;
letter-spacing:.18em; cursor:pointer; color:#04202e; border:0; border-radius:3px;
background:linear-gradient(180deg,#8fe0ff,#40b6e4); }
.cat-close { margin-top:14px; width:100%; padding:8px; font:inherit; font-size:11px;
letter-spacing:.18em; cursor:pointer; color:#8fb6cc;
background:rgba(20,50,74,.5); border:1px solid rgba(90,170,215,.28);
border-radius:3px; }
.cat-go.blocked { background:linear-gradient(180deg,#ffc266,#e08a2a); font-size:10px; }
/* A katalogus texturajelei. Sajat felvetel: nincs jel. */
/* --- felszíni nézet a katalógusban -------------------------------------- */
/* Az oldalsáv szélesebb lett, és GÖRGETHETŐ: a leírás nyolc mondat is lehet,
és nem szabad, hogy kinyomja alóla a FLY THERE gombot. */
/* A jobb oldal NE görgessen. A generált leírás nyolc mondat is lehet, és a
FLY THERE gombig görgetni azért, mert a szöveg hosszú, rossz csere: a gomb
az, amiért az ablakot kinyitottad. Ezért az oldalsáv szélesebb, a leírás
pedig SAJÁT görgetőt kap, ami a maradék helyet tölti ki — a kép, a név és
a két gomb mindig a helyén marad. */
.cat-side { flex:0 0 380px; overflow:hidden; gap:7px; }
.cat-surf { flex:1; min-height:0; }
.cat-stext { flex:1; min-height:0; overflow-y:auto; padding-right:6px; }
.cat-surf { width:100%; margin-top:6px; display:flex; flex-direction:column; gap:6px; }
.cat-surf-h { font-size:9px; letter-spacing:.22em; color:#4e93b8; }
/* A kép 4:3 — pontosan az az arány, amiben lementettük. Így a helye akkor is
megvan, ha még nincs kép: a panel nem ugrál betöltéskor. */
/* `flex:0 0 auto` nelkul a rugalmas oszlop NULLA magasra nyomta ossze —
az `aspect-ratio` csak akkor szab meretet, ha a magassag szabad. */
.cat-simg { position:relative; width:100%; aspect-ratio:4/3; flex:0 0 auto;
border-radius:3px; background:rgba(8,20,30,.6); overflow:hidden;
display:flex; align-items:center; justify-content:center; }
.cat-simg img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.cat-simg span { font-size:10px; letter-spacing:.10em; color:#5a8faa; text-align:center;
padding:0 10px; line-height:1.5; }
.cat-stext { font-size:11px; line-height:1.65; color:#a8c6d8; text-align:left; }
.cat-gen { width:100%; padding:7px; font:inherit; font-size:10px; letter-spacing:.14em;
color:#04202e; background:linear-gradient(180deg,#8fe0ff,#40b6e4);
border:0; border-radius:3px; cursor:pointer; }
.cat-gen:disabled { opacity:.6; cursor:default; }
/* Aki nem jogosult, annak sem tüntetjük el: látnia kell, hogy létezik. */
.cat-gen.halvany { color:#8fb6cc; background:transparent;
border:1px solid rgba(90,140,175,.45); }
/* Teljes méretű kép. Azért generáltuk, hogy meg lehessen nézni. */
#cat-big { position:fixed; inset:0; z-index:80; display:none; cursor:zoom-out;
background:rgba(2,6,12,.94); align-items:center; justify-content:center; }
#cat-big.on { display:flex; }
#cat-big img { max-width:94vw; max-height:92vh; border-radius:4px;
box-shadow:0 0 60px rgba(0,0,0,.8); }
/* --- belépés ------------------------------------------------------------ */
#account { position:fixed; inset:0; z-index:70; display:none;
align-items:center; justify-content:center; background:rgba(2,6,12,.78); }
#account.on { display:flex; }
.acc-box { width:min(400px,92vw); max-height:90vh; overflow-y:auto; padding:22px 24px;
background:linear-gradient(180deg,rgba(10,26,40,.98),rgba(6,16,26,.98));
border:1px solid rgba(90,140,175,.4); border-radius:5px;
display:flex; flex-direction:column; gap:9px; }
.acc-box h2 { margin:0; font-size:14px; font-weight:600; letter-spacing:.28em; color:#8fe0ff; }
.acc-why { margin:0; font-size:11px; line-height:1.6; color:#8fb6cc; }
/* A figyelmeztetés ELŐRE szól, nem hibaüzenetként. Aki begépelte a jelszavát,
majd kap egy elutasítást, az már elküldte. */
.acc-warn { display:none; font-size:11px; line-height:1.6; color:#ffcc80;
border-left:2px solid #e08a2a; padding:7px 10px;
background:rgba(224,138,42,.10); }
.acc-warn.on { display:block; }
.acc-box input[type=email], .acc-box input[type=password], .acc-box input[type=text] {
padding:8px 10px; font:inherit; font-size:12px; color:#dff0ff;
background:rgba(6,18,28,.9); border:1px solid rgba(90,140,175,.4); border-radius:3px; }
.acc-box input:disabled { opacity:.45; }
.acc-consent { display:flex; align-items:center; gap:8px; font-size:11px; color:#8fb6cc; }
.acc-notice summary { font-size:10px; letter-spacing:.12em; color:#4e93b8; cursor:pointer; }
.acc-notice p { margin:8px 0 0; font-size:10.5px; line-height:1.65; color:#7fa4bb; }
/* Két fül: egyszerre egy dolgot kérdezünk. A kiválasztott az, ami világít —
ugyanaz a nyelv, mint a katalógus szűrőin. */
.acc-tabs { display:flex; gap:5px; }
.acc-tab { flex:1; padding:7px; font:inherit; font-size:10px; letter-spacing:.14em;
color:#8fb6cc; background:transparent;
border:1px solid rgba(90,140,175,.45); border-radius:3px; cursor:pointer; }
.acc-tab.on { color:#04202e; background:linear-gradient(180deg,#8fe0ff,#40b6e4);
border-color:transparent; }
.acc-tab:disabled { opacity:.4; cursor:default; }
.acc-do { padding:9px; font:inherit; font-size:10px; letter-spacing:.14em;
color:#04202e; background:linear-gradient(180deg,#8fe0ff,#40b6e4);
border:0; border-radius:3px; cursor:pointer; }
.acc-do:disabled { opacity:.4; cursor:default; }
.acc-close { padding:8px; font:inherit; font-size:10px; letter-spacing:.14em;
color:#8fb6cc; background:transparent;
border:1px solid rgba(90,140,175,.45); border-radius:3px;
cursor:pointer; }
.acc-msg:not(:empty) { font-size:11px; line-height:1.6; color:#ffcc80; }
/* A TULELES GOMBJA. Ugyanaz a forma, mint a repulese, csak LILA — a hazban a
lila a hipermeghajto szine, tehat mar viseli azt a jelentest, hogy „ez mar
nem seta". Es addig szurke, amig nincs bejelentkezve senki. A tiltott
allapot NEM csak halvanyabb: a szinet is elveszti, mert egy fakobb lila meg
mindig lila, es akkor a gomb azt allitana, hogy majdnem mukodik. */
/* KET OSZTALYNEVVEL, es ez nem szepitkezes. A gomb `sm sm-fo sm-surv`, es a
`.sm-fo` kek szinezese LEJJEBB all a fajlban — azonos sulyu valasztonal a
kesobbi nyer, tehat a lila egyszeruen nem latszott. A tiltott allapot
viszont igen, mert ott a `:disabled` egy sullyal tobbet ad. Merve: a gomb
hattere `rgb(143,224,255)` volt, vagyis a kek. */
.sm.sm-surv { color:#f0e2ff; background:linear-gradient(180deg,#8f4fd6,#54219b);
border-color:transparent; box-shadow:0 0 26px rgba(120,60,200,.26); }
.sm.sm-surv:hover:not(:disabled) { color:#ffffff;
background:linear-gradient(180deg,#a468e8,#6631b4);
box-shadow:0 0 38px rgba(150,85,235,.45); }
/* A GOMB ALATTI SOR. Nem hibauzenet — egy felteltel, apro betuvel: a szurkeseg
igy nem talany, hanem utasitas. Belepve eltunik, mert akkor nincs mit
mondania. */
.sm-alcim { margin:-4px 0 2px; font-size:9px; letter-spacing:.16em;
text-align:center; color:#8a7fb0; text-transform:uppercase; }
/* A `BETA` VILAGOSABB, mint a mellette allo feltetel. Nem ugyanaz a ket
mondat: az egyik azt mondja, mit kell tenni, a masik azt, hogy ami mogotte
van, az meg keszul — es ez utobbi akkor is all, amikor az elso mar nem. */
.sm-alcim b { font-weight:400; color:#c9a8f2; }
.sm-alcim i { font-style:normal; }
.sm.sm-surv:disabled { color:#6d7a86; background:rgba(60,66,80,.42);
border:1px solid rgba(110,120,140,.34); box-shadow:none;
cursor:default; }
/* (7.62) A JATEKMODOK: a gyors csata voros (harc), a PVP-k szurkek (meg nem
keszek); a menu rejtve, amig a FLY-ra nem kattintottak */
.splash-menu[hidden] { display:none !important; }
.sm.sm-pve { color:#fff0ec; background:linear-gradient(180deg,#e0523e,#9c2618);
border-color:transparent; box-shadow:0 0 26px rgba(220,70,50,.26); }
.sm.sm-pve:hover { color:#ffffff; background:linear-gradient(180deg,#ee6a55,#b2301f);
box-shadow:0 0 38px rgba(235,85,60,.45); }
.sm.sm-ki:disabled { color:#6d7a86; background:rgba(60,66,80,.42);
border:1px solid rgba(110,120,140,.34); box-shadow:none; cursor:default; }
/* (7.62) A GYORS CSATA VEGE: VICTORY a kep kozepen */
#gyors-vege { position:fixed; inset:0; z-index:96; display:none; flex-direction:column; align-items:center; justify-content:center;
pointer-events:none; background:radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.15) 70%); }
#gyors-vege.on { display:flex; animation:gyors-be .6s ease-out; }
#gyors-vege b { font-size:clamp(42px, 9vw, 110px); font-weight:600; letter-spacing:.32em; color:#ffe9a8;
text-shadow:0 0 30px rgba(255,210,90,.7), 0 0 80px rgba(255,160,40,.35); padding-left:.32em; }
#gyors-vege span { margin-top:14px; font-size:12px; letter-spacing:.24em; color:#d8c89a; text-transform:uppercase; }
@keyframes gyors-be { from { opacity:0; transform:scale(1.15); } to { opacity:1; transform:scale(1); } }
/* --- belépés Google-fiókkal ----------------------------------------------
FEHÉR gomb, nem a ház kékje — és ez nem stílustörés. Ez az egyetlen
kezelőszerv ezen a lapon, ami nem nálunk nyit ajtót, hanem a Google-nél;
ha úgy nézne ki, mint a többi, azt állítaná, hogy nálunk maradsz. A jel a
felirat ELŐTT áll, ugyanúgy, ahogy a támogatás lapon a PayPal jele. */
.acc-or { display:flex; align-items:center; gap:10px;
color:#4e93b8; font-size:9.5px; letter-spacing:.22em; }
.acc-or::before, .acc-or::after { content:''; flex:1 1 auto; height:1px;
background:rgba(90,140,175,.3); }
.acc-google { display:flex; align-items:center; justify-content:center; gap:11px;
padding:9px 12px; font:inherit; font-size:11.5px; font-weight:600;
letter-spacing:.03em; color:#1f1f1f; background:#ffffff;
border:1px solid #dadce0; border-radius:3px; cursor:pointer; }
.acc-google:hover:not(:disabled) { background:#f1f5fa; border-color:#c4c8cc; }
.acc-google:disabled { opacity:.38; cursor:default; }
.acc-google svg { flex:0 0 auto; width:17px; height:17px; }
.acc-gnote { font-size:10px; line-height:1.65; color:#7fa4bb; }
/* A fiók nélküli út. Nem apró betűs link a sarokban: teljes értékű válasz,
ezért ugyanakkora gomb, mint a többi, és feljebb van náluk. */
.acc-anon { padding:9px; font:inherit; font-size:10px; letter-spacing:.14em;
color:#8fe0ff; background:rgba(64,182,228,.10);
border:1px solid rgba(90,180,228,.5); border-radius:3px; cursor:pointer; }
/* A NEM HASZNALHATO SOR a billentyulistaban. Ott marad, csak halkabban — egy
kezeloszerv, ami eltunik, amikor nem megy, azt sem mondja meg, hogy valaha
lehetne. */
.ck-kx.ki { opacity:.34; }
/* (8.01) az F halkan villog, ha mehet FTL-be: halvany borostyan, nem riaszto */
.ck-kx.villog .ck-keys i { animation:ftlVillog 1.6s ease-in-out infinite; }
@keyframes ftlVillog { 0%,100% { opacity:.55; background:transparent; box-shadow:none; }
50% { opacity:.95; color:#f3cf8a; background:rgba(243,207,138,.14); box-shadow:0 0 6px rgba(243,207,138,.28); } }
/* AMIT EPP FELHOZTAL — erintokepernyon. Nincs fulke, tehat nincs RES lap sem;
ez az a keves belole, ami furas kozben tenyleg kell. A gazkar folott all,
ahol amugy is odanezel, es eltunik, amint nincs mit mondania. */
#minepad, #syspad {
position:fixed; z-index:26;
display:flex; flex-direction:column; gap:2px;
padding:7px 10px; border-radius:4px;
background:rgba(6,16,26,.72); border:1px solid rgba(90,140,175,.35);
font:11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color:#cfe9f7; pointer-events:none; }
#minepad { right:10px; bottom:132px; }
/* AMI ELETBEN TART, A BAL FELSO SAROKBAN. Erintesen nincs fulke, tehat nincs
SYS lap sem — a harom szam viszont pont az, amitol egy tuleles-jatek
tuleles: oxigen, aram, uzemanyag. A sarok szabad (a HUD erintesen ki van
kapcsolva), es a szem elso helye egy kepernyon ugyanez a sarok. */
#syspad { left:10px; top:10px; }
#minepad i, #syspad i { display:flex; justify-content:space-between; gap:12px;
font-style:normal; }
#minepad b, #syspad b { font-weight:400; font-size:9.5px; letter-spacing:.08em;
color:#7fa4bb; }
#minepad em, #syspad em { font-style:normal; font-variant-numeric:tabular-nums; }
#minepad .mp-ures { color:#7fa4bb; font-size:10px; }
/* UGYANAZ A NARANCS, MINT A SYS LAPON. Egy allapot ne nezzen ki ketfelekeppen
ket kepernyon: aki latta a fulkeben, ismerje fel itt is. */
#syspad i.baj b, #syspad i.baj em { color:#ffb070; }
/* A LEZER GOMBJA BEKAPCSOLVA. Ugyanaz a narancs, mint magae a sugare — a gomb
igy azt a szint viseli, amit a kepernyon is latsz tole. */
.tbtn.on { color:#20100a; background:linear-gradient(180deg,#ffb070,#e07a35);
border-color:transparent; }
/* A KERESO SORA a jobb also muszeren. Egy sor a billentyuk alatt: ami a
radar visszahozott, vagy hogy meg semmi. */
.ck-scan { display:block; margin-top:.3em; font-size:.42em; letter-spacing:.1em;
color:var(--hud-color,#f2e6a8); font-style:normal; }
/* --- SYS: ami a hajot jaratja ---------------------------------------------
Harom tetel, mindegyik KET SORBAN: felul a nev, a vegyjel es jobbra
igazitva a szazalek, alatta a sav. Egy sorba zsufolva a harom adat
egymast szoritotta ki, es a sav — amit egy pillantasra kell tudni olvasni —
kapott a legkevesebb helyet. */
/* A TELJES SZELESSEGET HASZNALJA. A tartalom oszlopa `align-items:flex-start`,
tehat a gyerekei alapbol a sajat tartalmukra huzodnak ossze — egy savnak
viszont pont az a dolga, hogy hosszu legyen: minel tobb negyzet fer el
rajta, annal finomabban olvashato. */
/* OT SOR EGY KIJELZON (SYS, REP): a sorok koze nem kell kulon koz - a
szamjegy doboza (1,05em) magaban tartja a levegot -, es a lista teteje is
feljebb ul. Negy sorral .26em volt a koz; ot sorral a lap alja tulnyult a
kijelzo 120 kepponton (129), es a pajzs savja mar nem latszott. */
.ck-sys { display:flex; flex-direction:column; gap:0; margin:.1em 0 0;
width:100%; align-self:stretch; }
/* A SOR IS A TELJES SZELESSEG. A `stretch` elvben megadna, de merve a sor
hat keppontot vesztett a doboz szelessegehez kepest — egy `width:100%`
megmondja egyertelmuen, es a savbol igy tenyleg annyi lesz, amennyi hely
van. Merve: 112-rol 119 keppontra egy 120 keppontos oszlopban. */
.ck-sys-i { display:block; width:100%; font-style:normal; }
.ck-sys-f { display:flex; align-items:baseline; gap:.4em; }
.ck-sys-i b { font-weight:400; font-size:.44em; letter-spacing:.16em;
color:var(--hud-color,#f2e6a8); }
/* A VEGYJEL A NEV MELLETT, halkabban: az mondja meg, MIBOL van. Zolden, ha
epp az tartja a szintet. */
/* A VEGYJEL A SZAM BAL OLDALAN, jobbra tolva. Az `auto` margo ITT van, nem a
szamon: igy a nev balra marad, a ketto pedig egyutt all a jobb szelen —
ahogy egy muszeren az ertek es a mertekegysege osszetartozik. */
.ck-sys-i s { text-decoration:none; font-size:.36em; letter-spacing:.06em;
color:var(--hud-key,#7d7250); margin-left:auto; }
.ck-sys-i s.gen { color:#6ee89a; text-shadow:0 0 6px rgba(80,230,140,.55); }
/* A SZAZALEK JOBBRA. `margin-left:auto` — nem fix oszlop, mert a nevek
hossza forditasban valtozik. */
.ck-sys-i em { font-style:normal; }
.ck-sys .sg { font-size:.50em; }
/* A SAV. Tizenket negyzet, mindegyik vagy eg, vagy nem — nincs koztes
allapot, mert az egy harmadik allapotot allitana, amilyen nincs. */
/* A HIRNEV SAVJA: tiz csik balra (piros), a kozep jele, tiz jobbra (zold) */
.ck-rep { display:flex; gap:2px; margin-top:.16em; text-decoration:none; align-items:center; }
.ck-rep i { flex:1 1 0; height:.30em; border-radius:1px; background:rgba(120,170,200,.14); }
.ck-rep i.k { flex:0 0 2px; height:.5em; background:var(--hud-color,#f2e6a8); opacity:.8; }
/* a szin az ERTEKE szerint: -3 alatt piros, -3..+3 vilagosszurke, +3 folott zold */
.ck-rep i.be { background:#c9d4dc; box-shadow:0 0 4px rgba(200,215,225,.45); }
.ck-rep.rossz i.be { background:#e0574a; box-shadow:0 0 5px rgba(224,87,74,.65); }
.ck-rep.jo i.be { background:#6ee89a; box-shadow:0 0 5px rgba(80,230,140,.65); }
.ck-sys-i s.semleges { color:#c9d4dc; }
/* A HIRNEV LAPJA: nincs szam, ami szettartana a sorokat (a SYS-en a nagy
szamjegy teszi), ezert a sor maga kap annyi magassagot, mint egy SYS-sor
- a nev felul, a sav alul -, es az ot sor ugyanugy kitolti a kijelzot */
.ck-repl .ck-rep-i { display:flex; flex-direction:column; justify-content:space-between; min-height:1.5em; }
.ck-repl .ck-rep-i .ck-sys-f { align-items:center; }
.ck-sys-i s.rossz { color:#e0574a; text-shadow:0 0 6px rgba(224,87,74,.55); }
.ck-sav { display:flex; gap:2px; margin-top:.16em; text-decoration:none; }
.ck-sav i { flex:1 1 0; height:.30em; border-radius:1px;
background:rgba(125,114,80,.30); }
.ck-sav i.be { background:var(--hud-color,#f2e6a8); }
/* AZ UTOLSO EGO NEGYZET AZ IRANY. Zold, ha no vagy all; piros, ha fogy. Ez az
egyetlen jel a lapon, ami nem a mostani allapotrol szol — es egy tartalynal
epp ez a kerdes. */
.ck-sav i.jo { background:#6ee89a; box-shadow:0 0 5px rgba(80,230,140,.75); }
.ck-sav i.rossz { background:#e0574a; box-shadow:0 0 5px rgba(224,87,74,.75); }
/* ES AMIKOR ALL. Nem harmadik szin a kedvert: a muszer sajat sargaja, ami azt
mondja, hogy ez az allapot — nem tart sem felfele, sem lefele. Zoldnek
mondani hazugsag volna, pirosnak ijesztgetes. */
.ck-sav i.all { background:var(--hud-color,#f2e6a8);
box-shadow:0 0 5px rgba(242,230,168,.7); }
/* A HARC JELEI: piros haromszogek a kepernyo szelen, a kepen kivuli ellensegek fele */
#harc-jelek { position:fixed; inset:0; pointer-events:none; z-index:30; }
#harc-jelek .hj { position:absolute; left:0; top:0; width:0; height:0; margin:-9px 0 0 -9px;
border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:18px solid #ff5040;
filter:drop-shadow(0 0 4px rgba(255,80,64,.8)); }
/* (7.58) a zsakmanykockak nyilai: a kocka szinevel, kisebben */
#harc-jelek .hj.targy { border-left-color:#3dff6a; filter:drop-shadow(0 0 4px rgba(61,255,106,.8)); transform-origin:center; }
#harc-jelek .hj.kredit { border-left-color:#ffd23a; filter:drop-shadow(0 0 4px rgba(255,210,58,.8)); }
#harc-jelek .hj.anyag { border-left-color:#f2f6ff; filter:drop-shadow(0 0 4px rgba(242,246,255,.8)); }
#harc-jelek .hj.adatmag { border-left-color:#5fd7ff; filter:drop-shadow(0 0 4px rgba(95,215,255,.8)); }
/* (7.58) a kalozbazis a katalogusban: pirosas */
.cat-row.kaloz b { color:#ff8a78; }
.cat-row.kaloz i { color:#d9604e; }
/* A HAJOTEST ES A PAJZS: ket sav egymas alatt, a test narancs, a pajzs kek */
.ck-hull .ck-sav i.be { background:#ff9a3c; }
.ck-pajzs .ck-sav i.be { background:#4fb8ff; }
.ck-pajzs .ck-sav { margin-top:.12em; }
.ck-sys-i.baj b, .ck-sys-i.baj em { color:#ffb070; }
.ck-sys-i.ures b, .ck-sys-i.ures em { color:#e0574a; }
/* --- RES: a rakomany ------------------------------------------------------
EGY SORBAN, HAROM OSZLOPBAN: a vegyjel FELSO INDEXKENT a szam bal felso
sarkaban, aprobb betuvel, aztan maga a szam `00.0` alakban.
Miert nem fert ki eddig: a racs a sajat tartalmara huzodott ossze (a
tartalomoszlop `align-items:flex-start`), tehat harom oszlop huszonnyolc
keppontos cellakat kapott — abba a jel es a harom szamjegy egymas mellett
tenyleg nem fert be, es a szam tordelt. Nem a betumerettel volt baj, hanem
azzal, hogy a racs nem hasznalta a rendelkezesre allo szelesseget. A
`width:100%` ezt oldja meg, es onnantol harom oszlop is bo. */
/* A SORMAGASSAG NEM VAGHATJA EL A SZAMOT. Nyolcvannyolc szazalekos sorban a
hetszegmenses szamjegy ALJA levagodott — ott volt, csak nem latszott, es a
`0` egy `U`-nak nezett ki. Van huszonnyolc keppont szabad hely a panel
aljan; ebbol boven telik arra, hogy a szam egeszben legyen. */
/* A RACS KITOLTI A PANELT FUGGOLEGESEN IS. Ot sor hetvennyolc keppontot vitt
egy szazhusz keppontos helyen: a maradek harmincnegy ott allt uresen a
muszer aljan, a sorok pedig osszezsufolva felul. A `space-between` szetosztja
a kulonbseget a SOROK KOZE — nem a betumeret no, hanem a levego. */
.ck-res { display:grid; grid-template-columns:repeat(3,1fr);
grid-auto-rows:1.06em; gap:.06em .22em; margin:.16em 0 .1em;
width:100%; align-self:stretch;
/* OT KEPPONTTAL SZUKEBB SORKOZ. A `space-between` az EGESZ maradek
helyet szetosztotta; ez a kis also margo annyit vesz vissza
belole, amennyivel a sorok kozelebb kerulnek egymashoz. */
flex:1 1 auto; min-height:0; align-content:space-between;
padding-bottom:20px; }
.ck-res-i { display:flex; align-items:center; gap:.12em;
font-style:normal; opacity:.38; line-height:1;
height:1.06em; overflow:hidden; }
.ck-res-i.van { opacity:1; }
/* A JEL FELSO INDEX: a szam bal felso sarkaban ul, a tetejevel egy vonalban.
Nem tordelhet — az `U235` negy karakter, es ket sorba torve a cella
magasabb lenne a tobbinel. */
/* A JEL FIX SZELES. Sajat szelessegen a `FE` ket karakter, az `U235` negy —
es akkor minden sorban MASHOL kezdodik a szam, tehat a szemnek soronkent
ujra meg kell keresnie. Egy muszeren a szamok egy oszlopban allnak. */
/* A JEL DOBOZA TAGABB, ES ZSUGORODHAT IS.
Egy flex-elem alapbol NEM megy a tartalma ala (`min-width:auto`), tehat a
negy karakteres `U235` szethuzta a sajat dobozat, es a szamot arrebb tolta —
ezert allt az also sor mashol, mint a tobbi. A `min-width:0` engedi, hogy a
doboz tartsa a megadott szelesseget, a tagabb alap pedig azt, hogy ne
kelljen semmit levagni hozza. */
/* A JEL ALLVA, A SZAM MELLETT.
Felso indexkent apro maradt: a `.30em` epp az a meret, ahol egy `H2O` mar
csak folt. Elforgatva viszont a magassaga a szam magassaga lesz, a
SZELESSEGE pedig egyetlen betumagassag — vagyis nagyobb betuvel is
keskenyebb, mint fekve volt.
ES MINDEN JEL UGYANOLYAN SZELES. Ez oldja meg magatol azt, amit fekve egy
`min-width:0`-val kellett kikenyszeriteni: allva az `U235` nem szelesebb a
`FE`-nel, csak hosszabb — tehat a szam minden sorban ugyanott kezdodik.
A `vertical-rl` + `rotate(180deg)` az, ami ALULROL FELFELE olvastat; a
sima `vertical-rl` fejjel lefele forgatna a betuket. */
.ck-res-i b { flex:0 0 auto; font-weight:400; font-size:.40em;
writing-mode:vertical-rl; transform:rotate(180deg);
letter-spacing:.02em; line-height:1; white-space:nowrap;
/* A NEGY KARAKTERES `U235` sem lehet magasabb a sornal: a cella
magassaga adott, es egy kilogo jel a kovetkezo sorba erne. */
max-height:2.4em; overflow:hidden;
color:var(--hud-key,#7d7250); }
.ck-res-i.van b { color:var(--hud-color,#f2e6a8); }
/* A HAROM LETFONTOSSAGU ANYAG NULLAN: a szam eg, a jel piros. Egy
elhalvanyodo cella azt mondja, hogy nem szamit; ezeknel epp forditva —
a nulla itt nem hiany, hanem visszaszamlalas. */
.ck-res-i.hiany b { color:#e0574a; text-shadow:0 0 6px rgba(224,87,74,.6); }
.ck-res-i em { flex:0 0 auto; font-style:normal; white-space:nowrap; }
.ck-res .sg { font-size:.46em; }
/* A TIZEDESPONT LATSZIK IS. Ekkora szegmensmereten az alap pont egy hajszal
volt: ott volt, csak nem lehetett eszrevenni. */
.ck-res .sg-dot { width:.30em; }
.ck-res .sg-dot::after { width:.19em; height:.19em; }
.ck-res-i.teli em { animation:cw-teli 1.1s steps(1,end) infinite; }
@keyframes cw-teli { 0%,55% { opacity:1; } 56%,100% { opacity:.28; } }
/* A TILTOTT LAP. Nem az „epp nem ez az aktiv" halvanysaga — az mar a jel
alapallapota —, hanem ennel is kevesebb, es a mutato sem valtozik fole:
semmi nem igeri, hogy kattintani lehetne rajta. */
.ck-tab.tilt { opacity:.34; cursor:default; text-decoration:line-through;
text-decoration-thickness:1px; }
.ck-tab.tilt:hover { color:var(--hud-key,#7d7250); }
/* --- gördítősáv -----------------------------------------------------------
A böngésző alapértelmezett sávja világosszürke, és minden sötét panelen úgy
ül, mint egy idegen test. Ugyanaz a kék, ugyanaz a vékony vonalvezetés,
mint a HUD-on. (WebKit-szintaxis és a szabványos `scrollbar-*` egyszerre:
a kettő különböző böngészőket fed le, és nem ütik egymást.) */
* { scrollbar-width:thin; scrollbar-color:rgba(90,180,228,.45) transparent; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:rgba(8,20,32,.55); border-radius:5px; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,rgba(110,200,240,.55),
rgba(50,130,180,.55));
border-radius:5px;
border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,rgba(150,225,255,.85),
rgba(70,165,215,.85));
background-clip:padding-box;
border:2px solid transparent; }
::-webkit-scrollbar-corner { background:transparent; }
/* --- nyitóképernyő: fiók és a legutóbbi változás ------------------------- */
/* Alacsony ablakban a bal oszlop gorgetheto legyen, ne vagodjon le az alja.
A FUGGOLEGES IGAZITAS viszont mar nem kozep: a menu bal FELUL all, es ott
is marad, akkora is az ablak. Ez a sor korabban felulirta a fenti
`flex-start`-ot — egy `justify-content` ket helyen ket kulonbozo ertekkel
mindig az utolso szerint dol el, es az nem az volt, amit akartunk. */
.splash-text { overflow-y:auto; }
.splash-account { display:flex; flex-direction:column; gap:10px; }
.acc-lead { font-size:12px; line-height:1.7; color:#7fa6bd; }
.acc-lead b { color:#cdf3ff; font-weight:600; }
.acc-btns { display:flex; gap:8px; flex-wrap:wrap; }
.acc-btns button { padding:8px 16px; font:inherit; font-size:10px; letter-spacing:.16em;
color:#8fb6cc; background:transparent;
border:1px solid rgba(90,140,175,.45); border-radius:3px;
cursor:pointer; transition:color .15s, border-color .15s; }
.acc-btns button:hover { color:#cdf3ff; border-color:rgba(140,220,255,.7); }
/* Aki be van lépve, annak a neve áll ott — az nem gomb-szerű, hanem állapot. */
.acc-btns button.on { color:#8fe6ff; border-color:rgba(90,180,228,.6);
background:rgba(64,182,228,.10); }
/* Egyetlen sor: mikor volt, és hol lehet elolvasni. A szöveg maga a
verziótörténetben van — 1920-as képernyőn is görgetni kellett tőle a bal
oszlopot, és egy nyitóképernyő, amit görgetni kell, nem nyitóképernyő. */
.splash-update { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
border-left:2px solid rgba(90,180,228,.35); padding:2px 0 2px 14px; }
.upd-h { font-size:9px; letter-spacing:.22em; color:#3f7d9c; }
.upd-v { font-size:11px; letter-spacing:.10em; color:#8fb6cc; }
.upd-open { padding:0; font:inherit; font-size:10px; letter-spacing:.14em;
color:#5a8faa; background:none; border:0; cursor:pointer;
border-bottom:1px solid rgba(90,140,175,.4); }
.upd-open:hover { color:#8fe6ff; border-bottom-color:rgba(143,230,255,.6); }
/* A START alatti sor. Ugyanaz a mondat, ami eddig a szöveg közt állt — csak
most ott van, ahol a szem amúgy is jár. */
/* A START saját dobozának a KÖZEPÉRE, nem a bal szélére: a felirat alatt
álló mondat csak akkor tartozik hozzá, ha a tengelye is közös vele. */
.art-start { text-align:center; }
.art-start em { display:block; margin-top:14px; font-style:normal;
font-size:11px; letter-spacing:.14em; color:#7fb8d8;
text-shadow:0 0 10px rgba(0,0,0,.9);
text-indent:.14em; text-align:center; }
/* A SIGN IN a kettő közül az elsődleges: aki már járt itt, arra kattint.
Ezért kitöltött — a CREATE ACCOUNT marad körvonalas, mert az a ritkább út. */
#splash-signin { color:#04202e; background:linear-gradient(180deg,#8fe0ff,#40b6e4);
border-color:transparent; font-weight:600; }
#splash-signin:hover { color:#02161f;
background:linear-gradient(180deg,#b6ecff,#5ac8f0);
border-color:transparent; }
/* Belépve viszont NEM gomb többé, hanem állapot — a `.on` szabály viszi el. */
#splash-signin.on { color:#8fe6ff; background:rgba(64,182,228,.10);
border:1px solid rgba(90,180,228,.6); font-weight:400; }
/* --- jogi lábléc ---------------------------------------------------------
Három külön gondolat, három külön blokkban: KI a tulajdonos, MIT nem szabad,
és mi az, ami NEM a miénk. Egyetlen bekezdésbe gyömöszölve a harmadik úgy
olvasódna, mintha a three.js-t is magunkénak mondanánk. */
.splash-legal { display:flex; flex-direction:column; gap:9px; max-width:78ch; }
.legal-rights { color:rgba(190,205,225,.52); line-height:1.75; }
.legal-rights b { color:rgba(215,230,250,.82); }
.legal-third { color:rgba(190,205,225,.42); line-height:1.7; font-size:10.5px; }
/* --- összecsukott jogi szöveg -------------------------------------------- */
/* A jogokat ki KELL mondani, de a nyitóképernyő nem jogi dokumentum. Egy gomb
áll ott; aki keresi, egy kattintással megkapja az egészet. */
.legal-more { align-self:flex-start; padding:5px 12px; font:inherit;
font-size:10px; letter-spacing:.14em; color:rgba(190,205,225,.7);
background:transparent; border:1px solid rgba(120,150,180,.32);
border-radius:3px; cursor:pointer; }
.legal-more:hover { color:#cfe4ff; border-color:rgba(160,200,235,.55); }
.legal-fold { display:flex; flex-direction:column; gap:9px; }
/* A `hidden` attributumot egy sajat `display` szabaly FELULIRJA — a doboz
ott maradt 412 pixel magasan, csak lathatatlanul, es tovabb tolta a
nyitokepernyot a kepernyo alja ala. Ez a sor teszi vissza a rendet. */
.legal-fold[hidden] { display:none; }
/* --- nyelvválasztó --------------------------------------------------------
A német és a magyar zászló SZÁNDÉKOSAN halvány és letiltott: a szövegek még
nincsenek lefordítva. Egy gomb, ami nem csinál semmit, rosszabb, mint egy,
ami megmondja, hogy még nem jött el az ideje. */
.lang-row { display:flex; align-items:center; gap:8px; }
.lang { display:flex; align-items:center; gap:6px; padding:4px 8px;
background:transparent; border:1px solid transparent; border-radius:3px;
cursor:pointer; font:inherit; }
.lang svg { width:22px; height:14px; border-radius:1.5px; display:block;
box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.lang i { font-style:normal; font-size:9.5px; letter-spacing:.14em; color:#5a8faa; }
.lang.on { border-color:rgba(90,180,228,.5); background:rgba(64,182,228,.10); }
.lang.on i { color:#8fe6ff; }
.lang:disabled { opacity:.30; cursor:default; }
.lang-note { font-size:9.5px; letter-spacing:.12em; color:#2f6480; }
/* --- indítás fiók nélkül --------------------------------------------------
Ugyanaz, mint a START a képen. Ez a lap legfontosabb gombja, tehát ez a
legerősebb — a fiókos gombok mellette másodlagosak. */
#splash-fly:not(.sm) { align-self:flex-start; padding:12px 26px; font:inherit;
font-size:12px; letter-spacing:.20em; font-weight:600;
color:#04202e; background:linear-gradient(180deg,#8fe0ff,#40b6e4);
border:0; border-radius:4px; cursor:pointer;
box-shadow:0 0 26px rgba(90,200,255,.22);
transition:transform .15s ease, box-shadow .15s ease; }
#splash-fly:not(.sm):hover { transform:translateY(-1px);
box-shadow:0 0 38px rgba(90,200,255,.42); }
/* Két kitöltött gomb egymás alatt zavaros. A SIGN IN mostantól körvonalas —
az elsődleges az, amelyik repülni visz. */
#splash-signin { color:#8fb6cc; background:transparent;
border:1px solid rgba(90,140,175,.45); font-weight:400; }
#splash-signin:hover { color:#cdf3ff; background:transparent;
border-color:rgba(140,220,255,.7); }
/* --- A NYITÓKÉPERNYŐ MENÜJE ----------------------------------------------
Öt gomb egymás alatt, EGYFORMA méretben. Egy menüben a méret rangot
jelent: ha minden sor másképp néz ki, mindegyik azt állítja magáról, hogy
ő a fontos. Itt egy dolog fontos — a repülés —, és azt a SZÍN mondja meg. */
/* MINDEN GOMB EGYFORMA, ES MIND UGYANOTT KEZDODIK.
A tamogatas-gombok elott ott all a PayPal jele, ami beljebb tolna oket a
menuhoz kepest — ket kulonbozo bal szel pedig ket kulonbozo listanak
latszik. Ezert a MENU kap ugyanakkora ures helyet a bal oldalan: nem a
jelet vesszuk el, hanem a tobbinek is odaadjuk a helyet.
A ket meret egy helyen all, hogy ne tudjon szetcsuszni. */
:root { --pp-jel: 30px; --pp-koz: 10px; --gomb-sz: 290px; }
.splash-menu { display:flex; flex-direction:column; align-items:stretch;
gap:8px; margin:22px 0 10px;
/* A belso szelesseg a GOMB merete; a bal oldali ures hely
ezen KIVUL van, hogy a gomb pontosan akkora legyen, mint a
tamogatas-gombok. */
box-sizing:content-box; width:var(--gomb-sz);
padding-left:calc(var(--pp-jel) + var(--pp-koz)); }
.sm { display:block; width:100%; box-sizing:border-box;
padding:12px 18px; border-radius:4px;
font:inherit; font-size:11.5px; letter-spacing:.20em; font-weight:600;
text-align:center; text-decoration:none; cursor:pointer;
color:#9ec6dc; background:rgba(20,52,74,.42);
border:1px solid rgba(96,150,185,.42);
transition:color .15s ease, background .15s ease,
border-color .15s ease, transform .12s ease; }
.sm:hover { color:#e6f7ff; background:rgba(34,84,116,.6);
border-color:rgba(150,215,250,.75); transform:translateY(-1px); }
/* EGY MENUPONT JELLEL. A belepes gombja elott ott all a Google jele, ugyanott
es ugyanakkoran, mint lentebb a PayPal jele — ugyanaz a mondat: a jel azt
mondja meg, MIVEL lepsz be, a gomb azt, hogy mit csinalsz.
A `.splash-menu` bal oldalan pontosan ennyi ures hely all, hogy a menu
gombjai egy vonalban legyenek a tamogatas-gombokkal; ez a sor azt a helyet
veszi vissza, tehat a jel a PayPal jeleivel kerul egy fuggolegesbe, a gomb
bal szele pedig egy pixelt sem mozdul. */
.sm-sor { display:flex; align-items:center; gap:var(--pp-koz);
margin-left:calc(-1 * (var(--pp-jel) + var(--pp-koz))); }
.sm-sor .sm { flex:0 0 auto; width:var(--gomb-sz); }
/* A jel a PayPal-jellel AZONOS meretu. Fenyerot nem emelunk rajta: a PayPal
jele sotetkek, azt deriteni kell a sotet lapon — ez a negy szin magatol
vilagit. A derengés viszont ugyanaz, hogy a ketto egy csaladba tartozzon. */
/* TIZENOT SZAZALEKKAL KISEBB, DE UGYANAKKORA HELYEN. A doboz marad
`--pp-jel`, es a jel azon BELUL kicsinyedik: igy a ket jel kozeppontja egy
fuggolegesben marad, es a gomb bal szele sem mozdul. Ha a szelesseget
vennenk el, a flex-sor osszehuzodna, es a belepes gombja negy keppontot
csuszna balra a tobbi menuponthoz kepest — egy ekkora eltolodas pont az a
fajta, amit nem lehet megnevezni, csak erezni, hogy valami nem all jol. */
.sm-mark { flex:0 0 auto; width:var(--pp-jel); height:auto;
transform:scale(.85);
filter:drop-shadow(0 0 9px rgba(170,225,255,.45)); }
/* A repülés gombja ugyanakkora, csak kitöltött — ez az egy, amiért a lap van. */
.sm-fo { color:#04202e; background:linear-gradient(180deg,#8fe0ff,#40b6e4);
border-color:transparent; box-shadow:0 0 26px rgba(90,200,255,.22); }
.sm-fo:hover { color:#04202e; background:linear-gradient(180deg,#a5e8ff,#4ec2ee);
border-color:transparent; box-shadow:0 0 38px rgba(90,200,255,.42); }
/* A verzió a mottó alatt, ugyanabban a hangban, csak halkabban. */
.sub-ver { margin-top:5px; font-size:10.5px; color:#3f6d88; }
/* (7.66) az implementacio ideje a verzio alatt, aprobetuvel */
.sub-ver small { display:block; margin-top:2px; font-size:8.5px; letter-spacing:.08em; color:#2f5670; }
/* --- BETÖLTÉS ------------------------------------------------------------
Amíg tölt, a bal oldalon CSAK a cím áll és egy vékony sáv; a jobb oldalon
a kép, START nélkül. Nincs mit elolvasni és nincs mit megnyomni, tehát ne
is látszódjon semmi, amit el lehetne olvasni vagy meg lehetne nyomni —
egy tele nyitóképernyő, amiből a fele nem működik, rosszabb, mint egy
üres, ami dolgozik.
A REJTÉS `visibility`-vel megy, nem `display`-jel: így a szöveg HELYE
megmarad, és amikor előjön, nem rendezi újra a lapot maga alatt. */
/* A NYELVVALASZTO MAR TOLTES KOZBEN IS OTT VAN. Nem a jatekhoz tartozik,
hanem a laphoz: nem kell hozza semmi, amit meg toltunk, es aki nem
angolul olvas, annak az elso masodperctol jol jon. */
#splash.tolt .splash-text > *:not(.splash-brand):not(#splash-load):not(.lang-row) {
visibility:hidden; }
#splash.tolt .art-start { visibility:hidden; }
/* Előbukkanás: nem külön animáció, csak egy rövid áttűnés. A cím és a sáv
a helyén marad, a többi köré szelíden megérkezik. */
#splash .splash-text > *, #splash .art-start { transition:opacity .45s ease; }
#splash.tolt .splash-text > *:not(.splash-brand):not(#splash-load):not(.lang-row),
#splash.tolt .art-start { opacity:0; }
/* A CÍM ÚGY ÉPÜL FEL, HOGY ELŐSZÖR NINCS SEMMI.
Aztán balról jobbra egyesével bekapcsolnak a betűhelyek: mindegyik pörgeti a
SAJÁT SZÓ betűit, és a maga idejében beáll a helyes. A cím kiolvasása maga a
mozgás vége.
A LEGELSŐ PILLANAT IS ÜRES. A jelölésben áll egy tartalék „COREWARD", hogy a
JS indulása előtt se legyen üres a lap — de épp ezért az VILLANT FEL a
mozgás előtt, és a néző előbb olvasta el a címet, mint ahogy felépült.
Ezért a cím alapból LÁTHATATLAN, és a `cw-el`-t a `cimBetuk` teszi rá,
miután a betűhelyeket felépítette. Hogy egy elszálló JS ne hagyja
névtelenül a lapot, egy négy másodperces vészkijárat CSS-ből mégis
megmutatja — ahhoz nem kell futó kód.
AMI A HELYET TARTJA, AZ A VALÓDI BETŰ (`.cw-r`) — egyedül az áll a
szövegfolyamban. A pörgő betűk föléje vannak emelve, kivéve a
sorbaszedésből: a cím szélessége nem mozdul, és a betöltés sávja
(`--sl-w`) sem ugrál vele.
OPACITÁSSAL VÁLTANAK, nem szövegcserével. A betöltés hosszú szinkron
szakaszokban dolgozik; egy időzítőből hajtott szövegcsere ezeken akadozna és
összecsúszna. A CSS-animáció az idővonalról megy: ha a böngésző nem rajzol
egy ideig, utána a HELYES képnél veszi fel, nem ott, ahol abbahagyta. */
#app-name { visibility:hidden; animation:cw-veszkijarat 0s linear 4s forwards; }
#app-name.cw-el { visibility:visible; animation:none; }
@keyframes cw-veszkijarat { to { visibility:visible; } }
#app-name .cw-b { display:inline-block; position:relative; }
#app-name .cw-b > i { font-style:normal; display:inline-block; }
/* A RAGYOGÁS. Négy rétegben: egy éles, majdnem fehér perem közvetlenül a betű
élén, aztán egyre tágabb és halványabb udvarok. Ez a négy együtt adja azt,
hogy a betű VILÁGÍT — egyetlen nagy elmosás csak ködöt tesz mögé, a betű
élét pedig épp az élesíti ki, ami rajta ül. */
#app-name .cw-r {
text-shadow:0 0 3px rgba(226,250,255,.95), 0 0 14px rgba(140,225,255,.9),
0 0 44px rgba(95,205,255,.65), 0 0 90px rgba(70,180,255,.35);
}
/* A PÖRGŐ BETŰ. Halványabb és hidegebb, mint a beállt: ami még keres, az ne
látsszon késznek. */
#app-name .cw-g {
color:#93cfe6;
text-shadow:0 0 3px rgba(200,240,255,.8), 0 0 12px rgba(120,205,245,.7),
0 0 34px rgba(80,180,235,.4);
}
/* A VALÓDI BETŰ. Végig ott van, csak láthatatlanul — a saját idejében gyúl ki. */
#app-name .cw-r { opacity:0; animation:cw-be .55s ease-out both;
animation-delay:var(--t,0s); }
/* EGY PÖRGETETT BETŰ. A `--d` a kezdete, a `--k` a hossza. */
#app-name .cw-g { position:absolute; inset:0; display:block;
font-style:normal; letter-spacing:0; text-align:center;
opacity:0; pointer-events:none;
animation:cw-vill var(--k,.07s) linear var(--d,0s) 1 normal none; }
/* KEMÉNY BE-KI. A betű a saját idejében teljes erővel áll, utána eltűnik — nem
halványul, mert az átfedő halványulásból kettő látszana egyszerre, és abból
mosás lesz, nem pörgés. A `none` kitöltés az, ami előtte ÉS utána is a lap
alap `opacity:0`-jára hagyja — ezért üres a betűhely, amíg nem kerül sorra. */
@keyframes cw-vill { from, to { opacity:.78; } }
/* A BEÁLLÁS. Egy jóval nagyobb villanás, ami visszaesik a nyugalmi
ragyogásra: EZ mondja meg, hogy ez a betű most már a helyén van — a szem a
fényváltásra kapja fel a fejét, nem arra, hogy egy jel megállt. */
@keyframes cw-be {
from { opacity:0; transform:scale(.82);
text-shadow:0 0 8px rgba(255,255,255,1), 0 0 38px rgba(215,248,255,1),
0 0 110px rgba(130,220,255,1), 0 0 200px rgba(80,190,255,.8); }
38% { opacity:1; transform:scale(1.09);
text-shadow:0 0 6px rgba(255,255,255,1), 0 0 30px rgba(205,246,255,1),
0 0 92px rgba(120,215,255,.95), 0 0 170px rgba(75,185,255,.6); }
to { opacity:1; transform:scale(1);
text-shadow:0 0 3px rgba(226,250,255,.95), 0 0 14px rgba(140,225,255,.9),
0 0 44px rgba(95,205,255,.65), 0 0 90px rgba(70,180,255,.35); }
}
/* KESZ: A CIM AZONNAL OTT VAN. Ez a kapcsolo ket helyrol jon — a betoltes
vegerol (main.js, `cimKesz`), ha az elobb vegzett, mint a cim; es attol,
aki nem ker a mozgasbol. Mindketto ugyanazt kivanja: ne folytatodjon. */
#app-name.cw-kesz .cw-r { opacity:1; animation:none; transform:none; }
#app-name.cw-kesz .cw-g { display:none; }
@media (prefers-reduced-motion: reduce) {
#app-name { visibility:visible; animation:none; }
#app-name .cw-r { opacity:1; animation:none; transform:none; }
#app-name .cw-g { display:none; }
}
/* A betöltés blokkja. Csak akkor van, amíg tart. */
/* A SZÉLESSÉGET A CÍM ADJA. A `--sl-w` értékét a main.js írja be a
`COREWARD` felirat mért szélességéből, és átméretezésre újraszámolja: egy
`clamp()`-ból számolt betűméretet CSS-ből nem lehet utolérni. Amíg nincs
mérés, a régi 360 képpont az alap. */
#splash-load { display:block; margin:18px 0 6px;
width:var(--sl-w,360px); max-width:100%; }
/* KÉSZ: EL IS TŰNIK. A menük fölött egy betöltési napló már nem információ,
hanem maradék — a részletes lista ilyenkor a böngésző konzolján van. */
#splash:not(.tolt) #splash-load { display:none; }
.sl-sav { height:2px; background:rgba(120,190,225,.16); overflow:hidden; }
.sl-sav > i { display:block; height:100%; width:0;
background:linear-gradient(90deg,#2b7ea6,#8fe0ff);
transition:width .4s ease; }
/* A sáv fölött egy lassan végigfutó csillanás: ettől él a kép akkor is,
amikor egy hosszabb lépés miatt a százalék percekig nem mozdul. */
.sl-sav { position:relative; }
.sl-sav::after { content:''; position:absolute; inset:0; width:34%;
background:linear-gradient(90deg,transparent,
rgba(160,225,255,.55),transparent);
animation:slfut 1.6s linear infinite; }
@keyframes slfut { from { transform:translateX(-120%); }
to { transform:translateX(400%); } }
.sl-sor { display:flex; justify-content:space-between; gap:12px;
margin-top:7px; color:#2f6480; font-size:11px; letter-spacing:.1em; }
.sl-n { color:#4d90b4; font-variant-numeric:tabular-nums; }
/* A HARMINC SOROS KONZOL. A magassága FIX — harminc sor akkor is, ha még
csak kettő van kiírva —, különben minden új sornál megugrik a
nyitóképernyő, és az alatta álló gombok elcsúsznak a kurzor alól. A sorok
nem tördelnek: egy fájlnév inkább kifusson a jobb szélen, mint hogy két
sort vigyen el.
ALACSONY KÉPERNYŐN A TETEJE ESIK LE, nem az alja. A `max-height` korlátoz,
a `flex-end` pedig a szöveget az aljához tolja — vagyis a LEGFRISSEBB
sorok maradnak, a legrégebbiek csúsznak ki fölülre. Ez így is FIFO; a
fordítottja (az alja levágva) épp azt tüntetné el, amit látni akarunk. */
.sl-konzol { margin:8px 0 0; padding:6px 8px; height:calc(30 * 1.35em);
max-height:52vh; box-sizing:content-box;
display:flex; align-items:flex-end;
overflow:hidden; white-space:pre;
font:10px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
letter-spacing:0; color:#2a5a74;
background:rgba(8,20,30,.55);
border:1px solid rgba(120,190,225,.10);
font-variant-numeric:tabular-nums; }
/* A betöltési sor a betöltés idején hasznos; üresen ne foglaljon helyet. */
#loadstate:empty { display:none; min-height:0; }
/* --- a fő kijelző parancssora -------------------------------------------
A fülke legnagyobb műszere. Felül az, amit MEG lehet nyomni; alatta az,
amit épp látni kell. A betűméretet a Cockpit._illeszt() húzza le, ha a
tartalom nem férne a trapézba — inkább kisebb, mint levágva. */
/* HAROM PARANCS EGY SORBAN, a monitor tetejen. A feliratok szelessege NEM
fix: mas nyelven hosszabbak lesznek. Mindegyik ugyanannyi helyet kap, es ha
ott sem fer ki, harom pontban vegzodik — nem tordel masodik sorba, es nem
tolja le a tobbi adatot a kepernyorol. */
.ck-cmd { display:flex; justify-content:space-between; align-items:center;
gap:8px; width:100%; margin-bottom:.30em; }
.ck-cmd i { display:inline-flex; align-items:center; gap:5px; min-width:0;
flex:1 1 0; font-style:normal;
font-size:.52em; letter-spacing:.14em; color:var(--hud-key,#7d7250); }
.ck-cmd i s { text-decoration:none; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; min-width:0; }
.ck-cmd i b { flex:0 0 auto; display:inline-block; padding:1px 4px; font-weight:600;
font-size:.92em; letter-spacing:.06em;
color:var(--hud-color,#f2e6a8);
border:1px solid currentColor; border-radius:2px; opacity:.75; }
.ck-cmd i.on { color:var(--hud-color,#f2e6a8); }
.ck-cmd i.on b { opacity:1; background:rgba(242,230,168,.16); }
.ck-mainrow { display:flex; justify-content:center; align-items:baseline; gap:10px;
width:100%; }
.ck-mainrow .k { display:inline; }
.ck-mainrow .v { display:inline; }
/* --- égitest-dosszié a fülkében ------------------------------------------
A nagy középső műszer átveszi a szöveget. NÉGY SOR látszik: a panel nem
magasabb ennél, és ami efölött van, azt eddig némán levágta volna. */
.ck-info { position:relative; display:flex; flex-direction:column;
width:100%; height:100%; text-align:left; }
.ck-info-h { display:flex; justify-content:space-between; align-items:baseline;
gap:10px; width:100%; margin-bottom:.25em; }
/* A NEV UGYANAKKORA, MINT A SZOVEG. Ket betumeret egy muszeren ok nelkul
volt ketto: a nev kisebb volt, mint az alatta futo mondat. A kozos
betumeretet az InfoPanel `_meretez()`-e allitja a `.ck-info`-n, ot sorra
(egy nev + negy szoveg); itt mar csak ratamaszkodunk. */
.ck-info-h b { font-size:1em; letter-spacing:.16em; font-weight:600;
color:var(--hud-color,#f2e6a8); }
.ck-info-h i { font-style:normal; font-size:.46em; letter-spacing:.18em;
color:var(--hud-key,#7d7250); }
/* --- A VARAKOZAS JELE ------------------------------------------------------
Egy bejegyzes megiratasa fel perc. Addig a panel keszen all, a szoveg
ki van gepelve, es semmi nem tortenik — es pontosan ez a szakasz nez ki
elromlott muszernek, mert egy allo kepernyorol nem lehet megmondani, hogy
dolgozik-e valaki mogotte. Ez a hat kis szegmens azt mondja el, amit a
szoveg nem tud: hogy MOST is tart.
Az allapotmezo GYEREKE, tehat annak a .46em-jere tamaszkodik — egy
fuggetlen betumeret ket helyen kulon allitando szam lenne. */
.ck-info-s { display:inline-flex; align-items:center; gap:.6em; }
.ck-info-var { display:none; gap:2px; text-decoration:none; }
.ck-info-var.on { display:inline-flex; }
/* EM, NEM KEPPONT. A fulke betumerete a panel meretebol szarmazik (lasd
InfoPanel `_meretez`), es egy fix keppontos szegmens egy nagy kepernyon
porszem, egy kicsin viszont ott all a szoveg felett. Merve: 2 keppontos
magassaggal a jel a mellette allo szoveg harmadaig ert. */
.ck-info-var i { display:block; width:.3em; height:.95em; border-radius:1px;
background:var(--hud-key,#7d7250); transform-origin:center;
animation:ck-var 1.15s ease-in-out infinite; }
.ck-info-var i:nth-child(2) { animation-delay:.09s; }
.ck-info-var i:nth-child(3) { animation-delay:.18s; }
.ck-info-var i:nth-child(4) { animation-delay:.27s; }
.ck-info-var i:nth-child(5) { animation-delay:.36s; }
.ck-info-var i:nth-child(6) { animation-delay:.45s; }
/* A hullam VEGIGFUT, aztan szunet: egy megallas nelkuli villogas idegesito
egy olyan kijelzon, ami fel percig lathato. A 60% utani nyugalom az, ami
ezt lüktetessé teszi ahelyett, hogy vibralna. */
@keyframes ck-var {
0%, 60%, 100% { transform:scaleY(.5); background:var(--hud-key,#7d7250); }
22% { transform:scaleY(1); background:var(--hud-color,#f2e6a8); }
}
/* AKI NEM LATNA SZIVESEN A MOZGAST. A rendszer beallitasa nem javaslat: a
mozgo kep egyeseknel szedulest okoz. A jel ilyenkor all, de EG — az
informaciot nem vesszuk el, csak a mozgast. */
@media (prefers-reduced-motion: reduce) {
.ck-info-var i { animation:none; transform:scaleY(.8);
background:var(--hud-color,#f2e6a8); opacity:.75; }
}
/* Pontosan három sor magas. A `line-height` és a magasság egy helyről jön,
hogy a kettő ne tudjon szétcsúszni. */
/* NEGY SOR, AMI AZ ALJAIG ER. Negy sor csak ugy fert ki, ha a betu akkorara
zsugorodott, hogy a muszert oda kellett hajolni elolvasni — egy kijelzo,
amit nem lehet elolvasni, nem kijelzo.
A magassagot NEM ITT szabjuk meg. Egy `height:calc(3 * 1.34em)` azt kerne,
amit a panel nem biztos hogy tud adni: a fulke rajzan a doboz 37 keppont
magas, a keres 44 volt, es a rugalmas oszlop egyszeruen osszenyomta —
a harom sorbol ket sornyi hely lett. Forditva helyes: a doboz kapja meg a
MARADEK helyet (`flex:1 1 0`, tehat a tartalom nem szol bele), a betumeret
pedig ehhez igazodik, hogy pontosan LATSZO_SOR sor toltse ki. A szamitas az
InfoPanel `_meretez()`-eben van, mert csak ott merheto a valodi magassag.
A sorok szama ott all (LATSZO_SOR): negy sor kisebb betut jelent ugyanabban
a dobozban, harom nagyobbat. */
.ck-info-t { flex:1 1 0; min-height:0; line-height:1.34; font-size:1em;
overflow:hidden; letter-spacing:.06em;
color:var(--hud-color,#f2e6a8); width:100%; }
/* A fuggoleges eltolas TRANSZFORMMAL megy, es a JS simitja oda (lasd
InfoPanel.tick). Margoval + CSS-atmenettel nem lehetett: a panel
HTML-je kepkockankent ujraepult, es az atmenet minden alkalommal
nullarol indult ujra — pontosan ettol volt darabos. */
.ck-info-t p { margin:0; will-change:transform; }
/* Gépelés közben a szöveg magától fut felfelé; készen a görgő viszi. */
/* A gordulest mar a transzform vegzi; ez a flex-trukk nem kell tobbe. */
.ck-caret { display:inline-block; width:.5em; height:1em; margin-left:1px;
vertical-align:-.12em; background:currentColor;
animation:ckcaret .7s steps(1) infinite; }
@keyframes ckcaret { 0%,50% { opacity:1; } 50.01%,100% { opacity:0; } }
/* --- a felszíni kép a jobb alsó műszeren ---------------------------------
Egy 800×600-as állókép a széles kijelzőn vagy torzul, vagy üresen hagyja a
szélét. Ehelyett magasságra igazítjuk — így túllóg —, és lassan végigúszik
rajta a kép, a végpontokon lassítva. A vignetta és az enyhe nagyítás adja a
lencse érzetét; ez nem valódi hordótorzítás, azt CSS nem tud. */
/* A panel oszlopos flex-doboz, kozepre igazitva: ott egy `height:100%`
gyerek 0 magasra esett ossze. A `flex:1` es az `align-self:stretch` az,
ami tenyleg kitolti — mert a kep NEM a panel tartalma, hanem a panel maga. */
.ck-lens { position:relative; flex:1 1 auto; align-self:stretch;
width:100%; min-height:0; overflow:hidden; border-radius:2px; }
/* Kep eseten a panel sajat behuzasa is zavarna: a kep a keretig er. */
.ck-panel:has(.ck-lens) { padding:0; }
/* A kep TULLOG a panelen mindket iranyban — enelkul nincs mit pasztazni.
A magassag 190%: ezzel a 4:3-as felvetel szelesebb es magasabb is a
doboznal, tehat a mozgas atlos lehet. A vegpontokon lassit (ease-in-out),
mint egy kezben tartott kamera, ami korulnez. */
.ck-lens-img { position:absolute; inset:0; background-repeat:no-repeat;
background-size:auto 200%; background-position:0% 88%;
filter:saturate(1.06) contrast(1.03);
animation:cklens 46s ease-in-out infinite; }
/* A TALAJTÓL INDUL, ÉS LÁTHATÓAN MEGY.
Két baja volt. Fölülről indult, és 260%-os nagyításnál a kép felső harmada
az ÉG — a panelen sokszor csak eget lehetett látni. És harminckét másodperc
alatt tette meg az utat, a végpontokon lassítva: a mozgás percekig nem
látszott. Most a bal alsó saroktól — a talajtól — indul, és jobbra haladva
emelkedik a horizontig, tizenöt másodperc alatt. */
/* NEM EGY VONAL ODA-VISSZA.
Ket kulcskocka `alternate`-tel egyetlen egyenes szakasz: a kep a bal also es
a jobb felso sarok kozott ingazott, mindig ugyanazon a nyomvonalon. Egy
kezben tartott kamera nem ezt csinalja — vandorol, megall, visszalep,
maskepp indul tovabb.
Hat pont, koron korbe (`infinite`, nem `alternate`), szabalytalan
elosztassal: a palya sosem ismetel meg egy szakaszt ugyanabban az iranyban,
es a kezdopontja is mas minden korben. A 46 masodperc szandekosan nem
osztoja a kamera 37-enek — igy a ket mozgas soha nem all ossze ismetlodo
mintava. */
@keyframes cklens {
0% { background-position:8% 86%; }
19% { background-position:74% 63%; }
36% { background-position:41% 34%; }
55% { background-position:96% 47%; }
71% { background-position:22% 71%; }
88% { background-position:63% 91%; }
100% { background-position:8% 86%; }
}
/* Vignetta + egy vékony csillanás a tetején: ettől lesz ablak, nem matrica. */
.ck-lens-v { position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse at 50% 50%,
rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 100%),
linear-gradient(180deg, rgba(255,255,255,.10), transparent 34%); }
/* --- sebességkijelző ------------------------------------------------------
A szám JOBBRA igazítva, állandó szélességen; a nem használt helyeken sötét
szellemcellák égnek. Ettől műszer, nem felirat: a nagyságrend a cellák
számából látszik, nem a szám hosszából. */
.ck-speed { flex-direction:column; justify-content:center; gap:5px;
padding:2px 6px; font-size:15px; letter-spacing:.04em; }
/* EGY SORBAN. A cellak nem tordelhetok: a nyers m/s-bol nyolc jegy is lett,
es a kijelzo ket sorba tort — ezert korlatozza a szamitas a jegyek szamat,
es ezert all itt a `nowrap` masodik vedvonalkent. */
/* A SZAMCSOPORT KET KEPPONTTAL LEJJEBB.
A szam es a lampak alja meg a gazkar savja kozott ot keppont maradt — sok,
mert a ketto egy egyseg. `position:relative`-vel toljuk, nem margoval: a
margo a savot is vinne magaval, es azt nem mozgatjuk. Igy csak a csoport
csuszik, a sav ott marad, ahol volt. */
.ck-sp-row { position:relative; top:2px;
display:flex; align-items:center; gap:6px; width:100%;
flex-wrap:nowrap; white-space:nowrap; overflow:hidden;
color:var(--hud-color,#f2e6a8); }
.ck-sp-num { flex:1 1 auto; text-align:right; font-size:.88em;
white-space:nowrap; }
.ck-sp-r { flex:0 0 auto; display:flex; flex-direction:column;
align-items:flex-start; line-height:1.05; }
.ck-sp-r .u { font-style:normal; font-size:.42em; letter-spacing:.10em;
color:currentColor; opacity:.7; }
/* Hipermeghajton az EGESZ kijelzo lilaba valt — a szam, a mertekegyseg es a
sav is. A szin igy maga is allapotjelzo, nem csak a ket lampa alatta. */
.ck-sp-row.ftl { color:#d69cff; }
/* HAROM LAMPA OTT, AHOL KETTO VOLT.
A `CST` alja levagodott: a jobb hasab (mertekegyseg + harom lampa) 22.1
keppontot kert, a sor viszont 17.9 magas, es `overflow:hidden`-je van.
Feljebb tolni nem lehetett — a mertekegyseg all a lampak folott, tehat a
hasab ugyanugy tullogott —, a gazkar savjat pedig nem visszuk lejjebb.
Marad a betumeret: a koz nullara, a lampak .42-rol .36-ra, a
mertekegyseg .50-rol .42-re. Osszesen 17.1 — belefer, es a lampa csak
tizenot szazalekkal kisebb. */
.ck-drv { display:flex; flex-direction:column; gap:0; font-style:normal;
line-height:1.0; }
.ck-drv b { font-size:.36em; letter-spacing:.08em; font-weight:600;
color:rgba(150,150,150,.42); transition:color .12s, text-shadow .12s; }
.ck-drv b.ftl { color:#d69cff; text-shadow:0 0 8px rgba(190,120,255,.75); }
.ck-drv b.jmp { color:#ffab52; text-shadow:0 0 8px rgba(255,150,60,.75); }
/* A SODRODAS LAMPAJA HIDEG KEK. A masik ketto meleg szinnel eg — azok
hajtomuvek —, ez viszont epp az ellentetuk: nem jar semmi. A szin mondja
meg elsore, hogy nem egy harmadik uzemmodrol van szo. */
.ck-drv b.cst { color:#7fd8ff; text-shadow:0 0 8px rgba(110,200,255,.75); }
/* A gazkar sávja a sebesség alatt, a kijelző TELJES szélességében — ugyanolyan
lépcsős kockákból, mint a RADIO SIGNAL sávja. */
/* A szamsor es a sav kozott KETSZER akkora hezag, mint volt. A panel sajat
`gap`-ja onmagaban keves volt: a szamsor doboza magasabb a tartalmanal, es
a lathato res ebbol alig 2 pixel lett. */
.ck-thr { width:100%; margin-top:3px; color:var(--hud-color,#f2e6a8); }
.ck-thr .sg-bar { display:flex; gap:2px; width:100%; }
.ck-thr .sg-blk { flex:1 1 0; width:auto; height:5px; }
.ck-thr.ftl { color:#d69cff; }
/* (7.36) tolatas: sotetvoros, a sav jobbrol balra telik */
.ck-thr.rev { color:#b3261e; }
.ck-thr.rev .sg-bar { flex-direction:row-reverse; }
/* (9.17) AZ AFTERBURNER a kockak keretén: egeskor narancs (a maradek
toltet), hules alatt voros, ami a hules vegeig lecseng (main: abSav) */
.ck-thr .sg-blk.ab { opacity:1; }
.ck-thr .sg-blk.ab:not(.on) { background:transparent; }
.ck-thr.abeg .sg-blk.ab { border-color:#ffb347; box-shadow:0 0 5px rgba(255,150,50,.85); }
.ck-thr.abhut .sg-blk.ab { border-color:#ff3a2a; box-shadow:0 0 4px rgba(255,50,30,.6); }
/* --- lapozás a dossziéban -------------------------------------------------
Egérzár alatt nincs kurzor, amivel a szöveg fölé lehetne állni — a billentyű
az egyetlen út, és egy billentyű, ami sehol nincs kiírva, nem létezik. */
/* A lapozogombok a szovegdoboz aljara koltoztek — lasd /* A FELOLVASAS JELE. Alapbol nem latszik: csak ott, ahol tenyleg megy —
gazdajog, nyitott dosszie, es a nyelvhez valo hang a gepen. Beszed kozben
vilagit, hogy latszodjon, mit allit le a masodik nyomas. */
.ck-say { display:none; }
.ck-say.on { display:inline-block; cursor:pointer; }
.ck-say.szol { color:#6ee89a; text-shadow:0 0 6px rgba(80,230,140,.6); }
.ck-lap. */
/* Mi ez a kép? Egy tájkép magyarázat nélkül nem mond semmit arról, hogy
honnan néz — a felirat teszi azzá, ami: a leküldött szonda kamerája. */
/* A felirat a fulke SAJAT jelolesevel: ugyanaz a szin es ritkitas, mint a
tobbi muszerfeliraté (`.k`) — es BALRA, a bal felso sarokbol indulva.
Kozepre azert kerult, mert a panel egesze `text-align:center`, es ezt nem
irtuk felul: igy egy idegen betu allt egy idegen helyen. */
.ck-lens-t { position:absolute; left:0; right:0; top:0; padding:3px 6px;
font-style:normal; text-align:left;
font-size:.56em; letter-spacing:.20em;
color:var(--hud-color,#f2e6a8);
text-shadow:0 1px 4px rgba(0,0,0,.95);
background:linear-gradient(180deg,rgba(0,0,0,.62),transparent);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* A nyugodt kozles: ugyanott, ahol a figyelmeztetes, de KEKKEL — elso
pillantasra latszodjon, hogy ez nem vesz, hanem allapotvaltozas. */
#hazard-msg.calm span { color:#bfe9ff; text-shadow:0 0 16px rgba(90,190,255,.6);
border-color:rgba(110,200,255,.35);
background:rgba(6,26,42,.55); }
/* A SZEKVENCIA: ugyanez a hely, borostyannal, es a CIM villog - az also
sor (a magassag es a sebesseg) nem, azt olvasni kell. */
#hazard-msg.szekv span { color:#ffb040; text-shadow:0 0 18px rgba(255,176,64,.7),0 0 3px #000;
border-color:rgba(255,176,64,.35); background:rgba(40,24,4,.5); }
#hazard-msg.szekv #hazard-text { animation:ckblink 1.1s step-end infinite; }
#szekvencia { display:none !important; }
/* --- „fordítás folyamatban" ----------------------------------------------
Ötszáz szöveg fordítása fél percig is eltart, és addig a képernyőn semmi
nem történik. Aki nem tudja, hogy fut, az újra elindítja — és akkor kétszer
fizet ugyanazért. Nem modális: közben mehet a játék. */
#translating { position:fixed; top:14px; right:14px; z-index:64;
display:none; align-items:center; gap:9px;
padding:7px 13px; border-radius:3px;
background:rgba(6,26,42,.86); border:1px solid rgba(110,200,255,.35);
font-size:10px; letter-spacing:.20em; color:#bfe9ff; }
#translating.on { display:flex; }
/* A körbefutó ív: egy kör, aminek csak az egyik negyede világít. */
#translating i { width:11px; height:11px; border-radius:50%;
border:2px solid rgba(110,200,255,.22);
border-top-color:#8fe6ff;
animation:tspin .8s linear infinite; }
@keyframes tspin { to { transform:rotate(360deg); } }
/* --- a szonda kamerája ----------------------------------------------------
A pásztázás alatt a kamera KÖZELEDIK ÉS TÁVOLODIK is, és közben egy hajszálnyit
elfordul. A `perspective` + `rotateY` valódi geometriai torzítás: az egyik
oldal nagyobb lesz a másiknál, és ez a mozgással együtt változik — ettől lesz
térbeli a kép, nem egy csúszó matrica. (Ez NEM hordótorzítás; azt CSS nem tud.
Ez perspektivikus dőlés, ami egy kamera elfordulásakor tényleg így néz ki.)
A ciklus 23 másodperc, a pásztázásé 15: a kettő soha nem esik egyszerre
ugyanoda, tehát a mozgás nem ismétli önmagát. A nagyítás alsó határa 1.04,
mert a dőlés kifordítaná a sarkokat a keretből. */
.ck-lens-cam { position:absolute; inset:0; transform-origin:50% 62%;
will-change:transform;
animation:ckcam 37s ease-in-out infinite; }
/* A KAMERA IS VANDOROL. Ot pont, ugyanazert: ket vegallas kozott ingazva a
kozeledes-tavolodas ora lesz, nem mozdulat. */
@keyframes ckcam {
0% { transform:perspective(320px) scale(1.045) rotateY(-1.6deg) rotateX(.45deg); }
22% { transform:perspective(320px) scale(1.115) rotateY(.9deg) rotateX(-.35deg); }
44% { transform:perspective(320px) scale(1.07) rotateY(1.8deg) rotateX(.25deg); }
67% { transform:perspective(320px) scale(1.135) rotateY(-.6deg) rotateX(-.5deg); }
85% { transform:perspective(320px) scale(1.06) rotateY(-1.9deg) rotateX(.15deg); }
100% { transform:perspective(320px) scale(1.045) rotateY(-1.6deg) rotateX(.45deg); }
}
/* --- a szonda jelének elvesztése ------------------------------------------
Amikor az égitest már csak néhány képpont, a szonda nincs többé hallótávolságon
belül. Ez nem egy hirtelen eltűnés: előbb zajos lesz a kép, mint egy gyengülő
adás, aztán megszakad. Egy kapcsolat nem pattan el, hanem elfogy. */
.ck-lens.zajos .ck-lens-img { filter:saturate(.35) contrast(1.35) brightness(.85);
animation:cklens 46s ease-in-out infinite,
ckrezeg .09s steps(2) infinite; }
@keyframes ckrezeg { 0% { transform:translate(0,0); } 100% { transform:translate(1.5px,-1px); } }
/* Vízszintes csíkok, amik lefelé vándorolnak — ez a képcsőkorszak nyelve arra,
hogy „gyenge a jel". Két rétegben: sűrű finom vonal + egy széles, sodródó sáv. */
.ck-lens.zajos::after,
.ck-lens.halott::after {
content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
background:repeating-linear-gradient(0deg,
rgba(255,255,255,.10) 0 1px, transparent 1px 3px),
linear-gradient(0deg, transparent 40%,
rgba(255,255,255,.16) 50%, transparent 60%);
background-size:100% 3px, 100% 42%;
animation:cksav .5s linear infinite, ckszalag 1.1s linear infinite;
mix-blend-mode:screen; }
@keyframes cksav { to { background-position-y:3px, 0; } }
@keyframes ckszalag { to { background-position-y:0, -120%; } }
/* Megszakadt: a kép elmegy, marad a zaj és a felirat. */
.ck-lens.halott .ck-lens-img { filter:grayscale(1) brightness(.10) contrast(2); }
.ck-lens.halott .ck-lens-t { color:#ff9a7a; text-shadow:0 0 10px rgba(255,90,50,.55); }
/* --- süti-hozzájárulás ----------------------------------------------------
A NEM ugyanolyan gomb, mint az IGEN — ugyanaz a méret, ugyanaz a hangsúly.
Egy sáv, ahol az elutasítás el van dugva, nem hozzájárulást kér, hanem
kicsikar, és jogilag sem ér semmit. */
#consent { position:fixed; left:0; right:0; bottom:0; z-index:66;
display:flex; justify-content:center; padding:14px;
opacity:0; transform:translateY(14px); pointer-events:none;
transition:opacity .35s ease, transform .35s ease; }
#consent.on { opacity:1; transform:none; pointer-events:auto; }
.cons-box { width:min(760px,96vw); padding:14px 18px; border-radius:4px;
background:rgba(6,20,32,.94); border:1px solid rgba(90,170,215,.35);
box-shadow:0 6px 40px rgba(0,0,0,.55);
display:flex; flex-direction:column; gap:11px; }
.cons-box p { margin:0; font-size:11.5px; line-height:1.7; color:#a9cadd; }
.cons-row { display:flex; gap:9px; flex-wrap:wrap; }
.cons-row button { flex:1 1 200px; padding:9px 14px; font:inherit; font-size:10px;
letter-spacing:.14em; border-radius:3px; cursor:pointer; }
.cons-no { color:#cdf3ff; background:transparent;
border:1px solid rgba(140,190,225,.55); }
.cons-no:hover { border-color:rgba(180,225,255,.85); }
.cons-yes { color:#04202e; border:0;
background:linear-gradient(180deg,#8fe0ff,#40b6e4); font-weight:600; }
/* Ugrás közben a sáv narancs, ahogy a JMP lámpa — a szín maga mondja meg a módot. */
.ck-thr.jmp { color:#ffab52; }
/* A süti- és mérési tájékoztató. Külön blokk, mert más témáról szól, mint a
szerzői jogi rész — egy bekezdésbe olvasztva egyik sem lenne olvasható. */
.legal-privacy { color:rgba(190,205,225,.52); line-height:1.75; }
.legal-privacy b { color:rgba(215,230,250,.82); }
/* --- billentyűkupac a jobb alsó műszeren ---------------------------------
Tolóerő és meghajtómód a sebességkijelzőn már ott van; ugyanaz az adat
kétszer nem információ, csak zaj. Ez a hely azé, ami sehol nincs kiírva —
és a billentyűk ÚGY állnak, ahogy a kezed alatt: az alak mondja meg, mi
hol van, a szó csak megerősíti. */
.ck-pad { display:flex; align-items:center; gap:.7em; width:100%;
font-style:normal; }
.ck-cross { flex:0 0 auto; display:grid; gap:2px;
grid-template-columns:repeat(3, 1.35em);
grid-template-rows:repeat(2, 1.35em); }
.ck-cross b { display:flex; align-items:center; justify-content:center;
font-size:.56em; font-weight:600; line-height:1;
color:var(--hud-color,#f2e6a8);
border:1px solid currentColor; border-radius:2px; opacity:.8; }
.ck-cross .w { grid-area:1/2; }
.ck-cross .a { grid-area:2/1; }
.ck-cross .s { grid-area:2/2; }
.ck-cross .d { grid-area:2/3; }
/* A Q és az E a kupac két szélén, egy sorral feljebb — ahol a kézen is van. */
.ck-cross .q { grid-area:1/1; opacity:.55; }
.ck-cross .e { grid-area:1/3; opacity:.55; }
.ck-padlab { flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
gap:1px; }
.ck-padlab i { display:flex; gap:.5em; font-style:normal;
font-size:.48em; letter-spacing:.12em;
color:var(--hud-key,#7d7250);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ck-padlab b { flex:0 0 2.4em; color:var(--hud-color,#f2e6a8); font-weight:600; }
/* A többi parancs egy sorban, tördelve — ezek nem alkotnak alakzatot. */
.ck-more { display:flex; flex-wrap:wrap; gap:.35em .8em; width:100%;
margin-top:.35em; font-style:normal; }
.ck-kx { display:inline-flex; align-items:center; gap:4px; font-style:normal; }
.ck-kx .k { font-size:.48em; letter-spacing:.12em; }
/* A lapozógombok akkorák, mint a többi billentyűjelölés a fülkében —
a korábbi méretben a nyilak nem látszottak. */
/* A „VAN MEG" VILLOGO HAROM PONTJA ELMENT INNEN. Ot gomb nem fer el egymas
alatt a sarokban, negy igen — es a harom pont volt az egyetlen, ami csak
mondott valamit, de nem lehetett megnyomni. Ugyanazt mondja el a PGDN,
ami ott vilagit alatta, es kezdeni is tud vele valamit. */
.ck-info-t { position:relative; }
/* --- összetett nézet (C) --------------------------------------------------
Minden, amit egy égitestről tudunk, egy lapon: a forgó test a textúrájával,
a mért adatok, a szonda képe és a leírás. Nem új adat — ugyanazok a
források, csak először egyszerre. */
#complex { position:fixed; inset:0; z-index:63; display:none;
align-items:center; justify-content:center;
background:rgba(2,6,12,.78); backdrop-filter:blur(2px); }
#complex.on { display:flex; }
.cx-box { width:min(1180px,95vw); max-height:92vh; overflow-y:auto;
padding:20px 24px; border-radius:5px;
background:linear-gradient(180deg,rgba(10,26,40,.98),rgba(6,16,26,.98));
border:1px solid rgba(90,140,175,.4);
display:flex; flex-direction:column; gap:14px; }
.cx-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.cx-name { margin:0; font-size:20px; font-weight:400; letter-spacing:.14em; color:#e8f6ff; }
.cx-kind { font-size:10px; letter-spacing:.20em; color:#5a8faa; text-transform:uppercase; }
.cx-close { margin-left:auto; padding:7px 14px; font:inherit; font-size:10px;
letter-spacing:.14em; color:#8fb6cc; background:transparent;
border:1px solid rgba(90,140,175,.45); border-radius:3px; cursor:pointer; }
.cx-close:hover { color:#cdf3ff; border-color:rgba(140,220,255,.7); }
.cx-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cx-col { display:flex; flex-direction:column; gap:7px; min-width:0; }
.cx-cap { font-size:9px; letter-spacing:.22em; color:#3f7d9c; }
.cx-prev-doboz { position:relative; width:100%; aspect-ratio:16/9;
border-radius:inherit; }
.cx-prev-doboz .cx-prev { aspect-ratio:auto; height:100%; }
.cx-prev, .cx-lens { width:100%; aspect-ratio:16/9; display:block;
border:1px solid rgba(90,140,175,.35); border-radius:3px; }
.cx-prev { background-color:#040a12;
background-image:
radial-gradient(1px 1px at 14% 24%, rgba(255,255,255,.55), transparent),
radial-gradient(1px 1px at 74% 16%, rgba(255,255,255,.40), transparent),
radial-gradient(1px 1px at 34% 66%, rgba(255,255,255,.45), transparent),
radial-gradient(1px 1px at 64% 76%, rgba(255,255,255,.30), transparent),
radial-gradient(1px 1px at 86% 54%, rgba(255,255,255,.35), transparent),
radial-gradient(1px 1px at 24% 86%, rgba(255,255,255,.28), transparent); }
/* A szonda kamerája itt is MOZOG — ugyanaz a lassú pásztázás, mint a fülkében. */
.cx-lens { position:relative; overflow:hidden; background:rgba(8,20,30,.6); }
.cx-lens-img { position:absolute; inset:0; background-repeat:no-repeat;
background-size:auto 200%; background-position:0% 88%;
filter:saturate(1.06) contrast(1.03); }
/* A REGI, KETPONTOS PASZTAZAS. Ez a szabaly ERŐSEBB volt, mint a lentebbi uj
(ket osztaly egy elemen), ezert az uj vandorlas nem ert el ide — a kep
tovabbra is a bal also es a jobb felso sarok kozott ingazott. Egy stiluslap
vegere irt szabaly nem gyoz automatikusan: a fajta szamit, nem a sorrend. */
.cx-lens.van .cx-lens-img { animation:cklens 46s ease-in-out infinite,
ckcam2 37s ease-in-out infinite; }
.cx-lens-v { position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse at 50% 50%,
rgba(0,0,0,0) 54%, rgba(0,0,0,.5) 100%); }
.cx-rows { display:flex; flex-direction:column; }
.cx-r { display:flex; justify-content:space-between; gap:14px;
padding:5px 0; border-bottom:1px solid rgba(90,170,215,.10);
font-size:12px; }
.cx-r span:first-child { color:#5a8faa; letter-spacing:.06em; }
.cx-r span:last-child { color:#e8f6ff; }
.cx-note { margin-top:9px; font-size:11px; line-height:1.7; color:#7fa4bb; }
.cx-text { font-size:12.5px; line-height:1.8; color:#a8c6d8; }
@media (max-width:820px) { .cx-grid { grid-template-columns:1fr; } }
/* --- a hajó neve a műszerfalon -------------------------------------------
A rajzon a középső kijelző fölött van egy üres sáv. Halkan derengő betűk:
egy hajónak van neve, de nem az kiabál a pilótára. */
.ck-brand { position:absolute; display:flex; align-items:center;
justify-content:center; pointer-events:none;
font-size:19px; line-height:1; letter-spacing:.66em; text-indent:.66em;
font-weight:300; color:var(--hud-color,#f2e6a8);
opacity:.20; text-shadow:0 0 12px currentColor;
animation:ckbrand 6s ease-in-out infinite; }
@keyframes ckbrand { 0%,100% { opacity:.16; } 50% { opacity:.28; } }
/* --- rang a fő műszeren --------------------------------------------------- */
/* KET SOR: felül a szint és a rang, alatta a pont — mindkettő balra zárva.
Egy sorba zsúfolva a pontszám a jobb szélre sodródott, és úgy nem látszott,
hogy a szinthez tartozik. */
.ck-rank { display:flex; flex-direction:column; align-items:flex-start;
gap:.05em; width:100%; margin-bottom:.18em; }
.ck-rl { display:flex; align-items:baseline; gap:.55em; font-style:normal; }
.ck-lv { flex:0 0 auto; font-style:normal; font-size:.86em; font-weight:600;
color:var(--hud-color,#f2e6a8); }
.ck-lv::before { content:'LV '; font-size:.6em; opacity:.65; letter-spacing:.14em; }
.ck-rn { font-style:normal; font-size:.56em; letter-spacing:.16em;
color:var(--hud-color,#f2e6a8);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ck-rp { font-style:normal; font-size:.48em; letter-spacing:.10em;
color:var(--hud-key,#7d7250); white-space:nowrap; }
.ck-anon .ck-rn { color:var(--hud-key,#7d7250); }
/* --- lapozás a szöveg jobb alsó sarkában ----------------------------------
A villogó pöttyök megmondják, hogy van még — a gomb alattuk megmondja,
MIVEL lehet odajutni. A méret KÉPPONTBAN van megadva, nem a panel
betűméretéhez kötve: azt a beillesztés lehúzza, és ezen a feliraton pont
az olvashatóság a lényeg. */
.ck-lap { position:absolute; right:0; bottom:0; display:flex;
flex-direction:column; align-items:flex-end; gap:2px;
font-style:normal; pointer-events:auto; }
.ck-lap b { display:none; padding:1px 5px; font-size:9px; font-weight:600;
letter-spacing:.10em; line-height:1.35;
color:var(--hud-color,#f2e6a8);
border:1px solid currentColor; border-radius:2px;
background:rgba(0,0,0,.35); cursor:pointer; }
.ck-lap b.on { display:block; }
/* A [C] UGYANOLYAN GOMB, MINT A LAPOZOK. Elobb halvanyra es keret nelkulire
vettem, mert mas dolgot csinal — de ettol nem jelzes lett, hanem egy betu a
semmiben: a szem nem talalta meg, hogy az is megnyomhato. Ha ugyanaz a
szerepe (megnyomod, es tortenik valami), akkor ugyanugy is kell kineznie.
Egyetlen betu, tehat keskenyebb — es mivel az oszlop jobbra igazodik, a
jobb szele a lapozokeval egy vonalban all. */
.ck-lap .ck-cx { letter-spacing:0; }
.ck-lap b:hover { background:rgba(242,230,168,.18); }
/* A SZOVEG NE FUSSON A GOMBOK ALA — es a hely KEPPONTBAN legyen kimerve, ne
em-ben. A ket lapozogomb merete kotott keppontban (lasd .ck-lap b), a
szovege viszont a panel betumeretehez igazodik: em-ben megadva a fenntartott
sav a panel zsugorodasaval egyutt fogyott, a gomb viszont nem, es a szoveg
alafolyt. Ket kulonbozo mertekegyseg egy tavolsagra sosem jo. */
.ck-info-t p { padding-right:48px; }
/* A hajó neve a HUD jobb felső paneljének fejlécében. Külső nézetben — vagy
ha a műszerfal nincs a képen — ez az egyetlen hely, ahol állandóan látszik. */
.hud-brand { margin:0 0 7px; padding-bottom:6px; text-align:center;
font-size:12px; letter-spacing:.46em; text-indent:.46em;
font-weight:300; color:#8fe6ff; opacity:.55;
text-shadow:0 0 14px rgba(90,200,255,.5);
border-bottom:1px solid rgba(80,160,200,.18); }
/* --- a jobb alsó műszer finomhangolása -----------------------------------
A feliratok dőlése egy-két fokkal elütött a kijelző síkjától: a panel a
trapézra van torzítva, a sorok viszont vízszintesek maradtak benne. Ez a
kis elforgatás hozza őket egy síkba a kerettel. */
.ck-right { --ck-tilt: -1.6deg; }
.ck-right > * { transform:rotate(var(--ck-tilt)); transform-origin:50% 50%; }
/* A WASD-kupac BALRA FEL igazítva, a Q és az E halványabban — így a négy
mozgatóbillentyű egy csoportnak látszik, nem ötnek-hatnak. */
.ck-pad { align-items:flex-start; }
.ck-cross { align-self:flex-start; }
.ck-cross .q, .ck-cross .e { opacity:.34; }
.ck-cross .w, .ck-cross .a, .ck-cross .s, .ck-cross .d { opacity:.92; }
/* --- a szondakép megérkezése ---------------------------------------------
Négy másodperc, három szakaszban: előbb puszta zaj (nincs jel), aztán
vándorló sávok (a kapcsolat kapaszkodik), végül átúszik a kép. A szonda
távol van; a képnek onnan ide kell érnie. */
.ck-lens-zaj { position:absolute; inset:0; z-index:4; pointer-events:none;
display:none; mix-blend-mode:screen; }
.ck-lens.bejon .ck-lens-zaj { display:block;
background:repeating-linear-gradient(0deg,
rgba(255,255,255,.30) 0 1px, rgba(0,0,0,.30) 1px 2px),
repeating-linear-gradient(90deg,
rgba(255,255,255,.10) 0 2px, transparent 2px 5px),
linear-gradient(0deg, transparent 42%,
rgba(255,255,255,.30) 50%, transparent 58%);
background-size:100% 2px, 7px 100%, 100% 46%;
animation:ckzaj .07s steps(2) infinite,
cksavfut .8s linear infinite,
ckzajel 4s ease-out forwards; }
@keyframes ckzaj { 0% { background-position-y:0,0,0; }
100% { background-position-y:2px,0,0; } }
@keyframes cksavfut { to { background-position:0 0, 0 0, 0 -160%; } }
/* A zaj erossege negy masodperc alatt fogy el. */
@keyframes ckzajel { 0% { opacity:1; } 55% { opacity:.75; }
80% { opacity:.28; } 100% { opacity:0; } }
/* A kep maga is csak fokozatosan all ossze: eloszor semmi, aztan atuszik. */
.ck-lens.bejon .ck-lens-img { animation:ckkepbe 4s ease-out forwards; }
@keyframes ckkepbe { 0% { opacity:0; filter:grayscale(1) contrast(3) brightness(.35); }
45% { opacity:.35; filter:grayscale(.8) contrast(2) brightness(.6); }
100% { opacity:1; filter:saturate(1.06) contrast(1.03); } }
/* --- a műszerfeliratok SOSEM tördelnek ------------------------------------
Az „IDŐKOMPRESSZIÓ" hosszabb, mint a „RATE" volt, és egy nagyobb értéknél
a sor kettétört, ami lejjebb tolta az alatta lévő műszereket. Ez nem ennek
az egy szónak a baja: MINDEN felirat megnőhet fordításkor, és egy műszerfal
nem rendezheti át magát attól, hogy nyelvet váltottál.
A címke inkább végződjön három ponttal, mint hogy elmozdítsa a többit. */
.ck-g { flex-wrap:nowrap; }
.ck-g-l { min-width:0; }
.ck-g-l .k, .ck-gt .k {
display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ck-g-r { flex:0 0 auto; }
/* Ugyanez a fő műszer sorára és a rangra. */
.ck-mainrow .v, .ck-rn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ck-rank, .ck-rl { max-width:100%; }
/* --- NINCS JEL: a szondakamera hangyahaboruja -----------------------------
Ahol nincs kep, ott eddig egy sor allt: „not generated yet". Ez igaz, de
ures — egy uzenet a szoftverrol, nem az egitestrol. A muszer viszont nem
hallgat el attol, hogy nincs mit mutatnia: egy kamera, amelyiknek nincs
jele, HAVAZIK. Ez a kep pontosan annyit mond, amennyit tudunk — semmit —,
de a mufszer nyelven mondja, es nem tesz ugy, mintha nem is lenne muszer.
Ez a blokk kozos: az objektumkatalogus es az osszetett nezet ugyanezt
hasznalja, mert ugyanaz a kamera mindketto mogott.
A szemcse feTurbulence-bol jon, adat-URI-ban. Nincs kulso keres, nincs
letoltott kep, es tetszoleges meretben eles marad. */
.cw-nosig { position:relative; overflow:hidden; background:#05070b;
display:flex; align-items:center; justify-content:center; }
.cw-nosig i {
position:absolute; inset:-60% -60%; /* tulnyulik, hogy az elcsuszas ne lasson ki */
background-image:url("data:image/svg+xml;utf8,\
");
background-size:140px 140px;
opacity:.5;
/* A szemcse nem folyamatosan uszik, hanem KOCKAKENT ugrik: egy analog kep
50-60 kepkockat rak ki masodpercenkent, es a zaj minden kockan mas. Egy
sima, folytonos mozgas fust lenne, nem havazas. */
animation:cwhavaz .085s steps(1) infinite; }
@keyframes cwhavaz {
0% { background-position:0 0; }
20% { background-position:-37px 61px; }
40% { background-position:83px -29px; }
60% { background-position:-71px -83px; }
80% { background-position:53px 47px; }
100% { background-position:19px -55px; } }
/* Vandorlo vizszintes sav a zaj folott: ez a kepcsokorszak nyelve arra, hogy
„nincs szinkron". Ugyanaz a mozdulat, mint a jelvesztesnel. */
.cw-nosig::after {
content:''; position:absolute; inset:0; pointer-events:none;
background:repeating-linear-gradient(0deg,
rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
linear-gradient(0deg, transparent 38%,
rgba(255,255,255,.11) 50%, transparent 62%);
background-size:100% 3px, 100% 46%;
animation:cwsav .5s linear infinite, cwszalag 2.4s linear infinite;
mix-blend-mode:screen; }
@keyframes cwsav { to { background-position-y:3px, 0; } }
@keyframes cwszalag { to { background-position-y:0, -150%; } }
/* A felirat a zaj FOLOTT ul, es villog — de lassan es nem nullaig: egy
agresszivan kapcsolgato felirat ket masodperc utan idegesito, es ezt a
kepet hosszan nezed. */
.cw-nosig b {
position:relative; z-index:2; font-size:12px; font-weight:600;
letter-spacing:.30em; color:#ff9a7a;
text-shadow:0 0 12px rgba(255,90,50,.6), 0 2px 3px rgba(0,0,0,.9);
animation:cwvillog 1.5s ease-in-out infinite; }
@keyframes cwvillog { 0%, 44% { opacity:1; } 60%, 88% { opacity:.18; }
100% { opacity:1; } }
/* Aki nem keri a mozgast, annak all a kep — a zaj marad, a rangatas nem. */
@media (prefers-reduced-motion: reduce) {
.cw-nosig i, .cw-nosig::after, .cw-nosig b { animation:none; }
.cw-nosig b { opacity:1; } }
/* A katalogus felszin-doboza es az osszetett nezet lencseje ugyanazt a
blokkot kapja, csak mas meretben. */
.cat-simg .cw-nosig { position:absolute; inset:0; }
.cx-lens .cw-nosig { position:absolute; inset:0; z-index:1; }
.cx-lens .cw-nosig b { font-size:13px; }
/* --- az oldalsáv MINDIG kifér ---------------------------------------------
A két nagy doboz — a forgó előnézet és a szondakamera — eddig fix arányt
követelt: 380 pixel szélesség mellett ez 214 és 285 képpont magasság,
plusz a név, a fajta, a jegyzet, a leírás és két gomb. Egy 398 pixeles
oszlopban ez 632-t kért, és mivel az oszlop `overflow:hidden`, a maradék
234 nem gördült sehová: egyszerűen nem létezett. A FLY THERE gomb a
kilógás peremén állt.
Eddig ez csak a bolygóknál jelentkezett — a csillagoknál és a ködöknél a
kamera doboza el volt rejtve, tehát véletlenül kifért. Most, hogy a kamera
MINDENHOL ott van, a hiba mindenhol látszik, tehát meg is kell oldani.
A megoldás nem magasságok kitalálása képpontban: azok egy másik ablakban
megint rosszak lennének. A két nagy doboz ZSUGORODHAT — az arány marad
kívánság, nem parancs —, a `min-height` pedig megmondja, meddig. Ami így
marad, azt a leírás kapja, a saját görgetőjével. */
.cat-prev { flex:0 1 auto; min-height:92px; }
.cat-surf { flex:1 1 auto; min-height:0; }
.cat-simg { flex:1 1 auto; min-height:84px; }
.cat-stext { flex:1 1 auto; min-height:40px; }
/* --- a katalógus TÁBLÁZAT lett -------------------------------------------
Név, fajta, és egy pötty a textúráról: ennyi volt egy soron. Minden más
csak akkor derült ki, ha rákattintottál — hatezer sornál ez nem katalógus,
hanem találgatás. Nem lehetett megnézni, hol van még tennivaló, és azt sem,
hol jártál már.
Hat oszlop, mind eldönthető ránézésre. A fejléc együtt mozog a listával
(a lista görgethető, a fejléc nem), és a rács MINDKETTŐN ugyanaz — ezért
van egy közös változóban: két helyre írva előbb-utóbb elcsúszna. */
.cat-listbox { flex:1; min-width:0; display:flex; flex-direction:column;
/* A TIPUS OSZLOP SZELESEBB. A 92 keppont az angol
„exoplanet"-re volt eleg; forditva („Exobolygó",
„Exoplanet · Supererde") mar nem fert bele, es a szoveg
kicsuszott a szomszedja moge. A szotar hossza nem a mi
dontesunk — a hely legyen eleg hozza. */
--cat-racs: minmax(0,1fr) 132px 78px 34px 40px 44px 40px; }
.cat-head, .cat-row { display:grid; grid-template-columns:var(--cat-racs);
gap:10px; align-items:center; }
.cat-head { position:sticky; top:0; z-index:2;
padding:5px 11px; border-bottom:1px solid rgba(90,170,215,.22);
font-size:8.5px; letter-spacing:.16em; color:#4e93b8;
background:#0a1a26; user-select:none; }
.cat-head b, .cat-head i, .cat-head u {
font-weight:600; font-style:normal; text-decoration:none; }
/* A három jelölő oszlop fejléce KÖZÉPEN áll, mint alattuk a pötty. */
.cat-head u { text-align:center; cursor:help; }
/* A GORDULOSAV HELYE MINDIG MEGVAN. Nelkule a lista belso szelessege
tizenegy keppontal kisebb, mint a fejlece — a racs ket helyen mas lesz, es
az oszlopcimkek elcsusznak a pottyeik folul. Fenntartott hellyel a ketto
ugyanaz, akkor is, ha epp nincs mit gorgetni. */
.cat-list { flex:1 1 auto; }
/* A jelölők. Három állapotuk van, és mind a három MÁST mond:
van — megvan
nincs — nincs meg (vonás, nem üres hely: az üres azt jelentené, nem tudjuk)
var — még nem tudjuk, a szerver válasza úton van
Egy még nem tudott dolgot nemleges válaszként mutatni hazugság, ezért a
várakozó cella halvány karika, nem vonás. */
.cat-row s { justify-self:center; width:7px; height:7px; border-radius:50%;
text-decoration:none; position:relative; }
.jel.van { background:#5ad1a0; box-shadow:0 0 6px rgba(90,209,160,.55); }
.jel.jart { background:#8fe0ff; box-shadow:0 0 6px rgba(143,224,255,.6); }
.jel.sajat { background:#8fe0ff; box-shadow:0 0 6px rgba(143,224,255,.6); }
/* Osztálytextúra: KARIKA, nem tömör pötty. Ott van a kép, de nem ezé a
testé — a különbség a lényeg, tehát látszania kell. */
.jel.osztaly { background:transparent; border:1.5px solid #e0a33a;
box-shadow:0 0 5px rgba(224,163,58,.45); }
.jel.nincs { background:transparent; }
.jel.nincs::after { content:''; position:absolute; left:0; right:0; top:3px;
height:1px; background:rgba(120,155,180,.45); }
.jel.var { background:transparent; border:1px solid rgba(120,155,180,.22); }
.cat-row { padding:6px 11px; cursor:pointer;
border-bottom:1px solid rgba(90,170,215,.07); }
.cat-row b, .cat-row i { min-width:0; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; }
/* --- ami a sajat hajónk mögött van ---------------------------------------
Külső nézetben a hajó a kamera és a világ között áll, a feliratok viszont
HTML-ben ülnek a képernyő tetején: egy csillag neve a hajótesten lebegett,
mintha a hajó és a néző közé került volna. Amit a hajó takar, azt nem látod.
Nem tüntetjük el, hanem hátraléptetjük. A célpont felirata hordozza az
„ENTER: repülés oda"-t, és az akkor is kell, ha épp a saját hajód takarja —
halványan viszont annak látszik, ami: valaminek, ami mögötte van. */
/* Az athalatszas MERTEKET a Labels.js allitja kepkockankent, mert az fugg
attol, milyen melyen esik a felirat a hajotest korvonalaba. Itt csak az
marad, ami kapcsolo: a pottyot es a vonalat a mely takaras elveszi —
azok jelolok, es egy jelolo vagy mutat valamit, vagy nincs ott. */
.lbl.mogotte .lbl-dot, .lbl.mogotte .lbl-line { visibility:hidden; }
/* A becenev a szint elott. Halkabb, mint a rang neve: a rang az, amit
kiérdemeltél, a név csak megmondja, ki érte el. Nem törik és nem tol el
semmit — a hossza tizenöt karakterben kötött (lásd cw_nick, auth.php). */
.ck-nick { flex:0 1 auto; min-width:0; font-style:normal; font-size:.56em;
letter-spacing:.16em; color:var(--hud-color,#f2e6a8);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* A RANG NEVE ADJA AT A HELYET, ha a sor szuk lesz. A nev es a szint rovid
es kotott hosszu; a rang neve viszont „Master Cartographer" is lehet, es
forditasban meg hosszabb. Harom dolog egy soron: az mondjon le a helyrol,
amelyik a legtobbet foglalja. */
.ck-rn { flex:1 1 auto; min-width:0; }
/* --- gazda-oszlop a katalógusban -----------------------------------------
A szektorbeosztást ellenőrizni kell tudni, de a látogatónak nem mond
semmit — neki csak elvenné a helyet a névtől. Ezért a hetedik oszlop
CSAK gazdakulccsal jelenik meg, és akkor a rács is bővül vele. */
.cat-sec { display:none; }
.cat-listbox.owner { --cat-racs: minmax(0,1fr) 132px 78px 34px 40px 44px 40px 34px; }
.cat-listbox.owner .cat-sec {
display:block; text-align:center; font-style:normal; text-decoration:none;
font-size:10px; letter-spacing:.10em; color:#e0a33a; }
.cat-listbox.owner .cat-head .cat-sec { font-size:8.5px; color:#8a6a28; }
/* --- a célkereszt melletti üveglap lábléce --------------------------------
Egy betű, és eddig sehol nem volt kiírva, hogy létezik. Halkabb, mint a
sorok fölötte: nem ő a mondanivaló, csak megmondja, hol van több. */
#info-panel .ip-f { display:flex; align-items:baseline; gap:7px;
margin-top:9px; padding-top:7px;
border-top:1px solid rgba(120,190,255,.14);
font-size:9.5px; letter-spacing:.14em;
color:rgba(150,190,220,.62); }
#info-panel .ip-f b { font-weight:600; padding:0 4px; border-radius:2px;
border:1px solid rgba(140,205,255,.5); color:#bfe4ff; }
#info-panel .ip-f s { text-decoration:none; }
/* --- a bal felső műszer TAB-os tartalma -----------------------------------
Egy panel, több tartalom. A sarokban a TAB gomb és a három betűs jelek:
egy műszeren a rövid jel gyorsabban olvasható, mint egy szó, és annyi fér
is ki oda. Az éppen látható jel világít, a többi halkan ott van — így
látszik, hogy a panel többet tud, és mivel. */
/* KET OSZLOP: balra az allando jelsor, jobbra a valtozo tartalom. A bal
oszlop minden allasban ugyanott van es ugyanugy nez ki — a valtozo resz
csak akkor olvashato, ha a korulotte levo nem mozdul. */
.ck-nav2 { display:flex; align-items:flex-start; gap:.55em;
width:100%; height:100%; overflow:hidden; }
.ck-tabs { display:flex; flex-direction:column; align-items:flex-start;
gap:.16em; flex:0 0 auto; height:100%; }
.ck-tab { font-style:normal; font-size:.42em; letter-spacing:.16em;
color:var(--hud-key,#7d7250); cursor:pointer; }
.ck-tab:hover { color:var(--hud-color,#f2e6a8); }
#cockpit .ck-tab { pointer-events:auto; }
.ck-tab.on { color:var(--hud-color,#f2e6a8); }
/* --- HANYAN VANNAK FENT ---------------------------------------------
A lapok alatt, a bal also sarokban — az az egyetlen hely a panelen, ami
MINDEN aloldalon ures marad. Egy embereke, alatta a szam, harom
szamjegyre előnullázva: egy muszeren a szam SZELESSEGE ne ugraljon
attol, hogy egyjegyu vagy haromjegyu — a szem a helyet is olvassa. */
/* A SZAMLALO A BAL ALSO SAROKBAN. Ott van a helye: az az egyetlen pont, ami
minden aloldalon ures marad. Kozben kiderult, hogy a szam nem azert nem
latszott, mert kilogott — hanem mert MERETRE volt semmi: a hetszegmenses
szamjegy 1,9 keppontos betuvel indult, ami a kepernyon egy legypiszok.
Most akkora, mint az emberke maga es mint az uzenetek szovege. */
.ck-fent { margin-top:auto; padding-top:.5em; display:flex;
flex-direction:column; align-items:flex-start; gap:.14em;
font-style:normal; color:var(--hud-key,#7d7250); }
/* KETSZER AKKORA. Elso nekifutasra akkorara vettem, hogy „elferjen" — es
ettol olvashatatlan lett. Egy muszeren az a meret a jo, amit egy
pillantassal le lehet olvasni; a hely amugy is ures alatta. */
.ck-fent svg { width:.672em; height:.8em; opacity:.9; }
/* A SZAMJEGYEK UGYANOLYAN SZAMJEGYEK, MINT A TOBBI A MUSZERFALON: het
szegmens, es az elonullazas nem NULLAKAT ir, hanem sotet szellemcellakat
hagy. Csak a valos szam vilagit — ez a kulonbseg egy digitalis kijelzo es
egy szoveg kozott. */
.ck-fent .sg { font-size:.5em; }
/* A tartalom BAL FELUL kezdodik, akarmennyi is van belole. */
/* A TARTALOM OSZLOPANAK VALODI MAGASSAGA VAN.
Eddig nem volt: a sor `align-items:flex-start`-tal all, tehat ez az oszlop
akkora lett, amekkora a tartalma, es a kilogo reszt a szulo egyszeruen
levagta. Egy `max-height:100%` ilyen szulon SEMMIT nem jelent — nincs mihez
szazalekolni —, ezert a lista nem gorgott, csak elfogyott a kepernyo alján.
A `min-height:0` azert kell, mert egy flex-elem alapbol nem megy a tartalma
ala: nelkule a magassag ujra a szovegtol fugg, es minden marad a regiben. */
.ck-nav2-b { flex:1 1 auto; min-width:0; align-self:stretch;
height:100%; min-height:0;
display:flex; flex-direction:column;
align-items:flex-start; justify-content:flex-start;
overflow:hidden; }
/* A fent lévők listája. Kattintható nevek — a keret csak akkor van ott,
ahol tényleg történik valami a kattintásra. */
/* A NEVSOR GORGETHETO. Nyolc-tiz nev meg elfer a muszeren; huszonot mar nem,
es a kilogo resz eddig egyszeruen levagodott — a lista vege ugy tunt el,
hogy semmi nem jelezte. A magassagot a panel szabja meg (`max-height:100%`),
a tobbi gorog, ugyanugy, mint az uzenofal. */
.ck-rel { display:flex; flex-direction:column; gap:.12em; margin:.2em 0;
width:100%; align-items:stretch;
flex:0 1 auto; min-height:0; max-height:100%; overflow-y:auto; }
.ck-rel::-webkit-scrollbar { width:4px; }
.ck-rel::-webkit-scrollbar-thumb { background:rgba(140,200,235,.35); border-radius:2px; }
.ck-rel::-webkit-scrollbar-track { background:transparent; }
.ck-com { width:100%; }
/* A FULKE ATERESZT, DE EZEK NEM. A `#cockpit` egesze `pointer-events:none`,
kulonben az uveglapok elnyelnek minden kattintast a kilatasbol — ettol
viszont a benne levo GOMBOK sem kaptak egeret: a nevre kattintva a jatek
nyelte be (a vaszon kerte az egerzarat), a gorgo pedig a gazkart allitotta
a szoveg helyett. Amivel dolgozni kell, az visszakapja. */
#cockpit .ck-info, #cockpit .ck-rel, #cockpit .ck-rel-i, #cockpit .ck-com-i,
#cockpit .ck-com-be, #cockpit .ck-lap b { pointer-events:auto; }
.ck-rel-i { display:block; width:100%; box-sizing:border-box; text-align:left;
font-style:normal; font-size:.56em; letter-spacing:.08em;
padding:.14em .45em; border:1px solid transparent; border-radius:2px;
color:var(--hud-color,#f2e6a8); cursor:pointer;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ck-rel-i:hover { border-color:currentColor; }
.ck-rel-i.on { border-color:currentColor; background:rgba(242,230,168,.12); }
.ck-rel-x { font-size:.44em; letter-spacing:.10em; color:var(--hud-key,#7d7250);
margin:.25em 0; }
.ck-rel-me { display:flex; justify-content:space-between; align-items:baseline;
gap:.6em; margin-top:.3em; }
.ck-rel-me .v { font-size:.5em; letter-spacing:.10em; }
/* A küldhető mondatok — és alattuk egy sor, amibe be lehet írni. Az utóbbi
régen nem volt: szabad szöveg nem ment a hálóra, tehát nem is volt mit
moderálni rajta. Most van; a hossz kötött, és minden sor mellett ott áll,
ki küldte (lásd relay.php). */
/* A SORKOZ VISSZAVEVE. Alul most ott all a beirosor is, es a hat mondat
mellette elkezdett kifutni a kijelzobol — a fulke pedig ilyenkor a
BETUT huzza le, hogy beferjen (Cockpit._illeszt), vagyis az egesz lap
olvashatatlanabb lett egy uj elem miatt. A hely a sorok kozott volt: az
kellett vissza, nem a betumeret. */
.ck-com { display:flex; flex-direction:column; gap:0; margin:.1em 0; }
/* AZ UZENETEK BALRA, ES OLVASHATO MERETBEN. Aprora szedve es kozepre
igazitva egy lista nem lista, hanem dekoracio — ezekre kattintani kell. */
.ck-com-i { display:block; width:100%; box-sizing:border-box;
font-style:normal; font-size:.56em; letter-spacing:.04em;
text-align:left; padding:.04em .45em; line-height:1.25;
border:1px solid transparent; border-radius:2px;
color:var(--hud-color,#f2e6a8); cursor:pointer;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ck-com-i:hover { border-color:currentColor; background:rgba(242,230,168,.1); }
.ck-com-to { display:block; font-size:.52em; letter-spacing:.12em;
color:var(--hud-color,#f2e6a8); margin-bottom:.15em;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ck-com-ok { display:block; font-size:.42em; letter-spacing:.14em;
color:var(--hud-key,#7d7250); margin-top:.2em; }
/* A BEÍRÓSOR. Ugyanaz a szedés, mint a kész mondatoké — egy műszeren a
beírható sor sem lehet más betű, mint a többi. A kerete viszont MINDIG
látszik, halványan: erről tudja meg a játékos, hogy ide írni lehet.
Fókuszban a keret felerősödik, a jelölő a HUD színe. */
/* A MEZO A PANEL ALJARA KERUL. A `margin-top:auto` a flexben minden szabad
helyet felszed — vagyis a fejlec es a hat mondat felul marad, a beirosor
pedig leul az aljara, oda, ahol egy parancssor szokott lenni. A panel
`justify-content:center`-je enelkul az EGESZ tartalmat kozepre huzta, es az
uj elem felfele tolta a listat. */
.ck-com-be { display:block; width:100%; box-sizing:border-box;
margin-top:auto; padding:.16em .45em;
font:inherit; font-style:normal; font-size:.56em;
letter-spacing:.04em; text-align:left;
color:var(--hud-color,#f2e6a8);
background:rgba(0,0,0,.25);
border:1px solid rgba(242,230,168,.30); border-radius:2px;
caret-color:var(--hud-color,#f2e6a8); outline:none; }
.ck-com-be::placeholder { color:var(--hud-key,#7d7250); opacity:1; }
.ck-com-be:hover { border-color:rgba(242,230,168,.55); }
.ck-com-be:focus { border-color:currentColor;
background:rgba(242,230,168,.10); }
/* Ami neked jött. Ez nem sor a listában: egy üzenet, nagyobb betűvel, és
ott a gomb, amivel nyugtázod. */
.ck-mes-who { display:block; font-size:.5em; letter-spacing:.12em;
color:var(--hud-color,#f2e6a8);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* AZ UZENET AKKORA, MINT A NEV. Nagyobb betuvel a szoveg kilogott a
fejlec ala rendezett oszlopbol, es a fal ket kulonbozo meretu sorbol allt.
Egy uzenofalon a nev es a mondat egy rendszer resze — balra igazitva,
ugyanabban a meretben. */
.ck-mes { display:block; font-size:.5em; line-height:1.35; margin:.15em 0 0;
text-align:left; color:var(--hud-color,#f2e6a8); }
.ck-mes-lista .ck-mes-sor { text-align:left; }
.ck-mes-x { display:flex; align-items:center; gap:.4em; margin-top:.25em; }
/* Az érkezett üzenet: idő, feladó, szöveg — balra igazítva, olvasható
méretben. Nem sor egy listában: ez az, amiért odalapoztál. */
.ck-mes-t { display:block; font-size:.42em; letter-spacing:.12em;
color:var(--hud-key,#7d7250); }
/* --- GRA: mi terheli a képet ----------------------------------------------
Cimke balra, ertek JOBBRA, egy oszlopban. Egy muszeren a szamjegyek helye
allando kell legyen: ha az ertek hossza szerint vandorol, minden
frissitesnel ujra meg kell keresni a szemnek, hol kezdodik. */
.ck-gra { display:flex; flex-direction:column; align-items:stretch;
gap:0; width:100%; margin:.1em 0 0; }
.ck-gra-s { display:flex; align-items:baseline; justify-content:space-between;
gap:8px; font-style:normal; line-height:1.55; }
.ck-gra-s .k { font-size:7.6px; letter-spacing:.14em; flex:0 1 auto;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ck-gra-s .v { font-size:9px; letter-spacing:.06em; flex:0 0 auto;
text-align:right; font-variant-numeric:tabular-nums;
color:var(--hud-color,#f2e6a8); }
/* --- MUS: mi szól ---------------------------------------------------------
A címek egymás alatt, balra igazítva, az éppen szóló kivilágítva. Ugyanaz
a rajz, mint a relé névsoránál: egy műszeren belül két lista ne nézzen ki
kétféleképpen. A címek hosszúak lehetnek, ezért a sor VÉGE elfogy — nem
tördelünk, mert egy kettétört cím két sornak látszik. */
.ck-mus { display:flex; flex-direction:column; align-items:stretch;
gap:1px; width:100%; margin:.15em 0 .3em; }
.ck-mus-i { display:block; font-style:normal; font-size:.52em;
letter-spacing:.04em; line-height:1.5; cursor:pointer;
padding:0 .3em; border-left:2px solid transparent;
color:var(--hud-key,#7d7250);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cockpit .ck-mus-i { pointer-events:auto; }
/* Az uzenofal gorgetheto, tehat kapnia kell az eger- es ujjmozdulatokat. */
#cockpit .ck-mes-lista { pointer-events:auto; }
.ck-mus-i:hover { color:var(--hud-color,#f2e6a8); }
/* Az ÉPPEN SZÓLÓ nem csak világosabb: kap egy jelet is a sor elején. Színnel
egyedül egy halványuló műszeren nehéz megkülönböztetni. */
.ck-mus-i.on { color:var(--hud-color,#f2e6a8);
border-left-color:var(--hud-color,#f2e6a8);
background:rgba(242,230,168,.10); }
.ck-musbar { display:block; width:100%; }
.ck-mus-k { display:flex; align-items:center; gap:4px; margin-top:.3em;
flex-wrap:wrap; }
.ck-mus-k .k { font-size:8.5px; letter-spacing:.16em; }
.ck-mus-k .ck-keys { flex-direction:row; }
.ck-mus-k .ck-keys i { font-size:8px; padding:0 3px; }
/* --- a rádió kapcsolója a jele mellett -----------------------------------
Egy gomb ott ér valamit, ahol a hatása látszik. Kikapcsolva a sáv VÉGIG
PIROS: nem azt mondja, hogy nincs jel, hanem hogy nem hallgatod — a kettő
nem ugyanaz, és a különbségnek látszania kell. */
/* A FELIRAT SORA BALRA TORLODIK, es a gomb az elejen all. Igy a sor nem a
panel kozepen lebeg, hanem a RAD alatt kezdodik — ott, ahol a szem amugy
is vegigfut a muszereken. */
.ck-gt .k { display:flex !important; align-items:center; gap:.45em;
justify-content:flex-start; text-align:left; }
.ck-gt .k > span, .ck-gt .k { min-width:0; }
/* A GOMB AKKORA, HOGY EL LEHESSEN TALALNI. Az elozo valtozat 10×8 keppont
volt — pontosan az a meret, amire ranezesre azt mondod, gomb, es amire
repules kozben soha nem tudsz rakattintani. A billentyu (R) ugyanezt
csinalja; a gomb attol meg gomb marad, csak most mar mukodik is. */
.ck-rbtn { display:inline-flex; align-items:center; justify-content:center;
flex:0 0 auto; font-style:normal; font-weight:600;
font-size:11px; line-height:1; min-width:24px; height:19px;
padding:0 5px; border-radius:2px; cursor:pointer;
border:1px solid currentColor; color:var(--hud-key,#7d7250); }
.ck-rbtn.on { color:var(--hud-color,#f2e6a8); background:rgba(242,230,168,.14); }
#cockpit .ck-rbtn { pointer-events:auto; }
.ck-bar.ki i, .ck-bar.ki span { color:#e0574a !important; }
.ck-bar.ki { color:#e0574a; }
/* --- a támogatás gombjai a `.sm` UTÁN -------------------------------------
A `.sm` a fájlban lejjebb áll, mint a `.give-btn`, és azonos erősségnél a
későbbi nyer: emiatt a gomb visszakapta a `display:block`-ot, és a felirat
meg az összeg egymásba csúszott. Ami a támogatás-gombban MÁS — két adat
egy soron, a két szélén —, annak tehát itt a helye, a `.sm` után. */
/* --- AMI EZ AZ EGÉSZ: teljes lap, nem kiegészítés ------------------------
Ha valaki elolvassa, akkor azt olvassa. A menü, a verzió és a támogatás
ilyenkor elkerül az útból, és egyetlen gomb marad: vissza. Egy nyitott
szöveg alatt ott hagyni a menüt annyi, mintha két lapot mutatnánk
egyszerre, és egyiket sem rendesen. */
/* A WHAT IS THIS ugyanaz a modal, mint a verziotortenet. */
#about { position:fixed; inset:0; z-index:80; display:none;
align-items:center; justify-content:center;
background:rgba(2,8,16,.86); backdrop-filter:blur(3px); }
#about.on { display:flex; }
#about-close { font:inherit; font-size:10px; letter-spacing:.14em; cursor:pointer;
color:#cdeaf8; background:rgba(255,255,255,.06);
border:1px solid rgba(120,190,230,.3); border-radius:4px;
padding:5px 12px; }
#about-close:hover { background:rgba(255,255,255,.12); }
#about-body { color:#9dbccd; font-size:12.5px; line-height:1.65; }
#about-body p { margin:0 0 11px; }
#about-body .splash-legal { margin-top:22px; padding-top:16px;
border-top:1px solid rgba(90,140,175,.22); }
/* --- a támogatás gombjának mérete, a `.sm` UTÁN --------------------------
A `.sm` lejjebb áll a fájlban, és `width:100%`-ot ad: azonos erősségnél a
későbbi nyer, tehát a gomb kitöltötte a sort ahelyett, hogy a menü
gombjaival egyforma lett volna. Ami rögzített méret, annak itt a helye. */
.give-btn { width:var(--gomb-sz); flex:0 0 auto; }
.give-sor { width:max-content; max-width:100%; }
/* --- MOBILON: amit tudunk, azt megmondjuk ---------------------------------
Nem zárjuk ki a készüléket — hátha megy —, csak nem hagyjuk, hogy valaki
azt higgye, ez itt egy kipróbált mobiljáték. A `pointer: coarse` nem azt
kérdezi, MILYEN a készülék, hanem azt, ami számít: ujjal mutatnak-e rá.
Egérrel használt gépen a sor nem is létezik. */
#mobil-fig { display:none; }
@media (pointer: coarse) {
#mobil-fig { display:block; max-width:330px; margin:2px 0 0;
padding:11px 14px; border-radius:4px;
background:rgba(120,90,30,.22);
border:1px solid rgba(230,180,90,.45);
color:#e8cf9a; font-size:11.5px; line-height:1.6;
letter-spacing:.02em; }
#mobil-fig b { color:#ffe6b0; }
}
/* --- érintésre: a célválasztás gombja -------------------------------------
Az érintősávban ez az egyetlen gomb, ami nem a hajót vezérli, hanem
megmondja, HOVA menjünk — és érintőképernyőn ez az egyetlen út a
keresőmezőhöz, mert Escape nincs. Öt egyforma gomb közül az ötödik
könnyen elvész, ezért kiemelve áll. */
.tbtn--fo { color:#04202e !important;
background:linear-gradient(180deg,#8fe0ff,#40b6e4) !important;
border-color:transparent !important;
box-shadow:0 0 22px rgba(90,200,255,.35) !important;
font-weight:600; letter-spacing:.14em; }
/* --- FORDÍTSD EL --------------------------------------------------------
Ahol a készülék engedi, magunk állítjuk fekvőre. Ahol nem — iOS-en a
Safari nem ismeri az orientációzárat —, ott csak kérni lehet, és ez a
kérés. Csak érintésre, csak álló helyzetben, és csak repülés közben:
a nyitóképernyő álló helyzetben is olvasható, ott nincs mit kérni. */
#fekvo-fig { display:none; }
@media (pointer: coarse) and (orientation: portrait) {
body.repul #fekvo-fig { position:fixed; inset:0; z-index:60; display:flex;
align-items:center; justify-content:center;
background:rgba(2,8,16,.94); }
.ff-doboz { max-width:280px; padding:0 26px; text-align:center;
color:#9fd0e8; font-size:13px; line-height:1.7;
letter-spacing:.04em; }
.ff-jel { color:#7fc9ef; margin-bottom:18px; }
/* A jel FORDUL, mert a mozdulatot mutatja meg, nem egy allapotot. */
.ff-jel svg { animation:ffford 2.4s ease-in-out infinite; }
@keyframes ffford {
0%, 30% { transform:rotate(0deg); }
55%, 80% { transform:rotate(-90deg); }
100% { transform:rotate(0deg); }
}
}
/* --- érintős kezelőszervek: három gomb ------------------------------------
Egymás alatt, jobb alul, ahol a hüvelykujj van. Nem a billentyűzet
másolata: ujjal nem araszolsz, hanem kiválasztasz valamit és odamész. */
@media (pointer: coarse) {
#touchpad { display:flex; flex-direction:column; align-items:stretch;
gap:8px; right:12px; left:auto; }
/* AMIT FELHOZTAL, A GOMBOK MELLE — NEM MOGEJUK.
A gomboszlop jobbra all, es a kis raktarkijelzo is jobbra allt: ugyanaz a
sarok, ket dolognak. A gombok vannak elol, tehat a szamok tuntek el
moguluk.
A KEPERNYO BAL SZELE NEM JO HELY: ott a gazkar all, es a szamok arra
ultek volna ra. A ket kezeloszerv KOZE valo — ez az ertek a gombsor
legkeskenyebb allasahoz jo (12px perem + 150px gomb + 10px res), es
ennel szelesebb feliratnal a main.js meri ki (lasd `_mpMer`). */
#minepad { left:auto; right:172px; max-width:calc(100vw - 200px); }
#touchpad .tbtn--w { width:auto; min-width:150px; max-width:62vw; }
/* AZ UGRÁS GOMB SZÜRKE, AMÍG NINCS MIRE UGRANI. Nem tiltás, hanem
tájékoztatás: a fontos, hogy MOST nincs kiválasztva semmi. */
#t-jump[disabled], #t-orbit[disabled] {
color:#5d7b8c !important;
background:rgba(20,40,55,.55) !important;
border-color:rgba(90,130,160,.35) !important;
box-shadow:none !important; cursor:default; }
#t-jump, #t-orbit { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* --- beírásos úticél ------------------------------------------------------
Ugyanaz a keret, mint a többi ablaké. A találatokat a fülke keresőjének
logikája adja: két külön kereső két külön eredményt adna ugyanarra a
szóra, és az egyik előbb-utóbb rossz lenne. */
#goto { position:fixed; inset:0; z-index:80; display:none;
align-items:center; justify-content:center;
background:rgba(2,8,16,.86); backdrop-filter:blur(3px); }
#goto.on { display:flex; }
#goto .hist-box { width:min(420px,92vw); }
#goto-close { font:inherit; font-size:10px; letter-spacing:.14em; cursor:pointer;
color:#cdeaf8; background:rgba(255,255,255,.06);
border:1px solid rgba(120,190,230,.3); border-radius:4px;
padding:5px 12px; }
#goto-input { width:100%; box-sizing:border-box; padding:12px 14px;
font:inherit; font-size:14px; color:#dff4ff;
background:rgba(8,26,40,.9); border-radius:4px;
border:1px solid rgba(120,190,230,.4); }
#goto-input:focus { outline:none; border-color:rgba(160,225,255,.85); }
#goto-list { display:flex; flex-direction:column; gap:2px; margin:10px 0 4px;
max-height:44vh; overflow-y:auto; }
.goto-i { display:block; width:100%; text-align:left; font:inherit;
font-size:13px; padding:10px 12px; border-radius:3px; cursor:pointer;
color:#b8dced; background:rgba(255,255,255,.04); border:0; }
.goto-i:hover { background:rgba(90,170,220,.22); color:#eaf7ff; }
/* A MEZO ES A KET GOMB EGY SORBAN. A mezo kapja a maradekot, a gombok
annyit, amennyi a feliratuk — igy forditasban sem szorul ki egyik sem. */
.goto-fej { display:flex; gap:7px; align-items:stretch; }
.goto-fej #goto-input { flex:1 1 auto; min-width:0; }
.goto-fej #goto-do { flex:0 0 auto; width:auto; margin-top:0; white-space:nowrap; }
.goto-fej #goto-close { flex:0 0 auto; white-space:nowrap; }
#goto-do { width:100%; margin-top:8px; padding:13px 18px; border-radius:4px;
font:inherit; font-size:11.5px; letter-spacing:.2em; font-weight:600;
color:#04202e; background:linear-gradient(180deg,#8fe0ff,#40b6e4);
border:0; cursor:pointer; }
/* ========================================================================
ÉRINTŐKÉPERNYŐ — amit ott MÁSKÉNT kell csinálni
------------------------------------------------------------------------
Minden, ami itt áll, KIZÁRÓLAG érintésre érvényes. Egéren egyetlen
képpont sem mozdul el tőle: a `hover: none` és a `pointer: coarse`
együtt csak olyan készüléken igaz, aminek nincs egérmutatója.
===================================================================== */
@media (hover: none) and (pointer: coarse) {
/* --- A NYITÓKÉP A GOMBOK MÖGÉ KERÜL ------------------------------------
Két sorban — fent a menü, lent a kép — a gombokért görgetni kellett:
egy telefon magassága nem fér el két teljes tartalommal. Egy rácscellába
téve viszont a kép HÁTTÉR lesz, és a menü a maga teljes magasságában
elfér előtte. Ugyanaz a kép, ugyanaz a menü, csak nem egymás alatt. */
#splash { grid-template-columns:1fr; grid-template-rows:1fr; }
.splash-art, .splash-text { grid-area:1 / 1; }
.splash-art { z-index:0; }
/* A kép fölé sötét fátyol, hogy a szöveg olvasható maradjon. Enélkül a
csillagok pont a betűk közé esnek, és nincs az a kontraszt, ami ezt
kibírja. */
.splash-art::after { background:linear-gradient(180deg,rgba(3,8,15,.93) 0%,
rgba(3,8,15,.86) 55%,
rgba(3,8,15,.93) 100%); }
.splash-text { z-index:1; overflow-y:auto; padding:4vh 6vw 28px; }
/* A START ELMARAD, mert már van egy gombja ugyanennek: a menü REPÜLJ!
gombja pontosan ugyanazt hívja meg. A kép közepén lebegve csak rákerült
a menüre, és alatta egy mondat állt az egérzárról — egy olyan
készüléken, aminek nincs egere. Egy művelet, egy gomb. */
.art-start { display:none; }
/* A gombszélesség 290 fix képpont volt — egy 375 pontos telefonon a
PayPal-jel, a gomb és az összeg együtt kilógott a jobb szélen, és az
összeg félbevágva állt ott. Ugyanaz a változó adja a menü és az adakozó
gombok szélességét, tehát elég EGY helyen igazítani: a kettő így is
egy vonalban marad. A `min()` miatt szélesebb készüléken minden marad
a réginek. */
:root { --gomb-sz: min(290px, calc(100vw - 150px)); }
/* --- A SARKOKBAN NINCS MŰSZER -----------------------------------------
Négy panel a négy sarokban egy monitoron kényelmes keret; egy telefonon
a kép negyedét viszi el azért, hogy olyasmit mondjon, amit a játékos
nem ott keres. A billentyűkiosztás pedig végképp nem érintésre való. */
#hud { display:none !important; }
/* a radio arca es a test/pajzs viszont marad, a sarkokban, kisebben */
#radio-ki { top:12px; right:12px; width:150px; }
#elet-ki { top:12px; left:12px; width:150px; padding:5px 9px; font-size:10px; }
#elet-ki .ek-sor span { width:40px; font-size:9px; }
/* --- ALUL SEMMI --------------------------------------------------------
A keresőmező és az UGRÓMEGHAJTÓ gomb a billentyűzetes felület része:
érintésre a HOVA MENJÜNK ablak csinálja ugyanezt, nagyobb felülettel.
Kettő egymás alatt csak elveszi a helyet. */
#nav { display:none !important; }
/* --- A FORDÍTSD EL KÉRÉS NEM ÁLLJA EL AZ UTAT --------------------------
Teljes képernyős fátyolként ez MINDEN érintést elnyelt — a vászon meg
sem kapta őket, tehát álló helyzetben egyáltalán nem lehetett
kormányozni. Egy kérés nem zárhatja le a játékot: fent egy sáv,
`pointer-events: none`, és alatta minden működik tovább. */
#fekvo-fig { pointer-events:none; }
}
@media (pointer: coarse) and (orientation: portrait) {
body.repul #fekvo-fig { inset:0 0 auto 0; background:rgba(2,8,16,.90);
padding:10px 0 12px; align-items:flex-start; }
body.repul #fekvo-fig .ff-doboz { max-width:none; padding:0 18px;
display:flex; align-items:center;
gap:12px; text-align:left; }
body.repul #fekvo-fig .ff-jel { margin-bottom:0; flex:0 0 auto; }
body.repul #fekvo-fig .ff-jel svg { width:34px; height:26px; }
body.repul #fekvo-fig .ff-szo { font-size:12px; line-height:1.5; }
}
#thr { display:none; }
/* --- ÉRINTŐS KEZELŐSZERVEK: KISEBB GOMBOK, JOBB ALSÓ SAROK --------------
A gomb akkora legyen, amekkorát az ujj eltalál — de ne nagyobb. A három
széles gomb a kép közepéig ért, és pont oda, ahol az égitestek vannak.
A hüvelykujj a jobb alsó sarokban van; a kezelőszervek is odatartoznak,
a kilátás pedig maradjon kilátás.
Csak érintésre: egéren ez a sáv nem is létezik. */
@media (hover: none) and (pointer: coarse) {
/* EGYFORMA SZELESEK. Kulon-kulon a felirataikhoz igazodva harom kulonbozo
szelessegu gomb allt egymas alatt, es egy leptcso nem sav. A `stretch`
mindharmat a LEGSZELESEBB felirathoz igazitja — a sav szelesseget igy is
a leghosszabb szo szabja meg, tehat forditasban sem szorul ki semmi. */
/* ALACSONYABB GOMBOK. A NAPLO gombja is beallt a sorba, es egy fekvo
telefonon a 38px-es gombokbol ennyi mar nem fert ki; 32px-esbol kifer,
es az ujj meg ezt is eltalalja. */
#touchpad { left:auto; right:10px; bottom:10px;
flex-direction:column; align-items:stretch; gap:5px;
padding:0; }
#touchpad .tbtn--w { width:auto; min-width:0; max-width:none;
height:32px; padding:0 12px;
font-size:10px; letter-spacing:.10em; }
/* A MENU RACSA: a gomboszlop folott, harom oszlopban; a MENU gombra
jon elo, egy valasztasra eltunik. A gombok egyforma szelesek. */
#tmenu { display:none; position:absolute; right:0; bottom:calc(100% + 6px); pointer-events:auto;
grid-template-columns:repeat(3,minmax(96px,max-content)); gap:5px;
padding:6px; background:rgba(6,14,22,.82); border:1px solid rgba(90,170,215,.3);
border-radius:8px; backdrop-filter:blur(3px); }
#tmenu.on { display:grid; }
#tmenu .tbtn--w { width:auto; }
#t-menu.on { background:rgba(50,115,160,.72); border-color:rgba(140,215,255,.8); color:#eaf6ff; }
/* A tiltott UGRÁS nem „halványabb gomb", hanem MÁS állapot: nem lehet
megnyomni, és ezt előre megmondja. */
#t-jump:disabled { color:#5c7488; background:rgba(12,26,38,.6);
border-color:rgba(70,120,150,.35); box-shadow:none; }
/* --- A TOLÓKAR -------------------------------------------------------
Bal oldalon, mert a jobb hüvelykujj a gomboké; és függőlegesen, mert a
sebességet mindenki fentebb-lentebb gondolja, nem jobbra-balra. */
/* CSAK REPULES KOZBEN. A nyitokepernyon nincs mit gazt adni, a kar viszont
a menu es a PayPal-gombok ele alt be — egy kezeloszerv ott van, ahol
dolga van. */
#thr { position:fixed; left:12px; bottom:14px; z-index:41;
display:none; flex-direction:column; align-items:center; gap:6px;
touch-action:none; -webkit-tap-highlight-color:transparent; }
body.repul #thr { display:flex; }
/* GYALOG NINCS TOLOKAR: a helyen a kis kor all */
body.gyalog #thr { display:none !important; }
body.gyalog #stick { display:block; }
#stick { position:fixed; left:14px; bottom:18px; z-index:41; display:none;
touch-action:none; -webkit-tap-highlight-color:transparent; }
/* (7.75) A HARCI KORMANY a jobb also sarokban; a gomboszlop (MISSILE,
MENU) harcban balra huzodik tole */
#hstick { position:fixed; right:14px; bottom:14px; z-index:41; display:none;
touch-action:none; -webkit-tap-highlight-color:transparent; }
body.harcban.repul #hstick { display:block; }
body.harcban.repul #touchpad { right:170px; }
/* (7.76) tiz szazalekkal nagyobb kor, kisebb gomb benne (hosszabb ut) */
.st-kor { position:relative; width:145px; height:145px; border-radius:50%;
background:rgba(8,22,34,.55); border:1px solid rgba(90,170,215,.45); }
.st-gomb { position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px 0 0 -20px;
border-radius:50%; background:rgba(50,115,160,.7); border:1px solid rgba(140,215,255,.8);
box-shadow:0 0 12px rgba(80,170,230,.35); }
.thr-track { position:relative; width:46px; height:46vh; max-height:330px;
min-height:190px; border-radius:10px;
background:rgba(8,22,34,.62);
border:1px solid rgba(90,170,215,.38); overflow:hidden; }
/* A FELSŐ 30% MÁS SZÍN, mert más üzemmód. Egy sáv, amit nem lehet
véletlenül eltalálni anélkül, hogy látnád, hova léptél. */
.thr-ftl { position:absolute; left:0; right:0; top:0; height:30%;
background:linear-gradient(180deg,rgba(150,90,220,.30),
rgba(150,90,220,.10));
border-bottom:1px solid rgba(190,140,255,.45); }
/* A NULLA VONALA. Alatta tolatás — ezért van hely alatta. */
.thr-zero { display:none; } /* (7.07: a nulla a kar alja, tolatas nincs) */
.thr-fill { position:absolute; left:0; right:0; bottom:0; height:0;
background:linear-gradient(180deg,rgba(80,190,240,.55),
rgba(60,150,200,.20)); }
.thr-fill.rev { background:linear-gradient(0deg,rgba(240,150,80,.55),
rgba(200,110,60,.20)); }
.thr-fill.ftl { background:linear-gradient(180deg,rgba(180,120,255,.6),
rgba(120,80,200,.22)); }
/* A gomb KOZEPE alljon az erteken, ne az alja: egy mutato arra mutat,
ahol van, nem ala. */
.thr-knob { position:absolute; left:3px; right:3px; height:22px;
margin-bottom:-11px; border-radius:6px;
background:linear-gradient(180deg,#cfe9fb,#7fb2d0);
box-shadow:0 2px 8px rgba(0,0,0,.55); }
.thr-sor { display:flex; align-items:center; gap:7px; }
.thr-val { font-size:10px; letter-spacing:.08em; color:#9fd0e8;
min-height:1.2em; text-align:right; min-width:56px; }
/* A RADIO JELSZINTJE. Apro sav — nem szamot mond, hanem azt, hogy van-e
egyaltalan mit hallgatni. Kikapcsolt radional kihuny. */
.thr-rad { width:34px; height:5px; border-radius:3px; overflow:hidden;
background:rgba(40,70,90,.55);
border:1px solid rgba(90,170,215,.30); }
.thr-rad i { display:block; height:100%; width:0;
background:linear-gradient(90deg,#4fc3e8,#9ce9ff); }
.thr-rad.ki { opacity:.30; }
.thr-rad.ki i { width:0 !important; }
/* --- SAJAT BILLENTYUZET a HOVA MENJUNK ablakban ----------------------- */
#goto-keys { display:flex; flex-direction:column; gap:5px; margin:9px 0 4px; }
.gk-sor { display:flex; gap:4px; justify-content:center; }
.gk { flex:1 1 0; min-width:0; height:34px; padding:0;
font:inherit; font-size:12px; color:#d6ecf8;
background:rgba(16,40,58,.85); border:1px solid rgba(90,170,215,.30);
border-radius:4px; -webkit-tap-highlight-color:transparent;
touch-action:manipulation; }
.gk:active { background:rgba(60,130,175,.85); color:#eaf6ff; }
.gk-sz { flex:0 0 46px; color:#ffc9b0; }
.gk-hely { flex:1 1 auto; max-width:60%; }
/* A LISTA A FONTOSABB. Ha a keperno alacsony (fekvo telefon), a talalatok
kapjak a helyet, es a billentyuzet lesz keskenyebb — nem forditva. */
#goto .hist-box { width:min(560px,96vw); max-height:94vh; overflow-y:auto; }
/* HAROM SORNYI HELY, MINDIG. A lista magassaga eddig a talalatok
szamaval valtozott, es alatta a billentyuzet ugralt fel-le — gepeles
kozben, amikor epp a betukre nezel. Egy billentyuzet nem mozoghat az
ujjad alol. Harom sor helye all fenn akkor is, ha egy talalat van, es
akkor is, ha egy sem; a talalatok szama ugyanezert harom (lasd main.js),
igy semmi nem szorul ki lathatatlanul a doboz alja ala.
A pontos aritmetika miatt a sor magassaga is ki van mondva:
3 * 38 + 2 * 2 = 118. */
.goto-i { height:38px; padding:0 12px; box-sizing:border-box;
display:flex; align-items:center; }
#goto-list { height:118px; max-height:none; overflow:hidden; }
}
/* --- ÉRINTÉS + FEKVŐ: a menü a kép jobb oldalára ------------------------
Fekvőben a telefon magassága a fele annak, mint állva — egy oszlopba
rendezve ugyanaz a menü hirtelen görgetnivaló lett, és a nyitóképernyőn
görgetni azért, hogy megtaláld az egyetlen gombot, ami számít, pontosan az,
amit el akartunk kerülni.
Ezért fekvőben KÉT hasáb: balra a név és amit tudni kell, jobbra — a kép
sötét felén — a gombok. A rács területei névre szólnak, mert az
automatikus elhelyezés a két hasáb között sorra összeakadna.
Csak érintésen és csak fekvőben: állva marad az egy hasáb, egéren pedig
mindkettőtől független a régi, kétoszlopos nyitókép. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
.splash-text { display:grid; align-content:start;
grid-template-columns:1fr minmax(220px,38%);
/* MIND `auto`. Amig a negyedik sor `1fr` volt, az felszivta
az osszes maradek helyet: a menu felul ragadt, az adakozo
gombok meg az also elen — koztuk egy uveges resz, ami
semmit nem jelentett. Sorosan egymas ala kerulve a ket
dolog egyutt egy hasab, es az is marad. */
grid-template-rows:auto auto auto auto auto;
grid-template-areas:
"lang right"
"brand right"
"load right"
"fig right"
"legal right";
/* Lejjebb az egesz. Feszesen a felso elhez tapadva a nev es
a nyelvsav ugy nezett ki, mintha kicsuszott volna a
kepbol — egy nyitokepernyonek van felso margoja. */
gap:6px 24px; padding:6vh 4vw 2vh; }
.lang-row { grid-area:lang; }
.splash-brand { grid-area:brand; }
#splash-load { grid-area:load; }
#mobil-fig { grid-area:fig; align-self:start; }
/* A menu es az adakozo blokk EGY hasab, egymas alatt, res nelkul. */
.splash-right { display:flex; flex-direction:column; gap:10px;
grid-area:right; align-self:start; }
.splash-give { margin-top:0; padding-top:10px; }
.splash-legal { grid-area:legal; }
#loadstate { grid-area:legal; }
/* Alacsonyabb gombok, mert alacsonyabb a kép. A méretük egymáshoz képest
ugyanaz marad — a rangsort a szín mondja meg, nem a magasság. */
.sm { padding:7px 12px; font-size:10px; letter-spacing:.14em; }
.splash-menu { gap:5px; }
.splash-brand h1 { font-size:clamp(24px,5vw,38px); }
#mobil-fig { font-size:11px; line-height:1.5; }
.give-lead { font-size:9.5px; line-height:1.45; margin-bottom:6px; }
.give-btn { padding:7px 12px; font-size:9.5px; }
.give-row { gap:5px; }
.splash-legal { font-size:9.5px; line-height:1.5; }
:root { --gomb-sz: min(290px, calc(38vw - 90px)); }
}
/* --- ÉRINTÉS + FEKVŐ: a HOVA MENJÜNK ablak --------------------------------
Fekvőben a képernyő magassága a fele, és mindennek EGYSZERRE kell látszania:
a mezőnek, három találatnak és az egész billentyűzetnek. Ha bármelyik
lecsúszik az aljáról, pont az veszett el, amiért az ablak van. Szorosabb
sorok, alacsonyabb billentyűk — de a szerkezet ugyanaz, mint állva. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
#goto .hist-box { width:min(620px,96vw); max-height:96vh; padding:10px 12px; }
.goto-fej { gap:6px; }
.goto-fej #goto-input { padding:8px 10px; font-size:12px; }
.goto-fej #goto-do { padding:8px 12px; font-size:10px; letter-spacing:.14em; }
.goto-fej #goto-close { padding:8px 10px; font-size:9.5px; }
/* Három sornyi hely marad, csak alacsonyabb sorokkal: 3*30 + 2*2 = 94. */
.goto-i { height:30px; font-size:12px; }
#goto-list { height:94px; margin:7px 0 3px; }
#goto-keys { gap:4px; margin:6px 0 2px; }
.gk-sor { gap:3px; }
.gk { height:26px; font-size:11px; }
.gk-sz { flex:0 0 40px; }
}
/* Fekvőben a nyitókép figyelmeztetője is szorosabb: a bal hasáb magassága
ugyanúgy beleszámít abba, hogy kell-e görgetni. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
#mobil-fig { padding:8px 11px; max-width:none; margin-top:10px; }
/* A jogi sor a lap alja — fekvoben az utolso nehany keppont miatt gorgetne
az egesz nyitokepernyo, es egy sor apróbetu nem er annyit. Szorosabban. */
.splash-legal { margin-top:0; padding-top:8px; gap:5px; font-size:9.5px;
line-height:1.45; }
.legal-more { padding:3px 10px; font-size:9px; }
.splash-give { padding-top:8px; }
}
/* Állva van magasság bőven, szélesség viszont nincs: ott a mező a saját
sorát kapja, a két gomb alatta. Egy sorba préselve a mezőből hetven
képpont maradt, és abban a keresett név első szava sem fért el. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
.goto-fej { flex-wrap:wrap; }
.goto-fej #goto-input { flex:1 1 100%; }
.goto-fej #goto-do { flex:1 1 auto; }
}
/* --- A KAR, AMIKOR NEM TE VEZETSZ ---------------------------------------
Ugrás, ütközési fékezés, közelítési korlát: ilyenkor a kar nem parancsol,
hanem MUTAT. A lila FTL-sáv és a kitöltés narancsba vált — nem díszként,
hanem mert ez a legfontosabb, amit ilyenkor mondhat magáról: amit látsz
rajta, az nem a te kezed nyoma. */
.thr-track.auto .thr-ftl { background:linear-gradient(180deg,rgba(230,140,50,.32),
rgba(230,140,50,.10));
border-bottom-color:rgba(255,180,90,.5); }
.thr-track.auto .thr-fill,
.thr-track.auto .thr-fill.ftl,
.thr-track.auto .thr-fill.rev { background:linear-gradient(180deg,rgba(255,175,80,.6),
rgba(210,120,45,.22)); }
.thr-track.auto .thr-knob { background:linear-gradient(180deg,#ffd9a8,#d89a55); }
/* --- SAJÁT TEXTÚRA a katalógusban ---------------------------------------
A generálás fölött áll, mert a sorrend állítás: aki TUDJA, milyen egy
égitest felszíne, annak nem kell kitaláltatnia. Két forrás egy sorban —
egy lementett fájl vagy egy webcím —, és a kettő ugyanoda érkezik. */
.cat-tex { margin:12px 0 8px; padding-top:10px;
border-top:1px solid rgba(90,170,215,.16); }
.cat-tex-h { font-size:9.5px; letter-spacing:.20em; color:#5d90ac; margin-bottom:7px; }
.cat-tex-sor { display:flex; gap:6px; align-items:stretch; }
/* A tallózó gomb egy CÍMKE a rejtett mezőn: a böngésző saját gombja
rendszerenként másképp néz ki, és nem lehet a többihez igazítani. */
.cat-tex-f { flex:0 0 auto; display:flex; align-items:center; cursor:pointer;
max-width:150px; padding:0 11px; border-radius:3px;
font-size:10px; letter-spacing:.10em; color:#bcd9ea;
background:rgba(20,52,74,.5); border:1px solid rgba(96,150,185,.38); }
.cat-tex-f:hover { color:#e6f7ff; background:rgba(34,84,116,.62); }
.cat-tex-f input { display:none; }
.cat-tex-f span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-tex-url { flex:1 1 auto; min-width:0; padding:8px 10px; font:inherit;
font-size:11px; color:#d6ecf8; background:rgba(4,16,26,.85);
border:1px solid rgba(90,170,215,.32); border-radius:3px; }
.cat-tex-url:focus { outline:none; border-color:rgba(160,225,255,.8); }
.cat-tex-go { flex:0 0 auto; padding:0 14px; font:inherit; font-size:10px;
letter-spacing:.16em; font-weight:600; cursor:pointer;
color:#04202e; background:linear-gradient(180deg,#8fe0ff,#40b6e4);
border:0; border-radius:3px; }
.cat-tex-go:disabled { color:#5c7488; background:rgba(12,26,38,.7); cursor:default; }
.cat-tex-msg { min-height:1.4em; margin-top:6px; font-size:10px;
line-height:1.45; color:#7fb3cb; }
.cat-tex-msg.err { color:#ffa8a8; }
/* --- MINDENKI: MÁSIK FAJTA CÍMZETT --------------------------------------
A műszerfal minden felirata a HUD színét veszi föl — ez a fülke egyetlen
színrendszere, és jó, hogy egy. A körbemondás viszont nem egy név a nevek
közül: nem tudod, ki hallja, csak azt, hogy aki a közelben van. Ez más
fajta cím, nem más fokozata ugyanannak — ezért kap saját színt, és ezért
nem veszi át a HUD-ét. Zöld, mert az a rádiós műszerek nyelvén a NYITOTT
csatorna, nem a kiválasztott. */
.ck-rel-i.mind { color:#6ee79a !important; border-color:rgba(110,231,154,.45) !important; }
.ck-rel-i.mind.on { color:#04220f !important;
background:linear-gradient(180deg,#8ff5b4,#4cc47c) !important;
border-color:rgba(150,255,190,.9) !important; }
.ck-com-to.mind { color:#6ee79a !important; }
/* --- ÜZENŐFAL a fülkében -------------------------------------------------
Nem egy üzenet, hanem ami elhangzott. Minden új sor a többi ALÁ kerül, a
legfrissebb legalul — ez a rádió természetes sorrendje —, és ha megtelik,
görgethető. A fejléc EGY sor: a becenév és az idő egymás mellett, mert két
külön sorra téve a fele hely arra menne el, hogy KI és MIKOR. */
.ck-mes-lista { display:block; width:100%; flex:1 1 auto; min-height:0;
max-height:100%; overflow-y:auto; pointer-events:auto; }
.ck-mes-sor { display:block; margin-bottom:5px; }
.ck-mes-sor:last-child { margin-bottom:0; }
.ck-mes-fej { display:flex; justify-content:space-between; align-items:baseline;
gap:8px; font-weight:400; opacity:.72; }
.ck-mes-fej .ck-mes-who { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ck-mes-fej .ck-mes-t { flex:0 0 auto; }
.ck-mes-lista .ck-mes { display:block; }
/* A görgetősáv a fülke műszerén ne legyen fehér ablakos csík. */
.ck-mes-lista::-webkit-scrollbar { width:4px; }
.ck-mes-lista::-webkit-scrollbar-thumb { background:rgba(140,200,235,.35); border-radius:2px; }
.ck-mes-lista::-webkit-scrollbar-track { background:transparent; }
/* --- A KAPCSOLAT BEKAPCSOLÁSA ---------------------------------------------
Egy régi konzol írja ki magát: soronként, balra zárva, egyenletes betűvel.
Nem animáció a szó díszítő értelmében — ez a MŰSZER bekapcsolása, és
ugyanaz a betű, ugyanaz a szín, mint a többi kiíráson. */
/* AZ ARC A RADION: az egesz jobb felso kijelzon - a kep (alatta), a mozgo
klip vaszna (folotte, amig van kocka), a zaj es a futo csik, a sarokban a
nev. A panel maga remeg es villan neha (rossz vetel). */
.ck-radio-t { position:absolute; inset:0; display:block; overflow:hidden; filter:contrast(1.15) saturate(.8);
animation:ck-radio-remeg 3.1s steps(1) infinite; }
.ck-radio-t .ck-radio-kep { position:absolute; inset:0; background-size:cover; background-position:center; }
.ck-radio-t canvas.ck-radio-v { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.ck-radio-t .ck-zaj { position:absolute; inset:0;
background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); mix-blend-mode:multiply; }
.ck-radio-t .ck-zaj2 { position:absolute; left:0; right:0; height:14%;
background:linear-gradient(180deg, transparent, rgba(180,230,255,.28), transparent); animation:ck-zaj-fut 1.7s linear infinite; }
.ck-radio-cim { position:absolute; left:6px; right:6px; bottom:5px; display:flex; flex-direction:column; gap:2px; text-align:left;
text-shadow:0 0 6px rgba(0,0,0,.9), 0 0 2px #000; }
.ck-radio-cim b { font-weight:400; font-size:.42em; letter-spacing:.2em; color:#ff8c5a; }
.ck-radio-cim i { font-style:normal; font-size:.46em; letter-spacing:.1em; line-height:1.3; color:#f2e6a8; }
.ck-radio-cim u { display:block; height:3px; width:40%; text-decoration:none; background:linear-gradient(90deg, #ff8c5a 0 50%, transparent 50% 100%); background-size:8px 3px;
animation:ck-radio-jel .6s steps(4) infinite; opacity:.8; }
/* A RADIO ARCA A FULKEN KIVUL: egy kis 16:9 ablak a jobb felso sarokban, a
HUD lapja alatt; a kep ugyanaz a vaszon (kocka + zaj), a nev alul */
/* A RADIO ARCA A FEJEZETCIM UVEGE FOLOTT (z 60): aki beszel, az latszik -
a halvanyitas a tajra szol, nem a hivo arcara. */
#radio-ki { position:fixed; top:16px; right:16px; width:200px; aspect-ratio:16/9; overflow:hidden; z-index:62; pointer-events:none;
border:1px solid rgba(80,190,255,.35); border-radius:3px; background:#050a10; filter:contrast(1.15) saturate(.8);
animation:ck-radio-remeg 3.1s steps(1) infinite; }
#radio-ki[hidden] { display:none; }
/* A HAJO SAJAT KEPE: nem remeg, nem villan, a szine tiszta */
#radio-ki.sajat, .ck-radio-t.sajat { animation:none; filter:none; }
#radio-ki.sajat .rk-cim b, .ck-radio-t.sajat .ck-radio-cim b { color:#7fd3ff; }
#radio-ki.sajat .rk-cim u, .ck-radio-t.sajat .ck-radio-cim u { background:linear-gradient(90deg, #7fd3ff 0 50%, transparent 50% 100%); background-size:8px 3px; }
#radio-ki canvas { display:block; width:100%; height:100%; object-fit:cover; }
#radio-ki .rk-cim { position:absolute; left:6px; right:6px; bottom:5px; display:flex; flex-direction:column; gap:2px; text-align:left;
text-shadow:0 0 6px rgba(0,0,0,.9), 0 0 2px #000; font-family:'Share Tech Mono', 'Consolas', monospace; }
#radio-ki .rk-cim b { font-weight:400; font-size:9px; letter-spacing:.2em; color:#ff8c5a; }
#radio-ki .rk-cim i { font-style:normal; font-size:10px; letter-spacing:.1em; line-height:1.3; color:#f2e6a8; }
#radio-ki .rk-cim u { display:block; height:3px; width:40%; text-decoration:none; background:linear-gradient(90deg, #ff8c5a 0 50%, transparent 50% 100%); background-size:8px 3px;
animation:ck-radio-jel .6s steps(4) infinite; opacity:.8; }
/* A TEST ES A PAJZS A FULKEN KIVUL: ket sav a bal felso sarokban, a
sebesseg lapja alatt - narancs a test, kek a pajzs */
#elet-ki { position:fixed; top:96px; left:16px; width:190px; padding:8px 12px; z-index:30; pointer-events:none; box-sizing:border-box;
background:rgba(4,14,24,.42); border:1px solid rgba(80,190,255,.22); border-radius:3px; backdrop-filter:blur(3px);
font-size:11px; letter-spacing:.08em; color:#f2e6a8; }
#elet-ki[hidden] { display:none; }
#elet-ki .ek-sor { display:flex; align-items:center; gap:8px; line-height:1.9; }
#elet-ki .ek-sor span { width:48px; color:#8fb6cc; font-size:10px; }
#elet-ki .ek-sor em { flex:1; height:5px; background:rgba(120,170,200,.16); border-radius:1px; overflow:hidden; }
#elet-ki .ek-sor em i { display:block; height:100%; width:100%; transition:width .25s; }
#elet-ki .ek-hull { background:#ff9a3c; box-shadow:0 0 5px rgba(255,154,60,.6); }
#elet-ki .ek-pajzs { background:#4fb8ff; box-shadow:0 0 5px rgba(79,184,255,.6); }
#elet-ki .ek-sor b { width:34px; text-align:right; font-weight:400; }
#elet-ki.baj .ek-hull { background:#e0574a; }
@keyframes ck-zaj-fut { 0% { top:-16%; } 100% { top:100%; } }
@keyframes ck-radio-remeg { 0%,7%,100% { transform:translateX(0); opacity:1; } 8% { transform:translateX(3px); opacity:.85; } 9% { transform:translateX(-2px); }
10% { transform:translateX(0); } 52% { opacity:1; } 53% { opacity:.6; } 54% { opacity:1; } 71% { transform:translateX(0); } 72% { transform:translateX(-4px) skewX(3deg); } 73% { transform:translateX(0); } }
@keyframes ck-radio-jel { 0% { background-position:0 0; } 100% { background-position:8px 0; } }
.ck-boot { display:block; width:100%; text-align:left; }
.ck-boot-s { display:block; font-size:.5em; line-height:1.5; letter-spacing:.08em;
color:var(--hud-color,#f2e6a8); white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; }
/* --- KAMERAKÉP ------------------------------------------------------------
A szondakamera és az összetett nézet előnézete NEM ablak, hanem FELVÉTEL —
és eddig pontosan úgy néztek ki, mint egy makulátlan renderelés. Ami egy
képet felvétellé tesz, az nem a geometria: a lencse pereme sötétebb, a
szenzornak szemcséje van, a leolvasás sávot húz, és a széleken a színek
szétválnak. Négy réteg, mind statikus CSS — egyetlen képkockát sem kerül.
Geometriai torzítást szándékosan NEM teszek rá. Egy középre helyezett gömb
hordótorzítása gyakorlatilag láthatatlan (a kör kör marad), viszont vagy egy
teljes utófeldolgozó lépést kíván a saját renderelőnkben, vagy egy SVG
szűrőt, ami a mozgó képen minden képkockán újraszámol. Az ár nem áll arányban
azzal, amit hozzáad. */
.kamera { position:absolute; inset:0; pointer-events:none; overflow:hidden;
border-radius:inherit; }
/* A kozmikus csik a lencsen belul is megjelenhet — ott egy kis feluleten
sokkal feltunobb, mint a teljes kepen. */
.kamera .kozmi { z-index:2; }
/* 1) A LENCSE PEREME. Erősebb, mint egy dísz-vignetta: egy valódi objektív
széle mérhetően kevesebb fényt gyűjt. */
.kamera::before { content:''; position:absolute; inset:0;
background:
radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 46%, rgba(0,0,0,.62) 100%),
/* 2) A SZÍNEK SZÉTVÁLNAK a széleken — az objektív a kéket és a vöröset
nem ugyanoda töri. Alig látszik, és pont ettől hiteles. */
radial-gradient(ellipse at 49.4% 50%, rgba(255,60,60,0) 62%, rgba(255,60,60,.07) 100%),
radial-gradient(ellipse at 50.6% 50%, rgba(60,140,255,0) 62%, rgba(60,140,255,.07) 100%); }
/* 3) A LEOLVASÁS SÁVJA és a szemcse. A sorok egy képérzékelő sajátjai; a
halvány, lassan úszó sáv az, ahol a leolvasás épp jár. */
.kamera::after { content:''; position:absolute; left:0; right:0; top:-30%;
height:160%;
background:
repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px,
rgba(0,0,0,0) 1px 3px),
linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(160,220,255,.045) 48%,
rgba(255,255,255,0) 52%);
animation:kamerasav 7.5s linear infinite; }
@keyframes kamerasav { from { transform:translateY(-18%); }
to { transform:translateY(18%); } }
@media (prefers-reduced-motion: reduce) { .kamera::after { animation:none; } }
/* --- KOZMIKUS RÉSZECSKÉK -------------------------------------------------
Nem hullócsillag: azok légköri jelenségek, űrben nincsenek. Ami VAN, és
pont így néz ki: egy nagy energiájú részecske áthalad az érzékelőn, és egy
fényes csíkot hagy rajta. A Hubble minden hosszú felvétele tele van velük.
Ezért a gyakoriságuk a sugárzásszinttel nő — ugyanabból a számból, amit a
Geiger-számláló is mutat. */
#kozmikus { position:fixed; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
.kozmi { position:absolute; height:1px; transform-origin:0 50%;
background:linear-gradient(90deg, rgba(255,255,255,0) 0%,
rgba(255,255,255,.95) 45%,
rgba(190,225,255,.9) 60%,
rgba(255,255,255,0) 100%);
opacity:0; animation:kozmi .22s linear forwards; }
@keyframes kozmi { 0% { opacity:0; } 12% { opacity:1; } 70% { opacity:1; }
100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .kozmi { display:none; } }
/* --- A DOSSZIÉ SZONDAKÉPE IS MOZOG ----------------------------------------
A fülke kis paneljén a kép régóta vándorol; az összetett nézetben ugyanaz a
felvétel mozdulatlanul állt. Ugyanaz a kamera nézi — akkor ugyanúgy is kell
viselkednie. Ugyanazok a kulcskockák, ugyanazok a periódusok. */
.cx-lens { overflow:hidden; }
.cx-lens .cx-lens-img { background-size:auto 200%; background-repeat:no-repeat;
animation:cklens 46s ease-in-out infinite,
ckcam2 37s ease-in-out infinite;
transform-origin:50% 62%; will-change:transform; }
@keyframes ckcam2 {
0% { transform:scale(1.05); }
22% { transform:scale(1.12); }
44% { transform:scale(1.07); }
67% { transform:scale(1.14); }
85% { transform:scale(1.06); }
100% { transform:scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.cx-lens .cx-lens-img { animation:none; }
}
/* --- A SUGO ---------------------------------------------------------------
Ket oszlop: balra minden kezeloszerv, jobbra minden nyersanyag. Egy lapon,
gorgetheto — mert harminc billentyu es tizenot anyag egyszeruen ennyi hely,
es kettevagva mar nem lenne az, amiert van: EGY hely, ahol minden ott all. */
#help, #missions, #hangar, #hirmodal { position:fixed; inset:0; z-index:72; display:none;
align-items:center; justify-content:center; background:rgba(2,6,12,.82); }
#help.on, #missions.on, #hangar.on, #hirmodal.on { display:flex; }
/* A HIR (lasd ui/Hirmodal.js): a naplo kerete, kisebben - balra a kep
(itt szelesebb, mert a kep maga a hir), jobbra a cim, a szoveg es a
billentyuk kockaban */
#hirmodal .hm-box { display:flex; padding:0; overflow:hidden; width:min(760px,94vw); max-height:88vh; }
#hirmodal .ms-hero { flex:0 0 34%; min-height:320px; }
#hirmodal .hm-al { font-size:10px; letter-spacing:.22em; color:#8fe0ff; margin:-6px 0 10px; }
#hirmodal .hm-szoveg { flex:0 1 auto; }
#hirmodal .hm-kulcsok { display:grid; grid-template-columns:1fr; gap:6px; margin-top:10px; }
#hirmodal .hm-k { display:flex; align-items:center; gap:10px; font-size:11px; color:#bcd8e8; }
#hirmodal .hm-k span { display:flex; gap:3px; min-width:5.5em; }
#hirmodal .hm-k i { font-style:normal; font-size:10px; padding:2px 7px; border:1px solid rgba(143,224,255,.45);
border-radius:3px; color:#8fe0ff; letter-spacing:.08em; }
#hirmodal .hm-k b { font-weight:400; letter-spacing:.12em; }
@media (max-width:720px) { #hirmodal .hm-box { flex-direction:column; } #hirmodal .ms-hero { flex:0 0 140px; min-height:140px; border-right:none; } }
/* A TERMINAL (az allomas belsejeben): egy tablazat, ket gomb soronkent. */
#terminal { position:fixed; inset:0; z-index:72; display:none; align-items:center; justify-content:center; background:rgba(2,6,12,.82); }
#robot { position:fixed; inset:0; z-index:72; display:none; align-items:center; justify-content:center; background:rgba(2,6,12,.55); }
#robot.on { display:flex; }
.rb-box { width:min(620px,94vw); }
.rb-cim { font-size:11px; letter-spacing:.25em; color:#6f93a8; margin-left:auto; margin-right:18px; }
.rb-szoveg { font-size:14px; line-height:1.55; letter-spacing:.04em; color:#dbe8f0; min-height:64px; margin:6px 0 14px; }
.rb-gombok { display:flex; flex-direction:column; gap:8px; }
.rb-gombok button { font:inherit; font-size:12px; letter-spacing:.14em; text-align:left; padding:9px 14px; cursor:pointer;
color:#c9dbe6; background:rgba(20,40,60,.55); border:1px solid rgba(90,140,175,.4); border-radius:3px; }
.rb-gombok button:hover { background:rgba(40,80,120,.6); }
.rb-gombok button.rb-vissza { color:#8fb3c8; border-style:dashed; }
.rb-gombok button.rb-kuld { color:#ffb84a; border-color:rgba(255,184,74,.45); }
.rb-gombok button.rb-kuld:hover { background:rgba(90,60,20,.55); }
/* (7.98) a hajtomu hibaja (a les): piros, vibralo sorok es razkodas */
#hiba-fx { position:fixed; inset:0; pointer-events:none; z-index:40; opacity:0;
background:repeating-linear-gradient(0deg, rgba(255,50,40,.13) 0 2px, transparent 2px 5px),
radial-gradient(ellipse at center, transparent 45%, rgba(140,0,0,.35) 100%); }
#hiba-fx.on { animation:hibaFx 2.6s steps(1) forwards; }
@keyframes hibaFx { 0%{opacity:.95;transform:translateX(-8px)} 6%{opacity:.25;transform:translateX(6px)} 12%{opacity:.85;transform:none}
20%{opacity:.1} 27%{opacity:.75;transform:translateX(-4px) skewX(2deg)} 36%{opacity:.2} 45%{opacity:.6;transform:translateX(3px)}
56%{opacity:.12} 66%{opacity:.4} 78%{opacity:.08} 88%{opacity:.22} 100%{opacity:0} }
#gl.razkod { animation:glRazkod 2.4s linear; }
@keyframes glRazkod { 0%,100%{transform:none} 5%{transform:translate(-5px,3px)} 10%{transform:translate(4px,-3px)} 15%{transform:translate(-3px,-2px)}
22%{transform:translate(3px,2px)} 30%{transform:translate(-2px,1px)} 40%{transform:translate(2px,-1px)} 55%{transform:translate(-1px,1px)} 70%{transform:translate(1px,0)} }
/* (8.40) az urbeli kereses jele: egy masodpercig vibralo zold kor (a kepen)
vagy nyil (a kep szelen, amerre a jelado van) - a helyet a main irja */
#ker-jel { position:fixed; left:0; top:0; pointer-events:none; z-index:39; display:none; }
#ker-jel.on { display:block; animation:kerVibr .12s steps(2) infinite; }
#ker-jel.kor { width:54px; height:54px; margin:-30px 0 0 -30px; border:3px solid #4dff7a; border-radius:50%;
box-shadow:0 0 14px #4dff7a, inset 0 0 10px rgba(77,255,122,.5); }
#ker-jel.nyil { width:0; height:0; margin:-15px 0 0 -15px; border-left:30px solid #4dff7a;
border-top:15px solid transparent; border-bottom:15px solid transparent; filter:drop-shadow(0 0 7px #4dff7a); }
#ker-jel.siker { animation:none; border-width:2px; }
@keyframes kerVibr { 0%,100%{opacity:var(--ko,1)} 50%{opacity:calc(var(--ko,1) * .55)} }
#robot.szol .rb-gombok button { opacity:.8; }
/* az allomason a repules gombjai eltunnek (main: allomason) */
#touchpad .tbtn.allomas-rejt { display:none !important; }
/* ami most nem hasznalhato, az nem all ott szurken (lasd main: `nem-kell`) */
#touchpad .tbtn.nem-kell { display:none !important; }
#terminal.on { display:flex; }
.tm-box { width:min(760px,94vw); }
/* A MEZO TERMINALJA: ot mondat, olvashato sorokban */
.tm-mezo { padding:.4em 0 .2em; }
.tm-mezo p { margin:0 0 .9em; font-size:.92em; line-height:1.55; letter-spacing:.03em; color:#d8e8f4; max-width:62ch; }
.tm-mezo p::before { content:'\25B8'; color:#4fb8ff; margin-right:.6em; }
.tm-kredit { font-size:13px; letter-spacing:.2em; color:#ffd27a; margin-left:auto; margin-right:18px; }
.tm-tabla { width:100%; border-collapse:collapse; font-size:12px; letter-spacing:.08em; }
.tm-tabla th { text-align:left; color:#6f93a8; font-weight:600; font-size:10px; letter-spacing:.2em; padding:6px 8px; border-bottom:1px solid rgba(90,140,175,.32); }
.tm-tabla td { padding:6px 8px; border-bottom:1px solid rgba(90,140,175,.14); color:#c9dbe6; }
.tm-tabla a { color:#9fd0ff; text-decoration:none; }
.tm-tabla a:hover { text-decoration:underline; }
.tm-tabla td.tm-mi { color:#7fa4bb; }
.tm-jegyzek { max-height:min(58vh,520px); display:block; overflow-y:auto; }
.tm-fulek, .tm-fulek2 { display:flex; gap:6px; margin:0 0 10px; }
.tm-fulek2[hidden], .tm-targyak[hidden] { display:none; }
.tm-fulek button, .tm-fulek2 button { padding:7px 12px; font:inherit; font-size:10px; letter-spacing:.16em; color:#7fa4bb;
background:transparent; border:1px solid rgba(90,140,175,.35); border-radius:3px; cursor:pointer; }
.tm-fulek button.on, .tm-fulek2 button.on { color:#cfe9f7; background:rgba(90,150,190,.22); border-color:rgba(140,200,235,.6); }
.tm-jegyzek thead, .tm-jegyzek tbody, .tm-jegyzek tr { display:table; width:100%; table-layout:fixed; }
.tm-tabla td.tm-sz { text-align:right; font-variant-numeric:tabular-nums; }
.tm-tabla button { font:inherit; font-size:10px; letter-spacing:.16em; padding:4px 9px; margin-left:4px; cursor:pointer;
background:rgba(40,80,110,.35); color:#bfe6ff; border:1px solid rgba(120,190,230,.45); border-radius:3px; }
.tm-tabla button:disabled { opacity:.35; cursor:default; }
/* A HANGAR (Y): harom kartya egymas mellett, mindegyiken egy forgo modell. */
/* A HANGAR A NAPLO KERETEBEN: kep balra, ket ful, a lap; a kartyan fenykep */
#hangar .hg-box.ms-box { display:flex; padding:0; overflow:hidden; width:min(900px,94vw); height:min(640px,88vh); max-height:88vh; }
#hangar .ms-hero.hg-hero { background-image:url(../img/hangar_hero.jpg); }
.hg-sor { display:grid; grid-template-columns:1fr; gap:8px; }
.hg-k { position:relative; display:grid; grid-template-columns:136px 1fr 112px; gap:12px; align-items:center; padding:4px 8px 4px 4px; border:1px solid rgba(90,140,175,.32);
border-radius:5px; background:rgba(8,20,32,.6); }
.hg-k.hg-akt { border-color:rgba(140,220,255,.7); box-shadow:0 0 22px rgba(90,200,255,.12) inset; }
.hg-k .hg-kep { width:100%; height:auto; aspect-ratio:8/5; display:block; border-radius:3px; object-fit:contain; background:rgba(8,20,32,.5); }
.hg-sz { min-width:0; display:flex; flex-direction:column; gap:3px; }
.hg-gomb .hg-g { padding:7px 8px; }
.hg-gomb { display:flex; flex-direction:column; gap:5px; }
.hg-kr { color:#f2e6a8; border-color:rgba(242,230,168,.4); font-variant-numeric:tabular-nums; }
.hg-kr.ki { color:#7a8a94; border-color:rgba(120,140,160,.3); }
.hg-kr.ki:hover { background:rgba(60,80,100,.25); }
.hg-k canvas.hg-v { width:100%; height:auto; aspect-ratio:3/2; display:block; border-radius:3px;
background:radial-gradient(ellipse at 50% 60%, rgba(30,60,90,.55), rgba(4,10,18,.9)); }
.hg-k h3 { margin:2px 0 0; font-size:12px; font-weight:600; letter-spacing:.22em; color:#8fe0ff; }
.hg-k p { margin:0; font-size:11px; line-height:1.6; color:#9dbccd; flex:1; }
.hg-credit { font-style:normal; font-size:9.5px; letter-spacing:.06em; color:#5f8298; line-height:1.5; }
.hg-g { display:block; width:100%; box-sizing:border-box; padding:9px 12px; font:inherit; font-size:10.5px;
letter-spacing:.18em; text-align:center; color:#cfe9f7; background:rgba(90,150,190,.20);
border:1px solid rgba(120,180,215,.45); border-radius:3px; cursor:pointer; font-weight:600; }
.hg-g:hover { background:rgba(120,190,230,.34); }
b.hg-g { cursor:default; color:#7fa4bb; background:transparent; }
b.hg-g.on { color:#9ff0b8; border-color:rgba(120,240,170,.5); }
.hg-ar { color:#ffe9a8; border-color:rgba(255,220,140,.5); }
/* A FULEK ES A SZINEZO. */
.hg-fulek { display:flex; gap:6px; }
.hg-ful { padding:7px 12px; font:inherit; font-size:10px; letter-spacing:.16em; color:#7fa4bb;
background:transparent; border:1px solid rgba(90,140,175,.35); border-radius:3px; cursor:pointer; }
.hg-ful.on { color:#cfe9f7; background:rgba(90,150,190,.22); border-color:rgba(140,200,235,.6); }
.hg-penz { color:#8fb6cc; border-left:2px solid rgba(255,220,140,.45); padding-left:10px; }
.hg-szin { display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; }
.hg-szin canvas.hg-szin-v { aspect-ratio:5/3; width:100%; height:auto; min-width:0; display:block; border-radius:3px;
background:radial-gradient(ellipse at 50% 60%, rgba(30,60,90,.55), rgba(4,10,18,.9)); }
.hg-szin { min-width:0; }
.hg-szin-p h3 { margin:2px 0 6px; font-size:12px; font-weight:600; letter-spacing:.22em; color:#8fe0ff; }
.hg-szin-p p { margin:0 0 12px; font-size:11px; line-height:1.6; color:#9dbccd; }
.hg-pick { display:flex; align-items:center; gap:12px; margin-bottom:10px; font-size:10.5px; letter-spacing:.16em; color:#cfe9f7; cursor:pointer; }
.hg-pick input { width:56px; height:36px; padding:0; border:1px solid rgba(120,180,215,.45); border-radius:3px; background:transparent; cursor:pointer; }
@media (max-width:760px) { .hg-szin { grid-template-columns:1fr; } }
/* FIOK NELKUL A KET MEGVEHETO HOMALYOS: latszik, hogy van, nem az, hogy mi. */
.hg-homaly .hg-kep, .hg-homaly h3, .hg-homaly p, .hg-homaly .hg-credit { filter:blur(4px); opacity:.55; pointer-events:none; }
@media (max-width:760px) { .hg-k { grid-template-columns:110px 1fr; } .hg-gomb { grid-column:1 / -1; } }
#hangar .hg-penz { margin:0 0 4px; font-size:10.5px; line-height:1.45; }
#hangar .hg-fiok { margin:0 0 8px; font-size:10.5px; line-height:1.45; }
#hangar .hg-k p { font-size:10.5px; line-height:1.45; }
#hangar .hg-k h3 { font-size:11px; }
#hangar .hg-credit { font-size:9px; line-height:1.3; }
#hangar .hg-sor { gap:6px; }
.hg-msg { margin:0 auto 0 0; align-self:center; font-size:10.5px; letter-spacing:.08em; }
/* A KULDETESLAP (F9). Ugyanaz a doboz, mint a sugoe; egy kuldetes egy
csoport, a cim mellett jobbra a szamlalo, alatta a lepesek pipaval. */
#missions .hp-box { width:min(860px,94vw); height:min(600px,86vh); } /* (minden ful ugyanakkora; ha sok, gorgetunk) */
/* A KULDETESLAP KERETE: balra a kep, jobbra a lap */
#missions .ms-box { display:flex; padding:0; overflow:hidden; }
.ms-hero { flex:0 0 15%; background:url(../img/mission_hero.jpg) center/cover no-repeat; border-right:1px solid rgba(120,180,210,.18); }
.ms-jobb { flex:1; min-width:0; display:flex; flex-direction:column; padding:18px 22px 20px; }
.ms-jobb .hp-fej { margin-bottom:12px; }
#missions .hp-cs h3 { display:flex; align-items:baseline; }
#missions .hp-cs h3 u { margin-left:auto; text-decoration:none; color:#8fe0ff;
font-variant-numeric:tabular-nums; letter-spacing:.14em; }
#missions .ms-kesz h3, #missions .ms-kesz h3 u { color:#9ff0b8; }
.ms-l { display:grid; grid-template-columns:1.6em 1fr auto; gap:8px; align-items:baseline;
margin-bottom:3px; font-size:11.5px; line-height:1.55; color:#7fa4bb; }
.ms-l.on { color:#bcd8e8; }
.ms-l b { font-weight:400; color:#4e93b8; text-align:center; }
.ms-l.on b { color:#9ff0b8; }
.ms-l i { font-style:normal; font-size:10px; letter-spacing:.12em; color:#5f8298; }
.ms-figyelem { color:#f0c070; }
/* A KULDETESLAP FULEI: igazi fulek - a nyitott a lap szinet viszi es a
lap felso vonalaba olvad, a tobbi hatrebb all; alattuk a keretes lap,
benne a csempek racsa */
.ms-fulek { display:flex; gap:4px; margin:0; padding:0 6px; }
.ms-fulek button { font:inherit; font-size:10px; letter-spacing:.2em; padding:8px 16px 7px; cursor:pointer; margin-bottom:-1px;
color:#6f94ab; background:rgba(14,34,50,.6); border:1px solid rgba(120,180,210,.22); border-bottom:none;
border-radius:5px 5px 0 0; position:relative; top:2px; }
.ms-fulek button.on { color:#e8f4ff; background:rgba(22,52,76,.9); border-color:rgba(140,210,240,.45); top:0; padding-top:9px; z-index:1; }
.ms-panel { flex:1; min-height:0; overflow-y:auto; padding:12px 14px 14px; background:rgba(22,52,76,.35);
border:1px solid rgba(140,210,240,.3); border-radius:6px; }
.ms-panel .ms-fiok { margin:0 0 10px; }
.ms-racs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media (max-width:640px) { .ms-racs { grid-template-columns:1fr; } }
.ms-a { display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:center; padding:11px 12px; border-radius:5px;
font-size:11px; letter-spacing:.06em; color:#a9c8dc; cursor:default;
background:rgba(10,26,40,.55); border:1px solid rgba(120,180,210,.28); border-left-width:3px; }
.ms-a:hover { background:rgba(40,100,140,.28); border-color:rgba(140,210,240,.6); }
.ms-a .ms-jel { display:inline-flex; width:18px; height:18px; }
.ms-a .ms-jel svg { width:18px; height:18px; fill:currentColor; }
.ms-a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-a u { text-decoration:none; font-variant-numeric:tabular-nums; letter-spacing:.14em; font-size:10px; }
.ms-a.ms-kek, .ms-a.ms-kek u { color:#8fd0ff; border-left-color:#4fa8e8; }
.ms-a.ms-fo, .ms-a.ms-fo u { color:#f0c070; border-left-color:#f0a040; }
.ms-a.ms-kesz, .ms-a.ms-kesz u { color:#9ff0b8; border-left-color:#5fd88a; }
/* (8.79) a journal olvasatlan tortenete: kis sarga zaszlo jobbra */
.ms-a .ms-zaszlo { display:inline-flex; width:14px; height:14px; color:#ffd23f; filter:drop-shadow(0 0 3px rgba(255,210,63,.55)); }
.ms-a .ms-zaszlo svg { width:14px; height:14px; }
.ms-a.ms-volt, .ms-a.ms-volt u { color:#5f7386; border-left-color:#4a5866; }
.ms-a.ms-lead u { color:#ffd890; }
.ms-tip { position:fixed; z-index:80; display:none; width:min(360px,80vw); padding:10px 14px 12px; pointer-events:none;
background:rgba(6,18,28,.97); border:1px solid rgba(140,210,240,.4); border-radius:4px; box-shadow:0 8px 30px rgba(0,0,0,.5); }
.ms-tip.on { display:block; }
.ms-tip h4 { display:flex; align-items:baseline; margin:0 0 6px; font-size:10px; font-weight:400; letter-spacing:.22em; color:#8fe0ff; }
.ms-tip h4 u { margin-left:auto; text-decoration:none; font-variant-numeric:tabular-nums; }
.ms-tip p { margin:0 0 8px; font-size:11px; line-height:1.55; color:#9fbdd0; }
.ms-sav { height:4px; background:rgba(120,180,210,.18); border-radius:2px; overflow:hidden; }
.ms-sav i { display:block; height:100%; background:#8fe0ff; }
/* (8.46) A RANK FUL: balra a gyuru (a szinten beluli haladas), jobbra a szamok */
.ms-rang { display:flex; align-items:center; gap:34px; padding:18px 10px 8px; }
.ms-gyuru { position:relative; flex:0 0 auto; width:min(250px,40vw); aspect-ratio:1; }
.ms-gyuru svg { width:100%; height:100%; display:block; }
.ms-gy-palya { fill:none; stroke:rgba(120,180,210,.16); stroke-width:14; }
.ms-gy-iv { fill:none; stroke:#8fe0ff; stroke-width:14; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(143,224,255,.55)); }
.ms-gy-kozep { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ms-gy-kozep small { font-size:10px; letter-spacing:.3em; color:#6f94ab; }
.ms-gy-kozep b { font-size:58px; font-weight:300; line-height:1.05; color:#e8f4ff; font-variant-numeric:tabular-nums; }
.ms-gy-kozep span { font-size:11px; letter-spacing:.18em; color:#8fe0ff; font-variant-numeric:tabular-nums; }
.ms-r-adat { flex:1; min-width:0; }
.ms-r-nev { margin:0 0 14px; font-size:18px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:#f0c070; }
.ms-r-sor { display:flex; align-items:baseline; gap:12px; padding:7px 0; border-bottom:1px solid rgba(120,180,210,.14); }
.ms-r-sor span { font-size:10px; letter-spacing:.2em; color:#6f94ab; }
.ms-r-sor b { margin-left:auto; font-weight:400; font-size:13px; letter-spacing:.06em; color:#bcd8e8; font-variant-numeric:tabular-nums; text-align:right; }
.ms-r-sor b i, .ms-r-sor b em { font-style:normal; color:#f0c070; }
.ms-r-sor b small { font-size:9px; letter-spacing:.2em; color:#6f94ab; margin:0 2px 0 6px; }
.ms-r-mag { margin:16px 0 0; font-size:10.5px; line-height:1.6; color:#5f8298; }
@media (max-width:640px), (max-height:500px) { .ms-rang { gap:18px; padding-top:4px; align-items:flex-start; } .ms-gyuru { width:min(140px,30vw); } .ms-gy-kozep b { font-size:34px; } .ms-r-nev { font-size:14px; margin-bottom:6px; } .ms-r-sor { padding:4px 0; } }
#missions .hp-cs h3 em { font-style:normal; font-size:9px; letter-spacing:.2em; color:#f0c070; margin-right:10px; }
.ms-lead span { color:#f0c070; }
.ms-elso h3 { margin:6px 0 12px; font-size:12px; font-weight:400; letter-spacing:.26em; color:#8fe0ff; }
.ms-elso .ms-st { font-size:12.5px; line-height:1.75; color:#bcd8e8; margin:0 0 10px; }
.ms-tovabb { margin-top:14px; font:inherit; font-size:10px; letter-spacing:.2em; padding:7px 16px; cursor:pointer;
color:#e8f4ff; background:rgba(40,100,140,.45); border:1px solid rgba(140,210,240,.55); border-radius:3px; }
.ms-tip .ms-st { font-size:11px; line-height:1.6; color:#bcd8e8; margin:0 0 5px; }
.ms-alj { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:12px; flex:0 0 auto; }
.ms-fulek button.ki { opacity:.35; cursor:default; }
.ms-ujra.ms-intro { color:#8fe0ff; background:rgba(20,60,90,.35); border-color:rgba(140,210,240,.4); }
.ms-ujra { font:inherit; font-size:10px; letter-spacing:.2em; padding:6px 14px; cursor:pointer; color:#f0c070;
background:rgba(80,50,20,.3); border:1px solid rgba(240,192,112,.35); border-radius:3px; }
.ms-ujra.kerdez { color:#fff; background:rgba(160,60,30,.5); border-color:rgba(255,150,110,.7); }
.ms-ujra:disabled { opacity:.5; cursor:default; }
.ms-ujra-mag { font-size:10.5px; color:#7fa4bb; }
.ms-story .ms-h1 { margin:14px 0 6px; font-size:11px; font-weight:400; letter-spacing:.24em; color:#8fe0ff; }
.ms-story .ms-h2 { margin:10px 0 4px; font-size:10px; font-weight:400; letter-spacing:.2em; color:#9fbdd0; }
.ms-story .ms-st { color:#bcd8e8; font-size:12px; line-height:1.7; }
.ms-ul { margin:0 0 8px; padding-left:18px; font-size:11.5px; line-height:1.6; color:#a9c8dc; }
.hp-box { width:min(1080px,94vw); max-height:90vh; overflow-y:auto;
padding:20px 24px 26px;
background:linear-gradient(180deg,rgba(10,26,40,.98),rgba(6,16,26,.98));
border:1px solid rgba(90,140,175,.4); border-radius:5px; }
.hp-fej { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.hp-fej h2 { margin:0; font-size:14px; font-weight:600; letter-spacing:.28em;
color:#8fe0ff; flex:1; }
.hp-close { padding:8px 12px; font:inherit; font-size:10px; letter-spacing:.14em;
color:#8fb6cc; background:transparent;
border:1px solid rgba(90,140,175,.45); border-radius:3px; cursor:pointer; }
.hp-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px 30px; }
.hp-col { min-width:0; }
.hp-cs { margin-bottom:16px; }
.hp-cs h3 { margin:0 0 7px; font-size:10px; font-weight:400; letter-spacing:.22em;
color:#4e93b8; }
.hp-mag { margin:0 0 8px; font-size:11px; line-height:1.6; color:#7fa4bb; }
/* EGY SOR: a billentyu, aztan amit csinal. A billentyuk oszlopa fix szeles,
hogy a magyarazatok egy vonalban kezdodjenek — kulonben a szem minden sorban
ujra megkeresi, hol kezdodik a szoveg. */
.hp-s { display:grid; grid-template-columns:8.2em 1fr; gap:10px;
align-items:baseline; margin-bottom:4px;
font-size:11.5px; line-height:1.55; color:#bcd8e8; }
.hp-k { display:flex; gap:3px; flex-wrap:wrap; }
.hp-k b { font-weight:400; font-size:9.5px; letter-spacing:.10em;
color:#cfe9f7; background:rgba(90,150,190,.20);
border:1px solid rgba(120,180,215,.45); border-radius:3px;
padding:2px 5px; white-space:nowrap; }
/* EGY ANYAG: a vegyjel, a neve, es hogy mire valo. */
.hp-a { display:grid; grid-template-columns:3.4em 6.6em 3.2em 1fr; gap:8px;
align-items:baseline; margin-bottom:4px;
font-size:11.5px; line-height:1.55; color:#bcd8e8; }
.hp-a b { font-weight:400; letter-spacing:.08em; color:#8fe0ff; }
.hp-a i { font-style:normal; color:#7fa4bb; font-size:10.5px; }
/* A REKESZ MERETE. Halkabban, mint a nev: nem az azonossag, hanem egy hatar. */
.hp-a u { text-decoration:none; color:#5f8298; font-size:10px;
text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width:760px) { .hp-grid { grid-template-columns:1fr; } }
/* A SUGO A NAPLO KERETEBEN: kep balra, ot ful, a lap gorog, ha kell */
#help .hp-box.hp-naplo { display:flex; padding:0; overflow:hidden; width:min(900px,94vw); height:min(640px,88vh); max-height:88vh; }
#help .ms-hero.hp-hero { background-image:url(../img/help_hero.jpg); }
#help .hp-tab .hp-cs:last-child { margin-bottom:0; }
#help .hp-grid { grid-template-columns:1fr; gap:10px; }
#help .hp-grid .hp-cs { margin-bottom:6px; }
/* A SUGO JELE a jobb also muszer JOBB FELSO sarkaban. Nem a parancsok kozott:
ez az, ami a tobbirol szol. */
.ck-help { position:absolute; top:.25em; right:.4em; display:flex;
align-items:center; gap:.3em; font-style:normal; }
.ck-panel.ck-right { position:relative; }
/* --- A RAKOMANY NAGYBAN -----------------------------------------------------
Ugyanaz a racs, mint a fulke RES lapjan (ugyanaz a kod epiti), csak kozepen
es olvashato meretben. A meretezes egyetlen `font-size`-on mulik: a
`.ck-res` minden merete `em`-ben all, tehat a racs egyben no. */
#resmod { position:fixed; inset:0; z-index:70; display:none;
align-items:center; justify-content:center;
background:rgba(4,7,12,.78); backdrop-filter:blur(3px); }
#resmod.on { display:flex; }
/* A HAJO ES A RAKOMANY A NAPLO KERETEBEN: kep balra, fulek es a gorgo lap
jobbra, a kredit a fejlecben */
.rm-box { width:min(900px,94vw); height:min(640px,88vh); max-height:88vh; background:#080b12;
border:1px solid rgba(120,140,170,.30); border-radius:4px;
box-shadow:0 24px 70px rgba(0,0,0,.7); }
#resmod .rm-box.ms-box { display:flex; padding:0; overflow:hidden; }
#resmod .ms-hero.rm-hero { background-image:url(../img/resources_hero.jpg); }
#resmod .ms-jobb .hp-fej h2 { margin:0; font-size:14px; font-weight:600; letter-spacing:.28em; color:#8fe0ff; flex:1; }
.rm-kredit { font-size:11px; letter-spacing:.16em; color:#8fb6cc; }
.rm-kredit b { font-weight:600; font-size:15px; color:var(--hud-color,#f2e6a8); font-variant-numeric:tabular-nums; margin-right:4px; }
.rm-hajo { display:flex; gap:18px; align-items:flex-start; }
.rm-hajo .rm-v { flex:1 1 55%; min-width:0; width:55%; height:auto; aspect-ratio:560/340; display:block; }
.rm-adat { flex:1 1 45%; min-width:0; }
.rm-adat h3 { margin:2px 0 6px; font-size:13px; letter-spacing:.22em; font-weight:600; color:var(--hud-color,#f2e6a8); }
.rm-adat p { margin:0 0 12px; font-size:11px; line-height:1.55; color:#7fa4bb; }
.rm-s { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-top:1px solid rgba(120,140,170,.16);
font-size:11px; }
.rm-s b { font-weight:400; letter-spacing:.16em; color:#6f94ab; }
.rm-s span { color:#cde6f4; font-variant-numeric:tabular-nums; }
@media (max-width:640px) { .rm-hajo { flex-direction:column; } .rm-hajo .rm-v { width:100%; } }
.rm-fej { display:flex; align-items:baseline; justify-content:space-between;
gap:14px; border-bottom:1px solid rgba(120,140,170,.22);
padding-bottom:9px; margin-bottom:14px; }
.rm-fej h2 { margin:0; font-size:12px; letter-spacing:.22em; font-weight:600;
color:var(--hud-color,#f2e6a8); }
.rm-close { font:inherit; font-size:9.5px; letter-spacing:.16em; padding:5px 9px;
color:#8fb6cc; background:transparent; cursor:pointer;
border:1px solid rgba(120,140,170,.34); border-radius:3px; }
.rm-close:hover { color:#e6f7ff; background:rgba(34,84,116,.5); }
/* A RACS MERETE. A `.ck-res` a fulkeben a panel betumeretebol el; itt mi
mondjuk meg. A also parnat is elvesszuk: az a muszerben tolti ki a helyet,
itt csak ures sav lenne. */
.rm-racs { font-size:40px; }
/* A HAROM OSZLOP SZETTERUL. A fulkeben `1fr`-es oszlopok allnak, es ott ez
jo: a panel keskeny, a cellak kitoltik. Itt a lap szeles, a cella viszont
ugyanakkora maradt — igy a harom csoport osszehuzodott a bal szelre, jobbra
meg ures sav. Tartalomhoz szabott oszlopok, kozottuk egyenlo koz. */
.rm-racs .ck-res { padding-bottom:0; grid-template-columns:repeat(3,max-content);
justify-content:space-between; gap:.10em .22em;
/* A SOR MAGASABB, mert a szam nagyobb (lasd lentebb). A
cella `overflow:hidden`-nel all: ha a sor nem no vele,
a nagyobb szam alja levagodik. */
grid-auto-rows:1.34em; }
.rm-racs .ck-res-i { height:1.34em; }
/* A SZAMOK HARMINC SZAZALEKKAL NAGYOBBAK. A muszeren a `.46em` a helyszuke
miatt van; itt nincs helyszuke, es ez a lap epp azert van, hogy olvasni
lehessen rola. */
.rm-racs .ck-res .sg { font-size:.60em; }
/* A RAKTER — MENNYI FER MEG. Egy sav a lap aljan: a tizenot szam azt mondja
meg, MIBOL mennyi van, ez pedig azt, hogy osszesen hol tartunk. */
.rm-sav { margin-top:16px; padding-top:12px;
border-top:1px solid rgba(120,140,170,.22); }
.rm-sav-f { display:flex; align-items:baseline; justify-content:space-between;
gap:12px; margin-bottom:7px; }
.rm-sav b { font-weight:400; font-size:9.5px; letter-spacing:.20em;
color:#8fb6cc; }
/* A RAKTER SZAMA IS PALCIKAS — DE PALCIKASBOL NAGYOBB KELL.
Tizenot keppontnal a szegmensek osszeertek, es a szam egyetlen vilagos
folttá olvadt: olvashatatlan volt. Egy pálcikás szamjegy nem ugyanannal a
meretnel olvasodik, mint egy betu — hat szegmens fer bele oda, ahol a
betunek egy vonal is eleg. Huszonketto az a meret, ahol a szegmensek kozott
marad res. */
/* KISEBB, MINT A REKESZEK SZAMAI. A rekeszek a lap targya — huszonnegy
keppont —, ez pedig egy osszegzes alattuk: ha ugyanakkora vagy nagyobb,
akkor o latszik a fo adatnak. Husz keppont. (Amig a savhoz irt valaszto
szethuzta a szegmenseket, ez a szam barmekkora lehetett volna, olvashato
akkor sem lett volna — lasd fentebb.) */
.rm-sav em { font-style:normal; font-size:20px; letter-spacing:.02em;
color:var(--hud-color,#f2e6a8); }
.rm-sav .sg-txt { font-size:.5em; letter-spacing:.10em; }
/* --- A LAP GOMBJAI ---------------------------------------------------------
A kidobas es a visszalepes. Ugyanaz a formanyelv, mint a bezaro gombe. */
.rm-btn { display:block; width:100%; margin-top:16px; padding:9px;
font:inherit; font-size:10px; letter-spacing:.20em; color:#8fb6cc;
background:transparent; cursor:pointer; border-radius:3px;
border:1px solid rgba(120,140,170,.34); }
.rm-btn:hover { color:#e6f7ff; background:rgba(34,84,116,.5); }
.rm-drop-b { border-color:rgba(200,120,80,.40); color:#d8a279; }
.rm-drop-b:hover { color:#ffd7b0; background:rgba(120,60,30,.42); }
/* --- MIT DOBJUNK KI --------------------------------------------------------
Soronkent egy rekesz: jel, nev, mennyiseg, es harom adag. */
.rm-drop { display:flex; flex-direction:column; gap:2px; }
.rm-dr { display:grid; grid-template-columns:3.2em 1fr auto auto; gap:12px;
align-items:center; padding:5px 0;
border-bottom:1px solid rgba(120,140,170,.13); }
.rm-dr b { font-weight:400; font-size:11px; letter-spacing:.10em;
color:var(--hud-color,#f2e6a8); }
/* Szinten kozvetlen gyerek: a mennyiseg szamjegyei is -k, es a `color`
rajtuk a vilagito szegmens szinet irna at (a szegmens `currentColor`-t
hasznal hatternek). */
.rm-dr > i { font-style:normal; font-size:10.5px; color:#7fa4bb; }
.rm-dr em { font-style:normal; font-size:26px;
color:var(--hud-color,#f2e6a8); }
.rm-dr-g { display:flex; gap:6px; }
.rm-dr-g button { font:inherit; font-size:9.5px; letter-spacing:.12em;
padding:4px 8px; color:#8fb6cc; background:transparent;
cursor:pointer; border-radius:3px;
border:1px solid rgba(120,140,170,.34); }
.rm-dr-g button:hover { color:#e6f7ff; background:rgba(34,84,116,.5); }
/* AZ EGESZ REKESZ KIDOBASA MASKEPP NEZ KI. Nem tiltas, csak annyi, hogy a
szem megall rajta egy pillanatra — ez az, amit nem lehet visszacsinalni. */
.rm-dr-g .mind { border-color:rgba(200,120,80,.40); color:#d8a279; }
.rm-dr-g .mind:hover { color:#ffd7b0; background:rgba(120,60,30,.42); }
.rm-ures { margin:14px 0; font-size:11px; color:#7fa4bb; text-align:center; }
/* A NAGY LAP GOMBJA A MUSZEREN. A lap aljan, halkan — ugyanaz a jelforma,
mint a tobbi billentyujelnel a fulkeben. */
.ck-res-k { display:flex; align-items:center; gap:.4em; margin-top:.1em; }
.rm-sav u { display:flex; gap:3px; text-decoration:none; }
/* KOZVETLEN GYEREK, es ez nem szorszalhasogatas: a palcikas szamjegy is
-kbol all, es egy `.rm-sav i` valaszto a SZEGMENSEIRE is rakerult —
kilenc keppont magas, egyforma szeles teglalapokat csinalt beloluk. A szam
ettol volt olvashatatlan, nem a meretetol. */
.rm-sav u > i { flex:1 1 0; height:9px; border-radius:1px;
background:rgba(125,114,80,.30); }
.rm-sav u > i.be { background:var(--hud-color,#f2e6a8);
box-shadow:0 0 6px rgba(242,230,168,.45); }
@media (max-width:640px), (max-height:500px) { .rm-racs { font-size:26px; } }
/* --- A TAMOGATAS KARTYAJA --------------------------------------------------
Harom perc jatek utan, tiz masodpercre, egyszer. A jobb also sarokban ul,
ott, ahol a fulke sajat kis kijelzoi — de KULON retegben, nem a fulke
sikjaban: a panelek terbeli transzformacioja alatt egy kattinthato link
nehezen talalhato el, es mobilon nincs is jobb also panel.
MAGATOL JON ES MAGATOL MEGY. Nincs bezaro gomb, mert nincs mit bezarni: aki
nem akar rakattintani, annak tiz masodperc mulva ugy is eltunik. */
#tamogat { position:fixed; right:18px; bottom:18px; z-index:60;
width:min(272px, 42vw); opacity:0; transform:translateY(10px);
pointer-events:none; transition:opacity .5s, transform .5s; }
#tamogat.on { opacity:1; transform:none; pointer-events:auto; }
.tg-box { position:relative;
background:rgba(6,10,16,.92); border:1px solid rgba(120,140,170,.34);
border-radius:5px; padding:12px 13px 11px;
box-shadow:0 14px 40px rgba(0,0,0,.6); backdrop-filter:blur(3px); }
/* A BEZARO X. Halvanyan all ott, mert nem O a kartya lenyege — de a felulete
nagyobb, mint amekkoranak latszik: ujjal is el kell talalni, es egy X, ami
melle nyulsz, rosszabb, mint egy X, ami nincs is ott. */
.tg-x { position:absolute; top:0; right:0; z-index:2;
display:flex; align-items:center; justify-content:center;
width:28px; height:28px; margin:0;
font-size:15px; font-weight:400; line-height:1;
color:#8fb6cc; opacity:.65; cursor:pointer;
-webkit-tap-highlight-color:transparent; }
.tg-x:hover, .tg-x:focus-visible { opacity:1; color:#dff0fb; outline:none; }
.tg-f { font-size:10px; letter-spacing:.20em; color:var(--hud-color,#f2e6a8);
margin-bottom:7px; }
.tg-box p { margin:0 0 10px; font-size:10.5px; line-height:1.45; color:#8fb6cc; }
/* A ket gomb ugyanaz a forma, mint a nyitokepernyon: jel, szoveg, osszeg. */
.tg-b { display:flex; align-items:center; gap:8px; text-decoration:none;
padding:6px 8px; margin-top:5px; border-radius:3px;
border:1px solid rgba(120,140,170,.30); background:rgba(20,34,50,.5); }
.tg-b:hover { background:rgba(34,84,116,.55); border-color:rgba(150,190,220,.5); }
.tg-b img { width:18px; height:auto; flex:0 0 auto; }
.tg-b b { flex:1 1 auto; font-weight:400; font-size:9.5px; letter-spacing:.12em;
color:#cfe6f5; }
.tg-b i { font-style:normal; font-size:10px; color:var(--hud-color,#f2e6a8); }
/* A KURZOR-TANACS A GOMBOK FOLOTT, es lathatoan. Halvany szurkevel a
probajatekos atnezett rajta — pedig e nelkul a ket gomb egyszeruen nem
elerheto, amig az eger az orrot viszi. A muszer sajat sargaja: ez nem
labjegyzet, hanem az elso lepes. */
.tg-box u { display:block; margin:2px 0 9px; text-decoration:none;
font-size:9.5px; letter-spacing:.14em;
color:var(--hud-color,#f2e6a8); opacity:.9; }
/* MEDDIG MARAD MEG. A kartya magatol eltunik; egy fogyo sav megmondja, mikor.
Nem surgetes — csak annyi, hogy ne kelljen talalgatni. */
.tg-sav { display:block; height:2px; margin-top:11px; text-decoration:none;
background:rgba(120,140,170,.22); border-radius:1px; overflow:hidden; }
.tg-sav i { display:block; height:100%; width:100%;
background:var(--hud-color,#f2e6a8); opacity:.7; }
/* MOBILON A MASIK SAROK. Jobbra lent az ujj lakik — a kereso es a lezer
gombja —, tehat ott egy kartya vagy takar, vagy veletlenul megnyilik. */
@media (hover: none) and (pointer: coarse) {
/* A SYS-DOBOZ ALA, NEM RA. Az is a bal felso sarokban all (lasd #syspad),
es tuleles kozben pont azt takarna ki, ami eletben tart. */
#tamogat { right:auto; left:12px; bottom:auto; top:88px;
width:min(250px, 62vw); }
}
/* A JATEKMENU (F9, END): a nagy lapok egy sorban, mindegyik a sajat
fejleckepevel - a kartya es a lap, amit nyit, ugyanannak latszik. */
#jatekmenu { position:fixed; inset:0; z-index:73; display:none; align-items:center; justify-content:center; background:rgba(2,6,12,.82); }
#jatekmenu.on { display:flex; }
#jatekmenu .jm-box { width:min(1080px,96vw); padding:18px 22px 16px;
background:linear-gradient(180deg,rgba(10,26,40,.98),rgba(6,16,26,.98));
border:1px solid rgba(90,140,175,.4); border-radius:5px; }
#jatekmenu .jm-sor { display:flex; gap:12px; justify-content:center; }
#jatekmenu .jm-k { flex:1 1 0; min-width:0; aspect-ratio:2/3; max-height:56vh; position:relative; padding:0;
border:1px solid rgba(120,180,210,.25); border-radius:4px; cursor:pointer; overflow:hidden;
background-color:#0a1a28; background-size:cover; background-position:center; font:inherit; color:#e8f4ff;
filter:saturate(.8) brightness(.8); transition:transform .15s ease, border-color .15s ease, filter .15s ease; }
#jatekmenu .jm-k::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(2,8,14,.92)); }
#jatekmenu .jm-k:hover, #jatekmenu .jm-k:focus-visible { transform:translateY(-3px); border-color:rgba(143,224,255,.85); filter:none; outline:none; }
#jatekmenu .jm-cim { position:absolute; left:10px; right:8px; bottom:28px; z-index:1; font-size:12px; letter-spacing:.18em; line-height:1.35; text-align:left; }
#jatekmenu .jm-kulcs { position:absolute; left:10px; bottom:10px; z-index:1; font-size:9px; letter-spacing:.22em; color:#8fe0ff; }
#jatekmenu .ms-alj { display:flex; justify-content:flex-end; margin-top:14px; }
#jatekmenu .jm-menube { margin-right:auto; }
/* (8.56) A KEZI MENTES: a SAVE / LOAD gomb a kartyak helyen negy sort mutat
(az elso az automatikus mentes) */
#jatekmenu .jm-slotok { display:none; }
#jatekmenu.slot .jm-sor { display:none; }
#jatekmenu.slot .jm-slotok { display:flex; flex-direction:column; gap:8px; min-height:min(56vh,420px); }
#jatekmenu .jm-sfej { display:flex; align-items:baseline; gap:14px; font-size:12px; letter-spacing:.2em; color:#e8f4ff; margin-bottom:4px; }
#jatekmenu .jm-smod { font-size:9px; color:#8fe0ff; }
#jatekmenu .jm-slot { display:flex; align-items:center; gap:18px; padding:14px 16px; font:inherit; color:#e8f4ff; text-align:left; cursor:pointer;
background:rgba(10,30,46,.7); border:1px solid rgba(120,180,210,.25); border-radius:4px; transition:border-color .15s ease; }
#jatekmenu .jm-slot:hover:not(:disabled), #jatekmenu .jm-slot:focus-visible { border-color:rgba(143,224,255,.85); outline:none; }
#jatekmenu .jm-slot:disabled { cursor:default; }
#jatekmenu .jm-slot.auto { border-style:dashed; }
#jatekmenu .jm-slot.kerdez { background:rgba(160,60,30,.3); border-color:rgba(255,150,110,.7); }
#jatekmenu .jm-snev { flex:0 0 120px; font-size:11px; letter-spacing:.2em; color:#f0c070; }
#jatekmenu .jm-sinfo { flex:1 1 auto; min-width:0; display:flex; gap:18px; font-size:11px; letter-spacing:.08em; color:#bcd4e4; }
#jatekmenu .jm-shely { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#jatekmenu .jm-sures { color:#5f7d92; letter-spacing:.2em; }
#jatekmenu .jm-slista { display:flex; flex-direction:column; gap:8px; max-height:min(52vh,400px); overflow-y:auto; padding-right:4px; }
/* (8.60) az orankenti mentes-sor (BACKUP n) a negy hely alatt, halvanyabban */
#jatekmenu .jm-slista .jm-slot { flex-shrink:0; }
#jatekmenu .jm-slot.mult { padding:9px 16px; opacity:.85; }
#jatekmenu .jm-slot.mult .jm-snev { color:#c9a866; }
#jatekmenu .jm-stett { flex:0 0 auto; margin-left:auto;font-size:9px; letter-spacing:.2em; color:#8fe0ff; }
#jatekmenu .jm-slot.kerdez .jm-stett { color:#ffb08a; }
#jatekmenu .jm-sall { min-height:16px; font-size:10.5px; letter-spacing:.06em; color:#7fa4bb; }
#jatekmenu .ms-alj .ms-ujra.on { color:#fff; background:rgba(20,60,90,.5); border-color:rgba(143,224,255,.85); }
@media (max-height:500px) { #jatekmenu.slot .jm-slotok { min-height:58vh; gap:5px; } #jatekmenu .jm-slista { gap:5px; } #jatekmenu .jm-slot { padding:8px 12px; } }
/* keskeny kepernyon harom oszlop, fekvo kartyakkal; alacsonyon (fekvo
telefon) a kartyak nem lehetnek allok, kulonben kilognak */
@media (max-width:720px) { #jatekmenu .jm-sor { flex-wrap:wrap; } #jatekmenu .jm-k { flex:1 1 calc(33% - 12px); aspect-ratio:3/2; } }
@media (max-height:500px) { #jatekmenu .jm-box { padding:10px 14px 10px; } #jatekmenu .jm-k { aspect-ratio:auto; height:58vh; }
#jatekmenu .ms-alj { margin-top:8px; } }
/* (7.07) AZ UDVOZLES (lasd ui/Udvozlo.js): a naplo kerete - balra a kepsav
(myai_hero), jobbra a fejlec, a jobb felso sarokban a hajo robotarca egy
korben, alatta a keretes lap, alul NO / YES. */
#udvozlo { position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center;
background:rgba(2,6,12,.82); }
#udvozlo.on { display:flex; }
#udvozlo .ud-box { display:flex; padding:0; overflow:hidden; width:min(860px,94vw); max-height:88vh; }
#udvozlo .ms-hero.ud-hero { background-image:url(../img/myai_hero.jpg); }
#udvozlo .ms-jobb .hp-fej h2 { margin:0; font-size:14px; font-weight:600; letter-spacing:.28em; color:#8fe0ff; flex:1; }
#udvozlo .ud-arc { flex:0 0 auto; width:64px; height:64px; border-radius:50%; overflow:hidden;
border:1px solid rgba(140,210,240,.55); box-shadow:0 0 10px rgba(80,170,230,.3); background:#061018; }
#udvozlo .ud-arc video, #tutorial .tut-arc video { width:100%; height:100%; object-fit:cover; display:block; }
#udvozlo .ms-panel { flex:0 1 auto; }
#udvozlo .ms-h1 { margin-top:2px; }
#udvozlo .ms-st { margin:0 0 10px; }
#udvozlo .ms-st.ud-kerdes { color:#e8f4ff; }
/* (7.07) A GYAKORLAS PANELJE: ugyanaz a keret kicsiben, fent kozepen */
#tutorial { position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:60; display:none;
flex-direction:column; width:min(560px,92vw); padding:12px 14px 14px;
background:linear-gradient(180deg,rgba(10,26,40,.96),rgba(6,16,26,.96));
border:1px solid rgba(90,140,175,.4); border-radius:5px; }
#tutorial.on { display:flex; }
#tutorial .hp-fej { gap:12px; margin-bottom:10px; }
#tutorial .tut-arc { flex:0 0 40px; width:40px; height:40px; border-radius:50%; overflow:hidden;
border:1px solid rgba(140,210,240,.55); background:#061018; }
#tutorial .tut-fej { margin:0; flex:1; min-width:0; font-size:11px; font-weight:600; letter-spacing:.24em; color:#8fe0ff;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tutorial .tut-x { padding:6px 10px; }
#tutorial .ms-panel { flex:0 0 auto; padding:10px 12px 12px; }
#tutorial .ms-h1 { margin:0 0 4px; }
#tutorial.kesz .ms-h1::after { content:' ✓'; color:#7ef0a8; }
#tutorial.kesz .ms-panel { border-color:rgba(120,230,160,.5); }
#tutorial .tut-pont { display:flex; gap:4px; margin-top:10px; }
#tutorial .tut-pont i { flex:1; height:3px; border-radius:2px; background:rgba(120,170,200,.22); }
#tutorial .tut-pont i.most { background:rgba(143,224,255,.75); }
#tutorial .tut-pont i.volt { background:rgba(120,230,160,.7); }
@media (max-width:560px) { #tutorial { top:54px; padding:10px; } #tutorial .tut-fej { font-size:10px; letter-spacing:.16em; } }
/* (7.12) ALACSONY KEPERNYON (fekvo telefon): a panel a legtetejere kerul, es
tomor - robotarc es kulon cim nelkul (a fejlec mondja a lepest), kisebb
betuvel. Kulonben a kepernyo felet takarta, a celkeresztet is. */
@media (max-height:520px) {
#tutorial { top:4px; width:min(640px,72vw); padding:5px 10px 6px; }
#tutorial .tut-arc, #tutorial .ms-h1 { display:none; }
#tutorial .hp-fej { margin-bottom:4px; gap:8px; }
#tutorial .tut-fej { font-size:9px; letter-spacing:.14em; }
#tutorial .tut-x { padding:3px 7px; font-size:9px; letter-spacing:.1em; }
#tutorial .ms-panel { padding:5px 8px 6px; }
#tutorial .ms-st { font-size:11px; line-height:1.4; }
#tutorial .tut-pont { margin-top:5px; }
#tutorial .tut-pont i { height:2px; }
}
#tutorial .tut-fej-l { display:none; }
@media (max-height:520px) { #tutorial .tut-fej-gy { display:none; } #tutorial .tut-fej-l { display:inline; } }
/* (7.13) A FELSZERELES (lasd ui/Felszereles.js): a hajo sziluettje oldalrol,
vonalakkal kivezetett negyzetes foglalatok, bennuk az ikon, folotte a nev */
#resmod .rm-kit { display:flex; align-items:center; justify-content:center; height:100%; }
.fsz { width:100%; height:100%; max-height:100%; display:block; font-family:inherit; }
.fsz .fsz-test { fill:url(#fsz-test); stroke:rgba(143,224,255,.55); stroke-width:1.2; stroke-linejoin:round; }
.fsz .fsz-fulke { fill:rgba(120,200,240,.22); stroke:rgba(143,224,255,.6); stroke-width:1; }
.fsz .fsz-cso { fill:#0b1a27; stroke:rgba(143,224,255,.55); stroke-width:1.2; }
.fsz .fsz-vonal { fill:none; stroke:rgba(143,224,255,.22); stroke-width:1; }
.fsz .fsz-v polyline { fill:none; stroke:rgba(143,224,255,.45); stroke-width:1; }
.fsz .fsz-v circle { fill:#8fe0ff; }
.fsz .fsz-f rect { fill:rgba(22,52,76,.55); stroke:rgba(140,210,240,.45); stroke-width:1; }
.fsz .fsz-f text { fill:#8fe0ff; font-size:10px; letter-spacing:.14em; }
.fsz .fsz-f .fsz-mk { fill:#5f8298; font-size:8px; letter-spacing:.1em; }
.fsz .fsz-ikon { fill:none; stroke:#bcd8e8; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.fsz .fsz-f, .fsz .fsz-v { cursor:default; transition:opacity .15s; }
.fsz .fsz-f.on rect { fill:rgba(40,90,125,.7); stroke:#8fe0ff; }
.fsz .fsz-f.on .fsz-ikon { stroke:#e8f4ff; }
.fsz .fsz-v.on polyline { stroke:#8fe0ff; stroke-width:1.6; }
/* (7.13) A RAKOMANY LISTAJA (main: resLista): harom oszlop, a rekeszek a
targyuk kepevel, mellette a nev es hogy mire jo, jobbra a szamok. A lap
magassagat tolti ki - a sorok osztoznak rajta -, alul a raktersav es a
kidobas egy sorban, igy gorgetes nelkul fer ki. */
#resmod .rm-racs { font-size:inherit; display:flex; flex-direction:column; height:100%; min-height:0; }
.rm-lista { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
grid-template-rows:repeat(5,minmax(0,1fr)); gap:6px 10px; }
.rm-sor { display:flex; align-items:center; gap:10px; min-height:0; min-width:0; padding:4px 8px;
background:rgba(10,30,46,.45); border:1px solid rgba(120,170,200,.14); border-radius:4px; opacity:.55; }
.rm-sor.van { opacity:1; border-color:rgba(140,210,240,.3); }
.rm-sor.hiany { opacity:1; border-color:rgba(255,110,90,.55); }
.rm-sor.teli { border-color:rgba(240,192,112,.55); }
.rm-sor .rm-ik { flex:0 0 auto; height:clamp(26px,7.2vh,56px); width:auto; aspect-ratio:1; object-fit:contain;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.rm-sz { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rm-fej { display:flex; align-items:baseline; gap:8px; min-width:0; }
.rm-fej b { flex:1 1 auto; min-width:0; font-weight:600; font-size:11px; letter-spacing:.08em; color:#e6f6ff; text-transform:uppercase;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rm-sor.hiany .rm-fej b { color:#ff8a70; }
.rm-fej em { flex:0 0 auto; font-style:normal; font-size:14px; color:#f2e6a8; white-space:nowrap; }
.rm-fej em small { font-size:9.5px; color:#6f93a8; letter-spacing:.04em; }
.rm-sz > small { font-size:9.5px; line-height:1.3; color:#7fa4bb; display:-webkit-box; -webkit-line-clamp:2;
-webkit-box-orient:vertical; overflow:hidden; }
.rm-sz > u { display:block; width:100%; height:3px; margin-top:2px; background:rgba(120,170,200,.18); border-radius:2px; text-decoration:none; }
.rm-sz > u i { display:block; height:100%; background:#8fe0ff; border-radius:2px; }
.rm-sor.teli .rm-sz > u i { background:#f0c070; }
.rm-also { flex:0 0 auto; display:flex; align-items:flex-end; gap:14px; margin-top:10px; }
.rm-also .rm-sav { flex:1; margin-top:0; padding-top:8px; }
.rm-also .rm-sav em { font-size:16px; }
.rm-also .rm-sav em small { font-size:11px; color:#6f93a8; }
.rm-also .rm-btn { width:auto; flex:0 0 auto; margin-top:0; padding:8px 14px; }
.rm-dr .rm-ik { width:32px; height:32px; object-fit:contain; }
.rm-dr em { font-style:normal; color:#f2e6a8; }
/* ALACSONY KEPERNYON (fekvo telefon) a leiras elmarad, a sor tomorebb */
@media (max-height:560px) {
.rm-lista { gap:4px 6px; }
.rm-sor { padding:2px 6px; gap:6px; }
.rm-sz > small { display:none; }
.rm-fej em { font-size:12px; }
.rm-also { margin-top:6px; }
.rm-also .rm-sav { padding-top:4px; }
}
@media (max-width:760px) { .rm-fej b { font-size:9.5px; letter-spacing:.04em; } .rm-fej em small { display:none; } }
/* (7.13) FEKVO TELEFONON a SHIP AND CARGO lap tomorebb (fejlec, fulek, alj),
es a rakomany sorai a magassaghoz igazodnak: az ikon a sor magas, a kis
sav elmarad (a szam megmondja), semmi nem log ki a sorbol */
@media (max-height:560px) {
#resmod .ms-jobb { padding:8px 14px 8px; }
#resmod .ms-jobb .hp-fej { margin-bottom:4px; }
#resmod .ms-fulek button { padding-top:4px; padding-bottom:4px; }
#resmod .ms-alj { margin-top:4px; }
#resmod .ms-panel { padding:6px 8px; }
.rm-lista { gap:3px 6px; }
.rm-sor { overflow:hidden; padding:0 6px; }
.rm-sor .rm-ik { height:100%; max-height:28px; }
.rm-sz > u { display:none; }
.rm-sz { justify-content:center; align-self:stretch; }
.rm-also .rm-sav u > i { height:6px; }
}
/* (7.14) A FELSZERELES: ikonok a foglalatokban, alul az adatsav */
#resmod .rm-kit { flex-direction:column; align-items:stretch; justify-content:flex-start; gap:6px; }
#resmod .rm-kit .fsz { flex:1 1 auto; min-height:0; }
.fsz .fsz-f { cursor:pointer; }
.fsz .fsz-f.ures rect { stroke-dasharray:4 3; }
.fsz .fsz-f.ures .fsz-ikon { opacity:.35; }
.fsz .fsz-f.leg rect { fill:rgba(80,40,10,.45); }
.fsz .fsz-kep { filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
/* (7.15) AZ ADATSAV ALLANDO MAGAS: ha a leiras hosszabb, a sav maga
gorget - a rajz nem ugrik fel-le attol, hogy mire mutat az eger */
.fsz-info { flex:0 0 auto; height:96px; overflow-y:auto; padding:8px 10px; border-top:1px solid rgba(120,170,200,.22); box-sizing:border-box; }
.fsz .fsz-f .fsz-nev { font-size:10px; letter-spacing:.03em; }
.fsz .fsz-f .fsz-nev.fsz-nincs { fill:#4f6f84; letter-spacing:.14em; }
.fsz-info .fsz-tipp { margin:0; font-size:10.5px; color:#6f93a8; letter-spacing:.06em; }
.fsz-fej { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.fsz-fej b { font-size:12px; letter-spacing:.14em; color:#e6f6ff; text-transform:uppercase; }
.fsz-fej span { font-size:9.5px; letter-spacing:.16em; color:#7fa4bb; }
.fsz-le { margin:4px 0 6px; font-size:11px; line-height:1.45; color:#a9c8dc; }
.fsz-le em { font-style:normal; color:#ffb070; }
.fsz-stat { display:flex; flex-wrap:wrap; gap:4px 14px; }
.fsz-stat i { font-style:normal; font-size:10.5px; color:#f2e6a8; white-space:nowrap; }
.fsz-stat i u { text-decoration:none; font-size:9px; letter-spacing:.12em; color:#6f93a8; }
@media (max-height:560px) { .fsz-info { height:44px; padding:4px 6px; } .fsz-le { display:none; } }
/* (7.16) A VALASZTO: a foglalatra kattintva a rajz fole nyilik, a kategoria
minden targyaval; ami nincs meg, szurke es halvany. Az adatsav alatta
marad, ugyanakkora - a kijelolt lap adatait mutatja. */
#resmod .rm-kit { position:relative; }
.fsz-valaszto { display:none; position:absolute; left:0; right:0; top:0; bottom:102px; z-index:3; flex-direction:column; gap:8px;
padding:10px; background:rgba(7,18,29,.97); border:1px solid rgba(140,210,240,.35); border-radius:6px; box-sizing:border-box; }
.fsz-valaszto.on { display:flex; }
.fv-fej { display:flex; align-items:baseline; gap:12px; flex:0 0 auto; }
.fv-fej b { font-size:12px; letter-spacing:.2em; color:#8fe0ff; }
.fv-fej span { flex:1; font-size:9.5px; letter-spacing:.08em; color:#6f93a8; }
.fv-fej .fv-x { padding:5px 10px; }
.fv-racs { flex:1 1 auto; min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:6px; align-content:start; }
.fv-k { display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; text-align:left;
padding:5px 8px; font:inherit; cursor:pointer; color:inherit; background:rgba(14,36,54,.6);
border:1px solid rgba(120,170,200,.2); border-radius:4px; }
.fv-k:hover { background:rgba(30,70,100,.6); border-color:rgba(143,224,255,.6); }
.fv-k img, .fv-k .fv-ures { grid-row:1 / span 2; width:44px; height:44px; object-fit:contain; }
.fv-k .fv-ures { display:block; border:1px dashed rgba(120,170,200,.35); border-radius:4px; box-sizing:border-box; }
.fv-k b { font-size:10.5px; font-weight:600; letter-spacing:.04em; color:#e6f6ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; align-self:end; }
.fv-k span { font-size:9px; letter-spacing:.06em; color:#6f93a8; align-self:start; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fv-k.fel { border-color:#8fe0ff; box-shadow:inset 0 0 0 1px rgba(143,224,255,.35); background:rgba(30,70,100,.55); }
.fv-k.leg { background:rgba(70,36,10,.45); }
.fv-k.nincs { opacity:.38; cursor:not-allowed; }
.fv-k.nincs img { filter:grayscale(1) brightness(.8); }
.fv-k.nincs b { color:#8a98a4 !important; }
@media (max-height:560px) { .fsz-valaszto { bottom:50px; padding:6px; gap:4px; } .fv-k { padding:3px 6px; } .fv-k img, .fv-k .fv-ures { width:32px; height:32px; } .fv-k { grid-template-columns:32px 1fr; } }
/* (7.17) AZ ELLENSEG CSIKJAI: a hajo folott, amig a celkeresztben all, es
utana meg harom masodpercig - fent a pajzs (kek), alatta a test */
#harc-csikok { position:fixed; inset:0; pointer-events:none; z-index:30; }
/* (7.52) A LELTAR (CARGO): negyzetracs, a nev folotte, a foglalat alatta */
#resmod .rm-leltar { height:100%; min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:4px; }
.lt-racs { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:10px 8px; }
.lt-c { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; }
.lt-n { height:2.5em; display:flex; align-items:flex-end; justify-content:center; text-align:center; font-size:10px; font-weight:600; letter-spacing:.06em; line-height:1.2; overflow:hidden; width:100%; }
.lt-k { position:relative; width:100%; aspect-ratio:1; border:1px solid rgba(143,224,255,.28); border-radius:3px; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.lt-k img { width:78%; height:78%; object-fit:contain; }
.lt-k em { position:absolute; right:4px; bottom:2px; font-style:normal; font-size:10px; color:#f2e6a8; }
.lt-a { height:1.3em; font-size:9px; letter-spacing:.1em; color:#7a99ac; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; text-align:center; }
.lt-ures .lt-k { border-color:rgba(143,224,255,.10); background:rgba(0,0,0,.18); }
.lt-c[data-t]:hover .lt-k { border-color:#8fe0ff; box-shadow:0 0 8px rgba(143,224,255,.35); }
.lt-ures-p { margin:0 0 10px; font-size:11px; color:#7a99ac; letter-spacing:.06em; }
#lt-tip { position:fixed; z-index:90; display:none; max-width:320px; padding:9px 11px; background:rgba(4,14,24,.94); border:1px solid rgba(143,224,255,.35); border-radius:3px; pointer-events:none; font-size:11px; }
#lt-tip.on { display:block; }
.lt-t-h { display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
.lt-t-h b { font-size:12px; letter-spacing:.1em; }
.lt-t-h span { font-size:9px; letter-spacing:.12em; color:#7a99ac; }
.lt-t-ar { margin-bottom:6px; letter-spacing:.06em; color:#9fb6c4; }
.lt-t-ar b { color:#ffd23a; }
.lt-t-s { display:grid; grid-template-columns:1fr; gap:1px; }
.lt-t-s i { font-style:normal; display:flex; justify-content:space-between; gap:12px; }
.lt-t-s s { text-decoration:none; color:#7a99ac; }
.lt-t-s b { font-weight:500; color:#f2e6a8; }
/* (7.53) az osszevetes: harom oszlop (cimke, ez, a felszerelt), zold a jobb, piros a rosszabb */
.lt-t-s.ket i { display:grid; grid-template-columns:1fr auto auto; gap:12px; }
.lt-t-s em { font-style:normal; color:#7a99ac; text-align:right; min-width:5.5em; }
.lt-t-s i.jo b { color:#5dff8a; }
.lt-t-s i.rossz b { color:#ff6a5a; }
.lt-t-vs { display:grid; grid-template-columns:1fr auto auto; gap:12px; margin:0 0 4px; padding-top:4px; border-top:1px solid rgba(143,224,255,.15); font-size:9px; letter-spacing:.12em; color:#7a99ac; }
.lt-t-vs span:last-child { text-align:right; }
.lt-t-vs.fent { display:block; color:#ffd23a; }
/* a felszerelt targy jele: sarga pont a sarokban */
.lt-pont { position:absolute; left:5px; top:5px; width:8px; height:8px; border-radius:50%; background:#ffd23a; box-shadow:0 0 6px rgba(255,210,58,.8); }
.lt-c.fent .lt-k { border-color:rgba(255,210,58,.45); }
.lt-c[data-t] { cursor:pointer; }
.lt-c[draggable="true"] { cursor:grab; }
.lt-c.huz { opacity:.35; }
.lt-ar { color:#ffd23a; letter-spacing:.08em; }
.lt-ar.draga { color:#ff6a5a; }
.lt-ar.fent { color:#7a99ac; }
/* az osszevetes panelje */
#lt-cmp { position:fixed; inset:0; z-index:95; display:none; align-items:center; justify-content:center; background:rgba(2,6,12,.55); }
#lt-cmp.on { display:flex; }
.lt-cmp-box { width:min(420px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow-y:auto; padding:14px 16px; background:rgba(4,14,24,.97); border:1px solid rgba(143,224,255,.45); border-radius:4px; font-size:12px; box-shadow:0 10px 40px rgba(0,0,0,.6); }
.lt-cmp-g { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:12px; }
.lt-cmp-g button { font:inherit; font-size:10px; letter-spacing:.16em; padding:8px 14px; cursor:pointer; color:#9fc4d8; background:rgba(90,150,190,.12); border:1px solid rgba(140,200,235,.35); border-radius:3px; }
.lt-cmp-g button.fo { color:#1a1405; background:#ffd23a; border-color:#ffd23a; font-weight:600; }
/* a terminal ket racsa */
.tm-lt { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tm-lt-o { min-width:0; max-height:min(52vh, 460px); overflow-y:auto; padding:6px 8px 8px; border:1px dashed rgba(143,224,255,.14); border-radius:4px; transition:border-color .15s, background .15s; }
.tm-lt-o.cel { border-color:#ffd23a; background:rgba(255,210,58,.06); }
.tm-lt-o h3 { margin:2px 0 8px; }
.tm-lt .lt-racs { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.tm-lt-tipp { margin:8px 0 0; font-size:10px; letter-spacing:.08em; color:#7a99ac; }
/* a mobil mindig fekvo: alacsony kepernyon a ket racs egymas mellett marad,
kisebb cellakkal, es a sajat magassagukon belul gorgetnek */
@media (max-height:520px) {
.tm-lt { gap:10px; }
.tm-lt-o { max-height:calc(100vh - 150px); padding:4px 6px 6px; }
.tm-lt-o h3 { margin:0 0 4px; }
.tm-lt .lt-racs { grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:6px 6px; }
.tm-lt .lt-n { font-size:9px; }
.tm-lt .lt-a { font-size:8px; }
.tm-lt-tipp { display:none; }
}
/* (7.52) a terminal felszereles-fule */
.tm-targyak h3 { margin:10px 0 4px; font-size:11px; font-weight:600; letter-spacing:.2em; color:#8fe0ff; }
.tm-fulek2 { margin-bottom:8px; }
/* (7.47) a fegyverkartya (8 / 9 valtaskor): ikon balra, jobbra a nev es az adatok */
.ck-fk { display:flex; gap:.7em; width:100%; height:100%; text-align:left; align-items:stretch; }
.ck-fk-ikon { flex:0 0 auto; height:100%; aspect-ratio:1; background:center / contain no-repeat; border:1px solid rgba(242,230,168,.22); border-radius:3px; background-color:rgba(0,0,0,.35); }
.ck-fk-t { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.25em; }
.ck-fk-h { display:flex; flex-direction:column; line-height:1.15; }
.ck-fk-h b { font-weight:600; letter-spacing:.12em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ck-fk-h span { font-size:.55em; letter-spacing:.16em; color:var(--hud-key,#9a8c60); white-space:nowrap; }
.ck-fk-g { display:grid; grid-template-columns:1fr 1fr; column-gap:1.2em; row-gap:.1em; font-size:.58em; letter-spacing:.08em; line-height:1.3; }
.ck-fk-g i { font-style:normal; display:flex; justify-content:space-between; gap:.6em; white-space:nowrap; overflow:hidden; }
.ck-fk-g s { text-decoration:none; color:var(--hud-key,#9a8c60); overflow:hidden; text-overflow:ellipsis; }
.ck-fk-g b { font-weight:500; color:var(--hud-color,#f2e6a8); }
/* (7.24) a celpont kartyaja a fulke fo muszeren */
/* (7.26) negy sor, egyik sem zsugorodhat ossze (eddig a ket adatsor
egymasra csuszott a csikok alatt) */
.ck-cel { display:flex; flex-direction:column; justify-content:space-between; width:100%; height:100%; text-align:left; font-size:.95em; line-height:1.25; }
.ck-cel > div { flex:0 0 auto; }
.ck-cel-h { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.ck-cel-h b { font-weight:600; letter-spacing:.16em; color:#ff8a70; white-space:nowrap; }
.ck-cel-h i { font-style:normal; font-size:.62em; letter-spacing:.16em; color:var(--hud-color,#f2e6a8); white-space:nowrap; }
.ck-cel-r { display:flex; justify-content:space-between; gap:1.2em; font-size:.66em; letter-spacing:.1em; white-space:nowrap; overflow:hidden; color:var(--hud-color,#f2e6a8); }
.ck-cel-r span { overflow:hidden; text-overflow:ellipsis; }
.ck-cel-r s { text-decoration:none; margin-right:.7em; color:var(--hud-key,#9a8c60); }
.ck-cel-b s { text-decoration:none; flex:0 0 5.5em; color:var(--hud-key,#9a8c60); }
.ck-cel-b { display:flex; align-items:center; gap:.8em; font-size:.66em; letter-spacing:.1em; }
.ck-cel-b i { flex:1 1 auto; height:.6em; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.18); border-radius:2px; overflow:hidden; }
.ck-cel-b i u { display:block; height:100%; text-decoration:none; }
.ck-cel-b.p i u { background:#5ab4ff; box-shadow:0 0 6px rgba(90,180,255,.7); }
.ck-cel-b.h i u { background:#ff7a4a; }
.ck-cel-b em { font-style:normal; flex:0 0 3em; text-align:right; color:var(--hud-color,#f2e6a8); }
#harc-csikok .hcs { position:absolute; left:0; top:0; width:92px; margin:-34px 0 0 -46px; display:flex; flex-direction:column; gap:2px;
text-shadow:0 1px 3px rgba(0,0,0,.9); }
#harc-csikok .hcs b { font-size:9px; font-weight:600; letter-spacing:.16em; color:#ff8a70; text-align:center; white-space:nowrap; }
#harc-csikok .hcs i { display:block; height:4px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); border-radius:2px; overflow:hidden; }
#harc-csikok .hcs i u { display:block; height:100%; width:100%; text-decoration:none; transition:width .12s linear; }
#harc-csikok .hcs i.p u { background:#5ab4ff; box-shadow:0 0 6px rgba(90,180,255,.7); }
#harc-csikok .hcs i.h u { background:#ff7a4a; }
#harc-csikok .hcs em { font-style:normal; font-size:9px; letter-spacing:.08em; color:#ffd8c8; text-align:center; white-space:nowrap; text-shadow:0 0 3px #000; }
/* (7.18) A NAPLO ALJAN a gazda probaja: hany raider, es a gomb */
.ms-harc { display:flex; align-items:center; gap:6px; margin-right:auto; }
/* (8.12) AZ ADMIN FUL: a gazda probai egy helyen, csoportokban */
.ms-fulek button.ms-admin-ful { margin-left:auto; color:#f0c070; }
.ms-admin { display:flex; flex-direction:column; gap:16px; padding:8px 4px; }
.ms-admin h4 { margin:0 0 -6px; font-size:10px; font-weight:600; letter-spacing:.24em; color:#7fa4bb; }
.ms-admin-sor { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ms-admin .ms-harc { margin-right:0; }
/* (8.49) az ADMIN ket fule (QUESTS / COMMANDS) - kisebb fulek a lap tetejen */
.ms-admin-fulek { display:flex; gap:6px; border-bottom:1px solid rgba(140,210,240,.22); padding-bottom:6px; }
.ms-admin-fulek button { font:inherit; font-size:10px; letter-spacing:.2em; padding:6px 14px; cursor:pointer; color:#9fc2d6;
background:rgba(10,30,46,.5); border:1px solid rgba(140,210,240,.25); border-radius:3px; }
.ms-admin-fulek button.on { color:#f0c070; border-color:rgba(240,192,112,.6); background:rgba(40,32,14,.55); }
/* (8.68) az ADMIN NEBULA fule: ket oszlopban a felho parameterei */
.ms-kod { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 18px; }
.ms-kod-sor { display:flex; align-items:center; gap:10px; min-height:26px; }
.ms-kod-sor > span:first-child { flex:0 0 112px; font-size:10px; letter-spacing:.16em; color:#9fc2d6; }
.ms-kod-sor select, .ms-kod-sor input[type=number] { flex:1; min-width:0; padding:4px 6px; font:inherit; font-size:11px; color:#e6f6ff;
background:rgba(10,30,46,.85); border:1px solid rgba(140,210,240,.35); border-radius:3px; }
.ms-kod-sor input:disabled { opacity:.35; }
.ms-kod-sor input[type=color] { width:56px; height:24px; padding:0 2px; background:rgba(10,30,46,.85); border:1px solid rgba(140,210,240,.35); border-radius:3px; cursor:pointer; }
.ms-kod-cs { flex:1; display:flex; align-items:center; gap:8px; min-width:0; }
.ms-kod-cs input[type=range] { flex:1; min-width:0; accent-color:#f0c070; }
.ms-kod-cs output { width:34px; text-align:right; font-size:11px; color:#e6f6ff; }
.ms-kod-cs .ms-ujra { padding:4px 10px; }
.ms-kod-cs input[type=checkbox] { margin:0; accent-color:#f0c070; cursor:pointer; }
.ms-kod-masol.ok { border-color:rgba(120,230,150,.8); color:#a8f0bc; }
.ms-kod-masol.hiba { border-color:rgba(255,110,90,.8); color:#ffb0a0; }
.ms-kod-meg { margin:-6px 0 0; font-size:10.5px; line-height:1.5; color:#7fa4bb; }
/* (8.62) a STORY ful szuroje: radiogombok a lista folott */
.ms-szuro { display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid rgba(140,210,240,.22); }
.ms-szuro label { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:10px; letter-spacing:.2em; color:#9fc2d6; }
.ms-szuro label.on { color:#f0c070; }
.ms-szuro input { margin:0; accent-color:#f0c070; cursor:pointer; }
/* (8.14) a quest-allito: cim balra, jobbra nyil - valaszto - nyil */
.ms-admin-q { display:flex; flex-direction:column; gap:4px; }
.ms-q-sor { display:flex; align-items:center; gap:6px; padding:3px 6px; border:1px solid rgba(140,210,240,.14); border-radius:3px; background:rgba(10,30,46,.35); }
.ms-q-sor > span { flex:1; min-width:0; font-size:11px; letter-spacing:.06em; color:#cfe6f2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-q-sor button { width:24px; height:22px; padding:0; font-size:10px; color:#e6f6ff; cursor:pointer;
background:rgba(10,30,46,.7); border:1px solid rgba(140,210,240,.35); border-radius:3px; }
.ms-q-sor button:disabled { opacity:.3; cursor:default; }
.ms-q-sor select { width:260px; max-width:48%; padding:3px 4px; font:inherit; font-size:10.5px; color:#e6f6ff;
background:rgba(10,30,46,.85); border:1px solid rgba(140,210,240,.35); border-radius:3px; }
.ms-harc input { width:52px; padding:5px 6px; font:inherit; font-size:11px; color:#e6f6ff; text-align:center;
background:rgba(10,30,46,.7); border:1px solid rgba(140,210,240,.35); border-radius:3px; }
/* (8.57) a freighter kapcsoloja a SPAWN RAIDERS mellett */
.ms-harc .ms-harc-fl { display:flex; align-items:center; gap:4px; font-size:10.5px; letter-spacing:.08em; color:#bfe6f6; cursor:pointer; }
.ms-harc .ms-harc-fl input { width:auto; padding:0; margin:0; accent-color:#ff9a4a; }
/* (7.20) A CELKERESZT, AMIG HAJO ALL ALATTA: voros, elforgatott negyzet-
sarkok; es az elore-celzo jel: egy kis rombusz, ahova loni kell */
#reticle.cel::before, #reticle.cel::after { background:#ff5a44; }
#reticle.cel::before { box-shadow:0 25px 0 #ff5a44; }
#reticle.cel::after { box-shadow:25px 0 0 #ff5a44; }
#reticle.cel { transform:rotate(45deg) scale(0.8); transition:transform .12s; }
/* (8.49) AZ ELORE-CELZO JELEK: minden hatotavon beluli raider elott egy
rombusz (ahova loni kell), es egy halvany vonal a hajotol odaig */
#harc-elore { position:fixed; left:0; top:0; width:0; height:0; z-index:31; pointer-events:none; }
#harc-elore .he { position:absolute; left:0; top:0; width:0; height:0; }
#harc-elore .he i { position:absolute; left:0; top:0; height:1px; transform-origin:0 50%;
background:linear-gradient(90deg, rgba(255,176,74,0), rgba(255,176,74,.45)); }
#harc-elore .he b { position:absolute; left:-6px; top:-6px; width:12px; height:12px; box-sizing:border-box;
border:1.5px solid rgba(255,176,74,.8); box-shadow:0 0 6px rgba(255,160,60,.5); }
#harc-elore .he.cel b { border-color:#ffd27a; background:rgba(255,190,90,.25); box-shadow:0 0 10px rgba(255,190,90,.9); }
#harc-elore .he.cel i { background:linear-gradient(90deg, rgba(255,200,110,0), rgba(255,200,110,.8)); }
/* (9.16) A BEFOGAS a rombuszon: ahogy telik (--zp), no es pirosodik, a
befogott hajo rombusza voros marad */
#harc-elore .he.befog b { border-color:rgb(255, calc(176 - var(--zp,0) * 120), calc(74 - var(--zp,0) * 40));
background:rgba(255,90,60,calc(var(--zp,0) * .35)); box-shadow:0 0 calc(6px + var(--zp,0) * 10px) rgba(255,80,50,.8); }
#harc-elore .he.zart b { border-color:#ff3a2a; background:rgba(255,60,40,.3); box-shadow:0 0 10px rgba(255,60,40,.9); }
#harc-elore .he.zart i { background:linear-gradient(90deg, rgba(255,70,50,0), rgba(255,70,50,.7)); }
/* (7.22) A CELZAR: a celkereszt korul egy 45 fokkal elforditott voros
negyzet, a jobb felso sarkaban kicsi LOCKED felirat (harom masodpercig) */
#celzar { position:fixed; left:var(--view-cx,50%); top:var(--view-cy,50%); width:0; height:0; z-index:31; pointer-events:none; display:none; }
#celzar.on { display:block; }
#celzar i { position:absolute; left:-24px; top:-24px; width:48px; height:48px; box-sizing:border-box;
border:2px solid #ff3a2a; transform:rotate(45deg); box-shadow:0 0 10px rgba(255,60,40,.55);
animation:celzar-be .25s ease-out; }
#celzar b { position:absolute; left:22px; top:-40px; font-size:9px; font-weight:600; letter-spacing:.2em; color:#ff5a44;
text-shadow:0 0 6px rgba(255,60,40,.7); }
/* (9.16) ha a kontakt elveszett, a zar meg tart, de villog */
#celzar.vesz i, #celzar.vesz b { animation:celzar-vesz .5s steps(2) infinite; }
@keyframes celzar-vesz { 50% { opacity:.35; } }
#celzar b { white-space:nowrap; }
@keyframes celzar-be { from { transform:rotate(45deg) scale(1.8); opacity:0; } to { transform:rotate(45deg) scale(1); opacity:1; } }
/* (7.76) A TEST ES A PAJZS TELEFONON: a kepernyo tetejen, kozepen, egymas
alatt, apro betukkel, keret es hatter nelkul - kulso nezetben is (gepen
ott az allapotlapon van, telefonon az nem latszik). A szam elmarad, a
csik mondja meg. */
@media (hover: none) and (pointer: coarse) {
body.view-ship #elet-ki:not([hidden]), body #elet-ki:not([hidden]) { display:block !important; }
body #elet-ki { top:4px; left:50%; transform:translateX(-50%); width:160px; padding:0;
background:none; border:0; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none;
font-size:8px; letter-spacing:.1em; }
body #elet-ki .ek-sor { gap:5px; line-height:1.35; }
body #elet-ki .ek-sor span { width:38px; font-size:8px; text-shadow:0 0 3px #000; }
body #elet-ki .ek-sor span::after { content:':'; }
body #elet-ki .ek-sor em { height:3px; }
body #elet-ki .ek-sor b { display:none; }
}