/* Compact home screen: primary play actions on the left, supporting controls on the right. */
.topbar{height:56px;padding:0 clamp(14px,3vw,28px)}
.topbar-actions{display:flex;align-items:center;gap:18px}
.home{width:100%;max-width:980px;min-height:calc(100dvh - 56px);margin:0 auto;padding:14px clamp(12px,3vw,28px);display:flex;align-items:center}
.setup{width:100%;margin:0;align-self:center;display:grid;grid-template-columns:minmax(330px,1.16fr) minmax(280px,.84fr);grid-template-areas:"online support" "practice support" "info support";grid-template-rows:auto auto auto;gap:8px 18px;align-items:start}
.setup .online-main{grid-area:online}.setup .practice-main{grid-area:practice}.setup .match-info{grid-area:info}.setup .support-panel{grid-area:support}
.setup:before{left:20px;width:62px}
.online-main{padding:22px}.setup .online-main h2{margin:0 0 16px;font-size:22px;font-weight:650}.online-main .room-role{margin:0 0 12px}.online-main>.primary{margin:0 0 9px;min-height:50px;font-size:15px}.join-row .secondary{min-width:74px}
.practice-row.practice-main{margin:0;padding:11px 13px;gap:10px;border:1px solid #4b5d50;background:#162019;border-radius:3px}.practice-main label{font-size:15px;color:#e4ece3;font-weight:600}.practice-main select{min-height:38px;margin-left:auto}.practice-main button{min-width:72px;min-height:38px;padding:7px 12px;background:#c0d0bd;color:#162018}
.match-info{min-height:50px;margin:0;padding:8px 4px;border:1px solid #242d27;background:#0d120f}.match-info>span{flex:1;padding:0 14px}.match-info b{font-size:clamp(17px,2vw,21px)}.match-info small{font-size:10px;line-height:1.25}
.support-panel{min-height:100%;padding:18px;border:1px solid #303a32;background:#0d120f;display:flex;flex-direction:column;justify-content:center}
.audio-check{margin:0;padding:0 0 16px;font-size:13px}.audio-check button{font-size:13px}.controls-help{padding:16px 0;border-top:1px solid #262d28;border-bottom:1px solid #262d28;color:#89968d;font-size:13px}.controls-help summary{color:#d7dfd6;font-weight:600}.controls-help p{margin:12px 0 0;font-size:12px;line-height:1.65;white-space:pre-line}.support-panel>#stage-list{margin-top:16px;min-height:42px}
@media(max-width:680px){
  .topbar{height:50px}.brand{font-size:14px}.brand-mark{font-size:20px;margin-right:5px}.topbar-actions{gap:12px}.icon-button{font-size:11px}
  .home{min-height:calc(100dvh - 50px);padding:8px 10px;align-items:center}
  .setup{max-width:520px;margin:auto;grid-template-columns:1fr;grid-template-areas:"online" "practice" "info" "support";gap:6px}
  .online-main{padding:13px}.setup .online-main h2{font-size:18px;margin-bottom:8px}.online-main .room-role{font-size:12px;margin-bottom:7px}.online-main .room-role select{padding:5px 7px}.online-main>.primary{min-height:39px;margin-bottom:6px;padding:7px 12px}
  input:not([type=range]):not([type=checkbox]){padding:7px 9px;font-size:16px}.join-row .secondary{min-height:38px;padding:7px 11px}
  .practice-row.practice-main{padding:6px 9px}.practice-main label{font-size:13px}.practice-main select{min-height:33px;padding:4px 6px}.practice-main button{min-width:60px;min-height:33px;padding:5px 9px}
  .match-info{min-height:42px;padding:5px 2px}.match-info>span{padding:0 7px;gap:1px}.match-info b{font-size:15px}.match-info small{font-size:9px}
  .support-panel{padding:10px 12px;min-height:0}.audio-check{padding-bottom:9px;font-size:11px}.audio-check button{font-size:11px}.controls-help{padding:9px 0;font-size:12px}.controls-help p{font-size:11px;line-height:1.5}.support-panel>#stage-list{margin-top:9px;min-height:34px;padding:6px 10px}
}
@media(max-height:600px){
  .home{align-items:flex-start;padding-top:6px;padding-bottom:6px}.setup{gap:5px}.online-main{padding:10px 13px}.setup .online-main h2{margin-bottom:6px}.support-panel{padding-top:8px;padding-bottom:8px}.controls-help{padding:7px 0}.audio-check{padding-bottom:7px}.support-panel>#stage-list{margin-top:7px}
}