/* ============ dark.css — interfaz oscura con el arte de Flare ============
 * Va DESPUÉS de style.css y sólo cambia el aspecto: cajas de cuero con marco
 * de bronce, botones y pestañas de Flare, fuente Bona Nova SC y colores de
 * pergamino y oro viejo. Las imágenes salen de tools/make_ui.py (assets/ui/).
 */
@font-face {
  font-family: 'BonaNova';
  src: url('../assets/fonts/BonaNovaSC-Regular.ttf') format('truetype');
  font-weight: 400 550;
  font-display: block;
}
@font-face {
  font-family: 'BonaNova';
  src: url('../assets/fonts/BonaNovaSC-Bold.ttf') format('truetype');
  font-weight: 551 900;
  font-display: block;
}

:root {
  --ink: #e8dcc0;
  --muted: #a69a80;
  --box1: #1b1713;
  --box2: #0e0c0a;
  --edge: #b08d55;
  --edge-in: #5c4a30;
  --edge-out: #000;
  --gold: #e0b45e;
  --gold2: #a87d36;
  --red: #d0503f;
  --green: #8cbf5f;
  --shadow: #000;
  --r1: #b8b0a0; --r2: #8cbf5f; --r3: #6d9be8; --r4: #b07ae0; --r5: #e0b45e;
  --font: 'BonaNova', Georgia, 'Times New Roman', serif;
  --line: rgba(176,141,85,.28);          /* bordes finos de bronce */
  --well: rgba(0,0,0,.38);               /* huecos oscuros dentro de una caja */
}

/* Chino, japonés y coreano: Bona Nova no los tiene; detrás, una serif de cada idioma
   (la del sistema si no está ninguna). El latín y el cirílico siguen en Bona Nova. */
:root:lang(zh-TW) { --font: 'BonaNova', 'Noto Serif TC', 'Noto Serif CJK TC', 'Source Han Serif TC', 'Songti TC', 'PMingLiU', serif; }
:root:lang(zh-CN) { --font: 'BonaNova', 'Noto Serif SC', 'Noto Serif CJK SC', 'Source Han Serif SC', 'Songti SC', 'SimSun', serif; }
:root:lang(ja)    { --font: 'BonaNova', 'Noto Serif JP', 'Noto Serif CJK JP', 'Source Han Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; }
:root:lang(ko)    { --font: 'BonaNova', 'Noto Serif KR', 'Noto Serif CJK KR', 'Source Han Serif KR', 'AppleMyungjo', 'Batang', serif; }
:lang(zh) body, :lang(ja) body, :lang(ko) body { letter-spacing: 0; }

body { background: #0b0907; -webkit-font-smoothing: auto; letter-spacing: .2px; }
canvas { image-rendering: auto; }
#game, #slot { image-rendering: auto; }

/* ---------- cajas: cuero con marco de bronce ---------- */
.box {
  background:
    linear-gradient(180deg, rgba(14,11,8,.35), rgba(8,6,5,.72)),
    url('../assets/ui/leather.jpg') center / cover;
  border: 6px solid transparent;
  border-image: url('../assets/ui/frame.png') 6 stretch;
  border-radius: 0;
  box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0,0,0,.75);
  text-shadow: 1px 1px 1px #000;
}
.box h1, .box h2, .box h3 { color: var(--gold); letter-spacing: 1px; font-weight: 700; }
.box h2 { text-shadow: 0 2px 2px #000, 0 0 18px rgba(200,140,60,.18); }

/* ---------- botones de Flare (4 estados) ---------- */
.btn {
  border-style: solid;
  border-width: 10px 26px;
  border-color: transparent;
  border-image: url('../assets/ui/btn.png') 10 30 fill / 10px 26px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 2px 4px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 700; letter-spacing: .6px;
  text-shadow: 1px 1px 1px #000;
  filter: none;
}
.btn:hover { filter: none; border-image-source: url('../assets/ui/btn-hover.png'); color: #fff3d6; }
.btn:active { transform: none; box-shadow: none; border-image-source: url('../assets/ui/btn-down.png'); }
.btn:disabled { filter: none; border-image-source: url('../assets/ui/btn-off.png'); color: #77706a; }
.btn.gold { color: var(--gold); text-shadow: 1px 1px 1px #000, 0 0 10px rgba(224,180,94,.35); border-color: transparent; background: none; }
.btn.gold:hover { color: #ffd98a; }
.btn.small { border-width: 7px 18px; border-image-width: 7px 18px; padding: 0 2px; min-height: 34px; font-size: 14px; }
.btn.ghost {
  border: 1px solid var(--line); border-image: none; background: rgba(0,0,0,.35);
  padding: 6px 12px; min-height: 0; color: var(--ink);
}
.btn.ghost:hover { border-color: var(--edge); background: rgba(176,141,85,.12); }
.btn.danger { color: #ff9c8a; filter: sepia(.6) hue-rotate(-25deg) saturate(2.2); background: none; border-color: transparent; }
.btn.google { background: none; color: var(--ink); }
#btn-sound { padding: 0 2px; }

/* ---------- menú principal ---------- */
.menu-item { border-radius: 0; text-shadow: 1px 1px 1px #000; font-weight: 700; }
.menu-item:hover, .menu-item:focus-visible { background: linear-gradient(90deg, rgba(176,141,85,.18), transparent); }
.menu-item::before { image-rendering: auto; }
.menu-item.play { color: var(--gold); text-shadow: 1px 1px 1px #000, 0 0 14px rgba(224,180,94,.35); }
.menu-right { background: linear-gradient(90deg, transparent, rgba(6,5,4,.78) 30%); }
.logo .t1 {
  color: var(--gold); letter-spacing: 2px;
  text-shadow: 0 2px 0 #3b2a12, 0 4px 6px #000, 0 0 30px rgba(200,110,40,.35);
}
.logo .t2 { color: var(--ink); letter-spacing: 6px; }
.partner-card .nm { text-shadow: 0 2px 4px #000; color: var(--gold); }
.partner-card .lv { text-shadow: 0 1px 2px #000; }
.about-logo, .boot-in h1 { color: var(--gold); text-shadow: 0 2px 0 #3b2a12, 0 4px 6px #000; }

/* ---------- barra de arriba, avisos ---------- */
.pill, .toast {
  background: rgba(10,8,6,.88); border: 1px solid var(--edge); border-radius: 2px;
  box-shadow: 0 0 0 1px #000, 0 6px 16px rgba(0,0,0,.6); text-shadow: 1px 1px 1px #000;
}
.credits-line { color: rgba(200,185,150,.6); }

/* ---------- pestañas y chips ---------- */
.gen-tab, .tab {
  background: url('../assets/ui/tab-off.png') center / 100% 100%; border: 0; border-radius: 0;
  padding: 8px 16px; text-shadow: 1px 1px 1px #000;
}
.gen-tab:hover { border: 0; filter: brightness(1.2); }
.gen-tab.on, .tab.on { background-image: url('../assets/ui/tab-on.png'); border: 0; }
.gen-tab.on b, .tab.on { color: var(--gold); }
.chip, .seg { border-radius: 2px; border: 1px solid var(--line); background: rgba(0,0,0,.4); text-shadow: 1px 1px 1px #000; }
.chip.on { border-color: var(--gold); color: var(--gold); background: rgba(176,141,85,.14); }
.seg button { background: rgba(0,0,0,.35); text-shadow: 1px 1px 1px #000; }
.seg button.on { background: rgba(176,141,85,.2); color: var(--gold); }

/* ---------- huecos dentro de las cajas ---------- */
.panel, .cell, .card, .mission, .ach, .fr-row, .rk-row, .rk-me, .stats > div, .prof-marks div, .leg-cell,
.tal-node, .lob-card, .answer, .fav-slot {
  background: var(--well); border-color: var(--line); border-radius: 2px;
}
.panel { border-width: 1px; }
.cell:hover, .card:hover, .answer:hover, .tal-node:hover { border-color: var(--edge); background: rgba(176,141,85,.1); }
.cell.on, .tal-node.on, .mission.ready, .rk-row.mine, .gen-tab.on {
  border-color: var(--gold); background-color: rgba(176,141,85,.16);
}
.card.evo { border-color: var(--gold); background: linear-gradient(90deg, rgba(176,141,85,.25), rgba(0,0,0,.35)); }
.card .key, kbd { border-color: var(--line); border-radius: 2px; }
.tag-chip, .type { border-radius: 2px; }
.stage {
  background: radial-gradient(ellipse at 50% 85%, rgba(200,150,80,.18), transparent 60%), linear-gradient(180deg, #17130f, #0a0807);
  border: 1px solid var(--stage-c, var(--edge)); border-radius: 0;
  box-shadow: 0 0 0 1px #000, inset 0 0 30px rgba(0,0,0,.8), 0 10px 30px rgba(0,0,0,.6);
}

/* ---------- barras ---------- */
.stat .bar, .tal-bar, .mission .bar, .ach .bar, .progress {
  background: url('../assets/ui/bar-xp-bg.png') center / 100% 100%; border-radius: 0; height: 9px;
}
.stat .bar i, .tal-bar i, .mission .bar i, .ach .bar i, .progress i {
  background: linear-gradient(180deg, #f0cd85, #b88a3c 55%, #7a5620);
}
.pips i { border-radius: 0; background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px var(--line); }
.pips i.on { background: linear-gradient(180deg, #f0cd85, #a87d36); }

/* ---------- formularios ---------- */
.field, select.field {
  background: rgba(0,0,0,.55); color: var(--ink); border: 1px solid var(--edge-in); border-radius: 2px;
}
.field:focus { border-color: var(--edge); }
input[type=range] { background: rgba(0,0,0,.6); border-radius: 0; box-shadow: inset 0 0 0 1px var(--line); }
input[type=range]::-webkit-slider-thumb { border-radius: 0; background: var(--gold); border: 1px solid #000; }
input[type=range]::-moz-range-thumb { border-radius: 0; background: var(--gold); border: 1px solid #000; }
::-webkit-scrollbar-thumb { background: rgba(176,141,85,.45); border-radius: 0; }

/* ---------- equipo y talentos ---------- */
/* Inventario: casillas de piedra de Flare, huecos con la silueta de lo que va ahí,
   brillo del color de la rareza (mágico azul, raro oro) y fichas negras como en Diablo. */
.inv-doll {
  background: radial-gradient(ellipse at 50% 55%, rgba(120,90,50,.16), transparent 62%), rgba(0,0,0,.55);
  border: 1px solid var(--edge-in); box-shadow: inset 0 0 40px rgba(0,0,0,.9), 0 0 0 1px #000;
}
.inv-hero { background: radial-gradient(ellipse at 50% 82%, rgba(200,150,80,.16), transparent 58%); }
.inv-slot, .inv-cell { background: url('../assets/ui/inv-cell.png') center / 100% 100%; box-shadow: 0 0 0 1px #000; }
.inv-slot { background-size: 100% 100%; }
.inv-slot[data-slot=helm]   { background-image: url('../assets/ui/inv-helm.png'); }
.inv-slot[data-slot=armor]  { background-image: url('../assets/ui/inv-armor.png'); }
.inv-slot[data-slot=boots]  { background-image: url('../assets/ui/inv-boots.png'); }
.inv-slot[data-slot=weapon] { background-image: url('../assets/ui/inv-weapon.png'); }
.inv-slot[data-slot=ring]   { background-image: url('../assets/ui/inv-ring.png'); }
.inv-slot[data-slot=amulet] { background-image: url('../assets/ui/inv-amulet.png'); }
.inv-slot.full { background-image: url('../assets/ui/inv-cell.png'); }
.inv-slot.full, .inv-cell.full { cursor: grab; }
.inv-slot.full[data-r="1"], .inv-cell.full[data-r="1"],
.inv-slot.full[data-r="2"], .inv-cell.full[data-r="2"] {
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent),
              inset 0 0 18px color-mix(in srgb, var(--rc) 38%, transparent);
}
.inv-slot.full[data-r="3"], .inv-cell.full[data-r="3"] {     /* legendario: brillo naranja que late */
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #ff8a1e, inset 0 0 22px rgba(255,138,30,.55), 0 0 10px rgba(255,138,30,.35);
  animation: legPulse 2.2s ease-in-out infinite;
}
@keyframes legPulse { 50% { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #ffb05a, inset 0 0 26px rgba(255,150,40,.7), 0 0 16px rgba(255,138,30,.55); } }
.inv-slot.full:hover, .inv-cell.full:hover { filter: brightness(1.25); }
.inv-slot.on, .inv-cell.on { outline: 2px solid var(--gold); outline-offset: -2px; }
.inv-slot.can { box-shadow: 0 0 0 1px #000, inset 0 0 0 2px rgba(140,191,95,.75), 0 0 12px rgba(140,191,95,.45); }
.inv-over.inv-slot.can, .inv-bag.inv-over { box-shadow: 0 0 0 2px var(--green), 0 0 16px rgba(140,191,95,.6); }
.inv-over.inv-slot:not(.can) { box-shadow: 0 0 0 2px var(--red); }
.inv-cell span { color: var(--muted); text-shadow: 1px 1px 0 #000; }
.inv-bin { background: var(--well); border: 1px dashed var(--edge-in); color: var(--muted); }
.inv-bin small { font-size: 11px; opacity: .8; }
.inv-bin.inv-over { border-color: var(--red); color: #f0a090; box-shadow: 0 0 14px rgba(208,80,63,.45); }
.inv-actions b { letter-spacing: .4px; }
.inv-stats .gi-lines li { color: #8fa9e0; }
.tip-card {
  width: 250px; padding: 10px 12px; background: rgba(6,5,4,.94);
  border: 1px solid color-mix(in srgb, var(--rc) 45%, #3a2e1f); box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0,0,0,.8);
  text-align: center; font-size: 13px; color: var(--ink); text-shadow: 1px 1px 1px #000;
}
.tip-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.tip-name { color: var(--rc); font-weight: 700; font-size: 16px; letter-spacing: .5px; }
.tip-type { color: var(--rc); opacity: .8; font-size: 12px; }
.tip-il { color: var(--muted); font-size: 12px; margin: 4px 0 6px; }
.tip-lines, .tip-diff { list-style: none; margin: 0; padding: 0; }
.tip-lines li { padding: 1px 0; }
.tip-lines .imp { color: #f0e6d0; }
.tip-lines .aff { color: #7b8fff; }
.tip-lines .leg { color: #ff9a3c; padding: 2px 0 4px; line-height: 1.35; }
.tip-lines .leg-cls { color: #c8a878; font-size: .9em; padding-bottom: 4px; }
.tip-lines .leg-cls.no { color: #e05a4a; }
.tip-lines .leg-g { font-size: .85em; letter-spacing: .04em; color: #d8b07a; }
.tip-lines .leg-g.g1 { color: #ff7a4a; }
.tip-lines .leg-g.g2 { color: #ff4a3a; text-shadow: 0 0 6px rgba(255,60,40,.5); }
.tip-sep { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.tip-diff .up { color: var(--green); }
.tip-diff .down { color: var(--red); }
.tip-who { margin-top: 6px; color: var(--gold); font-size: 12px; }
.tip-val { margin-top: 6px; color: var(--muted); font-size: 11px; }
.tal-node small { color: #c2ad84; }
.tal-link { background: var(--line); }

/* ---------- pantallas de fondo ---------- */
.scr.dim { background: radial-gradient(circle at 50% 40%, rgba(20,14,8,.5), rgba(4,3,2,.9)); }
.boot, .tapstart {
  background: linear-gradient(180deg, rgba(4,3,2,.35), rgba(4,3,2,.75)), url('../assets/ui/bg.jpg') center / cover;
}
.boot-in a, .login-links a { color: var(--gold); }
.legal-links a { color: rgba(200,185,150,.75); }
.legal-links a:hover { color: var(--gold); }
#rotate { background: rgba(6,5,4,.95); }

/* Iconos de Flare (fotos pintadas): suavizados, no pixelados. */
img.fi { image-rendering: auto; vertical-align: middle; }

/* Móvil en horizontal: la fuente de Flare es más ancha, la barra de arriba se aprieta. */
@media (max-height: 520px) {
  .pill, .topbar .btn.small { font-size: 12px; letter-spacing: 0; }
  .news-btn span { display: none; }
  .btn { min-height: 36px; }
}
.card .ds.note { color: #8fd18a; font-size: 13px; margin-top: 2px; }

/* ---------- elegir nivel (ui/stage-ui.js) ---------- */
.box.stage-box { width: min(620px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
.stage-diffs { display: flex; gap: 6px; margin: 4px 0 10px; }
.stage-diff { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px;
  background: var(--well); border: 1px solid var(--line); color: var(--ink); font: inherit; cursor: pointer; }
.stage-diff b { font-size: 16px; }
.stage-diff small { font-size: 12px; color: var(--muted); }
.stage-diff.on { border-color: var(--edge); background: rgba(176,141,85,.16); }
.stage-diff.on b { color: var(--gold); }
.stage-diff.locked { opacity: .45; cursor: default; }
.stage-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.stage-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 4px 12px;
  border: 1px solid var(--line); color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden;
  background: linear-gradient(90deg, rgba(8,6,5,.9) 30%, rgba(8,6,5,.55)), var(--bg) center / 256px; }
.stage-row:hover { border-color: var(--edge-in); }
.stage-row.on { border-color: var(--edge); box-shadow: inset 0 0 0 1px var(--edge), 0 0 14px rgba(224,180,94,.18); }
.stage-row.locked { cursor: default; filter: grayscale(.85) brightness(.55); }
.stage-row.locked .st-boss canvas { filter: brightness(0); opacity: .7; }
.st-num { width: 38px; text-align: center; font-size: 24px; font-weight: 700; color: var(--gold2); }
.stage-row.on .st-num { color: var(--gold); }
.st-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-main b { font-size: 19px; color: var(--ink); }
.stage-row.on .st-main b { color: var(--gold); }
.st-main small { font-size: 13px; line-height: 1.25; color: var(--muted); }
.st-boss { width: 84px; height: 84px; flex: none; }
.st-boss canvas { width: 84px; height: 84px; }
.st-state { position: absolute; right: 10px; top: 6px; font-size: 12px; color: var(--green); }
.stage-row.locked .st-state { color: var(--muted); }
@media (max-width: 520px) {
  .stage-row { min-height: 70px; gap: 8px; padding: 0 8px; }
  .st-boss, .st-boss canvas { width: 64px; height: 64px; }
  .st-main b { font-size: 16px; }
  .st-num { width: 26px; font-size: 19px; }
}

/* ============ Móvil en horizontal (18-10-2026) ============
 * Que nada tenga que bajarse: en las pantallas del menú la barra de arriba se queda
 * sólo con las monedas, la cabecera va en una línea (título · pestañas o héroe · volver)
 * y sólo se desplaza la lista de cada pantalla, no la caja entera. */
@media (max-height: 520px) and (orientation: landscape) {
  #scr-dex, #scr-gear, #scr-talents, #scr-upgrades, #scr-goals, #scr-stage { padding: 4px 6px; }
  :is(#scr-dex, #scr-gear, #scr-talents, #scr-upgrades, #scr-goals) > .box,
  #scr-stage > .stage-box { width: 100%; height: 100%; max-height: none; padding: 6px 10px; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
    column-gap: 12px; row-gap: 6px; align-items: center; }
  :is(#scr-dex, #scr-gear, #scr-talents, #scr-upgrades, #scr-goals, #scr-stage) .box > .row.between:first-child { display: contents; }
  :is(#scr-dex, #scr-gear, #scr-talents, #scr-upgrades, #scr-goals, #scr-stage) .box > .row.between:first-child > h2 {
    grid-column: 1; grid-row: 1; margin: 0; font-size: 19px; white-space: nowrap; }
  /* Volver: una cruz, siempre del mismo ancho (las monedas van justo a su izquierda). */
  :is(#scr-dex, #scr-gear, #scr-talents, #scr-upgrades, #scr-goals, #scr-stage) [data-back] {
    grid-column: 3; grid-row: 1; width: 38px; min-height: 32px; padding: 0; font-size: 0; }
  :is(#scr-dex, #scr-gear, #scr-talents, #scr-upgrades, #scr-goals, #scr-stage) [data-back]::before { content: '✕'; font-size: 16px; }
  :is(#scr-dex, #scr-gear, #scr-talents, #scr-upgrades, #scr-goals, #scr-stage) .box > :not(.row.between:first-child) { grid-column: 1 / -1; }
  /* Lo que va en la cabecera, entre el título y volver; deja sitio a las monedas. */
  #dex-gens, #scr-gear .box > .row:nth-child(2), #scr-talents .tal-head, #scr-upgrades .upg-head, #goals-tabs {
    grid-column: 2 !important; grid-row: 1; margin: 0 !important; margin-right: 96px !important; min-width: 0; }

  :is(#scr-gear, #scr-talents, #scr-upgrades) .box label[for] { display: none; }
  :is(#scr-gear, #scr-talents, #scr-upgrades) .box select.field { padding: 3px 8px; font-size: 14px; min-height: 0; height: 32px;
    min-width: 0 !important; max-width: 220px; }
  /* Barra de arriba: sólo las monedas, dentro de la cabecera. */
  body:has(:is(#scr-dex, #scr-gear, #scr-talents, #scr-upgrades, #scr-goals, #scr-stage):not(.hidden)) .topbar { top: 13px; right: 70px; }
  body:has(:is(#scr-dex, #scr-gear, #scr-talents, #scr-upgrades, #scr-goals, #scr-stage):not(.hidden)) .topbar > :not(:first-child) { display: none; }
  body:has(:is(#scr-dex, #scr-gear, #scr-talents, #scr-upgrades, #scr-goals, #scr-stage):not(.hidden)) .sound-panel { display: none; }

  /* ---- Entrar: el logo a la izquierda, el formulario a la derecha ---- */
  #scr-login .login-box { width: min(760px, 100%) !important; display: flex; gap: 22px; align-items: center; padding: 10px 18px; }
  .login-side { flex: 1; }
  .login-side .logo .t1 { font-size: 34px; }
  .login-side .login-tag { margin: 8px 0 0; }
  .login-main { flex: 1.25; min-width: 0; }
  .login-main .tabs { margin-bottom: 4px; }
  .login-main label { margin: 4px 0 2px; font-size: 13px; }
  .login-main .field { padding-top: 6px; padding-bottom: 6px; }
  .login-main .err:empty { display: none; }
  .login-main form .row { margin-top: 8px; }
  .login-main > .row { margin-top: 6px !important; }
  .login-main .note { margin-top: 4px; }

  /* ---- Elegir fase: las fases a la izquierda; dificultad y entrar a la derecha ---- */
  #scr-stage > .stage-box { grid-template-columns: minmax(0, 1fr) 210px; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  #scr-stage .box > .row.between:first-child > h2 { grid-column: 1; }
  #scr-stage [data-back] { grid-column: 2; justify-self: end; }
  #scr-stage .stage-list { grid-column: 1 !important; grid-row: 2 / 5; align-self: stretch; gap: 4px; }
  #scr-stage .stage-diffs { grid-column: 2 !important; grid-row: 2; flex-direction: column; margin: 0; gap: 4px; }
  #scr-stage .stage-diff { flex-direction: row; justify-content: space-between; padding: 5px 10px; }
  #scr-stage .stage-diff b { font-size: 15px; }
  #scr-stage #stage-note { grid-column: 2 !important; grid-row: 3; align-self: start; margin: 0; font-size: 11px; overflow: hidden; }
  #scr-stage .box > .row:has(#stage-go) { grid-column: 2 !important; grid-row: 4; margin: 0 !important; }
  #stage-go { padding: 8px 6px; }
  .stage-row { min-height: 40px; padding: 2px 10px; gap: 8px; flex: none; }
  .stage-row .st-main small { display: none; }
  .stage-row.on { min-height: 84px; }
  .stage-row.on .st-main small { display: block; font-size: 12px; }
  .st-num { width: 26px; font-size: 18px; }
  .st-main b { font-size: 16px; }
  .st-boss, .st-boss canvas { width: 40px; height: 40px; }
  .stage-row.on .st-boss, .stage-row.on .st-boss canvas { width: 76px; height: 76px; }

  /* ---- Subir de nivel: las cartas una al lado de otra ---- */
  #scr-levelup { padding: 6px 10px; }
  #scr-levelup .box { width: min(860px, 100%); padding: 8px 12px; }
  #scr-levelup h2 { margin: 0; }
  #scr-levelup .sub { display: none; }
  #scr-levelup .cards { flex-direction: row; width: 100%; gap: 8px; margin-top: 6px; }
  #scr-levelup .card { flex: 1 1 0; min-width: 0; flex-direction: column; text-align: center; gap: 6px; padding: 10px 8px; }
  #scr-levelup .card:hover { transform: translateY(-3px); }
  #scr-levelup .card .nm { justify-content: center; font-size: 15px; }
  #scr-levelup .card .ds { font-size: 12px; }
  #scr-levelup .card .key { display: none; }
  #scr-levelup .card .axes { grid-template-columns: 1fr; gap: 4px; margin-top: 2px; }
  #scr-levelup .card .ax { padding: 4px 6px; text-align: center; }

  /* ---- Héroes: la ficha más ancha, con el retrato a la izquierda ---- */
  #scr-dex .split { grid-template-columns: minmax(0, 1fr) minmax(250px, 44%); margin: 0 !important; height: 100%; }
  #scr-dex .grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  #dex-detail { display: block; }
  #dex-detail #dex-big { float: left; width: 104px; height: 90px; margin: 0 10px 4px 0; }
  #dex-detail .seg { float: left; clear: left; width: 104px; margin: 0 10px 4px 0; }
  #dex-detail .seg button { flex: 1; padding: 2px 0; font-size: 11px; }
  #dex-detail .center { text-align: left; }
  #dex-detail .center h3 { font-size: 17px; }
  #dex-detail .center > div[style] { margin: 2px 0 !important; }
  #dex-detail .btn { clear: both; }

  /* ---- Equipo: muñeco · atributos · alijo ---- */
  #scr-gear .inv { grid-template-columns: auto minmax(0, 1fr); gap: 12px; height: 100%; align-items: stretch; }
  #scr-gear .inv-left { display: flex; flex-direction: column; min-height: 0; }
  #scr-gear .inv-stats { margin: 4px 0 0; overflow-y: auto; min-height: 0; flex: 1; }
  #scr-gear .inv-right { overflow-y: auto; min-height: 0; }
  #scr-gear .inv-bag { max-width: 380px; }

  /* ---- Talentos: tres columnas siempre; la descripción, abajo al tocar ---- */
  #scr-talents .box { grid-template-rows: auto minmax(0, 1fr) auto; }
  #scr-talents .tal-head { flex-wrap: nowrap; gap: 10px; justify-content: flex-start; }
  #scr-talents .tal-head select.field { max-width: 160px; }
  #scr-talents .tal-bar { width: 60px; }
  #scr-talents .tal-level { font-size: 13px; white-space: nowrap; gap: 6px; }
  #scr-talents .tal-level .sub { font-size: 11px; }
  #scr-talents .tal-head .pill { padding: 2px 6px; flex-wrap: nowrap; white-space: nowrap; }
  #scr-talents .tal-head > .row { flex-wrap: nowrap; }
  #scr-talents .tal-head .btn.small { min-height: 30px; font-size: 13px; }
  #tal-tree { grid-template-columns: repeat(3, 1fr); gap: 10px; overflow-y: auto; height: 100%; align-content: start; }
  .tal-branch h3 { font-size: 15px; margin-bottom: 3px; }
  .tal-node { padding: 4px 8px; }
  .tal-node b { font-size: 13px; }
  .tal-node small { display: none; }
  .tal-node .tal-rk { top: 5px; }
  .tal-link { height: 5px; }
  #tal-detail { margin: 0; font-size: 12px; }

  /* ---- Mejoras: sin retrato ni explicación, en tres columnas ---- */
  #scr-upgrades .upg-head .stage, #scr-upgrades .upg-head .sub { display: none; }
  #scr-upgrades .upg-head .row { margin: 0 !important; flex-wrap: nowrap; }
  #scr-upgrades .upg-head select { min-width: 0 !important; max-width: 200px; }
  #upg-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow-y: auto; height: 100%; align-content: start; }
  #upg-list .upg-item { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px; padding: 5px 8px; }
  #upg-list .upg-item b { font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #upg-list .upg-item .ic img { width: 24px; height: 24px; }
  #upg-list .upg-item > div:nth-child(2) > span { display: block; font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #upg-list .pips { margin-top: 2px; }
  #upg-list .pips i { width: 7px; }
  #upg-list .upg-btns .btn { min-height: 28px; font-size: 12px; border-width: 5px 10px; border-image-width: 5px 10px; padding: 0; }
  #upg-list .upg-btns .btn .coin { width: 14px; height: 14px; }

  /* ---- Misiones: pestañas en la cabecera; cada misión en una línea ---- */
  #goals-tabs .tab { padding: 4px 6px; font-size: 14px; }
  #goals-body { max-height: none; height: 100%; }
  #goals-body .goals-h h3 { font-size: 15px; }
  #goals-body .goals-h .sub { margin: 0; font-size: 12px; }
  #goals-body .mission { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 4px 10px; margin-bottom: 4px; }
  #goals-body .m-txt { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; column-gap: 8px; align-items: center; }
  #goals-body .m-txt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #goals-body .m-txt .bar { margin: 0; }
  #goals-body .ach-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
/* Los más estrechos (iPhone SE en horizontal): la cabecera de Talentos sin el "0 / 80". */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 720px) {
  #scr-talents .tal-level .sub { display: none; }
  #scr-talents .tal-head select.field { max-width: 120px; }
  #scr-talents .tal-bar { width: 44px; }
}

/* ============ Móvil en vertical (19-10-2026: el móvil se juega de pie) ============
 * La barra de arriba en una línea y pequeña, las pantallas del menú empiezan debajo de
 * ella, y el menú principal va de arriba abajo: logo, héroe y la lista en dos columnas. */
@media (orientation: portrait) and (max-width: 600px) {
  .topbar { top: 6px; left: 6px; right: 6px; gap: 4px; justify-content: flex-end; }
  .pill { padding: 2px 8px; font-size: 13px; gap: 5px; }
  #user-pill { max-width: 96px; overflow: hidden; white-space: nowrap; }
  .topbar .btn.small { padding: 4px 6px; font-size: 12px; }
  .news-btn span { display: none; }
  .credits-line { display: none; }
  .scr { padding: 52px 8px 8px; }
  #scr-login, #scr-test, #scr-result, #scr-starters, #scr-nick, #scr-levelup, #scr-pause,
  #scr-over, #scr-item, #scr-settings, #scr-profile, #scr-guest { padding: 8px; }
  .box { padding: 10px 12px; }
  .box h2 { font-size: 22px; }

  #scr-menu { flex-direction: column; justify-content: flex-start; }
  .menu-left { flex: none; padding: 52px 10px 0; justify-content: flex-start; }
  .menu-left .logo .t1 { font-size: 34px; }
  .menu-left .logo .t2 { font-size: 13px; }
  .partner-card { margin-top: 4px; }
  #menu-partner { height: min(24vh, 200px); width: auto; }
  .partner-card .nm { font-size: 20px; }
  .menu-right { width: 100%; padding: 6px 10px 10px; gap: 8px; background: none; flex: 1; min-height: 0; }
  .menu-right > :first-child { margin-top: 0; }
  .menu-right .box { padding: 8px 10px; }
  .menu-right > .box:last-child { display: none; }
  .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  .menu-item.play { grid-column: span 2; }
  .menu-item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Cartas de nivel: una debajo de otra, con los dos botones de mejora lado a lado. */
  #scr-levelup .cards { flex-direction: column; }
  #scr-levelup .card { padding: 8px 10px; gap: 10px; }
  #scr-levelup .card .axes { grid-template-columns: 1fr 1fr; }
}

/* ---- Tienda de gemas (19-10-2026, js/ui/shop-ui.js) ---- */
.gems-pill { gap: 6px; }
.gems-pill.neg #gems { color: #ff8a96; }
.gems-add { margin-left: 2px; width: 20px; height: 20px; padding: 0; line-height: 18px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--gold); background: rgba(176,141,85,.18); color: var(--gold); font: 700 14px BonaNova, serif; }
.gems-add:hover { background: rgba(176,141,85,.35); }
.shop-box { width: min(1080px, 100%); max-height: calc(100vh - 80px); display: flex; flex-direction: column; }
.shop-gems { gap: 6px; }
.shop-filters { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.shop-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.shop-lab { color: var(--muted); font-size: 13px; margin-right: 4px; }
.shop-row .chip.locked { opacity: .5; }
.shop-row .chip.g1.on { border-color: #c07cff; color: #d9b0ff; }
.shop-row .chip.g2.on { border-color: #ff6a4a; color: #ff9a80; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; overflow-y: auto; flex: 1; min-height: 0; padding-right: 2px; }
.shop-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid #5a4226; background: rgba(0,0,0,.35); border-radius: 3px; }
.shop-card.off { opacity: .55; }
.shop-top { display: flex; gap: 10px; align-items: center; }
.shop-top img { width: 52px; height: 52px; flex: none; background: rgba(255,138,30,.08); border: 1px solid #6b4a24; border-radius: 3px; }
.shop-top b { color: #ff9a3c; font-size: 15px; }
.shop-top small { display: block; color: var(--muted); font-size: 12px; }
.shop-new { font-size: 11px; color: #1a0d00; background: #ff9a3c; border-radius: 2px; padding: 0 4px; vertical-align: 2px; }
.shop-fx { color: #ffc27a; font-size: 13px; line-height: 1.45; }
.shop-aff { margin: 0; padding-left: 16px; color: #8fb4ff; font-size: 12px; line-height: 1.5; }
.shop-buy { margin-top: auto; display: flex; justify-content: flex-end; }
.shop-buy .btn { display: inline-flex; align-items: center; gap: 4px; }
.shop-pager { justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.packs-box { width: min(560px, 100%); }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.pack { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; cursor: pointer; color: inherit;
  border: 1px solid #6b4a24; background: rgba(0,0,0,.4); border-radius: 3px; font: inherit; }
.pack:hover:not([disabled]) { border-color: var(--gold); background: rgba(176,141,85,.12); }
.pack[disabled] { opacity: .5; cursor: default; }
.pack-gems { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; color: #d9b0ff; font-weight: 700; }
.pack-bonus { min-height: 16px; font-size: 12px; color: #7fe08a; }
.pack-price { font-size: 15px; color: var(--gold); }
.packs-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.45; cursor: pointer; }
.packs-consent input { margin-top: 3px; }
@media (max-width: 700px) {
  .shop-box { max-height: calc(100vh - 60px); padding: 10px; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-top img { width: 44px; height: 44px; }
}
@media (max-width: 480px) { #btn-logout { display: none; } .gems-add { width: 18px; height: 18px; line-height: 16px; } }   /* con las gemas no cabe: está en Ajustes > Cuenta */
.shop-up { font-size: 12px; padding: 1px 6px; border-radius: 2px; align-self: flex-start; }
.shop-up.g1 { color: #d9b0ff; background: rgba(192,124,255,.12); border: 1px solid rgba(192,124,255,.4); }
.shop-up.g2 { color: #ff9a80; background: rgba(255,106,74,.12); border: 1px solid rgba(255,106,74,.4); }

/* (20-10-2026) Barra de arriba: todo de la misma altura (antes las pastillas y los botones iban cada uno a su aire). */
#topbar { align-items: stretch; }
#topbar > .pill, #topbar > .btn { box-sizing: border-box; height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; justify-content: center; }
#topbar > .pill.hidden, #topbar > .btn.hidden { display: none; }
@media (max-width: 700px) { #topbar > .pill, #topbar > .btn { height: 30px; min-height: 30px; } }
@media (max-width: 480px) { #topbar > #btn-logout { display: none; } }   /* (lo de arriba lo volvía a mostrar) */
#topbar > #btn-sound, #topbar > #btn-full, #topbar > #btn-settings { min-width: 52px; }
@media (max-width: 700px) { #topbar > #btn-sound, #topbar > #btn-full, #topbar > #btn-settings { min-width: 32px; } }
@media (max-width: 380px) { #user-pill span { display: none; } }      /* pantallas muy estrechas: sólo la corona y el punto */