/* Tidemark base styles. Theme tokens live on :root; the diorama UI uses the
   pixel font, the chart register uses the serif. */
@font-face { font-family: "Pixelify Sans"; src: url("./fonts/pixelify-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("./fonts/pixelify-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* "Tidemark UI": Pixelify Sans for letters, Source Serif 4 semibold for digits.
   Pixelify's 5 and 8 are hard to tell apart at UI sizes, and numbers matter here.
   The tilde (U+007E) goes to the serif too: Pixelify draws "~" as a flat dash, so
   "~2048" read as "-2048" on every forecast (playtest 2). */
@font-face { font-family: "Tidemark UI"; src: url("./fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); unicode-range: U+0030-0039, U+0025, U+0024, U+007E; font-weight: 400; font-display: swap; }
@font-face { font-family: "Tidemark UI"; src: url("./fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); unicode-range: U+0030-0039, U+0025, U+0024, U+007E; font-weight: 600; font-display: swap; }
@font-face { font-family: "Tidemark UI"; src: url("./fonts/pixelify-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-002F, U+003A-007D, U+007F-00FF, U+2000-206F; font-weight: 400; font-display: swap; }
@font-face { font-family: "Tidemark UI"; src: url("./fonts/pixelify-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-002F, U+003A-007D, U+007F-00FF, U+2000-206F; font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("./fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("./fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("./fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --ink: #1f2a30;
  --paper: #f3ecda;
  --ui-bg: #102a33;
  --ui-fg: #f2ead8;
  --accent: #d9a441;
  --magenta: #b0287a;
  --font-pixel: "Tidemark UI", "Pixelify Sans", ui-monospace, monospace;
  --font-serif: "Source Serif 4", Georgia, serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #d9cfb8; --paper: #0e1a22; --magenta: #d66aa8; }
}
:root[data-theme="dark"] { --ink: #d9cfb8; --paper: #0e1a22; --magenta: #d66aa8; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ui-bg); color: var(--ui-fg); font-family: var(--font-pixel); }
#app { position: fixed; inset: 0; overflow: hidden; }
canvas.pixel { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

/* ---- Buttons ---- */
.btn { font: inherit; font-size: 1rem; min-height: 44px; padding: 0.55rem 1.1rem; border-radius: 4px; border: 2px solid var(--ui-fg); background: transparent; color: var(--ui-fg); cursor: pointer; }
.btn:hover { background: rgba(242, 234, 216, 0.1); }
.btn:focus-visible, .setup-option:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #1a1408; font-weight: 600; }
.btn-primary:hover { background: #e6b65a; }

/* ---- Setup screen ---- */
.setup { position: relative; z-index: 2; max-width: 34rem; margin: 0 auto; padding: max(2rem, env(safe-area-inset-top)) 1rem 2rem; display: flex; flex-direction: column; gap: 1rem; max-height: 100%; overflow-y: auto; }
.setup-title { font-size: clamp(2.5rem, 9vw, 4rem); font-weight: 600; margin: 0; letter-spacing: 0.02em; color: var(--ui-fg); }
.setup-lede { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.5; margin: 0; }
.setup-options { display: grid; gap: 0.5rem; }
.setup-option { font: inherit; text-align: left; display: grid; gap: 0.15rem; padding: 0.7rem 0.9rem 0.7rem 2.4rem; min-height: 44px; border-radius: 4px; border: 2px solid rgba(242, 234, 216, 0.35); background: rgba(16, 42, 51, 0.75); color: var(--ui-fg); cursor: pointer; position: relative; }
.setup-option::before { content: ""; position: absolute; left: 0.8rem; top: 0.95rem; width: 0.8rem; height: 0.8rem; border: 2px solid var(--ui-fg); border-radius: 50%; }
.setup-option[aria-checked="true"] { border-color: var(--accent); }
.setup-option[aria-checked="true"]::before { background: var(--accent); border-color: var(--accent); }
.setup-option-label { font-weight: 600; }
.setup-option-hint { font-family: var(--font-serif); font-size: 0.95rem; opacity: 0.85; }
.setup-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.setup-seed { font-family: var(--font-serif); font-size: 0.9rem; opacity: 0.7; margin: 0; }

/* ---- chart: the engineer's nautical chart (src/chart) ---- */
body.chart-page { background: #f4eddb; }
@media (prefers-color-scheme: dark) { body.chart-page { background: #0b1317; } }
.chart-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }

/* ---- art: diorama and gallery (owned by the art track) ---- */
body.diorama-page { background: #17142b; overflow: hidden; }
.diorama-stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
.diorama-stage canvas { position: absolute; left: 0; top: 0; cursor: grab; }
.diorama-caption { position: fixed; left: 12px; bottom: 8px; margin: 0; font-family: var(--font-pixel); font-size: 14px; color: #f2ead8; text-shadow: 0 1px 0 #17142b; pointer-events: none; }
body.gallery { background: #f3ecda; color: #1f2a30; font-family: var(--font-pixel); padding: 16px; height: auto; }
@media (prefers-color-scheme: dark) { body.gallery { background: #0e1a22; color: #e8dfca; } }
body.gallery h1 { font-size: 22px; margin: 0 0 4px; }
body.gallery h2 { font-size: 16px; margin: 20px 0 8px; }
.gallery-note { font-family: var(--font-serif); margin: 0 0 8px; max-width: 60ch; }
.gallery-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.gallery-item { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.gallery-pair { display: flex; gap: 2px; align-items: flex-end; }
.gallery-item figcaption { font-size: 11px; max-width: 220px; }
.gallery-sprite { image-rendering: pixelated; }
.gallery-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; }
.gallery-swatch { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.gallery-chip { width: 20px; height: 20px; display: inline-block; border: 1px solid #0003; }
.gallery-cycles { display: grid; gap: 4px; }
.gallery-cycle { display: flex; gap: 8px; align-items: center; font-size: 12px; }