/* FWC26 CLASH — identidad propia: matchday / broadcast 2026. Nada de panini/terrace. */
:root{
  --bg:#080A0F; --bg2:#0E1218; --panel:#141A23; --panel2:#1B2330;
  --line:#26303F; --txt:#EAF0F7; --mut:#8A97A8; --dim:#5A6776;
  --acc:#15F5A3;        /* verde eléctrico "pitch" */
  --acc2:#FF3D6E;       /* magenta caliente */
  --gold:#FFC83D;       /* ganador */
  --a:#15F5A3; --b:#3DA6FF;  /* jugador A / B */
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(21,245,163,.07), transparent 60%),
    radial-gradient(1000px 500px at 0% 110%, rgba(255,61,110,.06), transparent 55%),
    var(--bg);
  color:var(--txt); font-family:Archivo,system-ui,sans-serif; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.eyebrow{font:700 12px/1 Archivo; letter-spacing:.28em; color:var(--acc); text-transform:uppercase}
button{font-family:inherit; cursor:pointer}
input{font-family:inherit}

/* topbar */
.topbar{display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg,rgba(8,10,15,.95),rgba(8,10,15,.7)); backdrop-filter:blur(8px)}
.wordmark{display:flex; align-items:baseline; gap:8px; font-family:"Archivo Black",Archivo,sans-serif; letter-spacing:-.02em}
.wm-fwc{font-size:22px; color:var(--txt)}
.wm-slash{color:var(--acc); font-size:18px}
.wm-clash{font-size:22px; color:var(--acc); text-shadow:0 0 22px rgba(21,245,163,.5)}
.topbar-meta{font:700 12px Space Mono,monospace; color:var(--mut); letter-spacing:.1em}
.topbar-right{display:flex; align-items:center; gap:14px}
.lang-switch{display:flex; gap:2px; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.lang-btn{background:transparent; border:none; color:var(--mut); padding:6px 10px; font:800 12px Archivo; letter-spacing:.06em}
.lang-btn.on{background:var(--acc); color:#04130D}
@media(max-width:560px){ .topbar-meta{display:none} }

/* screens */
.screen{display:none; padding:34px 22px 60px; max-width:1180px; margin:0 auto}
.screen.is-active{display:block}
.view{display:none}
.view.is-active{display:block}

/* HOME */
.hero{max-width:760px; margin:10px auto}
.hero-title{font-family:"Archivo Black",sans-serif; font-size:clamp(34px,6vw,62px); line-height:.95;
  letter-spacing:-.03em; margin:14px 0 12px}
.hero-title .hl{color:var(--acc); text-shadow:0 0 40px rgba(21,245,163,.35)}
.hero-sub{color:var(--mut); font-size:16px; max-width:520px}
.home-counts{display:flex; gap:18px; margin:18px 0; font:700 13px Space Mono,monospace; color:var(--dim); letter-spacing:.06em}
.home-counts b{color:var(--txt)}

.panel{background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:var(--r); padding:22px}
.home-panel{margin-top:24px; display:flex; flex-direction:column; gap:18px}
.field{display:flex; flex-direction:column; gap:8px}
.field-lbl{font:700 11px Archivo; letter-spacing:.2em; color:var(--mut); text-transform:uppercase}
input{background:var(--bg); border:1px solid var(--line); color:var(--txt);
  padding:13px 14px; border-radius:10px; font-size:15px; outline:none; transition:border .15s}
input:focus{border-color:var(--acc)}

.seg{display:flex; gap:10px}
.seg-btn{flex:1; background:var(--bg); border:1px solid var(--line); color:var(--mut);
  padding:12px; border-radius:10px; font:800 14px Archivo; letter-spacing:.04em; text-transform:uppercase;
  display:flex; flex-direction:column; gap:3px; transition:.15s}
.seg-btn small{font:600 10px Archivo; letter-spacing:.04em; color:var(--dim); text-transform:none}
.seg-btn.is-on{border-color:var(--acc); color:var(--txt); background:rgba(21,245,163,.08)}
.seg-btn.is-on small{color:var(--acc)}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--bg); border:1px solid var(--line); color:var(--mut);
  padding:9px 13px; border-radius:999px; font:700 13px Space Mono,monospace; letter-spacing:.02em; transition:.12s}
.chip.is-on{border-color:var(--acc); color:var(--bg); background:var(--acc)}

.home-actions{display:flex; flex-direction:column; gap:12px; margin-top:4px}
.join-row{display:flex; gap:10px}
.code-in{text-transform:uppercase; letter-spacing:.25em; font-family:Space Mono,monospace; flex:1; text-align:center}

.btn{border:none; border-radius:11px; padding:14px 20px; font:800 15px Archivo;
  letter-spacing:.06em; text-transform:uppercase; transition:transform .08s, filter .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--acc); color:#04130D; box-shadow:0 8px 28px -8px rgba(21,245,163,.6)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--txt)}
.btn-ghost:hover{border-color:var(--acc); color:var(--acc)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn-daily{background:linear-gradient(90deg,var(--acc2),var(--gold)); color:#1a0a0f; margin-top:4px;
  box-shadow:0 8px 28px -8px rgba(255,61,110,.5)}
.btn-daily:hover{filter:brightness(1.08)}
.dr-sc{font:700 13px Space Mono,monospace; color:var(--txt)}

/* WAITING */
.waiting-panel{max-width:460px; margin:40px auto; text-align:center}
.room-code{font-family:"Archivo Black",sans-serif; font-size:54px; letter-spacing:.18em; color:var(--acc);
  margin:10px 0; text-shadow:0 0 30px rgba(21,245,163,.4)}
.mode-badge{display:inline-block; margin:2px 0 14px; padding:6px 14px; border:1px solid var(--line);
  border-radius:999px; font:700 12px Space Mono,monospace; letter-spacing:.08em; color:var(--mut)}
.mode-badge b{color:var(--acc); font-weight:700}
.waiting-hint{color:var(--mut); margin-bottom:20px}
.vs-row{display:flex; align-items:center; justify-content:center; gap:16px; margin:18px 0 24px}
.vs-card{flex:1; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:14px; max-width:170px}
.vs-card .ph-name{font:800 16px Archivo}
.vs-card .ph-state{font:700 11px Space Mono,monospace; letter-spacing:.1em; margin-top:6px}
.vs-card.ready{border-color:var(--acc)} .vs-card.ready .ph-state{color:var(--acc)}
.vs-card.empty{opacity:.5; border-style:dashed}
.vs-mid{font-family:"Archivo Black"; color:var(--acc2); font-size:18px}

/* DRAFT */
.draft-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.turn-banner{display:flex; flex-direction:column; gap:2px; padding:10px 16px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel); flex:1; min-width:0}
.turn-banner b{font:800 17px Archivo; letter-spacing:.02em}
.turn-banner span{font:600 12px Archivo; color:var(--mut)}
.turn-banner.mine{border-color:var(--acc); background:rgba(21,245,163,.06)}
.turn-banner.mine b{color:var(--acc)}
.turn-banner.is-armed{border-color:var(--gold); background:rgba(255,200,61,.07)}
.turn-banner.is-armed b{color:var(--gold)}
.turn-banner.theirs b{color:var(--mut)}
.turn-timer{display:flex; align-items:center; justify-content:center; min-width:62px; padding:8px 12px;
  border-radius:10px; border:1px solid var(--line); background:var(--panel);
  font:800 16px Space Mono,monospace; color:var(--txt); letter-spacing:.02em}
.turn-timer.urgent{border-color:var(--acc2); color:var(--acc2); animation:tpulse .8s ease-in-out infinite}
@keyframes tpulse{0%,100%{opacity:1}50%{opacity:.55}}

/* sub-barra del pool: qué falta + filtro */
.pool-sub{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.needs{font:700 12px Space Mono,monospace; color:var(--mut); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.need{background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:3px 8px; color:var(--txt)}
.fitfilter{background:var(--bg); border:1px solid var(--line); color:var(--mut); border-radius:8px;
  padding:6px 11px; font:700 12px Archivo; letter-spacing:.02em}
.fitfilter.on{border-color:var(--acc); color:var(--acc); background:rgba(21,245,163,.08)}

/* flash de gol */
#goalFlash{position:fixed; inset:0; pointer-events:none; z-index:90; opacity:0;
  background:radial-gradient(circle at 50% 40%, rgba(21,245,163,.45), transparent 60%)}
#goalFlash.on{animation:goalflash .5s ease-out}
@keyframes goalflash{0%{opacity:.9}100%{opacity:0}}

/* ───── cinemáticas a pantalla (stingers) ───── */
#cine{position:fixed; inset:0; z-index:95; pointer-events:none; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease}
#cine.show{opacity:1}
#cine::before{content:''; position:absolute; inset:0; opacity:0}
#cine.show::before{animation:cineBg 1s ease-out}
@keyframes cineBg{0%{opacity:.9}100%{opacity:0}}
.cine-card{position:relative; text-align:center; transform:scale(.6); opacity:0; padding:0 18px}
#cine.show .cine-card{animation:cinePop .55s cubic-bezier(.18,1.5,.4,1) forwards}
@keyframes cinePop{0%{transform:scale(.55);opacity:0}30%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
.cine-ic{font-size:clamp(60px,14vw,110px); line-height:1; filter:drop-shadow(0 6px 24px rgba(0,0,0,.5))}
.cine-title{font-family:"Archivo Black",sans-serif; font-size:clamp(40px,11vw,96px); letter-spacing:-.03em; line-height:.92; margin-top:4px}
.cine-sub{font:800 16px Archivo; letter-spacing:.16em; color:var(--mut); margin-top:10px; text-transform:uppercase}

/* gol — explosión verde + pelota rebota */
#cine.goal::before{background:radial-gradient(circle at 50% 45%, rgba(21,245,163,.55), transparent 62%)}
#cine.goal .cine-title{color:var(--acc); text-shadow:0 0 60px rgba(21,245,163,.8)}
#cine.goal .cine-ic{animation:ballIn .65s ease}
@keyframes ballIn{0%{transform:translateY(-60px) rotate(-40deg) scale(.5);opacity:0}60%{transform:translateY(6px) rotate(12deg) scale(1.1)}100%{transform:none;opacity:1}}

/* penal — zoom con temblor, ámbar */
#cine.penalty::before{background:radial-gradient(circle at 50% 45%, rgba(255,200,61,.5), transparent 62%)}
#cine.penalty .cine-title{color:var(--gold); text-shadow:0 0 46px rgba(255,200,61,.7)}
#cine.show.penalty .cine-card{animation:cinePop .55s cubic-bezier(.18,1.5,.4,1) forwards, cineShake .5s ease}
@keyframes cineShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-12px)}30%{transform:translateX(12px)}45%{transform:translateX(-8px)}60%{transform:translateX(8px)}75%{transform:translateX(-4px)}}

/* roja — slam giratorio rojo */
#cine.red::before{background:radial-gradient(circle at 50% 45%, rgba(255,61,110,.55), transparent 62%)}
#cine.red .cine-title{color:var(--acc2); text-shadow:0 0 46px rgba(255,61,110,.7)}
#cine.red .cine-ic{font-size:clamp(80px,18vw,150px); animation:cardSlam .55s cubic-bezier(.2,1.3,.4,1)}
@keyframes cardSlam{0%{transform:rotate(-50deg) scale(.2);opacity:0}60%{transform:rotate(10deg) scale(1.15);opacity:1}100%{transform:rotate(0) scale(1)}}

/* descanso / final — neutro elegante */
#cine.half::before,#cine.fulltime::before{background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.14), transparent 60%)}
#cine.half .cine-title{color:var(--txt)}
#cine.fulltime .cine-title{color:var(--gold); text-shadow:0 0 50px rgba(255,200,61,.5)}

/* tanda de penales — azul dramático */
#cine.shootout::before{background:radial-gradient(circle at 50% 45%, rgba(61,166,255,.45), transparent 62%)}
#cine.shootout .cine-title{color:var(--b); font-size:clamp(30px,8vw,68px); text-shadow:0 0 46px rgba(61,166,255,.6)}
.draft-progress{display:flex; gap:5px}
.pip{width:11px; height:11px; border-radius:3px; background:var(--line)}
.pip.a{background:var(--a)} .pip.b{background:var(--b)} .pip.now{outline:2px solid var(--txt); outline-offset:1px}

.draft-grid{display:grid; grid-template-columns:1fr 360px 240px; gap:18px; align-items:start}
@media(max-width:980px){
  .draft-grid{grid-template-columns:1fr;}
  /* en móvil: tu pitch, después el pool (de donde elegís), después el rival */
  .draft-grid > .pitch-wrap:first-child{order:1}
  .draft-grid > .pool{order:2}
  .draft-grid > .pitch-wrap.rival{order:3}
  .pool-list{max-height:none; overflow:visible}   /* sin scroll anidado → no recorta */
  .pitch{max-width:420px; margin:0 auto}            /* no ocupar toda la altura del móvil */
  .pitch-sm{max-width:300px}
}

.pitch-wrap{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.pitch-label{font:700 11px Archivo; letter-spacing:.2em; color:var(--mut); text-transform:uppercase; margin-bottom:10px}
.pitch{position:relative; width:100%; aspect-ratio:3/4; border-radius:10px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 9%, transparent 9% 18%),
    linear-gradient(180deg,#0c2a1f,#0a1f18);
  border:1px solid #16352a; overflow:hidden}
.pitch::before{content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.12); border-radius:6px}
.pitch::after{content:""; position:absolute; left:8px; right:8px; top:50%; height:1px; background:rgba(255,255,255,.12)}
.pitch-sm{aspect-ratio:3/4}
.disc{position:absolute; transform:translate(-50%,-50%); width:46px; text-align:center; cursor:default}
.pitch-sm .disc{width:34px}
.disc .d-circle{width:34px; height:34px; border-radius:50%; margin:0 auto; display:flex; align-items:center; justify-content:center;
  font:800 13px Space Mono,monospace; border:1.5px solid; position:relative}
.pitch-sm .disc .d-circle{width:26px; height:26px; font-size:11px}
.disc.empty .d-circle{border-color:var(--dim); color:var(--dim); border-style:dashed; background:rgba(0,0,0,.25)}
.disc.empty.sel .d-circle{border-color:var(--gold); color:var(--gold); box-shadow:0 0 14px rgba(255,200,61,.5)}
.disc.filled .d-circle{border-color:var(--acc); color:#04130D; background:var(--acc)}
.rival .disc.filled .d-circle{border-color:var(--b); color:#02101f; background:var(--b)}
.disc.empty{cursor:pointer}
.d-name{font:700 9px Archivo; color:var(--txt); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 3px #000}
.d-pos{font:700 8px Space Mono,monospace; color:var(--mut)}

/* pool */
.pool{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px; min-height:300px}
.pool-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px}
.pool-squad{font-family:"Archivo Black"; font-size:19px; line-height:1.1}
.pool-squad small{display:block; font:700 12px Space Mono,monospace; color:var(--acc); letter-spacing:.08em}
.reroll-box{display:flex; flex-direction:column; gap:6px; align-items:flex-end}
.reroll-box .rr-left{font:700 11px Space Mono,monospace; color:var(--mut)}
.rr-btns{display:flex; gap:6px}
.rr-btn{background:var(--bg); border:1px solid var(--line); color:var(--mut); border-radius:8px;
  padding:6px 9px; font:700 11px Archivo; letter-spacing:.04em; text-transform:uppercase}
.rr-btn:hover:not(:disabled){border-color:var(--acc2); color:var(--acc2)}
.rr-btn:disabled{opacity:.35}

.pool-list{display:flex; flex-direction:column; gap:7px; max-height:62vh; overflow:auto}
.pcard{display:flex; align-items:center; gap:11px; background:var(--bg); border:1px solid var(--line);
  border-radius:10px; padding:9px 11px; transition:.12s}
.pcard.pickable{cursor:pointer}
.pcard.pickable:hover,.pcard.pickable:active{border-color:var(--acc); box-shadow:inset 0 0 0 1.5px var(--acc), 0 0 18px -6px var(--acc)}
.pcard.used{opacity:.28; filter:grayscale(.85)}
.pcard.used .p-force,.pcard.used .p-tier{color:var(--dim)}
.pcard.unfit{opacity:.42; filter:grayscale(.5)}        /* no encaja en tus slots libres */
.pcard.unfit .p-name{color:var(--mut)}
.pcard.unfit .p-force,.pcard.unfit .p-tier{color:var(--dim)}
.pcard.pickable .p-name::after{}
.pcard .p-num{font:700 12px Space Mono,monospace; color:var(--dim); width:22px; text-align:center}
.pcard .p-main{flex:1; min-width:0}
.pcard .p-name{font:700 14px Archivo; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcard .p-name .lg{color:var(--gold)}
.pcard .p-pos{font:600 10px Space Mono,monospace; color:var(--mut); letter-spacing:.05em}
.pcard .p-force{font-family:"Archivo Black"; font-size:18px; color:var(--acc); min-width:34px; text-align:right}
.pcard .p-tier{color:var(--gold); font-size:13px; letter-spacing:1px; min-width:54px; text-align:right}
.pcard .p-hidden{font-family:"Archivo Black",sans-serif; font-size:18px; color:var(--dim); min-width:34px; text-align:right}

/* RESULT */
.result-wrap{max-width:840px; margin:10px auto}
.scoreboard{background:linear-gradient(180deg,var(--panel2),var(--bg2)); border:1px solid var(--line);
  border-radius:18px; padding:26px; text-align:center; position:relative; overflow:hidden}
.scoreboard::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 200px at 50% -20%, rgba(21,245,163,.12), transparent 70%)}
.sim-skip{position:relative; z-index:1; cursor:pointer}
.sb-teams{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; position:relative}
.sb-team{font-family:"Archivo Black"; font-size:clamp(18px,3vw,26px); letter-spacing:-.01em}
.sb-team .sb-form{display:block; font:700 12px Space Mono,monospace; color:var(--mut); margin-top:4px}
.sb-score{font-family:"Archivo Black"; font-size:clamp(44px,10vw,80px); letter-spacing:.04em; line-height:1}
.sb-score .dash{color:var(--acc); margin:0 .12em}
.sb-win{margin-top:16px; font:800 16px Archivo; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  text-shadow:0 0 26px rgba(255,200,61,.5); position:relative}
.sb-win.reveal{animation:winpop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes winpop{from{opacity:0; transform:scale(.7)} to{opacity:1; transform:none}}
.sb-pens{font:700 13px Space Mono,monospace; color:var(--mut); margin-top:8px; position:relative}
/* reloj + barra de progreso del reveal */
.sb-clock{position:relative; margin-top:10px; font:700 14px Space Mono,monospace; letter-spacing:.14em; color:var(--acc)}
.sb-bar{position:relative; height:4px; margin:14px auto 0; max-width:280px; background:var(--line); border-radius:3px; overflow:hidden}
.sb-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--acc),var(--gold)); transition:width .8s linear}
.sb-score span.pop{animation:scpop .35s ease}
@keyframes scpop{0%{transform:scale(1)}40%{transform:scale(1.35); color:var(--gold)}100%{transform:scale(1)}}
.tl-row.reveal{animation:tlin .4s ease both}
@keyframes tlin{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}
.str-cmp,.result-actions{transition:opacity .4s ease}
.sim-skip{display:block; margin:8px auto 0; font:700 11px Space Mono,monospace; letter-spacing:.1em; color:var(--dim);
  background:none; border:none; text-transform:uppercase}

.timeline{display:flex; flex-direction:column; gap:8px; margin:22px 0}
.tl-row{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:10px 14px}
.tl-row.b{flex-direction:row-reverse; text-align:right}
.tl-min{font:700 13px Space Mono,monospace; color:var(--acc2); min-width:42px}
.tl-ball{font-size:15px}
.tl-name{font:700 15px Archivo; flex:1}
.tl-empty{text-align:center; color:var(--mut); padding:18px; font:700 14px Space Mono,monospace}

.str-cmp{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px}
.str-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px}
.str-card h4{font:800 14px Archivo; margin-bottom:10px}
.str-row{display:flex; justify-content:space-between; font:700 13px Space Mono,monospace; color:var(--mut); padding:3px 0}
.str-row b{color:var(--txt)}

.result-actions{display:flex; justify-content:center; margin-top:22px}

/* feed enriquecido */
.tl-row .tl-name small{color:var(--mut); font:600 11px Space Mono,monospace; margin-left:6px}
.tl-row.flavor{opacity:.72; padding:8px 14px}
.tl-row.flavor .tl-min{color:var(--mut)}
.tl-row.flavor.b .tl-name small{margin:0 6px 0 0}
.tl-row.red .tl-name{color:var(--acc2)}
.tl-mark{text-align:center; font:700 12px Space Mono,monospace; letter-spacing:.18em; color:var(--mut);
  padding:8px; text-transform:uppercase}
.sb-extra{position:relative; margin-top:12px; display:flex; flex-direction:column; gap:4px}
.sb-extra .motm{font:800 15px Archivo; color:var(--gold); letter-spacing:.04em; text-shadow:0 0 18px rgba(255,200,61,.4)}
.sb-extra .stat{font:700 12px Space Mono,monospace; color:var(--mut)}
/* penales */
.pk-h{position:relative; font:700 12px Space Mono,monospace; letter-spacing:.16em; color:var(--mut); margin-top:14px; text-transform:uppercase}
.pk-row{position:relative; display:flex; align-items:center; gap:6px; justify-content:center; margin-top:8px; flex-wrap:wrap}
.pk-row b{font:700 12px Archivo; color:var(--txt); margin-right:6px}
.pk{font-size:17px; animation:scpop .3s ease}
.pk.miss{filter:grayscale(1); opacity:.45}
.pk-out{position:relative; font:800 15px Archivo; color:var(--gold); margin-top:12px; letter-spacing:.04em}

/* slots compatibles resaltados (tap jugador → tap posición) */
.disc.hot{cursor:pointer}
.disc.hot .d-circle{border-color:var(--gold); color:var(--gold); border-style:solid;
  background:rgba(255,200,61,.12); box-shadow:0 0 16px rgba(255,200,61,.55); animation:hotpulse 1.1s ease-in-out infinite}
.disc.hot .d-pos{color:var(--gold)}
@keyframes hotpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.pcard.armed{border-color:var(--gold)!important; box-shadow:inset 0 0 0 1.5px var(--gold), 0 0 18px -6px var(--gold)}
.pcard.armed .p-name{color:var(--gold)}

/* toast (reemplaza alert nativo) */
#toasts{position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:100;
  display:flex; flex-direction:column; gap:10px; width:max-content; max-width:92vw}
.toast{display:flex; align-items:center; gap:10px; padding:13px 18px; border-radius:12px;
  background:var(--panel2); border:1px solid var(--line); color:var(--txt); font:700 14px Archivo;
  box-shadow:0 12px 40px -10px rgba(0,0,0,.7); opacity:0; transform:translateY(-12px); transition:.28s cubic-bezier(.2,1,.3,1)}
.toast.in{opacity:1; transform:none}
.toast .toast-ic{font-size:16px}
.toast.error{border-color:var(--acc2); box-shadow:0 12px 40px -10px rgba(255,61,110,.35), inset 0 0 0 1px rgba(255,61,110,.25)}
.toast.error .toast-ic{color:var(--acc2)}

/* ───── móvil chico ───── */
@media(max-width:560px){
  .topbar{padding:12px 16px}
  .wm-fwc,.wm-clash{font-size:18px}
  .screen{padding:20px 14px 50px}
  .draft-top{gap:10px}
  .turn-banner{font-size:15px; width:100%; text-align:center}
  .draft-progress{width:100%; justify-content:center; flex-wrap:wrap}
  .pitch-wrap,.pool{padding:11px}
  .pcard{padding:11px 12px}
  .pcard .p-name{font-size:15px}
  .pcard .p-force{font-size:20px}
  .pool-squad{font-size:17px}
  .home-panel{padding:16px}
  .seg-btn{font-size:13px}
  .room-code{font-size:42px}
  .sb-teams{gap:8px}
  .result-actions .btn{width:100%}
}

/* ───────── ¿QUIÉN JUEGA? (adivinar jugador) ───────── */
.btn-guess{background:var(--panel2); color:var(--txt); border:1px solid var(--line); margin-top:6px; font-weight:800; letter-spacing:.02em}
.btn-guess:hover{border-color:var(--acc); color:var(--acc)}

.guess-wrap{max-width:760px; margin:0 auto; padding:26px 16px 60px; text-align:center}
.guess-back{background:none; border:none; color:var(--mut); font:inherit; font-weight:700; cursor:pointer; float:left; padding:4px 0}
.guess-back:hover{color:var(--txt)}
.guess-title{font-family:'Archivo Black',sans-serif; font-size:clamp(38px,9vw,72px); line-height:.92; letter-spacing:-.02em; margin:6px 0 2px}
.guess-title .hl{color:var(--acc)}
.guess-puzzle{font-family:'Space Mono',monospace; color:var(--gold); font-weight:700; font-size:13px; letter-spacing:.06em}
.guess-sub{color:var(--mut); margin:8px 0 18px; font-size:14px}

.guess-input-wrap{position:relative; max-width:420px; margin:0 auto 18px}
#guessInput{width:100%; padding:14px 16px; font:inherit; font-size:16px; font-weight:600; background:var(--panel); color:var(--txt); border:2px solid var(--line); border-radius:var(--r); outline:none; text-align:center}
#guessInput:focus{border-color:var(--acc)}
#guessInput:disabled{opacity:.5}
.guess-left{font-family:'Space Mono',monospace; font-size:11px; color:var(--dim); margin-top:6px}
.guess-ac{position:absolute; left:0; right:0; top:54px; z-index:30; background:var(--panel2); border:1px solid var(--line); border-radius:12px; overflow-y:auto; max-height:320px; display:none; box-shadow:0 14px 40px rgba(0,0,0,.5)}
.guess-ac.on{display:block}
/* pestañas DIARIO / PRÁCTICA */
.guess-tabs{display:inline-flex; gap:4px; margin:4px auto 10px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:999px}
.guess-tab{background:transparent; border:none; color:var(--mut); padding:7px 18px; border-radius:999px; font:800 12px Archivo; letter-spacing:.08em}
.guess-tab.on{background:var(--acc); color:#04130D}
.g-keep{width:auto; padding:11px 22px; margin-left:10px}
/* selector de selección */
.guess-team-row{max-width:420px; margin:0 auto 10px}
.guess-team{width:100%; padding:11px 14px; font:inherit; font-size:14px; font-weight:700; color:var(--txt); background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238A97A8' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 14px center; border:2px solid var(--line); border-radius:var(--r); outline:none; -webkit-appearance:none; appearance:none; cursor:pointer; text-align:center; text-align-last:center}
.guess-team:focus{border-color:var(--acc)}
.g-ac-it{display:flex; gap:10px; align-items:center; padding:10px 14px; cursor:pointer; text-align:left}
.g-ac-it:hover,.g-ac-it.on{background:rgba(21,245,163,.12)}
.g-ac-team{font-family:'Space Mono',monospace; font-size:10px; color:var(--gold); min-width:34px; font-weight:700}

.guess-board{display:flex; flex-direction:column; gap:6px; overflow-x:auto; padding-bottom:6px}
.g-row{display:grid; grid-template-columns:200px repeat(8,minmax(44px,1fr)); gap:6px; min-width:650px}
.g-head .g-cell{background:none; border:none; color:var(--dim); font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.04em; min-height:0; padding:2px 0}
.g-cell{display:flex; align-items:center; justify-content:center; gap:2px; min-height:62px; border-radius:10px; background:var(--panel2); font-weight:800; font-size:14px; padding:4px; text-align:center; line-height:1.05}
.g-name{justify-content:flex-start; gap:9px; padding-left:9px; font-size:13.5px; font-weight:700; background:var(--panel); overflow:hidden}
.g-name span{white-space:normal; overflow:hidden; line-height:1.12; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.g-face{width:48px; height:48px; border-radius:10px; object-fit:cover; object-position:top center; flex:0 0 auto; background:var(--line)}
.g-val{overflow:hidden; text-overflow:ellipsis}
.g-ar{font-size:11px; opacity:.9}
.g-hit{background:linear-gradient(180deg,#15F5A3,#0fb87a); color:#06140d}
.g-close{background:linear-gradient(180deg,#FFC83D,#e0a91f); color:#1a1205}
.g-miss{background:var(--panel2); color:var(--mut)}
.g-unknown{background:var(--panel2); color:var(--dim)}
.g-correct .g-name{box-shadow:inset 0 0 0 2px var(--acc)}
@keyframes gpop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.g-row:not(.g-head){animation:gpop .18s ease}

.guess-end{margin-top:22px}
.g-endbox{border:1px solid var(--line); border-radius:var(--r); padding:22px; background:var(--panel)}
.g-won{box-shadow:inset 0 0 0 2px var(--acc)}
.g-lost{box-shadow:inset 0 0 0 2px var(--acc2)}
.g-end-t{font-family:'Archivo Black',sans-serif; font-size:26px}
.g-end-s{color:var(--mut); margin:6px 0 14px}
.g-share{width:auto; padding:12px 28px}
.g-end-foot{color:var(--dim); font-size:11px; margin-top:12px; font-family:'Space Mono',monospace}
/* chips de club + liga bajo el nombre */
.g-nmbox{display:flex; flex-direction:column; gap:3px; min-width:0; overflow:hidden}
.g-nm{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.g-chips{display:flex; gap:4px; flex-wrap:wrap}
.g-chip{font:700 10px Space Mono,monospace; padding:2px 6px; border-radius:5px; white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis}
.g-chip.g-hit{background:#15F5A3; color:#06140d}
.g-chip.g-close{background:#FFC83D; color:#1a1205}
.g-chip.g-miss,.g-chip.g-unknown{background:var(--bg); color:var(--mut)}
/* placeholder de cara: iniciales sobre color cuando no hay foto */
.g-face-ph{display:flex; align-items:center; justify-content:center; font:800 16px Archivo; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4)}
@media(max-width:600px){ .g-face-ph{font-size:12px} }
/* pista + stats globales */
.g-hintbtn{margin-left:10px; background:rgba(255,200,61,.14); border:1px solid var(--gold); color:var(--gold); padding:4px 12px; border-radius:999px; font:800 11px Archivo; letter-spacing:.04em}
.g-hinttext{margin-top:6px; color:var(--gold); font:700 12px Space Mono,monospace}
.g-stats{margin:8px 0 14px; padding:10px 14px; background:var(--panel2); border-radius:10px; font:600 13px Archivo; color:var(--mut)}
.g-stats b{color:var(--acc); font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; margin-right:6px}
.g-countdown{color:var(--gold)!important; font-family:'Space Mono',monospace; font-weight:700; letter-spacing:.04em}
/* histórico personal del diario */
.g-mystats{margin:6px 0 14px; padding:14px; background:var(--panel2); border-radius:12px}
.g-ms-title{font:700 11px Space Mono,monospace; letter-spacing:.1em; color:var(--mut); margin-bottom:10px}
.g-ms-nums{display:flex; justify-content:space-around; gap:8px; margin-bottom:12px}
.g-ms-nums>div{display:flex; flex-direction:column; gap:2px}
.g-ms-nums b{font:800 24px "Archivo Black",Archivo,sans-serif; color:var(--txt); line-height:1}
.g-ms-nums span{font:600 10px Archivo; color:var(--dim); text-transform:uppercase; letter-spacing:.04em}
.g-ms-dist{display:flex; flex-direction:column; gap:3px}
.g-bar-row{display:flex; align-items:center; gap:8px}
.g-bar-k{font:700 11px Space Mono,monospace; color:var(--mut); width:10px}
.g-bar{flex:1; display:flex}
.g-bar-fill{background:var(--line); color:var(--txt); font:700 11px Space Mono,monospace; padding:2px 7px; border-radius:4px; text-align:right; min-width:22px}
.g-bar-fill.on{background:var(--acc); color:#06140d}

/* móvil: cada intento en 2 filas — nombre arriba (ancho total), 7 pistas debajo */
@media(max-width:600px){
  .guess-wrap{padding:18px 12px 50px}
  .guess-board{overflow-x:visible}
  .g-row{grid-template-columns:repeat(8,1fr); min-width:0; gap:3px; margin-bottom:8px}
  .g-name{grid-column:1 / -1; min-height:0; padding:7px 10px; font-size:14px; background:var(--panel2); border-radius:10px}
  .g-name span{-webkit-line-clamp:1}
  .g-face{width:32px; height:32px}
  .g-head{gap:4px}
  .g-head .g-name{display:none}            /* el label "JUGADOR" sobra en móvil */
  .g-cell{min-height:48px; font-size:13px; border-radius:8px}
  .g-head .g-cell{min-height:0}
  .g-ar{font-size:10px}
  .guess-title{font-size:clamp(34px,13vw,56px)}
}

/* ───── DUELO 1v1 ───── */
.duel-wrap{max-width:760px; margin:0 auto; padding:26px 16px 60px; text-align:center}
.duel-entry{width:auto; padding:9px 18px; margin:2px auto 0; display:inline-block}
.duel-panel{max-width:420px; margin:18px auto 0; display:flex; flex-direction:column; gap:16px; text-align:left}
.duel-or{text-align:center; color:var(--dim); font:700 11px Space Mono,monospace; letter-spacing:.1em; text-transform:uppercase}
.duel-code{font-family:"Archivo Black",sans-serif; font-size:64px; letter-spacing:.2em; color:var(--acc); margin:14px 0; text-shadow:0 0 30px rgba(21,245,163,.4)}
.duel-scorebar{display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:520px; margin:0 auto 12px; padding:12px 16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r)}
.ds-side{display:flex; flex-direction:column; gap:4px; min-width:0}
.ds-side b{font:800 15px Archivo; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ds-r{text-align:right}
.ds-pips{font-size:13px; color:var(--gold); letter-spacing:2px}
.ds-mid{font:700 11px Space Mono,monospace; color:var(--mut); letter-spacing:.06em; text-align:center; flex:0 0 auto}
.duel-timer-row{display:flex; align-items:center; gap:8px; max-width:520px; margin:0 auto 12px}
.duel-opp{flex:1; padding:8px 14px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); font:700 12px Space Mono,monospace; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.duel-opp span.on{color:var(--acc)} .duel-opp span.dim{color:var(--dim)}
.duel-timer{flex:0 0 auto; font:800 13px "Space Mono",monospace; color:var(--acc); min-width:36px; text-align:right}
.duel-timer.urgent{color:#ff3d6e; animation:dt-blink .5s step-start infinite}
@keyframes dt-blink{50%{opacity:0}}
.duel-banner{margin-top:16px}
.duel-rb{display:inline-flex; flex-direction:column; gap:8px; align-items:center; padding:18px 26px; border-radius:var(--r); border:1px solid var(--line); background:var(--panel)}
.duel-rb b{font:800 20px Archivo}
.duel-rb span{color:var(--mut); font-size:13px}
.duel-rb small{color:var(--dim); font:700 10px Space Mono,monospace; letter-spacing:.08em}
.duel-rb.on{box-shadow:inset 0 0 0 2px var(--acc)} .duel-rb.on b{color:var(--acc)}
.duel-rb.off{box-shadow:inset 0 0 0 2px var(--acc2)} .duel-rb.off b{color:var(--acc2)}
.duel-rb.big{padding:24px 30px} .duel-rb.big b{font-size:26px; font-family:"Archivo Black",sans-serif}
.duel-rb .btn{margin-top:6px}
@media(max-width:600px){ .duel-code{font-size:48px} .ds-side b{font-size:13px} .duel-wrap{padding:18px 12px 50px} }

/* ───── TORNEO ───── */
.btn-tournament{background:linear-gradient(90deg,#7C5CFF,#3DA6FF); color:#0a0820; margin-top:4px;
  box-shadow:0 8px 28px -8px rgba(124,92,255,.5)}
.btn-tournament:hover{filter:brightness(1.08)}
.tour-wrap{max-width:760px; margin:0 auto; text-align:center; position:relative}
.tour-back{position:absolute; left:0; top:-6px; background:none; border:none; color:var(--mut);
  font:700 13px Archivo; letter-spacing:.05em}
.tour-back:hover{color:var(--acc)}
.tour-entry-sub{color:var(--mut); margin:8px 0 18px; font-size:15px}
.tour-panel{display:flex; flex-direction:column; gap:16px; text-align:left}
.tour-count{font:700 13px Space Mono,monospace; color:var(--mut); letter-spacing:.06em; margin-bottom:14px}
.tour-players{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px}
.tour-chip{background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 16px;
  font:800 14px Archivo}
.tour-chip.me{border-color:var(--acc); color:var(--acc)}
.tour-chip.empty{opacity:.4; border-style:dashed; color:var(--dim)}
.tour-hint{color:var(--mut); margin-top:14px; font-size:14px}
.tour-status{font:700 14px Archivo; color:var(--mut); margin:6px 0 18px}
.tour-status.win{color:var(--gold); font-size:18px}
.tour-status.out{color:var(--acc2)}
.tour-champ{font-family:"Archivo Black",sans-serif; font-size:clamp(28px,6vw,48px); color:var(--gold);
  text-shadow:0 0 40px rgba(255,200,61,.5); margin:8px 0}
.bracket{display:flex; gap:18px; overflow-x:auto; padding:8px 2px; justify-content:flex-start}
@media(max-width:680px){ .bracket{flex-direction:column; align-items:stretch} }
.brk-round{display:flex; flex-direction:column; gap:14px; min-width:200px; justify-content:center}
.brk-rlabel{font:700 11px Archivo; letter-spacing:.2em; color:var(--mut); text-transform:uppercase; text-align:center; margin-bottom:2px}
.brk-match{background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.brk-match.mine{border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset}
.brk-team{padding:11px 14px; font:700 14px Archivo; text-align:left; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; color:var(--txt)}
.brk-team:last-child{border-bottom:none}
.brk-team.won{color:var(--acc)}
.brk-team.me{background:rgba(21,245,163,.05)}
.brk-team .tbd{color:var(--dim)}

/* ───── TANDA DE PENALTIS INTERACTIVA ───── */
.pen-board{text-align:center}
.pen-score{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; position:relative; margin:8px 0 16px}
.pen-team{display:flex; flex-direction:column; gap:8px; align-items:center}
.pen-name{font:800 15px Archivo; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pen-big{font-family:"Archivo Black",sans-serif; font-size:clamp(34px,8vw,56px); line-height:1}
.pen-big .dash{color:var(--acc); margin:0 .1em}
.pk-row{display:flex; gap:5px; flex-wrap:wrap; justify-content:center; max-width:140px}
.pk-row .pk{font-size:15px; line-height:1}
.pk-row .pk.goal{color:var(--acc)} .pk-row .pk.miss{color:var(--acc2)} .pk-row .pk.pend{color:var(--dim)}
/* portería de 3 zonas */
/* escena de penalti animada (trayectoria del balón + estirada del portero) */
.pk-scene{position:relative; max-width:360px; height:212px; margin:14px auto 4px; overflow:hidden; border-radius:8px;
  background:linear-gradient(180deg,#0c1230 0%,#0e2138 46%,#0d3322 47%,#0a2a1c 100%)}
.pk-scene::after{content:""; position:absolute; left:0; right:0; bottom:0; height:54%;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 16px, transparent 16px 32px)}
.pk-goal{position:absolute; left:50%; top:8px; width:80%; height:54%; transform:translateX(-50%);
  border:4px solid #fff; border-bottom:none; border-radius:5px 5px 0 0; box-shadow:0 0 0 1px rgba(0,0,0,.4);
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 9px, transparent 9px 18px),
            repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 9px, transparent 9px 18px)}
.pk-net{position:absolute; inset:0}
.pk-spot{position:absolute; left:50%; bottom:14px; width:10px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.45); transform:translateX(-50%)}
.pk-keeper{position:absolute; left:50%; top:38%; z-index:2; font-size:34px; line-height:1;
  transform:translate(-50%,-50%); filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.pk-ball{position:absolute; left:50%; top:88%; z-index:3; font-size:30px; line-height:1;
  transform:translate(-50%,-50%) scale(1); filter:drop-shadow(0 4px 5px rgba(0,0,0,.55))}
.pk-ball.rest{top:84%}
/* estados congelados (re-render sin volver a animar) */
.pk-scene.froze .pk-keeper{transform:translate(-50%,-50%) translateX(var(--kx)) translateY(-6px) rotate(var(--kr))}
.pk-scene.froze .pk-ball{left:var(--tx); top:var(--ty); transform:translate(-50%,-50%) scale(var(--bs))}
.pk-scene.froze.r-save .pk-ball{left:var(--rx); top:var(--ry); transform:translate(-50%,-50%) scale(.82) rotate(140deg)}
.pk-scene.froze.r-miss .pk-ball{opacity:.5}
/* animaciones */
.pk-scene.play .pk-keeper{animation:pk-dive .5s cubic-bezier(.25,.6,.4,1) forwards}
.pk-scene.play.r-goal .pk-ball{animation:pk-fly .5s cubic-bezier(.28,.7,.5,1) forwards}
.pk-scene.play.r-miss .pk-ball{animation:pk-fly .55s ease-in forwards}
.pk-scene.play.r-save .pk-ball{animation:pk-save .72s ease-out forwards}
.pk-scene.play.r-goal .pk-goal{animation:pk-shake .42s .42s cubic-bezier(.36,.07,.19,.97)}
.pk-scene.play.r-goal{box-shadow:inset 0 0 40px -6px rgba(21,245,163,.55)}
.pk-scene.play.r-save,.pk-scene.play.r-miss{box-shadow:inset 0 0 40px -6px rgba(255,61,110,.5)}
@keyframes pk-fly{
  0%{left:50%; top:88%; transform:translate(-50%,-50%) scale(1) rotate(0)}
  100%{left:var(--tx); top:var(--ty); transform:translate(-50%,-50%) scale(var(--bs)) rotate(540deg)} }
@keyframes pk-save{
  0%{left:50%; top:88%; transform:translate(-50%,-50%) scale(1) rotate(0)}
  46%{left:var(--tx); top:var(--ty); transform:translate(-50%,-50%) scale(var(--bs)) rotate(260deg)}
  56%{left:var(--tx); top:var(--ty); transform:translate(-50%,-50%) scale(calc(var(--bs)*.82)) rotate(280deg)}
  100%{left:var(--rx); top:var(--ry); transform:translate(-50%,-50%) scale(.82) rotate(120deg)} }
@keyframes pk-dive{
  0%{transform:translate(-50%,-50%) translateX(0) translateY(0) rotate(0)}
  40%{transform:translate(-50%,-50%) translateX(calc(var(--kx)*.62)) translateY(-16px) rotate(calc(var(--kr)*.55))}
  100%{transform:translate(-50%,-50%) translateX(var(--kx)) translateY(-6px) rotate(var(--kr))} }
@keyframes pk-shake{ 10%,90%{transform:translateX(-51%)} 30%,70%{transform:translateX(-47%)} 50%{transform:translateX(-53%)} }
.pen-res{display:block; font-family:"Archivo Black"; font-size:26px; margin:6px 0; animation:scpop .35s ease}
.pen-res.goal{color:var(--acc)} .pen-res.save{color:var(--b)} .pen-res.miss{color:var(--acc2)}
.pen-turn{font:800 14px Archivo; color:var(--mut); letter-spacing:.04em; margin-top:6px}
.pen-action{max-width:480px; margin:18px auto 0; text-align:center}
.pen-prompt{font:800 18px Archivo; margin-bottom:14px}
.pen-dirs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.pen-dir{display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:18px 8px; color:var(--txt);
  font-size:26px; transition:.12s}
.pen-dir small{font:700 11px Archivo; letter-spacing:.08em; color:var(--mut)}
.pen-dir:hover:not(:disabled){border-color:var(--acc); color:var(--acc); transform:translateY(-2px)}
.pen-dir:hover:not(:disabled) small{color:var(--acc)}
.pen-dir:disabled{opacity:.35}
.pen-wait{font:700 15px Space Mono,monospace; color:var(--mut); padding:18px}
.pen-final{font-family:"Archivo Black"; font-size:clamp(24px,5vw,38px); margin:10px 0 16px}
.pen-final.win{color:var(--gold); text-shadow:0 0 36px rgba(255,200,61,.5)}
.pen-final.lose{color:var(--mut)}
.pen-timer{font:800 13px Space Mono,monospace; color:var(--acc); letter-spacing:.02em}
.pen-timer.urgent{color:var(--acc2); animation:tpulse .8s ease-in-out infinite}

/* ───── CAMPAÑA (partido por decisiones) ───── */
.btn-campaign{background:linear-gradient(90deg,#FF8A3D,#FF3D6E); color:#1a0a0f; margin-top:4px;
  box-shadow:0 8px 28px -8px rgba(255,138,61,.5)}
.btn-campaign:hover{filter:brightness(1.08)}
.camp-sb .camp-min{position:relative; font:700 13px Space Mono,monospace; color:var(--mut); letter-spacing:.06em; margin-top:10px}
.camp-log{max-width:560px; margin:14px auto 0; display:flex; flex-direction:column; gap:6px; max-height:34vh; overflow:auto}
.cl-line{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:9px 13px;
  font:600 14px Archivo; color:var(--txt); text-align:left}
.cl-line.muted{color:var(--mut); text-align:center; border-style:dashed}
.cl-line.goal{border-color:var(--acc); color:var(--acc)}
.cl-line.concede{border-color:var(--acc2); color:var(--acc2)}
.cl-line.last{animation:tlin .35s ease}
.camp-decide{max-width:560px; margin:16px auto 0; text-align:center}
.cd-title{font:800 20px Archivo; letter-spacing:.02em}
.cd-sub{color:var(--mut); font-size:14px; margin:4px 0 14px}
.cd-opts{display:grid; gap:10px}
.cd-opts.ment{grid-template-columns:repeat(3,1fr)}
.cd-opt{display:flex; flex-direction:column; align-items:center; gap:3px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:14px 12px; color:var(--txt); transition:.12s}
.cd-opt b{font:800 15px Archivo}
.cd-opt small{font:600 11px Archivo; color:var(--mut)}
.cd-opt .cd-prob{font:800 14px Space Mono,monospace; color:var(--acc)}
.cd-opt:hover:not(:disabled){border-color:var(--acc); transform:translateY(-2px)}
.cd-opt.def:hover:not(:disabled){border-color:var(--b)}
.cd-opt.safe{color:var(--mut); font:700 14px Archivo}
.cd-opt:disabled{opacity:.4}

/* pool bloqueado cuando no es tu turno */
.pool.locked{position:relative}
.pool.locked .pool-list, .pool.locked .pool-sub, .pool.locked .reroll-box{opacity:.38; filter:grayscale(.55); pointer-events:none}
.pool.locked::after{content:attr(data-wait); position:absolute; top:62px; left:50%; transform:translateX(-50%); z-index:2;
  font:800 13px Archivo; letter-spacing:.08em; color:var(--txt); background:var(--panel2); padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); white-space:nowrap; box-shadow:0 6px 20px -6px rgba(0,0,0,.6)}

/* campaña: impulso / roja / gran ocasión */
.camp-mom{position:relative; display:flex; align-items:center; gap:10px; max-width:300px; margin:10px auto 0}
.camp-mom span{font:700 10px Archivo; letter-spacing:.16em; color:var(--mut)}
.mom-bar{flex:1; height:6px; background:var(--line); border-radius:4px; overflow:hidden}
.mom-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--acc2),var(--gold),var(--acc)); transition:width .5s ease}
.camp-red{color:var(--acc2); font-weight:800}
.cd-title.big{color:var(--gold); text-shadow:0 0 26px rgba(255,200,61,.5)}
.cd-opt.big:hover:not(:disabled){border-color:var(--gold)}
.cd-opt.big:hover:not(:disabled) b{color:var(--gold)}

/* móvil: campaña + tanda */
@media(max-width:560px){
  .cd-opts.ment{grid-template-columns:1fr}        /* mentalidad: apilada (no apretada) */
  .cd-opt{padding:13px 12px}
  .cd-title{font-size:18px} .cd-title.big{font-size:19px}
  .camp-log{max-height:30vh}
  .camp-mom{max-width:100%}
  .goal-mouth{height:104px; gap:3px}
  .gm-zone{font-size:26px}
  .pen-dir{padding:14px 6px; font-size:22px}
  .pen-dir small{font-size:10px}
  .pen-name{max-width:92px; font-size:13px}
  .pen-big{font-size:clamp(30px,11vw,46px)}
  .pk-row{max-width:108px}
}

/* móvil: turno + tiempo del draft MUY visibles */
@media(max-width:560px){
  .draft-top{flex-direction:column; gap:8px; margin-bottom:14px}
  .turn-banner{order:1; width:100%; padding:12px 16px; text-align:center}
  .turn-banner b{font-size:19px}
  .turn-banner span{font-size:13px}
  .turn-banner.mine{box-shadow:0 0 0 2px var(--acc) inset, 0 8px 24px -10px rgba(21,245,163,.5)}
  .turn-timer{order:2; width:100%; min-width:0; font-size:24px; padding:11px; letter-spacing:.06em}
  .turn-timer.urgent{box-shadow:0 0 0 2px var(--acc2) inset}
  .draft-progress{order:3; width:100%; justify-content:center}
}

/* modo penaltis 1v1 */
.btn-penalties{background:linear-gradient(135deg,#2a1830,#3a1d2a);border:1px solid #ff5db1;color:#ffd9ec}
.btn-penalties:hover{border-color:#ff8ccb;box-shadow:0 8px 24px -12px rgba(255,93,177,.6)}
.pen-sub{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--mut);margin-top:2px}
@media(max-width:560px){ .pen-sub{font-size:10px} }

/* banda de ronda + atribución de tirador en la tanda */
.pk-round{font:800 13px Archivo; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin:2px 0 -2px}
.pk-round b{color:var(--txt)}
.pen-vs{font:700 12px "Space Mono",monospace; color:var(--mut); letter-spacing:.02em}
.pen-vs b{color:var(--acc)}
.pen-team.active .pen-name{color:var(--acc)}
.pen-team.active{position:relative}
.pen-team.active::before{content:"⚽"; position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:12px; animation:scpop .3s ease}
@media(max-width:560px){ .pk-scene{height:172px} .pk-keeper{font-size:28px} .pk-ball{font-size:26px} .pk-round{font-size:12px} }

/* penaltis: rol claro (tiras/paras) + pausa de revelación */
.pen-role{font-family:"Archivo Black",sans-serif; font-size:clamp(22px,6vw,30px); letter-spacing:.02em; margin-bottom:10px;
  padding:8px 14px; border-radius:12px; display:inline-block; animation:scpop .25s ease}
.pen-role.shoot{color:#04130D; background:linear-gradient(135deg,var(--acc),#0bd089); box-shadow:0 8px 26px -10px rgba(21,245,163,.7)}
.pen-role.keep{color:#04101e; background:linear-gradient(135deg,var(--b),#1f7fd6); box-shadow:0 8px 26px -10px rgba(61,166,255,.7)}
.pen-reveal{font-family:"Archivo Black",sans-serif; font-size:clamp(24px,7vw,34px); animation:scpop .3s ease}
.pen-reveal.r-goal{color:var(--acc)} .pen-reveal.r-save{color:var(--b)} .pen-reveal.r-miss{color:var(--acc2)}
.pen-reveal b{opacity:.9}
.pen-next{margin-top:8px; font:700 12px "Space Mono",monospace; letter-spacing:.1em; color:var(--mut); text-transform:uppercase; animation:tpulse 1s ease-in-out infinite}

/* campo 2D animado del reveal */
.pitch-cv{width:100%; display:block; border-radius:10px; margin:12px 0 4px;
  border:1px solid var(--line); box-shadow:inset 0 0 30px -10px rgba(0,0,0,.6)}
@media(max-width:560px){ .pitch-cv{margin:10px 0 2px} }

/* ───── HOME reorganizado: secciones + tarjetas de modo ───── */
.home-actions{display:flex; flex-direction:column; gap:22px; margin-top:4px}
.home-sec{display:flex; flex-direction:column; gap:11px}
.home-sec-h{font:800 11px Archivo; letter-spacing:.22em; color:var(--mut); text-transform:uppercase;
  display:flex; align-items:center; gap:12px}
.home-sec-h::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent)}
.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mode-grid .mode-card:last-child:nth-child(odd){grid-column:1 / -1}
.mode-card{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line);
  border-radius:12px; padding:13px 15px; transition:transform .08s, border-color .15s, box-shadow .15s}
.mode-card:hover{transform:translateY(-1px)}
.mode-card:active{transform:translateY(1px)}
.mc-ic{font-size:24px; line-height:1; margin-bottom:3px}
.mc-t{font:800 14px Archivo; letter-spacing:.02em; color:var(--txt)}
.mc-s{font:600 11px Archivo; color:var(--mut)}
.mode-card.pen:hover{border-color:#ff5db1; box-shadow:0 10px 26px -14px rgba(255,93,177,.6)}
.mode-card.tour:hover{border-color:var(--b); box-shadow:0 10px 26px -14px rgba(61,166,255,.6)}
.mode-card.daily:hover{border-color:var(--gold); box-shadow:0 10px 26px -14px rgba(255,200,61,.55)}
.mode-card.camp:hover{border-color:var(--acc2); box-shadow:0 10px 26px -14px rgba(255,61,110,.55)}
.mode-card.guess:hover{border-color:var(--acc); box-shadow:0 10px 26px -14px rgba(21,245,163,.5)}

/* hoja de configuración (modo + formación) */
.cfg-overlay{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(4,7,11,.72); backdrop-filter:blur(6px)}
.cfg-overlay[hidden]{display:none}
.cfg-card{width:100%; max-width:440px; background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:18px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7); animation:cfgIn .18s ease}
@keyframes cfgIn{from{opacity:0; transform:translateY(10px) scale(.98)}to{opacity:1; transform:none}}
.cfg-title{font:800 16px Archivo; letter-spacing:.04em; text-transform:uppercase; color:var(--txt)}
.cfg-actions{display:flex; gap:10px; margin-top:2px}
.cfg-actions .btn{flex:1}

/* ───── campaña: preguntas SOBRE el campo (overlay) ───── */
.camp-stage{position:relative; margin:12px 0 8px; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.camp-stage .pitch-cv{margin:0; border:none; border-radius:0; display:block}
.camp-stage-hud{position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:7px 12px; pointer-events:none; background:linear-gradient(180deg,rgba(8,10,15,.8),transparent)}
.csh-min{font:800 12px "Space Mono",monospace; letter-spacing:.06em; color:var(--txt)}
.csh-men{font:700 10px Archivo; letter-spacing:.06em; color:#ff3d6e; background:rgba(255,61,110,.15); border-radius:4px; padding:2px 6px; pointer-events:none}
.camp-stage-hud .mom-wrap{display:flex; align-items:center; gap:7px; font:800 9px Archivo; letter-spacing:.14em; color:var(--mut); text-transform:uppercase}
.camp-stage-hud .mom-bar{width:96px; height:6px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden}
.camp-stage-hud .mom-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--acc2),var(--gold),var(--acc))}
.camp-deck{position:absolute; left:0; right:0; bottom:0; padding:18px 12px 12px; text-align:center;
  background:linear-gradient(180deg,transparent,rgba(8,10,15,.6) 28%,rgba(8,10,15,.96))}
.camp-deck .cd-title{font-family:"Archivo Black",sans-serif; font-size:clamp(15px,4.4vw,21px); margin-bottom:1px}
.camp-deck .cd-title.big{color:var(--gold)}
.camp-deck .cd-sub{font-size:12px; color:var(--mut); margin-bottom:9px}
.camp-deck .cd-opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; max-width:560px; margin:0 auto}
.camp-deck .cd-opts.ment{grid-template-columns:repeat(3,1fr)}
.camp-deck .cd-opt{padding:10px 8px; border-radius:10px; border:1px solid var(--line); background:rgba(20,26,35,.92);
  color:var(--txt); font:800 13px Archivo; display:flex; flex-direction:column; align-items:center; gap:2px; transition:.12s}
.camp-deck .cd-opt:hover{border-color:var(--acc); background:rgba(21,245,163,.1)}
.camp-deck .cd-opt small{font:600 10px Archivo; color:var(--mut); text-transform:none; letter-spacing:0}
.camp-deck .cd-opt .cd-prob{font:700 11px "Space Mono",monospace; color:var(--acc)}
.camp-deck .cd-opt.safe{border-style:dashed; color:var(--mut)}
.camp-deck .cd-opt.big{border-color:rgba(255,200,61,.5)}
@media(max-width:560px){
  .camp-deck{padding:14px 8px 9px}
  .camp-deck .cd-opt{padding:8px 5px; font-size:12px}
  .camp-stage-hud .mom-bar{width:70px}
}

/* panel de control del ataque arcade (sobre el campo) */
.arc-deck .cd-title.big{color:var(--acc); text-shadow:0 0 24px rgba(21,245,163,.4)}
.arc-deck .cd-opt b{font-size:13px}
.arc-deck .cd-opt small{color:var(--acc)}

/* charla técnica pre-partido (carrera) */
.camp-talk{text-align:center}
.talk-opp{font:800 20px Archivo; margin:6px 0 4px} .talk-opp b{color:var(--acc)}
.talk-ovr{font:700 12px "Space Mono",monospace; color:var(--mut)}
.talk-stakes{font:600 14px Archivo; color:var(--gold); margin-bottom:14px; font-style:italic}
.talk-morale{display:flex; align-items:center; justify-content:center; gap:10px; font:800 10px Archivo; letter-spacing:.14em; color:var(--mut); margin-bottom:18px}
.mom-bar.morale{width:160px; height:7px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden}
.mom-bar.morale i{display:block; height:100%; background:linear-gradient(90deg,var(--acc2),var(--gold),var(--acc))}

/* sorteo de grupo + tabla de clasificación (formato Mundial) */
.grp-draw{display:flex; flex-direction:column; gap:8px; max-width:380px; margin:16px auto}
.grp-team{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px;
  background:var(--bg); border:1px solid var(--line); border-radius:10px; font:800 15px Archivo}
.grp-team b{font:700 12px "Space Mono",monospace; color:var(--mut)}
.grp-team.me{border-color:var(--acc); background:rgba(21,245,163,.08)} .grp-team.me b{color:var(--acc)}
.grp-table{width:100%; max-width:420px; margin:14px auto; border-collapse:collapse; font:700 13px Archivo}
.grp-table th{font:700 10px Archivo; letter-spacing:.1em; color:var(--mut); text-transform:uppercase; padding:6px 8px; text-align:center}
.grp-table td{padding:9px 8px; text-align:center; border-top:1px solid var(--line)}
.grp-table td.gt-name{text-align:left; font-weight:800}
.grp-table tr.qual td{background:rgba(21,245,163,.05)}
.grp-table tr.me td{color:var(--acc)} .grp-table tr.me td.gt-name{color:var(--acc)}

/* terceros de grupo: clasificación de los 12 terceros */
.thirds-section{max-width:420px; margin:18px auto 0}
.thirds-section h4{font:700 10px Archivo; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); text-align:center; margin:0 0 8px}
.thirds-section table{width:100%; border-collapse:collapse; font:700 12px Archivo}
.thirds-section th{font:700 9px Archivo; letter-spacing:.1em; color:var(--mut); text-transform:uppercase; padding:4px 6px; text-align:center}
.thirds-section td{padding:7px 6px; text-align:center; border-top:1px solid var(--line); font-size:11px}
.thirds-section td.t3-name{text-align:left; font-size:12px}
.thirds-section tr.t3-in td{background:rgba(21,245,163,.04)}
.thirds-section tr.t3-in td.t3-name::before{content:'✓ '; color:var(--acc)}
.thirds-section tr.t3-me td{color:var(--acc)}
.thirds-section tr.t3-out td{color:var(--dim)}

/* bracket de eliminatorias (camino del jugador) */
.ko-path{max-width:480px; margin:18px auto 0; display:flex; flex-direction:column; gap:6px}
.ko-path h4{font:700 10px Archivo; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); margin:0 0 8px; text-align:center}
.kp-round{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg)}
.kp-round.current{border-color:var(--acc); background:rgba(21,245,163,.06)}
.kp-round.done{opacity:.65}
.kp-label{font:700 9px Archivo; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); min-width:68px}
.kp-round.current .kp-label{color:var(--acc)}
.kp-tie{display:flex; align-items:center; gap:8px; flex:1; overflow:hidden}
.kp-team{font:700 12px Archivo; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.kp-team.me{color:var(--acc)}
.kp-team.won{font-weight:800}
.kp-team.a{text-align:right}
.kp-team.b{text-align:left}
.kp-score{font:700 12px "Space Mono",monospace; color:var(--mut); min-width:36px; text-align:center; white-space:nowrap}
.kp-round.current .kp-score{color:var(--gold)}

/* eliminatorias: panel completo de la ronda actual */
.ko-round-panel{max-width:480px; margin:14px auto 0}
.ko-round-panel h4{font:700 10px Archivo; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); text-align:center; margin:0 0 8px}
.ko-ties-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px}
@media(max-width:500px){.ko-ties-grid{grid-template-columns:1fr}}
.ko-tie-card{padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); font:700 11px Archivo}
.ko-tie-card.mine{border-color:var(--acc); background:rgba(21,245,163,.06)}
.ko-tie-row{display:flex; align-items:center; justify-content:space-between; gap:4px}
.ko-tie-name{flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px}
.ko-tie-name.won{color:var(--acc); font-weight:800}
.ko-tie-name.me{color:var(--acc)}
.ko-tie-vscore{font:700 10px "Space Mono",monospace; color:var(--mut); min-width:30px; text-align:center}

/* pausa de descanso (HT) sobre el campo */
.ht-overlay{position:absolute; inset:0; background:rgba(10,14,20,.88); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border-radius:inherit; z-index:10}
.ht-score{font-family:"Archivo Black",sans-serif; font-size:clamp(28px,8vw,48px); letter-spacing:-.02em}
.ht-label{font:700 10px Archivo; letter-spacing:.24em; text-transform:uppercase; color:var(--mut); margin-bottom:6px}
.ht-opts{display:flex; gap:8px; padding:0 12px}
.ht-opt{flex:1; padding:10px 6px; border-radius:10px; border:1px solid var(--line); background:rgba(20,26,35,.92); cursor:pointer; font:800 11px Archivo; letter-spacing:.12em; text-transform:uppercase; color:var(--fg); transition:border-color .15s,background .15s; display:flex; flex-direction:column; align-items:center; gap:3px}
.ht-opt small{font:600 9px Archivo; color:var(--mut); text-transform:none; letter-spacing:0}
.ht-opt:hover{border-color:var(--acc); background:rgba(21,245,163,.1)}