:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #f4f8ff;
  background: #090e26;
  --muted: #c4d2e9;
  --edge: #9bb9ff40;
  --lime: #d9ff54;
  --mint: #69f29c;
  --cyan: #60e9ff;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
[hidden] { display: none !important; }

.topbar {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(14px,4vw,56px);
}
.wordmark { display: inline-block; }
.wordmark img { display: block; width: clamp(113px,17vw,174px); }
.top-actions, .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.top-account, .sign-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 7px 13px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #10192eef;
  color: #eaf2ff;
  font-size: .8rem;
  font-weight: 750;
  white-space: nowrap;
}
.top-account:hover, .sign-in:hover { background: #25334e; }
.top-register { border-color: #a9ff9466; color: #c9ffb5; }

.hero-scene {
  background: linear-gradient(90deg,#090e26dc 3%,#090e2680 62%,#090e2652),
    url("/assets/race-win-arena.webp") center / cover no-repeat;
  border-bottom: 1px solid var(--edge);
}
.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(28px,6vw,84px);
  width: min(100%,1190px);
  min-height: min(100svh,760px);
  margin-inline: auto;
  padding: 96px clamp(16px,5vw,56px) 56px;
}
.hero-copy { min-width: 0; }
h1, .section-heading h2, .final-call h2 {
  margin: 0;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
h1 {
  font-size: clamp(2.45rem,6.2vw,6rem);
  line-height: .93;
  text-shadow: 0 5px 24px #04091b;
}
h1 em { display: block; color: var(--lime); }
.hero-copy > p {
  max-width: 42ch;
  margin: 20px 0 24px;
  color: #e0e9fc;
  font-size: clamp(.94rem,1.6vw,1.12rem);
  line-height: 1.6;
}
.play {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px 20px;
  border: 1px solid #a9ff94;
  border-radius: 11px;
  background: linear-gradient(112deg,var(--lime),var(--mint));
  box-shadow: 0 8px 26px #69f29c38;
  color: #0c2420;
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.play:hover { background: linear-gradient(112deg,#e5ff85,#8cf7b3); }
.play:active { transform: scale(.98); }
.sign-in { min-height: 49px; }

.preview {
  width: min(100%,390px);
  margin: 0;
  padding: 10px;
  border: 1px solid #9bb9ff85;
  border-radius: 20px;
  background: linear-gradient(135deg,#1b2944f5,#11182ef7);
  box-shadow: 0 16px 42px #04091ba6;
}
.preview figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5px;
  padding: 3px 3px 10px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 750;
}
.preview figcaption span { color: var(--cyan); text-transform: uppercase; letter-spacing: .08em; }
.preview figcaption, .preview figcaption div { align-items: center; }
.preview figcaption div { display: flex; gap: 4px; }
.preview-toggle {
  width: 44px;
  height: 44px;
  margin-block: -6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #c4d2e9;
  font-size: .95rem;
  cursor: pointer;
}
.preview-toggle:hover { background: #25334e; }
.preview-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: -3px; }
.preview-glass { overflow: hidden; border: 1px solid var(--edge); border-radius: 12px; }
.preview-hud {
  display: flex;
  justify-content: space-between;
  gap: 3px;
  padding: 5px;
  background: #10192e;
  color: #d7e3f8;
  font-size: clamp(.63rem,2vw,.75rem);
  font-weight: 650;
}
.preview-hud div { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.preview-hud strong { color: white; }
#preview-hits { color: #a9ff94; }
#preview-next { width: 18px; height: 18px; }
#preview-board {
  display: block;
  width: 100%;
  background: linear-gradient(#9bb9ff12 1px,transparent 1px),
    linear-gradient(90deg,#9bb9ff12 1px,transparent 1px),
    linear-gradient(145deg,#101e39,#201735);
  background-size: 9% 8%, 9% 8%, 100%;
}
.preview-aim { fill: none; stroke: #8fe9ffba; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 5; }
.socket { fill: #60e9ff18; stroke: #8fe9ff8c; stroke-width: 1.4; }

.how-to, .final-call { padding: clamp(38px,6vw,76px) 16px; }
.how-to { background: #0c142a; scroll-margin-top: 12px; }
.section-heading { margin: 0 auto 28px; text-align: center; }
.section-heading h2, .final-call h2 { font-size: clamp(1.65rem,4vw,2.5rem); }
.section-heading p, .final-call p { margin: 8px 0 0; color: var(--muted); line-height: 1.55; }
.mission-link { gap: 8px; margin-top: 14px; color: #c9ffb5; }
.controller { width: 28px; height: 28px; margin-bottom: 8px; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; }
.strategy-grid {
  display: grid;
  gap: 14px;
  width: min(100%,1060px);
  margin: 0 auto;
}
.strategy {
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: #151f37;
  padding: 15px;
}
.strategy-art {
  display: block;
  width: calc(100% + 30px);
  height: auto;
  margin: -15px -15px 13px;
  border-bottom: 1px solid var(--edge);
  background:
    linear-gradient(#9bb9ff12 1px,transparent 1px) center / 24px 24px,
    linear-gradient(90deg,#9bb9ff12 1px,transparent 1px) center / 24px 24px,
    radial-gradient(ellipse at top,#243558,#101a2e 75%);
}
.strategy-trace, .strategy-accent, .strategy-wall { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.strategy-trace { stroke: #90e9ef; stroke-width: 2; stroke-dasharray: 4 5; }
.strategy-accent { stroke: #d4ff91; stroke-width: 2.5; }
.strategy-wall { stroke: #91aecf; stroke-width: 3; }
.strategy-bounce-point { fill: #d4ff91; }
.strategy h3 { margin: 0; font-size: .97rem; line-height: 1.35; }
.strategy p { margin: 7px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.strategy-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.final-call { text-align: center; background: linear-gradient(90deg,#10192ef2,#151023db),url("/assets/race-win-arena.webp") center / cover; }
.final-call .play { margin-top: 20px; }
.home-footer { padding: 27px 16px; border-top: 1px solid var(--edge); background: #090e26; color: var(--muted); text-align: center; font-size: .8rem; }
.home-footer p { margin: 12px 0 4px; }
.mobile-play { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-copy, .strategy.in-view, .mobile-play:not([hidden]) {
    animation: arrive .32s ease-out both;
  }
  .play { transition: transform .14s ease-out; }
}
@keyframes arrive {
  from { opacity: .68; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 800px) {
  .steps { max-width: 620px; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .topbar {
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-inline: max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));
  }
  .top-register { display: none; }
  .hero {
    grid-template-columns: minmax(0,1fr);
    gap: 22px;
    min-height: 0;
    padding-block: calc(76px + env(safe-area-inset-top)) 30px;
  }
  .hero-copy { text-align: center; }
  .hero-actions { justify-content: center; }
  h1 { font-size: clamp(1.85rem,8.8vw,3.5rem); }
  .hero-copy > p { margin: 12px auto 16px; }
  .hero-actions .play, .final-call .play { width: min(100%,420px); min-height: 52px; }
  .preview { justify-self: center; width: min(100%,340px); }
  .strategy-grid { max-width: 420px; grid-template-columns: 1fr; gap: 10px; }
  .strategy p { font-size: .93rem; }
  .home-footer { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .mobile-play {
    position: fixed;
    z-index: 3;
    inset: auto 0 0;
    display: grid;
    justify-items: center;
    padding: 8px max(16px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    border-top: 1px solid var(--edge);
    background: #10192efa;
  }
  .mobile-play .play { width: min(100%,420px); }
}
@media (max-width: 340px) {
  .top-account { padding-inline: 8px; }
  .preview { padding: 7px; }
}