/* Cinematic Wordcraft tokens from design_tokens.md; scoped to the game guide. */
:root {
  --guide-ink: #111C2B;
  --guide-elevated: #1B2B3E;
  --guide-midnight: #243B55;
  --guide-text: #F8F3E8;
  --guide-muted: #BCC6CF;
  --guide-gold: #F2C14E;
  --guide-amber: #FFAA2B;
  --guide-frame: #173E3A;
  --guide-cell: #E5D7C1;
  --guide-grid: #BEAE96;
  --guide-letter-double: #CBDDDF;
  --guide-letter-triple: #A9C8CE;
  --guide-word-double: #E2CBC4;
  --guide-word-triple: #CAA69E;
  --guide-bonus-letter: #384B51;
  --guide-bonus-word: #513C37;
  --guide-tile: #F2D092;
  --guide-tile-light: #FFE7B7;
  --guide-tile-edge: #B77A3F;
  --guide-tile-letter: #2B2016;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--guide-ink); color: var(--guide-text); font: 17px/1.7 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--guide-gold); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--guide-gold); outline-offset: 4px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 12px 20px; background: var(--guide-gold); color: var(--guide-ink); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.guide-shell { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.guide-header { border-bottom: 1px solid var(--guide-midnight); }
.guide-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 20px; }
.guide-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--guide-text); font-size: 24px; font-weight: 800; text-decoration: none; }
.guide-brand img { width: 44px; height: 44px; border-radius: 12px; }
.guide-brand span span { color: var(--guide-amber); }
.guide-home, .guide-languages a { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 12px; }
.guide-languages { display: flex; flex-wrap: wrap; gap: 4px; }
.guide-languages a { border-radius: 8px; color: var(--guide-muted); }
.guide-languages a[aria-current="page"] { background: var(--guide-elevated); color: var(--guide-gold); }
.guide-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 48px; align-items: center; padding-block: 64px 48px; }
.guide-eyebrow { margin: 0 0 12px; color: var(--guide-gold); font-size: 14px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.12; letter-spacing: -.04em; margin: 0 0 24px; overflow-wrap: anywhere; }
.guide-intro { font-size: 20px; color: var(--guide-muted); margin: 0; max-width: 58ch; }
.guide-hero figure { margin: 0; min-width: 0; }
.guide-rack { display: flex; gap: 6px; padding: 18px 10px 22px; background: var(--guide-midnight); border-radius: 18px; border: 1px solid var(--guide-tile-edge); }
.guide-tile { flex: 1; min-width: 0; display: grid; place-content: center; min-height: 58px; border-radius: 8px; background: linear-gradient(140deg, var(--guide-tile-light), var(--guide-tile)); color: var(--guide-tile-letter); font-size: clamp(19px, 3vw, 28px); font-weight: 850; box-shadow: 0 4px 0 var(--guide-tile-edge); }
.guide-hero figcaption { margin-top: 18px; font-size: 14px; color: var(--guide-muted); }
.guide-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 64px; }
.guide-toc { position: sticky; top: 24px; border-left: 2px solid var(--guide-midnight); padding-left: 20px; }
.guide-toc summary { font-weight: 750; color: var(--guide-gold); padding: 8px 0; min-height: 48px; cursor: pointer; }
.guide-toc ol { margin: 12px 0 0; padding-left: 22px; color: var(--guide-muted); }
.guide-toc a { display: block; min-height: 44px; padding: 8px 0; color: var(--guide-muted); font-size: 15px; text-decoration: none; }
.guide-toc a:hover { color: var(--guide-gold); }
.guide-content { min-width: 0; }
.guide-section { padding: 8px 0 36px; margin-bottom: 28px; border-bottom: 1px solid var(--guide-midnight); scroll-margin-top: 24px; }
h2 { margin: 0 0 20px; font-size: clamp(26px, 3vw, 34px); line-height: 1.25; letter-spacing: -.025em; }
.guide-section p { margin: 0 0 18px; max-width: 75ch; }
.guide-section ul { padding-left: 24px; margin: 0 0 24px; }
.guide-section li { padding-left: 4px; margin-bottom: 10px; }
.guide-section li::marker { color: var(--guide-gold); }
.guide-section .section-number { display: block; color: var(--guide-gold); font-size: 13px; font-weight: 750; letter-spacing: .1em; margin-bottom: 10px; }
.guide-table-scroll { max-width: 100%; overflow-x: auto; border-radius: 12px; margin-block: 24px; border: 1px solid var(--guide-midnight); }
.guide-table-scroll:focus-visible { outline-offset: -4px; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: 16px; }
caption { text-align: left; padding: 14px 16px; color: var(--guide-gold); font-weight: 700; background: var(--guide-elevated); }
th, td { padding: 14px 16px; vertical-align: top; border-bottom: 1px solid var(--guide-midnight); overflow-wrap: anywhere; min-width: 115px; }
th { background: var(--guide-elevated); font-weight: 700; color: var(--guide-text); }
tr:last-child td { border-bottom: 0; }
.guide-bonus-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 18px; margin: 24px 0; background: var(--guide-frame); border-radius: 18px; }
.guide-bonus { text-align: center; padding: 16px 8px; border-radius: 8px; font-size: 24px; font-weight: 750; }
.guide-bonus.letter-double { background: var(--guide-letter-double); color: var(--guide-bonus-letter); }
.guide-bonus.letter-triple { background: var(--guide-letter-triple); color: var(--guide-bonus-letter); }
.guide-bonus.word-double { background: var(--guide-word-double); color: var(--guide-bonus-word); }
.guide-bonus.word-triple { background: var(--guide-word-triple); color: var(--guide-bonus-word); }
.guide-footer { background: var(--guide-elevated); padding-block: 32px; }
.guide-footer-inner { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.guide-footer p { margin: 0; color: var(--guide-muted); }
.guide-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.guide-footer a { display: inline-flex; align-items: center; min-height: 48px; }
@media (max-width: 900px) {
  .guide-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .guide-hero figure { max-width: 420px; }
  .guide-layout { grid-template-columns: 1fr; gap: 32px; }
  .guide-toc { position: static; padding: 16px 20px; background: var(--guide-elevated); border-left-color: var(--guide-gold); border-radius: 12px; }
  .guide-toc ol { columns: 2; column-gap: 32px; }
  .guide-toc li { break-inside: avoid; }
}
@media (max-width: 480px) {
  .guide-shell { width: calc(100% - 32px); }
  .guide-home { padding-inline: 0; }
  .guide-languages { width: 100%; }
  .guide-languages a { padding-inline: 10px; }
  .guide-toc ol { columns: 1; }
  .guide-bonus-legend { gap: 6px; padding: 12px; }
  .guide-bonus { padding: 12px 4px; font-size: 20px; }
  th, td { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  body { background: white; color: #17212B; font-size: 11pt; }
  .guide-header, .guide-toc, .guide-footer, .skip-link, .guide-hero figure { display: none; }
  .guide-shell { width: 100%; }
  .guide-hero, .guide-layout { display: block; padding: 0; }
  .guide-intro, .guide-eyebrow, .guide-section .section-number { color: #17212B; }
  .guide-section { break-inside: avoid; }
  th, caption { background: #F4EDE1; color: #17212B; }
  .guide-table-scroll { overflow: visible; }
}