/* ===== Sobreforjado — estilo 16-bit SNES ===== */
/* Paleta unica del juego. Su espejo en el lienzo es js/render/palette.js: si
   tocas un tono aqui, tocalo tambien alli.
   La direccion es FORJA CALIDA + NOCHE MISTICA. Los paneles son carbon
   azulado, casi negro, para que el oro de los bordes y los colores del mundo
   destaquen contra ellos; el marron de la interfaz se fue del todo, porque
   competia con la madera de la escena en vez de enmarcarla. */
:root {
  /* -- Interfaz -- */
  --bg: #090B10;
  --panel: #161A22;
  --panel-alt: #202633;
  --panel-dark: #0D1118;
  --shadow-deep: #090A0D;
  --black-warm: #100C09;      /* hueco oscuro junto al fuego */
  --black-blue: #0D121A;      /* hueco oscuro de piedra y noche */

  /* -- Oro y laton (bordes y titulos) -- */
  --border-dark: #704018;
  --border-mid: #B96B20;
  --border-light: #E89B28;
  --gold: #FFD044;
  --gold-light: #FFE37A;
  --gold-hi: #FFF0A6;

  /* -- Texto -- */
  --text: #F4E3C1;
  --text-dim: #A59478;
  --text-faint: #837768;
  --accent: #FF9B28;

  /* -- Madera -- */
  --wood-dark: #48210E;
  --wood: #804018;
  --wood-light: #A7541C;

  /* -- Piedra fria -- */
  --stone-dark: #28364A;
  --stone: #3D4D63;
  --stone-light: #596B82;

  /* -- Fuego -- */
  --fire-red: #BD2C16;
  --fire-orange: #FF7620;
  --fire-gold: #FFD24A;

  /* -- Luz fria y magia -- */
  --cold-blue: #145CA8;
  --cold-cyan: #16C7EE;

  /* -- Textil y estados -- */
  --burgundy: #841F32;
  --good: #68CF56;
  --bad: #F05242;

  /* -- Rareza de items (ficha de item). El épico es PAL.purpleHi. -- */
  --rarity-common: var(--text-dim);
  --rarity-uncommon: var(--good);
  --rarity-rare: var(--cold-cyan);
  --rarity-epic: #B28EE0;
  --rarity-legendary: var(--gold);

  /* -- Tinta sobre pergamino (Registro del HUD de la forja) -- */
  --ink: #3A2412;
  --ink-dim: #6B5436;
  --ink-good: #2E6A1E;
  --ink-bad: #9C2A18;
  --ink-gold: #86500A;
  --ink-rule: #B79A6E;
  --ink-day: #7A4418;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background:
    radial-gradient(ellipse at 50% 35%, #131A26 0%, var(--bg) 55%, #05070B 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: "Courier New", monospace;
  color: var(--text);
  image-rendering: pixelated;
}

#game {
  /* Medidas del HUD de la forja. El lienzo va siempre en --scene-top: las
     barras se le superponen, así que cambiarlas no mueve la escena. */
  --hud-top-h: 48px;
  --hud-bottom-h: 40px;
  --scene-top: 46px;
  /* Un píxel de los PNG de la barra inferior (su tramo mide 70 de alto). */
  --hud-bar-px: calc(var(--hud-bottom-h) / 70);
  width: 1024px;
  height: 768px;
  background: var(--panel-dark);
  display: flex;
  flex-direction: column;
  outline: 4px solid #000;
  box-shadow: 0 0 0 8px var(--border-dark), 0 0 40px #000;
  position: relative;
  overflow: clip; /* los extremos de las barras asoman unos píxeles hacia fuera */
}

#game.hidden {
  display: none;
}

/* Scanlines CRT sutiles sobre todas las pantallas (toque SNES). */
#game::after,
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.09) 0px,
    rgba(0, 0, 0, 0.09) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 80;
}

/* Fundido a negro al dormir (fin de día / cama). */
#fade-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
  z-index: 50;
}

/* ---- Escenas narrativas (ver js/cutscenes/) ----
   Dos cosas, y ninguna reconstruye nada:

   1. El cartel del dia. Por ENCIMA del fundido (z-index 51 contra 50), que es
      justo lo que hace falta: aparece cuando la pantalla ya esta negra.
   2. El HUD escondido. La clase la pone/quita setHudHidden() en un solo sitio
      (#game) y aqui se apagan de una pieza la barra de arriba, los cajones y
      la barra de abajo. El pointer-events es tan importante como la opacidad:
      sin el se podria pulsar Guardar o abrir el Inventario a mitad de escena
      aunque no se vieran. Al quitar la clase, el HUD vuelve tal cual estaba:
      no se ha desmontado nada. */
#cutscene-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 51;
  pointer-events: none;
  font-family: "Courier New", monospace;
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 10px;
  color: var(--gold);
  text-shadow: 3px 3px 0 #000;
  opacity: 0;
  transition: opacity 320ms ease;
}
#cutscene-title.is-on { opacity: 1; }

#game.is-cutscene #topbar,
#game.is-cutscene #drawers,
#game.is-cutscene #bottombar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease;
}

/* ---- Pantalla de carga (ver js/loadingScreen.js) ----
   A pantalla completa y por encima de todo: tapa también el fondo de la página
   alrededor del juego, sea cual sea el tamaño de la ventana. */
#loading-screen {
  --loading-logo-w: clamp(120px, 15vw, 200px);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 1;
  transition: opacity var(--loading-fade, 650ms) ease;
}
#loading-screen.hidden { display: none; }
#loading-screen.is-fading { opacity: 0; }

.loading-text {
  color: var(--text);
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 4px;
  text-shadow: 2px 2px 0 #000;
}
/* Los puntos se encienden de uno en uno y ocupan su sitio apagados: el texto no se mueve. */
.loading-dots span { opacity: 0; animation: 1.6s steps(1, end) infinite; }
.loading-dots span:nth-child(1) { animation-name: loadingDot1; }
.loading-dots span:nth-child(2) { animation-name: loadingDot2; }
.loading-dots span:nth-child(3) { animation-name: loadingDot3; }
@keyframes loadingDot1 { 25%, 100% { opacity: 1; } }
@keyframes loadingDot2 { 50%, 100% { opacity: 1; } }
@keyframes loadingDot3 { 75%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .loading-dots span { animation: none; opacity: 1; }
}

/* El PNG trae margen transparente: 46px a la derecha y 292px abajo sobre 1491 de
   ancho. Se descuenta para que el dibujo quede a 24px de la esquina. */
.loading-logo {
  position: absolute;
  width: var(--loading-logo-w);
  right: calc(24px - var(--loading-logo-w) * 46 / 1491);
  bottom: calc(24px - var(--loading-logo-w) * 292 / 1491);
  image-rendering: pixelated;
}

/* Pantalla de Game Over (impuestos impagos: se pierde la forja). */
#gameover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 6, 12, 0.90);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}
#gameover-overlay.hidden { display: none; }
.gameover-box {
  width: 420px;
  padding: 24px 28px;
  text-align: center;
  border: 9px solid transparent;
  border-image: url('../imgs/GUIElements/basic_bar.PNG') 30 / 9px / 0 stretch;
  background: var(--panel-dark);
}
.gameover-title {
  font-size: 32px;
  font-weight: bold;
  color: var(--bad);
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 4px;
  margin-bottom: 14px;
  animation: gameoverPulse 1.6s ease-in-out infinite;
}

@keyframes gameoverPulse {
  0%, 100% { text-shadow: 2px 2px 0 #000, 0 0 6px rgba(240, 82, 66, 0.3); }
  50%      { text-shadow: 2px 2px 0 #000, 0 0 22px rgba(240, 82, 66, 0.75); }
}
#gameover-reason { color: var(--text); margin-bottom: 18px; line-height: 1.4; }

/* ---- HUD de la forja (imgs/ui/forgeHUD/) ----
   Barras, marcos y botones son capas POR ENCIMA del lienzo: ninguna ocupa sitio
   en el flujo, así que abrir o cerrar algo nunca mueve ni encoge la escena.
   Los PNG son pixel-art dibujado muy grande: se reducen sin suavizado, y los
   cortes 9-slice van en píxeles del PNG original. */

/* -- Barra superior --
   Tres piezas: el tramo central se repite y los extremos se escalan para que
   su franja oscura (filas 78-280 de 356 a la izquierda, 98-294 de 366 a la
   derecha) caiga a la altura de la del tramo (57-227 de 271). Por eso los
   extremos asoman unos píxeles por arriba y por abajo. */
.hud-topbar {
  --h: var(--hud-top-h);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 42;
  height: var(--h);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--h) * 0.62) 0 calc(var(--h) * 0.36);
  background: url('../imgs/ui/forgeHUD/topbar_tile.png') left top / auto 100% repeat-x;
  image-rendering: pixelated;
  font-size: 15px;
  font-weight: bold;
}
.hud-topbar__cap {
  position: absolute;
  background: center / 100% 100% no-repeat;
  pointer-events: none;
}
.hud-topbar__cap--left {
  left: 0;
  top: calc(var(--h) * -0.0319);
  width: calc(var(--h) * 3.3975);
  height: calc(var(--h) * 1.1056);
  background-image: url('../imgs/ui/forgeHUD/topbar_left.png');
}
.hud-topbar__cap--right {
  right: 0;
  top: calc(var(--h) * -0.1033);
  width: calc(var(--h) * 3.8087);
  height: calc(var(--h) * 1.1714);
  background-image: url('../imgs/ui/forgeHUD/topbar_right.png');
}
.hud-topbar__stats,
.hud-topbar__buttons { position: relative; display: flex; align-items: center; }
.hud-topbar__stats { gap: calc(var(--h) * 0.24); min-width: 0; }
.hud-topbar__buttons { gap: calc(var(--h) * 0.08); margin-left: auto; }

.hud-topbar .stat { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-shadow: 1px 1px 0 #000; transition: filter 80ms steps(2, end); }
.hud-topbar .stat:hover { filter: brightness(1.2); }
.hud-topbar .stat b { color: var(--text); }
.hud-topbar .stat--day { justify-content: center; min-width: calc(var(--h) * 2.85); font-size: 17px; }
.hud-topbar .stat--day b { color: var(--gold); }
.hud-topbar .stat-ic { height: calc(var(--h) * 0.5); width: auto; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 #000); }

.hud-divider {
  flex: none;
  height: calc(var(--h) * 0.78);
  aspect-ratio: 82 / 491;
  background: url('../imgs/ui/forgeHUD/stat_divider.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

/* -- Botón cuadrado (square_button.png): los de la barra superior -- */
.hud-square-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--hud-top-h) * 0.76);
  aspect-ratio: 777 / 766;
  padding: 0;
  border: 0;
  background: url('../imgs/ui/forgeHUD/square_button.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
  transition: filter 80ms steps(2, end);
}
.hud-square-btn img { width: 56%; height: 56%; object-fit: contain; image-rendering: auto; filter: drop-shadow(1px 1px 0 #000); }
.hud-square-btn:hover { filter: brightness(1.18); }
.hud-square-btn:active { transform: translateY(2px); filter: brightness(0.9); }
.hud-square-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.hud-square-btn:disabled { cursor: default; transform: none; filter: grayscale(0.7) brightness(0.7); }

/* ---- Escena ----
   El lienzo mide 1024x696 y va siempre en --scene-top: la cámara usa su tamaño
   como ventana sobre el mundo. Si cambias el tamaño, cámbialo también en los
   atributos width/height del <canvas> de index.html. */
#middle { flex: none; margin-top: var(--scene-top); }

#scene {
  width: 1024px;
  height: 696px;
  image-rendering: pixelated;
  display: block;
}

/* -- Barra inferior --
   Las tres piezas comparten escala (--px = un píxel de PNG) para que remaches
   y flejes midan lo mismo. El tramo (526x70) llena la altura; los extremos
   (300x74) tienen su borde superior en la fila 3, así que suben 3 filas y sus
   flejes caen sobre los del tramo. El tramo va solo entre los extremos: debajo
   se vería por las esquinas transparentes de la punta. Empieza pegado al
   extremo izquierdo y los remaches dobles de cada unión son juntas de tabla. */
.hud-bottombar {
  --h: var(--hud-bottom-h);
  --px: var(--hud-bar-px);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 39;
  height: var(--h);
  image-rendering: pixelated;
  pointer-events: none;
}
.hud-bottombar::before {
  content: '';
  position: absolute;
  inset: 0 calc(300 * var(--px));
  /* Desfase de 15.5 columnas: centro del margen (7-24) en el que ningún
     remache del tramo asoma a medias por el borde de los separadores. */
  background: url('../imgs/ui/forgeHUD/bottombar_tile.png') calc(-15.5 * var(--px)) top / auto 100% repeat-x;
}
/* Separadores (bottom_separator.png, 52x200) sobre las uniones de los extremos
   con el tramo, para que se lea como una sola barra. Escalados para que sus
   remaches (filas 26 y 164) queden en línea con los de los flejes del tramo
   (filas 6 y 61): un píxel del separador vale 0.4 --px. Cada uno se corre
   2.3 --px hacia su extremo: así tapa entero el remache del extremo junto a la
   unión sin dejar de cubrir la junta. */
.hud-bottombar::after {
  --sep-w: calc(20.8 * var(--px));
  --sep-x: calc(297.7 * var(--px) - var(--sep-w) / 2);
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-4.66 * var(--px));
  height: calc(80 * var(--px));
  background:
    url('../imgs/ui/forgeHUD/bottom_separator.png') left var(--sep-x) top 0 / var(--sep-w) 100% no-repeat,
    url('../imgs/ui/forgeHUD/bottom_separator.png') right var(--sep-x) top 0 / var(--sep-w) 100% no-repeat;
}
.hud-bottombar__cap {
  position: absolute;
  top: calc(-3 * var(--px));
  width: calc(300 * var(--px));
  height: calc(74 * var(--px));
  background: center / 100% 100% no-repeat;
}
.hud-bottombar__cap--left { left: 0; background-image: url('../imgs/ui/forgeHUD/bottombar_left.png'); }
.hud-bottombar__cap--right { right: 0; background-image: url('../imgs/ui/forgeHUD/bottombar_right.png'); }

/* ---- Cajones (ver js/render/drawers.js) ----
   Capa sobre el escenario, por debajo del fundido a negro y del Game Over.
   Información sale desde el borde derecho; Inventario y Registro, desde la
   barra inferior. */
#drawers {
  --drawer-speed: 180ms;
  position: absolute;
  top: var(--hud-top-h);
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 40;
}

/* -- Marco de panel: panel_frame.png en 9-slice --
   Esquinas de 210px de PNG, con el herraje y el primer remache enteros. Los
   lados de arriba y abajo solo son madera y se estiran; los laterales llevan
   remaches y se repiten. El centro del PNG es transparente: el fondo va en
   ::before, metido por debajo de la madera. */
.hud-panel {
  --frame: 26px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border: var(--frame) solid transparent;
  border-image: url('../imgs/ui/forgeHUD/panel_frame.png') 210 / var(--frame) / 0 stretch round;
  image-rendering: pixelated;
  color: var(--text);
  font-size: 13px;
}
.hud-panel::before {
  content: '';
  position: absolute;
  inset: calc(var(--frame) * -0.7);
  z-index: -1;
  background: var(--panel-dark);
}

/* Cabecera: panel_header.png en 9-slice, montada sobre el listón de arriba. */
.hud-panel__header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  margin: -12px -10px 6px;
  padding: 0 8px;
  border-style: solid;
  border-color: transparent;
  border-width: 8px 20px;
  border-image: url('../imgs/ui/forgeHUD/panel_header.png') 70 170 fill / 8px 20px stretch;
  image-rendering: pixelated;
  color: var(--gold);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
}
.hud-panel__header img { flex: none; width: auto; height: 22px; image-rendering: auto; filter: drop-shadow(1px 1px 0 #000); }
.hud-panel__header img.hud-ic { image-rendering: pixelated; }

.hud-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 6px 4px 2px;
}

/* Barra de desplazamiento de los paneles: raíl y tirador de la forja. */
.hud-scroll::-webkit-scrollbar { width: 10px; }
.hud-scroll::-webkit-scrollbar-track {
  background: url('../imgs/ui/forgeHUD/scrollbar_track.png') center / 6px 100% no-repeat;
}
.hud-scroll::-webkit-scrollbar-thumb {
  border-style: solid;
  border-color: transparent;
  border-width: 9px 0;
  border-image: url('../imgs/ui/forgeHUD/scrollbar_thumb.png') 170 0 160 fill / 9px 0 stretch;
  background: none;
}

/* -- Información (panel contextual) --
   El recorte mide panel + pestaña. Cerrado, el deslizador se corre el ancho
   del panel y dentro del juego solo queda la pestaña, en el borde derecho.
   Es overflow: clip y no hidden a propósito: applyMenuFocus() hace
   scrollIntoView sobre los botones del panel, y un contenedor con hidden sí
   se puede desplazar por código, así que asomaría el panel estando cerrado. */
.side-drawer {
  --side-w: 300px;
  --side-tab-w: 40px;
  --side-tab-h: calc((var(--side-tab-w) + 3px) * 1239 / 604); /* alto de la placa a su ancho */
  position: absolute;
  top: 6px;
  right: 0;
  bottom: calc(var(--hud-bottom-h) + 6px);
  width: calc(var(--side-w) + var(--side-tab-w));
  overflow: clip;
}
.side-slide {
  position: absolute;
  inset: 0;
  transform: translateX(var(--side-w));
  transition: transform var(--drawer-speed) steps(8, end);
}
.side-drawer.is-open .side-slide { transform: translateX(0); }
.side-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--side-w);
  pointer-events: auto;
  visibility: hidden;
  transition: visibility 0s linear var(--drawer-speed);
}
.side-drawer.is-open .side-panel { visibility: visible; transition: visibility 0s; }
/* Información y Construcción comparten el cajón: solo se ve la vista activa. */
.side-drawer[data-view="info"] .side-panel--build,
.side-drawer[data-view="build"] .side-panel--info { display: none; }

/* Pestaña "i": info_tab.png es una placa con bisagra. La bisagra (derecha del
   PNG) apoya en el canto del panel; la letra va aparte, centrada en la placa
   (columnas 13-465 de 604). */
.side-tab {
  position: absolute;
  left: 0;
  top: 38%;
  z-index: 1;
  width: calc(var(--side-tab-w) + 3px);
  aspect-ratio: 604 / 1239;
  padding: 0;
  border: 0;
  background: url('../imgs/ui/forgeHUD/info_tab.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
  pointer-events: auto;
  transition: filter 80ms steps(2, end);
}
.side-tab span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2%;
  width: 75%;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  text-shadow: 1px 1px 0 #000;
}
.side-tab:hover { filter: brightness(1.18); }
.side-tab:active span { transform: translate(1px, 1px); }
.side-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.side-tab[aria-expanded="true"] span { color: var(--gold-hi); }
/* Pestaña de Construcción: la misma placa, justo debajo de la de Información,
   con el martillo de MenuIcons en vez de la letra. */
.side-tab--build { top: calc(38% + var(--side-tab-h) + 6px); }
.side-tab span img {
  width: 22px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 #000);
}
.side-tab[aria-expanded="true"] span img { filter: brightness(1.3) drop-shadow(1px 1px 0 #000); }

/* -- Construcción: tarjetas del catálogo (ver js/render/buildPanel.js) -- */
.build-level { color: var(--text-dim); font-size: 11px; margin: 2px 0 6px; }
.build-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.build-filter {
  font-family: inherit;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--panel-dark);
  border: 1px solid var(--border-dark);
  box-shadow: 1px 1px 0 #000;
  padding: 3px 6px;
  cursor: pointer;
}
.build-filter:hover { color: var(--text); }
.build-filter.is-active { color: var(--gold); border-color: var(--border-mid); }
.build-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 2px 8px;
  padding: 6px;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-dark);
  box-shadow: 2px 2px 0 #000;
}
.build-card:hover { border-color: var(--border-mid); }
.build-card__icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: url('../imgs/ui/forgeHUD/inventory_slot.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.build-card__icon > img:first-child { max-width: 40px; max-height: 40px; image-rendering: pixelated; }
.build-card.is-locked .build-card__icon > img:first-child { filter: grayscale(0.7) brightness(0.35); }
.build-card__lock {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 #000);
}
.build-card__info { min-width: 0; }
.build-card__name { color: var(--gold); font-weight: bold; font-size: 12px; text-shadow: 1px 1px 0 #000; }
.build-card.is-locked .build-card__name { color: var(--text-dim); }
.build-card__desc { color: var(--text-dim); font-size: 10px; line-height: 1.25; margin: 1px 0 3px; }
.build-card__meta { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.build-card__meta .cost { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); font-weight: bold; }
.build-card__meta .cost img { width: 13px; height: 13px; image-rendering: pixelated; }
.build-card.is-poor .build-card__meta .cost { color: var(--bad); }
.build-card__lvl { color: var(--text-dim); }
.build-card__note { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 10px; font-weight: bold; color: var(--bad); }
.build-card__note img { width: 12px; image-rendering: pixelated; }
.build-card.is-maxed .build-card__note { color: var(--text-dim); }
.build-card__btn { grid-column: 1 / -1; justify-content: center; margin: 4px 0 0; }
.build-card__btn .btn-label { flex: none; }

/* Ficha al pasar el ratón por una tarjeta: el mismo lenguaje que los avisos de
   la barra superior (panel oscuro, borde claro y sombra dura). */
.build-tip {
  position: fixed;
  z-index: 120;
  max-width: 230px;
  padding: 8px 10px;
  background: var(--panel-dark);
  color: var(--text);
  border: 2px solid var(--border-light);
  box-shadow: 3px 3px 0 #000;
  font-size: 11px;
  pointer-events: none;
}
.build-tip__name { color: var(--gold); font-weight: bold; text-transform: uppercase; margin-bottom: 4px; }
.build-tip__desc { color: var(--text-dim); line-height: 1.3; margin-bottom: 6px; }
.build-tip__row { display: flex; justify-content: space-between; gap: 12px; }
.build-tip__row b { color: var(--text); }

/* -- Inventario y Registro --
   Cada panel vive en un .drawer-clip que termina justo encima de la barra
   inferior; cerrado, el panel baja su propia altura y el recorte lo esconde
   detrás de la barra. Su botón queda siempre en la barra. Son independientes
   y pueden estar abiertos a la vez: Inventario se ancla al borde izquierdo del
   juego y Registro al derecho, con el mismo margen, como sus botones. */
.drawer {
  --drawer-h: 400px;
  position: absolute;
  inset: 0;
}
#drawer-inventory { --drawer-left: 12px; --drawer-w: 340px; }
#drawer-log { --drawer-right: 12px; --drawer-w: 430px; }
.drawer.is-open { z-index: 1; }

.drawer-clip {
  position: absolute;
  left: var(--drawer-left, auto);
  right: var(--drawer-right, auto);
  bottom: var(--hud-bottom-h);
  width: var(--drawer-w);
  height: var(--drawer-h);
  overflow: hidden;
}
.drawer-panel {
  height: 100%;
  pointer-events: auto;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--drawer-speed) steps(8, end), visibility 0s linear var(--drawer-speed);
}
.drawer.is-open .drawer-panel {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--drawer-speed) steps(8, end), visibility 0s;
}

/* Botón de la barra inferior: bottom_button.png en 9-slice (laterales de 92px de PNG).
   Cada uno va centrado en el campo liso de su extremo de la barra: de donde
   acaba la punta (columna 34 del PNG del extremo) al borde del separador
   (columna 287.3 = 297.7 - 10.4, ver .hud-bottombar::after). Inventario se
   ancla a la izquierda y Registro a la derecha, así que si el juego cambia de
   ancho el tramo central absorbe la diferencia. Ese campo mide ~145px: el botón
   ocupa el campo menos 5px por lado (nunca más de 160) y cabe hasta "INVENTARIO". */
.drawer-tab {
  --tab-field-start: calc(34 * var(--hud-bar-px));
  --tab-field-w: calc(253.3 * var(--hud-bar-px));
  --tab-w: min(160px, calc(var(--tab-field-w) - 10px));
  --tab-inset: calc(var(--tab-field-start) + (var(--tab-field-w) - var(--tab-w)) / 2);
  position: absolute;
  bottom: calc((var(--hud-bottom-h) - 32px) / 2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--tab-w);
  height: 32px;
  padding: 0 6px;
  border-style: solid;
  border-color: transparent;
  border-width: 7px 8px;
  border-image: url('../imgs/ui/forgeHUD/bottom_button.png') 90 92 fill / 7px 8px stretch;
  background: none;
  image-rendering: pixelated;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: filter 80ms steps(2, end);
}
#drawer-inventory .drawer-tab { left: var(--tab-inset); }
#drawer-log .drawer-tab { right: var(--tab-inset); }
/* Donde se puede, ancho y margen en píxeles enteros para que el 9-slice no
   caiga entre píxeles. */
@supports (width: round(1.5px, 1px)) {
  .drawer-tab { --tab-w: round(down, min(160px, calc(var(--tab-field-w) - 10px)), 1px); }
  #drawer-inventory .drawer-tab { left: round(var(--tab-inset), 1px); }
  #drawer-log .drawer-tab { right: round(var(--tab-inset), 1px); }
}
.drawer-tab img { height: 20px; width: auto; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 #000); }
.drawer-tab:hover { filter: brightness(1.18); }
.drawer-tab:active { transform: translateY(2px); }
.drawer-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.drawer.is-open .drawer-tab { color: var(--gold-hi); filter: brightness(1.12); transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .side-slide,
  .drawer-panel,
  .drawer.is-open .drawer-panel { transition: none; }
}

/* ---- Ficha de item (ver js/render/itemInfoCard.js) ----
   Una sola ficha flotante en <body>. Va por encima del HUD y de los cajones
   (40) y por debajo del fundido a negro (50), el Game Over (60) y la carga. */
.item-ref { cursor: help; }
img.item-ref:hover { filter: brightness(1.3) drop-shadow(1px 1px 0 #000); }
.inv-row .item-ref:hover,
.ctx-info .item-ref:hover,
.btn small .item-ref:hover { color: var(--gold-light); }

.item-info-card {
  --iic-rarity: var(--rarity-common);
  --iic-pointer: 50%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 45;
  display: flex;
  width: min(292px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  border: 9px solid transparent;
  border-image: url('../imgs/GUIElements/basic_bar.PNG') 30 / 9px / 0 stretch;
  background: var(--panel-dark);
  box-shadow: 0 0 0 1px var(--shadow-deep), 4px 6px 0 rgba(0, 0, 0, 0.55);
  color: var(--text);
  font-family: "Courier New", monospace;
  font-size: 12px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.item-info-card[hidden],
.item-info-card [hidden] { display: none; }
.item-info-card.is-visible { opacity: 1; transform: none; }
.item-info-card.is-suspended { visibility: hidden; }
/* Vistazo al pasar el ratón (filas del mercader): la misma ficha, más estrecha
   y solo con cabecera y descripción. Aparece de golpe y deja pasar el ratón,
   para no estorbar el clic de compra que hay debajo. */
.item-info-card.is-peek {
  width: min(248px, calc(100vw - 24px));
  opacity: 1;
  transform: none;
  transition: none;
  pointer-events: none;
}
.item-info-card.is-peek .item-info-card__instance,
.item-info-card.is-peek .item-info-card__footer,
.item-info-card.is-peek .item-info-card__uses-wrap { display: none; }
.item-info-card[data-side="top"] { transform-origin: var(--iic-pointer) 100%; }
.item-info-card[data-side="bottom"] { transform-origin: var(--iic-pointer) 0; }
.item-info-card[data-side="right"] { transform-origin: 0 var(--iic-pointer); }
.item-info-card[data-side="left"] { transform-origin: 100% var(--iic-pointer); }
.item-info-card[data-rarity="uncommon"] { --iic-rarity: var(--rarity-uncommon); }
.item-info-card[data-rarity="rare"] { --iic-rarity: var(--rarity-rare); }
.item-info-card[data-rarity="epic"] { --iic-rarity: var(--rarity-epic); }
.item-info-card[data-rarity="legendary"] { --iic-rarity: var(--rarity-legendary); }
.item-info-card.is-swapping .item-info-card__body { animation: itemCardSwap 110ms ease-out; }
@keyframes itemCardSwap { from { opacity: 0.45; } to { opacity: 1; } }

/* Flecha: un rombo con dos cantos a la vista que monta sobre el marco. */
.item-info-card__pointer {
  position: absolute;
  z-index: 1;
  width: 12px;
  height: 12px;
  background: var(--panel-dark);
  border: 2px solid var(--border-mid);
  pointer-events: none;
}
.item-info-card[data-side="top"] .item-info-card__pointer {
  bottom: -17px; left: calc(var(--iic-pointer) - 17px);
  border-top-color: transparent; border-left-color: transparent; transform: rotate(45deg);
}
.item-info-card[data-side="bottom"] .item-info-card__pointer {
  top: -17px; left: calc(var(--iic-pointer) - 17px);
  border-bottom-color: transparent; border-right-color: transparent; transform: rotate(45deg);
}
.item-info-card[data-side="right"] .item-info-card__pointer {
  left: -17px; top: calc(var(--iic-pointer) - 17px);
  border-top-color: transparent; border-right-color: transparent; transform: rotate(45deg);
}
.item-info-card[data-side="left"] .item-info-card__pointer {
  right: -17px; top: calc(var(--iic-pointer) - 17px);
  border-bottom-color: transparent; border-left-color: transparent; transform: rotate(45deg);
}

.item-info-card__body {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 9px;
  border: 1px solid var(--border-dark);
  background: linear-gradient(to bottom, rgba(255, 227, 122, 0.05), transparent 40px), var(--panel-dark);
  box-shadow: inset 0 0 0 1px #000, inset 0 2px 0 rgba(255, 227, 122, 0.08);
}
/* Remaches en las cuatro esquinas del marco interior. */
.item-info-card__body::before {
  content: '';
  position: absolute;
  inset: 3px;
  pointer-events: none;
  background:
    linear-gradient(var(--border-mid), var(--border-mid)) left top / 3px 3px no-repeat,
    linear-gradient(var(--border-mid), var(--border-mid)) right top / 3px 3px no-repeat,
    linear-gradient(var(--border-mid), var(--border-mid)) left bottom / 3px 3px no-repeat,
    linear-gradient(var(--border-mid), var(--border-mid)) right bottom / 3px 3px no-repeat;
  opacity: 0.8;
}

.item-info-card__header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.item-info-card__icon-frame {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--iic-rarity);
  background: radial-gradient(circle at 50% 38%, var(--panel-alt), var(--black-blue) 72%);
  box-shadow: inset 0 0 0 2px #000, inset 0 -8px 10px rgba(0, 0, 0, 0.45), 0 2px 0 #000;
}
.item-info-card[data-rarity="legendary"] .item-info-card__icon-frame {
  box-shadow: inset 0 0 0 2px #000, inset 0 -8px 10px rgba(0, 0, 0, 0.45), 0 2px 0 #000, 0 0 10px rgba(255, 208, 68, 0.28);
}
.item-info-card__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(2px 2px 0 #000);
}
.item-info-card__name {
  color: var(--gold);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  text-shadow: 1px 1px 0 #000;
  overflow-wrap: anywhere;
}
.item-info-card__meta {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.item-info-card__rarity { color: var(--iic-rarity); font-weight: bold; text-shadow: 1px 1px 0 #000; }
.item-info-card__sep { margin: 0 5px; color: var(--text-faint); }

.item-info-card__divider {
  position: relative;
  height: 1px;
  margin: 10px 0 9px;
  background: linear-gradient(90deg, transparent, var(--iic-rarity) 22%, var(--iic-rarity) 78%, transparent);
  opacity: 0.7;
}
.item-info-card__divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--iic-rarity);
  background: var(--panel-dark);
  transform: translateX(-50%) rotate(45deg);
}
.item-info-card__description {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.item-info-card__instance,
.item-info-card__stats { display: flex; flex-wrap: wrap; gap: 5px; }
.item-info-card__instance { margin-top: 9px; }
.item-info-card__footer { display: flex; align-items: flex-end; gap: 8px; margin-top: 9px; }
.item-info-card__stats { flex: 1; min-width: 0; }
.item-info-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--border-dark);
  background: var(--black-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.item-info-card__chip img { width: 13px; height: 13px; image-rendering: auto; }
.item-info-card__chip.is-gold { color: var(--gold); }
.item-info-card__chip.is-level { border-color: var(--stone); color: var(--cold-cyan); font-weight: bold; }
.item-info-card__chip.is-state { color: var(--accent); }
.item-info-card__stars { color: var(--gold); letter-spacing: 1px; }

.item-info-card__info-button {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--border-mid);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--wood-light), var(--wood) 55%, var(--wood-dark));
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 227, 122, 0.35);
  color: var(--gold-light);
  font: bold 14px/1 "Courier New", monospace;
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
  transition: filter 80ms ease-out, border-color 80ms ease-out;
}
.item-info-card__info-button:hover { border-color: var(--border-light); filter: brightness(1.15); }
.item-info-card__info-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.item-info-card__info-button:active { transform: translateY(1px); box-shadow: 0 1px 0 #000, inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.item-info-card__info-button[aria-expanded="true"] {
  border-color: var(--border-light);
  background: radial-gradient(circle at 38% 32%, var(--stone-light), var(--stone) 55%, var(--stone-dark));
}

.item-info-card__uses-wrap {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  transition: grid-template-rows 140ms ease-out;
}
.item-info-card.is-expanded .item-info-card__uses-wrap { grid-template-rows: 1fr; }
.item-info-card__uses { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 140ms ease-out; }
.item-info-card.is-expanded .item-info-card__uses { opacity: 1; }
.item-info-card__uses-scroll {
  max-height: clamp(80px, calc(100vh - 250px), 210px);
  margin-top: 9px;
  padding: 8px 6px 2px 0;
  border-top: 1px solid var(--border-dark);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) var(--black-blue);
}
.item-info-card__uses-scroll::-webkit-scrollbar { width: 6px; }
.item-info-card__uses-scroll::-webkit-scrollbar-track { background: var(--black-blue); }
.item-info-card__uses-scroll::-webkit-scrollbar-thumb { background: var(--border-mid); border: 1px solid #000; }

.item-info-card__section + .item-info-card__section { margin-top: 9px; }
.item-info-card__section-title {
  margin: 0 0 3px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-dark);
  color: var(--accent);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.item-info-card__use-list,
.item-info-card__recipe-list { margin: 0; padding: 0; list-style: none; }
.item-info-card__use-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 4px 0;
  border-bottom: 1px dotted var(--panel-alt);
  font-size: 11px;
  line-height: 1.35;
}
.item-info-card__use-row:last-child { border-bottom: 0; }
.item-info-card__use-row > img { width: 16px; height: 16px; margin-top: 1px; image-rendering: auto; filter: drop-shadow(1px 1px 0 #000); }
.item-info-card__bullet { width: 5px; height: 5px; margin: 5px 0 0 5px; background: var(--border-mid); transform: rotate(45deg); }
.item-info-card__use-tag { display: block; color: var(--gold); font-size: 10px; letter-spacing: 0.5px; }
.item-info-card__use-text { overflow-wrap: anywhere; }
.item-info-card__use-text .item-ref,
.item-info-card__recipe-row .item-ref { color: var(--gold-light); border-bottom: 1px dotted var(--border-mid); }
.item-info-card .item-ref:hover { color: var(--gold-hi); }
.item-info-card__recipe-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  font-size: 11px;
}
.item-info-card__recipe-row img { width: 18px; height: 18px; image-rendering: auto; filter: drop-shadow(1px 1px 0 #000); }
.item-info-card__recipe-meta { color: var(--text-faint); font-size: 9px; white-space: nowrap; }
.item-info-card__qty { min-width: 22px; color: var(--gold); font-weight: bold; text-align: right; }
.item-info-card__more {
  margin-top: 4px;
  padding: 2px 7px;
  border: 1px solid var(--border-dark);
  background: var(--black-blue);
  color: var(--accent);
  font: bold 10px "Courier New", monospace;
  letter-spacing: 1px;
  cursor: pointer;
}
.item-info-card__more:hover { border-color: var(--border-mid); color: var(--gold-light); }
.item-info-card__more:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.item-info-card__empty { padding: 3px 0; color: var(--text-dim); font-size: 11px; font-style: italic; }

@media (max-width: 420px) {
  .item-info-card { font-size: 11px; }
  .item-info-card__header { grid-template-columns: 44px minmax(0, 1fr); }
  .item-info-card__icon-frame { width: 44px; height: 44px; }
  .item-info-card__icon { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .item-info-card,
  .item-info-card__uses-wrap,
  .item-info-card__uses { transition: none; }
  .item-info-card.is-swapping .item-info-card__body { animation: none; }
}

/* ---- Paneles ---- */
#ctx-body { padding: 4px 4px 8px; }
#inv-body { padding: 2px 4px 6px; }
#log-body { padding: 2px 6px 6px; }

/* ---- Botones estilo RPG (textura long_button) ---- */
.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  color: var(--text);
  text-shadow: 1px 1px 0 #000;
  border: 9px solid transparent;
  border-image: url('../imgs/GUIElements/long_button.PNG') 40 fill / 9px 14px / 0 stretch;
  background: none;
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  margin: 5px 0;
  line-height: 1.2;
  transition: color 0.12s ease;
}
.btn:hover:not(:disabled),
.btn.kb-focus {
  border-image-source: url('../imgs/GUIElements/long_button_on.PNG');
  color: var(--gold);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.5); }
.btn.kb-focus { box-shadow: 0 0 0 2px var(--gold), 0 0 8px rgba(255, 208, 68, 0.5); }
.btn .btn-label { flex: 1; min-width: 0; }
.btn .btn-ic { width: 30px; height: 30px; image-rendering: auto; flex: 0 0 auto; filter: drop-shadow(1px 1px 0 #000); }
.btn .cost { color: var(--gold); flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; }
.btn .cost img { width: 16px; height: 16px; image-rendering: auto; }
.btn small { color: var(--text-dim); font-weight: normal; }

/* Ícono de item en filas de inventario / info */
.li-ic { width: 22px; height: 22px; image-rendering: auto; vertical-align: middle; margin-right: 5px; filter: drop-shadow(1px 1px 0 #000); }

/* ---- Inventario ---- */
.inv-section {
  color: var(--accent);
  font-weight: bold;
  margin: 8px 0 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-dark);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
}
.inv-section:first-child { margin-top: 2px; }
.inv-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; }
.inv-row .qty { color: var(--gold); }
.inv-row .state { color: var(--text-dim); white-space: nowrap; }

/* Materiales en casillas (inventory_slot.png): ícono, cantidad y nombre. */
.inv-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px 2px;
  margin: 2px 0 4px;
}
.inv-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.inv-slot__frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1028 / 1009;
  background: url('../imgs/ui/forgeHUD/inventory_slot.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.inv-slot:hover .inv-slot__frame { filter: brightness(1.2); }
.inv-slot__icon { width: 30px; height: 30px; object-fit: contain; image-rendering: auto; filter: drop-shadow(1px 1px 0 #000); }
.inv-slot__qty {
  position: absolute;
  right: 5px;
  bottom: 3px;
  color: var(--text);
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.inv-slot__name {
  max-width: 100%;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}
.inv-slot:hover .inv-slot__name { color: var(--gold-light); }

/* Calidad con quality_star.png: las que faltan hasta tres van apagadas. */
.q-stars { display: inline-flex; align-items: center; gap: 1px; vertical-align: middle; }
.q-stars img { width: 13px; height: 13px; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 #000); }
.q-stars img.is-off { filter: grayscale(1) brightness(0.45); }
.inv-price { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; color: var(--gold); }
.inv-price img { height: 13px; width: auto; image-rendering: pixelated; }

/* ---- Registro: diario del herrero sobre pergamino (parchment_bg.png en 9-slice) ---- */
.hud-parchment {
  border: 10px solid transparent;
  border-image: url('../imgs/ui/forgeHUD/parchment_bg.png') 70 fill / 10px stretch;
  image-rendering: pixelated;
  margin: 0 -4px -6px;
  color: var(--ink);
  font-size: 12px;
}
.log-line { padding: 3px 0; border-bottom: 1px dotted var(--ink-rule); line-height: 1.3; }
.log-line:last-child { border-bottom: 0; }
.log-line.good { color: var(--ink-good); }
.log-line.bad { color: var(--ink-bad); }
.log-line.gold { color: var(--ink-gold); }
.log-line.info { color: var(--ink-dim); }
.log-day {
  margin: 6px 0 3px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--ink-rule);
  color: var(--ink-day);
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
}
.log-day:first-child { margin-top: 0; }

/* ---- Contexto ---- */
.ctx-desc { color: var(--text-dim); margin-bottom: 6px; }
.ctx-info { margin: 4px 0; }
.ctx-lvl { color: var(--gold); font-weight: bold; }
.ctx-sub {
  color: var(--accent);
  font-weight: bold;
  margin: 8px 0 3px;
  font-size: 11px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-dark);
}
.merchant-row { margin: 2px 0; }
/* Barra de forja: marco long_frame_loading + relleno ámbar energy_line */
.forgebar {
  position: relative;
  height: 26px;
  margin: 10px 2px 6px;
  border: 5px solid transparent;
  border-image: url('../imgs/GUIElements/long_frame_loading.PNG') 18 30 / 5px 10px / 0 stretch;
  background: var(--shadow-deep);
  overflow: hidden;
}
.forgebar-fill {
  height: 100%;
  background: url('../imgs/GUIElements/energy_line.PNG') center/cover;
  transition: width 0.06s linear;
}
.kb-hint {
  color: var(--text-dim);
  font-size: 10px;
  text-align: center;
  margin-top: 8px;
  border-top: 1px solid var(--border-dark);
  padding-top: 4px;
  letter-spacing: 1px;
}

/* Scrollbars retro */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--panel-dark); }
::-webkit-scrollbar-thumb { background: var(--border-dark); border: 2px solid #000; }

/* Tooltips para stats */
.stat {
  position: relative;
  cursor: help;
}

/* La barra superior va pegada al borde de arriba del juego: el aviso sale debajo. */
.stat::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-dark);
  color: var(--text);
  padding: 8px 12px;
  border: 2px solid var(--border-light);
  font-size: 11px;
  font-weight: normal;
  white-space: nowrap;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms steps(2, end);
  box-shadow: 3px 3px 0 #000;
}

.stat::before {
  content: '';
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--border-light);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms steps(2, end);
}

.stat:hover::after,
.stat:hover::before {
  opacity: 1;
}

/* ---- Pantallas (splash, menú, juego) ---- */
.screen {
  width: 1024px;
  height: 768px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--panel-dark);
  outline: 4px solid #000;
  box-shadow: 0 0 0 8px var(--border-dark), 0 0 40px #000;
  position: relative;
}

.screen.hidden {
  display: none;
}

/* Splash screen: intro de estudio estilo Huachikull — el logo de Planisfera
   en una banda blanca a todo el ancho del juego, que aparece y desaparece con
   un fundido sobre fondo oscuro (enlaza suave con el menú) y pasa solo al menú.
   El arte del logo es bitono pensado para fondo claro, de ahí la banda blanca. */
#splash-screen {
  background: var(--bg);
  padding: 0;
}

.splash-plate {
  width: 100%;
  height: 100%;
  padding: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  animation: splashCinematic 2.5s ease-in-out both;
}

.splash-plate img {
  height: 600px;
  width: auto;
  max-width: 92%;
  image-rendering: pixelated;
}

/* Fundido de entrada (~0.7s) · sostenido (~1.2s) · salida (~0.6s). */
@keyframes splashCinematic {
  0%   { opacity: 0; }
  28%  { opacity: 1; }
  76%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Main menu: escena de portada por capas =====
   El fondo ya no es la composicion plana (Sobreforjado.png) sino los cuatro
   PNG de imgs/MainMenu/ apilados, que es lo que permite animarlos por
   separado: encender la forja, hacer que el herrero golpee y darle parallax.
   Ver #menu-scene en index.html y js/menuScene.js. */
/* Logo arriba a la IZQUIERDA (sobre el hogar y la campana de la chimenea, que
   es la zona mas oscura del cuadro) y botones abajo: en el centro estan el
   herrero, el yunque y el mostrador, que son justo lo que no hay que tapar. */
#main-menu {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  /* El pie es corto a proposito: los botones bajan a la franja de suelo, por
     debajo del yunque, para no cruzarse con el herrero. */
  --menu-pad-t: 10px;
  --menu-pad-l: 8px;
  padding: var(--menu-pad-t) 0 40px var(--menu-pad-l);
  background: #05040a;      /* negro del que arranca la intro */
  overflow: hidden;         /* el parallax mueve capas mas grandes que la caja */

  /* ---- Medidas del logo ----
     Viven AQUI, en la pantalla entera, y no en el <img> ni en la caja del
     titulo, porque las comparten TRES elementos: la propia imagen, el reflejo
     que recorre sus letras (.logo-sheen) y el rayo que baja hasta el yunque
     (.logo-beam), que es hermano de la caja del titulo. El porque de cada
     numero, en el comentario de .menu-logo. */
  --logo-w: min(660px, 88vw);
  /* El PNG mide 1491x1055; a --logo-w de ancho, este es su alto real. */
  --logo-h: calc(var(--logo-w) * 1055 / 1491);
  /* Franja transparente que le sobra arriba (288 px) y abajo (291 px). */
  --logo-crop-top: calc(var(--logo-w) * -288 / 1491);
  --logo-crop-bottom: calc(var(--logo-w) * -291 / 1491);
  /* ---- Medidas del rayo ----
     Alto medido desde el canto de arriba del logo, (que cae por encima del
     borde de la pantalla, de ahi que pase de 768): muere justo sobre el metal
     al rojo del yunque, en torno a los 510 px de la escena. */
  --beam-h: 640px;
  /* Ancho de la banda de luz (la comparten el brillo y el rayo) y de donde a
     donde viaja la del brillo. En PIXELES atados a --logo-w y no en % de la
     caja: las cajas de los dos efectos no miden lo mismo. */
  --beam-band-w: calc(var(--logo-w) * 0.4);
  --beam-from: calc(var(--logo-w) * -0.64);   /* fuera por la izquierda */
  --beam-to: calc(var(--logo-w) * 1.44);      /* fuera por la derecha */
}

/* Los botones siguen centrados aunque el logo se haya ido a la izquierda. */
#main-menu .menu-container { margin-top: auto; align-self: center; }
#main-menu .menu-title-box { align-self: flex-start; }

.menu-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;     /* la escena es decorado: los clics van al menu */
  transform: translate3d(0, 0, 0);
  /* El travelling de la intro pivota AQUI: el centro de la ventana por la que
     se ve la cripta. Con la camara ampliada, ese punto llena la pantalla; al
     alejarse, la sala entera se abre alrededor de el. */
  transform-origin: 68% 26%;
  /* La opacidad la interpola el MISMO rAF que mueve la camara (ver playIntro),
     no una transicion CSS: asi el fundido y el travelling comparten reloj y no
     pueden desincronizarse si el navegador frena la linea de tiempo del
     documento (por ejemplo con la pestaña en segundo plano). */
  opacity: 0;
  will-change: transform, opacity;
}

/* Todas las capas comparten esta caja: mismo origen y mismo tamaño, asi que
   el parallax las mueve sobre el mismo sistema de coordenadas. El `inset`
   negativo las hace un pelin mas grandes que la pantalla para que el translate
   nunca descubra un borde. */
.ms-layer {
  position: absolute;
  inset: -14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: pixelated;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* ---- Encuadre de cada capa ----
   EL FONDO Y LA CABAÑA son la sala: van a pantalla completa y sin tocar, uno
   detras del otro, y por la ventana transparente de la cabaña se ve el bosque.
   EL HERRERO Y EL MOSTRADOR, en cambio, son piezas que se COLOCAN dentro de
   esa sala. Apilados a tamaño completo, el mostrador (que ocupa el ancho
   entero de su PNG) tapaba al herrero casi por completo y se perdia lo mejor
   de la ilustracion. Aqui se les da su tamaño y su sitio: el herrero a la
   izquierda, junto al hogar y de cuerpo entero, y el mostrador mas pequeño
   abajo a la derecha, delante de el.
   Los cuatro numeros de cada uno (tamaño + posicion) son lo unico que hay que
   tocar para recolocar la escena. */
/* El bosque tiene que leerse LEJOS: va reducido para que la cripta quede
   pequeña en el cristal de abajo a la derecha, con la luna en el de arriba.
   Ampliado, el arco llenaba la ventana y parecia pegado al cristal.
   No bajar mucho mas el tamaño: la imagen tiene que seguir tapando todo el
   hueco de la ventana con margen para el parallax, o asoma su borde arriba. */
.ms-bg {
  background-image: url('../imgs/MainMenu/Background.png');
  background-size: 58% auto;
  background-position: 86.7% 11.8%;
}

.ms-cabin  { background-image: url('../imgs/MainMenu/Cabin.png'); }

.ms-forger {
  background-image: url('../imgs/MainMenu/Forger.png');
  background-size: 62% auto;
  background-position: 9% 86%;
}

.ms-props {
  background-image: url('../imgs/MainMenu/Props.png');
  background-size: 58% auto;
  background-position: 101% 96%;
}

/* Este SÍ va a encuadre completo, sin tocar: su dibujo ya está repartido en las
   dos esquinas de abajo del lienzo (leña e ingotes a la izquierda, tesoro a la
   derecha) y el centro lo deja libre, que es justo donde caen los botones. */
.ms-props2 { background-image: url('../imgs/MainMenu/Props_2.png'); }

/* Resplandor calido de la fragua y del hogar. Dos focos suaves que laten muy
   despacio; van ENTRE la cabana y el herrero para que le den luz por detras.
   Las coordenadas salen de la propia ilustracion: el hogar a la izquierda
   (~15%, 54%) y el yunque al centro-izquierda (~32%, 53%). */
.ms-glow {
  position: absolute;
  inset: -14px;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    /* hogar: el foco grande y mas rojizo */
    radial-gradient(circle at 13% 58%, rgba(255, 138, 34, 0.40) 0%, rgba(255, 112, 26, 0.16) 24%, transparent 50%),
    /* metal al rojo sobre el yunque: pequeño, mas amarillo y mas intenso */
    radial-gradient(circle at 25% 66%, rgba(255, 196, 96, 0.34) 0%, rgba(255, 140, 44, 0.13) 14%, transparent 34%),
    /* rebote calido en el suelo y en el herrero, que es lo que integra la
       figura con la luz de la sala en vez de dejarla recortada encima */
    radial-gradient(ellipse 46% 30% at 26% 84%, rgba(255, 150, 60, 0.20) 0%, transparent 70%),
    /* luz fria de la luna entrando por la ventana, para que el lado derecho no
       quede plano y se lea la profundidad de la noche */
    radial-gradient(ellipse 26% 34% at 71% 30%, rgba(150, 190, 255, 0.16) 0%, transparent 72%);
  opacity: 1;                       /* la forja ya esta encendida desde el principio */
  will-change: opacity;
}

/* Destello del martillazo, centrado en el metal al rojo del yunque. */
.ms-flash {
  position: absolute;
  inset: -14px;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 25% 66%,
    rgba(255, 248, 224, 0.95) 0%,
    rgba(255, 186, 84, 0.55) 18%,
    rgba(255, 132, 32, 0.20) 34%,
    transparent 58%);
  opacity: 0;
  will-change: opacity;
}

/* Luz cálida que cae sobre TODAS las capas (ver .ms-glow, que va detrás). Muy
   suave: no es un foco, es el aire caliente de la fragua tiñendo la escena.
   Junto con el rebote del suelo es lo que evita que el herrero parezca pegado
   encima de la sala en vez de estar dentro de ella. */
.ms-warm {
  position: absolute;
  inset: -14px;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(ellipse 54% 46% at 22% 62%, rgba(255, 168, 72, 0.75) 0%, rgba(255, 140, 50, 0.28) 42%, transparent 74%),
    radial-gradient(ellipse 30% 38% at 71% 30%, rgba(140, 180, 255, 0.34) 0%, transparent 76%);
  opacity: 1;
  will-change: opacity;
}

/* Lienzo de brasas, motas de polvo y chispas del golpe (js/menuParticles.js). */
.ms-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}

/* Viñeta: oscurece bordes y pie para que el logo y los botones se lean sobre
   la ilustracion sin taparla con un velo plano. */
.ms-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Oscurece las esquinas y centra la mirada en la fragua. Mas abierta que
       antes: las dos esquinas de abajo ya no estan vacias, tienen el primer
       plano de Props_2 y no conviene apagarlo. */
    radial-gradient(ellipse 92% 88% at 42% 50%, transparent 52%, rgba(6, 4, 8, 0.52) 100%),
    /* Banda de arriba para el logo y el reclamo, y banda de abajo para los
       botones: sin ellas, ambos peleaban con el detalle de la ilustracion.
       La de abajo es SUAVE y arranca tarde a proposito: el primer plano de
       Props_2 (la leña y los lingotes de la esquina izquierda, el tesoro de la
       derecha) vive justo ahi, y con una banda fuerte se lo tragaba entero. */
    linear-gradient(to bottom,
      rgba(6, 4, 8, 0.62) 0%, rgba(6, 4, 8, 0.28) 22%, transparent 36%,
      transparent 72%, rgba(5, 3, 7, 0.42) 100%);
}

/* El contenido del menu va por encima de la escena. */
.menu-title-box,
.menu-container,
.menu-footer { position: relative; z-index: 2; }

/* Las capas NO se encienden por turnos: la escena entera esta montada desde el
   primer frame y quien cuenta la historia es la camara alejandose (ver
   js/menuIntro.js). Aparecer una a una no tenia sentido fisico —los objetos no
   se materializan— y ademas desvelaba el cuadro antes de tiempo. */

/* La lumbre late muy despacio y muy poco: se nota como fuego vivo, no como un
   parpadeo. --boost lo sube la transicion de salida (ver menuExit.js). */
.ms-glow {
  --boost: 1;
  animation: forgeBreath 5.5s ease-in-out infinite;
}
@keyframes forgeBreath {
  0%, 100% { filter: brightness(calc(var(--boost) * 0.92)); }
  50%      { filter: brightness(calc(var(--boost) * 1.10)); }
}

/* Martillazo: la capa del herrero cae unos pocos pixeles y vuelve enseguida.
   Es un hundido corto y seco, no un flotar. El translate lo escribe el JS del
   parallax cada frame, asi que el golpe se hace con `translate` propio, que se
   suma al del elemento sin pisarlo. */
.ms-hit { animation: forgeStrike 260ms cubic-bezier(0.3, 0, 0.2, 1) 1; }
@keyframes forgeStrike {
  0%   { translate: 0 0; }
  22%  { translate: 0 5px; }
  38%  { translate: 0 4px; }
  100% { translate: 0 0; }
}

/* Destello del yunque: brutalmente corto, como una chispa de verdad. */
.ms-flash-on { animation: anvilFlash 320ms ease-out 1; }
@keyframes anvilFlash {
  0%   { opacity: 0; }
  8%   { opacity: 0.95; }
  100% { opacity: 0; }
}

/* ---- Entrada del logo ----
   Hasta que la intro no da el martillazo, el logo no existe. Entra con peso:
   un pelin mas grande y algo mas alto, y aterriza con un easing que frena de
   golpe (como si el golpe lo hubiera clavado ahi). */
.menu-title-box { opacity: 0; }
#main-menu.mm-logo-in .menu-title-box {
  opacity: 1;
  animation: logoSlam 460ms cubic-bezier(0.16, 0.9, 0.28, 1) both;
}
@keyframes logoSlam {
  0%   { opacity: 0; transform: translateY(-14px) scale(1.12); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reflejo metalico que cruza el logo de vez en cuando. Es una banda clara
   recortada con la SILUETA del propio PNG (`mask-image` apunta al mismo
   archivo): no lo redibuja ni lo modifica, solo lo ilumina por franjas, y al
   morir dentro de las letras nunca ensena un borde recto. Va muy espaciado
   (9 s) para que sea un detalle, no un tic.
   LA CAJA ES LA DEL DIBUJO DEL LOGO, no la del titulo: .menu-title-box mide
   el logo YA RECORTADO por sus margenes negativos mas el reclamo de debajo,
   asi que estirar la mascara sobre ella la deformaba y dejaba la banda
   cortada en el canto de la caja. Se calca con --logo-w/--logo-h, los mismos
   numeros con los que se dibuja el <img>, y asi la mascara cae al pixel. */
#main-menu.mm-logo-in .menu-logo::after { content: none; }
.menu-title-box { position: relative; }

/* ---- Dos luces distintas sobre el logo ----
   .logo-sheen es el BRILLO DE METAL: una banda que recorre el logo de
   izquierda a derecha recortada con la silueta del PNG, asi que enciende las
   letras y nada mas que las letras.
   .logo-beam es el RAYO: no se mueve. Se enciende y se apaga clavado en el
   centro del logo y baja hasta el metal al rojo del yunque.
   Son efectos independientes: ni comparten caja ni tienen por que coincidir
   en el tiempo (ver mas abajo, cada uno con su animacion). */

/* -- El brillo de metal -- */
.menu-title-box .logo-sheen {
  position: absolute;
  left: 0;
  top: var(--logo-crop-top);
  height: var(--logo-h);
  /* De sobra a la derecha: lo que recorta esta capa es la SILUETA del logo,
     no su caja, y con el ancho justo la banda se cortaria en seco sobre la
     ultima letra al salir. */
  width: calc(var(--logo-w) * 2);
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  /* La mascara NO se estira a la caja: va al tamano real del dibujo y pegada a
     su esquina de arriba, que es donde esta el <img>. La caja es el doble de
     ancha, y con `100% 100%` la silueta saldria estirada. */
  -webkit-mask-image: url('../imgs/MainMenu/Logo.png');
  mask-image: url('../imgs/MainMenu/Logo.png');
  -webkit-mask-size: var(--logo-w) var(--logo-h);
  mask-size: var(--logo-w) var(--logo-h);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* La banda viaja en un hijo y no en el fondo del propio elemento: el `mask` va
   en el padre, asi que mover el elemento arrastraria tambien la silueta que lo
   recorta y el brillo se quedaria clavado en las letras. */
.menu-title-box .logo-sheen::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--beam-band-w);
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 246, 214, 0.50) 34%, rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 246, 214, 0.50) 66%, transparent 100%);
  opacity: 0;
  transform: translateX(var(--beam-from)) skewX(-16deg);
}
#main-menu.mm-logo-in .logo-sheen::before {
  animation: logoSheen 9s ease-in-out 1.6s infinite;
}
@keyframes logoSheen {
  0%, 84%   { opacity: 0; transform: translateX(var(--beam-from)) skewX(-16deg); }
  87%       { opacity: 1; }
  97%       { opacity: 1; }
  100%      { opacity: 0; transform: translateX(var(--beam-to)) skewX(-16deg); }
}

/* -- El rayo --
   Por encima de TODA la escena (z-index 3: las capas de la ilustracion van en
   la 0 y el contenido del menu en la 2). Antes vivia dentro de la caja del
   titulo y ahi lo cortaba en seco su borde de abajo, a la altura del reclamo;
   colgado del menu entero, nada lo recorta hasta que se apaga solo.
   Centrado en el logo: al ancho de la banda, la mitad del logo menos la mitad
   de la banda lo deja clavado en el eje del dibujo. */
#main-menu .logo-beam {
  position: absolute;
  left: calc(var(--menu-pad-l) + (var(--logo-w) - var(--beam-band-w)) / 2);
  top: calc(var(--menu-pad-t) + var(--logo-crop-top));
  width: var(--beam-band-w);
  height: var(--beam-h);
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 246, 214, 0.34) 34%, rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 246, 214, 0.34) 66%, transparent 100%);
  /* Misma inclinacion que el brillo, para que los dos se lean como la misma
     luz de la sala aunque no coincidan en el tiempo. */
  transform: skewX(-16deg);
  /* Se apaga de arriba abajo para morir sobre el yunque en vez de terminar en
     un canto. Arriba entra a plena luz: ese tramo cae por encima del borde de
     la pantalla y no llega a verse. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0, 0, 0, 0.68) 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0, 0, 0, 0.68) 80%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
}
/* Prende de golpe y se apaga despacio, como una brasa que se aviva. Cae a
   mitad del ciclo, lejos del brillo de metal (que va al final): asi son dos
   momentos distintos y no un unico destello confuso. */
#main-menu.mm-logo-in .logo-beam {
  animation: logoBeam 9s ease-in-out 1.6s infinite;
}
@keyframes logoBeam {
  0%, 40%   { opacity: 0; }
  44%       { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* ---- Entrada del menu ---- */
.menu-container, .menu-footer { opacity: 0; }
#main-menu.mm-menu-in .menu-container {
  opacity: 1;
  animation: menuRise 420ms ease-out both;
}
#main-menu.mm-menu-in .menu-footer {
  opacity: 0.75;
  animation: menuRise 420ms ease-out 120ms both;
}
@keyframes menuRise {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Salida hacia la partida (js/menuExit.js) ---- */
#main-menu.mm-exiting .menu-container,
#main-menu.mm-exiting .menu-title-box,
#main-menu.mm-exiting .logo-beam,
#main-menu.mm-exiting .menu-footer {
  animation: menuLeave 160ms ease-in both;
}
@keyframes menuLeave {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* Fundido a negro por encima de todo, dentro de la propia pantalla del menu:
   enlaza con el negro del que arranca el juego. */
#main-menu::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity 300ms ease-in;
}
#main-menu.mm-fading::after { opacity: 1; }

/* Sin animaciones para quien las tenga desactivadas en el sistema: la portada
   se ve entera y quieta, que sigue siendo una buena ilustracion. */
@media (prefers-reduced-motion: reduce) {
  .ms-glow { animation: none; }
  .ms-hit, .ms-flash-on { animation: none; }
  #main-menu.mm-logo-in .menu-title-box,
  #main-menu.mm-menu-in .menu-container,
  #main-menu.mm-menu-in .menu-footer { animation: none; }
  .logo-sheen, .logo-beam { display: none; }
  .menu-logo { animation: none; }
}

/* Las medidas que usa (--logo-w y compania) las declara #main-menu. */
.menu-title-box { text-align: left; margin-bottom: 8px; }

/* El título es el logo dibujado (imgs/MainMenu/Logo.png), no texto.
   El PNG mide 1491x1055 pero el dibujo solo ocupa la franja y=288..763: le
   sobran 288px de transparencia por arriba y 291px por abajo, más de un
   cuarto del alto por lado. Esa transparencia no se ve pero SÍ ocupa, y
   dejaba el reclamo descolgado a 74px del logo.
   Los márgenes negativos (--logo-crop-top/-bottom, arriba) recortan justo esa
   franja muerta: 288/1491 del ancho arriba y 291/1491 abajo.
   Van con calc() sobre --logo-w y NO en %: un margen en % se resuelve contra
   el ancho del CONTENEDOR, y aquí el contenedor lo acaba marcando el reclamo
   en cuanto el logo se encoge, con lo que el recorte se pasaba y el texto se
   montaba encima. Contra --logo-w cuadra a cualquier tamaño. */
.menu-logo {
  display: block;
  width: var(--logo-w);
  height: auto;
  /* `auto` a los lados centraba el logo dentro de su caja; con el titulo ya
     alineado a la izquierda, los margenes laterales van a 0 y solo quedan los
     verticales, que son los que recortan la franja transparente del PNG. */
  margin: var(--logo-crop-top) 0 var(--logo-crop-bottom);
  image-rendering: pixelated;         /* es pixel-art: nada de suavizado al escalar */
  animation: titleGlow 3s ease-in-out infinite;
}

/* Mismo latido dorado que tenía el título de texto, pero con drop-shadow:
   text-shadow no pinta nada sobre una imagen, y drop-shadow sigue la silueta
   real del logo en vez de su caja. */
/* Tres sombras encadenadas, todas siguiendo la SILUETA del logo (drop-shadow,
   no box-shadow): un contorno negro duro que lo recorta contra la ilustracion,
   una sombra proyectada abajo que le da peso, y el halo calido que late. */
@keyframes titleGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 2px rgba(0, 0, 0, 0.95))
      drop-shadow(0 6px 10px rgba(0, 0, 0, 0.75))
      drop-shadow(0 0 14px rgba(255, 176, 60, 0.28));
  }
  50% {
    filter:
      drop-shadow(0 0 2px rgba(0, 0, 0, 0.95))
      drop-shadow(0 6px 10px rgba(0, 0, 0, 0.75))
      drop-shadow(0 0 28px rgba(255, 186, 78, 0.55));
  }
}

/* Sobre la ilustracion el reclamo se perdia: pasa a color claro con un halo
   oscuro que lo despega del fondo sin necesidad de ponerle una caja detras. */
.menu-tagline {
  margin-top: 14px;
  padding-left: 10px;
  color: var(--text);
  font-size: 13px;
  letter-spacing: 2px;
  text-shadow:
    1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000,
    0 0 10px rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 0, 0, 0.7);
}

.menu-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-btn {
  position: relative;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  color: var(--text);
  text-shadow: 1px 1px 0 #000;
  border: 9px solid transparent;
  border-image: url('../imgs/GUIElements/long_button.PNG') 40 fill / 9px 14px / 0 stretch;
  background: none;
  padding: 7px 16px;
  cursor: pointer;
  /* Estrechos a proposito: centrados, una columna de 300px cruzaba al herrero
     de lado a lado. Con 252 solo pisan el suelo y sus botas. */
  min-width: 252px;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 1px;
  transition: color 0.15s ease, transform 0.1s ease, filter 0.15s ease;
  /* Sombra proyectada: sin ella los botones parecian pegatinas sobre el suelo. */
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7));
}

.menu-btn:hover,
.menu-btn.kb-focus {
  border-image-source: url('../imgs/GUIElements/long_button_on.PNG');
  color: var(--gold);
  /* Empuje corto al pasar por encima: se nota que responde sin desmontar la fila. */
  transform: translateX(3px);
  text-shadow: 1px 1px 0 #000, 0 0 12px rgba(255, 208, 68, 0.55);
  /* Al resaltarse tambien se ilumina por dentro, no solo cambia de textura. */
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 9px rgba(255, 202, 70, 0.45));
}

/* Al pulsar, el boton se hunde: mismo gesto que una tecla de madera. */
.menu-btn:active {
  transform: translateY(2px);
  filter: brightness(0.86);
}

.menu-footer {
  position: absolute;
  bottom: 26px;
  /* El menu alinea a la izquierda (por el logo), asi que el pie necesita
     centrarse por su cuenta. */
  left: 0;
  right: 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0.75;
  text-shadow: 1px 1px 0 #000, 0 0 8px rgba(0, 0, 0, 0.9);
}

.menu-panel {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 24, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  z-index: 10;
  animation: panelIn 0.18s ease-out;
}

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

.menu-panel.hidden {
  display: none;
}

.menu-back {
  position: absolute;
  top: 46px;
  left: 52px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 6px 10px;
  text-shadow: 1px 1px 0 #000;
  transition: color 0.15s ease, transform 0.15s ease;
}

.menu-back:hover {
  color: var(--gold);
  transform: translateX(-3px);
}

.menu-content {
  color: var(--text);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
  max-width: 560px;
  padding: 20px;
}

/* Caja con marco SNES para el contenido de los paneles del menú. */
.menu-box {
  border: 14px solid transparent;
  border-image: url('../imgs/GUIElements/basic_bar.PNG') 40 / 14px / 0 stretch;
  background: var(--panel-dark);
  padding: 26px 40px 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.menu-note {
  margin-top: 18px !important;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 1px;
  opacity: 0.8;
}

.credits-game {
  color: var(--gold);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
  text-shadow: 2px 2px 0 #000;
}

/* ---- Créditos: todo a Planisfera Games y unas palabras del autor ---- */
.credits-box.menu-content { max-width: 600px; }

.credits-by {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.5;
}
.credits-by b {
  color: var(--text);
  font-size: 16px;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #000;
}

.credits-message {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  line-height: 1.6;
}
.credits-message p + p { margin-top: 10px; }

.credits-thanks {
  margin-top: 16px;
  color: var(--gold);
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000;
}

.menu-content label {
  display: block;
  margin: 8px 0;
  letter-spacing: 1px;
}

/* ---- Panel de Opciones ---- */
.opt-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 440px;
}

.opt-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 14px;
  padding: 7px 12px;
  border: 2px solid transparent;
  border-radius: 3px;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.opt-row.kb-focus {
  background: rgba(255, 208, 68, 0.12);
  border-color: var(--border-light);
}

/* Con el sonido apagado los mandos de volumen siguen visibles pero apagados:
   deja claro que no van a sonar sin esconderlos de golpe. */
.opt-row.opt-dim .opt-bar,
.opt-row.opt-dim .opt-pct { opacity: 0.35; }

.opt-label {
  color: var(--text-dim);
  letter-spacing: 1px;
}

.opt-row.kb-focus .opt-label { color: var(--text); }

.opt-value {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  letter-spacing: 1px;
}

.opt-toggle { cursor: pointer; color: var(--good); font-weight: bold; }
.opt-toggle.opt-off { color: var(--bad); }

.opt-bar { display: flex; gap: 3px; }

.opt-seg {
  width: 16px;
  height: 16px;
  background: var(--panel-dark);
  border: 2px solid var(--border-dark);
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}

.opt-seg.on {
  background: var(--gold);
  border-color: var(--border-light);
}

.opt-seg:hover { border-color: var(--border-light); }

.opt-pct {
  min-width: 46px;
  color: var(--gold);
  font-weight: bold;
  font-size: 13px;
}

.lang-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  color: var(--text-dim);
  background: var(--panel-dark);
  border: 2px solid var(--border-dark);
  border-radius: 3px;
  padding: 3px 12px;
  margin-left: 6px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.lang-btn:hover { color: var(--text); border-color: var(--border-light); }

.lang-btn.active {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--panel);
}

.menu-content p {
  margin: 6px 0;
}

.menu-subtitle {
  color: var(--gold);
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 #000;
}

/* ---- Partidas guardadas: una ficha por ranura (ver js/menuSlots.js) ---- */
#slots-panel { padding-top: 44px; }

.slots-box.menu-content {
  max-width: none;
  width: 836px;
  padding: 18px 28px 14px;
  line-height: 1.3;
}
.slots-box .menu-subtitle { margin-bottom: 14px; }

.save-slots {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Madera oscura con cantonera de bronce y cuatro remaches cuadrados. */
.slot-card {
  --rivet: linear-gradient(#E0AC52, #6E4418);
  position: relative;
  height: 164px;
  padding: 10px 16px 8px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  background:
    var(--rivet) 5px 5px / 3px 3px no-repeat,
    var(--rivet) calc(100% - 5px) 5px / 3px 3px no-repeat,
    var(--rivet) 5px calc(100% - 5px) / 3px 3px no-repeat,
    var(--rivet) calc(100% - 5px) calc(100% - 5px) / 3px 3px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 23px, rgba(0, 0, 0, 0.22) 23px 24px),
    linear-gradient(180deg, #1C2029, #151820);
  border: 2px solid #5A3A1A;
  box-shadow: 0 0 0 2px #06070A, inset 0 0 0 1px rgba(255, 214, 140, 0.08), 0 6px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.slot-card:hover { border-color: #8A5A24; }

.slot-card.is-selected {
  border-color: var(--border-light);
  transform: translateY(-2px);
  filter: brightness(1.08);
  animation: slotGlow 1.8s ease-in-out infinite;
}

@keyframes slotGlow {
  0%, 100% { box-shadow: 0 0 0 2px #06070A, inset 0 0 0 1px rgba(255, 208, 68, 0.22), 0 0 10px rgba(255, 190, 70, 0.20), 0 8px 0 rgba(0, 0, 0, 0.35); }
  50%      { box-shadow: 0 0 0 2px #06070A, inset 0 0 0 1px rgba(255, 208, 68, 0.32), 0 0 18px rgba(255, 190, 70, 0.36), 0 8px 0 rgba(0, 0, 0, 0.35); }
}

.save-slots.is-opening .slot-card { animation: slotIn 0.22s ease-out both; }
.save-slots.is-opening .slot-card:nth-child(2) { animation-delay: 0.05s; }
.save-slots.is-opening .slot-card:nth-child(3) { animation-delay: 0.1s; }

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

/* Cabecera: placa de la ranura, día, avisos y oro. */
.slot-head {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding-bottom: 6px;
  border-bottom: 2px solid #3A2A18;
  box-shadow: 0 1px 0 rgba(232, 155, 40, 0.18);
}

.slot-tag {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: #0A0C11;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #2E3442;
  padding: 3px 8px;
  white-space: nowrap;
}
.slot-tag b { color: var(--text); font-size: 14px; margin-left: 2px; }

.slot-day { display: flex; align-items: baseline; gap: 6px; }
.slot-day span { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 2px; }
.slot-day b { font-size: 26px; color: var(--text); text-shadow: 2px 2px 0 #000; }

.slot-badges { display: flex; gap: 6px; flex: 1; }
.slot-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid;
}
.slot-badge img { width: 14px; height: 14px; }
.slot-badge.is-fair { color: var(--gold); border-color: #7A5A18; background: rgba(255, 208, 68, 0.08); }
.slot-badge.is-lost { color: var(--bad); border-color: #6A2118; background: rgba(240, 82, 66, 0.10); }

.slot-gold { display: flex; align-items: center; gap: 8px; }
.slot-gold img { width: 32px; height: 32px; filter: drop-shadow(1px 2px 0 #000); }
.slot-gold b { font-size: 24px; color: var(--gold); letter-spacing: 1px; text-shadow: 2px 2px 0 #000; }

/* Cuerpo: materiales, herramientas y progreso. */
.slot-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 176px;
  height: 80px;
  padding-top: 8px;
}
.slot-sec { padding: 0 14px; border-left: 1px solid rgba(232, 155, 40, 0.14); min-width: 0; }
.slot-sec:first-child { padding-left: 0; border-left: none; }
.slot-sec-title { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }

.slot-chips { display: flex; align-items: center; gap: 4px; overflow: hidden; }
.slot-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  height: 38px;
  padding: 0 5px 0 2px;
  background: rgba(5, 6, 9, 0.55);
  border: 1px solid #2A2F3B;
}
.slot-chip img { width: 30px; height: 30px; image-rendering: auto; }
.slot-chip b { font-size: 12px; color: var(--text); text-shadow: 1px 1px 0 #000; }
.slot-more { padding: 0 8px; font-size: 13px; font-weight: bold; color: var(--text-dim); }
.slot-none { font-size: 12px; color: var(--text-dim); font-style: italic; }

.slot-tool-row { display: flex; gap: 8px; }
.slot-tool {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(5, 6, 9, 0.55);
  border: 1px solid #4A3A22;
  box-shadow: inset 0 0 0 1px rgba(232, 155, 40, 0.12);
}
.slot-tool img { width: 32px; height: 32px; image-rendering: auto; }
.slot-tool.is-locked { border-color: #20242C; box-shadow: none; }
.slot-tool.is-locked img { filter: grayscale(1) brightness(0.4); opacity: 0.55; }
.slot-pips { position: absolute; left: 3px; bottom: 3px; display: flex; gap: 2px; }
.slot-pips i { width: 4px; height: 4px; background: var(--gold); box-shadow: 1px 1px 0 #000; }

.slot-prog { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.slot-stat { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 6px; height: 20px; font-size: 11px; }
/* Los iconos de progreso son oscuros: sin aclararlos se pierden contra la madera. */
.slot-stat img { width: 18px; height: 18px; filter: brightness(1.8) drop-shadow(1px 1px 0 #000); }
.slot-stat span { color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.slot-stat b { color: var(--text); font-size: 13px; text-shadow: 1px 1px 0 #000; }

.slot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.slot-when { display: inline-flex; align-items: center; gap: 5px; }
.slot-when img { width: 16px; height: 16px; }

/* La selección también ilumina lo de dentro. */
.slot-card.is-selected .slot-tag { color: var(--gold); box-shadow: inset 0 0 0 1px #7A5A18; }
.slot-card.is-selected .slot-sec-title { color: #C9A46A; }
.slot-card.is-selected .slot-gold b { text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 208, 68, 0.45); }
.slot-card.is-selected .slot-tool:not(.is-locked) { border-color: #7A5A28; }

.slot-card.is-lost .slot-body,
.slot-card.is-lost .slot-gold { filter: saturate(0.4) brightness(0.85); }

/* Ranura vacía: hierro frío en vez de bronce, y la invitación a empezar. */
.slot-card.is-empty {
  --rivet: linear-gradient(#8A93A3, #3A404C);
  border-color: #2C313B;
  background:
    var(--rivet) 5px 5px / 3px 3px no-repeat,
    var(--rivet) calc(100% - 5px) 5px / 3px 3px no-repeat,
    var(--rivet) 5px calc(100% - 5px) / 3px 3px no-repeat,
    var(--rivet) calc(100% - 5px) calc(100% - 5px) / 3px 3px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 23px, rgba(0, 0, 0, 0.22) 23px 24px),
    linear-gradient(180deg, #13161D, #0E1016);
}
.slot-card.is-empty:hover { border-color: #444B58; }
.slot-card.is-empty.is-selected { border-color: var(--border-light); }
.slot-card.is-empty .slot-tag { position: absolute; top: 10px; left: 16px; }

.slot-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; }
.slot-plus { position: relative; width: 34px; height: 34px; border: 2px solid #3A3F4B; background: rgba(5, 6, 9, 0.5); }
.slot-plus::before,
.slot-plus::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--text-dim); }
.slot-plus::before { width: 16px; height: 4px; transform: translate(-50%, -50%); }
.slot-plus::after { width: 4px; height: 16px; transform: translate(-50%, -50%); }
.slot-new-title { font-size: 16px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); text-shadow: 2px 2px 0 #000; }
.slot-new-sub { font-size: 11px; letter-spacing: 1px; color: var(--text-dim); opacity: 0.7; }

.slot-card.is-empty.is-selected .slot-plus { border-color: var(--border-light); box-shadow: 0 0 10px rgba(255, 190, 70, 0.35); }
.slot-card.is-empty.is-selected .slot-plus::before,
.slot-card.is-empty.is-selected .slot-plus::after { background: var(--gold); }
.slot-card.is-empty.is-selected .slot-new-title { color: var(--gold); text-shadow: 2px 2px 0 #000, 0 0 12px rgba(255, 208, 68, 0.5); }
.slot-card.is-empty.is-selected .slot-new-sub { opacity: 1; }

/* Controles al pie, como teclas. */
.slot-keys { display: flex; justify-content: center; align-items: center; gap: 22px; min-height: 22px; margin-top: 14px; }
.keyhint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
  background: none;
  border: 0;
}
button.keyhint { cursor: pointer; }
button.keyhint:hover:not(:disabled) { color: var(--gold); }
button.keyhint:disabled { opacity: 0.35; cursor: default; }
.keycap {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  color: var(--gold);
  background: var(--panel2);
  border: 1px solid #000;
  border-bottom-width: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.keycap + .keycap { margin-left: -3px; }

/* Confirmación de borrado. */
.slot-confirm {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 10, 0.72);
  animation: panelIn 0.14s ease-out;
}
.slot-confirm.hidden { display: none; }
.slot-confirm-box.menu-content { max-width: none; width: 520px; padding: 22px 30px 20px; }
.slot-confirm-title { color: var(--gold); font-size: 20px; font-weight: bold; letter-spacing: 2px; text-shadow: 2px 2px 0 #000; }
.slot-confirm-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.slot-confirm-meta img { width: 20px; height: 20px; }
.slot-confirm-text { margin: 6px 0 18px; font-size: 12px; color: var(--text-dim); }
.slot-confirm-btns { display: flex; justify-content: center; gap: 16px; }
.slot-confirm-btns .menu-btn { min-width: 170px; }
.slot-confirm-delete.kb-focus,
.slot-confirm-delete:hover { color: var(--bad); text-shadow: 1px 1px 0 #000, 0 0 12px rgba(240, 82, 66, 0.5); }