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 */
}

.help { opacity: 0.85; margin-top: 4px; }

/* 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: 12px;
  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 ═══════ */
.csoport-hud {
  display: inline-flex;          /* a HUD felső sávjában, a torony-pill mellett */
  align-items: center;
  flex-wrap: wrap;               /* 35. mód: a taglista (flex-basis:100%) a pill ALATT */
  gap: 6px;
  margin-left: 12px;
  vertical-align: middle;
  width: max(10vw, 100px);      /* 36. mód: a csoport HUD a képernyő 10%-a, de min. 100px (Alex kérése) */
}
.csoport-hud[hidden] { display: none; } /* kötelező: az explicit stílus felülírná az alap [hidden]-t */
.csoport-cimke { color: #8fb4d6; }
#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: 6px;
  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 {
  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-nev { color: #cfe3f5; flex: 1 1 100%; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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; }
.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; }

/* 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"
      "allapot allapot"
      "hangar  kuld"
      "hangar  ranglista"
      "hangar  iranyitas"
      "hangar  lablec";
    grid-template-rows: auto auto auto auto auto auto auto 1fr;
    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; }
  .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; }
.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; }
.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-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"
      "allapot allapot allapot"
      "hangar  kuld    ranglista"
      "hangar  kuld    iranyitas"
      "hangar  kuld    lablec";
    grid-template-rows: auto auto auto auto auto auto 1fr;
    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 16px; }
}

/* ── 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; }
.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-doboz { display: flex; align-items: center; gap: 10px; }
.hajo-kep { width: 40px; height: 40px; object-fit: contain; flex: none; }
.hajo-tul { line-height: 1.45; }
.hangar-tabla tr.hajo-aktiv td { background: rgba(255, 212, 94, 0.07); }
.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; }

/* ── 101. mód: SAJÁT HAJÓ-HUD (bal felső sarok, a HUD első sora) ───────────── */
.hajo-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.hajo-hud[hidden] { display: none; }
.hh-nev { font-weight: 700; color: #ffd45e; margin-right: 2px; }
.hh-stat {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  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; }

/* ═══ 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; }