/* Shared ink and paper treatment. Geometry, touch targets and safe areas stay in style.css. */
:root {
  --ink:#3d3529; --muted:#81745b; --green:#40664a; --line:#d3c4a3; --cream:#fff6df;
  --comic-paper:#fff8e8; --comic-edge:#514532; --comic-shadow:3px 4px 0 #514532;
}
body { background:var(--cream); }
svg { stroke-width:2; }
.vignette { background:radial-gradient(ellipse at 50% 45%,transparent 55%,#e6cc8a22 84%,#b7995240); }
.topbar {
  background:radial-gradient(#b7a47a20 .65px,transparent .85px) 0 0 / 5px 5px,var(--comic-paper);
  border-bottom:2px solid var(--comic-edge); box-shadow:0 3px 0 #51453220;
}
.brand>span:nth-child(2) { font-weight:900; letter-spacing:1px; }
.brand small { letter-spacing:2.6px; font-weight:700; }
.brand-symbol { color:var(--ink); background:#f2cf72; border:1.5px solid var(--comic-edge); border-radius:9px 5px 10px 4px; box-shadow:2px 2px 0 var(--comic-edge); }
.season b,.wallet b { font-weight:800; }
.season small,.wallet small,.eyebrow { color:var(--muted); }
.season-tag { background:#f2cf72; color:var(--ink); border:1px solid var(--comic-edge); border-radius:4px; font-weight:800; }
.wallet { border-color:#c9b78d; }
.wallet>span { color:#b4882b; }
.icon-button,.view-controls .icon-button,#land-toggle,
.worker-pill,.evolution-pill,.market-pill,.ground-edit-hint,.place-confirm-button {
  border:1.5px solid var(--comic-edge); background:var(--comic-paper); color:var(--ink);
  box-shadow:2px 3px 0 var(--comic-edge); backdrop-filter:none;
}
.icon-button:hover,.view-controls .icon-button:hover,#land-toggle:hover,
.worker-pill:hover,.evolution-pill:hover,.market-pill:hover,.ground-edit-hint:hover { background:#f7dda0; }
.icon-button:active,.place-confirm-button:active { box-shadow:1px 1px 0 var(--comic-edge); }
.ground-edit-hint { font-weight:700; }
.save-hint { padding:4px 8px; color:#60553f; background:#fff8e8dd; border:1px solid #b7a47a; border-radius:5px; }
.action-menu,.land-focus,dialog,#build-palette,#build-hotbar {
  background:radial-gradient(#b7a47a18 .6px,transparent .9px) 0 0 / 5px 5px,var(--comic-paper);
  border:2px solid var(--comic-edge); border-radius:13px 9px 14px 8px;
  box-shadow:var(--comic-shadow); backdrop-filter:none;
}
dialog::backdrop { background:#403b325e; backdrop-filter:blur(2px); }
.menu-heading h2,.land-heading h2,dialog h2 { font-weight:850; }
.menu-heading small,.land-heading small { color:#8a672d; font-weight:700; }
#menu-description,#menu-worker,.meter-label,.quest-mini,.help-steps p,.help-keys { color:#75694f; }
.menu-heading .icon-button,.land-heading .icon-button { border:1px solid var(--comic-edge); background:#f1e5c9; box-shadow:none; }
.menu-pointer { background:var(--comic-paper); border-right:2px solid var(--comic-edge); border-bottom:2px solid var(--comic-edge); }
.menu-action,.primary-button,.secondary-button,.market-actions button,.market-back,.market-details-button,.palette-pick {
  border:1.5px solid var(--comic-edge); border-radius:7px; box-shadow:1px 2px 0 #51453255; font-weight:700;
}
.menu-action { background:#edf0d3; }
.menu-action:hover { background:#e1e8bc; }
.menu-action.main,.primary-button,.palette-pick { background:var(--green); color:#fff7df; }
.menu-action.secondary { border-color:#b7a47a; color:#75694f; box-shadow:none; }
.menu-action.discard { border-color:#a96551; color:#9b503d; }
.menu-action:disabled,.palette-pick:disabled { box-shadow:none; }
.meter-track { height:6px; background:#e6d9ba; border:1px solid #b7a47a; }
.meter-track i { background:#789858; }
.building-benefits,.market-position,.market-banner,.era-card,.settings-card,.support-content form,.build-palette-detail {
  background:#f6efd9; border:1px solid #c3b18a; color:var(--ink);
}
.land-option[aria-current="location"],.market-chip.active,.era-card.current { background:#e6edc9; border-color:#6f8053; }
.era-current { background:#d9e4b9; color:#435a35; border:1px solid #93a36c; }
.era-logo,.settings-about-mark { border:1px solid #b7a47a; background:#fff8e8; }
.settings-tabs { background:#f0e6cc; border-color:#c3b18a; }
.settings-tabs button[aria-selected=true] { border-color:var(--comic-edge); box-shadow:2px 2px 0 var(--comic-edge); }
#settings-language { border-color:#a89265; background:#fffaf0; }
#evolution-dialog .dialog-close { background:var(--comic-paper); box-shadow:0 0 0 5px var(--comic-paper); }
#build-hotbar { border-radius:12px; }
.build-slot,.palette-tile { border-color:#a99a76; background:#fffbef; color:var(--ink); border-radius:8px; }
.build-slot.selected,.palette-tile.selected { border-color:var(--comic-edge); background:#f4d784; box-shadow:inset 0 0 0 1px #fff4c4,2px 2px 0 var(--comic-edge); }
.build-slot.empty { border-color:#b8a67f; background:#f7efd9; color:#93815e; }
.build-slot.linked,.palette-tile.linked { background:#f7e3ab; border-color:#957035; }
.palette-preview,.palette-tile-model { background:radial-gradient(ellipse,#e4e9c9,#f5ecd5 75%); border-bottom:1px solid #d9cba7; }
#build-palette-tabs button { border:1px solid #c3b18a; background:#eee5cb; color:#75694f; font-weight:700; }
#build-palette-tabs [aria-selected=true] { background:var(--green); color:#fff7df; border-color:var(--comic-edge); }
#build-message { background:var(--comic-paper); color:var(--ink); border:1.5px solid var(--comic-edge); box-shadow:2px 2px 0 #51453255; }
#toast { border:2px solid var(--comic-edge); border-radius:9px 6px 11px 7px; background:#f5d47c; color:var(--ink); font-weight:700; box-shadow:3px 3px 0 var(--comic-edge); }
#loading { background:radial-gradient(#b7a47a35 .8px,transparent 1px) 0 0 / 7px 7px,var(--cream); }
#loading>span { color:var(--green); padding:16px; background:#f2d17b; border:2px solid var(--comic-edge); border-radius:18px 12px 20px 10px; box-shadow:4px 5px 0 var(--comic-edge); }
#loading b { color:var(--ink); font-weight:850; }
#loading small { color:var(--muted); }
button:focus-visible,a:focus-visible { outline-color:#b47b24; }
@media (max-height:550px) {
  .action-menu,.land-focus,dialog,#build-palette,#build-hotbar { box-shadow:2px 3px 0 var(--comic-edge); }
}
@media (prefers-reduced-motion:reduce) {
  .icon-button,.build-slot,#toast,.ground-edit-hint { transition:none; }
}