/* V87 · Draft de 3 columnas, inspirado en la disposición del cliente LoL.
 * Azul a la izquierda, campeón/temporizador al centro, rojo a la derecha.
 * Eliminar paneles y títulos duplicados. PC primero, adaptable a resoluciones menores.
 */
#app #betaTab{container-type:inline-size}
#app #betaTab:has(#betaLobby:not([hidden])) .beta-hero{display:none!important}
#app #betaTab:has(#betaLobby:not([hidden])) .beta-lobby{margin-top:0!important}
#app #betaTab .beta-room-heading.beta-room-brief{
 display:flex!important;align-items:center!important;justify-content:space-between!important;
 padding:12px 18px!important;gap:16px!important;background:#102f3c!important;
 border:1px solid #456d78!important;min-height:0!important;
}
#app #betaTab .beta-room-overview{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
#app #betaTab .beta-room-kicker{font:900 9px/1.3 Manrope,sans-serif;color:#8fd5ca;letter-spacing:.1em}
#app #betaTab .beta-room-brief h2{
 display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
 font:650 29px/1 Teko,sans-serif!important;color:#fff!important;margin:0!important
}
#app #betaTab .beta-room-state-label{
 font:900 10px/1.1 Manrope,sans-serif;color:#f3b598;letter-spacing:.04em
}
#app #betaTab .beta-room-brief .beta-room-progress{
 padding:2px 0 0!important;background:transparent!important;
 border:0!important;display:flex!important;flex-wrap:wrap;align-items:center;gap:7px 15px!important;
 font:850 10px Manrope,sans-serif;color:#b5d8d4
}
#app #betaTab .beta-room-brief .beta-room-progress b{font-size:14px!important;color:#91e2d3}
#app #betaTab .beta-room-brief .beta-code{
 min-width:0!important;display:flex;align-items:center;gap:10px;
 padding:8px 11px!important;text-align:left!important;background:#0c2532!important;
 border:1px solid #577d86!important;flex-shrink:0
}
#app #betaTab .beta-room-brief .beta-code span{font-size:8px!important;color:#a4d4d0;max-width:45px}
#app #betaTab .beta-room-brief .beta-code strong{
 margin:0!important;font:650 27px/1 Teko,sans-serif!important;letter-spacing:.08em!important
}
#app #betaTab .beta-room-brief .beta-code button{
 padding:7px 9px!important;font-size:9px!important;white-space:nowrap
}

/* Quitar franja decorativa PICK & BANS, y concentrar la información en el reloj central. */
#app #betaTab .beta-live-draft{margin-top:10px!important}
#app #betaTab .beta-draft-shell{
 padding:11px!important;min-width:0!important;background:#0a2735!important;
 border:1px solid #456e77!important
}
#app #betaTab .beta-draft-composition{
 display:grid!important;grid-template-columns:minmax(165px,1fr) minmax(360px,2.6fr) minmax(165px,1fr)!important;
 gap:10px!important;align-items:start!important;min-width:0!important
}
#app #betaTab .beta-draft-side,#app #betaTab .beta-draft-center{
 display:flex;flex-direction:column;gap:9px;min-width:0
}
#app #betaTab .beta-draft-side .beta-draft-bans{
 width:100%!important;max-width:none!important;margin:0!important;
 min-height:105px;display:flex!important;flex-direction:column!important;
 padding:9px!important;gap:8px!important;box-sizing:border-box!important
}
#app #betaTab .beta-draft-side-blue .beta-draft-bans{border-top:3px solid #62b8e6!important}
#app #betaTab .beta-draft-side-red .beta-draft-bans{border-top:3px solid #e88980!important}
#app #betaTab .beta-draft-side .beta-draft-bans>strong{font-size:9px!important;letter-spacing:.04em}
#app #betaTab .beta-draft-side .beta-draft-bans>div{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important}
#app #betaTab .beta-draft-side .beta-draft-ban{min-width:0;gap:4px!important}
#app #betaTab .beta-draft-side .beta-draft-ban img,
#app #betaTab .beta-draft-side .beta-draft-ban>span{
 width:100%!important;max-width:43px!important;aspect-ratio:1;min-width:0!important
}
#app #betaTab .beta-draft-side .beta-draft-ban small{
 font-size:7px!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
#app #betaTab .beta-draft-side .beta-draft-team{
 padding:8px!important;min-width:0!important;width:100%!important;box-sizing:border-box!important;
}
#app #betaTab .beta-draft-team header{padding:3px 3px 7px!important;gap:3px!important}
#app #betaTab .beta-draft-team header strong{font-size:11px!important}
#app #betaTab .beta-draft-team header small{font-size:8px!important;max-width:100%;overflow-wrap:anywhere}
#app #betaTab .beta-draft-slot{
 min-height:61px!important;padding:7px 5px!important;gap:7px!important;
 display:flex!important;align-items:center!important;min-width:0
}
#app #betaTab .beta-draft-slot img,#app #betaTab .beta-slot-placeholder{
 width:40px!important;height:40px!important
}
#app #betaTab .beta-draft-slot>div{min-width:0;flex:1}
#app #betaTab .beta-draft-slot strong{font-size:11px!important;overflow-wrap:anywhere!important}
#app #betaTab .beta-draft-slot span{font-size:9px!important}
#app #betaTab .beta-draft-slot>b{display:none!important}

/* Temporizador y fase ocupan la cabecera del centro, sin encabezado redundante. */
#app #betaTab .beta-draft-center .beta-draft-turn{
 position:sticky!important;top:0!important;z-index:8!important;
 margin:0!important;padding:11px 13px!important;min-height:98px;
 border:2px solid #b47e6d!important;
 background:linear-gradient(100deg,#4b2933,#1a303f)!important;
 box-shadow:0 6px 15px #0005!important
}
#app #betaTab .beta-draft-center .beta-draft-turn.is-pick{
 border-color:#71c9c5!important;background:linear-gradient(100deg,#15555b,#103442)!important
}
#app #betaTab .beta-draft-center .beta-draft-turn.complete{
 border-color:#8ad5ba!important;background:#163c40!important
}
#app #betaTab .beta-draft-turn-main{min-width:0;flex:1}
#app #betaTab .beta-draft-center .beta-draft-step{
 display:block;color:#e2d5cf!important;font:900 9px/1.3 Manrope,sans-serif!important;
 letter-spacing:.09em!important;margin-bottom:3px
}
#app #betaTab .beta-draft-phase-label{
 display:block;font:700 clamp(20px,2vw,30px)/1 Teko,sans-serif;
 color:#ffc29d!important;letter-spacing:.055em!important
}
#app #betaTab .is-pick .beta-draft-phase-label{color:#9affea!important}
#app #betaTab .beta-draft-turn h3{
 font:700 clamp(17px,1.9vw,24px)/1.1 Teko,sans-serif!important;
 margin:4px 0 2px!important;color:white!important
}
#app #betaTab .beta-draft-turn small{font-size:9px!important;line-height:1.35!important}
#app #betaTab .beta-draft-clock{flex:0 0 auto;padding:9px 10px!important;background:#0a2633!important}
#app #betaTab .beta-draft-clock strong{
 font:700 clamp(28px,3vw,43px)/1 Teko,sans-serif!important;color:#ffd2ae!important
}
#app #betaTab .is-pick .beta-draft-clock strong{color:#9ff7e7!important}
#app #betaTab .beta-draft-center .beta-draft-picker{
 margin:0!important;padding:10px!important;border:1px solid #a97d68!important;
 background:#152e3a!important;min-width:0!important
}
#app #betaTab .is-pick-phase .beta-draft-center .beta-draft-picker{border-color:#6aaea7!important}
#app #betaTab .beta-draft-picker-header{margin-bottom:7px!important}
#app #betaTab .beta-draft-picker-header>strong{
 color:#f5bd9e!important;font-size:11px!important
}
#app #betaTab .is-pick-phase .beta-draft-picker-header>strong{color:#aaf8e2!important}
#app #betaTab .beta-draft-picker-header small{font-size:9px!important}
#app #betaTab .beta-draft-filters{margin:7px 0!important;display:flex!important;gap:5px!important}
#app #betaTab .beta-draft-filters input{padding:9px 10px!important;min-width:0!important}
#app #betaTab .beta-draft-filters select{padding:9px 6px!important}
#app #betaTab .beta-draft-champion-grid{
 display:grid!important;grid-template-columns:repeat(auto-fill,minmax(73px,1fr))!important;
 max-height:clamp(230px,42vh,470px)!important;overflow-y:auto!important;
 gap:5px!important;overscroll-behavior:contain!important;
 margin:0 0 9px!important;padding:1px!important
}
#app #betaTab button.beta-draft-champion{
 min-height:72px!important;padding:5px 3px!important;
 background:#0d2d3c!important;border:1px solid #3e6574!important;gap:3px!important
}
#app #betaTab button.beta-draft-champion img{width:44px!important;height:44px!important}
#app #betaTab button.beta-draft-champion span{
 font:800 9px/1.2 Manrope,sans-serif;white-space:normal;text-align:center!important
}
#app #betaTab button.beta-draft-champion.selected{
 background:#234e5e!important;border:2px solid #ffcdac!important;
 box-shadow:0 0 0 1px #ffcdacaa!important
}
#app #betaTab .beta-draft-center #betaDraftConfirm{
 display:block;width:100%!important;min-height:43px!important;
 background:#eca687!important;border:1px solid #eca687!important;
 color:#122635!important;font-size:12px!important
}
#app #betaTab .is-pick-phase .beta-draft-center #betaDraftConfirm{
 background:#99e8d4!important;border-color:#99e8d4!important
}
#app #betaTab .beta-draft-center #betaDraftConfirm:disabled{opacity:.45!important}
#app #betaTab .beta-draft-locked{padding:7px!important;margin:5px 0!important}
#app #betaTab .beta-draft-locked img{width:31px!important;height:31px!important}

/* Opciones secundarias plegables para que el draft completo no produzca scroll largo. */
#app #betaTab .beta-draft-control-panel,
#app #betaTab .beta-draft-history-details{
 margin-top:9px;min-width:0;border:1px solid #3d6972;background:#0f303c
}
#app #betaTab .beta-draft-control-panel>summary,
#app #betaTab .beta-draft-history-details>summary{
 padding:12px 15px;cursor:pointer;color:#b7eadf;
 font:900 10px Manrope,sans-serif;letter-spacing:.065em
}
#app #betaTab .beta-draft-control-panel .beta-draft-host-controls,
#app #betaTab .beta-draft-history-details .beta-draft-history{
 margin:0!important;border:0!important;padding:10px!important
}

/* Capitanes: identificar expresamente el turno completo del snake 1-2-2-2-1. */
#app #betaTab .beta-captain-current{border-left-color:#ffa179!important}
#app #betaTab .beta-captain-turn-rule{
 padding:7px 9px;margin:4px 0;font:900 10px/1.4 Manrope,sans-serif;
 color:#ffe0b8;background:#123746;border:1px solid #78645b
}
#app #betaTab .beta-captain-options button:not(:disabled){border-color:#9be3d4!important}
#app #betaTab .beta-captain-options button:disabled{opacity:.42!important}

/* Composición adaptable a anchos reales del panel central, no solo al viewport. */
@container (max-width:980px){
 #app #betaTab .beta-draft-composition{
  grid-template-columns:repeat(2,minmax(0,1fr))!important
 }
 #app #betaTab .beta-draft-center{grid-row:1;grid-column:1/-1}
 #app #betaTab .beta-draft-side-blue{grid-row:2;grid-column:1}
 #app #betaTab .beta-draft-side-red{grid-row:2;grid-column:2}
 #app #betaTab .beta-draft-champion-grid{max-height:340px!important}
}
@container (max-width:570px){
 #app #betaTab .beta-draft-composition{grid-template-columns:1fr!important}
 #app #betaTab .beta-draft-center{grid-row:1;grid-column:1}
 #app #betaTab .beta-draft-side-blue{grid-row:2;grid-column:1}
 #app #betaTab .beta-draft-side-red{grid-row:3;grid-column:1}
 #app #betaTab .beta-room-heading.beta-room-brief{align-items:stretch!important;flex-direction:column!important}
 #app #betaTab .beta-room-brief .beta-code{width:100%!important;box-sizing:border-box}
 #app #betaTab .beta-draft-champion-grid{grid-template-columns:repeat(auto-fill,minmax(65px,1fr))!important}
}