* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; overflow: hidden; background: #0a0a12;
  font-family: 'Segoe UI', Arial, sans-serif;
  /* juego: nada de selección de texto ni menús de pulsación larga */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
canvas { display: block; touch-action: none; }
.oculto { display: none !important; }

/* ---------- Pantalla de inicio ---------- */
#pantalla-inicio {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #05294d 0%, #063a70 55%, #0a4d8f 100%);
}
.tarjeta { text-align: center; color: #fff; padding: 32px 40px; max-width: 560px; }
.logo-metro {
  width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 14px;
  background: #f36f21; color: #fff; font-size: 54px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif;
}
.tarjeta h1 { font-size: 26px; letter-spacing: 2px; margin-bottom: 4px; }
.tarjeta .sub { color: #9ec7ef; margin-bottom: 18px; font-size: 15px; }
.instrucciones { font-size: 13px; line-height: 1.9; color: #cfe3f7; margin-bottom: 22px; }
.instrucciones b { color: #ffd27a; }
#btn-iniciar {
  font-size: 18px; font-weight: 700; letter-spacing: 1px; color: #05294d;
  background: #ffd27a; border: none; border-radius: 10px; padding: 14px 38px; cursor: pointer;
}
#btn-iniciar:hover { background: #ffe1a3; }
#btn-iniciar:disabled { opacity: .45; cursor: wait; }
.cargando { margin-top: 14px; font-size: 12px; color: #7fa8d3; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; color: #fff; }
#hud-superior { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.cenefa {
  display: inline-block; background: #063a70; color: #fff; font-weight: 800;
  font-size: 17px; letter-spacing: 2px; padding: 7px 18px; border-radius: 4px;
  border-bottom: 3px solid #f36f21;
}
#hud-distancia { display: block; margin-top: 6px; font-size: 13px; color: #ffd27a; text-shadow: 0 1px 3px #000; }
#hud-velocidad {
  background: rgba(4, 18, 34, .78); border-radius: 10px; padding: 8px 16px; text-align: right;
}
#vel-num { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.unidad { font-size: 12px; margin-left: 5px; color: #9ec7ef; }

#hud-prompt {
  position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%);
  background: rgba(4, 18, 34, .85); border: 1px solid #f36f21; border-radius: 8px;
  padding: 10px 22px; font-size: 15px;
}
#hud-prompt b { color: #ffd27a; }
#hud-aviso {
  position: absolute; top: 18%; left: 50%; transform: translateX(-50%);
  background: rgba(6, 58, 112, .92); border-radius: 8px; padding: 12px 26px;
  font-size: 17px; font-weight: 600; text-align: center; border-bottom: 3px solid #f36f21;
}

#mira { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(255,255,255,.75); }

/* medidor de FPS (esquina inferior derecha) */
#medidor-fps {
  position: absolute; right: 10px; bottom: 8px;
  font: 700 13px Consolas, monospace;
  background: rgba(4, 18, 34, .72); border-radius: 6px; padding: 4px 9px;
  color: #9ec7ef; letter-spacing: 0.5px;
}
#medidor-fps.fps-bien { color: #6fdc8c; }

/* contador de pasajeros que suben (▲) y bajan (▼) */
#contador-pax {
  position: absolute; left: 12px; bottom: 8px;
  font: 700 13px Consolas, monospace;
  background: rgba(4, 18, 34, .72); border-radius: 6px; padding: 4px 10px;
  color: #cfe3f7; letter-spacing: 0.5px;
}
#medidor-fps.fps-medio { color: #ffd27a; }
#medidor-fps.fps-mal { color: #ff6b5c; }

/* ---------- Panel de cabina ---------- */
#panel-cabina {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; align-items: center; pointer-events: auto;
}
#panel-cabina button {
  background: rgba(4, 18, 34, .85); color: #fff; border: 1px solid #38618c;
  border-radius: 8px; padding: 12px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#panel-cabina button:hover { border-color: #f36f21; }
.btn-puerta.abierta { background: #f36f21 !important; border-color: #f36f21 !important; }
.tecla { font-size: 10px; background: #38618c; border-radius: 3px; padding: 1px 5px; margin-left: 4px; }
.grupo-manipulador { display: flex; gap: 8px; align-items: center; }
#notch-display {
  min-width: 64px; text-align: center; font-size: 24px; font-weight: 800;
  background: #041222; border: 2px solid #38618c; border-radius: 8px; padding: 8px 10px;
}
#notch-display.traccion { color: #6fdc8c; border-color: #6fdc8c; }
#notch-display.freno { color: #ffb35c; border-color: #ffb35c; }
#notch-display.emergencia { color: #ff5c5c; border-color: #ff5c5c; }
#btn-notch-mas, #btn-notch-menos { font-size: 20px !important; width: 46px; }
#btn-emergencia { color: #ff5c5c !important; border-color: #ff5c5c !important; }

/* botón de pantalla completa (siempre visible) */
#btn-fullscreen {
  position: absolute; top: 76px; right: 16px;
  width: 42px; height: 42px; font-size: 20px; line-height: 1;
  background: rgba(4, 18, 34, .72); color: #cfe3f7;
  border: 1px solid #38618c; border-radius: 8px;
  pointer-events: auto; cursor: pointer;
}
#btn-fullscreen:hover { border-color: #f36f21; }

/* ---------- Controles táctiles (solo dispositivos touch: body.tactil) ---------- */
#joystick, #botones-accion { display: none; }
body.tactil #joystick {
  display: block; position: absolute; left: 22px; bottom: 44px;
  width: 128px; height: 128px; border-radius: 50%;
  background: rgba(4, 18, 34, .35); border: 2px solid rgba(158, 199, 239, .45);
  pointer-events: auto; touch-action: none;
}
body.tactil.en-cabina #joystick { display: none; }
#joystick-punta {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(158, 199, 239, .55); border: 2px solid rgba(255,255,255,.5);
}
body.tactil #botones-accion {
  display: flex; flex-direction: column; gap: 10px;
  position: absolute; right: 14px; bottom: 96px; pointer-events: auto;
}
#botones-accion button {
  background: rgba(4, 18, 34, .7); color: #fff; border: 1px solid #38618c;
  border-radius: 10px; padding: 13px 14px; font-size: 13px; font-weight: 700;
  min-width: 96px; touch-action: none;
}
#btn-acc-r, #btn-acc-b { display: none; }
body.tactil.en-cabina #btn-acc-r, body.tactil.en-cabina #btn-acc-b { display: block; }

@media (max-width: 700px) {
  .instrucciones { display: none; }
  #vel-num { font-size: 26px; }
  #panel-cabina { gap: 6px; }
  #panel-cabina button { padding: 10px 8px; font-size: 11px; }
}