/* ISENGRID — base: reset, palette tokens, fonts, app layout.
   Palette source of truth: docs/design/ARTBIBLE.md §1.5 / §12.6. */

:root {
  /* ink & shadow */
  --ink-warm: #2b1d16; --ink-cool: #1d2430; --shadow-indigo: #2a2238;
  /* snow */
  --snow-lit: #f7eedd; --snow-base: #e9e0cd; --snow-shade: #c8c8d8; --snow-shadow: #a8aecb;
  /* fire */
  --ember-deep: #8a2c0d; --ember: #d4551c; --flame: #ff9f3f; --flame-hot: #ffc857; --flame-core: #fff3c4;
  /* gold */
  --gold-deep: #8a6d1f; --gold: #c9a227; --gold-lit: #f0d77b;
  /* wood */
  --wood-dark: #3f2b1c; --wood: #5a3d28; --wood-mid: #7a5638; --wood-lit: #9a7248;
  /* stone */
  --stone-dark: #574e42; --stone: #75695a; --stone-lit: #8c7f6d; --stone-hi: #b3a48d;
  /* pine */
  --pine-dark: #1f3a2d; --pine: #2e5240; --pine-mid: #3c6b4f; --pine-lit: #4f7f63;
  /* dusk */
  --night-deep: #1a1430; --indigo-deep: #1a1e30; --indigo: #232940; --indigo-mid: #2e3a59; --dusk-violet: #46406b;
  /* aurora */
  --aurora-green: #57d9a3; --aurora-teal: #36c9c0; --aurora-violet: #9d7bff; --aurora-mint: #7dffb3;
  /* parchment */
  --parch: #f2e3c2; --parch-mid: #e8d5ad; --parch-dark: #d9c294; --parch-ink: #3a2c1e;
  /* feedback */
  --invalid-red: #b33a2e; --hp-green: #6fd86b; --hp-amber: #e8c84a; --hp-red: #d8533c;
  --crit-amber: #ffc857; --amber-focus: #ffb347;
  /* element glows */
  --glow-kenaz: #ff8a3d; --glow-isa: #9fdcff; --glow-thurisaz: #a8b4ff; --glow-eihwaz: #b6e34b;
  --glow-tiwaz: #f2e8c8; --glow-fehu: #ffc23d; --glow-sowilo: #fff6d8; --glow-hagalaz: #9fb6d8;
  /* UI chrome */
  --ui-wood-top: #3a2f26; --ui-wood-bot: #2b211a; --ui-bevel-hi: #5a4a38; --ui-bevel-lo: #15100c; --ui-border: #1d1510;
  /* fonts */
  --font-flavor: Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--indigo-deep);
  color: var(--parch);
  font-family: var(--font-body);
  font-size: 14px;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

#app { width: 100%; height: 100%; position: relative; }

.screen { position: absolute; inset: 0; }
.screen[hidden] { display: none !important; }

/* in-game layout grid */
#screen-game {
  display: grid;
  grid-template-areas:
    "hud  hud"
    "play side"
    "bench side";
  grid-template-rows: 56px 1fr 96px;
  grid-template-columns: 1fr 280px;
}
#hud-top { grid-area: hud; }
#playfield {
  grid-area: play;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--ui-wood-bot);
  overflow: hidden;
  min-width: 0; min-height: 0;
}
#playfield canvas { display: block; touch-action: none; }
#panel-side { grid-area: side; }
#bench-dock { grid-area: bench; }

#tooltip {
  position: fixed; z-index: 1000; pointer-events: none;
  max-width: 320px;
}
#overlay-root { position: absolute; inset: 0; z-index: 500; pointer-events: none; }
#overlay-root > * { pointer-events: auto; }
#toast-root { position: fixed; top: 64px; right: 12px; z-index: 1100; pointer-events: none; }

h1, h2, h3, .flavor {
  font-family: var(--font-flavor);
  font-variant: small-caps;
  letter-spacing: 0.08em;
}
.num { font-variant-numeric: tabular-nums; }

/* ── UI scale (settings.uiScale 100/115/130 — ARTBIBLE §11.3) ───────────── */
html.ui-100 { font-size: 14px; }
html.ui-115 { font-size: 16.1px; }
html.ui-130 { font-size: 18.2px; }
body { font-size: 1rem; }

/* ── reduced motion (media query + settings class fallback) ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ── boot splash (removed by main.js after boot) ────────────────────────── */
#boot-splash {
  position: absolute; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--indigo-deep);
}
#boot-splash .splash-rune {
  font-size: 56px; color: var(--aurora-green);
  text-shadow: 0 0 18px rgba(87, 217, 163, 0.55);
  animation: splash-pulse 1.4s ease-in-out infinite;
}
#boot-splash .splash-text {
  font-family: var(--font-flavor); font-variant: small-caps;
  letter-spacing: 0.35em; font-size: 22px; color: var(--snow-lit);
}
#boot-splash .splash-bar {
  width: 180px; height: 4px; border-radius: 2px; overflow: hidden;
  background: var(--indigo);
}
#boot-splash .splash-bar span {
  display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--amber-focus), transparent);
  animation: splash-slide 1.2s linear infinite;
}
@keyframes splash-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes splash-slide { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

/* title-logo lives inside the title hero (menus.js adopts it) */
#title-logo { display: block; max-width: 92vw; height: auto; }