/* HOTBURNING — motyw konkursu: tusz, papier ryżowy, cynober i żar.
   Baza wzięta z HOTBURNING ARENA, rozbudowana o pieczęcie, żar w tle i widok pojedynku. */
:root{
  --tusz:#0b0908; --tusz2:#13100d; --tusz3:#1d1712; --tusz4:#2a2019;
  --papier:#f1e8d8; --papier-dim:#bdb09a; --papier-cien:#8c8171;
  --zar:#e8552d; --zar2:#ff8a3d; --cynober:#c8342a; --cynober2:#9a2119;
  --zloto:#d4a556; --zloto2:#f0d18a; --jadeit:#3fa87a; --blad:#d94b3a;
  --linia:rgba(212,165,86,.26); --linia2:rgba(212,165,86,.5);
  --cien:0 14px 50px rgba(0,0,0,.6);
  --font:"Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --serif:"Cinzel","Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --pas:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--papier); font-family:var(--font); font-size:15px;
  background:
    radial-gradient(1300px 780px at 50% -12%, #32221605 0%, transparent 62%),
    radial-gradient(1000px 680px at 88% 108%, #2e130f 0%, transparent 58%),
    radial-gradient(900px 600px at 6% 40%, #1a1b22 0%, transparent 60%),
    var(--tusz);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body::before{ /* ziarno papieru */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.05;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0); background-size:3px 3px;
}
#zar-tlo{position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55}
.warstwa{position:relative; z-index:1}
a{color:var(--zloto); text-decoration:none}
a:hover{color:var(--zloto2)}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; margin:0; letter-spacing:.03em}
::selection{background:var(--cynober); color:#fff}
img{max-width:100%}

/* ── pasek górny ─────────────────────────────────────────────── */
.gora{
  position:sticky; top:0; z-index:40; backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(11,9,8,.95),rgba(11,9,8,.72));
  border-bottom:1px solid var(--linia);
}
.gora .pas{display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:11px 20px; max-width:var(--pas); margin:0 auto}
.logo{display:flex; align-items:center; gap:11px; color:var(--papier)}
.logo .nazwa{font-family:var(--serif); font-size:17px; letter-spacing:.22em; text-transform:uppercase}
.logo .pod{font-size:10px; letter-spacing:.2em; color:var(--zloto); text-transform:uppercase}
.piecz{
  width:38px; height:38px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--cynober),var(--cynober2)); color:#ffe9c9;
  font-family:var(--serif); font-size:20px; font-weight:700;
  box-shadow:0 0 24px rgba(200,52,42,.45), inset 0 0 0 1px rgba(255,220,180,.25);
}
.menu{margin-left:auto; display:flex; align-items:center; gap:6px}
.menu a{padding:7px 12px; border-radius:9px; font-size:13px; color:var(--papier-dim);
        letter-spacing:.05em; transition:.15s}
.menu a:hover,.menu a.teraz{color:var(--papier); background:rgba(212,165,86,.1)}
.menu .ja{display:flex; align-items:center; gap:9px; padding:5px 11px 5px 5px; border:1px solid var(--linia);
    border-radius:999px; background:rgba(29,23,18,.7)}
.menu .ja img{width:26px; height:26px; border-radius:50%}
.menu .ja span{font-size:13px}

/* ── elementy ────────────────────────────────────────────────── */
.pas{max-width:var(--pas); margin:0 auto; padding:0 20px}
.karta{
  background:linear-gradient(180deg,rgba(29,23,18,.86),rgba(13,11,10,.9));
  border:1px solid var(--linia); border-radius:16px; box-shadow:var(--cien); position:relative;
}
.karta.zdobna::after{ /* narożniki */
  content:""; position:absolute; inset:7px; border-radius:11px; pointer-events:none;
  border:1px solid rgba(212,165,86,.12);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(180deg,var(--tusz4),var(--tusz2)); color:var(--papier);
  border:1px solid var(--linia); border-radius:11px; padding:10px 17px; font-size:14px;
  font-family:var(--font); font-weight:600; cursor:pointer; transition:.14s; letter-spacing:.02em;
}
.btn:hover{border-color:var(--zloto); transform:translateY(-1px); color:var(--papier)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.35; cursor:not-allowed; transform:none}
.btn.zar{background:linear-gradient(180deg,var(--zar),#b83c1c); border-color:#ff9a55; color:#fff;
         box-shadow:0 8px 26px rgba(232,85,45,.28)}
.btn.zar:hover{box-shadow:0 12px 34px rgba(232,85,45,.45)}
.btn.ok{background:linear-gradient(180deg,var(--jadeit),#2c7a57); border-color:#6fd3a6; color:#fff}
.btn.zle{background:linear-gradient(180deg,var(--blad),#96281a); border-color:#f08878; color:#fff}
.btn.duzy{padding:14px 28px; font-size:16px; border-radius:13px}
.btn.mini{padding:6px 10px; font-size:12px; border-radius:8px}
.btn.pusty{background:transparent}
input,select,textarea{
  background:#0a0807; color:var(--papier); border:1px solid var(--linia); border-radius:10px;
  padding:10px 12px; font-family:var(--font); font-size:14px; width:100%; transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--zloto);
  box-shadow:0 0 0 3px rgba(212,165,86,.12)}
label{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.14em;
      color:var(--papier-cien); margin:0 0 6px}
.rzad{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.pion{display:flex; flex-direction:column; gap:12px}
.muted{color:var(--papier-dim)}
.cichy{color:var(--papier-cien); font-size:12px}
.hr{height:1px; background:var(--linia); border:0; margin:18px 0}
.tag{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
     font-size:11px; border:1px solid var(--linia); color:var(--papier-dim); letter-spacing:.08em;
     text-transform:uppercase; white-space:nowrap}
.tag.zar{border-color:var(--zar); color:var(--zar2); background:rgba(232,85,45,.1)}
.tag.zloto{border-color:var(--zloto); color:var(--zloto2); background:rgba(212,165,86,.08)}
.tag.jadeit{border-color:var(--jadeit); color:#7fd9b2; background:rgba(63,168,122,.1)}
.tag.szary{opacity:.6}
.nag{font-family:var(--serif); font-size:12px; letter-spacing:.34em; text-transform:uppercase;
     color:var(--zloto); margin-bottom:10px}

/* ── nagłówek strony ─────────────────────────────────────────── */
.hero{padding:74px 0 52px; text-align:center; position:relative}
.hero h1{
  font-size:clamp(46px,8.4vw,104px); line-height:.98; letter-spacing:.06em;
  background:linear-gradient(175deg,#fff 6%,var(--zloto2) 46%,var(--zar) 108%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 26px rgba(232,85,45,.22));
}
.hero .podtyt{margin-top:14px; font-size:13px; letter-spacing:.42em; text-transform:uppercase;
              color:var(--zar2)}
.hero .lead{max-width:640px; margin:22px auto 0; color:var(--papier-dim); line-height:1.65; font-size:15px}
.kreska{width:120px; height:1px; margin:26px auto; background:linear-gradient(90deg,transparent,
        var(--zloto),transparent); position:relative}
.kreska::after{content:"◈"; position:absolute; left:50%; top:-9px; transform:translateX(-50%);
               color:var(--zloto); font-size:13px; background:var(--tusz); padding:0 8px}

/* ── karty kategorii ─────────────────────────────────────────── */
.siatka{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.kat{
  position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--linia);
  background:linear-gradient(180deg,rgba(29,23,18,.9),rgba(11,9,8,.95)); transition:.2s;
  display:flex; flex-direction:column; min-height:210px;
}
.kat:hover{transform:translateY(-4px); border-color:var(--linia2); box-shadow:0 20px 54px rgba(0,0,0,.55)}
/* kolor akcentu kategorii (panel → Kolor); bez niego zostaje żar */
.kat{--akcent:var(--zar); --akcent-rgb:232,85,45; border-color:rgba(var(--akcent-rgb),.38)}
.kat::before{content:''; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:linear-gradient(90deg,transparent,var(--akcent) 22%,var(--akcent) 78%,transparent)}
.kat:hover{border-color:var(--akcent);
  box-shadow:0 20px 54px rgba(0,0,0,.55), 0 0 42px rgba(var(--akcent-rgb),.28)}
.kat .kryj{background:radial-gradient(120% 75% at 0% 0%,rgba(var(--akcent-rgb),.24),transparent 62%),
  linear-gradient(180deg,rgba(11,9,8,.45),rgba(11,9,8,.94))}
.kat .ikona{filter:drop-shadow(0 0 12px rgba(var(--akcent-rgb),.6))}
.kat .pasek-faz i.teraz{background:var(--akcent); box-shadow:0 0 10px var(--akcent)}
/* nagłówki stron kategorii: poświata za ikoną i kreska w kolorze */
.akcentowany{--akcent:var(--zar); --akcent-rgb:232,85,45; position:relative}
.akcentowany::after{content:''; display:block; height:2px; margin-top:18px;
  background:linear-gradient(90deg,var(--akcent),rgba(var(--akcent-rgb),.25) 55%,transparent)}
.hero.akcentowany::after{margin:18px auto 0; max-width:420px;
  background:linear-gradient(90deg,transparent,var(--akcent),transparent)}
.akcentowany .ikona-akcent{filter:drop-shadow(0 0 16px rgba(var(--akcent-rgb),.7))}
.kat .tlo{position:absolute; inset:0; opacity:.2; background-size:cover; background-position:center;
          filter:saturate(.75) contrast(1.05); transition:.35s}
.kat:hover .tlo{opacity:.32; transform:scale(1.04)}
.kat .kryj{position:absolute; inset:0}
.kat .tresc{position:relative; padding:20px; display:flex; flex-direction:column; gap:10px; flex:1}
.kat .ikona{font-size:30px; line-height:1}
.kat h3{font-size:23px; letter-spacing:.06em}
.kat .opis{color:var(--papier-dim); font-size:13px; line-height:1.55; flex:1}
.kat .stopka{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pasek-faz{display:flex; gap:3px; margin-top:4px}
.pasek-faz i{height:3px; flex:1; border-radius:2px; background:rgba(212,165,86,.18)}
.pasek-faz i.zrobiona{background:var(--zloto)}
.pasek-faz i.teraz{background:var(--zar); box-shadow:0 0 10px var(--zar)}

/* ── zgłoszenia / kafelki zdjęć ──────────────────────────────── */
.zdjecia{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.kafel{position:relative; border-radius:13px; overflow:hidden; border:1px solid var(--linia);
       background:#0a0807; aspect-ratio:4/3}
.kafel img{width:100%; height:100%; object-fit:cover; display:block; transition:.3s}
.kafel:hover img{transform:scale(1.05)}
.kafel .opis{position:absolute; left:0; right:0; bottom:0; padding:10px 12px; font-size:12px;
             background:linear-gradient(180deg,transparent,rgba(0,0,0,.88))}
.kafel .rogu{position:absolute; top:8px; right:8px; display:flex; gap:6px}
.wrzut{
  border:1px dashed var(--linia2); border-radius:13px; padding:26px; text-align:center;
  background:rgba(29,23,18,.4); cursor:pointer; transition:.18s; aspect-ratio:4/3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.wrzut:hover,.wrzut.nad{border-color:var(--zar); background:rgba(232,85,45,.08); color:var(--zar2)}
.wrzut .plus{font-size:34px; color:var(--zloto)}

/* ── pojedynek ───────────────────────────────────────────────── */
.arena{display:flex; flex-direction:column; min-height:100vh}
.arena .plansza{flex:1; display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
                padding:14px; position:relative}
.strona{position:relative; border:1px solid var(--linia); border-radius:16px; overflow:hidden;
        background:#0a0807; cursor:pointer; transition:.18s; display:grid; place-items:center}
.strona img{width:100%; height:100%; object-fit:contain; display:block; transition:.25s}
.strona::after{content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
               box-shadow:inset 0 0 0 0 var(--zar); transition:.18s}
.strona:hover{border-color:var(--zar); transform:scale(1.005)}
.strona:hover::after{box-shadow:inset 0 0 0 3px var(--zar), inset 0 0 70px rgba(232,85,45,.18)}
.strona.wybrana::after{box-shadow:inset 0 0 0 4px var(--jadeit), inset 0 0 90px rgba(63,168,122,.25)}
.strona.odrzucona{opacity:.25; filter:grayscale(.6)}
.strona .klawisz{position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  padding:5px 13px; border-radius:999px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(11,9,8,.8); border:1px solid var(--linia); color:var(--papier-dim); opacity:0; transition:.2s}
.strona:hover .klawisz{opacity:1}
.miedzy{display:grid; place-items:center; padding:0 14px; min-width:96px}
.vs{width:66px; height:66px; border-radius:12px; display:grid; place-items:center;
    background:linear-gradient(145deg,var(--cynober),var(--cynober2)); color:#ffe9c9;
    font-family:var(--serif); font-size:21px; letter-spacing:.04em; transform:rotate(45deg);
    box-shadow:0 0 34px rgba(200,52,42,.5), inset 0 0 0 1px rgba(255,220,180,.3)}
.vs span{transform:rotate(-45deg)}
.arena .stopka{display:flex; align-items:center; gap:16px; padding:12px 22px;
               border-top:1px solid var(--linia); background:rgba(11,9,8,.7); flex-wrap:wrap}
.licznik{display:flex; align-items:baseline; gap:7px}
.licznik b{font-family:var(--serif); font-size:26px; color:var(--zloto2)}
.postep-belka{flex:1; min-width:140px; height:5px; border-radius:3px; background:rgba(212,165,86,.14);
              overflow:hidden}
.postep-belka i{display:block; height:100%; background:linear-gradient(90deg,var(--zar),var(--zloto));
                transition:width .4s}
@keyframes wejscie-lewo{from{opacity:0; transform:translateX(-26px)}to{opacity:1; transform:none}}
@keyframes wejscie-prawo{from{opacity:0; transform:translateX(26px)}to{opacity:1; transform:none}}
.wchodzi-l{animation:wejscie-lewo .32s ease-out}
.wchodzi-p{animation:wejscie-prawo .32s ease-out}

/* ── ranking ─────────────────────────────────────────────────── */
.podium{display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:16px; align-items:end; margin:26px 0 34px}
.stopien{text-align:center}
.stopien .ramka{border-radius:14px; overflow:hidden; border:1px solid var(--linia); position:relative;
                aspect-ratio:3/4; background:#0a0807}
.stopien.zloto .ramka{border-color:var(--zloto); box-shadow:0 0 44px rgba(212,165,86,.3)}
.stopien.srebro .ramka{border-color:#b8bdc4}
.stopien.braz .ramka{border-color:#b07a45}
.stopien img{width:100%; height:100%; object-fit:cover}
.stopien .medal{position:absolute; top:10px; left:10px; width:38px; height:38px; border-radius:9px;
  display:grid; place-items:center; font-family:var(--serif); font-size:19px; color:#241a10;
  background:linear-gradient(145deg,var(--zloto2),var(--zloto))}
.stopien.srebro .medal{background:linear-gradient(145deg,#eef1f4,#aeb4bb)}
.stopien.braz .medal{background:linear-gradient(145deg,#e0a877,#a96b38)}
.stopien .kto{margin-top:11px; font-family:var(--serif); font-size:18px}
.stopien .sila{font-size:12px; color:var(--zloto)}
.lista-rank{display:flex; flex-direction:column; gap:8px}
.wiersz{display:flex; align-items:center; gap:14px; padding:9px 13px; border-radius:12px;
        border:1px solid var(--linia); background:rgba(19,16,13,.6); transition:.15s}
.wiersz:hover{border-color:var(--linia2); background:rgba(29,23,18,.8)}
.wiersz .msc{font-family:var(--serif); font-size:19px; color:var(--zloto); width:34px; text-align:center}
.wiersz .mini{width:70px; height:52px; border-radius:8px; object-fit:cover; flex:0 0 auto}
.wiersz .kto{flex:1; min-width:0}
.wiersz .kto b{display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.belka{height:6px; border-radius:3px; background:rgba(212,165,86,.14); overflow:hidden; margin-top:6px;
       max-width:230px}
.belka i{display:block; height:100%; background:linear-gradient(90deg,var(--cynober),var(--zar),var(--zloto))}
.liczby{text-align:right; font-size:12px; color:var(--papier-dim); white-space:nowrap}
.liczby b{display:block; font-family:var(--serif); font-size:19px; color:var(--zloto2)}

/* ── drabinka finału ─────────────────────────────────────────── */
.drabinka{display:flex; gap:26px; overflow-x:auto; padding:8px 4px 20px}
.runda{display:flex; flex-direction:column; justify-content:space-around; gap:16px; min-width:260px}
.runda h4{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--zloto);
          text-align:center; margin-bottom:6px}
.para{border:1px solid var(--linia); border-radius:13px; overflow:hidden; background:rgba(19,16,13,.75)}
.para.otwarta{border-color:var(--zar); box-shadow:0 0 30px rgba(232,85,45,.18)}
.strona-pary{display:flex; align-items:center; gap:10px; padding:8px; cursor:pointer; transition:.15s;
             border-bottom:1px solid rgba(212,165,86,.12)}
.strona-pary:last-child{border-bottom:0}
.strona-pary:hover{background:rgba(232,85,45,.1)}
.strona-pary img{width:78px; height:56px; object-fit:cover; border-radius:7px; flex:0 0 auto}
.strona-pary .info{flex:1; min-width:0; font-size:12px}
.strona-pary.wygrala{background:linear-gradient(90deg,rgba(63,168,122,.2),transparent)}
.strona-pary.przegrala{opacity:.4}
.strona-pary .glosy{font-family:var(--serif); font-size:17px; color:var(--zloto2)}
.strona-pary.moj .info::after{content:" ✓ twój głos"; color:var(--jadeit)}

/* ── drobiazgi ───────────────────────────────────────────────── */
.komunikat{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(90px);
  padding:12px 22px; border-radius:12px; background:rgba(29,23,18,.97); border:1px solid var(--linia2);
  box-shadow:var(--cien); z-index:100; transition:.3s; font-size:14px; max-width:92vw; text-align:center}
.komunikat.widac{transform:translateX(-50%) translateY(0)}
.komunikat.zle{border-color:var(--blad); color:#ffb9ae}
.komunikat.dobrze{border-color:var(--jadeit); color:#a6e8c9}
.pusto{text-align:center; padding:54px 20px; color:var(--papier-cien)}
.pusto .znak{font-size:46px; opacity:.5; margin-bottom:12px}
.ladowanie{display:grid; place-items:center; padding:60px; color:var(--papier-cien)}
.ladowanie::after{content:"◈"; font-size:26px; color:var(--zloto); animation:obrot 2.2s linear infinite}
@keyframes obrot{to{transform:rotate(360deg)}}
.modal{position:fixed; inset:0; background:rgba(5,4,3,.9); backdrop-filter:blur(7px); z-index:90;
       display:grid; place-items:center; padding:24px}
.modal .okno{max-width:min(96vw,1100px); max-height:92vh; overflow:auto}
.zakladki{display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--linia); margin-bottom:20px}
.zakladki button{background:none; border:0; color:var(--papier-cien); padding:11px 15px; cursor:pointer;
  font-family:var(--font); font-size:13px; letter-spacing:.06em; border-bottom:2px solid transparent}
.zakladki button.teraz{color:var(--zloto2); border-bottom-color:var(--zar)}
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.12em;
   color:var(--papier-cien); padding:8px 10px; border-bottom:1px solid var(--linia); font-weight:600}
td{padding:9px 10px; border-bottom:1px solid rgba(212,165,86,.1)}
tr:hover td{background:rgba(212,165,86,.04)}
.stopka-strony{padding:40px 20px; text-align:center; color:var(--papier-cien); font-size:12px;
               border-top:1px solid var(--linia); margin-top:60px}

@media(max-width:820px){
  .arena .plansza{grid-template-columns:1fr; grid-template-rows:1fr auto 1fr; padding:10px; gap:8px}
  .miedzy{padding:2px 0; min-width:0}
  .vs{width:48px; height:48px; font-size:15px}
  .podium{grid-template-columns:1fr; gap:12px}
  .gora .pas{padding:9px 14px; gap:9px}
  .menu a{padding:6px 9px; font-size:12px}
  .logo .pod{display:none}
  .hero{padding:44px 0 32px}
  .wiersz .mini{width:56px; height:42px}
  .menu{gap:2px}
  .menu a{padding:6px 8px; font-size:12px}
}

/* ── turniej PvP: klocki wspólne ze stroną turnieju i panelem ─── */
.bron-ikona{color:var(--bron); flex:0 0 auto; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--bron) 45%,transparent))}
.bron-ikona .w{fill:color-mix(in srgb,var(--bron) 22%,transparent)}
.awatar{border-radius:50%; object-fit:cover; flex:0 0 auto; display:inline-grid; place-items:center;
        color:#fff; font-family:var(--serif); font-weight:700}
.ow-para{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin-top:14px}
.ow-strona{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px;
           border:1px solid var(--linia); border-radius:14px; transition:.2s; text-align:center}
.ow-strona b{font-family:var(--serif); font-size:18px}
.ow-strona.prowadzi{border-color:var(--zloto); box-shadow:0 0 30px rgba(212,165,86,.25)}
.ow-bronie{display:flex; gap:6px}
.ow-licznik{display:flex; align-items:center; gap:12px}
.ow-pkt{font-family:var(--serif); font-size:42px; color:var(--zloto2); min-width:34px; text-align:center}
@media(max-width:560px){ .ow-para{grid-template-columns:1fr; } .ow-para .vs{margin:0 auto} }

/* ── turnieje (PvP i Landlord): nagłówek, karty graczy, baner, mistrz, losowanie ── */
/* ── nagłówek turnieju ─────────────────────────────────────── */
.t-hero{padding:46px 0 26px; text-align:center; position:relative}
.t-hero .ikona-akcent{font-size:44px; display:inline-block; animation:unos 4s ease-in-out infinite}
@keyframes unos{50%{transform:translateY(-6px)}}
.t-hero h1{font-size:clamp(38px,7vw,84px); line-height:1; letter-spacing:.05em; margin-top:10px;
  background:linear-gradient(175deg,#fff 8%,var(--zloto2) 48%,var(--akcent) 110%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 30px rgba(var(--akcent-rgb),.35))}
.t-hero .podtyt{margin-top:12px; font-size:12px; letter-spacing:.38em; text-transform:uppercase; color:var(--zar2)}
.t-hero .lead{max-width:680px; margin:16px auto 0; color:var(--papier-dim); line-height:1.6}
.liczniki{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:24px}
.licz{min-width:128px; padding:12px 16px; border:1px solid var(--linia); border-radius:14px;
      background:rgba(19,16,13,.65); text-align:center}
.licz b{display:block; font-family:var(--serif); font-size:26px; color:var(--zloto2)}
.licz span{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--papier-cien)}
.licz.zegar b{color:var(--zar2)}
.sekcja-t{margin-top:34px}
.sekcja-t > .nag{display:flex; align-items:center; gap:10px}

/* ── karta wojownika ───────────────────────────────────────── */
.wojownicy{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.wojownik{position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  border:1px solid var(--linia); overflow:hidden;
  background:linear-gradient(120deg,color-mix(in srgb,var(--k1) 16%,transparent),transparent 46%,
             color-mix(in srgb,var(--k2) 12%,transparent)),rgba(15,12,10,.82)}
.wojownik::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--k1),var(--k2))}
.wojownik.ja{border-color:var(--zloto); box-shadow:0 0 26px rgba(212,165,86,.2)}
.wojownik.odpadl{opacity:.5; filter:saturate(.5)}
.wojownik .dane{flex:1; min-width:0}
.wojownik .stan{position:absolute; top:9px; right:10px}
.wojownik .stan .tag{font-size:9.5px; padding:2px 8px}
.wojownik:has(.stan) .dane b{padding-right:86px}
.wojownik .dane b{display:block; font-family:var(--serif); font-size:15px; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wojownik .zestaw{display:flex; flex-direction:column; gap:3px; margin-top:4px}
.bron-wiersz{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--papier-dim); white-space:nowrap;
  min-width:0; overflow:hidden; text-overflow:ellipsis}
.bron-wiersz i{font-style:normal; font-size:9px; letter-spacing:.12em; color:var(--papier-cien); width:16px}
.wojownik .msc{font-family:var(--serif); font-size:15px; color:var(--zloto2); white-space:nowrap}
.wojownik.wjezdza{animation:wjazd .45s ease-out both}
@keyframes wjazd{from{opacity:0; transform:translateY(12px) scale(.98)}}

/* ── baner gracza ──────────────────────────────────────────── */
.baner{display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:14px; margin-bottom:16px;
  border:1px solid var(--zar); background:linear-gradient(90deg,rgba(232,85,45,.16),rgba(19,16,13,.8))}
.baner.spokojny{border-color:var(--linia); background:rgba(19,16,13,.7)}
.baner b{font-family:var(--serif)}

/* ── mistrz i podium ───────────────────────────────────────── */
.mistrz-t{text-align:center; padding:40px 20px 34px; margin:10px 0 26px; overflow:hidden}
.pierscien{position:relative; width:168px; height:168px; margin:44px auto 18px; display:grid; place-items:center}
.pierscien::before{content:''; position:absolute; inset:-10px; border-radius:50%;
  background:conic-gradient(from 0deg,var(--zar),var(--zloto2),var(--cynober),var(--zar2),var(--zar));
  animation:obrot 5s linear infinite; filter:blur(7px); opacity:.9}
.pierscien::after{content:''; position:absolute; inset:-3px; border-radius:50%;
  background:conic-gradient(from 180deg,var(--zloto2),var(--zar),var(--zloto2)); animation:obrot 9s linear infinite reverse}
.pierscien .awatar{position:relative; z-index:1; width:150px !important; height:150px !important;
  border:4px solid #120d0a; font-size:58px !important}
.korona{position:absolute; top:-30px; left:50%; transform:translateX(-50%); z-index:2; font-size:34px;
  filter:drop-shadow(0 0 12px rgba(240,209,138,.8)); animation:unos 3s ease-in-out infinite}
.mistrz-t h2{font-size:clamp(34px,6vw,62px);
  background:linear-gradient(175deg,#fff,var(--zloto2) 50%,var(--zar)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent}
.mistrz-t .zestaw{display:flex; justify-content:center; gap:20px; margin-top:12px; flex-wrap:wrap}
.podium-t{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:620px; margin:20px auto 0}
.podium-t > div{padding:14px; border-radius:14px; border:1px solid var(--linia); display:flex; align-items:center; gap:12px;
  background:rgba(19,16,13,.7); text-align:left}
.podium-t .medal{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-family:var(--serif);
  color:#241a10; flex:0 0 auto}
.tabela-msc .wiersz{gap:12px}

/* ── losowanie ─────────────────────────────────────────────── */
.losowanie{position:fixed; inset:0; z-index:95; background:radial-gradient(900px 600px at 50% 40%,rgba(60,22,12,.96),rgba(6,5,4,.98));
  display:flex; flex-direction:column; align-items:center; padding:28px 16px; overflow:auto; transition:opacity .6s}
.losowanie.znika{opacity:0; pointer-events:none}
.losowanie h2{font-size:clamp(26px,4.5vw,46px); text-align:center; background:linear-gradient(175deg,#fff,var(--zloto2),var(--zar));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.talia{position:relative; width:150px; height:58px; margin:22px auto 22px}
.talia .tyl{position:absolute; inset:0; border-radius:10px; border:1px solid var(--zloto);
  background:repeating-linear-gradient(45deg,#3a1610 0 6px,#2a100b 6px 12px); display:grid; place-items:center;
  font-family:var(--serif); color:var(--zloto2); font-size:22px; box-shadow:0 8px 24px rgba(0,0,0,.5)}
.talia.tasuje .tyl:nth-child(odd){animation:tasuj-l .5s ease-in-out 3}
.talia.tasuje .tyl:nth-child(even){animation:tasuj-p .5s ease-in-out 3}
@keyframes tasuj-l{50%{transform:translateX(-70px) rotate(-10deg)}}
@keyframes tasuj-p{50%{transform:translateX(70px) rotate(10deg)}}
.los-tablica{display:grid; gap:12px; width:min(1100px,100%); grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.los-para{display:flex; flex-direction:column; gap:5px; padding:8px; border:1px solid var(--linia); border-radius:12px;
  background:rgba(12,10,9,.7); position:relative}
.los-para .nr{position:absolute; top:-9px; left:10px; font-size:9.5px; letter-spacing:.14em; padding:1px 7px;
  background:#1a110d; border:1px solid var(--linia); border-radius:6px; color:var(--papier-cien)}
.los-slot{height:44px; border:1px dashed rgba(212,165,86,.25); border-radius:9px; display:flex; align-items:center;
  gap:8px; padding:0 9px; font-size:13px}
.los-slot.wyladowal{border-style:solid; border-color:var(--zloto); background:rgba(212,165,86,.1); animation:ladowanie .45s ease-out}
.los-slot.wolny{border-style:solid; color:var(--papier-cien); font-style:italic; font-size:12px; justify-content:center; animation:ladowanie .4s}
@keyframes ladowanie{0%{transform:scale(1.12); box-shadow:0 0 30px rgba(240,209,138,.8)}}
.los-lot{position:fixed; z-index:96; height:44px; border-radius:9px; border:1px solid var(--zloto2); background:#22160f;
  display:flex; align-items:center; gap:8px; padding:0 9px; font-size:13px; box-shadow:0 12px 40px rgba(0,0,0,.7),0 0 26px rgba(232,85,45,.5);
  pointer-events:none}
.iskra{position:fixed; z-index:97; width:6px; height:6px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,#fff3c4,var(--zar2) 60%,transparent)}

/* ── tryb ekranu (stream) ──────────────────────────────────── */
body.ekran .gora,body.ekran .stopka-strony,body.ekran .bez-ekranu{display:none !important}
body.ekran .pas{max-width:none}

@media(max-width:860px){ .podium-t{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important}
}

/* menu na telefonie: pięć pozycji + konto nie mieści się w 390 px — drugi rząd, przewijany palcem */
@media(max-width:820px){
  .gora .menu{margin-left:0; width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
  .gora .menu::-webkit-scrollbar{display:none}
  .gora .menu a{white-space:nowrap; flex:0 0 auto}
  .gora .menu .ja{margin-left:auto; padding:4px}
  .gora .menu .ja span{display:none}
}

/* lista turniejów z menu (kilka turniejów jednego rodzaju) */
.menu-lista{position:fixed; z-index:60; min-width:260px; max-width:min(380px,94vw); padding:6px; border-radius:14px;
  border:1px solid var(--linia2); background:rgba(19,16,13,.98); box-shadow:var(--cien); display:flex; flex-direction:column; gap:4px;
  animation:menu-wjazd .16s ease-out}
.menu-lista a{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; color:var(--papier); font-size:13.5px;
  border-left:3px solid var(--akcent)}
.menu-lista a:hover{background:rgba(var(--akcent-rgb),.14); color:var(--papier)}
.menu-lista a b{flex:1; font-weight:600}
@keyframes menu-wjazd{from{opacity:0; transform:translateY(-6px)}}

/* prawdziwe ikony broni: maska z tuszu, kolor typu broni + delikatna poświata */
.bron-obraz{display:inline-block; flex:0 0 auto; background:var(--bron); vertical-align:middle;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--bron) 55%,transparent))}