/* R80: compact room HUD. Game-specific displays retain their visibility rules. */
header{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));top:calc(8px + env(safe-area-inset-top));gap:8px}
header h1{margin:0}
header .brand-logo--hero{width:135px}
#releaseStatus{display:block;font-size:7px;max-width:190px;line-height:1.2;letter-spacing:0;margin-top:3px}
.topbuttons{gap:6px;flex-wrap:nowrap}
#controllerSetup,#resetControls,#help,#reference,#location{display:none!important}
.topbuttons #lighting,.topbuttons #roomSound{width:38px;height:38px;min-width:38px;padding:7px;font-size:0;position:relative;border-radius:50%;background:#080d10b8}
#lighting::before,#roomSound::before{content:"";display:block;width:24px;height:24px;background:currentColor;mask:var(--hud-icon) center/contain no-repeat;-webkit-mask:var(--hud-icon) center/contain no-repeat}
#lighting{--hud-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6m-5%203h4M8%2014a6%206%200%201%201%208%200l-1%204H9z%22%2F%3E%3C%2Fsvg%3E");--hud-icon-on:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M12%202a7%207%200%200%200-4.9%2012%2018%2018%200%200%200-2.2%203.2c-.6%201-.8%201.9-.8%202.8h7.8c0-.9-.2-1.8-.8-2.8A18%2018%200%200%200%2019%209a7%207%200%200%200-7-7Zm-3%2017h6v2H9zm1%203h4v1h-4z%22%2F%3E%3C%2Fsvg%3E");color:#a4b0b5}
#lighting[aria-pressed="true"]{color:#ffe45d;background:#2b2509e8;border-color:#ffe45d;box-shadow:0 0 16px #ffd44766,inset 0 0 9px #ffd44726;filter:none}
#lighting[aria-pressed="true"]::before{mask:var(--hud-icon-on) center/contain no-repeat;-webkit-mask:var(--hud-icon-on) center/contain no-repeat;filter:drop-shadow(0 0 5px #ffd447)}
#roomSound{--hud-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%209%205%200%205-5v16l-5-5H3zM16%208q5%204%200%208m3-11q8%207%200%2014%22%2F%3E%3C%2Fsvg%3E");color:#d9f8ff}
#roomSound[aria-pressed="false"]::after{content:"";position:absolute;width:28px;height:2px;background:#ff7a7a;left:4px;top:17px;transform:rotate(-45deg);box-shadow:0 0 0 1px #080d10}
#stations{left:50%;right:auto;transform:translateX(-50%);bottom:calc(6px + env(safe-area-inset-bottom));width:min(440px,calc(100% - 16px));max-width:none;display:flex;flex-wrap:nowrap;align-items:center;gap:2px;padding:3px;border-radius:12px}
#stations button{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;min-height:38px;height:40px;padding:7px 3px;font-size:0;border-radius:8px}
#stations button svg{width:26px;height:26px;pointer-events:none}
#joysticks{bottom:calc(58px + env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}
.stick-wrap{gap:3px;font-size:9px}
#zoomControls,body.pool-view #zoomControls{top:calc(56px + env(safe-area-inset-top));bottom:auto;right:max(10px,env(safe-area-inset-right));width:32px;max-height:none;flex-direction:column;gap:2px;padding:3px 1px;border-radius:10px}
#zoomControls button{width:28px;min-height:26px;height:26px;font-size:19px;border:0;background:transparent}
#zoomControls #zoomReset{width:28px;min-height:22px;height:22px;font-size:8px}
#zoomRange{writing-mode:vertical-lr;direction:rtl;flex:none;width:16px;height:80px;min-height:0;margin:0}
#zoomReadout{min-width:0;font-size:8px;line-height:12px}
#retryRoomAssets{top:calc(58px + env(safe-area-inset-top));left:12px;width:auto;max-width:190px;font-size:9px;padding:5px 7px;min-height:0}
@media(max-width:650px){header .brand-logo--hero{width:105px}#releaseStatus{font-size:6px;max-width:170px}#stations{display:flex;gap:1px}#stations button{padding:6px 2px;height:38px}#joysticks{bottom:calc(56px + env(safe-area-inset-bottom))}}
@media(max-height:540px) and (orientation:landscape){header .brand-logo--hero{width:73px}#stations{width:350px;bottom:calc(4px + env(safe-area-inset-bottom))}#stations button{height:34px}#joysticks{bottom:calc(45px + env(safe-area-inset-bottom))}#zoomRange{height:52px}}
