:root {
  color-scheme: dark;
  --ink: #f3f0e7;
  --muted: #9c9b91;
  --panel: #181a16;
  --panel-light: #20231d;
  --line: rgba(243, 240, 231, .13);
  --orange: #ff6a1a;
  --green: #9fc744;
  font-family: "Arial Narrow", "Roboto Condensed", Impact, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% -20%, rgba(159, 199, 68, .12), transparent 34rem),
    radial-gradient(circle at 110% 80%, rgba(255, 106, 26, .11), transparent 40rem),
    #10120f;
  overflow-x: hidden;
}

button, a { font: inherit; }

.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.app-shell {
  width: min(1920px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(16px, 2.2vw, 38px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(16px, 2vw, 30px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  letter-spacing: .045em;
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #11120f;
  background: var(--orange);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.08em;
  clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
}

.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; line-height: 1; }
.brand small { margin-top: 5px; color: var(--muted); font-size: 9px; letter-spacing: .22em; }

.topbar-actions { display: flex; align-items: center; gap: 16px; }

.build-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.build-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }

.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 15px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: rgba(32, 35, 29, .82);
  cursor: pointer;
}

.icon-button:hover { border-color: rgba(255, 106, 26, .75); }
.icon-button:focus-visible { border-color: rgba(255, 106, 26, .9); outline: 2px solid #fff; outline-offset: 3px; }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.icon-button span { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 18vw, 330px);
  gap: clamp(14px, 1.7vw, 28px);
  align-items: stretch;
}

.game-column { min-width: 0; }

.game-stage {
  position: relative;
  min-height: 470px;
  height: min(77vh, 1080px);
  border: 1px solid var(--line);
  background:
    linear-gradient(115deg, rgba(9, 11, 9, .6), rgba(9, 11, 9, .86)),
    repeating-linear-gradient(105deg, transparent 0 42px, rgba(255,255,255,.025) 43px 44px),
    radial-gradient(circle at 68% 45%, #4d5236 0, #282b21 32%, #11130f 72%);
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,.34);
}

.game-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, var(--orange) 0 9px, transparent 9px), linear-gradient(0deg, rgba(0,0,0,.3), transparent 45%);
  pointer-events: none;
}

#gameFrame { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: #111; }

.orientation-notice {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  color: var(--ink);
  text-align: center;
  background: rgba(10, 12, 10, .94);
}

.orientation-notice span { color: var(--orange); font-size: 58px; line-height: 1; }
.orientation-notice strong { font-size: 24px; letter-spacing: .13em; }
.orientation-notice small { color: var(--muted); font: 700 12px/1.4 system-ui, sans-serif; }

/* The Godot viewport is authored at 16:9. Once live, keep the host frame on
   that same stage ratio so "keep" stretch never crops the sides of the HUD. */
.game-stage.is-running {
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Once the engine is running, the race is the product. Use the available
   viewport at every desktop width instead of leaving the launch-page notes
   rail and a large band of unused space beside or below the 16:9 canvas. */
.app-shell.is-playing {
  --playing-chrome: 102px;
  width: 100%;
  max-width: none;
  padding: clamp(10px, 1.25vw, 22px);
}

.app-shell.is-playing .topbar { margin-bottom: 8px; }
.app-shell.is-playing .game-layout { display: block; }
.app-shell.is-playing .ride-card,
.app-shell.is-playing .stage-footer { display: none; }
.app-shell.is-playing .game-stage {
  width: min(100%, calc((100dvh - var(--playing-chrome)) * 16 / 9));
  margin-inline: auto;
}

.game-stage:fullscreen {
  width: 100vw;
  max-width: none;
  height: 100vh;
  aspect-ratio: auto;
  border: 0;
}

.start-panel, .loading-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(30px, 5vw, 80px);
  background:
    linear-gradient(90deg, rgba(13,15,12,.95) 0%, rgba(13,15,12,.76) 45%, rgba(13,15,12,.18) 100%),
    repeating-linear-gradient(112deg, transparent 0 60px, rgba(255,255,255,.018) 61px 62px);
}

.start-panel[hidden] { display: none; }

.start-copy { max-width: 700px; }
.eyebrow { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .25em; }
.start-copy h1 { margin: 14px 0 16px; font-size: clamp(46px, 6.5vw, 108px); line-height: .82; letter-spacing: -.055em; text-transform: uppercase; }
.start-copy h1 em { color: transparent; -webkit-text-stroke: 1px rgba(243,240,231,.82); font-style: normal; }
.start-copy p { max-width: 530px; margin: 0 0 28px; color: #c5c4b9; font-family: system-ui, sans-serif; font-size: clamp(13px, 1.1vw, 17px); }

.start-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  min-width: min(100%, 270px);
  padding: 18px 19px 18px 23px;
  border: 0;
  color: #15150f;
  background: var(--orange);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .12em;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.start-button:hover, .start-button:focus-visible { background: #ff8a46; outline: 2px solid #fff; outline-offset: 3px; }
.start-button b { font-size: 22px; }
.start-hint { margin: 12px 0 0; color: var(--muted); font-family: system-ui, sans-serif; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.start-feedback { max-width: 530px; margin: 14px 0 0; padding: 10px 12px; color: #ffd8c1; border-left: 3px solid var(--orange); background: rgba(255, 106, 26, .1); font-family: system-ui, sans-serif; font-size: 12px; }

.loading-panel { align-items: center; justify-content: center; gap: 8px; background: rgba(15,17,14,.96); }
.loading-panel[hidden] { display: none; }
.loading-panel strong { margin-top: 15px; font-size: 14px; letter-spacing: .18em; }
.loading-panel span { color: var(--muted); font-family: system-ui, sans-serif; font-size: 12px; }
.loader-wheel { width: 46px; height: 46px; border: 4px solid rgba(255,255,255,.12); border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-panel progress { width: min(320px, 70%); height: 8px; margin-top: 10px; accent-color: var(--orange); }
@keyframes spin { to { transform: rotate(360deg); } }

.stage-footer { display: flex; justify-content: space-between; gap: 18px; padding: 12px 2px 0; color: #777a70; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
#runtimeStatus { color: var(--green); }

.ride-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 38px;
  padding: clamp(22px, 2vw, 32px);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(33,36,29,.98), rgba(22,24,20,.98));
}

.ride-card h2 { margin: 7px 0 22px; font-size: 31px; text-transform: uppercase; letter-spacing: -.025em; }
.controls-grid { display: grid; gap: 14px; margin: 0; }
.controls-grid div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.controls-grid dt { color: var(--ink); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.controls-grid dd { margin: 0; color: var(--muted); font-family: system-ui, sans-serif; font-size: 11px; }
.advanced-controls { margin-top: 13px; border-bottom: 1px solid var(--line); }
.advanced-controls summary { padding: 0 0 11px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.advanced-controls summary:hover { color: var(--ink); }
.advanced-controls summary:focus-visible { color: var(--ink); outline: 2px solid var(--orange); outline-offset: 4px; }
.advanced-grid { display: grid; gap: 8px; margin: 0 0 13px; padding: 0; }
.advanced-grid div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; }
.advanced-grid dt { color: var(--ink); font-size: 10px; font-weight: 900; }
.advanced-grid dd { margin: 0; color: var(--muted); font-family: system-ui, sans-serif; font-size: 10px; }
.event-list ul { display: grid; gap: 13px; margin: 17px 0 0; padding: 0; list-style: none; }
.event-list li { display: flex; align-items: center; gap: 10px; color: #c9c8bd; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.event-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.event-dot.green { background: #8db76b; }.event-dot.blue { background: #54a4c9; }.event-dot.gold { background: #d9ad55; }
.save-note { margin: 0; padding: 15px; color: var(--muted); border-left: 2px solid var(--green); background: rgba(159,199,68,.06); font-family: system-ui, sans-serif; font-size: 10px; line-height: 1.5; }

/* The authored game viewport is 1600x900. Below this breakpoint the notes rail
   made the live canvas too small to read, so the race becomes the sole visual
   priority while running and the reference material moves below the fold. */
@media (max-width: 1450px) {
  .game-layout { grid-template-columns: 1fr; }
  .game-stage { height: min(70vh, 760px); }
  .ride-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(230px, 1fr); }
  .controls-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 18px; }
  .controls-grid div { grid-template-columns: 76px 1fr; }
  .save-note { grid-column: 1 / -1; }

  .app-shell.is-playing {
    --playing-chrome: 80px;
    padding: 12px;
  }
}

@media (max-width: 620px) {
  .app-shell { padding: 12px; }
  .brand-mark { width: 41px; height: 41px; }
  .build-status, .icon-button span { display: none; }
  .icon-button { padding: 0 11px; }
  .game-stage { min-height: 350px; height: 58vh; }
  .start-panel { padding: 25px; }
  .start-copy h1 { font-size: clamp(43px, 16vw, 72px); }
  .stage-footer { display: none; }
  .ride-card { grid-template-columns: 1fr; }
  .controls-grid { grid-template-columns: 1fr; }
  .save-note { grid-column: auto; }
}

@media (pointer: coarse) and (orientation: landscape) {
  .app-shell.is-playing {
    --playing-chrome: calc(max(4px, env(safe-area-inset-top)) + max(4px, env(safe-area-inset-bottom)));
    padding-top: max(4px, env(safe-area-inset-top));
    padding-right: max(4px, env(safe-area-inset-right));
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    padding-left: max(4px, env(safe-area-inset-left));
  }
  .app-shell.is-playing .topbar { display: none; }
}

@media (pointer: coarse) and (orientation: portrait) {
  .app-shell.is-playing .orientation-notice { display: grid; }
  .app-shell.is-playing #gameFrame { filter: saturate(.4) brightness(.32); pointer-events: none; }
}

/* Short landscape windows need the same play-first treatment as touch devices.
   Keep a reachable fullscreen control in its own gutter, never over the HUD. */
@media (max-height: 500px) and (orientation: landscape) {
  .app-shell.is-playing {
    --playing-chrome: calc(max(4px, env(safe-area-inset-top)) + max(4px, env(safe-area-inset-bottom)));
    padding: max(4px, env(safe-area-inset-top)) max(56px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }
  .app-shell.is-playing .topbar {
    display: flex;
    position: fixed;
    top: max(4px, env(safe-area-inset-top));
    right: max(4px, env(safe-area-inset-right));
    margin: 0;
    z-index: 5;
  }
  .app-shell.is-playing .brand,
  .app-shell.is-playing .build-status,
  .app-shell.is-playing .icon-button span { display: none; }
  .app-shell.is-playing .icon-button { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .loader-wheel { animation: none; border-color: var(--orange); }
}