/* Castle House — interactive 360 tour UI.
   Themed to the site palette (assets/tw-config.js): cream #F8F4EE, ink #2A211B,
   terracotta #9A5430 (sage-600), gold #A9854A, Cormorant Garamond + Poppins.
   All selectors are prefixed .cht- so nothing here can collide with site CSS. */

.cht-stage{
  --cht-cream:#F8F4EE; --cht-cream-2:#F0E6D9; --cht-ink:#2A211B;
  --cht-terra:#9A5430; --cht-terra-700:#7E4427; --cht-gold:#A9854A;
  position:relative; width:100%; height:min(80vh,860px); min-height:460px;
  border-radius:18px; overflow:hidden; background:var(--cht-ink);
  box-shadow:0 18px 50px -22px rgba(42,33,27,.55); isolation:isolate;
  font-family:'Poppins',system-ui,sans-serif;
}
.cht-pano{position:absolute; inset:0}

/* intro overlay */
.cht-intro{position:absolute; inset:0; z-index:40; background:
  radial-gradient(120% 120% at 50% 30%, rgba(42,33,27,.78), rgba(42,33,27,.94));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; color:var(--cht-cream); text-align:center; padding:24px;
  transition:opacity .9s ease}
.cht-intro.cht-gone{opacity:0; pointer-events:none}
.cht-intro .cht-rule{width:46px; height:1px; background:var(--cht-gold)}
.cht-intro h2{font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
  font-size:clamp(1.9rem,4vw,2.8rem); margin:0; letter-spacing:.01em; color:var(--cht-cream)}
.cht-intro p{font-size:.95rem; color:rgba(248,244,238,.8); margin:0; max-width:30rem}
.cht-enter{margin-top:8px; background:var(--cht-terra); color:#fff; border:0;
  padding:13px 30px; border-radius:999px; font:inherit; font-weight:600;
  letter-spacing:.02em; cursor:pointer; transition:background .25s, transform .25s}
.cht-enter:hover{background:var(--cht-terra-700); transform:translateY(-1px)}

/* keep the stage clean behind the intro — reveal the UI only once entered */
.cht-stage:not(.cht-live) .cht-topbar,
.cht-stage:not(.cht-live) .cht-controls,
.cht-stage:not(.cht-live) .cht-dock,
.cht-stage:not(.cht-live) .cht-menu{display:none}

/* top bar */
.cht-topbar{position:absolute; top:0; left:0; right:0; z-index:14; display:flex;
  align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px;
  pointer-events:none; background:linear-gradient(to bottom,rgba(42,33,27,.6),transparent)}
.cht-roomname{color:#fff; font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.4rem; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.4)}
.cht-roomgroup{display:block; font-family:'Poppins',sans-serif; font-weight:600;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cht-gold); margin-top:2px}
.cht-guidedhint{display:none; margin-top:7px; font-size:.7rem; color:rgba(248,244,238,.9);
  background:rgba(42,33,27,.5); border:1px solid rgba(169,133,74,.4); border-radius:999px;
  padding:4px 12px; backdrop-filter:blur(6px); pointer-events:none; width:fit-content}
.cht-guidedhint.cht-show{display:inline-block; animation:cht-fade .5s ease}
@keyframes cht-fade{from{opacity:0}to{opacity:1}}
.cht-counter{color:rgba(255,255,255,.85); font-size:.78rem; letter-spacing:.04em;
  background:rgba(42,33,27,.45); padding:5px 12px; border-radius:999px;
  backdrop-filter:blur(6px); pointer-events:auto; white-space:nowrap; flex-shrink:0}

/* hotspots */
.pnlm-hotspot-base.cht-spot{background:none}
.cht-spot .cht-dot{position:absolute; left:50%; top:50%; width:16px; height:16px;
  border-radius:50%; transform:translate(-50%,-50%); background:var(--cht-gold);
  box-shadow:0 0 0 0 rgba(169,133,74,.6); animation:cht-pulse 2.2s infinite; cursor:pointer}
@keyframes cht-pulse{0%{box-shadow:0 0 0 0 rgba(169,133,74,.55)}
  70%{box-shadow:0 0 0 16px rgba(169,133,74,0)} 100%{box-shadow:0 0 0 0 rgba(169,133,74,0)}}
.cht-spot .cht-lbl{position:absolute; left:50%; top:-42px; transform:translateX(-50%);
  background:rgba(42,33,27,.82); color:var(--cht-cream); border:1px solid rgba(169,133,74,.55);
  border-radius:999px; padding:6px 15px; font-size:.8rem; white-space:nowrap; cursor:pointer;
  backdrop-filter:blur(6px); transition:all .2s; font-family:'Cormorant Garamond',serif; font-weight:600}
.cht-spot:hover .cht-lbl{background:var(--cht-cream); color:var(--cht-ink)}
.pnlm-load-box{background:rgba(42,33,27,.85)!important; color:var(--cht-cream)!important}
.pnlm-panorama-info{display:none!important}

/* room menu (grouped) */
.cht-menu{position:absolute; left:0; right:0; bottom:0; z-index:14;
  display:flex; flex-direction:column; gap:8px; padding:14px 16px 16px;
  background:linear-gradient(to top,rgba(42,33,27,.72),transparent); pointer-events:none}
.cht-menu-scroll{display:flex; gap:18px; overflow-x:auto; padding-bottom:4px; pointer-events:auto;
  scrollbar-width:thin; scrollbar-color:rgba(169,133,74,.5) transparent}
.cht-group{display:flex; flex-direction:column; gap:6px; flex:0 0 auto}
.cht-group-label{font-size:.58rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cht-gold); padding-left:4px}
.cht-group-row{display:flex; gap:6px}
.cht-room-btn{pointer-events:auto; background:rgba(42,33,27,.6); color:var(--cht-cream);
  border:1px solid rgba(169,133,74,.45); padding:7px 14px; border-radius:999px;
  font:inherit; font-size:.78rem; white-space:nowrap; cursor:pointer; backdrop-filter:blur(6px);
  transition:all .2s}
.cht-room-btn:hover{border-color:var(--cht-gold); background:rgba(42,33,27,.85)}
.cht-room-btn.cht-active{background:var(--cht-cream); color:var(--cht-ink); border-color:var(--cht-cream)}

/* right-hand control stack */
.cht-controls{position:absolute; top:64px; right:16px; z-index:14;
  display:flex; flex-direction:column; gap:8px}
.cht-ctl{width:42px; height:42px; border-radius:50%; background:rgba(42,33,27,.6);
  border:1px solid rgba(169,133,74,.45); color:var(--cht-cream); font-size:1rem; cursor:pointer;
  backdrop-filter:blur(6px); transition:all .2s; display:flex; align-items:center; justify-content:center}
.cht-ctl:hover{border-color:var(--cht-gold); background:rgba(42,33,27,.85)}
.cht-ctl.cht-on{background:var(--cht-gold); border-color:var(--cht-gold); color:#fff}

/* bottom-left plan / 3D dock */
.cht-dock{position:absolute; left:16px; bottom:84px; z-index:16;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.cht-panel{display:none; background:rgba(42,33,27,.86); border:1px solid rgba(169,133,74,.5);
  border-radius:14px; padding:12px; backdrop-filter:blur(8px); position:relative}
.cht-panel.cht-open{display:block}
.cht-panel-title{text-align:center; color:rgba(248,244,238,.6); font-size:.56rem;
  letter-spacing:.22em; text-transform:uppercase; margin-bottom:8px}
.cht-toggle-row{display:flex; gap:6px}
.cht-toggle{background:rgba(42,33,27,.6); color:var(--cht-cream); border:1px solid rgba(169,133,74,.45);
  padding:7px 15px; border-radius:999px; font:inherit; font-size:.78rem; cursor:pointer;
  backdrop-filter:blur(6px); transition:all .2s}
.cht-toggle:hover{border-color:var(--cht-gold)}
.cht-toggle.cht-active{background:var(--cht-cream); color:var(--cht-ink); border-color:var(--cht-cream)}

/* 2D mini-map */
.cht-map svg{display:block; border-radius:8px}
.cht-room{fill:rgba(248,244,238,.07); stroke:rgba(201,169,106,.5); stroke-width:1.3;
  cursor:pointer; transition:fill .2s, stroke .2s}
.cht-room:hover{fill:rgba(201,169,106,.3)}
.cht-room.cht-active{fill:rgba(201,169,106,.5); stroke:var(--cht-gold); stroke-width:2}
.cht-corr{fill:rgba(201,169,106,.14); stroke:rgba(201,169,106,.26); stroke-width:.8}
.cht-court{fill:rgba(108,124,82,.5); stroke:rgba(201,169,106,.5); stroke-width:1.4; stroke-dasharray:4 3}
.cht-rlabel{fill:rgba(240,230,217,.92); font-family:'Cormorant Garamond',Georgia,serif; font-size:12px; pointer-events:none}
.cht-maptitle{fill:rgba(240,230,217,.5); font-family:'Poppins',sans-serif; font-size:10px; letter-spacing:3px; pointer-events:none}
.cht-you{fill:var(--cht-gold); pointer-events:none}
.cht-cone{fill:rgba(201,169,106,.5); pointer-events:none}

/* 3D dollhouse */
.cht-3d canvas{display:block; border-radius:8px; cursor:grab; touch-action:none}
.cht-3d canvas:active{cursor:grabbing}
.cht-tip{position:absolute; display:none; pointer-events:none; z-index:5;
  background:rgba(42,33,27,.9); color:var(--cht-cream); border:1px solid rgba(169,133,74,.5);
  border-radius:999px; padding:4px 11px; font-size:.72rem; white-space:nowrap}

/* dev-only doorway calibration panel */
.cht-cal{position:absolute; left:14px; top:92px; z-index:18; width:188px;
  background:rgba(42,33,27,.9); border:1px solid rgba(169,133,74,.5); border-radius:12px;
  padding:11px; backdrop-filter:blur(8px); color:var(--cht-cream); font-family:'Poppins',sans-serif}
.cht-cal-title{font-weight:600; font-size:.74rem; letter-spacing:.03em; color:var(--cht-gold); margin-bottom:4px}
.cht-cal-hint{font-size:.66rem; opacity:.8; line-height:1.35; margin-bottom:9px}
.cht-cal-list{display:flex; flex-direction:column; gap:5px; margin-bottom:8px}
.cht-cal-row{display:flex; gap:4px}
.cht-cal-btn{flex:1; background:rgba(248,244,238,.08); color:var(--cht-cream); border:1px solid rgba(169,133,74,.4);
  border-radius:8px; padding:5px 9px; font:inherit; font-size:.72rem; text-align:left; cursor:pointer; transition:all .15s}
.cht-cal-btn:hover{border-color:var(--cht-gold); background:rgba(248,244,238,.14)}
.cht-cal-btn.cht-cal-done{background:rgba(154,84,48,.55); border-color:var(--cht-gold)}
.cht-cal-btn.cht-cal-done::after{content:" ✓"; color:var(--cht-gold)}
.cht-cal-x{width:26px; flex:0 0 auto; background:rgba(248,244,238,.05); color:rgba(248,244,238,.7);
  border:1px solid rgba(169,133,74,.3); border-radius:8px; font-size:.66rem; cursor:pointer}
.cht-cal-x:hover{background:rgba(154,84,48,.5); color:#fff; border-color:var(--cht-gold)}
.cht-cal-add{display:flex; gap:4px; margin-bottom:9px}
.cht-cal-sel{flex:1; min-width:0; background:rgba(15,12,8,.6); color:var(--cht-cream);
  border:1px solid rgba(169,133,74,.4); border-radius:8px; padding:4px 6px; font:inherit; font-size:.68rem}
.cht-cal-addbtn{flex:0 0 auto; background:rgba(169,133,74,.3); color:var(--cht-cream); border:1px solid rgba(169,133,74,.5);
  border-radius:8px; padding:4px 9px; font:inherit; font-size:.68rem; font-weight:600; cursor:pointer}
.cht-cal-addbtn:hover{background:var(--cht-gold); color:var(--cht-ink)}
.cht-cal-copy{width:100%; background:var(--cht-terra); color:#fff; border:0; border-radius:8px;
  padding:7px; font:inherit; font-size:.7rem; font-weight:600; cursor:pointer}
.cht-cal-copy:hover{background:var(--cht-terra-700)}

@media (max-width:640px){
  .cht-cal{top:auto; bottom:150px; width:166px}
  .cht-stage{height:74vh; border-radius:14px}
  .cht-controls{top:58px; right:12px}
  .cht-dock{bottom:96px; left:12px; right:12px}
  .cht-dock .cht-panel{width:auto}
  .cht-map svg{width:100%; height:auto}
  .cht-roomname{font-size:1.15rem}
}