:root { --site-primary:#16263a; --site-accent:#3dbf91; --site-background:#0d1726; --site-ink:#e6edf5; --site-surface:#16263a; --site-line:#233248; --site-line-strong:#324766; --site-muted:#8ea0b5; --site-danger:#e2a17a; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: var(--site-background); color: var(--site-ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }
.shell { max-width: 1100px; margin: 0 auto; padding: 0 24px; width: 100%; }
.sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
a { color: var(--site-accent); text-decoration: none; word-break: break-word; overflow-wrap: anywhere; }
a:hover, a:focus { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.site-header { background: var(--site-surface); border-bottom: 1px solid var(--site-line); position: sticky; top: 0; z-index: 10; }
.site-header .shell { display: flex; gap: 24px; align-items: center; padding: 16px 24px; flex-wrap: wrap; }
.brand { font-weight: 700; color: var(--site-accent); font-size: 18px; }
/* Desktop: nav is always visible. The JS applies data-nav="desktop" to
   the header so the desktop rule below is always true; we do not rely on
   the absence of the [hidden] attribute, because the static HTML carries
   [hidden] as a no-JS fallback. The data-nav rule overrides the global
   [hidden] selector at desktop widths so the top nav never disappears
   when JS is present. */
.site-header[data-nav="desktop"] nav[hidden] { display: flex !important; }
.site-header[data-nav="desktop"] nav { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
.site-header nav { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
.site-header nav a { display: inline-flex; gap: 8px; align-items: center; color: var(--site-ink); padding: 6px 8px; border-radius: 6px; }
.site-header nav a span { background: var(--site-accent); color: var(--site-primary); border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.search-form { display: flex; gap: 8px; }
.search-form input { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--site-line-strong); min-width: 200px; background: var(--site-background); color: var(--site-ink); }
.search-form button { padding: 8px 12px; background: var(--site-accent); color: var(--site-primary); border: 0; border-radius: 6px; cursor: pointer; font-weight: 700; }
/* Desktop: hide the nav toggle. Mobile: show it. JS toggles .sr-only
   via data-nav so the toggle never accidentally appears at desktop. */
.nav-toggle { display: none; padding: 6px 10px; border: 1px solid var(--site-line-strong); border-radius: 6px; background: var(--site-surface); color: var(--site-ink); cursor: pointer; }
.site-header[data-nav="desktop"] .nav-toggle { display: none !important; }
.site-header[data-nav="mobile"] .nav-toggle { display: inline-block; }
main { padding: 32px 0 64px; }
.home-hero { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; padding: 32px 0; }
.eyebrow { font-size: 12px; letter-spacing: 0.08em; color: var(--site-accent); font-weight: 700; text-transform: uppercase; }
h1 { font-size: 36px; margin: 8px 0 16px; line-height: 1.15; color: var(--site-ink); }
h2, h3, h4 { color: var(--site-ink); }
.lede { font-size: 18px; color: var(--site-muted); margin: 0 0 16px; }
.hero-meta dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; background: var(--site-surface); border: 1px solid var(--site-line); border-radius: 12px; }
.hero-meta dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--site-muted); }
.hero-meta dd { font-size: 20px; font-weight: 700; margin: 0; color: var(--site-accent); }
.primary-action { display: inline-flex; gap: 8px; align-items: center; background: var(--site-accent); color: var(--site-primary); padding: 12px 18px; border-radius: 8px; font-weight: 700; }
.primary-action:hover { background: #4ed1a3; text-decoration: none; }
.section-head { display: flex; justify-content: space-between; padding: 24px 0 12px; border-bottom: 1px solid var(--site-line); margin-bottom: 16px; }
.section-head strong { color: var(--site-accent); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; padding: 16px; background: var(--site-surface); border: 1px solid var(--site-line); border-radius: 10px; color: var(--site-ink); }
.card:hover { border-color: var(--site-accent); text-decoration: none; }
.card-index { background: var(--site-accent); color: var(--site-primary); border-radius: 8px; padding: 8px 12px; font-weight: 700; align-self: start; }
.card h2 { margin: 0 0 8px; font-size: 18px; color: var(--site-accent); }
.card p { color: var(--site-muted); }
.card small { color: var(--site-muted); }
.game-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 0; padding: 0; }
.game-meta dt { font-size: 11px; text-transform: uppercase; color: var(--site-muted); }
.game-meta dd { margin: 0; font-weight: 600; color: var(--site-ink); }
.hub-hero { padding: 32px 0; }
.hub-nav, .hub-content, .related, .answer-directory, .answer-toc { margin: 32px 0; padding: 24px; background: var(--site-surface); border: 1px solid var(--site-line); border-radius: 12px; color: var(--site-ink); }
.hub-nav ul, .related ul, .answer-directory ul, .answer-toc ol { padding-left: 20px; }
.hub-nav a, .related a, .answer-directory a, .answer-toc a { color: var(--site-accent); }
.related li { margin: 8px 0; }
.breadcrumbs { margin: 0 0 16px; font-size: 14px; color: var(--site-muted); word-break: break-word; }
.breadcrumbs a { color: var(--site-accent); }
.answer-page { padding: 24px 0; }
.answer-direct { background: rgba(61,191,145,0.08); border-left: 4px solid var(--site-accent); padding: 12px 16px; margin: 16px 0; color: var(--site-ink); border-radius: 0 8px 8px 0; }
.source-list { margin: 32px 0; padding: 24px; background: var(--site-surface); border: 1px solid var(--site-line); border-radius: 12px; color: var(--site-ink); }
.source-list ul { padding-left: 20px; }
.source-list small { display: block; color: var(--site-muted); }
.source-list a { word-break: break-all; overflow-wrap: anywhere; }
.page-heading { padding: 16px 0 24px; border-bottom: 1px solid var(--site-line); margin-bottom: 24px; }
.directory-filters, .calendar-filters { display: flex; gap: 16px; flex-wrap: wrap; padding: 16px; background: var(--site-surface); border: 1px solid var(--site-line); border-radius: 12px; }
.directory-filters label, .calendar-filters label { display: flex; flex-direction: column; font-size: 12px; color: var(--site-muted); }
.directory-filters select, .calendar-filters select, .directory-filters input, .calendar-filters input { padding: 8px; border-radius: 6px; border: 1px solid var(--site-line-strong); min-width: 140px; font-family: inherit; background: var(--site-background); color: var(--site-ink); }
.directory-filters button, .calendar-filters button { background: var(--site-accent); color: var(--site-primary); border: 0; border-radius: 6px; padding: 8px 16px; cursor: pointer; align-self: end; font-weight: 700; }
.directory-filters .reset, .calendar-filters .reset { align-self: end; padding: 8px 16px; color: var(--site-accent); }
.empty { padding: 32px; background: var(--site-surface); border: 1px dashed var(--site-line-strong); border-radius: 12px; text-align: center; color: var(--site-muted); }
.calendar-table { width: 100%; border-collapse: collapse; margin: 16px 0; display: table; table-layout: auto; }
.calendar-table th, .calendar-table td { padding: 10px; border-bottom: 1px solid var(--site-line); text-align: left; color: var(--site-ink); word-break: break-word; }
.calendar-table caption { padding: 8px; text-align: left; color: var(--site-muted); }
.calendar-table a { color: var(--site-accent); word-break: break-all; }
.calendar-scroll { width: 100%; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.calendar-scroll .calendar-table { min-width: 640px; }
.tba-pill { background: transparent; border: 1px dashed var(--site-line-strong); color: var(--site-muted); padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.status-confirmed { background: rgba(61,191,145,0.12); border: 1px solid var(--site-accent); color: var(--site-accent); padding: 2px 8px; border-radius: 999px; font-size: 12px; margin-left: 4px; }
.status-planned { background: rgba(226,161,122,0.12); border: 1px solid var(--site-danger); color: var(--site-danger); padding: 2px 8px; border-radius: 999px; font-size: 12px; margin-left: 4px; }
.status-tentative { background: transparent; border: 1px dashed var(--site-line-strong); color: var(--site-muted); padding: 2px 8px; border-radius: 999px; font-size: 12px; margin-left: 4px; }
.latest-list { padding-left: 20px; }
.latest-list li { margin: 8px 0; }
.prose h2 { margin-top: 24px; color: var(--site-ink); }
.prose ul, .prose ol { padding-left: 20px; }
.prose code { background: var(--site-background); padding: 2px 6px; border-radius: 4px; color: var(--site-accent); word-break: break-word; }
pre, pre code { background: var(--site-background); color: var(--site-ink); padding: 12px; display: block; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, monospace; white-space: pre-wrap; word-break: break-word; }
.site-footer { border-top: 1px solid var(--site-line); padding: 24px 0; color: var(--site-muted); }
.site-footer nav { display: flex; gap: 16px; margin: 8px 0; flex-wrap: wrap; }
.site-footer .portal-verified { font-size: 12px; }
.correction-form { padding: 24px; background: var(--site-surface); border: 1px solid var(--site-line); border-radius: 12px; display: grid; gap: 12px; color: var(--site-ink); }
.correction-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--site-muted); gap: 4px; }
.correction-form input, .correction-form select, .correction-form textarea { padding: 8px; border-radius: 6px; border: 1px solid var(--site-line-strong); font-family: inherit; font-size: 14px; background: var(--site-background); color: var(--site-ink); }
.correction-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.correction-actions button { padding: 8px 16px; border-radius: 6px; border: 0; cursor: pointer; font-weight: 700; }
#correction-copy { background: var(--site-accent); color: var(--site-primary); }
#correction-download { background: var(--site-line-strong); color: var(--site-ink); }
#correction-reset { background: transparent; color: var(--site-muted); border: 1px solid var(--site-line-strong); }
.search-empty { padding: 32px; text-align: center; background: var(--site-surface); border: 1px dashed var(--site-line-strong); border-radius: 12px; color: var(--site-muted); }
.search-empty a { color: var(--site-accent); }
.search-loading { padding: 24px; text-align: center; color: var(--site-muted); }
.search-error { padding: 24px; text-align: center; background: rgba(226,161,122,0.12); border: 1px dashed var(--site-danger); border-radius: 12px; color: var(--site-danger); }
@media (max-width: 800px) {
  .home-hero { grid-template-columns: 1fr; }
  .site-header .shell { flex-wrap: wrap; }
  .site-header[data-nav="mobile"] .site-header nav, .site-header nav { flex-basis: 100%; flex-direction: column; align-items: stretch; }
  .site-header[data-nav="mobile"] nav[aria-expanded="false"] { display: none; }
  .site-header[data-nav="mobile"] nav[aria-expanded="true"] { display: flex; }
  .calendar-scroll .calendar-table { min-width: 540px; }
}
@media (max-width: 480px) {
  .shell { padding: 0 16px; }
  .hero-meta dl { grid-template-columns: 1fr; }
  .game-meta { grid-template-columns: 1fr; }
  .directory-filters, .calendar-filters { flex-direction: column; align-items: stretch; }
  .directory-filters button, .calendar-filters button { align-self: stretch; }
  h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Game sections carry their own editorial identity, while site navigation
   remains shared. These are original CSS treatments, not borrowed game art. */
.game-zone { background: var(--site-background); color: var(--site-ink); border: 1px solid var(--site-line); padding: clamp(18px, 3.4vw, 42px); border-radius: 10px; min-width: 0; }
.game-zone[data-game-theme="frozen-field"], .game-card[data-game-theme="frozen-field"] { --site-background:#eaf1f0; --site-surface:#dbe7e7; --site-ink:#20383e; --site-accent:#276772; --site-muted:#47616a; --site-line:#afc6ca; }
.game-zone[data-game-theme="forest-archive"], .game-card[data-game-theme="forest-archive"] { --site-background:#172620; --site-surface:#23352a; --site-ink:#eef0de; --site-accent:#bad1a0; --site-muted:#b0beac; --site-line:#586650; }
.game-zone[data-game-theme="wuxia-dossier"], .game-card[data-game-theme="wuxia-dossier"] { --site-background:#201e1c; --site-surface:#302c28; --site-ink:#efe9df; --site-accent:#d9b48a; --site-muted:#c2b8a8; --site-line:#6e5b47; }
.game-zone[data-game-theme="woodland-handbook"], .game-card[data-game-theme="woodland-handbook"] { --site-background:#f4eedb; --site-surface:#e4e8d2; --site-ink:#30432d; --site-accent:#3b6335; --site-muted:#59614c; --site-line:#a9b194; }
.game-zone[data-game-theme="extraction-briefing"], .game-card[data-game-theme="extraction-briefing"] { --site-background:#222626; --site-surface:#303737; --site-ink:#edf1ec; --site-accent:#d4bd80; --site-muted:#bcc4bd; --site-line:#666b59; }
.game-zone[data-game-theme="strategy-archive"], .game-card[data-game-theme="strategy-archive"] { --site-background:#252a32; --site-surface:#353b46; --site-ink:#f1eee7; --site-accent:#dec8a0; --site-muted:#c5c9ce; --site-line:#716c60; }
.game-zone[data-game-theme="trail-journal"], .game-card[data-game-theme="trail-journal"] { --site-background:#f4efdc; --site-surface:#e9e3cb; --site-ink:#3e4431; --site-accent:#626e32; --site-muted:#62654c; --site-line:#a7ad82; }
.game-zone[data-game-theme="puzzle-notebook"], .game-card[data-game-theme="puzzle-notebook"] { --site-background:#f1e9dc; --site-surface:#e6dcce; --site-ink:#493d3b; --site-accent:#a93e43; --site-muted:#71605c; --site-line:#b7a399; }
.game-zone[data-game-theme="cascade-signal"], .game-card[data-game-theme="cascade-signal"] { --site-background:#222b29; --site-surface:#303e39; --site-ink:#ecf1e7; --site-accent:#bad09b; --site-muted:#b9c9be; --site-line:#667d68; }
.zone-masthead { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; border-bottom:2px solid var(--site-accent); padding-bottom:14px; font:600 12px/1.5 ui-monospace, SFMono-Regular, monospace; letter-spacing:.08em; text-transform:uppercase; }
.zone-masthead span { color:var(--site-accent); }
.zone-nav { display:flex; flex-wrap:wrap; gap:10px 24px; padding:18px 0 0; font-size:14px; }
.zone-nav a { padding:4px 0; border-bottom:1px solid var(--site-line); }
.game-zone .hub-hero { padding:30px 0 12px; }
.game-zone h1 { font-size:clamp(30px, 4vw, 46px); max-width:24ch; }
.game-zone p:not(.eyebrow), .game-zone .answer-page > ul { max-width:70ch; }
.game-zone .game-meta { gap:16px 28px; border-top:1px solid var(--site-line); padding-top:20px; }
.game-zone .hub-nav, .game-zone .source-list, .game-zone .answer-directory, .game-zone .answer-toc, .game-zone .related { border-radius:4px; }
.game-zone .hub-nav li { padding:12px 0; border-bottom:1px solid var(--site-line); }
.game-zone .hub-nav li:last-child { border-bottom:0; }
.game-zone .hub-nav small, .game-zone .related small { display:block; color:var(--site-muted); margin-top:6px; }
.game-zone .answer-direct { background:var(--site-surface); border-radius:0; font-size:18px; padding:20px; }
.game-zone h2[id], .game-zone h3[id], .game-zone section[id] { scroll-margin-top:170px; }
.game-zone .breadcrumbs { margin-top:18px; }
.game-zone[data-game-theme="frozen-field"] { border-radius:0; border-top:6px solid var(--site-accent); }
.game-zone[data-game-theme="frozen-field"] .game-meta { font-family:ui-monospace, SFMono-Regular, monospace; }
.game-zone[data-game-theme="forest-archive"] .hub-hero { border-left:3px solid var(--site-accent); padding-left:22px; margin-top:22px; }
.game-zone[data-game-theme="forest-archive"] .zone-masthead { border-bottom-style:dashed; }
.game-zone[data-game-theme="wuxia-dossier"] h1, .game-zone[data-game-theme="wuxia-dossier"] h2 { font-family:Georgia, 'Times New Roman', serif; font-weight:500; }
.game-zone[data-game-theme="wuxia-dossier"] { border-radius:0; border-left:6px solid var(--site-accent); }
.game-zone[data-game-theme="woodland-handbook"] { border-radius:24px 6px 24px 6px; }
.game-zone[data-game-theme="woodland-handbook"] .hub-nav, .game-zone[data-game-theme="woodland-handbook"] .source-list { border-radius:18px; }
.game-zone[data-game-theme="extraction-briefing"] { border-radius:0; border-top:6px double var(--site-accent); }
.game-zone[data-game-theme="extraction-briefing"] h1, .game-zone[data-game-theme="extraction-briefing"] .zone-nav { text-transform:uppercase; letter-spacing:.025em; }
.game-zone[data-game-theme="strategy-archive"] .game-meta { grid-template-columns:repeat(3,minmax(0,1fr)); }
.game-zone[data-game-theme="strategy-archive"] .hub-nav { border-left:6px solid var(--site-accent); }
.game-zone[data-game-theme="trail-journal"] { border-radius:4px; border-left:6px solid var(--site-accent); }
.game-zone[data-game-theme="trail-journal"] h1 { font-family:Georgia, 'Times New Roman', serif; }
.game-zone[data-game-theme="trail-journal"] .zone-nav a { border:1px solid var(--site-line); border-radius:20px; padding:6px 14px; }
.game-zone[data-game-theme="puzzle-notebook"] { border-radius:3px 16px 16px 3px; border-left:7px double var(--site-accent); }
.game-zone[data-game-theme="puzzle-notebook"] h1 { font-family:Georgia, 'Times New Roman', serif; font-style:italic; }
.game-zone[data-game-theme="puzzle-notebook"] .source-list { border-style:dashed; }
.game-zone[data-game-theme="cascade-signal"] { border-radius:0; font-family:ui-monospace, SFMono-Regular, monospace; }
.game-zone[data-game-theme="cascade-signal"] .zone-masthead { border-top:2px solid var(--site-accent); padding-top:12px; }
.game-zone[data-game-theme="cascade-signal"] h1 { letter-spacing:-.055em; text-transform:uppercase; }
.game-card[data-game-theme] { background:var(--site-background); border-left:4px solid var(--site-accent); }
.game-card[data-game-theme] .card-index { background:var(--site-surface); color:var(--site-accent); border:1px solid var(--site-line); }
.catalog-links { display:flex; gap:8px 24px; flex-wrap:wrap; padding:12px 0; }
.catalog-links a { padding:8px 0; border-bottom:1px solid var(--site-line); }
@media (max-width:600px) {
  .game-zone[data-game-theme="strategy-archive"] .game-meta { grid-template-columns:1fr; }
  .game-zone .hub-nav, .game-zone .source-list, .game-zone .answer-toc, .game-zone .related, .game-zone .answer-directory { padding:16px; }
  .game-zone .hub-nav ul, .game-zone .source-list ul { padding-left:16px; }
  .game-zone .zone-masthead { letter-spacing:.035em; }
  .game-zone[data-game-theme="forest-archive"] .hub-hero { padding-left:14px; }
}