/* Misión Lunar — estilo pixel art de estación lunar (siguiendo las imágenes del equipo).
   Un solo tema oscuro, elegido a propósito: es una consola de nave. */
:root{
  --fondo:#0b0f1a; --casco:#1a2233; --panel:#222c40; --panel2:#2b374f; --acero:#5b6b86; --borde:#0a0d14; --linea:#3d4b66;
  --tinta:#eef2ff; --suave:#a9b4cc; --verde:#5dff8a; --verde2:#1f7a3c; --monitor:#06180f;
  --amarillo:#ffd23f; --celeste:#5ad1f5; --rojo:#ff4a4a; --azul:#4a8bff; --oro:#ffb72b;
  --f-pixel:"Pixelify Sans","Silkscreen","Courier New",monospace;
  --f-mono:"VT323","Courier New",monospace;
  --f-chica:"Silkscreen","Courier New",monospace;
  --px:3px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--f-mono);font-size:21px;line-height:1.2;
  padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));padding-block:12px 32px;
  background-image:radial-gradient(1px 1px at 20% 30%,#ffffff40 50%,transparent 51%),radial-gradient(1px 1px at 70% 10%,#ffffff30 50%,transparent 51%),radial-gradient(1px 1px at 40% 80%,#ffffff25 50%,transparent 51%);background-attachment:fixed}
#app{max-width:1320px;margin:0 auto}
h1,h2,h3{margin:0;font-weight:700;line-height:1.1}
p{margin:0}
a{color:var(--celeste)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}
.ico{width:22px;height:22px;image-rendering:auto;vertical-align:middle;flex:none}
.fila{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.puntos{font-family:var(--f-chica);font-size:12px;color:var(--suave)}

/* botones con relieve pixel */
.btn{font-family:var(--f-chica);font-weight:700;font-size:16px;letter-spacing:.03em;background:var(--verde2);color:var(--verde);
  border:var(--px) solid var(--borde);padding:10px 18px;box-shadow:inset 0 0 0 2px var(--verde),inset -4px -4px 0 #0005}
.btn:hover{background:#26924a}
.btn:active{box-shadow:inset 0 0 0 2px var(--verde),inset 4px 4px 0 #0005}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.grande{font-size:19px;padding:14px 22px}
.btn.chico{font-size:13px;padding:7px 11px}
.btn.gris{background:var(--panel2);color:var(--tinta);box-shadow:inset 0 0 0 2px var(--linea),inset -3px -3px 0 #0005}
.btn small{display:block;font-family:var(--f-chica);font-size:10.5px;color:#c9ffd9;font-weight:400;margin-top:3px}

/* marco de la escena */
.marco{position:relative;border:6px solid var(--borde);outline:3px solid var(--acero);background:#000;container-type:inline-size}
.escena{position:relative;aspect-ratio:1200/896;overflow:hidden;user-select:none;-webkit-user-select:none}
.esc-img,.esc-fx{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.esc-img{object-fit:cover}
.esc-fx{pointer-events:none}
.esc-pantallas,.esc-objetos,.esc-extra{position:absolute;inset:0}
.esc-pantallas{pointer-events:none}
.esc-extra{pointer-events:none}
.esc-extra button{pointer-events:auto}

/* textos sobre los monitores de la imagen */
.pant{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;text-align:center;
  font-family:var(--f-mono);color:var(--verde);text-shadow:0 0 6px #5dff8a88;font-size:2.4cqw;line-height:1;overflow:hidden;padding:.2em}
.pant b{font-weight:400;font-size:1.15em}
.pant small{font-size:.75em;opacity:.85}
.pant .rojo{color:var(--rojo);text-shadow:0 0 6px #ff4a4a88}
.pant .amar{color:var(--amarillo);text-shadow:0 0 6px #ffd23f88}
.pant .barra{display:block;width:90%;height:.45em;border:1px solid var(--verde);margin:.15em 0}
.pant .barra i{display:block;height:100%;background:var(--verde)}
.p-mision{font-size:2.6cqw}
.p-clima{font-size:2cqw}
.p-radio{font-size:1.9cqw}
.p-soporte{font-size:2.2cqw}
.p-fabrica{font-size:1.75cqw}
.p-muestras{font-size:2.3cqw}
.p-generador{color:#2a1a00;text-shadow:none;font-family:var(--f-chica);font-size:1.25cqw;font-weight:700;transform:rotate(-4deg)}
.p-trajes{font-size:2.2cqw}
.p-traje{background:#05140bdd;border:2px solid var(--verde);font-size:2.4cqw}

/* objetos tocables */
.obj{position:absolute;background:transparent;border:2px solid transparent;padding:0;border-radius:2px}
.obj:hover,.obj:focus-visible{border-color:var(--amarillo);background:#ffd23f1f}
.mostrar .obj{border:2px dashed #ffd23fcc;background:#ffd23f14}
.obj.dest{border:2px dashed var(--verde);background:#5dff8a22;animation:latido 1.4s infinite}
@keyframes latido{50%{background:#5dff8a44}}
.cartel{position:absolute;left:50%;top:-1.9em;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-chica);font-size:1.25cqw;padding:.25em .5em;
  background:#0b0f1ae6;color:var(--amarillo);border:2px solid var(--amarillo);pointer-events:none}
.obj.dest .cartel{color:var(--verde);border-color:var(--verde)}
.volver{position:absolute;left:1.2%;bottom:2%;font-family:var(--f-chica);font-size:1.35cqw;background:#0b0f1ae6;color:var(--tinta);border:2px solid var(--acero);padding:.35em .7em}
.volver:hover{border-color:var(--amarillo);color:var(--amarillo)}
.cuenta{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%);font-family:var(--f-chica);font-weight:700;font-size:9cqw;color:var(--amarillo);text-shadow:4px 4px 0 #000}

/* estados de Carlos sobre la escena */
.escena.frio::after,.escena.rad::after,.escena.sombra::after{content:"";position:absolute;inset:0;pointer-events:none}
.escena.frio::after{box-shadow:inset 0 0 6cqw #d9f2ffcc;background:radial-gradient(ellipse at center,transparent 60%,#e8f7ff55)}
.escena.rad::after{box-shadow:inset 0 0 0 1cqw #5dff8a88;animation:rad 1s steps(2) infinite}
@keyframes rad{50%{box-shadow:inset 0 0 0 1cqw #5dff8a22}}
.escena.sombra::after{background:#04081a77}
.escena.cansado{animation:mareo 4s ease-in-out infinite}
@keyframes mareo{25%{transform:translate(.25%,.2%) rotate(.15deg)}75%{transform:translate(-.25%,-.1%) rotate(-.15deg)}}
.escena.impacto{animation:sacudon .25s steps(2) infinite}
@keyframes sacudon{50%{transform:translate(1%,.6%)}}
.globo{position:absolute;right:3%;top:4%;background:#fff;color:#111;font-family:var(--f-chica);font-size:1.3cqw;padding:.6em .9em;border:3px solid #000}
.diaban{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-chica);font-weight:700;font-size:7cqw;color:var(--amarillo);text-shadow:4px 4px 0 #000;background:#000a;pointer-events:none}
.diaban.anim{animation:diaban 1.6s forwards}
@keyframes diaban{0%{opacity:0}15%,70%{opacity:1}100%{opacity:0}}

/* ---------- HUD (como en las imágenes del equipo) ---------- */
.hud{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:6px;background:var(--casco);border:var(--px) solid var(--borde);box-shadow:inset 0 0 0 2px var(--linea);padding:8px;margin-bottom:10px}
.hud-a{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:flex-end;background:#121a29;border:2px solid var(--linea);padding:6px 10px}
.hb{display:grid;gap:3px;min-width:170px;flex:1}
.hb-t{display:flex;align-items:center;gap:6px;font-family:var(--f-chica);font-size:13px;letter-spacing:.04em}
.hb-v{margin-left:auto;font-family:var(--f-mono);font-size:19px}
.nx{font-size:15px;opacity:.85}
.nx.sube{color:var(--verde)}.nx.baja{color:var(--rojo)}
.segs{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;border:2px solid #000;padding:2px;background:#0b0f1a}
.segs i{height:14px;background:#1d2638}
.segs.amarilla{box-shadow:0 0 0 2px #c79a10}.segs.amarilla i.on{background:var(--amarillo)}
.segs.celeste{box-shadow:0 0 0 2px #2a8fb0}.segs.celeste i.on{background:var(--celeste)}
.segs.roja{box-shadow:0 0 0 2px #a52525}.segs.roja i.on{background:var(--rojo)}
.hud-dia{display:flex;align-items:center;gap:6px;font-family:var(--f-chica);font-size:15px;white-space:nowrap}
.hud-dia b{font-family:var(--f-mono);font-size:22px;font-weight:400}
.hud-b{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--f-chica);font-size:13px}
.hud-b>span{display:flex;align-items:center;gap:6px;background:#121a29;border:2px solid var(--linea);padding:4px 10px}
.hud-b .lugar{flex:1;min-width:160px;color:var(--tinta)}
.hud-b b{font-family:var(--f-mono);font-size:19px;font-weight:400;color:var(--amarillo)}
.hud-b b.ok{color:var(--verde)}
.hud-cara{grid-row:1/3;grid-column:2;display:grid;justify-items:center;gap:4px;background:#121a29;border:2px solid var(--linea);padding:4px}
.hud-cara img{width:84px;height:84px;image-rendering:pixelated;background:#1d2638;border:2px solid #000}
.hud-cara span{font-family:var(--f-chica);font-size:11px}
.foco{outline:4px solid var(--celeste)!important;outline-offset:3px;animation:foco 1s infinite}
@keyframes foco{50%{outline-color:#5ad1f544}}

/* ---------- distribución del juego ---------- */
.centro{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;align-items:start}
@media (max-width:1040px){.centro{grid-template-columns:minmax(0,1fr)}}
.izq,.der{display:grid;gap:10px;min-width:0}
.bajo-escena{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.mapa{display:grid;grid-template-columns:repeat(3,auto);gap:4px}
.mapa button{font-family:var(--f-chica);font-size:11.5px;padding:5px 8px;background:var(--panel2);border:2px solid var(--borde);box-shadow:inset 0 0 0 1px var(--linea)}
.mapa button[aria-current="true"]{background:var(--amarillo);color:#1a1300}
.mapa button:disabled{opacity:.4}
.pista{font-size:20px;color:var(--suave);min-height:2.6em;background:#121a29;border-left:4px solid var(--celeste);padding:8px 12px}
.pista b{color:var(--tinta)}
.panel{background:var(--panel);border:var(--px) solid var(--borde);box-shadow:inset 0 0 0 2px var(--linea);padding:12px 14px;display:grid;gap:10px}
.panel h2{font-family:var(--f-chica);font-size:15px;letter-spacing:.05em;color:var(--amarillo);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.panel h2 small{font-size:11px;color:var(--suave)}
.panel.flash{animation:flash 1s}
@keyframes flash{0%,60%{box-shadow:inset 0 0 0 3px var(--amarillo)}}
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.act{text-align:left;display:grid;gap:4px;padding:12px 14px;background:var(--verde2);border:var(--px) solid var(--borde);box-shadow:inset 0 0 0 2px var(--verde),inset -4px -4px 0 #0005}
.act:hover:not(:disabled){background:#26924a}
.act b{font-family:var(--f-chica);font-size:17px;color:var(--verde)}
.act span{font-family:var(--f-chica);font-size:11.5px;color:#c9ffd9}
.act:disabled{opacity:.4;cursor:not-allowed}
.destinos{display:flex;flex-wrap:wrap;gap:8px}
.acciones p{font-family:var(--f-chica);font-size:13px}
.er{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"n m p s" "e e e e";gap:4px 8px;align-items:center;background:#121a29;border:2px solid var(--linea);padding:8px}
.er .en{grid-area:n;display:flex;align-items:center;gap:6px;font-family:var(--f-chica);font-size:12.5px}
.er button{width:40px;height:40px;font-size:22px;font-weight:700;background:var(--panel2);border:var(--px) solid var(--borde);box-shadow:inset 0 0 0 2px var(--acero)}
.er button[data-e$="+"]{grid-area:s;background:var(--verde2);color:var(--verde);box-shadow:inset 0 0 0 2px var(--verde)}
.er button[data-e$="-"]{grid-area:m}
.er button:disabled{opacity:.3;cursor:not-allowed}
.pips{grid-area:p;display:flex;gap:3px}
.pips i{width:14px;height:20px;background:#0b0f1a;border:2px solid var(--linea)}
.pips i.on{background:var(--amarillo);border-color:#000}
.er .ef{grid-area:e;font-family:var(--f-chica);font-size:11.5px;color:var(--suave)}
.bien{color:var(--verde)}.mal{color:var(--rojo)}
.fino{font-size:17px;color:var(--suave)}
.mensajes{max-height:420px;overflow:auto}
.m{font-size:18px;background:#121a29;border-left:4px solid var(--linea);padding:6px 9px}
.m span{display:block;font-family:var(--f-chica);font-size:10px;color:var(--suave)}
.m.alerta{border-color:var(--rojo)}.m.bien{border-color:var(--verde)}.m.dia{border-color:var(--acero)}

/* ---------- menú desplegable de tareas ---------- */
.tareas{margin-bottom:10px;background:var(--casco);border:var(--px) solid var(--borde);box-shadow:inset 0 0 0 2px var(--amarillo)}
.tareas.flash{animation:flash 1s}
.tareas-btn{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;text-align:left;background:#2a2410;border:0;padding:10px 14px;color:var(--amarillo)}
.tareas-btn:hover{background:#3a3214}
.tareas-btn b{font-family:var(--f-chica);font-size:17px}
.tareas-btn .hamb{font-size:22px}
.tareas-btn .resumen{flex:1;min-width:200px;font-family:var(--f-chica);font-size:11.5px;color:var(--tinta)}
.tareas-btn .flecha{font-size:16px}
.tareas-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:12px;padding:12px}
.tareas-menu .fino{grid-column:1/-1}
.grupo{display:grid;gap:8px;align-content:start}
.grupo h3{font-family:var(--f-chica);font-size:13px;color:var(--amarillo)}
.grupo h3 small{display:block;font-family:var(--f-mono);font-size:16px;color:var(--suave);font-weight:400}
.tarea-sis,.tarea-hoy{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"b n c" "b e e";gap:2px 10px;align-items:center;background:#121a29;border:2px solid var(--linea);padding:8px 10px;text-align:left}
.tarea-hoy{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n c" "e e";background:#0f2a18;border-color:var(--verde2);color:var(--tinta)}
.tarea-hoy:hover:not(:disabled){border-color:var(--verde);background:#143a22}
.tarea-hoy:disabled{opacity:.45;cursor:not-allowed}
.tarea-hoy b{grid-area:n;font-family:var(--f-chica);font-size:13.5px;color:var(--verde)}
.tarea-sis.on{border-color:var(--verde2)}
.t-nom{grid-area:n;display:flex;align-items:center;gap:6px;font-family:var(--f-chica);font-size:12.5px}
.costo{grid-area:c;font-family:var(--f-mono);font-size:22px;color:var(--amarillo);white-space:nowrap}
.t-ef{grid-area:e;font-size:17px;color:var(--suave)}
.interruptor{grid-area:b;width:118px;font-family:var(--f-chica);font-size:11px;padding:9px 6px;background:#3a1414;color:#ffb3b3;border:var(--px) solid var(--borde);box-shadow:inset 0 0 0 2px var(--rojo)}
.interruptor[aria-checked="true"]{background:var(--verde2);color:var(--verde);box-shadow:inset 0 0 0 2px var(--verde)}
.interruptor:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:620px){.interruptor{width:92px;font-size:9.5px}.tareas-btn .resumen{font-size:10px}}

/* ---------- tarjetas de evento (monitor retro) ---------- */
.capa{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#03060cb3;overflow:auto;
  padding:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
.tarjeta{width:100%;max-width:620px;background:var(--monitor);color:var(--verde);border:var(--px) solid #000;box-shadow:0 0 0 4px var(--c),8px 8px 0 #000;padding:20px;display:grid;gap:12px}
.t-emergencia{--c:var(--rojo)}.t-aviso{--c:var(--amarillo)}.t-mensaje{--c:var(--azul)}
.tarjeta h2{font-family:var(--f-chica);font-size:22px;color:var(--c);text-shadow:0 0 8px currentColor}
.t-emergencia h2{animation:parpadeo 1s steps(2) infinite}
@keyframes parpadeo{50%{opacity:.55}}
.tarjeta>p{font-size:21px;color:#c9ffd9}
.ttipo{font-family:var(--f-chica);font-size:12px;color:var(--c)}
.peligro{color:var(--rojo)!important;font-family:var(--f-chica);font-size:13px!important}
.ops{display:grid;gap:8px}
.op{text-align:left;display:grid;gap:3px;background:#0b2a17;border:2px solid var(--verde2);padding:10px 12px;color:var(--verde)}
.op:hover:not(:disabled),.op:focus-visible{border-color:var(--verde);background:#103a20}
.op b{font-family:var(--f-chica);font-size:15px}
.op span{font-size:19px;color:#c9ffd9}
.op:disabled{opacity:.45;cursor:not-allowed}
.dato summary{cursor:pointer;font-family:var(--f-chica);font-size:13px;color:var(--amarillo)}
.dato p{font-size:19px;color:#c9ffd9;margin-top:8px}
.dato .fuente,.osdr{font-family:var(--f-chica);font-size:11px;color:#8fd9a8}
.osdr i{color:#c9ffd9}
.capa.visor{background:radial-gradient(ellipse at center,#03060c66 40%,#000e 75%)}
.capa.visor .tarjeta{background:#05140bcc;border-radius:30px 30px 8px 8px;animation:proyeccion .4s}
@keyframes proyeccion{from{opacity:0;transform:scale(.96)}}

/* tutorial de LUMA */
.tut{position:fixed;z-index:25;left:50%;bottom:max(14px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(680px,calc(100% - 28px));display:flex;gap:12px;align-items:flex-start;
  background:#0d1a2b;border:var(--px) solid #000;box-shadow:0 0 0 3px var(--celeste),6px 6px 0 #000;padding:14px}
.tut p{font-size:20px}
.tut .fila{margin-top:10px}
.luma{width:40px;height:40px;border-radius:50%;flex:none;background:radial-gradient(circle,#fff 0 18%,var(--celeste) 19% 55%,transparent 56%);box-shadow:0 0 16px var(--celeste);animation:flota 2s ease-in-out infinite}
@keyframes flota{50%{transform:translateY(-4px)}}

/* ---------- título ---------- */
.titulo,.intro{display:grid;gap:16px;max-width:1000px;margin:0 auto}
.titulo .escena .esc-img{filter:brightness(.8)}
.titulo-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:3% 3% 2.5%;text-align:center}
.evento{font-family:var(--f-chica);font-size:2.2cqw;color:#c5ccdd;text-shadow:2px 2px 0 #000}
.titulo h1{font-family:var(--f-pixel);font-weight:700;font-size:11cqw;color:#8dff7a;text-shadow:0 .5cqw 0 #1c5b1c,0 .9cqw 0 #000;letter-spacing:.02em;margin:.1em 0}
.titulo .sub{font-family:var(--f-chica);font-size:3cqw;color:#8dff7a;text-shadow:2px 2px 0 #000}
.jugar{font-size:4.2cqw;padding:.3em 1em}
.pie{width:100%;display:flex;justify-content:space-between;font-family:var(--f-chica);font-size:1.6cqw;color:#c5ccdd;text-shadow:2px 2px 0 #000}
.t-arriba,.t-abajo{display:grid;justify-items:center;gap:1.2cqw;width:100%}
.pitch{font-size:23px;color:var(--suave);max-width:70ch}
.pitch b{color:var(--tinta)}
.live{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-chica);font-size:12px;padding:7px 11px;background:var(--casco);border:2px solid var(--linea);color:var(--suave)}
.dot{width:9px;height:9px;background:var(--suave);display:inline-block;flex:none}
.dot.on{background:var(--verde);box-shadow:0 0 8px var(--verde)}
.caption{font-family:var(--f-chica);font-size:clamp(15px,2vw,21px);line-height:1.4;color:var(--amarillo);text-shadow:2px 2px 0 #000;min-height:2.6em}
.fuentes{background:var(--panel);border:var(--px) solid var(--borde);box-shadow:inset 0 0 0 2px var(--linea);padding:6px 16px}
.fuentes summary{cursor:pointer;font-family:var(--f-chica);font-size:14px;padding:10px 0;color:var(--amarillo)}
.fuentes ul{list-style:none;margin:0;padding:4px 0 12px;display:grid;gap:12px}
.fuentes li{display:grid;gap:2px;max-width:85ch}
.fuentes li span{font-size:18px;color:var(--suave)}
.fuentes a{font-size:13px;overflow-wrap:anywhere}
.clave{display:grid;gap:6px;padding:4px 0 10px}
.clave label{font-size:13px;color:var(--suave)}
.clave div{display:flex;flex-wrap:wrap;gap:8px}
.clave input{flex:1;min-width:180px;font-family:var(--f-mono);font-size:18px;color:var(--tinta);background:#0b0f1a;border:2px solid var(--linea);padding:6px 10px}
.nota{font-size:17px;color:var(--suave);border-top:2px dashed var(--linea);padding:10px 0;max-width:85ch}

/* ---------- final ---------- */
.final{display:grid;gap:16px;max-width:1080px;margin:0 auto}
.final-marco{background:#5a6b85;border:6px solid var(--borde);box-shadow:inset 0 0 0 4px #8796b0;padding:20px;display:grid;gap:14px}
.final h1{font-family:var(--f-chica);font-size:clamp(30px,5.5vw,58px);text-align:center;text-shadow:0 4px 0 #7a3b00,0 7px 0 #000}
.final h1.oro{color:var(--oro)}.final h1.gris{color:#e2e6ef;text-shadow:0 4px 0 #333,0 7px 0 #000}
.estrellas{display:flex;justify-content:center;gap:12px;font-size:clamp(42px,7vw,70px);line-height:1}
.estrellas span{color:#2a3346;text-shadow:3px 3px 0 #000}
.estrellas span.on{color:var(--oro);text-shadow:0 0 12px #ffb72b88,3px 3px 0 #000}
.veredicto{text-align:center;font-size:23px;max-width:60ch;justify-self:center;color:#f1f4fb}
.final-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
@media (max-width:760px){.final-grid{grid-template-columns:minmax(0,1fr)}}
.caja{background:#1a2233;border:var(--px) solid #000;box-shadow:inset 0 0 0 2px var(--linea);padding:14px;display:grid;gap:8px;align-content:start}
.caja h2{font-family:var(--f-chica);font-size:15px;color:var(--amarillo)}
.caja ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.caja li{font-size:19px}
.caja li::marker{color:var(--amarillo)}
.caja li small{display:block;font-family:var(--f-chica);font-size:10.5px;color:var(--suave)}
.dato-nasa{background:var(--monitor);box-shadow:inset 0 0 0 3px var(--verde)}
.dato-nasa p{color:#c9ffd9;font-size:21px}
.dato-nasa .fuente{font-family:var(--f-chica);font-size:11px;color:#8fd9a8}
.medallas>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.medallas figure{margin:0;display:grid;justify-items:center;gap:4px;text-align:center;filter:grayscale(1) brightness(.5);opacity:.6}
.medallas figure.on{filter:none;opacity:1}
.medallas img{width:100%;max-width:90px;height:auto}
.medallas figcaption{font-family:var(--f-chica);font-size:11px}
.medallas small{display:block;font-family:var(--f-mono);font-size:16px;color:var(--suave)}
.reintentar{justify-items:start}
.tip{font-family:var(--f-chica);font-size:13px;color:var(--amarillo)}
.resumen{text-align:center;font-family:var(--f-chica);font-size:13px;color:#eef2ff}
.epic{margin:0;display:grid;justify-items:center;gap:6px}
.epic img{width:min(240px,60vw);border-radius:50%;display:block}
.epic figcaption{font-family:var(--f-chica);font-size:11px;color:#eef2ff;text-align:center;max-width:50ch}
.editor{position:fixed;z-index:40;left:10px;bottom:10px;background:#000;color:var(--verde);padding:8px 12px;border:2px solid var(--verde);font-size:14px}

@media (max-width:620px){
  .hud{grid-template-columns:minmax(0,1fr) 62px;padding:5px;gap:4px}
  .hud-a{gap:4px 10px;padding:4px 6px}
  .hb{min-width:100%}
  .hb-t{font-size:10.5px}.hb-v{font-size:16px}.segs i{height:9px}
  .hud-dia{font-size:11px}.hud-dia b{font-size:17px}
  .hud-b{gap:4px;font-size:10px}.hud-b>span{padding:2px 6px;gap:4px}.hud-b b{font-size:15px}.hud-b .lugar{display:none}
  .hud-b .ico,.hud-dia .ico,.hb-t .ico{width:16px;height:16px}
  .hud-cara img{width:52px;height:52px}
  .globo,.cartel{font-size:2.4cqw}
  .volver{font-size:2.6cqw}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}