/* Ekrany CS (01.11, Michał: „zastępujemy nasz UI tym z image-gen, porównuj dokładnie układ”) — wspólne komponenty nowych widoków DOM (cs_kit.js, cs_shop.js, cs_crate.js …).
   Jednostka --u = 1 piksel makiety CS_*.webp (1672 × 941): przy oknie 16:9 każda liczba w calc(N * var(--u)) to dokładnie ta sama liczba pikseli co na makiecie (harness
   tools/cs_compare.py robi zrzut w 1672 × 941 i kładzie go obok makiety). Kolory ZMIERZONE z makiety CS_7 (PIL, 01.11): tło okna rgb(38,46,58), kafel rgb(34,38,44) → rgb(36,41,47),
   linia rgb(67,75,87), podkreślenie zakładki rgb(113,183,234), zieleń przycisku rgb(95,147,65), pole ilości rgb(25,29,34). */
:root { --u: min(calc(100vw / 1672), calc(100vh / 941)); } /* też poza .csu — przesunięcia ripowanych elementów w pikselach makiety */
.csu {
  --u: min(calc(100vw / 1672), calc(100vh / 941));
  --cs-win: rgba(34, 41, 52, .93); --cs-win-line: rgb(67, 75, 87); --cs-tile: linear-gradient(rgb(36, 40, 46), rgb(33, 38, 44)); --cs-tile-line: rgba(255, 255, 255, .07);
  --cs-text: #e8eaed; --cs-muted: #98a2ad; --cs-dim: #6d7782; --cs-blue: rgb(113, 183, 234); --cs-go: rgb(95, 147, 65); --cs-go-hi: rgb(110, 168, 76); --cs-field: rgb(25, 29, 34);
  --cs-btn: rgba(44, 51, 61, .95); --cs-btn-line: rgba(255, 255, 255, .14); --cs-gold: #f2b51c;
  position: fixed; inset: 0; z-index: 64; display: none; font-family: "Barlow Semi Condensed", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-weight: 500;
  color: var(--cs-text); user-select: none; -webkit-user-select: none; pointer-events: auto; font-size: calc(16 * var(--u));
}
.csu.on { display: block; }
/* telefon / tablet (cs_kit MOBILE → html.cs-mobile, 03.11 — Michał: „wszystko w CS2 stylu oraz mobile widoki trzeba dostosować”): przy 812 × 375 jednostka makiety dawała 0,40 px
   (napis 16 px makiety = 6 px). Na dotyku scena to CAŁY ekran (nie 1672 × 941 na środku), a jednostka liczy się z „płótna” 1310 × 605: przy 812 × 375 --u = 0,62 px — najmniejsza
   wartość, przy której napis 18 px makiety ma ≥ 11 px (czytelny na telefonie). Okna rozpięte top / bottom / right (sklep, ekwipunek, przepustka) same dopasowują się do niższej sceny;
   ekrany z pozycjami makiety dostają w widokach układ mobilny (MOBILE w cs_*.js, reguły html.cs-mobile niżej) */
html.cs-mobile, html.cs-mobile .csu { --u: min(calc(100vw / 1310), calc(100vh / 605)); }
html.cs-mobile .csu .cs-stage { left: 0; top: 0; width: 100vw; height: 100vh; transform: none; }
.csu * { box-sizing: border-box; }
.csu .cs-stage { position: absolute; left: 50%; top: 50%; width: calc(1672 * var(--u)); height: calc(941 * var(--u)); transform: translate(-50%, -50%); transform-origin: 50% 50%; }
.csu .cs-dim { position: absolute; inset: 0; background: rgba(8, 12, 18, .25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* rozmycie warstwą (nie tylko płótna): HUD hali w DOM (plakietki imion, pasek monet, podpowiedzi klawiszy) przebijał przez półprzezroczyste okna — na makietach tło jest jednolicie rozmyte */

/* ---- okno ---- */
.cs-win { position: absolute; background: var(--cs-win); border: 1px solid rgba(255, 255, 255, .07); display: flex; flex-direction: column; }
.cs-head { display: flex; align-items: center; height: calc(82 * var(--u)); margin: 0 calc(28 * var(--u)) 0 calc(33 * var(--u)); border-bottom: 1px solid var(--cs-win-line); flex: 0 0 auto; position: relative; }
.cs-title { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 600; font-size: calc(38 * var(--u)); letter-spacing: .09em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.cs-head .cs-wallet { position: absolute; left: 50%; transform: translateX(-30%); }
.cs-wallet { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(23 * var(--u)); font-weight: 500; letter-spacing: .03em; }
.cs-x { margin-left: auto; width: calc(30 * var(--u)); height: calc(30 * var(--u)); position: relative; cursor: pointer; opacity: .85; }
.cs-x::before, .cs-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 130%; height: calc(2.2 * var(--u)); background: #d6dbe0; transform: translate(-50%, -50%) rotate(45deg); }
.cs-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.cs-x:hover { opacity: 1; }

/* ---- moneta (rysunek CSS: złote koło z wewnętrznym pierścieniem i znakiem jak na makiecie) ---- */
.cs-coin { display: inline-block; width: 1.1em; height: 1.1em; border-radius: 50%; flex: 0 0 auto; position: relative;
  background: radial-gradient(circle at 38% 32%, #fff3a6 0 12%, #ffd34a 30%, #f2b51c 62%, #c88a10 100%); box-shadow: inset 0 0 0 .07em #d99b12; }
.cs-coin::after { content: "S"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 .62em/1 "Barlow Condensed", sans-serif; color: #c07f08; }

/* ---- zakładki ---- */
.cs-tabs { display: flex; border-bottom: 1px solid var(--cs-win-line); flex: 0 0 auto; }
.cs-tab { flex: 1 1 0; text-align: center; font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: calc(21 * var(--u)); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cs-muted); padding: calc(12 * var(--u)) 0 calc(13 * var(--u)); position: relative; cursor: pointer; white-space: nowrap; }
.cs-tab:hover { color: #cfd5db; }
.cs-tab.on { color: #fff; }
.cs-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(4 * var(--u)); background: var(--cs-blue); }
.cs-tab.lock { color: var(--cs-dim); cursor: default; }

/* ---- sekcja ---- */
.cs-sec { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: calc(23 * var(--u)); letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: calc(6 * var(--u)); border-bottom: 1px solid var(--cs-win-line); margin-bottom: calc(16 * var(--u)); }

/* ---- przyciski ---- */
.cs-btn { display: flex; align-items: center; justify-content: center; gap: .45em; background: var(--cs-btn); border: 1px solid var(--cs-btn-line); color: #fff; cursor: pointer;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: calc(21 * var(--u)); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.cs-btn:hover { background: rgba(58, 66, 78, .98); }
.cs-btn.go { background: var(--cs-go); border-color: rgba(150, 210, 110, .35); }
.cs-btn.go:hover { background: var(--cs-go-hi); }
.cs-btn.off { opacity: .45; cursor: default; }
.cs-btn.red { color: #ff8d80; }

/* ---- kafel przedmiotu: grafika, cienki pasek rzadkości u dołu, nazwa, podpis ---- */
.cs-tile { position: relative; background: var(--cs-tile); border: 1px solid var(--cs-tile-line); cursor: pointer; display: flex; flex-direction: column; }
.cs-tile:hover { border-color: rgba(255, 255, 255, .22); }
.cs-tile.sel { border-color: var(--cs-blue); box-shadow: inset 0 0 0 1px var(--cs-blue); }
.cs-tile > * { flex-shrink: 0; }
.cs-tile .art { position: relative; flex: 1 1 auto; flex-shrink: 1; min-height: 0; background-position: center; background-repeat: no-repeat; background-size: contain; }
.cs-tile .art.cover { background-size: cover; }
.cs-tile .stripe { height: calc(5 * var(--u)); margin: 0 calc(8 * var(--u)); flex: 0 0 auto; }
.cs-tile .nm { font-size: calc(15 * var(--u)); line-height: 1.25; color: #fff; padding: calc(9 * var(--u)) calc(10 * var(--u)) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-tile .sub { font-size: calc(11.5 * var(--u)); color: var(--cs-muted); letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; padding: calc(2 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-tile .pct { position: absolute; right: calc(9 * var(--u)); top: calc(10 * var(--u)); font-size: calc(14 * var(--u)); color: #e3e6e9; letter-spacing: .02em; }
.cs-tile .tag { position: absolute; left: calc(9 * var(--u)); top: calc(9 * var(--u)); font-size: calc(11 * var(--u)); color: #fff; background: var(--cs-go); padding: calc(1 * var(--u)) calc(6 * var(--u)); letter-spacing: .08em; text-transform: uppercase; }
.cs-tile .tag.own { background: rgba(255, 255, 255, .14); }
.cs-tile .lock { position: absolute; right: calc(9 * var(--u)); top: calc(9 * var(--u)); width: calc(14 * var(--u)); height: calc(16 * var(--u)); opacity: .8; }
.cs-tile .chk { position: absolute; right: calc(9 * var(--u)); top: calc(8 * var(--u)); width: calc(20 * var(--u)); height: calc(16 * var(--u)); }

/* ---- pole ilości −  N  + ---- */
.cs-qty { display: flex; height: calc(49 * var(--u)); }
.cs-qty > * { display: flex; align-items: center; justify-content: center; background: var(--cs-field); border: 1px solid var(--cs-btn-line); font-size: calc(24 * var(--u)); }
.cs-qty > .b { width: calc(50 * var(--u)); cursor: pointer; font-size: calc(30 * var(--u)); font-weight: 400; }
.cs-qty > .b:hover { background: rgb(40, 46, 54); }
.cs-qty > .n { width: calc(90 * var(--u)); border-left: 0; border-right: 0; font-size: calc(21 * var(--u)); }

/* ---- przewijanie siatek ---- */
.cs-scroll { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #4a525d transparent; }

/* zakładki drugiego rzędu (klasy skrzynki — makieta CS_7: „AR  PISTOL …” mniejsze, 262–298 px) */
.cs-tabs.small .cs-tab { font-size: calc(17 * var(--u)); padding: calc(7 * var(--u)) 0 calc(8 * var(--u)); }
.cs-tabs.small .cs-tab.on::after { height: calc(3.5 * var(--u)); }


/* ---- lista wierszy (arsenał: broń z ikoną, nazwa, podpis) ---- */
.cs-row { position: relative; display: flex; align-items: center; height: calc(76 * var(--u)); background: rgba(40, 46, 55, .7); border: 1px solid rgba(255, 255, 255, .04); cursor: pointer; }
.cs-row:hover { background: rgba(52, 60, 72, .8); }
.cs-row.sel { background: linear-gradient(90deg, rgba(70, 102, 138, .75), rgba(56, 78, 104, .55)); }
.cs-row.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(4 * var(--u)); background: var(--cs-blue); }
.cs-row .ic { width: calc(130 * var(--u)); height: 80%; margin: 0 calc(22 * var(--u)) 0 calc(20 * var(--u)); background: center / contain no-repeat; flex: 0 0 auto; }
.cs-row .t1 { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: calc(18.5 * var(--u)); letter-spacing: .07em; text-transform: uppercase; }
.cs-row .t2 { display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(14.5 * var(--u)); letter-spacing: .06em; text-transform: uppercase; color: var(--cs-muted); margin-top: calc(4 * var(--u)); }
/* ikony broni na liście jako białe sylwetki (makieta CS_9) */
.cs-row .ic.sil { filter: url(#cs-outline); } /* obrys ikony broni (cs_kit: filtr SVG cs-outline) */
.cs-row.lock .ic { opacity: .8; }

/* ---- paski statystyk ---- */
.cs-stat { display: grid; grid-template-columns: calc(132 * var(--u)) calc(170 * var(--u)) auto; align-items: center; column-gap: calc(16 * var(--u)); white-space: nowrap; height: calc(30.6 * var(--u));
  font-size: calc(14.5 * var(--u)); letter-spacing: .06em; text-transform: uppercase; }
.cs-stat .bar { height: calc(9 * var(--u)); background: rgba(255, 255, 255, .1); position: relative; }
.cs-stat .bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: #d5dbe1; }
.cs-stat .v { color: #fff; }

/* ---- hala CS_1 (cs_hub.js): ripowane elementy hali schowane (visibility — logika, liczniki i proxy kliknięć działają dalej) ---- */
body.cs-hub-on :is([data-n="ScreenGui"] > [data-n="Bottom"], [data-n="ScreenGui"] > [data-n="Top"], [data-n="HUD"] > [data-n="Progress"], [data-n="HUD"] > [data-n="Queue"],
  [data-n="HUD"] > [data-n="Daily"], [data-n="HUD"] > [data-n="Play"], #help, .k-topicons, [data-n="Portal"] > [data-n="Prompts"] > [data-n="Gadget"]) { visibility: hidden !important; }
.csu.cs-hub .cs-ico svg, .csu .cs-ico svg { display: block; }
.csu .cs-ico { display: block; width: 100%; height: 100%; }

/* ---- HUD meczu CS_2 (cs_hud.js): ripowane zdrowie / amunicja / podpowiedzi E-Q schowane; kafelek gadżetu przesunięty w pole bloku amunicji (1552–1635 × 785–865) ---- */
body.cs-hud-on :is([data-n="Round"] > [data-n="Health"], [data-n="Round"] > [data-n="Shield"], [data-n="Round"] > [data-n="Ammo"], [data-n="HUD"] > [data-n="Contracts"]) { visibility: hidden !important; }
/* podpowiedzi E / Q i odliczanie odrodzenia: ripowane schowane na komputerze zawsze (po śmierci wracały, gdy HUD CS się chował — zrzut 02.11) */
html.own-cs body:not(.touch) :is([data-n="Portal"] > [data-n="PortalHint"], [data-n="Portal"] > [data-n="CloseHint"]) { visibility: hidden !important; }
body.cs-resp-on [data-n="Round"] > [data-n="Status"] { visibility: hidden !important; }
html:not(.cs-mobile) body.cs-hud-on [data-n="Portal"] > [data-n="Prompts"] > [data-n="Gadget"] { translate: calc(-6 * var(--u)) calc(-36 * var(--u)); } /* na telefonie kafelek stoi w układzie dotyku (K_TOUCH) */

/* ---- podsumowanie CS_6 (cs_summary.js): ripowany nagłówek (VICTORY) i tabela schowane — przyciski z odliczaniem zostają; rząd przycisków jak na makiecie (LOADOUT 985–1177,
   REMATCH 1194–1397, CONTINUE 1413–1635 × 839–891) ---- */
body.cs-pm-on [data-n="PostMatch"] > :is([data-n="Header"], [data-n="Board"]) { visibility: hidden !important; }

/* ---- głosowanie CS_3 (cs_vote.js): ripowany ekran MapVote schowany ---- */
body.cs-vote-on [data-n="MapVote"] { visibility: hidden !important; }

/* ---- menu startowe / pauzy (#menu, index.html) w języku CS: okno jak ekrany CS_7 / CS_10, napis JUMPERS zamiast kreskówkowego logo K, PLAY zielony, reszta ciemna ---- */
html.own-cs #menu { background: rgba(10, 14, 20, .55) !important; backdrop-filter: blur(8px); }
html.own-cs #menu #card { background: rgba(34, 41, 52, .95) !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: "Barlow Semi Condensed", "Barlow Condensed", sans-serif !important; padding: 28px 32px 22px !important; }
html.own-cs #menu #menuLogo { display: none !important; }
html.own-cs #menu h1.sr { position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; margin: 0 0 4px !important; overflow: visible !important;
  font: 600 46px/1 "Barlow Condensed", sans-serif !important; letter-spacing: .1em !important; color: #eef1f4 !important; text-transform: uppercase; }
html.own-cs #menu .tag { color: #9aa3ad !important; font-size: 15px !important; letter-spacing: .04em; margin: 0 0 16px !important; font-style: normal !important; }
html.own-cs #menu select { background: rgb(25, 29, 34) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 0 !important; color: #e8eaed !important;
  font: 500 15px "Barlow Semi Condensed", sans-serif !important; letter-spacing: .04em; }
html.own-cs #menu button { border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; font: 600 18px "Barlow Condensed", sans-serif !important; letter-spacing: .1em !important;
  text-transform: uppercase; background: rgba(44, 51, 61, .95) !important; border: 1px solid rgba(255, 255, 255, .14) !important; color: #fff !important; transform: none !important; font-style: normal !important; }
html.own-cs #menu button#play { background: rgb(95, 147, 65) !important; border-color: rgba(150, 210, 110, .35) !important; font-size: 24px !important; }
html.own-cs #menu button:hover { filter: brightness(1.12); }
/* karta pauzy CS na komputerze (main.js cs-desk / cs-in-match): bez wyboru areny, biomu, trybu i gadżetu (mecz wybiera się polami w hali i głosowaniem), bez szafki K;
   LEAVE MATCH tylko w meczu */
html.own-cs #menu .mrow, html.own-cs #menu .tag, html.own-cs #menu #lockerBtn, html.own-cs #menu #adBtn { display: none !important; }
/* 03.11 (Michał: „modal z PLAY i wyborem mapy do usunięcia całkowicie, bo pojawia się przy ładowaniu”): wybór mapy schowany od pierwszej klatki (klasa own-cs stoi w <head>,
   cs-desk dopiero po załadowaniu modułu), a do pierwszego wejścia do hali (main.js: cs-booted, gdy karta pierwszy raz dostaje hidden) zamiast okna z PLAY / SETTINGS
   tylko napis JUMPERS i stan ładowania na przyciemnionym tle — bez ramki okna i bez przycisków */
html.own-cs:not(.cs-booted) #menu #card { background: none !important; border-color: transparent !important; text-align: center !important; }
html.own-cs:not(.cs-booted) #menu #card > :not(h1, #status, .cs-logo) { display: none !important; }
/* animowane logo (cs_logo.js): emblemat 340 × 200 nad napisem; pierścienie otwierają się 0,1–0,75 s, sylwetka przelatuje z niebieskiego w pomarańczowy co 2,4 s od 0,7 s,
   litery JUMPERS wjeżdżają od 1,0 s co 0,06 s, dwie skośne belki pod napisem 1,4–1,8 s, potem pierścienie pulsują. Po wejściu do hali (karta = pauza) logo znika */
html.own-cs #menu .cs-logo { display: none; }
html.own-cs:not(.cs-booted) #menu .cs-logo { display: block; margin: 0 auto 10px; }
/* telefon: karta #menu to siatka (own_k.css) — logo trafiało do pierwszej kolumny (x 53 przy statusie na środku, zmierzone 812 × 375); na ładowaniu kolumna wyśrodkowana */
html.own-cs:not(.cs-booted) #menu #card { display: flex !important; flex-direction: column; align-items: center; justify-content: center; }
html.own-cs.cs-logo-on:not(.cs-booted) #menu h1.sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; }
.cs-logo .lg-emblem { width: min(340px, 62vw); aspect-ratio: 17 / 10; margin: 0 auto -6px; }
.cs-logo .lg-svg { width: 100%; height: 100%; display: block; object-fit: contain; overflow: visible; }
.cs-logo .lg-ring { transform-box: fill-box; transform-origin: 50% 50%; scale: 0; animation: lgOpen .5s cubic-bezier(.2, 1.4, .4, 1) forwards, lgPulse 2.4s ease-in-out 1.8s infinite; }
.cs-logo .lg-ring-b { animation-delay: .1s, 1.8s; } .cs-logo .lg-ring-o { animation-delay: .25s, 3s; }
.cs-logo .lg-run { animation: lgJump 2.4s cubic-bezier(.45, 0, .55, 1) .7s infinite both; }
/* napis jak znak CS2: gruba kursywa kondensowana, płaski cień łupkowy zamiast poświaty (czytelny na jasnej i ciemnej hali) */
.cs-logo .lg-word { font: italic 800 clamp(46px, 9vw, 92px)/.9 "Barlow Condensed", sans-serif; letter-spacing: .05em; color: #eef1f4; padding-left: .05em;
  text-shadow: 0 .05em 0 #1b1f25, 0 .1em .25em rgba(0, 0, 0, .35); }
.cs-logo .lg-word span { display: inline-block; opacity: 0; translate: 0 .5em; animation: lgIn .35s cubic-bezier(.2, .8, .3, 1) calc(1s + var(--i) * .06s) forwards; }
/* logo z warstw (przycięte do treści przez skin_art_prompts.py: portale 1236 × 834, skoczek 1199 × 507, napis 1461 × 394; środki pierścieni na obrazie portali zmierzone
   w x 17,7 % i 82,1 %). Clip-path odpada (own_cs.css zeruje go na każdym elemencie), więc wszystkie cięcia są maskami: ten sam obraz portali dwa razy, każdy z maską swojej
   połówki — pierścienie otwierają się osobno (niebieski 0,1 s, pomarańczowy 0,3 s) wokół własnych środków; skoczek pod portalami i w masce od środka niebieskiego do środka pomarańczowego,
   więc wyłania się zza jednej obręczy i znika za drugą (dopóki portal się nie otworzył, maska nie pokazuje go w miejscu pierścienia). Telefon 812 × 375: 32vh = 120 px portali + napis */
.cs-logo .lg-emblem.lg-has-img { position: relative; width: auto; height: min(200px, 32vh); aspect-ratio: 1236 / 834; margin: 0 auto 16px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); }
.cs-logo .lg-has-img .lg-port { position: absolute; inset: 0; width: 100%; height: 100%; scale: 0; animation: lgOpen .5s cubic-bezier(.2, 1.4, .4, 1) forwards, lgPulse 2.4s ease-in-out infinite; }
.cs-logo .lg-port-b { transform-origin: 17.7% 50%; -webkit-mask: linear-gradient(90deg, #000 50%, transparent 50%); mask: linear-gradient(90deg, #000 50%, transparent 50%); animation-delay: .1s, 1.8s !important; }
.cs-logo .lg-port-o { transform-origin: 82.1% 50%; -webkit-mask: linear-gradient(90deg, transparent 50%, #000 50%); mask: linear-gradient(90deg, transparent 50%, #000 50%); animation-delay: .3s, 3s !important; }
.cs-logo .lg-gap { position: absolute; inset: 0; -webkit-mask: linear-gradient(90deg, transparent 17.7%, #000 17.7%, #000 82.1%, transparent 82.1%);
  mask: linear-gradient(90deg, transparent 17.7%, #000 17.7%, #000 82.1%, transparent 82.1%); }
/* skoczek: 42 % szerokości sceny (przy 36 % miał 59 px na 165 px sceny i ginął między pierścieniami — zmierzone 03.11), środek na środku sceny; lot = przesunięcie całej warstwy o ±32,2 % (odległość środka sceny od środka
   pierścienia), w tym samym rytmie co rysunek SVG (2,4 s od 0,7 s, 70–100 % przerwa poza kadrem) */
.cs-logo .lg-fly { position: absolute; inset: 0; animation: lgFly 2.4s cubic-bezier(.45, 0, .55, 1) .7s infinite both; }
.cs-logo .lg-jumper { position: absolute; left: 29%; top: 35%; width: 42%; height: auto; animation: lgTilt 2.4s cubic-bezier(.45, 0, .55, 1) .7s infinite both; }
@keyframes lgFly { 0% { transform: translate(-32.2%, 8%); } 35% { transform: translate(0, -5%); } 70%, 100% { transform: translate(32.2%, 8%); } }
@keyframes lgTilt { 0% { transform: rotate(-12deg); } 35% { transform: rotate(0); } 70%, 100% { transform: rotate(12deg); } }
/* odsłanianie maską, nie clip-path: own_cs.css zeruje clip-path na każdym elemencie (!important) — zmierzone: computed clipPath = none mimo reguły */
.cs-logo img.lg-word { width: min(460px, 80vw); -webkit-mask: linear-gradient(105deg, #000 40%, transparent 60%) 100% 0 / 300% 100% no-repeat; mask: linear-gradient(105deg, #000 40%, transparent 60%) 100% 0 / 300% 100% no-repeat;
  animation: lgWipe .6s cubic-bezier(.3, .7, .2, 1) 1s forwards; }
@keyframes lgWipe { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.cs-logo .lg-line { display: flex; justify-content: center; gap: 10px; width: min(330px, 64vw); margin: 10px auto 0; height: 7px; }
.cs-logo .lg-line i { flex: 1; transform: skewX(-24deg) scaleX(0); animation: lgGrow .4s ease-out 1.4s forwards; box-shadow: 0 2px 0 #1b1f25; }
.cs-logo .lg-line i:first-child { background: #4FA3FF; transform-origin: 100% 50%; } .cs-logo .lg-line i:last-child { background: #FF8A2A; transform-origin: 0 50%; }
@keyframes lgOpen { to { scale: 1; } }
@keyframes lgPulse { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
@keyframes lgIn { to { opacity: 1; translate: 0 0; } }
@keyframes lgGrow { to { transform: skewX(-24deg) scaleX(1); } }
/* przelot przez portale: start za środkiem niebieskiego (x −150, ukryty przez clipPath), łuk nad środkiem, koniec za środkiem pomarańczowego; 70–100 % przerwa poza kadrem */
@keyframes lgJump { 0% { transform: translate(-150px, 26px) rotate(-14deg); } 35% { transform: translate(0, -14px) rotate(2deg); }
  70%, 100% { transform: translate(150px, 26px) rotate(16deg); } }
@media (prefers-reduced-motion: reduce) { .cs-logo * { animation-duration: .01s !important; animation-iteration-count: 1 !important; } .cs-logo .lg-run, .cs-logo .lg-fly, .cs-logo .lg-jumper { animation: none !important; } }
/* hala CS: mecze startują polami i kolejką — ☰ na telefonie otwierał kartę z PLAY (nowy mecz z ukrytego wyboru areny); w hali bez niej, w meczu zostaje pauza RESUME / SETTINGS / LEAVE */
html.cs-desk:not(.cs-in-match) #touchMenu { display: none !important; }
html.cs-desk #menu #leaveBtn { display: none; width: 100%; margin-top: 10px; background: rgb(46, 54, 66) !important; border: 1px solid rgba(255, 255, 255, .14) !important; color: #e8eaed !important; padding: 10px 0; }
html.cs-desk.cs-in-match #menu #leaveBtn { display: block; }
html.own-cs #menu #status { color: #9aa3ad !important; letter-spacing: .06em; font-style: normal !important; }

/* lewy pasek nawigacji (cs_kit CsRail) */
.csu .cs-rail-it { position: absolute; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
  border-top: 1px solid rgba(255, 255, 255, .06); color: #d6dbe0; }
.csu .cs-rail-it:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.csu .cs-rail-it.on { background: rgba(255, 255, 255, .07); color: #fff; cursor: default; }
.csu .cs-rail-badge { position: absolute; right: calc(16 * var(--u)); top: calc(14 * var(--u)); min-width: calc(24 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(6 * var(--u));
  border-radius: calc(12 * var(--u)); background: #f2c14e; color: #1b1f25; font: 700 calc(15 * var(--u)) / calc(24 * var(--u)) "Barlow Condensed", sans-serif; text-align: center;
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(24, 29, 37, .95); }
/* ikona gadżetu w HUD meczu w kolorach jak w zakładce Gadgets (02.11, Michał: „w grze HUD gadget powinna być nasza ikonka jak w zakładce gadgets, a nie biała”) — motyw K (own_k.css K_N4) wybielał ją filtrem */
html.own-theme.own-k.own-cs body:not(.touch) [data-n="Prompts"] > [data-n="Gadget"] > [data-n="Icon"] { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .6)); }
/* karta zabójstwa (KillPopup — ripowe GUI, rozmiary liczy silnik GUI) w stylu CS zamiast K (02.11, lista „karta ELIMINATED w stylu K”): płaska ciemna płyta z cienką ramką jak okna CS,
   krój Barlow Condensed, „+XP” zielone jak paski postępu CS, portret = hełm wroga (k_face_red, jak karty hali), wiersze nagród na cienkich liniach */
html.own-theme.own-k.cs-desk body [data-n="KillPopup"] [data-n="Card"] > [data-n="Plate"] { clip-path: none !important; background: rgba(30, 36, 45, .92) !important; border: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .35) !important; }
html.own-theme.own-k.cs-desk [data-n="KillPopup"] [data-n="Plate"] > * { font-family: "Barlow Condensed", sans-serif !important; letter-spacing: .05em; }
html.own-theme.own-k.cs-desk [data-n="KillPopup"] [data-n="Plate"] > [data-n="Title"] { color: #e8eaed !important; font-weight: 600 !important; }
html.own-theme.own-k.cs-desk [data-n="KillPopup"] [data-n="Plate"] > :is([data-n="Total"], [data-n="TotalUnit"]) { color: #8fd36b !important; font-weight: 600 !important; }
html.own-theme.own-k.cs-desk [data-n="KillPopup"] [data-n="Badge"] > [data-n="Portrait"] { background: #2a3442 url(./local/k/k_face_red.webp) center / cover no-repeat !important; border: 2px solid #e0534a; }
html.own-theme.own-k.cs-desk [data-n="KillPopup"] [data-n="Rows"] [data-n="Slide"] { background: rgba(30, 36, 45, .85) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important; }
html.own-theme.own-k.cs-desk [data-n="KillPopup"] [data-n="Rows"] [data-n="Slide"] * { font-family: "Barlow", sans-serif !important; }
html.own-theme.own-k.cs-desk [data-n="KillPopup"] [data-n="Timer"] > [data-n="Fill"] { background: #8fd36b !important; }
/* ripowy panel kontraktów chowany ZAWSZE na komputerze z motywem CS — do 02.11 tylko przy body.cs-hud-on, więc po śmierci (HUD CS zgaszony) wychodził drugi panel w stylu K */
html.cs-desk [data-n="HUD"] > [data-n="Contracts"] { visibility: hidden !important; }
html.own-theme.own-k.cs-desk [data-n="KillPopup"] [data-n="Badge"] > [data-n="Portrait"] > * { opacity: 0 !important; } /* ripowa ikona hełmu nad portretem k_face_red */
/* pasek stanu rundy („Eliminated | Spectating Nova”, „Respawning…”) w stylu CS zamiast K: bez szarej listwy GUI, napis na płytce CS (Barlow Condensed, cienka ramka) */
html.own-theme.own-k.cs-desk body:not(.touch) [data-n="Round"] > [data-n="Status"] { background: transparent !important; box-shadow: none !important; }
html.own-theme.own-k.cs-desk body:not(.touch) [data-n="Round"] > [data-n="Status"] > .rblx-span { clip-path: none !important; background: rgba(30, 36, 45, .92) !important; border: 1px solid rgba(255, 255, 255, .1);
  font-family: "Barlow Condensed", sans-serif !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; padding: .25em 1.4em !important; }
/* killcam: portret zabójcy w stylu CS (twarz hełmu k_face_* w kolorze strony — killcam_view.paintGun ustawia --kc-face / --kc-col) zamiast rysunku hełmu K */
html.own-theme.own-k.cs-desk [data-n="KillCam"] [data-n="Bottom"]::before { background: #2a3442 var(--kc-face, url(./local/k/k_face_red.webp)) center / cover no-repeat !important; transform: none !important; box-shadow: inset 0 0 0 2px var(--kc-col, #e0534a) !important; }
/* ---- telefon (html.cs-mobile, 03.11 — Michał: „wszystko w CS2 stylu oraz mobile widoki”) ---- */
/* karta menu / pauzy na dotyku: bez doku K (ITEMS / SHOP / PASS / GADGETS), licznika monet i ikon K nad kartą — nawigacja jest w lewym pasku CS, pauza ma tylko RESUME / SETTINGS / LEAVE */
html.cs-mobile.own-menu-open :is(.k-topicons, [data-n="ScreenGui"] > [data-n="Bottom"], [data-n="ScreenGui"] > [data-n="Top"]) { visibility: hidden !important; }
html.cs-mobile #menu #card { max-height: calc(100vh - 24px); overflow-y: auto; }
/* zębatka pauzy w meczu (topbar_icons_view) w kolorach okien CS zamiast granatu K */
html.own-cs .k-topicon { background: rgba(30, 36, 45, .9); border-color: rgba(255, 255, 255, .12); }
html.own-cs .k-topicon:hover { background: rgba(52, 60, 72, .95); }
html.cs-touch-edit :is(.cs-rail, .k-topicons) { display: none !important; } /* edytor układu przycisków dotyku (cs_settings.editLayout) — cały ekran dla przycisków */
/* lista Spectate (spectate_view — ripowe GUI Menus.Spectate) w stylu okien CS zamiast K (03.11, „wszystko w CS2 stylu”): płaska płyta z cienką ramką, tytuł Barlow Condensed,
   X jak .cs-x (bez białej płytki), karty meczów jak kafle CS, WATCH zielony CS; pod otwartą listą bez ikon K i legendy klawiszy (html.spect-open z openList) */
html.own-cs [data-n="Spectate"] [data-n="Panel"] { background: rgba(34, 41, 52, .95) !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; }
html.own-cs [data-n="Spectate"] [data-n="Header"] > :is([data-n="CartoonFill"], [data-n="IconShadow"]) { display: none !important; }
html.own-cs [data-n="Spectate"] [data-n="Header"] > [data-n="Title"] { font-family: "Barlow Condensed", sans-serif !important; font-weight: 600 !important; letter-spacing: .09em; text-transform: uppercase; }
html.own-cs [data-n="Spectate"] [data-n="Header"] > [data-n="Live"] { background: rgba(224, 83, 74, .85) !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Barlow Condensed", sans-serif !important; letter-spacing: .08em; }
html.own-cs [data-n="Spectate"] [data-n="Header"] > [data-n="Close"] { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
html.own-cs [data-n="Spectate"] [data-n="Header"] > [data-n="Close"] > [data-n="Label"] { color: #d6dbe0 !important; font-family: "Barlow Condensed", sans-serif !important; font-weight: 400 !important; }
html.own-cs [data-n="Spectate"] [data-n="Empty"] { font-family: "Barlow Semi Condensed", sans-serif !important; color: #98a2ad !important; letter-spacing: .04em; }
html.own-cs [data-n="Spectate"] [data-n="MatchCard"] { background: linear-gradient(rgb(36, 40, 46), rgb(33, 38, 44)) !important; border: 1px solid rgba(255, 255, 255, .07) !important; border-radius: 0 !important; box-shadow: none !important; }
html.own-cs [data-n="Spectate"] [data-n="MatchCard"] :is([data-n="LivePill"], [data-n="ModePill"]) { border-radius: 0 !important; }
html.own-cs [data-n="Spectate"] [data-n="MatchCard"] > [data-n="Watch"] { background: rgb(95, 147, 65) !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Barlow Condensed", sans-serif !important; letter-spacing: .1em; text-transform: uppercase; }
html.own-cs.spect-open :is(.k-topicons, #help) { visibility: hidden !important; }
html.own-cs [data-n="Spectate"] [data-n="Header"] > [data-n="Close"] > [data-n="Border"] { display: none !important; } /* obwódka białej płytki K wokół X */
html.own-theme.own-k.own-cs [data-n="Spectate"] [data-n="Header"] > [data-n="Close"].own-btn { background: transparent !important; box-shadow: none !important; border: 0 !important; clip-path: none !important; }
html.own-theme.own-k.own-cs [data-n="Spectate"] [data-n="Header"] > [data-n="Close"].own-btn::before, html.own-theme.own-k.own-cs [data-n="Spectate"] [data-n="Header"] > [data-n="Close"].own-btn::after { display: none !important; }
/* ---- Inspect (karta innego gracza w hali, inspect_view — ripowe GUI Menus.Inspect) i zaproszenie do drużyny (party_view, Overlay/Invite) w stylu okien CS zamiast K (03.11):
   płaskie ciemne płyty z cienką ramką, kafle statystyk jak kafle CS, X bez czerwonej płytki, DUEL / ACCEPT zielone CS, reszta przycisków ciemna, krój Barlow Condensed ---- */
html.own-theme.own-k.own-cs [data-n="Inspect"] :is([data-n="Window"], [data-n="GiftPanel"], [data-n="InventoryPanel"]),
html.own-theme.own-k.own-cs [data-n="Invite"] > [data-n="Card"] {
  background: rgba(34, 41, 52, .96) !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; }
html.own-theme.own-k.own-cs :is([data-n="Inspect"], [data-n="Invite"]) .rblx-text { font-family: "Barlow Condensed", sans-serif !important; letter-spacing: .04em; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
html.own-theme.own-k.own-cs [data-n="Inspect"] [data-n="Grid"] > *, html.own-theme.own-k.own-cs [data-n="Inspect"] [data-n="TileTemplate"], html.own-theme.own-k.own-cs [data-n="Inspect"] [data-n="InventoryPanel"] [data-n="Grid"] > * {
  background: linear-gradient(rgb(36, 40, 46), rgb(33, 38, 44)) !important; border: 1px solid rgba(255, 255, 255, .07) !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; }
html.own-theme.own-k.own-cs [data-n="Inspect"] [data-n="Grid"] [data-n="Value"] { color: #fff !important; }
html.own-theme.own-k.own-cs [data-n="Inspect"] [data-n="Grid"] [data-n="Key"] { text-transform: uppercase; letter-spacing: .1em; color: #98a2ad !important; }
html.own-theme.own-k.own-cs [data-n="Inspect"] :is([data-n="Face"], [data-n="Gun"], [data-n="Level"], [data-n="XP"]) { border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; }
html.own-theme.own-k.own-cs [data-n="Inspect"] [data-n="Level"] { background: rgba(255, 255, 255, .12) !important; }
html.own-theme.own-k.own-cs [data-n="Inspect"] [data-n="XP"] { background: rgba(255, 255, 255, .12) !important; }
html.own-theme.own-k.own-cs [data-n="Inspect"] [data-n="XP"] > [data-n="Fill"] { background: rgb(95, 147, 65) !important; border-radius: 0 !important; }
html.own-theme.own-k.own-cs :is([data-n="Inspect"], [data-n="Invite"]) .own-btn { border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; text-transform: uppercase; letter-spacing: .1em;
  background: rgba(44, 51, 61, .95) !important; border: 1px solid rgba(255, 255, 255, .14) !important; }
html.own-theme.own-k.own-cs :is([data-n="Inspect"], [data-n="Invite"]) .own-btn::before, html.own-theme.own-k.own-cs :is([data-n="Inspect"], [data-n="Invite"]) .own-btn::after { display: none !important; }
html.own-theme.own-k.own-cs :is([data-n="Inspect"] [data-n="Duel"], [data-n="Invite"] [data-n="Accept"]) { background: rgb(95, 147, 65) !important; border-color: rgba(150, 210, 110, .35) !important; }
html.own-theme.own-k.own-cs [data-n="Invite"] [data-n="Decline"] > [data-n="Label"] { color: #ff8d80 !important; }
html.own-theme.own-k.own-cs [data-n="Inspect"] [data-n="Close"].own-btn { background: transparent !important; border: 0 !important; }
html.own-theme.own-k.own-cs [data-n="Inspect"] [data-n="Close"] > [data-n="Label"] { color: #d6dbe0 !important; font-weight: 400 !important; }
html.own-theme.own-k.own-cs :is([data-n="Inspect"], [data-n="Invite"]) .own-btn > [data-n="Border"] { display: none !important; }
html.own-theme.own-k.own-cs [data-n="Inspect"] [data-n^="Option"] > [data-n="Label"] { color: #f2c14e !important; }
html.own-cs.insp-open :is(.k-topicons, #help) { visibility: hidden !important; } /* okno Inspect: ikony K wchodziły na X (telefon) */
/* ---- online (03.11, sprawdzone na serwerze lokalnym: dwóch graczy): karta MATCH FOUND kolejki globalnej (global_queue_view — Overlay.MatchFound) w stylu okien CS i schowana,
   gdy trwa głosowanie na mapę CS (body.cs-vote-on — obie karty nachodziły na siebie), podpowiedzi E INSPECT / komunikaty (own-prompt / own-banner) jak legenda klawiszy hali CS ---- */
html.own-theme.own-k.own-cs [data-n="MatchFound"] > [data-n="Card"] { background: rgba(34, 41, 52, .96) !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; }
html.own-theme.own-k.own-cs [data-n="MatchFound"] .rblx-text { font-family: "Barlow Condensed", sans-serif !important; letter-spacing: .06em; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
html.own-theme.own-k.own-cs [data-n="MatchFound"] [data-n="Header"] > [data-n="Mode"] { background: rgb(95, 147, 65) !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; }
html.own-theme.own-k.own-cs [data-n="MatchFound"] :is([data-n="Left"], [data-n="Right"]) > * { border-radius: 0 !important; box-shadow: none !important; }
html.own-cs body.cs-vote-on [data-n="MatchFound"] { visibility: hidden !important; }
html.own-theme.own-k.own-cs :is(.own-banner, .own-prompt) { background: rgba(30, 36, 45, .92) !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-left: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 0 !important;
  box-shadow: none !important; clip-path: none !important; font-family: "Barlow Condensed", sans-serif !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; }
html.own-theme.own-k.own-cs .own-prompt [data-k] { background: rgba(48, 56, 67, .95) !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 0 !important; box-shadow: none !important; }
html.own-cs body.cs-vote-on [data-n="Invite"] > [data-n="Card"] { visibility: hidden !important; } /* zaproszenie do drużyny nie zasłania głosowania na mapę (zrzut online 03.11, telefon) */
/* odznaki nad głową (nametag_view + cs_badges, 03.11 — Michał: „killstreak numer ma być w środku białego kółka, a nie obok” i „nie widać dobrze level nad postacią”): ×1,45 z cieniem
   (29 px przy średniej odległości to za mało na obraz z detalem), liczby na całej odznace — rozmiar od wysokości odznaki (cqh: kontener = odznaka); poziom na środku tarczy (pole
   tarczy na 0,45 wysokości obrazu), seria w pustym kółku na dole płomienia (zmierzone na obrazach S03–S25: środek kółka na 0,70–0,78 wysokości), ciemna, bo kółko jest białe */
/* min. 20 px: billboard skaluje się z odległością, na telefonie 812 × 375 odznaka wroga z ~6 studs miała 10–15 px (zmierzone) i liczby nie dało się odczytać */
[data-n="Badges"] > :is([data-n="LevelBadge"], [data-n="StreakBadge"]) { min-height: 20px; min-width: 20px; }
[data-n="Badges"] > :is([data-n="LevelBadge"], [data-n="StreakBadge"]) { container-type: size; scale: 1.45; transform-origin: 50% 100%; margin: 0 7px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .85)); }
/* 03.11, Michał: „nie pokazuje się dobrze level nad postacią” — w szablonie z rippa odznaka ma dziecko Art (biały sześciokąt gui/108721165934514.webp) PO liczbie, więc leżało nad
   naszą grafiką (cs_badges.js maluje tło samej odznaki) i zakrywało biały numer na białym — zmierzone w DOM: LevelBadge > Level, Art. Grafikę daje cs_badges.js, Art znika */
[data-n="Badges"] > :is([data-n="LevelBadge"], [data-n="StreakBadge"]) > [data-n="Art"] { display: none !important; }
[data-n="Badges"] :is([data-n="Level"], [data-n="Streak"]) { position: absolute !important; left: 0 !important; width: 100% !important; height: 40% !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: none !important; }
[data-n="Badges"] [data-n="Level"] { top: 29% !important; } /* środek płytki odznak z image-gen (L001–L100: płytka 25–75 % wysokości) — liczba na 49 % */
/* odznaka poziomu na karcie profilu w hali (cs_hub.js) — te same proporcje liczby co w rzędzie Badges nad głową (wyżej): tekst na 29–69 % wysokości, 36cqh, biały z cieniem */
.cs-lvbadge { container-type: size; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .85)); }
.cs-lvbadge > span { position: absolute; left: 0; top: 29%; width: 100%; height: 40%; display: flex; align-items: center; justify-content: center;
  font: 700 36cqh/1 "Barlow Condensed", sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
[data-n="Badges"] [data-n="Streak"] { top: 56% !important; }
[data-n="Badges"] :is([data-n="Level"], [data-n="Streak"]) .rblx-span { font-size: 27cqh !important; font-family: "Barlow Condensed", sans-serif !important; font-weight: 700 !important; line-height: 1 !important; }
[data-n="Badges"] [data-n="Level"] .rblx-span { font-size: 36cqh !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .9) !important; }
[data-n="Badges"] [data-n="Streak"] .rblx-span { color: #1b1f25 !important; -webkit-text-fill-color: #1b1f25 !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
body.cs-mf-on [data-n="MatchFound"] { visibility: hidden !important; } /* MATCH FOUND CS (cs_matchfound.js) zamiast ripowej karty */
body.cs-vote-on .csu.cs-mf { display: none !important; } /* głosowanie na mapę zastępuje panel MATCH FOUND w tym samym miejscu */
html.cs-mobile body.cs-mf-on .csu.cs-hub { visibility: hidden !important; } /* telefon: panel MATCH FOUND na środku zasłaniał karty trybów — na chwilę przed meczem hala bez kart */