@font-face {
  font-family: "DSEG7";
  src: url("https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2") format("woff2");
}


html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #2a1b4a;
  font-family: "Trebuchet MS", Arial, sans-serif;
  color: #fff;
}

canvas {
  display: block;
}

/* Destello de los choques: viñeta roja que se apaga sola (la opacidad la maneja hud.js) */
#crash-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 60, 40, 0) 35%, rgba(255, 30, 30, 0.9) 100%);
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Panel de abajo a la izquierda (assets/textures/hud_panel.webp): minimapa, indicaciones y salud.
   Las ventanas del marco son transparentes: lo de adentro va debajo de la imagen. */
#panel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(34vw, 470px);
  aspect-ratio: 1386 / 569;
  container-type: inline-size;
}
#panel > * { position: absolute; }
#panel-frame { inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#minimap { background: #06121c; }
#route-box {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 2.4%; background: #07151f; overflow: hidden;
}
#route-hud {
  flex: 1; min-width: 0; white-space: pre; overflow: hidden; text-overflow: ellipsis;
  font: 700 2.3cqw/1.35 Arial, sans-serif; color: #e8f1ea; letter-spacing: 0.02em;
}
#route-hud .exit { color: #ffd23f; }
#route-limit {
  width: 7.2cqw; height: 7.2cqw; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 0.8cqw solid #d8262c; background: #f4f4ee; color: #111;
  font: 800 2.4cqw Arial, sans-serif;
}
#integrity-bar { background: #07151f; }
#integrity-fill { width: 100%; height: 100%; background: #3ddc84; }

/* Tablero (assets/textures/dashboard.webp): todo se ubica en el sistema de 1078x416 de la imagen */
#dash {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(30vw, 360px);
  aspect-ratio: 1078 / 416;
}

#dash-img, #dash-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#dash-img { image-rendering: pixelated; }

#dash-svg {
  overflow: visible;
  pointer-events: none;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

#dash-svg text {
  fill: #fff;
  font-weight: bold;
  text-anchor: middle;
}

#speed-value, #gear-value, #distance-value { font-family: "DSEG7", monospace; font-style: normal; }
#speed-value { font-size: 58px; fill: #ffd23f; paint-order: stroke; stroke: #d6283a; stroke-width: 4px; }
#gear-value { font-size: 50px; }
#distance-value { font-size: 26px; fill: #bfe3f2; }

#needle-speed line, #needle-rpm line {
  stroke: #ff3d3d;
  stroke-width: 7;
  stroke-linecap: round;
}

#needle-speed circle, #needle-rpm circle {
  fill: #0d1b2a;
  stroke: #bfe3f2;
  stroke-width: 4;
}

#gate-path {
  fill: none;
  stroke: rgba(191, 227, 242, 0.55);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slot {
  fill: rgba(0, 0, 0, 0.6);
  stroke: rgba(191, 227, 242, 0.6);
  stroke-width: 2;
}

.slot.on {
  fill: #3ddc84;
  stroke: #fff;
}

#gate-dot {
  fill: #d6283a;
  stroke: #fff;
  stroke-width: 2;
}

#gate-dot.in-gear { fill: #2fb86a; }

/* Palanca de sprites: la celda de 240x240 del atlas, con la base de la palanca en la base de la celda.
   La bocha se agarra con el mouse (#stick-hit sigue a la bocha). */
#stick {
  position: absolute;
  left: -9.46%;
  top: -67.8%;
  width: 43.4%;
  aspect-ratio: 260 / 440;
  background: url(assets/textures/shifter.webp) no-repeat;
  background-size: 800% 400%;
  background-position: 42.857% 66.667%;
  image-rendering: pixelated;
  transform-origin: 50% 94%;
  pointer-events: none;
}

#stick-hit {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

/* La mano derecha reemplaza al cursor: abierta, y cerrada mientras se sostiene la palanca */
body.hand-cursor, body.hand-cursor * { cursor: none !important; }

#hand {
  position: fixed;
  left: 0;
  top: 0;
  width: 90px;
  aspect-ratio: 200 / 197;
  background: url(assets/textures/hand_open.webp) center / 100% 100% no-repeat;
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 1000;
  will-change: transform;
}

body.grabbing #hand { background-image: url(assets/textures/hand_closed.webp); }

#no-webgl {
  position: fixed;
  top: 40%;
  width: 100%;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
  text-shadow: 2px 2px 0 #000;
}


/* Interior del auto en primera persona (tecla V). El escenario conserva la proporción de la
   imagen y cubre la pantalla, así volante y espejos quedan siempre en su lugar. */
#stage {
  --ar: 1.7768; /* ancho / alto de cockpit.webp */
  position: fixed;
  left: 50%;
  bottom: 0;
  width: max(100vw, calc(100vh * var(--ar)));
  height: max(100vh, calc(100vw / var(--ar)));
  transform: translateX(-50%);
  pointer-events: none;
  filter: url(#cabin-light);
}
#stage[hidden] { display: none; }
#cockpit, #wheel {
  position: absolute;
  image-rendering: pixelated;
}
#cockpit { inset: 0; width: 100%; height: 100%; }
#wheel {
  left: 50%;
  bottom: -16%;
  width: 31%;
  margin-left: -15.5%;
}

/* Espejos de tercera persona: tres marcos arriba (izquierdo, central y derecho = izquierdo espejado).
   El hueco (.view) es donde Mirrors.js dibuja la vista hacia atrás; el marco va encima. */
:root { --rear-w: min(26vw, 380px); --side-w: min(18vw, 260px); }
#mirrors {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
#mirrors[hidden] { display: none; }
.mirror { position: relative; }
.mirror img { position: relative; display: block; width: 100%; image-rendering: pixelated; }
.mirror .view { position: absolute; }
.mirror.flip { transform: scaleX(-1); }
#mirror-left, #mirror-right { width: var(--side-w); aspect-ratio: 1486 / 969; }
#mirror-left .view, #mirror-right .view { left: 29.07%; top: 20.02%; width: 65.21%; height: 58.41%; }
#mirror-rear { width: var(--rear-w); aspect-ratio: 1149 / 701; }
#mirror-rear .view { left: 4.87%; top: 26.96%; width: 93.21%; height: 34.09%; }

/* Menú: mientras está abierto no existe nada del juego en pantalla (HUD, espejos, destello) */
body.in-menu #hud, body.in-menu #mirrors, body.in-menu #crash-flash, body.in-menu #stage { display: none; }

#menu {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(4, 8, 20, 0.15) 30%, rgba(4, 8, 20, 0.6) 100%);
}
#menu[hidden] { display: none; }
#menu { box-shadow: inset 0 0 calc(180px * var(--kick, 0)) rgba(56, 182, 255, calc(0.28 * var(--kick, 0))); }
@media (min-aspect-ratio: 4/3) {
  #menu { justify-content: flex-start; padding-left: 6vw; background: linear-gradient(90deg, rgba(4, 8, 20, 0.7) 0%, rgba(4, 8, 20, 0.35) 45%, rgba(4, 8, 20, 0) 75%); }
  #menu-card { width: min(46vw, 560px); }
}
#menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(92vw, 560px);
}
#menu-card h1 { margin: 0 0 6px; width: 100%; }
#menu-logo { display: block; width: 100%; image-rendering: pixelated; transform: scale(calc(1 + 0.04 * var(--kick, 0))); transform-origin: 50% 60%;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 calc(26px * var(--kick, 0)) rgba(80, 200, 255, calc(0.9 * var(--kick, 0)))); }

#menu-name-row, #menu-main, #menu-wait { width: min(70vw, 300px); }
#menu-main, #menu-wait { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
#menu-main[hidden], #menu-wait[hidden] { display: none; }
#menu-name-row {
  display: flex; align-items: center; gap: 10px;
  font: 800 italic 14px/1 "Trebuchet MS", Arial, sans-serif; letter-spacing: 0.12em; color: #8fd8ff;
  text-shadow: 0 2px 0 #000;
}
/* Campo de texto con el marco de assets/textures/input_frame.webp: las puntas (160px de 386) quedan fijas, el medio se estira */
#menu input {
  box-sizing: border-box; min-width: 0; height: 48px;
  background: none; border: 0; border-style: solid; border-width: 0 20px;
  border-image: url(assets/textures/input_frame.webp) 0 160 fill / 0 20px / 0 stretch;
  image-rendering: pixelated;
  color: #fff; padding: 0 4px; text-align: center;
  font: 800 italic 18px "Trebuchet MS", Arial, sans-serif; letter-spacing: 0.06em; outline: none;
  text-shadow: 0 2px 0 #000;
}
#menu input:focus { filter: drop-shadow(0 0 8px rgba(80, 200, 255, 0.8)); }
#menu input::placeholder { color: #5f87a3; }
#menu-name { flex: 1; }

/* Botón con tres sprites: normal, resaltado (hover/foco) y apretado */
.menu-btn {
  appearance: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  aspect-ratio: 664 / 236;
  background: url(assets/textures/btn_normal.webp) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  color: #fff; font: 800 italic clamp(18px, 3.2vmin, 28px) "Trebuchet MS", Arial, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 2px 0 #000, 0 0 10px rgba(80, 190, 255, 0.7);
  padding-bottom: 3%;
}
.menu-btn:hover, .menu-btn:focus-visible { background-image: url(assets/textures/btn_hover.webp); outline: none; color: #e4f8ff; }
.menu-btn:active { background-image: url(assets/textures/btn_pressed.webp); color: #9ab; padding-top: 1%; }
#menu-main > .menu-btn { width: 100%; transform: scale(calc(1 + 0.025 * var(--snare, 0))); }
.menu-btn { text-shadow: 0 2px 0 #000, 0 0 calc(10px + 14px * var(--kick, 0)) rgba(80, 190, 255, calc(0.7 + 0.3 * var(--kick, 0))); }
#menu-name-row { color: color-mix(in srgb, #fff calc(var(--snare, 0) * 70%), #8fd8ff); }
#menu-join-row { display: flex; gap: 8px; align-items: center; }
#menu-code { width: 40%; text-align: center; text-transform: uppercase; }
#menu-join-row .menu-btn { flex: 1; min-width: 0; }

#menu-wait { text-align: center; }
#menu-wait-text { margin: 0; font: 700 italic 17px "Trebuchet MS", Arial, sans-serif; text-shadow: 0 2px 0 #000; }
#menu-code-big {
  font: 800 italic 64px "Trebuchet MS", Arial, sans-serif; letter-spacing: 0.2em; color: #ffd23f;
  text-shadow: 0 3px 0 #d6283a, 0 0 18px rgba(255, 90, 60, 0.6);
}
#menu-code-big[hidden] { display: none; }
#menu-error { margin: 0; min-height: 1.2em; color: #ff6a7a; font: 700 15px Arial, sans-serif; text-shadow: 0 2px 0 #000; text-align: center; }

/* Casilla "Intro al entrar" del menú */
#menu-intro-row { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: 700 italic 13px "Trebuchet MS", Arial, sans-serif; letter-spacing: 0.08em; color: #8fd8ff; text-shadow: 0 2px 0 #000; }
#menu-intro-row input { appearance: auto; width: 16px; height: 16px; min-width: 0; margin: 0; padding: 0; border: 0; border-image: none; background: none; accent-color: #38b6ff; filter: none; }

/* Intro (intro.js): todo en capas superpuestas, la mueve el reloj del audio. */
#intro { position: fixed; inset: 0; z-index: 2000; background: #050608; overflow: hidden; cursor: pointer; user-select: none;
  color: #e4f8ff; font: 800 italic 15px/1.4 "Trebuchet MS", Arial, sans-serif; }
.sin-intro #intro { display: none; }
#intro > * { position: absolute; inset: 0; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
#intro .carga { gap: 1.2em; color: #8fd8ff; letter-spacing: 0.3em; }
#intro .carga i { width: 14em; height: 3px; background: #16314a; overflow: hidden; position: relative; }
#intro .carga i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 30%; background: #38b6ff; animation: intro-cargando 1.1s ease-in-out infinite alternate; will-change: transform; }
@keyframes intro-cargando { to { transform: translateX(233%); } }
#intro .tap { letter-spacing: 0.3em; color: #8fd8ff; animation: intro-tap 1.2s steps(2) infinite; }
#intro .tap.espera { animation-duration: 0.3s; }
@keyframes intro-tap { 50% { opacity: 0.25; } }
#intro .estudio { gap: 1.4em; visibility: hidden; }
#intro .estudio canvas { width: min(42vmin, 300px); image-rendering: pixelated; }
#intro .estudio b { font: 800 italic clamp(0.9rem, 2.8vmin, 1.3rem)/1 "Trebuchet MS", Arial, sans-serif; letter-spacing: 0.32em; opacity: 0; }
#intro .estudio small { margin-top: -0.6em; letter-spacing: 0.4em; color: #5f87a3; opacity: 0; }
#intro .credito { gap: 0.5em; opacity: 0; }
#intro .credito small { letter-spacing: 0.3em; color: #5f87a3; }
#intro .credito b { font: 800 italic clamp(1.8rem, 6.5vmin, 3.2rem)/1 "Trebuchet MS", Arial, sans-serif; letter-spacing: 0.08em; }
#intro .riser { height: 1px; width: 70vw; background: #e4f8ff; box-shadow: 0 0 12px #e4f8ff; opacity: 0; }
#intro .titulo { opacity: 0; }
#intro .titulo img { width: min(84vw, 760px); image-rendering: pixelated; }
#intro .linea { inset: auto 0; height: 6px; margin: 0; background: rgba(143, 216, 255, 0.35); mix-blend-mode: screen; opacity: 0; }
#intro .flash { background: #fff; opacity: 0; }
#intro:not(.corre) .saltar { display: none; }
#intro .saltar { inset: auto 0 1.2em; font-size: 0.7rem; letter-spacing: 0.2em; color: #3a5266; }
html:not(.sin-intro) body:has(#intro) #hand { display: none; } /* la manita del cursor recién aparece con el menú */
body.hand-cursor #intro, body.hand-cursor #intro * { cursor: pointer !important; }

/* Aviso de la estación de servicio */
#station-msg {
  position: fixed; left: 50%; top: 17%; transform: translateX(-50%);
  min-width: 280px; padding: 10px 22px 12px; text-align: center; pointer-events: none;
  background: rgba(6, 28, 86, 0.82); border: 2px solid #fff; border-radius: 6px;
  color: #fff; font: 700 14px/1.3 Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 0 24px rgba(120, 170, 255, 0.55);
}
#station-msg[hidden] { display: none; }
#station-title { display: block; font-size: 20px; letter-spacing: 0.12em; }
#station-sub { display: block; opacity: 0.85; font-size: 12px; margin-top: 2px; }
#station-bar { height: 8px; margin-top: 8px; background: rgba(255, 255, 255, 0.2); border-radius: 4px; overflow: hidden; }
#station-bar i { display: block; height: 100%; width: 0; background: #3ddc84; transition: width 0.12s linear; }