:root{
  --black: #0b0c0a;
  --emerald: #0e2a22;
  --gold: #c9a15a;
  --gold-bright: #e8c98a;
  --beige: #efe7d6;
  --white: #f7f4ec;
  --wood: #2b1d14;
  --line: rgba(247,244,236,0.14);
  
  /* ---- Ambient glow variables (controlled by JS) ---- */
  --mouse-x: 50%;
  --mouse-y: 50%;
  --glow-intensity: 0.6;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  cursor:none;
  position:relative;
  min-height:100vh;
}
/* ── Full-page ambient background ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Layer 1: Large warm glow that follows mouse */
    radial-gradient(ellipse at var(--mouse-x) var(--mouse-y), rgba(201, 161, 90, 0.12), transparent 50%),
    /* Layer 2: Secondary gold offset glow */
    radial-gradient(ellipse at calc(100% - var(--mouse-x)) calc(100% - var(--mouse-y)), rgba(201, 161, 90, 0.06), transparent 40%),
    /* Layer 3: Deep emerald glow in corners */
    radial-gradient(ellipse at 20% 80%, rgba(14, 42, 34, 0.2), transparent 40%),
    radial-gradient(ellipse at 80% 20%, rgba(14, 42, 34, 0.15), transparent 40%),
    /* Layer 4: Subtle gold dust pattern */
    radial-gradient(circle at 10% 30%, rgba(201, 161, 90, 0.04), transparent 20%),
    radial-gradient(circle at 90% 70%, rgba(201, 161, 90, 0.03), transparent 25%),
    /* Base layer */
    var(--black);
  transition: background 0.1s ease-out;
  will-change: transform;
}
/* ── Keep all content above the background ── */
body > * {
  position: relative;
  z-index: 1;
}
::selection{background:var(--gold);color:var(--black);}

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--gold-bright);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,opacity .25s;
  mix-blend-mode:difference;
}
.cursor-ring{
  position:fixed;top:0;left:0;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--gold-bright);pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s,border-color .3s;
  opacity:.6;
}
.cursor.grow{width:6px;height:6px;background:var(--white);}
.cursor-ring.grow{width:64px;height:64px;border-color:var(--white);opacity:.9;}
@media (hover:none){.cursor,.cursor-ring{display:none;} body{cursor:auto;}}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;width:100%;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 5vw;
  background:rgba(11,12,10,0.6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:'Fraunces',serif;font-size:1.15rem;letter-spacing:.22em;font-weight:500;color:var(--white);
}
.navlinks{display:flex;gap:2.6vw;list-style:none;}
.navlinks a{
  color:var(--white);text-decoration:none;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:500;position:relative;padding-bottom:4px;
}
.navlinks a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .35s ease;
}
.navlinks a:hover::after{width:100%;}
.nav-book{
  border:1px solid var(--gold);padding:9px 20px;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--white);text-decoration:none;transition:.35s;
  border-radius:30px;
}
.nav-book:hover{background:var(--gold);color:var(--black);border-color:var(--gold);}
@media(max-width:820px){.navlinks{display:none;}}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;background:var(--black);z-index:10000;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  transition:opacity 1s ease, visibility 1s ease;
}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none;}
.loader-word{
  font-family:'Fraunces',serif;font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:.3em;color:var(--gold);
  overflow:hidden;
}
.loader-bar{width:220px;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:10px;}
.loader-bar span{position:absolute;left:0;top:0;height:100%;width:0%;background:var(--gold);animation:load 2.1s ease forwards;border-radius:10px;}
@keyframes load{to{width:100%;}}

/* ---------- hero ---------- */
.hero{
  position:relative;height:100vh;min-height:640px;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;background:transparent;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    /* Stronger glow in hero for dramatic impact */
    radial-gradient(ellipse at var(--mouse-x) var(--mouse-y), rgba(201,161,90,.2), transparent 55%),
    radial-gradient(ellipse at calc(100% - var(--mouse-x)) calc(100% - var(--mouse-y)), rgba(14,42,34,.5), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(201,161,90,.08), transparent 40%),
    linear-gradient(180deg, #08090a 0%, #0b0c0a 55%, #050605 100%);
  animation:drift 22s ease-in-out infinite alternate;
  transition:background 0.1s ease-out;
}
@keyframes drift{
  0%{filter:brightness(1) saturate(1);}
  100%{filter:brightness(1.08) saturate(1.15);}
}
.hero-lines{
  position:absolute;inset:0;opacity:.3;z-index:1;
  background-image: repeating-linear-gradient(115deg, transparent 0 68px, rgba(201,161,90,.05) 68px 69px);
  pointer-events:none;
}
.hero-eyebrow{
  position:relative;z-index:3;padding:0 5vw;margin-bottom:14px;
  font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);
  opacity:0;animation:fadeUp 1s ease .3s forwards;
}
.hero-title{
  position:relative;z-index:3;padding:0 3vw;line-height:.86;
}
.hero-title .row{overflow:hidden;display:block;}
.hero-title span{
  display:block;font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(3.4rem,11.5vw,10.5rem);letter-spacing:-.01em;
  transform:translateY(115%);animation:riseBlur 1.1s cubic-bezier(.16,.9,.28,1) forwards;
}
.hero-title .row:nth-child(1) span{animation-delay:.15s;color:var(--white);}
.hero-title .row:nth-child(2) span{animation-delay:.32s;color:var(--gold);font-style:italic;font-weight:400;}
@keyframes riseBlur{
  from{transform:translateY(115%);filter:blur(14px);opacity:0;}
  to{transform:translateY(0);filter:blur(0);opacity:1;}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

.hero-foot{
  position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;
  padding:34px 5vw 46px;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:38px;
  opacity:0;animation:fadeUp 1s ease 1s forwards;
}
.hero-sub{max-width:340px;font-size:.95rem;line-height:1.6;color:rgba(247,244,236,.72);}
.hero-scroll{
  font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:10px;
}
.hero-scroll::after{content:'';width:1px;height:34px;background:var(--gold);animation:scrollLine 1.8s ease-in-out infinite;}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}50.01%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ---------- section shell ---------- */
section{position:relative;padding:min(14vw,150px) 5vw;background:transparent;}
section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Each section gets a subtle glow overlay too */
  background:
    radial-gradient(ellipse at var(--mouse-x) var(--mouse-y), rgba(201,161,90,.04), transparent 50%);
}
section > * {
  position: relative;
  z-index: 1;
}
.eyebrow{
  font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.eyebrow::before{content:'';width:34px;height:1px;background:var(--gold);}
.reveal{opacity:0;transform:translateY(48px);transition:opacity 1s cubic-bezier(.16,.8,.3,1),transform 1s cubic-bezier(.16,.8,.3,1);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- discover ---------- */
.discover{background:transparent;}
.big-line{
  font-family:'Fraunces',serif;font-weight:600;line-height:.95;letter-spacing:-.01em;
  font-size:clamp(2.4rem,6.4vw,5.6rem);max-width:1180px;color:var(--white);
}
.big-line em{color:var(--gold);font-style:italic;font-weight:400;}
.world-grid{
  margin-top:90px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.world-card{
  position:relative;background:rgba(11,12,10,0.85);padding:52px 34px;min-height:420px;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;
  transition:min-height .5s ease, background .5s ease;
}
.world-card::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0.6;transition:opacity .6s ease, transform .6s ease;
  transform:scale(1.02);
}
.world-card:nth-child(1)::before{background:radial-gradient(ellipse at 50% 0%, rgba(201,161,90,.2), transparent 60%), linear-gradient(200deg,#1a1712,#0b0c0a 70%);}
.world-card:nth-child(2)::before{background:radial-gradient(ellipse at 60% 100%, rgba(59,120,140,.2), transparent 60%), linear-gradient(200deg,#0d1a1c,#0b0c0a 70%);}
.world-card:nth-child(3)::before{background:radial-gradient(ellipse at 40% 100%, rgba(14,42,34,.3), transparent 60%), linear-gradient(200deg,#0e1712,#0b0c0a 70%);}
.world-card:hover::before{opacity:1;transform:scale(1);}
.world-card:hover{min-height:460px;background:rgba(11,12,10,0.95);}
.world-index{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--gold);letter-spacing:.2em;margin-bottom:auto;}
.world-name{font-family:'Fraunces',serif;font-size:2.1rem;font-weight:500;margin-bottom:10px;}
.world-desc{font-size:.88rem;color:rgba(247,244,236,.65);max-width:280px;line-height:1.6;margin-bottom:20px;}
.world-link{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--white);display:inline-flex;gap:8px;align-items:center;background:none;border:none;cursor:none;font-family:'Inter',sans-serif;transition:color .3s;}
.world-link:hover{color:var(--gold);}
.world-link svg{width:14px;height:14px;transition:transform .35s;}
.world-card:hover .world-link svg{transform:translateX(6px);}

/* ---------- stay / rooms ---------- */
.stay{background:transparent;position:relative;}
.stay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: 
    radial-gradient(ellipse at 30% 50%, rgba(201,161,90,.06), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(14,42,34,.15), transparent 50%);
  pointer-events: none;
}
.stay > * { position:relative; z-index:1; }
.room-row{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;
  padding:70px 0;border-top:1px solid var(--line);
}
.room-row:last-of-type{border-bottom:1px solid var(--line);}
.room-visual{
  position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,#1c1710,#0b0c0a 70%);
  transition:box-shadow .5s ease;
}
.room-row:nth-child(even) .room-visual{order:2;}
.room-row:nth-child(even) .room-visual{background:linear-gradient(160deg,#0d1c17,#0b0c0a 70%);}
.room-visual:hover{box-shadow:0 0 60px rgba(201,161,90,.08);}
.room-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%, rgba(201,161,90,.22), transparent 65%);}
.room-tag{position:absolute;top:22px;left:22px;font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:6px 12px;border-radius:30px;
  backdrop-filter:blur(6px);background:rgba(11,12,10,.35);}
.room-enter-btn{
  position:absolute;top:22px;right:22px;font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--black);background:var(--gold);border:none;padding:8px 14px;border-radius:30px;
  cursor:none;transition:.3s;font-weight:500;
}
.room-enter-btn:hover{background:var(--gold-bright);transform:scale(1.02);}
.room-panel{
  position:absolute;bottom:20px;left:20px;right:20px;padding:22px 24px;
  background:rgba(11,12,10,.7);backdrop-filter:blur(16px);border:1px solid rgba(247,244,236,.1);border-radius:12px;
  transform:translateY(14px);opacity:0;transition:.5s cubic-bezier(.16,.8,.3,1);
}
.room-visual:hover .room-panel{transform:translateY(0);opacity:1;}
.room-panel-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.room-panel-name{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--white);}
.room-panel-size{font-family:'Space Mono',monospace;font-size:.7rem;color:var(--gold);}
.room-feat{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-bottom:14px;}
.room-feat li{font-size:.74rem;color:rgba(247,244,236,.72);display:flex;gap:8px;align-items:center;}
.room-feat li::before{content:'';width:5px;height:5px;background:var(--gold);border-radius:50%;flex-shrink:0;}
.room-panel-foot{display:flex;justify-content:space-between;align-items:center;}
.room-price{font-family:'Fraunces',serif;font-size:1.2rem;color:var(--white);}
.room-price span{font-size:.7rem;color:rgba(247,244,236,.55);font-family:'Inter',sans-serif;}
.room-cta{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--black);background:var(--gold);
  padding:9px 16px;border-radius:30px;text-decoration:none;transition:.3s;font-weight:500;}
.room-cta:hover{background:var(--gold-bright);transform:scale(1.02);}
.room-info-index{font-family:'Space Mono',monospace;color:var(--gold);font-size:.75rem;letter-spacing:.2em;margin-bottom:20px;}
.room-info-name{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2.1rem,3.4vw,3.2rem);margin-bottom:18px;line-height:1.02;}
.room-info-desc{font-size:.98rem;line-height:1.75;color:rgba(247,244,236,.68);max-width:460px;margin-bottom:26px;}
.room-info-specs{display:flex;gap:32px;border-top:1px solid var(--line);padding-top:20px;}
.spec b{display:block;font-family:'Fraunces',serif;font-size:1.4rem;color:var(--gold);font-weight:500;}
.spec span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,244,236,.55);}

/* ---------- experience / marquee ---------- */
.experience{background:transparent;overflow:hidden;}
.marquee-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0;margin-top:70px;}
.marquee{display:flex;white-space:nowrap;animation:scroll 26s linear infinite;width:max-content;}
.marquee span{
  font-family:'Fraunces',serif;font-style:italic;font-size:clamp(2rem,4.6vw,3.6rem);color:transparent;
  -webkit-text-stroke:1px var(--gold);padding:0 40px;font-weight:400;
}
.marquee span:nth-child(even){-webkit-text-stroke:1px rgba(247,244,236,.4);}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:70px;}
.exp-card{padding-top:26px;border-top:1px solid var(--line);}
.exp-num{font-family:'Space Mono',monospace;font-size:.7rem;color:var(--gold);margin-bottom:16px;display:block;}
.exp-title{font-family:'Fraunces',serif;font-size:1.3rem;margin-bottom:10px;}
.exp-desc{font-size:.84rem;line-height:1.6;color:rgba(247,244,236,.6);}
@media(max-width:900px){.exp-grid{grid-template-columns:1fr 1fr;}}

/* ---------- dining ---------- */
.dining{
  background:transparent;position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;
}
.dining::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at var(--mouse-x) var(--mouse-y), rgba(201,161,90,.08), transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(14,42,34,.15), transparent 40%);
  pointer-events: none;
}
.dining > * { position:relative; z-index:1; }
.dining-visual{
  min-height:560px;position:relative;
  background:radial-gradient(ellipse at 30% 30%, rgba(201,161,90,.2), transparent 60%), linear-gradient(160deg,#171310,#0b0c0a 80%);
}
.dining-visual::after{
  content:'';position:absolute;inset:24px;border:1px solid rgba(201,161,90,.35);
  border-radius:16px;
}
.dining-copy{padding:min(10vw,120px) min(6vw,80px);display:flex;flex-direction:column;justify-content:center;}
.dining-list{margin-top:34px;display:flex;flex-direction:column;}
.dish{
  display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line);gap:20px;
}
.dish-name{font-family:'Fraunces',serif;font-size:1.15rem;}
.dish-desc{font-size:.78rem;color:rgba(247,244,236,.55);margin-top:4px;max-width:320px;}
.dish-price{font-family:'Space Mono',monospace;color:var(--gold);font-size:.85rem;white-space:nowrap;}
@media(max-width:900px){.dining{grid-template-columns:1fr;} .dining-visual{min-height:320px;}}

/* ---------- book ---------- */
.book{
  background:transparent;
  text-align:center;padding:min(16vw,180px) 5vw;
  position:relative;
}
.book::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at var(--mouse-x) var(--mouse-y), rgba(201,161,90,.1), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(14,42,34,.3), transparent 50%);
  pointer-events: none;
}
.book > * { position:relative; z-index:1; }
.book-title{
  font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.8rem,8vw,6.4rem);line-height:.95;
  margin-bottom:34px;
}
.book-title em{color:var(--gold);font-style:italic;font-weight:400;}
.book-sub{font-size:1rem;color:rgba(247,244,236,.65);max-width:460px;margin:0 auto 46px;line-height:1.6;}
.book-form{
  display:flex;gap:1px;background:var(--line);border:1px solid var(--line);max-width:900px;margin:0 auto;
  flex-wrap:wrap;
  border-radius:16px;
  overflow:hidden;
}
.book-field{flex:1;min-width:150px;background:rgba(11,12,10,.7);padding:20px 22px;text-align:left;}
.book-field label{display:block;font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.book-field input,.book-field select{
  width:100%;background:transparent;border:none;color:var(--white);font-family:'Inter',sans-serif;font-size:.92rem;outline:none;
}
.book-submit{
  background:var(--gold);color:var(--black);border:none;font-family:'Space Mono',monospace;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;padding:0 34px;cursor:none;transition:.3s;flex:0 0 auto;font-weight:500;
}
.book-submit:hover{background:var(--gold-bright);}

/* ---------- footer ---------- */
footer{
  background:rgba(11,12,10,0.8);padding:70px 5vw 30px;border-top:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;margin-bottom:60px;}
.foot-brand{font-family:'Fraunces',serif;font-size:1.6rem;letter-spacing:.1em;color:var(--gold);}
.foot-cols{display:flex;gap:70px;flex-wrap:wrap;}
.foot-col h5{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
.foot-col a{display:block;color:rgba(247,244,236,.65);text-decoration:none;font-size:.86rem;margin-bottom:10px;transition:.25s;}
.foot-col a:hover{color:var(--white);}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:26px;border-top:1px solid var(--line);
  font-size:.72rem;color:rgba(247,244,236,.45);}

.magnetic{display:inline-block;}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--black);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--gold), var(--emerald));border-radius:10px;}

@media(max-width:900px){
  .room-row{grid-template-columns:1fr;gap:30px;}
  .room-row:nth-child(even) .room-visual{order:0;}
  .world-grid{grid-template-columns:1fr;}
  .book-form{flex-direction:column;}
}

/* =========================================================
   3D WALKTHROUGH OVERLAY
   ========================================================= */
#world3d-overlay{
  position:fixed;inset:0;background:var(--black);z-index:8000;
  display:none;flex-direction:column;
}
#world3d-overlay.active{display:flex;}
#world3d-canvas-wrap{position:relative;flex:1;}
#world3d-canvas-wrap canvas{display:block;width:100%;height:100%;}

.w3d-topbar{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 5vw;pointer-events:none;
}
.w3d-topbar *{pointer-events:auto;}
.w3d-title{font-family:'Fraunces',serif;letter-spacing:.15em;font-size:1rem;color:var(--white);
  text-shadow:0 2px 12px rgba(0,0,0,.6);}
.w3d-exit{
  background:rgba(11,12,10,.55);backdrop-filter:blur(10px);border:1px solid var(--line);
  color:var(--white);font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  padding:10px 18px;cursor:none;border-radius:30px;transition:.3s;
}
.w3d-exit:hover{background:rgba(201,161,90,.25);border-color:var(--gold);}

.w3d-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:20;
  font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(247,244,236,.75);background:rgba(11,12,10,.5);backdrop-filter:blur(10px);
  padding:10px 18px;border-radius:30px;border:1px solid var(--line);white-space:nowrap;
}

.w3d-crosshair{
  position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;
  background:var(--gold-bright);transform:translate(-50%,-50%);z-index:15;opacity:.8;
  box-shadow:0 0 8px rgba(201,161,90,.8);
}

.w3d-loading{
  position:absolute;inset:0;z-index:30;background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  transition:opacity .6s ease, visibility .6s ease;
}
.w3d-loading.hide{opacity:0;visibility:hidden;pointer-events:none;}
.w3d-loading span{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);}

.w3d-room-panel{
  position:absolute;right:5vw;bottom:90px;z-index:20;width:min(320px,84vw);
  background:rgba(11,12,10,.55);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:12px;
  padding:24px;opacity:0;transform:translateY(16px);transition:.5s cubic-bezier(.16,.8,.3,1);pointer-events:none;
}
.w3d-room-panel.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.w3d-room-panel .room-panel-top{display:flex;justify-content:space-between;margin-bottom:10px;}
.w3d-room-panel .room-panel-name{font-family:'Fraunces',serif;font-size:1.1rem;}
.w3d-room-panel .room-panel-size{font-family:'Space Mono',monospace;font-size:.68rem;color:var(--gold);}
.w3d-room-panel .room-feat{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:14px 0;}
.w3d-room-panel .room-feat li{font-size:.72rem;color:rgba(247,244,236,.72);display:flex;gap:7px;align-items:center;}
.w3d-room-panel .room-feat li::before{content:'';width:5px;height:5px;background:var(--gold);border-radius:50%;flex-shrink:0;}
.w3d-room-panel .room-panel-foot{display:flex;justify-content:space-between;align-items:center;}
.w3d-room-panel .room-price{font-family:'Fraunces',serif;font-size:1.05rem;}
.w3d-room-panel .room-price span{font-size:.65rem;color:rgba(247,244,236,.55);font-family:'Inter',sans-serif;}

.w3d-joystick{
  position:absolute;left:34px;bottom:34px;width:110px;height:110px;border-radius:50%;
  background:rgba(247,244,236,.06);border:1px solid var(--line);z-index:20;display:none;touch-action:none;
}
.w3d-joystick-nub{
  position:absolute;top:50%;left:50%;width:46px;height:46px;border-radius:50%;
  background:rgba(201,161,90,.5);border:1px solid var(--gold);transform:translate(-50%,-50%);
}
@media(max-width:820px){
  .w3d-joystick{display:block;}
  .w3d-hint{display:none;}
}