*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#051510;color:white;font-family:Arial,Helvetica,sans-serif}.stage{height:100vh;width:100vw;display:flex;flex-direction:column;background:radial-gradient(ellipse at center,#174e3b,#061b15 65%,#03100d)}header{height:17%;display:grid;grid-template-columns:1fr 25% 1fr;border-bottom:3px solid #2abf83;z-index:2;background:linear-gradient(90deg,#0b3853,#07261d 48%,#47212c)}.teamhead{padding:1.5vh 2vw;min-width:0;display:flex;flex-direction:column;justify-content:center}.teamhead.red{text-align:right}.tag{font-size:clamp(10px,1vw,20px);letter-spacing:.3em;font-weight:800;color:#8ee1ff}.red .tag{color:#ff9eae}h1{font-size:clamp(17px,2.25vw,45px);margin:.3vh 0 1vh;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bans{display:flex;gap:.4vw;justify-content:flex-start}.red .bans{justify-content:flex-end}.ban{width:3vw;height:3vw;max-height:5vh;background:#16352d;border:1px solid #52756b;overflow:hidden;filter:grayscale(1)}.ban img{width:100%;height:100%;object-fit:cover}.score{background:#061a16;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:.25vh;border-left:2px solid #2b9c73;border-right:2px solid #2b9c73}.brand{color:#69e8ac;font-weight:900;letter-spacing:.15em;font-size:clamp(10px,1.2vw,24px)}#match{font-weight:700;font-size:clamp(10px,.9vw,18px)}#clock{font-size:clamp(34px,5.3vw,100px);font-weight:900;line-height:1}#phase{font-size:clamp(10px,1vw,22px);letter-spacing:.1em;color:#b2f7d2}#turn{font-size:clamp(9px,.75vw,16px);color:#9bb8aa}.arena{flex:1;min-height:0;display:grid;grid-template-columns:21% 58% 21%}.picks{display:flex;flex-direction:column;min-height:0;z-index:1}.slot{position:relative;flex:1;min-height:0;overflow:hidden;background:#0b2c28;border-bottom:2px solid #26765b;transition:flex .65s ease,filter .3s ease}.picks.blue .slot{border-right:4px solid #50c7ff}.picks.red .slot{border-left:4px solid #ef6c83}.slot.active{flex:2.25;box-shadow:inset 0 0 0 3px #a9ffc5;z-index:2}.slot img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:brightness(.82)}.slot.active img{filter:brightness(1.1)}.slot .gradient{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.92),transparent 70%)}.slot .text{position:absolute;bottom:6%;left:5%;right:5%;display:flex;flex-direction:column;text-shadow:0 2px 4px black}.slot strong{font-size:clamp(12px,1.55vw,31px);text-transform:uppercase}.slot small{font-size:clamp(10px,.9vw,18px);color:#c2d9ce}.slot.empty .text{opacity:.6}.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse,#125640,#071e18 80%)}.heroart{position:absolute;inset:0;background-size:cover;background-position:center 25%;transition:background-image .25s ease;filter:brightness(.75)}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#04150ff5,transparent 55%,#0317117a)}.herooverlay{position:absolute;bottom:8%;left:5%;right:5%;text-align:center;z-index:1;text-shadow:0 3px 12px black}.eyebrow{color:#72e7b0;font-size:clamp(10px,1.1vw,24px);letter-spacing:.25em;font-weight:800}h2{font-size:clamp(24px,3.8vw,76px);line-height:1;margin:1.5vh 0;text-transform:uppercase}.heroSub{font-size:clamp(12px,1.2vw,25px);letter-spacing:.12em}footer{height:5%;background:#03130f;border-top:2px solid #319b70;display:flex;align-items:center;justify-content:space-between;padding:0 2vw;color:#b5e5ce;font-weight:700;font-size:clamp(9px,.85vw,18px);letter-spacing:.15em}@media(max-width:700px){header{height:20%}.arena{grid-template-columns:24% 52% 24%}.slot strong{font-size:11px}.slot small{font-size:9px}}

/* V5 · Cabecera compacta y jerarquía broadcast */
header{height:12.5%;grid-template-columns:minmax(0,1fr) 21% minmax(0,1fr);border-bottom-width:2px}
.teamhead{padding:.5vh 1.8vw;justify-content:center;gap:.15vh}
.tag{font-size:clamp(9px,.7vw,14px);letter-spacing:.22em}
h1{font-size:clamp(16px,1.65vw,33px);margin:.2vh 0 .5vh;font-weight:900}
.bans{gap:.32vw}.ban{width:2.4vw;height:2.4vw;max-height:4.4vh;position:relative;border-color:#52736a}
.ban.banned img{filter:grayscale(1) brightness(.57)}
.ban-cross{position:absolute;inset:0;display:grid;place-items:center;color:#ff626e;font-size:clamp(18px,2.4vw,46px);font-weight:900;line-height:1;text-shadow:0 1px 4px #000,0 0 9px #a80000;transform:rotate(-7deg)}
.score{gap:0;padding:.3vh 0}.brand{font-size:clamp(9px,.9vw,18px);letter-spacing:.11em}
#match{font-size:clamp(9px,.7vw,14px);font-weight:600;color:#b6d9cb}
#clock{font-size:clamp(32px,3.3vw,66px);line-height:.94}
#phase{font-size:clamp(9px,.8vw,16px)}#turn{font-size:clamp(8px,.62vw,12px)}
.slot{transition:flex .8s cubic-bezier(.2,.85,.25,1),filter .4s ease}
.slot.active{flex:2.1;animation:active-glow 1.8s ease-in-out infinite alternate}
@keyframes active-glow{from{box-shadow:inset 0 0 0 2px #7bf5b1}to{box-shadow:inset 0 0 0 4px #dcffec,0 0 18px #50d9a355}}
.heroart{opacity:1;transform:scale(1);transition:opacity .55s ease,transform 1.2s ease}
.heroart.reveal{animation:hero-reveal .9s cubic-bezier(.16,.8,.2,1) both}
@keyframes hero-reveal{0%{opacity:.15;transform:scale(1.13);filter:brightness(1.35)}45%{opacity:.9}100%{opacity:1;transform:scale(1);filter:brightness(.75)}}
.hero-transition{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;overflow:hidden}
.hero-transition span{width:50%;height:100%;background:linear-gradient(90deg,#041e18,#00794c);transform:translateX(-102%)}
.hero-transition span+span{background:linear-gradient(90deg,#00794c,#041e18);transform:translateX(102%)}
.hero-transition.play span{animation:curtain-left .95s ease-in-out both}
.hero-transition.play span+span{animation:curtain-right .95s ease-in-out both}
@keyframes curtain-left{0%{transform:translateX(-102%)}38%,58%{transform:translateX(0)}100%{transform:translateX(-102%)}}
@keyframes curtain-right{0%{transform:translateX(102%)}38%,58%{transform:translateX(0)}100%{transform:translateX(102%)}}
@media(max-width:700px){header{height:16%}.ban{width:3.4vw;height:3.4vw}.tag{font-size:8px}}

/* V6 · Logos/nombres prioritarios, bans al pie, centro neutro */
header{height:14.5%;grid-template-columns:minmax(0,1fr) 19% minmax(0,1fr)}
.teamhead{padding:1vh 2vw}.teamhead h1{font-size:clamp(20px,2.25vw,44px);margin:.5vh 0}
.score #clock{font-size:clamp(30px,3.5vw,70px)}
.banbar{height:7%;background:#061b16;border-top:2px solid #218761;display:flex;justify-content:space-between;align-items:center;padding:0 2vw;gap:1vw}
.ban-group{display:flex;align-items:center;gap:1vw;color:#87d7b2;font-weight:800;letter-spacing:.12em;font-size:clamp(9px,.85vw,17px)}
.ban{width:clamp(26px,2.5vw,52px);height:clamp(26px,2.5vw,52px);max-height:5.3vh}
.ban-cross{font-size:clamp(22px,2.6vw,50px)}
.hero{background:radial-gradient(ellipse at center,#10523d,#031c16 80%)}
.heroart{opacity:0!important;transition:opacity .45s ease}
.hero.featured .heroart{opacity:1!important}
.herooverlay{opacity:0;transition:opacity .3s ease}
.hero.featured .herooverlay{opacity:1}
.neutral-brand{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5vh;color:#66e2ac;letter-spacing:.28em;font-size:clamp(18px,2.2vw,42px);font-weight:900;opacity:.5;transition:opacity .4s ease;text-align:center}
.neutral-brand small{font-size:clamp(9px,.9vw,16px);color:#c0e6d2;letter-spacing:.2em}
.neutral-diamond{font-size:clamp(45px,7vw,130px);line-height:1}
.hero.featured .neutral-brand{opacity:0}
.heroart.reveal{animation:none}
.hero.featured .heroart.reveal{animation:hero-reveal .9s cubic-bezier(.16,.8,.2,1) both}
.slot.active{animation:active-glow 1.8s ease-in-out infinite alternate}
@media(max-width:700px){header{height:17%}.banbar{height:8%}.ban-group{gap:3px}.ban{width:19px;height:24px}.teamhead h1{font-size:15px}}

/* V7: sin logo oficial, sin roles, centro limpio y picks centrados */
.brand{font-size:clamp(10px,.9vw,17px);letter-spacing:.24em}
.hero{background:radial-gradient(ellipse at 50% 50%,#0c4536 0%,#06281f 50%,#031510 100%)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 15%,#ffffff08 30%,transparent 45%),repeating-linear-gradient(135deg,transparent 0 80px,#4fffc008 81px 82px,transparent 83px 165px);pointer-events:none}
.neutral-brand{opacity:1;pointer-events:none}
.neutral-lines{width:36%;height:1px;background:linear-gradient(90deg,transparent,#3cb98a66,transparent);position:relative}
.neutral-lines::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid #3cb98a66;background:#082b21}
.slot img{object-fit:cover;object-position:50% 36%;transform:scale(1.01)}
.slot .text{bottom:7%;left:5%;right:5%;text-align:left}
.slot strong{font-size:clamp(12px,1.35vw,27px)}
.slot.active{flex:1.65}
.heroart{background-position:50% 32%;background-size:cover}
.hero.featured .heroart.reveal{animation:champ-in 1.05s cubic-bezier(.15,.8,.2,1) both}
@keyframes champ-in{0%{opacity:0;transform:scale(1.13);filter:brightness(1.4) blur(8px)}65%{opacity:1;filter:brightness(.9) blur(0)}100%{opacity:1;transform:scale(1);filter:brightness(.76) blur(0)}}
.herooverlay{bottom:8%}
.ban.banned img{filter:grayscale(1) brightness(.48)}
.ban-cross{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(20px,2.5vw,48px);color:#e7e9e6;text-shadow:0 1px 5px #000;transform:none}

/* V8 · La barra de bans ocupa el espacio liberado del footer */
footer{display:none!important}
.banbar{height:12%;min-height:82px;flex-shrink:0;padding:0 2vw;gap:2vw;background:linear-gradient(180deg,#08251d,#031510);border-top:2px solid #218761}
.ban-group{gap:1.2vw;font-size:clamp(12px,1vw,20px);white-space:nowrap}
.bans{gap:.5vw}
.ban{width:clamp(44px,4.2vw,82px);height:clamp(44px,4.2vw,82px);max-height:9.2vh;border:2px solid #568173;border-radius:2px}
.ban-cross{font-size:clamp(27px,3.4vw,64px)}
@media(max-width:700px){.banbar{height:11%;min-height:54px;padding:0 1vw;gap:1vw}.ban-group{font-size:9px;gap:5px}.ban{width:clamp(22px,5vw,38px);height:clamp(22px,5vw,38px)}.bans{gap:2px}}

/* V9 MARMÓL — identidad Emerald, sin logo ni roles fijos */
.stage{background:#f5f8f5 url('/assets/marmol-emerald.webp') center center/cover no-repeat}
header{height:14.5%;background:linear-gradient(90deg,rgba(4,37,34,.96),rgba(3,27,23,.94) 50%,rgba(29,29,30,.96));border-bottom:2px solid #c6a96a;box-shadow:0 3px 20px #001b16aa}
.teamhead{background:linear-gradient(90deg,#053b37d9,#06251ec7)}
.teamhead.red{background:linear-gradient(270deg,#35282bd9,#06251ec7)}
.tag,.red .tag{color:#7be9bd}
.score{background:#05271fef;border-left:1px solid #b89d60;border-right:1px solid #b89d60}
.brand{color:#a2efc9}
.arena{grid-template-columns:21% 58% 21%}
.picks{background:rgba(2,29,23,.88)}
.slot{background:linear-gradient(120deg,#092e26,#031914);border-bottom:2px solid #b99d65}
.picks.blue .slot{border-right:3px solid #32b996}
.picks.red .slot{border-left:3px solid #d0a56a}
.slot.active{box-shadow:inset 0 0 0 2px #e1c487,0 0 20px #53f5b755}
.hero{background:transparent}
.hero::before{inset:0;background:linear-gradient(180deg,#f9fcf58c,#eaf4ee35),url('/assets/marmol-emerald.webp') center center/cover no-repeat}
.hero::after{background:none}
.hero.featured::after{background:linear-gradient(0deg,#031c16e8,transparent 64%,#06261c3b)}
.heroart{z-index:1}
.herooverlay{z-index:3}
.neutral-brand{opacity:1}
.neutral-lines{width:28%;background:linear-gradient(90deg,transparent,#08744e88,transparent)}
.neutral-lines::after{background:#08744e;border-color:#a2d7b4}
.hero.featured .neutral-brand{opacity:0}
.banbar{height:12%;background:linear-gradient(90deg,#062b23f5,#0a3a2cf0,#062b23f5);border-top:2px solid #c3a467;box-shadow:0 -4px 16px #031b1680}
.ban-group{color:#b5edcf}
.ban{border:2px solid #c6aa72;background:#061d18}
.ban.banned img{filter:grayscale(1) brightness(.58)}
@media(max-width:700px){header{height:17%}.banbar{height:11%}}

/* V9.1: los retratos loading son verticales. Anclar el encuadre arriba
   evita que object-fit:cover recorte las caras en tarjetas horizontales. */
.picks .slot img { object-fit:cover; object-position:center 9%; transform:none; }
.picks .slot.active img { object-position:center 7%; }

/* V9.2 - Retratos legibles sin depender del recorte del splash vertical */
.picks .slot{isolation:isolate}
.picks .slot .champ-backdrop{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:blur(2px) brightness(.42) saturate(.8);transform:scale(1.05);z-index:0}
.picks .slot .champ-face{position:absolute;top:50%;left:2.5%;width:auto;height:min(85%, 115px);aspect-ratio:1/1;object-fit:cover!important;object-position:center center!important;transform:translateY(-50%)!important;filter:none!important;border:2px solid #bfa66d;box-shadow:0 3px 14px #000b;z-index:2}
.picks.red .slot .champ-face{left:auto;right:2.5%}
.picks .slot .gradient{z-index:1;background:linear-gradient(90deg,transparent 0%,#00120c44 35%,#00120cbb 100%)}
.picks.red .slot .gradient{background:linear-gradient(270deg,transparent 0%,#00120c44 35%,#00120cbb 100%)}
.picks .slot .text{z-index:3;left:37%;right:2%;bottom:50%;transform:translateY(50%);text-align:left;pointer-events:none}
.picks.red .slot .text{left:3%;right:37%;text-align:right}
.picks .slot strong{font-size:clamp(13px,1.18vw,24px);line-height:1.1;overflow-wrap:anywhere}
.picks .slot small{font-size:clamp(9px,.78vw,15px)}
.picks .slot.active .champ-face{border-color:#74e5b3;box-shadow:0 0 22px #2acb8e88}
.picks .slot.active{flex:1.5}
@media(max-width:900px){.picks .slot .champ-face{height:min(74%,85px)}.picks .slot .text{left:43%}.picks.red .slot .text{right:43%}}

/* V10 — MÁRMOL BLANCO / ESMERALDA: ajuste visual sin alterar la lógica */
.stage{background:#f9faf7 url('/assets/marmol-emerald.webp') center/cover no-repeat}
header{background:linear-gradient(90deg,rgba(249,252,248,.97),rgba(255,255,255,.97) 50%,rgba(247,250,248,.97));border-bottom:2px solid #bda66d;box-shadow:0 2px 14px #08251c2b}
.teamhead,.teamhead.red{background:transparent}
.teamhead h1{color:#092820;text-shadow:none}
.tag{color:#007c61!important}.teamhead.red .tag{color:#147d62!important}
.score{background:linear-gradient(180deg,#ffffff,#eef7f0);border-left:1px solid #bda66d;border-right:1px solid #bda66d}
.brand{color:#006e50}#match,#turn{color:#43675a}#clock{color:#052b20}#phase{color:#007c61}
.hero{background:#f8faf6 url('/assets/marmol-emerald.webp') center center/cover no-repeat}
.hero::before{background:linear-gradient(180deg,#ffffff1a,#ffffff05),url('/assets/marmol-emerald.webp') center center/cover no-repeat}
.hero::after{background:none}
.hero.featured::after{background:linear-gradient(0deg,#031c16e6 0%,#031c1660 33%,transparent 68%)}
.heroart{background-position:center 30%}
.herooverlay{text-shadow:0 2px 10px #000,0 0 4px #000}
.neutral-brand{opacity:1}.neutral-lines{background:linear-gradient(90deg,transparent,#006c4d77,transparent)}
.picks{background:rgba(5,30,25,.96)}
.slot{background:linear-gradient(115deg,#092e27,#031b16);border-bottom:1px solid #bfa66e}
.picks.blue .slot{border-right:3px solid #0d997b}.picks.red .slot{border-left:3px solid #c4a568}
.picks .slot .champ-face{height:min(76%,94px);width:auto;aspect-ratio:1/1;object-fit:cover!important;object-position:center!important;border-radius:3px;border:2px solid #c4a76e}
.picks .slot .text{left:34%;right:2%;bottom:50%;transform:translateY(50%)}
.picks.red .slot .text{left:3%;right:34%}
.picks .slot strong{font-size:clamp(12px,1.15vw,23px)}
.banbar{background:linear-gradient(90deg,rgba(251,252,249,.97),rgba(238,247,240,.98),rgba(251,252,249,.97));border-top:2px solid #bda66d;box-shadow:0 -3px 12px #05241b24}
.ban-group{color:#075b45}.ban{background:#09241e;border:2px solid #bca36c}
@media(max-width:900px){.picks .slot .champ-face{height:min(68%,70px)}.picks .slot .text{left:43%}.picks.red .slot .text{right:43%}}

/* V11 — Mayor protagonismo para los 10 picks laterales (26 / 48 / 26).
   Solo presentación: no cambia la lógica del draft ni las salas. */
.arena{grid-template-columns:minmax(0,26fr) minmax(0,48fr) minmax(0,26fr)}
.picks .slot .champ-face{height:min(82%,112px);max-width:29%;width:auto;aspect-ratio:1/1;object-fit:cover!important;object-position:center!important}
.picks .slot .text{left:32%;right:3%;bottom:50%;transform:translateY(50%)}
.picks.red .slot .text{left:3%;right:32%}
.picks .slot strong{font-size:clamp(15px,1.38vw,27px);line-height:1.12}
.picks .slot small{font-size:clamp(10px,.84vw,16px)}
.picks .slot.active .champ-face{height:min(85%,125px)}
@media(max-width:900px){.arena{grid-template-columns:minmax(0,27fr) minmax(0,46fr) minmax(0,27fr)}.picks .slot .champ-face{height:min(74%,85px);max-width:32%}.picks .slot .text{left:37%}.picks.red .slot .text{right:37%}}

/* V12 — Picks laterales más visibles, sin alterar el draft ni el layout */
.picks .slot .champ-backdrop{filter:blur(1px) brightness(.77) saturate(1.1)!important;transform:scale(1.025)}
.picks .slot .gradient{background:linear-gradient(90deg,rgba(0,20,15,.04) 0%,rgba(0,19,14,.22) 33%,rgba(0,17,13,.78) 100%)!important}
.picks.red .slot .gradient{background:linear-gradient(270deg,rgba(0,20,15,.04) 0%,rgba(0,19,14,.22) 33%,rgba(0,17,13,.78) 100%)!important}
.picks .slot .champ-face{height:min(90%,125px)!important;max-width:34%!important;object-fit:cover!important;object-position:center center!important;filter:brightness(1.09) saturate(1.08)!important;box-shadow:0 3px 14px #0009!important}
.picks .slot .text{left:35%;right:2%}
.picks.red .slot .text{left:2%;right:35%}
.picks .slot strong{text-shadow:0 2px 5px #000,0 0 10px #0009}
.picks .slot.active{animation:v12-pick-border 1.7s ease-in-out infinite alternate!important}
.picks .slot.active .champ-face{border-color:#76ffd0!important;box-shadow:0 0 0 2px #20dba055,0 0 22px #20dba0bb!important}
@keyframes v12-pick-border{from{box-shadow:inset 0 0 0 2px #2ad49b,0 0 8px #26bb8655}to{box-shadow:inset 0 0 0 4px #b5ffe0,0 0 24px #3cffaa88}}
@media(max-width:900px){.picks .slot .champ-face{height:min(82%,92px)!important}.picks .slot .text{left:39%}.picks.red .slot .text{right:39%}}

/* V13 · Esmeralda ceremonial — decoración sutil, solo OBS. */
header{position:relative;isolation:isolate;box-shadow:0 4px 20px #073e3024,0 1px 0 #fff inset}
header::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;pointer-events:none;background:linear-gradient(90deg,transparent 0%,#0c805f 14%,#d8bc7b 34%,#0c805f 50%,#d8bc7b 66%,#0c805f 86%,transparent 100%);opacity:.82}
.teamhead{position:relative}
.teamhead::after{content:"";position:absolute;bottom:18%;left:2vw;width:min(34%,230px);height:2px;background:linear-gradient(90deg,#0c8b69,#d8bc7b77,transparent);pointer-events:none}
.teamhead.red::after{left:auto;right:2vw;background:linear-gradient(270deg,#0c8b69,#d8bc7b77,transparent)}
.score{position:relative;box-shadow:inset 0 0 24px #0e81550b}
.score::after{content:"◆";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);font-size:10px;color:#0b8664;opacity:.65}
.picks .slot{isolation:isolate}
.picks .slot::before{content:"";position:absolute;z-index:4;pointer-events:none;inset:5px;border:1px solid rgba(216,188,123,.26);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);box-shadow:inset 0 0 0 1px #073a2a33}
.picks .slot::after{content:"";position:absolute;z-index:5;pointer-events:none;top:0;bottom:0;width:3px;left:0;background:linear-gradient(180deg,transparent,#c5a86999 48%,transparent);opacity:.62}
.picks.red .slot::after{left:auto;right:0}
.picks .slot .champ-backdrop{filter:blur(.7px) brightness(.85) saturate(1.12)!important}
.picks .slot .champ-face{border:2px solid #d8bd83!important;box-shadow:0 0 0 2px #092d22a8,0 5px 18px #0009!important}
.picks .slot.active::before{border-color:#8affcf;box-shadow:inset 0 0 0 1px #b7ffe9,0 0 13px #31dba855;animation:v13-frame 1.9s ease-in-out infinite alternate}
.picks .slot.active::after{width:5px;background:linear-gradient(180deg,transparent,#86ffce,transparent);opacity:1;animation:v13-shimmer 2.2s ease-in-out infinite}
.picks .slot.active .champ-face{border-color:#9affd3!important;box-shadow:0 0 0 2px #ffffff77,0 0 22px #31dba8aa!important}
@keyframes v13-frame{from{opacity:.65}to{opacity:1}}
@keyframes v13-shimmer{0%,100%{filter:brightness(.7)}50%{filter:brightness(1.8)}}
.hero{isolation:isolate}
.hero::before{background:linear-gradient(180deg,#ffffff15,#ffffff05),url('/assets/marmol-emerald.webp') center/cover no-repeat}
.hero:not(.featured)::after{content:"";position:absolute;inset:2%;pointer-events:none;border:1px solid #bba36b55;background:linear-gradient(90deg,#bba36b66,#bba36b66) top left/60px 2px no-repeat,linear-gradient(90deg,#bba36b66,#bba36b66) top right/60px 2px no-repeat,linear-gradient(90deg,#bba36b66,#bba36b66) bottom left/60px 2px no-repeat,linear-gradient(90deg,#bba36b66,#bba36b66) bottom right/60px 2px no-repeat;opacity:.55}
.hero.featured .heroart.reveal{animation:v13-hero-enter 1.1s cubic-bezier(.18,.75,.2,1) both}
@keyframes v13-hero-enter{0%{opacity:0;transform:scale(1.11);filter:brightness(1.6) blur(5px)}55%{opacity:1;filter:brightness(1.06) blur(0)}100%{opacity:1;transform:scale(1);filter:brightness(.79)}}
.banbar{position:relative;box-shadow:0 -5px 18px #062c201b,inset 0 2px 0 #fff9}
.banbar::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:18%;height:2px;background:linear-gradient(90deg,transparent,#087d5b,#d0b57b,#087d5b,transparent);pointer-events:none}
.ban{position:relative;box-shadow:0 2px 7px #031d1533}
.ban.banned::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:2px;background:#e5e5e5d9;transform:rotate(-42deg);box-shadow:0 1px 3px #000c;pointer-events:none}
@media(prefers-reduced-motion:reduce){.picks .slot.active,.picks .slot.active::before,.picks .slot.active::after,.hero.featured .heroart.reveal{animation:none!important}}


/* V14 — El casillero del turno de PICK titila hasta la confirmación.
   broadcast.js ya asigna .active al slot correspondiente; no se toca lógica. */
.picks .slot.active{
  position:relative;
  animation:v14-active-tile 1.15s ease-in-out infinite!important;
  border-color:#6dffd0!important;
  z-index:2;
}
.picks .slot.active::before{
  inset:2px!important;
  border:2px solid #9effd7!important;
  background:linear-gradient(90deg,#25e9a51a,transparent 48%,#25e9a51a);
  animation:v14-active-frame 1.15s ease-in-out infinite!important;
}
.picks .slot.active::after{
  width:5px!important;
  background:linear-gradient(180deg,transparent,#baffea 45%,transparent)!important;
  animation:v14-active-bar 1.15s ease-in-out infinite!important;
}
.picks .slot.active .champ-face{border-color:#baffea!important;box-shadow:0 0 0 2px #fff8,0 0 25px #30ffc7bb!important}
.picks .slot.active .text strong{color:#b9ffe5!important;text-shadow:0 0 14px #36f5b6,0 2px 6px #000!important}
@keyframes v14-active-tile{
  0%,100%{box-shadow:inset 0 0 0 2px #19a67a,0 0 6px #0cb58244;filter:brightness(1)}
  50%{box-shadow:inset 0 0 0 4px #baffea,0 0 25px #39ffc899;filter:brightness(1.18)}
}
@keyframes v14-active-frame{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes v14-active-bar{0%,100%{opacity:.3;filter:brightness(1)}50%{opacity:1;filter:brightness(1.8)}}
@media(prefers-reduced-motion:reduce){.picks .slot.active,.picks .slot.active::before,.picks .slot.active::after{animation:none!important}}

/* V15 · Ornamentos de oro fino, pulso lento y foco central más compacto.
   Sólo CSS: se conservan el estado y los eventos de Champion Select. */
.picks .slot{border-bottom:1px solid #c7a96d!important}
.picks .slot::before{
  inset:5px!important;border:1px solid rgba(226,195,124,.64)!important;
  background:linear-gradient(90deg,#e4c27e 0 24px,transparent 24px) left top/100% 2px no-repeat,
             linear-gradient(90deg,transparent calc(100% - 24px),#e4c27e 0) right bottom/100% 2px no-repeat,
             linear-gradient(#e4c27e 0 17px,transparent 17px) left top/2px 100% no-repeat,
             linear-gradient(transparent calc(100% - 17px),#e4c27e 0) right bottom/2px 100% no-repeat;
  opacity:.8;pointer-events:none;box-shadow:none!important;
}
.picks .slot::after{width:2px!important;background:linear-gradient(180deg,transparent,#dfbd7a,transparent)!important;opacity:.8}
.picks .slot.active{animation:v15-slow-breathe 4s ease-in-out infinite!important;filter:none!important;border-color:#55dcb2!important}
.picks .slot.active::before{border-color:#8df4cb!important;animation:v15-slow-frame 4s ease-in-out infinite!important}
.picks .slot.active::after{animation:v15-slow-frame 4s ease-in-out infinite!important}
.picks .slot.active .champ-face{animation:v15-slow-portrait 4s ease-in-out infinite!important}
.picks .slot.active .text strong{color:#fff!important;text-shadow:0 2px 5px #000,0 0 8px #0bbd8466!important}
@keyframes v15-slow-breathe{0%,100%{box-shadow:inset 0 0 0 1px #13a578,0 0 3px #2cd6a122}50%{box-shadow:inset 0 0 0 3px #8ff5cf,0 0 18px #2cd6a177}}
@keyframes v15-slow-frame{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes v15-slow-portrait{0%,100%{box-shadow:0 0 0 1px #cdb17c,0 3px 12px #0008}50%{box-shadow:0 0 0 2px #a7f8d7,0 0 15px #20d9a488}}
/* El fondo de mármol permanece a tamaño completo; sólo se achica la tarjeta del campeón destacado. */
.hero.featured .heroart{
  inset:7% 9% 10%!important;
  border:2px solid #c9ac72;
  outline:1px solid #116d5299;
  outline-offset:4px;
  box-shadow:0 10px 30px #002b1b5c,0 0 0 8px #fff9;
  background-position:center 28%;
}
.hero.featured::after{inset:7% 9% 10%;background:linear-gradient(0deg,#031c16d9 0%,#031c164d 38%,transparent 72%);pointer-events:none}
.hero.featured .herooverlay{bottom:15%;left:13%;right:13%}
.hero.featured .heroart.reveal{animation:v15-feature-appear 1.15s cubic-bezier(.16,.78,.24,1) both}
@keyframes v15-feature-appear{0%{opacity:0;transform:scale(.94);filter:brightness(1.25) blur(6px)}60%{opacity:1;filter:brightness(1.03) blur(0)}100%{opacity:1;transform:scale(1);filter:brightness(.82)}}
.ban{border-color:#c9a86b!important}
.banbar::before{height:3px;background:linear-gradient(90deg,transparent,#c6a466,#087d5b,#c6a466,transparent)}
@media(prefers-reduced-motion:reduce){.picks .slot.active,.picks .slot.active::before,.picks .slot.active::after,.picks .slot.active .champ-face,.hero.featured .heroart.reveal{animation:none!important}}

/* V16 — Slots ornamentales por lado: BLUE mármol blanco / RED esmeralda.
   Sin íconos de rol ni cambios a la lógica del draft. */
.picks.blue .slot{
  background:linear-gradient(105deg,#f8faf5,#e6eee8 70%,#f8faf5)!important;
  border-right:3px solid #c6a668!important;
  border-bottom:2px solid #c4a66c!important;
}
.picks.red .slot{
  background:linear-gradient(105deg,#04241d,#07503c 55%,#031a16)!important;
  border-left:3px solid #c6a668!important;
  border-bottom:2px solid #c4a66c!important;
}
/* Las imágenes quedan como textura, pero nunca tapan el color propio del lado. */
.picks.blue .slot .champ-backdrop{filter:blur(1.5px) brightness(1.45) saturate(.55)!important;opacity:.18!important}
.picks.red .slot .champ-backdrop{filter:blur(1.5px) brightness(.6) saturate(.8)!important;opacity:.35!important}
.picks.blue .slot .gradient{background:linear-gradient(90deg,#fff9 0%,#f2f7f0e8 42%,#f4f8f1f0 100%)!important}
.picks.red .slot .gradient{background:linear-gradient(90deg,#021910b0,#063b2cb8 45%,#031b16ec)!important}
.picks.red .slot .gradient{background:linear-gradient(270deg,#021910b0,#063b2cb8 45%,#031b16ec)!important}
.picks.blue .slot .text strong{color:#07382c!important;text-shadow:0 1px 0 #fff8!important}
.picks.blue .slot .text small{color:#376b59!important;text-shadow:none!important}
.picks.red .slot .text strong{color:#f8fff9!important;text-shadow:0 2px 5px #00180f!important}
.picks.red .slot .text small{color:#b9e7d2!important}
.picks .slot::before{
  inset:4px!important;
  border:1px solid #c7a56b!important;
  border-radius:2px;
  background:
    linear-gradient(135deg,#d9bb7e 0 13px,transparent 13px) left top/20px 20px no-repeat,
    linear-gradient(225deg,#d9bb7e 0 13px,transparent 13px) right top/20px 20px no-repeat,
    linear-gradient(45deg,#d9bb7e 0 13px,transparent 13px) left bottom/20px 20px no-repeat,
    linear-gradient(315deg,#d9bb7e 0 13px,transparent 13px) right bottom/20px 20px no-repeat!important;
  opacity:.82!important;
  pointer-events:none;
}
.picks .slot .champ-face{border:2px solid #c8a86d!important;box-shadow:0 2px 10px #00180f66,0 0 0 2px #ffffff50!important}
.picks .slot.active{animation:v15-slow-breathe 4s ease-in-out infinite!important}
.picks .slot.active::before{animation:v15-slow-frame 4s ease-in-out infinite!important;border-color:#55c99c!important}
.picks.blue .slot.active .text strong{color:#064c37!important;text-shadow:0 0 7px #67e7b16b!important}
.picks.red .slot.active .text strong{color:#ffffff!important;text-shadow:0 0 10px #52e6ac!important}
@media(prefers-reduced-motion:reduce){.picks .slot.active,.picks .slot.active::before{animation:none!important}}

/* V17 — Recuperar splash arts de fondo en los diez slots. */
.picks.blue .slot .champ-backdrop,
.picks.red .slot .champ-backdrop{
  opacity:1!important;
  filter:brightness(.85) saturate(1.08)!important;
  transform:scale(1.025)!important;
}
.picks.blue .slot .gradient{
  background:linear-gradient(90deg,rgba(247,251,245,.08) 0%,rgba(241,249,243,.35) 33%,rgba(242,250,245,.88) 77%,rgba(242,250,245,.95) 100%)!important;
}
.picks.red .slot .gradient{
  background:linear-gradient(270deg,rgba(0,22,17,.10) 0%,rgba(0,28,21,.35) 33%,rgba(0,29,22,.82) 78%,rgba(0,29,22,.92) 100%)!important;
}
.picks.blue .slot .text strong{color:#07382c!important;text-shadow:0 1px 2px #ffffff88!important}
.picks.red .slot .text strong{color:#fff!important;text-shadow:0 2px 5px #00180f!important}

/* V18 — Mármol visible antes de que aparezca el splash art.
   Sólo se aplica a slots vacíos; las selecciones conservan el splash V17. */
.picks.blue .slot.empty{
  background:linear-gradient(100deg,rgba(255,255,255,.22),rgba(245,250,246,.32)),url('/assets/marmol-emerald.webp') center/cover no-repeat!important;
}
.picks.red .slot.empty{
  background:linear-gradient(100deg,rgba(0,29,22,.83),rgba(0,63,45,.72)),url('/assets/marmol-emerald.webp') center/cover no-repeat!important;
}
.picks.blue .slot.empty .gradient{
  background:linear-gradient(90deg,rgba(250,252,248,.24),rgba(248,252,249,.60) 75%,rgba(250,253,250,.75))!important;
}
.picks.red .slot.empty .gradient{
  background:linear-gradient(270deg,rgba(0,22,17,.38),rgba(0,34,26,.60) 75%,rgba(0,27,20,.78))!important;
}
.picks .slot.empty .champ-backdrop{opacity:0!important}

/* V6.1: fotografías existentes integradas en cada card, sin barra superior. */
.team-title{display:flex;align-items:center;gap:12px;min-width:0}.teamhead.red .team-title{flex-direction:row-reverse}.team-title h1{min-width:0}.team-logo{height:clamp(30px,4.6vh,70px);width:clamp(30px,4.6vh,70px);object-fit:contain;flex:none}.team-logo[hidden]{display:none}
.picks .slot .player-visual{position:absolute;right:0;bottom:0;top:0;width:43%;z-index:2;pointer-events:none;overflow:hidden;display:flex;align-items:end;justify-content:center}.picks.red .slot .player-visual{right:auto;left:0}
.picks .slot .player-visual img.player-cutout{position:relative!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important;object-position:center bottom!important;filter:none!important;transform:none!important;border:0!important;box-shadow:none!important}
.picks .slot .player-visual img[hidden]{display:none!important}.picks .slot .player-silhouette{height:90%;width:85%;color:#739688;opacity:.46;filter:drop-shadow(0 1px 6px #063a29)}.picks.blue .slot .player-silhouette{color:#678b7c;opacity:.38}
.picks .slot .text{left:32%!important;right:39%!important;bottom:50%!important;transform:translateY(50%)!important;gap:2px;text-align:left!important;z-index:4}.picks.red .slot .text{left:39%!important;right:32%!important;text-align:right!important}
.picks .slot .text .player-nick{font-size:clamp(11px,1.05vw,21px);font-weight:900;line-height:1.08;overflow-wrap:anywhere;color:#0a4032;text-shadow:0 1px 1px #fff8}.picks.red .slot .text .player-nick{color:#f9f7e9;text-shadow:0 2px 5px #001a12}
.picks .slot .text strong{font-size:clamp(10px,.93vw,19px)!important;line-height:1.1}.picks .slot .text small{font-size:clamp(8px,.68vw,13px)!important}
@media(max-width:950px){.picks .slot .player-visual{width:39%}.picks .slot .text{right:35%!important}.picks.red .slot .text{left:35%!important}}

/* V6.1 — legibilidad de nick/campeón y fallback de fotografía */
.picks .slot .player-visual [hidden],
.picks .slot .player-visual .player-silhouette[hidden]{display:none!important}
.picks .slot .text{
  display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;justify-content:center!important;
  gap:3px!important;padding:8px 7px!important;
  border-radius:3px;box-sizing:border-box;
  background:linear-gradient(90deg,rgba(5,45,34,.88),rgba(5,45,34,.63) 78%,rgba(5,45,34,0));
  text-align:left!important;
}
.picks.red .slot .text{
  align-items:flex-end!important;text-align:right!important;
  background:linear-gradient(270deg,rgba(3,28,23,.85),rgba(3,28,23,.54) 78%,rgba(3,28,23,0));
}
.picks .slot .text .player-nick{
  display:block;width:100%;padding-bottom:5px;margin-bottom:2px;
  border-bottom:1px solid rgba(219,185,112,.9);
  color:#fff!important;text-shadow:0 1px 3px #001b16!important;
  line-height:1.12!important;
}
.picks .slot .text strong{display:block;color:#fff!important;text-shadow:0 1px 3px #001b16!important;line-height:1.12!important}
.picks .slot .text small{display:block;color:#c3ebd9!important;text-shadow:0 1px 2px #001b16!important}
.picks.blue .slot .text .player-nick,.picks.blue .slot .text strong{color:#fff!important;text-shadow:0 1px 3px #001b16!important}
.picks.blue .slot .text small{color:#c3ebd9!important;text-shadow:0 1px 2px #001b16!important}

/* V6.2 — Textos integrados sin bloque rectangular; mantiene fotos y línea dorada. */
.picks.blue .slot .text,
.picks.red .slot .text{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:8px 7px!important;
  isolation:isolate;
}
.picks .slot .text::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  top:-9px;bottom:-9px;left:-14px;right:-14px;
  border:0;border-radius:0;
  background:linear-gradient(90deg,rgba(4,44,33,.68) 0%,rgba(4,44,33,.36) 49%,rgba(4,44,33,0) 100%);
}
.picks.red .slot .text::before{
  background:linear-gradient(270deg,rgba(3,30,24,.68) 0%,rgba(3,30,24,.36) 49%,rgba(3,30,24,0) 100%);
}
.picks .slot .text .player-nick{border-bottom:1px solid rgba(219,185,112,.85)!important}

/* V6.3 — Resultado de la serie entre los bans */
.banbar .series-result{flex:1;min-width:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1px;color:#0b4738;padding:2px 8px;line-height:1.15}
.banbar .series-result[hidden]{display:none!important}
.series-result #seriesResultLabel{font-size:clamp(9px,.65vw,12px);letter-spacing:.13em;font-weight:800;color:#087456}
.series-result #seriesResultScore{font-size:clamp(22px,2.1vw,38px);font-weight:900;line-height:1.05;color:#073d2e}
.series-result #seriesResultText{font-size:clamp(10px,.83vw,15px);font-weight:700;color:#125343;max-width:100%;overflow-wrap:anywhere}
@media(max-width:900px){.banbar .series-result{min-width:90px;padding:1px 3px}.series-result #seriesResultLabel{font-size:8px}.series-result #seriesResultText{font-size:9px}}