/* Liga Patolixy. Ciemny motyw; dwie strony CS (T złota, CT niebieska) oznaczają dwie drużyny meczu. */
:root {
  --bg: #0d1117;
  --surface: #141a22;
  --surface-2: #1b2330;
  --line: #26303e;
  --line-2: #3a4658;
  --fg: #e6ebf2;
  --muted: #8c98a9;
  --t: #e2a84a;
  --t-soft: rgba(226, 168, 74, .22);
  --ct: #6d9ce9;
  --ct-soft: rgba(109, 156, 233, .22);
  --good: #56c08e;
  --good-soft: rgba(86, 192, 142, .16);
  --bad: #e0705a;
  --display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 15px; line-height: 1.5;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 0 48px;
}
a { color: inherit }
button, select, input { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--t); outline-offset: 2px }
.wrap { max-width: 1100px; margin: 0 auto }
.muted { color: var(--muted) }
.small { font-size: 13px }
.mono { font-family: var(--mono); font-size: .92em }

/* nagłówek */
header.top {
  position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px);
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
}
.top-in { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px max(16px, env(safe-area-inset-left, 0px)) }
.brand { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; display: flex; align-items: center; gap: 8px }
.brand i { display: inline-block; width: 10px; height: 10px; background: var(--t); transform: rotate(45deg) }
nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0 }
nav a, .seg a { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 6px 12px; border-radius: 6px; color: var(--muted); white-space: nowrap }
nav a:hover, .seg a:hover { color: var(--fg); background: var(--surface) }
nav a[aria-current], .seg a[aria-current] { color: var(--fg); background: var(--surface-2) }
.me { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted) }
.me a { text-decoration: none; color: var(--fg) }
.me a[aria-current] { color: var(--t) }
.me form { margin: 0 }
.linkbtn { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.linkbtn:hover { color: var(--fg) }


main { padding-top: 28px; display: grid; gap: 32px }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; line-height: 1.1 }
h2 { font-size: 28px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase }
h3 { font-size: 20px; font-weight: 700; letter-spacing: .02em }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.section { display: grid; gap: 14px }
.section.narrow { max-width: 520px }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap }
.banner { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 10px 14px; font-size: 14px; color: var(--muted) }
.banner.flash { margin-top: 20px; color: var(--fg); border-color: color-mix(in srgb, var(--good) 45%, transparent); background: var(--good-soft) }
.err { margin: 0; color: var(--bad); font-size: 14px }
.back { font-size: 14px; color: var(--muted); text-decoration: none }
.back:hover { color: var(--fg) }

/* start */
.hero { display: grid; gap: 18px; padding-block: 8px }
.hero h1, .auth h1 { font-size: clamp(48px, 10vw, 104px); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .9 }
.hero h1 span, .auth h1 span { color: var(--t) }
.hero p { margin: 0; max-width: 60ch; color: var(--muted); font-size: 16px }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.stat { padding: 14px 16px; background: var(--surface); display: grid; gap: 2px }
.stat + .stat { border-left: 1px solid var(--line) }
.stat b { font-family: var(--display); font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1 }
.stat span { font-size: 13px; color: var(--muted) }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr) } .stat:nth-child(3) { border-left: 0 } .stat:nth-child(n+3) { border-top: 1px solid var(--line) } }
.two { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px }
.two > * { min-width: 0 }
@media (max-width: 860px) { .two { grid-template-columns: 1fr } }

/* logowanie / formularze */
.auth { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding-block: 24px }
.auth-intro { display: grid; gap: 14px }
.auth-intro p { margin: 0; max-width: 52ch }
@media (max-width: 800px) { .auth { grid-template-columns: 1fr; gap: 24px } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px }
.form-grid { display: grid; gap: 14px; align-content: start }
.form-grid h2 { font-size: 24px }
.form-grid label { display: grid; gap: 6px; font-size: 14px; color: var(--muted) }
.form-grid input, .form-grid select, .st select { background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; color: var(--fg); width: 100% }
.st select { padding: 5px 8px; width: auto }
.form-grid input:focus, .form-grid select:focus { border-color: var(--line-2) }
.kv { display: grid; gap: 2px }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line) }
code.cmd { display: block; white-space: pre-wrap; word-break: break-all; font-family: var(--mono); font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--t); user-select: all }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 8px 14px; cursor: pointer; font-weight: 500; font-size: 14px; text-decoration: none }
.btn:hover:not(:disabled) { border-color: var(--line-2) }
.btn:disabled { opacity: .45; cursor: not-allowed }
.btn.primary { background: var(--good); border-color: var(--good); color: #08130d; font-weight: 600 }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08) }
.btn.ghost { background: transparent }
.btn.sm { padding: 4px 10px; font-size: 13px }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #1a0703 }
.btn.steam { background: #e6ebf2; color: #0d1117; border-color: #e6ebf2; font-weight: 600; font-size: 16px; padding: 12px 18px }
.btn.steam:hover { filter: brightness(.94) }

/* mecze */
.list { display: grid; gap: 8px }
.mrow { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; transition: border-color .15s }
.mrow:hover { border-color: var(--line-2) }
.mrow .side { min-width: 0; display: grid }
.mrow .side.b { text-align: right }
.mrow .tn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tag { font-family: var(--mono); font-size: 11px; color: var(--muted) }
.mrow .mid { font-family: var(--display); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; min-width: 64px; text-align: center }
.mrow .mid.vs { color: var(--muted); font-size: 16px }
.mrow .when { justify-self: end; text-align: right; min-width: 112px }
.a-dot { color: var(--t) } .b-dot { color: var(--ct) }
@media (max-width: 600px) {
  .mrow { grid-template-columns: 1fr auto 1fr; row-gap: 6px }
  .mrow .when { grid-column: 1 / -1; justify-self: start; text-align: left; min-width: 0 }
}
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; vertical-align: middle }
.chip.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); background: var(--good-soft) }
.chip.done { color: var(--fg); border-color: var(--line-2); background: var(--surface-2) }
.chip.part { color: var(--t); border-color: color-mix(in srgb, var(--t) 45%, transparent) }
.when-txt { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums }
.round { display: grid; gap: 8px }
.round-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap }
.bye { font-size: 13px; color: var(--muted) }

/* tabele */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px }
table.st { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 560px }
.st th, .st td { padding: 10px; text-align: center; border-bottom: 1px solid var(--line) }
.st th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); font-weight: 600; background: var(--surface) }
.st td.team, .st th.team { text-align: left }
.st tr:last-child td { border-bottom: 0 }
.st td.pos { font-family: var(--display); font-weight: 700; font-size: 18px; width: 40px; color: var(--muted) }
.st tbody tr:nth-child(1) td.pos { color: var(--t) }
.st td.pts { font-family: var(--display); font-weight: 700; font-size: 18px }
.st tr.mine td { background: color-mix(in srgb, var(--t) 7%, transparent) }
.st.compact { min-width: 0 }
.st td.actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap }
.st td.actions form { margin: 0 }
details.del summary { list-style: none }
details.del summary::-webkit-details-marker { display: none }
details.del[open] summary { display: none }
.form { display: inline-flex; gap: 3px }
.form i { width: 16px; height: 16px; border-radius: 3px; font-style: normal; font-family: var(--mono); font-size: 10px; line-height: 16px; color: var(--bg); font-weight: 600 }
.form .W { background: var(--good) } .form .L { background: var(--bad) } .form .D { background: var(--muted) }
.seg { display: flex; gap: 4px; flex-wrap: wrap }
.seg a { font-size: 14px; padding: 4px 10px }

/* drużyny */
.teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px }
.team-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; gap: 10px; align-content: start }
.team-card .num { font-family: var(--display); font-size: 44px; font-weight: 800; line-height: .9; color: var(--surface-2); -webkit-text-stroke: 1px var(--line-2) }
.team-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.team-card li { font-weight: 600; font-size: 17px }
.team-card .meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums }

/* widok meczu */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px }
.versus .side { display: grid; gap: 4px; min-width: 0 }
.versus .side.b { text-align: right }
.versus .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .1em }
.versus .side.a .lbl { color: var(--t) } .versus .side.b .lbl { color: var(--ct) }
.versus strong { font-family: var(--display); font-size: clamp(22px, 4vw, 34px); font-weight: 700; line-height: 1.05 }
.versus .score { font-family: var(--display); font-size: clamp(34px, 6vw, 56px); font-weight: 800; font-variant-numeric: tabular-nums; text-align: center }
.versus .score.vs { color: var(--muted); font-size: 24px }
@media (max-width: 560px) { .versus { grid-template-columns: 1fr; text-align: center } .versus .side.b { text-align: center } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: grid; gap: 14px }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted) }
.legend span { display: inline-flex; align-items: center; gap: 6px }
.sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid var(--line) }
.sw.a { background: linear-gradient(90deg, var(--t) 50%, transparent 50%) }
.sw.b { background: linear-gradient(90deg, transparent 50%, var(--ct) 50%) }
.sw.both { background: var(--good) }
.weeknav { display: flex; align-items: center; gap: 8px }
.wk-range { font-variant-numeric: tabular-nums; font-size: 14px; min-width: 104px; text-align: center }
.grid-wrap { overflow-x: auto; margin-inline: -4px; padding-inline: 4px }
table.grid { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 520px }
.grid th { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .04em; padding: 2px }
.grid th.day { line-height: 1.3 }
.grid th.day b { display: block; font-family: var(--display); font-size: 16px; color: var(--fg); letter-spacing: .02em }
.grid th.day.today b { color: var(--t) }
.grid th.hr { text-align: right; padding-right: 6px; width: 48px }
.cell { width: 100%; height: 34px; border-radius: 5px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; padding: 0 }
.cell.a { background: linear-gradient(90deg, var(--t-soft) 50%, var(--bg) 50%); border-color: color-mix(in srgb, var(--t) 50%, var(--line)) }
.cell.b { background: linear-gradient(90deg, var(--bg) 50%, var(--ct-soft) 50%); border-color: color-mix(in srgb, var(--ct) 50%, var(--line)) }
.cell.a.b { background: var(--good-soft); border-color: var(--good) }
.cell.a.b::after { content: "✓"; color: var(--good); font-weight: 700; font-size: 14px }
.cell.picked { outline: 2px solid var(--fg); outline-offset: 1px }
.cell:disabled { cursor: not-allowed; opacity: .35 }
.cell.ro { cursor: default }
.cell:not(:disabled):not(.ro):hover { border-color: var(--fg) }
.common { display: flex; flex-wrap: wrap; gap: 8px }
.slot { display: inline-flex; align-items: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--good) 45%, transparent); background: var(--good-soft); border-radius: 8px; padding: 6px 6px 6px 12px; font-variant-numeric: tabular-nums; font-size: 14px }
.confirmed { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 10px; background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 45%, transparent) }
.confirmed b { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: .02em }
.result { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0 }
.result label { display: grid; gap: 4px; font-size: 13px; color: var(--muted) }
.result input { width: 84px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font-family: var(--display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums }
.result .colon { font-family: var(--display); font-size: 24px; padding-bottom: 6px; color: var(--muted) }
.panel > form { margin: 0 }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; font-size: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .4); z-index: 20; max-width: calc(100% - 32px) }
footer { margin-top: 40px; font-size: 13px; color: var(--muted); text-align: center; display: grid; gap: 6px }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

/* avatary i strona gracza */
.ava { border-radius: 6px; object-fit: cover; flex: none; display: inline-block; background: var(--surface-2) }
.ava-empty { display: inline-grid; place-items: center; font-family: var(--display); font-weight: 700; color: var(--muted); border: 1px solid var(--line) }
.me-link { display: inline-flex; align-items: center; gap: 8px }
.who { display: inline-flex; align-items: center; gap: 10px }
.plink { text-decoration: none; font-weight: 600 }
.plink:hover { text-decoration: underline; text-underline-offset: 3px }
.members { display: flex; flex-wrap: wrap; gap: 6px }
.member { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 13px; padding: 3px 8px 3px 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg) }
.member:hover { border-color: var(--line-2) }
.player-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap }
.player-head .ava { border-radius: 12px }
.ph-text { display: grid; gap: 4px; min-width: 0 }
.player-head h1 { font-size: clamp(36px, 7vw, 64px); font-weight: 800; text-transform: uppercase; line-height: .95 }
.stats-6 { grid-template-columns: repeat(6, 1fr) }
@media (max-width: 900px) { .stats-6 { grid-template-columns: repeat(3, 1fr) } .stats-6 .stat:nth-child(4) { border-left: 0 } .stats-6 .stat:nth-child(n+4) { border-top: 1px solid var(--line) } }
@media (max-width: 640px) { .stats-6 .stat:nth-child(3), .stats-6 .stat:nth-child(5) { border-left: 0 } .stats-6 .stat:nth-child(4) { border-left: 1px solid var(--line) } }
.check { display: flex !important; align-items: center; gap: 10px; grid-template-columns: none; color: var(--fg) !important; cursor: pointer }
.check input { width: auto !important }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap }
.row-btns form { margin: 0 }
.team-title { font-size: 24px; text-transform: uppercase; letter-spacing: .02em; color: var(--t) }
details.rename summary { list-style: none; justify-self: start }
details.rename summary::-webkit-details-marker { display: none }
details.rename[open] summary { margin-bottom: 10px }
.form-grid .form-grid label { font-size: 13px }

/* sezony */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.season-pick { margin: 0 }
.season-pick select { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: 13px; max-width: 220px }
.season-row { padding: 14px 16px }
.season-row > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; cursor: pointer; list-style: none }
.season-row > summary::-webkit-details-marker { display: none }
.season-row[open] > summary { margin-bottom: 14px }
.season-form { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 10px }
.season-form .check, .season-form .row-btns { grid-column: 1 / -1 }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px }
.form-grid textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; color: var(--fg); width: 100%; font: inherit; resize: vertical }

/* monitor serwera */
.server-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px }
.server-card.compact { padding: 14px 16px }
.srv-main { display: grid; gap: 8px; min-width: 0 }
.srv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.srv-head h3 { font-size: 20px }
.srv-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted) }
.srv-dot.online { background: var(--good); box-shadow: 0 0 0 4px var(--good-soft) }
.srv-dot.offline { background: var(--bad) }
.srv-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; font-variant-numeric: tabular-nums }
.srv-actions { display: grid; gap: 8px; justify-items: start; min-width: 0 }
.srv-copy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0 }
.srv-copy code { font-family: var(--mono); font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; word-break: break-all }
.srv-copy .muted { min-width: 52px }
@media (max-width: 720px) { .server-card { grid-template-columns: 1fr } }
.slot select { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 4px; font-size: 13px }
.custom-when { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin: 14px 0 0 }
.custom-when label { display: grid; gap: 4px; font-size: 13px; color: var(--muted) }
.custom-when input { background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; color: var(--fg) }
.grid-2.tight { gap: 10px }

/* na żywo i dema */
.live-badge { color: var(--bad); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; animation: pulse 1.6s ease-in-out infinite }
h2 .live-badge { font-size: 20px; vertical-align: middle }
@keyframes pulse { 50% { opacity: .35 } }
.chip.live { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); background: color-mix(in srgb, var(--bad) 14%, transparent) }
.mrow .mid.live { color: var(--bad) }
.versus.is-live { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)) }
.live-score { display: grid; justify-items: center; gap: 2px; line-height: 1 }
.live-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--fg); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)) }
.demo-list { display: grid; gap: 8px }
.demo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg) }
@media (prefers-reduced-motion: reduce) { .live-badge { animation: none } }

/* menu: na szerokim ekranie w jednym rzędzie, na telefonie rozwijane przyciskiem */
.menu { display: flex; align-items: center; gap: 8px 16px; flex: 1; min-width: 0; flex-wrap: wrap }
.menu nav { flex: 1 }
.menu-toggle { display: none; margin-left: auto; width: 42px; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px }
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--fg); border-radius: 2px; transition: transform .2s, opacity .2s }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
@media (max-width: 1440px) {
  .top-in { flex-wrap: wrap; gap: 0 }
  .menu-toggle { display: flex }
  .menu { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 0 6px }
  .js .menu:not(.open) { display: none }
  .menu nav { order: 0; flex-direction: column; gap: 2px; overflow: visible; flex-basis: auto }
  .menu nav a { padding: 10px 12px; font-size: 18px }
  .season-pick select { width: 100%; max-width: none; padding: 9px 10px; font-size: 15px }
  .me { justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--line) }
}
/* komputer: jeden rząd na całej szerokości: logo z lewej, potem zakładki, sezon i konto */
@media (min-width: 1441px) {
  .top-in { max-width: none; flex-wrap: nowrap; gap: 24px; padding-inline: max(24px, env(safe-area-inset-left, 0px)) }
  .menu { flex-wrap: nowrap; gap: 16px }
  .menu nav { flex-wrap: nowrap; overflow: visible }
  .brand { white-space: nowrap }
  .me { white-space: nowrap }
}


/* dokumenty, zgody, ciasteczka */
.foot-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap }
.foot-links a { color: var(--muted) }
.foot-links a:hover { color: var(--fg) }
.doc { max-width: 760px; display: grid; gap: 12px; line-height: 1.65 }
.doc h1 { font-size: clamp(34px, 6vw, 52px); font-weight: 800; text-transform: uppercase; line-height: 1 }
.doc h2 { font-size: 22px; margin-top: 14px }
.doc .lead { font-size: 16px; color: var(--muted); margin: 0 }
.doc p, .doc ul { margin: 0 }
.doc ul { padding-left: 20px; display: grid; gap: 6px }
.doc a { color: var(--t) }
.doc-table { min-width: 520px }
.doc-table td { font-size: 14px; vertical-align: top }
.check.consent { align-items: flex-start; font-size: 14px; line-height: 1.5 }
.check.consent input { margin-top: 3px }
.check.consent a { color: var(--t) }
.danger-zone { margin-top: 8px; max-width: 760px }
.cookie-note { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; max-width: 620px; margin: 0 auto; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; justify-content: space-between; padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); font-size: 14px }
.cookie-note a { color: var(--t) }
.rules-edit { max-width: 760px; margin-top: 8px }
.rules-edit > summary { list-style: none }
.rules-edit > summary::-webkit-details-marker { display: none }
.rules-edit[open] > summary { margin-bottom: 12px }
.rules-edit textarea { font-family: var(--mono); font-size: 13px; line-height: 1.5 }

/* sterowanie serwerem */
.rcon-result { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface) }
.rcon-result.ok { border-color: color-mix(in srgb, var(--good) 45%, transparent) }
.rcon-result.bad { border-color: color-mix(in srgb, var(--bad) 50%, transparent) }
.rcon-result pre { margin: 0; max-height: 360px; overflow: auto; font-family: var(--mono); font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; white-space: pre-wrap; word-break: break-word }
.quick { display: flex; flex-wrap: wrap; gap: 8px }
.quick form, .load-row form, .inline-form { margin: 0 }
.load-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap }
.inline-form input, .inline-form select { flex: 1; min-width: 160px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; color: var(--fg) }
textarea.mono { font-family: var(--mono); font-size: 13px }
.season-box { display: flex; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 8px; font-size: 14px }
.season-box a { color: var(--t) }
.season-form .wide { grid-column: 1 / -1 }
.srv-note { margin: 0; font-size: 14px }
.srv-note a { color: var(--t) }

/* mixy */
.king { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--t) 45%, var(--line)); background: color-mix(in srgb, var(--t) 8%, var(--surface)); text-decoration: none }
.king h3 { font-size: 26px }
.king .ava { border-radius: 10px }
.small-king { padding: 12px 14px; gap: 12px }

.subnav { margin-bottom: -8px }
.toc { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 14px }
.help .tag { font-size: 12px }
.map-pick select { min-width: 140px; flex: 0 1 auto }