/* ============ Astral Rift — interfaz estilo Mundo Misterioso ============
 * Cajas azules con doble borde blanco, como los menús de PMD, y fuente pixel
 * local (Pixelify Sans, OFL).
 */
/* Pixelify Sans con los números redibujados para que no se confundan (tools/make_font.py). */
@font-face {
  font-family: 'Pixelify';
  src: url('../assets/fonts/PixelifyPS-400.ttf') format('truetype');
  font-weight: 400 550;
  font-display: block;
}
@font-face {
  font-family: 'Pixelify';
  src: url('../assets/fonts/PixelifyPS-700.ttf') format('truetype');
  font-weight: 551 900;
  font-display: block;
}

:root {
  --ink: #f8fafc;
  --muted: #a39bb5;
  --box1: #1d182e;
  --box2: #120f1d;
  --edge: #2dd4bf;
  --edge-bronze: #d4af37;
  --edge-in: rgba(212, 175, 55, 0.25);
  --edge-out: #090710;
  --gold: #f59e0b;
  --gold2: #d4af37;
  --red: #f43f5e;
  --green: #10b981;
  --shadow: #07050e;
  --r1: #94a3b8; --r2: #10b981; --r3: #2dd4bf; --r4: #c084fc; --r5: #f59e0b;
  --font: 'Pixelify', 'Segoe UI', system-ui, sans-serif;
  --bevel-10: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  --bevel-8: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  --bevel-6: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  --bevel-oct: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
html, body, #game-container, canvas {
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html, body { height: 100%; margin: 0; }
body {
  background: #030712;
  color: var(--ink);
  font: 16px/1.35 var(--font);
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: none;
}
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
#game { display: block; width: 100vw; height: 100vh; height: 100dvh; touch-action: none; }
button { font: inherit; color: inherit; }
input { font: inherit; -webkit-user-select: text; user-select: text; }

/* ---------- capas de pantalla ---------- */
.scr {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: calc(20px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
  animation: fade .2s ease-out;
}
.scr.hidden { display: none; }
/* Pantallas que se abren con la barra superior a la vista: empiezan debajo de ella. */
@media (min-height: 521px) {
  #scr-goals, #scr-dex, #scr-catalysts, #scr-upgrades, #scr-gacha, #scr-friends, #scr-rank, #scr-lobby, #scr-profile {
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}
.scr.dim { background: radial-gradient(circle at 50% 40%, rgba(15,23,42,.72), rgba(3,7,18,.92)); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Paneles Dark Aether con bordes biselados ---------- */
.box {
  position: relative;
  background: linear-gradient(165deg, rgba(17, 24, 39, 0.96), rgba(9, 13, 22, 0.98));
  border: 2px solid var(--edge);
  border-radius: 4px;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.22), inset 0 0 0 1px var(--edge-in), 0 18px 50px rgba(0,0,0,.75);
  padding: 20px 22px;
  text-shadow: 2px 2px 0 var(--shadow);
  animation: pop .22s ease-out;
  max-height: 100%;
  overflow: auto;
}
.box h1, .box h2, .box h3 { margin: 0 0 6px; font-weight: 700; letter-spacing: .5px; }
.box h2 { font-size: 26px; }
.box h3 { font-size: 18px; }
.sub { color: var(--muted); margin: 0 0 16px; font-size: 15px; }
.gold { color: var(--gold); }
.center { text-align: center; }

/* ---------- botones Dark Aether ---------- */
.btn {
  appearance: none; cursor: pointer;
  padding: 9px 18px;
  border: 2px solid var(--edge);
  border-radius: 4px;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  background: linear-gradient(180deg, #1e293b, #0f172a);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
  font-size: 16px; font-weight: 700;
  text-shadow: 1px 1px 0 var(--shadow);
  transition: transform .06s, filter .12s, border-color .12s;
}
.btn:hover { filter: brightness(1.18); border-color: #67e8f9; }
.btn:active { transform: translateY(2px); }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
.btn.gold {
  background: linear-gradient(180deg, #fbbf24, #d97706);
  color: #1c1917; text-shadow: 1px 1px 0 rgba(255,255,255,.35);
  border-color: #fef08a;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
}
.btn.ghost { background: rgba(15, 23, 42, 0.55); box-shadow: none; border-color: rgba(148, 163, 184, 0.35); }
.btn.small { padding: 6px 12px; font-size: 14px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }

/* Lista de menú con cursor */
.menu-list { display: flex; flex-direction: column; gap: 4px; }
.menu-item {
  appearance: none; background: none; border: 0; cursor: pointer;
  text-align: left; padding: 8px 10px 8px 30px; border-radius: 6px;
  font-size: 22px; font-weight: 700; letter-spacing: .5px;
  text-shadow: 2px 2px 0 var(--shadow);
  position: relative;
}
.menu-item small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.menu-item::before {
  content: ''; position: absolute; left: 6px; top: 14px; width: 16px; height: 24px;
  background: var(--ico-cursor) no-repeat center / contain; image-rendering: pixelated;
  opacity: 0; transition: opacity .1s, transform .1s; transform: translateX(-4px);
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(6, 182, 212, 0.12); outline: none; }
.menu-item:hover::before, .menu-item:focus-visible::before { opacity: 1; transform: none; }
.menu-item.play { font-size: 30px; color: var(--gold); }
.menu-item { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; align-items: center; }
.menu-item small { grid-column: 2; }
.mi-ico { grid-row: span 2; display: flex; }

/* ---------- formularios ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tab {
  flex: 1; padding: 8px; cursor: pointer; border-radius: 6px;
  background: rgba(0,0,0,.35); border: 2px solid transparent;
  text-align: center; font-weight: 700;
}
.tab.on { border-color: var(--edge); background: rgba(6, 182, 212, 0.14); color: #67e8f9; }
label { display: block; font-size: 14px; color: var(--muted); margin: 8px 0 4px; }
.field {
  width: 100%; padding: 10px 12px;
  background: #090d16; color: #fff;
  border: 2px solid rgba(6, 182, 212, 0.35); border-radius: 6px;
  font-size: 17px; outline: none;
}
.field:focus { border-color: var(--edge); }
.err { color: #fda4af; min-height: 20px; font-size: 14px; margin: 8px 0 0; }
.note { color: var(--muted); font-size: 13px; margin-top: 14px; }

/* ---------- pantalla de inicio (Emblema Dark Aether: ASTRAL RIFT / BESTHERS) ---------- */
.logo { text-align: center; margin-bottom: 14px; }
.logo .t1 { font-size: 42px; font-weight: 900; line-height: 1; color: #38bdf8;
  text-shadow: 0 0 22px rgba(6, 182, 212, 0.65), 0 0 8px rgba(103, 232, 249, 0.45), 3px 3px 0 #0e7490, 5px 5px 0 var(--shadow); letter-spacing: 2px; }
.logo .t2 { font-size: 16px; font-weight: 800; color: var(--gold); margin-top: 6px; letter-spacing: 6px; text-transform: uppercase;
  text-shadow: 0 0 14px rgba(245, 158, 11, 0.5), 2px 2px 0 var(--shadow); }

/* ---------- Cámara de Invocación (Selector Directo de Guardián) ---------- */
.summon-box { width: min(980px, 100%); padding: 16px 20px; }
.summon-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; border-bottom: 1px solid rgba(6, 182, 212, 0.25); padding-bottom: 10px;
}
.summon-kicker { font-size: 11px; letter-spacing: 2px; color: #38bdf8; font-weight: 700; }
.biome-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.biome-pill {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 4px; font-size: 12px; font-weight: 700;
  background: rgba(15, 23, 42, 0.85); border: 1.5px solid rgba(148, 163, 184, 0.3);
  transition: border-color .12s, background .12s, transform .08s;
}
.biome-pill .b-dot { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); }
.biome-pill:hover { border-color: var(--b-col, #06b6d4); }
.biome-pill.on {
  border-color: var(--b-col, #06b6d4);
  background: rgba(6, 182, 212, 0.16);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.28);
  color: #fff;
}
.summon-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.summon-card {
  position: relative; cursor: pointer;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.78), rgba(9, 13, 22, 0.94));
  border: 2px solid rgba(148, 163, 184, 0.26);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .1s, border-color .14s, box-shadow .14s;
}
.summon-card:hover { transform: translateY(-2px); border-color: var(--card-accent, #06b6d4); }
.summon-card.on {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(17, 24, 39, 0.98));
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35), inset 0 0 14px rgba(245, 158, 11, 0.12);
}
.sc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; }
.sc-role { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.sc-name { font-size: 20px; margin: 0; color: #fff; }
.summon-stage-wrap {
  display: flex; justify-content: center; align-items: center;
  background: radial-gradient(ellipse at 50% 80%, rgba(56, 189, 248, 0.18), rgba(9, 13, 22, 0.85) 70%);
  border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 6px; height: 84px;
}
.sc-desc { font-size: 12px; color: var(--muted); margin: 0; min-height: 2.5em; line-height: 1.25; }
.sc-stats { display: flex; flex-direction: column; gap: 4px; background: rgba(3, 7, 18, 0.55); padding: 6px 8px; border-radius: 5px; }
.sc-stat { display: grid; grid-template-columns: 62px 1fr 34px; gap: 6px; align-items: center; font-size: 12px; }
.sc-stat span { color: var(--muted); }
.sc-stat b { text-align: right; font-size: 12px; }
.sc-bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.sc-bar i { display: block; height: 100%; border-radius: 3px; }
.sc-skill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 5px; padding: 6px 8px; margin-top: auto;
}
.sc-skill-ico { flex: 0 0 28px; display: grid; place-items: center; }
.sc-skill-txt { display: flex; flex-direction: column; line-height: 1.15; }
.sc-skill-txt b { font-size: 13px; color: var(--gold); }
.sc-skill-txt small { font-size: 11px; color: var(--muted); }
@media (max-width: 820px), (max-height: 500px) {
  .summon-box { padding: 10px 14px; }
  .summon-head { margin-bottom: 6px; padding-bottom: 6px; }
  .summon-head h2 { font-size: 20px; }
  .summon-cards { gap: 8px; }
  .summon-card { padding: 7px 9px; gap: 4px; }
  .summon-stage-wrap { height: 64px; }
  .sc-desc { display: none; }
}

.stage {
  display: block; margin: 8px auto 6px;
  background:
    radial-gradient(ellipse at 50% 88%, rgba(6, 182, 212, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(9, 13, 22, 0.96));
  border: 2px solid var(--stage-c, #06b6d4);
  border-radius: 6px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.25), inset 0 0 0 1px rgba(255,255,255,.06);
}
.stage.shiny { box-shadow: 0 0 0 3px #0b1838, 0 0 22px rgba(154,230,255,.55), inset 0 0 0 2px rgba(255,255,255,.08); }

/* ---------- rejilla de Bestiario ---------- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; max-height: 56vh; overflow-y: auto; padding: 4px;
}
.cell {
  position: relative; cursor: pointer; text-align: center;
  background: rgba(9, 13, 22, 0.65); border: 2px solid rgba(6, 182, 212, 0.22); border-radius: 6px;
  padding: 4px 2px 6px; transition: transform .08s, border-color .12s, background .12s;
}
.cell:hover { transform: translateY(-2px); border-color: var(--edge); background: rgba(6, 182, 212, 0.12); }
.cell.on { border-color: var(--gold); background: rgba(245, 158, 11, 0.16); }
.cell.locked { cursor: default; opacity: .75; }
.cell.locked:hover { transform: none; border-color: rgba(244,248,255,.18); }
.cell canvas { display: block; margin: 0 auto; }
.cell b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .no { position: absolute; top: 3px; left: 6px; font-size: 11px; color: var(--muted); }
.cell .stars { font-size: 10px; letter-spacing: -1px; }
.cell .partner { position: absolute; top: 3px; right: 5px; font-size: 12px; }

.wide { width: min(980px, 100%); }
.split { display: grid; grid-template-columns: 1fr 300px; gap: 18px; }
.panel {
  background: rgba(0,0,0,.2); border: 2px solid rgba(244,248,255,.2); border-radius: 10px; padding: 14px;
}
.stat { display: grid; grid-template-columns: 90px 1fr 34px; gap: 8px; align-items: center; font-size: 14px; margin: 5px 0; }
.stat .bar { height: 8px; background: rgba(0,0,0,.35); border-radius: 6px; overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--gold); }
.type {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700;
  color: #10131a; text-shadow: none; margin-right: 4px;
}
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chip {
  appearance: none; cursor: pointer; padding: 4px 10px; border-radius: 20px;
  background: rgba(0,0,0,.25); border: 2px solid rgba(244,248,255,.25); font-size: 13px;
  text-shadow: 1px 1px 0 var(--shadow);
}
.chip.on { border-color: var(--gold); color: var(--gold); }

/* ---------- menú principal ("Santuario Astral") ---------- */
#scr-menu {
  justify-content: space-between;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.menu-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px 20px 18px;
  min-width: 0;
  gap: 10px;
}

/* Cabecera de Marca con Placa Oscura Translúcida de Contraste */
.logo-plaque {
  position: relative;
  padding: 10px 38px 12px;
  background: radial-gradient(ellipse at center, rgba(6, 10, 22, 0.94) 0%, rgba(10, 15, 29, 0.82) 55%, rgba(10, 15, 29, 0) 82%);
  border-top: 1px solid rgba(56, 189, 248, 0.65);
  border-bottom: 1px solid rgba(250, 204, 21, 0.65);
  border-radius: 12px;
  text-align: center;
}
.menu-left .logo { margin: 0; }
.menu-left .logo .t1 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
  color: #38bdf8;
  text-shadow: 0 0 22px rgba(6, 182, 212, 0.75), 0 2px 10px rgba(0, 0, 0, 0.95), 3px 3px 0 #0e7490, 5px 5px 0 #020617;
}
.menu-left .logo .t2 {
  font-size: 15px;
  margin-top: 4px;
  letter-spacing: 6px;
  color: #fde047;
  text-shadow: 0 0 14px rgba(245, 158, 11, 0.65), 0 2px 8px rgba(0, 0, 0, 0.95), 2px 2px 0 #020617;
}

/* Pedestal del Escuadrón Activo (3 Tarjetas Interactivas) */
.squad-pedestal {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin: 2px 0;
}
.pedestal-card {
  appearance: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(9, 13, 24, 0.96) 100%);
  border: 2px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), inset 0 0 14px rgba(6, 182, 212, 0.12);
  color: var(--ink);
  text-align: center;
  transition: transform 0.12s ease, border-color 0.14s ease, box-shadow 0.14s ease;
  position: relative;
  overflow: hidden;
}
.pedestal-card:hover {
  transform: translateY(-3px);
  border-color: #67e8f9;
  box-shadow: 0 10px 26px rgba(6, 182, 212, 0.35), inset 0 0 16px rgba(56, 189, 248, 0.22);
}
.pedestal-card.leader {
  width: 150px;
  height: 170px;
  min-height: 170px;
  border-color: #facc15;
  background:
    radial-gradient(circle at 50% 42%, rgba(250, 204, 21, 0.16), transparent 68%),
    linear-gradient(180deg, rgba(23, 33, 58, 0.95) 0%, rgba(9, 13, 26, 0.98) 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 18px rgba(245, 158, 11, 0.32), inset 0 0 16px rgba(250, 204, 21, 0.14);
}
.pedestal-card.leader:hover {
  border-color: #fef08a;
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.48), inset 0 0 18px rgba(250, 204, 21, 0.22);
}
.pedestal-card.reserve {
  width: 115px;
  height: 140px;
  min-height: 140px;
}
.pedestal-role-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
}
.pedestal-role {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #7dd3fc;
  background: rgba(8, 47, 73, 0.75);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  white-space: nowrap;
}
.pedestal-role.leader-tag {
  color: #1c1917;
  background: linear-gradient(180deg, #fde047, #f59e0b);
  border-color: #fef08a;
  text-shadow: none;
}
.pedestal-stars {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.pedestal-stage {
  margin: 2px auto !important;
  background: radial-gradient(ellipse at 50% 82%, rgba(56, 189, 248, 0.22), rgba(9, 13, 22, 0.65) 70%) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  box-shadow: none !important;
  flex-shrink: 0;
}
.pedestal-card.leader .pedestal-stage {
  width: 124px;
  height: 90px;
  border-color: rgba(250, 204, 21, 0.38) !important;
}
.pedestal-card.reserve .pedestal-stage {
  width: 92px;
  height: 68px;
}
.pedestal-name {
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
  text-shadow: 1px 1px 0 #020617;
}
.pedestal-card.leader .pedestal-name {
  font-size: 16px;
  color: #fef08a;
}
.pedestal-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  font-size: 10px;
  line-height: 1;
}
.pedestal-meta .type {
  font-size: 9.5px;
  padding: 1px 5px;
  margin-right: 0;
  border-radius: 4px;
}
.pedestal-lv-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #e0f2fe;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.45);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}
.pedestal-actions {
  margin-top: 2px;
  display: flex;
  justify-content: center;
}
.squad-config-btn {
  min-height: 48px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(8, 47, 73, 0.94));
  border: 2px solid #38bdf8;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), 0 0 14px rgba(6, 182, 212, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.squad-config-btn:hover {
  border-color: #facc15;
  color: #fef08a;
}

/* Panel Derecho de Navegación y Botón Principal ⚔️ INICIAR INCURSIÓN */
.menu-right {
  width: min(448px, 47vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 66px 22px 16px;
  gap: 10px;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(5, 10, 25, 0.72) 24%);
}
.menu-nav-box {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
}
.menu-cta-play {
  width: 100%;
  min-height: 62px;
  padding: 10px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.95) 0%, rgba(30, 27, 75, 0.98) 65%, rgba(88, 28, 135, 0.92) 100%) !important;
  border: 2px solid #facc15 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65), 0 0 18px rgba(250, 204, 21, 0.32), inset 0 0 12px rgba(103, 232, 249, 0.25);
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.12s ease, box-shadow 0.14s ease;
}
.menu-cta-play:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(250, 204, 21, 0.45), 0 0 22px rgba(6, 182, 212, 0.45);
}
.menu-cta-play::before { display: none !important; }
.menu-cta-play .cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.menu-cta-play .cta-title {
  font-size: 21px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 0.6px;
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 2px 2px 0 #020617;
}
.menu-cta-play small {
  grid-column: auto !important;
  font-size: 11px;
  font-weight: 700;
  color: #bae6fd;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-modules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-module-card {
  width: 100%;
  min-height: 54px;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.78), rgba(15, 23, 42, 0.92)) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.32) !important;
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s ease, background 0.12s ease;
}
.menu-module-card:hover {
  border-color: #38bdf8 !important;
  background: linear-gradient(180deg, rgba(14, 116, 144, 0.32), rgba(15, 23, 42, 0.96)) !important;
  transform: translateX(2px);
}
.menu-module-card::before { display: none !important; }
.menu-module-card .mod-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.menu-module-card .mod-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.menu-module-card .mod-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-module-card small {
  grid-column: auto !important;
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mod-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.22);
  border: 1px solid #34d399;
  color: #6ee7b7;
  white-space: nowrap;
  flex-shrink: 0;
}
.mod-badge.ticket-badge {
  background: rgba(168, 85, 247, 0.22);
  border-color: #c084fc;
  color: #e9d5ff;
}
.mod-badge.gold-badge {
  background: rgba(245, 158, 11, 0.25);
  border-color: #facc15;
  color: #fef08a;
}
.menu-stats-box {
  padding: 10px 14px !important;
}
#menu-stats {
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.35;
  text-align: center;
}

/* Barra Superior Unificada (Izquierda: Perfil del Invocador | Derecha: 4 Monedas + Utilidades) */
.topbar {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 25;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.topbar-left, .topbar-right, .topbar-utils {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 24px;
  background: rgba(9, 14, 28, 0.90);
  border: 1.5px solid rgba(56, 189, 248, 0.55);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
  text-shadow: 1px 1px 0 var(--shadow);
  white-space: nowrap;
}
.profile-pill {
  cursor: pointer;
  padding: 4px 11px 4px 8px;
  border-color: #facc15;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.92));
  gap: 7px;
  text-align: left;
}
.profile-pill:hover {
  border-color: #fef08a;
  filter: brightness(1.1);
}
.profile-pill .up-info {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.profile-pill .up-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #f8fafc;
}
.profile-pill .up-title {
  font-size: 9px;
  font-weight: 700;
  color: #fde047;
}
.currency-pill {
  padding: 4px 9px;
  font-size: 13px;
}
.currency-pill .curr-emoji {
  font-size: 13.5px;
  line-height: 1;
}
#gold-pill { border-color: rgba(250, 204, 21, 0.6); color: #fef08a; }
#shards-pill { border-color: rgba(56, 189, 248, 0.6); color: #bae6fd; }
#gems-pill { border-color: rgba(192, 132, 252, 0.65); color: #f3e8ff; }
#tickets-pill { border-color: rgba(244, 114, 182, 0.6); color: #fce7f3; }
.topbar-utils .util-btn {
  padding: 5px 9px;
  min-height: 32px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(9, 14, 28, 0.88);
  border-color: rgba(148, 163, 184, 0.45);
}
.coin {
  display: inline-block; width: 18px; height: 18px; vertical-align: -3px;
  background: var(--ico-coin) no-repeat center / contain; image-rendering: pixelated;
}
.credits-line {
  position: fixed; left: calc(14px + env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 25; font-size: 12px; color: rgba(185,203,240,.7);
  text-shadow: 1px 1px 0 #000;
}

/* ---------- mejoras ---------- */
.upg { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.upg-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.upg-item .ic { font-size: 26px; text-align: center; }
.pips { display: flex; gap: 3px; margin-top: 4px; }
.pips i { width: 12px; height: 6px; border-radius: 2px; background: rgba(0,0,0,.4); }
.pips i.on { background: var(--gold); }

/* ---------- gacha ---------- */
.banner {
  position: relative; border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(circle at 80% 30%, rgba(255,210,63,.35), transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(196,123,255,.35), transparent 50%),
    linear-gradient(135deg, #3a1d6e, #1b2f78 55%, #0f4d6e);
  border: 2px solid rgba(244,248,255,.4);
  padding: 18px;
}
.banner h3 { font-size: 28px; color: var(--gold); text-shadow: 3px 3px 0 #2a0f55; }
.banner .feat {
  /* Debajo del texto, nunca encima: los legendarios a ×3 lucen con silueta íntegra. */
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 10px -10px -12px; height: 176px; overflow: hidden;
}
.banner .feat canvas { flex: 0 0 auto; }
.rates { font-size: 14px; }
.rates div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed rgba(244,248,255,.15); }

#pull-fx {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  align-items: center; gap: 14px; padding: 14px 10px 22px;
  /* Si las 10 cartas no caben (móvil en horizontal) se puede desplazar, y
     "Continuar" se queda debajo sin pisar las cartas. */
  overflow-y: auto; overscroll-behavior: contain;
  background-color: #040712;
  background-image: radial-gradient(circle at 50% 45%, #1b2d63 0%, #060a18 65%, #03060f 100%);
  backdrop-filter: blur(10px);
}
#slot {
  width: min(350px, 84vw);
  height: auto;
  aspect-ratio: 280 / 230;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.85), 0 0 32px var(--rift-col, #38bdf8);
  image-rendering: pixelated;
}
/* Centrado vertical que no corta por arriba cuando no cabe. */
#pull-fx::before, #pull-fx::after { content: ''; margin: auto; }
#pull-close { position: relative; z-index: 2; flex-shrink: 0; margin-top: 4px; box-shadow: 0 4px 18px rgba(0,0,0,.6); }
@media (max-height: 520px) {
  #pull-fx { gap: 10px; }
  #slot { width: min(260px, 70vw); }
  .pull-results { gap: 6px; }
  .pcard { width: 100px; padding: 5px 3px; border-radius: 10px; }
  .pcard canvas { width: 84px; height: auto; }
  .pcard b { font-size: 12px; }
  .pcard .tag { font-size: 10px; }
  .pcard .stars { font-size: 11px; }
}
#pull-fx.hidden { display: none; }
.ball {
  width: 120px; height: 120px; border-radius: 50%; position: relative;
  background: linear-gradient(180deg, #ff4d4d 0 47%, #1a1a1a 47% 53%, #f4f4f4 53% 100%);
  border: 5px solid #1a1a1a;
  box-shadow: 0 0 0 0 var(--glow, #fff);
}
.ball::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #f4f4f4; border: 5px solid #1a1a1a;
}
.ball.drop { animation: drop .55s cubic-bezier(.3,1.6,.6,1) both; }
.ball.shake { animation: shake .45s ease-in-out 3; }
.ball.burst { animation: burst .45s ease-out forwards; }
@keyframes drop { from { transform: translateY(-60vh) rotate(-200deg); } to { transform: none; } }
@keyframes shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 75% { transform: rotate(18deg); } }
@keyframes burst {
  0% { box-shadow: 0 0 0 0 var(--glow); }
  60% { box-shadow: 0 0 80px 40px var(--glow); transform: scale(1.15); }
  100% { box-shadow: 0 0 200px 120px transparent; transform: scale(0); opacity: 0; }
}
/* Mensaje de apoyo al acabar una partida (run-ui.js). */
.support-ask { position: relative; margin-top: 4px; padding: 10px 34px 12px 12px; border-radius: 10px; text-align: center;
  background: rgba(255,210,63,.08); border: 2px solid rgba(255,210,63,.45); }
.support-ask p { margin: 0 0 8px; font-size: 13px; color: var(--ink); line-height: 1.35; }
.support-ask .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.support-ask .x { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 2px 6px; }
.pull-results { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 900px; }
.pcard {
  position: relative; overflow: hidden;
  width: 150px; padding: 10px 6px; text-align: center; border-radius: 12px;
  background:
    radial-gradient(circle at 50% 36%, rgba(56, 189, 248, 0.16) 0%, rgba(15, 23, 42, 0) 68%),
    linear-gradient(180deg, #16223f 0%, #090e1d 100%);
  border: 3px solid var(--rc, #fff);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.75), 0 0 22px var(--rc, #fff);
  animation: pop .3s ease-out both;
  text-shadow: 2px 2px 0 var(--shadow);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.pcard-seal-overlay {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background:
    radial-gradient(circle at 50% 45%, rgba(56, 189, 248, 0.22) 0%, rgba(15, 23, 42, 0.96) 65%),
    linear-gradient(160deg, #0f172a 0%, #060a17 100%);
  border-radius: 9px;
  opacity: 0; pointer-events: none;
  transform: scale(1.18);
  transition: opacity 0.26s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.pcard.is-sealed {
  border-color: rgba(148, 163, 184, 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8), 0 0 12px rgba(56, 189, 248, 0.28);
}
.pcard.is-sealed .pcard-seal-overlay {
  opacity: 1;
  transform: scale(1);
}
.pcard.is-sealed > :not(.pcard-seal-overlay) {
  opacity: 0;
  transform: scale(0.84);
}
.pcard.is-revealed > :not(.pcard-seal-overlay) {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.24s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pcard-seal-ring {
  width: 66px; height: 66px; border-radius: 50%;
  border: 2px dashed rgba(125, 211, 252, 0.65);
  display: grid; place-items: center;
  box-shadow: inset 0 0 16px rgba(56, 189, 248, 0.35), 0 0 14px rgba(56, 189, 248, 0.25);
  animation: sealSpin 6s linear infinite;
}
.pcard-seal-glyph {
  font-size: 26px; color: #e0f2fe;
  text-shadow: 0 0 12px #38bdf8;
}
.pcard-seal-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  color: #bae6fd; padding: 2px 8px; border-radius: 99px;
  background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(56, 189, 248, 0.4);
}
.pcard.is-charging {
  border-color: var(--rc, #fef08a) !important;
  box-shadow: 0 0 34px var(--rc, #fef08a), 0 0 68px var(--rc, #fef08a) !important;
  animation: sealChargeShake 0.11s ease-in-out infinite alternate !important;
  z-index: 6;
}
.pcard.is-charging .pcard-seal-ring {
  border-color: var(--rc, #fef08a);
  box-shadow: inset 0 0 24px var(--rc, #fef08a), 0 0 26px var(--rc, #fef08a);
  animation-duration: 0.9s;
}
.pcard.is-charging .pcard-seal-glyph,
.pcard.is-charging .pcard-seal-label {
  color: #fef08a;
  border-color: var(--rc, #fef08a);
}
.pcard.is-jackpot {
  animation: jackpotFlip 0.45s cubic-bezier(0.22, 1.4, 0.36, 1) both, legend 1.4s ease-in-out infinite alternate;
}
@keyframes sealSpin { to { transform: rotate(360deg); } }
@keyframes sealChargeShake {
  0% { transform: scale(1.06) translate(-3px, -2px) rotate(-2deg); }
  100% { transform: scale(1.10) translate(3px, 2px) rotate(2deg); }
}
@keyframes jackpotFlip {
  0% { transform: scale(0.75) rotateY(85deg); filter: brightness(2.4); }
  65% { transform: scale(1.08) rotateY(0deg); filter: brightness(1.35); }
  100% { transform: scale(1) rotateY(0deg); filter: brightness(1); }
}
.pcard .stars { color: var(--rc); font-size: 14px; }
.pcard b { display: block; font-size: 16px; }
.pcard .tag { font-size: 12px; margin-top: 2px; }
.pcard .new { color: var(--gold); font-weight: 700; }
.pcard.r5 { animation: pop .3s ease-out both, legend 1.4s ease-in-out infinite alternate; }
@keyframes legend { to { box-shadow: 0 0 40px var(--rc), 0 0 80px var(--rc); } }

/* ---------- cartas de nivel ---------- */
.cards { display: flex; flex-direction: column; gap: 10px; width: min(560px, 100%); }
.card {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  background: rgba(0,0,0,.2); border: 2px solid rgba(244,248,255,.3); border-radius: 12px;
  padding: 12px 14px; transition: transform .08s, background .12s, border-color .12s;
}
.card:hover { background: rgba(255,255,255,.1); border-color: var(--edge); transform: translateX(4px); }
.card .ico { flex: 0 0 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-size: 24px; }
.card .txt { flex: 1; }
.card .nm { font-weight: 700; font-size: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card .ds { color: var(--muted); font-size: 14px; }
.card .key { font-size: 13px; color: var(--muted); border: 2px solid rgba(244,248,255,.3); border-radius: 6px; padding: 2px 8px; }
.tag-chip { font-size: 11px; padding: 2px 7px; border-radius: 5px; color: #10131a; text-shadow: none; font-weight: 700; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 18px; }
.stats > div { background: rgba(0,0,0,.22); border-radius: 9px; padding: 8px 10px; }
.stats > div > span:first-child { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.stats b { font-size: 22px; }

kbd {
  display: inline-block; padding: 0 6px; border: 2px solid rgba(244,248,255,.4); border-bottom-width: 3px;
  border-radius: 5px; font: inherit; font-size: 13px; text-shadow: none;
}

.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 60;
  padding: 10px 18px; border-radius: 10px;
  background: rgba(10,20,50,.95); border: 2px solid var(--edge);
  text-shadow: 2px 2px 0 var(--shadow); animation: pop .2s ease-out;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(244,248,255,.3); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 760px) and (min-height: 521px) {
  #scr-menu { flex-direction: column; overflow-y: auto; }
  .menu-right { width: 100%; background: rgba(5,10,25,.7); }
  .split { grid-template-columns: 1fr; }
  .logo .t1 { font-size: 34px; }
}

/* ============ iconos pixel art ============ */
img.pix { image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: middle; }
.stars-row { display: inline-flex; gap: 1px; vertical-align: middle; }
.cell .stars-row { display: flex; justify-content: center; margin-top: 2px; }
.badge-r { position: absolute; top: 3px; right: 4px; }
.move-icons { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 10px; }
.card .ico img { display: block; }
.upg-item .ic { display: flex; justify-content: center; }

/* ============ pestañas de generación ============ */
.gen-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 4px 2px 8px; margin-top: 6px; }
.gen-tab {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  padding: 6px 12px; border-radius: 9px;
  background: rgba(0,0,0,.25); border: 2px solid rgba(244,248,255,.22);
  text-shadow: 2px 2px 0 var(--shadow);
}
.gen-tab b { font-size: 15px; }
.gen-tab small { font-size: 11px; color: var(--muted); }
.gen-tab:hover { border-color: var(--edge); }
.gen-tab.on { border-color: var(--gold); background: rgba(255,210,63,.14); }
.gen-tab.on b { color: var(--gold); }

/* ============ normal / shiny ============ */
.seg { display: flex; justify-content: center; gap: 0; margin: 2px auto 8px; width: max-content;
  border: 2px solid rgba(244,248,255,.35); border-radius: 9px; overflow: hidden; }
.seg button { appearance: none; cursor: pointer; background: rgba(0,0,0,.25); border: 0;
  padding: 5px 14px; font-size: 14px; display: flex; gap: 5px; align-items: center;
  text-shadow: 2px 2px 0 var(--shadow); }
.seg button.on { background: rgba(154,230,255,.22); color: #c9f3ff; }
.pcard.shiny { animation: pop .3s ease-out both, legend 1.1s ease-in-out infinite alternate; }
.caught > span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.caught-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.caught-row > div { text-align: center; }
.caught-row small { display: block; font-size: 12px; color: #c9f3ff; }

/* ============ sonido ============ */
.sound-panel { position: fixed; top: 62px; right: 16px; z-index: 30; width: 270px; padding: 14px 16px; }
.sound-inline { margin: 6px auto 16px; max-width: 320px; }
.snd-row { display: grid; grid-template-columns: 20px 64px 1fr; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 14px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px;
  background: rgba(0,0,0,.4); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 4px;
  background: var(--gold); border: 2px solid #fff7d6; cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 4px; background: var(--gold); border: 2px solid #fff7d6; }
#btn-sound { padding: 5px 9px; display: flex; }

/* ============ nube, aviso legal ============ */
.btn.google { background: linear-gradient(180deg, #ffffff, #dfe6f2); color: #1f2a44; text-shadow: none; }
.sync { display: inline-block; width: 9px; height: 9px; margin-left: 8px; border-radius: 2px;
  box-shadow: 0 0 0 2px #0b1838; vertical-align: 1px; }
.sync.ok { background: #5fe08a; }
.sync.syncing, .sync.pending { background: #ffd23f; }
.sync.offline { background: #ff5f6d; }
.sync.local { background: #9fb1c9; }
.sync.guest { display: none; }
.legal-link { color: var(--muted); }
.legal-link:hover { color: #fff; }
.credits-line a { color: inherit; }
.legal h3 { margin: 14px 0 4px; color: var(--gold); font-size: 17px; }
.legal p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.legal a { color: #9fd4ff; }
#scr-legal { z-index: 65; }   /* por delante de Ajustes y Apoyar (60) */
.boot { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: #050914; color: var(--muted); font-size: 18px; }

/* ---------- amigos, sala, invitaciones y ranking ---------- */
.fr-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.fr-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
  background: rgba(0,0,0,.22); border: 2px solid rgba(244,248,255,.14);
}
.fr-row b { font-size: 17px; }
.fr-row .st { color: var(--muted); font-size: 13px; }
.dot { width: 10px; height: 10px; border-radius: 2px; background: #6b7a94; flex: 0 0 10px; }
.dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot.play { background: var(--gold); }
.dot.pend { background: var(--r4); }
#fr-add { margin: 10px 0 0; }
#fr-add .field { min-width: 180px; }

.lobby-members { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.lob-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px;
  border-radius: 10px; background: rgba(0,0,0,.25); border: 3px solid var(--pc, rgba(244,248,255,.2));
  min-height: 170px; justify-content: center; text-align: center;
}
.lob-card b { font-size: 17px; color: var(--pc); }
.lob-card small { color: var(--muted); font-size: 12px; }
.lob-card .conn { font-size: 12px; color: var(--green); }
.lob-card .conn.wait { color: var(--gold); }
.lob-card.empty { border-style: dashed; border-color: rgba(244,248,255,.18); color: var(--muted); }

.invite-pop {
  position: fixed; right: 18px; bottom: 54px; z-index: 70; width: min(340px, calc(100% - 32px));
  padding: 14px 16px; animation: pop .2s ease-out;
}
.invite-pop img { vertical-align: middle; }

.rk-tools { gap: 8px; margin-bottom: 8px; }
.rk-tools .field { width: 220px; padding: 6px 10px; font-size: 15px; }
.rk-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.rk-row {
  display: grid; grid-template-columns: 54px auto 1fr auto; gap: 10px; align-items: center;
  padding: 4px 12px; border-radius: 8px; background: rgba(0,0,0,.2); border: 2px solid transparent;
}
.rk-row .pos { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 4px; color: var(--muted); }
.rk-row.top1 .pos { color: var(--gold); }
.rk-row.top2 .pos { color: #dfe7f5; }
.rk-row.top3 .pos { color: #e0a36b; }
.rk-row .mons { display: flex; }
.rk-row .who { display: flex; flex-direction: column; min-width: 0; }
.rk-row .who b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row .who small { color: var(--muted); font-size: 12px; }
.rk-row .time { font-size: 22px; font-weight: 700; color: #fff; }
.rk-row.mine { border-color: var(--gold); background: rgba(255,210,63,.1); }
.rk-me { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,.25); font-size: 15px; min-height: 20px; }

.cards.done .card { pointer-events: none; opacity: .45; }
.cards.done .card.picked { opacity: 1; border-color: var(--gold); }
#lvl-wait { color: var(--gold); font-size: 15px; }

@media (max-width: 760px) {
  .lobby-members { grid-template-columns: repeat(2, 1fr); }
  .rk-row { grid-template-columns: 40px auto 1fr auto; gap: 6px; }
}

/* ---------- tickets y mejoras por Besther ---------- */
.tickets-line img, #tickets-pill img, #cost-1 img, #cost-10 img { vertical-align: middle; }
.upg-head { display: flex; gap: 14px; align-items: center; margin: 6px 0 12px; }
.upg-head .stage { width: 120px; height: 96px; flex: 0 0 120px; }
select.field { font-family: var(--font); }

/* ---------- tragaperras del gacha ---------- */
#slot { width: min(528px, 92vw, 66vh); height: auto; image-rendering: pixelated; cursor: pointer;
  filter: drop-shadow(0 0 30px rgba(255,90,90,.35)); animation: pop .25s ease-out both; }

/* ---------- misiones, logros, perfil y objetos ---------- */
.goals-body { max-height: 62vh; overflow-y: auto; padding-right: 6px; }
.goals-h { margin: 6px 0 4px; }
.goals-h h3 { margin: 0; }
.mission {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 10px 12px; margin-bottom: 6px; border-radius: 8px;
  background: rgba(0,0,0,.22); border: 2px solid rgba(244,248,255,.14);
}
.mission.ready { border-color: var(--gold); background: rgba(255,210,63,.1); }
.mission.claimed { opacity: .55; }
.mission small, .ach small { color: var(--muted); font-size: 12px; }
.mission .bar, .ach .bar { height: 7px; background: rgba(0,0,0,.4); border-radius: 6px; overflow: hidden; margin: 4px 0 2px; }
.mission .bar i, .ach .bar i { display: block; height: 100%; background: var(--gold); }
.m-rw, .a-rw { font-size: 13px; color: var(--ink); }
.m-rw img, .a-rw img, .tag-chip img { vertical-align: middle; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.ach {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px;
  background: rgba(0,0,0,.2); border: 2px solid rgba(244,248,255,.1);
}
.ach.ok { border-color: rgba(255,210,63,.6); }
.ach .a-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.leg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.leg-cell { display: flex; flex-direction: column; align-items: center; padding: 4px; border-radius: 8px; background: rgba(0,0,0,.25); border: 2px solid transparent; }
.leg-cell.ok { border-color: rgba(255,210,63,.5); }
.leg-cell small { font-size: 10px; color: var(--muted); text-align: center; }
.fav-slots { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.fav-slot {
  width: 140px; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(0,0,0,.28); border: 3px dashed rgba(244,248,255,.25); cursor: pointer; text-align: center;
}
.fav-slots.view .fav-slot { cursor: default; border-style: solid; border-color: rgba(255,210,63,.55); }
.fav-slot b { font-size: 14px; }
.profile-box { width: min(640px, 100%); max-height: 90vh; overflow-y: auto; }
.prof-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: -10px; }
.prof-head h2 { margin: 0; }
.prof-title { color: var(--gold); font-size: 15px; border: 2px solid var(--gold); border-radius: 8px; padding: 1px 8px; }
.prof-marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.prof-marks div { background: rgba(0,0,0,.25); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; }
.prof-marks span { color: var(--muted); font-size: 12px; }
.prof-marks b { font-size: 18px; }
.prof-medals { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-medals .pm { width: 84px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.prof-medals small { font-size: 10px; color: var(--muted); }
a.plink { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(244,248,255,.4); }
a.plink:hover { color: var(--gold); }
#user-pill { cursor: pointer; }
.ach-pop {
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 80;
  display: flex; gap: 10px; align-items: center; padding: 10px 16px; animation: pop .2s ease-out;
  border-color: var(--gold) !important;
}
.ach-pop b { display: block; color: var(--gold); }
.ach-pop small { color: var(--muted); }
.card.evo { border-color: var(--gold); background: linear-gradient(90deg, rgba(255,210,63,.18), rgba(255,210,63,.04)); }
.card.evo .nm { color: var(--gold); }
/* Vínculo (premio de los legendarios): rosa */
.bond-title { color: #ff8ad8; }
.card.bond { border-color: #ff8ad8; background: linear-gradient(90deg, rgba(255,138,216,.18), rgba(255,138,216,.04)); }
.card.bond .nm { color: #ff8ad8; }
@media (max-height: 520px) {
  #scr-bond .bond-hint { display: none; }
  #scr-bond .box { width: min(820px, 100%); }
  #bond-cards { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
}
@media (max-width: 760px) { .mission { grid-template-columns: 1fr; } .prof-marks { grid-template-columns: repeat(2, 1fr); } }


/* ================= móvil y táctil ================= */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
body { touch-action: manipulation; }
/* iPhone: sin esto, mantener el dedo en el joystick sacaba "Copiar / Seleccionar
   todo" (Safari sólo hace caso a la versión -webkit- y no lo hereda bien). */
body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* Con táctil no tienen sentido las pistas de teclas. */
body.touch kbd, body.touch .card .key, body.touch .kbd-hint { display: none !important; }
#rotate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 10, 30, .94);
}
#rotate.hidden { display: none; }
#rotate .box { max-width: 320px; }
#rotate-ico { animation: rot-hint 1.6s steps(4) infinite; display: inline-block; }
@keyframes rot-hint { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(90deg); } }

/* ---------- ajustes ---------- */
#scr-settings { z-index: 60; }
.box.settings { width: min(640px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
.set-body { overflow-y: auto; padding-right: 4px; min-height: 0; }
#set-tabs { flex-wrap: wrap; }
#set-tabs .gen-tab { padding: 6px 12px; }
.set-h { color: var(--gold); font-size: 17px; margin: 14px 0 6px; }
.set-h:first-child { margin-top: 4px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.set-row b { display: block; }
.set-row small { display: block; color: var(--muted); font-size: 12px; }
.set-row .switch { min-width: 58px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.set-chips { margin: 6px 0 10px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; font-size: 14px; }
.keys span { color: var(--muted); }
.credits { margin: 4px 0 12px; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.credits b { color: var(--ink); }
.about-logo { text-align: center; font-size: 34px; font-weight: 700; color: var(--gold); text-shadow: 2px 2px 0 #a55f00, 4px 4px 0 var(--shadow); margin-top: 6px; }
.btn.danger { background: #8a1f2e; border-color: #ff8a96; }
.row.wrap { flex-wrap: wrap; }
.touch-hint { display: none; }
body.touch .touch-hint { display: block; }
#pause-sound + .row, #scr-pause .row { flex-wrap: wrap; }
a.btn { text-decoration: none; display: inline-block; color: var(--ink); }

/* ================= pantallas bajas (móvil en horizontal) =================
 * Todo más compacto: la barra superior deja sitio, el menú va en dos
 * columnas y la línea de créditos se esconde (está en Ajustes → Acerca de). */
@media (max-height: 520px) {
  .scr { padding: 48px 10px 6px; }
  /* Sin barra superior encima: no hace falta dejarle hueco. */
  #scr-login, #scr-test, #scr-result, #scr-starters, #scr-nick, #scr-levelup, #scr-pause,
  #scr-over, #scr-item, #scr-settings, #scr-legal, #scr-profile { padding: 6px 10px; }
  .split { grid-template-columns: 1fr; }
  .logo .t1 { font-size: 26px; }
  .box { padding: 8px 12px; border-radius: 8px; }
  .box h2 { font-size: 20px; }
  .box h3 { font-size: 16px; }
  .sub { font-size: 13px; margin-bottom: 8px; }
  .note { margin-top: 8px; font-size: 12px; }
  .btn { padding: 7px 14px; }
  .btn.small { padding: 4px 8px; font-size: 12px; }

  .topbar { top: 4px; left: 8px; right: 8px; gap: 6px; }
  .topbar-left, .topbar-right, .topbar-utils { gap: 4px; }
  .pill { padding: 3px 8px; font-size: 12px; gap: 4px; }
  .profile-pill { padding: 3px 10px 3px 6px; max-width: 195px; }
  .profile-pill .up-name { font-size: 11.5px; }
  .profile-pill .up-title { font-size: 8.5px; }
  .currency-pill { padding: 3px 7px; font-size: 12px; }
  .topbar-utils .util-btn { padding: 4px 7px; min-height: 30px; font-size: 11.5px; }
  .credits-line { display: none !important; }
  .sound-panel { top: 40px; }

  #scr-menu { flex-direction: row; padding: 0; overflow: hidden; }
  .menu-left { padding: 44px 8px 6px; gap: 5px; justify-content: center; }
  .logo-plaque { padding: 4px 20px 6px; }
  .menu-left .logo .t1 { font-size: 24px; }
  .menu-left .logo .t2 { font-size: 9.5px; margin-top: 2px; letter-spacing: 3px; }

  .squad-pedestal { gap: 6px; margin: 0; }
  .pedestal-card { padding: 4px 5px 5px; }
  .pedestal-card.leader { width: 128px; height: 144px; min-height: 144px; }
  .pedestal-card.reserve { width: 102px; height: 126px; min-height: 126px; }
  .pedestal-card.leader .pedestal-stage { width: 104px; height: 74px; }
  .pedestal-card.reserve .pedestal-stage { width: 80px; height: 58px; }
  .pedestal-role { font-size: 8px; padding: 1px 4px; }
  .pedestal-name { font-size: 11.5px; }
  .pedestal-card.leader .pedestal-name { font-size: 13.5px; }
  .pedestal-meta { font-size: 9px; gap: 3px; }
  .pedestal-meta .type { font-size: 8.5px; padding: 1px 4px; }
  .pedestal-lv-badge { font-size: 8.5px; padding: 1px 4px; }
  .squad-config-btn { min-height: 48px; height: 48px; padding: 6px 14px; font-size: 12.5px; }

  .menu-right {
    width: min(50vw, 440px);
    padding: 44px 10px 6px;
    gap: 6px;
    justify-content: center;
    overflow: hidden;
  }
  .menu-nav-box { padding: 8px 10px; gap: 6px; }
  .menu-cta-play {
    min-height: 52px;
    padding: 6px 10px;
    grid-template-columns: 28px 1fr;
    column-gap: 8px;
  }
  .menu-cta-play .cta-title { font-size: 16.5px; }
  .menu-cta-play small { font-size: 9.5px; }
  .menu-modules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .menu-module-card {
    min-height: 50px;
    padding: 5px 8px;
    grid-template-columns: 22px 1fr;
    column-gap: 6px;
  }
  .menu-module-card .mod-title { font-size: 12.5px; }
  .menu-module-card small { font-size: 9.5px; }
  .mod-badge { font-size: 8.5px; padding: 1px 4px; }
  .mi-ico img { width: 20px; height: 20px; }
  .menu-stats-box { padding: 5px 10px !important; }
  #menu-stats { font-size: 10.5px; line-height: 1.2; }
  .ach-pop { top: auto; bottom: 8px; }
  .box.settings { max-height: calc(100dvh - 12px); }
}
/* Móviles muy bajos (800×400 y similares) */
@media (max-height: 405px) {
  .menu-left { padding-top: 40px; gap: 3px; }
  .logo-plaque { padding: 2px 16px 4px; }
  .menu-left .logo .t1 { font-size: 21px; }
  .pedestal-card.leader { width: 120px; height: 134px; min-height: 134px; }
  .pedestal-card.reserve { width: 96px; height: 118px; min-height: 118px; }
  .pedestal-card.leader .pedestal-stage { width: 96px; height: 66px; }
  .pedestal-card.reserve .pedestal-stage { width: 74px; height: 52px; }
  .menu-right { padding-top: 40px; gap: 4px; }
  .menu-nav-box { padding: 6px 8px; gap: 5px; }
  .menu-cta-play { min-height: 48px; }
  .menu-module-card { min-height: 48px; }
}

/* ---------- pantalla de carga (lo primero que se ve y lo que lee Google) ---------- */
.boot-in { text-align: center; padding: 20px; max-width: 640px; }
.boot-in h1 { margin: 0 0 8px; font-size: clamp(38px, 8vw, 64px); color: var(--gold); text-shadow: 3px 3px 0 #a55f00, 6px 6px 0 var(--shadow); font-weight: 700; }
.boot-in p { margin: 6px 0; color: var(--muted); }
.boot-in a { color: #9fd4ff; }
.boot-ld { color: #fff; margin-top: 18px !important; }
.boot.noscript { z-index: 90; }
/* "Pulsa para empezar": encima de todo, se ve el mundo de fondo. */
.tapstart { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: radial-gradient(ellipse at center, rgba(5,9,20,.35), rgba(5,9,20,.8)); animation: fade .4s; }
.tapstart .boot-in p { color: #dfe7ff; text-shadow: 2px 2px 0 #000; }
.tap-blink { color: #fff !important; font-size: 20px; margin-top: 22px !important; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.login-tag { margin: -6px 0 12px; font-size: 13px; color: var(--muted); text-align: center; }
.login-links { margin-top: 10px; font-size: 13px; text-align: center; }
.login-links a { color: #9fd4ff; }

/* ---------- apoyar el proyecto ---------- */
#scr-support { z-index: 60; }
.box.support { width: min(560px, 100%); }
/* Mejoras: botones y veto */
.upg-btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ban-picker { grid-column: 1 / -1; }
.bind-panel { grid-column: 1 / -1; }
.bind-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bind-slot { display: flex; align-items: center; gap: 6px; margin: 0; }
.bind-slot span { font-weight: 700; color: var(--gold); min-width: 14px; }
.bind-slot select { width: 100%; min-width: 0; }
@media (max-width: 760px) { .bind-slots { grid-template-columns: repeat(2, 1fr); } }
.ban-moves { display: flex; flex-wrap: wrap; gap: 6px; }
.ban-moves .chip { display: inline-flex; align-items: center; gap: 5px; }
.ban-moves .chip.ban { background: rgba(255,95,109,.25); border-color: #ff5f6d; color: #ffd3d8; text-decoration: line-through; }
/* Novedades */
.news-btn { position: relative; }
.news-btn .dot { display: none; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; background: #ff5f6d; box-shadow: 0 0 0 2px var(--shadow); }
.news-btn.new .dot { display: block; }
.box.news-box { width: min(640px, 100%); max-height: calc(100dvh - 90px); display: flex; flex-direction: column; }
.news-body { overflow-y: auto; padding-right: 4px; }
.news-day { padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.1); }
.news-day:last-child { border-bottom: 0; }
.news-day h3 { color: var(--gold); margin: 14px 0 6px; font-size: 18px; }
.news-day h3 small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; margin-top: 2px; }
.news-part { margin: 6px 0 8px; }
.news-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 4px; color: #0b1020; text-shadow: none; }
.news-tag.new { background: #5fe08a; } .news-tag.chg { background: #4fb4ff; } .news-tag.fix { background: #ffb347; }
.news-day ul { margin: 0; padding-left: 20px; }
.news-day li { margin: 4px 0; line-height: 1.35; font-size: 15px; }
@media (max-width: 760px) { .news-btn span { display: none; } }
.sup-tab { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 15px; }
.sup-tab td { padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sup-tab td.num { text-align: right; white-space: nowrap; }
.sup-tab tr.tot td { font-weight: 700; color: var(--gold); border-bottom: 0; }
#btn-support span { margin-left: 2px; }
@media (max-height: 520px) { #btn-support span { display: none; } }
/* ============================================================================
 * SISTEMA "CÓDICE ASTRAL BISELADO" (TAREA 7.0)
 * Erradicación Total del Layout de Astral Rift:
 * - Cero Píldoras (border-radius: 0 !important) y esquinas biseladas a 45° (clip-path)
 * - Paleta Obsidiana Imperial (#120f1d -> #1d182e), Oro Astral (#d4af37 / #f59e0b) y Éter Turquesa (#2dd4bf)
 * - Cabecera Superior de Ancho Completo (52px), 3 Pedestales Rúnicos de Suelo, Dock Inferior Horizontal de 4 Tarjetas y Botón Octogonal
 * - Vistas Secundarias de Pantalla Completa (100vw × 100dvh): Códice (3 columnas + carrusel horizontal), Portales y Forja/Almacén
 * ============================================================================ */

/* 1. Geometría Biselada Universal y Prohibición de Píldoras Redondeadas */
.box, .panel, .btn, .chip, .tab, .gen-tab, .cell, .pill, .bevel-plate,
.pedestal-plaque, .dock-card, .octagon-incursion-btn, .banner, .mission, .ach {
  border-radius: 0 !important;
}
.box, .panel, .banner, .mission, .ach {
  clip-path: var(--bevel-10);
  background: linear-gradient(165deg, rgba(29, 24, 46, 0.96), rgba(18, 15, 29, 0.98));
  border-color: rgba(212, 175, 55, 0.42);
}
.btn, .gen-tab, .tab, .cell, .pedestal-plaque, .dock-card {
  clip-path: var(--bevel-8);
}
.chip, .pill, .bevel-plate, .pedestal-role, .pedestal-lv-badge, .mod-badge, .type {
  clip-path: var(--bevel-6);
  border-radius: 0 !important;
}

/* Eliminación permanente de la línea legal inferior heredada */
#credits-line, .credits-line {
  display: none !important;
}

/* 2. Cabecera Superior de Ancho Completo (height: 52px, acoplada de lado a lado) */
#topbar, .topbar, .topbar.beveled-topbar {
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  padding: 0 14px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(29, 24, 46, 0.98) 0%, rgba(18, 15, 29, 0.96) 100%);
  border-bottom: 2px solid #d4af37;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.78), inset 0 -1px 0 rgba(45, 212, 191, 0.35);
  pointer-events: auto;
}
.topbar-left, .topbar-right, .topbar-currencies, .topbar-utils {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(212, 175, 55, 0.16));
  border: 1.5px solid #d4af37;
  clip-path: var(--bevel-8);
  white-space: nowrap;
}
.topbar-brand .brand-glyph {
  color: #2dd4bf;
  font-size: 15px;
  text-shadow: 0 0 10px rgba(45, 212, 191, 0.8);
}
.topbar-brand .brand-main {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #f8fafc;
  text-shadow: 0 0 12px rgba(45, 212, 191, 0.55), 2px 2px 0 #07050e;
}
.topbar-brand .brand-sep {
  color: #d4af37;
  font-weight: 900;
}
.topbar-brand .brand-sub {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #f59e0b;
}
.pill.bevel-plate {
  padding: 5px 11px;
  background: linear-gradient(180deg, rgba(29, 24, 46, 0.95), rgba(14, 11, 24, 0.98));
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  box-shadow: inset 0 0 8px rgba(212, 175, 55, 0.12);
  font-size: 13px;
  font-weight: 800;
}
.profile-pill.bevel-plate {
  border-color: #2dd4bf;
  background: linear-gradient(90deg, rgba(29, 24, 46, 0.96), rgba(19, 38, 48, 0.92));
}
.topbar-utils .util-btn {
  min-height: 36px;
  padding: 5px 10px;
  background: linear-gradient(180deg, #241e38, #141022);
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  clip-path: var(--bevel-6);
}
.topbar-utils .util-btn:hover {
  border-color: #2dd4bf;
  color: #2dd4bf;
}

/* 3. Pantalla Principal — Hub del Santuario Astral (#scr-menu) */
#scr-menu, #scr-menu.hub-sanctuary {
  display: flex;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 58px 16px 18px !important;
  overflow: hidden !important;
  pointer-events: none;
}

/* Emblema Monumental Central (top: 58px — ASTRAL FRACTURE : BESTHERS) */
#hub-central-emblem, .hub-central-emblem {
  position: relative;
  z-index: 5;
  margin: 0 auto !important;
  padding: 6px 26px 8px !important;
  background: radial-gradient(closest-side, rgba(13, 21, 41, 0.42) 0%, rgba(18, 15, 29, 0.14) 68%, transparent 100%);
  border: none !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  pointer-events: none;
}
#hub-central-emblem .t1 {
  font-family: Pixelify, sans-serif;
  font-size: 40px !important;
  font-weight: 900;
  letter-spacing: 5px !important;
  padding-left: 5px;
  line-height: 1.02;
  color: #e0f2fe !important;
  white-space: nowrap;
  text-align: center;
  text-shadow:
    -2px -2px 0 #090d1a,
     2px -2px 0 #090d1a,
    -2px  2px 0 #090d1a,
     2px  2px 0 #090d1a,
     0px  4px 0 #050811,
     0 0 18px rgba(56, 189, 248, 0.85),
     0 0 32px rgba(56, 189, 248, 0.45);
}
#hub-central-emblem .emblem-sub-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}
#hub-central-emblem .emblem-ornament {
  width: 54px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fbbf24);
}
#hub-central-emblem .emblem-ornament.right {
  background: linear-gradient(90deg, #fbbf24, transparent);
}
#hub-central-emblem .emblem-diamond {
  font-size: 11px;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.75);
}
#hub-central-emblem .t2 {
  font-family: Pixelify, sans-serif;
  font-size: 15px !important;
  font-weight: 900;
  letter-spacing: 10px !important;
  padding-left: 10px;
  line-height: 1.1;
  color: #fbbf24 !important;
  text-shadow: 0 2px 0 #090d1a, 0 0 14px rgba(251, 191, 36, 0.65);
}

/* Escenario Central: 3 Pedestales de Piedra Tallada V4.2 (Líder 3.5x = 168×168 px, Reservas 2.8x = 134×134 px) */
.hub-stage-center {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  pointer-events: none;
}
#menu-squad-pedestal, .squad-pedestal {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 52px;
  margin: 0;
  pointer-events: auto;
}
#menu-squad-pedestal .pedestal-card, .squad-pedestal .pedestal-card {
  appearance: none;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: visible !important;
  transition: transform 0.14s ease, filter 0.14s ease;
}
#menu-squad-pedestal .pedestal-card::before,
#menu-squad-pedestal .pedestal-card::after {
  display: none !important;
}
#menu-squad-pedestal .pedestal-card:hover {
  transform: translateY(-4px);
  filter: brightness(1.12);
}
#menu-squad-pedestal .pedestal-card.leader {
  width: 168px;
  min-height: 214px;
  margin-bottom: 8px;
}
#menu-squad-pedestal .pedestal-card.reserve {
  width: 134px;
  min-height: 180px;
}

/* Zona de Sprite del Besther sobre el Pedestal de Piedra V4.2 (CERO elipses CSS) */
.pedestal-sprite-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#menu-squad-pedestal .pedestal-stage {
  position: relative;
  z-index: 2;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  margin: 0 auto !important;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.85));
}
#menu-squad-pedestal .pedestal-card.leader .pedestal-stage {
  width: 168px !important;
  height: 168px !important;
}
#menu-squad-pedestal .pedestal-card.reserve .pedestal-stage {
  width: 134px !important;
  height: 134px !important;
}

/* Etiqueta Compacta e Integrada debajo de cada Pedestal (130×42 px) */
.pedestal-plaque {
  position: relative;
  z-index: 3;
  width: 130px;
  min-width: 130px;
  max-width: 136px;
  height: 42px;
  min-height: 42px;
  margin-top: 2px;
  padding: 3px 8px;
  background: linear-gradient(180deg, rgba(24, 20, 40, 0.96) 0%, rgba(12, 10, 22, 0.99) 100%);
  border: 1.5px solid rgba(45, 212, 191, 0.72);
  clip-path: var(--bevel-8);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.pedestal-plaque.leader-plaque {
  width: 138px;
  min-width: 138px;
  max-width: 144px;
  border: 2px solid #fbbf24;
  background: linear-gradient(180deg, rgba(38, 28, 58, 0.98) 0%, rgba(16, 12, 28, 0.99) 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9), 0 0 14px rgba(245, 158, 11, 0.35);
}
.pedestal-name {
  font-family: Pixelify, sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: #f8fafc;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.leader-plaque .pedestal-name {
  color: #fef08a;
  font-size: 14px;
}
.pedestal-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.ped-elem-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #cbd5e1;
  font-weight: 700;
  font-size: 10.5px;
}
.pedestal-lv-badge {
  font-weight: 900;
  color: #2dd4bf;
  font-size: 11px;
}
.leader-plaque .pedestal-lv-badge {
  color: #fbbf24;
}

/* 4. Nuevo Dock Inferior Compacto y Centrado (max-width: 1020px; bottom: 18px; Cero Cajas Huecas y Cero Emojis) */
.hub-bottom-architecture {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  pointer-events: auto;
}
.hub-bottom-dock {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 14px;
}
.dock-card {
  appearance: none;
  cursor: pointer;
  width: 185px;
  min-width: 185px;
  max-width: 185px;
  height: 68px;
  min-height: 68px;
  max-height: 68px;
  padding: 10px 12px !important;
  background: linear-gradient(180deg, rgba(33, 27, 52, 0.96) 0%, rgba(17, 14, 28, 0.99) 100%) !important;
  border: 2px solid #d4af37 !important;
  clip-path: var(--bevel-8);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.78), inset 0 0 12px rgba(212, 175, 55, 0.14);
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-align: left;
  overflow: hidden;
  transition: transform 0.1s ease, border-color 0.12s ease, filter 0.12s ease;
  position: relative;
}
.dock-card::before,
.dock-card .mi-ico {
  display: none !important;
}
.dock-card:hover {
  transform: translateY(-3px);
  border-color: #2dd4bf !important;
  filter: brightness(1.12);
}
.dock-ico-canvas {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
}
.dock-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.dock-card .mod-badge,
.dock-card .dock-badge {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 9px;
  padding: 1px 5px;
  line-height: 1.1;
}
.dock-card-title, .dock-title {
  font-size: 14.5px !important;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 0.4px;
  line-height: 1.1;
  white-space: nowrap;
}
.dock-card small, .dock-sub {
  font-size: 11.5px !important;
  font-weight: 700;
  color: #2dd4bf !important;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dock-card small.gold {
  color: #fbbf24 !important;
}

/* Botón Principal de Acción a la derecha (220×68 px, Icono Pixel-Art 40×40 px) */
.hub-incursion-zone {
  flex: 0 0 auto;
  display: flex;
}
.octagon-incursion-btn {
  appearance: none;
  cursor: pointer;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  height: 68px;
  min-height: 68px;
  max-height: 68px;
  padding: 10px 14px !important;
  background:
    radial-gradient(circle at 85% 20%, rgba(253, 224, 71, 0.35), transparent 55%),
    linear-gradient(135deg, #d97706 0%, #b45309 55%, #7c2d12 100%) !important;
  border: 2.5px solid #fde047 !important;
  clip-path: var(--bevel-oct) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.85), 0 0 20px rgba(245, 158, 11, 0.52), inset 0 0 0 2px rgba(254, 240, 138, 0.35);
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-align: left;
  transition: transform 0.1s ease, filter 0.12s ease;
}
.octagon-incursion-btn::before,
.octagon-incursion-btn .mi-ico {
  display: none !important;
}
.octagon-incursion-btn:hover {
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.14);
}
.cta-ico-canvas {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
}
.octagon-incursion-btn .cta-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.octagon-incursion-btn .cta-title {
  font-size: 14.5px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 0.4px;
  line-height: 1.08;
  white-space: nowrap;
  text-shadow: 2px 2px 0 #07050e;
}
.octagon-incursion-btn small {
  font-size: 11.5px !important;
  color: #fde68a !important;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.curr-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

/* ============================================================================
 * 5. VISTAS SECUNDARIAS DE PANTALLA COMPLETA (100vw × 100dvh — CERO MODALES FLOTANTES)
 * ============================================================================ */
.scr.codex-screen,
.scr.codex-fullscreen-view {
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #120f1d !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  animation: none !important;
  transform: none !important;
}
.box.codex-fullscreen-view,
.box.codex-fullscreen-box {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #d4af37 !important;
  clip-path: none !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(45, 212, 191, 0.08), transparent 55%),
    linear-gradient(180deg, #1a1528 0%, #120f1d 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: none !important;
  transform: none !important;
}

/* Cabecera Arquitectónica Superior de cada Vista de Pantalla Completa */
.codex-top-header,
.codex-top-bar {
  flex: 0 0 50px;
  height: 50px;
  padding: 0 14px;
  background: linear-gradient(90deg, #1d182e 0%, #271f3d 50%, #1d182e 100%);
  border-bottom: 2px solid #d4af37;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.codex-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.back-sanctuary-btn,
.codex-back-btn {
  min-height: 36px;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #2a2140, #161124) !important;
  border: 1.5px solid #d4af37 !important;
  color: #fef08a !important;
  clip-path: var(--bevel-8);
  white-space: nowrap;
}
.back-sanctuary-btn:hover,
.codex-back-btn:hover {
  border-color: #2dd4bf !important;
  color: #2dd4bf !important;
}
.codex-title-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.codex-kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.3px;
  color: #2dd4bf;
  white-space: nowrap;
  line-height: 1.1;
}
.codex-title-group h2 {
  font-size: 18px !important;
  margin: 0 !important;
  color: #fef08a;
  letter-spacing: 0.7px;
  white-space: nowrap;
  line-height: 1.15;
}
.codex-header-right,
.codex-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ============================================================================
 * 6. PANTALLA 1: CÓDICE DE BESTHERS Y ALTAR DE ASCENSIÓN (#scr-dex) — TAREA 7.1
 * Contenedor Maestro Centrado (max-width: 1400px), Columna Izquierda 220px sin duplicados,
 * Pedestal Heroico 160×160 con Sprite 3x (144×144), Árbol Evolutivo Grande (130×110) y Carrusel 108px
 * ============================================================================ */
#scr-dex .dex-mastery-banner {
  flex: 0 1 auto;
  max-width: 520px;
  height: 36px;
  margin: 0 6px !important;
  padding: 4px 12px !important;
  background: linear-gradient(90deg, rgba(29, 24, 46, 0.95), rgba(19, 34, 46, 0.92));
  border: 1px solid rgba(212, 175, 55, 0.48);
  clip-path: var(--bevel-8);
  display: flex;
  align-items: center;
  overflow: hidden;
}
#scr-dex .dex-mastery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  white-space: nowrap;
}
#scr-dex .dex-mastery-chips {
  display: none !important;
}

/* Cuerpo Central de 3 Columnas Centrado (max-width: 1400px; Izquierda 220px + #dex-detail) */
.codex-body-3col,
.codex-3col-body {
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 8px 14px !important;
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  gap: 12px !important;
  overflow: hidden !important;
}

/* Columna Izquierda (220px): 5 Pestañas Grandes de Reino (46px) + 4 Botones de Filtro Rápido 2×2 (44px) */
.codex-left-nav,
.codex-col-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 10px 9px !important;
  background: linear-gradient(180deg, rgba(24, 19, 38, 0.96), rgba(14, 11, 24, 0.99)) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  clip-path: var(--bevel-10);
}
.codex-nav-section-title,
.codex-section-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.1px;
  color: #d4af37;
  padding: 2px 4px 4px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.28);
}
.codex-vertical-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.codex-vertical-tabs .gen-tab {
  width: 100%;
  min-height: 46px;
  height: 46px;
  padding: 6px 10px !important;
  display: flex;
  align-items: center;
  text-align: left;
  background: rgba(18, 15, 29, 0.92);
  border: 1.5px solid rgba(163, 155, 181, 0.32);
  clip-path: var(--bevel-6);
}
.codex-vertical-tabs .gen-tab.on {
  border-color: #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.25), rgba(45, 212, 191, 0.14));
  color: #fef08a;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}
.codex-vertical-tabs .gt-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.codex-vertical-tabs .gen-tab b {
  font-size: 13.5px !important;
  font-weight: 800;
}
.codex-vertical-tabs .gen-tab small {
  font-size: 12px !important;
  font-weight: 800;
  color: #2dd4bf;
}
.codex-vertical-filters,
.codex-filter-blocks {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin: 0 !important;
}
.codex-vertical-filters .chip,
.codex-filter-blocks .chip {
  min-height: 44px;
  height: 44px;
  padding: 6px 8px !important;
  font-size: 13px !important;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  background: rgba(14, 11, 24, 0.92);
  border: 1.5px solid rgba(163, 155, 181, 0.35);
  white-space: nowrap;
}
.codex-vertical-filters .chip.on,
.codex-filter-blocks .chip.on {
  border-color: #2dd4bf;
  color: #99f6e4;
  background: rgba(45, 212, 191, 0.2);
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.22);
}

/* Contenedor Derecho (#dex-detail): aloja Columna Central (~55%) + Columna Derecha (~45%) */
#dex-detail.codex-center-and-right {
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: grid !important;
  grid-template-columns: 1.18fr 1fr;
  gap: 12px;
  overflow: hidden;
}

/* Columna Central: Mitad Superior (Ficha Heroica 2 sub-columnas) + Mitad Inferior (Árbol Evolutivo Grande) */
.codex-col-center {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  overflow-y: auto;
  padding: 10px 14px;
  background: linear-gradient(165deg, rgba(29, 24, 46, 0.96), rgba(16, 13, 26, 0.99));
  border: 1.5px solid rgba(212, 175, 55, 0.48);
  clip-path: var(--bevel-10);
}
.codex-specimen-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dex-detail-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.codex-hero-pedestal-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 164px;
}
.codex-arcane-stage-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  flex: 0 0 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 55%, rgba(45, 212, 191, 0.16), rgba(15, 12, 26, 0.92) 72%);
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  clip-path: var(--bevel-8);
}
.arcane-floor-circle {
  position: absolute;
  bottom: 10px;
  width: 132px;
  height: 36px;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, rgba(45, 212, 191, 0.42), rgba(245, 158, 11, 0.18) 62%, transparent 80%);
  border: 1.5px solid rgba(212, 175, 55, 0.78);
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.42);
}
#dex-big.dex-hero-stage {
  position: relative;
  z-index: 2;
  width: 144px !important;
  height: 144px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.codex-var-seg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  width: 100%;
}
.codex-var-seg button {
  min-height: 32px;
  font-size: 12.5px;
  font-weight: 800;
  padding: 4px 10px;
  clip-path: var(--bevel-6);
}
.dex-hero-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.codex-id-kicker {
  font-size: 12.5px;
  color: #cbd5e1;
}
.codex-specimen-title {
  font-size: 24px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  color: #fef08a;
  line-height: 1.1;
}
.codex-rarity-types-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.codex-desc-txt {
  margin: 2px 0;
  font-size: 14px;
  color: #e2e8f0;
  line-height: 1.32;
}
.codex-move-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: #cbd5e1;
}
.codex-passive-line {
  font-size: 13px;
  color: #fde047;
  font-weight: 700;
}
.dex-stats-compact {
  max-width: 340px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.dex-stats-compact .stat {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  grid-template-columns: 84px 1fr 54px;
  align-items: center;
}
.dex-stats-compact .stat .bar {
  height: 9px;
}
.dex-stats-compact .stat .stat-val {
  font-size: 14px;
  font-weight: 900;
  color: #fef08a;
  text-align: right;
}
.codex-bond-bonus-strip {
  font-size: 13px;
  padding: 5px 10px;
  background: rgba(12, 10, 20, 0.9);
  border: 1px solid rgba(163, 155, 181, 0.35);
  clip-path: var(--bevel-6);
  color: #cbd5e1;
  text-align: center;
}
.codex-bond-bonus-strip.owned {
  border-color: rgba(45, 212, 191, 0.55);
  color: #99f6e4;
}

/* Mitad Inferior Central: Línea de Ascensión Evolutiva Expandida (Nodos con Sprite 2x 84×72 px) */
.codex-evo-tree {
  flex: 1;
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(18, 15, 29, 0.96), rgba(11, 9, 18, 0.99));
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  clip-path: var(--bevel-8);
}
.evo-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 900;
  color: #f59e0b;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding-bottom: 3px;
}
.evo-tree-header small {
  color: #2dd4bf;
  font-size: 11.5px;
  font-weight: 700;
}
.evo-tree-nodes {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 3px 0;
}
.evo-branch-col {
  display: flex;
  flex-direction: row;
  gap: 6px;
}
.evo-tree-arrow {
  font-size: 11px;
  font-weight: 900;
  color: #fbbf24;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}
.evo-stage-card {
  flex: 1 1 112px;
  min-width: 110px;
  max-width: 142px;
  min-height: 98px;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  padding: 5px 6px !important;
  background: rgba(26, 21, 42, 0.94) !important;
  border: 1.5px solid rgba(45, 212, 191, 0.42) !important;
  clip-path: var(--bevel-6);
  text-align: center;
}
.evo-stage-card.on {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.2) !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.32);
}
.evo-stage-slot {
  width: 88px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 7, 16, 0.78);
  border: 1px solid rgba(212, 175, 55, 0.35);
  flex-shrink: 0;
}
.evo-stage-slot canvas {
  width: 78px !important;
  height: 64px !important;
}
.evo-stage-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.12;
}
.evo-stage-meta small {
  font-size: 10.5px;
  color: #2dd4bf;
  font-weight: 800;
}
.evo-stage-meta b {
  font-size: 13px;
  color: #f8fafc;
}

/* Columna Derecha: Altar de Evolución Permanente + Asignación de Escuadrón Integrada sin huecos */
.codex-col-right {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(165deg, rgba(29, 24, 46, 0.96), rgba(16, 13, 26, 0.99));
  border: 1.5px solid rgba(212, 175, 55, 0.48);
  clip-path: var(--bevel-10);
  overflow-y: auto;
}
.altar-bevel-box {
  flex: 1;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(35, 26, 58, 0.96), rgba(15, 12, 26, 0.99));
  border: 1.5px solid #c084fc;
  clip-path: var(--bevel-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}
.altar-bevel-box.ready {
  border-color: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
}
.altar-head-row, .altar-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}
.altar-kicker {
  font-size: 13px;
  font-weight: 900;
  color: #f59e0b;
  letter-spacing: 0.4px;
}
.altar-target-tag {
  font-size: 12.5px;
  font-weight: 800;
  color: #2dd4bf;
}
.altar-branch-row {
  display: flex;
  gap: 6px;
}
.altar-branch-row .chip {
  flex: 1;
  min-height: 36px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}
.altar-reqs-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.altar-req-slot {
  padding: 5px 10px;
  background: rgba(11, 9, 19, 0.92);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  clip-path: var(--bevel-6);
}
.altar-req-slot.met {
  border-color: rgba(16, 185, 129, 0.72);
  background: rgba(16, 185, 129, 0.12);
}
.req-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.req-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: #f8fafc;
}
.req-hex-ico {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.req-badge {
  font-size: 13px;
  font-weight: 900;
  color: #f59e0b;
}
.altar-req-slot.met .req-badge {
  color: #34d399;
}
.req-hint {
  font-size: 11.5px;
  color: #a39bb5;
  margin-left: 30px;
  margin-top: 1px;
}
.req-hint span { color: #e2e8f0; }
.altar-actions-row {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.altar-actions-row .btn {
  flex: 1;
  min-height: 44px;
  font-size: 12.5px !important;
  font-weight: 800;
  padding: 6px 8px !important;
}
.codex-squad-assign-box {
  padding: 6px 10px;
  background: rgba(14, 11, 24, 0.94);
  border: 1.5px solid rgba(45, 212, 191, 0.42);
  clip-path: var(--bevel-8);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.squad-assign-title {
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #2dd4bf;
}
.codex-squad-slots-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.codex-squad-slots-row .squad-slot-btn {
  min-height: 44px;
  height: 44px;
  font-size: 12.5px !important;
  font-weight: 800;
  padding: 4px 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dex-pick-btn {
  min-height: 44px !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
}

/* Banda Inferior (`Carrusel Táctil de Retratos` — 108px de alto con tarjetas fijas 92×88 px y botones ◀ ▶) */
.codex-bottom-strip {
  flex: 0 0 112px;
  height: 112px;
  padding: 4px 14px 6px;
  background: linear-gradient(180deg, #181326 0%, #0e0b18 100%);
  border-top: 2px solid #d4af37;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.strip-label {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #d4af37;
  line-height: 1;
}
.strip-hint {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.2px;
}
.codex-carousel-row {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.codex-carousel-nav {
  flex: 0 0 44px;
  width: 44px;
  height: 84px;
  min-height: 44px;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 900;
  background: linear-gradient(180deg, #2a2140, #161124) !important;
  border: 1.5px solid #d4af37 !important;
  color: #fef08a !important;
  clip-path: var(--bevel-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.codex-carousel-nav:hover {
  border-color: #2dd4bf !important;
  color: #2dd4bf !important;
}
#dex-grid.codex-horizontal-carousel {
  flex: 1;
  min-height: 0;
  max-height: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  padding: 1px 2px !important;
}
#dex-grid.codex-horizontal-carousel::-webkit-scrollbar,
.evo-tree-nodes::-webkit-scrollbar {
  height: 4px;
}
#dex-grid.codex-horizontal-carousel .cell {
  flex: 0 0 92px !important;
  width: 92px !important;
  min-width: 92px !important;
  height: 86px !important;
  padding: 10px 4px 4px !important;
  background: linear-gradient(180deg, rgba(29, 24, 46, 0.95), rgba(14, 11, 24, 0.99));
  border: 1.5px solid rgba(45, 212, 191, 0.38);
  clip-path: var(--bevel-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
#dex-grid.codex-horizontal-carousel .cell .no {
  top: 2px;
  left: 5px;
  font-size: 10px;
  font-weight: 800;
}
#dex-grid.codex-horizontal-carousel .cell.on {
  border: 2px solid #f59e0b;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.26), rgba(29, 24, 46, 0.98));
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.38);
}
#dex-grid.codex-horizontal-carousel .cell canvas {
  width: 56px !important;
  height: 52px !important;
  margin: 0 auto !important;
}
#dex-grid.codex-horizontal-carousel .cell b {
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1.05;
  max-width: 100%;
}

/* ============================================================================
 * 7. PANTALLA 2: PORTALES DE INVOCACIÓN Y SÍNTESIS ASTRAL (#scr-gacha) — TAREA 7.1
 * Columna Izquierda 240px (pestañas >=68px), Altar Central 100% altura (3 Besthers 3x 144×144),
 * Pity visual, 3 botones de invocación de 56px con alto contraste y 3 bloques visuales a la derecha
 * ============================================================================ */
.codex-gacha-3col,
.gacha-3col-body {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 14px;
  display: grid !important;
  grid-template-columns: 240px 1.32fr 1fr !important;
  gap: 14px;
  overflow: hidden;
}
.codex-gacha-left,
.gacha-col-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(24, 19, 38, 0.96), rgba(14, 11, 24, 0.99));
  border: 1.5px solid rgba(212, 175, 55, 0.48);
  clip-path: var(--bevel-10);
  overflow-y: auto;
}
#gacha-gens.codex-vertical-tabs {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  gap: 8px !important;
}
#gacha-gens .gacha-portal-tab {
  flex: 1;
  min-height: 68px !important;
  height: auto !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(28, 22, 46, 0.95), rgba(15, 12, 26, 0.98));
  border: 1.5px solid rgba(163, 155, 181, 0.35);
  clip-path: var(--bevel-8);
}
#gacha-gens .gacha-portal-tab.on {
  border: 2px solid #f59e0b !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(45, 212, 191, 0.16)) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.26);
}
#gacha-gens .synth-portal-tab {
  border-color: rgba(250, 204, 21, 0.6);
}
.gp-tab-ico {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(9, 7, 16, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.45);
  clip-path: var(--bevel-6);
}
.gp-tab-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#gacha-gens .gacha-portal-tab b {
  font-size: 15px !important;
  font-weight: 900;
  color: #f8fafc;
  line-height: 1.15;
}
#gacha-gens .gacha-portal-tab.on b {
  color: #fef08a;
}
#gacha-gens .gacha-portal-tab small {
  font-size: 12.5px !important;
  color: #99f6e4;
  line-height: 1.2;
}

/* Columna Central: Altar de Portal a Altura Completa */
.codex-gacha-center,
.gacha-col-center {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden !important;
}
#scr-gacha #banner {
  flex: 1;
  min-height: 0;
  padding: 12px 16px !important;
  border: 2px solid #d4af37 !important;
  clip-path: var(--bevel-10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
#scr-gacha #banner-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 22px !important;
  margin: 0 !important;
  color: #fef08a;
}
.portal-excl-tag {
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid #38bdf8;
  color: #7dd3fc;
  clip-path: var(--bevel-6);
}
#scr-gacha #banner-desc {
  font-size: 14px !important;
  color: #f1f5f9;
  margin: 0 !important;
  line-height: 1.35;
}
#scr-gacha #gacha-owned {
  font-size: 13.5px !important;
  color: #cbd5e1;
}
#scr-gacha #gacha-feat {
  flex: 1;
  min-height: 180px;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
  margin: 2px 0 !important;
}
.gacha-feat-pedestal {
  flex: 1;
  max-width: 190px;
  padding: 10px 8px;
  background: radial-gradient(circle at 50% 60%, rgba(250, 204, 21, 0.22), rgba(15, 23, 42, 0.88) 74%);
  border: 1.5px solid rgba(250, 204, 21, 0.55);
  clip-path: var(--bevel-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.gacha-feat-canvas {
  width: 144px !important;
  height: 144px !important;
}
.gacha-feat-plaque {
  width: 100%;
  padding: 4px 6px;
  background: rgba(9, 13, 26, 0.92);
  border-top: 1px solid rgba(212, 175, 55, 0.45);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gf-name {
  font-size: 15px;
  font-weight: 900;
  color: #fef08a;
}
.gf-stars {
  font-size: 12.5px;
  font-weight: 800;
}

/* Barra visual de progreso de Pity Garantizado */
#gacha-pity {
  margin: 0 !important;
}
.pity-bar-card {
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(24, 19, 38, 0.96), rgba(15, 23, 42, 0.96));
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  clip-path: var(--bevel-8);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pity-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  color: #f8fafc;
}
.pity-sub-tag {
  font-size: 12.5px;
  color: #99f6e4;
}
.pity-bar-track {
  width: 100%;
  height: 10px;
  background: #090d1a;
  border: 1px solid rgba(212, 175, 55, 0.4);
  overflow: hidden;
}
.pity-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2dd4bf, #f59e0b);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

/* Pie de acción con 3 Botones de Invocación Grandes (height: 56px, alto contraste) */
.gacha-pull-bar {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 !important;
}
.gacha-pull-bar .btn {
  min-height: 56px !important;
  height: 56px !important;
  padding: 0 8px !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  clip-path: var(--bevel-8);
}
#pull-1 {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border: 2px solid #38bdf8 !important;
  color: #f0f9ff !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}
#pull-10 {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
  border: 2px solid #fef08a !important;
  color: #fffbeb !important;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.45);
}
#pull-10b {
  background: linear-gradient(180deg, #7e22ce 0%, #581c87 100%) !important;
  border: 2px solid #e879f9 !important;
  color: #faf5ff !important;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.38);
}
.gacha-pull-bar .btn:disabled {
  opacity: 0.55 !important;
  filter: saturate(0.65);
}

/* Columna Derecha: 3 Bloques Visuales Claros (Tienda de Gemas + Barras de Rareza + 3 Insignias de Tickets) */
.codex-gacha-right,
.gacha-col-right {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(24, 19, 38, 0.96), rgba(14, 11, 24, 0.99)) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.48) !important;
  clip-path: var(--bevel-10);
}
.gacha-right-card {
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.86);
  border: 1.5px solid rgba(212, 175, 55, 0.38);
  clip-path: var(--bevel-8);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gem-shop-card {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.42), rgba(15, 23, 42, 0.94));
  border-color: rgba(192, 132, 252, 0.55);
}
.grc-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
  padding-bottom: 5px !important;
}
.grc-header b {
  font-size: 14px;
  color: #fef08a;
}
.gem-balance-pill {
  font-size: 13.5px;
  font-weight: 900;
  color: #e9d5ff;
}
.gem-shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gem-buy-card {
  min-height: 50px !important;
  padding: 6px 10px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.gbc-top {
  font-size: 13px;
  font-weight: 800;
}
.astral-exchange-product {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.aex-product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  color: #e2e8f0;
}
.aex-product-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.aex-product-title small {
  color: #c4b5fd;
  font-weight: 700;
}
.aex-afford-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.aex-afford-badge.is-ok {
  background: rgba(16, 185, 129, 0.22);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.45);
}
.aex-afford-badge.is-short {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.45);
}
.astral-exchange-btn {
  width: 100%;
  min-height: 46px !important;
}
.astral-exchange-btn.cannot-afford {
  opacity: 0.72;
  filter: saturate(0.55);
}
.aex-feedback {
  margin: 0 !important;
  font-size: 11.5px;
  line-height: 1.25;
  color: #cbd5e1;
}
.aex-feedback.is-success {
  color: #6ee7b7;
  font-weight: 700;
}
.aex-feedback.is-error,
.aex-feedback.is-short {
  color: #fca5a5;
}
.gbc-cost {
  font-size: 14px;
  font-weight: 900;
  color: #fef08a;
}
.rates-bars-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gacha-rate-bar-row {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  padding: 2px 0 !important;
  border-bottom: none !important;
}
.grb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.grb-top small {
  font-size: 12px;
  color: #94a3b8;
}
.grb-track {
  width: 100%;
  height: 7px;
  background: #090d1a;
  border: 1px solid rgba(148, 163, 184, 0.25);
  overflow: hidden;
}
.grb-fill {
  height: 100%;
}
.ticket-badges-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ticket-source-badge {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 6px 8px !important;
  background: rgba(9, 13, 26, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.32) !important;
  clip-path: var(--bevel-6);
}
.tsb-ico {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.4);
}
.ticket-source-badge b {
  display: block;
  font-size: 13px;
  color: #f8fafc;
}
.ticket-source-badge small {
  display: block;
  font-size: 12px;
  color: #cbd5e1;
}

/* ============================================================================
 * 8. PANTALLA 3: FORJA DE ÉTER Y ALMACÉN DE 22 CATALIZADORES (#scr-upgrades) — TAREA 7.1
 * Mitad Izquierda: 5 Runas con Icono 💠 Esquirla + Resumen de Bonificaciones Totales del Santuario
 * Mitad Derecha: Cuadrícula 4 Columnas (height: 64px, cero truncado) + Panel Inspector de Detalle
 * ============================================================================ */
.codex-forge-split,
.forge-2col-body {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 14px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 14px;
  overflow: hidden;
}
.forge-left-col,
.forge-right-col,
.forge-col-left,
.forge-col-right {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(24, 19, 38, 0.96), rgba(14, 11, 24, 0.99));
  border: 1.5px solid rgba(212, 175, 55, 0.48);
  clip-path: var(--bevel-10);
  overflow: hidden;
}
#upg-list.upg,
.forge-scroll-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  padding-right: 2px;
}
#scr-upgrades .upg-item {
  margin: 0 !important;
  padding: 6px 10px !important;
}
.shard-buy-btn {
  min-height: 44px !important;
  min-width: 104px;
  padding: 5px 10px !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, #0284c7, #0369a1) !important;
  border: 1.5px solid #38bdf8 !important;
  color: #f0f9ff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.shard-buy-btn:hover:not(:disabled) {
  border-color: #fef08a !important;
  filter: brightness(1.12);
}
.forge-sanctuary-summary {
  margin: 0 !important;
  padding: 8px 10px !important;
  background: linear-gradient(135deg, rgba(19, 34, 46, 0.92), rgba(24, 19, 38, 0.96)) !important;
  border: 1.5px solid rgba(45, 212, 191, 0.5) !important;
  clip-path: var(--bevel-8);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.forge-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(45, 212, 191, 0.28);
  padding-bottom: 3px;
}
.forge-summary-header b {
  font-size: 13px;
  color: #fef08a;
}
.shard-avail-badge {
  font-size: 12.5px;
  color: #7dd3fc;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.forge-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.forge-bonus-pill {
  padding: 5px 8px;
  background: rgba(9, 13, 26, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.32);
  clip-path: var(--bevel-6);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fb-label {
  font-size: 11.5px;
  color: #94a3b8;
}
.fb-val {
  font-size: 12.5px;
  color: #99f6e4;
}

/* Mitad Derecha: Cuadrícula de 22 Catalizadores en 4 Columnas + Inspector Inferior */
.forge-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: #fef08a;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}
#forge-catalyst-grid,
.forge-catalyst-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 2px;
  align-content: start;
}
.catalyst-bevel-card {
  padding: 6px 8px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 13, 26, 0.9) !important;
  border: 1.5px solid rgba(163, 155, 181, 0.3) !important;
  clip-path: var(--bevel-8);
  cursor: pointer;
  text-align: left;
}
.catalyst-bevel-card.compact-card {
  position: relative;
  min-height: 54px;
  height: 54px;
  padding: 6px 6px 5px 6px !important;
  gap: 6px;
  justify-content: flex-start;
}
.catalyst-bevel-card.owned {
  border-color: rgba(212, 175, 55, 0.65) !important;
  background: linear-gradient(135deg, rgba(35, 28, 56, 0.95), rgba(18, 15, 29, 0.98)) !important;
}
.catalyst-bevel-card.selected {
  border: 2px solid #2dd4bf !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.24), rgba(29, 24, 46, 0.98)) !important;
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.35);
}
.cat-hex-icon {
  width: 32px;
  height: 32px;
  background: rgba(9, 7, 16, 0.95);
  border: 1.5px solid #d4af37;
  clip-path: var(--bevel-6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cat-card-name {
  flex: 1;
  min-width: 0;
  padding-right: 22px;
  font-size: 11px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.12;
  word-break: normal;
  overflow-wrap: normal;
}
.cat-qty {
  font-size: 12px;
  font-weight: 900;
  padding: 2px 5px;
  background: rgba(9, 7, 16, 0.92);
  border: 1px solid rgba(163, 155, 181, 0.35);
  color: #94a3b8;
  flex-shrink: 0;
}
.catalyst-bevel-card.compact-card .cat-qty {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 10px;
  padding: 1px 4px;
  line-height: 1.1;
}
.cat-qty.has {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.55);
}

/* Panel Inspector del Catalizador Seleccionado (Parte Inferior Derecha de la Forja) */
.forge-catalyst-inspector {
  flex: 0 0 auto;
  min-height: 128px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(29, 24, 46, 0.98), rgba(14, 19, 34, 0.98));
  border: 2px solid #d4af37;
  clip-path: var(--bevel-8);
  display: flex;
  align-items: center;
  gap: 12px;
}
.cat-insp-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 0 88px;
}
.cat-insp-icon {
  width: 56px;
  height: 56px;
  background: rgba(9, 7, 16, 0.95);
  border: 2px solid #d4af37;
  clip-path: var(--bevel-8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-insp-stock {
  font-size: 12px;
  font-weight: 900;
  padding: 2px 7px;
  background: rgba(9, 7, 16, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #cbd5e1;
  white-space: nowrap;
}
.cat-insp-stock.has {
  color: #34d399;
  border-color: #34d399;
}
.cat-insp-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cat-insp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.cat-insp-title {
  font-size: 16.5px !important;
  font-weight: 900;
  color: #fef08a;
  margin: 0 !important;
}
.cat-insp-grade {
  font-size: 12.5px;
  font-weight: 800;
}
.cat-insp-farm {
  font-size: 13px;
  color: #e2e8f0;
  line-height: 1.28;
}
.cat-insp-farm b {
  color: #2dd4bf;
}
.cat-insp-users {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #cbd5e1;
}
.cat-users-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cat-user-chip {
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #fde68a;
  clip-path: var(--bevel-6);
}

/* Vista expandida de Almacén (#scr-catalysts) */
.cat-info {
  flex: 1;
  min-width: 0;
}
.cat-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.cat-top-row b {
  font-size: 14px;
  color: #f8fafc;
}
.cat-grade-row {
  font-size: 12px;
  font-weight: 700;
}
.cat-grade-row span {
  color: #a39bb5;
  font-weight: 400;
}
.cat-hint-row {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.25;
}

/* ============================================================================
 * 9. PANTALLA 4: MISIONES, LOGROS Y PERFIL (#scr-goals) — TAREA 7.1
 * Pestañas Superiores perfectamente alineadas (height: 40px) y Misiones en 2 Columnas Simétricas
 * ============================================================================ */
#goals-tabs.codex-header-tabs {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
#goals-tabs.codex-header-tabs .tab {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  background: rgba(18, 15, 29, 0.92) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  color: #e2e8f0 !important;
  clip-path: var(--bevel-6);
  cursor: pointer;
}
#goals-tabs.codex-header-tabs .tab.on {
  background: linear-gradient(180deg, #f59e0b, #b45309) !important;
  border-color: #fef08a !important;
  color: #fffbeb !important;
}

.codex-scroll-body,
.goals-fullscreen-body,
.starters-fullscreen-body {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  overflow-y: auto;
  padding: 12px 18px;
}

.goals-missions-2col {
  width: 100%;
  max-width: 1360px;
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.goals-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
}
.goals-col .goals-h {
  margin: 0 !important;
  padding-bottom: 5px;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.38);
}
.goals-col .goals-h h3 {
  font-size: 18px !important;
  color: #fef08a;
  margin: 0 !important;
}
.goals-col .goals-h .sub {
  font-size: 12.5px !important;
  color: #99f6e4;
}
#scr-goals .mission {
  flex: 1;
  min-height: 98px;
  margin: 0 !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(28, 22, 46, 0.95), rgba(15, 12, 26, 0.99)) !important;
  border: 1.5px solid rgba(45, 212, 191, 0.42) !important;
  clip-path: var(--bevel-8);
}
#scr-goals .mission.weekly-mission {
  border-color: rgba(245, 158, 11, 0.68) !important;
  background: linear-gradient(135deg, rgba(42, 28, 18, 0.92), rgba(22, 16, 36, 0.98)) !important;
}
#scr-goals .mission.ready {
  border-color: #34d399 !important;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.25);
}
.m-ico-box {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: rgba(9, 7, 16, 0.92);
  border: 1.5px solid #d4af37;
  clip-path: var(--bevel-6);
  display: flex;
  align-items: center;
  justify-content: center;
}
#scr-goals .m-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
#scr-goals .m-txt b {
  font-size: 15.5px !important;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.22;
}
.m-prog-num {
  font-size: 13.5px;
  font-weight: 900;
  color: #fef08a;
  white-space: nowrap;
}
#scr-goals .bar.m-thick-bar {
  height: 10px !important;
  background: #090d1a;
  border: 1px solid rgba(212, 175, 55, 0.35);
}
.m-right-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}
#scr-goals .m-rw {
  font-size: 13.5px !important;
  font-weight: 800;
  padding: 3px 9px;
  background: rgba(9, 13, 26, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #fde68a;
  clip-path: var(--bevel-6);
  white-space: nowrap;
}
.m-action-btn {
  min-height: 44px !important;
  min-width: 112px;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
}

/* Panel Inferior Derecho: Próximos Logros Cercanos */
.goals-upcoming-ach-panel {
  flex: 1.15;
  margin: 0 !important;
  padding: 8px 12px !important;
  background: linear-gradient(165deg, rgba(24, 19, 38, 0.96), rgba(14, 11, 24, 0.99)) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.5) !important;
  clip-path: var(--bevel-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
}
.goals-upcoming-head {
  margin: 0 !important;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}
.goals-upcoming-head b {
  font-size: 14px;
  color: #fef08a;
}
.goals-upcoming-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
}
.upcoming-ach-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(9, 13, 26, 0.88);
  border: 1px solid rgba(163, 155, 181, 0.3);
  clip-path: var(--bevel-6);
}
.ua-ico {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ua-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ua-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
}
.ua-top b {
  color: #f8fafc;
}
.ua-top span {
  font-size: 12.5px;
  font-weight: 800;
  color: #2dd4bf;
}
.ua-desc {
  font-size: 12px;
  color: #cbd5e1;
}
.ua-rw {
  font-size: 12.5px;
  font-weight: 800;
  color: #fde68a;
  white-space: nowrap;
}

/* ============================================================================
 * 10. ADAPTACIÓN RESPONSIVE PARA ANDROID LANDSCAPE (915×412 y 800×400)
 * ============================================================================ */
@media (max-height: 520px) {
  #topbar, .topbar, .topbar.beveled-topbar {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0 8px;
    gap: 4px;
  }
  .topbar-brand {
    padding: 3px 8px;
    gap: 4px;
  }
  .topbar-brand .brand-main { font-size: 13px; letter-spacing: 1px; }
  .topbar-brand .brand-sub { font-size: 10.5px; letter-spacing: 1.5px; }
  .pill.bevel-plate { padding: 3px 7px; font-size: 11px; }
  .topbar-utils .util-btn { min-height: 30px; padding: 3px 7px; font-size: 11px; }

  #scr-menu, #scr-menu.hub-sanctuary {
    padding: 44px 8px 6px !important;
    flex-direction: column !important;
  }
  #hub-central-emblem, .hub-central-emblem {
    padding: 2px 14px 2px !important;
    gap: 1px;
  }
  #hub-central-emblem .t1 {
    font-size: 24px !important;
    letter-spacing: 4px !important;
    padding-left: 4px;
  }
  #hub-central-emblem .t2 {
    font-size: 10px !important;
    letter-spacing: 6px !important;
    padding-left: 6px;
  }
  #hub-central-emblem .emblem-ornament { width: 32px; }
  #menu-squad-pedestal, .squad-pedestal {
    gap: 26px;
  }
  #menu-squad-pedestal .pedestal-card.leader {
    width: 138px;
    min-height: 162px;
    margin-bottom: 2px;
  }
  #menu-squad-pedestal .pedestal-card.reserve {
    width: 124px;
    min-height: 148px;
  }
  #menu-squad-pedestal .pedestal-card.leader .pedestal-stage {
    width: 136px !important;
    height: 122px !important;
  }
  #menu-squad-pedestal .pedestal-card.reserve .pedestal-stage {
    width: 122px !important;
    height: 112px !important;
  }
  .pedestal-plaque {
    width: 124px;
    min-width: 124px;
    height: 36px;
    min-height: 36px;
    margin-top: -4px;
    padding: 2px 6px;
  }
  .pedestal-plaque.leader-plaque {
    width: 132px;
    min-width: 132px;
  }
  .pedestal-name { font-size: 11.5px; }
  .leader-plaque .pedestal-name { font-size: 12px; }

  .hub-bottom-architecture {
    max-width: 100%;
    gap: 8px;
  }
  .hub-bottom-dock {
    gap: 8px;
  }
  .dock-card {
    width: 158px;
    min-width: 158px;
    max-width: 158px;
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    padding: 6px 10px !important;
    gap: 8px !important;
  }
  .dock-ico-canvas {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
  .dock-card-title, .dock-title { font-size: 12.5px !important; }
  .dock-card small, .dock-sub { font-size: 10px !important; }

  .octagon-incursion-btn {
    width: 194px;
    min-width: 194px;
    max-width: 194px;
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    padding: 6px 10px !important;
    gap: 8px !important;
  }
  .cta-ico-canvas {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }
  .octagon-incursion-btn .cta-title { font-size: 12.5px; }
  .octagon-incursion-btn small { font-size: 9.5px !important; }

  /* Códice Pantalla Completa en Móvil Landscape (915×412) */
  .codex-top-header, .codex-top-bar {
    flex: 0 0 40px;
    height: 40px;
    padding: 0 8px;
  }
  .back-sanctuary-btn, .codex-back-btn {
    min-height: 30px;
    padding: 3px 9px !important;
    font-size: 11px !important;
  }
  .codex-title-group h2 { font-size: 15px !important; }
  .codex-kicker { display: none; }
  #scr-dex .dex-mastery-banner {
    height: 26px;
    max-width: 320px;
    padding: 2px 8px !important;
  }
  #scr-dex .dex-mastery-row { font-size: 9.5px; }
  .codex-body-3col, .codex-3col-body {
    padding: 4px 8px !important;
    grid-template-columns: 168px 1fr !important;
    gap: 6px !important;
  }
  .codex-left-nav, .codex-col-left { padding: 4px 5px !important; gap: 3px !important; }
  .codex-vertical-tabs { gap: 3px !important; }
  .codex-vertical-tabs .gen-tab { min-height: 32px; height: 32px; padding: 3px 6px !important; }
  .codex-vertical-tabs .gen-tab b { font-size: 10.5px !important; }
  .codex-vertical-tabs .gen-tab small { font-size: 9.5px !important; }
  .codex-vertical-filters { gap: 3px !important; }
  .codex-vertical-filters .chip { min-height: 32px; height: 32px; padding: 2px 4px !important; font-size: 10px !important; }
  #dex-detail.codex-center-and-right { gap: 6px; }
  .codex-col-center, .codex-col-right { padding: 5px 7px; gap: 4px; }
  .codex-hero-pedestal-col { flex: 0 0 92px; gap: 3px; }
  .codex-arcane-stage-wrap { width: 88px; height: 82px; flex: 0 0 82px; }
  #dex-big.dex-hero-stage { width: 78px !important; height: 74px !important; }
  .codex-var-seg button { min-height: 22px; font-size: 9.5px; padding: 1px 5px; }
  .codex-specimen-title { font-size: 15px !important; }
  .codex-bond-bonus-strip { display: none; }
  .dex-stats-compact .stat { font-size: 11px; grid-template-columns: 64px 1fr 40px; }
  .dex-stats-compact .stat .bar { height: 6px; }
  .codex-desc-txt { display: none; }
  .codex-evo-tree { min-height: 82px; padding: 4px 6px; }
  .evo-tree-header { font-size: 10px; padding-bottom: 2px; }
  .evo-stage-card { min-width: 86px; min-height: 62px; padding: 3px 5px !important; gap: 2px; }
  .evo-stage-slot { width: 52px; height: 40px; }
  .evo-stage-slot canvas { width: 46px !important; height: 38px !important; }
  .evo-stage-meta b { font-size: 10px; }
  .evo-stage-meta small { font-size: 8.5px; }
  .altar-bevel-box { padding: 5px 7px; gap: 3px; }
  .altar-reqs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
  }
  .altar-req-slot { padding: 3px 5px; }
  .req-main-row { font-size: 10px; }
  .req-hex-ico { width: 18px; height: 18px; }
  .req-hint { display: none; }
  .altar-actions-row .btn { min-height: 30px; padding: 3px 6px !important; font-size: 10px !important; }
  .codex-squad-assign-box { padding: 4px 6px; gap: 3px; }
  .squad-assign-title { display: none; }
  .codex-squad-slots-row { gap: 4px; }
  .codex-squad-slots-row .squad-slot-btn { min-height: 28px; height: 28px; padding: 2px 4px !important; font-size: 9.5px !important; }
  .dex-pick-btn { min-height: 30px !important; padding: 3px 8px !important; font-size: 10.5px !important; }
  .codex-bottom-strip {
    flex: 0 0 80px;
    height: 80px;
    padding: 2px 8px 3px;
  }
  .strip-label { display: none; }
  .codex-carousel-nav { flex: 0 0 34px; width: 34px; height: 68px; min-height: 34px; font-size: 14px !important; }
  #dex-grid.codex-horizontal-carousel .cell {
    flex: 0 0 78px !important;
    width: 78px !important;
    min-width: 78px !important;
    height: 68px !important;
    padding: 8px 3px 2px !important;
  }
  #dex-grid.codex-horizontal-carousel .cell canvas {
    width: 42px !important;
    height: 36px !important;
  }
  #dex-grid.codex-horizontal-carousel .cell b { font-size: 10px !important; }

  .codex-gacha-3col, .gacha-3col-body {
    padding: 6px 8px;
    grid-template-columns: 175px 1.25fr 1fr !important;
    gap: 7px;
  }
  #gacha-gens .gacha-portal-tab { min-height: 52px !important; padding: 6px 8px !important; }
  .gacha-pull-bar .btn { min-height: 44px !important; height: 44px !important; font-size: 12px !important; }
  .codex-forge-split, .forge-2col-body {
    padding: 6px 8px;
    gap: 7px;
  }
  #goals-tabs.codex-header-tabs .tab {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
}

/* ============================================================================
 * 11. MODAL DE SUBIDA DE NIVEL: TRÍPTICO DE CARTAS ASTRALES BISELADAS (#scr-levelup) — TAREA 7.2
 * - Geometría 100% biselada a 45° (border-radius: 0 !important; clip-path)
 * - 3 Cartas Verticales en paralelo (grid-template-columns: repeat(3, 1fr); gap: 16px)
 * - Cabecera y marco cromático por elemento + Medallón 64×64 (Icono 56×56)
 * - Rombos de progresión (◆ ◆ ◇ ◇ ◇) + Insignia de Sinergia con el Escuadrón (+20% Daño)
 * - Barra inferior de Arsenal Equipado (4 Armas + 6 Reliquias) y Botón Redirigir Destino [R]
 * ============================================================================ */
@media (max-width: 680px) {
  .codex-gacha-3col, .gacha-3col-body {
    grid-template-columns: 1fr !important;
    overflow-y: auto !important;
    padding: 8px 10px !important;
    gap: 10px !important;
  }
  .codex-gacha-right {
    width: 100% !important;
  }
}

#scr-levelup {
  padding: 12px 18px !important;
  background: radial-gradient(circle at 50% 35%, rgba(24, 18, 43, 0.86), rgba(4, 6, 14, 0.95)) !important;
  animation: none !important;
}
#scr-levelup .levelup-triptych-box {
  width: min(1040px, 96vw) !important;
  max-width: 1040px !important;
  max-height: calc(100dvh - 24px) !important;
  padding: 14px 18px !important;
  border: 2px solid #d4af37 !important;
  border-radius: 0 !important;
  clip-path: var(--bevel-10) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(26, 20, 42, 0.98) 0%, rgba(12, 10, 22, 0.99) 100%) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(212, 175, 55, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 12px !important;
  overflow: hidden !important;
  animation: none !important;
  transform: none !important;
}
#scr-levelup .levelup-triptych-box *,
#scr-levelup .triptych-card,
#scr-levelup .triptych-medallion,
#scr-levelup .triptych-type-badge,
#scr-levelup .triptych-key,
#scr-levelup .triptych-lvl-tag,
#scr-levelup .triptych-synergy-banner,
#scr-levelup .triptych-metric-pill,
#scr-levelup .levelup-bottom-bar,
#scr-levelup .arsenal-slot,
#scr-levelup #lvl-reroll,
#scr-levelup kbd {
  border-radius: 0 !important;
}

/* Cabecera Épica del Modal */
.levelup-triptych-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.42);
  padding-bottom: 8px;
}
.levelup-kicker {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 2.2px;
  color: #2dd4bf;
  text-transform: uppercase;
}
.levelup-triptych-header h2 {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px;
  color: #fbbf24 !important;
  text-shadow: 2px 2px 0 #07050e, 0 0 16px rgba(251, 191, 36, 0.55) !important;
}
.levelup-triptych-header .sub {
  margin: 0 !important;
  font-size: 13.5px !important;
  color: #cbd5e1 !important;
}
#scr-levelup kbd {
  padding: 1px 6px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid #d4af37;
  color: #fef08a;
  font-size: 12px;
  font-weight: 900;
  clip-path: var(--bevel-6);
}

/* Grid de 3 Cartas Verticales en Paralelo */
#cards.levelup-triptych-grid {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
#cards.levelup-triptych-grid .card.triptych-card {
  position: relative;
  min-height: 295px;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 7px !important;
  text-align: center !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(56, 189, 248, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(28, 22, 46, 0.96) 0%, rgba(12, 10, 22, 0.99) 100%) !important;
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--card-elem, #38bdf8) 26%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(28, 22, 46, 0.96) 0%, rgba(12, 10, 22, 0.99) 100%) !important;
  border: 2px solid var(--card-elem, #38bdf8) !important;
  clip-path: var(--bevel-10) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.78), inset 0 0 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.14s ease;
}
#cards.levelup-triptych-grid .card.triptych-card:hover {
  transform: translateY(-4px) !important;
  filter: brightness(1.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.9), 0 0 18px var(--card-elem, #38bdf8);
}
#cards.levelup-triptych-grid .card.triptych-card.has-synergy {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.85), 0 0 18px rgba(251, 191, 36, 0.35), inset 0 0 16px rgba(16, 185, 129, 0.14);
}
#cards.levelup-triptych-grid .card.triptych-card.evo {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 26px rgba(251, 191, 36, 0.55), inset 0 0 20px rgba(251, 191, 36, 0.22);
}

/* Franja Superior de la Carta: Tipo Elemental a la izquierda + Tecla [1]/[2]/[3] a la derecha */
.triptych-card-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.triptych-type-badge {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.7px;
  color: #090710;
  background: var(--card-elem, #38bdf8);
  text-shadow: none;
  clip-path: var(--bevel-6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card.triptych-card .key.triptych-key {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 900;
  color: #fef08a;
  background: rgba(9, 7, 16, 0.92);
  border: 1.5px solid var(--card-elem, #d4af37);
  clip-path: var(--bevel-6);
}

/* Medallón Central de Icono (64×64 px con Icono Pixel-Art 56×56 px) */
.triptych-medallion-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
}
.card.triptych-card .ico.triptych-medallion {
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), rgba(9, 7, 16, 0.95) 75%) !important;
  border: 2px solid var(--card-elem, #38bdf8) !important;
  clip-path: var(--bevel-oct) !important;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.12);
}
.card.triptych-card .ico.triptych-medallion img.pix {
  width: 56px !important;
  height: 56px !important;
  image-rendering: pixelated;
}

/* Cuerpo Central: Título, Rombos de Nivel, Insignia de Sinergia y Descripción */
.card.triptych-card .txt.triptych-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 0;
}
.card.triptych-card .nm.triptych-title {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #fef08a;
  justify-content: center;
  text-align: center;
  line-height: 1.12;
}
.triptych-diamonds-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.triptych-diamonds {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  line-height: 1;
}
.lvl-diamond.acquired {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.75);
}
.lvl-diamond.next-lvl {
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.95);
  animation: diamondPulse 0.85s ease-in-out infinite alternate;
}
.lvl-diamond.evo-lvl {
  color: #fde047;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.95);
}
.lvl-diamond.empty {
  color: rgba(148, 163, 184, 0.42);
}
@keyframes diamondPulse {
  from { color: #38bdf8; transform: scale(1); }
  to   { color: #fde047; transform: scale(1.18); }
}
.triptych-lvl-tag {
  font-size: 11px;
  font-weight: 900;
  padding: 2px 6px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.48);
  color: #e2e8f0;
  clip-path: var(--bevel-6);
  white-space: nowrap;
}

/* Banda de Sinergia con el Escuadrón */
.triptych-synergy-banner {
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  clip-path: var(--bevel-6);
}
.triptych-synergy-banner.active-synergy {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.28), rgba(245, 158, 11, 0.28));
  border: 1.5px solid #fbbf24;
  color: #fef08a;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}
.triptych-synergy-banner.relic-synergy {
  background: linear-gradient(90deg, rgba(14, 116, 144, 0.34), rgba(30, 41, 59, 0.92));
  border: 1.5px solid #38bdf8;
  color: #bae6fd;
}
.triptych-synergy-banner.neutral-synergy {
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

/* Descripción y Píldoras Biseladas de Estadísticas en la Base */
.card.triptych-card .ds.triptych-desc {
  font-size: 14px !important;
  color: #f1f5f9 !important;
  line-height: 1.32;
  text-align: center;
  margin-top: 2px;
}
.triptych-metrics {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.triptych-metric-pill {
  padding: 4px 6px;
  background: rgba(9, 7, 16, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.38);
  clip-path: var(--bevel-6);
  font-size: 11.5px;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.15;
}
.triptych-metric-pill b {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 800;
}
.triptych-metric-pill em {
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  color: #fef08a;
}

/* Barra Inferior de Arsenal Actual y Botón Redirigir Destino [R] */
.levelup-bottom-bar {
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(16, 13, 28, 0.96), rgba(24, 19, 40, 0.96));
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  clip-path: var(--bevel-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.levelup-arsenal-zone {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.arsenal-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
  color: #d4af37;
}
.arsenal-slots-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.arsenal-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.arsenal-group-tag {
  font-size: 11px;
  font-weight: 900;
  color: #99f6e4;
  white-space: nowrap;
}
.arsenal-group-items {
  display: flex;
  align-items: center;
  gap: 4px;
}
.arsenal-sep {
  width: 1.5px;
  height: 28px;
  background: rgba(212, 175, 55, 0.35);
}
.arsenal-slot {
  height: 36px;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(9, 7, 16, 0.92);
  border: 1.5px solid rgba(148, 163, 184, 0.32);
  clip-path: var(--bevel-6);
}
.arsenal-slot.filled {
  border-color: var(--slot-c, #f59e0b);
  background: linear-gradient(180deg, rgba(29, 24, 46, 0.95), rgba(12, 10, 22, 0.98));
}
.arsenal-slot-ico img.pix {
  width: 28px !important;
  height: 28px !important;
}
.arsenal-empty-glyph {
  font-size: 14px;
  color: rgba(148, 163, 184, 0.45);
}
.arsenal-slot-lvl {
  font-size: 11px;
  font-weight: 900;
  color: #fef08a;
  white-space: nowrap;
}
.arsenal-slot.empty .arsenal-slot-lvl {
  color: rgba(148, 163, 184, 0.55);
  font-size: 10px;
}
.levelup-reroll-zone {
  flex: 0 0 auto;
}
#lvl-reroll.levelup-reroll-btn {
  min-height: 44px;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #fef08a !important;
  background: linear-gradient(135deg, #581c87 0%, #311042 55%, #78350f 100%) !important;
  border: 2px solid #fbbf24 !important;
  clip-path: var(--bevel-8) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75), 0 0 14px rgba(251, 191, 36, 0.32) !important;
  white-space: nowrap;
}
#lvl-reroll.levelup-reroll-btn:hover:not(:disabled) {
  border-color: #2dd4bf !important;
  filter: brightness(1.15);
}

/* Adaptación Responsiva Móvil (Android Landscape 915×412 / 800×400 — Cero Scroll Vertical) */
@media (max-height: 520px) {
  @media (max-width: 680px) {
  .codex-gacha-3col, .gacha-3col-body {
    grid-template-columns: 1fr !important;
    overflow-y: auto !important;
    padding: 8px 10px !important;
    gap: 10px !important;
  }
  .codex-gacha-right {
    width: 100% !important;
  }
}

#scr-levelup {
    padding: 4px 8px !important;
  }
  #scr-levelup .levelup-triptych-box {
    max-height: calc(100dvh - 8px) !important;
    padding: 6px 10px !important;
    gap: 5px !important;
  }
  .levelup-triptych-header {
    padding-bottom: 3px;
    gap: 1px;
  }
  .levelup-kicker {
    display: none;
  }
  .levelup-triptych-header h2 {
    font-size: 16px !important;
  }
  .levelup-triptych-header .sub {
    font-size: 11px !important;
  }
  #cards.levelup-triptych-grid {
    gap: 8px !important;
  }
  #cards.levelup-triptych-grid .card.triptych-card {
    min-height: 0 !important;
    padding: 6px 8px !important;
    gap: 3px !important;
  }
  .triptych-card-top {
    padding-bottom: 3px;
  }
  .triptych-type-badge {
    font-size: 9.5px;
    padding: 2px 6px;
  }
  .card.triptych-card .key.triptych-key {
    font-size: 10px;
    padding: 1px 5px;
  }
  .card.triptych-card .ico.triptych-medallion {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }
  .card.triptych-card .ico.triptych-medallion img.pix {
    width: 34px !important;
    height: 34px !important;
  }
  .card.triptych-card .txt.triptych-body {
    gap: 2px;
  }
  .card.triptych-card .nm.triptych-title {
    font-size: 13.5px !important;
  }
  .triptych-diamonds {
    font-size: 11px;
  }
  .triptych-lvl-tag {
    font-size: 9.5px;
    padding: 1px 4px;
  }
  .triptych-synergy-banner {
    padding: 2px 5px;
    font-size: 10px;
  }
  .card.triptych-card .ds.triptych-desc {
    font-size: 11px !important;
    line-height: 1.18;
  }
  .triptych-metrics {
    padding-top: 3px;
    gap: 4px;
  }
  .triptych-metric-pill {
    padding: 2px 4px;
    flex-direction: row;
    gap: 3px;
  }
  .triptych-metric-pill b {
    font-size: 9.5px;
  }
  .triptych-metric-pill em {
    font-size: 10px;
  }
  .levelup-bottom-bar {
    padding: 4px 8px;
    gap: 6px;
  }
  .arsenal-kicker,
  .arsenal-group-tag {
    display: none;
  }
  .arsenal-slot {
    height: 26px;
    padding: 1px 4px;
  }
  .arsenal-slot-ico img.pix {
    width: 20px !important;
    height: 20px !important;
  }
  .arsenal-slot-lvl {
    font-size: 9.5px;
  }
  #lvl-reroll.levelup-reroll-btn {
    min-height: 30px;
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   12. TAREA 7.3 — INFORME TÁCTICO DE INCURSIÓN PANORÁMICO (3 COLUMNAS BISELADAS)
   ========================================================================== */

#scr-over.scr {
  padding: 10px 14px !important;
  background: radial-gradient(circle at 50% 25%, rgba(15, 23, 42, 0.88), rgba(4, 6, 12, 0.96)) !important;
}

#scr-over .box.over-panoramic-box {
  width: min(1020px, 94vw) !important;
  max-width: 1020px !important;
  max-height: 94vh !important;
  padding: 14px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: linear-gradient(180deg, rgba(13, 18, 31, 0.98) 0%, rgba(7, 10, 19, 0.99) 100%) !important;
  border: 2px solid #f43f5e !important;
  border-radius: 0 !important;
  clip-path: polygon(
    16px 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    16px 100%,
    0 calc(100% - 16px),
    0 16px
  ) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.92), inset 0 0 28px rgba(244, 63, 94, 0.14) !important;
  animation: none !important;
  transform: none !important;
  overflow: hidden !important;
}

#scr-over.is-victory .box.over-panoramic-box,
#scr-over .box.over-panoramic-box.is-victory {
  border-color: #fbbf24 !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.92), inset 0 0 32px rgba(251, 191, 36, 0.18) !important;
}

/* Cabecera con Mapa de Progresión de las 8 Salas */
.over-panoramic-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(136, 19, 55, 0.42) 0%, rgba(15, 23, 42, 0.92) 60%, rgba(88, 12, 36, 0.35) 100%);
  border: 1px solid rgba(244, 63, 94, 0.55);
  border-radius: 0 !important;
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  );
}

#scr-over.is-victory .over-panoramic-header {
  background: linear-gradient(90deg, rgba(180, 83, 9, 0.42) 0%, rgba(15, 23, 42, 0.92) 55%, rgba(13, 148, 136, 0.36) 100%);
  border-color: rgba(251, 191, 36, 0.68);
}

.over-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.over-header-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.over-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fda4af;
  text-transform: uppercase;
}

#scr-over.is-victory .over-kicker {
  color: #5eead4;
}

#scr-over #over-title {
  margin: 0 !important;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 22px !important;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff1f2;
  text-shadow: 0 2px 10px rgba(244, 63, 94, 0.45);
}

#scr-over.is-victory #over-title {
  color: #fef08a !important;
  text-shadow: 0 2px 12px rgba(251, 191, 36, 0.55);
}

.over-dungeon-badge {
  padding: 6px 12px;
  background: rgba(9, 13, 22, 0.92);
  border: 1px solid rgba(244, 63, 94, 0.65);
  color: #fecdd3;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
  border-radius: 0 !important;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}

#scr-over.is-victory .over-dungeon-badge {
  border-color: rgba(45, 212, 191, 0.75);
  color: #99f6e4;
}

/* Línea Horizontal de 8 Salas (Room Progress Track) */
.over-room-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  padding-top: 2px;
}

.over-room-node {
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(100, 116, 139, 0.45);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  border-radius: 0 !important;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

.over-room-node.is-elite-room {
  border-color: rgba(192, 132, 252, 0.55);
}

.over-room-node.is-boss-room {
  border-color: rgba(251, 191, 36, 0.65);
}

.over-room-node.node-cleared {
  background: linear-gradient(180deg, rgba(13, 148, 136, 0.34), rgba(15, 23, 42, 0.95));
  border-color: #2dd4bf;
  color: #ccfbf1;
}

.over-room-node.node-defeat {
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.45), rgba(76, 5, 25, 0.95));
  border-color: #fb7185;
  color: #ffe4e6;
  box-shadow: inset 0 0 10px rgba(244, 63, 94, 0.45);
}

.over-room-node.node-victory {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.48), rgba(120, 53, 15, 0.95));
  border-color: #fde047;
  color: #fef9c3;
}

.orn-code {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.03em;
}

.orn-sym {
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}

.over-room-connector {
  width: 10px;
  height: 2px;
  background: rgba(71, 85, 105, 0.55);
  flex-shrink: 0;
}

.over-room-connector.is-lit {
  background: #2dd4bf;
}

/* Cuerpo Central en 3 Columnas Biseladas */
#over-stats.over-panoramic-3col {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr 1.15fr !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  align-items: stretch !important;
  text-align: left !important;
}

.over-col-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(9, 13, 22, 0.96) 100%);
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 0 !important;
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  );
  min-width: 0;
}

.over-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.over-col-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 11.5px;
  font-weight: 800;
  color: #fde68a;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.over-col-badge {
  padding: 2px 6px;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #f8fafc;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  border-radius: 0 !important;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

/* Columna 1: Escuadrón de 3 Besthers y Progreso de Vínculo */
.over-squad-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  justify-content: space-between;
}

.over-squad-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  background: linear-gradient(90deg, rgba(19, 27, 46, 0.95), rgba(11, 15, 25, 0.95));
  border: 1px solid var(--sq-elem-col, #38bdf8);
  border-radius: 0 !important;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.over-squad-card.is-leader {
  box-shadow: inset 0 0 14px rgba(251, 191, 36, 0.14);
}

.over-squad-portrait {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(30, 41, 59, 0.95) 0%, rgba(9, 13, 22, 0.98) 100%);
  border: 1px solid var(--sq-elem-col, #38bdf8);
  border-radius: 0 !important;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

.over-squad-portrait canvas {
  width: 48px !important;
  height: 48px !important;
  image-rendering: pixelated;
}

.over-squad-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.over-squad-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.over-squad-name {
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
}

.over-squad-stage {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 700;
}

.over-squad-lvl {
  padding: 1px 5px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.55);
  color: #7dd3fc;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 0 !important;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}

.over-squad-role {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 800;
  color: #cbd5e1;
  letter-spacing: 0.05em;
}

.over-altar-ready-badge {
  margin-left: auto;
  padding: 1px 6px;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #090d16;
  text-shadow: none !important;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  border-radius: 0 !important;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

.over-bond-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(100, 116, 139, 0.45);
  border-radius: 0 !important;
  overflow: hidden;
}

.over-bond-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, #38bdf8);
}

.over-squad-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
}

.over-xp-gain {
  color: #38bdf8;
}

.over-rooms-gain {
  color: #fde68a;
}

/* Columna 2: Botín Extraído, Catalizadores y Métricas 2x2 */
.over-victory-banner {
  padding: 5px 8px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(45, 212, 191, 0.65);
  color: #a7f3d0;
  font-size: 11.5px;
  text-align: center;
  border-radius: 0 !important;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

.over-currencies-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.over-currency-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(251, 191, 36, 0.55);
  border-radius: 0 !important;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}

.over-currency-card.is-shard {
  border-color: rgba(45, 212, 191, 0.72);
  background: linear-gradient(90deg, rgba(13, 148, 136, 0.2), rgba(15, 23, 42, 0.95));
}

.occ-currency-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.occ-currency-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.occ-currency-lbl {
  font-size: 9.5px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.05em;
}

.occ-currency-val {
  font-size: 15px;
  font-weight: 900;
  color: #fde047;
}

.over-currency-card.is-shard .occ-currency-val {
  color: #5eead4;
}

.over-extra-currencies {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.over-extra-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(30, 41, 59, 0.88);
  border: 1px solid rgba(168, 85, 247, 0.55);
  color: #e9d5ff;
  font-size: 11px;
  border-radius: 0 !important;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

.over-extra-pill b {
  font-size: 11px;
  font-weight: 800;
}

.over-catalysts-box,
.over-relics-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 9px;
  background: rgba(9, 13, 22, 0.92);
  border: 1px solid rgba(100, 116, 139, 0.35);
  border-radius: 0 !important;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}

.over-subbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.05em;
}

.over-subbox-head b {
  color: #fde68a;
  font-size: 10px;
}

.over-catalysts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.over-catalyst-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--cat-col, #38bdf8);
  border-radius: 0 !important;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

.occ-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.occ-name {
  font-size: 11px;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.occ-qty {
  font-size: 11.5px;
  font-weight: 900;
  color: #fde047;
  flex-shrink: 0;
}

.over-catalyst-empty {
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px dashed rgba(100, 116, 139, 0.45);
  color: #94a3b8;
  font-size: 11px;
  text-align: center;
  border-radius: 0 !important;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
}

.over-metrics-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: auto;
}

.over-metric-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 0 !important;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

.over-metric-cell span {
  font-size: 9.5px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.05em;
}

.over-metric-cell b {
  font-size: 14px;
  font-weight: 900;
  color: #f8fafc;
}

/* Columna 3: Desglose de Daño Elemental y Arsenal de Reliquias */
.over-dmg-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.over-dmg-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 9px;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid var(--dmg-elem-col, #38bdf8);
  border-radius: 0 !important;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

.over-dmg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.over-dmg-skill {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.over-dmg-name {
  font-size: 12px;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.over-dmg-numbers {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}

.over-dmg-val {
  font-size: 12.5px;
  font-weight: 900;
  color: #fde047;
}

.over-dmg-pct {
  font-size: 10.5px;
  font-weight: 800;
  color: #cbd5e1;
}

.over-dmg-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(9, 13, 22, 0.95);
  border: 1px solid rgba(100, 116, 139, 0.35);
  border-radius: 0 !important;
  overflow: hidden;
}

.over-dmg-bar-fill {
  height: 100%;
}

.over-relics-box {
  margin-top: auto;
}

.over-relics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.over-relic-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(100, 116, 139, 0.38);
  font-size: 10px;
  color: #94a3b8;
  border-radius: 0 !important;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

.over-relic-chip.is-equipped {
  border-color: rgba(45, 212, 191, 0.72);
  color: #f8fafc;
  background: rgba(13, 148, 136, 0.22);
}

.orc-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}

.orc-lvl {
  color: #fde047;
  font-weight: 900;
  font-size: 10px;
}

/* Pie de Acciones con 3 Botones Biselados Ergonómicos (height: 48px) */
.over-panoramic-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 2px;
}

.over-panoramic-footer .over-btn-bevel {
  flex: 1 1 0;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  border-radius: 0 !important;
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  ) !important;
  cursor: pointer;
}

.over-panoramic-footer .over-btn-retry {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%) !important;
  border: 2px solid #fef08a !important;
  color: #090d16 !important;
  text-shadow: none !important;
}

.over-panoramic-footer .over-btn-forge {
  background: linear-gradient(180deg, #06b6d4 0%, #0e7490 100%) !important;
  border: 2px solid #67e8f9 !important;
  color: #f8fafc !important;
}

.over-panoramic-footer .over-btn-sanctuary {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  border: 2px solid #d4af37 !important;
  color: #fde68a !important;
}

/* Adaptación Responsiva Landscape Android (915x412 / max-height: 520px) */
@media (max-height: 520px) {
  #scr-over.scr {
    padding: 3px 6px !important;
  }
  #scr-over .box.over-panoramic-box {
    width: 97vw !important;
    max-height: 98vh !important;
    padding: 5px 8px !important;
    gap: 4px !important;
  }
  .over-panoramic-header {
    padding: 3px 8px;
    gap: 3px;
  }
  .over-kicker {
    font-size: 8.5px;
  }
  #scr-over #over-title {
    font-size: 14px !important;
  }
  .over-dungeon-badge {
    padding: 2px 7px;
    font-size: 9px;
  }
  .over-room-node {
    height: 19px;
    padding: 0 4px;
    font-size: 9px;
  }
  .orn-sym {
    font-size: 9.5px;
  }
  #over-stats.over-panoramic-3col {
    gap: 6px !important;
  }
  .over-col-panel {
    padding: 5px 7px;
    gap: 3px;
  }
  .over-col-head {
    padding-bottom: 2px;
  }
  .over-col-title {
    font-size: 9px;
  }
  .over-col-badge {
    font-size: 8px;
    padding: 1px 4px;
  }
  .over-squad-list {
    gap: 3px;
  }
  .over-squad-card {
    padding: 3px 5px;
    gap: 5px;
  }
  .over-squad-portrait {
    width: 32px;
    height: 32px;
  }
  .over-squad-portrait canvas {
    width: 32px !important;
    height: 32px !important;
  }
  .over-squad-name {
    font-size: 10.5px;
  }
  .over-squad-stage,
  .over-squad-lvl,
  .over-squad-meta {
    font-size: 8.5px;
  }
  .over-altar-ready-badge {
    font-size: 8px;
    padding: 1px 4px;
  }
  .over-bond-bar-track {
    height: 4px;
  }
  .over-currencies-grid {
    gap: 4px;
  }
  .over-currency-card {
    padding: 3px 5px;
    gap: 5px;
  }
  .occ-currency-lbl {
    font-size: 7.5px;
  }
  .occ-currency-val {
    font-size: 11px;
  }
  .over-extra-currencies {
    gap: 4px;
  }
  .over-extra-pill {
    padding: 2px 5px;
    font-size: 9px;
  }
  .over-extra-pill b {
    font-size: 9px;
  }
  .over-catalysts-box,
  .over-relics-box {
    padding: 3px 5px;
    gap: 2px;
  }
  .over-subbox-head,
  .over-subbox-head b {
    font-size: 8px;
  }
  .over-catalysts-grid {
    gap: 3px;
  }
  .over-catalyst-chip {
    padding: 2px 4px;
  }
  .over-catalyst-chip img.pix {
    width: 16px !important;
    height: 16px !important;
  }
  .occ-name {
    font-size: 9px;
  }
  .occ-qty {
    font-size: 9.5px;
  }
  .over-catalyst-empty {
    padding: 3px 5px;
    font-size: 9px;
  }
  .over-metrics-2x2 {
    gap: 3px;
  }
  .over-metric-cell {
    padding: 2px 5px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .over-metric-cell span {
    font-size: 8px;
  }
  .over-metric-cell b {
    font-size: 10.5px;
  }
  .over-dmg-list {
    gap: 3px;
  }
  .over-dmg-card {
    padding: 2px 5px;
    gap: 2px;
  }
  .over-dmg-name {
    font-size: 9.5px;
  }
  .over-dmg-val {
    font-size: 10px;
  }
  .over-dmg-pct {
    font-size: 8.5px;
  }
  .over-dmg-bar-track {
    height: 3px;
  }
  .over-relic-chip {
    padding: 2px 4px;
    font-size: 8px;
  }
  .orc-lvl {
    font-size: 8.5px;
  }
  .over-panoramic-footer {
    gap: 6px;
  }
  .over-panoramic-footer .over-btn-bevel {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 10.5px !important;
    padding: 0 8px !important;
  }
}

/* ============================================================================
 * TAREA 7.5: SELECTOR DE IDIOMA (#btn-lang), TALENTOS DE LINAJE COMPARTIDOS
 * (.codex-lineage-box), RESONANCIA/FATIGA (.resonance-badge) Y MINIMAPA (#hud-minimap-panel)
 * ============================================================================ */
#btn-lang.topbar-lang-btn {
  min-width: 72px;
  height: 36px;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fef08a;
  background: linear-gradient(180deg, rgba(29, 24, 46, 0.96), rgba(14, 11, 24, 0.98));
  border: 1.5px solid #d4af37;
  clip-path: var(--bevel-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
#btn-lang.topbar-lang-btn:hover {
  border-color: #2dd4bf;
  color: #99f6e4;
}

.resonance-badge {
  font-size: 11px !important;
  font-weight: 800;
  padding: 2px 8px !important;
  clip-path: var(--bevel-6);
}
.resonance-badge.blessed {
  background: rgba(250, 204, 21, 0.18) !important;
  border: 1.5px solid #facc15 !important;
  color: #fef08a !important;
}
.resonance-badge.fatigued {
  background: rgba(244, 63, 94, 0.18) !important;
  border: 1.5px solid #f43f5e !important;
  color: #fda4af !important;
}
.resonance-badge.rested {
  background: rgba(45, 212, 191, 0.12) !important;
  border: 1px solid rgba(45, 212, 191, 0.45) !important;
  color: #99f6e4 !important;
}

.codex-lineage-box {
  padding: 5px 8px;
  background: linear-gradient(180deg, rgba(24, 18, 38, 0.96), rgba(12, 9, 22, 0.99));
  border: 1.5px solid rgba(192, 132, 252, 0.52);
  clip-path: var(--bevel-6);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lineage-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 900;
  color: #e9d5ff;
  letter-spacing: 0.4px;
}
.lineage-head-row small {
  font-size: 10px;
  font-weight: 700;
  color: #2dd4bf;
}
.lineage-milestones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.lineage-milestone-slot {
  padding: 3px 6px;
  background: rgba(11, 9, 19, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
  clip-path: var(--bevel-6);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lineage-milestone-slot.unlocked {
  border-color: #4ade80;
  background: rgba(16, 185, 129, 0.14);
}
.lineage-milestone-slot .lm-tier {
  font-size: 9.5px;
  font-weight: 900;
  color: #f59e0b;
}
.lineage-milestone-slot.unlocked .lm-tier {
  color: #4ade80;
}
.lineage-milestone-slot .lm-bonus {
  font-size: 10px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.15;
}

/* ============================================================================
 * TAREA 7.10: SELECTOR DE MODO DE INCURSIÓN DESACOPLADO (#scr-starters)
 * - Vista 1 (story): ⚔️ MODO HISTORIA: EXPEDICIONES DE LA GRIETA (5 Capítulos)
 * - Vista 2 (farming): 🌀 MAZMORRAS Y PORTALES DE FARMEO (5 Portales)
 * - Columna Derecha (50%): 3 Ranuras de Pedestal (height: 250px) Vinculadas al Códice + Sinergia + 2 Botones CTA (height: 54px)
 * ============================================================================ */
#scr-starters .incursion-split-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 24% 20%, rgba(245, 158, 11, 0.08), transparent 48%),
    radial-gradient(circle at 78% 26%, rgba(45, 212, 191, 0.09), transparent 52%),
    linear-gradient(180deg, #191428 0%, #110e1b 100%);
}

#scr-starters .incursion-top-header {
  flex: 0 0 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 14px !important;
  background: linear-gradient(90deg, #1d182e 0%, #281f40 50%, #1d182e 100%) !important;
  border-bottom: 2px solid #d4af37 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#scr-starters .incursion-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#scr-starters .btn-switch-mode {
  height: 36px;
  padding: 0 13px;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.24) 0%, rgba(15, 23, 42, 0.95) 65%, rgba(212, 175, 55, 0.22) 100%);
  border: 1.5px solid #2dd4bf;
  color: #99f6e4;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.4px;
  clip-path: var(--bevel-8);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(45, 212, 191, 0.22), inset 0 0 0 1px rgba(212, 175, 55, 0.28);
}

#scr-starters .btn-switch-mode:hover {
  border-color: #fde047;
  color: #fef08a;
}

#scr-starters .btn-switch-mode.to-story {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28) 0%, rgba(24, 18, 40, 0.95) 65%, rgba(45, 212, 191, 0.2) 100%);
  border-color: #f59e0b;
  color: #fef08a;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25), inset 0 0 0 1px rgba(45, 212, 191, 0.25);
}

#scr-starters .incursion-resource-strip {
  display: flex;
  align-items: center;
  gap: 6px;
}

#scr-starters .res-pill {
  height: 34px;
  padding: 0 10px;
  background: #110d1c;
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  clip-path: var(--bevel-6);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  color: #fef08a;
  white-space: nowrap;
}

#scr-starters .res-pill.shard {
  border-color: rgba(45, 212, 191, 0.65);
  color: #99f6e4;
}

#scr-starters .res-pill.gem {
  border-color: rgba(56, 189, 248, 0.72);
  color: #bae6fd;
}

/* Cuerpo Principal de 2 Columnas Simétricas (50% / 50%, Cero Scroll) */
#scr-starters .codex-starters-body.incursion-2col-body {
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  overflow: hidden !important;
}

#summon-dungeons.incursion-left-col,
#summon-squad.incursion-right-col {
  height: 100%;
  min-height: 0;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: none;
  clip-path: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#scr-starters .col-panel {
  height: 100%;
  min-height: 0;
  width: 100%;
  padding: 10px 12px;
  background: linear-gradient(165deg, rgba(28, 22, 44, 0.96) 0%, rgba(14, 11, 24, 0.99) 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.52);
  clip-path: var(--bevel-10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.1);
}

#scr-starters .col-header {
  flex: 0 0 32px;
  height: 32px;
  padding: 0 10px;
  background: linear-gradient(90deg, rgba(40, 31, 62, 0.95), rgba(20, 16, 34, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.45);
  clip-path: var(--bevel-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#scr-starters .col-header-title {
  font-size: 13px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

#scr-starters .col-header-badge {
  padding: 2px 8px;
  background: rgba(45, 212, 191, 0.16);
  border: 1px solid #2dd4bf;
  color: #99f6e4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  clip-path: var(--bevel-4);
  white-space: nowrap;
}

/* Columna Izquierda: 5 Tarjetas Amplias y Aireadas */
#scr-starters .left-cards-stack {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

#scr-starters .mode-card {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(22, 18, 36, 0.96) 0%, rgba(13, 10, 22, 0.98) 100%);
  border: 1.5px solid rgba(163, 155, 181, 0.36);
  clip-path: var(--bevel-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex: 1 1 0;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: #f8fafc;
}

#scr-starters .mode-card:hover {
  border-color: #2dd4bf;
}

#scr-starters .mode-card.active,
#scr-starters .mode-card.on {
  flex: 1.68 1 0;
  background:
    radial-gradient(circle at 90% 25%, rgba(245, 158, 11, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(46, 33, 66, 0.98) 0%, rgba(24, 18, 38, 0.99) 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.25), inset 0 0 0 1px rgba(254, 240, 138, 0.26);
}

#scr-starters .mode-card.active-teal {
  flex: 1.68 1 0;
  background:
    radial-gradient(circle at 88% 25%, rgba(45, 212, 191, 0.2), transparent 55%),
    linear-gradient(135deg, rgba(24, 42, 56, 0.98) 0%, rgba(16, 20, 36, 0.99) 100%);
  border: 2px solid #2dd4bf;
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.25), inset 0 0 0 1px rgba(212, 175, 55, 0.3);
}

#scr-starters .mc-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
}

#scr-starters .mc-vortex {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

#scr-starters .mode-card.active .mc-vortex,
#scr-starters .mode-card.active-teal .mc-vortex {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
}

#scr-starters .mc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#scr-starters .mc-top-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#scr-starters .mc-tag {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}

#scr-starters .mc-status-pill {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.4px;
  clip-path: var(--bevel-4);
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #cbd5e1;
  white-space: nowrap;
}

#scr-starters .mc-status-pill.cleared {
  background: rgba(16, 185, 129, 0.16);
  border-color: #10b981;
  color: #6ee7b7;
}

#scr-starters .mc-status-pill.selected {
  background: rgba(245, 158, 11, 0.25);
  border-color: #fde047;
  color: #fef08a;
}

#scr-starters .mc-status-pill.selected-teal {
  background: rgba(45, 212, 191, 0.24);
  border-color: #2dd4bf;
  color: #99f6e4;
}

#scr-starters .mc-title {
  font-size: 16px;
  font-weight: 900;
  color: #f8fafc;
  line-height: 1.12;
  display: flex;
  align-items: center;
  gap: 6px;
}

#scr-starters .mode-card.active .mc-title,
#scr-starters .mode-card.active-teal .mc-title {
  font-size: 19.5px;
  color: #fef08a;
  text-shadow: 1px 1px 0 #090710;
}

#scr-starters .mc-biome-line {
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#scr-starters .mode-card.active .mc-biome-line {
  font-size: 13.5px;
  color: #fde68a;
  font-weight: 800;
}

#scr-starters .biome-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  transform: rotate(45deg);
  flex-shrink: 0;
}

#scr-starters .mc-loot-strip {
  margin-top: 2px;
  padding: 5px 8px;
  background: rgba(10, 8, 18, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.48);
  clip-path: var(--bevel-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

#scr-starters .first-win-badge {
  padding: 3px 8px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.25), rgba(168, 85, 247, 0.25));
  border: 1px solid #38bdf8;
  clip-path: var(--bevel-4);
  font-size: 11.5px;
  font-weight: 900;
  color: #e0f2fe;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

#scr-starters .loot-icons-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

#scr-starters .loot-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #e2e8f0;
  padding: 2px 6px;
  background: rgba(29, 24, 46, 0.9);
  border: 1px solid rgba(163, 155, 181, 0.35);
  clip-path: var(--bevel-4);
  white-space: nowrap;
}

/* Selector Grande de Elemento Prioritario en el Crisol Activo */
#scr-starters .priority-selector-bar {
  margin-top: 2px;
  padding: 5px 9px;
  background: rgba(9, 7, 16, 0.92);
  border: 1.5px solid rgba(45, 212, 191, 0.55);
  clip-path: var(--bevel-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

#scr-starters .ps-label {
  font-size: 11.5px;
  font-weight: 900;
  color: #fde047;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

#scr-starters .ps-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}

#scr-starters .ps-elem-btn {
  height: 30px;
  padding: 0 11px;
  background: rgba(22, 18, 36, 0.95);
  border: 1.5px solid rgba(148, 163, 184, 0.4);
  clip-path: var(--bevel-6);
  color: #cbd5e1;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  cursor: pointer;
}

#scr-starters .ps-elem-btn.on {
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.45), rgba(45, 212, 191, 0.3));
  border: 1.5px solid #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

#scr-starters .mini-elem-tags {
  display: flex;
  align-items: center;
  gap: 5px;
}

#scr-starters .mini-elem-tag {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(15, 12, 26, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  clip-path: var(--bevel-4);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

#scr-starters .mini-elem-tag.on {
  border-color: #2dd4bf;
  color: #99f6e4;
}

/* Columna Derecha: 3 Ranuras de Pedestal (height: 250px) */
#scr-starters .squad-pedestals-grid {
  flex: 0 0 250px;
  height: 250px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
}

#scr-starters .squad-pedestal-card {
  height: 250px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  padding: 7px 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(45, 212, 191, 0.15), transparent 65%),
    linear-gradient(180deg, #211a36 0%, #120e1e 100%);
  border: 1.5px solid rgba(45, 212, 191, 0.55);
  clip-path: var(--bevel-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  cursor: pointer;
}

#scr-starters .squad-pedestal-card:hover {
  border-color: #fde047;
  box-shadow: 0 0 14px rgba(45, 212, 191, 0.28);
}

#scr-starters .squad-pedestal-card.leader {
  background:
    radial-gradient(circle at 50% 42%, rgba(245, 158, 11, 0.22), transparent 66%),
    linear-gradient(180deg, #2b213d 0%, #151024 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.22), inset 0 0 0 1px rgba(254, 240, 138, 0.24);
}

#scr-starters .sp-slot-banner {
  width: 100%;
  min-width: 0;
  height: 23px;
  padding: 0 7px;
  background: rgba(11, 9, 18, 0.92);
  border: 1px solid rgba(45, 212, 191, 0.45);
  clip-path: var(--bevel-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 900;
  color: #2dd4bf;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
}

#scr-starters .squad-pedestal-card.leader .sp-slot-banner {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.28), rgba(15, 12, 26, 0.95));
  border-color: #fde047;
  color: #fef08a;
}

#scr-starters .sp-stage-box {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scr-starters .sp-runic-ring {
  position: absolute;
  bottom: 5px;
  width: 126px;
  height: 26px;
  background: radial-gradient(ellipse at center, rgba(45, 212, 191, 0.42) 0%, rgba(15, 23, 42, 0.1) 72%, transparent 100%);
  border: 1.5px solid rgba(45, 212, 191, 0.65);
  clip-path: polygon(16% 0%, 84% 0%, 100% 50%, 84% 100%, 16% 100%, 0% 50%);
}

#scr-starters .squad-pedestal-card.leader .sp-runic-ring {
  background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.48) 0%, rgba(45, 212, 191, 0.16) 72%, transparent 100%);
  border-color: #fde047;
}

#scr-starters .sp-sprite-cv {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
}

#scr-starters .sp-resonance-tag {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 3;
  padding: 2px 6px;
  background: rgba(20, 16, 32, 0.92);
  border: 1px solid #fde047;
  color: #fef08a;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.3px;
  clip-path: var(--bevel-4);
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.28);
}

#scr-starters .sp-identity-row {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 2px;
}

#scr-starters .sp-name {
  font-size: 16px;
  font-weight: 900;
  color: #fef08a;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#scr-starters .sp-lvl-type {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

#scr-starters .sp-lvl {
  font-size: 11.5px;
  font-weight: 900;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.45);
  padding: 1px 6px;
  clip-path: var(--bevel-4);
  white-space: nowrap;
}

#scr-starters .sp-type-badge {
  font-size: 11px;
  font-weight: 900;
  padding: 1px 7px;
  color: #ffffff;
  clip-path: var(--bevel-4);
  white-space: nowrap;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
}

#scr-starters .sp-skill-bar {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  height: 36px;
  padding: 0 8px;
  background: rgba(10, 8, 18, 0.94);
  border: 1px solid rgba(212, 175, 55, 0.42);
  clip-path: var(--bevel-6);
  display: flex;
  align-items: center;
  gap: 8px;
}

#scr-starters .sp-skill-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

#scr-starters .sp-skill-info b {
  font-size: 12.5px;
  color: #f8fafc;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#scr-starters .sp-skill-info small {
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Recuadro Limpio de Sinergia de Escuadrón + Resumen de Objetivo */
#scr-starters .synergy-and-target-panel {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

#scr-starters .synergy-box {
  flex: 1;
  padding: 7px 12px;
  background: linear-gradient(90deg, rgba(20, 34, 46, 0.95) 0%, rgba(28, 22, 44, 0.95) 100%);
  border: 1.5px solid #2dd4bf;
  clip-path: var(--bevel-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

#scr-starters .syn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 900;
  color: #2dd4bf;
  letter-spacing: 0.5px;
}

#scr-starters .syn-main {
  font-size: 14px;
  font-weight: 900;
  color: #fef08a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#scr-starters .syn-sub {
  font-size: 11.5px;
  color: #cbd5e1;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#scr-starters .target-loot-box {
  flex: 1;
  padding: 7px 12px;
  background: linear-gradient(90deg, rgba(38, 27, 54, 0.95) 0%, rgba(18, 14, 30, 0.98) 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.65);
  clip-path: var(--bevel-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#scr-starters .tlb-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

#scr-starters .tlb-kicker {
  font-size: 10.5px;
  font-weight: 900;
  color: #f59e0b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#scr-starters .tlb-title {
  font-size: 13.5px;
  font-weight: 900;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#scr-starters .tlb-sub {
  font-size: 11px;
  color: #99f6e4;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#scr-starters .tlb-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#scr-starters .cat-preview-pill {
  padding: 4px 8px;
  background: rgba(11, 9, 19, 0.94);
  border: 1.5px solid #38bdf8;
  clip-path: var(--bevel-6);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: #e0f2fe;
  white-space: nowrap;
}

/* 2 Botones Grandes y Claros en Parte Inferior Derecha (height: 54px) */
#scr-starters .right-cta-stack {
  flex: 0 0 116px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#scr-starters .btn-cta-large {
  width: 100%;
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  padding: 0 16px;
  font-family: inherit;
  clip-path: var(--bevel-oct);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

#scr-starters .btn-cta-codex {
  background:
    radial-gradient(circle at 15% 50%, rgba(45, 212, 191, 0.25), transparent 55%),
    linear-gradient(135deg, #162a38 0%, #1d1832 60%, #2a203f 100%);
  border: 2px solid #2dd4bf;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(212, 175, 55, 0.38);
}

#scr-starters .btn-cta-codex:hover {
  border-color: #fde047;
}

#scr-starters .btn-cta-launch {
  background:
    radial-gradient(circle at 85% 20%, rgba(253, 224, 71, 0.35), transparent 55%),
    linear-gradient(135deg, #d97706 0%, #b45309 55%, #7c2d12 100%);
  border: 2.5px solid #fde047;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.8), 0 0 18px rgba(245, 158, 11, 0.45), inset 0 0 0 1px rgba(254, 240, 138, 0.35);
}

#scr-starters .cta-left-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#scr-starters .cta-main-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

#scr-starters .cta-main-txt b {
  font-size: 16px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-shadow: 2px 2px 0 #090710;
}

#scr-starters .btn-cta-codex .cta-main-txt b {
  color: #99f6e4;
}

#scr-starters .cta-main-txt small {
  font-size: 11px;
  font-weight: 700;
  color: #fde68a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#scr-starters .btn-cta-codex .cta-main-txt small {
  color: #cbd5e1;
}

#scr-starters .cta-right-tag {
  padding: 4px 10px;
  background: rgba(9, 7, 16, 0.72);
  border: 1px solid rgba(254, 240, 138, 0.55);
  clip-path: var(--bevel-6);
  font-size: 11px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Adaptación Responsiva Landscape Android (915x412 / max-height: 520px) */
@media (max-height: 520px) {
  #scr-starters .incursion-top-header {
    flex: 0 0 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
  }
  #scr-starters .btn-switch-mode,
  #scr-starters .res-pill {
    height: 26px;
    padding: 0 7px;
    font-size: 10px;
  }
  #scr-starters .codex-starters-body.incursion-2col-body {
    padding: 5px 8px !important;
    gap: 8px !important;
  }
  #scr-starters .col-panel {
    padding: 5px 7px;
    gap: 4px;
  }
  #scr-starters .col-header {
    flex: 0 0 22px;
    height: 22px;
    padding: 0 6px;
  }
  #scr-starters .col-header-title {
    font-size: 10px;
  }
  #scr-starters .col-header-badge {
    font-size: 8.5px;
    padding: 1px 5px;
  }
  #scr-starters .left-cards-stack {
    gap: 3px;
  }
  #scr-starters .mode-card {
    padding: 3px 7px;
    gap: 2px;
  }
  #scr-starters .mc-vortex,
  #scr-starters .mode-card.active .mc-vortex,
  #scr-starters .mode-card.active-teal .mc-vortex {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }
  #scr-starters .mc-tag,
  #scr-starters .mc-status-pill {
    font-size: 8px;
    padding: 1px 4px;
  }
  #scr-starters .mc-title,
  #scr-starters .mode-card.active .mc-title,
  #scr-starters .mode-card.active-teal .mc-title {
    font-size: 11.5px;
  }
  #scr-starters .mc-biome-line,
  #scr-starters .mode-card.active .mc-biome-line {
    font-size: 9px;
  }
  #scr-starters .mc-loot-strip,
  #scr-starters .priority-selector-bar {
    padding: 2px 5px;
  }
  #scr-starters .first-win-badge,
  #scr-starters .loot-chip,
  #scr-starters .ps-elem-btn {
    font-size: 8.5px;
    height: 20px;
    padding: 0 5px;
  }
  #scr-starters .squad-pedestals-grid {
    flex: 0 0 132px;
    height: 132px;
    gap: 5px;
  }
  #scr-starters .squad-pedestal-card {
    height: 132px;
    padding: 4px 5px;
  }
  #scr-starters .sp-slot-banner {
    height: 16px;
    font-size: 8px;
    padding: 0 4px;
  }
  #scr-starters .sp-stage-box {
    height: 62px;
  }
  #scr-starters .sp-sprite-cv {
    width: 58px;
    height: 58px;
  }
  #scr-starters .sp-runic-ring {
    width: 64px;
    height: 14px;
  }
  #scr-starters .sp-name {
    font-size: 11px;
  }
  #scr-starters .sp-lvl,
  #scr-starters .sp-type-badge {
    font-size: 8.5px;
    padding: 1px 4px;
  }
  #scr-starters .sp-skill-bar {
    height: 22px;
    padding: 0 5px;
  }
  #scr-starters .sp-skill-info b {
    font-size: 9.5px;
  }
  #scr-starters .sp-skill-info small {
    display: none;
  }
  #scr-starters .synergy-and-target-panel {
    gap: 3px;
  }
  #scr-starters .synergy-box,
  #scr-starters .target-loot-box {
    padding: 3px 6px;
    gap: 1px;
  }
  #scr-starters .syn-head,
  #scr-starters .tlb-kicker {
    font-size: 8.5px;
  }
  #scr-starters .syn-main,
  #scr-starters .tlb-title {
    font-size: 10.5px;
  }
  #scr-starters .syn-sub,
  #scr-starters .tlb-sub {
    font-size: 8.5px;
  }
  #scr-starters .right-cta-stack {
    flex: 0 0 68px;
    gap: 4px;
  }
  #scr-starters .btn-cta-large {
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0 10px;
  }
  #scr-starters .cta-main-txt b {
    font-size: 11.5px;
  }
  #scr-starters .cta-main-txt small {
    font-size: 8.5px;
  }
  #scr-starters .cta-right-tag {
    font-size: 8.5px;
    padding: 2px 6px;
  }
}

/* ============================================================================
 * 15. CEREMONIA DE ASCENSIÓN EVOLUTIVA (#evo-fx) — CÓDICE ASTRAL BISELADO
 * - Geometría 100% biselada a 45° (border-radius: 0 !important; clip-path)
 * - Escenario Canvas 2D Pixel-Art en 4 Actos (Convergencia, Resonancia, Ruptura, Revelación)
 * - Tarjeta de Linaje y Comparativa de Atributos (Etapa N ➔ Etapa N+1)
 * ============================================================================ */
#evo-fx {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background:
    radial-gradient(circle at 50% 42%, rgba(30, 22, 54, 0.90), rgba(5, 4, 12, 0.97));
  backdrop-filter: blur(5px);
}
#evo-fx.hidden {
  display: none !important;
}
#evo-fx,
#evo-fx * {
  border-radius: 0 !important;
}
.evo-ceremony-modal {
  --evo-elem-c: #f59e0b;
  --evo-elem-hi: #fde047;
  width: min(740px, 95vw);
  max-width: 740px;
  max-height: calc(100dvh - 24px);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--evo-elem-c) 24%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(24, 19, 39, 0.98) 0%, rgba(11, 9, 20, 0.99) 100%);
  border: 2px solid var(--evo-elem-c);
  clip-path: var(--bevel-10);
  box-shadow:
    0 22px 64px rgba(0, 0, 0, 0.94),
    0 0 32px rgba(212, 175, 55, 0.26),
    inset 0 0 24px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}
.evo-ceremony-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.42);
  text-align: center;
}
.evo-ceremony-kicker {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #2dd4bf;
  text-transform: uppercase;
}
.evo-ceremony-head h2 {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 1.6px;
  color: #fef08a !important;
  text-shadow: 2px 2px 0 #07050e, 0 0 14px rgba(251, 191, 36, 0.5);
}
.evo-act-pill {
  margin-top: 2px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.1px;
  color: #090710;
  background: linear-gradient(90deg, var(--evo-elem-hi), var(--evo-elem-c));
  clip-path: var(--bevel-6);
  text-transform: uppercase;
}
.evo-stage-frame {
  position: relative;
  width: min(548px, 100%);
  margin: 0 auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #090d1a;
  border: 1.5px solid rgba(212, 175, 55, 0.62);
  clip-path: var(--bevel-8);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.85);
}
#evo-canvas {
  width: 100%;
  height: auto;
  max-height: 250px;
  aspect-ratio: 2 / 1;
  display: block;
  image-rendering: pixelated;
  cursor: pointer;
}
.evo-skip-hint {
  position: absolute;
  right: 12px;
  bottom: 8px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 800;
  color: #cbd5e1;
  background: rgba(9, 7, 16, 0.86);
  border: 1px solid rgba(212, 175, 55, 0.38);
  clip-path: var(--bevel-6);
  pointer-events: none;
}
.evo-skip-hint.hidden {
  display: none !important;
}
.evo-reveal-card {
  width: 100%;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, rgba(20, 16, 34, 0.96), rgba(10, 8, 18, 0.99));
  border: 1.5px solid rgba(212, 175, 55, 0.62);
  clip-path: var(--bevel-8);
}
.evo-reveal-card.hidden {
  display: none !important;
}
.evo-reveal-top {
  display: grid;
  grid-template-columns: 1.48fr 1.02fr;
  gap: 10px;
  align-items: center;
}
.evo-lineage-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(9, 7, 16, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.38);
  clip-path: var(--bevel-6);
}
.evo-mon-node {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.evo-mon-node.evolved {
  border-left: 2px solid var(--evo-elem-c);
  padding-left: 7px;
  flex: 1.25;
}
.evo-mon-slot {
  width: 54px;
  height: 50px;
  flex: 0 0 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 15, 29, 0.95);
  border: 1px solid rgba(212, 175, 55, 0.45);
  clip-path: var(--bevel-6);
}
.evo-mon-slot canvas {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.evo-mon-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.evo-mon-meta small {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: #94a3b8;
  text-transform: uppercase;
  white-space: nowrap;
}
.evo-mon-node.evolved .evo-mon-meta small {
  color: #2dd4bf;
}
.evo-mon-meta b {
  font-size: 13.5px;
  font-weight: 900;
  color: #f8fafc;
  white-space: nowrap;
}
.evo-mon-node.evolved .evo-mon-meta b {
  color: #fef08a;
}
.evo-lineage-arrow {
  font-size: 16px;
  font-weight: 900;
  color: #fbbf24;
  padding: 0 2px;
}
.evo-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.evo-stat-pill {
  padding: 5px 6px;
  background: rgba(9, 7, 16, 0.92);
  border: 1px solid rgba(212, 175, 55, 0.42);
  clip-path: var(--bevel-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.evo-stat-pill small {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #94a3b8;
  text-transform: uppercase;
}
.evo-stat-vals {
  font-size: 12px;
  font-weight: 900;
  color: #e2e8f0;
  white-space: nowrap;
}
.evo-stat-vals b {
  color: #fef08a;
}
.evo-stat-delta {
  font-size: 10.5px;
  font-weight: 900;
  color: #4ade80;
}
.evo-reveal-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: #e2e8f0;
  flex-wrap: wrap;
}
.evo-ceremony-foot {
  display: flex;
  align-items: center;
  justify-content: center;
}
.evo-close-btn {
  min-width: 260px;
  min-height: 44px;
  padding: 8px 20px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 1.2px;
  clip-path: var(--bevel-oct) !important;
}
.altar-sub-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chip.replay-evo-chip {
  border-color: rgba(251, 191, 36, 0.65) !important;
  color: #fef08a !important;
  background: rgba(120, 53, 15, 0.38) !important;
}
.chip.replay-evo-chip:hover {
  border-color: #2dd4bf !important;
  filter: brightness(1.14);
}

@media (max-height: 520px) {
  #evo-fx {
    padding: 4px 8px;
  }
  .evo-ceremony-modal {
    max-height: calc(100dvh - 8px);
    padding: 6px 10px;
    gap: 5px;
  }
  .evo-ceremony-head {
    padding-bottom: 3px;
    gap: 1px;
  }
  .evo-ceremony-kicker {
    display: none;
  }
  .evo-ceremony-head h2 {
    font-size: 16px !important;
  }
  .evo-act-pill {
    font-size: 9.5px;
    padding: 1px 7px;
  }
  .evo-stage-frame {
    padding: 3px;
  }
  #evo-canvas {
    max-height: 150px;
  }
  .evo-reveal-card {
    padding: 5px 8px;
    gap: 4px;
  }
  .evo-reveal-top {
    gap: 6px;
  }
  .evo-lineage-flow {
    padding: 3px 6px;
  }
  .evo-mon-slot {
    width: 40px;
    height: 36px;
    flex: 0 0 40px;
  }
  .evo-mon-meta b {
    font-size: 11px;
  }
  .evo-stat-pill {
    padding: 3px 4px;
  }
  .evo-stat-vals {
    font-size: 10.5px;
  }
  .evo-reveal-bottom {
    padding-top: 3px;
    font-size: 10.5px;
  }
  .evo-close-btn {
    min-height: 32px;
    padding: 4px 14px !important;
    font-size: 12px !important;
  }
}

/* =========================================================================
   ASTRAL FRACTURE — ACCOUNT SYSTEM RENAISSANCE (Códice Astral Biselado)
   ========================================================================= */
.auth-codex-box {
  background: linear-gradient(180deg, #1b162a 0%, #120f1d 100%) !important;
  border: 2px solid #8c7647 !important;
  box-shadow: inset 0 0 0 1px rgba(212, 180, 106, 0.32), 0 12px 36px rgba(0, 0, 0, 0.82) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.auth-tabs .tab {
  text-align: center;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 7px;
  border: 1.5px solid #3d3356;
  background: #171326;
  color: #cbd5e1;
  cursor: pointer;
  user-select: none;
}
.auth-tabs .tab.on {
  border-color: #d4b46a;
  background: linear-gradient(180deg, #2d2442 0%, #1d172c 100%);
  color: #fde047;
  box-shadow: inset 0 0 8px rgba(212, 180, 106, 0.22);
}
.auth-field-group {
  margin-bottom: 8px;
}
.auth-field-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 3px;
}
.auth-link-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: #38bdf8;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
}
.auth-link-btn:hover {
  color: #7dd3fc;
}
.auth-policy-box {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.auth-strength-track {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.25);
  overflow: hidden;
}
.auth-strength-fill {
  height: 100%;
  width: 0%;
  background: #f87171;
  transition: width 0.18s ease, background-color 0.18s ease;
}
.auth-policy-hint {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.25;
}
.auth-ok-banner {
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(20, 83, 45, 0.45);
  border: 1.5px solid #4ade80;
  color: #bbf7d0;
  font-size: 12px;
  line-height: 1.35;
}
.btn.google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #251f36 0%, #191426 100%);
  border: 1.5px solid #38bdf8;
  color: #f8fafc;
}
.btn.google:hover {
  border-color: #fde047;
}
.google-g-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  color: #1d4ed8;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
}
.acc-codex-card {
  background: linear-gradient(180deg, #1d182d 0%, #130f1e 100%);
  border: 1.5px solid #8c7647;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: inset 0 0 0 1px rgba(212, 180, 106, 0.18);
}
.acc-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.acc-avatar-frame {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 2px solid #d4b46a;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.acc-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.85);
}
.acc-badge.verified {
  border-color: #4ade80;
  color: #4ade80;
  background: rgba(20, 83, 45, 0.4);
}
.acc-badge.unverified {
  border-color: #facc15;
  color: #fde047;
  background: rgba(113, 63, 18, 0.4);
}
.acc-badge.guest {
  border-color: #38bdf8;
  color: #7dd3fc;
  background: rgba(12, 74, 110, 0.4);
}
.acc-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.acc-meta-item {
  background: rgba(9, 13, 26, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  padding: 6px 9px;
}
.acc-meta-item small {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
}
.acc-meta-item b {
  display: block;
  font-size: 12px;
  color: #f8fafc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-height: 500px) {
  .auth-codex-box {
    padding: 8px 14px !important;
  }
  .auth-codex-box .logo .t1 {
    font-size: 22px;
  }
  .auth-codex-box .login-tag {
    margin: 2px 0 6px;
    font-size: 11px;
  }
  .auth-field-group {
    margin-bottom: 5px;
  }
}