:root {
  --bg: #171009;
  --panel: #2b2118;
  --panel-border: #6b5427;
  --gold: #d4af37;
  --gold-dim: #8a6f2a;
  --cream: #ece0c4;
  --cream-dim: #b8a988;
  --red: #c0392b;
  --red-dark: #7a2018;
  --blue: #2f6fb0;
  --green: #4caf50;
  --shadow: rgba(0, 0, 0, 0.6);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--cream); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; overflow: hidden; user-select: none; }
body { background-image: radial-gradient(circle at 20% 10%, #2a2013 0%, transparent 40%), radial-gradient(circle at 80% 90%, #241a0f 0%, transparent 40%), var(--bg); }

#app { height: 100dvh; height: 100vh; display: flex; flex-direction: column; }

h2, h3 { font-family: 'Press Start 2P', monospace; color: var(--gold); }
h2.screen-title { font-size: 0.85rem; margin: 12px 12px 10px; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 0.68rem; margin: 0 0 10px; line-height: 1.6; }
h3.panel-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

#topbar { display: flex; align-items: center; gap: 6px; padding: calc(var(--safe-top) + 8px) 10px 8px; background: linear-gradient(#1c140b, #171009); border-bottom: 2px solid var(--panel-border); flex-shrink: 0; }
.resource { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px; padding: 4px 8px; font-weight: bold; font-size: 0.82rem; color: var(--gold); white-space: nowrap; }
.icon-btn { margin-left: auto; background: none; border: none; font-size: 1.3rem; color: var(--cream); padding: 4px 6px; position: relative; }
.icon-btn-badge { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 1.5px solid var(--bg); }
.icon-btn-badge.hidden { display: none; }

#screens { flex: 1; min-height: 0; position: relative; }
.screen { display: none; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 14px; }
.screen.active { display: block; }
/* El fondo de zona (zoneBackgroundStyle, en ui.js) se pone inline en
   #stageList — sin min-height llenaría solo el alto de su contenido
   (la rejilla de etapas), dejando el resto de la pantalla en negro liso
   como el fondo por defecto de .screen. */
#stageList { min-height: 100%; }

.panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px; margin: 0 12px 12px; padding: 12px; box-shadow: 0 2px 6px var(--shadow); }
.stat-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.92rem; border-bottom: 1px dashed #3a2c17; }
.stat-boost { color: var(--green); font-weight: bold; }
.status-buff { color: var(--green); font-weight: bold; }
.status-debuff { color: var(--red); font-weight: bold; }
.stat-row:last-child { border-bottom: none; }
.badge { display: inline-block; background: var(--gold-dim); color: #1a1410; border-radius: 6px; padding: 1px 7px; font-size: 0.68rem; font-weight: bold; }
.settings-info { font-size: 0.82rem; color: var(--cream-dim); line-height: 1.5; }
.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 0.88rem; }
.settings-toggle-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--gold-dim); }
.empty-hint { text-align: center; color: var(--cream-dim); padding: 24px 16px; font-size: 0.85rem; }
.empty-hint.hidden { display: none; }
.hidden { display: none !important; }

.primary-btn { width: 100%; padding: 10px; margin-top: 6px; background: linear-gradient(#e0bb55, var(--gold-dim)); border: 1px solid #7a5f22; border-radius: 8px; color: #1a1410; font-weight: bold; font-size: 0.85rem; }
.primary-btn:disabled { opacity: 0.4; }
.danger-btn { width: 100%; padding: 10px; margin-top: 8px; background: linear-gradient(#c0392b, var(--red-dark)); border: 1px solid #5a1810; border-radius: 8px; color: #fff; font-weight: bold; font-size: 0.85rem; }
.save-code-box {
  width: 100%; min-height: 90px; margin-top: 10px; padding: 8px; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px;
  color: var(--cream); font-family: monospace; font-size: 0.72rem; word-break: break-all; resize: vertical;
}
.save-code-file { width: 100%; margin-top: 10px; color: var(--cream); font-size: 0.75rem; }
.text-input {
  width: 100%; padding: 8px; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px;
  color: var(--cream); font-size: 0.8rem;
}
.formation-preset-save-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.formation-preset-list { display: flex; flex-direction: column; gap: 8px; }
.formation-preset-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px; padding: 8px 10px;
}
.formation-preset-name { font-size: 0.78rem; flex: 1; min-width: 0; }
.formation-preset-actions { display: flex; gap: 4px; flex-shrink: 0; }
.formation-preset-actions .mini-btn { margin: 0; padding: 6px 8px; }
.mini-btn { padding: 6px 12px; background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 8px; color: var(--gold); font-size: 0.75rem; margin: 6px 12px; }
.pokedex-open-btn { margin: 0 0 0 auto; font-size: 0.68rem; padding: 5px 10px; white-space: nowrap; }
.mini-btn:disabled { opacity: 0.4; }
.modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* ---------- Nav ---------- */
#bottomnav { flex-shrink: 0; display: flex; background: #1c140b; border-top: 2px solid var(--panel-border); padding-bottom: var(--safe-bottom); }
.nav-btn { flex: 1; background: none; border: none; color: var(--cream-dim); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; font-size: 0.62rem; }
.nav-icon { font-size: 1.25rem; }
.nav-btn.active { color: var(--gold); }

/* ---------- Tarjeta de criatura ---------- */
.creature-canvas { image-rendering: pixelated; width: 72px; height: 81px; object-fit: contain; display: block; margin: 0 auto; opacity: 1; transition: opacity 0.25s ease; position: relative; z-index: 1; }
.creature-canvas-loading { opacity: 0; }

.gear-icon { object-fit: contain; display: inline-block; vertical-align: middle; opacity: 1; transition: opacity 0.25s ease; }
.gear-icon-loading { opacity: 0; }
.gear-icon-fallback {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  border: 2px solid var(--gold-dim); border-radius: 6px; background: #1f1811; line-height: 1;
}
.creature-card {
  position: relative; background: #1f1811; border: 2px solid var(--rc, #888); border-radius: 10px; padding: 8px 6px 10px;
  box-shadow: 0 0 10px var(--rg, transparent); text-align: center; min-width: 0;
}
.creature-canvas-wrap { display: flex; justify-content: center; position: relative; }
.creature-canvas-wrap::before {
  content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%;
  background: #f6f1e4;
}
body.hide-medallion .creature-canvas-wrap::before { display: none; }
.creature-elclass { position: absolute; top: 4px; left: 6px; font-size: 0.7rem; }
.creature-tier-icon { position: absolute; top: 4px; right: 6px; font-size: 0.7rem; }
.new-badge {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%); background: linear-gradient(#e0512f, var(--red-dark));
  color: #fff; font-size: 0.56rem; font-weight: bold; padding: 2px 8px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.5); z-index: 2; white-space: nowrap;
}
.creature-name { font-size: 0.72rem; font-weight: bold; margin-top: 4px; line-height: 1.2; min-height: 1.8em; overflow-wrap: break-word; }
.creature-level { font-size: 0.68rem; color: var(--cream-dim); }
.sef-bar { height: 5px; background: #140d08; border-radius: 3px; overflow: hidden; margin-top: 5px; }
.sef-bar.big { height: 10px; }
.sef-fill { height: 100%; background: linear-gradient(90deg, #3f7fd0, #5fa8f0); }
.star-row { color: var(--gold); font-size: 0.7rem; margin-top: 3px; }
.in-band-tag { font-size: 0.6rem; color: var(--green); margin-top: 3px; }

.rarity-comun .creature-canvas-wrap { animation: floatSprite 3s ease-in-out infinite; }
.rarity-infrecuente { box-shadow: 0 0 8px var(--rg, transparent); }
.rarity-infrecuente .creature-canvas-wrap { animation: floatSprite 2.8s ease-in-out infinite; }
.rarity-raro { box-shadow: 0 0 14px var(--rg, transparent); }
.rarity-raro .creature-canvas-wrap { animation: floatSprite 2.6s ease-in-out infinite; }
.rarity-epico { box-shadow: 0 0 18px var(--rg, transparent); }
.rarity-epico .creature-canvas-wrap { animation: floatSprite 2.4s ease-in-out infinite; }
.rarity-legendario { box-shadow: 0 0 22px var(--rg, transparent); animation: legendaryPulse 2s ease-in-out infinite; }
.rarity-legendario .creature-canvas-wrap { animation: floatSprite 2.2s ease-in-out infinite; }
/* Jefes: tier propio, fuera de la escalera de rareza — rojo siempre
   distintivo (border-color viene de --rc, puesto vía rarityInfoFor). */
.rarity-jefe { border-width: 3px !important; box-shadow: 0 0 20px var(--rg, transparent); animation: bossPulse 1.6s ease-in-out infinite; }
.rarity-jefe .creature-canvas-wrap { animation: floatSprite 2.3s ease-in-out infinite; }
@keyframes floatSprite { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes legendaryPulse { 0%, 100% { box-shadow: 0 0 14px var(--rg, transparent); } 50% { box-shadow: 0 0 30px var(--rg, transparent); } }
@keyframes bossPulse { 0%, 100% { box-shadow: 0 0 14px var(--rg, transparent); } 50% { box-shadow: 0 0 28px var(--rg, transparent); } }
.creature-card.selected { outline: 3px solid var(--green); outline-offset: 1px; box-shadow: 0 0 12px rgba(76,175,80,0.7); }
/* .battle-unit no usa --rc/--rg (nunca los necesitó para rareza normal),
   así que el marco de jefe en combate se declara directo, sin depender
   de la variable. */
.battle-unit.rarity-jefe { border: 2px solid #e0392b; border-radius: 10px; box-shadow: 0 0 12px rgba(224,57,43,0.75); }
.battle-unit.rarity-jefe .battle-unit-name { color: #ff6b57; font-weight: bold; }

.creature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 12px 16px; }

.pokedex-box { max-width: 420px; }
.pokedex-grid { padding: 0; margin-top: 10px; }
.pokedex-locked { border-style: dashed; border-color: var(--gold-dim); opacity: 0.6; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 108px; }
.pokedex-lock-icon { font-size: 1.8rem; }
.pokedex-locked .creature-name { color: var(--cream-dim); }

.roster-sort-row { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; font-size: 0.78rem; color: var(--cream-dim); }
.roster-sort-row select {
  flex: 1; background: #1f1811; border: 1px solid var(--gold-dim); border-radius: 8px; color: var(--cream);
  font-family: inherit; font-size: 0.8rem; padding: 6px 8px;
}
.roster-filter-row { display: flex; gap: 6px; padding: 0 12px 6px; }
.roster-filter-row select {
  flex: 1; min-width: 0; background: #1f1811; border: 1px solid var(--gold-dim); border-radius: 8px; color: var(--cream);
  font-family: inherit; font-size: 0.7rem; padding: 5px 2px;
}
.roster-filter-hint { padding: 0 12px 8px; }
.roster-filter-hint:empty { display: none; }

/* ---------- Estadísticas en profundidad ---------- */
.stats-search-input {
  flex: 1; background: #1f1811; border: 1px solid var(--gold-dim); border-radius: 8px; color: var(--cream);
  font-family: inherit; font-size: 0.8rem; padding: 6px 8px;
}
.stats-record-group { margin-top: 10px; font-weight: bold; font-size: 0.78rem; color: var(--gold); }
.stats-record-group:first-child { margin-top: 0; }

/* ---------- Mapa ---------- */
.loc-card { margin-top: 12px; }
.loc-card-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.loc-card-emoji { font-size: 1.8rem; }
.loc-card.locked { opacity: 0.5; }
.locked-tag { font-size: 0.78rem; color: #d08b3a; text-align: center; padding: 6px 0; }

.stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 12px; }
.stage-btn {
  aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--gold-dim); background: #1f1811; color: var(--cream);
  font-family: 'Press Start 2P', monospace; font-size: 0.9rem; position: relative;
}
.stage-btn.boss { border-color: #e8a23c; font-size: 1.4rem; }
.stage-btn.cleared { background: #22331f; border-color: var(--green); }
.stage-btn.locked { opacity: 0.4; }
.stage-check { position: absolute; bottom: 2px; right: 4px; font-size: 0.7rem; color: var(--green); }

/* ---------- Recorrido de etapa ---------- */
.stage-run-path { display: flex; align-items: center; justify-content: center; padding: 20px 8px; flex-wrap: wrap; }
.stage-run-node {
  width: 46px; height: 46px; min-width: 46px; border-radius: 50%; border: 2px solid var(--gold-dim); background: #1f1811;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--cream-dim);
}
.stage-run-node.current { border-color: var(--gold); box-shadow: 0 0 12px rgba(212,175,55,0.6); animation: legendaryPulse 1.6s ease-in-out infinite; color: var(--gold); }
.stage-run-node.cleared { border-color: var(--green); background: #22331f; color: var(--green); }
.stage-run-node.locked { opacity: 0.5; }
.stage-run-node.chest { font-size: 1.4rem; }
.stage-run-connector { width: 18px; height: 3px; background: var(--gold-dim); opacity: 0.5; }
.stage-run-connector.cleared { background: var(--green); opacity: 1; }
.stage-run-preview { display: flex; justify-content: center; gap: 6px; padding: 10px 0; flex-wrap: wrap; }
.stage-run-band { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; }
.stage-run-band-row { display: flex; justify-content: center; gap: 6px; }
/* Mismo estilo de cuadrado con borde que el resto de rejillas de combate
   (picker-cell, doll-slot) — más la barra de vida debajo, que esas otras
   rejillas no necesitan. */
.stage-run-fighter {
  width: 52px; height: 68px; border: 2px solid var(--gold-dim); border-radius: 8px; background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center; position: relative;
}
.stage-run-fighter.empty { visibility: hidden; }
.stage-run-fighter.fainted { opacity: 0.5; }
.stage-run-fighter .creature-canvas { width: 40px; height: 45px; }
.stage-run-fighter .hp-bar.small { height: 5px; width: 90%; }
.fainted-icon { position: absolute; top: 0; right: 0; font-size: 0.9rem; }
.stage-run-items { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }

/* ---------- Formación ---------- */
.formation-grid { display: flex; flex-direction: column; gap: 8px; }
.formation-row { display: flex; gap: 8px; justify-content: center; }
.formation-slot { width: 64px; height: 76px; border: 2px dashed var(--gold-dim); border-radius: 8px; background: #1f1811; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--gold-dim); position: relative; }
.formation-slot.empty {}
.formation-slot:not(.empty) { border-style: solid; }
.formation-slot.filled { border-style: solid; }
.formation-slot .creature-canvas-wrap::before { width: 44px; height: 44px; }
/* creatureCanvas fija el ancho (46px aquí) y deja el alto en "auto" según
   la proporción real de cada sprite — un personaje recortado muy alto
   (retrato de cuerpo entero, poco margen) se salía del hueco de 76px y
   tapaba el "Nv.X" de debajo. Se limita con un recuadro fijo + object-fit
   para que encoja proporcionalmente en vez de desbordar. */
.formation-slot .creature-canvas-wrap { width: 46px; height: 46px; overflow: hidden; }
.formation-slot .creature-canvas-wrap img.creature-canvas {
  max-width: 46px !important; max-height: 46px !important; width: auto !important; height: auto !important;
  object-fit: contain;
}
.formation-lvl { font-size: 0.6rem; color: var(--cream-dim); }
/* El reborde marca el tier del personaje colocado (mismo --rc que ya usa
   creatureCard en la Colección, puesto vía rarityInfoFor en renderBanda).
   El centro conserva su marco dorado especial solo mientras está vacío,
   para seguir señalando cuál es el hueco de líder antes de colocar a
   nadie — en cuanto hay alguien, gana el color de su rareza. */
.formation-slot:not(.empty) { border-color: var(--rc, var(--gold-dim)); }
.formation-slot.center.empty { border-color: var(--gold); }
.leader-crown { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 0.9rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.leader-status-bar { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #1f1811; border: 1px solid var(--gold-dim); font-size: 0.78rem; color: var(--cream-dim); text-align: center; line-height: 1.5; }
.leader-status-bar.active { border-color: var(--gold); color: var(--cream); box-shadow: 0 0 10px rgba(212,175,55,0.35); }
.formation-fill-hint { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #1f1811; border: 1px solid var(--green); color: var(--cream); font-size: 0.78rem; text-align: center; line-height: 1.5; }
.formation-fill-hint.hidden { display: none; }

.picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; margin-top: 8px; }

/* ---------- Comparar luchadores ---------- */
.compare-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; margin: 10px 0; }
.compare-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.compare-name { font-weight: bold; font-size: 0.8rem; }
.compare-sub { font-size: 0.7rem; color: var(--cream-dim); }
.compare-mode-row { display: flex; gap: 6px; justify-content: center; margin: 4px 0 10px; }
.compare-stat-row { display: grid; grid-template-columns: 90px 1fr 1fr; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--panel-border); font-size: 0.8rem; }
.compare-stat-row:last-child { border-bottom: none; }
.compare-label { color: var(--cream-dim); }
.compare-val { text-align: center; }
.compare-val.compare-win { color: var(--green); font-weight: bold; }
.compare-val.compare-lose { color: var(--cream-dim); }

/* ---------- Tienda ---------- */
.shop-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed #3a2c17; }
.shop-row:last-child { border-bottom: none; }
.shop-row-icon { font-size: 1.8rem; width: 40px; text-align: center; flex-shrink: 0; }
.shop-row-info { flex: 1; }
.shop-row-title { font-weight: bold; font-size: 0.85rem; margin-bottom: 4px; }

.torre-list { margin: 0 12px 16px; }
.torre-row {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 6px;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px;
}
.torre-row:not(.locked) { cursor: pointer; }
.torre-row.locked { opacity: 0.5; }
.torre-row .creature-canvas { width: 40px; height: 45px; }
.torre-row-empty-icon {
  width: 40px; height: 45px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; opacity: 0.5;
}
.torre-row-info { flex: 1; min-width: 0; }
.torre-row-name { font-weight: bold; font-size: 0.78rem; overflow-wrap: break-word; }
.torre-row-sub { font-size: 0.66rem; color: var(--cream-dim); margin-top: 2px; }
.torre-row-btns { flex-shrink: 0; }
.torre-row-btns .mini-btn { margin: 0; padding: 5px 8px; font-size: 0.66rem; }
.shop-buy-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.shop-buy-btn {
  flex: 1; min-width: 56px; background: #1f1811; border: 2px solid var(--gold-dim); border-radius: 8px; color: var(--cream);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px;
}
.shop-buy-btn:disabled { opacity: 0.35; }
.shop-buy-price { font-size: 0.65rem; }

/* ---------- Modales ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; z-index: 90; padding: 16px; }
.modal.hidden { display: none; }
.modal-box { background: var(--panel); border: 2px solid var(--gold-dim); border-radius: 12px; padding: 16px; width: 100%; max-width: 380px; max-height: 88vh; overflow-y: auto; position: relative; box-shadow: 0 8px 24px var(--shadow); }
.modal-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--cream); font-size: 1.2rem; z-index: 2; }
.item-modal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.item-modal-icon { font-size: 2.2rem; }
.item-modal-name { font-weight: bold; font-size: 0.95rem; }
.item-modal-rarity { font-size: 0.75rem; color: var(--cream-dim); }

.fighter-modal-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
/* Medallón en la "foto de perfil" de las 4 fichas que usan este
   encabezado (roster, Pokédex, jefe, ficha de combate) — antes solo se
   pintaba en las rejillas (Colección, Formación, Torre...), no aquí,
   porque el retrato se añadía suelto sin pasar por .creature-canvas-wrap
   (ver openFighterModal/showPokedexEntry/showBossEntry/
   showBattleUnitStats en ui.js). Tamaño propio (92px) en vez del 76px
   por defecto, a juego con el retrato más grande (80-90px) de esta
   cabecera en vez del ~72px de una tarjeta normal. */
.fighter-modal-head .creature-canvas-wrap::before { width: 92px; height: 92px; }
.xp-bar { height: 9px; background: #1a1410; border: 1px solid #000; border-radius: 5px; overflow: hidden; }
.xp-fill { height: 100%; background: linear-gradient(90deg, #3f7fd0, var(--blue)); }
.xp-text { font-size: 0.7rem; color: var(--cream-dim); margin-top: 3px; }
.type-vuln-note { font-size: 0.68rem; color: #d08b3a; margin-top: 3px; line-height: 1.4; }
.homunculo-row { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.homunculo-btn { margin: 0; width: 100%; text-align: left; }

.obj-row { margin: 8px 0; }
.obj-row-top { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 3px; }
.obj-bar { height: 9px; background: #1a1410; border: 1px solid #000; border-radius: 5px; overflow: hidden; }
.obj-fill { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }

.doll-slot { aspect-ratio: 1; width: 74px; border: 2px solid var(--gold-dim); border-radius: 10px; background: #1f1811; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.doll-slot.empty { opacity: 0.5; border-style: dashed; }
.doll-icon { font-size: 1.5rem; }
.doll-label { font-size: 0.58rem; color: var(--cream-dim); margin-top: 2px; }
.doll-plus { position: absolute; bottom: 3px; right: 6px; font-size: 0.66rem; color: var(--gold); font-weight: bold; }
.gear-slots-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- Invocación ---------- */
.summon-panel h3 { display: flex; justify-content: space-between; align-items: center; }
.reveal-box { text-align: center; }
.reveal-flash { padding: 10px 0; border-radius: 10px; animation: revealPop 0.5s ease-out; }
@keyframes revealPop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.reveal-flash.rarity-infrecuente { box-shadow: 0 0 20px var(--rg, #4caf6b); }
.reveal-flash.rarity-raro { box-shadow: 0 0 30px var(--rg, #3f9fe0); }
.reveal-flash.rarity-epico { box-shadow: 0 0 35px var(--rg, #a463e0); }
.reveal-flash.rarity-legendario { box-shadow: 0 0 40px #e8a23c; animation: revealPop 0.5s ease-out, legendaryPulse 1.4s ease-in-out infinite 0.5s, legendaryFlash 0.7s ease-out; }
@keyframes legendaryFlash { 0% { filter: brightness(1); } 12% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
.reveal-canvas-wrap { position: relative; display: flex; justify-content: center; margin-bottom: 6px; }
/* Medallón en la animación de invocación (al abrir cristales), petición
   del usuario — a diferencia de .creature-canvas-wrap, esta clase no
   tenía ningún ::before propio. Se pinta ANTES del anillo/chispas de
   Legendario (.legendary-burst/.legendary-spark, añadidos después como
   hijos reales vía appendLegendaryFx en ui.js) para quedar detrás de
   ambos, no delante. Tamaño a juego con el retrato de 120px que usan
   tanto la revelación de x1 (showSingleReveal) como cada tarjeta del
   paso a paso de x10/x100 (showMultiReveal). Las revelaciones de
   evolución (.evolve-old/.evolve-new, más abajo) pisan este tamaño con
   el suyo propio — misma especificidad, pero van después en la hoja. */
.reveal-canvas-wrap::before {
  content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 126px; height: 126px; border-radius: 50%;
  background: #f6f1e4;
}
body.hide-medallion .reveal-canvas-wrap::before { display: none; }
/* Anillo de rayos girando detrás del retrato + chispas que salen
   disparadas — solo para Legendario, ver appendLegendaryFx en ui.js. */
.legendary-burst {
  position: absolute; top: 50%; left: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; z-index: 0;
  border-radius: 50%; pointer-events: none; animation: legendaryBurstSpin 6s linear infinite;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(232,162,60,0.55) 8deg, transparent 16deg, transparent 40deg,
    rgba(232,162,60,0.4) 48deg, transparent 56deg, transparent 80deg, rgba(232,162,60,0.5) 88deg,
    transparent 96deg, transparent 120deg, rgba(232,162,60,0.4) 128deg, transparent 136deg,
    transparent 160deg, rgba(232,162,60,0.5) 168deg, transparent 176deg, transparent 200deg,
    rgba(232,162,60,0.4) 208deg, transparent 216deg, transparent 240deg, rgba(232,162,60,0.5) 248deg,
    transparent 256deg, transparent 280deg, rgba(232,162,60,0.4) 288deg, transparent 296deg,
    transparent 320deg, rgba(232,162,60,0.5) 328deg, transparent 336deg);
}
@keyframes legendaryBurstSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.legendary-spark {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; z-index: 2;
  background: #ffe28a; border-radius: 50%; box-shadow: 0 0 8px 2px #ffe28a; pointer-events: none;
  animation: legendarySparkFly 1.1s ease-out calc(var(--i) * 0.08s) infinite;
}
@keyframes legendarySparkFly {
  0% { transform: rotate(calc(var(--i) * 60deg)) translate(0, 0) scale(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: rotate(calc(var(--i) * 60deg)) translate(70px, 0) scale(1); opacity: 0; }
}
.reveal-outcome { margin-top: 6px; font-size: 0.85rem; color: var(--gold); }
.reveal-progress { font-family: 'Press Start 2P', monospace; font-size: 0.65rem; color: var(--gold-dim); margin-bottom: 8px; }
.reveal-skip-btn { margin-top: 14px; }
.evolve-reveal-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.evolve-arrow { font-size: 1.4rem; color: var(--gold); animation: evolveArrowPulse 1s ease-in-out infinite; }
@keyframes evolveArrowPulse { 0%, 100% { transform: translateX(0); opacity: 0.7; } 50% { transform: translateX(6px); opacity: 1; } }
.evolve-old { opacity: 0.55; filter: grayscale(0.4); }
.evolve-new .creature-canvas { animation: evolveNewPop 0.6s ease-out; }
/* .evolve-old/.evolve-new ya heredan el medallón base de
   .reveal-canvas-wrap (arriba, mismo elemento — llevan las dos clases a
   la vez) — solo hace falta su propio tamaño, a juego con el retrato
   más pequeño (74px) de la forma antigua y el más grande (100px) de la
   nueva en vez del 126px genérico pensado para la revelación de
   invocación. */
.evolve-old::before { width: 78px; height: 78px; }
.evolve-new::before { width: 106px; height: 106px; }
@keyframes evolveNewPop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- Inventario / equipo ---------- */
.item-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 12px; }
.item-cell { aspect-ratio: 1; border: 2px solid #888; border-radius: 10px; background: #1f1811; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; position: relative; overflow: hidden; }
.item-cell.selected { outline: 3px solid var(--green); outline-offset: 1px; box-shadow: 0 0 12px rgba(76,175,80,0.7); }
.reveal-cell-pop { opacity: 0; animation: revealPop 0.4s ease-out forwards; }
.item-icon { font-size: 1.6rem; }
.item-plus { position: absolute; bottom: 2px; right: 5px; font-size: 0.62rem; color: var(--gold); font-weight: bold; }
.equipped-dot { position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.item-tier-icon { position: absolute; top: 3px; right: 5px; font-size: 0.6rem; }

/* ---------- Recorrido de etapa / nivel de Torre ---------- */
/* Vive fuera de cualquier .screen (ver index.html) para poder abrirse
   igual desde el Mapa que desde la Torre Batalla; por eso necesita su
   propio position:fixed en vez de heredar el de .screen.active. z-index
   por debajo de .overlay (80) porque la Batalla se abre POR ENCIMA de
   este recorrido, nunca al revés. */
#stageRunView:not(.hidden) {
  position: fixed; inset: 0; background: var(--bg); z-index: 75; overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding: calc(var(--safe-top) + 6px) 10px calc(var(--safe-bottom) + 14px);
}

/* ---------- Batalla ---------- */
.overlay { position: fixed; inset: 0; background: var(--bg); z-index: 80; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 6px) 10px calc(var(--safe-bottom) + 10px); }
.overlay.hidden { display: none; }
.battle-header { display: flex; justify-content: space-between; align-items: center; font-family: 'Press Start 2P', monospace; font-size: 0.7rem; color: var(--gold); margin-bottom: 8px; }
.battle-header-btns { display: flex; gap: 6px; }
.battle-header-btns .mini-btn { margin: 0; }
.mini-btn.active { background: var(--gold); color: #1c140b; border-color: var(--gold); }
.battle-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; }
.battle-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.battle-vs { text-align: center; font-family: 'Press Start 2P', monospace; color: var(--gold-dim); font-size: 0.75rem; margin: 4px 0; }
.active-row { display: flex; gap: 10px; justify-content: center; }
.queued-rows { display: flex; flex-direction: column; gap: 3px; opacity: 0.5; }
.queued-row-mini { display: flex; gap: 4px; justify-content: center; }
.queued-row-mini .creature-canvas { width: 26px; height: 29px; }

.battle-unit { position: relative; width: 100px; text-align: center; transition: opacity 0.3s; }
.battle-unit.fainted { opacity: 0.25; filter: grayscale(1); }
.battle-unit .hp-bar.small { height: 7px; margin-top: 2px; }
.battle-unit-canvas-wrap { position: relative; }
.battle-unit-canvas-wrap .ult-turns {
  position: absolute; top: -2px; right: 2px; z-index: 2; font-size: 0.58rem; font-weight: bold; color: #e0bb55;
  background: rgba(10,6,3,0.75); border: 1px solid #7a5f22; border-radius: 8px; padding: 0 4px; line-height: 1.4;
}
.ult-bar { height: 5px; width: 100%; background: #1a1410; border: 1px solid #000; border-radius: 3px; overflow: hidden; margin-top: 2px; }
.ult-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #c98fe8, #e8a23c); transition: width 0.25s ease-out; }

#groupPickerPanel { flex-shrink: 0; text-align: center; padding: 6px 0; }
#groupPickerPanel.hidden { display: none; }
.group-picker-title { font-family: 'Press Start 2P', monospace; font-size: 0.65rem; color: var(--gold); margin-bottom: 8px; }
.group-picker-list { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: center; touch-action: none; user-select: none; }
.picker-row { display: flex; gap: 4px; }
.picker-cell {
  position: relative; width: 52px; height: 66px; border: 2px solid var(--gold-dim); border-radius: 8px; background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: background 60ms, border-color 60ms;
}
.picker-cell.empty { border-style: dashed; opacity: 0.5; }
/* El medallón (círculo de fondo tras el retrato, ver
   .creature-canvas-wrap::before) queda mal en el selector de línea del
   combate — la celda ya tiene su propio recuadro, así que el círculo
   sobra y recarga visualmente la rejilla. Se quita solo aquí. */
.picker-cell .creature-canvas-wrap::before { display: none; }
.picker-cell .creature-canvas { width: 40px; height: 45px; }
.picker-cell .creature-canvas-wrap.fainted { opacity: 0.35; filter: grayscale(1); }
.picker-cell .hp-bar.small { height: 4px; width: 40px; position: relative; z-index: 1; }
.picker-cell.selecting { border-color: var(--gold); background: rgba(212,175,55,0.28); }
.picker-cell.invalid { border-color: #b0392f; background: rgba(176,57,47,0.25); }
.picker-cell-ult {
  position: absolute; top: -6px; right: -6px; z-index: 3; font-size: 0.5rem; font-weight: bold; color: #e0bb55;
  background: rgba(10,6,3,0.9); border: 1px solid #7a5f22; border-radius: 8px; padding: 1px 4px; line-height: 1.4;
  white-space: nowrap; pointer-events: none;
}
.picker-cell-adv {
  position: absolute; bottom: -6px; left: -6px; z-index: 3; font-size: 0.6rem; font-weight: bold;
  background: rgba(10,6,3,0.9); border: 1px solid; border-radius: 8px; padding: 0 4px; line-height: 1.4; pointer-events: none;
}
.picker-cell-adv.adv-good { color: #5fd15f; border-color: #2e8b2e; }
.picker-cell-adv.adv-bad { color: #e0654e; border-color: #a83a2c; }
.picker-used-overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
.picker-used-overlay line { stroke: #b0392f; stroke-width: 4; stroke-linecap: round; opacity: 0.85; }
.battle-unit-name { font-size: 0.6rem; color: var(--cream-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-bar { width: 100%; background: #1a1410; border: 1px solid #000; border-radius: 5px; overflow: hidden; }
.hp-fill { height: 100%; width: 100%; background: linear-gradient(#5fd15f, #2e8b2e); transition: width 0.25s ease-out; }
.hp-bar.enemy .hp-fill, .battle-side#battleEnemySide .hp-fill { background: linear-gradient(#e05c4e, var(--red-dark)); }

.battle-float { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-family: 'Press Start 2P', monospace; font-size: 0.62rem; color: #ffd76b; animation: floatUp 0.8s ease-out forwards; text-shadow: 1px 1px 2px #000; pointer-events: none; }
.battle-float.crit { color: #ff3b3b; font-size: 0.78rem; }
@keyframes floatUp { 0% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -26px); } }

/* Movimiento de golpe: el atacante se lanza hacia el bando rival (arriba si
   es del jugador, abajo si es del rival, ya que las filas se apilan en
   columna) y vuelve a su sitio; quien recibe el golpe tiembla. Puramente
   cosmético — no toca el timing real del combate (ver triggerAnim en ui.js). */
@keyframes lungeUp { 0% { transform: translateY(0); } 40% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
@keyframes lungeDown { 0% { transform: translateY(0); } 40% { transform: translateY(14px); } 100% { transform: translateY(0); } }
.battle-unit.lunge-up { animation: lungeUp 0.3s ease-out; }
.battle-unit.lunge-down { animation: lungeDown 0.3s ease-out; }
@keyframes hitShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.battle-unit.hit-shake { animation: hitShake 0.3s ease-out; }
@keyframes healPulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.battle-unit.heal-glow { animation: healPulse 0.5s ease-out; }

.battle-log { flex-shrink: 0; height: 84px; overflow-y: auto; background: #140d08; border: 1px solid #3a2c17; border-radius: 8px; padding: 6px 8px; margin-top: 6px; font-size: 0.72rem; color: var(--cream-dim); }
.battle-log-line { padding: 1px 0; }

#battleResult { position: absolute; inset: 0; z-index: 5; background: rgba(10,6,3,0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; }
#battleResult.hidden { display: none; }
#battleResultBody { width: 100%; max-width: 320px; background: var(--panel); border: 2px solid var(--gold-dim); border-radius: 12px; padding: 16px; }
#battleResultBody h3 { text-align: center; }
#battleResult .primary-btn { max-width: 320px; }

/* ---------- Toasts ---------- */
#toastContainer { position: fixed; top: calc(var(--safe-top) + 60px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 90; }
.toast-item { background: #1c140bee; border: 1px solid var(--gold-dim); color: var(--gold); padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; opacity: 0; transform: translateY(-10px); transition: all 0.3s; text-align: center; max-width: 85vw; }
.toast-item.show { opacity: 1; transform: translateY(0); }