/* =====================================================================================
   HALA SHOOTER – UX-RÉTEG (agent/ux2): koherencia, tömörség, közös mozgás, értesítés-helyek, saját egérmutató
   A menu.css UTÁN töltődik; csak felülír és kiegészít.

   JELENTÉS-RENDSZER (ugyanaz az elem, szín, ikon mindenhol ugyanazt jelenti):
   • fehér kitöltött jelvény (.tab-badge)   = teendő vár rád (pl. szabad skillpont)
   • halvány szám a menügombon (.sn-n)      = állapot, nincs teendő (2/3, 14/75, 24)
   • arany + érme-ikon                      = Flóra-pont (pénz); érem-ikon arannyal = meccs-érem
   • zöld / piros                           = jó / rossz állapot vagy változás (győzelem/vereség, ▲/▼, kész)
   • rózsa / kék                            = KIZÁRÓLAG a két csapat
   • pötty + név (.tier-chip, .lb-tier)     = besorolás (a szintből), a besorolás színével
   • színes szöveg (.rank-badge)            = rang (az Élő-pontszámból), a rang színével
   • bronz / ezüst / arany pötty            = achievement-fokozat
   • csillag                                = „legjobb” (MVP, egyéni rekord)
   MOZGÁS: --mo-1 140 ms (mikró: rámutatás, nyomás) · --mo-2 220 ms (beúszás, panel) · --mo-3 360 ms (lap, felfedés) ·
   --mo-4 650 ms (számlálás); görbék: --ease-out (be), --ease-in (ki), --ease-pop (pecsét). Csak transform / opacity.
   ===================================================================================== */
:root {
  --mo-1: 140ms; --mo-2: 220ms; --mo-3: 360ms; --mo-4: 650ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.7, 0, .84, 0); --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: var(--mo-1); --dur-2: var(--mo-2); --dur-3: var(--mo-2); --dur-4: var(--mo-3);
  --pos: var(--acc); --neg: var(--bad);
  /* saját egérmutató: a --cur-* változók a cursors.css-ben (GENERÁLT: tools/cursors.mjs, [cursor2]); változat: html[data-cur] A | B | C | sys */
}

/* ---------- egérmutató: a menükben mindenhol; játék közben (zárolt egér) a böngésző elrejti ---------- */
html, body { cursor: var(--cur-def); }
:where(button, [role="button"], [role="tab"], a[href], summary, select, .btn, .cta, .ib, .chip[data-lmid], .shop-card, .mrow[data-mid], tr[data-id], tr[data-pid], .mk-card.lic, .hl-tile, .rpl-chip, .rpl-hl, .lo-set, .ars-w, .ars-s, .st-row, label.inline, input[type="checkbox"], input[type="range"], input[type="color"], .es-more-btn, #nqMajor .nq, .sp-ib, #meCard, #clickToPlay) { cursor: var(--cur-ptr) !important; }
:where(:is(button, .btn, .shop-card, .sk-btn, .es-more-btn)[disabled], [aria-disabled="true"], .shop-card.locked) { cursor: var(--cur-no) !important; }
:where(input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="password"], textarea, [contenteditable="true"]) { cursor: var(--cur-txt) !important; }
:where([aria-busy="true"]) { cursor: var(--cur-wait) !important; }   /* [cursor2] */
.rpl .rpl-stage, .nr-pk[draggable="true"] { cursor: var(--cur-grab) !important; } .rpl .rpl-stage:active, .nr-pk[draggable="true"]:active { cursor: var(--cur-grabbing) !important; }
/* [cursor2] kattintás-visszajelzés: finom gyűrű-pulzus a mutatóhoz illő formában (A: narancs kör, B: narancs négyzet-keret, C / Rendszer: fehér kör) */
.cur-ring { position: fixed; left: 0; top: 0; z-index: 9999; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 1.5px solid var(--light, #F3A25B);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; will-change: transform, opacity; }
:root[data-cur="B"] .cur-ring { border-radius: 2px; }
:root[data-cur="C"] .cur-ring, :root[data-cur="sys"] .cur-ring { border-color: #fff; border-width: 2px; }
@media (forced-colors: active) { html, body, :is(button, a[href], select, .btn) { cursor: auto !important; } .cur-ring { display: none; } }

/* ---------- főmenü: csúszó jelző (egy elem, transform) a gombonkénti aláhúzás helyett ---------- */
#lobby .tabs { position: relative; }
#lobby .tabs button::after { display: none; }
.tab-ind { position: absolute; left: 0; bottom: -1px; width: 100px; height: 2px; border-radius: 2px; background: #fff; transform-origin: 0 50%; opacity: 0; pointer-events: none;
  transition: transform var(--mo-3) var(--ease-out), opacity var(--mo-1); }

/* ---------- lap-fejléc: hol vagyok (menüpont / al-lap) – egy sor ---------- */
/* (reskin) B · Műszak: kis mono morzsa a nagy, keskeny display-cím fölött; jobbra a lap egyetlen kulcsadata */
.ph { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px; min-height: 40px; max-width: var(--m-max); margin: 4px 0 22px; }
.ph:empty { display: none; }
.ph-crumb { grid-column: 1; grid-row: 1; display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 16px; font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ph-crumb i { font-style: normal; color: var(--dim); }
.ph-t { grid-column: 1; margin: 0; font-family: var(--f-disp); font-weight: 900; font-size: clamp(48px, 5.6vw, 96px); line-height: .84; letter-spacing: 0; text-transform: uppercase; color: var(--ink); animation: phIn var(--t-in) var(--ease-film) both; }
@keyframes phIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
.ph-aside { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-left: auto; display: inline-flex; align-items: baseline; gap: 10px; }
.ph-k { font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ph-fp { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-disp); font-weight: 900; font-size: 44px; line-height: .9; letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.ph-fp .ic { width: 24px; height: 24px; color: var(--light); }
.ph-pos { font-family: var(--f-disp); font-weight: 900; font-size: 44px; line-height: .9; letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* a lapok saját régi címsora helyett a fejléc (a régi elemek és azonosítók megmaradnak) */
#lobby .tab-page[data-page="lb"] > .page-top, #settingsPage > .page-top { display: none; }

/* ---------- változás-jelző: ▲ / ▼ szám (zöld / piros) – mindenhol ugyanígy ---------- */
.dlt { display: inline-flex; align-items: center; gap: 2px; font-family: var(--f-mono); font-size: var(--fs-sm); font-weight: 600; font-style: normal; color: var(--muted); white-space: nowrap; }
.dlt .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.dlt.up { color: var(--pos); } .dlt.down { color: var(--neg); }
.dlt:empty { display: none; }

/* ---------- lapváltás: az új lap a lépés irányából úszik be (transform + opacity); al-lapok ugyanígy ---------- */
#lobby .tab-page:not([hidden]) { animation: pgIn var(--mo-3) var(--ease-out) both; }
#lobby .lobby-body[data-dir="l"] .tab-page:not([hidden]) { animation-name: pgInL; }
#progPage > .pg-sub:not([hidden]), #settingsPage > .st-sub:not([hidden]) { animation: subIn var(--mo-2) var(--ease-out) both; }
@keyframes pgIn { from { opacity: 0; transform: translate3d(14px, 0, 0); } }
@keyframes pgInL { from { opacity: 0; transform: translate3d(-14px, 0, 0); } }
@keyframes subIn { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
/* kártyák, gombok: egységes nyomás-visszajelzés */
:is(.cta, .mrow[data-mid], .hl-tile, .mk-card.lic, .lo-set):active { transform: scale(.985); }
.mrow[data-mid], .hl-tile, .mk-card.lic, .lo-set { transition: transform var(--mo-1) var(--ease-out), background var(--mo-1), border-color var(--mo-1), box-shadow var(--mo-1); }

/* ---------- koherencia: győzelem / vereség = zöld / piros (a rózsa / kék csak csapat); jegy D = piros ---------- */
/* (reskin) az eredmény-cím törtfehér (győzelem) / halványabb (vereség) – nincs zöld / piros felirat; a jelentést a szó hordozza */
.es .end-title.win, .end-title.win { color: var(--ink); }
.es .end-title.lose, .end-title.lose { color: var(--ink-2); }
.md-head.w .md-res { color: var(--pos); } .md-head.l .md-res { color: var(--neg); }
.m-res.l, .down { color: var(--neg); }
.g-D { --gc: var(--neg); }
.es.win::before { background: radial-gradient(70% 100% at 20% 0, rgba(243, 162, 91, .12), transparent 70%); }
.es.lose::before { background: none; }
/* szint: semleges szám (a zöld állapotot jelent, nem szintet) */
.lv-chip { color: var(--ink-2); background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--line); }
/* FP-egyenleg a felső sávban: érme-ikon + szám; számláláskor felnagyul (motion.js pop) */
.fp-badge { gap: 6px; transform-origin: 50% 50%; }
.fp-badge .ic { width: 15px; height: 15px; }
.fp-badge b { font-weight: 700; }
.fp-badge.counting.gain { box-shadow: 0 0 0 1px rgba(243, 162, 91, .55), 0 0 18px rgba(243, 162, 91, .25); }
.fp-badge.counting.loss { color: var(--neg); background: rgba(255, 90, 90, .12); }

/* ---------- al-menü: halvány állapot-szám (nem teendő) ---------- */
.sn-n { margin-left: 2px; font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 500; color: var(--dim); font-variant-numeric: tabular-nums; }
.sn-n:empty { display: none; }
.subnav button[aria-selected="true"] .sn-n { color: var(--muted); }
.subnav button { transition: color var(--mo-1), background var(--mo-2) var(--ease-out), box-shadow var(--mo-2); }

/* ---------- Fejlődés: egy soros fej (szint · név · XP · következő besorolás) ---------- */
#progHead .pg-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-bottom: 16px; padding: 14px 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.lvl-ring.sm { width: 56px; height: 56px; }
.lvl-ring.sm::before { inset: 4px; }
.lvl-ring.sm b { font-size: 22px; letter-spacing: -.04em; }
.pgs-main { display: grid; gap: 8px; min-width: 0; }
.pgs-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pgs-name { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.015em; }
.pgs-main .xp { max-width: 640px; }
.pgs-main .pg-title select { height: 26px; }
.pgs-next { display: grid; justify-items: end; gap: 2px; text-align: right; }
.pgs-next small { font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pgs-next b { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-md); }
.pgs-next b i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.pgs-next .mono { font-size: var(--fs-sm); color: var(--ink-2); }

#pgStats .tiles.st-key { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { #pgStats .tiles.st-key { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- „Mind” – a lista első része látszik, a többi kérésre ---------- */
.ach-more[data-more="0"] > :nth-child(n + 9) { display: none; }
.mw-grid.ach-more[data-more="0"] > .mw.unused { display: none; }
.more-btn { margin-top: 10px; }
.more-btn .ic { transition: transform var(--mo-2) var(--ease-out); }
.more-btn.on .ic { transform: rotate(180deg); }
.more-btn.on span::after { content: " – kevesebb"; }
.md-fold, details.more-tiles { margin-top: 16px; }
details.more-tiles { padding: 0; }
details.more-tiles > summary { min-height: 40px; padding: 0 4px; color: var(--muted); font-size: var(--fs-sm); }
details.more-tiles > .tiles { margin: 0 0 4px; }
.md-fold summary .hint { margin-left: 6px; font-family: var(--f-mono); font-size: var(--fs-xs); }
.ach-grid .achc-id small { white-space: nowrap; }

/* ---------- Játék: induló fegyverek – összefoglaló; a választó a „Módosítás” mögött ---------- */
.loadout-panel .card-head { margin-bottom: 10px; }
.lo-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lo-w { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r); background: var(--card-2); border: 1px solid var(--line); min-width: 0; }
.lo-w img { width: 100%; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.lo-w > span { display: grid; gap: 1px; min-width: 0; }
.lo-w small { font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.lo-w b { font-weight: 600; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-w em { font-style: normal; font-size: var(--fs-xs); color: var(--muted); } .lo-w em.warn { color: var(--warn); }
#loPresets { margin-top: 12px; }
#loPresets .lo-sets[role="tablist"] { margin-bottom: 0; }
.loadout-panel.open .lo-sum { display: none; }
.play { grid-template-columns: minmax(0, 1fr) minmax(360px, 30%); }
.loadout-panel.open { grid-column: 1 / -1; }
@media (min-width: 1101px) { .play:has(.loadout-panel.open) { grid-template-columns: minmax(0, 1fr) minmax(420px, 44%); } .loadout-panel.open { grid-column: auto; } }

/* ---------- Piactér: licenc-kártya – a „-tól” ár látszik, a futamidők rámutatásra / fókuszra / érintésre ---------- */
.mk-card.lic .mk-lt { display: none; }
.mk-card.lic:is(:hover, :focus-within, .open) .mk-lt { display: grid; animation: subIn var(--mo-2) var(--ease-out) both; }
.mk-card.lic:is(:hover, :focus-within, .open) .mk-from { display: none; }
.mk-from { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.mk-from small { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mk-from b { font-weight: 700; font-size: var(--fs-md); color: var(--gold); }
.mk-card.lic { display: flex; flex-direction: column; min-height: 248px; outline: none; }
.mk-card.lic:focus-visible { box-shadow: 0 0 0 2px #fff; }
#marketPage .sec-head h3 .ic { width: 13px; height: 13px; opacity: .7; }

@media (max-width: 960px) { table.lb-main :is(th, td):nth-child(3), table.lb-main :is(th, td):nth-child(4) { display: table-cell; } }
/* ---------- Ranglista: kevesebb oszlop; a besorolás pötty + szint a név előtt ---------- */
.lb-tier { display: inline-grid; place-items: center; min-width: 26px; height: 20px; margin-right: 10px; padding: 0 6px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--ink-2);
  background: color-mix(in srgb, var(--tc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent); vertical-align: 1px; }
table.lb-main .lb-main-n { font-weight: 700; color: var(--ink); }
table.lb-main td .dlt { margin-left: 8px; }
table.lb-main th:nth-child(2), table.lb-main td:nth-child(2) { width: 46%; }

/* ---------- highlightok: nagy, lejátszható csempék (a fajta ikonjával) – a Meccsek lap és a meccs-részletek fő eleme ---------- */
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.hl-grid.sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.hl-tile { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; min-height: 128px; padding: 14px 16px; border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0, rgba(255, 255, 255, .07), transparent 60%), var(--card-2); border: 1px solid var(--line-2); color: var(--ink); }
.hl-tile.sm { min-height: 96px; padding: 12px; }
.hl-tile:hover { border-color: var(--line-3); background: radial-gradient(120% 90% at 100% 0, rgba(255, 255, 255, .11), transparent 60%), var(--card-3); }
.hl-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hl-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--fill-2); color: var(--ink); }
.hl-ic .ic { width: 20px; height: 20px; }
.hl-tile.sm .hl-ic { width: 32px; height: 32px; } .hl-tile.sm .hl-ic .ic { width: 17px; height: 17px; }
.hl-play { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); color: var(--on-paper);
  opacity: .0; transform: scale(.85); transition: opacity var(--mo-1), transform var(--mo-2) var(--ease-pop); }
.hl-play .ic { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; }
.hl-tile:hover .hl-play, .hl-tile:focus-visible .hl-play { opacity: 1; transform: none; }
.hl-tile b { align-self: end; font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.015em; line-height: 1.2; }
.hl-tile.sm b { font-size: var(--fs-md); }
.hl-tile small { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-tile small span { font-family: var(--f-mono); }
.hl-sec { margin: 4px 0 18px; }
.hl-full { margin-top: 10px; }
.hl-strip { margin-bottom: 22px; }
.hl-strip .sec-head { margin-top: 0; }
.hl-strip .sec-head h3 .ic { width: 14px; height: 14px; }
@media (hover: none) { .hl-play { opacity: 1; transform: none; } }
/* az oldalpanelben 2 oszlop */
.sp .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* meccs-lista: a highlight-jel ikonnal */
.m-rp b { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-2); }
.m-rp b .ic { width: 12px; height: 12px; }
/* idővonal: kulcspillanatok a sáv fölött */
.tl.has-km { padding-top: 6px; }
.tl-kms { position: relative; height: 24px; margin: 0 6px; }
.tl-km { position: absolute; top: 0; display: grid; place-items: center; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--card-3); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-style: normal; }
.tl-km .ic { width: 13px; height: 13px; }
.tl-km::after { content: ""; position: absolute; left: 50%; top: 22px; width: 1px; height: 14px; background: var(--line-3); }
/* visszajátszás-lista (replay/index.js): a fajta ikonja az emoji helyett */
.rpl-chip .hl-ic { width: 18px; height: 18px; background: none; color: inherit; } .rpl-chip .hl-ic .ic { width: 14px; height: 14px; }
.rpl-chips.hl-grid { display: grid; }
/* visszajátszás-felület: kulcspillanat-jel a sáv fölött; a játékoslista csíkja helyett halvány árnyalat */
.rpl-tl-marks .hl .hl-f { position: absolute; left: 0; top: -22px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--chrome); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
.rpl-tl-marks .hl .hl-f .ic { width: 11px; height: 11px; }
.rpl-hl .ic { color: var(--ink); }
.rpl-pl { border-left: 0; background: color-mix(in srgb, var(--c) 10%, transparent); }

/* ---------- oldalpanel: morzsa a címsorban; a hajtás alatti szakaszok csak láthatóvá válva rendeződnek (gyorsabb kitöltés) ---------- */
.sp .pp-sec { content-visibility: auto; contain-intrinsic-size: auto 260px; }
.sp-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.sp-t .sp-crumb { color: var(--dim); } .sp-t i { font-style: normal; color: var(--dim); }

/* =====================================================================================
   ZÁRÓKÉP: sorban felfedés (.rv → .rv.in), egyszerre egy dolog mozog; átugrás: .es.skip
   ===================================================================================== */
.es .rv { animation: none; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity var(--mo-3) var(--ease-out), transform var(--mo-3) var(--ease-out); }
.es .rv.stamp { transform: scale(1.3); transition-timing-function: var(--ease-out), var(--ease-pop); }
.es .rv.in { opacity: 1; transform: none; }
.es.skip .rv, .es.skip .es-chip, .es.skip .es-bar i { transition: none !important; animation: none !important; }
.es-skip { position: absolute; right: var(--m-gutter); top: 18px; margin: 0; font-size: var(--fs-xs); color: var(--dim); opacity: 1; transition: opacity var(--mo-2); pointer-events: none; }
.es-skip kbd { height: 18px; padding: 0 5px; font-size: 10px; }
.es.done .es-skip { opacity: 0; }
#endScreen .end-box.es { position: relative; }
.es-head { gap: 24px; }
.es-rt em.dlt { margin-top: 2px; }
/* jutalmak: XP · Élő a következő rangig · FP-egyenleg */
.es-rew { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
.es-rt-i > small { display: inline-flex; align-items: center; gap: 6px; }
.es-rt-i > small .ic { width: 14px; height: 14px; color: var(--muted); }
.es-elo b { display: inline-flex; align-items: baseline; gap: 10px; }
.es-elo b .dlt { font-size: var(--fs-md); }
.es-next { display: grid; gap: 6px; margin-top: 6px; }
.es-next small { font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0; text-transform: none; }
.es-bar.sm { height: 4px; }
.es-bar.sm i { transition: none; background: var(--ink-2); }
.es-fp .ic { color: var(--gold) !important; }
.es-fp .es-bal { display: inline-block; transform-origin: 0 60%; color: var(--gold); }
.es-gain { justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-sm); color: var(--gold); background: var(--gold-t); }
.es-fp.counting { border-color: rgba(243, 162, 91, .45); }
/* kártyák: egyenként, a jelentés színével (ugyanaz, mint az értesítésben) */
.es-md { min-height: 0; }
.es-chip { --nc: var(--ink); --ic: var(--nc); }
.es-chip.t-gold { --nc: var(--gold); } .es-chip.t-ok { --nc: var(--pos); } .es-chip.t-warn { --nc: var(--warn); } .es-chip.t-bad { --nc: var(--neg); } .es-chip.t-ink { --nc: var(--ink); }
.es-chip { background: color-mix(in srgb, var(--nc) 6%, var(--card)); border-color: color-mix(in srgb, var(--nc) 22%, var(--line)); }
.es-chip.t-ink { background: var(--card); border-color: var(--line-2); }
.es-chip.pop { animation: chipIn var(--mo-3) var(--ease-pop) both; }
.es-chip .es-ico { color: var(--nc); background: color-mix(in srgb, var(--nc) 14%, transparent); }
@keyframes chipIn { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.86); } }
/* fő számok: átlag-összevetés, rekord-jel */
.es-st { position: relative; }
.es-st .dlt { margin-top: 2px; }
.pb-tag { display: none; position: absolute; right: 12px; top: 12px; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-paper); background: var(--paper); }
.pb-tag .ic { width: 11px; height: 11px; }
.es-st.pb .pb-tag { display: inline-flex; animation: chipIn var(--mo-3) var(--ease-pop) both; }
.es-more .es-best { grid-column: 1 / -1; padding: 12px 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
#esSkl:empty { display: none; } #esSkl { grid-column: 1 / -1; }

/* =====================================================================================
   ÉRTESÍTÉS-HELYEK (notify.js) – a helytérkép a notify.js fejében
   ===================================================================================== */
/* lobbi: jobb alsó dokk – lent a nagy elem (egyszerre egy), fölötte a kicsik (torlódhatnak) */
#nqDock { position: fixed; right: var(--m-gutter); bottom: 16px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
body:has(#lobby[hidden]) #nqDock { display: none; }
@media (max-width: 1279px) { #nqDock { bottom: 76px; } }   /* keskenyebb képernyőn a #toast (lent középen) fölött */
#nqMajor { display: grid; justify-items: end; width: 100%; }
#nqMajor:empty { display: none; }
.nq { --nc: var(--ink); display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; pointer-events: auto; }
.nq.t-gold { --nc: var(--gold); } .nq.t-ok { --nc: var(--pos); } .nq.t-warn { --nc: var(--warn); } .nq.t-bad { --nc: var(--neg); }
.nq-l { padding: 12px 18px 12px 12px; border-radius: var(--r-lg); background: var(--card-2, #131315); border: 1px solid color-mix(in srgb, var(--nc) 30%, var(--line-2)); box-shadow: var(--e3); }
.nq-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--nc); background: color-mix(in srgb, var(--nc) 15%, transparent); }
.nq-ic .ic { width: 21px; height: 21px; }
.nq-tx { display: grid; gap: 2px; min-width: 0; }
.nq-tx b { font-weight: 700; font-size: var(--fs-md); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nq-tx small { font-size: var(--fs-sm); color: var(--muted); line-height: 1.35; }
#nqMinor { display: grid; gap: 6px; justify-items: end; }
.nq-mi { --nc: var(--ink); display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--card-2, #131315); box-shadow: inset 0 0 0 1px var(--line-2), var(--e2); font-size: var(--fs-sm); }
.nq-mi.t-gold { --nc: var(--gold); } .nq-mi.t-bad { --nc: var(--neg); }
.nq-mi .ic { width: 15px; height: 15px; color: var(--nc); } .nq-mi b { font-weight: 700; color: var(--nc); font-variant-numeric: tabular-nums; }
/* játék közben: középen, a kill-sáv alatt (50% + 116 px), egyszerre egy, rövid – a célkereszt, a killfeed, az eredményjelző szabad */
#nqGame { position: absolute; left: 50%; top: calc(50% + 116px); transform: translateX(-50%); z-index: 4; display: grid; justify-items: center; pointer-events: none; }
#hud:has(#scoreboard:not([hidden])) #nqGame, #hud:has(#death:not([hidden])) #nqGame, #hud:has(#specBar:not([hidden])) #nqGame /* [integrate8] nézői sáv, killcam */, #hud:has(#menu:not([hidden])) #nqGame, #hud:has(#endScreen:not([hidden])) #nqGame { visibility: hidden; }
.nq-g { height: 30px; padding: 0 14px 0 6px; gap: 8px; border-radius: var(--r-pill); background: rgba(14, 16, 21, .86); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nc) 40%, transparent); }
.nq-g .nq-ic { width: 22px; height: 22px; } .nq-g .nq-ic .ic { width: 14px; height: 14px; }
.nq-g .nq-tx b { font-size: 13px; letter-spacing: .01em; }
/* a régi élő érem-réteg (#medalPop) és a régi értesítés-verem (#achToasts) helyett a fenti helyek */
#medalPop, #achToasts { display: none !important; }

/* ---------- reszponzív ---------- */
@media (max-width: 1500px) { .es-rew { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .es-rew .es-xp { grid-column: 1 / -1; } }
@media (max-width: 1100px) {
  .play { grid-template-columns: minmax(0, 1fr); }
  #progHead .pg-strip { grid-template-columns: auto minmax(0, 1fr); }
  .pgs-next { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; text-align: left; }
}
@media (max-width: 760px) {
  .ph { margin-bottom: 14px; min-height: 32px; }
  .ph-crumb { font-size: 11px; } .ph-t { font-size: 44px; }
  .ph-fp, .ph-pos { font-size: 28px; } .ph-k { display: none; }
  #progHead .pg-strip { padding: 12px; gap: 12px; }
  .lvl-ring.sm { width: 48px; height: 48px; } .lvl-ring.sm b { font-size: 19px; }
  .pgs-main .pg-title { display: none; }
  .subnav button span:not(.tab-badge) { display: none; }
  .subnav button[aria-selected="true"] span:not(.tab-badge) { display: inline; }
  .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-tile { min-height: 108px; padding: 12px; }
  .lo-w img { height: 48px; }
  table.lb-main :is(th, td):nth-child(4), table.lb-main :is(th, td):nth-child(6) { display: none !important; }
  #marketPage .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #marketPage .mk-card { padding: 10px; } #marketPage .mk-card img { height: 56px; } #marketPage .mk-t b { font-size: 13px; }
  .mk-from { flex-direction: column; align-items: flex-start; gap: 0; }
  .hl-strip .hl-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--m-gutter)); padding: 0 var(--m-gutter); }
  .hl-strip .hl-grid::-webkit-scrollbar { display: none; }
  .hl-strip .hl-tile { flex: 0 0 42%; scroll-snap-align: start; }
  .lb-tier { margin-right: 6px; }
  .es-rew { grid-template-columns: minmax(0, 1fr); }
  #nqDock { left: 16px; right: 16px; width: auto; bottom: 76px; } #nqMajor { justify-items: stretch; }
  .es-skip { display: none; }
  .mk-card.lic { min-height: 0; }
  .loadout-panel .pg-title select { max-width: 100%; min-width: 0; }
  .loadout-panel .lo-sets { flex-wrap: wrap; }
  .loadout-panel .lo-sets .pg-title { max-width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #lobby .tab-page:not([hidden]), #progPage > .pg-sub:not([hidden]), #settingsPage > .st-sub:not([hidden]), .ph-t, .es-chip.pop, .mk-card.lic .mk-lt { animation: none !important; }
  .tab-ind, .hl-play, .more-btn .ic { transition: none; }
  .es .rv { transition: none; opacity: 1; transform: none; }
}