/* Shared shadcn semantic tokens. The ship builder uses the light root palette;
   all other screens opt into .dark on html, including body-mounted portals. */
:root {
  color-scheme: light;
  --background: #dadcdf;
  --foreground: #1b1d20;
  --card: #f4f4f5;
  --card-foreground: #1b1d20;
  --popover: #ffffff;
  --popover-foreground: #1b1d20;
  --primary: #2f6fed;
  --primary-foreground: #ffffff;
  --secondary: #ffffff;
  --secondary-foreground: #1b1d20;
  --muted: #e9eaec;
  --muted-foreground: #55595f;
  --accent: #e6eeff;
  --accent-foreground: #1a4fc4;
  --destructive: #d64545;
  --border: rgba(0, 0, 0, 0.08);
  --input: rgba(0, 0, 0, 0.16);
  --ring: #2f6fed;
  --chart-1: #2f6fed;
  --chart-2: #55595f;
  --chart-3: #8a9097;
  --chart-4: #b0b4b9;
  --chart-5: #d64545;
  --radius: 0.75rem;
  --sidebar: #f4f4f5;
  --sidebar-foreground: #1b1d20;
  --sidebar-primary: #2f6fed;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e6eeff;
  --sidebar-accent-foreground: #1a4fc4;
  --sidebar-border: rgba(0, 0, 0, 0.08);
  --sidebar-ring: #2f6fed;
  /* Game-specific: dark floating chrome, semantic ok, hostile. */
  --dark: #1c1e21;
  --dark-foreground: #f4f4f5;
  --dark-muted: #b5b9bf;
  --ok: #2f8f5b;
  --ok-foreground: #ffffff;
  --hostile: #d64545;
  --canvas-dot: #a9adb2;
  --glass: rgb(255 255 255 / 0.88);
  --glass-border: rgb(255 255 255 / 0.55);
  --map-grid: rgb(0 0 0 / 0.1);
  --map-island: #d3d6da;
  --map-island-border: #8a9097;
}

.dark {
  color-scheme: dark;
  --background: #141416;
  --foreground: #f4f4f5;
  --card: #1e1e21;
  --card-foreground: #f4f4f5;
  --popover: #252528;
  --popover-foreground: #f4f4f5;
  --primary: #82aaff;
  --primary-foreground: #101c34;
  --secondary: #2a2a2e;
  --secondary-foreground: #f4f4f5;
  --muted: #2a2a2e;
  --muted-foreground: #b0b0b9;
  --accent: #273754;
  --accent-foreground: #bdd2ff;
  --destructive: #ff9393;
  --border: rgb(255 255 255 / 0.12);
  --input: rgb(255 255 255 / 0.18);
  --ring: #82aaff;
  --chart-1: #82aaff;
  --chart-2: #b0b0b9;
  --chart-3: #8a9097;
  --chart-4: #65656f;
  --chart-5: #ff9393;
  --sidebar: #1e1e21;
  --sidebar-foreground: #f4f4f5;
  --sidebar-primary: #82aaff;
  --sidebar-primary-foreground: #101c34;
  --sidebar-accent: #273754;
  --sidebar-accent-foreground: #bdd2ff;
  --sidebar-border: rgb(255 255 255 / 0.12);
  --sidebar-ring: #82aaff;
  --ok: #7dd8a3;
  --ok-foreground: #10271a;
  --hostile: #ff9393;
  --canvas-dot: #3e3e46;
  --glass: rgb(24 24 27 / 0.88);
  --glass-border: rgb(255 255 255 / 0.16);
  --map-grid: rgb(255 255 255 / 0.12);
  --map-island: #373c45;
  --map-island-border: #8993a4;
}

:root { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--foreground); background: var(--background); }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--primary); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--ring); outline-offset: 5px; border-radius: 4px; }
.site-header, main, .site-footer { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 750; color: inherit; text-decoration: none; }
.dark .brand img { filter: brightness(0) invert(1); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 22px; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 14px; font-weight: 650; text-decoration: none; }
.button:hover { background: var(--accent); color: var(--accent-foreground); }
.intro { padding-top: 38px; }
.eyebrow { color: var(--muted-foreground); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
h1 { margin: 14px 0 20px; font-size: clamp(36px, 6vw, 58px); line-height: 1.08; letter-spacing: -.045em; }
.lead { max-width: 800px; margin-bottom: 30px; color: var(--muted-foreground); font-size: clamp(17px, 2.4vw, 21px); line-height: 1.65; }
.hero { display: block; width: 100%; height: auto; border-radius: 18px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block: 28px 58px; }
.features article { padding: 24px; border-radius: 18px; background: var(--card); }
h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.025em; }
.features h2 { margin-top: 0; font-size: 19px; }
p, li { line-height: 1.7; }
.features p { margin-bottom: 0; color: var(--muted-foreground); font-size: 15px; }
.reading { max-width: 740px; margin-inline: auto; }
.reading h2 { margin-top: 36px; }
.reading p, .reading li { color: var(--muted-foreground); }
ol { padding-left: 24px; }
li { padding-left: 5px; margin-bottom: 12px; }
.play-link { margin-block: 32px 56px; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding-block: 24px 36px; color: var(--muted-foreground); font-size: 13px; }
.site-footer a { color: inherit; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 10; padding: 12px; background: var(--card); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.not-found { max-width: 680px; padding-block: 12vh; }
@media (max-width: 700px) { .site-header, main, .site-footer { width: calc(100% - 32px); } .intro { padding-top: 20px; } .features { grid-template-columns: 1fr; margin-bottom: 36px; } .site-header .button { padding-inline: 17px; } }