:root {
  color-scheme: dark;
  --ink: #f3f6fa;
  --muted: #9aa3af;
  --panel: #1d2026;
  --panel-2: #15171b;
  --line: rgba(255, 255, 255, 0.11);
  --acid: #7dd3fc;
  --acid-dark: #09131a;
  --orange: #ff7448;
  --road: #2e3438;
  --grass: #15171b;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(125, 211, 252, 0.09), transparent 28rem),
    linear-gradient(150deg, #090a0d, #15171b 52%, #0d0f13);
}

button {
  font: inherit;
}

.game-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.hero,
.track-toolbar,
.controls,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hero {
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--acid);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 8px;
  font-size: clamp(2.25rem, 7vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.subtitle {
  max-width: 650px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 2vw, 1.12rem);
}

.button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.55);
}

.button-primary {
  border-color: var(--acid);
  color: var(--acid-dark);
  background: var(--acid);
  font-weight: 800;
}

.button-secondary,
.button-ghost {
  background: rgba(255, 255, 255, 0.04);
}

.button-ghost {
  min-height: 36px;
  padding-inline: 14px;
}

.rules {
  margin-bottom: 18px;
  padding: 22px 24px;
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 20px;
  background: rgba(125, 211, 252, 0.06);
}

.rules h2 {
  margin-bottom: 10px;
  font-size: 1rem;
}

.rules p {
  max-width: 900px;
  margin-bottom: 8px;
  color: #d7dce3;
  line-height: 1.55;
}

.rules p:last-child {
  margin-bottom: 0;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.stat {
  min-height: 82px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(29, 32, 38, 0.88);
}

.stat-label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat strong {
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
}

.stat-vector strong {
  color: var(--acid);
}

.track-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel-2);
  box-shadow: var(--shadow);
}

.track-toolbar {
  min-height: 58px;
  padding: 10px 14px 10px 20px;
  border-bottom: 1px solid var(--line);
}

.track-toolbar p {
  margin: 0;
  color: #d9dee6;
}

.canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 44 / 28;
  min-height: 330px;
  background: var(--grass);
}

/* In fullscreen the host itself is the full screen rectangle rather than a
   44:28 box — the game's own draw() already letterboxes the track inside
   whatever rectangle the canvas gets, so drop the fixed aspect-ratio and let
   it fill the screen; resizeCanvas (via the ResizeObserver already watching
   this element) redraws at the new, larger, real pixel size. */
.canvas-wrap:fullscreen,
.canvas-wrap:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  min-height: 0;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  cursor: crosshair;
}

canvas:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.72);
  outline-offset: -3px;
}

.controls {
  position: relative;
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(29, 32, 38, 0.92);
}

/* Mirrors .info-collapse-toggle on the other sidebar — sits on the boundary
   with the track column (`left: -14px` on a panel that shrinks to 0 width
   when collapsed lands it right where the map's new right edge is) so it
   stays in the same visual spot whether expanded or collapsed. No extra
   z-index needed here the way the left one needed: "controls" already comes
   after "track" in the DOM, so it naturally paints on top at that boundary. */
.controls-collapse-toggle {
  position: absolute;
  top: 16px;
  left: -14px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.92);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.controls-collapse-toggle:hover,
.controls-collapse-toggle:focus-visible {
  border-color: var(--acid);
  color: var(--acid);
  outline: none;
}

@media (min-width: 1101px) {
  .game-layout.controls-collapsed {
    grid-template-columns: minmax(210px, 230px) minmax(620px, 1fr) 0px;
  }

  .game-layout.info-collapsed.controls-collapsed {
    grid-template-columns: 0px minmax(620px, 1fr) 0px;
  }

  .game-layout.controls-collapsed .controls {
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .game-layout.controls-collapsed .controls > *:not(.controls-collapse-toggle) {
    display: none;
  }
}

/* Same reasoning as .info-collapse-toggle: collapsing only makes sense in
   the 3-column desktop layout. */
@media (max-width: 1100px) {
  .controls-collapse-toggle {
    display: none;
  }
}

.control-copy {
  min-width: 220px;
}

.control-copy p:last-child,
.keyboard-hint {
  margin: 0;
  color: var(--muted);
}

.control-pad {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  grid-template-rows: repeat(3, 58px);
  gap: 6px;
  grid-template-areas:
    ". up ."
    "left coast right"
    ". down .";
}

.control-button {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  color: var(--ink);
  background: #252931;
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.control-button small {
  display: block;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 650;
}

.control-button:hover,
.control-button:focus-visible,
.control-button.is-preview {
  transform: translateY(-2px);
  border-color: var(--acid);
  color: var(--acid);
  outline: none;
}

.control-button:disabled {
  opacity: 0.38;
  cursor: default;
}

.up { grid-area: up; }
.left { grid-area: left; }
.coast { grid-area: coast; }
.right { grid-area: right; }
.down { grid-area: down; }

.keyboard-hint {
  max-width: 220px;
  font-size: 0.83rem;
  line-height: 1.45;
}

.result-dialog {
  width: min(440px, calc(100% - 32px));
  padding: 30px;
  border: 1px solid rgba(125, 211, 252, 0.35);
  border-radius: 26px;
  color: var(--ink);
  background: #171a20;
  box-shadow: var(--shadow);
  text-align: center;
}

.result-dialog::backdrop {
  background: rgba(7, 8, 11, 0.8);
  backdrop-filter: blur(5px);
}

.result-dialog h2 {
  margin-bottom: 8px;
  font-size: 2rem;
}

.result-dialog p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.55;
}

.result-icon {
  margin-bottom: 10px;
  font-size: 2.5rem;
}

.dialog-actions {
  justify-content: center;
  margin-top: 22px;
}

.tiktok-status {
  margin-top: 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--acid);
}

@media (max-width: 760px) {
  .game-shell {
    width: min(100% - 20px, 1180px);
    padding-top: 20px;
  }

  .hero,
  .controls {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero .button {
    align-self: flex-start;
  }

  .dashboard {
    grid-template-columns: repeat(2, 1fr);
  }

  .canvas-wrap {
    min-height: 390px;
    aspect-ratio: auto;
  }

  .controls {
    align-items: center;
  }

  .control-copy,
  .keyboard-hint {
    width: 100%;
    max-width: none;
    text-align: center;
  }
}

@media (max-width: 430px) {
  .track-toolbar {
    align-items: flex-start;
  }

  .track-toolbar p {
    font-size: 0.88rem;
  }

  .control-pad {
    grid-template-columns: repeat(3, 68px);
  }

  .dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Layout de cockpit: pista central, telemetria e comandos nas laterais. */
.game-shell {
  width: min(1520px, calc(100% - 24px));
  padding: 8px 0 28px;
}

.hero {
  min-height: 58px;
  margin-bottom: 10px;
  padding: 0 6px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-dot {
  width: 16px;
  height: 16px;
  border: 4px solid #15171b;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 2px var(--acid), 0 0 22px rgba(125, 211, 252, 0.48);
}

.hero .eyebrow {
  margin-bottom: 2px;
  font-size: 0.62rem;
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.hero > .button {
  min-height: 38px;
  padding-inline: 15px;
  font-size: 0.88rem;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(210px, 230px) minmax(620px, 1fr) minmax(260px, 300px);
  grid-template-areas: "info track controls";
  align-items: start;
  gap: 10px;
}

.side-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(29, 32, 38, 0.94);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
}

.info-panel {
  grid-area: info;
  position: relative;
  /* Needed so the toggle button (below) stays above the track column when
     collapsed — half the button sits geometrically over the track column's
     own box at that boundary, which would otherwise paint over it (grid
     items with no z-index stack in DOM order, and track comes after info). */
  z-index: 2;
}

/* Sits on the boundary between the info column and the track (`right:
   -14px` on a panel whose own width shrinks to 0 when collapsed lands the
   button right where the map's left edge now is, with no JS repositioning
   needed) so it stays clickable — and in the same visual spot — whether the
   panel is expanded or collapsed. */
.info-collapse-toggle {
  position: absolute;
  top: 16px;
  right: -14px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(17, 19, 24, 0.92);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.info-collapse-toggle:hover,
.info-collapse-toggle:focus-visible {
  border-color: var(--acid);
  color: var(--acid);
  outline: none;
}

@media (min-width: 1101px) {
  .game-layout.info-collapsed {
    grid-template-columns: 0px minmax(620px, 1fr) minmax(260px, 300px);
  }

  .game-layout.info-collapsed .info-panel {
    padding: 0;
    border: 0;
    box-shadow: none;
    /* No overflow:hidden here — the panel's own box shrinks to 0 width, and
       the toggle button (right: -14px, see .info-collapse-toggle) has to be
       able to render outside that 0-width box to stay visible/clickable. */
  }

  .game-layout.info-collapsed .info-panel > *:not(.info-collapse-toggle) {
    display: none;
  }
}

/* Collapsing only makes sense in the 3-column desktop layout — below
   1100px "info" is already a full-width row under the map (see the media
   queries further down), so the toggle would have nothing meaningful to do
   and is hidden instead of trying to reconcile two very different grids. */
@media (max-width: 1100px) {
  .info-collapse-toggle {
    display: none;
  }
}

.back-link {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--acid);
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}

.side-brand .brand-dot {
  flex: 0 0 auto;
  margin-top: 6px;
}

.car-icon {
  --car-color: var(--acid);
  position: relative;
  display: inline-block;
  width: 18px;
  height: 10px;
  flex: 0 0 auto;
  border: 1px solid #080a0d;
  border-radius: 4px 6px 6px 4px;
  background: var(--car-color);
  box-shadow: 0 0 10px rgba(125, 211, 252, 0.5);
}

.car-icon::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #29313a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.car-icon::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 3px;
  width: 3px;
  height: 2px;
  border-radius: 1px;
  background: #080a0d;
  box-shadow: 9px 0 #080a0d, 0 12px #080a0d, 9px 12px #080a0d;
}

.brand-car {
  width: 28px;
  height: 15px;
  margin: 6px 2px 0 1px;
  border-radius: 6px 9px 9px 6px;
  box-shadow: 0 0 18px rgba(125, 211, 252, 0.56);
}

.brand-car::before {
  top: 3px;
  left: 10px;
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.brand-car::after {
  top: -3px;
  left: 5px;
  width: 4px;
  height: 3px;
  box-shadow: 14px 0 #080a0d, 0 18px #080a0d, 14px 18px #080a0d;
}

.computer-car-icon,
.race-panel-car.is-computer {
  --car-color: var(--orange);
  box-shadow: 0 0 10px rgba(255, 116, 72, 0.58);
}

.side-brand .eyebrow {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.35;
}

.mode-picker {
  margin-bottom: 10px;
}

.mode-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 5px;
}

.mode-button {
  min-height: 38px;
  padding: 5px 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.62rem;
  font-weight: 750;
  line-height: 1.15;
  cursor: pointer;
}

.mode-button:hover,
.mode-button.is-active {
  border-color: rgba(125, 211, 252, 0.65);
  color: var(--acid-dark);
  background: var(--acid);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  margin-bottom: 6px;
}

.panel-heading .eyebrow {
  margin: 0;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 12px rgba(125, 211, 252, 0.75);
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.stat {
  min-height: 54px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.stat-label {
  font-size: 0.62rem;
}

.stat strong {
  font-size: 1.1rem;
}

.race-status {
  min-height: 112px;
  margin-top: 8px;
  padding: 13px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 14px;
  background: rgba(125, 211, 252, 0.045);
}

.computer-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 116, 72, 0.28);
  border-radius: 12px;
  color: #ffc0ad;
  background: rgba(255, 116, 72, 0.06);
  font-size: 0.72rem;
  font-weight: 750;
}

.computer-status[hidden] {
  display: none;
}

.computer-status span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.computer-status i:not(.car-icon) {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px rgba(255, 116, 72, 0.7);
}

.computer-status strong {
  color: var(--orange);
  font-size: 0.95rem;
}

.computer-vector-parts {
  display: grid;
  grid-template-columns: repeat(2, 38px);
  gap: 4px;
}

.computer-vector-parts > span {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(255, 116, 72, 0.22);
  border-radius: 8px;
  background: rgba(255, 116, 72, 0.065);
}

.computer-vector-parts small {
  color: var(--muted);
  font-size: 0.62rem;
}

.computer-vector-parts strong {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.race-status p {
  margin: 6px 0 0;
  color: #d9dee6;
  font-size: 0.85rem;
  line-height: 1.45;
}

.restart-wide {
  width: 100%;
  margin-top: 8px;
}

/* The rest of the info-panel sidebar isn't reachable in real Fullscreen
   (only #canvasWrap is the fullscreen element) — without this, there was no
   way at all to start/restart a race once fullscreened. Mirrors the
   zoom-controls bar's floating-pill look so it reads as part of the same
   on-canvas toolbar, opposite corner so the two never collide. */
.fullscreen-controls {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
}

.fullscreen-controls .restart-wide {
  width: auto;
  margin-top: 0;
  background: rgba(17, 19, 24, 0.82);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.track-column {
  grid-area: track;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}

.track-card {
  width: 100%;
  grid-area: auto;
  border-radius: 20px;
}

.canvas-wrap {
  min-height: 0;
  aspect-ratio: 44 / 28;
}

.controls {
  display: flex;
  grid-area: controls;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  margin: 0;
}

.rules-wide {
  width: 100%;
}

.control-copy {
  width: 100%;
  min-width: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.control-copy p:last-child {
  font-size: 0.86rem;
  line-height: 1.4;
}

.control-pad {
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(3, 54px);
}

.keyboard-hint {
  width: 100%;
  max-width: none;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
  line-height: 1.7;
  text-align: left;
}


.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 100%;
  margin-top: 12px;
}

.ad-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.ad-slot-banner { margin: 12px 0 0; }

.rules-wide {
  order: -1;
}

.rules {
  position: relative;
  width: min(620px, calc(100% - 32px));
  margin: auto;
  padding: 28px;
  border: 1px solid rgba(125, 211, 252, 0.32);
  border-radius: 24px;
  color: var(--ink);
  background: #171a20;
  box-shadow: var(--shadow);
}

.rules::backdrop {
  background: rgba(7, 8, 11, 0.78);
  backdrop-filter: blur(5px);
}

.rules-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  font-size: 1.25rem;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .game-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "track track"
      "info controls";
  }

  .dashboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .race-status {
    min-height: 86px;
  }

  .controls {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    align-items: center;
  }

  .rules-wide {
    grid-column: 1 / -1;
  }

  .control-copy {
    align-self: stretch;
  }

  .keyboard-hint {
    grid-column: 1 / -1;
    text-align: center;
  }
}

@media (max-width: 700px) {
  .game-shell {
    width: min(100% - 12px, 1520px);
    padding-top: 6px;
  }

  .hero {
    align-items: center;
    flex-direction: row;
    margin-bottom: 6px;
  }

  .hero .eyebrow {
    display: none;
  }

  .hero h1 {
    font-size: 1.22rem;
  }

  .game-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "track"
      "controls"
      "info";
  }

  .canvas-wrap {
    min-height: 280px;
  }

  .dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .controls {
    display: flex;
  }

  .control-copy,
  .keyboard-hint {
    text-align: center;
  }

  .control-copy {
    order: -3;
  }

  .control-pad {
    order: -3;
  }
}

/* Ajustes compactos dos painéis laterais */
.mode-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.mode-button:first-child {
  grid-column: 1 / -1;
}

.mode-button {
  min-height: 40px;
  padding: 7px 6px;
  font-size: 0.68rem;
}

.vector-parts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 5px;
}

.vector-parts > span {
  display: flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 8px;
  background: rgba(125, 211, 252, 0.045);
}

.vector-parts small {
  color: var(--muted);
  font-size: 0.68rem;
}

.vector-parts strong {
  color: var(--acid);
  font-size: 0.92rem;
}

.controls .race-status {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
}

.controls .race-status p {
  margin-top: 4px;
  font-size: 0.76rem;
  line-height: 1.35;
}

.keyboard-hint {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding-top: 10px;
  line-height: 1.2;
  text-align: center;
}

.keyboard-hint span {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: column;
  gap: 4px;
  padding: 6px 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 0.58rem;
}

.keyboard-hint kbd {
  color: var(--ink);
  font: 700 0.62rem/1 system-ui, sans-serif;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .controls .race-status {
    grid-column: 1 / -1;
  }
}

.mode-label,
.mode-button {
  min-height: 36px;
  border-radius: 12px;
}

.mode-label {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 5px 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.6rem;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mode-buttons .mode-label {
  grid-column: auto;
  align-items: center;
  text-align: center;
}

.mode-label strong {
  color: var(--ink);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.mode-button {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 5px 6px;
  text-align: center;
}

.mode-button[data-mode="free"].is-active {
  border-color: var(--acid);
  color: var(--acid-dark);
  background: var(--acid);
}

.mode-button strong {
  font-size: 0.7rem;
  line-height: 1.1;
}

.mode-button small {
  margin-top: 3px;
  color: inherit;
  font-size: 0.56rem;
  font-weight: 600;
  opacity: 0.72;
}

.mode-button[data-mode="free"] {
  border-color: rgba(125, 211, 252, 0.25);
  color: var(--acid);
  background: rgba(125, 211, 252, 0.07);
}

.mode-versus {
  border-color: var(--acid);
  color: var(--orange);
  background: rgba(125, 211, 252, 0.07);
}

.mode-watch {
  border-color: rgba(255, 116, 72, 0.58);
  color: var(--orange);
  background: rgba(255, 116, 72, 0.1);
}

.mode-button[data-mode="free"]:hover,
.mode-button[data-mode="free"].is-active {
  border-color: #7dd3fc;
  color: #09131a;
  background: #7dd3fc;
}

.mode-versus:hover,
.mode-versus.is-active {
  border-color: var(--acid);
  color: #1b0b06;
  background: var(--orange);
  box-shadow: none;
}

.mode-watch:hover,
.mode-watch.is-active {
  border-color: var(--orange);
  color: #1b0b06;
  background: var(--orange);
}

.difficulty-picker {
  margin: -4px 0 10px;
  padding: 8px;
  border: 1px solid rgba(255, 116, 72, 0.28);
  border-radius: 13px;
  background: rgba(255, 116, 72, 0.055);
}

.track-picker {
  margin: -4px 0 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}

.track-picker-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.direction-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.direction-picker .stat-label {
  flex: 0 0 auto;
}

.direction-picker .track-buttons {
  flex: 1 1 auto;
}

.track-picker-heading small {
  overflow: hidden;
  max-width: 110px;
  color: var(--acid);
  font-size: 0.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.real-track-select {
  width: 100%;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #171a20;
  font-size: 0.62rem;
  font-weight: 700;
}

.real-track-select:disabled {
  opacity: 0.45;
}

.track-buttons button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #171a20;
  font-size: 0.63rem;
  font-weight: 750;
  cursor: pointer;
}

.track-buttons button:hover,
.track-buttons button.is-active {
  border-color: var(--acid);
  color: var(--acid-dark);
  background: var(--acid);
}

.track-buttons button:disabled {
  opacity: 0.45;
  cursor: wait;
}

.canvas-wrap {
  position: relative;
}

.track-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: inherit;
  color: var(--ink);
  background: rgba(9, 10, 13, 0.86);
  backdrop-filter: blur(5px);
}

.track-loading[hidden] {
  display: none;
}

.track-loading strong {
  margin-top: 13px;
  font-size: 0.9rem;
}

.track-loading small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.68rem;
}

.loading-wheel {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(125, 211, 252, 0.18);
  border-top-color: var(--acid);
  border-right-color: var(--orange);
  border-radius: 50%;
  animation: loading-spin 720ms linear infinite;
}

@keyframes loading-spin {
  to { transform: rotate(1turn); }
}

.difficulty-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.difficulty-heading strong {
  color: var(--orange);
  font-size: 0.72rem;
}

.difficulty-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.difficulty-buttons button {
  min-width: 0;
  padding: 7px 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #171a20;
  font-size: 0.61rem;
  font-weight: 750;
  cursor: pointer;
}

.difficulty-buttons button:hover,
.difficulty-buttons button.is-active {
  border-color: var(--orange);
  color: #1b0b06;
  background: var(--orange);
}

.info-panel.is-watching #racePanelTitle,
.info-panel.is-watching .stat-vector .vector-parts strong {
  color: var(--orange);
}

.info-panel.is-watching .stat-vector .vector-parts > span {
  border-color: rgba(255, 116, 72, 0.2);
  background: rgba(255, 116, 72, 0.055);
}

.restart-wide {
  margin: 0 0 14px;
}

.restart-wide.is-start {
  border-color: var(--acid);
  color: var(--acid-dark);
  background: var(--acid);
  font-weight: 850;
}

/* Conteúdo editorial (história/estratégia), comentários e rodapé de
   navegação -- mesmo bloco copiado em todo site do catálogo (onme.click
   e cada jogo), igual ao padrão de duplicação do zoom-pan.js. */

.page-content {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.page-content h2 {
  font-size: 1.25rem;
  margin: 0 0 12px;
}

.page-content h3 {
  font-size: 1.02rem;
  margin: 22px 0 10px;
  color: var(--acid);
}

.page-content p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 14px;
}

.page-content ul {
  color: var(--muted);
  line-height: 1.7;
  padding-left: 20px;
  margin: 0 0 14px;
}

.page-content li {
  margin-bottom: 6px;
}

.comments-section {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.comments-section h2 {
  font-size: 1.25rem;
  margin: 0 0 6px;
}

.comments-hint {
  color: var(--muted);
  margin: 0 0 18px;
  font-size: 0.92rem;
}

.comments-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}

.comments-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  left: -9999px;
}

.comments-form input[type="text"],
.comments-form textarea {
  width: 100%;
  padding: 10px 13px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
}

.comments-form input[type="text"]:focus,
.comments-form textarea:focus {
  outline: none;
  border-color: var(--acid);
}

.comments-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.comments-error {
  color: var(--orange);
  font-size: 0.85rem;
}

.comments-submit {
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: var(--acid);
  color: #0b1220;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  font-family: inherit;
}

.comments-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.comments-submit:hover:not(:disabled) {
  filter: brightness(1.08);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comment-item {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
}

.comment-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.comment-head strong {
  font-size: 0.88rem;
}

.comment-date {
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
}

.comment-item p {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.55;
}

.comments-empty,
.comments-loading {
  color: var(--muted);
  font-size: 0.88rem;
}

.site-foot {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.site-foot nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.site-foot nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-foot nav a:hover {
  color: var(--ink);
}

.site-foot small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.76rem;
}

/* Alinha .page-content/.comments-section com a coluna central da pista
   (mesmas frações de .game-layout), em vez de começar embaixo do painel
   esquerdo -- igual à home, onde esse conteúdo fica sob a coluna
   principal, não colado na borda esquerda da tela. */
.content-align {
  display: grid;
  grid-template-columns: minmax(210px, 230px) minmax(620px, 1fr) minmax(260px, 300px);
  gap: 10px;
}

.content-align > * {
  grid-column: 2;
}

@media (max-width: 1100px) {
  .content-align {
    grid-template-columns: 1fr;
  }
  .content-align > * {
    grid-column: 1;
  }
}