.room-page { margin:0; background:#171310; color:#f5efe7; }
.room-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 3vw; border-bottom:1px solid #ffffff19; }
.room-header .geo-brand { color:inherit; }
.room-header .geo-brand span { display:block; font:400 .75rem/1.8 system-ui; letter-spacing:0; opacity:.7; }
.room-main { max-width:1600px; margin:auto; padding:1.2rem 3vw; }
.room-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.room-heading h1 { font-size:clamp(1.6rem,3vw,2.6rem); margin:.25rem 0; }
.room-heading .eyebrow { color:#cba76a; margin:0; }
.room-badge { border:1px solid #ffffff26; border-radius:2rem; padding:.5rem .8rem; font-size:.75rem; opacity:.75; }
.room-stage { position:relative; height:min(72vh,820px); min-height:400px; border:1px solid #ffffff22; border-radius:16px; overflow:hidden; background:#24282e; }
#room-canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; outline-offset:-4px; }
#room-canvas:active { cursor:grabbing; }
.room-toolbar { position:absolute; top:1rem; inset-inline:1rem; display:flex; flex-wrap:wrap; gap:.5rem; pointer-events:none; }
.room-toolbar button { pointer-events:auto; background:#211c17e8; color:#f8f2e7; border:1px solid #ffffff35; backdrop-filter:blur(8px); }
.room-toolbar button.primary { background:#d0ae74; color:#231b10; }
.room-toolbar button:disabled { opacity:.5; }
.room-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; background:#171310ed; text-align:center; padding:2rem; z-index:2; }
.room-loading[hidden] { display:none; }
.room-loading button[hidden] { display:none; }
.room-pad { position:absolute; bottom:3rem; inset-inline-end:1rem; display:grid; grid-template-columns:repeat(3,48px); gap:5px; direction:ltr; }
.room-pad button { width:48px; height:48px; border:1px solid #ffffff55; background:#201a14dd; color:white; border-radius:12px; font-size:1.4rem; touch-action:none; user-select:none; }
.room-pad button:first-child { grid-column:2; }
.room-pad button:nth-child(2) { grid-column:1; }
.room-turn { position:absolute; bottom:10.4rem; inset-inline-end:1rem; display:flex; gap:5px; direction:ltr; }
.room-turn button { min-width:48px; min-height:48px; border:1px solid #ffffff55; border-radius:12px; background:#201a14dd; color:white; padding:.4rem .6rem; cursor:pointer; }
.room-turn button:first-child,.room-turn button:last-child { font-size:1.5rem; }
.room-xr-hint { font-size:.8rem; color:#d9c8ae; line-height:1.7; max-width:100ch; }
.room-hint { position:absolute; bottom:.6rem; inset-inline:1rem; margin:0; color:white; font-size:.78rem; text-shadow:0 1px 4px black; pointer-events:none; }
.room-footer { display:flex; justify-content:space-between; align-items:center; gap:1.2rem; font-size:.8rem; color:#c2b7a9; line-height:1.6; }
.room-footer p { max-width:70ch; }
.room-footer a { color:#e9c68b; white-space:nowrap; }
.room-stage:fullscreen { width:100%; height:100%; border:0; border-radius:0; }
.room-poi-panel { position:absolute; z-index:3; top:var(--guide-panel-top,4.8rem); inset-inline-end:1rem; width:min(360px,calc(100% - 2rem)); max-height:calc(100% - var(--guide-panel-top,4.8rem) - .6rem); overflow:auto; box-sizing:border-box; padding:.65rem .8rem; border:1px solid #dfbd8380; border-radius:12px; background:#171a1dbd; box-shadow:0 6px 20px #0005; color:#fff8eb; }
.room-poi-panel[hidden],.room-observation-controls[hidden] { display:none; }
/* Opposite the movement pad: panels must not hide the navigation controls. */
.room-poi-panel { inset-inline-start:1rem; inset-inline-end:auto; }
.room-poi-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.room-poi-kicker { color:#eac78e; font:.68rem/1.4 system-ui; letter-spacing:.12em; text-transform:uppercase; }
.room-poi-panel h2 { margin:.3rem 0 .1rem; font-size:1.2rem; }
.room-poi-artist { margin:.1rem 0 .75rem; color:#e6c79a; }
.room-poi-description { margin:.4rem 0 .65rem; font-size:.85rem; line-height:1.45; }
.room-poi-audio { padding:.35rem 0; border-block:1px solid #ffffff30; font-size:.82rem; }
.room-poi-audio > div { display:flex; gap:.5rem; margin:.45rem 0; }
.room-poi-audio button,.room-poi-actions button,.room-poi-actions a,.room-poi-close,.room-observation-controls button,.room-observation-controls a { min-height:44px; border:1px solid #d7b780; border-radius:9px; background:#292d30; color:#fff5e8; padding:.5rem .75rem; font:600 .8rem/1.25 system-ui; cursor:pointer; text-decoration:none; text-align:center; }
.room-poi-audio button:disabled { opacity:.5; cursor:default; }
.room-poi-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; margin-top:.55rem; }
.room-poi-actions a { display:flex; align-items:center; justify-content:center; background:#d0ae74; color:#211a10; }
.room-poi-close { min-height:44px; padding:.25rem .55rem; }
.room-observation-controls { position:absolute; z-index:3; top:4.8rem; inset-inline-start:1rem; display:flex; flex-wrap:wrap; gap:.4rem; max-width:calc(100% - 2rem); padding:.35rem; border:1px solid #d7b780; border-radius:10px; background:#171a1dec; }
.room-observation-controls a { display:flex; align-items:center; background:#d0ae74; color:#211a10; }
.room-observation-controls button:disabled { opacity:.5; }
.room-stage[data-xr="true"] .room-poi-panel,.room-stage[data-xr="true"] .room-observation-controls { display:none; }
[dir="rtl"] .room-poi-panel { text-align:right; }
.room-guide-panel .room-poi-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.room-guide-panel #guide-mona { background:#d0ae74; color:#211a10; }
.room-guide-panel [hidden] { display:none; }
.room-guide-status { font-size:.8rem; color:#e6c79a; }
.room-guide-panel .room-poi-close { min-height:44px; }
.room-guide-qa { margin-block:1rem; padding:1rem; border:1px solid #dfbd83; border-radius:12px; }
.room-guide-qa form { display:flex; gap:.6rem; flex-wrap:wrap; align-items:end; margin-block:1rem; }
.room-guide-qa label { display:flex; flex-direction:column; gap:.3rem; }
.room-guide-qa input { width:6rem; }
.room-guide-qa button,.room-guide-qa input { min-height:44px; padding:.4rem .6rem; box-sizing:border-box; }
.room-guide-qa > button { margin-inline-end:.5rem; margin-block-end:.5rem; }
.room-guide-qa textarea { display:block; box-sizing:border-box; width:100%; max-width:100%; background:#161c22; color:#fff3d8; padding:.7rem; }
@media(max-width:600px) { .room-main { padding:.8rem 12px; } .room-badge { display:none; } .room-stage { height:66vh; min-height:380px; } .room-toolbar { top:.6rem; inset-inline:.6rem; gap:.35rem; } .room-toolbar button { font-size:.72rem; padding:.6rem .7rem; } .room-hint { max-width:55%; font-size:.67rem; } .room-pad { bottom:1rem; } .room-footer { display:block; } .room-footer p { margin:.8rem 0; } }
@media(max-width:600px) { .room-turn { bottom:7.3rem; } .room-turn button { font-size:.75rem; } .room-hint { max-width:calc(100% - 190px); } .room-toolbar button { min-height:44px; } }
@media(max-width:600px) { .room-poi-panel { inset-inline-end:.6rem; width:min(300px,calc(100% - 1.2rem)); max-height:min(45%,calc(100% - var(--guide-panel-top,4.8rem) - 9rem)); padding:.6rem; } .room-poi-description { font-size:.8rem; } .room-poi-actions { grid-template-columns:repeat(2,minmax(0,1fr)); } .room-observation-controls { top:3.7rem; inset-inline-start:.6rem; } }
@media(max-width:600px) { .room-poi-panel { inset-inline-start:.6rem; inset-inline-end:auto; } }