/* =========================================================
   GAMEHENDGE — Design tokens
   Aesthetic: cinematic, editorial, restrained.
   Inspired by isaacholze.com section-panel system.
   ========================================================= */

:root {
  /* Type */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Scale */
  --step--2: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --step--1: clamp(0.88rem, 0.83rem + 0.25vw, 0.96rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.3vw, 1.10rem);
  --step-1:  clamp(1.18rem, 1.08rem + 0.5vw, 1.32rem);
  --step-2:  clamp(1.42rem, 1.25rem + 0.85vw, 1.68rem);
  --step-3:  clamp(1.78rem, 1.45rem + 1.6vw, 2.34rem);
  --step-4:  clamp(2.30rem, 1.75rem + 2.7vw, 3.40rem);
  --step-5:  clamp(3.00rem, 2.10rem + 4.4vw, 5.20rem);
  --step-6:  clamp(4.00rem, 2.50rem + 7.5vw, 8.40rem);

  /* Base palette — matches site dark default */
  --ink:        #f1efe9;
  --ink-soft:   #c8cbc1;
  --ink-mute:   #7a857c;
  --bg:         #060806;
  --bg-soft:    #0a0d0a;
  --bg-elev:    #10140f;

  /* Forest accents — used across landing + game shell */
  --forest-deep:   #1a3a2a;   /* deep evergreen */
  --forest-mid:    #2f5a44;   /* mid moss */
  --forest-bright: #6db28b;   /* lit pine */
  --forest-pale:   #a9cdb8;   /* dawn sage */
  --forest-edge:   rgba(109, 178, 139, 0.35);

  /* Chapter palettes (each panel changes mood) */

  /* Act I — Threshold (cream / warm) */
  --c1-bg:     #e6e0d6;
  --c1-bg-2:   #ddd5c7;
  --c1-ink:    #1a1814;
  --c1-mute:   #57523f;
  --c1-accent: #6b4a2b;

  /* Act II — Forest (deep green / amber) */
  --c2-bg:     #0e1a14;
  --c2-bg-2:   #142519;
  --c2-ink:    #e7e2d3;
  --c2-mute:   #8aa294;
  --c2-accent: #d6b16a;

  /* Act III — Mountain (cold pine / stone) */
  --c3-bg:     #1d2522;
  --c3-bg-2:   #131815;
  --c3-ink:    #e6ece5;
  --c3-mute:   #94a89a;
  --c3-accent: #a9cdb8;

  /* Act IV — Tower (deep gold / amber) */
  --c4-bg:     #1a1408;
  --c4-bg-2:   #100c05;
  --c4-ink:    #f5e9c8;
  --c4-mute:   #b39a66;
  --c4-accent: #e7b958;

  /* Endings — sage / consequence */
  --c5-bg:     #a8d5cb;
  --c5-bg-2:   #8fc4b9;
  --c5-ink:    #0f1f1c;
  --c5-mute:   #2f5048;
  --c5-accent: #1a3f37;

  /* Layout */
  --measure: 64ch;
  --rad-sm: 2px;
  --rad-md: 6px;
  --rad-lg: 14px;
  --pad-block: clamp(2rem, 4vw, 5rem);
  --pad-inline: clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --dur-fast: 220ms;
  --dur:      420ms;
  --dur-slow: 900ms;
}

/* =========================================================
   Reset & base
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { opacity: 0.7; }

::selection { background: var(--forest-bright); color: #060806; }

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