/* ==========================================================================
   MetroSim — Alpha 0.6 · Estilos
   1. Base y variables
   2. Pantalla inicial
   3. Pantalla de juego y HUD superior
   4. Esquema de línea
   5. Selector de mando
   6. Panel del conductor (velocidad, estación, puertas)
   7. Panel del pasajero, ayuda y mensajes
   8. Responsive
   9. Alpha 0.3: sonido, inversor y viajeros
   10. Alpha 0.4: Línea 3, señales, horarios y pasajero a pie
   11. Alpha 0.6: tarjeta bip!, boletería, fundido de cabina
   ========================================================================== */

/* ---------- 1. Base y variables ---------- */
:root {
  color-scheme: dark;
  --bg: #05080d;
  --panel: #0a121bdd;
  --panel-border: #ffffff22;
  --text: #f4f7fb;
  --muted: #91a1b4;
  --line: #8b5a2b;            /* café, Línea 3 de Santiago */
  --power: #4fd6ff;
  --neutral: #e8eef5;
  --brake: #ffb547;
  --emergency: #ff4b4b;
  --ok: #6fe39a;
  --warn: #ffd166;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, .screen { width: 100%; height: 100%; overflow: hidden; }
button { font: inherit; }
.hidden { display: none !important; }
kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid #ffffff33;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #ffffff10;
  font: 600 10px/1.4 inherit;
  text-align: center;
  color: #dfe7f0;
}
.hud-label, .small-label, .eyebrow {
  font-size: 10px;
  letter-spacing: 1.7px;
  color: var(--muted);
  text-transform: uppercase;
}

/* ---------- 2. Pantalla inicial ---------- */
.start-screen {
  display: grid;
  place-items: center;
  position: relative;
  background: radial-gradient(circle at 50% 20%, #19334c 0, #080f18 42%, #030509 100%);
}
.start-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background:
    linear-gradient(90deg, #fff1 1px, transparent 1px),
    linear-gradient(#fff1 1px, transparent 1px);
  background-size: 42px 42px;
}
.start-card { position: relative; width: min(92vw, 520px); text-align: center; }
.metro-mark {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 19px;
  background: var(--line);
  font-size: 43px;
  font-weight: 900;
  box-shadow: 0 12px 38px #e42a2d66;
}
.start-card h1 { font-size: clamp(48px, 8vw, 76px); line-height: 1; letter-spacing: -3px; }
.tagline { margin: 12px 0 30px; color: #a8b4c2; }
.mode-selection { display: grid; gap: 12px; }
.mode-card {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 18px;
  border: 1px solid #ffffff1e;
  border-radius: 16px;
  color: #fff;
  background: #ffffff0d;
  text-align: left;
  cursor: pointer;
  transition: .2s;
}
.mode-card:hover { background: #ffffff18; border-color: #ffffff50; transform: translateY(-2px); }
.mode-card span:nth-child(2) { display: grid; gap: 4px; flex: 1; }
.mode-card small { color: #aab6c5; }
.mode-icon {
  display: grid !important;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: #ffffff12;
  font-size: 27px;
}
.mode-card b { font-size: 30px; color: #94a4b6; font-weight: 300; }
.start-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-top: 24px;
  font-size: 11px;
  color: #8796a8;
}
.start-keys kbd { margin-right: 3px; }
.version { position: relative; margin: 0 0 18px; color: #667586; font-size: 11px; letter-spacing: 1px; text-align: center; }   /* debajo de las tarjetas (no se monta sobre ellas) */

/* ---------- 3. Pantalla de juego y HUD superior ---------- */
.game-screen, #gameContainer, #hud { position: absolute; inset: 0; }
.game-screen { background: #000; }
#gameContainer canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#gameContainer canvas:active { cursor: grabbing; }
#hud { pointer-events: none; }

.hud-top {
  position: absolute;
  top: 16px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.hud-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
  backdrop-filter: blur(12px);
}
.line-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--line);
  font-weight: 900;
  font-size: 15px;
}
.hud-route { display: grid; gap: 2px; }
.hud-route strong { font-size: 13px; letter-spacing: 1px; }
.mode-pill {
  padding: 4px 9px;
  border-radius: 20px;
  background: #ffffff14;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #cfe0f1;
}
.hud-clock {
  display: grid;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
  backdrop-filter: blur(12px);
  text-align: right;
}
#clock { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 1px; }

.back-button {
  position: absolute;
  top: 74px;
  left: 18px;
  padding: 7px 12px;
  color: #e5ecf4;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: #081018b8;
  cursor: pointer;
  font-size: 12px;
}
.back-button:hover { background: #12202ed0; }

/* ---------- 4. Esquema de línea ---------- */
.line-strip {
  position: absolute;
  top: 26px;
  left: 50%;
  width: min(34vw, 420px);
  height: 30px;
  transform: translateX(-50%);
}
.line-strip-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  box-shadow: 0 0 10px #e42a2d88;
}
.line-strip-stop {
  position: absolute;
  top: 2px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: #fff;
}
.line-strip-stop span {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #c9d5e2;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}
.line-strip-train {
  position: absolute;
  top: -1px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 0 2px #0a121b, 0 0 14px #ffffffaa;
  transition: left .2s linear;
}

/* ---------- 5. Selector de mando ---------- */
.selector-hud {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 8px;
  padding: 12px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: var(--panel);
  backdrop-filter: blur(12px);
  text-align: center;
}
#notchList { list-style: none; display: grid; gap: 3px; }
#notchList li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 6px;
  min-width: 132px;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  color: #6f8092;
  font-size: 10px;
  text-align: left;
  transition: background .12s, color .12s;
}
#notchList li b { font-size: 15px; letter-spacing: .5px; }
#notchList li.power b { color: #2e7e98; }
#notchList li.brake b { color: #9a7234; }
#notchList li.emergency b { color: #9a3434; }
#notchList li.active { color: #0a121b; font-weight: 700; }
#notchList li.active b { color: #0a121b; }
#notchList li.active.power { background: var(--power); box-shadow: 0 0 16px #4fd6ff66; }
#notchList li.active.neutral { background: var(--neutral); }
#notchList li.active.brake { background: var(--brake); box-shadow: 0 0 16px #ffb54766; }
#notchList li.active.emergency { background: var(--emergency); color: #fff; box-shadow: 0 0 20px #ff4b4b99; animation: blink 0.8s steps(2) infinite; }
#notchList li.active.emergency b { color: #fff; }
#notchList li.separator { margin-top: 4px; }
@keyframes blink { 50% { opacity: .55; } }

/* ---------- 6. Panel del conductor ---------- */
.driver-hud {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--panel);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 50px #0009;
}
.panel {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 18px;
  border-left: 1px solid #ffffff12;
}
.panel:first-child { border-left: 0; }
.station-sub { font-size: 11px; color: #a9b7c5; }

/* Velocímetro circular */
.speed-panel {
  position: relative;
  grid-template-columns: auto;
  place-items: center;
  width: 150px;
  padding: 8px 12px;
}
.speed-gauge { width: 118px; height: 118px; }
.gauge-track, .gauge-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(135deg);
  transform-origin: 60px 60px;
}
.gauge-track { stroke: #ffffff14; stroke-dasharray: 235.6 314.2; }
.gauge-fill { stroke: var(--power); stroke-dasharray: 0 314.2; transition: stroke .2s; }
.gauge-fill.over { stroke: var(--emergency); }
.gauge-limit { stroke: var(--emergency); stroke-width: 3; stroke-linecap: round; }
.speed-readout {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
}
.speed-number { font-size: 38px; font-weight: 800; line-height: .95; font-variant-numeric: tabular-nums; }
.limit-sign {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 3px solid var(--emergency);
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 11px;
  font-weight: 800;
}

/* Estación y precisión de parada */
.station-panel { min-width: 230px; }
.station-panel strong { font-size: 20px; letter-spacing: .5px; }
.precision { display: grid; gap: 3px; margin-top: 4px; }
.precision span { font-size: 11px; font-variant-numeric: tabular-nums; color: #cfe0f1; }
.precision-scale {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: #ffffff14;
  overflow: hidden;
}
.precision-ok {
  position: absolute;
  left: 37.5%;
  width: 25%;
  top: 0;
  bottom: 0;
  background: #6fe39a40;
}
.precision-center { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ok); }
.precision-marker {
  position: absolute;
  top: 1px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff;
}

/* Puertas */
.door-panel { min-width: 170px; }
.door-row { display: flex; align-items: center; gap: 8px; }
.door-row strong { font-size: 15px; letter-spacing: .5px; }
.lamp {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2a74ff;
  box-shadow: 0 0 10px #2a74ff;
}
.lamp.open { background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.lamp.moving { background: var(--warn); box-shadow: 0 0 12px var(--warn); animation: blink .6s steps(2) infinite; }

/* ---------- 7. Pasajero, ayuda y mensajes ---------- */
/* Abajo a la derecha: no tapa el centro de la vista */
.passenger-hud {
  position: absolute;
  bottom: 22px;
  right: 18px;
  display: grid;
  gap: 4px;
  width: min(360px, calc(100% - 36px));
  padding: 12px 18px;
  border: 1px solid var(--panel-border);
  border-left: 6px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  backdrop-filter: blur(14px);
}
.passenger-hud strong { font-size: 20px; letter-spacing: 1px; }

.controls-help {
  position: absolute;
  bottom: 22px;
  left: 18px;
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  background: #060b10aa;
  color: #c4cfdb;
  font-size: 11px;
}

.message {
  position: absolute;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 16px;
  border: 1px solid #ffffff22;
  border-radius: 9px;
  background: #101b27e6;
  color: #ddebfa;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s;
}
.message.visible { opacity: 1; }
.message.ok { border-color: #6fe39a88; color: #c8f5d8; }
.message.warn { border-color: #ffd16688; color: #ffe7a8; }
.message.alert { border-color: #ff4b4bbb; background: #3a0e10e6; color: #ffd0d0; }

/* ---------- 8. Responsive ---------- */
@media (max-width: 980px) {
  .controls-help { display: none; }
  .line-strip { display: none; }
}
@media (max-width: 720px) {
  .driver-hud { width: calc(100% - 20px); bottom: 12px; }
  .panel { padding: 10px 10px; }
  .speed-panel { width: 112px; }
  .speed-gauge { width: 90px; height: 90px; }
  .speed-number { font-size: 28px; }
  .station-panel { min-width: 0; flex: 1; }
  .station-panel strong { font-size: 15px; }
  .door-panel { display: none; }
  .selector-hud { top: auto; bottom: 150px; transform: none; right: 10px; padding: 8px 6px; }
  #notchList li { min-width: 0; grid-template-columns: 1fr; padding: 3px 8px; }
  #notchList li small { display: none; }
  .hud-route, .mode-pill { display: none; }
  .message { white-space: normal; width: calc(100% - 40px); text-align: center; }
}

/* ---------- 9. Alpha 0.3: sonido, inversor y viajeros ---------- */
.start-note { margin-top: 14px; font-size: 11px; color: #7f8fa2; }

.hud-right { display: flex; align-items: flex-start; gap: 10px; }
.sound-button {
  pointer-events: auto;
  padding: 9px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel);
  color: #dfe7f0;
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(12px);
}
.sound-button:hover { background: #12202ed0; }
.sound-button.off { color: #8796a8; }

.reverser-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.reverser-pills span {
  padding: 5px 0;
  border-radius: 6px;
  background: #ffffff0d;
  color: #6f8092;
  font-size: 13px;
  font-weight: 800;
}
.reverser-pills span.active[data-dir="1"] { background: var(--ok); color: #0a121b; box-shadow: 0 0 12px #6fe39a66; }
.reverser-pills span.active[data-dir="0"] { background: var(--neutral); color: #0a121b; }
.reverser-pills span.active[data-dir="-1"] { background: var(--brake); color: #0a121b; box-shadow: 0 0 12px #ffb54766; }

.station-sub.onboard { color: #8fb4d6; }
#doorHint.ready { color: var(--ok); }

@media (max-width: 720px) {
  .sound-button { padding: 7px 9px; font-size: 11px; }
}

/* ---------- 10. Alpha 0.4: Línea 3, señales, horarios y pasajero a pie ---------- */
.metro-mark { background: #e1251b; }
.line-dot {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--line);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  vertical-align: middle;
}
.line-dot.big { width: 64px; height: 64px; font-size: 34px; margin: 0 auto 6px; }

/* Tarjeta del modo pasajero con selector de estación */
.mode-card-passenger { cursor: default; }
.mode-card-passenger:hover { transform: none; }
.station-select { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: #aab6c5; }
.station-select select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #ffffff2a;
  border-radius: 8px;
  background: #0b141e;
  color: #f4f7fb;
  font: inherit;
}
.go-button, .ghost-button {
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.go-button { border: 0; background: var(--line); color: #fff; }
.go-button:hover { filter: brightness(1.15); }
.ghost-button { border: 1px solid #ffffff33; background: transparent; color: #dfe7f0; }
.ghost-button:hover { background: #ffffff12; }

/* Pantalla de carga */
.loading-screen { display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #2a1d12 0, #07090c 60%); }
.loading-card { display: grid; gap: 8px; text-align: center; }
.loading-card strong { font-size: 22px; }
.loading-card small { color: #9aa8b8; }

/* Esquema de línea con 21 estaciones: solo se rotulan terminales y la estación actual */
.line-strip { width: min(46vw, 620px); }
.line-strip-stop { width: 9px; height: 9px; margin-left: -4.5px; top: 3.5px; border-width: 2px; }
.line-strip-stop.combo { box-shadow: 0 0 0 2px #ffffff55; }
.line-strip-stop span { display: none; }
.line-strip-stop.terminal span, .line-strip-stop.current span { display: block; }
.line-strip-stop.current { background: var(--warn); }
.line-strip-stop.current span { color: var(--warn); font-weight: 700; }

/* Panel de señal y horario */
.signal-panel { min-width: 170px; }
.signal-row { display: flex; align-items: center; gap: 10px; }
.signal-row > span:last-child { display: grid; gap: 1px; }
.signal-row strong { font-size: 15px; letter-spacing: .5px; }
.signal-head {
  display: grid;
  gap: 3px;
  padding: 4px;
  border-radius: 6px;
  background: #05080b;
  border: 1px solid #ffffff1a;
}
.signal-head i { display: block; width: 11px; height: 11px; border-radius: 50%; background: #1f262d; }
.signal-head i.on[data-a="red"] { background: #ff3030; box-shadow: 0 0 10px #ff3030; }
.signal-head i.on[data-a="yellow"] { background: #ffb000; box-shadow: 0 0 10px #ffb000; }
.signal-head i.on[data-a="green"] { background: #30ff7a; box-shadow: 0 0 10px #30ff7a; }
.delay { font-size: 18px; font-variant-numeric: tabular-nums; }
.delay.ontime { color: var(--ok); }
.delay.late { color: var(--emergency); }
.delay.early { color: var(--warn); }

/* Pasajero a pie */
.pax-hint { color: #cfe0f1; margin-top: 2px; }
.crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #ffffffaa;
  box-shadow: 0 0 0 1px #0008;
}
.help-walker, .help-driver { display: block; }

/* Resumen de servicio / viaje */
.summary {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000a;
  backdrop-filter: blur(4px);
}
.summary-card {
  display: grid;
  gap: 10px;
  width: min(92vw, 440px);
  padding: 22px;
  border: 1px solid var(--panel-border);
  border-top: 6px solid var(--line);
  border-radius: 16px;
  background: #0b131c;
}
.summary-card h2 { font-size: 24px; }
.summary-card ul { list-style: none; display: grid; gap: 6px; }
.summary-card li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #ffffff10; font-size: 14px; }
.summary-card li b { font-variant-numeric: tabular-nums; }
.summary-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

@media (max-width: 980px) {
  .signal-panel { display: none; }
}

/* ---------- 11. Alpha 0.6: tarjeta bip!, boletería, fundido de cabina ---------- */
.card-pill {
  align-self: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: #e1251b;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 16px #0006;
}
.card-pill.low { background: #5a1a1a; box-shadow: 0 0 0 2px #ff6b6b inset; }

.ticket-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0008;
  backdrop-filter: blur(3px);
  z-index: 5;
}
.ticket-card {
  display: grid;
  gap: 8px;
  width: min(94vw, 460px);
  max-height: 92vh;
  overflow: auto;
  padding: 18px;
  border-radius: 16px;
  border-top: 6px solid #e1251b;
  background: #0b131c;
  border-left: 1px solid var(--panel-border);
  border-right: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
}
.ticket-head { display: flex; align-items: center; gap: 12px; }
.ticket-head-text { display: grid; flex: 1; }
.ticket-head-text strong { font-size: 18px; }
.bip-logo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 36px;
  border-radius: 9px;
  background: #e1251b;
  font-weight: 900;
  font-size: 18px;
}
.ticket-close { width: 34px; height: 34px; border: 1px solid #ffffff33; border-radius: 8px; background: transparent; color: #dfe7f0; cursor: pointer; }
.ticket-balance {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 12px;
  border-radius: 10px;
  background: #ffffff0a;
}
.ticket-balance > div { display: grid; }
.ticket-balance strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.ticket-fares { display: grid; gap: 4px; }
.fare-row { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 7px; background: #ffffff08; font-size: 13px; }
.fare-row.current { background: #ffd16622; color: #ffe7a8; font-weight: 700; }
.ticket-amounts, .ticket-pay { display: flex; flex-wrap: wrap; gap: 6px; }
.ticket-amounts button, .ticket-pay button {
  padding: 8px 12px;
  border: 1px solid #ffffff2a;
  border-radius: 8px;
  background: #ffffff0a;
  color: #f4f7fb;
  cursor: pointer;
  font-weight: 700;
}
.ticket-amounts button.selected, .ticket-pay button.selected { background: #e1251b; border-color: #e1251b; }
.ticket-status { min-height: 38px; padding: 8px 10px; border-radius: 8px; background: #ffffff08; font-size: 13px; color: #cfe0f1; }
.ticket-status.ok { background: #6fe39a1f; color: #c8f5d8; }
.ticket-status.error { background: #ff4b4b22; color: #ffd0d0; }
.ticket-actions { display: flex; justify-content: space-between; gap: 8px; }
.ticket-panel.busy .ticket-actions button { opacity: .5; pointer-events: none; }
.ticket-panel.busy .ticket-status::after { content: " ⏳"; }

.fade {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  color: #dfe7f0;
  font-size: 16px;
  letter-spacing: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s;
  z-index: 6;
}
.fade.visible { opacity: 1; }

/* Tarjetas del menú con selector: el botón nunca se sale del recuadro */
.mode-card-passenger > span:nth-child(2) { min-width: 0; }
.station-select select { max-width: 100%; }
.mode-card .go-button { flex-shrink: 0; }
@media (max-width: 560px) {
  .mode-card-passenger { flex-wrap: wrap; }
  .mode-card-passenger .go-button { width: 100%; }
}

/* ---------- Puntaje del conductor ---------- */
.score-pill {
  position: relative;
  display: grid;
  gap: 1px;
  min-width: 96px;
  padding: 8px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
  backdrop-filter: blur(12px);
  text-align: right;
  transition: border-color .4s, box-shadow .4s;
}
.score-pill.perfect { border-color: var(--ok); box-shadow: 0 0 18px #6fe39a55; }
#scoreTotal { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.score-streak { font-size: 10px; font-weight: 700; color: var(--warn); letter-spacing: 1px; }
.score-streak:empty, .score-best:empty { display: none; }
.score-best { font-size: 10px; color: var(--muted); }
.score-float {
  position: absolute;
  right: 12px;
  top: 100%;
  font-weight: 800;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
}
.score-float.gain { color: var(--ok); }
.score-float.loss { color: var(--emergency); }
.score-float.show { animation: scoreFloat 1.4s ease-out forwards; }
@keyframes scoreFloat {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(22px); }
}
@media (max-width: 640px) {
  .score-pill { min-width: 0; padding: 6px 10px; }
  #scoreTotal { font-size: 16px; }
  .score-best { display: none; }
}

/* ---------- Pantalla inicial renovada: logotipo oficial, franja de líneas y tarjetas en columnas ---------- */
.start-screen { overflow-y: auto; place-items: start center; padding: 40px 16px 24px; }
.start-card { width: min(100%, 1120px); }
.metro-mark {
  display: block;
  width: 132px;
  height: auto;
  margin: 0 auto 14px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 10px 30px #e1251b55);
}
.line-stripe { display: flex; justify-content: center; gap: 6px; margin: 0 auto 16px; }
.line-stripe i { width: 26px; height: 5px; border-radius: 3px; background: var(--c); }
.start-card h1 {
  background: linear-gradient(180deg, #fff 30%, #b9c6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tagline { margin: 10px 0 28px; font-size: 16px; }
.mode-selection { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.mode-card.mode-card-passenger {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff10, #ffffff06);
  backdrop-filter: blur(8px);
}
.mode-card.mode-card-passenger::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent, #e1251b);
}
.mode-card-passenger:nth-child(2) { --accent: #f6a500; }
.mode-card-passenger:nth-child(3) { --accent: #2bb0ed; }
.mode-card-passenger:hover { border-color: #ffffff40; background: linear-gradient(180deg, #ffffff16, #ffffff08); }
.mode-card-passenger > span:nth-child(2) { flex: 1; align-content: start; }
.mode-card strong { font-size: 18px; }
.mode-card small { font-size: 13px; line-height: 1.45; }
.station-select { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 8px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.station-select select { padding: 8px 10px; font-size: 13px; letter-spacing: 0; text-transform: none; }
.mode-card .go-button { width: 100%; padding: 12px; background: var(--accent, #e1251b); color: #fff; font-size: 15px; }
.mode-card-passenger:nth-child(2) .go-button { color: #1a1200; }
.mode-icon { background: color-mix(in srgb, var(--accent, #e1251b) 20%, transparent); }
.start-keys { padding: 12px 16px; border: 1px solid #ffffff14; border-radius: 12px; background: #ffffff08; }
.start-note { margin-top: 14px; color: #8796a8; font-size: 12px; }
@media (max-width: 560px) {
  .start-screen { padding-top: 24px; }
  .metro-mark { width: 104px; }
}

/* ---------- Alpha 0.9: cuenta bancaria, misiones, locales de la calle ---------- */
.bank-pill {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 7px 12px;
  border: 1px solid #3fae6a66;
  border-radius: 12px;
  background: #0d2418dd;
  backdrop-filter: blur(12px);
  text-align: right;
}
.bank-pill strong { font-size: 17px; font-variant-numeric: tabular-nums; color: #c8f5d8; }
.bank-pill.low { border-color: #ff6b6b99; background: #2a1012dd; }
.bank-pill.low strong { color: #ffd0d0; }
.money-float {
  position: absolute;
  right: 12px;
  top: 100%;
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.money-float.gain { color: var(--ok); }
.money-float.loss { color: #ff8a8a; }
.money-float.show { animation: scoreFloat 1.8s ease-out forwards; }

.mission-tracker {
  position: absolute;
  top: 116px;
  left: 18px;
  display: grid;
  gap: 4px;
  width: min(320px, calc(100% - 36px));
  padding: 10px 14px;
  border: 1px solid var(--panel-border);
  border-left: 5px solid var(--warn);
  border-radius: 12px;
  background: var(--panel);
  backdrop-filter: blur(12px);
}
.mission-tracker strong { font-size: 15px; }
.mission-tracker ol, .mission-item ol { list-style: none; display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.mission-tracker li::before, .mission-item li::before { content: "○ "; }
.mission-tracker li.current, .mission-item li.current { color: #ffe7a8; font-weight: 700; }
.mission-tracker li.current::before, .mission-item li.current::before { content: "▶ "; }
.mission-tracker li.done, .mission-item li.done { color: #7fcf9a; text-decoration: line-through; }
.mission-tracker li.done::before, .mission-item li.done::before { content: "✔ "; }

.store-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #ffffff12;
  font-size: 26px;
}
.store-card, .mission-card { border-top-color: #3fae6a; }
.mission-card { width: min(94vw, 560px); border-top-color: var(--warn); }
.store-list { display: grid; gap: 6px; }
.store-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #ffffff22;
  border-radius: 9px;
  background: #ffffff0a;
  color: #f4f7fb;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.store-item:hover { background: #ffffff18; }
.store-item b { font-variant-numeric: tabular-nums; }
.store-item.expensive { opacity: .55; }
.store-item.mission { border-color: #ffd16688; background: #ffd1661a; color: #ffe7a8; }
#storePanel.busy .store-item { opacity: .5; pointer-events: none; }
#storePanel.busy .ticket-status::after { content: " ⏳"; }

.mission-active:empty { display: none; }
.mission-offers { display: grid; gap: 8px; }
.mission-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #ffffff1c;
  border-radius: 10px;
  background: #ffffff08;
}
.mission-item.active { border-color: #ffd16688; background: #ffd16612; }
.mission-item-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mission-item-head b { font-size: 15px; }
.mission-reward { color: var(--ok); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mission-item p { font-size: 13px; color: #cfdae6; line-height: 1.35; }
.mission-item button { justify-self: end; padding: 7px 12px; }

.photo-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 7;
}
.photo-flash.show { animation: photoFlash .7s ease-out; }
@keyframes photoFlash { 0% { opacity: .95; } 100% { opacity: 0; } }

@media (max-width: 720px) {
  .mission-tracker { top: 112px; left: 10px; padding: 8px 10px; width: min(250px, calc(100% - 20px)); }
  .mission-tracker ol { display: none; }
  .bank-pill { padding: 5px 8px; }
  .bank-pill strong { font-size: 14px; }
}

/* Esquema de línea bajo la barra superior (no se monta sobre el nombre de la línea) */
#gameScreen .line-strip { top: 76px; }

/* ===== Libreta de misiones (tablero J) ===== */
.mission-book { margin: 10px 0 6px; padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 12px; background: #ffffff08; }
.mission-book-head { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.mission-book ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mission-book li { padding: 4px 9px; border-radius: 999px; font-size: 12px; border: 1px dashed #ffffff33; color: var(--muted); }
.mission-book li.done { border: 1px solid var(--ok); color: #fff; background: #6fe39a22; }

/* ===== Celebración: libreta completa (celebration.js) ===== */
.celebration {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, #00000055, #000000cc);
  animation: celebIn .45s ease-out;
}
.celebration.leaving { animation: celebOut .35s ease-in forwards; }
@keyframes celebIn { from { opacity: 0; } }
@keyframes celebOut { to { opacity: 0; } }
.celebration .confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.celebration-card {
  position: relative; overflow: hidden; width: min(520px, 100%); max-height: 100%; overflow-y: auto;
  padding: 26px 24px 22px; border-radius: 22px; text-align: center; color: var(--text);
  background: linear-gradient(180deg, #121c28f2, #0a121bf5); border: 2px solid var(--medal);
  box-shadow: 0 0 60px color-mix(in srgb, var(--medal) 55%, transparent), 0 20px 60px #000a;
  animation: celebPop .7s cubic-bezier(.2, 1.6, .4, 1) both .1s;
}
@keyframes celebPop { from { transform: scale(.4) translateY(40px); opacity: 0; } }
.celebration-rays {
  position: absolute; left: 50%; top: 92px; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: 0; opacity: .22;
  background: repeating-conic-gradient(var(--medal) 0 9deg, transparent 9deg 22deg);
  border-radius: 50%; animation: spin 16s linear infinite; pointer-events: none;
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
}
@keyframes spin { to { transform: rotate(1turn); } }
.celebration-card > :not(.celebration-rays) { position: relative; z-index: 1; }
.medal { display: inline-grid; justify-items: center; margin-bottom: 6px; animation: medalDrop 1s cubic-bezier(.3, 1.5, .5, 1) both .35s; }
@keyframes medalDrop { from { transform: translateY(-120px) rotate(-25deg); opacity: 0; } }
.medal-ribbon { width: 46px; height: 34px; margin-bottom: -6px; background: linear-gradient(90deg, var(--medal) 0 33%, #fff 33% 66%, var(--medal) 66%); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); }
.medal-disc {
  position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd23f 40%, #c9952a 75%, #8a6416);
  box-shadow: inset 0 0 0 7px #e8b53a, inset 0 0 0 11px #fff4, 0 6px 22px #0008;
}
.medal-disc b {
  display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; font: 900 34px/1 Arial, sans-serif; color: #fff;
  background: var(--medal); box-shadow: 0 0 0 4px #fff, 0 3px 8px #0006; text-shadow: 0 2px 2px #0005;
}
.medal-disc::after {
  content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, #ffffffaa 50%, transparent 60%);
  animation: shine 2.6s ease-in-out infinite 1.3s;
}
@keyframes shine { from { transform: translateX(-70%); } 60%, to { transform: translateX(70%); } }
.celebration-kicker { margin: 6px 0 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--medal); filter: brightness(1.8); }
.celebration-title { margin: 4px 0 2px; font-size: clamp(26px, 6vw, 38px); font-weight: 900; letter-spacing: .02em; text-shadow: 0 0 24px color-mix(in srgb, var(--medal) 70%, transparent); }
.celebration-sub { margin: 0 0 14px; color: var(--muted); }
.celebration-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.celebration-types li { padding: 5px 10px; border-radius: 999px; font-size: 13px; background: #6fe39a22; border: 1px solid var(--ok); animation: stamp .45s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes stamp { from { transform: scale(2.2); opacity: 0; } }
.celebration-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.celebration-stats div { padding: 10px; border-radius: 12px; background: #ffffff0d; }
.celebration-stats span { display: block; font-size: 12px; color: var(--muted); }
.celebration-stats b { font-size: 24px; }
.celebration-stats .c-reward { color: var(--ok); }
.celebration-grand { margin: 0 0 12px; padding: 12px; border-radius: 12px; background: linear-gradient(90deg, #ffd23f33, #ff5d8f33, #4fd6ff33); animation: stamp .6s both 2.2s; }
.celebration-grand p { margin: 0 0 4px; font-weight: 900; letter-spacing: .04em; color: #ffd23f; }
.celebration-grand span { font-size: 13px; color: var(--text); }
.celebration-grand.hidden { display: none; }
.celebration-lines { display: flex; justify-content: center; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.celebration-lines li {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 800 13px/1 Arial, sans-serif;
  color: #ffffff55; border: 2px dashed #ffffff33;
}
.celebration-lines li.won { color: #fff; background: var(--c); border: 2px solid #ffd23f; }
.celebration-lines li.new { animation: stamp .6s cubic-bezier(.2, 1.8, .4, 1) both 1.8s; box-shadow: 0 0 16px #ffd23f; }
.celebration .go-button { padding: 12px 22px; font-size: 16px; background: var(--medal); border-radius: 12px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .celebration-rays, .medal-disc::after { animation: none; }
}

/* ===== Tienda Metro (shopUI.js) ===== */
.shop-launch {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; width: 100%; margin: 14px 0 4px;
  padding: 12px 16px; border-radius: 14px; border: 1px solid #ffd23f66; background: linear-gradient(90deg, #ffd23f1f, #4fd6ff14);
  color: var(--text); font-size: 15px; cursor: pointer;
}
.shop-launch:hover { border-color: #ffd23f; }
.shop-launch span { font-size: 12px; color: var(--muted); }
.shop-overlay { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: #000a; }
.shop-card {
  display: flex; flex-direction: column; width: min(720px, 100%); max-height: min(88vh, 100%);
  border-radius: 18px; background: #0b131df5; border: 1px solid var(--panel-border); box-shadow: 0 20px 60px #000b; overflow: hidden;
}
.shop-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 10px; }
.shop-head > div:first-child { flex: 1; }
.shop-head h2 { margin: 0; font-size: 22px; }
.shop-kicker { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.shop-balance { text-align: right; }
.shop-balance span { display: block; font-size: 11px; color: var(--muted); }
.shop-balance b { font-size: 20px; color: var(--ok); }
.shop-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--panel-border); background: #ffffff10; color: var(--text); cursor: pointer; }
.shop-tabs { display: flex; gap: 6px; padding: 0 18px 10px; border-bottom: 1px solid var(--panel-border); }
.shop-tabs button { flex: 1; padding: 8px; border-radius: 10px; border: 1px solid transparent; background: #ffffff0a; color: var(--muted); cursor: pointer; font-size: 14px; }
.shop-tabs button.active { background: #ffffff1a; color: var(--text); border-color: #ffffff30; }
.shop-notice { margin: 10px 18px 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: #ffffff10; }
.shop-notice.ok { background: #6fe39a22; color: var(--ok); }
.shop-notice.warn { background: #ffb54722; color: var(--brake); }
.shop-notice.hidden { display: none; }
.shop-body { overflow-y: auto; padding: 4px 18px 18px; }
.shop-section h3 { margin: 16px 0 2px; font-size: 15px; }
.shop-section p { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.shop-item { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 6px; border-radius: 12px; background: #ffffff08; border: 1px solid #ffffff12; }
.shop-item.owned { border-color: #6fe39a55; background: #6fe39a0d; }
.shop-item-icon { display: grid; place-items: center; width: 64px; min-width: 64px; font-size: 28px; }
.shop-item-text { flex: 1; min-width: 0; }
.shop-item-text b { font-size: 14px; }
.shop-item-text p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.shop-item-buy button { min-width: 96px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.shop-item-buy .go-button.poor { opacity: .55; }
.shop-item-buy button:disabled { cursor: default; opacity: .6; }
.train-preview { width: 64px; height: 26px; }
.line-dot { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font: 800 12px/1 Arial, sans-serif; }
.home-room { display: block; width: 100%; height: auto; margin: 4px 0 10px; border-radius: 12px; }
.album-line { padding: 10px; margin-bottom: 8px; border-radius: 12px; background: #ffffff08; }
.album-head { display: flex; align-items: center; gap: 10px; }
.album-head b { flex: 1; }
.album-count { font-size: 13px; color: var(--muted); }
.album-bar { height: 5px; margin: 8px 0; border-radius: 3px; background: #ffffff14; overflow: hidden; }
.album-bar i { display: block; height: 100%; }
.album-line ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.album-line li { padding: 2px 7px; border-radius: 6px; font-size: 11px; color: #ffffff40; border: 1px dashed #ffffff22; }
.album-line li.got { color: #fff; border-style: solid; background: #ffffff10; }
@media (max-width: 560px) {
  .shop-item { flex-wrap: wrap; }
  .shop-item-buy { width: 100%; }
  .shop-item-buy button { width: 100%; }
}

/* ---------- Botón para instalar la app (PWA) ---------- */
.install-launch { margin-top: 6px; border-color: #4fd6ff55; background: linear-gradient(90deg, #4fd6ff1a, #3ddc8414); }
.install-launch:hover { border-color: #4fd6ff; }
.install-launch[hidden] { display: none; }

/* ---------- Modo Creador ---------- */
.creator-launch { margin-top: 6px; border-color: #3ddc8477; background: linear-gradient(90deg, #3ddc841f, #ffd23f14); }
.creator-launch:hover { border-color: #3ddc84; }
.creator-launch[hidden] { display: none; }

/* ---------- Versión móvil: celular y tablet ---------- */
/* Toques sin zoom por doble toque ni menú de mantener presionado; sin "rebote" de la página */
html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, select, .shop-launch { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.game-screen { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Altura real de la pantalla (la barra del navegador del celular no tapa nada) */
@supports (height: 100dvh) {
  html, body, .screen { height: 100dvh; }
  .ticket-card { max-height: 92dvh; }
  .shop-card { max-height: min(88dvh, 100%); }
}
/* Muesca y esquinas redondeadas */
.start-screen {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.ticket-panel, .summary, .shop-overlay, .celebration {
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
/* Las tarjetas del menú nunca se salen de la pantalla (antes medían 300 px mínimo) */
.mode-selection { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.mode-card-passenger > span:nth-child(2) { width: 100%; grid-template-columns: minmax(0, 1fr); }
.station-select { min-width: 0; }
.station-select select { width: 100%; min-height: 40px; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .start-screen { padding-top: max(18px, env(safe-area-inset-top)); }
  .metro-mark { width: 84px; margin-bottom: 10px; }
  .line-stripe { margin-bottom: 10px; }
  .start-card h1 { font-size: 46px; letter-spacing: -2px; }
  .tagline { margin: 6px 0 18px; font-size: 14px; }
  .mode-selection { gap: 12px; }
  .mode-card.mode-card-passenger { padding: 16px; gap: 10px; }
  .mode-card-passenger > .mode-icon { display: none !important; }
  .mode-card strong { font-size: 17px; }
  .mode-card small { font-size: 12.5px; }
  .shop-launch { font-size: 14px; padding: 12px; }
  .version { font-size: 9px; padding: 0 8px; }
}
/* Celular en horizontal: portada compacta para que las tarjetas aparezcan sin desplazar */
@media (max-height: 520px) and (orientation: landscape) {
  .start-screen { padding-top: max(12px, env(safe-area-inset-top)); }
  .metro-mark { width: 60px; margin-bottom: 6px; }
  .line-stripe { margin-bottom: 6px; }
  .start-card .eyebrow { display: none; }
  .start-card h1 { font-size: 38px; letter-spacing: -1.5px; }
  .tagline { margin: 4px 0 14px; font-size: 13px; }
  .mode-selection { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .mode-card.mode-card-passenger { padding: 14px; gap: 8px; }
  .mode-card-passenger > .mode-icon { width: 36px; height: 36px; font-size: 19px; }
  .mode-card strong { font-size: 15px; }
  .mode-card small { font-size: 11.5px; line-height: 1.35; }
  .mode-card .go-button { padding: 10px; font-size: 14px; }
  .loading-card strong { font-size: 18px; }
}
/* Ventanas (boletería, locales, misiones, resumen) en pantallas bajas */
@media (max-height: 520px) {
  .ticket-card { padding: 12px 14px; gap: 6px; }
  .ticket-balance { padding: 8px 10px; }
  .ticket-balance strong { font-size: 22px; }
  .ticket-status { min-height: 0; }
  .summary-card { max-height: 100%; overflow: auto; padding: 14px 16px; gap: 6px; }
  .summary-card h2 { font-size: 19px; }
  .summary-card li { padding: 3px 0; font-size: 13px; }
  .shop-head { padding: 10px 14px 6px; }
  .shop-head h2 { font-size: 18px; }
  .shop-tabs { padding: 0 14px 8px; }
  .shop-body { padding: 4px 14px 14px; }
}
/* Botones de las ventanas más fáciles de tocar */
@media (pointer: coarse) {
  .ticket-close, .shop-close { width: 42px; height: 42px; }
  .ticket-amounts button, .ticket-pay button { min-height: 42px; padding: 8px 14px; }
  .store-item { min-height: 46px; align-items: center; }
  .summary-actions { flex-wrap: wrap; }
  .summary-actions button { flex: 1; min-height: 44px; }
  .mission-item button { min-height: 40px; }
  .shop-tabs button { min-height: 40px; }
  .back-button { min-height: 36px; }
}
@media (max-width: 420px) {
  .shop-tabs { overflow-x: auto; }
  .shop-tabs button { flex: 0 0 auto; font-size: 13px; }
  .shop-head { flex-wrap: wrap; }
  .ticket-actions { flex-wrap: wrap; }
  .ticket-actions button { flex: 1; }
}
.shop-head, .shop-tabs, .shop-notice { flex-shrink: 0; }

/* Horario compacto en el panel de estación (cuando el panel de señal y horario no cabe) */
.schedule-mini { display: none; font-size: 12px; color: #a9b7c5; font-variant-numeric: tabular-nums; }
.schedule-mini .delay { font-size: 13px; }
@media (max-width: 980px) { .schedule-mini { display: block; } }

/* Finalizar turno (modo Conductor): al lado del botón Menú */
.end-shift-button { left: 104px; border-color: #ffd16655; }
/* Resumen en pantallas bajas (celular en horizontal): dos columnas y botones siempre a la vista */
@media (max-height: 520px) {
  .summary-card { width: min(94vw, 780px); grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
  .summary-card ul { grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 0; overflow-y: auto; min-height: 0; }
  .summary-card li { font-size: 12px; }
  .summary-actions { margin-top: 2px; }
}
/* ---------- Tutorial interactivo (tutorial.js) ---------- */
.tutorial-launch {
  justify-self: start; margin-top: 8px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid #ffd16666; background: #ffd16614; color: #ffe7a8; font-size: 12px; font-weight: 600;
}
.tutorial-launch:hover { border-color: var(--warn); background: #ffd16626; }
.tutorial {
  position: absolute; top: 118px; z-index: 4; display: grid; gap: 7px;
  width: min(360px, calc(100% - 32px)); padding: 12px 14px 12px;
  border: 1px solid #ffd16655; border-left: 5px solid var(--warn); border-radius: 14px;
  background: #0b141ef0; backdrop-filter: blur(14px); box-shadow: 0 14px 40px #000a;
  transition: border-color .25s, background .25s;
}
.tutorial-driver { left: 18px; }
.tutorial-passenger { right: 18px; }
.tutorial.enter { animation: tutorialIn .35s ease-out; }
.tutorial.passed { border-color: #6fe39a; background: #0d2219f0; }
.tutorial header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tutorial-badge { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--warn); }
.tutorial.passed .tutorial-badge::after { content: " · ✔ ¡BIEN!"; color: var(--ok); }
.tutorial-count { font-size: 11px; color: var(--muted); }
.tutorial-bar { height: 4px; border-radius: 2px; background: #ffffff14; overflow: hidden; }
.tutorial-bar i { display: block; height: 100%; background: var(--warn); transition: width .4s; }
.tutorial-title { font-size: 17px; }
.tutorial-text { font-size: 13px; line-height: 1.45; color: #d6e1ec; }
.tutorial-live {
  padding: 6px 9px; border-radius: 8px; background: #ffffff0d; font-size: 12.5px; font-weight: 700;
  color: #ffe7a8; font-variant-numeric: tabular-nums;
}
.tutorial-live[hidden] { display: none; }
.tutorial footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.tutorial footer button { padding: 7px 12px; border-radius: 9px; cursor: pointer; font-size: 12.5px; }
.tutorial-next[hidden], .tutorial-wait[hidden], .tutorial-skip[hidden] { display: none; }
.tutorial-skip[hidden] + .tutorial-next { margin-left: auto; }
.tutorial-wait { font-size: 12px; color: var(--muted); font-style: italic; }
.tut-focus { outline: 2px solid var(--warn); outline-offset: 3px; animation: tutorialPulse 1.4s ease-in-out infinite; }
@keyframes tutorialIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes tutorialPulse { 50% { outline-color: #ffd16633; } }
@media (prefers-reduced-motion: reduce) {
  .tutorial.enter, .tut-focus { animation: none; }
}
@media (max-width: 720px) {
  .tutorial { top: 64px; left: 50%; right: auto; transform: translateX(-50%); width: min(340px, calc(100% - 32px)); padding: 9px 11px; gap: 5px; }
  .tutorial.enter { animation: none; }
  .tutorial-title { font-size: 15px; }
  .tutorial-text { font-size: 12px; }
}
/* Pantallas táctiles: centrada entre las columnas de botones (mando a la izquierda, puertas/inversor a la derecha) y bajo los avisos */
body.touch-mode .tutorial {
  top: 116px; left: 50%; right: auto; transform: translateX(-50%);   /* bajo los avisos (#message) */
  width: max(220px, min(400px, calc(100% - 250px))); padding: 9px 11px; gap: 5px;
}
body.touch-mode .tutorial.enter { animation: none; }
body.touch-mode .tutorial-title { font-size: 15px; }
body.touch-mode .tutorial-text { font-size: 12px; line-height: 1.3; }
body.touch-mode .tutorial footer button { padding: 5px 10px; }

/* Señal compacta en el panel de estación (cuando el panel de señal y horario no cabe) */
.signal-mini { display: none; align-items: center; gap: 7px; font-size: 12px; color: #a9b7c5; font-variant-numeric: tabular-nums; }
.signal-head-mini { grid-auto-flow: column; gap: 3px; padding: 3px 4px; border-radius: 9px; }
.signal-head-mini i { width: 10px; height: 10px; }
@media (max-width: 980px) { .signal-mini { display: flex; } }
/* Celular en horizontal: cabe el panel completo de señal y horario (el tablero va reducido) */
@media (max-height: 520px) {
  body.touch-mode .signal-panel { display: grid; }
  body.touch-mode .signal-mini, body.touch-mode .schedule-mini { display: none; }
}