: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; }
.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 { cursor: pointer; background: var(--accent); color: #14150e; font-weight: 900; }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tabs{display:flex;gap:8px;overflow:auto}.tabs button{min-width:max-content}.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)}
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; }
  .row { align-items: flex-start; flex-direction: column; }
}