@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap');
  :root {
    --bg:#0d1117;--surface:#161b22;--surface2:#1e2a52;--border:#2d3a6a;
    --accent:#f5a623;--accent2:#e74c3c;--good:#27ae60;--text:#e6edf3;--muted:#7d8590;
    --pixel:'Press Start 2P',monospace;--body:'Inter',sans-serif;--game:'Rajdhani',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh;overflow-x:hidden;overflow-y:auto;}
  .screen{display:none;}
  .screen.active{display:flex;flex-direction:column;min-height:100dvh;min-height:100vh;overflow-y:auto;}

  /* LOADING */
  .loading-overlay{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:100;}
  .loading-overlay.hidden{display:none;}
  .loading-text{font-family:var(--pixel);font-size:9px;color:var(--accent);animation:blink 1s step-end infinite;}
  @keyframes blink{50%{opacity:0;}}
  .loading-bar-wrap{width:200px;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;border:1px solid var(--border);}
  .loading-bar-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .3s ease;}

  /* HEADER */
  .game-header{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
  .game-header h1{font-family:var(--pixel);font-size:10px;color:var(--accent);}
  .gen-badge{font-family:var(--pixel);font-size:7px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:4px 8px;color:var(--muted);}

  /* START */
  #screen-start{
    align-items:center;justify-content:flex-start;gap:32px;
    padding-top:calc(env(safe-area-inset-top, 0px) + 48px);
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 24px);
    background:linear-gradient(rgba(8,12,20,.68),rgba(8,12,20,.82)),url('bg-arena.jpg') center/cover no-repeat;
  }
  .start-logo{text-align:center;}
  .start-logo h1{
    font-family:'Rajdhani',sans-serif;font-weight:700;
    font-size:clamp(36px,6vw,64px);
    color:#fff;letter-spacing:3px;line-height:1.1;
    text-shadow:0 0 30px rgba(245,166,35,.5),0 2px 8px rgba(0,0,0,.8);
  }
  .start-logo h1 span{color:#f5a623;}
  .start-logo p{
    color:#cdd6e4;font-size:14px;margin-top:6px;
    font-family:'Inter',sans-serif;letter-spacing:1px;
    text-shadow:0 1px 6px rgba(0,0,0,.7);
  }
  .pokeball-float{width:100px;height:100px;margin:0 auto 8px;animation:float 3s ease-in-out infinite;}
  @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

  /* Botones principales — grandes y legibles */
  .btn-primary{
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;
    background:var(--accent);color:#000;border:none;border-radius:10px;
    padding:14px 40px;cursor:pointer;letter-spacing:2px;
    transition:transform .15s,box-shadow .15s;min-width:220px;
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,166,35,.5);}
  .btn-secondary{
    font-family:'Rajdhani',sans-serif;font-weight:600;font-size:16px;
    background:transparent;color:var(--muted);
    border:1px solid var(--border);border-radius:10px;
    padding:12px 32px;cursor:pointer;letter-spacing:1px;
    transition:color .15s,border-color .15s;min-width:220px;
  }
  .btn-secondary:hover{color:var(--text);border-color:var(--accent);}
  .start-btns{display:flex;flex-direction:column;gap:12px;align-items:center;}
  .start-btns .btn-primary{width:300px;max-width:90vw;padding:14px 20px;text-align:center;}

  /* DRAFT */
  #screen-draft{flex-direction:column;}
  .draft-layout{flex:1;display:flex;gap:0;align-items:flex-start;overflow:hidden;}
  .draft-sidebar{background:var(--surface);border-right:1px solid var(--border);padding:14px 10px 0;display:flex;flex-direction:column;width:200px;flex-shrink:0;position:sticky;top:0;height:auto;box-sizing:border-box;border-radius:8px;}
  .draft-sidebar.right{border-right:none;border-left:1px solid var(--border);}
  .sidebar-title{font-family:var(--pixel);font-size:7px;color:var(--muted);text-align:center;padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:4px;flex-shrink:0;}
  .draft-pool{flex:1;padding:16px;overflow-y:auto;height:100%;box-sizing:border-box;}
  .draft-pool-title{font-family:var(--pixel);font-size:8px;color:var(--text);text-align:center;margin-bottom:8px;}
  .draft-counter{font-family:var(--pixel);font-size:7px;color:var(--accent);text-align:center;margin-bottom:14px;}
  .pokemon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  .poke-card{background:var(--surface);border:2px solid var(--border);border-radius:10px;padding:8px 4px;cursor:pointer;transition:border-color .15s,transform .15s;text-align:center;position:relative;}
  .poke-card:hover:not(.selected):not(.disabled){border-color:var(--accent);transform:translateY(-2px);}
  .poke-card.selected{border-color:var(--good);background:rgba(39,174,96,.1);}
  .poke-card.disabled{opacity:.35;cursor:default;}
  .poke-card img{width:64px;height:64px;image-rendering:pixelated;}
  .poke-card .poke-name{font-family:var(--pixel);font-size:6px;color:var(--text);margin-top:4px;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .poke-card .poke-types{display:flex;gap:3px;justify-content:center;margin-top:4px;flex-wrap:wrap;}
  .pick-indicator{position:absolute;top:4px;right:4px;font-size:12px;}
  .type-badge{font-size:7px;font-weight:700;padding:1px 5px;border-radius:5px;text-transform:uppercase;color:#fff;letter-spacing:.5px;}
  .mini-poke{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:6px 8px;animation:slideIn .2s ease;}
  @keyframes slideIn{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:none;}}
  .mini-poke img{width:48px;height:48px;image-rendering:pixelated;}
  .mini-poke .mini-name{font-family:var(--pixel);font-size:6px;color:var(--text);text-transform:capitalize;}
  .mini-poke .mini-types{display:flex;gap:3px;margin-top:2px;flex-wrap:wrap;}
  .slot-empty{height:48px;border:1px dashed var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--border);font-size:18px;}
  .draft-confirm-btn{font-family:'Rajdhani',sans-serif;font-weight:800;font-size:18px;background:var(--accent);color:#000;border:none;border-radius:10px;padding:13px;cursor:pointer;width:100%;transition:opacity .2s,transform .15s;letter-spacing:1px;}.draft-confirm-btn:not(:disabled):hover{transform:translateY(-2px);}.draft-confirm-btn:disabled{opacity:.35;cursor:default;background:#555;}
  .draft-confirm-btn:disabled{opacity:.4;cursor:default;}
  .draft-confirm-btn:not(:disabled):hover{transform:translateY(-2px);}

  /* BATALLA */
  /* ══ BATALLA ══ */
  #screen-battle{
    background:rgba(10,14,20,1) center/cover no-repeat scroll;
    align-items:center;justify-content:center;
    padding:16px 20px 0;
    overflow-y:auto;
  }

  .battle-arena{
    display:flex;flex-direction:column;gap:0;
    width:min(1300px, calc(100vw - 60px));
    border:2px solid #2d3a6a;border-radius:12px;
    overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.7);
  }

  /* ── CAMPO ── fondo oscuro con perspectiva sutil */
  .battle-field{
    position:relative;width:100%;height:460px;overflow:hidden;flex-shrink:0;
    background:#0a0e1a center/cover no-repeat;
  }
  /* Banner de acción en directo: gris muy translúcido, centrado abajo del campo.
     Solo da fondo al texto; deja ver el escenario. Aparece y se desvanece. */
  .field-banner{
    position:absolute;left:50%;bottom:13%;transform:translate(-50%,8px);
    z-index:6;max-width:62%;padding:11px 22px;border-radius:13px;
    background:rgba(20,24,34,.42);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 4px 16px rgba(0,0,0,.3);
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:19px;color:#fff;
    text-align:center;line-height:1.25;text-shadow:0 1px 4px rgba(0,0,0,.8);
    opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
    white-space:nowrap;
  }
  .field-banner.show{opacity:1;transform:translate(-50%,0);}
  /* Botón de ritmo del banner: discreto, esquina superior central del campo */
  .flow-toggle{
    position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:7;
    padding:5px 13px;border-radius:13px;cursor:pointer;
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;letter-spacing:.3px;
    background:rgba(20,24,34,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    border:1px solid rgba(255,255,255,.14);color:#cdd6e6;
    box-shadow:0 2px 8px rgba(0,0,0,.3);transition:all .15s;
  }
  .flow-toggle:hover{background:rgba(30,40,60,.7);color:#fff;}
  .flow-toggle.on{color:#7ee787;border-color:rgba(126,231,135,.4);}
  .field-banner .fb-sub{display:block;font-size:14px;font-weight:600;margin-top:2px;color:#cdd6e6;text-shadow:0 1px 3px rgba(0,0,0,.8);}
  .field-banner .fb-move{color:#ffd98a;}
  .field-banner .fb-fail{color:#ffb84d;}
  .field-banner .fb-super{color:#7ee787;}
  .field-banner .fb-weak{color:#9ab0d0;}
  .field-banner .fb-crit{color:#ff8a5a;}
  .field-banner .fb-multi{color:#62e0d0;font-weight:800;}
  .battle-field::before{
    content:'';position:absolute;left:0;right:0;top:0;bottom:0;
    background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.30) 100%);
    z-index:0;
  }
  .battle-field::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:20%;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.45));
    z-index:0;
  }

  /* HUDs */
  .hud-enemy{
    position:absolute;top:14px;left:14px;z-index:10;
    background:rgba(22,27,34,.92);border:1px solid #2d3a6a;
    border-radius:11px;padding:11px 18px 12px;min-width:270px;max-width:370px;width:max-content;
  }
  .hud-player{
    position:absolute;bottom:14px;right:14px;z-index:10;
    background:rgba(22,27,34,.92);border:1px solid #2d3a6a;
    border-radius:11px;padding:11px 18px 12px;min-width:270px;max-width:370px;width:max-content;
  }
  .hud-name{
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:22px;
    color:#e6edf3;text-transform:capitalize;display:flex;
    justify-content:space-between;align-items:baseline;margin-bottom:6px;
    letter-spacing:.5px;
  }
  .hud-lv{font-size:15px;color:#7d8590;font-family:'Inter',sans-serif;font-weight:500;}
  /* s432: Poké Ball junto al nombre del rival si ya lo tienes capturado */
  .hud-capturado{display:inline-flex;align-items:center;vertical-align:middle;margin-left:5px;}
  .hud-capturado img{width:17px;height:17px;object-fit:contain;image-rendering:auto;
    filter:drop-shadow(0 0 4px rgba(255,90,90,.7));animation:hudCapPop .3s ease;}
  @keyframes hudCapPop{from{transform:scale(0);}to{transform:scale(1);}}

  /* Barra HP */
  .hp-bar-wrap{display:flex;align-items:center;gap:8px;}
  .hp-label{font-family:'Inter',sans-serif;font-size:14px;color:#7d8590;font-weight:700;flex-shrink:0;}
  .hp-bar-bg{
    flex:1;height:18px;background:#0c1018;
    border-radius:9px;overflow:hidden;border:1px solid #2d3a6a;
    box-shadow:inset 0 2px 3px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.05);
  }
  .hp-bar-fill{height:100%;border-radius:9px;transition:width .6s ease,background .5s;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
  .hp-nums{font-family:'Rajdhani',sans-serif;font-size:16px;color:#cdd6e6;font-weight:800;flex-shrink:0;min-width:78px;text-align:right;}

  .hud-meta{display:flex;gap:3px;align-items:center;flex-wrap:wrap;margin-top:4px;}
  .fighter-types{display:flex;gap:3px;flex-wrap:wrap;}
  .hud-ability{font-family:var(--game);font-weight:600;font-size:13px;color:#9aa4b2;margin-top:5px;letter-spacing:.3px;display:flex;align-items:center;gap:5px;}
  .hud-ability .ability-info-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:15px;height:15px;border-radius:50%;
    background:rgba(125,133,144,.22);color:#cfd6e4;
    font-family:'Inter',sans-serif;font-size:10px;font-weight:700;font-style:normal;
    cursor:help;flex-shrink:0;transition:.15s;
  }
  .hud-ability .ability-info-btn:hover{background:#f5a623;color:#161b22;}

  .hud-item{font-family:var(--game);font-weight:600;font-size:13px;color:#7ee89a;margin-top:3px;letter-spacing:.3px;display:flex;align-items:center;gap:5px;}
  .hud-item .hud-item-ico{font-size:15px;filter:saturate(.9);}
  .hud-item .hud-item-spr{width:30px;height:30px;image-rendering:pixelated;vertical-align:middle;margin-right:3px;}
  .hud-item .hud-item-name{color:#9fe7b0;}
  .hud-item .hud-item-hidden{color:#7d8590;font-style:italic;letter-spacing:1px;}
  .hud-item .hud-item-used{color:#7d8590;font-size:11px;font-weight:500;}
  .hud-item .item-info-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:15px;height:15px;border-radius:50%;
    background:rgba(76,218,100,.18);color:#cfeede;
    font-family:'Inter',sans-serif;font-size:10px;font-weight:700;font-style:normal;
    cursor:help;flex-shrink:0;transition:.15s;
  }
  .hud-item .item-info-btn:hover{background:#4cda64;color:#0c1f12;}

  /* Status */
  .status-badge{font-family:var(--game);font-weight:700;font-size:11px;letter-spacing:.5px;padding:2px 6px;border-radius:4px;display:inline-block;}
  .status-par{background:#c8a000;color:#000;}
  .status-brn{background:#c03000;color:#fff;}
  .status-psn{background:#6030a0;color:#fff;}
  .status-frz{background:#2070b0;color:#fff;}
  .status-slp{background:#404840;color:#fff;}

  /* Boosts */
  .boost-display{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px;}
  .boost-tag{font-family:'Inter',sans-serif;font-size:10px;padding:2px 5px;border-radius:3px;font-weight:800;line-height:1.4;letter-spacing:.3px;}
  .boost-pos{background:rgba(39,200,96,.2);color:#2ecc71;border:1px solid #27ae60;}
  .boost-neg{background:rgba(231,60,60,.2);color:#e74c3c;border:1px solid #c0392b;}
  .boost-sand{background:rgba(214,191,82,.22);color:#e6cf6a;border:1px solid #b8a23a;}

  /* ── Slots de combatiente: contenedor posicionado que agrupa anillo + sprite ── */
  .fighter-slot{position:absolute;display:flex;flex-direction:column;align-items:center;z-index:2;}
  .slot-enemy{right:18%;top:6%;width:150px;}
  .slot-player{left:6%;bottom:14%;width:180px;}

  /* Sprites — dentro del slot, centrados. Mantienen su tamaño y las animaciones de transform. */
  .sprite-enemy{
    width:150px;height:150px;image-rendering:pixelated;z-index:4;
    object-fit:contain;object-position:center bottom;
    will-change:transform,opacity;
  }
  .sprite-player{
    width:180px;height:180px;image-rendering:pixelated;z-index:4;
    object-fit:contain;object-position:center bottom;
    will-change:transform,opacity;
  }

  /* Plataformas — disco negro bajo el Pokémon, rodeado del aro de color del tipo.
     Se solapan ligeramente con los pies del sprite usando un margen negativo. */
  .platform-enemy{width:200px;height:46px;margin-top:-40px;order:2;z-index:2;}
  .platform-player{width:240px;height:54px;margin-top:-46px;order:2;z-index:2;}
  .sprite-enemy{order:1;}
  .sprite-player{order:1;}
  /* El anillo: disco NEGRO en el centro, rodeado por un aro de color del tipo.
     --glow1 y --glow2 los inyecta el motor con los colores de los dos tipos. */
  .type-ring{
    --glow1:#5da0e8; --glow2:#5da0e8;
    position:relative;border-radius:50%;
    /* disco negro central */
    background:radial-gradient(ellipse at center,
      rgba(0,0,0,.85) 0%, rgba(0,0,0,.8) 58%, rgba(0,0,0,.45) 72%, rgba(0,0,0,0) 80%);
  }
  /* Aro de color GRUESO y brillante alrededor del disco negro, bicolor según tipos */
  .type-ring::before{
    content:'';position:absolute;inset:0;border-radius:50%;
    padding:6px;
    background:linear-gradient(90deg, var(--glow1) 0%, var(--glow1) 47%, var(--glow2) 53%, var(--glow2) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    box-shadow:0 0 22px 4px var(--glow1), 0 0 22px 4px var(--glow2);
    pointer-events:none;
  }
  /* Sin destello blanco: el aro late suavemente (glow pulsante del color del tipo) */
  .type-ring::before{ animation:ringPulse 2.4s ease-in-out infinite; }
  @keyframes ringPulse{
    0%,100%{ box-shadow:0 0 18px 3px var(--glow1), 0 0 18px 3px var(--glow2); }
    50%{ box-shadow:0 0 30px 6px var(--glow1), 0 0 30px 6px var(--glow2); }
  }

  /* ── Plataformas con IMAGEN (monedas nuevas) ──
     La MONEDA es el background del elemento (se escala con el tamaño). El GLOW
     es el ::after: un resplandor del color del tipo DETRÁS de la moneda,
     controlado por --plat-glow-intensity (independiente del tamaño). Se anula
     el aro genérico ::before. NO se usa mask (rompe el render en algunos
     navegadores). */
  .type-ring.has-platform-img{
    --plat-glow-intensity:1;
    overflow:visible;
  }
  .type-ring.has-platform-img::before{ display:none !important; content:none !important; }
  .type-ring.has-platform-img::after{
    content:''; position:absolute; z-index:-1; pointer-events:none;
    /* Elipse de resplandor centrada en la moneda, un poco más ancha que alta */
    left:50%; top:54%; width:96%; height:74%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(ellipse at center,
      var(--glow1) 0%,
      color-mix(in srgb, var(--glow1) 60%, var(--glow2)) 42%,
      var(--glow2) 62%,
      transparent 78%);
    filter:blur(calc(10px * var(--plat-glow-intensity)));
    opacity:calc(.85 * var(--plat-glow-intensity));
    animation:platGlowPulse 2.4s ease-in-out infinite;
  }
  @keyframes platGlowPulse{
    0%,100%{ opacity:calc(.7 * var(--plat-glow-intensity)); }
    50%{ opacity:calc(1 * var(--plat-glow-intensity)); }
  }

  /* Animaciones */
  .sprite-player.attack-anim{animation:atkP .5s ease;}
  @keyframes atkP{0%{transform:none;}30%{transform:translateX(var(--atk-dir,18px)) scale(1.08);}60%{transform:translateX(var(--atk-dir,22px)) scale(1.05);}100%{transform:none;}45%{transform:translateX(18px) scale(1.08);}75%{transform:translateX(-5px);}}
  .sprite-enemy.attack-anim{animation:atkE .32s ease;}
  @keyframes atkE{0%,100%{transform:none;}45%{transform:translateX(-18px) scale(1.08);}75%{transform:translateX(5px);}}
  .fighter-sprite.hurt-anim{animation:hurt .65s ease !important;}
  @keyframes hurt{
    0%   { opacity:1;   transform:none; }
    12%  { opacity:0.05;transform:translateX(5px); }
    24%  { opacity:1;   transform:translateX(-5px); }
    36%  { opacity:0.05;transform:translateX(4px); }
    48%  { opacity:1;   transform:translateX(-3px); }
    64%  { opacity:0.15;transform:translateX(2px); }
    80%  { opacity:1;   transform:translateX(-1px); }
    100% { opacity:1;   transform:none; }
  }
  .sprite-faint{animation:faintDrop 1.4s ease-in forwards !important;}
  @keyframes faintDrop{
    0%   { transform:none; opacity:1; }
    12%  { transform:translateY(-18px) scale(1.08); opacity:1; }
    30%  { transform:translateY(-6px) rotate(-6deg); opacity:0.9; }
    55%  { transform:translateY(35px) rotate(-15deg); opacity:0.5; }
    80%  { transform:translateY(75px) rotate(-25deg); opacity:0.15; }
    100% { transform:translateY(120px) rotate(-30deg); opacity:0; }
  }

  /* Pokéballs rival (arriba izq) */
  .rival-balls{position:absolute;top:9px;right:9px;display:flex;gap:5px;z-index:10;}
  .rival-ball{
    width:14px;height:14px;border-radius:50%;
    border:1.5px solid #555;
    background:linear-gradient(160deg,#e63030 48%,#fff 48%);
    position:relative;
  }
  .rival-ball::after{content:'';position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:4px;height:4px;
    border-radius:50%;background:#ddd;border:1px solid #444;}
  .rival-ball.fainted{background:linear-gradient(160deg,#444 48%,#777 48%) !important;opacity:.4;}

  /* Pokéballs jugador (abajo izq) */
  .player-balls-wrap{position:absolute;bottom:7px;left:7px;z-index:10;}
  .player-balls{display:flex;gap:5px;}
  .player-ball{
    width:16px;height:16px;border-radius:50%;
    border:2px solid #444;
    background:linear-gradient(160deg,#e63030 48%,#fff 48%);
    position:relative;transition:box-shadow .3s;
  }
  .player-ball::after{content:'';position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:5px;height:5px;
    border-radius:50%;background:#ddd;border:1.5px solid #333;}
  .player-ball.active{box-shadow:0 0 7px 3px rgba(245,166,35,.85);}
  .player-ball.fainted{background:linear-gradient(160deg,#444 48%,#777 48%) !important;opacity:.38;}

  /* Badge turno */
  #battle-turn-badge{display:none;}

  /* ── SECCIÓN INFERIOR ── */
  .battle-bottom{
    display:grid;grid-template-columns:1fr 1fr;
    border-top:2px solid #2d3a6a;flex-shrink:0;height:240px;
  }

  /* ATAQUES — izquierda */
  .action-panel{
    background:#161b22;display:flex;flex-direction:column;
    border-right:2px solid #2d3a6a;
  }
  .action-tabs{display:flex;gap:7px;padding:6px 6px 0;flex-shrink:0;border-bottom:none;}
  .action-tab{
    position:relative;
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;letter-spacing:.8px;
    color:#aeb9d4;flex:1;cursor:pointer;padding:9px 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(30,40,66,.42);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    transition:color .14s ease, background .14s ease, box-shadow .18s ease, border-color .18s ease;
    text-shadow:0 1px 2px rgba(0,0,0,.4);
  }
  .action-tab:hover:not(:disabled):not(.active){ color:#e6edf3; background:rgba(45,58,92,.5); border-color:rgba(255,255,255,.16); }
  .action-tab:disabled{opacity:.35;cursor:default;}
  /* Activo: sin relleno llamativo; solo un halo de contorno suave para ubicarte. */
  .action-tab.active{
    color:#fff;
    background:rgba(60,78,120,.4);
    border-color:rgba(150,190,255,.55);
    box-shadow:0 0 0 1px rgba(150,190,255,.35), 0 0 12px -1px rgba(150,190,255,.5), inset 0 0 10px -3px rgba(150,190,255,.4);
  }


  .moves-panel{display:grid;grid-template-columns:1fr 1fr;flex:1;overflow-y:auto;}.moves-panel.hidden,.switch-panel.hidden{display:none!important;}
  .move-btn{background:#161b22;border:1px solid #2d3a6a;padding:0;cursor:pointer;text-align:left;display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto auto;transition:filter .12s;min-height:99px;overflow:hidden;border-radius:8px;position:relative;}
  /* Cabecera superior más oscura para dar profundidad (zona del nombre y el tipo). */
  .move-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:50px;background:rgba(0,0,0,.18);pointer-events:none;border-radius:8px 8px 0 0;}
  .move-btn:hover{filter:brightness(1.18);}
  .move-btn:disabled{opacity:.4;cursor:default;filter:none;}
  /* Forcejeo / Recarga: botón de emergencia que ocupa toda la rejilla. */
  .move-btn-struggle,.move-btn-recharge{grid-column:1 / -1;background:linear-gradient(160deg,#3a2030,#241524);border-color:#7a3550;}
  .move-btn-struggle:hover,.move-btn-recharge:hover{filter:brightness(1.18);}
  .move-btn-struggle .mbn{color:#ff9aa9;}
  .move-info-btn{position:absolute;bottom:7px;right:8px;font-size:13px;color:rgba(255,255,255,.32);cursor:default;line-height:1;z-index:4;user-select:none;transition:color .12s;font-style:normal;}
  .move-info-btn:hover{color:rgba(200,220,255,.85);}
  .mbn{grid-column:1;grid-row:1;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:20px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);line-height:1.1;padding:9px 8px 2px 14px;position:relative;z-index:2;align-self:start;}
  /* Badge de tipo (icono + nombre) arriba derecha */
  .mbtype{grid-column:2;grid-row:1;display:flex;align-items:center;gap:5px;align-self:start;justify-self:end;margin:11px 6px 0 0;padding:4px 10px;border-radius:13px;background:rgba(0,0,0,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.4);position:relative;z-index:2;}
  .mbtype-name{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;color:rgba(255,255,255,.92);text-transform:uppercase;letter-spacing:.4px;}
  /* PNG de categoría (físico/especial/estado) arriba derecha del todo */
  .mbcat{grid-column:3;grid-row:1;align-self:start;justify-self:end;margin:11px 11px 0 5px;position:relative;z-index:2;}
  /* PP abajo izquierda */
  .mbp{grid-column:1;grid-row:2;display:flex;align-items:baseline;gap:2px;padding:4px 10px 10px 14px;position:relative;z-index:2;}
  .mbpc{font-size:19px;font-weight:800;}
  .mbps{font-size:13px;color:rgba(255,255,255,.4);}
  .mbpm{font-size:13px;color:rgba(255,255,255,.5);}
  .mbpl{font-size:11px;color:rgba(255,255,255,.4);margin-left:2px;letter-spacing:.3px;}
  .mbar-eff{font-size:9px;color:rgba(255,255,255,.4);margin-left:6px;}
  /* Dos cajas iguales POTENCIA/PRECISIÓN abajo derecha */
  .mstats{grid-column:2 / 4;grid-row:2;display:flex;gap:7px;align-items:flex-end;justify-content:flex-end;padding:0 11px 10px 4px;position:relative;z-index:2;}
  .mstat-box{display:flex;flex-direction:column;gap:1px;min-width:62px;padding:4px 9px 5px;border-radius:9px;background:rgba(0,0,0,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.4);}
  .mstat-lbl{font-size:9px;font-weight:800;color:rgba(255,255,255,.5);letter-spacing:.4px;}
  .mstat-val{font-family:'Rajdhani',sans-serif;font-size:19px;font-weight:800;line-height:1;}
  .mstat-pot{color:#ff8a3d;}
  .mstat-pre{color:#7db3ff;}
  .move-btn:nth-child(2n){border-right:none;}
  .move-btn:nth-last-child(-n+2){border-bottom:none;}
  .move-btn:hover:not(:disabled){background:#1e2a52;}
  .move-btn:disabled{opacity:.45;cursor:default;}
  .move-name{
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;
    color:#e6edf3;text-transform:capitalize;line-height:1.1;
  }
  .move-meta{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:1px;}
  .move-power{font-size:12px;color:#7d8590;font-family:'Inter',sans-serif;font-weight:600;}
  .move-effect{font-size:10px;color:#7d8590;font-style:italic;font-family:'Inter',sans-serif;}

  .switch-panel{display:grid;grid-template-columns:repeat(3,1fr);background:#0d1117;flex:1;overflow:hidden;gap:1px;}
  .switch-btn{
    background:#161b22;border:none;padding:6px 3px;cursor:pointer;
    text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;
    transition:background .12s;
  border-radius:8px;}
  .switch-btn:hover:not(:disabled){background:#1e2a52;}
  .switch-btn:disabled{opacity:.3;cursor:default;}
  .switch-btn img{width:56px;height:56px;image-rendering:pixelated;}
  .sw-name{font-family:var(--game);font-weight:600;font-size:11px;text-transform:capitalize;color:#e6edf3;letter-spacing:.2px;}
  .sw-hp-bar{width:100%;height:4px;background:#2d3a6a;border-radius:2px;overflow:hidden;}
  .sw-hp-fill{height:100%;border-radius:2px;}

  /* LOG — derecha */
  .battle-log{
    background:#0d1117;padding:13px 16px;
    font-family:'Inter',sans-serif;font-size:14px;line-height:1.75;color:#e6edf3;
    overflow-y:auto;height:240px;min-height:240px;max-height:240px;
  }

  .log-line{animation:fadeLog .15s ease;font-family:'Inter',sans-serif;}
  @keyframes fadeLog{from{opacity:0;}to{opacity:1;}}
  .log-player{color:#27ae60;font-weight:700;}
  .log-enemy{color:#e74c3c;font-weight:700;}
  .log-info{color:#7d8590;}
  .log-super{color:#f5a623;font-weight:700;}
  .log-immune{color:#e74c3c;font-style:italic;}
  .log-crit{color:#f0c040;font-weight:700;}
  .log-status{color:#c080f0;}
  .log-ability{color:#f5a623;font-style:italic;}

  /* Botonera — siempre visible, fija abajo */
  .botonera{
    display:flex;gap:8px;justify-content:center;
    padding:10px 0 6px;
    background:transparent;flex-shrink:0;
  }
  .btn-icon{
    width:50px;height:46px;
    background:linear-gradient(#5a6478,#3c4456);
    border:2px solid #7e8aa3;border-radius:11px;color:#fff;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 0 #2a313f,0 5px 12px rgba(0,0,0,.4);
    transition:transform .1s,box-shadow .1s,filter .1s;
  }
  .btn-icon svg{width:23px;height:23px;display:block;}
  .btn-icon:hover{filter:brightness(1.1);}
  .btn-icon:active{transform:translateY(3px);box-shadow:0 1px 0 #2a313f,0 2px 6px rgba(0,0,0,.4);}
  /* Variantes de color por acción */
  .btn-icon.nav-home{background:linear-gradient(#4a90d9,#2c6cb0);border-color:#7fb4ed;box-shadow:0 4px 0 #1d4d80,0 5px 12px rgba(58,123,213,.4);}
  .btn-icon.nav-home:active{box-shadow:0 1px 0 #1d4d80,0 2px 6px rgba(58,123,213,.4);}
  .btn-icon.nav-dice{background:linear-gradient(#f5b942,#e89010);border-color:#ffd87a;box-shadow:0 4px 0 #a8650a,0 5px 12px rgba(245,166,35,.4);}
  .btn-icon.nav-dice:active{box-shadow:0 1px 0 #a8650a,0 2px 6px rgba(245,166,35,.4);}
  .btn-icon.nav-testmode{background:linear-gradient(#3fb98a,#249e6f);border-color:#7fe0bd;box-shadow:0 4px 0 #156f4d,0 5px 12px rgba(63,185,138,.4);}
  .btn-icon.nav-testmode:active{box-shadow:0 1px 0 #156f4d,0 2px 6px rgba(63,185,138,.4);}
  .btn-icon.nav-loadout{background:linear-gradient(#9b6ad6,#7a45c0);border-color:#c4a0f0;box-shadow:0 4px 0 #4f2d80,0 5px 12px rgba(155,106,214,.4);}
  .btn-icon.nav-loadout:active{box-shadow:0 1px 0 #4f2d80,0 2px 6px rgba(155,106,214,.4);}
  .btn-icon.nav-weather{background:linear-gradient(#56c2e8,#2f97c4);border-color:#9fe0f5;box-shadow:0 4px 0 #1c6a8c,0 5px 12px rgba(86,194,232,.4);}
  .btn-icon.nav-weather:active{box-shadow:0 1px 0 #1c6a8c,0 2px 6px rgba(86,194,232,.4);}
  .btn-icon.nav-saveteam{background:linear-gradient(#e0a32f,#c07d12);border-color:#f5cf7a;box-shadow:0 4px 0 #8a560a,0 5px 12px rgba(224,163,47,.4);}
  .btn-icon.nav-saveteam:active{box-shadow:0 1px 0 #8a560a,0 2px 6px rgba(224,163,47,.4);}
  .pb-footer{height:4px;}


  /* ── PANTALLA RESULTADO ── */
  #screen-result{
    align-items:center;justify-content:center;
    background:radial-gradient(ellipse at 50% 30%, #161b3a 0%, #0d1117 70%);
    min-height:100dvh;
  }
  .result-box{
    text-align:center;display:flex;flex-direction:column;
    align-items:center;gap:16px;padding:40px 24px;
  }
  .result-title{
    font-family:'Rajdhani',sans-serif;font-weight:800;
    font-size:clamp(48px,8vw,80px);
    letter-spacing:4px;line-height:1;
    animation:resultPop .5s cubic-bezier(.34,1.56,.64,1);
  }
  .result-title.win{ color:#27ae60;text-shadow:0 0 40px rgba(39,174,96,.5);}
  .result-title.lose{color:#e74c3c;text-shadow:0 0 40px rgba(231,76,60,.5);}
  @keyframes resultPop{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:none;}}
  .result-subtitle{
    color:#7d8590;font-size:18px;
    font-family:'Inter',sans-serif;font-weight:500;
    margin-bottom:8px;
  }
  .result-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}

  /* Animación de turno — el sprite activo flota suavemente */
  .sprite-player.my-turn{animation:floatPlayer 1.2s ease-in-out infinite;}
  .sprite-enemy.enemy-turn{animation:floatEnemy 1.2s ease-in-out infinite;}
  @keyframes floatPlayer{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
  @keyframes floatEnemy{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

  /* Animaciones de estado (filtros sobre el sprite) */
  @keyframes confuseSpin{0%,100%{transform:rotate(0);}25%{transform:rotate(-8deg) translateX(-3px);}75%{transform:rotate(8deg) translateX(3px);}}
  /* Paralizado: sacudida nerviosa + parpadeo eléctrico amarillo intermitente */
  @keyframes paralyzeShake{
    0%,100%{transform:none;filter:none;}
    8%{transform:translateX(-3px);filter:brightness(1.6) sepia(1) saturate(4) hue-rotate(5deg);}
    16%{transform:translateX(3px);filter:none;}
    24%{transform:translateX(-2px);}
    50%{transform:none;filter:none;}
    56%{filter:brightness(1.7) sepia(1) saturate(5) hue-rotate(5deg);}
    60%{filter:none;}
  }
  /* Congelado: tinte azul hielo, casi sin movimiento, brillo cristalino lento */
  @keyframes freezePulse{0%,100%{filter:brightness(1.15) saturate(.4) hue-rotate(165deg) contrast(1.1);}50%{filter:brightness(1.45) saturate(.25) hue-rotate(180deg) contrast(1.2);}}
  /* Quemado: parpadeo cálido como brasas */
  @keyframes burnFlicker{0%,100%{filter:brightness(1) saturate(1);}30%{filter:brightness(1.25) sepia(.5) saturate(2.4) hue-rotate(-12deg);}55%{filter:brightness(.95) sepia(.3) saturate(1.8) hue-rotate(-8deg);}}
  /* Dormido: cabeceo suave hacia abajo */
  @keyframes sleepBob{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(7px) rotate(2deg);}}
  /* Envenenado: latido enfermizo morado/verdoso */
  @keyframes poisonPulse{0%,100%{filter:brightness(1) hue-rotate(0deg) saturate(1);}50%{filter:brightness(.88) hue-rotate(70deg) saturate(1.7);}}

  .status-anim-par{animation:paralyzeShake .4s ease infinite;}
  .status-anim-frz{animation:freezePulse 1.5s ease infinite;}
  .status-anim-brn{animation:burnFlicker .8s ease infinite;}
  .status-anim-slp{animation:sleepBob 1.5s ease infinite;}
  .status-anim-psn,.status-anim-tox{animation:poisonPulse 1.5s ease infinite;}
  .status-anim-confused{animation:confuseSpin .5s ease infinite;}

  /* Pájaros de confusión */
  .confused-birds{position:absolute;pointer-events:none;z-index:20;font-size:14px;}
  @keyframes birdOrbit{0%{transform:rotate(0deg) translateX(52px) rotate(0deg);}100%{transform:rotate(360deg) translateX(52px) rotate(-360deg);}}
  .bird{position:absolute;animation:birdOrbit 1.2s linear infinite;}
  .bird:nth-child(2){animation-delay:.4s;}
  .bird:nth-child(3){animation-delay:.8s;}

  /* ── Capa de partículas persistentes de ESTADO (sobre el sprite) ── */
  .status-fx{position:absolute;pointer-events:none;z-index:21;transform:translate(-50%,-50%);width:0;height:0;}
  .status-fx span{position:absolute;display:block;}
  /* Veneno/Tóxico: burbujas moradas que suben y se desvanecen */
  .sfx-bubble{width:9px;height:9px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#e0a6f5,#9b59b6 70%);
    box-shadow:0 0 5px rgba(155,89,182,.7),inset 0 1px 2px rgba(255,255,255,.5);
    animation:sfxBubble 2s ease-in infinite;}
  @keyframes sfxBubble{0%{transform:translate(0,18px) scale(.5);opacity:0;}20%{opacity:.95;}100%{transform:translate(var(--bx,0),-42px) scale(1);opacity:0;}}
  /* Tóxico: burbujas más grandes y más rápidas (veneno grave) */
  .status-fx.tox .sfx-bubble{width:12px;height:12px;animation-duration:1.5s;}
  /* Quemadura: brasas/ascuas cálidas que ascienden parpadeando */
  .sfx-ember{width:7px;height:7px;border-radius:50%;
    background:radial-gradient(circle,#ffe08a,#ff6a2a 70%);
    box-shadow:0 0 6px rgba(255,120,40,.9);
    animation:sfxEmber 1.5s ease-in infinite;}
  @keyframes sfxEmber{0%{transform:translate(0,14px) scale(.6);opacity:0;}15%{opacity:1;}60%{opacity:.9;}100%{transform:translate(var(--bx,0),-40px) scale(.3);opacity:0;}}
  /* Paralizado: chispas eléctricas que crepitan alrededor */
  .sfx-spark{width:3px;height:14px;border-radius:2px;
    background:linear-gradient(180deg,#fff,#f5c518);
    box-shadow:0 0 6px #f5c518,0 0 12px rgba(245,197,24,.7);
    animation:sfxSpark .55s steps(1) infinite;}
  @keyframes sfxSpark{0%,100%{opacity:0;transform:rotate(var(--sr,0deg)) scaleY(.4);}45%{opacity:1;transform:rotate(var(--sr,0deg)) scaleY(1);}50%{opacity:0;}}
  /* Sueño: Zzz flotando hacia arriba */
  .sfx-zzz{font-family:'Rajdhani',sans-serif;font-weight:800;color:#bcd4ff;
    text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 8px rgba(150,190,255,.7);
    animation:sfxZzz 2.6s ease-in-out infinite;}
  @keyframes sfxZzz{0%{transform:translate(0,6px) rotate(-8deg);opacity:0;}25%{opacity:1;}100%{transform:translate(18px,-34px) rotate(10deg);opacity:0;}}
  /* Congelado: destellos de escarcha estáticos */
  .sfx-frost{font-size:13px;color:#cfeeff;text-shadow:0 0 6px rgba(160,220,255,.9);
    animation:sfxFrost 2.2s ease-in-out infinite;}
  @keyframes sfxFrost{0%,100%{opacity:.35;transform:scale(.85);}50%{opacity:1;transform:scale(1.1);}}

  /* ── DRENADORAS: brotes verdes PLANTADOS en los pies del sembrado (como una
     hazard), que laten cada turno mientras drenan vida hacia el rival. ── */
  .leech-drain-anim{animation:leechDrain .9s ease;}
  @keyframes leechDrain{
    0%,100%{filter:brightness(1) saturate(1);}
    35%{filter:brightness(.85) saturate(1.6) hue-rotate(40deg);}
    70%{filter:brightness(.92) saturate(1.3) hue-rotate(20deg);}
  }
  /* Capa de brotes anclada a los pies del Pokémon (left/top = centro de los pies) */
  .leech-sprouts{
    position:absolute;z-index:8;pointer-events:none;
    transform:translate(-50%,-50%);
    width:0;height:0;
  }
  .leech-sprout{
    position:absolute;font-size:15px;line-height:1;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 4px rgba(110,220,90,.5));
    transform-origin:bottom center;
    animation:sproutSway 2.6s ease-in-out infinite;
  }
  .leech-sprout.s1{left:-16px;top:-8px;font-size:14px;animation-delay:0s;}
  .leech-sprout.s2{left:0px;top:-12px;font-size:17px;animation-delay:.5s;}
  .leech-sprout.s3{left:13px;top:-7px;font-size:13px;animation-delay:1s;}
  @keyframes sproutSway{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
  /* Latido al drenar: los brotes se agrandan y brillan un instante. */
  .leech-sprouts.leech-pulse .leech-sprout{animation:sproutPulse .65s ease;}
  @keyframes sproutPulse{
    0%,100%{transform:scale(1);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 4px rgba(110,220,90,.5));}
    40%{transform:scale(1.45) translateY(-3px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(140,250,110,.95));}
  }
  /* Partícula-semilla que vuela del sembrado al aliado que absorbe */
  .leech-seed-fx{
    position:absolute;z-index:30;pointer-events:none;
    width:13px;height:13px;border-radius:50% 50% 50% 0;
    background:radial-gradient(circle at 35% 30%,#a8f06a,#3da13d 70%);
    box-shadow:0 0 8px rgba(120,230,90,.8),inset 0 1px 2px rgba(255,255,255,.5);
    transform:rotate(45deg);
    transition:left .65s cubic-bezier(.45,.05,.4,1),top .65s cubic-bezier(.45,.05,.4,1),opacity .65s ease;
  }

  /* Tooltip flotante global */
  #global-tooltip{
    display:none;position:fixed;z-index:9999;
    background:#0d1117;border:1px solid #2d3a6a;border-radius:8px;
    padding:8px 10px;min-width:170px;max-width:210px;
    box-shadow:0 4px 24px rgba(0,0,0,.9);pointer-events:none;
  }
  .tooltip-move{display:flex;align-items:center;gap:5px;padding:3px 0;font-size:11px;color:#e6edf3;font-family:'Inter',sans-serif;}
  .tooltip-move:not(:last-child){border-bottom:1px solid rgba(255,255,255,.06);}

  .turn-indicator{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);font-style:italic;margin:2px 0;}

  /* Tooltip pokémon en el draft */
  #draft-tooltip{
    display:none;position:fixed;z-index:9999;
    background:#0d1117;border:1px solid #2d3a6a;border-radius:10px;
    padding:12px;min-width:180px;max-width:220px;
    box-shadow:0 6px 28px rgba(0,0,0,.9);pointer-events:none;
  }
  #draft-tooltip > img{width:80px;height:80px;image-rendering:pixelated;display:block;margin:0 auto 8px;}
  #draft-tooltip .dt-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;color:#e6edf3;text-align:center;text-transform:capitalize;margin-bottom:4px;}
  #draft-tooltip .dt-types{display:flex;justify-content:center;gap:4px;margin-bottom:8px;}
  #draft-tooltip .dt-item{font-size:10px;color:#7ee89a;margin:0 0 6px;font-family:Inter,sans-serif;text-align:center;}
  #draft-tooltip .dt-item b{color:#9fe7b0;}
  #draft-tooltip .dt-move{display:flex;align-items:center;gap:5px;padding:2px 0;font-size:11px;color:#e6edf3;font-family:'Inter',sans-serif;}
  #draft-tooltip .dt-move:not(:last-child){border-bottom:1px solid rgba(255,255,255,.06);}
  #draft-tooltip .dt-pp{font-size:10px;color:#7d8590;margin-left:auto;padding-left:8px;}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE MÓVIL — max 680px
═══════════════════════════════════════════════════════ */
@media (max-width: 680px) {

  /* ── GENERAL ── */
  body {
    font-size: 14px;
    overflow: hidden !important;
    height: 100dvh !important;
    height: -webkit-fill-available !important;
    max-height: 100dvh !important;
  }
  .screen {
    display: none !important;
    min-height: 0 !important;
  }
  .screen.active {
    display: flex !important;
    height: 100dvh !important;
    height: -webkit-fill-available !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
  }
  /* El fondo liso solo para pantallas que NO tienen imagen de fondo propia.
     #screen-start conserva su fondo de Lugia/Ho-Oh; la batalla lo recibe inline. */
  #screen-draft.active, #screen-pokedex.active {
    background: var(--bg) !important;
  }
  /* Evitar scroll en batalla móvil */
  #screen-battle {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }


  /* ── PANTALLA INICIO ── */
  .start-title { font-size: 36px !important; }
  .start-buttons { flex-direction: column; gap: 10px; align-items: stretch; }
  .btn-primary, .btn-secondary { width: 100%; font-size: 16px; padding: 14px; }

  /* ── DRAFT ── */
  .draft-layout { flex-direction: column; overflow: visible; }

  /* Sidebar izquierdo: fila horizontal de picks arriba */
  .draft-sidebar {
    width: 100% !important;
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    padding: 8px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    gap: 4px !important;
  }
  .draft-sidebar .sidebar-title { display: none; }
  #player-slots {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    padding-bottom: 0 !important;
  }
  /* Mini-pokémon más compactos en móvil */
  .mini-poke { padding: 2px 5px !important; gap: 4px !important; }
  .mini-poke img { width: 32px !important; height: 32px !important; }
  .mini-poke .mini-name { font-size: 10px !important; }
  .slot-empty { height: 36px !important; width: 60px; }

  /* Sidebar derecho (rival): ocultar en móvil */
  .draft-sidebar.right { display: none; }

  /* Footer del sidebar en móvil */
  .draft-sidebar > div[style*="sticky"] { width: 100%; }
  .draft-confirm-btn { font-size: 16px !important; padding: 12px !important; }

  /* Grid de pokémon: 2 columnas */
  .pokemon-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .poke-card { padding: 6px 4px !important; }
  .poke-card img { width: 60px !important; height: 60px !important; }
  .poke-name { font-size: 9px !important; }

  /* ── BATALLA — ocupa toda la pantalla ── */
  #screen-battle.active {
    overflow: hidden !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .battle-arena {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  .battle-field {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: 300px !important;
  }
  .battle-bottom {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }
  /* En móvil los botones de ataque vuelven a su tamaño compacto
     (anula los tamaños grandes pensados para escritorio). */
  .action-panel { flex-shrink: 0 !important; }
  .action-panel .moves-panel { flex: 0 0 auto !important; }
  .action-panel {
    border-right: none !important;
    border-bottom: 1px solid #2d3a6a !important;
    flex-shrink: 0 !important;
  }
  .battle-log {
    height: 96px !important;
    max-height: 96px !important;
    min-height: 96px !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    border-left: none !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
  }
  .hud-enemy {
    top: 6px !important; right: 6px !important;
    min-width: 156px !important; max-width: 200px !important;
    padding: 7px 11px 8px !important; width: auto !important;
  }
  .hud-player {
    bottom: 6px !important; right: 6px !important;
    min-width: 156px !important; max-width: 200px !important;
    padding: 7px 11px 8px !important; width: auto !important;
  }
  .hud-name { font-size: 13px !important; margin-bottom: 5px !important; }
  .hud-lv { font-size: 11px !important; }
  /* Barra de HP claramente visible en móvil */
  .hp-bar-wrap { gap: 5px !important; }
  .hp-bar-bg { height: 7px !important; border-radius: 4px !important; }
  .hp-bar-fill { border-radius: 4px !important; }
  .hp-label { font-size: 11px !important; }
  .hp-nums { font-size: 10px !important; min-width: 48px !important; }
  /* Más aire entre los bloques de la tarjeta (tipos / habilidad / item / boosts) */
  .hud-meta { margin-top: 6px !important; gap: 4px !important; }
  .hud-ability { font-size: 9px !important; margin-top: 6px !important; }
  .hud-item { font-size: 9px !important; margin-top: 5px !important; }
  /* El sprite del objeto, más pequeño en móvil para que no se salga de pantalla. */
  .hud-item .hud-item-spr { width: 20px !important; height: 20px !important; }
  .hud-item .hud-item-ico { font-size: 11px !important; }
  .boost-display { margin-top: 6px !important; gap: 4px !important; }
  .boost-tag { font-size: 9px !important; padding: 1px 4px !important; }
  .pokeball-strip { gap: 2px !important; }
  .pb { width: 11px !important; height: 11px !important; }
  /* Slots a escala móvil: el slot lleva la posición, sprite y anillo se centran dentro */
  .slot-enemy {
    right: auto !important; left: 52% !important;
    top: 6% !important; width: 96px !important;
  }
  .slot-player {
    left: 5% !important; bottom: 10% !important; width: 104px !important;
  }
  .sprite-enemy {
    right: auto !important; left: auto !important; top: auto !important;
    transform: none !important;
    width: 96px !important; height: 96px !important;
    object-fit: contain; object-position: center bottom;
  }
  .sprite-player {
    left: auto !important; bottom: auto !important;
    transform: none !important;
    width: 104px !important; height: 104px !important;
    object-fit: contain; object-position: center bottom;
  }
  /* Anillos a escala móvil, solapando los pies con margen negativo */
  .platform-enemy {
    width: 110px !important; height: 26px !important; margin-top: -22px !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  }
  .platform-player {
    width: 128px !important; height: 30px !important; margin-top: -26px !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  }

  
  .move-btn {
    padding: 0 !important;
    min-height: 92px !important;
    white-space: normal !important;
    word-break: break-word !important;
    border-radius: 8px !important;
  }
  .move-name { font-size: 12px !important; line-height: 1.2 !important; }
  .move-meta { font-size: 9px !important; gap: 2px !important; flex-wrap: wrap !important; }
  .type-badge { font-size: 8px !important; padding: 1px 4px !important; }
  /* ── Botones de ataque en MÓVIL: layout apilado y limpio ──
     En vez del grid 2×3 de escritorio (que solapa PP y stats cuando el
     nombre ocupa 2 líneas), pasamos a bloques en columna: fila superior
     (nombre + tipo), fila de PP, y fila de potencia/precisión. Nada se
     monta y todo respira. */
  .move-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    min-height: 92px !important;
    padding: 8px 11px 9px !important;
    gap: 5px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  .move-btn::before { height: 100% !important; border-radius: 8px !important; }
  /* Fila 1: nombre a la izquierda, tipo a la derecha */
  .mbn {
    grid-column: auto !important; grid-row: auto !important;
    font-size: 16px !important; line-height: 1.15 !important;
    padding: 0 !important; padding-right: 95px !important;
    align-self: stretch !important; order: 1 !important;
  }
  .mbtype {
    grid-column: auto !important; grid-row: auto !important;
    position: absolute !important; top: 7px !important; right: 40px !important;
    margin: 0 !important; padding: 2px 6px !important; gap: 3px !important;
    justify-self: auto !important; align-self: auto !important; order: 2 !important;
    max-width: 44% !important; overflow: hidden !important;
    display: inline-flex !important; align-items: center !important;
  }
  /* El icono del tipo (img que devuelve typeIcon) más pequeño en móvil */
  .mbtype img { width: 13px !important; height: 13px !important; }
  .mbtype-name { font-size: 9px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1 !important; }
  .mbcat {
    grid-column: auto !important; grid-row: auto !important;
    position: absolute !important; top: 7px !important; right: 9px !important;
    margin: 0 !important; justify-self: auto !important; align-self: auto !important; order: 3 !important;
  }
  /* El icono de categoría (físico/especial/estado) contenido */
  .mbcat img { width: 22px !important; height: 22px !important; }
  /* Fila 2: PP (y el efecto, p.ej. "Rebote 33%") en su propia línea */
  .mbp {
    grid-column: auto !important; grid-row: auto !important;
    padding: 0 !important; flex-wrap: wrap !important; gap: 3px !important;
    order: 4 !important;
  }
  .mbpc { font-size: 15px !important; }
  .mbps, .mbpm { font-size: 11px !important; }
  .mbpl { font-size: 9px !important; }
  .mbar-eff { font-size: 9px !important; margin-left: 8px !important; color: rgba(255,255,255,.55) !important; }
  /* Fila 3: potencia y precisión, alineadas a la izquierda y sin solaparse */
  .mstats {
    grid-column: auto !important; grid-row: auto !important;
    padding: 0 !important; gap: 7px !important;
    justify-content: flex-start !important; align-items: stretch !important;
    order: 5 !important;
  }
  .mstat-box { min-width: 0 !important; flex: 1 1 0 !important; padding: 3px 8px 4px !important; text-align: center !important; }
  .mstat-lbl { font-size: 7px !important; }
  .mstat-val { font-size: 14px !important; }
  .move-info-btn { display: none !important; }

  /* Panel de cambio: más compacto */
  .switch-panel {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .switch-btn { padding: 6px 4px !important; min-height: 80px !important; }
  .switch-btn img { width: 52px !important; height: 52px !important; }
  .sw-name { font-size: 10px !important; }
  /* El action-panel tiene una altura FIJA común en ATAQUES y CAMBIAR, ajustada
     a las 2 filas de tarjetas de cambio, para que el registro quede justo al
     final de las tarjetas y al mismo nivel en ambas pestañas. Los ataques se
     adaptan a esa misma medida. */
  .action-panel {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .action-panel .moves-panel,
  .action-panel .switch-panel {
    flex: 0 0 auto !important;
    height: 222px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    align-content: start !important;
  }
  /* Las 4 tarjetas de ataque se reparten esa altura (2 filas) sin huecos. */
  .action-panel .moves-panel {
    grid-template-rows: 1fr 1fr !important;
  }
  /* En móvil, las tarjetas de cambio son COMPACTAS (sprite + nombre + HP +
     tipos), sin los 4 ataques — así caben las 6 holgadas. El detalle completo
     (ataques, PP) se ve al tocar, en el preview de cambio. */
  .switch-card .swc-moves { display: none !important; }
  .switch-card { padding: 8px !important; gap: 5px !important; }
  .switch-card .swc-spr { width: 48px !important; height: 48px !important; }
  .switch-card .swc-name { font-size: 13px !important; }

  /* Botonera */
  .botonera { padding: 8px 0 6px !important; }
  .btn-icon { width: 46px !important; height: 40px !important; font-size: 20px !important; }
}

/* ── Pantallas muy pequeñas (360px) ── */
@media (max-width: 400px) {
  .pokemon-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hud-name { font-size: 11px !important; }
  .move-btn { min-height: 56px !important; }
  .battle-field { min-height: 185px !important; }
  #enemy-sprite { width: 64px !important; height: 64px !important; }
  #player-sprite { width: 72px !important; height: 72px !important; }
}

  /* Panel de preview de cambio en móvil */
  #mobile-switch-preview {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #0d1117;
    border-top: 2px solid #2d3a6a;
    border-radius: 16px 16px 0 0;
    padding: 16px;
    z-index: 1000;
    box-shadow: 0 -4px 30px rgba(0,0,0,.8);
    animation: slideUp .2s ease;
  }
  @keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
  #mobile-switch-preview .msp-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  }
  #mobile-switch-preview .msp-header img {
    width: 64px; height: 64px; image-rendering: pixelated;
  }
  #mobile-switch-preview .msp-name {
    font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 20px; color: #e6edf3;
  }
  #mobile-switch-preview .msp-moves {
    margin-bottom: 14px;
  }
  #mobile-switch-preview .msp-move {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 0; font-size: 13px; color: #e6edf3;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  #mobile-switch-preview .msp-btns {
    display: flex; gap: 10px;
  }
  #mobile-switch-preview .msp-confirm {
    flex: 1; background: var(--accent); color: #000;
    border: none; border-radius: 10px; padding: 13px;
    font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 17px;
    cursor: pointer; letter-spacing: 1px;
  }
  #mobile-switch-preview .msp-cancel {
    background: #1e2a52; color: #e6edf3;
    border: 1px solid #2d3a6a; border-radius: 10px; padding: 13px 18px;
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px;
    cursor: pointer;
  }
  #mobile-switch-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 999;
  }

  /* Animación de entrada desde Pokéball */
  @keyframes pokeballThrow {
    0%   { transform: scale(0.1) translateY(-30px); opacity:0.3; }
    40%  { transform: scale(1.2) translateY(0); opacity:1; }
    65%  { transform: scale(0.9); opacity:1; }
    82%  { transform: scale(1.06); }
    100% { transform: scale(1) translateY(0); opacity:1; }
  }
  .sprite-enter {
    animation: pokeballThrow .7s cubic-bezier(.2,.8,.3,1) forwards !important;
  }

  /* Iconos de categoría de movimiento */
  .cat-icon {
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:15px;border-radius:3px;font-size:9px;font-weight:800;
    flex-shrink:0;letter-spacing:.3px;
  }
  .cat-physical { background:#c8410a; color:#fff; }
  .cat-special  { background:#4a67c8; color:#fff; }
  .cat-status   { background:#6a6a8a; color:#fff; }

  /* Retirada a Pokéball */
  @keyframes recallAnim {
    0%   { transform:scale(1) translateY(0); opacity:1; }
    40%  { transform:scale(0.6) translateY(10px); opacity:0.7; }
    70%  { transform:scale(0.2) translateY(20px); opacity:0.3; }
    100% { transform:scale(0) translateY(25px); opacity:0; }
  }
  .sprite-recall { animation:recallAnim .5s ease-in forwards !important; }

  /* Precisión visible en móvil — la fila de barra de precisión */
  @media (max-width: 680px) {
    .move-pre-display { display: flex !important; }
  }
/* ── POKÉDEX ── */
#screen-pokedex{flex-direction:column;padding:0;background:var(--bg);}
.pdx-header{display:flex;align-items:center;gap:12px;padding:14px 20px 10px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;}
.pdx-back{display:flex;align-items:center;justify-content:center;width:46px;height:42px;background:linear-gradient(#5a6478,#3c4456);border:2px solid #7e8aa3;color:#fff;border-radius:11px;cursor:pointer;box-shadow:0 4px 0 #2a313f,0 5px 12px rgba(0,0,0,.4);transition:transform .1s,filter .1s,box-shadow .1s;}
.pdx-back svg{width:22px;height:22px;display:block;}
.pdx-back:hover{filter:brightness(1.1);}
.pdx-back:active{transform:translateY(3px);box-shadow:0 1px 0 #2a313f,0 2px 6px rgba(0,0,0,.4);}
.pdx-title{font-family:var(--game);font-size:1.1rem;color:var(--accent);flex:1;text-align:center;}
.pdx-count{font-size:.8rem;color:var(--muted);white-space:nowrap;}

.pdx-filters{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:49px;z-index:9;}
.pdx-search-wrap{display:flex;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:0 10px;gap:6px;flex:1;min-width:140px;}
.pdx-search-icon{font-size:.9rem;color:var(--muted);}
.pdx-search{background:transparent;border:none;outline:none;color:var(--text);font-size:.85rem;padding:7px 0;width:100%;font-family:var(--body);}
.pdx-select{background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.82rem;padding:7px 10px;cursor:pointer;outline:none;font-family:var(--body);flex:1;min-width:140px;}
.pdx-select:focus{border-color:var(--accent);}
.pdx-reset{background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:.82rem;padding:7px 12px;cursor:pointer;transition:.15s;}
.pdx-reset:hover{border-color:var(--accent2);color:var(--accent2);}

.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:12px;}

.pdx-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 8px 8px;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;}
.pdx-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 4px 20px rgba(245,166,35,.15);}
.pdx-card-sprite{width:64px;height:64px;image-rendering:pixelated;}
.pdx-card-num{position:absolute;top:6px;right:8px;z-index:3;font-family:var(--game);font-size:8px;font-weight:700;color:var(--muted);letter-spacing:.5px;}
.pdx-card-name{font-family:var(--game);font-size:.58rem;color:var(--text);text-align:center;text-transform:uppercase;letter-spacing:.5px;}
.pdx-card-types{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;}
.pdx-card-bst{font-size:.65rem;color:var(--muted);}
.pdx-card-rol{font-size:.56rem;color:var(--muted);text-align:center;font-style:italic;}
.pdx-no-results{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 20px;font-size:.9rem;}

/* Type badges */
.type-badge{font-size:.6rem;padding:2px 7px;border-radius:20px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;}
.tb-bug{background:#7bc67e;color:#000;}
.tb-dark{background:#595761;}
.tb-dragon{background:#4f60e2;}
.tb-electric{background:#f4d03f;color:#000;}
.tb-fairy{background:#e685b5;}
.tb-fighting{background:#c03028;}
.tb-fire{background:#f08030;}
.tb-flying{background:#90a8c8;color:#000;}
.tb-ghost{background:#705898;}
.tb-grass{background:#78c850;}
.tb-ground{background:#e0c068;color:#000;}
.tb-ice{background:#98d8d8;color:#000;}
.tb-normal{background:#a8a878;color:#000;}
.tb-poison{background:#a040a0;}
.tb-psychic{background:#f85888;}
.tb-rock{background:#b8a038;color:#000;}
.tb-steel{background:#b8b8d0;color:#000;}
.tb-water{background:#6890f0;}

/* Modal */
.pdx-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;align-items:center;justify-content:center;padding:20px;}
.pdx-modal.open{display:flex;}
.pdx-modal-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 16px;width:100%;max-width:500px;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 18px 60px rgba(0,0,0,.55);}
.pdx-modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border);color:var(--text);font-size:17px;cursor:pointer;line-height:1;transition:.15s;}
.pdx-modal-close:hover{background:var(--accent2);border-color:var(--accent2);color:#fff;}
.pdx-modal-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.pdx-modal-sprite{width:80px;height:80px;image-rendering:pixelated;}
.pdx-modal-info{flex:1;}
.pdx-modal-name{font-family:var(--game);font-size:.85rem;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.pdx-modal-types{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px;}
.pdx-form-select-wrap{display:inline-flex;align-items:center;gap:5px;margin:4px 0 6px;padding:3px 8px 3px 10px;border-radius:8px;background:var(--surface2,#1a2238);border:1px solid var(--border,#2a3550);transition:all .15s;}
.pdx-form-select-wrap:hover{border-color:#8fa0ff;box-shadow:0 0 12px -3px rgba(143,160,255,.55);}
.pdx-form-select-ico{color:#b9c4ff;font-weight:700;font-size:.85rem;}
.pdx-form-select{background:transparent;border:none;color:#cdd6ff;cursor:pointer;font-family:var(--game,'Rajdhani');font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;outline:none;}
.pdx-form-select option{background:var(--surface,#161d31);color:#e8eef7;text-transform:none;}
.pdx-modal-ability{font-size:.72rem;color:var(--muted);}
.pdx-modal-rol{font-size:.72rem;color:var(--muted);font-style:normal;font-weight:600;margin-top:3px;}
.pdx-modal-rol b{color:var(--accent);font-weight:800;}
.pdx-modal-shiny{
  display:inline-flex; align-items:center; gap:4px; margin:4px 0 2px;
  padding:3px 9px; border-radius:999px; cursor:pointer;
  font-family:var(--game,inherit); font-weight:800; font-size:.66rem; letter-spacing:.4px;
  background:rgba(10,15,30,.6); border:1px solid #3a4566; color:#8a96ad; transition:all .12s;
}
.pdx-modal-shiny:hover{ border-color:#3ff5d4; color:#3ff5d4; }
.pdx-modal-shiny.on{ background:linear-gradient(160deg,#3ff5d4,#1f9d88); color:#06231f; border-color:#3ff5d4; box-shadow:0 0 8px rgba(63,245,212,.6); }
.pdx-modal-sprite-shiny{ filter:drop-shadow(0 0 8px rgba(63,245,212,.55)); }

/* ── Rotom Dex: pantalla con la descripción oficial ── */
.pdx-rotom{margin:14px 0 4px;cursor:help;}
.pdx-rotom-screen{
  position:relative;border-radius:14px;padding:14px 16px 13px;
  background:linear-gradient(160deg,#15243a 0%,#0c1626 100%);
  border:2px solid #2d3a6a;
  box-shadow:inset 0 0 0 2px rgba(245,166,35,.08), inset 0 2px 18px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.3);
  overflow:hidden;
}
/* scanlines sutiles */
.pdx-rotom-screen::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.18) 2px 3px);
}
/* brillo de barrido */
.pdx-rotom-screen::after{
  content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(120,180,255,.06),transparent);
  animation:pdxRotomSweep 5.5s linear infinite;
}
@keyframes pdxRotomSweep{0%{left:-40%;}60%,100%{left:130%;}}
.pdx-rotom-led{
  position:absolute;top:11px;right:13px;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#7fd4ff,#1e6fae);
  box-shadow:0 0 8px rgba(120,200,255,.8);animation:pdxRotomBlink 2.4s ease-in-out infinite;
}
@keyframes pdxRotomBlink{0%,100%{opacity:1;}50%{opacity:.45;}}
.pdx-rotom-label{
  font-family:var(--pixel);font-size:7px;color:var(--accent);letter-spacing:1px;
  margin-bottom:7px;opacity:.85;
}
.pdx-rotom-text{
  font-family:var(--body);font-size:.82rem;line-height:1.5;color:#cfe2ff;position:relative;z-index:1;
}
@media (hover:hover){
  /* En escritorio: el texto se atenúa y se revela al pasar el ratón */
  .pdx-rotom-text{max-height:2.95em;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);
            mask-image:linear-gradient(to bottom,#000 60%,transparent);
    transition:max-height .35s ease;}
  .pdx-rotom:hover .pdx-rotom-text{max-height:20em;
    -webkit-mask-image:none;mask-image:none;}
}

/* ── Cadena evolutiva (estilo WikiDex) ── */
.pdx-evo-title{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:16px 0 10px;}
.pdx-evo-chain{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 10px;}
.pdx-evo-chain.branched{flex-direction:row;align-items:center;}
.pdx-evo-node{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  padding:4px 6px;border-radius:9px;transition:background .15s,transform .15s;min-width:64px;}
.pdx-evo-node:hover{background:var(--surface2);transform:translateY(-2px);}
.pdx-evo-sprite{width:58px;height:58px;image-rendering:pixelated;}
.pdx-evo-name{font-family:var(--game);font-size:.62rem;color:var(--text);text-transform:capitalize;letter-spacing:.3px;text-align:center;}
.pdx-evo-arrow{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:74px;}
.pdx-evo-method{font-family:var(--body);font-size:.6rem;color:var(--accent);text-align:center;line-height:1.15;}
.pdx-evo-tri{color:var(--muted);font-size:.85rem;line-height:1;}
.pdx-evo-branches{display:flex;flex-direction:column;gap:8px;}
.pdx-evo-branch-row{display:flex;align-items:center;gap:4px;}
.pdx-evo-branch-base{display:flex;align-items:center;}
.pdx-modal-test{display:block;width:100%;margin-top:18px;padding:13px 16px;border:none;border-radius:10px;background:var(--accent2);color:#fff;font-family:var(--game);font-size:.8rem;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:filter .15s,transform .1s;box-shadow:0 4px 14px rgba(0,0,0,.35);}
.pdx-modal-test:hover{filter:brightness(1.12);}
.pdx-modal-test:active{transform:translateY(1px);}
.pdx-stats-title{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:12px 0 8px;}
.pdx-stat-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.pdx-stat-label{font-size:.65rem;color:var(--muted);width:80px;text-align:right;flex-shrink:0;}
.pdx-stat-val{font-size:.72rem;color:var(--text);width:28px;text-align:right;flex-shrink:0;}
.pdx-stat-bar-wrap{flex:1;background:var(--bg);border-radius:4px;height:7px;overflow:hidden;}
.pdx-stat-bar{height:100%;border-radius:4px;transition:width .4s;}
.pdx-moves-title{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:16px 0 10px;display:flex;align-items:center;gap:8px;}
.pdx-moves-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px;}
@media (max-width:540px){.pdx-moves-list{grid-template-columns:1fr;}}

@media(max-width:400px){
  .pdx-title{font-size:.9rem;}
  .pdx-grid{grid-template-columns:repeat(2,1fr);gap:8px;padding:10px;}
  .pdx-filters{top:47px;}
  .pdx-header{padding:10px 12px 8px;}
}

/* ═══════════════════════════════════════════════════════
   SISTEMA DE CLIMAS — VISUAL
   ═══════════════════════════════════════════════════════ */

/* ── Banner de clima ── */
#weather-banner {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 8px;
  border-radius: 20px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  pointer-events: none;
  animation: weather-banner-in 0.4s cubic-bezier(.34,1.56,.64,1) both;
  white-space: nowrap;
}
@keyframes weather-banner-in {
  from { opacity:0; transform: translateX(-50%) translateY(-8px) scale(.88); }
  to   { opacity:1; transform: translateX(-50%) translateY(0)    scale(1); }
}

.weather-banner-sun  { background: rgba(255,140,0,.88);  color: #fff3d0; border: 1px solid rgba(255,200,60,.6); box-shadow: 0 2px 12px rgba(255,140,0,.4); }
.weather-banner-rain { background: rgba(20,80,200,.82);  color: #d0e8ff; border: 1px solid rgba(80,150,255,.5); box-shadow: 0 2px 12px rgba(20,80,200,.4); }
.weather-banner-sand { background: rgba(160,100,20,.88); color: #fff0c8; border: 1px solid rgba(200,140,50,.5); box-shadow: 0 2px 12px rgba(160,100,20,.4); }
.weather-banner-hail { background: rgba(100,170,240,.82); color: #e8f6ff; border: 1px solid rgba(180,220,255,.6); box-shadow: 0 2px 12px rgba(100,170,240,.4); }

.weather-banner-icon { font-size: 14px; }
.weather-banner-text { font-size: 11px; }
/* s637 · Contador de turnos restantes del clima, junto al icono. */
.weather-banner { cursor: help; }
.weather-banner-turns { font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 12px; line-height: 1;
  min-width: 15px; height: 15px; padding: 0 3px; margin-left: 4px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 8px; background: rgba(0,0,0,.35); color: inherit; }
.weather-banner-turns:empty { display: none; }

/* s721 · Banner de ESPACIO RARO (Trick Room), estilo violeta. Se coloca una
   fila por debajo del clima para que no se solapen si coinciden. */
#trickroom-banner {
  position: absolute; top: 42px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 20px;
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; pointer-events: none; white-space: nowrap;
  background: rgba(120,60,190,.9); color: #f0e0ff; border: 1px solid rgba(190,130,255,.6);
  box-shadow: 0 2px 12px rgba(120,60,190,.45);
  animation: weather-banner-in 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
#trickroom-banner .weather-banner-icon { animation: trickroom-spin 3s linear infinite; }
@keyframes trickroom-spin { to { transform: rotate(360deg); } }

/* ── Tinte del campo según clima ── */
.battle-field.weather-sun::before  { background: linear-gradient(180deg, rgba(255,150,0,.24) 0%, rgba(0,0,0,.22) 100%) !important; }
.battle-field.weather-rain::before { background: linear-gradient(180deg, rgba(10,50,180,.26) 0%, rgba(0,0,0,.34) 100%) !important; }
.battle-field.weather-sand::before { background: linear-gradient(180deg, rgba(160,100,20,.30) 0%, rgba(0,0,0,.34) 100%) !important; }
.battle-field.weather-hail::before { background: linear-gradient(180deg, rgba(130,200,255,.22) 0%, rgba(0,0,0,.28) 100%) !important; }

/* ── Contenedor de partículas ── */
.weather-particles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

/* ── BASE partícula ── */
.wp-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* ── LLUVIA: líneas finas diagonales cayendo ── */
.wp-rain {
  width: 2px;
  height: 24px;
  border-radius: 1px;
  background: linear-gradient(to bottom, rgba(150,205,255,0), rgba(170,215,255,.95));
  box-shadow: 0 0 3px rgba(150,205,255,.5);
  top: -28px;
  animation: rain-fall linear infinite;
}
@keyframes rain-fall {
  0%   { transform: translateY(0)   translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(360px) translateX(34px); opacity: 0; }
}

/* ── ARENA: partículas pequeñas moviéndose en diagonal ── */
.wp-sand {
  width: 4px;
  height: 4px;
  background: rgba(214,166,78,.9);
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(214,166,78,.6);
  top: 0;
  animation: sand-drift linear infinite;
}
@keyframes sand-drift {
  0%   { transform: translate(-10px, -5px); opacity:0; }
  15%  { opacity:1; }
  85%  { opacity:.8; }
  100% { transform: translate(95px, 360px); opacity:0; }
}

/* ── GRANIZO: hexágonos/puntos blancos cayendo con rebote ── */
.wp-hail {
  width: 7px;
  height: 7px;
  background: rgba(230,245,255,.95);
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(180,220,255,.85);
  top: -8px;
  animation: hail-fall linear infinite;
}
@keyframes hail-fall {
  0%   { transform: translateY(0) rotate(0deg);   opacity:0; }
  8%   { opacity:1; }
  90%  { opacity:1; }
  95%  { transform: translateY(340px) rotate(180deg); opacity:.9; }
  100% { transform: translateY(360px) rotate(200deg); opacity:0; }
}

/* ── SOL: destellos / rayos de luz ── */
.wp-sun {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,90,.6) 0%, rgba(255,180,0,.0) 70%);
  animation: sun-pulse ease-in-out infinite alternate;
}
@keyframes sun-pulse {
  0%   { opacity:0; transform:scale(.6); }
  50%  { opacity:.9; transform:scale(1.3); }
  100% { opacity:0; transform:scale(.85); }
}

/* ═══════════════════════════════════════════════════════
   TOOLTIPS DE POKÉDEX (hover en tarjeta, movimiento, habilidad)
   ═══════════════════════════════════════════════════════ */

/* ── Tooltip de tarjeta ── */
#pdx-card-tooltip {
  display: none;
  position: absolute;
  z-index: 9999;
  background: #0d1117;
  border: 1px solid #3a4a7a;
  border-radius: 10px;
  padding: 10px 12px;
  width: 230px;
  max-height: 480px;
  overflow-y: auto;
  pointer-events: none;
  box-shadow: 0 6px 24px rgba(0,0,0,.8);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #e0e0e0;
}
/* Tooltip de configuración (objeto/habilidad/ataques) en equipos guardados */
.tb-set-tooltip {
  display: none;
  position: fixed;
  z-index: 10000;
  min-width: 168px;
  max-width: 230px;
  background: linear-gradient(160deg, #131c30, #0c1322);
  border: 1px solid rgba(245,166,35,.55);
  border-radius: 10px;
  padding: 9px 11px;
  pointer-events: none;
  box-shadow: 0 0 18px -3px rgba(245,166,35,.45), 0 8px 26px rgba(0,0,0,.7);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #e8eef7;
}
.tb-tt-head {
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: .4px; color: #ffd98a; margin-bottom: 6px;
  border-bottom: 1px solid rgba(245,166,35,.25); padding-bottom: 4px;
}
.tb-tt-shiny { color: #3ff5d4; text-shadow: 0 0 6px rgba(63,245,212,.8); }
.tb-tt-row { display: flex; align-items: baseline; gap: 6px; margin: 3px 0; }
.tb-tt-row.tb-tt-moves { flex-direction: column; gap: 2px; align-items: stretch; margin-top: 5px; }
.tb-tt-tag {
  font-size: 9px; text-transform: uppercase; letter-spacing: .6px;
  color: #8a96ad; flex: 0 0 auto; min-width: 56px;
}
.tb-tt-row b { color: #e8eef7; font-weight: 700; }
.tb-tt-moves ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.tb-tt-moves li {
  font-size: 10.5px; color: #cfe0f5; padding: 2px 5px;
  background: rgba(255,255,255,.05); border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-tt-moves li.tb-tt-none { grid-column: 1 / -1; color: #6b7894; background: none; }
.tb-team-mini-wrap { cursor: help; }
.pct-header { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.pct-sprite { width: 52px; height: 52px; image-rendering: pixelated; flex-shrink: 0; }
.pct-name   { font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; text-transform: capitalize; }
.pct-types  { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.pct-ability { font-size: 10px; color: #aab; margin-top: 3px; }
.pct-rol    { font-size: 10px; color: var(--muted, #7d8590); margin-top: 1px; }
.pct-stat-row { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.pct-stat-label { font-size: 9px; width: 52px; color: #888; text-align: right; flex-shrink: 0; }
.pct-stat-val   { font-size: 10px; font-weight: 700; width: 24px; text-align: right; flex-shrink: 0; }
.pct-bar-bg  { flex: 1; height: 5px; background: #1e2a3a; border-radius: 3px; overflow: hidden; }
.pct-bar-fill { height: 100%; border-radius: 3px; transition: width .2s; }

/* ── Tooltip genérico (movimiento / habilidad) ── */
.pdx-generic-tooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  max-width: 260px;
  background: #0d1117;
  border: 1px solid #3a4a7a;
  border-radius: 8px;
  padding: 7px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #dde;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 6px 24px rgba(0,0,0,.8);
}

/* ── Botón ℹ de habilidad en modal Pokédex ── */
.ability-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  background: rgba(100,150,255,.2);
  border: 1px solid rgba(100,150,255,.4);
  border-radius: 50%;
  font-size: 10px;
  cursor: help;
  color: #88aaff;
  vertical-align: middle;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

/* ── Tags de movimiento mejorados en Pokédex ── */
.pdx-move-tag {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icons name" "icons stats";
  align-items: center;
  column-gap: 9px;
  row-gap: 1px;
  background: color-mix(in srgb, var(--mt, #888) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--mt, #888) 35%, transparent);
  border-left: 4px solid var(--mt, #888);
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 12px;
  margin: 0;
  min-width: 0;
  cursor: help;
  transition: background .15s, transform .1s;
}
.pdx-move-tag:hover { background: color-mix(in srgb, var(--mt, #888) 20%, var(--surface)); transform: translateY(-1px); }
.pdx-move-icons { grid-area: icons; display:inline-flex; align-items:center; gap:4px; }
.pdx-move-name { grid-area: name; font-weight: 700; color: var(--text); font-size: 12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdx-move-stats { grid-area: stats; display:inline-flex; gap:10px; }
.pdx-move-stat { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space:nowrap; }
.pdx-move-stat b { color: color-mix(in srgb, var(--mt, #888) 75%, var(--text)); font-weight:800; font-size:9px; letter-spacing:.5px; margin-right:2px; }

/* ── Botón tabla de tipos junto a Pokéballs ── */
.type-chart-btn {
  background: rgba(100,150,255,.15);
  border: 1px solid rgba(100,150,255,.35);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  padding: 2px 5px;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
  transition: background .15s;
  line-height: 1.4;
}
.type-chart-btn:hover { background: rgba(100,150,255,.3); }

/* Botón de ritmo (fluido/pausado) — icono SVG a la derecha del de tipos */
.flow-toggle-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:26px;margin-left:5px;padding:0;
  background:rgba(100,150,255,.15);
  border:1px solid rgba(100,150,255,.35);
  border-radius:6px;color:#cdd6e6;cursor:pointer;
  vertical-align:middle;transition:all .15s;
}
.flow-toggle-icon:hover{ background:rgba(100,150,255,.3); color:#fff; }
.flow-toggle-icon.on{ color:#7ee787; border-color:rgba(126,231,135,.45); background:rgba(126,231,135,.14); }
.flow-toggle-icon svg{ display:block; }
/* Botón de SONIDO (reusa .flow-toggle-icon): estado silenciado en rojo apagado */
.audio-toggle-btn svg{ display:block; width:18px; height:18px; }
.audio-toggle-btn.muted{ color:#ff8a7a; border-color:rgba(255,120,100,.4); background:rgba(255,90,77,.12); }
.audio-toggle-btn.muted:hover{ background:rgba(255,90,77,.22); color:#ffb3a8; }

/* ═══════════════════════════════════════════════════════
   TABLA DE TIPOS — OVERLAY
   ═══════════════════════════════════════════════════════ */
.type-chart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 8000;
  background: rgba(0,0,0,.8);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.type-chart-modal {
  background: #0d1117;
  border: 1px solid #2d3a6a;
  border-radius: 16px;
  width: min(1100px, 96vw);
  max-width: 96vw;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 60px rgba(0,0,0,.9);
}
.type-chart-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 12px;
  border-bottom: 1px solid #1e2a4a;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}
.type-chart-close {
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
  transition:.15s;
}
.type-chart-close:hover { background: var(--accent2); border-color:var(--accent2); color: #fff; }
.type-chart-scroll {
  overflow: auto;
  flex: 1;
}
.type-chart-table {
  border-collapse: collapse;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  white-space: nowrap;
  width: 100%;
}
.tc-corner {
  background: #0d1117;
  padding: 8px 10px;
  color: #777;
  font-size: 13px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
}
.tc-th {
  padding: 9px 8px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  font-size: 15px;
  min-width: 48px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid #0d1117;
}
.tc-row-label {
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  font-size: 15px;
  padding: 7px 10px;
  text-align: center;
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid #0d1117;
}
.tc-cell {
  text-align: center;
  padding: 7px 6px;
  font-weight: 700;
  font-size: 15px;
  min-width: 44px;
  border: 1px solid rgba(255,255,255,.04);
}
.tc-normal { background: #141a26; color: #3a4a6a; }
.tc-super  { background: rgba(76,218,100,.18); color: #4cda64; }
.tc-notvery { background: rgba(255,80,80,.14); color: #ff7060; }
.tc-immune { background: rgba(100,100,100,.2); color: #777; }
.type-chart-legend {
  padding: 12px 20px;
  font-size: 14px;
  color: #888;
  border-top: 1px solid #1e2a4a;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}
.type-chart-legend .tc-super   { background: none; }
.type-chart-legend .tc-notvery { background: none; }
.type-chart-legend .tc-immune  { background: none; }

/* ── Custom type picker (reemplaza el select de tipos en Pokédex) ── */
.pdx-type-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pdx-type-display {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  min-width: 130px;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  user-select: none;
  height: 32px;
  box-sizing: border-box;
}
.pdx-type-display:hover { border-color: var(--accent); }
.pdx-type-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 9999;
  background: #0d1117;
  border: 1px solid #2d3a6a;
  border-radius: 8px;
  padding: 4px;
  min-width: 150px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.8);
}
.pdx-type-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  transition: background .1s;
}
.pdx-type-option:hover { background: rgba(255,255,255,.08); }

/* ── PANEL DE DEPURACIÓN (modo TEST) ── */
#debug-panel{
  position:absolute;
  top:8px;
  left:8px;
  z-index:30;
  display:none;
  flex-direction:column;
  gap:6px;
  pointer-events:auto;
}
.debug-btn{
  font-family:'Rajdhani',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:.5px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(20,24,34,.78);
  color:#cfd6e4;
  cursor:pointer;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;
}
.debug-btn:hover{ background:rgba(30,36,50,.9); }
.debug-btn.debug-on{
  background:#2e7d32;
  color:#fff;
  border-color:#43c04a;
  box-shadow:0 0 10px rgba(67,192,74,.5);
}

/* ═══════════════════════════════════════════════════════
   JOYA DE LA CORONA — CORRECCIONES MÓVIL (Chrome + Safari)
   Bloque añadido al final para sobrescribir con prioridad.
   ═══════════════════════════════════════════════════════ */

/* ── 1. Base: alturas reales en Safari iOS y sin tap highlight azul ── */
:root{
  /* Fallback para navegadores sin dvh; se sobreescribe vía JS con --vh */
  --app-h: 100vh;
}
@supports (height: 100dvh){
  :root{ --app-h: 100dvh; }
}

html{
  -webkit-text-size-adjust: 100%;   /* Safari no reescala texto al rotar */
  text-size-adjust: 100%;
}

*{
  -webkit-tap-highlight-color: transparent;  /* quita el flash azul al tocar en iOS */
}

/* Permitir selección de texto solo donde tiene sentido (log e inputs) */
.battle-log, input, textarea{
  -webkit-user-select: text;
  user-select: text;
}

/* Botones y zonas interactivas: sin selección accidental al hacer tap-hold */
button, .poke-card, .pdx-card, .move-btn, .switch-btn, .btn-icon,
.mini-poke, .action-tab, .draft-confirm-btn{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;       /* sin menú contextual de iOS al mantener pulsado */
  touch-action: manipulation;        /* elimina el delay de 300ms y el doble-tap-zoom */
}

/* ── 2. Inputs: font-size >= 16px para que Safari NO haga zoom al enfocar ── */
@media (max-width: 680px){
  input, select, textarea, .pdx-search, .pdx-select{
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   3. SAFE-AREA + ALTURA REAL EN MÓVIL
   ═══════════════════════════════════════════════════════ */
@media (max-width: 680px){

  /* Usar la variable --app-h (dvh / JS) en lugar de 100vh fijo, que en
     Safari incluye la barra de direcciones y descuadra el layout */
  body{
    height: var(--app-h) !important;
    max-height: var(--app-h) !important;
    overscroll-behavior: none;            /* sin "rebote" elástico que descubre fondo blanco */
  }
  .screen.active{
    height: var(--app-h) !important;
    max-height: var(--app-h) !important;
    /* Todas las pantallas respetan el notch / Dynamic Island arriba, para que
       el botón de atrás y las cabeceras no queden ocultos. Solo móvil. */
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  /* La pantalla de batalla gestiona su propio padding (abajo) y no debe llevar
     doble padding-top: lo dejamos con el suyo. */
  #screen-battle.active{ padding-top: env(safe-area-inset-top, 0px) !important; }

  /* La pantalla de batalla respeta el notch (arriba) y la barra de gestos (abajo) */
  #screen-battle{
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  /* La botonera de batalla nunca queda bajo la barra inferior de Safari */
  #screen-battle .botonera{
    padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  }

  /* Inicio y resultado: respetar safe-areas laterales/inferiores */
  #screen-start, #screen-result{
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }
  /* Logo e inicio: la pokéball más pequeña y el bloque alineado a la izquierda,
     dejando la esquina superior derecha para el desplegable de usuario (que es
     fixed). Así no se tapan. Solo móvil. */
  #screen-start .pokeball-float{ width: 62px !important; height: 62px !important; margin: 0 auto 4px !important; }
  #screen-start .pokeball-float svg{ width: 62px !important; height: 62px !important; }
  #screen-start .start-logo{ padding-top: calc(env(safe-area-inset-top, 0px) + 54px); }
  #screen-start .start-logo h1{ font-size: clamp(28px, 8vw, 44px) !important; }
}

/* ═══════════════════════════════════════════════════════
   4. POKÉDEX MÓVIL — barra de filtros usable
   ═══════════════════════════════════════════════════════ */
@media (max-width: 680px){
  /* El contenedor de la Pokédex respeta el notch arriba para que el header
     no quede cortado bajo la barra de estado del iPhone. */
  #screen-pokedex.active{
    padding-top: env(safe-area-inset-top) !important;
    box-sizing: border-box !important;
  }
  /* Header sticky: se ancla en top:0 dentro del área ya segura. */
  .pdx-header{
    padding-top: 12px !important;
    gap: 8px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 12 !important;
  }
  .pdx-title{ font-size: 1rem !important; }

  /* Filtros: scroll vertical propio si hay muchos, sin empujar el grid fuera */
  .pdx-filters{
    gap: 7px !important;
    padding: 10px 12px !important;
    position: static !important;
  }
  /* Buscador ocupa toda la fila; selects a 2 por fila */
  .pdx-search-wrap{
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .pdx-select{
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }
  .pdx-reset{
    flex: 1 1 100% !important;
    text-align: center;
    padding: 9px 12px !important;
  }

  /* Grid: 2 columnas cómodas, tarjetas con mejor área táctil */
  .pdx-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  .pdx-card{ padding: 12px 8px 10px !important; }
  .pdx-card-sprite{ width: 72px !important; height: 72px !important; }
  .pdx-card-name{ font-size: .62rem !important; }

  /* Modal Pokédex: ocupa bien el alto disponible respetando safe-areas */
  .pdx-modal{
    padding: 16px !important;
    padding-top: calc(16px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    align-items: flex-start !important;
  }
  .pdx-modal-box{
    max-height: calc(var(--app-h) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════
   5. DRAFT MÓVIL — picks y grid con mejor tacto y safe-area
   ═══════════════════════════════════════════════════════ */
@media (max-width: 680px){
  .game-header{
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
  }
  /* El padding-bottom inline (110px) del contenedor de picks es excesivo
     en móvil porque el footer ya no es sticky-flotante; lo reducimos */
  #player-slots{ padding-bottom: 4px !important; }

  /* Botonera del draft respeta barra inferior de Safari */
  #screen-draft .botonera{
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  /* Tarjetas del pool: área de toque mínima cómoda */
  .poke-card{ min-height: 110px !important; }
}

/* ═══════════════════════════════════════════════════════
   6. BATALLA MÓVIL — ajustes finos de legibilidad
   ═══════════════════════════════════════════════════════ */
@media (max-width: 680px){
  /* Tabs de acción: área táctil mínima de 44px (recomendación Apple) */
  .action-tab{ padding: 12px 10px !important; font-size: 14px !important; min-height: 44px; }
  /* Botones de movimiento: altura cómoda para el dedo */
  .move-btn{ min-height: 92px !important; }
  /* Iconos inferiores: área táctil >= 44px */
  .btn-icon{ min-width: 48px !important; height: 44px !important; }
}

/* ── 7. Landscape en móvil (teléfono tumbado): layout lateral tipo app ──
   El campo de batalla pasa a la IZQUIERDA y los controles (ataques + log)
   a la DERECHA, en lugar de apilarse. Así aprovecha el ancho y todo entra
   en la poca altura disponible sin scroll. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px){

  #screen-battle.active{
    height: 100dvh !important;
    height: -webkit-fill-available !important;
    padding: 0 !important;
  }

  /* La arena se vuelve fila: campo | controles */
  .battle-arena{
    flex-direction: row !important;
    width: 100% !important;
    height: 100dvh !important;
    height: -webkit-fill-available !important;
    border-radius: 0 !important;
    border: none !important;
    align-items: stretch !important;
  }

  /* Campo: mitad izquierda, alto completo */
  .battle-field{
    flex: 1 1 50% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-right: 2px solid #2d3a6a !important;
  }

  /* Bloque inferior pasa a ser la columna derecha; ataques arriba, log abajo */
  .battle-bottom{
    flex: 1 1 50% !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    border-top: none !important;
  }

  /* Panel de ataques ocupa la mayor parte; log una franja inferior */
  .action-panel{
    flex: 1 1 auto !important;
    border-right: none !important;
    border-bottom: 1px solid #2d3a6a !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  .battle-log{
    flex: 0 0 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    border-left: none !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Botones de ataque más compactos para que entren 4 sin scroll */
  .move-btn{ min-height: 64px !important; }
  .mbn{ font-size: 15px !important; padding: 6px 6px 1px 10px !important; }
  .mbp{ padding: 2px 8px 6px 10px !important; }
  .mstat-box{ min-width: 50px !important; padding: 3px 7px 4px !important; }
  .mstat-val{ font-size: 15px !important; }

  /* HUDs un poco más arriba para no chocar con el banner */
  .field-banner{ font-size: 15px !important; bottom: 9% !important; max-width: 80% !important; }
}

/* ── 8. Reset de apariencia nativa de inputs/selects en Safari iOS ── */
.pdx-search, .pdx-select, input[type="text"]{
  -webkit-appearance: none;
  appearance: none;
  border-radius: 8px;                 /* Safari fuerza redondeo propio sin esto */
}
/* La flecha del select desaparece con appearance:none; la redibujamos */
.pdx-select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237d8590' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* ═══════════════════════════════════════════════════════
   SELECTOR DE GENERACIÓN (Partida Random)
   ═══════════════════════════════════════════════════════ */
#screen-genselect{
  flex-direction:column;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(245,166,35,.10) 0%, transparent 55%),
    var(--bg);
  padding:0;
}

.gensel-header{
  display:flex;align-items:center;gap:12px;
  padding:calc(16px + env(safe-area-inset-top)) 20px 14px;
  flex-shrink:0;
}
.gensel-back{flex-shrink:0;}
.gensel-titles{flex:1;text-align:center;}
.gensel-title{
  font-family:var(--game);font-weight:700;
  font-size:clamp(20px,4.4vw,30px);
  letter-spacing:2px;color:var(--text);line-height:1.1;
}
.gensel-sub{
  font-family:var(--body);font-size:.82rem;color:var(--muted);
  margin-top:3px;letter-spacing:.3px;
}

.gensel-scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px 18px calc(28px + env(safe-area-inset-bottom));
}

.gensel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:14px;
  max-width:920px;margin:0 auto;
}

/* ── Tarjeta de generación ── */
.gensel-card{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:150px;
  padding:14px 14px 12px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 40%),
    var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  cursor:pointer;
  overflow:hidden;
  text-align:left;
  transition:transform .18s cubic-bezier(.34,1.4,.5,1),
             border-color .18s, box-shadow .18s, background .18s;
  isolation:isolate;
}
.gensel-card:hover,
.gensel-card:focus-visible{
  transform:translateY(-5px);
  border-color:var(--gen-accent);
  box-shadow:0 12px 32px rgba(0,0,0,.5),
             0 0 0 1px var(--gen-accent) inset;
  outline:none;
}
.gensel-card:active{ transform:translateY(-2px) scale(.985); }

/* Resplandor de color que asoma desde una esquina */
.gensel-card-glow{
  position:absolute;
  top:-40%;right:-30%;
  width:160px;height:160px;
  background:radial-gradient(circle, var(--gen-accent) 0%, transparent 68%);
  opacity:.16;
  z-index:-1;
  transition:opacity .2s, transform .35s ease;
  pointer-events:none;
}
.gensel-card:hover .gensel-card-glow{ opacity:.32; transform:scale(1.25); }

/* ── Botonera de resultado (Random): 3 botones glow ── */
.result-actions{ display:flex; flex-direction:column; gap:13px; align-items:center; width:100%; }
.result-glow-btn{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:300px; max-width:90vw; padding:14px 18px; cursor:pointer;
  font-family:'Rajdhani',sans-serif; color:var(--text);
  background:var(--surface2); border:1.5px solid var(--glow-col,var(--accent));
  border-radius:13px; transition:transform .15s, box-shadow .2s, background .2s;
}
.result-glow-btn::before{
  content:''; position:absolute; top:-60%; left:50%; transform:translateX(-50%);
  width:220px; height:160px; pointer-events:none; z-index:0;
  background:radial-gradient(circle, var(--glow-col,var(--accent)) 0%, transparent 66%);
  opacity:.18; transition:opacity .22s, transform .35s ease;
}
.result-glow-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px -4px var(--glow-col,var(--accent)); }
.result-glow-btn:hover::before{ opacity:.36; transform:translateX(-50%) scale(1.2); }
.result-glow-btn:active{ transform:translateY(0); }
.result-glow-btn > *{ position:relative; z-index:1; }
.rgb-ico{ font-size:1.5rem; line-height:1; margin-bottom:2px; }
.rgb-lbl{ font-weight:700; font-size:1.05rem; letter-spacing:1px; }
.rgb-sub{ font-family:'Inter',sans-serif; font-size:.72rem; color:var(--muted); letter-spacing:.2px; }
.result-glow-same{ --glow-col:#4cda64; }
.result-glow-new{  --glow-col:#f5a623; }
.result-glow-gen{  --glow-col:#5b8def; }
.result-glow-home{ --glow-col:#9aa6b2; }

/* Botón de footer "mismo equipo" (random) con un toque verde */
.nav-random-same{ color:#4cda64; }
.nav-random-same:hover{ box-shadow:0 0 10px -2px rgba(76,218,100,.7); }

.gensel-card-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  position:relative;z-index:1;
}
.gensel-card-label{
  font-family:var(--game);font-weight:700;
  font-size:1.18rem;letter-spacing:1.5px;
  color:var(--gen-accent);
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.gensel-card-count{
  font-family:var(--body);font-weight:800;font-size:.92rem;
  color:var(--text);text-align:right;line-height:1.05;white-space:nowrap;
}
.gensel-card-count-lbl{
  display:block;font-weight:600;font-size:.58rem;
  color:var(--muted);letter-spacing:.5px;text-transform:uppercase;
}

/* Mascota legendaria de la generación */
.gensel-card-img{
  position:absolute;
  right:-14px;bottom:6px;
  width:96px;height:96px;
  object-fit:contain;
  image-rendering:auto;
  opacity:.92;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));
  transition:transform .3s ease, opacity .2s;
  z-index:0;pointer-events:none;
}
.gensel-card:hover .gensel-card-img{ transform:scale(1.1) rotate(-3deg); opacity:1; }

.gensel-card-bottom{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:1px;
  max-width:62%;
}
.gensel-card-region{
  font-family:var(--game);font-weight:600;font-size:.92rem;
  color:var(--text);letter-spacing:.5px;
}
.gensel-card-years{
  font-family:var(--body);font-size:.7rem;color:var(--muted);letter-spacing:.5px;
}

/* La tarjeta TODAS ocupa el ancho completo y destaca */
.gensel-card-all{
  grid-column:1 / -1;
  min-height:120px;
  background:
    linear-gradient(135deg, rgba(245,166,35,.16) 0%, rgba(245,166,35,.02) 45%),
    var(--surface);
  border-color:rgba(245,166,35,.4);
}
.gensel-card-all .gensel-card-label{ font-size:1.5rem; }
.gensel-card-all .gensel-card-img{ width:120px;height:120px;bottom:-6px;right:8px; }
.gensel-card-all .gensel-card-region{ font-size:1.05rem; }

/* ── Móvil: 2 columnas, tarjetas algo más compactas ── */
@media (max-width:680px){
  .gensel-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .gensel-card{ min-height:132px;padding:12px 12px 10px; }
  .gensel-card-label{ font-size:1.05rem; }
  .gensel-card-img{ width:78px;height:78px; }
  .gensel-card-all{ grid-column:1 / -1;min-height:108px; }
  .gensel-card-all .gensel-card-img{ width:104px;height:104px; }
  .gensel-card-count{ font-size:.82rem; }
}
@media (max-width:360px){
  .gensel-grid{ grid-template-columns:1fr; }
  .gensel-card-all{ grid-column:auto; }
}

/* ═══════════════════════════════════════════════════════
   TEAM BUILDER
   ═══════════════════════════════════════════════════════ */
#screen-teams, #screen-builder{
  flex-direction:column;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(39,174,96,.10) 0%, transparent 55%),
    var(--bg);
  padding:0;
  overflow:hidden;
  height:100dvh;
  height:100vh;
  max-height:100dvh;
}

/* ── Hub "Mis equipos" ── */
.tb-hub-scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 24px calc(28px + env(safe-area-inset-bottom));
  max-width:1280px;width:100%;margin:0 auto;
}
.tb-hub-actions{ display:flex;flex-direction:row;gap:14px;margin:6px 0 22px;flex-wrap:wrap; }
.tb-hub-actions > *{ flex:1 1 280px; }
.tb-action-btn{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:14px;cursor:pointer;text-align:left;
  background:var(--surface);border:1px solid var(--border);
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.tb-action-btn:hover{ transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.tb-action-new:hover{ border-color:#27ae60; }
.tb-action-import:hover{ border-color:#3a7bd5; }
.tb-action-icon{ font-size:1.7rem;flex-shrink:0; }
.tb-action-text{ display:flex;flex-direction:column;gap:2px; }
.tb-action-text strong{ font-family:var(--game);font-size:1.05rem;color:var(--text);letter-spacing:.5px; }
.tb-action-text small{ font-family:var(--body);font-size:.78rem;color:var(--muted); }

.tb-saved-title{
  font-family:var(--game);font-size:.85rem;letter-spacing:1px;
  color:var(--muted);text-transform:uppercase;margin:4px 2px 12px;
}
.tb-saved-list{ display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;align-items:start; }

.tb-team-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:14px 16px;
  transition:border-color .15s;
}
/* Tarjeta de BORRADOR (equipo a medias) — acento dorado para destacar */
.tb-draft-card{
  background:linear-gradient(180deg,rgba(245,197,66,.1),rgba(245,197,66,.04));
  border:1px solid rgba(245,197,66,.45);
  border-radius:16px;padding:14px 16px;margin-bottom:14px;
  box-shadow:0 0 18px rgba(245,197,66,.12);
}
.tb-draft-head{ display:flex;align-items:center;gap:8px;margin-bottom:10px; }
.tb-draft-ico{ font-size:1.2rem; }
.tb-draft-txt{ font-family:var(--game);font-weight:700;font-size:1rem;color:#ffe9a8;letter-spacing:.4px; }
.tb-draft-sprites{ display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px; }
.tb-draft-mini{ width:46px;height:46px;image-rendering:pixelated;background:rgba(255,255,255,.03);border-radius:8px; }
.tb-draft-actions{ display:flex;gap:8px;flex-wrap:wrap; }
.tb-draft-resume{ background:rgba(245,197,66,.18)!important;border-color:rgba(245,197,66,.5)!important;color:#ffe9a8!important;font-weight:700; }
.tb-draft-resume:hover{ background:rgba(245,197,66,.3)!important; }
.tb-team-card:hover{ border-color:rgba(39,174,96,.4); }
.tb-team-card-head{ display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px; }
.tb-team-name{ font-family:var(--game);font-weight:700;font-size:1.1rem;color:var(--text);letter-spacing:.5px; }
.tb-team-count{ font-family:var(--body);font-size:.72rem;color:var(--muted);white-space:nowrap; }
.tb-team-sprites{ display:flex;gap:4px;justify-content:flex-start;flex-wrap:wrap;margin-bottom:12px; }
.tb-team-mini{ width:52px;height:52px;image-rendering:pixelated;background:rgba(255,255,255,.03);border-radius:8px; }
.tb-team-mini-wrap{ position:relative;display:inline-flex;border-radius:8px; }
.tb-team-mini-cap{ box-shadow:0 0 0 2px #f5c542 inset;border-radius:8px;background:rgba(245,197,66,.08); }
.tb-team-mini-star{
  position:absolute;top:-7px;left:-6px;font-size:.85rem;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));pointer-events:none;
}
.tb-team-cap-line{
  font-family:var(--body);font-size:.82rem;color:#f5c542;margin:-4px 0 12px;
  text-transform:capitalize;
}
.tb-team-cap-line strong{ color:#f7d878;font-weight:700; }
.tb-team-actions{ display:flex;gap:8px;flex-wrap:wrap; }
.tb-mini-btn{
  flex:1;min-width:auto;font-family:var(--game);font-weight:600;font-size:.78rem;
  background:var(--surface2);color:var(--text);border:1px solid var(--border);
  border-radius:9px;padding:9px 10px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.tb-mini-btn:hover{ border-color:var(--accent); }
.tb-mini-battle{ background:rgba(39,174,96,.18);border-color:rgba(39,174,96,.5);color:#7fe0a0; }
.tb-mini-battle:hover{ background:rgba(39,174,96,.3);border-color:#27ae60; }
.tb-mini-del{ flex:0 0 auto;background:rgba(231,76,60,.12);border-color:rgba(231,76,60,.35); }
.tb-mini-del:hover{ border-color:var(--accent2); }

.tb-empty{ text-align:center;padding:50px 20px;color:var(--muted); }
.tb-empty-icon{ font-size:3rem;margin-bottom:12px;opacity:.7; }
.tb-empty-text{ font-family:var(--body);font-size:.95rem;line-height:1.6; }

/* ── Constructor: cuerpo y footer ── */
.tb-body{ flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;height:0; }
.tb-footer{
  flex-shrink:0;display:flex;gap:10px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);background:var(--surface);
}
.tb-footer-btn{
  flex:1;font-family:var(--game);font-weight:700;font-size:1rem;letter-spacing:.5px;
  background:var(--surface2);color:var(--text);border:1px solid var(--border);
  border-radius:11px;padding:14px;cursor:pointer;transition:.15s;
}
.tb-footer-btn:hover:not(:disabled){ border-color:var(--accent);transform:translateY(-2px); }
.tb-footer-btn:disabled{ opacity:.4;cursor:default; }
.tb-footer-next{ background:var(--accent);color:#000;border-color:var(--accent); }
.tb-footer-test{
  flex:1;
  background:#e67e22;color:#fff;border-color:#e67e22;
}
.tb-footer-test:hover:not(:disabled){ border-color:#f39c12;background:#f39c12; }
.tb-footer-save{ background:#27ae60;color:#fff;border-color:#27ae60; }

/* ── Selección de Pokémon ── */
.tb-pick-search-wrap{
  display:flex;align-items:center;gap:8px;margin:12px 18px 10px;
  background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:0 12px;
}
.tb-pick-search{
  flex:1;background:transparent;border:none;outline:none;color:var(--text);
  font-size:16px;padding:11px 0;font-family:var(--body);
}
.tb-pick-grid{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:10px;padding:0 18px calc(16px + env(safe-area-inset-bottom));
  align-content:start;
}
.tb-pick-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--surface);border:1.5px solid var(--border);border-radius:13px;
  padding:10px 6px 8px;cursor:pointer;transition:transform .14s, border-color .14s, box-shadow .14s;
}
.tb-pick-card:hover{ transform:translateY(-3px);border-color:var(--accent); }
.tb-pick-card-on{ border-color:#27ae60;background:rgba(39,174,96,.12);box-shadow:0 0 0 1px #27ae60 inset; }
.tb-pick-card-dim{ opacity:.4;pointer-events:none; }
.tb-pick-sprite{ width:66px;height:66px;image-rendering:pixelated; }
.tb-pick-name{ font-family:var(--game);font-size:.66rem;color:var(--text);text-align:center;text-transform:capitalize;line-height:1.1; }
.tb-pick-types{ display:flex;gap:3px;flex-wrap:wrap;justify-content:center; }
.tb-pick-badge{
  position:absolute;top:-7px;left:-7px;width:24px;height:24px;border-radius:50%;
  background:#27ae60;color:#fff;font-family:var(--game);font-weight:700;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.4);
}
/* Etiqueta de rareza (legendario / singular) sobre la tarjeta */
.tb-pick-rarity{
  position:absolute;top:5px;right:5px;z-index:2;
  font-family:var(--game);font-weight:700;font-size:.52rem;letter-spacing:.3px;
  padding:2px 5px;border-radius:6px;line-height:1.1;white-space:nowrap;
}
.tb-pick-rarity-leg{ background:rgba(245,197,66,.92);color:#3a2c00; }
.tb-pick-rarity-uni{ background:rgba(170,120,235,.92);color:#fff; }
/* Aviso flotante cuando se supera el límite de rareza */
.tb-rarity-toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:#2a1c1c;border:1px solid #c0563a;color:#ffd9cf;
  font-family:var(--body);font-size:.86rem;font-weight:600;
  padding:11px 18px;border-radius:11px;z-index:5000;
  box-shadow:0 8px 28px rgba(0,0,0,.5);opacity:0;pointer-events:none;
  transition:opacity .2s, transform .2s;max-width:90vw;text-align:center;
}
.tb-rarity-toast-show{ opacity:1;transform:translateX(-50%) translateY(0); }

/* ── Editor: pestañas de los 6 ── */
.tb-edit-tabs{
  display:flex;gap:6px;padding:10px 14px;overflow-x:auto;flex-shrink:0;
  border-bottom:1px solid var(--border);background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
.tb-edit-tab{
  position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:11px;
  background:var(--surface2);border:1.5px solid var(--border);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.14s;padding:0;
}
.tb-edit-tab img{ width:46px;height:46px;image-rendering:pixelated; }
.tb-edit-tab-on{ border-color:var(--accent);background:rgba(245,166,35,.14);box-shadow:0 0 0 1px var(--accent) inset; }
.tb-edit-tab-warn{
  position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;
  background:var(--accent2);color:#fff;font-size:.7rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.tb-edit-tab-cap{ border-color:#f5c542;box-shadow:0 0 0 1px #f5c542 inset; }
.tb-edit-tab-cap-star{
  position:absolute;top:-7px;left:-6px;font-size:.78rem;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));pointer-events:none;
}
.tb-cap-badge{
  margin-top:6px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(245,197,66,.16);border:1px solid #f5c542;color:#f5c542;
  font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:7px;
}
.tb-cap-set{
  margin-top:6px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:var(--surface2);border:1px solid var(--border);color:var(--muted);
  font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:7px;transition:.14s;
  font-family:var(--body);
}
.tb-cap-set:hover{ border-color:#f5c542;color:#f5c542;background:rgba(245,197,66,.1); }
.tb-poke-remove{
  margin-top:6px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:rgba(226,61,61,.12);border:1px solid rgba(226,61,61,.45);color:#ff9b9b;
  font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:7px;transition:.14s;
  font-family:var(--body);
}
.tb-poke-remove:hover{ background:#e23d3d;border-color:#e23d3d;color:#fff; }

.tb-edit-scroll{ flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 18px 18px; }

.tb-edit-hero{ display:flex;align-items:center;gap:14px;margin-bottom:8px; }
.tb-edit-hero-info{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.tb-edit-sprite{ width:84px;height:84px;image-rendering:pixelated;flex-shrink:0; }
.tb-edit-hero-name{ font-family:var(--game);font-weight:700;font-size:1.4rem;color:var(--text);text-transform:capitalize;letter-spacing:.5px; }
.tb-edit-hero-types{ display:flex;gap:5px;margin-top:5px; }
.tb-edit-hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.tb-edit-hero-actions > *{ margin-top:0 !important; }

.tb-edit-section-title{
  font-family:var(--game);font-size:.82rem;letter-spacing:1px;color:var(--accent);
  text-transform:uppercase;margin:18px 0 9px;display:flex;align-items:center;gap:8px;
}
.tb-move-counter,.tb-pool-count{
  font-family:var(--body);font-size:.7rem;color:var(--muted);
  background:var(--surface2);padding:2px 8px;border-radius:10px;letter-spacing:0;
}

/* Habilidad chips */
.tb-ab-chips{ display:flex;flex-wrap:wrap;gap:8px; }
.tb-ab-chip{
  font-family:var(--game);font-weight:600;font-size:.85rem;
  background:var(--surface);border:1.5px solid var(--border);color:var(--text);
  border-radius:20px;padding:8px 16px;cursor:pointer;transition:.14s;
}
.tb-ab-chip:hover{ border-color:var(--accent); }
.tb-ab-chip-on{ background:rgba(245,166,35,.16);border-color:var(--accent);color:var(--accent); }

/* ── Chips de objeto (Team Builder) ── */
.tb-item-chips{ display:flex;flex-wrap:wrap;gap:8px;align-items:center; }
.tb-item-chip{
  font-family:var(--game);font-weight:600;font-size:.85rem;
  background:var(--surface);border:1.5px solid var(--border);color:var(--text);
  border-radius:20px;padding:8px 16px;cursor:pointer;transition:.14s;
}
.tb-item-chip:hover{ border-color:var(--accent); }
.tb-item-chip-on{ background:rgba(76,218,100,.14);border-color:#4cda64;color:#7ee89a; }
.tb-item-tier-label{
  flex-basis:100%;font-family:var(--game);font-weight:700;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim,#8a8f98);
  margin:6px 0 -2px 2px;
}

/* Slots de movimiento elegidos */
.tb-move-slots{ display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.tb-move-slot{
  position:relative;display:flex;flex-direction:column;gap:3px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--mt,#888) 26%, var(--surface)) 0%,
      color-mix(in srgb, var(--mt,#888) 9%, var(--surface)) 55%,
      var(--surface) 100%);
  border:1px solid color-mix(in srgb, var(--mt,#888) 45%, var(--border));
  border-left:4px solid var(--mt,#888);border-radius:10px;padding:9px 11px;
  transition:border-color .15s, box-shadow .15s;
}
.tb-move-slot:hover{
  border-color:var(--mt,#888);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--mt,#888) 50%, transparent),
             0 4px 14px color-mix(in srgb, var(--mt,#888) 22%, transparent);
}
.tb-move-slot-empty{
  background:var(--surface);
  border:1px solid var(--border);border-style:dashed;
  border-left-color:var(--border);align-items:center;justify-content:center;
  flex-direction:row;gap:6px;color:var(--muted);min-height:54px;
}
.tb-slot-num{ position:absolute;top:6px;right:8px;font-family:var(--game);font-size:.6rem;color:var(--muted); }
.tb-slot-empty-txt{ font-family:var(--body);font-size:.85rem;font-style:italic; }
.tb-slot-name{ font-family:var(--game);font-weight:600;font-size:.92rem;color:var(--text);text-transform:capitalize;padding-right:14px; }
.tb-slot-meta{ display:flex;align-items:center;gap:5px;flex-wrap:wrap; }
.tb-slot-cat{ font-size:.6rem;padding:1px 5px;border-radius:4px;font-weight:800;color:#fff; }
.tb-cat-physical{ background:#c8410a; }
.tb-cat-special{ background:#4a67c8; }
.tb-cat-status{ background:#6a6a8a; }
.tb-slot-pow{ font-size:.72rem;color:var(--muted);font-weight:700; }
.tb-slot-remove{
  position:absolute;bottom:7px;right:8px;width:20px;height:20px;border-radius:50%;
  background:rgba(231,76,60,.15);border:1px solid rgba(231,76,60,.4);color:#e88;
  font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.tb-slot-remove:hover{ background:var(--accent2);color:#fff; }

/* Movepool legal */
.tb-pool-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px;
}
.tb-pool-move{
  display:flex;flex-direction:column;gap:4px;text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:9px;
  padding:8px 10px;cursor:pointer;transition:.13s;
}
.tb-pool-move:hover{ border-color:var(--accent);transform:translateY(-1px); }
.tb-pool-move-on{ background:rgba(39,174,96,.14);border-color:#27ae60;box-shadow:0 0 0 1px #27ae60 inset; }
.tb-pool-move-dim{ opacity:.45; }
.tb-pm-name{ font-family:var(--game);font-weight:600;font-size:.84rem;color:var(--text);text-transform:capitalize;line-height:1.1; }
.tb-pm-meta{ display:flex;align-items:center;gap:5px;flex-wrap:wrap; }
.tb-pm-pow,.tb-pm-acc{ font-size:.64rem;color:var(--muted);font-weight:600; }

/* ── Modal del builder ── */
.tb-modal{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:2000;
  align-items:center;justify-content:center;padding:24px;
  padding-top:calc(24px + env(safe-area-inset-top));
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.tb-modal.open{ display:flex; }
.tb-modal-box{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:24px 22px;width:100%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.tb-modal-title{ font-family:var(--game);font-weight:700;font-size:1.3rem;color:var(--text);margin-bottom:8px; }
.tb-modal-sub{ font-family:var(--body);font-size:.88rem;color:var(--muted);line-height:1.5;margin-bottom:16px; }
.tb-modal-input,.tb-modal-code{
  width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;
  color:var(--text);font-size:16px;padding:12px 14px;font-family:var(--body);outline:none;
  -webkit-appearance:none;appearance:none;
}
.tb-modal-input:focus,.tb-modal-code:focus{ border-color:var(--accent); }
.tb-modal-code{ font-family:monospace;font-size:13px;resize:vertical;word-break:break-all; }
.tb-import-error{ color:var(--accent2);font-size:.82rem;margin-top:10px;min-height:1em; }
.tb-modal-btns{ display:flex;gap:10px;margin-top:18px; }
.tb-modal-btn{
  flex:1;font-family:var(--game);font-weight:700;font-size:.95rem;letter-spacing:.5px;
  border-radius:11px;padding:13px;cursor:pointer;transition:.14s;border:1px solid var(--border);
}
.tb-modal-cancel{ background:var(--surface2);color:var(--text); }
.tb-modal-cancel:hover{ border-color:var(--muted); }
.tb-modal-ok{ background:var(--accent);color:#000;border-color:var(--accent); }
.tb-modal-ok:hover{ filter:brightness(1.1); }
.tb-modal-del{ background:var(--accent2);color:#fff;border-color:var(--accent2); }

/* ── Móvil ── */
@media (max-width:680px){
  .tb-pick-grid{ grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px; }
  .tb-pick-sprite{ width:58px;height:58px; }
  .tb-pool-grid{ grid-template-columns:1fr 1fr; }
  .tb-move-slots{ grid-template-columns:1fr; }
  .tb-edit-hero-name{ font-size:1.2rem; }
  .tb-edit-sprite{ width:72px;height:72px; }
  .tb-team-mini{ width:44px;height:44px; }
  .tb-action-text strong{ font-size:.98rem; }
}
@media (max-width:380px){
  .tb-pool-grid{ grid-template-columns:1fr; }
}

/* Botón "Probar" en el editor */
.tb-footer-battle{ background:rgba(39,174,96,.18);border-color:rgba(39,174,96,.5);color:#7fe0a0; }
.tb-footer-battle:hover:not(:disabled){ background:rgba(39,174,96,.3);border-color:#27ae60; }

/* ═══════════════════════════════════════════════════════
   TEAM BUILDER — Filtros de selección y tooltips
   ═══════════════════════════════════════════════════════ */
.tb-pick-filters{
  display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px 10px;flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.tb-pick-filters .tb-pick-search-wrap{ flex:1 1 160px;margin:0; }
.tb-f-select{
  flex:1 1 130px;min-width:0;
  background:var(--bg);border:1px solid var(--border);border-radius:9px;
  color:var(--text);font-size:14px;padding:9px 11px;font-family:var(--body);
  outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;
}
.tb-f-select:focus{ border-color:var(--accent); }
select.tb-f-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237d8590' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:26px;
}
.tb-f-reset{
  flex:0 0 auto;font-family:var(--game);font-weight:600;font-size:.82rem;
  background:var(--surface2);color:var(--muted);border:1px solid var(--border);
  border-radius:9px;padding:9px 14px;cursor:pointer;transition:.14s;
}
.tb-f-reset:hover{ border-color:var(--accent2);color:var(--text); }

/* Selector de tipo con iconos (estilo Pokédex) dentro del constructor */
.tb-type-picker-wrap{ flex:1 1 130px;min-width:0;position:relative; }
.tb-type-picker{ position:relative;width:100%; }
.tb-type-display{
  display:flex;align-items:center;gap:5px;
  background:var(--bg);border:1px solid var(--border);border-radius:9px;
  color:var(--text);font-size:14px;padding:8px 26px 8px 11px;font-family:var(--body);
  cursor:pointer;min-height:38px;box-sizing:border-box;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237d8590' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.tb-type-display:hover{ border-color:var(--accent); }
.tb-type-display img{ width:26px;height:auto;image-rendering:pixelated;flex-shrink:0; }
.tb-type-lbl{ font-size:13px; }
.tb-type-lbl-muted{ color:var(--muted); }
.tb-type-drop{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 8px 24px rgba(0,0,0,.35);padding:4px;
}
.tb-type-option{
  display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;cursor:pointer;
}
.tb-type-option:hover{ background:var(--surface2); }
.tb-type-option img{ width:28px;height:auto;image-rendering:pixelated;flex-shrink:0; }
.tb-pick-empty{ grid-column:1/-1;text-align:center;padding:40px 20px;color:var(--muted);font-family:var(--body); }

/* ── Tooltip flotante (Pokémon / movimiento / habilidad) ── */
.tb-tooltip{
  display:none;position:fixed;z-index:3000;
  width:248px;max-width:90vw;
  background:rgba(18,22,32,.97);border:1px solid var(--border);
  border-radius:12px;padding:13px 14px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  pointer-events:none;
}
.tb-tt-head{ display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px; }
.tb-tt-name{ font-family:var(--game);font-weight:700;font-size:1rem;color:var(--text);text-transform:capitalize; }
.tb-tt-types{ display:flex;gap:4px; }
.tb-tt-stats{ display:flex;flex-direction:column;gap:4px;margin-bottom:8px; }
.tb-tt-stat{ display:flex;align-items:center;gap:7px; }
.tb-tt-stat-lbl{ font-family:var(--body);font-size:.68rem;color:var(--muted);width:58px;flex-shrink:0; }
.tb-tt-bar{ flex:1;height:7px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden; }
.tb-tt-bar-fill{ display:block;height:100%;border-radius:4px;transition:width .2s; }
.tb-tt-stat-val{ font-family:var(--game);font-size:.72rem;color:var(--text);width:30px;text-align:right;font-weight:600; }
.tb-tt-bst{ font-family:var(--body);font-size:.74rem;color:var(--muted);text-align:right;margin-bottom:8px; }
.tb-tt-bst b{ color:var(--accent); }
.tb-tt-abs-title,.tb-tt-note{ font-family:var(--game);font-size:.68rem;letter-spacing:.5px;color:var(--accent);text-transform:uppercase;margin-bottom:5px; }
.tb-tt-abs{ display:flex;flex-wrap:wrap;gap:5px; }
.tb-tt-ab{
  font-family:var(--body);font-size:.74rem;color:var(--text);
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:3px 8px;
}
.tb-tt-ab-hidden{ border-color:rgba(155,89,182,.6);background:rgba(155,89,182,.14); }
.tb-tt-moves{ display:flex;flex-direction:column;gap:3px;margin-top:2px; }
.tb-tt-move{
  display:flex;align-items:center;gap:5px;font-family:var(--body);font-size:.72rem;color:var(--text);
  background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:3px 7px;
}
.tb-tt-move-name{ flex:1;text-transform:capitalize; }
.tb-tt-move-pot{ color:var(--muted);font-size:.66rem;font-weight:700; }
.tb-tt-move svg, .tb-tt-move img{ width:14px;height:14px;flex-shrink:0; }
.tb-tt-ha,.tb-chip-ha{
  font-size:.58rem;font-weight:800;background:#9b59b6;color:#fff;
  padding:0 4px;border-radius:3px;vertical-align:middle;letter-spacing:.5px;
}
.tb-tt-moveline{ font-family:var(--body);font-size:.74rem;color:var(--muted);margin-bottom:7px; }
.tb-tt-desc{ display:flex;flex-direction:column;gap:4px; }
.tb-tt-descline{ font-family:var(--body);font-size:.78rem;color:#c8d8f0;line-height:1.45; }
.tb-tt-note{ color:var(--accent2);margin-top:8px;text-transform:none;font-family:var(--body);font-size:.72rem;letter-spacing:0; }

/* Marca de habilidad oculta en los chips del editor */
.tb-ab-chip-hidden{ border-color:rgba(155,89,182,.5); }
.tb-ab-chip-hidden.tb-ab-chip-on{ background:rgba(155,89,182,.18);border-color:#9b59b6;color:#d9a8e8; }

@media (max-width:680px){
  .tb-pick-filters{ gap:6px;padding:10px 14px 8px; }
  .tb-f-select{ flex:1 1 calc(50% - 4px);font-size:16px; }
  .tb-pick-filters .tb-pick-search-wrap{ flex:1 1 100%; }
  .tb-tooltip{ width:210px; }
}

/* ═══ TEST: menú de opciones y selector 1 vs 1 (desde la Pokédex) ═══ */
.pdx-test-overlay{
  position:fixed;inset:0;z-index:6000;display:none;
  align-items:center;justify-content:center;
  background:rgba(5,8,14,.78);padding:20px;
}
.pdx-test-overlay.open{display:flex;}
.pdx-test-card{
  background:#13192a;border:1px solid #2d3a6a;border-radius:16px;
  padding:22px;width:min(440px,94vw);box-shadow:0 18px 60px rgba(0,0,0,.6);
  position:relative;
}
.pdx-test-card-wide{width:min(780px,96vw);height:min(90vh,760px);max-height:90vh;display:flex;flex-direction:column;}

/* Cabecera con acción a la derecha (dado) */
.pdx-test-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}

/* Botón de dado con glow amarillo (randomizar) */
.enb-dice{
  flex-shrink:0;width:46px;height:46px;border-radius:12px;cursor:pointer;
  background:radial-gradient(circle at 30% 30%, #ffd24a, #f5a623);
  border:1px solid #ffcf5c;color:#3a2a00;font-size:22px;line-height:1;
  box-shadow:0 0 14px rgba(245,166,35,.6), 0 4px 12px rgba(0,0,0,.4);
  transition:transform .12s, box-shadow .2s;
}
.enb-dice:hover{transform:translateY(-2px) rotate(-8deg);box-shadow:0 0 22px rgba(245,166,35,.85),0 6px 16px rgba(0,0,0,.5);}
.enb-dice:active{transform:translateY(0) rotate(4deg);}

/* Tarjeta de configuración del jugador (menú de test) */
.pdx-test-card-cfg{width:min(620px,96vw);max-height:92vh;display:flex;flex-direction:column;}
.pdx-test-scroll{overflow-y:auto;flex:1 1 auto;min-height:0;margin-bottom:8px;}
.pdx-cfg-section{background:#0f1626;border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:6px;}
.pdx-cfg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:520px){.pdx-cfg-grid2{grid-template-columns:1fr;}}
.pdx-cfg-moves-head{display:flex;align-items:center;justify-content:space-between;margin:12px 0 8px;}
.pdx-mymoves{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;}
@media (max-width:540px){.pdx-mymoves{grid-template-columns:1fr;}}
.pdx-mymove-slot{position:relative;display:flex;}
.pdx-mymove-slot .pdx-move-tag{flex:1;}
.pdx-mymove-btn{flex:1;display:block;background:transparent;border:none;padding:0;cursor:pointer;text-align:left;min-width:0;}
.pdx-mymove-slot.editing .pdx-move-tag{outline:2px solid var(--accent);outline-offset:1px;}
.pdx-mymove-x{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.45);border:none;color:#fff;
  width:18px;height:18px;border-radius:50%;font-size:11px;line-height:1;cursor:pointer;opacity:.7;z-index:2;}
.pdx-mymove-x:hover{opacity:1;background:var(--accent2);}
.pdx-mymove-add{grid-column:1/-1;background:var(--bg);border:1px dashed var(--border);color:var(--muted);
  border-radius:9px;padding:9px;font-size:.82rem;cursor:pointer;font-family:var(--body);}
.pdx-mymove-add:hover,.pdx-mymove-add.editing{border-color:var(--accent);color:var(--text);}

/* Popup flotante del selector de ataques del jugador */
.pdx-mymove-overlay{
  position:fixed;inset:0;z-index:7000;display:none;
  align-items:center;justify-content:center;
  background:rgba(5,8,14,.72);padding:20px;
}
/* El selector de ataque debe quedar SIEMPRE por encima del popup de loadout,
   ya que se abre desde dentro de él. */
#pdx-mymove-overlay{z-index:7200;}
#pdx-saveteam-overlay{z-index:7300;}
.pdx-mymove-overlay.open{display:flex;}
.pdx-mymove-popup{
  background:#13192a;border:1px solid var(--border);border-radius:16px;
  width:min(560px,96vw);max-height:82vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.65);overflow:hidden;
}
.pdx-mymove-popup-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.pdx-mymove-popup-title{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;color:var(--text);}
.pdx-mymove-popup-title b{color:var(--accent);}
.pdx-mymove-popup-x{position:static;}
.pdx-mymove-popup .medit-picker-head{position:sticky;top:0;}
.pdx-mymove-popup-list{flex:1 1 auto;overflow-y:auto;min-height:120px;}
/* Ataque que ya está en el set: atenuado + etiqueta */
.medit-pick-item{position:relative;width:100%;}
.medit-pick-dim{opacity:.45;}
.medit-pick-inset{position:absolute;top:50%;right:10px;transform:translateY(-50%);
  font-size:.62rem;font-weight:700;color:var(--muted);background:var(--surface2);
  border:1px solid var(--border);border-radius:6px;padding:1px 6px;pointer-events:none;}

/* Editor rápido de loadout en batalla */
.pdx-loadout-popup{max-height:88vh;width:min(560px,95vw);position:relative;}
.pdx-loadout-head-min{border-bottom:none;padding:10px 12px 0;min-height:0;justify-content:space-between;align-items:center;}
.pdx-loadout-mini-title{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);}
.ld-close-btn{position:static;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:17px;background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:pointer;flex-shrink:0;transition:.15s;}
.ld-close-btn:hover{background:var(--accent2);border-color:var(--accent2);color:#fff;}

/* Destello del botón Aplicar al pulsarlo */
@keyframes ldApplyFlash{
  0%{box-shadow:0 0 0 0 rgba(76,217,100,.55);}
  100%{box-shadow:0 0 0 14px rgba(76,217,100,0);}
}
.pdx-loadout-apply.ld-applied-flash{animation:ldApplyFlash .55s ease-out;}

/* Toast "Cambios aplicados" */
.ld-toast{position:absolute;left:50%;bottom:74px;transform:translate(-50%,8px);
  background:var(--good);color:#06210f;font-weight:800;font-size:.8rem;font-family:'Rajdhani',sans-serif;
  padding:7px 16px;border-radius:20px;box-shadow:0 6px 18px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:5;white-space:nowrap;}
.ld-toast.show{opacity:1;transform:translate(-50%,0);}
.pdx-loadout-body{padding:6px 16px 14px;overflow-y:auto;flex:1 1 auto;min-height:0;}
.pdx-loadout-foot{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:10px;}
.ld-foot2 .pdx-loadout-apply{flex:1;}
.ld-foot2 .pdx-1v1-start{flex:1.4;margin:0;}
.pdx-loadout-apply{background:var(--good);border:1px solid #34c66b;color:#06210f;
  border-radius:10px;padding:12px;font-family:'Rajdhani',sans-serif;font-weight:800;font-size:15px;cursor:pointer;transition:.15s;}
.pdx-loadout-apply:hover{filter:brightness(1.08);}

/* Barra de Pokémon con sprites */
.ld-pokebar{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.ld-pokebar-group{display:flex;flex-direction:column;gap:5px;}
.ld-pokebar-lbl{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;}
.ld-lbl-you{color:var(--good);}
.ld-lbl-rival{color:var(--accent2);}
.ld-pokebar-row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
@media (max-width:520px){.ld-pokebar-row{grid-template-columns:repeat(3,1fr);}}
.ld-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;padding:6px 3px 4px;cursor:pointer;transition:.12s;}
.ld-cell img{width:42px;height:42px;image-rendering:pixelated;}
.ld-cell span{font-size:.58rem;color:var(--muted);text-align:center;line-height:1.1;text-transform:capitalize;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.ld-cell:hover{transform:translateY(-2px);border-color:var(--accent);}
.ld-cell-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,var(--surface2));box-shadow:0 0 0 1px var(--accent) inset;}
.ld-cell-on span{color:var(--text);}
.ld-cell-enemy{background:color-mix(in srgb,var(--accent2) 9%,var(--surface2));}
.ld-cell-enemy.ld-cell-on{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 22%,var(--surface2));box-shadow:0 0 0 1px var(--accent2) inset;}

/* Hover de stats (loadout y guardar) */
.ld-hover{position:fixed;z-index:7400;display:none;pointer-events:none;
  background:linear-gradient(160deg,#141c30,#0c1120);border:1px solid var(--border);border-radius:13px;padding:12px;
  width:248px;box-shadow:0 16px 40px rgba(0,0,0,.66);}
.ldh-top{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.ldh-spr{width:48px;height:48px;image-rendering:pixelated;flex-shrink:0;}
.ldh-top-info{flex:1;min-width:0;}
.ldh-head{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;color:var(--text);text-transform:capitalize;line-height:1.1;}
.ldh-types{display:flex;gap:4px;margin-top:3px;}
.ldh-type{font-size:.56rem;font-weight:800;color:#fff;padding:1px 6px;border-radius:5px;text-transform:uppercase;letter-spacing:.4px;text-shadow:0 1px 1px rgba(0,0,0,.4);}
.ldh-bst{text-align:center;flex-shrink:0;}
.ldh-bst span{display:block;font-size:.52rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;}
.ldh-bst b{font-family:'Rajdhani',sans-serif;font-size:17px;color:var(--accent);}
.ldh-ab{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--text);margin-bottom:4px;}
.ldh-tag{font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  background:var(--surface2);border-radius:4px;padding:1px 5px;flex-shrink:0;min-width:54px;text-align:center;}
.ldh-ab b{color:var(--text);text-transform:capitalize;}
.ldh-bars{display:flex;flex-direction:column;gap:3px;margin:8px 0;}
.ldh-bar{display:grid;grid-template-columns:54px 1fr 26px;align-items:center;gap:6px;}
.ldh-bar-lbl{font-size:.6rem;color:var(--muted);}
.ldh-bar-track{height:7px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;}
.ldh-bar-fill{display:block;height:100%;border-radius:4px;transition:width .2s;}
.ldh-bar-val{font-size:.64rem;font-weight:700;color:var(--text);text-align:right;}
.ldh-moves{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.ldh-move{font-size:.62rem;background:var(--surface2);border-radius:5px;padding:2px 7px;color:var(--text);text-transform:capitalize;}
.ldh-move-none{color:var(--muted);border-left:3px solid var(--border);}

/* Diálogo de guardar equipo: tarjetas con capitán */
.pdx-saveteam-popup{width:min(480px,95vw);}
.svt-body{padding:14px 16px;overflow-y:auto;}
.svt-error{margin-top:12px;background:color-mix(in srgb,var(--accent2) 16%,var(--surface));border:1px solid var(--accent2);
  border-radius:9px;padding:10px 12px;font-size:.78rem;color:var(--text);line-height:1.4;}
.svt-error b{color:#ff9b8e;}
.svt-list-title{font-size:.72rem;color:var(--muted);margin:14px 0 8px;}
.svt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
@media (max-width:420px){.svt-grid{grid-template-columns:repeat(2,1fr);}}
.svt-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--surface2);border:2px solid var(--border);border-radius:11px;padding:9px 4px 6px;cursor:pointer;transition:.12s;}
.svt-card img{width:50px;height:50px;image-rendering:pixelated;}
.svt-card-name{font-size:.66rem;color:var(--muted);text-align:center;text-transform:capitalize;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.svt-card:hover{transform:translateY(-2px);border-color:var(--accent);}
.svt-card-cap{border-color:#f5c542;background:color-mix(in srgb,#f5c542 16%,var(--surface2));box-shadow:0 0 10px rgba(245,197,66,.35);}
.svt-card-cap .svt-card-name{color:#f5d97a;font-weight:700;}
.svt-star{position:absolute;top:-7px;right:-6px;background:#f5c542;color:#3a2a00;font-size:.7rem;font-weight:900;
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4);}

/* Panel de clima */
.pdx-weather-popup{width:min(440px,94vw);}
.wx-body{padding:14px 16px;}
.wx-sub{color:var(--muted);font-size:.8rem;margin-bottom:12px;}
.wx-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:420px){.wx-grid{grid-template-columns:1fr;}}
.wx-opt{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--border);
  border-radius:11px;padding:12px 14px;cursor:pointer;color:var(--text);font-family:var(--body);
  font-weight:700;font-size:.9rem;transition:transform .1s,border-color .15s,background .15s;text-align:left;}
.wx-opt:hover{transform:translateY(-2px);border-color:var(--accent);}
.wx-opt.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface2));box-shadow:0 0 0 1px var(--accent) inset;}
.wx-opt-ic{flex-shrink:0;display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;}
.wx-opt-lbl{flex:1;}
.wx-opt-turns{font-size:.66rem;font-weight:800;color:var(--accent);background:rgba(245,166,35,.14);
  border:1px solid rgba(245,166,35,.4);border-radius:6px;padding:1px 6px;}
.wx-clear{width:100%;margin-top:12px;background:var(--bg);border:1px solid var(--border);color:var(--muted);
  border-radius:10px;padding:11px;font-family:var(--body);font-weight:700;font-size:.85rem;cursor:pointer;transition:.15s;}
.wx-clear:hover{border-color:var(--accent2);color:var(--text);}

/* "★ Tú" en el primer slot del equipo del jugador */
.pt-fixed{position:absolute;top:5px;right:7px;font-size:.62rem;font-weight:800;color:var(--accent);
  background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.4);border-radius:6px;padding:1px 6px;}
/* En pantallas físicamente pequeñas o con escalado alto, compactar el contenido
   del selector/constructor para que la cuadrícula de elección siga siendo amplia. */
@media (max-height:820px){
  .pdx-test-card-wide{height:94vh;max-height:94vh;padding:16px;}
  .pdx-test-card-wide .pdx-test-head{margin-bottom:10px;}
  .pdx-test-card-wide .pdx-test-title{font-size:16px;}
  .pdx-test-card-wide .pdx-test-sub{font-size:11.5px;}
  .pdx-test-card-wide .pdx-1v1-cell img,
  .pdx-test-card-wide .enb-slot-sprite{width:44px;height:44px;}
  .pdx-test-card-wide .enb-team{max-height:26vh;}
}
.pdx-test-x{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text);font-size:17px;line-height:1;cursor:pointer;transition:.15s;z-index:3;
}
.pdx-test-x:hover{background:var(--accent2);border-color:var(--accent2);color:#fff;}
.pdx-test-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.pdx-test-sprite{width:72px;height:72px;image-rendering:pixelated;}
.pdx-test-title{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:19px;color:#e6edf3;text-transform:capitalize;}
.pdx-test-title b{color:#f5a623;}
.pdx-test-sub{font-family:'Inter',sans-serif;font-size:13px;color:#7d8590;margin-top:2px;}
.pdx-test-opts{display:flex;flex-direction:column;gap:12px;}
.pdx-test-opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  background:#161b22;border:1px solid #2d3a6a;border-radius:12px;
  padding:14px 16px;cursor:pointer;transition:.15s;position:relative;padding-left:54px;
}
.pdx-test-opt:hover{border-color:#f5a623;background:#1e2a52;transform:translateY(-2px);}
.pdx-test-opt-ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:24px;}
.pdx-test-opt-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;color:#e6edf3;}
.pdx-test-opt-desc{font-family:'Inter',sans-serif;font-size:12px;color:#7d8590;line-height:1.35;}

/* Filtros + grid del selector 1v1 */
.pdx-1v1-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;flex-shrink:0;}
.pdx-1v1-input{
  background:#0d1117;border:1px solid #2d3a6a;border-radius:8px;
  color:#e6edf3;font-family:'Inter',sans-serif;font-size:13px;padding:8px 10px;
}
#t1-search{flex:1 1 160px;}
.pdx-1v1-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;
  overflow-y:auto;padding:4px;flex:1 1 auto;min-height:200px;
  align-content:start;align-items:start;grid-auto-rows:max-content;
}
.pdx-1v1-cell{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#161b22;border:1.5px solid #2d3a6a;border-radius:10px;
  padding:8px 4px 6px;cursor:pointer;transition:.12s;
  align-self:start;
}
.pdx-1v1-cell:hover{border-color:#f5a623;transform:translateY(-2px);}
.pdx-1v1-cell-on{border-color:#27ae60;background:rgba(39,174,96,.14);box-shadow:0 0 0 1px #27ae60 inset;}
.pdx-1v1-cell img{width:56px;height:56px;image-rendering:pixelated;}
.pdx-1v1-cell span{font-family:'Inter',sans-serif;font-size:11px;color:#cfd6e4;text-align:center;text-transform:capitalize;line-height:1.1;}
.pdx-1v1-empty{grid-column:1/-1;text-align:center;color:#7d8590;padding:24px;font-family:'Inter',sans-serif;}

/* Configuración del 1v1 (habilidad + flags + empezar) */
.pdx-1v1-config{
  border-top:1px solid #2d3a6a;margin-top:12px;padding-top:14px;flex-shrink:0;
}
.pdx-1v1-vs{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px;}
.pdx-1v1-vs-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:17px;color:#e6edf3;text-transform:capitalize;}
.pdx-1v1-vs-x{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;color:#f5a623;}
.pdx-1v1-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.pdx-1v1-lbl{font-family:'Inter',sans-serif;font-size:13px;color:#7d8590;flex-shrink:0;}
.pdx-1v1-row .pdx-1v1-input{flex:1;}
.pdx-1v1-flags{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.pdx-1v1-flag{display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:13px;color:#cfd6e4;cursor:pointer;}
.pdx-1v1-flag b{color:#e6edf3;text-transform:capitalize;}
.pdx-1v1-flag input{width:16px;height:16px;cursor:pointer;}
.pdx-1v1-start{
  width:100%;background:#27ae60;border:none;border-radius:10px;
  color:#fff;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:.5px;padding:12px;cursor:pointer;transition:.15s;flex-shrink:0;margin-top:8px;
}
.pdx-1v1-start:hover{background:#2ecc71;transform:translateY(-1px);}

@media (max-width:680px){
  .pdx-1v1-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));}
  .pdx-1v1-cell img{width:46px;height:46px;}
}

/* ═══ Tooltip de habilidad en el HUD de batalla ═══ */
.battle-ability-tooltip{
  display:none;position:fixed;z-index:9000;
  max-width:260px;background:#0d1117;border:1px solid #2d3a6a;
  border-radius:10px;padding:10px 12px;
  box-shadow:0 8px 28px rgba(0,0,0,.6);pointer-events:none;
}
.battle-ability-tooltip .bat-tt-name{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;
  color:#f5a623;text-transform:capitalize;margin-bottom:4px;letter-spacing:.3px;
}
.battle-ability-tooltip .bat-tt-desc{
  font-family:'Inter',sans-serif;font-size:12.5px;color:#cfd6e4;line-height:1.45;
}

/* ═══════════ CUENTAS, TROFEOS Y CONTADORES (PileTrivial) ═══════════ */
.cuenta-bar{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:14px;flex-wrap:wrap;}

/* ════════════════════════════════════════════════════════════════
   MENÚ DE USUARIO (db-cuenta-ui.js) — el nombre clicable + panel
   ════════════════════════════════════════════════════════════════ */
.acc-wrap{position:relative;display:flex;align-items:center;gap:8px;}
.acc-name-btn{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;color:#fff;
  background:#22304a;border:1px solid #34507a;border-radius:10px;padding:7px 12px;
  position:relative;transition:background .15s,border-color .15s,transform .12s;
}
.acc-name-btn:hover{background:#2a3c5c;border-color:#43618f;}
.acc-name-btn:active{transform:scale(.98);}
.acc-ava{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(160deg,#4a6fa5,#2a4a7a);font-weight:700;font-size:13px;color:#fff;flex:0 0 auto;}
.acc-ava-lg{width:38px;height:38px;font-size:17px;}
.acc-name-tx{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acc-caret{font-size:11px;opacity:.7;}
.acc-dot{position:absolute;top:-3px;right:-3px;width:13px;height:13px;background:#f5a623;border-radius:50%;border:2px solid #16202e;box-shadow:0 0 6px rgba(245,166,35,.7);}
.acc-trophies{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;color:#9fc1e6;background:#1b2738;border:1px solid #2e3f57;border-radius:8px;padding:5px 9px;}

/* Panel desplegable */
.acc-menu{
  position:absolute;top:calc(100% + 7px);right:0;z-index:1200;width:236px;
  background:#18222f;border:1px solid #314563;border-radius:13px;padding:7px;
  box-shadow:0 12px 30px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-6px);transition:opacity .16s,transform .16s;
}
.acc-menu.on{opacity:1;transform:translateY(0);}
/* Móvil: evita que el menú se salga por los lados anclándolo con margen seguro. */
@media (max-width: 560px){
  .acc-menu{
    right:0; left:auto;
    max-width:calc(100vw - 24px);
  }
}
.acc-menu-head{display:flex;align-items:center;gap:10px;padding:9px 9px 11px;border-bottom:1px solid #25344a;margin-bottom:6px;}
.acc-menu-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;color:#fff;}
.acc-menu-sub{font-size:11px;color:#7da2c8;font-weight:600;}
.acc-item{
  display:flex;align-items:center;gap:11px;width:100%;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-weight:600;font-size:15px;color:#dce6f2;text-align:left;
  background:transparent;border:none;border-radius:9px;padding:10px 11px;transition:background .12s;
}
.acc-item:hover{background:#22304a;}
.acc-item .acc-ico{width:20px;text-align:center;font-size:16px;color:#9fc1e6;flex:0 0 auto;}
.acc-badge{margin-left:auto;background:#f5a623;color:#3a2700;font-size:11px;font-weight:700;border-radius:20px;padding:1px 8px;min-width:18px;text-align:center;}
/* Badge rojo con número en el NOMBRE (arriba a la derecha del index) */
#acc-name-btn{position:relative;}
#acc-name-btn .acc-badge{position:absolute;top:-6px;right:-6px;margin:0;background:#e0322f;color:#fff;
  font-family:'Rajdhani',sans-serif;font-weight:800;font-size:11px;line-height:1;border-radius:20px;
  min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center;
  border:2px solid #16202e;box-shadow:0 0 8px rgba(224,50,47,.7);}
/* Banner superior de REGALO recibido (estilo banner de partida pendiente) */
.gift-banner-top{
  position:fixed;top:0;left:50%;transform:translate(-50%,-130%);z-index:10500;
  display:flex;align-items:center;gap:11px;padding:11px 14px;margin-top:10px;border-radius:13px;
  background:linear-gradient(180deg,#15401f,#0d2c15);border:2px solid #4fd17a;
  box-shadow:0 0 26px rgba(79,209,122,.6),0 8px 24px rgba(0,0,0,.45);
  font-family:'Rajdhani',sans-serif;max-width:94vw;
  transition:transform .32s cubic-bezier(.2,.9,.3,1.2),opacity .25s;opacity:0;
}
.gift-banner-top.on{transform:translate(-50%,0);opacity:1;}
.gift-banner-ico{font-size:1.3rem;filter:drop-shadow(0 0 6px rgba(95,224,160,.7));}
.gift-banner-txt{color:#eaffef;font-weight:700;font-size:1rem;}
.gift-banner-ver{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;
  color:#06281a;background:linear-gradient(160deg,#5fe0a0,#1fae78);border:none;border-radius:9px;padding:7px 13px;transition:filter .14s;}
.gift-banner-ver:hover{filter:brightness(1.1);}
.gift-banner-x{width:26px;height:26px;border-radius:50%;cursor:pointer;flex:0 0 auto;
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.2);color:#cfe8d6;font-size:13px;
  display:flex;align-items:center;justify-content:center;transition:background .14s;}
.gift-banner-x:hover{background:rgba(0,0,0,.45);color:#fff;}
.acc-item.acc-danger{color:#ff8a7a;}
.acc-item.acc-danger .acc-ico{color:#ff8a7a;}
.acc-item.acc-admin{color:#c98ae8;}
.acc-item.acc-admin .acc-ico{color:#c98ae8;}
.acc-sep{height:1px;background:#25344a;margin:5px 2px;}

/* Diálogo de perfil / contraseña (reusa .cuenta-ov y .cuenta-card) */
.acc-perfil-secc{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;
  text-transform:uppercase;color:#7da2c8;margin:6px 0 8px;}
.acc-perfil-msg{min-height:18px;font-size:13px;font-weight:600;margin:2px 0 6px;}
.acc-perfil-msg.err{color:#ff8a7a;}
.acc-perfil-msg.ok{color:#4fd17a;}

/* Diálogo de AMIGOS (reusa .cuenta-ov y .cuenta-card) */
.acc-amigos-card{max-width:520px;width:94vw;padding:22px 24px;}
.acc-amigos-card h3{font-size:22px;margin:0 0 14px;}
.acc-amigos-add{display:flex;gap:10px;margin:4px 0 8px;}
.acc-amigos-add .cuenta-in{flex:1;margin:0;height:44px;font-size:15px;}
.acc-amigos-add .cuenta-btn{flex-shrink:0;margin:0;height:44px;padding:0 20px;font-size:15px;}
.acc-amigos-msg{min-height:20px;font-size:14px;font-weight:600;margin:2px 0 8px;}
.acc-amigos-msg.err{color:#ff8a7a;}
.acc-amigos-msg.ok{color:#4fd17a;}
.acc-amigos-cont{max-height:52vh;overflow-y:auto;margin:6px 0 14px;padding-right:4px;}
.acc-amigos-cargando,.acc-amigos-vacio{font-size:14px;color:#8aa0b6;text-align:center;padding:22px 12px;line-height:1.5;}
.acc-amigos-secc{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;letter-spacing:.6px;
  text-transform:uppercase;color:#7da2c8;margin:16px 0 8px;}
.acc-amigos-secc:first-child{margin-top:2px;}
.acc-amigo-fila{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.05);margin-bottom:7px;transition:background .15s;}
.acc-amigo-fila:hover{background:rgba(255,255,255,.08);}
.acc-amigo-ava{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:18px;color:#dbe6f2;
  background:linear-gradient(160deg,#3a557a,#26405e);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);}
.acc-amigo-nm{flex:1;font-weight:600;font-size:16px;color:#e6eef6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acc-amigo-acts{display:flex;gap:7px;flex-shrink:0;}
.acc-amigo-bt{width:38px;height:38px;border-radius:10px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .12s,filter .15s,box-shadow .15s;
  box-shadow:0 2px 6px rgba(0,0,0,.25);}
.acc-amigo-bt:hover{transform:translateY(-2px);filter:brightness(1.18);box-shadow:0 4px 12px rgba(0,0,0,.35);}
.acc-amigo-bt:active{transform:translateY(0);}
.acc-amigo-bt svg{display:block;}
.acc-amigo-si{background:linear-gradient(160deg,#23a877,#16855c);color:#fff;}
.acc-amigo-no{background:linear-gradient(160deg,#c14a4a,#9a2f2f);color:#fff;}
.acc-amigo-retar{background:linear-gradient(160deg,#4769a0,#2d4a78);color:#fff;}
.acc-amigo-cartas{background:linear-gradient(160deg,#9560ad,#6e3f8e);color:#fff;}
.acc-amigo-sobre{background:linear-gradient(160deg,#3a86ad,#256b8e);color:#fff;}
.acc-amigo-pend{opacity:.65;}
.acc-amigo-estado{font-size:12px;color:#c9a24a;font-weight:600;flex-shrink:0;}



/* ════════════════════════════════════════════════════════════════
   BANNER DE REGALO DORADO (db-cuenta-ui.js) — reemplaza el verde
   ════════════════════════════════════════════════════════════════ */
.gift-notif-ov{
  position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;
  background:rgba(8,11,16,.55);opacity:0;transition:opacity .25s;padding:18px;
}
.gift-notif-ov.on{opacity:1;}
.gift-notif{
  position:relative;text-align:center;max-width:340px;
  background:linear-gradient(165deg,#1c2536,#141b28);border:1.5px solid #6a4f1a;border-radius:16px;
  padding:26px 30px 22px;
  box-shadow:0 0 34px rgba(245,166,35,.32),0 10px 30px rgba(0,0,0,.5);
  transform:scale(.92);transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.gift-notif-ov.on .gift-notif{transform:scale(1);}
.gift-notif-x{
  position:absolute;top:9px;right:11px;width:26px;height:26px;border-radius:50%;cursor:pointer;
  background:#26313f;border:1px solid #3a4960;color:#9fb4cc;font-size:13px;
  display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s;
}
.gift-notif-x:hover{background:#33414f;color:#fff;}
.gift-notif-ico{font-size:2.6rem;margin-bottom:6px;filter:drop-shadow(0 0 12px rgba(245,166,35,.75));}
.gift-notif-tit{color:#fff4e0;font-family:'Rajdhani',sans-serif;font-size:1.22rem;font-weight:700;margin-bottom:4px;}
.gift-notif-tit b{color:#f5a623;}
.gift-notif-sub{color:#cdb98e;font-size:.92rem;font-weight:600;margin-bottom:18px;}
.gift-notif-ver{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;cursor:pointer;
  background:linear-gradient(160deg,#f5b942,#e0941c 55%,#b9760d);border:none;border-radius:10px;
  color:#3a2700;padding:11px 22px;
  box-shadow:0 0 22px rgba(245,166,35,.5),0 4px 0 #9a6510;transition:transform .12s,box-shadow .15s;
}
.gift-notif-ver:hover{box-shadow:0 0 28px rgba(245,166,35,.8),0 4px 0 #9a6510;}
.gift-notif-ver:active{transform:translateY(3px);box-shadow:0 0 16px rgba(245,166,35,.6);}

/* ════════════════════════════════════════════════════════════════
   BUZÓN MEJORADO (db-cuenta-ui.js) — filas de correo + chat
   ════════════════════════════════════════════════════════════════ */
.buzon-card-pro{max-width:400px;width:92vw;}
.buzon-pro-tit{display:flex;align-items:center;gap:8px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:21px;color:#fff;margin:0 0 13px;}
.buzon-pro-ic{color:#f5a623;}
.buzon-pro-tabs{display:flex;gap:6px;margin-bottom:14px;}
.buzon-pro-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;color:#9fc1e6;
  background:#1b2738;border:1px solid #2a3a52;border-radius:9px;padding:9px;transition:background .14s,color .14s,border-color .14s;}
.buzon-pro-tab:hover{background:#22304a;}
.buzon-pro-tab.on{background:#22304a;color:#fff;border-color:#3a567a;}
.buzon-pro-cnt{font-size:11px;font-weight:700;background:#f5a623;color:#3a2700;border-radius:10px;padding:0 6px;line-height:16px;}
.buzon-pro-cnt.alt{background:#4a90d9;color:#06203a;}
.buzon-pro-sec{max-height:46vh;overflow-y:auto;}
.buzon-pro-list{display:flex;flex-direction:column;}

/* Fila de regalo (correo con sprite) */
.bzp-row{display:flex;align-items:center;gap:11px;background:linear-gradient(160deg,#1c2738,#151d29);
  border:1px solid #2a3a52;border-radius:11px;padding:9px 11px;margin-bottom:8px;}
.bzp-row.shiny{border-left:3px solid #8fd0ff;}
.bzp-row.rare{border-left:3px solid #f0c14a;}
.bzp-spr{width:46px;height:46px;image-rendering:pixelated;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
/* Filas de SOBRE: el sobre es vertical, así que lo mostramos grande sin achatar */
.bzp-row-pack{padding:11px;}
.bzp-row-pack .bzp-spr{width:auto;height:64px;max-width:54px;object-fit:contain;image-rendering:auto;}
.bzp-packx{color:#f5c842;font-weight:800;font-size:14px;}

/* Pantalla de SOBRES recibidos (db-cuenta-ui.js mejorarRegalosGrid) */
.rgp-card{text-align:center;}
.rgp-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:14px 0 6px;}
.rgp-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;min-width:110px;}
.rgp-glow{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,var(--pc,#5b8def) 0%,transparent 70%);opacity:.4;filter:blur(8px);z-index:0;}
.rgp-img{position:relative;z-index:1;width:auto;height:120px;max-width:88px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(0,0,0,.5));animation:rgpPop .45s cubic-bezier(.34,1.56,.64,1);}
.rgp-name{position:relative;z-index:1;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;color:#fff;}
.rgp-qty{position:relative;z-index:1;font-family:'Rajdhani',sans-serif;font-weight:800;font-size:14px;color:#f5c842;}
@keyframes rgpPop{0%{transform:scale(.4);opacity:0;}100%{transform:scale(1);opacity:1;}}
/* Cartas en la pantalla de resultado del reclamo */
.rgp-cartas-tit{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#8fb6dc;margin:16px 0 10px;}
.rgp-cartas2-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;overflow:visible;max-height:60vh;overflow-y:auto;padding:8px;}
.rgp-carta2{position:relative;width:120px;flex:0 0 auto;transition:transform .2s cubic-bezier(.34,1.56,.64,1);z-index:1;}
.rgp-carta2-face{width:120px;transition:filter .2s;}
.rgp-carta2-face .reward-card,.rgp-carta2-face >*{width:100%!important;}
.rgp-carta2-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:'Rajdhani',sans-serif;font-weight:800;font-size:10px;letter-spacing:.5px;padding:2px 8px;border-radius:8px;white-space:nowrap;}
.rgp-carta2.nueva .rgp-carta2-badge{background:linear-gradient(160deg,#5fe0a0,#1fae78);color:#06281a;box-shadow:0 0 10px rgba(95,224,160,.6);}
.rgp-carta2.repe .rgp-carta2-badge{background:#3a4250;color:#b9c6d4;}
.rgp-carta2-qty{position:absolute;bottom:6px;right:6px;z-index:3;font-family:'Rajdhani',sans-serif;font-weight:800;font-size:15px;color:#fff;
  background:rgba(10,15,22,.85);border:1px solid #4a5a70;border-radius:8px;padding:1px 8px;}
.rgp-carta2.nueva{filter:drop-shadow(0 0 8px rgba(95,224,160,.45));}
/* Hover: la carta se amplía mucho (estilo abanico del juego de cartas) */
.rgp-carta2:hover{transform:scale(1.7) translateY(-10px);z-index:50;}
.rgp-carta2:hover .rgp-carta2-face{filter:drop-shadow(0 10px 22px rgba(0,0,0,.7));}
.rgp-cfallback{width:120px;height:168px;display:flex;align-items:center;justify-content:center;background:#1d2836;border:1px solid #34465a;border-radius:10px;color:#cfdae8;font-weight:700;text-align:center;padding:8px;}




.bzp-info{flex:1;min-width:0;}
.bzp-nm{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bzp-sh{color:#8fd0ff;font-size:12px;font-weight:700;}
.bzp-rare{color:#f0c14a;font-size:11px;font-weight:700;text-transform:capitalize;}
.bzp-de{font-size:11px;color:#7da2c8;font-weight:600;}
.bzp-row-x{width:24px;height:24px;border-radius:50%;cursor:pointer;flex:0 0 auto;
  background:#26313f;border:1px solid #3a4960;color:#9fb4cc;font-size:12px;
  display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s;}
.bzp-row-x:hover{background:#5a2030;border-color:#7a3045;color:#ff9a9a;}
/* Botón reclamar individual (✓ verde) */
.bzp-row-claim{width:26px;height:26px;border-radius:50%;cursor:pointer;flex:0 0 auto;margin-right:6px;
  background:linear-gradient(160deg,#5fe0a0,#1fae78);border:1px solid #1fae78;color:#06281a;font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;transition:filter .14s,transform .1s;}
.bzp-row-claim:hover{filter:brightness(1.12);transform:scale(1.06);}
.bzp-row-claim:active{transform:scale(.95);}

/* Botón reclamar (dorado) y secundarios */
.buzon-pro-claim{width:100%;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;cursor:pointer;
  color:#3a2700;background:linear-gradient(160deg,#f5b942,#e0941c 55%,#b9760d);border:none;border-radius:11px;padding:12px;margin-bottom:12px;
  box-shadow:0 4px 0 #9a6510;transition:transform .12s,box-shadow .15s;}
.buzon-pro-claim:hover{box-shadow:0 4px 0 #9a6510,0 0 18px rgba(245,166,35,.5);}
.buzon-pro-claim:active{transform:translateY(3px);box-shadow:0 1px 0 #9a6510;}
.buzon-pro-sub{width:100%;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;cursor:pointer;
  color:#9fc1e6;background:#1b2738;border:1px solid #2e3f57;border-radius:9px;padding:10px;margin-top:8px;transition:background .14s;}
.buzon-pro-sub:hover{background:#22304a;}

/* Estado vacío */
.buzon-pro-vacio{text-align:center;color:#6f8aa8;font-weight:600;font-size:14px;padding:26px 10px;}
.buzon-pro-vacio-ic{font-size:2.2rem;opacity:.5;margin-bottom:8px;}

/* Mensajes (burbujas tipo chat) */
.bzp-msg{display:flex;gap:10px;margin-bottom:10px;}
.bzp-av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(160deg,#4a6fa5,#2a4a7a);}
.bzp-bub{flex:1;min-width:0;background:#1c2738;border:1px solid #2a3a52;border-radius:4px 13px 13px 13px;padding:9px 12px;}
.bzp-msg.no-leido .bzp-bub{background:#22304a;border-color:#3a567a;}
.bzp-mh{display:flex;align-items:center;gap:6px;margin-bottom:3px;}
.bzp-mn{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;color:#fff;}
.bzp-dotnew{width:7px;height:7px;border-radius:50%;background:#f5a623;flex:0 0 auto;}
.bzp-mf{font-size:10px;color:#6f8aa8;margin-left:auto;}
.bzp-msg-x{width:20px;height:20px;border-radius:50%;cursor:pointer;flex:0 0 auto;
  background:transparent;border:none;color:#5f7894;font-size:12px;display:flex;align-items:center;justify-content:center;transition:color .14s;}
.bzp-msg-x:hover{color:#ff9a9a;}
.bzp-mt{font-size:14px;color:#cfdae8;font-weight:500;line-height:1.4;word-break:break-word;}

/* Pie del buzón */
.buzon-pro-foot{margin-top:14px;display:flex;justify-content:center;}
.buzon-pro-cerrar{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;cursor:pointer;
  color:#cfd9e6;background:#2a3548;border:1px solid #3a4a64;border-radius:9px;padding:9px 26px;transition:background .14s;}
.buzon-pro-cerrar:hover{background:#34425a;}


.cuenta-user{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;color:#e6edf3;}
.cuenta-btn{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;letter-spacing:.3px;
  background:#2d3a6a;color:#fff;border:1px solid #4a5a9a;border-radius:9px;
  padding:8px 14px;cursor:pointer;transition:.15s;
}
.cuenta-btn:hover{background:#3a4a8a;transform:translateY(-1px);}
.cuenta-btn-ghost{background:transparent;border-color:#3a4366;color:#9aa4b2;}
.cuenta-btn-ghost:hover{background:rgba(255,255,255,.06);}

.contadores-globales{
  display:flex;gap:18px;justify-content:center;margin-top:12px;
  font-family:'Inter',sans-serif;font-size:13px;color:#7d8590;
}
.contadores-globales b{color:#cfd6e4;}

/* Modal de cuenta / trofeos */
.cuenta-modal{
  position:fixed;inset:0;z-index:7000;display:none;
  align-items:center;justify-content:center;background:rgba(5,8,14,.8);padding:20px;
}
.cuenta-modal.open{display:flex;}
.cuenta-card{
  background:#13192a;border:1px solid #2d3a6a;border-radius:16px;
  padding:24px;width:min(380px,94vw);box-shadow:0 18px 60px rgba(0,0,0,.6);position:relative;
}
.cuenta-x{position:absolute;top:12px;right:14px;background:transparent;border:none;color:#7d8590;font-size:20px;cursor:pointer;}
.cuenta-x:hover{color:#e6edf3;}
.cuenta-titulo{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:20px;color:#e6edf3;margin-bottom:16px;text-align:center;}
.cuenta-tabs{display:flex;gap:6px;margin-bottom:16px;}
.cuenta-tab{
  flex:1;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;
  background:#161b22;color:#7d8590;border:1px solid #2d3a6a;border-radius:9px;
  padding:9px;cursor:pointer;transition:.15s;
}
.cuenta-tab-on{background:#2d3a6a;color:#fff;border-color:#4a5a9a;}
.cuenta-form{display:flex;flex-direction:column;gap:10px;}
.cuenta-input{
  background:#0d1117;border:1px solid #2d3a6a;border-radius:9px;color:#e6edf3;
  font-family:'Inter',sans-serif;font-size:14px;padding:11px 12px;
}
.cuenta-input:focus{outline:none;border-color:#f5a623;}
.cuenta-submit{
  background:#27ae60;color:#fff;border:none;border-radius:10px;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;letter-spacing:.5px;
  padding:12px;cursor:pointer;transition:.15s;margin-top:4px;
}
.cuenta-submit:hover{background:#2ecc71;}
.cuenta-submit:disabled{opacity:.6;cursor:default;}
.cuenta-msg{font-family:'Inter',sans-serif;font-size:13px;color:#7d8590;min-height:18px;text-align:center;}
.cuenta-msg-err{color:#ff7060;}
.cuenta-aviso{font-family:'Inter',sans-serif;font-size:11px;color:#6b7280;line-height:1.4;text-align:center;margin-top:6px;}

/* Lista de trofeos */
.trofeos-lista{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto;}
.trofeo-fila{display:flex;align-items:center;gap:12px;background:#161b22;border:1px solid #2d3a6a;border-radius:10px;padding:10px 12px;}
.trofeo-off{opacity:.55;}
.trofeo-on{border-color:#f5a623;}
.trofeo-ico{font-size:24px;flex-shrink:0;}
.trofeo-txt{display:flex;flex-direction:column;}
.trofeo-nombre{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;color:#e6edf3;}
.trofeo-desc{font-family:'Inter',sans-serif;font-size:12px;color:#7d8590;}
.trofeo-vacio{font-family:'Inter',sans-serif;font-size:13px;color:#7d8590;text-align:center;padding:20px;}

/* Toast de trofeo conseguido */
.trofeo-toast{
  position:fixed;top:20px;right:20px;z-index:9500;
  display:flex;align-items:center;gap:12px;
  background:#13192a;border:1px solid #f5a623;border-radius:12px;
  padding:14px 18px;box-shadow:0 10px 40px rgba(0,0,0,.6);
  font-family:'Inter',sans-serif;font-size:13px;color:#e6edf3;
  transform:translateX(120%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
  max-width:300px;
}
.trofeo-toast.show{transform:translateX(0);}
.trofeo-toast-ico{font-size:30px;}

/* ════════════════════════════════════════════════════════════
   ALTO MANDO
   ════════════════════════════════════════════════════════════ */
.am-overlay{
  position:fixed;inset:0;z-index:1200;display:none;
  align-items:flex-start;justify-content:center;
  background:rgba(5,8,16,.92);backdrop-filter:blur(3px);
  overflow-y:auto;padding:24px 12px;
}
.am-overlay.active{display:flex;}
.am-panel{
  width:min(680px,96vw);background:var(--surface);
  border:1px solid var(--border);border-radius:16px;
  padding:20px;box-shadow:0 16px 50px rgba(0,0,0,.6);
  margin:auto 0;
}
.am-head{position:relative;text-align:center;margin-bottom:18px;}
.am-head h2{
  font-family:var(--game);font-weight:700;font-size:26px;letter-spacing:1px;
  color:var(--accent);margin:0 0 4px;
}
.am-sub{color:var(--muted);font-size:14px;font-family:var(--body);line-height:1.4;}
.am-close{
  position:absolute;left:0;top:0;width:38px;height:38px;border-radius:10px;
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.am-close:hover{background:var(--border);}

/* Rejilla de generaciones */
.am-gen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.am-gen-card{
  background:var(--surface2);border:1px solid var(--border);border-radius:12px;
  padding:14px 10px;cursor:pointer;text-align:center;transition:transform .12s,border-color .12s;
  color:var(--text);font-family:var(--body);
}
.am-gen-card:hover{transform:translateY(-2px);border-color:var(--accent);}
.am-gen-num{font-family:var(--game);font-weight:700;font-size:20px;color:var(--accent);}
.am-gen-juego{font-size:12px;font-weight:600;margin:3px 0;}
.am-gen-meta{font-size:11px;color:var(--muted);}

/* ── Tarjetas de generación rediseñadas (estilo coherente con el selector
   de generación): acento de color limpio por región + sprite del Pokémon
   estrella del campeón en la esquina + jerarquía clara. ── */
.am-gen-grid{ gap:14px; }
.am-card{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:148px;
  padding:14px 14px 12px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--am-accent) 22%, transparent) 0%, rgba(255,255,255,0) 55%),
    var(--surface2);
  border:1px solid var(--border);
  border-radius:16px;
  cursor:pointer;
  overflow:hidden;
  text-align:left;
  isolation:isolate;
  transition:transform .18s cubic-bezier(.34,1.4,.5,1), border-color .18s, box-shadow .18s;
  color:var(--text);font-family:var(--body);
}
.am-card:hover,.am-card:focus-visible{
  transform:translateY(-5px);
  border-color:var(--am-accent);
  box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 0 1px var(--am-accent) inset;
  outline:none;
}
.am-card:active{ transform:translateY(-2px) scale(.985); }
.am-card-glow{
  position:absolute;top:-42%;right:-32%;width:170px;height:170px;
  background:radial-gradient(circle, var(--am-accent) 0%, transparent 68%);
  opacity:.18;z-index:-1;pointer-events:none;transition:opacity .2s, transform .35s ease;
}
.am-card:hover .am-card-glow{ opacity:.34;transform:scale(1.25); }
.am-card-top{ position:relative;z-index:1;display:flex;flex-direction:column;gap:1px; }
.am-card-region{
  font-family:var(--game);font-weight:700;font-size:1.4rem;letter-spacing:1px;
  color:var(--am-accent);text-shadow:0 1px 8px rgba(0,0,0,.45);line-height:1.05;
}
.am-card-champ{
  font-family:var(--game);font-weight:700;font-size:.82rem;letter-spacing:.5px;
  color:var(--text);opacity:.85;
}
.am-card-img{
  position:absolute;right:-12px;bottom:4px;width:104px;height:104px;
  object-fit:contain;opacity:.95;z-index:0;pointer-events:none;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.55));
  transition:transform .3s ease, opacity .2s;
}
.am-card:hover .am-card-img{ transform:scale(1.1) rotate(-3deg);opacity:1; }
.am-card-bottom{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:1px;max-width:64%;
}
.am-card-game{
  font-family:var(--game);font-weight:600;font-size:.92rem;color:var(--text);letter-spacing:.3px;
}
.am-card-meta{
  font-family:var(--body);font-size:.7rem;color:var(--muted);letter-spacing:.3px;
}

/* Lista de rivales de una generación */
.am-rivales{
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  padding:8px;margin-bottom:16px;
}
.am-rival-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  font-family:var(--body);
}
.am-rival-row+.am-rival-row{border-top:1px solid rgba(255,255,255,.04);}
.am-rival-i{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--surface2);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--accent);
}
.am-rival-nom{font-weight:700;font-size:15px;flex:1;}
.am-rival-esp{font-size:12px;color:var(--muted);}
.am-rival-n{font-size:12px;color:var(--muted);width:20px;text-align:right;}
.am-rival-champ{background:linear-gradient(90deg,rgba(245,166,35,.12),transparent);}
.am-rival-champ .am-rival-i{background:var(--accent);color:#1a1a1a;}
.am-rival-champ .am-rival-nom{color:var(--accent);}

/* Modo y equipo */
.am-modo-title{font-family:var(--game);font-weight:700;font-size:16px;margin-bottom:8px;color:var(--text);}
.am-modo-box,.am-equipo-box{margin-bottom:16px;}
.am-modo-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.am-modo-btn{
  background:rgba(255,255,255,.06);border:none;border-radius:14px;
  padding:14px 12px;cursor:pointer;text-align:center;color:#fff;
  font-family:var(--game,inherit);font-weight:700;
  box-shadow:0 4px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .1s,box-shadow .1s,background .12s;
}
.am-modo-btn:hover{filter:brightness(1.1);}
.am-modo-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.5);}
.am-modo-btn b{display:block;font-size:14px;margin-bottom:3px;font-weight:800;}
.am-modo-btn span{font-size:11px;color:rgba(255,255,255,.5);line-height:1.3;font-family:inherit;font-weight:400;letter-spacing:0;}
.am-modo-btn.am-modo-on{background:rgba(255,255,255,.06);}
/* Activo: fondo sólido del color correspondiente, sombra inferior del mismo color */
.am-glow-green.am-modo-on{background:#27ae60;box-shadow:0 4px 0 #1a7a42,inset 0 1px 0 rgba(255,255,255,.2);}
.am-glow-green.am-modo-on b{color:#fff;}
.am-glow-red.am-modo-on{background:#c0392b;box-shadow:0 4px 0 #8a2018,inset 0 1px 0 rgba(255,255,255,.2);}
.am-glow-red.am-modo-on b{color:#fff;}
.am-glow-blue.am-modo-on{background:#2980b9;box-shadow:0 4px 0 #1a5a88,inset 0 1px 0 rgba(255,255,255,.2);}
.am-glow-blue.am-modo-on b{color:#fff;}
.am-glow-gold.am-modo-on{background:#d4860a;box-shadow:0 4px 0 #9a6000,inset 0 1px 0 rgba(255,255,255,.2);}
.am-glow-gold.am-modo-on b{color:#fff;}
.am-equipo-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.am-eq-btn{
  border:none;border-radius:14px;padding:16px 8px;cursor:pointer;
  color:#fff;font-family:var(--game);font-weight:800;font-size:14px;letter-spacing:.8px;
  transition:filter .12s,transform .1s,box-shadow .1s;text-transform:uppercase;
  text-align:center;text-shadow:0 1px 5px rgba(0,0,0,.5);
}
.am-eq-btn:hover{filter:brightness(1.12);}
.am-eq-btn:active{transform:translateY(2px);}
.am-eq-draft{
  background:#d4860a;
  box-shadow:0 4px 0 #8a5500,inset 0 1px 0 rgba(255,255,255,.18);
}
.am-eq-select{
  background:#c0392b;
  box-shadow:0 4px 0 #8a1a10,inset 0 1px 0 rgba(255,255,255,.18);
}
.am-eq-random{
  background:#2980b9;
  box-shadow:0 4px 0 #1a5a88,inset 0 1px 0 rgba(255,255,255,.18);
}
.am-eq-import{
  background:#27ae60;
  box-shadow:0 4px 0 #1a7a40,inset 0 1px 0 rgba(255,255,255,.18);
}

/* Banner del rival actual durante el combate */
.am-rival-banner{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);
  background:rgba(13,17,23,.95);border:2px solid var(--accent);border-radius:14px;
  padding:14px 26px;text-align:center;z-index:60;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;
}
.am-rival-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
.am-banner-prog{display:block;font-size:12px;color:var(--muted);font-family:var(--body);}
.am-banner-nom{display:block;font-family:var(--game);font-weight:700;font-size:24px;color:var(--accent);}
.am-banner-esp{display:block;font-size:13px;color:var(--text);font-family:var(--body);}

/* Interludio entre combates */
.am-inter{text-align:center;}
.am-inter-win{font-family:var(--game);font-weight:700;font-size:24px;color:var(--good);margin-bottom:10px;}
.am-inter-team{font-size:14px;color:var(--text);margin-bottom:16px;font-family:var(--body);}
.am-inter-next{
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:12px;margin-bottom:18px;font-family:var(--body);
}
.am-inter-next b{color:var(--accent);font-size:17px;}
.am-inter-next span{display:block;font-size:12px;color:var(--muted);margin-top:3px;}
.am-inter-go{width:100%;margin-bottom:10px;}
.am-inter-quit{
  width:100%;
  background:linear-gradient(135deg,#e0353b,#b5232a);
  border:none;border-radius:12px;
  color:#fff;font-size:16px;font-weight:700;
  font-family:var(--game,var(--body));letter-spacing:.5px;
  padding:14px;cursor:pointer;transition:.15s;
  box-shadow:0 3px 12px rgba(200,40,46,.35);
}
.am-inter-quit:hover{
  background:linear-gradient(135deg,#ec474d,#c9282f);
  transform:translateY(-1px);box-shadow:0 5px 16px rgba(200,40,46,.45);
}
.am-inter-quit:active{transform:translateY(0);}

/* Pantalla final */
.am-final{text-align:center;}
.am-final-title{font-family:var(--game);font-weight:700;font-size:30px;margin-bottom:10px;}
.am-final-win .am-final-title{color:var(--accent);}
.am-final-lose .am-final-title{color:var(--accent2);}
.am-final-sub{color:var(--text);font-size:15px;margin-bottom:16px;font-family:var(--body);line-height:1.4;}
.am-final-trophy{font-size:64px;margin-bottom:16px;}
.am-final .btn-primary{width:100%;margin-bottom:10px;}

@media(max-width:680px){
  .am-gen-grid{grid-template-columns:repeat(2,1fr);}
  .am-modo-opts{grid-template-columns:1fr;}
  .am-equipo-opts{grid-template-columns:1fr;}
  .am-head h2{font-size:22px;}
}


/* ════════════════════════════════════════════════════════════
   DRAFT 2.0 — rediseño completo (equipo arriba, sin rival)
   ════════════════════════════════════════════════════════════ */
#screen-draft.active{display:flex;flex-direction:column;height:100dvh;height:100vh;overflow:hidden;background:var(--bg);}

/* Cabecera */
.draft2-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:10px 18px;background:linear-gradient(180deg,var(--surface),#141a24);
  border-bottom:1px solid var(--border);flex-shrink:0;gap:16px;
}
.draft2-head-left{padding-top:4px;}
.draft2-head-left{display:flex;align-items:baseline;gap:10px;flex-shrink:0;}
.draft2-type-strip{
  display:flex;align-items:center;gap:4px;
  justify-content:flex-end;flex-wrap:wrap;
}
.draft2-type-btn{
  width:30px;height:30px;padding:0;border:2px solid transparent;border-radius:50%;
  background:rgba(255,255,255,.05);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .12s,border-color .12s,background .12s,opacity .12s,box-shadow .12s;opacity:.6;
}
.draft2-type-btn img{width:22px;height:22px;border-radius:50%;display:block;}
/* Tipos PRESENTES en el pool: visibles, con glow de SU color de tipo. */
.draft2-type-btn.available{opacity:1;box-shadow:0 0 10px -1px var(--tcol,#fff);}
.draft2-type-btn:hover{opacity:1;transform:translateY(-2px) scale(1.1);background:rgba(255,255,255,.14);}
.draft2-type-btn.available:hover{box-shadow:0 0 13px var(--tcol,#fff);}
.draft2-type-btn.active{opacity:1;border-color:#fff;background:rgba(255,255,255,.2);
  box-shadow:0 0 14px var(--tcol,#fff);transform:scale(1.08);}
.draft2-type-strip:has(.active) .draft2-type-btn:not(.active){opacity:.4;box-shadow:none;}
.draft2-title{font-family:var(--game);font-weight:700;font-size:24px;letter-spacing:1.5px;color:var(--accent);}
.draft2-subtitle{font-family:var(--body);font-size:13px;color:var(--muted);font-weight:500;}
.draft2-brand{display:flex;align-items:center;gap:5px;font-family:var(--game);font-weight:700;font-size:12px;letter-spacing:1px;}


/* Barra de equipo (arriba) */
/* (la barra de equipo se define más abajo como panel lateral derecho) */


.draft2-slot-filled{
  position:relative;aspect-ratio:1;
  background:linear-gradient(160deg, color-mix(in srgb, var(--type-col,#5da0e8) 26%, transparent), var(--surface2));
  border:2px solid var(--type-col,var(--good));
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  transition:transform .12s;animation:draft2pop .18s ease;overflow:hidden;
}
.draft2-slot-filled:hover{transform:translateY(-2px);}
.draft2-slot-filled img{width:74%;height:74%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));}
/* Botón ✕ para quitar (arriba-derecha), X normal y clara */
.draft2-slot-x{
  position:absolute;top:1px;right:1px;width:16px;height:16px;border-radius:50%;
  background:rgba(20,24,32,.85);border:1px solid rgba(255,120,120,.5);color:#ff8a8a;
  font-size:9px;font-weight:700;line-height:1;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;padding:0;transition:background .12s,color .12s;
}
.draft2-slot-x:hover{background:#e23d3d;color:#fff;border-color:#e23d3d;}
/* Botón shiny (abajo-izquierda) en los slots de equipo */
.draft2-shiny{
  position:absolute;bottom:1px;left:1px;width:16px;height:16px;border-radius:50%;
  background:rgba(20,24,32,.85);border:1px solid rgba(245,197,66,.5);color:#7d8696;
  font-size:9px;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;
  padding:0;transition:color .12s,background .12s;
}
.draft2-shiny.on{color:#f5c542;border-color:#f5c542;box-shadow:0 0 7px rgba(245,197,66,.6);}
.draft2-shiny:hover{color:#f5c542;}
.draft2-slot-empty{
  aspect-ratio:1;background:var(--bg);border:2px dashed var(--border);border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:#3a4566;font-size:24px;font-weight:300;
}
@keyframes draft2pop{from{transform:scale(.7);opacity:0;}to{transform:scale(1);opacity:1;}}

/* Pool de Pokémon */
/* Zona central: solo el pool */
.draft2-main{display:flex;flex:1;min-height:0;overflow:hidden;}
.draft2-pool{flex:1;overflow-y:auto;padding:14px 16px;min-height:0;}

/* Cabecera: a la derecha, dos filas → tipos (arriba) y equipo (abajo) */
.draft2-head-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:1;min-width:0;}
.draft2-team-row{display:flex;align-items:center;gap:10px;}
.draft2-team-label{font-family:var(--game);font-weight:700;font-size:12px;letter-spacing:1px;color:var(--accent);white-space:nowrap;}
.draft2-team-count{color:var(--text);margin-left:4px;}
.draft2-team-slots{display:flex;gap:6px;}
.draft2-team-slots > *{width:48px;height:48px;}

/* Tooltip de Pokémon seleccionado (hover en el equipo del header) */
#draft-tooltip{
  position:fixed;z-index:9999;display:none;width:208px;padding:12px;
  background:linear-gradient(180deg,#1b2330,#141a24);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.6);pointer-events:none;
}
#draft-tooltip > img{width:78px;height:78px;image-rendering:pixelated;display:block;margin:0 auto 6px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
#draft-tooltip .dt-name{font-family:var(--game);font-weight:700;font-size:16px;color:#fff;
  text-align:center;text-transform:capitalize;}
#draft-tooltip .dt-types{display:flex;justify-content:center;gap:4px;margin:5px 0 8px;}
#draft-tooltip .dt-item{font-size:11px;color:var(--text);font-family:var(--body);text-align:center;margin-bottom:8px;}
#draft-tooltip .dt-item b{font-family:var(--game);color:var(--muted);font-size:10px;text-transform:uppercase;}
#draft-tooltip .dt-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin-bottom:8px;}
#draft-tooltip .dt-stat{display:flex;align-items:center;gap:5px;}
#draft-tooltip .dt-stat-l{font-family:var(--game);font-size:9px;font-weight:700;color:var(--muted);width:28px;text-align:right;}
#draft-tooltip .dt-stat-bar{flex:1;height:4px;background:rgba(0,0,0,.4);border-radius:3px;overflow:hidden;}
#draft-tooltip .dt-stat-bar span{display:block;height:100%;border-radius:3px;}
#draft-tooltip .dt-stat-v{font-family:var(--game);font-size:10px;font-weight:700;color:var(--text);width:22px;}
#draft-tooltip .dt-moves{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
#draft-tooltip .dt-move{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text);
  font-family:var(--body);background:rgba(255,255,255,.05);border-radius:6px;padding:3px 6px;}
#draft-tooltip .dt-move img{width:14px;height:14px;margin:0;flex:0 0 14px;}
#draft-tooltip .dt-move span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.draft2-pool-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.draft2-pool-title{font-family:var(--game);font-weight:700;font-size:15px;letter-spacing:1.5px;color:var(--text);}
.draft2-pool-hint{font-family:var(--body);font-size:13px;color:var(--muted);font-weight:600;}
.pokemon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}

/* Tarjetas — ficha horizontal: sprite grande a la izquierda (mitad), datos a la derecha */
.poke-card{
  position:relative;display:flex;align-items:stretch;gap:10px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--type-col,#5da0e8) 30%, transparent) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, var(--surface), #14192a);
  border:2px solid var(--border);border-radius:16px;padding:11px;cursor:pointer;
  text-align:left;transition:transform .14s cubic-bezier(.34,1.4,.5,1),border-color .14s,box-shadow .14s;
  overflow:hidden;isolation:isolate;min-height:140px;
}
.poke-card::after{
  content:'';position:absolute;top:-35%;left:-8%;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle, var(--type-col,#5da0e8) 0%, transparent 66%);
  opacity:.2;z-index:0;pointer-events:none;transition:opacity .2s, transform .35s ease;
}
.poke-card:hover:not(.selected):not(.disabled){
  transform:translateY(-4px);border-color:var(--type-col,var(--accent));
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 1px var(--type-col,transparent) inset;
}
.poke-card:hover::after{opacity:.38;transform:scale(1.18);}
.poke-card:hover .pc-img{transform:scale(1.08) translateY(-2px);}
.poke-card.selected{border-color:var(--good);box-shadow:0 0 0 2px rgba(39,174,96,.45),0 8px 22px rgba(0,0,0,.45);}
.poke-card.selected::after{background:radial-gradient(circle, var(--good) 0%, transparent 66%);opacity:.28;}
.poke-card.disabled{opacity:.4;cursor:default;}

/* Sprite a la izquierda, ocupando ~40% (3 columnas, más estrecho) */
.pc-figure{
  position:relative;z-index:1;flex:0 0 40%;width:40%;
  display:flex;align-items:center;justify-content:center;
}
.poke-card .pc-img{
  height:104px;width:auto;max-width:100%;object-fit:contain;object-position:center;
  image-rendering:pixelated;filter:drop-shadow(0 6px 11px rgba(0,0,0,.6));transition:transform .18s ease;
}

/* Datos a la derecha */
.pc-body{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;justify-content:center;}
.pc-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.pc-name{
  font-family:var(--game);font-weight:700;font-size:17px;color:#fff;text-transform:capitalize;
  text-shadow:0 1px 4px rgba(0,0,0,.6);letter-spacing:.3px;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pc-types{display:flex;gap:4px;flex-wrap:wrap;}
.pc-abil{font-family:var(--body);font-size:12px;color:var(--text);opacity:.9;}
.pc-abil-lbl{font-family:var(--game);font-weight:700;font-size:10px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;}
.pc-bst{display:flex;align-items:center;gap:7px;}
.pc-bst-label{font-family:var(--game);font-size:9px;color:var(--muted);font-weight:700;letter-spacing:.5px;}
.pc-bst-bar{flex:0 1 80px;height:6px;background:rgba(0,0,0,.45);border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.5);}
.pc-bst-fill{display:block;height:100%;border-radius:4px;transition:width .3s ease;}
.pc-bst-val{font-family:var(--game);font-size:13px;font-weight:800;min-width:30px;text-align:left;}
.pc-moves{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:2px;}
.pc-move{
  display:flex;align-items:center;gap:5px;
  font-family:var(--body);font-size:11px;color:#fff;opacity:.96;
  background:color-mix(in srgb, var(--mv-col,#888) 24%, transparent);
  border:1px solid color-mix(in srgb, var(--mv-col,#888) 60%, transparent);
  padding:3px 7px;border-radius:6px;min-width:0;overflow:hidden;
}
.pc-move img{width:15px!important;height:15px!important;flex:0 0 15px;align-self:center;image-rendering:pixelated;object-fit:contain;}
.pc-move-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 6 stats con mini-barra de color (pequeñas, 2 columnas) */
.pc-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin-top:5px;}
.pc-stat{display:flex;align-items:center;gap:5px;}
.pc-stat-lbl{font-family:var(--game);font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.2px;width:30px;flex-shrink:0;text-align:right;}
.pc-stat-bar{flex:1;height:4px;background:rgba(0,0,0,.4);border-radius:3px;overflow:hidden;min-width:0;}
.pc-stat-fill{display:block;height:100%;border-radius:3px;}
.pc-stat-val{font-family:var(--game);font-size:10px;font-weight:700;color:var(--text);width:22px;flex-shrink:0;text-align:left;}

/* ── MÓVIL: la ficha horizontal se reordena a tarjeta vertical compacta:
   sprite arriba centrado, nombre, tipos y ataques en texto sin iconos. ── */
@media (max-width:680px){
  .poke-card{
    flex-direction:column;align-items:center;text-align:center;gap:6px;
    min-height:0;padding:10px 8px 11px;
  }
  .pc-figure{flex:0 0 auto;width:auto;background:none;box-shadow:none;}
  .poke-card .pc-img{height:78px;}
  .pc-body{align-items:center;width:100%;gap:4px;}
  .pc-head{justify-content:center;}
  .pc-name{font-size:14px;}
  .pc-abil{font-size:11px;}
  .pc-bst-bar{flex-basis:70px;}
  /* Ataques: 2 columnas, CON icono y color de tipo (hay sitio) */
  .pc-moves{grid-template-columns:1fr 1fr;gap:3px;width:100%;}
  .pc-move{font-size:9.5px;padding:3px 5px;gap:4px;justify-content:flex-start;}
  .pc-move img{display:inline-block!important;width:13px!important;height:13px!important;flex:0 0 13px;}
  .pc-move-nm{display:inline-block;}
  /* Las 6 stats individuales se ocultan en móvil (no caben); queda la barra BST */
  .pc-stats{display:none;}
}
/* Check de tarjeta seleccionada */
.pc-check{
  position:absolute;top:6px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--good);
  color:#fff;font-size:11px;display:none;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.poke-card.selected .pc-check{display:flex;}
/* Etiquetas legendario / singular */
.pc-tag{position:absolute;top:6px;left:8px;font-family:var(--game);font-weight:700;font-size:8px;padding:2px 5px;border-radius:5px;letter-spacing:.5px;}
.pc-tag-leg{background:var(--surface2);color:var(--accent);border:1px solid var(--accent);}
.pc-tag-myt{background:var(--surface2);color:#c084fc;border:1px solid #c084fc;}
.pdx-tag{position:absolute;top:6px;left:6px;z-index:3;font-family:var(--game);font-weight:700;font-size:8px;padding:2px 5px;border-radius:5px;letter-spacing:.5px;}
.pdx-tag-leg{background:var(--surface2);color:var(--accent);border:1px solid var(--accent);}
.pdx-tag-myt{background:var(--surface2);color:#c084fc;border:1px solid #c084fc;}

/* Etiquetas de categoría en tooltip de hover y modal de la Pokédex */
.dt-tier-badge{display:inline-block;font-family:var(--game);font-weight:700;font-size:9px;color:#0d1117;padding:1px 6px;border-radius:5px;letter-spacing:.4px;vertical-align:middle;}
/* Botón de cambio de Pokémon en batalla: borde + chip de categoría */
.switch-btn-tier{border:1.5px solid var(--tier-col,var(--border)) !important;box-shadow:0 0 0 1px var(--tier-col,transparent) inset, 0 0 8px -2px var(--tier-col,transparent);}
.sw-tier{position:absolute;top:3px;right:3px;z-index:2;font-family:var(--game);font-weight:700;font-size:7px;color:#0d1117;padding:1px 4px;border-radius:4px;letter-spacing:.3px;}
.switch-btn{position:relative;}
.msp-name .sw-tier{position:static;font-size:9px;margin-left:5px;}
.pct-tier-badge,.pdx-modal-tier{display:inline-block;font-family:var(--game);font-weight:700;font-size:9px;color:#0d1117;padding:1px 6px;border-radius:5px;letter-spacing:.4px;vertical-align:middle;}
.pdx-modal-tier{font-size:10px;margin-left:4px;}
.pdx-modal-header[style*="--tier-col"]{border-left:3px solid var(--tier-col);padding-left:9px;border-radius:0 8px 8px 0;}

/* ── Tarjetas de CAMBIO (Pokémon disponibles) con acento de tipo, coherentes
   con el resto del juego: tinte del color de tipo, borde, sprite, HP, tipos y
   ataques con icono. ── */
.switch-card{
  position:relative;display:flex;flex-direction:column;gap:6px;cursor:pointer;text-align:left;
  padding:9px;border-radius:13px;overflow:hidden;isolation:isolate;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--acc,#3fcf8e) 26%, transparent) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, var(--surface,#18202b), #14192a);
  border:1.5px solid color-mix(in srgb, var(--acc,#3fcf8e) 45%, var(--border,#2c3744));
  transition:transform .14s, box-shadow .14s, border-color .14s;
}
.switch-card::after{
  content:'';position:absolute;top:-30%;right:-22%;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle, var(--acc,#3fcf8e) 0%, transparent 66%);
  opacity:.18;z-index:-1;pointer-events:none;transition:opacity .2s, transform .3s;
}
.switch-card:hover:not(:disabled){transform:translateY(-3px);border-color:var(--acc,#3fcf8e);
  box-shadow:0 10px 24px rgba(0,0,0,.5), 0 0 0 1px var(--acc,transparent) inset;}
.switch-card:hover:not(:disabled)::after{opacity:.34;transform:scale(1.2);}
.switch-card:disabled{opacity:.4;cursor:default;}
.switch-card-active{outline:2px solid var(--acc,#3fcf8e);outline-offset:-2px;}
.switch-card-fainted{filter:grayscale(.7);}
.swc-top{display:flex;align-items:center;gap:9px;position:relative;z-index:1;}
.swc-spr{width:54px;height:54px;flex-shrink:0;image-rendering:pixelated;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));}
.swc-tier{position:absolute;top:-3px;left:-3px;z-index:3;font-family:var(--game);font-weight:800;font-size:8px;color:#0d1117;padding:2px 5px;border-radius:5px;letter-spacing:.4px;box-shadow:0 1px 4px rgba(0,0,0,.5);}
.swc-info{flex:1;min-width:0;}
.swc-name{font-family:var(--game);font-weight:700;font-size:14px;color:#fff;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.swc-hp-bar{height:5px;background:rgba(0,0,0,.45);border-radius:3px;overflow:hidden;margin:4px 0 2px;}
.swc-hp-fill{height:100%;border-radius:3px;transition:width .3s;}
.swc-hp-num{font-family:var(--game);font-size:10px;font-weight:700;color:var(--muted);}
.swc-ko{color:#ff8a8a;}
.swc-types{display:flex;gap:4px;position:relative;z-index:1;}
.swc-type{font-family:var(--game);font-weight:700;font-size:9px;padding:1px 7px;border-radius:5px;letter-spacing:.3px;}
.swc-moves{display:grid;grid-template-columns:1fr 1fr;gap:3px;position:relative;z-index:1;}
.swc-move{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:2px 5px;min-width:0;}
.swc-move img{width:13px;height:13px;flex:0 0 13px;image-rendering:pixelated;}
.swc-move-nm{flex:1;min-width:0;font-family:var(--body);font-size:9.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.swc-move-pp{font-family:var(--game);font-size:9px;font-weight:700;color:var(--muted);}
.swc-move-pp-low{color:#ff8a8a;}
.swc-move-pp-mid{color:#f5a623;}

/* ── Categorías (legendario/singular/ultraente/paradoja) — estilo unificado ──
   El color exacto llega por la variable inline --tier-col desde el JS. */
.pdx-tag-legendary,.pdx-tag-singular,.pdx-tag-ultrabeast,.pdx-tag-paradox,
.pc-tag-legendary,.pc-tag-singular,.pc-tag-ultrabeast,.pc-tag-paradox{
  background:var(--surface2);color:var(--tier-col,#aaa);border:1px solid var(--tier-col,#aaa);
}
/* Borde de color en las tarjetas según categoría */
.pdx-card-tier{border:1.5px solid var(--tier-col,var(--border)) !important;box-shadow:0 0 0 1px var(--tier-col,transparent) inset, 0 0 10px -2px var(--tier-col,transparent);}
.poke-card.pc-tier{border:1.5px solid var(--tier-col,var(--border)) !important;box-shadow:0 0 0 1px var(--tier-col,transparent) inset, 0 0 10px -2px var(--tier-col,transparent);}
.tb-pick-card.tb-pick-tier{border:1.5px solid var(--tier-col,var(--border)) !important;box-shadow:0 0 0 1px var(--tier-col,transparent) inset;}
/* Etiqueta de rareza del builder para las 4 categorías */
.tb-pick-rarity-legendary,.tb-pick-rarity-singular,.tb-pick-rarity-ultrabeast,.tb-pick-rarity-paradox{
  background:var(--tier-col,#888);color:#0d1117;
}

/* Barra de acción inferior */
.draft2-actionbar{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:#11151c;border-top:1px solid var(--border);flex-shrink:0;
}
.draft2-btn-ghost{
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:#2a3050;border:none;
  color:#fff;border-radius:12px;padding:12px 15px;font-family:var(--game);font-weight:700;
  font-size:13px;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 0 rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1);
  transition:filter .12s,transform .1s,box-shadow .1s;
}
.draft2-btn-ghost svg{width:18px;height:18px;display:block;flex-shrink:0;}
.draft2-btn-ghost:hover{filter:brightness(1.18);}
.draft2-btn-ghost:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.5);}
.draft2-confirm{
  flex:1;border:none;color:#1a1a1a;border-radius:12px;padding:14px;
  font-family:var(--game);font-weight:800;font-size:17px;letter-spacing:1px;cursor:pointer;
  background:#d4860a;
  box-shadow:0 4px 0 #8a5500,inset 0 1px 0 rgba(255,255,255,.22);
  transition:filter .12s,transform .1s,box-shadow .1s;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.draft2-confirm:not(:disabled):hover{filter:brightness(1.1);}
.draft2-confirm:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 #8a5500;}
.draft2-confirm:disabled{opacity:.35;cursor:default;background:#444;box-shadow:0 4px 0 #222;color:#888;}

/* ── Móvil ── */
@media(max-width:680px){
  .draft2-title{font-size:20px;}
  .draft2-subtitle{display:none;}
  .draft2-team-slots{gap:5px;}
  .draft2-slot-filled img{width:34px;height:34px;}
  .draft2-slot-name{font-size:9px;}
  .draft2-slot-empty{font-size:18px;}
  .pokemon-grid{grid-template-columns:1fr;gap:10px;}
  .pc-name{font-size:15px;}
  .pc-bst-bar{flex-basis:80px;}
  .draft2-confirm{font-size:14px;padding:13px;}
  .draft2-btn-ghost{padding:11px 10px;font-size:12px;}
}
@media(max-width:430px){
  .pokemon-grid{grid-template-columns:1fr;}
  .draft2-team-slots{grid-template-columns:repeat(6,1fr);}
}

/* ── Stats en el tooltip del draft ── */
#draft-tooltip .dt-stats{margin:6px 0 8px;}
#draft-tooltip .dt-stat-row{display:flex;align-items:center;gap:6px;margin:2px 0;font-family:var(--game);}
#draft-tooltip .dt-stat-lbl{font-size:10px;font-weight:700;color:#7d8590;width:30px;flex-shrink:0;}
#draft-tooltip .dt-stat-bar{flex:1;height:5px;background:#0a0e14;border-radius:3px;overflow:hidden;}
#draft-tooltip .dt-stat-bar span{display:block;height:100%;border-radius:3px;}
#draft-tooltip .dt-stat-val{font-size:10px;font-weight:700;color:#e6edf3;width:26px;text-align:right;flex-shrink:0;}
#draft-tooltip .dt-stat-total{display:flex;align-items:center;justify-content:space-between;margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--game);}
#draft-tooltip .dt-stat-total span{font-size:11px;font-weight:700;color:#7d8590;letter-spacing:1px;}
#draft-tooltip .dt-stat-total b{font-size:14px;color:var(--accent);}
/* tooltip un poco más ancho para que quepan las barras */
#draft-tooltip{min-width:210px!important;max-width:240px!important;}

/* ── Tarjetas del equipo (arriba) MÁS PEQUEÑAS y refinadas ── */
.draft2-teambar{padding:9px 16px;}
.draft2-team-slots{gap:7px;}
.draft2-slot-filled{
  aspect-ratio:auto;height:62px;border-radius:9px;flex-direction:row;gap:6px;
  padding:0 8px;justify-content:flex-start;
}
.draft2-slot-filled img{width:40px;height:40px;}
.draft2-slot-name{font-size:11px;text-align:left;max-width:none;}
.draft2-slot-check{width:14px;height:14px;font-size:8px;top:3px;right:4px;}
.draft2-slot-empty{aspect-ratio:auto;height:62px;border-radius:9px;font-size:20px;}
@media(max-width:680px){
  .draft2-slot-filled{height:48px;padding:0 4px;gap:3px;flex-direction:column;justify-content:center;}
  .draft2-slot-filled img{width:30px;height:30px;}
  .draft2-slot-name{font-size:8px;text-align:center;}
  .draft2-slot-empty{height:48px;font-size:16px;}
}


/* ════════════════════════════════════════════════════════════
   EFECTOS DE BATALLA (db-fx.js) — partículas, haz, embestida
   ════════════════════════════════════════════════════════════ */
#fx-layer{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden;}
#fx-layer .fx-p{position:absolute;border-radius:50%;transform:translate(-50%,-50%);}
#fx-layer .fx-beam{position:absolute;transform-origin:left center;border-radius:7px;}
#fx-layer .fx-ring{position:absolute;border:3px solid #fff;border-radius:50%;transform:translate(-50%,-50%);animation:fxRing .55s ease-out forwards;}

@keyframes fxSpl{0%{transform:translate(-50%,-50%);opacity:1;}100%{transform:translate(-50%,-50%) translate(var(--dx),var(--dy));opacity:0;}}
@keyframes fxRing{0%{width:12px;height:12px;opacity:.9;}100%{width:108px;height:108px;opacity:0;}}
@keyframes fxFly{0%{opacity:0;}12%{opacity:1;}100%{opacity:0;}}
@keyframes fxRise{0%{opacity:0;transform:translate(-50%,-50%) translateY(8px) scale(.5);}30%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) translateY(-38px) scale(1.1);}}

/* ── Primitivas vistosas adicionales (db-fx.js) ── */
#fx-layer .fx-flash{position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:fxFlash .34s ease-out forwards;mix-blend-mode:screen;}
@keyframes fxFlash{0%{transform:translate(-50%,-50%) scale(.3);opacity:0;}20%{opacity:1;}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0;}}
#fx-layer .fx-shock{position:absolute;border:3px solid #fff;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;width:12px;height:12px;animation:fxShock .6s cubic-bezier(.1,.6,.3,1) forwards;}
@keyframes fxShock{0%{width:10px;height:10px;opacity:.95;border-width:4px;}100%{width:var(--fx-shock-max,130px);height:var(--fx-shock-max,130px);opacity:0;border-width:1px;}}
@keyframes fxBurst{0%{transform:translate(-50%,-50%);opacity:1;}70%{opacity:.9;}100%{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(.4);opacity:0;}}
#fx-layer .fx-charge{position:absolute;width:70px;height:70px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;animation:fxCharge .26s ease-in forwards;}
@keyframes fxCharge{0%{transform:translate(-50%,-50%) scale(1.4);opacity:0;}60%{opacity:.9;}100%{transform:translate(-50%,-50%) scale(.4);opacity:.2;}}
@keyframes fxSparkPop{0%{opacity:0;}30%{opacity:1;}60%{opacity:1;}100%{opacity:0;}}
/* Curación: anillo verde que asciende + partículas verdes subiendo */
#fx-layer .fx-heal-ring{position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  width:60px;height:24px;border-radius:50%;border:3px solid rgba(110,230,130,.9);
  box-shadow:0 0 12px rgba(90,230,120,.8);animation:fxHealRing .7s ease-out forwards;}
@keyframes fxHealRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.6);}25%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) translateY(-56px) scale(1.1);}}
@keyframes fxHealRise{0%{opacity:0;transform:translate(-50%,-50%) translateY(6px) scale(.6);}25%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) translateY(-50px) scale(1);}}

/* Sacudida del campo (impactos físicos) */
.battle-field.fx-shake{animation:fxShake .25s 2;}
@keyframes fxShake{0%,100%{transform:translate(0,0);}25%{transform:translate(-5px,2px);}75%{transform:translate(5px,-2px);}}

/* ── TRAMPAS persistentes en el suelo (db-fx.js) — translúcidas ── */
#fx-hazards{position:absolute;inset:0;pointer-events:none;z-index:3;}
#fx-hazards>div{position:absolute;animation:fxHazDrop .45s ease-out forwards;}
.fx-haz-rock{border-radius:30% 60% 40% 50%;background:linear-gradient(150deg,#d9c890,#8a7320);box-shadow:0 1px 2px rgba(0,0,0,.35);opacity:.95;}
.fx-haz-spike svg{display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));}
.fx-haz-tspike svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}
/* s796/s803 · Sprites de efectos de Showdown (trampas y drenadoras). Opacidad
   completa + sombra marcada para que se vean claramente que están. */
.fx-haz-img{display:block;image-rendering:pixelated;opacity:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 2px rgba(0,0,0,.5));}
.leech-sprout .leech-leaf-img{display:block;height:auto;image-rendering:pixelated;opacity:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.65)) drop-shadow(0 0 4px rgba(120,240,110,.6));}
.leech-sprout.s1 .leech-leaf-img{width:22px;}
.leech-sprout.s2 .leech-leaf-img{width:26px;}
.leech-sprout.s3 .leech-leaf-img{width:20px;}
.fx-haz-tspike{animation:fxHazDropOpaque .45s ease-out forwards !important;}
@keyframes fxHazDrop{0%{transform:translateY(-32px) scale(.5);opacity:0;}60%{opacity:1;}100%{transform:translateY(0) scale(1);opacity:1;}}
@keyframes fxHazDropOpaque{0%{transform:translateY(-32px) scale(.5);opacity:0;}60%{opacity:1;}100%{transform:translateY(0) scale(1);opacity:1;}}

/* ── Botones del footer del Alto Mando ── */
.am-foot-btn{
  display:flex;align-items:center;gap:9px;
  border:2px solid;border-radius:11px;padding:0 18px;height:46px;color:#fff;
  font-family:var(--game);font-weight:800;font-size:14px;cursor:pointer;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  transition:transform .1s,box-shadow .1s,filter .1s;
}
.am-foot-btn svg{width:22px;height:22px;display:block;flex-shrink:0;}
.am-foot-btn:hover{filter:brightness(1.1);}
.am-foot-btn:active{transform:translateY(3px);}
.am-foot-restart{background:linear-gradient(#2ecc71,#1e9e54);border-color:#6ee9a0;box-shadow:0 4px 0 #146e3a,0 5px 12px rgba(39,174,96,.4);}
.am-foot-restart:active{box-shadow:0 1px 0 #146e3a,0 2px 6px rgba(39,174,96,.4);}
.am-foot-reselect{background:linear-gradient(#b06fd6,#8e3fc0);border-color:#d9a8f0;box-shadow:0 4px 0 #5e2a86,0 5px 12px rgba(155,89,182,.4);}
.am-foot-reselect:active{box-shadow:0 1px 0 #5e2a86,0 2px 6px rgba(155,89,182,.4);}

/* ── Fondos temáticos por generación (degradados representativos de cada región) ── */
.am-gen-card{position:relative;overflow:hidden;}
.am-gen-card .am-gen-num,.am-gen-card .am-gen-juego,.am-gen-card .am-gen-meta{position:relative;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,.8);}
.am-gen-card::before{content:'';position:absolute;inset:0;opacity:.85;z-index:0;transition:opacity .15s;}
.am-gen-card:hover::before{opacity:1;}
/* Gen 1 Kanto — rojo/azul clásico */
.am-gen-bg-1::before{background:linear-gradient(135deg,#c0392b,#2a4a8a);}
/* Gen 2 Johto — oro/plata */
.am-gen-bg-2::before{background:linear-gradient(135deg,#b8860b,#708090);}
/* Gen 3 Hoenn — agua/tierra (rubí/zafiro) */
.am-gen-bg-3::before{background:linear-gradient(135deg,#1f7a8c,#a83232);}
/* Gen 4 Sinnoh — diamante/perla, frío */
.am-gen-bg-4::before{background:linear-gradient(135deg,#3a6ea5,#b59fd0);}
/* Gen 5 Teselia — blanco/negro, urbano */
.am-gen-bg-5::before{background:linear-gradient(135deg,#2c3e50,#7f8c8d);}
/* Gen 6 Kalos — azul/rosa, elegante */
.am-gen-bg-6::before{background:linear-gradient(135deg,#2952a3,#c0392b);}
/* Gen 7 Alola — tropical sol/luna */
.am-gen-bg-7::before{background:linear-gradient(135deg,#e67e22,#16a085);}
/* Gen 8 Galanar — espada/escudo, morado/azul */
.am-gen-bg-8::before{background:linear-gradient(135deg,#8e44ad,#2980b9);}
/* Gen 9 Paldea — escarlata/púrpura */
.am-gen-bg-9::before{background:linear-gradient(135deg,#c0392b,#8e44ad);}

/* ── Trofeo de victoria del Alto Mando ── */
.am-trophy{position:relative;display:flex;align-items:center;justify-content:center;margin:8px auto 14px;width:160px;height:160px;}
.am-trophy-rays{position:absolute;width:160px;height:160px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(245,197,24,.0) 0deg,rgba(245,197,24,.35) 20deg,transparent 40deg,rgba(245,197,24,.35) 60deg,transparent 80deg,rgba(245,197,24,.35) 100deg,transparent 120deg,rgba(245,197,24,.35) 140deg,transparent 160deg,rgba(245,197,24,.35) 180deg,transparent 200deg,rgba(245,197,24,.35) 220deg,transparent 240deg,rgba(245,197,24,.35) 260deg,transparent 280deg,rgba(245,197,24,.35) 300deg,transparent 320deg,rgba(245,197,24,.35) 340deg,transparent 360deg);
  animation:amRaysSpin 8s linear infinite;}
@keyframes amRaysSpin{to{transform:rotate(360deg);}}
.am-trophy-svg{position:relative;z-index:1;filter:drop-shadow(0 0 14px rgba(245,197,24,.7));animation:amTrophyPop .6s cubic-bezier(.2,1.4,.4,1);}
@keyframes amTrophyPop{0%{transform:scale(0) rotate(-20deg);opacity:0;}100%{transform:scale(1) rotate(0);opacity:1;}}

/* ── Efecto de viento al limpiar trampas (Giro Rápido, Neblina) ── */
#fx-layer .fx-wind{
  position:absolute;left:-160px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(225,240,255,.9),transparent);
  animation:fxWind .65s ease-out forwards;
}
@keyframes fxWind{
  0%{left:-160px;opacity:0;}
  20%{opacity:1;}
  100%{left:115%;opacity:0;}
}
@keyframes fxWindDust{
  0%{opacity:0;transform:translate(-50%,-50%);}
  20%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-50%) translateX(160px) translateY(-8px);}
}
/* Las trampas salen volando con el viento */
@keyframes fxHazBlow{
  0%{opacity:1;transform:translateY(0) translateX(0) rotate(0);}
  100%{opacity:0;transform:translateY(-14px) translateX(60px) rotate(120deg);}
}

/* ── Modo SPEEDRUN: tarjeta del menú ── */
.am-speedrun-card{
  display:flex;align-items:center;gap:14px;width:100%;
  background:linear-gradient(100deg,#f5a623,#e8503a 60%,#9b59b6);
  border:none;border-radius:14px;padding:16px 18px;margin-bottom:16px;cursor:pointer;
  transition:transform .12s,box-shadow .12s;box-shadow:0 4px 18px rgba(245,166,35,.3);
}
.am-speedrun-card:hover{transform:translateY(-2px);box-shadow:0 6px 26px rgba(245,166,35,.5);}
.am-sr-card-icon{font-size:32px;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
.am-sr-card-text{flex:1;text-align:left;}
.am-sr-card-title{font-family:var(--game);font-weight:800;font-size:20px;letter-spacing:2px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);}
.am-sr-card-sub{font-family:var(--body);font-size:13px;color:rgba(255,255,255,.9);margin-top:2px;}
.am-sr-card-arrow{font-size:18px;color:#fff;flex-shrink:0;opacity:.9;}

/* Interludio de speedrun */
.am-speedrun-inter{border:2px solid var(--accent);box-shadow:0 0 30px rgba(245,166,35,.4);}
.am-sr-badge{
  display:inline-block;background:linear-gradient(90deg,#f5a623,#e8503a);color:#1a1a1a;
  font-family:var(--game);font-weight:800;font-size:12px;letter-spacing:2px;
  padding:4px 14px;border-radius:20px;margin-bottom:10px;
}
.am-sr-progress{display:flex;gap:6px;justify-content:center;margin:14px 0;}
.am-sr-dot{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--game);font-weight:700;font-size:12px;
  background:var(--surface2);color:var(--muted);border:1px solid var(--border);
}
.am-sr-dot.done{background:linear-gradient(135deg,#f5a623,#e8a020);color:#1a1a1a;border-color:#f5a623;box-shadow:0 0 8px rgba(245,166,35,.5);}

/* ── Botón Asistente del constructor ── */
.tb-f-assist{
  background:linear-gradient(135deg,#27ae60,#1e8449);color:#fff;border:none;
  border-radius:8px;padding:8px 16px;font-family:var(--game);font-weight:700;font-size:13px;
  cursor:pointer;transition:transform .12s,box-shadow .12s;box-shadow:0 0 12px rgba(39,174,96,.4);
}
.tb-f-assist:hover{transform:translateY(-1px);box-shadow:0 0 18px rgba(39,174,96,.6);}
.tb-f-assist-on{background:linear-gradient(135deg,#2ecc71,#27ae60);box-shadow:0 0 20px rgba(46,204,113,.7);}

/* Barra de consejo del asistente */
.tb-assist-bar{
  background:linear-gradient(100deg,rgba(39,174,96,.16),rgba(39,174,96,.06));
  border:1px solid rgba(39,174,96,.45);border-left:4px solid #27ae60;
  border-radius:10px;padding:12px 16px;margin:10px 0 12px;
}
.tb-assist-step{font-family:var(--game);font-weight:700;font-size:12px;color:#43d680;letter-spacing:1px;margin-bottom:4px;}
.tb-assist-msg{font-family:var(--body);font-size:14px;color:var(--text);line-height:1.4;}
.tb-assist-msg b{color:#43d680;}

/* Cartas recomendadas por el asistente */
.tb-pick-recommended{
  border:2px solid #2ecc71 !important;
  box-shadow:0 0 16px rgba(46,204,113,.65),inset 0 0 12px rgba(46,204,113,.15) !important;
  animation:tbPulse 1.6s ease-in-out infinite;
}
.tb-pick-recommended::after{
  content:'✨';position:absolute;top:4px;left:4px;font-size:14px;
  filter:drop-shadow(0 0 3px rgba(46,204,113,.9));
}
@keyframes tbPulse{
  0%,100%{box-shadow:0 0 14px rgba(46,204,113,.5),inset 0 0 10px rgba(46,204,113,.12);}
  50%{box-shadow:0 0 22px rgba(46,204,113,.85),inset 0 0 14px rgba(46,204,113,.2);}
}

/* Pick con sinergia destacada (top-3 del asistente): dorado + estrella */
.tb-pick-synergy{
  border:2px solid #f5c542 !important;
  box-shadow:0 0 20px rgba(245,197,66,.8),inset 0 0 14px rgba(245,197,66,.22) !important;
  animation:tbSynergyPulse 1.5s ease-in-out infinite;
}
.tb-pick-synergy::after{
  content:'⭐';position:absolute;top:4px;left:4px;font-size:14px;
  filter:drop-shadow(0 0 3px rgba(245,197,66,.95));
}
@keyframes tbSynergyPulse{
  0%,100%{box-shadow:0 0 16px rgba(245,197,66,.6),inset 0 0 10px rgba(245,197,66,.16);}
  50%{box-shadow:0 0 26px rgba(245,197,66,1),inset 0 0 16px rgba(245,197,66,.28);}
}

/* ── Botones del menú principal (gamer + sprite de Pokémon de fondo, sin icono) ── */
.start-btns{display:flex;flex-direction:column;gap:11px;align-items:center;}
.start-btns-img{gap:11px;}
.menu-btn{
  display:flex;align-items:center;justify-content:center;width:300px;max-width:90vw;
  border:none;border-radius:14px;padding:15px 16px;cursor:pointer;
  font-family:var(--game,inherit);font-weight:800;font-size:16px;letter-spacing:1px;color:#fff;
  position:relative;overflow:hidden;transition:transform .16s,box-shadow .16s,filter .16s;
  text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.55);
}
/* Borde con relieve sutil (como las tarjetas grandes) */
.menu-btn::before{
  content:"";position:absolute;inset:0;border-radius:14px;padding:1.5px;pointer-events:none;z-index:4;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.03) 42%,rgba(0,0,0,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* Reflejo de cristal tenue en la mitad superior */
.menu-btn::after{
  content:"";position:absolute;left:6px;right:6px;top:5px;height:36%;border-radius:12px 12px 30px 30px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0));pointer-events:none;z-index:3;
}
.menu-btn:hover{transform:translateY(-2px);filter:brightness(1.07);}
.menu-btn:active{transform:translateY(0) scale(.99);}
.menu-tx{position:relative;z-index:2;}
/* Sprite: oculto fuera del botón, asoma desde la derecha al pasar el ratón */
.menu-spr{
  position:absolute;right:-78px;top:50%;transform:translateY(-50%) scale(.9);
  width:80px;height:80px;object-fit:contain;image-rendering:pixelated;
  opacity:.55;z-index:1;pointer-events:none;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.45));
  transition:right .35s cubic-bezier(.34,1.56,.64,1),transform .35s,opacity .3s;
}
.menu-btn:hover .menu-spr{right:-2px;transform:translateY(-50%) scale(1.06);opacity:1;}
/* NOTA: los colores de fondo/franja de los botones de modo (.menu-draft, etc.)
   están en un <style> dentro de index.html (a prueba de caché de Nominalia).
   Aquí solo queda la estructura base de .menu-btn (arriba). */

/* ── Pantalla de formato del online (elige cómo jugar) ── */
.online-formato-opts{display:flex;flex-direction:column;gap:13px;align-items:center;margin:6px 0 4px;}
.online-formato-card .online-sub{text-align:center;}

/* Chip de formato en el lobby de retar + botón cambiar */
.online-fmt-chip{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 10px;}
.online-fmt-chip span{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;color:#9fe0d8;background:rgba(31,174,158,.14);border:1px solid rgba(79,209,200,.4);border-radius:20px;padding:4px 13px;}
.online-fmt-cambiar{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12px;color:#7da2c8;background:transparent;border:none;text-decoration:underline;cursor:pointer;padding:2px 4px;}
.online-fmt-cambiar:hover{color:#cfe0f0;}

/* Selector de generación del online */
.online-gen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:8px 0 4px;}
.online-gen-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  background:linear-gradient(160deg,#22304a,#16202e);border:1px solid #314563;border-radius:11px;padding:10px 6px 8px;transition:transform .12s,border-color .14s,box-shadow .14s;}
.online-gen-card:hover{transform:translateY(-2px);border-color:#4a6fa5;box-shadow:0 4px 12px rgba(0,0,0,.4);}
.online-gen-card:active{transform:translateY(0) scale(.98);}
.online-gen-spr{width:46px;height:46px;image-rendering:pixelated;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.online-gen-lbl{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;color:#fff;}
.online-gen-reg{font-size:10px;font-weight:600;color:#7da2c8;}
.online-gen-back{display:block;margin:12px auto 0;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;color:#9fc1e6;
  background:#1b2738;border:1px solid #2e3f57;border-radius:9px;padding:8px 18px;cursor:pointer;transition:background .14s;}
.online-gen-back:hover{background:#22304a;}


/* ════════════════════════════════════════════════════════════════
   MENÚ DE INICIO — Opción B: tarjetas-sección con acordeón
   ════════════════════════════════════════════════════════════════ */
.start-menu{
  display:flex;flex-direction:column;gap:12px;
  width:100%;max-width:560px;margin:0 auto;
}
/* Cada tarjeta ocupa el ancho; su panel se expande dentro (móvil/base). */
.sec-card{width:100%;min-width:0;}

/* Cabecera de sección (la tarjeta grande que se toca) */
.sec-head{
  position:relative;overflow:hidden;width:100%;border:none;cursor:pointer;
  border-radius:16px;padding:18px 16px;min-height:104px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  font-family:var(--game,inherit);color:#fff;text-align:left;
  transition:transform .16s,box-shadow .16s,filter .16s;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.sec-head:hover{transform:translateY(-2px);filter:brightness(1.07);}
.sec-head:active{transform:translateY(0) scale(.99);}
.sec-head::before{
  content:"";position:absolute;inset:0;border-radius:16px;padding:1.5px;pointer-events:none;z-index:4;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.03) 42%,rgba(0,0,0,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.sec-head::after{
  content:"";position:absolute;left:6px;right:6px;top:5px;height:34%;border-radius:14px 14px 30px 30px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0));pointer-events:none;z-index:3;
}
.sec-tx{position:relative;z-index:2;font-weight:800;font-size:21px;letter-spacing:1px;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.sec-sub{position:relative;z-index:2;font-weight:600;font-size:12.5px;letter-spacing:.4px;color:rgba(255,255,255,.82);margin-top:3px;text-shadow:0 1px 3px rgba(0,0,0,.5);}
/* Etiqueta PVE/PVP en color claro del acento */
.sec-tag{font-weight:800;}
/* Chevron arriba a la derecha (no centrado, para no chocar con el sprite) */
.sec-chev,.sec-arrow{position:absolute;top:14px;right:14px;z-index:5;font-size:16px;color:rgba(255,255,255,.9);transition:transform .28s;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.sec-card.open .sec-chev{transform:rotate(180deg);}
/* Sprite grande protagonista, asomando en la esquina inferior derecha (fijo, no al hover) */
.sec-spr{
  position:absolute;right:-8px;bottom:-8px;
  width:90px;height:90px;object-fit:contain;image-rendering:pixelated;opacity:.92;z-index:1;pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));
  transition:transform .3s,opacity .3s;
}
.sec-head:hover .sec-spr{transform:scale(1.06) translate(-2px,-2px);opacity:1;}

/* Colores de cada sección: fondo casi sólido + borde de acento + glow del tipo + sombra fuerte para despegar del fondo */
.sec-pve  .sec-head{background:linear-gradient(150deg,#241a2a,#120d18);border-left:5px solid #e2483d;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 26px rgba(226,72,61,.3),0 10px 28px rgba(0,0,0,.7);}
.sec-pvp  .sec-head{background:linear-gradient(150deg,#16263a,#0a1422);border-left:5px solid #2bbfd6;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 26px rgba(43,191,214,.32),0 10px 28px rgba(0,0,0,.7);}
.sec-build .sec-head{background:linear-gradient(150deg,#16261e,#0a1410);border-left:5px solid #3fcf8e;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 26px rgba(63,207,142,.28),0 10px 28px rgba(0,0,0,.7);}
.sec-tcg  .sec-head{background:linear-gradient(150deg,#221a2e,#120c1a);border-left:5px solid #a06bff;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 26px rgba(160,107,255,.3),0 10px 28px rgba(0,0,0,.7);}
/* Texto base claro; subtítulo y chevron teñidos con el acento */
.sec-tx{color:#fff;}
.sec-pve   .sec-tag-pve{color:#ff8a80;}
.sec-pvp   .sec-tag-pvp{color:#7fe3f0;}
.sec-pve   .sec-sub{color:#c9a8a3;} .sec-pve   .sec-chev{color:#e2483d;}
.sec-pvp   .sec-sub{color:#a3c4cc;} .sec-pvp   .sec-chev{color:#2bbfd6;}
.sec-build .sec-sub{color:#a3c9b3;} .sec-build .sec-chev{color:#3fcf8e;}
.sec-tcg   .sec-sub{color:#b8aac9;} .sec-tcg   .sec-chev{color:#a06bff;}

/* Panel desplegable: aparece debajo de la cabecera, dentro de la tarjeta */
.sec-panel{
  display:flex;flex-direction:column;gap:9px;align-items:center;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .32s ease,opacity .25s ease,padding .32s ease;
  padding:0 6px;
}
/* Al abrir una tarjeta, ocupa TODA la fila (las dos columnas) y empuja lo de abajo */
/* (La tarjeta abierta ya no se ensancha; en PC el panel se posiciona aparte.
   En móvil/columna el panel simplemente se expande debajo.) */
.sec-card.open .sec-panel{max-height:480px;opacity:1;padding:12px 6px 4px;}
/* Dentro del panel, los botones de modo centrados con ancho cómodo */
.sec-panel .menu-btn{width:100%;max-width:460px;}

/* ── Alto Mando: Picker simple ── */
.am-sp-panel{max-height:92vh;display:flex;flex-direction:column;overflow:hidden;}
.am-sp-teambar{
  display:flex;gap:8px;justify-content:center;padding:10px 16px;
  background:rgba(0,0,0,.2);border-bottom:1px solid var(--border);flex-shrink:0;
}
.am-sp-slot{
  width:48px;height:48px;border-radius:10px;border:2px solid var(--border);
  background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .12s,transform .12s;overflow:hidden;
}
.am-sp-slot img{width:44px;height:44px;image-rendering:pixelated;}
.am-sp-slot-on{border-color:var(--accent);}
.am-sp-slot-on:hover{transform:scale(1.08);border-color:#e74c3c;}
.am-sp-slot-empty{cursor:default;opacity:.4;}
.am-sp-search-wrap{padding:10px 14px 6px;flex-shrink:0;}
.am-sp-search{
  width:100%;box-sizing:border-box;background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:8px 12px;color:var(--text);font-size:14px;outline:none;
}
.am-sp-search:focus{border-color:var(--accent);}
.am-sp-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;
  padding:10px 14px;overflow-y:auto;flex:1;
}
.am-sp-card{
  background:var(--surface2);border:2px solid var(--border);border-radius:11px;
  padding:8px 4px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  gap:3px;transition:border-color .12s,transform .12s,background .12s;
  color:var(--text);font-size:10px;
}
.am-sp-card img{width:54px;height:54px;image-rendering:pixelated;}
.am-sp-card:hover{transform:translateY(-2px);border-color:var(--accent);}
.am-sp-card-on{border-color:var(--accent);background:rgba(245,166,35,.12);}
.am-sp-card-dim{opacity:.35;pointer-events:none;}
.am-sp-name{font-weight:600;text-transform:capitalize;text-align:center;line-height:1.2;}
.am-sp-types{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;}
.am-sp-type{
  font-size:8px;font-weight:700;padding:1px 4px;border-radius:3px;
  color:#fff;text-transform:uppercase;
}
.am-sp-footer{
  padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0;
  display:flex;justify-content:center;
}
.am-sp-go{
  background:#d4860a;color:#fff;border:none;border-radius:12px;
  padding:14px 48px;font-family:var(--game);font-weight:800;font-size:15px;
  letter-spacing:1px;cursor:pointer;
  box-shadow:0 4px 0 #8a5500,inset 0 1px 0 rgba(255,255,255,.18);
  transition:filter .12s,transform .1s;text-transform:uppercase;
}
.am-sp-go:hover{filter:brightness(1.1);}
.am-sp-go:active{transform:translateY(2px);box-shadow:0 1px 0 #8a5500;}
.am-sp-go-disabled{background:#444;box-shadow:0 4px 0 #222;opacity:.5;cursor:default;}

/* Type colors for am-sp-type */
.am-sp-type-normal{background:#9ea0a1;}
.am-sp-type-fire{background:#e8554e;}
.am-sp-type-water{background:#4a90d9;}
.am-sp-type-electric{background:#f0c029;}
.am-sp-type-grass{background:#5daa4a;}
.am-sp-type-ice{background:#74cec0;}
.am-sp-type-fighting{background:#d0503a;}
.am-sp-type-poison{background:#9b5fae;}
.am-sp-type-ground{background:#d4a85a;}
.am-sp-type-flying{background:#8ba8e0;}
.am-sp-type-psychic{background:#e8608a;}
.am-sp-type-bug{background:#92a819;}
.am-sp-type-rock{background:#b0a030;}
.am-sp-type-ghost{background:#6060b0;}
.am-sp-type-dragon{background:#5060e0;}
.am-sp-type-dark{background:#5a5070;}
.am-sp-type-steel{background:#a0a8c0;}
.am-sp-type-fairy{background:#e8a8e8;}

/* ── Selector AM ampliado: barra de filtros, slot editable, BST, editor ── */
.am-sp-slot{position:relative;overflow:visible;}
.am-sp-slot img{cursor:pointer;}
/* X estándar del juego: gris, fuera en la esquina del cuadrito */
.am-sp-slot-close{
  position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid var(--border);color:var(--muted);
  font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;transition:all .12s;z-index:2;
}
.am-sp-slot-close:hover{background:var(--accent2,#e74c3c);color:#fff;border-color:transparent;}

.am-sp-filters{
  display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px;flex-shrink:0;align-items:center;
}
.am-sp-search-ico{position:absolute;margin:9px 0 0 8px;opacity:.6;pointer-events:none;font-size:12px;}
.am-sp-filters .am-sp-search-wrap{position:relative;padding:0;flex:1 1 160px;min-width:140px;}
.am-sp-filters .am-sp-search{padding-left:28px;}
.am-sp-f-select{
  background:var(--surface2);color:var(--text);border:1px solid var(--border);
  border-radius:8px;padding:7px 9px;font-family:var(--body);font-size:12px;cursor:pointer;
  flex:0 1 auto;min-width:104px;
}
.am-sp-f-select option{background:var(--surface);color:var(--text);}
.am-sp-f-select:focus{border-color:var(--accent);outline:none;}
.am-sp-f-reset{
  background:transparent;color:var(--muted);border:1px solid var(--border);
  border-radius:8px;padding:7px 12px;font-family:var(--game);font-size:11px;cursor:pointer;
}
.am-sp-f-reset:hover{color:var(--text);border-color:var(--accent);}

.am-sp-card{position:relative;}
.am-sp-bst{
  position:absolute;top:4px;right:5px;font-family:var(--game);font-size:9px;font-weight:700;
  color:var(--muted);background:rgba(0,0,0,.25);border-radius:5px;padding:1px 4px;
}

/* Editor de un Pokémon dentro del overlay del AM — un solo scroll (el del panel) */
.am-sp-editor{overflow-y:auto;}
.am-sp-ed-head{display:flex;align-items:center;gap:14px;padding:6px 16px 12px;flex-shrink:0;}
.am-sp-ed-sprite{width:84px;height:84px;image-rendering:pixelated;}
.am-sp-ed-types{display:flex;gap:5px;flex-wrap:wrap;}
.am-sp-ed-section{padding:8px 16px;border-top:1px solid var(--border);}
.am-sp-ed-title{font-family:var(--game);font-weight:700;font-size:12px;letter-spacing:1px;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.am-sp-muted{color:var(--muted);font-size:12px;}

.am-sp-ab-row{display:flex;gap:6px;flex-wrap:wrap;}
.am-sp-ab-chip{
  background:var(--surface2);color:var(--text);border:1.5px solid var(--border);
  border-radius:18px;padding:6px 13px;font-family:var(--body);font-size:12px;cursor:pointer;transition:all .12s;
}
.am-sp-ab-chip:hover{border-color:var(--accent);}
.am-sp-ab-on{border-color:var(--accent);background:rgba(245,166,35,.15);color:var(--accent);font-weight:700;}
.am-sp-ab-hidden{border-style:dashed;}
.am-sp-ha{font-size:8px;background:var(--accent);color:#1a1a1a;border-radius:4px;padding:0 3px;font-weight:800;}

.am-sp-move-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.am-sp-move-slot{
  position:relative;display:flex;align-items:center;gap:7px;cursor:default;
  background:var(--surface2);border-left:4px solid var(--mt,#888);border-radius:8px;padding:7px 9px;
}
.am-sp-move-slot:hover{background:var(--surface3,var(--surface2));}
.am-sp-move-empty{justify-content:flex-start;color:var(--muted);border-left-color:var(--border);}
.am-sp-move-empty span{color:var(--muted);}
.am-sp-slot-num{font-family:var(--game);font-weight:700;font-size:11px;color:var(--muted);min-width:12px;}
.am-sp-slot-name{flex:1;font-size:12px;font-weight:600;text-transform:capitalize;color:var(--text);}
.am-sp-slot-badge{color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px;}
.am-sp-slot-cat{font-size:10px;color:var(--muted);}
/* X estándar (gris, redonda) para quitar un ataque del slot */
.am-sp-move-remove{
  width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.35);border:1px solid var(--border);
  color:var(--muted);font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;transition:all .12s;flex-shrink:0;
}
.am-sp-move-remove:hover{background:var(--accent2,#e74c3c);color:#fff;border-color:transparent;}

.am-sp-move-search{margin-bottom:8px;}
/* Sin scroll interno: la lista fluye y el panel hace el scroll global */
.am-sp-pool{display:flex;flex-wrap:wrap;gap:5px;}
.am-sp-pool-move{
  display:flex;align-items:center;gap:6px;background:var(--surface2);color:var(--text);
  border:1px solid var(--border);border-left:4px solid var(--mt,#888);border-radius:7px;
  padding:5px 8px;cursor:pointer;font-size:11px;transition:all .12s;
}
.am-sp-pool-move:hover{border-color:var(--accent);}
.am-sp-pool-name{text-transform:capitalize;font-weight:600;color:var(--text);}
.am-sp-pool-on{background:rgba(245,166,35,.18);border-color:var(--accent);}
.am-sp-pool-on .am-sp-pool-name{color:var(--accent);}
.am-sp-pool-dim{opacity:.4;cursor:default;}

.am-sp-items{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.am-sp-item-lbl{width:100%;font-family:var(--game);font-size:10px;color:var(--muted);
  text-transform:uppercase;letter-spacing:1px;margin:6px 0 1px;}
.am-sp-item-chip{
  display:flex;align-items:center;gap:5px;background:var(--surface2);color:var(--text);
  border:1.5px solid var(--border);border-radius:8px;padding:5px 9px;cursor:pointer;
  font-size:11px;transition:all .12s;
}
.am-sp-item-chip span{color:var(--text);}
.am-sp-item-chip img{width:22px;height:22px;image-rendering:pixelated;}
.am-sp-item-chip:hover{border-color:var(--accent);}
.am-sp-item-on{border-color:var(--accent);background:rgba(245,166,35,.15);}
.am-sp-item-on span{color:var(--accent);font-weight:700;}
/* "Ya lo lleva otro" sigue mostrando tooltip/aviso, así que mantiene pointer-events */
.am-sp-item-dim{opacity:.45;cursor:not-allowed;}
.am-sp-item-dim span{color:var(--muted);}

/* Aviso flotante (toast) del selector AM */
.am-sp-toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(12px);
  background:var(--surface);border:1px solid var(--accent2,#e74c3c);color:var(--text);
  padding:11px 18px;border-radius:10px;font-family:var(--body);font-size:13px;max-width:90vw;
  box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;pointer-events:none;z-index:99999;
  transition:opacity .2s,transform .2s;text-align:center;
}
.am-sp-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}


/* ═══════════════════════════════════════════════════════════════════
   RETO LOCKE — roguelike Nuzlocke
   ═══════════════════════════════════════════════════════════════════ */

/* Botón del menú principal */
.menu-rogue{
  background:linear-gradient(160deg,#3fb07f,#1f7d56 55%,#13543a);
  box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 20px rgba(46,125,91,.4);
}

/* Pantalla / cabecera */
#screen-rogue{flex-direction:column;}
.rg-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--border);
  flex-shrink:0;background:rgba(0,0,0,.18);
}
.rg-htitle{
  font-family:var(--game);font-weight:800;letter-spacing:2px;font-size:20px;
  color:var(--text);text-transform:uppercase;
}
.rg-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 14px 28px;display:flex;flex-direction:column;
  max-width:1140px;width:100%;margin:0 auto;
}
/* ── HOME (placeholder Fase 0) ── */
.rg-home{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;padding:24px 8px;max-width:600px;width:100%;margin:0 auto;}
.rg-home-title{font-family:var(--game);font-weight:800;letter-spacing:2px;font-size:26px;color:var(--accent);text-transform:uppercase;}
.rg-home-sub{color:var(--text);max-width:460px;line-height:1.5;}
.rg-home-note{color:var(--muted);font-size:13px;max-width:460px;line-height:1.45;background:rgba(255,255,255,.04);border:1px dashed var(--border);border-radius:10px;padding:12px 14px;}
.rg-btn{font-family:var(--game);font-weight:700;letter-spacing:1px;border-radius:10px;padding:11px 20px;cursor:pointer;border:1px solid var(--border);text-transform:uppercase;}
.rg-btn-ghost{background:transparent;color:var(--text);}
.rg-btn-ghost:hover{background:rgba(255,255,255,.06);}
.rg-btn-primary{background:linear-gradient(120deg,#2e7d5b,#1b5e44);color:#eafff5;border-color:#7fe3b4;}
.rg-btn-primary:hover{filter:brightness(1.08);}

/* ── MAPA (Fase 3) ── */
.rg-map-wrap{display:flex;flex-direction:column;gap:14px;width:100%;}
.rg-map-top{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.rg-chip{font-family:var(--game);font-size:12px;font-weight:700;letter-spacing:.5px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text);}
.rg-board{
  position:relative;display:flex;flex-direction:column;gap:18px;padding:24px 14px;
  width:100%;max-width:560px;margin:0 auto;
  background:
    radial-gradient(circle at 50% 0%,rgba(127,227,180,.10),transparent 55%),
    linear-gradient(180deg,rgba(20,28,48,.55),rgba(12,16,30,.55));
  border:1px solid var(--border);border-radius:18px;overflow:hidden;
}
/* capa SVG de conexiones entre nodos (líneas de puntos) */
.rg-edges{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible;}
.rg-edge{stroke:rgba(255,255,255,.28);stroke-width:2.5;stroke-dasharray:2 6;stroke-linecap:round;}
.rg-edge.done{stroke:rgba(127,227,180,.75);stroke-dasharray:2 5;stroke-width:3;}
.rg-board::before{display:none;}
.rg-row{position:relative;z-index:1;display:flex;justify-content:center;gap:18px;flex-wrap:nowrap;}
.rg-node{
  --nc:#8a93b5;
  width:50px;height:50px;border-radius:16px;border:2px solid rgba(255,255,255,.12);
  background:linear-gradient(160deg,rgba(40,48,72,.95),rgba(24,30,50,.95));
  color:var(--nc);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;flex:0 0 auto;
  transition:transform .14s,box-shadow .14s,border-color .14s,opacity .14s,filter .14s;
}
.rg-node .rg-node-ic{pointer-events:none;width:28px;height:28px;display:flex;}
.rg-node-badge{position:absolute;bottom:-3px;right:-3px;font-size:11px;line-height:1;background:rgba(12,16,30,.92);border-radius:50%;width:17px;height:17px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);}
.rg-node .rg-node-ic svg{width:100%;height:100%;}
/* colores por tipo de nodo */
.rg-node.n-start{--nc:#9aa3c0;}
.rg-node.n-wild{--nc:#7fd87f;}
.rg-node.n-catch{--nc:#ff6b6b;}
.rg-node.n-trainer{--nc:#5fb0ff;}
.rg-node.n-item{--nc:#f5c451;}
.rg-node.n-disc{--nc:#c89ae0;}
.rg-node.n-wonder{--nc:#7fe3d8;}
.rg-node.n-random{--nc:#b6bcd0;}
.rg-node.n-pokecenter{--nc:#ff7da0;}
.rg-node.n-leader{--nc:#ffb02e;}
/* estados */
.rg-node.locked{opacity:.34;cursor:default;filter:grayscale(.55);}
.rg-node.visited{opacity:.5;border-color:rgba(255,255,255,.08);}
.rg-node.visited::after{content:'';position:absolute;inset:0;border-radius:16px;background:rgba(127,227,180,.12);}
.rg-node.accessible{
  border-color:var(--nc);color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--nc) 32%,#1a2138),color-mix(in srgb,var(--nc) 14%,#141a2e));
  box-shadow:0 0 0 1px var(--nc) inset,0 4px 14px rgba(0,0,0,.4),0 0 16px color-mix(in srgb,var(--nc) 45%,transparent);
  animation:rgNodePulse 1.8s ease-in-out infinite;
}
.rg-node.accessible:hover{transform:translateY(-3px) scale(1.08);box-shadow:0 0 0 1px var(--nc) inset,0 8px 22px rgba(0,0,0,.5),0 0 26px var(--nc);}
.rg-node.accessible .rg-node-ic{color:#fff;}
.rg-node.current{border-color:#7fe3b4;box-shadow:0 0 0 2px #7fe3b4 inset,0 0 18px rgba(127,227,180,.6);}
/* el líder destaca un poco más */
.rg-node.n-leader{width:62px;height:62px;border-radius:16px;}
@keyframes rgNodePulse{0%,100%{box-shadow:0 0 0 1px var(--nc) inset,0 4px 14px rgba(0,0,0,.4),0 0 12px color-mix(in srgb,var(--nc) 35%,transparent);}50%{box-shadow:0 0 0 1px var(--nc) inset,0 4px 14px rgba(0,0,0,.4),0 0 22px color-mix(in srgb,var(--nc) 60%,transparent);}}
.rg-board.has-bg{
  background-image:none; /* lo pone el style inline */
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  border-color:rgba(0,0,0,.4);
}
/* sobre un fondo ilustrado, los nodos necesitan algo más de contraste */
.rg-board.has-bg::before{opacity:.5;}
.rg-board.has-bg .rg-node{
  background:linear-gradient(160deg,rgba(18,22,38,.82),rgba(10,14,26,.82));
  box-shadow:0 2px 8px rgba(0,0,0,.55);
}
.rg-board.has-bg .rg-node.accessible{
  background:linear-gradient(160deg,color-mix(in srgb,var(--nc) 42%,rgba(14,18,32,.9)),color-mix(in srgb,var(--nc) 20%,rgba(10,14,26,.9)));
}
.rg-board.has-bg .rg-node.locked{opacity:.5;}
.rg-toast{
  position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);
  background:rgba(20,26,46,.96);border:1px solid var(--border);color:var(--text);
  padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999;max-width:80vw;text-align:center;
}
.rg-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── ARRANQUE: modo y starter (Fase 4) ── */
.rg-mode-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:100%;}
.rg-mode-card{flex:1;min-width:180px;max-width:240px;background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:18px 14px;cursor:pointer;color:var(--text);transition:transform .12s,border-color .12s,box-shadow .12s;display:flex;flex-direction:column;gap:8px;align-items:center;}
.rg-mode-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 6px 20px rgba(0,0,0,.3);}
.rg-mode-ic{font-size:34px;}
.rg-mode-name{font-family:var(--game);font-weight:800;letter-spacing:1px;font-size:18px;}
.rg-mode-desc{font-size:12px;color:var(--muted);line-height:1.4;}
.rg-starter-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.rg-starter-card{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:14px;cursor:pointer;color:var(--text);width:150px;transition:transform .12s,border-color .12s,box-shadow .12s;display:flex;flex-direction:column;align-items:center;gap:6px;}
.rg-starter-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 0 18px rgba(245,166,35,.35);}
.rg-starter-card img{width:84px;height:84px;image-rendering:pixelated;}
.rg-starter-name{font-family:var(--game);font-weight:700;font-size:15px;}
.rg-starter-types,.rg-pick-types{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;}
.rg-type{font-size:9px;text-transform:uppercase;font-weight:700;padding:2px 6px;border-radius:6px;color:#fff;letter-spacing:.4px;}
.t-normal{background:#a8a878}.t-fire{background:#f08030}.t-water{background:#6890f0}.t-grass{background:#78c850}.t-electric{background:#f8d030;color:#222}.t-ice{background:#98d8d8;color:#222}.t-fighting{background:#c03028}.t-poison{background:#a040a0}.t-ground{background:#e0c068;color:#222}.t-flying{background:#a890f0}.t-psychic{background:#f85888}.t-bug{background:#a8b820}.t-rock{background:#b8a038}.t-ghost{background:#705898}.t-dragon{background:#7038f8}.t-dark{background:#705848}.t-steel{background:#b8b8d0;color:#222}.t-fairy{background:#ee99ac;color:#222}

/* ── OVERLAY de elección de nodo (Fase 4) ── */
.rg-overlay{position:fixed;inset:0;background:rgba(5,8,16,.82);display:none;align-items:center;justify-content:center;z-index:9998;padding:20px;}
.rg-overlay.show{display:flex;}
.rg-ov-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 18px;max-width:520px;width:100%;display:flex;flex-direction:column;gap:14px;align-items:center;box-shadow:0 12px 40px rgba(0,0,0,.5);}
.rg-ov-title{font-family:var(--game);font-weight:800;letter-spacing:1px;font-size:20px;color:var(--accent);}
.rg-ov-sub{font-size:13px;color:var(--muted);text-align:center;margin-top:-8px;}
.rg-pick-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%;}
.rg-pick-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 10px;cursor:pointer;color:var(--text);width:140px;display:flex;flex-direction:column;align-items:center;gap:5px;transition:transform .12s,border-color .12s,box-shadow .12s;}
.rg-pick-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 0 16px rgba(245,166,35,.4);}
.rg-pick-card img{width:72px;height:72px;image-rendering:pixelated;}
.rg-pick-name{font-family:var(--game);font-weight:700;font-size:14px;}
.rg-pick-lv{font-size:11px;color:var(--muted);}
.rg-pick-card.rg-disabled{opacity:.4;cursor:default;filter:grayscale(.5);}
.rg-pick-card.rg-disabled:hover{transform:none;border-color:var(--border);box-shadow:none;}
.rg-item-ic{font-size:32px;}
.rg-item-desc{font-size:11px;color:var(--muted);line-height:1.35;text-align:center;}

/* ── (resto de estilos antiguos del modo, en revisión durante la reconstrucción) ── */
.lk-intro{display:flex;flex-direction:column;gap:16px;padding-top:6px;}
.lk-intro-head{text-align:center;}
.lk-intro-title{
  font-family:var(--pixel);font-size:22px;color:var(--accent);
  text-shadow:0 2px 0 #0008;letter-spacing:1px;
}
.lk-intro-tag{font-family:var(--game);font-size:15px;color:var(--muted);margin-top:8px;letter-spacing:1px;}
.lk-rules{
  list-style:none;display:flex;flex-direction:column;gap:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;
}
.lk-rules li{font-size:13.5px;line-height:1.5;color:var(--text);padding-left:18px;position:relative;}
.lk-rules li::before{content:'▸';position:absolute;left:0;color:var(--accent);}
.lk-rules b{color:#7fe3b4;}
.lk-pick-label{
  text-align:center;font-family:var(--game);font-weight:700;letter-spacing:1px;
  font-size:15px;color:var(--text);margin-top:4px;text-transform:uppercase;
}
.lk-starters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.lk-starter{
  flex:1;min-width:96px;max-width:150px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--surface);border:2px solid var(--border);border-radius:14px;
  padding:14px 8px;cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s;
}
.lk-starter:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 6px 18px rgba(0,0,0,.35);}
.lk-starter img{width:74px;height:74px;image-rendering:pixelated;}
.lk-starter-name{font-family:var(--game);font-weight:700;font-size:14px;letter-spacing:.5px;}
.lk-starter-types{display:flex;gap:4px;}

/* ── HUD (vidas + meta) ── */
.lk-hud{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:9px 13px;margin-bottom:10px;
}
.lk-hud-lives{display:flex;gap:3px;flex-wrap:wrap;}
.lk-life{font-size:13px;line-height:1;}
.lk-life.on{color:#e74c3c;text-shadow:0 0 6px rgba(231,76,60,.6);}
.lk-life.off{color:#3a3f4a;}
.lk-hud-meta{display:flex;gap:12px;align-items:center;font-family:var(--game);font-weight:700;font-size:14px;}
.lk-badge-count{color:var(--accent);}
.lk-route-count{color:var(--muted);}

/* ── Tira de equipo ── */
.lk-teamstrip{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.lk-slot{
  width:46px;height:46px;border:2px solid var(--border);border-radius:10px;
  background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.lk-slot img{width:42px;height:42px;image-rendering:pixelated;}
.lk-slot.empty{opacity:.3;border-style:dashed;}
.lk-slot.fainted{filter:grayscale(1) brightness(.55);border-color:#5a2020;}

/* ── Guía (inicial con bocadillo) ── */
.lk-guide{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.lk-guide-spr{width:54px;height:54px;image-rendering:pixelated;flex:none;
  animation:lk-bob 2.4s ease-in-out infinite;}
@keyframes lk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.lk-guide-bubble{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:9px 13px;font-size:13.5px;line-height:1.4;color:var(--text);flex:1;
}
.lk-guide-bubble::before{
  content:'';position:absolute;left:-7px;top:50%;transform:translateY(-50%);
  border:7px solid transparent;border-right-color:var(--border);
}
.lk-guide-bubble.pop{animation:lk-pop .28s ease;}
@keyframes lk-pop{0%{transform:scale(.96);opacity:.4}100%{transform:scale(1);opacity:1}}

/* ── Mapa-tablero (rejilla en diamante) ── */
.lk-board-wrap{
  width:100%;max-width:440px;margin:2px auto 4px;
  border:1px solid var(--border);border-radius:16px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(245,166,35,.06), transparent 60%),
    linear-gradient(180deg, #11331f 0%, #0e2419 60%, #0d1117 100%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.45);
}
.lk-board{display:block;width:100%;height:auto;aspect-ratio:1/1;}

/* caminos */
.lk-edge{stroke:#3a4a55;stroke-width:.6;stroke-dasharray:1.6 1.6;opacity:.55;}
.lk-edge-active{stroke:var(--accent);stroke-width:.9;opacity:.95;stroke-dasharray:none;
  filter:drop-shadow(0 0 1px rgba(245,166,35,.7));}

/* casillas */
.lk-cell-bg{fill:var(--surface);stroke:var(--border);stroke-width:.7;transition:all .2s;}
.lk-cell-ic{font-size:5.4px;dominant-baseline:middle;
  /* emojis no heredan fill; el tamaño manda */}
.lk-cell-far  .lk-cell-bg{opacity:.45;}
.lk-cell-far  .lk-cell-ic{opacity:.5;}
.lk-cell-done .lk-cell-bg{fill:#1a2433;stroke:#2a3a52;}
.lk-cell-done .lk-cell-ic{opacity:.55;}
.lk-cell-pos  .lk-cell-bg{fill:rgba(245,166,35,.18);stroke:var(--accent);stroke-width:1;
  filter:drop-shadow(0 0 2px rgba(245,166,35,.6));}
.lk-cell-reach .lk-cell-bg{fill:rgba(127,227,180,.12);stroke:#7fe3b4;stroke-width:1;
  animation:lk-cellpulse 1.7s ease-in-out infinite;}
@keyframes lk-cellpulse{0%,100%{stroke-opacity:.6}50%{stroke-opacity:1}}
.lk-cell-reach:hover .lk-cell-bg{fill:rgba(127,227,180,.25);}

.lk-board-hint{
  text-align:center;font-family:var(--game);font-weight:600;letter-spacing:.5px;
  font-size:12.5px;color:var(--muted);margin:2px 0 8px;
}

/* ── Pantallas de evento ── */
.lk-event{
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  padding:18px 14px;animation:lk-fade .3s ease;
}
@keyframes lk-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lk-ev-tag{
  font-family:var(--game);font-weight:800;letter-spacing:1.5px;font-size:12px;text-transform:uppercase;
  padding:5px 14px;border-radius:20px;
}
.lk-tag-wild{background:rgba(127,196,255,.15);color:#7fc4ff;border:1px solid #7fc4ff66;}
.lk-tag-item{background:rgba(255,224,122,.15);color:#ffe07a;border:1px solid #ffe07a66;}
.lk-tag-good{background:rgba(39,174,96,.18);color:#5fe39a;border:1px solid #5fe39a66;}
.lk-ev-stage{display:flex;flex-direction:column;align-items:center;gap:8px;}
.lk-ev-spr{width:120px;height:120px;image-rendering:pixelated;
  animation:lk-bob 2.4s ease-in-out infinite;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4));}
.lk-ev-icon{font-size:64px;animation:lk-bob 2.4s ease-in-out infinite;}
.lk-ev-name{font-family:var(--game);font-weight:800;font-size:22px;letter-spacing:.5px;}
.lk-ev-types{display:flex;gap:6px;justify-content:center;}
.lk-ev-msg{font-size:14px;line-height:1.5;color:var(--text);max-width:340px;}
.lk-ev-warn{font-size:12.5px;color:var(--muted);font-style:italic;}
.lk-bad{color:#ff7a6b;font-weight:700;}
.lk-ev-actions{display:flex;flex-direction:column;gap:9px;width:100%;max-width:320px;}

.lk-act{
  font-family:var(--game);font-weight:700;letter-spacing:.5px;font-size:15px;
  padding:13px;border-radius:12px;cursor:pointer;transition:transform .1s,filter .1s,border-color .1s;
  background:var(--surface);border:2px solid var(--border);color:var(--text);
}
.lk-act small{opacity:.7;font-weight:600;font-size:12px;}
.lk-act:hover:not(:disabled){transform:translateY(-2px);border-color:var(--accent);}
.lk-act:disabled{opacity:.4;cursor:not-allowed;}
.lk-act-primary{
  background:linear-gradient(120deg,#2e7d5b,#1b5e44);border-color:#7fe3b4;color:#fff;
  box-shadow:0 0 14px rgba(46,125,91,.35);
}
.lk-act-ghost{background:transparent;border-color:var(--border);color:var(--muted);}

/* ── Fin de run ── */
.lk-over{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:16px 8px;
  animation:lk-fade .35s ease;}
.lk-over-title{font-family:var(--pixel);font-size:18px;line-height:1.5;}
.lk-over-win .lk-over-title{color:var(--accent);text-shadow:0 2px 0 #0008;}
.lk-over-lose .lk-over-title{color:#ff7a6b;}
.lk-over-sub{font-size:14px;color:var(--muted);line-height:1.5;max-width:360px;}
.lk-over-block{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:14px;}
.lk-over-h{font-family:var(--game);font-weight:800;letter-spacing:1.5px;font-size:13px;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.lk-over-grid{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.lk-over-mon{display:flex;flex-direction:column;align-items:center;gap:2px;width:72px;}
.lk-over-mon img{width:56px;height:56px;image-rendering:pixelated;}
.lk-over-mon span{font-size:11px;color:var(--text);}
.lk-over-mon.fallen img{filter:grayscale(1) brightness(.6);}
.lk-over-mon.fallen span{color:var(--muted);}
.lk-over-empty{color:var(--muted);font-style:italic;font-size:13px;}
.lk-over-actions{display:flex;flex-direction:column;gap:9px;width:100%;max-width:300px;margin-top:4px;}

@media (prefers-reduced-motion: reduce){
  .lk-guide-spr,.lk-ev-spr,.lk-ev-icon,.lk-current .lk-node-dot{animation:none!important;}
}

/* ════════ PANTALLA DE OBJETOS ════════ */
.pdx-items-btn{
  font-family:var(--game);font-weight:700;font-size:13px;
  background:rgba(76,218,100,.14);border:1.5px solid #4cda64;color:#7ee89a;
  border-radius:18px;padding:7px 14px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.pdx-items-btn:hover{background:rgba(76,218,100,.24);}
.items-intro{
  max-width:1100px;margin:0 auto 16px;padding:0 16px;
  color:var(--text-dim,#9aa4b2);font-size:14px;line-height:1.5;text-align:center;
}
.items-grid{
  max-width:1100px;margin:0 auto;padding:0 16px 40px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;
}
.items-tier-head{
  grid-column:1/-1;font-family:var(--game);font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.08em;color:#7ee89a;
  margin:14px 0 2px;padding-bottom:6px;border-bottom:1px solid rgba(76,218,100,.25);
}
.item-card{
  background:var(--surface,#161b22);border:1px solid var(--border,#2a3038);
  border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;
  transition:.15s;
}
.item-card:hover{border-color:#4cda64;transform:translateY(-2px);}
.item-card-top{display:flex;gap:12px;align-items:flex-start;}
.item-sprite{
  width:48px;height:48px;flex-shrink:0;image-rendering:pixelated;
  background:rgba(255,255,255,.04);border-radius:10px;padding:4px;
}
.item-card-head{flex:1;min-width:0;}
.item-card-name{
  font-family:var(--game);font-weight:700;font-size:16px;color:#e6edf3;margin-bottom:4px;
}
.item-old-name{
  font-family:'Inter',sans-serif;font-weight:500;font-size:11px;color:#7d8590;
  font-style:italic;margin-left:4px;
}
.item-card-desc{
  font-family:'Inter',sans-serif;font-size:13px;color:#c8d1dc;line-height:1.45;
}
.item-carriers{
  font-family:'Inter',sans-serif;font-size:12px;color:#9aa4b2;line-height:1.4;
  padding-top:8px;border-top:1px solid rgba(255,255,255,.06);text-transform:capitalize;
}
.item-carriers-lbl{color:#7ee89a;font-weight:600;text-transform:none;}
.item-carriers-none{font-style:italic;text-transform:none;}
@media (max-width:680px){
  .items-grid{grid-template-columns:1fr;padding:0 12px 32px;}
  .pdx-items-btn{font-size:11px;padding:6px 10px;}
}

/* ════════ MODAL DE CONFIRMACIÓN (abandonar Alto Mando) ════════ */
.am-confirm-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(6,9,14,.72);backdrop-filter:blur(3px);
  align-items:center;justify-content:center;padding:20px;
}
.am-confirm-box{
  background:var(--surface,#161b22);border:1px solid var(--border,#2a3038);
  border-radius:16px;padding:26px 24px;max-width:380px;width:100%;
  text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.am-confirm-title{
  font-family:var(--game,sans-serif);font-weight:700;font-size:20px;color:#e6edf3;margin-bottom:8px;
}
.am-confirm-text{
  font-family:'Inter',sans-serif;font-size:14px;color:#9aa4b2;line-height:1.5;margin-bottom:20px;
}
.am-confirm-actions{display:flex;gap:10px;}
.am-confirm-no,.am-confirm-yes{
  flex:1;padding:13px;border-radius:11px;font-family:var(--game,sans-serif);
  font-weight:700;font-size:15px;cursor:pointer;transition:.15s;border:none;
}
.am-confirm-no{
  background:rgba(125,133,144,.18);color:#cfd6e4;border:1px solid rgba(255,255,255,.12);
}
.am-confirm-no:hover{background:rgba(125,133,144,.30);}
.am-confirm-yes{
  background:linear-gradient(135deg,#e0353b,#b5232a);color:#fff;
  box-shadow:0 3px 12px rgba(200,40,46,.35);
}
.am-confirm-yes:hover{background:linear-gradient(135deg,#ec474d,#c9282f);transform:translateY(-1px);}

/* ═══════════════════════════════════════════════════════════════════
   FLAG DE OBJETOS — modal "¿Jugar con objetos?" antes de cada partida
   ═══════════════════════════════════════════════════════════════════ */
.items-flag-overlay{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(5,8,14,.78); backdrop-filter:blur(3px);
  animation:itemsFlagFade .16s ease;
}
@keyframes itemsFlagFade{ from{opacity:0;} to{opacity:1;} }
.items-flag-modal{
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:16px; padding:24px 22px 22px; width:min(420px,92vw);
  box-shadow:0 18px 50px rgba(0,0,0,.55); text-align:center;
}
.items-flag-title{
  font-family:var(--game); font-weight:700; font-size:1.45rem;
  color:var(--text); margin-bottom:6px;
}
.items-flag-sub{
  font-family:var(--body); font-size:.84rem; color:var(--muted);
  line-height:1.45; margin-bottom:20px;
}
.items-flag-btns{ display:flex; gap:14px; }
.items-flag-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:18px 10px; cursor:pointer; border-radius:13px;
  background:var(--surface2); color:var(--text);
  border:1.5px solid var(--border); transition:.14s; font-family:var(--game);
}
.items-flag-btn:hover{ transform:translateY(-2px); }
.items-flag-btn:active{ transform:translateY(0); }
.items-flag-ico{ font-size:1.9rem; line-height:1; }
.items-flag-lbl{ font-weight:700; font-size:.98rem; letter-spacing:.4px; }
.items-flag-yes{ border-color:#4cda64; }
.items-flag-yes:hover{ background:rgba(76,218,100,.16); border-color:#4cda64; box-shadow:0 6px 18px rgba(76,218,100,.18); }
.items-flag-no{ border-color:var(--accent2); }
.items-flag-no:hover{ background:rgba(231,76,60,.14); border-color:var(--accent2); box-shadow:0 6px 18px rgba(231,76,60,.16); }

/* ── Modal de ajustes de Random Battle: toggles ── */
.rnd-settings-modal{ width:min(440px,94vw); text-align:left; }
.rnd-settings-modal .items-flag-title,.rnd-settings-modal .items-flag-sub{ text-align:center; }
.rnd-toggles{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.rnd-toggle{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:12px; padding:12px 14px; transition:.14s;
}
.rnd-toggle:hover{ border-color:var(--accent); }
.rnd-toggle-ico{ font-size:1.4rem; line-height:1; flex-shrink:0; width:26px; text-align:center; }
.rnd-toggle-txt{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.rnd-toggle-txt b{ font-family:var(--game); font-weight:700; font-size:.96rem; color:var(--text); }
.rnd-toggle-txt small{ font-family:var(--body); font-size:.74rem; color:var(--muted); line-height:1.3; }
.rnd-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.rnd-toggle-switch{
  flex-shrink:0; width:44px; height:24px; border-radius:14px;
  background:var(--border); position:relative; transition:.18s;
}
.rnd-toggle-switch::after{
  content:''; position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:.18s;
}
.rnd-toggle input:checked ~ .rnd-toggle-switch{ background:#4cda64; }
.rnd-toggle input:checked ~ .rnd-toggle-switch::after{ transform:translateX(20px); }
.rnd-toggle input:focus-visible ~ .rnd-toggle-switch{ box-shadow:0 0 0 2px var(--accent); }
.rnd-settings-actions{ display:flex; }
.rnd-settings-go{ flex:1; flex-direction:row !important; padding:14px !important; }

/* ═══════════════════════════════════════════════════════════════════
   TEAM BUILDER — chips de objeto con sprite + tooltip enriquecido
   ═══════════════════════════════════════════════════════════════════ */
/* Reajuste del chip para alojar imagen + nombre en línea */
.tb-item-chip{ display:inline-flex; align-items:center; gap:7px; }
.tb-item-chip-img{
  width:22px; height:22px; object-fit:contain; flex-shrink:0;
  image-rendering:auto;
}
.tb-item-chip-name{ line-height:1; }

.tb-item-tooltip{
  display:none; position:fixed; z-index:10001; pointer-events:none;
  width:max-content; max-width:240px;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:10px; padding:10px 12px;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.tb-itt-head{ display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.tb-itt-img{ width:34px; height:34px; object-fit:contain; flex-shrink:0; }
.tb-itt-names{ display:flex; flex-direction:column; }
.tb-itt-name{ font-family:var(--game); font-weight:700; font-size:.98rem; color:var(--text); line-height:1.15; }
.tb-itt-old{ font-family:var(--body); font-size:.72rem; color:var(--muted); }
.tb-itt-desc{ font-family:var(--body); font-size:.8rem; color:var(--text); line-height:1.5; }

/* ── Team Builder: objeto deshabilitado (ya usado por otro Pokémon o no válido) ── */
.tb-item-chip-disabled{
  opacity:.4;
  filter:grayscale(100%);
  cursor:not-allowed;
  border-color:var(--border) !important;
  color:var(--muted) !important;
  background:var(--surface) !important;
}
.tb-item-chip-disabled:hover{ border-color:var(--border) !important; }
.tb-item-chip-disabled .tb-item-chip-img{ filter:grayscale(100%); }

/* Aviso del tooltip de objeto cuando está deshabilitado */
.tb-itt-warn{
  margin-top:6px; padding-top:6px;
  border-top:1px solid var(--border);
  font-family:var(--body); font-size:.76rem; color:#e06464; line-height:1.4;
}


/* ════════ RETO ROGUE · estilos nuevos (rejilla home + paneles + extras) ════════ */

.rg-home-label{font-family:var(--game);font-size:13px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-top:6px;}

.rg-home-hero{text-align:center;display:flex;flex-direction:column;gap:6px;margin-bottom:2px;}

.rg-resume{width:100%;max-width:360px;}

.rg-gen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;}

.rg-gen-card{
  position:relative;border:1px solid var(--border);border-radius:16px;
  padding:16px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;color:var(--text);overflow:hidden;
  background:linear-gradient(160deg,var(--g-from,#222a44),var(--g-to,#161c30));
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
  min-height:118px;justify-content:center;
}

.rg-gen-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.14),transparent 60%);pointer-events:none;}

.rg-gen-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 0 1px var(--g-glow,rgba(255,255,255,.25)) inset;border-color:var(--g-glow,var(--accent));}

.rg-gen-card:active{transform:translateY(-1px) scale(.99);}

.rg-gen-badge{position:absolute;top:8px;left:10px;font-family:var(--game);font-weight:800;font-size:13px;color:rgba(255,255,255,.85);background:rgba(0,0,0,.28);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

.rg-gen-img{width:62px;height:62px;image-rendering:pixelated;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));margin-top:6px;transition:transform .14s;}

.rg-gen-card:hover .rg-gen-img{transform:scale(1.12);}

/* Tarjeta con ilustración de los starters */
.rg-gen-card.has-art{
  padding:0;min-height:130px;justify-content:flex-end;align-items:stretch;
}
.rg-gen-card.has-art .rg-gen-art{
  position:absolute;inset:0;background-repeat:no-repeat;z-index:1;transition:transform .14s;
}
/* modo COVER: la ilustración (con su fondo) llena la tarjeta */
.rg-gen-card.has-art-cover .rg-gen-art{
  background-size:cover;background-position:center center;
}
/* modo FLOAT: PNG transparente centrado sobre el degradado temático */
.rg-gen-card.has-art-float .rg-gen-art{
  background-size:contain;background-position:center 38%;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));
}
.rg-gen-card.has-art:hover .rg-gen-art{transform:scale(1.06);}
.rg-gen-card.has-art::before{
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.15) 40%,transparent 60%);z-index:2;
}
.rg-gen-card.has-art .rg-gen-region{
  position:relative;z-index:3;align-self:center;margin-bottom:10px;
  font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.95);font-size:15px;
}
.rg-gen-card.has-art .rg-gen-badge{z-index:3;background:rgba(0,0,0,.55);}
.rg-gen-card.has-art:hover{transform:translateY(-4px) scale(1.02);}

.rg-gen-region{font-family:var(--game);font-weight:700;font-size:13px;letter-spacing:.6px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);}

.rg-gen-card.locked{cursor:default;background:var(--surface2);opacity:.55;}

.rg-gen-card.locked:hover{transform:none;box-shadow:none;border-color:var(--border);}

.rg-gen-lock{font-size:30px;margin-top:6px;opacity:.7;}

.rg-gen-card.g1{--g-from:#3a6b3a;--g-to:#1d3320;--g-glow:#7fd87f;}

.rg-gen-card.g2{--g-from:#7a5a2a;--g-to:#34250f;--g-glow:#e8c270;}

.rg-gen-card.g3{--g-from:#2a5a7a;--g-to:#0f2434;--g-glow:#70c2e8;}

.rg-gen-card.g4{--g-from:#4a4a6a;--g-to:#1c1c30;--g-glow:#a0a0e0;}

.rg-gen-card.g5{--g-from:#5a3a6a;--g-to:#251030;--g-glow:#c89ae0;}

.rg-gen-card.g6{--g-from:#7a2a4a;--g-to:#340f20;--g-glow:#e870a0;}

.rg-gen-card.g7{--g-from:#2a6a6a;--g-to:#0f3030;--g-glow:#70e0d0;}

.rg-gen-card.g8{--g-from:#5a2a2a;--g-to:#280f0f;--g-glow:#e89070;}

.rg-gen-card.g9{--g-from:#6a5a2a;--g-to:#302810;--g-glow:#e0d070;}

.rg-home-footer{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px;}

.rg-code-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}

.rg-btn-sm{padding:7px 12px;font-size:11px;}

.rg-code-box{width:100%;min-height:90px;max-height:140px;background:#0c1020;border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:monospace;font-size:11px;padding:10px;resize:vertical;word-break:break-all;}

.rg-speed-btn{position:fixed;top:14px;right:14px;z-index:9000;background:rgba(20,26,46,.95);border:1px solid var(--accent);color:var(--accent);font-family:var(--game);font-weight:700;font-size:14px;letter-spacing:.5px;padding:8px 14px;border-radius:10px;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.4);transition:transform .1s,box-shadow .1s;}

.rg-speed-btn:hover{transform:scale(1.05);box-shadow:0 0 14px rgba(245,166,35,.5);}

.rg-game{display:grid;grid-template-columns:220px minmax(340px,1fr) 240px;gap:16px;width:100%;max-width:1100px;margin:0 auto;align-items:start;}
.rg-center{display:flex;flex-direction:column;gap:14px;min-width:0;align-items:center;}
.rg-map-top{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}

.rg-panel{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;padding:12px 10px;display:flex;flex-direction:column;gap:8px;}

.rg-panel-title{font-family:var(--game);font-weight:800;letter-spacing:1.5px;font-size:13px;color:var(--muted);text-transform:uppercase;text-align:center;}

.rg-panel-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:6px;text-align:center;}

.rg-panel-hint{font-size:10px;color:var(--muted);line-height:1.35;text-align:center;margin-top:4px;}

.rg-center{display:flex;flex-direction:column;gap:14px;min-width:0;}

.rg-team-list{display:flex;flex-direction:column;gap:7px;}

.rg-team-card{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:6px 8px;cursor:grab;transition:transform .1s,border-color .1s,box-shadow .1s;}

.rg-team-card:hover{border-color:var(--accent);}

.rg-team-card.rg-dragging{opacity:.5;cursor:grabbing;}

.rg-team-card.rg-dragover{border-color:#7fe3b4;box-shadow:0 0 10px rgba(127,227,180,.5);}

.rg-team-card.rg-fainted{opacity:.45;filter:grayscale(.7);}

.rg-team-card img{width:40px;height:40px;image-rendering:pixelated;flex-shrink:0;}

.rg-team-info{flex:1;min-width:0;}

.rg-team-name{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.rg-team-item{font-size:11px;}

.rg-team-lv{font-size:10px;color:var(--muted);}

.rg-team-hp{height:5px;background:#0c1020;border-radius:3px;overflow:hidden;margin-top:3px;}

.rg-team-hp-fill{height:100%;border-radius:3px;transition:width .3s;}

.rg-reserve-list{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;}

.rg-reserve-card{width:34px;height:34px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;}

.rg-reserve-card img{width:28px;height:28px;image-rendering:pixelated;}

.rg-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;justify-items:center;}

.rg-badge{width:34px;height:34px;border-radius:50%;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(0,0,0,.2);}

.rg-badge.got{border-style:solid;border-color:var(--accent);background:rgba(245,166,35,.12);box-shadow:0 0 8px rgba(245,166,35,.3);}

.rg-empty{font-size:12px;color:var(--muted);text-align:center;padding:10px 0;}

.rg-bag{display:flex;flex-direction:column;gap:6px;}

.rg-bag-item{display:flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:6px 8px;font-size:11px;}

.rg-bag-hold{cursor:pointer;transition:border-color .1s;}

.rg-bag-hold:hover{border-color:var(--accent);}

.rg-bag-ic{font-size:16px;}

.rg-bag-name{flex:1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.rg-bag-on{font-size:9px;color:var(--good);white-space:nowrap;}

@media (max-width: 720px){
  .rg-game{grid-template-columns:1fr;gap:12px;}
  .rg-center{order:1;}
  .rg-team-panel{order:2;}
  .rg-items-panel{order:3;}
  .rg-team-list{flex-direction:row;flex-wrap:wrap;}
  .rg-team-card{flex:1;min-width:140px;}
  .rg-badges{grid-template-columns:repeat(8,1fr);}
  .rg-board{max-width:100%;padding:18px 8px;gap:14px;}
  .rg-row{gap:12px;}
}
@media (max-width: 440px){
  .rg-board{padding:14px 4px;gap:12px;}
  .rg-row{gap:7px;}
  .rg-node{width:40px;height:40px;border-radius:12px;}
  .rg-node .rg-node-ic{width:22px;height:22px;}
  .rg-node.n-leader{width:46px;height:46px;}
}

/* ════════════════════════════════════════════════════════════════════
   RETO ROGUE · Autobatalla propia (.rb-*)
   ════════════════════════════════════════════════════════════════════ */
.rb-arena{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  max-width:620px;margin:0 auto;padding:18px 12px 28px;width:100%;
}
.rb-side{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;}
.rb-enemy{align-items:flex-end;}
.rb-player{align-items:flex-start;}
.rb-vs{font-family:var(--game);font-weight:800;letter-spacing:2px;color:var(--muted);font-size:14px;opacity:.7;}
.rb-card{
  display:flex;align-items:center;gap:14px;background:rgba(20,28,48,.6);
  border:1px solid var(--border);border-radius:16px;padding:12px 16px;
  min-width:300px;max-width:440px;box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.rb-enemy .rb-card{flex-direction:row-reverse;}
.rb-sprite{width:84px;height:84px;image-rendering:pixelated;object-fit:contain;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));transition:transform .1s;}
.rb-sprite.enemy{transform:scaleX(-1);}
.rb-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.rb-name{font-family:var(--game);font-weight:700;font-size:14px;color:var(--text);}
.rb-lv{font-size:11px;color:var(--muted);margin-left:6px;}
.rb-types{display:flex;gap:5px;}
.rb-type{font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:20px;color:#fff;letter-spacing:.5px;}
.rb-hpbar{height:12px;background:rgba(0,0,0,.45);border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.1);}
.rb-hpfill{height:100%;border-radius:8px;transition:width .35s ease, background .3s;}
.rb-hpfill.hi{background:linear-gradient(90deg,#3fd17a,#2fa85f);}
.rb-hpfill.mid{background:linear-gradient(90deg,#f5c451,#e0a92e);}
.rb-hpfill.low{background:linear-gradient(90deg,#ff6b6b,#e04545);}
.rb-hptext{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}
.rb-team-dots{display:flex;gap:6px;}
.rb-dot{width:10px;height:10px;border-radius:50%;background:#3fd17a;border:1px solid rgba(0,0,0,.3);}
.rb-dot.dead{background:#444;opacity:.5;}
.rb-dot.active{box-shadow:0 0 0 2px var(--accent);}
.rb-log{
  width:100%;max-width:440px;min-height:60px;background:rgba(0,0,0,.25);
  border:1px solid var(--border);border-radius:10px;padding:10px 14px;
  font-size:12px;color:var(--text);line-height:1.6;
}
.rb-log div{opacity:.9;}
.rb-log div:last-child{color:var(--accent);font-weight:600;}
@keyframes rbHit{0%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}}
.rb-sprite.rb-hit{animation:rbHit .28s;}
.rb-enemy .rb-sprite.rb-hit{animation:rbHit .28s;}
@media (max-width:560px){
  .rb-card{min-width:0;width:100%;padding:10px 12px;gap:10px;}
  .rb-sprite{width:64px;height:64px;}
}

/* ── RETO ROGUE · Rareza en tarjetas de captura ── */
.rg-pick-card{position:relative;}
.rg-rar-tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px;}
.rg-glow-1{box-shadow:0 0 12px rgba(95,176,255,.35);border-color:rgba(95,176,255,.5);}
.rg-glow-2{box-shadow:0 0 16px rgba(255,176,46,.5);border-color:rgba(255,176,46,.7);animation:rgRareGlow 1.8s ease-in-out infinite;}
@keyframes rgRareGlow{0%,100%{box-shadow:0 0 12px rgba(255,176,46,.4);}50%{box-shadow:0 0 22px rgba(255,176,46,.75);}}
.rg-rar-rare{border-color:rgba(95,176,255,.4);}
.rg-rar-epic{border-color:rgba(200,154,240,.5);}
.rg-rar-legendary{border-color:rgba(255,176,46,.6);}

/* ════════════════════════════════════════════════════════════════════
   POKÉDEX DEL MODO ROGUE (overlay) — db-rogue-pokedex.js
   ════════════════════════════════════════════════════════════════════ */
.rpdx-overlay{
  position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;
  background:rgba(5,8,16,.78);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .2s ease;padding:16px;
}
.rpdx-overlay.open{opacity:1;pointer-events:auto;}
.rpdx-modal{
  width:min(960px,100%);max-height:90vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden;
  transform:translateY(12px) scale(.98);transition:transform .22s ease;
}
.rpdx-overlay.open .rpdx-modal{transform:translateY(0) scale(1);}
.rpdx-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--border);
  background:linear-gradient(120deg,rgba(245,166,35,.12),transparent);
}
.rpdx-title{font-family:var(--game,inherit);font-weight:800;letter-spacing:1px;font-size:19px;color:var(--accent);text-transform:uppercase;}
.rpdx-x{
  background:transparent;border:1px solid var(--border);color:var(--text);
  width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1;
}
.rpdx-x:hover{background:rgba(255,255,255,.08);}
.rpdx-filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:12px 18px;border-bottom:1px solid var(--border);
}
.rpdx-input{
  background:var(--bg);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:8px 11px;font-size:13px;font-family:inherit;outline:none;
}
.rpdx-input:focus{border-color:var(--accent);}
#rpdx-search{flex:1;min-width:140px;}
.rpdx-count{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap;}
.rpdx-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;
  padding:16px 18px;overflow-y:auto;
}
.rpdx-card{
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  padding:10px 8px 9px;text-align:center;position:relative;cursor:default;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.rpdx-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 20px rgba(0,0,0,.4);}
.rpdx-num{position:absolute;top:5px;left:7px;font-size:10px;color:var(--muted);font-weight:700;}
.rpdx-sprite{width:72px;height:72px;object-fit:contain;image-rendering:pixelated;margin:2px auto 0;display:block;}
.rpdx-name{font-size:12px;font-weight:700;text-transform:capitalize;color:var(--text);margin-top:2px;line-height:1.2;}
.rpdx-types{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin:4px 0 3px;}
.rpdx-type{font-size:9px;font-weight:700;color:#fff;padding:1px 6px;border-radius:4px;text-transform:capitalize;text-shadow:0 1px 1px rgba(0,0,0,.3);}
.rpdx-bst{font-size:10px;color:var(--muted);font-weight:700;}
.rpdx-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 10px;font-size:14px;}

/* Tooltip de stats (hover) */
.rpdx-tooltip{
  position:absolute;z-index:4100;display:none;width:240px;
  background:rgba(13,17,23,.97);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.6);padding:11px 12px;pointer-events:none;
}
.rpdx-tip-head{display:flex;gap:10px;align-items:center;margin-bottom:8px;}
.rpdx-tip-sprite{width:52px;height:52px;object-fit:contain;image-rendering:pixelated;}
.rpdx-tip-name{font-size:13px;font-weight:800;text-transform:capitalize;color:var(--text);}
.rpdx-tip-id{color:var(--muted);font-size:10px;font-weight:600;}
.rpdx-tip-types{display:flex;gap:3px;margin-top:3px;}
.rpdx-tip-ability{font-size:10px;color:var(--muted);margin-top:3px;}
.rpdx-tip-stats{display:flex;flex-direction:column;gap:3px;margin-top:4px;}
.rpdx-stat-row{display:flex;align-items:center;gap:6px;}
.rpdx-stat-lbl{font-size:10px;color:var(--muted);width:54px;flex-shrink:0;}
.rpdx-stat-val{font-size:10px;color:var(--text);font-weight:700;width:26px;text-align:right;flex-shrink:0;}
.rpdx-stat-bg{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
.rpdx-stat-fill{height:100%;border-radius:3px;transition:width .2s ease;}
.rpdx-tip-bst{margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:var(--text);}

@media (max-width:560px){
  .rpdx-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}
  .rpdx-sprite{width:60px;height:60px;}
  .rpdx-count{width:100%;margin-left:0;text-align:right;}
}

/* ════════════════════════════════════════════════════════════════════
   TEST LAB — botón volver, X de la tarjeta de objetos, editor de
   movimientos y constructor de equipo rival.
   ════════════════════════════════════════════════════════════════════ */

/* X para cerrar/cancelar la tarjeta CON/SIN objetos (sesión previa) */
.items-flag-modal{position:relative;}
.items-flag-x{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border);color:var(--text);font-size:17px;cursor:pointer;line-height:1;transition:.15s;
}
.items-flag-x:hover{background:var(--accent2);border-color:var(--accent2);color:#fff;}

/* Botón "‹ Volver" en las tarjetas de test (1v1 y equipo rival) */
.pdx-test-back{
  position:absolute;top:12px;left:14px;background:transparent;border:1px solid var(--border);
  color:var(--muted);font-family:var(--body);font-weight:700;font-size:.8rem;
  border-radius:8px;padding:4px 10px;cursor:pointer;line-height:1;z-index:2;
}
.pdx-test-back:hover{color:var(--text);border-color:var(--accent);}
/* Cuando hay botón Volver, baja la cabecera para que no se solape con él */
.pdx-test-back ~ .pdx-test-head{margin-top:30px;}

/* Botón "Editar" junto a "Movimientos del set" */
.pdx-moves-edit{
  margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color:var(--accent);font-family:var(--body);font-weight:700;font-size:.66rem;
  text-transform:none;letter-spacing:0;border-radius:999px;padding:4px 12px;cursor:pointer;
  transition:background .15s,transform .1s;
}
.pdx-moves-edit:hover{background:color-mix(in srgb, var(--accent) 24%, transparent);transform:translateY(-1px);}
.pdx-moves-edit:active{transform:translateY(0);}

/* ── Editor de movimientos ── */
.medit-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:1200;
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.medit-overlay.open{opacity:1;pointer-events:auto;}
.medit-card{
  position:relative;background:var(--surface);border:1.5px solid var(--border);
  border-radius:16px;padding:0;width:min(820px,96vw);max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.medit-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;z-index:5;
  background:var(--surface2);border:1px solid var(--border);color:var(--text);font-size:17px;cursor:pointer;line-height:1;transition:.15s;}
.medit-x:hover{background:var(--accent2);border-color:var(--accent2);color:#fff;}
.medit-head{display:flex;align-items:center;gap:14px;padding:22px 22px 14px;flex-shrink:0;border-bottom:1px solid var(--border);}
.medit-sprite{width:64px;height:64px;image-rendering:pixelated;}
.medit-title{font-family:var(--game);font-weight:700;font-size:1.15rem;color:var(--text);}
.medit-sub{font-family:var(--body);font-size:.8rem;color:var(--muted);line-height:1.4;margin-top:3px;}
.medit-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 22px;min-height:0;}
.medit-slots{display:flex;flex-direction:column;gap:8px;}
.medit-slot{display:flex;align-items:center;gap:8px;}
.medit-slot-num{
  flex-shrink:0;width:26px;height:26px;border-radius:7px;background:var(--surface2);
  border:1px solid var(--border);color:var(--accent);font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
}
.medit-slot-btn{
  flex:1;background:transparent;border:none;padding:0;cursor:pointer;text-align:left;min-width:0;
}
.medit-slot.editing .medit-chip{outline:2px solid var(--accent);outline-offset:1px;}
.medit-slot-empty{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--bg);border:1px dashed var(--border);color:var(--muted);
  border-radius:9px;padding:10px;font-size:.82rem;width:100%;box-sizing:border-box;
}
.medit-slot-btn:hover .medit-slot-empty{border-color:var(--accent);color:var(--text);}
.medit-slot-clear{
  flex-shrink:0;background:transparent;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:4px;
}
.medit-slot-clear:hover{color:var(--accent2);}

/* Chip de movimiento reutilizable (mismo lenguaje visual que la Pokédex) */
.medit-chip{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icons name" "icons stats";align-items:center;column-gap:9px;row-gap:1px;width:100%;box-sizing:border-box;
  background:color-mix(in srgb, var(--mt,#888) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--mt,#888) 35%, transparent);
  border-left:4px solid var(--mt,#888);
  border-radius:10px;padding:8px 11px;
}
.medit-chip-icons{grid-area:icons;display:inline-flex;align-items:center;gap:4px;}
.medit-chip-name{grid-area:name;font-weight:700;color:var(--text);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.medit-chip-stats{grid-area:stats;display:inline-flex;gap:10px;}
.medit-chip-stats span{color:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.medit-chip-stats b{color:color-mix(in srgb, var(--mt,#888) 75%, var(--text));font-weight:800;font-size:9px;letter-spacing:.5px;margin-right:2px;}

/* Panel de selección de ataque (se expande dentro del cuerpo, scroll único en .medit-body) */
.medit-picker{max-height:0;overflow:hidden;transition:max-height .22s ease;margin-top:8px;}
.medit-picker.open{max-height:none;overflow:visible;margin-top:10px;border:1px solid var(--border);border-radius:12px;background:var(--bg);}
.medit-picker-head{display:flex;align-items:center;gap:8px;padding:10px;position:sticky;top:-16px;background:var(--bg);border-bottom:1px solid var(--border);border-radius:12px 12px 0 0;z-index:2;}
.medit-picker-search{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;font-family:var(--body);font-size:.85rem;}
.medit-picker-search:focus{outline:none;border-color:var(--accent);}
.medit-picker-filters{display:flex;gap:6px;padding:8px 10px;position:sticky;top:34px;background:var(--bg);z-index:1;border-bottom:1px solid var(--border);}
.medit-picker-sel{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 8px;font-family:var(--body);font-size:.74rem;cursor:pointer;}
.medit-picker-sel:focus{outline:none;border-color:var(--accent);}
.enb-items-toggle{display:flex;align-items:center;gap:8px;margin:10px 0 4px;flex-shrink:0;padding:9px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:.8rem;cursor:pointer;}
.enb-items-toggle input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.medit-picker-count{flex-shrink:0;color:var(--muted);font-size:.72rem;padding:0 6px;}
.medit-picker-list{display:flex;flex-direction:column;gap:6px;padding:10px;}
.medit-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;}
.medit-pick-item{background:transparent;border:none;padding:0;cursor:pointer;text-align:left;}
.medit-pick-item:hover .medit-chip{transform:translateY(-1px);background:color-mix(in srgb, var(--mt,#888) 22%, var(--surface));}
.medit-empty{color:var(--muted);font-size:.85rem;text-align:center;padding:18px;grid-column:1/-1;}
.medit-actions{display:flex;gap:10px;padding:14px 22px;flex-shrink:0;border-top:1px solid var(--border);background:var(--surface);}
.medit-btn{flex:1;border:none;border-radius:10px;padding:11px;font-family:var(--body);font-weight:800;font-size:.95rem;cursor:pointer;}
.medit-reset{background:var(--surface2);color:var(--text);border:1px solid var(--border);}
.medit-reset:hover{border-color:var(--accent);}
.medit-save{background:var(--accent);color:#000;}
.medit-save:hover{filter:brightness(1.05);}
.medit-toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(14px);
  background:var(--surface);border:1px solid var(--accent);color:var(--text);
  padding:10px 16px;border-radius:10px;font-family:var(--body);font-size:.85rem;
  z-index:1300;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.medit-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── Constructor de equipo rival ── */
.enb-team{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px;max-height:34vh;overflow-y:auto;padding:2px;flex-shrink:0;}
.enb-empty{color:var(--muted);font-size:.85rem;padding:10px 4px;width:100%;}
.enb-slot{
  position:relative;width:128px;background:var(--surface2);border:1px solid var(--border);
  border-radius:11px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:3px;
}
.enb-slot-del{
  position:absolute;top:3px;right:5px;background:transparent;border:none;
  color:var(--muted);font-size:14px;cursor:pointer;line-height:1;
}
.enb-slot-del:hover{color:var(--accent2);}
.enb-slot-sprite{width:44px;height:44px;image-rendering:pixelated;}
.enb-slot-name{font-family:var(--body);font-weight:700;font-size:.78rem;color:var(--text);text-transform:capitalize;text-align:center;line-height:1.05;}
.enb-slot-lbl{align-self:flex-start;font-size:.6rem;color:var(--muted);margin-top:2px;}
.enb-slot-sel{
  width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);
  border-radius:7px;padding:4px 6px;font-family:var(--body);font-size:.74rem;cursor:pointer;
}
.enb-slot-sel:focus{outline:none;border-color:var(--accent);}

/* Botón de menú principal en la pantalla de victoria/resultado */
.result-menu-btn{
  margin-top:6px; width:100%; max-width:300px; padding:13px 20px;
  background:var(--surface2,#1e2a52); border:1px solid var(--border,#2d3a6a);
  color:var(--text,#e6edf3); border-radius:12px; font-weight:700; font-size:15px;
  cursor:pointer; transition:border-color .15s, transform .12s;
}
.result-menu-btn:hover{ border-color:var(--accent,#f5a623); transform:translateY(-2px); }

/* Botonera de la pantalla de resultado: apilada y centrada */
#result-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; max-width: 320px; margin: 0 auto; }
#result-actions .btn-primary, #result-actions .btn-secondary { width: 100%; text-align: center; }

/* ════════════════════════════════════════════════════════════════════
   DOMO BATALLA · Cuadro de campeonato (bracket de 16, con sprites + glow)
   ════════════════════════════════════════════════════════════════════ */
.dome-bracket-wrap{
  width:100%; overflow-x:auto; margin:6px 0 16px; padding:12px 6px;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(160deg, rgba(20,28,48,.6), rgba(12,18,34,.4));
  border:1px solid rgba(120,150,220,.18); border-radius:14px;
}
.dome-bracket{
  display:flex; gap:14px; align-items:stretch; min-width:620px; margin:0 auto;
  justify-content:center;
}
.dbk-col{ display:flex; flex-direction:column; min-width:108px; }
.dbk-col-title{
  text-align:center; font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:.74rem; letter-spacing:1.5px; color:var(--muted,#8a96ad); text-transform:uppercase;
  margin-bottom:10px;
}
.dbk-col-matches{
  display:flex; flex-direction:column; justify-content:space-around;
  flex:1; gap:8px;
}
.dbk-match{
  display:flex; flex-direction:column; gap:3px;
  background:linear-gradient(160deg, rgba(26,34,56,.95), rgba(18,24,42,.95));
  border:1px solid rgba(120,150,220,.25);
  border-radius:9px; padding:4px; position:relative;
  box-shadow:0 0 10px -4px rgba(80,120,220,.4);
}
/* Cuadro del combate actual del jugador: glow naranja intenso */
.dbk-match.dbk-current{
  border-color:#f5a623;
  box-shadow:0 0 0 1px #f5a623, 0 0 18px -1px rgba(245,166,35,.85);
  animation:dbkPulse 1.6s ease-in-out infinite;
}
@keyframes dbkPulse{
  0%,100%{ box-shadow:0 0 0 1px #f5a623, 0 0 16px -2px rgba(245,166,35,.7); }
  50%{ box-shadow:0 0 0 1px #ffc14d, 0 0 24px 0 rgba(245,166,35,1); }
}
/* Final: glow dorado */
.dbk-match.dbk-final{
  border-color:#f5b400;
  box-shadow:0 0 0 1px #f5b400, 0 0 18px -2px rgba(245,180,0,.8);
}
.dbk-slot{
  display:flex; align-items:center; gap:5px;
  font-family:'Inter',sans-serif; font-size:.64rem; line-height:1.05;
  padding:3px 5px; border-radius:6px; color:var(--text,#e8eef7);
  background:rgba(255,255,255,.04);
}
.dbk-spr{ width:24px; height:24px; image-rendering:pixelated; flex:0 0 24px; object-fit:contain; }
.dbk-spr-none{ display:flex; align-items:center; justify-content:center; font-size:.8rem; color:#f5b400; }
.dbk-nm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dbk-slot.dbk-empty{ color:var(--muted,#6b7894); opacity:.45; }
/* El jugador: cuadro con glow cian/dorado y nombre destacado */
.dbk-slot.dbk-you{
  background:linear-gradient(90deg, rgba(245,166,35,.32), rgba(245,166,35,.06));
  color:#ffd98a; font-weight:800; letter-spacing:.4px;
  box-shadow:inset 0 0 0 1px rgba(245,166,35,.5);
}
.dbk-slot.dbk-win{ font-weight:700; }
.dbk-slot.dbk-win:not(.dbk-you){ color:#9fe7b0; background:rgba(63,245,160,.08); }
.dbk-slot.dbk-you.dbk-win{ box-shadow:inset 0 0 0 1px rgba(245,166,35,.8); }
.dbk-col-champ{ justify-content:center; min-width:78px; }
.dbk-trophy{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-align:center; font-weight:900; font-size:1.1rem; color:#f5b400;
  background:radial-gradient(circle, rgba(245,180,0,.22), transparent 72%);
  border:1px solid #f5b400; border-radius:10px; padding:10px 6px;
  box-shadow:0 0 16px -3px rgba(245,180,0,.6);
}
.dbk-trophy-won{
  animation:dbkPulse 1.6s ease-in-out infinite;
  box-shadow:0 0 0 1px #f5b400, 0 0 22px 0 rgba(245,180,0,.9);
}
.dbk-champ-nm{ font-family:'Inter',sans-serif; font-size:.6rem; font-weight:800; color:#ffd98a; }
/* Animación de revelado de la nueva ronda tras ganar un combate */
.dbk-match.dbk-reveal{
  animation:dbkReveal .6s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes dbkReveal{
  0%{ opacity:0; transform:translateX(-14px) scale(.85); }
  60%{ opacity:1; transform:translateX(2px) scale(1.04); }
  100%{ opacity:1; transform:none; }
}
@media(max-width:560px){
  .dbk-col{ min-width:92px; }
  .dbk-slot{ font-size:.58rem; }
  .dbk-spr{ width:20px; height:20px; flex-basis:20px; }
  .dome-bracket{ min-width:520px; }
}

/* ── Constructor: toggle Shiny en la carta del Pokémon (requiere trofeo shiny) ── */
.tb-shiny-toggle{
  display:inline-flex; align-items:center; gap:5px; margin:6px 0 2px;
  padding:6px 12px; border-radius:9px; cursor:pointer;
  background:var(--surface2,#1a2238); border:1px solid var(--border,#2a3550);
  color:var(--muted,#8a96ad); font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.5px; transition:all .15s;
}
.tb-shiny-toggle:hover{ border-color:#3ff5d4; color:#3ff5d4; }
.tb-shiny-toggle.on{
  background:linear-gradient(160deg, rgba(63,245,212,.25), rgba(63,245,212,.08));
  border-color:#3ff5d4; color:#3ff5d4;
  box-shadow:0 0 14px -2px rgba(63,245,212,.6);
}
.tb-hero-shiny-tag{ color:#3ff5d4; text-shadow:0 0 8px rgba(63,245,212,.8); }
.tb-edit-sprite-shiny{ filter:drop-shadow(0 0 10px rgba(63,245,212,.55)); }

/* Botón shiny en el slot del Draft (esquina inferior izquierda) */
.draft2-shiny{
  position:absolute; bottom:4px; left:4px; width:20px; height:20px; border-radius:50%;
  border:1px solid #3a4566; background:rgba(10,15,30,.85); color:#8a96ad;
  font-size:11px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .12s; z-index:2; padding:0;
}
.draft2-shiny:hover{ border-color:#3ff5d4; color:#3ff5d4; }
.draft2-shiny.on{
  background:linear-gradient(160deg,#3ff5d4,#1f9d88); color:#06231f; border-color:#3ff5d4;
  box-shadow:0 0 8px rgba(63,245,212,.6);
}

/* ── Botón shiny en la tarjeta del pool de Draft (esquina sup. derecha) ── */
.pc-shiny-btn{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  border:1px solid #3a4566; background:rgba(10,15,30,.85); color:#8a96ad;
  font-size:12px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .12s; z-index:3; padding:0;
}
.pc-shiny-btn:hover{ border-color:#3ff5d4; color:#3ff5d4; transform:scale(1.12); }
.pc-shiny-btn.on{
  background:linear-gradient(160deg,#3ff5d4,#1f9d88); color:#06231f; border-color:#3ff5d4;
  box-shadow:0 0 8px rgba(63,245,212,.6);
}
.poke-card.pc-shiny img{ filter:drop-shadow(0 0 8px rgba(63,245,212,.55)); }

/* ── Flag shiny en el HUD de combate (Random) ── */
.hud-shiny-flag{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-left:6px; padding:0; border-radius:50%;
  border:1px solid #3a4566; background:rgba(10,15,30,.85); color:#8a96ad;
  font-size:12px; line-height:1; cursor:pointer; vertical-align:middle;
  transition:all .12s;
}
.hud-shiny-flag:hover{ border-color:#3ff5d4; color:#3ff5d4; transform:scale(1.12); }
.hud-shiny-flag.on{
  background:linear-gradient(160deg,#3ff5d4,#1f9d88); color:#06231f; border-color:#3ff5d4;
  box-shadow:0 0 10px rgba(63,245,212,.65);
}
.am-resume-card{
  display:flex;align-items:center;gap:14px;width:100%;
  background:linear-gradient(100deg,#1e9e54,#27ae60 55%,#16a085);
  border:none;border-radius:14px;padding:14px 16px;margin-bottom:14px;cursor:pointer;
  transition:transform .12s,box-shadow .12s;box-shadow:0 4px 18px rgba(39,174,96,.35);
  position:relative;
}
.am-resume-card:hover{transform:translateY(-2px);box-shadow:0 6px 26px rgba(39,174,96,.55);}
.am-resume-icon{
  font-size:26px;flex-shrink:0;color:#fff;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.am-resume-text{flex:1;text-align:left;}
.am-resume-title{font-family:var(--game);font-weight:800;font-size:18px;letter-spacing:1.5px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);}
.am-resume-sub{font-family:var(--body);font-size:13px;color:rgba(255,255,255,.92);margin-top:2px;}
.am-resume-x{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.25);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;transition:background .12s;
}
.am-resume-x:hover{background:rgba(0,0,0,.5);}

/* ── Buscador de objetos y filtros de movimientos en el builder ── */
#tb-item-search, .tb-pool-filters #tb-pool-search {
  width:100%; background:var(--surface2,#1a2238); border:1px solid var(--border,#2a3550);
  color:var(--text,#e8eef7); border-radius:10px; padding:10px 12px; font-size:15px;
  font-family:var(--body,inherit); margin-bottom:10px; outline:none;
}
#tb-item-search:focus, .tb-pool-filters #tb-pool-search:focus { border-color:var(--gold,#f5b400); }
.tb-pool-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.tb-pool-filters #tb-pool-search { flex:1 1 100%; margin-bottom:0; }
.tb-pool-sel {
  flex:1 1 calc(50% - 4px); background:var(--surface2,#1a2238); border:1px solid var(--border,#2a3550);
  color:var(--text,#e8eef7); border-radius:10px; padding:9px 10px; font-size:14px;
  font-family:var(--body,inherit); cursor:pointer; outline:none;
}
.tb-pool-sel:focus { border-color:var(--gold,#f5b400); }
.tb-pool-empty, .tb-pool-grid .tb-pool-empty {
  grid-column:1/-1; text-align:center; color:var(--muted,#8a96ad); padding:18px; font-size:.9rem;
}

/* ── Formas alternativas: chip en la carta del selector + botón de cambio ── */
.tb-pick-form{
  position:absolute; top:5px; left:5px; z-index:2;
  font-family:var(--game,'Rajdhani'); font-weight:700; font-size:.5rem; letter-spacing:.3px;
  padding:2px 5px; border-radius:6px; line-height:1.1; white-space:nowrap;
  background:rgba(120,150,235,.92); color:#fff; max-width:80%; overflow:hidden; text-overflow:ellipsis;
}
.tb-form-toggle{
  display:inline-flex; align-items:center; gap:5px; margin:6px 0 2px;
  padding:6px 12px; border-radius:9px; cursor:pointer;
  background:var(--surface2,#1a2238); border:1px solid var(--border,#2a3550);
  color:#b9c4ff; font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.5px; transition:all .15s;
}
.tb-form-toggle:hover{
  border-color:#8fa0ff; color:#cdd6ff;
  box-shadow:0 0 14px -3px rgba(143,160,255,.6);
}

/* Desplegable de formas alternativas (constructor) */
.tb-form-select-wrap{
  display:inline-flex; align-items:center; gap:6px; margin:6px 0 2px;
  padding:5px 10px 5px 12px; border-radius:9px; cursor:pointer;
  background:var(--surface2,#1a2238); border:1px solid var(--border,#2a3550);
  transition:all .15s;
}
.tb-form-select-wrap:hover{
  border-color:#8fa0ff;
  box-shadow:0 0 14px -3px rgba(143,160,255,.6);
}
.tb-form-select-ico{ color:#b9c4ff; font-weight:700; font-size:.95rem; }
.tb-form-select{
  background:transparent; border:none; color:#cdd6ff; cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.85rem;
  letter-spacing:.4px; padding-right:4px; outline:none;
}
.tb-form-select option{ background:var(--surface,#161d31); color:#e8eef7; }

/* Chip de forma alternativa en las cartas del draft */
.pc-form{
  position:absolute; top:6px; right:8px; z-index:2;
  font-family:var(--game,'Rajdhani'); font-weight:700; font-size:8px;
  padding:2px 5px; border-radius:5px; letter-spacing:.4px;
  background:rgba(120,150,235,.92); color:#fff; max-width:70%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Reordenar equipos guardados (drag + botones ▲▼) ── */
.tb-team-card[draggable="true"]{ cursor:default; }
.tb-team-dragging{ opacity:.5; border-color:var(--gold,#f5b400)!important; }
.tb-team-drag{
  cursor:grab; color:var(--muted,#8a96ad); font-size:1.1rem; line-height:1;
  user-select:none; padding-right:2px; letter-spacing:-2px;
}
.tb-team-drag:active{ cursor:grabbing; }
.tb-team-card-head .tb-team-name{ flex:1; }
.tb-team-order{ display:inline-flex; gap:4px; align-self:center; }
.tb-order-btn{
  width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface2,#1a2238); border:1px solid var(--border,#2a3550);
  color:var(--text,#e8eef7); border-radius:7px; cursor:pointer; font-size:.7rem;
  line-height:1; transition:all .14s;
}
.tb-order-btn:hover:not(:disabled){ border-color:var(--gold,#f5b400); color:var(--gold,#f5b400); }
.tb-order-btn:disabled{ opacity:.3; cursor:default; }

/* ── Naturaleza, EVs e IVs en el editor del constructor (solo afectan al online) ── */
.tb-ev-online{
  font-size:10px; font-weight:600; color:#ffc04d; letter-spacing:.3px;
  background:rgba(255,180,60,.12); border:1px solid rgba(255,180,60,.35);
  padding:1px 7px; border-radius:8px; margin-left:8px; text-transform:none;
}
/* Fila de naturaleza: etiqueta + select bonito + chips de efecto */
.tb-nat-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin:8px 0 16px;
}
.tb-nat-select{
  flex:1; min-width:200px; background:#161b2e; color:#e6edf3; border:1px solid #2d3a6a;
  border-radius:9px; padding:9px 32px 9px 12px; font-family:'Inter',sans-serif; font-size:13px;
  cursor:pointer; transition:border-color .12s, box-shadow .12s;
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#7e8aa8 50%),linear-gradient(135deg,#7e8aa8 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.tb-nat-select:hover{ border-color:var(--accent); }
.tb-nat-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(58,122,254,.25); }
.tb-nat-chips{ display:flex; align-items:center; gap:6px; }
.tb-nat-chip{
  display:inline-flex; align-items:center; gap:3px;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:11px; letter-spacing:.3px;
  padding:3px 9px; border-radius:8px; white-space:nowrap;
}
.tb-nat-chip-up{ background:rgba(58,200,120,.16); color:#7ee89a; border:1px solid rgba(58,200,120,.4); }
.tb-nat-chip-down{ background:rgba(231,76,60,.15); color:#ff9a9a; border:1px solid rgba(231,76,60,.4); }
.tb-nat-chip-neutral{ background:rgba(127,138,168,.14); color:#aab4cc; border:1px solid rgba(127,138,168,.3); }

/* Reparto en dos columnas (EVs | IVs) y, debajo, las estadísticas a lo ancho */
.tb-ev-split{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; align-items:start; }
.tb-ev-col{ min-width:0; }
@media (max-width:760px){ .tb-ev-split{ grid-template-columns:1fr; } }

.tb-ev-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:#9fb1c4; font-family:'Inter',sans-serif; margin:0 0 10px;
  font-weight:600;
}
.tb-ev-left{ font-weight:700; color:#7ee89a; }
.tb-ev-left.tb-ev-over{ color:#ff6b6b; }
.tb-iv-presets{ display:flex; gap:6px; }
.tb-iv-preset{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:11px; letter-spacing:.4px;
  background:#161b2e; color:#cbd3e8; border:1px solid #2d3a6a; border-radius:7px;
  padding:3px 11px; cursor:pointer; transition:background .12s, border-color .12s, color .12s;
}
.tb-iv-preset:hover{ background:#1e2742; border-color:var(--accent); color:#fff; }
.tb-iv-preset-on{ background:rgba(58,122,254,.18); border-color:var(--accent); color:#9cc2ff; }

.tb-ev-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:6px; }
.tb-ev-row{ display:flex; align-items:center; gap:8px; }
.tb-ev-lbl{
  width:62px; flex:0 0 62px; font-size:11.5px; color:#cbd3e8;
  font-family:'Rajdhani',sans-serif; font-weight:600;
}
.tb-ev-btn{
  width:26px; height:26px; flex:0 0 26px; border:1px solid #2d3a6a;
  background:#161b2e; color:#e6edf3; border-radius:7px; font-size:16px;
  font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center;
  line-height:1; transition:background .12s, border-color .12s; padding:0;
}
.tb-ev-btn:hover{ background:#1e2742; border-color:var(--accent); }
.tb-ev-btn:active{ transform:translateY(1px); }

/* Slider estilizado (común a EVs e IVs). Relleno por --pct con degradado. */
.tb-stat-slider{ flex:1; min-width:40px; display:flex; align-items:center; }
.tb-ev-range, .tb-iv-range{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:5px;
  background:linear-gradient(90deg, var(--fill,#3a7afe) 0%, var(--fill,#3a7afe) var(--pct,0%), #0e1322 var(--pct,0%), #0e1322 100%);
  border:1px solid #232c48; cursor:pointer; outline:none;
}
.tb-ev-range{ --fill:#3a7afe; }
.tb-iv-range{ --fill:#2ecc71; }
.tb-ev-range::-webkit-slider-thumb, .tb-iv-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid var(--fill,#3a7afe); cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.5); transition:transform .1s;
}
.tb-ev-range::-webkit-slider-thumb:hover, .tb-iv-range::-webkit-slider-thumb:hover{ transform:scale(1.18); }
.tb-ev-range::-moz-range-thumb, .tb-iv-range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:#fff;
  border:2px solid var(--fill,#3a7afe); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.5);
}
.tb-ev-num{
  width:46px; flex:0 0 46px; background:#161b2e; color:#e6edf3;
  border:1px solid #2d3a6a; border-radius:7px; padding:5px 4px; text-align:center;
  font-family:'Inter',sans-serif; font-size:12px;
}
.tb-ev-num::-webkit-inner-spin-button{ opacity:.5; }
.tb-iv-row.tb-iv-perfect .tb-iv-num{ color:#7ee89a; border-color:#2f6b46; }
.tb-iv-row.tb-iv-perfect .tb-ev-lbl{ color:#9fe8b8; }

/* Bloque de estadísticas a lo ancho, debajo de EVs/IVs */
.tb-sb-block{ margin-top:18px; padding-top:16px; border-top:1px solid #1d2742; }
.tb-sb-title{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:13px; letter-spacing:.6px;
  color:#9fb1c4; text-transform:uppercase; margin-bottom:10px;
}
.tb-sb-list{ display:flex; flex-direction:column; gap:7px; }
.tb-sb-row{ display:flex; align-items:center; gap:10px; }
.tb-sb-lbl{
  width:64px; flex:0 0 64px; font-size:11.5px; color:#cbd3e8;
  font-family:'Rajdhani',sans-serif; font-weight:600;
}
.tb-sb-track{
  flex:1; position:relative; height:12px; background:#0e1322;
  border:1px solid #232c48; border-radius:6px; overflow:hidden;
}
.tb-sb-base{ position:absolute; left:0; top:0; height:100%; opacity:.55; border-radius:6px 0 0 6px; }
/* Tramo extra (EVs + IVs + naturaleza positiva): con glow del color del stat */
.tb-sb-ev{
  position:absolute; top:0; height:100%;
  box-shadow:0 0 8px 1px currentColor; filter:brightness(1.15);
  border-radius:0; opacity:.95;
}
/* Tramo perdido por naturaleza negativa: rojo translúcido */
.tb-sb-down{
  position:absolute; top:0; height:100%;
  background:repeating-linear-gradient(45deg,rgba(231,76,60,.5),rgba(231,76,60,.5) 4px,rgba(231,76,60,.25) 4px,rgba(231,76,60,.25) 8px);
}
.tb-sb-val{
  width:46px; flex:0 0 46px; text-align:right; font-family:'Inter',sans-serif;
  font-size:12px; font-weight:700; color:#e6edf3; display:inline-flex; align-items:center;
  justify-content:flex-end; gap:2px;
}
.tb-sb-nat-ico-up{ color:#7ee89a; font-size:9px; }
.tb-sb-nat-ico-down{ color:#ff8a8a; font-size:9px; }
.tb-sb-legend{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:10px;
  font-family:'Inter',sans-serif; font-size:10.5px; color:#7e8aa8;
}
.tb-sb-leg-up{ color:#7ee89a; }
.tb-sb-leg-down{ color:#ff9a9a; }

/* ════════════════════════════════════════════════════════════════════
   PANTALLA-GUÍA DE NOTIFICACIONES (db-push-guide.js)
   Overlay a pantalla completa con la guía paso a paso (Android/iOS),
   ilustraciones SVG, un switch para activar/desactivar y dos botones:
   azul "Más tarde" (glow azul) y rojo "No volver a mostrar" (glow rojo).
   ════════════════════════════════════════════════════════════════════ */
.pg-overlay{
  position:fixed; inset:0; z-index:99999;
  background:rgba(6,9,16,.82); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:16px;
  animation:pgFade .25s ease;
}
@keyframes pgFade{from{opacity:0}to{opacity:1}}
.pg-overlay.pg-closing{animation:pgFadeOut .25s ease forwards}
@keyframes pgFadeOut{to{opacity:0}}
.pg-card{
  background:linear-gradient(165deg,#141a2e,#0e1322);
  border:1px solid #2d3a6a; border-radius:18px;
  max-width:460px; width:100%; max-height:92vh; overflow-y:auto;
  padding:22px 20px; box-shadow:0 16px 50px rgba(0,0,0,.6);
  animation:pgPop .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pgPop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.pg-head{text-align:center; margin-bottom:18px}
.pg-bell{font-size:34px; display:block; margin-bottom:6px}
.pg-title{font-family:'Rajdhani',sans-serif; font-size:22px; font-weight:700; color:#e6edf3; margin:0 0 6px; text-transform:uppercase; letter-spacing:.5px}
.pg-sub{font-size:13px; color:#9fb1c4; margin:0; line-height:1.5}
.pg-steps{display:flex; flex-direction:column; gap:14px; margin-bottom:18px}
.pg-step{display:flex; gap:12px; align-items:flex-start}
.pg-step-num{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(160deg,#3a7afe,#2456c8); color:#fff;
  font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center;
  font-family:'Rajdhani',sans-serif;
}
.pg-step-body{flex:1; display:flex; flex-direction:column; gap:8px}
.pg-step-ill{background:#0a0e1a; border:1px solid #232c48; border-radius:10px; padding:6px; text-align:center}
.pg-svg{width:100%; max-width:220px; height:auto}
.pg-step-txt{font-size:13px; color:#cbd3e8; line-height:1.5}
.pg-step-txt b{color:#fff}
/* Switch */
.pg-switch-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#0e1322; border:1px solid #232c48; border-radius:12px;
  padding:12px 14px; margin-bottom:16px;
}
.pg-switch-lbl{font-size:13px; color:#cbd3e8; font-weight:600}
.pg-switch{
  position:relative; flex:0 0 52px; width:52px; height:30px; border-radius:16px;
  background:#2a3450; border:1px solid #3a4a6a; cursor:pointer; transition:background .2s; padding:0;
}
.pg-switch.on{background:linear-gradient(160deg,#1a8a3a,#13692c); border-color:#2bbf5a}
.pg-switch-knob{
  position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background:#fff; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.pg-switch.on .pg-switch-knob{left:24px}
.pg-switch:disabled{opacity:.5; cursor:not-allowed}
/* Botones con glow */
.pg-actions{display:flex; gap:10px}
.pg-btn{
  flex:1; padding:13px 10px; border:none; border-radius:11px; cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px; letter-spacing:.3px;
  color:#fff; transition:transform .12s, box-shadow .2s;
}
.pg-btn:active{transform:translateY(1px)}
.pg-btn-blue{
  background:linear-gradient(160deg,#3a7afe,#2456c8);
  box-shadow:0 0 18px rgba(58,122,254,.55), 0 4px 12px rgba(0,0,0,.3);
}
.pg-btn-blue:hover{box-shadow:0 0 26px rgba(58,122,254,.8), 0 4px 12px rgba(0,0,0,.3)}
.pg-btn-red{
  background:linear-gradient(160deg,#e2483d,#a82a22);
  box-shadow:0 0 18px rgba(226,72,61,.5), 0 4px 12px rgba(0,0,0,.3);
}
.pg-btn-red:hover{box-shadow:0 0 26px rgba(226,72,61,.75), 0 4px 12px rgba(0,0,0,.3)}

/* Mini-switch en el botón de Notificaciones del menú de usuario */
.acc-push-item{display:flex; align-items:center; gap:8px}
.acc-push-sw{
  margin-left:auto; position:relative; flex:0 0 38px; width:38px; height:22px;
  border-radius:12px; background:#2a3450; border:1px solid #3a4a6a; transition:background .2s;
}
.acc-push-sw.on{background:linear-gradient(160deg,#1a8a3a,#13692c); border-color:#2bbf5a}
.acc-push-knob{
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; transition:left .2s; box-shadow:0 1px 2px rgba(0,0,0,.5);
}
.acc-push-sw.on .acc-push-knob{left:18px}

/* ════════════════════════════════════════════════════════════════════
   INICIO HERO — ajustes responsive de la rejilla 2×2 de modos
   ════════════════════════════════════════════════════════════════════ */
/* En móvil estrecho, tarjetas en columna (ya es el layout base). */
@media (max-width: 560px){
  .start-menu{max-width:420px;gap:11px;}
  .sec-head{min-height:92px;padding:16px 14px;}
  .sec-tx{font-size:19px;}
  .sec-spr{width:78px;height:78px;}
}

/* NOTA: el layout del INICIO EN PC (4 tarjetas en fila + panel desplegable
   debajo de cada columna) está en el <style> inline de index.html, a prueba
   de caché de Nominalia. */

/* ════════════════════════════════════════════════════════════════════
   BATALLA EN PC — campo grande, ancho con margen, ataques completos
   Solo afecta a escritorio (ancho >= 769px y altura cómoda). Móvil NO se toca.
   Arregla: el campo "cuadrado" (ahora es ancho con margen lateral) y los
   ataques que se cortaban (franja inferior con altura suficiente).
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (min-height: 600px){
  /* ══ TARJETAS DE CAMBIAR: sprite grande a la izquierda, info a la derecha ══
     SOLO PC (dentro de este media query) y SOLO modo no-simple
     (#screen-battle SIN la clase .plain-switch). El móvil y el modo simple
     quedan intactos: estas reglas no les llegan. Se reorganiza con CSS grid
     sin tocar el HTML original. */
  #screen-battle:not(.plain-switch) .switch-card{
    display:grid !important;
    grid-template-columns:104px 1fr !important;
    grid-template-rows:auto 1fr !important;
    align-items:stretch !important;
    gap:6px 13px !important;
    padding:10px !important;
    position:relative !important;
  }
  #screen-battle:not(.plain-switch) .switch-card .swc-top{
    display:contents !important;
  }
  #screen-battle:not(.plain-switch) .switch-card .swc-spr{
    grid-column:1 !important; grid-row:1 / 3 !important;
    width:100% !important; height:auto !important; align-self:stretch !important;
    min-height:112px !important; object-fit:contain !important;
    background:radial-gradient(ellipse at center, color-mix(in srgb, var(--acc,#3fcf8e) 22%, transparent) 0%, transparent 70%) !important;
    border-radius:10px !important;
  }
  /* Nombre + HP arriba a la derecha. Reservamos hueco a la derecha (padding) para
     que los tipos (posicionados en absoluto) no se solapen con el nombre. */
  #screen-battle:not(.plain-switch) .switch-card .swc-info{
    grid-column:2 !important; grid-row:1 !important; align-self:start !important;
    padding-right:0 !important; min-width:0 !important;
  }
  #screen-battle:not(.plain-switch) .switch-card .swc-name{
    font-size:15px !important; padding-right:2px !important;
    white-space:nowrap !important; overflow:visible !important;
  }
  /* Los tipos van justo a la derecha del nombre (misma línea), no en absoluto:
     usamos flex en la fila del nombre para que queden pegados a su derecha. */
  #screen-battle:not(.plain-switch) .switch-card .swc-hp-bar{ height:6px !important; }
  #screen-battle:not(.plain-switch) .switch-card .swc-hp-num{ font-size:11px !important; }
  /* Tipos: fijados en la esquina superior derecha, a la altura del nombre */
  #screen-battle:not(.plain-switch) .switch-card .swc-types{
    position:absolute !important; top:10px !important; right:11px !important;
    z-index:2 !important; margin:0 !important;
  }
  /* Ataques: fila 2, ocupando la columna derecha, más grandes */
  #screen-battle:not(.plain-switch) .switch-card .swc-moves{
    grid-column:2 !important; grid-row:2 !important;
    grid-template-columns:1fr 1fr !important; align-self:stretch !important;
    gap:5px !important;
  }
  #screen-battle:not(.plain-switch) .switch-card .swc-move{
    padding:5px 8px !important; border-radius:8px !important;
  }
  #screen-battle:not(.plain-switch) .switch-card .swc-move-nm{ font-size:12px !important; }
  #screen-battle:not(.plain-switch) .switch-card .swc-move-pp{ font-size:11px !important; }
  #screen-battle:not(.plain-switch) .switch-card .swc-move img{ width:16px !important; height:16px !important; flex:0 0 16px !important; }
  #screen-battle:not(.plain-switch) .switch-card::after{ right:-30% !important; }

  /* Arena ancha (con margen lateral, ya no cuadrada) y a la altura de la ventana */
  #screen-battle .battle-arena{
    width:min(1700px, calc(100vw - 48px)) !important;
    max-width:min(1700px, calc(100vw - 48px)) !important;
    height:calc(100dvh - 96px);
    max-height:calc(100dvh - 96px);
    margin:0 auto;
  }
  /* El campo de lucha llena todo el espacio que queda sobre la franja de abajo */
  #screen-battle .battle-field{
    height:auto !important;
    flex:1 1 auto;
    min-height:420px;
  }
  /* Franja de ataques + log: altura para que los 4 ataques entren COMPLETOS sin cortarse */
  #screen-battle .battle-bottom{
    height:300px;
    flex-shrink:0;
  }
  /* Pokémon y plataformas más grandes, en una franja central */
  #screen-battle .slot-enemy{right:21%;top:15%;width:210px;}
  #screen-battle .slot-player{left:10%;bottom:21%;width:250px;}
  #screen-battle .sprite-enemy{width:210px;height:210px;object-fit:contain;object-position:center bottom;image-rendering:pixelated;}
  #screen-battle .sprite-player{width:250px;height:250px;object-fit:contain;object-position:center bottom;image-rendering:pixelated;}
  #screen-battle .platform-enemy{width:270px;height:60px;margin-top:-52px;}
  #screen-battle .platform-player{width:320px;height:70px;margin-top:-60px;}
  /* ── Tarjeta de ataque en COMBATE (estas reglas mandan por #screen-battle) ──
     FRANJA OSCURA (arriba, 52px): nombre arriba-izq, tipo + categoría arriba-der,
     y el botón ℹ arriba del todo a la derecha.
     FRANJA CLARA (abajo, el resto): PP abajo-izq y las cajitas grises
     POTENCIA/PRECISIÓN abajo-der, centradas DENTRO de la franja clara. */
  #screen-battle .move-btn{min-height:0;height:100%;grid-template-rows:60px 1fr !important;}
  /* La franja oscura ocupa exactamente la fila 1 (60px) */
  #screen-battle .move-btn::before{height:60px !important;background:rgba(0,0,0,.26) !important;}
  /* Cabecera: nombre + tipo + categoría centrados en la franja oscura */
  #screen-battle .mbn{font-size:19px;align-self:center !important;padding:0 8px 0 14px !important;}
  #screen-battle .mbtype{align-self:center !important;margin:0 8px 0 0 !important;}
  /* La categoría se separa a la izquierda para dejar hueco a la ℹ a su derecha */
  #screen-battle .mbcat{align-self:center !important;margin:0 34px 0 5px !important;}
  /* Franja clara: PP y cajitas centrados verticalmente DENTRO de ella */
  #screen-battle .mbp{align-self:center !important;padding:0 10px 0 14px !important;}
  #screen-battle .mstats{align-self:center !important;padding:0 11px 0 4px !important;}
  /* Cajitas grises compactas, encajadas en la franja clara y ceñidas al texto */
  #screen-battle .mstat-box{min-width:0;padding:2px 9px 3px;}
  #screen-battle .mstat-val{font-size:16px;}
  #screen-battle .mstat-lbl{font-size:7px;}
  #screen-battle .mbtype{padding:3px 9px;gap:4px;}
  #screen-battle .mbtype-name{font-size:11px;}
  /* Botón ℹ arriba a la derecha (en la franja oscura), más vistoso */
  #screen-battle .move-info-btn{
    top:7px !important; right:8px !important; bottom:auto !important;
    width:18px; height:18px; display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; border-radius:50%;
    background:rgba(255,255,255,.14); color:rgba(255,255,255,.8);
    box-shadow:0 1px 3px rgba(0,0,0,.4); z-index:4;
  }
  #screen-battle .move-info-btn:hover{ background:rgba(120,170,255,.5); color:#fff; }
}

/* ════════════════════════════════════════════════════════════════════
   ONBOARDING — Tutorial de bienvenida (db-onboarding.js)
   Carrusel a pantalla completa que aparece en el primer arranque.
   Paleta oscura del juego, tipografía Rajdhani en títulos.
   ════════════════════════════════════════════════════════════════════ */
.ob-overlay{
  position:fixed; inset:0; z-index:100000;
  background:rgba(6,9,16,.85); backdrop-filter:blur(7px);
  display:flex; align-items:center; justify-content:center; padding:18px;
  animation:obFade .25s ease;
}
@keyframes obFade{ from{opacity:0} to{opacity:1} }
.ob-overlay.ob-closing{ animation:obFadeOut .24s ease forwards; }
@keyframes obFadeOut{ to{opacity:0} }
.ob-card{
  position:relative;
  background:linear-gradient(165deg,#141a2e,#0d1322);
  border:1px solid #2d3a6a; border-radius:20px;
  width:100%; max-width:480px; padding:24px 24px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:obPop .32s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes obPop{ from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
.ob-skip{
  position:absolute; top:14px; right:14px;
  background:transparent; border:none; color:#7e8aa8; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
  padding:4px 8px; border-radius:7px; transition:color .12s, background .12s;
}
.ob-skip:hover{ color:#e6edf3; background:rgba(255,255,255,.06); }
.ob-illus{
  background:#0a0e1a; border:1px solid #1d2742; border-radius:14px;
  padding:10px; margin:6px 0 16px; display:flex; align-items:center; justify-content:center;
}
.ob-svg{ width:100%; max-width:300px; height:auto; display:block; }
.ob-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ob-tag{
  font-family:'Rajdhani',sans-serif; font-weight:800; font-size:11px; letter-spacing:1px;
  color:#7ee89a; background:rgba(58,200,120,.14); border:1px solid rgba(58,200,120,.35);
  padding:3px 10px; border-radius:8px;
}
.ob-step-count{ font-family:'Inter',sans-serif; font-size:12px; color:#7e8aa8; font-weight:600; }
.ob-title{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:23px; color:#e6edf3;
  margin:0 0 8px; line-height:1.2;
}
.ob-text{
  font-family:'Inter',sans-serif; font-size:14px; color:#cbd3e8; line-height:1.55;
  margin:0 0 18px; min-height:66px;
}
.ob-dots{ display:flex; gap:8px; justify-content:center; margin-bottom:18px; }
.ob-dot{
  width:8px; height:8px; border-radius:50%; background:#2a3450; cursor:pointer;
  transition:background .15s, transform .15s; border:none; padding:0;
}
.ob-dot:hover{ background:#3a4a6a; }
.ob-dot-on{ background:#5aaaff; transform:scale(1.25); }
.ob-actions{ display:flex; gap:10px; }
.ob-btn{
  flex:1; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px; letter-spacing:.5px;
  padding:11px 14px; border-radius:11px; cursor:pointer; transition:background .14s, border-color .14s, transform .1s;
}
.ob-btn:active{ transform:translateY(1px); }
.ob-back{
  flex:0 0 38%; background:#161b2e; color:#cbd3e8; border:1px solid #2d3a6a;
}
.ob-back:hover{ background:#1e2742; border-color:#3a4a6a; }
.ob-next{
  background:linear-gradient(160deg,#3a7afe,#2456c8); color:#fff; border:1px solid #4a86ff;
}
.ob-next:hover{ background:linear-gradient(160deg,#4a86ff,#2c63d8); }
.ob-next-final{
  background:linear-gradient(160deg,#1a8a3a,#13692c); border-color:#2bbf5a;
  box-shadow:0 0 16px -2px rgba(43,191,90,.5);
}
.ob-next-final:hover{ background:linear-gradient(160deg,#1fa044,#177c33); }

@media (max-width:520px){
  .ob-card{ padding:20px 18px 16px; border-radius:16px; }
  .ob-title{ font-size:20px; }
  .ob-text{ font-size:13.5px; min-height:80px; }
}

/* ════════════════════════════════════════════════════════════════════
   JUGADORES ONLINE (db-online.js)
   Botón con glow en la barra de cuenta + panel con pestañas Todos/Amigos.
   ════════════════════════════════════════════════════════════════════ */
/* Botón "Online" a la izquierda del nombre, con punto verde y glow pulsante */
.acc-online-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(160deg,rgba(46,204,113,.18),rgba(46,204,113,.08));
  border:1px solid rgba(46,204,113,.5); color:#9fe8b8;
  border-radius:10px; padding:6px 11px; cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12px; letter-spacing:.5px;
  box-shadow:0 0 12px -2px rgba(46,204,113,.5);
  transition:background .14s, border-color .14s, box-shadow .14s, transform .1s;
}
.acc-online-btn:hover{
  background:linear-gradient(160deg,rgba(46,204,113,.3),rgba(46,204,113,.14));
  border-color:#2ecc71; color:#d6ffe6;
  box-shadow:0 0 18px -1px rgba(46,204,113,.7);
}
.acc-online-btn:active{ transform:translateY(1px); }
.acc-online-dot{
  width:8px; height:8px; border-radius:50%; background:#2ecc71;
  box-shadow:0 0 0 0 rgba(46,204,113,.7); animation:accOnlinePulse 2s infinite;
}
@keyframes accOnlinePulse{
  0%{ box-shadow:0 0 0 0 rgba(46,204,113,.6); }
  70%{ box-shadow:0 0 0 7px rgba(46,204,113,0); }
  100%{ box-shadow:0 0 0 0 rgba(46,204,113,0); }
}

/* Panel (overlay) */
.op-overlay{
  position:fixed; inset:0; z-index:100001;
  background:rgba(6,9,16,.82); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:18px;
  animation:opFade .22s ease;
}
@keyframes opFade{ from{opacity:0} to{opacity:1} }
.op-overlay.op-closing{ animation:opFadeOut .2s ease forwards; }
@keyframes opFadeOut{ to{opacity:0} }
.op-card{
  position:relative; background:linear-gradient(165deg,#141a2e,#0d1322);
  border:1px solid #2d3a6a; border-radius:18px; width:100%; max-width:440px;
  max-height:80vh; display:flex; flex-direction:column;
  padding:20px 20px 16px; box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:opPop .28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes opPop{ from{transform:scale(.93);opacity:0} to{transform:scale(1);opacity:1} }
.op-close{
  position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:8px;
  background:transparent; border:none; color:#7e8aa8; cursor:pointer; font-size:15px;
  transition:color .12s, background .12s;
}
.op-close:hover{ color:#e6edf3; background:rgba(255,255,255,.06); }
.op-head{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.op-dot-lg{
  width:11px; height:11px; border-radius:50%; background:#2ecc71;
  box-shadow:0 0 10px 1px rgba(46,204,113,.7);
}
.op-title{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:19px; color:#e6edf3; margin:0;
}
.op-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.op-tab{
  flex:1; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:13px; letter-spacing:.5px;
  background:#161b2e; color:#9fb1c4; border:1px solid #2d3a6a; border-radius:9px;
  padding:8px 10px; cursor:pointer; transition:background .12s, color .12s, border-color .12s;
}
.op-tab:hover{ background:#1e2742; color:#cbd3e8; }
.op-tab-on{ background:rgba(46,204,113,.16); color:#9fe8b8; border-color:rgba(46,204,113,.5); }
.op-list{ overflow-y:auto; display:flex; flex-direction:column; gap:8px; min-height:80px; }
.op-loading, .op-empty{
  text-align:center; color:#7e8aa8; font-family:'Inter',sans-serif; font-size:13px; padding:24px 8px;
}
.op-row{
  display:flex; align-items:center; gap:11px;
  background:#10162a; border:1px solid #232c48; border-radius:11px; padding:9px 12px;
}
.op-row-busy{ opacity:.62; }
.op-ava{
  position:relative; width:34px; height:34px; flex:0 0 34px; border-radius:50%;
  background:linear-gradient(160deg,#2a3450,#1a2238); color:#e6edf3;
  display:flex; align-items:center; justify-content:center;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px;
}
.op-ava .op-dot{
  position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%;
  background:#2ecc71; border:2px solid #10162a;
}
.op-name{ flex:1; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:#e6edf3; }
.op-busy{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:11px; letter-spacing:.4px;
  color:#9fb1c4; background:rgba(127,138,168,.14); border:1px solid rgba(127,138,168,.3);
  padding:3px 9px; border-radius:8px;
}
.op-challenge{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.4px;
  background:linear-gradient(160deg,#3a7afe,#2456c8); color:#fff; border:1px solid #4a86ff;
  border-radius:9px; padding:7px 13px; cursor:pointer;
  transition:background .12s, transform .1s, box-shadow .12s;
}
.op-challenge:hover{ background:linear-gradient(160deg,#4a86ff,#2c63d8); box-shadow:0 0 14px -2px rgba(58,122,254,.7); }
.op-challenge:active{ transform:translateY(1px); }

/* ════════════════════════════════════════════════════════════════════
   ESTADÍSTICAS (db-stats.js)
   Botón en el perfil + panel con resumen total y desglose por modo.
   ════════════════════════════════════════════════════════════════════ */
/* Botón dentro del diálogo de perfil */
.acc-stats-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:linear-gradient(160deg,rgba(58,122,254,.18),rgba(58,122,254,.08));
  border:1px solid rgba(58,122,254,.5); color:#bcd2ff;
  margin:4px 0 14px; font-weight:700;
}
.acc-stats-btn:hover{ background:linear-gradient(160deg,rgba(58,122,254,.3),rgba(58,122,254,.14)); color:#fff; }
.acc-stats-ico{ font-size:15px; }

/* Overlay del panel */
.st-overlay{
  position:fixed; inset:0; z-index:100002;
  background:rgba(6,9,16,.82); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:18px;
  animation:stFade .22s ease;
}
@keyframes stFade{ from{opacity:0} to{opacity:1} }
.st-overlay.st-closing{ animation:stFadeOut .2s ease forwards; }
@keyframes stFadeOut{ to{opacity:0} }
.st-card{
  position:relative; background:linear-gradient(165deg,#141a2e,#0d1322);
  border:1px solid #2d3a6a; border-radius:18px; width:100%; max-width:460px;
  max-height:84vh; display:flex; flex-direction:column;
  padding:20px 20px 18px; box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:stPop .28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes stPop{ from{transform:scale(.93);opacity:0} to{transform:scale(1);opacity:1} }
.st-close{
  position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:8px;
  background:transparent; border:none; color:#7e8aa8; cursor:pointer; font-size:15px;
  transition:color .12s, background .12s;
}
.st-close:hover{ color:#e6edf3; background:rgba(255,255,255,.06); }
.st-head{ display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.st-ico{ font-size:20px; }
.st-title{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:19px; color:#e6edf3; margin:0; }
.st-body{ overflow-y:auto; }
.st-loading, .st-empty{
  text-align:center; color:#7e8aa8; font-family:'Inter',sans-serif; font-size:13px;
  padding:30px 8px; line-height:1.6;
}
/* Resumen total */
.st-total{
  display:flex; align-items:center; gap:16px;
  background:#10162a; border:1px solid #232c48; border-radius:14px;
  padding:14px 16px; margin-bottom:16px;
}
.st-total-big{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.st-total-num{ font-family:'Rajdhani',sans-serif; font-weight:800; font-size:34px; color:#fff; }
.st-total-lbl{ font-family:'Inter',sans-serif; font-size:11px; color:#9fb1c4; margin-top:3px; }
.st-total-wl{ display:flex; flex-direction:column; gap:3px; font-family:'Inter',sans-serif; font-size:13px; }
.st-total-w{ color:#7ee89a; font-weight:600; }
.st-total-l{ color:#ff9a9a; font-weight:600; }
.st-total-pct{ color:#bcd2ff; font-weight:700; margin-top:2px; }
/* Secciones por modo */
.st-sec{ margin-bottom:14px; }
.st-sec-title{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12px; letter-spacing:.6px;
  color:#9fb1c4; text-transform:uppercase; margin-bottom:8px;
}
.st-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.st-row-name{ flex:0 0 116px; font-family:'Inter',sans-serif; font-size:12.5px; color:#cbd3e8; }
.st-row-bar{
  flex:1; height:8px; background:#0e1322; border:1px solid #232c48; border-radius:5px; overflow:hidden;
}
.st-row-fill{
  height:100%; background:linear-gradient(90deg,#2ecc71,#3aa564); border-radius:5px;
  transition:width .3s ease;
}
.st-row-nums{
  flex:0 0 auto; font-family:'Inter',sans-serif; font-size:12px; color:#9fb1c4; white-space:nowrap;
}
.st-row-nums b{ color:#e6edf3; }
.st-row-pct{ color:#bcd2ff; font-weight:700; margin-left:4px; }

/* ── Efecto VERDE de curación: destello + partículas al recuperar vida ── */
.heal-glow-anim{animation:healGlow .9s ease;}
@keyframes healGlow{
  0%,100%{filter:brightness(1) saturate(1) drop-shadow(0 0 0 rgba(63,207,142,0));}
  30%{filter:brightness(1.15) saturate(1.3) drop-shadow(0 0 14px rgba(63,207,142,.9));}
  60%{filter:brightness(1.08) saturate(1.15) drop-shadow(0 0 8px rgba(63,207,142,.6));}
}
.heal-particle{
  position:absolute;z-index:9;pointer-events:none;
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#c8ffdf 0%,#4fe08a 55%,#2bbf6e 100%);
  box-shadow:0 0 8px rgba(79,224,138,.85);
  transition:top .7s cubic-bezier(.3,.7,.4,1),opacity .7s ease;
}

/* ════════════════════════════════════════════════════════════
   s772 · Menú principal reorganizado: AVENTURA botón propio,
   "Buildea tu equipo" dentro de PVE y PVP.
   ════════════════════════════════════════════════════════════ */
/* Los paneles ahora llevan también el grupo de "buildea": más alto. */
.sec-card.open .sec-panel{ max-height:640px; }
@media (max-width:560px){ #start-menu .sec-card.open .sec-panel{ max-height:640px!important; } }
@media (min-width:561px) and (max-width:768px){ #start-menu .sec-card.open .sec-panel{ max-height:640px!important; } }

/* ── Botón AVENTURA: MISMA tarjeta que PVE/PVP/Colección (familia .sec-head),
      con su propia franja verde. Acción directa (sin panel ni chevron). ── */
.sec-aventura{ margin-bottom:6px; }
.sec-aventura .sec-head{ background:linear-gradient(150deg,#16261e,#0a1410);
  border-left:5px solid #3fcf8e;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 26px rgba(63,207,142,.3),0 10px 28px rgba(0,0,0,.7); }
.sec-aventura .sec-sub{ color:#a3c9b3; }
.sec-tag-adv{ color:#7ad6a0; }

/* ── Grupo "buildea tu equipo" dentro de un panel ── */
.menu-build-group{ margin-top:8px; padding-top:10px; border-top:1px dashed rgba(255,255,255,.18);
  display:flex; flex-direction:column; gap:9px; }
.menu-build-lbl{ font-family:var(--game,'Rajdhani'),sans-serif; font-weight:800; font-size:11px;
  letter-spacing:1.6px; color:rgba(255,255,255,.6); padding:0 2px 2px; }