:root{
    --bg:#FFFFFF;
    --panel:#F4F5FA;
    --panel-2:#EAECF5;
    --ink:#1B2140;
    --ink-dim:#565C70;
    --gold:#F0B400;
    --gold-dim:#E8D48A;
    --gold-ink:#8A6200;
    --slot-empty:#EEF0F6;
    --border:#DADEEA;
    --red:#D31212;
    --poke-blue:#2A75BB;
    --evento:#7C3AED;
    --evento-dim:#4C1D95;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Baloo 2',system-ui,sans-serif;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;}
  ::selection{background:var(--gold);color:#14172A;}
  button{font-family:inherit;}

  .wrap{max-width:1100px;margin:0 auto;padding:20px 16px 60px;}

  header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:0;padding:14px 4px;}
  .accent-bar{height:5px;background:linear-gradient(90deg,var(--red) 0 33%,var(--gold) 33% 66%,var(--poke-blue) 66% 100%);border-radius:3px;margin-bottom:18px;}

  .evento-banner{background:linear-gradient(135deg,var(--evento),var(--evento-dim));border:1px solid var(--evento);border-radius:12px;padding:12px 16px;margin-bottom:18px;text-align:center;}
  .evento-banner-nombre{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:16px;color:#fff;letter-spacing:.3px;}
  .evento-banner-sub{font-size:11px;color:#E6D9FB;margin-top:2px;}
  h1{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:28px;letter-spacing:.5px;margin:0;color:var(--ink);}
  h1 span{color:var(--gold);text-shadow:-1px 0 var(--poke-blue),1px 0 var(--poke-blue),0 -1px var(--poke-blue),0 1px var(--poke-blue);}

  .marca{margin:0;font-size:clamp(22px,6vw,32px);display:flex;align-items:center;gap:10px;line-height:1;}
  .marca-texto{display:block;}
  /* Pokébola de la marca: mitad roja, mitad blanca, botón al medio. */
  .marca-ball{flex:0 0 auto;width:1.15em;height:1.15em;border-radius:50%;border:.1em solid #14172a;box-sizing:border-box;
    background:radial-gradient(circle at 50% 50%,#fff 0 .17em,#14172a .17em .26em,transparent .26em),linear-gradient(#EE1515 0 46%,#14172a 46% 54%,#fff 54% 100%);}
  .marca-pk{color:var(--gold);text-shadow:-1px 0 var(--poke-blue),1px 0 var(--poke-blue),0 -1px var(--poke-blue),0 1px var(--poke-blue),0 2px 0 var(--poke-blue);letter-spacing:.5px;}
  .coin-box{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 14px;}
  .coin-box .ball{width:18px;height:18px;border-radius:50%;background:conic-gradient(var(--red) 0 50%, #fff 50% 100%);border:2px solid #14172a;flex:0 0 auto;}
  .coin-box .amount{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:18px;}
  .earn-btn{background:var(--gold);color:#2b2205;border:none;border-radius:8px;padding:11px 14px;min-height:44px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13px;cursor:pointer;}
  .earn-btn:active{transform:scale(.97);}

  .progress-row{margin-bottom:18px;}
  .progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-dim);margin-bottom:6px;}
  .progress-track{height:10px;border-radius:6px;background:var(--panel);border:1px solid var(--border);overflow:hidden;}
  .progress-fill{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));transition:width .4s ease;}

  .filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
  .chip{font-family:'Space Mono',monospace;font-size:12px;padding:10px 12px;min-height:40px;border-radius:20px;border:1px solid var(--border);background:var(--panel);color:var(--ink-dim);cursor:pointer;}
  .chip{appearance:none;-webkit-appearance:none;}
  .chip.active{color:#14172a;font-weight:700;border-color:transparent;}

  /* Tarjeta que abre la Pokédex: la grilla de figuritas vive adentro del
     overlay, no en la home, para que la portada no se vea saturada. */
  .pokedex-launch{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:var(--panel-2);border:1px solid var(--gold-dim);border-radius:14px;padding:16px 18px;margin-bottom:22px;}
  .pokedex-launch-icon{width:38px;height:auto;flex:0 0 auto;}
  .pokedex-launch-text{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;}
  .pokedex-launch-label{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;color:var(--ink);}
  .pokedex-launch-progress{font-size:14px;color:var(--ink-dim);}
  .pokedex-launch-barra{display:block;height:6px;border-radius:4px;background:var(--border);overflow:hidden;margin-top:4px;max-width:260px;}
  .pokedex-launch-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-dim),var(--gold));transition:width .4s ease;}
  .pokedex-btn{background:var(--gold);color:#2b2205;border:none;border-radius:9px;padding:12px 20px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;}
  .pokedex-btn:active{transform:scale(.97);}

  .pokedex-panel{background:var(--bg);width:100%;height:100%;display:flex;flex-direction:column;text-align:left;}
  .pokedex-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--panel-2);flex:0 0 auto;}
  .pokedex-head h2{display:flex;align-items:center;gap:8px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:20px;margin:0;color:var(--ink);}
  .pokedex-head-icon{width:26px;height:auto;}
  .pokedex-close{background:transparent;border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:11px 16px;min-height:44px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;}
  .pokedex-body{flex:1 1 auto;overflow-y:auto;padding:18px 20px 30px;max-width:1100px;margin:0 auto;width:100%;}

  .pack-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:22px;}
  .pack-bar .info{font-size:13px;line-height:1.5;color:var(--ink-dim);}
  .pack-bar .info b{color:var(--ink);font-family:'Baloo 2',sans-serif;}
  .open-btn{background:var(--red);color:#fff;border:none;border-radius:9px;padding:12px 20px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;}
  .open-btn:disabled{background:#D8DCE8;color:#9AA0B4;cursor:not-allowed;}
  .open-btn:not(:disabled):active{transform:scale(.97);}

  .filtros{margin-bottom:14px;}
  .filtros > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--border);border-radius:10px;background:var(--panel);font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;color:var(--ink);margin-bottom:10px;}
  .filtros > summary::-webkit-details-marker{display:none;}
  .filtros > summary::after{content:'▾';font-size:12px;transition:transform .2s ease;}
  .filtros[open] > summary::after{transform:rotate(180deg);}
  .codigo-acciones{position:relative;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:0 16px;max-width:100%;}
  .buscador{margin-bottom:12px;}
  .buscador input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--ink);font-family:'Space Mono',monospace;font-size:14px;min-height:46px;}
  .buscador input::placeholder{color:var(--ink-dim);opacity:.8;}
  .buscador-estado{font-size:12px;color:var(--ink-dim);min-height:16px;margin-top:6px;}
  .grid-vacio{grid-column:1 / -1;text-align:center;font-size:13px;color:var(--ink-dim);padding:28px 10px;line-height:1.6;}
  .acciones-codigo{display:flex;gap:6px;flex:0 0 auto;}
  .btn-whats{background:#1FA855;color:#fff;border:none;border-radius:9px;padding:9px 12px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;min-height:40px;}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;}
  .slot{position:relative;aspect-ratio:1/1.15;border-radius:9px;background:var(--slot-empty);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:4px;}
  .slot.got{background:var(--panel);}
  .slot .num{position:absolute;top:3px;left:5px;font-size:10px;color:var(--ink-dim);}
  .slot .dup{position:absolute;top:3px;right:5px;font-size:10px;background:var(--gold);color:#2b2205;padding:1px 4px;border-radius:6px;font-weight:700;}
  .slot img{width:60%;height:auto;image-rendering:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
  .slot .name{font-size:10px;text-align:center;margin-top:2px;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .slot .ball-icon{width:26px;height:26px;border-radius:50%;background:conic-gradient(#C7CCDC 0 50%, #E3E6F0 50% 100%);border:2px solid #B7BED0;opacity:.9;}
  .slot .typebar{position:absolute;bottom:0;left:0;right:0;height:4px;}

  .overlay{position:fixed;inset:0;background:rgba(6,8,18,.92);display:none;align-items:stretch;justify-content:stretch;z-index:50;padding:0;}
  .overlay.show{display:flex;}
  .reveal-panel{background:var(--panel-2);border:none;border-radius:0;padding:28px 20px 24px;width:100%;height:100%;max-width:100%;text-align:center;display:flex;flex-direction:column;overflow-y:auto;}
  .reveal-panel h2{font-family:'Baloo 2',sans-serif;color:var(--gold-ink);margin:0 0 20px;font-size:24px;flex:0 0 auto;}
  .reveal-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px;margin:0 auto 24px;max-width:1100px;width:100%;flex:1 1 auto;align-content:center;}
  .reveal-card{background:var(--panel);border-radius:14px;padding:14px 10px;border:1px solid var(--border);opacity:0;transform:translateY(10px) scale(.9);animation:pop .35s forwards;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .reveal-card img{width:100%;max-width:170px;height:auto;}
  .reveal-card .rname{font-size:14px;margin-top:10px;font-weight:700;}
  .reveal-card .tag{font-size:11px;margin-top:5px;font-weight:700;}
  .tag.new{color:#1F9D4C;}
  .tag.dup{color:var(--gold-ink);}
  @keyframes pop{to{opacity:1;transform:translateY(0) scale(1);}}
  .close-btn{background:transparent;border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:12px 26px;font-family:'Baloo 2',sans-serif;font-weight:700;cursor:pointer;font-size:14px;flex:0 0 auto;align-self:center;}

  /* ---- Special full-screen reveal ---- */
  .special-overlay{position:fixed;inset:0;background:radial-gradient(circle at 50% 40%, #1B2140 0%, #060814 75%);display:none;align-items:center;justify-content:center;z-index:80;flex-direction:column;overflow:hidden;}
  .special-overlay.show{display:flex;}
  .special-rays{position:absolute;inset:-50%;background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.08) 8deg, transparent 16deg);animation:spinRays 6s linear infinite;}
  @keyframes spinRays{to{transform:rotate(360deg);}}
  .special-banner{position:relative;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:18px;text-shadow:0 0 14px rgba(240,180,0,.7);}
  .special-card{position:relative;width:min(78vw,360px);aspect-ratio:3/4;border-radius:22px;background:linear-gradient(160deg,#232B52,#12172B);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;animation:cardSpin 1.3s cubic-bezier(.2,.8,.25,1) forwards;}
  @keyframes cardSpin{
    0%{transform:perspective(1000px) rotateY(0deg) scale(.2);opacity:0;}
    55%{transform:perspective(1000px) rotateY(1080deg) scale(1.08);opacity:1;}
    100%{transform:perspective(1000px) rotateY(1440deg) scale(1);opacity:1;}
  }
  .special-card img{width:75%;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.6));margin-bottom:10px;}
  .special-card .sname{font-family:'Baloo 2',sans-serif;font-size:26px;color:#fff;font-weight:700;}
  .special-card .stag{font-family:'Space Mono',monospace;font-size:12px;color:#BFC6DE;margin-top:4px;}
  .codigo-chip{margin-top:16px;background:rgba(255,255,255,.08);border:1px dashed var(--gold);border-radius:10px;padding:10px 20px;font-family:'Space Mono',monospace;font-size:22px;letter-spacing:4px;color:var(--gold);font-weight:700;}
  .special-continue{position:relative;margin-top:26px;background:var(--gold);color:#2b2205;border:none;border-radius:10px;padding:12px 26px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;cursor:pointer;}
  .special-continue:active{transform:scale(.97);}

  @media (max-width:480px){
    .grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));}
    .reveal-cards{grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:10px;}
    .reveal-card img{max-width:120px;}
    .special-card{width:88vw;}
    .special-card .sname{font-size:20px;}
  }

  /* ---------- Ranking ---------- */
  .player-chip{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:7px 12px;font-size:12px;color:var(--ink-dim);}
  .player-chip b{font-family:'Baloo 2',sans-serif;font-size:14px;color:var(--ink);font-weight:700;}

  .rank-panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:22px;}
  .rank-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
  .rank-head h2{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px;margin:0;color:var(--ink);}
  .rank-tabs{display:flex;gap:6px;}
  .rank-tab{font-family:'Space Mono',monospace;font-size:12px;padding:10px 14px;min-height:40px;display:inline-flex;align-items:center;border-radius:20px;border:1px solid var(--border);background:var(--bg);color:var(--ink-dim);cursor:pointer;}
  .rank-tab[hidden]{display:none;}
  .rank-tab.active{background:var(--poke-blue);border-color:transparent;color:#fff;font-weight:700;}
  #tabEvento.active{background:var(--evento);}
  /* Contador de entrenadores: va al lado de las pestañas pero NO es una pestaña,
     no se puede clickear; sale del campo 'jugadores' que manda /pokemon-top. */
  .rank-count{display:flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:12px;padding:8px 12px;border-radius:20px;border:1px dashed var(--border);background:var(--bg);color:var(--ink-dim);}
  .rank-count b{font-family:'Baloo 2',sans-serif;font-size:14px;font-weight:700;color:var(--ink);}
  .rank-list{display:flex;flex-direction:column;gap:5px;}
  .rank-row{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:12px;}
  .rank-row.me{border-color:var(--gold);background:#FFFBEE;}
  .rank-pos{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;width:26px;flex:0 0 auto;color:var(--ink-dim);text-align:center;}
  .rank-row:nth-child(1) .rank-pos{color:var(--gold-ink);}
  .rank-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--ink);}
  .rank-score{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;color:var(--poke-blue);flex:0 0 auto;}
  .rank-medal{flex:0 0 auto;width:20px;height:20px;}
  .rank-empty{font-size:12px;color:var(--ink-dim);padding:10px 2px;line-height:1.6;}
  .rank-done{margin-top:16px;padding-top:16px;border-top:1px dashed var(--border);}
  .rank-done-empty{font-size:11px;color:var(--ink-dim);line-height:1.7;text-align:center;}
  .hof-title{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:21px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-ink);text-align:center;margin-bottom:2px;}
  .hof-sub{font-size:11px;color:var(--ink-dim);text-align:center;margin-bottom:12px;}
  .hof-row{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#FFF6D9,#FFFBEE);border:1px solid var(--gold);border-radius:10px;padding:10px 14px;margin-bottom:8px;box-shadow:0 0 12px rgba(240,180,0,.25);}
  .hof-row:last-child{margin-bottom:0;}
  .hof-crown{width:22px;height:22px;flex:0 0 auto;}
  .hof-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;color:#5B4300;}
  .hof-date{font-size:10px;color:var(--ink-dim);font-family:'Space Mono',monospace;flex:0 0 auto;}
  .rank-status{font-size:11px;color:var(--ink-dim);}
  .rank-status.err{color:var(--red);}

  .name-overlay{position:fixed;inset:0;background:rgba(20,23,42,.72);display:none;align-items:center;justify-content:center;padding:20px;z-index:60;}
  .name-overlay.show{display:flex;}
  .name-box{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:26px 24px;max-width:340px;width:100%;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.3);}
  .name-box h2{font-family:'Baloo 2',sans-serif;font-size:21px;margin:0 0 6px;color:var(--ink);}
  .name-box p{font-size:11px;color:var(--ink-dim);margin:0 0 16px;line-height:1.6;}
  .name-error{font-size:11px;color:var(--red);min-height:15px;margin:8px 0 4px;line-height:1.5;}
  .name-box input{width:100%;padding:12px;border-radius:9px;border:1px solid var(--border);background:var(--panel);color:var(--ink);font-family:'Space Mono',monospace;font-size:14px;text-align:center;margin-bottom:14px;}
  .name-box input:focus{outline:2px solid var(--poke-blue);outline-offset:-1px;}
  .name-box button{width:100%;background:var(--red);color:#fff;border:none;border-radius:9px;padding:12px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;cursor:pointer;}
  .name-box button.btn-sec{background:transparent;color:var(--ink-dim);border:1px solid var(--border);margin-top:10px;font-size:13px;font-weight:600;}
  .name-box button:disabled{opacity:.6;cursor:wait;}
  .name-box p.name-viejo{margin:14px 0 0;}
  .name-box p.name-viejo a{color:var(--poke-blue);font-weight:700;}
  .toast-servidor{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;max-width:min(92vw,420px);
    background:var(--ink);color:var(--bg);border-radius:10px;padding:10px 16px;font-size:13px;line-height:1.4;text-align:center;
    box-shadow:0 8px 24px rgba(0,0,0,.3);}

  #quizImg{filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));transition:filter .45s ease;}
  #quizImg.silueta{filter:brightness(0) drop-shadow(0 3px 6px rgba(0,0,0,.25));}
  .quiz-opt{padding:13px 8px;min-height:46px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--ink);font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13px;cursor:pointer;}
  .quiz-opt:hover:not(:disabled){border-color:var(--gold);}
  .quiz-opt:disabled{opacity:.6;cursor:default;}
  .quiz-opt.correcta{border-color:#3DAA5B;background:#3DAA5B22;opacity:1;}
  .quiz-opt.errada{border-color:var(--red);background:#EE151522;}
  .bat-fila{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
  .bat-carta{background:var(--panel);border:2px solid var(--border);border-radius:12px;padding:10px 8px;width:112px;text-align:center;}
  .bat-carta img{width:70px;height:auto;display:block;margin:0 auto 6px;}
  .bat-nombre{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12px;color:var(--ink);margin-bottom:5px;line-height:1.2;}
  .bat-tipo{font-size:10px;border-radius:20px;padding:2px 8px;display:inline-block;}
  .bat-carta.elegible{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
  .bat-carta.elegible:hover{transform:translateY(-4px);box-shadow:0 6px 14px rgba(0,0,0,.12);}
  .bat-fuerza{font-size:11px;color:var(--ink-dim);margin-top:5px;}
  .bat-sub{font-size:12px;color:var(--ink-dim);margin-bottom:10px;}
  .bat-apuestas{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;}
  .bat-vs{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--ink-dim);font-size:14px;}
  .bat-aviso{font-size:12px;color:var(--ink-dim);line-height:1.6;margin-bottom:14px;}

  /* Reloj de los juegos: la cuenta atrás es lo que evita que se pueda pensar
     la respuesta afuera (captura + IA). Ver .timer-num para el número grande. */
  .timer{margin:0 auto 12px;max-width:260px;}
  .timer-pista{font-size:11px;color:var(--ink-dim);margin-bottom:4px;}
  .timer-num{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:20px;line-height:1;margin-bottom:5px;color:var(--ink);}
  .timer-riel{height:7px;border-radius:6px;background:var(--border);overflow:hidden;}
  .timer-bar{height:100%;width:100%;border-radius:6px;background:#3DAA5B;transition:width .1s linear,background .3s ease;}
  .timer.vencido .timer-num{color:var(--red);}
  .timer.vencido .timer-pista{visibility:hidden;}
  /* ---------- Aventura (mapa explorable a pantalla completa) ---------- */
  .adv-overlay{position:fixed;inset:0;background:#0B1020;display:none;z-index:40;overflow:hidden;touch-action:none;user-select:none;}
  .adv-overlay.show{display:block;}
  /* El mapa se dibuja en un canvas de 16 px por casillero y se agranda con
     image-rendering:pixelated, para que se vea pixel-art de 16 bits. */
  /* Las pokébolas del piso van acá, como <img> de verdad: adentro del canvas
     tendrían sólo 13 píxeles estirados 3x y se ven cuadriculadas. Así usan la
     MISMA imagen y la misma nitidez que las del HUD. */
  .adv-objetos{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
  .adv-objetos span{position:absolute;transform:translate(-50%,-50%);line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));}
  .adv-objetos img{display:block;image-rendering:pixelated;}
  .adv-map{position:absolute;inset:0;width:100%;height:100%;display:block;background:#0B1020;image-rendering:pixelated;image-rendering:crisp-edges;}
  .adv-map.flash{animation:advFlash .5s ease;}
  @keyframes advFlash{0%{filter:brightness(3.4);}55%{filter:brightness(1.6);}100%{filter:brightness(1);}}
  .adv-back{position:absolute;top:10px;left:10px;z-index:3;min-height:44px;background:rgba(16,20,38,.78);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:9px 15px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;cursor:pointer;}
  .adv-back:active{transform:scale(.97);}
  .adv-hud{position:absolute;top:10px;right:10px;z-index:3;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:62vw;}
  .adv-hud .pill{display:flex;align-items:center;gap:5px;background:rgba(16,20,38,.78);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:4px 10px;color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13px;}
  .adv-hud .pill img{width:17px;height:17px;image-rendering:pixelated;}
  .adv-zona{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:3;background:rgba(16,20,38,.82);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:8px 16px;font-family:'Space Mono',monospace;font-size:12px;line-height:1.5;text-align:center;max-width:86vw;opacity:0;transition:opacity .25s ease;pointer-events:none;}
  .adv-zona.ver{opacity:1;}
  .adv-zona.grande{padding:14px 22px;}
  .adv-region{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:19px;letter-spacing:1px;color:var(--gold);}
  .adv-zona b{font-family:'Baloo 2',sans-serif;font-size:14px;}
  /* Único mando: un círculo fijo abajo a la izquierda para caminar. */
  .adv-stick{position:absolute;z-index:3;left:20px;bottom:20px;width:132px;height:132px;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.42);touch-action:none;opacity:.72;transition:opacity .15s ease;}
  .adv-stick.activo{opacity:1;}
  .adv-stick .knob{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(255,255,255,.82);border:2px solid rgba(16,20,38,.45);pointer-events:none;}
  /* Minimapa: el mundo entero con las 3 regiones y dónde estás parado. */
  .adv-mini{position:absolute;top:52px;right:10px;z-index:3;width:186px;height:49px;border:2px solid rgba(255,255,255,.35);border-radius:8px;background:rgba(16,20,38,.72);image-rendering:pixelated;}
  .adv-mini[hidden]{display:none;}
  .adv-ayuda{transition:opacity .8s ease;}
  .adv-ayuda.oculta{opacity:0;}
  .adv-ayuda{position:absolute;right:12px;bottom:12px;z-index:3;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.8);font-family:'Space Mono',monospace;font-size:11px;line-height:1.7;text-align:right;pointer-events:none;}
  /* En el celular las 4 pastillas del HUD no entraban en una línea y la última
     se caía encima del mapa. */
  @media (max-width:560px){
    .adv-hud{gap:4px;max-width:72vw;}
    .adv-hud .pill{padding:3px 7px;font-size:12px;gap:3px;}
    .adv-hud .pill img{width:14px;height:14px;}
    .adv-back{padding:7px 11px;font-size:13px;}
    .adv-stick{width:118px;height:118px;left:14px;bottom:14px;}
    .adv-stick .knob{width:52px;height:52px;margin:-26px 0 0 -26px;}
    .adv-ayuda{font-size:10px;}
    .adv-mini{width:132px;height:35px;top:46px;}
    .adv-zona{bottom:auto;top:120px;max-width:80vw;}
  }

  /* Pokébolas: botones del encuentro y filas de la tienda */
  .bola-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--ink-dim);font-family:'Space Mono',monospace;font-size:11px;cursor:pointer;}
  .bola-btn b{font-family:'Baloo 2',sans-serif;font-size:12px;color:var(--ink);}
  .bola-btn:hover:not(:disabled){border-color:var(--gold);}
  .bola-btn:disabled{opacity:.4;cursor:not-allowed;}
  .bola-ico{width:26px;height:26px;image-rendering:pixelated;display:block;}
  .enc-tiros{display:flex;gap:7px;justify-content:center;font-size:17px;margin-bottom:12px;}
  .enc-tiros .usado{opacity:.22;}
  .shop-row{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;text-align:left;}
  .shop-row .txt{flex:1;font-size:10.5px;color:var(--ink-dim);line-height:1.5;}
  .shop-row .txt b{display:block;font-family:'Baloo 2',sans-serif;font-size:13px;color:var(--ink);}

  .firma{margin-top:38px;padding:6px 0 26px;text-align:center;}
  .firma-linea{height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin-bottom:14px;}
  .firma strong{display:block;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;color:var(--ink);letter-spacing:.3px;}
  .firma span{display:block;margin-top:4px;font-size:12px;color:var(--ink-dim);}
  .firma a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--gold-dim);}
  .firma a:hover{color:var(--ink);border-bottom-color:var(--gold);}
  .firma a.firma-logo,.firma a.firma-logo:hover{display:inline-block;margin-top:8px;border-bottom:none;}
  .firma-logo img{display:block;width:250px;height:auto;}
  .firma-colab{margin-top:20px;}
  .firma-pacha{display:block;margin:8px auto 0;width:auto;height:72px;}
  @media(max-width:480px){
    .firma-logo img{width:210px;}
    .firma-pacha{height:62px;}
  }

  /* ---------- Accesibilidad ---------- */
  button,.rank-tab,.chip,.slot,.quiz-opt,.bat-carta{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
  :focus{outline:none;}
  :focus-visible{outline:3px solid var(--poke-blue);outline-offset:2px;border-radius:6px;}
  .special-overlay :focus-visible,.adv-overlay :focus-visible{outline-color:#fff;}
  .name-box input:focus-visible{outline-offset:-1px;}
  button:disabled{cursor:not-allowed;}
  /* Movimiento reducido: se conserva el cambio de estado (aparece, se tacha),
     sólo se saca el giro, los rayos y los saltos. */
  @media (prefers-reduced-motion:reduce){
    .special-rays{animation:none;}
    .special-card{animation:cardFade .4s ease forwards;}
    @keyframes cardFade{from{opacity:0;}to{opacity:1;}}
    .reveal-card{animation:cardFade .3s forwards;transform:none;}
    .adv-map.flash{animation:none;}
    .progress-fill,.timer-bar{transition:none;}
    .bat-carta.elegible:hover{transform:none;}
  }

  /* ---------- Celular acostado (poca altura) ----------
     Los paneles y la carta tienen que entrar en ~360 px de alto. */
  @media (max-height:520px){
    .overlay > .reveal-panel{padding:14px 18px 16px;}
    .reveal-panel h2{font-size:18px;margin:0 0 8px;}
    #encImg,#quizImg{width:84px !important;margin:0 auto 4px !important;}
    #encInfo,#encName{margin-bottom:6px !important;}
    #encFeedback,#shopFeedback,#battleFeedback{margin-bottom:6px !important;min-height:0 !important;}
    .enc-tiros{margin-bottom:6px;}
    .special-banner{font-size:13px;margin-bottom:8px;}
    .special-card{width:auto;min-width:260px;height:min(58vh,260px);padding:12px;text-align:center;}
    .special-card .stag{text-align:center;}
    .special-card img{width:auto;height:52%;}
    .special-card .sname{font-size:20px;}
    .special-continue{margin-top:12px;padding:10px 22px;}
    .codigo-chip{margin-top:8px;font-size:18px;padding:6px 14px;}
    /* Huir y Cerrar quedan pegados abajo: siempre a mano sin scrollear. */
    #shopCloseBtn{position:sticky;bottom:0;background:var(--panel-2);box-shadow:0 0 0 8px var(--panel-2);margin-top:4px;}
  }
  /* Encuentro con el celular acostado: imagen e info a la izquierda, pokébolas
     a la derecha, así entra todo sin scrollear. */
  @media (max-height:520px) and (min-width:560px){
    #encOverlay .reveal-panel{max-width:720px !important;display:grid;grid-template-columns:170px minmax(0,1fr);column-gap:16px;align-content:center;justify-items:center;}
    #encTitle{grid-column:1 / -1;grid-row:1;margin:0 0 6px;}
    #encImg{grid-column:1;grid-row:2;}
    #encName{grid-column:1;grid-row:3;}
    #encInfo{grid-column:1;grid-row:4;}
    #encTiros{grid-column:1;grid-row:5;}
    .bola-btn{padding:7px 3px;}
    #encBolas{grid-column:2;grid-row:2 / span 3;align-self:center;margin:0 !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;width:100%;max-width:none !important;gap:6px !important;}
    #encFeedback{grid-column:2;grid-row:5;align-self:center;text-align:center;}
    #encCloseBtn{grid-column:1 / -1;grid-row:6;margin-top:6px;}
  }

  /* ---------- Tablet y pantallas anchas ---------- */
  .acciones{display:block;}
  .rank-head > div{flex-wrap:wrap;min-width:0;max-width:100%;}
  .rank-tabs{flex-wrap:wrap;}
  @media (max-width:480px){
    .rank-head > div{width:100%;}
    .rank-status{flex:1 0 100%;}
    .rank-tab{padding:8px 11px;}
  }
  /* Paneles chicos entre 480 y 720 px (celular grande, tablet angosta o con
     zoom): antes quedaban pegados a la izquierda sobre fondo oscuro. */
  @media (min-width:480px) and (max-width:719px){
    .overlay:has(> .reveal-panel[style*="max-width"]){padding:16px;align-items:center;justify-content:center;}
    .overlay > .reveal-panel[style*="max-width"]{height:auto;max-height:calc(100dvh - 32px);margin:0 auto;border-radius:20px;border:1px solid var(--border);box-shadow:0 24px 60px rgba(0,0,0,.45);}
  }
  @media (min-width:720px){
    .wrap{padding:28px 28px 60px;}
    .acciones{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px;}
    .acciones .pack-bar{margin-bottom:0;align-items:center;}
    .acciones .pack-bar:last-child:nth-child(odd){grid-column:1 / -1;}
    .acciones .open-btn{min-width:130px;}
    /* Los paneles chicos (intercambio, quiz, batalla, tienda, encuentro) se ven
       como tarjeta centrada y no como una columna angosta a pantalla completa. */
    .overlay:has(> .reveal-panel[style*="max-width"]){padding:24px;align-items:center;justify-content:center;}
    .overlay > .reveal-panel[style*="max-width"]{height:auto;max-height:calc(100dvh - 48px);margin:0 auto;border-radius:20px;border:1px solid var(--border);box-shadow:0 24px 60px rgba(0,0,0,.45);}
  }
  @media (min-width:720px) and (max-width:1024px){
    .pokedex-body{padding:20px 28px 36px;}
    .grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;}
  }
  @media (min-width:1025px){
    .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;}
  }

  /* ---------- Arena de batalla (arena.js) ----------
     Siempre oscura, con colores fijos (no usa los tokens del tema). El escenario
     ocupa todo el espacio libre: en celular parado los controles van en una barra
     abajo; en pantallas anchas (celular acostado, tablet, compu) flotan encima. */
  #arenaOverlay{z-index:46;background:#05070f;}
  .ar-root{width:100%;height:100%;display:flex;flex-direction:column;background:#05070f;color:#f2f4ff;font-family:'Space Mono',monospace;overflow:hidden;position:relative;user-select:none;-webkit-user-select:none;}
  .ar-stage{position:relative;flex:1 1 auto;min-height:0;width:100%;container-type:inline-size;overflow:hidden;touch-action:none;}
  .ar-shake{position:absolute;inset:0;z-index:0;isolation:isolate;}
  .ar-bg{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;}
  .ar-lineas{position:absolute;inset:0;pointer-events:none;z-index:6;background:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,transparent 1px 3px);}
  .ar-fx{position:absolute;inset:0;pointer-events:none;z-index:100000;}
  .ar-p,.ar-orbe,.ar-flash,.ar-txt,.ar-tajo,.ar-rayo,.ar-zona,.ar-mira{position:absolute;pointer-events:none;}
  .ar-p{image-rendering:pixelated;}
  .ar-orbe{border-radius:0;transform:translate(-50%,-50%);background:var(--c,#fff);filter:drop-shadow(0 0 3px var(--c,#fff)) drop-shadow(0 0 1px #fff);}
  .f-bola{border-radius:35%;background:radial-gradient(circle at 35% 35%,#fff 0 22%,var(--c) 26%);}
  .f-burbuja{border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff 0 16%,transparent 19%),radial-gradient(circle,rgba(255,255,255,.15) 45%,var(--c) 48%);}
  .f-chispa{clip-path:polygon(55% 0,20% 55%,45% 55%,30% 100%,85% 40%,58% 40%,75% 0);background:#fff7b0;}
  .f-hoja{border-radius:0 80% 0 80%;background:linear-gradient(135deg,var(--c),rgba(255,255,255,.55) 50%,var(--c));}
  .f-cristal{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(135deg,#fff,var(--c));}
  .f-roca{border-radius:22% 30% 18% 34%;background:linear-gradient(135deg,#d8c98a,var(--c) 50%,#4d4420);}
  .f-sombra{border-radius:50%;background:radial-gradient(circle,#140a24 0 38%,var(--c) 62%,transparent 72%);}
  .f-anillo{border-radius:50%;background:radial-gradient(circle,transparent 38%,var(--c) 42% 64%,transparent 68%);}
  .f-estrella{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:linear-gradient(#fff,var(--c));}
  .ar-piso{position:absolute;inset:0;z-index:2;pointer-events:none;}
  .f-gota{border-radius:50% 50% 50% 0;background:radial-gradient(circle at 35% 35%,#fff 0 20%,var(--c) 30%);}
  .f-aguja{clip-path:polygon(0 30%,78% 30%,100% 50%,78% 70%,0 70%);background:linear-gradient(90deg,var(--c),#fff);}
  .f-nube{border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 70%,#fff) 0 30%,transparent 70%);filter:blur(1px);opacity:.85;}
  .f-tornado{clip-path:polygon(0 0,100% 0,62% 100%,38% 100%);background:repeating-linear-gradient(170deg,rgba(255,255,255,.9) 0 3px,var(--c) 3px 7px);}
  .f-hueso{border-radius:40%;background:radial-gradient(circle at 12% 30%,#f4efe0 0 18%,transparent 19%),radial-gradient(circle at 12% 70%,#f4efe0 0 18%,transparent 19%),radial-gradient(circle at 88% 30%,#f4efe0 0 18%,transparent 19%),radial-gradient(circle at 88% 70%,#f4efe0 0 18%,transparent 19%),linear-gradient(transparent 38%,#f4efe0 38% 62%,transparent 62%);filter:drop-shadow(0 0 2px #fff);}
  .f-semilla{border-radius:50%/60%;background:radial-gradient(circle at 35% 35%,#e9f5b0 0 20%,#7b8a2a 45%,#3f4a14);}
  .f-lodo{border-radius:46% 54% 40% 60%;background:radial-gradient(circle at 35% 35%,#e3a6e3 0 15%,#8b3a8a 40%,#3e163d);}
  .f-moneda{border-radius:50%;background:radial-gradient(circle,#fff6b0 0 22%,#e6b422 26% 55%,#b8860b 60% 70%,#ffe066 74%);filter:drop-shadow(0 0 3px #ffd54a);}
  .f-suelo{border-radius:50%;background:radial-gradient(closest-side,transparent 45%,rgba(214,198,150,.85) 60%,transparent 80%);filter:none;}
  .ar-p.p-llama{border-radius:50% 50% 45% 45%/60% 60% 40% 40%;}
  .ar-p.p-gota{border-radius:50% 50% 50% 0;}
  .ar-p.p-hoja{border-radius:0 80% 0 80%;}
  .ar-p.p-pluma{border-radius:80% 0 80% 0;opacity:.9;}
  .ar-p.p-cristal{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
  .ar-p.p-estrella{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
  .ar-p.p-roca{border-radius:25% 35% 20% 30%;}
  .ar-p.p-burbuja{border-radius:50%;border:2px solid currentColor;box-sizing:border-box;}
  .ar-p.p-humo{border-radius:50%;filter:blur(1px);}
  .ar-p.p-nota,.ar-p.p-corazon,.f-nota,.f-corazon{font-weight:700;line-height:1;text-align:center;text-shadow:0 0 3px #000,0 0 6px currentColor;}
  .f-nota,.f-corazon{background:none !important;color:var(--c);filter:none;}
  .f-nota{color:#fff;} .f-corazon{color:#ff7fbf;}
  .f-llama{border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 62%,#fff 0 14%,#ffe066 24%,var(--c) 52%,transparent 74%);animation:arLlama .12s steps(2,end) infinite alternate;}
  @keyframes arLlama{from{filter:drop-shadow(0 0 3px var(--c)) brightness(1)}to{filter:drop-shadow(0 0 6px var(--c)) brightness(1.25)}}
  .f-voltio{border-radius:50%;background:radial-gradient(circle,#fff 0 25%,#F7D02C 45%,#b8860b 70%);filter:drop-shadow(0 0 5px #F7D02C);animation:arLlama .08s steps(2,end) infinite alternate;}
  .f-huevo{border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 30% 30%,#fff,#f1ead5 60%,#cfc39a);}
  .f-medialuna{border-radius:50%;background:radial-gradient(circle at 70% 50%,transparent 42%,#ffffff 45% 62%,transparent 65%);}
  .f-arcoiris{border-radius:50%;background:conic-gradient(#ff5a5a,#ffb84d,#fff35c,#6fe08a,#5ad1ff,#9b7bff,#ff5a5a);-webkit-mask:radial-gradient(circle,transparent 46%,#000 50% 66%,transparent 70%);mask:radial-gradient(circle,transparent 46%,#000 50% 66%,transparent 70%);}
  .f-luna{border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff 0 30%,#ffd6ec 50%,#D685AD 70%);filter:drop-shadow(0 0 8px #ffb3d9) drop-shadow(0 0 2px #fff);}
  .ar-agua{background:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 8px,#6390F0 8px 18px,#9cc0ff 18px 30px) !important;border-radius:45%;animation:arAgua .18s linear infinite;}
  @keyframes arAgua{from{background-position-x:0}to{background-position-x:30px}}
  .ar-torbellino{position:absolute;pointer-events:none;transform-origin:50% 100%;clip-path:polygon(0 0,100% 0,62% 100%,38% 100%);background:repeating-linear-gradient(170deg,rgba(255,255,255,.75) 0 6px,rgba(169,143,243,.55) 6px 12px);animation:arGiraT .15s linear infinite;}
  @keyframes arGiraT{from{background-position-y:0}to{background-position-y:24px}}
  .ar-grieta{position:absolute;pointer-events:none;background:#0b0907;transform-origin:0 50%;box-shadow:0 1px 0 rgba(255,240,200,.25);}
  .ar-impacto{position:absolute;pointer-events:none;background:#fff;clip-path:polygon(50% 0,61% 32%,95% 20%,70% 48%,100% 62%,64% 66%,72% 100%,50% 74%,26% 100%,34% 66%,0 62%,30% 48%,5% 20%,39% 32%);}
  .ar-diente{position:absolute;pointer-events:none;background:#fff;clip-path:polygon(0 0,100% 0,100% 30%,90% 100%,80% 30%,70% 100%,60% 30%,50% 100%,40% 30%,30% 100%,20% 30%,10% 100%,0 30%);}
  .ar-diente.abajo{clip-path:polygon(0 100%,100% 100%,100% 70%,90% 0,80% 70%,70% 0,60% 70%,50% 0,40% 70%,30% 0,20% 70%,10% 0,0 70%);}
  .ar-pincho,.ar-latigo,.ar-aro,.ar-pilar{position:absolute;pointer-events:none;}
  .ar-latigo{border-top:4px solid #fff;border-radius:50%;}
  .ar-aro{border:3px solid #fff;border-radius:50%;}
  .ar-pilar{mix-blend-mode:screen;transform-origin:50% 100%;}
  .ar-trueno{position:absolute;left:0;top:0;pointer-events:none;filter:drop-shadow(0 0 6px #fff3a0) drop-shadow(0 0 2px #fff);}
  .ar-flash-pant{position:absolute;inset:0;pointer-events:none;}
  .ar-luz{position:absolute;inset:0;z-index:3;pointer-events:none;transform-origin:50% 0;}
  .ar-lampara{position:absolute;translate:-50% 0;width:2px;background:#1a1c24;}
  .ar-lampara::after{content:"";position:absolute;left:50%;bottom:calc(var(--tam) * -.45);translate:-50% 0;width:var(--tam);height:calc(var(--tam) * .5);background:#23262f;clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);box-shadow:inset 0 2px 0 #3a3e4a;}
  .ar-lampara::before{content:"";position:absolute;left:50%;bottom:calc(var(--tam) * -.55);translate:-50% 0;width:calc(var(--tam) * .4);height:calc(var(--tam) * .18);border-radius:0 0 50% 50%;background:#fff6d0;box-shadow:0 0 14px 6px rgba(255,236,170,.75),0 0 40px 18px rgba(255,220,140,.25);z-index:1;}
  .ar-cono{position:absolute;translate:-50% 0;background:linear-gradient(rgba(255,240,200,.20),rgba(255,240,200,.07) 70%,rgba(255,240,200,0));clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);mix-blend-mode:screen;animation:arTitila 6s steps(1,end) infinite;}
  @keyframes arTitila{0%,100%{opacity:1}61%{opacity:1}62%{opacity:.6}63%{opacity:1}64%{opacity:.7}65%{opacity:1}}
  .ar-motas{position:absolute;translate:-50% 0;}
  .ar-motas i{position:absolute;width:2px;height:2px;background:rgba(255,240,200,.55);animation:arMota 8s linear infinite;}
  @keyframes arMota{0%{transform:translate(0,0);opacity:0}15%{opacity:.8}85%{opacity:.6}100%{transform:translate(14px,-60px);opacity:0}}
  .ar-reflejo{position:absolute;left:0;top:0;transform-origin:50% 0;opacity:.2;pointer-events:none;-webkit-mask-image:linear-gradient(rgba(0,0,0,.9),transparent 70%);mask-image:linear-gradient(rgba(0,0,0,.9),transparent 70%);filter:blur(.4px) brightness(.9);}
  .ar-reflejo img{display:block;image-rendering:pixelated;max-width:none;}
  .ar-marca{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;}
  .ar-fant{position:absolute;image-rendering:pixelated;pointer-events:none;}
  .ar-flash{background:#fff;border-radius:50%;box-shadow:0 0 4cqw #fff;}
  .ar-txt{font-family:'Baloo 2',sans-serif;font-weight:700;text-shadow:0 2px 0 #000,0 0 6px #000;white-space:nowrap;}
  .ar-tajo{transform-origin:center;}
  .ar-rayo,.ar-mira{transform-origin:0 50%;}
  .ar-zona{border:3px dashed #fff;border-radius:50%;background:rgba(255,255,255,.10);transform:translate(-50%,-50%);}
  .ar-ent-sprite{position:absolute;transform:translate(-50%,-100%);background:url(images/red_walk.png) no-repeat;background-size:400% 400%;image-rendering:pixelated;}
  .ar-ent-sprite.riv{background-position:0 66.667%;filter:hue-rotate(150deg) saturate(1.3) brightness(.7);}
  .ar-ent-sprite.yo{background-position:0 33.333%;filter:brightness(.75);}
  .ar-mon{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform;}
  .ar-sombra{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,.5);width:40px;height:10px;}
  .ar-ancla{position:absolute;left:0;top:0;transform:translate(-50%,-100%);}
  .ar-cuerpo{transform-origin:50% 100%;will-change:transform;}
  .ar-flip{transition:transform .12s steps(3,end);}
  .ar-rot{transform-origin:50% 60%;}
  .ar-giro{transform-origin:50% 100%;}
  .ar-spr{display:none;image-rendering:pixelated;max-width:none;}
  .ar-spr.vis{display:block;}
  .ar-golpe .ar-rot{animation:arGolpe .32s steps(4,end);}
  @keyframes arGolpe{0%{filter:brightness(3) saturate(0)}25%{filter:brightness(1.6);opacity:.35}50%{filter:brightness(3);opacity:1}75%{opacity:.35}100%{filter:none;opacity:1}}
  .ar-rodar .ar-rot{animation:arRodar .3s steps(8,end);}
  @keyframes arRodar{0%{transform:rotate(0) scale(1,1)}50%{transform:rotate(180deg) scale(1,.8)}100%{transform:rotate(360deg) scale(1,1)}}
  .ar-carga .ar-rot{animation:arCarga .3s steps(3,end) infinite alternate;}
  /* cámara lenta del largo: el fondo se oscurece y se desatura; la zona marcada y los Pokémon quedan encima, nítidos */
  .ar-stage::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .18s ease-out;
    background:radial-gradient(ellipse at center, rgba(4,6,18,.18) 30%, rgba(4,6,18,.82) 100%);}
  .ar-stage.ar-lento::after{opacity:1;}
  .ar-bg{transition:filter .18s ease-out;} .ar-lento .ar-bg{filter:saturate(.35) brightness(.62);}
  @keyframes arCarga{from{filter:drop-shadow(0 0 2px var(--tc)) brightness(1.1)}to{filter:drop-shadow(0 0 10px var(--tc)) brightness(1.6)}}
  .ar-hud{position:absolute;top:8px;width:min(44cqw,300px);background:rgba(8,12,28,.86);border:2px solid rgba(255,255,255,.28);border-radius:8px;padding:5px 8px;font-size:clamp(10px,2.3cqw,15px);line-height:1.25;z-index:7;}
  .ar-hud.riv{left:8px;}
  .ar-hud.yo{right:8px;}
  .ar-ent{font-size:.78em;color:#9fb0ff;margin-bottom:.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ar-nom{display:flex;justify-content:space-between;gap:.5em;font-weight:700;}
  .ar-nom .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ar-nom .v{font-size:.78em;white-space:nowrap;}
  .ar-nom .v.bien{color:#5CF08B;} .ar-nom .v.mal{color:#FF7A70;}
  .ar-tip{font-size:.74em;color:#aab3d9;margin-bottom:.25em;}
  .ar-barra{height:max(7px,1.5cqw);background:#2a3050;border:1px solid #000;border-radius:2px;overflow:hidden;}
  .ar-barra i{display:block;height:100%;width:100%;transition:width .45s steps(8,end),background-color .3s;}
  .ar-barra.en{height:max(4px,.8cqw);margin-top:.3em;} .ar-barra.en i{background:#5AD1FF;transition:none;}
  .ar-num{font-size:.78em;color:#cfd5f5;margin-top:.15em;}
  .ar-bolas{display:flex;gap:.45em;margin-top:.35em;}
  .ar-bola{width:max(9px,2.6cqw);aspect-ratio:1;border-radius:50%;box-sizing:border-box;border:1px solid #000;background:linear-gradient(#E63B3B 0 44%,#222 44% 56%,#F5F5F5 56%);}
  .ar-bola.muerta{filter:grayscale(1) brightness(.45);}
  .ar-bola.activa{box-shadow:0 0 0 2px #FFD54A;}
  .ar-x{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:8;width:38px;height:38px;border-radius:50%;border:2px solid #4a5590;background:rgba(8,12,28,.85);color:#f2f4ff;font-size:15px;cursor:pointer;}
  .ar-son{position:absolute;left:50%;top:52px;transform:translateX(-50%);z-index:8;width:32px;height:32px;border-radius:50%;border:2px solid #4a5590;background:rgba(8,12,28,.85);font-size:14px;line-height:1;cursor:pointer;padding:0;}
  .ar-son:focus-visible{outline:3px solid #FFD54A;outline-offset:2px;}
  .ar-log{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:9;max-width:60%;background:rgba(0,0,0,.6);border-radius:6px;padding:3px 10px;font-size:12px;line-height:1.35;text-align:center;pointer-events:none;}
  .ar-log:empty{display:none;}
  .ar-aviso{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:12;pointer-events:none;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:clamp(36px,12cqw,96px);color:#FFD54A;text-shadow:0 4px 0 #000,0 0 18px #000;white-space:nowrap;}
  .ar-aviso.pop{animation:arPop .5s steps(6,end) both;}
  @keyframes arPop{from{transform:translate(-50%,-50%) scale(2.2);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
  .ar-ctrl{position:relative;flex:0 0 auto;height:min(240px,36dvh);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px 10px;background:linear-gradient(#070a18,#0b1030);touch-action:none;}
  .ar-joy{width:min(176px,34dvh,36vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center;touch-action:none;flex:0 0 auto;}
  .ar-joy .base{position:relative;width:78%;aspect-ratio:1;border-radius:50%;border:3px solid rgba(255,255,255,.35);background:rgba(20,28,64,.6);}
  .ar-joy .knob{position:absolute;left:50%;top:50%;width:42%;aspect-ratio:1;margin:-21% 0 0 -21%;border-radius:50%;background:#e8ecff;border:3px solid #5a6bd0;box-shadow:0 3px 0 rgba(0,0,0,.4);}
  .ar-hint{display:none;position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font-size:11px;color:#8f9ad0;text-align:center;pointer-events:none;white-space:nowrap;}
  .ar-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex:1 1 auto;min-width:0;max-width:300px;}
  .ar-act{position:relative;overflow:hidden;min-width:0;height:60px;border-radius:12px;border:3px solid #3a4680;background:#161d44;color:#f2f4ff;font-family:'Baloo 2',sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 4px;touch-action:none;-webkit-tap-highlight-color:transparent;}
  .ar-act b{font-size:11px;line-height:1.1;text-align:center;position:relative;overflow-wrap:break-word;hyphens:none;} .ar-act small{font-size:10px;color:#aab3d9;position:relative;}
  .ar-act .cd{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(255,255,255,.28);pointer-events:none;}
  .ar-act.sinEn{opacity:.5;} .ar-act:active{background:#252f70;}
  .ar-act.eqp{grid-column:1;grid-row:2;} .ar-act.esq{grid-column:2 / span 2;grid-row:2;border-color:#8be9ff;}
  .ar-act:disabled{opacity:.35;cursor:not-allowed;}
  .ar-b{min-height:52px;border-radius:10px;border:2px solid #3a4680;background:#161d44;color:#f2f4ff;font-family:'Baloo 2',sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 8px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
  .ar-b b{font-size:14px;line-height:1.15;text-align:center;} .ar-b small{font-size:11px;color:#aab3d9;}
  .ar-b:hover:not(:disabled){border-color:#8fa0ff;}
  .ar-b:disabled{opacity:.4;cursor:not-allowed;}
  .ar-b:focus-visible,.ar-sel:focus-visible,.ar-x:focus-visible,.ar-act:focus-visible{outline:3px solid #FFD54A;outline-offset:2px;}
  .ar-med{flex:1;}
  .ar-equipo,.ar-confirm,.ar-fin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(3,5,12,.8);padding:14px;}
  .ar-equipo{z-index:25;} .ar-confirm{z-index:40;} .ar-fin{z-index:30;background:rgba(3,5,12,.6);}
  .ar-equipo[hidden],.ar-confirm[hidden],.ar-fin[hidden]{display:none;}
  .ar-eq-caja,.ar-conf-caja,.ar-fin-caja{background:#0e1430;border:2px solid #4a5590;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;text-align:center;width:min(100%,520px);max-height:100%;overflow:auto;font-family:'Baloo 2',sans-serif;}
  .ar-conf-caja{max-width:340px;}
  .ar-fin-caja{max-width:380px;border-width:3px;} .ar-fin-caja > b{font-size:30px;}
  .ar-premio{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:15px;}
  .ar-premio li{display:flex;justify-content:space-between;gap:12px;padding:2px 4px;}
  .ar-premio li b{color:#FFD84A;white-space:nowrap;}
  .ar-premio li.tot{border-top:1px solid #34407a;margin-top:4px;padding-top:6px;font-weight:700;font-size:17px;}
  .ar-premio-bolas{color:#9fe2ff;font-weight:600;}
  .ar-premio-maestro{color:#c9b8ff;font-size:14px;} .ar-premio-maestro b{color:#fff;}
  .ar-rango-sube{background:#2a2160;border:1px solid #FFD84A;border-radius:10px;padding:6px 8px;color:#FFD84A;font-size:14px;}
  .ar-conf-caja > div,.ar-fin-caja > div{display:flex;gap:8px;}
  .ar-eq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .ar-carta{border-left-width:6px;} .ar-carta img{image-rendering:pixelated;}
  .ar-carta .ar-mini{width:100%;height:5px;background:#2a3050;border-radius:2px;overflow:hidden;} .ar-mini i{display:block;height:100%;}
  .ar-pick{width:min(100%,720px);height:100%;margin:0 auto;padding:16px 14px 10px;display:flex;flex-direction:column;gap:10px;overflow:hidden;}
  .ar-pick h2{margin:0;font-family:'Baloo 2',sans-serif;font-size:22px;color:#FFD54A;text-align:center;}
  .ar-pick p{margin:0;font-size:12px;color:#aab3d9;text-align:center;}
  .ar-grid{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;align-content:start;padding:2px;}
  .ar-sel{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;border-radius:10px;border:2px solid #34407a;background:#111838;color:#f2f4ff;font-family:'Baloo 2',sans-serif;cursor:pointer;touch-action:manipulation;}
  .ar-sel.on{background:#1c2658;}
  .ar-sel img{image-rendering:pixelated;} .ar-sel b{font-size:12px;} .ar-sel small{font-size:10px;color:#aab3d9;} .ar-sel .ar-st{color:#ffd9a0;}
  .ar-n{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#FFD54A;color:#111;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;}
  .ar-pick-pie{display:flex;gap:8px;align-items:center;} .ar-pick-pie span{font-size:12px;color:#aab3d9;flex:1;}
  .ar-pick-pie .ar-b{flex:0 0 auto;min-width:110px;} .ar-go{background:#C81F1F;border-color:#ff6a60;}
  .ar-duelo-btn{width:100%;flex:0 0 auto;background:#123a5c;border-color:#4fb3ff;}
  .ar-duelo{justify-content:flex-start;overflow-y:auto;}
  .ar-duelo-eq{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;} .ar-duelo-eq img{image-rendering:pixelated;background:#111838;border-radius:8px;}
  .ar-duelo-ops{display:flex;flex-direction:column;gap:10px;align-items:stretch;width:min(100%,380px);margin:6px auto 0;}
  .ar-duelo-o{text-align:center;color:#aab3d9;font-size:12px;}
  .ar-duelo-unir{display:flex;gap:8px;} .ar-duelo-unir .ar-b{flex:0 0 auto;min-width:96px;}
  .ar-duelo-unir input{flex:1;min-width:0;padding:10px;border-radius:10px;border:2px solid #3a4680;background:#0e1430;color:#f2f4ff;
    font-family:'Space Mono',monospace;font-size:20px;letter-spacing:4px;text-align:center;text-transform:uppercase;}
  .ar-duelo-unir input:focus-visible{outline:3px solid #FFD54A;outline-offset:2px;}
  .ar-duelo-estado{min-height:24px;text-align:center;color:#f2f4ff;font-family:'Baloo 2',sans-serif;font-size:14px;line-height:1.4;}
  .ar-duelo-codigo{font-family:'Space Mono',monospace;font-size:38px;font-weight:700;letter-spacing:8px;color:#FFD54A;margin:6px 0;}
  .ar-duelo-comp{display:flex;gap:8px;justify-content:center;margin-bottom:6px;} .ar-duelo-comp .ar-b{min-width:110px;}
  .ar-wa{background:#1f7a3f;border-color:#3DDC6E;}
  .ar-duelo-esp{display:block;font-size:12px;color:#aab3d9;}
  @media (orientation:landscape){
    .ar-ctrl{position:absolute;left:0;right:0;bottom:0;height:auto;background:none;pointer-events:none;align-items:flex-end;padding:8px 16px;}
    .ar-ctrl > *{pointer-events:auto;} .ar-hint{pointer-events:none;}
    .ar-act{opacity:.9;}
  }
  @media (hover:hover) and (pointer:fine){
    .ar-joy{display:none;}
    .ar-hint{display:block;}
    .ar-ctrl{justify-content:flex-end;}
    .ar-log{bottom:30px;}
  }
  @media (max-height:520px){
    .ar-hud{width:min(34cqw,250px);padding:3px 7px;} .ar-tip,.ar-num,.ar-ent{display:none;} .ar-bolas{margin-top:.2em;}
    .ar-act{height:46px;} .ar-act b{font-size:11px;}
    .ar-joy{width:min(130px,36dvh);}
    .ar-pick{padding:8px 12px 6px;} .ar-pick h2{font-size:18px;} .ar-pick p{display:none;}
    .ar-fin-caja > b{font-size:22px;}
    .ar-fin-caja{padding:10px 14px;gap:5px;} .ar-fin-caja > span:first-of-type{display:none;}
    .ar-premio{font-size:13px;gap:0;} .ar-premio li{padding:0 4px;} .ar-premio li.tot{font-size:15px;margin-top:2px;padding-top:3px;}
    .ar-premio-bolas{font-size:13px;} .ar-premio-maestro{font-size:12px;}
  }
  @media (prefers-reduced-motion:reduce){ .ar-cono,.ar-motas i,.ar-aviso.pop{animation:none;} .ar-flip{transition:none;} }

/* Ranking de Maestros */
.rank-rango{display:block;font-size:10px;color:var(--ink-dim);font-family:'Space Mono',monospace;}
.hof-row.rango{align-items:center;opacity:.75;}
.hof-row.rango.ok{opacity:1;}
.hof-row.rango small{color:var(--ink-dim);font-size:11px;}
.rango-pts{flex:0 0 auto;min-width:44px;font-family:'Space Mono',monospace;font-size:12px;color:var(--poke-blue);font-weight:700;}

/* Ejemplares: fuerza de cada figurita */
.rfuerza{margin-top:4px;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;}
.f-baja{color:#9aa3c7;} .f-media{color:var(--ink);} .f-alta{color:#3DDC6E;} .f-top{color:#FFB400;}
.ej-fila{flex-wrap:wrap;}
.ej-fila .txt{flex:1 1 auto;min-width:0;}
.ej-fila > .open-btn{order:4;margin-left:auto;}
.ej-lista{order:3;flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px;}
.ej-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:44px;padding:5px 10px;border-radius:10px;border:1px solid var(--border);background:var(--bg);cursor:pointer;font:inherit;}
.ej-chip b{font-family:'Space Mono',monospace;font-size:13px;}
.ej-chip small{font-size:10px;color:var(--ink-dim);font-family:'Space Mono',monospace;}
.ej-chip.on{border:2px solid var(--poke-blue);background:var(--panel);box-shadow:0 0 0 2px #3b82f633;}

/* ---------- Portada: dos zonas (completar el álbum / ser el mejor) ---------- */
.zonas{margin-bottom:8px;}
.zona{margin-bottom:28px;}
.zona-tit{display:flex;align-items:center;gap:10px;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:21px;line-height:1.2;color:var(--ink);margin:0 4px 12px;}
.zona-tit::before{content:'';width:6px;height:20px;border-radius:3px;background:var(--red);flex:0 0 auto;}
.zona-mejor .zona-tit::before{background:var(--poke-blue);}
.zona .pokedex-launch{margin-bottom:8px;}
.zona-acc{display:flex;flex-direction:column;gap:8px;}
.acc{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 16px;}
.acc-pri{background:var(--panel-2);}
.acc-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.acc-txt > b{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px;line-height:1.2;color:var(--ink);}
.acc-txt > span{font-size:14px;line-height:1.35;color:var(--ink-dim);}
.acc-txt span b{color:var(--ink);font-family:'Baloo 2',sans-serif;}
.acc-maestro{margin-top:2px;color:var(--poke-blue) !important;}
.acc-maestro b{color:var(--poke-blue) !important;}
.acc .open-btn{flex:0 0 auto;min-width:112px;min-height:44px;padding:10px 16px;}
.open-btn.sec{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);}
.open-btn.sec:disabled{background:#E6E9F2;color:#8A90A4;box-shadow:none;}
.open-btn:focus-visible{outline:3px solid var(--poke-blue);outline-offset:2px;}
.zona .pokedex-launch{flex-wrap:nowrap;}
.zona .pokedex-launch-text{flex:1 1 auto;min-width:0;}
.zona .pokedex-btn{flex:0 0 auto;}
@media (max-width:359px){ .zona .pokedex-launch{flex-wrap:wrap;} }
/* en compu: el álbum a la izquierda; ser el mejor y el ranking a la derecha */
@media (min-width:900px){
  .zonas{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-items:start;}
  .zona-album{grid-column:1;grid-row:1 / span 2;}
  .zona-mejor{grid-column:2;grid-row:1;}
  .zonas > .rank-panel{grid-column:2;grid-row:2;margin-top:0;}
}

/* Shiny */
.slot.vario{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-dim),0 0 10px #F0B40055;}
.vario-tag{position:absolute;top:2px;right:3px;font-size:13px;line-height:1;filter:drop-shadow(0 0 2px #fff);}
.reveal-card.vario{box-shadow:0 0 0 2px var(--gold),0 0 18px #F0B40088;background:linear-gradient(160deg,#FFF8DC,#fff);}
.rvario{margin-top:4px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13px;color:var(--gold-ink);}
.ej-chip.on{} .ej-chip b{white-space:nowrap;}

  /* Figuritas especiales: la misma figurita del álbum, marcada con borde y fondo dorados y una estrella */
  .especiales{margin:16px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--border);}
  .especiales[hidden]{display:none;}
  .esp-tit{margin:0 0 8px;font-family:'Baloo 2',sans-serif;font-size:15px;font-weight:700;color:var(--ink);}
  .slot.especial{background:#FFF6D6;border-color:var(--gold);}
  .slot.especial .num{color:var(--gold-ink);}
  .slot.especial .esp-tag{position:absolute;top:3px;right:4px;display:flex;color:var(--gold);}
  .slot.especial .name{white-space:normal;line-height:1.15;color:var(--gold-ink);font-weight:700;}

  /* Intercambio: cancelar un código y volver arriba */
  .btn-cancelar-codigo{background:transparent;color:var(--red);border:1px solid #D3121266;border-radius:9px;padding:9px 12px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;min-height:40px;}
  .btn-cancelar-codigo:disabled{opacity:.6;cursor:default;}
  .volver-arriba{position:sticky;bottom:12px;align-self:flex-end;display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:10px 14px;min-height:44px;border:none;border-radius:999px;background:var(--ink);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 6px 16px rgba(10,14,30,.3);}
  .volver-arriba[hidden]{display:none;}

  /* ---------- Portada: el mundo real girando con cosas de Pokémon en órbita (portada.js) ---------- */
  .portada{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;overflow:hidden;
    background:radial-gradient(circle at 50% 44%,#22305E 0%,#1B2140 34%,#060814 78%);
    transition:opacity .5s cubic-bezier(.16,1,.3,1),visibility .5s;}
  .portada.is-out{opacity:0;visibility:hidden;pointer-events:none;}
  .portada-body{display:flex;flex-direction:column;align-items:center;width:100%;padding:16px;}
  .portada-tit{display:flex;align-items:center;gap:12px;margin:0 0 -1svh;font-family:'Baloo 2',sans-serif;font-weight:700;
    font-size:clamp(34px,9vw,60px);line-height:1;color:#fff;letter-spacing:.3px;text-shadow:0 3px 12px rgba(0,0,0,.45);}
  .portada-tit .marca-pk{text-shadow:-2px 0 var(--poke-blue),2px 0 var(--poke-blue),0 -2px var(--poke-blue),0 2px var(--poke-blue),0 4px 0 var(--poke-blue);}
  .portada-mundo{display:block;width:min(760px,100%,74svh);aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .portada-entrar{margin-top:-2svh;background:var(--red);color:#fff;border:none;border-radius:12px;padding:10px 34px;min-height:44px;
    font-family:'Baloo 2',sans-serif;font-weight:700;font-size:16px;letter-spacing:.3px;cursor:pointer;
    box-shadow:0 6px 18px rgba(211,18,18,.35),0 2px 0 #8E0B0B;animation:portada-latido 2.6s cubic-bezier(.45,0,.55,1) infinite;}
  .portada-entrar:hover{background:#E41A1A;}
  .portada-entrar:active{transform:scale(.97);}
  .portada-entrar:focus-visible{outline:3px solid #FFCB05;outline-offset:4px;}
  @keyframes portada-latido{50%{transform:scale(1.05);}}
  body.portada-open{overflow:hidden;}
  @media (prefers-reduced-motion:reduce){ .portada-entrar{animation:none;} .portada{transition:none;} }

  /* ---------- Cabecera: la misma noche estrellada de la portada, compacta ---------- */
  .cabecera{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:'marca monedas' 'jugador ganar';
    align-items:center;gap:12px 12px;margin:0 0 26px;padding:18px 18px 22px;border-radius:18px;overflow:hidden;color:#fff;
    background:
      radial-gradient(1.5px 1.5px at 12% 30%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 38% 78%,#fff7 50%,transparent 51%),
      radial-gradient(1px 1px at 63% 22%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 86% 64%,#fff6 50%,transparent 51%),
      radial-gradient(1px 1px at 74% 88%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 24% 70%,#fff5 50%,transparent 51%),
      radial-gradient(circle at 18% 0%,#2A3A72 0%,#1B2140 45%,#0B0F22 100%);
    box-shadow:0 10px 24px rgba(20,23,42,.18);}
  .cabecera::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--red) 0 33.3%,var(--gold) 33.3% 66.6%,var(--poke-blue) 66.6%);}
  .cabecera .marca{grid-area:marca;color:#fff;font-size:clamp(24px,6.4vw,34px);min-width:0;}
  .cabecera .marca-ball{border-color:#0B0F22;box-shadow:0 0 0 2px rgba(255,255,255,.18);}
  .cabecera .coin-box{grid-area:monedas;justify-self:end;background:rgba(255,255,255,.08);border:1px solid rgba(240,180,0,.55);border-radius:999px;padding:6px 14px 6px 8px;}
  .cabecera .coin-box .amount{color:#FFD84D;font-size:19px;font-variant-numeric:tabular-nums;}
  .cabecera .player-chip{grid-area:jugador;justify-self:start;margin:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#C9D0EC;font-size:14px;border-radius:999px;padding:6px 14px;min-width:0;}
  .cabecera .player-chip b{color:#fff;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cabecera .earn-btn{grid-area:ganar;justify-self:end;border-radius:999px;padding:10px 18px;font-size:14px;box-shadow:0 4px 12px rgba(240,180,0,.25);}
  .cabecera .earn-btn:hover{background:#FFC414;}
  .cabecera .earn-btn:focus-visible{outline:3px solid #fff;outline-offset:2px;}
  @media (max-width:380px){ .cabecera .earn-btn{padding:10px 14px;font-size:13px;} }
  @media (min-width:900px){
    .cabecera{grid-template-columns:1fr auto auto auto;grid-template-areas:'marca jugador monedas ganar';padding:20px 24px 24px;}
    .cabecera .player-chip{justify-self:end;}
  }
  .cabecera .marca-texto{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35);}
  .cabecera .marca-texto .marca-pk{color:var(--gold);text-shadow:-1.5px 0 var(--poke-blue),1.5px 0 var(--poke-blue),0 -1.5px var(--poke-blue),0 1.5px var(--poke-blue),0 3px 0 var(--poke-blue);}
  .cabecera .marca{white-space:nowrap;font-size:clamp(21px,5.9vw,34px);}
  .cabecera .player-chip{white-space:nowrap;font-size:13px;gap:6px;}
  .cabecera .player-chip b{min-width:0;}
  /* pestañas y contadores del ranking con la misma letra que el resto */
  .rank-tab,.rank-count,.chip{font-family:'Baloo 2',sans-serif;font-size:14px;font-weight:600;}
  .rank-tab.active{font-weight:700;}
  .rank-name{font-size:15px;}
  /* celular: título centrado arriba; jugador y monedas en la segunda línea; "Responder y ganar" a lo ancho.
     Así entran nombres largos y monedas de 5-6 cifras sin pisarse. */
  @media (max-width:899px){
    .cabecera{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'marca marca' 'jugador monedas' 'ganar ganar';gap:12px 10px;padding:18px 16px 22px;}
    .cabecera .marca{justify-self:center;font-size:clamp(24px,7.4vw,34px);}
    .cabecera .player-chip{justify-self:stretch;min-width:0;}
    .cabecera .player-chip b{flex:1 1 auto;}
    .cabecera .coin-box{justify-self:end;}
    .cabecera .earn-btn{justify-self:stretch;width:100%;min-height:46px;font-size:15px;}
  }
  .cabecera .player-chip{display:flex;align-items:center;}
  @media (max-width:899px){
    .cabecera .pc-label{display:none;}
    .cabecera .player-chip{justify-content:center;padding:8px 14px;}
    .cabecera .player-chip b{flex:0 1 auto;font-size:16px;}
    .cabecera .player-chip::before{content:'';flex:0 0 auto;width:16px;height:16px;margin-right:2px;
      background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C9D0EC'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E");}
  }
  /* Barra de arriba fija en paneles largos (Intercambio): volver sin bajar hasta el final */
  .panel-top{position:sticky;top:-28px;z-index:3;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;
    margin:-28px -20px 14px;padding:12px 16px;background:var(--panel-2);border-bottom:1px solid var(--border);}
  .panel-top::after{content:'';width:88px;}   /* contrapeso para que el título quede centrado */
  .panel-top h2{margin:0;font-size:21px;}
  .panel-atras{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:8px 14px 8px 10px;border-radius:999px;border:1px solid var(--border);
    background:var(--bg);color:var(--ink);font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;cursor:pointer;width:88px;justify-content:center;}
  .panel-atras:hover{border-color:var(--ink-dim);}
  .panel-atras:focus-visible{outline:3px solid var(--poke-blue);outline-offset:2px;}
  @media (max-height:520px){ .panel-top{top:-14px;margin:-14px -18px 10px;} }
  .panel-top h2{white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;font-size:20px;min-width:0;}
  .ar-sel .ar-movs{color:#cfe3ff;line-height:1.2;text-align:center;margin-top:2px;}