/* ═══════════════════════════════════════════════════════════════════════
   ERAS DE PODER · SISTEMA DE DISEÑO DE INTERFAZ
   -----------------------------------------------------------------------
   Cristal oscuro, biseles metálicos, oro pulido y tipografía condensada de
   sistema. Todos los componentes del HUD y de los menús viven aquí.
   Sin fuentes externas, sin imágenes externas, sin iconos tipográficos.
   Índice:
     1. Variables y bases
     2. Marco de pantalla y barra superior
     3. Selección, rejilla de comandos, cola y minimapa
     4. Alertas, mensajes y tooltips
     5. Menús: portada, carga, pausa, ajustes, ayuda, resultados, créditos
     6. Demo de interfaz
     7. Animaciones y responsive
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1 · VARIABLES ──────────────────────────── */

:root {
  /* Paleta base */
  --ui-bg: #0b1016;
  --ui-bg-deep: #05080b;
  --ui-panel: #121a24;
  --ui-panel-2: #0c141c;
  --ui-panel-3: #080f15;
  --ui-gold: #d8a24a;
  --ui-gold-hi: #f4dda6;
  --ui-gold-mid: #b98a44;
  --ui-gold-lo: #6b4a1c;
  --ui-ink: #ece4d3;
  --ui-ink-dim: #a9a291;
  --ui-ink-mute: #7b7a6d;
  --ui-line: rgba(216, 162, 74, 0.32);
  --ui-line-soft: rgba(255, 255, 255, 0.06);
  --ui-glass: rgba(11, 18, 25, 0.86);
  --ui-red: #e05a48;
  --ui-green: #62d47a;
  --ui-blue: #5b9bd5;

  /* Acento de era (se sobrescribe desde hud.js) */
  --era-accent: #d8a24a;
  --era-rgb: 216, 162, 74;
  --faction-accent: #5b9bd5;
  --faction-rgb: 91, 155, 213;

  /* Tipografía */
  --font-ui: ui-sans-serif, system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-cond: "Arial Narrow", "Segoe UI Semibold", ui-sans-serif, system-ui,
    "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
    "Courier New", monospace;

  /* Métrica del HUD */
  --top-h: clamp(48px, 5.6vh, 64px);
  --mini: clamp(216px, 21.5vh, 256px);
  --dock-h: calc(var(--mini) + 62px);
  --cmd-w: clamp(236px, 17vw, 300px);

  /* Sombras y biseles */
  --shadow-deep: 0 18px 42px rgba(0, 0, 0, 0.55);
  --shadow-panel: 0 12px 28px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  --shadow-gold: 0 0 24px rgba(216, 162, 74, 0.18);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65);

  /* Tiempos */
  --t-fast: 0.15s;
  --t-med: 0.3s;
  --t-slow: 0.5s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────── 1.1 · BASES ────────────────────────────── */

.hud,
.menus,
.ui-demo {
  font-family: var(--font-ui);
  color: var(--ui-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hud *,
.hud *::before,
.hud *::after,
.menus *,
.menus *::before,
.menus *::after,
.ui-demo *,
.ui-demo *::before,
.ui-demo *::after {
  box-sizing: border-box;
}

.hud,
.menus {
  -webkit-user-select: none;
  user-select: none;
}

/* El atributo hidden debe ganar siempre a los display de los componentes. */
.hud [hidden],
.menus [hidden],
.ui-demo [hidden] {
  display: none !important;
}

.hud button,
.menus button,
.ui-demo button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hud canvas,
.menus canvas {
  display: block;
}

.hud button:focus-visible,
.menus button:focus-visible,
.menus input:focus-visible,
.menus select:focus-visible,
.ui-demo button:focus-visible {
  outline: 2px solid var(--ui-gold-hi);
  outline-offset: 2px;
}

.hud ::selection,
.menus ::selection {
  background: rgba(216, 162, 74, 0.35);
}

kbd {
  display: inline-block;
  font-family: var(--font-num);
  font-size: 8px;
  line-height: 1.2;
  padding: 2px 5px;
  border-radius: 2px;
  color: #ecd9b3;
  background: linear-gradient(180deg, #1d2833, #0a1118);
  border: 1px solid rgba(216, 162, 74, 0.32);
  border-bottom-color: rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────
   2 · HUD · MARCO DE PANTALLA
   ────────────────────────────────────────────────────────────────────── */

.hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  /* #ui-root > * fuerza pointer-events:auto en el contenedor del juego; el HUD
     debe dejar pasar los clics al mundo salvo en sus paneles. */
  pointer-events: none !important;
  overflow: hidden;
  font-size: 12px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.hud[data-phase="menu"],
.hud[data-phase="loading"],
.hud[data-phase="victory"],
.hud[data-phase="defeat"] {
  opacity: 0;
  visibility: hidden;
}

.hud-dock {
  pointer-events: auto;
}

.hud-frame {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.hud-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 40%, rgba(0, 0, 0, 0.32) 76%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 14%, transparent 82%, rgba(0, 0, 0, 0.4));
}

.hud-scan {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.014) 0 1px,
    transparent 1px 3px
  );
}

.hud-corner {
  position: absolute;
  width: clamp(64px, 7vw, 128px);
  height: clamp(64px, 7vw, 128px);
  opacity: 0.8;
  filter: drop-shadow(0 0 8px rgba(216, 162, 74, 0.25));
}

.hud-corner::before,
.hud-corner::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hud-corner::before {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--ui-gold-hi), rgba(216, 162, 74, 0.45) 42%, transparent 88%);
}

.hud-corner::after {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, var(--ui-gold-hi), rgba(216, 162, 74, 0.45) 42%, transparent 88%);
}

.hud-corner--tl {
  left: 8px;
  top: calc(var(--top-h) + 10px);
}

.hud-corner--tr {
  right: 8px;
  top: calc(var(--top-h) + 10px);
  transform: scaleX(-1);
}

.hud-corner--bl {
  left: 8px;
  bottom: calc(var(--dock-h) + 10px);
  transform: scaleY(-1);
}

.hud-corner--br {
  right: 8px;
  bottom: calc(var(--dock-h) + 10px);
  transform: scale(-1, -1);
}

/* Pequeña filigrana diagonal en cada esquina. */
.hud-corner > i {
  display: none;
}

.hud-corner {
  background-image:
    linear-gradient(135deg, transparent 0 14px, rgba(216, 162, 74, 0.5) 14px 15px, transparent 15px),
    radial-gradient(circle at 4px 4px, rgba(244, 221, 166, 0.85) 0 2px, transparent 2.5px);
  background-repeat: no-repeat;
}

/* ────────────────────── 2.1 · BARRA SUPERIOR ────────────────────────── */

.hud-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-h);
  padding: 8px 14px 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
  z-index: 12;
  pointer-events: none;
}

.hud-top > * {
  pointer-events: auto;
}

.resbar {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #1e2b38 0%, #121d27 30%, #0b131b 68%, #070e14 100%);
  border: 1px solid var(--ui-line);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.5),
    var(--bevel),
    inset 0 0 26px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.resbar::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  pointer-events: none;
  z-index: 2;
}

.resbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 162, 74, 0.65), transparent);
  pointer-events: none;
}

.resbar-rail {
  position: relative;
  flex: 0 0 16px;
  background:
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(0, 0, 0, 0.5) 14px 15px),
    linear-gradient(90deg, #2c1f0e, #9b7233 45%, #5a3f18 100%);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.65), inset 1px 0 0 rgba(255, 255, 255, 0.15);
  z-index: 1;
}

.resbar-rail::after {
  content: "";
  position: absolute;
  inset: 6px 4px;
  border-radius: 20px;
  border: 1px solid rgba(255, 238, 196, 0.25);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.res-list {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.res {
  --res-color: var(--ui-gold);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.62vw, 10px);
  padding: 0 clamp(6px, 0.95vw, 17px);
  transition: background var(--t-med) ease;
}

.res + .res::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17%;
  bottom: 17%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(216, 162, 74, 0.34) 30%,
    rgba(216, 162, 74, 0.34) 70%,
    transparent
  );
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.55);
}

.res[data-res="food"] { --res-color: #c98a54; }
.res[data-res="wood"] { --res-color: #9a6b3f; }
.res[data-res="gold"] { --res-color: #e8c15a; }
.res[data-res="stone"] { --res-color: #9fb0bd; }
.res[data-res="energy"] { --res-color: #58d7ff; }

.res:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 70%);
}

.res-icon-slot {
  flex: 0 0 auto;
  width: clamp(21px, 2.25vw, 30px);
  height: clamp(21px, 2.25vw, 30px);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 8px color-mix(in srgb, var(--res-color) 45%, transparent));
}

.res-icon-slot canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.res-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  min-width: 0;
}

.res-name {
  margin-bottom: 3px;
  font-size: clamp(7px, 0.58vw, 9.5px);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(214, 201, 174, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.res-val {
  font-family: var(--font-cond);
  font-size: clamp(15px, 1.32vw, 23px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f5ecd9;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 #000, 0 0 14px rgba(var(--era-rgb), 0.16);
  white-space: nowrap;
}

.res.is-bumped .res-val {
  animation: resBump 0.42s var(--ease-out);
}

.res-delta {
  position: absolute;
  top: 5px;
  right: 6px;
  font-family: var(--font-num);
  font-size: 8px;
  font-weight: 700;
  color: #93e6a8;
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
}

.res-delta.is-showing {
  animation: resDelta 1s ease-out both;
}

.res-delta.is-negative {
  color: #ff9d8a;
}

.resbar-end {
  position: relative;
  flex: 0 0 clamp(26px, 2.4vw, 40px);
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, transparent, rgba(216, 162, 74, 0.12));
}

.resbar-gem {
  width: clamp(9px, 0.9vw, 14px);
  aspect-ratio: 1;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #f4dda6, #9a6f2c 55%, #3b2a11);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(216, 162, 74, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ────────────────────── 2.2 · RELOJ DE ERA ──────────────────────────── */

.era-clock {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.7vw, 12px);
  height: 100%;
  padding: 0 clamp(13px, 1.1vw, 20px) 0 7px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2a2011 0%, #171009 52%, #0d0905 100%);
  border: 1px solid rgba(216, 162, 74, 0.5);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 241, 208, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}

.era-clock::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

.era-clock:hover {
  border-color: rgba(244, 221, 166, 0.8);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(216, 162, 74, 0.18),
    inset 0 1px 0 rgba(255, 241, 208, 0.2);
}

.era-dial {
  --p: 0;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--top-h) - 15px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    from -90deg,
    var(--ui-gold-hi) 0%,
    var(--era-accent) calc(var(--p) * 1%),
    rgba(255, 255, 255, 0.07) calc(var(--p) * 1%)
  );
  box-shadow:
    0 0 16px rgba(var(--era-rgb), 0.4),
    0 1px 2px rgba(0, 0, 0, 0.6);
}

.era-dial::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 26%, #2a3845, #0b1219 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 8px rgba(0, 0, 0, 0.9);
}

.era-dial::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.era-tick {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(244, 221, 166, 0.62) 0deg 1.1deg,
    transparent 1.1deg 15deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: eraSpin 80s linear infinite;
  opacity: 0.6;
  pointer-events: none;
}

.era-numeral {
  position: relative;
  z-index: 1;
  font-family: var(--font-cond);
  font-size: clamp(12px, 1.05vw, 18px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f8ebc8;
  text-shadow: 0 0 12px rgba(var(--era-rgb), 0.85), 0 1px 1px #000;
}

.era-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
  min-width: 0;
  padding-bottom: 3px;
}

.era-cap {
  font-size: clamp(6.5px, 0.55vw, 8px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(216, 162, 74, 0.8);
  margin-bottom: 2px;
}

.era-name {
  font-family: var(--font-cond);
  font-size: clamp(12px, 1vw, 17px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f4e8d0;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000;
}

.era-year {
  font-family: var(--font-num);
  font-size: clamp(7px, 0.6vw, 8.5px);
  letter-spacing: 0.2em;
  color: #a99a7e;
  margin-top: 2px;
}

.era-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 2px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}

.era-bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--ui-gold-lo), var(--era-accent), #ffeec4);
  box-shadow: 0 0 8px rgba(var(--era-rgb), 0.7);
  transition: transform 0.45s var(--ease-out);
}

.era-clock.is-ready {
  animation: eraReady 2.6s ease-in-out infinite;
}

/* ────────────────────── 2.3 · CONTROLES SUPERIORES ──────────────────── */

.hud-controls {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 100%;
  flex: 0 0 auto;
}

.chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 clamp(8px, 0.75vw, 12px);
  border-radius: 9px;
  background: linear-gradient(180deg, #1b2733 0%, #0e1720 60%, #090f15 100%);
  border: 1px solid rgba(216, 162, 74, 0.24);
  box-shadow: var(--bevel), 0 8px 20px rgba(0, 0, 0, 0.4);
  flex: 0 0 auto;
}

.chip--pop {
  min-width: 82px;
}

.chip--pop.is-warn {
  border-color: rgba(216, 162, 74, 0.55);
}

.chip--pop.is-warn .pop-val {
  color: #f0cf82;
}

.chip--pop.is-full {
  border-color: rgba(224, 90, 72, 0.65);
  animation: popWarn 1.4s ease-in-out infinite;
}

.chip--pop.is-full .pop-val {
  color: #ff9d8a;
}

.chip-icon-slot {
  flex: 0 0 auto;
  width: clamp(20px, 1.8vw, 26px);
  height: clamp(20px, 1.8vw, 26px);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

.chip-icon-slot canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.pop-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}

.pop-val {
  font-family: var(--font-cond);
  font-size: clamp(13px, 1.05vw, 18px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f2e8d4;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
}

.pop-val em {
  font-style: normal;
  margin: 0 1px;
  color: #7c7565;
}

.chip-cap {
  font-size: clamp(6px, 0.5vw, 7.5px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b8474;
  margin-top: 3px;
  white-space: nowrap;
}

.chip--clock {
  min-width: clamp(62px, 5.2vw, 82px);
  justify-content: center;
  gap: 0;
}

.clock-val {
  font-family: var(--font-num);
  font-size: clamp(11px, 0.88vw, 14px);
  letter-spacing: 0.03em;
  color: #dfd5bf;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 #000;
}

.chip--clock .chip-cap {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 6px;
}

.chip--clock .clock-val {
  transform: translateY(-3px);
}

.hud-btn {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--top-h) - 18px);
  min-width: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1c2936 0%, #0d161e 60%, #080e13 100%);
  border: 1px solid rgba(216, 162, 74, 0.3);
  box-shadow: var(--bevel), 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast),
    box-shadow var(--t-fast), background var(--t-fast);
}

.hud-btn::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

.hud-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(244, 221, 166, 0.75);
  background: linear-gradient(180deg, #263646 0%, #101b25 60%, #0a1219 100%);
  box-shadow: var(--bevel), 0 10px 22px rgba(0, 0, 0, 0.55), 0 0 22px rgba(216, 162, 74, 0.2);
}

.hud-btn:active {
  transform: translateY(0);
}

.hud-btn.is-active {
  border-color: var(--ui-gold);
  box-shadow: inset 0 0 14px rgba(216, 162, 74, 0.22), 0 0 18px rgba(216, 162, 74, 0.25);
}

.hud-btn-icon {
  width: 58%;
  height: 58%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hud-btn-icon canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.speed-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: rgba(5, 9, 13, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  flex: 0 0 auto;
}

.speed-btn {
  height: 100%;
  min-width: 22px;
  padding: 0 5px;
  border-radius: 6px;
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8f8878;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.speed-btn:hover {
  color: #ecdfc6;
  background: rgba(255, 255, 255, 0.05);
}

.speed-btn.is-active {
  color: #1a1206;
  background: linear-gradient(180deg, #f3d9a0, #c8963f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ────────────────────── 2.4 · ESTANDARTE DE FACCIÓN ─────────────────── */

.hud-banner {
  position: absolute;
  left: 16px;
  top: calc(var(--top-h) + 12px);
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px 6px 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(10, 16, 22, 0.9), rgba(10, 16, 22, 0.2));
  border-left: 2px solid var(--faction-accent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  max-width: 320px;
}

.banner-crest {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, rgba(var(--faction-rgb), 0.7), rgba(216, 162, 74, 0.35));
  border: 1px solid rgba(244, 221, 166, 0.55);
  box-shadow: 0 0 8px rgba(var(--faction-rgb), 0.4);
}

.banner-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.banner-name {
  font-family: var(--font-cond);
  font-size: clamp(9px, 0.75vw, 12px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e9dfc9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.banner-sub {
  margin-top: 2px;
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8373;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ──────────────────────────────────────────────────────────────────────
   3 · HUD · PANEL INFERIOR
   ────────────────────────────────────────────────────────────────────── */

.hud-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dock-h);
  z-index: 10;
  pointer-events: auto;
  background:
    linear-gradient(
      180deg,
      rgba(8, 12, 17, 0.1) 0%,
      rgba(7, 11, 15, 0.6) 5%,
      rgba(6, 10, 14, 0.96) 16%,
      #05080b 100%
    );
  border-top: 1px solid rgba(216, 162, 74, 0.42);
  box-shadow:
    0 -34px 64px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hud-dock::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(244, 221, 166, 0.45) 18%,
    rgba(216, 162, 74, 0.9) 50%,
    rgba(244, 221, 166, 0.45) 82%,
    transparent
  );
  pointer-events: none;
}

.hud-dock::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 200px;
  height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(216, 162, 74, 0.2), transparent 70%);
  pointer-events: none;
}

.dock-inner {
  width: 100%;
  max-width: 1560px;
  height: 100%;
  margin: 0 auto;
  padding: 10px 14px 12px;
  display: grid;
  grid-template-columns:
    minmax(300px, 1.2fr)
    var(--cmd-w)
    minmax(calc(var(--mini) + 170px), 1fr);
  gap: 10px;
  align-items: stretch;
  min-height: 0;
}

/* Paneles compartidos. */
.sel-panel,
.cmd-panel,
.queue-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #141e28 0%, #0d161e 55%, #080f15 100%);
  border: 1px solid rgba(216, 162, 74, 0.2);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.sel-panel::before,
.cmd-panel::before,
.queue-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.035);
  pointer-events: none;
  z-index: 0;
}

.sel-panel::after,
.cmd-panel::after,
.queue-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 221, 166, 0.35), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ────────────────────── 3.1 · PANEL DE SELECCIÓN ────────────────────── */

.sel-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(8px, 0.9vw, 14px);
  padding: 10px 12px;
  align-items: center;
}

.panel-ornament {
  position: absolute;
  top: 7px;
  right: 9px;
  width: 24px;
  height: 24px;
  opacity: 0.35;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 46%, rgba(216, 162, 74, 0.9) 47% 53%, transparent 54%),
    radial-gradient(circle at 50% 50%, rgba(244, 221, 166, 0.8) 0 1px, transparent 1.5px);
  border-top: 1px solid rgba(216, 162, 74, 0.55);
  border-right: 1px solid rgba(216, 162, 74, 0.55);
}

.sel-portrait {
  position: relative;
  align-self: start;
  width: clamp(112px, calc(var(--dock-h) * 0.52), 180px);
  max-width: 46%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.portrait-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 5px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--era-rgb), 0.14), transparent 62%),
    linear-gradient(180deg, #101a22, #060a0e);
  border: 1px solid rgba(216, 162, 74, 0.5);
  box-shadow:
    inset 0 0 0 3px rgba(6, 10, 14, 0.92),
    inset 0 0 28px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 6px 18px rgba(0, 0, 0, 0.5);
}

.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}

.sel-icon-slot {
  position: absolute;
  inset: 4px;
  display: grid;
  place-items: center;
  z-index: 1;
}

.sel-icon-slot canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.sel-icon-slot.is-empty::before {
  content: "";
  width: 42%;
  aspect-ratio: 1;
  transform: rotate(45deg);
  border: 1px solid rgba(216, 162, 74, 0.28);
  background:
    linear-gradient(135deg, rgba(216, 162, 74, 0.12), transparent 60%);
  box-shadow: 0 0 22px rgba(216, 162, 74, 0.08) inset;
}

.sel-kind {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 3;
  padding: 2px 5px;
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e8d6ac;
  background: rgba(5, 9, 13, 0.85);
  border: 1px solid rgba(216, 162, 74, 0.35);
  border-radius: 2px;
}

.sel-count {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  padding: 1px 5px;
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  color: #171006;
  background: linear-gradient(180deg, #f4dda6, #c8963f);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.portrait-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(216, 162, 74, 0.06) 48%,
    rgba(255, 238, 196, 0.12) 50%,
    transparent 52%
  );
  background-size: 100% 300%;
  animation: portraitScan 7s linear infinite;
  opacity: 0.7;
}

.hpbar {
  position: relative;
  height: 13px;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0f14, #04070a);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.04);
  flex: 0 0 auto;
}

.hpbar .hp-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(1);
  background: linear-gradient(180deg, #8ce79b 0%, #46a75f 55%, #256b3b 100%);
  box-shadow: 0 0 10px rgba(92, 220, 120, 0.35);
  transition: transform 0.35s var(--ease-out), background 0.3s;
}

.hpbar.is-mid .hp-fill {
  background: linear-gradient(180deg, #f0cf82, #c9973c 55%, #7c5a1d);
  box-shadow: 0 0 10px rgba(232, 193, 90, 0.35);
}

.hpbar.is-low .hp-fill {
  background: linear-gradient(180deg, #ff9d8a, #c9503d 55%, #772418);
  box-shadow: 0 0 12px rgba(224, 90, 72, 0.5);
  animation: hpCritical 1.4s ease-in-out infinite;
}

.hp-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(10% - 1px),
    rgba(0, 0, 0, 0.45) calc(10% - 1px) 10%
  );
}

.hp-label {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-num);
  font-size: 8px;
  letter-spacing: 0.02em;
  color: #f4ecdc;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  z-index: 2;
  pointer-events: none;
}

.hpbar--portrait {
  height: 7px;
  margin-top: 4px;
  border-radius: 2px;
}

.hpbar--portrait .hp-label {
  display: none;
}

.hpbar--main .hp-label {
  font-size: 9px;
}

.sel-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 3px 2px 0;
}

.sel-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.sel-name {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  font-family: var(--font-cond);
  font-size: clamp(15px, 1.28vw, 21px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f6ecd9;
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sel-role {
  flex: 0 0 auto;
  padding: 3px 7px;
  font-size: clamp(6.5px, 0.55vw, 8.5px);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ui-gold-hi);
  background: rgba(216, 162, 74, 0.09);
  border: 1px solid rgba(216, 162, 74, 0.26);
  border-radius: 3px;
  white-space: nowrap;
}

.sel-build {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfc2a6;
}

.sel-build-label {
  flex: 0 0 auto;
}

.sel-build-track {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: #070c11;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.sel-build-track i {
  display: block;
  height: 100%;
  transform-origin: left;
  background: linear-gradient(90deg, #8a5f24, var(--ui-gold), #ffeec4);
  box-shadow: 0 0 8px rgba(216, 162, 74, 0.5);
}

.sel-build-pct {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: 8px;
  color: #f0ddb6;
}

.sel-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 5px;
  max-height: 54px;
  overflow: hidden;
  flex: 0 0 auto;
}

.stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  line-height: 1.5;
}

.stat-k {
  font-size: clamp(6.5px, 0.5vw, 7.5px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8b8574;
}

.stat-v {
  font-family: var(--font-num);
  font-size: clamp(9px, 0.72vw, 10.5px);
  font-weight: 600;
  color: #eee2c9;
}

.sel-desc {
  margin: 0;
  font-size: clamp(9.5px, 0.68vw, 11px);
  line-height: 1.45;
  color: #a8a291;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}

.sel-empty-hint {
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #79796d;
}

.sel-empty-key {
  padding: 1px 5px;
  border-radius: 2px;
  font-family: var(--font-num);
  font-size: 7px;
  color: #d8c8a6;
  background: #0c141b;
  border: 1px solid rgba(216, 162, 74, 0.28);
}

/* ────────────────────── 3.2 · REJILLA DE COMANDOS ───────────────────── */

.cmd-panel {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.cmd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 15px;
  flex: 0 0 auto;
}

.cmd-title {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 221, 166, 0.82);
  white-space: nowrap;
}

.cmd-ctx {
  min-width: 0;
  max-width: 62%;
  font-size: 7.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8473;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.cmd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 0 0 auto;
}

.cmd-tab {
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9c9684;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.cmd-tab:hover {
  color: #f0e3c8;
  border-color: rgba(216, 162, 74, 0.4);
  background: rgba(216, 162, 74, 0.08);
}

.cmd-tab.is-active {
  color: #191106;
  background: linear-gradient(180deg, #f2d9a3, #c79a45);
  border-color: #f2d9a3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.cmd-tab--cancel {
  margin-left: auto;
  color: #c98a80;
  border-color: rgba(224, 90, 72, 0.28);
}

.cmd-tab--cancel:hover {
  color: #ffc1b4;
  border-color: rgba(224, 90, 72, 0.6);
  background: rgba(224, 90, 72, 0.1);
}

.cmd-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.cmd-slot {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #17222d 0%, #0d151d 60%, #080f15 100%);
  border: 1px solid rgba(255, 255, 255, 0.075);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -6px 12px rgba(0, 0, 0, 0.35),
    0 2px 5px rgba(0, 0, 0, 0.35);
  transition:
    transform var(--t-fast) var(--ease-out),
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}

.cmd-slot::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 4;
}

.cmd-slot.is-empty {
  background: linear-gradient(180deg, rgba(10, 16, 22, 0.55), rgba(4, 7, 10, 0.85));
  border-color: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55);
}

.cmd-empty-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(216, 162, 74, 0.18);
  pointer-events: none;
}

.cmd-btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  transition: background var(--t-fast);
}

.cmd-btn:hover {
  background: radial-gradient(circle at 50% 30%, rgba(var(--era-rgb), 0.12), transparent 70%);
}

.cmd-icon {
  position: absolute;
  inset: 4% 4% 15% 4%;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}

.cmd-icon canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  transition: filter var(--t-fast), transform var(--t-fast) var(--ease-out);
}

.cmd-key {
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 3;
  min-width: 12px;
  padding: 0 2px;
  border-radius: 2px;
  font-family: var(--font-cond);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #f5dfae;
  background: rgba(6, 10, 14, 0.82);
  border: 1px solid rgba(216, 162, 74, 0.3);
  text-shadow: 0 1px 1px #000;
}

.cmd-cost {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  min-height: 11px;
  max-height: 15px;
  height: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 2px;
  font-family: var(--font-num);
  font-size: 8px;
  line-height: 1;
  color: #ded4bd;
  background: linear-gradient(180deg, rgba(3, 6, 9, 0.05), rgba(3, 6, 9, 0.88));
  text-shadow: 0 1px 1px #000;
}

.cmd-cost-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.cost-dot {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cost-color, var(--ui-gold));
  box-shadow: 0 0 4px var(--cost-color, var(--ui-gold));
}

.cost-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cmd-cost-item.is-missing .cost-num {
  color: #ff9d8a;
}

.cmd-cost-item.is-missing .cost-dot {
  opacity: 0.5;
  box-shadow: none;
}

.cmd-cost-more {
  opacity: 0.65;
  font-size: 8px;
}

.cmd-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 241, 196, 0.9), transparent 62%);
}

.cmd-slot:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 221, 166, 0.6);
  box-shadow:
    0 0 0 1px rgba(216, 162, 74, 0.25),
    0 10px 22px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(var(--era-rgb), 0.14);
  z-index: 3;
}

.cmd-slot:hover .cmd-icon canvas {
  filter: brightness(1.12) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
  transform: scale(1.04);
}

.cmd-slot:active {
  transform: translateY(0);
}

.cmd-slot.is-empty:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55);
}

.cmd-slot.is-disabled {
  border-color: rgba(255, 255, 255, 0.05);
}

.cmd-slot.is-disabled .cmd-icon canvas {
  filter: grayscale(1) brightness(0.62) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.cmd-slot.is-disabled .cmd-key {
  opacity: 0.5;
}

.cmd-slot.is-disabled .cmd-cost {
  color: #7f7767;
}

.cmd-slot.is-disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.45;
  background: repeating-linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.22) 0 4px,
    transparent 4px 8px
  );
}

.cmd-slot.is-locked::after {
  opacity: 0.65;
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.24) 0 4px, transparent 4px 8px),
    linear-gradient(180deg, rgba(216, 162, 74, 0.05), rgba(0, 0, 0, 0.2));
}

.cmd-slot.is-disabled .cmd-btn {
  cursor: not-allowed;
}

.cmd-slot.is-fired .cmd-flash {
  animation: cmdFire 0.42s var(--ease-out);
}

.cmd-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 12px;
  font-size: 7.5px;
  letter-spacing: 0.08em;
  color: #6f7368;
  white-space: nowrap;
  overflow: hidden;
}

.cmd-hover {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.cmd-page {
  flex: 0 0 auto;
  color: #8b8269;
  font-family: var(--font-num);
  font-size: 7px;
}

.cmd-panel.is-building {
  border-color: rgba(216, 162, 74, 0.5);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 24px rgba(216, 162, 74, 0.12);
}

.cmd-panel.is-building .cmd-title::after {
  content: " · catálogo";
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(216, 162, 74, 0.55);
}

/* ────────────────────── 3.3 · COLA DE PRODUCCIÓN ────────────────────── */

.queue-panel {
  flex: 1 1 210px;
  min-width: 165px;
  max-width: 390px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
}

.queue-head {
  flex: 0 0 auto;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.queue-title {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 221, 166, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-total {
  flex: 0 0 auto;
  padding: 0 4px;
  font-family: var(--font-num);
  font-size: 8px;
  line-height: 1.5;
  color: #e0d2b4;
  background: rgba(216, 162, 74, 0.08);
  border: 1px solid rgba(216, 162, 74, 0.28);
  border-radius: 2px;
}

.queue-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.queue-item {
  flex: 1 1 0;
  min-height: 26px;
  max-height: 44px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008));
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  animation: queueIn 0.32s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.queue-item:hover {
  border-color: rgba(216, 162, 74, 0.45);
  background: linear-gradient(90deg, rgba(216, 162, 74, 0.1), rgba(255, 255, 255, 0.01));
}

.queue-item:focus-visible {
  outline: 2px solid var(--ui-gold-hi);
  outline-offset: 1px;
}

.queue-thumb {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 1;
  max-height: 32px;
  max-width: 32px;
  border-radius: 3px;
  overflow: hidden;
  background: #060a0e;
  border: 1px solid rgba(216, 162, 74, 0.3);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
}

.queue-icon-slot {
  position: absolute;
  inset: 0;
}

.queue-icon-slot canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.queue-count {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 2px;
  font-size: 6.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #f5e5c2;
  background: rgba(4, 7, 10, 0.88);
  border-radius: 2px 0 0 0;
}

.queue-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.queue-label {
  font-size: 8.5px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: #ddd3bf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-track {
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: #080d12;
  box-shadow: inset 0 1px 2px #000;
}

.queue-fill {
  display: block;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #8a5f24, var(--era-accent), #ffeec4);
  box-shadow: 0 0 6px rgba(216, 162, 74, 0.55);
  transition: transform 0.24s linear;
}

.queue-pct {
  flex: 0 0 auto;
  min-width: 24px;
  font-family: var(--font-num);
  font-size: 7.5px;
  text-align: right;
  color: #b6ac96;
}

.queue-empty {
  margin: auto;
  padding: 8px;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #646a63;
  text-align: center;
}

.queue-more {
  flex: 0 0 auto;
  padding: 2px;
  font-size: 7.5px;
  letter-spacing: 0.08em;
  color: #8b8269;
  text-align: center;
  text-transform: uppercase;
}

/* ────────────────────────── 3.4 · MINIMAPA ──────────────────────────── */

.dock-right {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.mini-panel {
  flex: 0 0 auto;
  width: var(--mini);
  max-width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  min-height: 0;
}

.mini-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 5px;
  border-radius: 5px;
  background: linear-gradient(
    135deg,
    #2a2112 0%,
    #8a6a35 16%,
    #3a2c15 38%,
    #c9a45c 62%,
    #6b5128 82%,
    #2f2413 100%
  );
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

.mini-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 0;
  border-radius: 2px;
  background: #04080b;
  box-shadow:
    inset 0 0 26px rgba(0, 0, 0, 0.95),
    inset 0 0 0 1px rgba(0, 0, 0, 0.9);
}

.mini-frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 3;
  border-radius: 2px;
  pointer-events: none;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(216, 162, 74, 0.22);
}

.mini-canvas {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 1;
  display: block;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-radius: 2px;
  cursor: crosshair;
  outline: none;
  touch-action: none;
}

.mini-canvas:focus-visible {
  box-shadow: 0 0 0 2px var(--ui-gold-hi);
}

.mini-canvas.is-panning {
  cursor: grabbing;
}

.mini-stud {
  position: absolute;
  z-index: 4;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #f8e5b4 0%, #a67e3c 55%, #2c2110 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 1px 3px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.mini-stud--tl { top: 0; left: 0; }
.mini-stud--tr { top: 0; right: 0; }
.mini-stud--bl { bottom: 0; left: 0; }
.mini-stud--br { bottom: 0; right: 0; }

.mini-caption {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  padding-top: 10px;
  pointer-events: none;
  font-size: 6.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(236, 219, 182, 0.72);
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  background: linear-gradient(180deg, transparent, rgba(2, 4, 6, 0.62));
}

.mini-caption-title {
  letter-spacing: 0.14em;
  color: rgba(236, 219, 182, 0.82);
}

.mini-coords {
  font-family: var(--font-num);
  color: #e0cfa8;
  letter-spacing: 0.02em;
}

.mini-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mini-btn {
  position: relative;
  flex: 0 0 auto;
  height: 23px;
  aspect-ratio: 1;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #182430, #0b131a);
  border: 1px solid rgba(216, 162, 74, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 5px rgba(0, 0, 0, 0.4);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.mini-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(244, 221, 166, 0.65);
  box-shadow: 0 0 16px rgba(216, 162, 74, 0.2);
}

.mini-btn-icon {
  width: 64%;
  height: 64%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.mini-btn-icon canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.mini-btn-key {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-family: var(--font-num);
  font-size: 5.5px;
  color: #a99a7e;
  pointer-events: none;
}

.mini-btn[aria-disabled="true"] {
  opacity: 0.42;
}

.mini-btn--idle.is-idle {
  animation: idlePulse 1.8s ease-in-out infinite;
  border-color: #e8c15a;
}

.group-chips {
  margin-left: auto;
  display: flex;
  gap: 3px;
}

.group-chip {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-family: var(--font-cond);
  font-size: 9.5px;
  font-weight: 700;
  color: #b3a98f;
  background: linear-gradient(180deg, #182430, #0b131a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.35);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.group-chip:hover {
  color: #f5e6c2;
  border-color: rgba(216, 162, 74, 0.55);
  background: linear-gradient(180deg, #26323e, #0e161d);
}

.group-chip:active {
  background: linear-gradient(180deg, #f0d8a2, #c6973f);
  color: #191106;
}

/* ──────────────────────────────────────────────────────────────────────
   4 · ALERTAS, MENSAJES, PAUSA Y TOOLTIPS
   ────────────────────────────────────────────────────────────────────── */

.hud-alerts {
  position: absolute;
  top: calc(var(--top-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: min(560px, 70vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}

.alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 210px;
  max-width: 100%;
  padding: 5px 16px 5px 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(22, 28, 34, 0.95), rgba(10, 14, 18, 0.88));
  border: 1px solid rgba(216, 162, 74, 0.32);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: alertIn 0.32s var(--ease-spring) both;
  overflow: hidden;
}

.alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ui-gold);
  box-shadow: 0 0 8px rgba(216, 162, 74, 0.6);
}

.alert-icon {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
}

.alert-icon canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.alert-text {
  min-width: 0;
  font-family: var(--font-cond);
  font-size: clamp(9px, 0.7vw, 11px);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #f1e6d2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert--attack {
  border-color: rgba(255, 104, 82, 0.72);
  background: linear-gradient(90deg, rgba(62, 18, 13, 0.96), rgba(20, 10, 10, 0.9));
  animation: alertIn 0.32s var(--ease-spring) both, alertThrob 1.8s ease-in-out 0.4s infinite;
}

.alert--attack::before {
  background: #ff6a52;
  box-shadow: 0 0 10px rgba(255, 90, 70, 0.8);
}

.alert--bad {
  border-color: rgba(224, 90, 72, 0.55);
}

.alert--bad::before {
  background: var(--ui-red);
}

.alert--warn {
  border-color: rgba(216, 162, 74, 0.62);
  background: linear-gradient(90deg, rgba(48, 34, 12, 0.95), rgba(17, 13, 8, 0.88));
}

.alert--good {
  border-color: rgba(98, 212, 122, 0.5);
  background: linear-gradient(90deg, rgba(16, 42, 24, 0.94), rgba(9, 18, 12, 0.88));
}

.alert--good::before {
  background: var(--ui-green);
  box-shadow: 0 0 8px rgba(98, 212, 122, 0.6);
}

.alert--info::before {
  background: #7fa6c8;
}

.alert.is-leaving {
  animation: alertOut 0.36s ease-in forwards;
}

.alert-pulse {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
}

.alert--attack .alert-pulse {
  animation: alertRing 2s ease-out infinite;
  border: 1px solid rgba(255, 104, 82, 0.55);
}

.hud-msg,
.hud-messages {
  pointer-events: none;
}

.hud-messages {
  position: absolute;
  left: 50%;
  bottom: calc(var(--dock-h) + 12px);
  transform: translateX(-50%);
  z-index: 35;
  width: min(520px, 70vw);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 4px;
}

.hud-msg {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(6, 10, 14, 0.84);
  border: 1px solid rgba(216, 162, 74, 0.25);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: msgIn 0.3s var(--ease-out) both;
}

.msg-mark {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--ui-gold);
  box-shadow: 0 0 8px rgba(216, 162, 74, 0.7);
}

.msg-text {
  font-size: clamp(9px, 0.66vw, 10.5px);
  line-height: 1.3;
  color: #e3d9c6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-msg--warn {
  border-color: rgba(216, 162, 74, 0.5);
}

.hud-msg--bad {
  border-color: rgba(224, 90, 72, 0.45);
}

.hud-msg--bad .msg-mark {
  background: var(--ui-red);
  box-shadow: 0 0 8px rgba(224, 90, 72, 0.7);
}

.hud-msg--good {
  border-color: rgba(98, 212, 122, 0.4);
}

.hud-msg--good .msg-mark {
  background: var(--ui-green);
  box-shadow: 0 0 8px rgba(98, 212, 122, 0.7);
}

.hud-msg--attack {
  border-color: rgba(224, 90, 72, 0.6);
}

.hud-msg--attack .msg-mark {
  background: #ff6a52;
  box-shadow: 0 0 9px rgba(255, 90, 70, 0.8);
}

.hud-msg.is-leaving {
  animation: msgOut 0.4s ease-in forwards;
}

.hud-pause {
  position: absolute;
  top: calc(var(--top-h) + 12px);
  left: 50%;
  z-index: 38;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) ease, transform var(--t-med) var(--ease-out);
}

.hud[data-paused="true"] .hud-pause {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hud-pause-inner {
  display: block;
  padding: 6px 26px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #f3e5c8;
  background: linear-gradient(90deg, transparent, rgba(10, 15, 20, 0.92) 20%, rgba(10, 15, 20, 0.92) 80%, transparent);
  border-top: 1px solid rgba(216, 162, 74, 0.35);
  border-bottom: 1px solid rgba(216, 162, 74, 0.35);
  text-shadow: 0 1px 2px #000;
}

/* ─────────────────────────── 4.1 · TOOLTIP ──────────────────────────── */

.hud-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 55;
  width: min(322px, calc(100vw - 28px));
  padding: 10px 12px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(18, 27, 36, 0.985) 0%, rgba(8, 13, 18, 0.99) 100%);
  border: 1px solid rgba(216, 162, 74, 0.48);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, visibility 0.14s;
  pointer-events: none;
  will-change: transform;
}

.hud-tooltip::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(216, 162, 74, 0.1);
  border-radius: 4px;
  pointer-events: none;
}

.hud-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

.tt {
  position: relative;
  z-index: 1;
}

.tt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.tt-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  background: #060b0f;
  border: 1px solid rgba(216, 162, 74, 0.32);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
}

.tt-icon canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.tt-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tt-name {
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f7ecd6;
}

.tt-kind {
  margin-top: 2px;
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a99a7e;
}

.tt-desc {
  margin: 0 0 7px;
  font-size: 9.5px;
  line-height: 1.45;
  color: #b5ae9c;
}

.tt-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 0;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: #9d9684;
}

.tt-section {
  display: block;
  margin: 7px 0 4px;
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d8b56c;
}

.cost-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.cost-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-num);
  font-size: 10px;
  color: #eee2cb;
}

.cost-item .cost-dot {
  width: 6px;
  height: 6px;
  background: var(--cost-color, var(--ui-gold));
  box-shadow: 0 0 5px var(--cost-color, var(--ui-gold));
}

.cost-item.is-missing {
  color: #ff9f8c;
}

.tt-reason {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 2px solid var(--ui-red);
  background: rgba(224, 90, 72, 0.09);
  font-size: 9px;
  line-height: 1.4;
  color: #ffb4a6;
}

.tt-hint {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 7.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7f7b6e;
}

/* ──────────────────────────────────────────────────────────────────────
   5 · MENÚS
   ────────────────────────────────────────────────────────────────────── */

.menus {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s;
}

.menus:not([data-screen="none"]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menus[data-screen="none"] {
  pointer-events: none !important;
}

.menus-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(18, 26, 36, 0.42), rgba(3, 6, 10, 0.94));
}

.menus:not(.has-art) .menus-scrim {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(18, 27, 36, 0.55), rgba(3, 6, 10, 0.82));
  -webkit-backdrop-filter: blur(10px) saturate(0.82);
  backdrop-filter: blur(10px) saturate(0.82);
}

.menus-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.92;
  filter: saturate(0.92) contrast(1.04);
}

.menus:not(.has-art) .menus-art {
  display: none;
}

.menus-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.menus-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 32%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 24%, transparent 68%, rgba(0, 0, 0, 0.72));
}

.menu-screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  padding: clamp(18px, 3.6vh, 48px) clamp(18px, 4vw, 60px);
}

.menus[data-screen="main"] .menu-main,
.menus[data-screen="loading"] .menu-loading,
.menus[data-screen="pause"] .menu-pause,
.menus[data-screen="settings"] .menu-settings,
.menus[data-screen="help"] .menu-help,
.menus[data-screen="victory"] .menu-victory,
.menus[data-screen="defeat"] .menu-defeat,
.menus[data-screen="credits"] .menu-credits {
  display: flex;
  animation: screenIn 0.5s var(--ease-spring) both;
}

/* ─────────────────────────── 5.1 · PORTADA ──────────────────────────── */

.menu-main {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
}

.menu-emblem-wrap {
  position: relative;
  width: clamp(64px, 8vh, 100px);
  aspect-ratio: 1;
  margin-bottom: clamp(6px, 1.2vh, 12px);
}

.menu-emblem {
  position: absolute;
  inset: 11%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, #263545, #0a1118 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -6px 18px #000,
    0 0 34px rgba(216, 162, 74, 0.28);
}

.menu-emblem canvas {
  width: 82% !important;
  height: 82% !important;
  object-fit: contain;
}

.menu-emblem-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(244, 221, 166, 0.7) 22deg,
    transparent 70deg,
    rgba(216, 162, 74, 0.24) 180deg,
    transparent 260deg,
    rgba(244, 221, 166, 0.45) 320deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: spin 26s linear infinite;
  filter: drop-shadow(0 0 8px rgba(216, 162, 74, 0.4));
}

.menu-kicker {
  margin: 0 0 4px;
  font-size: clamp(7.5px, 0.6vw, 10px);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(222, 196, 146, 0.72);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.menu-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.14em;
  margin: 0;
  font-family: var(--font-cond);
  font-size: clamp(46px, min(7.6vw, 13vh), 138px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(
    180deg,
    #fff6dc 0%,
    #f2d69b 30%,
    #d8a24a 56%,
    #9b6e2d 76%,
    #ecd09a 100%
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55))
    drop-shadow(0 16px 34px rgba(0, 0, 0, 0.65));
  animation: titleGlow 7s ease-in-out infinite;
}

.menu-title span {
  display: inline-block;
  /* Refuerzo del recorte de degradado: algunos navegadores no propagan el
     background-clip a los descendientes inline del h1. */
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.menu-title i {
  font-style: normal;
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(222, 196, 146, 0.7);
  background: none;
  -webkit-text-fill-color: rgba(222, 196, 146, 0.7);
  transform: translateY(-0.18em);
  padding: 0 0.08em;
}

.menu-rule {
  position: relative;
  width: min(560px, 74vw);
  height: 1px;
  margin: clamp(8px, 1.6vh, 16px) 0 clamp(6px, 1.2vh, 12px);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 162, 74, 0.55) 20%,
    rgba(244, 221, 166, 0.8) 50%,
    rgba(216, 162, 74, 0.55) 80%,
    transparent
  );
}

.menu-rule span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, #f4dda6, #8a5f24);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(216, 162, 74, 0.6);
}

.menu-tagline {
  margin: 0;
  font-family: var(--font-cond);
  font-size: clamp(10px, 0.9vw, 14px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(216, 203, 178, 0.68);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.menu-actions {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.8vh, 8px);
  width: min(336px, 82vw);
  margin-top: clamp(12px, 2.4vh, 26px);
  text-align: left;
}

.menu-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  width: 100%;
  padding: clamp(7px, 1vh, 11px) 18px clamp(7px, 1vh, 11px) 20px;
  border-radius: 4px;
  text-align: left;
  background: linear-gradient(180deg, rgba(25, 37, 48, 0.86), rgba(8, 14, 19, 0.9));
  border: 1px solid rgba(216, 162, 74, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition:
    transform var(--t-fast) var(--ease-out),
    border-color var(--t-fast),
    background var(--t-fast),
    box-shadow var(--t-fast);
}

.menu-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--ui-gold-hi), var(--ui-gold-lo));
  opacity: 0.75;
  transition: width var(--t-fast) ease;
}

.menu-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 242, 208, 0.14) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 0.55s var(--ease-out);
  pointer-events: none;
}

.menu-btn-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-cond);
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #f1e6d0;
  text-shadow: 0 1px 0 #000;
}

.menu-btn-sub {
  position: relative;
  z-index: 1;
  font-size: clamp(6.5px, 0.52vw, 8.5px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8f8a7a;
}

.menu-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(216, 162, 74, 0.68);
  background: linear-gradient(180deg, rgba(41, 54, 66, 0.92), rgba(12, 19, 26, 0.94));
  box-shadow:
    0 0 0 1px rgba(216, 162, 74, 0.22),
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(216, 162, 74, 0.14);
}

.menu-btn:hover::before {
  width: 3px;
}

.menu-btn:hover::after {
  transform: translateX(120%);
}

.menu-btn:active {
  transform: translateY(0);
}

.menu-btn--primary {
  background: linear-gradient(180deg, rgba(58, 43, 20, 0.94), rgba(24, 17, 8, 0.96));
  border-color: rgba(216, 162, 74, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 200, 0.14),
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(216, 162, 74, 0.1);
}

.menu-btn--primary .menu-btn-label {
  color: #ffeec6;
}

.menu-btn--primary::before {
  width: 3px;
  background: linear-gradient(180deg, #fff2ce, #d8a24a 60%, #7d571f);
}

.menu-btn--primary .menu-btn-sub {
  color: #b9a27a;
}

.menu-btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Cronología de eras en la portada. */
.menu-timeline {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 1.7vw, 30px);
  width: min(1080px, 92vw);
  margin-top: clamp(12px, 2.6vh, 28px);
  padding-top: 2px;
}

.menu-timeline::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 4%;
  right: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 162, 74, 0.35), transparent);
}

.timeline-era {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 34px;
}

.timeline-dot {
  width: 7px;
  height: 7px;
  margin-top: 11px;
  border-radius: 50%;
  background: #0b1218;
  border: 1px solid rgba(216, 162, 74, 0.65);
  box-shadow: 0 0 8px rgba(216, 162, 74, 0.25);
}

.timeline-year {
  font-family: var(--font-num);
  font-size: clamp(6.5px, 0.55vw, 9px);
  color: #a99a7e;
  letter-spacing: 0.02em;
}

.timeline-name {
  font-size: clamp(5.5px, 0.46vw, 7.5px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #77776c;
  white-space: nowrap;
}

.menu-footer {
  position: absolute;
  left: clamp(18px, 4vw, 60px);
  right: clamp(18px, 4vw, 60px);
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: clamp(6px, 0.48vw, 8px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 190, 170, 0.42);
}

/* ─────────────────────────── 5.2 · CARGA ───────────────────────────── */

.menu-loading {
  align-items: center;
  justify-content: center;
}

.loading-stage {
  width: min(560px, 86vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.loading-emblem {
  --p: 0;
  position: relative;
  width: clamp(116px, 18vh, 178px);
  aspect-ratio: 1;
  margin-bottom: clamp(8px, 1.6vh, 16px);
}

.loading-art {
  position: absolute;
  inset: 15%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #263443, #0a1118 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -8px 24px #000,
    0 0 44px rgba(216, 162, 74, 0.22);
}

.loading-art canvas {
  width: 78% !important;
  height: 78% !important;
  object-fit: contain;
}

.loading-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    #f4dda6 0%,
    var(--ui-gold) calc(var(--p) * 1%),
    rgba(255, 255, 255, 0.07) calc(var(--p) * 1%)
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 10px rgba(216, 162, 74, 0.5));
  transition: background 0.3s ease;
}

.loading-glyph {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(216, 162, 74, 0.55) 0deg 1deg,
    transparent 1deg 14deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: spin 44s linear infinite;
  opacity: 0.5;
}

.loading-title {
  margin: 0;
  font-family: var(--font-cond);
  font-size: clamp(22px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f1e5c9;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55), 0 10px 30px rgba(0, 0, 0, 0.6);
}

.loading-era {
  margin: 5px 0 0;
  font-size: clamp(7px, 0.6vw, 9px);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #b09b74;
}

.loading-bar {
  position: relative;
  width: 100%;
  height: 10px;
  margin-top: clamp(14px, 2.4vh, 22px);
  border-radius: 5px;
  overflow: hidden;
  background: #060b0f;
  border: 1px solid rgba(216, 162, 74, 0.32);
  box-shadow: inset 0 2px 6px #000, 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.loading-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #6b4a1c, #d8a24a 55%, #ffe9bd);
  box-shadow: 0 0 16px rgba(216, 162, 74, 0.6);
  transition: transform 0.4s var(--ease-out);
}

.loading-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.22) 0 6px,
    transparent 6px 14px
  );
  animation: barStripes 1.2s linear infinite;
}

.loading-pct {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-num);
  font-size: 8px;
  font-weight: 700;
  color: #f0e3c6;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  z-index: 2;
}

.loading-tip {
  width: min(520px, 100%);
  margin-top: clamp(14px, 2.6vh, 24px);
  padding: 10px 14px;
  text-align: left;
  border-left: 2px solid var(--ui-gold);
  background: linear-gradient(90deg, rgba(216, 162, 74, 0.08), transparent 80%);
}

.tip-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #c9a45c;
}

.tip-text {
  margin: 0;
  font-size: clamp(9.5px, 0.7vw, 11px);
  line-height: 1.55;
  color: #b9b1a0;
}

/* ────────────────────── 5.3 · PANELES COMUNES ───────────────────────── */

.menu-pause,
.menu-victory,
.menu-defeat {
  align-items: center;
  justify-content: center;
}

.menu-panel {
  position: relative;
  width: min(440px, 90vw);
  padding: clamp(20px, 3.6vh, 36px);
  text-align: center;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(19, 29, 39, 0.97), rgba(7, 12, 17, 0.985));
  border: 1px solid rgba(216, 162, 74, 0.36);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.menu-panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(216, 162, 74, 0.12);
  border-radius: 5px;
  pointer-events: none;
}

.menu-panel::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 221, 166, 0.55), transparent);
}

.menu-panel--pause {
  width: min(420px, 90vw);
}

.menu-panel--wide {
  width: min(880px, 93vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
}

.menu-panel--credits {
  width: min(700px, 93vw);
}

.panel-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: clamp(6.5px, 0.52vw, 8px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c9a45c;
}

.panel-title {
  margin: 0 0 6px;
  font-family: var(--font-cond);
  font-size: clamp(24px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f4e8d0;
  text-shadow: 0 2px 0 #000, 0 12px 30px rgba(0, 0, 0, 0.55);
}

.panel-sub {
  margin: 0 0 18px;
  font-size: clamp(9px, 0.68vw, 11px);
  line-height: 1.5;
  color: #a9a291;
}

.panel-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 18px 0 10px;
}

.panel-actions .menu-btn {
  align-items: center;
  text-align: center;
  padding: 10px 16px;
}

.panel-hint {
  margin: 10px 0 0;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: #7e7a6e;
}

.panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.panel-close {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9baa0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(216, 162, 74, 0.3);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.panel-close:hover {
  color: #f5e6c4;
  border-color: rgba(244, 221, 166, 0.7);
  background: rgba(216, 162, 74, 0.08);
}

.panel-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.panel-footer .menu-btn {
  width: auto;
  min-width: 120px;
  align-items: center;
  text-align: center;
  padding: 8px 18px;
}

.panel-footer-hint {
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #7f7b6e;
}

/* ─────────────────────────── 5.4 · AJUSTES ──────────────────────────── */

.settings-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vh, 18px) 24px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 162, 74, 0.4) transparent;
}

.settings-grid::-webkit-scrollbar {
  width: 6px;
}

.settings-grid::-webkit-scrollbar-thumb {
  background: rgba(216, 162, 74, 0.35);
  border-radius: 3px;
}

.setting {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setting--full {
  grid-column: 1 / -1;
}

.setting--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.setting--note {
  padding: 8px 10px;
  border-left: 2px solid rgba(216, 162, 74, 0.5);
  background: linear-gradient(90deg, rgba(216, 162, 74, 0.08), transparent);
}

.setting-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.setting-label {
  font-size: clamp(9px, 0.68vw, 10.5px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ded3bd;
}

.setting-value {
  font-family: var(--font-num);
  font-size: 9px;
  color: #f0d8a2;
  white-space: nowrap;
}

.setting-hint {
  margin: 0;
  font-size: 8px;
  line-height: 1.45;
  color: #77776c;
}

.note-kicker {
  display: block;
  margin-bottom: 2px;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c9a45c;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 2px;
  border-radius: 4px;
  background: #060b0f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}

.segment {
  padding: 7px 4px;
  border-radius: 2px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8e897b;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.segment:hover {
  color: #e8dcc4;
  background: rgba(255, 255, 255, 0.04);
}

.segment.is-active {
  color: #171006;
  background: linear-gradient(180deg, #f0d8a2, #c6973f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 4px rgba(0, 0, 0, 0.5);
}

.menus input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    90deg,
    #d8a24a 0%,
    #d8a24a var(--fill, 50%),
    #0a1015 var(--fill, 50%),
    #0a1015 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}

.menus input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff3d2, #d8a24a 55%, #7a5620);
  border: 1px solid #1a1206;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 8px rgba(216, 162, 74, 0.4);
}

.menus input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff3d2, #d8a24a 55%, #7a5620);
  border: 1px solid #1a1206;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 22px;
  border-radius: 11px;
  background: #060b0f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
  transition: background var(--t-med), border-color var(--t-med);
}

.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #7c8590, #3a4249);
  box-shadow: 0 1px 3px #000;
  transition: transform var(--t-med) var(--ease-out), background var(--t-med);
}

.switch.is-on {
  background: linear-gradient(180deg, #4a3414, #1c1308);
  border-color: rgba(216, 162, 74, 0.6);
}

.switch.is-on .switch-thumb {
  transform: translateX(19px);
  background: linear-gradient(180deg, #ffe9bb, #d8a24a);
  box-shadow: 0 0 8px rgba(216, 162, 74, 0.6);
}

.select {
  width: 100%;
  padding: 7px 9px;
  border-radius: 3px;
  font-family: var(--font-ui);
  font-size: 9.5px;
  color: #e3d8c2;
  background: #060b0f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

.select:focus {
  border-color: rgba(244, 221, 166, 0.6);
}

.select option {
  background: #0a1118;
  color: #e3d8c2;
}

/* ─────────────────────────── 5.5 · AYUDA ────────────────────────────── */

.help-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vh, 22px) 34px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 162, 74, 0.4) transparent;
}

.help-grid::-webkit-scrollbar {
  width: 6px;
}

.help-grid::-webkit-scrollbar-thumb {
  background: rgba(216, 162, 74, 0.35);
  border-radius: 3px;
}

.help-section {
  min-width: 0;
}

.help-title {
  margin: 0 0 6px;
  padding-bottom: 4px;
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d8b56c;
  border-bottom: 1px solid rgba(216, 162, 74, 0.2);
}

.help-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.help-row {
  display: grid;
  grid-template-columns: minmax(84px, auto) 1fr;
  gap: 8px;
  align-items: baseline;
}

.help-row dt {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.help-row dd {
  margin: 0;
  font-size: clamp(8.5px, 0.62vw, 9.5px);
  line-height: 1.4;
  color: #a9a291;
}

/* ─────────────────────── 5.6 · VICTORIA / DERROTA ───────────────────── */

.result-panel {
  position: relative;
  width: min(680px, 93vw);
  padding: clamp(20px, 3.4vh, 38px);
  text-align: center;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(22, 29, 36, 0.94), rgba(6, 10, 14, 0.975));
  border: 1px solid rgba(216, 162, 74, 0.42);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.result-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(216, 162, 74, 0.2), transparent 58%),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.35));
}

.result-panel::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(216, 162, 74, 0.14);
  border-radius: 6px;
  pointer-events: none;
}

.result-panel--defeat {
  border-color: rgba(176, 92, 78, 0.45);
}

.result-panel--defeat::before {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(176, 66, 52, 0.2), transparent 58%),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.4));
}

.result-medal {
  position: relative;
  width: clamp(80px, 13vh, 124px);
  aspect-ratio: 1;
  margin: 0 auto 8px;
}

.result-medal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(244, 221, 166, 0.75) 40deg,
    transparent 100deg,
    rgba(216, 162, 74, 0.3) 200deg,
    transparent 300deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: spin 30s linear infinite;
}

.result-medal::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(216, 162, 74, 0.28);
}

.result-medal-art {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #2c3a48, #0a1118 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -8px 22px #000,
    0 0 34px rgba(216, 162, 74, 0.25);
}

.result-medal-art::before {
  content: "";
  position: absolute;
  inset: 28%;
  transform: rotate(45deg);
  border: 1px solid #e6c78a;
  background: linear-gradient(135deg, rgba(216, 162, 74, 0.4), transparent 65%);
  box-shadow: 0 0 14px rgba(216, 162, 74, 0.35);
}

.result-panel--defeat .result-medal-art {
  background: radial-gradient(circle at 40% 30%, #3a2422, #0c0909 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -8px 22px #000,
    0 0 30px rgba(176, 66, 52, 0.22);
}

.result-panel--defeat .result-medal-art::before {
  border-color: #b87462;
  background: linear-gradient(135deg, rgba(176, 66, 52, 0.4), transparent 65%);
  box-shadow: 0 0 14px rgba(176, 66, 52, 0.35);
}

.result-kicker {
  display: block;
  font-size: clamp(6.5px, 0.52vw, 8px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c9a45c;
}

.result-title {
  margin: 4px 0 6px;
  font-family: var(--font-cond);
  font-size: clamp(40px, 6.6vw, 86px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(180deg, #fff2d0, #e7c07a 45%, #b07b2f 80%, #eed69d);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5)) drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
}

.result-panel--defeat .result-title {
  background: linear-gradient(180deg, #f3d3cc, #c96a58 50%, #7d2b22);
  -webkit-background-clip: text;
  background-clip: text;
}

.result-sub {
  margin: 0 0 18px;
  font-size: clamp(9px, 0.7vw, 11px);
  line-height: 1.5;
  color: #a9a291;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.result-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 6px;
  background: rgba(6, 10, 14, 0.72);
  text-align: center;
}

.result-stat-value {
  font-family: var(--font-cond);
  font-size: clamp(14px, 1.8vw, 22px);
  font-weight: 700;
  color: #f2e4c6;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.result-stat-label {
  font-size: 6.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #858070;
}

.result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.result-actions .menu-btn {
  width: auto;
  min-width: 168px;
  align-items: center;
  text-align: center;
  padding: 10px 18px;
}

/* ─────────────────────────── 5.7 · CRÉDITOS ─────────────────────────── */

.credits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin: 16px 0 20px;
  text-align: left;
}

.credit {
  min-width: 0;
}

.credit-role {
  display: block;
  margin-bottom: 2px;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c9a45c;
}

.credit-name {
  font-size: clamp(9px, 0.7vw, 11px);
  line-height: 1.4;
  color: #ddd3bf;
}

.credits-legal {
  margin: 0 0 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 8px;
  line-height: 1.55;
  color: #7e7a6e;
  text-align: left;
}

/* ──────────────────────────────────────────────────────────────────────
   6 · DEMO DE INTERFAZ
   ────────────────────────────────────────────────────────────────────── */

.ui-demo {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #05080b;
}

.demo-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 62% 38%, rgba(120, 92, 48, 0.22), transparent 55%),
    radial-gradient(ellipse at 30% 20%, rgba(42, 70, 96, 0.28), transparent 60%),
    linear-gradient(180deg, #0a121a 0%, #0b1016 45%, #05080b 100%);
}

.demo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 90px);
  -webkit-mask: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 78%);
  mask: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 78%);
}

.demo-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--dock-h);
  height: 40vh;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(216, 162, 74, 0.16), transparent 62%),
    linear-gradient(180deg, transparent, rgba(9, 14, 20, 0.5));
  pointer-events: none;
}

.demo-header {
  position: absolute;
  left: 22px;
  top: calc(var(--top-h) + 64px);
  z-index: 15;
  pointer-events: none;
  max-width: 420px;
}

.demo-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(216, 162, 74, 0.75);
}

.demo-title {
  margin: 0;
  font-family: var(--font-cond);
  font-size: clamp(22px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(238, 228, 208, 0.9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.demo-sub {
  margin: 6px 0 0;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(180, 170, 150, 0.6);
}

.demo-bar {
  position: fixed;
  right: 16px;
  top: 50%;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 104px;
  padding: 5px;
  transform: translateY(-50%);
  border-radius: 8px;
  background: rgba(5, 9, 13, 0.88);
  border: 1px solid rgba(216, 162, 74, 0.26);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.demo-bar-label {
  padding: 2px 6px 5px;
  font-size: 6px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8a8473;
  text-align: center;
}

.demo-btn {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: #a9a291;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.demo-btn:hover {
  color: #f5e6c4;
  background: rgba(255, 255, 255, 0.06);
}

.demo-btn.is-active {
  color: #171006;
  background: linear-gradient(180deg, #f0d8a2, #c6973f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.demo-picks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  pointer-events: auto;
}

.demo-picks-label {
  margin-right: 3px;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a8473;
}

.demo-picks .demo-btn {
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 7.5px;
  color: #b6ac96;
  background: rgba(6, 10, 14, 0.72);
  border: 1px solid rgba(216, 162, 74, 0.24);
}

.demo-picks .demo-btn:hover {
  color: #f5e6c4;
  border-color: rgba(216, 162, 74, 0.55);
  background: rgba(216, 162, 74, 0.08);
}

.demo-picks .demo-btn.is-active {
  color: #171006;
  background: linear-gradient(180deg, #f0d8a2, #c6973f);
  border-color: #f0d8a2;
}

.demo-status {
  position: fixed;
  right: 18px;
  top: calc(var(--top-h) + 12px);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-num);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: rgba(180, 172, 152, 0.55);
  pointer-events: none;
}

.demo-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #62d47a;
  box-shadow: 0 0 8px rgba(98, 212, 122, 0.7);
  animation: idlePulse 2.4s ease-in-out infinite;
}

.demo-toast {
  position: fixed;
  left: 18px;
  bottom: calc(var(--dock-h) + 62px);
  z-index: 45;
  max-width: 320px;
  padding: 6px 12px;
  border-radius: 3px;
  background: rgba(6, 10, 14, 0.9);
  border-left: 2px solid var(--ui-gold);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  font-size: 8.5px;
  line-height: 1.4;
  color: #bcb4a2;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}

.demo-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.is-clean .demo-header,
body.is-clean .demo-bar,
body.is-clean .demo-status,
body.is-clean .demo-toast {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────
   7 · ANIMACIONES
   ────────────────────────────────────────────────────────────────────── */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes eraSpin {
  to { transform: rotate(360deg); }
}

@keyframes eraReady {
  0%, 100% {
    border-color: rgba(216, 162, 74, 0.5);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 241, 208, 0.16);
  }
  50% {
    border-color: rgba(255, 236, 190, 0.95);
    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.55),
      0 0 28px rgba(216, 162, 74, 0.38),
      inset 0 1px 0 rgba(255, 241, 208, 0.28);
  }
}

@keyframes resBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes resDelta {
  0% { opacity: 0; transform: translateY(4px); }
  18% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(-7px); }
}

@keyframes popWarn {
  0%, 100% { box-shadow: var(--bevel), 0 0 0 rgba(224, 90, 72, 0); }
  50% { box-shadow: var(--bevel), 0 0 18px rgba(224, 90, 72, 0.4); }
}

@keyframes idlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 193, 90, 0.35); }
  50% { box-shadow: 0 0 0 4px rgba(232, 193, 90, 0.05), 0 0 16px rgba(232, 193, 90, 0.35); }
}

@keyframes hpCritical {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

@keyframes portraitScan {
  0% { background-position: 0 -120%; }
  100% { background-position: 0 120%; }
}

@keyframes alertIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes alertOut {
  to { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

@keyframes alertThrob {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 rgba(255, 90, 70, 0); }
  50% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 22px rgba(255, 90, 70, 0.28); }
}

@keyframes alertRing {
  0% { opacity: 0.65; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes msgOut {
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes cmdFire {
  0% { opacity: 0; transform: scale(0.7); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.15); }
}

@keyframes queueIn {
  from { opacity: 0; transform: translateX(9px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes barStripes {
  from { transform: translateX(-14px); }
  to { transform: translateX(0); }
}

@keyframes screenIn {
  from { opacity: 0; transform: translateY(12px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes titleGlow {
  0%, 100% { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 16px 34px rgba(0, 0, 0, 0.65)) brightness(1); }
  50% { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 18px 40px rgba(0, 0, 0, 0.6)) brightness(1.07); }
}

/* ──────────────────────────────────────────────────────────────────────
   7.1 · RESPONSIVE
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 1240px) {
  :root {
    --mini: clamp(180px, 20vh, 220px);
    --cmd-w: clamp(220px, 18vw, 260px);
  }

  .res-name {
    display: none;
  }

  .res-val {
    font-size: clamp(14px, 1.4vw, 18px);
  }

  .chip-cap {
    display: none;
  }

  .chip--clock .clock-val {
    transform: none;
  }

  .dock-inner {
    grid-template-columns:
      minmax(280px, 1fr)
      var(--cmd-w)
      minmax(calc(var(--mini) + 150px), 1fr);
    gap: 8px;
    padding: 8px 10px 10px;
  }

  .sel-panel {
    padding: 8px 10px;
  }

  .sel-desc {
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 1020px) {
  :root {
    --mini: 168px;
    --dock-h: calc(var(--mini) + 56px);
    --cmd-w: 208px;
  }

  .hud-banner {
    display: none;
  }

  .dock-inner {
    grid-template-columns: minmax(240px, 1fr) var(--cmd-w) calc(var(--mini) + 120px);
  }

  .queue-panel {
    display: none;
  }

  .hud-controls .speed-group {
    display: none;
  }

  .sel-stats {
    display: none;
  }

  .menu-timeline {
    gap: 4px;
  }

  .timeline-name {
    display: none;
  }

  .settings-grid,
  .help-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .result-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .menus {
    --mini: 150px;
  }

  .menu-actions {
    width: min(300px, 88vw);
  }

  .menu-title {
    font-size: clamp(38px, 11vw, 72px);
  }

  .menu-timeline {
    display: none;
  }

  .menu-footer {
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
  }

  .panel-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .credits-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .result-title {
    font-size: clamp(34px, 11vw, 62px);
  }

  .demo-bg {
    display: none;
  }
}

/* 4K / pantallas grandes: la interfaz crece de forma coherente. */
@media (min-width: 2400px) {
  :root {
    --top-h: 78px;
    --mini: 316px;
    --cmd-w: 380px;
  }

  .dock-inner {
    max-width: 2080px;
    gap: 16px;
    padding: 14px 20px 16px;
  }

  .res-name {
    font-size: 11px;
  }

  .res-val {
    font-size: 27px;
  }

  .era-name {
    font-size: 21px;
  }

  .sel-name {
    font-size: 27px;
  }

  .sel-role {
    font-size: 10px;
  }

  .stat-k {
    font-size: 9px;
  }

  .stat-v {
    font-size: 13px;
  }

  .sel-desc {
    font-size: 13px;
    -webkit-line-clamp: 3;
  }

  .cmd-key {
    font-size: 10px;
    min-width: 15px;
  }

  .cmd-cost {
    font-size: 10px;
  }

  .cmd-tab {
    font-size: 9px;
    padding: 5px 9px;
  }

  .queue-panel {
    max-width: 480px;
    padding: 12px 14px;
  }

  .queue-item {
    max-height: 54px;
  }

  .queue-label {
    font-size: 11px;
  }

  .queue-pct {
    font-size: 9px;
  }

  .menu-title {
    font-size: 190px;
  }

  .menu-actions {
    width: 420px;
  }

  .menu-btn-label {
    font-size: 21px;
  }

  .menu-btn-sub {
    font-size: 10px;
  }

  .menu-panel--wide {
    width: min(1120px, 90vw);
  }

  .result-panel {
    width: min(860px, 90vw);
  }
}

/* Pantallas bajas: el HUD se compacta para no comerse el campo de batalla. */
@media (max-height: 720px) {
  :root {
    --mini: 186px;
    --top-h: 46px;
  }

  .menu-title {
    font-size: clamp(40px, 11vh, 80px);
  }

  .menu-emblem-wrap {
    display: none;
  }

  .menu-actions {
    margin-top: 10px;
  }

  .menu-timeline {
    margin-top: 12px;
  }

  .loading-tip {
    margin-top: 12px;
  }
}

/* Accesibilidad: menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .era-tick,
  .era-clock.is-ready,
  .portrait-scan,
  .alert--attack,
  .alert--attack .alert-pulse,
  .loading-glyph,
  .loading-fill::after,
  .menu-emblem-ring,
  .result-medal::before,
  .demo-status-dot,
  .menu-title {
    animation: none !important;
  }

  .menus,
  .hud-tooltip,
  .menu-screen,
  .alert,
  .hud-msg {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Alto contraste del sistema. */
@media (forced-colors: active) {
  .hud-gold,
  .ui-gold {
    forced-color-adjust: auto;
  }

  .cmd-slot.is-disabled::after {
    background: none;
  }
}


/* ── Legibilidad (pasada de contraste) ──────────────────────────────────
   Los textos secundarios usaban grises cálidos muy próximos al fondo de
   pizarra; se suben dos pasos para que se lean sin romper la paleta. */
.cmd-hover,
.queue-empty,
.queue-empty-title,
.queue-empty-hint,
.sel-sub,
.sel-hint,
.stat-label,
.stat-key,
.res-name,
.era-caption,
.mini-caption,
.hotkey-badge {
  color: #b8b1a0;
}

.cmd-hover,
.queue-empty-hint,
.sel-sub {
  opacity: 0.92;
}


/* ── Resumen de imperio (panel sin selección) ─────────────────────────── */
.empire-summary {
  margin-top: 10px;
  display: grid;
  gap: 6px;
  max-width: 420px;
}
.empire-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b8b1a0;
}
.empire-era-pct { color: #e2c07a; font-weight: 700; }
.empire-track {
  height: 5px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(216, 162, 74, 0.35);
  border-radius: 3px;
  overflow: hidden;
}
.empire-track > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #8a6a2a, #e2c07a);
  transition: width 0.25s ease;
}
.empire-sub { font-size: 10px; color: #9aa3b2; }
.empire-sub b { color: #cfd6e2; font-weight: 600; }
.empire-goals {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.empire-goal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #c3cbd8;
}
.empire-goal b { margin-left: auto; color: #8f98a8; font-weight: 600; }
.empire-check {
  width: 10px;
  height: 10px;
  border: 1px solid #6d7688;
  border-radius: 2px;
  flex: none;
}
.empire-goal.is-done .empire-check { background: #7fbf7a; border-color: #7fbf7a; }
.empire-goal.is-done { color: #93b090; }

.empire-tip {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: #93a0b4;
  font-style: italic;
}

/* Maravilla en pie: cuenta atrás de victoria. */
.chip--wonder { border-color: rgba(255, 214, 120, 0.55); }
.chip--wonder .wonder-val { color: #ffd678; font-variant-numeric: tabular-nums; }
.chip--wonder.is-enemy { border-color: rgba(255, 120, 100, 0.6); }
.chip--wonder.is-enemy .wonder-val { color: #ff7a64; }

/* Puntuación de la partida en el panel de imperio. */
.empire-score { display: flex; align-items: baseline; gap: 6px; font-size: 11px; opacity: 0.85; margin-top: 4px; }
.empire-score b { font-variant-numeric: tabular-nums; }
.empire-score .score-vs { opacity: 0.5; }

/* Tutorial guiado: panel flotante que no bloquea la partida. */
.tutorial-panel {
  position: fixed; left: 50%; bottom: 214px; transform: translateX(-50%);
  width: min(520px, 60vw); padding: 14px 16px 12px;
  background: linear-gradient(180deg, rgba(12, 17, 24, 0.94), rgba(8, 12, 17, 0.96));
  border: 1px solid rgba(214, 178, 106, 0.32); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  z-index: 60; pointer-events: auto;
}
.tutorial-head { display: flex; align-items: center; justify-content: space-between; }
.tutorial-step { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #8fa3b8; }
.tutorial-step b { color: #f0d090; }
.tutorial-skip {
  background: none; border: 1px solid rgba(255,255,255,0.16); color: #b8c6d4;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; cursor: pointer;
}
.tutorial-title { margin: 8px 0 4px; font-size: 15px; color: #f4e9d0; font-weight: 600; }
.tutorial-text { margin: 0; font-size: 12px; line-height: 1.5; color: #c2ccd8; }
.tutorial-progress { margin-top: 10px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.tutorial-progress i { display: block; height: 100%; background: linear-gradient(90deg, #b8862f, #f0d090); transform-origin: left; transition: transform 0.3s ease; }

/* Reasignación de teclas. */
.keys-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.keys-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #c2ccd8; }
.key-btn {
  min-width: 74px; padding: 3px 8px; border-radius: 5px; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  color: #f0d090; font-size: 11px; letter-spacing: 0.06em;
}
.key-btn.is-capturing { border-color: #f0d090; background: rgba(240, 208, 144, 0.16); }