:root { color-scheme: dark; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic",sans-serif; }
* { box-sizing: border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#07111a; color:#fff; }
#xrCanvas { position:fixed; inset:0; width:100%; height:100%; }
#xrOverlay { position:fixed; inset:0; pointer-events:none; display:flex; flex-direction:column; padding:max(14px,env(safe-area-inset-top)) 18px 18px; }
#reticle { display:none; position:absolute; left:50%; top:50%; width:34px; height:34px; transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.95); border-radius:50%; box-shadow:0 0 8px rgba(0,0,0,.9); }
#reticle span,#reticle span:after { position:absolute; content:""; left:50%; top:50%; background:#ffd34d; transform:translate(-50%,-50%); }
#reticle span { width:14px; height:3px; }
#reticle span:after { width:3px; height:14px; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border-radius:14px; background:rgba(7,17,26,.82); backdrop-filter:blur(10px); }
header small { color:#75d5ff; }
header h1 { margin:2px 0 0; font-size:clamp(17px,2.5vw,27px); }
button,a { pointer-events:auto; font:inherit; }
#enterVr { border:0; border-radius:999px; padding:13px 22px; background:#1689ff; color:#fff; font-weight:700; white-space:nowrap; }
#enterVr:disabled { opacity:.55; }
#guide { align-self:center; max-width:720px; margin-top:18vh; padding:22px 26px; border-radius:16px; background:rgba(7,17,26,.88); text-align:center; pointer-events:auto; }
#guide p { margin:6px 0; line-height:1.6; }
#guide a { display:inline-block; margin-top:12px; color:#75d5ff; }
#sceneButtons { margin-top:auto; display:flex; gap:8px; overflow-x:auto; padding:8px; border-radius:12px; background:rgba(7,17,26,.72); pointer-events:auto; }
#sceneButtons button { flex:0 0 auto; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:9px 13px; background:rgba(0,0,0,.35); color:#fff; }
#sceneButtons button.active { background:#1689ff; border-color:#1689ff; }
#infoPanel { position:absolute; right:18px; bottom:84px; width:min(390px,calc(100vw - 36px)); max-height:42vh; overflow:auto; pointer-events:auto; }
.infoCard { margin-top:8px; padding:12px 14px; border-left:4px solid #ffd34d; border-radius:8px; background:rgba(7,17,26,.86); }
.infoCard.selected { border:2px solid #ffd34d; border-left-width:7px; box-shadow:0 0 24px rgba(255,211,77,.32); }
.infoCard strong { display:block; margin-bottom:5px; }
.infoCard p { margin:0; line-height:1.45; font-size:14px; }
.hotspotHint { margin:0; padding:10px 13px; border-radius:10px; background:rgba(7,17,26,.82); color:#ffe38a; font-size:14px; }
body.in-xr #guide { display:none; }
body.in-xr #reticle { display:block; }
body.in-xr header { padding:8px 10px; }
body.in-xr header small,body.in-xr #enterVr { display:none; }
@media (max-width:700px) { #infoPanel { display:none; } }