/* Themes: each overrides the tokens defined at the top of app.css (and a few shapes).
   The original "boxed" theme (a 1970s-80s boxed wargame: printed paper map, cardboard counters)
   is app.css itself, with dark mode for the UI; "imperii" (the painted map) is the default.
   Artwork for any theme can be registered in js/themes.js; see docs/art-direction.md for each theme's brief. */

.theme-picker { width: auto; font-size: .85rem; padding: .2rem .3rem; max-width: min(14rem, 42vw); }

/* Every artwork-bearing bundled theme ships the complete prototype terrain set. The
   original boxed theme intentionally keeps the drawn fallbacks from app.css. */
:root:is([data-theme="staff"], [data-theme="modern"], [data-theme="retro"], [data-theme="imperii"]) {
  --t-plains: url(#tex-plains);
  --t-forest: url(#tex-forest);
  --t-hills: url(#tex-hills);
  --t-mountains: url(#tex-mountains);
  --t-city: url(#tex-city);
  --t-water: url(#tex-water);
}
:root:is([data-theme="staff"], [data-theme="modern"], [data-theme="retro"], [data-theme="imperii"]) .glyph-forest,
:root:is([data-theme="staff"], [data-theme="modern"], [data-theme="retro"], [data-theme="imperii"]) .glyph-hills,
:root:is([data-theme="staff"], [data-theme="modern"], [data-theme="retro"], [data-theme="imperii"]) .glyph-mountains { display: none; }

/* ---- Original boxed wargame (deliberately artwork-free) --------------- */
:root[data-theme="boxed"] {
  --font-display: "American Typewriter", "Courier Prime", "Courier New", Courier, monospace;
}
:root[data-theme="boxed"] .topbar h1 { letter-spacing: .02em; }

/* ---- Military staff map ------------------------------------------------ */
/* Operations room: an olive-drab desk, a topographic sheet under acetate, grease-pencil
   blue (friendly) and red (enemy), stencilled labels. */
:root[data-theme="staff"] {
  color-scheme: dark;
  --bg: #2b2e22;
  --panel: #363a2b;
  --ink: #e9e4cf;
  --muted: #b1ab8f;
  --line: #545940;
  --accent: #d9a441;
  --accent-ink: #1d1f16;
  --error: #ff8a70;
  --info: #7fb2d9;
  --focus: #ffd84d;
  --font-display: Stencil, "Stencil Std", "Big Caslon", Impact, "Arial Narrow", sans-serif;
  --font-map: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", sans-serif;
  --radius: 2px;
  --counter-radius: 1px;

  --p0-face: #7fa6cf;
  --p0-ink: #0c1a2c;
  --p1-face: #d4735e;
  --p1-ink: #2a0b05;
  --neutral-face: #b9b49e;
  --neutral-ink: #34321f;

  --hex-line: rgb(80 90 60 / .55);
  --hex-line-width: .6;
  --hex-number: #7c8062;
  --t-plains: #dfe0c2;
  --t-forest: #b9cf9c;
  --t-hills: #d8cc9e;
  --t-mountains: #c4b89d;
  --t-city: #e6e0c8;
  --t-water: #b6d3d6;
  --unexplored: #3b3f2e;
  --unexplored-line: #454a36;
  --fogged: rgb(40 45 30 / .35);
  --glyph-forest: #6f9458;
  --glyph-hills: #9c8a57;
  --glyph-mountains: #857a62;
  --city-block: #26281c;
  --city-block-line: #f1ecd4;
  --road: #7a4b2a;
  --river: #2f73a6;
  --label: #1f2117;
  --label-halo: #eeebd2;
  --capital-star: #b3261e;
}
:root[data-theme="staff"] body {
  background-color: var(--bg);
  background-image: url("../themes/staff/canvas.webp");
  background-size: 384px 256px;
  background-blend-mode: multiply;
}
:root[data-theme="staff"] .topbar {
  background-color: #22251b;
  background-image: url("../themes/staff/canvas.webp");
  background-size: 384px 256px;
  background-blend-mode: multiply;
  border-bottom: 2px solid #1a1c14;
}
:root[data-theme="staff"] h1, :root[data-theme="staff"] h2, :root[data-theme="staff"] h3 { text-transform: uppercase; letter-spacing: .08em; }
:root[data-theme="staff"] .card { border-style: dashed; }
:root[data-theme="staff"] .map-wrap { background: #1f2218; }
:root[data-theme="staff"] .move-path { stroke: #ffd84d; stroke-width: 3; }
:root[data-theme="staff"] .counter .face { stroke-width: 1.4; }

/* ---- Modern board game ------------------------------------------------- */
/* Bright and friendly: saturated terrain, soft shadows, rounded chunky chits, clean sans. */
:root[data-theme="modern"] {
  color-scheme: light;
  --bg: #eef2f7;
  --panel: #ffffff;
  --ink: #1b2430;
  --muted: #5f6b7a;
  --line: #dde3ec;
  --accent: #2f6fed;
  --accent-ink: #fff;
  --error: #d93b2b;
  --info: #2f6fed;
  --focus: #ffb400;
  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-map: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --font-counter: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --radius: 12px;
  --counter-radius: 5px;

  --p0-face: #4f8ef7;
  --p0-ink: #ffffff;
  --p1-face: #ef5a4c;
  --p1-ink: #ffffff;
  --neutral-face: #9aa3ae;
  --neutral-ink: #ffffff;

  --hex-line: #ffffff;
  --hex-line-width: 1.4;
  --hex-number: rgb(0 0 0 / .25);
  --t-plains: #b9e07a;
  --t-forest: #5fb35a;
  --t-hills: #e7c46b;
  --t-mountains: #a9a3a0;
  --t-city: #f3ead7;
  --t-water: #5cb8ea;
  --unexplored: #2a3340;
  --unexplored-line: #323c4b;
  --fogged: rgb(20 30 45 / .3);
  --glyph-forest: #2f7d3b;
  --glyph-hills: #b98a2c;
  --glyph-mountains: #6d6865;
  --city-block: #3b4250;
  --city-block-line: #ffffff;
  --road: #9b6b3f;
  --river: #1f7fc4;
  --label: #1b2430;
  --label-halo: #ffffff;
  --capital-star: #ffb400;
}
:root[data-theme="modern"] .card, :root[data-theme="modern"] .panel { border: 0; box-shadow: 0 1px 3px rgb(20 40 80 / .08), 0 4px 14px rgb(20 40 80 / .06); }
:root[data-theme="modern"] button { border-radius: 999px; }
:root[data-theme="modern"] .topbar { box-shadow: 0 1px 8px rgb(20 40 80 / .08); border-bottom: 0; }
:root[data-theme="modern"] .counter .face { stroke-width: 0; filter: drop-shadow(0 1.2px 0 rgb(0 0 0 / .35)); }
:root[data-theme="modern"] .counter .ink { stroke: #fff; }
:root[data-theme="modern"] .counter .ink-fill { fill: #fff; }
:root[data-theme="modern"] .counter .factors, :root[data-theme="modern"] .counter .ink-text { fill: #fff; }
:root[data-theme="modern"] .counter.selected .face { stroke: var(--focus); stroke-width: 2.5; }
:root[data-theme="modern"] .counter-art { filter: drop-shadow(0 1px 0 rgb(0 0 0 / .18)); }

/* ---- Retro computer ---------------------------------------------------- */
/* A nod to Empire Deluxe's era: a 16-colour palette, bevelled grey window chrome, monospace,
   hard edges everywhere. */
:root[data-theme="retro"] {
  color-scheme: light;
  --bg: #344b4b;
  --panel: #c7c2b5;
  --ink: #172020;
  --muted: #4e5b58;
  --line: #77766f;
  --accent: #294e78;
  --accent-ink: #ffffff;
  --error: #9b3d35;
  --info: #315d78;
  --focus: #d8b84c;
  --font-ui: "Lucida Console", "Courier New", ui-monospace, monospace;
  --font-display: "Lucida Console", "Courier New", ui-monospace, monospace;
  --font-map: "Lucida Console", "Courier New", ui-monospace, monospace;
  --font-counter: "Lucida Console", "Courier New", ui-monospace, monospace;
  --radius: 0;
  --counter-radius: 0;

  --p0-face: #4e78a8;
  --p0-ink: #ffffff;
  --p1-face: #b75d55;
  --p1-ink: #ffffff;
  --neutral-face: #a8a397;
  --neutral-ink: #172020;

  --hex-line: #34423c;
  --hex-line-width: .5;
  --hex-number: rgb(0 0 0 / .35);
  --t-plains: #8fb66b;
  --t-forest: #3f7649;
  --t-hills: #b58a54;
  --t-mountains: #8c8a86;
  --t-city: #d6cfb9;
  --t-water: #507d9a;
  --unexplored: #202826;
  --unexplored-line: #293330;
  --fogged: rgb(0 0 0 / .45);
  --glyph-forest: #275334;
  --glyph-hills: #815b36;
  --glyph-mountains: #62615f;
  --city-block: #333b39;
  --city-block-line: #d8c86c;
  --road: #6f4d34;
  --river: #87c9d4;
  --label: #172020;
  --label-halo: #e2dcc9;
  --capital-star: #d8b84c;
}
:root[data-theme="retro"] svg.board { shape-rendering: crispEdges; }
:root[data-theme="retro"] svg.board image { image-rendering: pixelated; }
:root[data-theme="retro"] svg.board text { shape-rendering: auto; }
:root[data-theme="retro"] .map-wrap { background: #171f1e; }
:root[data-theme="retro"] .card, :root[data-theme="retro"] .panel, :root[data-theme="retro"] .topbar,
:root[data-theme="retro"] button, :root[data-theme="retro"] .overlay-card {
  border: 2px solid; border-color: #eee9dc #565b57 #565b57 #eee9dc; border-radius: 0; box-shadow: none;
}
:root[data-theme="retro"] button:active:not(:disabled) { border-color: #565b57 #eee9dc #eee9dc #565b57; }
:root[data-theme="retro"] button.primary { background: #294e78; color: #fff; }
:root[data-theme="retro"] .topbar { background: #263f63; color: #f4f0da; }
:root[data-theme="retro"] .topbar a, :root[data-theme="retro"] .topbar .muted, :root[data-theme="retro"] .topbar .nav-link { color: #f4f0da; }
:root[data-theme="retro"] h1, :root[data-theme="retro"] h2, :root[data-theme="retro"] h3 { text-transform: uppercase; }
:root[data-theme="retro"] .t-water + .hex-number { fill: rgb(255 255 255 / .4); }
:root[data-theme="retro"] .topbar .phase, :root[data-theme="retro"] .topbar .turn-info { color: #d9c678; }

/* ---- Ars Imperii painted campaign map -------------------------------- */
/* Painted map tiles echo the portal artwork; the surrounding UI is a dark
   campaign table so controls remain clear while the map stays the focus. */
:root[data-theme="imperii"] {
  color-scheme: dark;
  --bg: #101923;
  --panel: #1d2830;
  --ink: #f1e8d3;
  --muted: #b7ad98;
  --line: #65563d;
  --accent: #d5ac63;
  --accent-ink: #171e23;
  --error: #f08e7c;
  --info: #91b9cd;
  --focus: #ffe09a;
  --font-display: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  --font-map: Georgia, "Palatino Linotype", serif;
  --radius: 5px;
  --counter-radius: 2px;

  --p0-face: #24425d;
  --p0-ink: #fff0cb;
  --p1-face: #773b31;
  --p1-ink: #fff0cb;
  --neutral-face: #69614e;
  --neutral-ink: #fff0cb;

  --map-bg: #b9a772;
  --hex-line: rgb(51 48 38 / .24);
  --hex-line-width: .65;
  --hex-number: #373d3a;
  --unexplored: #252f31;
  --unexplored-line: #3f4947;
  --fogged: rgb(9 17 21 / .47);
  --city-block: #493c2e;
  --city-block-line: #e9c989;
  --road: #f6dfa7;
  --river: #2d7894;
  --label: #201f1c;
  --label-halo: #e6d4a6;
  --capital-star: #9a2823;
}
:root[data-theme="imperii"] body {
  background-color: var(--bg);
  background-image: url("../themes/imperii/walnut.webp");
  background-size: 384px 256px;
  background-blend-mode: multiply;
}
:root[data-theme="imperii"] .topbar {
  background: linear-gradient(rgb(12 23 31 / .52), rgb(12 23 31 / .52)), url("../themes/imperii/walnut.webp") repeat #131f29;
  background-size: 384px 256px;
  border-bottom: 2px solid #9d7945;
  box-shadow: 0 3px 12px rgb(0 0 0 / .28);
}
:root[data-theme="imperii"] .topbar h1,
:root[data-theme="imperii"] .hero-title h2 { color: #f4dca7; letter-spacing: .035em; }
:root[data-theme="imperii"] .panel,
:root[data-theme="imperii"] .overlay-card,
:root[data-theme="imperii"] .hero {
  background: linear-gradient(rgb(17 28 36 / .62), rgb(17 28 36 / .62)), url("../themes/imperii/walnut.webp") repeat #1d2830;
  background-size: 384px 256px;
  border: 1px solid #796444;
  box-shadow: 0 6px 20px rgb(0 0 0 / .25), inset 0 1px rgb(255 226 168 / .08);
}
:root[data-theme="imperii"] .card {
  background: rgb(13 25 32 / .55);
  border-color: #6b5b42;
  box-shadow: inset 0 1px rgb(255 233 186 / .05);
}
:root[data-theme="imperii"] button,
:root[data-theme="imperii"] input,
:root[data-theme="imperii"] select { border-color: #746348; }
:root[data-theme="imperii"] button:not(.primary) { background: #28353a; }
:root[data-theme="imperii"] button:hover:not(:disabled) { border-color: #e3bd78; }
:root[data-theme="imperii"] .map-wrap {
  background: #111e28;
  border: 3px solid #796444;
  box-shadow: 0 8px 25px rgb(0 0 0 / .38), inset 0 0 0 1px #c69b5f;
}
:root[data-theme="imperii"] .hero-strip { border-bottom: 2px solid #9d7945; }
/* A faint edge halo softens the grid without blurring the painted tile or map overlays. */
:root[data-theme="imperii"] .hex:not(.unexplored) {
  filter: drop-shadow(0 0 1.4px rgb(241 217 161 / .42));
}
:root[data-theme="imperii"] .road {
  stroke-width: 2.8;
  opacity: 1;
  filter: drop-shadow(0 0 1.2px #29352c) drop-shadow(0 1px 1px #29352c);
}
:root[data-theme="imperii"] .board use[href="#g-forest"],
:root[data-theme="imperii"] .board use[href="#g-hills"],
:root[data-theme="imperii"] .board use[href="#g-mountains"] { display: none; }
:root[data-theme="imperii"] .counter .face { filter: drop-shadow(1px 2px 1px rgb(0 0 0 / .65)); }
:root[data-theme="imperii"] .counter .factors { font-weight: 800; }
:root[data-theme="imperii"] .chip.owner-0 { background: var(--p0-face); color: var(--p0-ink); }
:root[data-theme="imperii"] .chip.owner-1 { background: var(--p1-face); color: var(--p1-ink); }