/* ═══════════════════════════════════════════════════
   PokéMMO Browser v2.0 - Estilos completos
   ═══════════════════════════════════════════════════ */

:root {
  --bg:        #080d1a;
  --bg2:       #0e1528;
  --bg3:       #14203a;
  --panel:     #0b1220;
  --border:    #1e3060;
  --border2:   #2a4a8a;
  --accent:    #4a9eff;
  --accent2:   #ff6b35;
  --gold:      #ffd700;
  --green:     #00e676;
  --red:       #ff1744;
  --yellow:    #ffd600;
  --purple:    #ce93d8;
  --cyan:      #00e5ff;
  --text:      #e8f0fe;
  --text-dim:  #5a6a8a;
  --text-mid:  #9aaace;
  --font-px:   'Press Start 2P', monospace;
  --font-vt:   'VT323', monospace;
  --r:         3px;
  --shadow:    0 4px 24px rgba(74,158,255,.18);
  --glow:      0 0 24px rgba(74,158,255,.35);
  --glow-gold: 0 0 20px rgba(255,215,0,.4);
}

/* TIPOS DE POKÉMON */
.tipo-normal    { background:#a8a878; color:#fff; }
.tipo-fuego     { background:#f08030; color:#fff; }
.tipo-agua      { background:#6890f0; color:#fff; }
.tipo-planta    { background:#78c850; color:#fff; }
.tipo-eléctrico { background:#f8d030; color:#000; }
.tipo-hielo     { background:#98d8d8; color:#000; }
.tipo-lucha     { background:#c03028; color:#fff; }
.tipo-veneno    { background:#a040a0; color:#fff; }
.tipo-tierra    { background:#e0c068; color:#000; }
.tipo-volador   { background:#a890f0; color:#fff; }
.tipo-psíquico  { background:#f85888; color:#fff; }
.tipo-bicho     { background:#a8b820; color:#fff; }
.tipo-roca      { background:#b8a038; color:#fff; }
.tipo-fantasma  { background:#705898; color:#fff; }
.tipo-dragón    { background:#7038f8; color:#fff; }
.tipo-siniestro { background:#705848; color:#fff; }
.tipo-acero     { background:#b8b8d0; color:#000; }
.tipo-hada      { background:#ee99ac; color:#fff; }

/* RAREZA */
.rareza-1 { color:#aaa; }
.rareza-2 { color:#78c850; }
.rareza-3 { color:#6890f0; }
.rareza-4 { color:#a040a0; }
.rareza-5 { color:#f08030; }
.rareza-6 { color:#ffd700; text-shadow:0 0 8px rgba(255,215,0,.6); }

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-vt);
  font-size:18px;
  min-height:100vh;
  overflow-x:hidden;
}
body::after {
  content:'';
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px);
  pointer-events:none;
  z-index:9999;
}
input,button { font-family:inherit; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

/* ── SCREENS ── */
.screen { display:none; min-height:100vh; }
.screen.active { display:flex; flex-direction:column; }

/* ═══════════════════════════════════════
   AUTH
═══════════════════════════════════════ */
#screenAuth { align-items:center; justify-content:center; }
.auth-bg {
  width:100%; min-height:100vh;
  background:radial-gradient(ellipse at 50% 30%, #0d1f3c 0%, #050a14 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.auth-stars { position:absolute; inset:0; pointer-events:none; }
.auth-star {
  position:absolute; width:2px; height:2px;
  background:#fff; border-radius:50%;
  animation:twinkle var(--d,3s) ease-in-out infinite var(--delay,0s);
}
@keyframes twinkle {
  0%,100%{opacity:.2} 50%{opacity:1}
}
.auth-container {
  background:var(--panel);
  border:2px solid var(--border2);
  border-radius:var(--r);
  padding:36px 40px;
  width:380px;
  box-shadow:var(--glow);
  position:relative; z-index:1;
}
.logo-area { text-align:center; margin-bottom:24px; }
.logo-ball { font-size:52px; animation:float 2.2s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.logo-title {
  font-family:var(--font-px); font-size:22px;
  color:var(--gold);
  text-shadow:var(--glow-gold), 3px 3px 0 #7a5000;
  letter-spacing:3px; margin:8px 0 4px;
}
.logo-sub { font-size:14px; color:var(--text-dim); letter-spacing:4px; }

.auth-tabs { display:flex; gap:0; margin-bottom:20px; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.auth-tab {
  flex:1; font-family:var(--font-px); font-size:10px;
  padding:10px; background:transparent; border:none;
  color:var(--text-dim); cursor:pointer; transition:all .15s;
}
.auth-tab.active { background:var(--accent); color:#000; }
.auth-tab:hover:not(.active) { background:var(--bg3); color:var(--text); }

.auth-form { display:flex; flex-direction:column; gap:12px; }
.input-group label { font-family:var(--font-px); font-size:8px; color:var(--text-dim); display:block; margin-bottom:5px; }
.input-group input {
  width:100%; background:var(--bg2); border:2px solid var(--border);
  color:var(--text); font-family:var(--font-vt); font-size:18px;
  padding:10px 14px; border-radius:var(--r); outline:none; transition:border-color .2s;
}
.input-group input:focus { border-color:var(--accent); }
.input-group input::placeholder { color:var(--text-dim); }

.auth-error {
  font-family:var(--font-px); font-size:9px; color:var(--red);
  text-align:center; margin-top:8px; min-height:16px;
}
.online-badge { font-size:14px; color:var(--text-dim); text-align:center; margin-top:12px; }

/* ═══════════════════════════════════════
   BOTONES
═══════════════════════════════════════ */
.btn {
  font-family:var(--font-px); font-size:10px;
  padding:11px 18px; border:none; border-radius:var(--r);
  cursor:pointer; letter-spacing:1px; transition:all .1s;
  position:relative; outline:none; display:inline-flex;
  align-items:center; justify-content:center; gap:6px;
}
.btn:active { transform:translateY(2px); }
.btn-full { width:100%; }
.btn-large { padding:16px 24px; font-size:12px; }
.btn-small { font-size:8px; padding:7px 11px; }

.btn-primary { background:var(--accent); color:#000; box-shadow:0 4px 0 #1a4aaa,var(--glow); }
.btn-primary:hover { background:#6ab4ff; }
.btn-primary:active { box-shadow:0 1px 0 #1a4aaa; }

.btn-secondary { background:var(--bg3); color:var(--text); border:2px solid var(--border); box-shadow:0 4px 0 #06091a; }
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }

.btn-danger { background:var(--red); color:#fff; box-shadow:0 4px 0 #8b0000; }
.btn-danger:hover { background:#ff4444; }

.btn-encounter {
  background:linear-gradient(135deg,#1a7a1a,#2aaa2a);
  color:#fff; box-shadow:0 4px 0 #0a4a0a; width:100%;
}
.btn-encounter:hover { background:linear-gradient(135deg,#2aaa2a,#3aca3a); }
.btn-encounter:disabled { background:#2a2a2a; color:#555; box-shadow:none; cursor:not-allowed; }

.btn-heal {
  background:linear-gradient(135deg,#aa1a1a,#cc2a2a);
  color:#fff; box-shadow:0 4px 0 #5a0a0a; width:100%;
}
.btn-heal:hover { background:linear-gradient(135deg,#cc2a2a,#ee3a3a); }

.btn-pvp {
  background:linear-gradient(135deg,#7b1fa2,#9c27b0);
  color:#fff; box-shadow:0 4px 0 #4a0072; width:100%; padding:16px;
}
.btn-pvp:hover { background:linear-gradient(135deg,#9c27b0,#ab47bc); }

.btn-icon {
  background:transparent; border:none; color:var(--text);
  font-size:20px; cursor:pointer; padding:4px 8px;
  transition:color .15s;
}
.btn-icon:hover { color:var(--accent); }

/* ═══════════════════════════════════════
   STARTER
═══════════════════════════════════════ */
#screenStarter { background:radial-gradient(ellipse at 50% 20%, #0d1f3c, #050a14); }
.starter-bg { width:100%; min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:32px 16px; overflow-y:auto; }
.starter-container { max-width:900px; width:100%; }
.starter-titulo { font-family:var(--font-px); font-size:16px; color:var(--gold); text-align:center; margin-bottom:10px; text-shadow:var(--glow-gold); }
.starter-desc { font-size:18px; color:var(--text-mid); text-align:center; margin-bottom:20px; line-height:1.5; }

.starter-filtros { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:20px; }
.filtro-btn {
  font-family:var(--font-px); font-size:8px; padding:7px 12px;
  background:var(--bg3); border:2px solid var(--border);
  color:var(--text-dim); cursor:pointer; border-radius:var(--r); transition:all .15s;
}
.filtro-btn.active { background:var(--accent); color:#000; border-color:var(--accent); }
.filtro-btn:hover:not(.active) { border-color:var(--accent); color:var(--text); }

.starter-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:12px; margin-bottom:24px;
}

.starter-card {
  background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--r); padding:14px 10px; text-align:center;
  cursor:pointer; transition:all .15s; position:relative;
}
.starter-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--glow); }
.starter-card.selected { border-color:var(--gold); box-shadow:var(--glow-gold); background:var(--bg3); }
.starter-card .sprite-wrap { width:80px; height:80px; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; }
.starter-card img { max-width:80px; max-height:80px; image-rendering:pixelated; }
.starter-card .s-nombre { font-family:var(--font-px); font-size:8px; color:var(--text); margin-bottom:4px; }
.starter-card .s-region { font-size:13px; color:var(--text-dim); margin-bottom:6px; }
.starter-card .s-tipos { display:flex; gap:3px; justify-content:center; flex-wrap:wrap; }

.starter-preview {
  background:var(--bg2); border:2px solid var(--gold);
  border-radius:var(--r); padding:20px; margin-bottom:16px;
  display:flex; align-items:center; gap:20px;
  box-shadow:var(--glow-gold);
}
.starter-preview img { width:100px; height:100px; image-rendering:pixelated; }
.starter-preview-info { flex:1; }
.starter-preview-info h3 { font-family:var(--font-px); font-size:14px; color:var(--gold); margin-bottom:8px; }
.starter-preview-stats { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; font-size:15px; }
.preview-stat { color:var(--text-mid); }
.preview-stat span { color:var(--text); }

/* ═══════════════════════════════════════
   GAME HEADER
═══════════════════════════════════════ */
.game-header {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--panel); border-bottom:2px solid var(--border);
  padding:8px 16px; position:sticky; top:0; z-index:100;
  box-shadow:var(--shadow);
}
.header-trainer { display:flex; align-items:center; gap:8px; font-family:var(--font-px); font-size:10px; color:var(--gold); }
.trainer-avatar {
  width:28px; height:28px; border-radius:50%;
  border:2px solid var(--border2); cursor:pointer;
  transition:border-color .15s, transform .15s;
}
.trainer-avatar:hover { border-color:var(--accent); transform:scale(1.08); }

.avatar-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr));
  gap:12px;
}
.avatar-option {
  width:100%; aspect-ratio:1; border-radius:50%;
  border:3px solid var(--border); cursor:pointer;
  transition:all .15s; padding:0; background:none;
  position:relative;
}
.avatar-option:hover { border-color:var(--accent); transform:translateY(-2px); }
.avatar-option.selected { border-color:var(--gold); box-shadow:var(--glow-gold); }
.avatar-option.locked img { opacity:.45; }
.avatar-option img { width:100%; height:100%; border-radius:50%; display:block; }
.avatar-price-badge {
  position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  background:var(--panel); border:2px solid var(--border2); border-radius:999px;
  padding:1px 7px; font-size:9px; font-weight:bold; color:var(--gold); white-space:nowrap;
}
.header-center { display:flex; flex-direction:column; align-items:center; }
.header-region {
  font-family:var(--font-px); font-size:9px; color:var(--text-dim);
  background:none; border:none; cursor:pointer; padding:6px 8px;
}
.header-region:hover { color:var(--text); }
.header-zona { font-family:var(--font-px); font-size:11px; color:var(--green); }
.header-right { display:flex; align-items:center; gap:12px; font-family:var(--font-px); font-size:10px; }
.header-dinero { color:var(--gold); }
.header-online { color:var(--green); }

/* ── MENÚ LATERAL (drawer), a pantalla completa en vertical
   y que empuja la pantalla del juego hacia la izquierda ── */
html, body { overflow-x:hidden; }

.screen { transition:transform .3s ease; }
.screen.menu-open { transform:translateX(-280px); }

.site-drawer {
  position:fixed; top:0; right:0; height:100vh;
  width:280px; max-width:80vw;
  display:flex; flex-direction:column;
  background:var(--panel); border-left:2px solid var(--border);
  box-shadow:var(--shadow);
  padding-top:64px; overflow-y:auto;
  transform:translateX(100%);
  transition:transform .3s ease;
  z-index:300;
}
.site-drawer.open { transform:translateX(0); }

.site-drawer-close {
  position:absolute; top:12px; right:16px;
  background:transparent; border:none; color:var(--text);
  font-size:28px; line-height:1; cursor:pointer; padding:4px 8px;
  transition:color .15s;
}
.site-drawer-close:hover { color:var(--accent); }

#menuDrawerOverlay {
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:250;
}
#menuDrawerOverlay.open { opacity:1; visibility:visible; }

.menu-dropdown-item {
  display:flex; align-items:center; gap:8px;
  padding:16px 20px; font-family:var(--font-vt); font-size:20px;
  color:var(--text); text-decoration:none;
  border-bottom:1px solid var(--border);
  transition:background .12s, color .12s;
}
.menu-dropdown-item:last-child { border-bottom:none; }
.menu-dropdown-item:hover { background:var(--bg3); color:var(--accent); }

/* ═══════════════════════════════════════
   GAME LAYOUT
═══════════════════════════════════════ */
.game-layout { display:flex; flex:1; overflow:hidden; height:calc(100vh - 50px); }

/* ── PANEL IZQUIERDO ── */
.panel-left {
  width:220px; min-width:180px;
  background:var(--panel); border-right:2px solid var(--border);
  display:flex; flex-direction:column; overflow-y:auto;
}
.panel-section { padding:8px; border-bottom:1px solid var(--border); }
.panel-title { font-family:var(--font-px); font-size:8px; color:var(--text-dim); padding:6px 4px 4px; letter-spacing:1px; }

.region-selector { display:flex; flex-wrap:wrap; gap:4px; padding:4px 0; }
.region-btn {
  font-family:var(--font-px); font-size:7px; padding:5px 8px;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer; border-radius:2px; transition:all .15s;
}
.region-btn.active { background:var(--accent); color:#000; border-color:var(--accent); }
.region-btn:hover:not(.active) { border-color:var(--accent); color:var(--text); }

.zona-lista { display:flex; flex-direction:column; gap:2px; padding:4px 0; }
.zona-btn {
  width:100%; background:transparent; border:1px solid transparent;
  color:var(--text-dim); font-family:var(--font-vt); font-size:16px;
  padding:7px 10px; text-align:left; cursor:pointer; border-radius:2px;
  transition:all .15s; display:flex; align-items:center; justify-content:space-between;
}
.zona-btn:hover { background:var(--bg3); color:var(--text); border-color:var(--border); }
.zona-btn.active { background:var(--bg3); color:var(--accent); border-color:var(--accent); }
.zona-btn .zona-nivel { font-size:12px; color:var(--text-dim); }

.online-lista { padding:4px 0; overflow-y:auto; max-height:200px; }
.online-player { display:flex; align-items:center; gap:6px; padding:5px 8px; font-size:14px; }
.online-dot { width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0; }
.online-dot.batalla { background:var(--red); animation:pulse-dot 1s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }
.online-nombre { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.online-wins { font-size:12px; color:var(--gold); }
.online-yo { color:var(--gold); }

/* ── PANEL CENTRAL ── */
.panel-center { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* TABS */
.tab-nav {
  display:flex; background:var(--bg2);
  border-bottom:2px solid var(--border); overflow-x:auto;
}
.tab-btn {
  font-family:var(--font-px); font-size:9px; padding:12px 14px;
  background:transparent; border:none; border-bottom:3px solid transparent;
  color:var(--text-dim); cursor:pointer; white-space:nowrap;
  transition:all .15s; flex-shrink:0;
}
.tab-btn:hover { color:var(--text); background:var(--bg3); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }

.tab-content { display:none; flex:1; overflow-y:auto; padding:16px; }
.tab-content.active { display:block; }

/* ═══════════════════════════════════════
   EXPLORAR
═══════════════════════════════════════ */
.explore-container { display:flex; flex-direction:column; gap:12px; }

.zona-banner {
  background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--r); padding:14px 16px;
  display:flex; align-items:center; gap:16px;
  transition:border-color .3s;
}
.zona-banner-icon { font-size:38px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.zona-banner-gif { width:52px; height:52px; object-fit:contain; border-radius:var(--r); }
.zona-banner-info { flex:1; }
.zona-banner-nombre { font-family:var(--font-px); font-size:12px; color:var(--gold); margin-bottom:3px; }
.zona-banner-desc { font-size:15px; color:var(--text-mid); margin-bottom:3px; }
.zona-banner-nivel { font-family:var(--font-px); font-size:8px; color:var(--text-dim); }
.zona-banner-encuentros { display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:100px; }
.encuentros-label { font-size:12px; color:var(--text-dim); font-family:var(--font-px); font-size:7px; }
.encuentros-barra { width:90px; height:8px; background:#111; border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.encuentros-fill { height:100%; background:var(--accent); transition:width .3s; }
.encuentros-num { font-family:var(--font-px); font-size:8px; color:var(--text); }

.inv-rapido {
  display:flex; gap:10px; flex-wrap:wrap;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:10px 14px;
  font-family:var(--font-px); font-size:9px;
}
.inv-item { display:flex; align-items:center; gap:5px; color:var(--text); }
.dinero-badge { color:var(--gold); margin-left:auto; }

.explore-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ═══════════════════════════════════════
   BATALLA
═══════════════════════════════════════ */
.batalla-area { margin-top:4px; }

.batalla-escena {
  display:flex; gap:12px; margin-bottom:10px;
  align-items:stretch;
}

.poke-card {
  flex:1; background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--r); padding:12px; transition:border-color .3s;
  position:relative;
}
.rival-card { border-color:#5a1a1a; }
.player-card { border-color:#1a3a5a; }
.poke-card.atacando { animation:card-shake .3s; }
.poke-card.recibiendo { animation:card-flash .4s; }
@keyframes card-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
@keyframes card-flash { 0%,100%{opacity:1} 25%,75%{opacity:.2} }

/* ── Número de daño flotante ── */
.dano-flotante {
  position: absolute;
  font-family: var(--font-px);
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  pointer-events: none;
  z-index: 50;
  left: 50%;
  top: 35%;
  transform: translateX(-50%);
  animation: dano-float 1.1s ease-out forwards;
}
.dano-flotante.critico { color: var(--gold); font-size: 20px; }
.dano-flotante.efectivo { color: #ff6b6b; }
.dano-flotante.debil { color: #aaa; }
.dano-flotante.curacion { color: var(--green); }
@keyframes dano-float {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.6); }
  15%  { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
  30%  { transform: translate(-50%, -16px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50px) scale(1); }
}

.poke-card { position: relative; overflow: visible; }

/* ── Debilitado: fundido + caída ── */
.poke-card.debilitandose .poke-sprite,
.poke-card.debilitandose .poke-sprite-fallback {
  animation: sprite-faint 0.7s ease-in forwards;
}
@keyframes sprite-faint {
  0%   { transform: translateY(0); opacity: 1; filter: grayscale(0); }
  100% { transform: translateY(40px); opacity: 0; filter: grayscale(1); }
}

/* ── Captura: la Poké Ball "engulle" al Pokémon ── */
.captura-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 60;
}
.captura-ball {
  font-size: 40px;
  animation: captura-ball-anim 1.8s ease-in-out forwards;
}
@keyframes captura-ball-anim {
  0%   { transform: translateY(-60px) scale(0.5) rotate(0deg); opacity: 0; }
  15%  { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
  25%  { transform: translateY(0) scale(1) rotate(-15deg); }
  30%  { transform: translateY(0) scale(1) rotate(15deg); }
  35%  { transform: translateY(0) scale(1) rotate(-15deg); }
  40%  { transform: translateY(0) scale(1) rotate(0deg); }
  50%  { transform: translateY(0) scale(1) rotate(-20deg); }
  60%  { transform: translateY(0) scale(1) rotate(20deg); }
  70%  { transform: translateY(0) scale(1) rotate(0deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
.poke-sprite.capturando, .poke-sprite-fallback.capturando {
  animation: sprite-capturado 1.6s ease-in forwards;
}
@keyframes sprite-capturado {
  0%   { transform: scale(1); opacity: 1; }
  60%  { transform: scale(0.3); opacity: 0.4; }
  100% { transform: scale(0); opacity: 0; }
}

/* ── Evolución: flash blanco + cambio de sprite + crecimiento ── */
.evolucion-overlay {
  position: fixed; inset: 0; background: #fff;
  z-index: 9000; pointer-events: none; opacity: 0;
  animation: evo-flash-bg 2.6s ease-in-out forwards;
}
@keyframes evo-flash-bg {
  0%, 100% { opacity: 0; }
  8%  { opacity: 0.95; }
  20% { opacity: 0.2; }
  28% { opacity: 0.95; }
  40% { opacity: 0.1; }
  48% { opacity: 0.95; }
  60% { opacity: 0; }
}
.evolucion-modal {
  position: fixed; inset: 0; z-index: 9001;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; pointer-events: none;
}
.evolucion-sprite-wrap { position: relative; width: 160px; height: 160px; }
.evolucion-sprite {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; image-rendering: pixelated;
}
.evolucion-sprite.antes { animation: evo-sprite-out 2.6s ease-in-out forwards; }
.evolucion-sprite.despues { animation: evo-sprite-in 2.6s ease-in-out forwards; opacity: 0; }
@keyframes evo-sprite-out {
  0%, 45%  { opacity: 1; filter: brightness(1); transform: scale(1); }
  60% { opacity: 0; filter: brightness(3); transform: scale(1.3); }
  100% { opacity: 0; }
}
@keyframes evo-sprite-in {
  0%, 60% { opacity: 0; filter: brightness(3); transform: scale(0.7); }
  75% { opacity: 1; filter: brightness(2); transform: scale(1.15); }
  100% { opacity: 1; filter: brightness(1); transform: scale(1); }
}
.evolucion-texto {
  font-family: var(--font-px); font-size: 12px; color: var(--text);
  background: var(--panel); border: 2px solid var(--gold);
  padding: 12px 24px; border-radius: var(--r); text-align: center;
  box-shadow: var(--glow-gold);
  animation: evo-texto-in 0.5s ease-out 2.0s both;
}
@keyframes evo-texto-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Subida de nivel: destello dorado en la tarjeta ── */
.poke-card.subiendo-nivel {
  animation: nivel-glow 0.9s ease-out;
}
@keyframes nivel-glow {
  0%   { box-shadow: 0 0 0 rgba(255,215,0,0); }
  40%  { box-shadow: 0 0 24px rgba(255,215,0,.8); }
  100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
}
.nivel-flotante {
  position: absolute; left: 50%; top: 10%;
  transform: translateX(-50%);
  font-family: var(--font-px); font-size: 11px; color: var(--gold);
  text-shadow: 0 0 6px rgba(255,215,0,.8);
  pointer-events: none; z-index: 50;
  animation: nivel-float 1.4s ease-out forwards;
}
@keyframes nivel-float {
  0%   { opacity: 0; transform: translate(-50%, 10px); }
  20%  { opacity: 1; transform: translate(-50%, -6px); }
  80%  { opacity: 1; transform: translate(-50%, -10px); }
  100% { opacity: 0; transform: translate(-50%, -26px); }
}

/* ── Sacudida de la Poké Ball en intento fallido ── */
.poke-card.captura-fallida .captura-ball { animation: captura-ball-anim 1.2s ease-in-out forwards; }

.poke-card-header { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.poke-nombre { font-family:var(--font-px); font-size:11px; color:var(--text); }
.poke-nivel { font-size:14px; color:var(--text-dim); }
.poke-estado { font-family:var(--font-px); font-size:7px; padding:2px 5px; border-radius:2px; margin-left:auto; }
.poke-estado.veneno { background:#a040a0; color:#fff; }
.poke-estado.quemadura { background:#f08030; color:#fff; }
.poke-estado.paralisis { background:#f8d030; color:#000; }
.poke-estado.dormido { background:#6890f0; color:#fff; }
.poke-estado.congelado { background:#98d8d8; color:#000; }

.poke-tipos { display:flex; gap:4px; margin-bottom:6px; flex-wrap:wrap; }
.tipo-badge {
  font-family:var(--font-px); font-size:7px;
  padding:2px 6px; border-radius:2px; text-transform:uppercase;
}

.hp-wrap { margin-bottom:4px; }
.hp-label { font-family:var(--font-px); font-size:8px; color:var(--text-dim); margin-bottom:2px; }
.hp-track { background:#111; border-radius:3px; height:9px; overflow:hidden; border:1px solid var(--border); }
.hp-fill { height:100%; background:var(--green); transition:width .4s ease, background .4s; border-radius:3px; }
.hp-fill.med { background:var(--yellow); }
.hp-fill.low { background:var(--red); animation:hp-pulse 1s infinite; }
@keyframes hp-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.hp-nums { font-family:var(--font-px); font-size:8px; color:var(--text-dim); margin-top:2px; }

.exp-wrap { margin-top:4px; }
.exp-track { background:#111; border-radius:2px; height:4px; overflow:hidden; border:1px solid #0a1a3a; }
.exp-fill { height:100%; background:var(--accent); transition:width .5s ease; }

.poke-sprite-wrap { display:flex; align-items:center; justify-content:center; height:90px; margin:6px 0; }
.rival-sprite-wrap { order:-1; }
.poke-sprite { max-width:90px; max-height:90px; image-rendering:pixelated; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.poke-sprite-fallback { font-size:52px; display:none; }
.mega-badge {
  position:absolute; top:6px; right:6px;
  font-family:var(--font-px); font-size:7px;
  background:var(--gold); color:#000;
  padding:2px 5px; border-radius:2px;
  animation:mega-glow 1s infinite alternate;
}
@keyframes mega-glow { from{box-shadow:0 0 4px var(--gold)} to{box-shadow:0 0 12px var(--gold)} }

.batalla-vs {
  font-family:var(--font-px); font-size:16px; color:var(--gold);
  align-self:center; flex-shrink:0;
  text-shadow:var(--glow-gold);
}

/* BATALLA LOG */
.batalla-log {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:10px 12px;
  max-height:130px; overflow-y:auto;
  font-family:var(--font-vt); font-size:17px;
  margin-bottom:10px;
}
.log-entrada { padding:3px 0; border-bottom:1px solid rgba(255,255,255,.04); animation:log-in .25s ease; }
@keyframes log-in { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }
.log-ataque     { color:var(--text); }
.log-ataque-rival { color:#ff8a80; }
.log-efectivo   { color:var(--green); font-weight:bold; }
.log-debil      { color:var(--text-dim); }
.log-critico    { color:var(--gold); }
.log-debilitado { color:var(--red); }
.log-captura    { color:var(--gold); }
.log-exp        { color:var(--accent); }
.log-nivel      { color:var(--green); font-family:var(--font-px); font-size:11px; }
.log-mega       { color:var(--gold); font-family:var(--font-px); font-size:10px; }
.log-dinero     { color:var(--gold); }
.log-info       { color:var(--text-dim); }
.log-estado     { color:var(--purple); }
.log-victoria   { color:var(--gold); font-family:var(--font-px); font-size:11px; text-align:center; }

/* CONTROLES BATALLA */
.batalla-controles { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:10px; }
.controles-tabs { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.ctrl-tab {
  font-family:var(--font-px); font-size:8px; padding:8px 12px;
  background:var(--bg3); border:2px solid var(--border);
  color:var(--text-dim); cursor:pointer; border-radius:var(--r);
  transition:all .15s;
}
.ctrl-tab.active, .ctrl-tab:hover { background:var(--accent); color:#000; border-color:var(--accent); }
.ctrl-panel { display:none; }
.ctrl-panel.active { display:block; }

/* Checkbox de Mega Evolución: se marca antes de atacar y se aplica junto al ataque, como en
   Showdown (no es una acción aparte). */
.mega-toggle { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.mega-toggle input[type="checkbox"] { width:14px; height:14px; accent-color:var(--accent); cursor:pointer; margin:0; }
.mega-toggle:has(input:checked) { background:var(--accent); color:#000; border-color:var(--accent); }

.movimientos-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mov-btn {
  background:var(--bg3); border:2px solid var(--border);
  color:var(--text); font-family:var(--font-px); font-size:8px;
  padding:10px 8px; cursor:pointer; border-radius:var(--r);
  text-align:left; transition:all .15s; line-height:1.7;
}
.mov-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(74,158,255,.1); }
.mov-btn:disabled { opacity:.4; cursor:not-allowed; border-color:var(--border); color:var(--text-dim); }
.mov-tipo-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px; }
.mov-potencia { color:var(--text-dim); font-size:7px; }
.mov-pp { font-size:7px; color:var(--text-dim); float:right; }

.bolsas-tabs { display:flex; gap:6px; margin-bottom:10px; }
.bolsa-tab {
  font-family:var(--font-px); font-size:8px; padding:6px 12px;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer; border-radius:2px;
}
.bolsa-tab.active { background:var(--bg3); color:var(--accent); border-color:var(--accent); }

.bolsa-items { display:flex; flex-wrap:wrap; gap:8px; }
.bolsa-item-btn {
  font-family:var(--font-px); font-size:8px; padding:8px 12px;
  background:var(--bg3); border:2px solid var(--border);
  color:var(--text); cursor:pointer; border-radius:var(--r); transition:all .15s;
  display:flex; align-items:center; gap:6px;
}
.bolsa-item-btn:hover { border-color:var(--gold); color:var(--gold); }
.bolsa-item-btn:disabled { opacity:.4; cursor:not-allowed; }

.cambio-pokemon-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cambio-poke-btn {
  background:var(--bg3); border:2px solid var(--border);
  color:var(--text); cursor:pointer; border-radius:var(--r);
  padding:8px; text-align:center; transition:all .15s;
  font-family:var(--font-px); font-size:7px;
}
.cambio-poke-btn:hover:not(:disabled) { border-color:var(--accent); }
.cambio-poke-btn:disabled { opacity:.4; cursor:not-allowed; }
.cambio-poke-btn.activo { border-color:var(--green); color:var(--green); }
.cambio-poke-btn .cp-sprite { width:48px; height:48px; image-rendering:pixelated; }
.cambio-poke-btn .cp-hp { font-size:8px; }

/* ═══════════════════════════════════════
   EQUIPO
═══════════════════════════════════════ */
.equipo-container { display:flex; flex-direction:column; gap:16px; }
.equipo-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.equipo-header h3, .caja-header h3 { font-family:var(--font-px); font-size:11px; color:var(--text-dim); }

.equipo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.caja-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px; }

.poke-equipo-card {
  background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--r); padding:12px 10px; cursor:pointer;
  transition:all .15s; text-align:center; position:relative;
}
.poke-equipo-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.poke-equipo-card.debilitado { opacity:.5; border-color:var(--red); }
.poke-equipo-card.inicial { border-color:var(--gold); }

.poke-eq-sprite-wrap { width:64px; height:64px; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; }
.poke-eq-sprite { max-width:64px; max-height:64px; image-rendering:pixelated; }
.poke-eq-nombre { font-family:var(--font-px); font-size:8px; color:var(--text); margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.poke-eq-nivel { font-size:13px; color:var(--text-dim); margin-bottom:4px; }
.poke-eq-tipos { display:flex; justify-content:center; gap:3px; margin-bottom:6px; flex-wrap:wrap; }
.poke-eq-hp { margin-bottom:2px; }
.poke-eq-hp-track { background:#111; height:6px; border-radius:3px; overflow:hidden; border:1px solid var(--border); }
.poke-eq-hp-fill { height:100%; background:var(--green); transition:width .3s; }
.poke-eq-hp-text { font-size:12px; color:var(--text-dim); margin-top:2px; }
.poke-eq-exp { margin-top:4px; }
.poke-eq-exp-track { background:#111; height:3px; border-radius:2px; overflow:hidden; }
.poke-eq-exp-fill { height:100%; background:var(--accent); }
.poke-eq-objeto { font-size:11px; color:var(--gold); margin-top:3px; }
.poke-eq-slot-btns { display:flex; gap:4px; margin-top:6px; justify-content:center; }

.poke-caja-card {
  background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--r); padding:8px; cursor:pointer;
  transition:all .15s; text-align:center; opacity:.8;
}
.poke-caja-card:hover { border-color:var(--accent); opacity:1; transform:translateY(-2px); }
.poke-caja-sprite { max-width:52px; max-height:52px; image-rendering:pixelated; }
.poke-caja-nombre { font-family:var(--font-px); font-size:7px; color:var(--text); margin:3px 0 1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.poke-caja-nivel { font-size:12px; color:var(--text-dim); }

/* ═══════════════════════════════════════
   CO-OP
═══════════════════════════════════════ */
.mode-desc { font-size:16px; color:var(--text-mid); margin-bottom:20px; line-height:1.6; }
.coop-acciones { display:flex; flex-direction:column; align-items:center; gap:14px; max-width:360px; }
.o-divider { color:var(--text-dim); font-size:14px; letter-spacing:3px; }
.join-row { display:flex; gap:8px; width:100%; }
.join-row input {
  flex:1; background:var(--bg2); border:2px solid var(--border);
  color:var(--text); font-family:var(--font-px); font-size:13px;
  padding:10px 12px; border-radius:var(--r); outline:none;
  letter-spacing:3px; transition:border-color .2s;
}
.join-row input:focus { border-color:var(--accent); }

.sesion-header-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sesion-codigo { font-family:var(--font-px); font-size:14px; color:var(--gold); letter-spacing:3px; }
.sesion-jugadores { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.sesion-jugador {
  background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--r); padding:10px 14px;
  font-size:16px; display:flex; align-items:center; gap:8px;
}
.sesion-jugador.listo { border-color:var(--green); }
.sesion-jugador.esperando { border-color:var(--border); opacity:.6; }

.turno-indicador {
  font-family:var(--font-px); font-size:10px; text-align:center;
  padding:10px; color:var(--gold); background:var(--bg2);
  border:1px solid var(--border); border-radius:var(--r); margin:10px 0;
}
.turno-indicador.mi-turno { color:var(--green); border-color:var(--green); animation:turno-pulse 1s infinite; }
@keyframes turno-pulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 12px rgba(0,230,118,.4)} }

.coop-jugadores-battle { flex:1; display:flex; flex-direction:column; gap:8px; }
.coop-jug-battle {
  background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--r); padding:8px 10px;
  display:flex; align-items:center; gap:10px; font-size:15px;
}
.coop-jug-battle.mi-turno { border-color:var(--gold); }
.coop-jug-battle img { width:40px; height:40px; image-rendering:pixelated; }
.coop-bolsas { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }

/* ═══════════════════════════════════════
   PVP
═══════════════════════════════════════ */
.pvp-stats-panel { display:flex; gap:16px; justify-content:center; margin-bottom:20px; }
.stat-box { background:var(--bg2); border:2px solid var(--border); border-radius:var(--r); padding:16px 32px; text-align:center; }
.stat-val { font-family:var(--font-px); font-size:24px; color:var(--gold); }
.stat-lbl { font-size:13px; color:var(--text-dim); letter-spacing:2px; margin-top:4px; }

.pvp-esperando { display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); margin-top:12px; }
.buscando-anim { font-size:32px; animation:spin 1.5s linear infinite; }
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

.pvp-header-bar { display:flex; align-items:center; justify-content:space-between; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:10px 16px; margin-bottom:12px; }
.pvp-player-name { font-family:var(--font-px); font-size:11px; color:var(--gold); }
.pvp-vs-badge { font-family:var(--font-px); font-size:14px; color:var(--red); }

.pvp-equipos { display:flex; justify-content:space-between; margin:8px 0; }
.pvp-equipo-mio, .pvp-equipo-rival { display:flex; gap:4px; }
.pvp-poke-mini { width:32px; height:32px; image-rendering:pixelated; opacity:.7; }
.pvp-poke-mini.activo { opacity:1; filter:drop-shadow(0 0 4px var(--gold)); }
.pvp-poke-mini.debilitado { opacity:.2; filter:grayscale(1); }

.pvp-cambio-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.pvp-cambio-btn {
  font-family:var(--font-px); font-size:7px; padding:6px 8px;
  background:var(--bg3); border:2px solid var(--border);
  color:var(--text); cursor:pointer; border-radius:var(--r); transition:all .15s;
  display:flex; align-items:center; gap:4px;
}
.pvp-cambio-btn:hover:not(:disabled) { border-color:var(--accent); }
.pvp-cambio-btn:disabled { opacity:.4; cursor:not-allowed; }
.pvp-cambio-btn.activo { border-color:var(--green); color:var(--green); }
.pvp-cambio-btn img { width:24px; height:24px; image-rendering:pixelated; }

/* ═══════════════════════════════════════
   TIENDA
═══════════════════════════════════════ */
.tienda-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.tienda-header h3 { font-family:var(--font-px); font-size:13px; color:var(--gold); }
.tienda-dinero { font-family:var(--font-px); font-size:12px; color:var(--gold); }
.tienda-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.tienda-tab {
  font-family:var(--font-px); font-size:8px; padding:8px 12px;
  background:var(--bg3); border:2px solid var(--border);
  color:var(--text-dim); cursor:pointer; border-radius:var(--r); transition:all .15s;
}
.tienda-tab.active { background:var(--accent); color:#000; border-color:var(--accent); }
.tienda-tab:hover:not(.active) { border-color:var(--accent); color:var(--text); }

.tienda-grid { display:flex; flex-direction:column; gap:8px; }
.tienda-item {
  background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--r); padding:12px 14px;
  display:flex; align-items:center; gap:14px; transition:border-color .15s;
}
.tienda-item:hover { border-color:var(--border2); }
.tienda-item-icon { font-size:28px; flex-shrink:0; }
.tienda-item-info { flex:1; }
.tienda-item-nombre { font-family:var(--font-px); font-size:10px; color:var(--text); margin-bottom:3px; }
.tienda-item-desc { font-size:15px; color:var(--text-dim); }
.tienda-item-precio { font-family:var(--font-px); font-size:10px; color:var(--gold); margin-top:4px; }
.tienda-item-btns { display:flex; flex-direction:column; gap:4px; }
.tienda-comprar {
  font-family:var(--font-px); font-size:8px; padding:7px 12px;
  background:var(--bg3); border:2px solid var(--border);
  color:var(--text); cursor:pointer; border-radius:var(--r); transition:all .15s;
  white-space:nowrap;
}
.tienda-comprar:hover { border-color:var(--gold); color:var(--gold); }

/* ═══════════════════════════════════════
   MODAL POKÉMON
═══════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:16px;
}
.modal {
  background:var(--panel); border:2px solid var(--border2);
  border-radius:var(--r); width:100%; max-width:560px;
  max-height:90vh; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--glow);
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border);
  background:var(--bg2);
}
.modal-title { font-family:var(--font-px); font-size:12px; color:var(--gold); }
.modal-close {
  background:transparent; border:none; color:var(--text-dim);
  font-size:18px; cursor:pointer; transition:color .15s;
}
.modal-close:hover { color:var(--red); }
.modal-body { padding:18px; overflow-y:auto; flex:1; }

/* Modal content */
.modal-poke-header { display:flex; gap:20px; align-items:center; margin-bottom:20px; }
.modal-poke-sprite { width:96px; height:96px; image-rendering:pixelated; }
.modal-poke-info { flex:1; }
.modal-poke-nombre { font-family:var(--font-px); font-size:14px; color:var(--text); margin-bottom:4px; }
.modal-poke-apodo-row { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.modal-poke-apodo-row input {
  flex:1; background:var(--bg3); border:1px solid var(--border);
  color:var(--text); font-family:var(--font-vt); font-size:16px;
  padding:5px 8px; border-radius:var(--r); outline:none;
}
.modal-poke-apodo-row input:focus { border-color:var(--accent); }
.modal-poke-nivel { font-size:16px; color:var(--text-dim); margin-bottom:6px; }
.modal-poke-tipos { display:flex; gap:4px; flex-wrap:wrap; }

/* Stats en modal */
.modal-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.modal-stat-row { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:8px 10px; }
.modal-stat-nombre { font-family:var(--font-px); font-size:7px; color:var(--text-dim); margin-bottom:3px; }
.modal-stat-valores { display:flex; align-items:center; gap:6px; }
.modal-stat-base { font-size:15px; color:var(--text-mid); }
.modal-stat-total { font-family:var(--font-px); font-size:11px; color:var(--text); }
.modal-stat-bar-wrap { flex:1; background:#111; height:6px; border-radius:3px; overflow:hidden; }
.modal-stat-bar { height:100%; border-radius:3px; }

/* EVs en modal */
.modal-evs-seccion { margin-bottom:16px; }
.modal-evs-titulo { font-family:var(--font-px); font-size:9px; color:var(--text-dim); margin-bottom:10px; }
.modal-ev-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.modal-ev-row { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:8px 10px; }
.modal-ev-label { font-family:var(--font-px); font-size:7px; color:var(--text-dim); margin-bottom:4px; }
.modal-ev-input-row { display:flex; align-items:center; gap:6px; }
.modal-ev-input {
  width:60px; background:var(--bg3); border:1px solid var(--border);
  color:var(--text); font-family:var(--font-vt); font-size:16px;
  padding:4px 8px; border-radius:2px; outline:none; text-align:center;
}
.modal-ev-input:focus { border-color:var(--accent); }
.modal-ev-barra { flex:1; background:#111; height:5px; border-radius:2px; overflow:hidden; }
.modal-ev-barra-fill { height:100%; background:var(--accent); transition:width .3s; }
.modal-ev-total { font-family:var(--font-px); font-size:8px; color:var(--text-dim); margin-top:6px; }
.modal-ev-total span { color:var(--gold); }
.modal-ev-guardar { margin-top:10px; }

/* Movimientos en modal */
.modal-movs-seccion { margin-bottom:16px; }
.modal-movs-titulo { font-family:var(--font-px); font-size:9px; color:var(--text-dim); margin-bottom:8px; }
.modal-movs-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.modal-mov-item { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:8px 10px; }
.modal-mov-nombre { font-family:var(--font-px); font-size:8px; color:var(--text); margin-bottom:2px; }
.modal-mov-info { display:flex; gap:6px; align-items:center; }
.modal-mov-tipo { font-family:var(--font-px); font-size:6px; padding:2px 5px; border-radius:2px; }
.modal-mov-pp { font-size:12px; color:var(--text-dim); }
.modal-mov-pot { font-size:12px; color:var(--text-mid); }

/* Acciones en modal */
.modal-acciones { display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; border-top:1px solid var(--border); }

/* ═══════════════════════════════════════
   TOASTS
═══════════════════════════════════════ */
#toastContainer { position:fixed; top:60px; right:16px; z-index:5000; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast {
  background:var(--panel); border:2px solid var(--border);
  border-radius:var(--r); padding:11px 16px;
  font-family:var(--font-px); font-size:9px; max-width:260px;
  animation:toast-in .3s ease; box-shadow:var(--shadow);
  pointer-events:none;
}
@keyframes toast-in { from{transform:translateX(120px);opacity:0} to{transform:none;opacity:1} }
.toast.success { border-color:var(--green); color:var(--green); }
.toast.error   { border-color:var(--red); color:var(--red); }
.toast.info    { border-color:var(--accent); color:var(--accent); }
.toast.warning { border-color:var(--gold); color:var(--gold); }
.toast.pvp     { border-color:var(--purple); color:var(--purple); }

/* ═══════════════════════════════════════
   LOADING
═══════════════════════════════════════ */
.loading-dots {
  text-align:center; color:var(--text-dim);
  font-family:var(--font-px); font-size:10px; padding:20px;
  animation:dots 1.2s infinite;
}
@keyframes dots { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 900px) {
  .panel-left { width:160px; min-width:130px; }
  .equipo-grid { grid-template-columns:repeat(2,1fr); }
  .caja-grid   { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 650px) {
  .panel-left { display:none; }
  .game-header { padding:6px 10px; }
  .batalla-escena { flex-direction:column; }
  .movimientos-grid { grid-template-columns:1fr 1fr; }
  .explore-actions { grid-template-columns:1fr; }
  .auth-container { width:95vw; padding:24px 20px; }
  .modal { max-width:95vw; }
  .equipo-grid { grid-template-columns:repeat(2,1fr); }
  .caja-grid   { grid-template-columns:repeat(2,1fr); }
  .modal-stats-grid, .modal-ev-grid, .modal-movs-grid { grid-template-columns:1fr; }
  .pvp-stats-panel { gap:8px; }
  .stat-box { padding:12px 20px; }
}

/* ═══════════════════════════════════════
   POKÉDEX
═══════════════════════════════════════ */
.pokedex-container { display:flex; flex-direction:column; gap:14px; }

.pokedex-toolbar {
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:12px 14px;
}
.pokedex-search-wrap { flex:1; min-width:200px; }
.pokedex-search {
  width:100%; background:var(--bg3); border:2px solid var(--border);
  color:var(--text); font-family:var(--font-vt); font-size:18px;
  padding:9px 14px; border-radius:var(--r); outline:none; transition:border-color .2s;
}
.pokedex-search:focus { border-color:var(--accent); }
.pokedex-search::placeholder { color:var(--text-dim); }

.pokedex-filtros { display:flex; gap:8px; flex-wrap:wrap; }
.pdx-select {
  background:var(--bg3); border:2px solid var(--border);
  color:var(--text); font-family:var(--font-vt); font-size:16px;
  padding:8px 10px; border-radius:var(--r); outline:none; cursor:pointer;
  transition:border-color .2s;
}
.pdx-select:focus { border-color:var(--accent); }

.pokedex-stats-bar {
  font-family:var(--font-px); font-size:8px; color:var(--text-dim);
  white-space:nowrap; align-self:center;
}

/* Grid de tarjetas */
.pokedex-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:8px;
}

.pdx-card {
  background:var(--bg2); border:2px solid var(--border);
  border-radius:var(--r); padding:10px 8px; text-align:center;
  cursor:pointer; transition:all .15s; position:relative;
}
.pdx-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--glow); }
.pdx-card.tengo { border-color:var(--green); }
.pdx-card.legendario { border-color:var(--gold); }

.pdx-card-num { font-family:var(--font-px); font-size:7px; color:var(--text-dim); margin-bottom:3px; }
.pdx-sprite-wrap { width:72px; height:72px; margin:0 auto 5px; display:flex; align-items:center; justify-content:center; }
.pdx-sprite { max-width:72px; max-height:72px; image-rendering:pixelated; }
.pdx-nombre { font-family:var(--font-px); font-size:7px; color:var(--text); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdx-tipos { display:flex; gap:3px; justify-content:center; flex-wrap:wrap; margin-bottom:4px; }
.pdx-pop { font-size:11px; color:var(--text-dim); }
.pdx-pop span { color:var(--accent3); }
.pdx-rareza-badge {
  position:absolute; top:4px; right:4px;
  font-size:10px;
}
.pdx-tengo-badge {
  position:absolute; top:4px; left:4px;
  font-family:var(--font-px); font-size:6px;
  color:var(--green); background:rgba(0,230,118,.15);
  padding:1px 3px; border-radius:2px;
}

/* Paginación */
.pokedex-paginacion {
  display:flex; justify-content:center; align-items:center; gap:8px;
  padding:10px 0; flex-wrap:wrap;
}
.pdx-page-btn {
  font-family:var(--font-px); font-size:8px; padding:7px 12px;
  background:var(--bg3); border:2px solid var(--border);
  color:var(--text-dim); cursor:pointer; border-radius:var(--r); transition:all .15s;
}
.pdx-page-btn:hover { border-color:var(--accent); color:var(--accent); }
.pdx-page-btn.active { background:var(--accent); color:#000; border-color:var(--accent); }
.pdx-page-btn:disabled { opacity:.4; cursor:not-allowed; }
.pdx-page-info { font-family:var(--font-px); font-size:8px; color:var(--text-dim); }

/* Modal Pokédex wide */
.modal-wide { max-width:780px; }

/* Detalle Pokédex */
.pdx-detalle-header {
  display:flex; gap:20px; align-items:flex-start;
  padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:16px;
}
.pdx-detalle-sprite-wrap {
  width:130px; height:130px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg3); border-radius:var(--r); border:1px solid var(--border);
}
.pdx-detalle-sprite { max-width:120px; max-height:120px; image-rendering:pixelated; }
.pdx-detalle-info { flex:1; }
.pdx-detalle-num { font-family:var(--font-px); font-size:10px; color:var(--text-dim); margin-bottom:4px; }
.pdx-detalle-nombre { font-family:var(--font-px); font-size:18px; color:var(--text); margin-bottom:6px; }
.pdx-detalle-region { font-size:15px; color:var(--text-dim); margin-bottom:8px; }
.pdx-detalle-tipos { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.pdx-detalle-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.pdx-badge {
  font-family:var(--font-px); font-size:8px; padding:4px 8px;
  border-radius:var(--r); border:1px solid;
}
.pdx-badge-leg { color:var(--gold); border-color:var(--gold); background:rgba(255,215,0,.1); }
.pdx-badge-mit { color:var(--purple); border-color:var(--purple); background:rgba(206,147,216,.1); }
.pdx-badge-tengo { color:var(--green); border-color:var(--green); background:rgba(0,230,118,.1); }
.pdx-badge-noten { color:var(--text-dim); border-color:var(--text-dim); }

/* Popularidad */
.pdx-popularidad {
  display:flex; align-items:center; gap:12px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r); padding:10px 14px; margin-bottom:16px;
}
.pdx-pop-stat { text-align:center; }
.pdx-pop-val { font-family:var(--font-px); font-size:20px; color:var(--gold); }
.pdx-pop-lbl { font-size:13px; color:var(--text-dim); margin-top:2px; }
.pdx-pop-barra-wrap { flex:1; }
.pdx-pop-barra-lbl { font-size:12px; color:var(--text-dim); margin-bottom:4px; }
.pdx-pop-barra-track { background:#111; height:10px; border-radius:5px; overflow:hidden; border:1px solid var(--border); }
.pdx-pop-barra-fill { height:100%; background:linear-gradient(90deg, var(--accent), var(--gold)); border-radius:5px; transition:width .6s ease; }

/* Stats del Pokédex */
.pdx-stats-section { margin-bottom:16px; }
.pdx-section-title { font-family:var(--font-px); font-size:9px; color:var(--text-dim); margin-bottom:10px; letter-spacing:1px; }
.pdx-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pdx-stat-row {
  display:flex; align-items:center; gap:8px;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:7px 10px;
}
.pdx-stat-lbl { font-family:var(--font-px); font-size:7px; color:var(--text-dim); width:70px; flex-shrink:0; }
.pdx-stat-bar-wrap { flex:1; background:#111; height:7px; border-radius:3px; overflow:hidden; }
.pdx-stat-bar { height:100%; border-radius:3px; transition:width .5s ease; }
.pdx-stat-val { font-family:var(--font-px); font-size:9px; width:28px; text-align:right; flex-shrink:0; }
.pdx-stat-total { font-family:var(--font-px); font-size:8px; color:var(--text-mid); margin-top:6px; text-align:right; }

/* Cadena evolutiva */
.pdx-evos-section { margin-bottom:16px; }
.pdx-evo-chain { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.pdx-evo-poke {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  padding:10px 12px; cursor:pointer; transition:all .15s; min-width:80px;
}
.pdx-evo-poke:hover { border-color:var(--accent); }
.pdx-evo-poke.actual { border-color:var(--gold); background:var(--bg3); }
.pdx-evo-poke img { width:56px; height:56px; image-rendering:pixelated; }
.pdx-evo-poke .pdx-evo-nombre { font-family:var(--font-px); font-size:7px; color:var(--text); }
.pdx-evo-poke .pdx-evo-num { font-size:12px; color:var(--text-dim); }
.pdx-evo-flecha {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--text-dim); font-size:14px;
}
.pdx-evo-metodo { font-family:var(--font-px); font-size:7px; color:var(--accent); text-align:center; max-width:70px; }

/* Mega evoluciones */
.pdx-megas-grid { display:flex; gap:8px; flex-wrap:wrap; }
.pdx-mega-card {
  background:var(--bg2); border:2px solid var(--gold);
  border-radius:var(--r); padding:10px 12px; text-align:center; min-width:90px;
  cursor:pointer; transition:all .15s;
}
.pdx-mega-card:hover { box-shadow:var(--glow-gold); }
.pdx-mega-card img { width:60px; height:60px; image-rendering:pixelated; }
.pdx-mega-nombre { font-family:var(--font-px); font-size:7px; color:var(--gold); margin-top:4px; }
.pdx-mega-objeto { font-size:12px; color:var(--text-dim); margin-top:2px; }

/* Zonas */
.pdx-zonas-grid { display:flex; flex-direction:column; gap:4px; }
.pdx-zona-row {
  display:flex; align-items:center; gap:10px;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:8px 12px;
}
.pdx-zona-region { font-family:var(--font-px); font-size:7px; color:var(--text-dim); width:60px; flex-shrink:0; }
.pdx-zona-nombre { flex:1; font-size:15px; color:var(--text); }
.pdx-zona-nivel { font-family:var(--font-px); font-size:7px; color:var(--accent); }
.pdx-zona-rareza { font-size:12px; margin-left:6px; }

/* Movimientos Pokédex */
.pdx-movs-tabs { display:flex; gap:6px; margin-bottom:10px; }
.pdx-movs-tab {
  font-family:var(--font-px); font-size:8px; padding:6px 12px;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer; border-radius:2px; transition:all .15s;
}
.pdx-movs-tab.active { color:var(--accent); border-color:var(--accent); }
.pdx-movs-lista { display:flex; flex-direction:column; gap:3px; max-height:200px; overflow-y:auto; }
.pdx-mov-row {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:2px; background:var(--bg2);
  border:1px solid var(--border); font-size:15px;
}
.pdx-mov-nivel { font-family:var(--font-px); font-size:7px; color:var(--text-dim); width:35px; text-align:center; }
.pdx-mov-nombre { flex:1; color:var(--text); }
.pdx-mov-tipo-badge { font-family:var(--font-px); font-size:6px; padding:2px 5px; border-radius:2px; }
.pdx-mov-cat { font-size:12px; color:var(--text-dim); }
.pdx-mov-pot { font-family:var(--font-px); font-size:7px; color:var(--text-mid); width:30px; text-align:right; }

@media (max-width:650px) {
  .pokedex-grid { grid-template-columns:repeat(3,1fr); }
  .pdx-detalle-header { flex-direction:column; align-items:center; }
  .pdx-stats-grid { grid-template-columns:1fr; }
  .pdx-evo-chain { justify-content:center; }
}

/* ═══════════════════════════════════════
   EVENTO ESPECIAL (8%)
═══════════════════════════════════════ */
.evento-modal { max-width: 420px; border-color: var(--gold); box-shadow: var(--glow-gold); }

.evento-icono-grande {
  font-size: 64px;
  margin-bottom: 12px;
  animation: evento-icono-bounce 0.6s ease-out;
}
@keyframes evento-icono-bounce {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

.evento-titulo {
  font-family: var(--font-px); font-size: 14px; color: var(--gold);
  margin-bottom: 8px; text-shadow: var(--glow-gold);
}
.evento-subtitulo {
  font-size: 16px; color: var(--text-mid); margin-bottom: 20px; line-height: 1.5;
}

/* Ruleta del casino */
.casino-ruleta-wrap {
  display: flex; justify-content: center; margin: 20px 0;
}
.casino-ruleta {
  font-size: 56px;
  animation: casino-spin 1.8s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes casino-spin {
  0%   { transform: rotate(0deg) scale(1); }
  70%  { transform: rotate(1080deg) scale(1.15); }
  100% { transform: rotate(1440deg) scale(1); }
}
.casino-apuesta {
  font-family: var(--font-px); font-size: 11px; color: var(--text);
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r);
  padding: 8px 14px; margin-bottom: 14px; display: inline-block;
}
.casino-resultado {
  font-family: var(--font-px); font-size: 13px; margin: 14px 0;
  opacity: 0; animation: evo-texto-in 0.4s ease-out 1.9s forwards;
}
.casino-resultado.gana { color: var(--green); }
.casino-resultado.pierde { color: var(--red); }
.casino-resultado.neutro { color: var(--text-mid); }
.casino-neto {
  font-family: var(--font-vt); font-size: 22px; margin-top: 4px;
  opacity: 0; animation: evo-texto-in 0.4s ease-out 2.1s forwards;
}
.casino-neto.positivo { color: var(--green); }
.casino-neto.negativo { color: var(--red); }

/* Caja de regalo (mega piedra / master ball) */
.regalo-caja {
  font-size: 64px; margin: 16px 0;
  animation: regalo-shake 1.2s ease-in-out, regalo-open 0.4s ease-out 1.2s forwards;
}
@keyframes regalo-shake {
  0%,100% { transform: rotate(0deg); }
  10%,30%,50%,70% { transform: rotate(-8deg); }
  20%,40%,60%,80% { transform: rotate(8deg); }
  90% { transform: rotate(0deg); }
}
@keyframes regalo-open {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.regalo-objeto-nombre {
  font-family: var(--font-px); font-size: 13px; color: var(--gold);
  margin-top: 12px; opacity: 0; animation: evo-texto-in 0.4s ease-out 1.5s forwards;
}

.evento-cerrar-btn { margin-top: 20px; }

/* ═══════════════════════════════════════
   MODAL APRENDER MOVIMIENTO
═══════════════════════════════════════ */
.aprender-mov-nuevo {
  background: var(--panel);
  border: 2px solid var(--gold);
  border-radius: var(--r);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.aprender-mov-nuevo .mov-nombre { font-family: var(--font-px); font-size: 11px; color: var(--gold); }
.aprender-mov-nuevo .mov-stats { font-size: 13px; color: var(--text-mid); margin-top: 4px; }
.aprender-mov-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.aprender-mov-slot {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 8px 10px; cursor: pointer;
  transition: border-color .15s;
}
.aprender-mov-slot:hover { border-color: var(--accent); }
.aprender-mov-slot .mov-slot-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.aprender-mov-slot .mov-slot-info { flex: 1; }
.aprender-mov-slot .mov-slot-nombre { font-family: var(--font-px); font-size: 9px; }
.aprender-mov-slot .mov-slot-stats { font-size: 12px; color: var(--text-dim); }
.aprender-mov-rechazar {
  width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: var(--r);
  background: transparent; color: var(--text-dim); cursor: pointer; font-size: 13px;
}
.aprender-mov-rechazar:hover { border-color: var(--red); color: var(--red); }