/* Scenery is the viewport, not a card. HUDs float above it. */
body.in-room{background:#bbb9ac}
.in-room>header{position:fixed;inset:0 0 auto;height:auto;min-height:90px;padding:16px 24px;border:0;background:linear-gradient(#19170edb,#19170e80,transparent);pointer-events:none}
.in-room>header>*{pointer-events:auto}
.in-room main{position:fixed;inset:0;height:100dvh;padding:0;overflow:hidden}
.in-room #room{position:absolute;inset:0;display:block}
.in-room .scene{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none;background:#aaa99c}
.in-room #seats{position:absolute;inset:0}
.in-room .controls,.in-room .music,.room-voice{position:absolute;z-index:9;backdrop-filter:blur(12px);box-shadow:0 8px 30px #0003}
.in-room .controls{left:50%;bottom:calc(70px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:10px 14px;background:#211a14da}
.in-room .music{left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(720px,calc(100% - 32px));background:#211a14d9}
.room-voice{top:110px;right:20px;display:flex;align-items:center;gap:8px;padding:10px 12px;max-width:calc(100% - 32px);background:#211a14dc;border:1px solid var(--line);border-radius:14px}
#voiceState{font-size:11px;color:var(--muted)}.room-voice button{min-height:34px;font-size:12px;padding:6px 10px}
.in-room #status{bottom:calc(2px + env(safe-area-inset-bottom));left:16px;right:16px;color:#fff;text-shadow:0 1px 4px #000}
.in-room #private{bottom:160px;right:20px}
.scene{touch-action:none;user-select:none;cursor:grab}.scene.is-panning,.scene.is-panning .seat{cursor:grabbing}.scene:focus-visible{outline:2px solid #cddfbe;outline-offset:-3px}
.scene-camera-controls{position:absolute;z-index:9;top:176px;right:20px;display:flex;align-items:center;gap:3px;padding:5px;background:#211a14da;border:1px solid #d8c09b40;border-radius:12px;backdrop-filter:blur(12px)}
.scene-camera-controls button{min-width:30px;min-height:32px;padding:4px 8px;font-size:14px}.scene-camera-controls output{min-width:40px;text-align:center;font-size:11px;font-variant-numeric:tabular-nums;color:#e8d8bc}
@media(max-width:700px){
 .in-room>header{min-height:94px;padding:12px 14px}.in-room header>.actions{max-width:45%}
 .room-voice{top:104px;left:12px;right:auto;padding:7px 10px;flex-wrap:wrap;gap:6px}.room-voice button{font-size:11px;min-height:30px}.room-voice #voiceState{font-size:10px}
 .in-room .controls{width:calc(100% - 24px);max-width:none;padding:8px 10px;bottom:calc(70px + env(safe-area-inset-bottom));gap:5px}
 .in-room .controls .own-timer{width:100%}.in-room .controls button,.in-room .controls select{min-height:29px;font-size:10px;padding:4px 7px}
 .in-room .music{width:calc(100% - 24px);bottom:calc(16px + env(safe-area-inset-bottom));padding:6px 8px;flex-wrap:nowrap}
 .in-room .music #tracks{max-width:25vw}.in-room .music #trackLabel{max-width:20vw}.in-room .music button{font-size:10px;padding:4px 6px}
 .in-room #private{bottom:185px;right:12px;height:min(340px,calc(100dvh - 345px))}
 .scene-camera-controls{right:12px;top:164px;padding:4px}.scene-camera-controls button{min-width:28px;min-height:32px;padding:4px 6px}
}
@media(max-height:500px) and (min-width:701px){
 .in-room>header{min-height:60px;padding:8px 16px}.room-voice{top:66px;right:16px;padding:6px 9px}
 .in-room .controls{bottom:58px;padding:5px 8px}.in-room .music{bottom:12px;padding:5px 8px}.in-room #private{bottom:105px;height:calc(100dvh - 180px)}
 .scene-camera-controls{top:112px;right:16px}
}