[hidden] { display: none !important; }

/* Viewercade uses the Slovozviaz look: warm off-white light theme, graphite dark
   theme, Slovozviaz blue as the accent, Inter everywhere. Light by default,
   dark on request or by system preference. Game screens use the dark set. */
:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --bg-alt: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --text: #12151c;
  --muted: #5d6474;
  --faint: #98a0ae;
  --border: #e3e6ec;
  --border-strong: #cfd4dd;
  --primary: #1f5fbf;
  --primary-hover: #194c99;
  --primary-soft: #e8f0fc;
  --primary-soft-hover: #d9e7fb;
  --on-primary: #ffffff;
  --accent: #f0cf75;
  --accent-soft: #fff6dc;
  --on-accent: #3a2c05;
  --danger: #d4474f;
  --ok: #2e8b57;
  --shadow: 0 1px 2px rgba(18, 21, 28, .05), 0 4px 14px rgba(18, 21, 28, .06);
  --shadow-lg: 0 2px 6px rgba(18, 21, 28, .06), 0 24px 50px -24px rgba(18, 21, 28, .3);

  /* game screens (Slovozviaz dark theme) */
  --g-bg: #0e1014;
  --g-surface: #161922;
  --g-surface-2: #212532;
  --g-line: #2a2f3d;
  --g-text: #f2f3f6;
  --g-muted: #9aa0ad;
  --g-faint: #5c6273;
  --g-blue: #2f6fd6;
  --g-yellow: #e0a526;
  --g-red: #e0525a;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1014;
  --bg-alt: #0b0d11;
  --surface: #161922;
  --surface-2: #212532;
  --text: #f2f3f6;
  --muted: #9aa0ad;
  --faint: #6b7182;
  --border: #2a2f3d;
  --border-strong: #3a4154;
  --primary: #3d74d1;
  --primary-hover: #5286e0;
  --primary-soft: #1a2a45;
  --primary-soft-hover: #223559;
  --accent-soft: #2e2713;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 60px -30px rgba(0, 0, 0, .85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1014;
    --bg-alt: #0b0d11;
    --surface: #161922;
    --surface-2: #212532;
    --text: #f2f3f6;
    --muted: #9aa0ad;
    --faint: #6b7182;
    --border: #2a2f3d;
    --border-strong: #3a4154;
    --primary: #3d74d1;
    --primary-hover: #5286e0;
    --primary-soft: #1a2a45;
    --primary-soft-hover: #223559;
    --accent-soft: #2e2713;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 60px -30px rgba(0, 0, 0, .85);
  }
}