:root{
  --ink:#0E2A33; --ink-2:#081A20; --lagoon:#2C7A8C; --sand:#EDE6DA;
  --salt:#FBFAF7; --brass:#C08B3E; --brass-lt:#D9A85C;
  --f-display:'Fraunces',Georgia,serif; --f-body:'IBM Plex Sans Thai','IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ink-2);color:var(--salt);
  font-family:var(--f-body);overflow:hidden;
  display:flex;flex-direction:column;
}

/* top bar */
.tbar{
  position:relative;z-index:3;display:flex;align-items:center;gap:1rem;
  padding:.7rem clamp(.8rem,3vw,1.6rem);
  background:rgba(14,42,51,.55);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.tbar h1{
  font-family:var(--f-display);font-weight:600;font-size:clamp(1rem,2.4vw,1.35rem);
  letter-spacing:-.01em;margin:0;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:inherit;flex:none}
.brand img{height:26px;width:auto;display:block}
.tbtn{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  height:38px;padding:0 .95rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);
  color:var(--salt);font:600 .85rem/1 var(--f-body);text-decoration:none;
  transition:background .2s,border-color .2s;
}
.tbtn:hover{background:rgba(217,168,92,.18);border-color:var(--brass-lt)}
.tbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}

/* stage */
.stage{position:relative;flex:1;min-height:0;cursor:grab;touch-action:none;overflow:hidden;
  -webkit-user-select:none;user-select:none}
.stage.is-drag{cursor:grabbing}
.stage canvas{display:block;width:100%;height:100%}

.stage canvas{transition:opacity .35s ease}
.stage.is-fading canvas{opacity:0}
.stage.is-fading .spots{opacity:0}

/* walk-through hotspots */
.spots{position:absolute;inset:0;z-index:2;transition:opacity .35s ease}
.spot{
  position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:0;border:0;background:none;color:var(--salt);cursor:pointer;
  font:600 .82rem/1.2 var(--f-body);text-shadow:0 1px 8px rgba(0,0,0,.75);
}
.spot-ring{
  position:relative;width:46px;height:46px;border-radius:50%;
  border:2px solid rgba(251,250,247,.9);background:rgba(217,168,92,.28);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  box-shadow:0 6px 20px -6px rgba(0,0,0,.7);
  transition:transform .25s ease,background .25s ease,border-color .25s ease;
}
.spot-ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(217,168,92,.85);animation:spotPulse 2.4s var(--ease) infinite;
}
.spot-ring::after{
  content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  margin:-7px 0 0 -6px;transform:rotate(45deg);
  border-top:2px solid var(--salt);border-right:2px solid var(--salt);
}
.spot-tx{
  padding:.15rem .55rem;border-radius:999px;
  background:rgba(8,26,32,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  white-space:nowrap;
}
/* doorway that is off-screen: pinned to the edge, points the way */
.spot.is-edge .spot-ring{width:40px;height:40px;background:rgba(8,26,32,.55)}
.spot.is-edge.is-left{align-items:flex-start}
.spot.is-edge.is-right{align-items:flex-end}
.spot.is-edge .spot-tx{font-size:.76rem;max-width:9rem;overflow:hidden;text-overflow:ellipsis}
.spot.is-edge.is-left .spot-ring::after{margin:-7px 0 0 -3px;transform:rotate(-135deg)}
.spot.is-edge .spot-ring::before{animation:none;opacity:.5}

.spot:hover .spot-ring,.spot:focus-visible .spot-ring{
  transform:scale(1.12);background:rgba(217,168,92,.55);border-color:var(--brass-lt);
}
@keyframes spotPulse{
  0%{transform:scale(1);opacity:.9}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .spot-ring::before{animation:none;opacity:.55}
  .stage canvas,.spots{transition:none}
}

.hint,.wm,.sim{
  position:absolute;z-index:2;pointer-events:none;
  font-size:.78rem;letter-spacing:.02em;color:rgba(251,250,247,.85);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.hint{left:50%;transform:translateX(-50%);bottom:.9rem;text-align:center;padding:0 1rem}
.wm{right:.9rem;top:.8rem;font-weight:600;opacity:.75}
.sim{left:.9rem;bottom:.9rem;font-size:.72rem;opacity:.72;letter-spacing:.03em}
@media (max-width:640px){
  .sim{left:50%;transform:translateX(-50%);bottom:4.6rem;text-align:center;width:100%;padding:0 1rem}
}

/* loading + error */
.veil{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem;text-align:center;padding:2rem;
  background:rgba(8,26,32,.82);backdrop-filter:blur(4px);
}
.veil[hidden]{display:none}
.veil p{margin:0;font-size:.95rem;letter-spacing:.04em}
.track{width:min(260px,60vw);height:4px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.track i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--brass),var(--brass-lt));transition:width .25s ease}
.veil button{
  margin-top:.4rem;border:0;border-radius:999px;padding:.6rem 1.4rem;cursor:pointer;
  background:var(--brass);color:var(--ink);font:700 .9rem/1 var(--f-body);
}

/* room switcher */
.rooms{
  position:relative;z-index:3;display:flex;gap:.6rem;overflow-x:auto;
  padding:.75rem clamp(.8rem,3vw,1.6rem);
  background:rgba(14,42,51,.6);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.1);scrollbar-width:thin;
}
.room{
  flex:none;position:relative;width:150px;padding:0;cursor:pointer;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);border-radius:12px;background:none;
  color:var(--salt);font:600 .82rem/1.2 var(--f-body);text-align:left;
  transition:border-color .2s,transform .2s;
}
.room img{display:block;width:100%;height:84px;object-fit:cover;opacity:.75;transition:opacity .2s}
.room span{display:block;padding:.45rem .6rem}
.room:hover{transform:translateY(-2px)}
.room:hover img{opacity:.95}
.room.is-on{border-color:var(--brass-lt);box-shadow:0 0 0 1px var(--brass-lt) inset}
.room.is-on img{opacity:1}

a:focus-visible,button:focus-visible{outline:2px solid var(--brass-lt);outline-offset:2px}

@media (max-width:640px){
  .room{width:118px}
  .room img{height:66px}
  .brand span{display:none}
}