/* Keep the original black/orange layout, with space for optional tools. */
html{scroll-padding-top:calc(var(--header-height) + 24px)}
input,select{border-color:#414141}input::placeholder{color:#aaa}
button,input,select{min-height:44px}
header nav a[aria-current=page]{color:var(--orange)}
.workspace-page{margin:0 auto}.page-heading{margin-bottom:32px}.page-heading h1{margin:0 0 14px}.page-heading p{margin:0;color:var(--muted)}
.setup{max-width:900px}.setup h1{text-align:center;margin-bottom:32px}.setup-grid{gap:30px 40px}.setup .panel{padding:36px}
.roster-launch{margin-top:14px;width:100%;text-align:left;font-size:.85rem;border:1px solid #454545;background:#202020}
.roster-preview{font-size:.8rem;color:var(--muted);margin:10px 0 0;overflow-wrap:anywhere}.text-button{padding:6px 0;background:none;color:var(--orange);font-size:.8rem}
.setup-grid fieldset small{display:block;margin-top:10px}.setup-submit{margin-top:24px}.setup .setup-submit .primary{margin:0 auto;max-width:420px}
.setup-timers{grid-column:1/-1;border-top:1px solid #353535;padding-top:22px}.setup-timers summary{cursor:pointer;color:var(--muted);line-height:1.5}.timer-settings{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px}.setup-timers p{font-size:.8rem;color:var(--muted);margin:16px 0 0}
.roster-inline-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.roster-inline-actions button{flex:1}
.map-tools{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}.map-tools input{max-width:240px}.mode-filters{display:flex;gap:10px;flex-wrap:wrap}.mode-filters button{font-size:.85rem;border:1px solid #414141}.mode-filters button[aria-pressed=true]{border-color:var(--orange);color:var(--orange)}
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px;max-height:55dvh;overflow:auto;padding:3px 10px 3px 3px;scrollbar-color:var(--orange) #262626}
.map-card{margin:0;border-radius:8px;border:1px solid #414141}.map-card .map-art,.map-card:not(.selected) .map-art{height:115px}.map-card .map-name{font-size:1rem;font-weight:400;padding:12px;min-height:0}.map-card .map-result{display:block;padding:0 12px 10px;color:#ffba8b;font-size:.8rem}.map-card:disabled{opacity:.65}
.action-bar{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}.action-bar p{margin:0}.action-bar .primary{order:2}
.roster-sidebar{padding-top:20px}.roster-sidebar summary{cursor:pointer;line-height:1.5;margin-bottom:20px}.roster-sidebar .team-card h2{display:none}
.hero-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
.room-heading-meta{display:flex;align-items:center;gap:20px}.turn-clock{display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:center;min-width:185px;padding:12px 16px;background:#161616;border:1px solid #565656;border-radius:8px}.timer-status{font-size:.85rem;color:var(--muted)}.turn-clock strong{font-size:1.45rem;color:var(--orange);font-weight:400;font-variant-numeric:tabular-nums}.timer-progress{grid-column:1/-1;width:100%;height:4px;appearance:none;border:0;overflow:hidden;background:#333}.timer-progress::-webkit-progress-bar{background:#333}.timer-progress::-webkit-progress-value{background:var(--orange)}.timer-progress::-moz-progress-bar{background:var(--orange)}.turn-clock.urgent,.turn-clock.overtime{border-color:var(--orange)}.turn-clock.overtime .timer-status{color:#ffba8b}
/* One role is visible initially; extra roles are added by the player. */
.balancer{max-width:1420px}.balancer-workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}.balance-editor{min-width:0;padding:30px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.section-heading h2{margin:0}.section-heading h2 span{font-size:.8rem;color:var(--muted);margin-left:12px}
#balancer-rows{display:grid;gap:18px}.balance-player{display:grid;grid-template-columns:minmax(150px,1fr) minmax(250px,1.65fr);gap:14px 20px;padding-bottom:18px;border-bottom:1px solid #333;align-items:start}.balance-name{display:flex;align-items:center;gap:12px;min-width:0}.player-number{color:#aaa;font-size:.8rem}.balance-name input{width:100%}.balance-roles{display:grid;gap:10px;min-width:0}.balance-role-row{display:grid;grid-template-columns:minmax(100px,1fr) minmax(130px,1.4fr) 34px;gap:10px;align-items:center}.balance-role-row select{width:100%;font-size:.9rem}.remove-role{padding:0;width:34px;min-height:44px;background:transparent;color:var(--muted)}.add-role{justify-self:start;background:none;color:var(--orange);padding:4px 0;min-height:30px;font-size:.8rem}.balance-actions{margin-top:24px}.balance-actions .primary{width:100%}
#balance-result{position:sticky;top:calc(var(--header-height) + 24px);scroll-margin-top:calc(var(--header-height) + 24px);min-width:0}.balance-placeholder{text-align:center;padding:36px 28px}.balance-placeholder img{margin-bottom:24px}.balance-placeholder h2{line-height:1.4}.balance-placeholder p{color:var(--muted);font-size:.9rem;margin-bottom:0}.balance-teams{grid-template-columns:1fr;gap:20px}.balance-teams .panel{padding:24px}.balance-teams h2{align-items:center;gap:12px}.balance-role-group{margin-top:18px}.balance-role-group p{font-size:.95rem}.balance-role-group small{white-space:normal}.balance-result-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.balance-result-heading .eyebrow{font-size:.8rem}.balance-quality{text-align:center;color:var(--muted);margin:20px 0}.balance-quality strong{color:var(--orange)}
/* Saved rosters stay in a focused editor; loading never overwrites the library. */
.roster-dialog{width:min(680px,94vw);max-height:90dvh;overflow:auto;padding:30px;background:#161616;border-color:#555}.roster-dialog .dialog-heading{gap:20px;margin-bottom:24px}.roster-dialog .dialog-heading h2{line-height:1.4}.roster-library-picker{display:flex;align-items:end;gap:12px}.roster-library-picker .field{flex:1;min-width:0}.roster-dialog .field>span{font-size:1rem}.roster-account-hint{font-size:.85rem;color:var(--muted);margin:18px 0}.roster-account-hint a{color:var(--orange);text-decoration:underline}.roster-name-field{margin:24px 0 18px}.roster-editor-status{padding:14px;background:#15281a;border:1px solid #376442;border-radius:6px;color:#c4edcf;margin:20px 0 0}.roster-editor-status.error{background:#331b13;border-color:#a35c35;color:#ffd6c1}.roster-save-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.danger-text{color:#ffb9aa;background:none}.dialog-bottom{display:flex;justify-content:flex-end;gap:12px;position:sticky;bottom:-30px;background:#161616;z-index:2;padding:20px 0;border-top:1px solid #444;margin-top:24px;box-shadow:0 -8px 14px #161616}
@media(prefers-reduced-motion:no-preference){button,a,input,select{transition:border-color .16s,background-color .16s,transform .16s}.phase-enter>.map-panel,.phase-enter>.draft-layout,.balance-teams,dialog[open]{animation:enter .22s ease-out}.home-sprite{animation:float 6s ease-in-out infinite}.sprite-two,.sprite-four{animation-delay:-3s}.home-feature-link:hover{transform:translateY(-3px)}@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -7px}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:1200px){.balancer-workspace{grid-template-columns:1fr}#balance-result{position:static}.balance-teams{grid-template-columns:1fr 1fr}.balance-placeholder{display:none}.balance-player{grid-template-columns:minmax(180px,1fr) minmax(260px,1.5fr)}.map-tools{flex-direction:column;align-items:stretch}.map-tools input{max-width:none}header{gap:20px}header nav{gap:20px}#connection{display:none}}
@media(max-width:1000px){.draft-layout{grid-template-columns:1fr 1fr}.hero-panel{grid-column:1/-1;grid-row:1}.roster-sidebar{padding:12px}.roster-sidebar summary{margin-bottom:10px}.hero-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}}
@media(max-width:760px){:root{--header-height:126px}header{flex-wrap:wrap;align-content:center;gap:6px 16px;padding:8px 4%}.brand{height:60px;width:180px}.brand img{transform:scale(.55);left:-20px}header nav{order:3;flex-basis:100%;gap:22px;font-size:.9rem;min-height:36px}.home-auth{font-size:.9rem;gap:16px;margin-left:auto}.home-view header nav [data-nav=account]{display:block}.room-view{--header-height:158px}.room-view header nav{flex-wrap:wrap;gap:14px 20px}main{padding:30px 4% 48px}.setup .panel{padding:26px}.setup-grid{gap:28px}.setup .field>span{font-size:1.1rem}.map-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-height:55dvh}.map-card .map-art,.map-card:not(.selected) .map-art{height:110px}.mode-filters{gap:8px}.mode-filters button{padding:10px;font-size:.8rem}.action-bar{gap:16px}.action-bar .primary{width:100%}.balance-editor{padding:24px}.balance-player{grid-template-columns:1fr;gap:14px;padding-bottom:24px}.balance-roles{padding-left:32px}.balance-role-row{grid-template-columns:minmax(90px,1fr) minmax(115px,1.35fr) 30px;gap:8px}.balance-role-row select{font-size:.85rem;padding:12px 8px}.section-heading{align-items:start;flex-direction:column;gap:10px}.balance-teams{grid-template-columns:1fr}.page-heading h1{font-size:2rem}.balance-result-heading .eyebrow{font-size:.75rem}.roster-dialog{padding:22px}.dialog-bottom{bottom:-22px}.roster-dialog .player-row select{width:110px}.room-heading-meta{gap:10px;flex-wrap:wrap;justify-content:flex-end}.turn-clock{min-width:150px;padding:10px;gap:5px 10px}.timer-status{font-size:.75rem}.turn-clock strong{font-size:1.2rem}.topline h1{font-size:1.3rem}.roster-inline-actions{flex-direction:column}.home-feature h3{white-space:normal}}
@media(max-width:620px){.setup-grid{grid-template-columns:1fr}.setup h1{margin-bottom:28px}.timer-settings{grid-template-columns:1fr;gap:20px}.roster-library-picker{flex-wrap:wrap}.roster-library-picker .field{flex-basis:100%}.roster-dialog .field>span{font-size:.9rem}.roster-dialog .dialog-heading h2{font-size:1.2rem}.roster-save-actions button{flex:1}.hero-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding-right:6px}.balance-roles{padding-left:0}.balance-role-row{grid-template-columns:minmax(90px,1fr) minmax(115px,1.35fr) 30px}.balance-editor{padding:20px}.room-heading-meta>.badge{max-width:145px;white-space:normal;overflow-wrap:anywhere}}
/* Keep the common one-role case to a single row. */
.balance-player{grid-template-columns:minmax(140px,1fr) minmax(250px,1.65fr) 90px;gap:14px;align-items:start;padding-bottom:14px}
#balancer-rows{gap:14px}.add-role{align-self:start;margin-top:7px;white-space:nowrap}.balance-role-row{grid-template-columns:minmax(95px,1fr) minmax(130px,1.4fr) 24px;gap:8px}.remove-role{width:24px}
.balance-actions{position:sticky;bottom:0;background:#121212;padding:16px 0 0;z-index:2}
@media(min-width:1201px) and (max-width:1440px){.balancer-workspace{grid-template-columns:1fr}.balance-teams{grid-template-columns:1fr 1fr}#balance-result{position:static}.balance-placeholder{display:none}}
@media(max-width:760px){.balance-player{grid-template-columns:1fr auto;gap:12px;padding-bottom:18px}.balance-name{grid-column:1}.balance-roles{grid-column:1/-1;grid-row:2;padding-left:0}.add-role{grid-column:2;grid-row:1;margin-top:6px}.balance-role-row{grid-template-columns:1fr 1.35fr 24px}.balance-actions{padding-bottom:10px}.setup-grid{gap:24px}.setup .panel{padding:24px}}
.player-pages{display:none}
@media(min-width:761px){#balancer-rows{grid-template-columns:1fr 1fr;gap:16px 32px}.balance-player{grid-template-columns:1fr auto;gap:10px;align-content:start;padding-bottom:14px}.balance-name{grid-column:1}.balance-roles{grid-column:1/-1;grid-row:2}.add-role{grid-column:2;grid-row:1}.balance-player:nth-child(-n+5){grid-column:1}.balance-player:nth-child(n+6){grid-column:2}.balance-player:nth-child(5n+1){grid-row:1}.balance-player:nth-child(5n+2){grid-row:2}.balance-player:nth-child(5n+3){grid-row:3}.balance-player:nth-child(5n+4){grid-row:4}.balance-player:nth-child(5n+5){grid-row:5}}
@media(max-width:760px){.player-pages{display:flex;gap:12px;margin-bottom:22px}.player-pages button{flex:1;font-size:.85rem}.player-pages button[aria-pressed=true]{border-color:var(--orange);color:var(--orange)}#balancer-rows[data-page="0"] [data-group="1"],#balancer-rows[data-page="1"] [data-group="0"]{display:none}}
/* Use the available width before adding vertical space. */
@media(min-width:1101px){.balancer-workspace{grid-template-columns:1fr}.balance-placeholder{display:none}#balance-result{position:static}.balance-teams{grid-template-columns:1fr 1fr}.balance-player{grid-template-columns:minmax(110px,1fr) minmax(220px,1.5fr) 76px;gap:10px;padding-bottom:18px}.balance-name{grid-column:1;gap:8px}.balance-roles{grid-column:2;grid-row:1}.add-role{grid-column:3;grid-row:1}.balance-role-row{grid-template-columns:minmax(80px,1fr) minmax(110px,1.35fr) 20px;gap:6px}.balance-role-row select{font-size:.85rem;padding:12px 8px}#balancer-rows{gap:18px 26px}.balance-name input{padding:12px 8px}}
.result-controls{display:flex;gap:12px}.balance-editor{scroll-margin-top:calc(var(--header-height) + 20px)}
/* Put match context beside the score, leaving the main space for picking. */
.room-overview{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px 32px;margin-bottom:24px}.room-overview .topline,.room-overview .scoreboard{margin:0}.room-overview .steps{grid-column:1/-1;margin:0}.ban-map-banner{max-width:none;background:#161616;border-color:#414141}.ban-map-banner img{width:112px;height:63px}.hero-grid{max-height:clamp(220px,calc(100dvh - 570px),420px)}.map-grid{max-height:clamp(250px,calc(100dvh - 465px),540px)}.hero-tools{flex-direction:row}.hero-tools select{width:125px}.hero-tools input{border-radius:7px}.action-bar{gap:16px}.pick-heading h2{margin:0}.room-view main{padding-top:26px}
@media(max-width:900px){.room-overview{grid-template-columns:1fr;gap:16px}.room-overview .scoreboard{margin:0}.room-overview .steps{margin:0}.room-overview .topline{align-items:center}.room-overview .scoreboard strong{font-size:1.6rem}.ban-map-banner img{width:90px;height:54px}.hero-grid{max-height:clamp(210px,calc(100dvh - 625px),360px)}.hero-panel h2{font-size:1.15rem;margin-bottom:18px}.hero-tools{gap:10px;margin-bottom:18px}.hero-tools select{width:100px}.hero-tools input{font-size:.9rem}.hero-panel{padding:18px 12px}.hero-panel .action-bar{gap:12px;margin-top:18px}.hero-panel .action-bar p{font-size:.8rem}.roster-sidebar summary{font-size:.8rem}.ban-map-banner .eyebrow{font-size:.7rem}.room-view .pool-note{margin:16px 0}.room-view .settings-line{margin:18px 0}}
.setup-options{grid-column:1/-1}.setup-options summary{cursor:pointer;color:var(--muted);line-height:1.5}.setup-rules{display:grid;grid-template-columns:1fr 1fr;gap:30px 40px}.setup-options[open] summary{display:none}
@media(max-width:620px){.setup-options{border-top:1px solid #353535;padding-top:20px}.setup-options[open] summary{display:list-item;margin-bottom:22px}.setup-rules{grid-template-columns:1fr;gap:24px}.setup-timers{padding-top:20px}.setup-submit{position:sticky;bottom:0;z-index:2;background:#070707;padding:14px 0;margin-top:14px}.setup-note{margin-top:10px}.setup-team .roster-preview{font-size:.75rem}}
@media(max-width:620px){header nav{font-size:.8rem;gap:10px}.room-view header nav{gap:10px 14px}.result-controls{gap:8px}.result-controls button{font-size:.8rem}}
.guest-roster .roster-library-picker,.guest-roster .roster-name-field,.guest-roster .roster-save-actions{display:none}
.roster-dialog .dialog-heading{margin-bottom:18px}.roster-dialog .roster-account-hint{margin:14px 0;font-size:.8rem}.roster-dialog .roster-name-field{margin:18px 0}.roster-dialog .dialog-bottom{padding:16px 0;margin-top:18px}
@media(max-width:620px){.roster-library-picker{flex-wrap:nowrap}.roster-library-picker .field{flex-basis:auto}.roster-library-picker button{font-size:.75rem;padding:10px}.roster-dialog .player-row{gap:8px;margin:10px 0}.roster-dialog .player-row input{padding:12px 8px}.roster-dialog .roster-name-field small{font-size:.7rem}.roster-dialog .dialog-bottom button{font-size:.95rem}.roster-dialog .roster-save-actions{margin-top:16px}.roster-dialog .roster-save-actions button{font-size:.8rem}}
.match-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}.match-tools button,.match-tools a{font-size:.85rem}.match-tools a{padding:12px}.result-panel .match-tools{justify-content:center}.result-panel .match-tools .primary{margin:0}
.result-export{width:min(900px,94vw);max-height:90vh;overflow:auto;border-radius:10px}.result-export>img{display:block;width:100%;height:auto;margin:20px 0}.result-export .primary{display:inline-block;padding:12px 18px;border-radius:6px;font-size:1rem}.result-export p{font-size:.8rem}
.turn-notification{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:-12px 0 20px}.turn-callout{padding:10px 16px;border:1px solid var(--orange);border-radius:6px;color:#ffac78;background:#27180f;font-size:.9rem}.turn-sound-toggle{font-size:.75rem;background:transparent;border:1px solid #444;min-height:36px;padding:8px 12px}.turn-sound-toggle[aria-pressed=true]{color:#ffb581;border-color:#995125}
@media(prefers-reduced-motion:no-preference){.turn-callout{animation:turn-glow .65s ease-out}@keyframes turn-glow{from{box-shadow:0 0 22px #fd600255}to{box-shadow:0 0 0 transparent}}}
.room-exit{display:flex;justify-content:flex-end;margin:16px 0}
.room-exit .quit-match{background:transparent;color:#e5aaa0;border:1px solid #72504b;padding:9px 16px;font-size:.8rem}
.quit-confirm{max-width:460px;width:calc(100% - 40px);padding:28px;border:1px solid #744222;border-radius:10px;background:#151515;color:#fff}
.quit-confirm::backdrop{background:rgb(0 0 0 / .75)}
.quit-confirm h2{font-size:1.3rem;margin:0 0 18px}.quit-confirm p{color:#bbb;line-height:1.6;margin:0 0 24px}
.quit-confirm form{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:12px}
.account-section-tabs{margin-top:24px;display:flex;gap:8px}
.account-section-tabs button[aria-pressed="true"]{background:var(--orange);color:#111}
.account-roster-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.account-roster-heading h2{margin:0}.account-roster-heading h2 small{color:#aaa;font-size:.75em}
.account-roster-list{display:grid;gap:12px;margin-top:20px}
.account-roster-card{padding:16px;border:1px solid #373737;border-radius:8px;background:#171717}
.account-roster-card h3{margin:0 0 10px;overflow-wrap:anywhere}
.account-roster-card p{display:flex;flex-wrap:wrap;gap:7px 12px;margin:0 0 14px}
.account-roster-card p span{overflow-wrap:anywhere}.account-roster-card small{color:#aaa;font-size:.7em}
.account-roster-actions,.account-roster-pagination{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.account-roster-actions a{color:var(--orange)}.account-roster-pagination{justify-content:center;margin-top:16px}
.account-roster-empty{padding:28px 0 12px;color:#bfbfbf}
.account-rosters-shell{grid-template-columns:1fr;gap:20px;margin-top:24px}
.account-rosters-shell .account-intro{padding-top:0}
.account-rosters-shell .account-intro h1{margin:10px 0;font-size:clamp(26px,3vw,38px)}
.account-rosters-shell .account-section-tabs{margin-top:16px;width:fit-content}
@media(min-width:801px){.account-rosters-shell .account-roster-list{grid-template-columns:repeat(2,minmax(0,1fr))}}