/* Zone 210 shared design system: light + dark themes, hairline borders, layered shadows, one gold accent. */
:root {
  /* light theme: soft cool grey, never stark white */
  --bg: #eef0f5;
  --bg-grad: linear-gradient(155deg, #e4e9fb 0%, #f2e9f7 48%, #e2f0fa 100%);
  --surface: #ffffff;
  --surface-2: #f5f6fa;
  --ink: #161a2b;
  --muted: #5f6680;
  --line: rgba(22, 26, 43, 0.1);
  --line-strong: rgba(22, 26, 43, 0.24);
  --shadow: 0 1px 2px rgba(22, 26, 43, 0.06), 0 10px 28px rgba(22, 26, 43, 0.08);
  --shadow-lg: 0 2px 4px rgba(22, 26, 43, 0.08), 0 24px 48px rgba(22, 26, 43, 0.14);
  /* animated background colours */
  --blob-1: rgba(99, 102, 241, 0.55);
  --blob-2: rgba(244, 114, 182, 0.48);
  --blob-3: rgba(56, 189, 248, 0.52);
  --blob-4: rgba(251, 191, 36, 0.48);
  --sheen: rgba(255, 255, 255, 0.75);
  --sheen-soft: rgba(255, 255, 255, 0.26);
  --gold: #f5b41f;
  --gold-deep: #cf9410;
  --gold-soft: #fff1c8;
  --on-gold: #2b1f00;
  --red: #e5484d;
  --green: #1f9d61;
  --blue: #4f6df5;
  --yellow: #f5b41f;
  --purple: #8a5ce0;
  --focus: #4f6df5;
  --radius: 16px;
  --font: ui-sans-serif, -apple-system, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  /* dark theme: deep midnight blue with cool, soft surfaces (not black, not brown) */
  --bg: #0a0e1a;
  --bg-grad: linear-gradient(155deg, #0a1030 0%, #14163f 42%, #1b1145 72%, #0b1a33 100%);
  --surface: #131a2b;
  --surface-2: #1a2238;
  --ink: #eef1fa;
  --muted: #98a1bb;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.2);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 28px 56px rgba(0, 0, 0, 0.5);
  --blob-1: rgba(99, 102, 241, 0.7);
  --blob-2: rgba(217, 70, 239, 0.46);
  --blob-3: rgba(20, 184, 166, 0.46);
  --blob-4: rgba(245, 180, 31, 0.34);
  --sheen: rgba(255, 255, 255, 0.3);
  --sheen-soft: rgba(255, 255, 255, 0.1);
  --gold-soft: rgba(245, 180, 31, 0.16);
  --focus: #8ea2ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--bg-grad), var(--bg);
  transition: background-color 0.25s ease;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease;
}

/* Glossy, slowly moving gradient behind everything: soft colour blobs that drift, plus a light sheen that sweeps across */
body::before,
body::after {
  inset: 0;
  background:
    linear-gradient(118deg, transparent 0%, var(--sheen-soft) 24%, var(--sheen) 36%, var(--sheen-soft) 48%, transparent 64%),
    linear-gradient(180deg, var(--sheen-soft), transparent 38%);
  opacity: 0.35; /* static: an animated background-position or blend mode repaints the whole screen every frame */
}
@keyframes bg-drift {
  0%   { transform: translate3d(-6%, 4%, 0) scale(1) rotate(-8deg); }
  50%  { transform: translate3d(7%, -6%, 0) scale(1.2) rotate(6deg); }
  100% { transform: translate3d(-5%, 7%, 0) scale(1.1) rotate(-6deg); }
}

/* Game pages keep the background still (set by theme.js) so the GPU and battery go to the game */
:root[data-motion="calm"] body::before,
:root[data-saver="on"] body::before { animation: none; will-change: auto; }
:root[data-saver="on"] .grid > li, :root[data-saver="on"] .card { animation: none !important; }

[hidden] { display: none !important; }

/* Page frame for simple games */
.g-page {
  max-width: 940px;
  margin: 0 auto;
  padding: max(72px, calc(env(safe-area-inset-top) + 62px)) 16px 44px;
}
.g-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.g-head h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; }
.g-head p { margin: 5px 0 0; color: var(--muted); }
.g-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Panels & stats */
.g-panel {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.g-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.g-stat {
  min-width: 88px;
  padding: 8px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.g-stat b { display: block; font-size: 1.2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.g-stat span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* Buttons */
.g-btn {
  font: inherit;
  font-weight: 700;
  color: var(--on-gold);
  background: linear-gradient(180deg, #ffc93c, var(--gold));
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 3px 0 var(--gold-deep), 0 8px 16px rgba(207, 148, 16, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
}
.g-btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.g-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 0 var(--gold-deep); }
.g-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.g-btn.ghost {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 3px 0 var(--line);
}
.g-btn.ghost:hover:not(:disabled) { background: var(--surface-2); }
.g-btn:focus-visible, .g-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (pointer: coarse) { .g-btn { min-height: 44px; } }

/* Segmented chips */
.g-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.g-chip {
  font: inherit;
  font-weight: 650;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 15px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s;
}
.g-chip:hover { background: var(--surface-2); }
.g-chip[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }

/* Status line + overlays */
.g-status { min-height: 1.6em; margin: 10px 0 0; font-weight: 700; text-align: center; }
.g-overlay {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 16px;
  background: rgba(10, 14, 26, 0.68);
  z-index: 70;
}
.g-overlay.show { display: grid; }
.g-overlay .card {
  width: min(420px, 100%);
  padding: 30px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  animation: g-rise 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.g-overlay h2 { margin: 6px 0 8px; font-size: 1.7rem; letter-spacing: -0.01em; }
.g-overlay p { margin: 0 0 18px; color: var(--muted); }
@keyframes g-rise { from { transform: translateY(14px) scale(0.97); opacity: 0; } }

/* Back-to-portal pill and theme toggle (top corners of every simple game page) */
.back-link, .theme-toggle {
  position: fixed;
  top: max(14px, calc(env(safe-area-inset-top) + 8px));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  cursor: pointer;
  text-decoration: none;
}
.back-link { left: max(12px, env(safe-area-inset-left)); padding: 7px 14px; font: 700 0.85rem var(--font); border-radius: 999px; }
.back-link:hover, .theme-toggle:hover { background: var(--surface-2); }
.theme-toggle { justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; }
.theme-toggle-float { right: max(12px, env(safe-area-inset-right)); }
.theme-toggle:focus-visible, .back-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  body::before, body::after { animation: none !important; }
}