/* ============ PokéHorde — 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;
}

/* La fuente une "fi" en un solo signo que, en chico, parece una "A" ("Jefe final"
 * se leía "Jefe Anal"). Sin ligaduras en toda la página (20-10-2026). Con
 * !important porque el atajo font: de cada regla la volvería a activar. */
*, *::before, *::after { font-variant-ligatures: none !important; }

:root {
  --ink: #ffffff;
  --muted: #b9cbf0;
  --box1: #2c519f;
  --box2: #1a3170;
  --edge: #f4f8ff;
  --edge-in: #5b83d6;
  --edge-out: #0b1838;
  --gold: #ffd23f;
  --gold2: #f0a31e;
  --red: #ff5f6d;
  --green: #5fe08a;
  --shadow: #0a1430;
  --r1: #9fb1c9; --r2: #5fe08a; --r3: #4fb4ff; --r4: #c47bff; --r5: #ffcb3d;
  --font: 'Pixelify', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: #050914;
  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; }

/* ---------- capas de pantalla ---------- */
.scr {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  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-upgrades, #scr-gacha, #scr-friends, #scr-rank, #scr-lobby, #scr-profile, #scr-items, #scr-pc { padding-top: 66px; }
}
.scr.dim { background: radial-gradient(circle at 50% 40%, rgba(10,20,50,.55), rgba(3,6,16,.88)); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- caja PMD ---------- */
.box {
  position: relative;
  background: linear-gradient(180deg, var(--box1), var(--box2));
  border: 3px solid var(--edge);
  border-radius: 12px;
  box-shadow: 0 0 0 3px var(--edge-out), inset 0 0 0 2px var(--edge-in), 0 18px 50px rgba(0,0,0,.55);
  padding: 22px 24px;
  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 ---------- */
.btn {
  appearance: none; cursor: pointer;
  padding: 10px 20px;
  border: 3px solid var(--edge);
  border-radius: 9px;
  background: linear-gradient(180deg, #3d67c0, #26468f);
  box-shadow: 0 0 0 2px var(--edge-out), 0 4px 0 var(--edge-out);
  font-size: 17px; font-weight: 700;
  text-shadow: 2px 2px 0 var(--shadow);
  transition: transform .06s, filter .12s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--edge-out), 0 2px 0 var(--edge-out); }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
.btn.gold {
  background: linear-gradient(180deg, #ffe37a, #f0a31e);
  color: #3a2300; text-shadow: 1px 1px 0 rgba(255,255,255,.4);
  border-color: #fff7d6;
}
.btn.ghost { background: transparent; box-shadow: none; border-color: rgba(244,248,255,.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 (flecha pixel art), como en PMD */
.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(255,255,255,.08); 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: 8px;
  background: rgba(0,0,0,.2); border: 2px solid transparent;
  text-align: center; font-weight: 700;
}
.tab.on { border-color: var(--edge); background: rgba(255,255,255,.1); }
label { display: block; font-size: 14px; color: var(--muted); margin: 8px 0 4px; }
.field {
  width: 100%; padding: 10px 12px;
  background: #0f1f4a; color: #fff;
  border: 2px solid var(--edge-in); border-radius: 8px;
  font-size: 17px; outline: none;
}
.field:focus { border-color: var(--edge); }
.err { color: #ffb0b8; min-height: 20px; font-size: 14px; margin: 8px 0 0; }
.note { color: var(--muted); font-size: 13px; margin-top: 14px; }

/* ---------- pantalla de inicio ---------- */
.logo { text-align: center; margin-bottom: 18px; }
.logo .t1 { font-size: 46px; font-weight: 700; line-height: 1; color: var(--gold);
  text-shadow: 3px 3px 0 #a55f00, 6px 6px 0 var(--shadow); letter-spacing: 1px; }
.logo .t2 { font-size: 18px; color: #fff; margin-top: 6px; letter-spacing: 3px; text-transform: uppercase; }

/* ---------- test de personalidad ---------- */
.test-box { width: min(620px, 100%); }
.progress { height: 8px; background: rgba(0,0,0,.35); border-radius: 8px; overflow: hidden; margin-bottom: 18px; }
.progress i { display: block; height: 100%; background: var(--gold); transition: width .25s; }
.q { font-size: 22px; margin: 0 0 16px; min-height: 2.6em; }
.answers { display: flex; flex-direction: column; gap: 8px; }
.answer {
  appearance: none; text-align: left; cursor: pointer;
  padding: 12px 16px 12px 34px; position: relative;
  background: rgba(0,0,0,.18); border: 2px solid rgba(244,248,255,.25); border-radius: 9px;
  font-size: 17px; text-shadow: 2px 2px 0 var(--shadow);
}
.answer::before {
  content: ''; position: absolute; left: 10px; top: 50%; width: 12px; height: 18px; margin-top: -9px;
  background: var(--ico-cursor) no-repeat center / contain; image-rendering: pixelated; opacity: 0;
}
.answer:hover { background: rgba(255,255,255,.1); border-color: var(--edge); }
.answer:hover::before { opacity: 1; }

.result { width: min(560px, 100%); text-align: center; }
.result .trait { font-size: 30px; color: var(--gold); margin: 4px 0; }
.stage {
  display: block; margin: 8px auto 6px;
  /* Recuadro estilo PMD: fondo oscuro y borde del color del tipo (--stage-c). */
  background:
    radial-gradient(ellipse at 50% 88%, rgba(120,170,255,.22), transparent 60%),
    linear-gradient(180deg, rgba(20,36,78,.88), rgba(8,14,34,.92));
  border: 3px solid var(--stage-c, #5b83d6);
  border-radius: 14px;
  box-shadow: 0 0 0 3px #0b1838, 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 2px 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 Pokémon ---------- */
.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(0,0,0,.2); border: 2px solid rgba(244,248,255,.18); border-radius: 10px;
  padding: 4px 2px 6px; transition: transform .08s, border-color .12s, background .12s;
}
.cell:hover { transform: translateY(-2px); border-color: var(--edge); background: rgba(255,255,255,.08); }
.cell.on { border-color: var(--gold); background: rgba(255,210,63,.14); }
.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 ---------- */
#scr-menu { justify-content: space-between; align-items: stretch; padding: 0; }
.menu-left {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 30px; min-width: 0;
}
.menu-left .logo .t1 { font-size: clamp(36px, 6vw, 64px); }
.partner-card { text-align: center; margin-top: 10px; }
.partner-card .nm { font-size: 24px; font-weight: 700; text-shadow: 3px 3px 0 var(--shadow); }
.partner-card .lv { color: var(--muted); font-size: 14px; text-shadow: 2px 2px 0 var(--shadow); }
.menu-right {
  width: min(380px, 100%); display: flex; flex-direction: column;
  /* Arriba deja sitio a la barra superior; si no cabe todo, se desplaza
     (los márgenes auto lo centran sin que se salga por arriba). */
  padding: 70px 24px 18px; gap: 14px; overflow-y: auto;
  background: linear-gradient(90deg, transparent, rgba(5,10,25,.65) 30%);
}
.menu-right > :first-child { margin-top: auto; }
.menu-right > :last-child { margin-bottom: auto; }
/* Portátiles con poca altura: menú más compacto y, si hace falta, en dos columnas. */
@media (max-height: 780px) and (min-height: 521px) {
  .menu-right { padding-top: 62px; gap: 10px; }
  .menu-right .box { padding: 10px 14px; }
  .menu-item { font-size: 17px; padding: 5px 10px; }
  .menu-item.play { font-size: 24px; }
  .menu-item small { font-size: 11px; }
}
@media (max-height: 660px) and (min-height: 521px) {
  .menu-right { width: min(500px, 52vw); }
  .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; }
  .menu-left .logo .t1 { font-size: clamp(32px, 5vw, 52px); }
  #menu-partner { height: min(30vh, 200px); width: auto; }
}
.topbar {
  position: fixed; top: 14px; right: 16px; z-index: 25;
  display: flex; gap: 10px; align-items: center;
}
.pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 30px;
  background: rgba(10,20,50,.85); border: 2px solid var(--edge);
  box-shadow: 0 0 0 2px var(--edge-out);
  font-weight: 700; text-shadow: 2px 2px 0 var(--shadow);
}
.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: 14px; bottom: 10px; 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 ×2 son grandes. */
  display: flex; align-items: flex-end; justify-content: center; gap: 6px;
  margin: 8px -10px -18px; height: 190px; 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: 18px; padding: 14px 10px;
  /* Si las 10 cartas no caben (móvil en horizontal) se puede desplazar, y
     "Continuar" se queda siempre a la vista abajo (antes quedaba fuera y no
     había forma de cerrar sin recargar la página). */
  overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(circle at 50% 45%, #1b2d63, #03060f 70%);
}
/* Centrado vertical que no corta por arriba cuando no cabe. */
#pull-fx::before, #pull-fx::after { content: ''; margin: auto; }
#pull-acts { position: sticky; bottom: 8px; z-index: 2; flex-shrink: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#pull-acts.hidden { display: none; }
#pull-acts .btn { box-shadow: 0 4px 18px rgba(0,0,0,.6); }
#pull-again .cost { margin-left: 6px; opacity: .85; font-size: .85em; }
#pull-again .cost img { vertical-align: -3px; }
@media (max-height: 520px) {
  #pull-fx { gap: 10px; }
  .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 {
  width: 150px; padding: 10px 6px; text-align: center; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.3));
  border: 3px solid var(--rc, #fff);
  box-shadow: 0 0 22px var(--rc, #fff);
  animation: pop .3s ease-out both;
  text-shadow: 2px 2px 0 var(--shadow);
}
.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; }

/* ---------- resumen de la partida (16-10-2026) ---------- */
.over-parts { font-size: 12px; color: var(--muted); }
.run-sum { text-align: left; }
/* (30-10-2026) Resumen en grupo: lo de cada compañero (run-ui.js matesHtml) */
.over-mates { display: grid; gap: 10px; text-align: left; }
.over-mates h3 { margin: 6px 0 0; font-size: 18px; color: var(--gold); }
.run-sum.om { padding: 8px 10px; border-radius: 10px; background: rgba(5,12,35,.35); border: 2px solid rgba(185,203,240,.2); }
.om-spr { width: 56px; height: 50px; display: grid; place-items: center; }
.om-spr canvas { image-rendering: pixelated; }
.om-wait { margin: 2px 0 4px; font-style: italic; }
.om-icons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.om-ic { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: rgba(0,0,0,.25); }
.om-ic small { position: absolute; right: -2px; bottom: -4px; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 #000; }
.run-sum .rs-start { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.run-sum .rs-start > div:last-child > span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.run-sum .rs-start b { font-size: 20px; }
.run-sum .rs-start small { display: block; font-size: 12px; color: var(--muted); }
.run-sum .rs-start small b { font-size: 13px; color: #eaf2ff; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rs-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; font-weight: 700; text-align: left; padding: 3px 6px; }
.rs-table thead th:nth-child(2), .rs-table td.rs-lv { text-align: center; white-space: nowrap; }
.rs-table thead th:last-child, .rs-table td.rs-dmg { text-align: right; width: 34%; }
.rs-table tr.rs-grp th { color: #ffd23f; padding-top: 8px; border-bottom: 1px solid rgba(244,248,255,.18); }
.rs-table td { padding: 3px 6px; border-bottom: 1px solid rgba(244,248,255,.06); vertical-align: middle; }
.rs-table td.rs-nm img { vertical-align: -4px; margin-right: 4px; }
.rs-table td.rs-nm > :not(span) { width: 18px !important; height: 18px !important; image-rendering: pixelated; }
.rs-table b { font-size: 13px; }
.rs-table td.rs-dmg { position: relative; }
.rs-table td.rs-dmg b { position: relative; z-index: 1; font-size: 14px; }
.run-sum .rs-start b { font-size: 20px; }
.rs-table td.rs-dmg i { position: absolute; right: 6px; bottom: 2px; height: 3px; border-radius: 2px; opacity: .8; max-width: calc(100% - 12px); }
.rs-table .rs-tag { font-size: 10px; color: #ffd23f; border: 1px solid rgba(255,210,63,.5); border-radius: 4px; padding: 0 4px; }
.rs-table td.rs-empty { color: var(--muted); font-size: 12px; }

/* ============ 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; }

/* (28-10-2026) Sala: «Invitar por link» (botón + el link en un cuadro seleccionable) y el cartel de la invitación (sala-link.js) */
#lobby-link-in { flex: 1 1 160px; width: auto; min-width: 0; padding: 7px 10px; font-size: 14px; text-overflow: ellipsis; cursor: text; }
#sala-pop.scr.dim { z-index: 62; align-items: center !important; padding: 8px max(10px, var(--sa-r, 0px)) 8px max(10px, var(--sa-l, 0px)) !important; }   /* (!important: en celular apaisado las pantallas con panel se estiran hasta abajo) */
#sala-pop .box { text-align: center; display: flex; flex-direction: column; gap: 10px; }
#sala-pop #sp-msg { display: flex; flex-direction: column; gap: 8px; }
#sala-pop p { margin: 0; line-height: 1.45; }
#sala-pop h2 { margin: 0; }
#sala-pop .row { justify-content: center; }
.login-sala { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,210,63,.12); border: 2px solid var(--gold); font-size: 14px; line-height: 1.35; text-align: center; }
.login-sala.hidden { display: none; }

.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 26px; 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-rep { background: none; border: 0; padding: 4px; cursor: pointer; opacity: .35; line-height: 0; }
.rk-rep:hover { opacity: 1; }
.rk-rep.sent { opacity: .12; cursor: default; }
.rk-row.mod-row { grid-template-columns: 54px 1fr auto; }
.rk-row.mod-row.rep { grid-template-columns: 54px auto 1fr auto auto; }
.mod-warn { color: #ff8a96 !important; }
.mod-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.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; }
.lvl-auto { color: #ff8a9a; font-size: 14px; min-height: 0; }   /* (03-11-2026) cuenta atrás de la carta al azar en grupo */

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

/* ---------- tickets y mejoras por Pokémon ---------- */
.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: default; }
.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: 50px 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: 30px; }
  .box { padding: 10px 14px; border-radius: 10px; }
  .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 9px; font-size: 13px; }
  .topbar { top: 5px; right: 6px; gap: 5px; }
  .pill { padding: 2px 8px; font-size: 13px; gap: 5px; }
  #user-pill { max-width: 130px; overflow: hidden; white-space: nowrap; }
  .topbar .btn.small { padding: 2px 6px; }
  .credits-line { display: none !important; }
  .sound-panel { top: 40px; }

  #scr-menu { flex-direction: row; padding: 0; overflow: hidden; }
  .menu-left { padding: 50px 8px 6px; }
  .menu-left .logo { margin-bottom: 2px; }
  .menu-left .logo .t1 { font-size: 28px; }
  .logo .t2 { font-size: 10px; margin-top: 2px; letter-spacing: 2px; }
  #menu-partner { height: min(34vh, 130px); width: auto; }
  .partner-card { margin-top: 2px; }
  .partner-card .nm { font-size: 17px; }
  .partner-card .lv { font-size: 12px; }
  .menu-right { width: min(54vw, 420px); padding: 50px 8px 6px; gap: 6px; justify-content: flex-start; overflow-y: auto; }
  .menu-right .box { padding: 6px 8px; }
  .menu-right > .box:last-child { display: none; }
  .menu-right > :first-child { margin-top: 0; }
  .ach-pop { top: auto; bottom: 8px; }
  .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; }
  .menu-item { font-size: 15px; padding: 4px 6px; grid-template-columns: 22px 1fr; column-gap: 6px; }
  .menu-item small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu-item.play { grid-column: span 2; font-size: 21px; }
  .menu-item::before { display: none; }
  .mi-ico img { width: 20px; height: 20px; }
  .box.settings { max-height: calc(100dvh - 12px); }
}
/* Móviles muy bajos (iPhone SE y similares): sin subtítulos en el menú, para que quepa entero. */
@media (max-height: 400px) {
  .menu-right { padding-top: 48px; }
  .menu-item small { display: none; }
  .menu-item { font-size: 14px; padding: 5px 6px; }
  .menu-item.play { font-size: 19px; }
  .menu-item.play small { display: block; }
  #menu-partner { height: min(30vh, 110px); }
}

/* ---------- 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; } }
/* ============ Pokémon en móvil horizontal ============
 * La lista a la izquierda y la ficha (con "Elegir de compañero") a la derecha,
 * siempre a la vista: antes la ficha quedaba debajo de la lista y había que
 * bajar hasta el borde para encontrar el botón. */
@media (max-height: 520px) {
  #scr-dex .box { height: 100%; display: flex; flex-direction: column; padding: 8px 10px; }
  #scr-dex .gen-tabs { margin-top: 2px; padding-bottom: 4px; flex: 0 0 auto; }
  #scr-dex .split { grid-template-columns: 1fr minmax(190px, 36%); gap: 8px; flex: 1; min-height: 0; margin-top: 2px !important; }
  #scr-dex .split > div:first-child { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
  #scr-dex .gen-tabs, #scr-dex .filters { scrollbar-width: none; }
  #scr-dex .gen-tabs::-webkit-scrollbar, #scr-dex .filters::-webkit-scrollbar { display: none; }
  #scr-dex .filters { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 4px; flex: 0 0 auto; }
  #scr-dex .chip { flex: 0 0 auto; padding: 2px 8px; font-size: 12px; }
  #scr-dex .grid { max-height: none; flex: 1; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; }
  #scr-dex .cell canvas { width: 69px; height: 60px; }
  #scr-dex .cell b { font-size: 11px; }
  #dex-detail { min-height: 0; overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; }
  #dex-detail .stage { width: 132px; height: 114px; margin: 2px auto 4px; }
  #dex-detail h3 { margin: 0; }
  #dex-detail .stat { grid-template-columns: 62px 1fr 34px; gap: 4px; font-size: 12px; margin: 2px 0; }
  #dex-detail p { margin: 4px 0 !important; font-size: 12px !important; }
  #dex-detail .move-icons { margin-bottom: 4px; }
  /* El botón de elegir, pegado abajo de la ficha: se ve aunque la ficha no quepa. */
  #dex-detail .btn { position: sticky; bottom: 0; order: 9; margin-top: auto; padding: 8px 6px; font-size: 15px;
    box-shadow: 0 -6px 10px rgba(5,10,25,.6); }
}

/* ============ elegir mapa ============ */
.stg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; margin-top: 10px; max-height: 66vh; overflow-y: auto; padding-right: 4px; }
.stg-card {
  position: relative; display: flex; gap: 12px; align-items: center; cursor: pointer;
  background: rgba(0,0,0,.22); border: 2px solid rgba(244,248,255,.25); border-radius: 12px; padding: 10px 58px 10px 10px;
  transition: transform .08s, background .12s, border-color .12s;
}
.stg-card:hover { background: rgba(255,255,255,.08); border-color: var(--edge); transform: translateY(-2px); }
.stg-card.sel { border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255,210,63,.25); }
.stg-card.locked { filter: grayscale(.95) brightness(.6); cursor: not-allowed; }
.stg-card.locked:hover { transform: none; }
.stg-prev { flex: 0 0 112px; height: 84px; border-radius: 8px; image-rendering: pixelated; border: 2px solid rgba(0,0,0,.4); }
.stg-txt { flex: 1; min-width: 0; }
.stg-reg { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #ffd23f; }
.stg-nm { font-weight: 700; font-size: 18px; line-height: 1.15; }
.stg-ds { color: var(--muted); font-size: 13px; margin-top: 3px; }
.stg-meta { color: var(--muted); font-size: 11px; margin-top: 4px; opacity: .8; }
.stg-boss { position: absolute; right: 6px; top: 4px; width: 48px; height: 48px; image-rendering: pixelated; pointer-events: none; }
@media (max-width: 760px) { .stg-list { grid-template-columns: 1fr; } }

.gen-tab.locked { filter: grayscale(1) brightness(.55); cursor: not-allowed; }

/* ============ buscador de la colección ============ */
.dex-search { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.dex-search .field { flex: 1; padding: 7px 10px; font-size: 15px; }
.gen-tab.dim { opacity: .45; }

/* ============ Criadero: interior de un granero ============ */
#scr-hatchery { align-items: center; justify-content: center; }
.barn {
  --wood: #7a4a28; --wood-d: #5e3519; --beam: #3b2312; --straw: #e2b448; --straw-d: #c9922e; --glow: #ffcf7a; --cream: #fff3d6;
  position: relative; width: min(1060px, 96vw); max-height: 94vh; overflow: auto;
  border: 6px solid var(--beam); border-radius: 8px; color: var(--cream);
  background:
    radial-gradient(ellipse 55% 45% at 14% 4%, rgba(255, 207, 122, .42), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(90deg, var(--wood) 0 54px, var(--wood-d) 54px 57px, #84532e 57px 112px, var(--wood-d) 112px 115px);
  box-shadow: inset 0 0 80px rgba(30, 12, 0, .65), 0 18px 50px rgba(0,0,0,.55);
  text-shadow: 2px 2px 0 rgba(40, 18, 4, .85);
}
.barn-beam {
  display: flex; align-items: center; justify-content: space-between; padding: 6px 14px;
  background: linear-gradient(#6a3e1e, var(--beam)); border-bottom: 4px solid #24140a;
}
#hat-lantern { width: 32px; height: 44px; image-rendering: pixelated; filter: drop-shadow(0 0 14px var(--glow)); margin-bottom: -26px; }
.barn-sign { display: flex; justify-content: center; margin-top: -2px; position: relative; }
.barn-sign::before, .barn-sign::after {     /* las dos cuerdas */
  content: ''; position: absolute; top: -4px; width: 3px; height: 20px; background: #d9b77a; box-shadow: 1px 0 0 #8a6a3a;
}
.barn-sign::before { left: calc(50% - 84px); } .barn-sign::after { left: calc(50% + 81px); }
.barn-sign span {
  margin-top: 14px; padding: 6px 30px 8px; font-size: 34px; letter-spacing: 1px; transform: rotate(-1.5deg);
  background: repeating-linear-gradient(0deg, #b07a44 0 14px, #8f5c2e 14px 16px); color: #fff3d6;
  border: 4px solid #4a2a14; border-radius: 4px; box-shadow: 0 6px 0 rgba(36, 20, 10, .6);
}
.barn-inner { display: grid; grid-template-columns: minmax(300px, 1.1fr) 1fr; gap: 22px; padding: 18px 22px 8px; }
.hat-stage { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hat-crate {
  position: relative; width: 384px; max-width: 100%; aspect-ratio: 48 / 40; border-radius: 6px; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(255, 214, 140, .35), transparent 70%),
    repeating-linear-gradient(0deg, #5a3418 0 28px, #4a2a12 28px 31px);
  border: 4px solid #2c180a; box-shadow: inset 0 0 30px rgba(0,0,0,.5);
}
#hat-canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
#hat-reveal { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.hat-born { position: relative; width: 220px; height: 200px; image-rendering: pixelated; margin-top: -40px; animation: hat-pop .5s ease-out both; }
@keyframes hat-pop { from { transform: scale(.3) translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.hat-rays { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -230px 0 0 -210px; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,214,64,.42) 0 10deg, transparent 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%);
  animation: hat-spin 6s linear infinite, hat-fade .6s ease-out both; }
@keyframes hat-spin { to { transform: rotate(360deg); } }
@keyframes hat-fade { from { opacity: 0; } to { opacity: 1; } }
#hat-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#hat-flash.go { animation: hat-flash .7s ease-out; }
@keyframes hat-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.hat-stage h3 { margin: 12px 0 2px; font-size: 22px; }
.hat-stage p { margin: 2px 0 10px; max-width: 46ch; color: #f2dfb6; }
.hat-odds { font-size: 13px; opacity: .8; }
.hat-shelf {
  align-self: start; padding: 12px 14px 14px; border-radius: 6px;
  background: repeating-linear-gradient(0deg, rgba(36, 20, 10, .55) 0 46px, rgba(20, 10, 4, .7) 46px 49px);
  border: 4px solid #2c180a;
}
.hat-shelf h3 { margin: 0 0 10px; }
.hat-nests { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
/* (10-11-2026, el dueño) mientras se abre un huevo y hasta «Continuar», los huevos del fondo no se ven (hatchery-ui.js hideNests). Antes seguían ahí */
.hat-nests { transition: opacity .2s; }
.hat-nests.opening { opacity: 0; visibility: hidden; pointer-events: none; }
.hat-nest {
  appearance: none; cursor: pointer; display: grid; justify-items: center; gap: 2px; padding: 6px 4px 8px;
  background: rgba(255, 220, 150, .06); border: 3px solid transparent; border-radius: 6px; color: var(--cream); font: inherit;
  text-shadow: inherit;
}
.hat-nest:hover { background: rgba(255, 220, 150, .14); }
.hat-nest.on { border-color: var(--straw); background: rgba(255, 220, 150, .16); }
.hat-nest:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; }
.hat-mini { width: 72px; height: 66px; image-rendering: pixelated; }
.hat-reg { font-size: 14px; }
.hat-n { font-size: 13px; color: var(--straw); }
.hat-empty { color: #f2dfb6; max-width: 42ch; }
.barn-hay {
  height: 54px; margin-top: 6px;
  background:
    repeating-linear-gradient(78deg, #f0cd6a 0 3px, var(--straw) 3px 6px, var(--straw-d) 6px 8px, #b98227 8px 9px),
    linear-gradient(var(--straw), var(--straw-d));
  -webkit-mask: radial-gradient(14px 10px at 14px 0, transparent 98%, #000) top / 28px 100% repeat-x;
          mask: radial-gradient(14px 10px at 14px 0, transparent 98%, #000) top / 28px 100% repeat-x;
}
@media (max-width: 760px) { .barn-inner { grid-template-columns: 1fr; } .barn-sign span { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .hat-born, #hat-flash.go, .hat-rays { animation: none; } }

/* ---------- cartel de descripción (armas y pasivas) ---------- */
#tip {
  position: fixed; z-index: 90; max-width: 320px; pointer-events: none;
  padding: 10px 12px 10px; border-radius: 10px;
  background: rgba(12,18,34,.97); border: 2px solid rgba(244,248,255,.35);
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
  font-size: 13px; line-height: 1.4; color: #e6ecf7;
  opacity: 0; transform: translateY(4px); transition: opacity .1s, transform .1s;
}
#tip.on { opacity: 1; transform: none; }
#tip .tip-h { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; padding-left: 8px; border-left: 4px solid var(--tc); }
#tip .tip-h b { font-size: 16px; color: #fff; }
#tip .tip-h span { font-size: 11px; color: var(--muted, #9fb1c9); }
#tip p { margin: 0 0 6px; }
#tip .tip-f { margin-top: 4px; font-size: 11px; color: #9fd8ff; }
#tip .tip-s { margin-top: 2px; padding-top: 6px; border-top: 1px solid rgba(244,248,255,.15); font-size: 12px; color: #ffd23f; }
@media (prefers-reduced-motion: reduce) { #tip { transition: none; } }

.move-icons .mv-tip { display: inline-grid; place-items: center; padding: 2px; border-radius: 6px; cursor: help; }
.move-icons .mv-tip:hover, .move-icons .mv-tip:focus-visible { background: rgba(255,255,255,.14); outline: none; }
.move-icons .mv-tip.special { box-shadow: 0 0 0 2px #ffd23f inset; }

/* ---------- Items: ataques, evoluciones y pasivas ---------- */
#scr-items .box { max-height: 92vh; display: flex; flex-direction: column; }
.it-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; min-height: 0; flex: 1; }
.it-row { background: rgba(0,0,0,.22); border: 2px solid rgba(244,248,255,.18); border-radius: 12px; }
/* Perks a pantalla completa (21-10-2026, diseño D): tipos en columna, roles e íconos, ficha al costado. */
#scr-items { padding: 6px !important; }
/* Con Perks abierto, la barra de arriba (monedas, usuario, botones) se esconde: el menú usa toda la pantalla. */
body:has(#scr-items:not(.hidden)) :is(#topbar, #credits-line, #sound-panel) { display: none !important; }
#scr-items .box { width: 100%; height: 100%; max-height: none; max-width: none; padding: 12px 14px; }
.it-list.pk { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(300px, 400px); gap: 10px; overflow: hidden; padding-right: 0; }
.pk-types { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 3px; min-height: 0; }
.pk-type { appearance: none; text-align: left; cursor: pointer; color: inherit; font: inherit; font-size: 13px; padding: 5px 7px; border-radius: 8px;
  background: rgba(0,0,0,.22); border: 2px solid transparent; text-shadow: 1px 1px 0 var(--shadow); }
.pk-type.on { border-color: var(--gold); }
.pk-tn { display: flex; align-items: center; gap: 2px; } .pk-tn b { margin-left: auto; opacity: .7; font-weight: 400; }
.pk-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-top: 4px; background: rgba(0,0,0,.4); }
.pk-bar i { display: block; height: 100%; }
.pk-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pk-segs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pk-seg { appearance: none; flex: 1 1 0; min-width: 0; cursor: pointer; color: inherit; font: inherit; font-size: 13px; padding: 5px 6px; border-radius: 8px;
  background: rgba(0,0,0,.25); border: 2px solid rgba(244,248,255,.25); display: inline-flex; gap: 5px; justify-content: center; align-items: center; text-shadow: 1px 1px 0 var(--shadow); white-space: nowrap; }
.pk-seg b { font-weight: 400; opacity: .8; }
.pk-seg.on.all { border-color: var(--gold); color: var(--gold); } .pk-seg.on.atk { border-color: #ff7a5c; color: #ff7a5c; }
.pk-seg.on.sup { border-color: #5fe08a; color: #5fe08a; } .pk-seg.on.tank { border-color: #7cc4ff; color: #7cc4ff; }
.pk-seg.on.mega { border-color: #57e1ff; color: #57e1ff; }   /* (28-10-2026) sección «Megaevolución» */
.pk-ri { width: 12px; height: 12px; image-rendering: pixelated; display: inline-block; vertical-align: -1px; }
.pk-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; align-content: start; padding-right: 3px; }
.pk-tile { appearance: none; cursor: pointer; color: inherit; font: inherit; position: relative; border: 2px solid rgba(244,248,255,.15); border-radius: 9px;
  padding: 6px 3px 5px; text-align: center; font-size: 11px; line-height: 1.15; display: flex; flex-direction: column; align-items: center; gap: 3px; text-shadow: 1px 1px 0 var(--shadow); }
.pk-tile.evo { border-color: rgba(255,210,63,.45); } .pk-tile.special { border-color: #ffd23f; }
.pk-tile.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.pk-tile img { width: 30px; height: 30px; }
.pk-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.pk-role { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; text-shadow: none; color: #10131a; vertical-align: 1px; }
.pk-role .pk-ri { filter: brightness(0); opacity: .75; }
.pk-role.atk { background: #ff7a5c; } .pk-role.sup { background: #5fe08a; } .pk-role.tank { background: #7cc4ff; } .pk-role.mega { background: #1a8aa8; }   /* (28-10-2026) */
.pk-detail { min-height: 0; overflow-y: auto; background: rgba(0,0,0,.25); border: 2px solid rgba(244,248,255,.15); border-radius: 12px; }
.pk-dhead { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid rgba(244,248,255,.12); }
.pk-close { display: none; }
.pk-hint { padding: 14px; font-size: 13px; }
@media (max-width: 1000px) {
  .it-list.pk { grid-template-columns: 116px minmax(0, 1fr); }
  .pk-type { font-size: 12px; padding: 4px 5px; }
  .pk-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .pk-seg { flex: 1 1 40%; font-size: 12px; }
  /* La ficha, por encima de todo (se cierra con ×). */
  .pk-detail { display: none; position: fixed; left: 8px; right: 8px; bottom: 8px; top: 18%; z-index: 30; background: linear-gradient(180deg, var(--box1), var(--box2));
    border: 3px solid var(--edge); box-shadow: 0 0 0 3px var(--edge-out), 0 10px 40px rgba(0,0,0,.6); }
  .pk-detail.open { display: block; }
  .pk-close { display: inline-block; margin-left: auto; font-size: 18px; line-height: 1; padding: 4px 10px; }
}
@media (max-height: 520px) { .pk-seg { flex: 1 1 0; padding: 3px 4px; } .pk-segs { margin-bottom: 6px; } .pk-detail { top: 8px; } }
.it-row.evo { border-color: rgba(255,210,63,.45); }
.it-row.special { border-color: #ffd23f; box-shadow: inset 0 0 0 1px rgba(255,210,63,.4); }
.it-row > summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.it-row > summary::-webkit-details-marker { display: none; }
.it-row[open] > summary { border-bottom: 1px solid rgba(244,248,255,.12); }
.it-row > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 10px; }
.it-ico { flex: 0 0 42px; height: 42px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.06); }
.it-main { flex: 1; min-width: 0; }
.it-main b { font-size: 16px; }
.it-main small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.it-desc { display: block; font-size: 13px; color: #d8e0ee; }
.it-count { flex: 0 0 auto; text-align: center; font-weight: 700; font-size: 18px; color: var(--gold); }
.it-count small { display: block; font-size: 10px; color: var(--muted); font-weight: 400; }
.it-body { padding: 10px 14px 12px; font-size: 13px; line-height: 1.45; }
.it-body p { margin: 0 0 8px; }
/* Demostración animada del ataque (preview.html en un iframe) */
.it-demo { margin: 0 0 12px; }
.it-demo-view { position: relative; aspect-ratio: 16 / 9; max-height: 300px; width: 100%; border-radius: 10px; overflow: hidden;
  border: 2px solid rgba(244,248,255,.22); background: #0d1626; }
.it-demo-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.it-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.it-demo-who { font-size: 13px; }
.it-demo-evo { background: #ffd23f; color: #1a1208; margin-left: 4px; }
.it-row.evo .it-demo-view, .it-row.special .it-demo-view { border-color: rgba(255,210,63,.55); }
.it-evo { color: #ffe9a8; }
.it-stats { color: #9fd8ff; font-size: 12px; }
.it-muted { color: var(--muted); }
.it-sub { color: var(--muted); font-size: 12px; margin-top: 4px !important; }
.it-ups { margin: 0 0 8px 18px; padding: 0; font-size: 12px; color: #d8e0ee; columns: 2; }
.it-mons { display: flex; flex-wrap: wrap; gap: 4px; max-height: 160px; overflow-y: auto; }
.it-mon { font-size: 11px; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,.08); color: #c9d4e6; }
.it-mon.own { background: rgba(95,224,138,.22); color: #c9ffd9; }
.it-mon.hit { outline: 2px solid var(--gold); }
.it-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
@media (max-width: 640px) { .it-ups { columns: 1; } .it-row > summary { gap: 8px; } }

/* Vetar una carta (Megabonk: banish) */
.card .veto-btn { flex: 0 0 auto; font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 7px; cursor: pointer;
  background: rgba(255,95,109,.14); color: #ffb3ba; border: 2px solid rgba(255,95,109,.5); }
.card .veto-btn small { opacity: .8; }
.card .veto-btn:hover, .card .veto-btn:focus-visible { background: rgba(255,95,109,.32); color: #fff; outline: none; }

/* ---------- Tienda de Mejoras (estilo Tienda Pokémon de GBA) ---------- */
#scr-upgrades {
  --m-ink: #283040; --m-paper: #f8f8f0; --m-edge: #7088b8; --m-shade: #d0d8e8;
  --m-blue: #3868c8; --m-blue2: #2850a0; --m-red: #e04040; --m-exp: #40a0f0; --m-gold: #e8b020;
}
.mart { width: min(980px, 100%); max-height: calc(100vh - 80px); margin-top: 48px; display: flex; flex-direction: column; gap: 10px; text-shadow: none; }
#scr-upgrades.scr { background: rgba(8, 12, 26, .72); }
.mart-top { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 10px;
  background: linear-gradient(var(--m-blue) 0 62%, var(--m-blue2) 62%); border: 4px solid var(--m-ink); box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.mart-sign { flex: 1; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; color: #fff;
  letter-spacing: .5px; text-shadow: 2px 2px 0 var(--m-ink); }
.mart-ball { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--m-ink); flex: 0 0 26px;
  background: linear-gradient(var(--m-red) 0 44%, var(--m-ink) 44% 56%, #fff 56%); position: relative; }
.mart-ball::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: #fff; border: 3px solid var(--m-ink); }
.mart-coins { background: var(--m-paper); color: var(--m-ink); border: 3px solid var(--m-ink); border-radius: 8px; padding: 4px 12px; font-size: 16px; }
.mart-back { font: inherit; font-weight: 700; color: var(--m-ink); background: var(--m-paper); border: 3px solid var(--m-ink); border-radius: 8px;
  padding: 5px 12px; cursor: pointer; box-shadow: inset 0 -3px 0 var(--m-shade); }
.mart-back:hover, .mart-back:focus-visible { background: #fff; outline: none; }

.mart-win { background: var(--m-paper); color: var(--m-ink); border: 4px solid var(--m-ink); border-radius: 12px;
  box-shadow: inset 0 0 0 3px var(--m-edge), inset 0 0 0 6px var(--m-paper), 0 4px 0 rgba(0,0,0,.35); }
.mart-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; min-height: 0; flex: 1; }
.mart-list { padding: 12px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.mart-row { display: grid; grid-template-columns: 16px 28px 1fr auto 92px; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 15px; color: var(--m-ink); background: transparent; border: 0; border-radius: 6px; padding: 6px 8px; cursor: pointer; text-align: left; }
.mart-row .mart-cur { color: var(--m-red); visibility: hidden; font-size: 13px; }
.mart-row.sel { background: var(--m-shade); }
.mart-row.sel .mart-cur { visibility: visible; animation: mart-blink .8s steps(2) infinite; }
@keyframes mart-blink { 50% { opacity: .25; } }
.mart-row:focus-visible { outline: 3px solid var(--m-blue); }
.mart-name { font-weight: 700; }
.mart-lv { font-size: 13px; color: #586078; }
.mart-lv small { font-size: 11px; }
.mart-price { text-align: right; font-weight: 700; white-space: nowrap; }
.mart-row.poor .mart-price { color: #b04848; }
.mart-row.max .mart-price { color: var(--m-gold); text-shadow: 1px 1px 0 var(--m-ink); }
.mart-ico { display: grid; place-items: center; }

.mart-detail { padding: 18px 18px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.mart-big { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--m-shade); border: 3px solid var(--m-ink); }
.mart-detail h3 { margin: 4px 0 0; font-size: 22px; }
.mart-unit { margin: 0; color: #586078; font-size: 14px; }
.mart-exp { display: flex; align-items: center; gap: 6px; width: 100%; margin: 6px 0 2px; background: var(--m-ink); border-radius: 6px; padding: 4px 8px; }
.mart-exp span { color: var(--m-gold); font-weight: 700; font-size: 12px; }
.mart-exp b { color: #fff; font-size: 12px; }
.mart-exp .bar { flex: 1; display: flex; gap: 2px; background: #485068; border-radius: 3px; padding: 2px; }
.mart-exp .bar i { flex: 1; height: 8px; border-radius: 2px; background: #687088; }
.mart-exp .bar i.on { background: var(--m-exp); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.mart-now { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0; text-align: left; font-size: 14px; }
.mart-now dt { font-weight: 700; color: var(--m-blue2); }
.mart-now dd { margin: 0; }
.mart-buy { margin-top: auto; width: 100%; font: inherit; font-weight: 700; font-size: 17px; color: #fff; cursor: pointer;
  background: var(--m-red); border: 4px solid var(--m-ink); border-radius: 10px; padding: 10px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.25); text-shadow: 2px 2px 0 rgba(0,0,0,.3); }
.mart-buy:hover:not(:disabled), .mart-buy:focus-visible { filter: brightness(1.1); outline: none; }
.mart-buy:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.mart-buy:disabled { background: #98a0b0; cursor: default; }

.mart-dialog { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; min-height: 92px; }
.mart-dialog canvas { width: 90px; height: 72px; flex: 0 0 90px; image-rendering: pixelated; }
.mart-dialog p { margin: 0; font-size: 16px; line-height: 1.5; }

@media (max-width: 720px) {
  .mart { margin-top: 64px; max-height: calc(100vh - 76px); overflow-y: auto; }
  .mart-body { grid-template-columns: 1fr; }
  .mart-list { max-height: 38vh; }
  .mart-dialog { min-height: 0; }
  .mart-dialog p { font-size: 14px; }
  .mart-row { grid-template-columns: 12px 24px 1fr auto 80px; font-size: 14px; gap: 6px; }
  .mart-sign { font-size: 17px; }
  .mart-dialog canvas { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mart-row.sel .mart-cur { animation: none; } }

/* =====================================================================
 * Tema "Tienda Pokémon" (GBA) en lo general del menú (15-10-2026):
 * el menú principal y la barra de arriba. Cada sección mantiene su estética
 * de siempre por dentro; sólo su título va en el cartel azul con Poké Ball.
 * (La Tienda de Mejoras tiene su propio estilo, más arriba.)
 * ===================================================================== */
:is(#topbar, #scr-menu) {
  --ink: #283040; --muted: #5c6680; --box1: #f8f8f0; --box2: #f8f8f0;
  --edge: #283040; --edge-in: #7088b8; --edge-out: rgba(20,24,40,.45); --shadow: transparent;
  --gold: #b07400; --red: #d03838;
  --m-ink: #283040; --m-paper: #f8f8f0; --m-edge: #7088b8; --m-shade: #d8e0ee; --m-red: #e04040;
  color: var(--ink); text-shadow: none;
}
#scr-menu .box {
  background: var(--m-paper); color: var(--m-ink); text-shadow: none;
  border: 4px solid var(--m-ink); border-radius: 12px;
  box-shadow: inset 0 0 0 3px var(--m-edge), inset 0 0 0 6px var(--m-paper), 0 4px 0 rgba(0,0,0,.35);
}
:is(#topbar, #scr-menu) .btn {
  background: var(--m-paper); color: var(--m-ink); border: 3px solid var(--m-ink); text-shadow: none;
  box-shadow: inset 0 -4px 0 var(--m-shade), 0 3px 0 rgba(0,0,0,.3);
}
:is(#topbar, #scr-menu) .btn.gold {
  background: var(--m-red); color: #fff; border-color: var(--m-ink); text-shadow: 2px 2px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.25), 0 3px 0 rgba(0,0,0,.3);
}
:is(#topbar, #scr-menu) .btn.ghost { background: var(--m-paper); border-color: var(--m-ink); }
#topbar :is(.pill, .btn) { background: var(--m-paper); color: var(--m-ink); border-color: var(--m-ink); text-shadow: none; }

/* Menú principal: ventana crema con cursor ▶ rojo */
#scr-menu .menu-item { color: var(--m-ink); text-shadow: none; padding-left: 30px; }
#scr-menu .menu-item small { color: var(--muted); }
#scr-menu .menu-item::before { content: '▶'; background: none; color: var(--m-red); font-size: 14px; top: 50%; margin-top: -10px; width: auto; height: auto; }
#scr-menu .menu-item:hover, #scr-menu .menu-item:focus-visible { background: var(--m-shade); }
#scr-menu .menu-item.play { color: var(--m-red); }
#scr-menu .menu-left .logo .t2, #scr-menu .partner-card .nm, #scr-menu .partner-card .lv { color: #fff; text-shadow: 2px 2px 0 #0a1430; }
#menu-stats b { color: var(--m-ink); }

/* Secciones: sólo el título en el cartel azul con Poké Ball */
:is(#scr-news, #scr-support, #scr-settings, #scr-legal, #scr-friends, #scr-lobby, #scr-stages, #scr-challenge, #scr-rank, #scr-mod, #scr-goals, #scr-profile, #scr-items, #scr-pc, #scr-dex, #scr-gacha, #scr-starters, #scr-result, #scr-market) .box > .row.between:first-child,
:is(#scr-news, #scr-support, #scr-settings, #scr-legal, #scr-friends, #scr-lobby, #scr-stages, #scr-challenge, #scr-rank, #scr-mod, #scr-goals, #scr-profile, #scr-items, #scr-pc, #scr-dex, #scr-gacha, #scr-starters, #scr-result, #scr-market) .box > h2:first-child {
  margin: -8px -10px 12px; padding: 8px 10px 8px 46px; border-radius: 8px; position: relative;
  background: linear-gradient(#3868c8 0 62%, #2850a0 62%); border: 3px solid #283040; color: #fff;
}
:is(#scr-news, #scr-support, #scr-settings, #scr-legal, #scr-friends, #scr-lobby, #scr-stages, #scr-challenge, #scr-rank, #scr-mod, #scr-goals, #scr-profile, #scr-items, #scr-pc, #scr-dex, #scr-gacha, #scr-starters, #scr-result, #scr-market) .box > :is(.row.between, h2):first-child::before {
  content: ''; position: absolute; left: 10px; top: 50%; width: 22px; height: 22px; margin-top: -14px; border-radius: 50%;
  border: 3px solid #283040; background: radial-gradient(circle, #fff 0 3px, #283040 3.5px 6px, transparent 6.5px),
    linear-gradient(#e04040 0 44%, #283040 44% 56%, #fff 56%);
}
:is(#scr-news, #scr-support, #scr-settings, #scr-legal, #scr-friends, #scr-lobby, #scr-stages, #scr-challenge, #scr-rank, #scr-mod, #scr-goals, #scr-profile, #scr-items, #scr-pc, #scr-dex, #scr-gacha, #scr-starters, #scr-result, #scr-market) .box > .row.between:first-child h2 { margin: 0; color: #fff; text-shadow: 2px 2px 0 #283040; }

/* ===================== PC (15-10-2026) ===================== */
#scr-pc .box { max-height: 92vh; display: flex; flex-direction: column; }
.pc-tools { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.pc-tools .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-sort { width: auto; margin-left: auto; padding: 4px 8px; font-size: 13px; }
.pc-sort + .pc-sort { margin-left: 6px; }   /* (27-10-2026) el filtro por tipo va antes del orden: el orden, pegado */
.pc-type, .pc-region, .pc-upg { max-width: 124px; }   /* (10-11-2026) + .pc-upg (mejoras por región) */
/* antes: .pc-type, .pc-region { max-width: 124px; } */   /* (28-10-2026) tipo, región y orden en la misma línea que los filtros */
.pc-split { align-items: start; min-height: 0; overflow: auto; }
.pc-boxwrap { border-radius: 12px; padding: 10px; border: 2px solid rgba(244,248,255,.18);
  background: repeating-linear-gradient(45deg, rgba(61,139,255,.10) 0 10px, rgba(61,139,255,.04) 10px 20px), rgba(0,0,0,.25); }
.pc-boxbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pc-boxbar b { flex: 1; text-align: center; padding: 6px; border-radius: 8px; background: rgba(0,0,0,.3); letter-spacing: .5px; }
.pc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pc-slot { position: relative; aspect-ratio: 8 / 7; border-radius: 8px; border: 2px solid rgba(244,248,255,.14); background: rgba(13,22,38,.55);
  padding: 0; display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.pc-slot canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.pc-slot.empty { cursor: default; background: rgba(13,22,38,.3); border-style: dashed; }
.pc-slot.r4 { border-color: rgba(192,106,255,.55); } .pc-slot.r5 { border-color: rgba(255,210,63,.7); }
.pc-slot:not(.empty):hover { border-color: rgba(244,248,255,.6); }
.pc-slot.on { border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255,210,63,.35); }
.pc-slot:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pc-sh { position: absolute; top: 2px; right: 3px; }
.pc-detail { display: flex; flex-direction: column; gap: 8px; }
.pc-detail canvas.stage { align-self: center; }
.pc-evs { background: rgba(0,0,0,.2); border-radius: 10px; padding: 8px 10px; }
.pc-evs .stat span:first-child { min-width: 70px; }
@media (max-width: 640px) { .pc-grid { gap: 4px; } .pc-sort { margin-left: 0; } }

/* ===================== EVs, apodos y favoritos (15-10-2026) ===================== */
.pc-fav { position: absolute; top: 2px; left: 3px; }
.pc-mate { position: absolute; bottom: 2px; right: 3px; }
.pc-name { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 2px 0; }
.pc-name h3 { margin: 0; }
.pc-nick { width: 150px; padding: 4px 8px; font-size: 15px; text-align: center; }
.pc-favbtn { opacity: .45; padding: 4px 6px; }
.pc-favbtn.on { opacity: 1; border-color: #ffd23f; box-shadow: 0 0 0 1px rgba(255,210,63,.4); }
.pc-ev .pc-evv { min-width: 22px; text-align: right; }
.pc-evp { min-width: 46px; text-align: right; font-size: 12px; color: var(--muted); }
.pc-evp.up, .ev-line .up { color: #5fe08a; }
.pc-evp.down, .ev-line .down { color: #ff7b7b; }
.ev-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; font-size: 10px; margin-top: 3px; color: var(--muted); }
.pc-evs .stat.pc-ev { grid-template-columns: 72px 1fr 22px 46px; gap: 6px; font-size: 13px; }

/* ===================== Huevos de bienvenida (15-10-2026) ===================== */
/* (29-10-2026, «El nido grande», maqueta A, la eligió el dueño) A pantalla completa: el granero del Criadero en pixel art
 * (#egg-bg, G.BarnScene) con un nido enorme de paja en el suelo (#egg-nest-back / -front, pintados en egg-pick.js) y los
 * 6 huevos en dos filas (3 atrás más chicos, 3 delante más grandes; egg-pick.js los coloca en px). El cartel «Elige un
 * huevo» cuelga como el de «Criadero», la ayuda va en pergamino y el resultado en un pergamino abajo.
 * Antes: una caja azul (.box) de 900 px con el título, el texto y una cuadrícula de 3×2 nidos cuadrados (6×1 en el
 * celular apaisado) sobre tablones de CSS; la cola de Pikachu asomaba por fuera de la caja, a la derecha. */
body:has(#scr-eggs:not(.hidden)) :is(#topbar, #credits-line, #sound-panel) { display: none !important; }
#scr-eggs.scr { padding: 0; background: #1a0c04; }
#scr-eggs .eggs-box { position: absolute; inset: 0; width: auto; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; background: #2a1408; overflow: hidden; color: #fff3d6; animation: fade .3s ease-out; }
#egg-bg { position: absolute; left: 0; top: 0; z-index: 0; image-rendering: pixelated; }
/* el cartel colgado de dos cuerdas y la ayuda en pergamino */
.egg-top { position: absolute; left: 0; right: 0; top: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; padding: 0 12px; pointer-events: none; }
#scr-eggs .egg-sign { position: relative; margin: 34px 0 0; font-size: 28px; letter-spacing: 1px; line-height: 1.15; }
#scr-eggs .egg-sign::before, #scr-eggs .egg-sign::after { content: ""; position: absolute; top: -34px; width: 4px; height: 38px; background: repeating-linear-gradient(#e2c088 0 3px, #a8742a 3px 6px); box-shadow: 1px 0 0 #5a2a10; }
#scr-eggs .egg-sign::before { left: 18px; } #scr-eggs .egg-sign::after { right: 18px; }
#scr-eggs .egg-sign span { display: block; padding: 3px 30px 5px; color: #3a1f0c; text-shadow: none; background: #f6dca0; border: 4px solid #6b3518; border-radius: 4px;
  box-shadow: inset 0 0 0 3px #e9c37a, 0 5px 0 rgba(0,0,0,.4); }
#scr-eggs #egg-sub { margin: 12px 0 0; padding: 4px 14px 5px; max-width: min(780px, 100%); font-size: 15px; line-height: 1.3; color: #5a3a1a; text-shadow: none;
  background: #f6e7c4; border: 3px solid #6b3518; border-radius: 4px; box-shadow: inset 0 0 0 2px #e9c37a, 0 3px 0 rgba(0,0,0,.35); }
/* el nido y los huevos: todo en el mismo apilado (z): nido · fila de atrás · fila de delante · borde de delante del nido */
#scr-eggs .egg-barn { position: absolute; inset: 0; z-index: 2; display: block; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.egg-nestc { position: absolute; z-index: 1; image-rendering: pixelated; pointer-events: none; }
.egg-nestc.front { z-index: 8; }
.egg-cell { position: absolute; --z: 2; border: 0; padding: 0; background: none; cursor: pointer; pointer-events: none; outline: none; }
.egg-cell.front { --z: 5; }
.egg-glow, .egg-hit { position: absolute; display: block; }
/* zona para tocar, con la forma del huevo (y más grande con el Pokémon fuera) */
.egg-hit { inset: -5% -12% -6%; z-index: calc(var(--z) + 4); pointer-events: auto; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; }
.egg-cell.hatched .egg-hit { inset: -32% -28% -6%; }
.egg-cell:focus-visible .egg-hit { outline: 3px solid #ffd23f; outline-offset: 3px; }
/* resplandor cálido al pasar por encima; dorado (y latiendo) el elegido */
.egg-glow { left: -60%; right: -60%; top: -38%; bottom: -24%; z-index: var(--z); pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(closest-side, rgba(255,226,150,.62), rgba(255,196,96,.24) 55%, rgba(255,196,96,0)); }
.egg-cell:is(:hover, :focus-visible) .egg-glow { opacity: 1; }
.egg-cell.chosen .egg-glow { opacity: 1; background: radial-gradient(closest-side, rgba(255,232,96,.9), rgba(255,200,40,.4) 52%, rgba(255,190,30,0)); animation: egg-gold 1.6s ease-in-out infinite; }
@keyframes egg-gold { 50% { transform: scale(1.08); opacity: .8; } }
.egg-egg, .egg-mon, .egg-half { position: absolute; image-rendering: pixelated; pointer-events: none; }
.egg-egg { left: 0; bottom: 0; width: 100%; height: 100%; z-index: calc(var(--z) + 1); transform-origin: 50% 100%; animation: egg-sway 10s ease-in-out infinite; transition: translate .18s ease-out, filter .2s; }
.egg-cell:is(:hover, :focus-visible) .egg-egg { translate: 0 -6%; filter: drop-shadow(0 0 2px #fff6d0) drop-shadow(0 0 10px rgba(255,214,110,.95)); }
@keyframes egg-sway {
  0%, 9%, 100% { transform: rotate(0); }
  1.5% { transform: rotate(-12deg); } 3.5% { transform: rotate(10deg); }
  5.5% { transform: rotate(-6deg); } 7.5% { transform: rotate(3deg); }
}
.egg-cell.hatching .egg-egg { animation: none; }
.egg-cell.hatching .egg-egg.egg-shake { animation: egg-shake .45s ease-in-out; }
@keyframes egg-shake {
  0%, 100% { transform: rotate(0); } 20% { transform: rotate(calc(var(--shake) * -1)); }
  40% { transform: rotate(var(--shake)); } 60% { transform: rotate(calc(var(--shake) * -.7)); } 80% { transform: rotate(calc(var(--shake) * .5)); }
}
.egg-egg.egg-gone { animation: egg-pop .25s forwards !important; }
@keyframes egg-pop { to { transform: scale(1.4); opacity: 0; } }
.egg-flash { position: absolute; left: 50%; top: 45%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; pointer-events: none; z-index: 10;
  background: radial-gradient(#fff, rgba(255,240,170,.8) 40%, transparent 70%); animation: egg-flash .6s ease-out forwards; }
@keyframes egg-flash { from { transform: scale(1); opacity: 1; } to { transform: scale(12); opacity: 0; } }
.egg-shell { position: absolute; left: 50%; top: 50%; width: 10px; height: 8px; border: 2px solid #2b1d16; pointer-events: none; z-index: 10;
  animation: egg-shell .9s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes egg-shell { to { transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--r)); opacity: 0; } }
/* media cáscara en el nido y el Pokémon de pie dentro (los pies, a la altura de la base del huevo) */
.egg-half { left: 5%; width: 90%; bottom: -2%; z-index: calc(var(--z) + 1); }
.egg-mon { width: 230%; left: -65%; bottom: -17%; z-index: calc(var(--z) + 2); animation: egg-mon .6s cubic-bezier(.2,1.6,.4,1) both; transition: translate .18s ease-out, filter .2s; }
.egg-cell:is(:hover, :focus-visible) .egg-mon { translate: 0 -3%; filter: drop-shadow(0 0 6px rgba(255,226,150,.9)); }
.egg-cell.chosen .egg-mon { filter: drop-shadow(0 0 2px #fff3a0) drop-shadow(0 0 9px rgba(255,204,40,.95)); }
@keyframes egg-mon { from { transform: scale(.2) translateY(30px); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* el nombre, en una etiqueta de pergamino (dorada la del elegido) */
.egg-tag { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); z-index: 10; padding: 1px 9px 3px; font-size: 14px; white-space: nowrap;
  color: #3a1f0c; text-shadow: none; background: #f6e7c4; border: 2px solid #6b3518; border-radius: 3px; box-shadow: inset 0 0 0 1px #fff8e2, 0 2px 0 rgba(0,0,0,.45);
  opacity: 0; transition: opacity .3s; pointer-events: none; }
.egg-cell.hatched .egg-tag { opacity: 1; }
.egg-cell.chosen .egg-tag { background: #ffd23f; border-color: #7a4a00; box-shadow: inset 0 0 0 1px #fff3a0, 0 2px 0 rgba(0,0,0,.45); }
/* el resultado, en el pergamino de abajo (como el del Criadero) */
/* (10-11-2026, el dueño: «rediseñá esa sección, que sea HD, épica») «El Árbol del Alba»: egg-pick.js pinta toda la escena en
 * #egg-bg (pixel art, a toda la caja) y pone la clase .epic. Los huevos son botones transparentes (.egg-spot) encima de cada
 * pedestal, con el nombre del que nace debajo; el título va en dorado sin cartel, y la ayuda y el resultado, en cristal oscuro.
 * Antes: el cartel de madera colgado de dos cuerdas, la ayuda y el resultado en pergamino, y cada huevo con su <canvas> (.egg-cell). */
#scr-eggs .eggs-box.epic { background: #070720; }
#scr-eggs .eggs-box.epic #egg-bg { width: 100%; height: 100%; }
#scr-eggs .eggs-box.epic .egg-sign { margin: 16px 0 0; font-size: 36px; letter-spacing: 2px; }
#scr-eggs .eggs-box.epic .egg-sign::before, #scr-eggs .eggs-box.epic .egg-sign::after { top: 54%; width: 84px; height: 2px; box-shadow: none; background: linear-gradient(90deg, rgba(255,214,122,0), #ffd67a); }
#scr-eggs .eggs-box.epic .egg-sign::before { left: auto; right: 100%; margin-right: 14px; }
#scr-eggs .eggs-box.epic .egg-sign::after { right: auto; left: 100%; margin-left: 14px; transform: scaleX(-1); }
#scr-eggs .eggs-box.epic .egg-sign span { padding: 0; color: #ffe9a8; background: none; border: 0; border-radius: 0; box-shadow: none;
  text-shadow: 0 3px 0 #3a1650, 0 0 2px #000, 0 0 22px rgba(255,170,90,.8); }
#scr-eggs .eggs-box.epic #egg-sub { margin: 4px 0 0; padding: 3px 16px 4px; font-size: 15px; color: #ffe9c8 !important; text-shadow: 0 1px 0 #000;
  background: rgba(10,6,34,.58); border: 1px solid rgba(255,214,122,.42); border-radius: 999px; box-shadow: none; }
.egg-spot { position: absolute; z-index: 6; border: 0; padding: 0; background: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.egg-spot:focus-visible { outline: 2px solid #ffd67a; outline-offset: 2px; border-radius: 14px; }
#scr-eggs .eggs-box.busy .egg-spot { pointer-events: none; }
.egg-tag2 { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 3px; padding: 1px 10px 3px; font-size: 14px; white-space: nowrap; pointer-events: none;
  color: #ffe9c8; text-shadow: 0 1px 0 #000; background: rgba(10,6,34,.74); border: 1px solid rgba(255,214,122,.45); border-radius: 999px; opacity: 0; transition: opacity .3s; }
.egg-spot.hatched .egg-tag2 { opacity: 1; }
.egg-spot.chosen .egg-tag2 { color: #2a1400; text-shadow: none; background: linear-gradient(#ffe27a, #ffb43a); border-color: #fff3a0; box-shadow: 0 0 12px rgba(255,200,60,.8); }
#scr-eggs .eggs-box.epic .egg-res { color: #ffe9c8; background: linear-gradient(rgba(24,12,58,.94), rgba(10,6,34,.94)); border: 2px solid #ffd67a; border-radius: 12px;
  box-shadow: 0 0 0 1px #3a1650, 0 0 26px rgba(255,170,90,.35), 0 6px 0 rgba(0,0,0,.4); }
#scr-eggs .eggs-box.epic .egg-res h3 { color: #ffe9c8; }
#scr-eggs .eggs-box.epic .egg-res .gold { color: #ffd67a; }
#scr-eggs .eggs-box.epic .egg-res .sub { color: #c8b8e8; }
@media (max-height: 520px) {
  #scr-eggs .eggs-box.epic .egg-sign { margin-top: 5px; font-size: 20px; letter-spacing: 1px; }
  #scr-eggs .eggs-box.epic .egg-sign::before, #scr-eggs .eggs-box.epic .egg-sign::after { top: 54%; width: 46px; height: 2px; }
  #scr-eggs .eggs-box.epic .egg-sign::before { left: auto; } #scr-eggs .eggs-box.epic .egg-sign::after { right: auto; }
  #scr-eggs .eggs-box.epic .egg-sign span { padding: 0; border: 0; box-shadow: none; }
  #scr-eggs .eggs-box.epic #egg-sub { margin-top: 1px; padding: 1px 10px 2px; font-size: 11px; border-width: 1px; box-shadow: none; }
  .egg-tag2 { margin-top: 1px; padding: 0 6px 1px; font-size: 11px; }
  #scr-eggs .eggs-box.epic .egg-res { border-width: 2px; box-shadow: 0 0 0 1px #3a1650, 0 0 18px rgba(255,170,90,.3), 0 3px 0 rgba(0,0,0,.4); }
}
@media (min-height: 900px) and (min-width: 1200px) {
  #scr-eggs .eggs-box.epic .egg-sign { margin-top: 26px; font-size: 48px; } #scr-eggs .eggs-box.epic .egg-sign::before, #scr-eggs .eggs-box.epic .egg-sign::after { top: 54%; width: 120px; height: 3px; }
  #scr-eggs .eggs-box.epic #egg-sub { font-size: 19px; } .egg-tag2 { font-size: 18px; padding: 2px 13px 4px; }
}
/* (10-11-2026, más tarde, lo pidió el dueño: «el fondo de granero, acogedor, comfy») «El granero del alba»: egg-pick.js añade .cozy
 * a .epic. Vuelven el cartel de madera colgado de dos cuerdas y los pergaminos (ayuda, nombre de cada Pokémon y resultado), que van
 * con el granero. Antes (.epic a secas, «El Árbol del Alba»): título dorado sin cartel y la ayuda y el resultado en cristal violeta. */
#scr-eggs .eggs-box.epic.cozy { background: #2a1408; }
#scr-eggs .eggs-box.epic.cozy .egg-sign { margin: 30px 0 0; font-size: 30px; letter-spacing: 1px; }
#scr-eggs .eggs-box.epic.cozy .egg-sign::before, #scr-eggs .eggs-box.epic.cozy .egg-sign::after { top: -30px; right: auto; left: 18px; margin: 0; transform: none; width: 4px; height: 34px;
  background: repeating-linear-gradient(#e2c088 0 3px, #a8742a 3px 6px); box-shadow: 1px 0 0 #5a2a10; }
#scr-eggs .eggs-box.epic.cozy .egg-sign::after { left: auto; right: 18px; }
#scr-eggs .eggs-box.epic.cozy .egg-sign span { padding: 3px 30px 5px; color: #3a1f0c; text-shadow: none; background: #f6dca0; border: 4px solid #6b3518; border-radius: 4px;
  box-shadow: inset 0 0 0 3px #e9c37a, 0 5px 0 rgba(0,0,0,.4); }
#scr-eggs .eggs-box.epic.cozy #egg-sub { margin: 10px 0 0; padding: 3px 14px 4px; font-size: 14px; color: #5a3a1a !important; text-shadow: none;
  background: #f6e7c4; border: 3px solid #6b3518; border-radius: 4px; box-shadow: inset 0 0 0 2px #e9c37a, 0 3px 0 rgba(0,0,0,.35); }
.cozy .egg-tag2 { color: #3a1f0c; text-shadow: none; background: #f6e7c4; border: 2px solid #6b3518; border-radius: 4px; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.cozy .egg-spot.chosen .egg-tag2 { border-color: #7a4a00; }
#scr-eggs .eggs-box.epic.cozy .egg-res { color: #3a1f0c; background: #f6dca0; border: 4px solid #6b3518; border-radius: 6px; box-shadow: inset 0 0 0 3px #e9c37a, 0 5px 0 rgba(0,0,0,.4); }
#scr-eggs .eggs-box.epic.cozy .egg-res h3 { color: #3a1f0c; }
#scr-eggs .eggs-box.epic.cozy .egg-res .gold { color: #b05a00; }
#scr-eggs .eggs-box.epic.cozy .egg-res .sub { color: #5a3a1a; }
@media (max-height: 520px) {
  #scr-eggs .eggs-box.epic.cozy .egg-sign { margin-top: 12px; font-size: 17px; }
  #scr-eggs .eggs-box.epic.cozy .egg-sign::before, #scr-eggs .eggs-box.epic.cozy .egg-sign::after { top: -12px; width: 3px; height: 14px; left: 12px; }
  #scr-eggs .eggs-box.epic.cozy .egg-sign::after { left: auto; right: 12px; }
  #scr-eggs .eggs-box.epic.cozy .egg-sign span { padding: 1px 16px 2px; border: 3px solid #6b3518; box-shadow: inset 0 0 0 2px #e9c37a, 0 3px 0 rgba(0,0,0,.4); }
  #scr-eggs .eggs-box.epic.cozy #egg-sub { margin-top: 4px; padding: 1px 10px 2px; font-size: 11px; border-width: 2px; box-shadow: inset 0 0 0 1px #e9c37a; }
  .cozy .egg-tag2 { border-width: 1px; }
  #scr-eggs .eggs-box.epic.cozy .egg-res { border-width: 3px; box-shadow: inset 0 0 0 2px #e9c37a, 0 3px 0 rgba(0,0,0,.4); }
}
@media (min-height: 900px) and (min-width: 1200px) {
  #scr-eggs .eggs-box.epic.cozy .egg-sign { margin-top: 44px; font-size: 40px; } #scr-eggs .eggs-box.epic.cozy .egg-sign::before, #scr-eggs .eggs-box.epic.cozy .egg-sign::after { top: -44px; width: 5px; height: 48px; }
  #scr-eggs .eggs-box.epic.cozy #egg-sub { font-size: 18px; }
}
/* (30-10-2026) Ficha de la PC: los 3 ataques por impronta (pc-ui.js impRow), lila; el legendario con borde dorado y el mega arcoíris. */
.pc-imp { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin: 6px 0 0; font-size: 13px; }
.pc-imp-t { font-weight: 700; }   /* (del color del texto de la ficha: clara en PC, oscura en el celular) */
.pc-imp-mv { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 3px; border-radius: 999px; background: #22306a; border: 2px solid #bfaef5; color: #f4f8ff; }
.pc-imp-mv b { font-weight: 400; white-space: nowrap; }
.pc-imp-mv.leg { border-color: #ffd23f; } .pc-imp-mv.leg b { color: #ffe27a; }
.pc-imp-mv.mega { border-color: transparent; background: linear-gradient(#22306a, #22306a) padding-box, linear-gradient(90deg, #ff7ad9, #b07bff, #6fd3ff) border-box; } .pc-imp-mv.mega b { color: #ffb0ec; }
/* (30-10-2026) Impronta del compañero de bienvenida: la pizarra del Criadero (hatchery-ui.js) en medio del granero (egg-pick.js impronta). */
#scr-eggs .egg-imp { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(ellipse at 50% 45%, rgba(10,16,40,.45), rgba(5,8,20,.75)); }
#scr-eggs .egg-imp .hat-board { position: relative; inset: auto; width: min(340px, calc(100% - 32px)); }
#scr-eggs .egg-imp-tip { margin: 6px 0 0; max-width: min(420px, calc(100% - 32px)); text-align: center; font-size: 14px; color: #f4f8ff; text-shadow: 0 2px 0 #000; }
#scr-eggs .egg-imp .btn { min-width: 200px; }
@media (orientation: landscape) and (max-height: 500px) { #scr-eggs .egg-imp { gap: 12px; } #scr-eggs .egg-imp-tip { font-size: 12px; margin: 4px 0 0; } }
#scr-eggs .egg-res { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 12; width: min(720px, calc(100% - 24px)); margin: 0 auto; display: flex; align-items: center; gap: 16px;
  padding: 10px 12px 10px 18px; text-align: left; color: #3a1f0c; text-shadow: none; background: #f6dca0; border: 4px solid #6b3518; border-radius: 6px;
  box-shadow: inset 0 0 0 3px #e9c37a, 0 5px 0 rgba(0,0,0,.4); animation: egg-res-in .25s ease-out; }
@keyframes egg-res-in { from { translate: 0 12px; opacity: 0; } }
.egg-res-txt { flex: 1; min-width: 0; }
#scr-eggs .egg-res h3 { margin: 0; font-size: 20px; color: #3a1f0c; }
#scr-eggs .egg-res .gold { color: #b05a00; }
#scr-eggs .egg-res .sub { margin: 2px 0 0; font-size: 13px; color: #5a3a1a; }
#scr-eggs #egg-ok { flex: none; font-size: 17px; padding: 10px 22px; color: #fff8e0; text-shadow: 2px 2px 0 #5a2a00; background: linear-gradient(#ffb43a, #e07a12);
  border: 3px solid #5a2a00; border-radius: 6px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 4px 0 #3a1a00; }
@media (prefers-reduced-motion: reduce) { .egg-egg, .egg-cell.chosen .egg-glow { animation: none; } }

/* Pikachu escondido: su cola asoma por detrás del borde de atrás del nido (a la derecha) y se sacude. */
.egg-pika { position: absolute; z-index: 0; border: 0; background: none; padding: 0; cursor: pointer;
  transform-origin: 20% 95%; animation: pika-in .5s ease-out both, pika-wag 1.4s ease-in-out .5s infinite; }
.egg-pika canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.35)); }
.egg-pika.out { animation: pika-out .5s ease-in forwards; }
@keyframes pika-in { from { transform: translateY(55%) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pika-wag { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(10deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(0); } }
@keyframes pika-out { to { transform: translateY(60%) scale(.5); opacity: 0; } }

/* Celular apaisado (poco alto): todo más chico para que entre sin bajar. */
@media (max-height: 520px) {
  #scr-eggs .egg-sign { margin-top: 15px; font-size: 18px; }
  #scr-eggs .egg-sign::before, #scr-eggs .egg-sign::after { top: -15px; height: 18px; width: 3px; }
  #scr-eggs .egg-sign::before { left: 12px; } #scr-eggs .egg-sign::after { right: 12px; }
  #scr-eggs .egg-sign span { padding: 1px 18px 2px; border-width: 3px; box-shadow: inset 0 0 0 2px #e9c37a, 0 3px 0 rgba(0,0,0,.4); }
  #scr-eggs #egg-sub { margin-top: 5px; padding: 1px 10px 2px; font-size: 11px; border-width: 2px; box-shadow: inset 0 0 0 1px #e9c37a, 0 2px 0 rgba(0,0,0,.35); }
  .egg-tag { top: calc(100% + 3px); padding: 0 5px 1px; font-size: 11px; }
  #scr-eggs .egg-res { bottom: 6px; width: fit-content; max-width: calc(100% - 16px); gap: 12px; padding: 4px 6px 4px 12px; border-width: 3px; box-shadow: inset 0 0 0 2px #e9c37a, 0 3px 0 rgba(0,0,0,.4); }
  #scr-eggs .egg-res h3 { font-size: 15px; white-space: nowrap; }
  #scr-eggs .egg-res .sub { display: none; }
  #scr-eggs #egg-ok { font-size: 14px; padding: 5px 14px; }
}
/* Pantallas grandes (1080 de alto): letras más grandes. */
@media (min-height: 900px) and (min-width: 1200px) {
  #scr-eggs .egg-sign { margin-top: 44px; font-size: 36px; } #scr-eggs .egg-sign::before, #scr-eggs .egg-sign::after { top: -44px; height: 48px; }
  #scr-eggs #egg-sub { font-size: 19px; max-width: min(1100px, 100%); }
  .egg-tag { font-size: 18px; padding: 2px 12px 4px; }
  #scr-eggs .egg-res { width: min(860px, calc(100% - 24px)); bottom: 20px; }
  #scr-eggs .egg-res h3 { font-size: 26px; } #scr-eggs .egg-res .sub { font-size: 16px; } #scr-eggs #egg-ok { font-size: 21px; padding: 12px 28px; }
}

/* ===================== Login con estética de Poké Ball (15-10-2026) ===================== */
.login-box { position: relative; overflow: auto; padding-top: 58px;
  background: linear-gradient(#e0403a 0 74px, #1b1b24 74px 82px, var(--box1) 82px) !important;
  border-color: #1b1b24 !important; }
/* La Poké Ball, centrada sobre la franja negra, con un vaivén suave. */
.login-ball { position: absolute; left: 50%; top: 46px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; z-index: 2;
  background: linear-gradient(#ff5a4f 0 46%, #1b1b24 46% 56%, #f4f4f8 56%); border: 4px solid #1b1b24;
  box-shadow: inset -6px -6px 0 rgba(0,0,0,.18), inset 6px 6px 0 rgba(255,255,255,.25), 0 4px 0 rgba(0,0,0,.35);
  animation: ball-wobble 4s ease-in-out infinite; transform-origin: 50% 100%; }
.login-ball i { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border-radius: 50%;
  background: #f4f4f8; border: 4px solid #1b1b24; box-shadow: inset 0 0 0 3px #f4f4f8, inset 0 0 0 5px #c9c9d4; }
@keyframes ball-wobble { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-14deg); } 82% { transform: rotate(12deg); } 88% { transform: rotate(-6deg); } 94% { transform: rotate(3deg); } }
.login-box .logo { margin-top: 30px; }
/* Poké Balls de fondo, muy suaves. */
.login-box::after { content: ''; position: absolute; inset: 82px 0 0; border-radius: 0 0 14px 14px; pointer-events: none; opacity: .07;
  background: radial-gradient(circle at 50% 50%, #fff 0 5px, #000 5px 8px, transparent 8.5px),
              radial-gradient(circle at 50% 50%, transparent 0 15px, #fff 15px 18px, transparent 18.5px);
  background-size: 64px 64px; }
.login-box > * { position: relative; z-index: 1; }
.login-box > .login-ball { position: absolute; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .login-ball { animation: none; } }
.login-box .logo { margin-top: 48px; }

/* Título del menú (15-10-2026): más grande, dorado y fino. */
#scr-menu .menu-left .logo .t1 { font-size: clamp(52px, 8.5vw, 96px); font-weight: 400; letter-spacing: 2px;
  background: linear-gradient(#fff6c4 0%, #ffe066 30%, #f2b72c 62%, #c98a12 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 #5a3a08) drop-shadow(0 0 10px rgba(255,210,63,.35)); }
@media (max-width: 760px) { #scr-menu .menu-left .logo .t1 { font-size: clamp(34px, 9vw, 52px); } }

/* ---------- Intercambios (15-10-2026) ---------- */
#pc-trades { position: relative; }
#pc-trades .tr-badge:empty { display: none; }
#pc-trades .tr-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 9px; background: #e8433f; color: #fff; font-size: 12px; line-height: 1; }
#pc-trades.has { border-color: #ffd23f; }
.trade-ov .tr-box { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.trade-ov .tr-box.wide { width: min(640px, calc(100vw - 32px)); }
.trade-ov h4 { margin: 6px 0 0; }
.tr-card { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px;
  border: 2px solid rgba(244,248,255,.14); background: rgba(13,22,38,.55); }
.tr-card.r4 { border-color: rgba(192,106,255,.55); } .tr-card.r5 { border-color: rgba(255,210,63,.7); }
.tr-card canvas { width: 96px; height: 84px; flex: none; image-rendering: pixelated; }
.tr-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tr-ev { font-size: 12px; opacity: .8; }
.tr-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.tr-friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.tr-friend { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left;
  border: 2px solid rgba(244,248,255,.14); background: rgba(13,22,38,.55); color: inherit; font: inherit; }
.tr-friend:hover, .tr-friend:focus-visible { border-color: #ffd23f; outline: none; }
.tr-friend .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(244,248,255,.3); flex: none; }
.tr-friend .dot.on { background: #4cd964; }
.tr-grid { max-height: 46vh; overflow: auto; }
.tr-swap { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.tr-arrow { align-self: center; font-size: 22px; color: #ffd23f; }
.tr-got { align-self: center; animation: trIn .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes trIn { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tr-got { animation: none; } }
@media (max-width: 560px) { .tr-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- PC en una sola vista (15-10-2026) ---------- */
#scr-pc .box { max-height: calc(100dvh - 48px); display: flex; flex-direction: column; }
#scr-pc .pc-split { flex: 1; min-height: 0; overflow: hidden; align-items: stretch; }
.pc-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.pc-left .pc-boxwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pc-left .pc-grid { flex: 1; min-height: 0; grid-template-rows: repeat(5, minmax(0, 1fr)); }
.pc-left .pc-slot { aspect-ratio: auto; min-height: 0; }
.pc-left .pc-slot canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#scr-pc .pc-detail { min-height: 0; overflow: auto; gap: 6px; }
#scr-pc .pc-detail canvas.stage { width: 150px; height: 128px; flex: none; }
.pc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: none; }
.pc-acts:empty { display: none; }
/* (04-11-2026) + «Que me siga en el pueblo»: ocupa toda la fila de abajo */
.pc-acts .pc-petbtn { grid-column: 1 / -1; min-height: 44px; }
.pc-acts .btn { min-height: 60px; font-size: clamp(15px, 1.6vw, 19px); white-space: nowrap; padding-inline: 10px; }
.pc-tradebtn { background: rgba(13,22,38,.75); border-color: rgba(244,248,255,.35); color: #f4f8ff; }
.pc-tradebtn:hover:not(:disabled) { border-color: #ffd23f; }
@media (min-width: 761px) and (max-height: 760px) {
  #scr-pc .pc-detail canvas.stage { width: 110px; height: 94px; }
  #scr-pc .pc-detail { font-size: 13px; padding: 8px 10px; }
  #scr-pc .pc-detail p.sub { font-size: 12px; }
  #scr-pc .pc-tools { margin: 2px 0 6px; }
  .pc-acts .btn { min-height: 48px; }
}
@media (max-width: 559px) {
  #scr-pc .box { max-height: none; }
  #scr-pc .pc-split { overflow: visible; }
  .pc-left .pc-grid { grid-template-rows: none; }
  .pc-left .pc-slot { aspect-ratio: 8 / 7; }
  .pc-acts .btn { min-height: 48px; font-size: 15px; white-space: normal; }
}

/* Login: la cabecera no crea su propio marco (la Poké Ball se coloca respecto a la caja). */
.login-box > .login-head { position: static; }
.login-box > .login-head > *:not(.login-ball) { position: relative; z-index: 1; }

/* Login en celular horizontal: Poké Ball y logo a la izquierda, formulario a la derecha
 * (con su propio desplazamiento). Con el teclado abierto sólo queda el formulario. */
@media (max-height: 520px) and (min-width: 560px) {
  #scr-login { padding: 8px 12px; }
  #scr-login .login-box { width: min(780px, 100%) !important; height: calc(100dvh - 16px); max-height: 400px;
    display: grid; grid-template-columns: minmax(200px, 38%) 1fr; padding: 0; overflow: hidden;
    background: var(--box1) !important; }
  #scr-login .login-box::after { inset: 0; }
  #scr-login .login-head { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 0 14px 12px; text-align: center; z-index: 1;
    background: linear-gradient(#e0403a 0 110px, #1b1b24 110px 118px, transparent 118px); }
  #scr-login .login-ball { top: 82px; }
  #scr-login .login-head .logo { margin-top: 160px; }
  #scr-login .login-head .logo .t1 { font-size: 30px; }
  #scr-login .login-tag { margin: 6px 0 0; font-size: 12px; }
  #scr-login .login-body { overflow-y: auto; padding: 12px 16px; min-height: 0; border-left: 3px solid #1b1b24; }
  #scr-login .login-body .tabs { margin-bottom: 6px; }
  #scr-login .login-body label { margin-top: 4px; }
  #scr-login .login-body .row { margin-top: 6px !important; }
  #scr-login .login-body .field { padding: 7px 10px; }
}
@media (max-height: 260px) and (min-width: 560px) {
  #scr-login .login-box { grid-template-columns: 1fr; height: calc(100dvh - 8px); }
  #scr-login .login-head { display: none; }
  #scr-login { padding: 4px 8px; }
}

/* ================= Celular horizontal: huevos y login entran sin bajar (15-10-2026) ================= */
@media (max-height: 520px) and (min-width: 560px) {
  /* (29-10-2026) Las reglas de «Elige un huevo» en el celular apaisado pasaron al bloque de los huevos (antes, aquí:
   * la caja con la fila de 6 nidos). */

  #scr-login .login-box { grid-template-columns: minmax(180px, 36%) minmax(0, 1fr); }
  #scr-login .login-body { padding: 10px 14px; }
  #scr-login .login-body .tabs { margin-bottom: 4px; }
  #scr-login .login-body .tab { padding: 5px; }
  #scr-login .login-body label { margin: 2px 0 1px; font-size: 12px; display: block; }
  #scr-login .login-body .field { padding: 6px 10px; font-size: 14px; }
  #scr-login .login-body .err:empty { display: none; }
  #scr-login .login-body .note { margin-top: 4px; }
  #scr-login .login-body .btn { padding: 6px 12px; min-height: 0; }
  #scr-login .login-body .row { margin-top: 5px !important; }
  #scr-login .login-tag { font-size: 11px; }
}

/* Si algo no entra en la pantalla, que se pueda bajar en vez de cortarse arriba. */
.scr { align-items: safe center; }
/* PC en celular horizontal: caja y ficha lado a lado, todo en una vista. */
@media (max-height: 520px) and (min-width: 560px) {
  #scr-pc .box { max-height: calc(100dvh - 56px); padding: 8px 10px; }
  #scr-pc .box h2 { font-size: 18px; }
  #scr-pc .pc-tools { flex-direction: row; align-items: center; gap: 6px; margin: 2px 0 6px; }
  #scr-pc .pc-tools .dex-search { flex: 0 0 150px; }
  #scr-pc .pc-tools .field { padding: 4px 8px; font-size: 12px; }
  #scr-pc .pc-tools .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #scr-pc .pc-tools .chip { padding: 3px 8px; font-size: 11px; white-space: nowrap; }
  #scr-pc .pc-split { grid-template-columns: minmax(0, 1fr) 230px; gap: 8px; }
  #scr-pc .pc-boxwrap { padding: 6px; }
  #scr-pc .pc-boxbar { margin-bottom: 4px; }
  #scr-pc .pc-boxbar .btn { padding: 2px 8px; }
  #scr-pc .pc-boxbar b { padding: 2px; font-size: 12px; }
  #scr-pc .pc-left { gap: 6px; }
  #scr-pc .pc-left .pc-grid { gap: 3px; }
  #scr-pc .pc-acts { gap: 6px; }
  #scr-pc .pc-acts .btn { min-height: 34px; font-size: 13px; padding: 4px 6px; white-space: normal; }
  #scr-pc .pc-detail { padding: 6px 8px; font-size: 12px; }
  #scr-pc .pc-detail canvas.stage { width: 84px; height: 72px; }
  #scr-pc .pc-detail h3 { font-size: 14px; }
  #scr-pc .pc-name .btn { padding: 2px 6px; font-size: 11px; }
  #scr-pc .pc-evs { padding: 4px 6px; }
  #scr-pc .pc-evs .stat.pc-ev { grid-template-columns: 58px 1fr 18px 40px; gap: 4px; font-size: 11px; }
}
@media (max-height: 520px) and (min-width: 560px) {
  #scr-pc .pc-left .pc-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  #scr-pc .box > .row:first-child { padding-top: 0; padding-bottom: 0; }
  #scr-pc .box > .row:first-child .btn { padding: 3px 10px; font-size: 12px; }
}

/* Tienda de Mejoras en celular horizontal: todo en una vista y el botón Comprar siempre a mano. */
@media (max-height: 520px) and (min-width: 560px) {
  #scr-upgrades .mart { margin-top: 0; height: calc(100dvh - 58px); max-height: none; gap: 6px; overflow: hidden; }
  #scr-upgrades .mart-body { flex: 1 1 0; }
  #scr-upgrades .mart-dialog { flex: none; }
  #scr-upgrades .mart-top { padding: 4px 8px; gap: 8px; }
  #scr-upgrades .mart-sign { font-size: 16px; }
  #scr-upgrades .mart-coins, #scr-upgrades .mart-back { padding: 2px 10px; font-size: 13px; }
  #scr-upgrades .mart-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 6px; }
  #scr-upgrades .mart-list { padding: 6px; max-height: none; }
  #scr-upgrades .mart-row { padding-top: 4px; padding-bottom: 4px; font-size: 13px; grid-template-columns: 12px 22px 1fr auto 70px; }
  #scr-upgrades .mart-detail { padding: 8px 10px; gap: 2px; overflow-y: auto; min-height: 0; }
  #scr-upgrades .mart-big { width: 46px; height: 46px; flex: none; }
  #scr-upgrades .mart-big svg, #scr-upgrades .mart-big img { width: 28px; height: 28px; }
  #scr-upgrades .mart-detail h3 { font-size: 16px; margin: 0; }
  #scr-upgrades .mart-unit { font-size: 12px; }
  #scr-upgrades .mart-exp { margin: 2px 0; padding: 2px 6px; }
  #scr-upgrades .mart-now { margin: 2px 0; font-size: 12px; gap: 2px 8px; }
  #scr-upgrades .mart-buy { position: sticky; bottom: 0; font-size: 14px; padding-top: 6px; padding-bottom: 6px; flex: none; }
  #scr-upgrades .mart-dialog { min-height: 0; padding: 4px 10px; }
  #scr-upgrades .mart-dialog canvas { width: 40px; height: 32px; flex-basis: 40px; }
  #scr-upgrades .mart-dialog p { font-size: 12px; line-height: 1.3; }
}

/* ---------------- Intercambios (pantalla del menú, 16-10-2026) ---------------- */
.trx-box { max-width: 980px; }
.trx-empty { text-align: center; padding: 40px 10px; }
.trx-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; font-weight: 700; }
.trx-board { position: relative; padding: 70px 40px; margin: 4px 0 10px; }
/* el circuito metálico (como en el boceto): arriba va de la Poké Ball de la
   izquierda a la flecha que baja a la ficha derecha; abajo, al revés. */
.trx-board::before, .trx-board::after { content: ''; position: absolute; left: 16px; right: 16px; height: 64px; pointer-events: none;
  border: 6px solid #c9d2de; filter: drop-shadow(0 0 1px #1b1528) drop-shadow(0 0 3px rgba(120,160,255,.7)); }
.trx-board::before { top: 22px; border-bottom: 0; border-radius: 4px 4px 0 0; }
.trx-board::after { bottom: 22px; border-top: 0; border-radius: 0 0 4px 4px; }
.trx-arrow { position: absolute; z-index: 2; width: 34px; height: 26px; }
.trx-arrow.tr { right: 2px; top: 74px; }
.trx-arrow.bl { left: 2px; bottom: 74px; transform: rotate(180deg); }
.trx-mid::before { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; z-index: -1;
  border: 16px solid rgba(160,170,190,.28); box-shadow: inset 0 0 0 14px rgba(255,255,255,.05); }
.trx-mid { position: relative; }
.trx-bar { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; width: min(380px, 60%);
  display: flex; flex-direction: column; gap: 2px; padding: 6px 14px; font-size: 13px; letter-spacing: .5px; text-transform: uppercase;
  background: linear-gradient(115deg, #9fc3e4 0 40%, #c9fbff 40% 46%, #aab8ff 46%); color: #fff; text-shadow: 0 1px 0 #1b1528, 1px 0 0 #1b1528, -1px 0 0 #1b1528, 0 -1px 0 #1b1528;
  border: 3px solid #1b1528; outline: 3px solid #c9d2de; border-radius: 3px; }
.trx-bar.top { top: 0; }
.trx-bar.bot { bottom: 0; align-items: flex-end; background: linear-gradient(115deg, #aab8ff 0 54%, #c9fbff 54% 60%, #9fc3e4 60%); }
.trx-bar b { text-transform: none; font-weight: 700; }
.trx-ball { position: absolute; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; background: #f4f8ff;
  border: 3px solid #1b1528; border-radius: 50%; box-shadow: 0 0 0 3px rgba(120,160,255,.5); }
.trx-ball img { width: 28px; height: 28px; image-rendering: pixelated; }
.trx-ball.tl { left: 0; top: 36px; }
.trx-ball.br { right: 0; bottom: 36px; }
.trx-main { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; gap: 8px; }
.trx-mid { display: grid; place-items: center; }
.trx-mid svg { filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.trx-card { background: #1b1528; border: 4px solid #c9d2de; outline: 3px solid #1b1528; border-radius: 4px; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.trx-stage { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; border: 2px solid #1b1528;
  background:
    radial-gradient(ellipse 42% 9% at 50% 86%, rgba(120,255,255,.9), rgba(120,255,255,.25) 60%, transparent 72%),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(0,0,30,.18) 13px 14px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(255,255,255,.07) 27px 28px),
    linear-gradient(160deg, #4f8ee0, #3d55c7 55%, #3646a8); }
.trx-stage canvas { position: relative; z-index: 1; image-rendering: pixelated; }
.trx-corner { position: absolute; top: 6px; right: 6px; min-width: 34px; height: 30px; padding: 0 4px; display: grid; place-items: center;
  background: rgba(200,230,255,.55); border: 2px solid #1b1528; }
.trx-card.r .trx-corner { right: auto; left: 6px; }
.trx-q { font-size: 64px; font-weight: 800; color: rgba(255,255,255,.35); }
.trx-label { min-height: 52px; padding: 6px 10px; font-size: 14px; color: #fff; border: 2px solid #1b1528;
  background: linear-gradient(115deg, #9fc3e4 0 30%, #c9fbff 30% 36%, #aab8ff 36%); text-shadow: 0 1px 0 #1b1528, 1px 0 0 #1b1528, -1px 0 0 #1b1528, 0 -1px 0 #1b1528; }
.trx-card.r .trx-label { text-align: right; background: linear-gradient(115deg, #aab8ff 0 64%, #c9fbff 64% 70%, #9fc3e4 70%); }
.trx-label span { text-transform: uppercase; font-size: 12px; letter-spacing: .5px; }
.trx-label .type, .trx-label .tag-chip { margin-left: 6px; text-shadow: none; vertical-align: 1px; }
.trx-card.empty .trx-label { display: grid; place-items: center; text-align: center; }
.trx-evs { background: rgba(255,255,255,.06); border-radius: 4px; padding: 6px 8px; }
.trx-evh { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 2px; }
.trx-evh small { color: var(--muted); }
.trx-ev { display: grid; grid-template-columns: 74px 1fr 22px 44px; gap: 6px; align-items: center; font-size: 12px; margin: 3px 0; }
.trx-ev .bar { height: 7px; background: rgba(0,0,0,.4); border-radius: 5px; overflow: hidden; }
.trx-ev .bar i { display: block; height: 100%; background: var(--gold); }
.trx-ev b { text-align: right; }
.trx-ev small { text-align: right; color: var(--muted); }
.trx-ev small.up { color: #5fe08a; } .trx-ev small.down { color: #ff7b7b; }
.trx-acts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .trx-board { padding: 62px 8px; }
  .trx-board::before, .trx-board::after, .trx-arrow { display: none; }
  .trx-main { grid-template-columns: 1fr; }
  .trx-mid svg { transform: rotate(90deg); width: 70px; height: 40px; }
  .trx-ball { display: none; }
  .trx-bar { width: 86%; }
}

/* aviso de versión nueva (js/core/updater.js, 16-10-2026) */
#update-banner { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 95; max-width: min(720px, calc(100% - 24px));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; text-align: center;
  padding: 8px 14px; font-size: 14px; color: #fff; background: rgba(27,21,40,.92); border: 2px solid var(--gold); border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45); animation: upd-in .35s ease-out; }
#update-banner b { color: var(--gold); }
#update-banner[data-mode="run"] { top: 8px; font-size: 13px; padding: 6px 12px; opacity: .95; pointer-events: none; }
#update-banner { transition: opacity .6s, visibility .6s; }
#update-banner.gone { opacity: 0; visibility: hidden; }   /* (27-10-2026) en partida se va a los 6 s */
@keyframes upd-in { from { opacity: 0; transform: translate(-50%, -12px); } }
.rk-row .who small b.rk-mon { color: #cfe0ff; font-weight: 700; font-size: 12px; }

/* Mejoras por región (16-10-2026): pestañas de región en la tienda y región en la píldora de monedas */
.mart-sub { font-size: 13px; font-weight: 400; opacity: .85; margin-left: 4px; }
.mart-regions { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 2px 0; }
.mart-reg { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 10px; cursor: pointer;
  background: var(--m-paper); color: var(--m-ink); border: 3px solid var(--m-ink); border-radius: 8px; font: inherit; opacity: .75; }
.mart-reg b { font-size: 13px; }
.mart-reg small { font-size: 11px; display: flex; align-items: center; gap: 3px; }
.mart-reg.on { opacity: 1; box-shadow: 0 0 0 3px var(--gold); }
.mart-reg:hover { opacity: 1; }
.mart-for { margin: 2px 0 6px; font-size: 13px; color: var(--m-ink); opacity: .8; }
.pill-reg { margin-left: 6px; font-size: 11px; opacity: .7; }
/* Perks → Objetos (16-10-2026) */
.it-row > .it-sum { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.it-note { margin: 0 2px 8px; font-size: 13px; }
.it-h { margin: 10px 2px 4px; font-size: 16px; } .it-h small { color: var(--muted); font-weight: 400; }

/* Menú en PC (16-10-2026): más ancho y en dos columnas, para que se vean todas
   las secciones sin desplazar (Jugar ocupa las dos). */
@media (min-width: 1000px) and (min-height: 521px) {
  .menu-right { width: min(640px, 50vw); }
  .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .menu-item.play { grid-column: span 2; }
}

/* Tienda de Mejoras: elegir el Pokémon (por especie) con buscador (16-10-2026) */
.mart-mons { display: flex; gap: 8px; align-items: stretch; padding: 6px 2px 0; min-width: 0; }
.mart-search { flex: 0 0 210px; display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: var(--m-paper); color: var(--m-ink); border: 3px solid var(--m-ink); border-radius: 8px; }
.mart-search img { width: 18px; height: 18px; image-rendering: pixelated; }
.mart-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--m-ink); font: inherit; font-size: 14px; }
.mart-monlist { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.mart-mon { flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 4px; cursor: pointer;
  background: var(--m-paper); color: var(--m-ink); border: 3px solid var(--m-ink); border-radius: 8px; font: inherit; opacity: .8; }
.mart-mon canvas { image-rendering: pixelated; }
.mart-mon span { font-size: 11px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mart-mon small { font-size: 10px; opacity: .7; }
.mart-mon.on { opacity: 1; box-shadow: 0 0 0 3px var(--gold); }
.mart-mon:hover { opacity: 1; }
.mart-none { margin: auto 8px; font-size: 13px; color: #fff; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
@media (max-width: 720px) { .mart-mons { flex-direction: column; } .mart-search { flex: none; height: 34px; } }

/* (16-10-2026) Menú de fondo oculto mientras hay una sección abierta encima. */
#scr-menu.covered .menu-left, #scr-menu.covered .menu-right { visibility: hidden; }
/* Tienda de Mejoras más ancha: regiones, buscador y Pokémon en una sola fila arriba. */
.mart { width: min(1600px, 96vw); height: calc(100vh - 150px); max-height: none; margin-top: 56px; }
.mart-bar { display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.mart-bar .mart-regions { flex: 0 0 auto; padding: 0; align-items: stretch; flex-wrap: nowrap; }
.mart-bar .mart-mons { flex: 1; padding: 0; }
.mart-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.mart-list { gap: 4px; }
.mart-row { font-size: 16px; padding: 8px 10px; }
@media (max-width: 900px) {
  .mart-bar { flex-direction: column; }
  .mart-bar .mart-regions { flex-wrap: wrap; }
}
/* Pokémonedas de cada región, arriba del menú principal (16-10-2026) */
.menu-coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 8px; }
.mc-pill { display: flex; align-items: center; gap: 5px; min-width: 0; font: inherit; color: var(--ink, #222); cursor: pointer;
  background: var(--panel, #f8f6ee); border: 2px solid rgba(0,0,0,.25); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.mc-pill b { font-weight: 700; }
.mc-pill small { margin-left: auto; font-size: 10px; opacity: .65; white-space: nowrap; }
.mc-pill.sel { border-color: var(--gold, #f2c230); box-shadow: 0 0 0 2px var(--gold, #f2c230); }
.mc-pill.locked { opacity: .45; cursor: default; }
.mc-pill .coin { flex: 0 0 auto; }
/* (29-10-2026) Antes: «Ticket violeta diario» (.daily-btn violeta con contador de horas). Ahora #btn-daily abre la recompensa de 7 días. */
.daily-btn { position: relative; }
.daily-btn .dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: #ff5f6d; border: 2px solid #fff; }
.daily-btn.ready { animation: daily-glow 1.4s ease-in-out infinite; }
@keyframes daily-glow { 50% { box-shadow: 0 0 10px 2px #ffd23f; } }
@media (max-height: 520px) { .menu-coins { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); } }

/* Intercambios: amigos para ofrecer (17-10-2026), ver trade-ui.js renderFriends */
.trx-fr { display: grid; gap: 6px; margin: 4px 0 8px; }
.trx-fr:empty { display: none; }
.trx-fr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trx-fr-find { padding: 4px 8px; line-height: 0; }
.trx-fr-find.on { border-color: #ffd23f; }
.trx-fr-q { flex: 1 1 160px; max-width: 260px; padding: 6px 10px; }
.trx-fr-row { display: flex; align-items: center; gap: 6px; }
.trx-fr-list { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.trx-fr-list .tr-friend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trx-fr-arr { flex: none; font-size: 18px; padding: 4px 10px; }
.trx-fr-arr:disabled { opacity: .35; cursor: default; }
@media (max-width: 700px) { .trx-fr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Menú en móviles apaisados (17-10-2026): las monedas de las 9 regiones van
   en una sola fila que se desliza de lado, y Jugar queda siempre arriba del
   menú aunque la lista se desplace (antes podía quedar oculto). */
@media (max-height: 520px) {
  .menu-coins { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 0; padding-bottom: 2px; }
  .menu-coins::-webkit-scrollbar { display: none; }
  .menu-coins > * { flex: 0 0 auto; }
  #scr-menu .menu-item.play { position: sticky; top: 0; z-index: 1; background: var(--m-paper); }
}

/* Portátiles con la ventana del navegador baja (17-10-2026): Intercambios y el
   Criadero también empiezan debajo de la barra de arriba (antes la barra tapaba
   el título y Volver), y el tablero del intercambio se compacta para que entre. */
@media (min-height: 521px) {
  #scr-trades, #scr-hatchery, #scr-stages, #scr-mod { padding-top: 66px; }
}
@media (min-height: 521px) and (max-height: 820px) {
  .trx-box { padding: 14px 20px; }
  .trx-box h2 { font-size: 22px; }
  .trx-board { padding: 54px 36px; margin: 0 0 6px; }
  .trx-board::before { top: 16px; } .trx-board::after { bottom: 16px; }
  .trx-ball.tl { top: 30px; } .trx-ball.br { bottom: 30px; }
  .trx-arrow.tr { top: 64px; } .trx-arrow.bl { bottom: 64px; }
  .trx-stage { height: 110px; }
  .trx-stage canvas { height: 106px !important; width: auto !important; }
  .trx-label { min-height: 44px; padding: 4px 10px; }
  .trx-ev { margin: 1px 0; }
  .trx-mid::before { width: 120px; height: 120px; }
}
@media (min-height: 521px) and (max-height: 700px) {
  .trx-box #trx-tabs { margin: 2px 0 4px !important; }
  .trx-board { padding: 48px 36px; }
  .trx-stage { height: 100px; }
  .trx-stage canvas { height: 96px !important; width: auto !important; }
  .trx-fr { margin: 0 0 4px; gap: 4px; }
  .trx-fr-head { font-size: 15px; }
  .trx-fr-find { padding: 2px 6px; }
  .trx-acts .btn { padding-top: 6px; padding-bottom: 6px; }
  .trx-ev { font-size: 11px; margin: 0; }
  .trx-evs { padding: 4px 8px; }
  .trx-card { gap: 4px; }
}

/* ---------- gacha: Estrella fugaz (ui/starpull.js, 17-10-2026) ---------- */
#pull-fx.sp-quake { animation: sp-shk .9s linear; }
@keyframes sp-shk { 0%,100% { transform: none; } 10% { transform: translate(-7px,3px); } 20% { transform: translate(6px,-4px); } 30% { transform: translate(-5px,-3px); } 40% { transform: translate(6px,2px); } 55% { transform: translate(-3px,4px); } 70% { transform: translate(3px,-2px); } 85% { transform: translate(-2px,1px); } }
.sp-sky { position: fixed; inset: 0; z-index: 5; pointer-events: none; image-rendering: pixelated; }
.sp-dim { position: fixed; inset: 0; z-index: 2; background: #000; opacity: 0; transition: opacity .35s; pointer-events: none; }
.sp-dim.on { opacity: .68; }
.sp-rays { position: fixed; left: 50%; top: 50%; width: min(150vw, 1400px); aspect-ratio: 1; translate: -50% -50%; z-index: 3; opacity: 0; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(var(--ray, rgba(255,210,63,.45)) 0 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 14%, transparent 55%); mask: radial-gradient(circle, #000 14%, transparent 55%); transition: opacity .4s; }
.sp-rays.go { opacity: 1; animation: sp-spin 7s linear infinite; }
@keyframes sp-spin { to { rotate: 360deg; } }
.sp-stage { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.sp-flash { position: fixed; inset: 0; z-index: 7; background: #fff; opacity: 0; pointer-events: none; }
.sp-ban { position: fixed; left: 0; right: 0; top: 9%; z-index: 6; text-align: center; font-weight: 800; pointer-events: none; opacity: 0;
  font-size: clamp(26px, 5vw, 52px); letter-spacing: 2px; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
.sp-ban.go { animation: sp-ban 2.8s ease-out forwards; }
@keyframes sp-ban { 0% { opacity: 0; transform: scale(2.4); } 12% { opacity: 1; transform: scale(.92); } 18% { transform: scale(1.04); } 24%, 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-10px); } }
.sp-ban.gold { color: #ffd23f; text-shadow: 0 0 18px rgba(255,200,40,.9), 0 3px 0 #7a4a00; }
.sp-ban.epic { color: #e3c8ff; text-shadow: 0 0 14px rgba(181,123,255,.9), 0 3px 0 #3a1470; }
.sp-ban.rain { background: linear-gradient(90deg, #ff6b9a, #ffd23f, #6dff9c, #58d8ff, #b57bff, #ff6b9a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  animation: sp-ban 2.8s ease-out forwards, sp-rain 1.2s linear infinite; }
@keyframes sp-rain { to { background-position: 200% 0; } }
.pcard.sp-card { position: relative; z-index: 1; visibility: hidden; }
.pcard.sp-card:not(.sp-shown) { animation: none; box-shadow: none; }
.pcard.sp-landed { visibility: visible; }
.pcard.sp-up { z-index: 3; }
.pcard.sp-shown { animation: sp-pop .32s cubic-bezier(.2,1.7,.4,1) both; }
.pcard.sp-shown.r5, .pcard.sp-shown.shiny { animation: sp-pop .32s cubic-bezier(.2,1.7,.4,1) both, legend 1.2s ease-in-out infinite alternate; }
@keyframes sp-pop { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-back { position: absolute; inset: -3px; border-radius: 12px; z-index: 2;
  background: repeating-linear-gradient(45deg, #1b2556 0 8px, #16204a 8px 16px); border: 3px solid var(--rc);
  box-shadow: 0 0 16px var(--rc), inset 0 0 18px color-mix(in srgb, var(--rc) 35%, transparent); animation: sp-land .26s ease-out; }
@keyframes sp-land { from { transform: scale(1.5); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-back.pulse { animation: sp-pulse .45s ease-in-out infinite alternate; }
@keyframes sp-pulse { to { box-shadow: 0 0 50px var(--rc), 0 0 100px var(--rc), inset 0 0 36px var(--rc); transform: scale(1.06); } }
.sp-back.flip { animation: sp-flip .13s ease-in forwards; }
@keyframes sp-flip { to { transform: perspective(500px) rotateY(90deg); } }
.pcard.sp-best { box-shadow: 0 0 34px var(--rc), 0 0 70px var(--rc); }
.pcard.sp-best::after, .pcard.sp-big::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 45%, transparent 60%); background-size: 260% 100%; animation: sp-foil 1.8s linear infinite; }
.pcard.shiny.sp-best::after, .pcard.shiny.sp-big::after { background: linear-gradient(115deg, transparent 20%, rgba(255,107,154,.45) 32%, rgba(255,210,63,.45) 40%, rgba(109,255,156,.45) 48%, rgba(88,216,255,.45) 56%, rgba(181,123,255,.45) 64%, transparent 76%); background-size: 260% 100%; }
@keyframes sp-foil { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.pcard.sp-big { position: fixed; left: 50%; top: 50%; z-index: 4; visibility: visible; margin: 0;
  transform: translate(-50%, -50%) scale(1.9); animation: sp-bigin .5s cubic-bezier(.2,1.6,.4,1) both; background: linear-gradient(180deg, #23306a, #121838); }
@keyframes sp-bigin { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1.9); opacity: 1; } }
@media (max-height: 520px) { .pcard.sp-big { transform: translate(-50%, -50%) scale(1.5); } @keyframes sp-bigin { to { transform: translate(-50%, -50%) scale(1.5); opacity: 1; } } }
@media (prefers-reduced-motion: reduce) { .sp-rays.go, .sp-ban.go, #pull-fx.sp-quake, .sp-back.pulse { animation: none; } .sp-ban.go { opacity: 1; } }

/* ---------- gacha: Jackpot (ui/jackpotpull.js, 17-10-2026) ---------- */
.jp { position: relative; z-index: 3; width: min(560px, 92vw); display: grid; gap: 22px; flex-shrink: 0; }
.jp.ten { width: min(640px, 94vw); }
.jp-top { position: relative; padding: 0 6%; }
.jp-lights { position: absolute; inset: -18px 0; pointer-events: none; }
.jp-lights i { position: absolute; width: 14px; height: 14px; border-radius: 50%; translate: -50% -50%; background: #6b4a20; transition: background .08s, box-shadow .08s; }
.jp-lights i.on { background: #ffe9a0; box-shadow: 0 0 12px #ffd23f, 0 0 22px rgba(255,210,63,.6); }
.jp-box { position: relative; display: grid; gap: 14px; padding: 16px; border-radius: 16px;
  background: linear-gradient(180deg, #d63d47, #8e1f2a); border: 6px solid #ffd23f; box-shadow: 0 0 0 3px #7a4a00, 0 18px 50px rgba(0,0,0,.6), inset 0 -8px 0 rgba(0,0,0,.2); }
.jp-marq { text-align: center; font-weight: 800; font-size: clamp(16px, 3vw, 24px); letter-spacing: 3px; padding: 7px 4px; border-radius: 8px;
  background: #ffe9a0; color: #2a0f14; text-shadow: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.jp-marq.hot { animation: jp-hot .18s steps(2) infinite; }
@keyframes jp-hot { 50% { background: #ff4a3d; color: #fff; } }
.jp-marq.rain { background: linear-gradient(90deg, #ff6b9a, #ffd23f, #6dff9c, #58d8ff, #b57bff, #ff6b9a); background-size: 200% 100%; animation: sp-rain .8s linear infinite; color: #1b1528; }
.jp-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.jp-reel { position: relative; height: 120px; overflow: hidden; border-radius: 8px; background: #f4efe2; border: 4px solid #1b1528;
  box-shadow: inset 0 10px 14px -8px rgba(0,0,0,.35), inset 0 -10px 14px -8px rgba(0,0,0,.35); }
.jp.ten .jp-reel { height: 96px; }
.jp-strip { position: absolute; left: 0; right: 0; top: 0; display: grid; will-change: transform; }
.jp-strip > div { height: var(--cell); display: grid; place-items: center; }
.jp-strip img, .jp-strip svg { width: auto; height: 62%; max-width: 80%; image-rendering: pixelated; }
.jp-tray { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.jp-slot { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; border: 2px dashed rgba(244,248,255,.18); }
.jp-mini { position: absolute; inset: -2px; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #23306a, #121838); border: 2px solid var(--rc); box-shadow: 0 0 12px var(--rc); animation: sp-pop .3s cubic-bezier(.2,1.7,.4,1) both; }
.jp-mini canvas { width: 92%; height: auto; image-rendering: pixelated; }
.jp-mini.shiny::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 20%, rgba(255,107,154,.45) 32%, rgba(255,210,63,.45) 40%, rgba(109,255,156,.45) 48%, rgba(88,216,255,.45) 56%, rgba(181,123,255,.45) 64%, transparent 76%); background-size: 260% 100%; animation: sp-foil 1.8s linear infinite; }
#pull-fx.jp-siren { box-shadow: inset 0 0 140px rgba(255,40,40,.8); }
.pcard.jp-card { animation: sp-pop .35s cubic-bezier(.2,1.7,.4,1) both; }
.pcard.jp-card.r5, .pcard.jp-card.shiny { animation: sp-pop .35s cubic-bezier(.2,1.7,.4,1) both, legend 1.2s ease-in-out infinite alternate; }
.pcard.jp-card.sp-best { position: relative; }
@media (max-height: 520px) {
  .jp { gap: 12px; } .jp-box { padding: 10px; gap: 8px; border-width: 4px; }
  .jp-reel, .jp.ten .jp-reel { height: 64px; } .jp-tray { gap: 4px; }
}
/* Shiny en los rodillos: Poké Ball con reflejo holográfico (máscara con la propia bola). */
.jp-holo { position: relative; display: grid; place-items: center; height: 62%; aspect-ratio: 1; }
.jp-holo img { width: 100%; height: 100%; image-rendering: pixelated; }
.jp-strip .jp-holo img { height: 100%; max-width: none; }
.jp-holo::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: hard-light; opacity: .85;
  background: linear-gradient(125deg, #ff6b9a, #ffd23f, #6dff9c, #58d8ff, #b57bff, #ff6b9a, #ffd23f); background-size: 300% 300%;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; animation: jp-holo 1.6s linear infinite; }
.jp-holo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.9) 48%, transparent 60%); background-size: 250% 100%;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; animation: sp-foil 1.3s linear infinite; }
@keyframes jp-holo { to { background-position: 300% 300%; } }

/* Intercambio: elegir qué das, con la misma vista que la PC (17-10-2026). */
.trade-ov .tr-box.pcpick { width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
/* (27-10-2026) filtros del selector de intercambio, como los de la PC */
.pp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 2px; }
.pp-tools .pp-chips { flex: 1 1 auto; margin: 0; }
.pp-tools select { width: auto; flex: none; }
.pp-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; min-height: 0; }
.pp-left { display: flex; flex-direction: column; min-width: 0; }
.pp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pp-grid .pc-slot { aspect-ratio: 8 / 7; min-height: 0; }
.pp-grid .pc-slot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-detail { gap: 6px; min-width: 0; }
.pp-detail canvas.stage { width: 150px; height: 128px; flex: none; }
.pp-give { min-height: 48px; font-size: 17px; margin-top: 4px; }
@media (max-height: 760px) { .pp-detail canvas.stage { width: 110px; height: 94px; } .pp-detail { font-size: 13px; } }
@media (max-width: 700px) { .pp-split { grid-template-columns: 1fr; } }
@media (max-height: 520px) { .pp-split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .pp-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } .pp-detail canvas.stage { width: 80px; height: 68px; } }

/* ---------- Estrellas de la PC (fusión de repetidos, 17-10-2026) ---------- */
.pc-stars { display: inline-flex; gap: 1px; vertical-align: -1px; }
.pc-stars i { font-style: normal; color: rgba(244,248,255,.22); line-height: 1; text-shadow: none; }
.pc-stars i.on { color: #ffd23f; text-shadow: 0 0 6px rgba(255,210,63,.7), 0 1px 0 #7a4a00; }
.pc-starline { margin: 1px 0 3px; }
/* (29-10-2026) EVs de cada uno al marcar varios para reciclar */
.pc-slotev { position: absolute; left: 0; right: 0; top: 2px; text-align: center; font-size: 9px; line-height: 1; color: #d8e0f0; text-shadow: 0 1px 0 #000, 0 0 3px #000; pointer-events: none; }
.pc-picklist .pc-fod small + small { color: #ffd23f; }
.pc-slotstars { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-size: 10px; line-height: 1; letter-spacing: -1px; color: #ffd23f; text-shadow: 0 0 4px rgba(255,210,63,.8), 0 1px 0 #000; pointer-events: none; }
.pc-starbox { background: rgba(255,210,63,.07); border: 2px solid rgba(255,210,63,.35); border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; }
.pc-starbox .row b { display: flex; align-items: center; gap: 6px; }
.pc-starnote { margin: 0; font-size: 12.5px; }
.pc-starbtn { min-height: 40px; }
.pc-fodder { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-fod { width: 56px; border-radius: 8px; border: 2px solid rgba(244,248,255,.18); background: rgba(13,22,38,.55); display: grid; justify-items: center; padding: 2px 0; }
.pc-fod canvas { width: 48px; height: 42px; image-rendering: pixelated; }
.pc-fod small { font-size: 9.5px; color: var(--muted); }
#pc-detail { position: relative; }
.pc-fuse { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.pc-fuse-mon { position: absolute; width: 56px; height: 49px; image-rendering: pixelated; translate: 0 0; transform: translate(-50%, -50%); filter: drop-shadow(0 0 6px #ffd23f); }
.pc-fuse-flash { position: absolute; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff;
  box-shadow: 0 0 40px 20px #ffd23f; animation: pcflash .7s ease-out forwards; }
@keyframes pcflash { to { width: 260px; height: 260px; opacity: 0; } }
.pc-fuse-star { position: absolute; transform: translate(-50%, -50%); font-size: 64px; color: #ffd23f; text-shadow: 0 0 20px #ffd23f, 0 3px 0 #7a4a00; animation: pcstar 1.1s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes pcstar { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-90deg); opacity: 0; } 40% { transform: translate(-50%, -50%) scale(1.3) rotate(0); opacity: 1; } 75% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -110%) scale(.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pc-fuse-flash, .pc-fuse-star { animation-duration: .01s; } }
/* Estrellas: absorber energía (17-10-2026) y las 3 estrellas holográficas, como un sticker. */
.pc-fuse-ring { position: absolute; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid #fff;
  box-shadow: 0 0 14px #fff; animation: pcring .45s ease-out forwards; }
@keyframes pcring { to { width: 170px; height: 170px; opacity: 0; } }
.pc-upbtn small.pc-upcost { margin-left: 6px; font-size: .75em; opacity: .75; }
.pc-upbtn .pc-stars i { font-size: 15px; }
.pc-stars.max i.on, .pc-slotstars.max {
  background: linear-gradient(110deg, #ff6b9a, #ffd23f, #6dff9c, #58d8ff, #b57bff, #ff6b9a, #ffd23f); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 4px rgba(255,255,255,.55)) drop-shadow(0 1px 0 rgba(0,0,0,.6));
  animation: pc-holo 2.2s linear infinite; }
@keyframes pc-holo { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .pc-stars.max i.on, .pc-slotstars.max { animation: none; } }
.pc-fuse-sil { position: absolute; opacity: 0; image-rendering: pixelated; filter: brightness(0) invert(1) drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #fff); }
/* Reciclar (17-10-2026) */
.pc-recbtn small.pc-upcost { display: inline-flex; align-items: center; gap: 3px; }
.pc-recbtn small .coin, .pc-recask .coin, .pc-recgot .coin { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
.pc-recask { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 10px; background: rgba(208,56,56,.12); border: 2px solid rgba(255,120,120,.45); font-size: 14px; }
.pc-recask img { vertical-align: -3px; }
.pc-upbtn { min-height: 40px; }
.pc-recgot { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-weight: 800; font-size: 20px; color: #ffd23f;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(255,210,63,.7); animation: pcgot 1.1s ease-out forwards; }
.pc-recgot img { vertical-align: -3px; }
@keyframes pcgot { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
/* Pokémon mejorados: en gris para intercambiar o reciclar (17-10-2026). */
.pc-slot.is-off canvas { filter: grayscale(1) brightness(.6); }
.pc-slot.is-off { border-style: dashed; cursor: not-allowed; }
.btn.is-off { filter: grayscale(1); opacity: .5; cursor: not-allowed; }
.toast { z-index: 90; }

/* Tienda de Mejoras (17-10-2026): la lista y la ficha se desplazan dentro de su
   ventana (antes se salían y el cuadro de diálogo de abajo las tapaba) y el
   diálogo tiene alto fijo: al pasar el ratón por la lista cambiaba de 1 a 2
   líneas, todo saltaba de tamaño y la lista se movía sola. */
#scr-upgrades .mart-body { overflow: hidden; grid-template-rows: minmax(0, 1fr); }
#scr-upgrades .mart-list, #scr-upgrades .mart-detail { min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
#scr-upgrades .mart-dialog { flex: none; height: 92px; min-height: 0; overflow: hidden; }
#scr-upgrades .mart-dialog p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-height: 521px) { #scr-upgrades .mart { margin-top: 0; height: calc(100dvh - 112px); max-height: none; } }
@media (max-height: 760px) and (min-height: 521px) { #scr-upgrades .mart-dialog { height: 70px; } #scr-upgrades .mart-dialog p { font-size: 14px; -webkit-line-clamp: 2; } }
/* Ranking por zonas y cabeza de Arceus (17-10-2026) */
.rk-zones { margin-top: 2px; }
.rk-zones .chip { min-width: 0; }
.rk-zone-title { display: flex; align-items: baseline; gap: 10px; margin: 6px 2px 6px; font-weight: 800; font-size: 26px; letter-spacing: 2px;
  color: var(--gold); text-transform: uppercase; text-shadow: 2px 2px 0 #2a1500; }
.rk-zone-title small { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); text-shadow: none; font-weight: 700; }
.rk-row .time { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.rk-arc { width: 40px; height: 34px; border-radius: 6px; background: radial-gradient(circle at 50% 60%, rgba(255,210,94,.35), rgba(255,210,94,0) 70%);
  filter: drop-shadow(0 0 4px rgba(255,210,94,.6)); }
@media (max-width: 700px) { .rk-zone-title { font-size: 20px; } .rk-arc { width: 32px; height: 28px; } }

/* Moderación > Regalos (17-10-2026) */
.mod-gift { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.mod-gift label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #c9d4ea; }
.mod-gift input, .mod-gift select { background: rgba(0,0,0,.35); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 6px 8px; font: inherit; }
.mod-gift input[type=number] { width: 70px; }
.gf-row { flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mod-gift .gf-chk { flex-direction: row; align-items: center; padding-bottom: 6px; }
.gf-pack { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; }
.gf-item { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.3); border-radius: 8px; padding: 4px 6px 4px 8px; font-size: 12px; }

/* (10-11-2026, el dueño: «reformá la parte de moderación, que sea más cómodo») Las secciones, en una lista a la izquierda, y el
 * contenido a todo el alto (antes: 9 pestañas en fila y la lista con 60 % del alto). Regalos, en tarjetas con título (antes: filas
 * sueltas con los campos pegados al texto). Campos más grandes para escribir cómodo. */
#scr-mod.scr > .box { display: grid; grid-template-columns: 184px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px 14px; }
#scr-mod.scr > .box > .row.between { grid-column: 1 / -1; }
#scr-mod.scr #mod-tabs { grid-column: 1; grid-row: 2; flex-direction: column; gap: 6px; margin: 0; min-height: 0; overflow-y: auto; align-self: stretch; }
#scr-mod.scr #mod-tabs .tab { flex: none; text-align: left; padding: 9px 12px; }
#scr-mod.scr #mod-list { grid-column: 2; grid-row: 2; max-height: none !important; min-height: 0; overflow-y: auto; padding-right: 6px; }
#scr-mod .mod-gift { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 10px; align-items: start; }
#scr-mod .mod-gift > :not(.gf-row), #scr-mod .mod-gift > .gf-row:has(#gf-send) { grid-column: 1 / -1; }
#scr-mod .mod-gift > .gf-row { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgb(var(--lic-wash) / .42); border: 2px solid rgb(var(--lic-ink-rgb) / .22); align-items: flex-end; }
#scr-mod .mod-gift > .gf-row > .sub { flex-basis: 100%; margin: 0; font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--lic-ink) !important; }
#scr-mod .mod-gift > label:first-of-type { max-width: 380px; font-size: 14px; font-weight: 700; }
#scr-mod .mod-gift > label:first-of-type input { font-size: 18px; padding: 8px 10px; }
#scr-mod .mod-gift label { font-size: 13px; color: var(--lic-ink); }
#scr-mod .mod-gift input, #scr-mod .mod-gift select { min-height: 34px; font-size: 14px; }
#scr-mod .mod-gift input[type=number] { width: 78px; }
#scr-mod .mod-gift input:not([type=number]):not([type=checkbox]) { min-width: 150px; }
#scr-mod .mod-gift input[type=checkbox] { min-height: 0; width: 18px; height: 18px; }
#scr-mod .mod-gift > .gf-pack { padding: 8px 10px; border-radius: 10px; border: 2px dashed rgb(var(--lic-ink-rgb) / .3); }
@media (max-height: 520px) {
  #scr-mod.scr > .box { grid-template-columns: 128px minmax(0, 1fr); gap: 6px 10px; }
  #scr-mod.scr #mod-tabs { gap: 3px; } #scr-mod.scr #mod-tabs .tab { padding: 4px 8px; font-size: 12px; }
  #scr-mod .mod-gift { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* Cartel de una vez: ranking reiniciado (17-10-2026) */
.rk-reset { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(5,10,25,.7); padding: 16px; }
.rk-reset .box { max-width: 420px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.rk-reset p { margin: 0; line-height: 1.45; }

/* Tienda: Máquina del tiempo (17-10-2026) */
.mart-row.mart-tm .mart-name { color: #7fd7ff; }
.mart-tm-sw { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-top: 8px; cursor: pointer; }
.mart-tm-sw input { width: 22px; height: 22px; accent-color: #4fd1ff; }
.mod-gift input.gf-ev { width: 64px; }

/* Mapa en pruebas (18-10-2026) */
.stg-card { position: relative; }
.stg-testing { position: absolute; top: 6px; left: 14px; color: #ff4d4d; font-weight: 800; font-size: 15px; letter-spacing: 1px; transform: rotate(-6deg); text-shadow: 0 2px 0 rgba(0,0,0,.6); pointer-events: none; }
.stg-test { color: #ff7a6b; font-size: 12px; font-weight: 700; margin: 4px 0 2px; }
.stg-testing.stg-new { color: #5fe08a; font-size: 12px; top: -9px; left: 12px; transform: rotate(-3deg); background: #12301f; border: 1px solid #5fe08a; padding: 1px 7px; border-radius: 6px; }

/* =====================================================================
 * CELULAR EN HORIZONTAL (18-10-2026) — iPhone y Android acostados.
 * El juego se juega sólo en horizontal (en vertical sale #rotate). Aquí la
 * altura es lo que falta (360-430 px), así que:
 *   - la barra de arriba es una tira compacta de 32 px,
 *   - cada pantalla usa todo el alto debajo de ella y respeta la muesca
 *     (env(safe-area-inset-*)),
 *   - lo que no entra se desplaza DENTRO de su panel, nunca se corta.
 * Va al final para mandar sobre los arreglos sueltos de más arriba.
 * ===================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --tb-h: 32px;                                              /* alto de la barra de arriba */
    --sa-l: max(10px, env(safe-area-inset-left));
    --sa-r: max(10px, env(safe-area-inset-right));
    --sa-b: max(6px, env(safe-area-inset-bottom));
    --top-gap: calc(var(--tb-h) + 12px);                       /* dónde empiezan las pantallas */
  }

  /* ---------- barra de arriba ---------- */
  .topbar { top: 6px; right: var(--sa-r); gap: 5px; max-width: calc(100vw - var(--sa-l) - var(--sa-r)); }
  .topbar .pill, .topbar .btn { height: var(--tb-h); min-height: 0; padding: 0 9px; font-size: 12px; gap: 5px; border-width: 2px; box-shadow: none; }
  .topbar .btn img, .topbar .btn svg, .topbar .btn canvas, .topbar .pill img, .topbar .pill svg { width: 18px; height: 18px; }
  .topbar .btn > span, .news-btn span, .daily-btn span, #btn-support span { display: none; }
  #user-pill { max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #btn-logout { padding: 0 8px; }

  /* ---------- pantallas con panel ---------- */
  .scr { padding: 6px var(--sa-r) var(--sa-b) var(--sa-l); }
  .scr.dim:not(#scr-login):not(#scr-eggs):not(#scr-levelup):not(#scr-bond):not(#scr-item):not(#scr-pause):not(#scr-over):not(#scr-result):not(#scr-test):not(#scr-starters) {
    padding-top: var(--top-gap); align-items: stretch;
  }
  .box { padding: 10px 14px; border-radius: 10px; }
  .box h2 { font-size: 19px; margin-bottom: 4px; }
  .box h3 { font-size: 15px; }
  .btn.small { padding: 4px 12px; font-size: 13px; }
  /* Sólo las secciones del menú van a lo ancho; pausa, cartas y fin de partida conservan su caja centrada. */
  :is(#scr-dex, #scr-items, #scr-goals, #scr-stages, #scr-gacha, #scr-rank, #scr-friends, #scr-trades, #scr-pc, #scr-mod, #scr-lobby, #scr-upgrades, #scr-profile) > :is(.box, .mart) {
    width: 100% !important; max-width: none; max-height: 100%;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* ---------- Tienda de Mejoras ---------- */
  #scr-upgrades .mart { height: 100%; margin: 0; gap: 6px; overflow: hidden; }
  #scr-upgrades .mart-top { padding: 3px 6px; gap: 8px; border-radius: 8px; }
  #scr-upgrades .mart-sign { font-size: 15px; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #scr-upgrades .mart-ball { width: 20px; height: 20px; flex-basis: 20px; border-width: 2px; }
  #scr-upgrades .mart-coins, #scr-upgrades .mart-back { padding: 2px 10px; font-size: 13px; border-width: 2px; }
  /* Región, buscador y Pokémon en UNA fila de 40 px (antes tres filas). */
  #scr-upgrades .mart-bar { flex-direction: row; gap: 6px; flex: none; height: 40px; }
  #scr-upgrades .mart-bar .mart-regions { flex: 0 1 auto; max-width: 34%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  #scr-upgrades .mart-reg { flex-direction: row; gap: 4px; padding: 0 8px; border-width: 2px; white-space: nowrap; }
  #scr-upgrades .mart-reg b { font-size: 12px; }
  #scr-upgrades .mart-bar .mart-mons { flex-direction: row; gap: 6px; min-width: 0; }
  #scr-upgrades .mart-search { flex: 0 0 130px; height: auto; padding: 0 6px; border-width: 2px; }
  #scr-upgrades .mart-search input { font-size: 12px; }
  #scr-upgrades .mart-monlist { gap: 4px; padding-bottom: 0; scrollbar-width: none; }
  #scr-upgrades .mart-mon { width: auto; flex-direction: row; gap: 4px; padding: 0 8px 0 2px; border-width: 2px; }
  #scr-upgrades .mart-mon canvas { width: 30px !important; height: 30px !important; }
  #scr-upgrades .mart-mon small { display: none; }
  /* Lista y ficha: todo el alto que queda. */
  #scr-upgrades .mart-body { flex: 1 1 0; min-height: 0; gap: 6px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  #scr-upgrades .mart-win { border-width: 3px; border-radius: 10px; }
  #scr-upgrades .mart-list { padding: 4px; gap: 2px; }
  #scr-upgrades .mart-row { padding: 5px 6px; font-size: 13px; gap: 6px; grid-template-columns: 10px 22px minmax(0, 1fr) auto 64px; }
  #scr-upgrades .mart-lv { font-size: 11px; }
  #scr-upgrades .mart-detail { padding: 6px 10px; gap: 2px; }
  #scr-upgrades .mart-big { width: 40px; height: 40px; }
  #scr-upgrades .mart-detail h3 { font-size: 15px; }
  #scr-upgrades .mart-now { font-size: 12px; }
  #scr-upgrades .mart-buy { position: sticky; bottom: 0; font-size: 14px; padding: 7px 6px; flex: none; }
  /* El diálogo de abajo, una sola línea. */
  #scr-upgrades .mart-dialog { height: 30px; padding: 0 10px; gap: 8px; }
  #scr-upgrades .mart-dialog canvas { width: 30px; height: 24px; flex-basis: 30px; }
  #scr-upgrades .mart-dialog p { font-size: 12px; line-height: 1.2; -webkit-line-clamp: 1; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* ---------- piezas comunes ---------- */
  /* Paneles a pantalla completa: cabecera arriba y la lista principal se desplaza. */
  #scr-dex > .box, #scr-items > .box, #scr-goals > .box, #scr-stages > .box, #scr-gacha > .box, #scr-rank > .box,
  #scr-friends > .box, #scr-trades > .box, #scr-pc > .box, #scr-mod > .box, #scr-lobby > .box {
    height: 100%; display: flex; flex-direction: column; overflow: hidden; padding: 8px 12px;
  }
  .scr.dim > .box > .row.between:first-child { flex: none; margin: 0 0 4px; gap: 8px; }
  .scr.dim > .box > .row.between:first-child h2 { margin: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabs { margin-bottom: 6px; gap: 4px; flex: none; }
  .tab { padding: 4px 6px; font-size: 14px; }
  .chips, .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: none; gap: 4px; }
  .chips::-webkit-scrollbar, .filters::-webkit-scrollbar, .gen-tabs::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; white-space: nowrap; padding: 2px 9px; font-size: 12px; }
  .field { padding: 5px 9px; font-size: 13px; }
  .dex-search { margin-bottom: 4px; flex: none; }
  .dex-search .field { padding: 5px 9px; font-size: 13px; }
  /* Pestañas de región en una línea: nombre y cuenta al lado. */
  .gen-tabs { flex: none; margin-top: 0; padding: 2px 1px 4px; gap: 4px; scrollbar-width: none; }
  .gen-tab { flex-direction: row; gap: 5px; align-items: baseline; padding: 3px 9px; border-radius: 7px; }
  .gen-tab b { font-size: 13px; }
  .gen-tab small { font-size: 10px; }
  /* Aviso de logro: pequeño, en la esquina de abajo a la izquierda (no tapa botones). */
  .ach-pop { top: auto; bottom: var(--sa-b); left: var(--sa-l); transform: none; padding: 5px 10px; gap: 6px; font-size: 12px; max-width: 46vw; }
  .ach-pop canvas, .ach-pop img, .ach-pop svg { width: 24px; height: 24px; }
  .toast { font-size: 13px; padding: 6px 12px; }

  /* ---------- Pokédex ---------- */
  #scr-dex .split { flex: 1; min-height: 0; margin-top: 0 !important; grid-template-columns: minmax(0, 1fr) minmax(180px, 30%); gap: 8px; }
  #scr-dex .split > div:first-child { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 4px 6px; min-height: 0; }
  #scr-dex .dex-search { margin: 0; }
  #scr-dex .filters { margin: 0; align-self: center; }
  #scr-dex .grid { grid-column: 1 / -1; min-height: 0; max-height: none; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; align-content: start; }
  #scr-dex .cell { padding: 2px; }
  #scr-dex .cell canvas { width: 60px; height: 52px; }

  /* ---------- Perks ---------- */
  #scr-items #it-tabs { margin: 0 0 4px !important; }
  #scr-items .box > .dex-search, #scr-items .box > #it-types { margin-bottom: 4px; }
  #scr-items .it-list { flex: 1; min-height: 0; overflow-y: auto; max-height: none; }
  #scr-items .it-row > .it-sum { padding: 6px 8px; gap: 8px; }

  /* ---------- Misiones / Logros / Perfil ---------- */
  #scr-goals .goals-body { flex: 1; min-height: 0; max-height: none; }

  /* ---------- Gacha: ruleta a la izquierda, probabilidades a la derecha ---------- */
  #scr-gacha .split { flex: 1; min-height: 0; margin-top: 2px !important; grid-template-columns: minmax(0, 1fr) 210px; gap: 8px; }
  #scr-gacha .split > div:first-child { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
  #scr-gacha .banner { padding: 8px 12px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #scr-gacha .banner h3 { font-size: 17px; margin: 0; }
  #scr-gacha #banner-desc { font-size: 12px; margin: 2px 0 !important; }
  #scr-gacha .banner .feat { flex: 1 1 60px; height: auto; min-height: 56px; margin: 4px -6px -8px; }
  #scr-gacha .banner .feat canvas { max-height: 100%; width: auto; }
  #scr-gacha .split > div:first-child > .row { margin-top: 6px !important; gap: 6px; flex: none; }
  #scr-gacha .split > div:first-child > .row .btn { padding: 7px 8px; font-size: 14px; }
  #scr-gacha .tickets-line, #scr-gacha #gacha-pity { margin: 4px 0 0; font-size: 11px; flex: none; }
  #scr-gacha .rates { overflow-y: auto; min-height: 0; padding: 6px 10px; font-size: 12px; }

  /* ---------- Elige mapa ---------- */
  #scr-stages .sub { margin: 0 0 4px; font-size: 12px; flex: none; }
  #scr-stages .stg-list { flex: 1; min-height: 0; max-height: none; margin: 0; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
  #scr-stages .stg-card { padding: 6px 44px 6px 6px; gap: 8px; border-radius: 9px; }
  #scr-stages .stg-prev { flex-basis: 76px; height: 57px; }
  #scr-stages .stg-reg { font-size: 10px; }
  #scr-stages .stg-nm { font-size: 14px; }
  #scr-stages .stg-ds { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #scr-stages .stg-meta { display: none; }
  #scr-stages .stg-boss { width: 36px; height: 36px; }

  /* ---------- Criadero ---------- */
  #scr-hatchery .barn { width: 100%; height: 100%; max-height: none; display: flex; flex-direction: column; border-width: 4px; overflow: hidden; }
  #scr-hatchery .barn-beam { padding: 3px 10px; flex: none; }
  #hat-lantern { width: 20px; height: 28px; margin-bottom: -14px; }
  #scr-hatchery .barn-sign { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); z-index: 2; }
  #scr-hatchery .barn-sign::before, #scr-hatchery .barn-sign::after { display: none; }
  #scr-hatchery .barn-sign span { margin: 0; padding: 1px 16px 2px; font-size: 18px; border-width: 3px; box-shadow: 0 3px 0 rgba(36,20,10,.6); }
  #scr-hatchery .barn-inner { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 8px 12px 6px; }
  #scr-hatchery .hat-stage { min-height: 0; overflow-y: auto; justify-content: center; }
  #scr-hatchery .hat-crate { width: auto; height: min(150px, 38vh); max-width: 100%; }
  #scr-hatchery .hat-stage h3 { margin: 4px 0 0; font-size: 16px; }
  #scr-hatchery .hat-stage p { margin: 2px 0 4px; font-size: 12px; }
  #scr-hatchery .hat-stage .btn { padding: 6px 16px; }
  #scr-hatchery .hat-odds { font-size: 11px; }
  #scr-hatchery .hat-shelf { min-height: 0; overflow-y: auto; padding: 8px 10px; }
  #scr-hatchery .hat-shelf h3 { margin: 0 0 6px; font-size: 15px; }
  #scr-hatchery .hat-nests { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
  #scr-hatchery .hat-empty { font-size: 13px; }
  #scr-hatchery .barn-hay { height: 8px; flex: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* ---------- Fin de partida: los 4 datos en una fila y "Volver al menú" siempre a la vista ---------- */
  #scr-over > .box { width: min(720px, 100%) !important; padding: 8px 14px 0; }
  #scr-over h2 { font-size: 18px; margin: 0 0 4px; }
  #scr-over .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 4px 0 6px; }
  #scr-over .stats > div { padding: 4px 8px; }
  #scr-over .stats > div > span:first-child { font-size: 10px; }
  #scr-over .stats b { font-size: 17px; }
  #scr-over .rs-table { font-size: 12px; }
  /* (28-10-2026) Los botones van juntos en #scr-over .over-acts (Compartir + Volver al menú), que se queda abajo (el estilo base está al final
     del archivo); antes sólo #btn-again: #btn-again { position: sticky; bottom: 0; width: 100%; margin: 4px 0 8px; box-shadow: 0 -8px 14px rgba(10,20,50,.7); } */
  #scr-over .over-acts { margin: 4px 0 8px; padding: 6px 0 0; box-shadow: 0 -8px 14px rgba(10,20,50,.7); background: #1a3170; }
  #scr-over .over-acts .btn { padding: 8px 10px; }
  #scr-over .over-acts #btn-again { flex: 1 1 0; }
  #scr-over .over-acts #btn-share { flex: 0 0 auto; padding-inline: 16px; }

  /* ---------- Pausa, cartas de nivel, objeto y vínculo ---------- */
  #scr-pause > .box, #scr-levelup > .box, #scr-item > .box, #scr-bond > .box { padding: 8px 14px; }
  #scr-pause h2, #scr-levelup h2, #scr-item h2, #scr-bond h2 { font-size: 18px; margin: 0 0 2px; }
}
/* Celular horizontal con la barra del navegador a la vista (unos 300 px de alto). */
@media (orientation: landscape) and (max-height: 340px) {
  :root { --tb-h: 28px; }
  .topbar { top: 4px; }
  .scr.dim:not(#scr-login) { padding-top: calc(var(--tb-h) + 8px) !important; }
  /* Menú: sin subtítulos, filas más bajas; Jugar sigue arriba. */
  .menu-right { padding-top: calc(var(--tb-h) + 8px); gap: 4px; }
  .menu-item { padding: 3px 6px; font-size: 13px; }
  .menu-item small { display: none; }
  .menu-item.play { font-size: 17px; }
  .menu-item.play small { display: none; }
  #menu-partner { height: min(30vh, 84px); }
  .menu-left .logo .t1 { font-size: 24px; }
  /* PC: la caja se desplaza en vez de aplastar las casillas. */
  #scr-pc .pc-left { min-height: 0; overflow-y: auto; }
  #scr-pc .pc-left .pc-grid { grid-template-rows: none; grid-auto-rows: 34px; }
  #scr-pc .pc-left .pc-slot { aspect-ratio: auto; }
  #scr-pc .pc-tools { margin: 0 0 4px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* ---------- Intercambios ----------
   * Antes los amigos, las pestañas y el circuito decorativo ocupaban toda la
   * pantalla y el tablero (los dos Pokémon y los botones) quedaba fuera. Ahora:
   * amigos en una fila que se desliza, "De/Para" en una línea, las dos fichas
   * en horizontal (sprite a la izquierda, datos y EVs a la derecha) y los
   * botones pegados abajo. El circuito, las Poké Balls y las flechas, fuera. */
  #scr-trades > .box { gap: 0; }
  #scr-trades #trx-tabs { margin: 0 0 4px !important; }
  #scr-trades .trx-fr { flex: none; display: flex; align-items: center; gap: 6px; margin: 0 0 4px; min-width: 0; }
  #scr-trades .trx-fr-head { flex: none; flex-wrap: nowrap; gap: 4px; font-size: 13px; white-space: nowrap; }
  #scr-trades .trx-fr-find { padding: 1px 5px; }
  #scr-trades .trx-fr-find img, #scr-trades .trx-fr-find svg { width: 16px; height: 16px; }
  #scr-trades .trx-fr-q { flex: 0 1 140px; padding: 3px 8px; font-size: 12px; }
  #scr-trades .trx-fr-row { flex: 1; min-width: 0; gap: 4px; }
  #scr-trades .trx-fr-list { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  #scr-trades .trx-fr-list .tr-friend { flex: 0 0 auto; padding: 3px 9px; font-size: 12px; max-width: 150px; }
  #scr-trades .trx-fr-arr { padding: 1px 8px; font-size: 14px; }
  #trx-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
  #scr-trades .trx-empty { padding: 16px 10px; }
  #scr-trades .trx-nav { margin: 0 0 4px; gap: 8px; font-size: 13px; flex: none; }
  #scr-trades .trx-nav .btn { padding: 0 10px; }
  #scr-trades .trx-board { padding: 0; margin: 0 0 4px; flex: none; }
  #scr-trades .trx-board::before, #scr-trades .trx-board::after, #scr-trades .trx-ball, #scr-trades .trx-arrow,
  #scr-trades .trx-bar.bot, #scr-trades .trx-mid::before { display: none; }
  #scr-trades .trx-bar.top { position: static; transform: none; width: auto; margin: 0 0 4px; padding: 2px 10px; display: flex; gap: 16px; font-size: 12px; }
  #scr-trades .trx-main { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 6px; align-items: stretch; }
  #scr-trades .trx-mid svg { width: 54px; height: 27px; }
  #scr-trades .trx-mid { align-self: center; }
  #scr-trades .trx-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 4px 6px; padding: 4px; border-width: 3px; outline-width: 2px; }
  #scr-trades .trx-stage { grid-row: 1 / 3; height: auto; min-height: 84px; }
  #scr-trades .trx-stage canvas { width: 86px !important; height: auto !important; }
  #scr-trades .trx-corner { top: 2px; right: 2px; min-width: 0; height: 20px; }
  #scr-trades .trx-card.r .trx-corner { left: 2px; }
  #scr-trades .trx-q { font-size: 40px; }
  #scr-trades .trx-label { min-height: 0; padding: 2px 6px; font-size: 12px; }
  #scr-trades .trx-label span { font-size: 10px; }
  #scr-trades .trx-card.empty .trx-label { grid-row: 1 / 3; }
  #scr-trades .trx-evs { padding: 2px 6px; }
  #scr-trades .trx-evh { font-size: 11px; margin: 0; }
  #scr-trades .trx-ev { grid-template-columns: 44px 1fr 18px 36px; gap: 4px; font-size: 10px; margin: 1px 0; }
  #scr-trades .trx-ev .bar { height: 5px; }
  #scr-trades .trx-acts { position: sticky; bottom: 0; z-index: 3; gap: 6px; flex: none; margin-top: auto; padding: 4px 0 2px;
    background: linear-gradient(transparent, var(--box2) 30%); }
  #scr-trades .trx-acts .btn { padding: 6px 12px; font-size: 13px; }
  #scr-trades .tr-msg { margin: 2px 0 0; font-size: 12px; }
  #scr-trades .tr-msg:empty { display: none; }

  /* Ventanas encima de Intercambios: "¿Qué das a cambio?" (como la PC) y ofrecer a un amigo. */
  .trade-ov > .box:has(.pp-split) { width: 100% !important; height: 100%; display: flex; flex-direction: column; overflow: hidden; padding: 8px 12px; }
  .trade-ov .row.between { flex: none; margin: 0 0 4px; }
  .trade-ov h3 { margin: 0; font-size: 16px; }
  .trade-ov .dex-search { flex: none; margin-bottom: 4px; }
  .trade-ov .pp-split { flex: 1; min-height: 0; gap: 8px; }
  .trade-ov .pp-left { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
  .trade-ov .pc-boxbar { margin-bottom: 4px; }
  .trade-ov .pc-boxbar .btn { padding: 0 8px; }
  .trade-ov .pp-grid { gap: 3px; }
  .trade-ov .pp-detail { min-height: 0; overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; }
  .trade-ov .pp-detail canvas.stage { width: 76px; height: 64px; margin: 0 auto; }
  .trade-ov .pp-detail .pc-evs { padding: 4px 6px; }
  .trade-ov .pp-detail .stat.pc-ev { grid-template-columns: 54px 1fr 18px 40px; gap: 4px; font-size: 11px; }
  .trade-ov .pp-give { position: sticky; bottom: 0; margin-top: auto; padding: 6px 8px; box-shadow: 0 -6px 10px rgba(5,10,25,.6); }
  .trade-ov .tr-box { max-height: 100%; padding: 8px 12px; gap: 6px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #scr-trades .trx-bar.top { flex-direction: row; justify-content: center; gap: 20px; padding: 1px 10px; font-size: 11px; border-width: 2px; outline-width: 2px; }
  #scr-trades .trx-label > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #scr-trades .trx-label .type, #scr-trades .trx-label .tag-chip { font-size: 9px; padding: 0 5px; margin-left: 4px; }
  #scr-trades .trx-evh small { display: none; }
  #scr-trades .trx-card { align-content: start; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* ---------- Partida en grupo: Amigos ---------- */
  #scr-friends #fr-me { margin: 0 0 4px; font-size: 12px; flex: none; }
  #scr-friends #fr-add { flex: none; gap: 6px; margin: 0; }
  #scr-friends #fr-add .field { padding: 5px 9px; }
  #scr-friends #fr-add .btn { padding: 5px 12px; font-size: 13px; }
  #scr-friends #fr-msg { margin: 2px 0; font-size: 12px; flex: none; }
  #scr-friends #fr-msg:empty { display: none; }
  #scr-friends .fr-list { flex: 1; min-height: 0; max-height: none; margin-top: 4px; gap: 4px; }
  .fr-row { padding: 4px 8px; gap: 8px; }
  .fr-row b { font-size: 14px; }
  .fr-row .st { font-size: 11px; }
  .fr-row .btn.small { padding: 2px 9px; font-size: 12px; }

  /* ---------- Sala: jugadores a la izquierda; invitar, mapa y Empezar a la derecha ----------
   * Antes las 4 tarjetas ocupaban todo y "Empezar partida" quedaba fuera de la pantalla. */
  #scr-lobby > .box { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; column-gap: 12px; }
  #scr-lobby > .box > .row.between:first-child { grid-column: 1 / -1; grid-row: 1; }
  #scr-lobby > .box > .row.between:first-child .btn { padding: 3px 10px; font-size: 12px; }
  #lobby-sub { grid-column: 1 / -1; grid-row: 2; margin: 0 0 6px; font-size: 12px; }
  #lobby-members { grid-column: 1; grid-row: 3 / 7; margin: 0; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; }
  .lob-card { padding: 4px; gap: 0; min-height: 0; overflow: hidden; justify-content: center; }
  .lob-card canvas { width: auto !important; height: min(78px, 17vh) !important; }
  .lob-card b { font-size: 13px; }
  .lob-card small, .lob-card .conn { font-size: 10px; }
  #lobby-inv-title { grid-column: 2; grid-row: 3; margin: 0 0 4px !important; font-size: 14px; }
  #lobby-invite { grid-column: 2; grid-row: 4; max-height: none; min-height: 0; }
  #lobby-invite.hidden + .row, #lobby-inv-title.hidden ~ .row { grid-row: 4 / 6; align-self: end; }
  #scr-lobby > .box > .row:not(.between) { grid-column: 2; grid-row: 5; margin-top: 6px !important; gap: 6px; flex-wrap: wrap; }
  #lobby-stage, #lobby-link-btn { padding: 6px 10px; font-size: 13px; }
  #lobby-link-in { padding: 4px 8px; font-size: 12px; flex-basis: 110px; }   /* (28-10-2026) invitar por link, en la misma fila que el mapa */
  #lobby-start { padding: 7px 10px; font-size: 14px; }
  #lobby-note { grid-column: 2; grid-row: 6; margin: 4px 0 0; font-size: 11px; }
  #scr-login .login-sala { margin: 0 0 4px; padding: 4px 8px; font-size: 12px; }
  #sala-pop .box { gap: 6px; }
  #sala-pop p { font-size: 13px; }

  /* Invitación recibida (cartel de abajo) */
  #invite-pop { bottom: var(--sa-b); right: var(--sa-r); max-width: min(420px, 60vw); padding: 6px 10px; }
  #invite-pop .btn { padding: 5px 10px; font-size: 13px; }
}

/* =====================================================================
 * Ranking con podio (19-10-2026): filtros arriba, los 3 primeros en un podio
 * a la izquierda y el resto de la tabla a la derecha (ver ranking-ui.js).
 * ===================================================================== */
#scr-rank > .box { width: min(1120px, 100%); height: calc(100dvh - 90px); display: flex; flex-direction: column; overflow: hidden; }
.rk-bar { flex: none; display: flex; flex-direction: column; gap: 4px; }
.rk-bar .gen-tabs, .rk-bar .filters { margin: 0; }
.rk-bar .rk-tools { margin: 0; }
.rk-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); gap: 12px; margin-top: 8px; }
.rk-side { display: flex; flex-direction: column; min-height: 0; gap: 6px; }
.rk-side .rk-list { flex: 1; min-height: 0; max-height: none; }
.rk-side .rk-me { margin-top: 0; flex: none; }
.rk-podium { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 8px 12px 0; border-radius: 10px;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255,210,63,.18), transparent 70%), rgba(0,0,0,.22); }
.rk-podium .rk-zone-title { margin: 0 0 4px; }
.rk-steps { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; }
.rk-step { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.rk-step-who { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; position: relative; }
.rk-step-who b { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-step-time { display: flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 700; }
.rk-step-time .rk-arc { width: 30px; height: 26px; }
.rk-step-who .rk-rep { position: absolute; right: -6px; top: -6px; }
.rk-step-mons { display: flex; justify-content: center; align-items: flex-end; min-height: 56px; margin-top: 2px; }
.rk-block { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 6px; margin-top: 2px;
  border-radius: 8px 8px 0 0; color: #1b1b24; text-shadow: none; box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.45); }
.rk-block span { display: flex; align-items: center; gap: 4px; font-size: 28px; font-weight: 800; }
.rk-block span img { width: 18px; height: 18px; }
.rk-block small { font-size: 11px; font-weight: 700; opacity: .75; }
.rk-step.s1 .rk-block { height: 150px; background: linear-gradient(#ffe27a, #c9971a); }
.rk-step.s2 .rk-block { height: 112px; background: linear-gradient(#f2f6fc, #9aa8bf); }
.rk-step.s3 .rk-block { height: 84px; background: linear-gradient(#f3b98a, #a5612a); }
.rk-step.s1 .rk-step-mons { min-height: 66px; }
.rk-step.mine .rk-block { outline: 3px solid #7ee07a; outline-offset: -3px; }
.rk-step.mine .rk-step-who b { color: #a9f0a6; }
.rk-step.empty { opacity: .45; }
@media (max-width: 760px) and (min-height: 521px) { .rk-main { grid-template-columns: minmax(0, 1fr); } .rk-podium { min-height: 260px; } }

/* Celular en horizontal: los filtros en UNA fila que se desliza y el podio más bajo. */
@media (orientation: landscape) and (max-height: 500px) {
  #scr-rank > .box { width: 100% !important; height: 100%; }
  .rk-bar { flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .rk-bar::-webkit-scrollbar { display: none; }
  .rk-bar > *, .rk-bar .filters, .rk-bar .gen-tabs { flex: none; flex-wrap: nowrap; padding: 0; }
  .rk-bar .gen-tab { padding: 2px 8px; }
  .rk-bar .rk-tools { gap: 6px; flex-wrap: nowrap; }
  .rk-bar .rk-tools .field { width: 130px; padding: 3px 8px; font-size: 12px; }
  .rk-main { grid-template-columns: 290px minmax(0, 1fr); gap: 8px; margin-top: 4px; }
  .rk-podium { padding: 4px 8px 0; }
  .rk-podium .rk-zone-title { font-size: 17px; }
  .rk-step-who b { font-size: 11px; }
  .rk-step-time { font-size: 13px; }
  .rk-step-time .rk-arc { width: 22px; height: 19px; }
  .rk-step-mons { min-height: 38px; }
  .rk-step-mons canvas { height: 40px !important; width: auto !important; }
  .rk-step.s1 .rk-step-mons { min-height: 44px; }
  .rk-step.s1 .rk-step-mons canvas { height: 48px !important; }
  .rk-block span { font-size: 20px; }
  .rk-block small { font-size: 9px; }
  .rk-step.s1 .rk-block { height: min(96px, 26vh); }
  .rk-step.s2 .rk-block { height: min(70px, 19vh); }
  .rk-step.s3 .rk-block { height: min(50px, 14vh); }
  .rk-row { grid-template-columns: 34px auto minmax(0, 1fr) auto 18px; gap: 6px; padding: 2px 8px; }
  .rk-row .pos { font-size: 14px; }
  .rk-row .mons canvas { height: 30px !important; width: auto !important; }
  .rk-row .who b { font-size: 13px; }
  .rk-row .who small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rk-row .time { font-size: 15px; gap: 4px; }
  .rk-row .rk-arc { width: 22px; height: 19px; }
  .rk-side .rk-me { padding: 4px 8px; font-size: 12px; }
}
/* Podio: en pantallas altas crece con la ventana (antes quedaba chico y con hueco arriba). */
@media (min-height: 521px) {
  .rk-step.s1 .rk-block { height: clamp(150px, 28vh, 280px); }
  .rk-step.s2 .rk-block { height: clamp(112px, 21vh, 210px); }
  .rk-step.s3 .rk-block { height: clamp(84px, 15vh, 150px); }
  .rk-step-mons canvas { height: clamp(56px, 7vh, 84px) !important; width: auto !important; }
}
/* Celular con la barra del navegador a la vista (~300 px): podio más bajo. */
@media (orientation: landscape) and (max-height: 340px) {
  .rk-podium .rk-zone-title { font-size: 14px; }
  .rk-podium .rk-zone-title small { display: none; }
  .rk-step-mons, .rk-step.s1 .rk-step-mons { min-height: 30px; }
  .rk-step-mons canvas, .rk-step.s1 .rk-step-mons canvas { height: 30px !important; }
  .rk-block small { display: none; }
  .rk-block span { font-size: 16px; }
  .rk-step.s1 .rk-block { height: 42px; }
  .rk-step.s2 .rk-block { height: 30px; }
  .rk-step.s3 .rk-block { height: 22px; }
}

/* Podio en grupo (19-10-2026): se ven los nombres de todos los jugadores, uno
   por renglón; con 3 o 4 jugadores, los Pokémon más chicos y en dos filas para
   que no se salgan del escalón. En la lista, los nombres del grupo bajan de renglón. */
.rk-step.team .rk-step-who b { display: flex; flex-direction: column; align-items: center; white-space: nowrap; overflow: visible;
  font-size: 13px; line-height: 1.25; }
.rk-step.team .rk-step-who b a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rk-step.team .rk-step-time { font-size: 18px; }
.rk-step.team .rk-step-who .rk-rep { top: -10px; }
.rk-row.team .who b { white-space: normal; overflow: visible; }
.rk-step-mons { max-width: 100%; }
.rk-step.n2 .rk-step-mons canvas { width: 50% !important; max-width: 64px; height: auto !important; }
.rk-step.n3 .rk-step-mons, .rk-step.n4 .rk-step-mons { flex-wrap: wrap; max-width: 116px; }
.rk-step.n3 .rk-step-mons canvas, .rk-step.n4 .rk-step-mons canvas { width: 50% !important; max-width: 56px; height: auto !important; }
@media (orientation: landscape) and (max-height: 500px) {
  .rk-step.team .rk-step-who b { font-size: 10px; line-height: 1.2; }
  .rk-step.team .rk-step-time { font-size: 12px; }
  .rk-step.n2 .rk-step-mons canvas { max-width: 44px; }
  .rk-step.n3 .rk-step-mons, .rk-step.n4 .rk-step-mons { flex-wrap: nowrap; max-width: 100%; }
  .rk-step.n3 .rk-step-mons canvas, .rk-step.n4 .rk-step-mons canvas { width: 25% !important; max-width: 36px; }
  .rk-row.team .who b { font-size: 11px; line-height: 1.2; }
}
@media (orientation: landscape) and (max-height: 340px) {
  .rk-step.team .rk-step-who b { font-size: 9px; line-height: 1.1; }
  .rk-step.n3 .rk-step-mons, .rk-step.n4 .rk-step-mons { display: none; }   /* no entran: quedan los nombres */
  .rk-row.team .who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rk-step.n2 .rk-step-mons canvas { max-width: 30px; }
  .rk-step.n3 .rk-step-mons canvas, .rk-step.n4 .rk-step-mons canvas { max-width: 26px; }
}
@media (min-height: 521px) {
  .rk-step.n3 .rk-step-mons, .rk-step.n4 .rk-step-mons { max-width: 140px; }
  .rk-step.n3 .rk-step-mons canvas, .rk-step.n4 .rk-step-mons canvas { max-width: 68px; }
}

/* Pasiva que evoluciona un ataque que llevas (19-10-2026): carta con luz dorada. */
.card.pevo { border-color: var(--gold); background: linear-gradient(90deg, rgba(255,210,63,.16), rgba(255,210,63,.03));
  animation: pevoGlow 1.6s ease-in-out infinite; }
.card.pevo .evo-for { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--gold); font-weight: 700; font-size: 13px; }
@keyframes pevoGlow {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(255,210,63,.45), inset 0 0 6px rgba(255,210,63,.15); }
  50% { box-shadow: 0 0 18px 5px rgba(255,210,63,.75), inset 0 0 10px rgba(255,210,63,.3); }
}
@media (prefers-reduced-motion: reduce) { .card.pevo { animation: none; box-shadow: 0 0 12px 3px rgba(255,210,63,.6); } }
@media (orientation: landscape) and (max-height: 500px) { .card.pevo .evo-for { font-size: 10px; margin-top: 1px; } }

/* PC: reciclar varios a la vez (19-10-2026). */
.pc-multibtn.on { border-color: var(--gold); color: var(--gold); }
.pc-slot.pick { border-color: #ff6b6b; box-shadow: 0 0 0 2px rgba(255,107,107,.4); background: rgba(255,107,107,.14); }
.pc-slot.nopick { opacity: .4; }
.pc-check { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ff6b6b; color: #fff;
  font-size: 12px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.pc-picklist { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pc-picklist .pc-fod { cursor: pointer; background: rgba(0,0,0,.25); border: 1px solid rgba(244,248,255,.14); border-radius: 8px; color: inherit; padding: 2px 4px; }
.pc-picklist .pc-fod small { display: block; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.pc-picktot { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.25); }

/* (28-10-2026, lo pidió un jugador) Cartel de «Reciclar repetidos»: casillas por rareza, shiny y totales. En celular apaisado, en dos columnas. */
.pc-recdlg { width: min(460px, 100%); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.pc-recdlg .rd-left, .pc-recdlg .rd-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pc-recdlg h3 { margin: 0; }
.pc-recdlg .sub { margin: 0; font-size: 13px; line-height: 1.35; }
.rd-short { gap: 8px; flex-wrap: wrap; }
.rd-list { display: flex; flex-direction: column; gap: 5px; }
.rd-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: rgba(0,0,0,.25); border: 2px solid transparent; cursor: pointer; min-height: 38px; }
.rd-row:has(input:checked) { border-color: var(--rc, var(--gold)); background: rgba(255,255,255,.07); }
.rd-row.off { opacity: .45; cursor: default; }
.rd-row input { width: 20px; height: 20px; accent-color: var(--rc, var(--gold)); flex: none; margin: 0; }
.rd-row .rd-name { flex: 1; min-width: 0; color: var(--rc, inherit); font-weight: 700; }
.rd-row .rd-n { font-size: 16px; }
.rd-shiny { --rc: var(--gold); margin-top: 3px; }
.rd-tot .rd-sum { margin-top: 2px; }
.rd-btns { gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.rd-btns .btn { flex: 1 1 120px; }
@media (orientation: landscape) and (max-height: 500px) {
  #pc-recdlg { padding: 6px max(10px, var(--sa-r, 0px)) 6px max(10px, var(--sa-l, 0px)); align-items: center; }
  .pc-recdlg { width: min(780px, 100%); flex-direction: row; gap: 14px; padding: 10px 14px; }
  .pc-recdlg .rd-left { flex: 1 1 55%; gap: 5px; }
  .pc-recdlg .rd-right { flex: 1 1 45%; gap: 8px; }
  .pc-recdlg .rd-btns { margin-top: auto; }
  .pc-recdlg .rd-sub, .pc-recdlg .rd-note { font-size: 11px; }
  .pc-recdlg h3 { font-size: 16px; }
  .rd-list { gap: 3px; }
  .rd-row { padding: 3px 8px; min-height: 30px; }
  .rd-row .rd-n { font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 500px) { .pc-multibtn { font-size: 11px; padding: 4px 8px; white-space: nowrap; } }

/* Quien apoya el proyecto (19-10-2026, supporters.js): nombre dorado, título y cartel en el menú. */
.plink.sup, .prof-head h2.sup { color: #ffd23f !important; text-shadow: 0 0 8px rgba(255,210,63,.55), 1px 1px 0 #6b4a00; }
/* (24-10-2026) Rangos rojo y shiny (arcoíris que se mueve), como en la propuesta A del ranking. */
.plink.sup.red, .prof-head h2.sup.red { color: #ff5f6d !important; text-shadow: 0 0 8px rgba(255,95,109,.6), 1px 1px 0 #5a0d16; }
.plink.sup.shiny, .prof-head h2.sup.shiny { background: linear-gradient(90deg, #ff8ad8, #ffd23f, #5fe08a, #5fc8ff, #c47bff, #ff8ad8); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.35)); animation: supShine 3s linear infinite; }
@keyframes supShine { to { background-position: 300% 0; } }
/* (30-10-2026, lo pidió el dueño) Rango plateado (10 USD, entre el rojo y el shiny): plata con un brillo que pasa despacio. */
/* (05-11-2026, el dueño) rango plateado en tonos celestes (antes grises plateados #8e9aab/#f4f8ff/#d6e2f2…) */
.plink.sup.silver, .prof-head h2.sup.silver { background: linear-gradient(90deg, #4fa3d6, #e6f7ff, #94d4f5, #ffffff, #4fa3d6); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 4px rgba(150,215,250,.55)) drop-shadow(1px 1px 0 #2a3240); animation: supShine 5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .plink.sup.silver, .prof-head h2.sup.silver { animation: none; } }
@media (prefers-reduced-motion: reduce) { .plink.sup.shiny, .prof-head h2.sup.shiny { animation: none; } }
/* (24-10-2026) Moderación › Apoyos: tres tablas (Dorado · Rojo · Shiny). (30-10-2026) Cuatro, con el plateado (antes repeat(3, …)). */
.spt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.spt-col { border: 3px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(0,0,0,.18); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 260px; }
.spt-col.t-gold { border-color: rgba(255,210,63,.55); } .spt-col.t-red { border-color: rgba(255,95,109,.55); } .spt-col.t-silver { border-color: rgba(150,215,250,.6); } .spt-col.t-shiny { border-color: rgba(196,123,255,.6); }
.spt-h { margin: 0; text-align: center; font-size: 18px; } .spt-h small { color: #c9d4ea; font-size: 12px; }
.spt-add { display: flex; gap: 6px; } .spt-add input { flex: 1; min-width: 0; }
.spt-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; }
.spt-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; background: rgba(0,0,0,.25); border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.spt-row .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spt-row .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spt-row .who small { font-size: 11px; color: #9fb1d6; }
.btn.spt-pub { border-color: #b6f03c !important; color: #d8ff8a; }
.btn.spt-del { border-color: #ff4d5e !important; color: #ff8a95; min-width: 34px; }
@media (max-width: 900px) and (orientation: portrait) { .spt-grid { grid-template-columns: 1fr; } }
@media (orientation: landscape) and (max-height: 500px) { .spt-col { min-height: 0; padding: 6px; } .spt-list { max-height: 40vh; } .spt-row small { display: none; } }
/* Compartidor (22-10-2026): nombre verde en el ranking */
.plink.share { color: #8ef08a !important; text-shadow: 0 0 8px rgba(142,240,138,.5), 1px 1px 0 #1d5a26; }
.prof-title.sup { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,210,63,.15); }
.sup-how { margin-top: 12px; }
.sup-thanks { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow-y: auto; }
.sup-name { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; border: 2px solid rgba(255,210,63,.6); color: #ffd23f; background: rgba(0,0,0,.25); font-size: 13px; }
/* (04-11-2026) Carteles de Ko-fi y de regalos por encima de las ventanas (.lr, z 9050): antes z 60/61 y quedaban debajo de un aviso abierto. */
#sup-banner { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 9060; display: none; align-items: center; gap: 12px;
  transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 12px; border: 3px solid #ffd23f;
  background: linear-gradient(180deg, #3d2f0a, #1f1704); color: #fff4c9; box-shadow: 0 0 0 3px #1a1204, 0 0 24px rgba(255,210,63,.55); }
#sup-banner.on { display: flex; animation: supIn .45s ease-out both; }
#sup-banner.out { animation: supOut .45s ease-in both; }
#sup-banner b { display: block; font-size: 20px; color: #ffd23f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sup-banner span { font-size: 14px; }
/* (24-10-2026) Cartel de regalo del admin (gifts.js): como el de los donantes, un poco más abajo para no taparse con él. */
#gift-banner { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 9061; display: none; align-items: center; gap: 12px;
  transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 12px; border: 3px solid #ffd23f;
  background: linear-gradient(180deg, #3d2f0a, #1f1704); color: #fff4c9; box-shadow: 0 0 0 3px #1a1204, 0 0 24px rgba(255,210,63,.55); }
#gift-banner.on { display: flex; animation: supIn .45s ease-out both; }
#gift-banner.out { animation: supOut .45s ease-in both; }
#gift-banner .gift-ico { font-size: 28px; line-height: 1; }
#gift-banner b { display: block; font-size: 20px; color: #ffd23f; }
#gift-banner .gift-what, #gift-banner .gift-note { display: block; font-size: 14px; }
#gift-banner .gift-note { font-style: italic; color: #ffe9a0; }
#sup-banner.on ~ #gift-banner.on { top: calc(150px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { #gift-banner.on, #gift-banner.out { animation: none; } }
/* (30-10-2026, lo pidió el dueño) «Invitar la ronda» en la sala del gimnasio (social-ui.js rondaUI) y su cartel, como el de los regalos. */
.lob-ronda { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin-top: 6px; }
.lob-ronda:empty { display: none; }
.lob-ronda-t { font-size: 12px; font-weight: 700; color: #ffd23f; text-align: center; text-shadow: 0 0 6px rgba(255,210,63,.45); }
.lob-ronda-b { font-size: 12px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px; }
.lob-ronda-x { font-size: 11px; padding: 2px 8px; }
#ronda-banner { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 62; display: none; align-items: center; gap: 12px;
  transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 12px; border: 3px solid #ffd23f;
  background: linear-gradient(180deg, #3d2f0a, #1f1704); color: #fff4c9; box-shadow: 0 0 0 3px #1a1204, 0 0 24px rgba(255,210,63,.55); }
#ronda-banner.on { display: flex; animation: supIn .45s ease-out both; }
#ronda-banner.out { display: flex; animation: supOut .45s ease-in both; }
#ronda-banner .gift-ico { line-height: 0; }
#ronda-banner b { display: block; font-size: 20px; color: #ffd23f; }
#ronda-banner span { display: block; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { #ronda-banner.on, #ronda-banner.out { animation: none; } }
@media (orientation: landscape) and (max-height: 500px) { #ronda-banner { top: calc(40px + env(safe-area-inset-top, 0px)); padding: 6px 12px; } #ronda-banner b { font-size: 16px; } }
@media (orientation: landscape) and (max-height: 500px) { #gift-banner { top: calc(40px + env(safe-area-inset-top, 0px)); padding: 6px 12px; } #gift-banner b { font-size: 16px; }
  #sup-banner.on ~ #gift-banner.on { top: calc(110px + env(safe-area-inset-top, 0px)); } }
/* (24-10-2026) El cartel dice el rango: dorado (el de siempre), rojo o shiny. */
#sup-banner .sup-rank { display: block; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #ffe27a; }
#sup-banner.t-red { border-color: #ff5f6d; background: linear-gradient(180deg, #4a0f18, #22060b); color: #ffe0e3; box-shadow: 0 0 0 3px #1a0407, 0 0 24px rgba(255,95,109,.55); }
#sup-banner.t-red b, #sup-banner.t-red .sup-rank { color: #ff7a86; }
#sup-banner.t-silver { border-color: #b4e4ff; background: linear-gradient(180deg, #1c3a52, #0e1c2a); color: #e6f7ff; box-shadow: 0 0 0 3px #071420, 0 0 24px rgba(150,215,250,.5); }   /* (30-10-2026) */
#sup-banner.t-silver b, #sup-banner.t-silver .sup-rank { background: linear-gradient(90deg, #4fa3d6, #e6f7ff, #94d4f5, #ffffff, #4fa3d6); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: supShine 5s linear infinite; }
#sup-banner.t-shiny { border-color: #c47bff; background: linear-gradient(180deg, #2c1650, #120826); color: #f3e8ff; box-shadow: 0 0 0 3px #0b0418, 0 0 26px rgba(196,123,255,.6); }
#sup-banner.t-shiny b, #sup-banner.t-shiny .sup-rank { background: linear-gradient(90deg, #ff8ad8, #ffd23f, #5fe08a, #5fc8ff, #c47bff, #ff8ad8); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: supShine 3s linear infinite; }
@keyframes supIn { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes supOut { to { opacity: 0; transform: translate(-50%, -20px); } }
@media (prefers-reduced-motion: reduce) { #sup-banner.on, #sup-banner.out { animation: none; } }
@media (orientation: landscape) and (max-height: 500px) { #sup-banner { top: calc(40px + env(safe-area-inset-top, 0px)); padding: 6px 12px; } #sup-banner b { font-size: 16px; } }

/* "Apoyar" en el menú, al lado de Jugar (19-10-2026): ya no ocupa Jugar las dos columnas. */
.menu-list .menu-item.play { grid-column: auto; }
.menu-item.support { color: #ffd23f; }
.sup-lead { font-size: 20px; font-weight: 700; color: #ffd23f; margin: 0 0 6px; text-wrap: balance; }
.sup-perks { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.sup-perks li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(255,210,63,.1); border: 2px solid rgba(255,210,63,.35); }

/* PC (19-10-2026): la ventana tiene siempre el alto de la pantalla. Antes se ajustaba
   al contenido y, en "Seleccionar varios" sin nada marcado (panel corto), la caja se achicaba. */
#scr-pc .box { height: calc(100dvh - 48px); }
@media (max-width: 559px) { #scr-pc .box { height: auto; } }

/* ============ evolución en grupo: ¿evolucionar o no? (19-10-2026) ============ */
.coop-evo { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 40; width: min(360px, calc(100vw - 32px));
  padding: 12px 14px; text-align: center; animation: fade .2s ease-out; }
.coop-evo p { margin: 0 0 8px; font-size: 16px; }
.coop-evo .row { justify-content: center; gap: 8px; flex-wrap: wrap; }
.coop-evo kbd { font-size: 10px; opacity: .75; margin-left: 4px; }
.coop-evo .ce-bar { height: 4px; border-radius: 3px; background: rgba(0,0,0,.4); margin-bottom: 10px; overflow: hidden; }
.coop-evo .ce-bar i { display: block; height: 100%; width: 100%; background: var(--gold); }
body.touch .coop-evo kbd { display: none; }

/* ============ panel de sonido: la bocina silencia (19-10-2026) ============ */
.snd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.snd-mute { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.18); cursor: pointer; transition: background .15s, border-color .15s; }
.snd-mute:hover { background: rgba(255,255,255,.16); }
.snd-mute:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.snd-mute.off { background: rgba(255,77,94,.22); border-color: #ff5f6d; }
.snd-state { font-size: 14px; }
.snd-state.off { color: #ff7a85; }
.sound-panel.off .snd-row, .sound-inline.off .snd-row { opacity: .45; }
#btn-sound.off { border-color: #ff5f6d; background: rgba(255,77,94,.18); }

/* ============ IVs en la PC (19-10-2026) ============ */
.pc-ivs { background: rgba(0,0,0,.2); border: 2px solid rgba(255,95,109,.18); border-radius: 10px; padding: 8px 10px; display: grid; gap: 7px; container-type: inline-size; }
.iv-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 8px; flex-wrap: wrap; }
.iv-wallet { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.iv-fruit { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 999px; background: rgba(0,0,0,.35); font-size: 13px; white-space: nowrap; }
.iv-fruit small { color: var(--muted); font-size: 11px; }
/* Fila: nombre · valor · % · botones, y la barra debajo a lo ancho. */
.iv-row { display: grid; grid-template-columns: 1fr auto auto auto; grid-template-areas: "n v p b" "bar bar bar bar"; gap: 3px 8px; align-items: center; font-size: 13px; }
.iv-n { grid-area: n; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.iv-v { grid-area: v; text-align: right; font-variant-numeric: tabular-nums; min-width: 22px; }
.iv-v small { color: var(--gold); margin-left: 2px; font-size: 10px; }
.iv-p { grid-area: p; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 40px; }
.iv-p.up { color: #5fe08a; }
.iv-row.plan .iv-p { color: var(--gold); }
.iv-btns { grid-area: b; display: inline-flex; gap: 4px; }
.iv-btns .btn { min-width: 32px; min-height: 28px; padding: 0; font-size: 16px; line-height: 1; }
.iv-bar { grid-area: bar; position: relative; height: 6px; border-radius: 6px; background: rgba(0,0,0,.45); overflow: hidden; }
.iv-bar i { position: absolute; left: 0; top: 0; height: 100%; background: #5fe08a; }
.iv-bar i.add { background: var(--gold); }
/* (30-10-2026) Confirmar / Cancelar mejora (IVs y EVs): los dos a lo ancho, bien a la vista */
.iv-confirm { display: flex; gap: 8px; margin-top: 8px; }
.iv-confirm .btn { flex: 1; min-height: 40px; }
.iv-perm { color: var(--gold); }
.iv-note { margin: 2px 0 0; font-size: 12px; }
.pc-ivs > .row .btn { flex: 1; }
/* Columna angosta (la ficha de la PC en el celular): valor y % debajo del nombre. */
@container (max-width: 250px) {
  .iv-row { grid-template-columns: auto 1fr auto; grid-template-areas: "n n b" "v p b" "bar bar bar"; gap: 2px 6px; }
  .iv-v { text-align: left; }
  .iv-p { text-align: left; }
}
@media (max-width: 560px) {
  .iv-row { font-size: 12px; }
  .iv-btns .btn { min-width: 38px; min-height: 34px; }
}

/* ============ Sección IVs del menú (19-10-2026) ============ */
#scr-ivs .ivs-box { max-height: calc(100dvh - 48px); display: flex; flex-direction: column; gap: 10px; }
.ivs-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ivs-wallet { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-fruit.big { padding: 4px 12px 4px 6px; font-size: 16px; gap: 6px; }
.iv-fruit.big small { font-size: 12px; }
.ivs-lead { margin: 0; flex: 1 1 260px; font-size: 13px; }
.ivs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 12px; flex: 1; min-height: 0; }
.ivs-left { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.ivs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; overflow: auto; min-height: 0; align-content: start; padding: 2px; }
.ivs-mon { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 10px; background: rgba(0,0,0,.25); border: 2px solid transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ivs-mon:hover { border-color: rgba(255,255,255,.25); }
.ivs-mon.on { border-color: var(--gold); background: rgba(255,210,63,.1); }
.ivs-mon:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ivs-mon canvas { flex: none; }
.ivs-mn { display: grid; min-width: 0; }
.ivs-mn b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivs-mn small { font-size: 11px; color: var(--muted); }
.ivs-detail { display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; }
.ivs-head { display: flex; align-items: center; gap: 10px; }
.ivs-head h3 { margin: 0; }
.ivs-head canvas { flex: none; width: 96px; height: 80px; }
.ivs-detail .iv-wallet { display: none; }      /* (las frutas ya se ven arriba) */
@media (max-width: 700px) {
  .ivs-split { grid-template-columns: 1fr; overflow: auto; }
  #scr-ivs .ivs-box { max-height: none; }
  .ivs-list { max-height: 40vh; }
}
@media (max-height: 520px) {
  .ivs-lead { display: none; }
  .ivs-split { grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); }
}
.iv-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,210,63,.1); border: 1px solid rgba(255,210,63,.35); font-size: 12px; }
.iv-lock span { flex: 1 1 140px; }
.ivs-star { color: var(--gold); }

/* Cartel de una sola vez "nuevos jefes" (20-10-2026, ver G.Flow.bossesNotice): en el centro, 10 s. */
.boss-news { position: fixed; inset: 0; z-index: 9100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; background: rgba(5,10,25,.72); cursor: pointer; animation: bnIn .45s ease-out both; }
.boss-news.out { animation: bnOut .45s ease-in both; }
.boss-news img { display: block; width: min(92vw, 820px, calc((100dvh - 60px) * var(--ar, 1.79))); height: auto; border-radius: 14px;   /* (30-10-2026) × la proporción de la imagen (--ar, game.js); antes siempre 1,79 */
  border: 3px solid #ffd23f; box-shadow: 0 0 0 3px #1a1204, 0 0 36px rgba(255,210,63,.45); image-rendering: auto; }
.boss-news .bn-bar { width: min(92vw, 820px, calc((100dvh - 60px) * var(--ar, 1.79))); height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.boss-news .bn-bar i { display: block; height: 100%; background: #ffd23f; transform-origin: left; animation: bnBar 10s linear both; }
@keyframes bnIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes bnOut { to { opacity: 0; transform: scale(.96); } }
@keyframes bnBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* (21-10-2026) Varios carteles seguidos: puntos de cuál vas viendo y entrada suave del siguiente. */
.boss-news .bn-dots { display: flex; gap: 8px; }
.boss-news .bn-dots b { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.3); }
.boss-news .bn-dots b.on { background: #ffd23f; }
.boss-news.bn-swap img { animation: bnIn .35s ease-out both; }
/* (30-10-2026) En el celular: 48 px para la barra, los puntos y los márgenes (antes 40 y ×1,79: los carteles de 1024 × 640 se salían por arriba y por abajo). */
@media (max-height: 520px) { .boss-news { gap: 6px; padding: 8px; } .boss-news img, .boss-news .bn-bar { width: min(92vw, 820px, calc((100dvh - 48px) * var(--ar, 1.79))); } }
@media (prefers-reduced-motion: reduce) { .boss-news, .boss-news.out, .boss-news.bn-swap img { animation: none; } }

/* "NEWS!!" junto al logo del menú (20-10-2026): abre el cartel de la última actualización. */
.logo .t1 { position: relative; display: inline-block; }
.latest-btn { position: absolute; right: -0.9em; top: -0.55em; transform: rotate(28deg); background: none; border: 0; padding: 4px 6px; cursor: pointer;
  font: inherit; font-size: clamp(14px, 1.7vw, 20px); font-weight: 800; color: #ffe94a; letter-spacing: 1px; line-height: 1;
  text-shadow: 0 2px 0 #3a2a00, 2px 0 0 #3a2a00, -2px 0 0 #3a2a00, 0 -2px 0 #3a2a00; animation: latestPulse 1.2s ease-in-out infinite; }
.latest-btn::after { content: ''; position: absolute; right: -14px; top: -10px; border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 16px solid #ff3b3b; transform: rotate(18deg); filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
.latest-btn:hover, .latest-btn:focus-visible { color: #fff; outline: none; }
@keyframes latestPulse { 0%, 100% { transform: rotate(28deg) scale(1); } 50% { transform: rotate(28deg) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .latest-btn { animation: none; } }

/* Perks en pantallas grandes (21-10-2026): en 1600 px o más los íconos, la columna de
   tipos y la ficha crecen, para que no quede todo chiquito con mucho espacio vacío. */
@media (min-width: 1600px) and (min-height: 820px) {
  .it-list.pk { grid-template-columns: 220px minmax(0, 1fr) minmax(420px, 560px); gap: 14px; }
  .pk-type { font-size: 15px; padding: 7px 9px; } .pk-bar { height: 6px; }
  .pk-seg { font-size: 15px; padding: 7px 8px; } .pk-ri { width: 14px; height: 14px; }
  .pk-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
  .pk-tile { font-size: 13px; padding: 9px 4px 7px; } .pk-tile img { width: 44px; height: 44px; }
  .pk-dot { width: 10px; height: 10px; }
  .pk-detail .it-body { font-size: 15px; } .pk-dhead .it-main b { font-size: 19px; } .pk-dhead .it-desc { font-size: 14px; }
  .pk-detail .it-stats { font-size: 14px; } .pk-detail .it-ups { font-size: 14px; } .pk-detail .it-mon { font-size: 13px; }
  .pk-detail .it-demo-view { max-height: 340px; }
}

/* Perks en celulares acostados (21-10-2026): lo que falta es alto, así que la cabecera,
   las pestañas y el buscador van en dos tiras finas, los íconos se achican y la ficha
   pone la demo a la izquierda y el texto a la derecha (antes la demo tapaba todo). */
@media (orientation: landscape) and (max-height: 500px) {
  #scr-items, #scr-items.scr.dim:not(#scr-login) { padding: 4px var(--sa-r) var(--sa-b) var(--sa-l) !important; }   /* (gana a la regla de ≤340 px de alto: aquí la barra de arriba no se ve) */
  #scr-items > .box { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 8px; padding: 6px 10px !important; }
  #scr-items > .box > .row.between:first-child { grid-column: 1 / -1; margin: 0 0 4px; }
  #scr-items > .box > .row.between:first-child h2 { font-size: 16px; }
  #scr-items > .box > .row.between:first-child .btn { padding: 2px 10px; font-size: 12px; }
  #scr-items #it-tabs { grid-column: 1; margin: 0 0 6px !important; flex-wrap: nowrap; align-self: center; }
  #scr-items #it-tabs .chip { padding: 2px 8px; font-size: 12px; white-space: nowrap; }
  #scr-items > .box > .dex-search { grid-column: 2; margin: 0 0 6px; align-self: center; }
  #scr-items #it-q { padding: 4px 10px; font-size: 13px; }
  #scr-items > .box > #it-types { display: none; }
  #scr-items > .box > #it-list { grid-column: 1 / -1; min-height: 0; }
  .it-list.pk { grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
  .pk-types { gap: 3px; }
  .pk-type { font-size: 11.5px; padding: 3px 5px; border-radius: 7px; }
  .pk-bar { height: 4px; margin-top: 3px; }
  .pk-seg { font-size: 11.5px; padding: 3px 4px; gap: 3px; }
  .pk-segs { gap: 4px; margin-bottom: 6px; flex-wrap: nowrap; }
  .pk-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; }
  .pk-tile { padding: 4px 2px; font-size: 10px; border-radius: 8px; gap: 2px; }
  .pk-tile img { width: 26px; height: 26px; }
  .pk-dot { width: 7px; height: 7px; top: 3px; right: 3px; }
  /* Ficha: demo a la izquierda (se queda quieta), texto a la derecha (se desplaza). */
  .pk-detail { top: calc(4px + env(safe-area-inset-top)); bottom: var(--sa-b); left: var(--sa-l); right: var(--sa-r); overflow: hidden; }
  .pk-detail.open { display: flex; flex-direction: column; }
  .pk-dhead { flex: none; padding: 6px 10px; gap: 8px; }
  .pk-dhead .it-ico { flex-basis: 34px; height: 34px; }
  .pk-dhead .it-main b { font-size: 14px; } .pk-dhead .it-desc { font-size: 12px; }
  .pk-detail .it-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; padding: 8px 10px;
    overflow-y: auto; align-content: start; font-size: 12px; }
  .pk-detail .it-body > * { grid-column: 2; }
  .pk-detail .it-body > .it-demo { grid-column: 1; grid-row: 1 / span 12; position: sticky; top: 0; align-self: start; margin: 0; }
  .pk-detail .it-demo-view { max-height: none; }
  .pk-detail .it-demo-bar { margin-top: 4px; font-size: 12px; }
  .pk-detail .it-ups { columns: 1; }
  .pk-detail .it-mons { max-height: none; }
}
/* Los más angostos (iPhone SE y similares): la columna de tipos sólo con el color y el número. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 640px) {
  .it-list.pk { grid-template-columns: 84px minmax(0, 1fr); }
  .pk-type { font-size: 10.5px; }
  .pk-seg { font-size: 10.5px; }
  .pk-seg .pk-ri { display: none; }
  #scr-items #it-tabs .chip { padding: 2px 6px; font-size: 11px; }
}

/* Ajustes → Alejar la cámara (21-10-2026) */
.set-zoom { margin: 2px 0 12px; }
.set-zoom-v { color: var(--gold); min-width: 46px; text-align: right; }

/* ===================== Menú principal por secciones (21-10-2026) =====================
 * La propuesta C que eligió el dueño: tres cajas con su cartel (Partida, Tus Pokémon y
 * Más) y sin el recuadro de estadísticas. Va al final para mandar sobre las reglas
 * viejas del menú (una sola lista). En PC, Jugar a la izquierda con Amigos y Ranking
 * al lado; en pantallas más angostas, Jugar ocupa la fila entera.
 */
.menu-sect { position: relative; padding-top: 12px; flex: none; }
.ms-lab { position: absolute; left: 16px; top: 0; z-index: 2; background: #2c519f; color: #fff; font-size: 13px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; line-height: 1.25; padding: 2px 10px; border: 3px solid var(--m-ink); border-radius: 8px; text-shadow: 1px 1px 0 rgba(0,0,0,.35); }
#scr-menu .menu-right { gap: 10px; }
#scr-menu .menu-sect .box { padding: 18px 14px 10px; overflow: visible; animation: none; }
#scr-menu .menu-sect .menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
#scr-menu .menu-sect .menu-item { min-width: 0; }
#scr-menu .menu-sect .menu-item small { overflow: hidden; text-overflow: ellipsis; }
#scr-menu .ms-play .menu-item.play { grid-column: span 2; }
@media (min-width: 1000px) and (min-height: 521px) {
  /* (Jugar a la izquierda, alto, y Amigos y Ranking uno encima del otro a la derecha.) */
  #scr-menu .ms-play .menu-item.play { grid-column: auto; grid-row: span 2; align-self: stretch; align-content: center; }
  #scr-menu .ms-play .menu-item small { white-space: nowrap; }
}
/* Portátiles bajos: cajas y filas más justas para que entre todo sin desplazar. */
@media (max-height: 780px) and (min-height: 521px) {
  #scr-menu .menu-right { gap: 6px; }
  #scr-menu .menu-sect { padding-top: 10px; }
  #scr-menu .menu-sect .box { padding: 14px 10px 6px; }
  .ms-lab { font-size: 11px; padding: 1px 8px; left: 12px; }
  #scr-menu .menu-sect .menu-item small { white-space: nowrap; }
}
@media (max-height: 660px) and (min-height: 521px) {
  #scr-menu .menu-sect .menu-item { font-size: 15px; padding: 3px 8px 3px 26px; }
  #scr-menu .menu-sect .menu-item.play { font-size: 21px; }
  #scr-menu .menu-sect .menu-item small { font-size: 10px; }
  #scr-menu .menu-sect .mi-ico img { width: 20px; height: 20px; }
  #scr-menu .menu-sect .menu-item { grid-template-columns: 24px 1fr; column-gap: 6px; }
}
/* Celulares en vertical: el menú debajo del Pokémon, a todo el ancho. */
@media (max-width: 760px) and (min-height: 521px) {
  #scr-menu .menu-right { padding: 10px 10px 16px; gap: 8px; }
  #scr-menu .menu-sect .menu-item { font-size: 17px; padding: 6px 8px 6px 26px; }
  #scr-menu .menu-sect .menu-item.play { font-size: 24px; }
  #scr-menu .menu-sect .menu-item small { font-size: 11px; white-space: nowrap; }
}
@media (max-width: 380px) and (min-height: 521px) {
  #scr-menu .menu-sect .menu-item { font-size: 15px; padding: 5px 6px; grid-template-columns: 22px 1fr; column-gap: 6px; }
  #scr-menu .menu-sect .menu-item::before { display: none; }
  #scr-menu .menu-sect .mi-ico img { width: 20px; height: 20px; }
}
/* Celulares en horizontal: columna de la derecha que se desplaza, todo más chico. */
@media (max-height: 520px) {
  #scr-menu .menu-right { gap: 4px; }
  #scr-menu .menu-sect { padding-top: 8px; }
  #scr-menu .menu-sect .box { padding: 10px 6px 4px; }
  .ms-lab { font-size: 9px; padding: 0 6px; left: 10px; border-width: 2px; border-radius: 6px; letter-spacing: .5px; }
  #scr-menu .menu-sect .menu-list { gap: 1px 4px; }
  #scr-menu .menu-sect .menu-item { padding: 3px 4px 3px 6px; }
}
@media (max-height: 400px) { #scr-menu .menu-sect .menu-item { font-size: 13px; } #scr-menu .menu-sect .menu-item.play { font-size: 18px; } }
/* Las monedas no se encogen: antes, con las cajas fijas, la fila quedaba aplastada. */
#scr-menu .menu-coins { flex: none; }
/* Tablets en vertical y ventanas angostas: columna algo más ancha y filas más chicas. */
@media (min-width: 761px) and (max-width: 999px) and (min-height: 521px), (orientation: portrait) and (min-width: 761px) and (max-width: 1199px) and (min-height: 521px) {
  #scr-menu .menu-right { width: min(470px, 60vw); padding-left: 14px; padding-right: 14px; }
  #scr-menu .menu-sect .menu-item { font-size: 17px; padding: 6px 6px 6px 24px; grid-template-columns: 24px 1fr; column-gap: 6px; }
  #scr-menu .menu-sect .menu-item.play { font-size: 24px; }
  #scr-menu .menu-sect .menu-item small { font-size: 11px; white-space: nowrap; }
  #scr-menu .menu-sect .mi-ico img { width: 22px; height: 22px; }
  #scr-menu .menu-left { padding: 70px 10px 20px; }
  #scr-menu .menu-left .logo .t1 { font-size: clamp(34px, 5.2vw, 52px); }
  /* La barra de arriba no entraba entera (se cortaba por la izquierda). */
  .topbar { right: 8px; gap: 5px; max-width: calc(100vw - 16px); }
  .topbar .pill, .topbar .btn.small { padding: 4px 8px; font-size: 13px; }
  .topbar .btn > span, .news-btn span, .daily-btn span, #btn-support span { display: none; }
}

/* Celulares en horizontal (21-10-2026, iPhone SE y parecidos): el menú tiene que entrar
 * entero sin desplazar. Columna algo más ancha, tres columnas por caja, sin subtítulos y
 * filas bajas. (Antes la caja "Más" quedaba cortada abajo.) */
@media (max-height: 520px) {
  #scr-menu .menu-right { width: min(60vw, 480px); padding-left: 6px; padding-right: max(8px, env(safe-area-inset-right)); }
  #scr-menu .menu-sect .menu-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4px; }
  #scr-menu .ms-play .menu-item.play { grid-column: auto; grid-row: auto; position: static; }
  #scr-menu .menu-sect .menu-item { font-size: 13px; line-height: 1.1; padding: 4px 3px; grid-template-columns: 18px 1fr; column-gap: 4px; letter-spacing: 0; }
  #scr-menu .menu-sect .menu-item.play { font-size: 17px; }
  #scr-menu .menu-sect .menu-item small { display: none; }
  #scr-menu .menu-sect .mi-ico img { width: 18px; height: 18px; }
  /* "Más" en dos columnas (Intercambios es largo y se pegaba a Perks). */
  #scr-menu .menu-sect:last-child .menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* El título entra en la columna de la izquierda (antes se cortaba y pisaba el menú). */
  #scr-menu .menu-left { padding-left: max(8px, env(safe-area-inset-left)); }
  #scr-menu .menu-left .logo .t1 { font-size: clamp(24px, 5vw, 44px); }
}
@media (max-height: 340px) {
  #scr-menu .menu-sect .menu-item { font-size: 12px; padding: 3px 2px; }
  #scr-menu .menu-sect .menu-item.play { font-size: 15px; }
}

/* ===================== Tienda de Mejoras en cartas (21-10-2026) =====================
 * La propuesta B que eligió el dueño: las mejoras como cartas con su botón de comprar
 * y, a la derecha, la IMAGEN del Pokémon (su retrato, no el sprite animado) con lo que
 * ya tiene comprado. Va al final para mandar sobre las reglas de la lista de antes.
 */
#scr-upgrades .mart-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); gap: 10px; min-height: 0; flex: 1 1 0; }
#scr-upgrades .mart-cards { padding: 12px; overflow-y: auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: min-content; gap: 10px; align-content: start; }
.mart-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border-radius: 10px; cursor: pointer; background: #fff; color: var(--m-ink);
  border: 3px solid var(--m-ink); box-shadow: 0 3px 0 rgba(0,0,0,.22); outline: none; transition: transform .08s; }
.mart-card:hover { transform: translateY(-2px); }
.mart-card.sel, .mart-card:focus-visible { box-shadow: 0 0 0 3px var(--m-gold), 0 3px 0 rgba(0,0,0,.22); }
.mart-card .mc-tt { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; line-height: 1.1; }
.mart-card .mc-tt img { flex: none; }
.mart-card .mc-u { font-size: 12px; color: #586078; line-height: 1.25; min-height: 30px; flex: 1; }
.mart-card .mc-lv { display: flex; align-items: center; gap: 6px; }
.mart-card .mc-lv .bar { flex: 1; display: flex; gap: 2px; background: #485068; border-radius: 3px; padding: 2px; }
.mart-card .mc-lv .bar i { flex: 1; height: 7px; border-radius: 2px; background: #687088; }
.mart-card .mc-lv .bar i.on { background: var(--m-exp); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.mart-card .mc-lv b { font-size: 11px; color: #586078; white-space: nowrap; }
.mart-card .mc-buy { margin-top: 2px; padding: 6px; font-size: 15px; border-width: 3px; display: flex; align-items: center; justify-content: center; gap: 4px; position: static; }
.mart-card.max .mc-buy { background: var(--m-gold); color: var(--m-ink); text-shadow: none; }
.mart-card .mc-sw { justify-content: center; }
#scr-upgrades .mart-side { padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; overflow-y: auto; text-align: center; }
.mart-face { flex: none; padding: 6px; border-radius: 14px; background: #dfe6f2; border: 3px solid var(--m-ink); box-shadow: inset 0 0 0 3px var(--m-gold); line-height: 0; }
.mart-pic { display: inline-block; flex: none; image-rendering: pixelated; background-repeat: no-repeat; border-radius: 6px; }
.mart-face .mart-pic { border-radius: 8px; }
.mart-side-nm { font-size: 20px; font-weight: 700; }
.mart-msg { margin: 0; font-size: 14px; line-height: 1.4; color: var(--m-ink); background: #eef2f8; border-radius: 8px; padding: 8px 10px; align-self: stretch; text-align: left; }
.mart-side-h { align-self: stretch; text-align: left; font-size: 12px; font-weight: 700; color: #586078; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
.mart-have { align-self: stretch; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0; font-size: 13px; text-align: left; }
.mart-have dd { margin: 0; text-align: right; font-weight: 700; color: var(--m-blue2); }
.mart-have .z { color: #a8b0c0; font-weight: 400; }
#scr-upgrades .mart-mon .mart-pic { width: 36px !important; height: 36px !important; }

/* Pantallas de PC bajas: cartas más justas para que entren más sin desplazar. */
@media (max-height: 860px) and (min-height: 521px) {
  .mart-card { padding: 7px 8px; gap: 4px; }
  .mart-card .mc-tt { font-size: 15px; }
  .mart-card .mc-u { min-height: 0; font-size: 11px; }
  #scr-upgrades .mart-card .mc-buy { padding: 4px; font-size: 14px; }
}
/* Ventanas medianas y tablets: la ficha más angosta, cartas algo más chicas. */
@media (max-width: 1100px) {
  #scr-upgrades .mart-body { grid-template-columns: minmax(0, 1fr) 260px; }
  #scr-upgrades .mart-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; padding: 10px; }
  .mart-face .mart-pic { width: 120px !important; height: 120px !important; }
}
/* Pantallas angostas (tablets en vertical): la ficha arriba en una fila y las cartas debajo. */
@media (max-width: 760px) and (min-height: 521px) {
  #scr-upgrades .mart-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  #scr-upgrades .mart-side { order: -1; flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; padding: 10px; gap: 6px 10px; overflow: visible; }
  .mart-face .mart-pic { width: 64px !important; height: 64px !important; }
  .mart-side-nm { font-size: 17px; }
  .mart-msg { flex: 1 1 100%; font-size: 13px; }
  .mart-side-h, .mart-have { display: none; }
  #scr-upgrades .mart-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* Celulares en horizontal: cartas compactas a la izquierda y una ficha chica a la derecha. */
@media (max-height: 520px) {
  #scr-upgrades .mart-body { grid-template-columns: minmax(0, 1fr) 180px; gap: 6px; }
  #scr-upgrades .mart-cards { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; padding: 6px; }
  .mart-card { padding: 5px 6px; gap: 3px; border-width: 2px; border-radius: 8px; }
  .mart-card .mc-tt { font-size: 12px; gap: 5px; }
  .mart-card .mc-tt img { width: 18px; height: 18px; }
  .mart-card .mc-u { display: none; }
  .mart-card .mc-lv .bar i { height: 5px; }
  .mart-card .mc-lv b { font-size: 10px; }
  #scr-upgrades .mart-card .mc-buy { font-size: 12px; padding: 2px 4px; border-width: 2px; border-radius: 7px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
  #scr-upgrades .mart-side { padding: 6px; gap: 4px; }
  .mart-face { padding: 3px; border-width: 2px; }
  .mart-face .mart-pic { width: 64px !important; height: 64px !important; }
  .mart-side-nm { font-size: 13px; }
  .mart-msg { font-size: 11px; line-height: 1.3; padding: 4px 6px; }
  .mart-side-h { font-size: 10px; margin-top: 0; }
  .mart-have { font-size: 10px; gap: 1px 6px; }
}

/* Tienda de Mejoras con los colores de las otras secciones (21-10-2026, lo pidió el dueño):
 * ventanas azules estilo PMD (como .box), cartas azul oscuro y letras blancas, en vez del crema. */
#scr-upgrades .mart-win { background: linear-gradient(180deg, var(--box1), var(--box2)); color: #fff; border: 3px solid var(--edge);
  box-shadow: 0 0 0 3px var(--edge-out), inset 0 0 0 2px var(--edge-in), 0 10px 30px rgba(0,0,0,.45); text-shadow: 1px 1px 0 var(--shadow); }
#scr-upgrades .mart-card { background: rgba(10,22,56,.55); color: #fff; border: 2px solid var(--edge-in); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
#scr-upgrades .mart-card:hover { border-color: var(--edge); }
#scr-upgrades .mart-card.sel, #scr-upgrades .mart-card:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 3px 0 rgba(0,0,0,.3); }
#scr-upgrades .mart-card .mc-u, #scr-upgrades .mart-card .mc-lv b { color: var(--muted); }
#scr-upgrades .mart-card .mc-buy { border-color: #0b1838; }
#scr-upgrades .mart-card.max .mc-buy { color: #2a1a00; }
#scr-upgrades .mart-side-nm { color: #fff; }
#scr-upgrades .mart-msg { background: rgba(10,22,56,.55); color: #fff; border: 2px solid var(--edge-in); }
#scr-upgrades .mart-side-h { color: var(--muted); }
#scr-upgrades .mart-have dt { color: #fff; }
#scr-upgrades .mart-have dd { color: var(--gold); }
#scr-upgrades .mart-have .z { color: rgba(185,203,240,.45); }
#scr-upgrades .mart-face { background: rgba(10,22,56,.6); border-color: var(--edge); }
#scr-upgrades .mart-tm-sw { color: #fff; }

/* ===================== Pantallas grandes a pantalla completa (21-10-2026) =====================
 * Con la Tienda de Mejoras, la PC, el Pokédex, el Gacha, Intercambios, el Criadero, IVs,
 * Ranking, Amigos o Moderación abiertos, la barra de arriba se esconde (como en Perks) y la
 * ventana ocupa toda la pantalla, en PC y en celulares.
 */
body:has(:is(#scr-upgrades, #scr-pc, #scr-dex, #scr-gacha, #scr-trades, #scr-hatchery, #scr-ivs, #scr-rank, #scr-friends, #scr-mod):not(.hidden)) :is(#topbar, #credits-line, #sound-panel) { display: none !important; }
:is(#scr-upgrades, #scr-pc, #scr-dex, #scr-gacha, #scr-trades, #scr-hatchery, #scr-ivs, #scr-rank, #scr-friends, #scr-mod).scr {
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important; }
:is(#scr-pc, #scr-dex, #scr-gacha, #scr-trades, #scr-hatchery, #scr-ivs, #scr-rank, #scr-friends, #scr-mod) > .box {
  width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important; }
#scr-upgrades .mart { width: 100% !important; height: 100% !important; max-height: none !important; margin: 0 !important; }

/* Tienda: las Pokémonedas de todas las regiones abajo, a lo largo, cada una con su color. */
#scr-upgrades .mart-coinbar { flex: none; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; padding: 0; flex-wrap: nowrap; }
#scr-upgrades .mart-coinbar .mart-reg { min-width: 0; padding: 4px 6px; }
#scr-upgrades .mart-coinbar .mart-reg b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
#scr-upgrades .mart-coinbar .mart-reg small { font-size: 12px; }
#scr-upgrades .mart-coinbar .mart-reg.locked { opacity: .35; cursor: default; }
@media (max-height: 520px), (max-width: 700px) {
  #scr-upgrades .mart-coinbar { gap: 3px; }
  #scr-upgrades .mart-coinbar .mart-reg { padding: 2px 3px; flex-direction: row; justify-content: center; gap: 4px; border-width: 2px; }
  #scr-upgrades .mart-coinbar .mart-reg b { font-size: 10px; }
  #scr-upgrades .mart-coinbar .mart-reg small { font-size: 11px; }
}
/* Cada moneda con el color de su región (icons.js, COIN_COL). */
.coin[data-r=kanto] { background-image: var(--ico-coin-kanto); } .coin[data-r=johto] { background-image: var(--ico-coin-johto); }
.coin[data-r=hoenn] { background-image: var(--ico-coin-hoenn); } .coin[data-r=sinnoh] { background-image: var(--ico-coin-sinnoh); }
.coin[data-r=teselia] { background-image: var(--ico-coin-teselia); } .coin[data-r=kalos] { background-image: var(--ico-coin-kalos); }
.coin[data-r=alola] { background-image: var(--ico-coin-alola); } .coin[data-r=galar] { background-image: var(--ico-coin-galar); }
.coin[data-r=paldea] { background-image: var(--ico-coin-paldea); }

/* ===================== Gacha: diseño A «Escenario de los legendarios» (21-10-2026) =====================
 * Antes: cartel + botones a la izquierda y columna de probabilidades a la derecha (.split).
 * Ahora: cartel a lo ancho con los 3 legendarios sobre pedestales, tira de probabilidades,
 * y abajo una barra con tus tickets, los 3 botones y las tiradas sin legendaria.
 * Las reglas y probabilidades completas salen en una ventanita (ⓘ Reglas). */
#scr-gacha > .box.gx { display: flex; flex-direction: column; gap: 8px; height: 100%; max-height: 100%; overflow: hidden; }
#scr-gacha .gx .gen-tabs { flex: none; margin-top: 0; }
#scr-gacha .banner.gx-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 16px 22px 34px; overflow: hidden; border-radius: 12px; }
#scr-gacha .gx-head { position: relative; z-index: 2; max-width: calc(100% - 120px); }
#scr-gacha .banner.gx-stage .gx-head h3 { font-size: clamp(22px, 3.2vw, 44px); margin: 0; }
#scr-gacha .gx-head p { margin: 4px 0 0; text-shadow: 1px 1px 0 #14204a; }
#scr-gacha .banner.gx-stage #banner-desc { font-size: clamp(12px, 1.2vw, 18px); }
#scr-gacha .gx-head .sub { font-size: clamp(11px, 1.05vw, 16px); }
#scr-gacha .gx-info { position: absolute; right: 16px; top: 16px; z-index: 3; }
#scr-gacha .banner.gx-stage .gx-feat { flex: 1 1 auto; min-height: 0; height: auto; margin: 0; display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 4vw, 70px); }
#scr-gacha .gx-mon { position: relative; height: 78%; max-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
#scr-gacha .gx-mon.big { height: 100%; max-height: 400px; }
#scr-gacha .banner.gx-stage .gx-mon canvas { flex: 1 1 auto; min-height: 0; height: 100%; width: auto; max-width: 100%; object-fit: contain; position: relative; z-index: 1; }
#scr-gacha .gx-ped { position: absolute; left: 50%; bottom: 16px; width: 120%; height: 22%; max-height: 70px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.35), rgba(255,255,255,.06) 60%, transparent 70%); }
#scr-gacha .gx-mon b { flex: none; font-size: clamp(11px, 1.1vw, 18px); color: #fff; text-shadow: 2px 2px 0 #14204a; margin-top: -4px; position: relative; z-index: 2; white-space: nowrap; }
#scr-gacha .gx-mon.big b { font-size: clamp(13px, 1.3vw, 21px); }
#scr-gacha .banner.gx-stage .gx-rules { position: absolute; right: 16px; top: 56px; z-index: 5; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 72px); overflow-y: auto;
  background: #14204a; border: 2px solid var(--gold); border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
#scr-gacha .gx-rules h3 { color: var(--gold); margin: 0 0 6px; font-size: 17px; }
#scr-gacha .gx-rbar { flex: none; display: flex; flex-direction: column; gap: 5px; }
#scr-gacha .gx-strip { display: flex; height: 10px; border-radius: 6px; overflow: hidden; border: 2px solid #14204a; }
#scr-gacha .gx-leg { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
#scr-gacha .gx-leg img { vertical-align: -1px; }
#scr-gacha .gx-dock { flex: none; display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) minmax(150px, 230px); gap: 16px; align-items: center;
  background: rgba(20,32,74,.45); border: 2px solid rgba(141,170,240,.5); border-radius: 12px; padding: 12px 18px; }
#scr-gacha .gx-lab { display: block; font-size: 13px; color: var(--muted); }
#scr-gacha .gx-tk.tickets-line { display: flex; gap: 22px; margin: 6px 0 0; font-size: 30px; font-weight: 700; color: #fff; }
#scr-gacha .gx-tk span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#scr-gacha .gx-pulls { display: flex; gap: 12px; }
#scr-gacha .gx-dock .gx-pulls .btn { min-height: 78px; font-size: 18px; margin: 0; }
#scr-gacha .gx-pity b { display: block; font-size: 24px; margin: 2px 0 6px; color: #fff; }
#scr-gacha .gx-pity small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
#scr-gacha .gx-bar { height: 12px; border-radius: 6px; background: #14204a; border: 2px solid #4d6fc4; overflow: hidden; }
#scr-gacha .gx-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd23f, #ff9f1c); }

/* Tablets y celulares en vertical: la barra de abajo en dos filas. */
@media (max-width: 900px) {
  #scr-gacha .gx-dock { grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 10px 12px; }
  #scr-gacha .gx-pulls { grid-column: 1 / -1; order: 3; }
  #scr-gacha .gx-dock .gx-pulls .btn { min-height: 56px; font-size: 15px; padding: 6px; }
  #scr-gacha .gx-tk.tickets-line { font-size: 22px; gap: 14px; }
  #scr-gacha .gx-tk img { width: 26px; height: 26px; }
  #scr-gacha .banner.gx-stage { padding: 12px 14px 26px; }
  #scr-gacha .gx-leg { font-size: 11px; gap: 2px 10px; }
}
@media (max-width: 560px) {
  #scr-gacha .gx-pulls { flex-direction: column; gap: 6px; }
  #scr-gacha .gx-dock .gx-pulls .btn { min-height: 44px; }
  #scr-gacha .gx-head { max-width: calc(100% - 90px); }
  #scr-gacha .banner.gx-stage { min-height: 220px; }
}
/* Celulares en horizontal (poca altura): todo más bajo. */
@media (orientation: landscape) and (max-height: 500px) {
  #scr-gacha > .box.gx { gap: 4px; }
  #scr-gacha .banner.gx-stage { padding: 6px 12px 16px; }
  #scr-gacha .banner.gx-stage .gx-head h3 { font-size: 17px; }
  #scr-gacha .banner.gx-stage #banner-desc, #scr-gacha .gx-head .sub { font-size: 11px; margin-top: 1px; }
  #scr-gacha .gx-info { top: 6px; right: 8px; }
  #scr-gacha .banner.gx-stage .gx-rules { top: 36px; max-height: calc(100% - 44px); font-size: 12px; }
  #scr-gacha .gx-mon b { font-size: 10px; }
  #scr-gacha .gx-ped { bottom: 8px; }
  #scr-gacha .gx-rbar { gap: 2px; }
  #scr-gacha .gx-strip { height: 6px; }
  #scr-gacha .gx-leg { font-size: 10px; gap: 0 10px; }
  #scr-gacha .gx-dock { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 5px 10px; }
  #scr-gacha .gx-pulls { grid-column: auto; order: 0; flex-direction: row; gap: 6px; }
  #scr-gacha .gx-dock .gx-pulls .btn { min-height: 38px; font-size: 13px; padding: 4px 6px; }
  #scr-gacha .gx-tk.tickets-line { font-size: 16px; gap: 10px; margin-top: 2px; }
  #scr-gacha .gx-tk img { width: 20px; height: 20px; }
  #scr-gacha .gx-lab { font-size: 10px; }
  #scr-gacha .gx-pity b { font-size: 14px; margin: 0 0 3px; }
  #scr-gacha .gx-pity small { display: none; }
  #scr-gacha .gx-bar { height: 8px; }
}

/* ---------- Elegir ataques antes de jugar (22-10-2026, movepick-ui.js) ---------- */
.mvp { width: min(1100px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.mvp .mvp-head h2 { margin: 0; }
.mvp .mvp-head .sub { margin: 2px 0 0; }
.mvp-body { --wd: min(430px, 56vh); display: grid; grid-template-columns: var(--wd) 1fr; gap: 18px; align-items: center; min-height: 0; }
.mvp-wheel { position: relative; width: var(--wd); aspect-ratio: 1; margin: 0 auto; }
.mvp-ring { position: absolute; inset: 11%; border-radius: 50%; border: 3px dashed rgba(255,210,63,.35); }
.mvp-hub { position: absolute; inset: 30%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle, #3d5aa8, #142554); border: 3px solid var(--edge-out); box-shadow: 0 0 0 2px var(--edge-in), 0 0 28px rgba(120,180,255,.3); }
.mvp-hub canvas { image-rendering: pixelated; width: 90%; height: auto; }
#mvp-orbs { position: absolute; inset: 0; }
.mvp-orb { --o: calc(var(--wd) * .17); position: absolute; width: var(--o); height: var(--o); margin: calc(var(--o) / -2) 0 0 calc(var(--o) / -2);
  border-radius: 50%; border: 3px dashed rgba(185,203,240,.45); background: rgba(5,12,32,.45); color: var(--muted);
  display: flex; align-items: center; justify-content: center; padding: 0; font: inherit; cursor: default; }
.mvp-orb small { font-size: 13px; }
.mvp-orb.full { border: 3px solid var(--gold); background: radial-gradient(circle, #2c4a96, #172a5e); cursor: pointer; box-shadow: 0 0 10px rgba(255,210,63,.3); transition: transform .12s; }
.mvp-orb.full:hover { transform: scale(1.08); }
.mvp-orb.full.r-tank { border-color: #7cc4ff; box-shadow: 0 0 10px rgba(124,196,255,.35); }
.mvp-orb.full.r-sup { border-color: var(--green); box-shadow: 0 0 10px rgba(95,224,138,.35); }
.mvp-orb.start { cursor: default; }
.mvp-lbl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; font-size: 12px; color: #fff; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000; pointer-events: none; }
.mvp-pin { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; background: var(--gold); color: #3a2a00; border-radius: 999px; padding: 0 6px; text-shadow: none; }
.mvp-cat { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.mvp-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mvp-tab { font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; padding: 6px 12px; border-radius: 8px; color: #0b1020; text-shadow: none;
  background: var(--tc); border: 3px solid var(--edge-out); opacity: .55; }
.mvp-tab.on { opacity: 1; box-shadow: 0 0 0 2px #fff inset; }
.mvp-tab small { font-size: 11px; opacity: .8; }
.mvp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; max-height: min(46vh, 420px); overflow: auto; padding: 2px 4px 2px 0; }
.mvp-mv { display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; min-height: 48px;
  padding: 6px 8px; border-radius: 10px; background: rgba(5,12,32,.4); border: 2px solid rgba(185,203,240,.25); }
.mvp-mv:hover { border-color: rgba(255,255,255,.6); }
.mvp-mv.on { border-color: var(--gold); background: rgba(255,210,63,.12); }
.mvp-mv.foc { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.mvp-mv.lock { opacity: .45; cursor: not-allowed; }
/* (30-10-2026, lo pidió el dueño) Arrastrar un ataque a un hueco de la rueda (movepick-ui.js): el fantasma que sigue al puntero,
   los huecos se marcan como destino y el de debajo se ilumina. En la rueda el dedo no desplaza la página (touch-action). */
.mvp-mv:not(.lock), .mvp-orb.full:not(.start) { cursor: grab; }
.mvp-orb { touch-action: none; -webkit-user-select: none; user-select: none; }
.mvp-mv { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mvp-dragging { opacity: .4; }
.mvp-dropping .mvp-orb { border-color: rgba(255,226,122,.75); }
.mvp-dropping .mvp-orb.mvp-drop { transform: scale(1.15); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(255,210,63,.55), 0 0 22px rgba(255,210,63,.75); }
.mvp-ghost { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; display: flex; align-items: center; gap: 6px;
  margin: -64px 0 0 -24px; padding: 6px 12px 6px 6px;   /* encima del puntero, para que el dedo no lo tape ni tape el hueco */ border-radius: 999px; background: #172a5e; border: 3px solid var(--gold);
  color: #fff; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.45); white-space: nowrap; }
html.dragging-move, html.dragging-move * { cursor: grabbing !important; }
.mvp-mv b { display: block; font-size: 14px; line-height: 1.1; }
.mvp-mv em { font-style: normal; font-size: 11px; margin-right: 4px; }
.mvp-role { padding: 0 6px; border-radius: 999px; color: #0b1020; text-shadow: none; }
.mvp-role.atk { background: #ff7a5c; } .mvp-role.melee { background: #ff9a3a; }   /* (27-10-2026) cuerpo a cuerpo */
.mvp-melee { color: #ffb070; font-style: normal; } .mvp-role.sup { background: var(--green); } .mvp-role.tank { background: #7cc4ff; }
.mvp-lockt { color: #ffb3bb; }
/* (30-10-2026) Impronta (systems/impronta.js): pestaña lila como en el dibujo del dueño, sus huecos de la rueda con borde lila,
   su tipo y si es legendario (dorado) o mega (arcoíris). Mientras no lleves ninguno, la pestaña late. */
.mvp-tab.imp { background: #252a68; color: #ddd3ff; border-color: #bfaef5; }
.mvp-tab.imp.on { box-shadow: 0 0 0 2px #fff inset, 0 0 12px rgba(191,174,245,.55); }
.mvp-tab.imp.nudge { animation: mvp-nudge 1.6s ease-in-out infinite; }
@keyframes mvp-nudge { 50% { box-shadow: 0 0 0 2px #bfaef5, 0 0 16px rgba(191,174,245,.85); opacity: 1; } }
.mvp-orb.full.imp { border-color: #bfaef5; box-shadow: 0 0 12px rgba(191,174,245,.5); }
.mvp-mv.imp:not(.on) { border-color: rgba(191,174,245,.45); }
.mvp-ty { padding: 0 6px; border-radius: 4px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.45); display: inline-block; white-space: nowrap; }
.mvp-ik { padding: 0 6px; border-radius: 4px; color: #2a1c00; text-shadow: none; display: inline-block; white-space: nowrap; }
.mvp-ik.leg { background: #ffd23f; } .mvp-ik.mega { background: linear-gradient(90deg, #ff7ad9, #b07bff, #6fd3ff); color: #1a0d2a; }
.mvp-impt { color: #d9cffd; font-style: normal; }
/* (02-11-2026) Tipos que gana al evolucionar (G.Moves.evoTypes): pestaña con borde a rayas y ▲; los ataques, «▲ Al evolucionar». */
.mvp-tab.evo { border-style: dashed; }
.mvp-evoi { font-style: normal; font-size: .75em; margin-right: 3px; color: #1d8a3c; }
.mvp-evot { color: #1d7a36; font-style: normal; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .mvp-tab.imp.nudge { animation: none; box-shadow: 0 0 0 2px #bfaef5; } }
.mvp-info { margin: 0; min-height: 36px; font-size: 14px; color: var(--muted); }
.mvp-info b { color: #fff; }
.mvp-foot { gap: 10px; }
/* Celular en vertical: la rueda arriba y el catálogo debajo. */
@media (max-width: 760px) {
  .mvp { padding: 12px; }
  .mvp-body { --wd: min(84vw, 40vh, 360px); grid-template-columns: 1fr; gap: 14px; }
  .mvp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: 30vh; }
  .mvp-lbl { font-size: 10px; }
}
/* Celular en horizontal (poca altura): rueda a la izquierda, todo más compacto. */
@media (max-height: 520px) and (min-width: 561px) {
  /* (debajo de la barra de arriba; los botones de abajo suben a la cabecera para dejar sitio a la rueda) */
  #scr-mvpick { padding: 50px 6px 6px; }
  .mvp { position: relative; padding: 8px 12px; gap: 4px; height: 100%; }
  .mvp .mvp-head > div { max-width: calc(100% - 380px); }
  .mvp .mvp-head h2 { font-size: 18px; }
  .mvp .mvp-head .sub { font-size: 12px; }
  .mvp-body { --wd: min(calc(100vh - 168px), 300px); grid-template-columns: var(--wd) 1fr; gap: 12px; flex: 1; align-items: start; }
  .mvp-wheel { margin-top: 6px; }
  .mvp-grid { max-height: calc(100vh - 210px); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .mvp-mv { min-height: 40px; padding: 4px 6px; }
  .mvp-info { min-height: 0; font-size: 12px; }
  .mvp-lbl { font-size: 10px; }
  .mvp-foot { position: absolute; top: 10px; right: 118px; width: 240px; gap: 6px; }
  .mvp-foot .btn { padding: 5px 10px; font-size: 13px; }
}

/* ---------- "Reconectando…" en grupo (22-10-2026, reconnect-ui.js) ---------- */
.rc { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(70,70,76,.72); backdrop-filter: grayscale(1) blur(1px); -webkit-backdrop-filter: grayscale(1) blur(1px); animation: fade .25s ease-out; }
.rc.hidden { display: none; }
.rc-box { width: min(420px, 100%); text-align: center; padding: 18px 20px 20px; border-radius: 14px; color: #fff;
  background: linear-gradient(180deg, #4a4f5c, #2e323c); border: 3px solid #f4f8ff; box-shadow: 0 0 0 3px #15171d, 0 18px 50px rgba(0,0,0,.6); text-shadow: 2px 2px 0 #15171d; }
.rc-scene { position: relative; height: 150px; }
.rc-cables { position: absolute; left: 0; right: 0; top: 34px; width: 100%; height: 120px; overflow: visible; z-index: 2; }
.rc-wire { fill: none; stroke: #1b1d22; stroke-width: 7; stroke-linecap: round; }
.rc-wire.l { stroke: #e04848; } .rc-wire.r { stroke: #3a6fe0; }
.rc-plug rect { fill: #c9ced8; stroke: #15171d; stroke-width: 2; }
.rc-plug.l { animation: rcL 1.6s ease-in-out infinite; }
.rc-plug.r { animation: rcR 1.6s ease-in-out infinite; }
.rc-spark path { fill: #ffe24a; stroke: #b07400; stroke-width: 1.5; transform-origin: 160px 62px; animation: rcS 1.6s ease-in-out infinite; }
@keyframes rcL { 0%, 100% { transform: translateX(-26px); } 45%, 60% { transform: translateX(4px); } }
@keyframes rcR { 0%, 100% { transform: translateX(26px); } 45%, 60% { transform: translateX(-4px); } }
@keyframes rcS { 0%, 42%, 66%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.15); } 58% { opacity: .8; transform: scale(.9); } }
.rc-mon { position: absolute; left: 50%; top: 0; z-index: 1; transform: translateX(-50%); animation: rcHop 1.6s ease-in-out infinite; }
.rc-mon canvas { image-rendering: pixelated; display: block; }
@keyframes rcHop { 0%, 40%, 70%, 100% { transform: translate(-50%, 0); } 52% { transform: translate(-50%, -8px); } }
.rc-title { margin: 8px 0 4px; font-size: 24px; }
.rc-dots i { font-style: normal; animation: rcD 1.2s infinite; } .rc-dots i:nth-child(2) { animation-delay: .2s; } .rc-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes rcD { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.rc-why { margin: 0 0 14px; color: #d6dae4; font-size: 15px; }
@media (max-height: 420px) { .rc-scene { height: 120px; transform: scale(.8); transform-origin: top center; margin-bottom: -24px; } .rc-title { font-size: 20px; } }

/* ---------- Sala con Check (22-10-2026): tarjetas de luchador ---------- */
.lob-card { position: relative; justify-content: flex-start; transition: border-color .2s, box-shadow .2s; }
.lob-card.me { border-color: var(--gold); }
.lob-card.ready { border-color: var(--green); box-shadow: 0 0 0 3px rgba(95,224,138,.3), 0 0 24px rgba(95,224,138,.45); }
.lob-ped { display: flex; align-items: flex-end; justify-content: center; width: 100%; min-height: 96px;
  background: radial-gradient(ellipse at 50% 92%, rgba(255,255,255,.18) 0 28%, transparent 30%); }
.lob-stamp { position: absolute; top: 8px; right: -6px; transform: rotate(12deg); background: var(--green); color: #06210f; font-weight: 700;
  font-size: 13px; padding: 2px 10px; border-radius: 6px; text-shadow: none; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 1; }
.lob-card.ready .lob-stamp { opacity: 1; }
.lob-mv { display: grid; grid-template-columns: repeat(4, 24px); gap: 4px; margin: 6px auto 4px; }
.lob-mv-empty { width: 24px; height: 24px; border-radius: 6px; border: 2px dashed rgba(185,203,240,.35); background: rgba(255,255,255,.06); display: block; }
.lob-st { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; text-shadow: none; }
.lob-st.wait { background: rgba(255,255,255,.12); color: var(--muted); }
.lob-st.pick { background: var(--gold); color: #3a2a00; }
.lob-st.ready { background: var(--green); color: #06210f; }
.lob-mine { display: grid; gap: 6px; width: 100%; padding: 0 4px; margin-top: 4px; }
.lob-mine .btn { padding: 6px 8px; font-size: 13px; }
.lob-check { background: linear-gradient(180deg, #7df0a6, #2f9e5a); color: #06210f; text-shadow: none; }
.lob-check.on { background: linear-gradient(180deg, #2f9e5a, #1d6e3c); color: #dfffe9; }
.lob-check.is-off { filter: grayscale(1) brightness(.75); }
@media (max-height: 520px) {
  .lob-ped { min-height: 0; }
  .lob-mv { grid-template-columns: repeat(8, 16px); gap: 2px; margin: 2px auto; }
  .lob-mv .ico, .lob-mv svg, .lob-mv canvas, .lob-mv img { width: 16px !important; height: 16px !important; }
  .lob-mv-empty { width: 16px; height: 16px; }
  .lob-mine { grid-template-columns: 1fr 1fr; }
  .lob-ped canvas { height: min(44px, 11vh) !important; }
  .lob-card.me .lob-ped { display: none; }   /* (sin sitio: tu tarjeta lleva los botones) */
  .lob-mine .btn { padding: 4px 6px; font-size: 11px; }
}

/* =====================================================================
 * Barra de arriba «tarjeta de entrenador e iconos redondos» (23-10-2026; propuesta C de
 * Proyecto/propuestas/propuestas-barra-arriba.html). Antes: píldoras y botones cuadrados crema,
 * con los tickets, el sonido, la pantalla completa y Salir a la vista.
 * ===================================================================== */
#topbar { --tb-r: 44px; --tb-dark: rgba(14,20,44,.86); --tb-line: rgba(244,248,255,.9); gap: 6px; }
#topbar .tb-trainer {
  height: var(--tb-r); padding: 0 16px 0 4px; gap: 10px; margin-right: 6px; border-radius: 24px;
  background: var(--tb-dark); border: 2px solid var(--tb-line); box-shadow: 0 3px 0 rgba(0,0,0,.3);
  color: #fff; text-shadow: 2px 2px 0 #000; max-width: 240px;
}
#topbar .tb-ava {
  flex: none; width: calc(var(--tb-r) - 10px); height: calc(var(--tb-r) - 10px); border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(#ffe79a, #e0a92e); border: 2px solid #fff;
}
#topbar .tb-ava img { width: 20px; height: 20px; }
#topbar .tb-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
#topbar .tb-who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El estado del guardado, en texto y con su color (antes un cuadradito). */
#topbar .tb-who .sync { display: block; width: auto; height: auto; margin: 0; border-radius: 0; box-shadow: none; background: none;
  font-size: 11px; font-weight: 500; text-shadow: none; white-space: nowrap; }
#topbar .tb-who .sync.ok { color: #9fe8b4; }
#topbar .tb-who .sync.syncing, #topbar .tb-who .sync.pending { color: #ffe27a; }
#topbar .tb-who .sync.offline { color: #ff9aa4; }
#topbar .tb-who .sync.local, #topbar .tb-who .sync.guest { color: #b9cbf0; }

#topbar .btn.tb-round {   /* (.btn.tb-round: gana a «:is(#topbar, #scr-menu) .btn.ghost», crema) */
  position: relative; width: var(--tb-r); height: var(--tb-r); min-height: 0; padding: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--tb-dark); border: 2px solid var(--tb-line);
  box-shadow: 0 3px 0 rgba(0,0,0,.3); color: #fff; text-shadow: none;
}
#topbar .btn.tb-round:hover:not(:disabled), #topbar .btn.tb-round.on { background: #2c519f; }
#topbar .tb-round img { width: 22px; height: 22px; }
#topbar .tb-round:disabled { opacity: 1; filter: none; cursor: default; }   /* (el ticket que aún no está listo se ve normal; antes gris) */
/* Novedades: el punto rojo pasa a ser la etiqueta «NEW». */
#topbar .news-btn > span { display: none; }
#topbar .news-btn .dot { top: -7px; right: -11px; width: auto; height: auto; padding: 0 5px; border-radius: 8px; border: 2px solid #fff;
  background: #ff5f6d; box-shadow: none; font: 700 10px/14px var(--font); font-style: normal; color: #fff; }
#topbar .news-btn .dot::after { content: 'NEW'; }
/* Ticket diario: el tiempo debajo del icono; listo, se pone violeta y late. */
#topbar .daily-btn > span { display: block; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); margin: 0;
  padding: 0 5px; border-radius: 6px; border: 2px solid #fff; background: #5d2a8c; color: #fff;
  font: 700 10px/13px var(--font); white-space: nowrap; }
#topbar .btn.daily-btn.ready { background: #8a3fd0; border-color: var(--tb-line); animation: tb-daily 1.4s ease-in-out infinite; }
#topbar .daily-btn.ready > span { background: #8a3fd0; }
@keyframes tb-daily { 50% { box-shadow: 0 0 0 5px rgba(178,123,255,.4); } }
/* Silencio: la rueda lleva una bocina tachada chiquita. */
#topbar #btn-settings.muted::after { content: ''; position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%;
  background: #ff5f6d; border: 2px solid #fff; }

/* Menú rápido de la rueda: sonido, pantalla completa, más ajustes y Salir. */
#topbar .quick-menu {
  --ink: #fff; --muted: #b9cbf0; --gold: #ffd25a;
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 270px; padding: 10px;
  background: rgba(14,20,44,.96); border: 2px solid var(--tb-line); border-radius: 14px; box-shadow: 0 4px 0 rgba(0,0,0,.35);
  color: #fff; text-shadow: none;
}
#topbar .quick-menu.hidden { display: none; }
#topbar .qm-sound { padding: 2px 4px 0; }
#topbar .qm-sound .snd-head { margin-bottom: 8px; }
#topbar .qm-sound .snd-mute { width: 34px; height: 34px; border: 2px solid rgba(255,255,255,.35); background: transparent; }
#topbar .qm-sound .snd-row { margin-bottom: 8px; font-size: 13px; }
#topbar .qm-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px;
  background: transparent; color: #fff; font: 700 14px var(--font); text-align: left; cursor: pointer;
}
#topbar .qm-row.hidden { display: none; }
#topbar .qm-row:hover, #topbar .qm-row:focus-visible { background: #2c519f; outline: none; }
#topbar .qm-row img { width: 20px; height: 20px; }
#topbar .qm-sw { margin-left: auto; flex: none; width: 34px; height: 18px; border-radius: 9px; background: #55607d; position: relative; }
#topbar .qm-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
#topbar .qm-sw.on { background: #5fe08a; }
#topbar .qm-sw.on::after { left: auto; right: 2px; }
#topbar .quick-menu hr { border: 0; border-top: 2px solid rgba(255,255,255,.15); margin: 6px 2px; }
#topbar .qm-out { color: #ff9aa4; }

/* Pantallas chicas: sólo el avatar (sin nombre) e iconos algo más chicos. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  #topbar { --tb-r: 38px; gap: 5px; }
  #topbar .tb-trainer { padding: 0 3px; margin-right: 2px; max-width: none; }
  #topbar .tb-who { display: none; }
  #topbar .tb-round img, #topbar .tb-ava img { width: 18px; height: 18px; }
  #topbar .daily-btn > span { display: block; }
}
@media (orientation: landscape) and (max-height: 340px) { #topbar { --tb-r: 32px; } }

/* «Descargar PokéHorde» (29-10-2026; js/ui/install-ui.js): primer botón de la barra, a la izquierda de la tarjeta de entrenador, con su
 * mismo estilo (píldora oscura, borde claro, sombra abajo) y el icono en un círculo verde como el avatar. Sale sólo en PC. */
#topbar .btn.tb-install {
  display: flex; align-items: center; gap: 9px; flex: none; margin-right: 4px;
  height: var(--tb-r); min-height: 0; padding: 0 16px 0 4px; border-radius: 24px;
  background: var(--tb-dark); border: 2px solid var(--tb-line); box-shadow: 0 3px 0 rgba(0,0,0,.3);
  color: #fff; text-shadow: 2px 2px 0 #000; font-size: 15px; font-weight: 700; white-space: nowrap;
}
#topbar .btn.tb-install.hidden { display: none; }
/* Sólo en el menú principal: la barra también se ve en la elección de mapa y de ataques, y ahí no sale. */
body:has(#scr-menu.hidden) #topbar .btn.tb-install { display: none; }
#topbar .btn.tb-install:hover:not(:disabled) { background: #2c519f; }
#topbar .btn.tb-install:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
#topbar .tb-ins-ico {
  flex: none; width: calc(var(--tb-r) - 10px); height: calc(var(--tb-r) - 10px); border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(#8ff0ae, #2fae5c); border: 2px solid #fff;
}
#topbar .tb-ins-ico img { width: 20px; height: 20px; }
#topbar .btn.tb-install > .ins-t { display: block; }
#topbar .btn.tb-install > .ins-short { display: none; }
/* PC con la ventana chica (hasta 1100 px): sólo «Descargar»; hasta 800 px, sólo el icono (queda el title). */
@media (max-width: 1100px) {
  #topbar .btn.tb-install > .ins-long { display: none; }
  #topbar .btn.tb-install > .ins-short { display: block; }
}
@media (max-width: 800px) {
  #topbar .btn.tb-install { padding: 0 4px; gap: 0; }
  #topbar .btn.tb-install > .ins-t { display: none; }
}

/* =====================================================================
 * Cartas de nivel verticales (23-10-2026; diseño B de Proyecto/propuestas/propuestas-cartas-nivel.html).
 * Antes: filas horizontales (.cards en columna). Sólo #cards (nivel, premio de la grieta y reemplazos)
 * lleva .vcards; las del objeto y el vínculo siguen como estaban.
 * ===================================================================== */
#scr-levelup > .box { width: min(980px, 100%); }
.cards.vcards {
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 210px)); justify-content: center;
  gap: 14px; width: 100%; padding-top: 12px; flex-direction: initial;
}
.cards.vcards .card.vcard {
  --rc: #8fa3c4;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center;
  padding: 10px 12px 0; min-height: 300px; overflow: visible;
  border: 3px solid var(--rc); border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 30%, #1d2f6e) 0%, #1a2a62 100%);
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
.cards.vcards .card.vcard.r-none { --rc: rgba(244,248,255,.35); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18)); padding-bottom: 12px; min-height: 0; }
.cards.vcards .card.vcard:hover { transform: translateY(-4px); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 42%, #1d2f6e) 0%, #1d2f6e 100%); border-color: var(--rc); }
.cards.vcards .card.vcard.r-none:hover { background: rgba(255,255,255,.1); }
.vcard .vc-new {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 1;
  padding: 1px 12px; border-radius: 12px; background: #fff; color: #1b2240; border: 3px solid var(--rc);
  font-size: 12px; font-weight: 700; text-transform: uppercase; text-shadow: none; white-space: nowrap;
}
.vcard .vc-top { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; }
.vcard .vc-top .tag-chip { font-size: 12px; }
.cards.vcards .vcard .key { padding: 0 7px; line-height: 22px; border-radius: 6px; }
.vcard .vc-ico {
  width: 92px; height: 92px; border-radius: 50%; margin: 6px 0 8px; display: grid; place-items: center; flex: none;
  border: 3px solid rgba(255,255,255,.35); box-shadow: inset 0 0 0 4px rgba(0,0,0,.12);
}
.vcard .vc-ico img { width: 40px; height: 40px; }
.cards.vcards .vcard .txt { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cards.vcards .vcard .nm { font-size: 18px; justify-content: center; line-height: 1.15; }
.cards.vcards .vcard.evo .nm { color: var(--gold); font-size: 16px; }
.cards.vcards .vcard .ds { font-size: 14px; line-height: 1.3; color: #d6e0f7; }
.vcard .vc-lv { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 6px; font-size: 13px; color: #fff; }
.vcard .vc-lv > span { white-space: nowrap; }
.vcard .vc-dots { display: inline-flex; gap: 3px; font-style: normal; }
.vcard .vc-dots b { width: 9px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.22); }
.vcard .vc-dots b.on { background: #fff; }
.vcard .vc-dots b.next { background: var(--gold); animation: vcNext 0.9s ease-in-out infinite; }
@keyframes vcNext { 50% { opacity: .25; } }
.cards.vcards .vcard.pevo .evo-for { justify-content: center; font-size: 12px; }
.vcard .vc-again { display: none; font-size: 11px; color: var(--gold); font-weight: 700; }
.cards.vcards .vcard .veto-btn { margin: 6px 0 2px; }
.vcard .vc-band {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px -12px 0; align-self: stretch;
  padding: 8px 6px; background: var(--rc); color: #1b1b28; border-radius: 0 0 10px 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; text-shadow: none; white-space: nowrap;
}
.vcard .vc-band svg { width: 16px; height: 16px; flex: none; }
.vcard.r-sup .vc-band svg path:last-child { stroke: var(--rc); }
/* Evolución: además, el brillo dorado de siempre. */
.cards.vcards .vcard.evo { animation: pevoGlow 1.6s ease-in-out infinite; }
.cards.vcards .vcard.pevo { border-color: var(--gold); }
/* Cooperativo: la elegida queda marcada mientras eligen los demás. */
.cards.vcards.done .vcard.picked { box-shadow: 0 0 0 3px var(--gold), 0 4px 0 rgba(0,0,0,.3); }

/* Celular: de 2 en 2 y sin descripción; al tocar una se abre (se ve la descripción) y el segundo toque la elige. */
@media (max-width: 760px) {
  .cards.vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
  .cards.vcards .card.vcard { min-height: 0; padding: 8px 8px 0; }
  .vcard .vc-ico { width: 64px; height: 64px; margin: 2px 0 6px; }
  .vcard .vc-ico img { width: 32px; height: 32px; }
  .cards.vcards .vcard .nm { font-size: 15px; }
  .vcard .vc-band { margin: 8px -8px 0; padding: 6px 4px; font-size: 11px; gap: 5px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .cards.vcards { grid-template-columns: repeat(var(--n, 3), minmax(0, 180px)); gap: 8px; padding-top: 10px; }
  .cards.vcards .card.vcard { min-height: 0; padding: 6px 8px 0; }
  .vcard .vc-ico { width: 52px; height: 52px; margin: 0 0 4px; }
  .vcard .vc-ico img { width: 28px; height: 28px; }
  .cards.vcards .vcard .nm { font-size: 14px; }
  .vcard .vc-band { margin: 6px -8px 0; padding: 4px; font-size: 10px; }
  .vcard .vc-new { top: -11px; font-size: 10px; padding: 0 8px; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .cards.vcards .vcard .ds, .cards.vcards .vcard .veto-btn { display: none; }
  .cards.vcards .vcard.open .ds, .cards.vcards .vcard.open .veto-btn, .cards.vcards .vcard.open .vc-again { display: block; }
  .cards.vcards .vcard .ds { font-size: 12px; }
  .cards.vcards .vcard.open { box-shadow: 0 0 0 3px #fff, 0 4px 0 rgba(0,0,0,.3); }
}
@media (prefers-reduced-motion: reduce) { .vcard .vc-dots b.next, .cards.vcards .vcard.evo { animation: none; } }

/* (29-10-2026, lo pidió el dueño) Mini animación de los ataques en las cartas de nivel (G.RunUI, Prev): en las de ataques el
   círculo del icono pasa a ser un recuadro 16:9 (antes, el círculo en todas). La demo (un iframe de preview.html) va en una
   capa encima (#lvp-layer) colocada sobre el recuadro; no recibe el ratón: el clic sigue siendo de la carta.
   En el celular el recuadro sólo sale en la carta abierta; las cerradas siguen con el círculo. */
.vcard .vc-ico.vc-pv {
  width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; margin: 6px 0 8px;
  border: 2px solid rgba(255,255,255,.3); box-shadow: inset 0 0 0 3px rgba(0,0,0,.14);
}
#lvp-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; }
.lvp-win {
  position: absolute; left: 0; top: 0; box-sizing: border-box; overflow: hidden; pointer-events: none;
  border-radius: 10px; border: 2px solid rgba(255,255,255,.3); background: #0d1626;
  opacity: 0; transition: opacity .3s ease-out; will-change: transform;
}
.lvp-win.on { opacity: 1; }
.lvp-win iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.lvp-ico {
  position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10,16,38,.78); border: 1px solid rgba(255,255,255,.35);
}
.lvp-ico img { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .cards.vcards .vcard:not(.open) .vc-ico.vc-pv { width: 64px; height: 64px; aspect-ratio: auto; border-radius: 50%; margin: 2px 0 6px; border-width: 3px; }
  .cards.vcards .vcard.open .vc-ico.vc-pv { margin: 2px 0 6px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .cards.vcards .vcard:not(.open) .vc-ico.vc-pv { width: 52px; height: 52px; aspect-ratio: auto; border-radius: 50%; margin: 0 0 4px; border-width: 3px; }
  .cards.vcards .vcard.open .vc-ico.vc-pv { width: 80%; margin: 0 0 4px; }   /* un poco más pequeño: con la carta abierta tiene que caber «Cambiar opciones» */
}

/* (23-10-2026) Tarjeta del modo Ditto en «Elegir mapa»: la ilustración y el cartel NEW. */
.stg-card.stg-ditto { border-color: #c98ad8; }
.stg-card.stg-ditto .stg-reg { color: #e3a8f0; }
.stg-dimg { object-fit: cover; image-rendering: auto; background: #6ccb7c; }
.stg-dnew { position: absolute; top: -9px; right: 12px; z-index: 1; padding: 0 8px; border-radius: 8px; border: 2px solid #fff;
  background: #ff5f6d; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px; }

/* (23-10-2026) Modo Ditto: la oferta de habilidades en lista, con el reemplazo debajo (propuesta 4B). */
.box.dit-box { width: min(520px, 100%); }
.dit-list { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; }
.dit-row { --rc: #ff5a5a; display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit;
  border: 2px solid var(--rc); border-radius: 10px; background: rgba(0,0,0,.22); text-align: left; }
.dit-row:hover, .dit-row.open { background: color-mix(in srgb, var(--rc) 22%, rgba(0,0,0,.25)); }
.dit-row b { font-size: 15px; }
.dit-row .dit-role { margin-left: auto; color: var(--rc); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.dit-k { font-size: 11px; color: var(--muted); border: 1px solid rgba(244,248,255,.35); border-radius: 5px; padding: 0 5px; }
body.touch .dit-k { display: none; }
.dit-rep { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; margin: -2px 0 4px; }
.dit-rep > small { width: 100%; text-align: right; color: var(--muted); font-size: 12px; }
.dit-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 52px; padding: 4px 2px 3px; cursor: pointer; font: inherit; color: #ffd23f;
  border: 2px solid #fff; border-radius: 8px; background: rgba(10,16,40,.8); }
.dit-slot small { font-size: 10px; font-weight: 700; }
.dit-slot .dit-k { position: absolute; top: -7px; left: -5px; background: #0d1530; color: #fff; }
.dit-slot:hover:not(:disabled) { background: #2c519f; }
.dit-slot.off { opacity: .35; cursor: not-allowed; }
@media (max-width: 760px) { .dit-row b { font-size: 13px; } .dit-row .dit-role { font-size: 9px; } }
.stg-dnew.soon { background: #6b6f80; }   /* (23-10-2026) modo Ditto aún cerrado */
/* (23-10-2026) Ataques legendarios sin nada que aprender: botón gris apagado en vez de una línea de texto */
.mart-card .mc-buy.mc-none { background: #5a6078; color: #d6dae6; text-shadow: none; font-size: 13px; cursor: default; box-shadow: none; }

/* ===== (23-10-2026) PC de Ditto (dittopc-ui.js): marco de Ditto y dentro el menú azul de la PC ===== */
#scr-dpc { display: flex; align-items: center; justify-content: center; padding: 12px; }
#scr-dpc.hidden { display: none; }
.dpc-frame { position: relative; width: min(94vw, calc((100dvh - 24px) * 792 / 797), 660px); aspect-ratio: 792 / 797;
  background: url(../assets/ditto/frame.webp) center / 100% 100% no-repeat; image-rendering: pixelated; }
.dpc-in { position: absolute; left: 7.4%; top: 14.6%; right: 16.6%; bottom: 7.7%; display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: linear-gradient(180deg, var(--box1), var(--box2)); border: 3px solid var(--edge); border-radius: 8px; overflow: hidden; }
.dpc-hd { display: flex; align-items: center; gap: 8px; font-size: 18px; text-shadow: 2px 2px 0 #283040; }
.dpc-hd small { font-size: 13px; color: #cfe0ff; font-weight: 600; }
.dpc-ball { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #222; background: linear-gradient(#e83838 46%, #222 46% 56%, #fff 56%); flex: none; }
.dpc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.1fr; gap: 8px; }
.dpc-boxwrap { border-radius: 10px; padding: 6px; border: 2px solid rgba(244,248,255,.18); display: flex; flex-direction: column; min-height: 0;
  background: repeating-linear-gradient(45deg, rgba(61,139,255,.10) 0 10px, rgba(61,139,255,.04) 10px 20px), rgba(0,0,0,.25); }
.dpc-boxbar { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.dpc-boxbar b { flex: 1; text-align: center; font-size: 12px; padding: 3px; border-radius: 6px; background: rgba(0,0,0,.3); }
.dpc-boxbar .btn { padding: 2px 8px; min-width: 0; }
.dpc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; align-content: start; }
.dpc-slot { position: relative; aspect-ratio: 8 / 7; border-radius: 8px; border: 2px solid rgba(244,248,255,.14); background: rgba(13,22,38,.55);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.dpc-slot img { width: 62%; height: auto; image-rendering: pixelated; border-radius: 4px; }
.dpc-slot.empty { cursor: default; background: rgba(13,22,38,.3); border-style: dashed; }
.dpc-slot.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,210,63,.35); }
.dpc-slot:not(.empty):hover { border-color: rgba(244,248,255,.6); }
.dpc-st { position: absolute; right: 3px; top: 1px; font-size: 10px; color: var(--gold); }
.dpc-sh { position: absolute; left: 3px; top: 1px; font-size: 10px; color: #ff7a9a; }
.dpc-fv { position: absolute; left: 3px; bottom: 1px; font-size: 10px; color: #ff9ed8; }
.dpc-detail { border-radius: 10px; padding: 8px; background: rgba(0,0,0,.25); border: 2px solid rgba(244,248,255,.18); display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; overflow: auto; }
.dpc-pic { width: 72px; height: 72px; border-radius: 10px; border: 3px solid #5a8ef0; background: linear-gradient(#1b2d5a, #0f1e40); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dpc-pic img { width: 100%; height: 100%; image-rendering: pixelated; }
.dpc-nm { font-weight: 800; font-size: 15px; }
.dpc-stars { color: var(--gold); letter-spacing: 1px; } .dpc-stars span { opacity: .3; }
.dpc-chip { font-size: 11px; padding: 1px 8px; border-radius: 6px; background: #d8d0b8; color: #333; font-weight: 700; }
.dpc-chip.sh { background: #ff9ac0; color: #4a0a24; }
.dpc-ev { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 3px 6px; align-items: center; font-size: 11px; margin-top: 2px; }
.dpc-ev i { display: block; height: 6px; border-radius: 3px; background: #0b1a3c; overflow: hidden; } .dpc-ev i u { display: block; height: 100%; background: #5fe08a; }
.dpc-ev b { font-size: 11px; }
.dpc-iv { font-size: 11px; color: #cfe0ff; }
.dpc-bar { display: flex; gap: 8px; } .dpc-bar .btn { flex: 1; } .dpc-bar .btn.gold { flex: 2; }
/* (en el móvil el marco es pequeño: la caja en una fila que se desliza y la ficha compacta, con los EVs en dos columnas) */
@media (max-width: 560px) {
  .dpc-in { padding: 5px; gap: 4px; } .dpc-hd { font-size: 13px; gap: 5px; } .dpc-hd small { font-size: 11px; } .dpc-ball { width: 14px; height: 14px; }
  .dpc-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 4px; }
  .dpc-boxwrap { padding: 4px; } .dpc-boxbar { display: none; }
  .dpc-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 52px; overflow-x: auto; gap: 4px; padding-bottom: 2px; }
  .dpc-slot.empty { display: none; }
  .dpc-detail { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'pic nm' 'pic st' 'pic ch' 'ev ev' 'iv iv'; gap: 1px 8px; align-items: center; justify-items: start; padding: 5px 7px; }
  .dpc-pic { grid-area: pic; width: 50px; height: 50px; border-width: 2px; } .dpc-nm { grid-area: nm; font-size: 13px; } .dpc-stars { grid-area: st; font-size: 12px; } .dpc-chip { grid-area: ch; font-size: 10px; }
  .dpc-ev { grid-area: ev; grid-template-columns: auto 1fr auto auto 1fr auto; gap: 2px 4px; font-size: 10px; } .dpc-ev b { font-size: 10px; } .dpc-iv { grid-area: iv; justify-self: center; font-size: 10px; }
  .dpc-bar .btn { padding: 6px 8px; font-size: 14px; }
}

/* (23-10-2026) Menú: estrellas, EVs e IVs del compañero (propuesta B de propuestas-stats-menu.html) */
#scr-menu .mp-stats { width: min(300px, 92%); margin: 8px auto 0; padding: 7px 10px 8px; text-align: left;
  background: linear-gradient(180deg, #2c519f, #1a3170); border: 3px solid #f4f8ff; border-radius: 8px; box-shadow: 0 0 0 3px #0b1838, inset 0 0 0 2px #5b83d6; }
.mp-stats .mp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.mp-stats .mp-leg { display: flex; gap: 10px; font-size: 11px; color: var(--muted); }
.mp-stats .mp-leg span::before { content: ''; display: inline-block; width: 10px; height: 6px; margin-right: 4px; vertical-align: middle; border-radius: 1px; }
.mp-stats .mp-leg .e::before { background: #5fc8ff; } .mp-stats .mp-leg .i::before { background: #ffd23f; }
.mp-stats .mp-row { display: grid; grid-template-columns: 74px 1fr 54px; gap: 8px; align-items: center; margin: 4px 0; font-size: 13px; color: #fff; }
.mp-stats .mp-bars { display: grid; gap: 2px; }
.mp-stats .mp-bar { display: block; height: 7px; background: #0b1838; border: 1px solid #5b83d6; border-radius: 2px; position: relative; overflow: hidden; }
.mp-stats .mp-bar u { position: absolute; left: 0; top: 0; bottom: 0; text-decoration: none; }
.mp-stats .mp-bar.ev u { background: linear-gradient(180deg, #9fe2ff, #5fc8ff); }
.mp-stats .mp-bar.iv u { background: linear-gradient(180deg, #ffe88a, #ffd23f); }
.mp-stats .mp-t { font-size: 12px; text-align: right; color: #dce6ff; } .mp-stats .mp-t.up { color: var(--green); } .mp-stats .mp-t.dn { color: var(--red); }
@media (max-height: 660px) {
  #scr-menu .mp-stats { margin-top: 4px; padding: 5px 8px 6px; }
  .mp-stats .mp-row { margin: 2px 0; font-size: 12px; grid-template-columns: 66px 1fr 50px; }
  .mp-stats .mp-bar { height: 5px; }
}
/* Móvil en horizontal: más chico, sin leyenda ni barras (las estrellas, a la izquierda de las filas) */
@media (max-height: 520px) {
  #scr-menu .mp-stats { width: min(180px, 96%); margin-top: 2px; padding: 3px 7px 4px; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
  .mp-stats .mp-top { grid-row: 1 / span 4; margin: 0; flex-direction: column; } .mp-stats .mp-leg { display: none; }
  .mp-stats .mp-top .pc-stars { display: flex; flex-direction: column; line-height: 1; }
  .mp-stats .mp-top .pc-stars i { font-size: 11px !important; }
  .mp-stats .mp-row { grid-template-columns: 1fr auto; gap: 6px; font-size: 10px; margin: 0; }
  .mp-stats .mp-t { font-size: 10px; }
  .mp-stats .mp-bars { display: none; }   /* (no entran: sólo el total de cada stat) */
}
@media (orientation: landscape) and (max-height: 340px) { #scr-menu .mp-stats { display: none; } }

/* ====== (24-10-2026) Social: salas por región y amigos (propuesta A1 de propuestas-social-a.html) ====== */
#scr-friends > .box.soc { display: flex; flex-direction: column; overflow: hidden; }
#scr-friends .soc-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 12px; margin-top: 6px; }
#scr-friends .soc-main > .box { min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px; margin: 0; }
.soc-head { display: flex; align-items: baseline; gap: 10px; flex: none; } .soc-head b { font-size: 22px; }
.soc-regions { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;   /* (02-11-2026: 4 regiones con Asia; antes 3 y gap 10px) */ margin: 8px 0 10px; }
.soc-col { min-height: 0; overflow-y: auto; background: rgba(11,24,56,.45); border-radius: 8px; padding: 8px; border: 2px solid transparent; }
.soc-col.me { border-color: var(--gold); background: rgba(255,210,63,.07); }
.soc-col h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; font-size: 17px; cursor: pointer; }
.soc-col.me h3 { cursor: default; } .soc-col h3 .n { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; }
.soc-flag { width: 22px; height: 15px; border-radius: 3px; display: inline-block; flex: none; }
.soc-flag.f-eu { background: #1f4fb8; box-shadow: inset 0 0 0 4px #1f4fb8, inset 0 0 0 6px #ffd23f; }
.soc-flag.f-us { background: repeating-linear-gradient(180deg, #d6453b 0 2px, #fff 2px 4px); }
.soc-flag.f-la { background: linear-gradient(90deg, #2fa85a 50%, #ffd23f 50%); }
.soc-flag.f-as { background: radial-gradient(circle at 50% 50%, #ffd23f 0 4px, #d6453b 4.5px); }   /* (02-11-2026) Asia: sol sobre rojo */
.soc-room { display: block; width: 100%; text-align: left; font: inherit; color: #fff; padding: 0; background: #0f1e47; border: 2px solid #5b83d6; border-radius: 7px; overflow: hidden; margin-bottom: 8px; cursor: pointer; transition: transform .1s, border-color .1s; }
.soc-room:hover { transform: translateY(-2px); border-color: var(--gold); }
.soc-room.full { opacity: .5; cursor: default; } .soc-room.full:hover { transform: none; border-color: #5b83d6; }
.soc-room.mine { border-color: var(--gold); }
.soc-room .in { padding: 5px 7px 7px; } .soc-room .r1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; margin-top: 3px; }
.soc-room .r1 b { font-size: 13px; }
.soc-room .mons { display: flex; gap: 3px; } .soc-room .mons span { width: 26px; height: 26px; border-radius: 4px; background: #1a3170; display: grid; place-items: center; overflow: hidden; }
.soc-room .mons span.e { background: transparent; border: 1px dashed #5b83d6; }
.soc-mini { width: 26px; height: 26px; image-rendering: pixelated; display: block; }
.soc-map { height: 48px; position: relative; overflow: hidden; }
.soc-map::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 2px, transparent 2px 6px), repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 8px); }
.soc-map .lbl { position: absolute; left: 6px; top: 5px; z-index: 1; font-weight: 700; font-size: 13px; text-shadow: 2px 2px 0 #0a1430; }
.m-kanto { background: linear-gradient(135deg, #6fcf72, #3f9a4a); } .m-johto { background: linear-gradient(135deg, #b07a4a, #6e4526); } .m-hoenn { background: linear-gradient(135deg, #3fa86a, #2a6d8f); }
.m-sinnoh { background: linear-gradient(135deg, #e7eef8, #9fb3cf); } .m-teselia { background: linear-gradient(135deg, #8d95a3, #575e6a); } .m-kalos { background: linear-gradient(135deg, #efe3c9, #b9a172); }
.m-alola { background: linear-gradient(135deg, #f3dc9b, #5ec7d6); } .m-galar { background: linear-gradient(135deg, #6f7790, #3e4458); } .m-paldea { background: linear-gradient(135deg, #5a6b55, #2f3a33); } .m-ditto { background: linear-gradient(135deg, #c9a0e8, #8b5bc1); }
.soc-ping { display: inline-flex; gap: 2px; align-items: flex-end; height: 13px; vertical-align: middle; } .soc-ping i { width: 4px; background: #3a4a70; display: block; }
.soc-ping i:nth-child(1) { height: 5px; } .soc-ping i:nth-child(2) { height: 9px; } .soc-ping i:nth-child(3) { height: 13px; }
.soc-ping.g i { background: var(--green); } .soc-ping.y i:nth-child(-n+2) { background: var(--gold); } .soc-ping.r i:nth-child(1) { background: var(--red); }
.soc-ms { font-size: 11px; color: var(--muted); margin-left: 3px; white-space: nowrap; }
.soc-empty { width: 100%; font: inherit; font-size: 13px; color: var(--muted); background: transparent; border: 2px dashed #5b83d6; border-radius: 7px; padding: 12px 8px; cursor: pointer; }
.soc-empty:hover { color: #fff; border-color: #9fb6e8; }
.soc-foot { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .soc-foot .sub { margin-left: auto; font-size: 12px; }
.soc-big { font-size: 19px; padding: 10px 18px; }
.soc-friends #fr-add { margin: 0; flex: none; } .soc-friends #fr-add .field { min-width: 0; }
.soc-friends #fr-msg { margin: 4px 0; flex: none; } .soc-friends #fr-msg:empty { display: none; }
.soc-ftabs { display: flex; gap: 4px; margin: 8px 0; flex: none; }
.soc-ftabs button { flex: 1; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 4px; border-radius: 5px; border: 0; background: #0b1838; color: var(--muted); cursor: pointer; }
.soc-ftabs button.on { background: #3868c8; color: #fff; } .soc-ftabs button.gold:not(.on) { color: var(--gold); }
.soc-friends .fr-list { flex: 1; min-height: 0; max-height: none; }
.soc-friends .fr-row { padding: 6px 8px; gap: 8px; flex-wrap: wrap; } .soc-friends .fr-row b { font-size: 14px; }
.soc-friends .fr-who { display: flex; flex-direction: column; min-width: 0; } .soc-friends .fr-row .st { font-size: 11px; display: flex; align-items: center; gap: 4px; }
.soc-friends .fr-row .btn.small { padding: 3px 8px; font-size: 12px; }
.soc-av { width: 34px; height: 34px; flex: none; border-radius: 6px; background: #0f1e47; border: 2px solid #5b83d6; display: grid; place-items: center; font-weight: 700; overflow: hidden; }
.soc-av .soc-mini { width: 30px; height: 30px; }
.soc-friends #fr-me { flex: none; margin: 6px 0 0; font-size: 12px; }
.soc-mtabs { display: none; }
/* Crear sala */
#scr-newroom .nr { width: min(520px, 100%); }
.nr-l { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 6px; }
.nr-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.nr-opt { font: inherit; font-size: 14px; padding: 6px 11px; border-radius: 6px; border: 2px solid #5b83d6; background: #0f1e47; color: #fff; cursor: pointer; }
.nr-opt.on { background: var(--gold); color: #3a2400; border-color: #a55f00; font-weight: 700; } .nr-opt:disabled { opacity: .35; cursor: default; }
#nr-go { width: 100%; margin-top: 18px; }
/* Celular / ventanas angostas: una región por pestaña y otra para los amigos */
@media (max-width: 760px) {
  #scr-friends .soc-main { grid-template-columns: 1fr; }
  .soc-mtabs { display: flex; gap: 4px; flex: none; margin-top: 4px; }
  .soc-mtabs button { flex: 1; font: inherit; font-size: 12px; font-weight: 700; padding: 7px 2px; border-radius: 6px; border: 0; background: #0b1838; color: var(--muted); cursor: pointer; white-space: nowrap; }
  .soc-mtabs button.on { background: var(--gold); color: #3a2400; }
  #scr-friends[data-mtab="rooms"] .soc-friends { display: none !important; }
  #scr-friends[data-mtab="fr"] .soc-rooms { display: none !important; }
  .soc-regions { grid-template-columns: 1fr; margin: 6px 0 8px; }
  .soc-col { display: none; } .soc-col.mshow { display: block; }
  .soc-head .sub { font-size: 11px; } .soc-foot .sub { display: none; } .soc-foot .btn { flex: 1; } .soc-big { font-size: 16px; padding: 8px 10px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .soc-map { height: 30px; } .soc-room .in { padding: 3px 6px 5px; } .soc-room .mons span { width: 22px; height: 22px; } .soc-mini { width: 22px; height: 22px; }
  .soc-big { font-size: 15px; padding: 6px 12px; } .soc-head b { font-size: 17px; }
}
.soc-friends .fr-row { flex-wrap: nowrap; } .soc-friends .fr-who { flex: 1; overflow: hidden; } .soc-friends .fr-row .grow { display: none; } .soc-friends .btn.soc-x { padding: 3px 7px; }
/* (24-10-2026) Celular en horizontal (el juego en el celular se juega así): una región por pestaña, con sus salas en 3 columnas */
@media (orientation: landscape) and (max-height: 500px) {
  #scr-friends .soc-main { grid-template-columns: 1fr; margin-top: 4px; }
  .soc-mtabs { display: flex; gap: 4px; flex: none; margin-top: 2px; }
  .soc-mtabs button { flex: 1; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 2px; border-radius: 6px; border: 0; background: #0b1838; color: var(--muted); cursor: pointer; white-space: nowrap; }
  .soc-mtabs button.on { background: var(--gold); color: #3a2400; }
  #scr-friends[data-mtab="rooms"] .soc-friends { display: none !important; }
  #scr-friends[data-mtab="fr"] .soc-rooms { display: none !important; }
  .soc-regions { grid-template-columns: 1fr; margin: 4px 0 6px; }
  .soc-col { display: none; padding: 6px; } .soc-col.mshow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start; }
  .soc-col.mshow h3 { grid-column: 1 / -1; margin: 0; font-size: 15px; } .soc-col .soc-room, .soc-col .soc-empty { margin: 0; }
  #scr-friends .soc-main > .box { padding: 6px 8px; }
  .soc-head .sub { font-size: 11px; } .soc-foot .sub { font-size: 11px; }
  .soc-friends .fr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: start; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #scr-newroom .nr { width: min(640px, 100%); max-height: 96vh; overflow-y: auto; padding: 8px 14px; }
  #scr-newroom .row.between h2 { font-size: 18px; margin: 0; }
  .nr-l { margin: 6px 0 3px; font-size: 12px; } .nr-opt { padding: 3px 9px; font-size: 12px; } .nr-opts { gap: 4px; }
  #nr-go { margin-top: 10px; font-size: 15px; padding: 7px 12px; }
}

/* ====== (24-10-2026) Amigos: botón ☰ y panel lateral (propuesta B de propuestas-menu-matchmaking.html) ====== */
.fr-burger { position: fixed; left: max(14px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); z-index: 40; display: none; align-items: center; gap: 9px;
  height: 44px; padding: 0 14px 0 11px; font: inherit; font-weight: 700; font-size: 16px; color: #fff; cursor: pointer;
  background: #1a3170; border: 3px solid #f4f8ff; border-radius: 10px; box-shadow: 0 0 0 3px #0b1838; }
body:has(#scr-menu:not(.hidden):not(.covered)) .fr-burger { display: flex; }
body:has(#fr-drawer:not(.hidden)) .fr-burger { display: none !important; }
.fr-burger:hover { background: #2c519f; } .fr-burger small { color: var(--green); font-size: 12px; } .fr-burger small:empty { display: none; }
.fr-burger.req::after { content: ''; position: absolute; right: -5px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid #0b1838; }
.fr-burger .hb, .frd-hd .hb { display: grid; gap: 4px; } .fr-burger .hb i, .frd-hd .hb i { display: block; width: 20px; height: 3px; background: #fff; border-radius: 2px; }
.fr-drawer { position: fixed; inset: 0; z-index: 60; } .fr-drawer.hidden { display: none; }
.frd-dim { position: absolute; inset: 0; background: rgba(5,9,20,.5); animation: frdFade .18s ease-out; }
.frd-pan { position: absolute; left: 0; top: 0; bottom: 0; width: min(400px, 86vw); display: flex; flex-direction: column; gap: 6px;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: linear-gradient(180deg, #2c519f, #1a3170); border-right: 3px solid #f4f8ff; box-shadow: 3px 0 0 #0b1838, 20px 0 40px rgba(0,0,0,.45); animation: frdIn .2s ease-out; }
@keyframes frdIn { from { transform: translateX(-100%); } } @keyframes frdFade { from { opacity: 0; } }
.frd-hd { display: flex; align-items: center; gap: 10px; flex: none; } .frd-hd b { font-size: 22px; flex: 1; }
.frd-pan .soc-ftabs { margin: 2px 0; } .frd-pan #fr-msg { margin: 0; flex: none; } .frd-pan #fr-msg:empty { display: none; }
.frd-pan .fr-list { flex: 1; min-height: 0; max-height: none; }
.frd-pan .fr-row { padding: 6px 8px; gap: 8px; flex-wrap: nowrap; } .frd-pan .fr-row b { font-size: 15px; }
.frd-pan .fr-who { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow: hidden; } .frd-pan .fr-row .st { font-size: 12px; display: flex; align-items: center; gap: 4px; }
.frd-pan .fr-row .grow { display: none; } .frd-pan .fr-row .btn.small { padding: 3px 9px; font-size: 12px; } .frd-pan .btn.soc-x { padding: 3px 7px; }
.frd-pan #fr-me { flex: none; margin: 0; font-size: 12px; } .frd-pan #fr-add { flex: none; margin: 0; } .frd-pan #fr-add .field { min-width: 0; }
/* Matchmaking: sin el panel de amigos, las salas ocupan todo */
#scr-friends .soc-main { grid-template-columns: 1fr !important; }
#menu-mm-sub ~ *, .menu-item[data-go="mm"] .mi-ico { animation: mmPulse 2.4s ease-in-out infinite; }
@keyframes mmPulse { 50% { transform: rotate(-10deg) scale(1.08); } }
@media (orientation: landscape) and (max-height: 500px) {
  .fr-burger { height: 34px; font-size: 13px; padding: 0 10px 0 8px; top: 8px; left: 8px; } .fr-burger .hb i { width: 16px; }
  .frd-pan { gap: 4px; padding-top: 8px; } .frd-hd b { font-size: 17px; } .frd-pan .fr-row { padding: 3px 6px; }
}

/* ====== (24-10-2026) Ranking: «Cambia el color de tu nombre» (propuesta A de propuestas-ranking-colores.html) ====== */
.rk-sup { flex: none; display: flex; align-items: center; gap: 14px; background: rgba(11,24,56,.6); border: 2px dashed var(--gold); border-radius: 10px; padding: 8px 12px; }
.rk-sup.hidden { display: none; }
.rk-sup-l { flex: 1; min-width: 0; } .rk-sup-l > b { font-size: 15px; color: #ffe9a0; }
.rk-tiers { display: flex; gap: 8px; margin: 6px 0 3px; }
.rk-tier { flex: 1; text-align: center; background: #0f1e47; border: 2px solid #2c4a8a; border-radius: 8px; padding: 4px 6px; display: flex; flex-direction: column; }
.rk-tier b { font-size: 16px; } .rk-tier small { color: #c8d8ff; font-size: 12px; }
.rk-sup-n { color: #9fb1d6; font-size: 11px; }
.rk-heart { flex: none; font-size: 16px; padding: 10px 16px; animation: rkBeat 1.4s ease-in-out infinite; }
@keyframes rkBeat { 15% { transform: scale(1.06); } 30% { transform: scale(1); } 45% { transform: scale(1.04); } 60% { transform: scale(1); } }
.nmc.gold { color: #ffd23f; text-shadow: 0 0 6px rgba(255,210,63,.6); }
.nmc.red { color: #ff5f6d; text-shadow: 0 0 6px rgba(255,95,109,.6); }
.nmc.silver { background: linear-gradient(90deg, #4fa3d6, #e6f7ff, #94d4f5, #ffffff, #4fa3d6); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 3px rgba(150,215,250,.6)); animation: nmShine 5s linear infinite; }   /* (30-10-2026) plateado */
.nmc.shiny { background: linear-gradient(90deg, #ff8ad8, #ffd23f, #5fe08a, #5fc8ff, #c47bff, #ff8ad8); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nmShine 3s linear infinite; }
@keyframes nmShine { to { background-position: 300% 0; } }
@media (orientation: landscape) and (max-height: 500px) {
  .rk-sup { padding: 4px 8px; gap: 8px; } .rk-sup-l > b { font-size: 12px; } .rk-sup-n { display: none; }
  .rk-tiers { margin: 3px 0 0; gap: 4px; } .rk-tier { padding: 2px 4px; flex-direction: row; justify-content: center; gap: 5px; align-items: baseline; } .rk-tier b { font-size: 12px; } .rk-tier small { font-size: 10px; }
  .rk-heart { font-size: 12px; padding: 5px 9px; }
}
/* (24-10-2026) Caído en grupo: «Cambiar» de compañero (game.js specUi). */
#spec-next { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); z-index: 20; }   /* a la derecha: no tapa el aviso ni la barra */
#spec-next[hidden] { display: none; }
/* (24-10-2026) Moderación › Revisar PC */
.pcx-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.pcx-sum .btn { margin-left: auto; }
.pcx-alerts { display: flex; flex-direction: column; gap: 4px; background: rgba(255,77,94,.15); border: 2px solid rgba(255,77,94,.6); border-radius: 8px; padding: 8px 10px; color: #ffd0d5; font-size: 13px; }
.pcx-q { max-width: 260px; }
.pcx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pcx-cols h4 { margin: 0 0 6px; }
.pcx-list { display: flex; flex-direction: column; gap: 3px; max-height: 44vh; overflow-y: auto; }
.pcx-row { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.22); border-radius: 6px; padding: 3px 8px; }
.pcx-row > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.pcx-row small { color: #9fb1d6; font-size: 11px; }
/* (09-11-2026) Moderación → Mochila */
.moch-objs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-bottom: 8px; }
.moch-objs .pcx-row { justify-content: space-between; } .moch-objs em { font-style: normal; font-weight: 700; color: #ffd23f; }
.moch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.moch-it { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 8px; background: rgba(0,0,0,.22); border: 2px solid #5a6a8a; min-width: 0; }
.moch-it canvas { image-rendering: pixelated; } .moch-it small { font-size: 11px; text-align: center; color: #cfd8ee; overflow-wrap: anywhere; } .moch-it em { font-style: normal; font-weight: 700; color: #fff; }
.moch-raro { border-color: #4f9cff; } .moch-epico { border-color: #b06cff; } .moch-legendario { border-color: #ffc820; }
.pcx-ic { width: 32px; height: 28px; flex: none; }
.pcx-st { color: #ffd23f; font-style: normal; }
@media (max-width: 700px) and (orientation: portrait) { .pcx-cols { grid-template-columns: 1fr; } }
@media (orientation: landscape) and (max-height: 500px) { .pcx-list { max-height: 36vh; } }
/* (24-10-2026) Contador de la PC (pc-ui.js capUi), al lado del título */
.pc-cap { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; margin-left: 10px; vertical-align: middle; }
.pc-capbar { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: rgba(0,0,0,.4); overflow: hidden; border: 1px solid rgba(255,255,255,.25); }
.pc-capbar i { display: block; height: 100%; background: #5fe08a; }
.pc-cap.warn .pc-capbar i { background: #ffd23f; } .pc-cap.full .pc-capbar i { background: #ff4d5e; }
.pc-cap.warn b { color: #ffd23f; } .pc-cap.full b { color: #ff7a86; }
.pc-capinfo { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: transparent; color: inherit; font: inherit; font-size: 11px; cursor: help; }
@media (orientation: landscape) and (max-height: 500px) { .pc-cap { margin-left: 6px; gap: 5px; font-size: 11px; } .pc-capbar { width: 56px; } }
/* (24-10-2026) Chat global en Matchmaking (la A: columna al lado de las salas) */
#scr-friends .soc-main { grid-template-columns: minmax(0, 1fr) 300px !important; }
.soc-chat { display: flex; flex-direction: column; gap: 6px; }
.cm-h { display: flex; align-items: center; gap: 6px; flex: none; } .cm-h b { font-size: 16px; }
.cm-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fe08a; box-shadow: 0 0 6px #5fe08a; }
.cm-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 2px; }
.cm-empty { margin: auto 0; text-align: center; }
.cm-row { display: flex; gap: 6px; align-items: flex-start; padding: 3px 4px; border-radius: 6px; }
.cm-row:hover { background: rgba(255,255,255,.06); }
.cm-row > div { flex: 1; min-width: 0; }
.cm-row b { font-size: 12px; } .cm-row.me b { color: #ffd23f; }
.cm-row small { font-size: 10px; color: #8fa2c8; }
.cm-row p { margin: 1px 0 0; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.cm-av { width: 24px; height: 24px; flex: none; border-radius: 6px; background: rgba(0,0,0,.3); overflow: hidden; }
.cm-av canvas { width: 24px; height: 24px; display: block; }
.cm-rep { background: none; border: 0; color: #8fa2c8; opacity: .45; cursor: pointer; font-size: 12px; padding: 2px; }
.cm-row:hover .cm-rep, .cm-rep:focus { opacity: 1; } .cm-rep.on { color: #ff7a86; opacity: 1; cursor: default; }
.cm-in { display: flex; gap: 6px; flex: none; }
.cm-in input { flex: 1; min-width: 0; font-size: 12px; padding: 6px 8px; }
@media (orientation: landscape) and (max-height: 500px) {
  #scr-friends .soc-main { grid-template-columns: minmax(0, 1fr) 230px !important; }
  .cm-row p { font-size: 11px; } .cm-h b { font-size: 13px; } .cm-in input { padding: 4px 6px; }
}
@media (orientation: portrait) and (max-width: 700px) { #scr-friends .soc-main { grid-template-columns: 1fr !important; } .soc-chat { max-height: 40vh; } }
/* (24-10-2026) Moderación: conectados en el menú (menu.js adminOnline) */
.menu-online { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; background: rgba(11,24,56,.85); border: 2px solid #5fe08a; color: #d8ffe0; font-size: 13px; font-weight: 700; }
.menu-online i { width: 8px; height: 8px; border-radius: 50%; background: #5fe08a; box-shadow: 0 0 6px #5fe08a; }
.menu-online[hidden] { display: none; }
/* (25-10-2026) Moderación › Chat: el mensaje ocupa todo el ancho (antes, una columna finita) */
.rk-row.mod-row.cr-row { display: flex; align-items: center; gap: 10px; }
.cr-row .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-row .who small:first-of-type { font-size: 14px; color: #fff; overflow-wrap: anywhere; }
/* (25-10-2026) La partida no entra en la nube (db.js 'big') */
.sync.big { background: #ff5f6d; }
#topbar .tb-who .sync.big { color: #ff9aa4; }

/* (25-10-2026) Guardado: anillo alrededor del avatar (diseño D) y botón de guardar a mano. Antes, «Guardando…» bajo el nombre. */
#topbar .tb-ava { position: relative; }
#topbar .tb-ring { position: absolute; inset: -4px; border-radius: 50%; border: 3px solid transparent; pointer-events: none; }
#topbar .tb-ring.ok { border-color: #5fe08a; }
#topbar .tb-ring.syncing { border-top-color: #ffd23f; border-right-color: #ffd23f; animation: tb-spin 1s linear infinite; }
#topbar .tb-ring.pending { border-color: #ffd23f; border-left-color: transparent; border-bottom-color: transparent; }
#topbar .tb-ring.offline, #topbar .tb-ring.big, #topbar .tb-ring.blocked { border-color: #ff5f6d; }
#topbar .tb-ring.local, #topbar .tb-ring.guest { display: none; }
@keyframes tb-spin { to { transform: rotate(360deg); } }
#topbar .tb-save { flex: none; width: 28px; height: 28px; margin: 0 -8px 0 2px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.55); color: #f4f8ff; cursor: pointer; font: inherit; }
#topbar .tb-save:hover { background: rgba(255,255,255,.24); }
#topbar .tb-save:active { transform: translateY(1px); }
#topbar .tb-save.busy { color: #ffd23f; opacity: .7; cursor: default; }
#topbar .tb-save svg { width: 16px; height: 16px; }
#user-pill { cursor: default; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  #topbar .tb-save { width: 24px; height: 24px; margin: 0 2px 0 0; }
  #topbar .tb-save svg { width: 14px; height: 14px; }
}
/* (25-10-2026) Matchmaking y chat: retrato (span .mart-pic) en vez del sprite (canvas). */
.cm-av .mart-pic { width: 24px !important; height: 24px !important; display: block; border-radius: 0; }
span.soc-mini { border-radius: 4px; width: 26px !important; height: 26px !important; }
.soc-av span.soc-mini { width: 30px !important; height: 30px !important; }
@media (orientation: landscape) and (max-height: 500px) { span.soc-mini { width: 22px !important; height: 22px !important; } }
/* (25-10-2026) Ajustes › Cuenta: últimos errores de Firebase */
.fslog { list-style: none; margin: 4px 0 0; padding: 0; max-height: 160px; overflow: auto; font-family: monospace; }
.fslog li { padding: 2px 0; border-top: 1px solid rgba(255,255,255,.08); word-break: break-all; }
/* (25-10-2026) Botón del menú deshabilitado (Matchmaking por ahora): en gris y sin hover. */
.menu-item.off, .menu-item:disabled { opacity: .45; filter: grayscale(1); cursor: not-allowed; pointer-events: none; }

/* ---------- (26-10-2026) Elige modo y Desafíos de gimnasios (BETA, ver js/ui/gym-ui.js) ---------- */
.mode-box { max-width: 860px; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.mode-card { text-align: left; font: inherit; color: inherit; cursor: pointer; background: rgba(8,18,48,.45); border: 3px solid var(--edge-in); border-radius: 10px; padding: 10px; display: grid; gap: 4px; text-shadow: 2px 2px 0 var(--shadow); }
.mode-card:hover, .mode-card:focus-visible { filter: brightness(1.12); outline: none; }
.mode-card.gym { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,210,63,.35); }
.mode-art { position: relative; height: 190px; border-radius: 6px; border: 2px solid var(--edge-out); overflow: hidden; }
.mode-art.horde { background: radial-gradient(circle at 50% 60%, #3d7a2e, #1c3f16); }
.mode-art.gym { background: linear-gradient(#6b5a3a 0 12%, #c9bea0 12%); }
.mode-art.gym::before { content: ''; position: absolute; left: 10%; right: 10%; top: 20%; bottom: 8%; background: #e9e2cc; border: 4px solid #8a7d5c; }
.mode-art.gym::after { content: ''; position: absolute; left: 50%; top: 57%; width: 56px; height: 56px; margin: -28px; border: 3px solid #8a7d5c; border-radius: 50%; }
.mode-sil { position: absolute; filter: brightness(.25) saturate(0); image-rendering: pixelated; }
.mode-me { position: absolute; left: calc(50% - 48px); top: calc(50% - 56px); image-rendering: pixelated; }
.mode-boss { position: absolute; left: calc(50% - 70px); top: -6px; z-index: 1; image-rendering: pixelated; }
.mode-me2 { position: absolute; left: calc(50% - 40px); bottom: 2px; z-index: 1; image-rendering: pixelated; }
.mode-t { font-size: 22px; font-weight: 800; margin-top: 4px; }
.mode-s { font-size: 13px; color: var(--gold); }
.gm-beta { font-size: 11px; font-weight: 800; color: #3a2a00; background: var(--gold); border-radius: 4px; padding: 2px 6px; vertical-align: middle; text-shadow: none; }
.gym-box { max-width: 1060px; }
.gym-grid { display: grid; grid-template-columns: 270px 1fr; gap: 12px; margin-top: 8px; }
.gym-regions { display: grid; gap: 8px; align-content: start; }
.gm-reg { border-radius: 10px; padding: 10px 12px; background: rgba(8,18,48,.45); border: 2px solid var(--edge-in); display: grid; gap: 4px; }
.gm-reg.on { border: 3px solid var(--gold); }
.gm-reg.off { opacity: .55; }
/* (30-10-2026) La otra región con gimnasios (Kanto o Johto), en corto: se toca para cambiar. Antes sólo había Kanto. */
.gm-reg.pick { font: inherit; color: inherit; text-align: left; cursor: pointer; opacity: .8; }
.gm-reg.pick:hover, .gm-reg.pick:focus-visible { opacity: 1; border-color: var(--gold); outline: none; }
.gm-reg.pick .sub { color: var(--gold); }
.gm-rr { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.gm-rn { font-size: 17px; font-weight: 800; }
.gm-medals { display: flex; gap: 1px; }
.gm-bdg { position: relative; display: inline-grid; place-items: center; flex: none; }
.gm-bdg img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.gm-bdg.none img, .gm-bdg.next img { filter: brightness(0); opacity: .35; }
.gm-bdg.next { animation: gm-pulse 1.1s ease-in-out infinite; }
.gm-bdg.next img { opacity: .55; filter: brightness(0) drop-shadow(0 0 2px #ffd23f); }
.gm-bdg b { position: absolute; color: #ffd23f; font-size: 13px; text-shadow: 1px 1px 0 #000; }
.gm-bdg.got img { filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
@keyframes gm-pulse { 50% { transform: scale(1.12); } }
.gm-tok { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.gm-coin { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #d9a520 60%, #8a5a08); border: 2px solid #4a2c02; opacity: .5; }
.gm-coin.on { opacity: 1; box-shadow: 0 0 10px #ffd23f; }
.gym-right { background: var(--cream, #f7f4ea); border: 3px solid var(--edge-out); border-radius: 10px; overflow: hidden; display: grid; grid-template-rows: auto auto; color: #24305a; text-shadow: none; }
.gym-mapbox { background: #3a7bd5; display: grid; place-items: center; }
.gym-maphold { position: relative; width: 100%; max-width: 440px; }
#gym-map { display: block; width: 100%; height: auto; user-select: none; }   /* (26-10-2026) imagen del mapa; antes canvas pixelado */
/* (26-10-2026) Un punto por líder: rojo = puedes ir (siguiente o vencido), gris = bloqueado. Antes: etiqueta con el nombre. */
.gm-pin { position: absolute; transform: translate(-50%, -50%); width: 4.2%; aspect-ratio: 1; min-width: 16px; border-radius: 50%; padding: 0; font: inherit; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #e32626 55%, #a30f0f); border: 3px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.35); display: grid; place-items: center; }
.gm-pin i { font-style: normal; font-weight: 800; color: #fff; font-size: 12px; line-height: 1; text-shadow: 1px 1px 0 #7a0a0a; }
.gm-pin.next { animation: gm-dot 1.1s ease-in-out infinite; }
.gm-pin.none { background: radial-gradient(circle at 35% 30%, #d6d6d6, #8d8d8d 60%, #5e5e5e); border-color: #e8e8e8; cursor: not-allowed; }
.gm-pin.sel { outline: 3px solid #ffd23f; outline-offset: 2px; }
.gm-pin:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
@keyframes gm-dot { 50% { box-shadow: 0 0 0 6px rgba(227,38,38,.35), 0 2px 0 rgba(0,0,0,.35); } }
@media (prefers-reduced-motion: reduce) { .gm-pin.next { animation: none; } }
.gym-bar { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-top: 3px solid var(--edge-out); flex-wrap: wrap; }
.gm-leader { width: 48px; height: 58px; flex: none; border-radius: 8px; background: #d9d2bd; border: 2px solid #b9b19a; position: relative; overflow: hidden; }
.gm-leader::before { content: ''; position: absolute; left: 15px; top: 7px; width: 17px; height: 17px; border-radius: 50%; background: #3a3f55; }
.gm-leader::after { content: '?'; position: absolute; left: 8px; right: 8px; bottom: -2px; height: 30px; border-radius: 14px 14px 0 0; background: #3a3f55; color: #d9d2bd; font-weight: 800; text-align: center; line-height: 30px; }
.gym-info { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.gym-k { font-size: 11px; color: #5d6688; }
.gym-n { font-size: 20px; font-weight: 800; }
.gm-tag { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 4px; color: #1b1b1b; vertical-align: middle; }
.gym-team { display: flex; gap: 2px; align-items: flex-end; }
.gm-mon { position: relative; display: inline-block; }
.gm-mon canvas { display: block; image-rendering: pixelated; }
.gm-crown { position: absolute; right: -4px; top: -6px; font-style: normal; font-size: 14px; }
.gym-act { display: grid; gap: 6px; justify-items: end; }
.gym-s { font-size: 13px; font-weight: 700; color: #24305a; }
#gym-go[disabled] { filter: grayscale(1); opacity: .5; }
#gym-coop:disabled { opacity: .6; }   /* (27-10-2026) antes siempre a media luz: era «próximamente» */
@media (max-height: 520px), (orientation: landscape) and (hover: none) and (max-height: 700px) {   /* (26-10-2026) móvil en horizontal: mapa a la izquierda del líder, todo sin desplazar. (31-10-2026) + celulares apaisados de más de 520 px de alto (antes sólo max-height: 520px: la ficha quedaba debajo del mapa y se cortaba) */
  .mode-grid { gap: 10px; } .mode-art { height: 120px; } .mode-t { font-size: 17px; }
  .gym-grid { grid-template-columns: 170px 1fr; gap: 8px; }
  .gm-reg { padding: 8px; } .gm-reg.off { display: none; } .gm-medals { flex-wrap: wrap; }
  .gym-right { grid-template-rows: none; grid-template-columns: auto 1fr; }
  .gym-maphold { width: auto; height: calc(100vh - 112px); aspect-ratio: var(--map-ar, 994 / 857); }   /* (30-10-2026) la proporción del mapa de la región (gym-ui.js); antes fija la de Kanto, 994 / 857 */
  #gym-map { height: 100%; width: auto; }
  .gym-bar { flex-direction: column; align-items: stretch; border-top: 0; border-left: 3px solid var(--edge-out); gap: 6px; }
  .gm-leader { display: none; } .gym-act { justify-items: stretch; } .gym-n { font-size: 17px; }
}

/* ---------- (26-10-2026) Tienda de Arceus (BETA, ver js/ui/arceus-ui.js) ---------- */
.arc-tk { width: 30px; height: 30px; flex: none; background-size: contain; image-rendering: pixelated; display: inline-block; }
.arc-altar { display: flex; gap: 10px; align-items: center; width: 100%; margin-bottom: 8px; padding: 8px 12px; font: inherit; text-align: left; cursor: pointer; color: #fff;
  border: 3px solid #ffd23f; border-radius: 8px; box-shadow: 0 0 18px rgba(255,210,63,.6); animation: arc-glow 1.6s ease-in-out infinite, arc-drift 18s linear infinite;
  background: radial-gradient(1px 1px at 12% 30%, #fff, transparent), radial-gradient(1px 1px at 37% 70%, #ffe9b0, transparent), radial-gradient(1px 1px at 61% 22%, #cfe0ff, transparent),
    radial-gradient(1px 1px at 83% 64%, #fff, transparent), radial-gradient(1px 1px at 92% 18%, #ffc6f0, transparent), radial-gradient(1px 1px at 24% 84%, #b8f0ff, transparent),
    radial-gradient(ellipse at 30% 50%, rgba(255,90,170,.45), transparent 55%), radial-gradient(ellipse at 75% 40%, rgba(80,120,255,.5), transparent 60%),
    radial-gradient(ellipse at 55% 60%, rgba(255,230,170,.35), transparent 35%), linear-gradient(90deg, #120c34, #2a1a5e 50%, #120c34);
  background-size: 240px 70px, 240px 70px, 240px 70px, 240px 70px, 240px 70px, 240px 70px, 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
.arc-altar.hidden { display: none; }
.arc-altar .arc-at { display: grid; flex: 1; }
.arc-altar b { color: #ffd23f; text-shadow: 2px 2px 0 #000; font-size: 17px; }
.arc-altar small { color: #e6dcff; text-shadow: 1px 1px 0 #000; font-size: 12px; }
@keyframes arc-glow { 50% { box-shadow: 0 0 30px rgba(255,210,63,1); } }
@keyframes arc-drift { to { background-position: 240px 0, -180px 0, 240px 0, -180px 0, 240px 0, -180px 0, 0 0, 0 0, 0 0, 0 0; } }
#scr-arceus { padding: 0; background: #05041a; }
.arc-stage { position: absolute; inset: 0; overflow: hidden; color: #fff; text-shadow: 2px 2px 0 #000; }
#arc-gal { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#arc-mon { position: absolute; left: 50%; top: 4%; height: 52%; transform: translateX(-50%); z-index: 2; }
#arc-mon canvas { height: 100%; width: auto; image-rendering: pixelated; display: block; }
.arc-title { position: absolute; left: 16px; top: 14px; display: flex; gap: 8px; align-items: center; z-index: 3; }
.arc-title b { display: block; font-size: 17px; } .arc-title small { color: #c9d4f0; font-size: 12px; }
/* (30-10-2026) Con las fichas de Kanto y Johto: el selector de cuál canjear (arceus-ui.js). Antes había una sola ficha. */
.arc-regs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 5px; }
.arc-regs[hidden] { display: none; }
.arc-regs em { font-style: normal; font-size: 12px; color: #c9d4f0; }
.arc-rg { font: inherit; font-size: 13px; font-weight: 800; padding: 3px 12px; border-radius: 6px; border: 2px solid #6a628a; background: rgba(10,8,40,.75); color: #e7eeff; cursor: pointer; }
.arc-rg:hover, .arc-rg:focus-visible { border-color: #ffd23f; outline: none; }
.arc-rg.on { border-color: #ffd23f; color: #ffd23f; box-shadow: 0 0 8px rgba(255,210,63,.6); }
.arc-back { position: absolute; right: 14px; top: 12px; z-index: 6; }
.arc-opts { position: absolute; left: 18px; right: 18px; bottom: 24px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; z-index: 3; max-width: 1100px; margin: 0 auto; }
.arc-opt { position: relative; min-height: 176px; background: rgba(10,14,40,.72); border: 3px solid #f4f8ff; border-radius: 6px; color: #fff; font: inherit; display: grid; grid-template-rows: 70px auto; justify-items: center; align-content: start; text-align: center; gap: 4px; padding: 8px 10px 22px; cursor: pointer; text-shadow: 2px 2px 0 #000; transition: transform .2s, opacity .2s, box-shadow .2s; }
.arc-opt .it, .arc-cbox .it { position: relative; display: grid; place-items: end center; height: 70px; }
.arc-opt .it img { max-height: 64px; width: auto; }
.arc-trio { display: flex; align-items: flex-end; gap: 2px; }
.arc-x10 { position: absolute; right: -10px; bottom: -2px; font-size: 18px; color: #ffd23f; text-shadow: 2px 2px 0 #000; }
.arc-opt b { font-size: 14px; display: block; line-height: 1.15; margin-bottom: 3px; }
.arc-opt small { color: #c9d4f0; font-size: 11px; line-height: 1.35; display: block; }
.arc-opt.on { border-color: var(--gold); box-shadow: 0 0 22px rgba(255,210,63,.7); transform: translateY(-6px); }
.arc-opt.faded { opacity: .55; }
.arc-opt:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.arc-go { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); white-space: nowrap; }
#arc-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
#arc-white { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.arc-confirm { position: absolute; inset: 0; background: rgba(5,10,25,.65); display: grid; place-items: center; z-index: 7; }
.arc-confirm[hidden] { display: none; }
.arc-cbox { background: linear-gradient(180deg, var(--box1, #2c519f), var(--box2, #1a3170)); border: 3px solid var(--edge, #f4f8ff); border-radius: 10px; box-shadow: 0 0 0 3px var(--edge-out); padding: 18px 22px; width: min(480px, 92vw); display: grid; gap: 10px; justify-items: center; text-align: center; }
.arc-cbox p { margin: 0; color: var(--muted); }
.arc-ct { font-size: 19px; }
.arc-warn { color: #ffd78a !important; font-size: 13px; }
.arc-done { font-size: 22px; font-weight: 800; color: var(--gold); }
@media (max-height: 520px) {
  #arc-mon { top: 2%; height: 44%; }
  .arc-opts { bottom: 10px; gap: 6px; left: 8px; right: 8px; }
  .arc-opt { min-height: 0; grid-template-rows: 44px auto; padding: 4px 4px 18px; }
  .arc-opt .it { height: 44px; } .arc-opt .it img { max-height: 40px; } .arc-trio img { height: 34px; }
  .arc-opt b { font-size: 12px; } .arc-opt small { display: none; }
  .arc-title b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .arc-altar { animation: none; } }

/* (26-10-2026) flechas para pasar de gimnasio (abajo del mapa) */
.gm-arrow { flex: none; width: 34px; height: 44px; border-radius: 8px; border: 2px solid #b9b19a; background: #ede6d0; cursor: pointer; position: relative; padding: 0; }
.gm-arrow::before { content: ''; position: absolute; top: 50%; left: 50%; border: 10px solid transparent; transform: translate(-50%, -50%); }
.gm-arrow.prev::before { border-right: 13px solid #24305a; border-left: 0; }
.gm-arrow.next::before { border-left: 13px solid #24305a; border-right: 0; }
.gm-arrow:hover { background: #ffe9a8; border-color: #d9a520; }
.gm-arrow:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
.gym-team { flex-wrap: wrap; }
@media (max-height: 520px), (orientation: landscape) and (hover: none) and (max-height: 700px) { .gym-bar .gm-arrow { width: 100%; height: 24px; } }
/* (26-10-2026) con las flechas, la barra en una sola fila: ◀ líder · info · ▶ … botones */
.gym-bar { flex-wrap: nowrap; }
.gym-bar .gym-info { flex: 0 1 auto; min-width: 150px; }
.gym-bar .gym-act { margin-left: auto; }
@media (max-height: 520px), (orientation: landscape) and (hover: none) and (max-height: 700px) { .gym-bar .gym-act { margin-left: 0; } }

/* (26-10-2026) Buko en IVs: sube EVs de a 1 */
.ivs-buko { margin-top: 10px; padding: 8px 10px; border: 2px solid #5fbf4a; border-radius: 8px; background: rgba(95,191,74,.08); display: grid; gap: 4px; }
.ivs-buko h4 { margin: 0 0 4px; display: flex; gap: 6px; align-items: center; font-size: 14px; }
.ivs-bk { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; }
.gm-poor { color: #d03838; }

/* (26-10-2026) Elección EVs/IVs (scr-evsiv), con las cartas de «Elige modo» */
.mode-art.ev { background: radial-gradient(circle at 50% 60%, #3f8a34, #163a12); }
.mode-art.iv { background: radial-gradient(circle at 50% 60%, #8a3448, #2a1240); }
.mode-card.ev { border-color: #5fbf4a; box-shadow: 0 0 0 2px rgba(95,191,74,.3); }
.evsiv-fr { position: absolute; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.45)); }
.pc-ivs.ivs-ev { border-color: rgba(95,191,74,.35); }

/* (26-10-2026) Megaevoluciones (scr-mega): diseño A «Vitrina» */
.mega-box { max-width: 1100px; display: flex; flex-direction: column; gap: 10px; max-height: 94vh; }
.mg-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.35); border-radius: 999px; padding: 3px 12px 3px 5px; }
.mg-chip b { font-size: 20px; color: #ff8ad8; }
.mg-chip small { color: var(--muted); font-size: 12px; }
.mg-stone { width: 26px; height: 27px; image-rendering: pixelated; vertical-align: middle; }
.mg-stone.sm { width: 16px; height: 17px; margin-right: 4px; }
.mg-how { background: rgba(0,0,0,.22); border: 2px solid rgba(255,138,216,.35); border-radius: 10px; padding: 8px 12px; font-size: 13px; line-height: 1.45; color: #e7eeff; }
.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; overflow: auto; min-height: 0; padding-right: 4px; }
.mg-card { background: rgba(8,18,48,.45); border: 3px solid var(--edge-in); border-radius: 10px; padding: 8px; display: grid; gap: 4px; justify-items: center; align-content: start; text-align: center; }
.mg-card.ok { border-color: #ff8ad8; box-shadow: 0 0 0 2px rgba(255,138,216,.3), inset 0 0 22px rgba(255,138,216,.18); }
.mg-card.soon { opacity: .55; border-style: dashed; }
.mg-pair { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 86px; }
.mg-pair i { font-style: normal; color: #ff8ad8; font-size: 18px; margin-bottom: 26px; }
.mg-pair canvas { image-rendering: pixelated; }
.mg-shadow { filter: brightness(0) opacity(.55); }
.mg-n { font-size: 15px; font-weight: 800; }
.mg-tag { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.35); }
.mg-tag.ok { background: #1f6b3b; }
.mg-tag.soon { background: #3a3f55; color: #c6cbe0; }
.mg-ask { color: var(--gold); }
/* (10-11-2026, el dueño: «rediseñá esta sección de megaevolución») «Escenario» (mega-ui.js pone .mx): a la izquierda la mega
 * elegida en grande, animada en el lugar de su tipo, con lo que suma y sus botones; a la derecha, pestañas por región y las megas
 * en fichas chicas, las «Próximamente» en una tira y la explicación plegada. Igual en PC y en el celular apaisado.
 * Antes: una lista de filas con todas las regiones seguidas y la ficha a la derecha (sólo en PC; en el celular, cartas). */
#scr-mega > .mega-box.mx { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px 14px;
  width: min(1180px, calc(100vw - 24px)); max-width: none; height: min(700px, calc(100dvh - 24px)); max-height: none; }
#scr-mega .mega-box.mx > .row.between { grid-column: 1 / -1; }
#scr-mega .mega-box.mx #mega-how { display: none; }
#scr-mega .mega-box.mx #mega-side { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: 8px; padding: 10px; min-height: 0; overflow-y: auto;
  border: 2px solid rgb(var(--lic-ink-rgb) / .3); border-radius: 12px; }
#scr-mega .mega-box.mx #mega-grid { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding-right: 4px; }
.mx-stage { position: relative; flex: none; aspect-ratio: 480 / 226; border-radius: 10px; overflow: hidden; background: #0a0618; border: 3px solid var(--lic-ink); box-shadow: 0 4px 0 rgb(var(--lic-ink-rgb) / .25); }
.mx-stage canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.mx-okb { position: absolute; left: 8px; top: 8px; padding: 2px 10px 3px; border-radius: 999px; font-size: 13px; color: #fff !important; background: #1f6b3b; border: 2px solid #8ae0a8; }
.mx-head { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mx-name { font-size: 24px; line-height: 1.1; }
.mx-head small { font-size: 14px; opacity: .7; }
.mx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mx-stats span { display: flex; flex-direction: column; align-items: center; padding: 4px 2px 5px; border-radius: 8px; background: rgb(var(--lic-wash) / .5); border: 2px solid rgb(var(--lic-ink-rgb) / .22); }
.mx-stats b { font-size: 17px; color: #b0308f; } .mx-stats small { font-size: 12px; opacity: .8; }
html.theme-dark .mx-stats b { color: #ff8ad8; }
#scr-mega .mx-desc { margin: 0; font-size: 13px; line-height: 1.4; }
.mx-acts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.mx-acts .btn { font-size: 15px; padding: 8px 18px; }
.mx-tabs { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.mx-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 6px 8px; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer;
  color: var(--lic-ink); background: rgb(var(--lic-wash) / .45); border: 2px solid rgb(var(--lic-ink-rgb) / .3); }
.mx-tab:hover { border-color: var(--lic-ink); }
.mx-tab.on { background: var(--lic-band); border-color: var(--lic-band); color: #ffd23f; }
.mx-tab .mg-stone.sm { margin: 0; }
.mx-tab i { font-style: normal; min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; line-height: 18px; text-align: center; background: #ff8ad8; color: #2a0b30; }
.mx-tab small { font-weight: 400; font-size: 12px; opacity: .75; }
.mx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; flex: none; }
.mx-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 6px 4px 7px; border-radius: 10px; font: inherit; cursor: pointer;
  color: var(--lic-ink); background: rgb(var(--lic-wash) / .45); border: 2px solid rgb(var(--lic-ink-rgb) / .25); }
.mx-tile canvas { height: 66px; width: auto; image-rendering: pixelated; }
.mx-tile b { font-size: 13px; line-height: 1.15; }
.mx-tile:hover { border-color: var(--lic-ink); }
.mx-tile.ok { border-color: #c860b8; background: linear-gradient(rgba(255,138,216,.16), rgba(255,138,216,.04)), rgb(var(--lic-wash) / .45); }
.mx-tile.pick { border-color: var(--lic-gold); box-shadow: 0 0 0 3px rgba(226,177,58,.4); }
.mx-bdg { position: absolute; top: 4px; right: 5px; display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; font-size: 13px; }
.mx-bdg.ok { background: #1f6b3b; color: #fff; }
.mx-bdg .mg-stone.sm { margin: 0; filter: drop-shadow(0 0 4px rgba(255,138,216,.9)); }
.mx-forge { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgb(var(--lic-wash) / .45); border: 2px dashed rgb(var(--lic-ink-rgb) / .4); text-align: left; }
.mx-fpair { display: flex; align-items: center; gap: 4px; flex: none; } .mx-fpair i { font-style: normal; font-weight: 700; }
.mx-ftxt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mx-ftxt b { font-size: 15px; } .mx-ftxt .sub { font-size: 13px; }
.mx-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 4px 10px; border-radius: 10px; border: 2px dashed rgb(var(--lic-ink-rgb) / .25); flex: none; }
.mx-soon small { margin-right: 6px; font-size: 13px; opacity: .8; }
.mx-soon canvas { display: block; height: 44px; width: auto; image-rendering: pixelated; opacity: .7; }
.mx-how { flex: none; margin-top: auto; padding: 6px 12px; border-radius: 10px; background: rgb(var(--lic-wash) / .35); border: 2px solid rgb(var(--lic-ink-rgb) / .2); font-size: 13px; line-height: 1.45; }
.mx-how summary { cursor: pointer; font-weight: 700; }
.mx-how p { margin: 6px 0 2px; }
@media (max-height: 520px) {
  #scr-mega > .mega-box.mx { gap: 6px 10px; height: calc(100dvh - 12px); width: calc(100vw - 16px); }
  #scr-mega .mega-box.mx #mega-side { padding: 6px; gap: 4px; }
  .mx-name { font-size: 17px; } .mx-head small { font-size: 12px; }
  .mx-stats span { padding: 1px 2px 2px; } .mx-stats b { font-size: 13px; } .mx-stats small { font-size: 10px; }
  #scr-mega .mx-desc { font-size: 11px; line-height: 1.3; }
  .mx-acts .btn { font-size: 13px; padding: 5px 12px; }
  .mx-tab { padding: 2px 9px 3px 6px; font-size: 13px; } .mx-tiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
  .mx-tile canvas { height: 52px; } .mx-tile b { font-size: 11px; } .mx-soon canvas { height: 34px; } .mx-how { font-size: 11px; padding: 4px 10px; }
}
/* (29-10-2026) Megapiedras por región: arriba una por región (y «cualquiera», las genéricas de antes) y un título por región
 * en la lista. Antes: un solo contador (.mg-chip b + small) y las cartas seguidas. */
.mg-chip { gap: 10px; padding: 3px 12px 3px 6px; }
.mg-rs { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mg-rs.none { opacity: .55; }
.mg-rs.any b { color: #ffd23f; }
.mg-rs + .mg-rs { padding-left: 10px; border-left: 2px solid rgba(255,255,255,.15); }
.mg-reg { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 4px 6px 2px; border-bottom: 2px solid rgba(255,138,216,.35); }
.mg-reg > b { font-size: 16px; color: #ffd6f2; text-shadow: 2px 2px 0 #000; }
.mg-regn { display: inline-flex; align-items: center; font-size: 12px; color: #e7eeff; }
.mg-regn b { color: #ff8ad8; margin-left: 3px; font-size: 14px; }
.mg-regn.none { opacity: .6; }
.mg-reg ~ .mg-reg { margin-top: 6px; }
@media (max-height: 500px) { .mg-how { cursor: pointer; flex: none; } .mg-how > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .mg-how.open > span { display: block; } }   /* (29-10-2026) 2 líneas en el móvil; tocar la abre (antes se veía entera y dejaba poco sitio a la lista) */
@media (max-height: 500px) { .mg-chip { gap: 6px; } .mg-rs + .mg-rs { padding-left: 6px; } .mg-rs .mg-stone { width: 20px; height: 21px; } .mg-chip b { font-size: 16px; } .mg-reg > b { font-size: 14px; } }
@media (max-height: 500px) { .mg-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .mg-pair { height: 66px; } .mg-how { font-size: 11px; padding: 6px 10px; } }

/* (26-10-2026) Carteles de novedades 4:3 (gimnasios, megaevoluciones): por alto, para que quepan en el celular apaisado */
.boss-news img.tall { width: auto; height: min(calc(100dvh - 60px), 615px); max-width: 92vw; }
@media (max-height: 520px) { .boss-news img.tall { height: calc(100dvh - 40px); } }

/* (26-10-2026) Retrato del líder en la barra del gimnasio (antes silueta con «?») */
.gm-leader.pic { width: 64px; height: 64px; border: 3px solid #8a7d5c; background: #2a2f40; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.gm-leader.pic::before, .gm-leader.pic::after { display: none; }
.gm-leader.pic img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
/* (31-10-2026) Hoenn, sin retrato todavía: su Pokémon jefe en la ficha */
.gm-leader.pic .gm-ace { width: 100% !important; height: 100% !important; display: block; image-rendering: pixelated; background-color: #2a2f40; }

/* (26-10-2026) Elegir ataques: faltan ataques → el botón se ve apagado (sigue avisando al tocarlo) */
#mvp-go.mvp-short { filter: grayscale(.85) brightness(.85); }

/* =====================================================================
 * (27-10-2026) Ranking en PC — propuesta B de docs/ranking/propuestas-pc.html (la eligió el dueño).
 * Las regiones, en una tira con un trozo de su mapa; el periodo, en pestañas de carpeta pegadas al podio; Solo/Grupo y
 * Todos/Amigos, interruptores al lado. Sin el filtro por Pokémon. Todo un poco más chico que antes (era igual que en el
 * celular). En el celular (y en pantallas chicas) sigue la barra de antes: estas piezas no se ven.
 * ===================================================================== */
.rk-maps, .rk-pctop { display: none; }
.rk-pcol { display: flex; flex-direction: column; min-height: 0; }
.rk-pcol > .rk-podium { flex: 1; }
/* (06-11-2026, el dueño: «hay cosas desactualizadas») Las pantallas de ordenador desde 500 px de alto (antes 600 en todos estos @media y en los isPC() de js/ui): con la ventana baja salían las del celular. */
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-rank > .box { width: min(1280px, calc(100vw - 40px)); height: min(820px, calc(100dvh - 60px)); padding: 16px 18px; }
  #scr-rank > .box > .row.between h2 { font-size: 22px; }
  #scr-rank .rk-bar { display: none; }
  .rk-maps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; flex: none; }
  .rk-map { appearance: none; position: relative; padding: 0; height: 60px; border-radius: 8px; overflow: hidden; cursor: pointer; background: #0b1838;
    border: 2px solid var(--edge-out); box-shadow: 0 0 0 2px rgba(244,248,255,.25); transition: transform .12s, box-shadow .12s; }
  .rk-map canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; filter: saturate(.55) brightness(.72); transition: filter .12s; }
  .rk-map span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: 12px; font-weight: 700; text-align: left;
    background: linear-gradient(transparent, rgba(5,10,25,.85)); text-shadow: 1px 1px 0 var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rk-map:hover canvas { filter: none; }
  .rk-map:hover { box-shadow: 0 0 0 2px var(--edge); }
  .rk-map.on { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(255,210,63,.55); }
  .rk-map.on canvas { filter: none; }
  .rk-map.on span { color: var(--gold); }
  .rk-main { margin-top: 10px; grid-template-columns: minmax(0, 1fr) minmax(380px, 40%); }
  .rk-pctop { display: flex; align-items: flex-end; gap: 8px; flex: none; position: relative; z-index: 1; margin-bottom: -2px; }
  .rk-pcsp { flex: 1; }
  .rk-ptabs { display: flex; gap: 4px; padding-left: 12px; }
  .rk-ptab { appearance: none; cursor: pointer; font-size: 13px; padding: 4px 12px 5px; color: var(--muted); background: rgba(10,22,58,.9);
    border: 2px solid rgba(244,248,255,.35); border-bottom: 0; border-radius: 9px 9px 0 0; text-shadow: 1px 1px 0 var(--shadow); }
  .rk-ptab:hover { color: #fff; }
  .rk-ptab.on { color: #fff; background: #26478f; border-color: var(--edge); padding-bottom: 8px; }
  .rk-tog { display: flex; margin-bottom: 6px; border: 2px solid var(--edge); border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 2px var(--edge-out); }
  .rk-togb { appearance: none; cursor: pointer; border: 0; font-size: 12px; padding: 3px 11px; background: #1a3170; color: var(--muted); text-shadow: 1px 1px 0 var(--shadow); }
  .rk-togb:hover { color: #fff; }
  .rk-togb.on { background: var(--gold); color: #2a1a00; text-shadow: none; font-weight: 700; }
  .rk-pcol > .rk-podium { border: 2px solid var(--edge); border-radius: 10px; background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255,210,63,.18), transparent 70%), #26478f; }
  .rk-podium .rk-zone-title { font-size: 22px; }
  .rk-step.s1 .rk-block { height: 130px; } .rk-step.s2 .rk-block { height: 98px; } .rk-step.s3 .rk-block { height: 74px; }
  .rk-block span { font-size: 22px; }
  .rk-step-time { font-size: 17px; }
  .rk-row { grid-template-columns: 40px auto 1fr auto 22px; gap: 8px; padding: 2px 10px; }
  .rk-row .pos { font-size: 15px; }
  .rk-row .who b { font-size: 14px; }
  .rk-row .who small { font-size: 11px; }
  .rk-row .time { font-size: 17px; }
  .rk-row .rk-arc { width: 24px; height: 21px; }
  .rk-sup b { font-size: 13px; }
}

/* (27-10-2026) Novedades en PC: «Boletín PokéHorde» (propuesta C de docs/menu/Novedades-y-Ajustes.html). En el celular, la lista de antes. */
.news-mag { display: none; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  .box.news-box { width: min(1180px, calc(100vw - 40px)); height: min(700px, calc(100dvh - 60px)); max-height: none; padding: 0; overflow: hidden; }
  .news-box .news-head, .news-box .news-body { display: none; }
  .news-mag { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
  .nm-mast { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 3px double rgba(244,248,255,.4); background: linear-gradient(#3a6ac8, #2c519f); border-radius: 9px 9px 0 0; }
  .nm-mast h2 { margin: 0; font-size: 26px; letter-spacing: 3px; } .nm-mast h2 span { color: var(--gold); }
  .nm-mast small { color: #dbe6ff; font-size: 13px; } .nm-sp { flex: 1; }
  .nm-ball { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(#e8402a 0 46%, #1a1410 46% 56%, #fff 56%); border: 2px solid #1a1410; position: relative; flex: none; }
  .nm-ball::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; border: 2px solid #1a1410; }
  .nm-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; padding: 14px 16px; min-height: 0; }
  .nm-feat { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: auto; }
  /* (03-11-2026, aviso de un jugador: el cartel destacado salía recortado) El recuadro toma la forma de la imagen (--ar, de la
     carta) y se centra; la imagen entra entera (contain). Antes: alto fijo a todo lo ancho y object-fit: cover (cortaba arriba y abajo). */
  .nm-pic { border-radius: 10px; overflow: hidden; border: 3px solid var(--edge); box-shadow: 0 0 0 3px var(--edge-out); flex: none; height: min(320px, 45vh); aspect-ratio: var(--ar, 1.6); max-width: 100%; align-self: center; background: #000; }
  .nm-pic img { width: 100%; height: 100%; object-fit: contain; display: block; image-rendering: auto; }
  .nm-kick { color: var(--gold); font-size: 12px; letter-spacing: 1px; margin-top: 4px; }
  .nm-feat h3 { margin: 0; font-size: 22px; line-height: 1.15; } .nm-feat p { margin: 0; font-size: 13px; color: #dbe6ff; }
  .nm-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 6px; }
  .nm-mini { appearance: none; padding: 0; text-align: left; border-radius: 8px; overflow: hidden; border: 2px solid rgba(244,248,255,.4); cursor: pointer; background: rgba(5,12,35,.4); color: #fff; }
  .nm-mini:hover { border-color: var(--gold); }
  .nm-mini img { width: 100%; height: 86px; object-fit: cover; display: block; } .nm-mini b { display: block; font-size: 12px; padding: 4px 6px; text-shadow: 1px 1px 0 var(--shadow); }
  .nm-ver { min-height: 0; display: flex; flex-direction: column; background: rgba(5,12,35,.35); border-radius: 10px; padding: 10px 12px; }
  .nm-vh { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .nm-vh b { font-size: 16px; } .nm-vh small { color: var(--muted); font-size: 12px; text-align: right; }
  .nm-cnt { display: flex; gap: 10px; margin: 6px 0; font-size: 12px; color: var(--muted); }
  .nm-list { overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
  .nm-it { display: grid; grid-template-columns: 36px 1fr; gap: 8px; font-size: 13px; line-height: 1.4; align-items: start; }
  .nm-it .news-tag { font-size: 10px; padding: 1px 0; text-align: center; }
  .nm-old { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 6px; }
  .nm-old h4 { margin: 0 0 2px; font-size: 14px; color: var(--gold); } .nm-old h4 small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
}

/* (27-10-2026) Ajustes en PC: propuesta B de docs/menu/Novedades-y-Ajustes.html (pestañas con icono, opciones en tarjetas de a dos
 * columnas, los sí/no como interruptores con Poké Ball) y Cuenta como Tarjeta de entrenador (propuesta C). En el celular, como antes. */
.set-card { display: contents; }
.set-ico, .set-tc { display: none; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  .box.settings { width: min(1000px, calc(100vw - 40px)); height: min(640px, calc(100dvh - 60px)); max-height: none; }
  #set-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; flex-wrap: nowrap; margin: 4px 0 10px; }
  #set-tabs .gen-tab { padding: 8px 0; gap: 4px; font-size: 14px; }
  #set-tabs .gen-tab.on { color: var(--gold); }
  .set-ico { display: block; width: 28px; height: 28px; } .set-ico svg { width: 100%; height: 100%; display: block; }
  .set-body { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: max-content; gap: 10px; align-content: start; padding-right: 6px; }
  .set-body > .set-h, .set-body > .sub, .set-body > .set-links, .set-body > .note, .set-body > .row, .set-body > form, .set-body > .set-tc { grid-column: 1 / -1; }
  .set-body > .set-h { margin: 6px 0 -4px; font-size: 14px; letter-spacing: 1px; }
  .set-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(5,12,35,.38); border: 2px solid rgba(244,248,255,.14); min-width: 0; }
  .set-card.wide { grid-column: 1 / -1; }
  .set-card .set-row { border-bottom: 0; padding: 0; }
  .set-card .set-h { margin: 0 0 2px; font-size: 15px; } .set-card > .sub { margin: 0 0 6px; font-size: 12px; }
  .set-card .set-chips { margin: 4px 0 0; }
  /* interruptor con Poké Ball (el botón sigue siendo el mismo: data-k, Sí/No) */
  .set-card .btn.switch { position: relative; min-width: 0; width: 50px; height: 26px; padding: 0; border-radius: 999px; font-size: 0; color: transparent; text-shadow: none;
    background: #0b1838; border: 2px solid #5b83d6; box-shadow: none; flex: none; }
  .set-card .btn.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; transition: left .15s;
    background: linear-gradient(#e8402a 0 46%, #1a1410 46% 56%, #fff 56%); border: 1px solid #1a1410; filter: grayscale(1) brightness(.75); }
  .set-card .btn.switch.gold { background: #1f6b3a; border-color: #5fe08a; } .set-card .btn.switch.gold::after { left: 26px; filter: none; }
  /* Tarjeta de entrenador */
  .set-tc { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; padding: 14px 16px; border-radius: 14px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #e8eefc, #b9c8ea); color: #1a2a4a; text-shadow: none; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--edge-out); }
  .set-tc::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 18px solid rgba(232,64,42,.12); pointer-events: none; }
  .set-tc h4 { grid-column: 1 / -1; margin: 0; font-size: 13px; letter-spacing: 2px; color: #b8302a; }
  .set-tc-av { height: 150px; border-radius: 10px; background: radial-gradient(circle at 50% 70%, #5b83d6, #2c519f 70%); display: grid; place-items: center; }
  .set-tc-av canvas { image-rendering: pixelated; }
  .set-tc dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 14px; align-content: start; }
  .set-tc dt { color: #4a5a7a; } .set-tc dd { margin: 0; font-weight: 700; display: flex; align-items: center; gap: 8px; min-width: 0; }
  .set-tc dd .btn { text-shadow: 1px 1px 0 var(--shadow); }
  .set-tc-av { cursor: pointer; position: relative; } .set-tc-av:hover { box-shadow: 0 0 0 3px var(--gold); }
  .set-tc-av::after { content: "✎"; position: absolute; right: 6px; bottom: 4px; font-size: 14px; color: #fff; opacity: .7; }
  .set-tc-pick { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(5,12,35,.55); border: 2px solid var(--gold); }
  .set-tc-pick.hidden { display: none !important; }
  .set-tc-ph { display: flex; align-items: center; gap: 8px; } .set-tc-ph b { flex: 1; } .set-tc-ph .field { width: 200px; padding: 4px 8px; font-size: 13px; }
  .set-tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; max-height: 230px; overflow: auto; padding-right: 4px; }
  .set-tc-opt { appearance: none; position: relative; padding: 2px; height: 58px; border-radius: 8px; background: rgba(255,255,255,.06); border: 2px solid transparent; cursor: pointer; }
  .set-tc-opt:hover { border-color: var(--edge); } .set-tc-opt.on { border-color: var(--gold); background: rgba(255,210,63,.15); }
  .set-tc-opt canvas { image-rendering: pixelated; } .set-tc-opt i { position: absolute; right: 3px; top: 1px; font-style: normal; font-size: 11px; color: var(--gold); }
}

/* =====================================================================
 * (27-10-2026) Pokédex y PC en PC — propuestas C de docs/menu/Pokedex-y-PC.html (las eligió el dueño).
 * Pokédex: «Rotom Dex» (marco claro con los ojos de Rotom; regiones a la izquierda con anillo de progreso; cuadrícula
 * compacta; detalle con un círculo que gira). PC: «pantalla de datos» (cajas de 10 × 4 y, a la derecha, la ficha en
 * 3 páginas Info · Estrellas · EVs con pestañas de colores). En el celular, como antes.
 * ===================================================================== */
.rotom-face, .pc-tabs { display: none; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  /* ---------- Pokédex (Rotom Dex) ---------- */
  #scr-dex { padding-top: 40px; }
  #scr-dex > .box { position: relative; width: min(1240px, calc(100vw - 40px)); height: min(760px, calc(100dvh - 60px)); padding: 18px;
    border-radius: 34px; background: linear-gradient(#f0f4f8, #c8d0dc); border: 4px solid #3a4250; box-shadow: 0 0 0 3px #12161e, 0 20px 50px rgba(0,0,0,.6);
    display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px 12px; }
  #scr-dex > .box > .row.between:first-child { grid-column: 1 / -1; }
  .rotom-face { display: flex; gap: 70px; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); pointer-events: none; }
  .rotom-face i { width: 34px; height: 22px; border-radius: 50% 50% 40% 40%; background: #4fc4ff; box-shadow: 0 0 10px #4fc4ff; border: 3px solid #12161e; animation: rotom-blink 6s infinite; }
  .rotom-face::after { content: ""; position: absolute; left: 50%; top: 22px; width: 18px; height: 8px; transform: translateX(-50%); border-bottom: 3px solid #12161e; border-radius: 0 0 50% 50%; }
  .rotom-face .rb { position: absolute; top: -26px; width: 28px; height: 36px; background: #ff9a2a; clip-path: polygon(40% 0, 100% 0, 60% 40%, 100% 40%, 20% 100%, 40% 55%, 0 55%); }
  .rotom-face .rb.l { left: -170px; transform: rotate(-20deg); } .rotom-face .rb.r { right: -170px; transform: rotate(20deg) scaleX(-1); }
  @keyframes rotom-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
  #scr-dex .gen-tabs { flex-direction: column; overflow-y: auto; overflow-x: hidden; margin: 0; padding: 8px; gap: 4px; border-radius: 14px; background: #0f2246; border: 3px solid #12161e; min-height: 0; }
  #scr-dex .gen-tab { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 5px 6px; border-radius: 8px; border: 2px solid transparent; background: transparent; }
  #scr-dex .gen-tab::before { content: ""; grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 50%;
    background: radial-gradient(circle, #0f2246 0 11px, transparent 12px), conic-gradient(var(--gold) var(--p, 0%), rgba(255,255,255,.15) 0); }
  #scr-dex .gen-tab b { font-size: 14px; } #scr-dex .gen-tab small { font-size: 10px; }
  #scr-dex .gen-tab.on { background: rgba(79,196,255,.18); border-color: #4fc4ff; } #scr-dex .gen-tab.on b { color: #fff; }
  #scr-dex .split { margin-top: 0 !important; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; min-height: 0; }
  #scr-dex .split > div:first-child { display: flex; flex-direction: column; min-height: 0; padding: 8px; border-radius: 14px; background: #0f2246; border: 3px solid #12161e; }
  #scr-dex .dex-search { margin-bottom: 6px; } #scr-dex .dex-search .field { padding: 5px 10px; font-size: 13px; }
  #scr-dex .filters { margin-bottom: 6px; gap: 4px; } #scr-dex .chip { padding: 2px 8px; font-size: 11px; }
  #scr-dex .grid { flex: 1; min-height: 0; max-height: none; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; align-content: start; padding-right: 4px; }
  #scr-dex .cell { padding: 4px 0 3px; border-radius: 12px; background: linear-gradient(#1a3a70, #12284e); border: 2px solid transparent; display: flex; flex-direction: column; align-items: center; }
  #scr-dex .cell canvas { width: 92px; height: 80px; }
  #scr-dex .cell b, #scr-dex .cell .stars, #scr-dex .cell .stars-row { display: none; }
  #scr-dex .cell .no { position: static; order: 2; font-size: 9px; }
  #scr-dex .cell:hover { transform: none; border-color: rgba(79,196,255,.6); } #scr-dex .cell.on { border-color: #4fc4ff; box-shadow: 0 0 10px rgba(79,196,255,.55); background: linear-gradient(#1a3a70, #12284e); }
  #scr-dex #dex-detail { position: relative; overflow-y: auto; min-height: 0; border-radius: 14px; background: #0f2246; border: 3px solid #12161e; padding: 10px 12px; }
  #scr-dex #dex-detail::before { content: ""; position: absolute; top: 10px; left: 50%; width: 190px; height: 190px; margin-left: -95px; border-radius: 50%;
    border: 2px dashed rgba(79,196,255,.45); animation: rotom-spin 18s linear infinite; pointer-events: none; }
  @keyframes rotom-spin { to { transform: rotate(360deg); } }
  #scr-dex #dex-detail canvas.stage { position: relative; }
  /* ---------- PC (pantalla de datos) ---------- */
  #scr-pc { padding-top: 40px; }
  #scr-pc > .box { width: min(1240px, calc(100vw - 40px)); height: min(760px, calc(100dvh - 60px)); max-height: none; }
  #scr-pc .pc-split { grid-template-columns: minmax(0, 1fr) 440px; gap: 12px; }
  .pc-left .pc-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .pc-left .pc-slot { border-radius: 6px; }
  #scr-pc .pc-detail { padding: 0; overflow: hidden auto; display: flex; flex-direction: column; gap: 0; border-radius: 12px; border: 3px solid var(--edge); box-shadow: 0 0 0 2px var(--edge-out);
    background: #f4f0e4; color: #2a2a3a; text-shadow: none; --tbc: #e86a5a; }
  #scr-pc .pc-detail[data-pg="star"] { --tbc: #3aa868; } #scr-pc .pc-detail[data-pg="ev"] { --tbc: #4a7ae0; }
  .pc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: #3a4a8a; flex: none; position: sticky; top: 0; z-index: 2; }
  .pc-tabs button { appearance: none; border: 0; background: transparent; height: 34px; font-size: 13px; color: #c8d4ff; cursor: pointer; text-shadow: 1px 1px 0 #1a2040; }
  .pc-tabs button.on { background: var(--tbc); color: #fff; }
  .pc-hero { display: grid; grid-template-columns: 180px 1fr; background: linear-gradient(90deg, var(--tbc) 0 180px, #e8e0cc 180px); flex: none; }
  .pc-hero canvas.stage { width: 170px !important; height: 145px !important; align-self: center; justify-self: center; }
  .pc-hero .center { text-align: left; padding: 10px 12px; }
  #scr-pc .pc-detail .sub { color: #5a5a70; }
  #scr-pc .pc-detail h3 { color: #2a2a3a; }
  #scr-pc .pc-detail .pc-name { justify-content: flex-start; flex-wrap: wrap; }
  #scr-pc .pc-detail .pc-name .btn { text-shadow: 1px 1px 0 var(--shadow); }
  #scr-pc .pc-detail > :is(.pc-starbox, .pc-evs, .pc-ivs) { margin: 10px 12px 0; }
  /* (27-10-2026, lo pidió el dueño con una captura) En «Info» se ven también los EVs y los IVs debajo (antes sólo la ficha). */
  #scr-pc .pc-detail[data-pg="info"] > .pc-starbox { display: none; }
  #scr-pc .pc-detail > :last-child { margin-bottom: 12px; }
  #scr-pc .pc-detail .pc-name { gap: 6px; }
  #scr-pc .pc-detail .pc-name .btn { flex: none; padding: 4px 8px; font-size: 12px; }
  #scr-pc .pc-detail[data-pg="star"] > :is(.pc-evs, .pc-ivs), #scr-pc .pc-detail[data-pg="star"] .pc-pinfo { display: none; }
  #scr-pc .pc-detail[data-pg="ev"] > .pc-starbox, #scr-pc .pc-detail[data-pg="ev"] .pc-pinfo { display: none; }
  #scr-pc .pc-detail[data-pg="info"] .pc-pinfo { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(0,0,0,.2); }
  #scr-pc .pc-detail :is(.pc-starbox, .pc-evs, .pc-ivs) { color: #fff; text-shadow: 1px 1px 0 var(--shadow); }
}

/* (27-10-2026, lo pidió el dueño) En PC, la Pokédex, la PC y el Gacha ya no ocupan toda la pantalla: una ventana centrada
 * con margen alrededor (antes, al 100 % por la regla de «ventana a pantalla completa» de arriba). Sin la cara de Rotom. */
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  :is(#scr-pc, #scr-dex, #scr-gacha) > .box { width: min(1200px, calc(100vw - 100px)) !important; height: min(740px, calc(100dvh - 90px)) !important; }
}

/* (27-10-2026) EVs / IVs en PC: «Entrenamiento» (propuesta A de docs/menu/EVs-Criadero-Huevos.html). En el celular, como antes. */
.ivs-tabs, .ivs-stage { display: none; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-ivs > .box.ivs-box { width: min(1200px, calc(100vw - 100px)) !important; height: min(740px, calc(100dvh - 90px)) !important;
    display: grid !important; grid-template-columns: 290px minmax(0, 1fr) 320px; grid-template-rows: auto minmax(0, 1fr) 118px; gap: 12px; }
  #scr-ivs .ivs-box > .row.between { grid-column: 1 / -1; }
  #scr-ivs .ivs-split { display: contents; }
  #scr-ivs .ivs-top { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 12px; margin: 0;
    border-radius: 12px; background: rgba(5,12,35,.42); border: 2px solid rgba(244,248,255,.15); }
  #scr-ivs .ivs-wallet { display: flex; flex-direction: column; gap: 6px; } #scr-ivs .ivs-lead { margin: 0; font-size: 13px; }
  .ivs-stage { display: block; grid-column: 2; grid-row: 2; position: relative; border-radius: 16px; overflow: hidden; min-height: 0;
    background: radial-gradient(ellipse 60% 18% at 50% 82%, rgba(0,0,0,.35), transparent 70%), radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c, #4fd07a) 40%, #10224f), #0a1838 75%); }
  .ivs-radar { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ivs-sname { position: absolute; left: 14px; top: 10px; font-size: 18px; z-index: 2; }
  #ivs-stage-mon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); image-rendering: pixelated; }
  .ivs-tgt { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; background: none; border: 0; color: #fff; cursor: pointer; text-shadow: 1px 1px 0 var(--shadow); z-index: 2; }
  .ivs-tgt b { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: rgba(5,12,35,.75); border: 3px solid var(--c, #4fd07a); box-shadow: 0 0 10px color-mix(in srgb, var(--c, #4fd07a) 60%, transparent); transition: transform .1s; }
  .ivs-tgt:hover b { transform: scale(1.1); }
  #scr-ivs .ivs-detail { grid-column: 3; grid-row: 2; min-height: 0; overflow-y: auto; margin: 0; }
  #scr-ivs .ivs-detail .ivs-head { display: none; }
  #scr-ivs .ivs-left { grid-column: 1 / -1; grid-row: 3; display: flex; flex-direction: row; align-items: stretch; gap: 10px; min-height: 0; min-width: 0; }
  #scr-ivs .ivs-left .dex-search { flex: none; width: 190px; margin: 0; align-self: center; }
  #scr-ivs .ivs-list { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 190px; grid-template-columns: none; grid-template-rows: 1fr; gap: 8px; overflow-x: auto; overflow-y: hidden; max-height: none; padding-bottom: 4px; }
  #scr-ivs .ivs-mon { height: 100%; }
  .ivs-tabs { display: flex; border: 2px solid var(--edge); border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 2px var(--edge-out); }
  .ivs-tabs button { appearance: none; border: 0; padding: 4px 16px; font: inherit; font-size: 13px; background: #1a3170; color: #fff; cursor: pointer; }
  .ivs-tabs button.on.ev { background: #4fd07a; color: #0b1838; font-weight: 700; } .ivs-tabs button.on.iv { background: #e8546a; color: #fff; font-weight: 700; }
}

/* (27-10-2026) Criadero: lienzo de luces de la animación «Latido» (encima del nido, mismo tamaño). */
#hat-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }


/* (27-10-2026, propuesta A «Pajar por dentro» de docs/menu/Criadero-Mega-Tienda-Mapas.html, la eligió el dueño) Criadero
 * en PC: el granero por dentro, con volumen: pared de tablones, ventana con atardecer, farol, escalera, horca, cubo,
 * sacos y paja en el suelo. Tus huevos esperan en pacas de paja al fondo; el elegido se abre en el nido grande del
 * centro y el texto va en un cartel de pergamino. Antes: el granero plano con el nido a la izquierda y los nidos en
 * un estante a la derecha (sigue así en el móvil). */
.barn-deco { display: none; }
.hat-info { display: contents; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-hatchery .barn { --pa: #f6dca0; --pa2: #e9c37a; --ink: #3a1f0c;
    width: min(1180px, calc(100vw - 100px)); height: min(680px, calc(100dvh - 80px)); max-height: none; overflow: hidden; padding: 0;
    border: 8px solid #3a1a08; border-radius: 8px; box-shadow: inset 0 0 0 3px #b86a32, inset 0 0 0 6px #5a2a10, 0 18px 50px rgba(0,0,0,.6);
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, transparent 2px 13px), repeating-linear-gradient(90deg, #8a4b22 0 56px, #6b3518 56px 59px, #7e4420 59px 114px, #6b3518 114px 117px); }
  #scr-hatchery .barn-hay { display: none; }
  #scr-hatchery .barn-deco { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  /* suelo de paja (desde la mitad), con la sombra donde se junta con la pared y luz cálida en el centro */
  .barn-deco::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; bottom: 0;
    background: linear-gradient(rgba(40,14,0,.55), transparent 22px), radial-gradient(ellipse 55% 75% at 50% 70%, rgba(255,214,140,.32), transparent 70%),
      repeating-linear-gradient(174deg, #e2b448 0 4px, #c9922e 4px 7px, #f0cd6a 7px 9px, #b98227 9px 10px); }
  .barn-deco::after { content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 12% 15%, rgba(255,196,110,.45), transparent 28%), radial-gradient(ellipse 80% 70% at 50% 45%, transparent 55%, rgba(20,6,0,.6)); }
  .barn-deco i { position: absolute; display: block; }
  .bd-beams { left: 0; right: 0; top: 0; height: 40px; background: linear-gradient(#5a2a10, #3a1a08); border-bottom: 5px solid #24100a; box-shadow: 0 6px 10px rgba(0,0,0,.35); }
  .bd-beams::before, .bd-beams::after { content: ""; position: absolute; top: 40px; width: 150px; height: 16px; background: linear-gradient(#6b3518, #4a230e); border: 2px solid #24100a; }
  .bd-beams::before { left: -20px; transform-origin: 0 0; transform: rotate(32deg); } .bd-beams::after { right: -20px; transform-origin: 100% 0; transform: rotate(-32deg); }
  .bd-ledge { left: 0; right: 0; top: 44px; height: 10px; background: repeating-linear-gradient(90deg, #e2b448 0 3px, #c9922e 3px 5px); opacity: .85;
    -webkit-mask: radial-gradient(6px 8px at 6px 10px, #000 98%, transparent) 0 0 / 12px 100% repeat-x; mask: radial-gradient(6px 8px at 6px 10px, #000 98%, transparent) 0 0 / 12px 100% repeat-x; }
  .bd-win { left: 50%; top: 62px; width: 236px; height: 132px; transform: translateX(-50%); border: 10px solid #4a230e; box-shadow: inset 0 0 0 3px #24100a, 0 6px 0 rgba(0,0,0,.3);
    background: radial-gradient(circle at 70% 70%, #fff3b0 0 14px, rgba(255,220,140,.6) 15px, transparent 40px),
      linear-gradient(transparent 62%, #5e9a48 62% 74%, #4a8a3a 74%), linear-gradient(#ff8a5a, #ffb86a 40%, #ffe0a0 62%); }
  .bd-win::before { content: ""; position: absolute; left: 0; right: 0; top: 66%; height: 10px; background: repeating-linear-gradient(90deg, #8a5a30 0 4px, transparent 4px 26px), linear-gradient(transparent 3px, #8a5a30 3px 6px, transparent 6px); }
  .bd-win b { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 4px), #4a230e calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px)), linear-gradient(transparent calc(50% - 4px), #4a230e calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px)); }
  .bd-win::after { content: ""; position: absolute; left: -16px; right: -16px; bottom: -22px; height: 12px; background: linear-gradient(#b86a32, #6b3518); border: 2px solid #24100a; }
  .bd-ray { left: 50%; top: 70px; width: 560px; height: 560px; transform: translateX(-50%); background: linear-gradient(rgba(255,230,160,.16), rgba(255,230,160,0) 85%);
    clip-path: polygon(39% 0, 61% 0, 86% 100%, 14% 100%); mix-blend-mode: screen; }
  .bd-shoe { left: 32%; top: 96px; width: 34px; height: 30px; border: 7px solid #9aa4b0; border-top: 0; border-radius: 0 0 18px 18px; box-shadow: 2px 3px 0 rgba(0,0,0,.35); transform: rotate(180deg); }
  .bd-ladder { right: 96px; top: 54px; width: 64px; height: 300px; border-left: 8px solid #a8642a; border-right: 8px solid #a8642a;
    background: repeating-linear-gradient(transparent 0 30px, #8a4b22 30px 38px); box-shadow: 6px 8px 0 rgba(0,0,0,.25); }
  .bd-fork { right: 200px; top: 150px; width: 7px; height: 230px; background: linear-gradient(90deg, #d8a060, #a8642a); transform: rotate(-11deg); box-shadow: 4px 6px 0 rgba(0,0,0,.25); }
  .bd-fork::before { content: ""; position: absolute; left: -15px; top: -38px; width: 37px; height: 40px; border: 4px solid #8a949e; border-top: 0; border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, transparent 12px, #8a949e 12px 17px, transparent 17px); }
  .bd-bucket { right: 130px; top: 63%; width: 64px; height: 60px; background: repeating-linear-gradient(90deg, #a8642a 0 12px, #8a4b22 12px 14px); clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
    box-shadow: inset 0 10px 0 #5a5f66, inset 0 -12px 0 #5a5f66; }
  .bd-bucket::before { content: ""; position: absolute; left: 6px; right: 6px; top: 0; height: 8px; background: #3a2a1a; border-radius: 50%; }
  .bd-sack { width: 74px; height: 86px; border-radius: 34px 34px 16px 16px; background: radial-gradient(circle at 35% 30%, #f2e6c8, #d8c49a 60%, #b8a070); border: 3px solid #6a5232; box-shadow: 4px 8px 8px rgba(30,10,0,.4); }
  .bd-sack::before { content: ""; position: absolute; left: 24px; top: -12px; width: 22px; height: 18px; background: #c8b080; border: 3px solid #6a5232; border-radius: 6px 6px 2px 2px; }
  .bd-sack::after { content: "✦"; position: absolute; left: 0; right: 0; top: 30px; text-align: center; color: #a8642a; font-size: 18px; text-shadow: none; }
  .bd-sack.s1 { left: 34px; top: 60%; } .bd-sack.s2 { left: 92px; top: 64%; transform: rotate(6deg) scale(.9); }
  .bd-tuft { width: 46px; height: 14px; background: repeating-linear-gradient(70deg, #f0cd6a 0 3px, #c9922e 3px 5px); border-radius: 50% 50% 0 0; opacity: .9; }
  .bd-tuft.t1 { left: 22%; top: 83%; } .bd-tuft.t2 { left: 73%; top: 88%; transform: scaleX(-1); } .bd-tuft.t3 { left: 9%; top: 92%; } .bd-tuft.t4 { left: 86%; top: 79%; }
  .bd-web { left: 0; top: 40px; width: 90px; height: 90px; opacity: .35;
    background: repeating-radial-gradient(circle at 0 0, transparent 0 16px, rgba(255,255,255,.7) 16px 17px), repeating-conic-gradient(from 90deg at 0 0, rgba(255,255,255,.7) 0 1deg, transparent 1deg 18deg);
    -webkit-mask: radial-gradient(circle at 0 0, #000 60%, transparent 72%); mask: radial-gradient(circle at 0 0, #000 60%, transparent 72%); }
  .bd-mote { width: 3px; height: 3px; border-radius: 50%; background: #fff3c0; animation: bd-dust 7s linear infinite; }
  .bd-mote:nth-of-type(odd) { animation-duration: 9s; }
  .bd-mote:nth-of-type(16) { left: 44%; top: 60%; } .bd-mote:nth-of-type(17) { left: 52%; top: 72%; animation-delay: -2s; } .bd-mote:nth-of-type(18) { left: 58%; top: 50%; animation-delay: -4s; }
  .bd-mote:nth-of-type(19) { left: 47%; top: 80%; animation-delay: -1s; } .bd-mote:nth-of-type(20) { left: 20%; top: 40%; animation-delay: -3s; } .bd-mote:nth-of-type(21) { left: 63%; top: 66%; animation-delay: -5s; }
  .bd-mote:nth-of-type(22) { left: 38%; top: 70%; animation-delay: -6s; } .bd-mote:nth-of-type(23) { left: 80%; top: 45%; animation-delay: -2.5s; }
  @keyframes bd-dust { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(30px, -140px); opacity: 0; } }

  /* encima del decorado */
  #scr-hatchery .barn-beam { position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 0; padding: 0; background: none; border: 0; }
  #scr-hatchery .barn-beam::before { content: ""; position: absolute; left: 138px; top: 36px; width: 3px; height: 34px; background: repeating-linear-gradient(#6a6a6a 0 4px, #3a3a3a 4px 6px); }
  #scr-hatchery #hat-lantern { position: absolute; left: 120px; top: 66px; width: 40px; height: 55px; margin: 0; filter: drop-shadow(0 0 22px #ffcf7a) drop-shadow(0 0 8px #ffcf7a); animation: bd-sway 4s ease-in-out infinite; transform-origin: 50% -30px; }
  @keyframes bd-sway { 50% { transform: rotate(3deg); } }
  #scr-hatchery #hat-back { position: absolute; right: 14px; top: 6px; font-size: 13px; padding: 5px 14px; color: #fff8e0; text-shadow: 2px 2px 0 #5a2a00; background: linear-gradient(#ffb43a, #e07a12); border: 3px solid #5a2a00; border-radius: 6px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 3px 0 #3a1a00; }
  #scr-hatchery .barn-sign { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 4; margin: 0; }
  #scr-hatchery .barn-sign::before, #scr-hatchery .barn-sign::after { display: none; }
  #scr-hatchery .barn-sign span { margin: 0; padding: 2px 26px 4px; font-size: 24px; background: var(--pa); color: var(--ink); text-shadow: none; border: 4px solid #6b3518; box-shadow: inset 0 0 0 3px var(--pa2), 0 4px 0 rgba(0,0,0,.35); transform: none; }
  #scr-hatchery .barn-inner { position: absolute; inset: 0; z-index: 1; display: block; padding: 0; }
  /* el nido grande, en el centro del suelo (sin el cajón de antes) */
  #scr-hatchery .hat-stage { position: static; display: block; }
  #scr-hatchery .hat-crate { position: absolute; left: 50%; bottom: 96px; width: 336px; height: 280px; transform: translateX(-50%); background: none; border: 0; box-shadow: none; overflow: visible; z-index: 2; }
  #scr-hatchery .hat-crate::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: 2%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,214,140,.45), transparent 70%); }
  /* el cartel con el texto y el botón */
  #scr-hatchery .hat-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t b" "m b" "o b"; column-gap: 16px; align-items: center; text-align: left;
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(720px, 90%); padding: 10px 16px; z-index: 3;
    background: var(--pa); color: var(--ink); text-shadow: none; border: 4px solid #6b3518; border-radius: 6px; box-shadow: inset 0 0 0 3px var(--pa2), 0 5px 0 rgba(0,0,0,.35); }
  #scr-hatchery .hat-info h3 { grid-area: t; margin: 0; font-size: 18px; color: var(--ink); }
  #scr-hatchery .hat-info p { margin: 0; color: #5a3a1a; max-width: none; font-size: 13px; } #scr-hatchery #hat-msg { grid-area: m; } #scr-hatchery .hat-odds { grid-area: o; font-size: 12px; opacity: 1; color: #8a5a2a; }
  #scr-hatchery .hat-info #hat-msg:empty { display: none; }
  #scr-hatchery #hat-open { grid-area: b; font-size: 16px; padding: 10px 22px; color: #fff8e0; text-shadow: 2px 2px 0 #5a2a00; background: linear-gradient(#ffb43a, #e07a12); border: 3px solid #5a2a00; border-radius: 6px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 4px 0 #3a1a00; }
  #scr-hatchery #hat-open:disabled { filter: grayscale(.7) brightness(.85); }
  /* tus huevos: en pacas de paja al fondo, sobre el suelo */
  #scr-hatchery .hat-shelf { position: absolute; left: 140px; right: 140px; top: 218px; z-index: 3; padding: 0; background: none; border: 0; }
  #scr-hatchery .hat-shelf h3 { display: none; }
  #scr-hatchery .hat-nests { display: flex; justify-content: center; align-items: flex-end; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 6px 4px 10px; scrollbar-width: thin; }
  #scr-hatchery .hat-nest { flex: none; width: 112px; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; background: none; border: 0; transition: transform .12s; }
  #scr-hatchery .hat-nest:hover { background: none; transform: translateY(-3px); }
  #scr-hatchery .hat-nest .hat-mini { position: relative; z-index: 1; width: 84px; height: 77px; margin-bottom: -22px; }
  /* la paca, en 3D: cara de arriba (más clara, en perspectiva) y cara de delante con las cuerdas */
  #scr-hatchery .hat-nest::before { content: ""; order: 1; width: 104px; height: 16px; margin-bottom: -1px; border: 3px solid #a2741c; border-bottom: 0; border-radius: 5px 5px 0 0;
    background: repeating-linear-gradient(100deg, #e8c25a 0 6px, #f2d77a 6px 9px, #c8962a 9px 11px); transform: skewX(-16deg) translateX(3px); }
  #scr-hatchery .hat-nest::after { content: ""; order: 2; width: 104px; height: 36px; border: 3px solid #a2741c; border-radius: 0 0 4px 4px; box-shadow: 0 8px 10px rgba(30,10,0,.45);
    background: linear-gradient(90deg, transparent 22%, #8a5a14 22% 26%, transparent 26% 74%, #8a5a14 74% 78%, transparent 78%), repeating-linear-gradient(0deg, #c8962a 0 5px, #e8c25a 5px 8px, #b88420 8px 10px); }
  #scr-hatchery .hat-nest .hat-reg, #scr-hatchery .hat-nest .hat-n { order: 3; color: var(--ink); text-shadow: none; background: var(--pa); border: 2px solid #6b3518; padding: 0 7px; font-size: 12px; white-space: nowrap; width: 96px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
  #scr-hatchery .hat-nest .hat-reg { margin-top: 5px; border-radius: 4px 4px 0 0; border-bottom: 0; } #scr-hatchery .hat-nest .hat-n { border-radius: 0 0 4px 4px; border-top: 0; color: #8a4b1a; font-size: 11px; }
  #scr-hatchery .hat-nest.on { border: 0; background: none; } #scr-hatchery .hat-nest.on::after { box-shadow: 0 0 0 3px #ffd23f, 0 0 22px #ffd23f, 0 8px 10px rgba(30,10,0,.45); }
  #scr-hatchery .hat-nest.on .hat-reg { background: #ffd23f; }
  #scr-hatchery .hat-empty { margin: 30px auto 0; max-width: 520px; text-align: center; padding: 10px 14px; background: var(--pa); color: var(--ink); text-shadow: none; border: 4px solid #6b3518; border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) { .bd-mote, #scr-hatchery #hat-lantern { animation: none !important; } }
/* (27-10-2026) El granero en pixel art (ui/barn-scene.js): un lienzo a 4 px por píxel en vez del decorado de CSS,
 * y las pacas de los huevos también en pixel art. Antes, .bd-* (degradados) y las pacas con repeating-linear-gradient. */
#hat-bg { display: none; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-hatchery .barn.px .barn-deco i, #scr-hatchery .barn.px #hat-lantern, #scr-hatchery .barn.px .barn-beam::before { display: none; }
  #scr-hatchery .barn.px .barn-deco::before, #scr-hatchery .barn.px .barn-deco::after { display: none; }
  #scr-hatchery .barn.px #hat-bg { display: block; position: absolute; left: 0; top: 0; image-rendering: pixelated; }
  #scr-hatchery .barn.px .hat-crate::before { display: none; }
  #scr-hatchery .barn.px .hat-nest::before { display: none; }
  #scr-hatchery .barn.px .hat-nest::after { order: 1; width: 112px; height: 64px; margin-top: -8px; border: 0; border-radius: 0; box-shadow: none;
    background: var(--bale) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(40,14,0,.35)); }
  #scr-hatchery .barn.px .hat-nest.on::after { box-shadow: none; filter: drop-shadow(4px 0 0 #ffd23f) drop-shadow(-4px 0 0 #ffd23f) drop-shadow(0 4px 0 #ffd23f) drop-shadow(0 -4px 0 #ffd23f) drop-shadow(0 0 10px rgba(255,210,63,.7)); }
}

/* (27-10-2026, propuesta C «Línea evolutiva») Megaevoluciones en PC: una fila por especie y la ficha grande a la derecha.
 * En el móvil, las cartas de antes (la piedra del medio, lo que suma y la ficha no se ven). */
.mg-side, .mg-plus, .mg-pst { display: none; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-mega > .mega-box { width: min(1180px, calc(100vw - 100px)); max-width: none; height: min(700px, calc(100dvh - 80px)); max-height: none;
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
  #scr-mega .mega-box > .row.between { grid-column: 1 / -1; }
  #scr-mega .mg-how { display: none; }
  #scr-mega .mg-grid { grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 6px; align-content: start; }
  #scr-mega .mg-card { grid-template-columns: 250px minmax(0, 1fr) auto; justify-items: start; align-items: center; text-align: left; gap: 12px; padding: 2px 14px; cursor: pointer; border-width: 2px; }
  #scr-mega .mg-card.soon { cursor: default; }
  #scr-mega .mg-card:not(.soon):hover { background: rgba(255,138,216,.08); }
  #scr-mega .mg-card.pick { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,210,63,.3), inset 0 0 22px rgba(255,210,63,.12); }
  #scr-mega .mg-card > :last-child { justify-self: end; }
  #scr-mega .mg-card .mg-ask { grid-column: 2; }
  #scr-mega .mg-pair { height: 74px; gap: 10px; align-items: center; }
  #scr-mega .mg-pair canvas { height: 74px; width: auto; }
  #scr-mega .mg-pair i { display: none; }
  #scr-mega .mg-pst { display: block; width: 28px; height: 29px; filter: drop-shadow(0 0 6px rgba(255,138,216,.8)); }
  #scr-mega .mg-card.soon .mg-pair { width: 250px; justify-content: flex-end; padding-right: 50px; }
  #scr-mega .mg-n { font-size: 14px; } #scr-mega .mg-txt .sub { font-size: 15px; font-weight: 700; color: #fff; }
  #scr-mega .mg-txt { display: flex; flex-direction: column; gap: 1px; } #scr-mega .mg-txt > * { margin: 0; line-height: 1.3; } #scr-mega .mg-txt .sub { order: 0; } #scr-mega .mg-txt .mg-n { order: 1; }
  #scr-mega .mg-plus { display: block; font-size: 12px; color: var(--muted); order: 2; }
  #scr-mega .mg-n { font-size: 12px; color: var(--muted); font-weight: 400; }
  #scr-mega .mg-side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px; overflow-y: auto; min-height: 0;
    border-radius: 12px; background: radial-gradient(circle at 50% 28%, rgba(200,120,255,.35), transparent 55%), rgba(5,12,35,.42); border: 2px solid rgba(244,248,255,.15); }
  .mg-sbig { position: relative; display: grid; place-items: center; }
  .mg-sbig::after { content: ""; position: absolute; bottom: 6px; width: 200px; height: 34px; border-radius: 50%; z-index: -1;
    background: linear-gradient(#6a5aa8, #3a2a6a); border: 3px solid #b8a8ff; box-shadow: 0 0 30px rgba(180,140,255,.6); }
  .mg-sbig canvas { image-rendering: pixelated; }
  .mg-sname { font-size: 22px; }
  .mg-side p { margin: 0; font-size: 13px; }
  .mg-sbtn .btn { font-size: 15px; padding: 8px 20px; }
  .mg-show { color: var(--muted); font-size: 11px; line-height: 1.4; margin-top: auto; }
}

/* (27-10-2026, propuesta C «Lista con detalle» de docs/menu/Criadero-Mega-Tienda-Mapas.html, la eligió el dueño) Tienda de
 * Mejoras en PC: en una ventana (antes ocupaba toda la pantalla), las mejoras en filas que se leen de un vistazo (nombre,
 * efecto, lo que da el nivel siguiente, nivel y precio) y a la derecha la ficha: el Pokémon, la mejora elegida con «Ahora» y
 * «Nivel siguiente», un botón grande de comprar, el mensaje de la tienda y lo que ya tiene. En el móvil, las cartas de antes. */
.mc-next, .mart-cmp { display: none; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-upgrades.scr { align-items: center; justify-content: center; }
  #scr-upgrades > .mart { width: min(1180px, calc(100vw - 100px)) !important; height: min(720px, calc(100dvh - 80px)) !important; max-height: none !important; margin: 0 !important;
    gap: 10px; padding: 0 12px 12px; overflow: hidden; text-shadow: 2px 2px 0 var(--shadow, #0a1430); color: #fff;
    background: linear-gradient(180deg, #2c519f, #1a3170); border: 3px solid #f4f8ff; border-radius: 12px; box-shadow: 0 0 0 3px #0b1838, inset 0 0 0 2px #5b83d6, 0 18px 50px rgba(0,0,0,.55); }
  #scr-upgrades .mart-top { margin: 0 -12px; padding: 6px 14px; border: 0; border-radius: 9px 9px 0 0; box-shadow: none; background: linear-gradient(#3a6ac8, #2c519f); border-bottom: 2px solid rgba(244,248,255,.18); }
  #scr-upgrades .mart-sign { font-size: 20px; }
  #scr-upgrades .mart-coins, #scr-upgrades .mart-back { font-size: 14px; padding: 3px 12px; border-width: 2px; text-shadow: none; }
  #scr-upgrades .mart-reg, #scr-upgrades .mart-mon, #scr-upgrades .mart-search { text-shadow: none; }
  #scr-upgrades .mart-bar { flex: none; }
  #scr-upgrades .mart-mons { padding: 0; }
  #scr-upgrades .mart-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; }
  /* las mejoras en filas */
  #scr-upgrades .mart-win { border: 2px solid rgba(244,248,255,.15); border-radius: 12px; background: rgba(5,12,35,.42); color: #fff; }
  #scr-upgrades .mart-cards { display: flex; flex-direction: column; gap: 0; padding: 4px 10px; }
  #scr-upgrades .mart-card { display: grid; grid-template-columns: 210px minmax(0, 1fr) 150px 120px; grid-template-areas: "t u l b" "t n l b"; align-items: center; column-gap: 12px;
    padding: 5px 8px; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: none; color: #fff; box-shadow: none; flex: none; }
  #scr-upgrades .mart-card:hover { transform: none; background: rgba(255,255,255,.06); }
  #scr-upgrades .mart-card.sel, #scr-upgrades .mart-card:focus-visible { background: rgba(255,210,63,.15); box-shadow: inset 3px 0 0 #ffd23f; }
  #scr-upgrades .mart-card .mc-tt { grid-area: t; font-size: 14px; }
  #scr-upgrades .mart-card .mc-tt img { width: 22px; height: 22px; }
  #scr-upgrades .mart-card .mc-u { grid-area: u; min-height: 0; font-size: 12px; color: #b9cbf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; }
  #scr-upgrades .mart-card .mc-next { grid-area: n; display: block; font-size: 11px; color: #6ff0a0; align-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #scr-upgrades .mart-card.mart-tm .mc-u { grid-row: 1 / 3; align-self: center; white-space: normal; }
  #scr-upgrades .mart-card .mc-lv { grid-area: l; }
  #scr-upgrades .mart-card .mc-lv b { color: #b9cbf0; }
  #scr-upgrades .mart-card .mc-buy, #scr-upgrades .mart-card .mc-sw, #scr-upgrades .mart-card.mart-tm .mc-u + .mc-u { grid-area: b; }
  #scr-upgrades .mart-card .mc-buy { margin: 0; padding: 3px 6px; font-size: 13px; border-width: 2px; }
  #scr-upgrades .mart-card.poor .mc-buy { filter: saturate(.5) brightness(.85); }
  /* la ficha */
  #scr-upgrades .mart-side { gap: 8px; padding: 12px; }
  #scr-upgrades .mart-face { padding: 4px; } #scr-upgrades .mart-face .mart-pic { width: 110px !important; height: 110px !important; }
  #scr-upgrades .mart-side-nm { font-size: 18px; }
  #scr-upgrades .mart-cmp { display: flex; flex-direction: column; gap: 8px; align-self: stretch; padding: 10px; border-radius: 10px; background: rgba(5,12,35,.5); border: 2px solid rgba(255,210,63,.35); text-align: left; }
  .uc-h { display: flex; align-items: center; gap: 8px; } .uc-h span { display: flex; flex-direction: column; } .uc-h b { font-size: 16px; } .uc-h small { font-size: 12px; color: #b9cbf0; }
  .uc-u { margin: 0; font-size: 12px; color: #b9cbf0; }
  .uc-ab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 6px; }
  .uc-ab small { display: block; font-size: 11px; color: #b9cbf0; } .uc-ab b { font-size: 15px; } .uc-ab b.up { color: #6ff0a0; } .uc-ab i { font-style: normal; color: #ffd23f; font-size: 18px; }
  .uc-lv { display: flex; align-items: center; gap: 6px; } .uc-lv .bar { flex: 1; display: flex; gap: 2px; background: #485068; border-radius: 3px; padding: 2px; }
  .uc-lv .bar i { flex: 1; height: 8px; border-radius: 2px; background: #687088; } .uc-lv .bar i.on { background: #ffd23f; } .uc-lv b { font-size: 12px; }
  #scr-upgrades .uc-buy { position: static; margin: 0; font-size: 16px; padding: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
  #scr-upgrades .mart-msg { background: rgba(255,255,255,.08); color: #e7eeff; font-size: 13px; }
  #scr-upgrades .mart-side-h { color: #b9cbf0; }
  #scr-upgrades .mart-have { font-size: 12px; } #scr-upgrades .mart-have dd { color: #6ff0a0; } #scr-upgrades .mart-have .z { opacity: .45; }
  #scr-upgrades .mart-coinbar { flex: none; padding: 0; }
}

/* (27-10-2026, propuesta C «Tarjeta de entrenador dorada») «Apoyar el proyecto» en PC: dos columnas; a la izquierda tu
 * tarjeta en dorado y tu nombre en el ranking como se verían, y las recompensas; a la derecha el botón, el top 4 de quienes
 * más apoyan, los costes y los agradecimientos. En el móvil, la columna de antes. */
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  .box.support.sup-pc { width: min(1000px, calc(100vw - 100px)); max-height: calc(100dvh - 80px); display: flex; flex-direction: column; }
  .sup-pc #sup-body { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 20px; min-height: 0; overflow-y: auto; padding-top: 6px; }
  .sup-l, .sup-r { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .sup-l > p, .sup-r > p { margin: 0; }
  .sup-gc { border-radius: 14px; padding: 14px; color: #3a2400; text-shadow: none; border: 3px solid #fff8d0; box-shadow: 0 0 30px rgba(255,200,60,.45);
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 48%, transparent 56%) -200% 0 / 300% 100% no-repeat, linear-gradient(135deg, #fff3a0, #ffc21a 40%, #e89a10 60%, #fff0a0);
    animation: sup-shine 5s ease-in-out infinite; }
  @keyframes sup-shine { 0%, 60% { background-position: -200% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } }
  .sup-gc-t { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
  .sup-gc-b { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
  .sup-gc-av { width: 104px; height: 96px; border-radius: 10px; background: rgba(255,255,255,.5); display: grid; place-items: center; flex: none; }
  .sup-gc-av canvas { image-rendering: pixelated; }
  .sup-gc-b > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .sup-gc-b b { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sup-gc-b span { font-size: 14px; font-weight: 700; } .sup-gc-b small { font-size: 12px; }
  .sup-ex { border-radius: 10px; background: rgba(5,12,35,.42); border: 2px solid rgba(244,248,255,.15); padding: 6px 12px; font-size: 13px; }
  .sup-ex > div { display: grid; grid-template-columns: 26px 1fr; gap: 6px; opacity: .55; padding: 2px 0; }
  .sup-ex > div.me { opacity: 1; color: #ffd23f; font-weight: 700; text-shadow: 0 0 8px rgba(255,210,63,.55), 1px 1px 0 #6b4a00; }
  .sup-ex > div.me span:last-child { display: inline-flex; align-items: center; gap: 6px; }
  .sup-pc .sup-perks { grid-template-columns: 1fr 1fr; margin: 0; } .sup-pc .sup-perks li { font-size: 13px; align-items: flex-start; }
  .sup-pc .sup-lead { font-size: 22px; }
  .sup-big { font-size: 18px; padding: 10px 26px; font-variant-ligatures: none; }
  .sup-panel { border-radius: 10px; background: rgba(5,12,35,.42); border: 2px solid rgba(244,248,255,.15); padding: 10px 14px; }
  .sup-panel h3 { margin: 0 0 6px; font-size: 15px; }
  .sup-panel .sup-tab { margin: 0; font-size: 13px; }
  .sup-pc .sup-thanks { max-height: 90px; }
}
@media (prefers-reduced-motion: reduce) { .sup-gc { animation: none !important; } }

/* (27-10-2026, propuesta A «Dos portadas») Elige modo en PC: dos tarjetas altas con el arte grande, el nombre, tu marca y «Jugar». */
.mode-go { display: none; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-mode > .mode-box { width: min(920px, calc(100vw - 100px)); max-width: none; }
  #scr-mode .mode-grid { gap: 22px; margin-top: 14px; }
  #scr-mode .mode-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; transition: transform .12s, box-shadow .12s; }
  #scr-mode .mode-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 2px rgba(255,210,63,.4); }
  #scr-mode .mode-card:not(.gym) { border-color: rgba(95,208,122,.6); }
  #scr-mode .mode-art { height: 320px; }
  #scr-mode .mode-me { transform: scale(1.3); } #scr-mode .mode-sil { transform: scale(1.3); }
  #scr-mode .mode-boss { transform: scale(1.4); transform-origin: 50% 0; top: 20px; } #scr-mode .mode-me2 { transform: scale(1.2); transform-origin: 50% 100%; bottom: 14px; }
  #scr-mode .mode-t { font-size: 26px; }
  #scr-mode .mode-card > .sub { font-size: 14px; }
  #scr-mode .mode-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
  #scr-mode .mode-card:not(.gym) .mode-s { color: #5fd07a; }
  #scr-mode .mode-go { display: inline-block; font-weight: 700; font-size: 15px; padding: 6px 22px; border-radius: 8px; color: #2a1a00; text-shadow: none;
    background: linear-gradient(#ffd23f, #f0a31e); border: 2px solid #f4f8ff; box-shadow: 0 0 0 2px #0b1838; }
}

/* (27-10-2026, propuesta C «Mosaico») Elige mapa en PC: los 10 mapas en un mosaico de 5×2 con la imagen grande y el nombre
 * encima; abajo, el elegido y Jugar. En el móvil, la lista de antes. */
.stg-bar { display: none; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-stages > .box { width: min(1180px, calc(100vw - 100px)) !important; height: min(720px, calc(100dvh - 80px)); max-height: none; display: flex; flex-direction: column; }
  #scr-stages .stg-list { flex: 1; min-height: 0; max-height: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: hidden; padding: 6px 4px 4px; margin-top: 0; }   /* (27-10-2026) padding: al pasar el ratón la carta sube 3 px y su borde de arriba se cortaba en la primera fila (antes padding 0) */
  #scr-stages .stg-card { display: block; position: relative; padding: 0; overflow: hidden; border-radius: 12px; border-width: 3px; min-height: 0; }
  #scr-stages .stg-card:hover { transform: translateY(-3px); }
  #scr-stages .stg-card.focus { border-color: #ffd23f; box-shadow: 0 0 0 3px rgba(255,210,63,.35), 0 0 22px rgba(255,210,63,.35); }
  #scr-stages .stg-card.stg-ditto.focus { border-color: #ff9ad8; box-shadow: 0 0 0 3px rgba(255,154,216,.35); }
  #scr-stages .stg-card.locked { filter: none; } #scr-stages .stg-card.locked .stg-prev { filter: grayscale(1) brightness(.55); }
  #scr-stages .stg-card.locked .stg-txt::before { content: "🔒"; position: absolute; right: 10px; top: -26px; font-size: 18px; }
  #scr-stages .stg-prev { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; }
  #scr-stages .stg-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 8px; background: linear-gradient(transparent, rgba(5,12,35,.95) 55%); }
  #scr-stages .stg-reg { font-size: 11px; } #scr-stages .stg-nm { font-size: 15px; }
  #scr-stages .stg-ds, #scr-stages .stg-meta { display: none; }
  #scr-stages .stg-card.locked .stg-ds { display: block; font-size: 11px; }
  #scr-stages .stg-boss { right: 6px; top: 6px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
  #scr-stages .stg-dnew { top: 8px; left: 8px; right: auto; }
  #scr-stages .stg-bar { display: flex; align-items: center; gap: 14px; flex: none; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(5,12,35,.42); border: 2px solid rgba(244,248,255,.15); min-height: 66px; }
  .stg-bar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .stg-bar-t b { font-size: 17px; } .stg-bar-t span { font-size: 13px; color: var(--muted); } .stg-bar-t small { font-size: 11px; color: var(--muted); opacity: .8; }
  .stg-go { font-size: 17px; padding: 10px 34px; }
}

/* (27-10-2026) Imágenes que eligió el dueño (docs/menu/Imagenes-Modos-y-Mapas.html), sólo en PC: Elige modo con Horde 1
 * (la horda, assets/menu/mode-horde.webp) y Gimnasios 3 (el mapa de Kanto con las medallas), y en Elige mapa la postal de
 * cada región con su legendario (assets/stages/<id>-card.webp). */
.stg-art { display: none; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-mode .mode-art.pic { background: #0b1530; }
  #scr-mode .mode-art.pic::before, #scr-mode .mode-art.pic::after { display: none; }
  .mode-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
  #scr-mode .mode-art.pic .mode-me { transform: none; left: calc(50% - 60px); top: calc(52% - 82px); filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
  .mode-art.gym.pic .mode-bg { object-fit: fill; }
  .mode-bdg { position: absolute; width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%); image-rendering: pixelated; filter: grayscale(.9) brightness(.65) drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
  .mode-bdg.got { filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
  .mode-bdg.next { filter: drop-shadow(0 0 6px #ffd23f) drop-shadow(0 0 2px #fff); animation: mode-pulse 1.6s ease-in-out infinite; }
  @keyframes mode-pulse { 50% { transform: translate(-50%, -50%) scale(1.15); } }
  .mode-me3 { position: absolute; right: 2%; bottom: 0; image-rendering: pixelated; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
  #scr-stages .stg-card:not(.stg-ditto) .stg-prev { display: none; }
  #scr-stages .stg-art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; image-rendering: auto; }
  #scr-stages .stg-card.locked .stg-art { filter: grayscale(1) brightness(.55); }
  #scr-stages .stg-boss { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mode-bdg.next { animation: none; } }

/* (27-10-2026) Iconos nuevos de las pasivas (24 × 24, js/data/passive-icons.js): en las cartas de nivel, a un múltiplo
   entero (48 o 24) para que los píxeles salgan parejos (antes se estiraban a 40). */
.vcard .vc-ico img.pv { width: 48px; height: 48px; }
@media (max-height: 500px) { .vcard .vc-ico img.pv { width: 24px; height: 24px; } }

/* ===== (27-10-2026) Intercambios en ventana (sólo en PC; lo eligió el dueño en las propuestas: pantalla C «Compacta» y
   selector B «Columna de filtros»). Antes: pantalla completa, y el selector sólo con buscador por nombre. ===== */
.pp-tools .pp-ft { display: none; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-trades { align-items: center !important; justify-content: center; }
  #scr-trades > .box { width: min(1160px, 92vw) !important; height: auto !important; min-height: 0 !important; max-height: 90vh; overflow: auto; margin: auto; }
  #scr-trades .trx-stage { height: 112px; }
  #scr-trades .trx-ev { margin: 1px 0; }
  #scr-trades .trx-label { min-height: 44px; font-size: 13px; padding: 4px 8px; }
  /* pantalla: compacta, amigos y pestañas arriba, fichas juntas sin el circuito */
  #scr-trades > .box { width: min(900px, 88vw) !important; }
  #scr-trades #trx-fr { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
  #scr-trades .trx-fr-head { flex: none; font-size: 13px; }
  #scr-trades .trx-fr-row { flex: 1; min-width: 0; }
  #scr-trades .trx-fr-list { display: flex; gap: 6px; overflow-x: auto; }
  #scr-trades .tr-friend { flex: 0 0 auto; padding: 5px 12px; border-radius: 99px; }
  #scr-trades #trx-tabs { justify-content: center; }
  #scr-trades .trx-board { padding: 46px 0; }
  #scr-trades .trx-board::before, #scr-trades .trx-board::after, #scr-trades .trx-arrow, #scr-trades .trx-ball { display: none; }
  #scr-trades .trx-main { grid-template-columns: 1fr 96px 1fr; }
  #scr-trades .trx-mid svg { width: 84px; }
  #scr-trades .trx-mid::before { width: 96px; height: 96px; border-width: 10px; }
  #scr-trades .trx-bar { width: min(300px, 46%); font-size: 11px; padding: 4px 10px; }

  /* ---- selector «¿Qué das a cambio?» ---- */
  .trade-ov .tr-box.pcpick { width: min(1100px, 92vw); }
  /* selector: los filtros en una columna a la izquierda */
  .trade-ov .tr-box.pcpick { display: grid; grid-template-columns: 190px minmax(0, 1fr); grid-template-areas: 'h h' 'f s' 'f p'; column-gap: 14px; }
  .trade-ov .pcpick > .row.between { grid-area: h; }
  .trade-ov .pcpick > .dex-search { grid-area: s; }
  .trade-ov .pp-tools { grid-area: f; flex-direction: column; align-items: stretch; align-self: start; gap: 8px; background: rgba(0,0,0,.18); border-radius: 10px; padding: 10px; }
  .trade-ov .pp-tools .pp-ft { display: block; }
  .trade-ov .pp-chips { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .trade-ov .pp-chips .chip { text-align: left; }
  .trade-ov .pp-tools select { width: 100%; }
  .trade-ov .pp-split { grid-area: p; }
}

/* ===== (28-10-2026, estilo B «Filas», lo eligió el dueño de docs Apoyo-estilos, sin «Recomendada») Apoyar en menos pasos:
 * una fila por nivel (3 / 8 / 15 USD) con su botón, el apodo con «Copiar», la confirmación cuando llega la donación y los
 * marcos de la Tarjeta de entrenador (doble borde con las esquinas en escalón, estilo 16 bits). Antes: un solo botón
 * «Donar en Ko-fi» y el apodo había que escribirlo a mano. ===== */
.sup-lv { display: grid; gap: 8px; margin: 8px 0 0; }
.sup-lvc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h a" "u a"; gap: 2px 12px; align-items: center;
  padding: 10px 14px 10px 18px; border-radius: 10px; background: rgba(5,12,35,.45); border: 2px solid rgba(244,248,255,.18); }
.sup-lvc::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 5px; border-radius: 0 4px 4px 0; background: #ffd23f; }
.sup-lvc.t-red::before { background: #ff5f6d; } .sup-lvc.t-silver::before { background: linear-gradient(#e6f7ff, #4fa3d6); } .sup-lvc.t-shiny::before { background: linear-gradient(#ff8ad8, #ffd23f, #5fe08a, #5fc8ff, #c47bff); }
.sup-lvh { grid-area: h; display: flex; align-items: baseline; gap: 10px; }
.sup-lvh b { font-size: 20px; }
.sup-usd { font-weight: 700; }
.sup-lvc ul { grid-area: u; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 12px; color: var(--muted); }
.sup-lvc .sup-go { grid-area: a; white-space: nowrap; }
.sup-lvc.have { opacity: .6; } .sup-lvc.have .sup-go { pointer-events: none; }
.sup-sum { margin: 4px 0 0; font-size: 12px; }
.sup-nick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(5,12,35,.45); border: 2px dashed rgba(255,210,63,.5); }
.sup-nick > span { flex: 1 1 100%; font-size: 13px; color: var(--muted); }
.sup-nick b { font-size: 24px; color: #ffd23f; user-select: all; overflow-wrap: anywhere; }
.sup-nick.none { border-style: solid; border-color: rgba(244,248,255,.18); }
.sup-nick.none > span { color: inherit; }

/* Confirmación: tu rango llegó */
#sup-got { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; background: rgba(4,8,24,.72); padding: 16px; }
#sup-got.on { display: grid; animation: sgIn .25s ease-out; }
@keyframes sgIn { from { opacity: 0; } }
#sup-got .sg-box { max-width: 440px; text-align: center; padding: 22px 24px; border-radius: 14px; background: #13234d; border: 4px solid #ffd23f; box-shadow: 0 0 40px rgba(255,210,63,.45); }
#sup-got.t-red .sg-box { border-color: #ff5f6d; box-shadow: 0 0 40px rgba(255,95,109,.45); }
#sup-got.t-silver .sg-box { border-color: #b4e4ff; box-shadow: 0 0 40px rgba(150,215,250,.45); }   /* (30-10-2026) */
#sup-got.t-shiny .sg-box { border-color: #c47bff; box-shadow: 0 0 40px rgba(196,123,255,.5); }
#sup-got h2 { margin: 6px 0; color: #ffd23f; font-size: 24px; text-wrap: balance; }
#sup-got.t-red h2 { color: #ff8a92; } #sup-got.t-silver h2 { color: #cdeeff; } #sup-got.t-shiny h2 { color: #e6b8ff; }
#sup-got .sg-name { font-size: 30px; font-weight: 700; margin: 4px 0 10px; }
#sup-got p { margin: 6px 0; }
#sup-got .btn { margin-top: 10px; font-size: 18px; padding: 8px 30px; }
@media (prefers-reduced-motion: reduce) { #sup-got.on { animation: none; } }

/* Botón «Apoyar» del menú: dorado, corazón rojo y un brillo suave que pasa cada ~20 s (sin parpadeos ni punto rojo) */
.menu-item.support { overflow: hidden; }
.menu-item.support .mi-ico svg, .menu-item.support .mi-ico canvas, .menu-item.support .mi-ico img { filter: drop-shadow(0 0 4px rgba(255,80,100,.55)); }
.menu-item.support::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,240,180,.35), transparent); transform: skewX(-18deg); animation: supSweep 20s ease-in-out 4s infinite; }
@keyframes supSweep { 0%, 94% { left: -40%; } 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) { .menu-item.support::after { animation: none; display: none; } }

/* Marcos de la Tarjeta de entrenador (.tcf.fr + t-gold / t-red / t-silver / t-shiny) */
.tcf { --fa: #ffd23f; --fb: #b8860b; --fc: #fff3a0; }
.tcf.t-red { --fa: #ff5f6d; --fb: #8a1020; --fc: #ffc0c6; }
.tcf.t-silver { --fa: #b4e4ff; --fb: #2f75a6; --fc: #ffffff; }   /* (30-10-2026) */
.tcf.t-shiny { --fa: #c47bff; --fb: #3a8ad8; --fc: #fff; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  /* la tarjeta de ejemplo de «Apoyar» toma el color del nivel por el que pasa el mouse */
  .sup-gc.t-red { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 48%, transparent 56%) -200% 0 / 300% 100% no-repeat, linear-gradient(135deg, #ffd0d4, #ff5f6d 40%, #c8203a 60%, #ffc0c6); color: #3a0008; }
  .sup-gc.t-silver { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.6) 48%, transparent 56%) -200% 0 / 300% 100% no-repeat, linear-gradient(135deg, #e6f7ff, #94d4f5 40%, #4fa3d6 60%, #cdeeff); color: #10304a; }   /* (30-10-2026) */
  .sup-gc.t-shiny { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 48%, transparent 56%) -200% 0 / 300% 100% no-repeat, linear-gradient(135deg, #ffd6f2, #c8e8ff 30%, #e6d0ff 55%, #fff3b0 80%, #d0ffe0); color: #2a1048; }
  .sup-pc .sup-lvc { transition: transform .12s; } .sup-pc .sup-lvc:hover { transform: translateY(-2px); }
  .tcf.fr { position: relative; border: 6px solid var(--fa); border-radius: 0; box-shadow: inset 0 0 0 3px var(--fb), inset 0 0 0 5px var(--fc);
    clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)); }
  .tcf.fr.t-shiny { border-image: linear-gradient(135deg, #ff8ad8, #ffd23f, #5fe08a, #5fc8ff, #c47bff) 1; }
  /* el elegidor de marco en la Tarjeta de entrenador */
  .set-tc-fr { display: flex; flex-wrap: wrap; gap: 6px; }
  .set-tc-fr button { appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 6px; border: 2px solid rgba(26,42,74,.35); background: rgba(255,255,255,.6); color: #1a2a4a; text-shadow: none; }
  .set-tc-fr button.on { border-color: #1a2a4a; background: #fff; box-shadow: 0 0 0 2px #ffd23f; }
  .set-tc-fr button.lock { opacity: .55; } .set-tc-fr button.lock::after { content: " · " attr(data-lock); font-weight: 400; }
  .set-tc-fr button[data-f="gold"] { color: #8a6000; } .set-tc-fr button[data-f="red"] { color: #b01828; } .set-tc-fr button[data-f="silver"] { color: #22689a; } .set-tc-fr button[data-f="shiny"] { color: #7a3ac8; }
}

/* ============ Menú «¿Qué ataque deja su lugar?» (28-10-2026) — js/ui/swap-ui.js ============
 * La propuesta A «Elegir lado» que eligió el dueño. Antes: cartas de G.RunUI.showChoice. Es una caja lógica de
 * 960×540 que el JS escala con transform (PC y móvil apaisado). Mega ataque: borde cian y la piedra con un aro irisado. */
#sw-root {
  --sw-ink: #0a0d18; --sw-win: #141b30; --sw-win2: #1d2643; --sw-fg: #eceaf6; --sw-muted: #9aa0bd;
  --sw-gold: #ffd23f; --sw-gold-d: #b8860b; --sw-bad: #ff6b6b; --sw-cy: #57e1ff; --sw-m1: #ff5fd2; --sw-m3: #8dff7a;
  position: fixed; inset: 0; z-index: 45; overflow: hidden; outline: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(24,18,52,.82), rgba(4,5,12,.95));
  font-family: var(--font); color: var(--sw-fg); touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  animation: sw-in .18s ease-out;
}
#sw-root.sw-still { animation: none; }
@keyframes sw-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sw-spin { to { transform: rotate(1turn); } }
#sw-root .sw-stage { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; }
#sw-root .sw-win { background: var(--sw-win); border: 3px solid #39456e; box-shadow: 0 0 0 3px var(--sw-ink), 6px 6px 0 3px rgba(0,0,0,.55); }

#sw-root .sw-title { position: absolute; left: 0; right: 0; top: 7px; text-align: center; }
#sw-root .sw-k { font-size: 14px; letter-spacing: 3px; color: var(--sw-gold); text-shadow: 2px 2px 0 var(--sw-ink); }
#sw-root.sw-mega .sw-k { color: var(--sw-cy); }
#sw-root .sw-t { font-size: 32px; font-weight: 700; color: #fff; text-shadow: 3px 3px 0 var(--sw-ink); line-height: 1.1; }

/* los dos escudos */
#sw-root .sw-crest { position: absolute; top: 65px; width: 300px; height: 92px; display: flex; align-items: center; gap: 14px; padding: 0 16px; }
#sw-root .sw-cl { left: 96px; } #sw-root .sw-cr { left: 564px; border-color: var(--sw-gold); }
#sw-root.sw-mega .sw-cr { border-color: var(--sw-cy); }
#sw-root .sw-face, #sw-root .sw-emb { flex: none; width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden;
  border: 3px solid var(--fc, var(--sw-gold)); background: #1b2440; }
#sw-root .sw-emb { border-color: var(--tc); background: var(--sw-ink); }
#sw-root .sw-emb img { width: 48px; height: 48px; image-rendering: pixelated; }
#sw-root .sw-face .mart-pic { width: 100% !important; height: 100% !important; border-radius: 0; display: block; }
#sw-root .sw-face-img, #sw-root .sw-face-cv { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#sw-root .sw-ctx { min-width: 0; flex: 1; }
#sw-root .sw-lab { font-size: 13px; letter-spacing: 2px; color: var(--sw-muted); }
#sw-root .sw-big { font-size: 24px; font-weight: 700; line-height: 1.05; overflow-wrap: anywhere; }
#sw-root .sw-long .sw-big { font-size: 18px; }
#sw-root .sw-cr .sw-big { color: var(--sw-gold); }
#sw-root.sw-mega .sw-cr .sw-big { color: var(--sw-cy); }
#sw-root .sw-sub { font-size: 13px; color: var(--sw-muted); line-height: 1.25; margin-top: 3px; }
#sw-root .sw-vs { position: absolute; left: 400px; width: 160px; top: 93px; text-align: center; font-size: 30px; font-weight: 700; color: var(--sw-gold); text-shadow: 3px 3px 0 var(--sw-ink); }
/* la piedra megaevolutiva con su aro irisado */
#sw-root .sw-stone { position: relative; flex: none; width: 64px; height: 64px; display: grid; place-items: center; margin: 0 4px; }
#sw-root .sw-stone::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; opacity: .75; filter: blur(5px);
  background: conic-gradient(var(--sw-m1), var(--sw-cy), var(--sw-m3), var(--sw-gold), var(--sw-m1)); animation: sw-spin 3s linear infinite; }
#sw-root .sw-stone img { position: relative; image-rendering: pixelated; }
/* qué hace el ataque seleccionado (izquierda) y el nuevo (derecha) */
#sw-root .sw-desc { position: absolute; top: 162px; width: 300px; height: 54px; padding: 1px 0 0 9px; border-left: 3px solid var(--tc, #8fa3c4);
  font-size: 15px; line-height: 18px; color: #cfd3e8; text-shadow: 2px 2px 0 var(--sw-ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
#sw-root .sw-dl { left: 96px; } #sw-root .sw-dr { left: 564px; }
/* (28-10-2026) Qué necesita cada ataque para evolucionar: en cada ficha (2.ª línea) y bajo la descripción del nuevo.
   La pasiva (o el ataque compañero) que ya llevas sale encendida. Antes no se veía en este menú. */
#sw-root .sw-dr { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
#sw-root .sw-dr .sw-dt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
#sw-root .sw-dr.has-ev .sw-dt { -webkit-line-clamp: 2; line-clamp: 2; }
#sw-root .sw-tx { min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
#sw-root .sw-ev { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; line-height: 15px; color: #aeb5d8; white-space: nowrap; overflow: hidden; text-shadow: none; }
#sw-root .sw-desc .sw-ev { margin-top: 1px; font-size: 13px; text-shadow: 2px 2px 0 var(--sw-ink); }
#sw-root .sw-ev img { image-rendering: pixelated; flex: none; }
#sw-root .sw-ev-lv { flex: none; color: var(--sw-gold); }
#sw-root .sw-ev-p { display: inline-flex; flex: none; align-items: center; gap: 2px; opacity: .6; }   /* lo que pide va entero; lo que se recorta es el nombre de la evolución */
#sw-root .sw-ev-p.on { opacity: 1; color: #8ff0b0; }
#sw-root .sw-ev-to { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #fff; }
#sw-root .sw-chip.out .sw-ev { opacity: .55; }

/* carriles y «mandos» */
#sw-root .sw-lane { position: absolute; top: 218px; height: 254px; width: 300px; border: 2px dashed rgba(255,255,255,.1); }
#sw-root .sw-ll { left: 96px; } #sw-root .sw-lr { left: 564px; border-color: rgba(87,225,255,.25); }
#sw-root.sw-evo .sw-lr { border-color: rgba(255,210,63,.25); }
#sw-root .sw-chip { position: absolute; width: 300px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 6px; pointer-events: none;
  background: var(--sw-win2); border: 3px solid #45528a; box-shadow: 0 0 0 3px var(--sw-ink), 4px 4px 0 3px rgba(0,0,0,.5);
  transition: left .22s cubic-bezier(.3,1.4,.5,1), border-color .15s, background .15s; }
#sw-root .sw-chip.drag { z-index: 3; }
#sw-root .sw-ic { flex: none; display: grid; place-items: center; background: var(--sw-ink); border: 2px solid var(--tc); }
#sw-root .sw-ic img { image-rendering: pixelated; }
#sw-root .sw-nm { min-width: 0; font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sw-root .sw-lv { flex: none; margin-left: auto; font-size: 14px; color: var(--sw-muted); white-space: nowrap; }
#sw-root .sw-tag { display: none; flex: none; font-size: 13px; font-weight: 700; color: #fff; background: var(--sw-bad); padding: 0 6px; margin-left: -4px; white-space: nowrap; }
#sw-root .sw-chip.sel { border-color: var(--sw-gold); background: #2a2f55; }
#sw-root .sw-chip.out { background: #2c1630; border-color: var(--sw-bad); }
#sw-root .sw-chip.out .sw-nm { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--sw-bad); color: #d7c6d8; }
#sw-root .sw-chip.out .sw-tag { display: inline-block; }
/* el cursor ◀ ▶ del medio (tocable) y las zonas que reciben el toque de cada fila */
#sw-root .sw-cur { position: absolute; left: 400px; width: 160px; height: 50px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; transition: top .15s; z-index: 2; }
#sw-root .sw-arr { pointer-events: auto; cursor: pointer; width: 68px; height: 64px; margin: -7px -6px; padding: 0; border: 0; background: none; color: var(--sw-gold); font-size: 26px; text-shadow: 2px 2px 0 var(--sw-ink); }
#sw-root .sw-arr:active { transform: scale(.9); }
#sw-root .sw-row { position: absolute; left: 96px; width: 768px; cursor: pointer; touch-action: none; }
#sw-root.sw-still .sw-chip, #sw-root.sw-still .sw-cur { transition: none; }

/* barra de abajo: teclas y botones grandes (el fondo se alarga a los lados para llegar al borde de la pantalla) */
#sw-root .sw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 18px;
  font-size: 15px; color: var(--sw-muted); }
#sw-root .sw-bar::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -1600px; right: -1600px;
  background: rgba(6,8,18,.9); border-top: 3px solid #2b3354; }
#sw-root .sw-hint { white-space: nowrap; }
#sw-root .sw-ht { display: none; white-space: normal; max-width: 300px; line-height: 1.15; font-size: 13px; }
#sw-root .sw-kb { display: inline-block; min-width: 22px; text-align: center; padding: 0 5px; margin-right: 4px; background: var(--sw-win2); border: 2px solid #3b4672; border-bottom-width: 4px; color: #fff; font-size: 14px; line-height: 18px; }
#sw-root .sw-btn { position: relative; font-family: inherit; font-size: 19px; font-weight: 700; height: 40px; min-width: 150px; padding: 0 22px; border: 0; cursor: pointer;
  color: #1a1406; background: var(--sw-gold); box-shadow: 0 4px 0 var(--sw-gold-d); }
#sw-root .sw-btn::after { content: ""; position: absolute; inset: -8px -6px; }   /* zona de toque más grande que el botón */
#sw-root .sw-btn.sw-ghost { color: var(--sw-fg); background: #2a3254; box-shadow: 0 4px 0 #161b30; }
#sw-root .sw-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sw-gold-d); }
#sw-root .sw-btn.sw-ghost:active { box-shadow: 0 2px 0 #161b30; }
#sw-root .sw-btn:focus-visible, #sw-root .sw-arr:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* con dedo (puntero «grueso»), en vez de las teclas, cómo se usa */
@media (pointer: coarse) {
  #sw-root .sw-hk { display: none; } #sw-root .sw-ht { display: block; font-size: 14px; max-width: 320px; }
  #sw-root .sw-bar { height: 64px; }
  #sw-root .sw-btn { height: 48px; min-width: 176px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  #sw-root { animation: none; }
  #sw-root .sw-stone::before { animation: none; }
  #sw-root .sw-chip, #sw-root .sw-cur { transition: none; }
}
#sw-root.sw-still .sw-stone::before { animation: none; }

/* (28-10-2026) Criadero: la pizarra con los EVs del Pokémon que acaba de nacer (propuesta C «Pizarra» de
 * scratchpad/hatev, la eligió el dueño). Antes no se veían los EVs al abrir un huevo (sólo en la PC).
 * En el móvil tapa «Tus huevos» mientras ves el resultado; en PC cuelga en la pared, a la derecha del nido. */
.hat-shelf { position: relative; }
.hat-board { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; padding: 10px 14px 12px; color: #f2f2ea; text-shadow: none;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(255,255,255,.05), transparent 50%), #2f3d34;
  border: 8px solid #7a4a22; box-shadow: inset 0 0 0 2px #1a241e, 0 0 0 3px #2c180a, 6px 8px 0 rgba(20,10,4,.55); animation: hb-in .5s ease-out both; }
@keyframes hb-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.hat-board::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: -16px; height: 9px; background: #6a3e1a; border: 2px solid #2c180a; }
.hat-board .hb-chalk { position: absolute; right: 30px; bottom: -14px; width: 16px; height: 5px; background: #f6f6ee; z-index: 1; }
.hat-board .hb-eraser { position: absolute; left: 22px; bottom: -16px; width: 26px; height: 8px; background: #c08a5a; border-top: 3px solid #4a6a8a; z-index: 1; }
.hat-board h4 { margin: 0 0 6px; font-size: 19px; font-weight: 400; letter-spacing: 1px; opacity: .92; text-align: left; }
.hat-board h4 u { text-decoration: none; background: repeating-linear-gradient(90deg, rgba(242,242,234,.85) 0 6px, transparent 6px 8px) bottom / 100% 2px no-repeat; padding-bottom: 2px; }
.hat-board .hb-row { display: grid; grid-template-columns: 20px 86px 1fr 26px 54px; align-items: center; gap: 6px; height: 28px; }
.hat-board .hb-w { opacity: 0; animation: hb-write var(--d, .3s) steps(6) var(--t, 0s) both; }
.hat-board.hb-now .hb-w { animation: none; opacity: .93; clip-path: none; }   /* (02-11-2026) clic: se salta la escritura */   /* (los tiempos los pone hatchery-ui.js, igual que los de la tiza) */
@keyframes hb-write { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: .93; clip-path: inset(0 0 0 0); } }
.hat-board .hb-ico { width: 20px; height: 20px; image-rendering: pixelated; filter: grayscale(1) brightness(2.2) contrast(.8); opacity: .9; }
.hat-board .hb-lab { font-size: 14px; text-align: left; white-space: nowrap; }
.hat-board .hb-bar { height: 12px; position: relative; }
.hat-board .hb-bar::before { content: ""; position: absolute; inset: 0; border: 2px solid rgba(242,242,234,.35); }
.hat-board .hb-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(115deg, rgba(242,242,234,.9) 0 2px, transparent 2px 5px); }
.hat-board .hb-val { position: relative; font-size: 16px; text-align: right; }
/* (28-10-2026, lo pidió el dueño) sin el círculo amarillo alrededor del 32 (antes .hb-val.max::after) */
/* la tiza que lo va escribiendo, renglón a renglón y de arriba abajo (la mueve hatchery-ui.js) */
.hat-board .hb-pen { position: absolute; left: 0; top: 0; width: 6px; height: 16px; z-index: 2; pointer-events: none; transform-origin: 50% 100%;
  background: linear-gradient(#ffffff 0 3px, #f2f2ea 3px 12px, #d8d8cc 12px); box-shadow: 1px 0 0 #b8b8ac, 2px 3px 0 rgba(0,0,0,.35); }
.hat-board .hb-pct { font-size: 13px; text-align: right; }
.hat-board .hb-pct.up { color: #a8f0b8; } .hat-board .hb-pct.down { color: #ffb0b0; }
.hat-board .hb-foot { font-size: 11px; opacity: .7; margin-top: 2px; text-align: left; }
/* (30-10-2026, lo eligió el dueño: opción A «En la pizarra») Debajo de los EVs, los 3 ataques por impronta (hatchery-ui.js impHtml):
   icono en color, nombre y su tipo; el legendario en tiza dorada, el mega en rosa, y brillan al escribirlos (.shine). */
.hat-board .hb-imp { margin-top: 8px; padding-top: 6px; border-top: 2px dashed rgba(242,242,234,.35); }
.hat-board .hb-imp h5 { margin: 0 0 4px; font-size: 15px; font-weight: 400; letter-spacing: 1px; text-align: left; }
.hat-board .hb-mv { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px; height: 26px; text-align: left; }
.hat-board .hb-mvi { width: 22px; height: 22px; image-rendering: pixelated; }
.hat-board .hb-mv b { font-weight: 400; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hat-board .hb-mv i { font-style: normal; font-size: 12px; opacity: .85; white-space: nowrap; }
.hat-board .hb-mv.leg b, .hat-board .hb-mv.leg i { color: #ffe27a; opacity: 1; }
.hat-board .hb-mv.mega b, .hat-board .hb-mv.mega i { color: #ffb0ec; opacity: 1; }
.hat-board .hb-mv.shine b { animation: hb-shine 1.1s ease-out 2; }
@keyframes hb-shine { 50% { text-shadow: 0 0 6px currentColor, 0 0 14px currentColor; } }
.hat-board.has-imp { bottom: auto; justify-content: flex-start; }
@media (orientation: landscape) and (max-height: 500px) {
  /* en el celular la pizarra crece hacia abajo, más apretada, y la estantería no la recorta */
  #scr-hatchery .hat-shelf.has-imp { overflow: visible; }
  .hat-board.has-imp { padding: 6px 12px 8px; }
  .hat-board.has-imp h4 { margin-bottom: 2px; font-size: 17px; }
  .hat-board.has-imp .hb-row { height: 22px; }
  .hat-board.has-imp .hb-imp { margin-top: 4px; padding-top: 3px; }
  .hat-board.has-imp .hb-imp h5 { margin-bottom: 1px; font-size: 13px; }
  .hat-board.has-imp .hb-mv { height: 22px; }
  .hat-board.has-imp .hb-mvi { width: 18px; height: 18px; }
  .hat-board.has-imp .hb-mv b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .hat-board, .hat-board .hb-w { animation: none !important; opacity: .93; } .hat-board .hb-pen { display: none; } .hat-board .hb-mv.shine b { animation: none; } }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  /* en la pared del granero (la .hat-shelf es la caja de las pacas: top 218 px dentro del granero) */
  #scr-hatchery .hat-board { inset: auto; left: calc(50% + 74px); top: -164px; width: 300px; padding: 12px 14px 10px; }
}

/* (28-10-2026) Botones del resumen de la partida: «Compartir» (js/ui/share-card.js) al lado de «Volver al menú». */
/* Se queda pegado abajo mientras se desplaza el resumen (antes, «Volver al menú» sólo salía al llegar al final; en el celular horizontal ya se quedaba abajo). */
.over-acts { display: flex; justify-content: center; align-items: stretch; gap: 12px; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 2;
  margin-top: 6px; padding: 14px 0 8px; background: linear-gradient(rgba(26, 49, 112, 0), #1a3170 34%); }
.over-acts .btn { min-width: 150px; }
.over-acts .btn:disabled { cursor: progress; }

/* (28-10-2026) Resumen al terminar un gimnasio (run-ui.js showGym) */
.gym-sum-head { display: flex; align-items: center; gap: 14px; text-align: left; }
.gym-sum-head > div { display: grid; gap: 2px; }
.gym-sum-head b { font-size: 22px; }
.gym-sum-head small { color: #ffd23f; }
.gym-sum-badge { width: 56px; height: 56px; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(255, 210, 63, .55)); flex: none; }
.gym-sum-badge.off { filter: grayscale(1) brightness(.55); opacity: .7; }
.gym-sum-team { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.gym-sum-mon { display: grid; justify-items: center; gap: 2px; position: relative; padding: 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.gym-sum-mon i { display: block; height: 48px; }
.gym-sum-mon small { font-size: 11px; }
.gym-sum-mon.done canvas { filter: grayscale(1) brightness(.6); }
.gym-sum-mon.done::after { content: '✕'; position: absolute; top: 2px; right: 6px; color: #5fe08a; font-weight: 700; }
.gym-sum-mon.cur { outline: 2px solid #ff6b6b; }
.gym-sum-mon em { font-style: normal; font-size: 11px; color: #ff6b6b; font-weight: 700; }
.gym-sum-mon em { display: block; }

/* (28-10-2026, tarde) Apoyar: sin botón por nivel (los niveles sólo dicen «desde X USD») y un solo botón «con lo que quieras». */
.sup-lvc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "u"; }
.sup-have { font-size: 12px; color: #5fe08a; font-weight: 700; }
.sup-go1 { display: flex; justify-content: center; gap: 8px; margin-top: 10px; font-size: 18px; padding: 10px 16px; }

/* =====================================================================
 * Desafío de la semana (28-10-2026) — js/systems/challenge.js, js/ui/challenge-ui.js
 * La entrada del menú (a todo el ancho de «Partida»), la pantalla (mapa + Pokémon a la izquierda, top 10 y campeón a la
 * derecha; en el móvil apaisado todo entra sin desplazar la página, lo de la derecha se desplaza dentro) y el marco
 * «Campeón del desafío» de la Tarjeta de entrenador (verde esmeralda con laureles, mismo doble borde de píxeles).
 * ===================================================================== */
#scr-menu .menu-sect .menu-item.chal { grid-column: 1 / -1; }
@media (min-height: 521px) { #scr-challenge { padding-top: 66px; } }
#scr-challenge .chal-box { width: min(960px, 100%); display: flex; flex-direction: column; }
#scr-challenge .chal-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; min-height: 0; }
#scr-challenge .chal-hero { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#scr-challenge .chal-art { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 300px; overflow: hidden; border: 3px solid var(--edge-out, #0a0d18);
  border-radius: 8px; background: #2c519f; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 4px 0 rgba(0,0,0,.35); }
#scr-challenge .chal-map-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#scr-challenge .chal-art > canvas:not(.chal-map-cv) { position: absolute; left: 50%; bottom: 4%; height: 88%; width: auto; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0,0,0,.28)); }
#scr-challenge .chal-info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
#scr-challenge .chal-mon { font-size: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#scr-challenge .chal-map { font-size: 14px; color: var(--muted); }
#scr-challenge .chal-left { font-size: 15px; font-weight: 700; color: #7dffb4; }
#scr-challenge .chal-rule { font-size: 14px; color: #fff; padding: 3px 10px; border-radius: 6px; background: rgba(0,0,0,.28); border-left: 4px solid #2fd98a; margin: 2px 0 4px; }
#scr-challenge .chal-go { font-size: 20px; padding: 8px 34px; }
#scr-challenge .chal-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
#scr-challenge .chal-top { background: rgba(0,0,0,.22); border-radius: 10px; padding: 8px 10px; min-width: 0; }
#scr-challenge .chal-top h3 { margin: 0 0 6px; font-size: 16px; }
#scr-challenge .chal-list { display: flex; flex-direction: column; gap: 3px; }
#scr-challenge .chal-list > .sub { margin: 4px 0; font-size: 13px; }
#scr-challenge .chal-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 2px 8px; border-radius: 7px; background: rgba(0,0,0,.2); border: 2px solid transparent; font-size: 14px; }
#scr-challenge .chal-row.mine { border-color: var(--gold); background: rgba(255,210,63,.14); }
#scr-challenge .chal-row .pos { display: flex; align-items: center; gap: 3px; font-weight: 700; color: var(--muted); }
#scr-challenge .chal-row.top1 .pos { color: var(--gold); } #scr-challenge .chal-row.top2 .pos { color: #dfe7f5; } #scr-challenge .chal-row.top3 .pos { color: #e0a36b; }
#scr-challenge .chal-row .who { min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
#scr-challenge .chal-row .who a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scr-challenge .chal-row .who small { color: var(--muted); font-size: 11px; white-space: nowrap; }
/* (02-11-2026) Premios en el Top 10 (propuesta A). Antes la fila tenía 3 columnas: puesto, nombre y tiempo. */
#scr-challenge .chal-row { grid-template-columns: 46px minmax(0, 1fr) auto auto; }
#scr-challenge .chal-pz { display: flex; align-items: center; gap: 5px; }
#scr-challenge .chal-pz:not(:empty) { padding: 1px 6px; border-radius: 6px; background: rgba(255,210,63,.18); }
#scr-challenge .chal-egg { position: relative; display: inline-flex; align-items: flex-end; padding: 1px 2px 0; border-radius: 6px;
  background: radial-gradient(ellipse 60% 55% at 32% 62%, var(--rc) 0 70%, transparent 74%); }
#scr-challenge .chal-egg img { image-rendering: pixelated; }
#scr-challenge .chal-egg b { font-size: 11px; line-height: 1; }
#scr-challenge .chal-egg.sh::after { content: '✦'; position: absolute; right: -4px; top: -5px; font-size: 11px; color: #fff6a8; text-shadow: 0 0 3px #ffb400, 1px 1px 0 #6b4a00; }
#scr-challenge .chal-tube { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; font-weight: 700; }
#scr-challenge .chal-tube img { height: 16px; width: auto; }
#scr-challenge .chal-pz-foot { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
#scr-challenge .chal-pz-sum b { color: #b07a00; }
#scr-challenge .chal-row .time { display: flex; align-items: center; gap: 4px; font-weight: 700; }
#scr-challenge .chal-me { margin-top: 6px; font-size: 13px; color: var(--muted); }
#scr-challenge .chal-me .gold { color: var(--gold); }
#scr-challenge .chal-champ { padding: 8px 10px; border-radius: 10px; background: linear-gradient(180deg, rgba(47,217,138,.2), rgba(12,107,70,.22)); border: 2px solid #2fd98a; box-shadow: inset 0 0 0 2px rgba(12,107,70,.6); }
#scr-challenge .chal-champ.hidden { display: none; }
#scr-challenge .chal-champ.mine { box-shadow: inset 0 0 0 2px rgba(12,107,70,.6), 0 0 14px rgba(47,217,138,.55); }
#scr-challenge .chal-champ-t { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: #0c6b46; margin-bottom: 4px; }   /* (02-11-2026: antes #7dffb4, no se leía sobre el verde claro) */
#scr-challenge .chal-champ .sub { margin: 0; font-size: 13px; }
#scr-challenge .chal-champ-b { display: flex; align-items: center; gap: 10px; }
#scr-challenge .chal-champ-b > div { display: flex; flex-direction: column; min-width: 0; font-size: 16px; font-weight: 700; }
#scr-challenge .chal-champ-b small { font-weight: 400; font-size: 12px; color: var(--muted); }
#scr-challenge .chal-champ-b small.you { color: #0c6b46; }   /* (02-11-2026: antes #7dffb4, no se leía) */
#scr-challenge .chal-champ-b canvas { image-rendering: pixelated; flex: none; }

/* Marco «Campeón del desafío»: verde esmeralda (como los marcos de apoyo: .tcf.fr + t-champ) y el chip del título. */
.tcf.t-champ { --fa: #2fd98a; --fb: #0c6b46; --fc: #b9ffd9; }
.champ-chip { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0; padding: 1px 10px 1px 6px; font-size: 13px; font-weight: 700; letter-spacing: .5px;
  color: #eafff3; background: linear-gradient(180deg, #1f9a5e, #0c6b46); border: 3px solid #b9ffd9; border-radius: 0; text-shadow: 1px 1px 0 #053823;
  box-shadow: 0 0 0 2px #0c6b46, 0 2px 0 2px #053823; vertical-align: middle; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  .tcf.fr.t-champ::before { content: ""; position: absolute; left: 12px; top: 40px; width: 164px; height: 154px; z-index: 1; pointer-events: none; image-rendering: pixelated;
    background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22164%22 height=%22154%22 viewBox=%220 0 164 154%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%2246%22 y=%22138%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%2250%22 y=%22134%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%2246%22 y=%22142%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%2232%22 y=%22130%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%2236%22 y=%22126%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%2232%22 y=%22134%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%2220%22 y=%22118%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%2224%22 y=%22114%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%2220%22 y=%22122%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%2210%22 y=%22104%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%2214%22 y=%22100%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%2210%22 y=%22108%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%224%22 y=%2290%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%228%22 y=%2286%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%224%22 y=%2294%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%224%22 y=%2274%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%228%22 y=%2270%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%224%22 y=%2278%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%224%22 y=%2258%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%228%22 y=%2254%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%224%22 y=%2262%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%2210%22 y=%2244%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%2214%22 y=%2240%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%2210%22 y=%2248%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%2220%22 y=%2230%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%2224%22 y=%2226%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%2220%22 y=%2234%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%2232%22 y=%2218%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%2236%22 y=%2214%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%2232%22 y=%2222%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%2246%22 y=%2210%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%2250%22 y=%226%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%2246%22 y=%2214%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%22112%22 y=%22138%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%22108%22 y=%22134%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%22112%22 y=%22142%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%22126%22 y=%22130%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%22122%22 y=%22126%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%22126%22 y=%22134%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%22138%22 y=%22118%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%22134%22 y=%22114%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%22138%22 y=%22122%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%22148%22 y=%22104%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%22144%22 y=%22100%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%22148%22 y=%22108%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%22154%22 y=%2290%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%22150%22 y=%2286%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%22154%22 y=%2294%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%22156%22 y=%2274%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%22152%22 y=%2270%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%22156%22 y=%2278%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%22154%22 y=%2258%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%22150%22 y=%2254%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%22154%22 y=%2262%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%22148%22 y=%2244%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%22144%22 y=%2240%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%22148%22 y=%2248%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%22138%22 y=%2230%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%22134%22 y=%2226%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%22138%22 y=%2234%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%22126%22 y=%2218%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%22122%22 y=%2214%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%22126%22 y=%2222%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%22112%22 y=%2210%22 width=%226%22 height=%226%22 fill=%22%2347e59a%22/%3E%3Crect x=%22108%22 y=%226%22 width=%226%22 height=%226%22 fill=%22%2316915a%22/%3E%3Crect x=%22112%22 y=%2214%22 width=%226%22 height=%223%22 fill=%22%230c5a38%22/%3E%3Crect x=%2276%22 y=%22140%22 width=%2212%22 height=%228%22 fill=%22%23ffd23f%22/%3E%3Crect x=%2276%22 y=%22146%22 width=%2212%22 height=%223%22 fill=%22%23b8860b%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
  .set-tc-fr button[data-f="champ"] { color: #0c6b46; }
  .set-tc-fr button.lock[data-f="champ"]::after { content: " · " attr(data-lock); }
}

/* PC y tabletas: en una columna cuando el ancho no da para dos. */
@media (max-width: 760px) { #scr-challenge .chal-grid { grid-template-columns: 1fr; } }

/* Celular en horizontal (844×390): la cabecera, la mitad de la izquierda con el mapa chico y las reglas, y a la derecha el top 10
   y el campeón, que se desplazan dentro de su columna. */
@media (orientation: landscape) and (max-height: 500px) {
  #scr-challenge > .chal-box { height: 100%; width: 100% !important; max-width: none; padding: 6px 12px 8px; overflow: hidden; }
  #scr-challenge .chal-box > .row.between:first-child { flex: none; margin: 0 0 4px; }
  #scr-challenge .chal-box > .row.between:first-child h2 { margin: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #scr-challenge .chal-grid { flex: 1; min-height: 0; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #scr-challenge .chal-hero { flex-direction: row; gap: 10px; min-height: 0; align-items: stretch; }
  #scr-challenge .chal-art { flex: none; width: 42%; aspect-ratio: auto; max-height: none; height: auto; align-self: stretch; max-height: 100%; }
  #scr-challenge .chal-info { flex: 1; min-width: 0; gap: 3px; justify-content: center; }
  #scr-challenge .chal-mon { font-size: 16px; gap: 5px; }
  #scr-challenge .chal-map { font-size: 11px; }
  #scr-challenge .chal-left { font-size: 12px; }
  #scr-challenge .chal-rule { font-size: 11px; padding: 2px 6px; margin: 1px 0 3px; }
  #scr-challenge .chal-go { font-size: 16px; padding: 5px 18px; }
  #scr-challenge .chal-side { overflow-y: auto; gap: 6px; padding-right: 2px; }
  #scr-challenge .chal-top { padding: 5px 8px; }
  #scr-challenge .chal-top h3 { font-size: 12px; line-height: 14px; margin: 0 0 3px; }
  #scr-challenge .chal-list { gap: 2px; }
  #scr-challenge .chal-row { grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 6px; padding: 0 6px; font-size: 11px; line-height: 16px; border-width: 0; height: 17px; }   /* (02-11-2026: + columna de premios) */
  #scr-challenge .chal-pz { gap: 3px; } #scr-challenge .chal-pz:not(:empty) { padding: 0 3px; }
  #scr-challenge .chal-egg { padding: 0 1px; } #scr-challenge .chal-egg img { height: 14px; width: auto; }
  #scr-challenge .chal-egg b, #scr-challenge .chal-tube { font-size: 9px; } #scr-challenge .chal-tube img { height: 12px; }
  #scr-challenge .chal-egg.sh::after { font-size: 8px; right: -3px; top: -4px; }
  #scr-challenge .chal-pz-foot { margin-top: 2px; gap: 4px; font-size: 10px; } #scr-challenge .chal-pz-foot .chal-egg img { height: 14px; }
  #scr-challenge .chal-row.mine { box-shadow: inset 0 0 0 2px var(--gold); }
  #scr-challenge .chal-row .who a { border-bottom: 0; line-height: 16px; }
  #scr-challenge .chal-row .pos img, #scr-challenge .chal-row .pos svg { width: 12px; height: 12px; }
  #scr-challenge .chal-row .time canvas { height: 16px; width: auto; }
  #scr-challenge .chal-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; }
  #scr-challenge .chal-top h3 { grid-area: 1 / 1; } #scr-challenge .chal-me { grid-area: 1 / 2; margin: 0; text-align: right; } #scr-challenge .chal-list { grid-area: 2 / 1 / 3 / 3; }
  #scr-challenge .chal-row .who small { display: none; }
  #scr-challenge .chal-me { font-size: 11px; margin-top: 3px; }
  #scr-challenge .chal-champ { padding: 3px 8px; flex: none; }
  #scr-challenge .chal-champ-t { font-size: 10px; margin: 0; }
  #scr-challenge .chal-champ-b { gap: 6px; }
  #scr-challenge .chal-champ-b canvas { height: 22px; width: auto; }
  #scr-challenge .chal-champ-b > div { font-size: 12px; flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 6px; }
  #scr-challenge .chal-champ-b small.you { display: none; }
  #scr-challenge .chal-champ-b small { font-size: 10px; }
  #scr-challenge .chal-top { padding: 3px 8px 2px; }
  #scr-challenge .chal-top h3 { margin: 0 0 2px; }
  #scr-challenge .chal-side { gap: 4px; }
}

/* ---------- Mando (28-10-2026, js/core/gamepad.js) ---------- */
/* Anillo dorado en el elemento elegido con el mando. Sólo se ve si el último uso fue el mando (body.pad-on). */
body.pad-on .pad-focus {
  outline: 4px solid #ffd23f !important; outline-offset: 3px;
  filter: drop-shadow(0 0 7px rgba(255, 210, 63, .9));
  animation: padRing 1.1s ease-in-out infinite;
}
@keyframes padRing { 50% { outline-color: #fff3b0; filter: drop-shadow(0 0 12px rgba(255, 240, 160, 1)); } }
@media (prefers-reduced-motion: reduce) { body.pad-on .pad-focus { animation: none; } }
.pad-hint { display: none; }
body.pad-here .pad-hint { display: block; }
body.touch .pad-keys kbd { display: inline-block !important; }
.pad-keys { margin-top: 10px; }

/* ===== Recompensa diaria (29-10-2026) ===== */
.lr { position: fixed; inset: 0; z-index: 9050; display: flex; align-items: center; justify-content: center; background: rgba(5,10,25,.72); padding: 12px; }
.lr-box { position: relative; width: min(900px, 100%); max-height: 100%; overflow: auto; text-align: center; padding: 18px 16px 14px;
  background: linear-gradient(180deg, var(--box1), var(--box2)); border: 3px solid var(--edge); border-radius: 14px;
  box-shadow: 0 0 0 3px var(--edge-out), 0 8px 0 var(--edge-out), 0 0 40px rgba(0,0,0,.5); }
.lr-box h2 { margin: 0 0 2px; font-size: 26px; color: var(--gold); text-shadow: 2px 2px 0 var(--shadow); }
.lr-sub { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.lr-x { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; font: 700 22px/1 var(--font); color: #fff; background: transparent; border: 0; cursor: pointer; }
.lr-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 0; align-items: start; }
.lr-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 2px; min-width: 0; }
.lr-day::after { content: ''; position: absolute; z-index: 0; left: 50%; width: 100%; top: 34px; height: 6px; margin-top: -3px; background: #ff5f6d; box-shadow: 0 2px 0 #9a2330; }
.lr-day:last-child::after { display: none; }
.lr-day:nth-child(n) { --cs: 68px; }
.lr-c { position: relative; z-index: 1; width: var(--cs); height: var(--cs); border-radius: 50%; display: grid; place-items: center; margin-top: calc(34px - var(--cs) / 2 + 0px);
  background: radial-gradient(circle at 35% 30%, #4a74cf, #1c3a82); border: 3px solid var(--edge); box-shadow: 0 3px 0 var(--edge-out); }
.lr-c img { max-width: 70%; max-height: 70%; }
.lr-n { position: absolute; right: -6px; bottom: -4px; background: #0b1838; color: #fff; border: 2px solid var(--edge); border-radius: 9px; padding: 0 5px; font-size: 11px; line-height: 15px; }
.lr-tick { display: none; position: absolute; inset: 0; border-radius: 50%; background: rgba(8,16,40,.55); }
.lr-tick::after { content: ''; position: absolute; left: 50%; top: 46%; width: 18px; height: 32px; border: solid #5fe08a; border-width: 0 7px 7px 0; transform: translate(-50%, -55%) rotate(40deg) scale(.7); filter: drop-shadow(0 2px 0 #06210f); }
.lr-day.done .lr-c { filter: saturate(.5); border-color: #7a8db8; }
.lr-day.done .lr-tick { display: block; }
.lr-day.done .lr-dn, .lr-day.done .lr-tx { opacity: .55; }
.lr-day.today .lr-c { --cs: 84px; border-color: var(--gold); background: radial-gradient(circle at 35% 30%, #6a8fe6, #254aa0);
  box-shadow: 0 0 0 3px rgba(255,210,63,.5), 0 0 22px 6px rgba(255,210,63,.75); animation: lrGlow 1.3s ease-in-out infinite; }
.lr-day.next .lr-c { border-style: dashed; border-color: var(--gold); }
.lr-dn { font-weight: 700; font-size: 14px; margin-top: 6px; }
.lr-day.today .lr-dn { color: var(--gold); }
.lr-tx { font-size: 12px; line-height: 1.2; color: var(--muted); }
.lr-mn { color: var(--gold); font-size: 12px; }
.lr-go { margin-top: 4px; padding: 5px 8px; font-size: 13px; }
.lr-foot { margin: 12px 0 6px; min-height: 18px; color: var(--gold); font-weight: 700; }
.lr-close { margin-top: 2px; }
.lr-c.pop { animation: lrPop .6s ease-out; }
@keyframes lrGlow { 50% { box-shadow: 0 0 0 3px rgba(255,210,63,.5), 0 0 30px 12px rgba(255,210,63,.95); } }
@keyframes lrPop { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-6deg); filter: brightness(1.8); } 100% { transform: scale(1); } }
@media (max-width: 640px) {
  .lr-row { grid-template-columns: repeat(4, 1fr); row-gap: 14px; }
  .lr-day:nth-child(4)::after { display: none; }
}
@media (max-height: 520px) and (min-width: 641px) {
  .lr { padding: 6px; }
  .lr-box { padding: 10px 10px 8px; }
  .lr-box h2 { font-size: 20px; }
  .lr-sub { margin-bottom: 8px; font-size: 12px; }
  .lr-day:nth-child(n) { --cs: 50px; }
  .lr-day::after { top: 26px; height: 5px; }
  .lr-c { margin-top: calc(26px - var(--cs) / 2); }
  .lr-day.today .lr-c { --cs: 62px; margin-top: calc(26px - 31px); }
  .lr-dn { font-size: 12px; margin-top: 4px; }
  .lr-tx { font-size: 10px; }
  .lr-foot { margin: 6px 0 4px; }
  .lr-tick::after { width: 12px; height: 22px; border-width: 0 5px 5px 0; }
}
@media (max-height: 520px) and (max-width: 640px) { .lr-day::after { top: 26px; } .lr-day:nth-child(n) { --cs: 50px; } .lr-day.today .lr-c { --cs: 62px; } }

/* ===== Pokédex completa de una región (29-10-2026, systems/dex-reward.js · ui/dex-reward-ui.js) ===== */
/* Cartel: usa la caja de la recompensa diaria (.lr / .lr-box) con corona, rayos dorados y los dos premios. */
.dd .dd-box { width: min(560px, 100%); overflow: hidden; }
.dd-rays { position: absolute; left: 50%; top: 46px; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none; opacity: .22; z-index: 0;
  background: repeating-conic-gradient(var(--gold) 0 10deg, transparent 10deg 30deg); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 70%); mask: radial-gradient(circle, #000 0 30%, transparent 70%); animation: ddSpin 14s linear infinite; }
.dd-box > *:not(.dd-rays) { position: relative; z-index: 1; }
.dd-crown { margin: 2px 0 0; line-height: 0; animation: ddBob 1.6s ease-in-out infinite; }
.dd-crown img { filter: drop-shadow(0 0 10px rgba(255,210,63,.9)); }
.dd-mons { display: flex; justify-content: center; gap: 4px; margin: -4px 0 2px; }
.dd-mon { display: flex; flex-direction: column; align-items: center; }
.dd-mon canvas { width: 150px; height: 130px; image-rendering: pixelated; }
.dd-mon small { color: var(--gold); font-weight: 700; font-size: 12px; margin-top: -6px; }
.dd-prize { list-style: none; margin: 6px auto 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 470px; }
.dd-prize li { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
  padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.25); border: 2px solid rgba(255,210,63,.55); box-shadow: 0 3px 0 var(--edge-out); }
.dd-ic { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #6a8fe6, #254aa0); border: 2px solid var(--gold); }
.dd-prize b { font-size: 17px; color: var(--gold); text-shadow: 2px 2px 0 var(--shadow); line-height: 1.1; }
.dd-prize small { font-size: 12px; color: var(--muted); line-height: 1.2; }
.dd-ok { min-width: 160px; }
@keyframes ddSpin { to { transform: rotate(360deg); } }
@keyframes ddBob { 50% { transform: translateY(-4px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .dd-rays, .dd-crown { animation: none; } }
@media (max-width: 520px) { .dd-prize { grid-template-columns: 1fr; } }
@media (max-height: 520px) {
  .dd .dd-box { width: min(620px, 100%); padding: 8px 12px 8px; }
  .dd-box h2 { font-size: 20px; }
  .dd-crown img { width: 26px; height: 26px; }
  .dd .lr-sub { margin-bottom: 2px; font-size: 12px; }
  .dd-mon canvas { width: 92px; height: 80px; }
  .dd-prize { margin: 2px auto 8px; gap: 8px; }
  .dd-prize li { padding: 5px 8px; grid-template-columns: 38px 1fr; }
  .dd-ic { width: 38px; height: 38px; }
  .dd-ic img { max-width: 28px; max-height: 28px; }
  .dd-prize b { font-size: 15px; }
  .dd-ok { padding: 6px 12px; }
}
/* Pokédex: pestaña de la región completa (borde y número dorados, corona) y la línea del premio sobre los filtros. */
.gen-tab.dexok { border-color: rgba(255,210,63,.7); }
.gen-tab.dexok small { color: var(--gold); }
.gen-tab .gt-crown { vertical-align: -2px; }
.dex-bonus { margin: 0 0 8px; padding: 5px 10px; border-radius: 9px; font-size: 13px; line-height: 1.3; color: var(--muted);
  background: rgba(0,0,0,.22); border: 2px dashed rgba(255,210,63,.35); }
.dex-bonus img { vertical-align: -2px; }
.dex-bonus.ok { color: #fff; border: 2px solid var(--gold); background: linear-gradient(90deg, rgba(255,210,63,.28), rgba(255,210,63,.08)); }
.dex-bonus.ok b { color: var(--gold); text-shadow: 2px 2px 0 var(--shadow); margin-right: 6px; }
@media (max-height: 520px) { .dex-bonus { margin-bottom: 4px; padding: 2px 8px; font-size: 11px; flex: 0 0 auto; } }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-dex .gen-tab.dexok { border-color: rgba(255,210,63,.6); }
  #scr-dex .gen-tab.dexok.on { border-color: var(--gold); background: rgba(255,210,63,.16); }
  #scr-dex .dex-bonus { margin-bottom: 6px; font-size: 12px; }
}
/* Ruleta: «Pokédex completa · Shiny ×3» y el shiny de las probabilidades en dorado. */
#scr-gacha .gx-dexok { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 8px; font-weight: 700; color: #1a1200; text-shadow: none;
  background: linear-gradient(180deg, #ffe27a, #ffbf1f); border: 2px solid #8a5a00; }
#scr-gacha .gx-dexok img { vertical-align: -2px; }
#scr-gacha .gx-shup, #gacha-rates .gx-shup span { color: var(--gold); font-weight: 700; }
/* ---------- «PokéHorde está abierto en otra pestaña» (29-10-2026, core/onetab.js) ----------
   Por encima de todo (también de la recompensa diaria, 9050, y las novedades, 9100): la pestaña inactiva no se puede tocar. */
#onetab { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 16px max(16px, var(--sa-r, 0px)) 16px max(16px, var(--sa-l, 0px));
  background: radial-gradient(circle at 50% 40%, rgba(10,20,50,.82), rgba(3,6,16,.96)); animation: fade .25s ease-out; }
#onetab.hidden { display: none; }
#onetab .ot-box { width: min(460px, 100%); text-align: center; padding: 18px 22px 22px; }
#onetab .ot-mon { position: relative; height: 96px; display: flex; justify-content: center; align-items: flex-end; margin-bottom: 6px; }
#onetab .ot-mon canvas { image-rendering: pixelated; display: block; filter: saturate(.9); }
#onetab .ot-zz { position: absolute; left: calc(50% + 26px); top: 0; font-weight: 700; color: var(--muted); text-shadow: 2px 2px 0 var(--shadow); }
#onetab .ot-zz i { display: inline-block; font-style: normal; opacity: 0; animation: otZ 2.4s ease-in-out infinite; }
#onetab .ot-zz i:nth-child(1) { font-size: 13px; } #onetab .ot-zz i:nth-child(2) { font-size: 16px; animation-delay: .4s; } #onetab .ot-zz i:nth-child(3) { font-size: 20px; animation-delay: .8s; }
@keyframes otZ { 0% { opacity: 0; transform: translate(0, 6px); } 30%, 60% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -10px); } }
#onetab h2 { font-size: 23px; line-height: 1.2; margin-bottom: 8px; }
#onetab .ot-text { margin: 0 0 14px; }
#onetab .ot-warn { margin: -4px 0 14px; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: #ffe29a; background: rgba(0,0,0,.25); border: 2px solid rgba(255,210,63,.35); }
#onetab .ot-warn.hidden { display: none; }
#onetab .ot-play { min-width: 180px; font-size: 19px; }
@media (max-height: 420px) {
  #onetab .ot-box { padding: 12px 18px 14px; }
  #onetab .ot-mon { height: 64px; margin-bottom: 2px; }
  #onetab .ot-mon canvas { width: 64px; height: 64px; }
  #onetab h2 { font-size: 19px; margin-bottom: 4px; }
  #onetab .ot-text { margin-bottom: 10px; font-size: 14px; }
  #onetab .ot-warn { margin: -2px 0 10px; padding: 6px 8px; font-size: 13px; }
}

/* =====================================================================
 * (30-10-2026, lo pidió el dueño con una captura: «no se ve bien desde celular») PC en celular horizontal.
 * - Filtros: antes .chips tenía flex: none y no se encogía, así que «Todos los tipos», la región y el orden quedaban fuera
 *   de la caja y no se podían tocar. Ahora las rarezas se desplazan solas en su tira (con un degradado a la derecha que
 *   avisa que hay más) y los 3 desplegables quedan siempre a la vista a la derecha.
 * - Ficha: antes salía todo seguido (Info, Estrellas, EVs e IVs) en 230 px y había que bajar ~1000 px. Ahora usa las
 *   pestañas Info · Estrellas · EVs de la versión de PC, con el Pokémon a la izquierda y su nombre al lado.
 * También en los celulares grandes / plegables apaisados de hasta 999 px de ancho (en 900 × 560 la caja quedaba aplastada).
 * En PC (pantalla grande) nada de esto cambia: .pc-chiprow y .pc-selects son display: contents.
 * ===================================================================== */
.pc-chiprow, .pc-selects { display: contents; }
@media (max-height: 520px) and (min-width: 560px), (orientation: landscape) and (min-width: 560px) and (max-width: 999px) {
  #scr-pc .pc-tools { flex-direction: row; align-items: center; gap: 6px; margin: 0 0 6px; }
  #scr-pc .pc-tools .dex-search { flex: 0 1 132px; min-width: 96px; margin: 0; }
  #scr-pc .pc-tools .dex-search .field { padding: 4px 8px; font-size: 12px; }
  #scr-pc .pc-tools .chips { flex: 1 1 0; min-width: 0; overflow: visible; flex-wrap: nowrap; gap: 6px; align-items: center; }
  #scr-pc .pc-chiprow { --fl: 0px; --fr: 28px; display: flex; flex: 1 1 0; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
  #scr-pc .pc-chiprow.moved { --fl: 22px; }
  #scr-pc .pc-chiprow.end { --fr: 0px; }
  #scr-pc .pc-chiprow::-webkit-scrollbar { display: none; }
  #scr-pc .pc-chiprow .chip { flex: 0 0 auto; padding: 3px 8px; font-size: 11px; }
  #scr-pc .pc-selects { display: flex; flex: none; gap: 4px; }
  #scr-pc .pc-selects .pc-sort { margin: 0; width: auto; max-width: 112px; padding: 4px 4px 4px 6px; font-size: 11px; }

  /* «Caja 1 de 4» en una línea (antes, en 740 px, se partía en dos al lado de «Seleccionar varios» y «Reciclar repetidos»). */
  #scr-pc .pc-boxbar { gap: 6px; }
  #scr-pc .pc-boxbar b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #scr-pc .pc-boxbar .btn { white-space: nowrap; font-size: 12px; }
  @media (max-width: 800px) { #scr-pc .pc-boxbar .btn { font-size: 11px; padding: 2px 6px; } }

  /* Ficha con pestañas. */
  #scr-pc .pc-split { grid-template-columns: minmax(0, 1fr) clamp(230px, 31vw, 270px); }
  #scr-pc .pc-detail { padding: 0; gap: 0; overflow: hidden auto; display: flex; flex-direction: column; --tbc: #e86a5a; }
  #scr-pc .pc-detail[data-pg="star"] { --tbc: #3aa868; }
  #scr-pc .pc-detail[data-pg="ev"] { --tbc: #4a7ae0; }
  #scr-pc .pc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); flex: none; position: sticky; top: 0; z-index: 2;
    background: #2c3a78; border-bottom: 3px solid var(--tbc); }
  #scr-pc .pc-tabs button { appearance: none; border: 0; background: transparent; height: 28px; padding: 0; font: inherit; font-size: 11px;
    color: #c8d4ff; cursor: pointer; text-shadow: 1px 1px 0 #1a2040; }
  #scr-pc .pc-tabs button.on { background: var(--tbc); color: #fff; }
  #scr-pc .pc-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  /* El Pokémon a la izquierda; Nº, nombre y estrellas a su lado; rareza, tipos y «Conseguido…» debajo, a lo ancho. */
  #scr-pc .pc-hero { display: grid; grid-template-columns: 70px minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: center; padding: 6px 8px 2px; flex: none; }
  #scr-pc .pc-hero > canvas.stage { grid-row: 1 / span 3; width: 70px; height: 60px; align-self: center; }
  #scr-pc .pc-hero > .center { display: contents; text-align: left; }
  #scr-pc .pc-hero > .center > * { grid-column: 2; min-width: 0; text-align: left; }
  #scr-pc .pc-hero .pc-name .btn { padding: 2px 6px; font-size: 11px; }
  #scr-pc .pc-hero .pc-name { justify-content: flex-start; gap: 4px; margin: 0; }
  #scr-pc .pc-hero .pc-name h3 { font-size: 14px; overflow-wrap: anywhere; }
  #scr-pc .pc-hero .pc-starline { margin: 0; }
  #scr-pc .pc-hero .pc-starline .pc-stars i { font-size: 14px; }
  #scr-pc .pc-hero .pc-pinfo { grid-column: 1 / -1; margin-top: 4px; padding-top: 4px; border-top: 1px dashed rgba(244,248,255,.18); }
  #scr-pc .pc-hero .pc-pinfo > div:first-child { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
  #scr-pc .pc-hero .pc-pinfo > div:nth-child(2) { display: inline-flex; margin: 2px 0 !important; vertical-align: middle; }
  #scr-pc .pc-hero .pc-pinfo p.sub { font-size: 11px; line-height: 1.35; }
  #scr-pc .pc-detail > :is(.pc-starbox, .pc-evs, .pc-ivs) { margin: 6px 8px 0; }
  #scr-pc .pc-detail > :last-child { margin-bottom: 8px; }
  /* Qué sale en cada pestaña: Info = la ficha; Estrellas = las estrellas; EVs = EVs e IVs. */
  #scr-pc .pc-detail[data-pg="info"] > :is(.pc-starbox, .pc-evs, .pc-ivs) { display: none; }
  #scr-pc .pc-detail[data-pg="star"] > :is(.pc-evs, .pc-ivs), #scr-pc .pc-detail[data-pg="star"] .pc-pinfo { display: none; }
  #scr-pc .pc-detail[data-pg="ev"] > .pc-starbox, #scr-pc .pc-detail[data-pg="ev"] .pc-pinfo { display: none; }
}

/* (30-10-2026, lo pidió el dueño: que en el celular se vea bien) Barra del gimnasio en celular horizontal. Antes las flechas
 * iban a lo ancho una arriba y otra abajo, el retrato del líder no se veía y «Con amigos» quedaba debajo del borde (había
 * que desplazar la caja). Ahora: ◀ retrato ▶ arriba, el líder y su equipo en el medio, y el precio con los dos botones abajo. */
@media (max-height: 520px), (orientation: landscape) and (hover: none) and (max-height: 700px) {   /* (31-10-2026: + celulares apaisados más altos; antes sólo max-height: 520px) */
  .gym-bar { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; grid-template-areas: "prev leader next" "info info info" "act act act";
    align-items: center; align-content: space-between; gap: 4px 6px; padding: 6px 8px; min-width: 0; }
  .gym-bar .gm-arrow { width: 34px; height: 34px; }
  .gym-bar .gm-arrow.prev { grid-area: prev; } .gym-bar .gm-arrow.next { grid-area: next; }
  .gym-bar .gm-leader { grid-area: leader; justify-self: center; }
  .gym-bar .gm-leader.pic { display: block; width: 52px; height: 52px; border-width: 2px; }
  .gym-bar .gym-info { grid-area: info; min-width: 0; text-align: center; justify-items: center; }
  .gym-bar .gym-k { font-size: 10px; line-height: 1.2; }
  .gym-bar .gym-n { font-size: 16px; }
  .gym-bar .gym-team { justify-content: center; }
  .gym-bar .gym-act { grid-area: act; justify-items: stretch; margin: 0; gap: 4px; }
  .gym-bar .gym-s { font-size: 11px; text-align: center; line-height: 1.25; }
  .gym-bar .gym-act .row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px !important; }
  .gym-bar .gym-act .btn { min-height: 0; padding: 7px 4px; font-size: 12px; white-space: nowrap; }
  .gym-bar .gm-mon canvas { width: 36px; height: 36px; }
  .gym-bar .gm-mon:last-child canvas { width: 46px; height: 46px; }
  /* Toda la ventana (la barra de arriba ya no se ve aquí): antes la caja dejaba 44 px arriba y se desplazaba. La columna
   * de regiones se desplaza sola si no entra; el mapa ocupa todo el alto que queda. */
  #scr-gyms.scr { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important; }
  #scr-gyms > .box { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; display: flex; flex-direction: column; overflow: hidden; padding: 8px 10px; }
  #scr-gyms > .box > .row.between:first-child { flex: none; margin: 0; }
  #scr-gyms .gym-grid { flex: 1; min-height: 0; margin-top: 6px; grid-template-rows: minmax(0, 1fr); }
  #scr-gyms .gym-regions { min-height: 0; overflow-y: auto; scrollbar-width: none; }
  #scr-gyms .gym-right { min-height: 0; }
  /* Alto: todo lo que queda. Pero el mapa no pasa del ancho que deja 200 px a la ficha del líder (el de Johto es más ancho:
   * en 740 px la ficha quedaba en 138 px y «Con amigos» se salía). 100vw − 12 (márgenes) − 20 (caja) − 170 (regiones) − 8 − 200. */
  #scr-gyms .gym-maphold { height: min(calc(100dvh - 76px), calc((100vw - 410px) / var(--map-k, 1.16))); max-width: none; align-self: center; }
  #scr-gyms .gym-mapbox { align-items: center; }
}
/* (30-10-2026) Al reciclar uno con IVs: el aviso de que se pierden, en rojo suave. */
.pc-recask .pc-ivlose { color: #ff8a95; font-weight: 700; }
/* (30-10-2026) Panel de moderación → Apoyos: donaciones de Ko-fi sin apodo. */
.kf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px 10px; margin: 6px 0;
  border-radius: 8px; background: rgba(0,0,0,.22); border: 2px solid rgba(255,210,63,.35); }
.kf-info { min-width: 0; font-size: 13px; }
.kf-msg { margin-top: 3px; font-size: 13px; overflow-wrap: anywhere; color: #f3f0ff; }
.kf-form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kf-form input { width: 160px; } .kf-form select { width: auto; }
.kf-row > .btn { grid-column: 2; grid-row: 1; align-self: start; }

/* =====================================================================================================================
 * (30-10-2026) Identidad «Licencia de entrenador», la que eligió el dueño (revisada pantalla por pantalla).
 * Todo es papel sobre la mesa: hojas crema con doble filete de tinta azul, la banda azul de la licencia arriba de cada
 * pantalla, sellos de goma rojos y lámina dorada; los textos chicos con letra de máquina de escribir (Courier Prime, OFL,
 * assets/fonts). Va encima de todo lo anterior (antes: cajas azules con borde blanco, estilo Mundo Misterioso).
 * La partida (HUD) no cambia a propósito: tiene que leerse con la pantalla llena de enemigos.
 * ===================================================================================================================== */
@font-face { font-family: 'Courier Prime'; src: url('../assets/fonts/CourierPrime-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('../assets/fonts/CourierPrime-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --lic-pap: #f4e7c9; --lic-pap2: #e8d7ad; --lic-pap3: #dcc79a; --lic-field: #fbf3df; --lic-ink: #1a3170; --lic-ink2: #2c519f; --lic-red: #d8402f; --lic-gold: #e2b13a; --lic-goldd: #8a6200;
  --lic-band: #1a3170; --lic-ink-rgb: 26 49 112; --lic-wash: 255 255 255; --lic-pap-rgb: 244 231 201;   /* (30-10-2026) para el modo oscuro */
  --lic-type: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --lic-paper: radial-gradient(circle at 18% 12%, rgb(var(--lic-wash) / .5), transparent 40%), radial-gradient(circle at 88% 92%, rgba(160,120,60,.12), transparent 42%),
    repeating-linear-gradient(0deg, rgba(120,90,40,.035) 0 2px, transparent 2px 4px), var(--lic-pap);
}
.scr.dim { background: radial-gradient(ellipse at 50% 42%, rgba(16,32,79,.55), rgba(6,10,28,.92)); }

/* ---- la caja: una hoja de papel con doble filete de tinta ---- */
.box {
  --ink: var(--lic-ink); --muted: rgb(var(--lic-ink-rgb) / .72); --shadow: transparent; --edge: var(--lic-ink); --edge-in: var(--lic-pap3); --edge-out: rgba(0,0,0,.25);
  --box1: var(--lic-pap); --box2: var(--lic-pap); --gold: var(--lic-goldd); --gold2: var(--lic-goldd);
  color: var(--lic-ink); background: var(--lic-paper); border: 0; border-radius: 16px; text-shadow: none;
  box-shadow: inset 0 0 0 7px var(--lic-pap), inset 0 0 0 9px var(--lic-ink), inset 0 0 0 12px var(--lic-pap), inset 0 0 0 13px rgb(var(--lic-ink-rgb) / .4), 0 26px 60px rgba(0,0,0,.55);
  padding: 26px 28px;
}
.box h1, .box h2, .box h3 { color: var(--lic-ink); text-shadow: none; }
.box h2 { display: inline-block; border-bottom: 3px solid var(--lic-red); padding-bottom: 2px; }
.box .sub, .box .note, .box small, .box label { font-family: var(--lic-type); color: rgb(var(--lic-ink-rgb) / .75); text-shadow: none; }
.box p { text-shadow: none; }
/* encabezado de cada pantalla (título + Volver): la franja azul del carné */
.box > .row.between:first-child { margin: -8px -10px 14px; padding: 10px 16px; border-radius: 8px 8px 3px 3px; background: repeating-radial-gradient(circle at 94% 50%, rgba(255,210,63,.16) 0 1px, transparent 1px 7px), var(--lic-band); }
.box > .row.between:first-child h2 { color: #ffd23f; border: 0; padding: 0; margin: 0; }
.box > .row.between:first-child h2 .sub, .box > .row.between:first-child .sub, .box > .row.between:first-child small { color: #f4e7c9; }
.box > .row.between:first-child .btn.ghost, .box > .row.between:first-child .btn { background: transparent; color: #f4e7c9; border: 2px solid #f4e7c9; box-shadow: none; }

/* ---- botones: tinta, sello y lámina ---- */
.box .btn { background: var(--lic-pap); color: var(--lic-ink); border: 3px solid var(--lic-ink); box-shadow: 0 3px 0 rgb(var(--lic-ink-rgb) / .35); text-shadow: none; border-radius: 10px; }
.box .btn.gold, .btn.gold { background: var(--lic-band); color: #ffd23f; border: 0; text-shadow: none; box-shadow: inset 0 0 0 3px #ffd23f, inset 0 0 0 5px var(--lic-ink), 0 4px 0 #0b1638; }
.box .btn.ghost { background: transparent; box-shadow: none; border: 2px solid rgb(var(--lic-ink-rgb) / .55); }
.box .btn.danger { background: var(--lic-pap); color: var(--lic-red); border-color: var(--lic-red); }
.box .btn:disabled { filter: grayscale(.6) opacity(.6); }

/* ---- pestañas de fichero y campos subrayados ---- */
.box .tab, .box .gen-tab { background: var(--lic-pap2); color: var(--lic-ink); border: 2px solid rgb(var(--lic-ink-rgb) / .35); border-bottom-width: 4px; border-radius: 10px 10px 4px 4px; text-shadow: none; }
.box .tab.on, .box .gen-tab.on { background: var(--lic-band); color: #ffd23f; border-color: var(--lic-ink); }
.box .gen-tab.on b, .box .gen-tab.on small { color: #ffd23f; }
.box .field, .box input[type=text], .box input:not([type]), .box input[type=search], .box select {
  background: rgb(var(--lic-wash) / .35); color: var(--lic-ink); border: 0; border-bottom: 3px solid var(--lic-ink); border-radius: 4px 4px 0 0; text-shadow: none; }
.box .field:focus, .box input:focus { border-bottom-color: var(--lic-red); background: rgb(var(--lic-wash) / .6); }
.box .chip { background: var(--lic-pap); color: var(--lic-ink); border-color: rgb(var(--lic-ink-rgb) / .4); text-shadow: none; }
.box .chip.on { color: var(--lic-red); border-color: var(--lic-red); box-shadow: inset 0 0 0 2px var(--lic-pap), inset 0 0 0 3px var(--lic-red); }

/* ---- barra de arriba: etiquetas de papel ---- */
.topbar .pill, .menu-coins > * { background: var(--lic-paper); color: var(--lic-ink); border: 2px solid var(--lic-ink); box-shadow: 0 3px 0 rgba(0,0,0,.35); text-shadow: none; }
.topbar .pill small, .menu-coins small { color: rgb(var(--lic-ink-rgb) / .7); }

/* ---- menú principal: carpeta con pestañas de índice ---- */
#scr-menu .menu-sect .box { padding: 16px 18px; }
#scr-menu .ms-lab { background: var(--lic-band); color: #ffd23f; text-shadow: none; border-radius: 8px 8px 0 0; padding: 4px 14px; box-shadow: none; }
#scr-menu .ms-play .ms-lab { background: var(--lic-red); color: #fff3d0; }
#scr-menu .menu-sect:last-child .ms-lab { background: var(--lic-goldd); color: #fff3d0; }
#scr-menu .menu-item { color: var(--lic-ink); text-shadow: none; }
#scr-menu .menu-item small { font-family: var(--lic-type); color: rgb(var(--lic-ink-rgb) / .72); }
#scr-menu .menu-item:hover { background: rgb(var(--lic-ink-rgb) / .07); }
#scr-menu .menu-item.play { color: var(--lic-red); border: 4px solid var(--lic-red); border-radius: 8px; box-shadow: inset 0 0 0 3px var(--lic-pap), inset 0 0 0 6px var(--lic-red); padding: 8px 14px; margin: 2px 4px 6px; transform: rotate(-1.5deg); }
#scr-menu .menu-item.play small { color: var(--lic-red); }
#scr-menu .menu-item.off { opacity: .45; }
.menu-left .logo .t1 { color: #ffd23f; text-shadow: 0 5px 0 var(--lic-ink), 0 9px 0 rgba(0,0,0,.35); }
.partner-card { background: var(--lic-paper); color: var(--lic-ink); border-radius: 14px; padding: 12px 14px 14px; box-shadow: inset 0 0 0 6px var(--lic-pap), inset 0 0 0 8px var(--lic-ink), 0 22px 44px rgba(0,0,0,.5); }
.partner-card .stage, .partner-card canvas { border-radius: 6px; box-shadow: 0 0 0 3px var(--lic-ink); background: #dfe6f6; }
.partner-card .nm, .partner-card .lv { color: var(--lic-ink); text-shadow: none; }
.partner-card .lv { font-family: var(--lic-type); }
.partner-card .mp-stats { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--lic-ink); text-shadow: none; }

/* ---- cartas de nivel, resumen, pausa: hojas ---- */
.box .card { background: rgb(var(--lic-wash) / .4); border: 2px solid rgb(var(--lic-ink-rgb) / .35); color: var(--lic-ink); text-shadow: none; }
.box .card:hover { background: rgb(var(--lic-wash) / .7); border-color: var(--lic-ink); }

/* ---- sello que se reutiliza (logros, aprobado) ---- */
.lic-stamp { position: absolute; display: grid; place-items: center; text-align: center; border-radius: 50%; border: 5px solid var(--lic-red); color: var(--lic-red);
  font: 700 16px/1.15 var(--font); box-shadow: inset 0 0 0 4px var(--lic-pap), inset 0 0 0 7px var(--lic-red); opacity: .85; mix-blend-mode: multiply; pointer-events: none; }
.lic-seal { position: absolute; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font: 700 32px var(--font); color: #7a5600;
  background: conic-gradient(from 20deg, #fff1a8, #e2b13a, #fff6c8, #c9932a, #ffe37a, #e2b13a, #fff1a8); box-shadow: 0 0 0 4px #c9932a, 0 4px 0 rgba(0,0,0,.25); pointer-events: none; }

/* ---- registro: el carné ---- */
#scr-login { background: radial-gradient(ellipse at 50% 45%, rgba(16,32,79,.45), rgba(8,14,36,.9)); }
#scr-login .lic-wrap { width: min(800px, 100%); display: grid; max-height: 100%; }
#scr-login .lic-tabs .tabs { display: flex; gap: 6px; margin: 0 0 0 42px; }
#scr-login .lic-tabs .tab { flex: none; font: 700 16px var(--lic-type); padding: 9px 18px 12px; border-radius: 12px 12px 0 0; background: #2c519f; color: #dfe6ff; border: 0; text-shadow: none; }
#scr-login .lic-tabs .tab.on { background: var(--lic-pap); color: var(--lic-ink); }
#scr-login .lic-card { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 30px; padding: 22px 28px 26px;
  background: var(--lic-paper); border-radius: 18px; color: var(--lic-ink); overflow: auto;
  box-shadow: inset 0 0 0 10px var(--lic-pap), inset 0 0 0 12px var(--lic-ink), inset 0 0 0 16px var(--lic-pap), inset 0 0 0 17px rgb(var(--lic-ink-rgb) / .45), 0 34px 60px rgba(0,0,0,.55); }
#scr-login .lic-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin: 0 0 20px; padding: 0 20px; height: 64px; border-radius: 8px 8px 2px 2px;
  background: repeating-radial-gradient(circle at 93% 50%, rgba(255,210,63,.18) 0 1px, transparent 1px 7px), var(--lic-band); }
#scr-login .lic-h b { font: 700 32px var(--font); color: #ffd23f; text-shadow: 0 3px 0 #0b1638; }
#scr-login .lic-h span { font: 16px var(--lic-type); color: #f4e7c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#scr-login .lic-photo { grid-row: 2; position: relative; height: 236px; border: 3px dashed var(--lic-ink); border-radius: 6px; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, rgb(var(--lic-ink-rgb) / .07) 0 6px, transparent 6px 12px); }
#scr-login .lic-photo canvas { width: 140px; height: 140px; image-rendering: pixelated; filter: brightness(0) opacity(.28); }
#scr-login .lic-photo small { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 14px var(--lic-type); color: var(--lic-ink); }
#scr-login .lic-st { width: 116px; height: 116px; right: -52px; bottom: -62px; transform: rotate(-14deg); font-size: 15px; }
#scr-login .lic-serial { grid-row: 3; margin-top: 12px; font: 15px var(--lic-type); letter-spacing: 1px; }
#scr-login .lic-body { grid-column: 2; grid-row: 2 / span 2; min-width: 0; }
#scr-login .lic-body label { font: 15px var(--lic-type); color: rgb(var(--lic-ink-rgb) / .75); margin: 6px 0 2px; }
#scr-login .lic-body .field { background: transparent; border: 0; border-bottom: 3px solid var(--lic-ink); border-radius: 0; font: 500 22px var(--font); color: var(--lic-ink); padding: 6px 2px; }
#scr-login .lic-body .field:focus { border-bottom-color: var(--lic-red); background: rgb(var(--lic-ink-rgb) / .05); }
#scr-login .err { color: var(--lic-red); font-family: var(--lic-type); }
#scr-login .note, #scr-login #forgot-note { font: 13px var(--lic-type); color: rgb(var(--lic-ink-rgb) / .75); margin-top: 6px; }
#scr-login .note a, #scr-login .lic-links a { color: var(--lic-red); text-decoration-thickness: 2px; }
#scr-login .lic-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
#scr-login #btn-auth { flex: none; font: 700 20px var(--font); padding: 11px 20px; background: var(--lic-band); color: #ffd23f; border: 0; border-radius: 10px; text-shadow: none;
  box-shadow: inset 0 0 0 3px #ffd23f, inset 0 0 0 5px var(--lic-ink), 0 4px 0 #0b1638; }
#scr-login #btn-google { flex: none; font: 700 17px var(--font); padding: 10px 16px; background: transparent; color: var(--lic-ink); border: 3px solid var(--lic-ink); border-radius: 10px; text-shadow: none; box-shadow: none; }
#scr-login .lic-links { display: grid; gap: 4px; margin-top: 12px; font: 15px var(--lic-type); }
#scr-login .lic-guest { appearance: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: 15px var(--lic-type); color: var(--lic-red); text-decoration: underline; text-decoration-thickness: 2px; }
#scr-login .lic-seal { right: 30px; bottom: 26px; }
#scr-login .lic-legal { margin-top: 10px; }
#scr-login .lic-tag { margin: 12px 0 0; text-align: center; font: 15px var(--lic-type); color: #f4e7c9; text-shadow: 0 2px 0 #000; }
@media (orientation: landscape) and (max-height: 500px) {
  #scr-login { padding: 6px 10px; }
  #scr-login .lic-tabs .tab { padding: 5px 14px 8px; font-size: 14px; }
  #scr-login .lic-card { grid-template-columns: 150px minmax(0, 1fr); column-gap: 22px; padding: 16px 20px 16px; max-height: calc(100dvh - 48px); }
  #scr-login .lic-h { height: 46px; margin-bottom: 10px; } #scr-login .lic-h b { font-size: 24px; } #scr-login .lic-h span { font-size: 14px; }
  #scr-login .lic-photo { height: 170px; } #scr-login .lic-photo canvas { width: 100px; height: 100px; }
  #scr-login .lic-st { width: 78px; height: 78px; font-size: 11px; border-width: 4px; right: -40px; bottom: -44px; }
  #scr-login .lic-photo small { padding-right: 18px; }
  #scr-login .lic-body label { margin: 2px 0 0; font-size: 13px; } #scr-login .lic-body .field { font-size: 18px; padding: 3px 2px; }
  #scr-login .lic-btns { margin-top: 6px; } #scr-login #btn-auth { font-size: 17px; padding: 8px 14px; } #scr-login #btn-google { font-size: 15px; padding: 7px 12px; }
  #scr-login .lic-links { margin-top: 6px; font-size: 13px; } #scr-login .lic-guest { font-size: 13px; }
  #scr-login .lic-seal { width: 50px; height: 50px; font-size: 22px; right: 18px; bottom: 14px; }
  #scr-login .lic-tag, #scr-login .lic-legal, #scr-login #login-mode, #scr-login .lic-serial { display: none; }
}

/* ---- las pantallas con diseño propio también son hojas ---- */
.scr .box, #scr-dex > .box, .mart, #scr-gacha .box, #scr-mega .box, #scr-ivs .box, #scr-challenge .box, #scr-items .box, #scr-pc .box, #scr-stages .box, #scr-mode .box, #scr-gyms .box, #scr-mvpick .box {
  background: var(--lic-paper) !important; color: var(--lic-ink) !important; border: 0 !important; border-radius: 16px !important; text-shadow: none !important;
  box-shadow: inset 0 0 0 7px var(--lic-pap), inset 0 0 0 9px var(--lic-ink), inset 0 0 0 12px var(--lic-pap), inset 0 0 0 13px rgb(var(--lic-ink-rgb) / .4), 0 26px 60px rgba(0,0,0,.55) !important; }
.mart { padding: 18px 20px; --m-red: var(--lic-red); --m-shade: rgb(var(--lic-ink-rgb) / .08); }
.mart-top { background: var(--lic-band) !important; border-radius: 8px !important; }
.mart-sign { color: #ffd23f !important; text-shadow: none !important; }
.mart-list, .mart-side, .mart-detail, .mart-tabs, .mart-body > * { background: rgb(var(--lic-wash) / .35) !important; color: var(--lic-ink) !important; border-color: rgb(var(--lic-ink-rgb) / .35) !important; box-shadow: none !important; text-shadow: none !important; }
.mart-row { color: var(--lic-ink) !important; }
.rotom-face { display: none !important; }
#scr-dex > .box > .row.between:first-child h2 { color: #ffd23f !important; }
.box * { text-shadow: none !important; }
.box .sub, .box .muted { color: rgb(var(--lic-ink-rgb) / .72) !important; }
/* paneles oscuros de adentro → papel un tono más oscuro */
.box .pc-evs, .box .pc-ivs, .box .pc-boxbar b, .box .chal-row, .box .rk-tier, .box .mission, .box .ach, .box .gf-item, .box .stat, .box .stats > *, .box .upg-item,
#scr-dex .dex-side, #scr-dex .dex-list, #scr-dex .dex-detail, #scr-dex .dex-grid, #scr-dex .pk-detail, #scr-pc .pc-grid, #scr-pc #pc-detail, #scr-mega .mg-row, #scr-mega .mg-list, #scr-mega .mg-detail,
#scr-ivs .ivs-panel, #scr-ivs .ivs-list, #scr-ivs .ivs-mid, #scr-ivs .ivs-right, #scr-items .it-list, #scr-items .it-side, #scr-items .it-grid, #scr-items .it-detail, #scr-gyms .gm-list, #scr-gyms .gm-card, #scr-gyms .gm-foot {
  background: rgb(var(--lic-wash) / .4) !important; color: var(--lic-ink) !important; border-color: rgb(var(--lic-ink-rgb) / .3) !important; }
/* «Elige tus ataques» */
#scr-mvpick .mvp-mv { background: rgb(var(--lic-wash) / .5) !important; border-color: rgb(var(--lic-ink-rgb) / .3) !important; color: var(--lic-ink) !important; }
#scr-mvpick .mvp-mv.on { background: var(--lic-pap) !important; border-color: var(--lic-goldd) !important; }
#scr-mvpick .mvp-lbl { color: var(--lic-ink) !important; }
#scr-mvpick .mvp-ring { border-color: rgba(216,64,47,.45) !important; }
#scr-mvpick .mvp-orb:not(.full) { background: rgb(var(--lic-wash) / .4) !important; border-color: rgb(var(--lic-ink-rgb) / .4) !important; color: var(--lic-ink) !important; }
#scr-mvpick .mvp-orb.full { background: var(--lic-band) !important; border-color: var(--lic-goldd) !important; }
#scr-mvpick .mvp-hub { background: radial-gradient(circle, var(--lic-pap), var(--lic-pap2)) !important; border-color: var(--lic-ink) !important; box-shadow: 0 0 0 3px var(--lic-pap), 0 0 0 5px var(--lic-ink) !important; }
/* (las cartas de subir de nivel tienen su propio estilo de carta coleccionable, más abajo) */
/* el compañero del menú */
.partner-card * { text-shadow: none !important; }
.partner-card .nm { color: var(--lic-ink) !important; }
.partner-card .mp-stats, .partner-card .mp-stats * { color: var(--lic-ink) !important; }
/* mapas y modos: las fotos con marco de tinta */
#scr-stages .stg, #scr-stages [class*="stg-card"] { box-shadow: 0 0 0 3px var(--lic-ink), 0 4px 0 rgb(var(--lic-ink-rgb) / .3) !important; }
#scr-evsiv .mode-card, #scr-mode .mode-card { background: rgb(var(--lic-wash) / .45) !important; color: var(--lic-ink) !important; border: 3px solid var(--lic-ink) !important; box-shadow: 0 4px 0 rgb(var(--lic-ink-rgb) / .3) !important; }
#scr-evsiv .mode-card.gym, #scr-mode .mode-card.gym { border-color: var(--lic-goldd) !important; }
#scr-evsiv .mode-go, #scr-mode .mode-go { background: transparent !important; color: var(--lic-red) !important; border: 3px solid var(--lic-red) !important; box-shadow: inset 0 0 0 2px var(--lic-pap), inset 0 0 0 4px var(--lic-red) !important; transform: rotate(-4deg); }
#scr-evsiv .mode-t, #scr-mode .mode-t { color: var(--lic-ink) !important; }
/* gacha: el escenario se queda, la caja es de papel */
#scr-gacha .gx-stage, #scr-gacha [class*="stage"] { border-radius: 10px; box-shadow: 0 0 0 3px var(--lic-ink) !important; }
/* resumen: las cifras en recuadros de papel */
#scr-over .stats > * { background: rgb(var(--lic-wash) / .45) !important; border: 2px solid rgb(var(--lic-ink-rgb) / .3) !important; color: var(--lic-ink) !important; }
/* ---- paneles sueltos en papel; la «foto» del entrenamiento de IVs, en papel de foto ---- */
.scr .panel { background: rgb(var(--lic-wash) / .42) !important; border: 2px solid rgb(var(--lic-ink-rgb) / .3) !important; color: var(--lic-ink); }
#scr-ivs .ivs-top { background: rgb(var(--lic-wash) / .42) !important; border-color: rgb(var(--lic-ink-rgb) / .3) !important; }
.ivs-stage { background: radial-gradient(ellipse 60% 18% at 50% 82%, rgb(var(--lic-ink-rgb) / .18), transparent 70%), radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c, #4fd07a) 28%, var(--lic-pap)), var(--lic-pap2) 78%) !important; border: 2px dashed rgb(var(--lic-ink-rgb) / .4); }
.ivs-tgt { color: var(--lic-ink) !important; text-shadow: none !important; }
.ivs-sname { color: var(--lic-ink); text-shadow: none; }
.box > .row.between:first-child { background: repeating-radial-gradient(circle at 94% 50%, rgba(255,210,63,.16) 0 1px, transparent 1px 7px), var(--lic-band) !important; }
/* la «foto» del Pokémon (Pokédex, PC, intercambios) como la foto de la licencia: papel de foto con el borde del color del tipo */
.stage { background: radial-gradient(ellipse at 50% 85%, rgb(var(--lic-ink-rgb) / .16), transparent 60%), linear-gradient(var(--lic-pap2), var(--lic-pap2)) !important; box-shadow: 0 0 0 2px var(--lic-ink), 3px 3px 0 rgb(var(--lic-ink-rgb) / .25) !important; border-radius: 6px !important; }
.stage.shiny { box-shadow: 0 0 0 2px var(--lic-ink), 0 0 16px rgba(226,177,58,.7) !important; }
.pc-slot { background: var(--lic-pap2) !important; border-color: rgb(var(--lic-ink-rgb) / .28); }
.pc-slot.empty { background: rgb(var(--lic-ink-rgb) / .06) !important; border-color: rgb(var(--lic-ink-rgb) / .22); }
.pc-slot.r4 { border-color: rgba(140,70,200,.6); } .pc-slot.r5 { border-color: #e2b13a; }
/* ranking: pestañas de periodo como pestañas de carpeta; interruptores en tinta */
.rk-ptab { background: var(--lic-pap2) !important; color: var(--lic-ink) !important; border-color: rgb(var(--lic-ink-rgb) / .35) !important; text-shadow: none !important; }
.rk-ptab.on { background: var(--lic-band) !important; color: #ffd23f !important; }
.rk-togb { background: var(--lic-pap2) !important; color: var(--lic-ink) !important; text-shadow: none !important; }
.rk-togb.on { background: var(--lic-band) !important; color: #ffd23f !important; }
/* panel de amigos: hoja de papel con la banda de la licencia arriba */
.frd-pan { background: radial-gradient(circle at 20% 10%, rgb(var(--lic-wash) / .35), transparent 50%), repeating-linear-gradient(0deg, rgb(var(--lic-ink-rgb) / .035) 0 1px, transparent 1px 4px), var(--lic-pap) !important;
  color: var(--lic-ink); border-right: 3px solid var(--lic-ink) !important; box-shadow: inset -5px 0 0 var(--lic-pap), inset -7px 0 0 var(--lic-ink), 20px 0 40px rgba(0,0,0,.45) !important; text-shadow: none; }
.frd-hd { margin: -12px -12px 4px; padding: 12px; background: repeating-radial-gradient(circle at 94% 50%, rgba(255,210,63,.16) 0 1px, transparent 1px 7px), var(--lic-band); }
.frd-hd b { color: #ffd23f; } .frd-hd .hb i { background: #f4e7c9 !important; }
.frd-hd .btn { background: transparent !important; color: #f4e7c9 !important; border: 2px solid #f4e7c9 !important; box-shadow: none !important; }
.soc-ftabs button { background: var(--lic-pap2) !important; color: var(--lic-ink) !important; }
.soc-ftabs button.on { background: var(--lic-band) !important; color: #ffd23f !important; }
.fr-row { background: rgb(var(--lic-wash) / .45) !important; border: 2px solid rgb(var(--lic-ink-rgb) / .3) !important; color: var(--lic-ink); text-shadow: none; }
.fr-row b, .fr-row .st { color: var(--lic-ink) !important; text-shadow: none !important; }
.frd-pan .sub, .frd-pan p, .frd-pan .note { color: rgb(var(--lic-ink-rgb) / .75) !important; text-shadow: none !important; }
.frd-pan .field, .frd-pan input { background: rgb(var(--lic-wash) / .5) !important; color: var(--lic-ink) !important; border: 0 !important; border-bottom: 2px solid var(--lic-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
.frd-pan .soc-av { background-color: var(--lic-pap2) !important; border-color: var(--lic-ink) !important; color: var(--lic-ink) !important; }
.rk-map span { color: #f4e7c9 !important; background: linear-gradient(transparent, rgba(26,49,112,.92)) !important; text-shadow: 1px 1px 0 #0b1838 !important; }
.rk-map.on span { color: #ffd23f !important; }

/* ---- paneles que eran azul oscuro dentro de las hojas → papel claro (en la maqueta los cambiaba un script) ---- */
#chal-art, #scr-challenge .chal-top,
#dex-bonus, #dex-gens, #scr-dex .split > div:first-child, #scr-dex .cell,
#evsiv-ev, #evsiv-iv, #scr-gyms .gm-reg, #scr-items .pk-detail, #scr-levelup .lvp-win,
#mega-how, #mega-side, #scr-mega .mg-card, #scr-over .over-acts, #scr-pc .pc-boxwrap, #scr-pc .pc-tabs,
#rk-me, #rk-sup, #scr-rank .rk-podium, #scr-rank .rk-row, #scr-settings .gen-tab, #scr-settings .set-card,
#stg-bar, #scr-stages .stg-card, #scr-support .sup-ex, #scr-support .sup-lvc, #scr-support .sup-nick, #scr-support .sup-panel,
#upg-cmp, #upg-dialog, #upg-stage, #scr-upgrades .mart-card {
  background: rgb(var(--lic-wash) / .42) !important; border-color: rgb(var(--lic-ink-rgb) / .3) !important; box-shadow: none !important; }
#scr-settings .gen-tab.on { background: var(--lic-band) !important; }
#scr-settings .gen-tab.on, #scr-settings .gen-tab.on * { color: #ffd23f !important; }
/* y el texto claro que quedaba encima, en tinta */
#chal-left, #scr-challenge .chal-rule, #scr-dex .gen-tab, #scr-dex .gen-tab b, #scr-dex .gen-tab small, #scr-gacha .gx-leg span, #scr-gyms .gm-bdg.next b,
#mega-how, #scr-mega .mg-reg b, #scr-mega .mg-regn, #scr-over th, #pc-starbox, #scr-pc .pc-tabs button:not(.on), #scr-pc .pc-stars i,
#scr-rank .rk-sup-l b, #scr-rank .rk-mon, #scr-rank .rk-row .time, #scr-settings .gen-tab:not(.on), #scr-stages .stg-reg,
#scr-support .sup-ex .me, #scr-support .sup-lead, #upg-dialog, #upg-name, #upg-have dt, #upg-have dd, #upg-detail small,
#scr-upgrades .mart-card, #scr-upgrades .mc-lv b, #scr-upgrades .up, #scr-upgrades .mart-side-h, #scr-upgrades .mc-next, #scr-upgrades .mc-u, #scr-upgrades .uc-ab i, #scr-upgrades .mart-none {
  color: var(--lic-ink) !important; }
/* el nombre dorado de quien apoya, en oro oscuro para que se lea sobre el papel */
#scr-rank .nmc.gold, #scr-support .nmc.gold { color: var(--lic-goldd) !important; }

/* ---- registro: en PC, la licencia un poco inclinada, como la muestra (el celular, recta) ---- */
#scr-login .lic-wrap { transition: transform .2s; }
#scr-login .lic-legal { font: 13px var(--lic-type); }
@media (min-width: 1000px) and (min-height: 600px) {
  #scr-login .lic-wrap { transform: rotate(-1.2deg); }
  #scr-login .lic-tabs .tabs { margin-left: 36px; }
}

/* ---- menú en PC: una carpeta de papel con Partida, Tus Pokémon y Más; el compañero, en su carta de papel de la izquierda ---- */
@media (min-width: 1000px) and (min-height: 600px) {
  #scr-menu .menu-right { width: min(640px, 50vw); margin: 84px 40px 26px 0; padding: 20px 28px 22px 34px; gap: 16px; justify-content: flex-start; overflow-y: auto;
    background: var(--lic-paper); color: var(--lic-ink); border-radius: 6px 16px 16px 6px;
    box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 8px 0 0 #d7c49a, inset 10px 0 0 rgb(var(--lic-ink-rgb) / .22); }
  #scr-menu .menu-right > :first-child { margin-top: 0; } #scr-menu .menu-right > :last-child { margin-bottom: 0; }
  #scr-menu .menu-coins { margin: 0; }
  #scr-menu .menu-sect { padding-top: 0; }
  #scr-menu .ms-lab { position: static; display: inline-block; margin: 0 0 10px; padding: 0 0 2px; font-size: 22px; letter-spacing: 0; color: var(--lic-ink) !important;
    background: none !important; border: 0; border-bottom: 3px solid var(--lic-red); border-radius: 0; box-shadow: none !important; }
  #scr-menu .ms-mons .ms-lab { border-bottom-color: var(--lic-ink); }
  #scr-menu .ms-more .ms-lab { border-bottom-color: #c9932a; }
  #scr-menu .menu-sect > .box { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
  #scr-menu .menu-sect .menu-list { gap: 8px 26px; }
  #scr-menu .menu-sect .menu-item { padding: 4px 6px; font-size: 19px; }
  #scr-menu .menu-sect .menu-item::before { display: none; }
  #scr-menu .menu-sect .menu-item small { font-size: 13px; white-space: nowrap; }
  #scr-menu .ms-play .menu-list { grid-template-columns: 250px minmax(0, 1fr); }
  #scr-menu .ms-play .menu-item:not(.play) { grid-column: 2; }
  #scr-menu .ms-play .menu-item.play { grid-column: 1; grid-row: 1 / span 3; display: grid; grid-template-columns: 1fr; place-items: center; align-content: center; text-align: center;
    min-height: 118px; margin: 4px 6px; padding: 10px 12px; font-size: 46px; line-height: 1; color: var(--lic-red); border: 5px solid var(--lic-red); border-radius: 8px;
    box-shadow: inset 0 0 0 4px var(--lic-pap), inset 0 0 0 7px var(--lic-red); transform: rotate(-3deg); transition: transform .12s; }
  #scr-menu .ms-play .menu-item.play:hover { transform: rotate(-3deg) scale(1.04); background: rgba(216,64,47,.06); }
  #scr-menu .ms-play .menu-item.play .mi-ico { display: none; }
  #scr-menu .ms-play .menu-item.play small { grid-column: 1; margin-top: 6px; font: 700 15px var(--lic-type); color: var(--lic-red); white-space: normal; }
  #scr-menu .ms-more .menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Elige modo en PC: dos pasajes, como la muestra (título «¿A dónde vas?») ---- */
.mode-eb { display: none; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-mode > .mode-box { width: min(1160px, calc(100vw - 80px)); background: none !important; box-shadow: none !important; padding: 0 !important; }
  #scr-mode .mode-box > .row.between:first-child { position: relative; justify-content: center; margin: 0 0 40px; padding: 12px 120px; border-radius: 4px; box-shadow: 0 4px 0 #0b1638; }
  #scr-mode .mode-box > .row.between:first-child h2 { font-size: 30px; }
  #scr-mode .mode-box > .row.between:first-child::before { display: none; }
  #mode-back { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
  #scr-mode .mode-grid { grid-template-columns: 1fr 1fr; gap: 50px; margin: 0; padding: 0 12px 24px; }
  #scr-mode .mode-card { position: relative; display: grid; grid-template-columns: 56% minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 34px; row-gap: 8px;
    height: 300px; padding: 16px 20px 18px 16px; color: var(--lic-ink) !important; border: 0 !important; border-radius: 14px;
    background: var(--lic-paper) !important; box-shadow: 0 26px 50px rgba(0,0,0,.5) !important; transform: rotate(-2deg); transition: transform .15s; }
  #scr-mode .mode-card.gym { transform: rotate(1.5deg); box-shadow: 0 34px 60px rgba(0,0,0,.6), 0 0 0 4px var(--lic-gold) !important; }
  #scr-mode .mode-card:hover, #scr-mode .mode-card:focus-visible { transform: rotate(0deg) translateY(-6px); filter: none; }
  #scr-mode .mode-card:focus-visible { outline: 3px solid #ffd23f; outline-offset: 4px; }
  /* el troquel entre la foto y la matriz, con los dos agujeros */
  #scr-mode .mode-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(16px + (100% - 36px) * .56 + 17px); border-left: 3px dashed rgb(var(--lic-ink-rgb) / .5); }
  #scr-mode .mode-card::after { content: ""; position: absolute; top: -15px; bottom: -15px; width: 30px; left: calc(16px + (100% - 36px) * .56 + 18px); margin-left: -15px; pointer-events: none;
    background: radial-gradient(circle at 50% 15px, #0c1638 0 14px, transparent 15px), radial-gradient(circle at 50% calc(100% - 15px), #0c1638 0 14px, transparent 15px); }
  #scr-mode .mode-art { grid-column: 1; grid-row: 1 / -1; height: auto !important; border: 0; border-radius: 8px; box-shadow: 0 0 0 3px var(--lic-ink); }
  #scr-mode .mode-eb { display: block; grid-column: 2; grid-row: 1; margin-top: 6px; font: 14px var(--lic-type); color: rgb(var(--lic-ink-rgb) / .72); }
  #scr-mode .mode-t { grid-column: 2; grid-row: 2; margin: 0; font-size: 32px; line-height: 1; color: var(--lic-ink) !important; }
  #scr-mode .mode-card > .sub { grid-column: 2; grid-row: 3; margin: 0; font: 14px/1.35 var(--lic-type); color: var(--lic-ink) !important; }
  #scr-mode .mode-foot { grid-column: 2; grid-row: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 0; }
  #scr-mode .mode-s, #scr-mode .mode-card:not(.gym) .mode-s { font: 13px var(--lic-type); color: rgb(var(--lic-ink-rgb) / .75) !important; }
  #scr-mode .mode-go { align-self: flex-end; margin: 0 4px 2px 0; padding: 4px 16px; font-size: 26px; color: var(--lic-red) !important; background: transparent !important;
    border: 4px solid var(--lic-red) !important; border-radius: 8px; transform: rotate(-6deg); box-shadow: inset 0 0 0 3px var(--lic-pap), inset 0 0 0 5px var(--lic-red) !important; }
}

/* ---- Elige mapa: sin la Poké Ball de la banda y el pie de cada mapa, una etiqueta de papel (antes, sombra azul oscura) ---- */
#scr-stages .box > .row.between:first-child::before { display: none !important; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-stages .stg-txt { padding: 6px 10px 7px; background: var(--lic-paper) !important; border-top: 3px solid var(--lic-ink); }
  #scr-stages .stg-nm { color: var(--lic-ink) !important; }
  #scr-stages .stg-reg { color: var(--lic-red) !important; }
  #scr-stages .stg-card.locked .stg-ds { color: rgb(var(--lic-ink-rgb) / .75) !important; }
}

/* ---- Elige tus ataques: los círculos con ataque, en papel claro con anillo de tinta (antes, azul oscuro) ---- */
#scr-mvpick .mvp-orb.full { background: radial-gradient(circle at 38% 32%, var(--lic-pap), var(--lic-pap2) 62%, var(--lic-pap3)) !important; border-color: var(--lic-ink) !important;
  box-shadow: 0 0 0 3px var(--lic-pap), 0 0 0 5px var(--lic-goldd), 0 4px 0 rgb(var(--lic-ink-rgb) / .3) !important; color: var(--lic-ink); }
#scr-mvpick .mvp-orb.full.r-tank { border-color: #2c6fb8 !important; }
#scr-mvpick .mvp-orb.full.r-sup { border-color: #2f8a4a !important; }
#scr-mvpick .mvp-orb.full.imp { border-color: #7b62c9 !important; box-shadow: 0 0 0 3px var(--lic-pap), 0 0 0 5px #7b62c9, 0 4px 0 rgb(var(--lic-ink-rgb) / .3) !important; }
#scr-mvpick .mvp-orb small { color: var(--lic-ink); }

/* ---- Gacha: la ruleta, un billete con guilloche del color de la región (antes, un degradado violeta) ---- */
#scr-gacha .banner.gx-stage { color: var(--lic-ink); border: 0 !important;
  background:
    repeating-radial-gradient(circle at 50% 112%, color-mix(in srgb, var(--gx2, #1b2f78) 20%, transparent) 0 1px, transparent 1px 9px),
    repeating-conic-gradient(from 0deg at 50% 112%, color-mix(in srgb, var(--gx1, #3a1d6e) 8%, transparent) 0 2deg, transparent 2deg 6deg),
    radial-gradient(ellipse 80% 70% at 50% 100%, color-mix(in srgb, var(--gx3, #0f4d6e) 22%, var(--lic-pap)), var(--lic-pap) 72%) !important;
  box-shadow: inset 0 0 0 3px var(--lic-pap), inset 0 0 0 5px var(--lic-ink), inset 0 0 0 8px var(--lic-pap), inset 0 0 0 9px rgb(var(--lic-ink-rgb) / .45) !important; }
#scr-gacha .banner.gx-stage::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 12px; border-top: 2px dashed rgb(var(--lic-ink-rgb) / .35); pointer-events: none; }
#scr-gacha .banner.gx-stage .gx-head h3 { color: var(--lic-ink) !important; display: inline-block; border-bottom: 3px solid var(--lic-red); padding-bottom: 2px; }
#scr-gacha .gx-head p, #scr-gacha .gx-head .sub { font-family: var(--lic-type); color: rgb(var(--lic-ink-rgb) / .85) !important; text-shadow: none !important; }
#scr-gacha .gx-ped { border: 2px dashed rgb(var(--lic-ink-rgb) / .45); background: radial-gradient(ellipse at 50% 45%, rgb(var(--lic-ink-rgb) / .2), rgb(var(--lic-ink-rgb) / .06) 60%, transparent 72%) !important; }
#scr-gacha .gx-mon b { color: var(--lic-ink) !important; text-shadow: 0 0 3px var(--lic-pap), 0 0 3px var(--lic-pap) !important; }
#scr-gacha .gx-info { background: transparent !important; color: var(--lic-ink) !important; border: 2px solid rgb(var(--lic-ink-rgb) / .55) !important; box-shadow: none !important; }

/* ---- Subir de nivel: el fondo transparente y clarito; sólo las cartas son de papel ---- */
#scr-levelup.scr.dim { background: rgb(var(--lic-pap-rgb) / .14); }
#scr-levelup > .box { background: rgb(var(--lic-pap-rgb) / .34) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 0 0 2px rgb(var(--lic-ink-rgb) / .3), 0 18px 40px rgb(var(--lic-ink-rgb) / .16) !important; }
#scr-levelup #lvl-title, #scr-levelup #lvl-sub, #scr-levelup .note { color: var(--lic-ink) !important; text-shadow: 0 0 4px rgb(var(--lic-pap-rgb) / .95), 0 0 2px rgb(var(--lic-pap-rgb) / .95) !important; }
#scr-levelup #lvl-reroll { background: rgb(var(--lic-pap-rgb) / .85) !important; }

/* ---- recompensa diaria y avisos: también de papel (antes, caja azul y aviso azul oscuro) ---- */
.lr-box { color: var(--lic-ink); border: 0 !important; background: var(--lic-paper) !important; text-shadow: none;
  box-shadow: inset 0 0 0 7px var(--lic-pap), inset 0 0 0 9px var(--lic-ink), inset 0 0 0 12px var(--lic-pap), inset 0 0 0 13px rgb(var(--lic-ink-rgb) / .4), 0 26px 60px rgba(0,0,0,.55) !important; }
.lr-box * { text-shadow: none !important; }
.lr-box h2, .lr-x, .lr-dn { color: var(--lic-ink) !important; }
.lr-sub, .lr-tx { color: rgb(var(--lic-ink-rgb) / .75) !important; font-family: var(--lic-type); }
.lr-mn, .lr-foot, .lr-day.today .lr-dn { color: var(--lic-goldd) !important; }
.lr-c { background: radial-gradient(circle at 38% 32%, var(--lic-pap), var(--lic-pap2) 62%, var(--lic-pap3)) !important; border-color: var(--lic-ink) !important; box-shadow: 0 3px 0 rgb(var(--lic-ink-rgb) / .3) !important; }
.lr-day.today .lr-c { border-color: var(--lic-goldd) !important; box-shadow: 0 0 0 3px var(--lic-pap), 0 0 0 5px var(--lic-gold), 0 3px 0 rgb(var(--lic-ink-rgb) / .3) !important; }
.lr-day.next .lr-c { border-color: var(--lic-goldd) !important; }
.lr-n { background: var(--lic-band) !important; color: #ffd23f !important; border-color: var(--lic-pap) !important; }
.lr-tick { background: rgb(var(--lic-ink-rgb) / .3) !important; }
.toast { color: var(--lic-ink); background: var(--lic-paper); border: 2px solid var(--lic-ink); text-shadow: none; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.lr-box .btn:not(.gold) { background: var(--lic-pap); color: var(--lic-ink); border: 3px solid var(--lic-ink); box-shadow: 0 3px 0 rgb(var(--lic-ink-rgb) / .35); text-shadow: none; border-radius: 10px; }
/* ---- Novedades en PC («Boletín PokéHorde»): la banda de la licencia arriba y todo lo demás en papel ---- */
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  .nm-mast { margin: 10px 10px 0; border-bottom: 0; border-radius: 8px 8px 3px 3px; background: repeating-radial-gradient(circle at 94% 50%, rgba(255,210,63,.16) 0 1px, transparent 1px 7px), var(--lic-band) !important; }
  .nm-mast h2 { color: #ffd23f !important; border: 0 !important; padding: 0 !important; } .nm-mast h2 span { color: #fff3d0 !important; }
  .nm-mast small { color: #f4e7c9 !important; font-family: var(--lic-type); }
  .nm-mast .btn { background: transparent !important; color: #f4e7c9 !important; border: 2px solid #f4e7c9 !important; box-shadow: none !important; }
  .nm-kick { color: var(--lic-red) !important; }
  .nm-feat p { color: var(--lic-ink) !important; font: 14px/1.4 var(--lic-type); }
  .nm-pic { border-color: var(--lic-ink) !important; box-shadow: none !important; }
  .nm-mini, .nm-ver { background: rgb(var(--lic-wash) / .42) !important; color: var(--lic-ink) !important; border: 2px solid rgb(var(--lic-ink-rgb) / .3) !important; }
  .nm-vh small, .nm-cnt { color: rgb(var(--lic-ink-rgb) / .75) !important; }
  .nm-old { border-top-color: rgb(var(--lic-ink-rgb) / .25) !important; } .nm-old h4 { color: var(--lic-goldd) !important; }
}

/* ---- pantalla de carga y «Pulsa para empezar»: la licencia sobre la mesa, con su sello ---- */
.boot { background: radial-gradient(ellipse at 50% 42%, #142554, #050914 76%); }
.boot-in { position: relative; width: min(560px, 92vw); max-width: none; padding: 0 0 26px; text-align: left; color: var(--lic-ink); border-radius: 16px; transform: rotate(-1.2deg);
  background: var(--lic-paper);
  box-shadow: inset 0 0 0 7px var(--lic-pap), inset 0 0 0 9px var(--lic-ink), inset 0 0 0 12px var(--lic-pap), inset 0 0 0 13px rgb(var(--lic-ink-rgb) / .4), 0 30px 70px rgba(0,0,0,.6); }
.boot-in h1 { margin: 16px 16px 0; padding: 14px 20px 12px; border-radius: 8px 8px 2px 2px; font-size: clamp(30px, 6vw, 44px); line-height: 1; color: #ffd23f; text-shadow: 0 3px 0 #0b1638;
  background: repeating-radial-gradient(circle at 92% 50%, rgba(255,210,63,.16) 0 1px, transparent 1px 7px), var(--lic-band); }
.boot-sub { position: absolute; right: 36px; top: 34px; font: 15px var(--lic-type); color: #f4e7c9; white-space: nowrap; }
.boot-in p, .tapstart .boot-in p { margin: 16px 28px 0; font: 16px/1.45 var(--lic-type); color: var(--lic-ink); text-shadow: none; }
.boot-in p b { font-weight: 700; }
.boot-ld { position: relative; margin: 22px 130px 0 28px !important; padding-bottom: 6px; font: 700 18px var(--font) !important; color: var(--lic-ink) !important; border-bottom: 2px solid rgb(var(--lic-ink-rgb) / .22); }
.boot-ld::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 30%; background: var(--lic-band); animation: bootSign 1.3s ease-in-out infinite alternate; }
@keyframes bootSign { to { width: 100%; } }
.boot-st { position: absolute; right: 26px; bottom: 16px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; text-align: center; pointer-events: none;
  font: 700 13px/1.15 var(--font); color: var(--lic-red); border: 4px solid var(--lic-red); box-shadow: inset 0 0 0 3px var(--lic-pap), inset 0 0 0 6px var(--lic-red);
  opacity: .85; mix-blend-mode: multiply; transform: rotate(-14deg); animation: bootStamp .45s .35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes bootStamp { from { transform: rotate(-14deg) scale(1.6); opacity: 0; } }
.tapstart { background: radial-gradient(ellipse at center, rgba(5,9,20,.25), rgba(5,9,20,.75)); }
.tap-blink { margin: 24px 130px 0 28px !important; font: 700 22px var(--font) !important; color: var(--lic-red) !important; }
@media (max-width: 520px), (orientation: landscape) and (max-height: 500px) {
  .boot-in { width: min(500px, 86vw); padding-bottom: 18px; }
  .boot-in h1 { margin: 12px 12px 0; padding: 10px 14px 9px; font-size: 30px; }
  .boot-sub { display: none; }
  .boot-in p, .tapstart .boot-in p { margin: 10px 20px 0; font-size: 14px; }
  .boot-ld, .tap-blink { margin: 14px 104px 0 20px !important; }
  .boot-st { width: 72px; height: 72px; font-size: 11px; right: 18px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .boot-ld::after { animation: none; width: 60%; } .boot-st { animation: none; } }
/* ---- detalles que salieron al revisar todas las pantallas ---- */
.scr .box a:not(.btn) { color: var(--lic-red); }
.box > .row.between:first-child .sub, .box > .row.between:first-child h2 .sub { color: #f4e7c9 !important; }
#scr-gacha .gx-dock { background: rgb(var(--lic-wash) / .42) !important; border-color: rgb(var(--lic-ink-rgb) / .3) !important; box-shadow: none !important; }
#scr-gacha .gx-lab, #scr-gacha .gx-pity small { color: rgb(var(--lic-ink-rgb) / .8) !important; }
/* (la tarjeta de carga, un poco más grande en PC y con sitio para el sello a la derecha) */
.boot-in { width: min(640px, 92vw); padding-bottom: 30px; }
.boot-in h1 { font-size: clamp(30px, 6vw, 50px); }
.boot-in p, .tapstart .boot-in p { margin-right: 150px; font-size: 17px; }
.boot-ld, .tap-blink { margin-right: 150px !important; }
.boot-st { top: auto; bottom: 26px; right: 30px; width: 104px; height: 104px; font-size: 15px; }
@media (max-width: 520px), (orientation: landscape) and (max-height: 500px) {
  .boot-in { width: min(520px, 86vw); padding-bottom: 20px; }
  .boot-in h1 { font-size: 30px; }
  .boot-in p, .tapstart .boot-in p { margin-right: 110px; font-size: 14px; }
  .boot-ld, .tap-blink { margin-right: 110px !important; }
  .boot-st { width: 78px; height: 78px; font-size: 11px; right: 20px; bottom: 16px; }
}
#scr-gacha .gx-dock b, #scr-gacha .gx-tk, #scr-gacha .gx-tk *, #gacha-pity { color: var(--lic-ink) !important; text-shadow: none !important; }

/* =====================================================================================================================
 * (30-10-2026) Cartas de subir de nivel con el estilo «Cartas» de la muestra de identidad (al dueño le encantó): marco de
 * lámina del color del rol (rojo ataque, naranja cuerpo a cuerpo, verde apoyo, azul aguante, lila pasiva, dorado evolución;
 * plateado sin rol), cara crema, arriba el nombre y el número, la ventana de arte con brillo holográfico y la placa de lámina
 * del rol abajo. Antes: hojas de papel con la banda del color del rol.
 * ===================================================================================================================== */
.cards.vcards .card.vcard {
  --foil: linear-gradient(135deg, color-mix(in srgb, var(--rc) 35%, #fff), var(--rc) 28%, color-mix(in srgb, var(--rc) 22%, #fff) 48%, color-mix(in srgb, var(--rc) 70%, #000) 68%, color-mix(in srgb, var(--rc) 50%, #fff));
  --rim: color-mix(in srgb, var(--rc) 40%, #0b1430);
  padding: 0 0 10px; gap: 0; color: #1a3170 !important; text-shadow: none; border: 7px solid transparent !important; border-radius: 18px;
  background: linear-gradient(#f8f0de, #efe2c4) padding-box, var(--foil) border-box !important;
  box-shadow: 0 0 0 2px var(--rim), 0 14px 28px rgba(0,0,0,.35) !important; transition: transform .15s; }
.cards.vcards .card.vcard:hover { transform: translateY(-6px) rotate(-1deg); }
.cards.vcards .card.vcard.r-none { --rc: #b9c3d6; min-height: 0; padding-bottom: 12px; }
.cards.vcards .card.vcard.evo {
  background: linear-gradient(115deg, rgba(255,120,220,.14), rgba(120,220,255,.16) 45%, rgba(255,236,140,.2)) padding-box, linear-gradient(#f8f0de, #efe2c4) padding-box, var(--foil) border-box !important;
  box-shadow: 0 0 0 2px var(--rim), 0 0 22px rgba(255,210,63,.65), 0 14px 28px rgba(0,0,0,.35) !important; }
.cards.vcards .card.vcard.pevo { box-shadow: 0 0 0 2px var(--rim), 0 0 0 5px #ffd23f, 0 14px 28px rgba(0,0,0,.35) !important; }
.cards.vcards.done .vcard.picked { box-shadow: 0 0 0 2px var(--rim), 0 0 0 6px #ffd23f, 0 14px 28px rgba(0,0,0,.35) !important; }
.cards.vcards .card.vcard * { text-shadow: none !important; }
/* arriba: el nombre y el número de la carta */
.vcard .vc-nb { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 42px; padding: 7px 9px 5px 12px; }
.cards.vcards .vcard .vc-nb .nm { min-width: 0; font-size: 17px; line-height: 1.1; text-align: left; justify-content: flex-start; color: #1a3170; }
.cards.vcards .vcard.evo .vc-nb .nm { color: #7a5600; }
.cards.vcards .vcard .vc-nb .key { flex: none; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 12px; line-height: 1;
  background: #1a3170; color: #f8f0de; border: 0; box-shadow: none; }
/* la ventana de arte, con su brillo holográfico */
.vcard .vc-art { position: relative; align-self: stretch; margin: 0 9px; padding: 10px 0; display: grid; place-items: center; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 18%, #fff), color-mix(in srgb, var(--rc) 42%, #dfe6f6) 78%); box-shadow: inset 0 0 0 3px #10204f; }
.vcard .vc-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background-size: 260% 100%; background-position: 100% 0; transition: background-position .7s ease-out;
  background-image: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.45) 42%, rgba(255,120,220,.2) 48%, rgba(120,220,255,.24) 54%, transparent 64%); }
.vcard:hover .vc-art::after, .vcard.open .vc-art::after { background-position: 0 0; }
.vcard .vc-art .tag-chip { position: absolute; left: 7px; top: 7px; z-index: 1; font-size: 11px; box-shadow: 0 0 0 2px #10204f; }
.cards.vcards .vcard .vc-art .vc-ico { margin: 0; background: radial-gradient(circle at 38% 32%, #fffaf0, #efe0bd 70%) !important; border: 3px solid #10204f; box-shadow: 0 3px 0 rgba(16,32,79,.3); }
.cards.vcards .vcard .vc-art .vc-ico.vc-pv { width: calc(100% - 16px); border-radius: 7px; background: #0d1626 !important; border: 2px solid #10204f; box-shadow: none; }
.lvp-win { border-color: #10204f; }
/* el texto y la placa del rol */
.cards.vcards .vcard .txt { padding: 8px 11px 0; gap: 4px; }
.cards.vcards .vcard .ds { color: #3a4a78 !important; }
.vcard .vc-lv { color: #1a3170; }
.vcard .vc-dots b { background: rgba(26,49,112,.18); } .vcard .vc-dots b.on { background: #1a3170; } .vcard .vc-dots b.next { background: #e2b13a; }
.cards.vcards .vcard.pevo .evo-for { color: #7a5600; }
.vcard .vc-again { color: #d8402f; }
.vcard .vc-new { top: -17px; border: 0; color: #3a2a00; background: linear-gradient(135deg, #fff1a8, #e2b13a 40%, #fff6c8 60%, #e2b13a); box-shadow: 0 0 0 2px #7a5600, 0 3px 0 #7a5600; }
.vcard .vc-band { align-self: stretch; margin: 10px 10px 0; padding: 6px; border-radius: 10px; color: #10204f; background: var(--foil); box-shadow: 0 0 0 2px var(--rim), 0 3px 0 var(--rim); }
.vcard .vc-band span { text-shadow: 0 1px 0 rgba(255,255,255,.55) !important; }
.vcard .vc-band svg { color: #10204f; }
.cards.vcards .vcard .veto-btn { color: #1a3170 !important; background: transparent !important; border: 2px solid rgba(26,49,112,.5) !important; box-shadow: none !important; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .cards.vcards .card.vcard { border-width: 5px !important; border-radius: 14px; padding-bottom: 7px; }
  .vcard .vc-nb { min-height: 30px; padding: 4px 6px 3px 8px; }
  .cards.vcards .vcard .vc-nb .nm { font-size: 13px; }
  .cards.vcards .vcard .vc-nb .key { width: 18px; height: 18px; font-size: 10px; }
  .vcard .vc-art { margin: 0 6px; padding: 5px 0; }
  .vcard .vc-art .tag-chip { left: 4px; top: 4px; font-size: 9px; }
  .cards.vcards .vcard .txt { padding: 4px 7px 0; }
  .vcard .vc-band { margin: 6px 6px 0; padding: 3px; }
  .vcard .vc-new { top: -14px; }
}
@media (prefers-reduced-motion: reduce) { .vcard .vc-art::after { transition: none; } .cards.vcards .card.vcard:hover { transform: none; } }
/* (30-10-2026) Menú en PC con «Más» dentro de la carpeta (lo pidió el dueño, sin pestañas a la derecha): de a dos, como
   Tus Pokémon, y en pantallas de poca altura todo un poco más apretado para que se vea sin desplazar. */
@media (min-width: 1000px) and (min-height: 600px) {
  #scr-menu .ms-more .menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 26px; }
}
@media (min-width: 1000px) and (min-height: 600px) and (max-height: 820px) {
  #scr-menu .menu-right { margin-top: 76px; padding-top: 16px; padding-bottom: 16px; gap: 10px; }
  #scr-menu .ms-lab { font-size: 18px; margin-bottom: 6px; }
  #scr-menu .menu-sect .menu-list { gap: 4px 22px; }
  #scr-menu .menu-sect .menu-item { padding: 2px 6px; font-size: 18px; }
  #scr-menu .menu-sect .menu-item small { font-size: 12px; }
  #scr-menu .ms-play .menu-item.play { min-height: 100px; font-size: 40px; }
  #scr-menu .ms-more .menu-item { font-size: 18px; }
}

/* =====================================================================================================================
 * (30-10-2026) Modo oscuro (Ajustes → Gráficos, G.Settings 'dark'): la misma licencia impresa en papel azul noche, con la tinta
 * crema; las bandas, más oscuras; los sellos y el oro, igual. Las cartas de subir de nivel siguen claras (son cartas).
 * ===================================================================================================================== */
html.theme-dark {
  --lic-pap: #1b2443; --lic-pap2: #232e54; --lic-pap3: #2c3863; --lic-pap-rgb: 27 36 67;
  --lic-field: #232e54;   /* (09-11-2026) fondo de campos y fichas (mochila, cajas, buscador); antes #fbf3df fijo y en oscuro salían en crema con letra crema */
  --lic-ink: #efe3c4; --lic-ink-rgb: 239 227 196; --lic-band: #0b1330; --lic-wash: 6 10 28;
  --lic-goldd: #e2b13a; --lic-red: #ff6b58;
  --lic-paper: radial-gradient(circle at 18% 12%, rgba(255,255,255,.06), transparent 40%), repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 4px), #1b2443;
}
html.theme-dark .lic-stamp, html.theme-dark .boot-st { mix-blend-mode: normal; opacity: .9; }
html.theme-dark #scr-login .lic-photo canvas { filter: brightness(0) invert(1) opacity(.22); }
html.theme-dark #scr-menu .menu-right { box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 8px 0 0 #121a36, inset 10px 0 0 rgba(239,227,196,.2); }
html.theme-dark .partner-card .stage, html.theme-dark .partner-card canvas, html.theme-dark .stage { background: radial-gradient(ellipse at 50% 85%, rgba(0,0,0,.25), transparent 60%), linear-gradient(#26325c, #1d2748) !important; }
html.theme-dark .ivs-stage { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c, #4fd07a) 22%, #1b2443), #141c38 78%) !important; }
html.theme-dark .pc-slot { background: var(--lic-pap2) !important; }
html.theme-dark #scr-mode .mode-card::after { background: radial-gradient(circle at 50% 15px, #050914 0 14px, transparent 15px), radial-gradient(circle at 50% calc(100% - 15px), #050914 0 14px, transparent 15px); }
html.theme-dark #scr-stages .stg-txt { border-top-color: rgba(239,227,196,.5); }
html.theme-dark .boot { background: radial-gradient(ellipse at 50% 42%, #0e1a40, #03060f 76%); }
html.theme-dark #scr-pc .pc-detail { background: var(--lic-pap) !important; color: var(--lic-ink) !important; }
html.theme-dark .pc-hero { background: linear-gradient(90deg, var(--tbc) 0 180px, var(--lic-pap2) 180px) !important; }
html.theme-dark #scr-pc .pc-detail .sub, html.theme-dark #scr-pc .pc-detail small { color: rgb(var(--lic-ink-rgb) / .75) !important; }
html.theme-dark #scr-pc .pc-detail h3 { color: var(--lic-ink) !important; }
html.theme-dark #scr-eggs #egg-sub { color: #5a3a1a !important; }
html.theme-dark #scr-gyms .gym-right { background: var(--lic-pap2) !important; color: var(--lic-ink) !important; }
html.theme-dark #scr-gyms .gym-right :is(.gym-k, .gym-n, .gym-s, .gym-team, small, b) { color: var(--lic-ink) !important; }

/* (30-10-2026) Interruptores de Ajustes: casillas de formulario con una tilde roja a mano (opción A «Casilla» que eligió el
   dueño; antes, un botón Sí/No que en PC era un interruptor redondo con una Poké Ball). */
.set-row .lic-check { flex: none; appearance: none; position: relative; width: 34px; min-width: 0; height: 34px; padding: 0; cursor: pointer; border-radius: 4px;
  border: 3px solid var(--lic-ink); background: rgb(var(--lic-wash) / .5); transform: rotate(-2deg); box-shadow: none; }
.set-row .lic-check:hover { background: rgb(var(--lic-wash) / .85); }
.set-row .lic-check:focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
.set-row .lic-check svg { position: absolute; left: -4px; top: -10px; width: 44px; height: 44px; overflow: visible; pointer-events: none; }
.set-row .lic-check path { fill: none; stroke: var(--lic-red); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.set-row .lic-check[aria-pressed="true"] path { stroke-dashoffset: 0; }
.set-row .lic-check.just[aria-pressed="true"] path { animation: licTick .25s ease-out; }
@keyframes licTick { from { stroke-dashoffset: 60; } }
@media (prefers-reduced-motion: reduce) { .set-row .lic-check.just path { animation: none; } }
/* (30-10-2026, lo pidió el dueño) Cartas de subir de nivel más altas en PC, de carta coleccionable (antes, 300 px de alto mínimo). */
@media (min-width: 761px) and (min-height: 501px) {
  .cards.vcards .card.vcard { min-height: 350px; }
  .vcard .vc-art { padding: 16px 0; }
  .cards.vcards .vcard .vc-art .vc-ico { width: 104px; height: 104px; }
  .cards.vcards .vcard .vc-art .vc-ico.vc-pv { height: auto; }
  .cards.vcards .vcard .txt { padding-top: 10px; }
}
/* (30-10-2026, lo reportó un jugador: «text is a bit off center», el nombre de la región se cortaba con cifras de 6 dígitos)
   Pokémonedas del menú en PC: la moneda a la izquierda y, al lado, la cifra arriba y la región debajo (antes en una sola
   línea, con la región empujada a la derecha y cortada). */
@media (min-width: 1000px) and (min-height: 600px) {
  #scr-menu .menu-coins { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  #scr-menu .mc-pill { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 7px; row-gap: 1px; align-items: center; justify-content: start;
    text-align: left; padding: 4px 10px 4px 7px; border-radius: 12px; line-height: 1.05; }
  #scr-menu .mc-pill .coin { grid-row: 1 / span 2; }
  #scr-menu .mc-pill b { font-size: 14px; }
  #scr-menu .mc-pill small { margin: 0; font-size: 11px; opacity: .8; overflow: hidden; text-overflow: ellipsis; }
}

/* =====================================================================================================================
 * (30-10-2026, lo pidió el dueño; opción B «Hoja de pedido») Tienda de huevos del Criadero: una hoja de la licencia encima del
 * granero, con las 9 regiones, los 4 huevos (legendario, épico, raro y común), qué nace, el precio y el sello «Comprar».
 * ===================================================================================================================== */
#scr-hatchery #hat-shop { font-size: 13px; padding: 5px 12px; color: #fff8e0; text-shadow: 2px 2px 0 #5a2a00; background: linear-gradient(#ffd35a, #e0a012); border: 3px solid #5a2a00; border-radius: 6px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 3px 0 #3a1a00; margin-left: auto; margin-right: 8px; }
@media (min-width: 1000px) and (min-height: 600px) { #scr-hatchery #hat-shop { position: absolute; right: 108px; top: 6px; margin: 0; } }
.egg-shop { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 12px; background: rgba(20,10,4,.5); }
.egg-shop.hidden { display: none; }
.es-sheet { width: min(720px, 100%); max-height: 100%; display: flex; flex-direction: column; padding: 18px 22px; border-radius: 16px; color: var(--lic-ink); background: var(--lic-paper); transform: rotate(-.6deg);
  box-shadow: inset 0 0 0 7px var(--lic-pap), inset 0 0 0 9px var(--lic-ink), inset 0 0 0 12px var(--lic-pap), inset 0 0 0 13px rgb(var(--lic-ink-rgb) / .4), 0 30px 60px rgba(0,0,0,.6); text-shadow: none; }
.es-sheet * { text-shadow: none; }
.es-band { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px 8px 2px 2px; background: repeating-radial-gradient(circle at 92% 50%, rgba(255,210,63,.16) 0 1px, transparent 1px 7px), var(--lic-band); }
.es-band b { font-size: 24px; color: #ffd23f; } .es-band span { flex: 1; min-width: 0; font: 14px var(--lic-type); color: #f4e7c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-band .btn { background: transparent !important; color: #f4e7c9 !important; border: 2px solid #f4e7c9 !important; box-shadow: none !important; }
.es-top { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 2px 8px; }
.es-regs { display: flex; flex-wrap: wrap; gap: 4px; }
.es-reg { font: 700 13px var(--font); padding: 3px 9px; border-radius: 6px; cursor: pointer; background: var(--lic-pap2); color: var(--lic-ink); border: 2px solid rgb(var(--lic-ink-rgb) / .35); }
.es-reg.on { background: var(--lic-band); color: #ffd23f; border-color: var(--lic-band); }
.es-wal { margin-left: auto; font: 14px var(--lic-type); white-space: nowrap; } .es-wal b { font: 700 17px var(--font); } .es-wal .coin { vertical-align: -3px; }
.es-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: 8px; padding: 2px; }
.es-row { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 6px 10px; border-radius: 8px;
  background: rgb(var(--lic-wash) / .42); box-shadow: inset 0 0 0 2px rgb(var(--lic-ink-rgb) / .28); }
.es-pic { width: 66px; height: 60px; display: grid; place-items: center; border: 2px dashed rgb(var(--lic-ink-rgb) / .5); border-radius: 6px; background: repeating-linear-gradient(45deg, rgb(var(--lic-ink-rgb) / .05) 0 6px, transparent 6px 12px); }
.es-pic img { width: 32px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgb(var(--lic-ink-rgb) / .3)); }
.es-tx b { display: block; font-size: 18px; } .es-tx small { font: 13px var(--lic-type); color: rgb(var(--lic-ink-rgb) / .75); }
.es-pr { display: grid; justify-items: end; font: 700 19px var(--font); white-space: nowrap; } .es-pr .coin { display: inline-block; vertical-align: -3px; margin-right: 4px; } .es-n { display: inline-flex; align-items: center; }
.es-pr small { font: 12px var(--lic-type); color: var(--lic-red); }
.es-buy { font: 700 18px var(--font); padding: 4px 14px; cursor: pointer; color: var(--lic-red); background: transparent; border: 3px solid var(--lic-red); border-radius: 7px; transform: rotate(-5deg);
  box-shadow: inset 0 0 0 2px var(--lic-pap), inset 0 0 0 4px var(--lic-red); transition: transform .12s; }
.es-buy:hover:not(:disabled) { transform: rotate(-5deg) scale(1.06); }
.es-buy.arm { color: var(--lic-pap); background: var(--lic-red); box-shadow: inset 0 0 0 2px var(--lic-red), inset 0 0 0 4px var(--lic-pap); }
.es-buy:disabled { cursor: default; opacity: .4; filter: grayscale(1); }
.es-buy:focus-visible, .es-reg:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
.es-paid { position: absolute; right: 18%; top: 50%; padding: 2px 12px; font: 700 20px var(--font); color: #2f8a4a; border: 3px solid #2f8a4a; border-radius: 6px; pointer-events: none;
  transform: translateY(-50%) rotate(-10deg); background: rgb(var(--lic-pap-rgb) / .85); animation: esPaid 1.6s ease-out forwards; }
@keyframes esPaid { 0% { opacity: 0; transform: translateY(-50%) rotate(-10deg) scale(1.8); } 15% { opacity: 1; transform: translateY(-50%) rotate(-10deg) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
.es-note { flex: none; margin: 10px 2px 0; font: 13px var(--lic-type); color: rgb(var(--lic-ink-rgb) / .75); }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .egg-shop { padding: 6px; }
  .es-sheet { padding: 10px 12px; transform: none; }
  .es-band { padding: 6px 10px; } .es-band b { font-size: 18px; } .es-band span { display: none; }
  .es-top { margin: 6px 0 4px; } .es-reg { font-size: 11px; padding: 2px 6px; }
  .es-row { grid-template-columns: 50px minmax(0, 1fr) auto auto; gap: 8px; padding: 4px 8px; }
  .es-pic { width: 46px; height: 42px; } .es-pic img { width: 24px; height: 30px; }
  .es-tx b { font-size: 15px; } .es-tx small { font-size: 11px; }
  .es-pr { font-size: 15px; } .es-buy { font-size: 14px; padding: 3px 10px; }
  .es-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .es-paid { animation: none; opacity: 0; } }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { .es-band b { flex: 1; } }
/* (30-10-2026) Cartel de la Pokédex completa: los premios en papel con letra de tinta (antes, dorado sobre gris) y los 3 en fila. */
.dd-prize { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; }
.dd-prize li { background: rgb(var(--lic-wash) / .45) !important; border: 2px solid rgb(var(--lic-ink-rgb) / .3) !important; box-shadow: none !important; }
.dd-prize b { color: var(--lic-ink) !important; text-shadow: none !important; }
.dd-prize small { color: rgb(var(--lic-ink-rgb) / .75) !important; font-family: var(--lic-type); }
.dd-ic { background: radial-gradient(circle at 38% 32%, #fffaf0, #efe0bd 70%) !important; border-color: var(--lic-goldd) !important; }
.dd-mon small { color: var(--lic-goldd) !important; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { .dd-prize { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .dd-prize li { grid-template-columns: 1fr; justify-items: center; text-align: center; } .dd-ic { grid-row: auto; } }
@media (max-width: 520px) { .dd-prize { grid-template-columns: 1fr; } }
/* (30-10-2026, lo pidió el dueño) «Elige tus ataques» en el celular apaisado: a pantalla completa y sin la barra de arriba
   (antes la barra tapaba «Recomendados» y «¡A jugar!», que quedaban fuera de la hoja). Los dos botones van en la banda azul. */
@media (max-height: 520px) and (min-width: 561px) {
  body:has(#scr-mvpick:not(.hidden)) :is(#topbar, .fr-burger, #credits-line) { display: none !important; }
  #scr-mvpick.scr.dim { padding: max(4px, env(safe-area-inset-top, 0px)) max(4px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px)) !important; }
  #scr-mvpick > .box.mvp { width: 100% !important; max-width: none; height: 100%; max-height: none; padding: 14px 16px 10px; border-radius: 12px !important; }
  #scr-mvpick .mvp > .row.between:first-child { margin: -2px -2px 6px; padding: 6px 12px; min-height: 48px; }
  #scr-mvpick .mvp .mvp-head > div { max-width: calc(100% - 400px); min-width: 0; }
  #scr-mvpick .mvp-foot { top: 18px; right: 108px; width: auto; }
  #scr-mvpick .mvp-foot .btn { min-width: 0; }
  #scr-mvpick #mvp-def { background: transparent !important; color: #f4e7c9 !important; border: 2px solid #f4e7c9 !important; box-shadow: none !important; }
  #scr-mvpick .mvp-body { --wd: min(calc(100dvh - 128px), 320px); min-height: 0; }
  #scr-mvpick .mvp-cat { display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 92px); }
  #scr-mvpick .mvp-grid { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; align-content: start; grid-auto-rows: max-content; }
  #scr-mvpick .mvp-info { flex: none; margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* (30-10-2026, lo pidió el dueño) «Descargar» también en el celular (js/ui/install-ui.js): en la barra, sólo el icono verde; y la
   hoja con los pasos para añadirlo a la pantalla de inicio cuando el navegador no tiene el aviso de instalar (iPhone, Firefox…). */
@media (pointer: coarse), (max-height: 520px) {
  #topbar .btn.tb-install { padding: 0 4px; gap: 0; }
  #topbar .btn.tb-install > .ins-t { display: none !important; }
}
.inst-help { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 12px; background: rgba(5,9,20,.6); }
.ih-box { width: min(460px, 100%); max-height: 100%; overflow: auto; padding: 16px 18px; border-radius: 14px; color: var(--lic-ink); background: var(--lic-paper); text-shadow: none;
  box-shadow: inset 0 0 0 6px var(--lic-pap), inset 0 0 0 8px var(--lic-ink), 0 24px 50px rgba(0,0,0,.55); }
.ih-band { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px 8px 2px 2px;
  background: repeating-radial-gradient(circle at 92% 50%, rgba(255,210,63,.16) 0 1px, transparent 1px 7px), var(--lic-band); }
.ih-band b { color: #ffd23f; font-size: 19px; }
.ih-band .btn { background: transparent !important; color: #f4e7c9 !important; border: 2px solid #f4e7c9 !important; box-shadow: none !important; }
.ih-lead { margin: 10px 2px 6px; font: 14px/1.4 var(--lic-type); }
.ih-steps { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; font-size: 15px; }
.ih-steps li::marker { color: var(--lic-red); font-weight: 700; }
.ih-ok { width: 100%; }
@media (orientation: landscape) and (max-height: 500px) { .ih-box { padding: 10px 12px; } .ih-lead { margin: 6px 0 4px; font-size: 13px; } .ih-steps { font-size: 13px; gap: 3px; margin-bottom: 8px; } }

/* (30-10-2026) Intercambios: cuenta atrás de 5 s cuando los dos pusieron su Pokémon (cualquiera puede cancelar). */
.trx-count { display: flex; align-items: center; gap: 12px; padding: 6px 14px; border-radius: 10px; background: rgb(var(--lic-wash) / .45); box-shadow: inset 0 0 0 2px rgb(var(--lic-ink-rgb) / .3); }
.trx-count .trx-n { min-width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font: 700 28px var(--font); color: var(--lic-red);
  border: 4px solid var(--lic-red); box-shadow: inset 0 0 0 2px var(--lic-pap), inset 0 0 0 4px var(--lic-red); transform: rotate(-8deg); }
.trx-count .trx-ct { font: 14px var(--lic-type); color: var(--lic-ink); max-width: 30ch; }
.trx-count.bump .trx-n { animation: trxBump .35s ease-out; }
@keyframes trxBump { from { transform: rotate(-8deg) scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .trx-count.bump .trx-n { animation: none; } }

/* (30-10-2026) Intercambios con la licencia: las fichas en papel con letra de tinta (con la piel nueva el texto blanco con
   contorno quedaba sin contorno y no se leía, y los EVs eran tinta sobre negro), y los Pokémon más arriba en su escenario
   (lo pidió el dueño: se veían muy abajo). */
#scr-trades .trx-card { background: var(--lic-pap) !important; border-color: rgb(var(--lic-ink-rgb) / .35) !important; outline-color: var(--lic-ink) !important; }
#scr-trades .trx-label, #scr-trades .trx-label b { color: #1a3170 !important; }
#scr-trades .trx-label span { color: #3a4a78 !important; }
#scr-trades .trx-evs { background: rgb(var(--lic-wash) / .45) !important; color: var(--lic-ink) !important; box-shadow: inset 0 0 0 2px rgb(var(--lic-ink-rgb) / .25); }
#scr-trades .trx-evh b, #scr-trades .trx-ev span, #scr-trades .trx-ev b { color: var(--lic-ink) !important; }
#scr-trades .trx-evh small, #scr-trades .trx-ev small { color: rgb(var(--lic-ink-rgb) / .7) !important; }
#scr-trades .trx-ev small.up { color: #1f7a3a !important; } #scr-trades .trx-ev small.down { color: #c8372a !important; }
#scr-trades .trx-ev .bar { background: rgb(var(--lic-ink-rgb) / .15) !important; }
html.theme-dark #scr-trades .trx-ev small.up { color: #5fe08a !important; } html.theme-dark #scr-trades .trx-ev small.down { color: #ff7b7b !important; }
.trx-stage canvas { transform: translateY(-16px); }
.trx-stage { background:
    radial-gradient(ellipse 42% 9% at 50% 72%, rgba(120,255,255,.9), rgba(120,255,255,.25) 60%, transparent 72%),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(0,0,30,.18) 13px 14px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(255,255,255,.07) 27px 28px),
    linear-gradient(160deg, #4f8ee0, #3d55c7 55%, #3646a8) !important; }
@media (max-height: 520px) { .trx-stage canvas { transform: translateY(-10px); } }
/* (30-10-2026, lo pidió el dueño) el destello al abrir un huevo, redondo y difuminado (antes un cuadrado blanco del tamaño del nido) */
#hat-flash { background: radial-gradient(circle at 50% 58%, #fff 0, rgba(255,255,255,.85) 22%, rgba(255,250,220,.35) 48%, transparent 70%) !important; }

/* (30-10-2026, bug «en Perks, la ficha de un ataque se ve transparente») En el celular y en pantallas chicas la ficha del ataque
   flota encima de la cuadrícula: con la licencia quedaba de papel translúcido (rgb(--lic-wash) / .42, la regla de los paneles de
   arriba) y se leía la cuadrícula a través. Ahora es una hoja de papel opaca, con su borde de licencia y sombra. */
@media (max-width: 1000px), (orientation: landscape) and (max-height: 500px) {
  #scr-items .pk-detail.open { background: var(--lic-paper) !important; border: 0 !important; border-radius: 14px;
    box-shadow: inset 0 0 0 4px var(--lic-pap), inset 0 0 0 6px var(--lic-ink), inset 0 0 0 8px var(--lic-pap), 0 12px 40px rgba(0,0,0,.6) !important; }
  #scr-items .pk-detail.open .pk-dhead { background: transparent; padding-top: 10px; }
  #scr-items .pk-detail.open .it-body { padding-bottom: 12px; }
}

/* ================= Ranking: nombres y rangos (30-10-2026) =================
   Lo pidió el dueño: «que todos los nombres se vean en negro y que resalten más los rangos: el plateado, el dorado, el rojo y el
   shiny apenas destacan» (también en el modo oscuro) y «resalta más» el cartel de los rangos.
   - Los nombres normales, en tinta casi negra (en el modo oscuro, crema). Antes salían en el rojo de los enlaces de la licencia.
   - Cada rango es ahora una PLACA detrás del nombre, con su color de fondo, letra que contrasta y un brillo que pasa: dorada,
     roja, plateada y shiny (arcoíris que se mueve); la de quien comparte, verde. Se ve igual sobre el papel y en el modo oscuro.
     Antes: sólo el color de la letra con un halo, pensado para el fondo azul de antes (sobre el papel casi no se veía).
   - El cartel «Cambia el color de tu nombre»: marco dorado, fondo cálido y cada rango con su placa de muestra.
   - El nivel y los derrotados del podio, legibles sobre los bloques. */
:root { --rk-ink: #15171e; --rk-ink2: rgb(21 23 30 / .62); --rk-mine: #1d7a35; }
html.theme-dark { --rk-ink: #f6eedc; --rk-ink2: rgb(246 238 220 / .7); --rk-mine: #8ff08a; }
#scr-rank a.plink, #scr-rank .rk-step-who b, #scr-rank .rk-row .who b { color: var(--rk-ink) !important; text-shadow: none; }
#scr-rank a.plink { border-bottom-color: rgb(var(--lic-ink-rgb) / .3); }
#scr-rank .rk-step.mine .rk-step-who b, #scr-rank .rk-step.mine a.plink:not(.sup):not(.share),
#scr-rank .rk-row.mine .who b, #scr-rank .rk-row.mine a.plink:not(.sup):not(.share) { color: var(--rk-mine) !important; }

/* las placas (en todas partes donde sale el nombre: ranking, perfil de la sala, amigos) */
a.plink.sup, a.plink.share, #rk-sup .nmc {
  position: relative; overflow: hidden; display: inline-block; vertical-align: baseline; max-width: 100%;
  padding: 0 7px 1px; margin: 1px 0; border-radius: 6px; line-height: 1.4; border-bottom: 0 !important;
  background-clip: border-box !important; -webkit-background-clip: border-box !important; -webkit-text-fill-color: currentColor !important;
  filter: none !important; text-shadow: none; animation: none; }
a.plink.sup::after, a.plink.share::after, #rk-sup .nmc::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.75) 48%, rgba(255,255,255,.15) 54%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0; animation: plateShine 3.6s ease-in-out infinite; }
@keyframes plateShine { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
/* dorado */
#scr-rank a.plink.sup, a.plink.sup, #rk-sup .nmc.gold {
  color: #3b2600 !important; background: linear-gradient(180deg, #fff3b0 0%, #ffd23f 42%, #e9a514 100%) !important;
  box-shadow: inset 0 0 0 1px #9a6b00, inset 0 1px 0 1px rgba(255,255,255,.6), 0 0 10px rgba(255,196,40,.6), 0 2px 0 #7a5200; }
/* rojo */
#scr-rank a.plink.sup.red, a.plink.sup.red, #rk-sup .nmc.red {
  color: #ffffff !important; text-shadow: 0 1px 0 #6a0b14; background: linear-gradient(180deg, #ff8a8a 0%, #e8333f 45%, #b3162a 100%) !important;
  box-shadow: inset 0 0 0 1px #7a0d1a, inset 0 1px 0 1px rgba(255,255,255,.35), 0 0 10px rgba(255,70,90,.6), 0 2px 0 #6a0b14; }
/* plateado */
#scr-rank a.plink.sup.silver, a.plink.sup.silver, #rk-sup .nmc.silver {
  color: #0f2e48 !important; background: linear-gradient(180deg, #ffffff 0%, #d4f0ff 40%, #7cc4ec 100%) !important;
  box-shadow: inset 0 0 0 1px #3a86b8, inset 0 1px 0 1px #ffffff, 0 0 10px rgba(150,215,250,.75), 0 2px 0 #2c6890; }
#scr-rank a.plink.sup.silver::after, a.plink.sup.silver::after, #rk-sup .nmc.silver::after { animation-duration: 2.6s; }
/* shiny: arcoíris que se mueve, letra blanca con contorno y estrellita */
#scr-rank a.plink.sup.shiny, a.plink.sup.shiny, #rk-sup .nmc.shiny {
  color: #ffffff !important; padding-left: 18px;
  text-shadow: 1px 0 0 #2b1446, -1px 0 0 #2b1446, 0 1px 0 #2b1446, 0 -1px 0 #2b1446, 1px 1px 0 #2b1446;
  background: linear-gradient(90deg, #ff6fc8, #ffb84a, #ffe14d, #5fe08a, #4fc3ff, #9b7bff, #ff6fc8) !important; background-size: 300% 100% !important;
  box-shadow: inset 0 0 0 1px #3a1f5c, inset 0 1px 0 1px rgba(255,255,255,.45), 0 0 12px rgba(196,123,255,.75), 0 2px 0 #3a1f5c;
  animation: plateRainbow 3s linear infinite !important; }
#scr-rank a.plink.sup.shiny::before, a.plink.sup.shiny::before, #rk-sup .nmc.shiny::before {
  content: '✦'; position: absolute; left: 5px; top: 50%; transform: translateY(-52%); font-size: .85em; color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 2px #2b1446; animation: plateTwinkle 1.2s ease-in-out infinite; }
@keyframes plateRainbow { to { background-position: 300% 0; } }
@keyframes plateTwinkle { 50% { opacity: .35; transform: translateY(-52%) scale(.7); } }
/* compartidor: verde */
#scr-rank a.plink.share, a.plink.share {
  color: #0d3a14 !important; background: linear-gradient(180deg, #d4ffb8 0%, #8ee77a 45%, #4fbf4f 100%) !important;
  box-shadow: inset 0 0 0 1px #2c7a2c, 0 0 8px rgba(120,230,110,.5), 0 2px 0 #24662a; }
@media (prefers-reduced-motion: reduce) {
  a.plink.sup::after, a.plink.share::after, #rk-sup .nmc::after, #scr-rank a.plink.sup.shiny::before, a.plink.sup.shiny::before, #rk-sup .nmc.shiny::before { animation: none; }
  #scr-rank a.plink.sup.shiny, a.plink.sup.shiny, #rk-sup .nmc.shiny { animation: none !important; } }
/* en el podio la placa va centrada y un poco más grande */
#scr-rank .rk-step-who a.plink.sup, #scr-rank .rk-step-who a.plink.share { font-size: 1.05em; padding-top: 1px; }

/* el cartel de los rangos */
#rk-sup { background: linear-gradient(135deg, rgb(255 236 170 / .55), rgb(255 255 255 / .35) 45%, rgb(255 214 120 / .45)) !important;
  border: 0 !important; border-radius: 12px; padding: 10px 14px;
  box-shadow: inset 0 0 0 2px #c48a10, inset 0 0 0 4px rgb(255 255 255 / .55), inset 0 0 0 5px #c48a10, 0 0 16px rgba(255,190,40,.35) !important; }
#rk-sup .rk-sup-l > b { font-size: 16px; color: var(--rk-ink) !important; }
#rk-sup .rk-sup-l > b::before { content: '♥ '; color: #e8333f; }
#rk-sup .rk-tier { background: rgb(255 255 255 / .55) !important; border: 2px solid rgb(var(--lic-ink-rgb) / .22) !important; border-radius: 10px; align-items: center; gap: 4px; padding: 6px 6px 5px; }
#rk-sup .rk-tier .nmc { font-size: 15px; }
#rk-sup .rk-tier small { color: var(--rk-ink) !important; font-weight: 700; opacity: .8; }
#rk-sup .rk-sup-n { color: var(--rk-ink2) !important; }
html.theme-dark #rk-sup { background: linear-gradient(135deg, rgb(120 86 10 / .45), rgb(14 22 52 / .7) 45%, rgb(120 86 10 / .4)) !important;
  box-shadow: inset 0 0 0 2px #e2b13a, inset 0 0 0 4px rgb(255 255 255 / .1), inset 0 0 0 5px #e2b13a, 0 0 18px rgba(255,190,40,.3) !important; }
html.theme-dark #rk-sup .rk-tier { background: rgb(8 14 36 / .7) !important; border-color: rgb(226 177 58 / .35) !important; }
@media (orientation: landscape) and (max-height: 500px) {
  #rk-sup { padding: 5px 8px; } #rk-sup .rk-sup-l > b { font-size: 12px; }
  #rk-sup .rk-tier { padding: 3px 2px 2px; flex-direction: column; gap: 1px; min-width: 0; }
  #rk-sup .rk-tier .nmc { font-size: 10.5px; padding: 0 4px; } #rk-sup .rk-tier .nmc.shiny { padding-left: 13px; } #rk-sup .nmc.shiny::before { left: 3px; }
  #rk-sup .rk-tier small { font-size: 9px; } }

/* el podio: nivel y derrotados legibles sobre los bloques (antes Courier fino al 75 %) */
#scr-rank .rk-block small { font-family: 'Pixelify', 'Trebuchet MS', sans-serif; font-weight: 700; color: #2a2010 !important; opacity: .85; }
/* (30-10-2026) Perks sobre el papel: los textos de la ficha venían en colores claros pensados para el fondo azul de antes
   (.it-desc #d8e0ee, .it-evo #ffe9a8, .it-stats #9fd8ff, .it-ups, .it-mon) y casi no se leían. En el modo oscuro, como estaban. */
html:not(.theme-dark) #scr-items .it-desc { color: rgb(var(--lic-ink-rgb) / .78); }
html:not(.theme-dark) #scr-items .it-evo { color: #8a5a00; font-weight: 700; }
html:not(.theme-dark) #scr-items .it-stats { color: #2c519f; }
html:not(.theme-dark) #scr-items .it-stats b { color: #b3162a; }
html:not(.theme-dark) #scr-items .it-ups { color: rgb(var(--lic-ink-rgb) / .85); }
html:not(.theme-dark) #scr-items .it-mon { background: rgb(var(--lic-ink-rgb) / .08); color: var(--lic-ink); }
html:not(.theme-dark) #scr-items .it-mon.own { background: rgb(29 122 53 / .16); color: #1d5a2a; }

/* ---- (30-10-2026, lo pidió el dueño) «Nuevos rangos»: lista tenue debajo del compañero, en el menú (supporters.js, paintRecent).
   Fondo difuminado (azul noche que se desvanece hacia la derecha, con desenfoque del mapa de atrás) y cada fila con el halo de su
   rango, que también se desvanece; las más viejas, más tenues. Sólo en pantallas con sitio (alto ≥ 780 px): en las más bajas y
   en el celular apaisado no cabe debajo de la tarjeta y no sale. */
.menu-ranks { display: none; }
@media (min-height: 780px) and (min-width: 900px) {
  .menu-ranks:not(.hidden) { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 2px; width: min(320px, 90%); margin-top: 22px;
    padding: 12px 16px 12px 14px; opacity: .82; transition: opacity .25s; }
  /* el fondo, aparte y difuminado con una máscara: sin bordes, se funde con el mapa (las letras quedan nítidas) */
  .menu-ranks:not(.hidden)::before { content: ''; position: absolute; inset: -22px -34px -22px -26px; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 34% 42% at 22% 30%, rgba(255,214,120,.2), transparent),
      radial-gradient(ellipse 34% 40% at 72% 78%, rgba(196,140,255,.16), transparent),
      radial-gradient(farthest-side, rgba(10,20,48,.8) 0%, rgba(10,20,48,.72) 58%, rgba(10,20,48,.3) 82%, transparent 100%); }
  .menu-ranks:not(.hidden):hover { opacity: 1; }
}
.mrk-h { display: flex; align-items: center; gap: 5px; margin: 0 0 4px 2px; font-size: 12px; color: rgba(255,240,205,.78); text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.mrk-h img { width: 12px; height: 12px; }
.mrk-row { --c: 255 210 63; position: relative; display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 8px; text-decoration: none;
  color: #fff8e8; opacity: calc(1 - var(--i) * .11);
  background: linear-gradient(90deg, rgb(var(--c) / .34), rgb(var(--c) / .12) 55%, transparent 92%); }
.mrk-row:hover, .mrk-row:focus-visible { opacity: 1; background: linear-gradient(90deg, rgb(var(--c) / .5), rgb(var(--c) / .18) 60%, transparent 95%); outline: none; }
.mrk-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 8px rgb(var(--c) / .55); }
.mrk-row small { flex: none; font-size: 11px; color: rgb(var(--c)); opacity: .9; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.mrk-gem { flex: none; width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: rgb(var(--c)); box-shadow: 0 0 8px 2px rgb(var(--c) / .7); }
.mrk-row.t-red { --c: 255 92 104; }
.mrk-row.t-silver { --c: 150 215 250; }
.mrk-row.t-shiny { --c: 196 140 255; }
.mrk-row.t-shiny { background: linear-gradient(90deg, rgba(255,111,200,.34), rgba(255,225,77,.24) 25%, rgba(95,224,138,.2) 45%, rgba(79,195,255,.14) 65%, transparent 92%);
  background-size: 200% 100%; animation: mrkShine 6s linear infinite; }
.mrk-row.t-shiny .mrk-gem { background: linear-gradient(135deg, #ff6fc8, #ffe14d, #5fe08a, #4fc3ff); }
.mrk-row.t-shiny small { color: #f2c4ff; }
@keyframes mrkShine { 50% { background-position: 60% 0; } }
@media (prefers-reduced-motion: reduce) { .mrk-row.t-shiny { animation: none; } }

/* (30-10-2026) Pilar Celeste (js/systems/sky-pillar.js): Células de Zygarde en la barra de arriba y el cartel de la huida de Rayquaza */
.zc-pill img { width: 22px; height: auto; image-rendering: auto; }
.sky-pop .dd-box h2 { max-width: 30ch; margin-inline: auto; }
.sky-prize .dd-ic img { width: 40px; height: auto; image-rendering: auto; }
.sky-prize .dd-ic canvas, .sky-prize .dd-ic .egg-img { image-rendering: pixelated; }
/* (31-10-2026, lo pidió el dueño: «que queden las dos en el medio») el cartel de Rayquaza tiene 2 premios: 2 columnas centradas.
   Antes heredaba las 3 columnas del cartel de la Pokédex completa y quedaba un hueco a la derecha. */
.dd-prize.sky-prize { grid-template-columns: repeat(2, minmax(0, 230px)); justify-content: center; max-width: 100%; }
@media (max-width: 520px) { .dd-prize.sky-prize { grid-template-columns: minmax(0, 260px); } }

/* (31-10-2026, lo pidió un jugador: «las estrellas en el modo claro casi no se ven») Las estrellas de la PC con contorno marrón
   oscuro de 1 px por los cuatro lados (se leen sobre el papel claro y sobre el azul noche) y un poco más grandes; las vacías, con el
   color de la tinta. Antes: amarillo con un halo amarillo borroso (sobre el papel beige se perdía) y las vacías casi blancas. */
.pc-slotstars { font-size: 12px; letter-spacing: 0; color: #ffcf1f;
  text-shadow: 1px 0 0 #5a3500, -1px 0 0 #5a3500, 0 1px 0 #5a3500, 0 -1px 0 #5a3500, 1px 1px 0 #5a3500; }
.pc-stars i.on { color: #ffcf1f; text-shadow: 1px 0 0 #5a3500, -1px 0 0 #5a3500, 0 1px 0 #5a3500, 0 -1px 0 #5a3500; }
.pc-stars i { color: color-mix(in srgb, var(--ink, #283040) 28%, transparent); }
.pc-stars.max i.on, .pc-slotstars.max { filter: drop-shadow(1px 0 0 #3a2200) drop-shadow(-1px 0 0 #3a2200) drop-shadow(0 1px 0 #3a2200) drop-shadow(0 -1px 0 #3a2200); }

/* (31-10-2026, el dueño: «en el modo claro apenas se ve cuando tiene estrellas») Las estrellas de cada hueco de la PC van en una
   pastilla oscura (se ven igual sobre el papel claro y en el modo oscuro), un poco más grandes. Antes (de esta mañana): estrellas
   amarillas sueltas de 12 px con contorno de 1 px; las de 4 estrellas (holográficas) quedaban casi transparentes sobre el papel. */
.pc-slotstars { left: 50%; right: auto; bottom: 2px; transform: translateX(-50%); white-space: nowrap;
  padding: 1px 4px 2px 3px; border-radius: 7px; background: rgba(34, 22, 6, .86); box-shadow: 0 0 0 1px rgba(255, 210, 63, .55);
  font-size: 12px; line-height: 1; letter-spacing: -1px; color: #ffd23f; text-shadow: none; max-width: calc(100% - 4px); overflow: hidden; }
.pc-slotstars.max { background: rgba(34, 22, 6, .9);
  background-image: linear-gradient(110deg, #ff6b9a, #ffd23f, #6dff9c, #58d8ff, #b57bff, #ff6b9a, #ffd23f), linear-gradient(rgba(34, 22, 6, .9), rgba(34, 22, 6, .9));
  background-size: 300% 100%, 100% 100%; -webkit-background-clip: text, padding-box; background-clip: text, padding-box; color: transparent; filter: none; }

/* (31-10-2026, lo pidió el dueño con un dibujo) Ficha de la PC: arriba Info · EVs · IVs y, como pestañas de cuaderno en el borde
   derecho, «Estrellas» (amarilla) e «Impronta» (roja) (antes arriba Info · Estrellas · EVs, con EVs e IVs juntos) y la página «Impronta» con sus 3 ataques en notas pegadas con cinta (pc-ui.js impNotes).
   Sin pestañas (pantallas sin la ficha por páginas) no salen las de costado y las notas se ven debajo de todo. */
.pc-sidetabs { display: none; }
.pc-impnotes { display: flex; flex-direction: column; gap: 10px; margin: 10px 12px 0; color: #3a2e1a; text-shadow: none; }
.pc-imp-head { display: flex; flex-direction: column; gap: 2px; }
.pc-imp-head b { font-size: 15px; color: #c8302a; }
.pc-imp-head span { font-size: 12px; line-height: 1.35; color: #6a5a40; }
.pc-note { position: relative; padding: 14px 12px 10px; background: #fff3a6; border-radius: 2px 2px 10px 2px;
  box-shadow: 0 3px 6px rgba(60, 40, 10, .28), inset 0 -10px 14px -12px rgba(120, 90, 20, .35); transform: rotate(-1.2deg); }
.pc-note.n1 { transform: rotate(.9deg); background: #ffe0ef; }
.pc-note.n2 { transform: rotate(-.5deg); background: #dff3ff; }
.pc-note.leg { background: #fff0c2; box-shadow: 0 3px 6px rgba(60, 40, 10, .28), 0 0 0 2px #e0b030; }
.pc-note.mega { background: #fbe4ff; box-shadow: 0 3px 6px rgba(60, 40, 10, .28), 0 0 0 2px #c07ae8; }
.pc-note.none { background: #f3ecd8; }
.pc-tape { position: absolute; top: -7px; left: 50%; width: 54px; height: 15px; margin-left: -27px; transform: rotate(-3deg);
  background: rgba(255, 255, 255, .55); border-left: 1px dashed rgba(0, 0, 0, .08); border-right: 1px dashed rgba(0, 0, 0, .08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.pc-note-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-note-top b { font-size: 14px; color: #2a2232; }
.pc-note-k { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: #e0b030; color: #3a2400; }
.pc-note.mega .pc-note-k { background: linear-gradient(90deg, #ff7ad9, #b07bff, #6fd3ff); color: #2a0a3a; }
.pc-note-ty { margin: 4px 0 2px; }
.pc-note p { margin: 0; font-size: 12px; line-height: 1.4; color: #4a3e2a; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover),
       (max-height: 520px) and (min-width: 560px), (orientation: landscape) and (min-width: 560px) and (max-width: 999px) {
  #scr-pc .pc-detail .pc-tabs { grid-template-columns: repeat(3, 1fr); }
  #scr-pc .pc-detail { position: relative; padding-right: 26px !important; background-clip: padding-box; }
  #scr-pc .pc-detail .pc-sidetabs { display: block; position: sticky; top: 40px; height: 0; z-index: 3; order: -1; }
  #scr-pc .pc-sidetabs button { position: absolute; right: -26px; width: 26px; height: 92px; padding: 0; border: 0; cursor: pointer;
    writing-mode: vertical-rl; font: inherit; font-size: 11px; letter-spacing: .5px; color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
    border-radius: 0 8px 8px 0; box-shadow: 2px 2px 0 rgba(0, 0, 0, .18); filter: saturate(.75) brightness(.92); }
  #scr-pc .pc-sidetabs .pc-side-star { top: 0; background: #f2d400; color: #3a2e00; text-shadow: none; }
  #scr-pc .pc-sidetabs .pc-side-imp { top: 98px; background: #e3352c; }
  #scr-pc .pc-sidetabs button.on { filter: none; width: 28px; right: -28px; }
  #scr-pc .pc-sidetabs button:focus-visible { outline: 2px solid var(--gold, #ffd23f); outline-offset: -2px; }
  #scr-pc .pc-detail[data-pg="imp"] { --tbc: #e3352c; } #scr-pc .pc-detail[data-pg="star"] { --tbc: #d8b400; } #scr-pc .pc-detail[data-pg="iv"] { --tbc: #8a5ad8; }
  #scr-pc .pc-detail[data-pg="ev"] > .pc-ivs { display: none; }
  #scr-pc .pc-detail[data-pg="info"] > .pc-ivs { display: none; }   /* (31-10-2026, el dueño) los IVs sólo en su pestaña (antes también debajo de Info) */
  #scr-pc .pc-detail[data-pg="iv"] > :is(.pc-starbox, .pc-evs), #scr-pc .pc-detail[data-pg="iv"] .pc-pinfo { display: none; }
  #scr-pc .pc-detail:not([data-pg="imp"]) > .pc-impnotes { display: none; }
  #scr-pc .pc-detail[data-pg="imp"] > :is(.pc-starbox, .pc-evs, .pc-ivs), #scr-pc .pc-detail[data-pg="imp"] .pc-pinfo { display: none; }
  #scr-pc .pc-detail[data-pg="imp"] > .pc-impnotes { margin-bottom: 14px; }
}
@media (max-height: 520px) and (min-width: 560px), (orientation: landscape) and (min-width: 560px) and (max-width: 999px) {
  #scr-pc .pc-detail .pc-sidetabs { top: 32px; }
  #scr-pc .pc-sidetabs button { height: 74px; font-size: 10px; }
  #scr-pc .pc-sidetabs .pc-side-imp { top: 80px; }
  #scr-pc .pc-impnotes { margin: 8px 8px 0; gap: 8px; }
  .pc-note { padding: 12px 9px 8px; } .pc-note p { font-size: 11px; }
}

/* (31-10-2026) En la ficha de la PC las estrellas conseguidas salían del mismo color de tinta que las vacías (la regla de «el texto
   claro, en tinta» de arriba pisaba también i.on con !important): no se sabía cuántas tenía. Ahora: amarillas con contorno las que
   tiene y tinta muy suave las que le faltan. */
#scr-pc .pc-stars i:not(.on) { color: rgb(var(--lic-ink-rgb, 40 48 64) / .22) !important; text-shadow: none !important; }
#scr-pc .pc-stars i.on { color: #ffcf1f !important; text-shadow: 1px 0 0 #5a3500, -1px 0 0 #5a3500, 0 1px 0 #5a3500, 0 -1px 0 #5a3500 !important; }
#scr-pc .pc-stars.max i.on { color: transparent !important; text-shadow: none !important; }

/* (31-10-2026) PC, Impronta: recuadro con la animación del ataque al pasar el ratón por una nota (pc-ui.js MvPop). */
.pc-mvpop { position: fixed; z-index: 90; width: 240px; height: 180px; padding: 6px; border-radius: 10px; background: #1a2140;
  border: 3px solid #ffd23f; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); pointer-events: none; opacity: 0; transform: scale(.94);
  transition: opacity .15s, transform .15s; display: flex; flex-direction: column; gap: 4px; }
.pc-mvpop.vis { opacity: 1; transform: none; }
.pc-mvpop iframe { flex: 1; width: 100%; border: 0; border-radius: 6px; background: #2a3a2a; opacity: 0; transition: opacity .25s; }
.pc-mvpop.on iframe { opacity: 1; }
.pc-mvpop-n { font-size: 12px; color: #ffe27a; text-align: center; line-height: 1.1; }
.pc-note[data-mv] { cursor: help; }
.pc-note[data-mv]:hover, .pc-note[data-mv]:focus-visible { outline: 2px solid #ffd23f; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pc-mvpop { transition: none; } }
/* (31-10-2026) La barra de pestañas de la ficha, opaca: al desplazar la ficha (Impronta, IVs) el texto pasaba por debajo y se veía a
   través (antes, sólo el lavado semitransparente del tema). */
#scr-pc .pc-detail .pc-tabs { background: linear-gradient(rgb(var(--lic-wash) / .42), rgb(var(--lic-wash) / .42)), var(--lic-pap, #f4e7c9) !important; }

/* (31-10-2026, lo sugirió un jugador: «en el celular tengo que tocar cada opción para ver los detalles») En el celular todas las
   cartas de nivel enseñan ya su descripción y el botón Vetar; el primer toque sigue marcando la carta (y su animación) y el segundo
   la elige, para no elegir sin querer. Antes la descripción sólo salía en la carta tocada (.open). */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .cards.vcards .vcard .ds, .cards.vcards .vcard .veto-btn { display: block; }
}

/* (31-10-2026, lo pidió el dueño: «ponelo a la izquierda, debajo de Amigos») La lista de nuevos rangos va fija arriba a la izquierda,
   justo debajo del botón Amigos (.fr-burger, 14 px + 44 px de alto), y ya no debajo de la tarjeta del compañero. Antes: en el flujo de
   .menu-left (margin-top 22 px) y sólo con 780 px de alto o más. */
@media (min-width: 900px) and (min-height: 780px) {   /* (con menos alto se pisaba con el logo: como antes, no sale) */
  .menu-ranks:not(.hidden) { display: flex; flex-direction: column; gap: 2px; position: fixed; z-index: 39; isolation: isolate;
    left: max(14px, env(safe-area-inset-left)); top: calc(max(14px, env(safe-area-inset-top)) + 58px); width: 250px; margin: 0;
    padding: 10px 12px 10px 10px; opacity: .82; transition: opacity .25s; }
  .menu-ranks:not(.hidden)::before { content: ''; position: absolute; inset: -16px -30px -18px -14px; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 34% 42% at 22% 30%, rgba(255,214,120,.2), transparent),
      radial-gradient(ellipse 34% 40% at 72% 78%, rgba(196,140,255,.16), transparent),
      radial-gradient(farthest-side, rgba(10,20,48,.8) 0%, rgba(10,20,48,.72) 58%, rgba(10,20,48,.3) 82%, transparent 100%); }
  .menu-ranks:not(.hidden):hover { opacity: 1; }
  body:has(#fr-drawer:not(.hidden)) .menu-ranks, #scr-menu.covered .menu-ranks { visibility: hidden; }
}

/* (31-10-2026) Mejora de estrellas en su propio escenario en el centro de la pantalla (pc-ui.js fuse; antes encima de la ficha). */
.pc-fuse.pc-fuse-ov { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(6, 10, 26, .62); pointer-events: auto; }
.pc-fuse-stage { position: relative; border-radius: 18px; overflow: visible;
  background: radial-gradient(closest-side, rgba(255, 210, 63, .22), rgba(255, 210, 63, .06) 70%, transparent); }
.pc-fuse-big { position: absolute; image-rendering: pixelated; }
.pc-fuse-ov .pc-fuse-star { font-size: 48px; white-space: nowrap; }

/* (31-10-2026, lo pidió el dueño) Botón «Máx» a la derecha de cada «Comprar» en la Tienda de Mejoras:
 * compra de una vez todos los niveles que alcancen. Antes había sólo el botón de comprar de a un nivel. */
.mart-card .mc-buyrow { display: flex; gap: 4px; margin-top: 2px; min-width: 0; }
#scr-upgrades .mart-card .mc-buyrow .mc-buy { flex: 1 1 0; width: auto; min-width: 0; margin-top: 0; }
.mart-card .mc-max { flex: none; width: auto; margin-top: 0; padding: 6px 8px; font-size: 13px; border-width: 3px; background: #2f8f4e; position: static; }
#scr-upgrades .mart-card .mc-max { border-color: #0b1838; }
#scr-upgrades .mart-card .mc-max:disabled { background: #5a6078; color: #c8cede; text-shadow: none; }
@media (max-height: 860px) and (min-height: 521px) { #scr-upgrades .mart-card .mc-max { padding: 4px 7px; } }
@media (max-height: 520px) {
  #scr-upgrades .mart-card .mc-buyrow { gap: 3px; }
  #scr-upgrades .mart-card .mc-max { font-size: 11px; padding: 2px 5px; border-width: 2px; border-radius: 7px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
}
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-upgrades .mart-card { grid-template-columns: 210px minmax(0, 1fr) 150px 170px; }
  #scr-upgrades .mart-card .mc-buyrow { grid-area: b; margin: 0; }
  #scr-upgrades .mart-card .mc-max { padding: 3px 8px; font-size: 12px; border-width: 2px; }
}

/* (31-10-2026, lo pidió un jugador) «Reciclar repetidos»: especies protegidas (lista negra) o elegidas (lista blanca).
 * Antes el cartel sólo dejaba elegir rarezas y shiny. */
.rd-sp { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.rd-sph { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd-mode { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rd-mode .btn { padding: 3px 8px; font-size: 12px; }
.rd-mode .btn.on { background: var(--gold); color: #2a1a00; border-color: var(--gold); text-shadow: none; }
.pc-recdlg .rd-sphint { font-size: 12px; }
.rd-spclr { font: inherit; font-size: 12px; color: var(--gold); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.rd-spl { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; max-height: 168px; overflow-y: auto; padding: 2px; }
.rd-spc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 3px 2px 2px; border-radius: 8px; cursor: pointer;
  background: rgba(0,0,0,.25); border: 2px solid transparent; color: inherit; font: inherit; min-width: 0; }
.rd-spc:hover, .rd-spc:focus-visible { border-color: rgba(255,255,255,.35); outline: none; }
.rd-spc small { font-size: 10px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-spc > b { position: absolute; top: 1px; right: 4px; font-size: 11px; color: var(--gold); }
.rd-spc > i { position: absolute; top: 1px; left: 3px; line-height: 0; }
.rd-spc.lock { border-color: #5ab0ff; background: rgba(90,176,255,.16); }
.rd-spc.lock canvas, .rd-spc.dim canvas { opacity: .45; filter: grayscale(.6); }
.rd-spc.lock > b, .rd-spc.dim > b { color: var(--muted, #9aa8c8); text-decoration: line-through; }
.rd-spc.pick { border-color: #3fd07a; background: rgba(63,208,122,.16); }
.rd-spc.dim { opacity: .75; }
@media (orientation: landscape) and (max-height: 500px) {
  .pc-recdlg { max-height: calc(100dvh - 12px); }
  .pc-recdlg .rd-right { min-height: 0; }
  .rd-sp { flex: none; gap: 3px; }
  .pc-recdlg .rd-right { gap: 5px; }
  .pc-recdlg .rd-note { font-size: 10px; line-height: 1.25; }
  .pc-recdlg .rd-tot { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 5px 8px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
  .pc-recdlg .rd-tot > * { margin: 0; }
  .pc-recdlg .rd-tot .rd-sum { display: none; }
  .rd-mode .btn { padding: 2px 6px; font-size: 11px; }
  .pc-recdlg .rd-sphint { font-size: 10px; line-height: 1.25; }
  .rd-spl { max-height: 62px; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
  .rd-spc small { font-size: 9px; }
}
/* PC (pantallas anchas y altas): el cartel en dos columnas, las rarezas a la izquierda y las especies, lo que recibes y los
 * botones a la derecha (con la lista de especies ya no entraba de alto). Antes era una sola columna de 460 px. */
@media (min-width: 760px) and (min-height: 501px) {
  .pc-recdlg { width: min(900px, 100%); flex-direction: row; gap: 18px; max-height: calc(100dvh - 24px); }
  .pc-recdlg .rd-left { flex: 1 1 44%; }
  .pc-recdlg .rd-right { flex: 1 1 56%; min-height: 0; }
  .pc-recdlg .rd-btns { margin-top: auto; }
  .rd-spl { max-height: 240px; }
}

/* (31-10-2026, lo reportó un jugador: «en el celular, en los gimnasios se corta el botón para entrar») En celulares con muesca
 * los márgenes de seguridad (safe-area) se comen el ancho y la ficha del líder quedaba en ~150 px: el texto se partía en más
 * líneas y «Entrar solo» / «Con amigos» quedaban debajo del borde. Ahora el mapa descuenta esos márgenes, la ficha tiene sus
 * botones siempre abajo y a la vista (lo del medio se encoge y, si hace falta, se desplaza) y, si no entran lado a lado, uno
 * encima del otro. Antes: alto del mapa sin descontar la muesca y la barra sin tope de alto. */
@media (max-height: 520px), (orientation: landscape) and (hover: none) and (max-height: 700px) {
  #scr-gyms .gym-maphold { height: min(calc(100dvh - 76px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
    calc((100vw - 410px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) / var(--map-k, 1.16))); }
  #scr-gyms .gym-right { grid-template-rows: minmax(0, 1fr); }
  #scr-gyms .gym-bar { grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; overflow: hidden; align-content: stretch; }
  #scr-gyms .gym-bar .gym-info { align-self: stretch; align-content: safe center; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  #scr-gyms .gym-bar .gym-act .row { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
  #scr-gyms .gym-bar .gym-act .btn { padding-left: 2px; padding-right: 2px; overflow: hidden; text-overflow: ellipsis; }
}

/* (31-10-2026, segunda maqueta del dueño) Ficha de la PC: arriba Info · EVs/IVs · Estrellas, cada pestaña con su color (Info papel,
 * EVs/IVs azul, Estrellas amarilla); al costado sólo Impronta (roja). EVs e IVs en la misma página y los IVs sólo para ver (se
 * mejoran en la pantalla de IVs del menú). Antes: arriba Info · EVs · IVs y al costado Estrellas e Impronta. */
.iv-row.iv-ro { grid-template-columns: 1fr auto auto; grid-template-areas: "n v p" "bar bar bar"; }
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover),
       (max-height: 520px) and (min-width: 560px), (orientation: landscape) and (min-width: 560px) and (max-width: 999px) {
  #scr-pc .pc-detail[data-pg="ev"] > .pc-ivs { display: block; margin-top: 8px; }
  #scr-pc .pc-detail[data-pg="ev"] { --tbc: #4a7ae0; }
  #scr-pc .pc-detail[data-pg="star"] { --tbc: #f2d400; }
  #scr-pc .pc-tabs button.pc-tab-info { background: #f3ecd8; color: #2a3a6a; text-shadow: none; }
  #scr-pc .pc-tabs button.pc-tab-ev { background: #4a7ae0; color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .3); }
  #scr-pc .pc-tabs button.pc-tab-star { background: #f2d400; color: #3a2e00; text-shadow: none; }
  #scr-pc .pc-tabs button:not(.on) { filter: saturate(.7) brightness(.9); }
  #scr-pc .pc-tabs button.on { filter: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); font-weight: 700; }
  #scr-pc .pc-sidetabs .pc-side-imp { top: 0; }
}
#scr-pc .pc-tabs button.pc-tab-ev, #scr-pc .pc-tabs button.pc-tab-ev:not(.on) { color: #fff !important; }   /* (31-10-2026: blanco sobre el azul) */
@media (min-width: 1000px) and (min-height: 500px) and (hover: hover) {
  #scr-pc .pc-detail[data-pg="info"] > .pc-evs { display: none; }   /* (31-10-2026) los EVs, en su pestaña EVs/IVs (antes también debajo de Info) */
}

/* (01-11-2026, lo pidió el dueño: opción B) Rueda de carga de la Pokédex y de la PC: Pikachu corre en una rueda arriba de la
   rejilla, con el contador y una barra, mientras bajan los sprites de las casillas a la vista (ver G.UI.tick, ui.js).
   Antes cada casilla enseñaba una bolita gris. */
.load-wheel { position: absolute; left: 50%; transform: translateX(-50%); z-index: 6; display: none; align-items: center; gap: 12px;
  padding: 6px 16px 6px 8px; border-radius: 12px; background: rgba(10, 20, 48, .94); border: 2px solid #12161e;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45); pointer-events: none; color: #fff; font-size: 14px; white-space: nowrap; }
.load-wheel.on { display: flex; }
.load-wheel canvas { width: 92px; height: 80px; image-rendering: pixelated; flex: none; }
.load-wheel b { color: #ffd23f; }
.load-wheel .lw-p { height: 7px; width: 170px; border-radius: 4px; background: #0a1838; margin-top: 6px; overflow: hidden; }
.load-wheel .lw-p i { display: block; height: 100%; width: 0; background: #ffd23f; transition: width .2s; }
@media (min-width: 1100px) and (min-height: 700px) { .load-wheel canvas { width: 138px; height: 120px; } .load-wheel { font-size: 16px; } }
@media (max-height: 500px) { .load-wheel { font-size: 12px; gap: 8px; padding: 4px 12px 4px 6px; } .load-wheel canvas { width: 46px; height: 40px; } .load-wheel .lw-p { width: 110px; } }

/* ============ Laboratorio de impronta (02-11-2026, js/ui/lab-ui.js; lo eligió el dueño en «Laboratorio v2») ============
   Todo en un escenario 16:9 que mide con unidades cqw (se ve igual en PC y en el celular apaisado). */
/* (02-11-2026, lo pidió el dueño) Ventana más chica encima del menú (antes ocupaba toda la pantalla, fondo #050b1c); en el mega ataque
   el fondo de alrededor también se pone negro (.megaon). En celular apaisado sigue a pantalla completa (no hay sitio). */
#scr-lab { display: grid; place-items: center; background: rgba(3, 8, 18, .72); transition: background .4s; }
#scr-lab.megaon { background: #000; }
#scr-lab.megaon .lab-stage { box-shadow: none; }
#scr-lab.hidden { display: none; }
.lab-stage { position: relative; width: min(80vw, 1000px, calc(76dvh * 16 / 9)); border-radius: 14px; box-shadow: 0 0 0 3px #f2a65a, 0 18px 50px rgba(0,0,0,.6); aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; user-select: none;
  font-family: var(--font); color: #e9f0ff; background: linear-gradient(180deg, #0a1530 0%, #0d1d3d 58%, #071026 58.2%, #050b1c 100%); }
.lab-stage.shake { animation: lab-shake .45s; }
@keyframes lab-shake { 20% { transform: translate(-1%, .6%); } 40% { transform: translate(1%, -.6%); } 60% { transform: translate(-.6%, .4%); } 80% { transform: translate(.6%, -.2%); } }
.lab-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.lab-wall { position: absolute; inset: 0 0 42% 0; background:
  linear-gradient(90deg, transparent 0 24.6%, rgba(255,255,255,.05) 24.6% 25%, transparent 25% 74.6%, rgba(255,255,255,.05) 74.6% 75%, transparent 75%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 .15cqw, transparent .15cqw 6cqw); }
.lab-hazard { position: absolute; left: 0; right: 0; top: 58%; height: 1cqw; background: repeating-linear-gradient(45deg, #e0b21a 0 1.2cqw, #1b1b1b 1.2cqw 2.4cqw); opacity: .55; }
.lab-floor { position: absolute; left: 0; right: 0; top: 59%; bottom: 0; transform: perspective(40cqw) rotateX(35deg); transform-origin: top;
  background: repeating-linear-gradient(90deg, rgba(63,230,224,.07) 0 .15cqw, transparent .15cqw 5cqw), repeating-linear-gradient(0deg, rgba(63,230,224,.05) 0 .15cqw, transparent .15cqw 3cqw); }
.lab-pipe { position: absolute; border-radius: 1cqw; background: linear-gradient(180deg, #56657f, #2a3449 60%, #1b2335); }
.lab-pipe.h { height: 1.6cqw; } .lab-pipe.v { width: 1.6cqw; background: linear-gradient(90deg, #56657f, #2a3449 60%, #1b2335); }
.lab-joint { position: absolute; left: 0; top: 0; width: 2.6cqw; height: 2.6cqw; margin: -.5cqw; border-radius: .4cqw; background: linear-gradient(180deg, #8392ab, #3b4a63); box-shadow: inset 0 0 0 .2cqw #1b2335; }
.lab-joint.r { left: auto; right: -.5cqw; }
.lab-ekg { position: absolute; left: 33%; top: 44%; width: 9cqw; height: 5cqw; border-radius: .6cqw; background: #03121a; border: .35cqw solid #3b4a63; box-shadow: inset 0 0 1.5cqw rgba(63,230,224,.25); overflow: hidden; }
.lab-ekg svg { width: 100%; height: 100%; display: block; }
.lab-ekg polyline { stroke: #3fe6e0; stroke-width: 1.6; fill: none; stroke-dasharray: 160; stroke-dashoffset: 160; animation: lab-ekg 2.2s linear infinite; }
@keyframes lab-ekg { to { stroke-dashoffset: -160; } }
.lab-leds { position: absolute; left: 58%; top: 40%; display: flex; gap: .7cqw; }
.lab-leds i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #1d3a2a; box-shadow: inset 0 0 .2cqw #000; }
.lab-leds i.on { background: #5fe08a; box-shadow: 0 0 .8cqw #5fe08a; animation: lab-led 1.6s steps(1) infinite; }
.lab-leds i.on.r { background: #ff8a3d; box-shadow: 0 0 .8cqw #ff8a3d; animation-delay: .8s; }
@keyframes lab-led { 50% { opacity: .35; } }
.lab-back { position: absolute; left: 2.5%; bottom: 3%; z-index: 7; font-size: max(13px, 1.5cqw); }
/* -- la cápsula -- */
.lab-pod { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); width: 21cqw; height: 82%; z-index: 5; }
.lab-cap { position: absolute; left: -1.5cqw; right: -1.5cqw; top: 0; height: 10%; border-radius: 5cqw 5cqw 1cqw 1cqw;
  background: linear-gradient(180deg, #eef3f9, #8a9bb0 70%, #3b4a63); box-shadow: inset 0 -.4cqw 0 rgba(0,0,0,.25), 0 .3cqw 0 #1b2335; }
.lab-cap::before { content: ""; position: absolute; left: 50%; top: -1.6cqw; width: 3cqw; height: 2.2cqw; transform: translateX(-50%); border-radius: 1.5cqw 1.5cqw .3cqw .3cqw;
  background: radial-gradient(circle at 40% 35%, #ff9aa4, #d42c3c 60%, #7a1520); box-shadow: 0 0 1.2cqw rgba(255,95,109,.6); }
.lab-bolt { position: absolute; width: 1cqw; height: 1cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #7d8aa0); box-shadow: 0 .1cqw 0 #1b2335; }
.lab-mask { position: absolute; left: 50%; top: 9%; width: .5cqw; height: 8%; transform: translateX(-50%); background: linear-gradient(90deg, #8392ab, #3b4a63); z-index: 2; }
.lab-glass { position: absolute; left: 0; right: 0; top: 9%; bottom: 15%; border-radius: 1.5cqw; border: .55cqw solid #b9e3f0; overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06));
  box-shadow: inset 0 0 3cqw rgba(63,230,224,.45), 0 0 5cqw -1cqw rgba(63,230,224,.6); }
.lab-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: 88%; background: linear-gradient(180deg, rgba(90,245,235,.38), rgba(20,150,170,.55)); transition: background .5s; }
.lab-liquid.leg { background: linear-gradient(180deg, rgba(255,225,120,.45), rgba(190,130,20,.6)); }
.lab-liquid.mega { background: linear-gradient(180deg, rgba(255,140,225,.45), rgba(170,40,140,.6)); }
.lab-liquid::before { content: ""; position: absolute; left: -10%; right: -10%; top: -1.2cqw; height: 2.4cqw; border-radius: 50%; background: rgba(170,255,250,.35); animation: lab-wave 2.8s ease-in-out infinite; }
@keyframes lab-wave { 50% { transform: translateY(.4cqw) scaleX(1.04); } }
.lab-shine { position: absolute; top: 4%; bottom: 6%; width: 1.4cqw; border-radius: 2cqw; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.08)); z-index: 4; }
.lab-shine.a { left: 9%; } .lab-shine.b { left: 15%; width: .6cqw; opacity: .6; }
.lab-bub { position: absolute; bottom: 0; width: 1cqw; height: 1cqw; border-radius: 50%; border: .18cqw solid rgba(220,255,255,.75); animation: lab-bub linear infinite; z-index: 3; }
.lab-bub.s { width: .65cqw; height: .65cqw; }
@keyframes lab-bub { 0% { transform: translate(0,0); } 50% { transform: translate(.6cqw,-25cqw); } 100% { transform: translate(-.3cqw,-50cqw); opacity: 0; } }
.lab-mon { position: absolute; left: 50%; top: 10%; width: 17cqw; height: auto; transform: translateX(-50%); z-index: 3; image-rendering: pixelated;
  animation: lab-bob 3s ease-in-out infinite; filter: drop-shadow(0 0 1cqw rgba(160,255,250,.55)); }
@keyframes lab-bob { 50% { transform: translate(-50%, -.9cqw); } }
.lab-base { position: absolute; left: -2cqw; right: -2cqw; bottom: 0; height: 16%; border-radius: 1cqw 1cqw 2.5cqw 2.5cqw;
  background: linear-gradient(180deg, #a7b6ca, #5b6b86 55%, #323e55); box-shadow: inset 0 .3cqw 0 rgba(255,255,255,.35), 0 .8cqw 2cqw rgba(0,0,0,.6); }
.lab-read { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: 62%; height: 44%; border-radius: .4cqw; background: #03121a; border: .25cqw solid #263552;
  font-size: 1.4cqw; color: #3fe6e0; display: flex; align-items: center; justify-content: space-between; padding: 0 .8cqw; text-shadow: 0 0 .6cqw #3fe6e0; }
.lab-vent { position: absolute; bottom: 14%; width: 3cqw; height: 5cqw; opacity: .5; background: radial-gradient(ellipse at 50% 100%, rgba(220,240,255,.6), transparent 70%); animation: lab-steam 3.5s ease-out infinite; }
.lab-vent.l { left: -3.5cqw; } .lab-vent.r { right: -3.5cqw; animation-delay: 1.7s; }
@keyframes lab-steam { 0% { transform: translateY(0) scale(.6); opacity: 0; } 30% { opacity: .5; } 100% { transform: translateY(-6cqw) scale(1.4); opacity: 0; } }
.lab-plate { position: absolute; left: 50%; bottom: -.2cqw; transform: translate(-50%, 100%); display: flex; gap: 1cqw; align-items: center; font: inherit; font-size: 1.35cqw; color: #cbd6e6; cursor: pointer;
  background: linear-gradient(180deg, #3b4a63, #232d42); border: .2cqw solid #56657f; padding: .3cqw 1.2cqw; border-radius: .4cqw; white-space: nowrap; letter-spacing: .1cqw; }
.lab-plate b { color: #3fe6e0; font-weight: 600; }
.lab-plate:hover, .lab-plate:focus-visible { border-color: #3fe6e0; outline: none; }
/* -- ataques (izquierda) -- */
.lab-board { position: absolute; left: 2.5%; top: 8%; width: 28%; padding: 1.4cqw; border-radius: 1cqw; z-index: 6; display: grid; gap: 1cqw;
  background: linear-gradient(180deg, rgba(14,28,58,.92), rgba(8,16,36,.92)); border: .3cqw solid #2f4a80; box-shadow: inset 0 0 0 .2cqw #0a1430, 0 1cqw 2cqw rgba(0,0,0,.4); }
.lab-hd { display: flex; justify-content: space-between; align-items: center; font-size: 1.6cqw; color: #3fe6e0; border-bottom: .2cqw dashed #2f4a80; padding-bottom: .6cqw; }
.lab-hd i { font-style: normal; color: #9db0d6; font-size: 1.25cqw; }
.lab-slots { display: grid; gap: 1cqw; }
.lab-slot { position: relative; display: flex; gap: .9cqw; align-items: center; border-radius: .7cqw; padding: .6cqw .9cqw; background: rgba(6,12,30,.9);
  border: .22cqw solid color-mix(in srgb, var(--c, #4b9bff) 70%, transparent); }
.lab-slot > :first-child { width: 2.6cqw !important; height: 2.6cqw !important; flex: none; }
.lab-slot span { display: grid; gap: .1cqw; min-width: 0; }
.lab-slot b { font-size: 1.7cqw; font-weight: 600; line-height: 1.05; }
.lab-slot small { font-size: 1.15cqw; color: var(--c); }
.lab-slot.leg { background: linear-gradient(100deg, rgba(255,210,63,.22), rgba(6,12,30,.9) 70%); }
.lab-slot.mega { background: linear-gradient(100deg, rgba(255,95,210,.22), rgba(6,12,30,.9) 70%); }
.lab-slot.leg::after, .lab-slot.mega::after { content: "★"; position: absolute; right: .8cqw; top: .4cqw; font-size: 1.5cqw; color: var(--c); text-shadow: 0 0 .8cqw var(--c); }
.lab-slot.new { animation: lab-new .9s ease-out; }
@keyframes lab-new { 0% { transform: scale(1.12); box-shadow: 0 0 2.5cqw var(--c); } 100% { transform: scale(1); } }
.lab-none { margin: 0; font-size: 1.35cqw; color: #9db0d6; line-height: 1.35; }
/* -- tubos, seguro, botón y probabilidades (derecha) -- */
.lab-side { position: absolute; right: 2.5%; top: 6%; width: 25%; display: grid; gap: 1.3cqw; z-index: 6; }
.lab-stock, .lab-pity, .lab-odds { border-radius: 1cqw; background: rgba(8,16,36,.9); border: .3cqw solid #2f4a80; }
.lab-stock { display: flex; align-items: center; justify-content: space-between; padding: .9cqw 1.2cqw; }
.lab-rack { display: flex; gap: .3cqw; } .lab-rack img { width: 2.6cqw; transform: rotate(-12deg); }
.lab-stock b { font-size: 2.5cqw; }
.lab-pity { padding: .9cqw 1.2cqw; display: grid; gap: .6cqw; font-size: 1.3cqw; }
.lab-pity .t { display: flex; justify-content: space-between; } .lab-pity .t span:last-child { color: #ffd23f; }
.lab-pity .vial { position: relative; height: 2cqw; border-radius: 1cqw; background: rgba(255,255,255,.08); border: .2cqw solid #56657f; overflow: hidden; }
.lab-pity .vial i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #ffe78a, #e0a21e); box-shadow: 0 0 1cqw rgba(255,210,63,.6); transition: width .6s; }
.lab-use { font: inherit; font-size: 2.2cqw; font-weight: 700; padding: 1.1cqw 1.4cqw; border-radius: 1cqw; cursor: pointer; color: #04262a; border: 0; display: flex; gap: 1cqw; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #8ffcf3, #2cc6c9 55%, #14969c); box-shadow: 0 .55cqw 0 #0b5d63, 0 0 2.5cqw rgba(63,230,224,.45); }
.lab-use img { width: 3cqw; transform: rotate(-20deg); }
.lab-use:active { transform: translateY(.4cqw); box-shadow: 0 .15cqw 0 #0b5d63; }
.lab-use[disabled] { filter: grayscale(1) brightness(.7); cursor: default; transform: none; }
.lab-use:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
.lab-hint { font-size: 1.15cqw; color: #9db0d6; text-align: center; line-height: 1.3; }
.lab-odds { padding: .8cqw 1.2cqw; display: grid; gap: .4cqw; font-size: 1.25cqw; }
.lab-odds .hd { font-size: 1.1cqw; color: #9db0d6; }
.lab-odds div { display: flex; align-items: center; gap: .7cqw; }
.lab-odds div i { width: 1.1cqw; height: 1.1cqw; transform: rotate(45deg); border-radius: .2cqw; background: var(--c); }
.lab-odds div b { margin-left: auto; font-weight: 600; color: var(--c); font-variant-numeric: tabular-nums; }
/* -- la tragaperras (encima) -- */
.lab-sm { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(3,6,16,.72); opacity: 0; pointer-events: none; transition: opacity .3s; }
.lab-sm.open { opacity: 1; pointer-events: auto; }
.lab-cab { position: relative; width: 66cqw; padding: 1.4cqw 1.6cqw 1.6cqw; border-radius: 2.2cqw 2.2cqw 1.6cqw 1.6cqw; transform: translateY(4cqw) scale(.94); transition: transform .45s cubic-bezier(.2,1.4,.4,1);
  background: linear-gradient(180deg, #3c2a66 0%, #24183f 100%); box-shadow: inset 0 0 0 .4cqw #6d55a8, inset 0 0 0 .8cqw #1a1030, 0 2cqw 5cqw rgba(0,0,0,.7); }
.lab-sm.open .lab-cab { transform: none; }
.lab-marq { position: relative; margin: -.2cqw .6cqw 1.2cqw; padding: .8cqw 0; border-radius: 1.4cqw; text-align: center; font-size: 3cqw; font-weight: 700; letter-spacing: .4cqw; color: #fff3c8;
  background: linear-gradient(180deg, #5a2c12, #2b1408); box-shadow: inset 0 0 0 .3cqw #c98a2e, inset 0 0 2cqw rgba(0,0,0,.6); text-shadow: 0 0 1cqw rgba(255,190,90,.7); }
.lab-bulbs { position: absolute; left: 1.4cqw; right: 1.4cqw; display: flex; justify-content: space-between; }
.lab-bulbs.t { top: -.6cqw; } .lab-bulbs.b { bottom: -.6cqw; }
.lab-bulbs i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #7a5a2a; box-shadow: inset 0 0 .3cqw rgba(0,0,0,.6); }
.lab-cab.spin .lab-bulbs i { animation: lab-chase 1.2s linear infinite; }
.lab-cab.spin .lab-bulbs i:nth-child(4n+2) { animation-delay: .3s; } .lab-cab.spin .lab-bulbs i:nth-child(4n+3) { animation-delay: .6s; } .lab-cab.spin .lab-bulbs i:nth-child(4n) { animation-delay: .9s; }
@keyframes lab-chase { 0%, 70%, 100% { background: #7a5a2a; box-shadow: inset 0 0 .3cqw rgba(0,0,0,.6); } 15% { background: #ffe7a8; box-shadow: 0 0 .9cqw rgba(255,220,140,.8); } }
.lab-cab.win .lab-bulbs i { background: #ffe7a8; box-shadow: 0 0 1cqw rgba(255,220,140,.9); animation: none; }
.lab-cab.winmega .lab-bulbs i { background: #ffc2ef; box-shadow: 0 0 1cqw rgba(255,95,210,.9); animation: none; }
.lab-panel { display: grid; grid-template-columns: 1fr 6cqw; gap: 1.4cqw; align-items: center; }
.lab-reels { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; padding: 1cqw; border-radius: 1.2cqw; background: linear-gradient(180deg, #d9dee8, #8a96ab); box-shadow: inset 0 0 0 .3cqw #4a5570; }
.lab-reels::after { content: ""; position: absolute; inset: 1cqw; border-radius: .8cqw; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 35%); }
.lab-pay { position: absolute; top: 50%; width: 0; height: 0; border-top: 1.2cqw solid transparent; border-bottom: 1.2cqw solid transparent; transform: translateY(-50%); z-index: 2; }
.lab-pay.l { left: -.3cqw; border-left: 1.6cqw solid #ff5f6d; } .lab-pay.r { right: -.3cqw; border-right: 1.6cqw solid #ff5f6d; }
.lab-reel { position: relative; height: 20cqw; overflow: hidden; border-radius: .8cqw; background: linear-gradient(180deg, #05040c, #16102a 50%, #05040c); }
.lab-reel::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.75), transparent 30%, transparent 70%, rgba(0,0,0,.75)); }
.lab-reel .strip { position: absolute; left: 0; right: 0; top: 0; display: grid; }
.lab-reel .cell { height: 6.667cqw; display: grid; grid-template-columns: 2.2cqw 1fr; gap: .6cqw; align-items: center; padding: 0 .8cqw; font-size: 1.7cqw; line-height: 1; color: #f2f5ff; }
.lab-reel .cell i { width: 1.7cqw; height: 1.7cqw; transform: rotate(45deg); border-radius: .25cqw; background: var(--c); box-shadow: 0 0 .6cqw var(--c); }
.lab-reel .cell.leg { color: #ffd23f; } .lab-reel .cell.mega { color: #ff5fd2; }
.lab-reel .line { position: absolute; left: 0; right: 0; top: 6.667cqw; height: 6.667cqw; border-top: .2cqw solid rgba(255,95,109,.55); border-bottom: .2cqw solid rgba(255,95,109,.55); z-index: 3; pointer-events: none; }
.lab-reel.hit { box-shadow: 0 0 0 .35cqw var(--c), 0 0 2.5cqw var(--c); }
.lab-lever { position: relative; height: 20cqw; display: grid; justify-items: center; }
.lab-lever .shaft { position: absolute; top: 2cqw; bottom: 4cqw; width: 1.2cqw; border-radius: .6cqw; background: linear-gradient(90deg, #eef3f9, #8a9bb0); transform-origin: bottom center; transition: transform .35s cubic-bezier(.5,0,.5,1.6); }
.lab-lever .knob { position: absolute; top: -1.6cqw; left: 50%; width: 4.4cqw; height: 4.4cqw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9aa4, #d42c3c 55%, #6d121b); box-shadow: 0 .4cqw 0 #3a0a10; }
.lab-lever .boxl { position: absolute; bottom: 0; width: 5cqw; height: 5cqw; border-radius: 1cqw; background: linear-gradient(180deg, #8a9bb0, #3b4a63); }
.lab-cab.pull .lab-lever .shaft { transform: scaleY(-.55); }
.lab-tray { margin-top: 1.2cqw; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.4cqw; }
.lab-tray .lab-coin { display: flex; align-items: center; gap: .8cqw; font-size: 1.4cqw; color: #cbb8ff; }
.lab-tray .lab-coin span { display: inline-block; width: 6cqw; height: 1.2cqw; border-radius: .6cqw; background: #0a0618; box-shadow: inset 0 .3cqw .4cqw #000, 0 0 0 .2cqw #6d55a8; }
.lab-tray .p2 { font-size: 1.45cqw; color: #ffd23f; text-align: center; }
.lab-tray .btns { display: flex; gap: 1cqw; }
.lab-tray .take { opacity: 0; pointer-events: none; transition: opacity .3s; white-space: nowrap; font: inherit; font-size: 1.6cqw; font-weight: 700; padding: .8cqw 1.4cqw; border-radius: .8cqw; background: #ffd23f; color: #2a2205; border: 0; cursor: pointer; }
.lab-tray .take.on { opacity: 1; pointer-events: auto; }
.lab-tray .again { background: linear-gradient(180deg, #8ffcf3, #2cc6c9 55%, #14969c); color: #04262a; display: flex; align-items: center; gap: .6cqw; }
.lab-tray .again img { width: 2.2cqw; transform: rotate(-20deg); }
.lab-tray .take:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* legendario: rayos dorados girando detrás de la máquina, focos parpadeando rápido, destello blanco y cartel */
.lab-rays { position: absolute; left: 50%; top: 50%; width: 150cqw; height: 150cqw; border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.2);
  background: repeating-conic-gradient(from 0deg, rgba(255,215,90,.55) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 8%, transparent 60%); mask: radial-gradient(circle, #000 8%, transparent 60%); transition: opacity .4s; }
.lab-sm.legwin .lab-rays { opacity: 1; animation: lab-rays 7s linear infinite; }
@keyframes lab-rays { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.lab-sm.legwin .lab-cab { box-shadow: inset 0 0 0 .4cqw #ffe28a, inset 0 0 0 .8cqw #1a1030, 0 0 7cqw rgba(255,210,63,.85); }
.lab-sm.legwin .lab-bulbs i { animation: lab-legb .16s steps(2) infinite !important; }
.lab-sm.legwin .lab-bulbs i:nth-child(2n) { animation-delay: .08s !important; }
@keyframes lab-legb { 0% { background: #fff6c8; box-shadow: 0 0 1.6cqw #ffd23f; } 50% { background: #ffb020; box-shadow: 0 0 .5cqw #ff9a3d; } }
.lab-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 59; }
.lab-flash.go { animation: lab-flash .7s ease-out; }
@keyframes lab-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
.lab-banner { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%) scale(0); font-size: 6.5cqw; font-weight: 700; color: #ffd23f; text-shadow: 0 .5cqw 0 #6b4a12, 0 0 3cqw #ffd23f; z-index: 58; white-space: nowrap; pointer-events: none; }
.lab-banner.show { animation: lab-pop 1.8s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes lab-pop { 0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); } 25% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); } 40%, 80% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
/* mega ataque: todo a negro y «MEGA ATAQUE» letra a letra, rayos, onda expansiva y el nombre del ataque */
.lab-mega { position: absolute; inset: 0; z-index: 57; display: grid; place-items: center; align-content: center; gap: 1.6cqw; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s; }
.lab-mega.on { opacity: 1; }
.lab-mega .glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(255,95,210,.4), rgba(90,30,200,.15) 40%, transparent 65%); opacity: 0; }
.lab-mega.on .glow { animation: lab-mpulse .45s ease-in-out .5s 6 alternate; }
@keyframes lab-mpulse { to { opacity: 1; } }
.lab-mega .mtxt { position: relative; font-weight: 700; font-size: 9.5cqw; letter-spacing: .5cqw; display: flex; white-space: nowrap; }
.lab-mega .mtxt span { display: inline-block; opacity: 0; transform: scale(3.2); color: #ffd6f4; text-shadow: 0 0 1.2cqw #ff5fd2, 0 0 4cqw #ff5fd2, 0 0 8cqw #8a2be2, 0 .6cqw 0 #5a0d46; }
.lab-mega.on .mtxt span { animation: lab-slam .32s cubic-bezier(.2,1.7,.4,1) forwards; }
@keyframes lab-slam { to { opacity: 1; transform: scale(1); } }
.lab-mega .mname { position: relative; font-size: 3.2cqw; color: #ff9fe6; letter-spacing: .3cqw; opacity: 0; transform: translateY(1cqw); transition: opacity .4s 1.1s, transform .4s 1.1s; }
.lab-mega.on .mname { opacity: 1; transform: none; }
.lab-mega .ring { position: absolute; left: 50%; top: 50%; width: 10cqw; height: 10cqw; border-radius: 50%; border: .8cqw solid #ff5fd2; box-shadow: 0 0 3cqw #ff5fd2; transform: translate(-50%, -50%) scale(0); opacity: 0; }
.lab-mega.on .ring { animation: lab-ring 1.1s .85s ease-out; }
.lab-mega.on .ring.r2 { animation-delay: 1.15s; border-color: #a77bff; }
@keyframes lab-ring { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(13); } }
.lab-mega svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.lab-mega svg polyline { fill: none; stroke: #ffb3ef; stroke-width: 1.2; } .lab-mega svg polyline + polyline { stroke: #c9a6ff; }
.lab-mega.on svg { animation: lab-zap 1.8s steps(1) .6s; }
@keyframes lab-zap { 0%, 8% { opacity: 1; } 9%, 30% { opacity: 0; } 31%, 36% { opacity: 1; } 37%, 100% { opacity: 0; } }
/* elegir Pokémon */
.lab-picker { position: absolute; inset: 0; z-index: 55; display: grid; place-items: center; background: rgba(3,6,16,.8); }
.lab-picker[hidden] { display: none; }
/* (02-11-2026, bug que avisaron jugadores: la última fila quedaba cortada abajo) En columna flex la lista sí respeta el max-height
   de la caja y se desplaza; antes era grid con «auto 1fr», que crecía con la lista y se salía de la ventana. */
.lab-pbox { width: min(70cqw, 94%); max-height: 86%; display: flex; flex-direction: column; gap: 1cqw; padding: 1.4cqw; border-radius: 1.2cqw; background: #0e1a38; border: .3cqw solid #2f4a80; box-sizing: border-box; overflow: hidden; }
.lab-pbox > .lab-ph, .lab-pbox > .lab-pfil { flex: none; }
.lab-pbox > .lab-plist { flex: 1 1 auto; padding-bottom: .6cqw; }
/* (02-11-2026) Filtros del selector, como en la PC */
.lab-pfil { display: flex; gap: .8cqw; flex-wrap: wrap; }
.lab-pfil select { flex: 1 1 0; min-width: 0; font: inherit; font-size: max(12px, 1.3cqw); padding: .4cqw .7cqw; border-radius: .6cqw; border: .2cqw solid #2f4a80; background: #06102a; color: #e9f0ff; }
.lab-pmon .lab-pev { color: #9fb1c9; } .lab-pmon .lab-pev i { font-style: normal; color: #ffd23f; }
.lab-ph { display: flex; gap: 1cqw; align-items: center; } .lab-ph b { font-size: max(14px, 1.8cqw); white-space: nowrap; }
.lab-ph input { flex: 1; min-width: 0; font: inherit; font-size: max(14px, 1.5cqw); padding: .5cqw .9cqw; border-radius: .6cqw; border: .2cqw solid #2f4a80; background: #06102a; color: #e9f0ff; }
.lab-plist { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(150px, 15cqw), 1fr)); gap: .8cqw; align-content: start; min-height: 0; }
.lab-pmon { display: flex; gap: .7cqw; align-items: center; text-align: left; font: inherit; color: inherit; padding: .5cqw .7cqw; border-radius: .7cqw; border: .2cqw solid #2f4a80; background: rgba(6,12,30,.9); cursor: pointer; }
.lab-pmon.on, .lab-pmon:hover, .lab-pmon:focus-visible { border-color: #3fe6e0; outline: none; }
.lab-pmon canvas { flex: none; image-rendering: pixelated; }
.lab-pmon span { display: grid; min-width: 0; } .lab-pmon b { font-size: max(13px, 1.4cqw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-pmon small { font-size: max(11px, 1.1cqw); color: #9db0d6; }
/* la pestaña verde del menú (la coloca lab-ui.js placeTab junto al borde derecho del panel) */
.menu-labtab { position: fixed; z-index: 20; width: 30px; padding: 14px 0; border: 0; border-radius: 0 9px 9px 0; cursor: pointer; display: grid; justify-items: center; gap: 6px;
  background: linear-gradient(90deg, #f2a65a, #ffd3a0); color: #5a2a08; font: inherit; font-size: 13px; letter-spacing: .5px; text-shadow: 0 1px 0 rgba(255,255,255,.45); box-shadow: 2px 2px 0 rgba(0,0,0,.25); }   /* (02-11-2026: naranja crema; antes verde #1f9a52 → #2fc06a) */
.menu-labtab span { writing-mode: vertical-rl; }
.menu-labtab i { font-style: normal; font-size: 11px; min-width: 20px; padding: 1px 4px; border-radius: 9px; background: #b8571a; color: #fff; text-shadow: none; }   /* (02-11-2026: antes #0e5a2e) */
.menu-labtab i:empty { display: none; }
/* (02-11-2026, lo eligió el dueño: «Asomarse» de Animaciones.html, rellenando el hueco con el color de la nota) Al pasar el mouse la nota
   sale 8 px con un rebote; ::before es una franja de su color que va del panel a la nota (--gap: el hueco que ya había, lo pone
   placeTab) y crece con ella, así nunca se ve el mapa entre las dos. Antes: sólo filter: brightness(1.12). */
.menu-labtab { --tab-c: #f2a65a; transition: transform .28s cubic-bezier(.3, 1.6, .5, 1), box-shadow .28s, filter .2s; }
.menu-labtab::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: calc(var(--gap, 0px) + 6px); background: var(--tab-c); transition: width .28s cubic-bezier(.3, 1.6, .5, 1); }   /* (+6 px: se mete un poco bajo el borde del panel, así nunca queda una raya entre la nota y la página) */
.menu-labtab:hover, .menu-labtab:focus-visible { filter: brightness(1.06); outline: none; transform: translateX(8px); box-shadow: 5px 4px 0 rgba(0,0,0,.25); }
.menu-labtab:hover::before, .menu-labtab:focus-visible::before { width: calc(var(--gap, 0px) + 14px); }
@media (prefers-reduced-motion: reduce) { .menu-labtab, .menu-labtab::before { transition: none; } }
#scr-menu.hidden .menu-labtab, #scr-menu.covered .menu-labtab { display: none; }
@media (prefers-reduced-motion: reduce) { .lab-bub, .lab-vent, .lab-ekg polyline, .lab-mon, .lab-liquid::before, .lab-leds i.on { animation: none; } }

/* (02-11-2026) Premio por unirse al Discord (net/discord-gift.js): 🎁 en el botón mientras no lo cobraste y su cartel. */
#topbar .btn.tb-round.dc-gift { position: relative; overflow: visible; box-shadow: 0 0 0 2px #ffd23f, 0 0 12px rgba(255, 210, 63, .55); }
#topbar .btn.tb-round.dc-gift::after { content: '🎁'; position: absolute; right: -6px; top: -8px; font-size: 15px; line-height: 1; animation: dcBob 1.6s ease-in-out infinite; }
@keyframes dcBob { 50% { transform: translateY(-3px) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { #topbar .btn.tb-round.dc-gift::after { animation: none; } }
.dc-box { width: min(460px, 94vw); display: flex; flex-direction: column; gap: 10px; }
.dc-box h3 { margin: 0; }
.dc-eggs { display: flex; justify-content: center; gap: 18px; }
.dc-egg { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dc-egg b { font-size: 16px; } .dc-egg small { color: var(--rc); font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.dc-sub { margin: 0; text-align: center; }
.dc-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.dc-steps .btn { margin-left: 6px; }
.dc-form { gap: 8px; } .dc-form input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 16px; }
.dc-msg { margin: 0; min-height: 1.2em; font-size: 14px; } .dc-msg.bad { color: #d23a3a; }
.dc-btns { justify-content: flex-end; }
/* (02-11-2026) «Reciclar repetidos» por regiones: botones que se marcan (como las rarezas), con cuántos repetidos hay en cada una. */
.rd-regh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; }
.rd-regs { display: flex; flex-wrap: wrap; gap: 5px; }
.rd-reg { font: inherit; font-size: 13px; padding: 4px 9px; border-radius: 999px; border: 2px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: inherit; cursor: pointer; }
.rd-reg b { opacity: .8; margin-left: 2px; }
.rd-reg.on { border-color: var(--gold); background: rgba(255,210,63,.16); }
.rd-reg.off:not(.on) { opacity: .45; }
@media (orientation: landscape) and (max-height: 500px) { .rd-reg { font-size: 11px; padding: 2px 7px; } .rd-regs { gap: 3px; } }
@media (orientation: landscape) and (max-height: 500px) { .lab-stage { width: min(100vw, calc(100dvh * 16 / 9)); border-radius: 0; box-shadow: none; } }   /* (02-11-2026) celular: entera */
/* (02-11-2026) Ranking: tocar una fila o un escalón abre su build (ui/build-ui.js). */
.rk-click { cursor: pointer; }
.rk-row.rk-click:hover { filter: brightness(1.04); box-shadow: inset 0 0 0 2px rgba(255,210,63,.55); }
.rk-step.rk-click:hover .rk-block { filter: brightness(1.06); }
.bd-box { width: min(620px, 100%); max-height: calc(100dvh - 24px); overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
  border-radius: 14px; background: linear-gradient(180deg, #1b2750, #121a38); color: #eaf2ff; border: 3px solid #ffd23f; box-shadow: 0 16px 40px rgba(0,0,0,.55); text-align: left; }
.bd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bd-top h3 { margin: 0; font-size: 20px; color: #ffd23f; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-box .sub { color: #b9cbf0; }
.bd-wait { margin: 18px 0; text-align: center; }
.bd-spr { width: 84px; height: 74px; }
.bd-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.bd-chip { padding: 5px 8px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(185,203,240,.18); }
.bd-chip small { display: block; font-size: 10px; text-transform: uppercase; color: #b9cbf0; }
.bd-chip b { font-size: 15px; } .bd-chip.gold { border-color: #ffd23f; } .bd-chip.gold b { color: #ffd23f; }
.bd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.bd-cols h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; color: #ffd23f; }
.bd-stats { width: 100%; border-collapse: collapse; font-size: 13px; }
.bd-stats th { font-size: 11px; color: #b9cbf0; text-align: left; padding: 2px 4px; } .bd-stats td { padding: 2px 4px; border-bottom: 1px solid rgba(244,248,255,.06); }
.bd-stats small.up { color: #a8f0b8; } .bd-stats small.down { color: #ffb0b0; }
.bd-foot { margin: 8px 0 0; font-size: 11px; }
@media (max-width: 560px), (orientation: landscape) and (max-height: 500px) { .bd-cols { grid-template-columns: 1fr; } .bd-box { padding: 10px; } }
/* (02-11-2026) Laboratorio: confirmación antes de tirar si tiene impronta legendaria o mega (lab-ui.js ask) */
.lab-askbox { grid-template-rows: none; display: flex; flex-direction: column; gap: 1cqw; width: min(52cqw, 94%); text-align: left; }
.lab-askbox b { font-size: max(15px, 2cqw); color: #ffd23f; } .lab-askbox p { margin: 0; font-size: max(13px, 1.4cqw); color: #c9d6f2; }
.lab-asklist { display: grid; gap: .6cqw; }
.lab-askmv { display: flex; align-items: center; gap: .8cqw; padding: .5cqw .8cqw; border-radius: .7cqw; background: rgba(6,16,42,.8); border: .2cqw solid #ffd23f; }
.lab-askmv.mega { border-color: #ff7ad9; } .lab-askmv b { font-size: max(14px, 1.5cqw); flex: 1; min-width: 0; }
.lab-askmv em { font-style: normal; font-size: max(12px, 1.2cqw); padding: .1cqw .6cqw; border-radius: .5cqw; background: #ffd23f; color: #2a1c00; }
.lab-askmv.mega em { background: linear-gradient(90deg, #ff7ad9, #b07bff, #6fd3ff); color: #1a0d2a; }
.lab-askbtns { display: flex; gap: 1cqw; justify-content: flex-end; flex-wrap: wrap; }

/* ============ Mercado (02-11-2026) ============
 * «Bolsa Pokémon» (ver js/ui/market-ui.js): tabla + detalle (maqueta C elegida por el dueño). (02-11-2026, lo pidió el dueño) Con la
 * estética de cartas del resto del juego: hoja crema con doble filete de tinta, título en la banda azul con Poké Ball, filas como
 * cartas, campos subrayados y botones de tinta. Antes: ventana azul marino con título verde #6ef0b0 y pestaña azul.
 * La pestaña azul del menú (#menu-market) usa también .menu-labtab (colocación y ocultar con el menú cubierto). */
.menu-labtab.menu-mktab { --tab-c: #5cc4f0; background: linear-gradient(90deg, #5cc4f0, #bfeaff); color: #0d3a5a; text-shadow: 0 1px 0 rgba(255,255,255,.45); }   /* (02-11-2026, lo pidió el dueño: celeste, como la del Laboratorio en naranja crema; antes papel crema con borde de tinta) */
.menu-labtab.menu-mktab i { background: #1a6fa8; color: #fff; }
#scr-market { display: grid; place-items: center; background: rgba(3, 8, 18, .62); padding: 12px; }
#scr-market.hidden { display: none; }
@media (min-height: 521px) { #scr-market { padding-top: 66px; } #scr-market .mk-win { height: min(640px, calc(100vh - 78px)); height: min(640px, calc(100dvh - 78px)); } }   /* empieza debajo de la barra superior, como las demás */
#scr-market .mk-win { position: relative; width: min(1080px, 95vw); height: min(640px, 93vh); height: min(640px, 93dvh); display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; box-sizing: border-box; border-radius: 14px; overflow: hidden;
  background: var(--lic-paper); color: var(--lic-ink); border: 0; box-shadow: inset 0 0 0 7px var(--lic-pap), inset 0 0 0 9px var(--lic-ink), inset 0 0 0 12px var(--lic-pap), inset 0 0 0 13px rgb(var(--lic-ink-rgb) / .4), 0 26px 60px rgba(0,0,0,.55); text-shadow: none; user-select: none; }
#scr-market button { font: inherit; cursor: pointer; color: inherit; }
#scr-market button:disabled { cursor: not-allowed; opacity: .5; }
#scr-market .mk-head { display: flex; align-items: center; gap: 10px; flex: none; }
#scr-market .mk-head h2 { margin: 0; font-size: 24px; white-space: nowrap; border: 0; padding: 0; }
#scr-market .mk-subt { flex: 1; min-width: 0; font-size: 13px; color: #f4e7c9; font-family: var(--lic-type); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scr-market .mk-sell { font-size: 16px; font-weight: 700; padding: 8px 16px; border-radius: 10px; border: 0; background: var(--lic-band); color: #ffd23f; box-shadow: inset 0 0 0 3px #ffd23f, inset 0 0 0 5px var(--lic-ink), 0 3px 0 #0b1638; white-space: nowrap; }
#scr-market .mk-sell:hover:not(:disabled), #scr-market .mk-ghost:hover:not(:disabled), #scr-market .b-buy:hover:not(:disabled) { filter: brightness(1.12); }
#scr-market .mk-ghost { font-size: 14px; padding: 6px 12px; border-radius: 10px; background: var(--lic-pap); color: var(--lic-ink); border: 3px solid var(--lic-ink); box-shadow: 0 3px 0 rgb(var(--lic-ink-rgb) / .35); white-space: nowrap; }
#scr-market .mk-head .mk-ghost { background: transparent; color: #f4e7c9; border: 2px solid #f4e7c9; box-shadow: none; }   /* (en la banda azul, como el Volver de las demás) */
#scr-market .mk-ghost i { font-style: normal; font-size: 11px; min-width: 18px; margin-left: 6px; padding: 1px 5px; border-radius: 9px; background: var(--lic-red); color: #fff; display: inline-block; }
#scr-market .mk-ghost i:empty { display: none; }
#scr-market .mk-fil { display: flex; flex-direction: column; gap: 6px; flex: none; }
#scr-market .mk-fr { display: flex; gap: 6px; align-items: center; }
#scr-market .mk-in { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 4px 4px 0 0; min-width: 0; flex: 1 1 0; background: rgb(var(--lic-wash) / .35); color: var(--lic-ink); border: 0; border-bottom: 3px solid var(--lic-ink); outline: none; text-shadow: none; }
#scr-market .mk-in:focus { border-bottom-color: var(--lic-red); background: rgb(var(--lic-wash) / .6); }
#scr-market .mk-in::placeholder { color: rgb(var(--lic-ink-rgb) / .55); }
#scr-market .mk-in.bad { border-bottom-color: var(--lic-red); background: rgba(216,64,47,.1); }
#scr-market .mk-in:disabled { opacity: .45; }

#scr-market .mk-extra .mk-ghost { flex: none; }
#scr-market #mk-f-ev, #scr-market #mk-f-iv, #scr-market #mk-f-max { flex: .8 1 0; } #scr-market #mk-f-text { flex: 1.7 1 0; }
#scr-market .mk-morebtn { display: none; }
#scr-market .mk-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; }
#scr-market .mk-none { margin: 0; padding: 18px 12px; text-align: center; color: rgb(var(--lic-ink-rgb) / .65); font-size: 14px; font-family: var(--lic-type); }
/* tabla */
#scr-market .mk-table { overflow: auto; border: 3px solid var(--lic-ink); border-radius: 10px; min-height: 0; background: rgb(var(--lic-wash) / .3); display: flex; flex-direction: column; gap: 4px; padding: 0 6px 6px; }
#scr-market .mk-tr { display: grid; grid-template-columns: minmax(150px, 1.3fr) 1fr minmax(160px, 1.6fr) 80px; gap: 8px; align-items: center; padding: 4px 10px; font-size: 13px; min-height: 40px; outline: none; border-radius: 8px; background: rgb(var(--lic-wash) / .55); border: 2px solid rgb(var(--lic-ink-rgb) / .25); flex: none; }
#scr-market .mk-tr[data-id] { cursor: pointer; }

#scr-market .mk-tr[data-id]:hover, #scr-market .mk-tr[data-id]:focus-visible { border-color: rgb(var(--lic-ink-rgb) / .6); background: rgb(var(--lic-wash) / .75); }
#scr-market .mk-th { position: sticky; top: 0; z-index: 1; background: var(--lic-band) !important; color: #f4e7c9; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; min-height: 28px; margin: 0 -6px; border-radius: 0; border: 0; }
#scr-market .mk-tr.on { background: rgb(255 210 63 / .22) !important; border-color: var(--lic-ink); box-shadow: inset 4px 0 0 var(--lic-red); }
#scr-market .pk { display: flex; align-items: center; gap: 6px; min-width: 0; }
#scr-market .pk .spr { flex: none; display: flex; }
#scr-market .pk .nm { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-width: 0; }
#scr-market .pk b { font-size: 14px; }
#scr-market .sl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#scr-market .sl .me { font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 6px; background: var(--lic-band); color: #ffd23f; }
#scr-market .tp { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#scr-market .lf { color: var(--lic-red); font-weight: 700; text-align: right; white-space: nowrap; }
#scr-market .st { color: #d49a12; text-shadow: 0 1px 0 rgb(var(--lic-ink-rgb) / .25); font-size: 12px; letter-spacing: 1px; white-space: nowrap; } #scr-market .st i { font-style: normal; opacity: .25; }
#scr-market .kl { font-style: normal; font-size: 12px; } #scr-market .kl.leg { color: #b8860b; } #scr-market .kl.mega { color: #c0308f; }
#scr-market .ps { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; white-space: nowrap; }
#scr-market .pp { display: grid; grid-template-columns: 26px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 5px 8px; border-radius: 8px; background: rgb(var(--lic-wash) / .6); border: 2px solid rgb(var(--lic-ink-rgb) / .35); min-width: 0; }
#scr-market .pp > :first-child { grid-row: 1 / span 2; justify-self: center; }
#scr-market .pp b { font-size: 17px; line-height: 1; } #scr-market .pp small { font-size: 11px; opacity: .75; }
#scr-market .pp.miss { border-color: var(--lic-red); background: rgba(216,64,47,.1); }
#scr-market canvas { image-rendering: pixelated; }
/* detalle */
#scr-market .mk-dt { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; min-height: 0; overflow: auto; background: linear-gradient(rgb(var(--lic-wash) / .45), rgb(var(--lic-wash) / .45)), var(--lic-pap); border: 3px solid var(--lic-ink); box-shadow: 0 3px 0 rgb(var(--lic-ink-rgb) / .3); }
#scr-market .dt-top { display: flex; gap: 10px; align-items: center; }
#scr-market .dt-spr { flex: none; display: flex; }
#scr-market .dt-who { min-width: 0; }
#scr-market .dt-top h3 { margin: 0; font-size: 22px; line-height: 1.15; } #scr-market .dt-top h3 small { font-size: 12px; font-weight: 400; opacity: .7; }
#scr-market .dt-sp { font-size: 12px; opacity: .7; }
#scr-market .dt-meta { font-size: 12px; opacity: .85; margin-top: 2px; }
#scr-market .dt-stats { display: grid; grid-template-columns: 34px repeat(4, 1fr); gap: 2px 4px; font-size: 12px; text-align: center; align-items: center; padding: 4px 6px; border-radius: 8px; background: rgb(var(--lic-wash) / .5); border: 2px solid rgb(var(--lic-ink-rgb) / .25); }
#scr-market .dt-stats small { font-size: 9px; color: rgb(var(--lic-ink-rgb) / .65); letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scr-market .dt-stats b { font-size: 11px; color: rgb(var(--lic-ink-rgb) / .65); text-align: left; }
#scr-market .dt-im { display: flex; flex-wrap: wrap; gap: 4px; }
#scr-market .mv { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: var(--lic-band); color: #f4e7c9; border: 2px solid transparent; }
#scr-market .mv.leg { background: #fff1bf; color: #7a5600; border-color: #e2b13a; }
#scr-market .mv.mega { background: #ffe0f4; color: #9a1f72; border-color: #e05ab4; }
#scr-market .dt-pricet { font-size: 13px; font-weight: 700; letter-spacing: .5px; border-bottom: 3px solid var(--lic-red); align-self: flex-start; }
#scr-market .dt-price { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#scr-market .dt-foot { margin-top: auto; position: sticky; bottom: -12px; padding: 6px 0 12px; margin-bottom: -12px; background: linear-gradient(rgb(var(--lic-wash) / .45), rgb(var(--lic-wash) / .45)), var(--lic-pap); box-shadow: 0 -6px 6px -2px var(--lic-pap); display: flex; flex-direction: column; gap: 6px; }
#scr-market .dt-have { font-size: 13px; font-weight: 700; color: #1f7a3a; } #scr-market .dt-have.bad { color: var(--lic-red); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } #scr-market .dt-have.own { color: var(--lic-goldd); }
#scr-market .dt-btns { display: flex; gap: 8px; }
#scr-market .b-buy { flex: 1; font-size: 20px; font-weight: 700; padding: 9px; border-radius: 10px; border: 0; background: var(--lic-band); color: #ffd23f; box-shadow: inset 0 0 0 3px #ffd23f, inset 0 0 0 5px var(--lic-ink), 0 4px 0 #0b1638; }
#scr-market .b-ghost { font-size: 14px; padding: 6px 12px; border-radius: 10px; background: var(--lic-pap); border: 3px solid var(--lic-ink); color: var(--lic-ink); }
#scr-market .dt-ask { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; background: rgb(255 210 63 / .18); border: 3px solid var(--lic-ink); }
#scr-market .dt-ask > b { font-size: 16px; } #scr-market .dt-askp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: rgb(var(--lic-ink-rgb) / .75); }
/* paneles encima de la ventana: publicar y mis anuncios */
#scr-market .mk-pop { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--lic-paper); border-radius: 14px; box-shadow: inset 0 0 0 7px var(--lic-pap), inset 0 0 0 9px var(--lic-ink); }
#scr-market .mk-pop[hidden] { display: none; }
#scr-market .mk-ph { display: flex; align-items: center; gap: 12px; flex: none; }
#scr-market .mk-ph > b { font-size: 22px; color: var(--lic-ink); white-space: nowrap; border-bottom: 3px solid var(--lic-red); }
#scr-market .mk-step { font-size: 13px; color: var(--lic-goldd); font-family: var(--lic-type); } #scr-market .mk-slots { font-size: 12px; opacity: .8; white-space: nowrap; } #scr-market .mk-sp { flex: 1; }
#scr-market .mk-plist { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; align-content: start; min-height: 0; flex: 1; padding: 2px; }
#scr-market .mk-plist .mk-none { grid-column: 1 / -1; }
#scr-market .mk-pmon { display: flex; gap: 8px; align-items: center; text-align: left; padding: 5px 8px; border-radius: 9px; border: 2px solid rgb(var(--lic-ink-rgb) / .3); background: rgb(var(--lic-wash) / .55); color: var(--lic-ink); min-width: 0; }
#scr-market .mk-pmon:hover, #scr-market .mk-pmon:focus-visible { border-color: var(--lic-red); outline: none; }
#scr-market .mk-pmon canvas { flex: none; } #scr-market .mk-pmon span { display: grid; min-width: 0; }
#scr-market .mk-pmon b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scr-market .mk-pmon small { font-size: 11px; color: rgb(var(--lic-ink-rgb) / .7); } #scr-market .mk-pmon small i { font-style: normal; color: #d49a12; }
#scr-market .mk-p2 { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px; overflow: auto; }
#scr-market .mk-p2l, #scr-market .mk-p2r { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-items: stretch; }
#scr-market .mk-p2l .mk-ghost { align-self: flex-start; }
#scr-market .mk-pcard { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: rgb(var(--lic-wash) / .5); border: 3px solid var(--lic-ink); }
#scr-market .mk-pci { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #scr-market .mk-pci b { font-size: 18px; } #scr-market .mk-pci small { font-size: 12px; opacity: .8; }
#scr-market .mk-prevt, #scr-market .mk-pt { font-size: 13px; font-weight: 700; letter-spacing: .5px; } #scr-market .mk-pt small { font-weight: 400; opacity: .7; letter-spacing: 0; }
#scr-market .mk-prev .mk-tr { grid-template-columns: minmax(130px, 1.3fr) minmax(0, .9fr) minmax(90px, 1.2fr) 64px; }
#scr-market .mk-prows { display: flex; flex-direction: column; gap: 6px; }
#scr-market .mk-prow { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 30px; gap: 6px; align-items: center; padding: 5px 6px; border-radius: 9px; background: rgb(var(--lic-wash) / .5); border: 2px solid rgb(var(--lic-ink-rgb) / .3); }
#scr-market .mk-prow .ic { display: flex; justify-content: center; } #scr-market .mk-prow .na { text-align: center; opacity: .5; }
#scr-market .mk-x { width: 28px; height: 28px; border-radius: 7px; border: 2px solid rgb(var(--lic-ink-rgb) / .55); background: transparent; font-size: 16px; line-height: 1; padding: 0; }
#scr-market .mk-warn { margin: 0; font-size: 12px; line-height: 1.35; color: var(--lic-ink); font-family: var(--lic-type); padding: 6px 8px; border-radius: 8px; background: rgb(255 210 63 / .18); border: 2px dashed rgb(var(--lic-ink-rgb) / .4); }
#scr-market .mk-err { margin: 0; min-height: 16px; font-size: 12px; color: var(--lic-red); }
#scr-market .mk-pbtns { display: flex; justify-content: flex-end; margin-top: auto; }
#scr-market .mk-mlist { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
#scr-market .mk-mrow { display: grid; grid-template-columns: 38px minmax(120px, 1fr) minmax(110px, 1.2fr) minmax(150px, 1.6fr) 80px; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 9px; background: rgb(var(--lic-wash) / .5); border: 2px solid rgb(var(--lic-ink-rgb) / .3); font-size: 13px; }
#scr-market .mk-mrow .mi { display: flex; flex-direction: column; min-width: 0; } #scr-market .mk-mrow .mi b { font-size: 14px; }
#scr-market .mk-mrow .ms { color: var(--lic-goldd); font-size: 12px; } #scr-market .mk-mrow.open .ms { color: #1f7a3a; } #scr-market .mk-mrow.cancel .ms { color: rgb(var(--lic-ink-rgb) / .6); }

/* celular apaisado */
@media (max-height: 500px) {
  #scr-market { padding: 0; z-index: 60; }   /* a pantalla completa, por encima de la barra superior */
  #scr-market .mk-win { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; padding: 8px 10px; gap: 5px; border-width: 0; }
  #scr-market .mk-head { gap: 6px; } #scr-market .mk-head h2 { font-size: 18px; } #scr-market .mk-subt { display: none; } #scr-market .mk-head h2 { flex: 1; }
  #scr-market .mk-sell { font-size: 13px; padding: 5px 10px; } #scr-market .mk-ghost { font-size: 12px; padding: 4px 9px; }
  #scr-market .mk-fil { gap: 4px; } #scr-market .mk-fr { gap: 4px; }
  #scr-market .mk-in { font-size: 11px; padding: 3px 5px; }
  #scr-market .mk-morebtn { display: inline-block; flex: none; }
  #scr-market .mk-extra { display: none; } #scr-market .mk-fil.more .mk-extra { display: flex; flex-wrap: wrap; }
  #scr-market .mk-fil.more .mk-extra .mk-in { flex: 1 1 22%; }
  #scr-market .mk-body { grid-template-columns: minmax(0, 1fr) 270px; gap: 8px; }
  #scr-market .mk-tr { grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.5fr) 56px; font-size: 11px; min-height: 32px; padding: 3px 8px; } #scr-market .mk-tr > .sl { display: none; }
  #scr-market .mk-prev .mk-tr { grid-template-columns: minmax(100px, 1fr) minmax(80px, 1.2fr) 52px; }
  #scr-market .tp { flex-wrap: nowrap; gap: 5px; } #scr-market .pk b { font-size: 12px; } #scr-market .st { font-size: 10px; letter-spacing: 0; }
  #scr-market .mk-dt { padding: 8px; gap: 5px; } #scr-market .dt-top h3 { font-size: 16px; } #scr-market .dt-spr canvas { width: 60px; height: auto; }
  #scr-market .dt-stats { font-size: 11px; padding: 2px 4px; } #scr-market .dt-stats small { font-size: 8px; }
  #scr-market .pp b { font-size: 13px; } #scr-market .pp small { font-size: 9px; } #scr-market .pp { padding: 3px 5px; grid-template-columns: 20px auto; }
  #scr-market .b-buy { font-size: 15px; padding: 5px; } #scr-market .dt-pricet { font-size: 11px; } #scr-market .dt-meta { font-size: 11px; }
  #scr-market .dt-foot { bottom: -8px; padding-bottom: 8px; margin-bottom: -8px; }
  #scr-market .dt-stats { display: none; }   /* en el celular no cabe: queda la suma de EVs e IVs de arriba */
  #scr-market .mk-pop { padding: 8px 10px; gap: 5px; } #scr-market .mk-ph > b { font-size: 16px; } #scr-market .mk-ph { gap: 8px; }
  #scr-market .mk-plist { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; }
  #scr-market .mk-p2 { gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  #scr-market .mk-p2l, #scr-market .mk-p2r { gap: 5px; }
  #scr-market .mk-pcard { padding: 4px 6px; } #scr-market .mk-pci b { font-size: 14px; }
  #scr-market .mk-prow { grid-template-columns: 22px minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr) 26px; gap: 4px; padding: 3px 4px; }
  #scr-market .mk-warn { font-size: 10px; padding: 3px 6px; } #scr-market .mk-prevt, #scr-market .mk-pt { font-size: 11px; }
  #scr-market .mk-mrow { grid-template-columns: 38px minmax(90px, 1fr) minmax(90px, 1fr) minmax(110px, 1.4fr) 64px; gap: 6px; font-size: 11px; }
}

/* ============ Entrenador personalizable (03-11-2026, lo pidió el dueño; js/core/trainer.js, js/ui/trainer-ui.js) ===== * Tarjeta del compañero: el botón «Personalizar» va sobre el recuadro, abajo a la izquierda (debajo del entrenador).
 * Pantalla «Personalizar»: el personaje a la izquierda y las opciones a la derecha (en el móvil apaisado, igual pero más chico). */
.mp-stage-wrap { position: relative; display: inline-block; line-height: 0; }
.mp-stage-wrap .mp-custom { position: absolute; left: 8px; top: 8px; line-height: 1.1; padding: 4px 9px; font-size: 13px; border-width: 2px; }
.partner-card .mp-custom { background: var(--lic-band); color: #ffd23f; border: 2px solid var(--lic-ink); box-shadow: 0 2px 0 rgba(0,0,0,.3); text-shadow: none; }
.trn-box { width: min(860px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
.trn-main { display: flex; gap: 22px; min-height: 0; flex: 1 1 auto; }
.trn-left { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.trn-stage { width: 192px; height: 224px; border-radius: 8px; box-shadow: 0 0 0 3px var(--lic-ink); background: radial-gradient(ellipse at 50% 88%, rgba(0,0,0,.12), transparent 55%), #dfe6f6; touch-action: none; cursor: grab; }
.trn-ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trn-ctl .seg { margin: 0; }
.trn-rot { display: flex; gap: 10px; }
.trn-rot .btn { font-size: 20px; line-height: 1; padding: 4px 14px; }
.trn-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.trn-sec { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trn-lab { font-weight: 700; min-width: 108px; }
.trn-sec .seg { margin: 0; }
.box .seg { border-color: rgb(var(--lic-ink-rgb) / .45); }
.box .seg button { background: rgb(var(--lic-wash) / .3); color: var(--lic-ink); text-shadow: none; }
.box .seg button.on { background: var(--lic-band); color: #ffd23f; }
.trn-skins { display: flex; gap: 7px; flex-wrap: wrap; }
.trn-sw { appearance: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; padding: 0; position: relative;
  background: var(--c); border: 2px solid rgb(var(--lic-ink-rgb) / .5); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); display: grid; place-items: center; }
.trn-sw.on { border-color: var(--lic-ink); box-shadow: 0 0 0 3px var(--lic-pap), 0 0 0 5px var(--lic-red); }
.trn-sw-any { background: conic-gradient(from 0deg, #fce4d4, #d4a070, #644230, #7cc4ff, #c47bff, #ff7a5c, #fce4d4); overflow: hidden; }
.trn-sw-any.on { background: var(--c); }
.trn-sw-any input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.trn-sw-any span { font-weight: 700; color: #fff; text-shadow: 1px 1px 0 #000; pointer-events: none; font-size: 16px; line-height: 1; }
.trn-tabs { flex-wrap: wrap; gap: 5px; margin: 4px 0 0; }
.trn-tabs .gen-tab { padding: 5px 10px; }
.trn-tabs .gen-tab b { font-size: 13px; }
.trn-grid { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; min-height: 96px; }
.trn-it { appearance: none; cursor: pointer; width: 84px; padding: 6px 4px 5px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgb(var(--lic-wash) / .35); border: 2px solid rgb(var(--lic-ink-rgb) / .35); color: var(--lic-ink); }
.trn-it:hover { border-color: var(--lic-ink); }
.trn-it.on { border-color: var(--lic-red); box-shadow: inset 0 0 0 2px var(--lic-pap), inset 0 0 0 3px var(--lic-red); }
.trn-it canvas { width: 64px; height: 64px; }
.trn-it small { font-size: 12px; text-align: center; line-height: 1.1; }
/* (04-11-2026) Pieza bloqueada (las alas): miniatura en escala de grises, candado encima y sin poder elegirla. */
.trn-it.trn-locked { position: relative; cursor: not-allowed; }
.trn-it.trn-locked:hover { border-color: rgb(var(--lic-ink-rgb) / .35); }
.trn-it.trn-locked canvas { filter: grayscale(1) contrast(.9); opacity: .8; }
.trn-it.trn-locked small { opacity: .65; }
.trn-lock-ic { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--lic-pap, #fff); color: var(--lic-ink, #222); box-shadow: 0 0 0 2px rgb(var(--lic-ink-rgb) / .5); }
.trn-lock-ic svg { width: 13px; height: 13px; display: block; }
.trn-none { width: 64px; height: 64px; display: block; border-radius: 50%; background:
  linear-gradient(45deg, transparent 46%, rgb(var(--lic-ink-rgb) / .45) 46% 54%, transparent 54%), radial-gradient(circle, transparent 52%, rgb(var(--lic-ink-rgb) / .45) 53% 60%, transparent 61%); transform: scale(.7); }
.trn-tint { flex: 1 1 100%; margin-top: 4px; }
.trn-soon { flex: 1 1 100%; margin: 4px 0 0; font-family: var(--lic-type); font-size: 14px; color: rgb(var(--lic-ink-rgb) / .72); }
.trn-foot { margin-top: 14px; }
html.theme-dark .trn-stage { background: radial-gradient(ellipse at 50% 85%, rgba(0,0,0,.25), transparent 60%), linear-gradient(#26325c, #1d2748); }
@media (max-width: 640px) {
  .trn-main { flex-direction: column; align-items: stretch; }
  .trn-stage { width: 150px; height: 175px; }
  .trn-left { flex-direction: row; justify-content: center; }
  .trn-lab { min-width: 0; }
}
@media (max-height: 520px) {
  .trn-box { padding: 12px 14px; max-height: calc(100dvh - 12px); }
  .trn-box > .row.between:first-child { margin-bottom: 8px; padding: 6px 12px; }
  .trn-box > .row.between:first-child h2 { font-size: 20px; }
  .trn-stage { width: 112px; height: 130px; }
  .trn-main { gap: 14px; overflow: auto; }
  .trn-left { gap: 6px; }
  .trn-ctl .seg button { padding: 3px 9px; font-size: 12px; }
  .trn-rot .btn { font-size: 16px; padding: 2px 12px; }
  .trn-foot .btn { padding: 5px 12px; font-size: 14px; }
  .trn-sw { width: 26px; height: 26px; }
  .trn-right { gap: 6px; }
  .trn-it { width: 70px; padding: 4px 3px; }
  .trn-it canvas, .trn-none { width: 48px; height: 48px; }
  .trn-lock-ic { top: 3px; right: 3px; width: 20px; height: 20px; }
  .trn-foot { margin-top: 8px; }
  .mp-stage-wrap .mp-custom { left: 4px; top: 4px; padding: 2px 6px; font-size: 11px; }
}
/* (03-11-2026, el dueño) El pueblo (lobby caminable, js/ui/lobby-world.js) en #scr-town, con la hamburguesa de cajón lateral (opción A),
   el tablero de los 18 pueblos (js/ui/towns-ui.js, opción B «postales») y el billete de «Jugar» en el menú. Antes no había nada de esto. */
#scr-town, #scr-towns, #scr-labpick { --m-ink: #283040; --m-paper: #f8f8f0; --m-edge: #7088b8; --m-shade: #d0d8e8; }   /* (los colores del menú: --m-* sólo existen en cada pantalla) */
#scr-town { padding: 0; display: block; }
#scr-town.hidden { display: none; }
#lw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; display: block; }
#lw-bub { position: fixed; display: none; z-index: 21; font: 700 14px system-ui, sans-serif; background: #fff; color: #3b2a1a; border: 3px solid #3b2a1a; border-radius: 8px; padding: 4px 10px; pointer-events: none; white-space: nowrap; }
#tw-burger { position: absolute; left: max(12px, var(--sa-l, 0px)); top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 4; width: 44px; height: 44px; display: grid; place-items: center;
  font: 0/0 a; color: transparent; background: #f4ecd8 linear-gradient(var(--m-ink), var(--m-ink)) center 12px / 22px 3px no-repeat; border: 3px solid var(--m-ink); border-radius: 10px; box-shadow: 0 4px 0 rgba(0,0,0,.3); cursor: pointer; }
#tw-shade { position: absolute; inset: 0; z-index: 2; background: rgba(10,16,30,.45); display: none; }
#tw-drawer { position: absolute; left: 0; top: 0; bottom: 0; z-index: 3; width: min(330px, 86vw); transform: translateX(-105%); transition: transform .18s ease-out;
  background: #f4ecd8 repeating-linear-gradient(transparent 0 23px, rgba(150,130,90,.08) 23px 24px); border-right: 4px solid var(--m-ink); box-shadow: 6px 0 0 rgba(0,0,0,.25);
  padding: calc(66px + env(safe-area-inset-top, 0px)) 14px 14px max(14px, var(--sa-l, 0px)); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; color: var(--m-ink); }
#scr-town.tw-open #tw-drawer { transform: none; }
#scr-town.tw-open #tw-shade { display: block; }
#tw-head { border-bottom: 3px solid #6a8fd0; padding-bottom: 8px; margin-bottom: 2px; }
#tw-head b { display: block; font-size: 22px; color: #2c519f; }
#tw-head small { font-size: 12px; color: #6a6658; font-weight: 700; }
.tw-row { display: flex; gap: 12px; align-items: center; text-align: left; background: #fbf6ea; border: 2px solid #d0c39f; border-radius: 8px; padding: 8px 10px; box-shadow: inset 0 -3px 0 #e6dac0;
  color: inherit; font: inherit; cursor: pointer; }
.tw-row[hidden] { display: none; }   /* (11-11-2026, Albert) el botón de Moderación del cajón se veía en todas las cuentas: «display: flex» de .tw-row ganaba al atributo hidden */
.tw-row:hover, .tw-row:focus-visible { border-color: #2c519f; }
#tw-drawer .tw-row b { display: block; font-size: 17px; color: var(--m-ink); text-shadow: none; } .tw-row small { display: block; font-size: 11px; color: #7a7462; text-shadow: none; }
.tw-row img { flex: none; }
.tw-out { margin-top: auto; font: 700 15px var(--font); color: #d83a3a; background: transparent; border: 3px double #d83a3a; border-radius: 6px; padding: 7px; cursor: pointer; }
/* billete de «Jugar» */
#scr-menu .ms-play .menu-list { grid-template-columns: 1fr; }
#scr-menu .menu-item.play.ticket { width: 100%; display: grid; grid-template-columns: 1fr 76px; padding: 0; text-align: left; background: #fff8e6; border: 3px solid var(--m-ink); border-radius: 10px; box-shadow: 0 4px 0 #d8cba8; overflow: hidden; }
#scr-menu .ticket .mi-ico { display: none; }
#scr-menu .ticket .tk-txt { padding: 8px 12px; display: grid; gap: 1px; border-right: 3px dashed var(--m-ink); font-size: 34px; line-height: 1; color: #d83a3a; }
#scr-menu .ticket .tk-txt small { font-size: 10px; color: #6a6658; font-weight: 700; display: block; }
#scr-menu .ticket .tk-stub { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #ffe9a0 0 6px, #fff3c4 6px 12px); }
#scr-menu .ticket .tk-stub small { font-size: 9px; font-weight: 700; color: var(--m-ink); align-self: end; padding-bottom: 6px; }
#scr-menu .ticket .tk-stub::before { content: ''; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--m-ink); align-self: end;
  background: linear-gradient(#e04040 0 44%, var(--m-ink) 44% 56%, #fff 56%); }
/* tablero de pueblos */
#scr-towns { padding: 12px; }
.tw-board { width: min(900px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; background: #f4ecd8; color: var(--m-ink); border-radius: 12px; border: 3px solid var(--m-ink); box-shadow: 0 8px 0 rgba(0,0,0,.3);
  padding: 12px 16px; display: grid; gap: 10px; }
.tw-bh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tw-bh h2 { margin: 0; font-size: 20px; color: #d83a3a; }
.tw-bh small { font-size: 11px; color: #6a6658; margin-left: auto; }
.tw-x { font: 700 14px var(--font); border: 2px solid var(--m-ink); border-radius: 6px; background: #f8f2e2; color: var(--m-ink); padding: 2px 9px; cursor: pointer; }
.tw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.tw-card { position: relative; display: grid; grid-template-rows: auto 1fr; text-align: left; background: #fffaf0; border: 3px solid var(--m-ink); border-radius: 8px; overflow: hidden; padding: 0;
  color: inherit; font: inherit; cursor: pointer; box-shadow: 3px 3px 0 rgba(0,0,0,.18); min-height: 92px; }
.tw-card:hover:not(:disabled), .tw-card:focus-visible { transform: translateY(-2px); }
.tw-card.on { outline: 3px solid #f2d46e; }
.tw-card:disabled { opacity: .6; cursor: not-allowed; }
.tw-ch { background: #2c519f repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 8px); color: #fff; padding: 6px 8px; }
.tw-ch b { font-size: 18px; text-shadow: 2px 2px 0 rgba(0,0,0,.45); font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0; }
.tw-cb { display: grid; gap: 4px; padding: 6px 8px 24px; } .tw-cb small { font-size: 10px; font-weight: 700; color: #4a4636; }
.tw-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .tw-bars i { width: 5px; border: 1px solid #1b1528; }
.tw-go { position: absolute; right: 6px; bottom: 5px; font: 700 12px var(--font); color: #d83a3a; border: 2px solid #d83a3a; border-radius: 4px; padding: 0 6px; transform: rotate(-4deg); background: #fff; }
/* «EVs/IVs o Laboratorio» */
.tw-labpick { display: grid; gap: 12px; justify-items: center; text-align: center; }
.tw-lp-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tw-lp-row .btn { display: grid; gap: 2px; min-width: 180px; font-size: 18px; } .tw-lp-row .btn small { font-size: 11px; opacity: .8; }
/* (03-11-2026) El Laboratorio y el Mercado ya no salen en el menú: se abren desde el pueblo (siguen en la página porque el pueblo los «pulsa»). */
#scr-menu #menu-lab, #scr-menu #menu-market { display: none !important; }
#tw-burger::before, #tw-burger::after { content: ''; position: absolute; left: 50%; width: 22px; height: 3px; margin-left: -11px; background: var(--m-ink); }
#tw-burger::before { top: 18px; } #tw-burger::after { top: 24px; }
/* ====== (03-11-2026, lo pidió el dueño) Servidores del lobby con la estética del Matchmaking (antes: tablero de 18 postales, .tw-board):
   pantalla completa sin la barra de arriba, como #scr-friends; sin chat (una sola columna). Las columnas y tarjetas son las del Matchmaking. ====== */
body:has(#scr-towns:not(.hidden)) :is(#topbar, #credits-line, #sound-panel) { display: none !important; }
#scr-towns.scr { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important; }
#scr-towns > .box { width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important; }
#scr-towns > .box.soc { display: flex; flex-direction: column; overflow: hidden; }
#scr-towns .soc-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr !important; gap: 12px; margin-top: 6px; }
#scr-towns .soc-main > .box { min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 10px 12px; margin: 0; }
.tw-srv .r1 .tw-lbl { font-size: 11px; color: #c9d4ee; }
.tw-srv .tw-go { position: static; transform: none; font-size: 11px; color: var(--gold); border-color: var(--gold); background: transparent; padding: 0 5px; }
.tw-srv.mine .tw-go { color: #3a2400; background: var(--gold); }
.tw-srv:disabled { cursor: not-allowed; }
@media (orientation: landscape) and (max-height: 500px) { #scr-towns .soc-main { margin-top: 4px; } #scr-towns .soc-main > .box { padding: 6px 8px; } }
#scr-towns .soc-mtabs button:not(.on) { color: #c9d4ee; }   /* (03-11-2026) que se lean las pestañas del celular sobre el fondo oscuro */
/* (03-11-2026, el dueño eligió la A) Pokémonedas del pueblo: monedero desplegable arriba a la derecha, debajo de la barra (lobby-world-pie.js) */
#tw-coins { position: absolute; right: max(12px, env(safe-area-inset-right)); top: calc(max(8px, env(safe-area-inset-top)) + 56px); z-index: 6;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-family: var(--font); color: #283040; }
#scr-town.tw-open #tw-coins, #scr-town.covered #tw-coins { display: none; }
#tw-coins .coin { width: 22px; height: 22px; flex: none; }
#tw-coins button { font: inherit; color: inherit; cursor: pointer; text-align: left; }
.twc-tab, .twc-p { display: flex; align-items: center; gap: 7px; background: linear-gradient(#fbf5e6, #efe4c8); border: 3px solid #2c3a6a; border-radius: 12px; }
.twc-tab { padding: 4px 10px 4px 8px; box-shadow: 0 3px 0 rgba(20,24,48,.35); }
.twc-tab:hover { transform: translateY(-1px); } .twc-tab i { font-style: normal; font-size: 11px; color: #2c3a6a; margin-left: 2px; }
.twc-t { display: grid; line-height: 1.05; } .twc-t b { font-size: 16px; } .twc-t small { font-size: 10px; color: #6a6658; }
.twc-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 5px; background: rgba(20,28,60,.55); padding: 6px; border-radius: 12px; }
.twc-p { padding: 3px 8px 3px 5px; min-width: 96px; border-radius: 10px; } .twc-p .twc-t b { font-size: 14px; }
.twc-p:hover:not(:disabled) { border-color: #b07a12; } .twc-p.sel { border-color: #b07a12; box-shadow: 0 0 0 2px #f2d46e; }
.twc-p.locked { opacity: .45; cursor: default; }
@media (orientation: landscape) and (max-height: 500px) {
  #tw-coins { top: calc(max(4px, env(safe-area-inset-top)) + 44px); } .twc-tab .twc-t b { font-size: 14px; }
  .twc-p { min-width: 84px; } .twc-p .coin, .twc-tab .coin { width: 18px; height: 18px; } }
/* (03-11-2026, el dueño) Chat del servidor, como el de LoL: abajo a la izquierda, mensajes sobre fondo oscuro translúcido que se apagan
   solos; Enter abre la línea para escribir (en el celular, el botón 💬). (lobby-world-pie.js) */
#tw-chat { position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 22px); z-index: 6;
  width: min(380px, 46vw); display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: end; font: 13px/1.3 system-ui, sans-serif; color: #f2f4fa; }
#scr-town.tw-open #tw-chat, #scr-town.covered #tw-chat { display: none; }
.twch-log { grid-column: 1 / -1; max-height: 9.6em; overflow-y: auto; padding: 5px 8px; border-radius: 6px; background: rgba(8,12,24,.5);
  scrollbar-width: thin; transition: opacity .6s, background .6s; }
.twch-log:empty { display: none; }
#tw-chat.idle .twch-log { opacity: .55; background: rgba(8,12,24,.22); }
#tw-chat.open .twch-log { opacity: 1; background: rgba(8,12,24,.62); }
.twch-m { text-shadow: 1px 1px 0 #000, 0 0 3px #000; overflow-wrap: anywhere; }
.twch-m.sys { color: #c9c3b0; font-style: italic; }
.twch-n { color: #8fc8ff; margin-right: 2px; } .twch-n.me { color: #b8f0c0; }
.twch-n.sup { color: #ffd23f; } .twch-n.sup.red { color: #ff5f6d; } .twch-n.sup.silver { color: #cdeeff; }
.twch-n.sup.shiny { background: linear-gradient(90deg, #ff8ad8, #ffd23f, #5fe08a, #5fc8ff, #c47bff, #ff8ad8); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
.twch-in { display: none; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: rgba(8,12,24,.78); border: 1px solid rgba(160,190,255,.45); }
#tw-chat.open .twch-in { display: flex; }
.twch-to { color: #ffd23f; font-weight: 700; white-space: nowrap; }
.twch-in input { flex: 1; min-width: 0; font: inherit; color: #fff; background: transparent; border: 0; outline: 0; padding: 2px 0; }
.twch-btn { display: none; grid-column: 2; font-size: 18px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #2c3a6a; background: #f4ecd8; cursor: pointer; }
#tw-chat.open .twch-btn { grid-row: 2; }
@media (pointer: coarse), (max-height: 500px) { .twch-btn { display: block; } #tw-chat { grid-template-columns: 1fr auto; } }
@media (orientation: landscape) and (max-height: 500px) { #tw-chat { width: min(300px, 44vw); font-size: 11px; bottom: calc(max(4px, env(safe-area-inset-bottom)) + 16px); } .twch-log { max-height: 7.2em; } .twch-btn { width: 32px; height: 32px; font-size: 15px; } }
/* (03-11-2026) Ventanita del arco de megaevolución (lobby-world-pie.js megaPick): encima del pueblo, como la del Laboratorio */
#tw-megapick, #tw-boatpick { position: absolute; inset: 0; z-index: 9; display: none; place-items: center; background: rgba(10,14,30,.45); padding: 12px; }
#tw-megapick.on, #tw-boatpick.on { display: grid; }
#tw-megapick .tw-mp, #tw-boatpick .tw-mp { width: min(460px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; }
#tw-megapick h2, #tw-boatpick h2 { margin: 0; } #tw-megapick p, #tw-boatpick p { margin: 0; max-width: 40ch; font-size: 14px; }
#tw-megapick .mg-stone { width: 44px; height: 44px; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(160,220,255,.8)); }
@media (orientation: landscape) and (max-height: 500px) { #tw-megapick .tw-lp-row .btn { min-width: 150px; font-size: 15px; } #tw-megapick .mg-stone { width: 30px; height: 30px; } }
/* (03-11-2026, lo pidió el dueño) El cartel «Altar de Arceus» ya no sale en el menú: la ficha se canjea con Arceus en la plaza del pueblo.
   (Se queda en la página porque arceus-ui.js lo actualiza.) */
#menu-arceus { display: none !important; }
/* (03-11-2026) Joystick táctil del pueblo (lobby-world-pie.js): aparece donde apoyas el dedo */
#tw-joy { position: fixed; z-index: 7; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; pointer-events: none; display: none;
  background: rgba(20,28,60,.28); border: 3px solid rgba(255,255,255,.55); box-shadow: 0 0 0 2px rgba(20,28,60,.35); }
#tw-joy.on { display: block; }
#tw-joy i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.85); border: 3px solid #2c3a6a; }

/* (03-11-2026) Ranking y desafío: cuánto duró de verdad una partida con Arceus (debajo del tiempo) */
.chal-real { display: block; font-size: 11px; opacity: .75; font-weight: 600; white-space: nowrap; }

/* (03-11-2026, lo pidió el dueño) Elegir ataques: 3 huecos «Al megaevolucionar» debajo de la rueda, y bordes por clase de ataque:
   legendario dorado, mega morado reluciente (en la lista, la rueda y los huecos mega). */
.mvp-left { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.mvp-mega { width: var(--wd); max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 10px 18px;
  border-radius: 14px; border: 2px dashed rgba(176,123,255,.65); background: rgba(176,123,255,.08); }
.mvp-mega[hidden] { display: none; }
.mvp-mega-h { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.mvp-mega-h b { font-size: 13px; color: #8a4fe0; }
.mvp-mega-h small { font-size: 10px; opacity: .75; }
.mvp-mega-row { display: flex; gap: 12px; }
.mvp-orb.mvp-morb { --o: calc(var(--wd) * .13); position: relative; margin: 0; left: auto; top: auto; border-color: rgba(176,123,255,.7); }
.mvp-orb.mvp-morb .mvp-lbl { font-size: 10px; max-width: 86px; overflow: hidden; text-overflow: ellipsis; }
.mvp-orb.mvp-morb.mfoc { border: 3px solid #b07bff; box-shadow: 0 0 0 3px rgba(176,123,255,.35), 0 0 14px rgba(176,123,255,.7); animation: mvp-mpulse 1.2s ease-in-out infinite; }
.mvp-orb.mvp-morb.mvp-drop { transform: scale(1.15); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(176,123,255,.55), 0 0 22px rgba(176,123,255,.8); }
@keyframes mvp-mpulse { 50% { box-shadow: 0 0 0 5px rgba(176,123,255,.2), 0 0 20px rgba(176,123,255,.9); } }
.mvp-megat { color: #8a4fe0; font-style: normal; font-weight: 700; }
.mvp-mv.on-mega { border-color: #b07bff; background: rgba(176,123,255,.14); }
/* legendario: dorado */
.mvp-mv.k-leg, #scr-mvpick .mvp-mv.k-leg { border: 2px solid #e8b200 !important; box-shadow: 0 0 0 1px rgba(255,210,63,.55), 0 0 10px rgba(255,190,40,.45); }
.mvp-orb.full.k-leg, #scr-mvpick .mvp-orb.full.k-leg { border: 3px solid #f2b705 !important; box-shadow: 0 0 0 2px rgba(255,226,122,.6), 0 0 14px rgba(255,190,40,.7); }
/* mega: morado reluciente (brillo que recorre el borde) */
.mvp-mv.k-mega, #scr-mvpick .mvp-mv.k-mega { border: 2px solid #a259ff !important; animation: mvp-kmega 2.2s ease-in-out infinite; }
.mvp-orb.full.k-mega, #scr-mvpick .mvp-orb.full.k-mega { border: 3px solid #a259ff !important; animation: mvp-kmega 2.2s ease-in-out infinite; }
@keyframes mvp-kmega { 0%, 100% { box-shadow: 0 0 0 1px rgba(214,170,255,.6), 0 0 8px rgba(162,89,255,.55); }
  50% { box-shadow: 0 0 0 2px rgba(240,215,255,.9), 0 0 18px rgba(180,110,255,.95); } }
@media (prefers-reduced-motion: reduce) { .mvp-mv.k-mega, .mvp-orb.full.k-mega, .mvp-orb.mvp-morb.mfoc { animation: none; } }
/* (03-11-2026) Huecos mega en el celular: en horizontal, la rueda un poco más chica y la fila de la mega compacta (antes se salía por abajo) */
@media (max-height: 520px) and (min-width: 561px) {
  #scr-mvpick .mvp-body:has(.mvp-mega:not([hidden])) { --wd: min(calc(100dvh - 182px), 270px); }
  .mvp-mega { gap: 8px; padding: 3px 6px 14px; width: auto; }
  .mvp-mega-h small { display: none; }
  .mvp-mega-h b { font-size: 11px; }
  .mvp-orb.mvp-morb { --o: 38px; }
}
@media (max-width: 760px) { .mvp-mega { width: auto; } }
/* (04-11-2026, lo pidió el dueño) Menú de un jugador del pueblo (clic derecho / mantener el dedo), como el de PokéMMO: caja oscura,
   el nombre arriba y una opción por fila. */
#tw-ctx { position: fixed; z-index: 40; min-width: 190px; max-width: min(260px, calc(100vw - 12px)); display: none; flex-direction: column;
  background: rgba(22, 27, 40, .96); border: 1px solid #5b6782; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 4px; font: 600 13px system-ui, sans-serif; color: #e8edf7; }
#tw-ctx.on { display: flex; }
#tw-ctx .twx-h { display: flex; align-items: center; gap: 6px; padding: 6px 8px 7px; margin-bottom: 3px; border-bottom: 1px solid #39435a; }
#tw-ctx .twx-h b { font-size: 14px; color: #ffd23f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tw-ctx .twx-fr { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: #2e7d45; color: #eafff0; }
#tw-ctx .twx-r { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0;
  padding: 8px 9px; border-radius: 4px; cursor: pointer; min-height: 36px; }
#tw-ctx .twx-r:hover:not(.off), #tw-ctx .twx-r:focus-visible, #tw-ctx .twx-r.pad-focus { background: #34507e; outline: none; }
#tw-ctx .twx-r.off { color: #8c96aa; cursor: default; }
#tw-ctx .twx-r img, #tw-ctx .twx-r svg, #tw-ctx .twx-r canvas { flex: none; }
#tw-ctx .twx-n { display: block; padding: 4px 9px 6px; font-weight: 500; font-size: 11px; color: #9aa6bd; line-height: 1.3; }

/* (04-11-2026, lo avisó un jugador: «el vídeo tapa el tipo») Cartas de nivel: una copia del tipo (.lvp-chip) va en la capa de los vídeos,
   por encima, en el mismo sitio que el de la carta (run-ui.js place); el icono del ataque baja un poco para no quedar debajo.
   Antes la ventana del vídeo tapaba la etiqueta del tipo. */
.lvp-chip { position: absolute; left: 0; top: 0; z-index: 2; line-height: 0; pointer-events: none; }
.lvp-chip .tag-chip { position: static; display: inline-block; line-height: normal; font-size: 11px; box-shadow: 0 0 0 2px #10204f; }
.lvp-win.has-chip .lvp-ico { top: 28px; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { .lvp-chip .tag-chip { font-size: 9px; } .lvp-win.has-chip .lvp-ico { top: 22px; } }

/* (04-11-2026, lo pidió el dueño) Botón «Omitir» de la animación de las estrellas (pc-ui.js fuse), abajo en el centro */
.pc-fuse-skip { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2; }
/* (04-11-2026) Cartas de nivel en grupo: «Seguir sin esperar» del anfitrión */
.lvl-force { margin: 6px auto 0; display: block; }
.lvl-force.hidden { display: none; }

/* (04-11-2026, lo pidió el dueño) Gacha ×30: las 30 cartas, más chicas */
.pull-results.many { gap: 6px; max-width: 1100px; }
.pull-results.many .pcard { width: 96px; padding: 4px 3px; }
.pull-results.many .pcard canvas { width: 80px; height: auto; }
.pull-results.many .pcard .ev-line { display: none; }
/* (04-11-2026, lo pidió el dueño) En el Criadero, el fondo totalmente negro (antes, el oscurecido de siempre: se veía el pueblo detrás) */
#scr-hatchery.scr.dim { background: #000; }

/* (04-11-2026) Anuncio de la moderación en los pueblos (js/net/announce.js): como el /title de Minecraft, grande arriba en el centro, sin tapar clics. */
#ann-banner { position: fixed; left: 50%; top: calc(16vh + env(safe-area-inset-top, 0px)); z-index: 9062; display: none; flex-direction: column; align-items: center; gap: 4px;
  transform: translateX(-50%); width: max-content; max-width: min(760px, calc(100vw - 32px)); padding: 10px 22px 12px; border-radius: 10px; pointer-events: none; text-align: center;
  background: rgba(8,10,22,.62); box-shadow: 0 0 0 2px rgba(255,210,63,.55); }
#ann-banner.on { display: flex; animation: supIn .45s ease-out both; }
#ann-banner.out { animation: supOut .6s ease-in both; }
#ann-banner small { font-size: 13px; color: #ff8a9a; letter-spacing: .04em; text-shadow: 1px 1px 0 #000; }
#ann-banner b { font-size: clamp(18px, 3.2vw, 30px); line-height: 1.2; color: #ffd23f; text-shadow: 2px 2px 0 #3a2a00, 0 0 8px rgba(0,0,0,.7); overflow-wrap: anywhere; }
.twch-m.sys.ann { color: #ffd23f; font-style: normal; font-weight: 700; }
/* (04-11-2026, lo pidió el dueño) Servidores en una sola lista (sin regiones) y una barra que se llena con la gente; lleno, «FULL».
   Antes: 4 columnas por región (.soc-regions) y 5 rayitas (.tw-bars) con «6/20». */
#towns-grid.tw-one { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-content: start; gap: 10px; overflow-y: auto; }
#towns-grid.tw-one .soc-room { margin-bottom: 0; }
#scr-towns .soc-mtabs { display: none !important; }
.tw-fill { flex: 1; height: 10px; border-radius: 5px; background: #d8cfba; border: 1px solid #1b1528; overflow: hidden; display: block; }
.tw-fill i { display: block; height: 100%; border-radius: 4px 0 0 4px; transition: width .3s; }
.tw-full { font-size: 12px; letter-spacing: .06em; color: #ff6a6a; }
/* (04-11-2026, el dueño: «se ven muy chiquitos los servidores») Tarjetas de servidor más grandes. Antes: columnas de 190 px, mapa de 48 px y letra de 13 px. */
#towns-grid.tw-one { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); grid-auto-rows: max-content; gap: 16px; }
#towns-grid.tw-one .soc-room { flex: none; height: auto; }
#towns-grid.tw-one .soc-room { border-width: 3px; border-radius: 10px; }
#towns-grid.tw-one .soc-map { height: 130px; }
#towns-grid.tw-one .soc-map .lbl { font-size: 26px; left: 12px; top: 10px; text-shadow: 3px 3px 0 #0a1430; }
#towns-grid.tw-one .soc-room .in { padding: 10px 12px 12px; }
#towns-grid.tw-one .soc-room .r1 { margin-top: 8px; gap: 10px; }
#towns-grid.tw-one .tw-fill { height: 16px; border-radius: 8px; }
#towns-grid.tw-one .tw-full { font-size: 16px; }
#towns-grid.tw-one .tw-srv .r1 .tw-lbl { font-size: 15px; }
#towns-grid.tw-one .tw-srv .tw-go { font-size: 15px; padding: 3px 12px; }
@media (orientation: landscape) and (max-height: 500px) {
  #towns-grid.tw-one { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
  #towns-grid.tw-one .soc-map { height: 56px; } #towns-grid.tw-one .soc-map .lbl { font-size: 20px; top: 6px; }
}
/* (04-11-2026, el dueño) El billete «Jugar» del menú viejo, arriba del cajón del pueblo (mismos estilos que en #scr-menu), y «Jugar» arriba, junto a la hamburguesa. */
#tw-drawer .menu-item.play.ticket { width: 100%; display: grid; grid-template-columns: 1fr 76px; padding: 0; margin: 0 0 4px; font: inherit; cursor: pointer; text-align: left; background: #fff8e6; border: 3px solid var(--m-ink); border-radius: 10px; box-shadow: 0 4px 0 #d8cba8; overflow: hidden; flex: none; }
#tw-drawer .ticket .tk-txt { padding: 8px 12px; display: grid; gap: 1px; border-right: 3px dashed var(--m-ink); font-size: 34px; line-height: 1; color: #d83a3a; font-family: var(--font-title, inherit); }
#tw-drawer .ticket .tk-txt small { font-size: 10px; color: #6a6658; font-weight: 700; display: block; }
#tw-drawer .ticket .tk-stub { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #ffe9a0 0 6px, #fff3c4 6px 12px); }
#tw-drawer .ticket .tk-stub small { font-size: 9px; font-weight: 700; color: var(--m-ink); align-self: end; padding-bottom: 6px; }
#tw-drawer .ticket .tk-stub::before { content: ''; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--m-ink); align-self: end; background: linear-gradient(#e04040 0 44%, var(--m-ink) 44% 56%, #fff 56%); }
#tw-drawer .ticket:hover { transform: translateY(-1px); }
#tw-play { position: absolute; left: calc(max(12px, var(--sa-l, 0px)) + 54px); top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 4; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 10px;
  font: inherit; font-weight: 700; font-size: 20px; color: #fff; background: #d83a3a; border: 3px solid var(--m-ink); border-radius: 10px; box-shadow: 0 4px 0 rgba(0,0,0,.3); cursor: pointer; text-shadow: 1px 1px 0 #7a1414; }
#tw-play i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--m-ink); background: linear-gradient(#e04040 0 44%, var(--m-ink) 44% 56%, #fff 56%); }
#tw-play:hover { filter: brightness(1.08); } #tw-play:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
#scr-town.tw-open #tw-play, #scr-town.covered #tw-play { display: none; }
#tw-drawer .ticket .tk-txt small { grid-column: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* (04-11-2026) .menu-item small los mandaba a la 2.ª columna */
#tw-drawer .ticket::before { display: none; }
#tw-drawer .ticket .tk-stub small { grid-column: auto; }
#tw-drawer .ticket, #tw-drawer .ticket * { text-shadow: none; }
#tw-drawer .ticket .tk-txt { align-content: center; padding: 14px 14px; font-size: 38px; }   /* (04-11-2026) sólo «Jugar», sin las dos líneas pequeñas */
/* (04-11-2026, el dueño) Elegir acompañante del pueblo (lobby-world-pie.js, petPick): como la ventanita de la mega. */
#tw-petpick { position: absolute; inset: 0; z-index: 9; display: none; place-items: center; background: rgba(10,14,30,.45); padding: 12px; }
#tw-petpick.on { display: grid; }
#tw-petpick .tw-pk { width: min(640px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
#tw-petpick .tw-pk h2, #tw-petpick .tw-pk p { margin: 0; }
.tw-pk-bar { display: flex; gap: 10px; align-items: center; } .tw-pk-bar .field { flex: 1; min-width: 0; }
.tw-pk-sh { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 700; cursor: pointer; }
.tw-pk-grid { flex: 1; min-height: 120px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; align-content: start; padding: 2px; }
.tw-pk-mon { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; font: inherit; background: #fff8e6; border: 2px solid #d8cba8; border-radius: 8px; cursor: pointer; }
.tw-pk-mon:hover { border-color: var(--m-ink, #283040); } .tw-pk-mon.on { border-color: var(--gold); background: #fff1c2; }
.tw-pk-mon small { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4a4636; }
.tw-pk-more { grid-column: 1 / -1; }
@media (orientation: landscape) and (max-height: 500px) { #tw-petpick .tw-pk p.sub { display: none; } .tw-pk-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); } }
/* (04-11-2026, el dueño: «el anuncio, en grande, como cuando se recibe un regalo») El aviso de la moderación con el mismo cartel que los regalos
   (#gift-banner), un poco más ancho para textos largos. Antes: título grande tipo Minecraft sobre fondo oscuro transparente (ver arriba). */
#ann-banner { top: calc(64px + env(safe-area-inset-top, 0px)); flex-direction: row; align-items: center; gap: 12px; text-align: left; width: auto;
  max-width: min(640px, calc(100vw - 32px)); padding: 10px 18px; border-radius: 12px; border: 3px solid #ffd23f;
  background: linear-gradient(180deg, #3d2f0a, #1f1704); color: #fff4c9; box-shadow: 0 0 0 3px #1a1204, 0 0 24px rgba(255,210,63,.55); }
#ann-banner .ann-ico { font-size: 28px; line-height: 1; }
#ann-banner b { display: block; font-size: 20px; color: #ffd23f; text-shadow: none; }
#ann-banner .ann-txt { display: block; font-size: 15px; overflow-wrap: anywhere; }
#gift-banner.on ~ #ann-banner.on, #sup-banner.on ~ #ann-banner.on { top: calc(150px + env(safe-area-inset-top, 0px)); }
@media (orientation: landscape) and (max-height: 500px) { #ann-banner { top: calc(40px + env(safe-area-inset-top, 0px)); padding: 6px 12px; } #ann-banner b { font-size: 16px; } }
/* (04-11-2026, el dueño) «Nuevos rangos» en el pueblo (#tw-ranks). Tres estilos para elegir: .v-a (como en el menú viejo, arriba a la
   izquierda), .v-b (letrero de madera abajo a la izquierda, encima del chat), .v-c (cinta dorada arriba a la derecha, bajo las monedas). */
#scr-town .tw-ranks.hidden { display: none !important; }
#scr-town .tw-ranks:not(.hidden) { display: flex; flex-direction: column; gap: 2px; position: absolute; z-index: 5; isolation: isolate; width: 230px; opacity: .9; }
#scr-town.tw-open .tw-ranks, #scr-town.covered .tw-ranks { visibility: hidden; }
#scr-town .tw-ranks.v-a { left: max(12px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 58px); padding: 10px 12px 10px 10px; }
#scr-town .tw-ranks.v-a::before { content: ''; position: absolute; inset: -14px -26px -16px -12px; z-index: -1; pointer-events: none;
  background: radial-gradient(farthest-side, rgba(10,20,48,.8) 0%, rgba(10,20,48,.7) 58%, rgba(10,20,48,.28) 82%, transparent 100%); }
#scr-town .tw-ranks.v-b { left: max(12px, env(safe-area-inset-left)); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 200px); padding: 30px 12px 12px;
  background: repeating-linear-gradient(0deg, #9a6a3c 0 13px, #8a5c32 13px 15px); border: 3px solid #4a2e16; border-radius: 8px; box-shadow: 0 4px 0 rgba(0,0,0,.3), inset 0 0 0 2px #c08a52; }
#scr-town .tw-ranks.v-b .mrk-h { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); margin: 0; padding: 4px 12px; white-space: nowrap; font-size: 13px; font-weight: 700;
  color: #3a2400; text-shadow: none; background: #ffd23f; border: 3px solid #4a2e16; border-radius: 6px; }
#scr-town .tw-ranks.v-b .mrk-row { background: rgba(40,22,8,.5); opacity: 1; }
#scr-town .tw-ranks.v-c { right: max(12px, env(safe-area-inset-right)); top: calc(max(8px, env(safe-area-inset-top)) + 110px); padding: 8px 10px; width: 210px;
  background: linear-gradient(180deg, #3d2f0a, #1f1704); border: 3px solid #ffd23f; border-radius: 12px; box-shadow: 0 0 0 3px #1a1204, 0 0 18px rgba(255,210,63,.4); }
#scr-town .tw-ranks.v-c .mrk-h { color: #ffd23f; font-weight: 700; justify-content: center; }
#scr-town .tw-ranks.v-c .mrk-row { opacity: 1; }
@media (orientation: landscape) and (max-height: 500px) { #scr-town .tw-ranks { transform: scale(.8); transform-origin: top left; } #scr-town .tw-ranks.v-c { transform-origin: top right; } }
@media (orientation: landscape) and (max-height: 500px) { #scr-town .tw-ranks.v-b { bottom: auto; top: calc(max(8px, env(safe-area-inset-top)) + 70px); } }
/* (04-11-2026, el dueño) Cartel del señor de los donadores en el pueblo (lobby-world-pie.js, donorCard): encima de él al acercarte. */
#tw-donors { position: fixed; z-index: 6; display: none; flex-direction: column; gap: 2px; width: 240px; transform: translate(-50%, -100%); padding: 10px 12px 8px; pointer-events: none;
  background: linear-gradient(180deg, #3d2f0a, #1f1704); color: #fff4c9; border: 3px solid #ffd23f; border-radius: 12px; box-shadow: 0 0 0 3px #1a1204, 0 0 18px rgba(255,210,63,.45); }
/* (04-11-2026) Antes usaba supIn, que termina en translate(-50%, 0) y pisaba el -100%: el cartel colgaba hacia abajo y tapaba al señor. */
#tw-donors.on { display: flex; animation: twdIn .25s ease-out both; }
@keyframes twdIn { from { opacity: 0; transform: translate(-50%, calc(-100% + 12px)); } to { opacity: 1; transform: translate(-50%, -100%); } }
#tw-donors::after { content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -9px; border: 9px solid transparent; border-top-color: #ffd23f; border-bottom: 0; }
#tw-donors.side::after { display: none; }
#tw-donors .twd-h { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; color: #ffd23f; margin-bottom: 4px; text-align: center; }
#tw-donors .mrk-row { opacity: 1; padding: 2px 8px; }
#tw-donors .twd-none { text-align: center; color: #ffe9a0; }
#tw-donors .twd-k { text-align: center; font-size: 11px; color: #c9b88a; margin-top: 4px; }
#scr-town.tw-open #tw-donors, #scr-town.covered #tw-donors { display: none; }
@media (orientation: landscape) and (max-height: 500px) { #tw-donors { width: 200px; padding: 6px 8px; gap: 1px; } #tw-donors .twd-h { font-size: 11px; margin-bottom: 2px; } #tw-donors .mrk-row { padding: 1px 8px; } #tw-donors .mrk-row b { font-size: 12px; } #tw-donors .twd-k { margin-top: 2px; } }

/* (05-11-2026, un jugador: «toqué el botón de chat de abajo, se hizo zoom y no pude volver a alejar en el móvil») Safari del iPhone
   amplía la página al tocar un campo de texto con letra de menos de 16 px. En pantallas táctiles, todos los campos a 16 px como
   mínimo. Antes el chat del pueblo heredaba 11-13 px. */
@media (pointer: coarse) {
  input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input:not([type]), textarea, select { font-size: max(16px, 1em) !important; }
}

/* (05-11-2026) Altar de Arceus: «Además, +5 Buko de regalo» con cualquier deseo */
.arc-cbox .arc-bonus { color: #9be36a; font-weight: 700; margin: 2px 0 6px; }

/* (05-11-2026, el dueño eligió la B «Carrera al pueblo») pantalla de carga al entrar al pueblo (lobby-world-pie.js, ldOn/ldOff).
   Antes no había: se veía el pueblo vacío unos segundos. */
#tw-load { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 8000; display: none; opacity: 0;
  image-rendering: pixelated; transition: opacity .4s ease; pointer-events: none; }
#tw-load.on { display: block; opacity: 1; pointer-events: auto; }
#tw-load.off { display: block; opacity: 0; }
/* (11-11-2026, lo pidió el dueño; A «Saltos de satélite») Carga del pueblo entre nubes (js/ui/load-clouds.js): la página se aleja en saltos y un lienzo de píxeles pone el cielo y las nubes */
#ld-clouds { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 8001; display: none; image-rendering: pixelated; pointer-events: none; }
#ld-clouds.on { display: block; pointer-events: auto; }
#ld-txt { position: fixed; left: 0; right: 0; top: 55%; z-index: 8002; display: none; text-align: center; pointer-events: none; font-family: var(--font); font-weight: 700; font-size: clamp(22px, 4.2vw, 46px); color: #fff; text-shadow: 3px 3px 0 #16203c, -3px -3px 0 #16203c, 3px -3px 0 #16203c, -3px 3px 0 #16203c, 0 5px 0 #16203c; }   /* (11-11-2026) «Entrando al pueblo…», nítido */
html.ldc body > #ld-txt { clip-path: none; transform: none !important; visibility: visible !important; }
#ld-pano { position: fixed; left: 0; top: 0; z-index: 8000; display: none; transform-origin: 0 0; image-rendering: pixelated; pointer-events: none; max-width: none; }   /* (11-11-2026) el panorama del pueblo al bajar */
html.ldc body > #ld-pano { clip-path: none; }
html.ldc, html.ldc body { background: #8ccdf6 !important; overflow: hidden; }
html.ldc body > *:not(#ld-clouds) { clip-path: inset(0); }   /* lo que cada pantalla guarda fuera de la vista (cajones) no asoma al achicarla */
#ld-snap { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 8000; display: none; image-rendering: pixelated; pointer-events: none; }   /* (11-11-2026) la foto del fondo del juego con la que se sube */
html.ldc-fondo body > *:not(#game):not(#ld-clouds):not(#ld-pano):not(#ld-txt):not(#ld-snap) { visibility: hidden !important; }   /* (11-11-2026) al subir sólo queda el fondo del juego (el mapa de detrás del menú) */
html.ldc-z1 body > *:not(#ld-clouds) { transform: scale(.55); transform-origin: 50% 50%; }
html.ldc-z2 body > *:not(#ld-clouds) { transform: scale(.3); transform-origin: 50% 50%; }
html.ldc-z3 body > *:not(#ld-clouds) { transform: scale(.16); transform-origin: 50% 50%; }

/* (05-11-2026, el dueño) Ruleta: sin el ×30; debajo de las dos ×10, los «MAX» (la tirada más grande que pagan tus tickets).
   Antes .gx-pulls era una fila flex con 4 botones. */
#scr-gacha .gx-pulls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#scr-gacha .gx-pulls #pull-max { grid-column: 2; grid-row: 2; }
#scr-gacha .gx-pulls #pull-maxb { grid-column: 3; grid-row: 2; }
#scr-gacha .gx-dock .gx-pulls .btn.gx-max { min-height: 40px; font-size: 15px; padding: 4px 6px; }
@media (max-width: 560px) {
  #scr-gacha .gx-pulls { grid-template-columns: 1fr 1fr; }
  #scr-gacha .gx-pulls #pull-1 { grid-column: 1 / -1; }
  #scr-gacha .gx-pulls #pull-max { grid-column: 1; grid-row: 3; }
  #scr-gacha .gx-pulls #pull-maxb { grid-column: 2; grid-row: 3; }
  #scr-gacha .gx-dock .gx-pulls .btn.gx-max { min-height: 36px; font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #scr-gacha .gx-dock .gx-pulls .btn.gx-max { min-height: 26px; font-size: 11px; padding: 2px 4px; }
}
/* (05-11-2026) La animación del ataque también en «Elige tus ataques» (por encima de su pantalla) y, en el celular, más pequeña. */
.pc-mvpop { z-index: 9500; }
.pc-mvpop.sm { width: 170px; height: 128px; padding: 4px; border-width: 2px; }
.pc-mvpop.sm .pc-mvpop-n { font-size: 10px; }
/* (05-11-2026) Sobre fondo claro (Apoyar: el título «Plateado» y tu nombre en el ranking de ejemplo), el plateado celeste en tonos
   más oscuros para que se lea. Antes, el degradado claro casi no se veía sobre el papel crema. */
#scr-support .sup-lvh .nmc.silver, #scr-support .sup-ex .nmc.silver {
  background-image: linear-gradient(90deg, #1d6aa3, #47a9e3, #1a5f94, #6cc3f0, #1d6aa3); filter: none; }

/* (05-11-2026, el dueño trajo las tarjetas nuevas de cada rango) Tarjeta de entrenador con el arte de su rango (assets/cards/tc-*.webp:
   dorado Gholdengo, rojo Groudon, plateado Kyogre, shiny Mew; la medalla ya viene dibujada arriba a la derecha). Va en la tarjeta de
   ejemplo de «Apoyar» y en la de Ajustes › Cuenta cuando llevas ese marco. Antes: sólo un degradado del color del rango. */
.tcf.fr.t-gold, .sup-gc.t-gold { --tc-art: url("../assets/cards/tc-gold.webp"); --tc-bg: linear-gradient(180deg, #fde46f, #ffd244, #ffc21a); }
.tcf.fr.t-red { --tc-art: url("../assets/cards/tc-red.webp"); --tc-bg: linear-gradient(180deg, #fe9faa, #ff7b8a, #ff5f70); }
.tcf.fr.t-silver { --tc-art: url("../assets/cards/tc-silver.webp"); --tc-bg: linear-gradient(180deg, #d5ebfd, #b1defa, #97d1f6); }
.tcf.fr.t-shiny { --tc-art: url("../assets/cards/tc-shiny.webp"); --tc-bg: linear-gradient(180deg, #ebd9f4, #d8e1fe, #cae3ff); }
.sup-gc.tcf.fr { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.4) 48%, transparent 56%) -200% 0 / 300% 100% no-repeat,
  linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 72%), var(--tc-art) right center / auto 100% no-repeat, var(--tc-bg); }   /* (todo el alto del dibujo, a la derecha; lo que sobra a la izquierda, su color) (velo claro a la izquierda: se lee el texto encima del dibujo) */
.sup-gc.tcf.fr .sup-gc-b b, .sup-gc.tcf.fr .sup-gc-b span, .sup-gc.tcf.fr .sup-gc-b small { text-shadow: 0 0 4px rgba(255,255,255,.85), 0 1px 0 rgba(255,255,255,.7); }
.sup-gc.tcf.fr .sup-gc-t > :last-child { visibility: hidden; }   /* (la medalla ya está en el dibujo) */
.sup-gc.tcf.fr .sup-gc-av { background: rgba(255,255,255,.6); }
.set-tc.tcf.fr { background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 75%), var(--tc-art) right center / auto 100% no-repeat, var(--tc-bg); }
.set-tc.tcf.fr::after { display: none; }
/* (la animación del brillo mueve sólo la 1.ª capa; con 3 capas, sup-shine también movía el dibujo) */
.sup-gc.tcf.fr { animation-name: sup-shine3; }
@keyframes sup-shine3 { 0%, 60% { background-position: -200% 0, 0 0, right center, 0 0; } 100% { background-position: 200% 0, 0 0, right center, 0 0; } }

/* (05-11-2026, el dueño) Menú del clic derecho sobre un jugador con el color de su rango de apoyo (lobby-world-pie.js openCtx). Antes,
   siempre oscuro. */
#tw-ctx.t-gold { background: linear-gradient(160deg, #fff1a8, #ffd23f 45%, #f0a818); border-color: #b8860b; color: #3a2400; }
#tw-ctx.t-red { background: linear-gradient(160deg, #ff9aa6, #ff5f6d 45%, #c8203a); border-color: #8a1020; color: #fff; }
#tw-ctx.t-silver { background: linear-gradient(160deg, #e6f7ff, #94d4f5 45%, #4fa3d6); border-color: #2f75a6; color: #0f2e48; }
#tw-ctx.t-shiny { background: linear-gradient(160deg, #ffd6f2, #c8e8ff 35%, #e6d0ff 65%, #fff3b0); border-color: #8a5ad8; color: #2a1048; }
#tw-ctx[class*="t-"] .twx-h { border-bottom-color: rgba(0,0,0,.18); }
#tw-ctx[class*="t-"] .twx-h b { color: inherit; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
#tw-ctx.t-red .twx-h b { text-shadow: 0 1px 0 rgba(0,0,0,.35); }
#tw-ctx[class*="t-"] .twx-r:hover:not(.off), #tw-ctx[class*="t-"] .twx-r:focus-visible, #tw-ctx[class*="t-"] .twx-r.pad-focus { background: rgba(255,255,255,.4); }
#tw-ctx.t-red .twx-r:hover:not(.off), #tw-ctx.t-red .twx-r:focus-visible, #tw-ctx.t-red .twx-r.pad-focus { background: rgba(0,0,0,.18); }
#tw-ctx[class*="t-"] .twx-r.off, #tw-ctx[class*="t-"] .twx-n { color: inherit; opacity: .6; }

/* (05-11-2026, el dueño) Tarjeta del acompañante en el pueblo: clic derecho (o mantener el dedo) sobre el Pokémon que sigue a un jugador
   (lobby-world-pie.js openPk). Con el color del rango de apoyo de su dueño (t-gold / t-red / t-silver / t-shiny); sin rango, oscura. */
#tw-pk { position: fixed; z-index: 41; width: min(290px, calc(100vw - 12px)); display: none; flex-direction: column; gap: 6px; padding: 10px 12px 12px;
  background: rgba(22, 27, 40, .97); border: 2px solid #5b6782; border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.5);
  font: 600 12px system-ui, sans-serif; color: #e8edf7; --twp-bar: rgba(255,255,255,.15); --twp-fill: #ffd23f; }
#tw-pk.on { display: flex; }
#tw-pk.t-gold { background: linear-gradient(160deg, #fff1a8, #ffd23f 45%, #f0a818); border-color: #b8860b; color: #3a2400; --twp-bar: rgba(80,50,0,.18); --twp-fill: #8a5a00; }
#tw-pk.t-red { background: linear-gradient(160deg, #ff9aa6, #ff5f6d 45%, #c8203a); border-color: #8a1020; color: #fff; --twp-bar: rgba(0,0,0,.2); --twp-fill: #fff3b0; }
#tw-pk.t-silver { background: linear-gradient(160deg, #e6f7ff, #94d4f5 45%, #4fa3d6); border-color: #2f75a6; color: #0f2e48; --twp-bar: rgba(15,46,72,.18); --twp-fill: #1d6aa3; }
#tw-pk.t-shiny { background: linear-gradient(160deg, #ffd6f2, #c8e8ff 35%, #e6d0ff 65%, #fff3b0); border-color: #8a5ad8; color: #2a1048; --twp-bar: rgba(42,16,72,.15); --twp-fill: #8a5ad8; }
#tw-pk .twp-h { display: flex; gap: 10px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid rgba(127,127,127,.35); }
#tw-pk .twp-av { width: 64px; height: 64px; flex: none; border-radius: 8px; background: rgba(255,255,255,.18); display: grid; place-items: center; }
#tw-pk .twp-av canvas { image-rendering: pixelated; }
#tw-pk .twp-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#tw-pk .twp-id b { font: 700 16px Pixelify, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tw-pk .twp-id small { font-size: 11px; opacity: .8; }
#tw-pk .twp-st { color: #ff8ad8; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
#tw-pk p { margin: 0; }
#tw-pk .twp-runs { display: flex; align-items: center; gap: 6px; }
#tw-pk .twp-none { opacity: .8; font-weight: 500; }
#tw-pk .twp-tbl { display: grid; grid-template-columns: auto 1fr 1fr; gap: 3px 8px; align-items: center; margin-top: 2px; }
#tw-pk .twp-tbl > b { font-size: 11px; opacity: .75; }
#tw-pk .twp-tbl > span { display: flex; align-items: center; gap: 5px; min-width: 0; }
#tw-pk .twp-tbl em { font-style: normal; white-space: nowrap; } #tw-pk .twp-tbl em small { font-size: 10px; opacity: .75; }
#tw-pk .twp-bar { display: block; flex: 1; min-width: 24px; height: 6px; border-radius: 3px; background: var(--twp-bar); overflow: hidden; }
#tw-pk .twp-bar > i { display: block; height: 100%; background: var(--twp-fill); }
#tw-pk .twp-id b { color: inherit !important; text-shadow: none !important; -webkit-text-fill-color: currentColor; }

/* (05-11-2026, lo pidió un jugador) PC › Info: nivel de mejoras por región (pc-ui.js upgTags) y, en la Tienda de Mejoras, «Usar este Pokémon». */
.pc-rtags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
/* (10-11-2026) Eevee: la eeveelución favorita (pc-ui.js eeveeFavHtml) */
.pc-eevee { margin-top: 8px; display: grid; gap: 3px; }
.pc-eevee small { font-size: 11px; }
.pc-eevee .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-eevee .chip { padding: 2px 8px; font-size: 12px; }
.pc-rtag { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(26,42,74,.1); border: 1px solid rgba(26,42,74,.3); color: #1a2a4a; white-space: nowrap; }
.pc-rtag b { color: #b8302a; }
.mart-use { display: block; margin: 6px auto 0; }
#tw-pk .twp-tr { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font: inherit; color: inherit; background: rgba(255,255,255,.14); border: 1px solid rgba(127,127,127,.45); }
#tw-pk .twp-tr:hover, #tw-pk .twp-tr:focus-visible { background: rgba(255,255,255,.3); outline: none; }

/* (05-11-2026) Agradecimientos de «Apoyar»: cada nombre con el color de su rango (antes todos dorados). */
.sup-name.t-red { border-color: rgba(255,95,109,.7); color: #ff5f6d; }
.sup-name.t-silver { border-color: rgba(79,163,214,.75); color: #1d6aa3; background: rgba(150,215,250,.25); }
.sup-name.t-shiny { border-color: transparent; color: #7a3ac8; background: linear-gradient(#fff6, #fff6) padding-box, linear-gradient(90deg, #ff8ad8, #ffd23f, #5fe08a, #5fc8ff, #c47bff) border-box; }
.sup-name.t-gold { color: #8a5a00; background: rgba(255,210,63,.28); border-color: #e0b23a; }
.sup-name.t-red { color: #c8203a; background: rgba(255,95,109,.15); }

/* ============ (06-11-2026) Rueda mega: «¿Quieres cambiar algún ataque?» al megaevolucionar (js/ui/mega-wheel-ui.js) ============ */
#mw-root {
  --mw-ink: #0a0d18; --mw-win: #141b30; --mw-win2: #1d2643; --mw-fg: #eceaf6; --mw-muted: #9aa0bd; --mw-line: #39456e;
  --mw-gold: #ffd23f; --mw-bad: #ff6b6b; --mw-cy: #57e1ff; --mw-mg: #b36bff;
  position: fixed; inset: 0; z-index: 45; overflow: hidden; outline: none;
  background: radial-gradient(ellipse at 30% 50%, rgba(40,22,70,.86), rgba(4,5,12,.95));
  font-family: var(--font); color: var(--mw-fg); touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  animation: sw-in .18s ease-out;
}
#mw-root.mw-still { animation: none; }
#mw-root .mw-stage { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; }
#mw-root .mw-title { position: absolute; left: 0; right: 0; top: 7px; text-align: center; }
#mw-root .mw-k { font-size: 14px; letter-spacing: 3px; color: var(--mw-cy); text-shadow: 2px 2px 0 var(--mw-ink); }
#mw-root .mw-t { font-size: 30px; font-weight: 700; color: #fff; text-shadow: 3px 3px 0 var(--mw-ink); line-height: 1.1; }
#mw-root .mw-ring { position: absolute; border-radius: 50%; border: 3px dashed var(--mw-line); }
#mw-root .mw-face { position: absolute; left: 197px; top: 207px; width: 130px; height: 130px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #2d2a5a, #141b30);
  border: 4px solid var(--mw-cy); box-shadow: 0 0 0 3px var(--mw-ink), 0 0 30px rgba(179,107,255,.55); }
#mw-root .mw-face-img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
#mw-root .mw-face-cv { image-rendering: pixelated; }
#mw-root .mw-orb { position: absolute; width: 120px; height: 100px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px; }
#mw-root .mw-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--mw-win2); border: 3px solid var(--tc, #8fa3c4); box-shadow: 0 0 0 3px var(--mw-ink); }
#mw-root .mw-ic img { width: 38px; height: 38px; image-rendering: pixelated; }
#mw-root .mw-ic b { font-size: 26px; color: var(--mw-muted); }
#mw-root .mw-ic.mega { border-color: #fff; background: conic-gradient(from 0deg, #57e1ff, #b36bff, #ff6ad5, #ffd84a, #57e1ff); }
#mw-root .mw-l { font-size: 14px; font-weight: 700; text-shadow: 2px 2px 0 var(--mw-ink); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mw-root .mw-lv { font-size: 12px; color: var(--mw-muted); }
#mw-root .mw-was { font-size: 11px; color: var(--mw-bad); text-decoration: line-through; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mw-root .mw-orb.empty .mw-ic { border-style: dashed; border-color: var(--mw-line); }
#mw-root .mw-orb.swapped .mw-ic { box-shadow: 0 0 0 3px var(--mw-ink), 0 0 0 7px var(--mw-cy), 0 0 18px rgba(87,225,255,.7); }
#mw-root .mw-orb.cur .mw-ic, #mw-root .mw-orb.hov .mw-ic, #mw-root .mw-orb:hover .mw-ic { outline: 3px solid var(--mw-gold); outline-offset: 4px; }
#mw-root .mw-side { position: absolute; left: 540px; top: 72px; width: 380px; display: flex; flex-direction: column; gap: 9px; }
#mw-root .mw-h { font-size: 13px; color: var(--mw-muted); line-height: 1.3; }
#mw-root .mw-off { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 12px; text-align: left; cursor: grab; color: inherit; font: inherit;
  background: var(--mw-win); border: 3px solid var(--mw-line); box-shadow: 0 0 0 3px var(--mw-ink); }
#mw-root .mw-off .mw-ic { width: 42px; height: 42px; }
#mw-root .mw-off .mw-ic img { width: 30px; height: 30px; }
#mw-root .mw-off.mega { border-color: var(--mw-cy); }
#mw-root .mw-off.sel { border-color: var(--mw-gold); background: var(--mw-win2); }
#mw-root .mw-off.placed { opacity: .5; }
#mw-root .mw-on { font-size: 17px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mw-root .mw-pill { font-size: 10px; letter-spacing: 1px; padding: 2px 6px; border-radius: 3px; flex: none; }
#mw-root .mw-pill.mg { background: var(--mw-mg); color: #fff; }
#mw-root .mw-pill.in { background: var(--mw-cy); color: #06212a; display: none; }
#mw-root .mw-off.placed .mw-pill.in { display: inline-block; }
#mw-root .mw-desc { min-height: 64px; font-size: 14px; line-height: 1.35; padding: 8px 12px; background: var(--mw-win); border-left: 4px solid var(--tc, var(--mw-mg)); }
#mw-root .mw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 62px; display: flex; align-items: center; justify-content: center; gap: 16px;
  background: rgba(10,13,24,.85); border-top: 3px solid var(--mw-line); }
#mw-root .mw-hint { font-size: 12px; color: var(--mw-muted); display: inline-flex; align-items: center; gap: 4px; }
#mw-root .mw-kb { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border: 2px solid var(--mw-line); color: var(--mw-fg); font-size: 11px; }
#mw-root .mw-btn { font: inherit; font-size: 18px; font-weight: 700; padding: 10px 26px; cursor: pointer; border: 3px solid var(--mw-ink);
  background: var(--mw-gold); color: #2a1e00; box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
#mw-root .mw-btn.mw-ghost { background: var(--mw-win2); color: var(--mw-fg); }
#mw-root .mw-btn:focus-visible, #mw-root .mw-off:focus-visible, #mw-root .mw-orb:focus-visible { outline: 3px solid var(--mw-cy); outline-offset: 3px; }
.mw-drag { position: fixed; z-index: 46; pointer-events: none; transform: translate(-50%, -50%) scale(1.1); opacity: .9; }
.mw-drag.mw-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 3px solid #fff; background: #1d2643; }
.mw-drag.mw-ic.mega { background: conic-gradient(from 0deg, #57e1ff, #b36bff, #ff6ad5, #ffd84a, #57e1ff); }
.mw-drag img { width: 32px; height: 32px; image-rendering: pixelated; }
@media (pointer: coarse) { #mw-root .mw-hk { display: none; } }
/* (07-11-2026) con mando: sus botones en vez de las teclas */
#mw-root .mw-hp { display: none; }
body.pad-here #mw-root .mw-hp { display: inline-flex; }
body.pad-here #mw-root .mw-hk:not(:first-child):not(:nth-child(2)) { display: none; }

/* (08-11-2026) gacha: Célula de Zygarde al repetir Zygarde 10% */
.pcard .zcell-tag { color: #7dff9a; display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: 800; font-size: 11px; white-space: nowrap; text-shadow: 0 0 6px rgba(80, 255, 140, .55); }
.pcard .zcell-tag img { image-rendering: pixelated; }

/* (08-11-2026) Ventanita de AZ en el pueblo (lobby-world.js, azPick): células de Zygarde y sus retos */
#tw-azpick { position: absolute; inset: 0; z-index: 9; display: none; place-items: center; background: rgba(10,14,30,.45); padding: 12px; }
#tw-azpick.on { display: grid; }
#tw-azpick .tw-mp { width: min(460px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; }
#tw-azpick h2 { margin: 0; } #tw-azpick p { margin: 0; max-width: 40ch; font-size: 14px; }
#tw-azpick .az-cells { display: flex; align-items: center; gap: 10px; width: min(320px, 100%); }
#tw-azpick .az-cells img { image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(90,255,140,.6)); flex: none; }
#tw-azpick .az-bar { flex: 1; height: 10px; border-radius: 6px; background: rgba(0,0,0,.18); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); }
#tw-azpick .az-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2f9a4e, #7dff9a); }
#tw-azpick .az-cells b { font-variant-numeric: tabular-nums; white-space: nowrap; }
#tw-azpick .btn[disabled] { opacity: .5; cursor: default; }

/* (08-11-2026) Repartir niveles antes de un reto de AZ (azbuild-ui.js) */
#az-build { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; background: rgba(6,14,10,.6); padding: 12px; }
#az-build.on { display: grid; }
/* (08-11-2026) El botón ▶ de cada fila: la demo del ataque (azbuild-ui.js, G.MvPop) */
#az-build .azb-ver { grid-area: ver; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line, #8aa); background: #1f3a7a; color: #ffe27a; font-size: 14px; cursor: pointer; display: grid; place-items: center; padding: 0 0 0 2px; }
#az-build .azb-ver:hover, #az-build .azb-ver:focus-visible { background: #2c4fa0; outline: none; }
#az-build .azb-box { width: min(560px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#az-build h2 { margin: 0; }
#az-build .azb-sub { margin: 0; font-size: 14px; text-align: center; max-width: 46ch; }
#az-build .azb-rows { display: grid; gap: 8px; width: 100%; }
#az-build .azb-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; grid-template-areas: 'n pick ver lv' 'n badge badge badge'; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; background: rgba(31,138,76,.12); box-shadow: inset 0 0 0 2px rgba(31,138,76,.35); }
#az-build .azb-row.empty { opacity: .75; background: rgba(0,0,0,.06); box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); }
#az-build .azb-n { grid-area: n; font-weight: 800; font-size: 18px; color: #1f8a4c; text-align: center; }
#az-build .azb-pick { grid-area: pick; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#az-build .azb-name { display: flex; align-items: center; gap: 6px; }
#az-build .azb-sel { width: 100%; }
#az-build .azb-pips { display: flex; gap: 3px; flex-wrap: wrap; }
#az-build .azb-pips i { width: 14px; height: 7px; border-radius: 2px; background: rgba(0,0,0,.18); }
#az-build .azb-pips i.on { background: #2fb35c; }
#az-build .azb-pips i.gx { background: rgba(196,123,255,.25); box-shadow: inset 0 0 0 1px #c47bff; }
#az-build .azb-pips i.gx.on { background: linear-gradient(90deg, #c47bff, #ffd23f); }
#az-build .azb-lv { grid-area: lv; display: flex; align-items: center; gap: 6px; }
#az-build .azb-lv b { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; font-size: 18px; }
#az-build .azb-lv .btn { min-width: 34px; padding: 4px 0; }
#az-build .azb-gx, #az-build .azb-max { grid-area: badge; font-size: 12px; font-weight: 800; }
#az-build .azb-gx { color: #9b4dca; } #az-build .azb-max { color: #1f8a4c; }
#az-build .azb-left { margin: 0; font-weight: 800; color: #b8590a; } #az-build .azb-left.done { color: #1f8a4c; }

/* (08-11-2026, lo pidió el dueño) Rareza de las piezas del entrenador en «Personalizar» (trainer-ui.js): marco y etiqueta. */
.trn-it.trn-rar { position: relative; }
.trn-it.trn-rar-comun { box-shadow: inset 0 0 0 2px #9aa0ae; }
.trn-it.trn-rar-raro { box-shadow: inset 0 0 0 2px #3a8ae0; }
.trn-it.trn-rar-epico { box-shadow: inset 0 0 0 2px #a050e0; }
.trn-it.trn-rar-legendario { box-shadow: inset 0 0 0 2px #f2b830, 0 0 8px rgba(242,184,48,.55); }
.trn-rar-tag { position: absolute; top: 3px; left: 3px; font-style: normal; font-size: 9px; line-height: 1; font-weight: 800; padding: 2px 4px; border-radius: 4px; color: #fff; pointer-events: none; }
.trn-rar-comun .trn-rar-tag { background: #7a8090; }
.trn-rar-raro .trn-rar-tag { background: #2a6ac0; }
.trn-rar-epico .trn-rar-tag { background: #8a3ac8; }
.trn-rar-legendario .trn-rar-tag { background: linear-gradient(90deg, #f0b000, #ffe680, #fffaf0); color: #5a3a00; }   /* (09-11-2026) dorado y blanco, como su ciclo; antes rojo, violeta y azul */

/* (09-11-2026, lo pidió el dueño; diseño A) «Personalizar»: filtro por rareza, buscador y «Sólo las que tengo»; un rombo del color
   de la rareza en cada pieza (antes, una etiqueta escrita: .trn-rar-tag). */
.trn-filt { display: flex; flex-direction: column; gap: 6px; }
.trn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trn-chip { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; line-height: 1.2;
  padding: 3px 11px 3px 9px; border-radius: 999px; border: 2px solid var(--lic-pap3); background: var(--lic-pap2); color: var(--lic-ink); }
.trn-chip b { font-weight: 400; font-size: 12px; opacity: .7; }
.trn-chip i { width: 10px; height: 10px; transform: rotate(45deg); border: 1.5px solid rgba(0,0,0,.3); background: var(--rc, transparent); }
.trn-chip-todas i { display: none; }
.trn-chip:hover { border-color: var(--lic-ink); }
.trn-chip.on { background: var(--lic-ink); border-color: var(--lic-ink); color: var(--lic-pap); }   /* (09-11-2026) letra del color del papel (antes #fff: en oscuro, blanco sobre crema) */
.trn-chip.on b { opacity: .85; }
.trn-chip-comun { --rc: #8a90a0; } .trn-chip-raro { --rc: #2f7ee0; } .trn-chip-epico { --rc: #9a48da; }
.trn-chip-legendario { --rc: linear-gradient(135deg, #f0b000, #ffe680, #ffffff); }
.trn-chip-comun.on { background: #7a8090; border-color: #7a8090; } .trn-chip-raro.on { background: #2a6ac0; border-color: #2a6ac0; }
.trn-chip-epico.on { background: #8a3ac8; border-color: #8a3ac8; }
.trn-chip-legendario.on { background: linear-gradient(90deg, #f0b000, #ffe680, #fffaf0); border-color: #d89a00; color: #5a3a00; }
.trn-fil2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.trn-q { font: inherit; font-size: 14px; color: var(--lic-ink); background: var(--lic-field); border: 2px solid var(--lic-pap3); border-radius: 8px; padding: 3px 9px; width: 190px; max-width: 100%; }
.trn-q:focus { outline: none; border-color: var(--lic-ink); }
.trn-mias { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.trn-mias input { accent-color: var(--lic-ink); width: 16px; height: 16px; margin: 0; }
.trn-rar-gem { position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; transform: rotate(45deg); border: 1.5px solid rgba(0,0,0,.35); pointer-events: none; }
.trn-rar-comun .trn-rar-gem { background: #8a90a0; } .trn-rar-raro .trn-rar-gem { background: #2f7ee0; } .trn-rar-epico .trn-rar-gem { background: #9a48da; }
.trn-rar-legendario .trn-rar-gem { background: linear-gradient(135deg, #f0b000, #ffe680, #ffffff); }
.trn-it.trn-rar-comun { box-shadow: none; }   /* (09-11-2026) las comunes, con el borde de siempre; el marco de color, de raro para arriba */
.trn-it.trn-rar-comun.on { box-shadow: inset 0 0 0 2px var(--lic-pap), inset 0 0 0 3px var(--lic-red); }
.trn-it.trn-rar-raro.on, .trn-it.trn-rar-epico.on, .trn-it.trn-rar-legendario.on { border-color: var(--lic-red); }
html.theme-dark .trn-q { background: rgb(var(--lic-pap-rgb) / .9); }
@media (max-height: 520px) {
  .trn-chip { font-size: 12px; padding: 1px 8px 1px 7px; gap: 5px; }
  .trn-chip b { font-size: 11px; }
  .trn-q { font-size: 13px; padding: 2px 8px; width: 150px; }
  .trn-mias { font-size: 13px; }
  .trn-filt { gap: 4px 10px; flex-direction: row; flex-wrap: wrap; align-items: center; }   /* en el móvil apaisado, en una fila si cabe */
}
@media (min-height: 521px) { .trn-filt ~ .trn-grid { min-height: 250px; } }   /* que la caja no salte de alto al filtrar */

/* (09-11-2026, lo pidió el dueño) Cajas de cosméticos (js/ui/cajas-ui.js): la ruleta y la tienda con Ko-fi. */
.cj-box { width: min(980px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; gap: 10px; }
.cj-pane { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.cj-pane[hidden], .cj-res[hidden], .cj-steps[hidden] { display: none; }
.cj-r-comun { --rc: #8a90a0; } .cj-r-raro { --rc: #2f7ee0; } .cj-r-epico { --rc: #9a48da; } .cj-r-legendario { --rc: #e8a820; }
.cj-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cj-keys { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; }
.cj-keys b { font-size: 24px; }
.cj-key { width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M2 2h8v2H2z' fill='%238a48da'/%3E%3Cpath d='M1 5h10v6H1z' fill='%236a30b0'/%3E%3Cpath d='M5 2h2v9H5z' fill='%23ffd23f'/%3E%3C/svg%3E") center/contain no-repeat; image-rendering: pixelated; }
.cj-odds { display: flex; flex-wrap: wrap; gap: 6px; }
.cj-odd { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 2px 10px 2px 8px; border-radius: 999px; border: 2px solid var(--rc); background: var(--lic-pap2); }
.cj-odd i { width: 10px; height: 10px; transform: rotate(45deg); background: var(--rc); border: 1.5px solid rgba(0,0,0,.3); }
.cj-odd.cj-r-legendario i { background: linear-gradient(135deg, #f0b000, #ffe680, #fff); }
.cj-reel { position: relative; height: 132px; overflow: hidden; border-radius: 10px; background: linear-gradient(#1d2747, #10162c); box-shadow: inset 0 0 0 3px var(--lic-ink), inset 0 0 24px rgba(0,0,0,.6); }
.cj-strip { position: absolute; left: 0; top: 14px; display: flex; gap: 6px; padding-left: 6px; will-change: transform; }
.cj-tile { flex: 0 0 96px; height: 104px; border-radius: 8px; background: linear-gradient(#2b3560, #1b2340); border-bottom: 6px solid var(--rc); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 4px; overflow: hidden; }
.cj-tile canvas { width: 72px; height: 72px; image-rendering: pixelated; }
.cj-tile small { color: #e8ecff; font-size: 10px; line-height: 1.05; text-align: center; padding: 0 3px; max-height: 2.2em; overflow: hidden; }
.cj-tile.cj-r-legendario { background: linear-gradient(#5a4210, #2a1e08); box-shadow: inset 0 0 12px rgba(255,210,63,.5); }
.cj-tile.cj-r-epico { background: linear-gradient(#3e2068, #1e1236); }
.cj-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #ffd23f; box-shadow: 0 0 10px #ffd23f; }
.cj-mark::before, .cj-mark::after { content: ""; position: absolute; left: -7px; border: 9px solid transparent; }
.cj-mark::before { top: 0; border-top-color: #ffd23f; } .cj-mark::after { bottom: 0; border-bottom-color: #ffd23f; }
.cj-res { position: absolute; inset: 8px; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 6px 14px; border-radius: 10px; border: 3px solid var(--rc); background: var(--lic-pap2); animation: cj-pop .35s ease-out; }
.cj-res.cj-r-legendario { background: linear-gradient(90deg, #fff1b8, #fffaf0); color: #1a3170; box-shadow: 0 0 18px rgba(232,168,32,.6); }   /* (09-11-2026) + color fijo: el fondo es claro también en oscuro */
.cj-win canvas { width: 96px; height: 96px; image-rendering: pixelated; }
.cj-res .row { margin: 0; }
.cj-wtx { display: flex; flex-direction: column; gap: 3px; }
.cj-wtx em { font-style: normal; font-size: 13px; color: var(--rc); font-weight: 700; }
.cj-wtx b { font-size: 22px; } .cj-wtx small { font-size: 13px; opacity: .8; }
@keyframes cj-pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cj-res { animation: none; } }
.cj-acts { gap: 10px; flex-wrap: wrap; }
.cj-note { margin: 0; font-family: var(--lic-type); font-size: 13px; opacity: .75; }
/* (09-11-2026) caja gratis cada 24 h: el texto con la cuenta atrás, el botón cuando es gratis y el punto rojo en los botones de las cajas */
.cj-free { margin: 0; font-family: var(--lic-type); font-size: 14px; opacity: .85; }
.cj-free.on { color: var(--gold); opacity: 1; font-weight: 700; }
#cj-open.cj-libre:not(:disabled) { animation: cjLibre 1.4s ease-in-out infinite; }
@keyframes cjLibre { 50% { box-shadow: 0 0 0 3px rgba(255, 210, 63, .45), 0 0 14px rgba(255, 210, 63, .7); } }
@media (prefers-reduced-motion: reduce) { #cj-open.cj-libre:not(:disabled) { animation: none; box-shadow: 0 0 0 3px rgba(255, 210, 63, .5); } }
[data-go="cajas"].cj-gratis { position: relative; }
[data-go="cajas"].cj-gratis::after { content: ''; position: absolute; top: 5px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: #ff5f6d; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); pointer-events: none; }
/* (11-11-2026, lo pidió el dueño; maqueta A) Mercado rediseñado: pestañas arriba y anuncios en fichas (antes, tabla de filas) */
#scr-market .mk-tabs { display: flex; gap: 6px; flex: none; }
#scr-market .mk-tab { font-size: 15px; font-weight: 700; padding: 6px 14px; border-radius: 10px; background: transparent; color: #f4e7c9; border: 2px solid #f4e7c9; white-space: nowrap; }
#scr-market .mk-tab.on { background: #f4e7c9; color: #1a3170; }
#scr-market .mk-tab:hover { filter: brightness(1.12); }
#scr-market .mk-tab i { font-style: normal; font-size: 11px; min-width: 18px; margin-left: 6px; padding: 1px 5px; border-radius: 9px; background: var(--lic-red); color: #fff; display: inline-block; }
#scr-market .mk-tab i:empty { display: none; }
#scr-market .mk-subt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scr-market .mk-fil[hidden] { display: none; }
#scr-market .mk-morebtn { display: inline-block !important; flex: none; }   /* «Más filtros» también en PC: los avanzados van plegados (antes siempre a la vista) */
#scr-market .mk-extra { display: none; flex-wrap: wrap; } #scr-market .mk-fil.more .mk-extra { display: flex; }
#scr-market .mk-chip { flex: none; font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 999px; background: var(--lic-pap); color: var(--lic-ink); border: 2px solid rgb(var(--lic-ink-rgb) / .45); white-space: nowrap; }
#scr-market .mk-chip.on { background: var(--lic-band); color: #ffd23f; border-color: var(--lic-ink); }
#scr-market .mk-r-comun { --rc: #8a90a0; } #scr-market .mk-r-raro { --rc: #2f7ee0; } #scr-market .mk-r-epico { --rc: #9a48da; } #scr-market .mk-r-legendario { --rc: #e8a820; }
#scr-market .mk-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; padding: 8px; align-content: start; grid-auto-rows: max-content; }
#scr-market .mk-card > * { flex: none; }
#scr-market .mk-table .mk-none { grid-column: 1 / -1; }
#scr-market .mk-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 8px 6px; min-height: 0; min-width: 0; border-bottom: 5px solid var(--rc, #8a90a0); }
#scr-market .mk-card .spr { align-self: center; height: 64px; display: flex; align-items: center; justify-content: center; }
#scr-market .mk-card .cn { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scr-market .mk-card .cs, #scr-market .mk-card .sl { font-size: 11px; max-width: 100%; }
#scr-market .mk-card .sl { opacity: .8; display: block; }
#scr-market .mk-card .tp { gap: 6px; margin-top: 2px; }
#scr-market .mk-card .lf { text-align: left; font-size: 11px; }
#scr-market .mk-card.on { box-shadow: 0 0 0 3px #ffd23f; border-color: var(--lic-ink); border-bottom-color: var(--rc, #8a90a0); }
#scr-market .mk-prev { display: block; overflow: visible; border: 0; background: none; padding: 0; }
#scr-market .mk-prev .mk-card { width: 170px; }
#scr-market .dt-cos canvas { width: 128px; height: 128px; }
#scr-market .dt-rar { color: var(--rc); }
#scr-market .mk-pmon[class*="mk-r-"] { border-bottom: 4px solid var(--rc); }
#scr-market .mk-mrow .mi small { font-size: 11px; opacity: .8; margin-left: 6px; }
@media (max-width: 760px), (max-height: 520px) {
  #scr-market .mk-table { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 5px; padding: 5px; }
  #scr-market .mk-card { display: flex; padding: 5px; } #scr-market .mk-card > .sl { display: block; }
  #scr-market .mk-card .spr { height: 52px; } #scr-market .mk-card .spr canvas { max-height: 52px; width: auto; }
  #scr-market .mk-tab { font-size: 12px; padding: 4px 8px; } #scr-market .mk-chip { font-size: 11px; padding: 3px 8px; }
  #scr-market .dt-cos canvas { width: 72px; height: 72px; }
}
/* (11-11-2026) fichas de cosmético de gimnasio, debajo de la ruleta */
.cj-gym h3 { margin: 6px 0 2px; font-size: 17px; }
.cj-gyms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cj-gbtn { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 104px; border-bottom: 4px solid #9a48da; }
.cj-gbtn span { font-size: 12px; opacity: .85; }
.cj-have { position: absolute; top: 3px; right: 5px; font-size: 11px; font-weight: 700; color: var(--lic-pap); background: var(--lic-ink); border-radius: 6px; padding: 0 4px; }   /* (09-11-2026) antes color #fff: en oscuro no se leía */
@media (max-height: 520px) {
  .cj-box { padding: 10px 12px; max-height: calc(100dvh - 12px); gap: 6px; }
  .cj-reel { height: 112px; } .cj-tile { flex-basis: 84px; height: 92px; } .cj-tile canvas { width: 60px; height: 60px; }
  .cj-win canvas { width: 72px; height: 72px; } .cj-wtx b { font-size: 18px; }
}

/* (09-11-2026, lo pidió el dueño) La Mochila (js/ui/mochila-ui.js): objetos con cuántos tienes y las piezas del entrenador.
   (10-11-2026, lo pidió el dueño) Rehecha: casilleros a la izquierda y la ficha de lo elegido a la derecha. Antes: una caja de 900 px
   con los objetos en fichas anchas de una línea (.mo-objs / .mo-obj: dibujo de 30 px, nombre, detalle y «×N») y las piezas debajo. */
#scr-mochila { padding-top: 66px; }   /* (que la barra de arriba no tape el «Volver») */
@media (max-height: 520px) { #scr-mochila { padding-top: 42px; } }
.mo-box.bg-box { width: min(1060px, 100%); height: min(700px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; }
.bg-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; }
.bg-left { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.bg-tabs { flex: none; display: flex; gap: 6px; }
.bg-tab { appearance: none; font: inherit; font-size: 14px; cursor: pointer; padding: 5px 14px; border-radius: 9px; border: 2px solid rgb(var(--lic-ink-rgb) / .3); background: var(--lic-pap2); color: var(--lic-ink); display: inline-flex; align-items: center; gap: 7px; }
.bg-tab b { font-weight: 400; font-size: 12px; opacity: .7; font-family: var(--lic-type); }
.bg-tab:hover { border-color: var(--lic-ink); }
.bg-tab.on { background: var(--lic-band); border-color: var(--lic-band); color: #ffd23f; } .bg-tab.on b { color: #f4e7c9; opacity: .9; }
.bg-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 6px 4px 2px; }
.mo-h { margin: 4px 0 0; font-size: 17px; display: flex; align-items: baseline; gap: 10px; }
.mo-h small { font-size: 13px; font-family: var(--lic-type); opacity: .75; }
.bg-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px; }
.bg-slot { appearance: none; font: inherit; color: var(--lic-ink); cursor: pointer; position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 6px;
  border-radius: 12px; border: 2px solid var(--lic-pap3); background: var(--lic-field); box-shadow: inset 0 -3px 0 rgb(var(--lic-ink-rgb) / .07); }
.bg-slot:hover { border-color: var(--lic-ink); }
.bg-slot.on { border-color: var(--lic-ink); box-shadow: 0 0 0 2px var(--lic-gold), inset 0 -3px 0 rgb(var(--lic-ink-rgb) / .07); background: var(--lic-pap); }
.bg-ic { height: 44px; display: grid; place-items: center; } .bg-ic > * { display: block; }
.bg-slot small { font-size: 11.5px; line-height: 1.15; text-align: center; min-height: 2.3em; display: flex; align-items: center; overflow-wrap: anywhere; }
.bg-slot em { position: absolute; top: 4px; right: 4px; font-style: normal; font-size: 12px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 8px; background: var(--lic-band); color: #ffd23f; }
.bg-slot.zero { border-style: dashed; background: transparent; box-shadow: none; }
.bg-slot.zero .bg-ic { filter: grayscale(1); opacity: .4; } .bg-slot.zero small { opacity: .55; }
.bg-slot.zero em { background: rgb(var(--lic-ink-rgb) / .12); color: rgb(var(--lic-ink-rgb) / .6); }
.mo-grid .trn-it { position: relative; }
.mo-grid .trn-it.on { border-color: var(--lic-ink); box-shadow: 0 0 0 2px var(--lic-gold); }   /* elegida (antes .on era «la llevas puesta») */
.mo-grid .trn-it.puesta::after { content: '✓'; position: absolute; left: 4px; bottom: 22px; width: 16px; height: 16px; border-radius: 50%; background: #1d7a35; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
/* la ficha */
.bg-detail { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 14px 12px; text-align: center;
  border-radius: 14px; border: 2px solid rgb(var(--lic-ink-rgb) / .3); background: rgb(var(--lic-wash) / .42); }
.bg-big { width: 150px; height: 150px; flex: none; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(ellipse 60% 16% at 50% 84%, rgb(var(--lic-ink-rgb) / .18), transparent 70%), var(--lic-pap2);
  box-shadow: 0 0 0 2px var(--lic-ink), 3px 3px 0 rgb(var(--lic-ink-rgb) / .25); }
.bg-big > * { display: block; } .bg-big.zero > * { filter: grayscale(1); opacity: .45; }
.bg-big.bg-me { width: 172px; height: 188px; } .bg-big.bg-me canvas { width: 160px; height: 176px; image-rendering: pixelated; }
.bg-big.trn-rar-raro { box-shadow: 0 0 0 3px #3a8ae0, 3px 3px 0 rgb(var(--lic-ink-rgb) / .25); } .bg-big.trn-rar-epico { box-shadow: 0 0 0 3px #a35be0, 3px 3px 0 rgb(var(--lic-ink-rgb) / .25); }
.bg-big.trn-rar-legendario { box-shadow: 0 0 0 3px #e2b13a, 0 0 18px rgba(226,177,58,.6); }
.bg-detail h3 { margin: 6px 0 0; font-size: 19px; line-height: 1.15; }
.bg-qty { margin: 0; font-size: 24px; font-weight: 700; color: var(--lic-red); } .bg-qty.zero { font-size: 13px; font-weight: 400; font-family: var(--lic-type); color: rgb(var(--lic-ink-rgb) / .65); }
.bg-desc { margin: 0; font-family: var(--lic-type); font-size: 13.5px; line-height: 1.35; color: rgb(var(--lic-ink-rgb) / .8); }
.bg-tags { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; font-size: 12px; }
.bg-tags span { padding: 2px 9px; border-radius: 8px; background: rgb(var(--lic-ink-rgb) / .1); }
.bg-rar-comun { background: #9aa0ae !important; color: #10131a; } .bg-rar-raro { background: #3a8ae0 !important; color: #fff; } .bg-rar-epico { background: #a35be0 !important; color: #fff; } .bg-rar-legendario { background: #e2b13a !important; color: #1a1208; }
.bg-go { margin-top: auto; width: 100%; } .bg-custom { width: 100%; }
.pc-cosm { max-height: 60vh; overflow: auto; }
@media (max-height: 520px) { .mo-box { padding: 10px 12px; max-height: calc(100dvh - 12px); } .mo-objs { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }

/* ============ Moderación: ventana flotante (11-11-2026, Albert) ===== * Como el Modo creativo (js/dev/creative.js): azul oscuro, borde dorado, botones crema pequeños. Se arrastra por la cabecera y se
 * estira desde la esquina (resize). Dentro, acordeón de secciones (.mod-sec) y, bajo la abierta, su contenido (#mod-list), que
 * reutiliza lo que pintan las secciones de siempre (.mod-gift, .gf-row, .rk-row…) con estos estilos compactos. */
#mod-win { position: fixed; left: 10px; top: 10px; z-index: 9990; width: 360px; height: 620px; min-width: 290px; min-height: 240px; max-width: calc(100vw - 4px); max-height: calc(100dvh - 4px);
  display: flex; flex-direction: column; resize: both; overflow: hidden; box-sizing: border-box;
  font: 13px/1.35 'Pixelify', 'Trebuchet MS', sans-serif; color: #f4e7c9; background: #101c40f5; border: 2px solid #ffd23f; border-radius: 10px; box-shadow: 0 10px 30px #0008; }
#mod-win.hidden { display: none; }
#mod-win * { box-sizing: border-box; }
#mod-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; cursor: move; touch-action: none; user-select: none; flex: none; }
#mod-head b { flex: 1; color: #ffd23f; font-size: 16px; }
#mod-x { background: none; border: 0; color: #f4e7c9; font: inherit; font-size: 16px; cursor: pointer; padding: 0 4px; }
#mod-win .mod-who { display: flex; gap: 6px; align-items: center; background: #1a3170; border-radius: 8px; padding: 6px 8px; margin: 0 10px 6px; flex: none; }
#mod-win .mod-who input { flex: 1; min-width: 0; }
#mod-acc { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 12px; }
#mod-win .mod-sec { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; color: #f4e7c9; background: none; border: 0; border-top: 1px solid #ffffff1f; padding: 8px 2px; cursor: pointer; }
#mod-win .mod-sec[aria-expanded="true"] { color: #ffd23f; }
#mod-win .mod-sec::before { content: '▸ '; color: #9fb6ff; } #mod-win .mod-sec[aria-expanded="true"]::before { content: '▾ '; }
#mod-win .mod-grip { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; pointer-events: none; background: linear-gradient(135deg, #0000 50%, #ffd23f 50% 60%, #0000 60% 70%, #ffd23f 70% 80%, #0000 80%); }
#mod-win button:focus-visible, #mod-win input:focus-visible, #mod-win select:focus-visible, #mod-win textarea:focus-visible { outline: 2px solid #ffd23f; outline-offset: 1px; }
#mod-list { display: flex; flex-direction: column; gap: 5px; padding: 0 0 10px; max-height: none !important; overflow: visible; }
#mod-list[hidden] { display: none; }
#mod-list .sub, #mod-list p { font-family: 'Courier Prime', 'Courier New', monospace; font-size: 11.5px; line-height: 1.35; color: #f4e7c9cc; margin: 2px 0; text-shadow: none; }
#mod-list h3 { margin: 10px 0 2px; font-size: 12px; color: #9fb6ff; font-weight: 700; text-shadow: none; }
#mod-list .btn { font: inherit; font-size: 12px; min-height: 0; background: #f4e7c9; color: #1a3170; border: 0; border-radius: 6px; padding: 5px 8px; box-shadow: none; text-shadow: none; cursor: pointer; }
#mod-list .btn:hover { background: #ffd23f; transform: none; }
#mod-list .btn.on, #mod-list .btn.gold { background: #ffd23f; color: #101c40; }
#mod-list .btn.on { box-shadow: inset 0 0 0 2px #1a3170; }
#mod-list .btn.danger { background: #d8443a; color: #fff; }
#mod-list .btn.ghost { background: none; color: #f4e7c9; box-shadow: inset 0 0 0 1px #f4e7c966; }
#mod-list .btn:disabled { opacity: .45; cursor: not-allowed; }
#mod-list #mod-purge { align-self: flex-start; margin-top: 6px; }
#mod-win input, #mod-win select, #mod-win textarea { font: inherit; font-size: 12.5px; min-height: 0; padding: 4px 6px; border-radius: 6px; border: 0; background: #f4e7c9; color: #1a3170; min-width: 0; max-width: 100%; }
#mod-win input[type=checkbox] { width: 16px; height: 16px; padding: 0; accent-color: #ffd23f; }
#mod-win input[type=number] { width: 62px; }
#mod-list label { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: #9fb6ff; }
#mod-list .mod-gift { display: flex; flex-direction: column; gap: 6px; padding: 0; }
#mod-list .mod-gift > .gf-row, #mod-list .gf-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
#mod-list .gf-row[hidden], #mod-list [data-gk][hidden] { display: none; }
#mod-list .gf-row > .sub { flex-basis: 100%; }
#mod-list .mod-gift input:not([type=number]):not([type=checkbox]):not([type=hidden]) { min-width: 0; width: 100%; flex: none; }
#mod-list .mod-gift label:has(> input:not([type=number]):not([type=checkbox])) { flex: 1 1 130px; }
#mod-list .gf-chk { flex-direction: row; align-items: center; gap: 4px; padding-bottom: 4px; color: #f4e7c9; }
#mod-list .gf-kinds, #mod-list .gf-quick { display: flex; flex-wrap: wrap; gap: 5px; }
#mod-list .gf-four label { flex: 1 1 56px; } #mod-list .gf-four input { width: 100%; }
#mod-list .gf-pack { display: flex; flex-wrap: wrap; gap: 5px; min-height: 30px; padding: 0; border: 0; }
#mod-list .gf-item { display: flex; align-items: center; gap: 6px; background: #22397f; border-radius: 8px; padding: 3px 4px 3px 8px; font-size: 12px; color: #f4e7c9; }
#mod-list .gf-item small { font-size: 10.5px; color: #f4e7c9b0; } #mod-list .gf-item canvas, #mod-list .gf-item img { flex: none; }
#mod-list .gf-item .btn { padding: 2px 7px; }
#mod-list .rk-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; align-items: center; padding: 7px 8px; background: #ffffff0d; border: 0; border-radius: 7px; box-shadow: none; }
#mod-list .rk-row .who b { font-size: 13px; color: #f4e7c9; white-space: normal; text-shadow: none; }
#mod-list .rk-row .who small { font-family: 'Courier Prime', 'Courier New', monospace; font-size: 11px; color: #f4e7c9b0; }
#mod-list .rk-row .time { font-size: 14px; color: #ffd23f; }
#mod-list .mod-acts { display: flex; flex-wrap: wrap; gap: 5px; }
#mod-list table { width: 100%; border-collapse: collapse; font-size: 12px; } #mod-list th, #mod-list td { padding: 3px 4px; text-align: left; color: #f4e7c9; }
#mod-list a { color: #9fb6ff; }
@media (max-width: 480px) { #mod-win { width: calc(100vw - 8px) !important; left: 4px !important; } }

/* (11-11-2026, Albert) Chat del pueblo: la etiqueta «DEV» de las cuentas de moderación y su línea con un fondo azul suave. */
/* (11-11-2026, Albert) Moderación · Lobby: la sección del panel, la ventanita de cada evento y el cartel del evento en el pueblo */
#mod-list .lb-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#mod-list .lb-row select { flex: 1; min-width: 90px; }
#mod-list .lb-inv { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: #f4e7c9; flex-wrap: wrap; }
#mod-list .lb-inv .sub { margin: 0; }
#mod-list .lb-p { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: #1a3170; border-radius: 6px; padding: 4px 6px; font-size: 12.5px; }
#mod-list .lb-p b { color: #fff; } #mod-list .lb-p i { font-style: normal; font-size: 10.5px; color: #9fb6ff; }
#mod-list .lb-p span { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
#mod-list .lb-p select { width: 96px; }
#mod-list #lb-who { display: flex; flex-direction: column; gap: 4px; }
#mod-list .lb-evs { display: flex; gap: 5px; flex-wrap: wrap; }
#mod-list .lb-live { display: flex; gap: 8px; align-items: center; background: #1a3170; border-radius: 6px; padding: 6px 8px; font-size: 12.5px; color: #f4e7c9; margin-top: 4px; }
#mod-list .lb-live span { flex: 1; }
#mod-cfg { position: fixed; z-index: 9991; width: min(290px, calc(100vw - 8px)); background: #101c40f5; border: 2px solid #ffd23f; border-radius: 10px; color: #f4e7c9; font-family: system-ui, sans-serif; font-size: 12.5px; box-shadow: 0 8px 24px #0008; }
#mod-cfg * { box-sizing: border-box; }
#mod-cfg header { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: move; touch-action: none; user-select: none; color: #ffd23f; }
#mod-cfg header b { flex: 1; font-size: 13.5px; }
#mod-cfg header button { background: none; border: 0; color: #f4e7c9; font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
#mod-cfg .mc-f { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; padding: 2px 10px 6px; }
#mod-cfg input, #mod-cfg select { font: inherit; padding: 4px 6px; border-radius: 6px; border: 0; background: #f4e7c9; color: #101c40; width: 124px; min-height: 0; }
#mod-cfg input[type=number] { width: 84px; justify-self: end; } #mod-cfg input[type=checkbox] { width: 16px; height: 16px; justify-self: end; accent-color: #ffd23f; }
#mod-cfg .mc-note { margin: 0; padding: 0 10px 6px; font-size: 11.5px; line-height: 1.35; color: #f4e7c9cc; }
#mod-cfg .mc-b { display: flex; gap: 6px; justify-content: flex-end; padding: 0 10px 10px; }
#mod-cfg .btn { font: inherit; font-size: 12px; min-height: 0; background: #f4e7c9; color: #1a3170; border: 0; border-radius: 6px; padding: 6px 10px; box-shadow: none; text-shadow: none; cursor: pointer; }
#mod-cfg .btn.gold { background: #ffd23f; color: #101c40; font-weight: 700; } #mod-cfg .btn.ghost { background: none; color: #f4e7c9; box-shadow: inset 0 0 0 1px #f4e7c966; }
#mod-cfg button:focus-visible, #mod-cfg input:focus-visible, #mod-cfg select:focus-visible { outline: 2px solid #ffd23f; outline-offset: 1px; }
#tw-ev { position: absolute; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 44px); transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px;
  max-width: min(460px, calc(100vw - 20px)); background: #101c40e6; border: 2px solid #ffd23f; border-radius: 12px; padding: 7px 12px; color: #f4e7c9; pointer-events: none; font-family: system-ui, sans-serif; }
#tw-ev[hidden] { display: none; }
/* (11-11-2026, lo pidió el dueño; eligió la A «Línea clásica») Encendido de tele de tubo al abrir la PC y la Tienda de Mejoras (G.UI.crtOn):
   fondo negro, un punto que se estira en una línea brillante y la línea se abre en vertical; el brillo baja al final. */
/* (11-11-2026, el dueño: «se buguea un poco y se abre dos veces… el fondo no tiene que ponerse negro, está bien como estaba antes»)
   · Se abría dos veces porque esta regla cambiaba la animación de la ventana (.box trae la suya, «pop»): al quitar .crt-on, «pop» volvía a
     empezar. Ahora «pop» sigue primera en la lista y el encendido va detrás, así al terminar no se relanza nada.
   · Sin la capa negra de fondo (.scr.crt-on::before, crtBg): detrás queda el oscurecido de siempre de la pantalla.
   Antes: .scr.crt-on::before { background: #000; animation: crtBg … } y .scr.crt-on > * { position: relative; z-index: 1; animation: crtOn … }. */
.scr.crt-on > * { animation: pop .22s ease-out, crtOn 1.05s cubic-bezier(.2, .8, .2, 1) both; }
.scr.crt-on::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1px; z-index: 2; pointer-events: none; background: #fff; box-shadow: 0 0 14px 4px rgba(190, 220, 255, .8); transform-origin: 50% 50%; animation: crtLine 1.05s ease-out both; }
@keyframes crtOn {
  0%, 14% { clip-path: inset(49.7% 49.5% 49.7% 49.5%); filter: brightness(9) saturate(0); }
  46% { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(7) saturate(0); }
  56% { clip-path: inset(49.2% 0 49.2% 0); filter: brightness(6) saturate(0); }
  86% { clip-path: inset(0 0 0 0); filter: brightness(1.7) saturate(.6); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes crtLine { 0% { transform: scaleX(.01); opacity: 0; } 12% { transform: scaleX(.02); opacity: 1; } 46% { transform: scaleX(1); opacity: 1; } 60% { transform: scaleX(1); opacity: .7; } 78%, 100% { transform: scaleX(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scr.crt-on::after { display: none; } .scr.crt-on > * { animation: pop .22s ease-out; } }
/* (11-11-2026, lo pidió el dueño) banner animado que anuncia un evento del pueblo (js/ui/lobby-banner.js): lienzo de 240×44 estirado sin suavizar, el nombre y la cuenta encima */
.lb-ban { position: absolute; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 40px); width: min(720px, 94vw); transform: translate(-50%, -130%); z-index: 7; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0,0,0,.45)); }
.lb-ban canvas { display: block; width: 100%; image-rendering: pixelated; border-radius: 6px; }
.lb-tx { position: absolute; left: 4%; top: 50%; transform: translateY(-50%); max-width: 70%; display: flex; flex-direction: column; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.lb-tx small { font-size: clamp(9px, 1.7vw, 14px); color: #fff2a0; letter-spacing: .06em; text-transform: uppercase; }
.lb-tx b { font-size: clamp(14px, 3.4vw, 30px); line-height: 1.05; color: #fff; }
.lb-n { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: clamp(24px, 6vw, 54px); line-height: 1; color: #fff; text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; }
.lb-n.pop { animation: lbPop .45s ease-out; }
@keyframes lbPop { 0% { transform: translateY(-50%) scale(2.2); color: #ffd23f; } 60% { transform: translateY(-50%) scale(.9); } 100% { transform: translateY(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .lb-n.pop { animation: none; } }
#scr-town.covered .lb-ban { display: none; }
#scr-town.covered #tw-ev { display: none; }
#tw-ev .twev-cv { width: 72px; height: 72px; flex: none; image-rendering: pixelated; background: #f4e7c9; border-radius: 8px; } #tw-ev .twev-cv[hidden] { display: none; }
#tw-ev .twev-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#tw-ev .twev-t { color: #ffd23f; font-size: 15px; } #tw-ev .twev-s { font-size: 12.5px; line-height: 1.3; } #tw-ev .twev-s:empty { display: none; }
#tw-ev .twev-c { font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700; color: #fff; flex: none; } #tw-ev .twev-c:empty { display: none; }
#tw-ev .twev-bar { height: 7px; border-radius: 4px; background: #ffffff2e; overflow: hidden; min-width: 140px; } #tw-ev .twev-bar[hidden] { display: none; }
#tw-ev .twev-bar i { display: block; height: 100%; background: #ff6b6b; transition: width .15s; }
.twch-n[hidden] { display: none; }
.twch-dev { display: inline-block; background: #2f7bff; color: #fff; border-radius: 4px; padding: 0 5px; font-size: .78em; margin-right: 4px; vertical-align: 1px; }
.twch-m.dev { background: #2f7bff26; border-radius: 4px; }
/* Moderación (ventana): Apoyos en columnas que se reparten según el ancho; el apodo de Revisar PC y Mochila es el de arriba. */
#mod-list .spt-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
#mod-list .spt-col { min-height: 0; padding: 7px; gap: 5px; border-width: 2px; }
#mod-list .spt-h { font-size: 14px; } #mod-list .spt-list { max-height: 180px; }
#mod-list .spt-row { padding: 4px 6px; } #mod-list .btn.spt-pub, #mod-list .btn.spt-del { color: #1a3170; }
#mod-list label:has(> #pcx-to), #mod-list label:has(> #moch-to) { display: none; }
#mod-list .spt-add { flex-wrap: wrap; } #mod-list .spt-add input { flex: 1 1 90px; width: auto; }
/* celular de costado: todo más junto y la ficha más angosta */
@media (max-height: 520px) {
  .mo-box.bg-box { padding: 10px 12px; height: 100%; gap: 6px; }
  .bg-body { grid-template-columns: minmax(0, 1fr) 208px; gap: 10px; }
  .bg-tab { padding: 3px 10px; font-size: 12.5px; } .mo-h { font-size: 14px; margin: 0; }
  .bg-slots { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; } .bg-slot { padding: 6px 3px 4px; border-radius: 10px; } .bg-ic { height: 34px; transform: scale(.82); } .bg-slot small { font-size: 10.5px; }
  .bg-detail { padding: 8px 10px; gap: 5px; } .bg-big { width: 84px; height: 84px; } .bg-big > img, .bg-big > span { transform: scale(.75); }
  .bg-big.bg-me { width: 100px; height: 108px; } .bg-big.bg-me canvas { width: 80px; height: 88px; }
  .bg-pdesc { display: none; }   /* (no entra: se ve en el dibujo) */
  .bg-detail h3 { font-size: 15px; margin: 2px 0 0; } .bg-qty { font-size: 18px; } .bg-desc { font-size: 12px; } .bg-go, .bg-custom { padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
}

/* ============ (10-11-2026, lo pidió el dueño: «la parte de Perks, reformalo») Perks rehecho (js/ui/items-ui.js) ============
   Una tira arriba (título, pestañas con su cuenta, buscador y «Volver»); debajo, según la pestaña: filtros + tarjetas agrupadas +
   ficha (Ataques), tarjetas + ficha (Pasivas) o tarjetas a varias columnas (Objetos de jefes). La ficha sigue siendo .pk-detail
   (con su demo), así que conserva cómo flota por encima en el celular. Antes («diseño D», 21-10-2026, reglas .it-list.pk y .pk-*
   de más arriba, que ya sólo valen para la ficha): pestañas y buscador en dos filas, tipos con barrita, y una cuadrícula de íconos. */
#scr-items > .box.pq { display: flex !important; flex-direction: column; overflow: hidden; padding: 12px 14px !important; }
#scr-items > .box.pq > .pq-top { flex: none; display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; margin-bottom: 12px; }
.pq-top h2 { flex: none; }
.pq-tabs { flex: none; display: flex; gap: 5px; }
.pq-tab { appearance: none; font: inherit; font-size: 14px; cursor: pointer; padding: 5px 12px; border-radius: 9px; border: 2px solid rgba(244,231,201,.4); background: transparent; color: #f4e7c9; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.pq-tab b { font-weight: 400; font-size: 12px; opacity: .75; font-family: var(--lic-type); }
.pq-tab:hover { border-color: #f4e7c9; }
.pq-tab.on { background: #ffd23f; border-color: #ffd23f; color: #1a3170; } .pq-tab.on b { opacity: .85; }
.pq-search { flex: 1 1 200px; min-width: 110px; max-width: 420px; margin-left: auto; position: relative; display: flex; }
#scr-items .pq-search .field { width: 100%; padding: 6px 32px 6px 12px; font-size: 14px; background: #fbf3df !important; color: #1a3170 !important; border: 0 !important; border-radius: 9px !important; box-shadow: none !important; }
#scr-items .pq-search .field::placeholder { color: rgba(26,49,112,.55); }
.pq-x { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 0; background: rgba(26,49,112,.16); color: #1a3170; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
#scr-items .pq-body { flex: 1; min-height: 0; display: grid; gap: 12px; overflow: visible; background: none !important; padding: 0; }
.pq-body.pq-m { grid-template-columns: 178px minmax(0, 1fr) minmax(340px, 31%); }
.pq-body.pq-p { grid-template-columns: minmax(0, 1fr) minmax(340px, 36%); }
.pq-body.pq-o { grid-template-columns: minmax(0, 1fr); }
/* filtros */
.pq-rail { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; }
.pq-rail h3 { margin: 8px 2px 2px; font-size: 12px; font-family: var(--lic-type); font-weight: 700; opacity: .65; } .pq-rail h3:first-child { margin-top: 0; }
.pq-fs { display: flex; flex-direction: column; gap: 2px; }
.pq-f { appearance: none; font: inherit; font-size: 13px; color: var(--lic-ink); text-align: left; cursor: pointer; display: flex; align-items: center; gap: 7px; padding: 3px 8px; border-radius: 7px; border: 2px solid transparent; background: rgb(var(--lic-wash) / .42); }
.pq-f b { margin-left: auto; font-weight: 400; font-size: 12px; opacity: .65; font-family: var(--lic-type); }
.pq-f:hover { border-color: rgb(var(--lic-ink-rgb) / .4); }
.pq-f.on { background: var(--lic-band); border-color: var(--lic-band); color: #ffd23f; } .pq-f.on b { color: #f4e7c9; opacity: .9; }
.pq-f.zero:not(.on) { opacity: .45; }
.pq-dot, .pq-all { flex: none; width: 11px; height: 11px; border-radius: 3px; background: var(--c); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.pq-all { background: conic-gradient(#e8573a 0 25%, #2fa85a 0 50%, #3f8fd8 0 75%, #e2b13a 0); }
.pq-f .pk-ri { width: 13px; height: 13px; flex: none; padding: 1px; box-sizing: content-box; border-radius: 4px; background: #fbf3df; }
/* tarjetas */
.pq-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.pq-sum { flex: none; min-height: 24px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pq-clear { appearance: none; margin-left: auto; font: inherit; font-size: 12.5px; cursor: pointer; padding: 2px 4px; background: none; border: 0; color: var(--lic-red); text-decoration: underline; }
.pq-grid { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 6px 4px 0; }
.pq-none { margin: 10px 2px; }
.pq-gh { position: sticky; top: 0; z-index: 1; margin: 0 0 6px; padding: 3px 8px; display: flex; align-items: center; gap: 8px; font-size: 14px; background: var(--lic-pap); border-bottom: 3px solid var(--c, var(--lic-ink)); border-radius: 7px 7px 0 0; }
.pq-gh i { width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--lic-ink)); }
.pq-gh b { font-weight: 400; font-size: 12px; opacity: .6; font-family: var(--lic-type); }
.pq-gh.obj { --c: var(--lic-red); } .pq-gh.rel { --c: #8c46c8; }
.pq-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 6px; }
.pq-c { appearance: none; font: inherit; color: var(--lic-ink); text-align: left; cursor: pointer; min-width: 0; min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 6px;
  border-radius: 9px; border: 2px solid rgb(var(--lic-ink-rgb) / .16); border-left: 5px solid var(--c); background: color-mix(in srgb, var(--c) 11%, var(--lic-field)); }
.pq-c:hover { border-color: rgb(var(--lic-ink-rgb) / .5); border-left-color: var(--c); }
.pq-c.on { border-color: var(--lic-ink); border-left-color: var(--c); background: color-mix(in srgb, var(--c) 28%, var(--lic-field)); box-shadow: 0 0 0 2px var(--lic-gold); }
.pq-c.special { border-top-color: var(--lic-gold); border-right-color: var(--lic-gold); border-bottom-color: var(--lic-gold); }
.pq-ci { flex: none; display: grid; place-items: center; } .pq-ci img { width: 30px; height: 30px; display: block; }
.pq-cn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.pq-cn b { font-size: 13px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-cn small { font-size: 11px; font-family: var(--lic-type); opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-cr { flex: none; padding: 3px; border-radius: 6px; background: #fbf3df; box-shadow: 0 0 0 1px rgba(26,49,112,.18); } .pq-cr .pk-ri { width: 14px; height: 14px; display: block; }   /* (fondo claro fijo: el dibujo del rol tiene el contorno negro y en el modo oscuro no se veía) */
.pq-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pq-ocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.pq-pc, .pq-oc { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 2px solid rgb(var(--lic-ink-rgb) / .2); background: var(--lic-field); color: var(--lic-ink); }
.pq-pc { appearance: none; font: inherit; text-align: left; cursor: pointer; }
.pq-pc:hover { border-color: rgb(var(--lic-ink-rgb) / .55); }
.pq-pc.on { border-color: var(--lic-ink); background: var(--lic-pap); box-shadow: 0 0 0 2px var(--lic-gold); }
.pq-oc.rel { border-color: rgb(140 70 200 / .45); }
#scr-items .pq .it-ico { background: rgb(var(--lic-ink-rgb) / .08); } #scr-items .pq .it-count { color: var(--lic-goldd); }
#scr-items .pq .it-main b { font-weight: 400; } #scr-items .pq .it-note { margin: 0 2px 8px; }
#scr-items .pq :is(.pq-pc, .pq-oc) .it-desc { font-size: 12.5px; font-family: var(--lic-type); }
/* la ficha */
#scr-items .pq-detail { border: 2px solid rgb(var(--lic-ink-rgb) / .3); border-radius: 12px; }
.pq-detail .pk-dhead { border-bottom: 3px solid var(--c, rgb(var(--lic-ink-rgb) / .3)); }
.pq-detail .it-body { font-size: 13.5px; }
.pq-long { margin: 0 !important; }
.pq-h { margin: 14px 0 7px !important; padding-bottom: 3px; font-size: 13px; font-weight: 400; color: var(--lic-ink) !important; display: flex; align-items: baseline; gap: 8px; border-bottom: 2px dotted rgb(var(--lic-ink-rgb) / .3); }
.pq-mine { margin-left: auto; color: #1d7a35; font-family: var(--lic-type); font-weight: 700; font-size: 12px; }
.pq-small { margin: 5px 0 0 !important; font-size: 12px; font-family: var(--lic-type); }
.pq-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pq-evlist { display: grid; gap: 6px; margin-top: 6px; }
.pq-ev { --c: #9aa0ae; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 9px; background: color-mix(in srgb, var(--c) 16%, var(--lic-field)); border: 2px solid color-mix(in srgb, var(--c) 60%, transparent); }
.pq-ev.pas { --c: #e2b13a; }
.pq-ev img { width: 26px; height: 26px; display: block; } .pq-ev.pas img { width: 22px; height: 22px; }
.pq-ev span { display: flex; flex-direction: column; line-height: 1.15; } .pq-ev b { font-size: 13px; font-weight: 400; } .pq-ev small { font-size: 10.5px; font-family: var(--lic-type); opacity: .75; }
.pq-op { font-style: normal; font-weight: 700; font-size: 16px; opacity: .55; } .pq-op.to { font-size: 19px; opacity: 1; color: var(--lic-red); }
.pq-nums { display: grid; gap: 6px; }
.pq-num { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; align-items: start; }
.pq-num > span { padding-top: 3px; font-size: 12.5px; overflow-wrap: anywhere; }
.pq-num > div { display: flex; flex-wrap: wrap; gap: 4px; }
.pq-num em { font-style: normal; font-size: 12px; font-family: var(--lic-type); font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgb(var(--lic-ink-rgb) / .09); }
.pq-num.evo > span { color: var(--lic-goldd); } .pq-num.evo em { background: rgb(226 177 58 / .28); }
#scr-items .pq-ups { columns: auto; margin: 0; padding: 0; list-style: none; counter-reset: lv 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12.5px; font-family: var(--lic-type); }
.pq-ups li { counter-increment: lv; display: flex; align-items: baseline; gap: 6px; }
.pq-ups li::before { content: counter(lv); flex: none; min-width: 18px; padding: 1px 0; border-radius: 5px; background: var(--lic-band); color: #ffd23f; font-size: 11px; text-align: center; font-weight: 700; }
@media (min-width: 1700px) and (min-height: 900px) {
  .pq-body.pq-m { grid-template-columns: 220px minmax(0, 1fr) minmax(460px, 30%); gap: 16px; }
  .pq-f { font-size: 15px; padding: 5px 10px; } .pq-tab { font-size: 16px; padding: 7px 16px; } #scr-items .pq-search .field { font-size: 16px; padding: 8px 34px 8px 14px; }
  .pq-cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; } .pq-c { min-height: 56px; } .pq-cn b { font-size: 15px; } .pq-cn small { font-size: 13px; } .pq-ci img { width: 38px; height: 38px; }
  .pq-gh { font-size: 16px; } .pq-detail .it-body { font-size: 15px; } .pq-h { font-size: 15px; } .pq-num em, .pq-num > span, #scr-items .pq-ups { font-size: 14px; } .pq-ev b { font-size: 15px; }
}
/* pantallas angostas y celular de costado: la ficha flota por encima (se cierra con ×) y los filtros se afinan */
@media (max-width: 1000px), (orientation: landscape) and (max-height: 500px) {
  .pq-body.pq-m { grid-template-columns: 124px minmax(0, 1fr); gap: 8px; } .pq-body.pq-p { grid-template-columns: minmax(0, 1fr); }
  #scr-items .pq-detail { display: none; position: fixed; left: 8px; right: 8px; bottom: 8px; top: 8px; z-index: 30; }
  #scr-items .pq-detail.open { display: block; }
  #scr-items .pq-detail .pk-close { display: inline-block; margin-left: auto; font-size: 18px; line-height: 1; padding: 4px 10px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #scr-items > .box.pq { padding: 6px 10px !important; }
  #scr-items > .box.pq > .pq-top { gap: 8px; margin: 0 0 6px; grid-column: auto; }
  .pq-tab { font-size: 12px; padding: 2px 8px; gap: 5px; } .pq-tab b { font-size: 11px; }
  #scr-items .pq-search .field { padding: 3px 28px 3px 10px; font-size: 13px; } .pq-search { max-width: 260px; }
  .pq-body.pq-m { grid-template-columns: 112px minmax(0, 1fr); }
  .pq-rail h3 { font-size: 11px; margin: 5px 2px 1px; } .pq-f { font-size: 11.5px; padding: 2px 6px; gap: 5px; } .pq-f b { font-size: 11px; }
  .pq-sum { font-size: 12.5px; min-height: 20px; } .pq-grid { gap: 8px; } .pq-gh { font-size: 12.5px; padding: 2px 7px; margin-bottom: 4px; }
  .pq-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; } .pq-c { min-height: 38px; padding: 3px 6px 3px 5px; gap: 6px; } .pq-ci img { width: 24px; height: 24px; } .pq-cn b { font-size: 12px; } .pq-cn small { font-size: 10.5px; }
  .pq-pcards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; } .pq-ocards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; } .pq-pc, .pq-oc { padding: 5px 8px; }
  #scr-items .pq-detail.open { display: flex; flex-direction: column; top: calc(4px + env(safe-area-inset-top)); bottom: var(--sa-b); left: var(--sa-l); right: var(--sa-r); overflow: hidden; }
  .pq-h { margin: 9px 0 5px !important; font-size: 12px; } #scr-items .pq-ups { grid-template-columns: 1fr; font-size: 11.5px; } .pq-num em, .pq-num > span { font-size: 11.5px; } .pq-ev b { font-size: 12px; }
  /* las pasivas no tienen demo: su ficha, a una columna */
  .pq-p .pk-detail .it-body { display: block; }
}

/* ====== (11-11-2026, lo pidió el dueño) La parcela y su cueva (js/ui/parcela-ui.js): un lienzo a pantalla completa con la barra de arriba
   (volver, construir, lo que tienes), la paleta de «Construir» abajo y la ventanita de la plantación. ====== */
#scr-parcela { padding: 0; display: block; background: #16131c; --m-ink: #283040; --m-paper: #f8f8f0; --m-edge: #7088b8; }
#scr-parcela.hidden { display: none; }
#pa-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; cursor: pointer; }
#scr-parcela.pa-obra #pa-cv { cursor: crosshair; }
#pa-top { position: absolute; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; pointer-events: none; }
#pa-top > * { pointer-events: auto; }
#pa-top .btn.on { background: #ffd84a; color: #283040; }
.pa-chips { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-items: center; }
.pa-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: var(--m-paper); color: var(--m-ink); border: 2px solid var(--m-ink); border-radius: 999px; font-size: 13px; line-height: 1.2; text-shadow: none; }
.pa-chip .coin { width: 16px; height: 16px; flex: none; } .pa-chip img { width: 18px; height: 18px; }
.pa-ic { display: inline-block; width: 16px; height: 16px; flex: none; position: relative; }
.pa-nec { background: #f0a020; border: 2px solid #283040; border-radius: 60% 60% 50% 50% / 45% 45% 60% 60%; box-shadow: inset 3px 3px 0 #ffd070; }
.pa-nec::before { content: ''; position: absolute; left: 4px; top: -5px; width: 5px; height: 4px; background: #3f9a3a; border: 1px solid #283040; border-radius: 4px 0; }
.pa-jugo { width: 12px; margin: 0 2px; background: linear-gradient(#fff8 0 30%, #f0a020 30%); border: 2px solid #283040; border-radius: 2px 2px 5px 5px; }
.pa-jugo::before { content: ''; position: absolute; left: -1px; right: -1px; top: -5px; height: 3px; background: #9a6b3f; border: 1px solid #283040; }
.pa-cueva { width: 30px; height: 30px; background: radial-gradient(ellipse 9px 12px at 50% 78%, #16131c 97%, transparent 100%), #6a647a; border: 2px solid var(--m-ink); border-radius: 12px 12px 4px 4px; }
#pa-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 6px max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)); background: var(--m-paper); border-top: 3px solid var(--m-ink); color: var(--m-ink); }
.pa-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.pa-tabs button { font: inherit; font-size: 13px; padding: 5px 10px; border: 2px solid var(--m-ink); border-radius: 8px; background: #e4e8f2; color: var(--m-ink); cursor: pointer; }
.pa-tabs button.on { background: var(--m-ink); color: #fff; }
.pa-tabs .pa-amp { margin-left: auto; background: #ffd84a; display: inline-flex; align-items: center; gap: 4px; } .pa-tabs .pa-amp:disabled { background: #ddd; opacity: .7; cursor: default; }
.pa-tabs .coin, .pa-it .coin, .pa-cu .coin { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 2px; }
.pa-items { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; align-items: stretch; }
.pa-it { flex: none; min-width: 96px; font: inherit; text-align: left; padding: 6px 8px; border: 2px solid var(--m-ink); border-radius: 8px; background: #fff; color: var(--m-ink); cursor: pointer; }
.pa-it b { display: block; font-size: 13px; } .pa-it small { display: block; font-size: 12px; color: #5a6478; }
.pa-it.on { background: #d6f5d0; box-shadow: 0 0 0 2px #3aa04a inset; } .pa-it.no { opacity: .6; }
.pa-nota { margin: 0; align-self: center; font-size: 12px; color: #5a6478; max-width: 420px; text-shadow: none; }
#pa-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(430px, calc(100% - 20px)); margin: 0; }
#pa-panel[hidden], #pa-bar[hidden] { display: none; }
#pa-panel h3 { margin: 0; }
.pa-cult { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pa-cu { font: inherit; display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border: 2px solid #283040; border-radius: 8px; background: #fff; color: #283040; cursor: pointer; }
.pa-cu.no { opacity: .55; } .pa-cu b { font-size: 14px; } .pa-cu small { font-size: 11px; color: #5a6478; }
.pa-prog { height: 12px; border: 2px solid #283040; border-radius: 6px; background: #fff; overflow: hidden; margin: 6px 0; } .pa-prog i { display: block; height: 100%; background: #58b848; }
/* la entrada, en el pueblo: el botón de la cueva (abajo a la izquierda) */
#pa-entrada { position: absolute; left: max(12px, env(safe-area-inset-left)); top: calc(10px + env(safe-area-inset-top, 0px) + 52px); z-index: 4; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; font: inherit; font-size: 13px; color: #283040; background: #f8f8f0; border: 3px solid #283040; border-radius: 10px; box-shadow: 0 3px 0 rgba(0,0,0,.25); cursor: pointer; }
#pa-entrada i { width: 24px; height: 22px; background: radial-gradient(ellipse 7px 9px at 50% 80%, #16131c 97%, transparent 100%), #6a647a; border: 2px solid #283040; border-radius: 9px 9px 3px 3px; }
#scr-town.tw-open #pa-entrada, #scr-town.covered #pa-entrada { display: none; }
.pa-ph { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; } .pa-ph > b { font-size: 18px; }
/* (12-11-2026) los 3 huecos del edificio de invocación de la parcela */
.pa-huecos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; } .pa-huecos .btn.on { outline: 3px solid #ffd23f; } .pa-huecos .btn[disabled] { opacity: .55; }
/* (11-11-2026) parcela: hábitats y visitas */
.pa-hab { cursor: default; min-width: 150px; max-width: 190px; white-space: normal; } .pa-hab .pa-quien { color: #2f7d32; font-weight: bold; }
.pa-ami { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: 50vh; overflow: auto; }
.pa-items { align-items: flex-start; } .pa-items .pa-nota { flex: none; width: 300px; max-width: 80vw; align-self: flex-start; }
/* (11-11-2026) parcela: la ventanita del tótem de invocación */
#pa-totq { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 8px; border: 2px solid #283040; border-radius: 8px; margin: 4px 0 6px; }
.pa-mons { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; max-height: 42vh; overflow: auto; }
.pa-mon { font: inherit; display: grid; justify-items: center; gap: 1px; padding: 4px 2px; border: 2px solid #283040; border-radius: 8px; background: #fff; color: #283040; cursor: pointer; }
.pa-mon small { font-size: 10px; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (12-11-2026) ventana de invocar del tótem: cuatro tarjetas iguales, una por rareza, con una cara de muestra; las que tu parcela aún no
   alcanza, en gris. Tocar una abre el PC con ese filtro. Antes (hoy mismo): cuatro columnas con todos tus Pokémon dentro. */
#pa-panel.ancho { width: min(640px, calc(100% - 20px)); }
.pa-invt { margin: 6px 0 4px; font-size: 16px; text-align: center; }
.pa-rinv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.pa-icol { font: inherit; min-width: 0; height: 168px; box-sizing: border-box; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; gap: 4px; padding: 8px 4px; border: 3px solid #283040; border-radius: 12px; background: linear-gradient(#fff, var(--rc)); color: #1a2030; cursor: pointer; }
.pa-icol b { font-size: 16px; } .pa-icol small { font-size: 11px; font-weight: 700; }
.pa-icol:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 0 #283040; }
.pa-icol.no { background: #dcdee3; color: #5a6070; cursor: not-allowed; border-color: #8a909c; }
.pa-icol.no > :not(b):not(small) { filter: grayscale(1); opacity: .55; }
@media (max-height: 460px) { .pa-icol { height: 132px; } }
/* la barra de «elegir» del PC cuando se abre desde un tótem */
#pc-elige { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border: 3px solid #283040; border-radius: 12px; background: #fff8d8; color: #283040; box-shadow: 0 4px 0 rgba(0,0,0,.35); max-width: calc(100% - 20px); font-weight: 700; }
#pc-elige .btn { white-space: nowrap; }
@media (max-height: 460px) { #pc-elige { top: max(4px, env(safe-area-inset-top, 0px)); bottom: auto; padding: 3px 8px; gap: 8px; font-size: 12px; white-space: nowrap; } #pc-elige .btn { padding: 4px 10px; font-size: 13px; } }   /* en el celular va arriba: abajo tapaba los botones de la ficha */
#pa-rar { margin-top: 8px; }
/* ====== (11-11-2026, lo pidió el dueño) El modo creativo de la parcela (js/ui/hogar-ui.js): la barra de «Construir» ====== */
#pa-bar { max-height: 46vh; overflow: auto; }
.hg-fila, .hg-items, .hg-cats { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.hg-fila { margin-bottom: 6px; } .hg-cats { width: 100%; margin-bottom: 4px; }
.hg-b, .hg-g { font: inherit; font-size: 13px; padding: 5px 9px; border: 2px solid #283040; border-radius: 8px; background: #e4e8f2; color: #283040; cursor: pointer; }
.hg-g { background: #fff; font-weight: bold; } .hg-g.on, .hg-b.on { background: #283040; color: #fff; } .hg-b:disabled { opacity: .5; cursor: default; }
.hg-amp { margin-left: auto; font-size: 12px; font-weight: 700; color: #6a5420; padding: 0 4px; display: inline-flex; align-items: center; gap: 4px; } .hg-amp .coin, .hg-e .coin { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }
.hg-precio { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: #ffe9a8; padding: 0 6px; } .hg-precio b { display: inline-flex; align-items: center; gap: 3px; } .hg-precio b.no { color: #ff8a7a; } .hg-precio .coin { width: 14px; height: 14px; display: inline-block; }   /* (13-11-2026) lo que cuesta construir */
.hg-sep { width: 1px; align-self: stretch; background: #9aa4b8; margin: 0 4px; } .hg-et { font-size: 12px; color: #5a6478; }
.hg-sw { font: inherit; display: grid; justify-items: center; gap: 1px; padding: 3px 4px; border: 2px solid transparent; border-radius: 8px; background: transparent; color: #283040; cursor: pointer; width: 62px; }
.hg-sw img, .hg-sw i { width: 28px; height: 28px; image-rendering: pixelated; border: 2px solid #283040; border-radius: 5px; box-sizing: border-box; display: block; }
.hg-sw small { font-size: 10px; line-height: 1.1; text-align: center; } .hg-sw.on { border-color: #3aa04a; background: #d6f5d0; }
.hg-grid { display: flex; flex-wrap: wrap; gap: 4px; max-height: 24vh; overflow: auto; width: 100%; align-items: flex-end; }
.hg-o { font: inherit; padding: 3px; border: 2px solid #c3cad8; border-radius: 8px; background: #fff; cursor: pointer; display: grid; justify-items: center; align-content: end; min-width: 34px; min-height: 34px; color: #283040; }
.hg-o img { max-width: 72px; max-height: 56px; image-rendering: pixelated; display: block; } .hg-o.on { border-color: #3aa04a; background: #d6f5d0; box-shadow: 0 0 0 2px #3aa04a inset; }
.hg-e small { font-size: 11px; } .hg-pl { width: 30px; height: 30px; background: repeating-linear-gradient(#5c3a20 0 4px, #6e4828 4px 6px); border: 3px solid #4a2f1a; border-radius: 3px; display: block; }
.hg-bq img { filter: grayscale(1) brightness(.7); } .hg-bq small { color: #9a8a6a; }   /* (13-11-2026) construcción aún bloqueada por el nivel del gremio */
#hg-q { font: inherit; font-size: 13px; padding: 4px 8px; border: 2px solid #283040; border-radius: 8px; width: 140px; }
.hg-nota { margin: 0; font-size: 12px; color: #5a6478; text-shadow: none; max-width: 360px; }
.pa-habs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .pa-habs .pa-hab { min-width: 120px; flex: 1 1 120px; max-width: none; }
#hg-q { background: #fff; color: #283040; }

/* (12-11-2026) la casa principal por niveles, su PC y los materiales */
.hg-casas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding: 4px 6px; border: 2px dashed #c9a24a; border-radius: 10px; background: #fff8e0; }
.hg-casas > b { width: 100%; font-size: 13px; } .hg-casas .hg-nota { width: 100%; margin: 0; }
/* (13-11-2026, el dueño eligió la opción A, «Barra de madera en dos filas») La barra de construir, de la familia de la barra de
   herramientas: marco de madera oscura, una fila fina de pestañas y otra con las herramientas (iconos) y los objetos en casillas que
   se deslizan de lado. Antes: papel claro, hasta el 46 % del alto, botones de texto y los objetos en varias filas (las reglas de
   arriba, que éstas pisan). */
#pa-bar { max-height: none; overflow: visible; padding: 6px max(8px, env(safe-area-inset-left)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); background: #4a3424; border-top: 3px solid #241710; box-shadow: inset 0 2px 0 #6b4c34; color: #f4e3bf; }
#pa-bar .hg-fila { flex-wrap: nowrap; gap: 5px; margin-bottom: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 3px; } #pa-bar .hg-fila::-webkit-scrollbar { display: none; }
#pa-bar .hg-fila > * { flex: none; }
#pa-bar .hg-g, #pa-bar .hg-b { background: #f4e3bf; color: #241710; border-color: #241710; border-radius: 6px; padding: 3px 9px; font-size: 13px; }
#pa-bar .hg-g.on { background: #241710; color: #ffd84a; }
#pa-bar .hg-b.on { background: #ffd84a; color: #241710; box-shadow: inset 0 -2px 0 #d9a520; }
#pa-bar .hg-c { border-radius: 999px; padding: 2px 9px; font-size: 12px; background: #e9d9b4; }
#pa-bar .hg-sep { background: rgba(0,0,0,.3); width: 2px; margin: 0 2px; border-radius: 1px; } #pa-bar .hg-et { color: #f4e3bf; }
#pa-bar #hg-q { border-radius: 999px; padding: 2px 10px; width: 120px; font-size: 12px; border-color: #241710; }
#pa-bar .hg-amp { color: #e9cf8a; font-weight: 400; font-size: 11px; }
#pa-bar .pa-listo { padding: 3px 10px; }
.hg-f2 { display: flex; align-items: stretch; gap: 8px; }
.hg-tls { flex: none; display: grid; grid-template-columns: repeat(3, 34px); grid-auto-rows: 34px; gap: 3px; align-content: center; padding-right: 8px; border-right: 2px solid rgba(0,0,0,.3); }
#pa-bar .hg-t { position: relative; display: grid; place-items: center; padding: 0; background: #cfe0ff; box-shadow: inset 0 -2px 0 #9fb4e0; border-radius: 5px; }
#pa-bar .hg-t svg { fill: #241710; display: block; } #pa-bar .hg-t:disabled { opacity: .45; }
#pa-bar .hg-t.on { background: #ffd84a; box-shadow: inset 0 -2px 0 #d9a520, 0 0 0 2px #fff6c8; }
#pa-bar .hg-t small { display: none; position: absolute; left: 50%; bottom: 100%; margin-bottom: 6px; transform: translateX(-50%); background: #241710; color: #ffd84a; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px 8px; white-space: nowrap; pointer-events: none; z-index: 3; }
#pa-bar .hg-t:first-child small, #pa-bar .hg-t:nth-child(4) small { left: 0; transform: none; }
@media (hover: hover) { #pa-bar .hg-t:hover small { display: block; } } #pa-bar .hg-t.jo-foco small { display: block; }
#pa-bar .hg-items { flex: 1; min-width: 0; flex-wrap: nowrap; gap: 4px; align-items: center; overflow-x: auto; overflow-y: hidden; padding: 3px 2px 5px; scrollbar-width: thin; scrollbar-color: #8a6a48 transparent; }
#pa-bar .hg-items > * { flex: none; }
#pa-bar .hg-o, #pa-bar .hg-sw { width: 58px; height: 62px; min-width: 0; padding: 2px; display: grid; place-items: center; align-content: center; gap: 1px; background: #e9d9b4; border: 2px solid #241710; border-radius: 5px; box-shadow: inset 0 -3px 0 #c9b488; color: #241710; }
#pa-bar .hg-o img { max-width: 48px; max-height: 50px; } #pa-bar .hg-sw img, #pa-bar .hg-sw i { width: 30px; height: 30px; }
#pa-bar .hg-sw small { font-size: 9.5px; line-height: 1; max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pa-bar .hg-o.on, #pa-bar .hg-sw.on { background: #ffd84a; border-color: #241710; box-shadow: inset 0 -3px 0 #d9a520, 0 0 0 2px #fff6c8; }
#pa-bar .hg-e { width: auto; height: auto; min-height: 52px; min-width: 74px; max-width: 110px; padding: 2px 6px; } #pa-bar .hg-e img { max-height: 34px; } #pa-bar .hg-e small { font-size: 10px; line-height: 1.1; white-space: normal; text-align: center; }
#pa-bar .hg-casas { flex-wrap: nowrap; align-items: center; gap: 5px; padding: 3px 6px; background: rgba(255,248,224,.12); border-color: #c9a24a; }
#pa-bar .hg-casas > b { width: auto; font-size: 11px; color: #ffe9a8; max-width: 76px; white-space: normal; line-height: 1.15; } #pa-bar .hg-casas .hg-e { min-width: 58px; }
#pa-bar .hg-nota { color: #e9d9b4; font-size: 11px; line-height: 1.25; width: 250px; max-width: none; white-space: normal; } #pa-bar .hg-casas .hg-nota { width: 230px; }
@media (max-height: 500px) { #pa-bar { padding-top: 4px; } #pa-bar .hg-fila { margin-bottom: 4px; } .hg-tls { grid-template-columns: repeat(3, 30px); grid-auto-rows: 26px; } #pa-bar .hg-o, #pa-bar .hg-sw { width: 50px; height: 52px; } #pa-bar .hg-o img { max-width: 42px; max-height: 42px; } #pa-bar .hg-sw img, #pa-bar .hg-sw i { width: 26px; height: 26px; } #pa-bar .hg-amp { display: none; } }
.pa-m-madera { background: linear-gradient(#b07a44 0 40%, #8a5a2e 40% 60%, #b07a44 60%); border: 2px solid #283040; border-radius: 4px; }
.pa-m-fibra { background: repeating-linear-gradient(100deg, #6fbf4a 0 3px, #4a9a34 3px 5px); border: 2px solid #283040; border-radius: 8px 2px; }
.pa-m-piedra { background: #9a96a4; border: 2px solid #283040; border-radius: 45% 55% 40% 50%; box-shadow: inset 3px 3px 0 #c4c0cc; }
.pa-pc { display: grid; gap: 6px; margin: 6px 0; }
.pa-pcf { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; padding: 4px 8px; border: 2px solid #c3cad8; border-radius: 8px; background: #fff; }
.pa-pcf .pa-prog { grid-column: 1 / -1; margin: 0; } .pa-pcf small { grid-column: 1 / -1; color: #5a6478; } .pa-pcf.ok { border-color: #3aa04a; background: #e8f8e2; }
.pa-pcf .coin { width: 16px; height: 16px; display: inline-block; }
/* (13-11-2026) Mesa de crafteo del gremio (parcela-ui.js mesaHtml) */
.pa-mesa { display: grid; gap: 4px; max-height: 56vh; overflow-y: auto; padding-right: 2px; }
.pa-mf { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; padding: 6px 8px; border: 2px solid #c3cad8; border-radius: 8px; background: #fff; }
.pa-mt { grid-column: 1 / -1; display: grid; } .pa-mt small { color: #5a6478; }
.pa-mc { display: flex; flex-wrap: wrap; gap: 4px; } .pa-mc span { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 3px; border-radius: 6px; font-weight: 700; font-size: 13px; background: #e8f8e2; color: #2a6a2a; }
.pa-mc span.no { background: #fde6e6; color: #a03030; } .pa-mc small { font-weight: 400; font-size: 10px; opacity: .8; margin-left: 2px; }
.pa-mc .coin { width: 14px; height: 14px; display: inline-block; } .pa-mesa-adn { display: inline-flex; } .pa-mesa-adn.g { filter: hue-rotate(150deg) saturate(1.6); } .pa-mesa-adn.l { filter: hue-rotate(-150deg) saturate(1.8) brightness(1.05); }
.pa-mok { grid-column: 1 / -1; margin: 0; color: #2a7a2a; font-weight: 700; }
/* (13-11-2026) el pozo del gremio y el resumen de lo construido (parcela-ui.js) */
.pa-pozo { display: grid; gap: 4px; margin: 4px 0; } .pa-pzf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 4px 8px; border: 2px solid #c3cad8; border-radius: 8px; background: #fff; }
.pa-pzf b { flex: 1; } .pa-pzf span { font-weight: 700; } .pa-pzf span small { font-weight: 400; color: #5a6478; } .pa-pzbr { flex-basis: 100%; height: 0; } .pa-pzf input[type=range] { flex: 1 1 120px; } .pa-pzf input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 8px; padding: 0; margin: 6px 0; border: 2px solid #241710; border-radius: 6px; background: #d9c39a; outline: none; box-shadow: none; }   /* (13-11-2026, arreglo: al moverla la barra se quedaba en blanco) */
.pa-pzf input[type=range]:focus, .pa-pzf input[type=range]:active, .pa-pzf input[type=range]:hover { background: #d9c39a; outline: none; box-shadow: 0 0 0 2px rgba(217,142,31,.45); }
.pa-pzf input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 18px; border-radius: 4px; background: #d98e1f; border: 2px solid #241710; cursor: pointer; }
.pa-pzf input[type=range]::-moz-range-thumb { width: 14px; height: 16px; border-radius: 4px; background: #d98e1f; border: 2px solid #241710; cursor: pointer; }
.pa-pzf input[type=range]::-moz-range-track { height: 6px; background: #d9c39a; border: none; }
.pa-pzf input[type=range]:disabled { opacity: .45; } .pa-pzf input[type=range]:disabled::-webkit-slider-thumb { background: #a89a80; cursor: default; } .pa-pzf output { font-weight: 700; font-size: 12px; text-align: right; color: #6a5420; min-width: 44px; } .pa-pzf .coin { width: 16px; height: 16px; display: inline-block; }
.pa-obra-bt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pa-obra-no { color: #a03030; font-weight: 700; font-size: 13px; } .hg-total { border-left: 2px solid rgba(255,233,168,.35); }
/* (13-11-2026) Disassembly Station (parcela-ui.js desHtml) */
.pa-des { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 44vh; overflow-y: auto; margin: 4px 0; }
.pa-dit { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 6px; padding: 4px 6px; border: 2px solid #c3cad8; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; font: inherit; }
.pa-dit:hover:not(:disabled) { border-color: #e0a020; background: #fff8e2; } .pa-dit:disabled { opacity: .55; cursor: default; }
.pa-dit .pa-acor { grid-row: 1 / span 2; width: 32px; height: 32px; } .pa-dit b { font-size: 13px; } .pa-dit small, .pa-dit .pa-dst { grid-column: 2; font-size: 11px; color: #5a6478; }
.pa-dst { color: #e0a020 !important; letter-spacing: 1px; } .pa-dsel { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 6px; padding: 4px 6px; border: 2px solid #e0a020; border-radius: 8px; background: #fff8e2; } .pa-dsel .pa-acor { width: 32px; height: 32px; }
.pa-des2 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .pa-dit .pa-mc { grid-column: 1 / -1; margin-top: 3px; } .pa-dit .pa-mc span { font-size: 11px; }
/* ============ huerto-ui.js — herramientas del huerto, caldero y doctor (12-11-2026, lo pidió el dueño) ============ */
#hu-bar { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2; display: flex; gap: 6px; padding: 5px; background: var(--m-paper); border: 3px solid var(--m-ink); border-radius: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
#hu-bar[hidden] { display: none; }
/* (13-11-2026, el dueño: «se solapan los carteles con la barra de opciones» y luego «este cartel ponelo en la parte de arriba») En la
   parcela los avisos salen arriba, en el hueco entre los botones de la izquierda y el inventario. Antes salían abajo, a 30 px del borde
   (encima de la barra de herramientas), y por un rato justo encima de esa barra. */
html body:has(#scr-parcela:not(.hidden)) .toast { top: max(8px, env(safe-area-inset-top)); bottom: auto; max-width: calc(100vw - 420px); }
/* (13-11-2026) el inventario: una hamburguesa a la derecha de la que cuelgan las pastillas en columna; «cerrado» las esconde */
#pa-top { align-items: flex-start; }   /* con el inventario colgando en columna, los botones se quedan arriba (antes: centrados en la fila) */
.pa-inv { margin-left: auto; align-self: flex-start; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pa-inv .pa-chips { margin: 0; flex-direction: column; flex-wrap: wrap-reverse; align-items: flex-end; align-content: flex-start; justify-content: flex-start; max-height: calc(100vh - 150px); }
.pa-inv.cerrado .pa-chips { display: none; }
.pa-vgf { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pa-vgf > span { display: grid; min-width: 0; text-align: left; }
.pa-invbt { display: flex; gap: 4px; } .pa-inv.cerrado .pa-invbt { display: none; }   /* (13-11-2026) Visitar y Gremio, dentro del ☰ */
.pa-invb { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; }
.pa-ham { display: block; width: 16px; height: 2px; margin: 6px 0; background: currentColor; border-radius: 1px; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
/* (13-11-2026) «Construir» con su martillo, separado de las herramientas del huerto, y «Listo» al principio de la barra de construir */
.hu-sep { width: 2px; align-self: stretch; margin: 4px 1px; background: rgba(40,48,64,.25); border-radius: 1px; }
.pa-listo { display: inline-flex; align-items: center; gap: 4px; }
/* (13-11-2026, lo pidió el dueño) Joao, el ayudante de la parcela (js/ui/joao.js): su dibujo, el bocadillo y el botón que ilumina.
   Con «osc» el botón iluminado echa una sombra enorme que deja el resto de la pantalla a oscuras. Antes no había tutorial. */
#joao { position: absolute; left: max(10px, env(safe-area-inset-left)); top: 60px; z-index: 6; display: flex; align-items: flex-start; gap: 6px; max-width: min(480px, calc(100% - 20px)); pointer-events: none; }
#joao[hidden] { display: none; }
.jo-img { height: 132px; width: auto; flex: none; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.jo-caja { pointer-events: auto; min-width: 0; background: var(--m-paper); border: 3px solid var(--m-ink); border-radius: 12px; padding: 8px 10px 6px; color: var(--m-ink); font-size: 13px; line-height: 1.35; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.jo-caja p { margin: 2px 0 6px; }
.jo-nom { font-size: 12px; background: var(--m-ink); color: #ffd84a; border-radius: 6px; padding: 1px 7px; }
.jo-btns { display: flex; align-items: center; gap: 8px; }
.jo-salta { appearance: none; background: none; border: 0; padding: 2px 0; font: inherit; font-size: 11px; color: #6a7286; text-decoration: underline; cursor: pointer; }
.jo-n { margin-left: auto; font-size: 10px; color: #8a90a0; }
.jo-tipos { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 6px; }
.jo-tipo { display: inline-flex; align-items: center; gap: 4px; background: rgba(40,48,64,.07); border-radius: 8px; padding: 3px 6px; }
.jo-tipo small { font-size: 11px; font-weight: 700; }
.jo-tipo img.jo-rompe { height: 26px; width: auto; image-rendering: pixelated; transform-origin: 50% 100%; animation: joRompe 2.4s infinite; }
.jo-flecha { font-style: normal; font-weight: 800; color: #8a90a0; }
@keyframes joRompe { 0%, 35% { transform: none; opacity: 1; } 40% { transform: translateX(-2px) rotate(-5deg); } 45% { transform: translateX(2px) rotate(5deg); } 50% { transform: translateX(-2px) rotate(-5deg); } 55% { transform: translateX(2px) rotate(4deg); } 70% { transform: scale(.15); opacity: 0; } 88% { transform: scale(.15); opacity: 0; } 100% { transform: none; opacity: 1; } }
.jo-foco { outline: 3px solid #ffd23f; outline-offset: 2px; position: relative; z-index: 5; animation: joPulso .9s infinite alternate; }
.hu-b.jo-foco { background: #ffd84a; border-color: var(--m-ink); }
.jo-foco.jo-osc { box-shadow: 0 0 0 200vmax rgba(8,10,20,.62); }
#hu-bar.jo-arriba { z-index: 5; }
@keyframes joPulso { from { outline-color: #ffd23f; outline-offset: 2px; } to { outline-color: #fff6c8; outline-offset: 5px; } }
@media (max-height: 500px) { #joao { top: 62px; max-width: min(390px, calc(100% - 20px)); } .jo-img { height: 84px; } .jo-caja { font-size: 11.5px; padding: 5px 8px 4px; } .jo-tipo img.jo-rompe { height: 20px; } }
@media (prefers-reduced-motion: reduce) { .jo-tipo img.jo-rompe, .jo-foco { animation: none; } }
.hu-b { appearance: none; font: inherit; cursor: pointer; position: relative; display: grid; justify-items: center; gap: 1px; min-width: 58px; padding: 4px 6px 3px; border-radius: 8px; border: 2px solid transparent; background: transparent; color: var(--m-ink); }
.hu-b small { font-size: 11px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.hu-b:hover:not([disabled]) { background: rgba(40,48,64,.08); }
.hu-b.on { background: #ffd84a; border-color: var(--m-ink); }
.hu-b[disabled] { opacity: .45; cursor: default; }
.hu-b em { position: absolute; right: 3px; top: 1px; font-style: normal; font-size: 10px; font-weight: 800; background: var(--m-ink); color: #fff; border-radius: 6px; padding: 0 4px; }
.hu-comprar small { color: #1d6a35; }
.hu-ov { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; background: rgba(10,8,20,.6); padding: 12px; }
.hu-win { width: min(440px, 100%); max-height: calc(100dvh - 24px); overflow: auto; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.hu-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hu-h b { font-size: 18px; }
.hu-cv { display: block; width: 100%; height: auto; image-rendering: pixelated; border: 3px solid var(--m-ink, #283040); border-radius: 8px; background: #2a2038; }
.hu-recs { display: flex; flex-direction: column; gap: 6px; }
.hu-rec { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(40,48,64,.07); }
.hu-fr { display: flex; align-items: center; gap: 5px; min-width: 112px; } .hu-fr b { font-size: 14px; }
.hu-ings { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.hu-ing { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: #1d6a35; } .hu-ing.no { color: #c23a2e; }
.hu-nota { margin: 0; font-size: 12px; opacity: .8; }
.hu-doc { display: flex; gap: 10px; align-items: center; } .hu-cvd { width: 96px; flex: none; background: #dff4ff; }
.hu-dice { margin: 0; position: relative; padding: 8px 10px; border-radius: 10px; background: #fffbe8; border: 2px solid var(--m-ink, #283040); font-size: 13.5px; color: #283040; }
@media (max-height: 500px) { #hu-bar { bottom: 6px; padding: 3px; gap: 3px; } .hu-b { min-width: 50px; padding: 2px 4px; } .hu-b small { font-size: 10px; } .hu-cv { max-height: 30vh; width: auto; align-self: center; } }
/* (13-11-2026, el dueño eligió la opción A, «Ranuras de inventario») La barra de herramientas es un marco de madera oscura con casillas
   cuadradas: icono, número de tecla arriba a la izquierda y el nombre sólo en un cartelito encima de la elegida (o al pasar el ratón).
   Antes: una barra clara (papel) con el icono pequeño y el nombre debajo de cada botón (las reglas de arriba, que éstas pisan). */
#hu-bar { gap: 4px; padding: 5px; background: #4a3424; border: 3px solid #241710; border-radius: 8px; box-shadow: inset 0 2px 0 #6b4c34, 0 4px 0 rgba(0,0,0,.35); }
#hu-bar .hu-b { display: grid; place-items: center; width: 46px; height: 46px; min-width: 0; padding: 0; background: #e9d9b4; border: 2px solid #241710; border-radius: 5px; box-shadow: inset 0 -3px 0 #c9b488; color: #241710; }
#hu-bar .hu-b:hover:not([disabled]) { background: #f6ebcd; }
#hu-bar .hu-b.on, #hu-bar .hu-b.jo-foco { background: #ffd84a; box-shadow: inset 0 -3px 0 #d9a520, 0 0 0 2px #fff6c8; }
#hu-bar .hu-b.jo-foco.jo-osc { box-shadow: inset 0 -3px 0 #d9a520, 0 0 0 2px #fff6c8, 0 0 0 200vmax rgba(8,10,20,.62); }
#hu-bar .hu-b.hu-obra { background: #cfe0ff; box-shadow: inset 0 -3px 0 #9fb4e0; }
#hu-bar .hu-b.hu-obra:hover { background: #e2ecff; }
#hu-bar .hu-b kbd { position: absolute; left: 3px; top: 0; font: inherit; font-size: 10px; font-weight: 700; line-height: 13px; color: #6b4c34; background: none; border: 0; padding: 0; }
#hu-bar .hu-b small { display: none; position: absolute; left: 50%; bottom: 100%; margin-bottom: 9px; transform: translateX(-50%); background: #241710; color: #ffd84a; font-size: 13px; font-weight: 700; border-radius: 6px; padding: 1px 9px; white-space: nowrap; pointer-events: none; }
#hu-bar .hu-b.on small, #hu-bar .hu-b.jo-foco small { display: block; }
@media (hover: hover) { #hu-bar .hu-b:hover:not(.on) small { display: block; background: #f8f8f0; color: #241710; border: 2px solid #241710; padding: 0 7px; z-index: 1; } }
#hu-bar .hu-b em { right: -5px; top: -6px; background: #241710; }
#hu-bar .hu-sep { width: 6px; margin: 0; background: none; }
/* con varios tipos de semilla, un puntito por tipo bajo el icono (el elegido, oscuro) */
.hu-pts { position: absolute; left: 0; right: 0; bottom: 1px; display: flex; justify-content: center; gap: 2px; pointer-events: none; } .hu-pts i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #fff6dc; border: 1px solid #241710; box-sizing: border-box; } .hu-pts i.on { background: #241710; }
@media (max-height: 500px) { #hu-bar { bottom: 6px; padding: 4px; gap: 3px; } #hu-bar .hu-b { width: 42px; height: 42px; } #hu-bar .hu-b small { font-size: 12px; margin-bottom: 7px; } }
.hu-mons { max-height: 46vh; }
.hu-eq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.hu-rol { display: grid; justify-items: center; gap: 1px; padding: 4px 2px; border-radius: 8px; background: rgba(40,48,64,.07); text-align: center; opacity: .7; }
.hu-rol.ok { opacity: 1; background: rgba(47,158,99,.16); } .hu-rol b { font-size: 12px; } .hu-rol small { font-size: 10px; line-height: 1.15; }
.hu-bayas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .hu-bayas span { display: grid; justify-items: center; gap: 1px; padding: 4px; border-radius: 8px; background: rgba(40,48,64,.07); } .hu-bayas b { font-size: 12px; } .hu-bayas em { font-style: normal; font-weight: 800; font-size: 13px; }
/* (12-11-2026) ventana de los ayudantes: pestañas Planta / Roca y el que tienes elegido, marcado */
.hu-pest { display: flex; gap: 6px; } .hu-pest .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; opacity: .65; } .hu-pest .btn.on { opacity: 1; outline: 2px solid var(--m-ink, #283040); }
.hu-mons .pa-mon.on { outline: 3px solid #2f9e63; border-radius: 10px; }

/* ---------- (12-11-2026) expedicion-ui.js: la pantalla de la expedición (encima de la parcela) ---------- */
#scr-exp { position: fixed; inset: 0; z-index: 70; background: #16131c; }
#scr-exp.hidden { display: none; }
#ex-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
#ex-top { position: absolute; top: max(8px, env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); display: flex; align-items: flex-start; gap: 8px; pointer-events: none; }
#ex-top > * { pointer-events: auto; }
.ex-zona, .ex-nota { background: rgba(22, 19, 28, .78); color: #f8f8f0; border-radius: 8px; padding: 4px 10px; font-size: 13px; }
.ex-zona { font-weight: 700; } .ex-nota { opacity: .9; }
#ex-carga { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #16131c; color: #f8f8f0; font-size: 18px; }
#ex-carga[hidden] { display: none; }
/* (12-11-2026) expedición, segundo paso: barras de energía y vida, mochila, minimapa, acciones de abajo y la ventana del equipo */
.ex-col { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 46vw; }
.ex-bar { position: relative; width: 168px; height: 15px; border-radius: 6px; background: rgba(22,19,28,.78); overflow: hidden; border: 1px solid rgba(248,248,240,.25); }
.ex-bar i { position: absolute; inset: 0 auto 0 0; background: #f0b429; } .ex-bar.vi i { background: #58c060; } .ex-bar.poca i { background: #e8502a; }
.ex-bar b { position: relative; display: block; font-size: 10.5px; line-height: 13px; color: #fff; text-align: center; text-shadow: 0 1px 0 #16131c, 1px 0 0 #16131c, -1px 0 0 #16131c, 0 -1px 0 #16131c; font-weight: 400; }
.ex-moch { display: flex; flex-wrap: wrap; gap: 3px 8px; background: rgba(22,19,28,.78); color: #f8f8f0; border-radius: 8px; padding: 4px 8px; font-size: 11px; }
.ex-moch b { flex-basis: 100%; font-weight: 400; opacity: .85; } .ex-moch span { display: inline-flex; align-items: center; gap: 3px; }
.ex-moch i { width: 8px; height: 8px; border-radius: 2px; border: 1px solid #16131c; } .ex-moch i.exb { border-radius: 50%; background: linear-gradient(#e8402a 0 45%, #16131c 45% 55%, #f4f4f4 55%); }
/* (13-11-2026, el dueño: «la cara de los hasta 4 Pokémon con la vida» y «los materiales, arriba a la derecha, como la hamburguesa»)
   Las fichas del equipo (izquierda) y la mochila plegable con el minimapa debajo (derecha). Antes: la mochila era una caja de texto
   a la izquierda y el minimapa iba suelto a la derecha (margin-left: auto). */
.ex-equipo { display: flex; gap: 4px; }
.ex-mon { position: relative; display: grid; justify-items: center; gap: 1px; width: 46px; padding: 3px 3px 2px; background: rgba(22,19,28,.78); border: 1px solid rgba(248,248,240,.25); border-radius: 8px; color: #f8f8f0; }
.ex-mon .mart-pic, .ex-mon canvas { width: 30px; height: 30px; border-radius: 6px; image-rendering: pixelated; background-color: rgba(248,248,240,.12); }
.ex-mon small { font-size: 9.5px; line-height: 1; opacity: .9; }
.ex-mon em { font-style: normal; font-size: 9px; line-height: 1; opacity: .85; }
.ex-pv { display: block; width: 100%; height: 5px; border-radius: 3px; background: #16131c; overflow: hidden; border: 1px solid rgba(248,248,240,.3); box-sizing: border-box; }
.ex-pv i { display: block; height: 100%; background: #58c060; } .ex-mon.poca .ex-pv i { background: #e8502a; }
.ex-mon.ko { opacity: .6; } .ex-mon.ko .mart-pic, .ex-mon.ko canvas { filter: grayscale(1) brightness(.7); }
.ex-der { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ex-mochb { appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: rgba(22,19,28,.78); color: #f8f8f0; border: 1px solid rgba(248,248,240,.25); border-radius: 8px; font-size: 12px; }
.ex-mochb.on { background: #ffd84a; color: #283040; border-color: #283040; } .ex-mochb b { font-weight: 700; } .ex-mochb .pa-ham { width: 14px; margin: 5px 0; box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor; }
.ex-der .ex-moch { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 3px; font-size: 11.5px; }
#ex-mini { width: 120px; height: auto; image-rendering: pixelated; border: 2px solid #283040; border-radius: 6px; background: #4a4e5a; pointer-events: none; }
#ex-pie { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(8px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 20px); }
#ex-pie .btn { display: flex; flex-direction: column; align-items: center; line-height: 1.15; white-space: nowrap; } #ex-pie .btn small { font-size: 10px; opacity: .8; }
#ex-pie .btn[disabled] { opacity: .55; }
.ex-obj { display: flex; flex-direction: column; background: rgba(22,19,28,.82); color: #f8f8f0; border-radius: 8px; padding: 4px 10px; line-height: 1.2; } .ex-obj small { font-size: 10.5px; opacity: .85; }
#ex-panel { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(10,8,20,.6); padding: 10px; } #ex-panel[hidden] { display: none; }
.ex-win { background: #f8f0dc; color: #283040; border: 3px solid #283040; border-radius: 12px; padding: 12px 14px; box-shadow: 0 6px 0 rgba(0,0,0,.35); width: min(520px, 100%); max-height: calc(100dvh - 20px); overflow: auto; display: flex; flex-direction: column; gap: 7px; margin: 0; }
.ex-win p { margin: 0; font-size: 13px; } .ex-t { font-size: 18px; } .ex-ayuda { font-size: 11.5px !important; opacity: .8; }
.ex-eq { display: grid; gap: 5px; }
/* (12-11-2026) parcela compartida: la ventanita de invitados y permisos */
.pco-ov { z-index: 120; } .pco { width: min(380px, 100%); }
.pco-p { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(40,48,64,.07); font-size: 14px; cursor: pointer; } .pco-p input { width: 18px; height: 18px; }
.pco-ab { align-self: flex-start; opacity: .85; }
.pco-i { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } .pco-i small { font-size: 11px; opacity: .8; }
/* (12-11-2026) Banda Focus: el interruptor de arriba */
.ex-banda { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11px; color: #f8f8f0; background: rgba(22,19,28,.78); border: 1px solid rgba(248,248,240,.3); border-radius: 8px; padding: 4px 9px; cursor: pointer; opacity: .8; }
.ex-banda i { width: 12px; height: 6px; border-radius: 2px; background: linear-gradient(90deg, #9a968c 0 35%, #6a6a6a 35% 65%, #9a968c 65%); border: 1px solid #16131c; }
.ex-banda.on { opacity: 1; border-color: #ffd23f; } .ex-banda.on i { background: linear-gradient(90deg, #e8402a 0 35%, #ffd23f 35% 65%, #e8402a 65%); }
.ex-grupo { color: #9ae0ff; }   /* (12-11-2026) quiénes van en tu grupo */
.ex-mi { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; background: rgba(40,48,64,.07); } .ex-mi.ko { opacity: .82; } .ex-mi.ko .ex-pic { filter: grayscale(1); opacity: .7; }   /* (13-11-2026) antes toda la fila al 55 %: no se leía */
/* (13-11-2026) el contraste de los botones de estas ventanas lo arregla ahora el tema de madera y pergamino (al final del archivo) */
.ex-mi > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ex-mi small { font-size: 11.5px; opacity: .85; }
.ex-pic { flex: none; width: 40px; height: 40px; } .ex-tipos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11.5px; }
.ex-fila { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; } .ex-fila .btn.gold { margin-left: auto; }
@media (max-height: 500px) { .ex-bar { width: 132px; height: 13px; } .ex-bar b { font-size: 9.5px; line-height: 11px; } .ex-moch { font-size: 10px; } #ex-mini { width: 92px; } .ex-win { gap: 5px; width: min(640px, 100%); padding: 8px 12px; } .ex-eq { grid-template-columns: 1fr 1fr; } .ex-mi { padding: 3px 8px; } .ex-ayuda { display: none; } .ex-t { font-size: 15px; } }
/* ============ comidas-ui.js — la Cantina (11-11-2026, lo pidió el dueño) ============
 * Las piezas de la Mochila (.bg-*): casilleros de las 8 comidas (precio en la chapita, ✓ la que ya comiste) y la ficha a la derecha.
 * Arriba, con qué Pokémonedas pagas (una chapa por región desbloqueada). */
#scr-comidas { padding-top: 66px; }
@media (max-height: 520px) { #scr-comidas { padding-top: 42px; } }
.cm-lead { margin: -4px 0 0; font-family: var(--lic-type); font-size: 13.5px; color: rgb(var(--lic-ink-rgb) / .78); }
.cm-pay { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cm-pay > span { font-family: var(--lic-type); opacity: .8; }
.cm-regs { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-reg { appearance: none; font: inherit; cursor: pointer; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 10px; border-radius: 9px;
  border: 2px solid rgb(var(--lic-ink-rgb) / .28); background: var(--lic-pap2); color: var(--lic-ink); line-height: 1.1; }
.cm-reg b { font-size: 13px; font-weight: 600; } .cm-reg small { font-size: 12px; font-family: var(--lic-type); display: inline-flex; align-items: center; gap: 3px; }
.cm-reg:hover { border-color: var(--lic-ink); }
.cm-reg.on { background: var(--lic-band); border-color: var(--lic-band); color: #ffd23f; } .cm-reg.on small { color: #f4e7c9; }
.cm-slots { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.cm-slot em { display: inline-flex; align-items: center; gap: 3px; }
.cm-slot .bg-ic { height: 66px; }   /* (11-11-2026) los dibujos de 32 px, a ×2 */
.cm-slot.cm-ya::after { content: '✓'; position: absolute; left: 6px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: #1d7a35; color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.cm-fx { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.cm-fx li { padding: 3px 10px; border-radius: 8px; }
.cm-fx li.up { color: #1d7a35; background: rgba(29,122,53,.1); } .cm-fx li.dn { color: var(--lic-red); background: rgba(216,64,47,.1); }
html.theme-dark .cm-fx li.up { color: #7fd69a; } 
.cm-note { margin: 0; font-family: var(--lic-type); font-size: 13px; line-height: 1.3; color: rgb(var(--lic-ink-rgb) / .78); }
.cm-note.ok { color: #1d7a35; font-weight: 700; } .cm-note.bad { color: var(--lic-red); }
html.theme-dark .cm-note.ok { color: #7fd69a; }
#cm-eat { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
/* celular de costado (11-11-2026; antes la ficha agrandaba el dibujo a 110 px y «Comer» quedaba fuera de la pantalla): sin la
 * explicación ni «Pagar con», las regiones en una fila que se desliza y la ficha más chica, para que «Comer» se vea sin deslizar */
@media (max-height: 520px) {
  .cm-lead, .cm-pay > span { display: none; }
  .cm-regs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .cm-reg { flex: none; padding: 2px 7px; border-radius: 7px; } .cm-reg b { font-size: 11px; } .cm-reg small { font-size: 10.5px; }
  .cm-slots { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } .cm-slot em { font-size: 11px; }
  .cm-box .bg-big { width: 74px; height: 74px; } .cm-box .bg-big > img { width: 64px; height: 64px; transform: none; }
  .cm-slot { padding-top: 17px; } .cm-slot em { transform: scale(.82); transform-origin: top right; }
  .cm-slot .bg-ic { height: 34px; transform: none; } .cm-slot .bg-ic > img { width: 32px; height: 32px; }
  .cm-fx { gap: 3px; font-size: 11.5px; } .cm-fx li { padding: 1px 6px; }
  .cm-note { font-size: 11px; } .cm-box .bg-desc { display: none; }
}
/* (12-11-2026, lo pidió el dueño) la animación de cocina al comer: lienzo pixelado centrado sobre la cantina, con su nombre y «Saltar» */
.cm-cook { position: fixed; inset: 0; z-index: 85;   /* por encima de la barra de arriba, por debajo de los avisos (.toast, 90) */ display: grid; place-items: center; background: rgba(10, 8, 20, .88); }
.cm-cook-in { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.cm-cook canvas { display: block; image-rendering: pixelated; border: 3px solid #1a1424; border-radius: 8px; background: #000; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.cm-cook-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #ffe08a; font-size: 14px; }
.cm-cook-bar .btn { color: #f4e7c9; border-color: rgba(244, 231, 201, .5); }
@media (max-height: 520px) { .cm-cook-bar { font-size: 12.5px; } }
/* (12-11-2026, Albert) el mueble «Acompañantes» de la casa: tus ayudantes y los huecos libres */
.pa-aco { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 6px 0; }
.pa-acod { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 8px; cursor: default; min-width: 0; }
.pa-acod > * { grid-column: 2; min-width: 0; } .pa-acod > .pa-acor { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
.pa-acod .btn { justify-self: start; margin-top: 2px; } .pa-acot { display: flex; flex-wrap: wrap; gap: 3px; } .pa-acot .type { margin: 0; }
.pa-acov { display: grid; place-items: center; min-height: 60px; border-style: dashed; color: #8a93a6; cursor: default; }
/* (12-11-2026, Albert) el menú «Gremio» (js/ui/gremio-ui.js) */
.gr-box { max-width: 760px; }
.gr-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.gr-tab { font: inherit; padding: 6px 12px; border: 2px solid #283040; border-radius: 8px; background: #fff; color: #283040; cursor: pointer; }
.gr-tab.on { background: #283040; color: #fff; }
.gr-nota { color: #5a6478; font-size: 13px; margin: 6px 0; }
.gr-row { display: flex; gap: 6px; margin: 6px 0; } .gr-row input { flex: 1; min-width: 0; }
#scr-gremio h3 { font-size: 14px; margin: 10px 0 4px; }
.gr-card, .gr-head { display: flex; align-items: center; gap: 10px; padding: 8px; border: 2px solid #c3cad8; border-radius: 10px; background: #fff; color: #283040; margin: 6px 0; }
.gr-head { border-color: #283040; }
.gr-ct { flex: 1; min-width: 0; display: grid; gap: 1px; } .gr-ct b { font-size: 15px; } .gr-ct small { color: #5a6478; font-size: 12px; } .gr-ct p { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.gr-lleno { color: #a33; font-weight: bold; }
/* el estandarte: un banderín con pico abajo y la cara del Pokémon */
.gr-ban { flex: none; position: relative; width: var(--z); height: calc(var(--z) * 1.25); background: var(--c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); display: grid; place-items: start center; padding-top: calc(var(--z) * .12); box-shadow: inset 0 calc(var(--z) * .06) 0 rgba(255,255,255,.25); }
.gr-ban::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--z) * .08); background: rgba(0,0,0,.25); }
.gr-banp { width: calc(var(--z) * .78); height: calc(var(--z) * .78); border-radius: 50%; background: rgba(255,255,255,.85); display: grid; place-items: center; overflow: hidden; }
.gr-banp > * { width: 100% !important; height: 100% !important; }
.gr-ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; margin: 6px 0; }
@media (max-width: 640px) { .gr-ed { grid-template-columns: 1fr; } }
.gr-edl { display: grid; gap: 8px; justify-items: start; } .gr-edl label { display: grid; gap: 2px; width: 100%; font-size: 13px; } .gr-edl input, .gr-edl textarea { width: 100%; box-sizing: border-box; font: inherit; background: #fff; color: #283040; }
.gr-cols { display: flex; flex-wrap: wrap; gap: 4px; } .gr-col { width: 26px; height: 26px; border-radius: 6px; border: 2px solid #283040; cursor: pointer; } .gr-col.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #283040; }
.gr-edr { display: grid; gap: 6px; align-content: start; min-width: 0; } .gr-edr input { font: inherit; }
.gr-mons { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; max-height: 240px; overflow: auto; }
.gr-mon { padding: 2px; border: 2px solid #c3cad8; border-radius: 8px; background: #fff; cursor: pointer; display: grid; place-items: center; } .gr-mon.on { border-color: #283040; background: #fff4c8; }
.gr-mlist { display: grid; gap: 4px; }
.gr-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border: 2px solid #c3cad8; border-radius: 8px; background: #fff; color: #283040; } .gr-m b { flex: 1; min-width: 100px; }
.gr-rol { font-style: normal; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: #e6e9f0; } .gr-rl { background: #ffe08a; } .gr-rc { background: #c8ecc8; }
.gr-cod { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 2px dashed #283040; border-radius: 10px; background: #fffbe8; color: #283040; } .gr-cod b { font-size: 22px; letter-spacing: .15em; }
.gr-pie { margin-top: 12px; } .gr-peligro { color: #b3261e !important; border-color: #b3261e !important; }
.gr-casas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 6px 0; }
.gr-casa { display: grid; gap: 4px; justify-items: center; padding: 8px; border: 2px solid #c3cad8; border-radius: 10px; background: #fff; color: #283040; min-width: 0; }
.gr-casa img { image-rendering: pixelated; max-width: 100%; height: 96px; object-fit: contain; } .gr-casa select { max-width: 100%; }
.pa-pch { margin: 10px 0 4px; font-size: 14px; } .pa-estilos { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; } .pa-estilos img { max-height: 48px; image-rendering: pixelated; }
.pa-visf { display: flex; gap: 6px; margin: 6px 0; } .pa-visf input { flex: 1; min-width: 0; font: inherit; }
/* (12-11-2026, gremios) el PC de la casa es más largo: que se pueda bajar dentro de la ventanita */
#pa-panel { max-height: calc(100% - 24px); overflow: auto; box-sizing: border-box; }

/* ============ (13-11-2026, el dueño: «rediseñá toda la UI de la parcela») TEMA DE MADERA Y PERGAMINO ============
   Toda la parcela y la expedición pasan a hablar el mismo idioma que las dos barras que eligió el dueño (la de herramientas y la de
   construir): marco de madera oscura, pergamino claro y dorado para lo elegido o lo principal. Antes convivían tres estilos: el
   botón azul del menú (cuya letra, heredada, quedaba oscura sobre azul en las ventanas claras: «no se entiende nada por el
   contraste»), las pastillas y ventanas de papel blanco con borde azul marino, y los rótulos negros translúcidos de la expedición.
   Sólo cambia el aspecto (colores, bordes, sombras): la colocación de cada cosa es la de antes. */
#scr-parcela, #scr-exp, .hu-ov { --tm-tinta: #241710; --tm-madera: #4a3424; --tm-madera2: #6b4c34; --tm-perga: #fbf1d6; --tm-perga2: #f4e3bf; --tm-perga3: #e2c98f; --tm-oro: #ffd84a; --tm-oro2: #d9a520; }
/* botones: pergamino con canto; el principal y el elegido, dorados */
#scr-parcela .btn, #scr-exp .btn, .hu-ov .btn { background: linear-gradient(180deg, var(--tm-perga), var(--tm-perga3)); color: var(--tm-tinta); border: 2px solid var(--tm-tinta); border-radius: 7px;
  box-shadow: inset 0 -3px 0 #c9b488, 0 3px 0 rgba(0,0,0,.35); text-shadow: none; }
#scr-parcela .btn:hover, #scr-exp .btn:hover, .hu-ov .btn:hover { filter: brightness(1.06); }
#scr-parcela .btn:active, #scr-exp .btn:active, .hu-ov .btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 #c9b488, 0 1px 0 rgba(0,0,0,.35); }
#scr-parcela .btn.gold, #scr-exp .btn.gold, .hu-ov .btn.gold, #scr-parcela .btn.on, #scr-exp .btn.on, .hu-ov .btn.on { background: linear-gradient(180deg, #ffe98a, var(--tm-oro)); color: var(--tm-tinta); border-color: var(--tm-tinta); box-shadow: inset 0 -3px 0 var(--tm-oro2), 0 3px 0 rgba(0,0,0,.35); text-shadow: none; outline: 0; opacity: 1; }
#scr-parcela .btn:disabled, #scr-exp .btn:disabled, .hu-ov .btn:disabled, #ex-pie .btn[disabled] { filter: none; opacity: 1; background: #d8d0bc; color: #7a7262; border-color: #7a7262; box-shadow: inset 0 -3px 0 #bdb4a0; }
#scr-parcela .btn small, #scr-exp .btn small { color: inherit; opacity: .8; }
/* la barra de arriba de la parcela: «Pueblo», el inventario y sus pastillas */
#scr-parcela .pa-chip { background: var(--tm-perga2); color: var(--tm-tinta); border: 2px solid var(--tm-tinta); border-radius: 7px; box-shadow: inset 0 -2px 0 #c9b488; padding: 2px 8px; }
#scr-parcela .pa-invb { min-width: 40px; }
/* ventanas: pergamino con marco de madera y el título en una tablilla */
#scr-parcela #pa-panel.box, .hu-ov .hu-win.box, #scr-exp .ex-win { background: var(--tm-perga); color: var(--tm-tinta); border: 4px solid var(--tm-madera); border-radius: 10px; padding: 14px 16px;
  box-shadow: 0 0 0 2px var(--tm-tinta), inset 0 0 0 2px var(--tm-madera2), 0 8px 0 rgba(0,0,0,.35); text-shadow: none; }
#scr-parcela #pa-panel.box h2, #scr-parcela #pa-panel.box h3, .hu-ov .hu-win.box h2, .hu-ov .hu-win.box h3, #scr-exp .ex-t { display: block; margin: -14px -16px 8px; padding: 6px 16px 5px; background: var(--tm-madera); color: var(--tm-oro); border: 0; border-bottom: 2px solid var(--tm-tinta); box-shadow: inset 0 2px 0 var(--tm-madera2); font-size: 17px; letter-spacing: .3px; border-radius: 5px 5px 0 0; text-shadow: none; }
#scr-parcela #pa-panel.box small, #scr-parcela #pa-panel.box .pa-nota, .hu-ov .hu-win.box small, .hu-ov .hu-win.box .hu-nota, #scr-exp .ex-win small, #scr-exp .ex-ayuda { color: #5a4630; opacity: 1; }
#scr-exp .ex-mi, .hu-ov .hu-win .pa-mon, #scr-parcela #pa-panel .pa-mon { background: rgba(74,52,36,.09); border: 1px solid rgba(74,52,36,.25); }
#scr-exp .ex-mi.ko { opacity: 1; background: rgba(74,52,36,.04); } #scr-exp .ex-mi.ko b { color: #7a6a56; }
/* Joao y los avisos */
#joao .jo-caja { background: var(--tm-perga); color: var(--tm-tinta); border: 3px solid var(--tm-madera); box-shadow: 0 0 0 2px var(--tm-tinta), 0 5px 0 rgba(0,0,0,.3); }
#joao .jo-nom { background: var(--tm-madera); color: var(--tm-oro); } #joao .jo-salta { color: #6a5640; } #joao .jo-n { color: #8a765c; } #joao .jo-tipo { background: rgba(74,52,36,.1); }
html body:has(#scr-parcela:not(.hidden)) .toast, html body:has(#scr-exp:not(.hidden)) .toast { background: #fbf1d6; color: #241710; border: 3px solid #4a3424; box-shadow: 0 0 0 2px #241710, 0 5px 0 rgba(0,0,0,.3); text-shadow: none; border-radius: 9px; }
/* la expedición: los rótulos de arriba, de madera oscura en vez de negro */
#scr-exp .ex-zona, #scr-exp .ex-nota, #scr-exp .ex-moch, #scr-exp .ex-mon, #scr-exp .ex-obj, #scr-exp .ex-banda, #scr-exp .ex-mochb { background: rgba(48,32,20,.88); color: #fbf1d6; border: 2px solid var(--tm-tinta); box-shadow: inset 0 1px 0 var(--tm-madera2); }
#scr-exp .ex-zona { color: var(--tm-oro); } #scr-exp .ex-mochb.on { background: var(--tm-oro); color: var(--tm-tinta); box-shadow: inset 0 -2px 0 var(--tm-oro2); } #scr-exp .ex-banda.on { border-color: var(--tm-oro); }
#scr-exp .ex-bar { background: rgba(48,32,20,.88); border: 2px solid var(--tm-tinta); height: 17px; } #scr-exp .ex-bar b { line-height: 13px; }
#scr-exp #ex-mini { border: 3px solid var(--tm-madera); box-shadow: 0 0 0 2px var(--tm-tinta); border-radius: 6px; }
#scr-exp .ex-grupo { color: #9ae0ff; }
/* (13-11-2026) la ventana «Tus acompañantes» (ui/huerto-ui.js, abrirElegir): huecos, tipos que se tocan y lista */
.hu-ov .hu-win.box { width: min(520px, 100%); }
.hu-ov .hu-h { margin: -14px -16px 2px; padding: 6px 10px 6px 16px; background: var(--tm-madera); border-bottom: 2px solid var(--tm-tinta); box-shadow: inset 0 2px 0 var(--tm-madera2); border-radius: 5px 5px 0 0; }
.hu-ov .hu-h b { color: var(--tm-oro); font-size: 17px; }
.hu-huecos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.hu-hueco { position: relative; font: inherit; display: grid; justify-items: center; align-content: start; gap: 1px; min-height: 84px; padding: 5px 2px 4px; background: #e9d9b4; border: 2px solid #241710; border-radius: 6px; box-shadow: inset 0 -3px 0 #c9b488; color: #241710; cursor: pointer; text-align: center; min-width: 0; }
.hu-hueco.on { background: #ffd84a; box-shadow: inset 0 -3px 0 #d9a520, 0 0 0 2px #fff6c8; }
.hu-hueco b { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hu-hueco small { font-size: 9.5px; line-height: 1.1; color: #5a4630; }
.hu-hueco .hu-cara { display: block; width: 40px; height: 40px; } .hu-hueco .hu-cara > * { border-radius: 6px; }
.hu-hueco .hu-mas { display: grid; place-items: center; width: 40px; height: 40px; border: 2px dashed #8a6a48; border-radius: 6px; font-size: 22px; font-weight: 700; color: #8a6a48; line-height: 1; }
.hu-hueco.cerr { cursor: default; background: #cfc6b2; border-color: #7a7262; box-shadow: inset 0 -3px 0 #b5ac98; color: #6a6252; align-content: center; }
.hu-cand { display: block; width: 14px; height: 11px; margin: 9px auto 3px; background: #6a6252; border-radius: 2px; position: relative; } .hu-cand::before { content: ""; position: absolute; left: 2px; top: -8px; width: 6px; height: 8px; border: 2px solid #6a6252; border-bottom: 0; border-radius: 5px 5px 0 0; }
.hu-x { position: absolute; right: -5px; top: -6px; width: 18px; height: 18px; display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 700; line-height: 1; background: #b3402f; color: #fff; border: 2px solid #241710; border-radius: 50%; cursor: pointer; }
.hu-tipos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.hu-tipo { font: inherit; display: grid; justify-items: center; gap: 2px; padding: 4px 2px; background: rgba(74,52,36,.09); border: 2px solid rgba(74,52,36,.3); border-radius: 7px; color: #241710; cursor: pointer; min-width: 0; }
.hu-tipo small { font-size: 9.5px; line-height: 1.1; text-align: center; color: #5a4630; } .hu-tipo.on { background: #fff6c8; border-color: #241710; box-shadow: inset 0 -2px 0 #d9a520; }
.hu-ov .hu-elige { margin: 0; font-weight: 700; color: #241710; }
.hu-ov .hu-mons { max-height: 34vh; } .hu-ov .hu-mons .pa-mon.no { opacity: .45; filter: grayscale(.8); }
.hu-ov .hu-mons .pa-mon.on { outline: 3px solid #d9a520; background: #fff6c8; }
@media (max-height: 500px) { .hu-ov .hu-win.box { width: min(700px, 100%); padding: 10px 12px; gap: 5px; } .hu-ov .hu-h { margin: -10px -12px 0; } .hu-hueco { min-height: 66px; } .hu-hueco .hu-cara, .hu-hueco .hu-mas { width: 30px; height: 30px; } .hu-hueco .hu-cara > * { width: 30px !important; height: 30px !important; } .hu-tipo small { display: none; } .hu-ov .hu-mons { max-height: 30vh; } .hu-ov .hu-win > .hu-nota:first-of-type { display: none; } }
/* (13-11-2026, el dueño: «poder clickear uno solo de mis Pokémon e indicarle que se aleje… agregale opciones para gestionar mejor el combate»)
   Las fichas del equipo ahora son botones (tocar = seleccionar a ese Pokémon) y debajo va la barra de órdenes: Retirada, Quieto,
   Seguirme y la actitud del equipo. Antes las fichas eran sólo informativas y no había órdenes más que «atacar». */
#scr-exp .ex-mon { appearance: none; font: inherit; cursor: pointer; text-align: center; }
#scr-exp .ex-mon[disabled] { cursor: default; }
#scr-exp .ex-mon.sel { border-color: var(--tm-oro); box-shadow: 0 0 0 2px var(--tm-oro), inset 0 1px 0 var(--tm-madera2); transform: translateY(-1px); }
#scr-exp .ex-mon.sel small { color: var(--tm-oro); opacity: 1; }
.ex-ord { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; max-width: 250px; padding: 4px 5px; background: rgba(48,32,20,.88); color: #fbf1d6; border: 2px solid var(--tm-tinta, #241710); border-radius: 8px; box-shadow: inset 0 1px 0 var(--tm-madera2, #6b4c34); }
.ex-ord > small { flex-basis: 100%; font-size: 10px; line-height: 1.1; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-ord > small b { font-weight: 400; color: var(--tm-oro, #ffd84a); }
.ex-ord > small.pista { opacity: .75; }
.ex-ord > div { display: flex; gap: 3px; }
.ex-ord button { appearance: none; font: inherit; font-size: 11px; line-height: 1; cursor: pointer; padding: 5px 7px; min-height: 24px; color: var(--tm-tinta, #241710); background: var(--tm-perga2, #f4e3bf); border: 2px solid var(--tm-tinta, #241710); border-radius: 6px; box-shadow: inset 0 -2px 0 var(--tm-perga3, #e2c98f); }
.ex-ord button:active { transform: translateY(1px); box-shadow: none; }
.ex-ord button.x { padding: 5px 8px; background: #e9b9a8; box-shadow: inset 0 -2px 0 #c98a76; }
.ex-ord button.act { flex-basis: 100%; text-align: left; background: #cfe6b8; box-shadow: inset 0 -2px 0 #9fc480; }
.ex-ord button.act.agresiva { background: #f2b9a0; box-shadow: inset 0 -2px 0 #d08a6c; }
.ex-ord button.act.pasiva { background: #c8d6e6; box-shadow: inset 0 -2px 0 #98aec8; }
.ex-ord button.act b { font-weight: 400; text-decoration: underline; }
@media (max-height: 460px) { .ex-ord { max-width: 300px; } .ex-ord button.act { flex-basis: auto; } .ex-ord > small.pista { display: none; } }
/* (13-11-2026, el dueño: «los acompañantes tienen que salir de mi PC… elegir según su rareza») «Tus acompañantes»: en vez de la lista,
   cuatro botones de rareza (con cuántos tienes en el PC; los que tu casa no permite, con candado) y los seis de tipo con su contador. */
.hu-rars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.hu-rar { position: relative; font: inherit; display: grid; justify-items: center; gap: 1px; padding: 7px 4px 6px; min-width: 0; cursor: pointer; color: #241710; background: linear-gradient(180deg, #fff8e2, #f1dfb4); border: 2px solid #241710; border-top: 6px solid var(--rc, #9fb1c9); border-radius: 7px; box-shadow: inset 0 -3px 0 #d6c08e, 0 2px 0 rgba(0,0,0,.25); }
.hu-rar b { font-size: 13px; } .hu-rar small { font-size: 10px; line-height: 1.1; color: #5a4630; }
.hu-rar:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 #d6c08e; }
.hu-rar.vacio { opacity: .6; }
.hu-rar.cerr { cursor: default; background: #cfc6b2; border-color: #7a7262; border-top-color: #9a927e; box-shadow: inset 0 -3px 0 #b5ac98; color: #6a6252; }
.hu-rar.cerr .hu-cand { display: inline-block; margin: 0 5px 0 0; transform: scale(.7); transform-origin: 50% 100%; }
.hu-tipo { position: relative; } .hu-tipo.vacio { opacity: .5; }
.hu-tipo em { position: absolute; top: -5px; right: -3px; min-width: 15px; padding: 0 3px; font-style: normal; font-size: 9.5px; line-height: 14px; text-align: center; color: #fbf1d6; background: #4a3424; border: 1px solid #241710; border-radius: 8px; }
.hu-tipo.vacio em { background: #8a7f6c; }
.hu-ov .hu-aviso { font-size: 11px; }
@media (max-height: 500px) { .hu-rar { padding: 4px 4px 3px; } .hu-rar b { font-size: 12px; } .hu-ov .hu-aviso { display: none; } }
/* (13-11-2026, el dueño: «rediseñá esta sección… inspirado en cuando elijo la habilidad nueva al evolucionar» y, después, «tanto la PC
   como el quién sale contigo tienen que compartir la misma estética de la parcela») La pantalla de antes de salir de expedición: la
   distribución de «¿Qué ataque deja su lugar?» (título grande, fichas a la izquierda, «escudo» del elegido a la derecha, barra abajo)
   con la madera y el pergamino de la parcela (variables --tm-*). Antes era una ventana de pergamino con una lista (.ex-win). */
#ex-panel:has(.eq) { padding: 0; place-items: stretch; background: radial-gradient(ellipse at 50% 40%, rgba(74,52,36,.82), rgba(22,14,9,.95)); }
.eq { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0; color: var(--tm-perga); animation: sw-in .18s ease-out; }
.eq-tit { text-align: center; padding: max(8px, env(safe-area-inset-top, 0px)) 12px 4px; }
.eq-tit small { display: block; font-size: 13px; letter-spacing: 3px; color: var(--tm-oro); text-shadow: 2px 2px 0 var(--tm-tinta); }
.eq-tit b { display: block; font-size: clamp(20px, 4.4vh, 32px); line-height: 1.1; color: var(--tm-perga); text-shadow: 3px 3px 0 var(--tm-tinta); }
.eq-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 4vw, 52px); align-items: start; align-content: safe center; width: min(900px, 100%); margin: 0 auto; min-height: 0; overflow: auto;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); box-sizing: border-box; }
.eq-lista { display: grid; gap: 11px; min-width: 0; }
.eq-chip { appearance: none; font: inherit; text-align: left; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 5px 12px 5px 6px; min-width: 0; cursor: pointer; border-radius: 9px;
  color: var(--tm-tinta); background: linear-gradient(180deg, var(--tm-perga), var(--tm-perga2)); border: 3px solid var(--tm-madera); box-shadow: 0 0 0 2px var(--tm-tinta), inset 0 -3px 0 var(--tm-perga3), 0 5px 0 rgba(0,0,0,.35); transition: transform .15s, background .15s; }
.eq-chip.sel { background: linear-gradient(180deg, #ffe98a, var(--tm-oro)); box-shadow: 0 0 0 2px var(--tm-tinta), inset 0 -3px 0 var(--tm-oro2), 0 5px 0 rgba(0,0,0,.35); transform: translateX(6px); }
.eq-chip.ko { filter: saturate(.4); } .eq-chip.ko .eq-lv { color: #a8321e; }
.eq-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: var(--tm-perga3); border: 2px solid var(--tm-tinta); border-radius: 6px; overflow: hidden; box-shadow: inset 0 -3px 0 var(--tc, transparent); }
.eq-ic > :not(.hu-cand), .eq-face > * { border-radius: 0 !important; image-rendering: pixelated; }
.eq-ic.mas, .eq-face.mas { font-size: 26px; font-weight: 700; color: var(--tm-oro); border: 2px dashed rgba(255,216,74,.75); background: transparent; box-shadow: none; }
.eq-tx { display: grid; min-width: 0; } .eq-tx b { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-tx small { font-size: 12px; color: #5a4630; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-lv { flex: none; margin-left: auto; font-size: 14px; color: #5a4630; white-space: nowrap; }
.eq-chip.libre { color: var(--tm-perga); background: rgba(251,241,214,.07); border: 3px dashed rgba(251,241,214,.6); box-shadow: none; } .eq-chip.libre .eq-tx small { color: var(--tm-perga3); }
.eq-chip.libre.sel { background: rgba(255,216,74,.16); border-color: var(--tm-oro); box-shadow: none; }
.eq-chip.libre.apagado, .eq-chip.cerr { cursor: default; } .eq-chip.libre.apagado { opacity: .5; }
.eq-chip.cerr { color: #6a6252; background: #cfc6b2; border-color: #7a7262; box-shadow: 0 0 0 2px #3a332b, inset 0 -3px 0 #b5ac98; opacity: .62; } .eq-chip.cerr .eq-tx small { color: #6a6252; }
.eq-chip.cerr .eq-ic { background: #bdb4a0; border-color: #7a7262; } .eq-chip.cerr .hu-cand { margin: 6px 0 0; }
.eq-det { display: grid; gap: 9px; align-content: start; min-width: 0; padding-bottom: 12px; overflow: hidden; color: var(--tm-tinta); background: var(--tm-perga); border: 4px solid var(--tm-madera); border-radius: 10px; box-shadow: 0 0 0 2px var(--tm-tinta), 0 6px 0 rgba(0,0,0,.32); }
.eq-det > :not(.eq-crest) { margin-inline: 14px; }
.eq-crest { display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 9px 14px; box-sizing: border-box; color: var(--tm-perga); background: linear-gradient(180deg, var(--tm-madera2), var(--tm-madera)); border-bottom: 3px solid var(--tm-tinta); }
.eq-crest:not(:has(.eq-face)) { min-height: 0; }
.eq-face { flex: none; display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; border: 3px solid var(--tm-tinta); border-radius: 8px; background: var(--tm-perga3); box-shadow: 0 0 0 2px var(--tm-oro); }
.eq-face.mas { box-shadow: none; border-radius: 8px; }
.eq-ctx { display: grid; min-width: 0; } .eq-lab { font-size: 12px; letter-spacing: 2px; color: var(--tm-perga3); }
.eq-big { font-size: clamp(20px, 4vh, 28px); line-height: 1.1; color: var(--tm-oro); text-shadow: 2px 2px 0 var(--tm-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eq-sub { font-size: 14px; color: var(--tm-perga); }
.eq-desc { margin-block: 2px 0; padding: 2px 0 2px 10px; border-left: 4px solid var(--tm-oro2); font-size: 15px; line-height: 1.25; }
.eq-tipos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .eq-tipos small { font-size: 13px; color: #5a4630; }
.eq-acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.eq-nota { margin-block: 0; font-size: 12px; line-height: 1.25; color: #5a4630; }
.eq .btn.eq-b { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; white-space: nowrap; min-height: 40px; } .eq .btn.eq-b small { font-size: 10px; opacity: .8; }
.eq .btn.eq-b.chico { min-width: 40px; padding-inline: 10px; } .eq .btn.eq-b.on { outline: 3px solid var(--tm-oro); }
.eq-chip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.eq-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; background: linear-gradient(180deg, var(--tm-madera2), var(--tm-madera)); border-top: 3px solid var(--tm-tinta); box-shadow: inset 0 2px 0 rgba(255,255,255,.14);
  padding: 9px max(12px, env(safe-area-inset-right, 0px)) max(11px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
.eq-rec { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--tm-perga3); margin-right: auto; } .eq-rec b { color: var(--tm-perga); font-weight: 400; }
@media (max-height: 500px) {
  .eq-tit { padding-top: 4px; padding-bottom: 0; } .eq-tit small { font-size: 10px; } .eq-tit b { font-size: 19px; }
  .eq-cuerpo { padding-top: 7px; padding-bottom: 8px; gap: 20px; } .eq-lista { gap: 8px; }
  .eq-chip { min-height: 40px; padding: 2px 10px 2px 4px; border-width: 2px; box-shadow: 0 0 0 2px var(--tm-tinta), inset 0 -2px 0 var(--tm-perga3), 0 3px 0 rgba(0,0,0,.35); } .eq-chip.sel { box-shadow: 0 0 0 2px var(--tm-tinta), inset 0 -2px 0 var(--tm-oro2), 0 3px 0 rgba(0,0,0,.35); }
  .eq-ic { width: 32px; height: 32px; } .eq-ic > :not(.hu-cand) { width: 32px !important; height: 32px !important; }
  .eq-tx b { font-size: 14px; } .eq-tx small { font-size: 10.5px; } .eq-lv { font-size: 12px; }
  .eq-det { gap: 5px; padding-bottom: 7px; border-width: 3px; } .eq-det > :not(.eq-crest) { margin-inline: 10px; } .eq-crest { min-height: 58px; padding: 5px 10px; gap: 10px; } .eq-face { width: 46px; height: 46px; } .eq-face > * { width: 46px !important; height: 46px !important; }
  .eq-lab { font-size: 10px; } .eq-big { font-size: 18px; } .eq-sub { font-size: 12px; } .eq-desc { font-size: 12px; } .eq-nota { font-size: 10.5px; }
  .eq .btn.eq-b { min-height: 30px; font-size: 13px; padding: 2px 11px; } .eq .btn.eq-b small { font-size: 9.5px; }
  .eq-barra { padding-top: 5px; padding-bottom: max(7px, env(safe-area-inset-bottom, 0px)); gap: 4px 8px; } .eq-rec { font-size: 11px; gap: 0 12px; flex-basis: 100%; justify-content: center; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .eq { animation: none; } .eq-chip { transition: none; } }
/* (13-11-2026, el dueño: «tanto la PC como el quién sale contigo tienen que compartir la misma estética de la parcela») El PC, cuando se
   abre desde la parcela o la expedición para elegir acompañante (#scr-pc.pc-tm, lo pone ui/parcela-ui.js): la misma hoja, con la tinta y
   el papel cambiados por la madera y el pergamino de la parcela. Desde el pueblo o el menú el PC sigue como estaba (azul). */
#scr-pc.pc-tm { --tm-tinta: #241710; --tm-madera: #4a3424; --tm-madera2: #6b4c34; --tm-perga: #fbf1d6; --tm-perga2: #f4e3bf; --tm-perga3: #e2c98f; --tm-oro: #ffd84a; --tm-oro2: #d9a520;
  --lic-pap: #fbf1d6; --lic-pap2: #f4e3bf; --lic-pap3: #e2c98f; --lic-pap-rgb: 251 241 214; --lic-field: #fff8e2; --lic-ink: #241710; --lic-ink2: #6b4c34; --lic-ink-rgb: 36 23 16; --lic-band: #4a3424; --lic-wash: 255 255 255; --lic-goldd: #8a6200; --lic-red: #c8402f;
  --lic-paper: radial-gradient(circle at 18% 12%, rgba(255,255,255,.5), transparent 40%), radial-gradient(circle at 88% 92%, rgba(160,120,60,.14), transparent 42%), repeating-linear-gradient(0deg, rgba(120,90,40,.04) 0 2px, transparent 2px 4px), #fbf1d6; }
#scr-pc.pc-tm.scr { background: radial-gradient(ellipse at 50% 40%, rgba(74,52,36,.82), rgba(22,14,9,.95)); }
#scr-pc.pc-tm > .box { border-radius: 12px !important; box-shadow: inset 0 0 0 6px #4a3424, inset 0 0 0 8px #241710, inset 0 0 0 10px #6b4c34, 0 0 0 2px #241710, 0 10px 0 rgba(0,0,0,.35) !important; }
#scr-pc.pc-tm .btn { background: linear-gradient(180deg, #fbf1d6, #e2c98f); color: #241710; border: 2px solid #241710; border-radius: 7px; box-shadow: inset 0 -3px 0 #c9b488, 0 2px 0 rgba(0,0,0,.3); text-shadow: none; }
#scr-pc.pc-tm .btn.gold, #scr-pc.pc-tm .btn.on, #scr-pc.pc-tm #pc-elige .btn { background: linear-gradient(180deg, #ffe98a, #ffd84a); color: #241710; border-color: #241710; box-shadow: inset 0 -3px 0 #d9a520, 0 2px 0 rgba(0,0,0,.3); }
#scr-pc.pc-tm .btn:disabled { background: #d8d0bc; color: #7a7262; border-color: #7a7262; box-shadow: inset 0 -3px 0 #bdb4a0; opacity: 1; filter: none; }
#scr-pc.pc-tm #pc-elige { background: #fbf1d6; color: #241710; border: 4px solid #4a3424; border-radius: 10px; box-shadow: 0 0 0 2px #241710, 0 5px 0 rgba(0,0,0,.3); }
#scr-pc.pc-tm .pc-slot.on { border-color: #d9a520; box-shadow: 0 0 0 2px rgba(217,165,32,.45); }
#scr-pc.pc-tm .pc-tabs button.pc-tab-info { color: #241710; }
/* (13-11-2026, el dueño: «sólo mostrá los Pokémon que hayan pasado el filtro anterior… eliminá lo que te paso en rojo y cambiá el botón
   del medio por "Traer al pueblo"… tiene que tener lógica con el uso que le voy a dar») El PC en modo «sólo elegir» (#scr-pc.pc-unico, lo
   pone ui/pc-ui.js): fuera lo que no sirve para elegir acompañante —«Impronta legendaria o mega», los desplegables de rareza y de
   mejoras (y el de tipo si el tipo ya venía elegido: .pc-contipo), «Seleccionar varios», «Reciclar repetidos», la pestaña roja
   «Impronta» y los botones «Reciclar», «Elegir como compañero» y «Que me siga en el pueblo»— y, en su lugar, un único botón grande,
   «Traer al pueblo» (#pc-traer). Desde el pueblo el PC sigue completo. */
#scr-pc.pc-unico .chip[data-f="imp"], #scr-pc.pc-unico .pc-rar, #scr-pc.pc-unico .pc-upg, #scr-pc.pc-contipo .pc-type,
#scr-pc.pc-unico #pc-multi, #scr-pc.pc-unico #pc-dups, #scr-pc.pc-unico .pc-sidetabs, #scr-pc.pc-unico #pc-acts, #scr-pc.pc-unico #pc-elige { display: none !important; }
#scr-pc.pc-unico .pc-detail { padding-right: 0 !important; }
#pc-traer { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; width: 100%; line-height: 1.1; }
#pc-traer b { font-size: clamp(17px, 2vw, 22px); } #pc-traer small { font-size: 12px; font-weight: 400; opacity: .85; }
@media (max-height: 500px) { #pc-traer { min-height: 44px; } #pc-traer b { font-size: 15px; } #pc-traer small { font-size: 10.5px; } }
/* (13-11-2026) «Tus acompañantes» en dos pasos: 1 rareza (queda marcada) · 2 tipo (abre el PC con las dos cosas) */
.hu-ov .hu-paso { display: flex; align-items: center; gap: 6px; margin: 2px 0 -2px; font-size: 12px; color: #241710; }
.hu-ov .hu-paso b { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #4a3424; color: #ffd84a; font-size: 11px; }
.hu-rar.on { background: linear-gradient(180deg, #ffe98a, #ffd84a); box-shadow: inset 0 -3px 0 #d9a520, 0 0 0 2px #fff6c8, 0 2px 0 rgba(0,0,0,.25); }
.hu-tipos:has(.todos) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.hu-tipo .hu-todos { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #4a3424; color: #fbf1d6; font-size: 12px; line-height: 1.5; }
@media (max-height: 500px) { .hu-ov .hu-paso { font-size: 10.5px; margin: 0 0 -3px; } .hu-ov .hu-paso b { width: 15px; height: 15px; font-size: 10px; } }
.hu-ov .hu-win.box:has(.hu-tipo.todos) { width: min(590px, 100%); }
.hu-tipo small { overflow-wrap: anywhere; }
/* (13-11-2026, el dueño: «marcar con una espada a cuál quiero que ataquen y con un hacha cuáles materiales quiero que extraigan») Las
   herramientas de la expedición: tres casillas de madera abajo a la izquierda (Mano, Espada, Hacha), como la barra de la parcela. */
#ex-herr { position: absolute; left: max(10px, env(safe-area-inset-left, 0px)); bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 62px); display: flex; align-items: flex-end; gap: 5px; padding: 5px; background: var(--tm-madera, #4a3424); border: 2px solid var(--tm-tinta, #241710); border-radius: 9px; box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 4px 0 rgba(0,0,0,.3); }
#ex-herr:empty { display: none; }
.ex-hb { appearance: none; position: relative; font: inherit; cursor: pointer; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; color: var(--tm-tinta, #241710); background: linear-gradient(180deg, #f4e3bf, #d9c08c); border: 2px solid var(--tm-tinta, #241710); border-radius: 7px; box-shadow: inset 0 -3px 0 #b89c66; }
.ex-hb svg { image-rendering: pixelated; }
.ex-hb.on { background: linear-gradient(180deg, #ffe98a, #ffd84a); box-shadow: inset 0 -3px 0 #d9a520, 0 0 0 2px #fff6c8; transform: translateY(-3px); }
.ex-hb kbd { position: absolute; top: 1px; left: 3px; font: inherit; font-size: 9px; line-height: 1; color: #6b4c34; }
.ex-hb em { position: absolute; top: -6px; right: -5px; min-width: 16px; padding: 0 3px; font-style: normal; font-size: 10px; line-height: 15px; text-align: center; color: #fbf1d6; background: #c8402f; border: 1px solid #241710; border-radius: 8px; }
.ex-hb small { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); white-space: nowrap; padding: 2px 7px; font-size: 11px; color: #ffd84a; background: #241710; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s; }
.ex-hb:first-child small { left: 0; transform: none; }
.ex-hb.on small, .ex-hb:hover small { opacity: 1; } .ex-hb:not(.on):hover small { z-index: 2; }
#ex-herr:has(.ex-hb:hover:not(.on)) .ex-hb.on small { opacity: 0; }
.ex-hq { appearance: none; font: inherit; font-size: 11px; cursor: pointer; align-self: center; padding: 5px 8px; color: #241710; background: #e9b9a8; border: 2px solid #241710; border-radius: 6px; box-shadow: inset 0 -2px 0 #c98a76; }
@media (hover: none) { .ex-hb:not(.on) small { display: none; } }
@media (max-height: 500px) { #ex-herr { bottom: calc(max(6px, env(safe-area-inset-bottom, 0px)) + 52px); padding: 4px; gap: 4px; } .ex-hb { width: 38px; height: 38px; } .ex-hb svg { width: 24px; height: 24px; } .ex-hb kbd { display: none; } .ex-hb small { font-size: 10px; } }
/* (13-11-2026, el dueño: «esta barra modificala: ocupa mucho espacio y está en el medio sin sentido; en la barra del medio poné lo de
   cosechar, atacar y la manito, y a la izquierda poné ese botón en pequeño; lo de mochila y pokeballs ocultalo y agregá otro slot con la
   skin de una mochila que abra el inventario») La barra de herramientas pasa al CENTRO de abajo, con la mochila como cuarta casilla (su
   inventario se abre encima), y lo que estaba en el centro (el salvaje marcado y sus botones, o los del puesto) va en pequeño abajo a
   la izquierda. Antes: herramientas a la izquierda, el salvaje en el centro y la mochila arriba a la derecha. */
#ex-herr { left: 50%; transform: translateX(-50%); bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
.ex-hb:first-child small { left: 50%; transform: translateX(-50%); }
#ex-herr.inv .ex-hb small { display: none; }
.ex-inv { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: max-content; min-width: 210px; max-width: min(320px, calc(100vw - 24px)); display: grid; gap: 4px; padding: 9px 12px 10px; color: var(--tm-tinta, #241710); background: var(--tm-perga, #fbf1d6); border: 4px solid var(--tm-madera, #4a3424); border-radius: 10px; box-shadow: 0 0 0 2px var(--tm-tinta, #241710), 0 5px 0 rgba(0,0,0,.3); }
.ex-inv > b { font-size: 14px; } .ex-inv > small { font-size: 11px; color: #5a4630; margin-top: -3px; }
.ex-invl { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 12px; padding-top: 5px; border-top: 2px dashed rgba(74,52,36,.3); }
.ex-invl span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .ex-invl span.vacia { grid-column: 1 / -1; color: #5a4630; white-space: normal; }
.ex-invl i { flex: none; width: 9px; height: 9px; border-radius: 2px; border: 1px solid #241710; } .ex-invl i.exb { border-radius: 50%; background: linear-gradient(#e8402a 0 45%, #16131c 45% 55%, #f4f4f4 55%); }
#ex-pie { left: max(10px, env(safe-area-inset-left, 0px)); transform: none; flex-wrap: wrap; gap: 4px 5px; max-width: min(300px, calc(50vw - 128px)); align-items: stretch; }
#ex-pie .btn { font-size: 12px; padding: 4px 8px; min-height: 0; flex: 1 1 auto; white-space: normal; text-align: center; } #ex-pie .btn small { font-size: 9px; }
#ex-pie .ex-obj { flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: 7px; padding: 3px 8px; font-size: 12.5px; } #ex-pie .ex-obj small { font-size: 10px; }
#ex-pie .ex-nota { font-size: 10.5px; padding: 3px 8px; }
@media (max-height: 500px) { #ex-herr { bottom: max(6px, env(safe-area-inset-bottom, 0px)); } #ex-pie .btn { font-size: 11px; padding: 3px 6px; } #ex-pie .btn small { font-size: 8.5px; } .ex-inv { padding: 6px 10px 7px; } .ex-invl { font-size: 11px; } }
#ex-herr .ex-hq { align-self: stretch; width: 26px; padding: 0; font-size: 17px; font-weight: 700; line-height: 1; }   /* «Quitar marcas», en una × estrecha: con el texto, la barra crecía y pisaba lo de la izquierda en el celular */
@media (max-height: 500px) { .ex-inv { left: 0; transform: none; } }   /* en el celular el inventario se abre desde el borde izquierdo de la barra, para no tapar lo de la izquierda */

/* (13-11-2026) caldero: cuántas semillas tienes, junto al nombre; y la lista con scroll, que ahora son 6 recetas */
.hu-ten { font-style: normal; opacity: .65; margin-left: 4px; font-size: .85em; }
.hu-recs { max-height: 46vh; overflow-y: auto; }
@media (max-height: 480px) { .hu-recs { max-height: 34vh; } }

/* (13-11-2026, el dueño: «rediseña esto estéticamente») EL CALDERO en dos columnas, con la estética de la parcela (madera, pergamino y
   casilleros como los de su barra). Antes: la ventana genérica de 520 px en una columna. */
.hu-ov .hu-win.box.hu-cal { width: min(780px, 100%); gap: 8px; }
.ca { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 12px; min-height: 0; }
.ca-izq { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ca-izq .hu-cv { border: 3px solid #241710; border-radius: 8px; box-shadow: 0 0 0 2px #6b4c34, 0 3px 0 2px rgba(0,0,0,.25); width: 100%; max-height: none; }
.ca-tit { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b4c34; }
.ca-tit::before, .ca-tit::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #b99a66 0 6px, transparent 6px 10px); }
.ca-tit::before { flex: 0 0 10px; }
.hu-bayas.ca-desp { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hu-bayas .ca-slot { position: relative; display: grid; justify-items: center; gap: 0; padding: 5px 2px 4px; background: #e9d9b4; border: 2px solid #241710; border-radius: 6px; box-shadow: inset 0 -3px 0 #c9b488; min-width: 0; }
.hu-bayas .ca-slot b { font-size: 10px; font-weight: 700; color: #5a4630; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hu-bayas .ca-slot em { position: absolute; right: -5px; top: -6px; min-width: 20px; text-align: center; font-style: normal; font-size: 12px; font-weight: 800; line-height: 16px; background: #241710; color: #ffd84a; border-radius: 8px; padding: 0 5px; }
.ca-slot.ca-sem { padding-top: 7px; } .ca-slot i, .ca-ico i { position: absolute; display: block; line-height: 0; }
.ca-slot.ca-sem i { left: 50%; top: 20px; margin-left: 3px; }
.ca-der { min-width: 0; display: flex; }
.hu-cal .hu-recs { flex: 1; max-height: min(66vh, 480px); overflow-y: auto; gap: 6px; padding: 2px 4px 2px 0; }
.hu-rec.ca-rec { gap: 9px; padding: 6px 8px 6px 6px; background: #f4e3bf; border: 2px solid #b99a66; border-radius: 8px; box-shadow: inset 0 -2px 0 rgba(120,90,50,.18); }
.hu-rec.ca-rec.ok { border-color: #241710; background: #fff6d8; box-shadow: inset 0 -2px 0 #e2c98f, 0 2px 0 rgba(0,0,0,.18); }
.ca-ico { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; background: #e9d9b4; border: 2px solid #241710; border-radius: 6px; box-shadow: inset 0 -3px 0 #c9b488; }
.ca-ico i { right: -4px; bottom: -4px; padding: 1px; background: #fbf1d6; border: 2px solid #241710; border-radius: 50%; }
.ca-txt { flex: 1; min-width: 0; display: grid; gap: 3px; } .ca-txt > b { font-size: 14.5px; color: #241710; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-rec .hu-ings { gap: 5px; }
.ca-rec .hu-ing { gap: 3px; padding: 1px 7px 1px 4px; border-radius: 10px; background: #d9efd0; border: 1px solid #5aa064; color: #1d5a2c; font-size: 12px; }
.ca-rec .hu-ing.no { background: #f6d6cf; border-color: #c2584a; color: #9a2a1e; }
.ca-rec .btn { flex: none; min-width: 84px; }
@media (max-height: 480px) {
  .hu-ov .hu-win.box.hu-cal { padding-bottom: 8px; } .hu-cal .hu-nota { display: none; }
  .ca { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 10px; }
  .hu-cal .hu-recs { max-height: calc(100dvh - 96px); } .ca-izq .hu-cv { max-height: none; width: 100%; }
  .ca-ico { width: 36px; height: 36px; } .hu-rec.ca-rec { padding: 4px 7px 4px 5px; }
}
@media (max-width: 620px) { .ca { grid-template-columns: 1fr; } }

/* (13-11-2026) los edificios de la cocina (molino, horno, tina): quién trabaja y las recetas */
.hu-ov .hu-win.box.hu-taller { width: min(560px, 100%); }
.ta-quien { display: flex; align-items: center; gap: 9px; padding: 6px 9px; background: #e9d9b4; border: 2px solid #241710; border-radius: 7px; box-shadow: inset 0 -3px 0 #c9b488; }
.ta-quien span:last-child { display: grid; } .ta-quien small { color: #5a4630; } .ta-cara { flex: none; width: 36px; height: 36px; display: block; }
.ta-falta { color: #9a2a1e; font-weight: 700; }
.hu-taller .hu-recs { max-height: min(56vh, 420px); } .hu-taller .ca-rec .hu-ings { flex-wrap: wrap; } .hu-taller .ca-rec .btn { align-self: center; }
@media (max-height: 480px) { .hu-taller .hu-recs { max-height: calc(100dvh - 150px); } }
.ta-cara:empty { display: none; } .ta-quien small { font: inherit; font-size: 12px; }

/* (13-11-2026) el corral de la Miltank */
.hu-ov .hu-win.box.hu-corral { width: min(460px, 100%); }
.co-cv { image-rendering: pixelated; }
.co-body { display: grid; gap: 7px; }
.co-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; background: #f4e3bf; border: 2px solid #b99a66; border-radius: 8px; }
.co-fila > span:first-child { display: grid; margin-right: auto; } .co-fila small { font-size: 12px; color: #5a4630; } .co-bts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.co-estado { margin: 0; font-weight: 700; color: #4a3424; }
@media (max-height: 480px) { .hu-corral .co-cv { display: none; } .hu-corral .hu-nota { display: none; } }

/* (13-11-2026) Cantina sólo crafteo: las que no tienes, apagadas */
.cm-slot.cm-0 .bg-ic { opacity: .4; filter: grayscale(.7); }

/* (13-11-2026) íconos de los ingredientes: casilleros en las recetas, en la mochila de la expedición y en el corral */
.ta-res { width: 44px; height: 44px; } .ta-ings { display: flex; flex-wrap: wrap; gap: 5px; }
.ta-ing { display: grid; justify-items: center; gap: 0; padding: 3px 3px 2px; min-width: 40px; background: #e9d9b4; border: 2px solid #241710; border-radius: 6px; box-shadow: inset 0 -3px 0 #c9b488; }
.ta-ing b { font-size: 11px; line-height: 1.1; color: #1d5a2c; } .ta-ing.no { background: #f2d4ca; box-shadow: inset 0 -3px 0 #d8a898; } .ta-ing.no b { color: #9a2a1e; }
.hu-taller .ta-rec { align-items: center; } .ex-ii { flex: none; image-rendering: pixelated; }
.co-fila > img { flex: none; } .co-fila > span:nth-child(2) { display: grid; margin-right: auto; }

/* (13-11-2026, arreglo) celular apaisado: en «Construir › Especiales» las notas largas (las casas del gremio y la ayuda) hacían la barra tan alta que
   tapaba más de la mitad del terreno y casi no quedaba dónde poner nada; con poca altura se ocultan (antes se veían siempre) */
@media (max-height: 500px) { #pa-bar .hg-nota { display: none; } }
/* (13-11-2026) El chat de la parcela (js/ui/parcela-chat.js): el mismo aspecto que el del pueblo (.twch-*), encima de la barra de herramientas.
   Antes la parcela no tenía chat. */
#pa-chat { position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 74px); z-index: 3;
  width: min(380px, 46vw); display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: end; font: 13px/1.3 system-ui, sans-serif; color: #f2f4fa; }
#pa-chat.idle .twch-log { opacity: .55; background: rgba(8,12,24,.22); }
#pa-chat.open .twch-log { opacity: 1; background: rgba(8,12,24,.62); }
#pa-chat.open .twch-in { display: flex; }
#pa-chat.open .twch-btn { grid-row: 2; }
.pa-obra #pa-chat, #scr-parcela.covered #pa-chat { display: none; }
.pach-et { font-weight: 700; font-style: normal; font-size: .85em; }
.pach-et.parcela { color: #9be38a; } .pach-et.global { color: #ffd23f; }
.pach-ch { flex: none; font: 700 12px/1 system-ui, sans-serif; padding: 4px 8px; border-radius: 999px; border: 1px solid currentColor; background: rgba(0,0,0,.35); cursor: pointer; }
.pach-ch.parcela { color: #9be38a; } .pach-ch.global { color: #ffd23f; }
@media (pointer: coarse), (max-height: 500px) { #pa-chat .twch-btn { display: block; } }
@media (orientation: landscape) and (max-height: 500px) { #pa-chat { width: min(300px, 40vw); font-size: 11px; bottom: calc(max(6px, env(safe-area-inset-bottom)) + 62px); } #pa-chat .twch-log { max-height: 6em; } #pa-chat .twch-btn { width: 32px; height: 32px; font-size: 15px; } }
#scr-exp:has(#ex-panel:not([hidden])) #pa-chat, #scr-exp:has(#ex-carga:not([hidden])) #pa-chat { display: none; }   /* (13-11-2026) en la expedición, el chat no tapa sus ventanas */
/* (13-11-2026) en la expedición, abajo a la DERECHA: a la izquierda están los botones de la fogata (Volver a mi parcela, comprar…) */
#scr-exp #pa-chat { left: auto; right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 4px); }
@media (orientation: landscape) and (max-height: 500px) { #scr-exp #pa-chat { width: min(250px, 30vw); bottom: calc(max(6px, env(safe-area-inset-bottom, 0px)) + 2px); } }
body.en-parcela #scr-town { visibility: hidden; }   /* (14-11-2026) con la parcela abierta (también con su PC o el Market encima) el pueblo no se ve: salía un instante al abrir el PC */
.pach-et.exp, .pach-ch.exp { color: #7ad8ff; }   /* (14-11-2026) el canal Expedición */
/* (14-11-2026, un jugador: «make the numbers required more visible») en las filas de la mejora (casa y terreno) el nombre y el «tengo / hace
   falta» heredaban el color claro del panel y casi no se leían sobre el fondo blanco. Ahora oscuros y el número más grande. */
.pa-pcf b { color: #2c3a6a; }
.pa-pcf > span { color: #1d2433; font-weight: 800; font-size: 1.08em; font-variant-numeric: tabular-nums; }
.pa-pcf small { color: #3e4860; }
.pa-pcf.ok > span { color: #1f7a2e; }
/* (14-11-2026) el mapa grande de la expedición (M), la lista para pedir TP y el cartel de aceptar/denegar un TP */
#ex-mapa, #ex-tpl { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(10,14,24,.55); }
#ex-mapa .exm-win, #ex-tpl .exm-win { background: #fbf3df; border: 3px solid #4a3426; border-radius: 10px; box-shadow: 0 0 0 2px #1d1410, 0 10px 30px rgba(0,0,0,.4); padding: 8px 10px 10px; display: grid; gap: 6px; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); overflow: auto; color: #2c2418; }
#ex-tpl .exm-win { min-width: 240px; }
.exm-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--pix, inherit); color: #4a3426; }
#ex-mapa canvas { image-rendering: pixelated; border: 2px solid #283040; border-radius: 6px; cursor: pointer; max-width: 100%; }
.exm-n { margin: 0; font-size: 12px; color: #5a4a36; }
/* (14-11-2026) leyenda de colores del mapa grande: tu clan, tu grupo, otros jugadores */
.exm-ley { display: block; margin-top: 3px; }
.exm-ley i { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 8px; border: 1px solid #16131c; vertical-align: -1px; }
.exm-ley i:first-child { margin-left: 0; }
#ex-tpc { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 10; background: #fbf3df; border: 3px solid #4a3426; border-radius: 10px; padding: 10px 14px; display: grid; gap: 8px; justify-items: center; color: #2c2418; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
#ex-tpc div { display: flex; gap: 8px; }
/* (14-11-2026) el ping y los FPS (js/ui/red-medidor.js) */
#red-med { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 3px); left: 50%; transform: translateX(-50%); z-index: 60; font: 600 11px/1 ui-monospace, monospace; color: #e8f0ff; background: rgba(10,14,26,.62); border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 3px 6px; cursor: pointer; pointer-events: auto; }
#red-med.ok { color: #8be38a; } #red-med.meh { color: #ffd23f; } #red-med.mal, #red-med.off { color: #ff7a6a; }