/*
 * Design-system chrome components (ARCHITECTURE §9).
 * Visual reference: prototypes/v2/index.html — same look, class-based
 * structure (the prototype's id/DOM structure is not forked).
 *
 * Every color, spacing value, and duration comes from a design token
 * (core/design/tokens.js), injected on :root as --* custom properties by
 * applyTokens() at boot. Hardcoding any of those here is a task failure
 * (TODO 0.3).
 */

/* ---------- self-hosted display font (task 5.3) ----------
   Fredoka variable (weight 300–700), OFL-licensed — license file sits
   alongside the woff2 in core/design/fonts/. Two files, split by
   unicode-range so browsers fetch latin-ext only when a glyph needs it.
   font-display: swap + the token fallback stack (--font-display →
   "Arial Black" etc.) mean text is never invisible and degrades
   gracefully if the files fail to load. Long-cache policy: _headers
   (/core/design/fonts/*); a changed font ships under a NEW FILENAME. */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/core/design/fonts/fredoka-v17-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/core/design/fonts/fredoka-v17-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-display);
  background: linear-gradient(var(--color-bg-deep), var(--color-bg-night));
  color: var(--color-ink);
  overflow: hidden;
}
[hidden], .hidden { display: none !important; }

/* ---------- layout roots ---------- */
#stage {
  position: fixed; inset: 0; z-index: var(--z-canvas);
  width: 100%; height: 100%; display: block;
}
#chrome { position: fixed; inset: 0; }

/* ---------- overlay screens (title, camp, end, settings) ---------- */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-6); text-align: center; user-select: none;
  background: radial-gradient(circle at 50% 35%, var(--color-overlay-center), var(--color-bg-deep) 75%);
}
.overlay--scrim { background: var(--color-scrim); }

.title {
  font-size: var(--type-title);
  letter-spacing: var(--tracking-xl);
  color: var(--color-cyan);
  text-shadow: var(--glow-title);
}
.subtitle {
  font-size: var(--type-md);
  color: var(--color-dim);
  letter-spacing: var(--tracking-md);
  text-transform: uppercase;
}
.blink {
  font-size: var(--type-2xl);
  color: var(--color-yellow);
  letter-spacing: var(--tracking-md);
  animation: blink var(--duration-blink) steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- cards ---------- */
.card {
  background: var(--color-surface);
  border: var(--border-thick) solid var(--color-cyan);
  border-radius: var(--radius-xl);
  padding: var(--space-9) var(--space-12);
  display: flex; flex-direction: column;
  gap: var(--space-4); align-items: center;
  box-shadow: var(--glow-card);
}
.card__cat { font-size: var(--type-hero); }
.card__cat img { height: var(--size-cat-mascot); width: auto; display: block; }
.card__title { font-size: var(--type-5xl); letter-spacing: var(--tracking-lg); }
.card__score { font-size: var(--type-xl); color: var(--color-yellow); }
.card__body {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--color-dim);
  max-width: var(--size-measure-narrow);
}

.big-btn {
  font: inherit;
  font-size: var(--type-xl);
  letter-spacing: var(--tracking-md);
  padding: var(--space-4) var(--space-11);
  border: var(--border-thick) solid var(--color-yellow);
  border-radius: var(--radius-pill);
  background: var(--color-yellow);
  color: var(--color-on-accent);
  cursor: pointer;
  box-shadow: var(--glow-button);
}
.big-btn:active { transform: translateY(var(--space-1)); }
.big-btn--small { font-size: var(--type-sm); }
.card__buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.card__buttons .big-btn { box-shadow: none; }

/* Radio row (grown-ups settings choices). */
.radio-row { display: flex; gap: var(--space-4); }
.radio-row label {
  font-size: var(--type-lg);
  background: var(--color-surface-glass);
  border: var(--border-thin) solid var(--color-cyan);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}
.radio-row input { accent-color: var(--color-yellow); margin-right: var(--space-2); }

/* ---------- HUD ---------- */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-hud);
  display: flex; align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-5);
  pointer-events: none;
}
.hud-box { font-size: var(--type-lg); letter-spacing: var(--tracking-sm); }
.hud-box > span { color: var(--color-yellow); }
.hud-box--combo > span { color: var(--color-pink); }
.hud-bar {
  flex: 1;
  height: var(--size-bar-height);
  border: var(--border-thin) solid var(--color-cyan);
  border-radius: var(--radius-pill);
  background: var(--color-track);
  overflow: hidden;
}
.hud-bar__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--color-cyan), var(--color-yellow));
  transition: width var(--duration-fast) var(--easing-out);
}
.hud-gear {
  pointer-events: auto;
  background: none;
  border: var(--border-thin) solid var(--color-border-soft);
  color: var(--color-ink);
  font-size: var(--type-md);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

/* ---------- banner (mid-screen flash announcements) ---------- */
.banner {
  position: fixed; top: 34%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: var(--z-banner);
  font-size: var(--type-banner);
  color: var(--color-yellow);
  letter-spacing: var(--tracking-lg);
  text-shadow: var(--glow-banner);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: opacity var(--duration-med) var(--easing-out),
    transform var(--duration-med) var(--easing-out);
}
.banner small {
  display: block;
  font-size: var(--type-md);
  color: var(--color-ink);
  letter-spacing: var(--tracking-sm);
  margin-top: var(--space-2);
}
.banner--show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Reduced motion (fx.js): keep the fade, drop the scale pop. */
.banner--fade-only { transition-property: opacity; }

/* ---------- fx impact flash (reduced-motion shake degrade; fx.js, task 2.3) ---------- */
.fx-flash {
  position: fixed; inset: 0;
  z-index: var(--z-fx); /* over the gameplay canvas, under HUD/banner chrome */
  background: var(--color-cyan);
  opacity: 0; /* fx.js tweens inline opacity; this is only the resting state */
  pointer-events: none;
}

/* ---------- pause (auto-shown on tab blur; overlays.js, task 2.2) ---------- */
.pause {
  position: fixed; inset: 0; z-index: var(--z-pause);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-6); text-align: center; user-select: none;
  background: var(--color-scrim); /* the paused game stays visible, dimmed */
  cursor: pointer; /* the whole overlay is the resume click target */
}
.pause__title {
  font-size: var(--type-title);
  letter-spacing: var(--tracking-xl);
  color: var(--color-cyan);
  text-shadow: var(--glow-title);
}

/* ---------- min-window notice (auto-managed by overlays.js, task 2.2) ---------- */
.min-window {
  position: fixed; inset: 0; z-index: var(--z-min-window);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-4); text-align: center; user-select: none;
  padding: var(--space-6);
  /* Opaque full replacement screen — gameplay chrome sits below it. */
  background: radial-gradient(circle at 50% 35%, var(--color-overlay-center), var(--color-bg-deep) 75%);
}
.min-window__cat { font-size: var(--type-hero); }
.min-window__cat img { height: var(--size-cat-mascot); width: auto; display: block; }
.min-window__title {
  font-size: var(--type-banner);
  letter-spacing: var(--tracking-lg);
  color: var(--color-yellow);
  text-shadow: var(--glow-banner);
}
.min-window__body {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--color-dim);
  max-width: var(--size-measure-narrow);
}

/* ---------- camp keys (tutorial kit visuals) ---------- */
.camp-text {
  font-size: var(--type-3xl);
  max-width: var(--size-measure-wide);
  line-height: var(--leading-relaxed);
}
.camp-text b { color: var(--color-yellow); }
.camp-keys { display: flex; gap: var(--space-6); }
.camp-key {
  width: var(--size-camp-key);
  height: var(--size-camp-key);
  border: var(--border-thick) solid var(--color-cyan);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--type-4xl);
  color: var(--color-cyan);
  position: relative;
  box-shadow: var(--glow-key);
  background: var(--color-surface-glass);
}
/* Home-row "bump" mark under the glyph. */
.camp-key::after {
  content: "";
  position: absolute;
  bottom: var(--space-3); left: 50%;
  transform: translateX(-50%);
  width: var(--size-camp-key-mark);
  height: var(--size-camp-key-mark-thickness);
  background: var(--color-yellow);
  border-radius: var(--radius-sm);
}
.camp-key--glow { animation: key-glow var(--duration-key-glow) infinite alternate; }
@keyframes key-glow {
  from { box-shadow: var(--glow-key-pulse-from); }
  to { box-shadow: var(--glow-key-pulse-to); }
}
.camp-hint { font-size: var(--type-sm); color: var(--color-dim); }
.camp-hint b { color: var(--color-cyan); }
/* Tutorial-kit panel (task 4.1): the .camp-* parts stacked with breathing room. */
.tutorial-kit .camp-keys { margin: var(--space-4) 0; }