/* Sandstone & ink: shared palette and lightweight surface treatments. */
:root {
  --paper: #bdb198;
  --card: #d8c9a9;
  --line: #887c63;
  --ink: #26312e;
  --muted: #343a31;
  --gold: #795620;
  --gold-light: #cbbb94;
  --blue: #365e67;
  --map-ink: #26312e;
  --map-gold: #d8b66b;
  --sand-search: #e3d5b9;
  --sand-input: #e3d5b9;
  --sand-record: #e3d4b4;
  --sand-unrecorded: #e3d4b4;
  --sand-rule: #a79777;
  --rust: #8a482a;
  --stamp-ink: #4b3021;
  --on-rust: #f0e5cc;
  --on-ink: #e7dabe;
  --muted-on-ink: #c9bda4;
}
body { background-color: var(--paper); color: var(--ink); }
.site-header { background-color: var(--ink); border-color: #586052; color: var(--on-ink); }
.site-header .brand { color: var(--on-ink); }
.site-header .brand-dot,
.site-header .brand svg circle { color: var(--map-gold); fill: var(--map-gold); }
.site-header .brand-sub { color: var(--muted-on-ink); border-color: #66705e; }
.site-header .nav-button { color: var(--muted-on-ink); }
.site-header .nav-button.active,
.site-header .nav-button[data-view].active { color: var(--on-ink); background-color: #3b4540; box-shadow: inset 0 -2px var(--map-gold); }
.site-header .guide-button { background-color: #cbbb94; border-color: #b3a37c; color: var(--ink); }
.site-header .updates-button { background-color: #b5c2bf; border-color: #91a5a0; color: var(--ink); }
.site-header .guide-button:hover { background-color: #d8c9a9; }
.site-header .updates-button:hover { background-color: #cad3cb; }
.site-header .account-nav { background-color: #3b4540; border-color: #737969; color: var(--on-ink); }
.primary-button { background-color: var(--rust); border-color: var(--rust); color: var(--on-rust); }
.primary-button:hover { background-color: #743d25; border-color: #743d25; }
.secondary-button { background-color: var(--card); border-color: var(--sand-rule); color: var(--ink); }
.secondary-button:hover { background-color: var(--sand-record); }
.expedition-heading .mode-switch,
.mode-switch { background-color: var(--sand-search); border-color: var(--line); }
.mode-switch .selected { background-color: var(--rust); color: var(--on-rust); }
.journal-filters.filters { background-color: var(--sand-search); border-color: var(--line); }
.journal-filters .filter-field input,
.journal-filters .filter-field select,
.journal-filters .journal-search input { background-color: var(--sand-input); border-color: var(--sand-rule); color: var(--ink); }
.journal-filters .catalogue-filter { background-color: var(--sand-input); border-color: var(--sand-rule); }
.journal-filters .catalogue-filter button[aria-pressed=true] { background-color: var(--rust); color: var(--on-rust); }
#journal-detailed-filters > summary { color: var(--ink); }
.specimen-card { background-color: var(--sand-unrecorded); border-color: #81785f; }
.specimen-card.explorer,
.specimen-card.sample,
.specimen-card.expert { background-color: var(--sand-record); }
.specimen-card .specimen-top { border-color: var(--sand-rule); }
.specimen-card .specimen-facts span { background-color: #b8ac8e; color: var(--ink); }
.profile-facts,
.game-grid .field-note-panel .profile-facts { background-color: #c5b89b; }
.game-grid > .tree-panel { background-color: var(--map-ink); border-color: #465044; color: var(--on-ink); }
.game-grid .tree-scroll { background-color: var(--map-ink); scrollbar-color: #92957d var(--map-ink); }
.game-grid .tree-top { border-color: #b8aa872e; }
.game-grid .tree-top .eyebrow,
.game-grid .guess-label > span,
.game-grid .support-heading { color: var(--muted-on-ink); }
.game-grid .tree-top strong,
.game-grid .guess-label label,
.game-grid .tree-tools button { color: var(--on-ink); }
.game-grid .zoom-controls,
.game-grid .zoom-controls button + button { border-color: #b8aa8755; }
.game-grid .tree-edge:not(.confirmed-edge) { stroke: #939580; }
.game-grid .tree-node .tree-label { fill: #344039; stroke: #919783; }
.game-grid .tree-node.confirmed-branch .tree-label { fill: #424838; stroke: var(--map-gold); }
.game-grid .tree-node.previous-guess .tree-label { fill: #303b35; stroke: #9fb4b3; }
.game-grid .tree-node.mystery-node .tree-label { fill: #384238; stroke: var(--map-gold); }
.game-grid .tree-node.answer-node .tree-label { fill: #e3c78e; stroke: var(--on-rust); }
.game-grid .tree-node:not(.answer-node) text { fill: var(--on-ink); }
.game-grid .tree-node.previous-guess circle { fill: #9fb4b3; }
.game-grid .tree-node.previous-guess circle + text { fill: var(--ink); }
.game-grid .tree-node.answer-node text { fill: var(--ink); }
.game-grid .tree-node.answer-node circle { fill: var(--ink); }
.game-grid .tree-node.answer-node circle + text { fill: var(--on-ink); }
.game-grid .tree-panel > .guess-panel { background-color: #303b34; border-color: #b8aa8740; }
.game-grid .guess-form input { background-color: var(--sand-input); border-color: var(--sand-rule); color: var(--ink); }
.game-grid .guess-form input::placeholder,
.journal-filters input::placeholder { color: var(--muted); }
.game-grid .guess-form .primary-button { background-color: var(--rust); border-color: var(--rust); color: var(--on-rust); }
.game-grid .guess-form .primary-button:hover { background-color: #743d25; }
.game-grid .guess-form > .guess-journal-link,
.game-grid .guess-panel .expedition-actions button { color: var(--muted-on-ink); }
.game-grid .guess-panel .expedition-actions .new-practice-button { color: var(--on-rust); border-color: var(--map-gold); }
.game-grid .compact-clues .clue-row { background-color: var(--card); border-color: var(--sand-rule); color: var(--ink); }
.game-grid .compact-clues .clue-text strong,
.game-grid .compact-clues .clue-value { color: var(--ink); }
.game-grid .compact-clues .clue-text > span { color: var(--muted); }
.game-grid .compact-clues .clue-mark { color: var(--stamp-ink); }
.game-grid .compact-clues .clue-obscured i { background-color: #756b5080; }
.game-grid .compact-clues .clue-action:hover:not(:disabled) { background-color: var(--sand-record); border-color: var(--gold); }
.game-grid .compact-clues .clue-action.revealed:disabled { background-color: var(--sand-record); border-color: var(--gold); }
.game-grid .field-note-panel { background-color: var(--card); border-color: var(--line); }
.game-grid .field-note-heading { border-color: var(--sand-rule); }
.game-grid .field-note-heading .eyebrow,
.game-grid .field-description,
.game-grid .branch-references summary,
.game-grid .field-note-panel > .action-link { color: var(--muted); }
.reference-pictures figure,
.journal-entry .reference-pictures figure,
.game-grid .reference-pictures figure,
.game-grid .reference-pictures figcaption,
.discovery-portrait .reference-pictures figcaption { background-color: var(--sand-input); border-color: var(--sand-rule); color: var(--ink); }
.reference-pictures img,
.game-grid .reference-pictures img,
.discovery-portrait img { background-color: var(--sand-input); }
.game-grid .result-panel { background-color: var(--sand-record); border-color: var(--gold); color: var(--ink); }
.game-grid .result-panel.lost { background-color: var(--card); border-color: var(--sand-rule); }
.game-grid .result-story .eyebrow { color: var(--muted); }
.game-grid .result-counts { border-color: var(--sand-rule); }
.daily-stamp,
.discovery-portrait .daily-stamp { color: var(--stamp-ink); border-color: var(--stamp-ink); outline-color: var(--stamp-ink); }
.game-grid .discovery-portrait .daily-stamp { background-color: #e3d4b4f2; }
.modal-content p, .modal-content li { color: var(--muted); }
.field-report { background-color: var(--card); border-color: var(--sand-rule); }
.suggestions button:hover,
.suggestions button.highlight { background-color: var(--sand-search); }
@media (max-width: 640px) {
  .site-header .header-utilities .nav-button { color: var(--muted-on-ink); background-color: transparent; border-color: transparent; }
}

/* Guess feedback is separate from the gold confirmed ancestry. */
.game-grid .tree-node.guess-red .tree-label { fill: #49352f; stroke: #eea294; stroke-width: 2; }
.game-grid .tree-node.guess-yellow .tree-label { fill: #494532; stroke: #e9c66c; stroke-width: 2; }
.game-grid .tree-node.guess-green .tree-label { fill: #34523e; stroke: #a7d9ad; stroke-width: 2; }
.game-grid .tree-node.guess-red circle { fill: #eea294; }
.game-grid .tree-node.guess-yellow circle { fill: #e9c66c; }
.game-grid .tree-node.guess-green circle { fill: #a7d9ad; }
.game-grid .tree-node[class*="guess-"] text { fill: var(--on-ink); }
.game-grid .tree-node[class*="guess-"] circle + text { fill: var(--ink); }
.reference-pictures figcaption { font-size: 11px; line-height: 1.5; }

/* One cached, static tile on the paper surfaces; content remains unobstructed. */
.specimen-card,
.game-grid .field-note-panel {
  background-image: url("textures/paper-grain-v2.png");
  background-size: 192px 192px;
  background-repeat: repeat;
}

/* The journal's search controls sit on a separate green cover. */
.journal-filters.filters { background-color: var(--ink); border-color: #526655; color: var(--on-ink); }
.journal-filters .filter-field label,
.journal-filters #journal-detailed-filters > summary { color: var(--on-ink); }
.journal-filters .filter-field p { color: var(--muted-on-ink); }
.journal-filters .catalogue-filter { background-color: #43594b; border-color: #81907a; }
.journal-filters .catalogue-filter button { color: var(--on-ink); }
.journal-filters .catalogue-filter button[aria-pressed=true] { color: var(--on-rust); }
.journal-filters .journal-filter-grid #locality-help { color: var(--muted-on-ink); }
.journal-filters #journal-detailed-filters > summary:focus-visible,
.journal-filters button:focus-visible { outline-color: var(--map-gold); }

/* Use the navigation ink consistently for information panels. */
.profile-facts,
.game-grid .field-note-panel .profile-facts { background-color: var(--ink); color: var(--on-ink); }
.profile-facts dt { color: var(--muted-on-ink); }
.profile-facts dd { color: var(--on-ink); }
.specimen-card.explorer,
.specimen-card.sample { border-color: var(--blue); }
.specimen-card.expert { border-color: var(--gold); }
.site-header .primary-navigation .nav-button:hover,
.site-header .primary-navigation .nav-button:focus-visible,
.site-header .account-nav:hover,
.site-header .account-nav:focus-visible { background-color: #4a574e; color: var(--on-ink); }

/* A readable dark footer frames both the game and the reference pages. */
.site-footer { background-color: var(--ink); border-color: #586052; color: var(--on-ink); }
.site-footer a,
.site-footer button,
.site-footer #notes-link,
.site-footer #report-button,
.site-footer #privacy-link { color: var(--on-ink); font-size: 13px; }
.site-footer a:hover,
.site-footer button:hover { color: #fff4db; background-color: #4a574e; }
.site-footer :focus-visible,
.site-footer #notes-link:focus-visible { outline-color: var(--map-gold); }

/* Wear affects a separate frame, so wording and dates stay crisp. */
@supports (mask-image: url("textures/stamp-wear-v1.png")) or (-webkit-mask-image: url("textures/stamp-wear-v1.png")) {
  .daily-stamp { position: relative; }
  .daily-stamp,
  .result-panel .daily-stamp,
  .entry-heading .daily-stamp,
  .discovery-portrait .daily-stamp,
  .game-grid .discovery-portrait .daily-stamp { border-color: transparent; outline-color: transparent; }
  .daily-stamp::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid currentColor;
    border-radius: inherit;
    outline: 1px solid currentColor;
    outline-offset: -6px;
    pointer-events: none;
    -webkit-mask-image: url("textures/stamp-wear-v1.png");
    mask-image: url("textures/stamp-wear-v1.png");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}
.journal-entry > .journal-media { background-color: var(--sand-input); background-image: url("textures/paper-grain-v2.png"); background-size: 192px 192px; }
.journal-entry .lineage span { background-color: var(--sand-input); border-color: var(--sand-rule); }

.page-heading h1 .title-dot { color: var(--rust); }

/* Paper utilities belong to the same palette; every main tab has a visible face. */
.site-header .guide-button,
.site-header .updates-button,
.site-header .header-utilities .nav-button { background-color: var(--sand-input); border-color: #b3a37c; color: var(--ink); }
.site-header .guide-button:hover,
.site-header .updates-button:hover,
.site-header .header-utilities .nav-button:hover { background-color: #f1e5cc; color: var(--ink); }
.site-header .primary-navigation .nav-button { background-color: #354039; border: 1px solid #929a85; color: var(--on-ink); }
.site-header .primary-navigation .nav-button.active { background-color: #49564c; border-color: var(--map-gold); box-shadow: inset 0 -2px var(--map-gold); }
.site-header .primary-navigation .nav-button:hover,
.site-header .primary-navigation .nav-button:focus-visible { background-color: #536052; color: #fff4db; }
.game-grid .result-panel #share-result { background-color: #f1e5cc; border-color: var(--gold); color: var(--ink); }
.game-grid .result-panel #share-result:hover { background-color: #fff2d9; border-color: var(--rust); }

/* One static matte-ink tile on the larger green surfaces. Background-only:
   lettering, controls and the tree retain their crisp existing appearance. */
.site-header,
.site-footer,
.journal-filters.filters,
.profile-facts,
.game-grid .field-note-panel .profile-facts,
.notes-page .exclusion-search,
.notes-page .notes-more {
  background-image: url("textures/matte-ink-v1.png");
  background-size: 256px 256px;
  background-repeat: repeat;
}