:root {
  color-scheme: dark;
  --bg: #11140f;
  --card: rgba(24, 29, 22, .88);
  --line: rgba(210, 225, 190, .18);
  --text: #eef4e6;
  --muted: #aab7a0;
  --green: #49d17d;
  --red: #f25f5c;
  --orange: #f0a13a;
  --accent: #c8e36b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(151, 180, 70, .24), transparent 34rem),
    radial-gradient(circle at 90% 20%, rgba(130, 60, 30, .30), transparent 28rem),
    linear-gradient(135deg, #0b0e0a, var(--bg));
}
body[data-game="l4d2"] {
  --bg: #120f0e;
  --card: rgba(29, 24, 22, .9);
  --accent: #d57545;
  background:
    radial-gradient(circle at 15% 15%, rgba(160, 65, 32, .25), transparent 32rem),
    linear-gradient(135deg, #080706, #17110f 65%, #241612);
}
.shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 34px 0; }
.hero { padding: 28px 0 18px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.account-box{min-width:190px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:rgba(20,24,18,.86);box-shadow:0 12px 36px rgba(0,0,0,.24)}
.account-box span,.account-box small{display:block;color:var(--muted);font-size:.82rem}.account-box strong{display:block;margin:2px 0 4px;overflow-wrap:anywhere}.account-box button{padding:8px 10px;margin:6px 0 0;background:rgba(255,255,255,.08);color:var(--text);font-weight:800}
.eyebrow { color: var(--accent); letter-spacing: .18em; text-transform: uppercase; }
h1 { font-size: clamp(2.2rem, 7vw, 5rem); margin: 0; line-height: .95; }
h2 { margin: 0 0 16px; }
.warning, .notice { color: var(--orange); font-weight: 700; }
.grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: 18px; }
.card {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  background: var(--card);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}
.wide { grid-column: 1 / -1; }
.hidden { display: none; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.badge { padding: 8px 12px; border-radius: 999px; background: #333; font-weight: 800; }
.ONLINE { background: rgba(73,209,125,.14); color: var(--green); }
.OFFLINE, .BŁĄD { background: rgba(242,95,92,.14); color: var(--red); }
.URUCHAMIANIE, .ZATRZYMYWANIE { background: rgba(240,161,58,.14); color: var(--orange); }
dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
dt { color: var(--muted); }
dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
input, select, button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 6px 0;
  color: var(--text);
  background: rgba(255,255,255,.06);
}
button,.button { cursor: pointer; background: var(--accent); color: #14150e; font-weight: 900; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tabs{position:sticky;top:0;z-index:30;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;background:rgba(18,15,14,.97);box-shadow:0 8px 20px rgba(0,0,0,.28);scroll-padding-inline:12px}.subtabs{display:flex;gap:8px;overflow:auto}.tabs button,.subtabs button{min-width:max-content}.tabs button.active,.subtabs button.active,#statRange button.active{outline:2px solid var(--text);background:#eef4e6;color:#14150e}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.stat{padding:14px;border:1px solid var(--line);border-radius:14px}.addon{padding:14px 0;border-bottom:1px solid var(--line)}
.panel-section{display:block;width:100%}.section-toggle{margin:0;width:100%;justify-content:flex-start;font-size:1.35rem;background:transparent;color:var(--text);border:0;padding:0}.section-toggle::after{content:"▾";margin-left:auto}.section-toggle[aria-expanded="false"]::after{content:"▸"}.section-content{margin-top:16px}.section-content[hidden]{display:none}
.table-tools{display:flex;gap:10px;align-items:center;margin:10px 0}.table-tools input,.table-tools select,.table-tools button{width:auto;min-width:160px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;max-width:100%}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:980px}
.player-mode-stack{display:block;width:100%;overflow:visible}.player-mode-table{display:block;width:100%;margin-top:22px}.player-mode-table:first-child{margin-top:18px}.player-mode-table h3{margin:0 0 8px}.player-table{width:100%;max-width:100%;overflow-x:auto;overflow-y:visible}.player-table table{width:100%;min-width:1120px}.player-table-coop table{min-width:1640px}.player-table td,.player-table th,.ranking-table td,.ranking-table th{white-space:nowrap}.player-table .percent{font-variant-numeric:tabular-nums}.ranking-table{margin:22px 0}.ranking-table h3{margin:0 0 8px}.ranking-table table{min-width:max-content;width:100%}.extended-stats-notice{margin:14px 0}
th,td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;background:rgba(20,24,18,.72)}
th{position:sticky;top:0;z-index:3;background:#20251d;color:var(--accent);font-size:.86rem;text-transform:uppercase}
td{font-variant-numeric:tabular-nums}
.sticky-col{position:sticky;left:0;z-index:4;min-width:220px;max-width:260px;background:#20251d}
td.sticky-col{z-index:2;background:#181d16}
.ellipsis{max-width:260px;overflow:hidden;text-overflow:ellipsis}
td span{color:var(--muted);font-size:.86rem}
tr[data-player]{cursor:pointer}
tr[data-player]:hover,tr[data-player].selected td{background:rgba(255,255,255,.09)}
#playerProfile{margin-top:16px}.profile{border:1px solid var(--line);border-radius:14px;padding:16px;background:rgba(255,255,255,.04)}.profile.error{color:var(--orange)}.steamid{overflow-wrap:anywhere}.muted{color:var(--muted)}.refresh-status{font-size:.9rem;color:var(--muted);white-space:nowrap}.refresh-status.busy{color:var(--accent)}.pager{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:10px}.pager button{width:auto}.rank-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.rank-card{border:1px solid var(--line);border-radius:14px;padding:12px}.rank-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:6px 0}.rank-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details{border:1px solid var(--line);border-radius:14px;margin:12px 0;padding:10px 14px;background:rgba(255,255,255,.035)}summary{cursor:pointer;font-weight:900;color:var(--accent)}
.campaign-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.campaign-admin-card{display:grid;grid-template-columns:132px 1fr;gap:14px;border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(255,255,255,.04)}
.campaign-admin-card img{width:132px;height:100%;min-height:132px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.25)}
.campaign-admin-card p{margin:6px 0 10px;color:var(--muted);line-height:1.35}
.campaign-admin-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;margin-bottom:10px}
.campaign-admin-facts span{font-size:.9rem;color:var(--muted)}
.campaign-admin-card .button{width:auto;margin:0;padding:9px 12px;border-radius:10px}
.campaign-picker{margin:12px 0 18px}.segmented{display:flex;gap:8px;margin:10px 0 14px}.segmented button{width:auto}.segmented button.active{background:var(--accent);color:#07131d}.campaign-picker-grid{display:grid;gap:14px}.campaign-picker-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(255,255,255,.035)}.campaign-picker-card[hidden]{display:none}.campaign-picker-head{display:grid;grid-template-columns:120px 1fr;gap:14px}.campaign-picker-head img{width:120px;height:96px;object-fit:cover;border-radius:9px;background:#101820;border:1px solid var(--line)}.campaign-picker-head h3{margin:0 0 4px}.campaign-picker-head p{margin:4px 0 8px;color:var(--muted);line-height:1.35}.chapter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;margin-top:12px}.chapter-tile{min-height:58px!important;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;text-align:left}.chapter-tile small{color:var(--muted)}.chapter-tile.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.advanced-controls{margin-top:16px}.advanced-controls summary{cursor:pointer;color:var(--muted);padding:8px 0}
.operation-dialog{max-width:min(520px,calc(100vw - 32px));border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text);padding:22px}.operation-dialog::backdrop{background:rgba(0,0,0,.72)}.operation-dialog h3{margin:8px 0}.operation-dialog p{margin:4px 0 16px}.dialog-actions{display:flex;flex-wrap:wrap;gap:8px}.dialog-actions button{width:auto}.table-sort{width:auto;min-height:0;padding:4px 7px;margin:0;background:transparent;color:inherit;border:0;text-decoration:underline;text-underline-offset:3px}
pre { white-space: pre-wrap; max-height: 360px; overflow: auto; color: #d7ddcf; }
#toast { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; }
.toast { padding: 12px 14px; border-radius: 14px; background: #20251d; border: 1px solid var(--line); }
@media (max-width: 760px) {
  .grid, dl { grid-template-columns: 1fr; }
  .hero{display:block}.account-box{margin-top:14px;width:100%}
  .row { align-items: flex-start; flex-direction: column; }
  .table-tools{display:grid}.table-tools input,.table-tools select,.table-tools button{width:100%}
  .table-tools .button{width:100%}
  .player-table table{min-width:1050px}
  th,td{padding:10px 12px}
  .sticky-col{min-width:180px}
  .campaign-admin-card{grid-template-columns:1fr}
  .campaign-admin-card img{width:100%;height:150px}
  .campaign-admin-facts{grid-template-columns:1fr}
  .campaign-picker-head{grid-template-columns:1fr}.campaign-picker-head img{width:100%;height:150px}.segmented{display:grid;grid-template-columns:1fr 1fr}
  .tabs{top:0;margin-inline:0}.section-toggle{font-size:1.1rem}
}