/* ══════════════════════════════════════════════════════════
   WFCheat — Shared Design System
   Generated from /extract + /normalize + /harden + /polish
   ══════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* Easing curves — natural deceleration, never bounce/elastic */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-circ:  cubic-bezier(0, 0.55, 0.45, 1);
  --ease-in-quart:  cubic-bezier(0.5, 0, 0.75, 0);
  /* Core palette */
  --board:        #2b5329;
  --board-dark:   #1a3317;
  --tile:         #f5e6c8;
  --tile-dark:    #e8d5a8;
  --wood:         #7a3e1a;
  --wood-dark:    #4a2210;
  --wood-hover:   #8b4a22;
  --gold:         #c8860a;
  --text:         #1a0a00;
  --light:        #f0e8d8;
  --muted:        #b8a88a;
  --radius:       14px;

  /* Board multiplier colors */
  --mult-dl:      #4a7c39;
  --mult-dw:      #a85a12;
  --mult-tl:      #1e5a8a;
  --mult-tw:      #8a1e1e;

  /* Bag tile state colors */
  --bag-many:     #c8e6b0;
  --bag-some:     #e8d5a8;
  --bag-few:      #f5d08a;
  --bag-last:     #f0a0a0;
  --bag-gone:     #d0c8b8;

  /* Upload drop zone */
  --upload-border:       rgba(107,158,90,0.55);
  --upload-border-hover: rgba(158,203,142,0.9);

  /* Strategic card header — in-palette deep forest green */
  --strategic-header:    #1d4a1a;

  /* Error / status */
  --error:        #c0392b;
  --error-dark:   #922b21;
  --success:      #2d7a2a;

  /* Focus ring */
  --focus-ring:   rgba(200,134,10,0.5);

  /* Spacing scale (4pt base) */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Type scale (fixed rem — app UI) */
  --text-xs:   0.72rem;   /* ~11.5px — captions  */
  --text-sm:   0.8125rem; /* ~13px   — labels     */
  --text-base: 1rem;      /* 16px    — body       */
  --text-lg:   1.125rem;  /* 18px    — subheadings */
  --text-xl:   1.4rem;    /* ~22px   — section headings */
  --text-2xl:  1.75rem;   /* 28px    — page titles */

  /* Line heights */
  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-body:    1.55;
  --lh-relaxed: 1.7;
}

/* ── CSS Reset ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base Body ──────────────────────────────────────────── */
body {
  background: linear-gradient(160deg, var(--board-dark) 0%, var(--board) 55%, var(--board-dark) 100%);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-kerning: normal;
  min-height: 100vh;
}

/* ── Back / Nav Button ──────────────────────────────────── */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  min-height: 44px;
  min-width: 44px;
  background: var(--wood);
  color: var(--light);
  text-decoration: none;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--wood-dark);
  transition: background 0.2s, transform 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn-back:hover  { background: var(--wood-hover); transform: translateY(-1px); }
.btn-back:active { transform: translateY(1px); }
.btn-back:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.btn-back svg { flex-shrink: 0; pointer-events: none; }

/* ── Card ───────────────────────────────────────────────── */
.card {
  background: var(--tile);
  border: 2px solid var(--wood);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.55);
  overflow: hidden;
}
.card-header {
  background: var(--wood);
  color: var(--light);
  padding: 0.8rem 1.2rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Screen-Reader Only Utility ─────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }
}