/* ============================================================================
   UNIVERSE BATTLE · hoja general de la web (v1)
   Tema "industrial de aguas profundas": vacio azul-negro, metal frio, y el
   COLOR reservado para lo que significa algo. Cada recurso tiene su tono y ese
   tono no se usa nunca para decorar.
   Cargar en TODAS las paginas de /universebattle/. Lo especifico de cada pagina
   va en su propio <style> o en su .css al lado.
   ============================================================================ */

:root{
  /* Fondos y estructura: neutros con sesgo azul (H~225). Un gris puro al lado
     del cyan se ve sucio. */
  --void:#050810;
  --deep:#0A0F20;
  --panel:#0E1528;
  --panel-2:#131C33;
  --line:#1E2B4C;
  --line-soft:#16203A;
  --ink:#E6EDFF;
  --ink-2:#93A4C6;
  --ink-3:#64769A;

  /* Semanticos: un color, un significado. */
  --iron:#B3C0CE;
  --crystal:#8B6CFF;
  --deut:#2FE3B0;
  --energy:#FFB43A;
  --cyan:#31E0F5;
  --danger:#FF3B5C;
  --ok:#3DFFA0;

  --radius:3px;
  --wrap:1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.ub-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---- Tipografia ---- */
h1,h2,h3,.ub-display{
  font-family:"Chakra Petch","Chakra Petch Fallback",system-ui,sans-serif;
  font-weight:600;letter-spacing:-.005em;text-wrap:balance;margin:0 0 12px;
}
h1{font-size:clamp(28px,4vw,44px);line-height:1.05;font-weight:700}
h2{font-size:clamp(20px,2.4vw,28px);line-height:1.15}
h3{font-size:18px}
p{margin:0 0 14px}
.ub-lede{color:var(--ink-2);font-size:17px;max-width:62ch}
.ub-muted{color:var(--ink-3)}
.ub-mono,.ub-num{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;
}
.ub-label{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ---- Colores de recurso ---- */
.c-fe{color:var(--iron)}
.c-cr{color:var(--crystal)}
.c-dt{color:var(--deut)}
/* Fuel: ambar. Uranio y Fuel son la misma sustancia y sus abreviaturas se
   parecen ('Ur' y 'Fu'), asi que la diferencia tiene que entrar por el color. */
.c-fu{color:#FFB43A}
.c-en{color:var(--energy)}
.c-cy{color:var(--cyan)}
.c-bad{color:var(--danger)}
.c-ok{color:var(--ok)}

/* ---- Paneles ---- */
.ub-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
}
.ub-panel + .ub-panel{margin-top:14px}
.ub-grid{display:grid;gap:14px}
.ub-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ub-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ub-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:820px){.ub-g2,.ub-g3,.ub-g4{grid-template-columns:1fr}}

/* ---- Formularios ---- */
.ub-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.ub-field label{font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;background:var(--deep);border:1px solid var(--line);
  color:var(--ink);padding:11px 13px;border-radius:var(--radius);font-size:16px;
  font-family:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);outline:none}
input::placeholder{color:var(--ink-3)}

.ub-btn{
  display:inline-block;border:0;cursor:pointer;
  background:var(--cyan);color:#04121A;
  font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.02em;padding:12px 22px;border-radius:var(--radius);
}
.ub-btn:hover{background:#5DE9FA;text-decoration:none}
.ub-btn[disabled]{opacity:.45;cursor:not-allowed}
.ub-btn-ghost{
  background:transparent;color:var(--ink);border:1px solid var(--line);
}
.ub-btn-ghost:hover{background:var(--panel-2);border-color:var(--cyan)}

/* ---- Avisos ---- */
.ub-msg{
  border:1px solid var(--line);border-left:3px solid var(--cyan);
  background:var(--panel);padding:13px 16px;border-radius:var(--radius);
  margin:0 0 16px;font-size:15px;
}
.ub-msg.err{border-left-color:var(--danger);color:#FFC9D2}
.ub-msg.ok{border-left-color:var(--ok)}

/* ---- Codigo de vinculacion ---- */
.ub-code{
  font-family:"IBM Plex Mono",monospace;font-size:clamp(26px,6vw,40px);
  font-weight:600;letter-spacing:.22em;color:var(--cyan);text-align:center;
}

/* ---- Tablas ---- */
.ub-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.ub-table{border-collapse:collapse;width:100%;font-size:14.5px;background:var(--panel)}
.ub-table th,.ub-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line-soft)}
.ub-table thead th{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);background:var(--deep);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.ub-table tbody tr:last-child td{border-bottom:0}
.ub-table td.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right}

/* ---- Barra de recursos (cabecera del juego) ---- */
.ub-resbar{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  background:var(--deep);border-bottom:1px solid var(--line);
  padding:10px 20px;font-family:"IBM Plex Mono",monospace;font-size:14px;
  font-variant-numeric:tabular-nums;
}
.ub-resbar b{font-weight:600}
.ub-resbar .r{display:flex;align-items:center;gap:7px}
.ub-resbar .r i{width:9px;height:9px;border-radius:50%;font-style:normal;display:inline-block}
.ub-resbar .ri{width:20px;height:20px;object-fit:contain;flex:0 0 20px}
.ub-resbar .lb{color:var(--ink-3);font-size:12px}
/* Ritmo de entrada: en pequeño, al lado de la cifra. Es el dato que hace que
   entiendas si merece la pena esperar o si toca andar. */
.ub-resbar em{font-style:normal;font-size:11px;color:var(--ink-3);white-space:nowrap}
/* Almacen lleno: lo que rebosa se pierde, asi que tiene que saltar a la vista. */
.ub-resbar .r.full b{color:var(--danger)}
.ub-resbar .r.full em::after{content:" · FULL";color:var(--danger)}
@media(max-width:760px){
  .ub-resbar{gap:12px;font-size:13px}
  /* Se esconde la etiqueta SOLO si el chip tiene icono: ahi la palabra sobra
     porque el dibujo ya dice de que es el numero. Los que no tienen icono
     -- Mines y Momentum -- se quedaban en un porcentaje suelto sin dueño, que
     es lo que nadie entendia. Se marcan con .noicon y conservan su nombre. */
  .ub-resbar .r:not(.noicon) .lb{display:none}
  .ub-resbar .r.noicon .lb{font-size:13px;color:var(--ink-2)}
  /* El chip de Momentum no es un .r sino un enlace propio, asi que la regla de
     arriba ya no lo toca y conserva su etiqueta sin hacer nada. Solo se le sube
     un punto el tamaño, que a 10px con letra espaciada no se lee en un movil. */
  .momchip .lb{font-size:11px;letter-spacing:.10em}

  /* Sin flex-basis fijo: la barra ya es flex-wrap y estos chips saltan de fila
     solos cuando no caben. Forzarlo dejaria un hueco vacio en las pantallas
     donde si cabian. */
}

/* ---- Aviso de cuenta a medias (barra bajo la navegacion) ----
   Informa, no bloquea: se puede jugar el juego entero sin dar un correo. */
.ub-alert{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 20px;font-size:14.5px;line-height:1.55;
  background:rgba(49,224,245,.07);border-bottom:1px solid var(--line);
  color:var(--ink-2);
}
.ub-alert.warn{background:rgba(255,180,58,.09)}
.ub-alert .ic{font-size:16px;color:var(--cyan);flex:0 0 auto}
.ub-alert.warn .ic{color:var(--energy)}
.ub-alert .tx{flex:1;min-width:260px}
.ub-alert b{color:var(--ink)}
.ub-alert .go{
  background:var(--cyan);color:#04121A;font-weight:700;font-size:13px;
  padding:7px 14px;border-radius:var(--radius);white-space:nowrap;
}
.ub-alert .go:hover{background:#5DE9FA;text-decoration:none}
.ub-alert .later{color:var(--ink-3);font-size:13px;white-space:nowrap}

/* ---- Ventana de detalle ----
   La ficha de la rejilla es un resumen; aqui cabe la explicacion entera. */
.ub-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;padding:20px}
.ub-modal[hidden]{display:none}
.ub-modal .bd{position:absolute;inset:0;background:rgba(2,5,12,.78);
  backdrop-filter:blur(3px)}
.ub-modal .pn{position:relative;width:100%;max-width:520px;max-height:88vh;
  overflow-y:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,.6)}
.ub-modal .x{position:absolute;top:10px;right:12px;background:none;border:0;
  color:var(--ink-3);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.ub-modal .x:hover{color:var(--danger)}
.ub-modal .hd{display:flex;gap:18px;align-items:center;margin-bottom:14px}
.ub-modal .hd img{width:128px;height:128px;flex:0 0 128px;object-fit:contain;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.55))}
.ub-modal h2{margin:0 0 4px;font-size:23px}
.ub-modal .lv{margin:0;font-family:"IBM Plex Mono",monospace;font-size:15px;
  color:var(--ink-2);font-variant-numeric:tabular-nums}
.ub-modal .lv span{color:var(--ink-3);margin:0 4px}
.ub-modal .ds{font-size:15px;color:var(--ink-2);line-height:1.6;margin:0 0 16px}
.ub-modal .req{background:var(--deep);border:1px solid var(--line);
  border-left:3px solid var(--danger);border-radius:var(--radius);
  padding:11px 14px;margin:0 0 14px;font-size:14.5px}
.ub-modal .req b{display:inline-block;margin-right:10px;color:var(--ink)}
.ub-modal .kv{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0 0 14px}
.ub-modal .kv dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.ub-modal .kv dd{margin:0;font-family:"IBM Plex Mono",monospace;font-size:14.5px;
  font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:4px 14px}
.ub-modal .kv .no{color:var(--danger)}
.ub-modal .unl b{color:var(--ok);font-weight:600;font-family:"Chakra Petch",sans-serif}
.ub-modal .later{font-size:13px;color:var(--ink-3);margin:0 0 16px;line-height:1.5}
.ub-modal .later .ub-label{display:block;margin-bottom:3px}
.ub-modal .act{display:flex;gap:9px;align-items:center}
.ub-modal .act input{width:96px;text-align:right;font-family:"IBM Plex Mono",monospace}
.ub-modal .act .ub-btn{flex:1}
@media(max-width:520px){
  .ub-modal{padding:10px}
  .ub-modal .pn{padding:20px 18px}
  .ub-modal .hd img{width:88px;height:88px;flex:0 0 88px}
}
/* La ficha entera es pulsable, no solo un enlace escondido. */
.clickable{cursor:pointer}
.clickable:hover{border-color:var(--cyan)}

/* ---- Estrellas de fondo (decorativo, no bloquea el texto) ---- */
.ub-stars{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(circle at 78% 8%, rgba(49,224,245,.07), transparent 55%),
  radial-gradient(circle at 12% 88%, rgba(139,108,255,.06), transparent 55%),
  var(--void);}

/* El planeta del icono, muy lejos y muy tenue, detras de las pantallas de
   entrada. Va en su propia capa y no en .ub-stars porque solo lo quieren
   index/link/verify: dentro del juego estorbaria a los numeros.
   Recortado en circulo con el borde difuminado, asi no se ve el cuadrado. */
.ub-hero{
  position:fixed;z-index:-1;pointer-events:none;
  right:-8vmin;top:50%;transform:translateY(-50%);
  width:min(68vmin,620px);aspect-ratio:1;
  background:url(/universebattle/pictures/logo/ub_hero.png) center/contain no-repeat;
  opacity:.16;filter:saturate(.85);
}
@media (max-width:760px){
  .ub-hero{right:auto;left:50%;top:22%;transform:translate(-50%,-50%);
    width:min(86vmin,460px);opacity:.10}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Demoler ----
   Va plegado a proposito: es destructivo y no debe competir con el boton de
   mejorar, que es lo que el jugador viene a hacer el 99% de las veces. */
.ub-modal .dem{margin:14px 0 0;border-top:1px solid var(--line);padding-top:12px}
.ub-modal .dem summary{cursor:pointer;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ub-modal .dem summary:hover{color:var(--danger)}
.ub-modal .dem p{font-size:13px;color:var(--ink-3);line-height:1.55;margin:9px 0 10px}
.ub-modal .dem .ub-btn{border-color:var(--danger);color:var(--danger)}
.ub-modal .dem .ub-btn:hover:not([disabled]){background:var(--danger);color:#0B0409}

/* ---- Chip de ERA ----
   Vive en la barra de recursos pero no es un recurso: por eso lleva su propia
   caja y el numero romano grande. Es identidad, no un dato que se consulte. */
.erachip{
  display:flex;align-items:center;gap:9px;padding:5px 11px 5px 8px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(49,224,245,.05);position:relative;overflow:hidden;
  color:var(--ink-2);text-decoration:none;flex:0 0 auto;
}
.erachip:hover{border-color:var(--cyan);text-decoration:none}
.erachip .rm{
  font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:19px;
  line-height:1;color:var(--cyan);min-width:30px;text-align:center;
}
.erachip .tx{display:flex;flex-direction:column;line-height:1.25}
.erachip .tx b{font-size:13.5px;color:var(--ink);white-space:nowrap}
.erachip .tx em{
  font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.erachip .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.erachip .bar i{display:block;height:100%;background:var(--cyan)}
@media (max-width:760px){ .erachip .tx em{display:none} }

/* ---- Tope de era dentro de la ventana ----
   Verde, no rojo: no es un fallo, es una meta. Se abre andando. */
.ub-modal .eralock{
  margin:0 0 14px;padding:11px 14px;border-radius:var(--radius);
  background:rgba(74,222,128,.07);border:1px solid rgba(74,222,128,.28);
}
.ub-modal .eralock .ub-label{color:var(--ok);display:block;margin-bottom:5px}
.ub-modal .eralock p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.ub-modal .eralock b{color:var(--ink)}

/* ---- Chip de MOMENTUM ----
   Lleno = ambar. No es un error, es un aviso: estas tirando caminata. */
.momchip{
  display:flex;flex-direction:column;gap:1px;padding:5px 12px 6px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(74,222,128,.05);position:relative;overflow:hidden;
  color:var(--ink-2);text-decoration:none;flex:0 0 auto;
}
.momchip:hover{border-color:var(--ok);text-decoration:none}
.momchip.full{border-color:var(--energy);background:rgba(255,180,58,.08)}
.momchip .lb{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.momchip b{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--ok);
  font-variant-numeric:tabular-nums;line-height:1.15;display:flex;align-items:baseline;gap:4px}
.momchip.full b{color:var(--energy)}
.momchip b em{font-style:normal;font-size:10.5px;color:var(--ink-3);white-space:nowrap}
/* Lleno = ambar y con instruccion: el jugador esta tirando pasos y tiene que
   saber que hacer, no solo que algo va mal. */
.momchip.full b em{color:var(--energy);opacity:.85}
.momchip .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.momchip .bar i{display:block;height:100%;background:var(--ok)}
.momchip.full .bar i{background:var(--energy)}

/* ---- Gastar Momentum ----
   La explicacion va arriba y SIEMPRE: la mecanica no se descubre sola. */
.spend{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line-soft)}
.spend .how{margin:0 0 8px;font-size:13px;color:var(--ink-3);line-height:1.5}
.spend .how b{color:var(--ok);font-weight:600}
.spend .no{margin:0;font-size:12.5px;color:var(--ink-3)}
.spend .btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.spend form{margin:0;display:inline-flex}
.spend button{
  background:none;border:1px solid rgba(74,222,128,.35);color:var(--ok);cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;padding:5px 11px;
  border-radius:var(--radius);white-space:nowrap;
}
.spend button:hover{background:var(--ok);color:#04160B}
.spend button.all{border-style:dashed}
.spend .custom{gap:4px}
.spend .custom input{
  width:62px;padding:5px 8px;font-size:12.5px;text-align:center;
  font-family:"IBM Plex Mono",monospace;
}

/* Especialidad de una unidad: ambar, que no se confunda con el coste. */
.ub-modal .kv dd.vs{color:var(--energy);font-family:"IBM Plex Mono",monospace;font-size:13px}
.vsline{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--energy);
  margin:4px 0 0;line-height:1.5}

/* ---- Panel de intercepcion ----
   Rojo en el borde porque es lo unico de la pagina que urge. */
.ub-panel.intercept{border-color:rgba(255,99,99,.4)}
.ub-panel.intercept h2{color:var(--danger)}
.ub-panel.intercept .spend button{border-color:rgba(255,99,99,.4);color:var(--danger)}
.ub-panel.intercept .spend button:hover:not([disabled]){background:var(--danger);color:#160406}

/* ---- Explicacion del Sentinel en la pantalla de flota ---- */
.sentbox{
  margin:0 0 14px;padding:13px 15px;border-radius:var(--radius);
  background:rgba(49,224,245,.06);border:1px solid rgba(49,224,245,.28);
}
.sentbox b{color:var(--cyan)}
.sentbox p{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.sentbox p.req{color:var(--ink-3);font-size:13px}
.sentnote{
  margin:16px 0 0;padding:12px 15px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);
  font-size:13.5px;line-height:1.6;color:var(--ink-3);
}
.sentnote b{color:var(--ink)}

/* ---- Escribir al desarrollador ----
   Va al final de Messages y con su propio borde: es un canal de salida, no un
   mensaje mas de la bandeja. */
.ub-panel.contact{margin-top:18px;border-color:rgba(49,224,245,.28)}
.ub-panel.contact h2{color:var(--cyan)}
.ub-panel.contact textarea{min-height:110px;resize:vertical;line-height:1.55}

/* ---- Refinar uranio en Fuel ----
   Mismo lenguaje visual que gastar Momentum, pero en ambar: son dos conversiones
   distintas y no deben confundirse. */
.refine{margin:0 0 16px;padding:12px 15px;border-radius:var(--radius);
  background:rgba(255,180,58,.06);border:1px solid rgba(255,180,58,.28)}
.refine .how{margin:0 0 9px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.refine .how b{color:#FFB43A}
.refine .no{margin:0;font-size:12.5px;color:var(--ink-3)}
.refine .btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.refine form{margin:0;display:inline-flex}
.refine button{background:none;border:1px solid rgba(255,180,58,.4);color:#FFB43A;
  cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  padding:5px 11px;border-radius:var(--radius);white-space:nowrap}
.refine button:hover{background:#FFB43A;color:#1A1204}
.refine button.all{border-style:dashed}
.refine .custom{gap:4px}
.refine .custom input{width:80px;padding:5px 8px;font-size:12.5px;text-align:center;
  font-family:"IBM Plex Mono",monospace}

/* ---- La explicacion del Fuel en el Overview ----
   Va antes del boton de refinar: el jugador tiene que saber QUE esta haciendo
   antes de tener el boton delante. */
.fuelnote{margin:16px 0 0;padding:13px 16px;border-radius:var(--radius);
  background:rgba(255,180,58,.05);border:1px solid rgba(255,180,58,.22)}
.fuelnote p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.fuelnote p.sm{margin-top:8px;font-size:13px;color:var(--ink-3)}
.fuelnote b{color:#FFB43A}
/* En el Overview el bloque vive en la COLUMNA ESTRECHA de la derecha (0.85fr),
   asi que se aprieta: sin borde propio para la fila de refinar --la caja de
   arriba ya hace de marco--, texto mas corto y botones que envuelven sin
   estorbar. Con los estilos de ancho completo se salia. */
.fuelnote + .refine{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;
  border-top:0;padding:10px 14px 12px}
.fuelnote{margin-top:14px;border-bottom-left-radius:0;border-bottom-right-radius:0;
  border-bottom:0;padding-bottom:10px}
.fuelnote p{font-size:13.5px}
.fuelnote p.sm{font-size:12.5px}
.fuelnote + .refine .how{font-size:12.5px}
.fuelnote + .refine .btns{gap:5px}
.fuelnote + .refine button{font-size:12px;padding:4px 9px}
.fuelnote + .refine .custom input{width:70px}

/* Motivo por el que no se puede atacar. En gris apagado y sin borde: es un
   estado, no una accion, y no debe competir con el boton de Attack. */
.noatk{font-size:11.5px;color:var(--ink-3);white-space:nowrap;cursor:help;
  border-bottom:1px dotted var(--line)}
.noatk:hover{color:var(--ink-2)}

/* ---- Ayuda de la mision y coste del viaje (pantalla de flota) ---- */
.mhelp{margin:7px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3);
  min-height:2.6em}
/* El resumen del viaje: cuatro cifras que se comparan, asi que van en rejilla
   y no en parrafo. Se pinta solo en cuanto eliges naves. */
.trip{margin-top:10px}
.trip .pv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0}
.trip dt{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);align-self:baseline}
.trip dd{margin:0;font-size:14px;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.trip dd span{font-family:inherit;font-size:12.5px}
/* El boton armado: cambia de cara para que se note que el siguiente toque va en
   serio, sin robar el foco ni mover nada de sitio. */
.ub-btn.arm{background:var(--danger);border-color:var(--danger);color:#fff}
.ub-btn[disabled]{opacity:.45;cursor:not-allowed}
/* Una mision imposible sigue en la lista pero apagada: verla y saber por que no
   se puede enseña mas que esconderla. */
#m option[disabled]{color:var(--ink-3)}