/* =========================================================
   Chata z Dykty — serwer Rust PvE
   Styl wzorowany na interfejsie gry Rust
   ========================================================= */

:root {
  --bg: #0E0D0C;
  --bg-bar: #141210;
  --panel: #1A1816;
  --panel-head: #23201C;
  --panel-hi: #2B2723;
  --line: #36312B;
  --line-soft: #2B2723;

  --text: #E4DAD1;
  --text-2: #C7BDB2;
  --text-3: #B5AA9E;
  --muted: #A39A90;

  --plywood: #C9A57A;
  --rust: #B8381F;
  --rust-text: #D9583B;
  --rust-hover: #F07A5C;
  --on-rust: #F4ECE4;
  --green: #4F6B27;
  --green-hover: #5C7B2E;
  --on-green: #EEF3E2;
  --online: #7FA33F;
  --online-text: #9CC45C;
  --offline: #B8381F;

  --font-ui: "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-body: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --wrap: 1240px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--rust-text); }
a:hover { color: var(--rust-hover); }
:focus-visible { outline: 2px solid var(--plywood); outline-offset: 2px; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg);
  color: var(--plywood);
  border: 1px solid var(--line);
  padding: 2px 7px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--rust); color: var(--on-rust); padding: 10px 16px;
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.ui {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* ---------- Pasy ostrzegawcze ---------- */
.hazard {
  height: 6px;
  background: repeating-linear-gradient(-45deg, var(--rust) 0 12px, var(--bg-bar) 12px 24px);
}
.hazard--panel {
  background: repeating-linear-gradient(-45deg, var(--rust) 0 12px, var(--panel) 12px 24px);
}

/* ---------- Przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px;
  border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease;
}
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 18px; }
.btn--green { background: var(--green); color: var(--on-green); }
.btn--green:hover { background: var(--green-hover); color: var(--on-green); }
.btn--rust { background: var(--rust); color: var(--on-rust); }
.btn--rust:hover { background: #CC4527; color: var(--on-rust); }
.btn--gold { background: #E8C15A; color: #14110F; }
.btn--gold:hover { background: #F2CF6E; color: #14110F; }
.btn--discord { background: #5865F2; color: #FFFFFF; }
.btn--discord:hover { background: #6D78F4; color: #FFFFFF; }
.btn--dark { background: var(--panel-hi); color: var(--text); }
.btn--dark:hover { background: #38322C; color: var(--text); }

/* ---------- Nagłówek ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-bar);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--plywood);
}
.brand img { width: 52px; height: 52px; }
.brand__name {
  font-family: var(--font-ui); font-weight: 800; font-size: 22px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.brand__name span { color: var(--rust-text); }
.brand__tag {
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--panel-hi); color: var(--text); padding: 4px 10px;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav__link[hidden], .nav .btn[hidden], .nav-dd[hidden], .nav-dd__it[hidden] { display: none !important; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px; line-height: 1;
  color: var(--text-2); text-decoration: none; padding: 0 14px;
  font-family: var(--font-ui); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--plywood); }
.nav .btn { margin-left: 8px; min-height: 44px; }
/* Przycisk panelu admina (tylko dla adminów): na komputerze sama ikona */
.nav__adm { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; color: var(--text-2); border: 1px solid var(--line); background: var(--panel); text-decoration: none; }
.nav__adm:hover { color: var(--plywood); border-color: var(--plywood); }
.nav__adm-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); cursor: pointer; align-items: center; justify-content: center;
}

/* Średnie ekrany: ciaśniejsze menu, żeby zmieściły się oba przyciski */
@media (min-width: 1121px) and (max-width: 1340px) {
  .nav__link { padding: 0 9px; font-size: 14px; }
  .nav .btn { margin-left: 6px; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 1120px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-bar); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 16px;
  }
  .nav.is-open { display: flex; }
  .nav__link { padding: 14px 4px; border-bottom: 1px solid var(--line-soft); }
  .nav .btn { margin: 12px 0 0; }
  .nav__adm { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: auto; height: auto; min-height: 44px; line-height: 1; margin: 0; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--line-soft); background: none; font: 700 15px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; }
  .nav__adm-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .brand img { width: 44px; height: 44px; }
  .brand__name { font-size: 19px; }
}

/* ---------- Hero ---------- */
.hero__inner {
  display: flex; flex-wrap: wrap-reverse; align-items: center; gap: 40px;
  padding-top: 64px; padding-bottom: 48px;
}
.hero__text { flex: 999 1 520px; min-width: 0; }
.hero__logo { flex: 1 1 300px; min-width: 0; display: flex; justify-content: center; }
.hero__logo img { width: 100%; max-width: 420px; }
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--panel); border-left: 4px solid var(--green);
  padding: 8px 14px; color: var(--text-2); font-size: 14px;
}
.badge__dot { width: 8px; height: 8px; background: var(--online); }
.hero h1 {
  font-family: var(--font-ui); font-weight: 800;
  font-size: clamp(44px, 7vw, 72px); line-height: 0.98;
  text-transform: uppercase; margin: 24px 0 18px;
}
.hero h1 em { font-style: normal; color: var(--rust-text); }
.hero__lead { font-size: 19px; color: var(--text-3); max-width: 540px; margin: 0 0 32px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Panele (okna w stylu Rusta) ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); }
.panel__head {
  background: var(--panel-head); padding: 10px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--font-ui); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.panel__body { padding: 18px; }

/* ---------- Status serwera ---------- */
.status__state { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.status__state::before { content: ""; width: 9px; height: 9px; background: var(--muted); }
.status__state[data-state="online"] { color: var(--online-text); }
.status__state[data-state="online"]::before { background: var(--online); }
.status__state[data-state="offline"] { color: var(--rust-text); }
.status__state[data-state="offline"]::before { background: var(--offline); }

.status__grid { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; }
.status__name { flex: 2 1 240px; min-width: 0; }
.status__title {
  font-family: var(--font-ui); font-weight: 700; font-size: 20px;
  text-transform: uppercase; letter-spacing: 0.03em; overflow-wrap: anywhere;
}
.status__meta { font-size: 14px; color: var(--muted); }
.status__players { flex: 1 1 200px; min-width: 0; }
.status__label {
  display: flex; justify-content: space-between;
  font-family: var(--font-ui); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px;
}
.status__label strong { color: var(--text); }
.bar { height: 14px; background: var(--panel-hi); border: 1px solid var(--line); }
.bar__fill { height: 100%; width: 0; background: #6E8F35; transition: width .6s ease; }
.status__connect { flex: 2 1 320px; min-width: 0; display: flex; gap: 8px; }
.status__ip {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 0;
  color: var(--text); font-family: var(--font-mono); font-size: 14px;
}
@media (max-width: 560px) {
  .status__connect { flex-wrap: wrap; }
  .status__ip { flex-basis: 100%; }
  .status__connect .btn { flex: 1 1 auto; }
}

/* ---------- Szybkie linki / sloty ---------- */
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; padding-top: 16px; }
.tile {
  display: flex; gap: 14px; align-items: center; padding: 14px;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
a.tile:hover { border-color: #5A4E42; background: #201D1A; color: var(--text); }
.slot {
  flex: none; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line); color: var(--plywood);
}
.slot--lg { width: 64px; height: 64px; }
.slot svg { width: 26px; height: 26px; }
.slot--lg svg { width: 30px; height: 30px; }
.tile__title {
  display: block; font-family: var(--font-ui); font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tile__text { display: block; color: var(--muted); font-size: 14px; }

/* ---------- Sekcje ---------- */
.section { padding-top: 88px; }
.section:last-of-type { padding-bottom: 96px; }
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-ui); color: var(--rust-text); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--rust); }
.section h2 {
  font-family: var(--font-ui); font-weight: 800; text-transform: uppercase;
  font-size: clamp(32px, 4.5vw, 46px); line-height: 1.05; margin: 8px 0 24px;
}
.section__lead { color: var(--text-3); max-width: 640px; margin: -12px 0 32px; }
.section__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 24px;
}
.section__head h2 { margin-bottom: 0; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; }
.feature { display: flex; gap: 16px; padding: 18px; background: var(--panel); border: 1px solid var(--line); }
.feature h3 {
  font-family: var(--font-ui); font-weight: 700; font-size: 20px;
  text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 4px;
}
.feature p { color: var(--muted); margin: 0; font-size: 15px; }

/* ---------- Ustawienia ---------- */
.split { display: flex; flex-wrap: wrap; gap: 8px; }
.split__main { flex: 999 1 560px; min-width: 0; }
.split__side { flex: 1 1 320px; min-width: 0; }
.table-scroll { overflow-x: auto; }
.kv { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 420px; }
.kv th, .kv td { padding: 12px 18px; border-top: 1px solid var(--line-soft); text-align: left; }
.kv th { font-weight: 400; color: var(--muted); width: 45%; }
.kv td { font-family: var(--font-ui); font-weight: 700; font-size: 17px; color: var(--plywood); }
.schedule { list-style: none; margin: 0; padding: 0; }
.schedule li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.schedule li:last-child { border-bottom: 0; }
.schedule span { color: var(--muted); }
.schedule strong { font-family: var(--font-ui); text-align: right; }
.schedule .hl { color: var(--rust-text); }
.note { color: var(--muted); font-size: 13px; margin: 8px 0 0; }

/* ---------- Wiki: kafle i wyszukiwarka ---------- */
.search { display: flex; flex: 0 1 400px; min-width: 260px; }
.search input {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  color: var(--text); font: 15px var(--font-body);
}
.search input::placeholder { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.card {
  display: block; padding: 18px 20px; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--plywood);
  transition: background-color .15s ease;
}
.card:hover { background: #201D1A; color: var(--text); }
.card__title {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
  font-family: var(--font-ui); font-weight: 700; font-size: 19px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.card__title::after { content: "›"; color: var(--rust-text); }
.card__text { display: block; color: var(--muted); font-size: 15px; }
.card[hidden] { display: none; }
.empty { color: var(--muted); padding: 16px 0; }

/* ---------- Głosowanie ---------- */
.vote { display: flex; flex-wrap: wrap; gap: 36px; align-items: center; padding: 36px; }
.vote__text { flex: 999 1 420px; min-width: 0; }
.vote__text h2 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 12px; }
.vote__text p { color: var(--text-3); margin: 0 0 8px; }
.vote__text .small { color: var(--muted); font-size: 14px; margin: 0; }
.vote__links { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vote__links .btn { justify-content: space-between; min-height: 52px; font-size: 16px; }
.vote__links .btn::after { content: "›"; }
@media (max-width: 560px) { .vote { padding: 24px 18px; } }

/* ---------- Zasady ---------- */
.rules {
  list-style: none; margin: 0; padding: 0; counter-reset: rule;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px;
}
.rules li { counter-increment: rule; display: flex; background: var(--panel); border: 1px solid var(--line); }
.rules li::before {
  content: counter(rule);
  flex: none; width: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--rust); color: var(--on-rust);
  font-family: var(--font-ui); font-weight: 800; font-size: 20px;
}
.rules li span { padding: 14px 16px; }
.more-link { margin: 24px 0 0; }
form.more-link { display: flex; flex-wrap: wrap; gap: 8px; }
form.more-link .btn { max-width: 100%; white-space: normal; text-align: center; }
form.more-link > .note, form.more-link > p { flex-basis: 100%; }

/* ---------- Stopka ---------- */
.site-footer { background: var(--bg-bar); }
.site-footer__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 28px; padding-bottom: 28px; color: var(--muted); font-size: 14px;
}
.site-footer__copy { display: flex; align-items: center; gap: 12px; }
.site-footer__copy img { width: 40px; height: 40px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 20px; }

/* =========================================================
   Wiki
   ========================================================= */
.wiki-header .search { flex: 0 1 420px; min-width: 220px; }
@media (max-width: 960px) {
  .wiki-header .site-header__inner { flex-wrap: wrap; padding-bottom: 12px; }
  .wiki-header .search { order: 3; flex: 1 1 100%; }
}

.wiki-layout {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px;
  padding-top: 32px; padding-bottom: 80px;
}
.wiki-nav { flex: 1 1 250px; min-width: 0; }
.wiki-nav__group + .wiki-nav__group { border-top: 1px solid var(--line); }
.wiki-nav ul { list-style: none; margin: 0; padding: 6px 0; }
.wiki-nav__group:not(.is-open) ul { display: none; }
.wiki-nav button.wiki-nav__h { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; text-align: left; cursor: pointer; }
.wiki-nav__h span { flex: 1; }
.wiki-nav__h small { min-width: 22px; padding: 1px 6px; background: var(--bg); border: 1px solid var(--line); font: 600 11px var(--font-ui); letter-spacing: 0; color: var(--text-3); text-align: center; }
.wiki-nav__h i { width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.wiki-nav__group.is-open .wiki-nav__h i { transform: rotate(45deg); }
.wiki-nav__h:hover { color: var(--text); }
.wiki-nav a {
  display: block; padding: 8px 16px 8px 19px;
  color: var(--text-3); text-decoration: none; font-size: 15px;
}
.wiki-nav a:hover { color: var(--text); background: #201D1A; }
.wiki-nav a[aria-current="page"] {
  padding-left: 16px; border-left: 3px solid var(--rust);
  background: var(--panel-hi); color: var(--text); font-weight: 500;
}
.wiki-main { flex: 999 1 560px; min-width: 0; }
.wiki-aside { flex: 1 1 210px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1200px) {
  .wiki-nav, .wiki-aside { position: sticky; top: 104px; }
}

.crumbs {
  font-family: var(--font-ui); font-size: 14px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--plywood); }

.article h1 {
  font-family: var(--font-ui); font-weight: 800; text-transform: uppercase;
  font-size: clamp(38px, 5vw, 54px); line-height: 1.02; margin: 0 0 10px;
}
.article__meta { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
.article__lead { font-size: 18px; color: var(--text-2); }
.article h2 {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-ui); font-weight: 800; font-size: 30px;
  text-transform: uppercase; margin: 44px 0 14px;
}
.article h2::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--rust); }
.article h3 {
  font-family: var(--font-ui); font-weight: 700; font-size: 21px;
  text-transform: uppercase; margin: 28px 0 10px;
}
.article p, .article li { color: var(--text-2); }
.article ul, .article ol { padding-left: 22px; }

.callout { display: flex; background: var(--panel); border: 1px solid var(--line); margin: 28px 0; }
.callout__icon {
  flex: none; width: 52px; display: flex; align-items: center; justify-content: center;
  background: var(--rust); color: var(--on-rust);
}
.callout--tip .callout__icon { background: var(--green); color: var(--on-green); }
.callout p { margin: 0; padding: 14px 18px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.data-table th {
  background: var(--panel-head); text-align: left; padding: 11px 16px;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.data-table td { padding: 12px 16px; border-top: 1px solid var(--line-soft); color: var(--text-2); }
.data-table td:first-child { white-space: nowrap; }
.data-table .num { font-family: var(--font-ui); font-weight: 700; color: var(--text); }

.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 48px; }
.pager a {
  display: flex; flex-direction: column; min-width: 220px; padding: 14px 18px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none;
}
.pager a:hover { background: #201D1A; color: var(--text); }
.pager a.next { align-items: flex-end; margin-left: auto; }
.pager small {
  font-family: var(--font-ui); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted);
}
.pager strong { font-family: var(--font-ui); font-size: 18px; text-transform: uppercase; }

.toc ul { list-style: none; margin: 0; padding: 6px 0; }
.toc a {
  display: block; padding: 7px 16px 7px 19px; font-size: 14px;
  color: var(--text-3); text-decoration: none;
}
.toc a:hover { color: var(--text); }
.toc a.is-active { padding-left: 16px; border-left: 3px solid var(--plywood); color: var(--text); }
.help-box p { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.help-box strong {
  display: block; margin-bottom: 4px;
  font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.04em;
}

/* ---- rozszerzenia: wiki z danych, kopiowanie, toast ---- */
:root{color-scheme:dark;--t-easy:#7FA33F;--t-med:#5E9BD0;--t-purple:#A884E0;--t-hard:#E06548;--t-night:#E39A3B;--t-imp:#E0445E}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.site-header{top:env(safe-area-inset-top,0px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg-bar)}
.nav{padding-inline:0}
@media (max-width:960px){.nav{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
.features--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.status__players strong{font-variant-numeric:tabular-nums}
.clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:14px 0 4px}
.clock div{background:var(--bg);border:1px solid var(--line);text-align:center;padding:10px 4px}
.clock b{display:block;font:800 30px/1 var(--font-ui);font-variant-numeric:tabular-nums}
.clock small{font:700 11px var(--font-ui);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.rules li::before{content:attr(data-n);width:52px;font-size:16px}
.rules li{counter-increment:none}
.article .rules{grid-template-columns:1fr;margin:0 0 8px}
button.cp{font:13px var(--font-mono);background:var(--bg);color:var(--plywood);border:1px solid var(--line);padding:2px 7px;cursor:copy;white-space:nowrap}
button.cp:hover{border-color:var(--plywood)}
.cmd-cell{display:flex;flex-wrap:wrap;gap:4px}
.data-table td{vertical-align:top}
.data-table td:first-child{white-space:normal;width:190px;min-width:150px}
.help-box .btn{width:100%;white-space:normal}
.article .lead-cta{margin:16px 0}
.wiki-nav a{cursor:pointer}
.wiki-index h2{margin-top:36px}
.result{display:block;padding:14px 18px;background:var(--panel);border:1px solid var(--line);text-decoration:none;color:var(--text);margin-top:-1px}
.result:hover{background:var(--hover,#201D1A);color:var(--text)}
.result small{display:block;font:700 12px var(--font-ui);text-transform:uppercase;letter-spacing:.1em;color:var(--plywood)}
.result strong{display:block;font:700 18px var(--font-ui);text-transform:uppercase}
.result span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.article p{max-width:none}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--green);color:var(--on-green);padding:12px 20px;font:700 15px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;transition:opacity .2s,transform .2s;z-index:80;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* =========================================================
   Postęp wipe'a, serwer na żywo, mapa, rankingi, profil
   ========================================================= */
:root {
  --line-chart: #C9A57A;
}
.live-section .panel + .panel { margin-top: 8px; }

/* ---- Postęp wipe'a ---- */
.wp__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 700 14px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wp__meta strong { color: var(--text); }
.wp__track { overflow-x: auto; padding: 4px 2px 6px; }
.wp__steps { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); min-width: 640px; }
.wp__rail { position: absolute; left: 0; right: 0; top: 15px; height: 6px; background: var(--panel-hi); }
.wp__fill { position: absolute; left: 0; top: 15px; height: 6px; background: var(--green); transition: width .6s; }
.wp__step { position: relative; padding: 0 8px; text-align: center; }
.wp__node { position: relative; z-index: 1; display: block; width: 18px; height: 18px; margin: 9px auto 12px; background: var(--panel-hi); border: 3px solid var(--bg); outline: 2px solid var(--line); }
.wp__step.is-done .wp__node { background: var(--green); outline-color: var(--green); }
.wp__step.is-now .wp__node { background: var(--rust); outline-color: var(--rust); width: 24px; height: 24px; margin-top: 6px; margin-bottom: 9px; }
.wp__when { display: block; font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.wp__name { display: block; font: 700 16px/1.2 var(--font-ui); text-transform: uppercase; color: var(--text-3); margin-top: 2px; }
.wp__step.is-now .wp__when { color: var(--rust-text); }
.wp__step.is-now .wp__name, .wp__step.is-done .wp__name { color: var(--text); }
.wp__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 8px; margin-top: 8px; }
.wp__card { background: var(--bg); border: 1px solid var(--line); padding: 14px 16px; }
.wp__card h3 { margin: 0 0 10px; font: 800 18px var(--font-ui); text-transform: uppercase; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wp__card h3 span { color: var(--rust-text); font-variant-numeric: tabular-nums; }
.wp__card dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 6px 14px; font-size: 15px; }
.wp__card dt { color: var(--muted); }
.wp__card dd { margin: 0; font-family: var(--font-ui); font-weight: 700; color: var(--plywood); }
.wp__card--now { border-left: 4px solid var(--rust); }

/* ---- Wykresy ---- */
.live-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.live-big { font: 800 44px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.live-big small { font-size: 22px; color: var(--muted); }
.live-sub { color: var(--muted); font-size: 14px; }
.chart { position: relative; margin-top: 10px; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .gridline { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis text, .chart text.axis { fill: var(--muted); font: 12px var(--font-body); font-variant-numeric: tabular-nums; }
.chart .area { fill: var(--line-chart); fill-opacity: .14; }
.chart .line { fill: none; stroke: var(--line-chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .cross { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot { fill: var(--line-chart); stroke: var(--panel); stroke-width: 2; }
.chart .endlabel { fill: var(--text); font: 700 13px var(--font-ui); }
.tip {
  position: absolute; pointer-events: none; z-index: 5; white-space: nowrap;
  background: var(--bg-bar); border: 1px solid var(--line); padding: 6px 10px;
  font-size: 13px; color: var(--text-2); transform: translate(-50%, calc(-100% - 10px));
}
.tip strong { color: var(--text); font-family: var(--font-ui); font-size: 15px; font-variant-numeric: tabular-nums; }
.chart-empty { color: var(--muted); padding: 30px 0; text-align: center; border: 1px dashed var(--line); margin-top: 10px; }
.headline { font: 700 17px var(--font-ui); text-transform: uppercase; letter-spacing: .03em; margin: 14px 0 0; }
.headline span { color: var(--plywood); }
.online-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.online-list a { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line); padding: 4px 10px; font-size: 14px; color: var(--text-2); text-decoration: none; }
.online-list a::before { content: ""; width: 7px; height: 7px; background: var(--online); }
.online-list a:hover { color: var(--text); border-color: #5A4E42; }

/* ---- Widoki stron (mapa, rankingi, profil) ---- */
.page { padding-top: 40px; padding-bottom: 80px; }
.page h1 { font: 800 clamp(38px, 5vw, 54px)/1.02 var(--font-ui); text-transform: uppercase; margin: 6px 0 10px; }
.page__lead { color: var(--text-3); max-width: none; margin: 0 0 24px; font-size: 17px; }

/* ---- Mapa ---- */
.map-layout { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.map-main { flex: 999 1 560px; min-width: 0; }
.map-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1100px) { .map-side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); max-height: calc(100vh - 110px); overflow-y: auto; } }
.mapv { position: relative; overflow: hidden; background: #0b1a22; border: 1px solid var(--line); aspect-ratio: 1 / 1; max-width: 100%; touch-action: none; cursor: grab; user-select: none; }
.mapv:active { cursor: grabbing; }
.mapv__stage { position: absolute; inset: 0; transform-origin: 0 0; --k: 1; }
.mapv__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; max-width: none; }
.mapv__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapv__grid line { stroke: rgba(0, 0, 0, .35); stroke-width: .6; vector-effect: non-scaling-stroke; }
.mapv__grid text { fill: rgba(0, 0, 0, .42); font-family: var(--font-ui); font-weight: 700; }
.zone { stroke-width: 2; vector-effect: non-scaling-stroke; }
.zone.is-sel { stroke-width: 4; }
.mapv__pins { position: absolute; inset: 0; }
.pin {
  position: absolute; transform: translate(-50%, -50%) scale(calc(1 / var(--k))); transform-origin: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; padding: 4px; cursor: pointer; min-width: 28px; min-height: 28px;
}
.pin__dot { width: 14px; height: 14px; background: var(--c); border: 2px solid #0E0D0C; box-shadow: 0 0 0 2px var(--c); }
.pin--event .pin__dot { background: #0E0D0C; }
.pin--safe .pin__dot { border-radius: 50%; }
.pin--info .pin__dot { width: 10px; height: 10px; transform: rotate(45deg); }
.pin__label {
  font: 700 11px/1.1 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  color: #F4ECE4; background: rgba(14, 13, 12, .82); padding: 2px 5px;
}
.pin.is-sel .pin__dot { box-shadow: 0 0 0 4px var(--c); }
.pin.is-sel .pin__label { background: var(--c); color: #0E0D0C; }
.mapv.hide-labels .pin:not(.is-sel) .pin__label { display: none; }
.mapv__ctrl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 3; }
.mapv__ctrl .ib { width: 38px; height: 38px; font-size: 20px; background: rgba(26, 24, 22, .92); border: 1px solid var(--line); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mapv__ctrl .ib svg { width: 18px; height: 18px; }
.mapv__coord { position: absolute; left: 10px; bottom: 8px; margin: 0; z-index: 3; font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: #F4ECE4; background: rgba(14, 13, 12, .8); padding: 3px 8px; pointer-events: none; }
.mapv__coord:empty { display: none; }
.map-empty { border: 1px dashed var(--line); padding: 60px 20px; text-align: center; color: var(--muted); background: var(--panel); }
.legend { list-style: none; margin: 0; padding: 6px 0; }
.legend label { display: flex; align-items: flex-start; gap: 10px; padding: 8px 16px; cursor: pointer; }
.legend input { margin-top: 4px; accent-color: var(--plywood); }
.legend .sw { flex: none; width: 18px; height: 18px; margin-top: 2px; border: 2px solid var(--c); background: var(--c); }
.legend .sw--pvp { background: repeating-linear-gradient(45deg, rgba(230,103,103,.7) 0 3px, rgba(230,103,103,.2) 3px 7px); }
.legend .sw--event { background: transparent; border-style: dashed; }
.legend .sw--pve { background: rgba(25,158,112,.25); }
.legend .sw--safe { background: rgba(57,135,229,.25); border-radius: 50%; }
.legend .sw--info { width: 12px; height: 12px; margin: 5px 3px 0; transform: rotate(45deg); }
.legend strong { display: block; font: 700 15px var(--font-ui); text-transform: uppercase; letter-spacing: .03em; }
.legend small { display: block; color: var(--muted); font-size: 13px; }
.legend em { font-style: normal; margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.mk-list { list-style: none; margin: 0; padding: 6px 0; }
.mk-list button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 16px; background: none; border: 0; color: var(--text-3); font: 14px var(--font-body); cursor: pointer; }
.mk-list button:hover, .mk-list button.on { background: var(--panel-hi); color: var(--text); }
.mk-list button i { flex: none; width: 10px; height: 10px; background: var(--c); }
.mk-list button small { margin-left: auto; color: var(--muted); font: 700 12px var(--font-ui); }
.mk-detail { padding: 14px 16px; border-left: 4px solid var(--c); }
.mk-detail h3 { margin: 0 0 4px; font: 800 20px var(--font-ui); text-transform: uppercase; }
.mk-detail .cat { font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.mk-detail p { margin: 8px 0 0; color: var(--text-2); font-size: 15px; }

/* ---- Rankingi ---- */
.rk-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 2px; }
.seg button { background: var(--panel); border: 1px solid var(--line); color: var(--text-3); min-height: 42px; padding: 0 14px; font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .07em; cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--panel-hi); color: var(--text); box-shadow: inset 0 -3px 0 var(--rust); }
.rk-tools select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 0; min-height: 42px; padding: 0 10px; font: 14px var(--font-body); }
.rk-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rk-table th { background: var(--panel-head); text-align: left; padding: 10px 16px; font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.rk-table td { padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.rk-table td.pos { width: 64px; font: 800 18px var(--font-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.rk-table td.val { text-align: right; font: 700 17px var(--font-ui); color: var(--plywood); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-table th.val { text-align: right; }
.rk-table tr.top1 td.pos { color: #E8C391; } .rk-table tr.top2 td.pos { color: #CFC6BC; } .rk-table tr.top3 td.pos { color: #C98A5A; }
.rk-table tr.me td { background: rgba(184, 56, 31, .14); }
.rk-table a { color: var(--text); text-decoration: none; font-weight: 500; }
.rk-table a:hover { color: var(--plywood); }
.rk-empty { padding: 30px 16px; color: var(--muted); text-align: center; }

/* ---- Profil ---- */
.prof-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 20px; }
.prof-head img { width: 84px; height: 84px; border: 2px solid var(--line); }
.prof-head h1 { margin: 0; }
.prof-tier { flex: 1 1 280px; min-width: 0; }
.prof-tier b { font: 800 22px var(--font-ui); text-transform: uppercase; color: var(--plywood); }
.prof-tier .bar { margin: 8px 0 4px; height: 12px; }
.prof-tier small { color: var(--muted); font-size: 13px; }
.prof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; margin-top: 8px; }
.prof-grid--fit { display: flex; flex-wrap: wrap; }
.prof-grid--fit > * { flex: 1 1 max(min(100%, 240px), calc((100% - (var(--cols) - 1) * 8px) / var(--cols))); min-width: 0; }
@media (max-width: 1150px) { .prof-grid--fit > * { flex-basis: calc(50% - 4px); } }
@media (max-width: 560px) { .prof-grid--fit > * { flex-basis: 100%; } }
.stat-tile { background: var(--panel); border: 1px solid var(--line); padding: 14px 16px; display: grid; gap: 4px; }
.stat-tile span { font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.stat-tile b { font: 800 30px/1.05 var(--font-ui); font-variant-numeric: tabular-nums; }
.stat-tile small { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.stat-tile small strong { color: var(--rust-text); }
.login-card { padding: 28px; text-align: center; }
.login-card p { color: var(--text-2); max-width: 52ch; margin: 0 auto 18px; }
.nav__me { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.nav__me img { display: block; }
.nav__me img { width: 26px; height: 26px; border: 1px solid var(--line); }
.rk-title { font: 800 24px var(--font-ui); text-transform: uppercase; margin: 0; }
.prof-group { font: 800 20px var(--font-ui); text-transform: uppercase; margin: 22px 0 8px; display: flex; align-items: center; gap: 10px; }
.prof-group::before { content: ""; width: 10px; height: 10px; background: var(--rust); }

/* ---- Profil: historia, porównanie, prywatność ---- */
:root { --cmp-a: #C98500; --cmp-b: #3987E5; }
.prof-sub { margin: 22px 0 -10px; font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.pos-badge { display: inline-block; font: 700 12px var(--font-ui); color: var(--text-2); background: var(--panel-hi); padding: 1px 6px; font-variant-numeric: tabular-nums; }
.pos-badge--top { background: var(--rust); color: var(--on-rust); }
.hist-head, .hist-row summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) 20px; gap: 12px; align-items: center; }
.hist-head { padding: 0 16px 6px; font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.hist-head::after { content: ""; }
.hist-list { display: grid; gap: 4px; }
.hist-row { background: var(--panel); border: 1px solid var(--line); }
.hist-row summary { cursor: pointer; list-style: none; padding: 12px 16px; }
.hist-row summary::-webkit-details-marker { display: none; }
.hist-row summary::after { content: "+"; color: var(--rust-text); font: 700 20px var(--font-ui); text-align: right; }
.hist-row[open] summary::after { content: "–"; }
.hist-row[open] summary { background: var(--panel-head); }
.hist-date { font: 700 16px var(--font-ui); text-transform: uppercase; }
.hist-date small, .hist-pt small { display: block; font: 400 12px var(--font-body); text-transform: none; color: var(--muted); }
.hist-pt { font: 700 16px var(--font-ui); color: var(--plywood); font-variant-numeric: tabular-nums; }
.hist-best { font-size: 14px; color: var(--text-2); line-height: 1.7; }
.hist-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px 24px; padding: 14px 16px 16px; border-top: 1px solid var(--line-soft); }
.hist-grp > span { font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--plywood); }
.hist-grp dl { margin: 6px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; }
.hist-grp dt { color: var(--muted); }
.hist-grp dd { margin: 0; text-align: right; font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .hist-head { display: none; }
  .hist-row summary { grid-template-columns: minmax(0, 1fr) 20px; }
  .hist-row summary .hist-pt, .hist-row summary .hist-best { grid-column: 1; }
  .hist-row summary::after { grid-row: 1; grid-column: 2; }
}
.prof-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 8px; margin-top: 28px; align-items: start; }
.cmp-box input { width: 100%; height: 46px; padding: 0 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 0; color: var(--text); font: 15px var(--font-body); }
.cmp-box input::placeholder { color: var(--muted); }
.cmp-results { list-style: none; margin: 6px 0 0; padding: 0; }
.cmp-results a { display: block; padding: 9px 12px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-soft); }
.cmp-results a:hover, .cmp-results a:focus-visible { background: var(--panel-hi); }
.cmp-results .note { padding: 9px 12px; }
.priv { display: grid; gap: 10px; }
.priv-opt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.priv-opt input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green); flex: none; }
.priv-opt strong { display: block; font: 700 15px var(--font-ui); text-transform: uppercase; letter-spacing: .03em; }
.priv-opt small { display: block; color: var(--muted); font-size: 13px; }
.anon { color: var(--muted); font-style: italic; }
.online-hidden { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 14px; color: var(--muted); border: 1px dashed var(--line); }
.cmp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; margin: 8px 0 18px; }
.cmp-player { display: grid; gap: 2px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.cmp-player--a { border-top: 4px solid var(--cmp-a); }
.cmp-player--b { border-top: 4px solid var(--cmp-b); text-align: right; }
.cmp-player strong { font: 800 22px var(--font-ui); text-transform: uppercase; overflow-wrap: anywhere; }
.cmp-player small { color: var(--muted); font-size: 13px; }
.cmp-player:hover { background: #201D1A; color: var(--text); }
.cmp-sw { display: none; }
.cmp-vs { font: 800 22px var(--font-ui); color: var(--rust-text); }
.cmp-sum { margin: 0; font-size: 15px; color: var(--text-2); }
.cmp-sum strong { font-family: var(--font-ui); text-transform: uppercase; color: var(--text); }
.cmp-table { padding: 4px 16px 16px; }
.cmp-group .prof-group { margin-top: 16px; }
.cmp-row { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(0, 3fr) minmax(70px, 1fr); gap: 12px; align-items: end; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.cmp-val { font: 700 17px var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.cmp-val--b { text-align: right; }
.cmp-val.is-win { color: var(--text); }
.cmp-val--a.is-win::before { content: "▲ "; color: var(--cmp-a); font-size: 12px; }
.cmp-val--b.is-win::after { content: " ▲"; color: var(--cmp-b); font-size: 12px; }
.cmp-mid { min-width: 0; }
.cmp-label { display: block; text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.cmp-bar { display: flex; gap: 2px; height: 10px; background: var(--panel-hi); }
.cmp-bar i:first-child { background: var(--cmp-a); }
.cmp-bar i:last-child { background: var(--cmp-b); }
.cmp-bar.is-empty i { background: transparent; }
@media (max-width: 560px) {
  .cmp-head { grid-template-columns: 1fr; }
  .cmp-player--b { text-align: left; }
  .cmp-vs { text-align: center; }
  .cmp-row { grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr); }
  .cmp-mid { grid-column: 1 / -1; grid-row: 1; }
}

/* ---- Stopka zawsze na dole ekranu, nawet przy krótkiej treści ---- */
body.site { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.site > #main { flex: 1 0 auto; }
body.site > .site-header, body.site > .hazard, body.site > .site-footer { flex-shrink: 0; }

/* ---- Szersze widoki na dużych i ultraszerokich monitorach ---- */
.wrap.wiki-layout { max-width: 1680px; }
.wrap.page { max-width: 1480px; }
@media (min-width: 1700px) {
  .wiki-nav { flex-basis: 280px; }
  .wiki-aside { flex-basis: 260px; }
}
/* Tabela poziomów (Bradley, helikopter): krótkie kolumny w jednej linii, loot szerzej */
.wrap { max-width: 1480px; }
.wiki-header .wrap, .wrap.wiki-layout { max-width: 1680px; }
.brand__name, .nav__link { white-space: nowrap; }
.wp__date { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wp__step.is-hl .wp__name, .wp__step.is-hl .wp__when { color: var(--rust-text); }
.wp__step.is-hl .wp__node { outline-color: var(--rust); }
.wp__card.is-hl { border-color: var(--rust); background: rgba(184, 56, 31, .12); }
.wp__card.is-hl h3 { color: var(--rust-text); }
.wp__cardwhen { margin: -4px 0 10px; color: var(--muted); font-size: 14px; }

/* ---- Dymek z opisem znacznika na mapie ---- */
.mapv__tip {
  position: absolute; z-index: 4; width: max-content; max-width: min(320px, calc(100% - 16px));
  transform: translate(-50%, -100%); pointer-events: none;
  background: rgba(20, 18, 16, .97); border: 1px solid var(--line); border-top: 3px solid var(--c);
  padding: 10px 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); cursor: default;
}
.mapv__tip.is-below { transform: translate(-50%, 0); border-top: 1px solid var(--line); border-bottom: 3px solid var(--c); }
.mapv__tip::after {
  content: ""; position: absolute; left: var(--ax, 50%); top: 100%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--line);
}
.mapv__tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--line); }
.mapv__tip .cat { display: block; font: 700 11px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.mapv__tip > strong { display: block; font: 800 17px/1.2 var(--font-ui); text-transform: uppercase; color: var(--text); margin-top: 2px; }
.mapv__tip p, .mapv__tipdesc p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.mapv__tipdesc ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--text-2); }
.mapv__tipdesc strong { color: var(--text); }

/* Tło strony: poziomice terenu + siatka mapy (stoi w miejscu, przyciemnione przy krawędziach) */
body.site::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(14,13,12,0) 0, rgba(14,13,12,.85) 80%),
    linear-gradient(rgba(201,165,122,.05) 1px, transparent 1px) 0 0 / 146px 146px,
    linear-gradient(90deg, rgba(201,165,122,.05) 1px, transparent 1px) 0 0 / 146px 146px,
    url(/assets/img/topo.svg) 0 0 / 1200px;
  opacity: .12;
}
@media (max-width: 700px) { body.site::after { background-size: auto, 110px 110px, 110px 110px, 900px; } }
@media print { body.site::after { display: none; } }

/* ---------- Odznaki (haftowane naszywki) ---------- */
.bdg-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bdg-box { display: block; margin-bottom: 8px; }
.bdg-note { margin: 0 0 14px; font-size: 14px; color: var(--text-3); }
.bdg-tabs { margin-bottom: 18px; }
.bdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 20px 10px; }
.bdg { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; padding: 8px 4px 10px; border: 1px solid transparent; font-family: var(--font-ui); }
@media (hover: hover) { .bdg:hover { background: var(--panel-hi); } }
.bdg:focus-visible { outline: 2px solid var(--plywood); outline-offset: 2px; }
.bdg.is-sel { border-color: var(--line); background: var(--panel-head); }
.bdg__w { position: relative; width: 88px; height: 99px; transition: transform .15s; }
@media (hover: hover) { .bdg:hover .bdg__w { transform: translateY(-2px); } }
.bdg.is-lock .bdg__w { opacity: .75; }
.bdg__new { position: absolute; top: 0; right: -14px; background: var(--online); color: #111; font: 800 10px/1 var(--font-ui); padding: 3px 5px; text-transform: uppercase; letter-spacing: .04em; }
.bdg__name { font-weight: 700; font-size: 13px; line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.bdg.is-lock .bdg__name { color: var(--muted); }
.bdg__val { font-family: var(--font-body); font-size: 12px; color: var(--muted); }
.bdg__bar { display: block; width: 80px; height: 5px; background: var(--panel-hi); }
.bdg__bar i { display: block; height: 100%; background: var(--c, var(--muted)); }
.bdg__bar--big { width: 100%; height: 6px; margin-top: 16px; }
.bdg-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 20px 0 0; font-size: 13px; color: var(--text-3); }
.bdg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bdg-legend i, .bdg-ladder i { width: 12px; height: 13px; background: var(--c); clip-path: polygon(50% 0, 100% 15%, 100% 55%, 50% 100%, 0 55%, 0 15%); }
.bdg-legend .is-leg i, .bdg-ladder .is-leg i { background: repeating-linear-gradient(-45deg, var(--rust) 0 3px, #141210 3px 6px); }
.bdg-det__top { display: flex; gap: 16px; align-items: flex-start; }
.bdg-det__img { flex: none; width: 112px; height: 126px; }
.bdg-det h3 { font-family: var(--font-ui); text-transform: uppercase; font-size: 20px; margin: 4px 0; }
.bdg-det .note { margin: 0; }
.bdg-det__val { margin: 8px 0 0; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--plywood); font-size: 14px; }
.bdg-ladder { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 7px; }
.bdg-ladder li { display: grid; grid-template-columns: 14px 92px 1fr auto; gap: 10px; align-items: center; font-size: 14px; color: var(--text-2); }
.bdg-ladder b { font-family: var(--font-ui); text-transform: uppercase; font-size: 13px; letter-spacing: .03em; }
.bdg-ladder small { color: var(--muted); text-align: right; }
.bdg-ladder .is-no { opacity: .5; }
.bdg-det .addline { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.prof-feat:empty { display: none; }
.prof-feat { margin: 4px 0 6px; }
.bdg-mini { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 8px; }
.bdg-mini span { display: block; width: 18px; height: 20px; }
.prof-feat .bdg-mini { margin-left: 0; gap: 6px; }
.prof-feat .bdg-mini span { width: 40px; height: 45px; }
@media (max-width: 600px) {
  .bdg-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 6px; }
  .bdg__w { width: 70px; height: 79px; }
  .bdg__name { font-size: 12px; }
  .bdg-det__img { width: 84px; height: 95px; }
  .bdg-ladder li { grid-template-columns: 14px 84px 1fr; }
  .bdg-ladder small { grid-column: 2 / -1; text-align: left; margin-top: -4px; }
}
.bdg-det .btn:disabled { opacity: .45; cursor: not-allowed; }

/* Zakładki profilu */
.prof-tabs { display: flex; gap: 4px; margin: 24px 0 0; border-bottom: 2px solid var(--line); overflow-x: auto; }
.prof-tab { all: unset; box-sizing: border-box; cursor: pointer; padding: 12px 20px; font: 700 15px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); background: var(--panel); border: 1px solid var(--line); border-bottom: 0; white-space: nowrap; }
.prof-tab small { font-size: 12px; color: var(--muted); margin-left: 6px; letter-spacing: .02em; }
@media (hover: hover) { .prof-tab:hover { color: var(--text); background: var(--panel-hi); } }
.prof-tab:focus-visible { outline: 2px solid var(--plywood); outline-offset: -2px; }
.prof-tab.on { color: var(--text); background: var(--panel-head); box-shadow: inset 0 -3px 0 var(--rust); }
.prof-tab.on small { color: var(--plywood); }
.prof-pane { padding-top: 8px; }
.prof-pane > .bdg-box { margin-top: 16px; }
@media (max-width: 600px) { .prof-tab { padding: 10px 14px; font-size: 14px; flex: 1; text-align: center; } }

/* Dymek wyróżnionej odznaki */
.bdg-mini__i { cursor: help; outline-offset: 2px; }
.bdg-mini__i:focus-visible { outline: 2px solid var(--plywood); }
.bdg-tip { position: absolute; z-index: 80; display: flex; gap: 12px; align-items: flex-start; width: max-content; max-width: min(300px, calc(100vw - 16px)); padding: 12px 14px; background: var(--panel-head); border: 1px solid var(--line); border-top: 3px solid var(--c); box-shadow: 0 10px 28px rgba(0,0,0,.55); pointer-events: none; }
.bdg-tip[hidden] { display: none; }
.bdg-tip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -7px; width: 12px; height: 12px; background: var(--panel-head); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.bdg-tip.is-below::after { bottom: auto; top: -9px; border: 0; border-left: 3px solid var(--c); border-top: 3px solid var(--c); background: var(--panel-head); width: 12px; height: 12px; }
.bdg-tip__img { flex: none; width: 46px; height: 52px; }
.bdg-tip__txt { display: grid; gap: 3px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.bdg-tip__txt strong { font: 700 15px var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.bdg-tip__tier { justify-self: start; font: 800 11px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: #14110F; background: var(--c); padding: 2px 6px; }
.bdg-tip__tier.is-leg { background: var(--rust); color: var(--on-rust); }
.bdg-tip__txt small { color: var(--muted); font-size: 12px; }

/* ---------- Aktualności ---------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 8px; margin-top: 24px; }
.news-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--plywood); color: var(--text); text-decoration: none; transition: border-color .15s, background .15s; }
.news-card:hover { background: var(--panel-head); color: var(--text); border-color: var(--line); border-top-color: var(--rust); }
.news-card__img { display: block; aspect-ratio: 16 / 8; overflow: hidden; background: var(--panel-hi); }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.news-card__meta, .news-post__meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font-size: 13px; color: var(--muted); }
.news-card__title { font: 800 21px/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .02em; }
.news-card__text { color: var(--text-3); font-size: 15px; }
.news-card__more { margin-top: auto; padding-top: 6px; color: var(--rust-text); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.news-tag { font: 800 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; padding: 4px 7px; background: var(--panel-hi); color: var(--text-2); }
.news-tag--wipe { background: var(--rust); color: var(--on-rust); }
.news-tag--update { background: #2F4A5C; color: #DDEBF3; }
.news-tag--event { background: var(--green); color: var(--on-green); }
.news-tag--info { background: #4A4036; color: #EADCC8; }
.news-pin { font: 700 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--plywood); border: 1px solid var(--plywood); padding: 3px 6px; }
.news-post { max-width: 900px; }
.news-post h1 { margin-top: 10px; }
.news-post__img { margin: 0 0 24px; border: 1px solid var(--line); }
.news-post__img img { width: 100%; }
.news-post__body { margin-bottom: 8px; }
.news-changes { margin: 32px 0; }
.news-changes h2 { margin-bottom: 14px; }
.news-ch { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--c); padding: 14px 18px; margin-bottom: 8px; --c: var(--plywood); }
.news-ch h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 800 15px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--c); }
.news-ch h3 i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--c); color: #14110F; font-size: 15px; }
.news-ch ul { margin: 0; padding-left: 20px; color: var(--text-2); }
.news-ch li { margin: 4px 0; }
.news-ch--add { --c: #7FA33F; }
.news-ch--change { --c: #E8C15A; }
.news-ch--remove { --c: #E66767; }
.news-ch--fix { --c: #7FC6E0; }

/* Obrazki w treści artykułów i aktualności */
.md-img { margin: 20px 0; }
.md-img a { display: block; border: 1px solid var(--line); background: var(--panel); cursor: zoom-in; }
.md-img img { width: 100%; height: auto; }
.md-img figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.md-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; margin: 20px 0; }
.md-gallery .md-img { margin: 0; }
.md-gallery .md-img img { aspect-ratio: 16 / 10; object-fit: cover; }
.zoom { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(8, 7, 6, .92); cursor: zoom-out; }
.zoom[hidden] { display: none; }
.zoom figure { margin: 0; max-width: min(1600px, 100%); text-align: center; }
.zoom img { max-width: 100%; max-height: calc(100dvh - 110px); width: auto; margin: 0 auto; border: 1px solid var(--line); }
.zoom figcaption { margin-top: 10px; color: var(--text-2); font-size: 15px; }
.zoom__x { position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; font-size: 30px; line-height: 1; background: var(--panel-hi); color: var(--text); border: 1px solid var(--line); cursor: pointer; }
body.no-scroll { overflow: hidden; }

/* ---------- Hall of Fame ---------- */
.rk-switch { display: flex; gap: 4px; margin: 4px 0 28px; border-bottom: 2px solid var(--line); }
.rk-switch a { padding: 11px 20px; font: 700 15px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-bottom: 0; }
.rk-switch a:hover { color: var(--text); background: var(--panel-hi); }
.rk-switch a[aria-current] { color: var(--text); background: var(--panel-head); box-shadow: inset 0 -3px 0 var(--rust); }
@media (max-width: 560px) { .rk-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .rk-switch a { padding: 10px 8px; font-size: 13px; text-align: center; border-bottom: 1px solid var(--line); } }
.hof-sec { margin-bottom: 44px; }
.hof-sec > h2 { margin-bottom: 6px; }
.hof-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.hof-head h2 { margin: 0; }
.hof-head select { max-width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 0; min-height: 42px; padding: 0 10px; font: 14px var(--font-body); }
.hof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 8px; }
.hof-card { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid #E8C15A; padding: 14px 16px 12px; display: grid; gap: 8px; }
.hof-card__cat { font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.hof-card__first { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.hof-card__first .hof-card__name { font: 700 18px var(--font-ui); text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-card__first b { font: 800 18px var(--font-ui); color: var(--plywood); }
.hof-card__name a { color: var(--text); text-decoration: none; }
.hof-card__name a:hover { color: var(--rust-hover); }
.hof-card__rest { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 5px; font-size: 14px; color: var(--text-3); }
.hof-card__rest li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.hof-card__rest .hof-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-card__rest .hof-card__name a { color: var(--text-2); }
.medal { display: inline-grid; place-items: center; width: 24px; height: 24px; font: 800 13px var(--font-ui); color: #14110F; clip-path: polygon(50% 0, 100% 15%, 100% 60%, 50% 100%, 0 60%, 0 15%); flex: none; }
.medal--1 { background: #E8C15A; }
.medal--2 { background: #C6CDD2; width: 20px; height: 20px; font-size: 11px; }
.medal--3 { background: #B08A5E; width: 20px; height: 20px; font-size: 11px; }
.hof-rec th[scope="row"] { font-weight: 500; color: var(--text-2); text-align: left; }
.hof-rec td .medal { vertical-align: middle; margin-right: 4px; }
.hof-next { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.hof-date, .hof-by { color: var(--muted); font-size: 14px; }
.prof-views { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 14px; color: var(--text-3); }
.prof-views svg { color: var(--plywood); }
.prof-online { display: flex; width: max-content; align-items: center; gap: 8px; margin: 2px 0 0; font: 700 14px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--online-text); }
.prof-online__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 3px rgba(127, 163, 63, .25); animation: onl 2s ease-in-out infinite; }
@keyframes onl { 50% { box-shadow: 0 0 0 6px rgba(127, 163, 63, 0); } }
@media (prefers-reduced-motion: reduce) { .prof-online__dot { animation: none; } }

/* Wpis z aktualności: nagłówek i okładka na tle strony, treść na jednolitym panelu */
.news-post__content { background: var(--panel); border: 1px solid var(--line); padding: 32px 40px 36px; }
.news-post__content > .news-post__body > :first-child { margin-top: 0; }
.news-post__content > .news-post__body > :last-child { margin-bottom: 0; }
.news-post__content .news-changes { margin: 32px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.news-post__content .news-post__body + .news-changes { margin-top: 32px; }
.news-post__content > .news-changes:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.news-post__content .news-ch { background: var(--bg-bar); }
.news-post__content .md-img a { background: var(--bg-bar); }
@media (max-width: 640px) { .news-post__content { padding: 20px 18px 24px; margin: 0 -4px; } }
.wrap.news-post { max-width: 1000px; }
.news-post__content .news-changes h2 { margin-top: 0; }
.news-post__content .article { max-width: none; }

/* Nagłówki w treści: "## Tekst" (mały, jak „■ O SERWERZE”) i "# Tekst" (duży) */
.md-h2, .md-h1, .article .md-h2, .article .md-h1 { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); text-transform: uppercase; color: var(--text); }
.md-h2, .article .md-h2 { font-weight: 800; font-size: 17px; letter-spacing: .08em; margin: 30px 0 8px; }
.md-h2::before, .article .md-h2::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--rust); }
.md-h1, .article .md-h1 { font-weight: 800; font-size: 28px; letter-spacing: .02em; margin: 40px 0 12px; }
.md-h1::before, .article .md-h1::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--rust); }
.news-post__body > .md-h1:first-child, .news-post__body > .md-h2:first-child { margin-top: 0; }
/* We wpisie tekst zajmuje całą szerokość panelu (panel ma już wygodną szerokość) */
.news-post__content .article p, .news-post__content .article li { max-width: none; }
.news-post .page__lead { max-width: none; }

/* Przycisk „Porównaj” obok zakładek profilu i okno wyboru gracza */
.prof-tab--cmp { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--text); background: var(--panel-hi); }
@media (hover: hover) { .prof-tab--cmp:hover { background: #38322C; } }
.prof-tab__vs { display: inline-grid; place-items: center; height: 22px; padding: 0 6px; background: var(--rust); color: var(--on-rust); font: 800 11px var(--font-ui); letter-spacing: .06em; }
span.prof-tab.on { cursor: default; }
@media (max-width: 600px) { .prof-tab--cmp { margin-left: 0; flex: 0 0 auto; } }
.cmp-again { margin: 24px 0 0; }
.cmp-dlg { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; padding: 10vh 16px 16px; background: rgba(8, 7, 6, .82); }
.cmp-dlg[hidden] { display: none; }
.cmp-dlg__box { width: min(520px, 100%); max-height: 78vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.cmp-dlg__box .panel__head { display: flex; justify-content: space-between; align-items: center; }
.cmp-dlg__x { all: unset; cursor: pointer; font-size: 26px; line-height: 1; color: var(--text-3); padding: 0 4px; }
.cmp-dlg__x:hover { color: var(--text); }
.cmp-dlg__x:focus-visible { outline: 2px solid var(--plywood); }
.cmp-dlg__box .panel__body { display: flex; flex-direction: column; min-height: 0; padding: 16px; }
.cmp-dlg__box input { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--line); min-height: 46px; padding: 0 14px; font: 16px var(--font-body); }
.cmp-dlg__box input:focus { outline: 2px solid var(--plywood); outline-offset: -1px; }
.cmp-dlg__n { margin: 10px 0 6px; font-size: 13px; }
.cmp-dlg__l { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; border-top: 1px solid var(--line-soft); }
.cmp-dlg__l a { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 10px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-soft); }
.cmp-dlg__l a:hover, .cmp-dlg__l a:focus-visible, .cmp-dlg__l [aria-selected="true"] a { background: var(--panel-hi); outline: none; }
.cmp-dlg__l strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-dlg__l small { color: var(--muted); font-size: 13px; }
.cmp-dlg__on, .cmp-dlg__off { width: 8px; height: 8px; border-radius: 50%; }
.cmp-dlg__on { background: var(--online); }
.chart { min-height: 230px; }
a .ext { display: inline-block; margin-left: 3px; vertical-align: baseline; }
/* Gracze online pod statusem serwera */
.srv-online { margin-top: 8px; padding: 12px 18px 14px; background: var(--panel); border: 1px solid var(--line); }
.srv-online[hidden] { display: none; }
.srv-online .online-list { margin-top: 0; }
.srv-online { --rows: 2; }
.srv-online__h { margin: 0 0 10px; font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.srv-online__h span { color: var(--online-text); margin-left: 4px; }
.srv-online .online-list { overflow: hidden; }
.srv-online__more { all: unset; cursor: pointer; margin-top: 10px; font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--rust-text); }
.srv-online__more:hover { color: var(--rust-hover); }
.srv-online__more:focus-visible { outline: 2px solid var(--plywood); outline-offset: 2px; }
.srv-online__more[hidden] { display: none; }
@media (max-width: 640px) { .srv-online { --rows: 4; } }

/* Przycisk „Kopiuj link” przy sekcjach wiki */
.sec-link { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 5px 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text-3); font: 700 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .15s, color .15s, border-color .15s; }
.sec-link svg { width: 14px; height: 14px; }
.article h2:hover .sec-link, .sec-link:focus-visible, .sec-link.is-done { opacity: 1; }
.sec-link:hover { color: var(--text); border-color: #5A4E42; }
.sec-link:focus-visible { outline: 2px solid var(--plywood); outline-offset: 2px; }
.sec-link.is-done { color: var(--online-text); border-color: var(--online); }
/* Ekrany dotykowe: zawsze widoczna sama ikonka, po prawej */
@media (hover: none) {
  .sec-link { opacity: 1; margin-left: auto; padding: 6px 7px; }
  .sec-link span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sec-link { transition: none; } }

/* Poziomy trudności jako karty (np. dungeony) */
.tier-cards { --cols: 3; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
/* Karty w ostatnim rzędzie rozciągają się na wolne miejsce; poniżej ~300px na kartę przechodzą do mniejszej liczby kolumn */
.tier-card { flex: 1 1 max(min(100%, 300px), calc((100% - (var(--cols) - 1) * 10px) / var(--cols))); min-width: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--tc); }
.tier-card__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--panel-head); border-bottom: 1px solid var(--line); }
.tier-card__name, .article .tier-card__name { display: block; min-width: 0; margin: 0; font: 800 19px/1.15 var(--font-ui); text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
.article .tier-card__name::before { content: none; }
.tier-card__cmd { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.tier-card__cmd small { font: 700 10px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.tier-card__rows dd.tier-card__price { font: 800 18px/1.2 var(--font-ui); color: var(--plywood); }
.tier-card__rows { margin: 0; padding: 4px 16px 14px; display: grid; }
.tier-card__rows > div { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.tier-card__rows > div:first-child { border-top: 0; }
.tier-card__rows dt { font: 700 11px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.tier-card__rows dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.tier-card__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.article .tier-card__chips { padding: 0; }
.tier-card__chips li, .article .tier-card__chips li { margin: 0; padding: 3px 9px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; color: var(--text); }

/* ---------- Ranking punktowy ---------- */
.pts-rules { margin: 0 0 12px; background: var(--panel); border: 1px solid var(--line); }
.pts-rules summary { cursor: pointer; padding: 10px 14px; font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.pts-rules summary:hover { color: var(--text); }
.pts-rules ul { list-style: none; margin: 0; padding: 4px 14px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 24px; border-top: 1px solid var(--line-soft); }
.pts-rules li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--text-2); }
.pts-rules li b { color: var(--plywood); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pts-rules .note { margin: 0; padding: 10px 14px 12px; }
/* „Jak liczymy punkty?”: drabinki poziomów + grupy */
.pts-rules__in { padding: 4px 14px 2px; border-top: 1px solid var(--line-soft); }
.ptr-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 14px 0 8px; font: 800 14px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.ptr-h small { font: 13px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.ptls { display: grid; gap: 6px; }
.ptl { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line-soft); }
.ptl__h b { display: block; font: 700 15px var(--font-ui); text-transform: uppercase; letter-spacing: .03em; }
.ptl__h small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.ptl__t { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ptl__t li { --tc: #9A9089; min-width: 88px; padding: 5px 10px 6px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--tc); text-align: center; }
.ptl__t span { display: block; font: 700 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tc); }
.ptl__t b { display: block; font: 800 19px var(--font-ui); color: var(--plywood); font-variant-numeric: tabular-nums; }
.ptl__t b::after { content: " pkt"; font-size: 12px; font-weight: 700; }
.ptl__t .tier-easy { --tc: #7FA33F; } .ptl__t .tier-normal { --tc: #A3B05A; } .ptl__t .tier-medium { --tc: #D9B44A; } .ptl__t .tier-hard { --tc: #E08A3A; }
.ptl__t .tier-expert { --tc: #E0553A; } .ptl__t .tier-nightmare { --tc: #B53A5E; } .ptl__t .tier-elite { --tc: #A27FD6; } .ptl__t .tier-impossible { --tc: #6E7CE0; }
.ptcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px; }
.ptc { background: var(--bg); border: 1px solid var(--line-soft); }
.ptc h4 { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); font: 800 13px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.pts-rules .ptc ul { display: block; padding: 2px 12px 4px; border: 0; }
.pts-rules .ptc li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.pts-rules .ptc li:last-child { border: 0; }
.ptr-n { color: var(--text-2); }
.ptr-n em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.ptr-v { flex: none; text-align: right; white-space: nowrap; }
.ptr-v b { color: var(--plywood); font: 800 15px var(--font-ui); font-variant-numeric: tabular-nums; }
.ptr-v small { color: var(--muted); font-size: 12px; }
.pts-rules .ptl__t li { display: block; flex: 1 1 0; min-width: 76px; max-width: 130px; padding: 5px 8px 6px; border-bottom: 1px solid var(--line); font-size: inherit; }
@media (max-width: 640px) { .ptl { grid-template-columns: 1fr; gap: 6px; } .ptl__t { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pts-rules .ptl__t li { min-width: 0; max-width: none; padding: 4px; } .ptl__t span { font-size: 10px; letter-spacing: .04em; } .ptl__t b { font-size: 16px; } }
.pts-rules__in .note { padding: 12px 0; }
.stat-tile--pts { align-content: start; }
.pts-by { margin-top: 6px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.pts-by summary { cursor: pointer; font-size: 13px; color: var(--text-2); }
.pts-by dl { margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 28px; font-size: 13px; }
.pts-by dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.pts-by dt { color: var(--text-2); }
.pts-by dd { margin: 0; text-align: right; color: var(--plywood); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Avatary w tabelach graczy ---------- */
.rk-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; vertical-align: middle; }
.rk-av { display: inline-block; flex: none; width: 32px; height: 32px; border: 1px solid var(--line); background: var(--bg); object-fit: cover; vertical-align: middle; }
.rk-av--sm { width: 24px; height: 24px; margin-right: 8px; }
.rk-av--anon { display: inline-grid; place-items: center; color: var(--muted); }
.rk-av--anon svg { width: 55%; height: 55%; }
.rk-table tr.top1 .rk-av { border-color: #d9a441; }
.rk-table tr.top2 .rk-av { border-color: #b9b4ad; }
.rk-table tr.top3 .rk-av { border-color: #b8774a; }
.hof-card__first .rk-av--sm { width: 28px; height: 28px; }

/* ---------- Top 5 na stronie głównej: równe kafelki ---------- */
.podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.podium__i { --mc: var(--line); min-width: 0; margin: 0; }
.podium__i--1 { --mc: #E8C15A; }
.podium__i--2 { --mc: #C6CDD2; }
.podium__i--3 { --mc: #B08A5E; }
.podium__c { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 14px 18px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--mc); color: var(--text); text-decoration: none; transition: background .15s; }
a.podium__c:hover { background: var(--panel-head); }
a.podium__c:hover .podium__name { color: var(--rust-hover); }
.podium__pos { position: absolute; top: 10px; left: 12px; font: 800 15px var(--font-ui); color: var(--muted); }
.podium__i--1 .podium__pos, .podium__i--2 .podium__pos, .podium__i--3 .podium__pos { color: var(--mc); }
.podium__av { width: 72px; height: 72px; border: 2px solid var(--mc); object-fit: cover; background: var(--bg); }
.podium__av--anon { display: grid; place-items: center; color: var(--muted); }
.podium__av--anon svg { width: 55%; height: 55%; }
.podium__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px var(--font-ui); }
.podium__name.anon { font-style: italic; color: var(--text-3); }
.podium__c .bdg-mini { justify-content: center; margin: 0; }
.podium__pts { margin-top: auto; font: 800 22px var(--font-ui); color: var(--plywood); font-variant-numeric: tabular-nums; }
.podium__pts small { margin-left: 3px; font-size: 13px; color: var(--muted); }
.podium__me { font: 700 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-text); }
.podium__i.is-me .podium__c { box-shadow: inset 0 0 0 1px var(--rust); }
/* Węższe ekrany: 3 + 2, telefon: po dwa (pierwszy na całą szerokość) */
@media (max-width: 1000px) { .podium { grid-template-columns: repeat(6, minmax(0, 1fr)); } .podium__i { grid-column: span 2; } .podium__i--4, .podium__i--5 { grid-column: span 3; } }
@media (max-width: 560px) { .podium { grid-template-columns: repeat(2, minmax(0, 1fr)); } .podium__i, .podium__i--4, .podium__i--5 { grid-column: auto; } .podium__i--1 { grid-column: 1 / -1; } }

/* ---------- Rankingi: kategorie w kolumnie z boku ---------- */
.rk-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.rk-main { min-width: 0; }
.rk-side { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); }
.rk-side__grp { border-top: 1px solid var(--line-soft); }
.rk-side__grp:first-child { border-top: 0; }
.rk-side button.rk-side__name { display: flex; align-items: center; gap: 8px; padding: 11px 14px 11px 11px; font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .12em; color: var(--plywood); }
.rk-side__name span { flex: 1; }
.rk-side__name small { min-width: 22px; padding: 1px 6px; background: var(--bg); border: 1px solid var(--line); font: 600 11px var(--font-ui); letter-spacing: 0; color: var(--text-3); text-align: center; }
.rk-side__name i { width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.rk-side__grp.is-open .rk-side__name i { transform: rotate(45deg); }
.rk-side__grp.has-cur:not(.is-open) .rk-side__name { border-left-color: var(--rust); }
.rk-side button.rk-side__name.on, .rk-side__grp.has-cur .rk-side__name[data-board] { border-left-color: var(--rust); background: var(--panel-hi); }
.rk-side__items { display: none; padding: 0 0 6px; }
.rk-side__grp.is-open .rk-side__items { display: block; }
.rk-side button { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 3px solid transparent; color: var(--text-2); padding: 7px 14px 7px 11px; font: 500 15px var(--font-body); cursor: pointer; }
.rk-side button:hover { color: var(--text); background: var(--panel-hi); }
.rk-side button.on { border-left-color: var(--rust); background: var(--panel-hi); color: var(--text); }
.rk-pick { display: none; }
@media (max-width: 900px) {
  .rk-layout { grid-template-columns: 1fr; }
  .rk-side { display: none; }
  .rk-pick { display: grid; gap: 6px; margin-bottom: 12px; }
  .rk-pick span { font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .12em; color: var(--plywood); }
  .rk-pick select { width: 100%; min-height: 46px; padding: 0 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 0; font: 15px var(--font-body); }
}

/* ---------- Rankingi: Twoje miejsce i „Pokaż więcej” ---------- */
.rk-table tr.rk-gap td { padding: 2px 16px; text-align: center; color: var(--muted); letter-spacing: .3em; border-top: 1px solid var(--line-soft); }
.rk-table tr.rk-mine td { border-top: 1px dashed var(--line); }
.rk-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin: 14px 0 4px; }
.rk-more .btn[disabled] { opacity: .7; cursor: progress; }

/* ---------- Profil: nagłówek z paskiem informacji ---------- */
.ph { padding: 0; overflow: visible; }
.ph__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 24px; }
.ph__av { display: block; width: 96px; height: 96px; border: 2px solid var(--line); object-fit: cover; background: var(--bg); }
.ph__av--anon { display: grid; place-items: center; color: var(--muted); }
.ph__av--anon svg { width: 55%; height: 55%; }
.ph__id { min-width: 0; }
.ph__eb { margin: 0 0 4px; font: 700 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--rust-text); }
.ph__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.ph__name h1 { margin: 0; font-size: clamp(30px, 4vw, 42px); line-height: 1; overflow-wrap: anywhere; }
.ph__name .prof-feat { margin: 0; }
.ph__name .prof-feat .bdg-mini span { width: 34px; height: 38px; }
.ph__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 14px; color: var(--text-3); }
.ph__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.ph__meta svg { color: var(--plywood); flex: none; }
.ph__dot { width: 8px; height: 8px; background: var(--muted); flex: none; }
.ph__on { font: 700 14px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--online-text); }
.ph__strip { display: grid; grid-template-columns: 1.6fr 1fr 1fr; border-top: 1px solid var(--line); background: var(--panel-head); }
.ph__strip--2 { grid-template-columns: 1.6fr 1fr; }
.ph__cell { min-width: 0; padding: 14px 24px 16px; border-left: 1px solid var(--line); }
.ph__cell:first-child { border-left: 0; }
.ph__k { display: block; margin-bottom: 4px; font: 700 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ph__v { font: 800 22px var(--font-ui); text-transform: uppercase; color: var(--text); font-variant-numeric: tabular-nums; }
.ph__v--gold { color: var(--plywood); }
.ph__v small { margin-left: 6px; font: 600 14px var(--font-body); text-transform: none; color: var(--text-3); }
.ph__bar { height: 8px; margin: 8px 0 6px; background: var(--bg); }
.ph__bar i { display: block; height: 100%; background: var(--green); }
.ph__hint { font-size: 13px; color: var(--text-3); }
.ph__cell--num { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.ph__cell--num .ph__k { margin: 0; }
.ph__cell--num .ph__v { font-size: 28px; line-height: 1.1; }
.ph__pos { font-size: 13px; color: var(--text-3); }
@media (max-width: 760px) {
  .ph__top { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; padding: 18px; }
  .ph__av { width: 72px; height: 72px; }
  .ph__vs { grid-column: 1 / -1; justify-self: start; }
  .ph__strip, .ph__strip--2 { grid-template-columns: 1fr 1fr; }
  .ph__cell--rank { grid-column: 1 / -1; }
  .ph__cell { padding: 12px 18px 14px; border-left: 0; border-top: 1px solid var(--line); }
  .ph__cell:first-child { border-top: 0; }
  .ph__strip .ph__cell:nth-child(3) { border-left: 1px solid var(--line); }
  .ph__v, .ph__cell--num .ph__v { font-size: 22px; }
}

/* ---------- Podsumowanie gracza po najechaniu na nick ---------- */
.pcard { position: absolute; z-index: 85; width: 300px; max-width: calc(100vw - 16px); background: var(--panel-head); border: 1px solid var(--line); border-top: 3px solid var(--plywood); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); pointer-events: none; font-size: 14px; color: var(--text-2); }
.pcard[hidden] { display: none; }
.pcard__note { margin: 0; padding: 14px 16px; color: var(--text-3); }
.pcard__top { display: flex; gap: 12px; align-items: center; padding: 14px 16px 10px; }
.pcard__av { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid var(--line); object-fit: cover; background: var(--bg); color: var(--muted); }
.pcard__av svg { width: 55%; height: 55%; }
.pcard__id { min-width: 0; display: grid; gap: 3px; }
.pcard__id strong { font: 700 18px var(--font-ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__id .bdg-mini { margin: 0; }
.pcard__seen { font-size: 13px; color: var(--text-3); }
.pcard__on { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--online-text); }
.pcard__k { display: block; font: 700 10px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.pcard__rank { margin: 0; padding: 8px 16px; border-top: 1px solid var(--line-soft); font: 800 17px var(--font-ui); text-transform: uppercase; color: var(--plywood); }
.pcard__nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); }
.pcard__nums > div { padding: 10px 16px; text-align: center; }
.pcard__nums > div + div { border-left: 1px solid var(--line-soft); }
.pcard__nums b { display: block; font: 800 18px var(--font-ui); color: var(--text); }
.pcard__nums small { font-size: 12px; color: var(--text-3); }
.pcard__foot { margin: 0; padding: 7px 16px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- Rankingi: szukanie gracza ---------- */
.rk-tools { justify-content: flex-start; }
.rk-tools .rk-title { margin-left: auto; }
.rk-find { position: relative; display: flex; align-items: center; flex: 0 1 260px; min-width: 180px; }
.rk-find svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.rk-find input { width: 100%; min-height: 42px; padding: 0 12px 0 36px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 0; font: 15px var(--font-body); }
.rk-find input:focus { outline: none; border-color: var(--plywood); }
.rk-find input::placeholder { color: var(--muted); }
@media (max-width: 900px) { .rk-find { flex: 1 1 100%; order: 5; } .rk-tools .rk-title { margin-left: 0; flex-basis: 100%; order: 6; } }

/* ---------- Czasy heli ---------- */
.heli-note { margin: 0 0 12px; }

/* ---------- Najlepsze czasy i poziomy eventów ---------- */
.time-pick { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 12px; }
.time-pick > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.time-pick__k { font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .12em; color: var(--plywood); }
.time-pick .seg button { min-height: 36px; }
.tier-break { display: block; margin-top: 2px; color: var(--text-3); font-size: 13px; }
.hof-heli th[scope="row"] { font-weight: 600; text-align: left; white-space: nowrap; }
.time-team { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.time-mates { color: var(--text-3); }
.time-mates a { color: var(--text-2); }
.time-mates a:hover { color: var(--rust-hover); }

/* ---------- Kronika serwera ---------- */
.feed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
/* Separator między kolumnami: pionowa linia w środku */
.feed:not(.feed--one) li:nth-child(odd) { padding-right: 20px; border-right: 1px solid var(--line-soft); }
.feed:not(.feed--one) li:nth-child(even) { padding-left: 20px; }
.feed li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.feed li:nth-child(-n+2) { border-top: 0; }
.feed--one { grid-template-columns: minmax(0, 1fr); }
.feed--one li:nth-child(2) { border-top: 1px solid var(--line-soft); }
.feed__ic { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg); color: var(--c, var(--plywood)); }
.feed__t { font-size: 15px; color: var(--text-2); line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.feed__t a { color: var(--text); font-weight: 600; text-decoration: none; }
.feed__t a:hover { text-decoration: underline; }
.feed__t b { color: var(--c, var(--plywood)); font-weight: 700; }
.feed__t small { color: var(--muted); font-size: 13px; }
.feed__when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.feed-day { margin-top: 26px; }
.feed-day__h { font-size: 18px; margin: 0 0 10px; text-transform: none; letter-spacing: 0; }
.feed-day__h::first-letter { text-transform: uppercase; }
.feed-day__h small { font: 600 12px var(--font-ui); color: var(--muted); margin-left: 6px; }
@media (max-width: 820px) {
  .feed { grid-template-columns: minmax(0, 1fr); }
  .feed li:nth-child(2) { border-top: 1px solid var(--line-soft); }
  .feed:not(.feed--one) li:nth-child(odd), .feed:not(.feed--one) li:nth-child(even) { padding-left: 0; padding-right: 0; border-right: 0; }
}
@media (max-width: 480px) {
  .feed li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .feed__ic { width: 32px; height: 32px; }
  .feed__when { grid-column: 2; margin-top: -4px; }
}

/* ---------- Rankingi: top 3 jako kafelki nad tabelą ---------- */
.podium.rk-top3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 10px; }
.rk-top3 .podium__i, .rk-top3 .podium__i--1 { grid-column: auto; }
.rk-top3 .podium__c { padding: 22px 12px 16px; }
.rk-top3 .podium__name a, .rk-top3__list a { color: var(--text); text-decoration: none; }
.rk-top3 .podium__name a:hover, .rk-top3__list a:hover { text-decoration: underline; }
.rk-top3__medal { font: 800 12px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--mc); }
.rk-top3__mem { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; max-width: 100%; }
.rk-top3__mem li { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; min-width: 0; }
.rk-top3__mem .podium__av { width: 60px; height: 60px; }
.rk-top3__nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px var(--font-ui); }
.rk-top3__nm a { color: var(--text); text-decoration: none; }
.rk-top3__nm a:hover { text-decoration: underline; }
.podium__av--more { display: grid; place-items: center; font: 800 18px var(--font-ui); color: var(--muted); background: var(--bg); }
@media (max-width: 1000px) { .podium.rk-top3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rk-top3 .podium__i { grid-column: auto; } }
@media (max-width: 600px) {
  .podium.rk-top3 { gap: 6px; }
  .rk-top3 .podium__i, .rk-top3 .podium__i--1 { grid-column: auto; }
  .rk-top3 .podium__c { padding: 26px 6px 12px; gap: 6px; }
  .rk-top3 .podium__av { width: 48px; height: 48px; }
  .rk-top3 .podium__name { font-size: 13px; }
  .rk-top3--team .podium__c { padding-top: 32px; }
  .rk-top3__mem { gap: 8px 6px; }
  .rk-top3__mem li { width: 44px; gap: 4px; }
  .rk-top3__mem .podium__av { width: 36px !important; height: 36px !important; }
  .rk-top3__nm { font-size: 11px; }
  .rk-top3 .podium__name { white-space: normal; overflow-wrap: anywhere; }
  .rk-top3 .podium__pts { font-size: 16px; }
  .rk-top3 .bdg-mini, .rk-top3__medal, .rk-top3 .podium__me { display: none; }
}

/* ---------- Profil: avatar powiększa się po najechaniu ---------- */
.ph__av-zoom { position: relative; z-index: 5; display: block; flex: none; outline: none; }
.ph__av-zoom .ph__av { position: relative; transform-origin: center; transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
@media (hover: hover) { .ph__av-zoom:hover .ph__av { transform: scale(1.7); } }
.ph__av-zoom:focus-visible .ph__av, .ph__av-zoom.is-zoom .ph__av { transform: scale(1.7); }
.ph__av-zoom:hover .ph__av, .ph__av-zoom:focus-visible .ph__av, .ph__av-zoom.is-zoom .ph__av { z-index: 6; border-color: var(--plywood); box-shadow: 0 12px 32px rgba(0, 0, 0, .6); }
@media (hover: hover) { .ph__av-zoom { cursor: zoom-in; } }
@media (prefers-reduced-motion: reduce) { .ph__av-zoom .ph__av { transition: none; } }

/* ---------- Profil: rozpiska punktów pod nagłówkiem ---------- */
.ph__why { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: none; border: 1px solid var(--line); color: var(--text-2); font: 600 12px var(--font-body); cursor: pointer; }
.ph__why:hover { color: var(--text); border-color: var(--plywood); }
.ph__why i { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.ph__why[aria-expanded="true"] i { transform: rotate(-135deg) translateY(-1px); }
.ph__ptsby { padding: 14px 24px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.ph__ptsby[hidden] { display: none; }
.ph__ptsby-h { margin: 0 0 8px; font: 700 14px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.ph__ptsby-h small { margin-left: 8px; font: 400 13px var(--font-body); text-transform: none; letter-spacing: 0; color: var(--muted); }
.ph__ptsby dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 28px; font-size: 13px; }
.ph__ptsby dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.ph__ptsby dt { color: var(--text-2); }
.ph__ptsby dd { margin: 0; color: var(--plywood); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) { .ph__ptsby { padding: 12px 16px; } }

/* ---------- Aktualności: jeden wpis = kafelek poziomy (obrazek z lewej, tekst z prawej) ---------- */
@media (min-width: 761px) {
  .news-grid--one { grid-template-columns: 1fr; }
  .news-grid--one .news-card.has-img { flex-direction: row; align-items: stretch; }
  .news-grid--one .news-card__img { flex: 0 0 44%; aspect-ratio: 16 / 9; }
  .news-grid--one .news-card__body { padding: 26px 30px; justify-content: center; gap: 10px; }
  .news-grid--one .news-card__title { font-size: 26px; }
  .news-grid--one .news-card__text { font-size: 16px; max-width: 60ch; }
  .news-grid--one .news-card__more { margin-top: 8px; }
}
@media (max-width: 760px) { .news-grid--one .news-card__img { aspect-ratio: 16 / 9; } }

/* Kronika na stronie głównej: od najnowszego w dół lewej kolumny, dalej prawa kolumna */
.feed.feed--cols { grid-auto-flow: column; }
.feed.feed--cols li:nth-child(n) { padding: 11px 0 11px 20px; border-right: 0; border-top: 1px solid var(--line-soft); }
.feed.feed--cols li.c1:nth-child(n) { padding: 11px 20px 11px 0; border-right: 1px solid var(--line-soft); }
.feed.feed--cols li.top:nth-child(n) { border-top: 0; }
@media (max-width: 820px) {
  .feed.feed--cols { grid-auto-flow: row; grid-template-rows: none !important; }
  .feed.feed--cols li:nth-child(n), .feed.feed--cols li.c1:nth-child(n), .feed.feed--cols li.top:nth-child(n) { padding: 11px 0; border-right: 0; border-top: 1px solid var(--line-soft); }
  .feed.feed--cols li:first-child:nth-child(n) { border-top: 0; }
}

/* ---------- Profil: postęp dzień po dniu ---------- */
.ph__trend { display: block; margin-top: 4px; font: 600 12px var(--font-body); color: var(--online-text); }
.ph__trend.dn { color: var(--rust-text); }
.stat-tile .tile-dl { display: block; margin-top: 8px; font: 600 13px var(--font-body); color: var(--online-text); text-transform: none; letter-spacing: 0; }
.stat-tile .tile-dl em { font-style: normal; font-weight: 400; color: var(--muted); }
.stat-tile .tile-dl.is-zero { color: var(--muted); font-weight: 400; }
.stat-tile .spk { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 6px; }
.stat-tile .spk i { flex: 1; min-width: 4px; background: #3a342d; border-radius: 2px 2px 0 0; }
.stat-tile .spk i.is-today { background: var(--plywood); }
.stat-tile .spk i.is-none { background: transparent; border-bottom: 1px dashed var(--line); border-radius: 0; }

/* ---------- Ruletka ---------- */
.rl-reel { position: relative; overflow: hidden; padding: 14px 0; margin-top: 18px; background: #12100E; }
.rl-reel::before, .rl-reel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; }
.rl-reel::before { left: 0; background: linear-gradient(90deg, #12100E, transparent); }
.rl-reel::after { right: 0; background: linear-gradient(-90deg, #12100E, transparent); }
.rl-track { display: flex; gap: 8px; padding: 0 8px; will-change: transform; }
.rl-mark { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px; background: #E8C15A; z-index: 3; box-shadow: 0 0 10px rgba(232, 193, 90, .7); }
.rl-mark::before, .rl-mark::after { content: ""; position: absolute; left: 50%; margin-left: -7px; border: 7px solid transparent; }
.rl-mark::before { top: -4px; border-top-color: #E8C15A; }
.rl-mark::after { bottom: -4px; border-bottom-color: #E8C15A; }
.rl-cell { flex: 0 0 132px; height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px 10px; background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border-bottom: 4px solid var(--tc); text-align: center; position: relative; }
.rl-cell::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%); pointer-events: none; }
.rl-cell img, .rl-cell .rl-noimg { width: 64px; height: 64px; object-fit: contain; position: relative; }
.rl-noimg { display: inline-grid; place-items: center; font: 700 28px var(--font-ui); color: var(--tc, var(--muted)); background: rgba(255, 255, 255, .04); }
.rl-cell__n { font: 600 13px/1.3 var(--font-ui); color: var(--text); position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rl-cell__a { font: 600 12px var(--font-ui); color: var(--text-3); position: relative; min-height: 14px; }
.rl-cell.is-win { outline: 2px solid var(--tc); outline-offset: -2px; animation: rl-pop .6s ease-out; }
@keyframes rl-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.rl-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin: 20px 0 6px; }
.rl-go { min-width: 220px; font-size: 18px; }
.rl-go:disabled { opacity: .55; cursor: not-allowed; }
.rl-info { color: var(--text-2); font: 15px var(--font-ui); }
.rl-info b { color: var(--text); }
.rl-err { text-align: center; color: var(--rust-text); }
.rl-win { display: flex; align-items: center; gap: 18px; max-width: 560px; margin: 14px auto 0; padding: 16px 20px; background: var(--panel); border-left: 4px solid var(--tc); box-shadow: 0 0 0 1px var(--line), 0 0 40px -10px var(--tc); }
.rl-win img, .rl-win .rl-noimg { width: 80px; height: 80px; flex: none; object-fit: contain; }
.rl-win .eyebrow { color: var(--tc); margin: 0; }
.rl-win h2 { margin: 2px 0 4px; font-size: 22px; }
.rl-win p { margin: 0; color: var(--text-2); }
.rl-h { font-size: 20px; margin: 34px 0 12px; }
.rl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.rl-list { list-style: none; margin: 0; padding: 0; }
.rl-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0 7px 10px; border-left: 3px solid var(--tc); margin-bottom: 6px; background: rgba(255, 255, 255, .02); }
.rl-list li img, .rl-list li .rl-noimg { width: 34px; height: 34px; object-fit: contain; flex: none; font-size: 16px; }
.rl-list li span { flex: 1; min-width: 0; color: var(--text-2); }
.rl-list li b { color: var(--text); }
.rl-list li time { color: var(--muted); font-size: 13px; padding-right: 10px; white-space: nowrap; }
.rl-claim { margin: 10px 0 0; }
.rl-pool { display: grid; gap: 14px; }
.rl-tier { background: var(--panel); border-top: 3px solid var(--tc); padding: 12px 14px 14px; }
.rl-tier h3 { margin: 0 0 10px; font-size: 17px; color: var(--tc); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rl-tier h3 small { color: var(--muted); font: 13px var(--font-body); }
.rl-tier__l { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-tier__l .rl-cell { flex-basis: 112px; height: 116px; }
.rl-tier__l .rl-cell img, .rl-tier__l .rl-cell .rl-noimg { width: 52px; height: 52px; }
@media (max-width: 760px) {
  .rl-cols { grid-template-columns: 1fr; }
  .rl-cell { flex-basis: 108px; height: 116px; }
  .rl-cell img, .rl-cell .rl-noimg { width: 52px; height: 52px; }
  .rl-reel::before, .rl-reel::after { width: 30px; }
  .rl-win { flex-direction: column; text-align: center; }
  .rl-tier__l .rl-cell { flex-basis: calc(33.33% - 6px); }
}

/* ---------- Wiki: obrazek z tekstem obok ---------- */
.md-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin: 20px 0; }
.md-media--third { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.md-media--right { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.md-media--right.md-media--third { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.md-media--right .md-img { order: 2; }
.md-media .md-img { margin: 0; }
.md-media__txt > :first-child { margin-top: 0; }
.md-media__txt > :last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .md-media, .md-media--third, .md-media--right, .md-media--right.md-media--third { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .md-media--right .md-img { order: 0; }
}

/* Wiki: obrazek wyróżniający pod tytułem artykułu */
.article__banner { margin: 4px 0 26px; border: 1px solid var(--line); background: var(--panel); aspect-ratio: 16 / 5; overflow: hidden; }
.article__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .article__banner { aspect-ratio: 16 / 7; margin-bottom: 20px; } }

/* ---------- Podsumowanie sezonu (wpis w aktualnościach) ---------- */
.ss { margin: 8px 0; }
.ss-sec { margin: 30px 0 0; }
.ss-champ { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 12px; align-items: end; }
.ss-champ__i { background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border: 1px solid var(--line); border-top: 3px solid var(--mc); padding: 18px 16px 16px; text-align: center; }
.ss-champ__i--1 { padding-top: 26px; box-shadow: 0 0 50px -18px #E8C15A; }
.ss-champ__pos { font: 800 13px var(--font-ui); letter-spacing: .14em; color: var(--mc); text-transform: uppercase; }
.ss-champ__av { width: 64px; height: 64px; margin: 10px auto 8px; display: grid; place-items: center; background: #2B2723; border: 2px solid var(--mc); font: 800 24px var(--font-ui); color: var(--mc); object-fit: cover; }
.ss-champ__i--1 .ss-champ__av { width: 84px; height: 84px; font-size: 32px; }
.ss-champ__n { font: 800 20px var(--font-ui); color: var(--text); overflow-wrap: anywhere; }
.ss-champ__n a { color: inherit; text-decoration: none; }
.ss-champ__i--1 .ss-champ__n { font-size: 26px; }
.ss-champ__p { color: var(--text-2); font: 600 15px var(--font-ui); margin-top: 2px; }
.ss-champ__badge { display: inline-block; margin-top: 10px; padding: 3px 10px; background: #E8C15A; color: #14110F; font: 800 12px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.ss-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ss-nums div { background: var(--bg-bar); border: 1px solid var(--line-soft); padding: 14px 14px 12px; }
.ss-nums b { display: block; font: 800 26px var(--font-ui); color: var(--text); }
.ss-nums span { color: var(--muted); font-size: 13px; }
.ss-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ss-cat { background: var(--bg-bar); border: 1px solid var(--line-soft); padding: 12px 14px; }
.ss-cat h3 { margin: 0 0 8px; font: 700 13px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--plywood); }
.ss-cat ol { list-style: none; margin: 0; padding: 0; }
.ss-cat li { display: flex; gap: 8px; padding: 3px 0; font-size: 14px; color: var(--text-2); }
.ss-cat li:first-child { color: var(--text); font-weight: 600; }
.ss-cat li i { font-style: normal; color: var(--muted); width: 18px; flex: none; }
.ss-cat li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-cat li a { color: inherit; text-decoration: none; }
.ss-cat li em { font-style: normal; margin-left: auto; font-family: var(--font-ui); white-space: nowrap; }
.ss-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ss-recs li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; background: var(--bg-bar); border: 1px solid var(--line-soft); border-left: 3px solid #E8C15A; padding: 10px 14px; color: var(--text-2); }
.ss-recs b { color: var(--text); }
.ss-t { font: 800 20px var(--font-mono); color: #E8C15A; }
.ss-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ss-fact { background: var(--bg-bar); border: 1px solid var(--line-soft); padding: 14px 16px; color: var(--text-2); }
.ss-fact b, .ss-fact strong { color: var(--text); }
.ss-fact small { display: block; font: 700 12px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-text); margin-bottom: 4px; }
.ss-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; }
@media (max-width: 760px) {
  .ss-champ { grid-template-columns: 1fr; } .ss-champ__i--1 { order: -1; }
  .ss-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ss-cats, .ss-facts { grid-template-columns: 1fr; }
  .ss-recs li { grid-template-columns: 1fr auto; } .ss-who { grid-column: 1 / -1; }
}

/* ---------- Profil: mój sezon w liczbach ---------- */
.ms { background: linear-gradient(160deg, #241f1a 0%, var(--panel) 55%); border: 1px solid var(--line); border-top: 3px solid #E8C15A; padding: 26px 28px 28px; position: relative; overflow: hidden; margin-bottom: 18px; }
.ms::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(232, 193, 90, .14), transparent 70%); pointer-events: none; }
.ms__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.ms__eb { font: 700 13px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #E8C15A; margin: 0; }
.ms h2 { font: 800 30px var(--font-ui); text-transform: uppercase; margin: 4px 0; }
.ms__sub { color: var(--muted); margin: 0; font-size: 14px; }
.ms__acts { display: flex; gap: 8px; align-items: center; }
.ms__acts select { background: var(--bg-bar); color: var(--text); border: 1px solid var(--line); padding: 6px 8px; font: 600 14px var(--font-ui); }
.ms-big { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0 10px; }
.ms-big div { background: rgba(0, 0, 0, .25); border: 1px solid var(--line-soft); padding: 16px 14px; }
.ms-big b { display: block; font: 800 34px/1 var(--font-ui); color: var(--text); }
.ms-big span { display: block; color: var(--text-3); font-size: 13px; margin-top: 6px; }
.ms-big em { font-style: normal; color: #E8C15A; font: 700 13px var(--font-ui); }
.ms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.ms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-tile { background: rgba(0, 0, 0, .25); border: 1px solid var(--line-soft); padding: 16px 18px; min-width: 0; }
.ms-tile h3 { margin: 0 0 8px; font: 700 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--rust-text); }
.ms-tile p { margin: 0; color: var(--text-2); }
.ms-tile b { color: var(--text); }
.ms-hl { font: 800 24px var(--font-ui); color: var(--text); display: block; margin-bottom: 4px; overflow-wrap: anywhere; }
.ms-hl a { color: inherit; text-decoration: none; }
.ms-mut { font-size: 13px; color: var(--muted) !important; }
.ms-bar { height: 8px; background: var(--bg); margin: 10px 0 6px; } .ms-bar i { display: block; height: 100%; background: #E8C15A; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-chips span { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; background: var(--bg-bar); border: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.ms-chips b { font: 800 14px var(--font-ui); color: var(--bg); background: #E8C15A; padding: 1px 6px; }
.ms-chips .p2 b { background: #C6CDD2; } .ms-chips .p3 b { background: #B08A5E; } .ms-chips .p4 b { background: var(--line); color: var(--text); }
.ms-rec { display: flex; align-items: center; gap: 14px; } .ms-t { font: 800 30px var(--font-mono); color: #E8C15A; }
.ms-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.ms-badges figure { margin: 0; width: 78px; text-align: center; } .ms-badges svg { width: 58px; height: 64px; }
.ms-badges figcaption { font-size: 12px; color: var(--text-3); line-height: 1.2; margin-top: 2px; }
.ms-days { display: flex; align-items: flex-end; gap: 4px; height: 70px; margin: 10px 0 4px; }
.ms-days i { flex: 1; background: var(--line); } .ms-days i.on { background: #E8C15A; }
.ms-days-l { display: flex; gap: 4px; font-size: 11px; color: var(--muted); } .ms-days-l span { flex: 1; text-align: center; }
.ms-days-l--ends { justify-content: space-between; } .ms-days-l--ends span { flex: none; }
.ms__end { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text-2); }
.hist-sum { display: block; margin-top: 4px; font: 700 13px var(--font-ui); color: #E8C15A; text-decoration: none; }
@media (max-width: 760px) {
  .ms { padding: 18px 16px; } .ms h2 { font-size: 24px; }
  .ms-big { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-big b { font-size: 28px; }
  .ms-grid, .ms-grid--3 { grid-template-columns: 1fr; }
}

/* Profil: „Podsumowanie sezonu” po prawej stronie zakładek, „Porównaj” w nagłówku */
.prof-tab--season { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--text); background: var(--panel-hi); }
.prof-tab--season.on { box-shadow: inset 0 -3px 0 #E8C15A; }
@media (hover: hover) { .prof-tab--season:hover { background: #38322C; } }
.prof-tab__s { display: inline-grid; place-items: center; height: 22px; padding: 0 6px; background: #E8C15A; color: #14110F; font: 800 11px var(--font-ui); letter-spacing: .06em; }
.ph__vs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ph__cmp { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 600px) { .prof-tab--season { margin-left: 0; flex: 0 0 auto; } .ph__vs { justify-content: flex-start; } }
.cmp-dlg__l .is-me a { background: rgba(184, 56, 31, .14); }
.cmp-dlg__l .is-me a:hover, .cmp-dlg__l .is-me a:focus-visible { background: rgba(184, 56, 31, .24); }
.cmp-dlg__ty { color: var(--muted); font-size: 13px; font-weight: 400; }

/* ---------- Porównanie graczy (nowy układ) ---------- */

.cv{--ca:var(--cmp-a,#E8A33A);--cb:var(--cmp-b,#4B8FE8)}
.cv .eyebrow{margin:0 0 14px}
.cv-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);gap:0;background:var(--panel);border:1px solid var(--line)}
.cv-p{padding:22px 24px;display:flex;gap:16px;align-items:center;position:relative}
.cv-p--a{border-top:3px solid var(--ca)}.cv-p--b{border-top:3px solid var(--cb);flex-direction:row-reverse;text-align:right}
.cv-av{width:84px;height:84px;flex:none;display:grid;place-items:center;background:#2B2723;border:2px solid var(--pc);font:800 34px var(--font-ui);color:var(--pc)}
.cv-p--a{--pc:var(--ca)}.cv-p--b{--pc:var(--cb)}
.cv-p h2{margin:0;font:800 30px var(--font-ui);text-transform:uppercase;overflow-wrap:anywhere}
.cv-p h2 a{color:inherit;text-decoration:none}
.cv-rank{color:var(--plywood);font:700 14px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;margin:2px 0 6px}
.cv-meta{color:var(--muted);font-size:14px}
.cv-feat{display:flex;gap:4px;margin-top:6px}.cv-p--b .cv-feat{justify-content:flex-end}
.cv-mid{border-top:3px solid var(--line);background:linear-gradient(180deg,#221e1a,var(--panel));padding:18px 18px 16px;text-align:center;border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
.cv-mid small{display:block;font:700 12px var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cv-score{font:800 54px/1.05 var(--font-ui);margin:4px 0 2px;display:flex;justify-content:center;align-items:baseline;gap:12px}
.cv-score .a{color:var(--ca)}.cv-score .b{color:var(--cb)}.cv-score i{font-style:normal;color:var(--muted);font-size:34px}
.cv-lead{font:700 14px var(--font-ui);color:var(--text);text-transform:uppercase;letter-spacing:.06em}
.cv-split{display:flex;height:8px;margin:10px 0 4px;background:var(--bg)}.cv-split span{display:block}
.cv-ties{color:var(--muted);font-size:13px}
.cv-seg{margin-top:12px;justify-content:center}
.cv h3.cv-h{font:800 22px var(--font-ui);text-transform:uppercase;display:flex;align-items:center;gap:12px;margin:30px 0 12px}
.cv h3.cv-h::before{content:"";width:10px;height:10px;background:var(--rust)}
.cv-key{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cv-k{background:var(--panel);border:1px solid var(--line);padding:14px 16px}
.cv-k h4{margin:0 0 10px;text-align:center;font:700 12px var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cv-k__v{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cv-k__v b{font:800 26px var(--font-ui)}.cv-k__v b.w{color:var(--text)}.cv-k__v b.l{color:var(--muted);font-size:20px}
.cv-k__v .a.w{color:var(--ca)}.cv-k__v .b.w{color:var(--cb)}
.cv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.cv-g{background:var(--panel);border:1px solid var(--line)}
.cv-g__h{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;background:var(--panel-head);border-bottom:1px solid var(--line)}
.cv-g__h b{font:800 16px var(--font-ui);text-transform:uppercase;letter-spacing:.04em}
.cv-g__s{font:800 15px var(--font-ui)}.cv-g__s .a{color:var(--ca)}.cv-g__s .b{color:var(--cb)}.cv-g__s i{font-style:normal;color:var(--muted);margin:0 4px}
.cv-rows{padding:6px 16px 10px}
.cv-r{display:grid;grid-template-columns:76px minmax(0,1fr) 76px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.cv-r:last-child{border-bottom:0}
.cv-r__v{font:700 15px var(--font-ui);color:var(--muted);white-space:nowrap}.cv-r__v.b{text-align:right}
.cv-r__v.w{color:var(--text)}.cv-r__v.a.w::before{content:"▲ ";color:var(--ca);font-size:11px}.cv-r__v.b.w::after{content:" ▲";color:var(--cb);font-size:11px}
.cv-r__m small{display:block;text-align:center;font-size:13px;color:var(--text-3);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-bar{display:grid;grid-template-columns:1fr 1fr;gap:2px;height:7px}
.cv-bar span{background:var(--bg);position:relative;overflow:hidden}.cv-bar span i{position:absolute;top:0;bottom:0}
.cv-bar span:first-child i{right:0;background:var(--ca)}.cv-bar span:last-child i{left:0;background:var(--cb)}
.cv-zero{padding:6px 16px 12px;color:var(--muted);font-size:13px}.cv-zero u{color:var(--text-3);cursor:pointer}
.cv-times{background:var(--panel);border:1px solid var(--line)}
.cv-t{display:grid;grid-template-columns:110px minmax(0,1fr) 110px;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line-soft)}
.cv-t:last-child{border-bottom:0}
.cv-t__v{font:800 18px var(--font-mono);color:var(--muted)}.cv-t__v.b{text-align:right}.cv-t__v.w.a{color:var(--ca)}.cv-t__v.w.b{color:var(--cb)}
.cv-t__l{text-align:center;color:var(--text-2)}.cv-t__l b{color:var(--text)}
.cv-bdg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cv-bdg>div{background:var(--panel);border:1px solid var(--line);padding:14px 16px}
.cv-bdg h4{margin:0 0 8px;font:800 15px var(--font-ui);text-transform:uppercase}.cv-bdg .a h4{color:var(--ca)}.cv-bdg .b h4{color:var(--cb)}
.cv-bdg .l{display:flex;flex-wrap:wrap;gap:4px}.cv-bdg svg{width:38px;height:42px}
.cv-note{margin-top:22px;color:var(--muted);font-size:13px}
@media (max-width:860px){.cv-hero{grid-template-columns:1fr 1fr}.cv-mid{grid-column:1/-1;order:3;border-left:0;border-right:0}.cv-p{flex-direction:column;align-items:flex-start;padding:16px}.cv-p--b{flex-direction:column;align-items:flex-end}.cv-av{width:56px;height:56px;font-size:24px}.cv-p h2{font-size:20px}.cv-key{grid-template-columns:repeat(2,minmax(0,1fr))}.cv-grid,.cv-bdg{grid-template-columns:1fr}.cv-r{grid-template-columns:64px minmax(0,1fr) 64px}.cv-t{grid-template-columns:84px 1fr 84px}.cv-t__v{font-size:15px}}

.cv-av{object-fit:cover}
.cv-p__id{min-width:0}
.cv-more{all:unset;cursor:pointer;color:var(--text-3);text-decoration:underline}.cv-more:hover{color:var(--text)}.cv-more:focus-visible{outline:2px solid var(--plywood)}
.cv-t__l small{color:var(--muted);font-size:13px}
.cv-bd svg{width:38px;height:42px}
.cv-r__v{font-variant-numeric:tabular-nums}
.cv-k__v b { white-space: nowrap; }
@media (max-width: 860px) { .cv-k { padding: 12px; } .cv-k__v { flex-wrap: wrap; } .cv-k__v b { font-size: 19px; } .cv-k h4 { font-size: 11px; } }
.cv-grid--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.cv-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cv-zero { padding-top: 2px; }
@media (max-width: 860px) { .cv-grid--cols { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .cv-grid--cols { display: flex; flex-direction: column; align-items: stretch; } .cv-col { display: contents; } }
.cv-rows { padding-bottom: 4px; } .cv-zero { margin: 0; padding: 4px 16px 12px; }

/* ---------- Zgłoszenia poprawek do wiki ---------- */
.rp-dim { position: fixed; inset: 0; background: rgba(8, 7, 6, .82); z-index: 95; display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.rp-dim[hidden] { display: none; }
.rp { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--line); border-top: 3px solid #E8C15A; }
.rp__h { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--panel-head); border-bottom: 1px solid var(--line); font: 800 15px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.rp__h .rp__x { all: unset; cursor: pointer; font-size: 26px; line-height: 1; color: var(--muted); } .rp__h .rp__x:hover { color: var(--text); }
.rp__b { padding: 16px 18px 18px; display: grid; gap: 14px; }
.rp__b > p { margin: 0; color: var(--text-2); }
.rp__where { background: var(--bg-bar); border: 1px solid var(--line-soft); padding: 10px 12px; font-size: 14px; color: var(--text-2); }
.rp__where b { color: var(--text); }
.rp label > span, .rp legend { display: block; font: 700 12px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; padding: 0; }
.rp select, .rp textarea { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 9px 11px; font: 15px var(--font-body); }
.rp textarea { min-height: 96px; resize: vertical; } .rp textarea.rp__short { min-height: 60px; }
.rp select:focus, .rp textarea:focus { outline: 2px solid var(--plywood); outline-offset: 0; }
.rp__kinds { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rp__kinds legend { width: 100%; }
.rp__kinds label { cursor: pointer; }
.rp__kinds input { position: absolute; opacity: 0; pointer-events: none; }
.rp__kinds label span { display: inline-block; margin: 0; padding: 7px 11px; border: 1px solid var(--line); font: 600 14px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.rp__kinds input:checked + span { border-color: #E8C15A; color: #14110F; background: #E8C15A; }
.rp__kinds input:focus-visible + span { outline: 2px solid var(--plywood); }
.rp__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp__foot small { color: var(--muted); font-size: 13px; flex: 1 1 100%; }
.rp__foot .rp__acts { margin-left: auto; }
.rp__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rp__err { margin: 0; color: var(--rust-text); }
.rp-ok { margin: 0; background: rgba(127, 163, 63, .12); border: 1px solid #4F6B27; color: #C9E0A2; padding: 12px 14px; }
.myrep { list-style: none; margin: 0; padding: 0; }
.myrep li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); color: var(--text-2); }
.myrep li { padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--line-soft); border-left-width: 3px; background: var(--bg-bar); }
.myrep li:last-child { margin-bottom: 0; }
.myrep__r { display: flex; align-items: flex-start; gap: 8px; }
.myrep__x { all: unset; cursor: pointer; width: 26px; height: 22px; display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--muted); border: 1px solid var(--line); }
.myrep__x:hover { color: var(--text); border-color: var(--text-3); }
.myrep__x:focus-visible { outline: 2px solid var(--plywood); }
.myrep li.myrep--done { background: rgba(79, 107, 39, .22); border-color: #4F6B27; }
.myrep li.myrep--rejected { background: rgba(184, 56, 31, .14); border-color: #7a3524; }
.myrep b { color: var(--text); } .myrep a { text-decoration: none; }
.myrep small { display: block; color: var(--muted); margin-top: 2px; }
.st { font: 700 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; align-self: start; white-space: nowrap; }
.st--new { background: #2B2723; color: var(--text-2); } .st--ok { background: #4F6B27; color: #EEF3E2; } .st--no { background: #4a2a22; color: #F0B4A4; }

/* Sekretne odznaki (profil, zakładka Odznaki) */
.sbdg-box { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.sbdg-h { margin: 0 0 6px; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .04em; font-size: 17px; }
.sbdg-h small { margin-left: 6px; font-size: 13px; color: #A98BE0; letter-spacing: .02em; }
.sbdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 20px 10px; }
.sbdg { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 8px 4px 10px; cursor: help; font-family: var(--font-ui); border: 1px solid transparent; }
.sbdg:focus-visible { outline: 2px solid var(--plywood); outline-offset: 2px; }
@media (hover: hover) { .sbdg:hover { background: var(--panel-hi); } .sbdg:hover .sbdg__w { transform: translateY(-2px); } }
.sbdg__w { width: 88px; height: 99px; transition: transform .15s; }
.sbdg:not(.is-got) .sbdg__w { opacity: .75; }
.sbdg__name { font-weight: 700; font-size: 13px; line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sbdg.is-got .sbdg__name { color: #C9B6F0; }

/* Treść dla wyszukiwarek bez JavaScriptu: graczom ukryta (klasa "js" z early.js), site.js usuwa ją po starcie */
.js #ssr { display: none; }
.ssr { padding-top: 32px; padding-bottom: 48px; }
.ssr img { max-width: 100%; height: auto; }

/* Przycisk „link do sekcji” pokazuje się po najechaniu myszką; na ekranach dotykowych go nie ma (wychodził poza ekran przy długich nagłówkach) */
@media (hover: none), (max-width: 700px) { .sec-link { display: none; } }

/* ---------- Klany (klany z gry: ranking, strona klanu, znaczek przy nicku) ---------- */
.clg { --c: #9A9089; position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; overflow: hidden; background: color-mix(in srgb, var(--c) 22%, #14110F); border: 2px solid var(--c); color: var(--c); font: 800 17px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .02em; }
.clg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clg--xs { width: 18px; height: 18px; font-size: 8px; border-width: 1px; }
.clg--sm { width: 30px; height: 30px; font-size: 12px; border-width: 1px; }
.clg--lg { width: 64px; height: 64px; font-size: 25px; }
.clg--xl { width: 120px; height: 120px; font-size: 50px; border-width: 3px; }
.cl-tag { display: inline-flex; vertical-align: -3px; margin-left: 6px; text-decoration: none; }
.cl-tag:hover .clg, .cl-tag:focus-visible .clg { outline: 1px solid var(--text); }
.podium__name .cl-tag { vertical-align: -2px; }
.cl-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 700 13px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.cl-chip:hover, .cl-chip:focus-visible { border-color: var(--plywood); }
.ph__name .cl-chip { align-self: center; }

.cl-tools { justify-content: space-between; gap: 8px; }
.cl-pod { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cl-p { --mc: var(--line); position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--mc); }
.cl-p--1 { --mc: #E8C15A; } .cl-p--2 { --mc: #CFC6BC; } .cl-p--3 { --mc: #C98A5A; }
.cl-p.is-me { background: linear-gradient(180deg, rgba(184, 56, 31, .16), var(--panel) 70%); }
.cl-p__n { position: absolute; left: 12px; top: 10px; font: 800 15px var(--font-ui); color: var(--mc); }
.cl-p h3 { margin: 6px 0 0; font: 800 21px/1.15 var(--font-ui); text-transform: uppercase; overflow-wrap: anywhere; }
.cl-p h3 a { color: inherit; text-decoration: none; }
.cl-p h3 a:hover { text-decoration: underline; }
.cl-p__m { color: var(--muted); font-size: 13px; }
.cl-p__v { font: 800 26px var(--font-ui); color: var(--plywood); }
.cl-p__v small { margin-left: 3px; font-size: 14px; }
.cl-p__g { color: var(--muted); font-size: 12px; }
.cl-stack { display: flex; }
.cl-stack .rk-av { margin: 0 0 0 -6px; border: 2px solid var(--panel); box-sizing: content-box; }
.cl-stack .rk-av:first-child { margin-left: 0; }
.cl-stack__more { display: grid; place-items: center; min-width: 26px; height: 26px; margin-left: -6px; padding: 0 3px; border: 2px solid var(--panel); background: #3a332c; color: var(--text-3); font: 700 10px var(--font-ui); font-style: normal; }
.cl-t .rk-who { gap: 12px; }
.cl-t .rk-who > a { font: 700 16px var(--font-ui); text-transform: uppercase; letter-spacing: .02em; }
.cl-note { margin-top: 12px; }

.cl-h { --c: #9A9089; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px; background: linear-gradient(100deg, color-mix(in srgb, var(--c) 26%, var(--panel)) 0, var(--panel) 62%); border: 1px solid var(--line); border-top: 4px solid var(--c); }
.cl-h h1 { margin: 0; font: 800 46px/1 var(--font-ui); text-transform: uppercase; overflow-wrap: anywhere; }
.cl-h__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; color: var(--text-3); font-size: 14px; }
.cl-h__meta a { color: var(--text); }
.cl-h__motd { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--c); background: rgba(0, 0, 0, .25); color: var(--text-2, #d8d0c8); font-style: italic; overflow-wrap: anywhere; }
.cl-h__mine { display: inline-block; margin: 12px 0 0; padding: 2px 8px; border: 1px solid var(--rust); color: var(--text); font: 700 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.cl-h__place { padding: 14px 20px; text-align: center; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.cl-h__place b { display: block; margin: 4px 0; font: 800 44px/1 var(--font-ui); color: #E8C15A; }
.cl-h__place small { display: block; font: 700 12px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0 0; }
.cl-tile { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); }
.cl-tile b { display: block; font: 800 28px var(--font-ui); white-space: nowrap; }
.cl-tile span { display: block; color: var(--muted); font-size: 13px; }
.cl-tile em { display: block; margin-top: 4px; color: var(--plywood); font: 700 12px var(--font-ui); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.cl-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.cl-role { padding: 2px 6px; border: 1px solid var(--line); color: var(--text-3); font: 700 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cl-role--l { color: #14110F; background: #E8C15A; border-color: #E8C15A; }
.cl-role--o { color: #E8C15A; border-color: #E8C15A; }
.cl-pct { min-width: 120px; font-variant-numeric: tabular-nums; }
.cl-bar { display: block; height: 6px; margin-top: 5px; background: var(--bg); }
.cl-bar i { display: block; height: 100%; background: var(--c, #D9534F); }
.cl-old td { color: var(--muted); }
.cl-box { background: var(--panel); border: 1px solid var(--line); }
.cl-box + .cl-box { margin-top: 10px; }
.cl-box h3 { margin: 0; padding: 11px 16px; background: var(--panel-head); border-bottom: 1px solid var(--line); font: 800 15px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
.cl-box ul { list-style: none; margin: 0; padding: 6px 16px 10px; }
.cl-box li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.cl-box li:last-child { border: 0; }
.cl-box li b { color: var(--plywood); font: 700 15px var(--font-ui); white-space: nowrap; }
.cl-hist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cl-hist div { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); }
.cl-hist b { display: block; margin: 2px 0; font: 800 26px var(--font-ui); color: #E8C15A; }
.cl-hist small { display: block; color: var(--muted); font-size: 13px; }
.cl-hist__s { display: block; color: var(--text-3); font: 700 12px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 820px) {
  .cl-pod { grid-template-columns: 1fr; }
  .cl-tiles, .cl-hist { grid-template-columns: 1fr 1fr; }
  .cl-cols { grid-template-columns: 1fr; }
  .cl-h { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 18px; }
  .cl-h .clg--xl { width: 72px; height: 72px; font-size: 30px; }
  .cl-h h1 { font-size: 30px; }
  .cl-h__place { grid-column: 1 / -1; justify-self: start; display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; }
  .cl-h__place b { font-size: 28px; margin: 0; }
  .cl-t .hm { display: none; }
  .cl-tile b { font-size: 22px; }
}

.rk-desc { margin: -6px 0 12px; color: var(--muted); font-size: 14px; }

/* Najlepsze czasy: wybór rodzaju, poziomu (z rekordem serwera) i drużyny */
.tp { margin: 0 0 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); }
.tp-kind { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.tp-kind button { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg); border: 1px solid var(--line); color: var(--text-3); cursor: pointer; text-align: left; }
.tp-kind button svg { flex: none; width: 28px; height: 28px; }
.tp-kind b { display: block; font: 800 17px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
.tp-kind small { display: block; color: var(--muted); font-size: 12px; }
.tp-kind button:hover { color: var(--text); }
.tp-kind .on { color: var(--text); background: var(--panel-head); border-color: var(--rust); box-shadow: inset 0 -3px 0 var(--rust); }
.tp-k { margin: 0 0 6px; color: var(--muted); font: 700 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.tp-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; margin: 0 0 12px; }
.tp-tiers button { --tc: #9A9089; padding: 8px 6px 9px; background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--tc); color: var(--text); text-align: center; cursor: pointer; }
.tp-tiers span { display: block; color: var(--tc); font: 700 12px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.tp-tiers b { display: block; margin-top: 2px; color: var(--plywood); font: 800 18px var(--font-ui); font-variant-numeric: tabular-nums; }
.tp-tiers small { display: block; overflow: hidden; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.tp-tiers button:hover { background: var(--panel-hi, #221e1a); }
.tp-tiers .on { background: color-mix(in srgb, var(--tc) 16%, var(--panel)); border-color: var(--tc); box-shadow: inset 0 0 0 1px var(--tc); }
.tp-team { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tp-team .tp-k { margin: 0 6px 0 0; }
.tp-team .seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.tp-team .seg svg { width: 16px; height: 16px; }
.tp-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 0 0 10px; }
.tp-sum h3 { margin: 0; font: 800 20px var(--font-ui); text-transform: uppercase; }
.tp-sum h3 em { font-style: normal; }
.tp-sum .note { margin: 0; }
@media (max-width: 640px) { .tp { padding: 10px; } .tp-kind button { min-width: 0; gap: 8px; padding: 8px 10px; } .tp-kind button { justify-content: center; } .tp-kind button svg { display: none; } .tp-kind small { display: none; } .tp-kind b { font-size: 14px; letter-spacing: .02em; } .tp-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Strona główna: najlepsze klany */
.podium--clans .clg--lg { width: 72px; height: 72px; font-size: 28px; }
.podium__sub { color: var(--muted); font-size: 13px; }

/* Kronika gracza na profilu: niskie kafelki (akcja i czas, cel, z kim) */
.pf { margin: 18px 0 6px; }
.pf__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.pf__head .prof-group { margin: 0; }
.pf__head .note { margin: 0; }
.pf__nav { margin-left: auto; display: flex; gap: 4px; }
.pf__nav .ib { width: 32px; height: 32px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font: 700 18px var(--font-ui); cursor: pointer; }
.pf__nav .ib:hover { border-color: var(--plywood); }
.pf__wrap { position: relative; }
.pf__wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 10px; width: 40px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg)); }
.pf__list { list-style: none; margin: 0; padding: 0 0 10px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.pf__i { flex: 0 0 240px; display: flex; flex-direction: column; gap: 3px; padding: 8px 12px 9px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.pf__top { display: flex; align-items: center; gap: 8px; }
.pf__ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; background: color-mix(in srgb, var(--c) 18%, var(--bg)); border: 1px solid var(--c); color: var(--c); }
.pf__ic svg { width: 14px; height: 14px; }
.pf__act { flex: 1; min-width: 0; overflow: hidden; color: var(--text-3); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.pf__when { flex: none; color: var(--muted); font-size: 12px; }
.pf__obj { color: var(--text); font: 700 15px/1.3 var(--font-ui); }
.pf__obj b { color: var(--c); font-weight: 800; }
.pf__with { color: var(--muted); font-size: 12px; line-height: 1.35; }
@media (max-width: 640px) { .pf__i { flex-basis: 210px; } .pf__nav { display: none; } }

/* Porównanie klanów */
.ccv-p .clg{flex:none}
.cv-h small{font:600 13px var(--font-ui);color:var(--muted);text-transform:none;margin-left:6px}
.ccv-h{display:grid;gap:6px}
.ccv-h__r{display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;gap:12px;padding:10px 16px;background:var(--panel);border:1px solid var(--line-soft)}
.ccv-h__s{text-align:center;font:800 14px var(--font-ui);text-transform:uppercase;color:var(--muted)}.ccv-h__s small{display:block;font-weight:600;text-transform:none;color:var(--accent,#E8A33A)}
.ccv-h__v{display:flex;align-items:baseline;gap:10px}.ccv-h__v.b{flex-direction:row-reverse}
.ccv-h__v b{font:800 22px var(--font-mono);color:var(--muted)}.ccv-h__v small{color:var(--muted)}
.ccv-h__v.a.w b{color:var(--ca)}.ccv-h__v.b.w b{color:var(--cb)}
.cmp-dlg--clan .cmp-dlg__l a{grid-template-columns:32px minmax(0,1fr) auto}
@media (max-width:860px){.ccv-h__r{grid-template-columns:1fr 92px 1fr;padding:8px 10px}.ccv-h__v{flex-direction:column;gap:0}.ccv-h__v.b{flex-direction:column;align-items:flex-end}.ccv-h__v b{font-size:18px}}
.cmp-again .btn{white-space:normal;max-width:100%;text-align:left}

/* Pierwsze kroki */
.pk-top{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.pk-steps{counter-reset:pk;display:grid;gap:12px}
.pk-s{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:0;background:var(--panel);border:1px solid var(--line)}
.pk-s__n{display:grid;place-items:start center;padding-top:18px;background:var(--panel-head);border-right:1px solid var(--line);font:800 26px var(--font-ui);color:var(--plywood)}
.pk-s__b{padding:16px 20px}
.pk-s h2{margin:0 0 4px;font:800 20px var(--font-ui);text-transform:uppercase;letter-spacing:.02em}
.pk-s__t p,.pk-s p{margin:0 0 10px;color:var(--text-2);line-height:1.55}
.pk-s__t p:last-child{margin-bottom:0}
.pk-s__t ul{margin:0 0 10px;padding-left:18px;color:var(--text-2);line-height:1.6}
.pk-cmd{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;background:#0E0D0C;border:1px solid var(--line);font:600 14px var(--font-mono);color:var(--plywood);margin:2px 4px 2px 0}
.pk-more{font:700 13px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--rust-text)}
.pk-warn{border-left:3px solid var(--rust);background:color-mix(in srgb,var(--rust) 10%,var(--panel));padding:10px 14px;color:var(--text);margin:10px 0}
.pk-side{position:sticky;top:90px;display:grid;gap:12px}
.pk-card{background:var(--panel);border:1px solid var(--line)}
.pk-card h2{margin:0;padding:12px 16px;background:var(--panel-head);border-bottom:1px solid var(--line);font:800 14px var(--font-ui);text-transform:uppercase;letter-spacing:.08em}
.pk-card__b{padding:14px 16px}
.pk-ip{display:flex;gap:8px}.pk-ip code{flex:1;padding:10px 12px;background:#0E0D0C;border:1px solid var(--line);font:600 14px var(--font-mono);color:var(--plywood);overflow-wrap:anywhere}
.pk-ip button{padding:0 14px;background:var(--rust);color:var(--on-rust);border:0;font:800 13px var(--font-ui);text-transform:uppercase;letter-spacing:.06em}
.pk-sm{font-size:13px;color:var(--muted);margin:8px 0 0}
.pk-cheat{display:grid;gap:0}.pk-cheat div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--text-2)}.pk-cheat div:last-child{border:0}
.pk-cheat b{font:600 14px var(--font-mono);color:var(--plywood)}
.pk-links a{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-soft);color:var(--text);text-decoration:none;font:700 15px var(--font-ui);text-transform:uppercase;letter-spacing:.03em}.pk-links a:last-child{border:0}.pk-links a span{color:var(--rust-text)}
.pk-h2{margin:36px 0 6px;font:800 26px var(--font-ui);text-transform:uppercase}
.pk-tl{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:0;margin-top:14px;border:1px solid var(--line);background:var(--panel)}
.pk-tl div{padding:14px 12px;border-right:1px solid var(--line);position:relative}.pk-tl div:last-child{border:0}
.pk-tl div::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c)}
.pk-tl small{display:block;font:700 12px var(--font-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pk-tl b{display:block;margin:4px 0 2px;font:800 18px var(--font-ui);text-transform:uppercase;color:var(--c)}
.pk-tl span{font-size:13px;color:var(--text-3)}
.pk-ev{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.pk-ev>a,.pk-ev>div{display:block;padding:16px;background:var(--panel);border:1px solid var(--line);color:var(--text);text-decoration:none}
.pk-ev b{display:block;font:800 17px var(--font-ui);text-transform:uppercase;margin-bottom:4px}.pk-ev span{font-size:14px;color:var(--text-3);line-height:1.45}
.pk-ev em{display:table;margin-top:8px;font:700 11px var(--font-ui);font-style:normal;text-transform:uppercase;letter-spacing:.08em;padding:2px 6px;border:1px solid currentColor}
@media (max-width:960px){.pk-top{grid-template-columns:1fr}.pk-side{position:static;order:-1}.pk-tl{grid-template-columns:1fr}.pk-tl div{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:110px 1fr;gap:4px 10px;align-items:baseline}.pk-tl div::before{right:auto;bottom:0;width:3px;height:auto}.pk-tl b{margin:0;font-size:16px}.pk-tl span{grid-column:2}.pk-ev{grid-template-columns:1fr 1fr}.pk-s{grid-template-columns:44px minmax(0,1fr)}.pk-s__b{padding:14px}}
@media (max-width:520px){.pk-ev{grid-template-columns:1fr}}
.pk-s__t{color:var(--text-2);line-height:1.55}.pk-s__t>*:first-child{margin-top:0}
.pk-s__t button.cp{margin:0 2px}
.pk-s .pk-links-row{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0}
.pk-more{text-decoration:none}.pk-more:hover{text-decoration:underline}
.pk-s .pk-warn{margin:12px 0 0;color:var(--text)!important}
.pk-ip button{cursor:copy}
.pk-cheat button.cp{justify-self:start}
.pk-src{margin:8px 0 0}
.pk-ev>a:hover{border-color:var(--plywood)}
.pk .more-link{margin-top:28px}
.wiki-nav__start{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;padding:12px 14px;background:color-mix(in srgb,var(--rust) 16%,var(--panel));border:1px solid var(--rust);color:var(--text);text-decoration:none;font:800 13px var(--font-ui);text-transform:uppercase;letter-spacing:.08em}
.wiki-nav__start small{color:var(--rust-text);font-size:16px}
.wiki-nav__start:hover{border-color:var(--rust-hover)}
.wiki-start{display:flex;align-items:center;gap:16px;margin:0 0 8px;padding:18px 20px;background:color-mix(in srgb,var(--rust) 12%,var(--panel));border:1px solid var(--rust);color:var(--text-2);text-decoration:none}
.wiki-start span{flex:1}.wiki-start small{display:block;font:700 12px var(--font-ui);text-transform:uppercase;letter-spacing:.1em;color:var(--rust-text)}
.wiki-start b{display:block;margin:2px 0 4px;font:800 22px var(--font-ui);text-transform:uppercase;color:var(--text)}
.wiki-start i{font-style:normal;font:800 28px var(--font-ui);color:var(--rust-text)}.wiki-start:hover{border-color:var(--rust-hover)}

/* Profil właściciela serwera */
.ph--owner { --own: #E8B84A; border-color: color-mix(in srgb, var(--own) 55%, var(--line)); border-top: 3px solid var(--own); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--own) 13%, transparent) 0%, transparent 55%), var(--panel); }
.ph--owner .ph__av { border-color: var(--own); box-shadow: 0 0 0 3px color-mix(in srgb, var(--own) 22%, transparent); }
.ph--owner .ph__strip { border-top-color: color-mix(in srgb, var(--own) 35%, var(--line)); }
.ph__owner { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; background: color-mix(in srgb, var(--own) 16%, transparent); border: 1px solid color-mix(in srgb, var(--own) 60%, transparent); color: var(--own); }
.ph__owner svg { flex: none; }
.ph--owner .ph__eb { margin-bottom: 8px; }

/* ---- Nawigacja: półprzezroczysty pasek, aktywna podstrona jako „deseczka” ze sklejki ---- */
.hazard, .hazard--panel { display: none; }
.site-header { background: rgba(20, 18, 16, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201, 165, 122, .18); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--bg-bar); } }
.nav__link { border-radius: 2px; }
.nav__link[aria-current="page"], .nav__link[aria-current="page"]:hover { color: #1A1410; background: var(--plywood); }
.site-footer { border-top: 1px solid rgba(201, 165, 122, .18); }
@media (max-width: 1120px) {
  .nav { background: var(--bg-bar); border-bottom: 1px solid rgba(201, 165, 122, .18); box-shadow: 0 16px 30px rgba(0, 0, 0, .45); }
  .nav__link[aria-current="page"] { padding-left: 12px; border-bottom-color: transparent; }
}

/* Znaczek klanu przy nicku na podium: na środku wysokości nicku */
.podium__name:has(.cl-tag) { display: flex; justify-content: center; align-items: center; gap: 6px; }
.podium__name:has(.cl-tag) > :not(.cl-tag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__name .cl-tag { flex: none; margin-left: 0; vertical-align: middle; }

/* Podsumowanie sezonu: styl gry, procenty, momenty, grafika do pobrania */
.ms-style { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 8px; padding: 6px 12px; background: var(--rust); color: var(--on-rust); font: 800 15px var(--font-ui); letter-spacing: .05em; text-transform: uppercase; }
.ms-style svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ms-big em.ms-pc { display: block; color: var(--online-text); font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.ms-tile--full { grid-column: 1 / -1; }
.ms-pct { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.ms-pct li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 104px; gap: 10px; align-items: center; font-size: 14px; color: var(--text-2); }
.ms-pct__bar { display: block; height: 8px; background: var(--bg); position: relative; }
.ms-pct__bar i { position: absolute; inset: 0 auto 0 0; background: #E8C15A; }
.ms-pct__v { text-align: right; font: 700 14px var(--font-ui); color: var(--text); }
.ms-pct__v small { display: block; color: var(--muted); font: 400 12px var(--font-body); }
.ms-tl { list-style: none; margin: 6px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--line); }
.ms-tl li { position: relative; margin: 0 0 11px; font-size: 14.5px; color: var(--text-2); }
.ms-tl li:last-child { margin-bottom: 0; }
.ms-tl li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; background: var(--line); }
.ms-tl li.hl::before { background: #E8C15A; }
.ms-tl time { display: block; color: var(--muted); font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .05em; }
.ms-modal { position: fixed; inset: 0; z-index: 200; background: rgba(8, 7, 6, .82); display: grid; place-items: center; padding: 16px; }
.ms-modal__box { background: var(--panel); border: 1px solid var(--line); padding: 20px; max-width: 460px; width: 100%; max-height: calc(100vh - 32px); overflow: auto; text-align: center; }
.ms-modal__box h2 { margin: 0 0 4px; font: 800 22px var(--font-ui); text-transform: uppercase; }
.ms-modal__box img { display: block; width: 100%; max-width: 300px; height: auto; margin: 14px auto; border: 1px solid var(--line); }
.ms-modal__acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 720px) {
  .ms-pct { grid-template-columns: 1fr; }
  .ms-pct li { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 92px; gap: 8px; }
}

/* Styl gry na profilu i w okienku po najechaniu na nick */
/* Profil gracza: karta po lewej (.pc), zakładki ze statystykami po prawej (.pm) */
.pv { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.pm { min-width: 0; }
.pm > .prof-tabs { margin-top: 0; }
.pc { padding: 0; overflow: visible; background: linear-gradient(180deg, color-mix(in srgb, var(--rust) 14%, var(--panel)) 0, var(--panel) 260px); }
.pc__top { padding: 22px 20px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pc .ph__av { width: 112px; height: 112px; border-color: color-mix(in srgb, var(--plywood) 70%, var(--line)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--plywood) 12%, transparent); }
.pc .ph__eb { margin: 14px 0 2px; }
.pc h1 { margin: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pc .cl-chip { margin-top: 8px; }
.pc .prof-feat { margin: 8px 0 0; justify-content: center; }
.pc .prof-feat:empty { display: none; }
.pc .prof-feat .bdg-mini span { width: 34px; height: 38px; }
.pc__rank { margin: 12px 0 0; font: 800 15px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--plywood); }
.pc .ph__bar { align-self: stretch; margin: 8px 0 6px; }
.pc .ph__hint { margin: 0; }
.pc__k { display: block; font: 700 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pc__cells { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.pc__cells--1 { grid-template-columns: 1fr; }
.pc__cell { min-width: 0; padding: 14px 10px; text-align: center; border-left: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pc__cell:first-child { border-left: 0; }
.pc__v { font: 800 26px/1.05 var(--font-ui); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); }
.pc__cell--pts .pc__v { color: var(--plywood); font-size: 30px; }
.pc__pos { font-size: 13px; color: var(--text-3); }
.pc .ph__trend { margin-top: 0; }
.pc .ph__ptsby { padding: 12px 16px 14px; }
.pc .ph__ptsby dl { grid-template-columns: 1fr; }
.pc__kd { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pc__mini { min-width: 0; padding: 12px 6px; text-align: center; border-left: 1px solid var(--line); cursor: default; transition: background .15s; }
.pc__mini:hover, .pc__mini:focus-visible { background: color-mix(in srgb, var(--plywood) 8%, transparent); outline: none; }
.pc__mini:first-child { border-left: 0; }
.pc__mini b { display: block; margin: 2px 0 1px; font: 800 22px/1.1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text); }
.pc__mini small { display: block; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pc__sty { padding: 16px 16px 12px; border-top: 1px solid var(--line); text-align: center; }
.pc__styn { margin: 4px 0 2px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 800 20px/1.1 var(--font-ui); text-transform: uppercase; color: var(--plywood); }
.pc__styn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc__styd { margin: 0; font-size: 13.5px; color: var(--text-3); }
.pc-rd { display: block; width: 100%; max-width: 320px; margin: 8px auto 2px; overflow: visible; }
.pc-rd__grid { fill: none; stroke: var(--line); stroke-width: 1; }
.pc-rd__area { fill: color-mix(in srgb, var(--plywood) 24%, transparent); stroke: var(--plywood); stroke-width: 2.5; stroke-linejoin: round; }
.pc-rd__ax circle { fill: var(--plywood); }
.pc-rd__ax text { font: 700 11px var(--font-ui); letter-spacing: .04em; fill: var(--text-3); }
.pc-rd__ax text .v { font-size: 13px; fill: var(--text); }
.pc-rd__ax.on text, .pc-rd__ax.on text .v { fill: var(--plywood); }
.pc-rd__ax { cursor: default; }
.pc-rd__ax circle.hit { fill: transparent; }
.pc-rd__ax:hover text, .pc-rd__ax:hover text .v { fill: var(--text); }
.pc__note { margin: 0; font-size: 12px; color: var(--muted); }
.pc__meta { padding: 12px 18px; border-top: 1px solid var(--line); display: grid; gap: 7px; font-size: 13.5px; color: var(--text-3); }
.pc__meta > span { display: flex; align-items: center; gap: 8px; }
.pc__meta svg { color: var(--plywood); flex: none; }
.pc__vs { padding: 0 18px 18px; }
.pc__vs .ph__cmp { width: 100%; justify-content: center; }
.pc--owner { --own: #E8B84A; border-color: color-mix(in srgb, var(--own) 55%, var(--line)); border-top: 3px solid var(--own); background: linear-gradient(180deg, color-mix(in srgb, var(--own) 12%, var(--panel)) 0, var(--panel) 260px); }
.pc--owner .ph__av { border-color: var(--own); box-shadow: 0 0 0 4px color-mix(in srgb, var(--own) 22%, transparent); }
.pc--owner .ph__eb { margin-bottom: 6px; }
@media (max-width: 960px) {
  .pv { grid-template-columns: minmax(0, 1fr); }
  .pc__top { padding-top: 18px; }
}
/* Kafelki statystyk z ikoną i wstążką miejsca w rankingu */
.prof-grid--ic { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 8px; margin-top: 8px; }
.stat-tile.pt { position: relative; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 14px 14px 12px; }
.stat-tile .pt__ic { width: 38px; height: 38px; display: grid; place-items: center; align-self: start; margin-top: 2px; background: var(--c); color: #fff; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.pt__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pt__b { min-width: 0; display: grid; gap: 1px; }
.stat-tile.pt .pt__b > b { padding-right: 30px; }
.stat-tile.pt b { font-size: 26px; line-height: 1.05; }
.stat-tile .pt__l { font: 400 14px/1.25 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--text-2); }
.stat-tile .pt__t { font-size: 12px; color: var(--muted); }
.stat-tile .pt__d { font: 600 12px var(--font-body); text-transform: none; letter-spacing: 0; color: var(--online-text); }
.stat-tile .pt__med { position: absolute; top: -1px; right: 10px; padding: 4px 6px 8px; min-width: 26px; text-align: center; font: 800 12px/1 var(--font-ui); letter-spacing: 0; color: var(--text); background: #4A433C; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
.stat-tile .pt__med--1 { background: #E8C15A; color: #1A1512; }
.stat-tile .pt__med--2 { background: #C9CDD2; color: #1A1512; }
.stat-tile .pt__med--3 { background: #D08A4E; color: #1A1512; }
.stat-tile.pt .tier-break { grid-column: 1 / -1; margin-top: 4px; }
.pt-skip { margin-top: 14px; }
.stat-tile.pt { transition: border-color .15s; }
.stat-tile.pt:hover, .stat-tile.pt:focus-visible { border-color: color-mix(in srgb, var(--c) 70%, var(--line)); outline: none; }
.pc__rank { cursor: default; }
/* Dymek profilu (jak dymek odznak): nagłówek, duża wartość, wzór, wiersze, wykres 7 dni, notka */
.ptip { position: absolute; z-index: 80; display: grid; gap: 6px; width: max-content; min-width: 200px; max-width: min(300px, calc(100vw - 16px)); padding: 12px 14px 12px; background: var(--panel-head); border: 1px solid var(--line); border-top: 3px solid var(--c); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); pointer-events: none; font-size: 13px; color: var(--text-2); line-height: 1.4; animation: ptip-in .12s ease-out; }
.ptip[hidden] { display: none; }
@keyframes ptip-in { from { opacity: 0; transform: translateY(4px); } }
.ptip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -7px; width: 12px; height: 12px; background: var(--panel-head); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.ptip.is-below::after { bottom: auto; top: -9px; border: 0; border-left: 3px solid var(--c); border-top: 3px solid var(--c); }
.ptip__h { font: 700 12px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.ptip__big { font: 800 28px/1.05 var(--font-ui); color: var(--text); font-variant-numeric: tabular-nums; }
.ptip__big small { font: 600 13px var(--font-body); color: var(--text-3); }
.ptip__f { font-size: 13px; color: var(--text-2); }
.ptip__f b { font: 800 15px var(--font-ui); color: var(--text); font-variant-numeric: tabular-nums; }
.ptip__f i { font-style: normal; margin: 0 3px; color: var(--c); font-weight: 700; }
.ptip__rows { margin: 2px 0 0; display: grid; }
.ptip__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0; border-top: 1px solid var(--line-soft); }
.ptip__rows dt { color: var(--text-3); }
.ptip__rows dd { margin: 0; font: 700 14px var(--font-ui); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptip__rows dd small { font: 400 12px var(--font-body); color: var(--muted); }
.ptip__pos { margin-left: 4px; font: 800 12px var(--font-ui); color: var(--rust-text); }
.ptip__k { display: block; margin-bottom: 4px; font: 700 10.5px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ptip__ch { padding-top: 6px; border-top: 1px solid var(--line-soft); }
.ptip__bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; height: 92px; }
.ptip__bars > span { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; min-width: 0; }
.ptip__bars em { font: 700 9.5px var(--font-ui); font-style: normal; color: var(--text-3); white-space: nowrap; letter-spacing: -.02em; }
.ptip__bars i { align-self: end; width: 100%; max-width: 22px; background: color-mix(in srgb, var(--c) 55%, #3a342d); }
.ptip__bars small { margin-top: 3px; font: 700 10px var(--font-ui); text-transform: uppercase; color: var(--muted); }
.ptip__bars .is-today i { background: var(--c); }
.ptip__bars .is-today em, .ptip__bars .is-today small { color: var(--text); }
.ptip__bars .is-none i { background: transparent; border-bottom: 1px dashed var(--line); }
.ptip__n { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .prof-grid--ic { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat-tile.pt { grid-template-columns: 1fr; padding: 12px 10px 10px; gap: 6px; }
  .stat-tile .pt__ic { width: 30px; height: 30px; }
  .pt__ic svg { width: 16px; height: 16px; }
  .stat-tile.pt b { font-size: 22px; }
  .stat-tile.pt .pt__b > b { padding-right: 0; }
  .stat-tile .pt__l { font-size: 13px; }
}
.pcard__style svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; margin-right: 5px; color: var(--rust-text); }

/* Kronika: granica sezonów */
.feed li.feed__sep { border-top: 2px dashed rgba(232, 193, 90, .55); border-bottom: 2px dashed rgba(232, 193, 90, .55); background: rgba(232, 193, 90, .06); }
.feed li.feed__sep .feed__t { color: var(--text); }
.feed li.feed__sep .feed__t b { color: #E8C15A; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Hodowla roślin (/hodowla) ---------- */
.br-plants { display: grid; grid-template-columns: repeat(14, minmax(84px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 6px; margin: 0 0 18px; scrollbar-width: thin; }
.br-plant { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; min-width: 0; padding: 8px 6px 7px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); cursor: pointer; font: 700 12px/1.15 var(--font-ui); text-transform: uppercase; letter-spacing: .03em; text-align: center; }
.br-plant:hover { color: var(--text); border-color: #4A433B; }
.br-plant.on { background: var(--panel-hi); color: #F2EAE2; border-color: var(--plywood); }
.br-plant img { width: 38px; height: 38px; object-fit: contain; }
.br-plant b { position: absolute; top: 4px; right: 5px; min-width: 18px; padding: 1px 4px; background: var(--plywood); color: #14110F; font-size: 11px; border-radius: 9px; }
.br-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 20px; align-items: start; }
.br-head { min-height: 56px; }
.br-ttl { display: inline-flex; align-items: center; gap: 10px; color: #F2EAE2; font-size: 15px; }
.br-ttl img { width: 30px; height: 30px; object-fit: contain; }
.br-cnt { color: var(--plywood); }
.br-scan-btn { background: var(--rust); color: var(--on-rust); min-height: 40px; padding: 0 14px; font-size: 14px; gap: 8px; }
.br-scan-btn:hover { background: #CC4527; color: var(--on-rust); }
.br-add { display: flex; gap: 8px; }
.br-add input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); color: #F2EAE2; font: 700 18px/1 var(--font-mono); letter-spacing: .3em; text-transform: uppercase; padding: 0 12px; min-height: 46px; }
.br-add input:focus { outline: 2px solid var(--plywood); outline-offset: -1px; }
.br-err { color: var(--rust-text); }
.br-list { list-style: none; margin: 12px 0 0; padding: 0; }
.br-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.br-list li:first-child { border-top: 0; }
.br-n { width: 30px; color: var(--muted); font: 700 13px var(--font-ui); }
.br-sc { margin-left: auto; color: var(--plywood); font: 700 13px var(--font-ui); }
.br-x { background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.br-x:hover { color: var(--rust-text); }
.br-empty { color: var(--muted); font-size: 14px; }
.br-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.br-tools .btn { min-height: 40px; font-size: 13px; padding: 0 14px; }
.br-danger { background: var(--rust) !important; color: var(--on-rust) !important; }
.br-genes { display: inline-flex; gap: 4px; align-items: center; }
.br-g { width: 30px; height: 30px; display: inline-grid; place-items: center; font: 800 17px/1 var(--font-ui); font-style: normal; color: #fff; border-radius: 2px; }
.br-g--G, .br-g--Y, .br-g--H { background: #5E8A2E; }
.br-g--W, .br-g--X { background: #A8341E; }
.br-g--q { background: #3A342E; color: var(--plywood); }
.br-g.sm { width: 24px; height: 24px; font-size: 14px; }
.br-g.lg { width: 44px; height: 44px; font-size: 24px; }
.br-multi { display: inline-flex; flex-direction: column; gap: 2px; }
.br-multi .br-g { width: 44px; height: 13px; font-size: 10px; }
.br-tabs { display: flex; border: 1px solid var(--line); margin-bottom: 16px; }
.br-tabs button { flex: 1; min-height: 42px; background: var(--bg); color: var(--muted); border: 0; font: 700 14px var(--font-ui); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.br-tabs button.on { background: var(--panel-hi); color: #F2EAE2; box-shadow: inset 0 -2px 0 var(--plywood); }
.br-prio label { display: grid; grid-template-columns: 30px 150px 1fr 24px; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; color: var(--text); }
.br-prio input { width: 100%; accent-color: var(--plywood); }
.br-prio b { color: var(--plywood); font-family: var(--font-ui); }
.br-res { margin-top: 18px; padding: 18px; border: 1px solid var(--plywood); background: linear-gradient(180deg, rgba(201,165,122,.08), transparent); }
.br-res--empty { border-style: dashed; border-color: var(--line); color: var(--muted); font-size: 14px; background: none; }
.br-res__lab { font: 700 12px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--plywood); margin-bottom: 8px; }
.br-res__top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.br-res__info { font-size: 14px; color: var(--muted); line-height: 1.5; }
.br-res__info b { color: #F2EAE2; }
.br-have { margin: 0 0 14px; padding: 10px 12px; background: rgba(127,163,63,.12); border: 1px solid rgba(127,163,63,.4); font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.br-pl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; justify-items: start; }
.br-planter { display: grid; grid-template-columns: repeat(3, 160px); grid-template-rows: repeat(3, 160px); gap: 6px; padding: 10px; background: #3B2A1C; border: 3px solid #5A4128; }
.br-cell { background: #2A1E14; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font: 800 15px/1.15 var(--font-ui); color: #E9F0DC; }
.br-cell b { font-size: 18px; }
.br-cg { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.br-cg .br-g { width: 34px; height: 34px; font-size: 19px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.br-cell small { display: block; font: 500 10px var(--font-mono); letter-spacing: .02em; opacity: .85; }
.br-cell--n { background: #2F2419; outline: 2px solid #4E6B2C; outline-offset: -2px; }
.br-cell--c { background: var(--rust); color: #fff; outline: 2px dashed #F2EAE2; outline-offset: -5px; }
.br-cell--c { gap: 4px; }
.br-cell--c b { font-size: 14px; letter-spacing: .04em; }
.br-cell--c small { font: 600 11px/1.3 var(--font-body); opacity: .95; text-align: center; padding: 0 10px; }
.br-steps { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.65; }
.br-steps b { color: #F2EAE2; }
.br-alt { margin-top: 16px; }
.br-alt h3 { font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 6px; }
.br-alt__r { display: flex; width: 100%; align-items: center; gap: 12px; padding: 8px 10px; margin: 0; background: none; border: 0; border-top: 1px solid var(--line-soft); border-left: 3px solid transparent; color: var(--text); font: 400 14px var(--font-body); text-align: left; cursor: pointer; flex-wrap: wrap; }
.br-alt__r:hover { background: rgba(255,255,255,.03); }
.br-alt__r.on { background: rgba(201,165,122,.1); border-left-color: var(--plywood); }
.br-best { font: 700 11px var(--font-ui); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: #14110F; background: var(--plywood); padding: 2px 6px; margin-left: 6px; }
.br-alt__r span:last-child { margin-left: auto; color: var(--muted); }
.br-legend { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 22px; font-size: 13px; color: var(--muted); }
.br-legend span { display: inline-flex; align-items: center; gap: 6px; }
.br-ov { position: fixed; inset: 0; z-index: 200; background: rgba(6,5,4,.8); display: flex; align-items: center; justify-content: center; padding: 20px; }
.br-modal { width: min(1120px, 100%); max-height: calc(100vh - 40px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.br-mb { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; }
.br-prev { position: relative; min-height: 220px; background: #0B0A09; border: 1px solid var(--line); overflow: hidden; }
.br-prev video { display: block; width: 100%; height: auto; }
.br-prev canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.br-head__r { display: inline-flex; align-items: center; gap: 14px; }
.br-snd { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text); text-transform: none; letter-spacing: 0; font-size: 14px; }
.br-snd input { accent-color: var(--plywood); width: 16px; height: 16px; }
.br-link { background: none; border: 0; padding: 0; color: var(--plywood); text-decoration: underline; cursor: pointer; font: inherit; }
.br-diag { color: #7E766D; }
.br-tip--info { background: rgba(201,165,122,.08); border-color: rgba(201,165,122,.35); }
.br-prev__ph[hidden] { display: none; }
.br-prev__ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--muted); font-size: 14px; margin: 0; }
.br-st { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.br-st--on { color: var(--online-text); }
.br-st--on::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 4px rgba(127,163,63,.2); }
.br-st--off { color: var(--rust-text); }
.br-list--scan { max-height: 340px; overflow: auto; margin-top: 0; }
.br-new { animation: br-fl 1.6s; }
@keyframes br-fl { from { background: rgba(127,163,63,.35); } to { background: transparent; } }
.br-tip { margin-top: 14px; padding: 12px 14px; background: rgba(184,56,31,.1); border: 1px solid rgba(184,56,31,.4); font-size: 14px; line-height: 1.5; }
@media (max-width: 960px) {
  .br-grid, .br-mb { grid-template-columns: minmax(0, 1fr); }
  .br-pl { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
@media (max-width: 560px) {
  .br-g.lg { width: 38px; height: 38px; font-size: 20px; }
  .br-multi .br-g { width: 38px; }
  .br-planter { grid-template-columns: repeat(3, 84px); grid-template-rows: repeat(3, 84px); gap: 4px; padding: 6px; }
  .br-cg { grid-template-columns: repeat(3, 20px); gap: 2px; }
  .br-cg .br-g { width: 20px; height: 20px; font-size: 12px; }
  .br-cell b { font-size: 14px; }
  .br-cell--c { gap: 2px; }
  .br-cell--c b { font-size: 11px; }
  .br-cell--c small { font-size: 9px; line-height: 1.15; padding: 0 6px; }
  .br-prio label { grid-template-columns: 30px 1fr 24px; }
  .br-prio label span { grid-column: 2 / 4; }
  .br-prio label input { grid-column: 1 / 3; }
  .br-sc { display: none; }
}
.br-mid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.br-mid label { font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.br-mid select { flex: 1; min-width: 200px; min-height: 40px; background: var(--bg); color: #F2EAE2; border: 1px solid var(--line); padding: 0 10px; font: 600 15px var(--font-mono); letter-spacing: .06em; }
@media (min-width: 561px) and (max-width: 1240px) {
  .br-planter { grid-template-columns: repeat(3, 112px); grid-template-rows: repeat(3, 112px); }
  .br-cg { grid-template-columns: repeat(3, 24px); }
  .br-cg .br-g { width: 24px; height: 24px; }
}
.br-cell--c .br-cg .br-g { box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.br-plan { margin-top: 18px; padding: 14px 16px; border: 1px dashed rgba(201,165,122,.5); background: rgba(201,165,122,.05); font-size: 14px; }
.br-plan p { margin: 0 0 10px; line-height: 1.5; }
.br-plan .btn { min-height: 40px; font-size: 13px; padding: 0 14px; }
.br-plan--ok { border-style: solid; }
.br-plan h3 { font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--plywood); margin: 0 0 6px; }
.br-prog { height: 8px; background: var(--bg); border: 1px solid var(--line); margin: 6px 0 10px; }
.br-prog i { display: block; height: 100%; width: 0; background: var(--plywood); transition: width .3s; }
.br-stepn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--plywood); color: #14110F; font: 800 13px var(--font-ui); }
.br-cell--i { outline-color: var(--plywood); }
.br-cell--i b { color: var(--plywood); }
.br-plan__add { margin: 12px 0 0; }
.br-plan__add .btn { min-height: 40px; font-size: 13px; }
.br-warn { padding: 8px 10px; background: rgba(184,56,31,.12); border: 1px solid rgba(184,56,31,.4); }
.br-list li.br-useless .br-genes { opacity: .45; }
.br-list li.br-useless .br-n { opacity: .6; }
.br-ut { margin-left: auto; font: 700 11px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: #8E857B; border: 1px solid var(--line); padding: 2px 6px; }
.br-ut + .br-sc { margin-left: 8px; }
@media (max-width: 560px) { .br-ut { display: none; } }
.br-presets { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.br-preset { grid-column: span 2; }
.br-preset--any { grid-column: span 5; }
.br-preset { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: var(--bg); border: 1px solid var(--line); color: var(--text); cursor: pointer; text-align: center; }
.br-preset b { font: 800 15px var(--font-ui); letter-spacing: .03em; }
.br-preset small { font: 500 11px var(--font-body); color: var(--muted); line-height: 1.2; }
.br-preset:hover { border-color: #4A433B; }
.br-preset.on { background: var(--panel-hi); border-color: var(--plywood); box-shadow: inset 0 -2px 0 var(--plywood); }
.br-preset.on b { color: var(--plywood); }
@media (max-width: 560px) { .br-presets { grid-template-columns: repeat(6, minmax(0, 1fr)); } .br-preset--any { grid-column: span 3; } }
.br-list li.br-hit { background: rgba(127,163,63,.14); box-shadow: inset 3px 0 0 var(--online); padding-left: 10px; padding-right: 4px; }
.br-list li.br-hit .br-n { color: var(--online-text); }
.br-have__c { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px 4px; color: inherit; font: inherit; cursor: pointer; }
.br-have__c:hover b { text-decoration: underline; }
.br-flash { animation: br-fl 1.6s; }
.br-grow { margin-top: 14px; }
.br-grow .btn { min-height: 42px; font-size: 14px; padding: 0 16px; }
.br-grow .btn[disabled] { opacity: .5; cursor: default; }
.br-grow--open { padding: 14px 16px; border: 1px solid rgba(127,163,63,.45); background: rgba(127,163,63,.07); }
.br-grow--open p { margin: 0 0 10px; font-size: 14px; }
.br-grow__slots { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.br-grow__s { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; background: var(--bg); border: 1px solid var(--line); }
.br-grow__s small { font: 700 11px var(--font-ui); color: var(--muted); }
.br-grow__o { background: none; border: 2px solid transparent; padding: 1px; cursor: pointer; opacity: .55; }
.br-grow__o.on { border-color: var(--plywood); opacity: 1; }
.br-grow__o:hover { opacity: 1; }
.br-grow__act { display: flex; align-items: center; gap: 14px; margin: 0 !important; }
/* ---------- Kalkulator genów: ramka serwera i poradnik ---------- */
.br-srv{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin:34px 0 0;padding:26px 28px;background:linear-gradient(120deg,rgba(184,56,31,.22),rgba(201,165,122,.06) 60%),var(--panel);border:1px solid var(--line);border-left:4px solid var(--rust)}
.br-srv h2{font:800 30px/1.1 var(--font-ui);text-transform:uppercase;margin:6px 0 10px;color:#F2EAE2}
.br-srv p{margin:0 0 14px;max-width:720px;line-height:1.55}
.br-srv__acts{display:flex;gap:8px;flex-wrap:wrap}
.br-srv__acts .btn{min-height:42px;font-size:14px}
.br-srv__stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 26px;background:var(--bg);border:1px solid var(--line);min-width:150px}
.br-srv__stat b{font:800 46px/1 var(--font-ui);color:var(--online-text)}
.br-srv__stat small{color:var(--muted);font-size:13px}
.br-srv__dot{width:10px;height:10px;border-radius:50%;background:var(--online);box-shadow:0 0 0 4px rgba(127,163,63,.25)}
.br-srv__num{display:flex;align-items:center;gap:12px}
.br-srv__num .br-srv__dot{flex:none;margin-top:2px}
.br-guide{max-width:900px;margin:40px 0 0;line-height:1.65}
.br-guide h2{font:800 28px/1.15 var(--font-ui);text-transform:uppercase;color:#F2EAE2;margin:30px 0 12px}
.br-guide h3{font:700 19px var(--font-ui);text-transform:uppercase;letter-spacing:.04em;color:var(--plywood);margin:26px 0 8px}
.br-guide p{margin:0 0 12px}
.br-gtab{border-collapse:collapse;margin:8px 0 6px;min-width:420px}
.br-gtab th,.br-gtab td{border-bottom:1px solid var(--line);padding:8px 14px;text-align:left}
.br-gtab th{font:700 12px var(--font-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.br-howto{padding-left:20px}
.br-guide details{border:1px solid var(--line);background:var(--panel);margin:0 0 8px}
.br-guide summary{cursor:pointer;padding:12px 16px;font:700 16px var(--font-ui);color:#F2EAE2}
.br-guide details p{padding:0 16px 12px;margin:0}
@media (max-width:700px){.br-srv{grid-template-columns:1fr}.br-gtab{min-width:0;width:100%}}
.br-srv .eyebrow { margin: 0; }
.br-guide summary::marker { color: var(--plywood); }
.br-wikibox p { margin: 6px 0 12px; }
.br-wikibox .btn { min-height: 40px; font-size: 13px; }
.br-sl-ic { width: 26px; height: 26px; object-fit: contain; flex: none; }

/* Kalkulator genów: „Zgłoś błąd” */
.br-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.br-top .br-bug { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; }
.bug-fr { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start; cursor: pointer; background: var(--bg-bar); border: 1px solid var(--line-soft); padding: 10px 12px; }
.bug-fr input { margin-top: 3px; }
.bug-fr span b { display: block; font: 700 14px var(--font-ui); color: var(--text); }
.bug-fr span small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.bug-fr img { grid-column: 1 / -1; width: 100%; height: auto; border: 1px solid var(--line); }
.br-tip .br-link { font: inherit; }
.rp .bug-fr span, .rp .bug-fr span b, .rp .bug-fr span small { margin: 0; text-transform: none; letter-spacing: 0; }
.rp .bug-fr span small { font: 400 13px var(--font-body); }

/* „Wyszło coś innego?”: wynik niezgodny z przewidywaniem */
.br-grow .br-link { margin-left: 6px; }
.br-grow__o--x { opacity: .55; }
.br-grow__o--x.on { opacity: 1; }
.br-grow__miss { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid #D9583B; background: rgba(217, 88, 59, .1); font-size: 14px; color: var(--text-2); }
/* Hodowla w kilku etapach: plan na górze wyniku */
.br-plan--top { margin: 0 0 18px; }
.br-plan--top.br-plan--ok { border: 2px solid var(--plywood); background: rgba(201,165,122,.08); }
.br-plan--none { border-color: rgba(217,88,59,.6); background: rgba(217,88,59,.07); }
.br-plan__h { display: flex; align-items: center; gap: 10px; font: 800 18px var(--font-ui) !important; letter-spacing: .04em !important; color: var(--text) !important; margin: 0 0 8px !important; }
.br-plan__n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--plywood); color: #14110F; font: 800 17px var(--font-ui); }
.br-plan__steps { margin-top: 4px; }
.br-alt--fold { margin-top: 18px; }
.br-alt--fold summary { cursor: pointer; font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 6px 0; }
.br-alt--fold summary:hover { color: var(--text-2); }
/* Zakładka „?”: nierozpoznane klony */
.br-unk p { margin: 0 0 12px; line-height: 1.5; }
.br-unk__all { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: var(--bg-bar); border: 1px solid var(--line-soft); margin-bottom: 10px; }
.br-unk__all label { font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.br-unk select { min-height: 36px; background: var(--bg); color: var(--text); border: 1px solid var(--line); padding: 0 8px; font: inherit; font-size: 14px; }
.br-unk__all .btn { min-height: 36px; font-size: 13px; padding: 0 14px; }
.br-unk__list { list-style: none; margin: 0; padding: 0; }
.br-unk__list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.br-unk__list select { margin-left: auto; }
/* Przełącznik „Rozpoznawaj roślinę” obok „Skanuj z gry” (suwak) */
.br-auto { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; text-transform: none; letter-spacing: 0; padding: 4px 10px 4px 6px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.18); min-height: 40px; }
.br-auto:hover { border-color: var(--line); }
.br-auto input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.br-auto__sw { position: relative; flex: none; width: 40px; height: 22px; border-radius: 11px; background: #3A3530; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background .18s; }
.br-auto__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #9C948B; transition: transform .18s, background .18s; }
.br-auto input:checked + .br-auto__sw { background: #4E7A2C; }
.br-auto input:checked + .br-auto__sw::after { transform: translateX(18px); background: #F2EAE2; }
.br-auto input:focus-visible + .br-auto__sw { outline: 2px solid var(--plywood); outline-offset: 2px; }
.br-auto__t { display: flex; flex-direction: column; line-height: 1.15; }
.br-auto__t b { font: 700 12px var(--font-ui); text-transform: uppercase; letter-spacing: .07em; color: var(--text); }
.br-auto__t small { font-size: 11px; color: var(--muted); }
.br-auto__on { display: none; }
.br-auto input:checked ~ .br-auto__t .br-auto__on { display: block; color: #9CC46B; }
.br-auto input:checked ~ .br-auto__t .br-auto__off { display: none; }
@media (max-width: 560px) { .br-card > .br-head { flex-wrap: wrap; gap: 8px; } }
/* Nagłówek listy klonów: tytuł w jednej linii, przełącznik + przycisk zawijają się pod tytuł, gdy brak miejsca */
.br-card > .br-head { flex-wrap: wrap; row-gap: 10px; }
.br-card > .br-head .br-ttl { white-space: nowrap; }
.br-card > .br-head .br-head__r { margin-left: auto; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.br-auto { padding: 3px 10px 3px 5px; min-height: 38px; }
.br-auto__t b { white-space: nowrap; font-size: 11px; }
@media (max-width: 560px) { .br-card > .br-head .br-head__r { width: 100%; justify-content: space-between; } .br-card > .br-head .br-scan-btn { flex: 1; justify-content: center; } }
.br-plants--nounk { grid-template-columns: repeat(13, minmax(84px, 1fr)); }

/* Nav: „Zagłosuj na serwer”: po najechaniu przycisk się unosi, przechodzi po nim błysk, w kratce rysuje się „ptaszek”, a w górę ulatuje „+1” */
.nav-vote { position: relative; overflow: visible; isolation: isolate; transition: background-color .15s ease, transform .18s ease, box-shadow .18s ease; }
.nav-vote::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 130% 0; }
.nav-vote__ic { flex: none; margin: -2px 0; }
.nav-vote__tick { stroke-dasharray: 16; stroke-dashoffset: 16; }
.nav-vote__plus { position: absolute; right: 10px; top: 0; font: 800 15px var(--font-ui); font-style: normal; color: #F2CF6E; text-shadow: 0 1px 0 #14110F, 0 0 8px rgba(232,193,90,.6); opacity: 0; pointer-events: none; }
.nav-vote:hover, .nav-vote:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(232,193,90,.35), 0 0 0 1px rgba(255,236,170,.5) inset; }
.nav-vote:hover::before, .nav-vote:focus-visible::before { animation: nav-vote-shine .75s ease-out; }
.nav-vote:hover .nav-vote__tick, .nav-vote:focus-visible .nav-vote__tick { animation: nav-vote-tick .35s .12s ease-out forwards; }
.nav-vote:hover .nav-vote__box, .nav-vote:focus-visible .nav-vote__box { animation: nav-vote-box .45s ease-out; transform-origin: center; transform-box: fill-box; }
.nav-vote:hover .nav-vote__plus, .nav-vote:focus-visible .nav-vote__plus { animation: nav-vote-plus .9s .2s ease-out; }
.nav-vote:active { transform: translateY(0) scale(.97); }
@keyframes nav-vote-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes nav-vote-tick { to { stroke-dashoffset: 0; } }
@keyframes nav-vote-box { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes nav-vote-plus { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: 1; transform: translateY(-14px) scale(1.1); } 100% { opacity: 0; transform: translateY(-34px) scale(.9); } }
@media (prefers-reduced-motion: reduce) {
  .nav-vote, .nav-vote:hover { transform: none; }
  .nav-vote:hover::before, .nav-vote:hover .nav-vote__box, .nav-vote:hover .nav-vote__plus { animation: none; }
  .nav-vote:hover .nav-vote__tick { animation: none; stroke-dashoffset: 0; }
}

/* Nav: „Discord”: po najechaniu przycisk się unosi i świeci, dymek czatu podskakuje, kropki „piszą”, a w rogu wyskakuje czerwona plakietka powiadomienia */
.nav-dc { position: relative; overflow: visible; transition: background-color .15s ease, transform .18s ease, box-shadow .18s ease; }
.nav-dc__ic { flex: none; margin: -2px 0; overflow: visible; }
.nav-dc__ic, .nav-dc__d { transform-box: fill-box; transform-origin: center; }
.nav-dc__badge { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border-radius: 50%; background: #ED4245; box-shadow: 0 0 0 3px #14110F; transform: scale(0); pointer-events: none; }
.nav-dc:hover, .nav-dc:focus-visible { background: #4752C4; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(88,101,242,.45), 0 0 0 1px rgba(200,205,255,.35) inset; }
.nav-dc:hover .nav-dc__ic, .nav-dc:focus-visible .nav-dc__ic { animation: nav-dc-pop .45s ease-out; }
.nav-dc:hover .nav-dc__d, .nav-dc:focus-visible .nav-dc__d { animation: nav-dc-type 1s ease-in-out infinite; }
.nav-dc:hover .nav-dc__d:nth-of-type(2), .nav-dc:focus-visible .nav-dc__d:nth-of-type(2) { animation-delay: .15s; }
.nav-dc:hover .nav-dc__d:nth-of-type(3), .nav-dc:focus-visible .nav-dc__d:nth-of-type(3) { animation-delay: .3s; }
.nav-dc:hover .nav-dc__badge, .nav-dc:focus-visible .nav-dc__badge { animation: nav-dc-badge .4s .25s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.nav-dc:active { transform: translateY(0) scale(.97); }
@keyframes nav-dc-pop { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.2) rotate(-8deg); } 70% { transform: scale(.95) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes nav-dc-type { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-2.5px); opacity: 1; } }
@keyframes nav-dc-badge { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .nav-dc, .nav-dc:hover { transform: none; }
  .nav-dc:hover .nav-dc__ic, .nav-dc:hover .nav-dc__d { animation: none; }
  .nav-dc:hover .nav-dc__badge { animation: none; transform: scale(1); }
}

/* Strona główna: „Dołącz do gry”: po najechaniu przycisk się unosi i świeci, po tle suną ukośne pasy ostrzegawcze,
   ikona „play” wylatuje w prawo i wraca z lewej (2 razy), a u dołu ładuje się pasek jak przy łączeniu z serwerem */
.join-btn { position: relative; overflow: hidden; isolation: isolate; transition: background-color .15s ease, transform .18s ease, box-shadow .18s ease; }
.join-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.10) 0 10px, transparent 10px 20px); background-size: 28.28px 28.28px; }
.join-btn__ic { display: inline-flex; width: 16px; height: 16px; overflow: hidden; flex: none; }
.join-btn__bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: linear-gradient(90deg, rgba(255,255,255,.35), #F2EAE2); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.join-btn:hover, .join-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(110,160,60,.45), 0 0 0 1px rgba(220,255,180,.35) inset; }
.join-btn:hover::before, .join-btn:focus-visible::before { opacity: 1; animation: join-stripes .6s linear infinite; }
.join-btn:hover .join-btn__ic svg, .join-btn:focus-visible .join-btn__ic svg { animation: join-go .5s ease-in-out 2; }
.join-btn:hover .join-btn__bar, .join-btn:focus-visible .join-btn__bar { animation: join-load 1.1s cubic-bezier(.4, 0, .2, 1) forwards; }
.join-btn:hover .join-btn__t, .join-btn:focus-visible .join-btn__t { animation: join-nudge .5s ease-out; }
.join-btn:active { transform: translateY(0) scale(.97); }
@keyframes join-stripes { from { background-position: 0 0; } to { background-position: 28.28px 0; } }
@keyframes join-go { 0% { transform: translateX(0); } 45% { transform: translateX(120%); } 46% { transform: translateX(-120%); } 100% { transform: translateX(0); } }
@keyframes join-load { 0% { transform: scaleX(0); } 60% { transform: scaleX(.85); } 100% { transform: scaleX(1); } }
@keyframes join-nudge { 0% { transform: translateX(0); } 40% { transform: translateX(4px); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .join-btn, .join-btn:hover { transform: none; }
  .join-btn:hover::before, .join-btn:hover .join-btn__ic svg, .join-btn:hover .join-btn__t { animation: none; }
  .join-btn:hover .join-btn__bar { animation: none; transform: scaleX(1); }
}

/* Sekcja „Głosowanie” (rdzawy przycisk z „›”): ten sam błysk i „+1” co w menu, strzałka odskakuje w prawo */
.vote-big:hover, .vote-big:focus-visible { box-shadow: 0 8px 22px rgba(184,61,34,.45), 0 0 0 1px rgba(255,200,170,.35) inset; }
.vote-big .nav-vote__plus { right: 44px; top: 4px; color: #FFE7DC; text-shadow: 0 1px 0 #14110F, 0 0 8px rgba(255,140,100,.7); }
.vote__links .vote-big::after { transition: transform .2s ease; }
.vote__links .vote-big:hover::after, .vote__links .vote-big:focus-visible::after { animation: vote-arrow .6s ease-in-out infinite; }
@keyframes vote-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .vote__links .vote-big:hover::after { animation: none; transform: translateX(4px); } }

/* Strona główna: „Pierwsze kroki”: po najechaniu przez przycisk przechodzą ślady stóp (lewa, prawa…), ramka i tekst się rozjaśniają */
.steps-btn { position: relative; overflow: hidden; isolation: isolate; transition: background-color .15s ease, transform .18s ease, box-shadow .18s ease; }
.steps-btn > span:last-child { position: relative; z-index: 1; }
.steps-btn__trail { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.steps-btn__trail i { position: absolute; width: 11px; height: 15px; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'%3E%3Cg fill='%23E8D9C4'%3E%3Cellipse cx='10' cy='17' rx='6' ry='9'/%3E%3Ccircle cx='4' cy='4.5' r='2'/%3E%3Ccircle cx='8.5' cy='2.6' r='2.1'/%3E%3Ccircle cx='13' cy='3' r='1.9'/%3E%3Ccircle cx='16.6' cy='5.6' r='1.7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(90deg); }
.steps-btn__trail i:nth-child(odd) { top: calc(50% - 15px); }
.steps-btn__trail i:nth-child(even) { top: calc(50% + 1px); }
.steps-btn__trail i:nth-child(1) { left: 6%; } .steps-btn__trail i:nth-child(2) { left: 25%; } .steps-btn__trail i:nth-child(3) { left: 44%; } .steps-btn__trail i:nth-child(4) { left: 63%; } .steps-btn__trail i:nth-child(5) { left: 82%; }
.steps-btn__trail i:nth-child(even) { transform: rotate(90deg) scaleX(-1); }
.steps-btn:hover, .steps-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(201,165,122,.55) inset; }
.steps-btn:hover .steps-btn__trail i, .steps-btn:focus-visible .steps-btn__trail i { animation: steps-print 1.6s ease-out infinite; }
.steps-btn:hover .steps-btn__trail i:nth-child(2), .steps-btn:focus-visible .steps-btn__trail i:nth-child(2) { animation-delay: .2s; }
.steps-btn:hover .steps-btn__trail i:nth-child(3), .steps-btn:focus-visible .steps-btn__trail i:nth-child(3) { animation-delay: .4s; }
.steps-btn:hover .steps-btn__trail i:nth-child(4), .steps-btn:focus-visible .steps-btn__trail i:nth-child(4) { animation-delay: .6s; }
.steps-btn:hover .steps-btn__trail i:nth-child(5), .steps-btn:focus-visible .steps-btn__trail i:nth-child(5) { animation-delay: .8s; }
.steps-btn:active { transform: translateY(0) scale(.97); }
@keyframes steps-print { 0% { opacity: 0; } 8% { opacity: .5; } 55% { opacity: .22; } 85%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .steps-btn, .steps-btn:hover { transform: none; } .steps-btn:hover .steps-btn__trail i { animation: none; opacity: .25; } }

/* „Zagłosuj na serwer”: zamiast „+1” serduszka wylatujące dookoła przycisku (kierunek, odległość i opóźnienie każdego w style="--x --y --r --d --s") */
.nav-vote__plus { display: none; }
.nav-vote__hearts { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.nav-vote__hearts .vh { position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); opacity: 0; background: center / contain no-repeat; }
.nav-vote__hearts .vh--a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21s-8.5-5.2-10.6-10.4C-.2 6.5 2.4 2 6.6 2 9.1 2 11 3.6 12 5.4 13 3.6 14.9 2 17.4 2c4.2 0 6.8 4.5 5.2 8.6C20.5 15.8 12 21 12 21z' fill='%23E5484D' stroke='%2314110F' stroke-width='1.5'/%3E%3C/svg%3E"); }
.nav-vote__hearts .vh--b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21s-8.5-5.2-10.6-10.4C-.2 6.5 2.4 2 6.6 2 9.1 2 11 3.6 12 5.4 13 3.6 14.9 2 17.4 2c4.2 0 6.8 4.5 5.2 8.6C20.5 15.8 12 21 12 21z' fill='%23FF8FA3' stroke='%2314110F' stroke-width='1.5'/%3E%3C/svg%3E"); }
.nav-vote:hover .vh, .nav-vote:focus-visible .vh { animation: vote-heart .95s var(--d) cubic-bezier(.2, .7, .3, 1) both; }
@keyframes vote-heart {
  0% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.2) rotate(0); }
  12% { opacity: 1; }
  65% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) - 12px)) scale(.75) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) { .nav-vote:hover .vh { animation: none; } }

/* Menu „Narzędzia” (kalkulatory): rozwijane po najechaniu albo kliknięciu; na telefonie lista pod nagłówkiem */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd__btn { gap: 6px; background: none; border: 0; cursor: pointer; }
.nav-dd__btn svg { transition: transform .18s ease; }
.nav-dd__btn.is-current { color: var(--plywood); }
.nav-dd__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 270px; padding: 6px; background: var(--bg-bar); border: 1px solid var(--line); border-top: 3px solid var(--plywood); box-shadow: 0 16px 34px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.nav-dd__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-dd.is-open .nav-dd__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .15s ease; }
.nav-dd.is-open .nav-dd__btn svg { transform: rotate(180deg); }
.nav-dd__it { display: block; padding: 10px 12px; text-decoration: none; border-left: 3px solid transparent; }
.nav-dd__it b { display: block; font: 700 15px/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
.nav-dd__it small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }
.nav-dd__it:hover, .nav-dd__it:focus-visible { background: var(--panel-hi); border-left-color: var(--plywood); }
.nav-dd__it:hover b, .nav-dd__it[aria-current="page"] b { color: var(--plywood); }
.nav-dd__adm { color: #E8C15A; }
@media (hover: hover) and (min-width: 1121px) { .nav-dd:hover .nav-dd__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .15s ease; } .nav-dd:hover .nav-dd__btn svg { transform: rotate(180deg); } }
@media (max-width: 1120px) {
  .nav-dd { display: block; }
  .nav-dd__btn { width: 100%; padding: 14px 4px; border-bottom: 1px solid var(--line-soft); justify-content: flex-start; pointer-events: none; }
  .nav-dd__btn svg { display: none; }
  .nav-dd__menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 0 14px; background: none; border: 0; box-shadow: none; }
  .nav-dd__it { padding: 12px 8px; border-bottom: 1px solid var(--line-soft); }
}

/* Kalkulator recyklera (/recykler) */
.rc-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 22px; }
.rc-type { position: relative; text-align: left; cursor: pointer; background: var(--panel); border: 1px solid var(--line); padding: 14px 14px 12px 18px; color: var(--text); font: inherit; }
.rc-type::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.rc-type b { display: block; font: 800 16px/1.1 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: #F2EAE2; padding-right: 48px; }
.rc-type small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.rc-type em { position: absolute; right: 12px; top: 12px; font: 800 20px/1 var(--font-ui); font-style: normal; color: var(--c); }
.rc-type:hover { background: var(--panel-hi); }
.rc-type.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset; background: var(--panel-hi); }
.rc-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.rc-tab { font: 700 14px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; padding: 12px 16px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
.rc-tab.on { background: var(--panel-hi); color: #F2EAE2; border-color: var(--plywood); }
.rc-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-ttl { font: 800 17px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: #F2EAE2; }
.rc-clear { min-height: 34px; padding: 0 12px; font-size: 13px; }
.rc-search { width: 100%; min-height: 42px; background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 0 12px; font: inherit; margin-bottom: 12px; }
.rc-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.rc-it { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; background: var(--bg); border: 1px solid var(--line-soft); padding: 8px; }
.rc-it[hidden] { display: none; }
.rc-it.has { border-color: var(--plywood); background: #221d17; }
.rc-ico { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; background: #2b2621; border: 1px solid var(--line-soft); font: 800 13px var(--font-ui); color: var(--muted); }
.rc-ico img { width: 40px; height: 40px; object-fit: contain; }
.rc-it .n { font: 700 13px/1.15 var(--font-ui); text-transform: uppercase; letter-spacing: .02em; color: #E8E0D6; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.rc-q { display: flex; align-items: center; }
.rc-q button { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--panel-hi); color: var(--text); cursor: pointer; font: 700 15px/1 var(--font-ui); }
.rc-q button:hover { border-color: var(--plywood); color: var(--plywood); }
.rc-q input { width: 52px; height: 28px; text-align: center; background: var(--bg); border: 1px solid var(--line); border-left: 0; border-right: 0; color: #F2EAE2; font: 700 14px var(--font-ui); }
.rc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rc-o { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line-soft); padding: 10px 12px; }
.rc-o .rc-ico { width: 40px; height: 40px; }
.rc-o .rc-ico img { width: 36px; height: 36px; }
.rc-o b { display: block; font: 800 24px/1 var(--font-ui); color: #F2EAE2; }
.rc-o small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.rc-o--scrap { grid-column: 1 / -1; border-color: #E8C15A; background: #251f14; }
.rc-o--scrap b { font-size: 40px; color: #E8C15A; }
.rc-meta { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 4px; color: var(--muted); font-size: 14px; }
.rc-meta b { color: #F2EAE2; }
.rc-cmp { margin-top: 16px; }
.rc-cmp h3 { font: 700 13px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 10px; }
.rc-bar { display: grid; grid-template-columns: 140px 1fr 70px; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 14px; }
.rc-bar span { color: var(--text-2); }
.rc-bar i { display: block; height: 12px; background: var(--c); min-width: 2px; }
.rc-bar.on span { color: #F2EAE2; font-weight: 700; }
.rc-bar em { font-style: normal; text-align: right; font-weight: 700; color: #F2EAE2; }
.rc-empty { color: var(--muted); text-align: center; padding: 26px 10px; margin: 0; }
.rc-goal { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.rc-goal input { width: 130px; min-height: 42px; background: var(--bg); border: 1px solid var(--line); color: #F2EAE2; font: 800 20px var(--font-ui); text-align: center; }
.rc-tbl { width: 100%; border-collapse: collapse; }
.rc-tbl td { padding: 8px 6px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.rc-tbl td.num { text-align: right; font: 800 18px var(--font-ui); color: #F2EAE2; white-space: nowrap; }
.rc-tbl__i { width: 44px; }
.rc-tbl .rc-ico { width: 34px; height: 34px; } .rc-tbl .rc-ico img { width: 30px; height: 30px; }
.rc-note { margin-top: 18px; }
@media (max-width: 900px) { .rc-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rc-grid { grid-template-columns: 1fr; } .rc-bar { grid-template-columns: 110px 1fr 60px; } }

/* Kalkulator zwierząt (/hodowla-zwierzat) */
.zw-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 18px; }
.zw-seg { display: inline-flex; border: 1px solid var(--line); }
.zw-seg button { font: 700 14px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; padding: 13px 20px; background: var(--panel); color: var(--muted); border: 0; cursor: pointer; }
.zw-seg button:hover { color: var(--text); }
.zw-seg button.on { background: var(--panel-hi); color: #F2EAE2; box-shadow: inset 0 -3px 0 var(--rust); }
.zw-scan { margin-left: auto; }
.zw-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr); gap: 18px; align-items: start; }
.zw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zw-ttl { font: 800 17px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: #F2EAE2; }
.zw-pick { max-width: 55%; min-height: 34px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font: 600 13px var(--font-ui); padding: 0 8px; }
.zw-name { width: 100%; min-height: 38px; background: var(--bg); border: 1px solid var(--line-soft); color: #F2EAE2; font: 700 15px var(--font-ui); padding: 0 10px; margin-bottom: 6px; }
.zw-name:focus, .zw-hd input:focus, .zw-pick:focus { outline: 2px solid var(--plywood); outline-offset: 1px; }
.zw-dot { width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font: 800 13px/1 var(--font-ui); color: #fff; background: var(--q); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.zw-dot--lg { width: 36px; height: 36px; font-size: 17px; }
.zw-dot--sm { width: 22px; height: 22px; font-size: 11px; }
.zw-dot--h { background: #A9466E; }
.zw-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.zw-row:first-of-type { border-top: 0; }
.zw-gn b { display: block; font: 700 15px/1.15 var(--font-ui); color: #F2EAE2; text-transform: uppercase; letter-spacing: .03em; }
.zw-gn small { color: var(--muted); font-size: 12.5px; line-height: 1.3; display: block; }
.zw-q { display: inline-flex; gap: 5px; }
.zw-q button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--q); opacity: .32; cursor: pointer; padding: 0; transition: opacity .12s, transform .12s; }
.zw-q button:hover { opacity: .7; }
.zw-q button.on { opacity: 1; border-color: #F2EAE2; }
.zw-q button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.zw-hd { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.zw-hd label { font: 700 14px var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.zw-hd input { width: 70px; min-height: 40px; background: var(--bg); border: 1px solid var(--line); color: #F2EAE2; font: 800 20px var(--font-ui); text-align: center; }
.zw-god { display: flex; align-items: baseline; gap: 12px; padding: 2px 0 14px; border-bottom: 1px solid var(--line); }
.zw-god b { font: 800 44px/1 var(--font-ui); color: #9BC25A; }
.zw-god span { color: var(--muted); font-size: 14px; line-height: 1.35; }
.zw-bar { display: grid; grid-template-columns: 28px minmax(0, 1fr) 46px; gap: 10px; align-items: center; margin-top: 12px; }
.zw-bar__b { display: flex; height: 22px; background: var(--bg); overflow: hidden; }
.zw-bar__b i { display: block; height: 100%; }
.zw-bar em { font: 800 16px var(--font-ui); font-style: normal; color: #9BC25A; text-align: right; }
.zw-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: 12.5px; }
.zw-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: var(--q); vertical-align: -1px; }
.zw-warn, .zw-ok, .zw-info { margin-top: 14px; padding: 11px 13px; font-size: 14px; line-height: 1.45; }
.zw-warn { border-left: 4px solid #E8B03A; background: #2a2318; color: #EBDCC0; }
.zw-ok { border-left: 4px solid #7FA33F; background: #1e2418; color: #D7E5C0; }
.zw-info { border-left: 4px solid var(--line); background: var(--bg); color: var(--muted); }
.zw-inb-n { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; opacity: .8; }
.zw-hid { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); }
.zw-empty { color: var(--muted); text-align: center; padding: 20px 10px; margin: 0; }
.zw-herd { margin-top: 22px; }
.zw-anis { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.zw-ani { position: relative; display: flex; align-items: stretch; background: var(--bg); border: 1px solid var(--line-soft); }
.zw-ani.on { border-color: var(--plywood); background: #221d17; }
.zw-ani__b { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; text-align: left; background: none; border: 0; color: inherit; padding: 9px 4px 9px 12px; cursor: pointer; font: inherit; }
.zw-ani__b:hover b { color: var(--plywood); }
.zw-ani__b b { font: 700 15px/1.15 var(--font-ui); color: #F2EAE2; overflow-wrap: anywhere; }
.zw-ani__b small { grid-row: 2; color: var(--muted); font-size: 12.5px; }
.zw-ani .zw-dots { grid-row: 1 / 3; grid-column: 2; }
.zw-dots { display: inline-flex; gap: 4px; }
.zw-sx { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 0; }
.zw-sx button { font: 700 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; padding: 4px 7px; background: #3a2a14; color: #E8C15A; border: 0; cursor: pointer; }
.zw-sx button:hover { background: #4a3618; }
.zw-del { width: 34px; flex: none; background: none; border: 0; border-left: 1px solid var(--line-soft); color: var(--muted); font: 700 18px/1 var(--font-ui); cursor: pointer; }
.zw-del:hover { color: var(--rust-text); }
.zw-adds { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.zw-adds .btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
.zw-clear { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; transition: background .15s, color .15s; }
.zw-clear:hover { color: var(--rust-hover); }
.zw-clear--ask, .zw-clear--ask:hover { background: var(--rust); color: #fff; animation: zwAsk .35s ease; }
/* Okrąg odliczający 4 s do wygaśnięcia pytania */
.zw-ring { transform: rotate(-90deg); flex: none; }
.zw-ring circle { fill: none; stroke-width: 2.6; }
.zw-ring__bg { stroke: rgba(255, 255, 255, .25); }
.zw-ring__fg { stroke: #fff; stroke-linecap: round; stroke-dasharray: 50.27; stroke-dashoffset: 0; animation: zwRing 4s linear forwards; }
@keyframes zwRing { to { stroke-dashoffset: 50.27; } }
@media (prefers-reduced-motion: reduce) { .zw-clear--ask { animation: none; } }
@keyframes zwAsk { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.zw-undo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 9px 12px; background: var(--bg); border-left: 4px solid var(--plywood); color: var(--text); font-size: 14px; }
.zw-undo .btn { min-height: 32px; padding: 0 14px; font-size: 13px; margin-left: auto; }
.zw-h3 { font: 700 13px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 22px 0 6px; }
.zw-pairs { width: 100%; border-collapse: collapse; }
.zw-pairs th { text-align: left; font: 700 12px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; }
.zw-pairs td { padding: 10px 8px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.zw-pairs td.num { font: 800 18px var(--font-ui); color: #F2EAE2; white-space: nowrap; }
.zw-pairs tbody tr { cursor: pointer; }
.zw-pairs tbody tr:hover td, .zw-pairs tbody tr:focus-visible td { background: var(--panel-hi); }
.zw-pairs tbody tr:focus-visible { outline: 2px solid var(--plywood); outline-offset: -2px; }
.zw-pairs tr.best td { background: #1f2418; }
.zw-pairs tr.cur td:first-child { box-shadow: inset 4px 0 0 var(--plywood); }
.zw-tag { font: 700 11px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; background: #3a2a14; color: #E8C15A; white-space: nowrap; }
.zw-tag--g { background: #26331a; color: #B5D68A; }
.zw-hint { margin: 14px 0 0; }
.zw-note { margin-top: 18px; }
.zw-known { margin: 10px 0 0; padding: 9px 12px; background: #2a2318; border-left: 4px solid #E8B03A; color: #EBDCC0; font-size: 14px; }
.zw-known.on { animation: zwKnown .45s ease; }
@keyframes zwKnown { 0% { background: #5a4520; } 100% { background: #2a2318; } }
/* Rodowód w karcie rodzica */
.zw-ped { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.zw-ped__h { font: 700 13px var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 8px; }
.zw-ped__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zw-ped__f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zw-ped__f span { font: 700 12px var(--font-ui); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.zw-ped__f select { min-height: 34px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font: 600 13px var(--font-ui); padding: 0 6px; width: 100%; }
.zw-ped__sg { margin: 8px 0 0; font-size: 13.5px; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zw-ped__x { margin: 8px 0 0; padding: 7px 10px; font-size: 13px; line-height: 1.4; background: #2a1a16; border-left: 3px solid #D9583B; color: #F2C9BC; }
.zw-mini { font: 700 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; padding: 5px 9px; border: 0; cursor: pointer; background: #26331a; color: #B5D68A; }
.zw-mini:hover { background: #31431f; }
.zw-mini--no { background: var(--panel-hi); color: var(--muted); }
.zw-mini--no:hover { background: #3a332c; color: var(--text); }
/* Co dalej (pod szansą na boskie młode) */
.zw-next { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.zw-next--b { padding: 8px 10px; background: #1f2418; border-left: 3px solid #7FA33F; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Podpowiedzi rodowodu nad listą */
.zw-sug { margin-bottom: 14px; padding: 12px 14px; background: #211c15; border-left: 4px solid var(--plywood); }
.zw-sug p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.zw-sug__b { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.zw-sug__b .btn { min-height: 34px; padding: 0 14px; font-size: 13px; }
.zw-sug__l { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; }
.zw-sug__l li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--bg); font-size: 13.5px; }
.zw-sug__l li span { flex: 1; min-width: 0; }
/* Ocena zwierzęcia */
.zw-v { display: inline-block; font: 700 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; padding: 3px 6px; white-space: nowrap; }
.zw-v--keep { background: #26331a; color: #B5D68A; }
.zw-v--spare { background: var(--panel-hi); color: var(--muted); }
.zw-v--cull { background: #3a1d17; color: #F0937B; }
.zw-ani__b .zw-v { grid-row: 3; grid-column: 1; justify-self: start; margin-top: 4px; }
.zw-ani .zw-dots { grid-row: 1 / 4; }
.zw-x { color: #F0937B; }
.zw-vsum { margin: 0 0 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 700 14px var(--font-ui); color: var(--text); }
.zw-vsum .note { font: 400 13px var(--font-body); }
.zw-vnote { margin: 0 0 10px; }
.zw-grp { margin: 0 0 14px; padding-left: 10px; border-left: 3px solid var(--grc, var(--line)); }
.zw-grp--keep { --grc: #7FA33F; } .zw-grp--spare { --grc: #6b625a; } .zw-grp--cull { --grc: #C9583E; } .zw-grp--none { --grc: var(--line); }
.zw-grp__h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font: 800 14px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.zw-grp--keep .zw-grp__h span { color: #B5D68A; } .zw-grp--spare .zw-grp__h span { color: var(--text-2); } .zw-grp--cull .zw-grp__h span { color: #F0937B; } .zw-grp--none .zw-grp__h span { color: var(--muted); }
.zw-grp__h b { font: 800 13px var(--font-ui); color: var(--text); background: var(--panel-hi); padding: 2px 7px; }
.zw-grp__h small { font: 400 12.5px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.zw-sl-n { min-width: 92px; font: 700 14px/1.15 var(--font-ui); color: #F2EAE2; }
.zw-sl-n small { display: block; color: var(--muted); font: 400 12px var(--font-body); }
@media (max-width: 1100px) { .zw-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .zw-grid > .zw-res { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .zw-grid { grid-template-columns: minmax(0, 1fr); }
  .zw-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; }
  .zw-q button { width: 30px; height: 30px; }
  .zw-anis { grid-template-columns: minmax(0, 1fr); }
  .zw-c3 { display: none; }
  .zw-pick { max-width: 50%; }
}

/* Zakładka Odznaki: podsumowanie, grupy kart z postępem, dymek z poziomami */
.bs { display: grid; grid-template-columns: 1.05fr 1fr 1.25fr; background: var(--panel); border: 1px solid var(--line); }
.bs > div { min-width: 0; padding: 16px 18px; border-left: 1px solid var(--line); }
.bs > div:first-child { border-left: 0; }
.bs__k { display: block; margin-bottom: 6px; font: 700 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bs__n { font: 800 40px/1 var(--font-ui); color: var(--text); }
.bs__n small { font: 700 18px var(--font-ui); color: var(--text-3); }
.bs__seg { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; margin-top: 10px; }
.bs__seg i { height: 8px; background: var(--panel-hi); }
.bs__seg i.on { background: var(--c); }
.bs__note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-3); }
.bs__tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bs__t { text-align: center; min-width: 0; }
.bs__t svg { display: block; width: 34px; height: 38px; margin: 0 auto 2px; }
.bs__t b { font: 800 16px var(--font-ui); color: var(--text); }
.bs__t small { display: block; overflow: hidden; font: 700 9.5px var(--font-ui); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); text-overflow: ellipsis; }
.bs__t.is-zero { opacity: .35; }
.bs__near { display: grid; gap: 8px; }
.bs__near > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
.bs__near b { overflow: hidden; font: 700 14px var(--font-ui); letter-spacing: .03em; text-transform: uppercase; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.bs__near span { font-size: 12.5px; color: var(--text-3); text-align: right; white-space: nowrap; }
.bs__near em { position: relative; grid-column: 1 / -1; height: 5px; background: var(--panel-hi); }
.bs__near em i { position: absolute; inset: 0 auto 0 0; background: var(--c); }
.bh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 0; }
.bh .note { margin: 0; }
.bh .bdg-tabs { margin: 0; }
.bc-cnt { font: 600 14px var(--font-body); text-transform: none; color: var(--muted); }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr)); gap: 8px; margin-top: 8px; }
.bc { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px 12px 12px; background: var(--panel); border: 1px solid var(--line); transition: border-color .15s; }
.bc:hover, .bc:focus-visible { border-color: color-mix(in srgb, var(--c) 70%, var(--line)); outline: none; }
.bc__img { position: relative; width: 58px; height: 65px; }
.bc__img svg { display: block; width: 100%; height: 100%; }
.bc__b { min-width: 0; }
.bc__name { margin: 0; padding-right: 24px; font: 800 16px/1.1 var(--font-ui); letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.bc__row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.bc__tier { padding: 2px 6px; font: 800 10.5px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #14110F; background: var(--c); white-space: nowrap; }
.bc__no { font-size: 12px; color: var(--muted); }
.bc__pips { display: flex; gap: 3px; }
.bc__pips i { width: 9px; height: 10px; background: var(--panel-hi); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.bc__pips i.on { background: var(--pc); }
.bc__bar { position: relative; height: 5px; margin-top: 8px; background: var(--panel-hi); }
.bc__bar i { position: absolute; inset: 0 auto 0 0; background: var(--nc); }
.bc__meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bc__meta b { font-weight: 600; color: var(--text-2); }
.bc__meta--max { margin-top: 8px; }
.bc.is-lock .bc__img { opacity: .55; filter: grayscale(.6); }
.bc.is-lock .bc__name { color: var(--text-2); }
.bc.is-max { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, var(--panel)), var(--panel) 60%); }
.bc__new { position: absolute; top: -1px; left: 12px; z-index: 1; padding: 2px 6px; font: 800 10px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #10140A; background: var(--online); }
.bc__star { all: unset; box-sizing: border-box; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid transparent; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; }
.bc__star svg { width: 16px; height: 16px; }
.bc__star:hover { color: #E8C15A; }
.bc__star:focus-visible { outline: 2px solid var(--plywood); }
.bc__star.on { color: #E8C15A; border-color: color-mix(in srgb, #E8C15A 45%, transparent); background: color-mix(in srgb, #E8C15A 12%, transparent); }
.bc__star:disabled { opacity: .5; cursor: wait; }
.ptip__lad { display: grid; margin: 2px 0 0; padding: 0; list-style: none; }
.ptip__lad li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.ptip__lad li i { width: 10px; height: 11px; background: var(--c); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ptip__lad li b { font: 700 12.5px var(--font-ui); text-transform: uppercase; color: var(--text); }
.ptip__lad li span { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptip__lad li.no { opacity: .45; }
.ptip__lad li.next { opacity: 1; }
.ptip__lad li.next span { color: var(--text); }
@media (max-width: 760px) {
  .bs { grid-template-columns: 1fr; }
  .bs > div { border-left: 0; border-top: 1px solid var(--line); }
  .bs > div:first-child { border-top: 0; }
}
/* Profil → Czasy: sekcja na rodzaj, karta na poziom (kolor poziomu), wiersz na drużynę */
.tk-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 22px 0 8px; }
.tk-h .prof-group { margin: 0; }
.tk-h small { font-size: 13px; color: var(--muted); }
.tk-h small b { color: #E8C15A; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.tc { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--tc); }
.tc__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 6px; }
.tc__h b { font: 800 17px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--tc); }
.tc__crown { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; font: 800 10.5px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #1A1512; background: #E8C15A; }
.tc__crown svg { width: 12px; height: 12px; }
.tr { padding: 8px 12px 10px; border-top: 1px solid var(--line-soft); }
.tr__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tr__g { font: 700 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tr__pos { font: 800 13px var(--font-ui); color: var(--text-3); white-space: nowrap; }
.tr__pos.p1 { color: #E8C15A; }
.tr__pos.p2 { color: #C9CDD2; }
.tr__pos.p3 { color: #D08A4E; }
.tr__t { display: block; margin-top: 2px; font: 800 30px/1.05 var(--font-ui); color: var(--text); font-variant-numeric: tabular-nums; }
.tr__gap { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.tr__gap b { font-weight: 600; color: var(--rust-text); }
.tr__gap.rec { font-weight: 600; color: #E8C15A; }
.tr__bar { position: relative; height: 5px; margin-top: 7px; background: var(--panel-hi); }
.tr__bar i { position: absolute; inset: 0 auto 0 0; background: var(--tc); }
.tr__with { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }
.tr__with a { color: var(--text-2); }
.tr__ss { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.tc.is-none { background: transparent; border-style: dashed; border-top-color: var(--line); }
.tc.is-none .tc__h b { color: var(--muted); }
.tc__goal { padding: 6px 12px 12px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.tc__goal b { display: block; font: 800 20px var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.tk-note { margin-top: 14px; }
@media (max-width: 600px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr__t { font-size: 24px; } .tc__h { flex-wrap: wrap; gap: 4px 8px; } .tc__h b { font-size: 15px; } }
/* Poradnik „Elektryka w Rust” (/elektryka): kafelki układów, otwarty poradnik ze schematem, powiększanie */
.el-basics { margin: 14px 0 16px; padding: 0; }
.el-basics summary { cursor: pointer; padding: 12px 16px; font: 800 14px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--plywood); }
.el-basics ul { margin: 0; padding: 0 18px 14px 34px; display: grid; gap: 6px; font-size: 14px; color: var(--text-2); }
.el-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.el-t { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; color: inherit; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c); transition: border-color .15s, background .15s; }
.el-t:hover, .el-t:focus-visible { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); outline: none; }
.el-t.on { background: var(--panel-head); border-color: var(--c); }
.el-t__ic { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: var(--c); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.el-t__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.el-t__b { min-width: 0; }
.el-t__b b { display: block; font: 800 16px/1.15 var(--font-ui); letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.el-t__b > span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--text-3); }
.el-t__b small { display: inline-block; margin-top: 8px; font: 700 10.5px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.el-g { margin-top: 18px; scroll-margin-top: 80px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.el-g__h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.el-g__h > div:first-child { flex: 1 1 420px; min-width: 0; }
.el-g__no { margin: 0 0 4px; font: 700 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.el-g__h h2 { margin: 0; font: 800 26px/1.1 var(--font-ui); text-transform: uppercase; }
.el-g__h p:last-child { margin: 6px 0 0; max-width: 780px; color: var(--text-2); }
.el-g__kpi { display: flex; border: 1px solid var(--line); }
.el-g__kpi div { padding: 8px 14px; text-align: center; border-left: 1px solid var(--line); }
.el-g__kpi div:first-child { border-left: 0; }
.el-g__kpi small { display: block; font: 700 10px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.el-g__kpi b { font: 800 20px var(--font-ui); color: var(--text); white-space: nowrap; }
.el-g__body, .el-low { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
.el-low { border-top: 1px solid var(--line); }
.el-sch { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 12px; border-right: 1px solid var(--line); background-color: #171411; background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px); background-size: 24px 24px; }
.el-sch__in { all: unset; display: block; width: 100%; cursor: zoom-in; }
.el-sch__in:focus-visible { outline: 2px solid var(--plywood); }
.el-svg { display: block; width: 100%; height: auto; }
.el-sch__zoom { position: absolute; right: 12px; bottom: 12px; padding: 6px 10px; font: 700 12px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text); background: var(--panel-head); border: 1px solid var(--line); cursor: pointer; }
.el-sch__zoom:hover { border-color: var(--plywood); }
.el-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-height: 31px; margin-top: auto; padding: 10px 120px 0 0; font-size: 12.5px; color: var(--text-3); }
.el-leg i { display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; background: #E8C15A; }
.el-leg i.s { background: repeating-linear-gradient(90deg, #5FA8E0 0 6px, transparent 6px 10px); }
.el-leg b { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border: 2px solid #6f6760; border-radius: 50%; }
.el-leg b.on { border-color: #C9A57A; background: #C9A57A; }
/* elementy schematu (SVG) */
.el-svg .el-w { fill: none; stroke: #E8C15A; stroke-width: 3; stroke-linejoin: round; transition: stroke-width .12s; }
.el-svg .el-w--s { stroke: #5FA8E0; stroke-dasharray: 8 5; }
.el-svg .el-w.hl { stroke-width: 6; }
.el-svg .el-n__b { fill: #221E1A; stroke: #3A332C; }
.el-svg .el-n__t { font: 700 14px "Roboto Condensed", "Arial Narrow", sans-serif; letter-spacing: .02em; fill: #F2EAE2; }
.el-svg .el-n__ib { fill: #2C2620; stroke: #3A332C; }
.el-svg .el-n__e { font: 400 11px Roboto, Arial, sans-serif; fill: #8C8178; }
.el-svg .el-p { stroke-width: 2; }
.el-svg .el-p--in { fill: #141210; stroke: #C9A57A; }
.el-svg .el-p--out { fill: #C9A57A; stroke: #C9A57A; }
.el-svg .el-p.off { fill: #141210; stroke: #4A433C; }
.el-svg .el-p__t { font: 400 13.5px Roboto, Arial, sans-serif; fill: #D6CEC6; }
.el-svg .el-p__t.off { fill: #6F6760; }
.el-svg .el-num circle { fill: #E8C15A; stroke: #141210; stroke-width: 2; }
.el-svg .el-num text { font: 800 13px "Roboto Condensed", Arial, sans-serif; fill: #1A1512; }
.el-svg .el-num--s circle { fill: #5FA8E0; }
.el-svg .el-num.hl circle { stroke: #fff; }
.el-side, .el-err, .el-steps-w { min-width: 0; padding: 14px 18px; }
.el-steps-w { border-right: 1px solid var(--line); }
.el-g h3 { margin: 0 0 8px; font: 800 14px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--plywood); }
.el-items { list-style: none; margin: 0 0 16px; padding: 0; }
.el-items li { display: grid; grid-template-columns: 30px 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.el-items li:first-child { border-top: 0; }
.el-items b { font: 800 16px var(--font-ui); color: #E8C15A; text-align: right; }
.el-items span { font-size: 14px; color: var(--text); }
.el-items small { display: block; font-size: 12px; color: var(--muted); }
.el-it__i { width: 40px; height: 40px; display: grid; place-items: center; background: var(--panel-hi); border: 1px solid var(--line); }
.el-it__i img { display: block; width: 36px; height: 36px; object-fit: contain; }
.el-set { margin: 0; display: grid; }
.el-set > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.el-set dt { color: var(--text-3); }
.el-set dd { margin: 0; font: 700 13.5px var(--font-ui); color: var(--text); text-align: right; }
.el-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.el-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.el-steps li { position: relative; padding: 8px 0 8px 40px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--text-2); transition: background .12s; }
.el-steps li:first-child { border-top: 0; }
.el-steps li:not(.el-st--w)::before { content: "•"; position: absolute; left: 10px; top: 7px; font-size: 18px; color: var(--muted); }
.el-st__n { position: absolute; left: 0; top: 7px; width: 26px; height: 26px; display: grid; place-items: center; font: 800 13px var(--font-ui); color: #1A1512; background: #E8C15A; border-radius: 50%; }
.el-st__n--s { background: #5FA8E0; }
.el-steps li.hl { background: color-mix(in srgb, #E8C15A 8%, transparent); }
.el-steps code { padding: 1px 6px; font: 700 12.5px var(--font-ui); letter-spacing: .02em; color: var(--text); background: var(--panel-hi); overflow-wrap: anywhere; }
.el-err div { padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.el-err div:first-of-type { border-top: 0; }
.el-err b { display: block; font-weight: 600; color: var(--rust-text); }
.el-err span { color: var(--text-3); }
.el-todo { margin: 10px 0 0; padding: 8px 12px; font-size: 13px; color: var(--text-2); background: color-mix(in srgb, #E8C15A 8%, transparent); border-left: 3px solid #E8C15A; }
.el-src { margin: 0; padding: 10px 20px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.el-src b { color: var(--text-3); }
.el-src a { color: var(--text-3); }
.el-foot { margin-top: 18px; }
/* powiększony schemat */
body.el-zm-open { overflow: hidden; }
.el-zm { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: rgba(10, 9, 8, .97); }
.el-zm__bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.el-zm__bar b { overflow: hidden; font: 800 15px var(--font-ui); text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.el-zm__bar span { display: flex; gap: 6px; flex: none; }
.el-zm__bar button { min-width: 38px; height: 36px; padding: 0 10px; font: 700 15px var(--font-ui); color: var(--text); background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.el-zm__v { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; background-color: #171411; background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px); background-size: 24px 24px; }
.el-zm__v:active { cursor: grabbing; }
.el-zm__c { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.el-zm__hint { position: absolute; left: 50%; bottom: 14px; margin: 0; padding: 6px 12px; transform: translateX(-50%); font-size: 12.5px; color: var(--text-2); background: rgba(20, 18, 16, .9); border: 1px solid var(--line); max-width: calc(100% - 24px); text-align: center; pointer-events: none; animation: el-hint 5s forwards; }
@keyframes el-hint { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 900px) {
  .el-g__body, .el-low { grid-template-columns: 1fr; }
  .el-sch, .el-steps-w { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .el-g__h { padding: 14px 14px 12px; }
  .el-g__h h2 { font-size: 21px; }
  .el-side, .el-err, .el-steps-w { padding: 12px 14px; }
  .el-leg { padding-right: 0; padding-bottom: 34px; }
}
/* Dymki kalkulatora zwierząt */
.zw-tip__v { margin: 0; font-size: 12.5px; color: var(--text-2); }
.zw-tip__v .zw-v { margin-right: 4px; vertical-align: 1px; }
.zw-tip__g { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.zw-tip__g span { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; font: 600 12.5px var(--font-ui); color: var(--text); }
.zw-tip__g i { grid-row: 1 / 3; font-style: normal; }
.zw-tip__g small { font: 400 11.5px var(--font-body); color: var(--muted); }
.zw-tip__p { margin: 0; font-size: 12.5px; color: var(--text-2); }
.zw-tip__p.zw-x { color: #F0937B; }
/* Profil: podium rankingu punktowego (miejsca 1–3) */
@property --ra { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pc__avw { position: relative; display: inline-block; line-height: 0; }
.pc__avw::before { content: ""; position: absolute; inset: -6px; background: conic-gradient(from var(--ra), var(--tc), color-mix(in srgb, var(--tc) 15%, transparent) 25%, var(--tc) 50%, color-mix(in srgb, var(--tc) 15%, transparent) 75%, var(--tc)); animation: pc-ring 4s linear infinite; }
.pc__avw::after { content: ""; position: absolute; inset: -6px; box-shadow: 0 0 22px color-mix(in srgb, var(--tc) 55%, transparent); animation: pc-glow 2.4s ease-in-out infinite alternate; pointer-events: none; }
.pc__avw .ph__av { border-color: var(--tc); box-shadow: none; }
.pc__pod { align-self: center; width: auto; max-width: 100%; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 2px; padding: 4px 10px; font: 800 12px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: #1A1512; text-decoration: none; background: linear-gradient(110deg, var(--tc) 40%, color-mix(in srgb, var(--tc) 40%, #fff) 50%, var(--tc) 60%) 0 0 / 250% 100%; animation: pc-shine 3.5s linear infinite; }
.pc__pod svg { width: 14px; height: 14px; }
.pc__pod:hover { color: #000; }
@keyframes pc-ring { to { --ra: 360deg; } }
@keyframes pc-glow { from { opacity: .35; } to { opacity: 1; } }
@keyframes pc-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .pc__avw::before, .pc__avw::after, .pc__pod { animation: none; } }
/* Kalkulator genów: dłuższa lista klonów w dwóch kolumnach (numeracja w dół), gdy karta jest dość szeroka */
.br-card > .panel__body { container-type: inline-size; }
@container (min-width: 540px) {
  .br-list--2 { columns: 2; column-gap: 24px; column-rule: 1px solid var(--line-soft); }
  .br-list--2 li { break-inside: avoid; gap: 8px; }
  .br-list--2 .br-n { width: 28px; }
  .br-list--2 .br-ut { display: none; }
  .br-list--2 li.br-useless .br-sc { margin-left: auto; }
}
/* ======================= Kreator schematów elektryki (elec-editor.js) ======================= */
.ek { --ek-h: min(72vh, 760px); }
.ek-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ek-bar h1 { margin: 0; }
.ek-bar__a { display: flex; gap: 8px; flex-wrap: wrap; }
.ek-small { display: none; padding: 16px; }
.ek-main { display: grid; grid-template-columns: 250px minmax(0, 1fr) 290px; gap: 12px; align-items: stretch; }
.ek-pal, .ek-side { height: var(--ek-h); display: flex; flex-direction: column; overflow: hidden; }
.ek-pal__h { padding: 10px; border-bottom: 1px solid var(--line); }
.ek-pal__h input { width: 100%; }
.ek-pal__h .note { margin: 6px 0 0; font-size: 12px; }
.ek-pal__l { overflow: auto; padding: 4px 6px 10px; }
.ek-cat summary { cursor: pointer; padding: 8px 4px 4px; font: 800 12px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--plywood); }
.ek-cat summary small { color: var(--muted); font-weight: 600; }
.ek-cat__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 2px 0 6px; }
.ek-dev { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%; padding: 10px; background: var(--bg); border: 1px solid var(--line); cursor: grab; touch-action: none; user-select: none; }
.ek-dev:hover, .ek-dev:focus-visible { border-color: var(--plywood); background: var(--panel-hi); outline: none; }
.ek-ic { display: block; width: 34px; height: 34px; background: #2C2620; }
.ek-ic img { display: block; width: 100%; height: 100%; }
.ek-ic--l { width: 44px; height: 44px; flex: none; }
.ek-items .ek-ic { width: 28px; height: 28px; }
.ek-dev .ek-ic { width: 100%; height: 100%; background: none; }
.ek-dev .ek-ic img { object-fit: contain; }
.ek-dev[hidden] { display: none; }
/* Ikona się nie wczytała (usunięta przez dropBroken): zamiast pustego kafelka nazwa urządzenia */
.ek-dev__n { display: none; font: 700 12px/1.2 var(--font-ui); color: var(--text-2); text-align: center; }
.ek-dev .ek-ic:empty { display: none; }
.ek-dev .ek-ic:empty + .ek-dev__n { display: block; }
.ek-ghost { position: fixed; z-index: 1100; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--plywood); color: var(--text); font: 700 13px var(--font-ui); pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.ek-cv { height: var(--ek-h); display: flex; flex-direction: column; min-width: 0; }
.ek-cv__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ek-cv__hint { font-size: 12.5px; color: var(--text-3); }
.ek-zoom { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.ek-zoom button { min-width: 30px; height: 30px; padding: 0 8px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font: 700 13px var(--font-ui); cursor: pointer; }
.ek-zoom b { min-width: 44px; text-align: center; font: 700 12px var(--font-ui); color: var(--muted); }
.ek-vp { position: relative; flex: 1; overflow: auto; background: #151311; cursor: grab; }
.ek-vp:active { cursor: grabbing; }
.ek-world { display: inline-block; touch-action: none; user-select: none; }
.ek-svg { width: auto; max-width: none; }
.ek-svg .ek-n { cursor: move; }
.ek-svg .ek-n.on .el-n__b { stroke: #E8C15A; stroke-width: 2; }
.ek-svg .ek-port { cursor: crosshair; }
.ek-svg .ek-ph { fill: transparent; }
.ek-svg .ek-port:hover .el-p { stroke: #fff; fill: #E8C15A; }
.ek-svg .el-p.pend { fill: #E8C15A; stroke: #fff; stroke-width: 3; }
.ek-svg .ek-wh { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.ek-svg .el-num { cursor: pointer; }
.ek-svg .ek-rub { fill: none; stroke: #E8C15A; stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
.ek-svg .ek-del { cursor: pointer; }
.ek-svg .ek-del rect { fill: #A8341E; }
.ek-svg .ek-del text { font: 800 16px var(--font-ui); fill: #fff; }
.ek-leg { margin: 0; padding: 8px 10px; border-top: 1px solid var(--line); }
.ek-side { overflow: auto; padding: 12px 14px; }
.ek-h { margin: 14px 0 8px; font: 800 13px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--plywood); }
.ek-h:first-child { margin-top: 0; }
.ek-h small { letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--muted); }
.ek-help { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--text-2); }
.ek-help li { margin-bottom: 8px; }
.ek-si { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ek-si b { display: block; font: 700 15px var(--font-ui); }
.ek-si small { color: var(--muted); font-size: 12px; }
.ek-f { display: block; margin: 0 0 10px; }
.ek-f > span { display: block; margin-bottom: 4px; font: 700 12px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ek-f small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.ek input[type=search], .ek-f input, .ek-f textarea, .ek-f select { width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font: 400 14px var(--font-body); border-radius: 0; }
.ek input:focus, .ek textarea:focus, .ek select:focus { outline: none; border-color: var(--plywood); }
.ek-f textarea { resize: vertical; line-height: 1.45; }
.ek-f--s select { width: auto; }
.ek-dl { margin-bottom: 8px; }
.ek-pl { margin: 8px 0 4px; font: 700 12px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ek-ports { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ek-ports li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px solid var(--line-soft); }
.ek-ports small { color: var(--muted); }
.ek-ports .ek-ok { color: #B5D68A; }
.ek-rm { margin-top: 12px; width: 100%; }
.ek-wire { font-size: 13px; line-height: 1.6; }
.ek-seg { display: flex; margin-bottom: 10px; }
.ek-seg button { flex: 1; }
.ek-chk { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ek-chk li { position: relative; padding: 5px 0 5px 18px; border-top: 1px solid var(--line-soft); }
.ek-chk li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px; border-radius: 50%; }
.ek-chk .bad { color: #F0937B; } .ek-chk .bad::before { background: #C9583E; }
.ek-chk .warn { color: #E8C15A; } .ek-chk .warn::before { background: #E8C15A; }
.ek-chk .ok { color: #B5D68A; } .ek-chk .ok::before { background: #7FA33F; }
.ek-tiny { font-size: 11.5px; margin: 0 0 4px; }
.ek-low { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
.ek-low > .panel { padding: 14px 16px; }
#ek-st { list-style: none; margin: 0 0 6px; padding: 0; }
#ek-st li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--line-soft); font-size: 13.5px; cursor: pointer; }
#ek-st li.on { background: rgba(232, 193, 90, .08); }
#ek-st .el-st__n { position: static; }
#ek-st code { font-size: 12.5px; }
.ek-mv { display: inline-flex; gap: 2px; }
.ek-mv button { width: 26px; height: 26px; background: var(--bg); border: 1px solid var(--line); color: var(--text-2); cursor: pointer; }
.ek-mv button:disabled { opacity: .35; cursor: default; }
.ek-items { list-style: none; margin: 0; padding: 0; }
.ek-items li { display: grid; grid-template-columns: 30px 28px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.ek-items b { font: 800 14px var(--font-ui); color: #E8C15A; text-align: right; }
.ek-items small { display: block; font-size: 11.5px; color: var(--muted); }
/* Pusta lista (kroki, przedmioty): zwykły akapit, nie wiersz siatki z kolumną na numer */
#ek-st li.ek-empty, .ek-items li.ek-empty { display: block; padding: 8px 0; color: var(--muted); font-size: 13px; cursor: default; }
.ek-msg { position: fixed; left: 50%; bottom: 24px; z-index: 1200; max-width: min(560px, 90vw); padding: 10px 16px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid #7FA33F; color: var(--text); font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .2s; }
.ek-msg.on { transform: translate(-50%, 0); opacity: 1; }
.ek-msg.bad { border-left-color: #C9583E; }
.ek-pv { position: fixed; inset: 0; z-index: 1000; overflow: auto; padding: 24px; background: rgba(10, 9, 8, .92); }
.ek-pv__in { max-width: 1180px; margin: 0 auto; }
.ek-pv__bar { position: sticky; top: -24px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -24px 0 14px; padding: 14px 0; background: rgba(10, 9, 8, .96); }
@media (max-width: 1200px) { .ek-main { grid-template-columns: 220px minmax(0, 1fr); } .ek-side { grid-column: 1 / -1; height: auto; max-height: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .ek-side .ek-h:first-child { margin-top: 0; } }
@media (max-width: 899px) { .ek-small { display: block; } .ek-main, .ek-low, .ek-bar__a { display: none; } }
.wrap.wrap--wide { max-width: 1760px; }
.ek-login { max-width: 640px; padding: 20px 22px; }
.ek-login p { margin: 0 0 12px; color: var(--text-2); }
.ek-sent { margin-bottom: 14px; padding: 14px 16px; border-left: 4px solid #7FA33F; color: var(--text-2); }
.ek-sent b { color: var(--text); }
.el-users { margin: 26px 0 0; }
.el-users__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.el-users__h h2 { margin: 0 0 4px; }
.el-users__h p { margin: 0; color: var(--text-3); font-size: 14px; }
.el-by { margin-top: 6px; }
.el-by a { color: var(--plywood); }
/* Panel: schematy elektryki od graczy */
.ela__body { padding: 14px; display: grid; gap: 12px; }
.ela__f { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(140px, 1fr); gap: 12px; }
.ela__f .ela__w { grid-column: 1 / -1; }
.ela__f input, .ela__f select, .ela__f textarea { width: 100%; padding: 9px 11px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font: 400 14px var(--font-body); border-radius: 0; }
.ela__f input:focus, .ela__f select:focus, .ela__f textarea:focus { outline: none; border-color: var(--plywood); }
.ela__f textarea { resize: vertical; line-height: 1.45; }
.ela__pv { border: 1px solid var(--line); background: var(--bg); }
.ela__pv > summary { cursor: pointer; padding: 10px 14px; font: 700 12px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--plywood); }
.ela__pv[open] > summary { border-bottom: 1px solid var(--line); }
.ela__pv > .el { max-height: 620px; overflow: auto; }
.ela__pv .el-g { margin: 0; border: 0; }
.ela__pv .el-sch__zoom { display: none; }
.ela__pv .el-sch__in { cursor: default; }
@media (max-width: 760px) { .ela__f { grid-template-columns: 1fr; } }
/* Beta testy narzędzi */
.beta-tag { display: inline-block; padding: 2px 6px; font: 800 10px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #1A1512; background: #5FA8E0; vertical-align: 2px; }
.beta-bar { background: #16222C; border-bottom: 1px solid #2B4558; color: #C9DCEA; font-size: 14px; }
.beta-bar .wrap { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.beta-bar b { color: #fff; }
.beta-list { list-style: none; margin: 0 0 10px; padding: 0; }
.beta-list li { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.beta-list code { color: var(--muted); font-size: 12px; }
.beta-list .btn { margin-left: auto; }
.beta-add { display: flex; gap: 8px; flex-wrap: wrap; }
.beta-add input { flex: 1; min-width: 220px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font: 14px var(--font-body); }
/* Kreator: ręczne prowadzenie przewodów */
.ek-mode { flex: none; margin-left: auto; }
.ek-mode button { min-height: 30px; padding: 0 10px; font-size: 11.5px; }
.ek-svg .ek-bend { fill: #E8C15A; stroke: #1A1512; stroke-width: 2; cursor: move; }
.ek-svg .ek-bend--p { fill: #E8C15A; stroke: none; cursor: default; pointer-events: none; }
.ek-cv__bar { flex-wrap: wrap; }
.ek-svg .el-w { pointer-events: none; }
/* Kolory przewodów (jak w Wire Tool w grze) */
.el-svg .el-w.el-w--c { stroke: var(--wc); }
.el-svg .el-num--c circle { fill: var(--wc); }
.el-svg .el-num--c text { fill: var(--wt); }
.el-st__n.el-st__n--c { background: var(--wc); color: var(--wt); }
.ek-cols { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ek-col { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #1A1512; background: var(--wc); cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.ek-col.on { box-shadow: 0 0 0 2px #fff; }
.ek-col--def { background: conic-gradient(#E8C15A 0 50%, #5FA8E0 0 100%); }
/* Panel: kreator schematów (edycja poradników i schematów graczy) */
.ek-adm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ek-adm-bar .help { margin: 0; flex: 1; min-width: 260px; }
.ek-host .ek-main { grid-template-columns: 200px minmax(0, 1fr) 260px; }
.beta-list li > span { flex: 1; min-width: 0; }
/* Kreator: pełny ekran — tylko przybornik, plansza i panel boczny (opis, kroki i przyciski z góry są w zwykłym widoku) */
.ek-fs { display: inline-flex; align-items: center; gap: 6px; }
.ek-fs-x { display: none !important; }
.ek.ek--full { position: fixed; inset: 0; z-index: 1050; padding: 8px; background: var(--bg); --ek-h: calc(100vh - 16px); overflow: hidden; }
.ek.ek--full .ek-bar, .ek.ek--full .ek-low { display: none; }
.ek.ek--full .ek-main { grid-template-columns: 230px minmax(0, 1fr) 290px; gap: 8px; }
.ek.ek--full .ek-fs-x { display: inline-block !important; margin-right: 6px; color: #F0937B !important; }
body.ek-full-open { overflow: hidden; }
/* Kreator: opcje planszy (porty, prowadzenie przewodów) */
.ek-cv__opts { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
.ek-opt { display: flex; align-items: center; gap: 10px; }
.ek-opt > span { font: 700 11.5px var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.ek-sw { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.ek-sw button { padding: 5px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); font: 700 12.5px var(--font-ui); letter-spacing: .03em; cursor: pointer; transition: background .15s, color .15s; }
.ek-sw button:hover { color: var(--text); }
.ek-sw button.on { background: #E8C15A; color: #1A1512; }
.ek-sw button:focus-visible { outline: 2px solid #E8C15A; outline-offset: 1px; }
/* Elektryka: węże (woda) i rury (przedmioty) */
.el-svg .el-w.el-w--h { stroke: #3E8FD6; stroke-width: 6; stroke-linecap: round; }
.el-svg .el-w-in { fill: none; stroke: #A9D8FF; stroke-width: 1.6; stroke-linejoin: round; pointer-events: none; opacity: .8; }
.el-svg .el-w.el-w--i { stroke: #8F8A84; stroke-width: 6; }
.el-svg .el-w.el-w--h.el-w--c, .el-svg .el-w.el-w--i.el-w--c { stroke: var(--wc); }
.el-svg .el-arr { fill: #EDE6DC; stroke: #1A1512; stroke-width: 1.4; stroke-linejoin: round; pointer-events: none; }
.el-svg .el-p--w { stroke: #3E8FD6; }
.el-svg .el-p--w.el-p--out { fill: #3E8FD6; }
.el-svg .el-p--w.el-p--in { fill: #0E1C28; }
.el-svg .el-p--i { stroke: #D08A4E; }
.el-svg .el-p--i.el-p--out { fill: #D08A4E; }
.el-svg .el-p--i.el-p--in { fill: #24180E; }
.el-svg .el-p--w.off, .el-svg .el-p--i.off { fill: #141210; opacity: .75; }
.el-leg i.h { height: 5px; background: #3E8FD6; box-shadow: inset 0 0 0 1.5px #3E8FD6, inset 0 -2px 0 #A9D8FF; }
.el-leg i.i { height: 5px; background: #8F8A84; }
.el-leg b.w { border-color: #3E8FD6; }
.el-leg b.i { border-color: #D08A4E; border-radius: 0; transform: rotate(45deg) scale(.85); }
.el-st__k { display: inline-block; margin-right: 6px; padding: 1px 6px; font: 700 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #3E8FD6; vertical-align: 1px; }
.el-st__k--i { background: #8F8A84; color: #1A1512; }
.el-svg .el-w.el-w--h.hl, .el-svg .el-w.el-w--i.hl { stroke-width: 9; }
.el-svg .el-arrs--c .el-arr { fill: var(--wt); }
.el-svg .el-num--h circle { fill: #3E8FD6; }
.el-svg .el-num--h text { fill: #fff; }
.el-svg .el-num--i circle { fill: #8F8A84; }
/* Kreator: narzędzie (kabel / wąż / rura) */
.ek-sw--tool button { display: inline-flex; align-items: center; gap: 6px; }
.ek-ti { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #E8C15A; }
.ek-ti--w { background: #3E8FD6; }
.ek-ti--i { background: #D08A4E; border-radius: 0; transform: rotate(45deg) scale(.85); }
.ek-sw--tool button.on .ek-ti { box-shadow: 0 0 0 1.5px #1A1512; }
.ek-sw--tool button[data-tool="w"].on { background: #3E8FD6; color: #fff; }
.ek-sw--tool button[data-tool="i"].on { background: #D08A4E; color: #1A1512; }
.ek-svg .ek-port--dim { opacity: .28; }
.ek-svg .ek-port--dim:hover { opacity: .8; }
.ek-svg .el-w.dim, .ek-svg .el-w.dim + .el-w-in, .ek-svg .el-w.dim + .el-arrs { opacity: .45; }
.ek-ports li { justify-content: flex-start; align-items: center; }
.ek-ports li small { margin-left: auto; }
.ek-ports .ek-ti { margin-right: 4px; }
.ek-h__t { font: 600 12px var(--font-ui); color: var(--text-3); letter-spacing: .04em; text-transform: none; }
.ek-sw--tool button[data-tool="w"].on .ek-ti--w { background: #fff; box-shadow: none; }
/* Elektryka: ustawienia w grze (plakietki, moc przy Branch Out, łącze radiowe) */
.el-svg .el-pill rect { fill: #E8C15A; stroke: #141210; stroke-width: 1.5; }
.el-svg .el-pill text { font: 800 12px "Roboto Condensed", Arial, sans-serif; fill: #1A1512; }
.el-svg .el-pill--timer rect { fill: #8FB85A; }
.el-svg .el-pill--counter rect { fill: #D08A4E; }
.el-svg .el-pill--rfb rect, .el-svg .el-pill--rfr rect, .el-svg .el-pill--rfl rect { fill: #B07CD8; }
.el-svg .el-pill--clock rect { fill: #5FA8E0; }
.el-svg .el-pill--hbhf rect { fill: #E07A9E; }
.el-svg .el-cfgw { font: 800 12.5px "Roboto Condensed", Arial, sans-serif; fill: #E8C15A; paint-order: stroke; stroke: #141210; stroke-width: 3px; }
.el-svg .el-rf { fill: none; stroke: #B07CD8; stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .9; }
.el-st__k--cfg { background: #B07CD8; color: #1A1512; }
.ek-st--cfg { display: flex; align-items: baseline; gap: 6px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
/* Kreator: okienko ustawień */
.ek-cv { position: relative; }
.ek-pop { position: absolute; z-index: 30; width: 300px; padding: 14px 14px 10px; background: #1D1A16; border: 1px solid #E8C15A; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.ek-pop:before { content: ""; position: absolute; left: var(--ax, 30px); top: -8px; width: 14px; height: 14px; background: #1D1A16; border-left: 1px solid #E8C15A; border-top: 1px solid #E8C15A; transform: rotate(45deg); }
.ek-pop.up:before { top: auto; bottom: -8px; transform: rotate(225deg); }
.ek-pop__h { margin: 0; font: 800 14px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #E8C15A; }
.ek-pop__s { margin: 2px 0 10px; font-size: 12px; color: var(--text-3); }
.ek-pop__n { font-size: 13px; color: var(--text-3); margin: 0 0 8px; }
.ek-pf { display: block; margin: 0 0 10px; }
.ek-pf > span { display: block; margin-bottom: 4px; font: 700 11.5px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ek-pf small { display: block; margin-top: 4px; font-size: 12px; color: var(--text-3); line-height: 1.35; }
.ek-pin { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--line); }
.ek-pin:focus-within { border-color: #E8C15A; }
.ek-pin input { flex: 1; min-width: 0; padding: 7px 10px; background: none; border: 0; color: var(--text); font: 700 16px var(--font-ui); outline: 0; }
.ek-pin em { padding: 0 10px; font-style: normal; font-weight: 700; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.ek-pop .ek-sw button { padding: 5px 10px; }
.ek-pop__err { margin: 0; min-height: 0; font-size: 12.5px; color: #E07A5F; }
.ek-pop__err:not(:empty) { margin-bottom: 8px; }
.ek-pop__b { display: flex; gap: 6px; justify-content: flex-end; }
.ek-pop__b .btn { padding: 7px 12px; font-size: 12px; }
.ek-pop__k { margin: 8px 0 0; font-size: 11.5px; color: #6f6760; }
.ek-cfg { margin-top: 10px; }
.ek-cfg__v { margin: 0 0 6px; font-weight: 700; color: #E8C15A; }
.ek-cfg__v small { font-weight: 400; color: var(--text-3); }
.el-st__k { white-space: nowrap; flex: none; }
/* Elektryka: urządzenia z wyglądem z gry (obrazek, porty w miejscach z gry, nazwy po najechaniu) */
.el-svg .el-n__g { fill: transparent; stroke: transparent; stroke-width: 1.5; stroke-dasharray: 4 4; }
.el-svg .el-n--g:hover .el-n__g, .el-svg .el-n--g:focus .el-n__g { stroke: #5A5046; }
.ek-svg .ek-n.el-n--g.on .el-n__g { stroke: #E8C15A; stroke-dasharray: none; }
.el-svg .el-n--g { outline: none; }
.el-svg .el-hv { opacity: 0; pointer-events: none; transition: opacity .12s; }
.el-svg .el-hv.hov, .el-svg .el-hv.on { opacity: 1; }
.el-svg .el-hv__t { font: 700 13px "Roboto Condensed", "Arial Narrow", sans-serif; fill: #F2EAE2; paint-order: stroke; stroke: #141210; stroke-width: 4px; }
.el-svg .el-p__t--h { opacity: 0; pointer-events: none; font-size: 12.5px; paint-order: stroke; stroke: #141210; stroke-width: 4px; transition: opacity .12s; }
.el-svg .el-pg:hover .el-p__t--h, .ek-svg .ek-port:hover .el-p__t--h { opacity: 1; }
.ek-svg .ek-rsz { cursor: nwse-resize; }
.ek-svg .ek-rsz rect { fill: #E8C15A; stroke: #141210; stroke-width: 2; }
/* Kreator: menu pod PPM (plansza i kabel) */
.ek-cm { width: 260px; padding: 6px 0; border-color: #3A332C; }
.ek-cm::before, .ek-cm::after { display: none; }
.ek-cm__h { margin: 2px 12px 6px; font: 800 12px "Roboto Condensed", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #E8C15A; }
.ek-cm__q { padding: 4px 8px 6px; }
.ek-cm__q input { width: 100%; padding: 7px 9px; background: #0F0D0B; border: 1px solid #E8C15A; color: #F2EAE2; font: 14px Roboto, Arial, sans-serif; outline: 0; }
.ek-cm__i { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; background: none; border: 0; color: #F2EAE2; font: 13.5px Roboto, Arial, sans-serif; text-align: left; cursor: pointer; }
.ek-cm__i:hover, .ek-cm__i.on { background: #2C2620; }
.ek-cm__i:disabled { color: #6F6760; cursor: default; background: none; }
.ek-cm__i em { margin-left: auto; font-style: normal; font-size: 12px; color: #8C8178; }
.ek-cm__i img { flex: none; background: #2C2620; }
.ek-cm__i--del { color: #E58A7A; }
.ek-cm__none { margin: 2px 12px 6px; font-size: 13px; color: #8C8178; }
.ek-cm__l, .ek-cm__r span { font: 700 11px Roboto, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8C8178; }
.ek-cm__l { margin: 6px 12px 4px; }
.ek-cm__r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 12px; }
.ek-cm__sw { margin: 0 12px 6px; display: flex; }
.ek-cm__sw button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.ek-cm__cols { padding: 2px 12px 8px; }
.ek-cm__sep { border-top: 1px solid #2F2A24; margin: 6px 0; }
/* Przełącznik lewo/prawo: prąd | sterujący */
.ek-tg { position: relative; display: inline-flex; padding: 0; background: #0F0D0B; border: 1px solid #3A332C; cursor: pointer; }
.ek-tg b { position: relative; z-index: 1; width: 86px; text-align: center; padding: 5px 0; font: 700 12px Roboto, Arial, sans-serif; color: #8C8178; transition: color .15s; }
.ek-tg b:first-of-type { color: #1A1512; }
.ek-tg i { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: #E8C15A; transition: transform .15s, background .15s; }
.ek-tg.r i { transform: translateX(100%); background: #5FA8E0; }
.ek-tg.r b:first-of-type { color: #8C8178; }
.ek-tg.r b:last-of-type { color: #10202C; }
/* Filtr przenośnika: plakietka z ikonami i okienko z listą przedmiotów */
.el-svg .el-pill--conveyor rect { fill: #C98A4B; }
.el-svg .el-pill--conveyor text { text-anchor: start; }
.ek-pop--wide { width: 420px; }
.ek-sw--col { display: flex; flex-wrap: wrap; border-radius: 14px; }
.ek-its > span { display: flex; justify-content: space-between; }
.ek-its__n { font-weight: 700; color: var(--text-3); }
.ek-its__res { border: 1px solid var(--line); border-top: 0; max-height: 210px; overflow: auto; }
.ek-its__res:empty { display: none; }
.ek-its__res small { color: #8C8178; font-size: 11.5px; }
.ek-its > span + span, .ek-its .ek-its__t { margin-top: 10px; }
.ek-its__t { width: 100%; border-collapse: collapse; font-size: 13px; }
.ek-its__t th { font: 700 10.5px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: left; padding: 2px 4px; }
.ek-its__t td { padding: 4px; border-top: 1px solid var(--line); vertical-align: middle; }
.ek-its__t td img { display: block; background: #2C2620; }
.ek-its__t input { width: 64px; padding: 4px 6px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font: 13px var(--font-ui); }
.ek-its__x { background: none; border: 0; color: #E58A7A; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ek-its__t tbody:empty + * { }
.ek-its__e { display: none; margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); }
.ek-its.empty .ek-its__e { display: block; }
.ek-its.empty .ek-its__t thead { display: none; }
.ek-its__res .ek-cm__a { font-size: 13px; }
.ek-its__res .ek-cm__a small { margin-left: 4px; }
.ek-st--cfg .el-st__k { flex: none; white-space: nowrap; }
.ek-its__w { max-height: 230px; overflow: auto; margin-top: 4px; }
.ek-its__t thead th { position: sticky; top: 0; background: #1D1A16; }
.ek-pop--wide { overflow-y: auto; }