/* Shared light and dark tokens. Light (#f6f4ef) is the brand default. data-theme is set in the head before paint. Dark is opt-in. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}
:root {
  color-scheme: light;
  --bg: #f6f4ef;
  --ink: #16181e;
  --muted: #4e5666;
  --soft: #2a303b;
  --panel: #ffffff;
  --line: rgba(22, 24, 30, .16);
  --accent: #0b5f78;
  --accent-ink: #ffffff;
  --header: rgba(246, 244, 239, .92);
  --hero: transparent;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07080d;
  --ink: #eef1f6;
  --muted: #b4bccb;
  --soft: #d7deea;
  --panel: #141822;
  --line: rgba(238, 241, 246, .18);
  --accent: #7ad7ff;
  --accent-ink: #071018;
  --header: rgba(7, 8, 13, .9);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f4ef;
  --ink: #16181e;
  --muted: #4e5666;
  --soft: #2a303b;
  --panel: #ffffff;
  --line: rgba(22, 24, 30, .16);
  --accent: #0b5f78;
  --accent-ink: #ffffff;
  --header: rgba(246, 244, 239, .92);
}

/* Per-game accent. Dark text on a bright accent in dark mode; white text on a deeper accent in light mode. */
html[data-accent="fc"] { --accent: #6aa6ff; --accent-ink: #071018; }
html[data-theme="light"][data-accent="fc"] { --accent: #0b4fa8; --accent-ink: #f5f8ff; }
html[data-accent="grid"] { --accent: #e2b340; --accent-ink: #1a1408; }
html[data-theme="light"][data-accent="grid"] { --accent: #8a5e00; --accent-ink: #fffaf0; }
html[data-accent="motors"] { --accent: #d4b483; --accent-ink: #1c160c; }
html[data-theme="light"][data-accent="motors"] { --accent: #6d4b16; --accent-ink: #fffaf0; }
html[data-accent="grind"] { --accent: #e2c178; --accent-ink: #1a140c; }
html[data-theme="light"][data-accent="grind"] { --accent: #7a5a22; --accent-ink: #fffaf0; }
html[data-accent="nations"] { --accent: #d4b36a; --accent-ink: #121410; }
html[data-theme="light"][data-accent="nations"] { --accent: #7a5c20; --accent-ink: #fffaf0; }
html[data-accent="robotaxi"] { --accent: #f5b82e; --accent-ink: #1a1404; }
html[data-theme="light"][data-accent="robotaxi"] { --accent: #8a6200; --accent-ink: #fffaf0; }
html[data-accent="cards"] { --accent: #e15b68; --accent-ink: #1a0a0c; }
html[data-theme="light"][data-accent="cards"] { --accent: #8d1d2c; --accent-ink: #fff7f4; }
html[data-accent="orbit"] { --accent: #ffb000; --accent-ink: #1a1204; }
html[data-theme="light"][data-accent="orbit"] { --accent: #8a5600; --accent-ink: #fffaf0; }

.theme-toggle {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.theme-toggle::before { content: "Light"; }
html[data-theme="dark"] .theme-toggle::before { content: "Dark"; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, .theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 40;
  background: var(--panel);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
}
.skip:focus { top: 12px; }
.nav-toggle {
  display: none;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
header { position: sticky; }
.bar { flex-wrap: nowrap; min-width: 0; }
.brand { min-width: 0; }
h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance; }
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  nav.main {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: calc(100dvh - 68px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 8px 16px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 32px rgba(22, 24, 30, .12);
  }
  nav.main.is-open { display: flex; }
  nav.main a, nav.main .buy {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 8px 4px;
    border-radius: 10px;
  }
  nav.main .btn { width: 100%; margin-top: 6px; justify-content: center; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 700px) {
  .brand span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
.site-footer { border-top: 1px solid var(--line); padding: 32px 0; color: var(--muted); font-size: 15px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 800px) { .site-footer .wrap { grid-template-columns: 1fr; } }
.site-footer a { color: var(--ink); font-weight: 700; text-decoration: none; }
.site-footer nav { display: flex; flex-direction: column; gap: 2px; }
.site-footer p { margin: 0 0 8px; }
@media (max-width: 800px) {
  .site-footer nav a { min-height: 44px; display: flex; align-items: center; }
}
.consent { display: block; max-width: 28rem; font-size: 14px; line-height: 1.45; color: var(--soft); }
.consent input { width: 1.25rem; height: 1.25rem; margin: 0.1em 0.5em 0 0; vertical-align: text-top; accent-color: var(--accent); }
.signup-form { display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-width: 28rem; }
.signup-form input[type="email"] { width: 100%; }
.signup-form .btn { align-self: flex-start; }
@media (max-width: 640px) {
  .signup-form .btn { width: 100%; align-self: stretch; }
}
.compare { width: 100%; border-collapse: collapse; margin-top: 12px; }
.compare th, .compare td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { color: var(--ink); }
@media (max-width: 640px) {
  .compare { display: block; }
  .compare thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .compare tbody, .compare tr { display: block; }
  .compare tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .compare th, .compare td { display: block; width: auto; border: 0; padding: 0; text-align: left; }
  .compare tbody th { margin: 0 0 8px; }
  .compare td + td { margin-top: 10px; }
  .compare td:nth-child(2)::before, .compare td:nth-child(3)::before { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .compare td:nth-child(2)::before { content: "Play"; }
  .compare td:nth-child(3)::before { content: "Full game"; }
}
.fine { margin: 16px 0 0; font-size: 13px; }
.brand img { width: auto; height: 40px; aspect-ratio: 659 / 416; border-radius: 0; background: none; object-fit: contain; flex: none; }
@media (max-width: 960px) {
  .brand img { height: 44px; }
}
.footer-brand { display: block; width: min(100%, 280px); margin: 0 0 12px; text-decoration: none; }
.footer-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lockup { display: block; width: 100%; height: auto; background: none; border-radius: 0; }
.lockup-dark { display: none; }
html[data-theme="dark"] .lockup-light { display: none; }
html[data-theme="dark"] .lockup-dark { display: block; }
.studio-hero { margin: 0 0 18px; }
.studio-hero .lockup { width: min(100%, 340px); }