/**
 * YambPro "Game Night" design tokens.
 * Semantic tokens use literal hex so tokens.test.ts can verify contrast.
 * Palette reference (do not reference these names; use semantic tokens):
 *   felt-950 #0B201A  felt-900 #0F2A22  felt-800 #163A2F  felt-700 #1D4A3B
 *   ink-900  #1F2A24  ink-600  #5A6660
 *   paper-50 #FFFDF8  paper-100 #F6F1E7 paper-200 #EAE2D1
 *   cream-100 #EFE8D8 cream-400 #A9B5AE
 *   brass-400 #D6A54A brass-500 #B8862F brass-700 #7A561A
 *   oxblood-600 #9E3B2E oxblood-300 #E58B7C
 *   pine-700 #23664A  pine-300 #6FCF97
 */

:root {
  color-scheme: light;

  --bg: #F6F1E7;
  --surface: #FFFDF8;
  --surface-sunken: #EAE2D1;
  --sheet: #FFFDF8;
  --sheet-ink: #1F2A24;
  --sheet-muted: #5A6660;
  --sheet-rule: #EAE2D1;
  --text: #1F2A24;
  --text-muted: #5A6660;
  --border: #EAE2D1;
  --accent: #B8862F;
  --accent-text: #7A561A;
  --on-accent: #14201A;
  --danger: #9E3B2E;
  --on-danger: #FFFDF8;
  --success: #23664A;
  --focus: #7A561A;
  --die-face: #FFFDF8;
  --die-pip: #1F2A24;
  --die-edge: #D9CDB4;
  --held-ring: #7A561A;

  --cell-suggest: rgb(184 134 47 / 0.22);
  --overlay: rgb(31 42 36 / 0.55);
  --shadow-1: 0 1px 2px rgb(31 42 36 / 0.08), 0 2px 6px rgb(31 42 36 / 0.06);
  --shadow-2: 0 4px 10px rgb(31 42 36 / 0.10), 0 12px 28px rgb(31 42 36 / 0.10);
  --hero-glow: radial-gradient(ellipse at 70% 0%, rgb(184 134 47 / 0.16), transparent 60%);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0F2A22;
  --surface: #163A2F;
  --surface-sunken: #0B201A;
  --sheet: #F6F1E7;
  --sheet-ink: #1F2A24;
  --sheet-muted: #5A6660;
  --sheet-rule: #EAE2D1;
  --text: #EFE8D8;
  --text-muted: #A9B5AE;
  --border: #1D4A3B;
  --accent: #D6A54A;
  --accent-text: #D6A54A;
  --on-accent: #14201A;
  --danger: #E58B7C;
  --on-danger: #14201A;
  --success: #6FCF97;
  --focus: #D6A54A;
  --die-face: #F3ECDC;
  --die-pip: #1F2A24;
  --die-edge: #9C8D6C;
  --held-ring: #D6A54A;

  --cell-suggest: rgb(184 134 47 / 0.35);
  --overlay: rgb(11 32 26 / 0.7);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px rgb(0 0 0 / 0.25);
  --shadow-2: 0 6px 14px rgb(0 0 0 / 0.35), 0 16px 36px rgb(0 0 0 / 0.35);
  --hero-glow: radial-gradient(ellipse at 50% 0%, #1D4A3B, transparent 70%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0F2A22;
    --surface: #163A2F;
    --surface-sunken: #0B201A;
    --sheet: #F6F1E7;
    --sheet-ink: #1F2A24;
    --sheet-muted: #5A6660;
    --sheet-rule: #EAE2D1;
    --text: #EFE8D8;
    --text-muted: #A9B5AE;
    --border: #1D4A3B;
    --accent: #D6A54A;
    --accent-text: #D6A54A;
    --on-accent: #14201A;
    --danger: #E58B7C;
    --on-danger: #14201A;
    --success: #6FCF97;
    --focus: #D6A54A;
    --die-face: #F3ECDC;
    --die-pip: #1F2A24;
    --die-edge: #9C8D6C;
    --held-ring: #D6A54A;

    --cell-suggest: rgb(184 134 47 / 0.35);
    --overlay: rgb(11 32 26 / 0.7);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px rgb(0 0 0 / 0.25);
    --shadow-2: 0 6px 14px rgb(0 0 0 / 0.35), 0 16px 36px rgb(0 0 0 / 0.35);
    --hero-glow: radial-gradient(ellipse at 50% 0%, #1D4A3B, transparent 70%);
  }
}

/* Theme-independent tokens */
:root {
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --font-normal: 400;
  --font-medium: 600;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 800;

  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;

  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  --z-toast: 80;
  --z-maximum: 9999;

  --die-size: 56px;
  --dock-height: 200px;
  --header-height: 64px;
  --max-width-game: 1200px;
  --tap: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.7 var(--font-sans); }
a { color: var(--accent-text); text-underline-offset: 0.22em; }
a:hover { color: var(--text); }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
h1 { font-size: clamp(2.6rem, 6.5vw, 4.8rem); letter-spacing: -0.035em; max-width: 15ch; margin: 0.35em 0; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 0.6em; }
h3 { font-size: 1.4rem; margin: 0 0 0.4em; }
p { margin: 0 0 1em; max-width: 68ch; }

header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem max(1rem, calc((100vw - 1160px) / 2)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); text-decoration: none; font: 800 1.35rem/1 var(--font-serif); letter-spacing: -0.015em; }
header nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; font-weight: 600; }
header nav a, footer nav a { color: var(--text-muted); text-decoration: none; }
header nav a:hover, footer nav a:hover, nav a[aria-current="page"] { color: var(--accent-text); }

.theme-toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--border); }
.theme-toggle[hidden] { display: none; }
.theme-toggle button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; }
.theme-toggle button[aria-checked="true"] { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-1); }

main { max-width: 1160px; margin: 0 auto; padding: 0 1rem; }
section { padding: 4.5rem 0; border-top: 1px solid var(--border); }
section:first-child { border-top: 0; }
section[id], h2[id] { scroll-margin-top: 5rem; }

.hero { position: relative; padding: 5rem 0 4.5rem; }
.hero::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--hero-glow); }
.eyebrow { font: 700 0.78rem/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin: 0; }
.lead { font-size: 1.2rem; color: var(--text-muted); max-width: 58ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin: 1.75rem 0 0.75rem; }
.button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 52px; padding: 0 1.75rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.button:hover { color: var(--on-accent); background: color-mix(in srgb, var(--accent) 88%, #fff); }
.small, footer { font-size: 0.9rem; color: var(--text-muted); }

.dice-row { display: flex; gap: 0.9rem; margin-top: 2.5rem; }
.die { position: relative; display: block; width: 60px; height: 60px; }
.die.held { transform: translateY(-6px); }
.die__face { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 16%; background: var(--die-face); border-radius: 22%; box-shadow: 0 3px 0 var(--die-edge), var(--shadow-1); }
.die.held .die__face { outline: 3px solid var(--held-ring); outline-offset: 2px; }
.die__pip { width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--die-pip); place-self: center; }
.die__face[data-value="2"] .die__pip:nth-child(1), .die__face[data-value="3"] .die__pip:nth-child(1), .die__face[data-value="4"] .die__pip:nth-child(1), .die__face[data-value="5"] .die__pip:nth-child(1), .die__face[data-value="6"] .die__pip:nth-child(1) { grid-area: 1 / 1; }
.die__face[data-value="2"] .die__pip:nth-child(2), .die__face[data-value="3"] .die__pip:nth-child(3), .die__face[data-value="4"] .die__pip:nth-child(4), .die__face[data-value="5"] .die__pip:nth-child(5), .die__face[data-value="6"] .die__pip:nth-child(6) { grid-area: 3 / 3; }
.die__face[data-value="3"] .die__pip:nth-child(2), .die__face[data-value="5"] .die__pip:nth-child(3) { grid-area: 2 / 2; }
.die__face[data-value="4"] .die__pip:nth-child(2), .die__face[data-value="5"] .die__pip:nth-child(2), .die__face[data-value="6"] .die__pip:nth-child(2) { grid-area: 1 / 3; }
.die__face[data-value="4"] .die__pip:nth-child(3), .die__face[data-value="5"] .die__pip:nth-child(4), .die__face[data-value="6"] .die__pip:nth-child(5) { grid-area: 3 / 1; }
.die__face[data-value="6"] .die__pip:nth-child(3) { grid-area: 2 / 1; }
.die__face[data-value="6"] .die__pip:nth-child(4) { grid-area: 2 / 3; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem; box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.card p { color: var(--text-muted); }
.card a { margin-top: auto; font-weight: 700; }
.step { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 1rem; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: 800 1rem/1 var(--font-serif); }
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 0.75rem; max-width: 720px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-sunken); color: var(--accent-text); font: 800 1rem/1 var(--font-serif); }
.text-link { font-weight: 700; }
.note { padding: 1rem 1.25rem; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 12px 12px 0; }

details { max-width: 760px; border-bottom: 1px solid var(--border); }
summary { cursor: pointer; padding: 1.1rem 0; font: 700 1.1rem/1.4 var(--font-sans); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 800 1.4rem/1 var(--font-serif); color: var(--accent-text); }
details[open] summary::after { content: "\2212"; }
details p { color: var(--text-muted); }

.cta { text-align: center; margin: 2rem 0 4rem; padding: 4rem 1.5rem; border: 0; border-radius: 24px; background: var(--surface); background-image: var(--hero-glow); box-shadow: var(--shadow-2); }
.cta p { margin-left: auto; margin-right: auto; color: var(--text-muted); }

.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--sheet); color: var(--sheet-ink); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 0.75rem 1rem; font-weight: 700; color: var(--sheet-muted); }
th, td { padding: 0.7rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sheet-rule); }
th { font-weight: 700; color: var(--sheet-ink); }
td { color: var(--sheet-ink); }
tr:last-child td, tr:last-child th { border-bottom: 0; }
figure { margin: 2rem 0; }
svg { max-width: 100%; height: auto; }
figcaption { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.5rem; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; padding: 0.5rem 1rem; background: var(--accent); color: var(--on-accent); border-radius: 8px; }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; max-width: 1160px; margin: 0 auto; padding: 2.5rem 1rem 3rem; border-top: 1px solid var(--border); }
footer p { margin: 0; font-family: var(--font-serif); font-weight: 600; color: var(--text); }
footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

@media (max-width: 760px) {
  header { flex-wrap: wrap; gap: 0.75rem; }
  header nav { order: 3; width: 100%; margin-left: 0; gap: 1rem; font-size: 0.95rem; }
  .theme-toggle { margin-left: auto; }
  .cards { grid-template-columns: 1fr; }
  .hero { padding: 3rem 0; }
  section { padding: 3rem 0; }
  .die { width: 52px; height: 52px; }
  .dice-row { gap: 0.8rem; }
  .lead { font-size: 1.08rem; }
  th, td { padding: 0.6rem 0.7rem; }
}
@media (max-width: 360px) {
  .die { width: 44px; height: 44px; }
  .dice-row { gap: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .die.held { transform: none; } }
@media print {
  body { background: #fff; color: #000; }
  header, footer, .cta, .theme-toggle, .actions, .dice-row { display: none; }
  main { max-width: none; }
  section, .hero { padding: 1rem 0; border: 0; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.4rem; }
  .card, table, figure { break-inside: avoid; box-shadow: none; }
  a { color: #000; }
  .cards { grid-template-columns: 1fr; }
}