:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#232a1f; --panel:#2d3628; --line:#47533f; --text:#ece7d6; --muted:#a9b09a;
  --red:#d3162f; --brass:#c9ad66; --on-red:#fff;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#ece7d6; --panel:#f5f1e3; --line:#c4bfa9; --text:#222a1e; --muted:#5b6350;
    --red:#b80f26; --brass:#8a6f2a; color-scheme:light;
  }
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
h1,h2,.stencil{font-family:Impact,"Arial Narrow Bold","Haettenschweiler",sans-serif;font-weight:400;letter-spacing:.04em;margin:0}
.status{border:2px solid var(--brass);padding:12px 16px;min-width:210px;background:var(--panel)}
.status b{display:block;font-size:13px;color:var(--brass);font-weight:600}
/* Duzy napis Online ma swoj styl, ale nie obejmuje malych etykiet COMMUNITY i regionu. */
.status > #status{font-family:Impact,sans-serif;font-size:30px;letter-spacing:.03em}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--brass);margin-right:8px}
.dot.live{background:#6fcf4a}
nav{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
nav a{color:var(--text);text-decoration:none;border:1px solid var(--line);padding:8px 14px;font-weight:600}
nav a:hover,nav a:focus-visible{border-color:var(--brass);outline:none}
nav a.join{background:var(--red);border-color:var(--red);color:var(--on-red)}
section{padding:30px 0}
h2{font-size:34px;margin-bottom:14px}
.sub{color:var(--muted);margin:-6px 0 14px;max-width:62ch}
.tags{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.tag{background:var(--panel);border:2px solid var(--line);padding:16px;border-radius:26px 26px 8px 8px;text-align:center}
.tag::before{content:"";display:block;width:14px;height:14px;border-radius:50%;border:2px solid var(--line);margin:0 auto 10px}
.tag.p1{border-color:var(--brass)}
.tag .rk{font-family:Impact,sans-serif;font-size:15px;color:var(--brass)}
.tag .nm{font-family:Impact,sans-serif;font-size:26px;letter-spacing:.04em;word-break:break-word}
.tag .vl{color:var(--muted);font-size:14px}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tabs{display:flex;flex-wrap:wrap}
.tabs button{background:var(--panel);color:var(--text);border:1px solid var(--line);padding:8px 14px;font:inherit;font-weight:600;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--on-red)}
input[type=search]{flex:1;min-width:160px;background:var(--panel);color:var(--text);border:1px solid var(--line);padding:9px 12px;font:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.scroll{overflow-x:auto;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;min-width:560px;background:var(--panel)}
th,td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line)}
th:nth-child(-n+2),td:nth-child(-n+2){text-align:left}
th{font-size:13px;color:var(--muted);font-weight:600}
td:first-child{font-family:Impact,sans-serif;color:var(--brass);width:56px}
td.name{font-weight:700}
tr:last-child td{border-bottom:0}
.note{font-size:13px;color:var(--muted);margin-top:10px}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.how div{border-left:4px solid var(--red);padding:4px 0 4px 14px}
.how b{display:block;font-size:17px}
footer{border-top:1px solid var(--line);padding:24px 0 36px;color:var(--muted);font-size:14px}
/* Baner Polska Elita: tło i czytelny tekst */
header.top{
  position:relative;
  border-bottom:4px solid var(--red);
  background-color:#09090b;
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.06) 35%,rgba(0,0,0,.56) 56%,rgba(0,0,0,.77) 100%),
    url("../img/wolf-banner.png");
  background-position:center center, center center;
  background-repeat:no-repeat;
  background-size:cover, cover;
}
header.top .hero{
  min-height:255px;
  padding:34px 0 20px;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:flex-end;
  align-items:flex-end;
  gap:18px;
}
header.top .hero > div:first-child{width:min(100%,530px)}
header.top .hero h1{
  font-size:clamp(48px,7.5vw,86px);
  line-height:1;
  color:#fff;
  text-shadow:0 3px 13px rgba(0,0,0,.88);
}
header.top .hero p{
  margin:10px 0 0;
  color:#f2eeee;
  max-width:46ch;
  text-shadow:0 2px 7px #000;
}
header.top .status{
  border:2px solid var(--red);
  padding:8px 14px;
  min-width:210px;
  background:rgba(8,8,10,.87);
  color:#fff;
}
header.top .status b{color:#ffa1a8}
header.top nav{justify-content:flex-end;margin:0 0 18px}
header.top nav a{color:#fff;background:rgba(0,0,0,.65);border-color:#b0444a}
header.top nav a:hover, header.top nav a:focus-visible{background:rgba(25,10,14,.95);border-color:#f23b42}
header.top nav a.join{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:700px){
  header.top{
    background-image:
      linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 165px,rgba(0,0,0,.91) 275px,rgba(0,0,0,.95) 100%),
      url("../img/wolf-banner.png");
    background-size:cover,auto 285px;
    background-position:center center,left top;
  }
  header.top .hero{
    min-height:0;
    align-items:flex-start;
    padding:225px 0 14px;
    gap:15px;
  }
  header.top .hero > div:first-child{width:100%}
  header.top .hero h1{font-size:clamp(46px,12vw,70px)}
  header.top .status{align-self:flex-start}
  header.top nav{justify-content:flex-start}
}



/* ================================================
   POLSKA ELITA — CZYTELNA KOLORYSTYKA (WCAG 2.2 AA)
   Dodatek na końcu arkusza: nie zmienia HTML ani JS.
   Baner wilka (header.top) zachowany bez zmian.
   Tło pod rankingami: polska-elita-bg.png.
   ================================================ */

/* Wymuszamy spójną ciemną paletę także przy jasnych ustawieniach OS,
   aby uniknąć ciemnych napisów na ciemnej grafice. */
:root,
:root:not([data-theme="dark"]) {
  --bg: #090e16;
  --panel: rgba(10, 17, 28, .95);
  --line: #879bb4;
  --text: #f5f8fc;
  --muted: #d4deeb;
  --red: #b01c3e;
  --brass: #ffe08a;
  --on-red: #ffffff;
  --blue: #9bd9f3;
  --focus: #ffe08a;
  color-scheme: dark;
}

/* Nowa ilustracja TYLKO jako tło strony: baner ma własne tło. */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(4, 9, 17, .66), rgba(4, 9, 17, .78)),
    url("../img/polska-elita-bg.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
}

/* Odrębne, przyciemnione obszary na tle grafiki. */
section {
  background: rgba(6, 12, 22, .80);
}
section h2 {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}
.sub,
.note,
.tag .vl,
footer {
  color: var(--muted);
}

/* Karty podium: odróżniają się kolorem OBRAMOWANIA,
   ale numer pozycji nadal jest tekstowy — kolor nie jest jedyną wskazówką. */
.tag {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
}
.tag::before { border-color: var(--line); }
.tag.p1 { border-color: var(--brass); }
.tag.p1::before { border-color: var(--brass); }
.tag.p2 { border-color: var(--blue); }
.tag.p2::before { border-color: var(--blue); }
.tag.p3 { border-color: #c1ccd9; }
.tag.p3::before { border-color: #c1ccd9; }
.tag .rk { color: var(--brass); }
.tag.p2 .rk { color: var(--blue); }
.tag.p3 .rk { color: #e3ebf4; }
.tag .nm { color: #ffffff; }

/* Przyciski sortowania: aktywny = inne wypełnienie + złoty pasek. */
.tabs button {
  background: rgba(9, 16, 28, .97);
  color: var(--text);
  border-color: var(--line);
}
.tabs button:hover {
  background: #24384d;
  border-color: var(--brass);
}
.tabs button[aria-pressed="true"] {
  background: #135f7e;
  color: #ffffff;
  border-color: #a9dced;
  box-shadow: inset 0 -4px 0 var(--brass);
}
.tabs button[aria-pressed="true"]:hover { background: #145570; }

/* Szukajka z kontrastowym wpisywanym tekstem i placeholderem. */
input[type=search] {
  background: rgba(9, 16, 28, .98);
  color: var(--text);
  border-color: var(--line);
}
input[type=search]::placeholder {
  color: #d3dce9;
  opacity: 1;
}
button:focus-visible,
input:focus-visible,
nav a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Tabele: wyraźny nagłówek, pasy wierszy i podkreślenie po najechaniu. */
.scroll { border-color: var(--line); }
table {
  background: rgba(8, 14, 24, .97);
  color: var(--text);
}
th, td { border-bottom-color: rgba(171, 192, 216, .40); }
th {
  background: rgba(38, 54, 74, .98);
  color: #f0f5fb;
}
tbody tr:nth-child(even) { background: rgba(142, 175, 205, .10); }
tbody tr:hover { background: rgba(142, 190, 224, .19); }
td:first-child { color: var(--brass); }
td.name { color: #ffffff; }

/* Instrukcje i stopka — wyraźne separatory nieoparte na czerwieni. */
.how div { border-left-color: var(--blue); }
.how b { color: #ffffff; }
footer {
  background: rgba(6, 12, 22, .88);
  border-top-color: var(--line);
}

/* Nawigacja i status na dotychczasowym, NIEZMIENIONYM banerze. */
header.top .status {
  background: rgba(7, 13, 24, .95);
  color: #ffffff;
  border-color: var(--brass);
}
header.top .status b { color: var(--brass); }
header.top nav a {
  background: rgba(8, 14, 24, .96);
  color: #ffffff;
  border-color: #a1b5ca;
}
header.top nav a:hover,
header.top nav a:focus-visible {
  background: #22374b;
  border-color: var(--brass);
}
header.top nav a.join {
  background: var(--red);
  border-color: #ffc4d0;
  color: var(--on-red);
}
header.top nav a.join:hover {
  background: #922039;
  border-color: var(--focus);
}
.dot { background: var(--brass); }
.dot.live {
  background: #89f2dd;
  border: 1px solid #ffffff;
}

/* Tlo sekcji pozostaje przezroczyste – widoczna grafika pod rankingami. */
section { background: transparent; }

/* Nawigacja po stronach rankingow — dostosowana do palety WCAG. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  padding: 14px 0 6px;
  color: var(--text);
}
.pagination label { font-weight: 600; }
.pagination select,
.pagination button {
  border: 1px solid var(--line);
  background: rgba(9, 16, 28, .97);
  color: var(--text);
  font: inherit;
  padding: 8px 12px;
  min-height: 42px;
  border-radius: 4px;
}
.pagination select { cursor: pointer; min-width: 72px; }
.pagination button { cursor: pointer; font-weight: 650; }
.pagination button:not(:disabled):hover,
.pagination select:hover { border-color: var(--brass); background: #24384d; }
.pagination button:disabled { cursor: not-allowed; opacity: .46; }
.pagination button:focus-visible,
.pagination select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.pagination .page-info { color: var(--muted); font-size: 14px; }
.pagination .page-buttons { display: flex; gap: 8px; margin-left: auto; }
@media(max-width:700px) {
  .pagination .page-info { flex-basis: 100%; order: 3; }
  .pagination .page-buttons { margin-left: 0; }
}
/* Klawisze sortowania bez danych: wygląd pozostaje czytelny bez polegania na kolorze. */
.tabs button:disabled { opacity:.50; cursor:not-allowed; text-decoration:line-through; }

/* Status serwera — czytelny niezależnie od rodzaju daltonizmu. */
.status .dot.offline { background:#f6a0ae; }
.status .dot.live { background:#70d6b7; }
.status-credit { display:block; font: 12px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#e8f2ff; margin-top:4px; text-decoration:underline; text-underline-offset:3px; }
.status-credit:hover { color:#ffe08a; }
.status-credit:focus-visible {outline:3px solid #ffe08a;outline-offset:3px;}


/* Polska Elita: widoczne zaproszenie Discord w górnym menu. */
header.top nav a.discord-link,
header.top nav a.discord-link:visited {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  padding: 5px 14px 7px;
  min-height: 45px;
  background: #354fa8;
  border: 2px solid #b3c4ff;
  box-shadow: inset 0 -3px 0 var(--brass);
  color: #ffffff;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
header.top nav a.discord-link:hover,
header.top nav a.discord-link:focus-visible {
  background: #263c88;
  border-color: #ffe08a;
}
header.top nav a.discord-link .discord-name {
  font-weight: 800;
  letter-spacing: .02em;
}
header.top nav a.discord-link .discord-address {
  color: #f0f4ff;
  font-size: 12px;
  font-weight: 600;
}
/* Długi identyfikator można zaznaczyć i skopiować także na telefonie. */
.how .server-id {
  display: inline-block;
  max-width: 100%;
  margin-top: 5px;
  padding: 3px 6px;
  border: 1px solid #879bb4;
  border-radius: 3px;
  background: rgba(9,16,28,.95);
  color: #ffe08a;
  font: 600 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}

/* Status WARDOGS: mapa + tryb, a na dole tylko COMMUNITY i region. */
header.top .status {
  width: min(100%, 330px);
}
.status-details[hidden],
.status-label[hidden] { display: none !important; }
.status-details {
  border-top: 1px solid rgba(171, 192, 216, .55);
  margin-top: 9px;
  padding-top: 9px;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.status-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 14px;
  margin: 0 0 12px;
}
.status-fields > div { min-width: 0; }
.status-fields dt { font-size: 12px; color: #d4deeb; }
.status-fields dd {
  font-size: 15px;
  font-weight: 750;
  color: #fff;
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}
.status-labels { display: flex; flex-wrap: wrap; gap: 7px; }
.status-label {
  display: inline-block;
  padding: 3px 7px;
  font: 700 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .04em;
  border: 1px solid;
  white-space: nowrap;
  width: auto;
  flex: 0 0 auto;
}
.status-label.community {
  color: #ffe08a;
  background: #29210e;
  border-color: #b68a30;
}
.status-label.region {
  color: #e4efff;
  background: #213140;
  border-color: #8da8c0;
}
@media (max-width: 420px) {
  .status-fields { grid-template-columns: 1fr 1fr; gap: 8px; }
}