/* Wide room, compact captions, and an explicit activity drawer. */
body.three-island #room.immersive-room{width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#fffcf5;overflow:hidden}
body.three-island #room.immersive-room .room-frame{display:block;height:100%;min-height:0}
body.three-island #room.immersive-room .room-view{position:absolute;inset:0;width:100%;height:100%;min-height:0}
body.three-island #room.immersive-room .room-content{position:absolute;z-index:5;right:24px;bottom:28px;width:min(460px,calc(100vw - 32px));max-height:65dvh;padding:24px 28px;background:#fffdf6f5;border:1px solid #e4d8c3;border-radius:22px;box-shadow:0 12px 40px #534c3820;overflow:auto}
body.three-island #room.immersive-room .room-content[hidden]{display:none}
body.three-island #room.immersive-room #room-close{position:absolute;z-index:8;top:18px;right:20px;width:48px;height:48px;min-height:48px;background:#fffdf4;border:1px solid #e6dccb;border-radius:50%}
.room-stage-bar{position:absolute;z-index:7;top:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:7px 10px 7px 24px;border:1px solid #e7dac5;border-radius:30px;background:#fffdf6ed;box-shadow:0 5px 22px #67543c15;white-space:nowrap}
.room-stage-bar span{font-family:serif;font-size:18px;color:#435443}.room-stage-bar button{min-height:44px;background:#db9671;color:#fffdf5;border-radius:24px;padding:10px 19px}
.room-stage-greeting{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:72px;width:min(560px,calc(100vw - 32px));padding:20px 26px;background:#fffdf5f2;border:1px solid #e5d8c3;border-radius:22px;box-shadow:0 8px 30px #66523b15;font-size:15px;color:#52614d;text-align:center;pointer-events:none}
body.three-island #room.immersive-room .room-view>span{bottom:18px;left:20px}
body.three-island #room.immersive-room .room-exit-label{right:20px;bottom:18px;min-height:44px}
@media(max-width:650px){.room-stage-bar{top:12px;left:12px;transform:none;gap:8px;padding:5px 7px 5px 14px;max-width:calc(100vw - 82px)}.room-stage-bar span{font-size:15px}.room-stage-bar button{font-size:12px;padding:9px 11px}.room-stage-greeting{bottom:78px;font-size:13px;padding:14px 18px}body.three-island #room.immersive-room #room-close{top:12px;right:12px}body.three-island #room.immersive-room .room-content{left:12px;right:12px;bottom:72px;width:auto;max-height:52dvh;padding:20px}body.three-island #room.immersive-room .room-view>span{font-size:9px;left:12px;bottom:20px;padding:6px 9px;max-width:45vw}}
@media(prefers-reduced-motion:no-preference){.immersive-room .room-content:not([hidden]){animation:room-drawer-in .24s ease-out}@keyframes room-drawer-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}}

@media(min-width:900px){body.three-island #room.immersive-room.room-activity-open .room-view{width:calc(100% - 488px)}}
@media(max-width:650px){body.three-island #room.immersive-room.room-activity-open .room-view{top:68px;height:36dvh}body.three-island #room.immersive-room.room-activity-open .room-content{max-height:48dvh}}

@media(min-width:651px) and (max-width:899px){body.three-island #room.immersive-room.room-activity-open .room-view{top:74px;height:36dvh}body.three-island #room.immersive-room.room-activity-open .room-content{left:24px;right:24px;bottom:72px;width:auto;max-height:48dvh}}

@media(min-width:651px) and (max-height:600px){body.three-island #room.immersive-room.room-activity-open .room-view{top:0;width:calc(100% - 348px);height:100%}body.three-island #room.immersive-room.room-activity-open .room-content{left:auto;right:12px;bottom:16px;width:320px;max-height:calc(100dvh - 92px)}}

/* The short landscape introduction has its own column beside the 3D view. */
@media(min-width:651px) and (max-height:600px){
 body.three-island #room.immersive-room.has-room-greeting:not(.room-activity-open) .room-view{left:230px;width:calc(100% - 230px)}
 .immersive-room .room-stage-greeting{left:12px;top:92px;bottom:auto;transform:none;width:206px;max-height:calc(100dvh - 166px);padding:14px;font-size:13px;line-height:1.7;text-align:left;overflow:auto;pointer-events:auto}
}