/* ════════════════════════════════════════════════════════════════════
   DB-ONLINE — estilos del lobby de combate online.
   ════════════════════════════════════════════════════════════════════ */

/* Botón del menú (color propio). */
.menu-online { --c1: #c0392b; --c2: #7b241c; }

/* Badge de retos pendientes en el botón del menú. */
#online-menu-btn { position: relative; }
.online-badge {
  position: absolute; top: 6px; right: 10px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; background: #e0484b; color: #fff;
  font-size: .8rem; font-weight: 800; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 8px rgba(224,72,75,.7);
}

/* Overlay y tarjeta del lobby. */
.online-ov {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6, 9, 14, .82); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  font-family: var(--game, 'Rajdhani', sans-serif);
}
.online-card {
  position: relative; width: 100%; max-width: 420px;
  background: #18202b; border: 1px solid #2c3744; border-radius: 16px;
  padding: 24px; box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.online-card h2 { margin: 0 0 6px; color: #fff; font-size: 1.6rem; letter-spacing: .5px; }
.online-sub { margin: 0 0 18px; color: #9fb0c0; font-size: .92rem; line-height: 1.4; }
.online-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: #8194a6; font-size: 1.3rem; cursor: pointer;
}
.online-close:hover { color: #fff; }

.online-reto { display: flex; gap: 8px; }
.online-in {
  flex: 1; box-sizing: border-box; font-family: var(--game, 'Rajdhani', sans-serif);
  font-size: 1rem; color: #fff; background: #0f1620; border: 1px solid #2c3744;
  border-radius: 9px; padding: 11px 13px; outline: none;
}
.online-in:focus { border-color: #3f86d8; box-shadow: 0 0 0 2px rgba(63,134,216,.3), 0 0 14px 2px rgba(63,134,216,.4); }
.online-in-err {
  border-color: #e0484b !important;
  box-shadow: 0 0 0 2px rgba(224,72,75,.35), 0 0 14px 2px rgba(224,72,75,.45) !important;
}
.online-btn {
  font-family: var(--game, 'Rajdhani', sans-serif); font-weight: 700; font-size: .92rem;
  color: #fff; background: #2a3340; border: 1px solid #3d4a5c; border-radius: 9px;
  padding: 10px 16px; cursor: pointer; box-shadow: 0 2px 0 #1b222c;
}
.online-btn:active { transform: translateY(2px); box-shadow: none; }
.online-btn-ok { background: #c0392b; border-color: #e05646; box-shadow: 0 2px 0 #7b241c; }
.online-btn-ok:hover { background: #d0422f; }
/* Botón Retar: azul glow (no rojo, que parecía error) */
.online-btn-retar { background: #2f6fb0; border-color: #4a8fd8; box-shadow: 0 2px 0 #1d4a7a, 0 0 16px rgba(63,134,216,.45); color: #f0f7ff; }
.online-btn-retar:hover { background: #3a82c9; box-shadow: 0 2px 0 #1d4a7a, 0 0 22px rgba(63,134,216,.7); }
.online-btn-verde { background: #2c9e54; border-color: #4fd17a; box-shadow: 0 2px 0 #1e6e3a, 0 0 16px rgba(79,209,122,.45); color: #f2fff6; }
.online-btn-verde:hover { background: #34b863; box-shadow: 0 2px 0 #1e6e3a, 0 0 22px rgba(79,209,122,.7); }

/* ── Rivales recientes ── */
.online-recientes { margin: 6px 0 2px; }
.online-recientes-tit {
  font-family: var(--game, 'Rajdhani', sans-serif); font-weight: 700;
  font-size: .82rem; letter-spacing: .5px; text-transform: uppercase;
  color: #8fa3b5; margin-bottom: 6px;
}
.online-recientes-lista { display: flex; flex-direction: column; gap: 7px; }
.online-rec-item {
  display: flex; align-items: stretch; border-radius: 9px; overflow: hidden;
  border: 1px solid #34465a; background: #1a2531;
}
.online-rec-retar {
  flex: 1; text-align: left;
  font-family: var(--game, 'Rajdhani', sans-serif); font-weight: 700; font-size: .95rem;
  color: #dCE8f2; background: transparent; border: none; padding: 9px 13px; cursor: pointer;
  transition: background .15s;
}
.online-rec-retar:hover { background: #25384a; color: #fff; }
.online-rec-x {
  font-family: var(--game, 'Rajdhani', sans-serif); font-weight: 800; font-size: .8rem;
  color: #c98; background: rgba(192,57,43,.18); border: none; border-left: 1px solid #34465a;
  padding: 0 9px; cursor: pointer; color: #e88; transition: background .15s;
}
.online-rec-x:hover { background: rgba(192,57,43,.42); color: #fff; }
.online-btn-no { background: #6d2f2f; border-color: #8a3f3f; padding: 10px 12px; }
.online-btn:disabled { opacity: .6; cursor: default; }
.online-err { color: #ff8f8f; font-size: .85rem; min-height: 1em; margin-top: 8px; }

/* Invitaciones recibidas. */
.online-invis { margin-top: 14px; }
.online-invis-tit { color: #cfe0ef; font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.online-invi {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #0f1620; border: 1px solid #2c3744; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; color: #d8e2ec; font-size: .92rem;
}
.online-invi-acts { display: flex; gap: 6px; flex-shrink: 0; }
.online-invi-acts .online-btn { padding: 6px 12px; font-size: .85rem; }

/* Estado (esperando / emparejado). */
.online-estado { margin-top: 14px; }
.online-esperando {
  background: rgba(192,57,43,.1); border: 1px solid rgba(192,57,43,.4);
  border-radius: 10px; padding: 14px; color: #f0c0b8; text-align: center; font-size: .95rem;
}
.online-emparejado {
  background: rgba(79,209,122,.08); border: 1.5px solid #4fd17a; border-radius: 12px;
  padding: 18px; text-align: center; box-shadow: 0 0 18px rgba(79,209,122,.3);
}
.online-emp-tit { color: #4fd17a; font-size: 1.2rem; font-weight: 800; margin-bottom: 4px; }
.online-emp-rol { color: #cfe0ef; font-size: .9rem; margin-bottom: 8px; }
.online-emp-nota { color: #9fb0c0; font-size: .82rem; }

/* Selección de equipo. */
.online-team-sel { margin-top: 14px; }
.online-team-tit { color: #cfe0ef; font-weight: 700; font-size: .95rem; margin-bottom: 10px; }
.online-team-opt {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-family: var(--game, 'Rajdhani', sans-serif); color: #fff;
  background: #0f1620; border: 1px solid #2c3744; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s;
}
.online-team-opt:hover { background: #16202c; border-color: #c0392b; }
.online-team-opt b { font-size: 1rem; }
.online-team-opt span { color: #9fb0c0; font-size: .85rem; }
.online-noteam {
  color: #f0c0b8; background: rgba(192,57,43,.1); border: 1px solid rgba(192,57,43,.3);
  border-radius: 10px; padding: 14px; font-size: .9rem; text-align: center;
}

/* Banner de combate online sobre la pantalla de batalla (sub-fase 3A). */
.online-combat-banner {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 9000; max-width: 90vw; text-align: center;
  background: #14241a; border: 1.5px solid #4fd17a; border-radius: 12px;
  padding: 12px 18px; color: #eaffef; font-family: var(--game, 'Rajdhani', sans-serif);
  font-weight: 600; font-size: .95rem; box-shadow: 0 0 22px rgba(79,209,122,.4);
}

/* Botón de cancelar combate pendiente (limpieza). */
.online-cancel-pend {
  display: block; width: 100%; margin-top: 14px;
  font-family: var(--game, 'Rajdhani', sans-serif); font-size: .82rem; font-weight: 600;
  color: #8194a6; background: transparent; border: 1px solid #2c3744; border-radius: 8px;
  padding: 8px; cursor: pointer;
}
.online-cancel-pend:hover { color: #ff8f8f; border-color: #6d2f2f; }

/* ── Notificación CENTRAL de reto (estés donde estés) ── */
.online-notif-ov {
  position: fixed; inset: 0; z-index: 11000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(4, 8, 12, .6); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s ease;
  font-family: var(--game, 'Rajdhani', sans-serif);
}
.online-notif-ov.on { opacity: 1; }
.online-notif {
  text-align: center; max-width: 380px; width: 100%;
  background: #11261a; border: 2px solid #4fd17a; border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 0 40px rgba(79,209,122,.55), 0 18px 50px rgba(0,0,0,.6);
  animation: notifPop .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes notifPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.online-notif-ico { font-size: 2.6rem; margin-bottom: 6px; filter: drop-shadow(0 0 10px rgba(79,209,122,.7)); }
.online-notif-tit { color: #eaffef; font-size: 1.25rem; margin-bottom: 14px; }
.online-notif-tit b { color: #4fd17a; }
/* Bloque de reglas de la partida random dentro del banner de reto */
.online-reglas { background: rgba(8,20,14,.5); border: 1px solid rgba(79,209,122,.25); border-radius: 12px; padding: 11px 13px; margin: 0 auto 18px; max-width: 280px; text-align: left; }
.online-reglas-tit { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .5px; color: #8fe0aa; text-transform: uppercase; margin-bottom: 8px; text-align: center; }
.online-regla { display: flex; align-items: center; gap: 9px; padding: 4px 2px; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 14px; color: #d7eade; }
.online-regla-ic { width: 20px; text-align: center; font-size: 15px; }
.online-regla-nm { flex: 1; color: #e6f3ea; }
.online-regla-st { font-weight: 800; font-size: 15px; color: #4fd17a; }
.online-regla.off { opacity: .5; }
.online-regla.off .online-regla-nm { color: #9fb0a6; text-decoration: line-through; }
.online-regla.off .online-regla-st { color: #e0685a; }
.online-notif-acts { display: flex; gap: 10px; justify-content: center; }
.online-notif-ok {
  font-family: var(--game, 'Rajdhani', sans-serif); font-weight: 800; font-size: 1.05rem;
  color: #042312; background: #4fd17a; border: none; border-radius: 11px;
  padding: 12px 28px; cursor: pointer;
  box-shadow: 0 0 18px rgba(79,209,122,.7), 0 4px 0 #2c9e54;
  transition: transform .1s, box-shadow .2s;
}
.online-notif-ok:hover { box-shadow: 0 0 28px rgba(79,209,122,.9), 0 4px 0 #2c9e54; }
.online-notif-ok:active { transform: translateY(3px); box-shadow: 0 0 18px rgba(79,209,122,.7); }
.online-notif-no {
  font-family: var(--game, 'Rajdhani', sans-serif); font-weight: 700; font-size: .95rem;
  color: #cdd9e3; background: #2a3340; border: 1px solid #3d4a5c; border-radius: 11px;
  padding: 12px 20px; cursor: pointer;
}
.online-notif-no:hover { background: #333d4b; }

/* ── Variante ROJA para "terminar partida" ── */
.online-notif-rojo {
  background: #2a1111; border-color: #e74c3c;
  box-shadow: 0 0 40px rgba(231,76,60,.55), 0 18px 50px rgba(0,0,0,.6);
}
.online-notif-rojo .online-notif-ico { filter: drop-shadow(0 0 10px rgba(231,76,60,.8)); color: #ff6b5e; }
.online-notif-rojo .online-notif-tit { color: #ffeceb; }
.online-notif-rojo .online-notif-tit b { color: #ff6b5e; }
.online-notif-ok2 {
  font-family: var(--game, 'Rajdhani', sans-serif); font-weight: 800; font-size: 1.05rem;
  color: #2a0a08; background: #e74c3c; border: none; border-radius: 11px;
  padding: 12px 28px; cursor: pointer;
  box-shadow: 0 0 18px rgba(231,76,60,.7), 0 4px 0 #a52f23;
  transition: transform .1s, box-shadow .2s;
}
.online-notif-ok2:hover { box-shadow: 0 0 28px rgba(231,76,60,.95), 0 4px 0 #a52f23; }
.online-notif-ok2:active { transform: translateY(3px); }
.online-notif-no2 {
  font-family: var(--game, 'Rajdhani', sans-serif); font-weight: 800; font-size: 1.02rem;
  color: #fff; background: #c0392b; border: none; border-radius: 11px;
  padding: 12px 24px; cursor: pointer; box-shadow: 0 0 14px rgba(231,76,60,.6), 0 3px 0 #8e271d;
}
.online-notif-no2:hover { background: #d04332; }
.online-notif-cancelar {
  font-family: var(--game, 'Rajdhani', sans-serif); font-weight: 700; font-size: .95rem;
  color: #cdd9e3; background: #2a3340; border: 1px solid #3d4a5c; border-radius: 11px;
  padding: 12px 20px; cursor: pointer;
}
.online-notif-cancelar:hover { background: #333d4b; }

/* ── Botón rojo "Terminar partida" en la botonera de combate ── */
.online-terminar {
  background: linear-gradient(180deg, #e0463a, #b3271c) !important;
  border: 1px solid #ff6b5e !important;
  box-shadow: 0 0 16px rgba(231,76,60,.65), inset 0 1px 0 rgba(255,255,255,.2) !important;
  color: #fff !important;
}
.online-terminar:hover { box-shadow: 0 0 24px rgba(231,76,60,.95) !important; }
.online-terminar:active { transform: translateY(2px); }
.online-terminar-x { font-weight: 900; font-size: 1.1rem; line-height: 1; }

/* ── Banner superior "Tu rival espera tu turno" ── */
.online-espera-banner {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 10500; display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; margin-top: 10px; border-radius: 13px;
  background: linear-gradient(180deg, #24303a, #1a242e);
  border: 2px solid #3d5566;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  font-family: var(--game, 'Rajdhani', sans-serif);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2), background .25s, border-color .25s, box-shadow .25s;
  max-width: 94vw;
}
.online-espera-banner.on { transform: translate(-50%, 0); }
.online-espera-ico { font-size: 1.25rem; filter: drop-shadow(0 0 5px rgba(120,150,170,.6)); }
.online-espera-txt { color: #cdd9e3; font-weight: 700; font-size: 1.02rem; }
/* Estado DESTACADO: es tu turno (el rival ya atacó). Verde brillante + pulso. */
.online-espera-banner.te-toca {
  background: linear-gradient(180deg, #15401f, #0d2c15);
  border-color: #4fd17a;
  box-shadow: 0 0 30px rgba(79,209,122,.75), 0 10px 30px rgba(0,0,0,.5);
  animation: esperaPulse 1.3s ease-in-out infinite;
}
.online-espera-banner.te-toca .online-espera-ico { filter: drop-shadow(0 0 8px rgba(79,209,122,.9)); }
.online-espera-banner.te-toca .online-espera-txt { color: #eaffef; }
.online-espera-banner.te-toca .online-espera-btn {
  background: #4fd17a; color: #042312; box-shadow: 0 0 16px rgba(79,209,122,.85), 0 3px 0 #2c9e54;
}
@keyframes esperaPulse {
  0%, 100% { box-shadow: 0 0 26px rgba(79,209,122,.6), 0 10px 30px rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 40px rgba(79,209,122,1), 0 10px 30px rgba(0,0,0,.5); }
}
.online-espera-banner.pop { animation: esperaPop .5s cubic-bezier(.2,.9,.3,1.4), esperaPulse 1.3s ease-in-out infinite .5s; }
@keyframes esperaPop {
  0%   { transform: translate(-50%, 0) scale(1); }
  40%  { transform: translate(-50%, 4px) scale(1.08); }
  100% { transform: translate(-50%, 0) scale(1); }
}
.online-espera-btn {
  font-family: var(--game, 'Rajdhani', sans-serif); font-weight: 800; font-size: .95rem;
  color: #042422; background: #34d0c4; border: none; border-radius: 9px;
  padding: 8px 16px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 14px rgba(52,208,196,.7), 0 3px 0 #1f9389;
  transition: transform .1s, box-shadow .2s;
}
.online-espera-btn:hover { box-shadow: 0 0 22px rgba(52,208,196,.95), 0 3px 0 #1f9389; }
.online-espera-btn:active { transform: translateY(2px); }
@media (max-width: 520px) {
  .online-espera-txt { font-size: .92rem; }
  .online-espera-banner { gap: 8px; padding: 9px 12px; }
}

/* ── Panel de ataques online (sub-fase 3B) ── */
.online-move-panel {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 9000; width: min(640px, 94vw);
  background: rgba(12,18,26,.96); border: 1px solid #2c3744; border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  font-family: var(--game, 'Rajdhani', sans-serif);
}
.online-mv-tit { color: #cfe0ef; font-weight: 700; font-size: .95rem; margin-bottom: 10px; }
.online-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.online-mv {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: var(--game, 'Rajdhani', sans-serif); text-align: left;
  background: var(--mvtype, #3a4a5a); border: none; border-radius: 11px;
  padding: 12px 14px; cursor: pointer; color: #fff;
  box-shadow: 0 3px 0 rgba(0,0,0,.35); transition: transform .1s, filter .15s;
}
.online-mv:hover { filter: brightness(1.12); }
.online-mv:active { transform: translateY(3px); box-shadow: none; }
.online-mv-name { font-weight: 800; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .5px; }
.online-mv-meta { font-size: .78rem; opacity: .85; text-transform: capitalize; }
.online-wait-turn { color: #9fdcc0; text-align: center; padding: 14px; font-size: 1rem; }
.online-salir-combate { width: 100%; margin-top: 10px; }
.online-fin { text-align: center; font-size: 1.5rem; font-weight: 800; color: #4fd17a; padding: 14px; }

/* ── BANNER DE FIN DE COMBATE (victoria/derrota/empate) + revancha ── */
.online-fin-ov{
  position:fixed;inset:0;z-index:10600;display:flex;align-items:center;justify-content:center;
  background:rgba(6,9,14,.78);opacity:0;transition:opacity .3s;padding:20px;backdrop-filter:blur(4px);
}
.online-fin-ov.on{opacity:1;}
.online-fin-card{
  position:relative;width:340px;max-width:92vw;text-align:center;padding:28px 24px 22px;border-radius:20px;
  background:linear-gradient(170deg,#1b2433,#131a25);border:2px solid #3d4a5c;
  transform:scale(.88);transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.online-fin-ov.on .online-fin-card{transform:scale(1);}
/* Ganador: glow verde intenso + pulso */
.online-fin-ov.gana .online-fin-card{
  border-color:#4fd17a;
  box-shadow:0 0 40px rgba(79,209,122,.7),0 12px 36px rgba(0,0,0,.5);
  animation:finPulse 1.6s ease-in-out infinite;
}
.online-fin-ov.pierde .online-fin-card{border-color:#6d3a3a;box-shadow:0 12px 36px rgba(0,0,0,.5);}
.online-fin-ov.empate .online-fin-card{border-color:#5a6478;box-shadow:0 12px 36px rgba(0,0,0,.5);}
@keyframes finPulse{
  0%,100%{box-shadow:0 0 32px rgba(79,209,122,.55),0 12px 36px rgba(0,0,0,.5);}
  50%{box-shadow:0 0 52px rgba(79,209,122,.9),0 12px 36px rgba(0,0,0,.5);}
}
.online-fin-ico{font-size:3.4rem;margin-bottom:6px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));}
.online-fin-ov.gana .online-fin-ico{filter:drop-shadow(0 0 16px rgba(79,209,122,.8));animation:finIcoBounce .6s cubic-bezier(.34,1.56,.64,1);}
@keyframes finIcoBounce{0%{transform:scale(.3) rotate(-12deg);}100%{transform:scale(1) rotate(0);}}
.online-fin-msg{font-family:'Rajdhani',sans-serif;font-weight:800;font-size:1.7rem;color:#fff;margin-bottom:4px;}
.online-fin-ov.gana .online-fin-msg{color:#7dffb0;text-shadow:0 0 14px rgba(79,209,122,.6);}
.online-fin-sub{font-size:.95rem;color:#9fb3c6;font-weight:600;margin-bottom:18px;}
.online-fin-acts{display:flex;flex-direction:column;gap:9px;}
.online-fin-btn{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;
  border:none;border-radius:11px;padding:12px;transition:filter .15s,transform .1s;}
.online-fin-revancha{color:#06281a;background:linear-gradient(160deg,#5fe0a0,#1fae78 55%,#137a55);
  box-shadow:0 3px 0 #0e5e40,0 0 16px rgba(31,174,120,.45);}
.online-fin-revancha:hover{filter:brightness(1.08);box-shadow:0 3px 0 #0e5e40,0 0 24px rgba(31,174,120,.7);}
.online-fin-revancha:active{transform:translateY(3px);box-shadow:0 0 10px rgba(31,174,120,.5);}
.online-fin-menu{color:#cfd9e6;background:#2a3548;border:1px solid #3a4a64;}
.online-fin-menu:hover{background:#34425a;}

/* ════════════════════════════════════════════════════════════════
   FORMATO DRAFT: pantallas de pool (elegir 6) y objetos
   ════════════════════════════════════════════════════════════════ */
.draft-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px;}
.draft-tit{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.5px;color:#e8eef6;margin:0;}
.draft-count{color:#7fd8b0;font-size:1rem;font-weight:700;}
.draft-sub{color:#8497ab;font-size:.78rem;margin:4px 0 12px;}

/* ── Cuadrícula del pool (24 sprites, sin scroll, tarjetas grandes) ── */
.draft-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:2px;width:100%;box-sizing:border-box;}
.draft-cell{position:relative;background:#1a2230;border:1px solid #2c3a4d;border-radius:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:8px 4px;
  min-width:0;transition:transform .1s,border-color .15s,background .15s;}
.draft-cell:hover{border-color:#3f5570;transform:translateY(-2px);z-index:30;}
.draft-cell.sel{background:#0d4f3a;border:2px solid #2fce9a;}
.draft-cell-num{position:absolute;top:3px;right:6px;color:#7fffcf;font-size:.82rem;font-weight:700;z-index:2;}
.draft-cell-spr{width:100%;max-width:62px;height:auto;aspect-ratio:1;object-fit:contain;image-rendering:pixelated;}
.draft-cell-name{font-size:.68rem;color:#9fb1c4;margin-top:2px;text-align:center;line-height:1.05;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.draft-cell.sel .draft-cell-name{color:#bff5e0;}
.draft-cell.bloq{opacity:.38;cursor:not-allowed;filter:grayscale(.85);background:#161c26;}
.draft-cell.bloq:hover{border-color:#2c3a4d;transform:none;}
.draft-cell-esp{position:absolute;top:3px;left:6px;color:#ffd24a;font-size:.78rem;font-weight:700;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.6);}

/* ── Botones de acción del draft (rojo glow / azul glow, Rajdhani) ── */
.draft-acts{display:flex;gap:10px;margin-top:14px;}
.draft-btn{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:.5px;
  cursor:pointer;border:none;border-radius:11px;padding:12px;transition:filter .15s,transform .1s,box-shadow .15s;text-transform:uppercase;}
.draft-btn-cancel{flex:1;color:#fff;background:linear-gradient(160deg,#e25b5b,#b83232 55%,#8a2020);
  box-shadow:0 3px 0 #6e1818,0 0 16px rgba(184,50,50,.5);}
.draft-btn-cancel:hover{filter:brightness(1.08);box-shadow:0 3px 0 #6e1818,0 0 24px rgba(226,91,91,.75);}
.draft-btn-cancel:active{transform:translateY(3px);box-shadow:0 0 10px rgba(184,50,50,.5);}
.draft-btn-next{flex:2;color:#fff;background:linear-gradient(160deg,#4f9ee0,#2f6fb0 55%,#1d4f86);
  box-shadow:0 3px 0 #143a63,0 0 16px rgba(47,111,176,.5);}
.draft-btn-next:hover{filter:brightness(1.08);box-shadow:0 3px 0 #143a63,0 0 24px rgba(79,158,224,.8);}
.draft-btn-next:active{transform:translateY(3px);box-shadow:0 0 10px rgba(47,111,176,.5);}
.draft-btn-next:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;filter:grayscale(.5);}
.draft-btn-next:disabled:hover{filter:grayscale(.5);transform:none;}

/* ── Lista de objetos (los 6 elegidos) ── */
.draft-item-list{display:flex;flex-direction:column;gap:8px;max-height:58vh;overflow-y:auto;padding:2px;}
.draft-item-row{display:flex;align-items:center;gap:11px;background:#1a2230;border:1px solid #2c3a4d;border-radius:10px;padding:8px 11px;}
.draft-item-spr{width:42px;height:42px;object-fit:contain;image-rendering:pixelated;flex-shrink:0;}
.draft-item-info{flex:1;min-width:0;}
.draft-item-name{color:#dfe8f2;font-size:.92rem;font-weight:600;}
.draft-item-types{color:#7f8fa3;font-size:.72rem;}
.draft-item-pick{display:flex;align-items:center;gap:7px;background:#161f2b;border:1px dashed #3a4a5e;border-radius:9px;
  padding:6px 11px;cursor:pointer;color:#7f8fa3;font-size:.82rem;transition:border-color .15s,background .15s;max-width:48%;}
.draft-item-pick:hover{border-color:#4a5d75;}
.draft-item-pick.has{background:#0f3a2c;border:1px solid #1d9e75;color:#7fd8b0;font-weight:600;}
.draft-item-pick-spr{width:22px;height:22px;object-fit:contain;image-rendering:pixelated;}
.draft-item-none{opacity:.85;}

/* ── Selector de objeto (rejilla) ── */
.draft-itsel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;max-height:60vh;overflow-y:auto;padding:2px;}
.draft-itsel-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;background:#1a2230;border:1px solid #2c3a4d;
  border-radius:9px;padding:9px 5px;cursor:pointer;color:#cfdae6;font-size:.72rem;text-align:center;transition:border-color .15s,background .15s;}
.draft-itsel-cell:hover{border-color:#2fce9a;background:#13241d;}
.draft-itsel-cell img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated;}
.draft-itsel-nm{line-height:1.05;}
.draft-itsel-cell.sel{border:2px solid #2fce9a;background:#0d4f3a;}
.draft-itsel-cell.bloq{opacity:.4;cursor:not-allowed;filter:grayscale(.85);background:#161c26;}
.draft-itsel-cell.bloq:hover{border-color:#2c3a4d;background:#161c26;}
.draft-itsel-nota{font-size:.56rem;color:#7f8fa3;font-style:italic;}
.draft-itsel-none{justify-content:center;color:#8497ab;}

/* Botón DRAFT en la pantalla de formato (magenta, estilo de los otros) */
.menu-ondraft{background:linear-gradient(160deg,#e85bc4,#c4309a 55%,#8e1f6e);box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 20px rgba(196,48,154,.45);}
.menu-ondraft .menu-tx{color:#fff;}

/* La card del draft es más ancha (cabe la cuadrícula de 6 sin scroll) */
.online-card.draft-wide{max-width:600px;}

/* ── Pestañas Amigos / Recientes ── */
.online-tabs{ display:flex; gap:6px; margin:18px 0 12px; border-bottom:1px solid #2c3744; }
.online-tab{
  position:relative; flex:1; background:none; border:none; cursor:pointer;
  font-family:var(--game,'Rajdhani',sans-serif); font-weight:700; font-size:.95rem;
  letter-spacing:.5px; color:#8aa0b4; padding:9px 6px; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .15s, border-color .15s;
}
.online-tab:hover{ color:#cdd6e6; }
.online-tab.active{ color:#5b8def; border-bottom-color:#5b8def; }
.online-tab-badge{
  display:inline-block; min-width:17px; height:17px; line-height:17px; padding:0 5px;
  margin-left:6px; border-radius:9px; background:#e23d3d; color:#fff;
  font-family:var(--body,'Inter',sans-serif); font-weight:800; font-size:.66rem; text-align:center;
  vertical-align:middle;
}
.online-tabpane{ min-height:120px; max-height:300px; overflow-y:auto; margin-bottom:6px; }
.online-lista-cargando,.online-lista-vacia{
  color:#8aa0b4; font-family:var(--body,'Inter',sans-serif); font-size:.85rem;
  text-align:center; padding:26px 12px; line-height:1.5;
}
.online-lista-tit{
  font-family:var(--game,'Rajdhani',sans-serif); font-weight:700; font-size:.72rem;
  letter-spacing:1px; text-transform:uppercase; color:#7d8fa3; margin:10px 2px 7px;
}

/* ── Fila de rival/amigo (con avatar) ── */
.online-fila{
  display:flex; align-items:center; gap:11px; padding:8px 10px; margin-bottom:7px;
  background:#1d2733; border:1px solid #2c3744; border-radius:11px;
  transition:border-color .15s, background .15s;
}
.online-fila:hover{ border-color:#3a4a5e; background:#212c3a; }
.online-ava{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--game,'Rajdhani',sans-serif); font-weight:800; font-size:1.05rem;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.3);
}
.online-fila-nm{
  flex:1; min-width:0; font-family:var(--game,'Rajdhani',sans-serif); font-weight:700;
  font-size:1rem; color:#e6edf3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.online-fila-acts{ display:flex; align-items:center; gap:7px; flex-shrink:0; }
.online-fila-retar{
  background:linear-gradient(#3a7bd5,#2f63b0); border:1px solid #5b8def; color:#fff;
  font-family:var(--game,'Rajdhani',sans-serif); font-weight:700; font-size:.82rem; letter-spacing:.5px;
  padding:6px 16px; border-radius:9px; cursor:pointer; transition:filter .12s, transform .1s;
}
.online-fila-retar:hover{ filter:brightness(1.12); }
.online-fila-retar:active{ transform:translateY(1px); }
.online-fila-bt{
  width:32px; height:32px; border-radius:8px; cursor:pointer; border:1px solid transparent;
  font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center;
  transition:filter .12s, transform .1s;
}
.online-fila-si{ background:rgba(76,218,100,.16); border-color:rgba(76,218,100,.5); color:#7af0a6; }
.online-fila-no,.online-fila-x{ background:rgba(226,61,61,.14); border-color:rgba(226,61,61,.45); color:#ff9b9b; }
.online-fila-bt:hover{ filter:brightness(1.2); }
.online-fila-bt:active{ transform:translateY(1px); }
/* Selector de generación (Random online) con las tarjetas grandes tipo gensel */
.online-card.online-gen-wide{ max-width:960px; }
.online-card.online-gen-wide .online-gensel-grid{ max-width:none; margin:8px 0 16px; }
.online-card.online-gen-wide .gensel-card-img{ image-rendering:auto; }
@media (max-width:680px){
  .online-card.online-gen-wide{ max-width:96vw; padding:18px; }
}

/* ── Sprite de perfil como avatar (s276) ── */
.online-ava-spr { overflow: hidden; }
.online-ava-spr img { width: 130%; height: 130%; object-fit: contain; margin: -15%; image-rendering: pixelated; }
.online-notif-sub { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 13.5px;
  color: rgba(255,255,255,.72); letter-spacing: .3px; margin-top: 4px; line-height: 1.4; }

/* Opción "Equipo de Aventura" en la selección de equipo del online */
.online-team-adv { border-color: rgba(245,166,35,.5) !important; background: linear-gradient(135deg, rgba(245,166,35,.12), rgba(90,168,255,.08)) !important; }
.online-team-adv b { color: #ffd76a !important; }

/* ══════════════════════════════════════════════════════════════════
   PVP · SELECTOR DE EQUIPO DE AVENTURA (equipo + caja, hasta 6)
   ════════════════════════════════════════════════════════════════ */
.adv-pvp-ov { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,14,.82); backdrop-filter: blur(3px); padding: 16px; }
.adv-pvp-card { width: min(560px, 96vw); max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 20px; border-radius: 18px; background: linear-gradient(160deg, #14202f, #0b1119);
  border: 1px solid rgba(90,168,255,.35); box-shadow: 0 20px 60px -12px rgba(0,0,0,.7), 0 0 24px -6px rgba(90,168,255,.3); }
.adv-pvp-tit { font-family: var(--game, 'Rajdhani', sans-serif); font-size: 17px; letter-spacing: 1px; color: #cfe4ff; }
.adv-pvp-sub { font-family: 'Rajdhani', sans-serif; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.66); }
.adv-pvp-sub b { color: #ffd76a; }
.adv-pvp-count { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .5px;
  color: #7ad6a8; text-transform: uppercase; }
.adv-pvp-count.over { color: #f0a07c; }
.adv-pvp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.adv-pvp-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px 8px; border-radius: 13px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.1);
  transition: transform .16s, border-color .16s, background .16s, box-shadow .16s; }
.adv-pvp-cell img { width: 62px; height: 62px; object-fit: contain; image-rendering: pixelated; }
.adv-pvp-nom { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 600; color: #dbe6f7;
  max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-pvp-item { position: absolute; top: 5px; left: 6px; font-size: 12px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.adv-pvp-check { position: absolute; top: 5px; right: 6px; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #04160d;
  background: #52e0a0; opacity: 0; transform: scale(.5); transition: opacity .16s, transform .16s; }
.adv-pvp-cell:hover { transform: translateY(-3px); border-color: rgba(90,168,255,.5); background: rgba(255,255,255,.07); }
.adv-pvp-cell.on { border-color: #52e0a0; background: rgba(82,224,160,.1);
  box-shadow: 0 6px 20px -6px rgba(82,224,160,.5); }
.adv-pvp-cell.on .adv-pvp-check { opacity: 1; transform: scale(1); }
.adv-pvp-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.adv-pvp-cancel, .adv-pvp-go { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 14px;
  padding: 9px 20px; border-radius: 11px; cursor: pointer; letter-spacing: .5px; }
.adv-pvp-cancel { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); color: #c3d0e6; }
.adv-pvp-cancel:hover { background: rgba(255,255,255,.14); color: #fff; }
.adv-pvp-go { background: linear-gradient(135deg, #52e0a0, #2fa5c8); border: none; color: #062017; }
.adv-pvp-go:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 6px 20px -6px rgba(82,224,160,.6); }
.adv-pvp-go:disabled { opacity: .4; cursor: not-allowed; }
/* s512 · secciones EQUIPO/CAJA + estrella de capitán */
.adv-pvp-sec { font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 1px;
  color: #9db8e0; text-transform: uppercase; margin: 6px 0 -2px; padding-bottom: 3px; border-bottom: 1px solid rgba(157,184,224,.2); }
.adv-pvp-vacio { grid-column: 1 / -1; font-family: 'Rajdhani', sans-serif; font-size: 12px; color: rgba(255,255,255,.4); padding: 6px 2px; }
.adv-pvp-star { position: absolute; top: 3px; left: 4px; z-index: 5; font-size: 13px; line-height: 1; cursor: pointer;
  filter: grayscale(1) opacity(.35); transition: filter .15s, transform .15s; }
.adv-pvp-star:hover { filter: grayscale(0) opacity(1); transform: scale(1.25); }
.adv-pvp-cell.cap { border-color: #ffd76a; background: rgba(255,215,106,.12); box-shadow: 0 6px 20px -6px rgba(255,215,106,.55); }
.adv-pvp-cell.cap .adv-pvp-star { filter: grayscale(0) opacity(1); }
.adv-pvp-cell.cap::after { content: 'CAPITÁN'; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 8px; letter-spacing: .5px; color: #0d1117;
  background: #ffd76a; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }