*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#12040d;color:#fff;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
body.pannable canvas#scene{cursor:grab}
body.pannable canvas#scene:active{cursor:grabbing}
.hidden{display:none!important}

/* ---------- hotspots ---------- */
#spots{position:fixed;inset:0;z-index:4}
.spot{position:absolute;display:block;text-decoration:none;cursor:pointer;
  border-radius:14px;transition:transform .18s ease}
.spot.soon{cursor:default}
.spot .lbl{
  position:absolute;left:50%;bottom:100%;
  transform:translate(calc(-50% + var(--shift,0px)),6px) scale(.94);
  transform-origin:50% 100%;
  width:max-content;max-width:min(280px,80vw);text-align:center;
  font-weight:700;font-size:13px;line-height:1.35;
  padding:9px 14px;border-radius:16px;margin-bottom:12px;
  background:linear-gradient(180deg,#fff5fb,#ffd9ee);color:#3a0620;
  border:2px solid #ff3f9a;box-shadow:0 0 20px rgba(255,63,154,.7),0 6px 0 rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.spot .lbl::after{content:"";position:absolute;left:calc(50% - var(--shift,0px));top:100%;
  transform:translateX(-50%);border:7px solid transparent;border-top-color:#ff3f9a}
.spot .nm{display:block;margin-top:5px;font-size:10px;font-style:normal;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;color:#c4106b}
.spot.soon .lbl{background:rgba(22,10,20,.94);color:#e2d2de;border-color:#6b4a63;
  box-shadow:0 6px 0 rgba(0,0,0,.35)}
.spot.soon .lbl::after{border-top-color:#6b4a63}
.spot:hover .lbl,.spot:focus-visible .lbl{opacity:1;transform:translate(calc(-50% + var(--shift,0px)),0) scale(1)}
.spot:focus-visible{outline:3px solid #ff3f9a;outline-offset:4px}
/* on touch there is no hover: show a compact name pill instead of the joke */
body.touch .spot .ln{display:none}
body.touch .spot:not(.soon) .lbl{opacity:.94;padding:5px 10px;margin-bottom:7px;
  transform:translate(calc(-50% + var(--shift,0px)),0) scale(1)}
body.touch .spot .nm{margin-top:0;font-size:10px}
/* the sofa pair sits shoulder to shoulder — stagger their pills so both are readable */
body.touch .spot[data-key="wolf"] .lbl{margin-bottom:44px}

/* ---------- chrome ---------- */
#topbar{position:fixed;top:0;left:0;right:0;z-index:6;padding:16px 22px;pointer-events:none;
  text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.hint{font-size:13px;letter-spacing:.1em;font-weight:700;color:#ffc4e2;
  text-shadow:0 0 14px rgba(255,63,154,.8),0 2px 10px rgba(0,0,0,.85);
  animation:hintfade .6s ease both;transition:opacity .8s ease}
#topbar.faded .hint{opacity:.28}
@keyframes hintfade{from{opacity:0;transform:translateY(-6px)}to{opacity:.95;transform:none}}

#corner{position:fixed;right:18px;bottom:18px;z-index:6;display:flex;gap:10px;align-items:center}
#steam{display:flex;gap:6px;align-items:baseline;
  text-decoration:none;font-weight:800;font-size:14px;padding:12px 18px;border-radius:12px;
  background:linear-gradient(180deg,#2aa9ff,#1478d8);color:#02243f;
  box-shadow:0 5px 0 rgba(0,0,0,.4);transition:transform .14s,filter .14s}
#steam b{color:#03121f}
#steam:hover{transform:translateY(-2px);filter:brightness(1.08)}
#sound{width:46px;height:46px;border-radius:12px;cursor:pointer;border:2px solid rgba(255,255,255,.2);
  background:rgba(18,20,24,.72);color:#ffc4e2;font-size:18px;line-height:1;
  box-shadow:0 5px 0 rgba(0,0,0,.4);transition:transform .14s,filter .14s,color .14s}
#sound:hover{transform:translateY(-2px);filter:brightness(1.15)}
#sound.off{color:#8a7684}
#sound.off .ico::after{content:"";position:absolute;left:9px;right:9px;top:50%;height:2px;
  background:currentColor;transform:rotate(-32deg);border-radius:2px}
#sound .ico{position:relative;display:block}
#sound.playing .ico{animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* ---------- rotate your phone ---------- */
#rotate{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  background:#12040d;text-align:center;padding:32px}
.rot-inner h2{font-size:22px;margin:20px 0 8px;color:#ffc4e2}
.rot-inner p{font-size:14px;opacity:.6}
.phone{width:60px;height:100px;margin:0 auto;border:4px solid #ff3f9a;border-radius:12px;
  box-shadow:0 0 22px rgba(255,63,154,.55);animation:tip 2.2s ease-in-out infinite}
@keyframes tip{0%,35%{transform:rotate(0)}55%,90%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (hover:none) and (orientation:portrait){ #rotate{display:flex} }

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;gap:18px;
  align-items:center;justify-content:center;background:#12040d;
  transition:opacity .5s ease;font-size:12px;letter-spacing:.3em;color:#ff9ed0}
#loader.gone{opacity:0;pointer-events:none}
.ring{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,63,154,.25);
  border-top-color:#ff3f9a;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#fail{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:#12040d;text-align:center;padding:30px;line-height:1.8;font-size:15px}

@media (max-width:820px){
  .hint{font-size:11px;letter-spacing:.04em}
  .spot .lbl{font-size:11px}
  #steam{font-size:12px;padding:9px 13px}
  #sound{width:38px;height:38px;font-size:15px}
  #corner{right:10px;bottom:10px;gap:7px}
}