/* Tablero de juguete premium: plástico brillante con biseles y tornillos, botones redondos gigantes que se hunden,
   lucecitas que parpadean, palanca de velocidad y el monitor de la nave al centro. Colores del tema (base.css). */
.dash { position: absolute; left: 0; right: 0; bottom: 0; top: var(--win-h); z-index: 5; }
.dash-body {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 10px),
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--theme) 26%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-ink) 88%, #FFFFFF), var(--theme-ink) 34%, color-mix(in srgb, var(--theme-ink) 55%, #0B0922));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 -10px 26px rgba(0, 0, 0, .4);
}
/* canto superior del tablero */
.dash-body::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--theme-gold), transparent); opacity: .55; }
.screw { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #EEE8FF, #8C84B8 70%); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .4), 0 1px 1px rgba(0, 0, 0, .35); }
.screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 1.5px; background: rgba(40, 30, 80, .6); transform: rotate(35deg); }
.screw.s1 { left: 9px; top: 9px; } .screw.s2 { right: 9px; top: 9px; } .screw.s3 { left: 9px; bottom: calc(9px + env(safe-area-inset-bottom)); } .screw.s4 { right: 9px; bottom: calc(9px + env(safe-area-inset-bottom)); }

/* ---------- tira de lucecitas + tripulación ---------- */
.dash-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 16px; padding: 0 16px; }
.strip { display: flex; gap: 6px; }
.strip i { width: 7px; height: 7px; border-radius: 50%; background: #2A2458; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); transition: background .3s, box-shadow .3s; }
[data-power="on"] .strip i, [data-power="boot"] .strip i { animation: led-chase 2.4s linear infinite; animation-delay: calc(var(--i) * .16s); }
@keyframes led-chase { 0%, 70%, 100% { background: #3A3170; box-shadow: none; } 10%, 40% { background: var(--theme-2); box-shadow: 0 0 6px var(--theme-2); } }
.crew { display: flex; align-items: center; gap: 5px; min-height: 12px; }
.crew-lbl { font: 700 10px/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 247, 236, .6); margin-right: 2px; }
.crew-led { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 7px var(--c), inset 0 -1px 1px rgba(0, 0, 0, .3); }
.crew-led.is-mine { width: 11px; height: 11px; box-shadow: 0 0 0 2px var(--cream), 0 0 10px var(--c); animation: led-new 1.2s ease-out 3; }
@keyframes led-new { 50% { transform: scale(1.5); } }
[data-power="off"] .crew { opacity: 0; }

/* ---------- botones de destino (acción principal) ----------
   Cuadrícula de 4 columnas iguales; la fila de abajo usa el mismo ancho de columna, centrada. Círculo, ícono y etiqueta
   centrados en su columna; la etiqueta va separada del canto 3D del botón (9 px hacia abajo): nunca queda tapada. */
.dest-row { --col: calc((100% - 18px) / 4); display: grid; align-items: start; justify-items: center; column-gap: 6px; }
.row-a { grid-template-columns: repeat(4, var(--col)); }
.row-c { grid-template-columns: repeat(3, var(--col)); justify-content: center; }
.dest { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 88px; padding: 0 0 2px; background: none; border: 0; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.dest .cap {
  --cap-d: color-mix(in srgb, var(--cap) 62%, #0B0922);
  display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; color: #1E1B4B;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .95) 0 5%, color-mix(in srgb, var(--cap) 55%, #FFFFFF) 16%, var(--cap) 52%, var(--cap-d) 100%);
  box-shadow: 0 0 0 4px #16123C, 0 0 0 5.5px rgba(255, 255, 255, .14), 0 5px 0 4px var(--cap-d), 0 10px 12px 4px rgba(0, 0, 0, .35);
  transform: translateY(0); transition: transform .08s ease-out, box-shadow .08s ease-out, filter .5s ease;
}
.dest .cap svg { display: block; width: 28px; height: 28px; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .45)); }
.dest:active .cap { transform: translateY(4px); box-shadow: 0 0 0 4px #16123C, 0 0 0 5.5px rgba(255, 255, 255, .14), 0 1px 0 4px var(--cap-d), 0 4px 6px 4px rgba(0, 0, 0, .3); }
.dest.is-big .cap { color: var(--on-theme); }
.dest.is-big .cap svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.lbl { display: block; width: 100%; text-align: center; font: 600 13px/1.15 var(--font-head); color: var(--cream); text-shadow: 0 1px 0 rgba(0, 0, 0, .45); letter-spacing: .01em; white-space: nowrap; }
.dest .led { position: absolute; top: -4px; left: calc(50% + 21px); width: 10px; height: 10px; border-radius: 50%; background: #2A2458; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .55), 0 0 0 1.5px #16123C; transition: background .3s, box-shadow .3s; }
.dest.is-visited .led { background: var(--ok); box-shadow: 0 0 0 1.5px #16123C, 0 0 8px var(--ok-glow), 0 0 14px var(--ok-glow); }
.dest.is-active .cap { box-shadow: 0 0 0 4px #16123C, 0 0 0 7px var(--cream), 0 0 22px 8px color-mix(in srgb, var(--cap) 70%, transparent), 0 5px 0 4px var(--cap-d); }
.dest.is-suggest .cap { animation: suggest 1.3s ease-in-out infinite; }
@keyframes suggest { 50% { box-shadow: 0 0 0 4px #16123C, 0 0 0 7px var(--theme-gold), 0 0 26px 10px color-mix(in srgb, var(--theme-gold) 70%, transparent), 0 5px 0 4px var(--cap-d); } }
.dest:disabled, .ctrl:disabled { cursor: default; }
.dest:disabled .cap { filter: saturate(.25) brightness(.42); }
[data-power="off"] .lbl, [data-power="off"] .clbl { opacity: .35; }
/* el arranque enciende los botones en cadena */
[data-power="boot"] .dest .cap, [data-power="boot"] .ctrl .plate { animation: boot-on .5s ease-out both; }
[data-power="boot"] .row-a .dest:nth-child(1) .cap { animation-delay: .1s; } [data-power="boot"] .row-a .dest:nth-child(2) .cap { animation-delay: .2s; }
[data-power="boot"] .row-a .dest:nth-child(3) .cap { animation-delay: .3s; } [data-power="boot"] .row-a .dest:nth-child(4) .cap { animation-delay: .4s; }
[data-power="boot"] .ctrl.horn .plate { animation-delay: .5s; } [data-power="boot"] .ctrl.log .plate { animation-delay: .6s; }
[data-power="boot"] .row-c .dest:nth-child(1) .cap { animation-delay: .7s; } [data-power="boot"] .row-c .dest:nth-child(2) .cap { animation-delay: .8s; } [data-power="boot"] .row-c .dest:nth-child(3) .cap { animation-delay: .9s; }
@keyframes boot-on { 0% { filter: saturate(.25) brightness(.42); } 40% { filter: saturate(1.2) brightness(1.5); } 100% { filter: none; } }
.dest:focus-visible { outline: none; } .dest:focus-visible .cap { outline: 3px solid var(--theme-gold); outline-offset: 7px; }
.lever:focus-visible, .key:focus-visible { outline: 3px solid var(--theme-gold); outline-offset: 5px; border-radius: 50%; }

/* ---------- fila central: palanca · monitor · controles secundarios ---------- */
/* (una sola fila del alto disponible: nada de esta franja empuja al monitor sobre la fila de abajo) */
.dash-mid { display: grid; grid-template-columns: 46px minmax(0, 1fr) 58px; grid-template-rows: minmax(0, 1fr); gap: 8px; min-height: 0; }
.dash-side { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-height: 0; }
/* Controles secundarios (otra familia): más chicos, sin lucecita de visitado.
   Claxon = placa cuadrada de metal cepillado con tornillos y la corneta; Bitácora = libreta de papel con espiral. */
/* la etiqueta va grabada DENTRO de la placa (y en la tapa de la libreta): caben en poco alto, siempre ≥ 44 px */
.ctrl { display: flex; flex: 0 1 54px; min-height: 44px; max-height: 54px; width: 56px; padding: 0; background: none; border: 0; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.ctrl .plate { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; height: 100%; transition: transform .08s ease-out, box-shadow .08s ease-out, filter .5s ease; }
.ctrl .plate svg { display: block; flex: none; }
.ctrl.horn .plate { border-radius: 9px; color: #2A2458;
  background:
    radial-gradient(circle at 5px 5px, #6C668F 0 1.6px, transparent 2px), radial-gradient(circle at calc(100% - 5px) 5px, #6C668F 0 1.6px, transparent 2px),
    radial-gradient(circle at 5px calc(100% - 5px), #6C668F 0 1.6px, transparent 2px), radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #6C668F 0 1.6px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 3px), linear-gradient(180deg, #E9E6F5, #B7B1D3 55%, #9690BC);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(40, 30, 80, .35), 0 3px 0 #5E5890, 0 5px 8px rgba(0, 0, 0, .4); }
.ctrl.horn:active .plate { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 #5E5890, 0 2px 4px rgba(0, 0, 0, .4); }
.ctrl.log .plate { width: 50px; padding-left: 6px; border-radius: 4px 7px 7px 4px; color: #3B2A7A; transform: rotate(-4deg);
  background: radial-gradient(circle at 4px 5px, #3B3570 0 2px, transparent 2.4px) 0 0 / 8px 9px repeat-y, linear-gradient(90deg, #E7D9BF 0 8px, #FFF7E6 8px);
  box-shadow: inset -4px 0 0 color-mix(in srgb, var(--theme) 60%, #FFFFFF), 2px 3px 0 #C9B99A, 3px 6px 8px rgba(0, 0, 0, .35); }
.ctrl.log:active .plate { transform: rotate(-4deg) translateY(2px); }
.clbl { font: 700 9.5px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ctrl.horn .clbl { color: #3B3570; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); } /* (grabado en el metal) */
.ctrl.log .clbl { color: #3B2A7A; }
.ctrl:disabled .plate { filter: saturate(.3) brightness(.45); }
.ctrl:focus-visible { outline: none; } .ctrl:focus-visible .plate { outline: 3px solid var(--theme-gold); outline-offset: 3px; }

/* palanca */
.lever { position: relative; --k: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 0; cursor: grab; touch-action: none; }
.lever .slot { position: relative; width: 16px; height: calc(100% - 26px); min-height: 50px; border-radius: 10px; background: linear-gradient(90deg, #0E0B2A, #221D52 50%, #0E0B2A); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 0 0 3px #2B2566, 0 0 0 4.5px rgba(255, 255, 255, .12); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 10px 0; }
.lever .slot i { width: 22px; height: 2px; margin: 0 -5px; border-radius: 2px; background: rgba(255, 247, 236, .22); }
.lever .knob { position: absolute; left: 50%; top: calc(4px + var(--k) * (100% - 66px)); width: 34px; height: 34px; margin-left: -17px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF 0 6%, color-mix(in srgb, var(--theme-accent) 50%, #FFF) 18%, var(--theme-accent) 55%, color-mix(in srgb, var(--theme-accent) 55%, #0B0922));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--theme-accent) 50%, #0B0922), 0 7px 10px rgba(0, 0, 0, .45); }
.lever.is-drag { cursor: grabbing; }
.lever.is-locked { opacity: .45; cursor: default; }
.lever-lbl { position: absolute; bottom: 0; font: 700 10px/1 var(--font-head); letter-spacing: .12em; color: rgba(255, 247, 236, .55); }

/* ---------- monitor ---------- */
.monitor-wrap { position: relative; min-height: 0; }
/* (crece hacia arriba, cubriendo la fila superior de botones, cuando su contenido no cabe: --grow lo mide dash.js) */
.monitor { position: absolute; inset: 0; z-index: 3; transition: top .38s var(--ease-soft); }
.is-tall .monitor { top: calc(-1 * var(--grow, 90px)); }
/* (la fila que queda debajo se desvanece: nada asoma a los lados del monitor crecido) */
.row-a, .lever, .dash-side { transition: opacity .25s ease, visibility 0s linear 0s; }
.is-tall .row-a, .is-tall .lever, .is-tall .dash-side { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
/* crecido = modo lectura: el monitor también ocupa todo el ancho (palanca y controles regresan con "Botones") */
.is-tall .monitor { left: -62px; right: -66px; }
/* radio: el tablero sube sobre la parte baja de la ventana mientras se llena el formulario (vuelve al enviar) */
.dash { transition: top .42s var(--ease-soft); }
.is-radio .dash { top: max(26%, calc(var(--win-h) - 19%)); }
.rm .dash { transition-duration: .01s; }
.rm .monitor { transition-duration: .01s; }
.monitor .bezel { position: absolute; inset: 0; padding: 6px; border-radius: 18px; background: linear-gradient(160deg, #3F3882, #1D1845 60%, #2C2665); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .4), 0 3px 8px rgba(0, 0, 0, .4); overflow: hidden; }
.is-tall .monitor .bezel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .4), 0 -6px 18px rgba(0, 0, 0, .5); }
.screen { position: absolute; inset: 6px; overflow-y: auto; overscroll-behavior: contain; border-radius: 13px; padding: 10px 12px 14px;
  background: radial-gradient(120% 90% at 50% 35%, #123A52 0%, #0A2236 60%, #07182A 100%);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(111, 214, 232, .18);
  color: #D9FBFF; font-size: 16px; line-height: 1.35; transition: filter .6s ease, opacity .4s ease; }
.is-tall .screen { padding-top: 12px; }
.bezel .scan { position: absolute; inset: 6px; border-radius: 13px; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 0%, rgba(111, 214, 232, .08) 48%, transparent 56%);
  background-size: 100% 100%, 100% 260%; animation: scan 6s linear infinite; }
@keyframes scan { from { background-position: 0 0, 0 130%; } to { background-position: 0 0, 0 -130%; } }
.bezel .glare { position: absolute; inset: 6px; border-radius: 13px; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 35%, transparent 36%); }
[data-power="off"] .screen { filter: brightness(.12) saturate(0); }
[data-power="off"] .bezel .scan { animation: none; opacity: 0; }
.rm .bezel .scan { animation: none; }
/* aviso "Más abajo" (cuando el contenido sigue): píldora clara con flecha, sobre un degradado al pie */
.more { position: absolute; z-index: 2; left: 50%; bottom: 10px; display: none; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; cursor: pointer; transform: translateX(-50%);
  font: 600 14px/1 var(--font-head); color: #0A2236; background: linear-gradient(180deg, #E9FEFF, #A8EEF7); box-shadow: 0 3px 0 #4FB6C6, 0 6px 14px rgba(0, 0, 0, .5); }
.more.is-on { display: inline-flex; animation: more-bob 1.6s ease-in-out infinite; }
@keyframes more-bob { 50% { transform: translate(-50%, 3px); } }
.rm .more.is-on { animation: none; }
.screen.has-more { -webkit-mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, .15)); mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, .15)); }
.screen.has-more .mscreen { padding-bottom: 40px; }
/* achicar el monitor crecido (vuelven los botones de arriba) */
.shrink { position: absolute; z-index: 2; top: 10px; right: 10px; display: none; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 14px/1 var(--font-head); color: #D9FBFF; background: rgba(191, 246, 255, .16); box-shadow: inset 0 0 0 1px rgba(191, 246, 255, .35); }
.shrink svg { transform: none; }
.is-tall .shrink { display: inline-flex; }
.is-tall .mk { padding-right: 100px; min-height: 36px; }

/* ---------- llave de encendido ---------- */
.key-wrap { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
[data-power="off"] .key-wrap { display: flex; }
.key { position: relative; width: 104px; height: 104px; border-radius: 50%; border: 0; padding: 0; cursor: grab; touch-action: none;
  background: radial-gradient(circle, #2A2458 0 38%, #3D3680 39% 58%, #1A163F 59% 100%);
  box-shadow: 0 0 0 4px #16123C, 0 0 0 7px color-mix(in srgb, var(--theme-gold) 60%, transparent), 0 0 30px 8px color-mix(in srgb, var(--theme-gold) 45%, transparent);
  animation: key-glow 2s ease-in-out infinite; }
@keyframes key-glow { 50% { box-shadow: 0 0 0 4px #16123C, 0 0 0 7px var(--theme-gold), 0 0 42px 14px color-mix(in srgb, var(--theme-gold) 55%, transparent); } }
.key-slot { position: absolute; inset: 10px; display: grid; place-items: center; }
.key-turn { display: block; width: 84px; height: 84px; transform-origin: 50% 66%; }
.key-turn svg { width: 100%; height: 100%; display: block; }
.key-text { margin: 0; max-width: 220px; font: 600 16px/1.25 var(--font-head); color: var(--cream); text-shadow: 0 0 12px color-mix(in srgb, var(--theme-gold) 60%, transparent); }
.key-hand { position: absolute; right: -26px; bottom: -18px; opacity: 0; pointer-events: none; }
.key.show-hand .key-hand { animation: hand-turn 2.2s ease-in-out infinite; }
@keyframes hand-turn { 0% { opacity: 0; transform: rotate(-10deg) translate(0, 0); } 15% { opacity: 1; } 60% { opacity: 1; transform: rotate(40deg) translate(-10px, -26px); } 85%, 100% { opacity: 0; transform: rotate(40deg) translate(-10px, -26px); } }
.rm .key, .rm .key.show-hand .key-hand { animation: none; }
.rm .key.show-hand .key-hand { opacity: 1; }

/* ---------- monitor ampliado (radio): ocupa todo el tablero ---------- */
.is-expanded .row-a, .is-expanded .row-c { display: none; }
.is-expanded .dash-mid { grid-row: 2 / span 3; grid-template-columns: minmax(0, 1fr); }
.is-expanded .lever, .is-expanded .dash-side { display: none; }

/* ---------- fiesta de luces (todos los destinos visitados) ---------- */
.is-party .dest .led { animation: party-led .35s steps(2) 8; }
.is-party .strip i { animation: party-strip .25s linear 12 !important; }
.is-party .dest .cap { animation: party-cap .6s ease-in-out 4; }
@keyframes party-led { 50% { background: var(--theme-gold); box-shadow: 0 0 12px var(--theme-gold); } }
@keyframes party-strip { 0% { background: var(--theme-accent); box-shadow: 0 0 8px var(--theme-accent); } 50% { background: var(--theme-2); box-shadow: 0 0 8px var(--theme-2); } 100% { background: var(--theme-gold); box-shadow: 0 0 8px var(--theme-gold); } }
@keyframes party-cap { 50% { filter: brightness(1.35) saturate(1.2); } }
.rm .is-party .dest .led, .rm .is-party .strip i, .rm .is-party .dest .cap { animation: none; }
.is-busy .dest, .is-busy .lever { pointer-events: none; }

/* pantallas bajitas: menos aire entre filas (los botones de destino siguen de 58 px) */
@media (max-height: 700px) {
  .dash-body { gap: 5px; padding-top: 6px; }
  .dest { gap: 13px; }
}