/* StellarMods design tokens — v3 "Ember".
   Warm brown-black base, ember-orange gradient accent, warm glass
   surfaces (ported from the approved Ember / Left-aligned design).
   Components consume these variables only; a future light theme =
   redefining this token block, and per-game theming = setting
   --game-accent (and optionally --game-accent-2) on a card/section/page. */

:root {
  color-scheme: dark;

  /* Base — warm brown-black, never pure black */
  --bg-0: #0d0a07;   /* deepest (mockup --bg-deep) */
  --bg-1: #14100c;   /* page base (mockup --bg) */
  --bg-2: #1a140d;   /* raised warm charcoal */
  --bg-3: #241b12;   /* solid panel (mockup --panel-solid) */

  /* Glass — warm translucent surfaces */
  --glass-1: rgba(46, 35, 24, 0.55);   /* mockup --panel */
  --glass-2: rgba(60, 45, 29, 0.38);   /* mockup --panel-soft */
  --glass-strong: rgba(20, 16, 12, 0.85);
  --glass-line: rgba(245, 214, 160, 0.13);  /* mockup --line */
  --blur: 14px;

  /* Borders & shadow */
  --border-1: rgba(245, 214, 160, 0.08);  /* mockup --line-soft */
  --border-2: rgba(245, 214, 160, 0.19);
  --shadow-1: 0 18px 44px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* Text — warm off-whites, contrast-checked on --bg-1 */
  --text-1: #f5ede1;   /* mockup --text */
  --text-2: #b3a189;   /* mockup --muted */
  --text-3: #8a7a63;   /* mockup --faint */

  /* Signature accent — starlight amber into ember orange */
  --accent: #f5b83d;
  --accent-strong: #ffc95e;
  --ember: #e2641e;
  --accent-grad: linear-gradient(120deg, #f5b83d 0%, #ee8a2a 55%, #e2641e 100%);
  --accent-dim: rgba(245, 184, 61, 0.14);
  --accent-glow: rgba(238, 138, 42, 0.35);
  --accent-ink: #2a1503;

  /* Per-game accents — set per card/section/page */
  --game-accent: var(--accent);
  --game-accent-2: var(--game-accent);

  /* Status */
  --ok: #57c785;
  --warn: #e0a23c;
  --danger: #e5636a;
  --info: #6aa8e0;

  /* Type — system stack only; zero external requests */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --fs-xs: 0.78rem;
  --fs-sm: 0.92rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;
  --lh-tight: 1.08;
  --lh-body: 1.65;

  /* Spacing scale — deliberately generous */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3.5rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;

  /* Layout rhythm (Ember scale) */
  --page-max: 1200px;
  --page-pad: clamp(1.25rem, 4vw, 2rem);   /* 20px → 32px */
  --section-pad: 6rem;                      /* 96px */
  --card-pad: clamp(1.5rem, 2.2vw, 1.75rem); /* 24px → 28px (~26px) */
  --grid-gap: clamp(1.25rem, 2.4vw, 1.75rem);
  --header-h: 74px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;   /* mockup --radius */
  --r-xl: 24px;
  --r-pill: 999px;

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
}

@media (max-width: 700px) {
  :root { --section-pad: 3.5rem; } /* 56px section rhythm on mobile */
}

/* Base reset + primitives shared by every page */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(820px 400px at 30% -160px, rgba(226, 100, 30, 0.08), transparent 60%),
    radial-gradient(680px 460px at 85% 30%, rgba(245, 184, 61, 0.025), transparent 58%),
    radial-gradient(120% 90% at 50% 0%, #1a140d 0%, var(--bg-1) 46%, var(--bg-0) 100%);
  background-color: var(--bg-1);
  color: var(--text-1);
  font: 400 var(--fs-md)/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Gentle grain + vignette, as in the Ember mockup */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 235, 200, 0.006) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 235, 200, 0.005) 0 1px, transparent 1px 3px),
    radial-gradient(130% 105% at 50% 42%, transparent 64%, rgba(5, 3, 2, 0.32) 100%);
}

h1, h2, h3 { font-family: var(--font-display); line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

::selection { background: rgba(245, 184, 61, 0.35); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); font-weight: 700;
}
.skip-link:focus { top: var(--sp-4); text-decoration: none; }

.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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