:root {
  /* —— Paleta bazowa —— */
  --bg: #050508;
  --bg-elevated: #121218;
  --bg-panel: #0c0c12;
  --accent: #f0c020;
  --accent-dim: #b89410;
  --text: #f0f4ff;
  --text-dim: #8fa3c4;
  --danger: #e24b4b;
  --team-1-from: #f5d060;
  --team-1-to: #c89410;
  --team-1: #f0c020;
  --text-on-team-1: #1a1000;
  --team-1-glow: rgba(245, 208, 96, 0.55);
  --gradient-team-1: linear-gradient(
    180deg,
    var(--team-1-from) 0%,
    var(--team-1-to) 100%
  );
  --team-2-from: #eef2f5;
  --team-2-to: #8f9aa8;
  --team-2: #d0d8e4;
  --text-on-team-2: #121218;
  --team-2-glow: rgba(200, 210, 220, 0.5);
  --gradient-team-2: linear-gradient(
    180deg,
    var(--team-2-from) 0%,
    var(--team-2-to) 100%
  );

  /* —— Akcent drugorzędny (srebro / Versus) —— */
  --accent-secondary: #d0d8e4;
  --accent-secondary-dim: #8a96a8;
  --accent-secondary-muted-bg: rgba(200, 210, 225, 0.08);
  --accent-secondary-border-soft: rgba(200, 210, 225, 0.38);
  --accent-secondary-glow-ambient: rgba(200, 210, 225, 0.1);
  --accent-secondary-from: #eef2f5;
  --accent-secondary-to: #9aa8b8;
  --accent-secondary-bright: #f8fafc;
  --text-on-accent-secondary: #121218;
  --gradient-accent-secondary: linear-gradient(
    180deg,
    var(--accent-secondary-from) 0%,
    var(--accent-secondary-to) 100%
  );
  --accent-secondary-glow-soft: rgba(200, 210, 225, 0.32);
  --bg-glow-secondary: rgba(200, 210, 225, 0.1);

  /* —— Akcent (przyciski żółte: Odkryj, Ekran Gry, Wróć do gry…) —— */
  --accent-from: #ffe566;
  --accent-to: #d4a012;
  --accent-bright: #fff0a0;
  --text-on-accent: #1a1000;
  --text-on-accent-muted: rgba(26, 16, 0, 0.72);
  --gradient-accent: linear-gradient(
    180deg,
    var(--accent-from) 0%,
    var(--accent-to) 100%
  );
  --accent-subtle-bg: rgba(240, 192, 32, 0.09);
  --accent-muted-bg: rgba(240, 192, 32, 0.12);
  --accent-border-soft: rgba(240, 192, 32, 0.48);
  --accent-border-hover: rgba(240, 192, 32, 0.58);
  --accent-glow: rgba(240, 192, 32, 0.38);
  --accent-glow-soft: rgba(240, 192, 32, 0.3);
  --accent-glow-ambient: rgba(240, 192, 32, 0.22);

  /* —— Danger (Zła odpowiedź, błędy, X-y) —— */
  --danger-from: #f07070;
  --danger-to: #c83030;
  --danger-border: #f07070;
  --text-on-danger: #fff8f8;
  --gradient-danger: linear-gradient(
    180deg,
    var(--danger-from) 0%,
    var(--danger-to) 100%
  );
  --danger-muted-bg: rgba(226, 75, 75, 0.2);
  --danger-glow: rgba(226, 75, 75, 0.45);

  /* —— Warning (fazy gry — pomarańcz, ≠ żółty akcent) —— */
  --warning: #ffaa42;
  --warning-bright: #ffcc70;
  --warning-muted-bg: rgba(255, 150, 48, 0.24);
  --warning-border-soft: rgba(255, 165, 58, 0.62);
  --warning-glow: rgba(255, 150, 48, 0.38);

  /* —— Info (komunikaty fazowe — błękit, ≠ warning / accent przyciski) —— */
  --info: #72b8ff;
  --info-bright: #a8d4ff;
  --info-muted-bg: rgba(72, 152, 255, 0.18);
  --info-border-soft: rgba(114, 184, 255, 0.55);
  --info-glow: rgba(72, 152, 255, 0.32);

  /* —— Obramowania —— */
  --border-faint: rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-emphasis: rgba(255, 255, 255, 0.15);
  --border-overlay: rgba(255, 255, 255, 0.2);
  --border-active: rgba(255, 255, 255, 0.28);
  --border-tile: rgba(255, 255, 255, 0.14);

  /* —— Powierzchnie (tła paneli, hover, overlay) —— */
  --surface-raised: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.05);
  --surface-hover-strong: rgba(255, 255, 255, 0.06);
  --surface-muted: rgba(255, 255, 255, 0.03);
  --surface-inset: rgba(0, 0, 0, 0.2);
  --surface-inset-deep: rgba(0, 0, 0, 0.35);
  --surface-inset-heavy: rgba(0, 0, 0, 0.5);
  --surface-overlay: rgba(0, 0, 0, 0.45);
  --surface-overlay-heavy: rgba(0, 0, 0, 0.65);
  --surface-panel-scrim: rgba(12, 12, 18, 0.72);
  --surface-panel-scrim-solid: rgba(12, 12, 18, 0.95);

  /* —— Kafelki hubu —— */
  --tile-surface-from: #1a1a24;
  --tile-surface-to: #0e0e14;
  --tile-surface-highlight: rgba(255, 255, 255, 0.1);
  --tile-surface-highlight-strong: rgba(255, 255, 255, 0.35);
  --tile-primary-shadow: 0 12px 36px var(--accent-glow);
  --qr-panel-bg: #1a1a24;

  /* —— Cienie —— */
  --shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-tile: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-tile-pressed: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-icon: 0 2px 4px rgba(0, 0, 0, 0.35);

  /* —— Layout marketing —— */
  --max: 1200px;
  --max-narrow: 760px;
  --section-pad: clamp(4.5rem, 9vw, 7.5rem);
  --nav-height: 64px;
  --glass: rgba(12, 12, 18, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(16px);

  /* —— Typografia i kształt —— */
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --font-ui: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --tile-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}