/* CrabbMedia companion pages. Game behavior, artwork, and medal assets stay in
   their original files. Load after the original page CSS and shared tokens. */
:root {
  color-scheme: dark;
  --navy: var(--cm-navy);
  --panel: var(--cm-panel);
  --ink: var(--cm-paper);
  --muted: var(--cm-muted);
  --gold: var(--cm-orange);
  --brass: var(--cm-orange);
  --cyan: var(--cm-white);
  --bg: var(--cm-navy);
}

html {
  background: var(--cm-navy);
  color: var(--cm-paper);
}

html body {
  background:
    radial-gradient(ellipse at 85% 0, rgba(17, 62, 146, .32), transparent 40rem),
    linear-gradient(180deg, var(--cm-navy), var(--cm-deep));
  color: var(--cm-paper);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--cm-orange); color: var(--cm-deep); }
a, .page a { color: var(--cm-orange); text-underline-offset: .2em; }
a:hover, .page a:hover { color: var(--cm-white); }

:is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--cm-orange);
  outline-offset: 4px;
}

.skip-link {
  background: var(--cm-orange);
  color: var(--cm-deep);
}

body > .site-head, body > footer { border-color: var(--cm-border); }

body > .site-head .brand {
  color: var(--cm-white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.7px;
  text-transform: none;
}

body > .site-head nav, body > footer nav {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

body > .site-head nav a, body > footer nav a { color: var(--cm-muted); }
body > .site-head nav a:hover, body > footer nav a:hover,
body > .site-head nav a[aria-current="page"], body > footer nav a[aria-current="page"] {
  color: var(--cm-orange);
}

body > .site-head nav a:focus-visible, body > footer nav a:focus-visible,
body > .site-head .brand:focus-visible { outline-color: var(--cm-orange); }

h1, .page h2, .features h2, .guide-card h3, .sub-guide h3, .game-card strong {
  color: var(--cm-white);
  text-shadow: none;
}

.kicker, .welcome-kicker { color: var(--cm-orange); }
.lede, .page p, .page li { color: var(--cm-paper); }
.note, .page .note, .features p, .guide-card p, .sub-guide p,
body > footer, body > footer p { color: var(--cm-muted); }

.button, .play-link, .page .play-link, button {
  border-color: var(--cm-border);
  background: var(--cm-panel);
  color: var(--cm-paper);
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.button:hover, .play-link:hover, .page .play-link:hover, button:hover {
  border-color: var(--cm-muted);
  background: var(--cm-blue);
  color: var(--cm-white);
}

.button.primary, .hero-actions .play-link:first-child, #search button {
  border-color: var(--cm-orange);
  background: var(--cm-orange);
  color: var(--cm-deep);
  text-shadow: none;
}

.button.primary:hover, .hero-actions .play-link:first-child:hover, #search button:hover {
  border-color: var(--cm-paper);
  background: var(--cm-paper);
  color: var(--cm-deep);
}

.button.store-soon, .play-link.store-soon, .store-soon {
  border-color: var(--cm-border);
  background: transparent;
  color: var(--cm-muted);
}

.site-panel, .features article, .game-card, .guide-card, .sub-guide, #search {
  border-color: var(--cm-border);
  background: var(--cm-panel);
  box-shadow: none;
}

.features article { border-top: 2px solid var(--cm-blue); }
.game-card:hover { border-color: var(--cm-orange); background: var(--cm-blue); }

#search label { color: var(--cm-paper); }
#q {
  min-width: 0;
  border-color: var(--cm-border);
  background: var(--cm-deep);
  color: var(--cm-white);
  caret-color: var(--cm-orange);
}
#q::placeholder { color: var(--cm-muted); opacity: .8; }
#q:focus { border-color: var(--cm-orange); }

#board-table { border-color: var(--cm-border); background: var(--cm-deep); }
#board-table th {
  border-color: var(--cm-border);
  background: var(--cm-blue);
  color: var(--cm-white);
}
#board-table td { border-color: var(--cm-border); }
#board-table td.is-gold {
  background: rgba(17, 62, 146, .18);
  box-shadow: inset 0 2px 0 var(--cm-orange);
}
#board-table .rank { color: var(--cm-muted); }
#board-table .name { color: var(--cm-white); }
#board-table .score { color: var(--cm-orange); }

.board-ad-slot, .board-ad-slot > a, .board-ad-image {
  border-color: var(--cm-border);
  background-color: var(--cm-deep);
}
.board-ad-promo:focus-visible, .board-ad-creative:focus-visible { outline-color: var(--cm-orange); }
.board-ad-creative, .board-ad.is-fake .board-ad-slot { background: var(--cm-deep); }
.board-ad.is-adsense .board-ad-slot { background: var(--cm-panel); }
.board-ad-copy strong { color: var(--cm-paper); }
.board-ad-copy em { color: var(--cm-muted); }
.board-ad-cta {
  border-color: var(--cm-orange);
  background: var(--cm-orange);
  color: var(--cm-deep);
  text-shadow: none;
}

.sub-visual, .guide-visual {
  border-color: var(--cm-border);
  background:
    radial-gradient(ellipse at 50% 15%, rgba(17, 62, 146, .6), transparent 80%),
    var(--cm-deep);
}
.guide-card .guide-tip strong { color: var(--cm-orange); }
.guide-card .guide-tip, .guide-hull-state small { color: var(--cm-muted); }

/* The guide mirrors the new instrument chrome. Instrument, health, and hazard
   colors keep the cyan/red/green/mint/amber/coral meanings taught by the text. */
.howto-page .hud-overview {
  border-color: var(--cm-border);
  background: linear-gradient(180deg, var(--cm-panel), var(--cm-deep));
}
.howto-page .hud-score-demo small { color: var(--cm-muted); }
.howto-page .hud-score-demo strong,
.howto-page .hud-score-demo span:nth-child(2) strong,
.howto-page .hud-score-demo span:last-child strong { color: var(--cm-white); }
.howto-page .guide-action-count, .howto-page .guide-instrument-label {
  color: var(--cm-orange);
  text-shadow: 0 1px 2px var(--cm-deep);
}
.howto-page .guide-instruments { color: var(--cm-white); text-shadow: none; }
.howto-page .guide-speed {
  border-color: var(--cm-muted);
  background: var(--cm-deep);
  box-shadow: inset 0 0 0 1px var(--cm-blue);
}
.howto-page .guide-speed-track { stroke: var(--cm-border); }
.howto-page .guide-speed-ticks { stroke: var(--cm-muted); }
.howto-page .guide-speed-unit, .howto-page .guide-hull-state small { color: var(--cm-muted); }
.howto-page .guide-engine-bars i { background: var(--cm-border); }
.howto-page .guide-pips i.is-off { background: var(--cm-border); }
.howto-page .guide-dock-face {
  border-color: var(--cm-border);
  background: var(--cm-navy);
  color: var(--cm-orange);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .button, .play-link, button { transition: none; }
}