/* =====================================================================================
   HALA SHOOTER – PANEL-MOZGÁS ÉS KÖR-ÁTMENET (agent/uianim)
   Az ux.css UTÁN töltődik. A be- / kilépést a js/anim.js (UI.show / UI.hide) végzi Web Animations-szel; ezért a kezelt
   panelek régi, CSS-ből induló belépő animációi itt kikapcsolnak (különben kétszer úsznának be).
   TOKENEK (a js/anim.js T-jének párja):
     --ua-in 200ms (belépés) · --ua-out 150ms (kilépés, gyorsabb) · --ua-row 220ms (sor) · --ua-stagger 16ms (sorok közti lépcső)
     --ua-ease-in: a motion.js EASE.out (gyors indulás, lágy megállás) · --ua-ease-out: gyorsuló kilépés
   Csak opacity + egyedi translate / scale (a panelek saját transform-ja – pl. translateX(-50%) – érintetlen).
   ===================================================================================== */
:root { --ua-in: 200ms; --ua-out: 160ms; --ua-row: 220ms; --ua-stagger: 16ms; --ua-ease-in: cubic-bezier(.16, 1, .3, 1); --ua-ease-out: cubic-bezier(.4, 0, 1, 1); }

/* ---------- a JS-ből animált panelek: a régi CSS-belépés ki ---------- */
#scoreboard, #shop .shop-box, #menu .menu-box, .menu-box, .ctp-box, #death, .nr-overlay, .nr-dlg.in, .rpl-list, #bigMap { animation: none; }

/* ---------- csökkentett mód (Beállítások → Animációk: Csökkentett): a CSS-mozgások is rövid áttűnések ---------- */
:root[data-anim="reduced"] *, :root[data-anim="reduced"] *::before, :root[data-anim="reduced"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 90ms !important; }
:root[data-anim="reduced"] :is(.nr-spin) { animation-duration: .8s !important; animation-iteration-count: infinite !important; }

/* =====================================================================================
   KÖR-ÁTMENET (#rtx, js/transition.js) – [menux] B · Műszak: KÁRTYA (nem takar) és TÁBLA (takar: belépés, félidő)
   ===================================================================================== */
#rtx { position: fixed; inset: 0; z-index: 55; overflow: hidden; pointer-events: none; contain: strict; color: var(--paper); }
#rtx[hidden] { display: none; }
#rtx * { pointer-events: none; }
.rtx-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 0 24px; text-align: center; }
.rtx-in > [hidden] { display: none !important; }
.rtx-kick { display: inline-flex; align-items: baseline; gap: .7em; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--light); }
.rtx-kick b { font-weight: 500; color: var(--light); } .rtx-kick span { color: rgba(245, 242, 236, .72); } .rtx-kick i { font-style: normal; color: rgba(245, 242, 236, .35); }
.rtx-title { font-family: var(--f-disp); font-weight: 900; font-size: clamp(64px, 10.5vw, 176px); line-height: .86; padding: .2em 0 .06em; letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap; clip-path: inset(0 -1em); }   /* [rtxfix] padding: az ékezetek (KÖR) ne lógjanak a felső sorra (a TÁBLA-módban is); clip-path: a kis sorköz miatt a betűk sor-doboza túllógott a fölötte / alatta lévő sorra (az elementFromPoint ott a címet adta) – a doboz szélén vágva (a betűk benne vannak) */
.rtx-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; font-family: var(--f-body); font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--bg); background: var(--paper); }
.rtx-score { display: inline-flex; align-items: center; gap: 14px; margin-top: 4px; font-family: var(--f-disp); }
.rtx-n { min-width: 1ch; font-weight: 900; font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; color: rgba(245, 242, 236, .6); }   /* [rtxfix] .45 → .6: a másik csapat pontja is olvasható */
.rtx-score[data-mine=""] .rtx-n, .rtx-score[data-mine="0"] .rtx-n.a, .rtx-score[data-mine="1"] .rtx-n.b { color: var(--paper); }
.rtx-colon { font-style: normal; font-weight: 700; font-size: 34px; color: rgba(245, 242, 236, .5); transform: translateY(-2px); }
.rtx-tn { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--f-body); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 242, 236, .66); }
.rtx-emb { flex: none; display: inline-grid; width: 30px; height: 30px; font-style: normal; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5)); }
.rtx-emb svg { width: 100%; height: 100%; }
.rtx-sub i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.rtx-sub { display: inline-flex; align-items: center; gap: 10px; margin-top: 2px; font-family: var(--f-body); font-weight: 600; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper); }
.rtx-prev { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; max-width: min(760px, 92vw); margin-top: 6px; font-family: var(--f-body); font-size: 13px; color: rgba(245, 242, 236, .8); }
.rtx-prev .pk { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(245, 242, 236, .62); }
.rtx-prev b { font-weight: 700; }
.rtx-prev .mvp em { margin-right: 6px; padding: 1px 6px; border-radius: 3px; font-style: normal; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--bg); background: var(--light); }
.rtx-shade, .rtx-bars, .rtx-sweep { display: none; }

/* ---------- KÁRTYA: a játék látszik; szél-vignetta, filmes sávok, fény-pászta ---------- */
#rtx[data-mode="card"] .rtx-slab { display: none; }
#rtx[data-mode="card"] .rtx-shade { display: block; position: absolute; inset: 0; background: radial-gradient(40% 34% at 50% 52%, rgba(6, 6, 7, .66), rgba(6, 6, 7, .5) 55%, rgba(6, 6, 7, 0) 100%), radial-gradient(120% 90% at 50% 46%, rgba(6, 6, 7, 0) 30%, rgba(6, 6, 7, .5) 70%, rgba(6, 6, 7, .8) 100%); }   /* középen halk takaró a feliratok mögött (világos nappali képen is olvasható) */
#rtx[data-mode="card"] .rtx-bars { display: block; }
.rtx-bars i { position: absolute; left: 0; right: 0; height: 5.5vh; background: rgba(4, 4, 5, .82); }
.rtx-bars .t { top: 0; } .rtx-bars .b { bottom: 0; }
#rtx[data-mode="card"] .rtx-sweep { display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 34vw; margin-left: -17vw; background: linear-gradient(90deg, transparent, rgba(243, 162, 91, 0) 20%, rgba(243, 162, 91, .14) 50%, rgba(243, 162, 91, 0) 80%, transparent); }
#rtx[data-mode="card"] .rtx-in { text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }   /* kis árnyék: a nagy, elmosott árnyék a nagy betűkön képkockánként drága volt; a középső takaró adja a kontrasztot */
/* [rtxfix] a kis feliratok (óra / hely, csapatnevek, szereped, előző kör, MVP) világos nappali képen is olvashatók: telítettebb szín,
   sűrűbb (de kicsi, olcsó) árnyék – a nagy cím árnyéka marad a kicsi */
#rtx[data-mode="card"] :is(.rtx-kick, .rtx-tn, .rtx-sub, .rtx-prev) { text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .65); }
#rtx[data-mode="card"] .rtx-kick span, #rtx[data-mode="card"] .rtx-tn { color: rgba(245, 242, 236, .9); }
#rtx[data-mode="card"] .rtx-prev { color: rgba(245, 242, 236, .95); } #rtx[data-mode="card"] .rtx-prev .pk { color: rgba(245, 242, 236, .8); }

#rtx[data-mode="card"] .rtx-title { font-size: clamp(76px, 13vw, 220px); line-height: .8; padding: .2em 0 .08em; }   /* az ékezetek (KÖR) ne lógjanak a felső sorra */
/* a kártya a HUD ALATT (a #hud z-indexe 10): az óra, az állás, az életerő és a lőszer látszik; a takaró tábla fölötte marad */
#rtx[data-mode="card"] { z-index: 9; }
#rtx[data-mode="card"] .rtx-tag { background: var(--light); color: var(--bg); text-shadow: none; box-shadow: 0 0 24px rgba(243, 162, 91, .35); }
#rtx[data-mode="card"] .rtx-n { font-size: 72px; }
/* változat: c – középen (alap); l – bal alsó, szerkesztett; b – alsó sáv; w – OLDALCSERE papír-sáv */
#rtx[data-v="l"] .rtx-shade { background: radial-gradient(52% 48% at 18% 74%, rgba(6, 6, 7, .5), rgba(6, 6, 7, 0) 100%), linear-gradient(90deg, rgba(6, 6, 7, .82) 0%, rgba(6, 6, 7, .62) 34%, rgba(6, 6, 7, 0) 64%), linear-gradient(0deg, rgba(6, 6, 7, .62), rgba(6, 6, 7, 0) 50%); }
#rtx[data-v="l"] .rtx-in { place-content: end start; justify-items: start; text-align: left; padding: 0 clamp(24px, 6vw, 120px) calc(5.5vh + clamp(28px, 7vh, 80px)); }
#rtx[data-v="l"] .rtx-prev { justify-content: flex-start; }
#rtx[data-v="b"] .rtx-shade { background: linear-gradient(0deg, rgba(6, 6, 7, .9) 0%, rgba(6, 6, 7, .78) 30%, rgba(6, 6, 7, 0) 60%); }
#rtx[data-v="b"] .rtx-in { place-content: end center; padding-bottom: calc(5.5vh + clamp(18px, 4vh, 48px)); grid-template-columns: auto auto; column-gap: clamp(24px, 4vw, 64px); align-items: end; text-align: left; justify-items: start; }
#rtx[data-v="b"] .rtx-kick, #rtx[data-v="b"] .rtx-prev { grid-column: 1 / -1; }
#rtx[data-v="b"] .rtx-title { grid-row: span 3; font-size: clamp(76px, 11vw, 190px); }
#rtx[data-v="b"] .rtx-prev { justify-content: flex-start; }
#rtx[data-v="w"] .rtx-slab { display: block; position: absolute; left: -4vw; right: -4vw; top: 50%; height: min(44vh, 400px); margin-top: calc(min(44vh, 400px) / -2); width: auto; transform: skewY(-3deg); background: rgba(245, 242, 236, .96); }
#rtx[data-v="w"] .rtx-slab::before, #rtx[data-v="w"] .rtx-slab::after { display: none; }
#rtx[data-v="w"] .rtx-in, #rtx[data-v="w"] .rtx-in :is(.rtx-kick, .rtx-tn, .rtx-sub, .rtx-prev) { color: var(--bg); text-shadow: none; }
#rtx[data-v="w"] .rtx-kick b { color: #A25A14; } #rtx[data-v="w"] .rtx-kick span, #rtx[data-v="w"] .rtx-tn { color: rgba(8, 9, 11, .62); } #rtx[data-v="w"] .rtx-kick i { color: rgba(8, 9, 11, .3); }
#rtx[data-v="w"] .rtx-n { color: rgba(8, 9, 11, .45); }
#rtx[data-v="w"] .rtx-score[data-mine=""] .rtx-n, #rtx[data-v="w"] .rtx-score[data-mine="0"] .rtx-n.a, #rtx[data-v="w"] .rtx-score[data-mine="1"] .rtx-n.b { color: var(--bg); }
#rtx[data-v="w"] .rtx-colon { color: rgba(8, 9, 11, .4); } #rtx[data-v="w"] .rtx-sub { color: var(--bg); }
#rtx[data-v="w"] .rtx-tag { color: var(--paper); background: var(--bg); box-shadow: none; }
#rtx[data-v="w"] .rtx-emb { filter: none; }
#rtx[data-v="w"] .rtx-sweep { display: none; }
/* [rtxfix] amíg az átmenet látszik, a HUD középső üzenete (#centerMsg „1. kör” + #subMsg) nem fut rá a feliratokra (a kártya a HUD alatt
   van, z 9 < 10; korábban a két szöveg egymáson volt). Ha az üzenet ideje még tart, az átmenet után visszaúszik. */
.rtx-on #centerMsg, .rtx-on #subMsg { opacity: 0 !important; visibility: hidden; }
/* meccslabda / döntő kör: a vignetta a pálya fényével színezett */
#rtx[data-kind="match"][data-mode="card"] .rtx-shade { background: radial-gradient(40% 34% at 50% 52%, rgba(10, 6, 4, .68), rgba(10, 6, 4, .52) 55%, rgba(6, 6, 7, 0) 100%), radial-gradient(120% 90% at 50% 46%, rgba(6, 6, 7, 0) 28%, rgba(40, 18, 4, .5) 68%, rgba(12, 6, 2, .86) 100%); }

/* ---------- TÁBLA (takar): ferde fekete tábla (oldalcsere a félidei összefoglaló végén: fehér, a másik irányból) ---------- */
.rtx-slab { position: absolute; top: -2%; bottom: -2%; left: -20vw; width: 140vw; background: rgba(5, 5, 6, .94); transform: skewX(-11deg); }
.rtx-slab::before, .rtx-slab::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--paper); }
.rtx-slab::before { left: 0; } .rtx-slab::after { right: 0; }
#rtx[data-mode="slab"][data-kind="swap"] .rtx-slab { background: rgba(245, 242, 236, .97); }
#rtx[data-mode="slab"][data-kind="swap"] .rtx-slab::before, #rtx[data-mode="slab"][data-kind="swap"] .rtx-slab::after { background: var(--bg); }
#rtx[data-mode="slab"][data-kind="swap"] .rtx-in { color: var(--bg); }
#rtx[data-mode="slab"][data-kind="swap"] .rtx-kick, #rtx[data-mode="slab"][data-kind="swap"] .rtx-tn { color: rgba(8, 9, 11, .55); }
#rtx[data-mode="slab"][data-kind="swap"] .rtx-n { color: rgba(8, 9, 11, .4); }
#rtx[data-mode="slab"][data-kind="swap"] .rtx-score[data-mine=""] .rtx-n, #rtx[data-mode="slab"][data-kind="swap"] .rtx-score[data-mine="0"] .rtx-n.a, #rtx[data-mode="slab"][data-kind="swap"] .rtx-score[data-mine="1"] .rtx-n.b { color: var(--bg); }
#rtx[data-mode="slab"][data-kind="swap"] .rtx-colon { color: rgba(8, 9, 11, .35); }
#rtx[data-mode="slab"][data-kind="swap"] .rtx-sub { color: var(--bg); }
#rtx[data-mode="slab"][data-kind="swap"] .rtx-tag { color: var(--paper); background: var(--bg); }
#rtx[data-mode="slab"][data-kind="swap"] .rtx-emb { filter: none; }
/* töltőképernyő után: teljesen fed (a töltőképernyő színe), innen söpör ki */
#rtx[data-kind="intro"] .rtx-slab { background: var(--bg); }
/* csökkentett: nincs ferde söprés, egyszerű sötét réteg */
#rtx.red .rtx-slab { left: 0; width: 100%; transform: none; }
#rtx.red .rtx-slab::before, #rtx.red .rtx-slab::after { display: none; }
@media (max-width: 760px) {
  .rtx-title, #rtx[data-mode="card"] .rtx-title, #rtx[data-v="b"] .rtx-title { font-size: clamp(52px, 17vw, 96px); white-space: normal; }
  .rtx-n, #rtx[data-mode="card"] .rtx-n { font-size: 36px; } .rtx-tn { font-size: 10.5px; letter-spacing: .1em; } .rtx-sub { font-size: 13px; letter-spacing: .12em; }
  .rtx-tn > span { display: none; }
  #rtx[data-v="b"] .rtx-in { grid-template-columns: auto; } #rtx[data-v="b"] .rtx-title { grid-row: auto; }
  .rtx-prev { font-size: 12px; }
}