/* Fonts (SIL Open Font License), self-hosted so the game also works offline */
@font-face { font-family: 'Orbitron'; font-weight: 600; font-display: swap; src: url('/fonts/orbitron-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Orbitron'; font-weight: 800; font-display: swap; src: url('/fonts/orbitron-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('/fonts/barlow-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('/fonts/barlow-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('/fonts/barlow-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url('/fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }

:root {
  --navy: #0a1640;
  --blue: #1d4ed8;
  --sky: #2f6bff;
  --line: #c5d3f6;
  --paper: #f9fbff;
  --ink: #0d1b3e;
  --green: #0f5a2b;
  --red: #c41818;
  --orange: #ee5a1c;
  --muted: #5b6b96;
  --display: 'Orbitron', 'Eurostile', 'Arial Black', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p1: #2f6bff; --p2: #d61f8c; --p3: #e8930c; --p4: #0ea5a0; --p5: #7c3aed;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--body); color: var(--ink); background: var(--paper);
  background-image:
    linear-gradient(rgba(47,107,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,107,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
.btn {
  font-family: var(--display); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border: 0; border-radius: 10px; padding: .8em 1.4em; color: #fff; background: var(--navy);
  box-shadow: 0 4px 0 #050b24, 0 0 0 2px var(--sky) inset; transition: transform .08s, box-shadow .08s, opacity .2s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #050b24, 0 0 0 2px var(--sky) inset; }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btn.go { background: var(--blue); }
.btn.ghost { background: transparent; color: var(--navy); box-shadow: 0 0 0 2px var(--line) inset; }
.display { font-family: var(--display); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hex {
  display: inline-grid; place-items: center; width: 1.9em; height: 2.1em; flex: none;
  font-family: var(--display); font-weight: 800; color: #fff; background: var(--navy);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.seat1 { --pc: var(--p1); } .seat2 { --pc: var(--p2); } .seat3 { --pc: var(--p3); } .seat4 { --pc: var(--p4); } .seat5 { --pc: var(--p5); }
.hex.pc { background: var(--pc); }

/* Card back */
.cardback {
  border-radius: 6% / 4%; background: var(--navy); position: relative; overflow: hidden;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(47,107,255,.55), transparent 55%),
    linear-gradient(rgba(120,160,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,.16) 1px, transparent 1px);
  background-size: 100% 100%, 12% 8%, 12% 8%;
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px var(--sky) inset;
}
.cardback::after {
  content: 'AI\A RACE'; white-space: pre; text-align: center; line-height: 1.15;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 78%; padding: .7em 0; border-radius: 10%/22%;
  font-family: var(--display); font-weight: 800; font-size: calc(var(--ai, 2rem) * .82); letter-spacing: .06em; color: #fff;
  background: #071033; box-shadow: 0 0 0 2px var(--sky), 0 0 24px var(--sky);
}
.error { color: var(--red); font-weight: 600; min-height: 1.4em; }
.credit { font-size: .75rem; color: var(--muted); }

/* Numbers: Orbitron's zero is slashed and reads like "Ø", so digits use the condensed face. */
.num { font-family: var(--cond) !important; font-weight: 700 !important; }

.arrow { display: inline-block; width: 1em; height: .7em; vertical-align: baseline; margin: 0 .15em; }