*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0604;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
#app{position:fixed;inset:0;}
#viewer{position:absolute;inset:0;cursor:grab;}
#viewer:active{cursor:grabbing;}
canvas{display:block;width:100%!important;height:100%!important;}

#transition-overlay{
  position:absolute;inset:0;z-index:50;background:#0a0604;
  opacity:0;pointer-events:none;transition:opacity 0.4s ease;
}
#transition-overlay.fade-in{opacity:1;pointer-events:all;}
#transition-spinner{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:38px;height:38px;
  border:2.5px solid rgba(216,90,48,0.2);
  border-top-color:#D85A30;
  border-radius:50%;
  animation:spin 0.75s linear infinite;
  opacity:0;transition:opacity 0.25s 0.15s;
}
#transition-overlay.fade-in #transition-spinner{opacity:1;}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}

#topbar{
  position:absolute;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  background:linear-gradient(to bottom,rgba(6,3,1,0.9) 0%,transparent 100%);
}
#brand img{height:40px;display:block;}
#topbar-actions{display:flex;gap:8px;}
.top-btn{
  background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.75);font-size:12px;padding:7px 15px;border-radius:7px;
  cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;
}
.top-btn:hover{background:rgba(255,255,255,0.16);color:#fff;}
.top-btn.cta{background:#D85A30;color:#fff;border-color:transparent;font-weight:500;}
.top-btn.cta:hover{background:#c04e27;}

#room-label{
  position:absolute;top:78px;left:22px;z-index:20;
  background:rgba(0,0,0,0.55);color:#fff;font-size:12px;font-weight:500;
  padding:6px 16px;border-radius:20px;border:0.5px solid rgba(255,255,255,0.1);
  pointer-events:none;letter-spacing:.4px;
}
#compass{
  position:absolute;top:78px;right:22px;z-index:20;
  width:40px;height:40px;background:rgba(0,0,0,0.5);
  border-radius:50%;border:0.5px solid rgba(216,90,48,0.5);
  display:flex;align-items:center;justify-content:center;
  color:#D85A30;font-size:18px;pointer-events:none;transition:transform .12s;
}

#controls{
  position:absolute;top:130px;right:22px;z-index:20;
  display:flex;flex-direction:column;gap:8px;
}
.icon-btn{
  width:36px;height:36px;border-radius:50%;padding:0;
  background:rgba(0,0,0,0.5);border:0.5px solid rgba(255,255,255,0.18);
  color:#fff;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.icon-btn:hover{background:rgba(255,255,255,0.16);border-color:#D85A30;}
.icon-btn[aria-pressed="true"]{border-color:#D85A30;color:#D85A30;}

:focus-visible{outline:2px solid #D85A30;outline-offset:2px;}
.hotspot:focus-visible .hotspot-ring{transform:scale(1.15);}

#debug-hud{
  position:absolute;top:78px;right:72px;z-index:20;
  background:rgba(0,0,0,0.55);color:#0f8;font:11px/1.4 ui-monospace,monospace;
  padding:6px 10px;border-radius:6px;border:0.5px solid rgba(255,255,255,0.1);
  pointer-events:none;white-space:pre;
}

.hotspot{
  position:absolute;transform:translate(-50%,-50%);
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;z-index:10;
  transition:opacity 0.25s;
}
.hotspot.hidden{opacity:0;pointer-events:none;}
.hotspot-ring{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#fff;font-weight:500;
  animation:pulse 2.2s infinite;transition:transform .15s,background .15s;
}
.hotspot:hover .hotspot-ring{transform:scale(1.15);}
.hotspot-ring.nav{border:2px solid #D85A30;background:rgba(216,90,48,0.22);}
.hotspot-ring.nav:hover{background:rgba(216,90,48,0.42);}
.hotspot-ring.info{border:2px solid rgba(255,255,255,0.75);background:rgba(255,255,255,0.1);}
.hotspot-ring.info:hover{background:rgba(255,255,255,0.28);}
.hotspot-label{
  background:rgba(0,0,0,0.7);color:#fff;font-size:10px;
  padding:3px 9px;border-radius:10px;white-space:nowrap;pointer-events:none;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(216,90,48,.4);}
  50%{box-shadow:0 0 0 10px rgba(216,90,48,0);}
}

#popup{
  display:none;position:absolute;bottom:90px;left:50%;transform:translateX(-50%);
  background:rgba(10,6,4,.96);border:0.5px solid rgba(216,90,48,.4);
  border-radius:14px;padding:16px 20px;min-width:250px;max-width:340px;z-index:20;color:#fff;
}
#popup.show{display:block;animation:popIn 0.2s ease;}
@keyframes popIn{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
#popup-name{font-size:14px;font-weight:500;margin-bottom:6px;padding-right:22px;}
#popup-desc{font-size:12px;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:10px;}
#popup-close{position:absolute;top:10px;right:12px;background:none;border:none;color:rgba(255,255,255,.35);cursor:pointer;font-size:18px;}
#popup-close:hover{color:#fff;}
.popup-tag{display:inline-block;background:rgba(216,90,48,.18);color:#F0997B;font-size:10px;padding:3px 9px;border-radius:10px;margin-right:4px;margin-bottom:4px;}

#minimap{
  position:absolute;bottom:80px;right:22px;z-index:20;
  width:138px;background:rgba(8,5,3,.85);
  border-radius:10px;padding:10px;border:0.5px solid rgba(216,90,48,.25);
}
#minimap-title{font-size:9px;color:rgba(255,255,255,.3);text-align:center;margin-bottom:6px;letter-spacing:.7px;text-transform:uppercase;}
.mm-room{font-size:10px;padding:4px 7px;border-radius:5px;color:rgba(255,255,255,.4);cursor:pointer;display:flex;align-items:center;gap:6px;margin-bottom:2px;transition:background .12s,color .12s;}
.mm-room:hover{background:rgba(255,255,255,.07);color:#fff;}
.mm-room.active{color:#D85A30;}
.mm-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0;}
.mm-room.active .mm-dot{background:#D85A30;}

#bottombar{
  position:absolute;bottom:0;left:0;right:0;z-index:30;
  display:flex;flex-direction:column;gap:10px;
  padding:10px 22px 12px;
  background:linear-gradient(to top,rgba(6,3,1,.9) 0%,transparent 100%);
}
#story-bar{display:flex;gap:4px;}
.story-seg{
  flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.18);
  overflow:hidden;position:relative;cursor:pointer;transition:background .15s;
}
.story-seg:hover{background:rgba(255,255,255,.32);}
.story-seg.current{background:rgba(255,255,255,.32);}
.story-seg-fill{position:absolute;top:0;left:0;height:100%;width:0%;background:#D85A30;border-radius:2px;}
#bottombar-row{display:flex;align-items:center;justify-content:space-between;}
#room-pills{display:flex;gap:6px;flex-wrap:wrap;}
.room-pill{
  font-size:10px;padding:5px 12px;border-radius:14px;
  border:0.5px solid rgba(255,255,255,.14);color:rgba(255,255,255,.4);
  cursor:pointer;transition:border-color .15s,color .15s,background .15s;background:rgba(0,0,0,.3);
}
.room-pill:hover{border-color:#D85A30;color:#D85A30;}
.room-pill.active{border-color:#D85A30;color:#D85A30;background:rgba(216,90,48,.1);}
#drag-hint{font-size:10px;color:rgba(255,255,255,.22);letter-spacing:.3px;white-space:nowrap;}

#modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:100;align-items:center;justify-content:center;}
#modal-bg.show{display:flex;animation:fadeIn 0.2s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
#modal{background:#1a0d08;border:0.5px solid rgba(216,90,48,.4);border-radius:16px;padding:28px 32px;width:340px;max-width:92vw;position:relative;animation:slideUp 0.25s ease;}
@keyframes slideUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
#modal h2{color:#fff;font-size:18px;font-weight:600;margin-bottom:4px;}
#modal p{color:rgba(255,255,255,.4);font-size:12px;margin-bottom:20px;}
.plan{border:0.5px solid rgba(255,255,255,.12);border-radius:10px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s;}
.plan:hover,.plan.sel{border-color:#D85A30;}
.plan.sel{background:rgba(216,90,48,.08);}
.plan-name{color:#fff;font-size:13px;font-weight:500;}
.plan-price{color:#D85A30;font-size:13px;font-weight:600;float:right;}
.plan-desc{color:rgba(255,255,255,.4);font-size:11px;margin-top:3px;}
#modal-submit{width:100%;background:#D85A30;color:#fff;border:none;padding:11px;border-radius:9px;font-size:14px;font-weight:500;cursor:pointer;margin-top:16px;transition:background .15s;}
#modal-submit:hover{background:#c04e27;}
#modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:rgba(255,255,255,.35);font-size:20px;cursor:pointer;}
#modal-close:hover{color:#fff;}