:root{
    --bg: #05060a;
    --panel: #0b111dcc;
    --line: #1c2b40;
    --cyan: #3ed6ff;
    --red: #ff4655;
    --gold: #ffb347;
    --purple: #b57bff;
    --grey: #9aa5b1;
    --remote: #ffd166;
    --safe: #4ee6a0;
    /* CANALES DE CHAT: privado AZUL, grupo un azul MÁS OSCURO (ver .logBody .pm/.party) y
       SECTOR en verde (es "lo que pasa en este mapa" — el mismo verde de la zona segura y
       de los compañeros en el minimapa). No se reutiliza --cyan (que ya es "el nombre de
       quien habla" en el chat global): el canal tiene que distinguirse del emisor. */
    --pm: #5aa9ff;
    --party: #2f6ad0;
    --sector: #4ee6a0;
    --text: #dce6f0;
    --text-dim: #6d7f96;
    --mono: 'Consolas','SFMono-Regular','Menlo',monospace;
  }
  html,body{margin:0;padding:0;overflow:hidden;background:var(--bg);height:100%;width:100%;}
  canvas{display:block;cursor:crosshair;}
  /* Apilado de las capas de render (las crea/gestiona gfx/webgl.js):
     #bg (fondo parallax) < #gl (modelos WebGL) < #game (efectos+eventos de
     juego) < #hud (interfaz, z-index 5) < ventanas (z-index 6). Los canvas de
     fondo y WebGL no reciben clics; #game sí (disparar/mover) pero queda por
     debajo del HUD para que la interfaz sea clicable. */
  #bg, #gl{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
  #bg{ z-index:0; }
  #gl{ z-index:1; }
  #game{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; }
  #hud{
    position:fixed;inset:0;pointer-events:none;
    font-family:var(--mono);color:var(--text);
    z-index:5; /* por encima de los canvas (bg:0, gl:1, game:2) para que las ventanas/botones reciban clics */
  }
  .panel{
    position:absolute;background:var(--panel);
    border:1px solid var(--line);border-radius:4px;
    padding:10px 14px;backdrop-filter:blur(2px);
  }
  /* INFORMACIÓN va donde antes estaba ESTADO (arriba-izquierda), y ESTADO se corre a
     su derecha. Ambas conservan su ancho: los anclajes guardados de quien ya las haya
     movido siguen mandando (ver applyAnchoredPos). */
  #playerWin{ top:14px; left:14px; width:220px; box-sizing:border-box; }
  #stats{ top:14px; left:246px; width:220px; box-sizing:border-box; }

  /* ---------- VENTANA DE EXPERIENCIA (centrada abajo, bajo la barra de acción) ---------- */
  /* La POSICIÓN la pone JS (defaultPosFor), no el CSS. Antes se centraba aquí con
     translateX(-50%) y eso creaba DOS caminos distintos —el del CSS al entrar y el de
     JS al restablecer—, que no coincidían: por eso una cuenta nueva la veía descuadrada
     y el botón de restablecer la colocaba bien. Un solo camino, un solo resultado. */
  #xpWin{
    width:420px; min-width:220px; max-width:96vw; box-sizing:border-box;
    padding:8px 12px 10px; position:absolute; z-index:6; pointer-events:auto;
  }
  .xpRow{ display:flex; align-items:center; gap:9px; }
  .xpLevel{
    flex:0 0 auto; min-width:26px; height:26px; padding:0 6px; border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:bold; color:#0b111d; background:var(--gold, #ffd166);
  }
  .xpBarOuter{
    flex:1 1 auto; height:12px; background:#0009; border:1px solid var(--line);
    border-radius:6px; overflow:hidden; min-width:60px;
  }
  .xpBarFill{
    height:100%; width:0%; border-radius:6px;
    background:linear-gradient(90deg, #ffb347, var(--gold, #ffd166));
    box-shadow:0 0 8px #ffd16688; transition:width .25s ease-out;
  }
  .xpText{ flex:0 0 auto; font-size:10px; color:var(--text-dim); white-space:nowrap; }

  /* Modo TRANSPARENTE: sin marco, sin fondo y sin barra de título — solo la barra de
     XP flotando. El ojo de volver queda a la DERECHA, igual que en el menú de opciones. */
  #xpWin.hudTransparent{ background:transparent; border-color:transparent; backdrop-filter:none; padding-right:38px; }
  #xpWin.hudTransparent .hudPanelBar{ display:none; }
  #xpWin.hudTransparent .hudResize{ opacity:0; }
  /* Ojo de "quitar transparencia": A LA DERECHA de la ventana y centrado en vertical,
     no debajo. Como hijo normal caía en el flujo, bajo la barra, y además ALARGABA la
     ventana — lo que empujaba hacia arriba la barra de acción que se apoya en ella.
     Absoluto = no ocupa sitio en el flujo. El hueco a su derecha lo reserva el
     padding de #xpWin.hudTransparent, para que no tape el texto de la XP. */
  .hudReveal{
    display:none; position:absolute; right:8px; top:50%; transform:translateY(-50%);
    box-sizing:border-box; width:22px; height:22px; align-items:center; justify-content:center;
    /* line-height:1: el botón centra su contenido con flex, pero una caja de línea más alta
       que el icono lo empuja hacia abajo igualmente. */
    margin:0; padding:0; cursor:pointer; font-size:11px; line-height:1;
    background:#0b111de6; border:1px solid var(--line); border-radius:50%;
    color:var(--text-dim); transition:.15s; pointer-events:auto;
  }
  .hudReveal:hover{ color:var(--cyan); border-color:var(--cyan); }
  #xpWin.hudTransparent .hudReveal{ display:flex; }

  /* Tirador de REDIMENSIONADO por la esquina (mismo gesto que las ventanas de registro). */
  .hudResize{
    position:absolute; right:2px; bottom:2px; width:14px; height:14px; cursor:nwse-resize;
    background:linear-gradient(135deg, transparent 50%, var(--line) 50%, var(--line) 62%, transparent 62%);
  }
  .hudResize:hover{ background:linear-gradient(135deg, transparent 50%, var(--cyan) 50%, var(--cyan) 62%, transparent 62%); }
  #stats .row{ display:flex; align-items:center; gap:8px; margin:4px 0; font-size:12px; }
  #stats .label{ width:52px; color:var(--text-dim); letter-spacing:1px; }
  .bar{ flex:1; height:9px; background:#0009; border:1px solid var(--line); position:relative; overflow:hidden; }
  .bar-fill{ position:absolute; inset:0; width:100%; transition:width .12s linear; }
  #hpFill{ background:linear-gradient(90deg,#ff4655,#ff8a94); }
  #shFill{ background:linear-gradient(90deg,#3ed6ff,#8fe9ff); }
  .hudList{ font-size:12px; }
  .hudList > div{ display:flex; justify-content:space-between; margin:2px 0; }
  .hudSubWin{ width:220px; box-sizing:border-box; }

  .dashPips{ display:flex; gap:5px; flex:1; }
  .dashPip{
    flex:1; height:9px; background:#0009; border:1px solid var(--line);
    position:relative; overflow:hidden; border-radius:2px;
  }
  .dashPip .dashFill{
    position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#3ed6ff,#8fe9ff);
    transition:width .15s linear;
  }
  .dashPip.ready{ border-color:var(--cyan); box-shadow:0 0 6px #3ed6ff55; }
  .dashPip.ready .dashFill{ width:100%; }
  .metal{ color:var(--grey); } .crystal{ color:var(--purple); } .deut{ color:var(--gold); }

  #target{ top:14px; left:250px; width:210px; display:none; }
  #target .name{ font-size:12px; letter-spacing:1px; margin-bottom:6px; }

  #minimapWrap{ top:14px; right:14px; padding:6px; pointer-events:auto; }
  #minimap{ display:block; background:#020306; border:1px solid var(--line); cursor:pointer; }
  /* Botón del mapa galáctico (vive DENTRO del minimapa, a lo ancho).
     OJO: #settingsBtn ESTABA aquí, de cuando Ajustes también vivía en el
     minimapa. Al mudarse al menú de opciones (botón CUADRADO .optSlot) la
     regla se quedó: como es un selector de ID, GANABA a .optSlot y le
     imponía margin-top:6px + width:100% -> el botón de Ajustes salía 6px
     MÁS ABAJO que el de Barras (el desalineado) y más ancho. No lo añadas
     de vuelta: el estilo de esos botones es .optSlot. */
  #galaxyMapBtn{
    margin-top:6px; width:100%; background:transparent; border:1px solid var(--line); color:var(--text-dim);
    font-family:var(--mono); font-size:10px; letter-spacing:2px; padding:5px 0; cursor:pointer; transition:.15s;
  }
  #galaxyMapBtn:hover{ border-color:var(--cyan); color:var(--cyan); }

  #galaxyMapOverlay{
    position:fixed; inset:0; background:rgba(5,6,10,0.94); backdrop-filter:blur(3px);
    z-index:20; display:none; align-items:center; justify-content:center;
    font-family:var(--mono); color:var(--text);
  }
  #galaxyMapOverlay.open{ display:flex; }
  #galaxyHeader{ position:absolute; top:26px; left:50%; transform:translateX(-50%); text-align:center; }
  #galaxyHeader h2{ margin:0; font-size:17px; letter-spacing:6px; color:var(--cyan); text-shadow:0 0 14px #3ed6ff55; }
  #galaxyHeader p{ margin:6px 0 0; font-size:11px; color:var(--text-dim); letter-spacing:1px; }
  #closeGalaxyMap{
    position:absolute; top:24px; right:28px; background:transparent; border:1px solid var(--line); color:var(--text-dim);
    font-family:var(--mono); font-size:14px; width:32px; height:32px; cursor:pointer; transition:.15s;
  }
  #closeGalaxyMap:hover{ border-color:var(--red); color:var(--red); }
  #galaxyCanvas{ display:block; }

  #langSelect{
    background:#0009; border:1px solid var(--line); border-radius:3px; color:var(--text);
    font-family:var(--mono); font-size:11px; padding:5px 8px; outline:none; cursor:pointer;
  }
  #langSelect:focus{ border-color:var(--safe); }
  /* ---------- DUELO JUSTO: menú de selección ---------- */
  #fairOverlay{
    position:fixed; inset:0; background:rgba(5,6,10,0.94); backdrop-filter:blur(3px);
    z-index:27; display:none; align-items:flex-start; justify-content:center;
    font-family:var(--mono); color:var(--text); overflow-y:auto; padding:40px 20px;
  }
  #fairOverlay.open{ display:flex; }
  #fairPanel{ width:min(680px, 96vw); }
  .fairHead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .fairHead h2{ margin:0; font-size:15px; letter-spacing:4px; color:var(--cyan); text-shadow:0 0 14px #3ed6ff55; }
  #fairCountdown{ font-size:12px; color:var(--gold, #ffd166); white-space:nowrap; }
  .fairHint{ font-size:11px; color:var(--text-dim); margin:6px 0 14px; }
  .fairSection{ margin:14px 0 4px; font-size:11px; letter-spacing:3px; color:var(--text-dim); }
  /* Catálogo de naves: tarjetas con el MODELO 3D girando (mismos canvas que el Hangar) */
  .fairShips{ display:flex; gap:8px; flex-wrap:wrap; }
  .fairShipCard{
    flex:0 0 auto; text-align:center; padding:8px 10px; cursor:pointer; font-family:inherit;
    background:var(--panel); border:1px solid var(--line); border-radius:4px; color:var(--text-dim);
  }
  .fairShipCard.sel{ border-color:var(--cyan); color:var(--text); box-shadow:0 0 10px #3ed6ff33; }
  .fairShipCanvas{ display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 50% 40%, #0e1826, #05060a); border-radius:4px; }
  .fairShipName{ font-size:11px; margin-top:5px; color:inherit; }
  /* Equipamiento: los HUECOS de la nave (reusa .slotBox del Hangar); pulsar abre opciones */
  .fairSlotsWrap{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0 18px; }
  .fairSlot{ width:100%; cursor:pointer; font-family:inherit; color:var(--text); background:transparent; text-align:left; }
  .fairSlot:hover{ border-color:var(--cyan); }
  .fairSlotPopup{
    position:fixed; z-index:30; min-width:210px; background:var(--panel);
    border:1px solid var(--line); border-radius:4px; overflow:hidden; backdrop-filter:blur(2px);
  }
  .fairPopOpt{
    display:block; width:100%; box-sizing:border-box; text-align:left; padding:7px 12px; font-size:12px;
    background:transparent; border:none; color:var(--text-dim); cursor:pointer; font-family:inherit;
  }
  .fairPopOpt:hover{ background:#12203055; color:var(--safe); }
  .fairPopOpt.sel{ color:var(--safe); }
  .fairPopEmpty{ border-top:1px solid var(--line); }
  .fairPopEmpty:hover{ color:var(--danger); }
  /* Munición por CATEGORÍAS: células / misiles / minas, cada una con su cabecera */
  .fairAmmoCat{ margin-top:8px; }
  .fairAmmoRow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
  .fairAmmo{
    padding:6px 10px; font-size:11px; cursor:pointer; font-family:inherit;
    background:var(--panel); border:1px solid var(--line); border-radius:4px; color:var(--text-dim);
  }
  .fairAmmo.sel{ border-color:var(--gold, #ffd166); color:var(--gold, #ffd166); }
  .fairFoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
  .fairOpp{ font-size:11px; color:var(--text-dim); }
  .fairOpp.ready{ color:var(--safe); }
  .fairReadyBtn{
    padding:9px 22px; font-size:12px; letter-spacing:2px; cursor:pointer; font-family:inherit;
    background:#0b111dcc; border:1px solid var(--line); border-radius:4px; color:var(--text-dim); transition:.15s;
  }
  .fairReadyBtn:hover{ border-color:var(--safe); color:var(--safe); }
  .fairReadyBtn.ready{ border-color:var(--safe); color:var(--safe); box-shadow:0 0 10px #4ee6a044; }

  #settingsOverlay{
    position:fixed; inset:0; background:rgba(5,6,10,0.94); backdrop-filter:blur(3px);
    z-index:26; display:none; align-items:flex-start; justify-content:center;
    font-family:var(--mono); color:var(--text); overflow-y:auto; padding:70px 20px 40px;
  }
  #settingsOverlay.open{ display:flex; }
  #settingsHeader{ position:absolute; top:26px; left:50%; transform:translateX(-50%); text-align:center; }
  #settingsHeader h2{ margin:0; font-size:17px; letter-spacing:6px; color:var(--cyan); text-shadow:0 0 14px #3ed6ff55; }
  #settingsHeader p{ margin:6px 0 0; font-size:11px; color:var(--text-dim); letter-spacing:1px; }
  #closeSettings{
    position:absolute; top:24px; right:28px; background:transparent; border:1px solid var(--line); color:var(--text-dim);
    font-family:var(--mono); font-size:14px; width:32px; height:32px; cursor:pointer; transition:.15s;
  }
  #closeSettings:hover{ border-color:var(--red); color:var(--red); }

  #settingsBody{ display:flex; flex-direction:column; gap:16px; max-width:460px; width:100%; }
  .settingsCol{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:14px 16px; }
  .settingsCol h3{ margin:0 0 4px; font-size:12px; letter-spacing:3px; color:var(--text-dim); font-weight:normal; }
  .settingsCol .colHint{ font-size:10px; color:var(--text-dim); margin:0 0 12px; line-height:1.5; }
  .settingRow{
    display:flex; align-items:center; justify-content:space-between;
    border-top:1px solid var(--line); padding:10px 0;
  }
  .settingRow:first-of-type{ border-top:none; padding-top:0; }
  .settingRow .rowLabel{ font-size:12px; }
  .settingRow .rowSub{ display:block; font-size:9px; color:var(--text-dim); margin-top:2px; letter-spacing:.5px; }

  .toggleSwitch{
    position:relative; width:42px; height:22px; flex:none; cursor:pointer;
    background:#0009; border:1px solid var(--line); border-radius:11px; transition:.15s;
  }
  .toggleSwitch .knob{
    position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
    background:var(--text-dim); transition:.15s;
  }
  .toggleSwitch.on{ border-color:var(--cyan); background:#3ed6ff22; }
  .toggleSwitch.on .knob{ left:22px; background:var(--cyan); box-shadow:0 0 6px #3ed6ff88; }
  .toggleSwitch.disabled{ opacity:.4; cursor:not-allowed; }

  .keybindBtn{
    background:transparent; border:1px solid var(--line); color:var(--text);
    font-family:var(--mono); font-size:11px; letter-spacing:2px; padding:6px 14px;
    cursor:pointer; transition:.15s; min-width:64px; text-align:center; border-radius:3px;
  }
  .keybindBtn:hover{ border-color:var(--cyan); color:var(--cyan); }
  .keybindBtn.listening{ border-color:var(--gold); color:var(--gold); animation:dockPulse 1s ease-in-out infinite; }
  .keybindConflict{ color:var(--red); font-size:10px; margin-top:6px; letter-spacing:.5px; }

  #sectorLabel{
    top:14px; left:50%; transform:translateX(-50%);
    font-size:11px; letter-spacing:4px; color:var(--text-dim); padding:6px 16px;
  }
  #sectorLabel b{ color:var(--cyan); letter-spacing:3px; }

  /* Ventanas de registro/chat: flotantes sobre el HUD. El HUD lleva
     pointer-events:none para que los clicks atraviesen al juego — cada
     ventana los REACTIVA (era el motivo de que no se pudiera ni pulsar ni
     scrollear: nunca se reactivaron). */
  .logWindow{
    position:absolute; z-index:6; pointer-events:auto;
    background:var(--panel); border:1px solid var(--line); border-radius:4px;
    padding:8px 10px; backdrop-filter:blur(2px);
    font-size:11px; color:var(--text-dim); line-height:1.5;
    /* tamaño ESTÁNDAR FIJO (340×210, lo pone JS): la ventana no crece sola
       al recibir información — el cuerpo tiene scroll — y el usuario la
       redimensiona desde la esquina inferior derecha */
    display:flex; flex-direction:column; box-sizing:border-box;
  }
  .logResize{
    position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize;
    background:linear-gradient(135deg, transparent 50%, var(--line) 50%);
    border-bottom-right-radius:4px;
  }
  .logResize:hover{ background:linear-gradient(135deg, transparent 50%, var(--safe) 50%); }
  /* modo edición de paneles del HUD: bloqueado (por defecto) el panel es
     atravesable como siempre; desbloqueado captura el ratón para arrastrar
     y sus controles internos (p.ej. la navegación del minimapa) quedan
     suspendidos hasta volver a bloquear */
  /* barra fina de cabecera de los paneles del HUD: da a los iconos su
     propio espacio (el justo) en vez de flotar sobre el contenido */
  .hudPanelBar{
    display:flex; justify-content:flex-end; gap:2px; align-items:center;
    height:16px; margin:-4px -6px 3px 0; pointer-events:none;
  }
  .hudPanelTitle{
    flex:1; font-size:9px; letter-spacing:2px; color:var(--text-dim);
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .hudPanelBar button{
    pointer-events:auto;
    background:transparent; border:1px solid var(--line); border-radius:3px;
    color:var(--text-dim); font-size:9px; line-height:1; width:19px; height:15px;
    cursor:pointer; padding:0; opacity:.6; transition:.15s;
  }
  .hudPanelBar button:hover{ opacity:1; border-color:var(--safe); color:var(--safe); }
  /* Nombre de otro jugador en el chat: pulsable con el botón secundario (abre su
     menú de acciones, el mismo que el de su nave). Se marca con el subrayado
     punteado para que se vea que TIENE acciones detrás. */
  .chatName{ cursor:context-menu; border-bottom:1px dotted var(--line); }
  .chatName:hover{ color:var(--cyan); border-bottom-color:var(--cyan); }

  /* ---------- MENÚ DE JUGADOR (botón secundario sobre otra nave o sobre su nombre en el chat) ---------- */
  /* Se coloca en el punto del click (JS pone left/top). Ancho mínimo para que las
     acciones se lean; se cierra al clicar fuera o con Escape. */
  /* pointer-events:auto es OBLIGATORIO: #playerMenu cuelga de #hud, que tiene
     pointer-events:none para que los clicks atraviesen al juego. Sin esto, los
     clicks LO ATRAVIESAN y llegan al canvas (moviendo la nave y disparando el
     AIM-1) en vez de pulsar la opción. Cada ventana del HUD reactiva lo suyo. */
  #playerMenu{
    /* z-index POR ENCIMA de los overlays a pantalla completa (estación: 25, amigos: 24):
       en la vista expandida de amigos el clic secundario sobre una fila abre este menú, y
       con el 14 de antes se habría quedado DEBAJO del overlay — invisible. */
    display:none; position:fixed; z-index:30; min-width:190px; padding:0;
    border:1px solid var(--line); border-radius:4px; overflow:hidden;
    pointer-events:auto;
  }
  #playerMenu.open{ display:block; }
  .playerMenuName{
    padding:7px 12px; font-size:12px; letter-spacing:1px; text-align:center;
    color:var(--cyan); border-bottom:1px solid var(--line); background:#0b111dcc;
  }
  .playerMenuItem{
    display:block; width:100%; box-sizing:border-box; text-align:left;
    padding:8px 12px; font-size:12px; background:transparent; border:none;
    color:var(--text-dim); cursor:pointer; font-family:inherit;
  }
  .playerMenuItem:hover{ background:#12203055; color:var(--safe); }

  /* ---------- VENTANAS DE PREGUNTA (duelo, invitación de grupo) ---------- */
  /* Mismo esqueleto para las dos: mensaje + cuenta atrás + dos botones (clases ask*).
     Por defecto JUSTO ENCIMA de la ventana de chat (que nace en left:14 bottom:14
     con 210px de alto): 14 + 210 + 10 de aire = 234. Son ventanas del HUD normales,
     así que se pueden desbloquear con su candado y llevárselas a otro sitio; la
     posición elegida se guarda como las demás. La de grupo nace un poco más arriba
     para no aparecer EXACTAMENTE encima de la de duelo (pueden coincidir: te pueden
     invitar a un grupo en pleno duelo). */
  /* pointer-events:auto, igual que #playerMenu y las ventanas de registro: .panel NO
     lo reactiva (los paneles de solo lectura como Estado o Recursos dejan pasar los
     clicks al juego a propósito), pero estas ventanas TIENEN BOTONES. Sin esto, los
     clicks las atraviesan y aceptar/rechazar no hace nada. */
  #duelWin, #partyInviteWin{
    display:none; position:absolute; left:14px; bottom:234px; top:auto; right:auto;
    z-index:7; width:300px; box-sizing:border-box;
    pointer-events:auto;
  }
  #partyInviteWin{ bottom:390px; }
  #duelWin.open, #partyInviteWin.open{ display:block; }
  .askMsg{ font-size:12px; color:var(--text); line-height:1.5; margin-bottom:8px; }
  .askMsg b{ color:var(--cyan); }
  .askCountdown{ font-size:11px; color:var(--text-dim); margin-bottom:8px; }
  .askBtns{ display:flex; gap:8px; }
  .askBtn{
    flex:1 1 0; padding:7px 0; font-size:12px; font-family:inherit; cursor:pointer;
    border-radius:4px; border:1px solid var(--line); background:#0b111dcc; color:var(--text-dim);
    transition:.15s;
  }
  .askYes:hover{ border-color:var(--safe); color:var(--safe); }
  .askNo:hover{ border-color:var(--danger); color:var(--danger); }

  /* ---------- VENTANA DE AMIGOS (pestañas: amigos / solicitudes / ignorados) ---------- */
  /* Se abre y se cierra con su botón del menú de opciones (clase `open`), no con el ojo
     del HUD: no es una ventana "de estar", es una que se consulta. Tiene botones, así que
     pointer-events:auto (si no, los clicks la ATRAVIESAN hacia el juego). */
  #friendsWin{
    display:none; position:absolute; z-index:8; width:270px; box-sizing:border-box;
    pointer-events:auto;
  }
  #friendsWin.open{ display:block; }
  #friendAskWin{
    display:none; position:absolute; left:14px; bottom:546px; top:auto; right:auto;
    z-index:7; width:300px; box-sizing:border-box; pointer-events:auto;
  }
  #friendAskWin.open{ display:block; }
  .friendsTabs{ display:flex; gap:4px; margin-bottom:6px; }
  .friendsTab{
    flex:1 1 0; padding:5px 0; font-size:10px; letter-spacing:.5px; font-family:inherit;
    cursor:pointer; border-radius:3px; border:1px solid var(--line); background:#0b111dcc;
    color:var(--text-dim); transition:.15s;
  }
  .friendsTab:hover{ color:var(--text); }
  .friendsTab.on{ border-color:var(--cyan); color:var(--cyan); }
  .friendsSearch{
    width:100%; box-sizing:border-box; margin-bottom:6px; padding:6px 8px;
    background:#0b111dcc; border:1px solid var(--line); border-radius:3px;
    color:var(--text); font-family:inherit; font-size:11px;
  }
  .friendsSearch:focus{ outline:none; border-color:var(--cyan); }
  .friendsSearch::placeholder{ color:var(--text-dim); }
  .friendsList{ max-height:240px; overflow-y:auto; }
  .friendRow{
    display:flex; align-items:center; gap:6px;
    padding:5px 2px; border-bottom:1px solid var(--line);
  }
  .friendRow:last-child{ border-bottom:none; }
  .friendDot{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--text-dim); }
  .friendRow.friendOnline .friendDot{ background:var(--safe); }
  .friendName{ flex:1 1 auto; min-width:0; font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .friendLevel{ flex:0 0 auto; font-size:10px; color:var(--gold, #ffd166); }
  .friendState{ flex:0 0 auto; font-size:9px; letter-spacing:.5px; color:var(--text-dim); text-transform:uppercase; }
  .friendRow.friendOnline .friendState{ color:var(--safe); }
  .friendsSection{
    padding:6px 2px 3px; font-size:9px; letter-spacing:1px; text-transform:uppercase;
    color:var(--text-dim); border-bottom:1px solid var(--line);
  }
  .friendRow.friendOnline .friendName{ color:var(--cyan); }
  .friendActs{ flex:0 0 auto; display:flex; gap:4px; }
  .friendAct{
    width:22px; height:22px; line-height:1; font-size:12px; font-family:inherit; cursor:pointer;
    border-radius:3px; border:1px solid var(--line); background:#0b111dcc; color:var(--text-dim);
    transition:.15s; padding:0;
  }
  .friendAct.ok:hover{ border-color:var(--safe); color:var(--safe); }
  .friendAct.no:hover{ border-color:var(--danger); color:var(--danger); }
  .friendsEmpty{ padding:10px 2px; font-size:11px; color:var(--text-dim); text-align:center; }

  /* El nombre de un jugador NO ES TEXTO PARA SELECCIONAR, es un objetivo sobre el que se
     pulsa (clic secundario -> menú de jugador). Sin esto el navegador enseña el cursor de
     escritura (la barra vertical), que promete "aquí puedes seleccionar/escribir" — una
     mentira que además invita a arrastrar y dejar el nombre medio seleccionado en azul.
     `user-select:none` remata lo mismo por el otro lado. Vale para AMIGOS y para GRUPO. */
  .friendRow, .friendRow *,
  .partyRow, .partyRow *{ cursor:default; user-select:none; -webkit-user-select:none; }
  .friendAct{ cursor:pointer; }   /* los botones sí son botones: su cursor manda */

  /* AMIGOS A PANTALLA COMPLETA: mismo patrón que la estación orbital. */
  #friendsOverlay{
    position:fixed; inset:0; background:rgba(5,6,10,0.96); backdrop-filter:blur(3px);
    z-index:24; display:none; align-items:flex-start; justify-content:center;
    font-family:var(--mono); color:var(--text); overflow-y:auto; padding:88px 20px 40px;
    pointer-events:auto;   /* explícito: si algún día vuelve a colgar de #hud, los clics no se colarán al juego */
  }
  #friendsOverlay.open{ display:flex; }
  #friendsOvHeader{ position:absolute; top:26px; left:50%; transform:translateX(-50%); text-align:center; }
  #friendsOvHeader h2{ margin:0; font-size:17px; letter-spacing:5px; color:var(--cyan); text-shadow:0 0 14px #3ed6ff55; }
  #friendsOvMin, #friendsOvClose{
    position:absolute; top:24px; background:transparent; border:1px solid var(--line); color:var(--text-dim);
    font-family:var(--mono); font-size:14px; width:32px; height:32px; cursor:pointer; transition:.15s;
  }
  #friendsOvClose{ right:28px; }
  #friendsOvMin{ right:68px; }
  #friendsOvClose:hover{ border-color:var(--danger); color:var(--danger); }
  #friendsOvMin:hover{ border-color:var(--cyan); color:var(--cyan); }
  #friendsOvBody{ max-width:620px; width:100%; }
  /* En pantalla completa la lista respira: sin tope de alto (para eso se expande) y con
     filas más altas. Las clases de las filas son LAS MISMAS: una sola manera de pintarlas. */
  .friendsListBig{ max-height:none; }
  .friendsListBig .friendRow{ padding:9px 4px; gap:9px; }
  .friendsListBig .friendName{ font-size:14px; }
  .friendsListBig .friendsSection{ padding:12px 4px 5px; }

  /* ---------- VENTANA DE GRUPO ---------- */
  /* OJO: aquí NO se pone display:none. La visibilidad la decide el JS
     (applyPartyVisibility: hay grupo Y no está oculta a mano), y lo hace con
     style.display=''  — que se resuelve al valor del CSS. Si el CSS dijera "none",
     la ventana no aparecería NUNCA. Su estado inicial oculto va en el atributo
     style del HTML, que el JS sí puede sobreescribir. */
  #partyWin{ pointer-events:auto; }   /* tiene botones (abandonar) y menú contextual */
  .partyRow{
    padding:5px 0; border-bottom:1px solid var(--line);
  }
  .partyRow:last-child{ border-bottom:none; }
  .partyHead{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; margin-bottom:3px; }
  .partyName{ font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .partyRow.partySelf .partyName{ color:var(--cyan); }
  .partyRow.partyDead .partyName{ color:var(--danger); }
  .partyLevel{ font-size:11px; color:var(--gold, #ffd166); flex:0 0 auto; }
  /* MIRILLA de la fila: ¿el Tab de ESE compañero fija a los aliados? Apagada (gris tenue)
     = no te va a fijar; encendida (roja) = sí. Es INFORMACIÓN, no un escudo: el fuego
     amigo existe igual (con clic, con AIM-1 o con un misil no guiado). */
  .partyAim{ flex:0 0 auto; display:flex; align-items:center; line-height:1; color:var(--text-dim); opacity:.35; }
  .partyAim.on{ color:var(--red); opacity:1; }
  /* Botón de apuntado a aliados: el MISMO interruptor que el de Ajustes (los dos pasan por
     setTargetCycleAllies). Encendido = tu Tab fija a los tuyos. */
  .partyAimBtn{
    display:block; width:100%; margin-top:8px; padding:6px 0;
    font-size:10px; font-family:inherit; letter-spacing:1px; cursor:pointer;
    border-radius:4px; border:1px solid var(--line); background:#0b111dcc; color:var(--text-dim);
    transition:.15s;
  }
  .partyAimBtn:hover{ border-color:var(--cyan); color:var(--cyan); }
  .partyAimBtn.on{ border-color:var(--red); color:var(--red); }
  /* OJO CON `.bar`: nace con `flex:1` porque en el HUD de siempre vive dentro de una
     FILA horizontal (`.row`), donde ese flex-grow le da el ANCHO. Aquí las barras se
     apilan en COLUMNA, y en un contenedor flex vertical ese mismo `flex:1` significa
     `flex-basis:0%` EN EL EJE VERTICAL: como la fila tiene altura automática (no hay
     espacio libre que repartir), las barras COLAPSAN A ALTURA 0 — existían, se
     actualizaban con cada mensaje del grupo… y no se veían. Por eso hay que anular el
     flex aquí y darles su alto y su ancho explícitos. */
  .partyBars{ display:flex; flex-direction:column; gap:3px; }
  .partyBars .bar{ flex:0 0 auto; height:7px; width:100%; }
  .partyHpFill{ background:linear-gradient(90deg,#ff4655,#ff8a94); }
  .partyShFill{ background:linear-gradient(90deg,#3ed6ff,#8fe9ff); }
  .partyLeaveBtn{
    display:block; width:100%; margin-top:8px; padding:6px 0;
    font-size:11px; font-family:inherit; cursor:pointer;
    border-radius:4px; border:1px solid var(--line); background:#0b111dcc; color:var(--text-dim);
    transition:.15s;
  }
  .partyLeaveBtn:hover{ border-color:var(--danger); color:var(--danger); }

  /* Botón de RESERVA de Ajustes: solo aparece si se OCULTA el menú de opciones.
     Va ABAJO A LA DERECHA, en el sitio que ocupa el propio menú de opciones:
     es donde el jugador ya busca los ajustes, así que recuperarlos es
     intuitivo. Antes estaba arriba a la derecha, TAPANDO EL MINIMAPA.
     No hay conflicto con #optionsMenu (también abajo a la derecha): este botón
     solo existe cuando ese menú está OCULTO, nunca conviven.
     z-index por encima de las ventanas del HUD para que nunca quede sepultado
     y siga siendo clicable, que es su única razón de existir. */
  #settingsFallbackBtn{
    display:none; bottom:14px; right:14px; top:auto; left:auto;
    z-index:6; pointer-events:auto; cursor:pointer;
    font-size:13px; padding:6px 10px; color:var(--text-dim);
    font-family:var(--mono);
  }
  #settingsFallbackBtn:hover{ color:var(--safe); border-color:var(--safe); }
  .panel.uiUnlocked{
    pointer-events:auto; cursor:grab;
    outline:1px dashed var(--gold); outline-offset:2px;
  }
  .panel.uiUnlocked:active{ cursor:grabbing; }
  .panel.uiUnlocked > *:not(.hudLockBtn){ pointer-events:none; }
  .logWinHeader{ display:flex; align-items:center; gap:5px; margin-bottom:5px; cursor:grab; user-select:none; }
  .logWindow.locked .logWinHeader{ cursor:default; }
  .logWinHeader:active{ cursor:grabbing; }
  .logWindow.locked .logWinHeader:active{ cursor:default; }
  .logWinTitle{ flex:1; font-size:9px; letter-spacing:2px; color:var(--text-dim); }
  .logWinBtn{
    background:transparent; border:1px solid var(--line); color:var(--text-dim);
    font-family:var(--mono); font-size:10px; width:22px; height:20px; line-height:1;
    cursor:pointer; border-radius:3px; padding:0;
  }
  .logWinBtn:hover{ border-color:var(--safe); color:var(--safe); }
  .logTabs{ display:flex; gap:4px; margin-bottom:4px; }
  .logTab{
    background:transparent; border:1px solid var(--line); color:var(--text-dim);
    font-family:var(--mono); font-size:9px; letter-spacing:1.5px; padding:3px 8px; cursor:pointer; border-radius:3px;
  }
  .logTab.active{ border-color:var(--safe); color:var(--safe); }
  .logBody{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
    /* scrollbar con el estilo del juego (la nativa blanca desentonaba) */
    scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  }
  .logBody::-webkit-scrollbar{ width:8px; }
  .logBody::-webkit-scrollbar-track{ background:transparent; }
  .logBody::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
  .logBody::-webkit-scrollbar-thumb:hover{ background:var(--safe); }
  .logBody div{ opacity:.85; }
  .logBody .kill{ color:var(--red); }
  .logBody .loot{ color:var(--gold); }
  .logBody .jump{ color:var(--cyan); }
  .logBody .remote{ color:var(--remote); }
  .logBody .craft{ color:#c9a0ff; }
  .logBody .chat{ color:var(--text); }
  .logBody .chat b{ color:var(--cyan); font-weight:normal; }
  /* CANALES DE CHAT. Los tres se ven en TODO, cada uno con SU color:
     global = el de siempre; privado = AZUL; grupo = un azul MÁS OSCURO que el privado
     (misma familia — los dos son "gente hablándote a ti y no al mapa entero"— pero
     distinguibles de un vistazo en una lista que baja rápido). */
  .logBody .pm{ color:var(--pm); }
  .logBody .pm b{ color:var(--pm); font-weight:bold; }
  .logBody .party{ color:var(--party); }
  .logBody .party b{ color:var(--party); font-weight:bold; }
  .logBody .sector{ color:var(--sector); }
  .logBody .sector b{ color:var(--sector); font-weight:bold; }
  /* Un privado que NO ha salido (destinatario desconectado, o muro de ignorados) se avisa
     DENTRO de su conversación: es .warn (rojo/aviso) y .pm a la vez, así que aparece en la
     pestaña de esa charla — donde la persona está escribiendo — y también en TODO. Sin
     esto, el aviso caía en el registro general y quien estaba en la conversación no lo
     veía: seguía escribiendo al vacío. */
  .logBody .warn.pm{ color:var(--red); font-style:italic; }
  .logTime{ display:none; color:var(--text-dim); opacity:.8; }
  .logWindow.showTime .logTime{ display:inline; }
  /* filtro por pestaña. Ya no hay una pestaña por categoría (no cabían): hay TODO y una
     PERSONALIZABLE, que enciende lo que tenga marcado. La regla es "esconde todo y ve
     reencendiendo": seis clases `show-X` dan las 64 combinaciones sin generar CSS al vuelo.
     El privado necesita ADEMÁS al JS (applyPmVisibility): su regla deja pasar TODOS los
     .pm, y es el JS quien esconde los de las OTRAS conversaciones — CSS no puede comparar
     el data-peer de una línea con el de la pestaña activa. */
  .logBody.filter-custom > div{ display:none; }
  .logBody.filter-custom.show-sys > div.sys{ display:block; }
  .logBody.filter-custom.show-craft > div.craft{ display:block; }
  .logBody.filter-custom.show-loot > div.loot{ display:block; }
  .logBody.filter-custom.show-chat > div.chat{ display:block; }
  .logBody.filter-custom.show-sector > div.sector{ display:block; }
  .logBody.filter-custom.show-party > div.party{ display:block; }
  .logBody.filter-custom.show-pm > div.pm{ display:block; }
  .logBody.filter-pm div:not(.pm){ display:none; }

  /* Pestaña personalizable: su etiqueta la escribe el JS (se llama como la categoría si solo
     hay una marcada). Vacía = no enseña nada, y se dice — si no, parecería el chat roto.
     El desplegable NO es una flechita dentro de la pestaña sino un BOTÓN CUADRADO al lado:
     un objetivo de 18px se acierta con el ratón; un icono de 8px, no. (Y va fuera del
     <button> de la pestaña porque un botón no puede contener otro botón.) */
  .logTabs{ position:relative; }
  .customBtn{
    flex:0 0 auto; width:18px; height:18px; line-height:1; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:#0b111dcc; border:1px solid var(--line); border-radius:3px;
    color:var(--text-dim); font-size:9px; cursor:pointer;
  }
  .customBtn:hover{ border-color:var(--cyan); color:var(--cyan); }
  .logTab.empty{ opacity:.5; font-style:italic; }
  /* El panel se coloca al lado del CLIC (el JS pone el `left`), y sus casillas van en DOS
     COLUMNAS de 4 como mucho: en una sola tira, siete opciones son una lista larguísima que
     tapa medio registro. `grid-auto-flow: column` con 4 filas llena primero la columna
     izquierda y desborda a la derecha — así crece a lo ancho, no a lo alto. */
  .customMenu{
    display:none; position:absolute; top:calc(100% + 4px); left:0; z-index:6;
    background:#0b111df2; border:1px solid var(--line); border-radius:4px; padding:4px;
  }
  .customMenu.open{ display:block; }
  .customMenuTitle{
    color:var(--text-dim); font-size:9px; letter-spacing:1px; padding:3px 6px 5px;
    border-bottom:1px solid var(--line); margin-bottom:3px;
  }
  .customGrid{
    display:grid; grid-auto-flow:column; grid-template-rows:repeat(4, auto);
    gap:2px 6px;
  }
  .customOpt{
    display:flex; align-items:center; gap:6px; width:100%; text-align:left;
    background:transparent; border:none; color:var(--text-dim);
    font-family:var(--mono); font-size:10px; padding:5px 6px; border-radius:3px; cursor:pointer;
    white-space:nowrap;
  }
  .customOpt:hover{ background:#1c2b4066; }
  .customOpt.on{ color:var(--text); }
  .customOpt.on.cat-chat{ color:var(--cyan); }
  .customOpt.on.cat-sector{ color:var(--sector); }
  .customOpt.on.cat-party{ color:var(--party); }
  .customOpt.on.cat-pm{ color:var(--pm); }
  .customBox{
    flex:0 0 auto; width:12px; height:12px; line-height:11px; text-align:center; font-size:9px;
    border:1px solid var(--line); border-radius:2px; color:inherit;
  }
  .customOpt.on .customBox{ border-color:currentColor; }

  /* PESTAÑAS DE CONVERSACIÓN PRIVADA: fila propia, con forma de pestaña de navegador
     (esquinas superiores redondeadas y pegadas al cuerpo), para que no se confundan con las
     pestañas de REGISTRO de arriba, que son filtros y no conversaciones. Solo existen si hay
     alguna charla abierta (la clase hasPmTabs la pone el JS). Con muchas, la fila NO crece
     ni se sale de la ventana: se desliza, con una barra fina y visible (una barra escondida
     es una función que la gente no encuentra). */
  .pmTabs{
    display:none; gap:3px; margin-bottom:4px; padding-bottom:2px;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  }
  .pmTabs::-webkit-scrollbar{ height:5px; }
  .pmTabs::-webkit-scrollbar-track{ background:#0006; border-radius:3px; }
  .pmTabs::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
  .pmTabs::-webkit-scrollbar-thumb:hover{ background:var(--pm); }
  .logWindow.hasPmTabs .pmTabs{ display:flex; }
  .pmTab{
    display:flex; align-items:center; gap:4px; flex:0 0 auto; max-width:150px;
    padding:3px 5px 3px 8px; cursor:pointer; border:1px solid var(--line); border-bottom:none;
    border-radius:6px 6px 0 0; background:#0b111dcc; color:var(--text-dim); font-size:10px;
  }
  .pmTab:hover{ color:var(--pm); }
  .pmTab.active{ border-color:var(--pm); color:var(--pm); background:#0e1a2ccc; }
  .pmTabName{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pmTabBtn{
    background:transparent; border:none; color:inherit; opacity:.6;
    font-family:var(--mono); font-size:10px; line-height:1; padding:1px 2px; cursor:pointer;
  }
  .pmTabBtn:hover{ opacity:1; }

  .chatRow{ display:flex; gap:5px; margin-top:5px; }
  /* SELECTOR DE CANAL (a dónde se escribe). NO es un <select>: el desplegable de un select
     lo pinta el SISTEMA OPERATIVO (gris y blanco, con su tipografía), y esa lista no se
     puede estilar de forma fiable en ningún navegador — por muy maquillada que esté la
     caja cerrada. Es un botón + un menú de divs, con el mismo lenguaje que el resto del HUD
     y teñido del color del canal elegido: se ve a dónde va el mensaje sin leer nada. */
  .chatChan{ position:relative; flex:0 0 auto; }
  .chatChanBtn{
    width:100%; min-width:74px; max-width:110px; height:100%;
    background:#0009; border:1px solid var(--line); border-radius:3px;
    color:var(--text-dim); font-family:var(--mono); font-size:9px; letter-spacing:1px;
    padding:0 6px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .chatChanBtn:hover{ border-color:var(--cyan); }
  .chatChanBtn.ch-sector{ color:var(--sector); border-color:var(--sector); }
  .chatChanBtn.ch-party{ color:var(--party); border-color:var(--party); }
  .chatChanBtn.ch-pm{ color:var(--pm); border-color:var(--pm); }
  .chatChanMenu{
    display:none; position:absolute; bottom:calc(100% + 4px); left:0; z-index:5;
    min-width:120px; max-height:180px; overflow-y:auto;
    background:#0b111df2; border:1px solid var(--line); border-radius:4px; padding:3px;
    scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  }
  .chatChanMenu.open{ display:block; }
  .chatChanOpt{
    display:block; width:100%; text-align:left; background:transparent; border:none;
    color:var(--text-dim); font-family:var(--mono); font-size:10px; letter-spacing:.5px;
    padding:5px 7px; border-radius:3px; cursor:pointer;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .chatChanOpt:hover{ background:#1c2b4066; color:var(--text); }
  .chatChanOpt.active{ background:#1c2b4099; }
  .chatChanOpt.ch-sector{ color:var(--sector); }
  .chatChanOpt.ch-party{ color:var(--party); }
  .chatChanOpt.ch-pm{ color:var(--pm); }
  .logWindow.inputHidden .chatRow{ display:none; }
  .chatRow input{
    flex:1; min-width:0; box-sizing:border-box; background:#0009; border:1px solid var(--line); border-radius:3px;
    color:var(--text); font-family:var(--mono); font-size:11px; padding:5px 8px; outline:none;
  }
  .chatRow input:focus{ border-color:var(--cyan); }
  .chatSendBtn{
    background:transparent; border:1px solid var(--cyan); color:var(--cyan);
    font-family:var(--mono); font-size:9px; letter-spacing:1px; padding:0 10px; cursor:pointer; border-radius:3px;
  }
  .chatSendBtn:hover{ background:var(--cyan); color:#05060a; }

  /* ---- barra de acción (sustituye a la antigua caja de ayuda #hint) ---- */
  /* ---- ventanas de barra de acción (barra 1 y 2) ---- */
  #actionBar, #actionBar2{
    position:fixed; z-index:5; pointer-events:auto;
    background:#0b111de6; border:1px solid var(--line); border-radius:7px;
    padding:6px 8px 7px; box-shadow:0 4px 18px #0007;
  }
  /* modo transparente (por defecto): solo iconos — sin marco, fondo, barra ni botones */
  #actionBar.abTransparent, #actionBar2.abTransparent{
    background:transparent; border:none; box-shadow:none; padding:0;
  }
  .abTransparent .hudPanelBar{ display:none; }
  .abSlots{ display:grid; gap:6px; justify-content:center; }
  /* controles extra en la barra de título (transparencia, huecos, filas) */
  .hudPanelBtn{
    pointer-events:auto; background:transparent; border:1px solid var(--line);
    border-radius:3px; color:var(--text-dim); font-size:9px; line-height:1;
    min-width:16px; height:15px; cursor:pointer; padding:0 2px; opacity:.7; transition:.15s;
  }
  .hudPanelBtn:hover{ opacity:1; border-color:var(--safe); color:var(--safe); }
  .abStepper{ display:inline-flex; align-items:center; gap:1px; color:var(--text-dim); font-size:9px; }
  .abStepVal{ min-width:11px; text-align:center; font-family:var(--mono); color:var(--text); }
  /* #abRevealBtn ahora es un botón CUADRADO del menú de opciones (.optSlot);
     solo conserva el resaltado cuando el chrome de las barras está visible. */
  #abRevealBtn.revealed{ color:var(--cyan); border-color:var(--cyan); background:#3ed6ff14; }

  /* ---------- MENÚ DE OPCIONES (Ajustes + Barras) ---------- */
  #optionsMenu{
    position:fixed; z-index:5; pointer-events:auto;
    background:#0b111de6; border:1px solid var(--line); border-radius:7px;
    padding:6px 8px 7px; box-shadow:0 4px 18px #0007;
  }
  /* Fila de botones del menú: [Ajustes] [Barras] [ojo de revelado]. Todo en
     FLUJO (flex): nada se posiciona en absolute, así que NADA puede montarse
     encima de nada, esté la ventana donde esté y en el modo que esté. */
  .optSlots{ display:flex; align-items:center; gap:6px; justify-content:center; }
  /* Los dos botones deben medir EXACTAMENTE lo mismo y compartir eje. Se
     refuerza con los selectores de ID porque el desalineado ("uno más arriba
     que el otro") lo causaba una regla de ID legada del minimapa que GANABA a
     la clase .optSlot e imponía su propio margin/width al de Ajustes. Con la
     medida fijada también por ID, ninguna regla suelta puede volver a torcerlos. */
  .optSlot,
  #settingsBtn.optSlot,
  #abRevealBtn.optSlot{
    position:static; box-sizing:border-box; flex:0 0 auto; align-self:center;
    width:46px; height:46px; border-radius:5px; margin:0; padding:0; line-height:0;
    background:#0b111dcc; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--text-dim); transition:.15s;
  }
  .optSlot:hover{ border-color:var(--safe); color:var(--safe); background:#12203044; }
  .optSlot svg{ display:block; }
  /* modo transparente: sin fondo/marco ni chrome (candado/ocultar/🌫), pero SÍ
     los botones y el ojo de revelado (única forma de salir del modo). */
  #optionsMenu.optTransparent{
    background:transparent; border:none; box-shadow:none; padding:0;
  }
  #optionsMenu.optTransparent .hudPanelBar{ display:none; }
  /* El ojo es un botón MÁS de la fila (hijo de .optSlots), no un elemento
     flotante: en transparente aparece a la derecha de Barras, nunca encima. */
  .optReveal{
    display:none; position:static; box-sizing:border-box; flex:0 0 auto; align-self:center;
    width:22px; height:22px; align-items:center; justify-content:center;
    margin:0; padding:0; cursor:pointer;
    background:#0b111de6; border:1px solid var(--line); border-radius:50%;
    color:var(--text-dim); transition:.15s; pointer-events:auto;
  }
  .optReveal:hover{ color:var(--cyan); border-color:var(--cyan); }
  #optionsMenu.optTransparent .optReveal{ display:flex; }
  .actionSlot{
    position:relative; width:46px; height:46px; border-radius:5px;
    background:#0b111dcc; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:border-color .12s, background .12s, transform .08s;
  }
  .actionSlot:hover{ background:#122033cc; transform:translateY(-2px); }
  .actionSlot:not(.filled){ border-style:dashed; opacity:0.7; }
  .actionSlot .abIcon{ width:26px; height:26px; }
  .abAmmoTag{ position:absolute; top:-4px; left:-4px; width:15px; height:15px;
    background:#05060acc; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .abAmmoTag .abIcon{ width:13px; height:13px; }
  .abKey{
    position:absolute; bottom:1px; right:3px; font-family:var(--mono);
    font-size:10px; color:var(--text-dim); text-shadow:0 0 3px #000;
  }
  /* casilla de acción deshabilitada (p.ej. mina sin sembrador equipado) */
  .actionSlot.abDisabled{ opacity:0.4; filter:grayscale(0.7); }
  .actionSlot.abDisabled .abIcon{ opacity:0.8; }
  /* etiqueta de TIPO (B-1) arriba-izquierda de la casilla, como el alijo */
  .abTypeTag{
    position:absolute; top:1px; left:3px; font-family:var(--mono); font-size:8px;
    line-height:1; color:#ffb040; text-shadow:0 0 3px #000; pointer-events:none;
  }
  /* ventana flotante (asignar acción / elegir munición) */
  .abPopup{
    position:fixed; z-index:40; background:#0b111df2; border:1px solid var(--cyan);
    border-radius:6px; padding:8px; box-shadow:0 6px 24px #000a, 0 0 12px #3ed6ff33;
    min-width:150px; pointer-events:auto;
  }
  .abPopupTitle{ font-size:10px; letter-spacing:2px; color:var(--text-dim); margin-bottom:6px; text-transform:uppercase; }
  .abOption{
    display:flex; align-items:center; gap:8px; width:100%; text-align:left;
    font:inherit; font-size:12px; color:var(--text); cursor:pointer;
    background:#0006; border:1px solid var(--line); border-radius:4px;
    padding:6px 8px; margin-bottom:5px; transition:background .12s, border-color .12s;
  }
  .abOption .abIcon{ width:22px; height:22px; flex:0 0 22px; }
  .abOption:hover{ background:#12203399; }
  .abOption.active{ border-color:var(--cyan); background:#3ed6ff14; }
  .abOption.abClear{ justify-content:center; color:var(--text-dim); font-size:11px; margin-bottom:0; }
  .abAmmoRow{ display:flex; gap:8px; }
  .abAmmoOpt{
    display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
    font:inherit; font-size:10px; color:var(--text); background:#0006;
    border:1.5px solid transparent; border-radius:5px; padding:8px 10px; transition:background .12s;
  }
  .abAmmoOpt .abIcon{ width:28px; height:28px; }
  .abAmmoOpt:hover{ background:#12203399; }
  .abAmmoOpt.active{ background:#0009; }

  #dockBtn{
    top:64px; left:50%; transform:translateX(-50%);
    display:none; pointer-events:auto; cursor:pointer;
    background:#0b111dcc; border:1px solid var(--safe); color:var(--safe);
    font-family:var(--mono); font-size:12px; letter-spacing:3px;
    padding:9px 22px; border-radius:4px; box-shadow:0 0 16px #4ee6a033;
    animation:dockPulse 1.8s ease-in-out infinite;
  }
  @keyframes dockPulse{ 0%,100%{ box-shadow:0 0 10px #4ee6a022; } 50%{ box-shadow:0 0 20px #4ee6a055; } }

  #stationOverlay{
    position:fixed; inset:0; background:rgba(5,6,10,0.96); backdrop-filter:blur(3px);
    z-index:25; display:none; align-items:flex-start; justify-content:center;
    font-family:var(--mono); color:var(--text); overflow-y:auto; padding:60px 20px 40px;
  }
  #stationOverlay.open{ display:flex; }
  #stationHeader{ position:absolute; top:26px; left:50%; transform:translateX(-50%); text-align:center; }
  #stationHeader h2{ margin:0; font-size:17px; letter-spacing:5px; color:var(--safe); text-shadow:0 0 14px #4ee6a055; }
  #stationHeader p{ margin:6px 0 0; font-size:11px; color:var(--text-dim); letter-spacing:1px; }
  #closeStation{
    position:absolute; top:24px; right:28px; background:transparent; border:1px solid var(--line); color:var(--text-dim);
    font-family:var(--mono); font-size:14px; width:32px; height:32px; cursor:pointer; transition:.15s;
  }
  #closeStation:hover{ border-color:var(--red); color:var(--red); }

  #stationBody{ display:flex; gap:16px; max-width:1000px; width:100%; align-items:flex-start; }
  /* Menú lateral de la estación */
  #stationNav{ display:flex; flex-direction:column; gap:6px; flex:0 0 190px; }
  .navBtn{
    text-align:left; background:var(--panel); border:1px solid var(--line); color:var(--text-dim);
    font-family:var(--mono); font-size:12px; letter-spacing:1.5px; padding:11px 14px; cursor:pointer; transition:.15s;
    border-radius:4px;
  }
  .navBtn:hover:not(.locked){ border-color:var(--safe); color:var(--text); }
  .navBtn.active{ border-color:var(--safe); color:var(--safe); background:#0f1a14; }
  .navBtn.locked{ opacity:.45; cursor:not-allowed; }
  #stationContent{
    flex:1 1 auto; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:4px;
    padding:14px 16px; min-height:320px;
  }
  #stationContent h3{ margin:0 0 12px; font-size:12px; letter-spacing:3px; color:var(--text-dim); font-weight:normal; }
  .resLine{ display:flex; justify-content:space-between; font-size:13px; margin:8px 0; }
  .stationRow{ border-top:1px solid var(--line); padding:10px 0; }
  .stationRow:first-child{ border-top:none; padding-top:0; }
  .rowTop{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
  .rowTop b{ color:var(--text); }
  .dim{ color:var(--text-dim); font-size:10px; }
  .costLine{ font-size:11px; color:var(--gold); margin:4px 0 6px; }
  .costLine.insufficient{ color:var(--red); }
  /* --- panel de Energía --- */
  .energyBalance{ border:1px solid var(--line); border-radius:6px; padding:10px 12px; margin-bottom:10px; background:#0a0e14; }
  .energyBalance.deficit{ border-color:var(--red); background:#160a0a; }
  .ebRow{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; padding:2px 0; }
  .ebRow b{ color:var(--text); font-size:13px; }
  .ebGood{ color:var(--safe); }
  .ebBad{ color:var(--red); }
  .energyWarn{ font-size:11px; color:var(--red); margin-bottom:10px; }
  .energyOk{ font-size:11px; color:var(--safe); margin-bottom:10px; }
  .energyRow .pctRow{ display:flex; align-items:center; gap:10px; margin-top:4px; }
  .pctSlider{ flex:1; accent-color:var(--gold); height:4px; cursor:pointer; }
  .pctSlider:disabled{ accent-color:var(--line); opacity:.5; cursor:not-allowed; }
  .pctVal{ font-size:12px; color:var(--gold); min-width:38px; text-align:right; font-variant-numeric:tabular-nums; }
  /* Reactor de Fusión: indicador ON/OFF (texto) + línea de máximo sostenible */
  .energyRow .rowTop{ display:flex; justify-content:space-between; align-items:center; }
  .reactorState{ font-size:10px; letter-spacing:.5px; text-transform:uppercase; }
  .reactorState.on{ color:var(--safe); }
  .reactorState.off{ color:var(--red); }
  .reactorMaxLine{ font-size:10px; color:var(--text-dim); margin-top:3px; }
  .energyRow.reactorOff{ opacity:.7; }
  .progressBar{ height:6px; background:#0009; border:1px solid var(--line); margin:4px 0; overflow:hidden; }
  .progressFill{ height:100%; background:var(--safe); transition:width .2s linear; }
  .progressFill.gold{ background:var(--gold); }
  .craftQueue{ border:1px solid var(--gold); border-radius:4px; padding:10px 12px; margin-bottom:12px; background:#151006; }
  .buildBtn,.buyBtn{
    width:100%; background:transparent; border:1px solid var(--safe); color:var(--safe);
    font-family:var(--mono); font-size:11px; letter-spacing:2px; padding:6px 0; cursor:pointer; transition:.15s;
  }
  .buildBtn:hover:not(:disabled),.buyBtn:hover:not(:disabled){ background:var(--safe); color:#05060a; }
  .buildBtn:disabled,.buyBtn:disabled{ border-color:var(--line); color:var(--text-dim); cursor:not-allowed; }
  /* Hangar: huecos de la nave y alijo */
  .slotGroup{ margin-bottom:14px; }
  .slotGroupTitle{ font-size:10px; letter-spacing:2px; color:var(--text-dim); margin-bottom:5px; }
  /* CLASE del hueco de MOTOR, dicha con el BORDE (y el texto de su etiqueta):
     azul claro = ligero; naranja = hasta mediano (admite ligeros); rojo = hasta
     pesado (admite ligeros y medianos). Mismo lenguaje en el Hangar y en el
     selector del Duelo Justo. */
  .engSlot-light{ border-color:#6fc8e8 !important; }
  .engSlot-medium{ border-color:var(--gold) !important; }
  .engSlot-heavy{ border-color:var(--red) !important; }
  .engClassTxt.eng-light{ color:#6fc8e8; }
  .engClassTxt.eng-medium{ color:var(--gold); }
  .engClassTxt.eng-heavy{ color:var(--red); }
  .slotBox{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    border:1px dashed var(--line); border-radius:4px; padding:8px 10px; margin:4px 0; font-size:12px;
  }
  .slotBox.filled{ border-style:solid; border-color:var(--safe); }
  .slotBox .itemFx{ color:var(--text-dim); font-size:10px; }
  .slotEmpty{ color:var(--text-dim); font-size:11px; letter-spacing:1px; }
  .miniBtn{
    background:transparent; border:1px solid var(--line); color:var(--text-dim); font-family:var(--mono);
    font-size:10px; letter-spacing:1px; padding:4px 9px; cursor:pointer; transition:.15s; border-radius:3px; flex:0 0 auto;
  }
  .miniBtn:hover:not(:disabled){ border-color:var(--safe); color:var(--safe); }
  .miniBtn:disabled{ opacity:.4; cursor:not-allowed; }
  /* Hangar: nave a la izquierda, alijo en cuadrícula a la derecha */
  .hangarWrap{ display:flex; gap:14px; align-items:flex-start; }
  /* ---- selector de nave (tarjetas) ---- */
  .shipSelector{ margin-bottom:16px; }
  .shipCards{ display:flex; flex-wrap:wrap; gap:10px; }
  .shipCard{
    flex:1 1 200px; min-width:180px; border:1px solid var(--line); border-radius:4px;
    background:#0006; padding:10px 12px; transition:border-color .12s, background .12s;
  }
  .shipCard.active{ border-color:var(--cyan); background:#3ed6ff14; }
  .shipCardName{ font-size:13px; font-weight:600; margin-bottom:4px; }
  .shipCardTag{
    font-size:9px; letter-spacing:2px; color:var(--cyan); border:1px solid var(--cyan);
    border-radius:3px; padding:1px 5px; margin-left:6px; text-transform:uppercase;
  }
  .shipCardSlots{ font-size:11px; margin-bottom:8px; }
  .shipSelectBtn{
    font:inherit; font-size:11px; letter-spacing:1px; cursor:pointer;
    border:1px solid var(--cyan); color:var(--cyan); background:#3ed6ff11;
    border-radius:3px; padding:5px 12px; transition:background .12s;
  }
  .shipSelectBtn:hover{ background:#3ed6ff33; }
  /* nuevo selector: casilla con modelo 3D + botón cambiar, y catálogo desplegable */
  .shipViewer{ display:flex; gap:14px; align-items:center; margin-bottom:10px; }
  .shipViewerBox{
    width:112px; height:112px; flex:0 0 112px; border:1px solid var(--line); border-radius:6px;
    background:radial-gradient(ellipse at 50% 40%, #0e1826, #05060a);
    display:flex; align-items:center; justify-content:center;
  }
  .shipViewerInfo{ min-width:0; }
  .shipViewerName{ font-size:15px; font-weight:600; margin:2px 0; }
  .shipViewerSlots{ font-size:11px; margin-bottom:8px; }
  .shipChangeBtn{
    font:inherit; font-size:11px; letter-spacing:1px; cursor:pointer;
    border:1px solid var(--gold); color:var(--gold); background:#f5c04211;
    border-radius:3px; padding:6px 14px; transition:background .12s;
  }
  .shipChangeBtn:hover{ background:#f5c04226; }
  .shipCatalog{ display:none; margin-bottom:16px; border-top:1px solid var(--line); padding-top:10px; }
  .shipCatalog.open{ display:block; }
  .shipCatGrid{ display:flex; flex-wrap:wrap; gap:10px; }
  .shipCatCard{
    width:150px; border:1px solid var(--line); border-radius:5px; background:#0006;
    padding:8px; text-align:center; transition:border-color .12s, background .12s;
  }
  .shipCatCard.active{ border-color:var(--cyan); background:#3ed6ff14; }
  .shipCatBox{
    width:88px; height:88px; margin:0 auto 6px; border-radius:5px;
    background:radial-gradient(ellipse at 50% 40%, #0e1826, #05060a);
    display:flex; align-items:center; justify-content:center;
  }
  .shipCatName{ font-size:12px; font-weight:600; margin-bottom:2px; }
  .shipCatSlots{ font-size:10px; margin-bottom:8px; }
  .shipPane{ flex:1 1 55%; min-width:0; }
  .stashPane{
    flex:1 1 45%; min-width:200px; border:1px solid var(--line); border-radius:4px;
    background:#0006; padding:10px; min-height:180px;
  }
  .stashPane.dropHover{ border-color:var(--gold); background:#151006; }
  .invGrid{ display:grid; grid-template-columns:repeat(auto-fill, 52px); gap:8px; }
  .invCell{
    position:relative;
    width:52px; height:52px; border:1px solid var(--line); border-radius:4px; background:#0009;
    display:flex; align-items:center; justify-content:center; font-size:22px; cursor:grab; user-select:none;
    transition:border-color .12s;
  }
  .invShort{
    position:absolute; top:1px; left:2px; font-family:var(--mono); font-size:8px;
    line-height:1; letter-spacing:.3px; color:var(--cyan); text-shadow:0 0 3px #000;
    pointer-events:none;
  }
  .invCell:hover{ border-color:var(--safe); }
  .invCell:active{ cursor:grabbing; }
  .slotBox.dropHover{ border-color:var(--gold); background:#151006; }
  .slotItem{ cursor:grab; user-select:none; }
  .slotItem:active{ cursor:grabbing; }
  #invTooltip{
    display:none; position:fixed; z-index:40; min-width:190px; max-width:240px; pointer-events:none;
    background:#0c0f16; border:1px solid var(--safe); border-radius:4px; padding:9px 11px;
    font-family:var(--mono); font-size:11px; color:var(--text); box-shadow:0 4px 18px #000c;
  }
  /* --- MERCADO (venta por Quantums): rejillas ESTILO ALIJO DEL HANGAR (invGrid/invCell,
     celdas cuadradas) — los huecos VACÍOS se ven, para saber dónde soltar el arrastre. --- */
  .saleZone{ border:1px dashed var(--cyan); border-radius:6px; padding:8px; background:#081018; min-height:70px; }
  .mktFree{ border-style:dashed; background:#0a0f18; cursor:default; }   /* hueco de depósito visible */
  .mktStaged{ border-color:var(--cyan); }
  .mktQtyBadge{
    position:absolute; bottom:1px; right:2px; font-family:var(--mono); font-size:9px;
    line-height:1; color:var(--cyan); text-shadow:0 0 3px #000; pointer-events:none;
  }
  .mktEmptyHint{ margin:6px 0 0; font-size:10px; }
  .mktOffer{ margin:12px 0 8px; font-size:13px; color:var(--text-dim); letter-spacing:1px; }
  .mktOffer b{ color:var(--cyan); font-size:15px; }
  .mktConfirm{ width:100%; }
  /* Ventanita de cantidad (apilables): mismo lenguaje visual que el tooltip, pero
     INTERACTIVA. El input va SOLO en su fila (ancho completo, texto grande a la derecha);
     los botones son COMPACTOS (.mktBtn propio — .buildBtn es width:100% y aquí aplastaba
     el input hasta hacerlo ilegible). */
  #mktQtyWin{
    display:none; position:fixed; left:50%; top:38%; transform:translate(-50%,-50%); z-index:41;
    min-width:280px; background:#0c0f16; border:1px solid var(--cyan); border-radius:6px;
    padding:12px 14px; font-family:var(--mono); font-size:11px; color:var(--text); box-shadow:0 6px 24px #000d;
  }
  #mktQtyWin .ttTitle{ color:var(--cyan); letter-spacing:1px; margin-bottom:6px; font-size:12px; }
  .mktQtyRow{ display:flex; gap:8px; margin-top:9px; align-items:stretch; }
  #mktQtyInput{
    display:block; width:100%; box-sizing:border-box; margin-top:9px;
    background:#080b11; border:1px solid var(--line); border-radius:4px; color-scheme:dark;
    color:var(--text); font-family:var(--mono); font-size:15px; padding:7px 10px; text-align:right;
    -moz-appearance:textfield; appearance:textfield;   /* sin flechitas del type=number */
  }
  #mktQtyInput::-webkit-outer-spin-button, #mktQtyInput::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  #mktQtyInput:focus{ outline:none; border-color:var(--cyan); }
  /* pasarse de lo almacenado (o valor no válido) marca EN ROJO y bloquea Añadir */
  #mktQtyInput.bad{ border-color:var(--red); color:var(--red); }
  .mktBtn{
    flex:1; background:transparent; border:1px solid var(--safe); color:var(--safe); border-radius:3px;
    font-family:var(--mono); font-size:11px; letter-spacing:1px; padding:6px 10px; cursor:pointer; transition:.15s;
  }
  .mktBtn:hover:not(:disabled){ background:var(--safe); color:#05060a; }
  .mktBtn:disabled{ border-color:var(--line); color:var(--text-dim); cursor:not-allowed; }
  .mktQtySub{ margin-top:8px; font-size:11px; color:var(--cyan); min-height:14px; text-align:right; }
  .mktCancel{ opacity:.75; }
  #invTooltip .ttTitle{ color:var(--safe); letter-spacing:1px; margin-bottom:6px; font-size:12px; }
  #invTooltip .ttRow{ display:flex; justify-content:space-between; gap:12px; margin:3px 0; color:var(--text-dim); }
  #invTooltip .ttRow span:last-child{ color:var(--text); text-align:right; }
  #invTooltip .ttDesc{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line); color:var(--text-dim); line-height:1.5; }
  .craftName{ cursor:help; border-bottom:1px dotted var(--text-dim); }
  /* Fábrica: selector de cantidad */
  .qtyLine{ display:flex; gap:6px; align-items:stretch; margin:4px 0 8px; }
  .qtyBtn{ width:30px; font-size:13px; }
  .qtyMaxBtn{ padding:4px 12px; }
  .qtyInput{
    flex:1 1 60px; min-width:0; background:#0009; border:1px solid var(--line); border-radius:3px;
    color:var(--text); font-family:var(--mono); font-size:12px; text-align:center; outline:none;
  }
  .qtyInput:focus{ border-color:var(--safe); }
  .qtyInput.qtyInvalid{ border-color:var(--red); color:var(--red); }
  /* cabecera contextual de monederos (Recursos / Armamento) */
  .stationHdrBar{
    display:flex; gap:22px; flex-wrap:wrap; align-items:center;
    border-bottom:1px solid var(--line); padding-bottom:9px; margin-bottom:12px; font-size:12px;
  }
  .stationHdrBar .hdrGroup{ display:flex; gap:7px; align-items:center; }
  .stationHdrBar .hdrLabel{ font-size:10px; letter-spacing:2px; color:var(--text-dim); margin-right:2px; }
  .lockedMsg{ color:var(--text-dim); font-size:12px; line-height:1.7; padding:20px 4px; }
  .statsSummary{ font-size:11px; color:var(--text-dim); border-top:1px solid var(--line); margin-top:12px; padding-top:10px; line-height:1.9; }
  .statsSummary b{ color:var(--text); }

  #banner{
    top:40%; left:50%; transform:translate(-50%,-50%);
    font-size:22px; letter-spacing:4px; color:var(--red);
    text-align:center; display:none; text-shadow:0 0 12px #ff465580;
  }
  #banner .sub{ display:block; font-size:11px; letter-spacing:2px; color:var(--text-dim); margin-top:6px; }

  #startScreen{
    position:fixed; inset:0; background:radial-gradient(ellipse at center, #0b1524 0%, #05060a 70%);
    display:none; flex-direction:column; align-items:center; justify-content:center;
    color:var(--text); font-family:var(--mono); z-index:10; text-align:center;
  }
  #startScreen.visible{ display:flex; }
  #startScreen h1{ font-size:26px; letter-spacing:6px; color:var(--cyan); margin:0 0 6px; text-shadow:0 0 18px #3ed6ff55;}
  #startScreen p{ color:var(--text-dim); font-size:12px; letter-spacing:1px; max-width:460px; line-height:1.7; margin:4px 0 22px;}
  #startScreen p b{ color:var(--remote); }
  #startBtn{
    background:transparent; border:1px solid var(--cyan); color:var(--cyan);
    font-family:var(--mono); padding:12px 30px; font-size:13px; letter-spacing:3px;
    cursor:pointer; transition:.15s;
  }
  #startBtn:hover{ background:var(--cyan); color:#05060a; }

  #authScreen{
    position:fixed; inset:0; background:radial-gradient(ellipse at center, #0b1524 0%, #05060a 70%);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:var(--text); font-family:var(--mono); z-index:11; text-align:center; padding:20px;
  }
  #authScreen h1{ font-size:22px; letter-spacing:5px; color:var(--cyan); margin:0 0 4px; text-shadow:0 0 18px #3ed6ff55; }
  #authScreen .sub{ color:var(--text-dim); font-size:11px; letter-spacing:1px; margin:0 0 26px; }
  #authForm{ width:280px; display:flex; flex-direction:column; gap:10px; }
  #authForm input{
    background:#0b111dcc; border:1px solid var(--line); color:var(--text);
    font-family:var(--mono); font-size:13px; padding:10px 12px; border-radius:4px; outline:none;
  }
  #authForm input:focus{ border-color:var(--cyan); }
  #authButtons{ display:flex; gap:8px; margin-top:4px; }
  #authButtons button{
    flex:1; background:transparent; border:1px solid var(--cyan); color:var(--cyan);
    font-family:var(--mono); padding:10px 0; font-size:12px; letter-spacing:2px;
    cursor:pointer; transition:.15s; border-radius:4px;
  }
  #authButtons button:hover{ background:var(--cyan); color:#05060a; }
  #authButtons button:disabled{ opacity:.5; cursor:not-allowed; }
  #guestBtn{
    margin-top:18px; background:transparent; border:none; color:var(--text-dim);
    font-family:var(--mono); font-size:11px; letter-spacing:1px; text-decoration:underline;
    cursor:pointer;
  }
  #guestBtn:hover{ color:var(--text); }
  #authError{ color:var(--red); font-size:11px; min-height:14px; letter-spacing:.5px; }

  /* ===================== MODO DESARROLLO (rol dev) ===================== */
  #devModeLayer{ position:fixed; inset:0; pointer-events:none; z-index:60; font-family:var(--mono); }
  /* badge fijo arriba centrado: recordatorio de que NO estás en el mundo online */
  #devBadge{
    position:absolute; top:10px; left:50%; transform:translateX(-50%);
    background:#3a1d5aee; border:1px solid var(--purple); color:var(--purple);
    padding:5px 14px; border-radius:4px; font-size:11px; letter-spacing:2px; font-weight:bold;
    box-shadow:0 0 18px #b57bff44; pointer-events:none;
  }
  /* La ventana hereda de .logWindow (posición/tamaño los pone JS, arrastrable
     con candado como las de log). Acento morado para distinguirla como
     herramienta de desarrollo, coherente con el badge. */
  #devPanel{ border-color:var(--purple); }
  #devPanel .logWinTitle{ color:var(--purple); }
  /* cuerpo scrollable (ocupa el espacio entre cabecera y footer) */
  #devPanel .devBody{
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
    scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  }
  #devPanel .devBody::-webkit-scrollbar{ width:8px; }
  #devPanel .devBody::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
  #devPanel .rowSub{ display:block; font-size:10px; color:var(--text-dim); line-height:1.4; margin:0 0 10px; }
  /* fila de carga: input de archivo flexible + botón CARGAR a la derecha */
  .devLoadRow{ display:flex; gap:8px; align-items:center; }
  #devFileInput{
    flex:1 1 auto; min-width:0; font-size:10px; color:var(--text-dim);
    background:#0009; border:1px solid var(--line); border-radius:3px; padding:5px 6px;
  }
  #devFileInput::file-selector-button{
    font-family:var(--mono); font-size:10px; color:var(--text-dim); cursor:pointer;
    background:transparent; border:1px solid var(--line); border-radius:3px; padding:3px 8px; margin-right:8px;
  }
  #devFileInput::file-selector-button:hover{ border-color:var(--safe); color:var(--safe); }
  #devLoadBtn{ flex:0 0 auto; }
  /* control de tamaño del modelo (en vivo) */
  .devSizeRow{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:10px; color:var(--text-dim); }
  .devToggleRow{ margin-top:10px; font-size:10px; color:var(--text-dim); }
  .devOrientRow{ display:flex; gap:10px; align-items:center; margin-top:6px; font-size:11px; }
  .devOrientRow select{ background:#0d1622; color:var(--text); border:1px solid var(--line); border-radius:3px; padding:1px 4px; }
  .devOrientCmd{ font-size:10px; margin-top:4px; word-break:break-all; user-select:text; }
  .devToggleRow label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
  .devToggleRow input[type=checkbox]{ accent-color:var(--purple); cursor:pointer; }
  .devSizeRow label{ letter-spacing:1px; white-space:nowrap; }
  .devSizeRow input[type=range]{ flex:1 1 auto; min-width:0; accent-color:var(--purple); cursor:pointer; }
  #devSizeVal{ flex:0 0 auto; width:44px; text-align:right; color:var(--text); }
  #devModelStats{ margin-top:10px; font-size:10px; line-height:1.5; color:var(--text-dim); }
  #devModelStats b{ color:var(--cyan); }
  /* footer fijo abajo con el botón SALIR (ancho completo, estilo buildBtn) */
  #devPanel .devFooter{ margin-top:10px; flex:0 0 auto; }
  #devPanel .devFooter .buildBtn{ border-color:var(--purple); color:var(--purple); }
  #devPanel .devFooter .buildBtn:hover{ background:var(--purple); color:#05060a; }

  /* ---------- Colas (edificios / investigación / crafteo) ---------- */
  .queueStrip{ border:1px solid var(--cyan); border-radius:6px; padding:8px 10px; margin-bottom:12px; background:#08131b; }
  .queueHdr{ font-size:10px; letter-spacing:2px; color:var(--cyan); margin-bottom:6px; }
  .queueItem{ display:flex; align-items:center; gap:8px; padding:4px 0; border-top:1px solid #123; font-size:12px; }
  .queueItem:first-of-type{ border-top:none; }
  .queueItem .qName{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .queueItem .qMeta{ flex:0 0 auto; font-size:10px; }
  /* fila EN CURSO de la tira: barra de progreso en vivo, visible en cualquier pestaña */
  .queueItem.queueActive{ background:#0b1a24; }
  .queueItem.queueActive .qName{ color:var(--cyan); }
  .queueItem.queueActive .qProg{ flex:1 1 40%; min-width:90px; display:flex; align-items:center; gap:6px; }
  .queueItem.queueActive .progressBar{ flex:1; margin:0; }
  .qCancel{
    flex:0 0 auto; width:20px; height:20px; line-height:1; padding:0; cursor:pointer;
    background:transparent; border:1px solid var(--line); color:var(--text-dim); border-radius:3px; font-family:var(--mono);
  }
  .qCancel:hover{ border-color:var(--red); color:var(--red); }
  .buildBtn.queueBtn{ border-color:var(--cyan); color:var(--cyan); }
  .buildBtn.queueBtn:hover:not(:disabled){ background:var(--cyan); color:#05060a; }

  /* icono ⓘ de "progreso por niveles" */
  .infoIcon{
    background:transparent; border:none; color:var(--text-dim); cursor:pointer; font-size:13px;
    padding:0 2px; line-height:1; vertical-align:middle;
  }
  .infoIcon:hover{ color:var(--cyan); }
  .upgLine{ font-size:10px; color:var(--text-dim); margin:2px 0 4px; letter-spacing:.3px; }

  /* ---------- Energía: preview + aplicar ---------- */
  .energyBalance.preview{ border-color:var(--cyan); background:#08131b; }
  .ebPreviewTag{ font-size:9px; letter-spacing:2px; color:var(--cyan); margin-bottom:6px; text-transform:uppercase; }
  .energyApplyBar{ display:flex; gap:8px; margin-top:12px; }
  .applyBtn{
    flex:1; background:transparent; border:1px solid var(--gold); color:var(--gold);
    font-family:var(--mono); font-size:11px; letter-spacing:2px; padding:8px 0; cursor:pointer; transition:.15s;
  }
  .applyBtn:hover:not(:disabled){ background:var(--gold); color:#05060a; }
  .applyBtn:disabled{ border-color:var(--line); color:var(--text-dim); cursor:not-allowed; }
  .resetBtn{
    flex:0 0 auto; background:transparent; border:1px solid var(--line); color:var(--text-dim);
    font-family:var(--mono); font-size:11px; letter-spacing:1px; padding:8px 14px; cursor:pointer;
  }
  .resetBtn:hover{ border-color:var(--red); color:var(--red); }

  /* alerta de déficit en el botón de Energía del menú */
  .navBtn.deficitAlert{ border-color:var(--red); color:var(--red); animation:deficitPulse 1.3s ease-in-out infinite; }
  @keyframes deficitPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,70,85,0); } 50%{ box-shadow:0 0 0 3px rgba(255,70,85,0.25); } }

  /* ---------- Ventana de progreso por niveles ---------- */
  #projOverlay{
    position:fixed; inset:0; background:rgba(5,6,10,0.75); backdrop-filter:blur(2px);
    z-index:30; display:none; align-items:center; justify-content:center; padding:40px 16px;
    font-family:var(--mono); color:var(--text);
  }
  #projOverlay.open{ display:flex; }
  #projModal{
    background:var(--bg); border:1px solid var(--cyan); border-radius:8px; width:min(560px,96vw);
    max-height:86vh; display:flex; flex-direction:column; box-shadow:0 0 40px rgba(62,214,255,0.15);
  }
  #projHeader{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); }
  #projTitle{ font-size:13px; letter-spacing:1px; color:var(--cyan); }
  #projClose{ background:transparent; border:1px solid var(--line); color:var(--text-dim); width:26px; height:26px; border-radius:4px; cursor:pointer; font-family:var(--mono); }
  #projClose:hover{ border-color:var(--red); color:var(--red); }
  #projBody{ overflow-y:auto; padding:6px 10px; }
  .projLoading{ padding:24px; text-align:center; }
  .projTable{ width:100%; border-collapse:collapse; font-size:11px; }
  .projTable th{ text-align:left; color:var(--text-dim); font-weight:normal; letter-spacing:1px; padding:6px 8px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); }
  .projTable td{ padding:6px 8px; border-bottom:1px solid #101a28; font-variant-numeric:tabular-nums; }
  .projTable tr.projDoneRow{ opacity:.45; }
  .projTable tr.projNextRow td{ background:#0c1620; color:var(--cyan); }
  #projFooter{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-top:1px solid var(--line); gap:10px; }
  .projNav{ background:transparent; border:1px solid var(--line); color:var(--text); font-family:var(--mono); font-size:11px; letter-spacing:1px; padding:6px 12px; cursor:pointer; border-radius:4px; }
  .projNav:hover:not(:disabled){ border-color:var(--cyan); color:var(--cyan); }
  .projNav:disabled{ opacity:.4; cursor:not-allowed; }

  /* ---------- INVENTARIO DE LA NAVE (la bodega) ---------- */
  /* Ventana lateral derecha, misma familia que amigos: se consulta, no se habita. */
  /* Barras de scroll CON LA ESTÉTICA DEL JUEGO: `scrollbar-width:thin` a secas deja el
     color al sistema (blanco y gris) — hacen falta `scrollbar-color` (Firefox) Y las
     reglas ::-webkit-scrollbar (Chrome), como ya hacen las pestañas de conversación.
     PATRÓN: toda superficie con scroll lleva LAS DOS cosas. */
  /* pointer-events:auto ES OBLIGATORIO: estas ventanas viven dentro de #hud, que lleva
     pointer-events:none — sin esto (y sin su makeClickIsland en ui-windows.js) los clicks
     las ATRAVIESAN y caen en el juego: "no puedo arrastrar, ni recoger todo, ni cerrar".
     El pitfall está documentado en CONTEXTO §6 desde la ventana de amigos… y aun así
     estas dos nacieron sin él. */
  #inventoryWin{ position:fixed; right:12px; top:70px; width:236px; max-height:78vh; overflow-y:auto; z-index:30;
    pointer-events:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
  #inventoryWin::-webkit-scrollbar, #lootWin::-webkit-scrollbar{ width:5px; }
  #inventoryWin::-webkit-scrollbar-track, #lootWin::-webkit-scrollbar-track{ background:#0006; border-radius:3px; }
  #inventoryWin::-webkit-scrollbar-thumb, #lootWin::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
  #inventoryWin::-webkit-scrollbar-thumb:hover, #lootWin::-webkit-scrollbar-thumb:hover{ background:var(--cyan); }
  .invHead{ font-size:11px; letter-spacing:2px; color:var(--cyan); border-bottom:1px solid var(--line); padding-bottom:5px; margin-bottom:7px; }
  .invSection{ margin-bottom:10px; }
  .invTitle{ font-size:10px; letter-spacing:1px; color:var(--text-dim); margin-bottom:4px; }
  .invTitle.safe{ color:var(--safe); }
  .invHint{ display:block; font-size:8px; opacity:.7; letter-spacing:0; }
  .invEmpty{ color:var(--text-dim); font-size:10px; padding:8px 0; }
  /* Rejilla de objetos: celdas fijas; los objetos se pintan encima ocupando `size` columnas.
     Un objeto seleccionado resalta, y las celdas libres se vuelven DESTINOS pulsables. */
  /* OJO CON EL NAMESPACE: el HANGAR ya usaba .invGrid/.invCell para su alijo — la primera
     versión de este bloque los REDEFINIÓ y el alijo del hangar colapsó a una columna
     (width:max-content rompe su auto-fill) con fichas encogidas. Las clases de la ventana
     de bodega/botín llevan su propio prefijo (cargoGrid/cargoCell/cargoItem) y no tocan
     nada del hangar.
     REJILLA CONTINUA: las celdas se TOCAN (los objetos ocuparán formas w×h y una rejilla
     troceada las rompería visualmente). El truco: gap de 1px con el FONDO del contenedor
     en color de línea — las "líneas" de la rejilla son el fondo asomando, sin bordes por
     celda que se dupliquen entre vecinas. Las celdas de recursos/munición (cargoGridSlots)
     siguen separadas: son fichas, no un tablero. */
  .cargoGrid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; width:max-content; }
  .cargoGrid.cargoGridSlots{ gap:3px; background:transparent; border:none; width:auto; }
  .cargoCell{ width:34px; height:34px; background:#0a0f18; }
  .cargoItem{
    display:flex; align-items:center; justify-content:center; z-index:1;
    background:#12203a; border:1px solid var(--cyan); border-radius:2px;
    font-size:14px; overflow:hidden; cursor:grab;   /* icono, no texto; MANO: se arrastra */
  }
  .cargoItem:active{ cursor:grabbing; }
  /* LA MANO en todo lo arrastrable: la munición y los recursos con carga llevan
     draggable="true" (el atributo ES el selector: una sola verdad — si se puede
     arrastrar, enseña la mano; si no, no). */
  .invSlotCell[draggable="true"]{ cursor:grab; }
  .invSlotCell[draggable="true"]:active{ cursor:grabbing; }
  /* Huecos de munición y recursos EN REJILLA (todos a la vista, llenos o no): celda con
     categoría arriba, icono en medio y cantidad/tope abajo. Vacío = punteado y tenue;
     agotado (tipo puesto, 0 de carga) = cantidad en rojo — agotado no es desequipado. */
  .invSlotCell{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1px; height:52px; border:1px solid var(--line); border-radius:3px; background:#0006;
    font-size:9px; overflow:hidden;
  }
  .invSlotCell.empty{ opacity:.5; border-style:dashed; }
  .invSlotCell.agotado .cargoCellQty{ color:var(--red); }
  .cargoCellCat{ color:var(--text-dim); font-size:7px; letter-spacing:1px; }
  .cargoCellIcon{ font-size:14px; line-height:1; }
  .cargoCellQty{ color:var(--gold); font-size:8px; }
  .invResBar{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:#0008; }
  .invResFill{ height:100%; background:var(--safe); }

  /* ---------- ESTACIÓN: pestaña CONTENEDOR (la ventanilla) ---------- */
  .contSection{ margin-bottom:14px; }
  .contSection h3{ font-size:11px; letter-spacing:2px; color:var(--cyan); margin:0 0 6px; }
  .contCols{ display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start; }
  .contCol{ flex:0 0 auto; min-width:240px; }
  .contCol h3{ font-size:11px; letter-spacing:2px; color:var(--cyan); margin:0 0 6px; }
  /* Celdas del ALIJO (almacenes) y de la NAVE: mismas formas que el inventario. La
     SELECCIONADA se marca en dorado — es la mitad del gesto selección + destino. */
  .contStashCell, .contShipCell{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1px; height:52px; padding:0; border:1px solid var(--line); border-radius:3px; background:#0b111dcc;
    color:var(--text); font-family:var(--mono); font-size:9px; cursor:pointer; overflow:hidden;
  }
  .contStashCell:hover, .contShipCell:hover{ border-color:var(--cyan); }
  /* LA MANO también en la ventanilla: el alijo siempre se arrastra; los huecos de la nave
     llevan draggable="true" (el atributo es el selector: una sola verdad). */
  .contStashCell, .contShipCell[draggable="true"]{ cursor:grab; }
  .contStashCell:active, .contShipCell[draggable="true"]:active{ cursor:grabbing; }
  .contShipCell.empty{ opacity:.55; border-style:dashed; }
  .contCellCat{ color:var(--text-dim); font-size:7px; letter-spacing:1px; }
  .contCellIcon{ font-size:14px; line-height:1; }
  .contCellQty{ color:var(--gold); font-size:8px; }
  .contLabel{ font-size:9px; color:var(--text-dim); letter-spacing:1px; margin:4px 0 3px; }
  .contGrid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; width:max-content; }
  .contGrid.stash{ gap:3px; background:transparent; border:none; width:auto; }
  .contCell{ width:44px; height:44px; padding:0; border:none; background:#0a0f18; cursor:pointer; }
  .contCell:hover{ background:#1c2b40; }
  .contItem{
    padding:0; background:#12203a; border:1px solid var(--cyan); border-radius:2px; z-index:1;
    color:var(--text); font-family:var(--mono); font-size:15px; cursor:grab; overflow:hidden;   /* icono; MANO: se arrastra */
  }
  .contItem:active{ cursor:grabbing; }
  .contItem:hover{ border-color:var(--gold); }
  .contRow{ display:flex; align-items:center; gap:8px; padding:4px 0; font-size:10px; flex-wrap:wrap; }
  .contRow.contEmptyRow{ opacity:.45; font-style:italic; }
  .contCat{ flex:0 0 64px; color:var(--text-dim); font-size:9px; letter-spacing:1px; }
  .contType{ flex:0 0 auto; min-width:110px; }
  .contTypeSel{
    background:#0009; border:1px solid var(--line); border-radius:3px; color:var(--text);
    font-family:var(--mono); font-size:10px; padding:2px 4px; min-width:110px;
  }
  .contQty{ flex:0 0 auto; color:var(--gold); min-width:70px; }
  .contStore{ flex:0 0 auto; color:var(--text-dim); font-size:9px; }
  .contBtn{
    background:#0b111dcc; border:1px solid var(--line); border-radius:3px; color:var(--text-dim);
    font-family:var(--mono); font-size:9px; letter-spacing:1px; padding:4px 8px; cursor:pointer;
  }
  .contBtn:hover:not(:disabled){ border-color:var(--cyan); color:var(--cyan); }
  .contBtn:disabled{ opacity:.35; cursor:default; }
  .contHint{ font-size:9px; color:var(--text-dim); opacity:.8; margin-top:5px; }
  /* Desborde del banco: lo que supera el tope se ve EN ROJO (piezas y celdas fantasma que
     lo alojan), con su aviso — es un estado controlado del que se sale sacando. */
  .contPiece{ font-size:15px; }
  .contItem.over{ border-color:var(--red); color:var(--red); background:#2a0d10; }
  .contCell.ghost{ background:#1a0a0d; cursor:default; }
  .contOverNum{ color:var(--red); }
  .contOverflow{ font-size:9px; color:var(--red); margin-top:4px; max-width:240px; }
  /* LA PAPELERA: destino de arrastre que DESTRUYE. Va discreta (punteada, apagada) hasta
     que un arrastre pasa por encima: entonces se enciende en rojo — que se sepa qué va a
     pasar ANTES de soltar. */
  .invActionsRow{ display:flex; gap:6px; }
  /* SOLTAR y PAPELERA: iconos SVG de línea con stroke=currentColor — heredan el color
     del estado (apagado → cian al soltar / rojo al destruir) y son idénticos en todas
     las plataformas. Soltar va en CIAN porque soltar no es destruir, y los colores lo
     dicen antes que el tooltip. */
  .invDrop svg, .invTrash svg, .contTrash svg{ display:block; }
  .invDrop{
    width:44px; height:44px; margin-top:8px; padding:0;
    display:flex; align-items:center; justify-content:center; font-size:17px;
    border:1px dashed var(--line); border-radius:4px; background:#0006;
    color:var(--text-dim); opacity:.7; cursor:default;
  }
  .invDrop.hover{ border-color:var(--cyan); border-style:solid; color:var(--cyan); background:#0d1f2a; opacity:1; }
  .invTrash, .contTrash{
    width:44px; height:44px; margin-top:8px; padding:0;
    display:flex; align-items:center; justify-content:center; font-size:17px;
    border:1px dashed var(--line); border-radius:4px; background:#0006;
    color:var(--text-dim); opacity:.7; cursor:default;
  }
  .invTrash.hover, .contTrash:hover, .contTrash.dropHover{
    border-color:var(--red); border-style:solid; color:var(--red); background:#2a0d10; opacity:1;
  }

  /* ---------- BOTÍN (los restos abiertos): SATÉLITE de la bodega ---------- */
  /* Posición de FÁBRICA (bodega en su sitio: mitad derecha → botín a su izquierda). Al
     abrirse, placeLootWin (inventory.js) la pega al flanco LIBRE de la bodega según la
     mitad de pantalla en la que esté — y la sigue si se mueve con el candado. */
  #lootWin{ position:fixed; right:258px; top:70px; width:200px; max-height:60vh; overflow-y:auto; z-index:30; pointer-events:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
  /* Piezas del botín: fichas del MISMO tablero que la bodega (invGrid continua), con el
     icono y la cantidad superpuesta en la esquina. */
  .lootPiece{ position:relative; flex-direction:column; user-select:none; }
  .lootPiece:hover{ border-color:var(--gold); }
  .lootPieceIcon{ font-size:13px; line-height:1; overflow:hidden; max-width:100%; }
  .lootPieceQty{ position:absolute; right:1px; bottom:0; font-size:7px; color:var(--gold); }
  .lootBtns{ display:flex; gap:5px; margin-top:8px; }
  .lootBtn{
    flex:1; padding:6px 0; font-size:9px; font-family:inherit; letter-spacing:1px; cursor:pointer;
    border-radius:4px; border:1px solid var(--line); background:#0b111dcc; color:var(--text-dim);
  }
  .lootBtn:hover{ border-color:var(--cyan); color:var(--cyan); }
  #lootTakeAllBtn{ border-color:var(--gold); color:var(--gold); }
  #lootTakeAllBtn:hover{ background:#ffb34722; }
  .contLocked{ font-size:10px; color:var(--text-dim); font-style:italic; border:1px dashed var(--line); border-radius:4px; padding:10px; max-width:220px; }