/* =====================================================================================
   HALA SHOOTER – MENÜ v2 (agent/menus)
   Tervrendszer a lobbihoz, a Fejlődéshez (skillek, kihívások, achievementek, meccsek, statisztika), a Piactérhez,
   a Ranglistához, a Beállításokhoz, az oldalpanelhez (profil, meccs), a játékbeli menükhöz és a záróképhez.
   • fekete-fehér alap; szín csak jelentéssel: csapat (rózsa / kék), pénz (arany), állapot (zöld / piros), besorolás (tiers.js)
   • élszéltől élszélig: a lapok a teljes szélességet használják (--m-max), az olvasható szöveg rövid sorokban
   • teljesítmény: a menükben nincs backdrop-filter (élő 3D fölött minden képkockán újramosna), animáció csak
     transform / opacity, a hosszú listák sorai content-visibility: auto
   A style.css régi tokenjeire épül (--line, --fill, --ink…), azokat itt nem írjuk felül.
   ===================================================================================== */
:root {
  /* tér és szélesség */
  --m-gutter: clamp(16px, 2.4vw, 48px);
  --m-max: 2240px;                      /* a lapok belső maximuma 2560 px-en is hagy margót */
  --m-read: 72ch;                       /* olvasható szöveg */
  --m-top: 64px;                        /* a felső sáv magassága */
  /* betű-skála */
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px; --fs-3xl: 40px;
  --fs-hero: clamp(44px, 6.2vw, 96px);
  /* felületek: átlátszatlanok (nincs elmosás) */
  --card: var(--bg-2); --card-2: #131315; --card-3: #1B1B1E; --chrome: rgba(6, 6, 7, .94);   /* (reskin) a style.css B-tokenjeiből */
  /* mélység */
  --e1: inset 0 1px 0 rgba(255, 255, 255, .035);
  --e2: 0 10px 30px rgba(0, 0, 0, .45);
  --e3: 0 24px 80px rgba(0, 0, 0, .65);
  /* mozgás */
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 220ms; --dur-4: 420ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  /* achievement-fokozatok */
  --bronze: #C98A5B; --silver: #D7DBE2;
}

/* ---------- alapelemek ---------- */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.mono, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.gold { color: var(--gold); }
.warn { color: var(--warn); }
.up { color: var(--acc); } .down { color: #FF8A8A; }
.t-a { color: var(--rose-2); } .t-b { color: var(--blue-2); }
.card { position: relative; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--e1); }
.card h3, .sec-head h3, .skx-list h3 { margin: 0; font-family: var(--f-mono); font-weight: 400; font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.card-head, .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin-bottom: 14px; }
.card-head .hint, .sec-head .hint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.sec-head { margin: 28px 0 12px; }
.card-foot, .sec-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.page-top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; min-height: 40px; }
.page-top h2 { margin: 0; font-family: var(--f-disp); font-weight: 900; font-size: 44px; line-height: .86; letter-spacing: 0; text-transform: uppercase; }
.page-top .hint { display: inline-flex; align-items: center; gap: 6px; }
.btn .ic { width: 16px; height: 16px; margin-left: -2px; }
.btn.small .ic { width: 15px; height: 15px; }
.btn:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ib { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--muted); transition: background var(--dur-1), color var(--dur-1); }
.ib:hover { background: var(--fill-2); color: var(--ink); }
.ib:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.ib .ic { width: 18px; height: 18px; }
/* sáv: transform-alapú kitöltés (nincs width-animáció) */
.bar { position: relative; display: block; height: 6px; border-radius: 6px; background: var(--fill-3); overflow: hidden; }
.bar.sm { height: 4px; } .bar.lg { height: 10px; }
.bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--paper); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
/* chipek */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--ink-2); background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
button.chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--ink); background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line); }
button.chip:hover { background: var(--fill-3); }
.chip b { color: var(--ink); font-weight: 600; } .chip small { color: var(--muted); }
.chip.ok { color: var(--acc); background: var(--acc-t); box-shadow: none; } .chip.ok b { color: var(--acc); }
.chip.gold { color: var(--gold); background: var(--gold-t); box-shadow: none; } .chip.gold b { color: var(--gold); }
.chip .ic { width: 14px; height: 14px; }
/* csempék: nagy szám, kis címke */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; border-radius: var(--r-lg); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.tile { display: grid; align-content: center; gap: 2px; min-height: 76px; padding: 14px 16px; background: var(--card); }
.tile b { font-family: var(--f-disp); font-weight: 900; font-size: 34px; line-height: .9; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile small { font-size: var(--fs-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* üres állapot */
.empty { display: grid; justify-items: center; gap: 6px; padding: 40px 24px; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--r-lg); font-size: var(--fs-sm); }
.empty b { color: var(--ink); font-size: var(--fs-lg); font-weight: 600; }
.empty .empty-ic { width: 32px; height: 32px; color: var(--dim); margin-bottom: 4px; }
.empty.sm { padding: 24px; }
/* töltés-helyőrző (fix magasságú: nincs ugrálás, amikor megjön az adat) */
.skel { background: linear-gradient(90deg, var(--fill) 0, var(--fill-2) 40%, var(--fill) 80%) 0 0 / 300% 100%; border-radius: var(--r); animation: skel 1.4s linear infinite; border-color: transparent !important; }
@keyframes skel { to { background-position: -300% 0; } }
/* összecsukható magyarázat */
details.fold { padding: 0; }
details.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; font-weight: 500; font-size: var(--fs-md); color: var(--ink-2); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-2) var(--ease-out); }
details.fold[open] > summary::after { transform: rotate(-135deg); }
details.fold > summary:hover { color: var(--ink); }
details.fold > :not(summary) { margin: 0 20px 20px; }
table.rules { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.rules td { padding: 9px 0; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
table.rules td:first-child { width: 1%; white-space: nowrap; padding-right: 24px; font-weight: 600; color: var(--ink); }
/* táblázat */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl th { height: 30px; padding: 0 10px; text-align: left; font-weight: 500; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.tbl td { height: 38px; padding: 0 10px; border-top: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.tbl td:first-child { color: var(--ink); font-weight: 600; }
.tbl .num { text-align: right; }
.tbl tr.me td { background: var(--fill-2); }
.tbl tr[data-pkey] { cursor: pointer; } .tbl tr[data-pkey]:hover td { background: var(--fill); }
/* al-navigáció (Fejlődés, Piactér, Beállítások) */
/* al-navigáció: pirulák (mint a varázsló lépései) – a kijelölt papír-fehér */
.subnav { display: flex; gap: 6px; margin: 0 0 22px; padding: 0; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 0; background: none; border: 0; }
.subnav::-webkit-scrollbar { display: none; }
.subnav button { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--r-pill); font-weight: 500; font-size: var(--fs-md); color: var(--muted); background: var(--fill-2); transition: color var(--dur-1), background var(--dur-1); }
.subnav button:hover { color: var(--ink); }
.subnav button[aria-selected="true"] { color: var(--on-paper); background: var(--paper); box-shadow: none; font-weight: 600; }
.subnav button[aria-selected="true"] .ic { color: var(--on-paper); }
.subnav button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.subnav .ic { width: 17px; height: 17px; }
.seg.sm { margin: 0; padding: 2px; }
.seg.sm button { height: 26px; padding: 0 10px; font-size: var(--fs-sm); }
.tier-chip { --tc: #888; }
.g-S { --gc: var(--gold); } .g-A { --gc: var(--acc); } .g-B { --gc: var(--ink); } .g-C { --gc: var(--muted); } .g-D { --gc: var(--rose-2); }
i.g-S, i.g-A, i.g-B, i.g-C, i.g-D, span.g-S, span.g-A, span.g-B, span.g-C, span.g-D { font-style: normal; font-weight: 800; color: var(--gc); }

/* =====================================================================================
   LOBBI · B · MŰSZAK (agent/reskin): a háttér az élő pálya-jelenet (lassú körrepülés), filmesen sötétítve + statikus szemcse;
   fent logó + műszak-sor („04:12 · DJ191C · Kraszna · +3 °C”), jobbra FP + profil. Főoldalon (Játék) bal oldalt a nagy,
   keskeny, számozott menüpontok (01–05), alul a Gyors szoba; jobbra a Szobák. A többi lapon a menüpontok a felső sávba
   húzódnak (kisebb display-betű), a lap címe nagy display-cím. Élszéltől élszélig, elmosás nélkül (élő 3D fölött).
   ===================================================================================== */
#lobby { --nav-fs: clamp(52px, 8.2vh, 104px); --m-top: 88px; background: none; isolation: isolate; }
/* színezés: bal és alsó sötétítés (a szöveg alatt), jobb oldalt a jelenet látszik; más lapokon egységesen sötétebb */
.lobby-grade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 6, 7, .88) 0%, rgba(6, 6, 7, .62) 34%, rgba(6, 6, 7, .22) 60%, rgba(6, 6, 7, .5) 100%),
              linear-gradient(180deg, rgba(6, 6, 7, .62) 0%, rgba(6, 6, 7, 0) 20%, rgba(6, 6, 7, 0) 58%, rgba(6, 6, 7, .9) 100%); }
.lobby-grade::before { content: ""; position: absolute; inset: 0; background: rgba(6, 6, 7, .8); opacity: 0; transition: opacity var(--t-in) var(--ease-film); }
.lobby-grade::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 160px 160px; opacity: .07; }
#lobby:not([data-tab="rooms"]) .lobby-grade::before { opacity: 1; }
/* felső sáv: átlátszó, keret nélkül */
#lobby .topbar { position: relative; z-index: 4; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 28px; width: 100%; height: var(--m-top); margin: 0; padding: 0 var(--m-gutter);
  border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
/* szómárka (CSS, nem kép): magas, keskeny HALA + ritkított SHOOTER */
.logo[data-ver]::after { content: none; }
#lobby .logo { align-self: center; font-size: inherit; }
.top-shift { align-self: center; }
/* menüpontok – kompakt (felső sáv, a nem-főoldali lapokon) */
#lobby .tabs { position: relative; justify-self: center; display: flex; gap: 2px; overflow: visible; }
#lobby .tabs button { height: 44px; display: inline-flex; align-items: baseline; gap: 6px; padding: 0 14px; border-radius: 0; background: none;
  font-family: var(--f-disp); font-weight: 800; font-size: 24px; line-height: 44px; text-transform: uppercase; letter-spacing: .01em; color: rgba(245, 242, 236, .4); transition: color var(--mo-1, .14s); }
#lobby .tabs button .ic { display: none; }
#lobby .tabs button .tn { font-family: var(--f-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .06em; color: var(--dim); transform: translateY(-11px); }
#lobby .tabs button:hover { color: var(--ink); background: none; }
#lobby .tabs button[aria-selected="true"] { color: var(--ink); background: none; }
#lobby .tabs button[aria-selected="true"] .tn { color: var(--light); }
#lobby .tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: var(--r-sm); }
#lobby .tabs button .tab-badge { align-self: center; transform: translateY(-8px); }
#lobby .tab-ind { bottom: 0; height: 2px; background: var(--light); }
#lobby:not([data-tab="rooms"]) .tabs { animation: navBar var(--t-in) var(--ease-film) both; }
@keyframes navBar { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
.tab-badge { margin-left: 2px; }
/* menüpontok – nagy (főoldal): bal oldali oszlop, számozva; a kijelölt fehér + a fény pöttye, a többi halvány */
#lobby[data-tab="rooms"] .tabs { position: absolute; left: var(--m-gutter); top: calc(var(--m-top) + clamp(24px, 9vh, 128px)); flex-direction: column; align-items: flex-start; gap: 0;
  animation: navBig var(--t-in) var(--ease-film) both; }
#lobby[data-tab="rooms"] .tabs button { height: auto; gap: 0; padding: 0; display: grid; grid-template-columns: 40px auto; align-items: center;
  font-weight: 900; font-size: var(--nav-fs); line-height: .9; letter-spacing: -.005em; color: rgba(245, 242, 236, .26); }
#lobby[data-tab="rooms"] .tabs button > span:not(.tab-badge) { transition: transform var(--mo-2, .22s) var(--ease-film), color var(--mo-1, .14s); }
#lobby[data-tab="rooms"] .tabs button:hover { color: rgba(245, 242, 236, .62); }
#lobby[data-tab="rooms"] .tabs button:hover > span:not(.tab-badge) { transform: translate3d(6px, 0, 0); }
#lobby[data-tab="rooms"] .tabs button[aria-selected="true"] { color: var(--ink); }
#lobby[data-tab="rooms"] .tabs button[aria-selected="true"] > span:not(.tab-badge)::after { content: ""; display: inline-block; width: .11em; height: .11em; margin-left: .16em; vertical-align: .55em; border-radius: 50%; background: var(--light); }
#lobby[data-tab="rooms"] .tabs button .tn { grid-column: 1; grid-row: 1; transform: none; font-size: 12px; color: var(--dim); }
#lobby[data-tab="rooms"] .tabs button[aria-selected="true"] .tn { color: var(--light); }
#lobby[data-tab="rooms"] .tabs button .tab-badge { grid-column: 3; transform: translate(6px, -.9em); }
#lobby[data-tab="rooms"] .tab-ind { display: none; }
@keyframes navBig { from { opacity: 0; transform: translate3d(-10px, 0, 0); } }
/* saját kártya: FP + profil, jobb fent */
#lobby .me-card { all: unset; box-sizing: border-box; cursor: pointer; justify-self: end; align-self: center; grid-column: 4; display: flex; flex-direction: row-reverse; align-items: center; gap: 14px; min-width: 0; height: 52px; padding: 0 6px; border-radius: var(--r); transition: background var(--dur-1); }
#lobby .me-card:hover { background: var(--fill-2); }
#lobby .me-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#lobby .me-card:empty { display: none; }
#lobby .me-card .fp-badge { order: 3; height: auto; padding: 0; background: none; box-shadow: none; font-family: var(--f-mono); font-size: 15px; color: var(--ink); }
#lobby .me-card .fp-badge .ic { color: var(--light); }
.me-av { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-family: var(--f-disp); font-weight: 800; font-size: 18px; color: var(--ink); background: var(--card-3); box-shadow: inset 0 0 0 2px var(--tc, var(--line-3)); }
.me-id { display: grid; min-width: 0; line-height: 1.25; }
.me-id .nm { max-width: 200px; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-id small { display: flex; gap: 8px; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.me-id .me-rt { font-family: var(--f-mono); }
#lobby .lobby-body { position: relative; z-index: 1; padding: 20px var(--m-gutter) 72px; scrollbar-gutter: stable; }
#lobby .tab-page { max-width: var(--m-max); animation: pageIn var(--dur-3) var(--ease-out) both; }
#lobby .tab-page[data-page="rooms"] { display: block; max-width: none; }
#lobby .panel, #lobby .room, #lobby table.lb { backdrop-filter: none; -webkit-backdrop-filter: none; }
#lobby .panel { background: var(--card); }
/* a verziószám a főmenüben jobb lent (halkan) */
body:has(#lobby:not([hidden])) #verCorner { display: block; z-index: 21; }

/* ---------- Játék: bal (nagy menü + bevezető + Gyors szoba), jobb (Szobák + induló készlet) ---------- */
.play { display: grid; grid-template-columns: minmax(0, 1fr) clamp(440px, 33vw, 680px); gap: 32px; align-items: start; }
.play-main { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px;
  min-height: calc(100dvh - var(--m-top) - 92px); padding-top: calc(var(--nav-fs) * 4.6 + clamp(24px, 9vh, 128px)); }
.play-lede { max-width: 440px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.play-lede b { font-weight: 700; color: var(--ink); }
.play-cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; }
.cta { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 14px 22px; border-radius: var(--r); background: rgba(245, 242, 236, .08); color: var(--ink);
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-2); }
.cta:hover { background: rgba(245, 242, 236, .14); }
.cta:active { transform: scale(.985); }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cta > .ic { width: 22px; height: 22px; }
.cta > span { display: grid; gap: 3px; min-width: 0; }
.cta b { font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.cta small { font-size: var(--fs-sm); color: var(--muted); }
.cta.primary { min-width: min(352px, 100%); padding-right: 18px; background: var(--paper); color: var(--on-paper); }
.cta.primary:hover { background: #fff; }
.cta.primary b { font-family: var(--f-disp); font-weight: 900; font-size: 38px; line-height: .86; letter-spacing: 0; text-transform: uppercase; }
.cta.primary small { color: var(--on-paper-2); }
.cta.primary::after { content: "Enter"; margin-left: auto; align-self: center; padding: 2px 7px; border-radius: var(--r-xs); font-family: var(--f-mono); font-size: 11px; color: var(--on-paper); background: rgba(11, 11, 12, .08); }
.cta:not(.primary) small { display: none; }
.play-cta .nr-last { flex-basis: 100%; margin: 0; padding: 0; background: none; border: 0; }
.play-cta .nr-last .nr-last-h { display: inline; margin: 0 10px 0 0; font-family: var(--f-mono); font-weight: 400; color: var(--dim); }
.play-cta .nr-last .nr-last-b, .play-cta .nr-last .nr-last-m { display: inline; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.play-cta .nr-last .nr-last-m::before { content: " · "; }
/* Szobák panel: átlátszatlanul sötét üveg helyett halvány fedés (nincs elmosás), nagy display-cím */
.play-side { position: sticky; top: 0; display: grid; gap: 14px; }
.rooms-panel { padding: 22px 22px 14px; border-radius: var(--r-lg); background: rgba(14, 14, 16, .78); box-shadow: inset 0 0 0 1px var(--line); }
.rooms-panel .sec-head { display: flex; align-items: flex-end; gap: 14px; margin: 0 0 16px; }
.rooms-panel .sec-head h2 { margin: 0; font-family: var(--f-disp); font-weight: 900; font-size: 44px; line-height: .82; text-transform: uppercase; letter-spacing: 0; }
.rooms-meta { margin-left: auto; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.rooms-panel .sec-head .btn { height: 30px; width: 30px; padding: 0; box-shadow: none; color: var(--muted); }
.rooms-panel .sec-head .btn span { display: none; }
.rooms-panel .sec-head .btn:hover { color: var(--ink); background: var(--fill-2); }
.room-list { gap: 8px; }
#lobby .room { position: relative; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 16px; min-height: 72px; padding: 10px 16px 10px 10px; border: 0; border-radius: var(--r); background: rgba(245, 242, 236, .05); box-shadow: none; animation: none; content-visibility: auto; contain-intrinsic-size: auto 72px; }
.room-img { display: block; width: 104px; height: 58px; object-fit: cover; border-radius: var(--r-sm); background: var(--card-3); filter: saturate(.9); }
#lobby[data-tab="rooms"] .ph { display: none; }
#lobby .room:hover { background: rgba(245, 242, 236, .09); }
.room .rn { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; }
.room .rn > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.room .rn-lock { width: 15px; height: 15px; color: var(--muted); }
.room .rm { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; margin-top: 3px; font-size: 13px; }
.room .rm span { flex: none; } .room .rm span:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.room .rm span { display: inline-flex; align-items: center; gap: 5px; }
.room .rm span + span::before { content: "·"; margin-right: 6px; color: var(--dim); }
.room .rm .ic { width: 13px; height: 13px; }
.room .pill { height: auto; padding: 0; background: none !important; font-family: var(--f-mono); font-weight: 400; font-size: 12px; color: var(--muted); }
.room .pill.live { color: var(--ink-2); }
.room .pill.live::before { width: 6px; height: 6px; background: var(--acc); animation: none; }
.room .pill.warm { color: var(--muted); }
.room .pill.warm::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.room .cnt { display: grid; justify-items: end; min-width: 52px; font-family: var(--f-disp); font-weight: 800; font-size: 18px; color: var(--muted); }
.room .cnt > span { line-height: .9; }
.room .cnt b { font-weight: 900; font-size: 34px; color: var(--ink); }
.cnt-bar { display: none; }
/* a teljes sor kattintható (a Belépés gomb kiterjesztett célterülete); a gomb maga halk, rámutatáskor kitöltött */
.room .btn { position: static; min-width: 0; height: 32px; padding: 0 12px; font-size: 13px; background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.room .btn::before { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
#lobby .room .btn { opacity: 0; transition: opacity var(--dur-1); }
#lobby .room:hover .btn, #lobby .room .btn:focus-visible { opacity: 1; background: var(--paper); color: var(--on-paper); box-shadow: none; }
.room.tier-no .btn { opacity: .6; }
.play-side .loadout-panel { padding: 16px 18px; border: 0; border-radius: var(--r-lg); background: rgba(14, 14, 16, .78); box-shadow: inset 0 0 0 1px var(--line); }
.play-side .lo-sets { margin-bottom: 10px; }
.play-side .shop h4:first-of-type { margin-top: 14px; }
#lobby .empty { background: none; border: 1px dashed var(--line-2); }

/* ---------- Fejlődés: felső sáv ---------- */
.lvl-ring { --p: 0; --tc: #9AA0A6; position: relative; display: grid; place-content: center; text-align: center; width: 112px; height: 112px; border-radius: 50%;
  background: conic-gradient(var(--tc) calc(var(--p) * 1turn), var(--fill-3) 0); }
.lvl-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--card); }
.lvl-ring > * { position: relative; }
.lvl-ring b { font-family: var(--f-disp); font-weight: 900; font-size: 52px; line-height: .9; letter-spacing: 0; }
.lvl-ring small { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pg-title { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.pg-title select { height: 30px; padding: 0 28px 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238C919B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; -webkit-appearance: none; appearance: none; font-size: var(--fs-sm); color: var(--ink); }
.xp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; max-width: 760px; }
.xp .mono { font-size: var(--fs-sm); color: var(--muted); } .xp .mono b { color: var(--ink); }
#progNav { margin-bottom: 20px; }

/* ---------- Skillek ---------- */
.skx { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); grid-template-areas: "list detail" "list bar" "rules rules"; gap: 16px 20px; align-items: start; }
.skx-list { grid-area: list; display: grid; gap: 2px; padding: 12px; position: sticky; top: 0; }
.skx-list h3 { padding: 10px 10px 6px; }
.skx-item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 6px 10px; padding: 10px 10px 12px; border-radius: var(--r); transition: background var(--dur-1); }
.skx-item:hover { background: var(--fill); }
.skx-item.on { background: var(--card-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.skx-item:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.skx-ic { color: var(--muted); display: grid; } .skx-item.on .skx-ic { color: var(--ink); }
.skx-n { font-weight: 600; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skx-v { font-size: var(--fs-sm); color: var(--muted); } .skx-v b { color: var(--ink); }
.skx-item.can .skx-n::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 2px; border-radius: 50%; background: var(--ink); }
.skx-item .capbar { grid-column: 2 / -1; }
/* egy sáv: max (sín) · keret (halvány) · kiosztva (fehér) · függő (szürke, átosztásnál csíkos) */
.capbar { position: relative; display: block; height: 6px; border-radius: 6px; background: var(--fill-2); overflow: hidden; }
.capbar.lg { height: 12px; margin: 4px 0 2px; }
.capbar i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform-origin: 0 50%; transition: transform var(--dur-3) var(--ease-out); }
.capbar .cap { background: rgba(255, 255, 255, .16); }
.capbar .use { background: var(--paper); }
.capbar .pend { background: rgba(255, 255, 255, .5); }
.capbar .pend.rem { background: repeating-linear-gradient(90deg, rgba(255, 90, 90, .7) 0 3px, transparent 3px 6px); }
.skx-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 10px 4px; font-size: var(--fs-xs); color: var(--muted); }
.skx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.skx-legend i { width: 14px; height: 6px; border-radius: 3px; }
.l-use { background: var(--paper); } .l-cap { background: rgba(255, 255, 255, .22); }
.skx-detail { grid-area: detail; display: grid; gap: 14px; padding: 24px 28px 28px; }
.skx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.skx-head h3 { margin: 0 0 4px; font-family: var(--f-disp); font-weight: 900; font-size: 48px; line-height: .86; letter-spacing: 0; text-transform: uppercase; color: var(--ink); }
.skx-nums { display: flex; gap: 24px; }
.skx-nums span { display: grid; justify-items: end; }
.skx-nums b { font-family: var(--f-disp); font-weight: 900; font-size: 40px; line-height: .86; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.skx-nums span:not(:first-child) b { color: var(--muted); }
.skx-nums small { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.skx-xp { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.skx-xp .hint { font-size: var(--fs-sm); }
.sk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.sk-grid.one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.sk { display: grid; gap: 10px; padding: 18px 18px 16px; border-radius: var(--r-lg); background: var(--card-2); border: 1px solid var(--line); transition: border-color var(--dur-2); }
.sk.ch { border-color: var(--line-3); }
.sk-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sk-h > b { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.015em; }
.sk-v { font-size: var(--fs-sm); color: var(--muted); } .sk-v b { font-size: 20px; color: var(--ink); }
.sk-v em { margin-left: 8px; font-style: normal; font-weight: 700; color: var(--ink); }
.sk-d { margin: -4px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.sk-ctl { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 12px; }
.sk-btn { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r); background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); touch-action: manipulation; user-select: none; transition: background var(--dur-1), transform var(--dur-1) var(--ease-out); }
.sk-btn .ic { width: 22px; height: 22px; stroke-width: 2.2; }
.sk-btn:hover:not([disabled]) { background: var(--fill-3); }
.sk-btn:active:not([disabled]) { transform: scale(.94); background: var(--paper); color: var(--on-paper); }
.sk-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sk-btn[disabled] { opacity: .25; cursor: default; }
.sk-eff { display: flex; flex-wrap: wrap; gap: 6px 18px; min-height: 22px; font-variant-numeric: tabular-nums; }
.eff-i { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--fs-md); }
.eff-i small { font-size: var(--fs-sm); color: var(--muted); }
.eff-i b { font-weight: 600; } .eff-i b.to.better { color: var(--acc); } .eff-i b.to.worse { color: #FF8A8A; }
.eff-i i { display: inline-flex; color: var(--muted); } .eff-i i .ic { width: 13px; height: 13px; vertical-align: -1px; }
.eff-i em { font-style: normal; font-size: var(--fs-xs); color: var(--dim); }
.skx-bar { grid-area: bar; position: sticky; bottom: 12px; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 12px 12px 16px; background: var(--card-2); border-color: var(--line-2); box-shadow: var(--e2); }
.skx-pts { display: flex; align-items: center; gap: 10px; }
.skx-pts b { font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.skx-pts span { font-size: var(--fs-xs); line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.skx-pts.hot b { color: var(--ink); }
.skx-msg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; font-size: var(--fs-md); }
.skx-msg .hint { font-size: var(--fs-sm); }
.skx-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.skx.respec .skx-detail { border-color: rgba(255, 90, 90, .35); }
.skx-rules { grid-area: rules; }
/* megerősítő ablak */
.dlg-root:empty { display: none; }
.dlg-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .6); animation: fadeIn var(--dur-2) var(--ease-out) both; }
.dlg { position: fixed; z-index: 81; left: 50%; top: 50%; width: min(460px, calc(100vw - 32px)); transform: translate(-50%, -50%); padding: 24px; display: grid; gap: 16px; background: var(--card-2); border-color: var(--line-2); box-shadow: var(--e3); animation: dlgIn var(--dur-3) var(--ease-out) both; }
.dlg h3 { font-size: var(--fs-xl); letter-spacing: -.02em; text-transform: none; color: var(--ink); font-weight: 700; }
.dlg-b { display: grid; gap: 12px; color: var(--ink-2); }
.dlg-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: var(--fs-md); }
.dlg-kv span { color: var(--muted); } .dlg-kv b { font-weight: 600; }
.dlg-cost b { display: block; font-weight: 800; font-size: 40px; letter-spacing: -.04em; color: var(--gold); line-height: 1.05; }
.dlg-cost span { font-size: var(--fs-sm); color: var(--muted); }
.dlg-f { display: flex; justify-content: flex-end; gap: 8px; }
@keyframes dlgIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.98); } }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- Kihívások ---------- */
.ch-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.ch-list { display: grid; gap: 8px; margin-bottom: 14px; }
.ch { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r); background: var(--card-2); border: 1px solid var(--line); }
.ch.done { background: color-mix(in srgb, var(--acc) 6%, var(--card-2)); border-color: rgba(143, 211, 166, .3); }
.ch-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ch-tier { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ch.done .ch-tier { color: var(--acc); }
.ch-rew { font-size: var(--fs-sm); color: var(--muted); } .ch-rew b { color: var(--gold); font-weight: 600; }
.ch-t { font-weight: 600; font-size: var(--fs-lg); letter-spacing: -.01em; }
.ch-f { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.ch-f .mono { font-size: var(--fs-sm); color: var(--muted); }
.ch.done .bar i { background: var(--acc); }

/* ---------- Achievementek ---------- */
.ach-sum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 16px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.ach-sum .big b { font-family: var(--f-disp); font-weight: 900; font-size: 56px; letter-spacing: 0; line-height: .86; }
.ach-sum .big span { margin-left: 6px; color: var(--muted); }
.ach-tc { display: flex; gap: 18px; font-size: var(--fs-sm); color: var(--muted); }
.ach-tc span { display: inline-flex; align-items: center; gap: 6px; } .ach-tc i { width: 10px; height: 10px; border-radius: 50%; } .ach-tc b { color: var(--ink); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.ach-grid.sm { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.achc { --ac: var(--dim); display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 8px 12px; padding: 14px 16px; border-radius: var(--r); content-visibility: auto; contain-intrinsic-size: auto 92px;
  background: color-mix(in srgb, var(--ac) 5%, var(--card)); border: 1px solid color-mix(in srgb, var(--ac) 18%, var(--line)); }
.achc:not([class*=" t"]) { background: var(--card); border-color: var(--line); }
.achc-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ac); background: color-mix(in srgb, var(--ac) 12%, transparent); }
.achc-ic .ic { width: 22px; height: 22px; }
.achc-id { display: grid; min-width: 0; }
.achc-id b { font-weight: 600; font-size: var(--fs-md); }
.achc-id small { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pips { display: inline-flex; gap: 4px; align-self: start; padding-top: 4px; }
.pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--fill-3); }
.achc-p { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.achc-p .mono { font-size: var(--fs-xs); color: var(--muted); }
.achc .bar i { background: var(--ac); }
.achc:not([class*=" t"]) .bar i { background: var(--ink-2); }
.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.medal { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); font-size: var(--fs-md); }
.medal .ic { color: var(--gold); } .medal b { font-weight: 600; } .medal em { margin-left: auto; font-style: normal; font-family: var(--f-mono); color: var(--ink-2); }
.medal.none { opacity: .45; } .medal.none .ic { color: var(--dim); }

/* ---------- Statisztika ---------- */
#pgStats .tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.mw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.mw { display: grid; gap: 6px; justify-items: center; padding: 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-align: center; content-visibility: auto; contain-intrinsic-size: auto 130px; }
.mw img { width: 100%; height: 40px; object-fit: contain; }
.mw b { font-weight: 600; font-size: 13px; }
.mw .bar { width: 100%; }
.stars { font-size: 12px; letter-spacing: 2px; color: var(--gold); } .stars span { color: var(--fill-3); }
.mw:not([class*=" t"]) .stars { color: var(--fill-3); }
.mw.t4 { border-color: rgba(243, 162, 91, .35); }

/* ---------- Meccsek (lista) ---------- */
.mlist { display: grid; gap: 4px; }
.mrow { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 96px minmax(0, 1.4fr) 92px 36px 64px minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); content-visibility: auto; contain-intrinsic-size: auto 56px; }
button.mrow { cursor: pointer; transition: background var(--dur-1), border-color var(--dur-1); }
button.mrow:hover { background: var(--card-2); border-color: var(--line-2); }
button.mrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.mrow.skel { min-height: 56px; }
.m-res { font-weight: 700; font-size: var(--fs-md); }
.m-res.w { color: var(--acc); } .m-res.l { color: #FF8A8A; } .m-res.d { color: var(--ink-2); }
.m-mode { display: grid; min-width: 0; } .m-mode b { font-weight: 600; } .m-mode small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-kda { font-size: var(--fs-md); color: var(--ink); }
.m-g i { font-size: 18px; }
.m-dr { font-size: var(--fs-sm); text-align: right; }
.m-when { font-size: var(--fs-sm); color: var(--muted); text-align: right; white-space: nowrap; }
.m-go { color: var(--dim); display: grid; }
.mlist.compact .mrow { grid-template-columns: 80px minmax(0, 1fr) 72px 28px 52px 16px; min-height: 48px; padding: 0 12px; contain-intrinsic-size: auto 48px; }
.mlist.compact .m-when { display: none; }
.mmore { margin-top: 10px; }
.mlater { margin-bottom: 20px; } .mlater .sec-head { margin-top: 0; }

/* ---------- Piactér ---------- */
#marketPage .sec-head:first-of-type, .mk-body > .sec-head:first-child { margin-top: 0; }
.mk-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.mk-card { content-visibility: auto; contain-intrinsic-size: auto 260px; }

/* ---------- Ranglista ---------- */
.lb-tools .seg { background: var(--card); }
.lb-search input { background: var(--card); }
.lb-wrap { border-radius: var(--r-lg); }
#lobby table.lb { background: var(--card); }
table.lb-main td { height: 52px; }
table.lb-main tbody tr { content-visibility: auto; contain-intrinsic-size: auto 52px; }
table.lb-main tbody tr[data-id]:hover td { background: var(--card-2); }
.lb-legend.fold { margin-top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lb-legend.fold summary { color: var(--muted); }

/* ---------- Beállítások ---------- */
.st-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.st-cols.keys { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.st-card { padding: 8px 24px 16px; }
.st-card > h3, .st-card > .card-head { margin: 16px 0 6px; }
.st-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 64px; align-items: center; gap: 16px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); color: var(--ink); cursor: pointer; }
.st-row:last-child { border-bottom: 0; }
.st-row.sub { min-height: 46px; padding-left: 16px; font-size: var(--fs-sm); color: var(--ink-2); }
.st-row.check { grid-template-columns: minmax(0, 1fr) auto; }
.st-row.sel { grid-template-columns: minmax(0, 1fr) minmax(160px, 220px); }
.st-l { display: grid; gap: 2px; }
.st-l small { font-size: var(--fs-sm); color: var(--muted); }
.st-row output { font-family: var(--f-mono); font-size: var(--fs-sm); text-align: right; font-variant-numeric: tabular-nums; }
.st-row select { width: 100%; height: 40px; padding: 0 32px 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238C919B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; appearance: none; color: var(--ink); }
.st-cross .cross-edit { grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); padding-top: 16px; }
.st-cross .opts .st-row { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); min-height: 48px; }
.st-cross .opts .st-row.check { grid-template-columns: minmax(0, 1fr) auto; }
.st-cross .cross-prev { border-radius: var(--r-lg); }
.binds.fixed { margin-top: 0; opacity: .7; }
.binds.fixed .bind-row kbd { height: 28px; padding: 0 10px; font-size: 12px; }
.tips { display: grid; gap: 4px; margin: 4px 0 0; }
.tips dt { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; font-size: var(--fs-md); color: var(--ink); }
.tips dt .ic { color: var(--muted); }
.tips dd { margin: 0 0 0 26px; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); max-width: var(--m-read); }

/* =====================================================================================
   OLDALPANEL (profil, meccs): jobbról, transform + opacity, ≤ 220 ms; a háttér látszik, halványítva
   ===================================================================================== */
.sp-scrim { position: fixed; inset: 0; z-index: 69; background: rgba(4, 5, 7, .55); opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.sp-scrim.open { opacity: 1; }
.sp { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(640px, 100vw); display: flex; flex-direction: column; background: var(--bg-2); border-left: 1px solid var(--line-2); box-shadow: var(--e3);
  transform: translate3d(100%, 0, 0); transition: transform var(--dur-3) var(--ease-out); outline: none; contain: layout paint; }
.sp.open { transform: none; }
.sp.anim, .sp-scrim.anim { will-change: transform, opacity; }
.sp-bar { flex: none; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); }
.sp-t { flex: 1; font-family: var(--f-mono); font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sp-ib { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); color: var(--ink-2); }
.sp-ib:hover { background: var(--fill-2); color: var(--ink); }
.sp-ib:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.sp-ib .ic { width: 20px; height: 20px; }
.sp-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px 28px 40px; }
.sp .pp-sec { margin-top: 8px; }
.sp .sec-head { margin: 24px 0 10px; }
/* profil */
.pp-head { display: flex; align-items: center; gap: 18px; }
.pp-portrait { flex: none; width: 88px; height: 88px; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; background: var(--card-3); box-shadow: inset 0 0 0 2px var(--tc, var(--line-2)); }
.pp-portrait span { font-weight: 800; font-size: 28px; letter-spacing: -.03em; color: var(--ink-2); }
.pp-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; animation: fadeIn var(--dur-4) var(--ease-out) both; }
.pp-id { min-width: 0; flex: 1; }
.pp-id h2 { margin: 0; padding-top: .08em; font-family: var(--f-disp); font-weight: 900; font-size: 52px; line-height: .86; letter-spacing: 0; text-transform: uppercase; overflow-wrap: anywhere; min-height: 32px; }
.pp-latin { margin-top: 2px; font-style: italic; font-size: var(--fs-sm); color: var(--muted); }
.pp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; min-height: 22px; }
.pp-title { font-size: var(--fs-sm); color: var(--ink-2); }
.pp-xp { margin: 18px 0 16px; max-width: none; }
.pp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: var(--r-lg); overflow: hidden; background: var(--line); border: 1px solid var(--line); margin-top: 16px; }
.pp-tiles .tile { min-height: 72px; padding: 12px 14px; }
.pp-tiles .tile b { font-size: 28px; }
.pp-tiles .tile.skel { border-radius: 0; min-height: 72px; }
.pp-pers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.pp-per { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.pp-per small { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pp-per b { font-family: var(--f-mono); font-size: 17px; font-weight: 600; }
.pp-per span { font-size: var(--fs-xs); color: var(--muted); }
.pp-charts { min-height: 150px; }
.pp-chart { margin: 0; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.pp-chart figcaption { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: var(--fs-sm); color: var(--muted); }
.pp-chart figcaption b { margin-left: auto; font-family: var(--f-mono); font-size: 16px; font-weight: 600; color: var(--ink); }
.pp-chart figcaption small { font-family: var(--f-mono); font-size: var(--fs-xs); }
.pp-plot { position: relative; height: 112px; }
.pp-plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pp-plot .grid line { stroke: rgba(255, 255, 255, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pp-plot .line { fill: none; stroke: #E9EBEF; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pp-plot .area { fill: rgba(255, 255, 255, .05); stroke: none; }
.pp-plot .cross { stroke: rgba(255, 255, 255, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pp-plot .dotm { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--bg-2); pointer-events: none; }
.pp-plot .ax { position: absolute; left: 0; font-family: var(--f-mono); font-size: 10.5px; color: var(--dim); pointer-events: none; }
.pp-plot .ax-hi { top: -4px; } .pp-plot .ax-lo { bottom: -4px; }
.pp-plot .tip { position: absolute; top: 2px; padding: 3px 7px; border-radius: var(--r-xs); font-size: 11.5px; white-space: nowrap; color: var(--ink); background: var(--card-3, #1B1B1E); border: 1px solid var(--line-2); pointer-events: none; }
.pp-x { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--dim); }
.pp-types { display: grid; gap: 8px; }
.pp-types > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) 56px; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--ink-2); }
.pp-types > div > i { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
.pp-types > div > i > i { position: absolute; inset: 0; background: rgba(255, 255, 255, .6); transform-origin: 0 50%; }
.pp-types b { text-align: right; font-family: var(--f-mono); font-weight: 600; }
.pp-foot { margin-top: 24px; }
/* meccs-részletek */
.md-head { padding: 4px 0 18px; }
.md-res { margin: 0; font-weight: 900; font-size: var(--fs-3xl); line-height: 1; letter-spacing: -.045em; text-transform: uppercase; }
.md-head.w .md-res { color: var(--gold); } .md-head.l .md-res { color: var(--rose-2); }
.md-sub { margin: 10px 0 4px; font-size: var(--fs-lg); color: var(--ink-2); }
.md-sub b { font-family: var(--f-mono); font-size: 20px; }
.md-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-tiles .tile b { font-size: 20px; }
.md-gain, .md-medals { margin-top: 12px; }
.chip.md-chip .ic { color: var(--gold); }
.tl { position: relative; padding: 10px 12px 4px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.tl-track { position: relative; height: 64px; margin: 0 6px; }
.tl-track::before { content: ""; position: absolute; left: 0; right: 0; top: 32px; height: 1px; background: var(--line-2); }
.tl-d { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; }
.tl-d.big { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.tl-d.tl-obj { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.tl-d:hover { transform: scale(1.6); }
.tl-me { background: #fff; } .tl-dead { background: #FF6B6B; } .tl-a { background: var(--rose); opacity: .55; } .tl-b { background: var(--blue); opacity: .55; } .tl-o { background: var(--muted); opacity: .5; } .tl-obj { background: var(--gold); }
.tl-x { position: relative; height: 18px; font-family: var(--f-mono); font-size: 10.5px; color: var(--dim); }
.tl-x span { position: absolute; top: 2px; transform: translateX(-50%); } .tl-x span:first-child { transform: none; } .tl-x span:last-child { transform: translateX(-100%); }
.tl-key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.tl-key i { width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; }
.md-team { margin-bottom: 12px; }
.md-th { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 10px; border-radius: var(--r-sm); font-weight: 700; }
.md-team.t0 .md-th { background: var(--rose-t); color: var(--rose-2); } .md-team.t1 .md-th { background: var(--blue-t); color: var(--blue-2); }
.md-th b { font-family: var(--f-mono); font-size: 18px; }
/* meccs-részletek: eseménylista (agent/history idővonal) */
.md-evh { margin-top: 16px; }
.md-ev { max-height: 340px; overflow: auto; overscroll-behavior: contain; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.md-e { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); content-visibility: auto; contain-intrinsic-size: auto 32px; }
.md-e:first-child { border-top: 0; }
.md-e > time { flex: none; width: 40px; font-family: var(--f-mono); font-size: 11.5px; color: var(--dim); }
.md-e .wi { display: inline-block; height: 14px; width: auto; opacity: .9; }
.md-e .ki { width: 15px; height: 15px; }
.md-e .d { margin-left: auto; font-family: var(--f-mono); font-size: 11.5px; color: var(--dim); }
.md-e.me { background: var(--fill); color: var(--ink); }
.md-e.r { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--fill); }
.md-p { color: var(--ink); font-weight: 600; } .md-p.t0 { color: var(--rose-2); } .md-p.t1 { color: var(--blue-2); }
.md-tag { font-size: 10.5px; color: var(--muted); }
.md-tbl tr[data-pid] { cursor: pointer; } .md-tbl tr[data-pid]:hover td { background: var(--fill); }
.md-wt .wi { display: inline-block; height: 13px; width: auto; vertical-align: -2px; margin-right: 6px; opacity: .9; }
.mlist-sep { margin: 10px 2px 2px; }
.dbar { position: relative; display: inline-block; width: 80px; height: 6px; margin-right: 8px; border-radius: 3px; background: var(--fill-2); overflow: hidden; vertical-align: 1px; }
.dbar i { position: absolute; inset: 0; background: rgba(255, 255, 255, .6); transform-origin: 0 50%; }

/* =====================================================================================
   JÁTÉKBAN: Esc-menü (bal oldali teljes magas panel), tabella, bolt, halál – elmosás nélkül (élő 3D fölött)
   ===================================================================================== */
/* (reskin) B · Műszak játékbeli menük: bal oldali, teljes magasságú sáv nagy display-címmel; Tab-tábla és bolt keret nélküli sötét fedéssel */
#menu { padding: 0; align-items: stretch; background: linear-gradient(90deg, rgba(6, 6, 7, .92) 0, rgba(6, 6, 7, .7) 520px, rgba(6, 6, 7, .3)); backdrop-filter: none; -webkit-backdrop-filter: none; }
#menu .menu-box { width: min(500px, 100%); min-height: 100%; border-radius: 0; border: 0; padding: clamp(32px, 7vh, 80px) var(--m-gutter) 40px; background: rgba(6, 6, 7, .86); box-shadow: none; }
#menu .menu-box:has(#hostPanel:not([hidden])) { width: min(980px, 100%); }
.menu-kick { margin: 0 0 12px; font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--light); }
#menu .menu-box h2 { margin-bottom: 28px; font-family: var(--f-disp); font-weight: 900; font-size: clamp(36px, 5vh, 56px); line-height: .86; letter-spacing: 0; text-transform: uppercase; }
#menu .menu-box h3 { font-family: var(--f-mono); font-weight: 400; letter-spacing: .14em; color: var(--muted); }
#menu .menu-cols > div:first-child > .btn { height: 52px; margin-bottom: 8px; font-size: 15px; gap: 12px; }
#menu .menu-cols > div:first-child > .btn.primary { justify-content: flex-start; }
#menu .btn kbd { margin-left: auto; }
#menu .btn.primary kbd { background: rgba(0, 0, 0, .1); color: var(--on-paper); box-shadow: none; }
#mFull { margin-top: 28px; }
#scoreboard, #death .shop, .killed-by, #toast { backdrop-filter: none; -webkit-backdrop-filter: none; }
#scoreboard { background: rgba(8, 8, 10, .9); border: 0; box-shadow: inset 0 0 0 1px var(--line), var(--sh-lg); text-shadow: none; }
#shop { background: rgba(6, 6, 7, .86); backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: none; }
.shop-box { background: var(--bg-2); animation: dlgIn2 var(--dur-3) var(--ease-out) both; }
@keyframes dlgIn2 { from { opacity: 0; transform: translateY(8px) scale(.99); } }
#clickToPlay { background: rgba(6, 7, 9, .66); backdrop-filter: none; -webkit-backdrop-filter: none; }
#death .shop { background: rgba(11, 12, 15, .96); }
.killed-by { background: rgba(14, 15, 18, .95); }
#toast { background: var(--card-2, #131315); }

/* =====================================================================================
   ZÁRÓKÉP: teljes képernyő, sorban felúszó rétegek
   ===================================================================================== */
/* (reskin) B · Műszak meccsvége: hatalmas display-eredmény, eredmény-szám a csapatszínekkel, keret nélküli statisztika-sor
   nagy számokkal, halk kártyák; a jelenet balról sötétítve átlátszik */
#endScreen { display: block; padding: 0; overflow: auto; overscroll-behavior: contain; background: linear-gradient(90deg, rgba(6, 6, 7, .97) 0%, rgba(6, 6, 7, .9) 58%, rgba(6, 6, 7, .74) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; }
#endScreen .end-box.es { width: 100%; max-width: 1680px; max-height: none; margin: 0 auto; padding: clamp(28px, 5vh, 64px) var(--m-gutter) 48px; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; display: grid; gap: 22px; }
.es::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 46vh; pointer-events: none; z-index: -1; opacity: .5; }
.es.win::before { background: radial-gradient(80% 100% at 50% 0, rgba(243, 162, 91, .16), transparent 70%); }
.es.lose::before { background: radial-gradient(80% 100% at 50% 0, rgba(240, 86, 95, .12), transparent 70%); }
.es p { margin: 0; }
.rv { animation: rvIn var(--dur-4) var(--ease-out) var(--d, 0ms) both; }
.rv.stamp { animation-name: rvStamp; animation-duration: 380ms; }
@keyframes rvIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes rvStamp { from { opacity: 0; transform: scale(1.35); } }
@keyframes esStamp { from { opacity: 0; transform: scale(1.35); } }
.es-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.es .end-title { padding-top: .1em; font-family: var(--f-disp); font-weight: 900; font-size: min(clamp(96px, 18vh, 232px), 21vw); line-height: .78; letter-spacing: -.005em; text-transform: uppercase; }
.es .end-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 14px 0 0; font-size: var(--fs-lg); color: var(--muted); }
.es-ts { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.es-ts { gap: 14px; } .es-ts b { font-family: var(--f-disp); font-weight: 900; font-size: 64px; line-height: .8; } .es-ts i { font-style: normal; color: var(--dim); font-size: 32px; } .es-ts b.t-a { color: var(--rose); } .es-ts b.t-b { color: var(--blue); }
.es-ts .ic { color: var(--gold); }
.es-grade { flex: none; display: grid; grid-template-columns: auto auto; align-items: center; gap: 18px; }
.es-grade > b { display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; font-family: var(--f-disp); font-weight: 900; font-size: 76px; line-height: 1; color: var(--gc); box-shadow: inset 0 0 0 2px var(--gc); }
.es-rt { display: grid; } .es-rt b { font-family: var(--f-disp); font-weight: 900; font-size: 56px; line-height: .86; font-variant-numeric: tabular-nums; }
.es-rt small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.es-mvp { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--r-pill); font-family: var(--f-body); font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #111; background: var(--gold); }
.es-mvp.t { padding: 0 2px; color: var(--gold); background: none; }
.es-bot { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; color: var(--dim); }
/* jutalmak */
.es-rew { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.es-xp, .es-rt-i { min-height: 108px; padding: 20px 24px; border-radius: var(--r-lg); background: rgba(14, 14, 16, .7); border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.es-xp { display: flex; align-items: center; gap: 24px; min-width: 0; }
.es-lv { display: grid; justify-items: center; line-height: 1; }
.es-lv b { font-family: var(--f-disp); font-weight: 900; font-size: 56px; line-height: .86; color: var(--ink); }
.es-lv small, .es-rt-i small, .es-st small { font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.es-lv.up b { color: var(--acc); animation: epUp 1s var(--ease-out) 1.2s 2; }
.es-xpm { display: grid; gap: 10px; flex: 1; min-width: 0; }
.es-xpn { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--muted); }
.es-xpn b { font-family: var(--f-disp); font-weight: 900; font-size: 36px; line-height: .9; color: var(--ink); font-variant-numeric: tabular-nums; }
.es-xpn small { font-family: var(--f-mono); color: var(--dim); }
.es-bar { position: relative; height: 3px; border-radius: 3px; background: rgba(245, 242, 236, .14); overflow: hidden; }
.es-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out) .7s; }
.es-rt-i { display: grid; align-content: center; gap: 4px; }
.es-rt-i .ic { width: 20px; height: 20px; color: var(--muted); }
.es-rt-i b { font-family: var(--f-disp); font-weight: 900; font-size: 52px; line-height: .86; color: var(--ink); font-variant-numeric: tabular-nums; }
.es-rt-i.fp b, .es-rt-i.fp .ic { color: var(--gold); }
.es-rt-i.hot { background: var(--paper); border-color: transparent; } .es-rt-i.hot b, .es-rt-i.hot .ic { color: var(--on-paper); } .es-rt-i.hot small { color: var(--on-paper-2); }
.es-rt-i.zero b { color: var(--dim); }
.es-rew .skel { min-height: 108px; border-radius: var(--r-lg); }
.es-skl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 10px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.es-skl > small { font-size: var(--fs-xs); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.es-sk b { font-family: var(--f-mono); font-weight: 600; color: var(--ink); }
.es-sk em { font-style: normal; font-size: var(--fs-xs); color: var(--acc); }
.es-lr { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--gold); }
/* érmek, achievementek */
.es-md { display: flex; flex-wrap: wrap; gap: 8px; }
.es-md:empty { display: none; }
.es-chip { --ic: var(--ink-2); display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 18px 8px 10px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.es-chip > span:last-child { display: grid; line-height: 1.25; }
.es-chip b { font-weight: 700; font-size: var(--fs-md); } .es-chip b em { font-style: normal; font-weight: 500; color: var(--muted); }
.es-chip small { font-size: var(--fs-xs); color: var(--muted); }
.es-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ic); background: color-mix(in srgb, var(--ic) 12%, transparent); }
.es-ico .ic { width: 20px; height: 20px; }
.es-chip.md .es-ico { --ic: var(--gold); }
.es-chip.mvp { background: color-mix(in srgb, var(--gold) 8%, var(--card)); border-color: rgba(243, 162, 91, .35); }
.es-chip.av { background: color-mix(in srgb, var(--ic) 6%, var(--card)); }
/* fő számok */
.es-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; padding: 20px 0 4px; border-top: 1px solid var(--line); background: none; }
.es-stats:empty { display: none; }
.es-st { display: grid; gap: 8px; padding: 0; background: none; }
.es-st b { font-family: var(--f-disp); font-weight: 900; font-size: clamp(48px, 6.4vh, 72px); line-height: .82; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.es-st b i { font-style: normal; color: var(--dim); margin: 0 2px; }
.es-best { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--fs-sm); }
.es-best-i small { margin-right: 6px; color: var(--dim); }
.es-best-i b { font-weight: 600; color: var(--ink-2); }
.es-best-i em { margin-left: 6px; font-style: normal; font-family: var(--f-mono); color: var(--muted); }
.es-best-i.me b { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
/* csapat-tabella */
.es-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.es-team { min-width: 0; border-radius: var(--r-lg); background: rgba(14, 14, 16, .6); border: 0; box-shadow: inset 0 0 0 1px var(--line); padding: 6px 10px 10px; }
.es-th { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px; font-family: var(--f-disp); font-weight: 900; font-size: 30px; text-transform: uppercase; }
.es-th b { margin-left: auto; font-family: var(--f-disp); font-size: 34px; }
.es-th small { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.es-team.t0 .es-th > span { color: var(--ink); } .es-team.t1 .es-th > span { color: var(--ink); }
.es-team.t0 .es-th b { color: var(--rose); } .es-team.t1 .es-th b { color: var(--blue); }
.es-tw > .table-wrap { border-radius: var(--r-lg); background: rgba(14, 14, 16, .6); border: 0; box-shadow: inset 0 0 0 1px var(--line); padding: 6px 10px 10px; }
.es-table td { height: 40px; }
.es-g { margin-right: 6px; font-family: var(--f-body); font-weight: 800; color: var(--gc); }
/* lábléc, részletek */
.es-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding-top: 8px; border-top: 1px solid var(--line); }
.es-foot .end-next { margin: 0 0 0 auto; }
.es-more-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; font-size: var(--fs-md); font-weight: 600; color: var(--ink-2); border-radius: var(--r-sm); }
.es-more-btn:hover, .es-more-btn.on { color: var(--ink); }
.es-more-btn[disabled] { cursor: default; color: var(--acc); }
.es-more-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.es-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; animation: rvIn var(--dur-3) var(--ease-out) both; }
.es-more .ep { margin: 0; border-radius: var(--r-lg); background: var(--card); }
.es-kv { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); font-size: var(--fs-sm); }
.es-kv small { margin-right: 6px; color: var(--dim); }
.es-kv b { font-family: var(--f-mono); font-weight: 600; color: var(--ink-2); }
.es-wt { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: var(--fs-sm); }
.es-wt th, .es-wt td { height: 30px; padding: 0 8px; text-align: right; font-variant-numeric: tabular-nums; }
.es-wt th { font-weight: 500; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.es-wt td { font-family: var(--f-mono); color: var(--ink-2); border-top: 1px solid var(--line); }
.es-wt th:first-child, .es-wt td:first-child { text-align: left; font-family: var(--f-body); }
/* élő érem (játék közben) */
.mp .ic { width: 15px; height: 15px; color: var(--gold); }

/* =====================================================================================
   RESZPONZÍV: 2560 → 1024 → 390 px
   ===================================================================================== */
@media (min-width: 2000px) {
  :root { --fs-md: 15px; }
  .ach-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}
@media (max-width: 1500px) {
      .es-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  #lobby .tabs button { padding: 0 9px; font-size: 21px; }
  #lobby .top-shift { display: none; }
  .me-id small .me-rt { display: none; }
  .sk-grid { grid-template-columns: minmax(0, 1fr); }
  .skx-xp { grid-template-columns: 120px minmax(0, 1fr); } .skx-xp .mono { grid-column: 1 / -1; }
  .es-teams { grid-template-columns: minmax(0, 1fr); }
  .es-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  /* keskeny: a menüpontok mindig a felső sáv alatti, vízszintesen görgethető sorban; a főoldal egy oszlop */
  #lobby { --m-top: 112px; }
  #lobby .topbar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 60px 52px; row-gap: 0; padding-top: 0; }
  #lobby .me-card { grid-column: 3; grid-row: 1; }
  #lobby .tabs, #lobby[data-tab="rooms"] .tabs { position: relative; left: auto; top: auto; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; flex-direction: row; align-items: center; gap: 0;
    margin: 0 calc(-1 * var(--m-gutter)); padding: 0 var(--m-gutter); overflow-x: auto; scrollbar-width: none; animation: navBar var(--t-in) var(--ease-film) both; }
  #lobby .tabs::-webkit-scrollbar { display: none; }
  #lobby .tabs button, #lobby[data-tab="rooms"] .tabs button { display: inline-flex; align-items: baseline; gap: 5px; height: 48px; padding: 0 12px 0 0; margin-right: 10px; font-weight: 800; font-size: 26px; line-height: 48px; color: rgba(245, 242, 236, .38); }
  #lobby[data-tab="rooms"] .tabs button .tn, #lobby .tabs button .tn { transform: translateY(-12px); font-size: 10px; }
  #lobby[data-tab="rooms"] .tabs button[aria-selected="true"] { color: var(--ink); }
  #lobby[data-tab="rooms"] .tabs button[aria-selected="true"] > span:not(.tab-badge)::after { content: none; }
  #lobby[data-tab="rooms"] .tab-ind { display: block; }
  .play { grid-template-columns: minmax(0, 1fr); }
  .play-main { min-height: 0; padding-top: 8px; }
  .play-side { position: static; }
      .skx { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list" "detail" "bar" "rules"; }
  .skx-list { position: static; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; }
  .skx-list h3, .skx-legend { grid-column: 1 / -1; }
  .ch-cols, .st-cols, .st-cols.keys { grid-template-columns: minmax(0, 1fr); }
  .es-rew { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .es-xp { grid-column: 1 / -1; }
  .mrow { grid-template-columns: 84px minmax(0, 1fr) 80px 28px 56px 16px; } .mrow .m-when { display: none; }
}
@media (max-width: 760px) {
  #lobby .topbar { gap: 8px; }
  .me-id { display: none; }
  #lobby .lobby-body { padding-top: 12px; }
  .play-cta { flex-direction: column; }
  .cta.primary { min-width: 0; } .cta.primary b { font-size: 32px; }
  .rooms-panel { padding: 16px 14px 10px; } .rooms-panel .sec-head h2 { font-size: 36px; }
  .rooms-meta { display: none; }
  #lobby .room { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; padding: 8px 12px 8px 8px; }
  .room-img { width: 76px; height: 48px; }
  #lobby .room .pill { display: none; }
  #lobby .room .btn { width: 0; height: 0; padding: 0; overflow: hidden; font-size: 0; box-shadow: none; }
    .lvl-ring { width: 84px; height: 84px; } .lvl-ring b { font-size: 30px; }
    .xp { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .skx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; } .skx-item { padding: 8px; }
  .skx-detail { padding: 18px; }
  .skx-bar { grid-template-columns: auto minmax(0, 1fr); } .skx-btns { grid-column: 1 / -1; justify-content: stretch; } .skx-btns .btn { flex: 1; }
  .skx-nums { gap: 14px; } .skx-nums b { font-size: 22px; }
  .ach-sum { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ach-grid, .ach-grid.sm { grid-template-columns: minmax(0, 1fr); }
  .mrow, .mlist.compact .mrow { grid-template-columns: 72px minmax(0, 1fr) 64px 40px 16px; gap: 8px; padding: 0 12px; } .mrow .m-g { display: none; }
  .st-row { grid-template-columns: minmax(0, 1fr) 56px; } .st-row > input[type=range] { grid-column: 1 / -1; grid-row: 2; }
  .st-row.sel { grid-template-columns: minmax(0, 1fr); }
  .st-cross .cross-edit { grid-template-columns: minmax(0, 1fr); } .st-cross .cross-prev { width: 168px; }
  .st-card { padding: 4px 16px 12px; }
  .subnav button { padding: 0 12px; }
  .page-top h2 { font-size: 24px; }
  .sp-body { padding: 18px 16px 32px; }
  .pp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-per { padding: 10px; } .pp-per b { font-size: 15px; }
  .pp-types > div { grid-template-columns: 96px minmax(0, 1fr) 48px; }
  #menu .menu-box { padding: 28px 20px; }
  .es-head { flex-direction: column; align-items: flex-start; }
  .es-grade > b { width: 84px; height: 84px; font-size: 44px; }
  .es-rew { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .es-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-xp { gap: 16px; padding: 16px; } .es-lv b { font-size: 34px; }
  .es-table th:nth-child(5), .es-table td:nth-child(5), .es-table th:nth-child(6), .es-table td:nth-child(6), .es-table th:nth-child(7), .es-table td:nth-child(7) { display: none; }
  .es-foot .end-next { margin: 0; flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .sp, .sp-scrim { transition-duration: 1ms; }
  .rv, .rv.stamp { animation: none; }
  .es-bar i, .bar i, .capbar i { transition: none; }
  .skel { animation: none; }
}
/* induló készletek: a kiválasztott fehér keretet kap (nem zöldet) */
.lo-set[aria-selected="true"] { background: var(--fill-3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.lo-set[aria-selected="true"] b { color: var(--ink); }
/* az alsó skill-sáv csak függő változásnál tapad a képernyő aljára */
.skx:not(.pend) .skx-bar { position: static; box-shadow: none; background: var(--card); border-color: var(--line); }
/* licenc-futamidők: a címke fölött az ár, nem vágódik le */
.mk-lt .btn { height: auto; min-height: 42px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 5px 10px; }
.mk-lt .btn span { font-size: 11px; } .mk-lt .btn b { font-size: 12.5px; }
/* játékbeli bolt: szélesebb, több oszlop */
#shop .shop-box { width: min(1560px, 100%); }
#shop .shop-grid:not(.gear-grid) { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* (teljesítmény) a rejtett lapok nem display:none-ok, hanem content-visibility: hidden – a böngésző megtartja az elrendezésüket,
   így a fülváltás nem épít újra mindent (a [hidden] attribútum és a JS-beli .closest('[hidden]') ellenőrzések maradnak) */
#lobby .tab-page[hidden], #progPage > .pg-sub[hidden], #settingsPage > .st-sub[hidden] { display: block !important; content-visibility: hidden; height: 0; overflow: hidden; animation: none; }
#lobby .tab-page[data-page="rooms"][hidden] { display: block !important; }
.mlist ~ .hint { margin-top: 10px; }

/* ---------- visszajátszás (agent/replay) a menük nyelvén (merge7) ---------- */
.m-rp { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: -2px; color: var(--ink-2); font-weight: 600; font-size: var(--fs-xs); }
.m-rp .ic { width: 12px; height: 12px; }
.m-rp b { color: var(--gold); font-weight: 600; }
.mrp-head { margin: 0 0 10px; } .mrp-head .hint { display: inline-flex; align-items: center; gap: 6px; } .mrp-head .ic { width: 13px; height: 13px; }
/* a lejátszó saját felülete (replay.css) a menü-tokenekkel: átlátszatlan felületek, elmosás nélkül (élő 3D fölött) */
.rpl-title, .rpl-score, .rpl-side section, .rpl-follow, .rpl-bar { background: var(--chrome); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--line), var(--e1); }
.rpl-feed .kf { background: var(--chrome); }
.rpl-btn.on, .rpl-group .rpl-btn.on { background: var(--ink); color: var(--on-paper); }
.rpl-list { background: rgba(5, 6, 8, .78); backdrop-filter: none; -webkit-backdrop-filter: none; }
.rpl-list-box { background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2), var(--e3); border-radius: var(--r-lg); }
.rpl-list-box h2 { font-weight: 800; letter-spacing: -.02em; }
.rpl-row { background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
.rpl-chip { min-height: 30px; box-sizing: border-box; }
/* „most szól” chip (zenecsomag, musicchip.js) a menük nyelvén: bal alsó sarok, átlátszatlan, elmosás nélkül; a lobbi alja kap helyet neki */
#lobby .music-chip { left: var(--m-gutter); bottom: 11px; height: 30px; background: var(--chrome); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--line), var(--e2); font-size: var(--fs-xs); }
/* (fixes) a chip saját sávban ül: a görgetett tartalom a sáv fölött ér véget, sosem csúszik alá (korábban a beállítások alsó
   súgójára / a kártyák aljára lógott; a 72→56 px-es alsó kitöltés ráadásul csökkentette a helyet) */
#lobby:has(.music-chip.on) .lobby-body { margin-bottom: 52px; padding-bottom: 28px; }
/* [endhold] [menux] a zárókép alsó sávja: állapot-szöveg · Kilépés a lobbiba · Maradok / Tovább. A görgető (#endScreen) alján
   tapad, teljes szélességben; a tartalom alja a sáv fölött ér véget (a sáv a dobozon kívül, utána áll), a Részletek
   görgetése (scrollIntoView) a sáv magasságával számol (scroll-padding). Keskeny ablakban: szöveg fent, gombok alatta. */
#endScreen { scroll-padding-bottom: 88px; }
#endScreen .end-hold { position: sticky; bottom: 0; z-index: 3; width: 100%; margin: 0; padding: 12px var(--m-gutter) max(12px, env(safe-area-inset-bottom)); background: var(--chrome); box-shadow: inset 0 1px 0 var(--line-2), 0 -18px 36px rgba(6, 6, 7, .55); pointer-events: auto; }
#endScreen .end-hold .eh-in { display: flex; align-items: center; gap: 10px 16px; max-width: 1680px; margin: 0 auto; }
#endScreen .end-hold .eh-t { flex: 1 1 auto; min-width: 0; color: var(--muted); font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#endScreen .end-hold.on .eh-t { color: var(--ink-2); }
#endScreen .end-hold .eh-act { flex: none; display: flex; align-items: center; gap: 8px; }
#endScreen .end-hold .btn { flex: none; height: 40px; padding: 0 16px; }
#endScreen .end-hold .btn .ic { width: 16px; height: 16px; }
#endScreen .end-hold .btn[hidden] { display: none; }
#endScreen .end-hold kbd { font: 600 11px/18px var(--f-mono, monospace); height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 4px; border: 0; box-shadow: none; background: rgba(10, 11, 13, .1); color: rgba(10, 11, 13, .7); }
#endScreen.has-hold .es-foot .end-next { display: none; }
/* [menux] a zárókép mögött a lezárt meccs kimerevített, elmosott, sötétített képe (main.js endStill) – az új meccs nem látszik át */
#endStill { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; background: var(--bg); }
#endStill.on { display: block; }
#hud:has(#endScreen[hidden]) #endStill { display: none; }
#endScreen.has-hold .end-box.es { padding-bottom: 28px; }
@media (max-width: 760px) {
  #endScreen .end-hold .eh-in { flex-wrap: wrap; }
  #endScreen .end-hold .eh-t { flex-basis: 100%; white-space: normal; }
  #endScreen .end-hold .eh-act { flex: 1 1 100%; }
  #endScreen .end-hold .eh-act .btn { flex: 1 1 0; justify-content: center; padding: 0 10px; }
  #endScreen { scroll-padding-bottom: 120px; }
}
/* [testfix] telefon (≤ 480 px, pl. 360×640): a Meccsfilm + Kilépés + Tovább egy sorban nem fért el – a Tovább kilógott a képből.
   A fő gomb (Tovább / Maradok) saját, teljes szélességű sort kap felül, a többi alatta osztozik egy soron, a feliratok nem tolják szét */
@media (max-width: 480px) {
  #endScreen .end-hold .eh-act { flex-wrap: wrap; gap: 8px; }
  #endScreen .end-hold .eh-act .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #endScreen .end-hold .eh-act #endGo, #endScreen .end-hold .eh-act #endStay { flex-basis: 100%; order: -1; }
}

/* ---------- [skillux] skillek: alap → jelenleg (nincs maximum), elkölthető pontok jelzése ---------- */
/* a típus-sáv a KERETHEZ mér: a teljes sáv = keret, a fehér = kiosztva */
.capbar { background: rgba(255, 255, 255, .16); } .capbar.z { background: var(--fill-2); }
/* skill-kártya: − | hatás | + */
.sk-ctl .sk-eff { display: grid; gap: 6px; align-content: center; min-height: 48px; min-width: 0; }
.sk-ctl .eff-i { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--fs-sm); line-height: 1.35; }
.sk-ctl .eff-i > small { flex: 0 0 auto; min-width: 74px; color: var(--muted); }
.eff-b { color: var(--dim); font-variant-numeric: tabular-nums; }
.eff-c { color: var(--muted); } .eff-c b { color: var(--ink); font-weight: 700; font-size: var(--fs-md); }
.sk-ctl .eff-i > i { color: var(--dim); }
.sk-ctl .eff-i em { font-style: normal; font-size: var(--fs-xs); color: var(--dim); margin-left: 4px; }
/* ahová most tehető pont: a kártya kicsit világosabb kerete, a + gomb kitöltött (fehér) */
.sk.can { border-color: var(--line-2); }
.sk-btn.add.hot { background: var(--paper); color: var(--on-paper); box-shadow: none; }
.sk-btn.add.hot:hover:not([disabled]) { background: #fff; }
/* a típus-listában: kis „+” jel a számláló előtt (a régi pötty helyett) */
.skx-item.can .skx-n::after { content: none; }
.skx-plus { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; border-radius: 50%; background: var(--paper); color: var(--on-paper); }
.skx-plus .ic { width: 11px; height: 11px; stroke-width: 3; }
/* főmenü / al-lap jelvény: finom pulzálás, amíg van elkölthető pont */
.tab-badge.hot { position: relative; }
.tab-badge.hot::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(245, 246, 248, .55); animation: skCue 2.4s var(--ease-out, ease-out) infinite; pointer-events: none; }
@keyframes skCue { 0% { box-shadow: 0 0 0 0 rgba(245, 246, 248, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(245, 246, 248, 0); } }
/* lobbi profil-kártya: jelvény az avatar sarkán */
.me-av { position: relative; }
.sk-cue.sk-mini { position: absolute; top: -5px; right: -9px; display: inline-flex; align-items: center; gap: 1px; height: 17px; padding: 0 5px 0 3px; border-radius: var(--r-pill); background: var(--paper); color: var(--on-paper); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--chrome, #0B0C0F); }
.sk-cue.sk-mini .ic { width: 10px; height: 10px; stroke-width: 3; }
.sk-cue.sk-mini::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: skCue 2.4s ease-out infinite; pointer-events: none; }
/* saját profil (oldalpanel): egy sor az XP-sáv alatt */
.sk-cue.pp-cue { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 0; padding: 10px 14px; border-radius: var(--r); background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--fs-sm); transition: background var(--dur-1); }
.sk-cue.pp-cue[hidden] { display: none; }
.sk-cue.pp-cue:hover { background: var(--fill-3); }
.sk-cue.pp-cue:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sk-cue.pp-cue .ic { display: grid; place-items: center; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--paper); color: var(--on-paper); stroke-width: 3; }
.sk-cue.pp-cue b { font-weight: 700; } .sk-cue.pp-cue span { color: var(--muted); margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .tab-badge.hot::after, .sk-cue.sk-mini::after { animation: none; } }
@media (max-width: 560px) { .sk-ctl .eff-i > small { min-width: 0; flex-basis: 100%; } }

/* [balance] kezdő → mester ív a skill-kártyán (a hatás görbéje szerint; a maximum száma nem látszik) */
.sk-arc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 2px 0 0; }
.sk-arc > small { font-size: var(--fs-xs); color: var(--dim); letter-spacing: .02em; }
.sk-arc-b { position: relative; display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sk-arc-b i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform-origin: 0 50%; transition: transform var(--dur-3) var(--ease-out); }
.sk-arc-b .use { background: var(--paper); }
.sk-arc-b .pend { background: rgba(255, 255, 255, .5); }
.sk-arc-b .pend.rem { background: repeating-linear-gradient(90deg, rgba(255, 90, 90, .7) 0 3px, transparent 3px 6px); }
@media (prefers-reduced-motion: reduce) { .sk-arc-b i { transition: none; } }
/* [lgfix] lezárt bajnoki meccs: „Bajnoki eredmény rögzítve · Hazai 5 : 3 Vendég” a zárókép fejléce alatt */
.es-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 14px 0 0; padding: 10px 14px; border-radius: var(--r); background: var(--fill-2); color: var(--ink); font-size: var(--fs-md, 14px); }
.es-lg svg { width: 18px; height: 18px; color: var(--light); flex: none; }
.es-lg b { font-weight: 700; } .es-lg span { color: var(--muted); font-variant-numeric: tabular-nums; }
.end-hold.lg .eh-t { color: var(--ink); }