/* Opuszczone Krolestwo - listy, podium i lewa kolumna w szablonie tibiacom.
 *
 * DLACZEGO OSOBNA PALETA
 * oks.css opisuje CIEMNE panele stron wlasnych. Tresc MyAAC jest jasnym pergaminem Tibia.com i te
 * dwa swiaty nie moga dzielic zmiennych: zloty tekst z ciemnego panelu na pergaminie ma kontrast
 * okolo 1.6:1, czyli jest nieczytelny. Ponizsze --okl-* to paleta dla JASNEGO tla, dobrana tak, by
 * tekst na wierszu trzymal co najmniej 7:1, a naglowek tabeli 8:1.
 */
:root{
  --okl-ink:#231806;          /* tekst na pergaminie            */
  --okl-ink-soft:#5b4a2c;     /* podpisy, wokacja               */
  --okl-row-a:#f3e6cd;
  --okl-row-b:#e4d2b2;
  --okl-row-hi:#fff6e0;
  --okl-head-1:#5c4626;
  --okl-head-2:#3d2e16;
  --okl-head-ink:#f6e3ac;
  --okl-line:#a98f5f;
  --okl-line-soft:#c9b487;
  --okl-gold:#8a6a12;
  --okl-gold-lite:#c9992f;
  --okl-silver:#6d7076;
  --okl-bronze:#8a5a2a;
}

/* ================================================================= TABELE LIST
 * Wiersze mialy 2 px odstepu i te sama barwe co tlo, wiec oko nie mialo sie czego zlapac przy
 * dwudziestu pozycjach. Naprzemienne tlo, wieksza interlinia i jeden mocny naglowek zalatwiaja
 * czytelnosc bez zadnej zmiany w HTML-u.
 */
table.oks-list{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--okl-line);border-radius:6px;overflow:hidden;
  box-shadow:0 2px 6px rgba(40,26,8,.18);
  font-size:12px;color:var(--okl-ink);
}
table.oks-list tr.oks-list-head td,
table.oks-list tr.oks-list-head th{
  background:linear-gradient(180deg,var(--okl-head-1),var(--okl-head-2));
  color:var(--okl-head-ink);
  font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:11px;
  padding:7px 8px;border:0;text-shadow:0 1px 0 rgba(0,0,0,.5);
}
table.oks-list tr.oks-row td{
  padding:6px 8px;border:0;
  border-top:1px solid rgba(169,143,95,.35);
  vertical-align:middle;line-height:1.35;
}
table.oks-list tr.oks-row-a td{background:var(--okl-row-a)}
table.oks-list tr.oks-row-b td{background:var(--okl-row-b)}
table.oks-list tr.oks-row:hover td{background:var(--okl-row-hi)}
table.oks-list tr.oks-row td:last-child{text-align:right;font-variant-numeric:tabular-nums}
table.oks-list a{color:#2c4a12;font-weight:600;text-decoration:none}
table.oks-list a:hover{color:#16280a;text-decoration:underline}
table.oks-list img{vertical-align:middle}

/* Pierwsza trojka zostaje wyrozniona takze w samej tabeli, zeby podium i lista mowily to samo. */
table.oks-list tr.oks-top td{font-weight:700}
table.oks-list tr.oks-top-1 td:first-child{box-shadow:inset 3px 0 0 var(--okl-gold-lite)}
table.oks-list tr.oks-top-2 td:first-child{box-shadow:inset 3px 0 0 var(--okl-silver)}
table.oks-list tr.oks-top-3 td:first-child{box-shadow:inset 3px 0 0 var(--okl-bronze)}

/* ================================================================= PODIUM */
.oks-podium{
  display:flex;gap:6px;align-items:stretch;
  margin:4px 0 10px;
}
.oks-pod{
  flex:1 1 0;min-width:0;
  border:1px solid var(--okl-line);border-radius:6px;
  background:linear-gradient(180deg,#f7ecd6,#e0cca9);
  padding:8px 6px 7px;text-align:center;position:relative;
  box-shadow:0 2px 5px rgba(40,26,8,.2);
}
.oks-pod-1{
  border-color:var(--okl-gold-lite);
  background:linear-gradient(180deg,#fff6dc,#ebd5a4);
  box-shadow:0 3px 9px rgba(120,86,10,.3);
}
.oks-pod-2{border-color:#9aa0a8}
.oks-pod-3{border-color:#b07b45}

.oks-pod-rank{
  position:absolute;top:-1px;left:-1px;
  width:20px;height:20px;line-height:20px;
  border-radius:6px 0 6px 0;
  font-weight:700;font-size:12px;color:#fff;
  background:var(--okl-silver);
}
.oks-pod-1 .oks-pod-rank{background:linear-gradient(135deg,#e0ae23,#9b7407)}
.oks-pod-2 .oks-pod-rank{background:linear-gradient(135deg,#adb3ba,#6d7076)}
.oks-pod-3 .oks-pod-rank{background:linear-gradient(135deg,#c08a4e,#8a5a2a)}

.oks-pod-art{height:52px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.oks-pod-art img.oks-pod-img{
  width:64px;height:64px;max-width:none;position:static;margin:0;
  transform:scale(.8);transform-origin:center;image-rendering:pixelated;
}
/* Zwyciezca dostaje wiecej miejsca i wieksza postac -- podium ma miec hierarchie, nie trzy rowne
   kafelki obok siebie. */
.oks-pod-1{flex:1.25 1 0}
.oks-pod-1 .oks-pod-art{height:62px}
.oks-pod-1 .oks-pod-art img.oks-pod-img{transform:scale(.95)}
.oks-pod-1 .oks-pod-name a{font-size:13px}
.oks-pod-name{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oks-pod-name a{color:#2c4a12;font-weight:700;font-size:12px;text-decoration:none}
.oks-pod-name a:hover{text-decoration:underline}
.oks-pod-voc{font-size:10px;color:var(--okl-ink-soft);text-transform:uppercase;letter-spacing:.04em}
.oks-pod-stats{margin-top:4px;display:flex;flex-direction:column;gap:1px}
.oks-pod-lvl{font-size:11px;font-weight:700;color:var(--okl-ink)}
.oks-pod-pts{font-size:10px;color:var(--okl-ink-soft);font-variant-numeric:tabular-nums}

/* ================================================================= FILTRY
 * "Choose a skill" i "Choose a vocation" byly dwiema waskimi kolumnami niebieskiego tekstu
 * zepchnietymi obok tabeli -- czternascie linkow jeden pod drugim, bez zadnej informacji, ktory
 * jest wlaczony. Jako paski nad tabela mieszcza sie w dwoch liniach i widac wybrany.
 */
.oks-chipbar{display:flex;flex-direction:column;gap:5px;margin:2px 0 10px}
.oks-chipgroup{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.oks-chiplabel{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--okl-ink-soft);min-width:58px;
}
.oks-chip{
  display:inline-block;padding:3px 8px;border-radius:11px;
  border:1px solid var(--okl-line);background:linear-gradient(180deg,#f6ead2,#e2cfad);
  color:var(--okl-ink);font-size:11px;line-height:1.3;text-decoration:none;
  transition:background .12s,border-color .12s,color .12s;
}
.oks-chip:hover{background:var(--okl-row-hi);border-color:var(--okl-gold-lite);color:#000}
.oks-chip-on{
  background:linear-gradient(180deg,#5c4626,#3d2e16);border-color:#2b2010;
  color:var(--okl-head-ink);font-weight:700;
}
/* Oryginalne boksy zostaja w HTML-u (dzialaja bez JS), ale gdy paski juz stoja, sa zbedne. */
.oks-chipsource{display:none !important}

/* ================================================================= LEWA KOLUMNA
 * Licznik pozycji na naglowku sekcji. Zwinieta sekcja przestaje byc zagadka "co tam bylo".
 */
.oks-menu-count{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  min-width:15px;height:15px;line-height:15px;padding:0 4px;
  border-radius:8px;background:rgba(0,0,0,.45);
  color:#f0dca8;font-size:9px;font-weight:700;text-align:center;
  pointer-events:none;
}
.oks-menu-collapsed .MenuButton{position:relative}

/* ================================================================= WASKIE EKRANY
 * Podium z trzema kartami nie miesci sie w kolumnie tresci ponizej ~360 px.
 */
@media (max-width:420px){
  .oks-podium{flex-direction:column}
  .oks-pod-art{height:34px}
  .oks-chiplabel{min-width:0;width:100%}
}