/* Shared HUD lanes: header, combo, notices, then side panels. */
body.game-active{--hud-header-top:16px;--hud-combo-top:88px;--hud-notice-top:133px;--hud-panels-top:100px}
body.game-active .top{top:16px;left:20px;right:20px}
body.game-active .top .pill,body.game-active .top .tag,body.game-active #roomBanner{display:none}
#roomTitleBar{display:flex;align-items:center;justify-content:space-between;gap:22px;top:var(--hud-header-top,16px);width:min(480px,calc(100vw - 590px));max-width:none;min-height:56px;padding:10px 20px;border-radius:12px;text-align:left;box-sizing:border-box}
#roomTitle{display:block;min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;font-size:21px;letter-spacing:2px;line-height:1.2}
.room-timer-group{display:flex;align-items:center;gap:12px;flex-shrink:0;padding-left:18px;border-left:1px solid #365445}
#roomCountdown{display:block;margin:0;font-size:29px;line-height:1;font-variant-numeric:tabular-nums}
#roomTitleBar small{max-width:55px;font-size:8px;letter-spacing:1px;line-height:1.5}
#combo{top:var(--hud-combo-top,88px);left:50%;transform:translateX(-50%);z-index:9;max-width:min(460px,calc(100vw - 32px));padding:8px 18px;background:#231c10ed;border:1px solid #8d6e35;border-radius:40px;text-align:center;font-size:22px;line-height:1.15;white-space:nowrap;text-shadow:none;box-sizing:border-box}
#combo:empty{display:none}
#toast{top:var(--hud-notice-top,133px);left:50%;transform:translateX(-50%);z-index:10;max-width:min(480px,calc(100vw - 32px));padding:9px 16px;box-sizing:border-box;font-size:13px;line-height:1.45;text-align:center;background:#0b1829ed;border-radius:10px;overflow-wrap:anywhere}
#toast:empty{display:none}
body.game-active #stats{top:var(--hud-panels-top);left:20px;gap:8px}
body.game-active #stats .stat{min-width:104px;padding:12px 16px}
body.game-active #goldHUD{top:190px;left:20px;bottom:auto;width:245px;box-sizing:border-box}
body.game-active #pause{top:16px;right:20px;z-index:12}
body.game-active #connectionBadge{top:58px;right:20px;z-index:11;max-width:220px}
body.game-active #board{top:var(--hud-panels-top);right:20px;max-height:calc(100vh - 300px);overflow:auto;box-sizing:border-box}
@media(max-width:1100px){
 body.game-active{--hud-header-top:82px;--hud-combo-top:147px;--hud-notice-top:192px;--hud-panels-top:242px}
 #roomTitleBar{width:min(520px,calc(100vw - 32px));min-height:50px;gap:16px;padding:10px 16px}
 body.game-active #goldHUD{top:326px}
}
@media(max-width:650px){
 body.game-active{--hud-header-top:78px;--hud-combo-top:135px;--hud-notice-top:178px;--hud-panels-top:230px}
 body.game-active .top{top:14px;left:12px;right:12px}
 body.game-active .vespotr-top-logo{width:134px}
 #roomTitleBar{width:calc(100vw - 24px);padding:10px 14px;gap:10px;min-height:48px;border-radius:10px}
 #roomTitle{font-size:16px;letter-spacing:1px}
 #roomCountdown{font-size:25px}
 .room-timer-group{gap:8px;padding-left:12px}
 #roomTitleBar small{font-size:7px;max-width:45px}
 #combo{font-size:17px;padding:8px 14px;max-width:calc(100vw - 24px)}
 #toast{font-size:11px;padding:6px 12px;max-height:42px;overflow:hidden}
 body.game-active #stats{left:12px;right:12px;gap:6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 body.game-active #stats .stat{min-width:0;padding:9px 10px}
 body.game-active #stats .stat strong{font-size:20px;margin-top:4px}
 body.game-active #stats .stat small{font-size:8px}
 body.game-active #goldHUD{left:12px;top:305px;width:calc(100vw - 170px);padding:8px}
 body.game-active #goldHUD strong{font-size:17px;margin-left:3px}
 body.game-active #goldHUD button{padding:6px 4px;font-size:8px;margin:6px 2px 3px 0}
 body.game-active #board{top:305px;right:12px;width:134px;padding:10px;max-height:105px;font-size:10px}
 body.game-active #board h3{font-size:8px;letter-spacing:1px;margin-bottom:9px}
 body.game-active #pause{top:15px;right:12px;padding:8px 12px;font-size:11px}
 body.game-active #connectionBadge{top:51px;right:12px;font-size:9px;padding:5px 8px}
 body.game-active #chatBox{left:12px;bottom:170px;width:calc(100vw - 170px);padding:7px;box-sizing:border-box;max-height:110px}
 body.game-active #chatMessages{height:48px;font-size:10px}
 body.game-active #chatForm{gap:3px;flex-wrap:wrap}
 body.game-active #chatForm input{flex:1;min-width:40px;width:50px;padding:5px}
 body.game-active #chatForm select{width:49px;font-size:8px}
 body.game-active #chatForm button{padding:5px;font-size:8px}
 body.game-active #map{right:12px;bottom:170px;width:130px;height:130px}
}
@media(max-width:650px) and (max-height:740px){
 body.game-active{--hud-panels-top:218px;--hud-notice-top:175px}
 body.game-active #goldHUD,body.game-active #board{top:285px}
 body.game-active #chatBox{bottom:160px;max-height:85px}
 body.game-active #chatMessages{height:25px}
 body.game-active #map{bottom:160px;width:96px;height:96px}
}
@media(max-height:500px) and (min-width:651px){
 body.game-active{--hud-header-top:10px;--hud-combo-top:70px;--hud-notice-top:111px;--hud-panels-top:80px}
 #roomTitleBar{width:330px;min-height:46px;padding:8px 12px}
 #roomTitle{font-size:16px}#roomCountdown{font-size:24px}
 body.game-active .vespotr-top-logo{width:128px}
 body.game-active #stats .stat{min-width:70px;padding:8px}
 body.game-active #stats .stat strong{font-size:18px}
 body.game-active #goldHUD{top:146px;width:220px;padding:8px}
 body.game-active #chatBox{bottom:62px;width:220px;padding:7px}
 body.game-active #chatMessages{height:30px}
 body.game-active #board{width:150px;max-height:110px;padding:10px}
 body.game-active #map{width:85px;height:85px;bottom:65px}
}
@media(max-width:650px) and (max-height:680px){
 body.game-active #board{max-height:60px}
 body.game-active #chatBox{bottom:145px;max-height:50px}
 body.game-active #chatMessages{display:none}
 body.game-active #map{bottom:145px;width:70px;height:70px}
}