/* Kolory jak na serwerze MIO PVP (tablica boczna, tiery w grze). Uklad inspirowany PvPHQ. */
:root {
  --tlo: #101218; --karta: #1a1d27; --karta2: #20242f;
  --linia: rgba(239,239,241,.07); --linia2: rgba(239,239,241,.13);
  --wartosc: #efeff1; --etykieta: #8f9bb3; --cichy: #5d6680;
  --t1: #f5c542; --t2: #d5dbe6; --t3: #d39a62; --t4: #8f9bb3; --t5: #6f7a91;
  --plus: #7ee081; --minus: #ff6b6b;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--etykieta);
  font: 15px/1.5 Archivo, system-ui, sans-serif;
  background: radial-gradient(1200px 500px at 50% -150px, #222838 0%, var(--tlo) 60%) fixed, var(--tlo);
}
a { color: inherit; }
.num { font-family: "JetBrains Mono", ui-monospace, monospace; }
.wart { color: var(--wartosc); }
.plus { color: var(--plus); } .minus { color: var(--minus); }

header { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(14px); background: rgba(16,18,24,.78); border-bottom: 1px solid var(--linia); }
.pasek { max-width: 1100px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 22px; }
.logo { display: block; line-height: 0; flex-shrink: 0; }
.logo svg { display: block; }
nav a { color: var(--etykieta); text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; margin-right: 16px; }
nav a.akt, nav a:hover { color: var(--wartosc); }
.szukaj { margin-left: auto; }
.szukaj input { background: var(--karta); border: 1px solid var(--linia2); border-radius: 10px; padding: 7px 12px; color: var(--wartosc);
  min-width: 210px; font: inherit; font-size: 13px; outline: none; }
.szukaj input:focus { border-color: var(--etykieta); }

main { max-width: 1100px; margin: 0 auto; padding: 8px 16px 60px; }
h2 { color: var(--wartosc); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; margin: 32px 0 4px; }
.pod { font-size: 13px; margin-bottom: 14px; }
.info { text-align: center; padding: 60px 0; }
.sekcja-tytul { color: var(--cichy); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 10px; }
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; }
.pusto { padding: 22px; text-align: center; font-size: 14px; }

.pigulki { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.pig { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--karta);
  border: 1px solid var(--linia); color: var(--etykieta); font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; }
.pig img { width: 18px; height: 18px; image-rendering: pixelated; }
.pig.akt { background: var(--karta2); border-color: var(--linia2); color: var(--wartosc); box-shadow: inset 0 -2px 0 var(--wartosc); }
.pig:hover { color: var(--wartosc); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--cichy); font-weight: 700;
  padding: 12px 14px; border-bottom: 1px solid var(--linia); white-space: nowrap; }
th.sortuj { cursor: pointer; user-select: none; }
th.sortuj:hover, th.akt { color: var(--wartosc); }
td { padding: 10px 14px; border-bottom: 1px solid var(--linia); }
tr:last-child td { border-bottom: 0; }
.miejsce { width: 48px; color: var(--cichy); font-weight: 700; }
.m1 { color: var(--t1); } .m2 { color: var(--t2); } .m3 { color: var(--t3); }
.gracz { display: inline-flex; align-items: center; gap: 10px; color: var(--wartosc); font-weight: 600; text-decoration: none; }
.gracz:hover { text-decoration: underline; }
.gracz img { width: 28px; height: 28px; border-radius: 6px; image-rendering: pixelated; }
.tier { display: inline-block; padding: 2px 9px; border-radius: 7px; font-weight: 800; font-size: 12px; letter-spacing: .04em;
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 12%, transparent); margin-right: 4px; }
.t1 { color: var(--t1); } .t2 { color: var(--t2); } .t3 { color: var(--t3); } .t4 { color: var(--t4); } .t5 { color: var(--t5); }
.kwal { display: inline-block; padding: 2px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--etykieta); border: 1px dashed var(--linia2); }
.uwaga-dol { padding: 12px 14px; font-size: 13px; border-top: 1px solid var(--linia); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.uwaga-dol .gracz img { width: 22px; height: 22px; }

.mecz { display: grid; grid-template-columns: 90px 1fr 110px 1fr 90px; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linia); }
.mecz:last-child { border-bottom: 0; }
.mecz .strona { display: flex; align-items: center; gap: 8px; }
.mecz .strona.prawa { justify-content: flex-end; }
.mecz .strona .gracz img { width: 24px; height: 24px; border-radius: 5px; }
.przegrany { opacity: .55; }
.wynik { text-align: center; color: var(--wartosc); font-weight: 800; font-size: 18px; }
.wynik small { display: block; font-size: 11px; color: var(--cichy); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-family: Archivo, sans-serif; }
.plak { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; }
.plak.r { color: var(--t1); background: rgba(245,197,66,.1); border: 1px solid rgba(245,197,66,.35); }
.plak.u { color: var(--etykieta); background: rgba(143,155,179,.08); border: 1px solid var(--linia2); }
.kiedy { text-align: right; font-size: 12px; color: var(--cichy); }

.profil-top { display: flex; gap: 22px; align-items: center; padding: 22px; margin-top: 24px; }
.profil-top > img { width: 96px; height: 96px; border-radius: 16px; image-rendering: pixelated; }
.profil-top h3 { margin: 0; color: var(--wartosc); font-size: 30px; font-weight: 800; letter-spacing: .02em; }
.staty { margin-left: auto; display: grid; grid-template-columns: repeat(4, auto); gap: 4px 26px; text-align: right; }
.staty b { display: block; color: var(--wartosc); font-size: 20px; font-family: "JetBrains Mono", monospace; }
.staty span { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--cichy); }
.kity { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0; }
.kit { padding: 14px; border-radius: 14px; background: var(--karta); border: 1px solid var(--linia); }
.kit .naz { display: flex; align-items: center; gap: 8px; color: var(--etykieta); font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.kit .naz img { width: 18px; height: 18px; image-rendering: pixelated; }
.kit .elo { margin-top: 6px; font-size: 12px; }
.dwie { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.wykres { padding: 16px; }
.wykres svg { width: 100%; height: 190px; display: block; }
.lista { padding: 6px 16px; }
.lista .w { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linia); font-size: 14px; flex-wrap: wrap; }
.lista .w:last-child { border-bottom: 0; }
.lista .w .gracz img { width: 22px; height: 22px; border-radius: 5px; }
.lista .w .prawo { margin-left: auto; text-align: right; }
.mini-pig { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.mini-pig button { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linia); background: none; color: var(--etykieta); cursor: pointer; }
.mini-pig button.akt { color: var(--wartosc); border-color: var(--linia2); background: var(--karta2); }

footer { max-width: 1100px; margin: 0 auto; padding: 24px 16px 40px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--cichy); border-top: 1px solid var(--linia); }
.kopiuj { color: var(--wartosc); background: none; border: 1px solid var(--linia2); border-radius: 8px; padding: 3px 10px; margin-left: 8px; font: inherit; cursor: pointer; }

/* ---------- Ranking: baner, podium, karty (inspiracja: PvPHQ "Overall Ladder") ---------- */
.baner { margin-top: 24px; padding: 30px 26px; border-radius: 20px; border: 1px solid var(--linia2); display: flex; align-items: flex-end; gap: 20px;
  background:
    radial-gradient(600px 220px at 85% 0%, rgba(143,155,179,.22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(239,239,241,.025) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, rgba(239,239,241,.025) 0 1px, transparent 1px 32px),
    linear-gradient(135deg, #1d2130, #12141b); }
.baner h1 { margin: 2px 0 6px; color: var(--wartosc); font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -.01em; line-height: 1.05; }
.akcent { background: linear-gradient(90deg, #efeff1, #8f9bb3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.baner-liczba { margin-left: auto; text-align: right; }
.baner-liczba b { display: block; color: var(--wartosc); font-size: 26px; }
.baner-liczba span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--cichy); font-weight: 700; }
.baner-liczba small { font-size: 12px; color: var(--cichy); }

.pigulki { margin-top: 18px; padding-bottom: 8px; border-bottom: 2px solid var(--linia); }
.pig { padding: 10px 18px; font-size: 14px; }
.pig img { width: 22px; height: 22px; }
.pig.akt { background: linear-gradient(180deg, #efeff1, #b9c1d3); color: #12141b; border-color: transparent; box-shadow: 0 4px 18px rgba(239,239,241,.18); }

.podium { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: 18px; align-items: end; margin: 60px 0 26px; }
.podium-karta { --kolor: var(--t2); position: relative; display: flex; flex-direction: column; align-items: center; text-decoration: none;
  padding: 40px 16px 20px; border-radius: 18px; border: 1.5px solid color-mix(in srgb, var(--kolor) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kolor) 9%, var(--karta)), #13151c);
  box-shadow: 0 0 34px color-mix(in srgb, var(--kolor) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.06); transition: translate .2s; }
.podium-karta:hover { translate: 0 -4px; }
.podium-karta.p1 { --kolor: var(--t1); padding-top: 52px; padding-bottom: 26px; }
.podium-karta.p2 { --kolor: var(--t2); }
.podium-karta.p3 { --kolor: var(--t3); }
.cialo { height: 120px; image-rendering: pixelated; filter: drop-shadow(0 10px 10px rgba(0,0,0,.45)); margin-bottom: 12px; }
.p1 .cialo { height: 150px; }
.podium-nick { color: var(--wartosc); font-size: 19px; font-weight: 700; }
.p1 .podium-nick { font-size: 22px; }
.podium-opis { color: var(--kolor); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin: 2px 0 8px; }
.podium-liczba { color: var(--wartosc); font-size: 30px; font-weight: 800; line-height: 1.1; margin-top: 6px; }
.p1 .podium-liczba { font-size: 36px; }
.podium-jedn { font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--cichy); font-weight: 700; }
.odznaka { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 46px; height: 50px; display: grid; place-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kolor) 100%, white 25%), color-mix(in srgb, var(--kolor) 70%, black)); }
.odznaka span { color: #15171e; font-weight: 800; font-size: 20px; font-family: "JetBrains Mono", monospace; }
.odznaka.szesciokat { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.odznaka.tarcza { clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.odznaka.gwiazda { top: -34px; width: 64px; height: 62px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.odznaka.gwiazda span { margin-top: 6px; }
.p1::before { content: "♛"; position: absolute; top: -66px; left: 50%; transform: translateX(-50%); color: var(--t1); font-size: 26px; text-shadow: 0 0 14px rgba(245,197,66,.5); }

.lista-pasek { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; margin: 6px 0 10px; }
.karty-graczy { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.karta-gracza { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 0; text-decoration: none; border-radius: 14px;
  background: var(--karta); border: 1px solid var(--linia); border-left: 3px solid var(--linia2); transition: border-color .15s; }
.karta-gracza:hover { border-color: var(--linia2); }
.kg-miejsce { width: 56px; text-align: center; color: var(--cichy); font-size: 20px; font-weight: 700; align-self: stretch; display: grid; place-items: center; border-right: 1px solid var(--linia); }
.karta-gracza > img { width: 44px; height: 44px; border-radius: 8px; image-rendering: pixelated; }
.kg-srodek { min-width: 0; }
.kg-nick { color: var(--wartosc); font-weight: 700; font-size: 16px; }
.kg-tiery { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12px; margin-top: 2px; }
.kg-tier { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; }
.kg-tier img { width: 15px; height: 15px; image-rendering: pixelated; }
.kg-liczba { margin-left: auto; text-align: right; }
.kg-liczba b { display: block; color: var(--wartosc); font-size: 22px; }
.kg-liczba span { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--cichy); font-weight: 700; }

/* ---------- Animacje (wylaczone przy "ogranicz ruch") ---------- */
@keyframes wjazd { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pojaw { from { opacity: 0; } to { opacity: 1; } }
@keyframes wyskok { 0% { transform: translateX(-50%) scale(0) rotate(-20deg); } 70% { transform: translateX(-50%) scale(1.15) rotate(4deg); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes korona { 0%, 100% { text-shadow: 0 0 10px rgba(245,197,66,.35); transform: translateX(-50%) translateY(0); }
  50% { text-shadow: 0 0 22px rgba(245,197,66,.85); transform: translateX(-50%) translateY(-3px); } }
@keyframes blask { 0%, 100% { box-shadow: 0 0 30px color-mix(in srgb, var(--kolor) 14%, transparent), inset 0 1px 0 rgba(255,255,255,.06); }
  50% { box-shadow: 0 0 46px color-mix(in srgb, var(--kolor) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.08); } }
@keyframes bujanie { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes rysuj { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: no-preference) {
  .widok { animation: pojaw .35s ease-out; }
  .baner { animation: wjazd .5s cubic-bezier(.16,1,.3,1); }
  .podium-karta { opacity: 0; animation: wjazd .7s cubic-bezier(.16,1,.3,1) forwards; }
  .podium-karta.p3 { animation-delay: .1s; }
  .podium-karta.p2 { animation-delay: .25s; }
  .podium-karta.p1 { animation: wjazd .8s cubic-bezier(.16,1,.3,1) .4s forwards, blask 3.5s ease-in-out 1.3s infinite; }
  .odznaka { animation: wyskok .55s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay: inherit; }
  .p3 .odznaka { animation-delay: .45s; } .p2 .odznaka { animation-delay: .6s; } .p1 .odznaka { animation-delay: .85s; }
  .p1::before { animation: korona 2.6s ease-in-out 1.2s infinite; }
  .podium-karta:hover .cialo { animation: bujanie .8s ease-in-out; }
  .kaskada > * { opacity: 0; animation: wjazd .45s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(var(--i, 0) * 45ms + .15s); }
  .karta-gracza, .kit, .mecz { transition: transform .15s, border-color .15s, box-shadow .15s; }
  .karta-gracza:hover, .kit:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  .pig { transition: background .2s, color .2s, box-shadow .2s, transform .15s; }
  .pig:hover { transform: translateY(-1px); }
  .wykres svg { animation: rysuj 1.3s cubic-bezier(.45,0,.2,1) .15s backwards; }

}

@media (max-width: 760px) {
  .baner { flex-direction: column; align-items: flex-start; } .baner-liczba { margin-left: 0; text-align: left; }
  .podium { grid-template-columns: 1fr; gap: 40px; margin-top: 50px; }
  .podium-karta.p1 { order: -1; }
  .karty-graczy { grid-template-columns: 1fr; }
  .pasek { gap: 12px; flex-wrap: wrap; }
  .szukaj { margin-left: 0; width: 100%; } .szukaj input { width: 100%; }
  .kity { grid-template-columns: repeat(2, 1fr); } .dwie { grid-template-columns: 1fr; }
  .profil-top { flex-wrap: wrap; } .staty { margin-left: 0; text-align: left; grid-template-columns: repeat(2, auto); }
  .mecz { grid-template-columns: 1fr; text-align: center; } .mecz .strona, .mecz .strona.prawa { justify-content: center; } .kiedy { text-align: center; }
  .ukryj-tel { display: none; }
  td, th { padding: 8px 8px; }
}

/* Sortowanie w kicie: podium i baner zostaja na miejscu, tasuja sie tylko karty. */
.cisza .baner, .cisza .podium-karta, .cisza .odznaka, .cisza .p1::before { animation: none !important; opacity: 1; }

/* Ranking kitu pokazuje tier zamiast ELO - kolor tieru ma wygrac z kolorem liczby. */
.podium-liczba.t1, .kg-liczba b.t1 { color: var(--t1); }
.podium-liczba.t2, .kg-liczba b.t2 { color: var(--t2); }
.podium-liczba.t3, .kg-liczba b.t3 { color: var(--t3); }
.podium-liczba.t4, .kg-liczba b.t4 { color: var(--t4); }
.podium-liczba.t5, .kg-liczba b.t5 { color: var(--t5); }