/* ═══════════════════════════════════════════════════════════════
   DRAFT DE HÉROES — estilo «La ciudad nunca duerme» (papel, tinta, sombras duras)
   Equipo A = naranja · Equipo B = azul · Bans = rojo
   ═══════════════════════════════════════════════════════════════ */
.dr{--cream:#efe3c8;--ink:#141414;--orange:#e0622e;--gold:#ffd700;--blue:#45b8e6;--green:#86d15e;--red:#e5484d;--mut:#9fb0ad;
  --A:var(--orange);--B:var(--blue);color:var(--cream);font-family:'Jost',system-ui,sans-serif;position:relative;}
.dr *{box-sizing:border-box;}
.dr [hidden],.dr-cuenta[hidden]{display:none!important;}
.dr-wrap{max-width:1320px;margin:0 auto;padding:18px 16px 60px;}
.dr-kick{display:inline-block;font-family:'Titan One',sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:var(--cream);color:var(--ink);padding:5px 12px;border:3px solid var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.55);transform:rotate(-1.5deg);}
.dr-kick.or{background:var(--orange);} .dr-kick.gold{background:var(--gold);} .dr-kick.blue{background:var(--blue);} .dr-kick.green{background:var(--green);}
.dr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Titan One',sans-serif;font-size:15px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:10px;padding:10px 16px;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;}
.dr-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);} .dr-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.dr-btn.or{background:var(--orange);} .dr-btn.gold{background:var(--gold);} .dr-btn.green{background:var(--green);} .dr-btn.blue{background:var(--blue);} .dr-btn.red{background:var(--red);color:#fff;}
.dr-btn.ghost{background:transparent;color:var(--cream);border-color:rgba(239,227,200,.5);box-shadow:none;}
.dr-btn.sm{font-size:12.5px;padding:7px 11px;box-shadow:3px 3px 0 var(--ink);}
.dr-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;}
.dr-box{background:rgba(13,19,18,.82);border:3px solid rgba(239,227,200,.18);border-radius:16px;padding:16px;backdrop-filter:blur(4px);}

/* ── Portada (página sin código) ── */
.dr-hero{position:relative;overflow:hidden;border:4px solid var(--cream);border-radius:20px;padding:34px 26px;background:#0b100f;box-shadow:8px 8px 0 rgba(0,0,0,.6);isolation:isolate;}
.dr-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/uploads/torneos/flyer/ciudad.webp) center/cover;filter:grayscale(1) brightness(.45);opacity:.55;}
.dr-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 90% at 20% 30%,rgba(224,98,46,.35),transparent 60%),radial-gradient(70% 80% at 85% 70%,rgba(69,184,230,.3),transparent 60%),linear-gradient(180deg,transparent,rgba(0,0,0,.6));}
.dr-hero h1{font-family:'Titan One',sans-serif;font-weight:400;font-size:clamp(40px,7vw,78px);line-height:.95;text-transform:uppercase;margin:14px 0 10px;color:var(--cream);
  text-shadow:4px 4px 0 var(--orange),8px 8px 0 rgba(0,0,0,.7);}
.dr-hero h1 em{font-style:normal;color:var(--gold);}
.dr-hero p{font-size:17px;max-width:620px;color:#e6ece9;line-height:1.5;}
.dr-desfile{position:relative;height:150px;margin:22px -26px -34px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.dr-desfile-in{display:flex;gap:10px;position:absolute;left:0;top:10px;animation:drDesfile 40s linear infinite;}
.dr-desfile img{height:130px;width:auto;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.6));}
@keyframes drDesfile{to{transform:translateX(-50%);}}
.dr-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:26px 0;}
.dr-paso{background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:14px 16px;box-shadow:5px 5px 0 rgba(0,0,0,.55);}
.dr-paso:nth-child(even){transform:rotate(.6deg);} .dr-paso:nth-child(odd){transform:rotate(-.5deg);}
.dr-paso b{display:block;font-family:'Titan One',sans-serif;font-weight:400;font-size:19px;text-transform:uppercase;margin:4px 0;}
.dr-paso i{font-style:normal;font-size:28px;} .dr-paso p{margin:0;font-size:14.5px;line-height:1.45;}
.dr-dos{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:start;}
@media(max-width:900px){.dr-dos{grid-template-columns:1fr;}}
.dr-form{display:grid;gap:12px;}
.dr-form label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:14px;}
.dr-form label small{font-weight:500;color:var(--mut);}
.dr-form input[type=text],.dr-form select{background:#0e1514;border:2px solid rgba(239,227,200,.3);color:var(--cream);border-radius:10px;padding:10px 12px;font:600 15px 'Jost',sans-serif;}
.dr-form .fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.dr-form .chk{flex-direction:row;align-items:center;gap:9px;font-weight:600;}
.dr-fmts{display:grid;gap:8px;}
.dr-fmt{display:flex;gap:12px;align-items:flex-start;background:#101716;border:2px solid rgba(239,227,200,.18);border-radius:12px;padding:10px 12px;cursor:pointer;}
.dr-fmt input{margin-top:4px;accent-color:var(--orange);}
.dr-fmt b{font-family:'Titan One',sans-serif;font-weight:400;font-size:16px;text-transform:uppercase;}
.dr-fmt small{display:block;color:var(--mut);font-size:13px;}
.dr-fmt:has(input:checked){border-color:var(--orange);background:rgba(224,98,46,.12);}
.dr-seq{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px;}
.dr-seq i{font-style:normal;font-size:10px;font-weight:800;width:22px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:5px;color:var(--ink);}
.dr-seq i.x{background:var(--A);} .dr-seq i.y{background:var(--B);} .dr-seq i.ban{box-shadow:inset 0 0 0 2px var(--red);background:#2a1414;color:#ffb3b3;}
.dr-lista{display:grid;gap:8px;}
.dr-item{display:flex;align-items:center;gap:10px;background:#101716;border:2px solid rgba(239,227,200,.15);border-radius:12px;padding:10px 12px;text-decoration:none;color:var(--cream);}
.dr-item:hover{border-color:var(--gold);}
.dr-item b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dr-pill{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-radius:20px;padding:3px 9px;border:2px solid currentColor;white-space:nowrap;}
.dr-pill.vivo{color:var(--green);} .dr-pill.lobby{color:var(--gold);} .dr-pill.fin{color:var(--mut);}
.dr-aviso{background:rgba(255,215,0,.08);border:2px dashed rgba(255,215,0,.5);border-radius:12px;padding:12px 14px;font-weight:600;}

/* ── Sala del draft ── */
.dr-top{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:12px;}
.dr-top h1{font-family:'Titan One',sans-serif;font-weight:400;font-size:26px;text-transform:uppercase;margin:0;}
.dr-top .cod{font-family:'Titan One',monospace;background:var(--ink);border:2px dashed var(--gold);color:var(--gold);border-radius:8px;padding:3px 10px;letter-spacing:.08em;}
.dr-top .sp{flex:1;}
.dr-tablero{display:grid;grid-template-columns:250px minmax(0,1fr) 250px;gap:14px;align-items:start;}
.dr-eq{position:relative;background:rgba(13,19,18,.86);border:3px solid var(--c);border-radius:16px;padding:12px;box-shadow:5px 5px 0 rgba(0,0,0,.55);transition:box-shadow .3s;}
.dr-eq.a{--c:var(--A);} .dr-eq.b{--c:var(--B);}
.dr-eq.turno{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 45%,transparent),0 0 34px color-mix(in srgb,var(--c) 55%,transparent);animation:drTurno 1.4s ease-in-out infinite;}
@keyframes drTurno{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 30%,transparent),0 0 44px color-mix(in srgb,var(--c) 70%,transparent);}}
.dr-eq-cab{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;}
.dr-eq-cab .nom{font-family:'Titan One',sans-serif;font-size:21px;line-height:1.05;text-transform:uppercase;color:var(--c);text-shadow:2px 2px 0 var(--ink);word-break:break-word;}
.dr-eq-cab .cap{font-size:12.5px;color:var(--mut);font-weight:700;}
.dr-eq-cab .estado{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px;}
.dr-res{font-family:'Titan One',monospace;font-size:13px;background:#0b0f0e;border:2px solid rgba(239,227,200,.2);border-radius:20px;padding:2px 9px;}
.dr-res.baja{color:var(--red);border-color:var(--red);}
.dr-tit{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:8px 0 5px;}
.dr-bans{display:flex;gap:6px;flex-wrap:wrap;}
.dr-ban{position:relative;width:46px;height:46px;border-radius:9px;border:2px dashed rgba(229,72,77,.5);background:#160d0d;overflow:hidden;}
.dr-ban img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.75);}
.dr-ban.lleno{border-style:solid;border-color:var(--red);}
.dr-ban.lleno::after{content:"";position:absolute;left:-10%;top:50%;width:120%;height:4px;background:var(--red);transform:rotate(-45deg);box-shadow:0 0 6px var(--red);}
.dr-ban.vacio-auto::before{content:"—";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#a66;font-weight:800;}
.dr-ban.ahora{border-color:var(--red);border-style:solid;animation:drParpadeo 1s ease-in-out infinite;}
.dr-picks{display:grid;gap:7px;}
.dr-pick{position:relative;display:flex;align-items:center;gap:10px;height:64px;border-radius:12px;border:2px dashed rgba(239,227,200,.25);background:#0e1413;overflow:hidden;padding-right:10px;}
.dr-pick .n{font-family:'Titan One',sans-serif;font-size:12px;color:var(--mut);min-width:42px;padding-left:8px;text-align:left;flex:0 0 auto;white-space:nowrap;}
.dr-pick.lleno{border-style:solid;border-color:var(--c);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 35%,#0e1413),#0e1413 75%);}
.dr-pick.lleno img{position:absolute;left:-6px;bottom:-12px;height:92px;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.6));}
.dr-pick.lleno .n{opacity:0;}
.dr-pick b{margin-left:auto;font-family:'Titan One',sans-serif;font-weight:400;font-size:16px;text-transform:uppercase;text-shadow:2px 2px 0 var(--ink);position:relative;}
.dr-pick small.auto{position:absolute;right:8px;top:4px;font-size:9.5px;font-weight:800;color:var(--gold);text-transform:uppercase;}
.dr-pick.ahora{border-color:var(--c);border-style:solid;animation:drParpadeo 1s ease-in-out infinite;}
@keyframes drParpadeo{50%{background-color:color-mix(in srgb,var(--c,#e5484d) 22%,#0e1413);}}
.dr-nuevo{animation:drEntra .6s cubic-bezier(.2,1.5,.4,1);}
@keyframes drEntra{from{transform:scale(.4) rotate(-6deg);filter:brightness(2.4);}to{transform:none;filter:none;}}

/* Centro: reloj + turno + rejilla */
.dr-centro{display:flex;flex-direction:column;gap:12px;min-width:0;}
.dr-estado{position:relative;display:flex;align-items:center;gap:16px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:12px 16px;box-shadow:5px 5px 0 rgba(0,0,0,.55);}
.dr-reloj{position:relative;width:78px;height:78px;flex:0 0 auto;}
.dr-reloj svg{width:100%;height:100%;transform:rotate(-90deg);}
.dr-reloj circle{fill:none;stroke-width:9;}
.dr-reloj .fondo{stroke:rgba(20,20,20,.15);} .dr-reloj .barra{stroke:var(--tc,var(--orange));stroke-linecap:round;transition:stroke-dashoffset .25s linear;}
.dr-reloj b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Titan One',sans-serif;font-size:26px;}
.dr-reloj.reserva b{color:var(--red);} .dr-reloj.urge{animation:drUrge .5s ease-in-out infinite alternate;}
@keyframes drUrge{to{transform:scale(1.08);}}
.dr-estado .tx{flex:1;min-width:0;}
.dr-estado .tx small{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5a554b;}
.dr-estado .tx b{display:block;font-family:'Titan One',sans-serif;font-weight:400;font-size:24px;line-height:1.05;text-transform:uppercase;}
.dr-estado .tx b em{font-style:normal;color:var(--tc,var(--orange));-webkit-text-stroke:1px var(--ink);}
.dr-estado .tx span{font-size:13.5px;font-weight:600;}
.dr-orden{display:flex;flex-wrap:wrap;gap:4px;}
.dr-orden i{font-style:normal;font-size:10px;font-weight:800;min-width:30px;height:22px;padding:0 5px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--ink);opacity:.55;border:2px solid transparent;}
.dr-orden i.a{background:var(--A);} .dr-orden i.b{background:var(--B);} .dr-orden i.ban{background:#2a1414;color:#ffb3b3;box-shadow:inset 0 0 0 2px var(--red);}
.dr-orden i.hecho{opacity:.25;} .dr-orden i.ahora{opacity:1;border-color:var(--ink);transform:scale(1.15);box-shadow:0 0 0 2px var(--cream);}
.dr-herr{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.dr-herr input{flex:1;min-width:160px;background:#0e1514;border:2px solid rgba(239,227,200,.3);color:var(--cream);border-radius:10px;padding:9px 12px;font:600 15px 'Jost',sans-serif;}
.dr-filtro{font:800 12.5px 'Jost',sans-serif;background:#101716;color:var(--cream);border:2px solid rgba(239,227,200,.25);border-radius:20px;padding:6px 11px;cursor:pointer;}
.dr-filtro.on{background:var(--gold);color:var(--ink);border-color:var(--ink);}
.dr-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;}
.dr-h{position:relative;display:flex;flex-direction:column;align-items:center;padding:0;border:3px solid var(--ink);border-radius:12px;cursor:pointer;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--hc) 55%,#1b2322),#0d1211 85%);aspect-ratio:280/380;color:var(--cream);box-shadow:3px 3px 0 rgba(0,0,0,.55);transition:transform .12s,box-shadow .12s,filter .2s;}
.dr-h img{width:100%;height:100%;object-fit:cover;object-position:top;position:absolute;inset:0;}
.dr-h span{position:absolute;left:0;right:0;bottom:0;padding:14px 4px 5px;font-family:'Titan One',sans-serif;font-size:12px;line-height:1.05;text-transform:uppercase;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.92) 55%);text-shadow:1px 1px 0 #000;}
.dr.jugando .dr-h:not(.ocupado):hover{transform:translateY(-3px);box-shadow:4px 7px 0 rgba(0,0,0,.6);z-index:2;}
.dr-h.sel{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold),0 0 22px rgba(255,215,0,.7);transform:translateY(-3px) scale(1.03);z-index:3;}
.dr-h.ocupado{cursor:not-allowed;}
.dr-h.ban{filter:grayscale(1) brightness(.45);}
.dr-h.ban::after{content:"BAN";position:absolute;top:36%;left:-10%;right:-10%;transform:rotate(-18deg);background:var(--red);color:#fff;font-family:'Titan One',sans-serif;font-size:14px;text-align:center;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.dr-h.pick-a,.dr-h.pick-b{filter:brightness(.55) saturate(.6);}
.dr-h.pick-a{border-color:var(--A);} .dr-h.pick-b{border-color:var(--B);}
.dr-h.pick-a::after,.dr-h.pick-b::after{content:attr(data-eq);position:absolute;top:6px;left:6px;right:6px;font-size:10px;font-weight:800;padding:2px 6px;border-radius:10px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;}
.dr-h.pick-a::after{background:var(--A);} .dr-h.pick-b::after{background:var(--B);}
.dr-h.oculto{display:none;}
.dr-confirmar{position:sticky;bottom:12px;z-index:20;display:flex;align-items:center;gap:12px;background:var(--ink);border:3px solid var(--gold);border-radius:14px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.6);}
.dr-confirmar img{width:48px;height:48px;object-fit:cover;object-position:top;border-radius:10px;border:2px solid var(--gold);}
.dr-confirmar b{flex:1;font-family:'Titan One',sans-serif;font-weight:400;font-size:17px;text-transform:uppercase;}
.dr-msg{font-size:13.5px;font-weight:700;color:#ff9b8f;min-height:18px;}

/* Lobby, cuenta regresiva, terminado */
.dr-lobby{display:grid;gap:12px;}
.dr-lobby .caps{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dr-lobby .cap{background:#101716;border:3px solid var(--c);border-radius:14px;padding:12px;text-align:center;}
.dr-lobby .cap.a{--c:var(--A);} .dr-lobby .cap.b{--c:var(--B);}
.dr-lobby .cap b{display:block;font-family:'Titan One',sans-serif;font-size:18px;text-transform:uppercase;color:var(--c);}
.dr-lobby .cap span{display:block;font-size:13px;color:var(--mut);margin:3px 0 8px;}
.dr-listo{font-family:'Titan One',sans-serif;font-size:13px;border-radius:20px;padding:4px 10px;display:inline-block;}
.dr-listo.si{background:var(--green);color:var(--ink);} .dr-listo.no{background:#2b2b2b;color:#cfcfcf;}
.dr-inv{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#0b0f0e;border:2px dashed rgba(239,227,200,.3);border-radius:10px;padding:8px 10px;font-size:13px;}
.dr-inv code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gold);}
.dr-cuenta{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(circle,rgba(0,0,0,.45),transparent 60%);}
.dr-cuenta b{font-family:'Titan One',sans-serif;font-size:160px;color:var(--gold);text-shadow:6px 6px 0 var(--ink),12px 12px 0 rgba(0,0,0,.5);animation:drCuenta 1s ease-out infinite;}
@keyframes drCuenta{from{transform:scale(1.6);opacity:.2;}20%{transform:scale(1);opacity:1;}to{transform:scale(.85);opacity:.9;}}
.dr-anuncio{position:fixed;left:50%;top:110px;z-index:110;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:var(--ink);border:3px solid var(--c,var(--gold));border-radius:14px;padding:8px 16px 8px 8px;box-shadow:6px 6px 0 rgba(0,0,0,.6);animation:drAnuncio 2.6s ease forwards;pointer-events:none;}
.dr-anuncio img{width:54px;height:54px;object-fit:cover;object-position:top;border-radius:10px;}
.dr-anuncio b{font-family:'Titan One',sans-serif;font-weight:400;font-size:18px;text-transform:uppercase;} .dr-anuncio small{display:block;font-size:12px;color:var(--mut);font-weight:700;}
@keyframes drAnuncio{0%{transform:translate(-50%,-30px) scale(.8);opacity:0;}12%{transform:translate(-50%,0) scale(1);opacity:1;}80%{opacity:1;}100%{transform:translate(-50%,-10px);opacity:0;}}
.dr-fin{text-align:center;}
.dr-fin h2{font-family:'Titan One',sans-serif;font-weight:400;font-size:34px;text-transform:uppercase;margin:4px 0;color:var(--gold);text-shadow:3px 3px 0 var(--ink);}
.dr-fin .equipos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0;}
.dr-fin .lado{border:3px solid var(--c);border-radius:14px;padding:10px;background:#0e1413;} .dr-fin .lado.a{--c:var(--A);} .dr-fin .lado.b{--c:var(--B);}
.dr-fin .lado b{display:block;font-family:'Titan One',sans-serif;font-size:18px;text-transform:uppercase;color:var(--c);margin-bottom:6px;}
.dr-fin .caras{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;}
.dr-fin .caras img{width:60px;height:82px;object-fit:cover;object-position:top;border-radius:8px;border:2px solid var(--c);animation:drEntra .7s cubic-bezier(.2,1.5,.4,1) both;}
.dr-fin .caras img:nth-child(2){animation-delay:.08s;} .dr-fin .caras img:nth-child(3){animation-delay:.16s;} .dr-fin .caras img:nth-child(4){animation-delay:.24s;} .dr-fin .caras img:nth-child(5){animation-delay:.32s;} .dr-fin .caras img:nth-child(6){animation-delay:.4s;}
.dr-espectador{font-size:12.5px;font-weight:800;color:var(--mut);background:rgba(0,0,0,.35);border:1px solid rgba(239,227,200,.2);border-radius:20px;padding:4px 10px;}

@media(max-width:980px){
  /* En celular/tableta: reloj y turnos arriba, luego los dos equipos lado a lado, luego la rejilla */
  .dr-tablero{grid-template-columns:1fr 1fr;gap:10px;}
  .dr-centro{display:contents;}
  .dr-estado,.dr-orden,#dr-lobby,#dr-fin,.dr-herr,.dr-caja,.dr-rejilla,.dr-confirmar,.dr-msg{grid-column:1/-1;}
  .dr-estado{order:1;} .dr-orden{order:2;} .dr-eq{order:3;} #dr-lobby,#dr-fin{order:4;} .dr-herr{order:5;} .dr-rejilla{order:6;} .dr-confirmar{order:7;} .dr-msg{order:8;}
  .dr-pick{height:54px;} .dr-pick.lleno img{height:78px;} .dr-pick b{font-size:13px;}
}
@media(max-width:560px){
  .dr-wrap{padding:12px 10px 60px;}
  .dr-eq{padding:9px;} .dr-eq-cab .nom{font-size:16px;}
  .dr-ban{width:36px;height:36px;}
  .dr-pick{height:46px;gap:6px;} .dr-pick.lleno img{height:62px;left:-8px;} .dr-pick b{font-size:11.5px;} .dr-pick .n{min-width:0;padding-left:8px;font-size:10px;}
  .dr-estado{padding:10px 12px;gap:10px;} .dr-reloj{width:62px;height:62px;} .dr-reloj b{font-size:20px;} .dr-estado .tx b{font-size:18px;}
  .dr-rejilla{gap:5px;} .dr-h span{font-size:10px;}
  .dr-lobby .caps,.dr-fin .equipos{grid-template-columns:1fr;}
  .dr-cuenta b{font-size:110px;}
}
@media(prefers-reduced-motion:reduce){.dr *,.dr-cuenta b,.dr-anuncio{animation:none!important;}}

/* ═══════════════ v4 · crear más simple, banner de capitán, rejilla que cabe, confirmar en la ficha ═══════════════ */

/* Crear: modo de juego como dos botones grandes (estándar primero) */
.dr-modos{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dr-modo{position:relative;cursor:pointer;}
.dr-modo input{position:absolute;opacity:0;pointer-events:none;}
.dr-modo span{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;background:#101716;border:3px solid rgba(239,227,200,.2);border-radius:14px;padding:12px 8px;transition:transform .12s,border-color .12s,background .12s;}
.dr-modo b{font-family:'Titan One',sans-serif;font-weight:400;font-size:24px;line-height:1;color:var(--cream);}
.dr-modo small{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);}
.dr-modo:hover span{border-color:rgba(239,227,200,.45);}
.dr-modo input:checked + span{border-color:var(--ink);background:var(--gold);box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px);}
.dr-modo input:checked + span b,.dr-modo input:checked + span small{color:var(--ink);}
.dr-modo input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px;}
.dr-resumen-fmt{margin:0;font-size:13.5px;line-height:1.5;color:#dfe6e4;background:rgba(0,0,0,.3);border:1px dashed rgba(239,227,200,.25);border-radius:10px;padding:8px 11px;}
.dr-resumen-fmt b{color:var(--gold);}
.dr-avanzadas{border:2px solid rgba(239,227,200,.15);border-radius:12px;background:rgba(0,0,0,.25);}
.dr-avanzadas>summary{list-style:none;cursor:pointer;padding:10px 12px;font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dr-avanzadas>summary::-webkit-details-marker{display:none;}
.dr-avanzadas>summary small{font-weight:600;color:var(--mut);}
.dr-avanzadas>summary::after{content:'▾';margin-left:auto;color:var(--mut);}
.dr-avanzadas[open]>summary::after{content:'▴';}
.dr-avanzadas[open]>summary{border-bottom:1px dashed rgba(239,227,200,.2);}
.dr-avz-in{display:grid;gap:12px;padding:12px;}
.dr-rec{font-style:normal;font-family:'Jost',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.05em;background:var(--green);color:var(--ink);border-radius:20px;padding:2px 7px;vertical-align:middle;}
.dr-faq details{border-top:1px dashed rgba(239,227,200,.18);padding:9px 0;}
.dr-faq details:first-of-type{margin-top:10px;}
.dr-faq summary{cursor:pointer;font-weight:800;font-size:14.5px;}
.dr-faq p{margin:7px 0 0;font-size:14px;line-height:1.55;color:#dfe6e4;}

/* Banner «Te invitaron como capitán»: marco animado, corona que brinca y botón que late */
@property --drang{syntax:"<angle>";inherits:false;initial-value:0deg;}
.dr-invita{position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 16px;padding:18px 20px;border-radius:18px;
  background:radial-gradient(120% 160% at 0% 50%,rgba(255,215,0,.22),transparent 55%),linear-gradient(110deg,#1c1407,#0d1211 60%);box-shadow:0 0 34px rgba(255,215,0,.28),6px 6px 0 rgba(0,0,0,.6);}
.dr-invita-marco{position:absolute;inset:0;border-radius:18px;z-index:-1;padding:4px;background:conic-gradient(from var(--drang),var(--gold),var(--orange),var(--green),var(--blue),var(--gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:drGiro 2.4s linear infinite;}
@keyframes drGiro{to{--drang:360deg;}}
.dr-invita-ico{font-size:52px;line-height:1;filter:drop-shadow(0 0 12px rgba(255,215,0,.7));animation:drCorona 1.6s ease-in-out infinite;}
@keyframes drCorona{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-6px) rotate(6deg);}}
.dr-invita-tx{flex:1;min-width:220px;}
.dr-invita-tx small{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);}
.dr-invita-tx b{display:block;font-family:'Titan One',sans-serif;font-weight:400;font-size:clamp(20px,3vw,28px);line-height:1.1;text-transform:uppercase;color:var(--cream);text-shadow:3px 3px 0 var(--ink);margin:2px 0 4px;}
.dr-invita-tx span{display:block;font-size:14px;color:#dfe6e4;line-height:1.45;}
.dr-btn.dr-invita-btn{font-size:17px;padding:14px 20px;animation:drLate 1.3s ease-in-out infinite;}
.dr-btn.dr-invita-btn i{font-style:normal;display:inline-block;animation:drFlecha .9s ease-in-out infinite;}
@keyframes drLate{0%,100%{transform:scale(1);box-shadow:4px 4px 0 var(--ink),0 0 0 0 rgba(255,215,0,.5);}50%{transform:scale(1.05);box-shadow:5px 5px 0 var(--ink),0 0 0 10px rgba(255,215,0,0);}}
@keyframes drFlecha{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}
@media(max-width:560px){.dr-invita{padding:14px;gap:10px;}.dr-invita-ico{font-size:40px;}.dr-btn.dr-invita-btn{width:100%;}}

/* Rejilla: el número de columnas lo pone draft.js para que quepan todos los héroes */
.dr-caja{position:relative;}
.dr-caja.desliza{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:12px;padding-right:2px;}
.dr-borde{position:sticky;z-index:6;display:flex;align-items:center;justify-content:center;width:100%;height:32px;border:0;cursor:pointer;color:var(--ink);font-size:15px;
  background:linear-gradient(180deg,rgba(255,215,0,.95),rgba(255,215,0,.7));border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.5);}
.dr-borde.arriba{top:0;margin-bottom:6px;} .dr-borde.abajo{bottom:0;margin-top:6px;}
.dr-borde:hover{filter:brightness(1.1);}
.dr-rejilla{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));}
.dr-rejilla.chica .dr-h span{font-size:9px;padding:10px 2px 3px;}
.dr-rejilla.chica .dr-h.ban::after{font-size:10px;}
.dr-rejilla.chica .dr-h.pick-a::after,.dr-rejilla.chica .dr-h.pick-b::after{font-size:8px;top:3px;left:3px;right:3px;padding:1px 3px;}

/* Confirmar en la misma ficha: 1.er toque la marca, 2.º toque confirma */
.dr-h-ok{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;font-style:normal;font-size:10px;font-weight:800;line-height:1.15;color:#fff;padding:3px;
  background:rgba(10,12,12,.55);text-shadow:1px 1px 0 #000;}
.dr-h-ok small{font-size:inherit;}
.dr-h-ok b{display:block;max-width:100%;font-family:'Titan One',sans-serif;font-weight:400;font-size:11.5px;letter-spacing:0;background:var(--gold);color:var(--ink);border-radius:6px;padding:2px 4px;text-shadow:none;}
.dr-estado .tx i.dr-marcado{font-style:normal;font-weight:800;color:var(--tc,var(--orange));}
.dr.turno-ban .dr-h-ok b{background:var(--red);color:#fff;}
.dr-h.sel .dr-h-ok{display:flex;animation:drSel .9s ease-in-out infinite alternate;}
@keyframes drSel{from{background:rgba(10,12,12,.45);}to{background:rgba(10,12,12,.68);}}
.dr.turno-ban .dr-h.sel{border-color:var(--red);box-shadow:0 0 0 3px var(--red),0 0 22px rgba(229,72,77,.75);}
.dr-rejilla.chica .dr-h-ok{font-size:8px;} .dr-rejilla.chica .dr-h-ok b{font-size:9px;padding:1px 2px;}
.dr-h.enviando{opacity:.6;pointer-events:none;}
.dr.jugando .dr-h:not(.ocupado){cursor:pointer;}

/* En celular el reloj se queda arriba mientras eliges */
@media(max-width:980px){
  .dr-caja{order:6;grid-column:1/-1;}
}
@media(prefers-reduced-motion:reduce){.dr-invita-marco,.dr-invita-ico,.dr-btn.dr-invita-btn,.dr-btn.dr-invita-btn i,.dr-h.sel .dr-h-ok{animation:none!important;}}

/* Mini reloj flotante (cuando el reloj grande quedó arriba, fuera de la pantalla) */
.dr-mini{position:fixed;left:50%;top:calc(var(--dr-tope,64px) + 8px);transform:translateX(-50%);z-index:900;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:30px;padding:5px 14px 5px 5px;box-shadow:4px 4px 0 rgba(0,0,0,.6);font-weight:800;font-size:14px;}
.dr-mini b{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--tc,var(--orange));color:#fff;font-family:'Titan One',sans-serif;font-weight:400;font-size:16px;border:2px solid var(--ink);}
.dr-mini span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;font-family:'Titan One',sans-serif;font-weight:400;font-size:13px;}
.dr-mini.urge b{animation:drUrge .5s ease-in-out infinite alternate;}
.dr-mini[hidden]{display:none!important;}
.dr-rejilla.chica .dr-h span{font-size:8px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:clip;padding-left:1px;padding-right:1px;}

/* Celular: que el formulario no se salga de su caja */
.dr-dos>*{min-width:0;}
.dr-form .fila{grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));}
.dr-form input[type=text],.dr-form select{min-width:0;width:100%;}
@media(max-width:560px){.dr-box{padding:12px;}}