/* ==========================================================================
   Laura & Ian • 15th Anniversary Trail - Bundled Production Stylesheet
   Generated automatically by scripts/build.py
   ========================================================================== */

/* --- Module: tokens.css --- */
/* ==========================================================================
   Design Tokens — GENERATED FILE, DO NOT EDIT BY HAND.

   Source of truth:
     data/theme_defaults.yaml   engine themes (palette, type, spacing, pacing)
     data/tokens.yaml           this project's `theme:` + overrides

   Regenerate with: python3 scripts/build.py
   Active theme:    adventure_roadtrip (Adventure Roadtrip)
   ========================================================================== */

/* Active theme: Adventure Roadtrip — Autumn byways, orchard stands, and leather-bound trail dossiers. */
:root {
  --theme-name: 'adventure_roadtrip';
  --canvas: #F4EFEA;
  --card-front: #FFFFFF;
  --card-back: #FCFAF6;
  --card-detour: #F9F5EE;
  --forest: #222E21;
  --forest-deep: #162016;
  --forest-light: #344433;
  --terracotta: #B54728;
  --terracotta-soft: #D96041;
  --amber: #D5841D;
  --amber-light: #FCF4E8;
  --wine: #742537;
  --sage: #4B6853;
  --ink: #221C17;
  --ink-muted: #6B6258;
  --leather-base: #382516;
  --leather-edge: #23160D;
  --parchment: #F8F3E6;
  --parchment-border: #D8CBB6;
  --gold: #C08A2E;
  --sign-accent: #FFDDA6;
  --alert: #FF9A8B;
  --wood-dark: #322114;
  --wood-grain: #4A321E;
  --washi-tape: rgba(236, 220, 192, 0.92);
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-hand: 'Caveat', cursive;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-size-2xs: 0.64rem;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.78rem;
  --font-size-base: 0.88rem;
  --font-size-md: 1.0rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: 1.6rem;
  --page-pad-bottom: 270px;
  --radius-3xs: 2px;
  --radius-2xs: 4px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --card-radius: 16px;
  --pill-radius: 999px;
  --bg-page-color: var(--canvas);
  --bg-page-image: radial-gradient(rgba(181, 71, 40, 0.035) 1px, transparent 1px), radial-gradient(rgba(34, 46, 33, 0.035) 1px, transparent 1px);
  --bg-page-size: 28px 28px, 28px 28px;
  --bg-page-position: 0 0, 14px 14px;
  --bg-page-attachment: scroll, scroll;
  --bg-gate: radial-gradient(circle at 50% 25%, #243423 0%, #131E12 70%, #0A110A 100%);
  --bg-gate-card: linear-gradient(180deg, #382416 0%, #25160C 55%, #190E07 100%);
  --bg-gate-card-border: #8B6547;
  --bg-flag: #D5841D;
  --bg-flag-color: #1F2A1E;
  --bg-header: rgba(24, 34, 24, 0.98);
  --bg-header-border: rgba(255, 255, 255, 0.14);
  --bg-logo-pill: linear-gradient(135deg, var(--terracotta) 0%, #8C2C13 100%);
  --bg-logo-pill-color: #FFFFFF;
  --bg-day-tag: var(--forest);
  --bg-day-tag-border: #FFFFFF;
  --bg-theme-color: #182218;
  --z-behind: -1;
  --z-ambient: 10;
  --z-delight: 25;
  --z-header: 120;
  --z-compass: 220;
  --z-dock: 300;
  --z-folio: 500;
  --z-qr: 600;
  --z-gate: 900;
  --z-switcher: 950;
  --z-modal: 1000;
  --z-modal-top: 1100;
  --dur-instant: 0.15s;
  --dur-fast: 0.2s;
  --dur-base: 0.28s;
  --dur-slow: 0.45s;
  --dur-deliberate: 0.7s;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0.0, 1, 1);
  --ambient-particle-shape: leaf;
  --ambient-particle-colors: #B54728, #D5841D, #8C5C38;
  --ambient-particle-count: 9;
  --ambient-particle-opacity: 0.65;
  --ambient-particle-size: 22;
  --elevation-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --elevation-card: 0 10px 28px rgba(34, 46, 33, 0.08);
  --elevation-card-hover: 0 14px 34px rgba(34, 46, 33, 0.12);
  --elevation-card-raised: 0 18px 42px rgba(0, 0, 0, 0.28);
  --elevation-overlay: 0 24px 60px rgba(0, 0, 0, 0.5);
  --elevation-chip: 0 2px 4px rgba(0, 0, 0, 0.1);
  --elevation-inset: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  --pacing-shared-bg: #FCF4E8;
  --pacing-shared-color: #784606;
  --pacing-active-bg: #EBF2EC;
  --pacing-active-color: #204627;
  --pacing-unwind-bg: #F7EDE9;
  --pacing-unwind-color: #7D2912;
  --chip-shared-bg: var(--sage);
  --chip-shared-ink: #FFFFFF;
  --chip-active-bg: var(--wine);
  --chip-active-ink: #FFFFFF;
  --chip-unwind-bg: var(--forest-light);
  --chip-unwind-ink: #FFFFFF;
  --chip-amber-bg: var(--amber);
  --chip-amber-ink: #1F1A12;
  --chip-orchard-bg: var(--terracotta);
  --chip-orchard-ink: #FFFFFF;
  --chip-wood-bg: var(--leather-base);
  --chip-wood-ink: #FFFFFF;
  --chip-moss-bg: var(--sage);
  --chip-moss-ink: #FFFFFF;
  --chip-wine-bg: var(--wine);
  --chip-wine-ink: #FFFFFF;
  --chip-sepia-bg: var(--ink-muted);
  --chip-sepia-ink: #FFFFFF;
  --chip-tunnel-bg: var(--forest-deep);
  --chip-tunnel-ink: #FFFFFF;
  --surface-badge-bg: var(--forest-deep);
  --surface-badge-ink: #FFFFFF;
  --surface-badge-ink-muted: #BEC1BE;
  --surface-badge-veil: rgba(255, 255, 255, 0.06);
  --surface-badge-line: rgba(255, 255, 255, 0.16);
  --surface-badge-fill: rgba(255, 255, 255, 0.24);
  --surface-badge-well: rgba(31, 26, 18, 0.3);
  --surface-action-bg: var(--forest);
  --surface-action-ink: #FFFFFF;
  --surface-action-ink-muted: #C1C4C1;
  --surface-action-veil: rgba(255, 255, 255, 0.06);
  --surface-action-line: rgba(255, 255, 255, 0.16);
  --surface-action-fill: rgba(255, 255, 255, 0.24);
  --surface-action-well: rgba(31, 26, 18, 0.3);
  --surface-sign-bg: var(--wood-dark);
  --surface-sign-ink: #FFFFFF;
  --surface-sign-ink-muted: #C6C1BD;
  --surface-sign-veil: rgba(255, 255, 255, 0.06);
  --surface-sign-line: rgba(255, 255, 255, 0.16);
  --surface-sign-fill: rgba(255, 255, 255, 0.24);
  --surface-sign-well: rgba(31, 26, 18, 0.3);
  --surface-panel-bg: var(--leather-edge);
  --surface-panel-ink: #FFFFFF;
  --surface-panel-ink-muted: #C1BEBB;
  --surface-panel-veil: rgba(255, 255, 255, 0.06);
  --surface-panel-line: rgba(255, 255, 255, 0.16);
  --surface-panel-fill: rgba(255, 255, 255, 0.24);
  --surface-panel-well: rgba(31, 26, 18, 0.3);
}

/* Theme: Adventure Roadtrip — Autumn byways, orchard stands, and leather-bound trail dossiers. */
body[data-theme="adventure_roadtrip"] {
  --theme-name: 'adventure_roadtrip';
  --canvas: #F4EFEA;
  --card-front: #FFFFFF;
  --card-back: #FCFAF6;
  --card-detour: #F9F5EE;
  --forest: #222E21;
  --forest-deep: #162016;
  --forest-light: #344433;
  --terracotta: #B54728;
  --terracotta-soft: #D96041;
  --amber: #D5841D;
  --amber-light: #FCF4E8;
  --wine: #742537;
  --sage: #4B6853;
  --ink: #221C17;
  --ink-muted: #6B6258;
  --leather-base: #382516;
  --leather-edge: #23160D;
  --parchment: #F8F3E6;
  --parchment-border: #D8CBB6;
  --gold: #C08A2E;
  --sign-accent: #FFDDA6;
  --alert: #FF9A8B;
  --wood-dark: #322114;
  --wood-grain: #4A321E;
  --washi-tape: rgba(236, 220, 192, 0.92);
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-hand: 'Caveat', cursive;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-size-2xs: 0.64rem;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.78rem;
  --font-size-base: 0.88rem;
  --font-size-md: 1.0rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: 1.6rem;
  --page-pad-bottom: 270px;
  --radius-3xs: 2px;
  --radius-2xs: 4px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --card-radius: 16px;
  --pill-radius: 999px;
  --bg-page-color: var(--canvas);
  --bg-page-image: radial-gradient(rgba(181, 71, 40, 0.035) 1px, transparent 1px), radial-gradient(rgba(34, 46, 33, 0.035) 1px, transparent 1px);
  --bg-page-size: 28px 28px, 28px 28px;
  --bg-page-position: 0 0, 14px 14px;
  --bg-page-attachment: scroll, scroll;
  --bg-gate: radial-gradient(circle at 50% 25%, #243423 0%, #131E12 70%, #0A110A 100%);
  --bg-gate-card: linear-gradient(180deg, #382416 0%, #25160C 55%, #190E07 100%);
  --bg-gate-card-border: #8B6547;
  --bg-flag: #D5841D;
  --bg-flag-color: #1F2A1E;
  --bg-header: rgba(24, 34, 24, 0.98);
  --bg-header-border: rgba(255, 255, 255, 0.14);
  --bg-logo-pill: linear-gradient(135deg, var(--terracotta) 0%, #8C2C13 100%);
  --bg-logo-pill-color: #FFFFFF;
  --bg-day-tag: var(--forest);
  --bg-day-tag-border: #FFFFFF;
  --bg-theme-color: #182218;
  --z-behind: -1;
  --z-ambient: 10;
  --z-delight: 25;
  --z-header: 120;
  --z-compass: 220;
  --z-dock: 300;
  --z-folio: 500;
  --z-qr: 600;
  --z-gate: 900;
  --z-switcher: 950;
  --z-modal: 1000;
  --z-modal-top: 1100;
  --dur-instant: 0.15s;
  --dur-fast: 0.2s;
  --dur-base: 0.28s;
  --dur-slow: 0.45s;
  --dur-deliberate: 0.7s;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0.0, 1, 1);
  --ambient-particle-shape: leaf;
  --ambient-particle-colors: #B54728, #D5841D, #8C5C38;
  --ambient-particle-count: 9;
  --ambient-particle-opacity: 0.65;
  --ambient-particle-size: 22;
  --elevation-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --elevation-card: 0 10px 28px rgba(34, 46, 33, 0.08);
  --elevation-card-hover: 0 14px 34px rgba(34, 46, 33, 0.12);
  --elevation-card-raised: 0 18px 42px rgba(0, 0, 0, 0.28);
  --elevation-overlay: 0 24px 60px rgba(0, 0, 0, 0.5);
  --elevation-chip: 0 2px 4px rgba(0, 0, 0, 0.1);
  --elevation-inset: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  --pacing-shared-bg: #FCF4E8;
  --pacing-shared-color: #784606;
  --pacing-active-bg: #EBF2EC;
  --pacing-active-color: #204627;
  --pacing-unwind-bg: #F7EDE9;
  --pacing-unwind-color: #7D2912;
  --chip-shared-bg: var(--sage);
  --chip-shared-ink: #FFFFFF;
  --chip-active-bg: var(--wine);
  --chip-active-ink: #FFFFFF;
  --chip-unwind-bg: var(--forest-light);
  --chip-unwind-ink: #FFFFFF;
  --chip-amber-bg: var(--amber);
  --chip-amber-ink: #1F1A12;
  --chip-orchard-bg: var(--terracotta);
  --chip-orchard-ink: #FFFFFF;
  --chip-wood-bg: var(--leather-base);
  --chip-wood-ink: #FFFFFF;
  --chip-moss-bg: var(--sage);
  --chip-moss-ink: #FFFFFF;
  --chip-wine-bg: var(--wine);
  --chip-wine-ink: #FFFFFF;
  --chip-sepia-bg: var(--ink-muted);
  --chip-sepia-ink: #FFFFFF;
  --chip-tunnel-bg: var(--forest-deep);
  --chip-tunnel-ink: #FFFFFF;
  --surface-badge-bg: var(--forest-deep);
  --surface-badge-ink: #FFFFFF;
  --surface-badge-ink-muted: #BEC1BE;
  --surface-badge-veil: rgba(255, 255, 255, 0.06);
  --surface-badge-line: rgba(255, 255, 255, 0.16);
  --surface-badge-fill: rgba(255, 255, 255, 0.24);
  --surface-badge-well: rgba(31, 26, 18, 0.3);
  --surface-action-bg: var(--forest);
  --surface-action-ink: #FFFFFF;
  --surface-action-ink-muted: #C1C4C1;
  --surface-action-veil: rgba(255, 255, 255, 0.06);
  --surface-action-line: rgba(255, 255, 255, 0.16);
  --surface-action-fill: rgba(255, 255, 255, 0.24);
  --surface-action-well: rgba(31, 26, 18, 0.3);
  --surface-sign-bg: var(--wood-dark);
  --surface-sign-ink: #FFFFFF;
  --surface-sign-ink-muted: #C6C1BD;
  --surface-sign-veil: rgba(255, 255, 255, 0.06);
  --surface-sign-line: rgba(255, 255, 255, 0.16);
  --surface-sign-fill: rgba(255, 255, 255, 0.24);
  --surface-sign-well: rgba(31, 26, 18, 0.3);
  --surface-panel-bg: var(--leather-edge);
  --surface-panel-ink: #FFFFFF;
  --surface-panel-ink-muted: #C1BEBB;
  --surface-panel-veil: rgba(255, 255, 255, 0.06);
  --surface-panel-line: rgba(255, 255, 255, 0.16);
  --surface-panel-fill: rgba(255, 255, 255, 0.24);
  --surface-panel-well: rgba(31, 26, 18, 0.3);
}

/* Theme: Tropical Paradise — Yacht havens, reef water, and late-gold harbour light. */
body[data-theme="tropical"] {
  --theme-name: 'tropical';
  --canvas: #0F282F;
  --card-front: #173842;
  --card-back: #14313B;
  --card-detour: #112A32;
  --forest: #00A896;
  --forest-deep: #028090;
  --forest-light: #05668D;
  --terracotta: #F4A261;
  --terracotta-soft: #E76F51;
  --amber: #E9C46A;
  --amber-light: #264653;
  --wine: #D81E5B;
  --sage: #2A9D8F;
  --ink: #E0F2F1;
  --ink-muted: #B2DFDB;
  --leather-base: #1C3144;
  --leather-edge: #0F1B29;
  --parchment: #1E3F4A;
  --parchment-border: #2A5A68;
  --gold: #E9C46A;
  --sign-accent: #F2D9A0;
  --alert: #FF9A8B;
  --wood-dark: #322114;
  --wood-grain: #4A321E;
  --washi-tape: rgba(42, 157, 143, 0.38);
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-hand: 'Caveat', cursive;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-size-2xs: 0.64rem;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.78rem;
  --font-size-base: 0.88rem;
  --font-size-md: 1.0rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: 1.6rem;
  --page-pad-bottom: 270px;
  --radius-3xs: 2px;
  --radius-2xs: 4px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --card-radius: 16px;
  --pill-radius: 999px;
  --bg-page-color: var(--canvas);
  --bg-page-image: radial-gradient(rgba(233, 196, 106, 0.05) 1px, transparent 1px), radial-gradient(rgba(0, 168, 150, 0.06) 1px, transparent 1px), radial-gradient(ellipse 70% 45% at 12% -5%, rgba(42, 157, 143, 0.30) 0%, transparent 62%), radial-gradient(ellipse 60% 40% at 92% 4%, rgba(233, 196, 106, 0.14) 0%, transparent 58%), linear-gradient(0deg, rgba(5, 20, 26, 0.55) 0%, transparent 34%);
  --bg-page-size: 28px 28px, 28px 28px, auto, auto, auto;
  --bg-page-position: 0 0, 14px 14px, 0 0, 0 0, 0 0;
  --bg-page-attachment: scroll, scroll, fixed, fixed, fixed;
  --bg-gate: radial-gradient(circle at 50% 18%, #16505C 0%, #0F282F 58%, #061419 100%);
  --bg-gate-card: linear-gradient(180deg, #17414C 0%, #113039 55%, #0B1F27 100%);
  --bg-gate-card-border: #2F7F86;
  --bg-flag: #E9C46A;
  --bg-flag-color: #0F282F;
  --bg-header: linear-gradient(180deg, rgba(18, 52, 61, 0.97) 0%, rgba(12, 36, 43, 0.97) 100%);
  --bg-header-border: rgba(42, 157, 143, 0.30);
  --bg-logo-pill: linear-gradient(135deg, #1F756B 0%, #045677 100%);
  --bg-logo-pill-color: #FFFFFF;
  --bg-day-tag: linear-gradient(135deg, #028090 0%, #05668D 100%);
  --bg-day-tag-border: rgba(233, 196, 106, 0.75);
  --bg-theme-color: #0F282F;
  --z-behind: -1;
  --z-ambient: 10;
  --z-delight: 25;
  --z-header: 120;
  --z-compass: 220;
  --z-dock: 300;
  --z-folio: 500;
  --z-qr: 600;
  --z-gate: 900;
  --z-switcher: 950;
  --z-modal: 1000;
  --z-modal-top: 1100;
  --dur-instant: 0.15s;
  --dur-fast: 0.2s;
  --dur-base: 0.28s;
  --dur-slow: 0.45s;
  --dur-deliberate: 0.7s;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0.0, 1, 1);
  --ambient-particle-shape: frond;
  --ambient-particle-colors: #2A9D8F, #E9C46A, #00A896;
  --ambient-particle-count: 9;
  --ambient-particle-opacity: 0.45;
  --ambient-particle-size: 24;
  --elevation-sm: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.3);
  --elevation-card: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 28px rgba(0, 0, 0, 0.4);
  --elevation-card-hover: 0 0 0 1px rgba(233, 196, 106, 0.25), 0 14px 34px rgba(0, 0, 0, 0.5);
  --elevation-card-raised: 0 0 0 1px rgba(233, 196, 106, 0.35), 0 18px 42px rgba(0, 0, 0, 0.6);
  --elevation-overlay: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 24px 60px rgba(0, 0, 0, 0.75);
  --elevation-chip: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3);
  --elevation-inset: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  --pacing-shared-bg: rgba(233, 196, 106, 0.16);
  --pacing-shared-color: #F1D79B;
  --pacing-active-bg: rgba(0, 168, 150, 0.18);
  --pacing-active-color: #8FE3D6;
  --pacing-unwind-bg: rgba(231, 111, 81, 0.18);
  --pacing-unwind-color: #F7B49C;
  --chip-shared-bg: var(--sage);
  --chip-shared-ink: #1F1A12;
  --chip-active-bg: var(--wine);
  --chip-active-ink: #FFFFFF;
  --chip-unwind-bg: var(--forest-light);
  --chip-unwind-ink: #FFFFFF;
  --chip-amber-bg: var(--amber);
  --chip-amber-ink: #1F1A12;
  --chip-orchard-bg: var(--terracotta);
  --chip-orchard-ink: #1F1A12;
  --chip-wood-bg: var(--leather-base);
  --chip-wood-ink: #FFFFFF;
  --chip-moss-bg: var(--sage);
  --chip-moss-ink: #1F1A12;
  --chip-wine-bg: var(--wine);
  --chip-wine-ink: #FFFFFF;
  --chip-sepia-bg: var(--ink-muted);
  --chip-sepia-ink: #1F1A12;
  --chip-tunnel-bg: var(--forest-deep);
  --chip-tunnel-ink: #FFFFFF;
  --surface-badge-bg: var(--forest-deep);
  --surface-badge-ink: #FFFFFF;
  --surface-badge-ink-muted: #FFFFFF;
  --surface-badge-veil: rgba(255, 255, 255, 0.06);
  --surface-badge-line: rgba(255, 255, 255, 0.16);
  --surface-badge-fill: rgba(255, 255, 255, 0.24);
  --surface-badge-well: rgba(31, 26, 18, 0.3);
  --surface-action-bg: var(--forest);
  --surface-action-ink: #1F1A12;
  --surface-action-ink-muted: #1A3127;
  --surface-action-veil: rgba(31, 26, 18, 0.06);
  --surface-action-line: rgba(31, 26, 18, 0.16);
  --surface-action-fill: rgba(31, 26, 18, 0.24);
  --surface-action-well: rgba(255, 255, 255, 0.3);
  --surface-sign-bg: var(--wood-dark);
  --surface-sign-ink: #FFFFFF;
  --surface-sign-ink-muted: #C6C1BD;
  --surface-sign-veil: rgba(255, 255, 255, 0.06);
  --surface-sign-line: rgba(255, 255, 255, 0.16);
  --surface-sign-fill: rgba(255, 255, 255, 0.24);
  --surface-sign-well: rgba(31, 26, 18, 0.3);
  --surface-panel-bg: var(--leather-edge);
  --surface-panel-ink: #FFFFFF;
  --surface-panel-ink-muted: #BCBFC3;
  --surface-panel-veil: rgba(255, 255, 255, 0.06);
  --surface-panel-line: rgba(255, 255, 255, 0.16);
  --surface-panel-fill: rgba(255, 255, 255, 0.24);
  --surface-panel-well: rgba(31, 26, 18, 0.3);
}

/* Theme: Mountain Camping — Alpine dusk, moonlit ridgelines, and a low campfire in the pines. */
body[data-theme="mountain_camping"] {
  --theme-name: 'mountain_camping';
  --canvas: #1B241E;
  --card-front: #232E27;
  --card-back: #1F2822;
  --card-detour: #1A221D;
  --forest: #4F772D;
  --forest-deep: #31572C;
  --forest-light: #90A955;
  --terracotta: #D4A373;
  --terracotta-soft: #FAEDCD;
  --amber: #E07A5F;
  --amber-light: #2E3B32;
  --wine: #81B29A;
  --sage: #A3B18A;
  --ink: #F4F1DE;
  --ink-muted: #CCD5AE;
  --leather-base: #3D405B;
  --leather-edge: #22223B;
  --parchment: #2B3830;
  --parchment-border: #3E4F44;
  --gold: #D4A373;
  --sign-accent: #F0DCB4;
  --alert: #FF9A8B;
  --wood-dark: #322114;
  --wood-grain: #4A321E;
  --washi-tape: rgba(163, 177, 138, 0.30);
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-hand: 'Caveat', cursive;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-size-2xs: 0.64rem;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.78rem;
  --font-size-base: 0.88rem;
  --font-size-md: 1.0rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: 1.6rem;
  --page-pad-bottom: 270px;
  --radius-3xs: 2px;
  --radius-2xs: 4px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --card-radius: 16px;
  --pill-radius: 999px;
  --bg-page-color: var(--canvas);
  --bg-page-image: radial-gradient(rgba(163, 177, 138, 0.055) 1px, transparent 1px), radial-gradient(rgba(144, 169, 85, 0.045) 1px, transparent 1px), radial-gradient(ellipse 55% 38% at 8% 102%, rgba(224, 122, 95, 0.16) 0%, transparent 68%), radial-gradient(ellipse 85% 48% at 52% -12%, rgba(212, 226, 205, 0.11) 0%, transparent 64%), linear-gradient(180deg, rgba(49, 87, 44, 0.30) 0%, rgba(27, 36, 30, 0) 46%), linear-gradient(0deg, rgba(9, 14, 11, 0.58) 0%, transparent 32%);
  --bg-page-size: 26px 26px, 26px 26px, auto, auto, auto, auto;
  --bg-page-position: 0 0, 13px 13px, 0 0, 0 0, 0 0, 0 0;
  --bg-page-attachment: scroll, scroll, fixed, fixed, fixed, fixed;
  --bg-gate: radial-gradient(circle at 76% 13%, rgba(244, 241, 222, 0.20) 0%, rgba(244, 241, 222, 0.05) 18%, transparent 34%), radial-gradient(ellipse 60% 34% at 10% 100%, rgba(224, 122, 95, 0.20) 0%, transparent 72%), radial-gradient(circle at 50% 20%, #2F4634 0%, #1B241E 58%, #0B110D 100%);
  --bg-gate-card: linear-gradient(180deg, #2B3931 0%, #1F2A23 55%, #141B16 100%);
  --bg-gate-card-border: #587459;
  --bg-flag: #E07A5F;
  --bg-flag-color: #20291F;
  --bg-header: linear-gradient(180deg, rgba(31, 42, 35, 0.97) 0%, rgba(22, 30, 25, 0.97) 100%);
  --bg-header-border: rgba(163, 177, 138, 0.24);
  --bg-logo-pill: linear-gradient(135deg, #486D29 0%, #2D5028 100%);
  --bg-logo-pill-color: #F4F1DE;
  --bg-day-tag: linear-gradient(135deg, #4F772D 0%, #31572C 100%);
  --bg-day-tag-border: rgba(163, 177, 138, 0.85);
  --bg-theme-color: #1B241E;
  --z-behind: -1;
  --z-ambient: 10;
  --z-delight: 25;
  --z-header: 120;
  --z-compass: 220;
  --z-dock: 300;
  --z-folio: 500;
  --z-qr: 600;
  --z-gate: 900;
  --z-switcher: 950;
  --z-modal: 1000;
  --z-modal-top: 1100;
  --dur-instant: 0.15s;
  --dur-fast: 0.2s;
  --dur-base: 0.28s;
  --dur-slow: 0.45s;
  --dur-deliberate: 0.7s;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0.0, 1, 1);
  --ambient-particle-shape: needle;
  --ambient-particle-colors: #A3B18A, #90A955, #E07A5F;
  --ambient-particle-count: 9;
  --ambient-particle-opacity: 0.5;
  --ambient-particle-size: 18;
  --elevation-sm: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.3);
  --elevation-card: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 28px rgba(0, 0, 0, 0.4);
  --elevation-card-hover: 0 0 0 1px rgba(163, 177, 138, 0.25), 0 14px 34px rgba(0, 0, 0, 0.5);
  --elevation-card-raised: 0 0 0 1px rgba(224, 122, 95, 0.35), 0 18px 42px rgba(0, 0, 0, 0.6);
  --elevation-overlay: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 24px 60px rgba(0, 0, 0, 0.75);
  --elevation-chip: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3);
  --elevation-inset: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  --pacing-shared-bg: rgba(224, 122, 95, 0.16);
  --pacing-shared-color: #F0B49F;
  --pacing-active-bg: rgba(144, 169, 85, 0.18);
  --pacing-active-color: #C3D69A;
  --pacing-unwind-bg: rgba(129, 178, 154, 0.18);
  --pacing-unwind-color: #A8D3C0;
  --chip-shared-bg: var(--sage);
  --chip-shared-ink: #1F1A12;
  --chip-active-bg: var(--wine);
  --chip-active-ink: #1F1A12;
  --chip-unwind-bg: var(--forest-light);
  --chip-unwind-ink: #1F1A12;
  --chip-amber-bg: var(--amber);
  --chip-amber-ink: #1F1A12;
  --chip-orchard-bg: var(--terracotta);
  --chip-orchard-ink: #1F1A12;
  --chip-wood-bg: var(--leather-base);
  --chip-wood-ink: #FFFFFF;
  --chip-moss-bg: var(--sage);
  --chip-moss-ink: #1F1A12;
  --chip-wine-bg: var(--wine);
  --chip-wine-ink: #1F1A12;
  --chip-sepia-bg: var(--ink-muted);
  --chip-sepia-ink: #1F1A12;
  --chip-tunnel-bg: var(--forest-deep);
  --chip-tunnel-ink: #FFFFFF;
  --surface-badge-bg: var(--forest-deep);
  --surface-badge-ink: #FFFFFF;
  --surface-badge-ink-muted: #C5D0C4;
  --surface-badge-veil: rgba(255, 255, 255, 0.06);
  --surface-badge-line: rgba(255, 255, 255, 0.16);
  --surface-badge-fill: rgba(255, 255, 255, 0.24);
  --surface-badge-well: rgba(31, 26, 18, 0.3);
  --surface-action-bg: var(--forest);
  --surface-action-ink: #FFFFFF;
  --surface-action-ink-muted: #F1F4EE;
  --surface-action-veil: rgba(255, 255, 255, 0.06);
  --surface-action-line: rgba(255, 255, 255, 0.16);
  --surface-action-fill: rgba(255, 255, 255, 0.24);
  --surface-action-well: rgba(31, 26, 18, 0.3);
  --surface-sign-bg: var(--wood-dark);
  --surface-sign-ink: #FFFFFF;
  --surface-sign-ink-muted: #C6C1BD;
  --surface-sign-veil: rgba(255, 255, 255, 0.06);
  --surface-sign-line: rgba(255, 255, 255, 0.16);
  --surface-sign-fill: rgba(255, 255, 255, 0.24);
  --surface-sign-well: rgba(31, 26, 18, 0.3);
  --surface-panel-bg: var(--leather-edge);
  --surface-panel-ink: #FFFFFF;
  --surface-panel-ink-muted: #C1C1C8;
  --surface-panel-veil: rgba(255, 255, 255, 0.06);
  --surface-panel-line: rgba(255, 255, 255, 0.16);
  --surface-panel-fill: rgba(255, 255, 255, 0.24);
  --surface-panel-well: rgba(31, 26, 18, 0.3);
}

/* Theme: Metropolitan Luxury — Obsidian galleries, brushed gold, and after-hours city light. */
body[data-theme="metropolitan"] {
  --theme-name: 'metropolitan';
  --canvas: #121212;
  --card-front: #1E1E1E;
  --card-back: #181818;
  --card-detour: #141414;
  --forest: #C5A059;
  --forest-deep: #8E733E;
  --forest-light: #E5C17C;
  --terracotta: #D4AF37;
  --terracotta-soft: #F3E5AB;
  --amber: #C5A059;
  --amber-light: #2A261F;
  --wine: #A40000;
  --sage: #708090;
  --ink: #F5F5F5;
  --ink-muted: #A0A0A0;
  --leather-base: #1A1A1A;
  --leather-edge: #000000;
  --parchment: #222222;
  --parchment-border: #3A3A3A;
  --gold: #C5A059;
  --sign-accent: #E5C17C;
  --alert: #FF9A8B;
  --wood-dark: #322114;
  --wood-grain: #4A321E;
  --washi-tape: rgba(197, 160, 89, 0.26);
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-hand: 'Caveat', cursive;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-size-2xs: 0.64rem;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.78rem;
  --font-size-base: 0.88rem;
  --font-size-md: 1.0rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: 1.6rem;
  --page-pad-bottom: 270px;
  --radius-3xs: 2px;
  --radius-2xs: 4px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --card-radius: 16px;
  --pill-radius: 999px;
  --bg-page-color: var(--canvas);
  --bg-page-image: radial-gradient(rgba(197, 160, 89, 0.05) 1px, transparent 1px), radial-gradient(rgba(245, 245, 245, 0.03) 1px, transparent 1px), radial-gradient(ellipse 72% 42% at 50% -8%, rgba(197, 160, 89, 0.13) 0%, transparent 62%), linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, transparent 30%);
  --bg-page-size: 30px 30px, 30px 30px, auto, auto;
  --bg-page-position: 0 0, 15px 15px, 0 0, 0 0;
  --bg-page-attachment: scroll, scroll, fixed, fixed;
  --bg-gate: radial-gradient(ellipse 55% 30% at 50% 0%, rgba(197, 160, 89, 0.18) 0%, transparent 60%), radial-gradient(circle at 50% 22%, #262119 0%, #121212 60%, #040404 100%);
  --bg-gate-card: linear-gradient(180deg, #242424 0%, #1A1A1A 55%, #0E0E0E 100%);
  --bg-gate-card-border: #C5A059;
  --bg-flag: #C5A059;
  --bg-flag-color: #121212;
  --bg-header: linear-gradient(180deg, rgba(20, 20, 20, 0.97) 0%, rgba(10, 10, 10, 0.97) 100%);
  --bg-header-border: rgba(197, 160, 89, 0.30);
  --bg-logo-pill: linear-gradient(135deg, #C5A059 0%, #AD8C4B 100%);
  --bg-logo-pill-color: #121212;
  --bg-day-tag: linear-gradient(135deg, #C5A059 0%, #8E733E 100%);
  --bg-day-tag-border: rgba(245, 245, 245, 0.55);
  --bg-theme-color: #121212;
  --z-behind: -1;
  --z-ambient: 10;
  --z-delight: 25;
  --z-header: 120;
  --z-compass: 220;
  --z-dock: 300;
  --z-folio: 500;
  --z-qr: 600;
  --z-gate: 900;
  --z-switcher: 950;
  --z-modal: 1000;
  --z-modal-top: 1100;
  --dur-instant: 0.15s;
  --dur-fast: 0.2s;
  --dur-base: 0.28s;
  --dur-slow: 0.45s;
  --dur-deliberate: 0.7s;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0.0, 1, 1);
  --ambient-particle-shape: dust;
  --ambient-particle-colors: #C5A059, #E5C17C, #8E733E;
  --ambient-particle-count: 14;
  --ambient-particle-opacity: 0.3;
  --ambient-particle-size: 10;
  --elevation-sm: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4);
  --elevation-card: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 28px rgba(0, 0, 0, 0.5);
  --elevation-card-hover: 0 0 0 1px rgba(197, 160, 89, 0.3), 0 14px 34px rgba(0, 0, 0, 0.6);
  --elevation-card-raised: 0 0 0 1px rgba(197, 160, 89, 0.45), 0 18px 42px rgba(0, 0, 0, 0.7);
  --elevation-overlay: 0 0 0 1px rgba(197, 160, 89, 0.2), 0 24px 60px rgba(0, 0, 0, 0.85);
  --elevation-chip: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3);
  --elevation-inset: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  --pacing-shared-bg: rgba(197, 160, 89, 0.16);
  --pacing-shared-color: #E5C17C;
  --pacing-active-bg: rgba(245, 245, 245, 0.10);
  --pacing-active-color: #E8E8E8;
  --pacing-unwind-bg: rgba(164, 0, 0, 0.20);
  --pacing-unwind-color: #E9A0A0;
  --chip-shared-bg: #5B6876;
  --chip-shared-ink: #FFFFFF;
  --chip-active-bg: var(--wine);
  --chip-active-ink: #FFFFFF;
  --chip-unwind-bg: var(--forest-light);
  --chip-unwind-ink: #1F1A12;
  --chip-amber-bg: var(--amber);
  --chip-amber-ink: #1F1A12;
  --chip-orchard-bg: var(--terracotta);
  --chip-orchard-ink: #1F1A12;
  --chip-wood-bg: var(--leather-base);
  --chip-wood-ink: #FFFFFF;
  --chip-moss-bg: #5B6876;
  --chip-moss-ink: #FFFFFF;
  --chip-wine-bg: var(--wine);
  --chip-wine-ink: #FFFFFF;
  --chip-sepia-bg: var(--ink-muted);
  --chip-sepia-ink: #1F1A12;
  --chip-tunnel-bg: #745E32;
  --chip-tunnel-ink: #FFFFFF;
  --surface-badge-bg: #745E32;
  --surface-badge-ink: #FFFFFF;
  --surface-badge-ink-muted: #E3DFD6;
  --surface-badge-veil: rgba(255, 255, 255, 0.06);
  --surface-badge-line: rgba(255, 255, 255, 0.16);
  --surface-badge-fill: rgba(255, 255, 255, 0.24);
  --surface-badge-well: rgba(31, 26, 18, 0.3);
  --surface-action-bg: var(--forest);
  --surface-action-ink: #1F1A12;
  --surface-action-ink-muted: #403520;
  --surface-action-veil: rgba(31, 26, 18, 0.06);
  --surface-action-line: rgba(31, 26, 18, 0.16);
  --surface-action-fill: rgba(31, 26, 18, 0.24);
  --surface-action-well: rgba(255, 255, 255, 0.3);
  --surface-sign-bg: var(--wood-dark);
  --surface-sign-ink: #FFFFFF;
  --surface-sign-ink-muted: #C6C1BD;
  --surface-sign-veil: rgba(255, 255, 255, 0.06);
  --surface-sign-line: rgba(255, 255, 255, 0.16);
  --surface-sign-fill: rgba(255, 255, 255, 0.24);
  --surface-sign-well: rgba(31, 26, 18, 0.3);
  --surface-panel-bg: var(--leather-edge);
  --surface-panel-ink: #FFFFFF;
  --surface-panel-ink-muted: #B8B8B8;
  --surface-panel-veil: rgba(255, 255, 255, 0.06);
  --surface-panel-line: rgba(255, 255, 255, 0.16);
  --surface-panel-fill: rgba(255, 255, 255, 0.24);
  --surface-panel-well: rgba(31, 26, 18, 0.3);
}

/* Theme switcher swatches (available under every active theme) */
.theme-chip[data-theme-chip="adventure_roadtrip"] .theme-chip-dot { background: linear-gradient(135deg, #F4EFEA 0%, #B54728 50%, #222E21 100%); }
.theme-chip[data-theme-chip="tropical"] .theme-chip-dot { background: linear-gradient(135deg, #0F282F 0%, #2A9D8F 50%, #E9C46A 100%); }
.theme-chip[data-theme-chip="mountain_camping"] .theme-chip-dot { background: linear-gradient(135deg, #1B241E 0%, #4F772D 50%, #E07A5F 100%); }
.theme-chip[data-theme-chip="metropolitan"] .theme-chip-dot { background: linear-gradient(135deg, #121212 0%, #C5A059 50%, #F5F5F5 100%); }


/* --- Module: themes.css --- */
/* ==========================================================================
   Theme Structure
   --------------------------------------------------------------------------
   All theme COLOR and BACKGROUND values now live in data/theme_defaults.yaml
   and are compiled into css/tokens.css by scripts/build.py. Nothing in this
   file should hard-code a theme palette.

   What belongs here: structural treatments a flat custom property can't carry
   — extra painted layers, silhouettes, per-theme geometry.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mountain Camping — layered alpine depth.

   The token stack in theme_defaults.yaml paints the sky (moonwash, tree-line
   band, campfire glow, valley vignette). These two silhouettes add the ridge
   itself: a far ridgeline behind the page content, and a nearer, darker
   treeline across the foot of the trailhead gate.
   -------------------------------------------------------------------------- */

/* Far ridgeline, pinned behind all page content. */
body[data-theme="mountain_camping"]::before {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  z-index: var(--z-behind);
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 30, 23, 0) 0%,
    rgba(15, 22, 17, 0.72) 40%,
    rgba(10, 15, 12, 0.94) 100%);
  clip-path: polygon(
    0% 100%, 0% 64%, 7% 50%, 13% 60%, 21% 36%, 29% 55%,
    37% 43%, 46% 62%, 54% 40%, 63% 58%, 71% 32%, 79% 52%,
    88% 45%, 95% 57%, 100% 48%, 100% 100%);
}

/* Nearer treeline on the locked gate, one shade darker and a touch taller. */
body[data-theme="mountain_camping"] .trailhead-gate::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34vh;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11, 17, 13, 0.55) 0%,
    rgba(8, 12, 9, 0.95) 55%,
    #070B08 100%);
  clip-path: polygon(
    0% 100%, 0% 58%, 6% 44%, 12% 56%, 19% 30%, 26% 49%,
    34% 38%, 43% 57%, 51% 34%, 60% 53%, 68% 27%, 76% 47%,
    85% 40%, 93% 54%, 100% 43%, 100% 100%);
}




/* --- Module: base.css --- */
/* Base Styles, Reset, Leaves, Common Helpers & Day Banners */

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    html {
      scroll-behavior: smooth;
    }

    /* Focus ring for keyboard accessibility */
    :focus-visible {
      outline: 2px solid var(--amber, #D5841D);
      outline-offset: 2px;
    }

    /* Page surface is entirely token-driven — see data/theme_defaults.yaml
       (`backgrounds.page_*`). Themes stack their own gradient layers here. */
    body {
      background-color: var(--bg-page-color, var(--canvas));
      background-image: var(--bg-page-image);
      background-size: var(--bg-page-size);
      background-position: var(--bg-page-position);
      background-attachment: var(--bg-page-attachment);
      background-repeat: repeat;
      font-family: var(--font-ui);
      color: var(--ink);
      line-height: 1.65;
      padding-bottom: var(--page-pad-bottom, 270px);
      overflow-x: hidden;
    }

    body.gate-locked {
      overflow: hidden;
      height: 100vh;
    }

    /* Ambient Leaves */
    .leaf-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: var(--z-ambient);
      overflow: hidden;
    }

    .falling-leaf {
      position: absolute;
      top: -45px;
      font-size: var(--font-size-xl);
      user-select: none;
      opacity: 0.65;
      animation: driftSlow linear infinite;
    }

    @keyframes driftSlow {
      0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0.75; }
      50% { transform: translateY(50vh) rotate(140deg) translateX(45px); }
      100% { transform: translateY(105vh) rotate(320deg) translateX(-35px); opacity: 0; }
    }


    /* Common Card Layout Helpers */
    .card-layout-row {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 12px;
    }

    @media (max-width: 480px) {
      .trail-station {
        margin-bottom: 48px;
      }
      .card-layout-row {
        flex-direction: column;
      }
      .farmstand-thumb, .vista-thumb {
        width: 100%;
        height: 140px;
      }
      header {
        padding: 9px 12px;
      }
      .header-top {
        gap: 6px;
      }
      .brand-title-row {
        gap: 5px;
      }
      .brand-heading {
        font-size: var(--font-size-lg);
        letter-spacing: -0.01em;
        white-space: nowrap;
      }
      .brand-logo-pill {
        font-size: var(--font-size-2xs);
        padding: 2px 5px;
      }
      .brand-subtitle {
        font-size: var(--font-size-2xs);
      }
      .step-counter-badge {
        padding: 4px 7px;
        gap: 4px;
      }
      .step-counter-text {
        font-size: var(--font-size-2xs);
      }
      .floating-live-compass {
        bottom: 16px;
        right: 14px;
        padding: 6px 12px 6px 8px;
      }
      .cassette-dock.visible ~ .floating-live-compass {
        bottom: 175px;
      }
    }

    .meta-inline-svg {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
    }

    /* Day Banner */
    .day-banner {
      position: relative;
      z-index: 3;
      margin: 64px 0 30px;
      text-align: center;
    }

    .day-tag {
      display: inline-flex;
      background: var(--bg-day-tag, var(--forest));
      color: #fff;
      padding: 7px 20px;
      border-radius: var(--radius-pill);
      box-shadow: var(--elevation-sm);
      border: 2px solid var(--bg-day-tag-border, #FFFFFF);
    }

    .day-tag h2 {
      font-family: var(--font-display);
      font-size: var(--font-size-md);
      font-weight: 700;
    }

    .day-meta-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .day-meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      color: var(--sign-accent);
      background: rgba(24, 34, 24, 0.88);
      border: 1px solid rgba(255, 221, 166, 0.28);
      padding: 3px 9px;
      border-radius: var(--radius-pill);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      letter-spacing: 0.3px;
      white-space: nowrap;
    }

    .day-meta-pill svg {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
      stroke: var(--sign-accent);
    }

    .day-start-pill {
      color: #FFFFFF;
      background: rgba(45, 62, 45, 0.92);
      border-color: rgba(255, 255, 255, 0.3);
    }
    .day-start-pill svg {
      stroke: #FFFFFF;
    }

    .day-stops-pill {
      color: #F8EFE4;
      background: rgba(30, 42, 32, 0.9);
      border-color: rgba(255, 221, 166, 0.25);
    }

    .day-weather-pill {
      background: rgba(213, 132, 29, 0.2);
      border-color: rgba(213, 132, 29, 0.45);
      color: #FFE5C2;
    }
    .day-weather-pill svg {
      stroke: var(--amber);
    }




/* ==========================================================================
   Reduced motion
   --------------------------------------------------------------------------
   This app runs continuous ambient motion — drifting leaves, mist, lantern
   flicker, card flips — and until now offered no way out of it. One global
   block is the payoff for tokenising durations: there is a single place to
   honour the preference.

   Ambient canvases are removed outright rather than sped up; a 0.01ms leaf
   animation is still a leaf teleporting around the viewport.
   ========================================================================== */

@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;
  }

  html {
    scroll-behavior: auto;
  }

  /* Purely decorative motion layers: remove, don't accelerate. */
  .leaf-canvas,
  .trail-atmospheric-canvas {
    display: none;
  }
}


/* --- Module: gate.css --- */
/* Trailhead Gate & Countdown Hearth */

    /* Trailhead Checkpoint Password Gate (Pre-Trip Teaser Dossier) */
    .trailhead-gate {
      position: fixed;
      inset: 0;
      z-index: var(--z-gate);
      background: var(--bg-gate, radial-gradient(circle at 50% 25%, #243423 0%, #131E12 70%, #0A110A 100%));
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 36px 16px;
      opacity: 1;
      transition: opacity var(--dur-slow) ease;
      overflow-y: auto;
    }

    .trailhead-gate.unlocked {
      opacity: 0;
      pointer-events: none;
    }

    .gate-card {
      position: relative;
      width: 100%;
      max-width: 480px;
      background: var(--bg-gate-card, linear-gradient(180deg, #382416 0%, #25160C 55%, #190E07 100%));
      color: #F8EFE4;
      border-radius: var(--radius-xl);
      padding: 28px 22px;
      border: 1.5px solid var(--bg-gate-card-border, #8B6547);
      z-index: 1;
      box-shadow: var(--elevation-overlay);
      text-align: center;
      margin: auto;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .gate-header-cluster {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .gate-flag {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      background: var(--bg-flag, #D5841D);
      color: var(--bg-flag-color, #1F2A1E);
      padding: 3px 10px;
      border-radius: var(--radius-2xs);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .gate-title {
      font-family: var(--font-display);
      font-size: var(--font-size-2xl);
      font-weight: 700;
      color: var(--sign-accent);
      line-height: 1.2;
      margin-top: 4px;
    }

    .gate-sub {
      font-size: var(--font-size-base);
      color: var(--parchment-border);
      line-height: 1.4;
    }

    .gate-route-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: var(--font-size-xs);
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,221,166,0.25);
      padding: 5px 12px;
      border-radius: var(--radius-xl);
      color: #F8EFE4;
      margin-top: 4px;
      max-width: 100%;
      white-space: nowrap;
    }
    .route-origin {
      white-space: nowrap;
    }
    .route-arrow {
      color: var(--sign-accent);
      flex-shrink: 0;
    }
    .route-classified {
      color: var(--sign-accent);
      font-weight: 700;
      white-space: nowrap;
    }

    /* Teaser Countdown Box */
    .gate-countdown-box {
      background: rgba(18, 12, 7, 0.7);
      border: 1px solid rgba(139, 101, 71, 0.5);
      border-radius: var(--radius-md);
      padding: 14px 12px;
    }
    .gate-countdown-label {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      color: var(--sign-accent);
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }
    .gate-countdown-box .clock-grid {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 4px;
    }
    .gate-countdown-box .clock-slot {
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 221, 166, 0.25);
      border-radius: var(--radius-md);
      padding: 8px 6px;
      min-width: 58px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .gate-countdown-box .clock-slot-val {
      font-family: var(--font-mono);
      color: var(--sign-accent);
      font-size: var(--font-size-xl);
      font-weight: 700;
      text-shadow: 0 0 10px rgba(255, 221, 166, 0.3);
    }
    .gate-countdown-box .clock-slot-lbl {
      font-family: var(--font-mono);
      color: var(--parchment-border);
      font-size: var(--font-size-2xs);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Narrow phones: four 58px-minimum slots plus gaps need 256px and the
    grid is narrower than that, so the clock spills its box on any fallback
    font. Let the slots share the row equally only where it cannot fit. */
    @media (max-width: 360px) {
      .gate-countdown-box .clock-grid { gap: 6px; }
      .gate-countdown-box .clock-slot { min-width: 0; flex: 1 1 0; padding: 8px 4px; }
      .gate-countdown-box .clock-slot-lbl { letter-spacing: 0; }
    }

    /* Teaser Weather & Packing Guide */
    .gate-weather-teaser {
      background: rgba(255, 255, 255, 0.05);
      border: 1px dashed rgba(213, 132, 29, 0.4);
      border-radius: var(--radius-md);
      padding: 14px 14px;
      text-align: left;
    }
    .gate-weather-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      color: var(--sign-accent);
      letter-spacing: 0.06em;
      margin-bottom: 10px;
    }
    .gate-temp-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 10px;
    }
    .gate-temp-slot {
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-sm);
      padding: 6px 4px;
      text-align: center;
    }
    .gate-temp-num {
      display: block;
      font-family: var(--font-mono);
      font-size: var(--font-size-base);
      font-weight: 700;
      color: var(--sign-accent);
    }
    .gate-temp-label {
      display: block;
      font-size: var(--font-size-2xs);
      color: var(--parchment-border);
      margin-top: 2px;
    }
    .gate-packing-pills {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      margin-bottom: 8px;
    }
    .gp-pill {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      color: var(--sign-accent);
      background: rgba(213, 132, 29, 0.15);
      border: 1px solid rgba(213, 132, 29, 0.3);
      padding: 4px 6px;
      border-radius: var(--radius-2xs);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1.25;
    }
    .gate-weather-note {
      font-size: var(--font-size-xs);
      color: var(--parchment-border);
      line-height: 1.35;
      font-style: italic;
    }
    .gate-weather-note:empty {
      display: none;
      margin: 0;
    }

    /* Unlock Section */
    .gate-unlock-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .gate-input-label {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      color: var(--sign-accent);
      letter-spacing: 0.08em;
    }
    .gate-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .gate-input {
      font-family: var(--font-mono);
      font-size: var(--font-size-lg);
      font-weight: 700;
      letter-spacing: 0.12em;
      text-align: center;
      text-transform: uppercase;
      color: var(--bg-flag-color, #1F2A1E);
      background: var(--parchment);
      border: 2px solid var(--amber);
      border-radius: var(--radius-md);
      padding: 12px 10px;
      box-shadow: var(--elevation-inset);
    }
    .gate-hint {
      font-size: var(--font-size-xs);
      color: var(--parchment-border);
    }

    .gate-input.shake {
      animation: gateShake 0.4s ease;
    }

    @keyframes gateShake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-8px); }
      40% { transform: translateX(8px); }
      60% { transform: translateX(-6px); }
      80% { transform: translateX(6px); }
    }

    .gate-submit {
      font-family: var(--font-ui);
      font-size: var(--font-size-base);
      font-weight: 700;
      color: var(--bg-flag-color, #1F2A1E);
      background: var(--amber);
      border: none;
      border-radius: var(--radius-md);
      padding: 12px 10px;
      cursor: pointer;
    }

    .gate-error {
      display: none;
      color: #FFB4A0;
      font-size: var(--font-size-xs);
      font-weight: 600;
      margin-top: 12px;
    }

    .gate-error.show {
      display: block;
    }

    h1, h2, h3, h4, p, .card-title, .card-body-text, .track-desc, .sign-text {
      text-wrap: balance;
      text-wrap: pretty;
    }




/* --- Module: header.css --- */
/* Sticky Navigation Header & Step Counter */
    /* Tactile Boardgame Step Counter & Header Controls */
    .header-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .header-control-btn {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: var(--radius-pill);
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      cursor: pointer;
      transition: all var(--dur-fast) ease;
      flex-shrink: 0;
    }

    .header-control-btn:hover {
      background: rgba(255, 255, 255, 0.22);
      transform: translateY(-1px);
    }

    .header-live-btn {
      background: linear-gradient(135deg, var(--terracotta, #B54728) 0%, var(--amber, #D5841D) 100%);
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: var(--radius-pill, 20px);
      padding: 4px 11px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
      font-family: var(--font-ui, system-ui);
      font-size: var(--font-size-xs, 0.75rem);
      font-weight: 700;
      letter-spacing: 0.3px;
      transition: all var(--dur-fast, 150ms) ease;
    }

    .header-live-btn:hover {
      background: linear-gradient(135deg, #C75332 0%, #E29328 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(213, 132, 29, 0.45);
    }

    .header-live-btn svg {
      width: 12px;
      height: 12px;
      fill: #FFFFFF;
      flex-shrink: 0;
    }

    .header-live-text {
      line-height: 1;
      font-family: var(--font-display, inherit);
      letter-spacing: 0.4px;
    }


    .step-counter-badge {
      background: linear-gradient(180deg, var(--leather-base) 0%, var(--leather-edge) 100%);
      color: #F8EFE4;
      border: 1.5px solid var(--parchment-border);
      border-radius: var(--radius-xl);
      padding: 5px 10px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-shadow: var(--elevation-sm);
      transition: transform var(--dur-base) ease;
      cursor: default;
      user-select: none;
      flex-shrink: 0;
    }

    .step-counter-badge.bump {
      transform: scale(1.1);
    }

    .step-counter-svg {
      width: 13px;
      height: 13px;
      fill: var(--sign-accent);
      flex-shrink: 0;
    }

    .step-counter-text {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.4px;
      color: #FFFFFF;
    }

    /* Sticky Mobile-First Header */
    header {
      position: sticky;
      top: 0;
      z-index: var(--z-header);
      background: var(--bg-header, rgba(24, 34, 24, 0.98));
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--bg-header-border, rgba(255,255,255,0.14));
      color: #fff;
      padding: 12px 16px;
      box-shadow: var(--elevation-card);
    }

    .header-box {
      max-width: 680px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .brand-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .brand-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .brand-logo-pill {
      background: var(--bg-logo-pill, linear-gradient(135deg, var(--terracotta) 0%, #8C2C13 100%));
      color: var(--bg-logo-pill-color, #fff);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: var(--font-size-xs);
      padding: 3px 7px;
      border-radius: var(--radius-xs);
      border: 1px solid rgba(255,255,255,0.3);
      letter-spacing: 0.6px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .brand-heading {
      font-family: var(--font-display);
      font-size: var(--font-size-xl);
      font-weight: 700;
      letter-spacing: -0.015em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand-subtitle {
      font-size: var(--font-size-xs);
      color: #D3C9BE;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .weather-quick-btn {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.22);
      color: #EDE5D8;
      font-family: var(--font-ui);
      font-size: var(--font-size-xs);
      font-weight: 700;
      padding: 5px 10px;
      border-radius: var(--radius-xl);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      flex-shrink: 0;
      transition: all var(--dur-fast) ease;
    }
    .weather-quick-btn:hover {
      background: rgba(255,255,255,0.18);
      border-color: rgba(255,255,255,0.35);
    }
    .weather-quick-btn svg {
      width: 13px;
      height: 13px;
      stroke: var(--sign-accent);
      flex-shrink: 0;
    }

    .nav-track {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 2px;
    }
    .nav-track::-webkit-scrollbar { display: none; }

    .nav-pill {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.18);
      color: #EDE5D8;
      font-family: var(--font-ui);
      font-size: var(--font-size-xs);
      font-weight: 600;
      padding: 5px 12px;
      border-radius: var(--radius-md);
      cursor: pointer;
      white-space: nowrap;
      transition: all var(--dur-fast) ease;
    }

    .nav-pill.active {
      background: #FFFFFF;
      color: var(--forest);
      border-color: #FFFFFF;
      box-shadow: var(--elevation-sm);
      font-weight: 700;
    }

    .nav-pill-curator {
      margin-left: auto;
      border: 1px dashed rgba(255, 255, 255, 0.35);
      color: #EDE5D8;
      opacity: 0.88;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .nav-pill-curator:hover {
      background: rgba(213, 132, 29, 0.2);
      border-color: var(--amber);
      color: #FFF2DF;
      opacity: 1;
    }
    .nav-pill-curator.active {
      background: var(--terracotta);
      border-color: var(--terracotta);
      color: #FFFFFF;
      opacity: 1;
      font-weight: 700;
    }

    /* Desktop & Mobile Responsive Header Search Pill */
    .header-search-pill {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: var(--radius-pill);
      height: 28px;
      padding: 0 8px;
      display: flex;
      align-items: center;
      gap: 6px;
      color: #FFFFFF;
      cursor: pointer;
      transition: all var(--dur-fast) ease;
      flex-shrink: 0;
    }
    .header-search-pill:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.35);
      transform: translateY(-1px);
    }
    .header-search-pill .search-pill-label {
      display: none;
      font-family: var(--font-ui);
      font-size: var(--font-size-xs);
      color: rgba(255, 255, 255, 0.85);
    }
    .header-search-pill .search-pill-kbd {
      display: none;
      background: rgba(255, 255, 255, 0.16);
      border-radius: 4px;
      padding: 1px 5px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: 0.5px;
    }
    @media (min-width: 520px) {
      .header-search-pill {
        padding: 0 10px;
        gap: 7px;
      }
      .header-search-pill .search-pill-label {
        display: inline-block;
      }
      .header-search-pill .search-pill-kbd {
        display: inline-block;
      }
    }



    /* ----------------------------------------------------------------------
       R1 — The header must fit a 430px phone without eating the traveler's
       own name. Priority order when space runs out, cheapest sacrifice first:
         1. the brand subtitle          (repeated on the welcome card)
         2. the "OFFLINE READY" wording (the dot still carries the state)
         3. the step counter            (Passport is its real home)
       `.brand-heading` never truncates — it is the one piece of the header
       that is about the people on the trip.
       See docs/HUMAN_CENTERED_DESIGN.md § 6, R1.
       ---------------------------------------------------------------------- */
    .brand-heading {
      flex-shrink: 0;
      overflow: visible;
      text-overflow: clip;
    }

    @media (max-width: 519px) {
      .brand-subtitle {
        display: none;
      }
      /* Keep the live dot, drop the words — the badge is a state, not a claim. */
      .offline-status-badge #offline-status-text {
        display: none;
      }
      .offline-status-badge {
        gap: 0;
        padding: 5px 7px;
      }
    }

    @media (max-width: 400px) {
      .step-counter-badge {
        display: none;
      }
    }

    /* ----------------------------------------------------------------------
       R2 — The offline badge is authored for a light surface (forest ink on a
       near-transparent forest wash) but it lives inside the dark header, so it
       rendered dark-green-on-dark-green and failed AA outright. Inside the
       header it gets header-appropriate ink.
       See docs/HUMAN_CENTERED_DESIGN.md § 6, R2.
       ---------------------------------------------------------------------- */
    header .offline-status-badge {
      background: rgba(75, 104, 83, 0.35);
      color: #CFE3D4;
      border-color: rgba(207, 227, 212, 0.28);
    }

    header .offline-status-badge.is-offline {
      background: rgba(181, 71, 40, 0.28);
      color: #FFD9CC;
      border-color: rgba(255, 217, 204, 0.35);
    }

    header .offline-status-badge .offline-dot {
      background: #8FBF9B;
      box-shadow: 0 0 0 2px rgba(143, 191, 155, 0.25);
    }

    header .offline-status-badge.is-offline .offline-dot {
      background: #FFD9CC;
      box-shadow: 0 0 0 2px rgba(255, 217, 204, 0.3);
    }


/* --- Module: theme-switcher.css --- */
/* ==========================================================================
   Demo Theme Switcher
   --------------------------------------------------------------------------
   Only rendered into the VacayGo demo builds (build.py fills
   {{THEME_SWITCHER_HTML}}); client itineraries get an empty string, so none
   of this ever paints on a real trip site.

   It sits ABOVE the trailhead gate (z-index 950 vs 900) on purpose — the gate
   is the most theme-heavy screen in the app, so you want to hop between themes
   without unlocking first.
   ========================================================================== */

    .theme-switcher {
      position: sticky;
      top: 0;
      z-index: var(--z-switcher);
      background: rgba(10, 12, 11, 0.94);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      padding: 7px 14px;
      font-family: var(--font-ui);
    }

    .theme-switcher-inner {
      max-width: 980px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .theme-switcher-brand {
      font-family: var(--font-display);
      font-size: var(--font-size-xs);
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .theme-switcher-brand b {
      color: rgba(255, 255, 255, 0.92);
      font-weight: 700;
    }

    /* The chips must never be clipped by the tagline: the track sizes to its
       content and the tagline takes only what is left (flex-basis 0). */
    .theme-switcher-track {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
      flex: 0 1 auto;
      min-width: 0;
      padding: 2px 0;
    }
    .theme-switcher-track::-webkit-scrollbar { display: none; }

    .theme-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 11px 5px 7px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.78);
      font-size: var(--font-size-xs);
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
      transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
    }

    .theme-chip:hover {
      background: rgba(255, 255, 255, 0.13);
      border-color: rgba(255, 255, 255, 0.32);
      color: #FFFFFF;
    }

    .theme-chip.active {
      background: #FFFFFF;
      border-color: #FFFFFF;
      color: #12160F;
      font-weight: 700;
      box-shadow: var(--elevation-sm);
    }

    /* Per-theme gradient fill for the dot is generated into css/tokens.css. */
    .theme-chip-dot {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 1px solid rgba(255, 255, 255, 0.35);
      box-shadow: var(--elevation-inset);
    }

    .theme-switcher-tagline {
      font-size: var(--font-size-xs);
      color: rgba(255, 255, 255, 0.45);
      font-style: italic;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1 1 0;
      min-width: 0;
      max-width: 40ch;
    }

    /* The sticky app header has to clear the switcher when one is present. */
    body:has(.theme-switcher) header {
      top: 44px;
    }
    body:has(.theme-switcher) .trailhead-gate {
      padding-top: 74px;
    }

    @media (max-width: 720px) {
      .theme-switcher-tagline { display: none; }
    }

    @media (max-width: 520px) {
      .theme-switcher-brand { display: none; }
      .theme-switcher { padding: 6px 10px; }
      .theme-chip { font-size: 0.7rem; padding: 4px 9px 4px 6px; }
      body:has(.theme-switcher) header { top: 40px; }
    }


/* --- Module: welcome.css --- */
/* Expedition Welcome Dossier & Route Map */
    /* ==========================================================================
       EXPEDITION WELCOME & ROUTE MAP CARD (.expedition-welcome-card)
       ========================================================================== */
    .expedition-welcome-card {
      position: relative;
      z-index: 5;
      background: var(--card-front);
      border: 1.5px solid var(--parchment-border);
      border-radius: var(--radius-xl);
      padding: 24px 22px;
      margin-bottom: 40px;
      box-shadow: var(--elevation-card);
    }

    .welcome-washi-tape {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 110px;
      height: 20px;
      background: rgba(226, 210, 185, 0.9);
      border-left: 2px dashed rgba(160, 130, 95, 0.4);
      border-right: 2px dashed rgba(160, 130, 95, 0.4);
      box-shadow: var(--elevation-chip);
      z-index: 6;
    }

    .welcome-card-inner {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .welcome-header {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .welcome-badge-cluster {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 2px;
    }

    .welcome-badge {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      background: var(--forest);
      color: #FFF;
      padding: 3px 9px;
      border-radius: var(--radius-2xs);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .welcome-date-tag {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      color: var(--terracotta);
      background: rgba(162, 72, 43, 0.1);
      border: 1px solid rgba(162, 72, 43, 0.25);
      padding: 3px 8px;
      border-radius: var(--radius-2xs);
      letter-spacing: 0.04em;
    }

    .welcome-title {
      font-family: var(--font-display);
      font-size: var(--font-size-2xl);
      font-weight: 700;
      color: var(--forest);
      line-height: 1.22;
      text-wrap: balance;
    }

    .welcome-lede {
      font-size: var(--font-size-base);
      color: var(--ink-muted);
      line-height: 1.55;
      max-width: 580px;
      margin: 0 auto;
      text-wrap: pretty;
    }

    /* Stylized Topographic Route Map Panel */
    .welcome-map-panel {
      background: var(--parchment);
      border: 1.5px solid var(--parchment-border);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--elevation-inset);
    }

    .map-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px;
      background: rgba(255,255,255,0.6);
      border-bottom: 1px solid var(--parchment-border);
      flex-wrap: wrap;
      gap: 8px;
    }

    .map-title-label {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      color: var(--forest);
      letter-spacing: 0.06em;
    }

    .btn-apple-maps-route {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-ui);
      font-size: var(--font-size-xs);
      font-weight: 700;
      background: var(--forest);
      color: #FFF;
      padding: 5px 11px;
      border-radius: var(--radius-xs);
      text-decoration: none;
      transition: all var(--dur-fast) ease;
    }
    .btn-apple-maps-route:hover {
      background: #172A1C;
      transform: translateY(-1px);
    }

    .route-canvas-box {
      padding: 12px 10px;
      position: relative;
    }

    .route-map-vector {
      width: 100%;
      height: auto;
      display: block;
    }

    .map-label-main {
      font-family: var(--font-ui);
      font-size: 21px;
      font-weight: 800;
      fill: #1A291B;
      paint-order: stroke fill;
      stroke: #F3ECE0;
      stroke-width: 5px;
      stroke-linejoin: round;
    }

    .map-label-sub {
      font-family: var(--font-mono);
      font-size: 14.5px;
      font-weight: 700;
      fill: #6E4420;
      paint-order: stroke fill;
      stroke: #F3ECE0;
      stroke-width: 4px;
      stroke-linejoin: round;
    }

    .map-label-return {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 800;
      fill: #2D4C37;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      paint-order: stroke fill;
      stroke: #F3ECE0;
      stroke-width: 4px;
      stroke-linejoin: round;
    }

    .map-waypoint circle,
    .map-waypoint rect {
      transition: transform var(--dur-fast) ease;
    }
    .map-waypoint:hover circle,
    .map-waypoint:hover rect {
      transform: scale(1.3);
      cursor: pointer;
    }

    /* 4 Activity Category Tiles */
    .welcome-activities-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .activity-tile {
      background: var(--card-front);
      border: 1px solid var(--parchment-border);
      border-radius: var(--radius-md);
      padding: 14px 12px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      box-shadow: var(--elevation-sm);
      transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    }
    .activity-tile:hover {
      transform: translateY(-2px);
      box-shadow: var(--elevation-card-hover);
    }

    .act-icon-wrap {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-md);
      background: rgba(45, 76, 55, 0.1);
      color: var(--forest);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .act-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .act-title {
      font-family: var(--font-display);
      font-size: var(--font-size-base);
      font-weight: 700;
      color: var(--forest);
      line-height: 1.25;
      text-wrap: balance;
    }

    .act-desc {
      font-size: var(--font-size-sm);
      color: var(--ink-muted);
      line-height: 1.45;
      text-wrap: pretty;
    }

    /* Stamp Game Callout Banner */
    .stamp-game-banner {
      background: linear-gradient(135deg, var(--card-back) 0%, var(--parchment) 100%);
      border: 1.5px dashed var(--terracotta);
      border-radius: var(--radius-md);
      padding: 16px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: var(--elevation-sm);
    }

    .stamp-banner-icon-wrap {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
    }
    .stamp-banner-seal {
      width: 100%;
      height: 100%;
      display: block;
      filter: drop-shadow(0 2px 4px rgba(162, 72, 43, 0.2));
    }

    .stamp-banner-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .stamp-banner-tag {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      color: var(--terracotta);
      letter-spacing: 0.08em;
    }

    .stamp-banner-heading {
      font-family: var(--font-display);
      font-size: var(--font-size-lg);
      font-weight: 700;
      color: var(--forest);
      line-height: 1.25;
      text-wrap: balance;
    }

    .stamp-banner-text {
      font-size: var(--font-size-sm);
      color: var(--ink-muted);
      line-height: 1.45;
      text-wrap: pretty;
    }

    .btn-stamp-scroll {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--terracotta);
      color: #FFF;
      font-family: var(--font-ui);
      font-size: var(--font-size-xs);
      font-weight: 700;
      padding: 8px 14px;
      border-radius: var(--radius-sm);
      border: none;
      cursor: pointer;
      flex-shrink: 0;
      box-shadow: var(--elevation-chip);
      transition: all var(--dur-fast) ease;
      white-space: nowrap;
    }
    .btn-stamp-scroll:hover {
      background: #87381F;
      transform: translateY(-1px);
    }

    @media (max-width: 600px) {
      .expedition-welcome-card {
        padding: 20px 14px;
        margin-bottom: 30px;
      }
      .welcome-activities-grid {
        grid-template-columns: 1fr;
      }
      .stamp-game-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
      .btn-stamp-scroll {
        width: 100%;
        justify-content: center;
      }
    }




/* --- Module: passport.css --- */
/* 15-Year Passport & Trail Stamps */
    /* Passport Book & Easter Egg Folio */
    .passport-book-card {
      position: relative;
      z-index: 5;
      background: var(--card-front);
      border: 2px solid var(--parchment-border);
      border-radius: var(--radius-xl);
      padding: 22px 16px;
      margin-bottom: 48px;
      box-shadow: var(--elevation-card);
    }

    .passport-book-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .passport-book-title {
      font-family: var(--font-display);
      font-size: var(--font-size-xl);
      font-weight: 700;
      color: var(--forest);
    }

    .passport-book-counter {
      font-family: var(--font-mono);
      font-size: var(--font-size-xs);
      font-weight: 700;
      background: var(--forest);
      color: #FFFFFF;
      padding: 3px 9px;
      border-radius: var(--radius-md);
    }

    .passport-book-tagline {
      font-size: var(--font-size-sm);
      color: var(--ink-muted);
      margin-bottom: 14px;
    }

    /* Tactile Confidential / Expedition Log Pocket */
    .easter-egg-visa-pocket {
      background: linear-gradient(180deg, var(--parchment) 0%, var(--amber-light) 100%);
      border: 2px dashed var(--parchment-border);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      margin-bottom: 22px;
      cursor: pointer;
      position: relative;
      box-shadow: var(--elevation-sm);
      transition: all var(--dur-base) ease;
      user-select: none;
    }
    .easter-egg-visa-pocket:hover {
      border-color: var(--terracotta);
      box-shadow: var(--elevation-chip);
    }
    .pocket-tab-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    .pocket-tab-title-group {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: var(--font-size-xs);
      font-weight: 700;
      color: var(--forest);
      letter-spacing: 0.03em;
      line-height: 1.3;
      min-width: 0;
    }
    .pocket-title-text {
      color: var(--forest);
      white-space: normal;
    }
    .dossier-icon {
      flex-shrink: 0;
      color: var(--terracotta);
    }
    .pocket-tab-prompt {
      color: var(--terracotta);
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 800;
      letter-spacing: 0.04em;
      white-space: nowrap;
      flex-shrink: 0;
      padding: 4px 9px;
      background: rgba(181, 71, 40, 0.08);
      border: 1px solid rgba(181, 71, 40, 0.28);
      border-radius: var(--radius-xs);
      transition: all var(--dur-fast) ease;
    }
    .easter-egg-visa-pocket:hover .pocket-tab-prompt {
      background: rgba(181, 71, 40, 0.16);
      border-color: var(--terracotta);
    }

    .secret-visa-drawer {
      display: none;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px dashed rgba(181, 71, 40, 0.35);
      animation: flapUnfold 0.35s ease;
    }
    .secret-visa-drawer.open {
      display: block;
    }
    @keyframes flapUnfold {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Vintage Circular & Octagonal Transit Visas Grid */
    .marriage-stamps-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 12px;
    }

    .vintage-cachet {
      position: relative;
      background: var(--card-back);
      border-radius: 50%;
      width: 100%;
      aspect-ratio: 1 / 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6px;
      box-shadow: var(--elevation-inset);
      transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
      user-select: none;
    }
    .vintage-cachet:hover {
      transform: scale(1.06) rotate(0deg) !important;
      box-shadow: var(--elevation-sm);
    }

    /* Individual authentic cachet styling */
    .cachet-ist {
      border: 2px solid #2B4570;
      color: #2B4570;
      transform: rotate(-2.5deg);
    }
    .cachet-ebb {
      border: 2px solid #8C2E20;
      color: #8C2E20;
      border-radius: 46%;
      transform: rotate(3deg);
    }
    .cachet-mci {
      border: 2px dashed #345438;
      color: #345438;
      border-radius: var(--radius-md);
      transform: rotate(-1.5deg);
    }
    .cachet-mco {
      border: 2px solid #B86B1B;
      color: #B86B1B;
      transform: rotate(2deg);
    }
    .cachet-chs {
      border: 2px solid #4D382A;
      color: #4D382A;
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
      border-radius: 0;
      background: var(--parchment);
      transform: rotate(-3deg);
    }
    .cachet-bwi {
      border: 2px solid #1C485A;
      color: #1C485A;
      transform: rotate(1.5deg);
    }
    .cachet-jfk {
      border: 2px solid #8C281F;
      color: #8C281F;
      border-radius: var(--radius-sm);
      transform: rotate(-2deg);
    }
    .cachet-msn {
      border: 2px solid #2D5936;
      color: #2D5936;
      transform: rotate(2.5deg);
    }
    .cachet-pdx {
      border: 2px solid #265257;
      color: #265257;
      transform: rotate(-1deg);
    }

    .cachet-inner-ring {
      position: absolute;
      inset: 4px;
      border: 1px dashed currentColor;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0.6;
    }
    .cachet-auth {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      line-height: 1;
      margin-bottom: 2px;
    }
    .cachet-code {
      font-family: var(--font-display);
      font-size: var(--font-size-lg);
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.06em;
    }
    .cachet-date {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 600;
      line-height: 1;
      margin: 2px 0;
      border-top: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      padding: 1px 4px;
    }
    .cachet-dest {
      font-family: var(--font-ui);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      line-height: 1;
    }
    .cachet-sub {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      opacity: 0.8;
      text-transform: uppercase;
    }

    .visa-section-label {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      color: var(--terracotta);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 8px;
    }

    /* Live Trail Stamp Cards with Pencil Sketch Effect */
    .stamps-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 10px;
    }

    .stamp-slot {
      background: var(--card-front);
      border: 1.5px dashed var(--parchment-border);
      border-radius: var(--radius-md);
      padding: 10px 8px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 92px;
      position: relative;
      user-select: none;
      transition: all var(--dur-base) ease;
    }
    .stamp-slot:hover {
      border-color: var(--terracotta);
      transform: translateY(-2px);
    }

    .stamp-slot.stamped {
      border-style: solid;
      border-color: var(--terracotta);
      background: var(--card-detour);
      box-shadow: var(--elevation-chip);
    }

    .stamp-sketch-svg {
      width: 36px;
      height: 36px;
      margin-bottom: 6px;
      stroke: var(--leather-base);
      fill: none;
      filter: grayscale(100%) contrast(175%) sepia(35%) opacity(0.72);
      transition: filter var(--dur-base) ease, stroke var(--dur-base) ease, transform var(--dur-base) cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .stamp-slot.stamped .stamp-sketch-svg {
      filter: none;
      stroke: var(--terracotta);
      fill: rgba(181, 71, 40, 0.08);
      transform: scale(1.1);
    }

    .stamp-name {
      font-size: var(--font-size-xs);
      font-weight: 700;
      color: var(--ink-muted);
      line-height: 1.25;
      text-align: center;
      transition: color var(--dur-fast) ease;
    }

    .stamp-slot.stamped .stamp-name {
      color: var(--terracotta);
    }

    .stamp-seal {
      position: absolute;
      top: 3px;
      right: 4px;
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 800;
      color: var(--terracotta);
      border: 1px solid var(--terracotta);
      border-radius: var(--radius-3xs);
      padding: 1px 3px;
      display: none;
      transform: rotate(8deg);
      background: rgba(255, 255, 255, 0.9);
    }

    .stamp-slot.stamped .stamp-seal {
      display: block;
      animation: stampThump 0.35s cubic-bezier(0.2, 0.8, 0.4, 1.2);
    }
    @keyframes stampThump {
      0% { transform: scale(1.35) rotate(-6deg); opacity: 0; }
      50% { transform: scale(0.95) rotate(-2deg); opacity: 0.9; }
      100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }




/* --- Module: cards.css --- */
/* Trail Stage, 3D Flipper Anchor Cards */
    /* Trail Container */
    .trail-stage {
      position: relative;
      max-width: 680px;
      margin: 24px auto 0;
      padding: 0 14px;
    }

    .candy-track-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }


    /* ALL TRAIL STATIONS (Restored Natural Spacing & Slower Graceful Reveal) */
    .trail-station {
      position: relative;
      z-index: 2;
      margin-bottom: 60px;
      scroll-margin-top: 130px;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity var(--dur-deliberate) ease, transform var(--dur-deliberate) ease;
    }

    .trail-station.placed {
      opacity: 1;
      transform: translateY(0);
    }

    /* TYPE 1: MAIN ROAD ANCHOR (3D Card) */
    .anchor-station {
      perspective: 1400px;
      -webkit-perspective: 1400px;
    }

    .flipper-card {
      position: relative;
      width: 100%;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transition: transform var(--dur-deliberate) cubic-bezier(0.34, 1.15, 0.64, 1);
    }

    .trail-station.is-flipped .flipper-card {
      transform: rotateY(180deg);
    }

    .flipper-card:hover {
      box-shadow: var(--elevation-card);
      border-radius: var(--radius-xl);
    }

    .farmstand-trail-card {
      transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
    }
    .farmstand-trail-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--elevation-card-hover);
    }

    .scenic-vista-card {
      transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
    }
    .scenic-vista-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--elevation-card-raised);
    }

    .card-face {
      background: var(--card-front);
      border-radius: var(--radius-xl);
      padding: 22px 18px;
      box-shadow: var(--elevation-card);
      border: 1px solid rgba(220, 210, 196, 0.9);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      transition: box-shadow var(--dur-base) ease;
    }

    .card-face.back {
      position: absolute;
      inset: 0;
      background: var(--card-back);
      transform: rotateY(180deg);
      border: 2px dashed var(--amber);
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .trail-station.current-live .card-face.front {
      border: 2px solid var(--amber);
      box-shadow: 0 0 0 4px rgba(213, 132, 29, 0.25), var(--elevation-card-hover);
    }

    .washi-strip {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 20px;
      background: var(--washi-tape);
      border-left: 2px dashed rgba(180, 150, 110, 0.4);
      border-right: 2px dashed rgba(180, 150, 110, 0.4);
      z-index: 5;
    }

    .milestone-badge-inline {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--forest);
      color: #FFFFFF;
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #FFFFFF;
      flex-shrink: 0;
    }

    .milestone-alt-badge-inline {
      background: var(--amber);
      color: var(--bg-flag-color, #1F2A1E);
      font-family: var(--font-mono);
      font-size: 0.68rem;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      border: 2px solid #FFFFFF;
      flex-shrink: 0;
    }

    .card-meta-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      flex-wrap: wrap;
      gap: 6px 10px;
    }

    .meta-bar-left {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .stop-time-label {
      font-size: var(--font-size-xs);
      font-weight: 700;
      color: var(--terracotta);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Chips are token-driven: `chips` in data/theme_defaults.yaml supplies the
       background, and --chip-*-ink is DERIVED per theme by measuring contrast,
       so a palette colour that flips light between themes still reads. Every
       pair is gated at WCAG AA by the build. */
    .pacing-chip {
      font-size: var(--font-size-2xs);
      font-weight: 700;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: var(--radius-xs);
      color: var(--chip-ink, #fff);
      white-space: nowrap;
    }
    .chip-shared { background: var(--chip-shared-bg); --chip-ink: var(--chip-shared-ink); }
    .chip-active { background: var(--chip-active-bg); --chip-ink: var(--chip-active-ink); }
    .chip-unwind { background: var(--chip-unwind-bg); --chip-ink: var(--chip-unwind-ink); }
    .chip-amber { background: var(--chip-amber-bg); --chip-ink: var(--chip-amber-ink); }
    .chip-orchard { background: var(--chip-orchard-bg); --chip-ink: var(--chip-orchard-ink); }
    .chip-wood { background: var(--chip-wood-bg); --chip-ink: var(--chip-wood-ink); }
    .chip-moss { background: var(--chip-moss-bg); --chip-ink: var(--chip-moss-ink); }
    .chip-wine { background: var(--chip-wine-bg); --chip-ink: var(--chip-wine-ink); }
    .chip-sepia { background: var(--chip-sepia-bg); --chip-ink: var(--chip-sepia-ink); }
    .chip-tunnel { background: var(--chip-tunnel-bg); --chip-ink: var(--chip-tunnel-ink); }

    .stop-heading-block {
      display: flex;
      flex-direction: column;
      margin-bottom: 14px;
    }

    .card-title {
      font-family: var(--font-display);
      font-size: var(--font-size-2xl);
      color: var(--forest);
      font-weight: 700;
      line-height: 1.25;
      margin-bottom: 4px;
      text-wrap: balance;
    }

    .clickable-location-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: var(--font-size-sm);
      color: var(--ink-muted);
    }

    .click-meta-link {
      color: var(--ink-muted);
      text-decoration: underline;
      text-decoration-color: var(--parchment-border);
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .polaroid-box {
      background: #FFFFFF;
      padding: 8px 8px 30px;
      border-radius: var(--radius-2xs);
      box-shadow: var(--elevation-sm);
      margin-bottom: 18px;
      position: relative;
    }

    .polaroid-img {
      width: 100%;
      height: 190px;
      object-fit: cover;
      display: block;
      border-radius: var(--radius-3xs);
    }

    .polaroid-text {
      position: absolute;
      bottom: 6px;
      left: 10px;
      right: 10px;
      font-family: var(--font-hand);
      font-size: var(--font-size-xl);
      color: #352B23;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-body-text {
      font-size: var(--font-size-base);
      color: var(--ink);
      line-height: 1.62;
      margin-bottom: 18px;
      text-wrap: pretty;
    }

    .pacing-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 18px;
    }

    /* Pacing tracks are token-driven: data/theme_defaults.yaml -> pacing_tracks */
    .pacing-card {
      background: var(--pacing-shared-bg, #F8F4ED);
      border: 1px solid var(--parchment-border);
      border-left: 4px solid var(--pacing-shared-color, var(--forest));
      border-radius: var(--radius-md);
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .pacing-card.active-track {
      background: var(--pacing-active-bg, #EBF2EC);
      border-left-color: var(--pacing-active-color, var(--wine));
    }
    .pacing-card.unwind-track {
      background: var(--pacing-unwind-bg, #F7EDE9);
      border-left-color: var(--pacing-unwind-color, var(--sage));
    }

    .track-badge {
      font-weight: 800;
      font-size: var(--font-size-xs);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .track-badge.active { color: var(--pacing-active-color, var(--wine)); }
    .track-badge.unwind { color: var(--pacing-unwind-color, var(--sage)); }
    .track-badge.shared { color: var(--pacing-shared-color, var(--forest)); }

    .track-desc {
      font-size: var(--font-size-base);
      color: var(--ink);
    }

    /* Option Cards Grid */
    .option-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
      gap: 8px;
      margin-bottom: 18px;
    }

    .clickable-thumb-card {
      background: var(--parchment);
      border: 1px solid var(--parchment-border);
      border-radius: var(--radius-md);
      padding: 8px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 4px;
    }

    .thumb-img {
      width: 100%;
      height: 70px;
      object-fit: cover;
      border-radius: var(--radius-xs);
    }

    .thumb-label {
      font-size: var(--font-size-sm);
      font-weight: 700;
      color: var(--forest);
    }

    .thumb-sub {
      font-size: var(--font-size-2xs);
      color: var(--terracotta);
      font-weight: 600;
    }

    /* Campy Audio Exhibit Box */
    .audio-embed-box {
      border: 1px solid var(--parchment-border);
      border-left: 3px solid var(--amber);
      background: var(--amber-light);
      border-radius: var(--radius-md);
      padding: 10px 12px;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .audio-embed-meta {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .audio-number-badge {
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: var(--font-size-base);
      color: var(--terracotta);
      border: 1.5px solid var(--terracotta);
      border-radius: var(--radius-xs);
      padding: 3px 6px;
      background: #FFFFFF;
    }

    .audio-embed-text {
      display: flex;
      flex-direction: column;
    }

    .audio-embed-label {
      font-size: var(--font-size-2xs);
      text-transform: uppercase;
      font-weight: 700;
      color: var(--terracotta);
    }

    .audio-embed-title {
      font-family: var(--font-display);
      font-size: var(--font-size-base);
      font-weight: 700;
      color: var(--forest);
    }

    .btn-audio-guide {
      background: var(--forest);
      color: #FFFFFF;
      font-family: var(--font-ui);
      font-size: var(--font-size-sm);
      font-weight: 700;
      padding: 7px 12px;
      border-radius: var(--radius-sm);
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }

    /* Card Footer Actions */
    .card-footer-cluster {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid var(--parchment-border);
    }

    .btn-clean-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: var(--font-size-xs);
      font-weight: 700;
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      text-decoration: none;
      color: var(--forest);
      background: var(--card-front);
      border: 1px solid var(--parchment-border);
      cursor: pointer;
      white-space: nowrap;
    }

    .btn-clean-pill.primary {
      background: var(--forest);
      color: #FFFFFF;
      border-color: var(--forest);
    }

    .btn-card-flipper {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: var(--font-size-xs);
      font-weight: 700;
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      color: var(--terracotta);
      background: var(--amber-light);
      border: 1px solid var(--parchment-border);
      cursor: pointer;
      white-space: nowrap;
    }




/* --- Module: stations.css --- */
/* Station accent
   ---------------
   A station that names a `station_type` gets that type's accent as an inline
   --station-accent custom property (see render_station_html). The types set it
   to a palette token, not a literal, so it follows the active theme. Stations
   without a type simply fall back to --forest and nothing moves. */
.trail-station {
  --station-accent-resolved: var(--station-accent, var(--forest));
}

.farmstand-trail-card,
.scenic-vista-card {
  border-left-width: 4px;
  border-left-color: var(--station-accent-resolved);
}

/* ==========================================================================
   Station Cards Polish: Farmstands & Scenic Vistas
   - Detours / Farmstands: Artisan Kraft parchment, leather-stitch, clear pills
   - Scenic Vistas / Outlooks: Blue Ridge Parkway timber slab, warm typography,
     high-contrast elevation badges, and framed 16:9 panoramic photo
   ========================================================================== */

/* TYPE 2: DETOUR & FARMSTAND TRAIL CARD */
.farmstand-trail-card {
  background: var(--card-back);
  background-image: 
    radial-gradient(rgba(100, 70, 40, 0.04) 1px, transparent 1px),
    radial-gradient(rgba(44, 76, 56, 0.03) 1px, transparent 1px);
  background-size: 16px 16px;
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  border: 1.5px solid var(--parchment-border);
  box-shadow: var(--elevation-card);
  position: relative;
  transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
}

.farmstand-trail-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-card-hover);
}

/* Subtle inner saddle-stitch echo */
.farmstand-trail-card::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1.5px dashed rgba(142, 107, 73, 0.28);
  border-radius: var(--radius-md);
  pointer-events: none;
}

.farmstand-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  border-bottom: 1px solid rgba(158, 129, 102, 0.22);
  padding-bottom: 9px;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.farmstand-badge {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  background: var(--surface-badge-bg);
  border: 1px solid var(--parchment-border);
  color: var(--surface-badge-ink);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--elevation-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.farmstand-tag {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--ink-muted);
  background: rgba(213, 132, 29, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(213, 132, 29, 0.2);
  white-space: nowrap;
}

.farmstand-title {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.25;
  text-wrap: balance;
  position: relative;
  z-index: 2;
}

.farmstand-metadata-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: var(--font-size-sm);
  color: var(--ink-muted);
  margin-bottom: 14px;
  align-items: center;
  line-height: 1.4;
  position: relative;
  z-index: 2;
}

.farmstand-meta-link {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.farmstand-thumb {
  width: 110px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--parchment-border);
  box-shadow: var(--elevation-chip);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--dur-fast) ease;
}

.farmstand-thumb:hover {
  transform: scale(1.03);
}

.farmstand-text {
  font-size: var(--font-size-base);
  color: var(--ink);
  line-height: 1.55;
  text-wrap: pretty;
}

.farmstand-action-bar {
  display: flex;
  justify-content: flex-end;
  border-top: 1px dashed rgba(158, 129, 102, 0.35);
  padding-top: 12px;
  margin-top: 8px;
  position: relative;
  z-index: 2;
}

.btn-farmstand-fieldguide {
  background: var(--surface-action-bg);
  color: var(--surface-action-ink);
  border: 1px solid var(--forest-deep);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--dur-fast) ease;
  box-shadow: var(--elevation-chip);
}

.btn-farmstand-fieldguide:hover {
  background: var(--forest-light);
  transform: translateY(-1px);
}

/* TYPE 3: SCENIC VISTA POINT (Refined Blue Ridge Parkway Overlook Slab) */
.scenic-vista-card {
  background: linear-gradient(145deg, var(--wood-grain) 0%, var(--wood-dark) 60%, var(--leather-edge) 100%);
  color: var(--surface-sign-ink);
  border-radius: var(--radius-lg);
  padding: 22px 22px;
  box-shadow: var(--elevation-card-hover);
  border: 2px solid var(--wood-grain);
  position: relative;
  transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
}

.scenic-vista-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-card-raised);
}

/* Authentic rustic brass corner screws */
.sign-screw {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  /* Brass hardware: deliberately fixed in every theme — it is a metal
     object on the sign, not a themed surface. */
  background: radial-gradient(circle at 35% 30%, #F5DFA3 0%, #C9973F 50%, #5E4218 100%);
  border: 1px solid var(--leather-edge);
  box-shadow: var(--elevation-chip);
  position: absolute;
  z-index: 3;
}
.sign-screw.tl { top: 9px; left: 9px; }
.sign-screw.tr { top: 9px; right: 9px; }
.sign-screw.bl { bottom: 9px; left: 9px; }
.sign-screw.br { bottom: 9px; right: 9px; }

.vista-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  border-bottom: 1px dashed rgba(248, 239, 228, 0.25);
  padding-bottom: 9px;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.vista-flag {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  background: var(--amber);
  color: var(--bg-flag-color);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: var(--elevation-chip);
}

.vista-elevation-badge {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--sign-accent);
  background: rgba(213, 132, 29, 0.22);
  border: 1px solid rgba(255, 221, 166, 0.38);
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.vista-title {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--sign-accent);
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  margin-bottom: 6px;
  line-height: 1.25;
  text-wrap: balance;
  position: relative;
  z-index: 2;
}

.vista-metadata-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: var(--font-size-sm);
  color: var(--parchment-border);
  margin-bottom: 14px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.vista-meta-link {
  color: var(--sign-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vista-thumb {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(255, 221, 166, 0.35);
  box-shadow: var(--elevation-card);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--dur-fast) ease;
}

.vista-thumb:hover {
  transform: scale(1.03);
}

.vista-text {
  font-size: var(--font-size-base);
  color: var(--surface-sign-ink);
  line-height: 1.55;
  text-wrap: pretty;
}

.vista-action-bar {
  display: flex;
  justify-content: flex-end;
  border-top: 1px dashed rgba(248, 239, 228, 0.22);
  padding-top: 12px;
  margin-top: 8px;
  position: relative;
  z-index: 2;
}

.btn-vista-fieldguide {
  background: rgba(255, 221, 166, 0.14);
  border: 1.5px solid var(--sign-accent);
  color: var(--sign-accent);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--dur-fast) ease;
  box-shadow: var(--elevation-sm);
}

.btn-vista-fieldguide:hover {
  background: rgba(255, 221, 166, 0.26);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .farmstand-trail-card, .scenic-vista-card {
    padding: 16px 14px;
  }
  .farmstand-thumb, .vista-thumb {
    width: 100%;
    height: 140px;
  }
}


/* --- Module: folio.css --- */
/* Leather Folio Modal & Parchment Notes */
    /* Aged Leather Folio Modal */
    .folio-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(18, 24, 17, 0.78);
      backdrop-filter: blur(8px);
      z-index: var(--z-folio);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur-slow) ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .folio-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .leather-folio-case {
      background: linear-gradient(145deg, var(--leather-base) 0%, var(--leather-edge) 100%);
      width: 100%;
      max-width: 580px;
      border-radius: var(--radius-lg);
      padding: 10px;
      box-shadow: var(--elevation-overlay);
      border: 1.5px solid var(--wood-grain);
      position: relative;
      max-height: 86vh;
      display: flex;
      flex-direction: column;
      transform: scale(0.95);
      transition: transform var(--dur-base) cubic-bezier(0.16, 1, 0.3, 1);
    }

    .folio-backdrop.open .leather-folio-case {
      transform: scale(1);
    }

    /* Subtle Archival Brass Rivets */
    .brass-rivet {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #F5DFA3 0%, #C9973F 50%, #7A5720 100%);
      box-shadow: var(--elevation-sm);
      z-index: 4;
    }
    .brass-rivet.tl { top: 8px; left: 8px; }
    .brass-rivet.tr { top: 8px; right: 8px; }
    .brass-rivet.bl { bottom: 8px; left: 8px; }
    .brass-rivet.br { bottom: 8px; right: 8px; }

    /* Streamlined Clean Parchment Sheet */
    .parchment-sheet {
      background: var(--card-back);
      border-radius: var(--radius-md);
      border: 1.5px solid var(--parchment-border);
      padding: 24px 22px 20px;
      box-shadow: var(--elevation-inset);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .parchment-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 2px dashed var(--parchment-border);
      padding-bottom: 10px;
    }

    .parchment-stamp-seal {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      color: var(--terracotta);
      border: 1px solid var(--terracotta);
      padding: 2px 6px;
      border-radius: var(--radius-2xs);
      text-transform: uppercase;
      margin-bottom: 4px;
      display: inline-block;
    }

    .parchment-title {
      font-family: var(--font-display);
      font-size: var(--font-size-xl);
      color: #162016; /* Physical paper sheet: always dark title */
      font-weight: 700;
    }

    .close-folio-btn {
      background: var(--parchment);
      border: 1px solid var(--parchment-border);
      border-radius: 50%;
      width: 32px;
      height: 32px;
      cursor: pointer;
      font-size: var(--font-size-base);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--forest);
      flex-shrink: 0;
    }

    .parchment-body {
      display: flex;
      flex-direction: column;
      gap: 14px;
      font-size: var(--font-size-base);
      line-height: 1.6;
      color: #221C17; /* Physical paper sheet: always dark ink */
    }

    .parchment-section-title {
      font-weight: 800;
      font-size: var(--font-size-xs);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--terracotta);
      margin-bottom: 4px;
    }

    .parchment-actions-cluster {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 4px 0 12px;
    }

    .parchment-section-block {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .packing-list-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 7px;
      margin-top: 4px;
    }

    .packing-pill-item {
      background: var(--card-front);
      border: 1px solid var(--parchment-border);
      border-radius: var(--radius-sm);
      padding: 6px 10px;
      font-size: var(--font-size-sm);
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .packing-pill-tag {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 800;
      color: var(--terracotta);
      background: rgba(181, 71, 40, 0.1);
      border: 1px solid rgba(181, 71, 40, 0.3);
      padding: 1px 5px;
      border-radius: var(--radius-2xs);
      letter-spacing: 0.04em;
      flex-shrink: 0;
    }

    /* ==========================================================================
       Vouchers, QR Passes & Confirmation Codes
       ========================================================================== */
    .voucher-conf-banner {
      background: var(--parchment);
      border: 1.5px solid var(--parchment-border);
      border-left: 4px solid var(--terracotta);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .conf-badge-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .conf-kicker {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 800;
      color: var(--terracotta);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .conf-code-val {
      font-family: var(--font-mono);
      font-size: var(--font-size-lg);
      font-weight: 800;
      color: var(--forest);
      letter-spacing: 0.06em;
      user-select: all;
    }

    .btn-copy-conf {
      background: var(--card-front);
      border: 1px solid var(--parchment-border);
      border-radius: var(--radius-xs);
      padding: 5px 10px;
      font-family: var(--font-body);
      font-size: var(--font-size-xs);
      font-weight: 700;
      color: var(--forest);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all var(--dur-fast) ease;
      flex-shrink: 0;
    }

    .btn-copy-conf:hover {
      background: var(--amber-light);
      border-color: var(--terracotta);
      color: var(--terracotta);
    }

    .btn-copy-conf.copied {
      background: var(--forest-light);
      border-color: var(--forest-light);
      color: #FFFFFF;
    }

    /* Vouchers Grid */
    .vouchers-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 10px;
      margin: 6px 0 10px;
    }

    .voucher-item-card {
      background: var(--card-front);
      border: 1px solid var(--parchment-border);
      border-radius: var(--radius-sm);
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--ink);
      transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
      cursor: pointer;
    }

    .voucher-item-card:hover {
      transform: translateY(-2px);
      border-color: var(--terracotta);
      box-shadow: var(--elevation-chip);
    }

    .voucher-qr-thumb-box {
      position: relative;
      width: 48px;
      height: 48px;
      background: #FFFFFF;
      border: 1px solid var(--parchment-border);
      border-radius: var(--radius-xs);
      padding: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }

    .voucher-qr-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .qr-zoom-hint {
      display: none;
    }

    .voucher-doc-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-xs);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .voucher-doc-icon.pdf-icon {
      background: var(--amber-light);
      color: var(--terracotta);
      border: 1px solid rgba(181, 71, 40, 0.3);
    }

    .pdf-tag {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 800;
      margin-top: -2px;
    }

    .voucher-card-info {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .voucher-card-title {
      font-weight: 700;
      font-size: var(--font-size-base);
      color: var(--forest);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .voucher-card-sub {
      font-size: var(--font-size-xs);
      color: var(--ink-muted);
    }

    /* Email Confirmation Drawer */
    .voucher-email-box {
      background: var(--parchment);
      border: 1px solid var(--parchment-border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      margin: 6px 0 10px;
    }

    .voucher-email-header {
      padding: 8px 12px;
      background: var(--amber-light);
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
    }

    .email-header-left {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--forest);
      font-weight: 700;
      font-size: var(--font-size-sm);
    }

    .email-toggle-cue {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      color: var(--terracotta);
      font-weight: 700;
    }

    .voucher-email-drawer {
      padding: 10px 12px;
      display: none;
      background: var(--card-back);
      border-top: 1px solid var(--parchment-border);
      font-size: var(--font-size-sm);
    }

    .voucher-email-box.open .voucher-email-drawer {
      display: block;
    }

    .email-meta-line {
      font-size: var(--font-size-xs);
      color: var(--ink-muted);
      margin-bottom: 3px;
    }

    .email-body-text {
      white-space: pre-wrap;
      font-family: var(--font-body);
      font-size: var(--font-size-sm);
      line-height: 1.5;
      color: var(--ink);
      background: var(--card-front);
      padding: 8px 10px;
      border-radius: var(--radius-xs);
      border: 1px solid var(--parchment-border);
      margin-top: 6px;
    }

    /* ==========================================================================
       Expedition Scratchpad / Live Editable Notes (Stored Locally)
       ========================================================================== */
    .parchment-scratchpad-block {
      background: var(--parchment);
      border: 1.5px solid var(--parchment-border);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .scratchpad-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .scratchpad-title-group {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--terracotta);
    }

    .scratchpad-heading {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 800;
      letter-spacing: 0.08em;
      color: var(--terracotta);
    }

    .scratchpad-status {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      color: var(--ink-muted);
      transition: color var(--dur-base) ease;
    }

    .scratchpad-status.saving {
      color: var(--gold);
    }

    .scratchpad-status.saved {
      color: var(--forest);
      font-weight: 700;
    }

    .scratchpad-textarea {
      width: 100%;
      min-height: 80px;
      max-height: 200px;
      background: var(--card-front);
      border: 1px solid var(--parchment-border);
      border-radius: var(--radius-xs);
      padding: 8px 10px;
      font-family: var(--font-body);
      font-size: var(--font-size-base);
      line-height: 1.5;
      color: var(--ink);
      resize: vertical;
      box-shadow: var(--elevation-inset);
      transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    }

    .scratchpad-textarea:focus {
      outline: none;
      border-color: var(--forest);
      box-shadow: 0 0 0 3px rgba(45, 76, 55, 0.15);
    }

    .scratchpad-footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--font-size-xs);
      color: var(--ink-muted);
    }

    .scratchpad-tip {
      font-size: var(--font-size-2xs);
    }

    .btn-revert-notes {
      background: none;
      border: none;
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 700;
      color: var(--terracotta);
      text-decoration: underline;
      cursor: pointer;
      padding: 0;
    }

    /* ==========================================================================
       Full-Screen High-Contrast QR Code Pass Modal
       ========================================================================== */
    .qr-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.88);
      backdrop-filter: blur(10px);
      z-index: var(--z-qr);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur-base) ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .qr-modal-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .qr-modal-card {
      background: #FFFFFF;
      border-radius: var(--radius-lg);
      padding: 24px;
      max-width: 380px;
      width: 100%;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      box-shadow: var(--elevation-overlay);
    }

    .qr-modal-kicker {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 800;
      color: var(--terracotta);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .qr-modal-title {
      font-family: var(--font-display);
      font-size: var(--font-size-lg);
      color: var(--forest);
      font-weight: 700;
      line-height: 1.3;
    }

    .qr-modal-img-wrap {
      width: 240px;
      height: 240px;
      background: #FFFFFF;
      border: 2px solid var(--parchment-border);
      border-radius: var(--radius-md);
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--elevation-sm);
    }

    .qr-modal-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .qr-modal-code {
      font-family: var(--font-mono);
      font-size: var(--font-size-xl);
      font-weight: 800;
      letter-spacing: 0.08em;
      color: var(--forest);
      background: var(--parchment);
      padding: 6px 14px;
      border-radius: var(--radius-sm);
    }

    .btn-close-qr-modal {
      background: var(--forest-deep);
      color: #FFFFFF;
      border: none;
      border-radius: var(--radius-sm);
      padding: 10px 24px;
      font-family: var(--font-body);
      font-size: var(--font-size-base);
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      margin-top: 6px;
    }





/* --- Module: audio.css --- */
/* Cassette Boombox & Speech Audio Deck */
    /* Pop-Up Cassette Boombox */
    .cassette-dock {
      position: fixed;
      bottom: 12px;
      left: 12px;
      right: 12px;
      max-width: 640px;
      margin: 0 auto;
      background: linear-gradient(180deg, #FDD84C 0%, var(--amber) 55%, #B77502 100%);
      border: 3px solid #FFFFFF;
      border-radius: var(--radius-xl);
      padding: 14px 16px;
      box-shadow: var(--elevation-overlay);
      z-index: var(--z-dock);
      display: flex;
      flex-direction: column;
      gap: 10px;
      transform: translateY(160%);
      transition: transform var(--dur-deliberate) cubic-bezier(0.16, 1, 0.3, 1), max-height var(--dur-slow) ease;
    }

    .cassette-dock.visible {
      transform: translateY(0);
    }

    .cassette-dock.expanded {
      max-height: 84vh;
    }

    .tape-display-deck {
      background: var(--leather-edge);
      border: 2px solid var(--leather-base);
      border-radius: var(--radius-md);
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .lcd-text-wrap {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      width: 78%;
    }

    .lcd-sub {
      font-family: var(--font-mono);
      font-size: 0.66rem;
      color: var(--amber);
    }

    .marquee-container {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
    }

    .lcd-title {
      font-family: var(--font-mono);
      font-size: 0.92rem;
      color: #62FF83;
      text-shadow: 0 0 6px rgba(98, 255, 131, 0.7);
      display: inline-block;
      animation: radioMarquee 12s linear infinite alternate;
    }

    @keyframes radioMarquee {
      0%, 20% { transform: translateX(0%); }
      80%, 100% { transform: translateX(-45%); }
    }

    .reels-hub {
      display: flex;
      gap: 10px;
    }

    .reel {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px dashed #999;
      background: #2E2519;
    }

    .reel.spinning {
      animation: spinTape 2.2s linear infinite;
    }

    @keyframes spinTape {
      100% { transform: rotate(360deg); }
    }

    .tape-progress-groove {
      width: 100%;
      height: 6px;
      background: #281E0F;
      border-radius: var(--radius-2xs);
      overflow: hidden;
    }

    .tape-ribbon {
      width: 0%;
      height: 100%;
      background: linear-gradient(90deg, #FF4820, #FFD23F);
      transition: width var(--dur-base) linear;
    }

    .tape-controls-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .mechanical-keys {
      display: flex;
      gap: 6px;
    }

    .key-btn {
      background: linear-gradient(180deg, #F3F3F3 0%, #D0D0D0 50%, #A4A4A4 100%);
      border: 1px solid #666;
      border-radius: var(--radius-sm);
      padding: 6px 12px;
      font-weight: 800;
      font-size: 0.8rem;
      cursor: pointer;
      color: #262626;
    }

    .key-btn.play {
      background: linear-gradient(180deg, #4ADE80 0%, #16A34A 50%, #14532D 100%);
      color: #fff;
    }

    .deck-action-group {
      display: flex;
      gap: 6px;
    }

    .btn-deck-alt {
      background: var(--ink);
      color: var(--sign-accent);
      border: 1px solid var(--sign-accent);
      border-radius: var(--radius-sm);
      padding: 6px 10px;
      font-family: var(--font-mono);
      font-size: var(--font-size-xs);
      font-weight: 700;
      cursor: pointer;
    }

    .liner-notes-drawer {
      display: none;
      background: var(--card-back);
      border: 2px dashed var(--parchment-border);
      border-radius: var(--radius-md);
      padding: 16px;
      max-height: 260px;
      overflow-y: auto;
      font-size: var(--font-size-base);
      line-height: 1.6;
    }

    .liner-notes-drawer.open {
      display: block;
    }

    .liner-notes-header {
      font-family: var(--font-display);
      font-size: var(--font-size-lg);
      color: var(--forest);
      font-weight: 700;
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .j-card-meta {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      color: var(--terracotta);
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    /* Tactile Cassette Button Press Feedback */
    .key-btn:active, .btn-deck-alt:active {
      transform: translateY(2px) scale(0.97);
      box-shadow: var(--elevation-inset);
    }




/* --- Module: compass.css --- */
/* Floating Live Stop Compass Widget */
    /* Floating Live Stop Compass Widget (Always Accessible) */
    .floating-live-compass {
      position: fixed;
      bottom: 22px;
      right: 18px;
      z-index: var(--z-compass);
      display: flex;
      align-items: center;
      gap: 9px;
      background: linear-gradient(145deg, var(--forest) 0%, var(--forest-deep) 100%);
      border: 1.5px solid var(--sign-accent);
      border-radius: var(--radius-pill);
      padding: 7px 15px 7px 10px;
      box-shadow: var(--elevation-card-raised);
      cursor: pointer;
      user-select: none;
      transition: all var(--dur-base) cubic-bezier(0.16, 1, 0.3, 1);
    }
    .floating-live-compass:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: var(--elevation-overlay);
      border-color: var(--sign-accent);
    }
    .floating-live-compass:active {
      transform: translateY(-1px) scale(0.98);
    }
    .compass-icon-wrap {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,221,166,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--sign-accent);
      flex-shrink: 0;
    }
    .compass-needle {
      transform-origin: 12px 12px;
      transition: transform var(--dur-base) ease;
    }
    .floating-live-compass:hover .compass-needle {
      animation: needleWiggle 0.6s ease-in-out infinite alternate;
    }
    @keyframes needleWiggle {
      0% { transform: rotate(-24deg); }
      100% { transform: rotate(24deg); }
    }
    .live-compass-text-wrap {
      display: flex;
      flex-direction: column;
      text-align: left;
      line-height: 1.15;
    }
    .live-compass-kicker {
      font-family: var(--font-mono);
      font-size: var(--font-size-2xs);
      font-weight: 800;
      color: var(--sign-accent);
      letter-spacing: 0.08em;
    }
    .live-compass-title {
      font-family: var(--font-ui);
      font-size: var(--font-size-xs);
      font-weight: 700;
      color: #FFFFFF;
    }
    .live-pulse-ring {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #4ADE80;
      box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
      animation: livePulse 2s infinite;
      flex-shrink: 0;
    }
    @keyframes livePulse {
      0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
      70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
      100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
    }
    .cassette-dock.visible ~ .floating-live-compass {
      bottom: 185px;
    }



/* --- Module: offline.css --- */
/* Offline Indicator & Archive Viewer UI */

.offline-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(34, 46, 33, 0.08);
  color: var(--forest);
  border: 1px solid rgba(34, 46, 33, 0.16);
  transition: all var(--dur-base) ease;
}

.offline-status-badge.is-offline {
  background: rgba(181, 71, 40, 0.12);
  color: var(--terracotta);
  border-color: rgba(181, 71, 40, 0.3);
}

.offline-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2E7D32;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
}

.offline-status-badge.is-offline .offline-dot {
  background: var(--terracotta);
  box-shadow: 0 0 0 2px rgba(181, 71, 40, 0.3);
  animation: pulse-offline 1.8s infinite;
}

@keyframes pulse-offline {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

/* Offline Action Pills */
.btn-clean-pill.offline-archive-btn {
  background: var(--amber-light);
  color: var(--forest);
  border-color: var(--sage);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-clean-pill.offline-archive-btn:hover {
  background: var(--parchment);
  border-color: var(--forest);
}

.offline-saved-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  color: var(--forest);
  background: var(--amber-light);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--sage);
}

/* In-App Offline Archive Viewer Modal */
.archive-viewer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(18, 26, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) ease;
}

.archive-viewer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.archive-viewer-window {
  display: flex;
  flex-direction: column;
  width: 96%;
  max-width: 1040px;
  height: 92vh;
  margin: auto;
  background: var(--card-front);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--elevation-overlay);
}

.archive-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--forest-deep);
  color: #F8EFE4;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  gap: 12px;
}

.archive-viewer-title-group {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.archive-viewer-sub {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--amber);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.archive-viewer-title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-viewer-url {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: #C4B49D;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-viewer-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.archive-btn-open-ext {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #F8EFE4;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}

.archive-btn-open-ext:hover {
  background: rgba(255, 255, 255, 0.22);
}

.archive-btn-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #FFFFFF;
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}

.archive-btn-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.archive-viewer-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: #FAFAFA;
}

/* Prepared geographic enrichment. The package stays quiet until a trip has
   real records; the fallback concierge remains useful for anchor-only stops. */
.nearby-discovery-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--parchment-border);
}

.nearby-discovery-heading {
  margin-bottom: 7px;
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nearby-discovery-category {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 0.74rem;
}

.nearby-discovery-category > strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
}

.nearby-discovery-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 4px 0;
}

.nearby-discovery-item span {
  flex: 1 1 100%;
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.nearby-discovery-item a {
  color: var(--terracotta);
  font-weight: 650;
  text-decoration: underline;
}

.nearby-discovery-status {
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 0.68rem;
  font-style: italic;
  line-height: 1.4;
}


/* --- Module: schedule.css --- */
/* ==========================================================================
   Schedule Manager & Control Table Styles

   This module is built on the `panel` surface: a deep, themed control chrome
   that reads as a separate mode from the itinerary itself. Everything on it —
   body ink, secondary ink, hairlines, control fills, input wells — is DERIVED
   from that one authored background by scripts/theme_engine.py, so a theme
   that authors a light panel gets dark hairlines rather than invisible ones.

   Before this pass the module carried five phantom custom properties
   (--dark-moss, --border-gold, --parchment-light, --muted-parchment,
   --burnt-orange). None of them was ever defined in any theme; each only
   rendered because of its `var(--x, #hex)` fallback, so the whole panel was
   hard-coded to the adventure_roadtrip palette in all four themes.
   ========================================================================== */

.schedule-manager-panel {
  background: var(--surface-panel-bg);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-md);
  margin-top: 20px;
  padding: 16px;
  color: var(--surface-panel-ink);
  box-shadow: var(--elevation-sm);
}

.schedule-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.schedule-panel-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--amber);
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.schedule-panel-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--surface-panel-ink);
}

.btn-schedule-toggle {
  background: var(--surface-action-bg);
  color: var(--surface-action-ink);
  border: none;
  border-radius: var(--radius-xl);
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Hover lifts the authored action colour rather than naming a second hex, so
   it follows every theme instead of only the one it was picked against. */
.btn-schedule-toggle:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.schedule-drawer {
  display: none;
  margin-top: 16px;
  border-top: 1px dashed var(--surface-panel-line);
  padding-top: 14px;
}

.schedule-drawer.open {
  display: block;
}

.schedule-drawer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.schedule-drawer-hint {
  font-size: 0.78rem;
  color: var(--surface-panel-ink-muted);
  font-style: italic;
}

.schedule-drawer-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-schedule-sub {
  background: var(--surface-panel-veil);
  color: var(--surface-panel-ink);
  border: 1px solid var(--surface-panel-line);
  border-radius: var(--radius-2xs);
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background var(--dur-fast);
}

.btn-schedule-sub:hover {
  background: var(--surface-panel-fill);
}

.btn-schedule-sub.warning {
  border-color: var(--alert);
  color: var(--alert);
}

.btn-schedule-sub.warning:hover {
  background: var(--surface-panel-fill);
}

/* Schedule Table */
.schedule-table-container {
  overflow-x: auto;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: left;
}

.schedule-table th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--amber);
  padding: 8px 10px;
  border-bottom: 1px solid var(--surface-panel-line);
}

.schedule-table td {
  padding: 10px;
  border-bottom: 1px solid var(--surface-panel-veil);
  vertical-align: middle;
}

.schedule-table tr:hover {
  background: var(--surface-panel-veil);
}

.day-header-row td {
  background: var(--surface-panel-fill);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--amber);
  font-size: 0.9rem;
  padding: 8px 10px;
}

.reorder-btns {
  display: flex;
  gap: 4px;
}

.btn-arrow {
  background: var(--surface-panel-veil);
  border: 1px solid var(--surface-panel-line);
  color: var(--surface-panel-ink);
  border-radius: var(--radius-2xs);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
}

.btn-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-arrow:not(:disabled):hover {
  background: var(--surface-action-bg);
  border-color: var(--surface-action-bg);
  color: var(--surface-action-ink);
}

.btn-edit-sm {
  background: var(--surface-panel-veil);
  border: 1px solid var(--surface-panel-line);
  color: var(--surface-panel-ink);
  border-radius: var(--radius-2xs);
  padding: 4px 8px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--dur-instant) ease;
}

.btn-edit-sm:hover {
  background: var(--surface-action-bg);
  color: var(--surface-action-ink);
  border-color: var(--surface-action-bg);
}

.badge-modified {
  background: var(--surface-action-bg);
  color: var(--surface-action-ink);
  font-size: 0.62rem;
  padding: 2px 5px;
  border-radius: var(--radius-3xs);
  font-family: var(--font-mono);
  margin-left: 6px;
  display: inline-block;
}

/* Edit Modal Drawer */
.edit-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* DELIBERATELY FIXED. A modal scrim has to darken every theme, including the
     three that are already dark; keying it to the palette would make it
     disappear exactly where the canvas is closest to it. */
  background: rgba(10, 15, 10, 0.75);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal-top);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.edit-modal-backdrop.open {
  display: flex;
}

.edit-modal-card {
  background: var(--surface-panel-bg);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  color: var(--surface-panel-ink);
  box-shadow: var(--elevation-card);
}

.edit-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--surface-panel-line);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.edit-modal-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}

.btn-close-modal {
  background: none;
  border: none;
  color: var(--surface-panel-ink-muted);
  font-size: 1.3rem;
  cursor: pointer;
}

.btn-close-modal:hover {
  color: var(--surface-panel-ink);
}

.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 5px;
}

.form-input, .form-textarea {
  width: 100%;
  background: var(--surface-panel-well);
  border: 1px solid var(--surface-panel-line);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  color: var(--surface-panel-ink);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  box-sizing: border-box;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--amber);
  background: var(--surface-panel-well);
}

.form-textarea {
  min-height: 80px;
  resize: vertical;
}

.edit-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  border-top: 1px solid var(--surface-panel-line);
  padding-top: 14px;
}

.btn-save-edit {
  background: var(--surface-action-bg);
  color: var(--surface-action-ink);
  border: none;
  border-radius: var(--radius-xs);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.btn-save-edit:hover {
  filter: brightness(1.12);
}

.btn-cancel-edit {
  background: var(--surface-panel-veil);
  color: var(--surface-panel-ink-muted);
  border: none;
  border-radius: var(--radius-xs);
  padding: 8px 14px;
  font-size: 0.88rem;
  cursor: pointer;
}

/* History Modal */
.history-modal-card {
  background: var(--surface-panel-bg);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px;
  color: var(--surface-panel-ink);
  box-shadow: var(--elevation-card);
}

.history-item {
  background: var(--surface-panel-well);
  border: 1px solid var(--surface-panel-line);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
}

.history-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--amber);
  margin-bottom: 6px;
}

.history-item-body {
  font-size: 0.85rem;
  color: var(--surface-panel-ink-muted);
  line-height: 1.4;
}


/* --- Module: delights.css --- */
/* ==========================================================================
   Whimsical Trail Delights & Ambient Winks
   - Full-width horizontal atmospheric parallax landscapes (Orchard, Mountains, Downtown)
   - Drifting horizontal mountain mist bands
   - Mountain pass flanks that glide in at cabin/ridge elevation
   - Tumbling orchard apples at cider & fruit stands
   - Evening gaslight lantern at Staunton & dinner
   - Cool stone mist at Blue Ridge Tunnel
   - Brass cowbell at Moo Thru Creamery
   ========================================================================== */

/* Full-Width Horizontal Atmospheric Parallax Canvas */
.trail-atmospheric-canvas {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.atmospheric-env {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.atmospheric-env.active {
  opacity: 1;
}

/* Horizontal Landscape SVGs pinned along bottom horizon */
.horizontal-landscape-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35vh;
  min-height: 220px;
  pointer-events: none;
  transition: transform var(--dur-deliberate) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* 1. Orchard Country Environment */
.orchard-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(220, 150, 45, 0.14) 0%, transparent 75%);
}

.orchard-svg {
  height: 28vh;
  opacity: 0.75;
}

/* 2. Blue Ridge Mountain Pass & Horizontal Drifting Mist */
.mountain-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(35, 55, 42, 0.28) 0%, transparent 80%);
}

.mountain-far-svg {
  height: 48vh;
  opacity: 0.45;
  filter: blur(1px);
}

.mountain-mid-svg {
  height: 38vh;
  opacity: 0.75;
}

/* Horizontal Mountain Mist Ribbons */
.horizontal-mist-layer {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 80px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(240, 246, 242, 0.55) 0%, rgba(240, 246, 242, 0.22) 50%, transparent 80%);
  filter: blur(14px);
  will-change: transform;
}

.mist-ribbon-1 {
  bottom: 16vh;
  height: 70px;
  animation: horizontalMistFloat 28s ease-in-out infinite alternate;
}

.mist-ribbon-2 {
  bottom: 24vh;
  height: 90px;
  opacity: 0.45;
  animation: horizontalMistFloat 38s ease-in-out infinite alternate-reverse;
}

.mist-valley-floor {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  border-radius: 0;
  background: linear-gradient(to top, rgba(235, 242, 238, 0.4) 0%, transparent 100%);
  filter: blur(8px);
}

@keyframes horizontalMistFloat {
  0% { transform: translateX(-8%) translateY(0); }
  50% { transform: translateX(4%) translateY(-8px); }
  100% { transform: translateX(12%) translateY(4px); }
}

/* 3. Historic Downtown Staunton Environment */
.twilight-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(32, 20, 46, 0.32) 0%, rgba(32, 20, 46, 0.08) 50%, transparent 100%);
}

.downtown-svg {
  height: 30vh;
  opacity: 0.65;
}

.downtown-lantern-glow-strip {
  position: absolute;
  bottom: 12vh;
  left: 0;
  right: 0;
  height: 40px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 196, 68, 0.25) 0%, transparent 70%);
  filter: blur(12px);
  animation: lanternFlicker 3s infinite alternate ease-in-out;
}

/* 4. Mountain Ridge Pass Crowd-In (Left & Right Flanks) */
.mountain-flank {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 140px;
  max-width: 22vw;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
}

.mountain-flank.left {
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(34, 46, 33, 0.18) 0%, rgba(34, 46, 33, 0.08) 55%, transparent 100%);
}

.mountain-flank.right {
  right: 0;
  transform: translateX(100%);
  background: linear-gradient(-90deg, rgba(34, 46, 33, 0.18) 0%, rgba(34, 46, 33, 0.08) 55%, transparent 100%);
}

.mountain-flank-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

/* When body enters mountain pass (Cabin, Overlooks, Crest) */
body.in-mountain-pass .mountain-flank.left {
  transform: translateX(0);
  opacity: 1;
}

body.in-mountain-pass .mountain-flank.right {
  transform: translateX(0);
  opacity: 1;
}

/* 2. Tumbling Orchard & Cidery Apples */
.apple-tumble-cluster {
  position: absolute;
  top: -14px;
  right: 24px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  pointer-events: auto;
  z-index: var(--z-delight);
  cursor: pointer;
}

.card-face.front {
  overflow: visible !important;
}

.farmstand-trail-card .apple-tumble-cluster,
.scenic-vista-card .apple-tumble-cluster {
  top: -14px;
  right: 26px;
}

.tumble-apple {
  position: relative;
  display: inline-block;
  transition: transform var(--dur-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.18));
}

.tumble-apple:hover {
  transform: scale(1.22) rotate(-8deg);
}

.tumble-apple:active {
  transform: scale(0.92);
}

.apple-1 {
  width: 28px;
  height: 28px;
  opacity: 0;
  transform: translateY(-40px) rotate(-90deg);
}

.apple-2 {
  width: 24px;
  height: 24px;
  opacity: 0;
  transform: translateY(-50px) rotate(120deg);
}

.apple-3 {
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: translateY(-30px) rotate(-45deg);
}

/* Trigger tumbling bounce when station is placed in view */
.trail-station.placed .apple-1 {
  animation: appleTumbleDrop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

.trail-station.placed .apple-2 {
  animation: appleTumbleBounce 1.05s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards;
}

.trail-station.placed .apple-3 {
  animation: appleTumbleRoll 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}

@keyframes appleTumbleDrop {
  0% { opacity: 0; transform: translateY(-40px) rotate(-90deg) scale(0.6); }
  60% { opacity: 1; transform: translateY(4px) rotate(12deg) scale(1.08); }
  80% { transform: translateY(-4px) rotate(-6deg) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes appleTumbleBounce {
  0% { opacity: 0; transform: translateY(-50px) rotate(120deg) scale(0.5); }
  55% { opacity: 1; transform: translateY(6px) rotate(-15deg) scale(1.12); }
  75% { transform: translateY(-6px) rotate(8deg) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) rotate(-5deg) scale(1); }
}

@keyframes appleTumbleRoll {
  0% { opacity: 0; transform: translateY(-30px) rotate(-180deg) scale(0.6); }
  65% { opacity: 1; transform: translateY(3px) rotate(20deg) scale(1.05); }
  85% { transform: translateY(-3px) rotate(-8deg) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) rotate(10deg) scale(1); }
}

/* Interactive Apple Sparkle Toast */
.apple-sparkle-toast {
  position: absolute;
  top: -30px;
  right: 0;
  background: var(--forest-deep);
  color: var(--sign-accent);
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  pointer-events: none;
  animation: floatSparkle 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: var(--elevation-sm);
  border: 1px solid rgba(213, 132, 29, 0.4);
}

@keyframes floatSparkle {
  0% { opacity: 0; transform: translateY(10px) scale(0.8); }
  25% { opacity: 1; transform: translateY(-5px) scale(1.05); }
  75% { opacity: 1; transform: translateY(-16px) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(0.9); }
}

/* 3. Evening Gaslight Lantern (Staunton / Dinner) */
.evening-lantern-wrap {
  position: absolute;
  top: 6px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: var(--z-delight);
}

.evening-lantern-svg {
  width: 26px;
  height: 38px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

.lantern-glow-halo {
  position: absolute;
  top: 14px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 68, 0.85) 0%, rgba(213, 132, 29, 0.35) 50%, transparent 80%);
  animation: lanternFlicker 2.8s infinite alternate ease-in-out;
}

@keyframes lanternFlicker {
  0% { transform: scale(0.92); opacity: 0.75; }
  35% { transform: scale(1.08); opacity: 0.95; }
  70% { transform: scale(0.96); opacity: 0.82; }
  100% { transform: scale(1.15); opacity: 1; }
}

/* 4. Cool Mountain Mist at Blue Ridge Tunnel */
.tunnel-mist-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(226, 234, 230, 0.45) 0%, rgba(226, 234, 230, 0.15) 60%, transparent 100%);
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

.mist-cloud {
  position: absolute;
  bottom: -6px;
  width: 160%;
  height: 36px;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, 0.55) 0%, transparent 70%);
  animation: mistDrift 14s ease-in-out infinite alternate;
}

@keyframes mistDrift {
  0% { transform: translateX(-20%); opacity: 0.6; }
  100% { transform: translateX(10%); opacity: 0.9; }
}

/* 5. Country Creamery Cowbell (Moo Thru) */
.cowbell-wrap {
  position: absolute;
  top: -14px;
  right: 24px;
  cursor: pointer;
  z-index: var(--z-delight);
  transition: transform var(--dur-fast) ease;
}

.cowbell-wrap:hover {
  transform: scale(1.15);
}

.cowbell-svg {
  width: 26px;
  height: 28px;
  transform-origin: top center;
}

.trail-station.placed .cowbell-svg {
  animation: cowbellSwing 2.2s cubic-bezier(0.36, 0, 0.66, -0.56) 0.4s;
}

@keyframes cowbellSwing {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(24deg); }
  40% { transform: rotate(-18deg); }
  60% { transform: rotate(12deg); }
  80% { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}

/* Mobile responsive tuning */
@media (max-width: 640px) {
  .mountain-flank {
    width: 60px;
    opacity: 0.5;
  }
  .apple-tumble-cluster {
    right: 18px;
    top: -14px;
  }
  .apple-1 { width: 24px; height: 24px; }
  .apple-2 { width: 20px; height: 20px; }
  .apple-3 { width: 16px; height: 16px; }
}


/* --- Module: journey-roadside.css --- */
/* DOM/SVG roadside journey layer. It is deliberately independent of
   SpatialCore: the scenic backplane must remain cheap to scroll and offline. */
.journey-roadside-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .88;
  contain: layout paint style;
}

.journey-roadside-scene.journey-theme-parked {
  display: none;
}

.journey-roadside-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.journey-horizon-roll {
  fill: rgba(107, 123, 77, .24);
  transition: fill .7s ease;
}

.journey-ground-band {
  fill: url(#journey-road-gradient);
  transition: fill .7s ease;
}

.journey-water-swells {
  display: none;
}

.journey-water-swells path {
  fill: none;
  stroke: rgba(226, 255, 242, .34);
  stroke-width: 3;
  stroke-linecap: round;
}

.journey-road {
  fill: rgba(72, 62, 51, .30);
  stroke: rgba(250, 241, 213, .28);
  stroke-width: 3;
  transition: fill .7s ease;
}

.journey-road-edges line {
  stroke: rgba(255, 245, 211, .50);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 22 24;
}

.journey-road-center-dashes rect {
  fill: rgba(255, 245, 211, .58);
}

.journey-parcel path.parcel-fill {
  fill: rgba(121, 145, 77, .22);
  stroke: rgba(73, 91, 53, .22);
  stroke-width: 2;
}

.journey-parcel path.parcel-row {
  fill: none;
  stroke: rgba(229, 203, 125, .20);
  stroke-width: 2;
  stroke-linecap: round;
}

.journey-parcel .parcel-art,
.journey-fence-run {
  overflow: visible;
}

.journey-parcel .parcel-art {
  color: var(--forest-deep, #162016);
}

.journey-parcel .parcel-art.accent {
  color: var(--terracotta, #B54728);
}

.journey-life-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.journey-life-actor {
  position: absolute;
  left: 0;
  top: 0;
  /* Fixed actor frame: the roadside layer currently uses one measured
     silhouette box, so these stay literal until per-actor sizing ships. */
  width: 80px;
  height: 80px;
  color: var(--forest-deep);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  contain: layout paint;
}

.journey-life-actor > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.journey-life-actor.gesture-deer,
.journey-life-actor.gesture-fox {
  animation: roadside-breathe 3.4s ease-in-out infinite;
}

.journey-life-actor.gesture-fox::after {
  content: '•';
  position: absolute;
  right: 6%;
  top: 15%;
  color: var(--amber, #D5841D);
  font-size: 9px;
  opacity: .0;
  animation: roadside-wink 7s ease-in-out infinite;
}

.journey-life-actor .jitter {
  animation: roadside-jitter 1.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.journey-life-actor .flap .wL,
.journey-life-actor .flap .wR {
  transform-box: fill-box;
  transform-origin: center;
  animation: roadside-flap 1.7s ease-in-out infinite alternate;
}

.journey-life-actor .flap .wR { animation-delay: -.18s; }

.journey-life-actor .sway {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: roadside-sway 5s ease-in-out infinite alternate;
}

@keyframes roadside-breathe {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -2px; }
}

@keyframes roadside-wink {
  0%, 72%, 100% { opacity: 0; }
  76%, 80% { opacity: .9; }
}

@keyframes roadside-jitter {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(1px); }
}

@keyframes roadside-flap {
  from { transform: rotate(-8deg) scaleY(.82); }
  to { transform: rotate(8deg) scaleY(1.08); }
}

@keyframes roadside-sway {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}

.journey-roadside-scene.journey-water-world .journey-horizon-roll {
  fill: rgba(78, 176, 174, .30);
}

.journey-roadside-scene.journey-water-world .journey-ground-band {
  fill: url(#journey-water-gradient);
}

.journey-roadside-scene.journey-water-world .journey-road {
  fill: rgba(31, 105, 111, .18);
  stroke: rgba(230, 255, 239, .30);
  opacity: .12;
}

.journey-roadside-scene.journey-water-world .journey-water-swells {
  display: block;
}

.journey-roadside-scene.journey-water-world .journey-parcels,
.journey-roadside-scene.journey-water-world .journey-fences {
  opacity: 0;
}

body[data-dressing="plain"] .journey-roadside-scene {
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
  .journey-life-layer { display: none; }
  .journey-roadside-scene { opacity: .55; }
}

@media (max-width: 600px) {
  .journey-roadside-scene { opacity: .72; }
  .journey-life-actor { transform-origin: 50% 100%; }
}


/* --- Module: weather.css --- */
/* Weather & Live Transit API Widgets CSS Module */

.live-weather-card {
  background: var(--card-front);
  border: 1px solid var(--parchment-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 16px 0;
  box-shadow: var(--elevation-sm);
  font-family: var(--font-ui);
}

.weather-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed var(--parchment-border);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.weather-location {
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--forest);
  display: flex;
  align-items: center;
  gap: 6px;
}

.weather-status-tag {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--amber-light);
  color: var(--amber);
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-weight: 600;
}

.weather-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.weather-temp-main {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--ink);
  font-family: var(--font-display);
  line-height: 1;
}

.weather-condition-desc {
  font-size: var(--font-size-base);
  color: var(--ink-muted);
  margin-top: 4px;
  font-weight: 500;
}

.weather-metrics-grid {
  display: flex;
  gap: 12px;
  font-size: var(--font-size-sm);
  color: var(--ink-muted);
}

.weather-metric-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.weather-metric-val {
  font-weight: 700;
  color: var(--ink);
}

/* Transit & Flight Card */
.transit-status-card {
  background: var(--card-back);
  border: 1px solid var(--parchment-border);
  border-left: 4px solid var(--terracotta);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 14px 0;
}

.transit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.transit-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--terracotta);
}

.transit-time-pill {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  background: var(--parchment);
  padding: 3px 8px;
  border-radius: var(--radius-2xs);
  color: var(--ink-muted);
}

.transit-route-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0;
}

.transit-code {
  font-size: var(--font-size-xl);
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--ink);
}

.transit-arrow {
  color: var(--amber);
  font-size: var(--font-size-md);
}

.transit-details-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--ink-muted);
  padding-top: 8px;
  border-top: 1px solid var(--parchment-border);
}


/* --- Module: map.css --- */
/* ==========================================================================
   Expedition Route Map, Waypoint Markers & Circuit Launcher Styles
   ========================================================================== */

.map-actions-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-route-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  line-height: 1.2;
}

.btn-route-action.primary {
  background: var(--forest);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--elevation-sm);
}
.btn-route-action.primary:hover {
  background: #152216;
  transform: translateY(-1px);
  box-shadow: var(--elevation-card-hover);
}


.btn-route-action.apple-btn {
  background: #FFFFFF;
  color: var(--forest);
  border-color: var(--parchment-border);
  box-shadow: var(--elevation-sm);
}
.btn-route-action.apple-btn:hover {
  background: var(--parchment);
  transform: translateY(-1px);
}

.btn-route-action.secondary {
  background: var(--amber-light, #FCF4E8);
  color: var(--amber, #D5841D);
  border-color: rgba(213, 132, 29, 0.3);
}
.btn-route-action.secondary:hover {
  background: #F8E8CE;
  transform: translateY(-1px);
}

/* Secondary Map Toolbar: Day Filter Chips & Zoom Controls */
.map-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--parchment-border);
}

.map-toolbar-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.map-toggles-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.map-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--parchment);
  color: var(--ink-muted);
  border: 1px solid var(--parchment-border);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
}

.map-filter-chip .chip-check {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-muted);
}

.map-filter-chip.active {
  background: var(--forest);
  color: #FFFFFF;
  border-color: var(--forest);
}

.map-filter-chip.active .chip-check {
  color: var(--gold);
}

.map-filter-chip:hover {
  transform: translateY(-1px);
}

.map-zoom-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.map-preset-group {
  display: inline-flex;
  background: var(--parchment);
  border: 1px solid var(--parchment-border);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
}

.map-preset-pill {
  font-family: var(--font-ui);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  line-height: 1.2;
}

.map-preset-pill.active {
  background: #FFFFFF;
  color: var(--forest);
  box-shadow: var(--elevation-sm);
}

.map-preset-pill:hover:not(.active) {
  color: var(--ink);
}

.map-zoom-buttons {
  display: inline-flex;
  gap: 4px;
}

.map-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  background: #FFFFFF;
  border: 1px solid var(--parchment-border);
  color: var(--forest);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  padding: 0;
  line-height: 1;
}

.map-zoom-btn:hover {
  background: var(--parchment);
  transform: translateY(-1px);
}

/* Route Segments & Waypoint Dynamic Filtering */
.map-route-segment {
  transition: opacity var(--dur-fast) ease, stroke-width var(--dur-fast) ease;
}

.map-route-segment.hidden {
  opacity: 0;
  pointer-events: none;
}

.day-segment-1 {
  stroke: #D5841D;
  stroke-width: 4.5px;
  stroke-dasharray: 8 6;
}

.day-segment-2 {
  stroke: #2D4C37;
  stroke-width: 4.5px;
  stroke-dasharray: 8 6;
}

.day-segment-3 {
  stroke: #A2482B;
  stroke-width: 4.5px;
  stroke-dasharray: 8 6;
}

.map-waypoint {
  cursor: pointer;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.map-waypoint.hidden {
  opacity: 0;
  pointer-events: none;
}

.route-canvas-box.panning {
  cursor: grab;
}

/* Illustrated Vector Map Canvas & Waypoints */
.route-canvas-box {
  padding: 12px 10px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.7) 0%, rgba(248, 243, 230, 0.5) 100%);
  border-radius: var(--radius-sm);
}

.route-map-vector {
  width: 100%;
  height: auto;
  display: block;
}

.map-waypoint {
  cursor: pointer;
  transition: transform var(--dur-fast) ease;
}

.map-waypoint:hover {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.map-waypoint:hover circle,
.map-waypoint:hover rect {
  transform: scale(1.15);
  transform-origin: center;
  transition: transform var(--dur-fast) ease;
}

.map-waypoint.active-live circle {
  animation: liveMarkerPulse 1.8s infinite ease-in-out;
}

@keyframes liveMarkerPulse {
  0% { r: 8px; stroke-width: 3px; }
  50% { r: 11px; stroke-width: 5px; stroke: #FFDDA6; }
  100% { r: 8px; stroke-width: 3px; }
}

.map-label-main {
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: 800;
  fill: #1A291B;
  paint-order: stroke fill;
  stroke: #F3ECE0;
  stroke-width: 4px;
  stroke-linejoin: round;
  user-select: none;
}

.map-label-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  fill: #6E4420;
  paint-order: stroke fill;
  stroke: #F3ECE0;
  stroke-width: 3px;
  stroke-linejoin: round;
  user-select: none;
  letter-spacing: 0.02em;
}

.map-label-return {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  fill: #2D4C37;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  paint-order: stroke fill;
  stroke: #F3ECE0;
  stroke-width: 4px;
  stroke-linejoin: round;
  user-select: none;
}

/* Route Selector Drawer / Modal */
.route-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 11, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: var(--z-modal, 1000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) ease, visibility var(--dur-base) ease;
}

.route-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.route-modal-card {
  background: var(--card-front, #FFFFFF);
  border: 2px solid var(--parchment-border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--elevation-overlay);
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.97);
  transition: transform var(--dur-base) cubic-bezier(0.16, 1, 0.3, 1);
}

.route-modal-backdrop.open .route-modal-card {
  transform: translateY(0) scale(1);
}

.route-modal-header {
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--parchment) 0%, #EFE7D5 100%);
  border-bottom: 1.5px solid var(--parchment-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.route-modal-title {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--forest);
}

.route-modal-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
}
.route-modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--ink);
}

.route-circuits-list {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.circuit-item-card {
  background: var(--card-detour, #F9F5EE);
  border: 1px solid var(--parchment-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.circuit-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.circuit-card-badge {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.circuit-card-title {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--forest);
}

.circuit-links-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.btn-circuit-link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: all var(--dur-fast) ease;
}

.btn-circuit-link.gmaps {
  background: var(--forest);
  color: #FFFFFF;
}
.btn-circuit-link.gmaps:hover {
  background: #142015;
}

.btn-circuit-link.amaps {
  background: #FFFFFF;
  color: var(--forest);
  border: 1px solid var(--parchment-border);
}
.btn-circuit-link.amaps:hover {
  background: var(--parchment);
}


/* --- Module: spatial.css --- */
/* ==========================================================================
   SpatialCore WebGL2 Backplane Styles & Law 11 Dressing Dial Integration
   - Viewport-locked 3D landscape and roadside fixtures
   - Transparent pointer-events to preserve 100% native HTML scroll performance
   - Zero-allocation power savings in "plain" mode
   ========================================================================== */

#ambientCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
  transform: translateZ(0);
  will-change: transform;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* --------------------------------------------------------------------------
   Law 11 — Dressing Dial Rules
   -------------------------------------------------------------------------- */

/* PLAIN: Clean editorial paper mode. Completely detaches/hides canvas for 0 GPU & 0 battery cost. */
body[data-dressing="plain"] #ambientCanvas {
  display: none !important;
}
body[data-dressing="plain"] .candy-track-svg {
  opacity: 0.25;
}

/* WARM: Subtle horizon and sky atmospheric depth without heavy particle flourishes. */
body[data-dressing="warm"] #ambientCanvas {
  opacity: 0.85;
}

/* FULL: Default production balanced mode (scenic road, SVG silhouettes, horizon mist). */
body[data-dressing="full"] #ambientCanvas {
  opacity: 1;
}

/* MAXIMAL: Full dynamic flourishes, high density motes, roaming actors, and peak horizon depth. */
body[data-dressing="maximal"] #ambientCanvas {
  opacity: 1;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  #ambientCanvas {
    opacity: 0.7;
  }
}
.reduced-motion-override #ambientCanvas {
  opacity: 0.7;
}

/* Ensure trail stage and stations float clearly over the ambient backplane */
.trail-stage {
  z-index: 2;
}
.candy-track-svg {
  z-index: 1;
}
.trail-station {
  z-index: 2;
}
header {
  z-index: 20;
}
.bottom-nav {
  z-index: 20;
}

/* --------------------------------------------------------------------------
   Legacy 2D Stand-in SVGs Retirement (PARKED 2026-09-06: DOM scene is the
   backplane again; GL canvas element removed from template. Rules kept
   for a future flip-back — re-enable together with the canvas element.)
   -------------------------------------------------------------------------- */
/* body:not([data-dressing="plain"]) .trail-atmospheric-canvas,
body:not([data-dressing="plain"]) .mountain-flank {
  display: none !important;
} */

/* body:not([data-dressing="plain"]) .candy-track-svg {
  display: none !important;
} */



/* --- Module: bottom-nav.css --- */
/* ==========================================================================
   VacayGo Native Bottom Navigation Bar
   ========================================================================== */

.vg-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-dock, 300);
  background: var(--bg-header, rgba(24, 34, 24, 0.96));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--bg-header-border, rgba(255, 255, 255, 0.12));
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.28);
  user-select: none;
  transition: transform var(--dur-base) ease, opacity var(--dur-base) ease;
}

/* Hide navigation bar on locked gate screen */
body.gate-locked .vg-bottom-nav {
  display: none !important;
}

.vg-nav-item {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.65);
  transition: all var(--dur-fast) ease;
  position: relative;
  min-width: 58px;
}

.vg-nav-icon-wrap {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) ease;
}

.vg-nav-icon-wrap svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.vg-nav-label {
  font-family: var(--font-ui);
  font-size: var(--font-size-2xs, 0.64rem);
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  transition: color var(--dur-fast) ease;
}

.vg-nav-item:hover {
  color: #FFFFFF;
}

.vg-nav-item:hover .vg-nav-icon-wrap {
  transform: translateY(-2px);
}

.vg-nav-item.active {
  color: var(--sign-accent, #FFDDA6);
}

.vg-nav-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2.5px;
  background: var(--sign-accent, #FFDDA6);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 6px rgba(255, 221, 166, 0.7);
}

/* Center Highlight Button (Expedition Search) */
.vg-nav-item-highlight {
  position: relative;
}

.vg-nav-item-highlight .search-bubble {
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--amber) 100%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(181, 71, 40, 0.45);
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: transform var(--dur-fast) cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--dur-fast) ease;
}

.vg-nav-item-highlight .search-bubble svg {
  width: 17px;
  height: 17px;
  stroke: #FFFFFF;
}

.vg-nav-item-highlight:hover .search-bubble {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 4px 14px rgba(213, 132, 29, 0.6);
}

/* Audio Cassette Dock elevation coordination */
.cassette-dock {
  bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Ensure page bottom content is not obscured by bottom nav */
@media (max-width: 900px) {
  body {
    padding-bottom: calc(var(--page-pad-bottom, 270px) + 40px);
  }
}


/* --- Module: settings.css --- */
/* ==========================================================================
   Expedition Settings Bar & Controls Drawer
   ========================================================================== */

.settings-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 11, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: var(--z-modal, 1000);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) ease, visibility var(--dur-base) ease;
}

@media (min-width: 640px) {
  .settings-modal-backdrop {
    align-items: center;
    padding: 20px;
  }
}

.settings-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.settings-modal-card {
  background: var(--card-front, #FFFFFF);
  border: 2px solid var(--parchment-border);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  width: 100%;
  max-width: 580px;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: var(--elevation-overlay);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--dur-slow) cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  .settings-modal-card {
    border-radius: var(--radius-xl);
    transform: translateY(30px) scale(0.97);
  }
}

.settings-modal-backdrop.open .settings-modal-card {
  transform: translateY(0) scale(1);
}

.settings-header {
  padding: 18px 22px;
  background: linear-gradient(180deg, var(--parchment) 0%, #EFE8D7 100%);
  border-bottom: 1.5px solid var(--parchment-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.settings-header-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-badge {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  color: var(--terracotta);
  letter-spacing: 0.8px;
}

.settings-title {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--forest);
  margin: 0;
}

.settings-close-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  line-height: 1;
}
.settings-close-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: var(--ink);
}

.settings-content {
  padding: 20px 22px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-group-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: 800;
  color: var(--forest-light);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-row-card {
  background: var(--card-detour, #F9F5EE);
  border: 1px solid var(--parchment-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-row-desc {
  font-size: var(--font-size-xs);
  color: var(--ink-muted);
  line-height: 1.45;
  margin: 0;
}

/* Segmented Control Pills */
.settings-segmented-bar {
  display: flex;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-xs);
  padding: 3px;
  gap: 3px;
}

.settings-segment-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 7px 10px;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--ink-muted);
  border-radius: var(--radius-2xs);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  text-align: center;
}

.settings-segment-btn.active {
  background: #FFFFFF;
  color: var(--forest);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Soundscapes Volume Slider Row */
.settings-slider-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.settings-slider-range {
  flex: 1;
  accent-color: var(--amber);
  cursor: pointer;
  height: 6px;
}

.settings-mute-btn {
  background: var(--card-front, #FFF);
  border: 1px solid var(--parchment-border);
  border-radius: var(--radius-xs);
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--forest);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.settings-mute-btn.muted {
  background: #FFE8E5;
  color: #B52A18;
  border-color: #F8B4AC;
}

/* Themes Quick Switcher Grid */
.settings-themes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.settings-theme-pill {
  background: #FFFFFF;
  border: 1.5px solid var(--parchment-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}

.settings-theme-pill:hover {
  border-color: var(--amber);
  transform: translateY(-1px);
}

.settings-theme-pill.active {
  border-color: var(--forest);
  background: var(--amber-light, #FCF4E8);
}

.settings-theme-pill-title {
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 800;
  color: var(--forest);
}

.settings-theme-pill-sub {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  color: var(--ink-muted);
}

/* Action Utility Buttons */
.settings-actions-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-settings-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid var(--parchment-border);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--forest);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
}
.btn-settings-action:hover {
  background: var(--parchment);
  border-color: var(--forest);
}

.btn-settings-action.danger {
  color: #B52A18;
  border-color: rgba(181, 42, 24, 0.3);
}
.btn-settings-action.danger:hover {
  background: #FFF2F0;
  border-color: #B52A18;
}

/* Advanced Accordion & Curator Tools Section */
.settings-advanced-details {
  border-top: 2px dashed var(--parchment-border);
  padding-top: 14px;
  margin-top: 16px;
}

.settings-advanced-summary {
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--forest);
  cursor: pointer;
  padding: 8px 12px;
  background: var(--parchment);
  border: 1px solid var(--parchment-border);
  border-radius: var(--radius-xs);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all var(--dur-fast) ease;
}

.settings-advanced-summary:hover {
  border-color: var(--amber);
  background: #F4EEDF;
}

.settings-advanced-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 14px;
}

/* Curator Toggle Button */
.settings-curator-toggle-btn {
  width: 100%;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1.5px solid var(--parchment-border);
  border-radius: var(--radius-xs);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--forest);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-fast) ease;
}

.settings-curator-toggle-btn:hover {
  background: var(--parchment);
  border-color: var(--terracotta);
}

.settings-curator-toggle-btn.active {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #FFFFFF;
}

/* Reset Preferences Card */
.settings-reset-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid var(--parchment-border);
  border-radius: var(--radius-xs);
  padding: 12px;
}

.btn-settings-reset {
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid rgba(181, 42, 24, 0.35);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: #B52A18;
  cursor: pointer;
  transition: all var(--dur-fast) ease;
}

.btn-settings-reset:hover {
  background: #FFF2F0;
  border-color: #B52A18;
}

/* Schedule Manager Table Container inside Settings */
.settings-schedule-wrapper {
  background: #FFFFFF;
  border: 1px solid var(--parchment-border);
  border-radius: var(--radius-xs);
  padding: 10px;
  max-height: 380px;
  overflow-y: auto;
}

.settings-modal-card .schedule-drawer-hint {
  color: var(--ink-muted);
}
.settings-modal-card .btn-schedule-sub {
  background: #FFFFFF;
  color: var(--forest) !important;
  border-color: var(--parchment-border);
}
.settings-modal-card .btn-schedule-sub span {
  color: var(--forest) !important;
}
.settings-modal-card .btn-schedule-sub:hover {
  background: var(--parchment);
  border-color: var(--forest);
}
.settings-modal-card .btn-schedule-sub.warning,
.settings-modal-card .btn-schedule-sub.warning span {
  color: #B52A18 !important;
  border-color: rgba(181, 42, 24, 0.35);
}
.settings-modal-card .btn-schedule-sub.warning:hover {
  background: #FFF2F0;
  border-color: #B52A18;
}
.settings-modal-card .schedule-table th {
  color: var(--terracotta);
  border-bottom-color: var(--parchment-border);
}
.settings-modal-card .schedule-table td {
  color: var(--ink);
  border-bottom-color: var(--parchment);
}
.settings-modal-card .schedule-table tr:hover {
  background: var(--parchment);
}
.settings-modal-card .day-header-row td {
  background: var(--parchment);
  color: var(--forest);
}
.settings-modal-card .btn-arrow,
.settings-modal-card .btn-edit-sm {
  background: #FFFFFF;
  border: 1px solid var(--parchment-border);
  color: var(--forest);
}
.settings-modal-card .btn-arrow:not(:disabled):hover,
.settings-modal-card .btn-edit-sm:hover {
  background: var(--forest);
  color: #FFFFFF;
  border-color: var(--forest);
}

/* Global Floating Toast */
.expedition-floating-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--forest, #1E2E20);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 700;
  box-shadow: var(--elevation-overlay);
  z-index: calc(var(--z-modal, 1000) + 100);
  opacity: 0;
  transition: transform var(--dur-base) ease, opacity var(--dur-base) ease;
  pointer-events: none;
}

.expedition-floating-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}


/* --- Module: search.css --- */
/* ==========================================================================
   Expedition Global Search Engine Styles
   ========================================================================== */

.search-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 11, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: var(--z-modal, 1000);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  padding-top: max(24px, env(safe-area-inset-top, 24px));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) ease, visibility var(--dur-base) ease;
}

.search-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.search-modal-card {
  background: var(--card-front, #FFFFFF);
  border: 2px solid var(--parchment-border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 640px;
  max-height: 84vh;
  box-shadow: var(--elevation-overlay);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-20px) scale(0.97);
  transition: transform var(--dur-base) cubic-bezier(0.16, 1, 0.3, 1);
}

.search-modal-backdrop.open .search-modal-card {
  transform: translateY(0) scale(1);
}

/* Search Bar Input Row */
.search-input-header {
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--parchment) 0%, #F1E9DA 100%);
  border-bottom: 1.5px solid var(--parchment-border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-icon-svg {
  width: 20px;
  height: 20px;
  stroke: var(--forest);
  flex-shrink: 0;
}

.search-input-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--ink);
}

.search-input-field::placeholder {
  color: rgba(107, 98, 88, 0.7);
  font-weight: 500;
}

.search-clear-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-pill);
  display: none;
}
.search-clear-btn.visible {
  display: block;
}

.search-esc-badge {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--ink-muted);
  padding: 3px 6px;
  border-radius: var(--radius-2xs);
  user-select: none;
}

/* Filter Categories Track */
.search-filters-bar {
  display: flex;
  gap: 6px;
  padding: 10px 18px;
  overflow-x: auto;
  background: #FAF7F0;
  border-bottom: 1px solid var(--parchment-border);
  scrollbar-width: none;
}
.search-filters-bar::-webkit-scrollbar {
  display: none;
}

.search-filter-chip {
  background: #FFFFFF;
  border: 1px solid var(--parchment-border);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast) ease;
}

.search-filter-chip:hover {
  border-color: var(--amber);
  color: var(--forest);
}

.search-filter-chip.active {
  background: var(--forest);
  border-color: var(--forest);
  color: #FFFFFF;
}

/* Search Results Area */
.search-results-viewport {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-result-card {
  background: var(--card-detour, #F9F5EE);
  border: 1px solid var(--parchment-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  text-decoration: none;
  text-align: left;
}

.search-result-card:hover {
  background: #FFFFFF;
  border-color: var(--amber);
  transform: translateY(-1px);
  box-shadow: var(--elevation-sm);
}

.search-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-result-category {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--terracotta);
}

.search-result-category.cat-stop { color: var(--terracotta); }
.search-result-category.cat-lore { color: var(--forest); }
.search-result-category.cat-audio { color: #2B6CB0; }
.search-result-category.cat-voucher { color: #8A4B1A; }
.search-result-category.cat-secret { color: #8A2BE2; font-weight: 900; }

.search-result-day {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  color: var(--ink-muted);
}

.search-result-title {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 800;
  color: var(--forest);
  margin: 0;
}

.search-result-snippet {
  font-size: var(--font-size-xs);
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}

mark.search-highlight {
  background: #FFE8A3;
  color: #573A00;
  padding: 1px 3px;
  border-radius: 2px;
  font-weight: 800;
}

/* Empty / Suggestions State */
.search-empty-state {
  padding: 24px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.search-empty-title {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  color: var(--forest);
  margin: 0;
}

.search-empty-sub {
  font-size: var(--font-size-xs);
  color: var(--ink-muted);
  max-width: 380px;
  line-height: 1.5;
}

.search-suggestions-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

.search-suggestion-pill {
  background: var(--card-front, #FFF);
  border: 1px solid var(--parchment-border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--forest);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
}

.search-suggestion-pill:hover {
  background: var(--amber-light, #FCF4E8);
  border-color: var(--amber);
  transform: translateY(-1px);
}

/* Target Station Highlight Animation */
@keyframes targetStationPulse {
  0% { box-shadow: 0 0 0 0 rgba(213, 132, 29, 0.8); transform: scale(1); }
  50% { box-shadow: 0 0 0 16px rgba(213, 132, 29, 0); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 0 rgba(213, 132, 29, 0); transform: scale(1); }
}

.search-target-highlight {
  animation: targetStationPulse 1.8s ease-in-out 2 !important;
  outline: 3px solid var(--amber, #D5841D) !important;
  outline-offset: 6px;
  border-radius: var(--radius-md);
}


/* --- Module: games.css --- */
/* ==========================================================================
   Car Games — Shared Component Structure
   --------------------------------------------------------------------------
   Structural/layout rules only — every visual value comes from --game-*
   custom properties. Deliberately NOT touched by scripts/theme_engine.py:
   the "skin" (the actual --game-* token values) lives in one of the
   css/games-skin-*.css files, selected at runtime via a
   [data-games-theme="<name>"] attribute on #games-shell-backdrop (see
   applyGamesTheme() in js/games-engine.js). This file must not define any
   --game-* token itself — only consume them — so every skin file's
   [data-games-theme="x"] block is a complete, independent set of values.

   The skin contract every css/games-skin-*.css file must define in full:
     --game-text, --game-ink, --game-ink-solid   (copy / line+shadow / guaranteed-dark-fill)
     --game-paper, --game-surface                (page bg / card bg)
     --game-red, --game-orange, --game-yellow, --game-green,
     --game-teal, --game-blue, --game-purple, --game-pink   (all 8 — grid
       cells and tile badges assign one of these 8 names at random, so every
       skin needs all 8 defined even if it remaps them to its own palette)
     --game-driver, --game-passenger
     --game-border-w, --game-radius-sm/md/lg/pill
     --game-shadow-sm/md/lg
     --game-font, --game-fs-sm/body/md/lg/xl/2xl

   --game-ink is the line/border/shadow color and MAY be any hue (Deco Voyage
   uses gold, not black). --game-ink-solid MUST stay dark regardless — it's
   the guaranteed-readable-with-white-text fill for .game-score-badge and
   .game-reveal-card.is-hidden.

   Nested overrides (targeted Y over default X): shared classes are the
   default rendering everywhere. When a primitive reads wrong in ONE skin,
   that skin file adds a scoped rule — [data-games-theme="<name>"] first,
   narrowing to [data-game="<id>"] (set by openGame/renderGamesMenu on
   #games-shell-body, "menu" for the hub) when only one game is affected.
   Example: Concourse's near-white red needs dark text on .is-bad while
   every other skin keeps white. Never restyle a primitive globally to fix
   one skin; scope it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shell — same fixed overlay pattern as #settings-drawer-modal, but a full
   screen takeover (games need the whole viewport, not a drawer).
   -------------------------------------------------------------------------- */

.games-shell-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-top, 1100);
  background: rgba(15, 15, 20, 0.6);
  display: none;
  align-items: stretch;
  justify-content: stretch;
}

.games-shell-backdrop.open {
  display: flex;
}

/* Passthrough by default — only the Cell-Shaded skin adds padding/background
   here, for the trip-context mat. Every other skin renders this as if it
   weren't there. */
.games-trip-mat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.games-trip-strip {
  display: none;
}

.games-shell-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--game-paper);
  color: var(--game-text);
  font-family: var(--game-font);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.game-header {
  --game-header-edge: color-mix(in srgb, var(--game-ink) 58%, var(--game-paper));
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px));
  padding-top: 14px;
  background: var(--game-paper);
  border-bottom: var(--game-border-w) solid var(--game-header-edge);
}

.game-header-back,
.game-header-end {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--game-radius-pill);
  border: var(--game-border-w) solid var(--game-header-edge);
  background: var(--game-surface);
  color: var(--game-text); /* never the UA default: dark skins have dark surfaces */
  box-shadow: 2px 2px 0 var(--game-header-edge);
  font-family: var(--game-font);
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.game-header-back:active,
.game-header-end:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--game-header-edge);
}

.game-header-menu {
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}

/* The Menu sheet: three named destinations over the game, nothing else. */
.game-menu-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 64px 12px 12px;
  background: color-mix(in srgb, var(--game-ink-solid) 38%, transparent);
}
.game-menu-sheet-card {
  position: relative;
  width: min(300px, 100%);
  padding: 14px 12px 12px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-md);
  background: var(--game-surface);
  box-shadow: var(--game-shadow-md);
  display: grid;
  gap: 8px;
}
.game-menu-sheet-close {
  position: absolute;
  top: -14px;
  right: -8px;
  width: 36px;
  height: 36px;
  border-radius: var(--game-radius-pill);
  border: var(--game-border-w) solid var(--game-ink);
  background: var(--game-surface);
  font-weight: 800;
  cursor: pointer;
}
.game-menu-sheet-item {
  display: grid;
  gap: 2px;
  text-align: left;
  min-height: 54px;
  padding: 9px 12px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: var(--game-surface);
  color: var(--game-text);
  font-family: var(--game-font);
  cursor: pointer;
}
.game-menu-sheet-item > b { font-size: var(--game-fs-body); font-weight: 800; }
.game-menu-sheet-item > small { font-size: var(--game-fs-sm); opacity: 0.75; }
.game-menu-sheet-item:focus-visible, .game-menu-sheet-close:focus-visible, .game-header-menu:focus-visible { outline: 3px solid var(--game-orange); outline-offset: 2px; }

.game-header-titles {
  flex: 1;
  min-width: 0;
}

.game-header-title {
  font-weight: 800;
  font-size: var(--game-fs-lg);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-header-sub {
  font-size: var(--game-fs-sm);
  font-weight: 600;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Menu grid
   -------------------------------------------------------------------------- */

.game-menu-intro {
  padding: 18px 18px 4px;
}

.game-menu-intro h2 {
  font-size: var(--game-fs-xl);
  font-weight: 800;
}

.game-menu-intro p {
  font-size: var(--game-fs-sm);
  font-weight: 600;
  opacity: 0.75;
  margin-top: 4px;
}


/* Library organization changes how the same collection is arranged; it does
   not hide categories. Keep the switch compact and let the library itself do
   the explaining as the user scrolls. */
.game-library-tools {
  display: flex;
  align-items: center;
  padding: 12px 18px 4px;
}

.game-library-view-switch {
  width: min(240px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.game-library-view-button {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-pill);
  background: var(--game-surface);
  color: var(--game-text);
  box-shadow: none;
  padding: 8px 10px;
  font-family: var(--game-font);
  font-size: var(--game-fs-sm);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

.game-library-view-button[aria-pressed="true"] {
  background: var(--game-yellow);
  box-shadow: 0 2px 0 var(--game-ink);
  transform: translateY(-1px);
  font-weight: 900;
}

.game-library-view-button:active {
  transform: translateY(1px);
  box-shadow: none;
}

.game-library-view-button:focus-visible {
  outline: 3px solid var(--game-ink);
  outline-offset: 2px;
}

.game-library-section + .game-library-section {
  border-top: var(--game-border-w) solid color-mix(in srgb, var(--game-ink) 18%, transparent);
}

.game-category-intro {
  padding: 12px 18px 0;
}

.game-category-intro h2 {
  margin: 0;
  font-size: var(--game-fs-lg);
  font-weight: 800;
  line-height: 1.15;
}

.game-category-intro p {
  margin: 3px 0 0;
  font-size: var(--game-fs-sm);
  font-weight: 600;
  line-height: 1.3;
  opacity: 0.72;
}

.game-library-section .game-category-grid {
  padding-top: 10px;
  padding-bottom: 18px;
}

.game-library-section:last-child .game-category-grid,
.game-library-a-z .game-category-grid {
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

.game-library-a-z .game-category-grid {
  padding-top: 12px;
}

@media (max-width: 420px) {
  .game-library-tools {
    padding: 10px 14px 2px;
  }

  .game-library-view-switch {
    width: min(220px, 100%);
  }

  .game-library-view-button {
    min-height: 40px;
    padding: 7px 8px;
  }

  .game-category-intro {
    padding: 11px 14px 0;
  }

  .game-library-section .game-category-grid {
    gap: 10px;
    padding: 9px 14px 14px;
  }

  .game-library-section:last-child .game-category-grid,
  .game-library-a-z .game-category-grid {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  [data-game="menu"] .game-tile {
    gap: 7px;
    padding: 12px;
  }

  [data-game="menu"] .game-tile-badge {
    width: 40px;
    height: 40px;
  }
}

.game-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px 18px calc(32px + env(safe-area-inset-bottom, 0px));
}

.game-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: var(--game-surface);
  --game-menu-edge: color-mix(in srgb, var(--game-ink) 68%, var(--game-surface));
  border: var(--game-border-w) solid var(--game-menu-edge);
  border-radius: var(--game-radius-md);
  box-shadow: 2px 2px 0 var(--game-menu-edge);
  padding: 14px;
  cursor: pointer;
  font-family: var(--game-font);
  color: var(--game-text);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.game-tile:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--game-menu-edge);
}

.game-tile-badge {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: var(--game-border-w) solid var(--game-ink);
  background: var(--tile-color, var(--game-yellow));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--game-text);
}

.game-tile-title {
  font-weight: 800;
  font-size: var(--game-fs-md);
  line-height: 1.2;
}

.game-tile-blurb {
  font-size: var(--game-fs-sm);
  opacity: 0.75;
  font-weight: 500;
  line-height: 1.3;
}

.game-tile-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}

.game-tag {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: var(--game-radius-pill);
  border: 2px solid var(--game-ink);
  background: var(--game-surface);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   In-game shared primitives
   -------------------------------------------------------------------------- */

.game-body {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  gap: 18px;
}

.game-top-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.game-turn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: var(--game-fs-sm);
  padding: 8px 16px;
  border-radius: var(--game-radius-pill);
  border: var(--game-border-w) solid var(--game-ink);
  box-shadow: var(--game-shadow-sm);
  background: var(--game-surface);
}

.game-turn-chip.is-driver {
  background: var(--game-driver);
}

.game-turn-chip.is-passenger {
  background: var(--game-passenger);
}

.game-score-badge {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: var(--game-fs-sm);
  background: color-mix(in srgb, var(--game-ink-solid) 12%, var(--game-surface));
  color: var(--game-text);
  border: var(--game-border-w) solid var(--game-ink);
  box-shadow: 2px 2px 0 var(--game-ink);
  padding: 7px 14px;
  border-radius: var(--game-radius-pill);
  white-space: nowrap;
}

.game-prompt-row {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.game-prompt-row .game-prompt-card {
  flex: 1;
}

.game-prompt-row.is-versus {
  align-items: center;
}

.game-prompt-card {
  width: 100%;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-lg);
  box-shadow: var(--game-shadow-md);
  background: var(--game-yellow);
  padding: 34px 20px;
  text-align: center;
  font-weight: 800;
  font-size: var(--game-fs-2xl);
  line-height: 1.2;
  color: var(--game-text);
}

.game-prompt-card.family-word { background: var(--game-yellow); }
.game-prompt-card.family-trivia { background: var(--game-blue); color: #fff; }
.game-prompt-card.family-story { background: var(--game-purple); color: #fff; }
.game-prompt-card.family-grid { background: var(--game-green); }
.game-prompt-card.family-social { background: var(--game-pink); color: #fff; }

.game-prompt-sub {
  font-size: var(--game-fs-sm);
  font-weight: 600;
  opacity: 0.85;
  margin-top: 8px;
}

/* Big single-glyph badge — a letter, a number, a die face. Sits alongside
   a prompt card when a game needs one extra piece of at-a-glance info. */
.game-letter-badge {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-md);
  box-shadow: var(--game-shadow-sm);
  background: var(--game-orange);
  font-weight: 800;
  font-size: var(--game-fs-xl);
}

button.game-letter-badge {
  color: var(--game-text);
  font: inherit;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

button.game-letter-badge:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--game-ink);
}

button.game-letter-badge:focus-visible {
  outline: 3px solid var(--game-ink);
  outline-offset: 3px;
}

/* Reveal / hide mechanic — secret word games. A quick scale+opacity swap
   rather than a 3D flip: just as legible, and it degrades cleanly under
   prefers-reduced-motion via the global rule in css/base.css. */
.game-reveal-card {
  width: 100%;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-lg);
  box-shadow: var(--game-shadow-md);
  padding: 34px 20px;
  text-align: center;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-reveal-card .reveal-face {
  font-weight: 800;
  font-size: var(--game-fs-xl);
  transition: transform var(--dur-fast, 0.2s) ease, opacity var(--dur-fast, 0.2s) ease;
}

.game-reveal-card.is-hidden {
  background: var(--game-ink-solid);
}

.game-reveal-card.is-hidden .reveal-face {
  color: var(--game-paper);
  font-size: var(--game-fs-md);
  opacity: 0.85;
}

.game-reveal-card.is-revealed {
  background: var(--game-yellow);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.game-actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.game-btn {
  font-family: var(--game-font);
  font-weight: 800;
  font-size: var(--game-fs-md);
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-md);
  padding: 14px 22px;
  box-shadow: var(--game-shadow-sm);
  background: var(--game-surface);
  color: var(--game-text);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.game-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--game-ink);
}

.game-btn-primary { background: var(--game-green); }
.game-btn-secondary { background: var(--game-surface); }
.game-btn-danger { background: var(--game-red); color: #fff; }
.game-btn-wide { flex: 1 1 100%; }

.game-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--game-shadow-sm);
}

/* --------------------------------------------------------------------------
   Grid primitive — License Plate Spotting now, Codenames word grid later.
   -------------------------------------------------------------------------- */

.game-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}

/* Codenames is authored as a 4×4 board; keep all sixteen words in that
   shape at phone widths instead of allowing the shared grid to reflow. */
[data-game="codenames"] .game-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.game-grid-cell {
  position: relative;
  min-width: 0;
  border: 2.5px solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: var(--tile-color, var(--game-surface));
  color: var(--game-text);
  box-shadow: 2px 2px 0 var(--game-ink);
  padding: 10px 4px;
  text-align: center;
  font-weight: 800;
  font-size: var(--game-fs-sm);
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;
}

.game-bee-tray {
  width: 100%;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-lg);
  background: var(--game-surface);
  box-shadow: var(--game-shadow-sm);
  padding: 12px;
}

.game-bee-tray-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.game-bee-tray-title {
  font-size: var(--game-fs-sm);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.game-bee-tray-help {
  font-size: .68rem;
  font-weight: 700;
  opacity: .7;
  text-align: right;
}

.game-bee-tiles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.game-bee-tile {
  min-width: 0;
  min-height: 56px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: var(--game-paper);
  color: var(--game-text);
  box-shadow: var(--game-shadow-sm);
  padding: 8px 4px;
  font: inherit;
  font-size: var(--game-fs-lg);
  font-weight: 900;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;
}

.game-bee-tile.is-required {
  background: var(--game-orange);
}

.game-bee-tile:active,
.game-bee-tile.is-dragging {
  cursor: grabbing;
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 1px 5px 0 var(--game-ink);
}

.game-bee-tile:focus-visible {
  outline: 3px solid var(--game-ink);
  outline-offset: 3px;
}

.game-role-label {
  display: block;
  margin-top: 2px;
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.04em;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0.82;
}

.game-grid-cell.is-marked {
  background: var(--game-green);
  text-decoration: line-through;
  opacity: 0.5;
  box-shadow: none;
  transform: translate(2px, 2px);
}

/* --------------------------------------------------------------------------
   Battle Grid Pick — RC Cleanup feedback family
   --------------------------------------------------------------------------
   These are CSS/procedural shapes, not runtime art. They add a quiet toy-room
   and rover grammar around the shared grid while the data-state labels and
   public/private boundaries remain owned by the game view.
   -------------------------------------------------------------------------- */

[data-game="battle-grid-pick"] .bgp-brief-card {
  position: relative;
  overflow: hidden;
}

[data-game="battle-grid-pick"] .bgp-scene {
  position: relative;
  width: 112px;
  height: 28px;
  margin: -4px auto 4px;
  border: 1px solid color-mix(in srgb, var(--game-ink) 32%, transparent);
  border-radius: var(--game-radius-sm);
  background: color-mix(in srgb, var(--game-teal) 12%, var(--game-surface));
}

[data-game="battle-grid-pick"] .bgp-clutter,
[data-game="battle-grid-pick"] .bgp-rover {
  position: absolute;
  display: block;
}

[data-game="battle-grid-pick"] .bgp-clutter {
  bottom: 5px;
  width: 12px;
  height: 7px;
  border: 1.5px solid var(--game-orange);
  border-radius: 2px;
  opacity: .8;
}

[data-game="battle-grid-pick"] .bgp-clutter-a { left: 10px; transform: rotate(-8deg); }
[data-game="battle-grid-pick"] .bgp-clutter-b { left: 27px; width: 8px; height: 11px; border-color: var(--game-purple); transform: rotate(12deg); }
[data-game="battle-grid-pick"] .bgp-clutter-c { right: 12px; width: 16px; border-color: var(--game-yellow); transform: rotate(7deg); }

[data-game="battle-grid-pick"] .bgp-rover {
  left: 46px;
  bottom: 5px;
  width: 25px;
  height: 12px;
  border: 2px solid var(--game-ink);
  border-radius: 4px 4px 3px 3px;
  background: var(--game-orange);
  animation: bgp-rover-scan 1.8s ease-in-out infinite;
}

[data-game="battle-grid-pick"] .bgp-rover::before,
[data-game="battle-grid-pick"] .bgp-rover::after {
  content: '';
  position: absolute;
  bottom: -5px;
  width: 6px;
  height: 5px;
  border: 1.5px solid var(--game-ink);
  border-radius: 50%;
  background: var(--game-surface);
}

[data-game="battle-grid-pick"] .bgp-rover::before { left: 2px; }
[data-game="battle-grid-pick"] .bgp-rover::after { right: 2px; }
[data-game="battle-grid-pick"] .bgp-rover i,
[data-game="battle-grid-pick"] .bgp-rover b { position: absolute; display: block; }
[data-game="battle-grid-pick"] .bgp-rover i { left: 10px; top: -7px; width: 2px; height: 7px; background: var(--game-ink); }
[data-game="battle-grid-pick"] .bgp-rover b { left: 8px; top: -10px; width: 6px; height: 6px; border: 1.5px solid var(--game-ink); border-radius: 50%; background: var(--game-yellow); }

[data-game="battle-grid-pick"] .bgp-target-icon {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: .8;
}

[data-game="battle-grid-pick"] .bgp-target-icon-train::before,
[data-game="battle-grid-pick"] .bgp-target-icon-track::before,
[data-game="battle-grid-pick"] .bgp-target-icon-crayon::before,
[data-game="battle-grid-pick"] .bgp-target-icon-ruler::before {
  content: '';
  position: absolute;
  display: block;
}

[data-game="battle-grid-pick"] .bgp-target-icon-train::before { left: 3px; top: -4px; width: 4px; height: 4px; border: 1.5px solid currentColor; background: currentColor; }
[data-game="battle-grid-pick"] .bgp-target-icon-track { height: 5px; margin-bottom: 3px; border-radius: 0; }
[data-game="battle-grid-pick"] .bgp-target-icon-track::before { left: 1px; right: 1px; top: 2px; border-top: 1.5px solid currentColor; }
[data-game="battle-grid-pick"] .bgp-target-icon-crayon { width: 7px; height: 15px; margin: 0 8px 0 2px; border-radius: 4px 4px 2px 2px; transform: rotate(18deg); }
[data-game="battle-grid-pick"] .bgp-target-icon-ruler { width: 5px; height: 16px; margin: 0 10px 0 2px; border-radius: 1px; transform: rotate(8deg); }

[data-game="battle-grid-pick"] .bgp-placement-grid,
[data-game="battle-grid-pick"] .bgp-search-grid {
  position: relative;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--game-ink) 28%, transparent);
  border-radius: var(--game-radius-sm);
  background-color: color-mix(in srgb, var(--game-teal) 7%, var(--game-paper));
  background-image: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--game-orange) 35%, transparent) 0 2px, transparent 2.5px), radial-gradient(circle at 78% 70%, color-mix(in srgb, var(--game-purple) 25%, transparent) 0 1.5px, transparent 2px);
}

[data-game="battle-grid-pick"] .bgp-placement-cell[data-bgp-occupant]::before {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 13px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  opacity: .55;
}

[data-game="battle-grid-pick"] .bgp-placement-cell[data-bgp-occupant="toy-train"]::before { border-radius: 4px 4px 1px 1px; }
[data-game="battle-grid-pick"] .bgp-placement-cell[data-bgp-occupant="track-section"]::before { height: 2px; border-radius: 0; }
[data-game="battle-grid-pick"] .bgp-placement-cell[data-bgp-occupant="crayon-box"]::before { width: 6px; height: 10px; border-radius: 4px 4px 1px 1px; }
[data-game="battle-grid-pick"] .bgp-placement-cell[data-bgp-occupant="ruler"]::before { width: 3px; height: 12px; border-radius: 0; }

[data-game="battle-grid-pick"] .bgp-search-cell[data-bgp-state="unsearched"] {
  background-image: linear-gradient(135deg, transparent 45%, color-mix(in srgb, var(--game-ink) 10%, transparent) 46% 50%, transparent 51%);
}

[data-game="battle-grid-pick"] .bgp-search-cell[data-bgp-state="found"] {
  box-shadow: inset 0 0 0 2px var(--game-ink), 2px 2px 0 var(--game-ink);
  animation: bgp-found-pop .22s ease-out;
}

[data-game="battle-grid-pick"] .bgp-search-cell[data-bgp-state="recovered"] {
  box-shadow: inset 0 0 0 3px var(--game-green), 2px 2px 0 var(--game-ink);
}

[data-game="battle-grid-pick"] .bgp-search-cell[tabindex="0"]:not(:disabled) {
  outline: 3px solid var(--game-orange);
  outline-offset: -5px;
}

[data-game="battle-grid-pick"] .bgp-result-card .bgp-toy-bin {
  position: relative;
  width: 116px;
  height: 34px;
  margin: 0 auto 8px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 2px 2px 12px 12px;
  background: color-mix(in srgb, var(--game-orange) 35%, transparent);
}

[data-game="battle-grid-pick"] .bgp-toy-bin-rim {
  position: absolute;
  left: -7px;
  right: -7px;
  top: -4px;
  height: 6px;
  border: 3px solid currentColor;
  border-radius: 4px;
  background: var(--game-orange);
}

[data-game="battle-grid-pick"] .bgp-toy-bin-toy {
  position: absolute;
  bottom: 5px;
  display: block;
  border: 2px solid currentColor;
  background: var(--game-yellow);
}

[data-game="battle-grid-pick"] .bgp-toy-bin-train { left: 22px; width: 24px; height: 11px; border-radius: 5px 5px 2px 2px; }
[data-game="battle-grid-pick"] .bgp-toy-bin-crayon { left: 55px; width: 8px; height: 18px; border-radius: 5px 5px 2px 2px; transform: rotate(12deg); background: var(--game-pink); }
[data-game="battle-grid-pick"] .bgp-toy-bin-ruler { left: 76px; width: 5px; height: 21px; transform: rotate(8deg); background: var(--game-teal); }

@keyframes bgp-rover-scan {
  0%, 100% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
}

@keyframes bgp-found-pop {
  from { transform: scale(.88); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  [data-game="battle-grid-pick"] .bgp-rover,
  [data-game="battle-grid-pick"] .bgp-search-cell[data-bgp-state="found"] {
    animation: none;
  }
}

/* Crossword grid — same tile family as every other game, not newsprint:
   letter tiles are bordered cards, blocks are solid ink tiles, the active
   word tints to the surface color. Capped narrow so big grids stay small. */
.game-grid.game-xword {
  gap: 6px;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.game-grid.game-xword .game-grid-cell {
  aspect-ratio: 1 / 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--game-fs-md);
  --game-xword-edge: color-mix(in srgb, var(--game-ink) 42%, var(--game-surface));
  border-color: var(--game-xword-edge);
  box-shadow: 1px 1px 0 var(--game-xword-edge);
}

.game-grid.game-xword .game-grid-cell:active {
  transform: translate(2px, 2px);
}

.game-grid.game-xword .game-grid-cell.is-word:not(.is-locked) {
  background: color-mix(in srgb, var(--game-teal) 10%, var(--game-surface));
  box-shadow: inset 0 0 0 2px var(--game-xword-edge), 1px 1px 0 var(--game-xword-edge);
}

.game-grid.game-xword .game-grid-cell.is-locked {
  background: var(--game-green);
}

.game-grid.game-xword .game-grid-cell.is-word.is-wrong {
  background: var(--game-red);
  color: var(--game-text);
}

.game-grid-cell.is-active {
  --game-xword-active-edge: color-mix(in srgb, var(--game-ink) 68%, var(--game-teal));
  outline: 3px solid var(--game-xword-active-edge);
  outline-offset: -3px;
}

.game-grid-cell.is-locked {
  background: var(--game-green);
}

/* Wrong / dangerous picks — quote misses, assassins. White ink on red is
   the same pairing the danger button already uses in every skin. */
.game-grid-cell.is-bad {
  background: var(--game-red);
  color: #fff;
}

/* Hit / miss picks — Battleship, Minesweeper, and any grid game where a
   tap resolves for or against the player. Hit is the danger pairing;
   miss is a peg dot drawn with the ink token, no extra markup. */
.game-grid-cell.is-hit {
  background: var(--game-red);
  color: #fff;
  box-shadow: none;
  transform: translate(2px, 2px);
}

.game-grid-cell.is-miss {
  background-image: radial-gradient(circle, var(--game-ink) 20%, transparent 21%);
}

/* Crossword blockers should recede behind playable cells while retaining a
   quiet paper/ink distinction in every skin. */
.game-grid.game-xword .game-grid-block {
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--game-ink) 12%, var(--game-paper));
  border-radius: var(--game-radius-sm);
}

.game-xword-current-clue {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  border: 2px solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  padding: 8px 10px;
  background: color-mix(in srgb, var(--game-ink) 8%, var(--game-surface));
  font-size: var(--game-fs-sm);
  font-weight: 700;
}

.game-xword-current-clue-label {
  flex: 0 0 auto;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

.game-xword-current-clue > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.game-grid.game-xword ~ .game-xword-current-clue,
.game-grid.game-xword ~ .game-actions,
.game-grid.game-xword ~ .game-history-list {
  --game-xword-edge: color-mix(in srgb, var(--game-ink) 42%, var(--game-surface));
}

.game-grid.game-xword ~ .game-xword-current-clue {
  border-color: var(--game-xword-edge);
}

.game-grid.game-xword ~ .game-actions .game-btn,
.game-grid.game-xword ~ .game-history-list .game-history-row {
  border-color: var(--game-xword-edge);
  box-shadow: 2px 2px 0 var(--game-xword-edge);
}

.game-grid.game-xword ~ .game-actions .game-btn:active {
  box-shadow: 0 0 0 var(--game-xword-edge);
}

.game-grid.game-xword .game-grid-cell:focus-visible,
button.game-history-row:focus-visible,
.game-grid.game-xword ~ .game-actions .game-btn:focus-visible {
  outline: 3px solid var(--game-ink);
  outline-offset: 3px;
}

.game-clue-label {
  align-self: flex-start;
  font-weight: 800;
  font-size: var(--game-fs-sm);
  letter-spacing: 0.04em;
  margin-top: 6px;
}

.game-grid-cell.is-locked {
  background: var(--game-green);
}

.game-grid-cell .cell-num {
  position: absolute;
  top: 1px;
  left: 4px;
  font-size: 0.6rem;
  font-weight: 800;
  opacity: 0.55;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Rules disclosure — reuses the <details>/<summary> pattern already used in
   the settings drawer (render_settings_modal in scripts/build.py).
   -------------------------------------------------------------------------- */

.game-rules-details {
  width: 100%;
  box-sizing: border-box;
  border: 2px dashed var(--game-ink);
  border-radius: var(--game-radius-md);
  padding: 10px 14px;
  background: var(--game-surface);
}

.game-rules-details summary {
  font-weight: 800;
  font-size: var(--game-fs-sm);
  cursor: pointer;
}

.game-rules-details p {
  font-size: var(--game-fs-sm);
  font-weight: 500;
  line-height: 1.5;
  margin-top: 8px;
  opacity: 0.85;
}

.game-history-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--game-fs-sm);
  font-weight: 700;
}

.game-history-row {
  display: flex;
  justify-content: space-between;
  border: 2px solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  padding: 6px 12px;
  background: var(--game-surface);
}

button.game-history-row {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

button.game-history-row[aria-current="true"] {
  background: color-mix(in srgb, var(--game-ink) 12%, var(--game-surface));
  box-shadow: inset 0 0 0 2px var(--game-ink);
}

.game-grid.game-xword ~ .game-history-list button.game-history-row[aria-current="true"] {
  --game-xword-active-edge: color-mix(in srgb, var(--game-ink) 68%, var(--game-teal));
  background: color-mix(in srgb, var(--game-teal) 12%, var(--game-surface));
  border-color: var(--game-xword-active-edge);
  box-shadow: inset 0 0 0 2px var(--game-xword-active-edge), 2px 2px 0 var(--game-xword-active-edge);
}

button.game-history-row.is-complete {
  background: color-mix(in srgb, var(--game-green) 18%, var(--game-surface));
  border-color: color-mix(in srgb, var(--game-green) 62%, var(--game-ink));
}

button.game-history-row.is-complete > span:first-child::before {
  content: '✓';
  display: inline-block;
  margin-right: 4px;
  font-size: 0.75em;
  line-height: 1;
}

/* The story can grow beyond one screen; keep the active player discoverable
   while the transcript scrolls beneath the fixed game header. */
[data-game="fort-unfort"] .game-top-row {
  position: sticky;
  top: 104px;
  z-index: 1;
  padding: 10px 0;
  background: var(--game-paper);
}

@media (max-width: 380px) {
  .game-menu {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .game-prompt-card {
    font-size: var(--game-fs-xl);
    padding: 26px 16px;
  }
}

/* Quote copy can be much longer than the other prompt families; start the
   narrow treatment at common 390px phone widths so answers are not buried
   beneath an oversized quotation card. */
@media (max-width: 420px) {
  [data-game="quote"] .game-prompt-card.family-trivia {
    font-size: var(--game-fs-xl);
    padding: 28px 18px;
  }

  [data-game="bee"] .game-prompt-row .game-prompt-card.family-word {
    font-size: var(--game-fs-xl);
    padding: 28px 18px;
  }

  /* Keep Crossword actions deliberate at phone widths: the two frequent
     actions share the first row and the navigation action gets a clear full
     width target beneath them. */
  .game-grid.game-xword ~ .game-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-grid.game-xword ~ .game-actions .game-btn {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .game-grid.game-xword ~ .game-actions .game-btn:last-child {
    grid-column: 1 / -1;
  }

  /* Crossword clues scan better in two short columns on phones. Keep each
     row large enough to remain a comfortable touch target when a clue wraps. */
  .game-grid.game-xword ~ .game-history-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .game-grid.game-xword ~ .game-history-list .game-history-row {
    min-height: 42px;
    padding: 6px 8px;
    gap: 6px;
  }

  .game-grid.game-xword ~ .game-history-list .game-history-row > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Breakpoints — the hub is phone-first; tablets and desktops get more
   menu columns while game bodies stay capped so cards never go wide. */
@media (min-width: 768px) {
  [data-game="fort-unfort"] .game-top-row {
    top: 82px;
  }

  .game-menu {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .game-menu {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Versus variant — two prompt cards sharing one row ("Is It More Like…?").
   Layout only, no skin tokens: stacks below 480px where two cards + the
   divider badge no longer fit side by side. Single-card rows (Category)
   are untouched. */
@media (max-width: 480px) {
  .game-prompt-row.is-versus {
    flex-direction: column;
  }
  .game-prompt-row.is-versus .game-letter-badge {
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   Stage primitives — one fixed HUD + a world that fills the shell + overlays.
   Shared, themable vocabulary for a game whose whole surface is a single
   stationary scene (King of Snacks first; see
   docs/games/king-of-snacks/GUI_REBUILD_QUEUE.md). Structural values are
   phone geometry from the accepted reference; every colour, line, radius,
   shadow and font comes from --game-* so every skin gets a coherent stage.

   Anatomy
     .game-body[data-game-layout="stage"] > .game-stage
       > .game-hud                       58px, business · day / cash · love
       > .game-stage-world               flex:1; overflow hidden; relative
           > .game-callout               place-attached card (absolute)
           > .game-result                bottom sheet (absolute)
       > .game-stage-layer               inset:0 overlays (.game-panel, .game-deck)
     .game-modal-backdrop > .game-modal-card   fixed, shared
   -------------------------------------------------------------------------- */

#games-shell-body[data-game-layout="stage"] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* A stage game owns the phone: the shared header collapses to one line so the
   world gets the height. */
.games-shell-card:has(#games-shell-body[data-game-layout="stage"]) { overflow: hidden; }
.games-shell-card:has(#games-shell-body[data-game-layout="stage"]) .game-header { padding-top: 8px; padding-bottom: 8px; }
.games-shell-card:has(#games-shell-body[data-game-layout="stage"]) .game-header-sub { display: none; }
.games-shell-card:has(#games-shell-body[data-game-layout="stage"]) .game-header-title { font-size: var(--game-fs-md); }

.game-body[data-game-layout="stage"] {
  flex: 1;
  max-width: none;
  min-height: 100%;
  align-items: stretch;
  padding: 0;
  gap: 0;
}

.game-stage {
  --game-stage-hud-h: 58px;
  --game-stage-line: color-mix(in srgb, var(--game-ink) 42%, var(--game-paper));
  --game-stage-muted: color-mix(in srgb, var(--game-text) 90%, var(--game-paper));
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--game-paper);
  color: var(--game-text);
  font-family: var(--game-font);
}

.game-stage,
.game-stage * { box-sizing: border-box; }
.game-stage button { font-family: inherit; color: inherit; }
.game-stage :focus-visible { outline: 3px solid var(--game-ink); outline-offset: 2px; }
.game-deck :focus-visible { outline-color: var(--game-deck-paper); }

/* HUD ----------------------------------------------------------------- */

.game-hud {
  flex: 0 0 var(--game-stage-hud-h);
  height: var(--game-stage-hud-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: var(--game-border-w) solid var(--game-ink);
  background: color-mix(in srgb, var(--game-surface) 60%, var(--game-paper));
  z-index: 2;
}
.game-hud > div { min-width: 0; }
.game-hud b { display: block; font-size: 14px; font-weight: 900; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-hud small { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--game-stage-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-hud-money { flex-shrink: 0; text-align: right; font-size: 11px; font-weight: 900; line-height: 1.45; }
.game-hud .game-btn.game-hud-back { flex-shrink: 0; height: 36px; min-height: 36px; padding: 0 12px; align-self: center; }
.game-hud.has-back small > span { font-weight: 800; color: var(--game-text); }
.game-panel-head > .game-panel-stats { flex-shrink: 0; }
.game-panel.is-headless > .game-panel-body { border-top: 0; }
.game-hud-money > span { display: block; }

/* World ---------------------------------------------------------------- */

.game-stage-world {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.game-stage-layer {
  position: absolute;
  inset: 0;
  top: var(--game-stage-hud-h);
  pointer-events: none;
  z-index: 20;
}
.game-stage-layer > * { pointer-events: auto; }

/* Eyebrow ---------------------------------------------------------------- */

.game-eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--game-stage-muted);
}

/* Callout — the place-attached card ----------------------------------- */

.game-callout {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 272px;
  max-width: calc(100% - 22px);
  padding: 13px 13px 14px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-md);
  background: var(--game-surface);
  box-shadow: var(--game-shadow-md);
  z-index: 8;
  transition: left 0.16s ease, top 0.16s ease;
}
.game-callout::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: var(--pointer-x, 40px);
  top: -8px;
  background: var(--game-surface);
  border-left: var(--game-border-w) solid var(--game-ink);
  border-top: var(--game-border-w) solid var(--game-ink);
  transform: rotate(45deg);
}
.game-callout.is-above::after {
  top: auto;
  bottom: -8px;
  border-left: 0;
  border-top: 0;
  border-right: var(--game-border-w) solid var(--game-ink);
  border-bottom: var(--game-border-w) solid var(--game-ink);
}
.game-callout > b { display: block; margin: 4px 0 5px; font-size: 16px; font-weight: 900; line-height: 1.12; }
.game-callout > p { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.28; }
.game-callout.is-attention { border-color: color-mix(in srgb, var(--game-orange) 70%, var(--game-ink)); }
.game-callout.is-attention > .game-eyebrow { color: color-mix(in srgb, var(--game-orange) 40%, var(--game-text)); }
.game-callout.is-urgent { border-color: color-mix(in srgb, var(--game-red) 72%, var(--game-ink)); }
.game-callout.is-urgent > .game-eyebrow { color: color-mix(in srgb, var(--game-red) 40%, var(--game-text)); }
/* A present beat (the manager's voice) and a memory (a story told) are the
   town speaking, not an alarm: blue and purple, never the attention orange. */
.game-callout.is-beat { border-color: color-mix(in srgb, var(--game-blue) 70%, var(--game-ink)); }
.game-callout.is-beat > .game-eyebrow { color: color-mix(in srgb, var(--game-blue) 45%, var(--game-text)); }
.game-callout.is-memory { border-color: color-mix(in srgb, var(--game-purple) 70%, var(--game-ink)); }
.game-callout.is-memory > .game-eyebrow { color: color-mix(in srgb, var(--game-purple) 45%, var(--game-text)); }

/* Bars — seven days at a glance (R30). Each bar's height is inline (a
   percentage of the week's best day); ink from tokens. */
.game-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; width: 62px; flex: 0 0 auto; }
.game-bars > i { flex: 1 1 0; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--game-teal) 70%, var(--game-ink)); }
.game-bars > i:last-child { background: var(--game-ink); }
.game-location { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--game-stage-line); font-size: 12.5px; }
.game-location:first-of-type { border-top: 0; }
.game-location > b { font-weight: 900; }
.game-location > span { grid-column: 1; color: var(--game-stage-muted); font-weight: 600; }
.game-location > .game-location-right { grid-row: 1 / span 2; grid-column: 2; display: grid; justify-items: end; gap: 3px; }
.game-location-right > b { font-weight: 900; font-variant-numeric: tabular-nums; }
.game-location-right > small { font-size: 11px; font-weight: 700; }
.game-location-right > small.is-up { color: color-mix(in srgb, var(--game-green) 55%, var(--game-text)); }
.game-location-right > small.is-down { color: color-mix(in srgb, var(--game-orange) 55%, var(--game-text)); }

/* Story stamp — the object a memory is remembered by (R32). Planned rows
   are a quiet halftone disc; an accepted row shows its icon. */
.game-story-stamp { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: var(--game-border-w) solid var(--game-ink); background: var(--game-surface); overflow: hidden; flex: 0 0 auto; }
.game-story-stamp.is-planned { background-image: radial-gradient(circle, color-mix(in srgb, var(--game-ink) 28%, transparent) 1px, transparent 1.6px); background-size: 5px 5px; background-color: color-mix(in srgb, var(--game-purple) 12%, var(--game-surface)); }
.game-story-stamp.is-big { width: 88px; height: 88px; border-radius: 14px; }
.game-story-stamp.is-art { color: var(--game-ink); background-image: none; }
.game-story-stamp.is-art > svg { width: 62%; height: 62%; display: block; }
.game-story-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; }
.game-story-head > .game-eyebrow { margin: 0; }
.game-choice.has-swatch > .game-choice-swatch > .game-story-stamp { width: 100%; height: 100%; border: 0; border-radius: 0; }

/* The result's ‹ › (R45): All shops, then each shop; the take scrolls inside. */
.game-result-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px; }
.game-result-head.has-nav { grid-template-columns: 32px minmax(0, 1fr) 32px; text-align: center; }
.game-result-heading { min-width: 0; }
.game-result-heading > h2 { margin: 2px 0 0; font-size: 18px; font-weight: 900; line-height: 1.12; color: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game-result-rule { border: 0; border-top: 1.5px solid var(--game-ink); opacity: 0.55; margin: 8px 0 6px; }
.game-result-nav-btn { width: 32px; height: 32px; border: var(--game-border-w) solid var(--game-ink); border-radius: 50%; background: var(--game-surface); color: var(--game-text); font-size: 18px; font-weight: 900; line-height: 1; cursor: pointer; }
.game-result-nav-btn:focus-visible { outline: 3px solid var(--game-orange); outline-offset: 2px; }
.game-result-nav-btn.is-list { font-size: 15px; }
.game-result-nav-btn[disabled] { opacity: 0.32; cursor: default; }
/* The list page (R60): every shop with one stat, each row a way into its page. */
.game-result-list { display: grid; gap: 5px; margin: 6px 0 2px; }
.game-result-shop { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name arrow" "stat arrow"; align-items: center; column-gap: 8px; width: 100%; min-height: 44px; padding: 6px 10px; border: 1.5px solid var(--game-ink); border-radius: var(--game-radius-sm); background: var(--game-surface); color: var(--game-text); text-align: left; cursor: pointer; }
.game-result-shop > b { grid-area: name; font-size: 13px; font-weight: 900; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-result-shop > small { grid-area: stat; font-size: 11px; font-weight: 700; opacity: 0.8; line-height: 1.2; }
.game-result-shop > i { grid-area: arrow; font-style: normal; font-size: 18px; font-weight: 900; line-height: 1; }
.game-result-shop:focus-visible { outline: 3px solid var(--game-orange); outline-offset: 2px; }
.game-result.has-nav .game-result-list { max-height: 176px; overflow: auto; -webkit-overflow-scrolling: touch; }
.game-result.has-nav .game-result-take { max-height: 148px; overflow: auto; -webkit-overflow-scrolling: touch; }

/* A sheet's grab-bar (R46): tall ↔ the R14 height. */
.game-panel.is-sheet.is-tall { height: 88%; max-height: calc(100% - 72px); }
.game-panel-grab { display: block; width: 100%; height: 18px; margin: 0; padding: 4px 0 0; border: 0; background: transparent; cursor: pointer; }
.game-panel-grab > i { display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 3px; background: color-mix(in srgb, var(--game-ink) 45%, var(--game-surface)); }
.game-panel-grab:focus-visible { outline: 3px solid var(--game-orange); outline-offset: -3px; }

/* The Festival front page (R48): a person's words on a deck card. */
.game-card.is-voice { grid-column: 1 / -1; min-height: 0; padding-top: 10px; transform: none; }
.game-card.is-voice + .game-card.is-feature { transform: none; }
.game-card.is-voice > .game-say { margin: 0; }
.game-card.is-voice .game-say-bubble { font-size: 12.5px; }
/* On the deck the bubble is the deck's own paper (floored light on every
   skin), so its words and edge take the guaranteed-dark ink rather than the
   deck's light text — and a dark skin's dark surface never swallows it. */
.game-deck .game-say-bubble { background: var(--game-deck-paper); color: var(--game-ink-solid); border-color: var(--game-ink-solid); }
.game-deck .game-say-bubble::before { background: var(--game-deck-paper); border-color: var(--game-ink-solid); }

/* Say — a person speaking. The bubble holds only their words; the figure
   at its left is who. Game facts never go inside one. ------------------ */

.game-say {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 4px 0 6px;
}
.game-say-who { display: grid; justify-items: center; gap: 3px; }
.game-say-who > small { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; opacity: 0.8; text-align: center; max-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-say-figure {
  width: 34px;
  height: 34px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: 50%;
  background: var(--game-surface);
  position: relative;
  overflow: hidden;
}
.game-say-bubble {
  position: relative;
  padding: 7px 10px 8px;
  border: 1.5px solid var(--game-ink);
  border-radius: var(--game-radius-md);
  border-top-left-radius: 4px;
  background: var(--game-surface);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.32;
  min-width: 0;
  overflow-wrap: break-word;
}
.game-say-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 10px;
  width: 10px;
  height: 10px;
  background: var(--game-surface);
  border-left: 1.5px solid var(--game-ink);
  border-bottom: 1.5px solid var(--game-ink);
  transform: rotate(45deg);
}
.game-say-bubble > p { margin: 0 0 6px; }
/* A story told in the teller's voice (R54): the same bubble, her words at
   reading weight over three short paragraphs. */
.game-say.is-story .game-say-bubble { font-weight: 600; font-size: 13px; line-height: 1.38; }
.game-say.is-story .game-say-bubble > p { margin: 0 0 8px; }
.game-say-bubble > p:last-child { margin-bottom: 0; }
.game-callout > .game-say { margin: 2px 0 6px; }
.game-callout > .game-say > .game-say-bubble { font-size: 12.5px; }
.game-result > .game-say { margin: 6px 0 4px; text-align: left; }

/* Action pair — two equal cells, label + meaning ------------------------ */

.game-action-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 12px;
}
.game-action-pair.is-single { grid-template-columns: 1fr; }
.game-btn-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 54px;
  padding: 6px 4px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: var(--game-surface);
  box-shadow: none;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  cursor: pointer;
}
.game-btn-cell > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.game-btn-cell > small { display: block; font-size: 8px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: inherit; }
.game-btn-cell.game-btn-primary { background: var(--game-green); box-shadow: 2px 2px 0 var(--game-ink); }
.game-btn-cell.game-btn-secondary { background: color-mix(in srgb, var(--game-yellow) 14%, var(--game-surface)); }
.game-btn-cell:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--game-ink); }

/* Glance — three facts as pills (callout) or boxes (panel) --------------- */

.game-glance { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.game-callout > .game-glance { margin: 4px 0 8px; }
/* The tour (R61): Next / Back under the manager's words; the glance lit on step one. */
.game-tour-controls { display: flex; justify-content: flex-end; gap: 8px; margin: 2px 0 10px; }
.game-glance.is-highlight > span { box-shadow: 0 0 0 2px var(--game-yellow); }
/* Why Love moved (R50): a game fact under the words, never in the bubble. */
.game-callout > .game-callout-love { margin: 6px 0 0; padding: 5px 8px; border-radius: var(--game-radius-sm); background: color-mix(in srgb, var(--game-yellow) 16%, var(--game-surface)); font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.game-glance > span {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  padding: 3px 6px;
  border: 1px solid var(--game-stage-line);
  border-radius: var(--game-radius-pill);
  background: var(--game-surface);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.game-glance > span > small { font-size: 9px; font-weight: 800; color: var(--game-stage-muted); }
.game-glance > span > b { font-weight: 900; }
.game-glance.is-boxed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 10px;
}
.game-glance.is-boxed > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 7px 5px;
  border: 1.5px solid var(--game-stage-line);
  border-radius: var(--game-radius-sm);
  text-align: center;
  white-space: normal;
}
.game-glance.is-boxed > span > small { font-size: 7px; text-transform: uppercase; letter-spacing: 0.05em; }
.game-glance.is-boxed > span > b { font-size: 11px; line-height: 1.1; }

/* Panel — inset overlay that scrolls inside ----------------------------- */

.game-stage .game-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: color-mix(in srgb, var(--game-yellow) 9%, var(--game-paper));
  color: var(--game-text);
  z-index: 20;
  transform: translateY(0);
  transition: transform 0.16s ease;
}
/* A sheet variant keeps the world in view above it (entry over the
   independent town): same head/body/foot anatomy, docked to the bottom. */
.game-panel.is-sheet {
  top: auto;
  height: 57%;
  max-height: calc(100% - 132px);
  border-top: var(--game-border-w) solid var(--game-ink);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 0 color-mix(in srgb, var(--game-ink) 14%, transparent);
  overflow: hidden;
}
.game-panel.is-sheet .game-panel-head { border-radius: 18px 18px 0 0; }
.game-panel-head {
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-bottom: var(--game-border-w) solid var(--game-ink);
  background: var(--game-paper);
  z-index: 2;
}
.game-panel-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.game-panel-title > div { min-width: 0; display: grid; gap: 1px; }
.game-panel-title b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; font-weight: 900; line-height: 1.15; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.game-panel-place { display: block; font-size: 11px; font-weight: 700; line-height: 1.2; opacity: 0.78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-panel-title.has-stamp > .game-story-stamp { flex: 0 0 auto; width: 34px; height: 34px; }
.game-panel-head > button {
  flex-shrink: 0;
  min-height: 36px;
  padding: 5px 12px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-pill);
  background: var(--game-surface);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.game-panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 18px;
}
.game-panel-foot {
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-top: var(--game-border-w) solid var(--game-ink);
  background: var(--game-paper);
  z-index: 4;
}
.game-panel-foot b { display: block; font-size: 11px; font-weight: 900; }
.game-panel-foot small { display: block; margin-top: 1px; font-size: 8px; font-weight: 700; color: var(--game-stage-muted); }
.game-panel-foot .game-btn { min-height: 36px; padding: 6px 8px; font-size: 9px; font-weight: 950; white-space: nowrap; border-radius: var(--game-radius-sm); box-shadow: none; }
.game-panel-foot > span:first-child { min-width: 0; }
.game-panel-foot-actions { display: flex; gap: 6px; flex-shrink: 0; }
.game-panel-note {
  padding: 12px;
  margin-bottom: 11px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: var(--game-surface);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.game-panel-note > b { font-weight: 900; }
/* A memory reads as three short paragraphs (cold open, turn, coda). */
.game-panel-note > p { margin: 0 0 7px; }
.game-panel-note > p:last-child { margin-bottom: 0; }

/* Row — summary-first system row with a fixed 88px action -------------- */

.game-row {
  margin-bottom: 11px;
  padding: 12px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: var(--game-surface);
}
.game-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, max-content);
  align-items: start;
  gap: 8px;
}
.game-row-top > div { min-width: 0; }
.game-row h3 { margin: 0; font-size: 14px; font-weight: 900; line-height: 1.15; color: inherit; }
.game-row-top p { margin: 3px 0 0; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--game-stage-muted); }
.game-row-top > button {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sized to its own label between a floor and a ceiling, so a wide fallback
     font (a runner without the skin's face) never clips `Who sets plan`. */
  width: auto;
  min-width: 88px;
  max-width: 128px;
  min-height: 36px;
  padding: 6px 7px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: color-mix(in srgb, var(--game-yellow) 14%, var(--game-surface));
  font-size: 10px;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.game-row-body {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--game-stage-line);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}
.game-row.is-open > .game-row-body { display: block; }
.game-row.is-promoted { border-color: color-mix(in srgb, var(--game-orange) 70%, var(--game-ink)); background: color-mix(in srgb, var(--game-orange) 7%, var(--game-surface)); }
.game-row.is-promoted h3::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 5px; border-radius: 50%; background: var(--game-orange); color: var(--game-ink-solid); font-size: 11px; vertical-align: 1px; }
.game-row.is-danger { border-color: color-mix(in srgb, var(--game-red) 62%, var(--game-ink)); background: color-mix(in srgb, var(--game-red) 6%, var(--game-surface)); }
.game-row.is-advanced { padding: 8px; }
.game-row.is-advanced h3 { font-size: 12px; }
.game-row.is-advanced .game-row-top p { font-size: 9.5px; line-height: 1.18; }
.game-row-scope { display: block; margin-top: 6px; font-size: 8px; font-weight: 850; letter-spacing: 0.04em; color: var(--game-stage-muted); }

/* Line — label + value, or label + mini action -------------------------- */

.game-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 5px 0;
  font-size: 10px;
  font-weight: 600;
}
.game-line + .game-line { border-top: 1px solid color-mix(in srgb, var(--game-ink) 12%, var(--game-surface)); }
.game-line > span { min-width: 0; line-height: 1.3; }
.game-line > b { flex-shrink: 0; font-weight: 900; text-align: right; }
.game-btn-mini {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 32px;
  padding: 5px 7px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: color-mix(in srgb, var(--game-yellow) 14%, var(--game-surface));
  box-shadow: none;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}
.game-btn-mini.is-on { background: var(--game-green); }
.game-btn-mini.game-btn-danger { background: color-mix(in srgb, var(--game-red) 14%, var(--game-surface)); color: var(--game-text); border-color: color-mix(in srgb, var(--game-red) 62%, var(--game-ink)); }

/* Stepper — − value + and a save ------------------------------------ */

.game-stepper {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 6px;
  align-items: center;
  margin-top: 7px;
}
.game-stepper > button {
  min-height: 38px;
  padding: 3px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: var(--game-surface);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}
.game-stepper > output {
  display: block;
  padding: 7px;
  border: 1.5px solid var(--game-stage-line);
  border-radius: var(--game-radius-sm);
  background: var(--game-surface);
  text-align: center;
  font-size: 12px;
  font-weight: 950;
}
/* Outside the fair band the value tints orange; the text says so too. */
.game-stepper > output.is-outside { color: color-mix(in srgb, var(--game-orange) 55%, var(--game-text)); border-color: color-mix(in srgb, var(--game-orange) 70%, var(--game-ink)); }
.game-stepper-save {
  grid-column: 1 / -1;
  min-height: 36px;
  margin-top: 1px;
  padding: 7px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: var(--game-green);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

/* Choice — a full-width consequential option ---------------------------- */

.game-choice {
  display: block;
  width: 100%;
  min-height: 54px;
  margin-bottom: 9px;
  padding: 10px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: var(--game-surface);
  box-shadow: none;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.game-choice > b { display: flex; justify-content: space-between; gap: 10px; font-weight: 900; }
.game-choice > b > span:last-child { flex-shrink: 0; }
.game-choice > small { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--game-stage-muted); }
.game-choice.is-recommended { background: color-mix(in srgb, var(--game-green) 22%, var(--game-surface)); }
.game-choice.has-swatch { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.game-choice.has-swatch > .game-choice-swatch { grid-row: 1 / span 2; width: 38px; height: 38px; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-sm); background: var(--game-surface); position: relative; overflow: hidden; }
.game-choice.has-swatch > small { margin-top: 2px; }
.game-choice.is-queued { border-style: dashed; background: color-mix(in srgb, var(--game-green) 30%, var(--game-surface)); }
.game-choice.is-danger { border-color: color-mix(in srgb, var(--game-red) 62%, var(--game-ink)); background: color-mix(in srgb, var(--game-red) 8%, var(--game-surface)); }
.game-choice:active { transform: translate(2px, 2px); }

/* Result — bottom sheet, one consequence, one continuation -------------- */

.game-result {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 14px;
  padding: 14px 14px 16px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-md);
  background: var(--game-surface);
  box-shadow: var(--game-shadow-md);
  z-index: 15;
  transform: translateY(0);
  transition: transform 0.16s ease;
}
.game-result > p { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.game-result > .game-result-note { margin-top: -4px; font-weight: 700; }
.game-result-take {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  margin: 7px 0;
  padding: 7px 0;
  border-top: 1px dashed var(--game-stage-line);
  border-bottom: 1px dashed var(--game-stage-line);
  font-size: 12px;
  font-weight: 700;
}
.game-result-take > b { text-align: right; font-weight: 900; }
.game-result > .game-btn {
  width: 100%;
  margin-top: 7px;
  padding: 10px;
  border-radius: var(--game-radius-sm);
  box-shadow: 2px 2px 0 var(--game-ink);
  font-size: 14px;
  font-weight: 950;
}

/* Deck — the only dark-ground surface --------------------------------- */

.game-deck {
  /* Paper may itself be dark (Deco), so deck text is floored at 72% white and
     only tinted by the skin's paper. --game-ink-solid is guaranteed dark. */
  --game-deck-paper: color-mix(in srgb, white 72%, var(--game-paper));
  --game-deck-line: color-mix(in srgb, var(--game-deck-paper) 55%, var(--game-ink-solid));
  --game-deck-muted: color-mix(in srgb, var(--game-deck-paper) 80%, var(--game-ink-solid));
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 20px 20px;
  background: var(--game-ink-solid);
  color: var(--game-deck-paper);
  overflow: hidden;
  z-index: 20;
}
.game-deck-head { flex: 0 0 auto; padding: 0 0 8px; }
.game-deck-head > b { display: block; font-size: 25px; font-weight: 950; line-height: 1.05; color: inherit; }
.game-deck-head > p { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--game-deck-muted); }
.game-deck-body { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px 10px; padding: 4px 4px 12px; }
.game-deck-cards {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* max-content rows: a card's min-height is a floor, never its size, so a
     memory in someone's bubble grows its card inside the scrolling deck. */
  grid-auto-rows: max-content;
  gap: 12px;
  align-content: start;
  margin: 12px -4px 12px;
  padding: 4px 4px 8px;
}
.game-card {
  display: flex;
  flex-direction: column;
  min-height: 112px;
  padding: 12px;
  border: 2px solid var(--game-deck-line);
  border-radius: var(--game-radius-md);
  background: color-mix(in srgb, var(--game-paper) 4%, transparent);
  color: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.game-card > small { display: block; margin-bottom: 10px; font-size: 8px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--game-deck-muted); }
.game-card > b { display: block; font-size: 17px; font-weight: 900; line-height: 1.05; color: inherit; }
.game-card > p { margin: auto 0 0; padding-top: 14px; font-size: 11px; font-weight: 600; color: var(--game-deck-muted); }
.game-card.is-feature { min-height: 205px; border-color: var(--game-deck-paper); transform: rotate(-2deg); }
.game-card.is-feature + .game-card.is-feature { transform: rotate(1.5deg); }
.game-card.is-inert { cursor: default; opacity: 0.85; }
.game-card.is-text > b { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.game-deck-foot { flex: 0 0 auto; margin-top: auto; padding-top: 4px; }
.game-deck-foot > .game-btn {
  width: 100%;
  min-height: 52px;
  padding: 13px;
  border: 3px solid var(--game-deck-paper);
  border-radius: var(--game-radius-pill);
  background: none;
  box-shadow: none;
  color: var(--game-deck-paper);
  font-size: 16px;
  font-weight: 950;
}
/* Two doors under the Festival paper (R33). */
.game-deck-foot.has-two { display: grid; gap: 8px; }
.game-deck-foot > .game-btn > small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0; text-transform: none; opacity: 0.85; }
.game-deck-foot.has-two > .game-btn { min-height: 48px; padding: 9px 13px; font-size: 15px; }
.game-deck-foot.has-two > .game-btn.game-btn-primary { background: var(--game-deck-paper); color: var(--game-ink-solid); }

/* Disclosure — one collapsed "More …" row ------------------------------ */

.game-disclosure {
  margin: 10px 0 4px;
  border: 2px dashed var(--game-stage-line);
  border-radius: var(--game-radius-sm);
  background: color-mix(in srgb, var(--game-yellow) 6%, var(--game-surface));
  overflow: hidden;
}
.game-disclosure > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}
.game-disclosure > button > small { flex-shrink: 0; font-size: 9px; font-weight: 800; color: var(--game-stage-muted); white-space: nowrap; }
.game-disclosure-body { display: none; padding: 9px; border-top: 1px dashed var(--game-stage-line); }
.game-disclosure.is-open > .game-disclosure-body { display: block; }
.game-disclosure-note { margin: 0 0 8px; font-size: 10px; font-weight: 600; line-height: 1.3; color: var(--game-stage-muted); }

/* Modal ----------------------------------------------------------------- */

.game-modal-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-modal-top, 1100) + 1); display: grid; place-items: center; padding: 16px; background: rgba(15, 15, 20, 0.64); }
.game-modal-card { display: flex; flex-direction: column; gap: 8px; width: min(100%, 420px); max-height: calc(100vh - 32px); overflow: auto; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-lg); background: var(--game-paper); color: var(--game-text); font-family: var(--game-font); box-shadow: var(--game-shadow-md); padding: 18px; }
.game-modal-card.is-action { border-color: color-mix(in srgb, var(--game-orange) 70%, var(--game-ink)); }
.game-modal-card.is-warning { border-color: color-mix(in srgb, var(--game-yellow) 72%, var(--game-ink)); }
.game-modal-card.is-active { border-color: color-mix(in srgb, var(--game-green) 68%, var(--game-ink)); }
.game-modal-card h3 { margin: 2px 0; font-size: var(--game-fs-xl); line-height: 1.08; }
.game-modal-card > .game-eyebrow { color: var(--game-orange); opacity: 1; }
.game-modal-card.is-warning > .game-eyebrow { color: color-mix(in srgb, var(--game-yellow) 68%, var(--game-ink)); }
.game-modal-card.is-active > .game-eyebrow { color: var(--game-green); }
.game-modal-summary, .game-modal-consequence { margin: 0; font-size: var(--game-fs-sm); font-weight: 700; line-height: 1.4; }
.game-modal-consequence { border-left: 4px solid currentColor; padding: 7px 0 7px 10px; }
/* Stacked: the primary states the whole decision on one line at 320px;
   Cancel sits under it, never beside it. */
.game-modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 5px; }
.game-modal-actions .game-btn { width: 100%; padding: 12px 14px; font-size: var(--game-fs-body); }
.game-modal-card h3 { color: inherit; }
/* An interstitial (R51): one button, the stake line carries the accent. */
.game-modal-card.is-single { gap: 10px; }
.game-modal-card.is-single .game-modal-consequence { border-left-color: var(--game-green); font-size: var(--game-fs-body); }

/* Small phones (≤340px): shorter HUD, same interaction shapes ------------ */

@media (max-width: 340px) {
  .game-stage { --game-stage-hud-h: 52px; }
  .game-panel-foot small { display: none; }
  .game-callout { padding: 10px 11px 11px; }
  .game-callout > b { font-size: 15px; margin: 2px 0 3px; }
  .game-callout > p { font-size: 12px; }
  .game-callout > .game-action-pair { margin-top: 9px; }
  .game-panel-body { padding: 12px; }
  .game-row, .game-panel-note { padding: 10px; margin-bottom: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-callout, .game-panel, .game-result { transition: none; }
  .game-card.is-feature, .game-card.is-feature + .game-card.is-feature { transform: none; }
}


/* --- Module: games-brakes.css --- */
/* Brakes & Glue vertical-slice layout; colors stay in the active game skin. */
.brakes-game { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.brakes-hud { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.brakes-hud .game-score-badge { flex: 1 1 auto; min-width: 0; }
.brakes-garage { margin: 0; padding: 10px 12px; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-md); box-shadow: var(--game-shadow-sm); background: var(--game-paper); color: var(--game-text); }
.brakes-garage summary { cursor: pointer; font-weight: 900; }
.brakes-garage-currency, .brakes-garage-goal, .brakes-garage-note { margin: 6px 0 0; font-size: var(--game-fs-sm); font-weight: 700; }
.brakes-garage-goal { color: var(--game-teal); }
.brakes-garage-section { display: grid; gap: 6px; margin-top: 10px; }
.brakes-garage-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.brakes-garage-item { min-height: 42px; padding: 8px 10px !important; font-size: var(--game-fs-sm); }
.brakes-garage-item.is-equipped { border-color: var(--game-teal); background: var(--game-surface); }
.brakes-garage-item:disabled { opacity: .55; cursor: not-allowed; }
.brakes-stage { position: relative; width: 100%; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-lg); box-shadow: var(--game-shadow-md); overflow: hidden; background: var(--game-paper); }
.brakes-canvas { display: block; width: 100%; height: clamp(230px, 48vw, 320px); touch-action: none; }
.brakes-thumb-indicator { position: absolute; z-index: 2; display: flex; align-items: center; gap: 5px; padding: 4px 6px; border: 2px solid var(--game-ink); border-radius: var(--game-radius-pill); box-shadow: var(--game-shadow-sm); background: var(--game-paper); color: var(--game-text); transform: translate(-50%, -50%); transition: transform .12s ease-out; pointer-events: none; }
.brakes-thumb-track { position: relative; display: block; width: 92px; height: 8px; border: 2px solid var(--game-ink); border-radius: var(--game-radius-pill); background: linear-gradient(90deg, var(--game-red), var(--game-surface) 50%, var(--game-green)); }
.brakes-thumb-end { position: absolute; top: 50%; width: 10px; height: 10px; border: 2px solid var(--game-ink); border-radius: 50%; background: var(--game-ink); transform: translateY(-50%); }
.brakes-thumb-end-start { left: -6px; }
.brakes-thumb-end-finish { right: -6px; }
.brakes-thumb-dot { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border: 2px solid var(--game-ink); border-radius: 50%; background: var(--game-ink); box-shadow: var(--game-shadow-sm); transform: translate(-50%, -50%); }
.brakes-thumb-indicator.is-boost .brakes-thumb-dot { background: var(--game-green); }
.brakes-thumb-indicator.is-slow .brakes-thumb-dot { background: var(--game-red); }
.brakes-thumb-indicator.is-locked .brakes-thumb-dot { left: 0; background: var(--game-ink); }
.brakes-thumb-indicator.is-vertical .brakes-thumb-track { width: 8px; height: 92px; background: linear-gradient(0deg, var(--game-red), var(--game-surface) 50%, var(--game-green)); }
.brakes-thumb-indicator.is-vertical .brakes-thumb-end { left: 50%; top: auto; transform: translateX(-50%); }
.brakes-thumb-indicator.is-vertical .brakes-thumb-end-start { bottom: -6px; }
.brakes-thumb-indicator.is-vertical .brakes-thumb-end-finish { top: -6px; right: auto; }
.brakes-thumb-indicator.is-vertical .brakes-thumb-dot { top: 50%; left: 50%; }
.brakes-thumb-indicator.is-vertical.is-locked .brakes-thumb-dot { top: 100%; left: 50%; }
.brakes-thumb-icon { position: relative; display: block; width: 22px; height: 16px; flex: 0 0 22px; }
.brakes-thumb-car { position: absolute; right: 0; bottom: 4px; width: 13px; height: 7px; border-radius: 2px 3px 2px 2px; background: var(--game-ink); }
.brakes-thumb-car::before { content: ''; position: absolute; left: 3px; top: -4px; width: 7px; height: 5px; border: 2px solid var(--game-ink); border-bottom: 0; border-radius: 4px 4px 0 0; background: var(--game-paper); }
.brakes-thumb-car::after { content: ''; position: absolute; left: 1px; bottom: -3px; width: 4px; height: 4px; border-radius: 50%; background: var(--game-ink); box-shadow: 8px 0 0 var(--game-ink); }
.brakes-thumb-icon::before { content: ''; position: absolute; left: 0; top: 4px; width: 6px; height: 2px; background: var(--game-green); box-shadow: -4px 5px 0 var(--game-green); opacity: 0; }
.brakes-thumb-indicator.is-boost .brakes-thumb-icon::before { opacity: 1; }
.brakes-thumb-indicator.is-slow .brakes-thumb-icon::before { background: var(--game-red); box-shadow: -4px 5px 0 var(--game-red); opacity: 1; }
.brakes-thumb-indicator.is-locked .brakes-thumb-icon::before { opacity: 0; }
.brakes-thumb-indicator.is-vertical .brakes-thumb-icon { transform: rotate(-90deg); }
.brakes-progress { width: 100%; height: 10px; overflow: hidden; border: 2px solid var(--game-ink); border-radius: var(--game-radius-pill); background: var(--game-surface); }
.brakes-progress span { display: block; width: 0; height: 100%; background: var(--game-teal); transition: width .15s linear; }
.brakes-quota, .brakes-save { margin: -4px 0 0; text-align: center; font-size: var(--game-fs-sm); font-weight: 700; color: var(--game-text); opacity: .72; }
.brakes-feedback { margin: 0; min-height: 1.5em; text-align: center; font-weight: 800; color: var(--game-text); }
.brakes-speed-hint { margin: -4px 0 0; padding: 6px 10px; border: 2px solid var(--game-ink); border-radius: var(--game-radius-pill); box-shadow: var(--game-shadow-sm); background: var(--game-paper); color: var(--game-text); text-align: center; font-size: var(--game-fs-sm); font-weight: 800; }
.brakes-speed-slider { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 30px 16px; align-items: center; column-gap: 12px; padding: 7px 12px 6px; border: 2px solid var(--game-ink); border-radius: var(--game-radius-md); box-shadow: var(--game-shadow-sm); background: var(--game-paper); color: var(--game-text); }
.brakes-speed-slider-label { grid-row: 1 / 3; font-size: var(--game-fs-sm); font-weight: 900; }
.brakes-speed-slider input[type="range"] { width: 100%; min-width: 0; height: 30px; margin: 0; accent-color: var(--game-teal); cursor: grab; touch-action: pan-y; }
.brakes-speed-slider input[type="range"]:focus-visible { outline: 3px solid var(--game-teal); outline-offset: 3px; }
.brakes-speed-slider input[type="range"]:active { cursor: grabbing; }
.brakes-speed-slider-endpoints { display: flex; justify-content: space-between; gap: 12px; color: var(--game-text); font-size: 11px; font-weight: 800; line-height: 1; opacity: .72; }
.brakes-axis-toggle { width: 100%; min-height: 44px; }
.brakes-result { border: var(--game-border-w) solid var(--game-teal); border-radius: var(--game-radius-md); box-shadow: var(--game-shadow-sm); padding: 12px; text-align: center; background: var(--game-paper); }
.brakes-result h3, .brakes-result p { margin: 0; }
.brakes-result h3 { font-size: var(--game-fs-lg); }
.brakes-result p { margin-top: 4px; font-size: var(--game-fs-sm); font-weight: 700; }
.brakes-touch-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brakes-joystick { position: relative; width: 86px; height: 86px; flex: 0 0 86px; border: var(--game-border-w) solid var(--game-ink); border-radius: 50%; background: var(--game-surface); box-shadow: var(--game-shadow-sm); touch-action: none; }
.brakes-joystick::before, .brakes-joystick::after { content: ''; position: absolute; inset: 50% 16px auto; height: 2px; background: var(--game-ink); opacity: .2; transform: translateY(-50%); }
.brakes-joystick::after { inset: 16px auto 16px 50%; width: 2px; height: auto; transform: translateX(-50%); }
.brakes-joystick-knob { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border: 2px solid var(--game-ink); border-radius: 50%; background: var(--game-teal); box-shadow: var(--game-shadow-sm); transform: translate(0, 0); margin: -17px; transition: transform .08s ease-out; }
.brakes-brake-button { min-height: 56px; flex: 1 1 auto; }
.brakes-game .game-actions { gap: 8px; }
.brakes-game .game-btn { flex: 1 1 0; padding-inline: 12px; }
.brakes-game .game-btn:focus-visible, .brakes-joystick:focus-visible { outline: 3px solid var(--game-teal); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .brakes-progress span, .brakes-joystick-knob, .brakes-thumb-indicator { transition: none; }
}
body[data-dressing="plain"] .brakes-progress span, body[data-dressing="plain"] .brakes-joystick-knob, body[data-dressing="plain"] .brakes-thumb-indicator { transition: none; }
@media (max-width: 380px) { .brakes-canvas { height: 230px; } .brakes-hud .game-tag { display: none; } .brakes-joystick { width: 76px; height: 76px; flex-basis: 76px; } .brakes-joystick-knob { width: 30px; height: 30px; margin: -15px; } }

/* BNG-030 — rounded storybook roaming kit. Canvas is the backplane; DOM owns
   route, objective, feedback, and controls so every semantic state remains
   available to assistive technology and the plain dressing. */
.brakes-roam-game { display: grid; gap: 10px; color: var(--game-text); }
.brakes-roam-hud, .brakes-roam-route-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.brakes-roam-route-line { font-size: var(--game-fs-sm); font-weight: 800; opacity: .78; }
.brakes-roam-stage { position: relative; overflow: hidden; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-lg); box-shadow: var(--game-shadow-md); background: var(--game-paper); }
.brakes-roam-canvas { display: block; width: 100%; height: min(390px, 62vw); min-height: 250px; max-height: 390px; touch-action: none; }
.brakes-roam-panels { display: grid; gap: 6px; }
.brakes-roam-objective, .brakes-roam-feedback { border: 2px solid var(--game-ink); border-radius: var(--game-radius-md); padding: 8px 10px; background: var(--game-paper); font-weight: 800; }
.brakes-roam-feedback { min-height: 1.35em; font-size: var(--game-fs-sm); opacity: .82; }
.brakes-roam-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.brakes-roam-dynamic-joystick { position: absolute; z-index: 2; width: 112px; height: 112px; margin: -56px; border: var(--game-border-w) solid var(--game-ink); border-radius: 50%; background: var(--game-surface); box-shadow: var(--game-shadow-md); pointer-events: none; }
.brakes-roam-dynamic-joystick::before, .brakes-roam-dynamic-joystick::after { content: ''; position: absolute; background: var(--game-ink); opacity: .18; }
.brakes-roam-dynamic-joystick::before { inset: 50% 16px auto; height: 2px; transform: translateY(-50%); }
.brakes-roam-dynamic-joystick::after { inset: 16px auto 16px 50%; width: 2px; transform: translateX(-50%); }
.brakes-roam-dynamic-joystick span { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border: 2px solid var(--game-ink); border-radius: 50%; background: var(--game-teal); box-shadow: var(--game-shadow-sm); }
.brakes-roam-boost, .brakes-roam-brake, .brakes-roam-stop, .brakes-roam-sound { min-height: 56px; min-width: 0; padding-inline: 4px; }
.brakes-roam-car-select { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.brakes-roam-car-select select { min-height: 42px; flex: 1 1 auto; border: 2px solid var(--game-ink); border-radius: var(--game-radius-sm); padding: 8px 10px; background: var(--game-paper); color: var(--game-text); font: inherit; }
.brakes-roam-result { border-color: var(--game-green); text-align: center; }
.brakes-roam-result h3, .brakes-roam-result p { margin: 0; }
.brakes-roam-result p { margin-top: 4px; font-size: var(--game-fs-sm); font-weight: 800; }
.brakes-roam-teaching { margin: 0; padding: 6px 8px; border-left: 4px solid var(--game-teal); font-size: var(--game-fs-sm); font-weight: 800; }
.brakes-roam-settings-grid { display: grid; gap: 8px; }
.brakes-roam-settings-grid label, .brakes-roam-share label { display: grid; gap: 4px; font-size: var(--game-fs-sm); font-weight: 800; }
.brakes-roam-settings-grid select, .brakes-roam-share input { min-height: 40px; border: 2px solid var(--game-ink); border-radius: var(--game-radius-sm); padding: 7px 9px; background: var(--game-paper); color: var(--game-text); font: inherit; }
.brakes-roam-help, .brakes-roam-share p { margin: 8px 0 0; font-size: var(--game-fs-sm); opacity: .78; }
.brakes-roam-share-actions { display: flex; gap: 8px; margin: 8px 0; }
.brakes-roam-share-actions .game-btn { flex: 1 1 0; }
.brakes-roam-share [data-roam-qr] { min-height: 0; margin-top: 8px; text-align: center; }
.brakes-roam-share [data-roam-qr]:not(:empty) { min-height: 144px; }
.brakes-roam-game[data-input-mode="joystick"] .brakes-roam-settings { border-color: var(--game-teal); }
.brakes-roam-game[data-input-mode="keyboard"] .brakes-roam-dynamic-joystick { display: none; }
.brakes-roam-game[data-touch-size="large"] .brakes-roam-dynamic-joystick { width: 128px; height: 128px; margin: -64px; }
.brakes-roam-game[data-touch-size="large"] .brakes-roam-dynamic-joystick span { width: 50px; height: 50px; margin: -25px; }
.brakes-roam-boost:focus-visible, .brakes-roam-brake:focus-visible, .brakes-roam-stop:focus-visible, .brakes-roam-sound:focus-visible, .brakes-roam-car-select select:focus-visible { outline: 3px solid var(--game-teal); outline-offset: 3px; }
.brakes-roam-game[data-feedback="collision"] .brakes-roam-stage, .brakes-roam-game[data-feedback="damage"] .brakes-roam-stage { border-color: var(--game-red); }
.brakes-roam-game[data-feedback="objective"] .brakes-roam-stage, .brakes-roam-game[data-feedback="success"] .brakes-roam-stage { border-color: var(--game-yellow); }
.brakes-roam-game[data-feedback="recovery"] .brakes-roam-stage, .brakes-roam-game[data-feedback="route"] .brakes-roam-stage { border-color: var(--game-green); }
.brakes-roam-game[data-feedback="heat"] .brakes-roam-stage { border-color: var(--game-orange); }
.brakes-roam-game[data-feedback="nearMiss"] .brakes-roam-stage { border-color: var(--game-yellow); }
@media (max-width: 380px) { .brakes-roam-canvas { height: 250px; min-height: 250px; } .brakes-roam-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brakes-roam-dynamic-joystick { width: 96px; height: 96px; margin: -48px; } .brakes-roam-dynamic-joystick span { width: 38px; height: 38px; margin: -19px; } }


/* --- Module: games-rope-cutting.css --- */
/* Candy Drop vertical-slice layout; rendering colors come from game skins. */
.rope-cutting-game { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.rope-cutting-hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rope-cutting-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.rope-cutting-level { flex: 1 1 0; min-width: 9rem; padding: 8px 10px; border: 2px solid var(--game-ink); border-radius: var(--game-radius-pill); background: var(--game-surface); color: var(--game-text); font: inherit; font-weight: 800; cursor: pointer; }
.rope-cutting-level.is-active { background: var(--game-yellow); box-shadow: var(--game-shadow-sm); }
.rope-cutting-level.is-complete:not(.is-active) { border-color: var(--game-green); }
.rope-cutting-lesson { margin: -4px 0 0; text-align: center; font-size: .84rem; font-weight: 800; color: var(--game-text); }
.rope-cutting-goals { margin: -4px 0 0; text-align: center; font-size: .8rem; font-weight: 800; color: var(--game-text); }
.rope-cutting-stage { width: 100%; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-lg); box-shadow: var(--game-shadow-md); overflow: hidden; background: var(--game-paper); }
.rope-cutting-canvas { display: block; width: 100%; height: clamp(300px, 68vw, 520px); touch-action: none; }
.rope-cutting-progress { width: 100%; height: 10px; overflow: hidden; border: 2px solid var(--game-ink); border-radius: var(--game-radius-pill); background: var(--game-surface); }
.rope-cutting-progress span { display: block; width: 8%; height: 100%; background: var(--game-orange); transition: width .15s linear; }
.rope-cutting-feedback { margin: 0; min-height: 1.5em; text-align: center; font-weight: 800; color: var(--game-text); }
.rope-cutting-clear { display: block; margin: 10px auto 0; padding: 6px 10px; font-size: .8rem; }
.rope-cutting-clear[hidden] { display: none !important; }
.rope-cutting-game .game-actions { gap: 8px; }
.rope-cutting-game .game-btn { flex: 1 1 0; padding-inline: 12px; }
.rope-cutting-topology { width: 100%; }
.rope-cutting-levels[hidden] { display: none; }
@media (max-width: 380px) { .rope-cutting-canvas { height: 290px; } .rope-cutting-hud .game-tag { display: none; } }


/* --- Module: games-snake.css --- */
/* Snake canvas playfield; rendering colors come from game skins. */
.snake-game { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.snake-stage { width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1 / 1; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-lg); box-shadow: var(--game-shadow-md); overflow: hidden; background: var(--game-paper); }
.snake-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.snake-game .game-actions { gap: 8px; }


/* --- Module: games-kos.css --- */
/* ==========================================================================
   King of Snacks — game-specific art tokens and diorama
   --------------------------------------------------------------------------
   Structural stage primitives live in css/games.css (`Stage primitives`).
   This file holds only what is KOS-specific: the derived town palette and,
   from R3 on, the stationary diorama. Every --kos-* value is derived from
   the active skin's --game-* tokens with color-mix(), so all six skins get a
   coherent town for free; a skin file may override a --kos-* token but never
   needs to.
   ========================================================================== */

[data-game="kos"] {
  /* Daylight anchor — a fixed cream. The diorama is a lit daytime town in
     every skin (the reference is daylight); a dusk skin tints the sky and
     the horizon but never darkens a storefront. Fixed on purpose. */
  --kos-day: #FFF6E4;
  --kos-sky: color-mix(in srgb, var(--game-teal) 34%, var(--game-paper));
  --kos-haze: color-mix(in srgb, var(--game-ink) 16%, var(--game-paper));
  --kos-ground: color-mix(in srgb, var(--game-yellow) 16%, color-mix(in srgb, var(--game-ink-solid) 8%, var(--kos-day)));
  --kos-road: color-mix(in srgb, var(--game-ink-solid) 38%, var(--kos-day));
  --kos-curb: color-mix(in srgb, var(--game-ink-solid) 14%, var(--kos-day));
  --kos-pad: color-mix(in srgb, var(--game-ink-solid) 8%, var(--kos-day));
  --kos-support: color-mix(in srgb, var(--game-ink-solid) 36%, var(--kos-day));
  --kos-support-ink: color-mix(in srgb, var(--game-ink-solid) 70%, var(--kos-day));
  /* Town signals are part of the art, not the chrome: the same gold ring,
     red rival and orange alarm on every skin (fixed literals). */
  --kos-own: #FFD23F;
  --kos-rival: #E4573D;
  --kos-attention: #FF8A3D;
  --kos-watch: #FFB74A;
  --kos-night: var(--game-ink-solid);
  --kos-line: var(--game-ink-solid);
  /* Facade identity palettes — one per vertical, the same on every skin
     ("name and palette retained"). Fixed literals from the reference. */
  --kos-facade-coffee: #F5A86A;
  --kos-facade-smoothie: #7ED6CC;
  --kos-facade-bakery: #FFD968;
  --kos-facade-froyo: #C9A6EE;
  --kos-facade-ice-cream: #8CB8F0;
  --kos-facade-pastry: #F49BC5;
  --kos-placard: #FFF2C7;
  /* the neighbours' second, quieter palette (R31) */
  --kos-neighbor-laundry: #CFE3EC;
  --kos-neighbor-pharmacy: #D7EBD5;
  --kos-neighbor-hardware: #D9B8A2;
  --kos-neighbor-diner: #BFE0DC;
  --kos-neighbor-paper: #EFE6D2;
  --kos-glass: #B8E9E3;
  --kos-door: #8A5A2B;
  --kos-leaf: #6FBF73;
  --kos-trunk: #8A5A2B;
  --kos-skin: #F5C9A0;
  --kos-apron: #9ED89A;
}

/* Closing-the-day deck: the town's night palette rather than raw ink. */
.game-stage[data-game="kos"] .game-deck {
  background: color-mix(in srgb, var(--game-purple) 14%, var(--kos-night));
}

/* --------------------------------------------------------------------------
   The stationary diorama (R3). Geometry is the accepted reference,
   prototypes/games/kos-q58-stationary-diorama.html, ported verbatim on a
   390px design width: the .kos-town block is scaled to the world width from
   its top-centre (never panned), so every phone sees the same composition.
   Support buildings are decoration; the six snack businesses are buttons.
   -------------------------------------------------------------------------- */

.kos-world {
  background: linear-gradient(var(--kos-sky) 0 25%, var(--kos-haze) 25% 31%, var(--kos-ground) 31% 100%);
  --kos-town-scale: 1;
  --kos-town-top: 176px;
  --kos-line-w: 1.5px;
  --kos-shop-line: var(--game-border-w);
}
.kos-world, .kos-world * { box-sizing: border-box; }
.kos-sun {
  position: absolute; left: 38px; top: 24px; width: 38px; height: 38px;
  border: 1.5px solid color-mix(in srgb, var(--game-ink-solid) 70%, var(--kos-day));
  border-radius: 50%;
  background: color-mix(in srgb, var(--kos-facade-bakery) 80%, var(--kos-day));
  opacity: .8;
}
.kos-horizon {
  position: absolute; left: 0; right: 0; top: 112px; height: 74px;
  border-bottom: 2px solid color-mix(in srgb, var(--game-ink-solid) 60%, var(--kos-day));
  overflow: hidden;
  background: linear-gradient(color-mix(in srgb, var(--kos-haze) 60%, var(--kos-sky)), var(--kos-haze));
}
.kos-hb {
  position: absolute; bottom: 0;
  background: var(--kos-support);
  border: 1px solid var(--kos-support-ink); border-bottom: 0;
  opacity: .58;
}
.kos-hb::before, .kos-hb::after { content: ""; position: absolute; background: var(--kos-support-ink); opacity: .45; }
.kos-hb::before { left: 20%; right: 20%; top: -10px; height: 10px; }
.kos-hb::after { left: 14%; right: 14%; bottom: 13px; height: 3px; box-shadow: 0 -12px 0 var(--kos-support-ink); }
.kos-crumb {
  position: absolute; right: 31px; bottom: 0; width: 39px; height: 48px;
  background: var(--kos-rival);
  color: color-mix(in srgb, white 80%, var(--kos-rival));
  border: 1.5px solid color-mix(in srgb, var(--kos-rival) 60%, var(--game-ink-solid)); border-bottom: 0;
  text-align: center; padding-top: 9px;
  font-size: 5px; font-weight: 1000; letter-spacing: .03em; line-height: 1.1;
  z-index: 2;
  box-shadow: 4px 2px 0 color-mix(in srgb, var(--kos-rival) 40%, transparent);
}
.kos-crumb::before { content: ""; position: absolute; left: 9px; right: 9px; top: -10px; height: 10px; background: color-mix(in srgb, var(--kos-rival) 70%, var(--game-ink-solid)); border: 1px solid color-mix(in srgb, var(--kos-rival) 60%, var(--game-ink-solid)); border-bottom: 0; }
.kos-crumb small { display: block; font-size: 4px; font-weight: 900; opacity: .9; }
.kos-crumb[data-kos-active="true"] { box-shadow: 0 0 0 2px var(--kos-attention), 4px 2px 0 color-mix(in srgb, var(--kos-rival) 40%, transparent); }

.kos-town {
  position: absolute; left: 50%; top: var(--kos-town-top); width: 390px; height: 430px;
  margin-left: -195px;
  transform: scale(var(--kos-town-scale));
  transform-origin: top center;
}
.kos-road {
  position: absolute; background: var(--kos-road);
  border: 1.5px solid color-mix(in srgb, var(--game-ink-solid) 55%, var(--kos-road));
  box-shadow: inset 0 5px 0 var(--kos-curb);
}
.kos-road::after { content: ""; position: absolute; border-top: 2px dashed color-mix(in srgb, var(--kos-day) 85%, var(--kos-road)); opacity: .8; }
.kos-road.main { left: -16px; right: -16px; top: 170px; height: 54px; transform: skewY(-2deg); }
.kos-road.main::after { left: 20px; right: 20px; top: 26px; }
.kos-road.cross { width: 42px; height: 230px; left: 238px; top: 36px; transform: skewX(-6deg); opacity: .9; }
.kos-road.cross::after { top: 8px; bottom: 8px; left: 20px; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--kos-day) 85%, var(--kos-road)); }
.kos-pad {
  position: absolute; background: var(--kos-pad);
  border: 1px solid color-mix(in srgb, var(--game-ink-solid) 30%, var(--kos-pad));
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--kos-day) 40%, var(--kos-pad));
}
.kos-pad.a { left: 8px; top: 228px; width: 222px; height: 176px; }
.kos-pad.b { left: 9px; top: 39px; width: 214px; height: 119px; }
.kos-pad.c { right: 7px; top: 54px; width: 102px; height: 110px; }
.kos-pad.d { right: 8px; top: 236px; width: 98px; height: 142px; }
/* The neighbours (R31): present, not more numerous. Each of the five named
   buildings has its own quiet facade colour from a second palette, a real
   placard and lit windows; the two apartment blocks stay background.
   Decoration only — never a button, never something the player can own. */
.kos-support {
  position: absolute;
  border: 1.5px solid var(--kos-support-ink);
  border-radius: 5px 5px 2px 2px;
  background: var(--c, var(--kos-support));
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--game-ink-solid) 8%, transparent);
  opacity: .72;
  pointer-events: none;
}
.kos-support.is-named { opacity: 1; }
.kos-support .roof { position: absolute; left: 7px; right: 7px; top: -10px; height: 10px; border: 1.5px solid var(--kos-support-ink); border-bottom: 0; background: color-mix(in srgb, var(--game-ink-solid) 50%, var(--kos-support)); }
.kos-support .label { position: absolute; left: 2px; right: 2px; top: 8px; text-align: center; font-size: 5px; font-weight: 900; letter-spacing: .03em; color: color-mix(in srgb, var(--game-ink-solid) 75%, var(--kos-support)); }
.kos-support.is-named .label { left: 3px; right: 3px; top: 6px; padding: 2px 1px; font-size: 5.5px; border: 1px solid var(--kos-line); border-radius: 2px; background: var(--kos-placard); color: var(--game-ink-solid); }
.kos-support .windows { position: absolute; left: 7px; right: 7px; bottom: 8px; height: 8px; background: repeating-linear-gradient(90deg, var(--kos-glass) 0 9px, transparent 9px 14px); }
.kos-support.is-named .windows { height: 10px; background: repeating-linear-gradient(90deg, var(--kos-glass) 0 9px, transparent 9px 14px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kos-line) 40%, transparent); }
.kos-support.apts1 { left: 27px; top: 10px; width: 66px; height: 45px; --c: color-mix(in srgb, var(--game-ink-solid) 30%, var(--kos-day)); }
.kos-support.laundry { left: 207px; top: 83px; width: 42px; height: 66px; --c: var(--kos-neighbor-laundry); }
.kos-support.pharmacy { right: 53px; top: 5px; width: 54px; height: 60px; --c: var(--kos-neighbor-pharmacy); }
.kos-support.hardware { right: 67px; top: 285px; width: 48px; height: 88px; --c: var(--kos-neighbor-hardware); }
.kos-support.apts2 { right: 15px; top: 291px; width: 48px; height: 79px; --c: color-mix(in srgb, var(--game-ink-solid) 28%, var(--kos-day)); }
.kos-support.diner { left: 105px; top: 217px; width: 55px; height: 48px; --c: var(--kos-neighbor-diner); }
.kos-support.diner::after { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 4px; background: repeating-linear-gradient(90deg, var(--kos-rival) 0 6px, var(--kos-placard) 6px 12px); opacity: .8; }
.kos-support.paper { right: 71px; top: 206px; width: 37px; height: 39px; --c: var(--kos-neighbor-paper); }
.kos-trees { position: absolute; left: 203px; top: 219px; width: 26px; height: 42px; pointer-events: none; }
.kos-trees::before, .kos-trees::after { content: ""; position: absolute; bottom: 0; width: 4px; height: 22px; background: var(--kos-trunk); }
.kos-trees::before { left: 5px; }
.kos-trees::after { right: 4px; }
.kos-trees span::before, .kos-trees span::after { content: ""; position: absolute; width: 21px; height: 21px; border: 1.5px solid color-mix(in srgb, var(--kos-leaf) 60%, var(--kos-line)); border-radius: 50%; background: var(--kos-leaf); }
.kos-trees span::before { left: -3px; top: 2px; }
.kos-trees span::after { right: -4px; top: 9px; }

/* the six snack businesses --------------------------------------------- */

.kos-shop {
  position: absolute;
  display: block;
  padding: 0;
  border: 2px solid var(--kos-line);
  border-radius: 8px 8px 3px 3px;
  background: var(--c);
  color: var(--game-ink-solid);
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--game-ink-solid) 12%, transparent);
  cursor: pointer;
  z-index: 3;
  text-align: left;
  font-family: inherit;
  overflow: visible;
}
.kos-shop[data-kos-shop="coffee"] { --c: var(--kos-facade-coffee); }
.kos-shop[data-kos-shop="smoothie"] { --c: var(--kos-facade-smoothie); }
.kos-shop[data-kos-shop="bakery"] { --c: var(--kos-facade-bakery); }
.kos-shop[data-kos-shop="froyo"] { --c: var(--kos-facade-froyo); }
.kos-shop[data-kos-shop="iceCream"] { --c: var(--kos-facade-ice-cream); }
.kos-shop[data-kos-shop="pastry"] { --c: var(--kos-facade-pastry); }
/* fixed geography: no scene changes alter these coordinates */
.kos-shop[data-kos-slot="anchor"] { left: 18px; top: 252px; width: 145px; height: 148px; }
.kos-shop[data-kos-slot="near"] { left: 171px; top: 277px; width: 91px; height: 112px; }
.kos-shop[data-kos-slot="rear-west"] { left: 17px; top: 66px; width: 92px; height: 91px; }
.kos-shop[data-kos-slot="rear-center"] { left: 119px; top: 82px; width: 78px; height: 76px; }
.kos-shop[data-kos-slot="rear-east"] { right: 14px; top: 87px; width: 83px; height: 78px; }
.kos-shop[data-kos-slot="satellite"] { right: 17px; top: 255px; width: 78px; height: 99px; }
.kos-shop-brand {
  position: absolute; left: 5px; right: 5px; top: 6px;
  border: 1.3px solid var(--kos-line); border-radius: 4px;
  background: var(--kos-placard);
  padding: 3px 2px; text-align: center;
  font-size: 7px; font-weight: 1000; line-height: 1.03;
  color: var(--game-ink-solid);
}
.kos-shop-owner { position: absolute; left: 3px; right: 3px; top: 33px; text-align: center; font-size: 5.5px; font-weight: 800; line-height: 1.1; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kos-shop-awning { position: absolute; left: 0; right: 0; bottom: 32%; height: 12%; border-top: 1.5px solid var(--kos-line); border-bottom: 1.5px solid var(--kos-line); background: repeating-linear-gradient(90deg, var(--kos-day) 0 9px, color-mix(in srgb, var(--kos-glass) 55%, var(--kos-line)) 9px 18px); }
.kos-shop-door { position: absolute; left: 7%; bottom: 0; width: 23%; height: 30%; border: 1.5px solid var(--kos-line); border-bottom: 0; background: var(--kos-door); }
.kos-shop-win { position: absolute; right: 7%; bottom: 8%; width: 38%; height: 24%; border: 1.5px solid var(--kos-line); background: var(--kos-glass); }
.kos-shop-mgr { position: absolute; left: 41%; bottom: -2px; width: 18px; height: 35px; display: none; }
.kos-shop-mgr::before { content: ""; position: absolute; left: 4px; width: 11px; height: 11px; border: 1.5px solid var(--kos-line); border-radius: 50%; background: var(--kos-skin); }
.kos-shop-mgr::after { content: ""; position: absolute; bottom: 0; width: 18px; height: 23px; border: 1.5px solid var(--kos-line); border-radius: 7px 7px 2px 2px; background: var(--kos-apron); }
.kos-shop-crest { display: none; position: absolute; top: -9px; right: -7px; width: 18px; height: 18px; place-items: center; border: 1.5px solid var(--kos-line); border-radius: 50%; background: var(--kos-own); color: var(--game-ink-solid); font-size: 9px; font-weight: 1000; }
.kos-shop[data-kos-slot="anchor"] .kos-shop-brand { font-size: 9px; top: 8px; }
.kos-shop[data-kos-slot="anchor"] .kos-shop-owner { font-size: 7px; top: 40px; }
.kos-shop[data-kos-slot="anchor"] .kos-shop-awning { height: 18px; bottom: 48px; }
.kos-shop[data-kos-slot="anchor"] .kos-shop-door { width: 28px; height: 49px; left: 10px; }
.kos-shop[data-kos-slot="anchor"] .kos-shop-win { width: 46px; height: 36px; right: 12px; bottom: 11px; }
/* ownership language layers over local identity */
.kos-shop[data-kos-owned="true"] { box-shadow: 0 0 0 3px var(--kos-own), 3px 4px 0 color-mix(in srgb, var(--game-ink-solid) 16%, transparent); }
.kos-shop[data-kos-owned="true"] .kos-shop-awning { background: repeating-linear-gradient(90deg, var(--kos-day) 0 9px, var(--kos-own) 9px 18px); }
.kos-shop[data-kos-owned="true"] .kos-shop-mgr { display: block; }
.kos-shop[data-kos-owned="true"] .kos-shop-crest { display: grid; }
/* local attention cues — never a camera move */
.kos-shop[data-kos-level="watch"] { box-shadow: 0 0 0 3px var(--kos-watch), 3px 4px 0 color-mix(in srgb, var(--game-ink-solid) 16%, transparent); }
.kos-shop[data-kos-level="needs"] { outline: 4px solid color-mix(in srgb, var(--kos-day) 70%, transparent); box-shadow: 0 0 0 7px var(--kos-attention), 4px 5px 0 color-mix(in srgb, var(--game-ink-solid) 16%, transparent); }
.kos-shop[data-kos-level="needs"]::after { content: "!"; position: absolute; right: -7px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--kos-line); background: var(--kos-attention); color: var(--game-ink-solid); display: grid; place-items: center; font-size: 13px; font-weight: 1000; z-index: 2; }
/* The lone empty building on the entry's shop step (R40): grey, no placard
   text, no awning stripes, until a kind of shop is picked. */
/* The lone building of the entry (R49): centred on the block in the anchor's
   size; a sign hangs over it while the manager is chosen and on the review. */
.kos-world[data-kos-lone="true"] .kos-shop.is-lone[data-kos-slot="anchor"] { left: 122px; right: auto; top: 236px; }
.kos-shop-sign {
  position: absolute; left: 50%; top: -30px; transform: translateX(-50%) rotate(-2deg);
  padding: 3px 8px; border: 1.5px solid var(--kos-line); border-radius: 3px;
  background: var(--kos-day); color: var(--game-ink-solid);
  font-size: 9px; font-weight: 1000; letter-spacing: 0.06em; white-space: nowrap;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--game-ink-solid) 18%, transparent);
}
.kos-shop-sign[data-kos-sign="grand-opening"] { background: var(--kos-own); font-size: 10px; top: -34px; transform: translateX(-50%) rotate(2deg); }
.kos-shop-sign[data-kos-sign="help-wanted"]::before { content: ""; position: absolute; left: 50%; bottom: -8px; width: 2px; height: 8px; background: var(--kos-line); transform: translateX(-50%); }
.kos-shop.is-empty { background: var(--kos-support); border-color: var(--kos-support-ink); filter: none; opacity: 1; }
.kos-shop.is-empty .kos-shop-brand { background: color-mix(in srgb, var(--kos-support-ink) 18%, var(--kos-support)); border-color: var(--kos-support-ink); min-height: 14px; }
.kos-shop.is-empty .kos-shop-awning { background: color-mix(in srgb, var(--kos-support-ink) 30%, var(--kos-support)); }
.kos-shop.is-empty .kos-shop-win, .kos-shop.is-empty .kos-shop-door { opacity: .55; }
.kos-shop.is-empty .kos-shop-crest, .kos-shop.is-empty .kos-shop-mgr { display: none; }
.kos-friend-code { margin: 4px 0 6px; padding: 8px 10px; border: 1.5px dashed var(--game-ink); border-radius: var(--game-radius-sm); }
.kos-friend-code .game-line > b { font-family: ui-monospace, Menlo, monospace; letter-spacing: .02em; }
/* Picking a shop (R28): the entry's shop step only. The quiet state is a
   picking state, never an ownership one — it does not exist once a business
   does. */
.kos-world[data-kos-picking="true"] .kos-shop:not([data-kos-pick="true"]) { filter: saturate(0.35); opacity: 0.62; }
.kos-shop[data-kos-pick="true"] { z-index: 4; filter: none; opacity: 1; }
.kos-shop[data-kos-pick="true"] .kos-shop-brand { box-shadow: 0 0 0 2px var(--kos-day), 0 0 0 4px var(--kos-own); }
.kos-shop[data-kos-pick="true"]::after { content: ""; position: absolute; left: 50%; top: -14px; width: 0; height: 0; transform: translateX(-50%); border: 7px solid transparent; border-top: 9px solid var(--kos-own); }
@media (prefers-reduced-motion: no-preference) { .kos-world[data-kos-picking="true"] .kos-shop { transition: filter 0.16s ease, opacity 0.16s ease; } }
.kos-shop[data-kos-focus="true"] { z-index: 4; }
.kos-shop[data-kos-focus="true"] .kos-shop-brand { box-shadow: 0 0 0 2px var(--kos-day), 0 0 0 3.5px var(--kos-line); }
.kos-shop:focus-visible { outline: 3px solid var(--kos-line); outline-offset: 4px; }
/* Season in the sky (R13). world.season drives demand in the sim; the sky
   says so without a word: a pure-CSS motif and a sun that moves with the
   year. No motion, nothing interactive, no new assets. The forecast the
   result already names (heat wave, rainy wallets) tints tomorrow's sky. */
.kos-sky-motif { position: absolute; left: 0; right: 0; top: 0; height: 110px; pointer-events: none; }
.kos-sky-motif i { position: absolute; display: none; border-radius: 50%; }
.kos-world[data-kos-season="spring"] { --kos-sky: color-mix(in srgb, #BDEBD3 60%, var(--game-paper)); }
.kos-world[data-kos-season="spring"] .kos-sky-motif i { display: block; width: 9px; height: 9px; background: #F9B8CF; border: 1.2px solid #D97A9C; }
.kos-world[data-kos-season="spring"] .kos-sky-motif i:nth-child(1) { left: 120px; top: 30px; }
.kos-world[data-kos-season="spring"] .kos-sky-motif i:nth-child(2) { left: 150px; top: 58px; width: 7px; height: 7px; }
.kos-world[data-kos-season="spring"] .kos-sky-motif i:nth-child(3) { right: 60px; top: 42px; }
.kos-world[data-kos-season="spring"] .kos-sky-motif i:nth-child(4) { right: 96px; top: 74px; width: 6px; height: 6px; }
.kos-world[data-kos-season="summer"] .kos-sun { width: 44px; height: 44px; top: 20px; background: #FFD23F; box-shadow: 0 0 0 6px color-mix(in srgb, #FFD23F 35%, transparent); }
.kos-world[data-kos-season="fall"] { --kos-sky: color-mix(in srgb, #F6D4A6 62%, var(--game-paper)); --kos-haze: color-mix(in srgb, #E8A860 40%, var(--game-paper)); }
.kos-world[data-kos-season="fall"] .kos-sun { top: 40px; left: 52px; background: #F7B457; }
.kos-world[data-kos-season="fall"] .kos-sky-motif i { display: block; width: 8px; height: 5px; border-radius: 50% 0 50% 0; background: #E2782E; border: 1px solid #8A4A14; }
.kos-world[data-kos-season="fall"] .kos-sky-motif i:nth-child(1) { left: 140px; top: 70px; transform: rotate(20deg); }
.kos-world[data-kos-season="fall"] .kos-sky-motif i:nth-child(2) { left: 210px; top: 48px; transform: rotate(-30deg); background: #D9A63A; }
.kos-world[data-kos-season="fall"] .kos-sky-motif i:nth-child(3) { right: 70px; top: 82px; transform: rotate(45deg); }
.kos-world[data-kos-season="fall"] .kos-sky-motif i:nth-child(4) { right: 118px; top: 30px; transform: rotate(-10deg); background: #C85A2A; }
.kos-world[data-kos-season="winter"] { --kos-sky: color-mix(in srgb, #DCE9F2 68%, var(--game-paper)); --kos-haze: color-mix(in srgb, #C4D3DF 50%, var(--game-paper)); --kos-ground: color-mix(in srgb, #EEF3F6 70%, var(--kos-day)); --kos-pad: color-mix(in srgb, #FFFFFF 60%, var(--kos-day)); }
.kos-world[data-kos-season="winter"] .kos-sun { top: 56px; left: 46px; width: 32px; height: 32px; background: #FFF4CC; opacity: .9; }
.kos-world[data-kos-season="winter"] .kos-sky-motif i { display: block; width: 5px; height: 5px; background: #FFFFFF; border: 1px solid #A9BCCB; }
.kos-world[data-kos-season="winter"] .kos-sky-motif i:nth-child(1) { left: 110px; top: 34px; }
.kos-world[data-kos-season="winter"] .kos-sky-motif i:nth-child(2) { left: 170px; top: 66px; }
.kos-world[data-kos-season="winter"] .kos-sky-motif i:nth-child(3) { right: 64px; top: 46px; }
.kos-world[data-kos-season="winter"] .kos-sky-motif i:nth-child(4) { right: 120px; top: 84px; }
.kos-world[data-kos-season="winter"] .kos-support .roof, .kos-world[data-kos-season="winter"] .kos-crumb::before { background: #F4F8FB; }
.kos-world[data-kos-sky="heat"] { --kos-sky: color-mix(in srgb, #FFD8A8 62%, var(--game-paper)); }
.kos-world[data-kos-sky="heat"] .kos-sun { box-shadow: 0 0 0 8px color-mix(in srgb, #FF8A3D 30%, transparent); }
.kos-world[data-kos-sky="rain"] { --kos-sky: color-mix(in srgb, #C9D2DA 66%, var(--game-paper)); }
.kos-world[data-kos-sky="rain"] .kos-sun { opacity: .35; }
.kos-world[data-kos-sky="rain"] .kos-sky-motif::before, .kos-world[data-kos-sky="rain"] .kos-sky-motif::after { content: ""; position: absolute; top: 28px; width: 58px; height: 18px; border-radius: 12px; background: #EEF2F5; border: 1.2px solid #8FA1B0; }
.kos-world[data-kos-sky="rain"] .kos-sky-motif::before { left: 118px; }
.kos-world[data-kos-sky="rain"] .kos-sky-motif::after { right: 54px; top: 54px; width: 44px; height: 14px; }

@media (max-width: 340px) {
  .kos-sun { left: 24px; top: 16px; width: 30px; height: 30px; }
  .kos-horizon { top: 94px; height: 62px; }
  .kos-world { --kos-town-top: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .kos-shop { transition: none; }
}

/* Entry panel bits (campaign picker → shop → manager → review). The sheet
   sits over the independent town; options carry the town's own art — a
   facade swatch per vertical, the manager figure per person — as pure CSS. */
.game-choice.has-swatch > .game-choice-swatch.kos-swatch { background: var(--c, var(--kos-day)); }
.kos-swatch::before { content: ""; position: absolute; left: 4px; right: 4px; top: 5px; height: 9px; border: 1px solid var(--kos-line); border-radius: 2px; background: var(--kos-placard); }
.kos-swatch::after { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 7px; border-top: 1px solid var(--kos-line); border-bottom: 1px solid var(--kos-line); background: repeating-linear-gradient(90deg, var(--kos-day) 0 5px, var(--kos-own) 5px 10px); }
.kos-swatch-coffee { --c: var(--kos-facade-coffee); }
.kos-swatch-smoothie { --c: var(--kos-facade-smoothie); }
.kos-swatch-bakery { --c: var(--kos-facade-bakery); }
.kos-swatch-froyo { --c: var(--kos-facade-froyo); }
.kos-swatch-iceCream { --c: var(--kos-facade-ice-cream); }
.kos-swatch-pastry { --c: var(--kos-facade-pastry); }
.game-choice.has-swatch > .game-choice-swatch.kos-figure { background: color-mix(in srgb, var(--kos-glass) 45%, var(--kos-day)); }
.kos-figure::before { content: ""; position: absolute; left: 12px; top: 4px; width: 13px; height: 13px; border: 1.5px solid var(--kos-line); border-radius: 50%; background: var(--kos-skin); }
.kos-figure::after { content: ""; position: absolute; left: 8px; bottom: 0; width: 21px; height: 19px; border: 1.5px solid var(--kos-line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--apron, var(--kos-apron)); }
/* The same figure, sized for a speech bubble (R24). */
.game-say-figure.kos-figure { background: color-mix(in srgb, var(--kos-glass) 45%, var(--kos-day)); }
.game-say-figure.kos-figure::before { left: 10px; top: 4px; width: 12px; height: 12px; }
.game-say-figure.kos-figure::after { left: 6px; width: 20px; height: 16px; }
.kos-figure-marta { --apron: var(--kos-apron); }
/* Figures without a manager (R48): Benny in Big Crumb red, a regular in the
   glass tint, the town in ground — a plain disc with an apron of that colour. */
.game-say-figure.kos-figure-benny::after, .game-say[data-kos-say="benny"] .game-say-figure::after { content: ""; position: absolute; left: 6px; bottom: 0; width: 20px; height: 16px; border: 1.5px solid var(--kos-line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--kos-rival); }
.game-say[data-kos-say="benny"] .game-say-figure::before, .game-say[data-kos-say="regular"] .game-say-figure::before, .game-say[data-kos-say="town"] .game-say-figure::before { content: ""; position: absolute; left: 10px; top: 4px; width: 12px; height: 12px; border: 1.5px solid var(--kos-line); border-radius: 50%; background: var(--kos-skin); }
.game-say[data-kos-say="regular"] .game-say-figure::after { content: ""; position: absolute; left: 6px; bottom: 0; width: 20px; height: 16px; border: 1.5px solid var(--kos-line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--kos-glass); }
.game-say[data-kos-say="town"] .game-say-figure::after { content: ""; position: absolute; left: 6px; bottom: 0; width: 20px; height: 16px; border: 1.5px solid var(--kos-line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--kos-ground); }
.kos-figure-carla { --apron: var(--kos-facade-smoothie); }
.kos-figure-pete { --apron: var(--kos-facade-ice-cream); }
.kos-figure-sal { --apron: var(--kos-facade-coffee); }
.kos-entry-options { display: flex; flex-direction: column; gap: 0; margin: 8px 0 4px; }
.kos-entry-options .game-choice { margin-bottom: 8px; }
.kos-entry-primary { width: 100%; margin-top: 6px; }
.kos-entry-field { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 11px; font-weight: 800; }
.kos-entry-field input { min-height: 40px; padding: 6px 9px; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-sm); background: var(--game-surface); color: var(--game-text); font: inherit; font-size: 13px; }

.kos-sync-qr { display: flex; justify-content: center; margin: 8px 0; }
.kos-sync-qr canvas, .kos-sync-qr svg, .kos-sync-qr img { border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-sm); background: #fff; padding: 6px; }
.kos-entry-field textarea { min-height: 64px; padding: 6px 9px; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-sm); background: var(--game-surface); color: var(--game-text); font: inherit; font-size: 11px; resize: vertical; }

/* The Festival as a paper on a table (R56). The deck is the tabletop — the
   town's trunk brown under a soft light — and the Crier lies on it, a
   little askew, printed in the paper's own dark ink whatever the skin. */
.game-stage[data-game="kos"] .game-deck[data-kos-paper-deck="true"] {
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--kos-day) 22%, transparent), transparent 60%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--game-ink-solid) 10%, transparent) 0 2px, transparent 2px 58px),
    var(--kos-trunk);
  padding: 14px 14px 16px;
}
.kos-paper {
  --kos-paper-ink: #24221C;
  --kos-paper-muted: #6B6558;
  --kos-paper-rule: #B9B09A;
  margin: 10px 2px 8px;
  padding: 16px 16px 18px;
  background: linear-gradient(180deg, #FFFDF6, #F6F0DF);
  color: var(--kos-paper-ink);
  border: 1px solid #D9D0BA;
  box-shadow: 3px 5px 0 color-mix(in srgb, var(--game-ink-solid) 28%, transparent), 0 14px 26px color-mix(in srgb, var(--game-ink-solid) 30%, transparent);
  transform: rotate(-1.4deg);
  font-family: var(--game-font);
}
.kos-paper-masthead { text-align: center; padding-bottom: 8px; border-bottom: 3px double var(--kos-paper-ink); }
.kos-paper-masthead > b { display: block; font-size: 26px; font-weight: 950; letter-spacing: -0.01em; line-height: 1; }
.kos-paper-masthead > small { display: block; margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kos-paper-muted); }
.kos-paper-headline { margin: 12px 0 6px; font-size: 22px; font-weight: 950; line-height: 1.05; text-wrap: balance; }
.kos-paper-dek { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--kos-paper-muted); }
.kos-paper-tally { padding: 8px 10px; border: 1.5px solid var(--kos-paper-ink); }
.kos-paper-tally > small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kos-paper-muted); }
.kos-paper-tally > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.kos-paper-tally span { display: grid; font-size: 11px; font-weight: 700; }
.kos-paper-tally b { font-size: 22px; font-weight: 950; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kos-paper-last { display: block; margin-top: 6px; font-size: 10.5px; font-weight: 700; color: var(--kos-paper-muted); }
.kos-paper-columns { display: grid; gap: 14px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--kos-paper-rule); }
.kos-paper h3 { margin: 0 0 6px; font-size: 10.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--kos-paper-rule); padding-bottom: 3px; }
.kos-paper-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.kos-paper-table th, .kos-paper-table td { padding: 4px 0; text-align: right; border-bottom: 1px dotted var(--kos-paper-rule); }
.kos-paper-table th:first-child, .kos-paper-table td:first-child { text-align: left; font-weight: 800; }
.kos-paper-table thead th { font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--kos-paper-muted); }
.kos-paper-quote { margin: 0 0 10px; }
.kos-paper-quote blockquote { margin: 0; padding: 0 0 0 10px; border-left: 3px solid var(--kos-paper-ink); font-size: 13px; font-weight: 600; line-height: 1.35; font-style: italic; }
.kos-paper-quote blockquote::before { content: "“"; }
.kos-paper-quote blockquote::after { content: "”"; }
.kos-paper-quote figcaption { margin-top: 3px; padding-left: 13px; font-size: 10.5px; font-weight: 800; color: var(--kos-paper-muted); }
.kos-paper-notes { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--kos-paper-rule); }
.kos-paper-notes ul { margin: 0; padding-left: 16px; font-size: 12px; font-weight: 600; line-height: 1.4; display: grid; gap: 4px; }
@media (max-width: 340px) { .kos-paper { padding: 12px 12px 14px; } .kos-paper-masthead > b { font-size: 22px; } .kos-paper-headline { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .kos-paper { transform: none; } }


/* --- Module: games-cooking.css --- */
/* Cooking Service — placeholder presentation over the stage primitives.
   Every colour, line and radius comes from --game-* so each skin stays
   coherent. Shapes are keyed by data-semantic; the voxel lane replaces them
   key for key (docs/games/cooking-service/UI_QUEUE.md). */

.cook-stage { --cook-gap: 10px; }
.cook-world {
  display: flex;
  flex-direction: column;
  gap: var(--cook-gap);
  padding: var(--cook-gap) 12px 12px;
  overflow: hidden;
}
.cook-world-content {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: var(--cook-gap);
  overflow: hidden;
}
.cook-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 15; }
.cook-overlay > * { pointer-events: auto; }

/* Counter: who is waiting ------------------------------------------------ */

.cook-counter {
  display: flex;
  gap: 8px;
  min-height: 92px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cook-counter::-webkit-scrollbar { display: none; }
.cook-empty { margin: auto; font-size: var(--game-fs-sm); font-weight: 700; color: var(--game-stage-muted); }

.cook-customer {
  flex: 0 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 6px 6px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-md);
  background: var(--game-surface);
  box-shadow: var(--game-shadow-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cook-customer.is-urgent { border-color: var(--game-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-red) 35%, transparent); }
.cook-face {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--game-ink);
  background: var(--game-yellow);
}
.cook-customer.is-urgent .cook-face { background: var(--game-orange); }
.cook-tokens { display: flex; gap: 4px; }
.cook-token { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cook-token.is-done { opacity: 0.35; }
.cook-token .cook-art-label { font-size: 8px; }

/* Bars: patience, cooking progress, hold-before-burn ------------------- */

.cook-patience, .cook-progress, .cook-hold {
  display: block;
  width: 100%;
  height: 7px;
  border: 1.5px solid var(--game-ink);
  border-radius: var(--game-radius-pill);
  background: var(--game-paper);
  overflow: hidden;
}
.cook-patience > span, .cook-progress > span, .cook-hold > span {
  display: block;
  height: 100%;
  width: 0; /* the view sets the width inline from the kernel's fractions */
  background: var(--game-green);
}
.cook-customer.is-urgent .cook-patience > span { background: var(--game-red); }
.cook-progress > span { background: var(--game-orange); }
.cook-hold { position: absolute; left: 6px; right: 6px; bottom: 5px; width: auto; height: 5px; }
.cook-hold > span { background: var(--game-red); }

.cook-notice {
  margin: 0;
  min-height: 16px;
  font-size: var(--game-fs-sm);
  line-height: 1.2;
  font-weight: 800;
  color: var(--game-red);
  text-align: center;
}
.cook-notice.is-review { color: var(--game-text); }

/* Ingredient sources: infinite bins are explicit tap targets, not invisible
   inventory. The kernel supplies the item type and semantic art key. */

.cook-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.cook-sources > .game-eyebrow { flex: 0 0 100%; }
.cook-source {
  flex: 0 0 auto;
  min-width: 66px;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 7px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-md);
  background: var(--game-surface);
  box-shadow: var(--game-shadow-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cook-source small { font-size: 9px; font-weight: 800; line-height: 1; }
.cook-source:active, .cook-shelf-slot:active { transform: translateY(1px); box-shadow: none; }

/* Kitchen: the tap targets ------------------------------------------------ */

.cook-kitchen {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  flex: 0 0 auto;
}
.cook-station { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cook-slots { display: flex; gap: 6px; flex: 1; }
.cook-slot {
  position: relative;
  flex: 1;
  min-height: 96px;
  max-height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px 12px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-md);
  background: var(--game-surface);
  box-shadow: var(--game-shadow-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cook-slot small { font-size: 10px; font-weight: 800; line-height: 1.1; text-align: center; }
.cook-slot.is-idle { border-style: dashed; background: color-mix(in srgb, var(--game-surface) 55%, var(--game-paper)); }
.cook-slot.is-processing { cursor: default; opacity: 0.9; }
.cook-slot.is-processing .cook-progress { width: calc(100% - 12px); }
.cook-slot.is-ready { border-color: var(--game-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-green) 35%, transparent); }
.cook-slot.is-staged { border-color: var(--game-blue); background: color-mix(in srgb, var(--game-blue) 12%, var(--game-surface)); }
.cook-slot.is-waste { border-color: var(--game-red); box-shadow: none; }
.cook-slot:active { transform: translateY(1px); box-shadow: none; }
.cook-assembly-stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1px;
  min-height: 58px;
  justify-content: center;
}
.cook-assembly-item { display: flex; align-items: center; justify-content: center; height: 17px; }

/* Shelf ------------------------------------------------------------------- */

.cook-shelf { display: flex; align-items: center; gap: 8px; }
.cook-shelf-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
  min-height: 40px;
  padding: 4px 10px;
  border: var(--game-border-w) dashed var(--game-ink);
  border-radius: var(--game-radius-md);
  background: transparent;
  cursor: default;
}
.cook-shelf-slot.has-item { border-style: solid; background: var(--game-surface); cursor: pointer; }
.cook-shelf-slot small { font-size: 10px; font-weight: 800; color: var(--game-stage-muted); }

/* Placeholder art keyed from semantic keys ------------------------------ */

.cook-art { display: block; width: 30px; height: 30px; border: 2px solid var(--game-ink); }
.cook-art-sm { width: 18px; height: 18px; border-width: 1.5px; }
.cook-art-label { font-size: 10px; font-weight: 800; line-height: 1; }
.cook-art-disc { border-radius: 50%; }
.cook-art-dome { border-radius: 50% 50% 8px 8px; }
.cook-art-square { border-radius: 4px; }
.cook-art-cup { border-radius: 4px 4px 10px 10px; }
.cook-art-stack { border-radius: 50% 50% 8px 8px; box-shadow: inset 0 -8px 0 0 var(--game-ink); }
.cook-art-pile { border-radius: 8px 8px 3px 3px; transform: skew(-8deg); }
.cook-art-box { border-radius: 3px 3px 7px 7px; box-shadow: inset 0 -5px 0 0 var(--game-ink); }
.cook-tone-raw { background: var(--game-pink); }
.cook-tone-cooked { background: color-mix(in srgb, var(--game-orange) 60%, var(--game-ink)); }
.cook-tone-burned { background: var(--game-ink-solid); }
.cook-tone-bun { background: var(--game-yellow); }
.cook-tone-cheese { background: var(--game-yellow); }
.cook-tone-cup { background: var(--game-paper); }
.cook-tone-drink { background: var(--game-blue); }
.cook-tone-burger { background: var(--game-yellow); }
.cook-tone-cheeseburger { background: var(--game-orange); }
.cook-tone-carton { background: var(--game-paper); }
.cook-tone-fries { background: var(--game-yellow); }
.cook-tone-unknown { background: var(--game-purple); }

/* Result / start sheets reuse .game-result; keep them readable over the world */
.cook-overlay .game-result {
  bottom: 18px;
  max-height: calc(100% - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.cook-overlay .game-result > .game-btn { width: 100%; margin-top: 8px; }
.cook-session-status {
  margin: 8px 0;
  padding: 7px 9px;
  border-left: 4px solid var(--game-green);
  background: color-mix(in srgb, var(--game-green) 10%, var(--game-paper));
  color: var(--game-text);
  font-size: var(--game-fs-sm);
  font-weight: 700;
  line-height: 1.35;
}
.cook-session-status.is-warning {
  border-left-color: var(--game-red);
  background: color-mix(in srgb, var(--game-red) 10%, var(--game-paper));
}
.cook-price-copy { margin-top: 12px !important; }
.cook-forecast { padding: 7px 9px; border-left: 4px solid var(--game-green); background: color-mix(in srgb, var(--game-green) 10%, var(--game-paper)); }
.cook-price-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.cook-price-tier {
  min-width: 0;
  padding: 7px 3px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: var(--game-paper);
  color: var(--game-text);
  cursor: pointer;
}
.cook-price-tier b, .cook-price-tier small { display: block; }
.cook-price-tier b { font-size: var(--game-fs-md); font-weight: 950; }
.cook-price-tier small { font-size: 8px; line-height: 1.15; }
.cook-price-tier.is-selected { border-color: var(--game-green); background: color-mix(in srgb, var(--game-green) 18%, var(--game-paper)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--game-green) 30%, transparent); }
.cook-earnings { font-weight: 950; }
.cook-review { font-size: 10px; font-weight: 800; }

/* Shift list ------------------------------------------------------------ */

.cook-levels { display: flex; flex-direction: column; gap: 8px; }
.cook-levels > .cook-session-status { margin: 0; padding: 5px 8px; font-size: 11px; line-height: 1.25; }
.cook-session-recovery { display: flex; flex-direction: column; gap: 4px; }
.cook-session-recovery > .game-btn { width: 100%; margin-top: 0; }
.cook-level {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title best" "blurb best";
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-md);
  background: var(--game-paper);
  box-shadow: var(--game-shadow-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cook-level > b { grid-area: title; font-size: var(--game-fs-md); font-weight: 900; }
.cook-level > small { grid-area: blurb; font-size: var(--game-fs-sm); font-weight: 600; color: var(--game-stage-muted); }
.cook-level-best { grid-area: best; font-size: var(--game-fs-sm); font-weight: 900; white-space: nowrap; }
.cook-level.is-done { border-color: var(--game-green); }
.cook-level.is-locked { border-style: dashed; box-shadow: none; opacity: 0.7; cursor: default; }

/* Session record — only present while a first-session review is running. */

.cook-record-box {
  width: 100%;
  height: 120px;
  margin-top: 8px;
  padding: 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  border: var(--game-border-w) solid var(--game-ink);
  border-radius: var(--game-radius-sm);
  background: var(--game-paper);
  color: var(--game-text);
}


/* --- Module: games-skin-cellshaded.css --- */
/* ==========================================================================
   Games Skin — Cell-Shaded (default)
   --------------------------------------------------------------------------
   The original shipped look: thick ink borders, flat crayon palette, hard
   unblurred offset shadows. Theme-invariant on purpose — see css/games.css
   header comment for why.
   ========================================================================== */

[data-games-theme="cellshaded"] {
  --game-text: #16171D;
  --game-ink: #4A4B52;
  --game-ink-solid: #16171D;
  --game-paper: #FFF9EF;
  --game-surface: #FFFFFF;

  --game-red: #FF5A5F;
  --game-orange: #FF9F43;
  --game-yellow: #FFD93D;
  --game-green: #4ECB71;
  --game-teal: #2EC4B6;
  --game-blue: #4D96FF;
  --game-purple: #9B6BFF;
  --game-pink: #FF6FB5;

  --game-driver: var(--game-orange);
  --game-passenger: var(--game-teal);

  --game-border-w: 3px;
  --game-radius-sm: 12px;
  --game-radius-md: 18px;
  --game-radius-lg: 26px;
  --game-radius-pill: 999px;

  /* Hard, unblurred offset shadows are what read as "cell-shaded" rather
     than the soft blurred elevation used by the rest of the app. */
  --game-shadow-sm: 3px 3px 0 var(--game-ink);
  --game-shadow-md: 5px 5px 0 var(--game-ink);
  --game-shadow-lg: 7px 7px 0 var(--game-ink);

  --game-font: 'Poppins', var(--font-ui, -apple-system, sans-serif);

  --game-fs-sm: 0.85rem;
  --game-fs-body: 1rem;
  --game-fs-md: 1.15rem;
  --game-fs-lg: 1.5rem;
  --game-fs-xl: 2rem;
  --game-fs-2xl: 2.6rem;
}

/* --------------------------------------------------------------------------
   Trip-context mat — Cell-Shaded only. A colored outer mat + a small
   location strip naming the current/next stop, both driven by
   applyTripContextMat() in js/games-engine.js. The card inside stays
   completely unchanged; only the frame around it responds to the trip.
   -------------------------------------------------------------------------- */

[data-games-theme="cellshaded"] .games-shell-backdrop {
  padding: 0;
  background: rgba(15, 15, 20, 0.6);
}

[data-games-theme="cellshaded"] .games-trip-mat {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--games-trip-mat-bg, linear-gradient(180deg, #E9C08A 0%, #D5841D 45%, #B54728 100%));
}

[data-games-theme="cellshaded"] .games-trip-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--game-paper) 86%, var(--games-trip-mat-accent, #D5841D));
  border-radius: 999px;
  color: var(--game-text);
  font-family: var(--game-font);
  font-size: 0.72rem;
  font-weight: 700;
}

[data-games-theme="cellshaded"] .games-trip-strip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--games-trip-mat-accent, #D5841D);
  flex-shrink: 0;
}

[data-games-theme="cellshaded"] .games-trip-strip-label {
  opacity: 0.65;
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

[data-games-theme="cellshaded"] .games-shell-card {
  flex: 1;
  border-radius: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 12px 30px rgba(89, 50, 27, 0.18);
}

/* White text fails AA on this skin's pink and red — dark text on social
   cards, picked-wrong tiles, and danger buttons. */
[data-games-theme="cellshaded"] .game-prompt-card.family-social,
[data-games-theme="cellshaded"] .game-grid-cell.is-bad,
[data-games-theme="cellshaded"] .game-btn-danger {
  color: var(--game-text);
}

/* Quote blue is too light for white at body-sized text; keep this override
   scoped to the quote game so other trivia surfaces retain their palette. */
[data-games-theme="cellshaded"] [data-game="quote"] .game-prompt-card.family-trivia {
  color: var(--game-text);
}

/* On phone-sized launcher screens, the game taxonomy is the orientation cue.
   The trip-location strip is useful inside games but duplicates chrome while
   choosing one, so reclaim that vertical space only on the menu. */
@media (max-width: 420px) {
  [data-games-theme="cellshaded"][data-games-screen="menu"] .games-trip-mat {
    padding: 8px;
  }

  [data-games-theme="cellshaded"][data-games-screen="menu"] .games-trip-strip {
    display: none;
  }

  /* A stage game (King of Snacks) owns the phone: the trip strip and the
     mat padding give their height back to the world, the same way the
     menu already reclaims them. */
  [data-games-theme="cellshaded"] .games-trip-mat:has(#games-shell-body[data-game-layout="stage"]) {
    padding: 8px;
  }

  [data-games-theme="cellshaded"] .games-trip-mat:has(#games-shell-body[data-game-layout="stage"]) .games-trip-strip {
    display: none;
  }
}



/* --- Module: games-skin-deco.css --- */
/* ==========================================================================
   Games Skin — Deco Voyage (World's Fair)
   --------------------------------------------------------------------------
   Thin gold linework, no drop shadows, deep jewel-tone fills instead of flat
   crayon colors. Deliberately reuses the same gold/forest-deep hues as
   data/theme_defaults.yaml's adventure_roadtrip palette and the deco-light
   grammar docs/HUMAN_CENTERED_DESIGN.md §7 already specifies for the journey
   backgrounds — so this skin and that system read as one visual language.
   ========================================================================== */

[data-games-theme="deco"] {
  --game-text: #F8F3E6;
  --game-ink: #C08A2E;
  --game-ink-solid: #162016;
  --game-paper: #162016;
  --game-surface: #1F2A1E;

  --game-red: #7A3B3B;
  --game-orange: #9E5423;
  --game-yellow: #C08A2E;
  --game-green: #3F6B4F;
  --game-teal: #2A6B63;
  --game-blue: #2A4A6B;
  --game-purple: #5B3A6B;
  --game-pink: #7A4A5E;

  --game-driver: var(--game-orange);
  --game-passenger: var(--game-teal);

  --game-border-w: 1.5px;
  --game-radius-sm: 3px;
  --game-radius-md: 4px;
  --game-radius-lg: 6px;
  --game-radius-pill: 999px;

  --game-shadow-sm: none;
  --game-shadow-md: none;
  --game-shadow-lg: none;

  --game-font: 'Poppins', var(--font-ui, -apple-system, sans-serif);

  --game-fs-sm: 0.85rem;
  --game-fs-body: 1rem;
  --game-fs-md: 1.15rem;
  --game-fs-lg: 1.5rem;
  --game-fs-xl: 2rem;
  --game-fs-2xl: 2.4rem;
}

[data-games-theme="deco"] .games-shell-card {
  background-color: var(--game-paper);
  background-image: repeating-conic-gradient(
    from 0deg at 50% -160px,
    rgba(192, 138, 46, 0.14) 0deg 3deg,
    transparent 3deg 11deg
  );
  background-repeat: no-repeat;
}

[data-games-theme="deco"] .game-header-title,
[data-games-theme="deco"] .game-tile-title,
[data-games-theme="deco"] .game-tag {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Gold linework needs a dark text pairing on the lightest fills for contrast;
   everything else stays the base cream. */
[data-games-theme="deco"] .game-prompt-card.family-word,
[data-games-theme="deco"] .game-prompt-card.family-grid {
  color: #1A1206;
}

/* Battle Grid Pick's shared prompt cards use the gold surface without a
   family class. Keep the dark pairing there too; green result cards retain
   their deliberate cream pairing below. */
[data-games-theme="deco"] [data-game="battle-grid-pick"] .game-prompt-card,
[data-games-theme="deco"] [data-bgp-placement] [aria-pressed="true"] {
  color: var(--game-ink-solid);
}

[data-games-theme="deco"] [data-game="battle-grid-pick"] [data-bgp-complete][data-bgp-winner="player"] .game-prompt-card,
[data-games-theme="deco"] [data-game="battle-grid-pick"] [data-bgp-pass-complete] .game-prompt-card {
  color: var(--game-text);
}

/* The orange Bee center badge needs light ink to keep the center letter clear. */
[data-games-theme="deco"] [data-game="bee"] .game-letter-badge {
  color: var(--game-text);
}

/* Cream text fails on this skin's brightest gold tile — near-black text
   on yellow badges and plate cells. Orange keeps the default cream. */
[data-games-theme="deco"] .game-tile-badge[data-tile="yellow"],
[data-games-theme="deco"] .game-grid-cell[data-tile="yellow"] {
  color: var(--game-ink-solid);
}


/* --- Module: games-skin-transit.css --- */
/* ==========================================================================
   Games Skin — Transit Diagram
   --------------------------------------------------------------------------
   Bold flat color blocks, square corners, no drop shadows, high-contrast
   ink/paper. Wayfinding-grade legibility under motion.
   ========================================================================== */

[data-games-theme="transit"] {
  --game-text: #111214;
  --game-ink: #111214;
  --game-ink-solid: #111214;
  --game-paper: #F7F7F5;
  --game-surface: #FFFFFF;

  --game-red: #C03A20;
  --game-orange: #E8871E;
  --game-yellow: #E8B923;
  --game-green: #177245;
  --game-teal: #0B7373;
  --game-blue: #1E5AA8;
  --game-purple: #6A4FB0;
  --game-pink: #C43F73;

  --game-driver: var(--game-orange);
  --game-passenger: var(--game-teal);

  --game-border-w: 3px;
  --game-radius-sm: 0px;
  --game-radius-md: 0px;
  --game-radius-lg: 0px;
  --game-radius-pill: 0px;

  --game-shadow-sm: none;
  --game-shadow-md: none;
  --game-shadow-lg: none;

  --game-font: 'Poppins', var(--font-ui, -apple-system, sans-serif);

  --game-fs-sm: 0.85rem;
  --game-fs-body: 1rem;
  --game-fs-md: 1.15rem;
  --game-fs-lg: 1.5rem;
  --game-fs-xl: 2rem;
  --game-fs-2xl: 2.4rem;
}

[data-games-theme="transit"] .game-header {
  background: var(--game-ink);
  color: #fff;
}

[data-games-theme="transit"] .game-header-back,
[data-games-theme="transit"] .game-header-end {
  border-radius: 0;
}

[data-games-theme="transit"] .game-header-title,
[data-games-theme="transit"] .game-tile-title,
[data-games-theme="transit"] .game-tag,
[data-games-theme="transit"] .game-btn,
[data-games-theme="transit"] .game-turn-chip {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* A stage card's two cells share 117px each at 390: their labels keep the
   station weight but not the caps and tracking, so `Let Marta run it` fits in
   a wide fallback font (a runner without the skin's face) too. */
[data-games-theme="transit"] .game-btn-cell > span { text-transform: none; letter-spacing: 0; }

/* Station-plate treatment: heavy top/bottom rules instead of a boxed card. */
[data-games-theme="transit"] .game-prompt-card {
  border-left: none;
  border-right: none;
  border-top-width: 5px;
  border-bottom-width: 5px;
}

[data-games-theme="transit"] .game-tag {
  background: var(--game-ink);
  color: #fff;
  border-color: var(--game-ink);
}

/* The primary action and green winner cards share Transit's dark green
   route color; use the same white wayfinding ink as saturated line badges. */
[data-games-theme="transit"] .game-btn-primary,
[data-games-theme="transit"] [data-game="battle-grid-pick"] [data-bgp-complete][data-bgp-winner="player"] .game-prompt-card,
[data-games-theme="transit"] [data-game="battle-grid-pick"] [data-bgp-pass-complete] .game-prompt-card {
  color: #fff;
}

/* Dark text fails AA on this skin's saturated tiles — white on red,
   green, teal, blue, purple, and pink badges and plate cells. Orange and
   yellow keep dark text. */
[data-games-theme="transit"] .game-tile-badge[data-tile="red"],
[data-games-theme="transit"] .game-tile-badge[data-tile="green"],
[data-games-theme="transit"] .game-tile-badge[data-tile="teal"],
[data-games-theme="transit"] .game-tile-badge[data-tile="blue"],
[data-games-theme="transit"] .game-tile-badge[data-tile="purple"],
[data-games-theme="transit"] .game-tile-badge[data-tile="pink"],
[data-games-theme="transit"] .game-grid-cell[data-tile="red"],
[data-games-theme="transit"] .game-grid-cell[data-tile="green"],
[data-games-theme="transit"] .game-grid-cell[data-tile="teal"],
[data-games-theme="transit"] .game-grid-cell[data-tile="blue"],
[data-games-theme="transit"] .game-grid-cell[data-tile="purple"],
[data-games-theme="transit"] .game-grid-cell[data-tile="pink"] {
  color: #fff;
}

/* Dark text on this skin's mid green falls just short of AA — confirmed
   picks read white instead. */
[data-games-theme="transit"] .game-grid-cell.is-locked {
  color: #fff;
}

/* Battle Grid Pick marks recovered squares with the shared green state but
   does not use the tile taxonomy's data-tile hook. Keep those dark transit
   stations on their white wayfinding ink. */
[data-games-theme="transit"] [data-game="battle-grid-pick"] .game-grid-cell.is-marked {
  color: #fff;
}


/* --- Module: games-skin-constellation.css --- */
/* ==========================================================================
   Games Skin — Constellation
   --------------------------------------------------------------------------
   A dusk skin: deep navy, thin gold linework, a handful of sparse gold star
   points (never a dense starfield — texture should stay texture, not noise).
   Best suited as an evening variant, but works as a standalone pick too.
   ========================================================================== */

[data-games-theme="constellation"] {
  --game-text: #F2EAD3;
  --game-ink: #D9B65C;
  --game-ink-solid: #0B1220;
  --game-paper: #0B1220;
  --game-surface: #131C2E;

  --game-red: #7A3B4A;
  --game-orange: #B5722A;
  --game-yellow: #D9B65C;
  --game-green: #3F6B5B;
  --game-teal: #2A6B78;
  --game-blue: #3A5B8B;
  --game-purple: #6B4F9B;
  --game-pink: #8B4F73;

  --game-driver: var(--game-orange);
  --game-passenger: var(--game-teal);

  --game-border-w: 1px;
  --game-radius-sm: 4px;
  --game-radius-md: 4px;
  --game-radius-lg: 6px;
  --game-radius-pill: 999px;

  --game-shadow-sm: none;
  --game-shadow-md: none;
  --game-shadow-lg: none;

  --game-font: 'Poppins', var(--font-ui, -apple-system, sans-serif);

  --game-fs-sm: 0.85rem;
  --game-fs-body: 1rem;
  --game-fs-md: 1.15rem;
  --game-fs-lg: 1.5rem;
  --game-fs-xl: 2rem;
  --game-fs-2xl: 2.4rem;
}

[data-games-theme="constellation"] .game-header-title {
  font-family: 'Fraunces', serif;
}

/* Sparse stars — 7 fixed points, never more. Pure CSS, no extra markup. */
[data-games-theme="constellation"] .games-shell-card {
  background-color: var(--game-paper);
  background-image:
    radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px),
    radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px),
    radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px),
    radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px),
    radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px),
    radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px),
    radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px);
  background-repeat: no-repeat;
  background-size: 3px 3px;
  background-position:
    12% 8%, 32% 16%, 22% 24%,
    78% 10%, 88% 18%,
    18% 88%, 82% 84%;
}

/* Cream text fails on this skin's gold tiles — near-black text on orange
   and yellow badges and plate cells. */
[data-games-theme="constellation"] .game-tile-badge[data-tile="orange"],
[data-games-theme="constellation"] .game-tile-badge[data-tile="yellow"],
[data-games-theme="constellation"] .game-grid-cell[data-tile="orange"],
[data-games-theme="constellation"] .game-grid-cell[data-tile="yellow"] {
  color: var(--game-ink-solid);
}

/* Cream text fails on this skin's driver orange too — the turn chip and
   the letter badge (both orange) read near-black instead. */
[data-games-theme="constellation"] .game-turn-chip.is-driver,
[data-games-theme="constellation"] .game-letter-badge {
  color: var(--game-ink-solid);
}

/* Battle Grid Pick's selected target and direction controls use the shared
   gold surface without a data-tile hook. Pair them with the midnight ink. */
[data-games-theme="constellation"] [data-game="battle-grid-pick"] [data-bgp-placement] [aria-pressed="true"] {
  color: var(--game-ink-solid);
}

[data-games-theme="constellation"] [data-game="battle-grid-pick"] .game-prompt-card {
  color: var(--game-ink-solid);
}

[data-games-theme="constellation"] [data-game="battle-grid-pick"] [data-bgp-complete][data-bgp-winner="player"] .game-prompt-card,
[data-games-theme="constellation"] [data-game="battle-grid-pick"] [data-bgp-pass-complete] .game-prompt-card {
  color: var(--game-text);
}

/* The Just One final score uses the same yellow family-word card. Keep its
   large score on the dark pairing used by the other gold surfaces. */
[data-games-theme="constellation"] [data-game="just-one"] .game-prompt-card.family-word,
[data-games-theme="constellation"] [data-game="word-assoc"] .game-prompt-card.family-word {
  color: var(--game-ink-solid);
}

/* Constellation's cream text disappears on the gold quote feedback card. */
[data-games-theme="constellation"] [data-game="quote"] .game-prompt-card.family-word {
  color: var(--game-ink-solid);
}

/* The gold Bee word prompt needs the same dark ink for readable copy. */
[data-games-theme="constellation"] [data-game="bee"] .game-prompt-card.family-word {
  color: var(--game-ink-solid);
}


/* --- Module: games-skin-concourse.css --- */
/* ==========================================================================
   Games Skin — Concourse
   --------------------------------------------------------------------------
   Airport-signage discipline (Schiphol/Mijksenaar), not an airport theme:
   black type, one accent, a strict grid, almost no metaphor. Also the
   universal "spoilsport" rendering — js/games-engine.js forces this skin
   whenever the app's existing dressing dial (Law 11) is set to `plain`,
   regardless of which flavor skin someone otherwise picked.
   ========================================================================== */

[data-games-theme="concourse"] {
  --game-text: #14151A;
  --game-ink: #14151A;
  --game-ink-solid: #14151A;
  --game-paper: #FAFAF8;
  --game-surface: #FFFFFF;

  /* Deliberately near-white tints, not saturated hues — Concourse doesn't
     color-code, it labels. Grid variety survives as a faint texture only. */
  --game-red: #F0ECE8;
  --game-orange: #C08A2E;
  --game-yellow: #F2F0E6;
  --game-green: #EAF0EA;
  --game-teal: #E6EFEF;
  --game-blue: #E9EDF2;
  --game-purple: #EEEAF0;
  --game-pink: #F2E9ED;

  --game-driver: var(--game-orange);
  --game-passenger: var(--game-orange);

  --game-border-w: 1px;
  --game-radius-sm: 0px;
  --game-radius-md: 0px;
  --game-radius-lg: 0px;
  --game-radius-pill: 0px;

  --game-shadow-sm: none;
  --game-shadow-md: none;
  --game-shadow-lg: none;

  --game-font: 'IBM Plex Sans', var(--font-ui, -apple-system, sans-serif);

  --game-fs-sm: 0.78rem;
  --game-fs-body: 0.95rem;
  --game-fs-md: 1.1rem;
  --game-fs-lg: 1.4rem;
  --game-fs-xl: 1.9rem;
  --game-fs-2xl: 2.1rem;
}

[data-games-theme="concourse"] .game-header {
  border-bottom-color: #DAD8D2;
}

[data-games-theme="concourse"] .game-header-title,
[data-games-theme="concourse"] .game-tag {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Flat label + a small square mark instead of a colored pill — text alone
   carries driver-vs-passenger, matching Concourse's "label, don't color-code"
   ethos. */
[data-games-theme="concourse"] .game-turn-chip {
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  gap: 10px;
  color: var(--game-text);
}

[data-games-theme="concourse"] .game-turn-chip.is-driver,
[data-games-theme="concourse"] .game-turn-chip.is-passenger {
  background: transparent;
}

[data-games-theme="concourse"] .game-turn-chip::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  background: var(--game-orange);
}

/* Solid flat plate buttons instead of colored pills. */
[data-games-theme="concourse"] .game-btn {
  background: var(--game-ink);
  color: var(--game-paper);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-games-theme="concourse"] .game-btn-danger {
  background: var(--game-surface);
  color: var(--game-ink);
  border-color: var(--game-ink);
}

/* The base component contract hardcodes white text on family-trivia/story/
   social, correct when those crayons are mid-to-dark saturated colors — but
   Concourse's crayons are deliberately near-white tints, so that white text
   would be nearly invisible. Force dark text back on here specifically. */
[data-games-theme="concourse"] .game-prompt-card.family-trivia,
[data-games-theme="concourse"] .game-prompt-card.family-story,
[data-games-theme="concourse"] .game-prompt-card.family-social {
  color: var(--game-text);
}

/* Same story for picked-wrong tiles: .is-bad pairs white text with red,
   invisible on Concourse's near-white red. Dark text here specifically. */
[data-games-theme="concourse"] .game-grid-cell.is-bad {
  color: var(--game-text);
}

/* And the danger button shares the pairing (white on red) — same fix. */
[data-games-theme="concourse"] .game-btn-danger {
  color: var(--game-text);
}

/* Selected Battle Grid Pick controls retain the shared pale-gold surface;
   switch their otherwise white signage ink back to black for legibility. */
[data-games-theme="concourse"] [data-game="battle-grid-pick"] [data-bgp-placement] [aria-pressed="true"] {
  color: var(--game-ink);
}

/* Stage action cells have a fixed two-line geometry (label + meaning) that
   copy must fit; plain signage keeps its plates but drops the uppercase
   tracking there so authored labels are not truncated. */
[data-games-theme="concourse"] .game-btn-cell,
[data-games-theme="concourse"] .game-btn-mini,
[data-games-theme="concourse"] .game-row-top > button {
  text-transform: none;
  letter-spacing: 0;
}


/* --- Module: games-skin-roundedstorybook.css --- */
/* ==========================================================================
   Games Skin — Rounded Storybook
   --------------------------------------------------------------------------
   This original presentation system operationalizes a studied animation
   art-direction process: every line is a shifted tint of the shape's OWN
   fill color — never a neutral black outline — and every shape is a big,
   friendly rounded rectangle. The rules are original and contain no
   third-party characters, names, designs, or production assets.

   Grid cells (License Plate Spotting) fall back to a uniform warm-ink border
   rather than a per-tile hue-matched one — their fill color is an inline
   custom property set by JS, and giving each of the 8 crayon names its own
   matching "line" tint there would mean touching the JS, which the shared
   component contract deliberately avoids per skin. Every class-based element
   (prompt cards, badges, chips, buttons) gets the full hue-matched treatment.
   ========================================================================== */

[data-games-theme="roundedstorybook"] {
  --game-text: #463522;
  --game-ink: #5B4630;
  --game-ink-solid: #5B4630;
  --game-paper: #FFF6E6;
  --game-surface: #FFFFFF;

  --game-red: #FF8FA3;
  --game-orange: #FFB067;
  --game-yellow: #FFD93D;
  --game-green: #8FDBA0;
  --game-teal: #4FD3C4;
  --game-blue: #7FB2FF;
  --game-purple: #C9A6FF;
  --game-pink: #FF8FBE;

  --game-driver: var(--game-orange);
  --game-passenger: var(--game-teal);

  --game-border-w: 4px;
  --game-radius-sm: 16px;
  --game-radius-md: 22px;
  --game-radius-lg: 32px;
  --game-radius-pill: 999px;

  --game-shadow-sm: 0 4px 0 rgba(91, 70, 48, 0.3);
  --game-shadow-md: 0 6px 0 rgba(91, 70, 48, 0.3);
  --game-shadow-lg: 0 8px 0 rgba(91, 70, 48, 0.3);

  --game-font: 'Poppins', var(--font-ui, -apple-system, sans-serif);

  --game-fs-sm: 0.85rem;
  --game-fs-body: 1rem;
  --game-fs-md: 1.15rem;
  --game-fs-lg: 1.5rem;
  --game-fs-xl: 2rem;
  --game-fs-2xl: 2.4rem;
}

/* Flattened two-tone "graphic space" backdrop behind the games hub, echoing
   the show's non-literal-perspective environments — a horizon, not a room. */
[data-games-theme="roundedstorybook"] .games-shell-card {
  background:
    radial-gradient(ellipse at 50% 130%, #D9ECCF 0%, #D9ECCF 40%, transparent 41%),
    var(--game-paper);
}

/* Colored lineart: each family's border/shadow is a shifted tint of its own
   fill, not the shared warm-ink default. */
[data-games-theme="roundedstorybook"] .game-prompt-card,
[data-games-theme="roundedstorybook"] .game-prompt-card.family-word {
  border-color: #B4790C;
  box-shadow: 0 6px 0 rgba(180, 121, 12, 0.35);
}
[data-games-theme="roundedstorybook"] .game-prompt-card.family-trivia {
  border-color: #2A5FA8;
  box-shadow: 0 6px 0 rgba(42, 95, 168, 0.35);
}
[data-games-theme="roundedstorybook"] .game-prompt-card.family-story {
  border-color: #6B3FA0;
  box-shadow: 0 6px 0 rgba(107, 63, 160, 0.35);
}
[data-games-theme="roundedstorybook"] .game-prompt-card.family-grid {
  border-color: #2E8B4F;
  box-shadow: 0 6px 0 rgba(46, 139, 79, 0.35);
}
[data-games-theme="roundedstorybook"] .game-prompt-card.family-social {
  border-color: #B23D6B;
  box-shadow: 0 6px 0 rgba(178, 61, 107, 0.35);
}

[data-games-theme="roundedstorybook"] .game-letter-badge {
  border-color: #C25E12;
  box-shadow: 0 5px 0 rgba(194, 94, 18, 0.35);
}

[data-games-theme="roundedstorybook"] .game-turn-chip.is-driver {
  border-color: #C25E12;
  box-shadow: 0 4px 0 rgba(194, 94, 18, 0.35);
}
[data-games-theme="roundedstorybook"] .game-turn-chip.is-passenger {
  border-color: #1B6E64;
  box-shadow: 0 4px 0 rgba(27, 110, 100, 0.35);
}

[data-games-theme="roundedstorybook"] .game-btn-primary {
  border-color: #2E8B4F;
  box-shadow: 0 5px 0 rgba(46, 139, 79, 0.35);
}
[data-games-theme="roundedstorybook"] .game-btn-danger {
  border-color: #B23D55;
  box-shadow: 0 5px 0 rgba(178, 61, 85, 0.35);
}
[data-games-theme="roundedstorybook"] .game-header-back,
[data-games-theme="roundedstorybook"] .game-header-end,
[data-games-theme="roundedstorybook"] .game-btn-secondary {
  border-color: #C25E12;
  box-shadow: 0 5px 0 rgba(194, 94, 18, 0.35);
}

/* Vertical-offset shadows read as "resting on the ground," not "cast
   diagonally" — the press state should collapse straight down too. */
[data-games-theme="roundedstorybook"] .game-tile:active,
[data-games-theme="roundedstorybook"] .game-header-back:active,
[data-games-theme="roundedstorybook"] .game-header-end:active,
[data-games-theme="roundedstorybook"] .game-btn:active {
  transform: translateY(3px);
  box-shadow: none;
}

/* White text fails AA on this skin's pink and red — dark text on social
   cards, picked-wrong tiles, and danger buttons. */
[data-games-theme="roundedstorybook"] .game-prompt-card.family-social,
[data-games-theme="roundedstorybook"] .game-grid-cell.is-bad,
[data-games-theme="roundedstorybook"] .game-btn-danger {
  color: var(--game-text);
}

/* The light trivia fill needs the warm storybook ink for readable quote copy. */
[data-games-theme="roundedstorybook"] [data-game="quote"] .game-prompt-card.family-trivia {
  color: var(--game-text);
}