/* PokeSquad · interfaz pixel art: esquinas recortadas a escalones, biselado con sombras internas y fuentes pixel */
:root {
  --ink: #070923;
  --bg: #0d1038;
  --text: #f3f5ff;
  --muted: #a3acdf;
  --face: #1d2366; --hi: #3b46aa; --lo: #11153f; --edge: #070923;
  --gold: #ffc83a; --gold-hi: #ffe999; --gold-lo: #c98a00;
  --red: #e8434f; --red-hi: #ff8a92; --red-lo: #9a1f2a;
  --blue: #2f7bff; --blue-hi: #8cc0ff; --blue-lo: #1a4bb0;
  --pink: #ff4f96;
  --good: #3ee07a;
  --bad: #ff4b5c;
  --r-C: #a9b6c8; --r-R: #4fb7ff; --r-E: #c06bff; --r-L: #ffcf3a;
  --font-d: 'Jersey 10', 'Pixelify Sans', monospace;
  --font: 'Pixelify Sans', 'Trebuchet MS', monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 500; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: none; }
body { touch-action: none; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: pixelated; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
button { font-family: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; filter: grayscale(.6) brightness(.7); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
a { color: var(--blue-hi); }
h1, h2, h3, h4 { font-weight: 600; }
img.pk-icon, .pk-icon { image-rendering: pixelated; display: inline-block; vertical-align: middle; flex: none; object-fit: contain; }
.pk-icon.sil { filter: brightness(0) opacity(.5) !important; }
.pk-missing { background: rgba(255, 255, 255, .06); }
.pxi { display: inline-block; flex: none; vertical-align: middle; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; }

/* ---------------- piezas pixel: panel y botón */
.px {
  --n: 4px;
  background: var(--face);
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
  box-shadow: inset 0 0 0 3px var(--edge), inset 6px 6px 0 var(--hi), inset -6px -6px 0 var(--lo);
}
.pbtn {
  --n: 3px; --face: #3a44b0; --hi: #6b78e6; --lo: #222a7a;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px 11px; border: 0; background: var(--face); color: var(--text);
  font-family: var(--font); font-weight: 600; font-size: 16px; line-height: 1.1;
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
  box-shadow: inset 0 0 0 3px var(--edge), inset 3px 3px 0 3px var(--hi), inset -3px -5px 0 3px var(--lo);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .45);
}
.pbtn:hover:not(:disabled) { filter: brightness(1.12); }
.pbtn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 3px var(--edge), inset 3px 5px 0 3px var(--lo), inset -3px -3px 0 3px var(--hi); }
.pbtn.gold { --face: var(--gold); --hi: var(--gold-hi); --lo: var(--gold-lo); color: #3a2200; text-shadow: none; }
.pbtn.red { --face: var(--red); --hi: var(--red-hi); --lo: var(--red-lo); }
.pbtn.blue { --face: var(--blue); --hi: var(--blue-hi); --lo: var(--blue-lo); }
.pbtn.small { padding: 6px 10px 8px; font-size: 14px; }
.pbtn.tiny { padding: 3px 8px 5px; font-size: 12px; }
.pbtn.big { font-size: 26px; font-family: var(--font-d); padding: 10px 14px 12px; flex-direction: column; gap: 2px; }
.pbtn.big small { font-family: var(--font); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.pbtn.icon { width: 40px; height: 40px; padding: 0; }
.pbtn small { font-size: 12px; opacity: .9; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }

/* barras pixel */
.pbar { position: relative; height: 14px; background: #0a0c26; box-shadow: inset 0 0 0 2px var(--ink); overflow: hidden; }
.pbar i { position: absolute; inset: 2px auto 2px 2px; display: block; width: 0; max-width: calc(100% - 4px); background: var(--blue); transition: width .15s steps(6); }
.pbar i::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, .25) 6px 8px); }
.pbar i::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, .35); }
.pbar span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 14px; text-shadow: 1px 1px 0 #000; }
.pbar.sm { height: 8px; }
.pbar.hp i { background: #3ed06a; }
.pbar.hp i.low { background: var(--bad); animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { filter: brightness(1.5); } }
.pbar.xp i { background: #4fd2ff; }
.pbar.gold i { background: var(--gold); }
.pbar.pink i { background: var(--pink); }
.pbar.boss { height: 16px; }
.pbar.boss i { background: linear-gradient(180deg, #ff6b5c, #e8343f); }

.res { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* ---------------- barra superior */
#topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); gap: 10px; z-index: 5; background: linear-gradient(180deg, rgba(5, 6, 26, .9), rgba(5, 6, 26, 0)); }
.tb-left { display: flex; align-items: center; gap: 10px; }
#topbar.home .back { visibility: hidden; }
.logo { font-family: var(--font-d); font-size: 34px; line-height: 1; letter-spacing: 1px; text-shadow: 3px 3px 0 var(--ink); }
.logo span, .hero-logo span { color: var(--gold); }
.tb-res { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tb-res .res { padding: 6px 12px 7px 8px; font-size: 16px; }
.trainer { position: relative; padding: 7px 14px 8px; font-size: 15px; overflow: hidden; }
.trainer i { position: absolute; left: 3px; bottom: 3px; height: 3px; background: #4fd2ff; }

/* ---------------- pantallas */
.screen { position: absolute; inset: 0; display: none; padding: 74px 24px 24px; }
.screen.active { display: block; }
.screen.scroll { overflow-y: auto; }
#s-run { pointer-events: none; }
.scr-title { font-family: var(--font-d); font-weight: 400; font-size: 46px; line-height: 1; margin: 4px 0 8px; text-shadow: 3px 3px 0 var(--ink); }
.scr-title small { font-family: var(--font); font-size: 15px; color: var(--muted); }
.scr-sub { color: var(--muted); margin: 0 0 18px; max-width: 820px; line-height: 1.4; }
.sub-h { margin: 22px 0 10px; font-size: 18px; }
.sub-h small { color: var(--muted); font-weight: 500; }
.screen.scroll > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.screen:not(#s-menu):not(#s-start):not(#s-run):not(#s-party) { background: rgba(8, 10, 34, .78); }

.type-chip { display: inline-block; padding: 2px 8px 3px; font-size: 12px; font-weight: 600; background: var(--tc); color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .55); margin: 2px 3px 2px 0; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.type-chip.sm { font-size: 11px; padding: 1px 6px 2px; }
.tdot { display: inline-block; width: 10px; height: 10px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .4); vertical-align: middle; }
.rar { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px 3px; letter-spacing: .5px; text-transform: uppercase; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3); }
.rar-C { background: #3a4458; color: var(--r-C); }
.rar-R { background: #173d6a; color: var(--r-R); }
.rar-E { background: #3c1a5e; color: #dcb0ff; }
.rar-L { background: #5a3e05; color: var(--r-L); }
.rar-S { background: linear-gradient(90deg, #ff6bd6, #ffe66b, #6bffd8); color: #1a1030; }
.rar-b-C { --rc: var(--r-C); } .rar-b-R { --rc: var(--r-R); } .rar-b-E { --rc: var(--r-E); } .rar-b-L { --rc: var(--r-L); }
.stars { color: var(--gold); letter-spacing: 1px; font-size: 13px; }
.stars .off { color: rgba(255, 255, 255, .16); }
.rank { font-size: 11px; color: #cfe0ff; letter-spacing: 1px; }
.rank.r3 { color: var(--gold); }
.badge-ok { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--good); }

/* ---------------- inicio */
#s-start { overflow-y: auto; padding-top: 30px; background: rgba(8, 10, 34, .72); }
.start-wrap { max-width: 1000px; margin: 0 auto; text-align: center; }
.hero-logo { font-family: var(--font-d); font-size: clamp(64px, 12vw, 128px); line-height: .9; text-shadow: 5px 5px 0 var(--ink); }
.tag { color: var(--gold); margin: 8px 0 24px; font-size: 18px; letter-spacing: 1px; }
.start-wrap h2 { font-family: var(--font-d); font-weight: 400; font-size: 34px; margin: 0 0 14px; }
.starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.starter { border: 0; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .1s steps(2); }
.starter:hover { transform: translateY(-4px); --hi: var(--tc); }
.starter b { font-size: 15px; }
.starter small { color: var(--muted); font-size: 12px; }
.hint { color: var(--gold); margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; }

/* ---------------- menú principal */
#s-menu.active { display: flex; justify-content: space-between; align-items: stretch; overflow-y: auto; }
.menu-left { flex: 1; align-self: flex-end; padding-bottom: 8px; margin-top: auto; }
.team-tag { display: inline-block; padding: 12px 16px; max-width: 520px; }
.tt-name { font-size: 15px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.medal-row { display: flex; gap: 4px; flex-wrap: wrap; }
.medal { display: inline-grid; place-items: center; width: 36px; height: 36px; background: rgba(0, 0, 0, .35); filter: grayscale(1) brightness(.4); box-shadow: inset 0 0 0 2px var(--ink); }
.medal.on { filter: none; background: rgba(255, 200, 60, .15); }
.menu-panel { width: min(410px, 46vw); display: flex; flex-direction: column; gap: 8px; margin: auto 0; }
.mrow { display: flex; gap: 8px; }
.mrow .mbtn { flex: 1; }
.mbtn { position: relative; text-align: left; padding: 14px 18px 16px; border: 0; transition: transform .1s steps(2); }
.mbtn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.mbtn b { display: block; font-family: var(--font-d); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .5px; text-shadow: 2px 2px 0 var(--ink); }
.mbtn small { color: var(--muted); font-size: 13px; }
.mbtn.play { --face: #e8542f; --hi: #ff9a6a; --lo: #9a2a14; padding: 18px 22px 20px; }
.mbtn.play b { font-size: 46px; }
.mbtn.play small, .mbtn.gacha small, .mbtn.continue small { color: #fff3e6; }
.mbtn.gacha { --face: #6a3cff; --hi: #a88cff; --lo: #3a1aa8; }
.mbtn.continue { --face: #1f9a55; --hi: #6be39b; --lo: #0f5a30; }
.dot { position: absolute; top: 10px; right: 12px; background: var(--pink); color: #fff; font-style: normal; font-size: 13px; padding: 1px 7px 2px; box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------------- gimnasios */
.saved { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 14px; flex-wrap: wrap; --face: #1b4a3a; --hi: #2e7a5e; --lo: #0c2a20; }
.saved span { flex: 1; }
.gym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.gym { padding: 16px; display: flex; flex-direction: column; gap: 8px; --hi: color-mix(in srgb, var(--tc) 60%, #3b46aa); }
.gym.cleared { --face: #1b2a5e; }
.gym.locked { filter: grayscale(.85) brightness(.6); }
.g-head { display: flex; align-items: center; gap: 10px; }
.g-head small { color: var(--muted); font-size: 12px; }
.g-head h3 { margin: 0; font-family: var(--font-d); font-weight: 400; font-size: 32px; line-height: 1; }
.g-head > div { flex: 1; }
.gym p { margin: 0; color: #d6dbff; font-size: 14px; line-height: 1.35; }
.g-types { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.g-ace { display: flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, .3); padding: 6px 10px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3); }
.g-ace small { display: block; color: var(--muted); font-size: 11px; }
.lock-txt { text-align: center; color: var(--muted); padding: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.zone-team { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 16px; flex-wrap: wrap; }
.zone-team .pbtn { margin-left: auto; }
.mini-poke { background: rgba(255, 255, 255, .06); padding: 2px; }
.mini-poke.lead { box-shadow: inset 0 0 0 2px var(--gold); }

/* ---------------- mapa de la aventura */
#s-map.active { display: flex; flex-direction: column; gap: 10px; padding: 12px; padding-top: max(12px, env(safe-area-inset-top)); background: rgba(8, 10, 34, .72); }
.map-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px 12px; flex-wrap: wrap; }
.mh-lead { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.mh-lead b { font-size: 16px; }
.mh-lead small { color: var(--muted); }
.mh-lead .pbar { width: 170px; margin-top: 3px; }
.mh-res { display: flex; gap: 10px; align-items: center; flex: 1; flex-wrap: wrap; }
.map-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 300px; gap: 10px; }
.map-scroll { overflow-y: auto; position: relative; background-color: #1d4a2c; background-image: linear-gradient(45deg, rgba(0, 0, 0, .12) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .12) 75%), linear-gradient(45deg, rgba(0, 0, 0, .12) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .12) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 60px rgba(0, 0, 0, .5); }
.map-canvas { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
.map-lines { position: absolute; inset: 0; pointer-events: none; }
.map-lines line { stroke: rgba(230, 210, 150, .35); stroke-width: 4; stroke-dasharray: 4 6; }
.map-lines line.on { stroke: var(--gold); stroke-dasharray: 6 4; animation: dash 1s steps(5) infinite; }
.map-lines line.done { stroke: rgba(255, 255, 255, .7); stroke-dasharray: none; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.mnode { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 4px; }
.mnode .pxi { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .6)); }
.mnode span { font-size: 12px; color: #e0e6ff; white-space: nowrap; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.mnode:disabled { cursor: default; filter: none; opacity: .55; }
.mnode.visited { opacity: .35; }
.mnode.here { opacity: 1; }
.mnode.here::before { content: ''; position: absolute; inset: -4px; box-shadow: inset 0 0 0 3px #fff; }
.mnode.avail { opacity: 1; animation: bob .8s steps(2) infinite alternate; }
.mnode.avail span { color: var(--gold); }
.mnode.avail::after { content: ''; position: absolute; left: 50%; top: -10px; width: 8px; height: 8px; margin-left: -4px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.mnode.gym span { font-size: 14px; color: #ffd0a0; }
@keyframes bob { to { transform: translate(-50%, calc(-50% - 4px)); } }
.map-side { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.map-side h4 { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.ms-gym { display: flex; align-items: center; gap: 10px; }
.ms-gym > div { flex: 1; display: flex; flex-direction: column; }
.ms-gym small { color: var(--muted); font-size: 11px; }
.ms-gym b { font-family: var(--font-d); font-weight: 400; font-size: 28px; line-height: 1; }
.ms-syn { display: flex; flex-direction: column; gap: 4px; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 12px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 6px; }
.syn-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 9px 5px; font-size: 13px; background: color-mix(in srgb, var(--tc) 30%, #0b0e30); box-shadow: inset 0 0 0 2px var(--tc); }
.syn-chip small { width: 100%; font-size: 11px; color: #e6e9ff; }
.items { display: flex; gap: 4px; flex-wrap: wrap; }
.item { --n: 2px; position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
.item i { position: absolute; right: 2px; bottom: 1px; font-style: normal; font-size: 11px; color: var(--gold); text-shadow: 1px 1px 0 #000; }

/* ---------------- equipo */
.team-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.slot { position: relative; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 180px; justify-content: center; cursor: pointer; text-align: center; }
.slot.sel { --hi: var(--gold); --face: #2a2f7a; }
.slot.locked { cursor: default; opacity: .6; }
.slot small { position: absolute; top: 10px; left: 12px; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.slot b.empty { font-size: 40px; color: var(--muted); }
.slot span { color: var(--muted); font-size: 12px; }
.slot .slot-move { color: #dfe3ff; }
.slot .x { position: absolute; top: 8px; right: 10px; border: 0; background: rgba(255, 255, 255, .12); width: 26px; height: 26px; font-size: 16px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 6px; }
.pick { border: 0; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; --hi: color-mix(in srgb, var(--rc) 55%, #3b46aa); }
.pick:hover { filter: brightness(1.15); }
.pick.in { --face: #3a3170; --hi: var(--gold); }
.pick b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pick small { color: var(--muted); font-size: 11px; }
.pick-types { display: flex; gap: 3px; }
.pick-types i { width: 10px; height: 10px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .4); }

/* ---------------- gacha */
.gacha-layout { display: grid; grid-template-columns: 200px 1fr 270px; gap: 12px; align-items: start; }
.ban-list { display: flex; flex-direction: column; gap: 6px; }
.ban-tab { text-align: left; padding: 8px 12px 10px 8px; border: 0; display: flex; align-items: center; gap: 8px; --face: var(--c2); --hi: var(--c1); --lo: rgba(0, 0, 0, .45); }
.ban-tab .pk-icon { background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.ban-tab b { display: block; font-size: 15px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .6); }
.ban-tab small { color: rgba(255, 255, 255, .78); font-size: 11px; }
.ban-tab.sel { --hi: var(--gold-hi); --edge: var(--gold); filter: brightness(1.15); }
.ban-main { display: flex; flex-direction: column; gap: 10px; }
.ban-art { position: relative; overflow: hidden; min-height: 300px; padding: 16px 20px 16px; display: flex; flex-direction: column; gap: 12px; --hi: rgba(255, 255, 255, .35); --lo: rgba(0, 0, 0, .4);
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(165deg, var(--c1) 0%, var(--c2) 72%, #090b26 100%); }
.ban-art > * { position: relative; }
.ban-art > .ban-rays, .ban-art > .ban-sparks { position: absolute; pointer-events: none; }
.ban-rays { left: 50%; top: 46%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; background: repeating-conic-gradient(rgba(255, 255, 255, .11) 0 8deg, transparent 8deg 16deg); animation: raysSpin 40s linear infinite; }
.ban-sparks { inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .9) 1px, transparent 1.6px), radial-gradient(rgba(255, 240, 170, .7) 1px, transparent 1.6px); background-size: 46px 46px, 74px 74px; background-position: 0 0, 23px 31px; opacity: .35; animation: sparkDrift 9s steps(18) infinite; }
@keyframes sparkDrift { to { background-position: 0 -46px, 23px -43px; } }
.ban-top { display: flex; align-items: center; gap: 10px; }
.ban-top h2 { margin: 0; font-family: var(--font-d); font-weight: 400; font-size: clamp(34px, 5vw, 50px); line-height: .95; text-shadow: 3px 3px 0 var(--ink), 0 0 18px rgba(0, 0, 0, .35); }
.ban-kicker { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); text-shadow: 1px 1px 0 var(--ink); }
.ban-heroes { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 28px); flex: 1; padding: 4px 0; }
.ban-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 0; animation: heroBob 2.4s steps(6) infinite alternate; animation-delay: calc(var(--i, 0) * -0.8s); }
.ban-hero .pk-icon { background: rgba(0, 0, 0, .28); box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--r-L), 0 0 26px 8px rgba(255, 220, 120, .45); }
.ban-hero:nth-child(2) .pk-icon { width: 124px; height: 124px; }
.ban-hero b { font-family: var(--font-d); font-weight: 400; font-size: 24px; line-height: 1; text-shadow: 2px 2px 0 var(--ink); }
.ban-hero.big .pk-icon { width: 136px; height: 136px; }
@keyframes heroBob { to { transform: translateY(-6px); } }
.ban-foot { display: flex; flex-direction: column; gap: 6px; background: rgba(7, 9, 35, .55); padding: 8px 10px 10px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.ban-foot small { color: rgba(255, 255, 255, .85); font-size: 12px; }
.ban-pool { display: flex; flex-wrap: wrap; gap: 4px; }
.bp { position: relative; display: inline-flex; padding: 2px; border: 0; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 2px var(--rc); cursor: pointer; }
.bp:hover { filter: brightness(1.25); transform: translateY(-1px); }
.bp.rar-b-L { background: rgba(255, 207, 58, .22); } .bp.rar-b-E { background: rgba(192, 107, 255, .2); }
.bp.own::after { content: '✓'; position: absolute; right: -1px; bottom: -3px; font-size: 11px; font-weight: 700; color: #5df58f; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.ban-lock { position: absolute !important; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(8, 10, 34, .62); font-size: 18px; text-align: center; padding: 20px; }
.ban-art.locked .ban-heroes { filter: grayscale(.4) brightness(.8); }
.ban-feat { display: flex; gap: 18px; align-items: center; flex: 1; }
.ban-leg { flex: 1; display: flex; align-items: center; gap: 16px; }
.ban-leg b { display: block; font-family: var(--font-d); font-weight: 400; font-size: 46px; line-height: 1; text-shadow: 3px 3px 0 var(--ink); }
.ban-leg small { display: block; color: #fff6dc; max-width: 300px; line-height: 1.35; margin-top: 6px; text-shadow: 1px 1px 0 var(--ink); }
.ban-epics { display: flex; flex-direction: column; gap: 6px; }
.ban-epic { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 0; background: rgba(42, 22, 80, .75); box-shadow: inset 0 0 0 2px var(--r-E); text-align: left; }
.ban-epic .pk-icon { background: rgba(0, 0, 0, .3); }
.ban-epics > small { color: #ecd4ff; text-shadow: 1px 1px 0 var(--ink); }
.pity { padding: 12px 14px 14px; font-size: 13px; color: var(--muted); }
.pity b { color: var(--gold); }
.pity .pbar { margin-bottom: 6px; }
.pull-btns { display: flex; gap: 10px; }
.pull-btns .pbtn { flex: 1; }
.own-line { text-align: center; color: var(--muted); font-size: 13px; }
.rates { padding: 16px; }
.rates h4 { margin: 0 0 8px; }
.rate { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.rates ul { padding-left: 18px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* cinemática y resultados del gacha */
#gachafx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; display: none; image-rendering: pixelated; }
#gachafx.show { display: block; }
.gfx-skip { position: fixed; right: 16px; bottom: 16px; z-index: 71; display: none; }
.gfx-skip.show { display: inline-flex; }
#pullfx { position: fixed; inset: 0; display: none; z-index: 40; background: rgba(4, 5, 22, .92); flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 20px; }
#pullfx.show { display: flex; }
.pull-grid { display: grid; grid-template-columns: repeat(5, 140px); gap: 10px; }
.pull-grid.one { grid-template-columns: 200px; }
.pcard { position: relative; padding: 16px 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; --hi: var(--rc); --face: color-mix(in srgb, var(--rc) 22%, #12153d); animation: cardIn .3s calc(var(--i) * .04s) both steps(4); }
.pcard b { font-size: 14px; }
.pcard em { font-style: normal; font-size: 11px; padding: 2px 6px 3px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.b-new { background: var(--pink); }
.b-star { background: var(--gold); color: #3a2200; }
.b-dust { background: #4a2a9a; }
.b-shiny { position: absolute; top: 6px; font-size: 11px; background: linear-gradient(90deg, #ff6bd6, #ffe66b, #6bffd8); color: #1a1030; padding: 1px 6px; }
.pull-actions { display: flex; gap: 10px; }
@keyframes cardIn { from { transform: translateY(24px) scale(.9); opacity: 0; } }

/* ---------------- pokédex */
#s-dex.active { display: flex; flex-direction: column; }
.dex-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.dex-filters input, .dex-filters select, textarea { background: #0a0c26; border: 0; box-shadow: inset 0 0 0 2px #3b46aa; color: var(--text); padding: 8px 12px; font-family: inherit; font-size: 14px; }
.dex-filters input[type=search] { flex: 1; min-width: 160px; }
.chk { display: inline-flex; align-items: center; gap: 6px; }
.dex-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; gap: 10px; }
.dex-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; align-content: start; padding-right: 4px; }
.dex-cell { --n: 3px; position: relative; border: 0; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; --face: #161b52; --hi: #262d72; }
.dex-cell.own { --hi: color-mix(in srgb, var(--rc) 60%, #262d72); --face: #1d2366; }
.dex-cell.seen { --face: #1a1f58; }
.dex-cell.sel { --hi: var(--gold); }
.dex-cell small { color: var(--muted); font-size: 10px; }
.dex-cell span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dex-cell .st { position: absolute; top: 5px; right: 6px; font-style: normal; color: var(--gold); font-size: 9px; }
.dex-detail { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.dd-head { display: flex; gap: 12px; align-items: center; }
.dd-head h2 { margin: 2px 0 4px; font-family: var(--font-d); font-weight: 400; font-size: 36px; line-height: 1; }
.dd-head small { color: var(--muted); }
.dd-head .pk-icon { box-shadow: 0 0 0 3px var(--rc); background: rgba(0, 0, 0, .25); }
.dd-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dd-actions .pbtn { padding: 7px 12px 9px; font-size: 13px; }
.stat { display: grid; grid-template-columns: 70px 36px 1fr; align-items: center; gap: 6px; font-size: 13px; }
.stat span { color: var(--muted); }
.stat .pbar i { background: var(--good); }
.bst { text-align: right; font-size: 13px; margin-top: 4px; }
.dd-move small, .dd-chain small { color: var(--muted); display: block; }
.dd-move p { margin: 4px 0 0; font-size: 13px; color: #d4d9ff; }
.dd-chain > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.dd-chain span { display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; padding: 4px; }
.dd-chain span.cur { background: rgba(255, 203, 61, .15); box-shadow: inset 0 0 0 2px rgba(255, 203, 61, .5); }
.dd-chain i { color: var(--muted); font-style: normal; }
.credit { color: var(--muted); font-size: 11px; margin: 0; }

/* ---------------- mejoras / misiones / tienda / ajustes */
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.up { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.up.max { --hi: #2e9a5e; }
.up-ic { width: 52px; height: 52px; display: grid; place-items: center; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 2px var(--ink); flex: none; }
.up-body { flex: 1; min-width: 0; }
.up-body small { display: block; color: var(--muted); font-size: 13px; }
.pips { display: flex; gap: 3px; margin-top: 6px; }
.pips i { flex: 1; max-width: 20px; height: 7px; background: #0a0c26; box-shadow: inset 0 0 0 1px #3b46aa; }
.pips i.on { background: var(--gold); box-shadow: none; }
.maxed { color: var(--good); font-size: 14px; padding: 0 10px; }
.slots-info { margin-top: 16px; color: var(--muted); font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.slots-info span { padding: 4px 10px; background: rgba(255, 255, 255, .06); }
.slots-info span.on { background: rgba(62, 224, 122, .2); color: var(--good); }
.mis-list { display: flex; flex-direction: column; gap: 6px; max-width: 780px; }
.mis { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.mis.done { opacity: .55; }
.mis.bonus { --face: #4a1a3a; --hi: #a83a7a; }
.mis-body { flex: 1; }
.mis-body .pbar { margin: 6px 0 2px; }
.mis-body small { color: var(--muted); font-size: 12px; }
.mis-rew { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.milestones { display: flex; gap: 6px; flex-wrap: wrap; }
.milestones span { --n: 3px; padding: 6px 12px 8px; color: var(--muted); }
.milestones span.on { --face: #1f9a55; --hi: #6be39b; --lo: #0f5a30; color: #fff; }
.shop-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.shop-box, .set-box { padding: 18px; }
.shop-box h3, .set-box h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.shop-box h3 small { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.shop-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 2px solid rgba(0, 0, 0, .3); }
.shop-row span { flex: 1; display: flex; align-items: center; gap: 8px; }
.set-box { max-width: 780px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.set-box label { display: flex; align-items: center; gap: 12px; }
.set-box input[type=range] { flex: 1; accent-color: var(--gold); }
.set-box textarea { width: 100%; resize: vertical; font-size: 12px; }
.set-box .row { justify-content: flex-start; margin: 0; }
.credits p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }

/* ---------------- HUD de combate */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
#hud button { pointer-events: auto; }
.hud-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hud-lead { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px 6px; width: min(330px, 38vw); }
.hl-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.hl-body b { font-size: 14px; }
.hud-center { text-align: center; }
#hud-time { font-family: var(--font-d); font-size: 48px; line-height: .9; text-shadow: 3px 3px 0 var(--ink); }
.hud-center small { font-size: 13px; color: #ffe9a8; text-shadow: 1px 1px 0 #000; }
.hud-res { display: flex; align-items: center; gap: 6px; }
.hud-res .res { padding: 5px 10px 6px 6px; font-size: 15px; }
.boss-bar { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); width: min(560px, 70vw); text-align: center; }
.boss-bar b { font-family: var(--font-d); font-weight: 400; font-size: 24px; text-shadow: 2px 2px 0 #000; }
.hud-army { position: absolute; left: 10px; bottom: 10px; padding: 8px 12px 10px; max-width: 46vw; }
.hud-army > b { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.hud-army > b small { color: var(--muted); }
.ha-list { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.ha-list span { position: relative; }
.ha-list span.ko { filter: grayscale(1) brightness(.5); }
.ha-list i { position: absolute; right: -2px; bottom: -2px; font-style: normal; font-size: 9px; background: #cfe0ff; color: #12153d; padding: 0 2px; }
.ha-list i.r3 { background: var(--gold); }
.hud-side { position: absolute; right: 10px; top: 70px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 30vw; }
.hud-side .syn-chip small { text-align: right; }
.hud-actions { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: flex-end; gap: 10px; }
.ball-btns { display: flex; flex-direction: column-reverse; gap: 6px; }
.ball-btn { --n: 3px; border: 0; width: 64px; height: 50px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; }
.ball-btn b { font-size: 15px; }
.ball-btn:active { transform: translateY(2px); }
.ult-btn { position: relative; width: 96px; height: 96px; border: 0; background: #0a0c26; overflow: hidden; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); box-shadow: inset 0 0 0 4px var(--ink); }
.ult-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(180deg, #ffd35a, #ff8a1f); transition: height .15s steps(5); }
.ult-ic { position: absolute; inset: 0; display: grid; place-items: center; }
.ult-ic i { width: 34px; height: 34px; box-shadow: inset 0 0 0 3px var(--ink); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity: .9; }
.ult-btn b { position: absolute; left: 0; right: 0; bottom: 10px; font-size: 13px; text-shadow: 1px 1px 0 #000; }
.ult-btn.ready { animation: ultPulse .5s steps(2) infinite alternate; }
.ult-btn.ready .ult-fill { background: linear-gradient(180deg, #fff2a0, #ffc83a); }
@keyframes ultPulse { to { filter: brightness(1.35); } }

/* ---------------- modales */
#modal { position: fixed; inset: 0; display: none; z-index: 30; align-items: center; justify-content: center; background: rgba(4, 5, 20, .65); padding: 16px; overflow-y: auto; }
#modal.show { display: flex; }
#modal.lv { background: rgba(6, 8, 30, .72); }
.modal-card { padding: 22px 26px 24px; max-width: 600px; width: 100%; text-align: center; animation: pop .2s steps(3); margin: auto; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.modal-card h2 { font-family: var(--font-d); font-weight: 400; font-size: 42px; line-height: 1; margin: 6px 0 10px; text-shadow: 3px 3px 0 var(--ink); }
.modal-card h3 { margin: 14px 0 8px; }
.mc-head { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 8px; }
.mc-head h2 { margin: 0; }
.levelup { text-align: center; width: 100%; max-width: 1000px; margin: auto; }
.levelup h2 { font-family: var(--font-d); font-weight: 400; font-size: 64px; line-height: 1; margin: 0; color: var(--gold); text-shadow: 4px 4px 0 var(--ink); }
.lv-sub { margin: 4px 0 14px; color: #9be7ff; }
.lv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lvcard { position: relative; border: 0; padding: 18px 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-height: 240px; animation: cardIn .25s calc(var(--i) * .06s) both steps(4); }
.lvcard:hover { transform: translateY(-5px); --hi: var(--blue-hi); }
.lvcard.evo { --face: #5a3e05; --hi: var(--gold); --lo: #2d1f00; }
.lvcard.learn { --hi: #a06bff; }
.lvcard.army { --face: #173a3a; --hi: #3ec0a0; --lo: #0a2020; }
.lvcard .key { position: absolute; top: 10px; left: 12px; font-size: 12px; color: var(--muted); box-shadow: inset 0 0 0 2px #3b46aa; padding: 0 6px; }
.lv-tag { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #9be7ff; }
.lvcard.evo .lv-tag { color: var(--gold); }
.lv-ic { height: 56px; display: grid; place-items: center; }
.type-big { font-family: var(--font-d); font-size: 28px; color: var(--tc); text-shadow: 2px 2px 0 var(--ink); }
.lvcard b { font-family: var(--font-d); font-weight: 400; font-size: 28px; line-height: 1; }
.lvcard small { color: var(--muted); }
.lvcard p { margin: 6px 0 0; font-size: 13px; color: #dfe3ff; line-height: 1.4; }
.lvcard p em { color: var(--gold); font-style: normal; font-size: 12px; }
.type-dot { display: inline-block; width: 10px; height: 10px; background: var(--tc); margin-right: 6px; vertical-align: middle; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.lv-actions { margin-top: 14px; }
.chest-ic { animation: pop .3s steps(3); }
.chest-list { display: grid; gap: 6px; margin: 10px 0; }
.chest-item { animation: cardIn .3s calc(var(--i) * .15s) both steps(4); }
.chest-item .lvcard { min-height: 0; flex-direction: row; text-align: left; padding: 10px 14px; gap: 10px; animation: none; }
.chest-item .lvcard .key { display: none; }
.chest-item .lvcard p { margin: 0; flex: 1; }
.pause-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.pause-grid div { --n: 3px; padding: 8px; --face: #141947; }
.pause-grid small { display: block; color: var(--muted); font-size: 11px; }
.pause-grid b { font-size: 18px; }
.res-rew { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.res-rew .res { background: rgba(0, 0, 0, .3); padding: 6px 12px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3); }
.res.xp { color: #9be7ff; }
.lvup { color: var(--gold); margin: 6px 0; }
.warn-txt { color: #ffb3bb; }
.res-caps { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; margin: 8px 0; }
.res-caps small { color: var(--muted); width: 100%; }
.res-caps span { position: relative; }
.res-caps em { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); background: var(--pink); font-style: normal; font-size: 9px; padding: 0 4px; }
.journey-end.win h2 { color: var(--gold); }
.journey-end.lose h2 { color: #ffb3bb; }
.medal-big { animation: pop .4s steps(4); filter: drop-shadow(0 0 16px rgba(255, 210, 80, .6)); }
.keep-grid, .army-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin: 10px 0; max-height: 46vh; overflow-y: auto; padding: 2px; }
.unit { --n: 3px; border: 0; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; --hi: color-mix(in srgb, var(--rc) 55%, #3b46aa); }
.unit b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.unit small { color: var(--muted); font-size: 11px; }
.unit small.new { color: var(--pink); }
.unit .pbar { width: 80%; }
.unit.ko { filter: grayscale(1) brightness(.7); }
.u-types { display: flex; gap: 3px; }
button.unit:hover { filter: brightness(1.2); }
.army .ms-syn { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
.shop-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; text-align: left; }
.shop-item { --n: 3px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; --face: #161b52; }
.shop-item > div { flex: 1; display: flex; flex-direction: column; }
.shop-item small { color: var(--muted); font-size: 12px; }
.shop-item.sold { opacity: .5; }
.ev-text { font-size: 17px; line-height: 1.45; margin: 10px 0 16px; }
.ev-opts { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.daily .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 12px 0; }
.daily .days span { --n: 3px; padding: 6px 2px; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; --face: #141947; }
.daily .days span b { display: inline-flex; align-items: center; gap: 3px; color: var(--text); }
.daily .days span.on { --face: #4a1a3a; color: var(--text); }
.daily .days span.today { --hi: var(--gold); }

/* banner central */
#banner { position: fixed; left: 0; right: 0; top: 20%; display: flex; justify-content: center; pointer-events: none; z-index: 20; opacity: 0; transition: opacity .15s steps(2); }
#banner.show { opacity: 1; }
.evo-txt { padding: 12px 24px 14px; font-size: 20px; text-align: center; animation: pop .25s steps(3); }
.evo-txt.done b { color: var(--gold); }
.evo-txt small { display: block; font-size: 14px; color: #9be7ff; margin-top: 2px; }
.boss-intro { display: flex; align-items: center; gap: 16px; padding: 12px 28px 14px 14px; --face: #6a0f22; --hi: #ff9f1c; --lo: #2a0410; animation: slideIn .35s steps(5); }
@keyframes slideIn { from { transform: translateX(-60vw); } }
.boss-intro small { color: #ffd0a0; font-size: 14px; }
.boss-intro b { display: block; font-family: var(--font-d); font-weight: 400; font-size: 52px; line-height: 1; }
.ult-intro { display: flex; align-items: center; gap: 14px; padding: 10px 26px 12px 12px; --face: color-mix(in srgb, var(--tc) 55%, #0b0e30); --hi: var(--tc); animation: slideIn .3s steps(4); }
.ult-intro b { font-family: var(--font-d); font-weight: 400; font-size: 56px; line-height: 1; text-transform: uppercase; text-shadow: 3px 3px 0 var(--ink); }

/* toasts */
#toasts { position: fixed; bottom: 128px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 50; }
.toast { --n: 3px; padding: 7px 16px 9px; font-size: 15px; animation: pop .2s steps(3); transition: opacity .3s steps(3), transform .3s steps(3); --face: #12153d; }
.toast.out { opacity: 0; transform: translateY(-10px); }
.toast.ticket { --hi: var(--pink); color: #ffc4de; }
.toast.warn { --hi: var(--bad); color: #ffc0c6; }
.toast.good { --hi: var(--good); color: #c4ffd8; }
.toast.elite { --hi: var(--gold); color: #ffe9a8; }
.toast.boss { --hi: #ff9f1c; color: #ffd0a0; font-size: 17px; }
.toast.evo { --hi: var(--gold); color: var(--gold); }

#loading { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(8, 10, 34, .92); font-size: 18px; }
.spinner { width: 56px; height: 56px; border: 5px solid var(--ink); border-radius: 50%; background: linear-gradient(180deg, #e8343f 0 44%, var(--ink) 44% 56%, #f3f3f3 56%); animation: spin .8s steps(8) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- responsive */
@media (max-width: 1000px) {
  .gacha-layout { grid-template-columns: 1fr; }
  .ban-list { flex-direction: row; overflow-x: auto; }
  .ban-tab { flex: none; }
  .dex-layout { grid-template-columns: 1fr; }
  .dex-detail { max-height: 45vh; }
  .shop-cols { grid-template-columns: 1fr; }
  .team-slots { grid-template-columns: repeat(2, 1fr); }
  .map-body { grid-template-columns: 1fr; }
  .map-side { display: none; }
}
@media (max-width: 760px) {
  .screen { padding: 64px 12px 12px; }
  .logo { font-size: 26px; }
  .tb-res .res { padding: 4px 8px 5px 6px; font-size: 14px; }
  .trainer { display: none; }
  #s-menu.active { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .menu-panel { margin: auto 0 0; }
  .menu-left { display: flex; flex-direction: column; gap: 6px; flex: none; align-self: stretch; margin: 0 0 8px; padding: 0; }
  .menu-left .league-card, .menu-left .chest-row { width: 100%; margin: 0; }
  .menu-left .team-tag { padding: 6px 10px 8px; }
  .menu-left .medal-row { display: none; }
  .menu-panel { width: 100%; }
  .pull-grid { grid-template-columns: repeat(5, 18vw); gap: 4px; }
  .lv-cards { grid-template-columns: 1fr; }
  .lvcard { min-height: 0; }
  .ban-art.featured { flex-direction: column; }
  .pause-grid { grid-template-columns: repeat(2, 1fr); }
  .hud-lead { width: 46vw; }
}
@media (max-height: 520px) {
  .screen { padding-top: 58px; }
  #topbar { padding: 6px 12px; }
  .mbtn { padding: 8px 14px 10px; }
  .mbtn b { font-size: 24px; }
  .mbtn.play { padding: 10px 16px 12px; }
  .mbtn.play b { font-size: 32px; }
  .menu-panel { gap: 5px; }
  .hud-side .syn-chip small { display: none; }
  .hud-side { top: 60px; }
  #hud-time { font-size: 34px; }
  .lvcard { min-height: 0; padding: 10px; }
  .lv-ic { height: 40px; }
  .levelup h2 { font-size: 40px; }
  .lv-sub { display: none; }
  .hud-army { padding: 4px 8px 6px; }
  .ha-list { display: none; }
  .ult-btn { width: 76px; height: 76px; }
  .ball-btn { width: 56px; height: 42px; }
  .boss-bar { top: 58px; }
  .pull-grid { grid-template-columns: repeat(5, 110px); }
  .pcard { padding: 8px 4px; }
}

/* ---------------- modo entrenador: HUD inferior, especiales, silbato, Poké Balls */
.hud-bottom { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.hud-bottom > * { pointer-events: auto; }
.hud-bottom .hud-army { position: static; display: flex; flex-direction: column; padding: 8px 12px 10px; max-width: none; }
.hud-bottom .hud-army small { color: var(--muted); font-size: 11px; }
.spec-bar { flex: 1; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.spec-btn { --n: 3px; --face: color-mix(in srgb, var(--tc) 45%, #10143e); --hi: var(--tc); position: relative; border: 0; min-width: 96px; padding: 7px 10px 9px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; text-align: left; }
.spec-btn b { font-size: 14px; line-height: 1.1; text-shadow: 1px 1px 0 #000; }
.spec-btn small { font-size: 11px; color: #e6e9ff; }
.spec-btn i { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 11px; color: #fff; opacity: .7; }
.spec-btn .cdf { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(4, 6, 24, .72); pointer-events: none; }
.spec-btn.cool { filter: grayscale(.5); }
.spec-btn:active { transform: translateY(2px); }
.hud-bottom .hud-actions { position: static; display: flex; align-items: flex-end; gap: 8px; }
.act-btn { --n: 3px; border: 0; width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.act-btn small { font-size: 11px; }
.act-btn:active { transform: translateY(2px); }
.ball-btn.sel { --hi: var(--gold); --face: #3a3170; }
.ball-btn.armed { animation: ultPulse .4s steps(2) infinite alternate; --hi: #ff4b5c; }
.hl-partner { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.hl-partner .pbar { flex: 1; }
.hl-partner small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.tr-ic img { display: block; }
#hud-goal-big { font-family: var(--font-d); font-size: 40px; line-height: .9; text-shadow: 3px 3px 0 var(--ink); }
.hud-side { top: 84px; }
.lang-switch { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.set-box .lang-switch { justify-content: flex-start; margin: 0; }
.controls { margin: 8px 0 14px; padding: 0; list-style: none; text-align: left; display: grid; gap: 5px; font-size: 13px; color: #dfe3ff; }
.controls b { color: var(--gold); margin-right: 6px; }
.tutorial { max-width: 640px; }
.unit.partner { --face: #3a3170; --hi: var(--gold); }
.u-badge { font-size: 10px; color: #3a2200; background: var(--gold); padding: 0 6px 1px; }
.confirm { max-width: 460px; }
.ios-tip { max-width: 480px; }
.ios-tip ol { text-align: left; line-height: 1.5; padding-left: 22px; }
@media (max-width: 760px) {
  .spec-btn { min-width: 0; padding: 5px 7px 7px; }
  .spec-btn small { display: none; }
  .hud-bottom .hud-army { display: none; }
}
@media (max-height: 520px) {
  #hud-goal-big { font-size: 28px; }
  .act-btn { width: 52px; height: 52px; }
  .spec-btn small { display: none; }
  .hl-partner small { display: none; }
}

/* duelos: Poké Balls del rival */
#hud-goal-big .duel-ball { display: inline-block; margin: 0 1px; }
#hud-goal-big .duel-ball.off { filter: grayscale(1) brightness(.45); }

/* ================================================================= modo Fiesta */
#board3d { position: fixed; inset: 0; width: 100vw; height: 100vh; display: none; image-rendering: pixelated; }
.mbtn.play.party { --face: #ff3f6e; --hi: #ff9ab4; --lo: #a3123a; }
.mbtn.play.party b { animation: partyPulse 1.6s steps(4) infinite; }
@keyframes partyPulse { 50% { text-shadow: 2px 2px 0 var(--ink), 0 0 12px #ffe066; } }

/* liga y cofres en el menú */
.league-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px 14px; border: 0; width: min(420px, 100%); margin-bottom: 8px; text-align: left; --face: #232a7a; }
.league-card .lc-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.league-card b { font-family: var(--font-d); font-weight: 400; font-size: 28px; line-height: 1; text-shadow: 2px 2px 0 var(--ink); }
.lc-tro { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-hi); font-size: 14px; }
.chest-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: min(420px, 100%); margin-bottom: 8px; }
.chest-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px; border: 0; min-height: 84px; justify-content: center; --face: #171c55; font-size: 12px; }
.chest-slot.empty { opacity: .5; }
.chest-slot b { font-size: 13px; color: var(--gold-hi); }
.chest-slot small { font-size: 11px; color: var(--muted); text-align: center; }
.chest-slot.going { --hi: #4fb7ff; }
.chest-slot.ready { --face: #2c6a2a; --hi: #7ae07a; animation: chestReady 1s steps(2) infinite; }
.chest-slot.ready b { color: #fff; }
@keyframes chestReady { 50% { transform: translateY(-3px); } }

/* búsqueda de partida */
.mm { max-width: 640px; }
.mm-spin { display: inline-block; animation: mmSpin 1s steps(8) infinite; }
@keyframes mmSpin { to { transform: rotate(360deg); } }
.mm-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
.mm-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 14px; min-height: 130px; justify-content: center; font-size: 13px; --face: #141846; }
.mm-slot.found { --hi: var(--pc); animation: pop .25s steps(3); }
.mm-slot small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.mm-q { font-family: var(--font-d); font-size: 48px; color: var(--muted); animation: blink 1s steps(2) infinite; }

/* pantalla de la partida */
#s-party { padding: 0; pointer-events: none; }
#s-party > * { pointer-events: auto; }
#s-party .pt-banner, #s-party .pt-cards { pointer-events: none; }
.pt-cards .pt-card { position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px 10px; min-width: 190px; --face: #12153d; box-shadow: inset 0 0 0 3px var(--edge), inset 6px 0 0 var(--pc), inset -4px -4px 0 var(--lo); transition: transform .2s steps(3); }
.pt-cards .pt-card:nth-child(1) { top: 10px; left: 10px; }
.pt-cards .pt-card:nth-child(2) { top: 10px; right: 10px; }
.pt-cards .pt-card:nth-child(3) { bottom: 10px; left: 10px; }
.pt-cards .pt-card:nth-child(4) { bottom: 10px; right: 10px; }
.pt-card.turn { transform: scale(1.08); --face: #2a2f7a; animation: turnGlow .8s steps(2) infinite; }
@keyframes turnGlow { 50% { filter: brightness(1.25); } }
.pt-card.me .pt-info b { color: var(--gold-hi); }
.pt-info { display: flex; flex-direction: column; gap: 2px; }
.pt-info b { font-size: 15px; }
.pt-info span { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; }
.pt-place { font-family: var(--font-d); font-size: 26px; width: 30px; text-align: center; text-shadow: 2px 2px 0 var(--ink); color: #c7cfe0; }
.pt-place.p1, .mr-place.p1, .rw-place.p1 { color: #ffd23f; }
.pt-place.p2, .mr-place.p2, .rw-place.p2 { color: #e2e8f4; }
.pt-place.p3, .mr-place.p3, .rw-place.p3 { color: #e0975a; }
.pt-roll { position: absolute; top: -10px; right: -6px; font-style: normal; font-family: var(--font-d); font-size: 26px; background: #fff; color: var(--ink); padding: 0 8px; box-shadow: inset 0 0 0 2px var(--ink); }
.pt-round { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 6px 16px 8px; font-size: 16px; --face: #12153d; white-space: nowrap; }
.pt-round b { font-family: var(--font-d); font-weight: 400; font-size: 26px; color: var(--gold-hi); }
.pt-pause { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); }
.pt-prompt { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(560px, 92vw); }
.pt-prompt .pp { padding: 14px 18px 16px; text-align: center; animation: pop .2s steps(3); --face: #1a1f5e; }
.pt-prompt .pp b { font-size: 18px; }
.pt-prompt .row { margin-top: 10px; }
.pt-banner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; }
.pt-banner.show { display: flex; }
.pt-banner .ban-in { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 34px 18px; background: linear-gradient(90deg, transparent, rgba(8, 10, 36, .82) 15%, rgba(8, 10, 36, .82) 85%, transparent); width: 100%; animation: banIn .35s steps(5); }
.pt-banner b { font-family: var(--font-d); font-weight: 400; font-size: clamp(38px, 7vw, 76px); line-height: 1; color: #fff; text-shadow: 4px 4px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); }
.pt-banner small { font-size: 17px; color: var(--gold-hi); text-shadow: 2px 2px 0 var(--ink); }
.pt-banner.star b { color: #ffd23f; }
.pt-banner.mini b { color: #7fe0ff; }
@keyframes banIn { from { transform: translateX(-60px) scaleY(.2); opacity: 0; } }
#s-party[data-mode="mini"] .pt-cards, #s-party[data-mode="mini"] .pt-round, #s-party[data-mode="mini"] .pt-pause { display: none; }

/* cinemáticas */
.pt-cine { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; z-index: 6; }
.pt-cine.show { display: flex; }
.ev-card { display: flex; align-items: center; gap: 16px; padding: 18px 26px 20px; max-width: 560px; margin: 0 16px; animation: evIn .35s steps(4); --face: #1d2366; }
.ev-card b { font-family: var(--font-d); font-weight: 400; font-size: 36px; line-height: 1; text-shadow: 3px 3px 0 var(--ink); }
.ev-card p { margin: 6px 0 0; font-size: 16px; }
@keyframes evIn { from { transform: translateY(40px) scale(.7); opacity: 0; } }

.pt-cine.vs { background: #0a0c2a; overflow: hidden; }
.vs-wrap { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; height: 100%; }
.vs-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(160deg, var(--pc), #0a0c2a 85%); clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); margin: 0 -3%; animation: vsIn .45s steps(5) both; animation-delay: var(--d); }
.vs-panel:nth-child(even) { animation-name: vsInUp; }
.vs-panel b { font-family: var(--font-d); font-weight: 400; font-size: 30px; text-shadow: 3px 3px 0 var(--ink); }
.vs-panel small { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.vs-mon { font-size: 13px; color: #fff3cc; }
.vs-poke { filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .5)); animation: vsBob .6s steps(2) infinite; }
@keyframes vsIn { from { transform: translateY(-110%); } }
@keyframes vsInUp { from { transform: translateY(110%); } }
@keyframes vsBob { 50% { transform: translateY(-4px); } }
.vs-big { position: absolute; font-family: var(--font-d); font-size: clamp(80px, 16vw, 180px); color: #ffd23f; text-shadow: 6px 6px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink); animation: vsStamp .4s steps(4) both; animation-delay: 1.2s; }
.pt-cine.vs.go .vs-big { animation: vsStamp .35s steps(4) both; color: #fff; }
@keyframes vsStamp { from { transform: scale(3) rotate(-12deg); opacity: 0; } }

.pt-cine.mini { background: rgba(6, 8, 28, .78); }
.mi-card, .mr-card, .bs-card { width: min(620px, 94vw); padding: 20px 26px 24px; text-align: center; animation: pop .25s steps(3); }
.mi-card h2, .mr-card h2, .bs-card h2 { font-family: var(--font-d); font-weight: 400; font-size: 46px; line-height: 1; margin: 4px 0 10px; text-shadow: 3px 3px 0 var(--ink); color: #7fe0ff; }
.mi-tag { color: var(--gold-hi); letter-spacing: 1px; }
.mi-card p { margin: 6px 0; }
.mi-ctrl { color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.mi-stat b { color: var(--gold-hi); }
.mi-players { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 16px; }
.mi-p { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 -4px 0 var(--pc); font-size: 13px; }
.mi-p .pbar { width: 80%; }
.mi-ready { position: absolute; top: 2px; right: 6px; color: var(--good); font-style: normal; font-size: 18px; font-weight: 700; }
.mr-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 16px; }
.mr-row { display: flex; align-items: center; gap: 12px; padding: 6px 14px; background: rgba(0, 0, 0, .3); box-shadow: inset 6px 0 0 var(--pc); animation: evIn .3s steps(3) both; animation-delay: var(--d); text-align: left; }
.mr-row b { flex: 1; font-size: 17px; }
.mr-place { font-family: var(--font-d); font-size: 30px; width: 40px; text-shadow: 2px 2px 0 var(--ink); color: #c7cfe0; }
.mr-coins { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--gold-hi); }
.pt-cine.bonus { background: rgba(6, 8, 28, .82); }
.bs-card small { color: var(--gold-hi); letter-spacing: 1px; }
.bs-win { display: flex; justify-content: center; gap: 18px; min-height: 120px; align-items: center; margin-top: 10px; }
.bs-drum { font-family: var(--font-d); font-size: 60px; animation: blink .3s steps(2) infinite; }
.bs-p { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: vsStamp .3s steps(3); }
.bs-p span { display: inline-flex; align-items: center; gap: 4px; color: #ffd23f; font-weight: 700; }

.pt-cine.podium { background: radial-gradient(circle at 50% 30%, #3a2a8a, #0a0c2a 70%); flex-direction: column; justify-content: flex-end; padding-bottom: 30px; }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.pd-title { position: absolute; top: 9%; text-align: center; }
.pd-title small { display: block; color: var(--gold-hi); font-size: 18px; }
.pd-title b { font-family: var(--font-d); font-weight: 400; font-size: clamp(48px, 9vw, 96px); text-shadow: 5px 5px 0 var(--ink); animation: vsStamp .5s steps(5) both; animation-delay: 1.4s; display: block; }
.pd-stage { display: flex; align-items: flex-end; gap: 10px; position: relative; }
.pd-col { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(170px, 22vw); animation: vsInUp .45s steps(5) both; animation-delay: var(--d); }
.pd-col b { font-size: 15px; }
.pd-col span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.pd-block { width: 100%; display: flex; align-items: flex-start; justify-content: center; --face: var(--pc); }
.pd-block i { font-family: var(--font-d); font-style: normal; font-size: 40px; text-shadow: 3px 3px 0 var(--ink); margin-top: 6px; }
.pd-col.p1 .pd-block { height: 150px; } .pd-col.p2 .pd-block { height: 110px; } .pd-col.p3 .pd-block { height: 80px; } .pd-col.p4 .pd-block { height: 50px; }
.pd-col.p1 .pd-poke { animation: vsBob .4s steps(2) infinite; }
.pd-ok { margin-top: 18px; position: relative; }

/* recompensas */
.rewards h2 { color: var(--gold-hi); }
.rw-place { font-family: var(--font-d); font-size: 28px; }
.rw-tro { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-d); font-size: 54px; text-shadow: 3px 3px 0 var(--ink); }
.rw-tro em { font-style: normal; font-size: 34px; }
.rw-tro.up em { color: var(--good); } .rw-tro.down em { color: var(--bad); }
.rw-league { display: flex; align-items: center; gap: 10px; margin: 8px auto 14px; max-width: 420px; }
.rw-league .pbar { flex: 1; }
.rw-league .pbar i { transition: width 1s steps(12); }
.rw-items { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.rw-items span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 8px; font-weight: 700; --face: #141846; }
.rw-chest { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 14px 0 4px; animation: vsStamp .4s steps(4) both; animation-delay: .9s; }
.rw-chest b { color: var(--gold-hi); font-size: 18px; }
.rw-road { color: var(--gold-hi); display: inline-flex; align-items: center; gap: 6px; }

/* cofre y subida de liga */
#modal.cine { background: rgba(4, 5, 20, .9); }
.chest-fx, .league-up { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; width: min(640px, 94vw); padding: 20px; }
.cfx-rays, .lu-rays { position: absolute; left: 50%; top: 150px; width: 700px; height: 700px; margin: -350px 0 0 -350px; background: repeating-conic-gradient(rgba(255, 230, 120, .22) 0 10deg, transparent 10deg 20deg); opacity: 0; transition: opacity .3s steps(3); animation: raysSpin 8s linear infinite; pointer-events: none; }
.chest-fx.lit .cfx-rays, .league-up .lu-rays { opacity: 1; }
@keyframes raysSpin { to { transform: rotate(360deg); } }
.cfx-chest { position: relative; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .5)); }
.cfx-chest.shake { animation: chestShake .12s steps(2) infinite; }
.cfx-chest.opened { animation: vsStamp .3s steps(3); }
@keyframes chestShake { 0% { transform: translateX(-4px) rotate(-3deg); } 100% { transform: translateX(4px) rotate(3deg); } }
.cfx-title { font-family: var(--font-d); font-weight: 400; font-size: 44px; margin: 0; text-shadow: 3px 3px 0 var(--ink); position: relative; }
.cfx-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; position: relative; min-height: 100px; }
.cfx-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px 12px; min-width: 110px; animation: vsStamp .3s steps(3); --face: #141846; }
.cfx-item b { font-size: 18px; display: inline-flex; align-items: center; gap: 4px; }
.cfx-item small { color: var(--muted); }
.cfx-item.poke { --hi: var(--r-R); }
.cfx-item.poke.rar-b-E { --hi: var(--r-E); } .cfx-item.poke.rar-b-L { --hi: var(--r-L); animation: vsStamp .5s steps(5); }
.chest-info .ci-ic { margin: 6px 0; }
.lu-ball { position: relative; animation: vsStamp .6s steps(6) both; filter: drop-shadow(0 0 20px rgba(255, 230, 120, .8)); }
.league-up small { color: var(--gold-hi); font-size: 18px; position: relative; }
.league-up h1 { font-family: var(--font-d); font-weight: 400; font-size: clamp(48px, 9vw, 86px); margin: 0; line-height: 1; text-shadow: 5px 5px 0 var(--ink); position: relative; }
.league-up p { position: relative; }
.lu-gift { display: flex; align-items: center; gap: 12px; padding: 10px 18px; position: relative; }

/* ligas y camino de trofeos */
.league-tiers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; max-width: 900px; }
.tier { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 12px; background: linear-gradient(120deg, var(--c2), #0d1038 75%); box-shadow: inset 0 0 0 3px var(--ink), inset 4px 4px 0 var(--c1), inset -4px -4px 0 rgba(0, 0, 0, .45);
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)); }
.tier.locked { filter: saturate(.55) brightness(.8); }
.tier.cur { box-shadow: inset 0 0 0 3px var(--gold), inset 4px 4px 0 var(--c1), inset -4px -4px 0 rgba(0, 0, 0, .45); }
.tier-top { display: flex; align-items: center; gap: 10px; }
.tier-name b { display: block; font-family: var(--font-d); font-weight: 400; font-size: 28px; line-height: 1; text-shadow: 2px 2px 0 var(--ink); }
.tier-name small { color: rgba(255, 255, 255, .8); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.tier-st { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 3px 10px 4px; background: rgba(0, 0, 0, .35); white-space: nowrap; }
.tier-st.cur { background: var(--gold); color: #3a2200; font-weight: 700; }
.tier-mons { display: flex; flex-wrap: wrap; gap: 4px; }
.tier-rc { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.rc { color: var(--rc); }
.road { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.road-step { display: flex; align-items: center; gap: 12px; padding: 8px 14px 10px; --face: #141846; opacity: .7; }
.road-step.can { opacity: 1; --hi: var(--gold); }
.road-step.got { opacity: .45; }
.road-step.big { --face: #2a2370; }
.rs-t { display: inline-flex; align-items: center; gap: 4px; width: 80px; font-weight: 700; color: var(--gold-hi); }
.rs-w { flex: 1; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ban-tab.locked { opacity: .55; }

/* Pokédex: nivel de fiesta */
.dd-party { padding: 12px 14px 14px; margin: 10px 0; --face: #1a1f5e; text-align: left; }
.ddp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ddp-head small { display: block; color: var(--gold-hi); }
.ddp-c { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.dd-party .pbtn { margin-top: 8px; }

/* minijuegos: respuestas y botón táctil */
#mini-ui { position: fixed; left: 0; right: 0; bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 7; pointer-events: none; }
#mini-ui > * { pointer-events: auto; }
.mini-opts { display: grid; grid-template-columns: repeat(2, minmax(150px, 260px)); gap: 8px; }
.mini-opt { font-size: 18px; justify-content: flex-start; }
.mini-opt i { font-style: normal; background: rgba(0, 0, 0, .35); padding: 0 6px; margin-right: 4px; }
.mini-act { position: fixed; right: 18px; bottom: 18px; width: 110px; height: 110px; font-size: 18px; }

@media (max-width: 760px) {
  .pt-cards .pt-card { min-width: 0; padding: 5px 8px 7px 8px; gap: 4px; }
  .pt-cards .pt-card .pk-icon { width: 28px; height: 28px; }
  .pt-info b { font-size: 12px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pt-info span { font-size: 13px; }
  .pt-place { font-size: 20px; width: 22px; }
  .pt-round { top: auto; bottom: 64px; }
  .pt-pause { top: 10px; }
  .pt-prompt { bottom: 110px; }
  .vs-wrap { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
  .vs-panel { margin: 0; clip-path: none; }
  .mi-players, .mm-slots { grid-template-columns: repeat(2, 1fr); }
  .chest-slot { min-height: 70px; }
  .mini-opts { grid-template-columns: 1fr 1fr; padding: 0 8px; }
}
.lu-gift small, .lu-gift b { display: block; text-align: left; }

/* nombre de entrenador */
.name-in { display: block; width: min(320px, 100%); margin: 12px auto 0; padding: 10px 14px 12px; border: 0; color: var(--text); font-family: var(--font); font-size: 20px; text-align: center; --face: #0d1038; user-select: text; -webkit-user-select: text; }
.name-in:focus { outline: none; --hi: var(--gold); }
.set-box .name-in { margin-left: 0; text-align: left; }

/* entrar con tu cuenta */
#s-login { overflow-y: auto; padding-top: 30px; background: rgba(8, 10, 34, .72); }
.login-wrap { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.login-box { width: 100%; padding: 20px 24px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.login-box h2 { font-family: var(--font-d); font-weight: 400; font-size: 40px; margin: 0; text-shadow: 3px 3px 0 var(--ink); }
.login-box .pbtn { min-width: 280px; }
.gbtn { min-height: 44px; display: flex; justify-content: center; }
.login-err { color: var(--bad); min-height: 1em; margin: 0; }
.small { font-size: 12px; }
.menu-community { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.menu-community .pbtn { padding: 6px 12px 8px; font-size: 14px; text-decoration: none; }
.set-box .pbtn, .login-wrap a { text-decoration: none; }

.name-msg { min-height: 1.2em; margin: 4px 0 0; font-size: 14px; }
.name-msg.good { color: var(--good); }
.name-msg.bad { color: var(--bad); }

/* ventaja en la fiesta */
.perk-box { margin: 10px 0 6px; padding: 8px 12px 10px; text-align: left; background: rgba(0, 0, 0, .3); box-shadow: inset 3px 0 0 var(--rc); }
.perk-box small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.perk-box b { color: #9fe8ff; font-size: 17px; }
.perk-box p { margin: 3px 0 0; font-size: 14px; line-height: 1.35; }
.perk-box .perk-rar { color: var(--rc); font-size: 13px; }
.mon-info .mon-head { display: flex; align-items: center; gap: 14px; text-align: left; }
.mon-info .mon-head h2 { margin: 0 0 4px; }
.mon-info .mon-head .pk-icon { background: rgba(0, 0, 0, .3); box-shadow: 0 0 0 3px var(--rc); }
.vs-perk { font-size: 12px; color: #9fe8ff; background: rgba(0, 0, 0, .35); padding: 1px 8px 2px; box-shadow: inset 0 0 0 1px var(--rc); }
.lu-mons { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 560px; }
.g-prize { width: 100%; border: 0; color: inherit; text-align: left; box-shadow: inset 0 0 0 2px var(--r-L); background: rgba(255, 207, 58, .12); }
.g-prize small { color: var(--gold-hi) !important; }
.g-prize > :last-child:not(div) { margin-left: auto; }
.gym-prize { display: flex; align-items: center; gap: 14px; margin: 12px auto; padding: 10px 16px 12px; text-align: left; max-width: 420px; --face: #2a2050; --hi: var(--rc); }
.gym-prize small { display: block; color: var(--gold-hi); }
.gym-prize b { display: block; font-size: 22px; }
.gym-prize span { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  .ban-art { min-height: 0; padding: 12px 12px 12px; }
  .ban-hero .pk-icon, .ban-hero:nth-child(2) .pk-icon { width: 72px; height: 72px; }
  .ban-hero b { font-size: 17px; }
  .ban-feat { flex-direction: column; align-items: stretch; }
  .ban-hero.big .pk-icon { width: 96px; height: 96px; }
  .ban-leg b { font-size: 34px; }
  .ban-epics { flex-direction: row; flex-wrap: wrap; }
  .ban-epic .pk-icon { width: 40px; height: 40px; }
  .ban-pool .pk-icon { width: 28px; height: 28px; }
  .tier-mons .pk-icon { width: 30px; height: 30px; }
  .tier-name b { font-size: 22px; }
}

/* ================================================================ zonas seguras: muesca del iPhone y barra de gestos */
:root { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px); }
#ui { left: var(--sl); right: var(--sr); }
#modal, #pullfx { padding-left: max(16px, var(--sl)); padding-right: max(16px, var(--sr)); padding-bottom: max(16px, var(--sb)); }
.screen { padding-bottom: max(24px, var(--sb)); }
.hud-bottom { bottom: calc(10px + var(--sb)); }
.pt-cards .pt-card:nth-child(3), .pt-cards .pt-card:nth-child(4) { bottom: calc(10px + var(--sb)); }
#mini-ui { left: var(--sl); right: var(--sr); bottom: calc(16px + var(--sb)); }
.mini-act { right: calc(18px + var(--sr)); bottom: calc(18px + var(--sb)); }

/* ================================================================ tu entrenador: aspecto */
.tr-img { image-rendering: pixelated; display: inline-block; vertical-align: middle; flex: none; }
.look-ed { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.look-prev { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 12px 10px; --face: #2a6a3a; --hi: #8fe08f; background: linear-gradient(180deg, #7ec8f0 0 52%, #5aa64a 52%); }
.look-prev .tr-img.big { width: 80px; height: 100px; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .35)); }
.look-dirs { display: flex; gap: 6px; }
.look-rows { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.look-row small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.look-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.look-sw { width: 28px; height: 28px; border: 0; padding: 0; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .45); }
.look-sw.sel { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 3px var(--gold); }
@media (pointer: coarse) { .look-sw { width: 34px; height: 34px; } .look-opts .pbtn.tiny { padding: 6px 10px 8px; font-size: 13px; } }
.look-modal { max-width: 660px; }
.login-wrap.wide { max-width: 940px; }
.name-step { text-align: center; }
.ns-name { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.ns-look { width: 100%; }
.ns-look h3 { margin: 4px 0 8px; }
@media (min-width: 700px) { .name-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; gap: 18px; } }
@media (max-width: 520px) { .look-ed { flex-direction: column; align-items: stretch; } .look-prev { flex-direction: row; justify-content: center; flex-wrap: wrap; } }
.tt-trainer { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; margin-bottom: 6px; color: inherit; text-align: left; }
.tt-trainer b { font-size: 16px; }
.tt-trainer:hover { filter: brightness(1.2); }
.set-look .row { align-items: center; gap: 12px; flex-wrap: wrap; }
.vs-poke { position: relative; }
.vs-tr { position: absolute; left: -40px; bottom: -8px; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .5)); }
.mm-who { display: flex; align-items: flex-end; gap: 2px; }
.pd-poke { display: flex; align-items: flex-end; gap: 4px; }

/* ================================================================ móvil en horizontal (pantallas bajas) */
@media (orientation: landscape) and (max-height: 500px) {
  #topbar { padding: 4px 10px; padding-top: max(4px, var(--st)); gap: 6px; }
  .logo { font-size: 22px; }
  .pbtn.icon { width: 32px; height: 32px; }
  .tb-res { gap: 4px; flex-wrap: nowrap; }
  .tb-res .res { padding: 3px 7px 4px 5px; font-size: 13px; gap: 4px; }
  .tb-res .res .pxi { width: 18px !important; height: 18px !important; }
  .trainer { padding: 4px 8px 5px; font-size: 12px; }
  .screen { padding: 44px 12px 10px; padding-bottom: max(10px, var(--sb)); }
  .scr-title { font-size: 28px; margin: 0 0 4px; }
  .scr-title small { font-size: 12px; }
  .scr-sub { font-size: 13px; margin-bottom: 8px; }

  /* menú: dos columnas; si no cabe, se desplaza */
  #s-menu.active { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 10px; align-items: start; overflow-y: auto; padding-top: 44px; }
  .menu-left { display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; align-self: start; }
  .menu-panel { width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0; align-self: start; }
  .menu-panel > .mbtn.play, .menu-panel > .mbtn.continue { grid-column: 1 / -1; }
  .mrow { display: contents; }
  .mbtn { padding: 6px 10px 8px; }
  .mbtn b { font-size: 19px; }
  .mbtn small { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbtn.play { padding: 7px 12px 9px; }
  .mbtn.play b { font-size: 27px; }
  .mbtn .dot { top: 4px; right: 6px; }
  .league-card { padding: 6px 10px 8px; gap: 8px; margin: 0; width: 100%; }
  .league-card b { font-size: 20px; }
  .league-card .lc-ball .pxi { width: 30px !important; height: 30px !important; }
  .chest-row { gap: 4px; margin: 0; width: 100%; }
  .chest-slot { min-height: 50px; padding: 4px 2px 5px; }
  .chest-slot .pxi { width: 28px !important; height: 28px !important; }
  .team-tag { padding: 6px 10px 8px; max-width: none; }
  .tt-trainer { margin-bottom: 3px; }
  .tt-name { font-size: 12px; margin-bottom: 4px; }
  .medal { width: 22px; height: 22px; }
  .menu-community { margin: 0; }

  /* pantallas con lista */
  .gacha-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
  .gacha-layout .rates { grid-column: 1 / -1; }
  .ban-list { flex-direction: column; overflow: visible; gap: 4px; }
  .ban-tab { padding: 5px 8px 6px 5px; gap: 5px; }
  .ban-tab .pk-icon { width: 26px; height: 26px; }
  .ban-tab b { font-size: 12px; }
  .ban-tab small { display: none; }
  .ban-art { min-height: 0; padding: 10px 12px; gap: 8px; }
  .ban-top h2 { font-size: 28px; }
  .ban-hero .pk-icon, .ban-hero:nth-child(2) .pk-icon { width: 64px; height: 64px; }
  .ban-hero.big .pk-icon { width: 88px; height: 88px; }
  .ban-hero b { font-size: 16px; }
  .ban-leg b { font-size: 30px; }
  .ban-feat { flex-direction: row; }
  .ban-epics { flex-direction: column; }
  .ban-epic .pk-icon { width: 36px; height: 36px; }
  .ban-pool .pk-icon { width: 26px; height: 26px; }
  .pull-btns .pbtn.big { font-size: 20px; padding: 6px 10px 8px; }
  .dex-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .dex-detail { max-height: none; padding: 10px; }
  .dex-filters { margin-bottom: 6px; gap: 4px; }
  .dex-filters input, .dex-filters select { padding: 4px 8px; font-size: 12px; }
  .dex-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .team-slots { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .tier-mons .pk-icon { width: 30px; height: 30px; }
  .set-box, .shop-box { padding: 10px 12px; }

  /* ventanas */
  #modal { padding-top: 8px; padding-bottom: max(8px, var(--sb)); }
  .modal-card { padding: 10px 16px 12px; }
  .modal-card h2 { font-size: 28px; margin: 2px 0 6px; }
  .modal-card h3 { margin: 8px 0 6px; }
  .levelup h2 { font-size: 30px; }
  .lv-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #pullfx { gap: 8px; padding-top: 8px; overflow-y: auto; justify-content: flex-start; }
  #pullfx > * { margin-top: auto; margin-bottom: auto; }
  .pull-grid { grid-template-columns: repeat(5, 86px); gap: 5px; }
  .pull-grid.one { grid-template-columns: 160px; }
  .pcard { padding: 6px 3px 6px; gap: 2px; }
  .pcard .pk-icon { width: 44px; height: 44px; }
  .pcard b { font-size: 12px; }
  .look-prev .tr-img.big { width: 64px; height: 80px; }
  .look-rows { gap: 4px; }

  /* entrar y elegir nombre */
  #s-login, #s-start { padding-top: 8px; }
  .hero-logo { font-size: 46px; }
  .login-box { padding: 10px 14px 12px; gap: 8px; }
  .login-box h2 { font-size: 28px; }
  .name-step { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); align-items: start; gap: 14px; }
  .tag { margin: 2px 0 10px; font-size: 14px; }
  .start-wrap h2 { font-size: 26px; margin-bottom: 8px; }

  /* aventura: mapa y combate */
  #s-map.active { padding: 6px 10px; gap: 6px; }
  .map-head { padding: 4px 10px 6px; gap: 8px; flex-wrap: nowrap; }
  .mh-lead { min-width: 0; gap: 6px; }
  .mh-lead b { font-size: 13px; }
  .mh-lead .pbar { width: 100px; }
  .mh-lead .pk-icon { width: 30px; height: 30px; }
  .mh-res { gap: 6px; flex-wrap: nowrap; }
  .mh-res .res { font-size: 13px; }
  .map-head .pbtn { padding: 4px 8px 6px; font-size: 13px; white-space: nowrap; }
  .map-head .pbtn small { display: none; }
  .hud-top { top: 6px; left: 6px; right: 6px; }
  .hud-lead { width: min(250px, 32vw); padding: 3px 8px 5px 4px; }
  .hud-res .res { font-size: 13px; padding: 3px 7px 4px 5px; }
  .hud-side { top: 50px; }
  .hud-bottom { left: 6px; right: 6px; bottom: calc(6px + var(--sb)); }

  /* fiesta */
  .pt-cards .pt-card { min-width: 0; padding: 4px 8px 5px 8px; gap: 5px; }
  .pt-cards .pt-card .pk-icon { width: 30px; height: 30px; }
  .pt-cards .pt-card:nth-child(1) { top: 6px; left: 6px; }
  .pt-cards .pt-card:nth-child(2) { top: 6px; right: 6px; }
  .pt-cards .pt-card:nth-child(3) { bottom: calc(6px + var(--sb)); left: 6px; }
  .pt-cards .pt-card:nth-child(4) { bottom: calc(6px + var(--sb)); right: 6px; }
  .pt-info b { font-size: 12px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pt-info span { font-size: 13px; }
  .pt-place { font-size: 20px; width: 22px; }
  .pt-roll { font-size: 20px; top: -6px; }
  .pt-round { top: 6px; padding: 3px 10px 5px; font-size: 13px; }
  .pt-round b { font-size: 20px; }
  .pt-pause { top: 6px; left: calc(50% + 92px); transform: none; }
  .pt-prompt { bottom: calc(6px + var(--sb)); width: min(440px, calc(100% - 330px)); min-width: 250px; }
  .pt-prompt .pp { padding: 6px 10px 8px; }
  .pt-prompt .pp b { font-size: 15px; }
  .pt-prompt .row { margin-top: 5px; }
  .pt-prompt .pbtn { padding: 6px 12px 8px; font-size: 14px; }
  .pt-banner .ban-in { padding: 8px 20px 10px; }
  .pt-banner b { font-size: clamp(28px, 6vw, 46px); }
  .pt-banner small { font-size: 13px; }
  .pt-cine { overflow-y: auto; align-items: flex-start; }
  .pt-cine > .mi-card, .pt-cine > .mr-card, .pt-cine > .bs-card, .pt-cine > .ev-card, .pt-cine > .rw-card { margin: auto; }
  .mi-card, .mr-card, .bs-card { padding: 8px 14px 10px; }
  .mi-card h2, .mr-card h2, .bs-card h2 { font-size: 28px; margin: 0 0 4px; }
  .mi-card p { margin: 3px 0; font-size: 13px; }
  .mi-players { margin: 6px 0 8px; gap: 4px; }
  .mi-p { padding: 3px 2px; font-size: 11px; }
  .mi-p .pk-icon { width: 28px; height: 28px; }
  .pbtn.big { font-size: 20px; padding: 6px 12px 8px; }
  .vs-panel { gap: 3px; }
  .vs-panel b { font-size: 20px; }
  .vs-poke .pk-icon { width: 72px; height: 72px; }
  .vs-tr { width: 32px; height: 40px; left: -26px; }
  .vs-big { font-size: 90px; }
  .pt-cine.podium { padding-bottom: 8px; }
  .pd-title { top: 4%; }
  .pd-title b { font-size: 34px; }
  .pd-col .pk-icon { width: 52px; height: 52px; }
  .pd-col.p1 .pk-icon { width: 68px; height: 68px; }
  .pd-col.p1 .pd-block { height: 70px; } .pd-col.p2 .pd-block { height: 52px; } .pd-col.p3 .pd-block { height: 38px; } .pd-col.p4 .pd-block { height: 26px; }
  .pd-block i { font-size: 24px; margin-top: 2px; }
  .pd-ok { margin-top: 6px; }
  .rw-tro { font-size: 36px; }
  .rw-tro em { font-size: 24px; }
  .rw-chest { margin: 6px 0 2px; }
  .mm-slot { min-height: 0; padding: 6px 4px 8px; }
  .mm-slots { margin: 8px 0; }
  .mini-act { width: 84px; height: 84px; font-size: 15px; }
}
/* teléfonos muy bajos (iPhone SE en horizontal, con las barras de Safari) */
@media (orientation: landscape) and (max-height: 340px) {
  .mbtn:not(.play):not(.continue) small { display: none; }
  .mbtn b { font-size: 17px; }
  .mbtn.play b { font-size: 24px; }
  .team-tag .medal-row { display: none; }
  .chest-slot { min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .look-modal > p.muted { display: none; }
  .look-modal > .row { position: sticky; bottom: -12px; margin: 6px -16px -12px; padding: 8px 0 10px; background: var(--face); box-shadow: 0 -3px 0 rgba(0, 0, 0, .3); }
  .look-sw { width: 30px; height: 30px; }
  .look-row small { margin-bottom: 2px; }
}
.login-box .look-ed .pbtn { min-width: 0; }
.look-prev { flex: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .ns-name p.muted { font-size: 12px; margin: 0; }
  .ns-name .name-in { margin-top: 4px; font-size: 17px; padding: 6px 10px 8px; }
  #s-login .hero-logo { font-size: 38px; }
}
.ns-name .pbtn { min-width: 0; width: min(280px, 100%); }
@media (orientation: landscape) and (max-height: 500px) {
  .vs-wrap { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }
  .vs-panel { margin: 0 -3%; clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
  .vs-panel small { font-size: 12px; }
  .vs-mon, .vs-perk { font-size: 11px; }
  .mi-players, .mm-slots { grid-template-columns: repeat(4, 1fr); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .pt-round { bottom: auto; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #mini-ui { bottom: calc(6px + var(--sb)); gap: 4px; }
  .mini-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(660px, 96vw); gap: 5px; padding: 0; }
  .mini-opt { font-size: 14px; padding: 6px 8px 8px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .pt-cine.podium, .pt-cine.vs { align-items: center; }
  .pd-title { left: 0; right: 0; }
  .pd-tr { width: 32px; height: 40px; }
}
/* teléfono en vertical: la barra de arriba en una sola línea */
@media (max-width: 480px) {
  #topbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .logo { font-size: 21px; }
  .tb-res { flex-wrap: nowrap; gap: 3px; }
  .tb-res .res { font-size: 12px; padding: 3px 5px 4px 4px; gap: 3px; }
  .tb-res .res .pxi { width: 16px !important; height: 16px !important; }
  .tb-res .pbtn.icon { width: 32px; height: 32px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .mm .mm-spin .pxi { width: 36px !important; height: 36px !important; }
  .mm h2 { font-size: 24px; }
  .mm > p.muted { margin: 2px 0; font-size: 12px; }
  .mm-slot .pk-icon { width: 40px; height: 40px; }
  .mm-slot .tr-img { width: 24px; height: 30px; }
  .mm-slot { font-size: 12px; }
}

/* ================================================================ amigos */
.mbtn.friends { --face: #1f7a8a; --hi: #6be0ef; --lo: #0f4a55; }
.mbtn.friends small { color: #e6fbff; }
.fr-layout { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
.fr-side { display: flex; flex-direction: column; gap: 10px; }
.fr-side .set-box { margin: 0; }
.fr-me { flex-direction: row !important; align-items: center; gap: 12px !important; }
.fr-me small { display: block; color: var(--muted); font-size: 12px; }
.fr-me b { display: block; font-size: 22px; color: var(--gold-hi); }
.fr-add { display: flex; gap: 6px; align-items: stretch; }
.fr-add .name-in { margin: 0; flex: 1; min-width: 0; width: auto; font-size: 16px; padding: 7px 10px 9px; text-align: left; }
.fr-main h3 { margin: 4px 0 8px; }
.fr-main h4 { margin: 14px 0 6px; color: var(--muted); }
.fr-list { display: flex; flex-direction: column; gap: 6px; }
.fr-card { display: flex; align-items: center; gap: 10px; padding: 6px 10px 8px 8px; --face: #161b52; }
.fr-card.st-off { opacity: .62; }
.fr-card.req { --hi: var(--gold); }
.fr-who { display: flex; align-items: flex-end; gap: 2px; flex: none; }
.fr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fr-info b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-info small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.fr-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.fr-st i { width: 8px; height: 8px; background: #6a7090; box-shadow: 0 0 0 2px rgba(0, 0, 0, .4); }
.fr-st.st-on i { background: var(--good); } .fr-st.st-on { color: #9ff0bf; }
.fr-st.st-room i { background: #6be0ef; } .fr-st.st-room { color: #b5f2fa; }
.fr-st.st-play i { background: var(--gold); } .fr-st.st-play { color: var(--gold-hi); }
.fr-btns { display: flex; gap: 5px; flex: none; }
.fr-x { padding-left: 9px; padding-right: 9px; }
.fr-out { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-pend { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 6px 10px; font-size: 13px; --face: #161b52; }
.room-card { max-width: 680px; }
.room-code { font-family: var(--font-d); font-weight: 400; color: var(--gold-hi); letter-spacing: 4px; user-select: text; -webkit-user-select: text; }
.room-code.sm { font-size: 22px; letter-spacing: 2px; }
.room-free { opacity: .55; }
.room-host { position: absolute; top: 4px; left: 6px; font-style: normal; font-size: 10px; padding: 1px 5px 2px; background: var(--gold); color: #3a2200; }
.mm-slot { position: relative; }
.room-inv { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 6px 0 12px; }
.room-inv small { color: var(--muted); }
.room-inv .tr-img { width: 16px; height: 20px; }
.room-wait { color: var(--muted); align-self: center; }
#invite { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 35; display: none; width: min(460px, 94%); }
#invite.show { display: block; animation: pop .25s steps(3); }
.inv-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; --face: #1f7a8a; --hi: #6be0ef; --lo: #0f4a55; }
.inv-card > div { flex: 1; min-width: 0; }
.inv-card b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-card small { color: #e6fbff; font-size: 12px; }
@media (max-width: 760px) { .fr-layout { grid-template-columns: 1fr; } }
@media (orientation: landscape) and (max-height: 500px) {
  .fr-layout { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 10px; }
  .fr-me .tr-img { width: 32px; height: 40px; }
  .fr-me b { font-size: 17px; }
  .fr-card .pk-icon { width: 30px; height: 30px; }
  .room-card h2 { font-size: 24px; }
  .room-card > p.muted { font-size: 12px; margin: 2px 0; }
  #invite { top: 44px; }
}