/* V31 ARENA CONTROL */
:root{--arena-bg:#090d14;--arena-plate:#131b28;--arena-line:#34475a;--arena-mint:#b8f7e6;--arena-orange:#ff633f;--arena-white:#f2f4f0}
html{background:#090d14}body{background:var(--arena-bg)!important;color:var(--arena-white)!important;font-family:Arial,Helvetica,sans-serif!important}body:before{background:linear-gradient(110deg,#0b1018,#101e2d 72%,#071018)!important;opacity:1!important}
main{max-width:1600px!important;margin:auto}.home{background:#080f18!important}
.landing-shell{min-height:min(820px,96dvh)!important;background:#0a121d!important;border:0!important;box-shadow:none!important;isolation:isolate;overflow:hidden;position:relative}
.landing-shell:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#080e17 9%,#0c1925e8 53%,#0c1925d6),url('https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Galio_0.jpg') center/cover!important;opacity:.9}
.landing-shell:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 97%,#a2ffd10c 97.2%) 0 0/92px 100%;opacity:1!important;z-index:-1}
.landing-header{height:82px;padding:0 36px!important;background:#0b101a!important;border-bottom:1px solid #485d6a!important;display:flex;align-items:center;position:relative}
.landing-header:before{content:"MATCH CONTROL  /  01";position:absolute;bottom:-24px;right:35px;font:700 10px Arial;letter-spacing:.25em;color:#b5d4ca}
.brand-mark{gap:13px!important}.brand-icon{width:50px!important;height:50px!important;background:var(--arena-orange)!important;color:#0a1018!important;border:0!important;display:grid;place-items:center;clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);font-size:27px!important}
.brand-mark strong{font-family:Impact,'Arial Narrow',sans-serif!important;font-size:24px!important;letter-spacing:.08em!important;color:#fff!important}.brand-mark strong span{color:var(--arena-orange)!important}.brand-mark small{color:#93acae!important;font-size:9px!important}.landing-online{color:var(--arena-mint)!important;border:1px solid #50796c;padding:9px 13px;font-size:9px!important}
.landing-content{padding:42px 36px 32px!important;gap:42px!important;grid-template-columns:minmax(300px,.82fr) minmax(490px,1.18fr)!important;align-items:center!important}
.landing-copy{padding-left:0!important;border-left:0!important;max-width:550px!important}.landing-copy:before{content:"01     /     CUSTOM MATCH";display:block;padding:0 0 22px;color:var(--arena-orange);font:800 10px Arial;letter-spacing:.29em}
.landing-eyebrow{color:#b7e9df!important;font:700 11px Arial!important;letter-spacing:.15em!important}
.home-v17 h1{font-family:Impact,'Arial Narrow',sans-serif!important;font-size:clamp(58px,6.2vw,108px)!important;line-height:.87!important;letter-spacing:-.018em!important;margin:24px 0!important;max-width:670px!important;transform:skew(-3deg)}
.home-v17 h1 em{color:var(--arena-orange)!important;font-style:normal!important;background:none!important;white-space:nowrap}
.home-v17 p{border-top:1px solid #485f67;padding-top:20px;color:#c1d4d4!important;font-size:14px!important;max-width:430px!important;line-height:1.6!important}
.landing-actions{margin:28px 0 24px!important;align-items:stretch!important;flex-wrap:wrap}.landing-start{background:var(--arena-orange)!important;border:none!important;clip-path:polygon(0 0,calc(100% - 19px) 0,100% 19px,100% 100%,0 100%);color:#0d1318!important;font-size:13px!important;font-weight:900!important;letter-spacing:.06em!important;min-width:255px!important;padding:19px 20px!important}.landing-resume{background:#142636!important;border:1px solid #82b7ab!important;color:#e8f7f5!important}
.landing-foot{border-left:3px solid var(--arena-orange);padding-left:12px;color:#9db8b6!important;letter-spacing:.12em!important}
.landing-art{min-height:0!important;position:relative!important;z-index:1}.draft-headline{display:block!important;padding:12px 0!important;border-bottom:3px solid var(--arena-orange)!important}.draft-tag{font-size:10px!important;letter-spacing:.22em!important;color:var(--arena-mint)!important}.draft-headline strong{display:block;font:900 22px Impact,Arial!important;letter-spacing:.06em!important;color:#fff!important;padding-top:9px}.draft-headline strong span{font:700 11px Arial!important;color:#ff986c!important;letter-spacing:.16em!important}
.draft-five{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important;height:clamp(340px,51vh,530px)!important;margin-top:12px!important;overflow:hidden!important}
.draft-five .draft-card{border:0!important;border-top:5px solid #a6f0df!important;background:#0c1b27!important;overflow:hidden!important;position:relative;box-shadow:none!important;transform:none!important;transition:filter .2s ease,transform .2s ease!important}.draft-five .draft-card:nth-child(3){border-top-color:var(--arena-orange)!important}.draft-five .draft-card:hover{transform:translateY(-5px)!important;filter:brightness(1.15)!important}
.draft-five .draft-card:before{display:none!important}.draft-photo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:var(--focus-x,50%) center!important;display:block!important;opacity:1!important;transform:scale(1.03)!important;filter:contrast(1.06) saturate(.87)!important}.draft-visual{display:none!important}
.draft-card-meta{position:absolute!important;bottom:0!important;inset-inline:0!important;padding:32px 8px 12px!important;background:linear-gradient(0deg,#071019fa 0%,#091521d5 56%,transparent 100%)!important;z-index:2!important}.draft-card-meta strong{color:#fff!important;font:700 clamp(13px,1.2vw,19px) Impact,'Arial Narrow',sans-serif!important;text-transform:uppercase}.draft-player{color:#b8e9df!important}.draft-role{color:#ff956c!important;font-weight:900!important}.draft-footer{color:#a8c6bd!important;font-size:10px!important;letter-spacing:.12em!important}
.landing-bottom{background:#0b121b!important;border-top:1px solid #3e5963!important;height:59px;padding:0 34px!important;display:flex;align-items:center}.creator-mark{color:#d2e2dd!important}.creator-mark b{color:var(--arena-orange)!important}
#app{max-width:1440px!important;margin:auto!important;padding:18px 24px!important}#app .sessionbar{background:#0d1521!important;border:1px solid #345064!important;border-left:6px solid var(--arena-orange)!important;padding:13px 20px!important;box-shadow:none!important}#app .dashboard-brand .brand-square{background:var(--arena-orange)!important;color:#0c1320!important}#app .v11-nav{margin-top:12px!important;background:#0a1622!important;border:1px solid #3b5160!important;display:flex;gap:0!important}#app .v11-tab{padding:16px 23px!important;font-size:12px!important;font-weight:800!important;color:#aabec5!important;background:transparent!important;border:0!important;border-right:1px solid #314858!important}#app .v11-tab.active{background:#b7f3e6!important;color:#09131c!important;border-bottom:0!important}
#app .panel{background:#101e2b!important;border:1px solid #3e5868!important;border-top:4px solid #b4efe4!important;box-shadow:none!important;padding:23px!important}#app .panel h2{font-family:Impact,'Arial Narrow',sans-serif!important;text-transform:uppercase;letter-spacing:.07em!important;font-size:23px!important}#app .option{background:#152738!important;border:1px solid #354f60!important;border-radius:0!important;padding:12px!important;margin-bottom:8px!important;transition:background .15s ease!important}#app .option:has(input:checked){background:#1b3540!important;border-color:#79c6bd!important;border-left:5px solid var(--arena-orange)!important}#app .primary,#app button.add{background:var(--arena-orange)!important;color:#0a1119!important;border-radius:0!important;border:0!important;font-weight:900!important;letter-spacing:.08em!important;box-shadow:none!important}#app input:not([type=checkbox]),#app textarea{background:#07141e!important;border:1px solid #435b6c!important;border-radius:0!important;color:#fff!important}#app .top h1{font-family:Impact,'Arial Narrow',sans-serif!important;font-size:38px!important;letter-spacing:.04em!important}#app .top h1 em{color:#ff8562!important}#app .players .player{border-radius:0!important}
#app .layout{gap:16px!important}#app .top{margin-bottom:12px!important}#app .top p{margin:4px 0!important}#app .session-context{color:#d5e8e8}#app .settings-open{border:1px solid #557183!important}
.result-modal{background:#0b1824!important;border:1px solid #82cfc4!important;border-radius:0!important}.result-modal-top{background:#122637!important;border-bottom:3px solid var(--arena-orange)!important}.settings-dialog{background:#0c1a27!important}
@media(min-width:1050px) and (min-height:680px){#app .tab-page#drawTab .layout{align-items:stretch}#app .tab-page#drawTab .panel{min-height:0}}
@media(max-width:1020px){.landing-content{grid-template-columns:1fr!important;gap:25px!important}.landing-shell{min-height:100dvh!important}.draft-five{height:340px!important}.landing-copy{max-width:100%!important}.home-v17 h1{font-size:clamp(54px,9vw,92px)!important}}
@media(max-width:620px){.landing-header{padding:0 18px!important;height:65px}.landing-online{display:none!important}.landing-content{padding:20px 15px!important}.home-v17 h1{font-size:clamp(49px,12vw,69px)!important}.draft-five{height:230px!important;gap:2px!important}.draft-card-meta{padding:23px 3px 6px!important}.draft-card-meta strong{font-size:10px!important}.draft-player{font-size:7px!important}.draft-role{font-size:7px!important}.landing-bottom{padding:12px!important;gap:10px;flex-wrap:wrap;height:auto}#app{padding:10px!important}#app .v11-tab{font-size:10px!important;padding:10px 8px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* V31.1 — unified broadcast palette and guaranteed splash visibility */
:root{--arena-bg:#080f19;--arena-plate:#101e2b;--arena-line:#304b58;--arena-mint:#86dfd5;--arena-orange:#fa7654;--arena-white:#edf5f3}
.landing-shell{background:#091722!important}.landing-header,.landing-bottom{background:#0a1622!important}
.brand-icon,.landing-start,#app .primary,#app button.add{background:var(--arena-orange)!important}
.landing-online,.draft-tag,.landing-eyebrow{color:var(--arena-mint)!important}
.draft-five .draft-card{position:relative!important;isolation:isolate!important;overflow:hidden!important;background:#0a202a!important}
.draft-five .draft-card .draft-photo{display:block!important;visibility:visible!important;opacity:1!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;min-width:100%!important;min-height:100%!important;object-fit:cover!important;object-position:var(--focus-x,50%) center!important;z-index:1!important;transform:none!important;filter:saturate(.9) contrast(1.04)!important}
.draft-five .draft-card .draft-visual{display:none!important}
.draft-five .draft-card:before{display:none!important}
.draft-five .draft-card .draft-card-meta{z-index:3!important;position:absolute!important}
.draft-five .draft-card:nth-child(1){--focus-x:93%}
.draft-five .draft-card:nth-child(2){--focus-x:50%}
.draft-five .draft-card:nth-child(3){--focus-x:47%}
.draft-five .draft-card:nth-child(4){--focus-x:83%}
.draft-five .draft-card:nth-child(5){--focus-x:86%}
#app .panel{background:#10212d!important;border-color:#365563!important;border-top-color:var(--arena-mint)!important}
#app .option{background:#142b37!important}
#app .option:has(input:checked){background:#1b3a42!important;border-color:var(--arena-mint)!important;border-left-color:var(--arena-orange)!important}
#app .v11-nav{background:#0d1c29!important;border-color:#355262!important}
#app .v11-tab.active{background:var(--arena-mint)!important}
#app .sessionbar{background:#0e1d29!important;border-color:#365664!important;border-left-color:var(--arena-orange)!important}


/* V31.2 — portrait layout, accessible typography, coherent login */
:root{--arena-orange:#fa7654;--arena-mint:#86dfd5;--arena-bg:#080f19;--arena-plate:#10212d}
.draft-five{align-items:stretch!important}
.draft-five .draft-card{position:relative!important;overflow:hidden!important;min-height:0!important;isolation:isolate!important}
.draft-five .draft-card::before{content:""!important;display:block!important;visibility:visible!important;position:absolute!important;inset:0!important;z-index:1!important;opacity:1!important;background-image:var(--splash)!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:var(--focus-x,50%) center!important;filter:contrast(1.05) saturate(.93)!important;transform:none!important;pointer-events:none!important}
.draft-five .draft-card img.draft-photo{display:none!important}
.draft-five .draft-card .draft-visual{display:none!important}
.draft-five .draft-card::after{content:""!important;display:block!important;position:absolute!important;inset:48% 0 0!important;z-index:2!important;background:linear-gradient(0deg,#06121df5 0%,#06121d80 48%,transparent 100%)!important;pointer-events:none!important}
.draft-five .draft-card .draft-card-meta{position:absolute!important;inset:auto 0 0!important;z-index:3!important;padding:24px 9px 12px!important;background:none!important}
.draft-five .draft-card:nth-child(1){--focus-x:93%}
.draft-five .draft-card:nth-child(2){--focus-x:50%}
.draft-five .draft-card:nth-child(3){--focus-x:47%}
.draft-five .draft-card:nth-child(4){--focus-x:83%}
.draft-five .draft-card:nth-child(5){--focus-x:86%}
body,#app,.home-v17,.lobby-password-card{font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important}
.home-v17 h1{font-family:"Arial Black",Impact,system-ui,sans-serif!important;font-weight:950!important;font-stretch:normal!important;letter-spacing:-.045em!important;font-style:normal!important;transform:none!important;font-size:clamp(53px,5.7vw,90px)!important;line-height:.98!important}
.home-v17 h1 em{font-style:normal!important}
.brand-mark strong,.draft-card-meta strong,.draft-headline strong,#app .top h1,#app .panel h2{font-family:Inter,system-ui,"Segoe UI",Arial,sans-serif!important;font-weight:900!important;letter-spacing:-.025em!important}
.brand-mark strong{font-size:21px!important;letter-spacing:.015em!important}
.draft-card-meta strong{font-size:clamp(11px,1.15vw,18px)!important;line-height:1.12!important;overflow-wrap:break-word!important}
.draft-player{font-size:10px!important;line-height:1.25!important}.draft-role{font-size:9px!important}
.landing-eyebrow,.draft-tag,.landing-online{letter-spacing:.13em!important}
.lobby-password-overlay[hidden]{display:none!important}
.lobby-password-overlay{background:#060d16ed!important;backdrop-filter:blur(6px)!important}
.lobby-password-card{width:min(460px,calc(100vw - 32px))!important;background:#10212d!important;border:1px solid #426773!important;border-top:5px solid var(--arena-orange)!important;border-radius:3px!important;box-shadow:0 26px 90px #0009!important;color:#edf5f3!important;padding:32px!important}
.lobby-password-card h2{font-family:Inter,system-ui,"Segoe UI",Arial,sans-serif!important;font-size:27px!important;font-weight:850!important;letter-spacing:-.035em!important;color:#edf5f3!important}
.lobby-password-card p{color:#b7d0d3!important;font-size:14px!important}
.lobby-password-card label,.password-brand{font-family:Inter,system-ui,Arial,sans-serif!important;color:var(--arena-mint)!important;font-weight:850!important;font-size:11px!important;letter-spacing:.10em!important}
.lobby-password-card input{border:1px solid #4a6876!important;background:#07131f!important;border-radius:2px!important;color:#edf5f3!important;font-family:inherit!important}
.lobby-password-card input:focus{outline:2px solid var(--arena-mint)!important;border-color:var(--arena-mint)!important}
.password-actions button{border-radius:2px!important;font-family:inherit!important;font-weight:850!important;letter-spacing:.035em!important;background:#203948!important;color:#edf5f3!important}
.password-actions button[type=submit]{background:var(--arena-orange)!important;color:#08131d!important}
.password-actions button:hover{filter:brightness(1.12)}
@media(max-width:620px){.home-v17 h1{font-size:clamp(43px,10vw,64px)!important}.draft-card-meta strong{font-size:10px!important}.draft-five .draft-card .draft-card-meta{padding:16px 4px 5px!important}.lobby-password-card{padding:23px!important}}


/* V31.3 — layout and branding */
.draft-five .draft-card:nth-child(3){border-top:5px solid var(--arena-mint,#86dfd5)!important}
.landing-header .brand-icon.tronk-logo{display:block!important;width:50px!important;height:50px!important;object-fit:cover!important;padding:0!important;background:none!important;clip-path:none!important;border:0!important;border-radius:0!important;flex:none!important}
.landing-header .brand-mark{gap:12px!important}.landing-header .brand-mark strong{font-size:22px!important;letter-spacing:.01em!important}
.landing-shell{width:100%!important;min-height:calc(100dvh - 28px)!important;display:flex!important;flex-direction:column!important}
.landing-shell .landing-content{flex:1!important;width:100%!important;min-height:0!important;padding-top:22px!important;padding-bottom:18px!important;align-content:center!important}
.landing-shell .landing-bottom{margin-top:auto!important}
.landing-shell .landing-art{min-width:0!important}.landing-shell .draft-five{height:clamp(330px,53dvh,640px)!important}
.landing-shell .landing-copy{max-width:100%!important}
@media(min-width:1100px){main{max-width:none!important;padding:0 clamp(10px,1.2vw,28px)!important}.landing-content{grid-template-columns:minmax(370px,.75fr) minmax(550px,1.25fr)!important;gap:clamp(20px,2.5vw,58px)!important}.home-v17 h1{font-size:clamp(60px,5.4vw,100px)!important}}
@media(min-width:1600px) and (min-height:800px){.landing-shell .draft-five{height:clamp(450px,58dvh,730px)!important}}
@media(max-width:1020px){.landing-shell{min-height:100dvh!important}.landing-content{grid-template-columns:1fr!important}.landing-shell .draft-five{height:340px!important}}
@media(max-width:620px){.landing-shell .draft-five{height:240px!important}.landing-header .brand-icon.tronk-logo{width:42px!important;height:42px!important}}

/* Active lobby branding: match landing identity */
#app .dashboard-brand{display:flex!important;align-items:center!important;gap:11px!important}
#app .dashboard-brand img.dashboard-tronk-logo{display:block!important;width:38px!important;height:38px!important;object-fit:contain!important;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;clip-path:none!important;flex:none!important}
#app .dashboard-brand strong{font-family:Inter,system-ui,'Segoe UI',Arial,sans-serif!important;font-size:15px!important;font-weight:900!important;letter-spacing:.015em!important;color:#edf5f3!important;white-space:nowrap!important}
@media(max-width:680px){#app .dashboard-brand img.dashboard-tronk-logo{width:32px!important;height:32px!important}#app .dashboard-brand strong{font-size:12px!important}}