/* czcionki u nas (bez Google Fonts): Anton (duze napisy) i Chakra Petch (tekst, liczby), licencja OFL - fonty/LICENCJA.txt; wyglad 2026 (Czako 3.10) */
@font-face { font-family:"Anton"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonty/anton-latin-ext-400.woff2?v=1) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Anton"; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonty/anton-latin-400.woff2?v=1) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Chakra Petch"; font-style:normal; font-weight:500; font-display:swap; src:url(/fonty/chakrapetch-latin-ext-500.woff2?v=1) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Chakra Petch"; font-style:normal; font-weight:500; font-display:swap; src:url(/fonty/chakrapetch-latin-500.woff2?v=1) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Chakra Petch"; font-style:normal; font-weight:600; font-display:swap; src:url(/fonty/chakrapetch-latin-ext-600.woff2?v=1) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Chakra Petch"; font-style:normal; font-weight:600; font-display:swap; src:url(/fonty/chakrapetch-latin-600.woff2?v=1) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Chakra Petch"; font-style:normal; font-weight:700; font-display:swap; src:url(/fonty/chakrapetch-latin-ext-700.woff2?v=1) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Chakra Petch"; font-style:normal; font-weight:700; font-display:swap; src:url(/fonty/chakrapetch-latin-700.woff2?v=1) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Bandacrew.pl - wspolny wyglad (ciemny, pomaranczowy FACEIT, niebieski CT). Zmiana pliku = podbij ?v= w HTML. */
:root { --fc:#FF7A1A; --t:#ff8c1a; --ct:#2EC5FF; --tlo:#0b0d10; --panel:#12151a; --linia:rgba(255,255,255,.12);
  --tekst:#eef1f4; --szary:#9aa3ad; --ziel:#3ddc84; --czer:#e5233b; --twitch:#9146ff; --kick:#53fc18; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--tlo); color:var(--tekst); font:600 18px/1.5 "Chakra Petch","Segoe UI",sans-serif; overflow-x:hidden; }
a { color:inherit; }
img, svg { display:block; max-width:100%; }

/* tlo: siatka + powolna poswiata (tylko CSS, prawie zero obciazenia) */
.tlo { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.tlo::before { content:""; position:absolute; inset:-48px; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:48px 48px; animation:siatka 24s linear infinite;
  -webkit-mask:radial-gradient(ellipse at 50% 15%,#000 25%,transparent 75%); mask:radial-gradient(ellipse at 50% 15%,#000 25%,transparent 75%); }
.tlo::after { content:""; position:absolute; width:70vmax; height:70vmax; right:-20vmax; top:-30vmax; border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,26,.16),transparent 60%); animation:poswiata 14s ease-in-out infinite alternate; }
@keyframes siatka { to { transform:translate(48px,48px); } }
@keyframes poswiata { to { transform:translate(-12vmax,8vmax); opacity:.6; } }
@media (prefers-reduced-motion:reduce) { .tlo::before, .tlo::after, .live i { animation:none; } html { scroll-behavior:auto; } .pokaz { transform:none !important; } }

.wrap { max-width:1140px; margin:0 auto; padding:0 16px; }
h1, h2, h3, .o { font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:2px; }
h1 { font-size:clamp(38px,7vw,72px); line-height:1.05; text-shadow:0 0 30px rgba(255,122,26,.25); margin:8px 0 12px; }
h2 { font-size:26px; margin-bottom:12px; } h3, h2.h3 { font-size:20px; margin:14px 0 6px; }
h1 b, h2 b { color:var(--fc); }
.szary { color:var(--szary); } .male { font-size:15px; }
.nad { color:var(--szary); letter-spacing:6px; text-transform:uppercase; font:500 15px "Anton"; } .nad::before { content:"■ "; color:var(--fc); }
.lead { color:var(--szary); max-width:680px; font-size:20px; }
p + p { margin-top:10px; }

/* naglowek */
body { padding-top:63px; }   /* miejsce na naglowek (wstawia go JS) - strona nie skacze przy wczytywaniu */
header { border-bottom:1px solid var(--linia); background:rgba(11,13,16,.88); position:fixed; top:0; left:0; right:0; z-index:10; backdrop-filter:blur(8px); }
header .wrap { display:flex; align-items:center; gap:16px; height:62px; }
.logo { font:700 24px "Anton"; letter-spacing:3px; text-transform:uppercase; text-decoration:none; white-space:nowrap; } .logo b { color:var(--fc); }
nav { display:flex; gap:20px; margin-left:auto; }
nav a { color:var(--szary); text-decoration:none; font:500 15px "Anton"; letter-spacing:2px; text-transform:uppercase; padding:4px 0; border-bottom:2px solid transparent; transition:.2s; }
nav a:hover, nav a.akt { color:var(--tekst); border-bottom-color:var(--fc); }
.menu { display:none; margin-left:auto; background:none; border:1px solid var(--linia); color:#fff; width:44px; height:40px; cursor:pointer; font-size:22px; }
.live { display:none; align-items:center; gap:7px; background:var(--czer); color:#fff; padding:3px 10px; font:700 13px "Anton"; letter-spacing:2px; text-decoration:none; white-space:nowrap; }
.live-baner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 14px; padding:8px 16px;
  background:linear-gradient(90deg, #8f0f1f, var(--czer) 50%, #8f0f1f); color:#fff; font:700 15px "Chakra Petch", sans-serif;
  text-shadow:0 1px 2px #000; position:relative; z-index:60; }
.live-baner[hidden], .live-baner a[hidden] { display:none; }
.live-baner b { font:400 18px "Anton"; letter-spacing:2px; }
.live-baner i { width:10px; height:10px; border-radius:50%; background:#fff; animation:puls 1s infinite; }
.live-baner a { color:#fff; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.6); padding:6px 14px; min-height:44px;
  display:inline-flex; align-items:center; text-decoration:none; font-weight:700; }
.live-baner a:hover { background:#000; }
@media (prefers-reduced-motion:reduce) { .live-baner i { animation:none; } }
.live.on { display:inline-flex; } .live i { width:8px; height:8px; border-radius:50%; background:#fff; animation:puls 1s infinite; }
@keyframes puls { 50% { opacity:.2; } }

/* przyciski i panele */
.btn { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--fc); color:#fff; background:rgba(255,122,26,.12);
  text-decoration:none; font:700 15px "Anton"; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:.2s; }
.btn:hover { background:var(--fc); color:#120600; } .btn.j { background:var(--fc); color:#120600; } .btn.j:hover { background:var(--t); }
.btn svg { width:18px; height:18px; }
.przyciski { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.hud { position:relative; background:var(--panel); border:1px solid var(--linia); padding:26px 22px 20px; margin:30px 0; }
.hud::before, .hud::after { content:""; position:absolute; width:20px; height:20px; border:3px solid var(--fc); }
.hud::before { top:-3px; left:-3px; border-right:0; border-bottom:0; } .hud::after { bottom:-3px; right:-3px; border-left:0; border-top:0; }
.etyk { position:absolute; top:-13px; left:16px; background:var(--fc); color:#120600; padding:1px 12px; font:700 14px "Anton"; letter-spacing:3px; text-transform:uppercase; }
.kafel { background:rgba(255,255,255,.03); border:1px solid var(--linia); padding:14px 16px; }
.kafel .e { color:var(--szary); font:500 13px "Anton"; letter-spacing:2px; text-transform:uppercase; }
.kafel .n { font:700 32px/1.1 "Anton"; color:#fff; } .kafel .n.z { color:var(--ziel); }
.siatka2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
code { background:rgba(255,255,255,.07); padding:1px 6px; font:15px Consolas,monospace; color:var(--t); }
ol, ul { padding-left:22px; } li { margin:6px 0; } li::marker { color:var(--fc); font-family:"Anton"; }
.ukryte { display:none !important; }

/* LIVE / najblizszy stream */
.player { aspect-ratio:16/9; width:100%; border:1px solid var(--linia); background:#000; }
.player iframe { width:100%; height:100%; border:0; display:block; }
.odlicz { display:flex; gap:10px; margin:12px 0; } .odlicz div { background:rgba(255,255,255,.04); border:1px solid var(--linia); padding:8px 12px; min-width:74px; text-align:center; }
.odlicz b { display:block; font:700 36px/1 "Anton"; color:var(--fc); } .odlicz span { font-size:13px; color:var(--szary); letter-spacing:2px; text-transform:uppercase; }
.offline { aspect-ratio:16/9; display:grid; place-content:center; text-align:center; gap:4px; padding:16px; border:1px solid var(--linia);
  background:radial-gradient(ellipse at 50% 40%,rgba(255,122,26,.18),transparent 65%),#0e1115; }

/* FACEIT */
.forma { display:flex; gap:5px; margin-top:6px; } .forma i { width:26px; height:26px; display:grid; place-items:center; font:700 13px "Anton"; font-style:normal; }
.forma .W { background:rgba(61,220,132,.18); color:var(--ziel); } .forma .L { background:rgba(229,35,59,.18); color:#ff6b7d; }
.poziom { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; border:3px solid var(--fc); font:700 18px "Anton"; color:var(--fc); }

/* kanaly / linki */
.kanaly { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.kanal { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--linia); background:rgba(255,255,255,.03); text-decoration:none; transition:.2s; }
.kanal:hover { border-color:var(--fc); transform:translateY(-2px); }
.kanal svg { width:34px; height:34px; flex:none; } .kanal b { display:block; font:700 20px "Anton"; letter-spacing:1px; } .kanal span { color:var(--szary); font-size:15px; }
.kanal .znak { margin-left:auto; font:700 13px "Anton"; color:#fff; background:var(--czer); padding:2px 8px; display:none; letter-spacing:1px; font-style:normal; }
.kanal.na-zywo .znak { display:inline; }

/* harmonogram */
.plan { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.plan div { background:rgba(255,255,255,.03); border:1px solid var(--linia); padding:10px 8px; min-height:96px; font-size:15px; }
.plan div b { display:block; font:700 14px "Anton"; letter-spacing:2px; color:var(--szary); }
.plan div.s { border-color:rgba(255,122,26,.6); background:rgba(255,122,26,.08); } .plan div.s b { color:var(--fc); }
.plan div.sp { opacity:.6; border-style:dashed; }   /* dni spontaniczne (6.10) */
.plan div.najblizszy { background:var(--fc); border-color:var(--fc); color:#120600; box-shadow:0 0 24px rgba(255,122,26,.35); }
.plan div.najblizszy b, .plan div.najblizszy .gra { color:#120600; } .plan div.najblizszy b::after { content:" • NAJBLIŻSZY"; } .plan .gra { display:block; color:var(--t); font-weight:700; }

/* klipy / Hall of Fame */
.klipy { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.klip { background:#161a20; border:1px solid var(--linia); text-decoration:none; transition:.2s; display:block; }
.klip:hover { border-color:var(--fc); transform:translateY(-2px); }
.klip .m { aspect-ratio:16/9; background:linear-gradient(160deg,#252a33,#101216) center/cover; position:relative; }
.klip .tag { position:absolute; top:8px; left:8px; background:var(--fc); color:#120600; font:700 12px "Anton"; letter-spacing:2px; padding:1px 7px; }
.klip p { padding:8px 10px; font-size:16px; } .klip p span { display:block; color:var(--szary); font-size:13px; }
.pusto { border:1px dashed var(--linia); padding:22px; text-align:center; color:var(--szary); grid-column:1/-1; }

/* ekipa */
.ekipa { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.gracz { background:#14181e; border:1px solid var(--linia); padding:16px; display:flex; gap:14px; align-items:center; transition:.2s; }
.gracz:hover { border-color:var(--fc); }
.gracz svg.awatar, .gracz img.awatar { width:76px; height:76px; flex:none; }
img.awatar.foto { object-fit:cover; clip-path:polygon(0 12%,12% 0,100% 0,100% 88%,88% 100%,0 100%); background:#1a1f27; }
.gt img.awatar { width:86px; height:86px; flex:none; }
.gracz b { font:700 22px "Anton"; letter-spacing:1px; display:block; } .gracz .r { color:var(--t); font:700 15px "Anton"; letter-spacing:1px; }
.gracz dl { font-size:15px; color:var(--szary); } .gracz dd { display:inline; color:var(--tekst); } .gracz dt { display:inline; } .gracz dt::after { content:": "; }
.gracz.dolacz { border-style:dashed; flex-direction:column; justify-content:center; text-align:center; color:var(--szary); }
.gracz.dolacz code { overflow-wrap:anywhere; }
.gracz { flex-wrap:wrap; align-content:flex-start; }
.gracz > div:not(.fc) { flex:1 1 0; min-width:0; }   /* tekst obok awatara - bez tego dluga linijka spadala pod awatar */
.gracz b { overflow-wrap:anywhere; }
.fc-brak { color:var(--szary); font-size:14px; } .fc-brak code { overflow-wrap:anywhere; }
.gt.pusty { border-style:dashed; } .gt.pusty b { font-size:24px; }
.lead { text-wrap:balance; }
[id] { scroll-margin-top:76px; }   /* link /#ekipa, /#live - przyklejony naglowek nie zaslania poczatku sekcji */
.fc { flex-basis:100%; border-top:1px solid var(--linia); padding-top:10px; }
.fc-g { display:flex; gap:10px; align-items:center; } svg.lvl { width:40px; height:40px; flex:none; }
.gracz .fc-elo, .fc-elo { font:700 26px "Anton"; } .fc-elo small { color:var(--szary); font-size:14px; margin-left:4px; }
.fc-wykres { margin-top:4px; } .fc-wykres .wykres { display:block; position:relative; } .wykres svg { display:block; width:100%; height:30px; }
.wykres-brak { display:block; font-size:13px; color:var(--szary); line-height:1.2; }
/* dymki (najechanie myszka albo stukniecie na telefonie): W/L - przypiete do lewej rzedu, wykres - do prawej */
.forma { position:relative; } .forma i[data-tip] { cursor:help; outline:none; }
[data-tip]:hover::after, [data-tip]:focus::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); z-index:5;
  background:#0b0d10; border:1px solid var(--fc); color:var(--tekst); font:600 14px "Chakra Petch"; padding:4px 9px; white-space:pre-line; width:max-content; max-width:250px; line-height:1.35; pointer-events:none; }
.forma i[data-tip]:hover::after, .forma i[data-tip]:focus::after { left:0; } .wykres[data-tip]:hover::after, .wykres[data-tip]:focus::after { right:0; }
.wykres[data-tip] { cursor:help; outline:none; }
.fc-elo .fc-ost { display:block; white-space:nowrap; font:500 13px "Chakra Petch"; color:var(--szary); } .gracz .fc-ost b { display:inline; font:700 14px "Chakra Petch"; letter-spacing:0; }
.fc-forma i { width:auto; min-width:38px; height:auto; padding:3px 4px; display:flex; flex-direction:column; align-items:center; line-height:1.1; }
.fc-forma i small { font:700 12px "Chakra Petch"; }
.wiecej { margin-top:8px; font-size:14px; color:var(--szary); }
.wiecej summary { cursor:pointer; color:var(--t); font:500 13px "Anton"; letter-spacing:1px; text-transform:uppercase; }
.wiecej dl { display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; margin-top:6px; }
.gracz .wiecej dd { display:inline; color:var(--tekst); font-weight:600; }
.fc-s { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; font-size:15px; color:var(--szary); }
svg.ig { display:inline-block; width:16px; height:16px; color:var(--fc); vertical-align:-3px; margin-right:5px; } svg.ig.b { width:30px; height:15px; }   /* ikonki broni i map */
.fc-s b, .gracz .fc-s b { display:inline; font:600 16px "Chakra Petch"; color:var(--tekst); letter-spacing:0; }
.ranking { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:14px; margin-bottom:18px; }
.ranking .e { color:var(--szary); font:500 13px "Anton"; letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; }
.ranking ol { list-style:none; padding:0; margin:0; }
.ranking li { display:grid; grid-template-columns:26px 32px 1fr auto 56px; gap:10px; align-items:center; padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.05); }
.ranking li:first-child { background:rgba(255,122,26,.08); }
.ranking li svg.lvl { width:30px; height:30px; } .ranking li .m { font:700 18px "Anton"; color:var(--szary); text-align:center; }
.ranking li b { font:700 18px "Anton"; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ranking .elo { font:700 18px "Anton"; }
.ranking li > span:last-child { text-align:right; font-weight:700; }
.ranking li.bez { opacity:.7; } .ranking li.bez b { color:var(--szary); }
.plus { color:var(--ziel); } .minus { color:#ff6b7d; }   /* jasniejsza czerwien - czytelna na ciemnym tle (kontrast) */
.gt { background:#14181e; border:1px solid var(--fc); padding:16px; display:flex; gap:14px; align-items:center; height:100%; }
.gt svg.awatar { width:86px; height:86px; flex:none; } .gt b { display:block; font:700 28px "Anton"; letter-spacing:1px; }
.gt .plus { display:block; font:700 22px "Anton"; } .gt .e { color:var(--t); }
.zrodlo { margin-top:14px; }
.zrodlo .leetify { display:inline-block; vertical-align:middle; margin:0 4px; } .zrodlo .leetify img { height:34px; width:auto; }

/* wyroznienia: Gracz tygodnia / miesiaca, osobno FACEIT i Premier */
:root { --zloto:#ffc83d; }
.wyr { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.wyr-b { background:#14181e; border:1px solid var(--linia); padding:12px 14px 14px; }
.wyr-b > .e { font:700 15px "Anton"; letter-spacing:3px; text-transform:uppercase; color:var(--fc); margin-bottom:8px; }
.wyr-b.premier > .e { color:var(--ct); }
.wyr-o { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wyr-k > .t { color:var(--szary); font:500 12px "Anton"; letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
.zw { border:2px solid var(--zloto); background:linear-gradient(160deg,rgba(255,200,61,.14),transparent 60%); padding:10px; display:flex; gap:10px; align-items:center; min-height:86px; }
.zw svg.awatar, .zw img.awatar { width:54px; height:54px; flex:none; }
.zw b { display:block; font:700 20px/1.15 "Anton"; letter-spacing:1px; overflow-wrap:anywhere; }
.zw .ile { font:700 17px "Anton"; color:var(--ziel); } .zw .za { display:block; color:var(--szary); font-size:13px; line-height:1.2; }
.zw.brak { border:1px dashed var(--linia); background:none; color:var(--szary); font-size:14px; line-height:1.3; }
.kor { color:var(--zloto); }
.prow { margin-top:6px; font-size:15px; color:var(--szary); line-height:1.3; } .prow b { color:var(--tekst); } .prow .plus { font-weight:700; }
.gracz.mistrz, .gracz.mistrz:hover { border-color:var(--zloto); box-shadow:0 0 18px rgba(255,200,61,.18); }
.tytul { display:inline-block; margin-top:2px; padding:0 7px; background:var(--zloto); color:#1a1200; font:700 12px "Anton"; letter-spacing:1px; text-transform:uppercase; }
.ranking.jedna { grid-template-columns:1fr; }
.hala { margin-top:18px; } .hala table { width:100%; border-collapse:collapse; font-size:16px; }
.hala th { text-align:left; color:var(--szary); font:500 12px "Anton"; letter-spacing:2px; text-transform:uppercase; padding:4px 8px; }
.hala td { padding:6px 8px; border-top:1px solid rgba(255,255,255,.06); } .hala td:first-child { color:var(--szary); white-space:nowrap; }
.hala td b { color:var(--tekst); }
@media (max-width:1000px) { .wyr { grid-template-columns:1fr; } }
@media (max-width:420px) { .wyr-o { grid-template-columns:1fr; } }

/* wyroznienia: ZWYCIEZCA - duzy zloty kafel z poswiata */
.wyr-o { align-items:start; }
.mw { position:relative; border:2px solid var(--zloto); background:radial-gradient(ellipse at 50% 12%,rgba(255,200,61,.26),transparent 72%),#12151a;
  box-shadow:0 0 26px rgba(255,200,61,.18); padding:34px 14px 14px; margin-top:12px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.mw .plak { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--zloto); color:#1a1200; padding:2px 14px;
  font:700 14px "Anton"; letter-spacing:3px; text-transform:uppercase; white-space:nowrap; box-shadow:0 0 14px rgba(255,200,61,.5); }
.mw .ram { position:relative; width:128px; height:128px; margin:14px 0 12px; }
/* poswiata "oddycha": animujemy tylko opacity i transform jednego elementu (tanie takze na telefonie) */
.mw .ram::before { content:""; position:absolute; inset:-26px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,61,.85),rgba(255,200,61,.25) 45%,transparent 70%); animation:blask 3s ease-in-out infinite; will-change:opacity,transform; }
.mw .ram .awatar { position:relative; width:128px; height:128px; outline:4px solid var(--zloto); outline-offset:3px; box-shadow:0 0 26px rgba(255,200,61,.6); }
.mw .ram .kor { position:absolute; z-index:1; top:-38px; left:50%; transform:translateX(-50%); font-size:42px; line-height:1; text-shadow:0 0 14px rgba(255,200,61,.95),0 2px 0 #7a5200; }
@keyframes blask { 50% { opacity:.4; transform:scale(1.14); } }
@media (prefers-reduced-motion:reduce) { .mw .ram::before { animation:none; } }
.mw b { font:700 26px/1.15 "Anton"; letter-spacing:1px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mw .ile { font:700 34px/1.1 "Anton"; color:var(--ziel); margin-top:2px; } .mw .ile small { font-size:17px; color:var(--szary); margin-left:4px; }
.mw .info { color:var(--szary); font-size:15px; line-height:1.3; }
.mw .wyk { width:100%; margin-top:10px; padding:8px 10px 6px; background:rgba(0,0,0,.28); border:1px solid rgba(255,200,61,.25); }
.mw .wyk svg { width:100%; height:56px; display:block; overflow:visible; }
.mw .wyk div { display:flex; justify-content:space-between; font:700 14px "Anton"; color:var(--szary); margin-top:4px; } .mw .wyk div span:last-child { color:var(--zloto); }
/* pusty stan: maly i skromny pasek */
.mp { position:relative; display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border:1px dashed var(--linia); color:var(--szary); cursor:help; outline:none; }
.mp svg { width:30px; height:30px; flex:none; opacity:.5; }
.mp div { line-height:1.25; min-width:0; } .mp .t2 { display:block; font:500 11px "Anton"; letter-spacing:2px; text-transform:uppercase; }
.mp b { display:block; font:700 15px "Anton"; letter-spacing:1px; color:var(--tekst); } .mp span.k { font-size:13px; }
.mp[data-tip]:hover::after, .mp[data-tip]:focus::after { left:0; }
/* "Prowadzi" z malym awatarem */
.pw { display:flex; align-items:center; gap:10px; margin-top:8px; padding:7px 10px; background:rgba(255,255,255,.03); border:1px solid var(--linia); }
.pw .awatar { width:38px; height:38px; flex:none; }
.pw > div { min-width:0; flex:1; line-height:1.2; } .pw .t2 { display:block; color:var(--szary); font:500 11px "Anton"; letter-spacing:2px; text-transform:uppercase; white-space:nowrap; }
.pw b { font:700 17px "Anton"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.pw .plus { flex:none; font:700 17px "Anton"; white-space:nowrap; text-align:right; line-height:1.15; } .pw .plus small { display:block; color:var(--szary); font:600 12px "Chakra Petch"; }
.pw.nikt { color:var(--szary); }
.pw.nikt b { color:var(--szary); font-weight:400; }
.pw .awatar.pusty { display:block; box-sizing:border-box; border:1px dashed rgba(255,255,255,.28); background:rgba(255,255,255,.02); }
.mp span.k { white-space:nowrap; }   /* krotka data "do 31.10 • 28 dni" - nigdy na 2 linie */
@media (max-width:760px) { .wyr-o { grid-template-columns:1fr; gap:16px; } .mw .ile { font-size:36px; } .mw .info { font-size:16px; } .mw .wyk svg { height:64px; } }
/* ROWNE OKIENKA (Czako 3.10): na szerokim ekranie naglowek bloku, gorne okienka i pola "Prowadzi" leza w TYCH SAMYCH
   wierszach calej sekcji (subgrid przez .wyr > .wyr-b > .wyr-o > .wyr-k) - 4 okienka rownej wysokosci, 4 "Prowadzi" w linii */
@media (min-width:1001px) {
  .wyr { grid-template-rows:auto auto auto; }
  .wyr-b { display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; }
  .wyr-o { grid-row:span 2; grid-template-rows:subgrid; align-items:stretch; row-gap:0; }
  .wyr-k { display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0; }
}
.gracz.mistrz b.n3 { font-size:14px; line-height:2.1; }   /* koronka + dlugi nick w jednej linii */

/* karta: rowna wysokosc, nick i pola zawsze w jednej linii, plakietki tytulow na gornej krawedzi */
.ekipa { grid-auto-rows:1fr; }
.gracz { position:relative; }
.gracz .gi { min-height:104px; }
.gracz b.nick { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gracz b.n2 { font-size:19px; } .gracz b.n3 { font-size:16px; line-height:1.9; }
.gracz dl > div { display:flex; gap:6px; white-space:nowrap; } .gracz dt { flex:none; } .gracz dd { overflow:hidden; text-overflow:ellipsis; }
.tytuly { position:absolute; left:10px; right:10px; bottom:calc(100% - 10px); display:flex; flex-wrap:wrap-reverse; gap:3px; pointer-events:none; }
.tytuly .tytul { margin:0; white-space:nowrap; }
/* ranking: maly awatar przy nicku */
.ranking ol.faceit li { grid-template-columns:26px 32px 30px minmax(0,1fr) auto 56px; }   /* minmax: dlugi nick nie rozpycha wiersza */
.ranking ol.premier li { grid-template-columns:26px 30px minmax(0,1fr) auto 56px; }
.ranking li .awatar { width:28px; height:28px; }
@media (max-width:480px) {   /* telefon: ciasniej, zeby nick sie miescil */
  .ranking li { gap:6px; padding:6px 4px; } .ranking li b, .ranking .elo { font-size:16px; } .ranking li .awatar { width:24px; height:24px; }
  .ranking ol.faceit li { grid-template-columns:18px 26px 24px minmax(0,1fr) auto 42px; } .ranking ol.premier li { grid-template-columns:18px 24px minmax(0,1fr) auto 42px; }
  .ranking li svg.lvl { width:26px; height:26px; } .ranking .pr { font-size:16px; padding:0 7px 0 6px; }
}

/* karta: zakladki FACEIT | Premier */
.gracz > div.kt, .gracz > div[data-tresc] { flex:1 0 100%; }
.kt { display:flex; border-top:1px solid var(--linia); margin-top:2px; }
.kt button { flex:1; background:none; border:0; border-bottom:3px solid transparent; color:var(--szary); padding:8px 4px 6px;
  font:700 14px "Anton"; letter-spacing:2px; text-transform:uppercase; cursor:pointer; }
.kt button.akt { color:#fff; border-bottom-color:var(--fc); }
[data-tresc] > .fc { border-top:0; padding-top:8px; }
/* rating Premier: wlasna plakietka w kolorze z gry (bez grafik Valve) */
.pr { display:inline-flex; align-items:baseline; gap:1px; padding:1px 14px 1px 12px; font:700 26px "Anton"; color:var(--k);
  background:linear-gradient(90deg,color-mix(in srgb,var(--k) 30%,transparent),color-mix(in srgb,var(--k) 8%,transparent));
  border-left:5px solid var(--k); transform:skewX(-12deg); }
.pr > * { transform:skewX(12deg); } .pr small { font-size:17px; opacity:.85; }
.ranking .pr { font-size:18px; padding:0 10px 0 8px; } .ranking .pr small { font-size:13px; }
.forma .R { background:rgba(255,255,255,.1); color:var(--szary); }
.lf { display:inline-block; margin-top:8px; color:#F84982; font:700 14px "Chakra Petch"; }
.przel { display:inline-flex; border:1px solid var(--linia); margin-bottom:8px; }
.przel button { background:none; border:0; color:var(--szary); padding:4px 12px; font:700 13px "Anton"; letter-spacing:2px; text-transform:uppercase; cursor:pointer; }
.przel button.akt { background:var(--fc); color:#120600; }

/* poradnik "Jak dolaczyc?" */
.gracz.dolacz .btn { margin-top:8px; }
dialog.por { background:var(--panel); color:var(--tekst); border:1px solid var(--fc); padding:0; width:min(640px,calc(100vw - 24px)); max-height:calc(100vh - 24px); margin:auto; }
dialog.por::backdrop { background:rgba(0,0,0,.7); }
.por-g { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--linia); position:sticky; top:0; background:var(--panel); z-index:1; }
.por-g h2 { margin:0; font-size:22px; } .por-x { background:none; border:1px solid var(--linia); color:#fff; width:40px; height:36px; font-size:20px; cursor:pointer; }
.por-t { padding:6px 18px 18px; }
.krok { display:grid; grid-template-columns:40px 1fr; gap:4px 12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.krok > * { grid-column:2; min-width:0; }
.krok > i { grid-column:1; grid-row:1 / span 6; width:36px; height:36px; display:grid; place-items:center; background:var(--fc); color:#120600; font:700 18px "Anton"; font-style:normal; }
.krok > i.op { background:none; border:2px solid var(--szary); color:var(--szary); }
.krok b { font:700 18px "Anton"; letter-spacing:1px; } .krok p { color:var(--szary); font-size:16px; line-height:1.35; }
.kop { display:flex; gap:8px; align-items:center; margin:4px 0; }
.kop code { flex:1; padding:6px 10px; overflow-wrap:anywhere; font-size:15px; }
.kop button { flex:none; background:rgba(255,122,26,.12); border:1px solid var(--fc); color:#fff; padding:5px 10px; font:700 13px "Anton"; letter-spacing:1px; text-transform:uppercase; cursor:pointer; }
.por-info { background:rgba(78,163,255,.08); border-left:4px solid var(--ct); padding:10px 12px; margin-top:14px; font-size:16px; color:var(--szary); }
.por-info b { color:var(--tekst); }
@media (max-width:760px) { .ranking { grid-template-columns:1fr; } }

/* TeamSpeak */
.drzewo { list-style:none; padding:0; min-height:300px; } .drzewo li { display:flex; gap:10px; align-items:center; padding:7px 10px; margin:0; border-bottom:1px solid rgba(255,255,255,.05); }
.drzewo li::before { content:""; width:10px; height:10px; border:2px solid var(--szary); border-radius:2px; flex:none; }
.drzewo li.sek { color:var(--fc); font:700 16px "Anton"; letter-spacing:3px; border-bottom-color:var(--linia); margin-top:8px; } .drzewo li.sek::before { display:none; }
.drzewo li.pod { padding-left:34px; } .drzewo li em { margin-left:auto; font-style:normal; color:var(--ziel); font-size:15px; }
.komendy { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-items:start; } .komendy code { justify-self:start; white-space:nowrap; }
@media (max-width:420px) { .komendy { grid-template-columns:1fr; gap:2px; } .komendy span { margin-bottom:8px; } }
details { border:1px solid var(--linia); background:rgba(255,255,255,.03); margin:8px 0; }
summary { cursor:pointer; padding:12px 14px; font:700 17px "Anton"; letter-spacing:1px; list-style:none; display:flex; justify-content:space-between; }
summary::after { content:"+"; color:var(--fc); } details[open] summary::after { content:"–"; }
details > div { padding:0 14px 14px; color:var(--szary); } details > div b { color:var(--tekst); }

/* Jak wejsc - zakladki */
.zakladki { display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--linia); margin-bottom:18px; }
.zakladki button { background:none; border:0; border-bottom:3px solid transparent; color:var(--szary); padding:10px 14px; font:700 15px "Anton"; letter-spacing:2px; text-transform:uppercase; cursor:pointer; }
.zakladki button.akt { color:#fff; border-bottom-color:var(--fc); }
.poradnik { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.ekran { border:1px solid var(--linia); background:#0e1115; }
.ekran figcaption { font-size:14px; color:var(--szary); padding:6px 10px; border-top:1px solid var(--linia); }

/* wejscie sekcji przy przewijaniu: tresc ZAWSZE widoczna, animacja tylko przesuwa (bez przezroczystosci),
   i tylko gdy JS oznaczyl sekcje jako "czeka" - bez JS / przy bledzie nic sie nie chowa */
.pokaz.czeka { transform:translateY(18px); } .pokaz { transition:transform .5s ease-out; }

footer { border-top:1px solid var(--linia); color:var(--szary); padding:22px 0 40px; font-size:15px; margin-top:40px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }

@media (max-width:760px) {
  nav { display:none; position:absolute; top:62px; left:0; right:0; flex-direction:column; gap:0; background:#0b0d10; border-bottom:1px solid var(--linia); }
  nav.otwarte { display:flex; } nav a { padding:14px 16px; border-bottom:1px solid var(--linia); }
  .menu { display:block; } header .wesprzyj { display:none; }
  .plan { grid-template-columns:1fr; } .plan div { min-height:0; } .plan div:not(.s):not(.sp) { display:none; }
  .poradnik { grid-template-columns:1fr; } .odlicz div { min-width:62px; } .odlicz b { font-size:28px; }
  .hud { padding:24px 14px 16px; }
}

/* ===== ODSWIEZENIE 10.2026 (bez Wan, bez bibliotek). reduced-motion = wszystko statyczne ===== */
@media (max-width:900px) { header .wesprzyj { display:none; } }   /* 5 linkow w menu - przycisk Wesprzyj zostaje w stopce */

/* LOGO W HERO (8.10, wariant C po ok Czako; zamiast plonacego napisu): celownik SVG + napis z ukosnym cieciem,
   kolory jak logo w menu. Ciecie = dwie kopie napisu przyciete clip-path; obraca sie tylko pierscien celownika (co 7 s). */
.hero .nad, .hero .lead { position:relative; z-index:1; }
h1.wm { display:flex; align-items:center; gap:clamp(14px,2vw,26px); margin:6px 0 14px; font:400 clamp(58px,10.5vw,124px)/1 "Anton",sans-serif;
  letter-spacing:.015em; color:#F4F1EC; text-shadow:none; }
h1.wm .znak { width:clamp(52px,8.6vw,102px); height:auto; flex:none; overflow:visible; }
h1.wm .obrot { transform-origin:50px 50px; animation:wm-obrot 7s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes wm-obrot { 0%, 82% { transform:rotate(0); } 100% { transform:rotate(90deg); } }
h1.wm .wm-t { position:relative; display:inline-block; }
h1.wm b { color:var(--fc); font-weight:400; }
h1.wm .gora { display:block; clip-path:polygon(0 0, 100% 0, 100% 30%, 0 64%); transform:translateX(.04em); animation:wm-g .7s cubic-bezier(.16,1,.3,1) both; }
h1.wm .dol { position:absolute; inset:0; clip-path:polygon(0 70%, 100% 36%, 100% 100%, 0 100%); animation:wm-d .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes wm-g { from { transform:translateX(-.25em); opacity:0; } }
@keyframes wm-d { from { transform:translateX(.25em); opacity:0; } }
@media (max-width:700px) { h1.wm { font-size:12vw; gap:12px; margin:14px 0 10px; } h1.wm .znak { width:11vw; } }
@media (prefers-reduced-motion:reduce) { h1.wm .obrot, h1.wm .gora, h1.wm .dol { animation:none; } }
/* zar w tle calej strony (plotno w .tlo; JS) */
.tlo canvas.zar { position:absolute; inset:0; width:100%; height:100%; }

/* karty graczy i kafle planu: wjazd po kolei (klase dodaje JS dopiero gdy element wchodzi na ekran - bez JS nic sie nie chowa) */
.wjazd { animation:wjazd-k .6s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--i,0) * 80ms); }
@keyframes wjazd-k { from { opacity:0; transform:translateY(26px) scale(.97); } }
/* tilt + poswiata pod kursorem (tylko mysz, JS ustawia --rx --ry --mx --my) */
.gracz.tilt { transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-3px); transition:transform .12s, border-color .2s;
  border-color:var(--fc); box-shadow:0 18px 40px -22px rgba(255,122,26,.7);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,122,26,.13),transparent 70%),#14181e; }
.gracz.mistrz.tilt { border-color:var(--zloto); }
/* najblizszy stream w planie: pulsuje zarem (animujemy tylko opacity warstwy - tanie) */
.kl-dzien.nast::after { content:""; position:absolute; inset:-1px; pointer-events:none; opacity:.2;
  box-shadow:0 0 34px 3px rgba(255,122,26,.6), inset 0 0 26px rgba(255,122,26,.28); animation:zar-puls 2.6s ease-in-out infinite; }
@keyframes zar-puls { 50% { opacity:1; } }

/* REKLAMA (tradeit.gg, link partnerski): max 2 miejsca na stronie glownej, zawsze z dopiskiem "Reklama" i 18+ */
.rek { position:relative; display:block; overflow:hidden; text-decoration:none; border:1px solid rgba(46,197,255,.35);
  background:linear-gradient(110deg,rgba(46,197,255,.10),rgba(255,122,26,.08) 60%,rgba(11,13,16,.6)),#10141a; }
.rek::after { content:""; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;   /* blysk przesuwajacy sie po banerze */
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent); transform:translateX(-120%); animation:rek-blysk 5s ease-in-out 1.5s infinite; }
@keyframes rek-blysk { 40%, 100% { transform:translateX(300%); } }
.rek:hover { border-color:var(--ct); }
.rek-info { font:600 12px "Chakra Petch"; color:var(--szary); letter-spacing:1px; }
.rek-18 { display:inline-grid; place-items:center; min-width:34px; height:22px; padding:0 5px; border:2px solid var(--czer); color:#ff6b7d; font:400 13px "Anton"; letter-spacing:1px; }
.rek-g { display:flex; align-items:center; gap:10px; }
.rek b.rek-nazwa { font:400 34px/1 "Anton"; letter-spacing:2px; color:#fff; } .rek b.rek-nazwa i { font-style:normal; color:var(--ct); }
.rek p { color:var(--szary); font-size:16px; line-height:1.35; }
.rek .uwaga { font-size:13px; color:var(--szary); opacity:.85; }
/* animacja wymiany: dwa skiny (nasze sylwetki broni) zamieniaja sie miejscami, strzalki migaja */
.wym { position:relative; display:flex; align-items:center; gap:10px; }
.wym .sk { width:96px; height:64px; display:grid; place-items:center; border:1px solid var(--linia); background:rgba(0,0,0,.35); }
.wym .sk svg { width:76px; height:38px; color:var(--fc); } .wym .sk.b svg { color:var(--ct); }
.wym .sk.a { animation:wym-a 4s ease-in-out infinite; } .wym .sk.b { animation:wym-b 4s ease-in-out infinite; }
.wym .str { width:26px; text-align:center; font:400 26px "Anton"; color:var(--ct); animation:puls 1.3s infinite; }
@keyframes wym-a { 0%, 35% { transform:none; } 50%, 85% { transform:translateX(calc(100% + 46px)); } 100% { transform:none; } }
@keyframes wym-b { 0%, 35% { transform:none; } 50%, 85% { transform:translateX(calc(-100% - 46px)); } 100% { transform:none; } }
/* duzy pas pod "Kiedy live" */
.rek-duza { margin:30px 0; } .rek-w { text-decoration:none; color:inherit; } .rek-mala > .szary { display:block; }
.rek-duza .rek-w { display:grid; grid-template-columns:1fr auto auto; gap:14px 26px; align-items:center; padding:20px 22px; }
.rek-duza .rek-t { display:grid; gap:6px; min-width:0; }
.rek-duza .rek-t p { max-width:560px; }
/* maly kafel w prawej kolumnie */
.rek-mala { padding:14px 16px; }
.rek-mala .rek-g { justify-content:space-between; margin-bottom:6px; }
.rek-mala b.rek-nazwa { font-size:26px; display:block; margin:4px 0; }
.rek-mala .wym { margin:8px 0 6px; } .rek-mala .wym .sk { width:64px; height:44px; } .rek-mala .wym .sk svg { width:52px; height:26px; }
.rek-mala .wym .str { width:20px; font-size:20px; }
@keyframes wym-a-m { 0%, 35% { transform:none; } 50%, 85% { transform:translateX(calc(100% + 40px)); } 100% { transform:none; } }
.rek-mala .wym .sk.a { animation-name:wym-a-m; }
.rek-mala .wym .sk.b { animation-name:wym-b-m; }
@keyframes wym-b-m { 0%, 35% { transform:none; } 50%, 85% { transform:translateX(calc(-100% - 40px)); } 100% { transform:none; } }
@media (max-width:900px) {
  .rek-mala { display:none; }   /* telefon/tablet: jedna, kompaktowa reklama zamiast dwoch blisko siebie */
  .rek-duza .rek-w { grid-template-columns:1fr; padding:16px 14px; gap:10px; }
  .rek-duza .wym { display:none; }
  .rek-duza b.rek-nazwa { font-size:28px; } .rek-duza .rek-t p { font-size:15px; }
  .rek-duza .btn { justify-content:center; }
}

/* DOLACZ - formularz */
.form { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.form .cale { grid-column:1 / -1; }
.pole { display:grid; gap:6px; min-width:0; }
.pole > label, .pole > legend, .pole > .et { font:400 14px "Anton"; letter-spacing:2px; text-transform:uppercase; color:var(--tekst); }
.pole .wym-g { color:var(--fc); }
.pole input[type=text], .pole input[type=url], .pole select, .pole textarea { width:100%; background:#0e1115; border:1px solid var(--linia); color:var(--tekst);
  font:600 17px "Chakra Petch",sans-serif; padding:10px 12px; border-radius:0; }
.pole textarea { min-height:120px; resize:vertical; line-height:1.4; }
.pole input:focus, .pole select:focus, .pole textarea:focus { outline:2px solid var(--fc); outline-offset:0; border-color:var(--fc); }
.pole .pod { font-size:14px; color:var(--szary); line-height:1.3; }
.pole .zle { font-size:14px; color:#ff6b7d; min-height:0; }
.pole.blad input, .pole.blad textarea { border-color:#ff6b7d; }
fieldset.pole { border:0; padding:0; margin:0; }
.wybor { display:flex; flex-wrap:wrap; gap:10px; }
.wybor label, .zgoda { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:16px; line-height:1.35; }
.pole > label.zgoda { font:600 16px/1.35 "Chakra Petch",sans-serif; text-transform:none; letter-spacing:0; color:var(--szary); }
.wybor label { align-items:center; border:1px solid var(--linia); background:rgba(255,255,255,.03); padding:8px 14px; font:400 16px "Anton"; letter-spacing:2px; }
.wybor label:has(input:checked) { border-color:var(--fc); background:rgba(255,122,26,.14); }
.form input[type=checkbox] { width:20px; height:20px; flex:none; accent-color:var(--fc); margin-top:1px; }
.licznik { justify-self:end; font-size:13px; color:var(--szary); } .licznik.koniec { color:var(--fc); }
.miod { position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }   /* pulapka na boty - czlowiek tego nie widzi */
.wyslij { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.wyslij .btn { font-size:18px; padding:12px 26px; } .wyslij .btn[disabled] { opacity:.6; cursor:wait; }
.komunikat { padding:12px 14px; border-left:4px solid var(--ct); background:rgba(46,197,255,.08); font-size:16px; }
.komunikat.zly { border-left-color:var(--czer); background:rgba(229,35,59,.1); }
.komunikat.ok { border-left-color:var(--ziel); background:rgba(61,220,132,.1); }
.sukces { text-align:center; padding:26px 10px; display:grid; gap:10px; justify-items:center; }
.sukces b { font:400 34px/1.1 "Anton"; letter-spacing:2px; text-transform:uppercase; color:var(--ziel); }
.dane-info { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.dane-info div { background:rgba(255,255,255,.03); border:1px solid var(--linia); padding:12px 14px; font-size:15px; color:var(--szary); line-height:1.4; }
.dane-info b { display:block; color:var(--tekst); font:400 15px "Anton"; letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
@media (max-width:760px) { .form { grid-template-columns:1fr; } }

/* BotRix na kanaly.html: komendy | sklep + TOP 5 */
.br { display:grid; grid-template-columns:1.6fr 1fr; gap:22px; }
.br ul, .br ol { list-style:none; display:grid; gap:8px; margin:0 !important; padding:0 !important; }
.br li { display:flex; gap:10px; align-items:baseline; padding:8px 12px; background:rgba(255,255,255,.03); border:1px solid var(--linia); font-size:15px; line-height:1.4; }
.br-kom code { color:var(--fc); font:400 17px "Anton"; letter-spacing:1px; min-width:132px; white-space:nowrap; background:none; padding:0; }
.br-kom span { overflow-wrap:anywhere; } .br-kom a { color:var(--ct); }
.br-sklep em, .br-top em { margin-left:auto; font:400 18px "Anton"; color:var(--fc); font-style:normal; white-space:nowrap; }
.br-top { counter-reset:t; } .br-top li::before { counter-increment:t; content:counter(t); font:400 18px "Anton"; color:var(--ct); width:18px; }
.br-top li:first-child { border-color:var(--fc); box-shadow:0 0 18px rgba(255,122,26,.2); }
@media (max-width:900px) { .br { grid-template-columns:1fr; } .br-kom li { flex-direction:column; gap:2px; } }
/* ===== NOWE FUNKCJE (Czako "ok wszystko" 7.10, makieta makiety/nowe_funkcje.html) ===== */
/* 1 LIVE TERAZ: pas tylko gdy status.json mowi live */
.na-zywo { position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin:24px 0 0; padding:18px 22px;
  border:2px solid var(--czer); background:radial-gradient(ellipse at 15% 0,rgba(229,35,59,.38),transparent 60%),linear-gradient(120deg,#1a0b0e,#0e1115); }
.na-zywo .znak-live { display:inline-flex; align-items:center; gap:8px; background:var(--czer); color:#fff; padding:3px 12px; font:400 15px "Anton"; letter-spacing:3px; }
.na-zywo .znak-live i { width:9px; height:9px; border-radius:50%; background:#fff; animation:puls 1s infinite; }
.na-zywo .nz-t { flex:1 1 320px; min-width:0; }
.na-zywo h2 { font-size:clamp(26px,4vw,40px); line-height:1.05; margin:8px 0 4px; }
.na-zywo .meta { display:flex; flex-wrap:wrap; gap:4px 16px; color:var(--szary); font-size:15px; } .na-zywo .meta b { color:var(--tekst); }
.na-zywo .przyciski { margin-top:0; }
/* 2 klipy tygodnia: duzy kafel + mniejsze */
.klipy.tydz { grid-template-columns:2fr 1fr 1fr; }
.klipy.tydz .klip:first-child { grid-row:span 2; display:grid; grid-template-rows:1fr auto; }
.klipy.tydz .klip:first-child .m { aspect-ratio:auto; min-height:220px; }
.klip .m .play { position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%; border:2px solid #fff; display:grid; place-items:center; font-size:16px; opacity:.85; }
.klip .tag.tt { left:auto; right:8px; background:var(--ct); }
@media (max-width:760px) { .klipy.tydz { grid-template-columns:1fr 1fr; } .klipy.tydz .klip:first-child { grid-column:1 / -1; grid-row:auto; } .klipy.tydz .klip:first-child .m { min-height:180px; }
  .klipy.tydz .klip:not(:first-child) .play { width:34px; height:34px; font-size:13px; top:22px; } }
/* 3 mapy ekipy */
.mapy { display:grid; gap:8px; }
.mapa { display:grid; grid-template-columns:150px 1fr 90px; gap:12px; align-items:center; }
.mapa b { font:400 20px "Anton"; letter-spacing:1px; white-space:nowrap; } .mapa b svg.ig { width:20px; height:20px; vertical-align:-3px; }
.mapa:first-child b { color:var(--fc); }
.mapa .pas { height:22px; background:rgba(255,255,255,.05); position:relative; overflow:hidden; }
.mapa .pas i { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#b8160a,var(--fc),#ffd23a); transform-origin:left; }
.mapa.wjazd .pas i { animation:rosnij 1.1s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--i,0) * 80ms + .15s); }
@keyframes rosnij { from { transform:scaleX(0); } }
.mapa > span { text-align:right; color:var(--szary); font-size:15px; white-space:nowrap; }
@media (max-width:600px) { .mapa { grid-template-columns:96px 1fr 70px; gap:8px; } .mapa b { font-size:16px; } .mapa b svg.ig { display:none; } .mapa > span { font-size:13px; } }
/* 4 historia gracza tygodnia/miesiaca: os czasu */
.os { position:relative; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:34px 14px; padding-top:24px; }
/* kazdy wpis ma wlasny kawalek osi nad soba (przedluzony o odstep) - kilka rzedow = kilka ciaglych linii z kropkami */
.wpis::after { content:""; position:absolute; left:0; top:-16px; width:calc(100% + 14px); height:3px; background:rgba(255,200,61,.45); }
.wpis.trwa::after { background:rgba(255,255,255,.12); }
.wpis { position:relative; background:#14181e; border:1px solid var(--linia); padding:14px; display:grid; grid-template-columns:48px 1fr; gap:4px 12px; align-items:center; }
.wpis::before { content:""; position:absolute; z-index:1; top:-22px; left:14px; width:14px; height:14px; border-radius:50%; background:var(--zloto); box-shadow:0 0 12px var(--zloto); }
.wpis .awatar { width:48px; height:48px; grid-row:span 3; }
.wpis .k { font:400 12px "Anton"; letter-spacing:2px; color:var(--szary); text-transform:uppercase; }
.wpis b { font:400 22px/1.1 "Anton"; letter-spacing:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wpis .g { font-size:14px; color:var(--szary); } .wpis .g .plus { font-weight:700; }
.wpis.premier .k { color:var(--ct); }
.wpis .awatar.pusty { display:block; border:1px dashed rgba(255,255,255,.28); background:rgba(255,255,255,.02); }
.wpis.trwa { border-style:dashed; } .wpis.trwa::before { background:#3a3f47; box-shadow:none; } .wpis.trwa b { color:var(--szary); }
@media (max-width:600px) {
  .os { grid-template-columns:1fr; gap:14px; padding:0 0 0 26px; } .wpis::after { display:none; }
  .os::before { content:""; position:absolute; left:8px; right:auto; top:0; bottom:0; width:3px; height:auto; background:linear-gradient(180deg,var(--zloto),rgba(255,200,61,.1)); }
  .wpis::before { top:50%; margin-top:-7px; left:-25px; }
}
/* 5 zbiorka na serwer */
.zb { display:grid; grid-template-columns:1.4fr 1fr; gap:22px; align-items:center; }
.zb .kwota { font:400 46px/1 "Anton"; color:var(--fc); } .zb .kwota small { font-size:22px; color:var(--szary); margin-left:6px; }
.zb .postep { height:26px; margin:12px 0 8px; background:rgba(255,255,255,.06); border:1px solid var(--linia); position:relative; overflow:hidden; }
.zb .postep i { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#b8160a,var(--fc),#ffd23a); transform-origin:left; }
.zb .postep i::after { content:""; position:absolute; right:0; top:0; bottom:0; width:24px; background:radial-gradient(circle at 100% 50%,#fff6c8,transparent 70%); }
.zb.wjazd .postep i { animation:rosnij 1.4s cubic-bezier(.2,.7,.2,1) backwards .2s; }
.zb .proc { font:400 26px "Anton"; color:var(--tekst); }
.zb-info { display:grid; gap:8px; }
.zb-info div { background:rgba(255,255,255,.03); border:1px solid var(--linia); padding:10px 12px; font-size:15px; color:var(--szary); line-height:1.4; }
.zb-info b { color:var(--tekst); }
/* TOP 5 wspierajacych (15.10) - te same dane i aliasy co panel TOP 5 w OBS */
.zb-top { list-style:none; margin:0; padding:10px 12px; background:rgba(255,255,255,.03); border:1px solid var(--linia); counter-reset:zb; }
.zb-top .e { font:600 13px "Chakra Petch"; letter-spacing:1px; text-transform:uppercase; color:var(--szary); margin-bottom:6px; }
.zb-top li { display:flex; gap:10px; align-items:baseline; padding:5px 0; border-top:1px solid var(--linia); counter-increment:zb; }
.zb-top li::before { content:counter(zb); font:400 20px "Anton"; color:var(--fc); width:18px; }
.zb-top li:first-of-type { border-top:0; }
.zb-top li b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 16px "Chakra Petch"; color:var(--tekst); }
.zb-top li span { font:600 16px "Chakra Petch"; color:var(--fc); }
@media (max-width:760px) { .zb { grid-template-columns:1fr; } .zb .kwota { font-size:38px; } }

@media (prefers-reduced-motion:reduce) {
  .wjazd, .kl-dzien.nast::after, .rek::after, .wym .sk, .wym .str, .mapa .pas i, .zb .postep i, .na-zywo .znak-live i { animation:none !important; }
  .gracz.tilt { transform:none; }
}

/* ===== YouTube Bandacrew (9.10): ikonka w menu + Najnowsze shorty (kafle 9:16, telefon = przewijanie w poziomie) ===== */
nav a.yt { display:flex; align-items:center; gap:8px; }
nav a.yt svg { width:24px; height:24px; } nav a.yt span { display:none; }
.btn svg.yt-i { width:20px; height:20px; }
.shorty { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.short { background:#161a20; border:1px solid var(--linia); text-decoration:none; transition:.2s; display:block; }
.short:hover { border-color:var(--fc); transform:translateY(-2px); }
.short .m { aspect-ratio:9/16; background:#101216 center/cover; position:relative; }   /* hqdefault 4:3 - cover wycina czarne pasy shorta */
.short .play { position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%; border:2px solid #fff; background:rgba(11,13,16,.45);
  display:grid; place-items:center; font-size:16px; opacity:.85; }
.short p { padding:8px 10px; font-size:16px; line-height:1.3; } .short p span { display:block; color:var(--szary); font-size:13px; }
.shorty-pusto { grid-column:1 / -1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:22px; border:1px dashed var(--linia);
  background:rgba(255,255,255,.03); }
.shorty-pusto b { font:400 28px/1.1 "Anton"; letter-spacing:1px; color:var(--fc); }
@media (max-width:760px) {
  nav a.yt span { display:inline; }
  .shorty { grid-template-columns:1fr; }
  .shorty:has(.short) { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:62%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
  .short { scroll-snap-align:start; }
}

/* GTA 6 na streamie (9.10): nasza paleta, sam tekst "GTA 6" */
/* wariant B "Zachod slonca" (Czako 11.10): tlo z ComfyUI (palmy, bez grafik Rockstar), tekst zostaje HTML */
.gta { border-color:rgba(255,122,26,.55); background:linear-gradient(90deg, rgba(11,11,15,.94) 0%, rgba(11,11,15,.78) 45%, rgba(11,11,15,.25) 100%), url(/gta/tlo_b.webp?v=1) center 62%/cover no-repeat var(--panel); }
@media (max-width:600px) { .gta { background:linear-gradient(180deg, rgba(11,11,15,.55) 0%, rgba(11,11,15,.9) 70%), url(/gta/tlo_b_maly.webp?v=1) center 40%/cover no-repeat var(--panel); } }
.gta-g { display:flex; justify-content:space-between; align-items:flex-end; gap:8px 16px; flex-wrap:wrap; }
.gta-g h2 { margin:0; font-size:40px; line-height:1; } .gta-g h2 b { color:var(--fc); }
.gta-data { font:600 18px "Chakra Petch"; color:var(--szary); letter-spacing:1px; } .gta-data b { color:var(--ct); }
.gta-t { margin:14px 0 0; font:400 30px/1.15 "Anton"; color:var(--tekst); letter-spacing:1px; }
.gta.live .gta-t { color:var(--fc); }
@media (max-width:600px) { .gta-g h2 { font-size:32px; } .gta-t { font-size:24px; } .gta-data { font-size:16px; } }

/* PRZEGLAD 11.10 (web-designer): telefon - przyciski i linki min. 44 px (palcem latwo trafic) */
@media (max-width:760px) {
  .btn, .menu, .kop button, button { min-height:44px; }
  .menu { height:44px; }
  [data-poradnik] { padding:10px 14px !important; font-size:15px !important; }
  footer a { display:inline-block; padding:12px 0; }
}
/* strona 404 */
.blad404 { padding:60px 0 20px; } .blad404 .kod { font:400 120px/1 "Anton"; color:var(--fc); letter-spacing:4px; }

/* STATUS ONLINE w Ekipie (Czako 11.10): pasek "Teraz na TS" + plakietki przy nickach; dane /online.json co 45 s */
.na-ts { display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap; border:1px solid var(--linia);
  border-left:4px solid var(--ziel); background:#14181e; padding:12px 16px; margin:0 0 18px; }
.na-ts .ile { display:flex; align-items:center; gap:12px; min-width:0; }
.na-ts .ile b { font:400 44px/1 "Anton"; color:var(--ziel); }
.na-ts .ile span { font:700 15px/1.25 "Chakra Petch"; letter-spacing:1px; text-transform:uppercase; color:var(--tekst); }
.na-ts .ile span i { display:block; font-style:normal; color:var(--szary); font-size:13px; letter-spacing:.5px; text-transform:none; }
.na-pasy { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:0 18px; }
.na-dc { border-left-color:#5865f2; }
.na-dc .ile svg { width:34px; height:34px; flex:none; }
.na-dc .ile b { color:#8d96ff; }
.na-dc .ile b.pierwszy { font-size:26px; }
.na-cs { border-left-color:var(--fc); }
.na-cs .ile svg { width:36px; height:27px; flex:none; color:var(--fc); }
.na-cs .ile b { color:var(--fc); }
.st .steam { color:var(--ct); border-color:rgba(46,197,255,.45); background:rgba(46,197,255,.08); white-space:normal; }
.st .steam.away { color:#FFC83D; border-color:rgba(255,200,61,.45); background:rgba(255,200,61,.08); }
.st .steam svg { width:15px; height:11px; flex:none; }
.st { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 8px; }
.st > * { display:inline-flex; align-items:center; gap:7px; font:700 12px/1 "Chakra Petch"; letter-spacing:1px; text-transform:uppercase;
  padding:5px 9px; border:1px solid; text-decoration:none; white-space:nowrap; max-width:100%; box-sizing:border-box; }
.st .ts { color:var(--ziel); border-color:rgba(61,220,132,.45); background:rgba(61,220,132,.08); }
.st .ts::before, .st .live::before, .st .off::before { content:""; width:8px; height:8px; border-radius:50%; flex:none; }
.st .ts::before { background:var(--ziel); box-shadow:0 0 0 3px rgba(61,220,132,.25); animation:puls-st 1.8s infinite; }
.st .gra { color:var(--fc); border-color:rgba(255,122,26,.45); background:rgba(255,122,26,.08); }
.st .gra svg { width:15px; height:11px; }
.st .live { color:#fff; background:var(--czer); border-color:var(--czer); }
.st .live::before { background:#fff; animation:puls-st 1.2s infinite; }
.st .off { color:var(--szary); border-color:var(--linia); text-transform:none; letter-spacing:.3px; font-weight:600; white-space:normal; }
.st .off::before { border:2px solid var(--szary); width:5px; height:5px; }
.gracz.online { border-color:rgba(61,220,132,.35); }
@keyframes puls-st { 50% { opacity:.45; } }
@media (prefers-reduced-motion:reduce) { .st .ts::before, .st .live::before { animation:none; } }

/* REKLAMA TRADEIT v2 - wariant B "Neon" (wybor Czako 11.10, skille grafik-pro + web-designer): tlo i karabin z ComfyUI
   (bez skinow Valve), WebP w /rek/, hover: karabin w gore + poswiata + blysk. Zostaje: Reklama, 18+, "nie inwestycja". */
.rk2 { isolation:isolate; border-color:rgba(255,122,26,.35); background:#0b0b0f; }
.rk2 .rk-tlo { position:absolute; inset:0; z-index:-1; background:url(/rek/tlo_neon_szeroki.webp?v=1) center/cover no-repeat; }
.rek-mala.rk2 .rk-tlo { background-image:url(/rek/tlo_neon_kompakt.webp?v=1); }
.rk2 .rk-tlo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,11,15,.94) 0%,rgba(11,11,15,.82) 42%,rgba(11,11,15,.15) 100%); }
.rek-mala.rk2 .rk-tlo::after { background:linear-gradient(180deg,rgba(11,11,15,.6) 0%,rgba(11,11,15,.82) 60%,rgba(11,11,15,.95) 100%); }
.rk2 b.rek-nazwa { text-shadow:0 0 18px rgba(46,197,255,.55), 0 0 2px #fff; }
.rk2 .rk-bron { position:relative; display:block; flex:none; width:390px; height:176px; }
.rk2 .rk-bron img { position:absolute; left:20px; top:14px; width:360px; height:auto; will-change:transform;
  filter:drop-shadow(0 0 10px rgba(235,75,75,.65)) drop-shadow(0 6px 10px rgba(0,0,0,.7)); transition:transform .35s cubic-bezier(.2,.8,.2,1.2), filter .35s; }
.rk2:hover .rk-bron img, .rk2:focus-within .rk-bron img, .rek-mala.rk2:focus .rk-bron img { transform:translateY(-10px) scale(1.03);
  filter:drop-shadow(0 0 22px rgba(235,75,75,.65)) drop-shadow(0 10px 14px rgba(0,0,0,.7)) brightness(1.12); }
.rk2:hover { border-color:var(--fc); box-shadow:0 0 0 1px rgba(255,122,26,.25), 0 10px 40px rgba(255,122,26,.12); }
.rk2:hover::after { animation:rek-blysk-raz .7s ease-out; }
@keyframes rek-blysk-raz { from { transform:translateX(-120%); } to { transform:translateX(300%); } }
.rek-duza.rk2 .rek-w { grid-template-columns:minmax(0,1fr) auto auto; padding:20px 26px; min-height:190px; }
.rek-mala.rk2:not([hidden]) { gap:6px; }
@media (min-width:901px) { .rek-mala.rk2 { display:grid; } }   /* <= 900 px kafel schowany (jedna reklama) */
.rek-mala.rk2 .rk-bron { width:100%; height:146px; }
.rek-mala.rk2 .rk-bron img { left:0; top:4px; width:min(280px,100%); }
@media (max-width:900px) {
  .rek-duza.rk2 .rek-w { grid-template-columns:minmax(0,1fr); gap:10px; padding:16px; }
  .rek-duza.rk2 .rk-tlo { background-image:url(/rek/tlo_neon_kompakt.webp?v=1); }
  .rek-duza.rk2 .rk-tlo::after { background:linear-gradient(180deg,rgba(11,11,15,.6) 0%,rgba(11,11,15,.85) 55%,rgba(11,11,15,.95) 100%); }
  .rek-duza.rk2 .rk-bron { width:100%; height:160px; } .rek-duza.rk2 .rk-bron img { left:0; top:6px; width:min(300px,100%); }
  .rek-duza.rk2 .btn { justify-self:start; }
}
@media (prefers-reduced-motion:reduce) { .rk2 .rk-bron img { transition:none; } .rk2:hover::after { animation:none; } }

/* 16.10 SEO: tekst tylko dla Google i czytnikow ekranu (niewidoczny) */
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* 16.10: naglowek TOP 5 jako <li> (lista ma miec same <li>) */
.zb-top li.e { display:block; counter-increment:none; border-top:0; padding:0; }
.zb-top li.e::before { content:none; }
.zb-top li.e + li { border-top:0; }

/* Karta profilu (16.10): przycisk Udostepnij na karcie w Ekipie + strona /gracz/<nick> */
.udostepnij { width:100%; margin-top:auto; background:#0b0b0f; border:1px solid var(--fc); color:#fff;
  font:700 13px/1 "Chakra Petch", sans-serif; padding:10px; min-height:44px; cursor:pointer; letter-spacing:1px; }
.udostepnij:hover, .udostepnij:focus-visible { background:var(--fc); color:#120600; }
.karta-img { display:block; width:100%; max-width:720px; height:auto; margin:18px 0; border:1px solid var(--linia); }