/* Reset, design tokens (dark-first + light theme) and base elements */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
#inspect,.toasts,.toast,.ach-panel,.legend-card,.lightbox,.lb-bar,.tutorial,.prompt-list,.mini-label{box-sizing:border-box}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: a pannable world map (grid canvas + DOM world) under a fixed HUD; a radial menu opens at the cursor. Dark-first. */
:root {
  --bg: #17181b;
  --bg-2: #1e1f23;
  --ink: #ecebe4;
  --ink-dim: #9c9b94;
  --card: #dcdad2;
  --card-ink: #17181b;
  --card-dim: #5f5e58;
  --hud: rgba(23, 24, 27, 0.80);
  --hud-line: rgba(236, 235, 228, 0.14);
  --grid-minor: rgba(236, 235, 228, 0.055);
  --grid-major: rgba(236, 235, 228, 0.12);
  --grid-glow: rgba(47, 140, 255, 0.30);
  --accent: #2f8cff;
  --accent-ink: #ffffff;
  --hot: #ff6a1a;
  --shadow: rgba(0, 0, 0, 0.45);
  --dim: rgba(10, 11, 13, 0.55);
  --thumb-blue: #afc6fa;
  --thumb-white: #ffffff;
  --thumb-red: #b30a0a;
  --thumb-black: #170404;
  --thumb-green: #3a7d44;
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #e8e6df; --bg-2: #f3f2ed; --ink: #17181b; --ink-dim: #65645e;
    --card: #fbfaf6; --card-ink: #17181b; --card-dim: #6a6963;
    --hud: rgba(251, 250, 246, 0.88); --hud-line: rgba(23, 24, 27, 0.14);
    --grid-minor: rgba(23, 24, 27, 0.06); --grid-major: rgba(23, 24, 27, 0.13); --grid-glow: rgba(31, 111, 224, 0.28);
    --accent: #1f6fe0; --accent-ink: #ffffff; --hot: #e2560a;
    --shadow: rgba(40, 38, 30, 0.20); --dim: rgba(232, 230, 223, 0.55);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #e8e6df; --bg-2: #f3f2ed; --ink: #17181b; --ink-dim: #65645e;
  --card: #fbfaf6; --card-ink: #17181b; --card-dim: #6a6963;
  --hud: rgba(251, 250, 246, 0.88); --hud-line: rgba(23, 24, 27, 0.14);
  --grid-minor: rgba(23, 24, 27, 0.06); --grid-major: rgba(23, 24, 27, 0.13); --grid-glow: rgba(31, 111, 224, 0.28);
  --accent: #1f6fe0; --accent-ink: #ffffff; --hot: #e2560a;
  --shadow: rgba(40, 38, 30, 0.20); --dim: rgba(232, 230, 223, 0.55);
  color-scheme: light;
}

html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: 15px; line-height: 1.5;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }