/* Whole-site art direction. Shared layout and type remain deliberately stable. */
:root {
  --surface:#e7e7da; --raised:#e5e6d7; --control:#e3e6d9;
  --button-bg:#233b33; --button-ink:#f2efe6; --bright-metal:#efc889;
  --hero-shadow:11,24,18; --trim:#a8854b;
  --map-sea:#263d35; --map-ground:#78806a; --map-ink:#eee3c4;
  --grain:repeating-linear-gradient(125deg,transparent 0 27px,#35544804 28px 29px,transparent 30px 57px);
}
html[data-age="0"] {
  --paper:#f4eee1; --surface:#e9dfca; --raised:#e8dcc4; --control:#e0d4bc;
  --ink:#443827; --muted:#6a5c46; --line:#cfc0a4; --accent:#855023;
  --dark:#403528; --button-bg:#463923; --button-ink:#fff0d2; --trim:#a17943;
  --bright-metal:#f4d496; --hero-shadow:38,27,12;
  --map-sea:#39382b; --map-ground:#91815e; --map-ink:#f0dfb5;
  --grain:repeating-linear-gradient(0deg,transparent 0 11px,#78532906 12px,transparent 13px 29px);
}
html[data-age="1"] {
  --paper:#f5ece1; --surface:#ecddcc; --raised:#ead6c1; --control:#e7d2bd;
  --ink:#4a3329; --muted:#765844; --line:#cfb59e; --accent:#944a29;
  --dark:#493329; --button-bg:#68412f; --button-ink:#fff0de; --trim:#b47046;
  --bright-metal:#f1bd86; --hero-shadow:47,27,18;
  --map-sea:#403b30; --map-ground:#998164; --map-ink:#f2ddbd;
  --grain:repeating-linear-gradient(115deg,transparent 0 31px,#8f472807 32px,transparent 33px 65px);
}
html[data-age="2"] {
  --paper:#f1edda; --surface:#e5dfc4; --raised:#e2d8b5; --control:#ded3ac;
  --ink:#454127; --muted:#625b41; --line:#c7bd97; --accent:#785923;
  --dark:#3d3c27; --button-bg:#56502d; --button-ink:#fff2d5; --trim:#a2843f;
  --bright-metal:#eed39a; --hero-shadow:34,31,15;
  --map-sea:#383e2d; --map-ground:#989067; --map-ink:#eee4b8;
  --grain:repeating-linear-gradient(90deg,transparent 0 53px,#80602506 54px,transparent 55px 108px);
}
html[data-age="3"] {
  --paper:#e9eae5; --surface:#dce0da; --raised:#d4dbd5; --control:#ccd4ce;
  --ink:#2f3d39; --muted:#4c5c55; --line:#b4c0b8; --accent:#4b635b;
  --dark:#293631; --button-bg:#354a41; --button-ink:#f1f1e8; --trim:#84918c;
  --bright-metal:#dce6d7; --hero-shadow:17,29,25;
  --map-sea:#2b3736; --map-ground:#788783; --map-ink:#e1e7dc;
  --grain:repeating-linear-gradient(135deg,transparent 0 35px,#29403906 36px,transparent 37px 72px);
}
html[data-age="4"] {
  --paper:#f2efe6; --surface:#e7e7da; --raised:#e1e4d5; --control:#e0e5d7;
  --ink:#233b33; --muted:#62665b; --line:#c8cebc; --accent:#8b512f;
  --dark:#233b33; --button-bg:#233b33; --button-ink:#f2efe6; --trim:#a8854b;
  --bright-metal:#f1c782; --hero-shadow:11,24,18;
}
html[data-age="5"] {
  color-scheme:dark;
  --paper:#252923; --surface:#2e332b; --raised:#353b30; --control:#404638;
  --ink:#f1e8d1; --muted:#c8c5b1; --line:#5b6250; --accent:#e0b877;
  --dark:#1a211c; --button-bg:#ddc28b; --button-ink:#24291e; --trim:#bd9352;
  --bright-metal:#f2cc89; --hero-shadow:21,25,17;
  --map-sea:#202a24; --map-ground:#7b8061; --map-ink:#e9d8ab;
  --grain:repeating-linear-gradient(0deg,transparent 0 3px,#c4b18d04 4px,transparent 5px 9px);
}
html[data-age="6"] {
  --paper:#e9eff0; --surface:#dce6e9; --raised:#d3e1e5; --control:#c9dae1;
  --ink:#253f50; --muted:#485f6c; --line:#afc4cf; --accent:#825b2a;
  --dark:#223b4b; --button-bg:#26475b; --button-ink:#f2f0df; --trim:#b49a60;
  --bright-metal:#ead3a0; --hero-shadow:12,28,42;
  --map-sea:#243744; --map-ground:#7c9096; --map-ink:#e4e6d9;
  --grain:repeating-linear-gradient(90deg,transparent 0 59px,#345b7306 60px,transparent 61px 120px);
}
html[data-age="7"] {
  --paper:#eef0ed; --surface:#e1e5e1; --raised:#d9dfda; --control:#d0d9d3;
  --ink:#2c3c3b; --muted:#4a5e56; --line:#b5c2ba; --accent:#426960;
  --dark:#243633; --button-bg:#2d4c44; --button-ink:#f1f5ed; --trim:#879f96;
  --bright-metal:#d6e6df; --hero-shadow:14,29,29;
  --map-sea:#253733; --map-ground:#82958a; --map-ink:#e2ece4;
  --grain:linear-gradient(90deg,#38564b04 1px,transparent 1px),linear-gradient(#38564b04 1px,transparent 1px);
}
body { background-color:var(--paper); background-image:var(--grain); }
.masthead { position:relative; }
.masthead::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--trim) 22%,var(--trim) 78%,transparent); opacity:.65; }
.brand img { border-radius:50%; box-shadow:0 0 0 1px var(--trim); }
.hero-art { background-image:linear-gradient(90deg,rgba(var(--hero-shadow),.68),rgba(var(--hero-shadow),.12) 80%),linear-gradient(0deg,rgba(var(--hero-shadow),.8),transparent 32%),url('/assets/ages-panorama-repaired.webp'); }
.hero-content h1 em { color:var(--bright-metal); }
.hero { border-bottom:3px solid var(--trim); }
.button { background:var(--button-bg); color:var(--button-ink); box-shadow:inset 0 0 0 3px var(--button-bg),inset 0 0 0 4px color-mix(in srgb,var(--button-ink) 22%,transparent); }
.button.cream { background:#f1e8d4; color:#253e35; box-shadow:inset 0 0 0 3px #f1e8d4,inset 0 0 0 4px #a58a5655; }
.world-strip,.age-section,.status-section { background-color:var(--surface); background-image:var(--grain); }
.world-strip { border-top:1px solid var(--trim); }
.age-section,.status-section { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.guide-note { background-color:var(--raised); background-image:var(--grain); border-top:3px solid var(--trim); }
.age-buttons button { color:var(--muted); border-bottom-color:var(--line); }
.age-buttons button[aria-pressed=true] { color:var(--ink); border-bottom-color:var(--accent); }
.atlas-shell,.atlas-tools,.map-legend,.status-grid,.status-grid>div+div,.inventory,.mod-row,.status-grid>div:nth-child(n+3) { border-color:var(--line); }
.atlas-shell { border-top:3px solid var(--trim); }
.canvas-wrap { background:var(--map-sea); }
.canvas-wrap canvas { background:var(--map-sea); }
.compass { color:var(--map-ink); opacity:.7; right:22px; top:25px; }
.map-caption { background:var(--map-sea); color:var(--map-ink); border:1px solid color-mix(in srgb,var(--map-ink) 22%,transparent); font-size:10px; padding:9px 12px; }
.faction-button .swatch { border-radius:50%; width:8px; height:8px; box-shadow:0 0 0 3px var(--surface); }
.faction-button[aria-pressed=true] { color:var(--accent); }
.atlas-tools { background:var(--surface); }
.map-legend { background:var(--paper); }
.map-buttons button { background:var(--control); color:var(--ink); }
.inventory input { background:var(--paper); border-color:var(--line); color:var(--ink); }
.inventory input::placeholder { color:var(--muted); opacity:1; }
.join-section { border-block:3px double var(--trim); }
.join-section .eyebrow,.join-steps li>span { color:var(--bright-metal); }
.status-grid strong { color:var(--ink); }
.footer-top { border-top:3px double var(--trim); }
.section-heading .eyebrow,.world-intro>.eyebrow { color:var(--accent); }
.theme-preview { position:fixed; z-index:5; right:22px; bottom:22px; max-width:calc(100% - 44px); padding:12px 16px; display:flex; align-items:center; gap:20px; background:var(--paper); color:var(--ink); border:1px solid var(--trim); box-shadow:0 4px 22px #0002; font-size:11px; }
.theme-preview strong { font-weight:600; }
.theme-preview button { color:var(--ink); background:transparent; border-bottom:1px solid currentColor; padding:8px 0; font-size:11px; white-space:nowrap; }
[hidden] { display:none!important; }
@media(max-width:800px) { .theme-preview { right:12px; bottom:12px; max-width:calc(100% - 24px); gap:12px; font-size:10px; padding:8px 12px; } .theme-preview button { font-size:10px; } }