html, body {
margin: 0;
padding: 0;
background: #0b1520;
color: #e8f1ff;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
height: 100%;
}
.hud {
position: fixed;
top: 10px;
left: 10px;
background: rgba(0,0,0,0.35);
padding: 8px 10px;
border-radius: 8px;
font-size: 14px;
z-index: 1000; /* mindig a canvas felett legyen */
}
/* 161. mód: a bal felső HUD kompakt oszlop: hajó-HUD, droid-HUD, torony-pill, egymás alatt;
a jobb felső sarkában a „?” súgó-ikon. */
.hud { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 30px 6px 8px; font-size: 13px; }
.hud-jobb { flex-direction: row; align-items: center; padding: 8px 10px; font-size: 14px; }
/* 161. mód: irányítási segítség – „?” ikon, a szöveg csak rámutatásra / fókuszra nyílik le */
.help { position: absolute; top: 6px; right: 6px; outline: none; }
.help-ikon {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
border: 1px solid #4a7db0; color: #8fb4d6; background: rgba(15, 32, 51, 0.85);
font-size: 12px; font-weight: 700; cursor: help; user-select: none;
}
.help:hover .help-ikon, .help:focus .help-ikon { color: #e8f0f7; border-color: #8fb4d6; }
.help-szoveg {
display: none; position: absolute; top: 24px; left: 0; z-index: 1100;
min-width: 210px; padding: 7px 10px; border-radius: 8px;
background: rgba(8, 16, 28, 0.94); border: 1px solid #2a4a6e;
font-size: 12px; line-height: 1.55; color: #dbe7ff; white-space: nowrap;
}
.help:hover .help-szoveg, .help:focus .help-szoveg, .help:focus-within .help-szoveg { display: block; }
/* a lenyíló súgó a (később jövő, azonos z-indexű) csoport-HUD FÖLÖTT legyen */
.hud:has(.help:hover), .hud:has(.help:focus-within) { z-index: 1050; }
.help-cim { font-weight: 700; color: #ffd45e; margin-bottom: 2px; }
/* 33. mód: jobb felső sarok HUD – kredit + Kilépés a hangárba gomb.
A .hud alapstílusát örökli (top, háttér, padding, z-index), csak a vízszintes
rögzítés fordul át: a doboz a jobb szélhez tapad, benne balra a kredit pill,
tőle jobbra – a képernyő legszélén – a kilépés gomb. */
.hud-jobb { left: auto; right: 10px; }
.hud-jobb .credits { margin-left: 0; } /* itt nem kell a bal belső margó */
#game {
display: block;
margin: 0 auto;
background: #0f2033;
border: 1px solid #1d3350;
position: absolute; /* a kliens JS is absolute-ra teszi; legyen konzisztens */
z-index: 0; /* a HUD alá rakjuk */
}
.credits {
display: inline-block;
margin-left: 12px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(255, 200, 60, 0.18);
border: 1px solid rgba(255, 200, 60, 0.45);
color: #ffd45e;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.credits.kockazat {
background: rgba(255, 120, 60, 0.18);
border-color: rgba(255, 120, 60, 0.5);
color: #ff9d5e;
}
/* Lerakható torony-helyek a HUD-ban (a .credits pill mintájára, torony-kékben). */
.torony-helyek {
display: inline-block;
margin-left: 0; /* 161. mód: a kompakt HUD-oszlopban (eddig 12px, a sor végén) */
padding: 3px 10px;
border-radius: 999px;
background: rgba(94, 200, 255, 0.14);
border: 1px solid rgba(94, 200, 255, 0.4);
color: #7fd4ff;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.torony-helyek.tele { /* 0 szabad hely */
background: rgba(255, 90, 90, 0.16);
border-color: rgba(255, 90, 90, 0.45);
color: #ff8f8f;
}
.torony-helyek[hidden] { display: none; } /* kötelező: az explicit stílus felülírná az alap [hidden]-t */
/* ═══ Csoport HUD (32. mód): meghívás küldése + beérkezett meghívás ═══════
161. mód: ÖNÁLLÓ, MOZGATHATÓ panel (mint a lőszer-HUD) – alapból a bal felső HUD
mellett (a kliens számolja: csoportHudGyariHely), a ✥ fogantyúval húzható. */
.csoport-hud {
position: fixed; top: 10px; left: 240px; z-index: 1000;
display: flex; flex-direction: column; align-items: stretch; gap: 5px;
background: rgba(0,0,0,0.35); padding: 6px 8px; border-radius: 8px;
font-size: 13px; box-sizing: border-box;
width: max(10vw, 200px); /* 36. mód: a képernyő 10%-a (Alex kérése); 161. mód: min. 200px */
user-select: none;
}
.csoport-hud[hidden] { display: none; } /* kötelező: az explicit stílus felülírná az alap [hidden]-t */
.csoport-fejlec { margin-bottom: 0; align-items: center; }
.csoport-cimke { color: #8fb4d6; font-weight: 700; }
.csoport-meghivo { display: flex; gap: 4px; align-items: center; }
.csoport-statusz:empty { display: none; }
.csoport-valaszok { display: flex; gap: 4px; }
.csoport-valaszok:not(:has(button:not([hidden]))) { display: none; } /* nincs függő meghívás */
#csoportNev {
background: rgba(15, 32, 51, 0.85);
border: 1px solid #2a4a6e;
border-radius: 6px;
color: #dbe7ff;
font: inherit;
font-size: 13px;
padding: 3px 8px;
flex: 1 1 70px; /* 36. mód: rugalmas szélesség a 10%-os oszlopban */
min-width: 0;
}
#csoportNev:focus { outline: none; border-color: #4a7db0; }
.csoport-meghiv-gomb {
padding: 3px 10px;
border: 1px solid #2a4a6e;
border-radius: 999px;
background: transparent;
color: #8fb4d6;
font: inherit;
font-size: 13px;
cursor: pointer;
flex: 0 0 auto; /* 36. mód: ne zsugorodjon szét, külön sorba tördeljen */
white-space: nowrap;
}
.csoport-meghiv-gomb:hover { border-color: #4a7db0; color: #e8f0f7; }
.csoport-statusz {
color: #8fb4d6;
font-size: 12px;
max-width: 100%; /* 36. mód: belefér a 10%-os oszlopba */
min-width: 0;
overflow-wrap: anywhere; /* hosszú játékosnevek törnek, nem lógnak ki */
}
/* ═══ 34. mód: meghívás-válasz gombok (✓/✗) + csoporttag-lista ══════════ */
.csoport-valasz-gomb {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; padding: 0; margin-left: 0;
border: 1px solid #3a5f84; border-radius: 6px;
background: rgba(15, 25, 40, 0.85);
font-size: 15px; font-weight: bold; line-height: 1;
cursor: pointer; flex: 0 0 auto;
}
.csoport-valasz-gomb[hidden] { display: none; } /* kötelező: a flex felülírná [hidden]-t */
.csoport-valasz-gomb.elfogad { color: #4cd964; }
.csoport-valasz-gomb.elfogad:hover { border-color: #4cd964; }
.csoport-valasz-gomb.elutasit { color: #ff5555; }
.csoport-valasz-gomb.elutasit:hover { border-color: #ff5555; }
/* ═══ 39. mód: Kilépés a csoportból gomb (csak csoporttagság közben látszik) ═══ */
.csoport-kilep-gomb {
align-self: flex-start; /* 161. mód: oszlopos panelben ne nyúljon szét */
padding: 3px 10px;
border: 1px solid #6e2f2f;
border-radius: 999px;
background: transparent;
color: #d68f8f;
font: inherit;
font-size: 13px;
cursor: pointer;
flex: 0 0 auto; /* 36. mód mintájára: ne zsugorodjon szét */
white-space: nowrap;
}
.csoport-kilep-gomb:hover { border-color: #c25a5a; color: #ffdede; }
.csoport-kilep-gomb[hidden] { display: none; } /* kötelező: a flex felülírná [hidden]-t */
.csoport-taglista { /* 34. mód: taglista; 35. mód: HP/pajzs sávok; 36. mód: a 10%-os oszlophoz rugalmas */
display: block;
flex-basis: 100%; /* a .csoport-hud flex-wrap:wrap – a pill ALATT */
margin-left: 0;
font-size: 12px;
color: #e8f1ff;
background: rgba(10, 20, 34, 0.72);
border: 1px solid rgba(76, 217, 100, 0.35);
border-radius: 8px;
padding: 6px 8px;
box-sizing: border-box; /* 36. mód: padding+border a 10%-os oszlopon BELÜL */
}
.csoport-taglista[hidden] { display: none; } /* kötelező: a blokk-stílus felülírná [hidden]-t */
.ct-cim { color: #4cd964; font-weight: 700; margin-bottom: 4px; }
.ct-sor { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; row-gap: 3px; margin: 2px 0; }
.ct-fej { display: flex; align-items: center; gap: 4px; flex: 1 1 100%; min-width: 0; } /* 161. mód: név + iránytű */
.ct-nev { color: #cfe3f5; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 161. mód: iránytű-gomb (csak az azonos pályán lévő társnál); bekapcsolva kiemelt */
.ct-iranytu {
flex: none; width: 22px; height: 20px; padding: 0; line-height: 1;
border: 1px solid #2a4a6e; border-radius: 6px; background: rgba(15, 32, 51, 0.85);
font-size: 13px; cursor: pointer; filter: grayscale(0.8); opacity: 0.75;
}
.ct-iranytu:hover { border-color: #4a7db0; opacity: 1; }
.ct-iranytu.aktiv { border-color: #3ec6ff; background: rgba(62, 198, 255, 0.22); filter: none; opacity: 1; }
.ct-ures { color: #8fb4d6; font-style: italic; }
.ct-sav { display: inline-block; position: relative; flex: 1 1 20px; min-width: 20px; height: 9px; border-radius: 5px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.15); overflow: hidden; }
.ct-tolt { display: block; height: 100%; border-radius: 4px; }
/* 181. mód: a halott társ sora halványan (eddig inline style=, a CSP nem engedi) */
.ct-halott { opacity: .45; }
.ct-szam { color: #bfe6ff; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; flex: none; font-size: 11px; }
.csoport-statusz.meghivva { /* beérkezett meghívás - zöld kiemelés */
color: #7dffa8;
text-shadow: 0 0 6px rgba(125, 255, 168, 0.4);
}
/* ═══ Belépőképernyő ═══════════════════════════════════════════════════
A paletta a játék sajátja: a canvas #0f2033 navyja, a #1d3350 keret és a
már bevezetett arany kreditszín. A szervezőelem a repülési adatcsík -
az a papírcsík, amit a légiirányítók vezetnek gépenként. */
.belepo {
position: fixed;
inset: 0;
z-index: 2000;
display: grid;
place-items: center;
padding: 24px;
background:
radial-gradient(120% 90% at 50% 0%, #14293f 0%, #0a1826 55%, #071119 100%);
}
.belepo[hidden] { display: none; }
.belepo-panel {
width: min(520px, 100%);
color: #e8f0f7;
/* 31. mód (2026-09-07): görgethető hangár. A .belepo fix, középre igazított
grid-konténer, így a viewportnál magasabb panel két irányba lógott ki és
elérhetetlen volt. A panel most sosem lehet magasabb a látható területnél,
a tartalom magában a panelben görgethető. */
max-height: 100%; /* a .belepo grid-területéhez igazodik (viewport − padding) */
overflow-y: auto; /* belső görgetés – a kilógó sorok így elérhetők */
overscroll-behavior: contain; /* görgetés végén ne pörgessen a háttér */
scrollbar-gutter: stable; /* ne ugráljon a tartalom a scrollbar megjelenésekor */
scrollbar-width: thin; /* Firefox: vékony, témához illő scrollbar */
scrollbar-color: #2a4a6e transparent;
}
/* Témához illő, vékony scrollbar (WebKit/Blink böngészők). */
.belepo-panel::-webkit-scrollbar { width: 10px; }
.belepo-panel::-webkit-scrollbar-thumb { background: #2a4a6e; border-radius: 5px; }
.belepo-panel::-webkit-scrollbar-thumb:hover { background: #4a7db0; }
.belepo-panel::-webkit-scrollbar-track { background: transparent; }
/* Rövid képernyőn (laptop 1366×768, mobil fekvő) kisebb margó = több látható sor. */
@media (max-height: 760px) {
.belepo { padding: 12px; }
}
.belepo-cim {
margin: 0;
font-size: clamp(28px, 6vw, 42px);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1;
}
/* ── 56. mód: fejléc – a cím és a fiók ID-gombok (43. mód) egy sorban ──
A gombok a „Lövöldözős 5” felirat szintjébe kerültek, jobb szélre;
a cím egykori 28px-es alsó margója a fejlécre költözött. Szűk ablakon
a gombok a cím alá csúsznak (flex-wrap), az export/import panelek pedig
közvetlenül a gombok alatt nyílnak meg. */
.belepo-fejlec {
display: flex;
align-items: baseline; /* 56. mód: a gombok alapvonala a címéhez nőtt – a
megnyíló panel így LEFELÉ bővül, a gombok a cím sorában maradnak
(centernél a panellel megnövő doboz felfelé tolná ki őket) */
justify-content: space-between;
flex-wrap: wrap;
gap: 6px 18px;
margin: 0 0 28px;
}
/* ── az adatcsík ── */
.csik {
display: flex;
align-items: stretch;
border: 1px solid #2a4a6e;
border-radius: 3px;
background: #0f2033;
overflow: hidden;
}
.csik-mezo { padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.csik-nev { flex: 1 1 auto; }
.csik-egyenleg {
flex: 0 0 auto;
border-left: 1px solid #2a4a6e;
justify-content: center;
text-align: right;
min-width: 116px;
}
.csik-cimke {
font-size: 11px;
letter-spacing: 0.04em;
color: #5c8bb8;
}
.csik-input {
width: 100%;
border: 0;
background: transparent;
color: #e8f0f7;
font: 600 20px/1.2 ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
padding: 0;
}
.csik-input::placeholder { color: #3d5f85; }
.csik-input:focus { outline: none; }
.csik:focus-within { border-color: #4a7db0; }
.csik-ertek {
font: 600 20px/1.2 ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
color: #ffd45e;
}
/* ── felszállás ── */
.belepo-gomb {
margin-top: 14px;
width: 100%;
padding: 13px;
border: 0;
border-radius: 3px;
background: #ffd45e;
color: #10202f;
font-size: 15px;
font-weight: 650;
cursor: pointer;
transition: background 120ms ease;
}
.belepo-gomb:hover:not(:disabled) { background: #ffe08a; }
.belepo-gomb:focus-visible { outline: 2px solid #e8f0f7; outline-offset: 2px; }
.belepo-gomb:disabled { background: #2a4a6e; color: #5c8bb8; cursor: progress; }
.belepo-allapot {
margin: 10px 0 0;
min-height: 18px;
font-size: 13px;
color: #5c8bb8;
}
.belepo-allapot.hiba { color: #ff9d5e; }
/* ── irányítás ── */
.iranyitas {
margin: 30px 0 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 7px 16px;
font-size: 13px;
border-top: 1px solid #1d3350;
padding-top: 18px;
}
.iranyitas dt {
color: #e8f0f7;
font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
font-size: 12px;
}
.iranyitas dd { margin: 0; color: #5c8bb8; }
.belepo-lablec {
margin: 22px 0 0;
font-size: 12px;
color: #456a92;
line-height: 1.6;
}
.link {
border: 0;
background: none;
padding: 0;
color: #5c8bb8;
font: inherit;
text-decoration: underline;
cursor: pointer;
}
.link:hover { color: #ff9d5e; }
/* ── 43. mód: fiók-azonosító (userID) export/import a belépő panelben ── */
.fiok-doboz { margin: 0; } /* 56. mód: a fejlécben már nem kell felső margó */
.fiok-doboz[hidden] { display: none; }
.fiok-fejsor { display: flex; flex-direction: column; align-items: flex-end; }
.fiok-gombok { margin: 0 0 4px; font-size: 13px; line-height: 1.6; }
.fiok-gombok .link { font-size: 13px; }
/* Képernyőolvasóknak látható, vizuálisan rejtett kísérőszöveg (56. mód). */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
#fiokExportTer[hidden], #fiokImportTer[hidden] { display: none; }
.fiok-magy { margin: 6px 0 5px; font-size: 12px; color: #456a92; }
.fiok-sor { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fiok-input {
flex: 1 1 260px; min-width: 0;
background: rgba(7, 14, 26, 0.9); border: 1px solid #1d3350; color: #cfe3f5;
border-radius: 6px; padding: 7px 9px; font-size: 12px;
font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}
.fiok-input:focus { outline: 1px solid #5c8bb8; }
.fiok-input[readonly] { color: #8fb7dd; }
.fiok-gomb {
flex: 0 0 auto; white-space: nowrap;
border: 1px solid #1d3350; background: rgba(13, 27, 46, 0.9); color: #cfe3f5;
border-radius: 6px; padding: 7px 12px; font-size: 12px; cursor: pointer;
}
.fiok-gomb:hover { border-color: #5c8bb8; color: #ff9d5e; }
.fiok-jegyzet { margin: 5px 0 0; min-height: 15px; font-size: 12px; color: #5c8bb8; }
@media (prefers-reduced-motion: no-preference) {
.belepo { animation: belepoNyit 260ms ease-out; }
@keyframes belepoNyit { from { opacity: 0; } to { opacity: 1; } }
}
/* ── Hangár: fejlesztések ── */
.hangar { margin-top: 20px; }
.hangar-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.hangar-tabla tr + tr td { border-top: 1px solid #1d3350; }
.hangar-tabla td { padding: 11px 0; vertical-align: middle; }
.hangar-nev { color: #e8f0f7; }
.hangar-szint { font-size: 12px; color: #456a92; }
.hangar-ertek {
font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
color: #5c8bb8;
white-space: nowrap;
text-align: right;
padding-right: 14px !important;
}
.hangar-ertek b { color: #e8f0f7; font-weight: 600; }
.hangar-vesz { width: 1%; }
.vesz-gomb {
min-width: 92px;
padding: 7px 12px;
border: 1px solid #2a4a6e;
border-radius: 3px;
background: #142c44;
color: #ffd45e;
font: 600 13px/1 ui-monospace, "SF Mono", Consolas, monospace;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.vesz-gomb:hover:not(:disabled) { background: #1c3c5c; border-color: #4a7db0; }
.vesz-gomb:focus-visible { outline: 2px solid #e8f0f7; outline-offset: 2px; }
.vesz-gomb:disabled { color: #3d5f85; border-color: #1d3350; background: transparent; cursor: not-allowed; }
.hangar-uzenet { margin: 12px 0 0; min-height: 17px; font-size: 13px; color: #ff9d5e; }
/* ── Kilépés a játékból ── */
.kilepes {
margin-left: 10px;
padding: 3px 10px;
border: 1px solid #2a4a6e;
border-radius: 999px;
background: transparent;
color: #8fb4d6;
font: inherit;
font-size: 13px;
cursor: pointer;
}
.kilepes:hover { border-color: #4a7db0; color: #e8f0f7; }
.kilepes[hidden] { display: none; }
/* ── Ranglista ── */
.ranglista { margin-top: 26px; border-top: 1px solid #1d3350; padding-top: 18px; }
.ranglista-cim {
margin: 0 0 10px;
font-size: 13px;
font-weight: 600;
color: #5c8bb8;
}
.ranglista-cim span { color: #456a92; font-weight: 400; }
.ranglista-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.ranglista-tabla td { padding: 5px 0; color: #8fb4d6; }
.rl-hely {
width: 1%;
padding-right: 12px !important;
text-align: right;
color: #456a92;
font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.rl-nev { color: #e8f0f7; }
.rl-id {
color: #3d5f85;
font-family: ui-monospace, "SF Mono", Consolas, monospace;
font-size: 11px;
padding-left: 8px;
}
.rl-pont {
text-align: right;
font-family: ui-monospace, "SF Mono", Consolas, monospace;
color: #e8f0f7;
}
.ranglista-tabla tr.enyem td { background: rgba(255, 212, 94, 0.08); }
.ranglista-tabla tr.enyem .rl-nev,
.ranglista-tabla tr.enyem .rl-pont { color: #ffd45e; }
.csik-rang { color: #8fb4d6; }
.hangar-csoport {
padding-top: 16px !important;
padding-bottom: 4px !important;
font-size: 11px;
letter-spacing: 0.04em;
color: #456a92;
border-top: 0 !important;
}
.hangar-tabla tr:first-child .hangar-csoport { padding-top: 4px !important; }
/* ── HARDMODE jelzés ────────────────────────────────────────────────────
Színátmenetes, pirosan villogó felirat a játéktér tetején, középen, ha a szerver
nehéz módban fut (a welcome.hardmode flag állítja). A HUD (1000) alá
rakjuk, a belépőképernyő (2000) alá - hangárban nem látszik. */
.hardmode-banner {
position: fixed;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
pointer-events: none; /* nem akadályozza a célzást/lövést */
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
letter-spacing: 0.1em;
background: linear-gradient(180deg, #ff6b6b 0%, #d32f2f 55%, #7a0d0d 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 16px rgba(255, 30, 30, 0.55));
animation: hardmode-villog 1.3s ease-in-out infinite;
}
.hardmode-banner[hidden] { display: none; }
/* "Hardmode figyelmeztetés" gomb: ki/be kapcsolja a játéktéri feliratot.
A HUD panelben ül, a "Kilépés a hangárba" gomb mellett - így a HUD-dal
egy területen van, és mobilon is látszik (a HUD a képernyő tetején van,
nem a böngésző alsó sávja mögött). */
.hardmode-toggle {
margin-left: 10px;
padding: 3px 10px;
font: inherit;
font-size: 13px;
font-weight: 600;
color: #ff9c9c;
background: rgba(120, 18, 18, 0.55);
border: 1px solid rgba(255, 90, 90, 0.55);
border-radius: 999px;
cursor: pointer;
opacity: 0.8;
}
.hardmode-toggle:hover { background: rgba(170, 28, 28, 0.75); opacity: 1; }
.hardmode-toggle[hidden] { display: none; } /* kötelező: az explicit stílus felülírná az alap [hidden]-t */
/* Ugyanez a jelzés kisebb formában, a hangár címe mellett jobbra. */
.hardmode-jel {
display: inline-block;
margin-left: 14px;
vertical-align: middle;
font-size: clamp(14px, 2.2vw, 20px);
font-weight: 800;
letter-spacing: 0.12em;
background: linear-gradient(180deg, #ff6b6b 0%, #d32f2f 55%, #7a0d0d 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 8px rgba(255, 30, 30, 0.55));
animation: hardmode-villog 1.3s ease-in-out infinite;
}
.hardmode-jel[hidden] { display: none; }
@keyframes hardmode-villog {
0%, 100% { opacity: 1; filter: drop-shadow(0 0 20px rgba(255, 30, 30, 0.85)); }
50% { opacity: 0.25; filter: drop-shadow(0 0 5px rgba(255, 30, 30, 0.15)); }
}
@media (prefers-reduced-motion: reduce) {
.hardmode-banner, .hardmode-jel { animation: none; }
}
/* ── PVPONLY jelzés ─────────────────────────────────────────────────────
Statikus (nem villogó) kék felirat a játéktér tetején, középen, ha a
szerver PvP-üzemmódban fut (welcome.pvponly flag). A hardmode-bannertől
eltérően ez nem figyelmeztetés, hanem üzemmód-jelzés, ezért nyugodtabb,
villogás nélküli stílus. Hangárban a cím mellett kis jelvény látszik. */
.pvponly-banner {
position: fixed;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
pointer-events: none; /* nem akadályozza a célzást/lövést */
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
letter-spacing: 0.1em;
background: linear-gradient(180deg, #7ec8ff 0%, #1565c0 55%, #0a2f6e 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 14px rgba(80, 160, 255, 0.5));
opacity: 0.85;
}
.pvponly-banner[hidden] { display: none; }
/* ── 225. mód: DEV SZERVER jelzés ───────────────────────────────────────
A fejlesztői példányon (welcome.devSzerver) felül középen, MINDEN fölött (hangár,
játéktér, ablakok), sárga-fekete csíkos címke; nem fogja meg az egeret/érintést.
A felső középső elemek (HARDMODE / PVPONLY felirat, hibasáv) ilyenkor lejjebb kerülnek. */
.dev-szerver-jel {
position: fixed; top: 0; left: 50%; transform: translateX(-50%);
z-index: 6000; pointer-events: none; white-space: nowrap;
padding: 2px 16px 3px; border-radius: 0 0 8px 8px;
font: 800 13px/1.25 system-ui, sans-serif; letter-spacing: 0.14em;
color: #1a1200; background: repeating-linear-gradient(135deg, #ffd000 0 10px, #ffae00 10px 20px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.dev-szerver-jel[hidden] { display: none; }
html.dev-szerver .hardmode-banner, html.dev-szerver .pvponly-banner { top: 30px; }
html.dev-szerver .hiba-sav { top: 26px; }
/* Ugyanez kisebb formában, a hangár címe mellett jobbra. */
.pvponly-jel {
display: inline-block;
margin-left: 14px;
vertical-align: middle;
font-size: clamp(14px, 2.2vw, 20px);
font-weight: 800;
letter-spacing: 0.12em;
background: linear-gradient(180deg, #7ec8ff 0%, #1565c0 55%, #0a2f6e 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 8px rgba(80, 160, 255, 0.5));
opacity: 0.9;
}
.pvponly-jel[hidden] { display: none; } /* kötelező: az explicit stílus felülírná az alap [hidden]-t */
/* ═══ 48. mód (2026-09-09): ASZTALI GÉPRE OPTIMALIZÁLT HANGÁR ══════════
A 31. mód óta a hangárpanel 520px-es keskeny oszlop, minden elem egymás
alatt – mobilon/táblagépen jó, de asztali monitoron „mobilosnak" hat:
kicsi a betű, és a tartalom hosszan görgethető még 1080p-n is.
1000px szélességtől a panel kiszélesedik (max. 1080px), és a FEJLESZ-
TÉSEK (hangár) meg a RANGLISTA egymás MELLÉ kerülnek két oszlopba –
a teljes tartalom átlagos monitoron görgetés nélkül látszik.
A DOM és a JS nem változott: a rendezés tisztán CSS grid-placement.
1000px ALATT (mobil, táblagép) minden a régiképp működik. */
@media (min-width: 1000px) {
.belepo { padding: 36px 44px; }
.belepo-panel {
width: min(1080px, 100%);
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
/* 88. mód: felül teli szélességben cím + adatcsík, alatta KÖZÉPEN az
Indítás gomb és az állapotsor; alattuk bal oszlopban a fejlesztések
és a lőszer, jobb oszlopban egymás alatt a napi küldetések, a
ranglista, az irányítás és a lábléc. A bal oszlop végig átível a
jobb oldali sorokon; az utolsó (1fr) sor nyeli el a magasság-
különbséget, így a jobb oldali elemek felül tömörülnek.
A rejtett ([hidden]) elemek cellái üresek, így a belépés ELŐTTI
állapot (cím + csík + gomb) is rendezett marad. */
grid-template-areas:
"cim cim"
"csik csik"
"gomb gomb"
"palya palya"
"allapot allapot"
"hangar kuld"
"hangar ranglista"
"hangar iranyitas"
"hangar lablec";
grid-template-rows: auto auto auto auto auto auto auto auto 1fr; /* 133. mód: + palya sor */
column-gap: 44px;
align-items: start; /* cellatartalom a cella tetejére, ne nyújtsa egymást */
}
.belepo-fejlec { grid-area: cim; } /* 56. mód: a cím és az ID-gombok együtt */
.csik { grid-area: csik; }
.hangar { grid-area: hangar; margin-top: 24px; }
.kuldetes { grid-area: kuld; margin-top: 24px; }
.ranglista { grid-area: ranglista; margin-top: 24px; }
/* 88. mód: az Indítás gomb a képernyő (panel) közepén */
.belepo-gomb { grid-area: gomb; justify-self: center; width: min(420px, 100%); margin-top: 22px; }
.belepo-allapot { grid-area: allapot; justify-self: center; text-align: center; }
.belepo-palyavalaszto { grid-area: palya; justify-self: center; } /* 133. mód */
.iranyitas { grid-area: iranyitas; margin-top: 24px; }
.belepo-lablec { grid-area: lablec; margin-top: 10px; }
/* Nagy monitoron nagyobb, lazább tipográfia – a mobilos 13–15px helyett
asztali olvasásméret, de csak a hangár felületén (a játék HUD-jához
nem nyúlunk). */
.belepo-cim { font-size: 48px; }
.csik-mezo { padding: 12px 16px; }
.csik-input, .csik-ertek { font-size: 22px; }
.belepo-gomb { font-size: 16px; padding: 14px; }
.belepo-allapot { font-size: 14px; }
.hangar-tabla { font-size: 15px; }
.hangar-tabla td { padding: 12px 0; }
.vesz-gomb { min-width: 108px; font-size: 14px; }
.hangar-uzenet { font-size: 14px; }
.ranglista-cim { font-size: 14px; }
.ranglista-tabla { font-size: 14px; }
.iranyitas { font-size: 14px; gap: 8px 16px; }
}
/* Rövid asztali monitoron (pl. 1366×768 laptop) a 31. mód szellemében
kevesebb keret és feszesebb sorok – a kétoszlopos elrendezés így
görgetés nélkül (vagy legfeljebb hajszálnyival) elfér. Ez a blokk a
fenti után áll, ugyanott ható szabályait felülírja; a 1000px alatti
(mobil) rövid-képernyős szabályra nincs hatással. */
@media (min-width: 1000px) and (max-height: 760px) {
.belepo { padding: 14px 24px; }
.belepo-cim { font-size: 40px; }
.belepo-fejlec { margin-bottom: 16px; } /* 56. mód: a margó a fejlécre költözött */
.hangar, .kuldetes, .ranglista, .iranyitas { margin-top: 16px; }
.hangar-tabla td { padding: 9px 0; }
.belepo-gomb { padding: 12px; margin-top: 16px; }
}
/* ── 50. mód: fiók-kizárás figyelmeztető banner (49. mód, látványos változat) ──
A képernyő tetején úszik be, minden UI (HUD, hangár) fölött; magától NEM
tűnik el – kizárólag a jobb szélen lévő kis X gombbal zárható be. */
#fiokFigyelmeztetes {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 4000;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px 14px 20px;
background: linear-gradient(180deg, #c1121f 0%, #780000 100%);
border-bottom: 3px solid #ffd166;
box-shadow: 0 8px 28px rgba(0, 0, 0, .6);
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
animation: ff-beuszas .45s cubic-bezier(.2, .8, .3, 1) both;
}
/* A display:flex felülírná a [hidden] attribútum böngésző-alapstílusát –
ezért kell az explicit display:none (klasszikus csapda fix paneleknél). */
#fiokFigyelmeztetes[hidden] { display: none; }
@keyframes ff-beuszas {
from { transform: translateY(-110%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
#fiokFigyelmeztetes .ff-ikon {
flex: 0 0 auto;
font-size: 22px;
line-height: 1;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
#fiokFigyelmeztetesSzoveg { flex: 1 1 auto; min-width: 0; }
#fiokFigyelmeztetesBezar {
flex: 0 0 auto;
width: 30px; height: 30px;
margin: 0; padding: 0;
border: 2px solid rgba(255, 255, 255, .75);
border-radius: 50%;
background: rgba(0, 0, 0, .25);
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
#fiokFigyelmeztetesBezar:hover { background: rgba(0, 0, 0, .55); border-color: #fff; }
/* Mobil: kisebb betű, szűkebb margók – a hosszú szöveg törik, nem lóg ki. */
@media (max-width: 999px) {
#fiokFigyelmeztetes { font-size: 14px; padding: 10px 10px 10px 14px; gap: 10px; }
#fiokFigyelmeztetes .ff-ikon { font-size: 18px; }
#fiokFigyelmeztetesBezar { width: 26px; height: 26px; font-size: 12px; }
}
/* ── 81. mód: a 76. mód felső HUD 'Lőszer: …' sora megszűnt – az
inventory-darabszámok a bal oldali lőszer-HUD panelen élnek tovább. */
/* ── 78. mód: BAL OLDALI LŐSZER-PANEL ─────────────────────────────────────
A játéktér bal szélén, függőlegesen középen. A konténer
pointer-events: none – a célzás/lövés a panel fölött is átmegy a
canvashoz; csak a chip-gombok kattinthatók (azok az eseményt elkapják). */
.ammo-panel {
position: fixed;
left: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
background: rgba(0,0,0,0.35);
padding: 8px 10px;
border-radius: 8px;
font-size: 14px;
pointer-events: none; /* nem akadályozza a célzást/lövést */
user-select: none;
}
.ammo-cim {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #9fb6c9;
margin: 4px 0 3px;
}
.ammo-sor { display: flex; align-items: center; gap: 8px; line-height: 1.35; }
.ammo-chip {
pointer-events: auto; /* CSAK a chip kattintható a panelból */
cursor: pointer;
min-width: 86px;
padding: 3px 9px;
border: 1px solid #2a4a6e;
border-radius: 4px;
background: rgba(20,44,68,0.85);
color: #d7e4ef;
font: 600 12.5px/1.2 ui-monospace, "SF Mono", Consolas, monospace;
text-align: left;
transition: background 120ms ease, border-color 120ms ease;
}
.ammo-chip:hover:not(:disabled) { background: #1c3c5c; border-color: #4a7db0; }
.ammo-chip:focus-visible { outline: 2px solid #e8f0f7; outline-offset: 2px; }
.ammo-chip.kivalasztva {
border-color: #ffd45e;
color: #ffd45e;
background: rgba(60,46,10,0.65);
box-shadow: 0 0 8px rgba(255,212,94,0.35);
}
/* ── 81. mód: LŐSZER-HUD ELHELYEZÉS + TÁJOLÁS ──────────────────────────
.elhelyezve: van mentett (fiókhoz tartozó) pozíció – a gyári
top:50%+translateY(-50%) középre igazítás helyett explicit left/top
jön (a kliens a canvas-koordinátából számolja).
.horizontal: vízszintes elrendezés – a chip-ek egy sávban folynak, a
szakasz-címek (LŐSZER/INSTANT) elválasztóként; több sorba törhetnek. */
.ammo-panel.elhelyezve { transform: none; }
.ammo-panel.horizontal {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
max-width: min(900px, 92vw);
}
.ammo-panel.horizontal .hud-fejlec { margin: 0 4px 0 0; }
.ammo-panel.horizontal .ammo-cim { margin: 0 2px 0 0; }
.ammo-panel.horizontal .ammo-sor { display: contents; } /* chipek a sávba */
/* 81. mód: panel-fejléc (húzó-fogantyú + tájolás-váltó). pointer-events:
auto CSAK ezeknek – a panel teste továbbra is átengedi a kattintást. */
.hud-fejlec { display: flex; gap: 6px; margin-bottom: 6px; }
.hud-kezelo {
pointer-events: auto;
min-width: 30px;
padding: 3px 8px;
border: 1px solid #2a4a6e;
border-radius: 4px;
background: rgba(20,44,68,0.85);
color: #9fb6c9;
font: 600 12px/1 ui-monospace, "SF Mono", Consolas, monospace;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.hud-kezelo:hover { background: #1c3c5c; border-color: #4a7db0; color: #d7e4ef; }
.hud-huzas { cursor: grab; }
.hud-huzas:active { cursor: grabbing; }
.ammo-darab {
pointer-events: none;
color: #9fb6c9;
font: 600 12.5px/1.2 ui-monospace, "SF Mono", Consolas, monospace;
min-width: 44px;
text-align: right;
}
.ammo-darab.ures { opacity: 0.45; }
/* ── 78. mód: hangár ▲/▼ sorrend-gombok + "végtelen" jelzés ───────────── */
.hangar-vesz { white-space: nowrap; }
.sorrend-gomb {
min-width: 30px;
padding: 7px 6px;
margin-right: 4px;
border: 1px solid #2a4a6e;
border-radius: 3px;
background: #142c44;
color: #9fb6c9;
font: 600 11px/1 ui-monospace, "SF Mono", Consolas, monospace;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease;
}
.sorrend-gomb:hover:not(:disabled) { background: #1c3c5c; border-color: #4a7db0; color: #d7e4ef; }
.sorrend-gomb:disabled { color: #2a3d54; border-color: #14243a; background: transparent; cursor: not-allowed; }
.hangar-vegtelen {
display: inline-block;
padding: 7px 12px;
color: #3d5f85;
font: 600 13px/1 ui-monospace, "SF Mono", Consolas, monospace;
}
/* ── 87. mód: NAPI KÜLDETÉSEK ─────────────────────────────────────────────
Hangár: kártyák a fejlesztések és a ranglista között. A nehézség színe a
kártya bal szegélyén és a címkén látszik (könnyű zöld, közepes kék,
nehéz narancs, elit lila). */
.kuldetes { margin-top: 26px; border-top: 1px solid #1d3350; padding-top: 18px; }
.kuldetes[hidden] { display: none; }
.kuldetes-cim { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #5c8bb8; }
.kuldetes-cim span { color: #456a92; font-weight: 400; }
/* 237. mód: a küldetés-táblázat letöltése (csak a dev szerveren) – a fejléc alatt, dev-sárga keretben */
.dev-letoltes {
display: inline-block; margin: -4px 0 10px; padding: 4px 10px; border-radius: 6px;
font-size: 12.5px; font-weight: 700; color: #1a1200; text-decoration: none;
background: repeating-linear-gradient(135deg, #ffd000 0 10px, #ffae00 10px 20px);
}
.dev-letoltes:hover { filter: brightness(1.1); }
.dev-letoltes[hidden] { display: none; }
.kuldetes-lista { display: flex; flex-direction: column; gap: 8px; }
.kuld-kartya {
--kuld-szin: #5c8bb8;
border: 1px solid #1d3350;
border-left: 3px solid var(--kuld-szin);
border-radius: 4px;
padding: 9px 12px;
background: rgba(20, 44, 68, 0.35);
font-size: 13px;
}
.kuld-konnyu { --kuld-szin: #3bd16f; }
.kuld-kozepes { --kuld-szin: #3ec6ff; }
.kuld-nehez { --kuld-szin: #ff9d5e; }
.kuld-elit { --kuld-szin: #b27bff; }
.kuld-allapot-aktiv { background: rgba(255, 212, 94, 0.07); border-color: #3a5a7e; border-left-color: var(--kuld-szin); }
.kuld-allapot-kesz { opacity: 0.55; }
.kuld-fej { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kuld-nehezseg {
font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--kuld-szin); border: 1px solid var(--kuld-szin);
border-radius: 3px; padding: 1px 5px;
}
.kuld-nev { color: #e8f0f7; font-weight: 600; flex: 1; min-width: 120px; }
.kuld-jutalom {
color: #ffd45e; white-space: nowrap;
font: 600 12px/1.2 ui-monospace, "SF Mono", Consolas, monospace;
}
.kuld-feltetelek { margin: 6px 0 0; padding-left: 18px; color: #8fb4d6; }
.kuld-feltetelek li { margin: 2px 0; }
.kuld-allas {
margin-left: 8px; color: #ffd45e;
font: 12px ui-monospace, "SF Mono", Consolas, monospace;
}
.kuld-lab { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.kuld-megj { flex: 1; font-size: 11px; color: #456a92; }
.kuld-kesz { color: #3bd16f; font-weight: 600; font-size: 12px; }
.kuld-gomb {
padding: 5px 12px;
border: 1px solid #2a4a6e;
border-radius: 3px;
background: #142c44;
color: #e8f0f7;
font: 600 12px/1 system-ui, sans-serif;
cursor: pointer;
}
.kuld-gomb:hover:not(:disabled) { background: #1c3c5c; border-color: #4a7db0; }
.kuld-gomb:focus-visible { outline: 2px solid #e8f0f7; outline-offset: 2px; }
.kuld-gomb:disabled { color: #3d5f85; border-color: #1d3350; background: transparent; cursor: not-allowed; }
.kuld-gomb.kuld-lemond { background: transparent; color: #ff9d5e; border-color: #5e3a2a; }
/* 159. mód: napi újrasorsolás */
.kuld-ujra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kuld-ujra-megj { flex: 1; min-width: 180px; font-size: 11px; color: #456a92; }
.kuld-gomb.kuld-ujra-biztos { color: #ffd45e; border-color: #8a6d1e; background: rgba(255, 212, 94, 0.1); }
.kuld-gomb.kuld-lemond:hover:not(:disabled) { background: rgba(255, 157, 94, 0.12); border-color: #ff9d5e; }
/* Játék közben: aktív küldetések állása a jobb felső HUD alatt. Csak
kijelzés – pointer-events:none, a célzás és a lövés átmegy rajta. */
.kuldetes-hud {
position: fixed;
top: 58px;
right: 10px;
width: 250px;
z-index: 1000;
pointer-events: none;
background: rgba(0, 0, 0, 0.45);
border-radius: 8px;
padding: 8px 10px;
font-size: 12px;
color: #d7e4ef;
}
.kuldetes-hud[hidden] { display: none; }
.kh-cim { font-weight: 600; color: #ffd45e; margin-bottom: 4px; }
.kh-kuldetes + .kh-kuldetes { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.kh-nev { font-weight: 600; margin-bottom: 2px; }
.kh-sor { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 6px; margin: 2px 0; }
.kh-cimke { color: #8fb4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-sav { height: 5px; background: rgba(255, 255, 255, 0.12); border-radius: 3px; overflow: hidden; }
.kh-tolt { display: block; height: 100%; background: #ffd45e; }
.kh-kesz .kh-tolt { background: #3bd16f; }
.kh-sor-kesz { margin: 2px 0; color: #3bd16f; font-size: 0.92em; } /* 238. mód: a kész feltételek összegző sora (6-nál több feltételnél) */
.kh-szam { font: 11px ui-monospace, "SF Mono", Consolas, monospace; white-space: nowrap; }
/* ═══ 88. mód: HÁROMOSZLOPOS HANGÁR széles képernyőn (≥ 1360 px) ════════
Bal: fejlesztések + lőszer | közép: napi küldetések | jobb: ranglista,
alatta az irányítás és a lábléc. Az Indítás gomb a három oszlop fölött,
középen. Az oszlopok egymástól függetlenül nőnek (a bal és a középső
végig átível a jobb oldali sorokon, az utolsó 1fr sor nyeli el a
különbséget). A DOM és a JS nem változik – tisztán grid-placement. */
@media (min-width: 1360px) {
.belepo-panel {
width: min(1680px, 100%);
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.85fr);
grid-template-areas:
"cim cim cim"
"csik csik csik"
"gomb gomb gomb"
"palya palya palya"
"allapot allapot allapot"
"hangar kuld ranglista"
"hangar kuld iranyitas"
"hangar kuld lablec";
grid-template-rows: auto auto auto auto auto auto auto 1fr; /* 133. mód: + palya sor */
column-gap: 40px;
}
}
/* ── 89. mód: HANGÁR-FÜLEK (Fejlesztések / Lőszer és instant) ────────────
A két csoport sorai egy táblázatban maradnak; a szekció data-ful
attribútuma rejti a nem választott csoport sorait. */
.hangar-fulek {
display: flex;
gap: 4px;
border-bottom: 1px solid #2a4a6e;
margin-bottom: 6px;
}
.hangar-ful {
padding: 8px 14px;
border: 1px solid transparent;
border-bottom: 0;
border-radius: 4px 4px 0 0;
margin-bottom: -1px; /* az aktív fül "kinyitja" az alsó vonalat */
background: transparent;
color: #5c8bb8;
font: 600 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
cursor: pointer;
}
.hangar-ful:hover { color: #e8f0f7; }
.hangar-ful:focus-visible { outline: 2px solid #e8f0f7; outline-offset: 2px; }
.hangar-ful[aria-selected="true"] {
color: #ffd45e;
background: #0f2033;
border-color: #2a4a6e;
}
.hangar[data-ful="fejlesztes"] .hangar-tabla tr.ful-loszer,
.hangar[data-ful="loszer"] .hangar-tabla tr.ful-fejlesztes { display: none; }
@media (min-width: 1000px) {
.hangar-ful { font-size: 14px; padding: 9px 12px; } /* 120. mód: négy fül – 16 → 12 px */
}
/* ── 91. mód: HALÁLHOZ KÖTÖTT KÜLDETÉS jelölése ─────────────────────────────
Játéktéri panelen a név alatt, a hangárkártyán a lábsorban – ugyanazzal a
narancs színnel és szöveggel, hogy egyértelmű legyen. */
.kh-egyelet { color: #ff9d5e; font-size: 11px; font-weight: 600; margin: -1px 0 3px; }
.kuld-megj.kuld-egyelet { color: #ff9d5e; font-weight: 600; }
/* ── 92. mód: IDŐRE SZÓLÓ KÜLDETÉSEK + STATISZTIKA ─────────────────────────── */
.kuld-limit { margin-top: 5px; font-size: 12px; font-weight: 600; color: #3ec6ff; }
.kuld-stat { margin-top: 3px; font-size: 11px; color: #5c8bb8; }
.kuld-bukott { color: #ff6b6b; font-weight: 600; font-size: 12px; }
.kuld-allapot-bukott { opacity: 0.55; }
/* 157. mód: pályás küldetés más pályán – halványítva, a pálya neve */
.kh-mashol { opacity: 0.55; }
.kh-palya { color: #c4b5fd; font-size: 11px; font-weight: 600; margin: -1px 0 3px; }
.kh-limit { color: #3ec6ff; font-size: 11px; font-weight: 600; margin: -1px 0 3px; }
.kh-limit.kh-surgos { color: #ff5555; }
/* ── 93. mód: TÁRGYJUTALOM a küldetéskártyán (lőszer / instant / fejlesztés) ── */
.kuld-targy { margin-top: 5px; font-size: 12px; font-weight: 600; color: #3bd16f; }
/* ── 96. mód: LŐSZER-HUD SZÍNEI ────────────────────────────────────────────
A KIVÁLASZTOTT lőszer chipje a lövedék-nyalábja színét kapja (82. mód:
DoubleShot piros, Void lila, 2xDamage kék, 4xDamage zöld); a Normal
kiválasztva marad sárga, a nem kiválasztott lőszerek normál színűek.
Az INSTANTOK mindig színesek: pajzstöltők égszínkék, élettöltők smaragdzöld.
A .ammo-panel előtag azért kell, hogy a szabály a :hover alapszabálynál
erősebb legyen – a szín hover közben se vesszen el (helyette világosodik). */
.ammo-panel .ammo-chip.kivalasztva.ammo-t-2xshot {
border-color: #ff5a5a; color: #fff; background: rgba(200, 30, 36, 0.85);
box-shadow: 0 0 9px rgba(255, 41, 42, 0.55);
}
.ammo-panel .ammo-chip.kivalasztva.ammo-t-void {
border-color: #c07bff; color: #fff; background: rgba(120, 24, 200, 0.85);
box-shadow: 0 0 9px rgba(157, 27, 255, 0.55);
}
.ammo-panel .ammo-chip.kivalasztva.ammo-t-2xdmg {
border-color: #6b93ff; color: #fff; background: rgba(28, 80, 220, 0.85);
box-shadow: 0 0 9px rgba(28, 91, 255, 0.55);
}
.ammo-panel .ammo-chip.kivalasztva.ammo-t-4xdmg {
border-color: #6dff6a; color: #06240a; background: rgba(40, 190, 50, 0.9);
box-shadow: 0 0 9px rgba(45, 255, 41, 0.5);
}
/* 114. mód: HOLY (0) – fehér, mint a nyalábja; csak aktív Grandmasterrel látható.
A .holy-rejtett sor HELYE megmarad (visibility, nem display) – a panel mérete
nem ugrik; vízszintes elrendezésben (display: contents) a chipek öröklik. */
.ammo-panel .ammo-chip.kivalasztva.ammo-t-holy {
border-color: #ffffff; color: #1a1f2e; background: rgba(240, 242, 255, 0.92);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
.ammo-sor.holy-rejtett { visibility: hidden; }
/* Instantok – állandóan színesek */
.ammo-panel .ammo-chip.ammo-t-ishieldm,
.ammo-panel .ammo-chip.ammo-t-ishieldxl {
border-color: #7dd3fc; color: #e8f7ff; background: rgba(14, 140, 200, 0.6);
}
.ammo-panel .ammo-chip.ammo-t-ihealm,
.ammo-panel .ammo-chip.ammo-t-ihealxl {
border-color: #34d399; color: #e8fff5; background: rgba(5, 150, 105, 0.6);
}
/* Hover: a színes chipek világosodnak (nem ugranak vissza az alapszínre) */
.ammo-panel .ammo-chip.kivalasztva:hover,
.ammo-panel .ammo-chip[class*="ammo-t-i"]:hover { filter: brightness(1.15); }
/* ── 97. mód: a küldetés leggyorsabb teljesítője (rekorder) ─────────────── */
.kuld-rekord { margin-top: 3px; font-size: 11px; color: #5c8bb8; }
.kuld-rekord-nev { color: #e8f0f7; font-weight: 600; }
.kuld-rekord .rl-id { padding-left: 6px; }
.kuld-rekord.enyem, .kuld-rekord.enyem .kuld-rekord-nev { color: #ffd45e; }
/* ── 100. mód: HAJÓK fül ───────────────────────────────────────────────────
A hajósorok külön tbody-ban (#hajoSorok); a fül a meglévő data-ful
mechanizmussal rejti/mutatja őket. */
.hangar:not([data-ful="hajo"]) .hangar-tabla tr.ful-hajo { display: none; }
.hangar[data-ful="hajo"] .hangar-tabla tr.ful-fejlesztes,
.hangar[data-ful="hajo"] .hangar-tabla tr.ful-loszer { display: none; }
.hajo-kep { width: 48px; height: 48px; object-fit: contain; flex: none; }
/* 175. mód: hajónként egy doboz (a sor egyetlen cellája) – fej, a név alatt a leírás és a
képességek soronként, alul a csapatbooster */
.hangar-tabla tr.hajo-sor td.hajo-kartya-td { padding: 5px 0; border-top: none; background: none; }
.hajo-kartya {
border: 1px solid #1d3350; border-radius: 6px;
background: rgba(20, 44, 68, 0.35); padding: 10px 12px;
}
.hajo-kartya-aktiv { border-color: rgba(255, 212, 94, 0.55); background: rgba(255, 212, 94, 0.06); }
.hajo-fej, .hajo-booster-fej { display: flex; align-items: center; gap: 10px; }
.hajo-cim { flex: 1; min-width: 0; }
.hajo-nev { font-size: 15px; font-weight: 600; }
.hajo-ar { font-size: 12px; color: #6f93b8; margin-top: 2px; }
.hajo-ar b { color: #e8f0f7; font-weight: 600; }
.hajo-torzs { margin: 6px 0 0 58px; font-size: 12.5px; line-height: 1.5; color: #8fb0d0; }
.hajo-tul { color: #7fa3c8; }
.hajo-kepessegek { margin-top: 8px; display: grid; gap: 5px; }
.hajo-alcim { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #456a92; }
.hajo-kepesseg-sor b { color: #e8f0f7; font-weight: 700; }
.hajo-booster { margin: 10px 0 0 58px; padding-top: 9px; border-top: 1px dashed #2a4a6e; }
.hajo-booster-nev { color: #9fd3ff; font-weight: 600; font-size: 13px; }
.hajo-booster-leiras { font-size: 12px; color: #6f93b8; margin-top: 4px; line-height: 1.45; }
/* 176. mód: hajószint – felirat, sáv, fejlesztés gomb; a tulajdonságok szint-címkéje */
.hajo-szint-sor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.hajo-szint-felirat { font-size: 12px; color: #ffd45e; font-weight: 600; white-space: nowrap; }
.hajo-szint-sav { flex: 1; min-width: 60px; height: 5px; border-radius: 3px; background: #1d3350; overflow: hidden; }
.hajo-szint-sav i { display: block; height: 100%; background: linear-gradient(90deg, #c99a2e, #ffd45e); }
.hajo-szint-max { font-size: 11px; color: #3bd16f; text-transform: uppercase; letter-spacing: 0.06em; }
.hajo-szint-gomb { min-width: 0; padding: 5px 9px; font-size: 11px; }
.hajo-szint-cimke { color: #9fb8d2; font-weight: 600; }
.hajo-tul-max { margin-top: 2px; opacity: 0.6; }
@media (max-width: 560px) {
.hajo-torzs, .hajo-booster { margin-left: 0; }
.hajo-kartya { padding: 9px 10px; }
.hajo-kartya .hajo-gomb { white-space: normal; min-width: 0; max-width: 118px; padding: 6px 8px; }
}
.hajo-gomb {
min-width: 108px; padding: 7px 12px;
border: 1px solid #2a4a6e; border-radius: 3px;
background: #142c44; color: #ffd45e;
font: 600 12px/1.2 ui-monospace, "SF Mono", Consolas, monospace;
cursor: pointer; white-space: nowrap;
}
.hajo-gomb:hover:not(:disabled) { background: #1c3c5c; border-color: #4a7db0; }
.hajo-gomb:focus-visible { outline: 2px solid #e8f0f7; outline-offset: 2px; }
.hajo-gomb:disabled { color: #3d5f85; border-color: #1d3350; background: transparent; cursor: not-allowed; }
.hajo-gomb.hajo-gomb-aktiv:disabled { color: #3bd16f; border-color: #3bd16f; cursor: default; }
/* ── 120. mód: DROID fül ───────────────────────────────────────────────────
A droid-sorok külön tbody-ban (#droidSorok); a fül a data-ful mechanizmussal
rejti/mutatja őket, és a Droid fülön a többi csoport sorai rejtettek. */
.hangar:not([data-ful="droid"]) .hangar-tabla tr.ful-droid { display: none; }
.hangar[data-ful="droid"] .hangar-tabla tr.ful-fejlesztes,
.hangar[data-ful="droid"] .hangar-tabla tr.ful-loszer,
.hangar[data-ful="droid"] .hangar-tabla tr.ful-hajo { display: none; }
.hangar-tabla td.droid-leiras { padding-top: 2px; padding-bottom: 8px; }
.droid-leiras ul { margin: 0; padding-left: 18px; color: #8aa3b8; font-size: 12px; line-height: 1.5; }
.droid-leiras li + li { margin-top: 2px; }
.droid-gomb {
min-width: 108px; padding: 7px 12px;
border: 1px solid #2a6e66; border-radius: 3px;
background: #123a3a; color: #5ef0e0;
font: 600 12px/1.2 ui-monospace, "SF Mono", Consolas, monospace;
cursor: pointer; white-space: nowrap;
}
.droid-gomb:hover:not(:disabled) { background: #185050; border-color: #4ab0a4; }
.droid-gomb:focus-visible { outline: 2px solid #e8f0f7; outline-offset: 2px; }
.droid-gomb:disabled { color: #3d6f75; border-color: #1d3a40; background: transparent; cursor: not-allowed; }
/* A pályán: a droid-HUD a hajó-HUD alatt, türkiz névvel */
.droid-hud .hh-nev { color: #5ef0e0; }
/* 171. mód: a droid üzemmód-jelölése (G: váltás) */
.dh-mod { margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid currentColor; }
.dh-mod-harci { color: #ff8a5e; }
.dh-mod-passziv { color: #6ec8ff; }
.dh-mod-ki { color: #9aa4ae; }
.droid-hud.droid-ki .hh-oszlop { opacity: 0.45; }
/* ── 101. mód: SAJÁT HAJÓ-HUD (bal felső sarok, a HUD első sora) ───────────── */
/* 161. mód: kompakt rács – a név alatt két oszlop (HP / Pajzs, Sebesség / Sebzés) */
.hajo-hud { display: grid; grid-template-columns: auto auto; gap: 3px 4px; align-items: start; }
.hajo-hud[hidden] { display: none; }
.hh-nev { grid-column: 1 / -1; font-weight: 700; color: #ffd45e; margin-right: 2px; }
.hh-oszlop { display: flex; flex-direction: column; gap: 3px; }
.hh-stat {
display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
padding: 1px 8px; border-radius: 999px; font-size: 12px;
background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
font-variant-numeric: tabular-nums;
}
.hh-cimke { font-size: 11px; color: #8fb4d6; }
.hh-stat b { color: #e8f0f7; font-weight: 600; }
.hh-stat b.hh-jo { color: #3bd16f; }
.hh-stat b.hh-kozepes { color: #ffcc33; }
.hh-stat b.hh-rossz { color: #ff5555; }
.hh-stat b.hh-pajzs { color: #3ec6ff; }
/* ── 116. mód: HAJÓHOZ KÖTÖTT küldetés a hangárkártyán ──────────────────── */
.kuld-hajo { margin-top: 5px; font-size: 12px; font-weight: 600; color: #7dd3fc; }
.kuld-hajo.nincs { color: #9fb6c9; opacity: 0.85; }
/* a bal szegély a nehézség színe marad – a hajós jelölés a jobb szélen */
.kuld-kartya.kuld-hajos { box-shadow: inset -3px 0 0 #38bdf8; }
/* ── 122. mód: DROID-KÜLDETÉS a hangárkártyán (a droid türkiz színével) ───── */
/* 157. mód: pályás küldetés */
.kuld-palya { margin-top: 5px; font-size: 12px; font-weight: 600; color: #c4b5fd; }
.kuld-droid-jel { margin-top: 5px; font-size: 12px; font-weight: 600; color: #5ef0e0; }
.kuld-droid-jel.nincs { color: #9fb6c9; opacity: 0.85; }
.kuld-kartya.kuld-droidos { box-shadow: inset -3px 0 0 #5ef0e0; }
/* ═══ 118. mód: FIÓK – bejelentkezés / regisztráció / jelszóemlékeztető ═══
Ugyanaz a teljes képernyős réteg és paletta, mint a hangáré (.belepo),
keskenyebb panellel. A mezők a hangár adatcsíkjának (.csik) mintájára. */
.fiok-kepernyo { z-index: 2001; }
.fk-panel { width: min(420px, 100%); display: block; } /* a hangár széles képernyős rácsa (88. mód) itt nem kell */
.fk-panel .fk-gomb { width: 100%; justify-self: auto; margin-top: 4px; }
.fk-cim { margin: 0 0 8px; }
.fk-alcim { margin: 0 0 20px; color: #9fb6c9; font-size: 14px; line-height: 1.45; }
.fk-regi {
margin: 0 0 18px; padding: 10px 12px;
border: 1px solid #3a5a7e; border-left: 3px solid #ffd45e; border-radius: 3px;
background: rgba(255, 212, 94, 0.06);
color: #d7e4ef; font-size: 13px; line-height: 1.5;
}
.fk-regi strong { color: #ffd45e; font-weight: 600; }
.fk-regi[hidden] { display: none; }
.fk-fulek { display: flex; gap: 0; margin: 0 0 16px; border-bottom: 1px solid #2a4a6e; }
.fk-fulek[hidden] { display: none; }
.fk-ful {
flex: 1 1 0; padding: 10px 8px; border: 0; border-bottom: 2px solid transparent;
background: transparent; color: #7f9bb5; font-size: 14px; font-weight: 600; cursor: pointer;
margin-bottom: -1px;
}
.fk-ful:hover { color: #d7e4ef; }
.fk-ful[aria-selected="true"] { color: #ffd45e; border-bottom-color: #ffd45e; }
.fk-ful:focus-visible { outline: 2px solid #e8f0f7; outline-offset: -2px; }
.fk-form { display: flex; flex-direction: column; gap: 12px; }
.fk-form[hidden] { display: none; }
.fk-mezo { display: flex; flex-direction: column; gap: 5px; }
.fk-mezo > span { font-size: 12px; letter-spacing: 0.03em; color: #5c8bb8; }
.fk-mezo > span em { font-style: normal; color: #3d5f85; }
.fk-mezo input {
width: 100%; box-sizing: border-box;
padding: 10px 12px; border: 1px solid #2a4a6e; border-radius: 3px;
background: #0f2033; color: #e8f0f7;
font: 500 16px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.fk-mezo input:focus { outline: none; border-color: #4a7db0; box-shadow: 0 0 0 2px rgba(74, 125, 176, 0.25); }
.fk-gomb { margin-top: 4px; }
.fk-link { align-self: center; margin-top: 2px; font-size: 13px; }
.fk-jegyzet { margin: 0; color: #7f9bb5; font-size: 12.5px; line-height: 1.45; text-align: center; }
.fk-jegyzet-fent { text-align: left; font-size: 13.5px; color: #9fb6c9; }
.fk-uzenet { min-height: 1.4em; margin: 14px 0 0; font-size: 14px; line-height: 1.45; text-align: center; color: #9fb6c9; }
.fk-uzenet.ok { color: #7dffa8; }
.fk-uzenet.hiba { color: #ff8a8a; }
/* A hangár fiók-sávja: a cím sorában, jobbra (a régi ID-gombok helyén). */
.fiok-sav { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 12px; font-size: 13px; color: #9fb6c9; }
.fiok-sav[hidden] { display: none; }
.fiok-sav-email { color: #d7e4ef; }
.fiok-sav-megerosito { flex-basis: 100%; margin: 0; text-align: right; color: #ffb35e; font-size: 12.5px; }
.fiok-sav-megerosito[hidden] { display: none; }
.fiok-sav-uzenet { flex-basis: 100%; margin: 0; text-align: right; color: #7dffa8; font-size: 12.5px; }
.fiok-sav-uzenet:empty { display: none; }
.fiok-sav-uzenet.hiba { color: #ff8a8a; }
/* ═══ 119. mód: NYELVVÁLASZTÓ (HU / EN …) ════════════════════════════════ */
.nyelv-valaszto { display: inline-flex; gap: 0; border: 1px solid #2a4a6e; border-radius: 4px; overflow: hidden; }
.nyelv-gomb {
padding: 4px 9px; border: 0; background: transparent; color: #7f9bb5;
font: 600 12px/1.2 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: 0.04em; cursor: pointer;
}
.nyelv-gomb + .nyelv-gomb { border-left: 1px solid #2a4a6e; }
.nyelv-gomb:hover { color: #d7e4ef; background: #13283d; }
.nyelv-gomb.aktiv { background: #ffd45e; color: #10202f; cursor: default; }
.nyelv-gomb:focus-visible { outline: 2px solid #e8f0f7; outline-offset: -2px; }
.fk-nyelv { display: flex; width: max-content; margin: 0 0 10px auto; } /* a bejelentkező panelen: saját sor, jobbra */
/* ── 133. mód: kapuk ── */
.belepo-palyavalaszto { text-align: center; margin-top: 6px; }
.belepo-palyavalaszto[hidden] { display: none; }
.belepo-palya { margin: 4px 0 6px; font-size: 13px; color: #bfe6ff; }
.belepo-origin-gomb {
padding: 8px 16px; border: 1px solid #4a7db0; border-radius: 3px; cursor: pointer;
background: #2a4a6e; color: #e8f0f7; font-size: 14px; font-weight: 600;
}
.belepo-origin-gomb:hover:not(:disabled) { background: #3a6290; }
.belepo-origin-gomb:disabled { opacity: 0.5; cursor: progress; }
.kapu-valaszto {
position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
z-index: 40; min-width: 300px; max-width: calc(100vw - 32px);
padding: 16px 18px; border-radius: 6px;
background: rgba(16, 24, 44, 0.95); border: 1px solid #8a6cff;
box-shadow: 0 0 24px rgba(138, 108, 255, 0.45);
color: #e8f0f7; text-align: center;
}
.kapu-valaszto[hidden] { display: none; }
.kv-cim { font-weight: 700; font-size: 16px; color: #c9b8ff; margin-bottom: 6px; }
.kv-szoveg { font-size: 13px; margin-bottom: 12px; color: #cfe3f5; }
.kv-gombok { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.kv-gomb {
padding: 8px 12px; border: 0; border-radius: 3px; cursor: pointer;
background: #2a4a6e; color: #e8f0f7; font-weight: 600; font-size: 13px;
}
.kv-gomb:hover { background: #3a6290; }
.kv-gomb.kv-felszed { background: #8a6cff; color: #10101f; }
.kv-gomb.kv-felszed:hover { background: #a58cff; }
.kv-gomb.kv-megse { background: transparent; border: 1px solid #4a6a8e; }
.ct-palya { color: #c9b8ff; font-size: 11px; margin-left: 4px; }
/* ═══ 148. mód: NAPI BEJELENTKEZÉSI BÓNUSZ – felugró ablak ══════════════════ */
.nb-gomb {
padding: 3px 10px; border: 1px solid #c9a227; border-radius: 4px; cursor: pointer;
background: rgba(255, 196, 0, 0.12); color: #ffd75e; font: 600 12.5px/1.3 inherit;
}
.nb-gomb:hover { background: rgba(255, 196, 0, 0.24); }
.nb-gomb[hidden] { display: none; }
.nb-hatter {
position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
padding: 16px; background: rgba(2, 8, 16, 0.72); backdrop-filter: blur(2px);
}
.nb-hatter[hidden] { display: none; }
.nb-panel {
position: relative; width: min(980px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
padding: 22px 24px 20px; border: 1px solid #2a4a6e; border-radius: 10px;
background: linear-gradient(180deg, #0f2236 0%, #0a1726 100%); color: #d7e4ef;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}
.nb-bezar {
position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
border: 1px solid #2a4a6e; background: rgba(0, 0, 0, 0.3); color: #9fb6c9; cursor: pointer; font-size: 14px;
}
.nb-bezar:hover { color: #fff; border-color: #9fb6c9; }
.nb-cim { margin: 0 36px 4px 0; font-size: 22px; color: #ffd75e; }
.nb-alcim { margin: 0 0 14px; color: #9fb6c9; font-size: 13.5px; }
.nb-uj {
margin: 0 0 14px; padding: 10px 14px; border-radius: 6px; border: 1px solid #3bd16f;
background: rgba(59, 209, 111, 0.12); color: #9dffbf; font-weight: 600;
}
.nb-uj[hidden] { display: none; }
.nb-uj div + div { margin-top: 4px; color: #ffd75e; }
.nb-napok { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px 10px; padding-top: 4px; }
.nb-nap {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
min-height: 150px; padding: 10px 6px 12px; border: 1px solid #22405f; border-radius: 8px;
background: rgba(255, 255, 255, 0.03); text-align: center;
}
.nb-napnev { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #7f9bb5; }
.nb-ikon { font-size: 30px; line-height: 1.1; }
.nb-szoveg { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.nb-jel { margin-top: auto; font-size: 12px; font-weight: 700; }
/* a mai nap kiemelve */
.nb-mai {
border-color: #ffd75e; background: rgba(255, 215, 94, 0.10);
box-shadow: 0 0 0 1px #ffd75e inset, 0 0 18px rgba(255, 215, 94, 0.35); transform: translateY(-2px);
}
.nb-mai .nb-napnev { color: #ffd75e; }
/* begyűjtve: zöld pipa a sarokban */
.nb-begyujtve .nb-jel { color: #3bd16f; }
.nb-begyujtve::after {
content: "✓"; position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%;
background: #3bd16f; color: #06240f; font: 800 14px/24px sans-serif; box-shadow: 0 0 0 3px #0c1b2c;
}
.nb-kihagyva { opacity: 0.45; }
.nb-kihagyva .nb-jel { color: #ff8a8a; }
.nb-jovo .nb-jel { color: #7f9bb5; font-weight: 600; }
/* heti extra: arany keret */
.nb-heti {
display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 14px 18px;
border: 2px solid #c9a227; border-radius: 10px;
background: linear-gradient(90deg, rgba(255, 196, 0, 0.16), rgba(255, 140, 0, 0.06));
}
.nb-heti-ikon { font-size: 38px; }
.nb-heti-cim { font-size: 15px; font-weight: 800; color: #ffd75e; }
.nb-heti-szoveg { margin-top: 2px; font-size: 14px; }
.nb-heti-allapot { margin-top: 4px; font-size: 12.5px; color: #9fb6c9; }
.nb-heti-megszerezve { border-color: #3bd16f; }
.nb-heti-megszerezve .nb-heti-allapot { color: #3bd16f; font-weight: 700; }
.nb-heti-elveszett { opacity: 0.55; filter: grayscale(0.6); }
.nb-heti-elveszett .nb-heti-allapot { color: #ff8a8a; }
.nb-jegyzet { margin: 12px 0 0; font-size: 12px; color: #7f9bb5; }
.nb-ok {
display: block; margin: 14px auto 0; padding: 8px 34px; border: 0; border-radius: 6px; cursor: pointer;
background: #ffd75e; color: #1b1400; font: 700 15px/1.2 inherit;
}
.nb-ok:hover { background: #ffe58f; }
@media (max-width: 760px) {
.nb-napok { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nb-panel { padding: 18px 14px 16px; }
}
@media (max-width: 440px) {
.nb-napok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-heti { flex-direction: column; text-align: center; gap: 6px; }
}
/* ═══ 155. mód: újraéledés-választó (halál után) ═══ */
/* 157. mód: piros hiba-sáv a képernyő tetején (sikertelen küldetés) – az újraéledés-ablak fölött */
.hiba-sav {
position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 3100;
max-width: calc(100vw - 32px); padding: 6px 16px; border: 2px solid rgba(255, 190, 190, 0.9); border-radius: 6px;
background: rgba(214, 38, 38, 0.95); color: #fff; font: bold 16px sans-serif; text-align: center;
pointer-events: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.hiba-sav[hidden] { display: none; }
.ue-hatter {
position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
padding: 16px; background: rgba(20, 2, 6, 0.55); backdrop-filter: blur(1.5px);
}
.ue-hatter[hidden] { display: none; }
.ue-panel {
width: min(760px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
padding: 22px 24px 18px; border: 1px solid #6e2a3a; border-radius: 10px;
background: linear-gradient(180deg, #23101a 0%, #120a12 100%); color: #e9dbe0;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
}
.ue-cim { margin: 0 0 4px; font-size: 22px; color: #ff8a8a; }
.ue-alcim { margin: 0 0 14px; color: #c9a9b3; font-size: 14px; }
.ue-opciok { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ue-opcio {
display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 170px;
padding: 14px 10px 12px; border: 1px solid #4a2a3a; border-radius: 8px; cursor: pointer;
background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; text-align: center;
}
.ue-opcio:hover:not([disabled]), .ue-opcio:focus-visible { border-color: #ffd75e; background: rgba(255, 215, 94, 0.10); outline: none; }
.ue-opcio[disabled] { cursor: not-allowed; opacity: 0.5; }
.ue-opcio-cim { font-size: 15px; font-weight: 800; color: #fff; }
.ue-opcio-leiras { font-size: 12.5px; line-height: 1.35; color: #c9b3bb; }
.ue-ar { margin-top: auto; font-size: 15px; font-weight: 800; color: #ffd75e; }
.ue-ingyen { color: #3bd16f; }
.ue-nincs { font-size: 11.5px; color: #ff8a8a; }
.ue-helyben { border-color: #7a5a1a; }
.ue-uzenet { margin: 12px 0 0; padding: 8px 12px; border-radius: 6px; background: rgba(255, 80, 80, 0.14); color: #ffb3b3; font-weight: 600; }
.ue-uzenet[hidden] { display: none; }
.ue-auto { margin: 12px 0 0; font-size: 12.5px; color: #a58f97; text-align: center; }
@media (max-width: 640px) {
.ue-opciok { grid-template-columns: 1fr; }
.ue-opcio { min-height: 0; }
}
/* 219. mód: kilépés – a statok megtartása (az újraéledés-ablak elemeire épül) */
.km-hatter { background: rgba(4, 10, 20, 0.55); }
.km-panel { width: min(560px, 100%); border-color: #2a4a6e; background: linear-gradient(180deg, #101a26 0%, #0a0f16 100%); color: #dbe4ee; }
.km-cim { color: #8ac4ff; }
.km-panel .ue-alcim { color: #a9b9c9; }
.km-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.km-sor { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); }
.km-ures { opacity: 0.5; }
.km-ikon { width: 22px; text-align: center; }
.km-nev { flex: 1; font-size: 14px; }
.km-ertek { font-size: 15px; color: #fff; }
.km-ar { margin: 0 0 12px; font-size: 13px; color: #ffd75e; text-align: center; }
.km-opciok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.km-panel .ue-opcio { min-height: 130px; border-color: #2a3a4e; }
.km-panel .ue-opcio-leiras { color: #a9b9c9; }
.km-panel .ue-auto { color: #8a9aab; }
.km-lab { margin-top: 10px; text-align: center; }
.km-megse { padding: 7px 16px; border: 1px solid #3a4a5e; border-radius: 6px; background: transparent; color: #a9b9c9; font: inherit; font-size: 13px; cursor: pointer; }
.km-megse:hover, .km-megse:focus-visible { border-color: #8ac4ff; color: #fff; outline: none; }
@media (max-width: 640px) {
.km-opciok { grid-template-columns: 1fr; }
.km-panel .ue-opcio { min-height: 0; }
}
/* telefon fekve (alacsony képernyő): a panel kiférjen – tömörebb, a magyarázó sorok nélkül; dvh: a mobil címsáv nélküli magasság */
.km-panel { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
@media (max-height: 500px) {
.km-hatter { padding: 8px; }
.km-panel { padding: 10px 14px 8px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
.km-cim { font-size: 17px; margin-bottom: 6px; }
.km-panel .ue-alcim, .km-panel .ue-auto, .km-panel .ue-opcio-leiras { display: none; }
.km-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 6px; }
.km-sor { padding: 4px 8px; gap: 6px; }
.km-nev { font-size: 13px; }
.km-ar { margin-bottom: 6px; font-size: 12px; }
.km-panel .ue-opcio { min-height: 0; padding: 7px 8px; gap: 3px; }
.km-panel .ue-opcio-cim, .km-panel .ue-ar { font-size: 14px; }
.km-lab { margin-top: 6px; }
.km-megse { padding: 5px 14px; }
}
/* 165. mód: képesség-HUD (Mender) – alul középen, a V / B / N képességek állapota */
.kepesseg-hud { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 900;
display: flex; gap: 8px; pointer-events: none; }
.kepesseg-hud[hidden] { display: none; }
.kep-slot { display: flex; flex-direction: column; align-items: center; min-width: 112px; padding: 5px 10px;
border-radius: 8px; background: rgba(10, 18, 30, 0.78); border: 1px solid rgba(255, 255, 255, 0.18);
color: #dfe8f2; font-size: 12px; line-height: 1.3; }
.kep-gomb { font-size: 15px; color: #fff; }
.kep-nev { white-space: nowrap; }
.kep-allapot { font-weight: bold; }
.kep-kesz { border-color: rgba(80, 230, 120, 0.8); }
.kep-kesz .kep-allapot { color: #6ef08e; }
.kep-tolt .kep-allapot { color: #ffb45e; }
.kep-aktiv { border-color: rgba(94, 180, 255, 0.9); }
.kep-aktiv .kep-allapot { color: #7cc4ff; }
.kep-halott { opacity: 0.45; }
@media (max-width: 520px) { .kep-slot { min-width: 84px; padding: 4px 6px; font-size: 11px; } }
/* ── 189. mód: ÉRINTŐS (MOBIL) MÓD ─────────────────────────────────────────────
Csak a html.erintos alatt hat (telefon / tablet, vagy ?erinto=1); asztali gépen semmi sem változik.
Játék közben (html.jatekban): teljes képernyős játéktér, bal oldalt mozgató, jobb oldalt célzó
joystick (a JS helyezi el), jobb oldalt akciógombok, alul középen a lőszer-sáv és a képességek. */
.erinto-reteg, .erinto-gombok, .forditsd { display: none; }
.teljes-kepernyo {
margin-left: 8px; padding: 2px 9px; border: 1px solid #2a4a6e; border-radius: 999px;
background: transparent; color: #8fb4d6; font: inherit; font-size: 15px; cursor: pointer;
}
.teljes-kepernyo[hidden] { display: none; }
html.erintos.jatekban, html.erintos.jatekban body { overflow: hidden; overscroll-behavior: none; }
html.erintos button { touch-action: manipulation; }
html.erintos.jatekban .erinto-reteg {
display: block; position: fixed; inset: 0; z-index: 800; /* a canvas fölött, a HUD alatt */
touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.joy {
position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.22);
pointer-events: none; opacity: 0.5; transition: opacity 0.15s;
}
.joy.aktiv { opacity: 1; transition: none; }
.joy-gomb {
position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
background: rgba(94, 200, 255, 0.45); border: 2px solid rgba(160, 220, 255, 0.85);
}
#joyJobb .joy-gomb { background: rgba(255, 120, 90, 0.45); border-color: rgba(255, 170, 150, 0.9); } /* célzás + tűz */
html.erintos.jatekban .erinto-gombok {
display: flex; position: fixed; z-index: 1000; gap: 8px;
right: max(10px, env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 172px);
}
.erinto-gomb {
display: flex; flex-direction: column; align-items: center; justify-content: center;
width: 50px; height: 50px; border-radius: 50%; padding: 0;
background: rgba(10, 18, 30, 0.72); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff;
font-size: 19px; line-height: 1; user-select: none; -webkit-user-select: none;
}
.erinto-gomb small { font-size: 8px; color: #b8cde0; margin-top: 2px; }
.erinto-gomb:active { background: rgba(94, 200, 255, 0.35); }
/* HUD: kisebb, a kijelzőkivágástól távol */
html.erintos .hud { left: max(10px, env(safe-area-inset-left)); transform: scale(0.8); transform-origin: top left; }
html.erintos .hud-jobb { left: auto; right: max(10px, env(safe-area-inset-right)); transform-origin: top right; }
html.erintos .help { display: none; }
html.erintos .csoport-hud { transform: scale(0.8); transform-origin: top left; }
html.erintos .csoport-hud .hud-huzas { display: none; }
html.erintos .kuldetes-hud {
top: 112px; left: max(10px, env(safe-area-inset-left)); right: auto; width: 220px;
transform: scale(0.75); transform-origin: top left;
}
html.erintos .ammo-panel {
top: auto; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 62px);
transform: translateX(-50%) scale(0.85); transform-origin: bottom center;
}
html.erintos .ammo-panel .hud-fejlec { display: none; } /* ✥ és ⇄: érintős módban nincs áthelyezés */
html.erintos .kepesseg-hud {
pointer-events: auto; bottom: calc(env(safe-area-inset-bottom) + 6px);
transform: translateX(-50%) scale(0.85); transform-origin: bottom center;
}
html.erintos .kep-slot { cursor: pointer; touch-action: manipulation; }
/* Álló telefon játék közben: a játéktér helyett a fordítás kérése */
.forditsd {
position: fixed; inset: 0; z-index: 5000; background: #0b1520; color: #e8f1ff;
flex-direction: column; align-items: center; justify-content: center; gap: 14px;
font-size: 18px; text-align: center; padding: 24px;
}
.forditsd-ikon { font-size: 44px; }
@media (orientation: portrait) { html.erintos.jatekban .forditsd { display: flex; } }
/* 189. mód: kompakt, egysoros lőszer-sáv és kisebb képesség-gombok érintős módban */
html.erintos .ammo-panel.horizontal { flex-wrap: nowrap; gap: 3px 4px; padding: 5px 6px; max-width: none; }
html.erintos .ammo-panel .ammo-cim { display: none; }
html.erintos .ammo-panel .ammo-chip { min-width: 0; padding: 5px 6px; font-size: 11px; }
html.erintos .ammo-panel .ammo-darab { min-width: 0; font-size: 10px; margin-right: 3px; }
html.erintos .kep-slot { min-width: 78px; padding: 3px 6px; font-size: 11px; }
html.erintos .kep-gomb { font-size: 12px; }
/* ── 190. mód: TELEFONOS HANGÁR ────────────────────────────────────────────────
Csak érintős módban (html.erintos) és 1000 px alatt (az egyoszlopos elrendezés). A lap nem
nagyítható (a JS a viewportot rögzíti), ezért minden a képernyőhöz igazodik: teljes szélesség,
kompakt fejléc, a fülsor görgetéskor is fent marad (sticky), és a Küldetések / Ranglista is fül –
csak görgetni és fület váltani kell. */
.hangar-ful.mobil-ful { display: none; }
html.erintos { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* iOS: fekvőben ne nagyítsa a betűket */
@media (max-width: 999px) {
html.erintos #belepo { padding: 0; } /* csak a hangár – a bejelentkező képernyő (.fiok-kepernyo, szintén .belepo) a régi behúzással marad */
html.erintos .belepo input { font-size: 16px; } /* iOS: a fókusz ne nagyítson */
html.erintos #belepo { place-items: stretch; }
html.erintos #belepo .belepo-panel {
width: 100%; height: 100%; max-height: none; box-sizing: border-box; scrollbar-gutter: auto;
padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
html.erintos #belepo .belepo-fejlec { margin: 0 0 8px; gap: 2px 12px; align-items: center; }
html.erintos #belepo .belepo-cim { font-size: 22px; }
html.erintos #belepo .fiok-sav { font-size: 12px; }
html.erintos #belepo .csik-mezo { padding: 5px 10px; gap: 2px; min-width: 0; }
html.erintos #belepo .csik-egyenleg { min-width: 0; }
html.erintos #belepo .csik-input, html.erintos #belepo .csik-ertek { font-size: 17px; }
html.erintos #belepo .belepo-gomb { margin-top: 8px; padding: 10px; }
html.erintos #belepo .belepo-allapot { margin: 4px 0 0; min-height: 0; }
/* fülek: a hangár-szakasz „kinyílik”, így a fülsor az egész panel görgetésénél fent ragad */
html.erintos #belepo .hangar:not([hidden]) { display: contents; }
html.erintos .hangar-ful.mobil-ful { display: block; }
html.erintos #belepo .hangar-fulek {
position: sticky; top: calc(-1 * max(8px, env(safe-area-inset-top))); z-index: 5;
margin: 10px calc(-1 * max(12px, env(safe-area-inset-right))) 6px calc(-1 * max(12px, env(safe-area-inset-left)));
padding: 6px max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
background: #0b1726; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
}
html.erintos #belepo .hangar-fulek::-webkit-scrollbar { display: none; }
html.erintos #belepo .hangar-ful { flex: 0 0 auto; white-space: nowrap; padding: 8px 11px; font-size: 13px; }
html.erintos #belepo .hangar-tabla { width: 100%; }
html.erintos #belepo .droid-gomb { white-space: normal; max-width: 100%; }
/* a választott telefonos fül: a többi szakasz rejtve (a billentyűzet-súgó telefonon nem kell) */
html.erintos #belepo .iranyitas { display: none; }
html.erintos #belepo .belepo-panel:not([data-mobil-ful="kuldetes"]) #kuldetesSzekcio,
html.erintos #belepo .belepo-panel:not([data-mobil-ful="ranglista"]) #ranglista { display: none; }
html.erintos #belepo .belepo-panel[data-mobil-ful="kuldetes"] .hangar-tabla,
html.erintos #belepo .belepo-panel[data-mobil-ful="ranglista"] .hangar-tabla { display: none; }
html.erintos #belepo .kuldetes, html.erintos #belepo .ranglista { margin-top: 0; border-top: 0; padding-top: 4px; }
html.erintos #belepo .belepo-panel[data-mobil-ful="kuldetes"] .hangar-uzenet:empty,
html.erintos #belepo .belepo-panel[data-mobil-ful="ranglista"] .hangar-uzenet:empty { display: none; }
}
/* fekvő telefonon a hívójel-csík és az Indítás egy sorban (a magasság szűkös) */
@media (max-width: 999px) and (orientation: landscape) {
html.erintos #belepo .belepo-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 30%); grid-auto-rows: max-content; column-gap: 10px; align-content: start; } /* max-content: a görgethető fülsor ne zsugorodjon el */
html.erintos #belepo .belepo-panel > *, html.erintos #belepo .hangar > * { grid-column: 1 / -1; }
html.erintos #belepo .belepo-panel > .csik { grid-column: 1; }
html.erintos #belepo .belepo-panel > .belepo-gomb { grid-column: 2; margin-top: 0; }
}
/* ── 193. mód: ÉRINTŐS LŐSZER- ÉS TÖLTŐVÁLASZTÓ ────────────────────────────────
A lőszer-sáv helyett (érintős módban a JS rejti) két 3-gombos sor a jobb joystick nyugalmi helyétől
(jobbról 100 px a közepe, 60 px a sugara) balra, a képesség-HUD fölött. A konténer és a gombok közti rés
átengedi az érintést a célzó joystickhoz; csak a gombok fogják meg. A típus színét a data-tipus adja
(a lőszereké a nyalábjuké, mint a 96. módban; a HP-töltők zöldek, a pajzstöltők égszínkékek). */
.erinto-valasztok { display: none; }
html.erintos.jatekban .erinto-valasztok {
display: flex; flex-direction: column; gap: 6px; position: fixed; z-index: 1000; pointer-events: none;
right: 168px; bottom: calc(env(safe-area-inset-bottom) + 56px);
}
.valaszto { display: flex; gap: 4px; }
.valaszto-gomb {
pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
width: 52px; height: 36px; padding: 0 2px; border-radius: 8px; overflow: hidden;
background: rgba(10, 18, 30, 0.72); border: 1px solid var(--keret, rgba(255, 255, 255, 0.28));
color: var(--keret, #b8cde0); font: 600 11px/1.1 ui-monospace, "SF Mono", Consolas, monospace;
user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.valaszto-gomb span { font-size: 14px; }
.valaszto-gomb small { font-size: 10px; white-space: nowrap; }
.valaszto-gomb.valaszto-kozep {
width: 64px; background: var(--hatter, rgba(20, 44, 68, 0.85)); color: var(--szoveg, #fff);
border-width: 2px; box-shadow: 0 0 8px var(--feny, transparent);
}
.valaszto-gomb.valaszto-kozep span { font-size: 12px; }
.valaszto-gomb:disabled { opacity: 0.3; }
.valaszto-gomb.ures { opacity: 0.45; box-shadow: none; }
.valaszto-gomb:active:not(:disabled) { filter: brightness(1.35); }
.valaszto-gomb[data-tipus="normal"] { --keret: #ffd45e; --hatter: rgba(60, 46, 10, 0.85); --szoveg: #ffd45e; --feny: rgba(255, 212, 94, 0.35); }
.valaszto-gomb[data-tipus="void"] { --keret: #c07bff; --hatter: rgba(120, 24, 200, 0.85); --feny: rgba(157, 27, 255, 0.55); }
.valaszto-gomb[data-tipus="2xshot"] { --keret: #ff5a5a; --hatter: rgba(200, 30, 36, 0.85); --feny: rgba(255, 41, 42, 0.55); }
.valaszto-gomb[data-tipus="2xdmg"] { --keret: #6b93ff; --hatter: rgba(28, 80, 220, 0.85); --feny: rgba(28, 91, 255, 0.55); }
.valaszto-gomb[data-tipus="4xdmg"] { --keret: #6dff6a; --hatter: rgba(40, 190, 50, 0.9); --szoveg: #06240a; --feny: rgba(45, 255, 41, 0.5); }
.valaszto-gomb[data-tipus="holy"] { --keret: #ffffff; --hatter: rgba(240, 242, 255, 0.92); --szoveg: #1a1f2e; --feny: rgba(255, 255, 255, 0.6); }
.valaszto-gomb[data-tipus="ihealm"], .valaszto-gomb[data-tipus="ihealxl"] { --keret: #34d399; --hatter: rgba(5, 150, 105, 0.8); --szoveg: #e8fff5; }
.valaszto-gomb[data-tipus="ishieldm"], .valaszto-gomb[data-tipus="ishieldxl"] { --keret: #7dd3fc; --hatter: rgba(14, 140, 200, 0.8); --szoveg: #e8f7ff; }
/* ── 194. mód: TORONY-IKON (érintős akciógomb) ────────────────────────────────
A 🗼 (rádiótorony) helyett katonai lövegtorony: inline SVG az index.html-ben (a színek attribútumban –
a CSP inline stílust nem enged). A méret az emoji-ikonokéhoz (19 px) igazodik, a felirat egy vonalban marad. */
.erinto-gomb .erinto-ikon { display: block; width: 25px; height: 20.5px; }
/* ── 195. mód: KAPU-ABLAK ÉRINTŐS MÓDBAN ──────────────────────────────────────
A kapu-választó (133. mód, z-index 40) az érintős joystick-réteg (#erintoReteg, z-index 800) ALATT volt:
telefonon a Felszedem / Otthagyom / Mégse gombra koppintás a joystickot indította, az ablak nem volt
kezelhető. Érintős módban a réteg, az akciógombok és a választók (1000) fölött van. */
html.erintos .kapu-valaszto { z-index: 1200; }
/* ── 196. mód: NAGYOBB TELEFONOS HANGÁR ───────────────────────────────────────
Csak érintős módban (html.erintos) és 1000 px alatt – asztali gépen semmi sem változik. A felhasználó kérése:
telefonon a hangár betűi aprók, a gombok kicsik, ezért nagyítani kellett (és akkor nem fért ki). Most:
- betűk: a nevek 17–19 px, a leírások 14,5–15 px (eddig 11–14 px), a halvány szürkéskék leírás világosabb;
- gombok: legalább 46 px magasak (ujjnyi célpont), a ▲ / ▼ 46 × 46 px;
- álló telefonon (600 px alatt) a hangár-sor két sorba törik: fent a név és a leírás a teljes szélességben,
alatta balra az érték, jobbra a gombok – a leírás nem szorul egy keskeny oszlopba; a hajókártyán a
vásárlás / aktiválás gomb a kártya teljes szélességében, a tulajdonságok a kép alatt is kihasználják a sort.
A sor-elrendezés :where()-rel (0 specificitás): a fülváltó display:none szabályok (89., 100., 120., 190. mód)
mindig erősebbek maradnak. A farm-bot keresései (#hangarSorok tr, .vesz-gomb) nem változnak. */
@media (max-width: 999px) {
/* fejléc, adatcsík, Indítás */
html.erintos #belepo .fiok-sav { font-size: 15px; gap: 4px 14px; }
html.erintos #belepo .fiok-sav-megerosito { font-size: 14.5px; }
html.erintos #belepo .fiok-sav .link { padding: 6px 0; font-size: 15px; }
html.erintos #belepo .nyelv-gomb { min-width: 46px; min-height: 40px; font-size: 15px; }
html.erintos #belepo .csik-cimke { font-size: 13px; }
html.erintos #belepo .csik-input, html.erintos #belepo .csik-ertek { font-size: 20px; }
html.erintos #belepo .belepo-gomb { font-size: 19px; padding: 13px; }
html.erintos #belepo .belepo-origin-gomb { min-height: 44px; font-size: 15px; }
html.erintos #belepo .belepo-allapot, html.erintos #belepo .belepo-palya, html.erintos #belepo .hangar-uzenet { font-size: 15px; }
/* fülek */
html.erintos #belepo .hangar-ful { font-size: 16px; padding: 12px 14px; }
/* fejlesztés- és lőszer-sorok */
html.erintos #belepo .hangar-tabla { font-size: 16px; }
html.erintos #belepo .hangar-csoport { font-size: 14px; color: #5f86ae; }
html.erintos #belepo .hangar-nev { font-size: 17.5px; font-weight: 600; }
html.erintos #belepo .hangar-szint { font-size: 14.5px; line-height: 1.4; color: #6a91ba; }
html.erintos #belepo .hangar-ertek { font-size: 17px; }
html.erintos #belepo .vesz-gomb { min-height: 46px; min-width: 112px; padding: 10px 14px; font-size: 16px; }
html.erintos #belepo .sorrend-gomb { min-width: 46px; min-height: 46px; margin-right: 6px; font-size: 16px; }
html.erintos #belepo .hangar-vegtelen { font-size: 16px; }
/* hajók */
html.erintos #belepo .hajo-kartya { padding: 12px; }
html.erintos #belepo .hajo-kep { width: 60px; height: 60px; }
html.erintos #belepo .hajo-nev { font-size: 19px; }
html.erintos #belepo .hajo-ar { font-size: 15.5px; }
html.erintos #belepo .hajo-torzs { font-size: 15px; line-height: 1.5; margin-left: 70px; }
html.erintos #belepo .hajo-szint-felirat { font-size: 15px; white-space: normal; }
html.erintos #belepo .hajo-szint-max { font-size: 13px; }
html.erintos #belepo .hajo-alcim { font-size: 13px; }
html.erintos #belepo .hajo-booster-nev { font-size: 16px; }
html.erintos #belepo .hajo-booster-leiras { font-size: 14.5px; }
html.erintos #belepo .hajo-gomb, html.erintos #belepo .hajo-kartya .hajo-gomb { min-height: 46px; max-width: none; padding: 10px 16px; font-size: 16px; }
html.erintos #belepo .hajo-szint-gomb { min-height: 44px; padding: 8px 12px; font-size: 15px; }
/* droid */
html.erintos #belepo .droid-leiras ul { font-size: 15px; }
html.erintos #belepo .droid-gomb { min-height: 46px; padding: 10px 14px; font-size: 16px; }
/* küldetések */
html.erintos #belepo .kuldetes-cim { font-size: 17px; }
html.erintos #belepo .kuld-kartya { padding: 12px 14px; font-size: 15.5px; }
html.erintos #belepo .kuld-nehezseg { font-size: 12px; padding: 2px 6px; }
html.erintos #belepo .kuld-nev { font-size: 17px; }
html.erintos #belepo .kuld-jutalom { font-size: 15px; }
html.erintos #belepo .kuld-allas, html.erintos #belepo .kuld-kesz, html.erintos #belepo .kuld-bukott { font-size: 14.5px; }
html.erintos #belepo .kuld-limit, html.erintos #belepo .kuld-targy, html.erintos #belepo .kuld-hajo, html.erintos #belepo .kuld-palya { font-size: 14.5px; }
html.erintos #belepo .kuld-stat, html.erintos #belepo .kuld-rekord { font-size: 13.5px; }
html.erintos #belepo .kuld-megj, html.erintos #belepo .kuld-ujra-megj { font-size: 14px; }
html.erintos #belepo .kuld-gomb { min-height: 46px; padding: 10px 18px; font-size: 16px; }
/* ranglista */
html.erintos #belepo .ranglista-cim { font-size: 17px; }
html.erintos #belepo .ranglista-tabla { font-size: 16px; }
html.erintos #belepo .ranglista-tabla td { padding: 8px 0; }
}
/* álló telefon: két sorra tört hangár-sor, teljes szélességű hajó-gomb */
@media (max-width: 600px) {
:where(html.erintos #belepo .hangar-tabla), :where(html.erintos #belepo .hangar-tabla) tbody { display: block; }
:where(html.erintos #belepo .hangar-tabla) tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
html.erintos #belepo .hangar-tabla td:first-child { grid-column: 1 / -1; padding: 12px 0 6px; }
html.erintos #belepo .hangar-tabla tr + tr td:not(:first-child) { border-top: 0; }
html.erintos #belepo .hangar-tabla td.hangar-ertek { padding: 2px 0 12px !important; text-align: left; }
html.erintos #belepo .hangar-tabla td.hangar-vesz { padding: 2px 0 12px; width: auto; text-align: right; }
html.erintos #belepo .hangar-tabla td.hangar-csoport { padding-bottom: 4px !important; }
html.erintos #belepo .hangar-tabla tr.hajo-sor td.hajo-kartya-td { padding: 6px 0; }
html.erintos #belepo .hajo-fej { flex-wrap: wrap; }
html.erintos #belepo .hajo-fej .hajo-cim { flex: 1 1 0; min-width: 0; }
html.erintos #belepo .hajo-fej .hajo-gomb { flex: 1 1 100%; order: 3; }
html.erintos #belepo .hajo-torzs { margin-left: 0; }
html.erintos #belepo .kuld-ujra-megj { flex-basis: 100%; }
}
/* fekvő telefon: a cím, a fiók-sor és a nyelvválasztó egy sorban – a hangár tartalma előbb látszik */
@media (max-width: 999px) and (orientation: landscape) {
html.erintos #belepo .belepo-fejlec { flex-wrap: nowrap; align-items: center; }
html.erintos #belepo .belepo-cim { flex: none; }
html.erintos #belepo .fiok-sav { order: 1; flex: 1 1 auto; min-width: 0; }
html.erintos #belepo .nyelv-valaszto { order: 2; flex: none; }
}
/* ── 198. mód: KILL-CELLA A HAJÓ-HUD-BAN (érintős mód) ──────────────────────────
Telefonon a saját killek száma (N💀, mint a hajó alatti névfeliratban) a bal felső hajó-HUD első sorában:
a hajó neve mellett, a Sebesség oszlopában – a rács oszlopa miatt a Sebesség cellájával azonos szélességű.
Asztali gépen rejtve (ott a név a teljes sort kitölti, mint eddig). */
.hh-kill { display: none; }
html.erintos #hajoHud .hh-kill { display: flex; grid-column: 2; grid-row: 1; }
html.erintos #hajoHud .hh-nev { grid-column: 1; grid-row: 1; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* ── 199. mód: JÁTÉKON BELÜLI CHAT ──────────────────────────────────────────────────────────────
A #chat a hangárban a panel része (asztalin: 2 oszlopnál a jobb oszlopban a ranglista alatt,
3 oszlopnál a jobb oszlopban; telefonon a Chat fülön), játék közben a JS a -ba teszi át:
.lebego – fix helyzetű, áttetsző ablak (a helyét és méretét a JS írja), fejlécnél húzható, a jobb alsó
sarkánál méretezhető, „–”-szal ikonná (#chatIkon) kicsinyíthető. z-index 1050: a HUD-ok (1000) és az
érintős réteg (800) / gombok (1000) fölött, a súgó (1100) és a kapu-választó (érintősen 1200) alatt. */
.chat { display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
.chat[hidden] { display: none; }
.chat-fejlec { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-cim { font-weight: 700; color: #cfe3f7; white-space: nowrap; }
.chat-fulek { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; }
.chat-ful {
padding: 4px 10px; border: 1px solid #2a4a6e; border-radius: 12px; background: transparent; color: #8fb4d6;
font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
}
.chat-ful.aktiv { background: #1d3350; color: #e8f1ff; border-color: #3d6a99; }
.chat-ful[data-csatorna="csoport"].aktiv { background: #173a2a; border-color: #2f7a52; color: #c9f5dc; }
.chat-jelzo {
display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #e63946; color: #fff;
font: 700 10px/16px system-ui, sans-serif; text-align: center;
}
.chat-jelzo[hidden] { display: none; }
.chat-kicsinyit, .chat-meretezo { display: none; }
.chat-lista {
height: 220px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px; border: 1px solid #1d3350; border-radius: 6px;
background: rgba(5, 12, 20, 0.55); font-size: 13px; line-height: 1.35; color: #d7e4ef; overflow-wrap: anywhere;
}
.chat-sor + .chat-sor { margin-top: 2px; }
.chat-ido { color: #557a9c; font: 11px ui-monospace, "SF Mono", Consolas, monospace; }
.chat-nev { color: #7cc4ff; font-weight: 600; }
.chat-sor.sajat .chat-nev { color: #ffd45e; }
.chat-rendszer { color: #ff9d5e; font-style: italic; }
.chat-ures { margin: 0; font-size: 12px; color: #6a91ba; }
.chat-ures[hidden] { display: none; }
.chat-form { display: flex; gap: 6px; min-width: 0; }
.chat-input {
flex: 1 1 auto; min-width: 0; padding: 7px 9px; border: 1px solid #2a4a6e; border-radius: 6px; background: #0b1726; color: #e8f1ff; font: inherit; font-size: 13px;
}
.chat-input:disabled { opacity: 0.55; }
.chat-kuld {
padding: 7px 12px; border: 1px solid #3d6a99; border-radius: 6px; background: #1d3350; color: #e8f1ff; font: inherit; font-size: 13px; cursor: pointer;
}
.chat-kuld:disabled { opacity: 0.45; cursor: default; }
/* hangár, asztali rács: saját cella a jobb oszlopban */
@media (min-width: 1000px) {
.chat { grid-area: chat; margin-top: 24px; }
.belepo-panel {
grid-template-areas:
"cim cim"
"csik csik"
"gomb gomb"
"palya palya"
"allapot allapot"
"hangar kuld"
"hangar ranglista"
"hangar chat"
"hangar iranyitas"
"hangar lablec";
grid-template-rows: auto auto auto auto auto auto auto auto auto 1fr;
}
}
@media (min-width: 1360px) {
.belepo-panel {
grid-template-areas:
"cim cim cim"
"csik csik csik"
"gomb gomb gomb"
"palya palya palya"
"allapot allapot allapot"
"hangar kuld ranglista"
"hangar kuld chat"
"hangar kuld iranyitas"
"hangar kuld lablec";
grid-template-rows: auto auto auto auto auto auto auto auto 1fr;
}
}
/* telefonos hangár: a Chat fül (a többi szakasz rejtve, mint a Küldetések / Ranglista fülnél) */
html.erintos #fulChat[hidden] { display: none; }
.hangar-ful .chat-jelzo { margin-left: 5px; }
@media (max-width: 999px) {
html.erintos #belepo .belepo-panel:not([data-mobil-ful="chat"]) #chat { display: none; }
html.erintos #belepo .belepo-panel[data-mobil-ful="chat"] .hangar-tabla { display: none; }
html.erintos #belepo .belepo-panel[data-mobil-ful="chat"] .hangar-uzenet:empty { display: none; }
html.erintos #belepo #chat { margin-top: 0; }
html.erintos #belepo .chat-lista { height: max(180px, calc(100dvh - 330px)); font-size: 15px; }
html.erintos #belepo .chat-ful { font-size: 14px; padding: 6px 12px; }
html.erintos #belepo .chat-input, html.erintos #belepo .chat-kuld { font-size: 16px; min-height: 44px; }
}
/* játék közben: lebegő ablak */
.chat.lebego {
position: fixed; z-index: 1050; margin: 0; padding: 6px 8px 8px; box-sizing: border-box; gap: 5px;
background: rgba(8, 18, 30, 0.82); border: 1px solid #2a4a6e; border-radius: 8px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
color: #d7e4ef; font-size: 13px;
}
.chat.lebego .chat-fejlec { cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; }
.chat.lebego .chat-lista { flex: 1 1 auto; height: auto; min-height: 0; }
.chat.lebego .chat-kicsinyit {
display: block; margin-left: auto; width: 26px; height: 22px; padding: 0; border: 1px solid #2a4a6e; border-radius: 5px;
background: #0b1726; color: #cfe3f7; font: 700 15px/1 system-ui, sans-serif; cursor: pointer;
}
.chat.lebego .chat-meretezo {
display: block; position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; padding: 0; border: 0; cursor: nwse-resize;
touch-action: none; background: linear-gradient(135deg, transparent 0 50%, #3d6a99 50% 58%, transparent 58% 70%, #3d6a99 70% 78%, transparent 78%);
border-bottom-right-radius: 8px;
}
.chat-ikon { display: none; }
html.jatekban .chat-ikon:not([hidden]) {
display: flex; align-items: center; justify-content: center; position: fixed; z-index: 1050; left: 12px; bottom: 12px;
width: 42px; height: 42px; padding: 0; border: 1px solid #3d6a99; border-radius: 50%; background: rgba(8, 18, 30, 0.82);
font-size: 20px; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.chat-ikon .chat-jelzo { position: absolute; top: -4px; right: -4px; }
/* érintős módban: nagyobb fogantyúk és gombok; az ikon a bal felső HUD alatt (a top-ját a JS méri; a joystickok alul vannak) */
html.erintos .chat.lebego .chat-kicsinyit { width: 34px; height: 30px; font-size: 18px; }
html.erintos .chat.lebego .chat-meretezo { width: 26px; height: 26px; }
html.erintos .chat.lebego .chat-ful { padding: 5px 10px; font-size: 13px; }
html.erintos .chat.lebego .chat-input { font-size: 16px; }
html.erintos.jatekban .chat-ikon:not([hidden]) { left: max(12px, env(safe-area-inset-left)); bottom: auto; top: 96px; width: 46px; height: 46px; }
/* ── 201. mód: KÉPESSÉG-LEÍRÁS (asztali gép) ─────────────────────────────────────────────────────
A képesség-HUD (pointer-events: none – a kattintás a vászonra megy) slotjai asztalin egérrel elérhetők, hogy a
rámutatás működjön; a buborék a slot fölött jelenik meg, és nem fogja meg az egeret. */
html:not(.erintos) .kep-slot { pointer-events: auto; cursor: help; }
.kepesseg-leiras {
position: fixed; z-index: 1060; max-width: min(360px, calc(100vw - 16px)); box-sizing: border-box; padding: 8px 11px;
border-radius: 8px; border: 1px solid rgba(124, 196, 255, 0.55); background: rgba(8, 16, 28, 0.94); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
color: #dfe8f2; font-size: 13px; line-height: 1.4; pointer-events: none;
}
.kepesseg-leiras[hidden] { display: none; }
.kl-cim { font-weight: 700; color: #fff; margin-bottom: 3px; }
.kl-gomb { display: inline-block; min-width: 18px; padding: 0 5px; margin-right: 2px; border: 1px solid #7cc4ff; border-radius: 4px; text-align: center; color: #7cc4ff; }
.kl-szoveg { color: #cfdcea; }
.kl-allapot { margin-top: 4px; font-size: 12px; font-weight: 700; color: #ffd45e; }
/* ── 202. mód: HOSSZÚ NYOMÁS A KÉPESSÉGRE (érintős mód) ───────────────────────────────────────────
A hosszú nyomás a leírás buborékját hozza (201. mód); ne jelöljön ki szöveget és ne nyisson rendszermenüt. */
html.erintos .kep-slot { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.erintos .kepesseg-leiras { font-size: 14px; }
/* ── 206. mód: NAPI KÜLDETÉSEK A JÁTÉKTÉRBEN ─────────────────────────────────────────────────────
A jobb felső sáv 📋 gombja (Q) lebegő ablakot nyit; a hangár küldetés-szekciója ide költözik. A HUD (1000), a chat
(1050) és a képesség-buborék (1060) fölött, a súgó (1100) alatt. Az újrasorsolás itt rejtve (csak a hangárban). */
.kuldetes-ablak-gomb {
margin-left: 8px; padding: 2px 9px; border: 1px solid #2a4a6e; border-radius: 999px;
background: transparent; color: #8fb4d6; font: inherit; font-size: 15px; cursor: pointer;
}
.kuldetes-ablak-gomb[hidden], html:not(.jatekban) .kuldetes-ablak-gomb { display: none; }
.kuldetes-ablak-gomb.aktiv { background: #1d3350; border-color: #5c8bb8; }
.kuldetes-ablak {
position: fixed; z-index: 1070; top: 56px; left: 50%; transform: translateX(-50%);
width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain;
box-sizing: border-box; padding: 4px 14px 12px; touch-action: pan-y;
background: rgba(8, 18, 30, 0.95); border: 1px solid #2a4a6e; border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
color: #d7e4ef; font-size: 13px;
}
.kuldetes-ablak[hidden] { display: none; }
.kuldetes-ablak .kuldetes { margin-top: 0; border-top: 0; padding-top: 8px; }
.kuldetes-ablak .kuldetes-cim { padding-right: 40px; }
.kuldetes-ablak .kuld-ujra { display: none; }
.kuldetes-ablak-zar {
position: sticky; top: 6px; float: right; z-index: 1; width: 30px; height: 26px; margin: 6px -6px 0 0; padding: 0;
border: 1px solid #2a4a6e; border-radius: 5px; background: #0b1726; color: #cfe3f7; font: 700 15px/1 system-ui, sans-serif; cursor: pointer;
}
.kuldetes-ablak-uzenet {
position: sticky; top: 6px; z-index: 1; margin: 8px 40px 0 0; padding: 6px 10px; border-radius: 6px;
background: #13324f; border: 1px solid #3d6a99; color: #e6f1fb;
}
.kuldetes-ablak-uzenet[hidden] { display: none; }
html.erintos .kuldetes-ablak { top: max(8px, env(safe-area-inset-top)); max-height: calc(100vh - 16px); font-size: 14px; }
html.erintos .kuldetes-ablak-zar { width: 40px; height: 34px; font-size: 18px; }
html.erintos .kuldetes-ablak-gomb { font-size: 18px; padding: 2px 11px; }
/* ── 207. mód: BÉTA TESZTELŐI JUTALOM – teljes képernyős értesítés ─────────────────────────────────
A napi bónusz (3000) és a hiba-sáv (3100) fölött; a háttér az egész képernyőt takarja. */
.bj-hatter {
position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center; padding: 16px;
background: radial-gradient(ellipse at center, rgba(40, 70, 110, 0.55) 0%, rgba(2, 8, 16, 0.94) 70%); backdrop-filter: blur(3px);
}
.bj-hatter[hidden] { display: none; }
.bj-panel {
width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; padding: 30px 28px 26px;
border: 1px solid #c9a227; border-radius: 14px; text-align: center; color: #d7e4ef;
background: linear-gradient(180deg, #14283f 0%, #0a1726 100%); box-shadow: 0 0 0 1px rgba(255, 215, 94, 0.25) inset, 0 0 70px rgba(255, 215, 94, 0.25);
}
.bj-ikon { font-size: 64px; line-height: 1; }
.bj-cim { margin: 10px 0 8px; font-size: 28px; color: #ffd75e; }
.bj-uzenet { margin: 0 auto 6px; max-width: 480px; color: #b9cde0; font-size: 15px; line-height: 1.45; }
.bj-tetelek { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bj-tetel {
padding: 10px 14px; border: 1px solid #2c6b45; border-radius: 8px; background: rgba(59, 209, 111, 0.1);
color: #9dffbf; font-size: 20px; font-weight: 700;
}
.bj-allapot { margin: 0 0 14px; font-weight: 600; }
.bj-allapot[hidden] { display: none; }
.bj-allapot.bj-ok { color: #9dffbf; }
.bj-allapot.bj-hiba { color: #ff9a8a; }
.bj-gombok { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }
.bj-atvesz {
padding: 11px 38px; border: 1px solid #ffd75e; border-radius: 999px; background: #ffd75e; color: #1a1300;
font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1.2; cursor: pointer; box-shadow: 0 0 18px rgba(255, 215, 94, 0.45);
}
.bj-atvesz:hover:not(:disabled) { background: #ffe38a; }
.bj-atvesz:disabled { opacity: 0.6; cursor: wait; }
.bj-kesobb { padding: 6px 8px; border: 0; background: transparent; color: #8fb4d6; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.bj-kesobb[hidden] { display: none; }
html.erintos .bj-cim { font-size: 24px; }
html.erintos .bj-ikon { font-size: 48px; }
html.erintos .bj-panel { padding: 20px 18px; }
/* ═══ 213. mód: SHOP – mikrotranzakciók (felugró ablak) ═════════════════════ */
.shop-gomb {
position: relative; padding: 3px 12px; border: 1px solid #3ec6ff; border-radius: 4px; cursor: pointer;
background: rgba(62, 198, 255, 0.12); color: #9fe6ff; font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1.3;
}
.shop-gomb:hover { background: rgba(62, 198, 255, 0.24); color: #e8f9ff; }
.shop-gomb[hidden] { display: none; }
.shop-gomb-szam {
position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
background: #ffd75e; color: #1b1400; font: 800 11px/18px sans-serif; text-align: center;
}
.shop-gomb-szam[hidden] { display: none; }
.shop-hatter {
position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
padding: 16px; background: rgba(2, 8, 16, 0.74); backdrop-filter: blur(2px);
}
.shop-hatter[hidden] { display: none; }
.shop-panel {
/* 214. mód: border-box (a max-height a belső margóval és a kerettel együtt értendő) és a ténylegesen látható magasság
(100dvh – mobilon a 100vh a böngésző címsorával együtt számol, így a panel kilógott a képernyőből) */
box-sizing: border-box; position: relative; display: flex; flex-direction: column; width: min(1000px, 100%);
max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
overflow-y: auto; padding: 18px 22px 16px; border: 1px solid #2a4a6e; border-radius: 10px;
background: linear-gradient(180deg, #0f2236 0%, #0a1726 100%); color: #d7e4ef;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}
/* fejléc: cím | valuta | kosár | bezárás */
.shop-fejlec {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
padding: 0 0 14px; margin-bottom: 16px; border-bottom: 1px solid #22405f;
/* 214. mód: görgetéskor a fejléc (valuta, kosár, ✕) a panel tetején marad */
position: sticky; top: 0; z-index: 2; background: #0f2236;
}
.shop-cim { margin: 0; font-size: 22px; color: #9fe6ff; }
.shop-valuta { display: flex; align-items: center; gap: 6px; }
.shop-valuta-cimke { font-size: 13px; color: #9fb6c9; margin-right: 2px; }
.shop-valuta-gomb {
min-width: 52px; padding: 5px 10px; border: 1px solid #2a4a6e; border-radius: 4px; cursor: pointer;
background: rgba(0, 0, 0, 0.25); color: #9fb6c9; font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1.2; letter-spacing: 0.04em;
}
.shop-valuta-gomb:hover { color: #e8f0f7; border-color: #4a7aa8; }
.shop-valuta-gomb[aria-checked="true"] { background: #3ec6ff; border-color: #3ec6ff; color: #04131f; }
.shop-kosar { display: flex; align-items: baseline; gap: 10px; margin-left: auto; margin-right: 40px; font-size: 13.5px; color: #cfe3f5; }
.shop-bezar {
position: absolute; top: -6px; right: -10px; /* 214. mód: a (sticky) fejléchez képest – a régi helyén marad */ width: 30px; height: 30px; border-radius: 50%;
border: 1px solid #2a4a6e; background: rgba(0, 0, 0, 0.3); color: #9fb6c9; cursor: pointer; font-size: 14px;
}
.shop-bezar:hover { color: #fff; border-color: #9fb6c9; }
/* tartalom: bal oldalt a kártyák, jobb oldalt a kiválasztott termék */
.shop-tartalom { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; align-items: start; }
.shop-lista { display: flex; flex-direction: column; gap: 12px; }
.shop-kartya {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
width: 148px; aspect-ratio: 1 / 1; padding: 10px 8px; border: 1px solid #22405f; border-radius: 10px; cursor: pointer;
background: rgba(255, 255, 255, 0.03); color: inherit; font: inherit; text-align: center;
transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.shop-kartya:hover { border-color: #4a7aa8; background: rgba(62, 198, 255, 0.06); }
.shop-kartya[aria-selected="true"] {
border-color: #3ec6ff; background: rgba(62, 198, 255, 0.10);
box-shadow: 0 0 0 1px #3ec6ff inset, 0 0 16px rgba(62, 198, 255, 0.30);
}
.shop-kartya-kep { width: 64px; height: 64px; border-radius: 8px; }
.shop-kartya-nev { font-size: 12.5px; font-weight: 700; line-height: 1.25; color: #e8f0f7; overflow-wrap: anywhere; }
.shop-kartya-ar { font-size: 13px; font-weight: 800; color: #ffd75e; }
.shop-reszlet {
display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; align-items: start;
padding: 18px; border: 1px solid #22405f; border-radius: 10px; background: rgba(255, 255, 255, 0.02);
}
.shop-reszlet[hidden] { display: none; }
.shop-kep { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); }
.shop-adatok { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.shop-nev { margin: 0; font-size: 24px; color: #e8f0f7; }
.shop-alcim { margin: 0; font-size: 14px; font-weight: 700; color: #9fe6ff; }
.shop-ar { margin: 2px 0 0; font-size: 28px; font-weight: 800; color: #ffd75e; }
/* 215. mód: a csomag tartalma tételesen */
.shop-tetelek {
display: flex; flex-direction: column; gap: 5px; margin: 4px 0 2px; padding: 10px 12px; list-style: none;
border: 1px solid #22405f; border-radius: 8px; background: rgba(62, 198, 255, 0.05);
}
.shop-tetelek[hidden] { display: none; }
.shop-tetel { display: flex; align-items: baseline; gap: 9px; font-size: 14px; font-weight: 600; color: #e8f0f7; }
.shop-tetel-ikon { flex: 0 0 auto; width: 1.3em; text-align: center; }
.shop-leiras { margin: 4px 0 6px; font-size: 14px; line-height: 1.5; color: #cfe3f5; }
.shop-kosarba {
align-self: flex-start; padding: 10px 34px; border: 0; border-radius: 6px; cursor: pointer;
background: #ffd75e; color: #1b1400; font-family: inherit; font-weight: 800; font-size: 16px; line-height: 1.2;
}
.shop-kosarba:hover { background: #ffe58f; }
.shop-uzenet { margin: 0; min-height: 1.3em; font-size: 13px; color: #7dffa8; }
.shop-jegyzet { margin: 14px 0 0; font-size: 12px; color: #7f9bb5; }
/* keskeny képernyő: a részletek egymás alatt; telefonon a kártyák felül, vízszintesen görgethető sorban */
@media (max-width: 820px) {
.shop-reszlet { grid-template-columns: minmax(0, 1fr); }
.shop-kep { max-width: 260px; margin: 0 auto; }
}
@media (max-width: 600px) {
.shop-panel { padding: 14px 14px 12px; }
.shop-kosar { margin: 0; flex-basis: 100%; }
.shop-tartalom { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.shop-lista { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
.shop-kartya { flex: 0 0 auto; width: 120px; }
.shop-kartya-kep { width: 52px; height: 52px; }
.shop-reszlet { padding: 14px; }
.shop-nev { font-size: 20px; }
.shop-ar { font-size: 24px; }
.shop-kosarba { align-self: stretch; }
/* 214. mód: álló telefonon a panel kitölti a képernyőt (a biztonsági sávokat – notch, kezdősáv – kihagyva) */
.shop-hatter { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.shop-panel { width: 100%; max-height: 100vh; max-height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; }
.shop-bezar { top: -2px; right: -4px; }
/* 214. mód: a részletek tömören – kis kép bal oldalt, mellette név, mennyiség, ár; alattuk a leírás és a Kosárba,
így a gomb görgetés nélkül is látszik */
.shop-reszlet {
grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 4px 14px;
grid-template-areas: "kep nev" "kep alcim" "kep ar" "tetelek tetelek" "leiras leiras" "gomb gomb" "uzenet uzenet"; /* 215. mód: + tetelek */
}
.shop-adatok { display: contents; }
.shop-kep { grid-area: kep; max-width: 104px; margin: 0; border-radius: 10px; }
.shop-nev { grid-area: nev; align-self: end; }
.shop-alcim { grid-area: alcim; }
.shop-tetelek { grid-area: tetelek; margin-top: 10px; } /* 215. mód */
.shop-ar { grid-area: ar; align-self: start; margin: 0; }
.shop-leiras { grid-area: leiras; margin: 10px 0 6px; font-size: 13.5px; }
.shop-kosarba { grid-area: gomb; }
.shop-uzenet { grid-area: uzenet; margin-top: 6px; }
}
/* 214. mód: FEKVŐ telefon (alacsony képernyő): kompakt panel – a kártyák bal oldalt, a részletek kétoszloposan,
kisebb képpel; a panel a teljes magasságot kihasználja, és belül görgethető */
@media (max-height: 520px) {
.shop-hatter { padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
.shop-panel { max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); padding: 10px 16px 10px; }
.shop-fejlec { gap: 6px 16px; padding-bottom: 8px; margin-bottom: 10px; }
.shop-cim { font-size: 18px; }
.shop-valuta-gomb { padding: 4px 10px; }
.shop-kosar { margin-right: 34px; }
.shop-bezar { top: -4px; right: -8px; }
.shop-tartalom { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
.shop-lista { flex-direction: column; overflow: visible; padding: 0; }
.shop-kartya { width: 112px; padding: 6px; }
.shop-kartya-kep { width: 44px; height: 44px; }
.shop-reszlet { grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px; }
.shop-kep { max-width: 150px; margin: 0; }
.shop-nev { font-size: 19px; }
.shop-ar { font-size: 22px; margin: 0; }
.shop-leiras { font-size: 13px; line-height: 1.4; margin: 2px 0 4px; }
.shop-tetelek { padding: 7px 10px; gap: 3px; } /* 215. mód */
.shop-tetel { font-size: 13px; }
.shop-kosarba { align-self: flex-start; padding: 8px 28px; }
.shop-jegyzet { margin-top: 8px; }
}
/* 222. mód: az Android-app (SpaceLegends) letöltő linkje – a hangár fejlécében (a Shop gomb mellett,
annak stílusában) és a bejelentkező képernyőn; csak androidos böngészőben jelenik meg (client.js) */
.app-letoltes {
display: inline-block; padding: 3px 12px; border: 1px solid #7be08f; border-radius: 4px;
background: rgba(123, 224, 143, 0.12); color: #b9f5c4; font-weight: 700; font-size: 13px; line-height: 1.3; text-decoration: none;
}
.app-letoltes:hover { background: rgba(123, 224, 143, 0.24); color: #effff2; }
.app-letoltes[hidden], .fk-app[hidden] { display: none; }
.fk-app { margin: -8px 0 18px; }
/* 223. mód: korábbi napról áthozott küldetés jelzése a küldetéskártyán (a .kuld-hajo / .kuld-palya mintájára) */
.kuld-atvitt-jel { margin-top: 5px; font-size: 12px; font-weight: 600; color: #fcd34d; }
html.erintos #belepo .kuld-atvitt-jel { font-size: 14.5px; }