/* BATALLAS: lobby, duelo a pantalla completa, retos y clasificación. */
.bt-rej{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
.bt-hero{grid-row:span 1}
.bt-hero-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(140deg,#17201C,#12805C);color:#fff;margin-bottom:10px}
.bt-hero h2{margin:0 0 6px;font-size:21px}
.bt-hero p{font-size:14px;line-height:1.5;margin:0 0 14px}
.bt-lab{display:block;font-weight:600;font-size:13px;margin:0 0 14px}
.bt-sel{display:block;width:100%;margin-top:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--borde,rgba(23,32,28,.1));background:rgba(255,255,255,.9);font:400 14.5px var(--f-body);color:var(--text)}
.bt-hero-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bt-grande{display:inline-flex;align-items:center;gap:8px;font-size:16px;padding:13px 22px}
.bt-nota{font-size:12.5px;color:var(--muted);margin:14px 0 0}
.bt-yo{display:grid;gap:14px}
.bt-yo-c{display:flex;align-items:center;gap:12px}.bt-yo-c b{display:block;font-size:17px}.bt-yo-c>div>span{display:flex;align-items:center;gap:5px;margin-top:4px}
.bt-elo b{font-size:34px;letter-spacing:-.02em;line-height:1}.bt-elo small{display:block;color:var(--muted);font-size:12.5px}
.bt-div-t{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.bt-div>i{display:block;height:7px;border-radius:7px;background:rgba(23,32,28,.08);overflow:hidden}.bt-div>i>i{display:block;height:100%;background:linear-gradient(90deg,#B8901A,#F5C542)}
.bt-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.bt-cifras div{background:rgba(23,32,28,.035);border-radius:11px;padding:8px 10px;text-align:center}.bt-cifras b{display:block;font-size:18px}.bt-cifras small{font-size:11px;color:var(--muted)}
.bt-rank,.bt-hist{min-width:0}
.bt-rank h3,.bt-hist h3{margin:0 0 10px;font-size:16px}
.bt-lista{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.bt-lista li{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:12px}
.bt-lista li:hover{background:rgba(23,32,28,.035)}
.bt-lista li.yo{background:rgba(18,128,92,.08)}
.bt-pos{width:22px;text-align:center;font-weight:700;color:var(--muted);font-size:13px}
.bt-lista li:nth-child(1) .bt-pos{color:#B8901A}.bt-lista li:nth-child(2) .bt-pos{color:#7C8796}.bt-lista li:nth-child(3) .bt-pos{color:#A0612B}
.bt-q{flex:1;min-width:0}.bt-q b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bt-q small{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.bt-pts{font-weight:700;font-size:14px;text-align:right}.bt-pts small{display:block;font-size:11.5px;font-weight:600}
.sube{color:#1E9E6A}.baja{color:#D2483F}
.bt-res{font:700 11px var(--f-body);padding:4px 8px;border-radius:8px;min-width:62px;text-align:center}
.bt-gana{background:rgba(30,158,106,.13);color:#127A52}.bt-pierde{background:rgba(210,72,63,.12);color:#B23A31}.bt-empate{background:rgba(23,32,28,.08);color:var(--muted)}

/* ---------- modales (retar / reto recibido) ---------- */
.bt-modal{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:16px;background:rgba(12,24,18,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
.bt-modal.ver{opacity:1}
.bt-modal-c{width:min(440px,100%);background:rgba(255,255,255,.96);border-radius:22px;padding:24px;box-shadow:0 30px 70px -30px rgba(0,0,0,.5);color:#1C2321;transform:translateY(10px);transition:transform .2s}
.bt-modal.ver .bt-modal-c{transform:none}
.bt-modal-c h3{margin:0 0 6px;font-size:20px}
.bt-modal-c p{font-size:14px;line-height:1.5}
.bt-modal-pie{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.bt-modal-pie .btn{display:inline-flex;align-items:center;gap:7px}
.bt-reto .bt-modal-c{border:2px solid rgba(18,128,92,.35);animation:btSacude .5s ease 1}
.bt-reto-cab{display:flex;align-items:center;gap:14px}.bt-reto-cab h3{margin:2px 0 4px}.bt-reto-cab>div>span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#5F6B66}
.bt-caduca{font-size:12.5px!important}
@keyframes btSacude{20%{transform:rotate(-1.5deg)}40%{transform:rotate(1.5deg)}60%{transform:rotate(-1deg)}80%{transform:rotate(1deg)}}

/* ---------- pantalla de batalla ---------- */
body.bt-abierta{overflow:hidden}
.bt-ov{position:fixed;inset:0;z-index:9000;overflow-y:auto;background:radial-gradient(60vmax 60vmax at 15% 0%,rgba(30,158,106,.18),transparent 60%),radial-gradient(50vmax 50vmax at 100% 100%,rgba(245,197,66,.14),transparent 60%),#F4F6F5;color:#1C2321;padding:14px 16px 40px}
.bt-ov[hidden]{display:none}
.bt-arriba{display:flex;align-items:center;justify-content:space-between;max-width:860px;margin:0 auto 10px}
.bt-tema{font:600 12.5px var(--f-body);color:#5F6B66;background:rgba(255,255,255,.7);padding:5px 12px;border-radius:999px}
.bt-x{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:0;background:rgba(255,255,255,.7);color:#1C2321;cursor:pointer}
.bt-centro{max-width:620px;margin:8vh auto 0;text-align:center;display:grid;justify-items:center;gap:10px}
.bt-centro h2{margin:6px 0 0;font-size:26px}
.bt-radar{position:relative;display:grid;place-items:center;width:120px;height:120px;color:#12805C}
.bt-radar svg{width:40px;height:40px}
.bt-radar i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(18,128,92,.45);animation:btOnda 2.4s ease-out infinite}
.bt-radar i:nth-child(2){animation-delay:.8s}.bt-radar i:nth-child(3){animation-delay:1.6s}
@keyframes btOnda{from{transform:scale(.35);opacity:1}to{transform:scale(1.25);opacity:0}}
.bt-vs-pant{grid-template-columns:1fr auto 1fr;align-items:center;max-width:760px;gap:20px}
.bt-vs-j{display:grid;justify-items:center;gap:6px;animation:btEntra .5s cubic-bezier(.2,.8,.2,1) both}
.bt-vs-j:last-child{animation-name:btEntraD}
.bt-vs-j b{font-size:19px}.bt-vs-j>span:not(.ob-avw){display:flex;gap:6px;align-items:center}.bt-vs-j small{color:#5F6B66}
@keyframes btEntra{from{transform:translateX(-40px);opacity:0}}@keyframes btEntraD{from{transform:translateX(40px);opacity:0}}
.bt-vs-medio{display:grid;justify-items:center}
.bt-vs-grande{font:400 54px/1 Anton,Impact,sans-serif;color:#17201C;letter-spacing:.02em}
#btCuenta{font:700 40px/1 var(--f-body);color:#12805C;animation:btLate 1s ease infinite}
@keyframes btLate{50%{transform:scale(1.18)}}
.bt-marcador{display:flex;align-items:center;gap:10px;max-width:860px;margin:0 auto 12px;background:rgba(255,255,255,.75);border:1px solid #fff;border-radius:18px;padding:10px 12px;box-shadow:0 12px 30px -18px rgba(20,40,30,.3)}
.bt-jug{flex:1;display:flex;align-items:center;gap:10px;min-width:0;position:relative}
.bt-jug.el{flex-direction:row-reverse;text-align:right}
.bt-jug-t{min-width:0;flex:1}.bt-jug-t b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bt-jug-t small{display:flex;gap:4px;align-items:center}
.bt-jug.el .bt-jug-t small{justify-content:flex-end}
.bt-puntos{font:800 24px/1 var(--f-body);letter-spacing:-.02em;min-width:56px;text-align:center}
.bt-vs{font:400 20px Anton,Impact,sans-serif;color:#8A948F}
.bt-hueco{width:44px;height:44px;border-radius:50%;background:rgba(23,32,28,.08)}
.bt-flota{position:absolute;top:-6px;font-style:normal;font-weight:800;font-size:15px;animation:btFlota 1.6s ease forwards;pointer-events:none}
.bt-jug.yo .bt-flota{right:0}.bt-jug.el .bt-flota{left:0}
@keyframes btFlota{from{transform:translateY(6px);opacity:0}20%{opacity:1}to{transform:translateY(-22px);opacity:0}}
.bt-prog{display:flex;gap:5px;max-width:860px;margin:0 auto 8px}
.bt-prog i{flex:1;height:5px;border-radius:5px;background:rgba(23,32,28,.1)}.bt-prog i.hecha{background:#3CC48C}.bt-prog i.ahora{background:#17201C}
.bt-reloj{max-width:860px;margin:0 auto 14px;height:6px;border-radius:6px;background:rgba(23,32,28,.08);overflow:hidden}
.bt-reloj i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#D2483F,#F5C542 35%,#1E9E6A 70%);transform-origin:left;animation:btTiempo linear forwards}
@keyframes btTiempo{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.bt-preg{max-width:860px;margin:0 auto;background:rgba(255,255,255,.85);border:1px solid #fff;border-radius:22px;padding:20px 22px;box-shadow:0 16px 40px -24px rgba(20,40,30,.35)}
.bt-num{font:600 12px var(--f-body);color:#5F6B66;text-transform:uppercase;letter-spacing:.06em}
.bt-enun{font-size:18px;line-height:1.5;margin:8px 0 14px;font-weight:500}
.bt-st{margin:-4px 0 14px;padding-left:22px;font-size:15px;line-height:1.5}
.bt-ops{display:grid;gap:9px}
.bt-op{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 14px;border-radius:14px;border:1.5px solid rgba(23,32,28,.1);background:#fff;font:400 15.5px/1.4 var(--f-body);color:#1C2321;cursor:pointer;transition:transform .12s,border-color .12s,background .2s}
.bt-op:hover:not(:disabled){border-color:#12805C;transform:translateY(-1px)}
.bt-op:disabled{cursor:default}
.bt-let{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(23,32,28,.06);font-weight:700;font-size:13.5px}
.bt-op>span:nth-child(2){flex:1}
.bt-marcas{display:flex;gap:3px}
.bt-op.elegida{border-color:#17201C;background:rgba(23,32,28,.04)}
.bt-op.bien{border-color:#1E9E6A;background:rgba(30,158,106,.12)}.bt-op.bien .bt-let{background:#1E9E6A;color:#fff}
.bt-op.mal{border-color:#D2483F;background:rgba(210,72,63,.1)}.bt-op.mal .bt-let{background:#D2483F;color:#fff}
.bt-op.mal-rival{border-color:rgba(210,72,63,.4)}
.bt-estado{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13.5px;color:#5F6B66;min-height:28px}
.bt-chip{background:rgba(245,197,66,.25);color:#7A5600;padding:4px 10px;border-radius:999px;font-weight:600;font-size:12.5px;animation:btEntra .3s ease}
.bt-seg{margin-left:auto;font-weight:700;color:#1C2321;font-variant-numeric:tabular-nums}
.bt-expl{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(23,32,28,.04);border-left:4px solid #8A948F}
.bt-expl.bien{border-left-color:#1E9E6A}.bt-expl.mal{border-left-color:#D2483F}
.bt-expl b{font-size:15px}.bt-art{margin-left:8px;font:600 12px var(--f-body);background:rgba(18,128,92,.12);color:#0E6B4C;padding:2px 8px;border-radius:6px}
.bt-expl p{margin:6px 0;font-size:14px;line-height:1.5}
.bt-fin-ico{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;color:#fff;background:linear-gradient(140deg,#8A948F,#5F6B66)}
.bt-fin-ico svg{width:38px;height:38px}
.bt-fin.gana .bt-fin-ico{background:linear-gradient(140deg,#B8901A,#F5C542);box-shadow:0 0 40px -6px rgba(245,197,66,.7)}
.bt-fin.pierde .bt-fin-ico{background:linear-gradient(140deg,#7A2333,#D2483F)}
.bt-fin h2{font:400 46px/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.bt-fin-tab{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:8px}
.bt-fin-tab>div{display:grid;justify-items:center;gap:4px;background:rgba(255,255,255,.8);border-radius:18px;padding:16px 10px;border:1.5px solid transparent}
.bt-fin-tab>div.gana{border-color:#F5C542;box-shadow:0 10px 30px -16px rgba(184,144,26,.6)}
.bt-fin-tab strong{font-size:28px;letter-spacing:-.02em}.bt-fin-tab small{color:#5F6B66}
.bt-delta{font-weight:700;font-size:15px}
.bt-fin-bot{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.bt-fin-bot .btn{display:inline-flex;align-items:center;gap:7px}
#btRepasoL{width:100%;text-align:left}
.bt-repaso{display:grid;gap:8px;padding-left:22px}
.bt-repaso li{background:rgba(255,255,255,.8);border-radius:12px;padding:10px 12px;border-left:4px solid #8A948F}
.bt-repaso li.bien{border-left-color:#1E9E6A}.bt-repaso li.mal{border-left-color:#D2483F}
.bt-repaso p{margin:0 0 4px;font-size:14px}.bt-repaso small{display:block;font-size:12.5px;margin-top:2px}
.bt-confeti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9001}
.bt-confeti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:btCae linear forwards}
@keyframes btCae{to{transform:translateY(105vh) rotate(720deg)}}

html:not(.cristal) .bt-sel,html:not(.cristal) .bt-cifras div{background:rgba(255,255,255,.06);color:var(--text)}
@media (max-width:900px){.bt-rej{grid-template-columns:1fr}}
@media (max-width:600px){
  .bt-vs-pant{grid-template-columns:1fr;gap:8px}.bt-vs-grande{font-size:36px}
  .bt-jug,.bt-jug.el{flex-direction:column;text-align:center;gap:4px}.bt-jug-t b{font-size:12.5px}.bt-jug-t small{display:none}.bt-puntos{font-size:20px;min-width:44px}.bt-vs{font-size:15px}
  .bt-preg{padding:16px}.bt-enun{font-size:16.5px}.bt-op{font-size:14.5px;padding:11px 12px}
  .bt-fin h2{font-size:36px}
}
@media (prefers-reduced-motion:reduce){.bt-radar i,#btCuenta,.bt-reto .bt-modal-c{animation:none}}
