/* ============ 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); }
/* (20-10-2026) Lo que se escribe (nombre, contraseña, correo...) con una letra normal: Bona Nova SC pinta
   las minúsculas como versalitas y no se sabía si se había escrito en mayúscula o en minúscula. */
input:not([type=range]), textarea { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans TC', sans-serif;
  font-variant: normal; text-transform: none; letter-spacing: normal; }
input::placeholder, textarea::placeholder { font-family: inherit; }
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; }
  /* (20-10-2026) El menú en vertical es una página que se desplaza entera: antes la caja del menú tenía su propia
     barra (se recortaba a lo que quedaba de pantalla) y en móviles bajos había que desplazar dentro de ella. */
  #scr-menu { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #scr-menu::-webkit-scrollbar { display: none; }
  .menu-right { width: 100%; padding: 6px 10px 18px; gap: 8px; background: none; flex: none; min-height: auto; overflow: visible; }
  .menu-right .box { max-height: none; overflow: visible; }
  .menu-right > :first-child { margin-top: 0; }
  .menu-right .box { padding: 8px 10px; }
  .menu-right > .box:has(#menu-stats) { display: none; }
  /* (20-10-2026) Dos columnas iguales que nunca se ensanchan con el texto: en inglés (y otros idiomas largos) las
     explicaciones, sin saltos de línea, empujaban la columna de la derecha fuera de la caja. Lo que no cabe, con «…». */
  .menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
  .menu-item { min-width: 0; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; overflow: hidden; padding: 6px 6px 6px 8px; }
  .menu-item::before { display: none; }
  .menu-item .mi-ico, .menu-item .mi-art { width: 34px; height: 34px; }
  .menu-item.play { grid-column: span 2; }
  .menu-item.play .mi-ico, .menu-item.play .mi-art { width: 42px; height: 42px; }
  /* Los idiomas de palabras largas (Améliorations, Leaderboard, Einstellungen...) no caben en media columna: una sola
     columna (la página se desplaza; el japonés también: sus palabras en katakana partían en dos líneas). Chino y coreano siguen en dos. */
  :root:not(:lang(zh)):not(:lang(ko)) .menu-list { grid-template-columns: minmax(0, 1fr); }
  :root:not(:lang(zh)):not(:lang(ko)) .menu-item.play { grid-column: auto; }
  .menu-item.play { grid-template-columns: 42px minmax(0, 1fr); }
  .menu-item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

  /* 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; }
  /* (20-10-2026) Mejoras: el selector de héroe en su propia línea y a todo lo ancho (al lado del retrato
     se salía de la pantalla y aparecía la barra de desplazamiento horizontal). */
  #scr-upgrades .upg-head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
  #scr-upgrades .upg-head .stage { width: 96px; height: 77px; }
  #scr-upgrades .upg-head .grow { display: contents; }
  #scr-upgrades .upg-head .sub { font-size: 14px; }
  #scr-upgrades .upg-head .row { grid-column: 1 / -1; margin-top: 0 !important; flex-wrap: nowrap; gap: 10px; }
  #scr-upgrades .upg-head label { flex: none; white-space: nowrap; }
  #scr-upgrades .upg-head select.field { flex: 1 1 auto; min-width: 0 !important; width: 100% !important; }
  /* Las 10 marquitas de nivel encogen en vez de empujar el botón del precio a dos líneas. */
  #upg-list .upg-item > :nth-child(2) { min-width: 0; }
  #upg-list .pips i { flex: 0 1 12px; min-width: 5px; }
  /* (20-10-2026) Héroes: el detalle va debajo de la lista; el botón (elegir / jugar) se queda abajo, siempre a mano. */
  #dex-detail .dex-act { position: sticky; bottom: -10px; z-index: 3; margin: 10px -12px -10px; padding: 10px 12px;
    background: linear-gradient(180deg, rgba(14,11,8,.85), #0e0b08 40%); border-top: 1px solid var(--line); }
}

/* ---- 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%); max-height: calc(100vh - 40px); overflow-y: auto; }
.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.on { border-color: var(--gold); background: rgba(176,141,85,.22); box-shadow: 0 0 0 1px var(--gold) inset; }
/* Botones de PayPal (y su formulario de tarjeta): en claro, como los pinta PayPal. */
.pp-btns { margin-top: 12px; padding: 12px 12px 4px; background: #f4efe4; border-radius: 3px; min-height: 60px; }
.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; }
}
/* (23-10-2026) Móvil: cada fila de filtros en una sola línea que se desliza de lado (antes ocupaban media pantalla). */
@media (max-width: 700px), (max-height: 520px) {
  .shop-filters { gap: 4px; margin: 4px 0 8px; }
  .shop-row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .shop-row::-webkit-scrollbar { display: none; }
  .shop-row > * { flex: 0 0 auto; white-space: nowrap; }
  .shop-row .chip { padding: 3px 9px; font-size: 12px; }
}
@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 */

/* (20-10-2026) Ranking: los nombres de jugador con letra normal (Bona Nova SC los pinta como versalitas y no se
   distinguen mayúsculas de minúsculas, igual que lo que se escribe; ver los campos de texto). */
.rk-row .who b { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans TC', sans-serif; font-variant: normal; letter-spacing: normal; }

/* (20-10-2026) Tienda › Canjear (shop-ui.js openExchange) */
.ex-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.ex-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px;
  background: var(--well); border: 1px solid var(--line); }
.ex-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 16px; min-width: 0; }
.ex-what small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.ex-do { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ex-do .field { width: 96px; padding: 4px 8px; font-size: 15px; min-height: 0; }
.ex-get { white-space: nowrap; color: var(--ink); font-size: 14px; }
@media (max-width: 520px) { .ex-do { margin-left: 0; width: 100%; justify-content: flex-end; } }

/* (20-10-2026) Menú: aviso de invitado con el botón de crear cuenta o entrar */
.menu-guest { padding: 10px 12px; text-align: center; background: var(--well); border: 1px solid var(--line); }
.menu-guest .sub { margin: 0 0 8px; font-size: 13px; }
.menu-guest .btn { width: 100%; }

/* ---------- (10-11-2026) el logo de Endless Curse (assets/ui/logo, tools/pack_logo.py) ----------
 * En vez del nombre en letras: la imagen, del alto que diga el tamaño de letra de cada pantalla; el texto se queda
 * (transparente) para los lectores de pantalla. Cada idioma, el suyo (con su nombre, worker/page.js GAME). */
.logo .t1, .boot-in h1 {
  display: block; height: 2.3em; margin-left: auto; margin-right: auto;
  background: url(../assets/ui/logo/en.webp) center / contain no-repeat;
  color: transparent; text-shadow: none; white-space: nowrap; overflow: hidden;
}
.logo .t1:lang(zh-TW), .boot-in h1:lang(zh-TW) { background-image: url(../assets/ui/logo/zh-tw.webp); }
.logo .t1:lang(zh-CN), .boot-in h1:lang(zh-CN) { background-image: url(../assets/ui/logo/zh-cn.webp); }
.logo .t1:lang(ja), .boot-in h1:lang(ja) { background-image: url(../assets/ui/logo/ja.webp); }
.logo .t1:lang(ko), .boot-in h1:lang(ko) { background-image: url(../assets/ui/logo/ko.webp); }
.logo .t1:lang(es), .boot-in h1:lang(es) { background-image: url(../assets/ui/logo/es.webp); }
.logo .t1:lang(fr), .boot-in h1:lang(fr) { background-image: url(../assets/ui/logo/fr.webp); }
.logo .t1:lang(de), .boot-in h1:lang(de) { background-image: url(../assets/ui/logo/de.webp); }
.logo .t1:lang(it), .boot-in h1:lang(it) { background-image: url(../assets/ui/logo/it.webp); }
.logo .t1:lang(pt), .boot-in h1:lang(pt) { background-image: url(../assets/ui/logo/pt.webp); }
.logo .t1:lang(ru), .boot-in h1:lang(ru) { background-image: url(../assets/ui/logo/ru.webp); }
/* en dos líneas: más alto */
.logo .t1:lang(fr), .boot-in h1:lang(fr), .logo .t1:lang(ru), .boot-in h1:lang(ru) { height: 3.4em; }
.logo .t2 { display: none; }