/* css/panels.css — Paneles de pausa (habilidades, talentos, inventario, estadísticas) y pantalla de victoria. */
/* ---------- Panel de maestría de habilidades (pantalla de pausa) ---------- */
#mastery-panel{ width:100%; max-width:380px; margin-bottom:16px; }

/* ---------- Pestañas de la pantalla de pausa (Fase 1: Habilidades / Inventario) ---------- */
#pause-tabs{ display:flex; gap:8px; width:100%; max-width:380px; margin-bottom:12px; }
.pause-tab{
  flex:1; padding:8px 6px; border-radius:9px; border:1px solid var(--panel-b);
  background:var(--panel-a); color:var(--text-dim); font-family:inherit; font-weight:700;
  font-size:0.78rem; cursor:pointer;
}
.pause-tab.active{ color:var(--ember3); border-color:var(--ember1); background:rgba(255,122,46,0.10); }

#inventory-panel{ width:100%; max-width:380px; margin-bottom:16px; }
.inv-slots{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.inv-slot{
  flex:1 1 30%; min-width:88px; border:1px dashed var(--panel-b); border-radius:10px; padding:8px 6px; text-align:center;
  background:var(--panel-a); font-size:0.62rem; color:var(--text-dim);
}
.set-panel{ margin-bottom:10px; }
.set-panel .set-title{ color:#c88cff; font-weight:700; font-size:0.72rem; margin-bottom:4px; }
.set-panel .set-thr{ font-size:0.62rem; color:var(--text-dim); padding:1px 0; }
.set-panel .set-thr.active{ color:#7dffa8; }
.fuse-bar{ display:flex; flex-direction:column; gap:6px; background:var(--panel-a); border:1px solid var(--panel-b); border-radius:8px; padding:6px 8px; margin-bottom:8px; font-size:0.62rem; }
.fuse-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fuse-row button{ flex:none; padding:3px 8px; border-radius:6px; border:1px solid #7dffa8; background:rgba(125,255,168,0.12); color:#7dffa8; font-size:0.58rem; cursor:pointer; }
.set-badge{ display:inline-block; font-size:0.5rem; font-weight:700; color:#1a0e06; background:#3ddc71; border-radius:4px; padding:0 3px; margin-left:3px; vertical-align:middle; }
.inv-card .item-desc{ font-size:0.56rem; color:var(--text-dim); font-style:italic; margin-top:2px; }
.inv-card.set-item{ border-left-width:3px; }
.inv-slot.filled{ border-style:solid; }
.inv-slot .slot-icon{ font-size:1.1rem; display:block; margin-bottom:3px; }
.inv-slot .slot-item-name{ font-size:0.58rem; line-height:1.25; display:block; margin:3px 0; min-height:2.2em; }
.inv-slot button{
  margin-top:4px; font-size:0.58rem; padding:3px 6px; border-radius:6px; border:1px solid var(--panel-b);
  background:var(--panel-b); color:var(--text); font-family:inherit; cursor:pointer;
}
.inv-list{ display:flex; flex-direction:column; gap:7px; max-height:38vh; overflow-y:auto; }
.inv-card{
  display:flex; align-items:center; gap:8px; border-radius:9px; padding:7px 9px;
  background:var(--panel-a); border:1px solid var(--panel-b); border-left-width:4px;
}
.inv-card .item-icon{ font-size:1.15rem; flex:none; }
.inv-card .item-meta{ flex:1; min-width:0; }
.inv-card .item-name{ font-size:0.68rem; font-weight:700; line-height:1.2; }
.inv-card .item-stat{ font-size:0.6rem; color:var(--text-dim); margin-top:1px; }
.inv-card .item-passives{ font-size:0.56rem; color:#8fb8ff; margin-top:2px; }
.inv-card .item-proc{ color:#ffb020; font-weight:700; }
.inv-card button{
  flex:none; font-size:0.6rem; padding:5px 8px; border-radius:7px; border:1px solid var(--panel-b);
  background:var(--panel-b); color:var(--text); font-family:inherit; font-weight:700; cursor:pointer;
}
.inv-card button.equipped{ background:var(--ember1); color:#1a0e06; border-color:var(--ember1); }
.inv-empty{ text-align:center; color:var(--text-dim); font-size:0.72rem; padding:18px 10px; }
.inv-debug-btn{
  width:100%; margin-top:10px; padding:8px; border-radius:9px; border:1px dashed var(--panel-b);
  background:transparent; color:var(--text-dim); font-family:inherit; font-size:0.62rem; cursor:pointer;
}
.inv-debug-btn:disabled{ opacity:0.4; cursor:default; }
.inv-capacity{ text-align:right; font-size:0.62rem; white-space:normal; overflow-wrap:anywhere; color:var(--text-dim); margin-bottom:6px; }
.inv-card{ cursor:pointer; }

/* ---------- Fase 4: pestaña Estadísticas ---------- */
#stats-panel{ width:100%; max-width:380px; margin-bottom:16px; }
.stat-block{
  background:var(--panel-a); border:1px solid var(--panel-b); border-radius:10px;
  padding:8px 10px; margin-bottom:10px;
}
.stat-block-title{ font-size:0.6rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:5px; }
.stat-row{ display:flex; justify-content:space-between; font-size:0.74rem; padding:3px 0; }
.stat-row span{ color:var(--text-dim); }
.stat-row b{ color:var(--text); }
.stat-row.highlight b{ color:#8fb8ff; }
.stat-row.total{ border-top:1px solid var(--panel-b); margin-top:3px; padding-top:5px; font-size:0.82rem; }
.stat-row.total b{ color:var(--ember3); }

/* ---------- Fase 4: comparación de objetos (Inventario) ---------- */
.item-compare{
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--panel-b);
  display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:0.6rem;
}
.item-compare .compare-col-title{ font-size:0.56rem; color:var(--text-dim); text-transform:uppercase; margin-bottom:3px; }
.item-compare .compare-line{ padding:2px 0; }
.item-compare .compare-line.up{ color:#7dffa8; }
.item-compare .compare-line.down{ color:#ff7a6a; }
.item-compare .compare-line.neutral{ color:var(--text-dim); }

/* ---------- Fase 3: secuencia de la pantalla de Victoria ---------- */
#victory-step-body{ width:100%; max-width:380px; text-align:left; }
.vic-hero{ font-family:var(--font-pixel); font-size:clamp(1.3rem, 5vw, 2.1rem); color:#ffd98a; text-align:center; letter-spacing:4px;
  margin:2px 0 8px; text-shadow:0 0 14px rgba(255,190,90,0.65), 3px 3px 0 #2a1206; animation:vicHeroIn 0.6s ease-out; }
@keyframes vicHeroIn{ from{ opacity:0; transform:scale(1.25); } to{ opacity:1; transform:none; } }
/* cofre en horizontal: el objeto al lado del cofre necesita ancho (en 380 px la ficha quedaba en una columna
   de 160 px y "Equipar / Guardar" caían debajo del botón pegajoso "Continuar") */
@media (min-aspect-ratio: 4/3){ #victory-step-body:has(.chest-host){ max-width:min(720px, 94vw); } }
.vic-sub{ text-align:center; color:var(--text-dim); font-size:0.78rem; margin-bottom:14px; }
.vic-role-line{ text-align:center; font-size:0.9rem; margin-bottom:10px; }
.vic-role-line b{ color:var(--ember3); }
.score-big{ text-align:center; font-size:2.2rem; font-weight:800; color:var(--ember3); line-height:1; }
.score-big span{ font-size:1rem; color:var(--text-dim); font-weight:400; }
.score-bar-track{ width:100%; height:10px; border-radius:6px; background:var(--panel-b); overflow:hidden; margin:10px 0 16px; }
.score-bar-fill{ height:100%; background:linear-gradient(90deg, var(--ember1), var(--ember3)); }
.score-row{ display:flex; justify-content:space-between; align-items:center; font-size:0.72rem; padding:6px 0; border-bottom:1px solid var(--panel-b); }
.score-row .score-row-label{ color:var(--text-dim); }
.score-row .score-row-val{ color:var(--text); font-weight:700; }
.vic-party-title{ font-size:0.66rem; color:var(--text-dim); margin:16px 0 6px; text-transform:uppercase; letter-spacing:0.04em; }
.vic-party-row{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:0.72rem; }
.vic-party-row .vp-icon{ width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex:none; font-size:0.78rem; }
.vic-party-row .vp-name{ flex:1; color:var(--text-dim); }
.vic-party-row .vp-score{ font-weight:700; color:var(--ember3); }
.vic-reward-note{ text-align:center; color:var(--text-dim); font-size:0.7rem; margin-bottom:10px; }
.vic-item-actions{ display:flex; gap:6px; margin-top:6px; }
.vic-item-actions button{
  flex:1; font-size:0.6rem; padding:6px 4px; border-radius:7px; border:1px solid var(--panel-b);
  background:var(--panel-b); color:var(--text); font-family:inherit; font-weight:700; cursor:pointer;
}
.vic-item-actions button.primary{ background:var(--ember1); color:#1a0e06; border-color:var(--ember1); }
.vic-item-actions button:disabled{ opacity:0.5; cursor:default; }
.vic-xp-row{ display:flex; justify-content:space-between; font-size:0.8rem; padding:8px 0; border-bottom:1px solid var(--panel-b); }
.vic-xp-row b{ color:var(--ember3); }
.talent-points{
  font-size:0.78rem; color:var(--ember3); text-align:center; margin-bottom:10px;
  background:rgba(255,122,46,0.08); border:1px solid var(--panel-b); border-radius:8px; padding:6px;
}
.mastery-list{ display:flex; flex-direction:column; gap:6px; }
.mastery-row{
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(160deg, var(--panel), #0f0805);
  border:1px solid var(--panel-b); border-radius:10px; padding:6px 8px;
}
.mastery-icon{
  width:30px; height:30px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:1rem; background:rgba(255,122,46,0.12); border:1px solid var(--panel-b);
}
.mastery-info{ flex:1; min-width:0; text-align:left; }
.mastery-name{ font-size:0.72rem; display:flex; justify-content:space-between; gap:6px; margin-bottom:3px; }
.mastery-lvl{ color:var(--ember3); font-weight:700; flex:none; }
.mastery-bar-track{ height:6px; border-radius:4px; background:var(--panel-b); overflow:hidden; }
.mastery-bar-fill{ height:100%; background:linear-gradient(90deg, var(--ember1), var(--ember3)); }
.mastery-stats{ font-size:0.6rem; color:var(--text-dim); margin-top:3px; line-height:1.4; }
.mastery-stats b{ color:var(--ember3); font-weight:700; }
.mastery-next{ color:#7dc98a; }
.mastery-use{ font-size:0.58rem; color:#8fb8ff; margin-top:2px; }
/* evolución de la habilidad: hitos Nv.3/5/7/10 (skill-evolution.js); el alcanzado se enciende */
.evo-lines{ display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; }
.evo-lines .evo{ font-size:0.52rem; padding:1px 4px; border:1px solid #3a3040; color:#7a6f84; background:#140e18; }
.evo-lines .evo i{ display:none; font-style:normal; }
.evo-lines .evo.on{ color:#ffe9a8; border-color:#c9a24a; background:#2a1e0c; }
.evo-lines .evo.next{ color:#c8bcd4; border-color:#6a5a7a; }
.evo-lines .evo.next i, .evo-lines .evo:hover i{ display:inline; }
.mastery-plus{
  width:26px; height:26px; border-radius:7px; flex:none; font-size:1rem; font-weight:700;
  background:#141010; border:1px solid #4a3a2e; color:var(--text-dim); cursor:default;
}
.mastery-plus.ready{
  background:linear-gradient(180deg,#4a2210,#2a1208); border-color:var(--ember1); color:var(--text);
  cursor:pointer; box-shadow:0 0 8px rgba(255,122,46,0.5);
}
.mastery-plus:disabled{ opacity:0.5; }

/* ---------- Talentos y Maestría (ver TALENT_TREES / renderTalentsPanel) ---------- */
.talent-lock-banner{
  font-size:0.72rem; color:#ffb08a; text-align:center; margin-bottom:10px; line-height:1.5;
  background:rgba(255,90,60,0.10); border:1px solid #6a2e1e; border-radius:8px; padding:8px;
}
.talent-branch-title{
  font-size:0.7rem; color:var(--ember3); text-transform:uppercase; letter-spacing:0.05em;
  margin:10px 0 5px; padding-bottom:3px; border-bottom:1px solid var(--panel-b); display:flex; justify-content:space-between;
}
.talent-branch-title span.inv{ color:var(--text-dim); text-transform:none; letter-spacing:0; font-weight:400; }
.talent-row.locked{ opacity:0.62; }
.talent-row.special{ border-color:#6a4a1e; }
.talent-row.special .mastery-icon{ background:rgba(255,207,92,0.14); border-color:#8a6a2e; }
.talent-row.maxed{ border-color:#2e6a3a; }
.talent-badge{
  font-size:0.55rem; padding:1px 5px; border-radius:5px; background:var(--panel-b); color:var(--text-dim);
  text-transform:uppercase; letter-spacing:0.03em; flex:none;
}
.talent-badge.special{ background:rgba(255,207,92,0.18); color:#ffcf5c; }
.talent-lock-reason{ font-size:0.58rem; color:#ff9a7a; margin-top:2px; }
.mastery-section{ margin-top:14px; padding-top:10px; border-top:2px solid var(--panel-b); }
.mastery-choice-card{
  background:linear-gradient(160deg, var(--panel), #0f0805); border:1px solid var(--panel-b); border-radius:10px;
  padding:8px 10px; margin-bottom:8px; text-align:left;
}
.mastery-choice-card.eligible{ border-color:var(--ember1); }
.mastery-choice-card .mc-name{ font-size:0.78rem; color:var(--ember3); font-weight:700; margin-bottom:2px; }
.mastery-choice-card .mc-desc{ font-size:0.65rem; color:var(--text-dim); margin-bottom:6px; line-height:1.4; }
.mastery-emblem{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:4px;
  background:rgba(255,207,92,0.22); border:1px solid #ffcf5c; font-size:0.62rem; margin-left:4px; vertical-align:middle;
}

/* ---------- Resultados: calificación y botín (Loot & Sets V1) ---------- */
.res-rows{ width:100%; max-width:420px; margin:6px auto 10px; }
.res-row{ display:flex; justify-content:space-between; gap:10px; padding:4px 2px; border-bottom:1px solid rgba(255,255,255,0.06); font-family:var(--font-retro); font-size:1.12rem; line-height:1; }
.res-row span{ color:var(--text-dim); }
.perf-grade{ font-family:var(--font-pixel); font-size:3.2rem; color:var(--gc); text-align:center; line-height:1.1;
  text-shadow:0 0 18px var(--gc), 3px 3px 0 #000; animation:gradeIn 0.6s cubic-bezier(.2,1.6,.4,1); }
@keyframes gradeIn{ from{transform:scale(2.2); opacity:0;} to{transform:scale(1); opacity:1;} }
.perf-note{ font-size:0.72rem; color:var(--text-dim); text-align:center; margin:-4px 0 8px; }
.perf-row{ display:flex; align-items:center; gap:8px; max-width:420px; margin:3px auto; font-size:0.8rem; }
.perf-label{ flex:0 0 52%; color:var(--text); }
.perf-bar{ flex:1; height:7px; background:#1a0e0a; border:1px solid #3a1c10; border-radius:4px; overflow:hidden; }
.perf-bar i{ display:block; height:100%; background:linear-gradient(90deg,#b8742a,#ffcf5c); }
.loot-reveal{ width:100%; max-width:440px; margin:0 auto; }
.loot-card{ position:relative; margin:8px 0; padding:8px 10px; border:2px solid var(--tc); border-radius:8px;
  background:linear-gradient(160deg, rgba(20,10,6,0.95), rgba(10,6,4,0.95)); opacity:0; transform:translateY(14px) scale(0.96);
  animation:lootIn 0.5s ease-out forwards; }
.loot-shown .loot-card{ animation:none; opacity:1; transform:none; }
@keyframes lootIn{ to{ opacity:1; transform:none; } }
.loot-card .loot-tier{ font-family:var(--font-pixel); font-size:0.55rem; letter-spacing:1px; color:var(--tc); margin-bottom:4px; }
.loot-card .loot-main{ display:flex; gap:8px; align-items:flex-start; }
.loot-set-line{ font-size:0.72rem; color:#3ddc71; font-weight:700; margin:2px 0; }
.loot-card.tier-comun{ border-width:1px; }
.loot-card.tier-raro{ box-shadow:0 0 8px rgba(79,168,240,0.45); }
.loot-card.tier-muyraro{ box-shadow:0 0 12px rgba(255,225,74,0.55); }
.loot-card.tier-legendario{ box-shadow:0 0 18px rgba(255,176,32,0.8); }
.loot-card.tier-legendario::after, .loot-card.tier-mitico::after, .loot-card.tier-set::after{
  content:""; position:absolute; inset:0; border-radius:6px; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%); background-size:250% 100%;
  animation:lootShine 2.2s ease-in-out infinite; }
.loot-card.tier-set{ box-shadow:0 0 16px rgba(61,220,113,0.75); }
.loot-card.tier-mitico{ box-shadow:0 0 26px rgba(255,77,77,0.95); animation:lootIn 0.5s ease-out forwards, mythPulse 1.1s ease-in-out 0.5s infinite alternate; }
@keyframes lootShine{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
@keyframes mythPulse{ from{ box-shadow:0 0 16px rgba(255,77,77,0.7); } to{ box-shadow:0 0 34px rgba(255,77,77,1); } }
#victory-screen.loot-flash-legendario{ animation:scrFlashO 0.8s ease-out; }
#victory-screen.loot-flash-mitico{ animation:scrFlashR 0.9s ease-out; }
@keyframes scrFlashO{ 0%{ box-shadow:inset 0 0 120px rgba(255,176,32,0.8); } 100%{ box-shadow:inset 0 0 0 rgba(255,176,32,0); } }
@keyframes scrFlashR{ 0%{ box-shadow:inset 0 0 160px rgba(255,60,60,0.9); } 100%{ box-shadow:inset 0 0 0 rgba(255,60,60,0); } }

/* ---------- Inventario: panel de set ---------- */
.set-panel{ margin-top:6px; padding:6px 8px; border:1px solid rgba(61,220,113,0.5); border-radius:6px; background:rgba(20,40,24,0.35); font-size:0.74rem; }
.set-panel .sp-title{ color:#3ddc71; font-weight:700; margin-bottom:3px; }
.set-panel .sp-theme{ color:var(--text-dim); font-style:italic; margin-bottom:4px; }
.set-panel .sp-piece{ display:flex; gap:6px; }
.set-panel .sp-piece.have{ color:#cfe9d4; }
.set-panel .sp-piece.miss{ color:#7c8a7f; }
.set-panel .sp-bonus{ margin-top:3px; color:#7c8a7f; }
.set-panel .sp-bonus.on{ color:#3ddc71; }
.set-panel .sp-reforge{ margin-top:5px; }

/* ---------- Pausa (solo pruebas): nota + estadísticas ---------- */
.pause-note{ max-width:460px; font-size:0.72rem; color:var(--text-dim); line-height:1.5; margin:-14px 0 12px; }
.tp-note{ color:var(--text-dim); font-weight:400; font-size:0.66rem; }

/* ---------- Pestañas de la Sala y de la ficha de Mis Campeones ---------- */
.hub-tabs{ display:flex; gap:6px; width:100%; max-width:560px; margin:4px 0 10px; }
.hub-tab{
  flex:1; padding:8px 6px; border:3px solid #000; background:linear-gradient(160deg, var(--panel), #0f0805);
  color:var(--text-dim); font-family:var(--font-retro); font-size:0.95rem; cursor:pointer;
  box-shadow: inset 1px 1px 0 rgba(255,180,120,0.14), 2px 2px 0 #000;
}
.hub-tab.active{ color:var(--ember3); border-color:var(--ember1); background:rgba(255,122,46,0.12); }
#prep-inventory-panel, #prep-skills-panel, #champhub-panel{ width:100%; max-width:560px; margin-bottom:12px; }
#prep-talents-panel{ width:100%; max-width:980px; margin-bottom:12px; }
#champhub-panel.tree-wide{ max-width:980px; }

/* ---------- Árbol de talentos (renderTalentTree) ---------- */
.tt-wrap{ width:100%; text-align:left; }
.tt-root{
  margin:0 auto 18px; width:max-content; max-width:100%; display:flex; align-items:center; gap:8px; position:relative;
  padding:6px 12px; border:3px solid; background:linear-gradient(160deg, var(--panel), #0f0805); font-size:0.78rem;
  box-shadow:2px 2px 0 #000;
}
.tt-root::after{ content:""; position:absolute; left:50%; bottom:-19px; width:2px; height:16px; background:#6a4a2e; }
.tt-root-ico{ font-size:1.2rem; }
.tt-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; position:relative; padding-top:14px; }
/* barra horizontal que une la raíz con las 3 ramas */
.tt-cols::before{ content:""; position:absolute; top:0; left:16.66%; right:16.66%; height:2px; background:#6a4a2e; }
.tt-col{ position:relative; min-width:0; }
.tt-col::before{ content:""; position:absolute; top:-14px; left:50%; width:2px; height:14px; background:#6a4a2e; }
.tt-branch{
  display:flex; justify-content:space-between; align-items:baseline; gap:6px; padding:5px 8px; margin-bottom:8px;
  font-family:var(--font-retro); font-size:1rem; color:var(--ember3); text-transform:uppercase;
  border:2px solid #000; background:rgba(255,122,46,0.10);
}
.tt-branch small{ color:var(--text-dim); font-size:0.75rem; text-transform:none; }
.tt-chain{ position:relative; display:flex; flex-direction:column; gap:10px; }
/* línea vertical de la rama, por detrás de los íconos */
.tt-chain::before{ content:""; position:absolute; left:17px; top:18px; bottom:18px; width:2px; background:#4a3424; }
.tt-node{ position:relative; display:flex; align-items:flex-start; gap:8px; }
.tt-ico{
  position:relative; z-index:1; flex:none; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  background:#140c08; border:2px solid #4a3424; color:#8a7666;
}
.tt-node.special .tt-ico{ border-radius:9px; border-style:double; border-width:4px; }
.tt-rank{ position:absolute; bottom:-7px; right:-9px; font-size:0.55rem; padding:0 3px; border-radius:6px;
  background:#000; border:1px solid #4a3424; color:var(--text-dim); line-height:12px; }
.tt-node.avail .tt-ico{ border-color:var(--ember1); color:var(--ember3); box-shadow:0 0 8px rgba(255,122,46,0.55); }
.tt-node.owned .tt-ico{ border-color:#ffcf5c; color:#ffcf5c; background:#2a1c08; }
.tt-node.maxed .tt-ico{ border-color:#3ddc71; color:#3ddc71; background:#0c2414; }
.tt-node.locked{ opacity:0.72; }
.tt-txt{ flex:1; min-width:0; }
.tt-name{ font-size:0.72rem; font-weight:700; color:var(--text); line-height:1.25; }
.tt-node.owned .tt-name, .tt-node.maxed .tt-name{ color:#ffcf5c; }
.tt-desc{ font-size:0.62rem; color:var(--text-dim); line-height:1.35; }
.tt-eff{ font-size:0.6rem; color:#ffcf5c; line-height:1.35; }
.tt-eff.next{ color:#7dc98a; }
.tt-lock{ font-size:0.58rem; color:#ff9a7a; line-height:1.3; }
/* Sinergias del árbol (estilo Diablo II) y reinicio por oro */
.tt-syn{ font-size:0.58rem; color:#9fd8ff; line-height:1.3; }
.tt-synergies{ margin:0 0 10px; padding:7px 9px; border:1px solid #2e4a6a; border-radius:8px; background:rgba(95,176,255,0.06); }
.tt-syn-title{ font-size:0.66rem; color:#9fd8ff; font-weight:700; margin-bottom:3px; letter-spacing:0.04em; }
.tt-syn-row{ font-size:0.6rem; color:var(--text-dim); line-height:1.4; }
.tt-syn-row.on{ color:#cfe9ff; }
.tt-respec{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin:0 0 10px;
  font-size:0.6rem; color:var(--text-dim); }
.tt-respec-btn{ padding:4px 9px; font-size:0.66rem; }
.tt-respec-btn:disabled{ opacity:0.5; }
.mastery-syn{ font-size:0.56rem; color:#9fd8ff; margin-top:2px; line-height:1.3; }
.tt-cost{ font-size:0.55rem; color:#ffd76a; font-weight:400; }
.tt-buy{ flex:none; align-self:center; }
.tt-fork{ position:relative; border:1px dashed #8a6a2e; border-radius:8px; padding:14px 6px 6px; display:flex; flex-direction:column; gap:6px; background:rgba(255,207,92,0.04); }
.tt-fork-label{ position:absolute; top:-8px; left:40px; font-size:0.56rem; padding:0 5px; background:#0d0705; color:#ffd76a; }
.tt-fork-or{ font-size:0.6rem; color:#ffd76a; margin-left:12px; }
.tt-crown .tt-ico{ font-size:1.2rem; border-color:#8a6a2e; color:#ffd76a; }
.tt-crown.avail .tt-ico{ box-shadow:0 0 12px rgba(255,207,92,0.8); }
.tt-crown .tt-name{ color:#ffd76a; }
.tt-crown .mastery-pick-btn{ margin-top:4px; padding:5px 8px; font-size:0.7rem; }

/* ---------- Mis Campeones ---------- */
#champions-screen, #champhub-screen{ justify-content:flex-start; }
#mychamps-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:100%; max-width:440px; margin-bottom:12px; }
.mychamp-card{ display:flex; flex-direction:column; align-items:center; padding:10px 8px; }
.mychamp-meta{ font-size:0.72rem; color:var(--text-dim); }
.mychamp-pts{ color:#ffcf5c; }
.hub-head{ display:flex; gap:12px; align-items:center; width:100%; max-width:560px; text-align:left; margin-bottom:4px; }
.hub-anim{ width:72px; height:72px; flex:none; border:2px solid #000; image-rendering:pixelated; }
.hub-head-txt{ flex:1; min-width:0; }
.hub-name{ font-family:var(--font-retro); font-size:1.5rem; line-height:1; text-shadow:2px 2px 0 #000; }
.hub-meta{ font-size:0.72rem; color:var(--text); margin-top:2px; }
.hub-meta.dim{ color:var(--text-dim); font-size:0.64rem; }
.hub-xp{ height:5px; background:var(--panel-b); margin-top:4px; }
.hub-xp > div{ height:100%; background:linear-gradient(90deg, var(--ember1), var(--ember3)); }
@media (orientation: landscape) and (max-height: 520px){
  #mychamps-grid{ grid-template-columns:repeat(5,1fr); max-width:760px; gap:8px; }
  .mychamp-card{ padding:6px 4px; }
  .mychamp-card .gallery-card-name{ font-size:0.9rem; }
}
@media (max-width: 640px) and (orientation: portrait){
  .tt-cols{ grid-template-columns:1fr; }
  .tt-cols::before, .tt-col::before{ display:none; }
}

/* ---- Inventario de la cuenta (Mi Inventario / vista por campeón) ---- */
.hub-tabs-top{ justify-content:center; }
.inv-filters{ display:flex; flex-wrap:wrap; gap:5px; margin:4px 0 6px; }
.inv-chip{ font-family:inherit; font-size:0.6rem; padding:4px 8px; border-radius:12px; border:1px solid rgba(255,255,255,0.18); background:rgba(0,0,0,0.35); color:var(--text-dim); cursor:pointer; }
.inv-chip.on{ border-color:var(--ember1); color:var(--ember3); background:rgba(255,122,46,0.14); }
.inv-filters select{ font-family:inherit; font-size:0.62rem; padding:4px 6px; background:#1a120c; color:var(--text); border:1px solid rgba(255,255,255,0.2); border-radius:6px; }
.inv-list.tall{ max-height:52vh; }
.inv-card.incompat{ opacity:0.62; }
.inv-card .item-epithet{ font-size:0.55rem; color:#e8c890; font-style:italic; }
.inv-card .item-mythic{ color:#ff6a5a; font-weight:700; }
.inv-card .item-unique{ color:#c68cff; font-weight:700; }
.inv-card .item-build{ color:#ffc24a; font-weight:700; }
.inv-card .item-mage{ color:#c9a8ff; font-weight:700; }
.inv-card .item-recipe{ color:#e8c890; }
.inv-owner{ color:#ffb0a0; font-weight:700; }
.inv-by{ color:#8fd0ff; font-weight:700; }
.inv-by.me{ color:#7dff9a; }
.inv-elem{ margin-right:3px; }
.inv-card.tier-legendario{ box-shadow:inset 0 0 0 1px rgba(255,176,32,0.25); }
.inv-card.tier-mitico{ box-shadow:inset 0 0 0 1px rgba(255,77,77,0.45), 0 0 8px rgba(255,77,77,0.25); }
.inv-card.tier-unico{ box-shadow:inset 0 0 0 1px rgba(176,106,255,0.6), 0 0 12px rgba(176,106,255,0.35); }
.inv-card.tier-set{ box-shadow:inset 0 0 0 1px rgba(61,220,113,0.35); }
.inv-capacity a{ color:var(--ember3); }
/* Recetas */
.recipe-card{ border:1px solid rgba(255,77,77,0.35); border-radius:8px; padding:8px 10px; margin:0 0 8px; background:rgba(40,8,8,0.35); max-width:560px; }
.recipe-card.ready{ border-color:#ff4d4d; box-shadow:0 0 14px rgba(255,77,77,0.35); }
.rc-head{ display:flex; justify-content:space-between; align-items:center; }
.rc-title{ color:#ff6a5a; font-weight:700; font-size:0.75rem; }
.rc-count{ font-weight:700; color:var(--ember3); font-size:0.75rem; }
.rc-power{ font-size:0.58rem; color:#ffb0a0; margin:3px 0 5px; }
.rc-part{ display:flex; gap:6px; align-items:baseline; font-size:0.6rem; padding:2px 0; }
.rc-part.miss{ opacity:0.8; }
.rc-mark{ width:14px; font-weight:700; color:#7dff9a; }
.rc-part.miss .rc-mark{ color:#8a8078; }
.rc-where{ color:var(--text-dim); font-size:0.54rem; margin-left:auto; text-align:right; }
.rc-craft{ margin-top:6px; }
.rc-owned{ font-size:0.54rem; color:var(--text-dim); margin-top:4px; }
/* Colección */
.col-group{ margin:6px 0 10px; max-width:640px; }
.col-title{ font-weight:700; font-size:0.66rem; margin-bottom:4px; }
.col-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:5px; }
.col-cell{ border:1px solid rgba(255,255,255,0.1); border-radius:6px; padding:4px 6px; display:flex; flex-direction:column; opacity:0.5; background:rgba(0,0,0,0.3); }
.col-cell.have{ opacity:1; border-color:var(--cc); }
.col-ico{ font-size:0.9rem; }
.col-name{ font-size:0.56rem; color:var(--cc); font-weight:700; }
.col-cell:not(.have) .col-name{ color:#8a8078; }
.col-hint{ font-size:0.5rem; color:var(--text-dim); }

/* ---- Ceremonia del cofre (js/ui/loot-ceremony.js) ---- */
.chest-host{ position:relative; display:flex; flex-direction:column; align-items:stretch; }
@media (min-aspect-ratio: 4/3){ .chest-host{ flex-direction:row; gap:10px; align-items:flex-start; } .chest-host .chest-stage{ flex:none; width:210px; } .chest-host .chest-items{ flex:1; max-height:58vh; overflow-y:auto; margin-top:6px; } }
.chest-stage{ position:relative; display:flex; flex-direction:column; align-items:center; margin:6px 0 4px; }
.chest-name{ font-size:0.62rem; color:var(--text-dim); letter-spacing:0.04em; margin-bottom:2px; }
.chest-cv{ width:204px; height:150px; background:transparent; image-rendering:pixelated; image-rendering:crisp-edges; }
.chest-open-btn{ margin-top:4px; padding:6px 26px; }
.chest-banner{ position:absolute; top:40%; left:50%; transform:translate(-50%,-50%) scale(0.6); opacity:0; pointer-events:none;
  font-family:var(--font-pixel); font-size:1.3rem; color:var(--bc,#fff); text-shadow:0 0 12px var(--bc,#fff), 0 2px 0 #000; white-space:nowrap; }
.chest-banner.show{ animation:chestBanner 1.6s ease-out forwards; }
@keyframes chestBanner{ 0%{opacity:0; transform:translate(-50%,-50%) scale(0.5);} 15%{opacity:1; transform:translate(-50%,-50%) scale(1.15);} 30%{transform:translate(-50%,-50%) scale(1);} 80%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-80%) scale(1);} }
.chest-flash{ position:absolute; inset:-40px; pointer-events:none; animation:chestFlash 0.9s ease-out forwards; z-index:3; }
@keyframes chestFlash{ 0%{opacity:0;} 12%{opacity:1;} 100%{opacity:0;} }
.chest-quake{ animation:chestQuake 0.5s linear; }
@keyframes chestQuake{ 0%,100%{transform:translate(0,0);} 20%{transform:translate(-4px,2px);} 40%{transform:translate(4px,-2px);} 60%{transform:translate(-3px,-1px);} 80%{transform:translate(3px,1px);} }
.chest-host.jackpot{ background:radial-gradient(ellipse at center, rgba(90,40,160,0.35) 0%, rgba(0,0,0,0.0) 70%); }
.chest-host.jackpot .chest-banner{ font-size:1.9rem; }
.chest-skip{ text-align:center; font-size:0.55rem; color:var(--text-dim); opacity:0.6; margin-top:2px; }
.chest-items .loot-card{ animation:lootIn 0.45s ease-out forwards; }
.loot-card.tier-unico{ --tc:#b06aff; box-shadow:0 0 30px rgba(176,106,255,0.95); animation:lootIn 0.6s ease-out forwards, mythPulse 0.9s ease-in-out 0.6s infinite alternate; }
.loot-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.78); z-index:80; display:flex; align-items:center; justify-content:center; }
.loot-overlay-box{ width:min(560px, 92vw); max-height:92vh; max-height:92dvh; overflow:auto; background:#140c08; border:1px solid var(--panel-b); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; align-items:center; }
.loot-overlay-body{ width:100%; }
.loot-summary-line{ text-align:center; font-size:0.72rem; color:var(--text-dim); margin:0 0 4px; }
.loot-summary-note{ font-size:0.55rem; opacity:0.7; margin-top:1px; }

/* ---------- Íconos de objetos (item-icons.js) + vista previa (item-preview.js) ---------- */
.item-icon-img{ width:40px; height:40px; flex:none; image-rendering:pixelated; border-radius:6px; display:block; }
.inv-card{ position:relative; }
.inv-card .item-lv{ position:absolute; left:6px; bottom:3px; font-size:0.48rem; font-weight:700; color:#fff; background:rgba(0,0,0,0.7); border-radius:3px; padding:0 3px; }
.inv-slot .slot-icon-img{ width:34px; height:34px; margin:0 auto 3px; }
.inv-slot .slot-lv{ color:var(--text-dim); font-size:0.5rem; }
.loot-card .item-icon-img{ width:48px; height:48px; }
.gem-note{ color:#8fe3ff; }
#item-preview{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:16px; }
#item-preview .ip-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.72); }
#item-preview .ip-panel{ position:relative; width:100%; max-width:420px; max-height:88vh; overflow-y:auto; background:linear-gradient(160deg, var(--panel), #0f0805); border:1.5px solid var(--panel-b); border-radius:14px; padding:14px; box-sizing:border-box; }
.ip-card{ border-top:3px solid var(--ic); padding-top:8px; }
.ip-top{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.ip-top .ip-art{ width:72px; height:72px; }
.ip-head{ min-width:0; flex:1; }
.ip-name{ font-size:0.9rem; font-weight:700; line-height:1.2; }
.ip-epi{ font-size:0.62rem; color:var(--text-dim); font-style:italic; }
.ip-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; font-size:0.56rem; color:var(--text-dim); }
.ip-tags > span{ border:1px solid var(--panel-b); border-radius:4px; padding:1px 4px; }
.ip-sec{ margin-top:9px; font-size:0.64rem; }
.ip-h{ font-size:0.56rem; font-weight:700; letter-spacing:0.08em; color:var(--ember3); margin-bottom:3px; }
.ip-sub{ color:var(--text-dim); font-size:0.56rem; }
.ip-line{ padding:1px 0; line-height:1.35; }
.ip-line.item-proc{ color:#ffb020; }
.ip-dup{ color:#ff8a6a; font-size:0.54rem; }
.ip-pieces{ display:flex; flex-wrap:wrap; gap:3px; margin:3px 0; }
.ip-piece{ font-size:0.54rem; border-radius:4px; padding:1px 4px; border:1px solid var(--panel-b); }
.ip-piece.eq{ color:#7dffa8; border-color:#3ddc71; }
.ip-piece.have{ color:#cfe9d6; }
.ip-piece.miss{ color:var(--text-dim); opacity:0.7; }
.ip-bonus{ font-size:0.58rem; color:var(--text-dim); padding:1px 0; }
.ip-bonus.on{ color:#7dffa8; }
.ip-upg-btn{ padding:5px 9px; border-radius:7px; border:1px solid #8fe3ff; background:rgba(143,227,255,0.08); color:#8fe3ff; font-family:inherit; font-weight:700; font-size:0.62rem; cursor:pointer; opacity:0.6; }
.ip-upg-btn.ready{ opacity:1; background:rgba(143,227,255,0.18); }
.ip-upg.max{ color:#ffd76a; font-weight:700; }
.ip-lore{ color:var(--text-dim); }
.ip-actions{ display:flex; gap:8px; margin-top:12px; }
.ip-actions button{ flex:1; padding:8px; border-radius:9px; border:1px solid var(--panel-b); background:var(--panel-b); color:var(--text); font-family:inherit; font-weight:700; font-size:0.7rem; cursor:pointer; }
.ip-actions button.primary{ background:var(--ember1); color:#1a0e06; border-color:var(--ember1); }
.ip-actions button:disabled{ opacity:0.45; cursor:default; }
@media (max-width:420px){ #item-preview{ padding:8px; } #item-preview .ip-panel{ max-height:94vh; max-height:94dvh; padding:10px; } .ip-top .ip-art{ width:56px; height:56px; } }
.ip-line.item-effect{ color:#ffe08a; } .ip-line.item-mythic{ color:#ff6a6a; } .ip-line.item-unique{ color:#e0b0ff; } .ip-line.item-build{ color:#ffc24a; font-weight:700; } .ip-line.item-mage{ color:#c9a8ff; font-weight:700; } .ip-line.item-recipe{ color:#b9d6ff; } .ip-line.item-passive{ color:#8fb8ff; }

/* Derrota: el golpe es el título (grande, en pixel) y el resultado va debajo en letra de cuerpo. Antes era al
   revés: "La Horda te ha consumido" chiquito y "Nivel 2 · 77 bajas · Calificación C" gigante en dos renglones. */
#go-title{ font-family:var(--font-pixel); font-size:clamp(1rem, 3.6vw, 1.7rem); line-height:1.4; margin-bottom:10px;
  text-shadow:3px 3px 0 #000, 0 0 16px rgba(198,40,40,0.55); }
#gameover-screen #go-stats{ font-family:var(--font-retro); font-size:1.6rem; line-height:1.1; text-shadow:2px 2px 0 #000; margin-bottom:4px; }
/* Pantallas de fin de partida en letra pixel (antes Georgia: la calificación, el equipo y el cofre eran lo único
   con serifas del juego) */
#victory-screen, #gameover-screen{ font-family:var(--font-retro); }
.vic-sub{ font-size:1.1rem; }
.vic-role-line{ font-size:1.25rem; }
.perf-row{ font-size:1.15rem; line-height:1; }
.vic-party-row{ font-size:1.1rem; }
.vic-party-row .vp-score{ font-family:var(--font-pixel); font-size:0.8rem; font-weight:normal; }
.vic-party-title{ font-size:1rem; }
/* Victoria en el teléfono acostado: las últimas palabras del jefe (lo que más importa de la pantalla) quedaban debajo
   del botón pegajoso "Continuar". Van arriba de la tabla, y la tabla pasa a dos columnas. */
#victory-step-body:has(.story-vic){ display:flex; flex-direction:column; }
#victory-step-body .vic-hero{ order:-2; }
#victory-step-body .story-vic{ order:-1; margin:0 auto 8px; }
@media (max-height:500px) and (min-aspect-ratio:4/3){
  #victory-step-body:has(.res-rows){ max-width:min(720px, 94vw); }
  #victory-step-body .res-rows{ display:grid; grid-template-columns:1fr 1fr; column-gap:22px; max-width:none; }
  #victory-step-body .vic-hero{ font-size:1.4rem; margin-bottom:6px; }
}
/* Talentos tempranos: franja de escalones (cuáles ya abrió el nivel del guardián) */
.talent-lock-banner.tt-progress{ color:var(--text-dim); background:rgba(255,190,90,0.06); border-color:#5a3e1e; }
.talent-lock-banner.tt-progress b{ color:#8a7a66; font-weight:400; white-space:nowrap; }
.talent-lock-banner.tt-progress b.tt-tier-on{ color:#ffd27a; font-weight:700; }
/* Pausa: refuerzos de habilidad de la incursión (nombre, habilidad y qué hace) */
.stat-row.boon-row{ align-items:flex-start; gap:8px; }
.stat-row.boon-row small{ color:var(--text-dim); font-size:0.66rem; line-height:1.25; }
/* teléfono acostado: el título de la derrota ocupaba todo el ancho y el aviso de Desafíos (arriba a la derecha) lo cortaba */
@media (max-height:500px){ #go-title{ font-size:min(2.7vw, 1.4rem); max-width:calc(100vw - 300px); margin-left:auto; margin-right:auto; } }

/* ===== Panel táctico (js/ui/tactical-panel.js) ===== */
#pause-screen{ overflow-y:auto; }
#pause-screen.tactical-live{ background:rgba(8,5,3,0.62); backdrop-filter:blur(1px); }
#tactical-panel{ width:min(760px, 100%); margin:0 0 12px; font-family:var(--font-body); color:var(--text); }
#tactical-panel .tp-head{ text-align:center; margin-bottom:6px; }
#tactical-panel .tp-name{ font-family:var(--font-retro); font-size:24px; color:#ffe3b8; }
#tactical-panel .tp-sub{ font-size:14px; color:var(--text-dim); }
#tactical-panel .tp-bars{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px 14px; font-size:15px; margin-top:3px; }
#tactical-panel .tp-section{ background:rgba(20,12,8,0.78); border:1px solid #4a2a16; border-radius:8px; padding:6px 8px; margin-top:6px; }
#tactical-panel .tp-h{ font-family:var(--font-pixel); font-size:11px; letter-spacing:1px; color:#d9a66a; text-transform:uppercase; margin-bottom:4px; }
#tactical-panel .tp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px; }
#tactical-panel .tp-grid .ab-card{ font-size:13px; padding:6px 8px; }
#tactical-panel .tp-grid .ab-name{ font-size:17px; }
#tactical-panel .tp-list{ margin:0; padding-left:16px; font-size:13px; overflow-wrap:anywhere; }
#tactical-panel .tp-list li.off{ color:var(--text-dim); }
#tactical-panel .tp-set{ margin-top:4px; font-size:14px; }
#tactical-panel .tp-empty{ font-size:13px; color:var(--text-dim); }
#tactical-panel .ab-card{ text-align:left; }
#tactical-panel .tp-grid .ab-name{ white-space:normal; overflow:visible; line-height:1; }
#tactical-panel .tp-section{ text-align:left; }
#tactical-panel .tp-rule{ font-size:13px; margin:2px 0; overflow-wrap:anywhere; }
#tactical-panel .tp-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
#tactical-panel .tp-actions .btn{ min-height:44px; }

/* Derrota clara: arriba, en letra legible, qué se perdió y el botón de reintentar; el resumen va debajo. Nada queda
   bajo el botón fijo (padding inferior). */
#gameover-screen{ padding-bottom:calc(24px + env(safe-area-inset-bottom,0px)); }
#go-loss{ max-width:min(640px, 94vw); margin:0 auto 10px; font-size:1.05rem; line-height:1.25; text-align:center; text-shadow:1px 1px 0 #000; }
#go-loss .go-loss-sub{ display:block; margin-top:4px; font-size:0.95rem; color:#cfc6b0; }
#go-loss .go-loss-cp{ display:block; margin-top:6px; }
#go-loss .go-loss-cp .go-loss-sub{ color:#e6dec8; }
#go-loss:empty{ display:none; }
#retry-from1-btn{ position:static; }
#gameover-screen #retry-btn{ position:static; box-shadow:4px 4px 0 #000; }
#gameover-screen #go-stats{ margin-top:14px; }
#gameover-screen .save-line{ margin-top:8px; }
@media (max-height:500px){ #go-title{ font-size:min(2.2vw, 1.15rem); margin-bottom:6px; } }
@media (max-height:500px){ #go-loss{ max-width:min(640px, calc(100vw - 300px)); } }