/* =====================================================================
   SECRETS HALL : the shared look. "Old glass": every panel is a piece of
   antique glass (seeds, ripples, a gold leaf rim, etched corners) floating
   over the room photo. Panels are shaped like tabs. The HUD sits at the bottom.
   ===================================================================== */

/* ---------- BRAND ---------- */
:root{
  --ink:#060609;          /* black, a touch cold so the gold glows */
  --ink-2:#0c0c11;
  --ink-3:#13131a;
  --red:#b3261e;
  --red-hi:#d23a2f;
  --red-deep:#6e0f12;
  --gold:#C9A227;
  --gold-lt:#E8CF7A;
  --gold-hi:#FFF1C2;
  --bone:#F5F1E8;
  --mute:#b4b1aa;
  --rim:rgba(232,207,122,.55);
  --rim-soft:rgba(232,207,122,.22);
  --line:rgba(232,207,122,.3);
  --line-soft:rgba(232,207,122,.14);
  --glass-tint:rgba(10,10,16,.34);
  --glass-dark:rgba(6,6,10,.62);

  --font-d:"mason-serif","Cinzel",Georgia,serif;
  --font-b:"Montserrat",system-ui,sans-serif;

  --hud-h:86px;
  --lit:.4;               /* how bright the house is, set by code from rooms explored */
  --dim:0;                /* 0 = scene fully visible, 1 = scrolled away (set by code) */
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ink);color:var(--bone);font-family:var(--font-b);font-size:15px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.sh{padding-bottom:calc(var(--hud-h) + 24px + env(safe-area-inset-bottom,0px))}
a{color:inherit}
img{max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* film grain over everything */
.grain{position:fixed;inset:-50%;z-index:900;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:sh-grain 7s steps(6) infinite}
@keyframes sh-grain{0%{transform:translate(0,0)}50%{transform:translate(-4%,3%)}100%{transform:translate(2%,-2%)}}

/* =====================================================================
   OLD GLASS : the one material of the house
   .glass  = a pane.   .tab = a pane with a little ear on top (data-ear="label")
   ===================================================================== */
.glass,.tab,.card,.paper,.note,.sheet,.narrator,.quick:not(body),.plaque,.chip,.btn.ghosty,.hud-pane,.enc,.phone{
  --seeds:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><g fill='white'><circle cx='12' cy='30' r='1.1' opacity='.5'/><circle cx='70' cy='12' r='.7' opacity='.4'/><circle cx='130' cy='44' r='1.4' opacity='.35'/><circle cx='160' cy='120' r='.8' opacity='.5'/><circle cx='40' cy='140' r='1' opacity='.4'/><circle cx='98' cy='100' r='.6' opacity='.55'/><ellipse cx='120' cy='160' rx='2' ry='.8' opacity='.3'/><ellipse cx='20' cy='90' rx='1.6' ry='.6' opacity='.3'/></g></svg>");
  --etch:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' fill='none' stroke='%23E8CF7A' stroke-width='1' opacity='.7'><path d='M2 26 V8 Q2 2 8 2 H26'/><path d='M7 20 Q7 7 20 7' opacity='.6'/><circle cx='8' cy='8' r='1.6' fill='%23E8CF7A'/><path d='M12 2 q2 4 6 4' opacity='.5'/></svg>");
}
.glass,.tab,.card,.paper,.sheet,.hud-pane,.enc,.phone{
  position:relative;isolation:isolate;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 52%),
    linear-gradient(162deg,rgba(255,255,255,.09),rgba(255,255,255,.012) 44%,rgba(232,207,122,.07)),
    var(--glass-tint);
  -webkit-backdrop-filter:blur(16px) saturate(135%) contrast(1.04);backdrop-filter:blur(16px) saturate(135%) contrast(1.04);
  border:1px solid var(--rim);
  border-radius:20px 20px 9px 9px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 0 0 0 4px rgba(255,255,255,.022),
    inset 0 0 0 5px var(--rim-soft),
    0 22px 50px rgba(0,0,0,.42);
}
/* seeds + ripples, the reason it reads as old glass */
.glass::before,.tab::before,.card::before,.paper::before,.sheet::before,.hud-pane::before,.enc::before,.phone::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:var(--seeds),repeating-linear-gradient(96deg,rgba(255,255,255,.028) 0 1px,transparent 1px 6px,rgba(255,255,255,.012) 6px 7px,transparent 7px 13px);
  mix-blend-mode:screen;opacity:.75}
/* etched gold corners */
.etched::after,.card::after,.paper::after,.sheet::after{
  content:"";position:absolute;inset:6px;border-radius:inherit;pointer-events:none;
  background:var(--etch) top left/34px no-repeat,var(--etch) top right/34px no-repeat,var(--etch) bottom left/34px no-repeat,var(--etch) bottom right/34px no-repeat;
  transform-origin:center}
.etched::after{background:var(--etch) top left/30px no-repeat,var(--etch) bottom right/30px no-repeat}
.card::after,.paper::after,.sheet::after{background:var(--etch) top left/34px no-repeat,var(--etch) top right/34px no-repeat}
.paper::after{opacity:.8}
.glass.dark,.tab.dark,.sheet{--glass-tint:var(--glass-dark)}
.glass.clear{--glass-tint:rgba(10,10,16,.12)}

/* tabs: a pane with an ear on top, like a folder tab */
.tab{margin-top:30px}
.tab[data-ear]::after{content:attr(data-ear);position:absolute;left:18px;top:-29px;height:29px;padding:0 16px;display:flex;align-items:center;
  font-family:var(--font-d);font-weight:700;font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-lt);white-space:nowrap;
  border:1px solid var(--rim);border-bottom:0;border-radius:13px 13px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04)),var(--glass-tint);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* gold, not brown: text in gold leaf */
.gilt{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lt) 45%,var(--gold) 70%,#a8841c);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- TYPE + LAYOUT ---------- */
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}
.wrap.narrow{max-width:780px}
.band{padding-block:clamp(56px,9vw,120px);position:relative}
.band.tight{padding-block:clamp(32px,5vw,60px)}
.eyebrow{font-size:10.5px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-lt);font-weight:700}
.h-big{margin:8px 0 14px;font-family:var(--font-d);font-weight:900;font-size:clamp(30px,5vw,56px);line-height:1.04;letter-spacing:.5px;text-wrap:balance}
.h-mid{margin:6px 0 10px;font-family:var(--font-d);font-weight:700;font-size:clamp(22px,3.2vw,32px);line-height:1.12;letter-spacing:.5px;text-wrap:balance}
.lead{max-width:60ch;color:var(--bone);opacity:.9;font-size:16px}
.muted{color:var(--mute)}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ---------- BUTTONS : glass keys ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;cursor:pointer;text-decoration:none;
  font-family:var(--font-b);font-size:11.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  border-radius:16px 16px 7px 7px;border:1px solid var(--gold-lt);color:#1a1405;
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold-lt) 30%,var(--gold) 72%,#a8841c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 0 rgba(0,0,0,.25),0 8px 22px rgba(201,162,39,.25);transition:.15s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghosty{color:var(--bone);border-color:var(--rim);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),var(--glass-tint);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.5)}
.btn.red{color:var(--bone);border-color:#e0574d;background:linear-gradient(180deg,#e0574d,var(--red) 55%,var(--red-deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.3),0 8px 22px rgba(179,38,30,.3)}
.btn.small{min-height:36px;padding:0 15px;font-size:10.5px}
.btn[disabled],.btn.off{opacity:.45;pointer-events:none}
.linkish{background:none;border:0;padding:4px;cursor:pointer;font-size:12px;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:var(--bone)}

/* ---------- SURFACES ---------- */
.card{padding:22px}
.paper{padding:clamp(22px,4vw,44px);--glass-tint:rgba(6,6,10,.7)}
.note{position:relative;padding:14px 16px;border-radius:16px 16px 8px 8px;border:1px dashed var(--rim);font-size:13.5px;background:rgba(255,255,255,.03)}
.note b{color:var(--gold-lt)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:13px 13px 6px 6px;font-size:9.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  border:1px solid var(--rim);color:var(--gold-lt);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.chip.solid{background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:#1a1405;border-color:var(--gold-lt)}
.chip.red{background:linear-gradient(180deg,#e0574d,var(--red));border-color:#e0574d;color:var(--bone)}
.hex{width:52px;height:60px;display:grid;place-items:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg,rgba(255,241,194,.35),rgba(201,162,39,.15) 50%,rgba(255,255,255,.05))}
.hex svg{width:24px;height:24px;stroke:var(--gold-hi);fill:none;stroke-width:1.6}

/* =====================================================================
   CORNER MARK + MODE SWITCH (the only things at the top)
   ===================================================================== */
#mark{position:fixed;z-index:520;left:14px;top:calc(12px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:8px;text-decoration:none}
#mark .m-hex{width:40px;height:46px;display:grid;place-items:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg,var(--gold-hi),var(--gold) 55%,#8a6c14);color:#120e04;font-family:var(--font-d);font-weight:900;font-size:12.5px;letter-spacing:.5px;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
#modesw{position:fixed;z-index:520;right:14px;top:calc(12px + env(safe-area-inset-top,0px));display:flex;padding:4px;border-radius:16px 16px 8px 8px}
#modesw button{border:0;background:none;cursor:pointer;height:32px;padding:0 13px;border-radius:12px 12px 6px 6px;font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--mute)}
#modesw button[aria-pressed="true"]{color:#1a1405;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lt) 40%,var(--gold))}

/* =====================================================================
   THE HUD (bottom): room nameplate, dock, gauges
   ===================================================================== */
#hud{position:fixed;z-index:500;left:0;right:0;bottom:0;padding:0 14px calc(12px + env(safe-area-inset-bottom,0px));
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:12px;pointer-events:none}
#hud > *{pointer-events:auto}
.hud-pane{border-radius:22px 22px 10px 10px}
.hud-plate{justify-self:start;max-width:min(440px,100%);padding:10px 18px 10px;margin-top:30px}
.hud-plate .room-n{display:block;font-family:var(--font-d);font-weight:900;font-size:clamp(20px,2.4vw,30px);line-height:1.05;letter-spacing:1px}
.hud-plate .room-s{display:block;margin-top:2px;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-lt);font-weight:700}
.hud-dock{display:flex;align-items:center;gap:4px;padding:7px}
.hk{position:relative;display:grid;place-items:center;gap:2px;width:62px;height:58px;border:0;background:none;cursor:pointer;text-decoration:none;border-radius:16px 16px 8px 8px;transition:.15s;color:var(--bone)}
.hk:hover,.hk[aria-expanded="true"]{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03))}
.hk svg{width:24px;height:24px;stroke:var(--gold-lt);fill:none;stroke-width:1.6}
.hk span{font-size:8.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mute)}
.hk.primary{background:linear-gradient(180deg,rgba(201,162,39,.35),rgba(201,162,39,.12));box-shadow:inset 0 0 0 1px var(--rim)}
.hk.primary svg{stroke:var(--gold-hi)}
.hk .badge{position:absolute;top:4px;right:9px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:var(--bone);font-size:10px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--ink)}
.hud-gauges{justify-self:end;display:flex;align-items:center;gap:14px;padding:9px 16px}
.gauge{display:flex;align-items:center;gap:9px;text-decoration:none;background:none;border:0;cursor:pointer;padding:0}
.gauge svg.ring{width:42px;height:42px;transform:rotate(-90deg)}
.gauge .ring circle{fill:none;stroke-width:4}
.gauge .ring .bg{stroke:rgba(255,255,255,.1)}
.gauge .ring .fg{stroke:url(#sh-goldgrad);stroke-linecap:round;transition:stroke-dashoffset 1s}
.gauge b{display:block;font-family:var(--font-d);font-size:17px;line-height:1;font-variant-numeric:tabular-nums}
.gauge small{display:block;font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--mute);font-weight:800}
.coin{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold) 55%,#7d6210);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.5);display:grid;place-items:center;color:#3a2c05;font-family:var(--font-d);font-weight:900;font-size:12px}
@media (max-width:900px){
  :root{--hud-h:112px}
  #hud{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"plate gauges" "dock dock";row-gap:6px;padding:0 10px calc(8px + env(safe-area-inset-bottom,0px))}
  .hud-plate{grid-area:plate;padding:6px 12px;margin-top:0;border-radius:16px 16px 8px 8px}
  .hud-plate.tab[data-ear]::after{display:none}
  .hud-plate .room-n{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hud-plate .room-s{display:none}
  .hud-gauges{grid-area:gauges;padding:5px 10px;gap:10px;border-radius:16px 16px 8px 8px}
  .gauge svg.ring{width:28px;height:28px}
  .gauge b{font-size:14px}
  .gauge small{display:none}
  .coin{width:22px;height:22px;font-size:10px}
  .hud-dock{grid-area:dock;justify-content:space-between;padding:4px}
  .hk{width:auto;flex:1;height:46px}
  .hk svg{width:21px;height:21px}
  .hk span{font-size:7.5px}
  .ph-note{display:none}
}

/* =====================================================================
   PHOTO SCENE : fixed behind the page, doors work while it's in view
   ===================================================================== */
.scene-wrap{position:fixed;inset:0;z-index:0;background:#05050a;overflow:hidden}
.scene-spacer{height:100svh;pointer-events:none}
.scene-spacer.short{height:78svh}
body.has-scene #room > :not(.scene-wrap):not(.scene-spacer):not(.backdrops){position:relative;z-index:2}
.s-view{position:absolute;inset:0 0 calc(var(--hud-h) - 6px) 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.s-view::-webkit-scrollbar{display:none}
.s-scene{position:relative;width:100%;height:100%;transform-origin:50% 50%;transition:transform .8s cubic-bezier(.6,0,.8,.4),filter .8s}
.s-scene.entering{filter:brightness(0)}
.scene-wrap.away .s-scene{pointer-events:none}
.s-photo,.s-drawing{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.s-dimmer{position:absolute;inset:0;pointer-events:none;background:rgba(4,4,8,calc(var(--dim) * .62));-webkit-backdrop-filter:blur(calc(var(--dim) * 6px));backdrop-filter:blur(calc(var(--dim) * 6px));z-index:15}

/* backdrops that the page scrolls into (data-backdrop="key" on a section) */
.backdrops{position:fixed;inset:0;z-index:1;pointer-events:none}
.backdrops .bd{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease,transform 6s ease;transform:scale(1.06);background-size:cover;background-position:center}
.backdrops .bd.on{opacity:1;transform:scale(1)}
.backdrops .bd svg{width:100%;height:100%;display:block}
.backdrops .bd::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(4,4,8,.75))}

/* THE SECRETS HALL GRADE: same on every photo = one house. Light, bleached, gold. */
.sh-grade{filter:sepia(.14) saturate(calc(.55 + .3 * var(--lit))) contrast(.97) brightness(calc(.8 + .28 * var(--lit)));transition:filter 1.6s ease}
.s-wash,.s-vignette,.s-fog{position:absolute;inset:0;pointer-events:none}
.s-wash{background:radial-gradient(ellipse 70% 50% at 50% 12%,rgba(255,241,194,calc(.2 * var(--lit))),transparent 70%),linear-gradient(180deg,rgba(255,250,235,.06),transparent 45%,rgba(4,4,8,.55));mix-blend-mode:soft-light}
.s-vignette{background:radial-gradient(ellipse at 50% 46%,transparent 50%,rgba(3,3,6,calc(.84 - .3 * var(--lit))) 100%)}
.s-fog{background:linear-gradient(180deg,rgba(240,236,228,calc(.2 - .2 * var(--lit))),transparent);mix-blend-mode:screen}
.ph-note{position:absolute;left:50%;transform:translateX(-50%);top:calc(18px + env(safe-area-inset-top,0px));z-index:25;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--bone);background:rgba(4,4,8,.7);border:1px dashed var(--line);padding:5px 10px;border-radius:10px;pointer-events:none;white-space:nowrap}

/* doors (hotspots) */
.door{position:absolute;z-index:10;display:block;text-decoration:none;cursor:pointer;background:none;border:0;padding:0;
  left:calc(var(--x) - var(--w) / 2);top:calc(var(--y) - var(--h) / 2);width:var(--w);height:var(--h)}
.door .glow{position:absolute;inset:0;border-radius:50% 50% 8px 8px / 28% 28% 8px 8px;border:1.5px solid rgba(255,241,194,0);transition:.3s}
.door.round .glow{border-radius:50%}
.door.rect .glow{border-radius:10px}
.door:hover .glow,.door:focus-visible .glow{border-color:rgba(255,241,194,.95);
  background:radial-gradient(ellipse at 50% 60%,rgba(255,236,170,.3),rgba(255,236,170,.05) 70%);
  box-shadow:0 0 44px rgba(255,220,130,.4),inset 0 0 30px rgba(255,230,150,.25)}
.door:focus-visible{outline:none}
.door.room-door:not(.seen) .glow{animation:sh-breathe 3.4s ease-in-out infinite}
@keyframes sh-breathe{0%,100%{border-color:rgba(255,241,194,0)}50%{border-color:rgba(255,241,194,.45)}}
.door.key{width:auto!important;height:auto!important;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.door.key .glow{position:relative;display:block;width:46px;height:46px;border-radius:50%;border-color:rgba(255,241,194,.6);
  background:radial-gradient(circle,rgba(255,236,170,.25),transparent 70%);animation:sh-float 4s ease-in-out infinite}
.door.key .glow::before{content:"";position:absolute;inset:12px 15px;background:var(--gold-hi);clip-path:path("M8 0 A6 6 0 0 1 11 11 L14 22 H2 L5 11 A6 6 0 0 1 8 0 Z");opacity:.85}
@keyframes sh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.door.secret .glow{border-color:rgba(255,241,194,.95);box-shadow:0 0 30px rgba(255,210,120,.5);animation:none;
  background:linear-gradient(90deg,transparent 46%,rgba(255,236,170,.9) 50%,transparent 54%)}

/* plaques: glass tabs hanging under each door */
.plaque{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);white-space:nowrap;text-align:center;padding:6px 13px 7px;pointer-events:none;
  border:1px solid var(--rim);border-radius:13px 13px 6px 6px;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04)),rgba(6,6,10,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 20px rgba(0,0,0,.45);transition:.25s}
.door.above .plaque{top:auto;bottom:100%;transform:translate(-50%,-8px)}
.door.inside .plaque{top:50%;transform:translate(-50%,-50%)}
.door.key .plaque{top:100%}
.plaque b{display:block;font-family:var(--font-d);font-weight:700;font-size:14px;letter-spacing:1.5px;color:var(--bone);line-height:1.2}
.plaque small{display:block;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-lt);font-weight:700}
.plaque .st{display:block;margin:5px auto 0;width:max-content;height:4px;min-width:28px;border-radius:2px;background:rgba(255,255,255,.18);font-size:0}
.door.seen .plaque .st{background:linear-gradient(90deg,var(--gold-lt),var(--gold));box-shadow:0 0 8px var(--gold)}
.door.here .plaque .st{background:var(--red)}
.door.room-door:not(.seen) .plaque{opacity:.82}
.door:hover .plaque,.door:focus-visible .plaque{opacity:1;border-color:var(--gold-lt)}
.door.secret .plaque{border-color:var(--red-hi)}

/* ghosts (collectibles, demo coins) */
.ghost{position:absolute;z-index:11;width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;
  left:var(--x);top:var(--y);transform:translate(-50%,-50%);color:var(--bone);opacity:.2;transition:opacity .3s;animation:sh-floaty 5s ease-in-out infinite}
.ghost:hover,.ghost:focus-visible{opacity:.92}
.ghost svg{width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 0 8px rgba(255,240,200,.65))}
.ghost.caught{animation:sh-poof .6s forwards;pointer-events:none}
.ghost.inline{position:relative;left:auto;top:auto;transform:none;display:inline-block}
@keyframes sh-floaty{0%,100%{margin-top:0}50%{margin-top:-10px}}
@keyframes sh-poof{to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}

/* old caption + strip markup from earlier rooms: the caption moves into the HUD, the strip floats */
.s-cap{display:none}
.swipe-hint{position:absolute;left:50%;transform:translateX(-50%);top:calc(70px + env(safe-area-inset-top,0px));z-index:25;display:none;padding:7px 14px;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:var(--gold-lt);
  border-radius:12px 12px 6px 6px;border:1px solid var(--rim);background:rgba(6,6,10,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}
.scene-wrap.away .swipe-hint,.scene-wrap.away .ph-note{display:none!important}
.scene-wrap.pans .swipe-hint{display:inline-flex;gap:6px;align-items:center;animation:sh-nudge 2.4s ease-in-out infinite}
@keyframes sh-nudge{0%,100%{margin-left:0}50%{margin-left:8px}}
.s-strip{position:relative;z-index:30;margin:-170px auto 40px;max-width:1180px;padding:0 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;pointer-events:none}
.s-strip > *{pointer-events:auto}
body.has-scene .s-strip{margin-top:calc(-1 * (var(--hud-h) + 120px))}

/* narrator = a text message (kept for older rooms) */
.narrator{display:flex;align-items:flex-end;gap:9px;max-width:min(400px,100%);padding:0;cursor:pointer;background:none;border:0;text-align:left}
.narrator .face{width:40px;height:40px;flex:none;border-radius:50%;border:1.5px solid var(--gold-lt);overflow:hidden;background:var(--ink-3);display:grid;place-items:center;font-family:var(--font-d);font-weight:900;color:var(--gold-lt);font-size:17px;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.narrator .face img{width:100%;height:100%;object-fit:cover;display:block}
.narrator > span:last-child{position:relative;padding:9px 14px 10px;border-radius:18px 18px 18px 5px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04)),rgba(20,20,28,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.narrator .nm{font-size:10px;letter-spacing:.3px;color:var(--gold-lt);font-weight:700}
.narrator br{display:none}
.narrator .nm::after{content:" · now";color:var(--mute);font-weight:500}
.narrator .tx{display:block;font-size:14px;line-height:1.45;color:var(--bone);transition:opacity .25s}
.narrator .more{display:block;margin-top:4px;font-size:9.5px;color:var(--mute)}
.narrator.kim > span:last-child{background:linear-gradient(180deg,#d43a33,var(--red) 50%,#7a1f2b);border-color:#e0574d;border-radius:18px 18px 5px 18px}

/* quick lane : glass keys */
.quick:not(body){display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px;border-radius:20px 20px 10px 10px;border:1px solid var(--rim);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03)),var(--glass-tint);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.quick:not(body) .q-lbl{display:none}
.q-btn{height:40px;padding:0 15px;border-radius:14px 14px 6px 6px;border:1px solid transparent;background:transparent;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;transition:.15s}
.q-btn:hover{border-color:var(--rim);background:rgba(255,255,255,.07)}
.q-btn.primary{color:#1a1405;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lt) 35%,var(--gold));box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}

@media (max-width:760px){
  .s-strip{flex-direction:column;align-items:stretch}
  .narrator{max-width:none}
  .quick:not(body){justify-content:center}
  .q-btn{flex:1 1 auto;justify-content:center;padding:0 10px}
}

/* =====================================================================
   TEXT MESSAGES (from Kim's Phone Studio, Midnight archive theme)
   ===================================================================== */
.phone{width:min(380px,100%);border-radius:34px 34px 22px 22px;padding:10px;--glass-tint:rgba(6,6,10,.55)}
.ph-head{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.ph-av{width:36px;height:36px;border-radius:50%;flex:none;border:1.5px solid var(--gold-lt);background:var(--ink-3);display:grid;place-items:center;overflow:hidden;font-family:var(--font-d);font-weight:900;color:var(--gold-lt)}
.ph-av img{width:100%;height:100%;object-fit:cover}
.ph-who b{display:block;font-size:14px;line-height:1.1}
.ph-who small{display:block;font-size:11px;color:var(--gold-lt)}
.ph-body{display:flex;flex-direction:column;gap:6px;padding:12px 6px 6px;min-height:120px}
.msg{max-width:80%;padding:8px 13px 9px;font-size:14px;line-height:1.42;border-radius:19px;animation:sh-pop .32s cubic-bezier(.2,.9,.3,1.3) both;word-wrap:break-word}
.msg.them{align-self:flex-start;border-bottom-left-radius:6px;color:var(--bone);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05)),rgba(40,40,52,.7);border:1px solid rgba(255,255,255,.1)}
.msg.me{align-self:flex-end;border-bottom-right-radius:6px;color:#fff;background:linear-gradient(180deg,#c0242f,#7A1F2B)}
.msg .by{display:block;font-size:10.5px;font-weight:700;color:var(--gold-lt);margin-bottom:1px}
.msg.me .by{color:#ffd9d4}
.msg.photo{padding:4px;width:180px}
.msg.photo i{display:block;height:110px;border-radius:15px;background:linear-gradient(135deg,rgba(255,241,194,.25),rgba(201,162,39,.08)),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px)}
.msg.voice{display:flex;align-items:center;gap:8px}
.msg.voice i{flex:1;height:18px;min-width:90px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px);mask:linear-gradient(90deg,#000 0 30%,rgba(0,0,0,.5) 30% 100%);opacity:.8}
.ph-meta{align-self:flex-end;font-size:10px;color:var(--mute);margin:-2px 4px 2px}
.typing{align-self:flex-start;display:inline-flex;gap:4px;padding:11px 14px;border-radius:19px;border-bottom-left-radius:6px;background:rgba(40,40,52,.7)}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:sh-dots 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes sh-dots{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes sh-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.replies{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;padding:8px 4px 4px}
.reply{border:1px solid #e0574d;background:linear-gradient(180deg,rgba(224,87,77,.25),rgba(179,38,30,.12));color:var(--bone);border-radius:16px 16px 5px 16px;padding:8px 13px;font-size:13px;cursor:pointer;transition:.15s}
.reply:hover{background:linear-gradient(180deg,#c0242f,#7A1F2B)}

/* =====================================================================
   ENCOUNTERS (a corner of the screen, never in your face)
   ===================================================================== */
#encounters{position:fixed;z-index:560;right:14px;bottom:calc(var(--hud-h) + 30px + env(safe-area-inset-bottom,0px));width:min(340px,calc(100vw - 28px));display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.enc{pointer-events:auto;width:100%;border-radius:22px 22px 12px 12px;padding:10px 12px;cursor:pointer;animation:sh-enc .5s cubic-bezier(.2,.9,.3,1.2) both;--glass-tint:rgba(6,6,10,.6)}
@keyframes sh-enc{from{opacity:0;transform:translateX(30px) scale(.97)}to{opacity:1;transform:none}}
.enc.out{animation:sh-enc-out .4s ease forwards}
@keyframes sh-enc-out{to{opacity:0;transform:translateX(30px)}}
.enc-top{display:flex;align-items:center;gap:10px}
.enc-app{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(160deg,var(--gold-hi),var(--gold) 60%,#8a6c14);color:#1a1405;font-family:var(--font-d);font-weight:900;font-size:15px}
.enc-app img{width:100%;height:100%;object-fit:cover}
.enc-who{flex:1;min-width:0}
.enc-who b{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.enc-who b small{font-size:10.5px;color:var(--mute);font-weight:500}
.enc-who p{margin:1px 0 0;font-size:13px;color:var(--bone);opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enc.open{cursor:default}
.enc.open .enc-who p{display:none}
.enc .ph-body{min-height:0;padding:10px 0 2px}
.enc .x{top:8px;right:8px;width:26px;height:26px}
.enc .x svg{width:10px;height:10px}

/* =====================================================================
   MR. STERCES, walking along the bottom of the screen
   ===================================================================== */
#butler{position:fixed;z-index:540;left:0;bottom:calc(var(--hud-h) + 30px + env(safe-area-inset-bottom,0px));width:110px;height:165px;pointer-events:none;will-change:transform}
#butler .bod{position:absolute;inset:0;pointer-events:auto;cursor:pointer}
#butler svg.body-svg,#butler canvas{width:100%;height:100%;display:block;overflow:visible}
#butler .say{position:absolute;bottom:100%;left:50%;width:max-content;max-width:240px;transform:translateX(-30%);margin-bottom:4px;pointer-events:auto}
#butler .say .msg{max-width:none;animation:sh-pop .3s both}
body.quick #butler,body.quick #encounters{display:none}
@media (max-width:760px){#butler{width:72px;height:108px;transition:opacity .4s}body.butler-aside #butler{opacity:0;pointer-events:none}}

/* =====================================================================
   THE BLUEPRINT (floor plan you can travel through)
   ===================================================================== */
#blueprint{position:fixed;inset:0;z-index:700;display:grid;place-items:center;padding:16px;background:rgba(2,3,8,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bp-pane{position:relative;width:min(1100px,100%);max-height:calc(100svh - 32px);overflow:auto;padding:18px;border-radius:26px 26px 12px 12px;--glass-tint:rgba(4,8,14,.55)}
.bp-pane .x{z-index:3}
.bp-svg{display:block;width:100%;height:auto}
.bp-svg text{font-family:var(--font-b);fill:var(--bone)}
.bp-grid{stroke:rgba(232,207,122,.07);stroke-width:1}
.bp-wall{fill:none;stroke:rgba(232,207,122,.65);stroke-width:2}
.bp-wall.thin{stroke-width:1;stroke-dasharray:4 5;opacity:.5}
.bp-room{cursor:pointer}
.bp-room rect,.bp-room path{fill:rgba(255,255,255,.035);stroke:rgba(232,207,122,.35);stroke-width:1.2;stroke-dasharray:5 4;transition:.25s}
.bp-room.seen rect,.bp-room.seen path{fill:rgba(201,162,39,.16);stroke:var(--gold-lt);stroke-dasharray:none;filter:url(#bp-glow)}
.bp-room:hover rect,.bp-room:hover path,.bp-room:focus-visible rect{fill:rgba(255,241,194,.22);stroke:var(--gold-hi)}
.bp-room text.n{font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:1px;text-anchor:middle}
.bp-room text.s{font-size:8.5px;letter-spacing:1.8px;text-anchor:middle;fill:var(--gold-lt);text-transform:uppercase;font-weight:700}
.bp-room.here text.n{fill:var(--gold-hi)}
.bp-path{fill:none;stroke:var(--red-hi);stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--red))}
.bp-you circle.core{fill:var(--red-hi)}
.bp-you circle.pulse{fill:none;stroke:var(--red-hi);stroke-width:2;animation:bp-pulse 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes bp-pulse{from{transform:scale(.6);opacity:1}to{transform:scale(2.6);opacity:0}}
.bp-scan{fill:url(#bp-scan);animation:bp-scan 5s linear infinite}
@keyframes bp-scan{from{transform:translateY(-120px)}to{transform:translateY(760px)}}
.bp-tick{font-size:8px;fill:rgba(232,207,122,.5)!important;letter-spacing:1px}
.bp-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:6px 6px 0;font-size:11px;color:var(--mute)}
.bp-legend i{display:inline-block;width:12px;height:12px;border:1.5px dashed rgba(232,207,122,.5);vertical-align:-2px;margin-right:6px;border-radius:3px}
.bp-legend i.on{border-style:solid;border-color:var(--gold-lt);background:rgba(201,162,39,.3)}
.bp-legend b{font-family:var(--font-d);font-size:20px;color:var(--bone);font-weight:900}

/* =====================================================================
   THE JOURNAL (HUD device, the demo of the Travel Journal)
   ===================================================================== */
#journal-dev{position:fixed;z-index:690;right:14px;bottom:calc(var(--hud-h) + 30px + env(safe-area-inset-bottom,0px));width:min(400px,calc(100vw - 28px));max-height:calc(100svh - var(--hud-h) - 80px);overflow:auto;padding:14px;border-radius:26px 26px 12px 12px;--glass-tint:rgba(6,6,10,.66);animation:sh-enc .4s both}
.jd-tabs{display:flex;gap:4px;padding:3px;border-radius:14px 14px 7px 7px;background:rgba(255,255,255,.05);margin:6px 0 12px}
.jd-tabs button{flex:1;height:32px;border:0;background:none;cursor:pointer;border-radius:11px 11px 5px 5px;font-size:9.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mute)}
.jd-tabs button[aria-selected="true"]{color:#1a1405;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lt) 40%,var(--gold))}
.jd-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.jd-row .lbl{width:76px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mute);font-weight:700}
.bar{flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transition:width 1s}
.bar.red i{background:linear-gradient(90deg,var(--red-deep),var(--red-hi))}
.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stamp{aspect-ratio:1;border:2px dashed var(--red-hi);border-radius:50%;display:grid;place-items:center;text-align:center;padding:4px;transform:rotate(-6deg);color:var(--red-hi);font-size:8.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;line-height:1.1}
.stamp:nth-child(2n){transform:rotate(5deg);border-color:var(--gold-lt);color:var(--gold-lt)}
.stamp.empty{opacity:.22}
.jd-foot{margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:11px;color:var(--mute)}
.jd-big{font-family:var(--font-d);font-size:26px;font-weight:900;line-height:1}
.jd-quest{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;border:1px solid var(--line-soft);margin:6px 0;text-decoration:none;font-size:13px}
.jd-quest .ck{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--gold-lt);flex:none}
.jd-quest.done .ck{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.jd-quest.done span{opacity:.5;text-decoration:line-through}

/* =====================================================================
   ROUTE MAP : travelling from secret to secret (S2D.route)
   ===================================================================== */
.route-map{position:relative;width:100%;aspect-ratio:16/10;max-width:100%}
.route-map svg{width:100%;height:100%;display:block}
.rm-street{fill:none;stroke:rgba(245,241,232,.14);stroke-width:2}
.rm-street.big{stroke:rgba(245,241,232,.22);stroke-width:5}
.rm-river{fill:none;stroke:rgba(120,160,190,.25);stroke-width:18;stroke-linecap:round}
.rm-line{fill:none;stroke:var(--red-hi);stroke-width:4;stroke-linecap:round;stroke-dasharray:9 8;filter:drop-shadow(0 0 5px rgba(210,58,47,.7))}
.rm-pin circle.d{stroke:#fff;stroke-width:2.5}
.rm-pin text{font-family:var(--font-b);font-weight:800;font-size:13px;fill:#fff;text-anchor:middle;dominant-baseline:central}
.rm-pin .pi{transform-box:fill-box;transform-origin:center bottom;animation:rm-drop .5s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes rm-drop{from{opacity:0;transform:translateY(-20px) scale(.6)}to{opacity:1;transform:none}}
.rm-traveler circle{fill:var(--gold-hi);filter:drop-shadow(0 0 8px var(--gold))}
.rm-tag{position:absolute;transform:translate(-50%,-140%);padding:5px 11px;white-space:nowrap;font-size:11px;font-weight:700;border-radius:12px 12px 5px 5px;border:1px solid var(--rim);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),rgba(6,6,10,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:sh-pop .35s both;pointer-events:none}
.rm-tag .t{display:block;font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-lt)}

/* =====================================================================
   THE BASEMENT (footer) : one quiet strip of glass
   ===================================================================== */
#basement{position:relative;z-index:2;padding-block:40px 30px}
.foot{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;padding:16px 20px;border-radius:20px 20px 10px 10px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.foot nav a{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;font-weight:700;text-decoration:none;color:var(--mute)}
.foot nav a:hover{color:var(--gold-lt)}
.foot .mem{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mute)}
.foot .mem svg{width:18px;height:18px;stroke:var(--gold-lt);fill:none;stroke-width:1.6;flex:none}
.forget-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px}
.foot h4,.foot p,.copy{display:none}

/* =====================================================================
   MODALS + TOAST
   ===================================================================== */
.modal{position:fixed;inset:0;z-index:700;display:grid;place-items:center;padding:16px;background:rgba(2,2,6,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet{width:100%;max-width:640px;max-height:calc(100svh - 32px);overflow:auto;padding:28px clamp(18px,4vw,32px);border-radius:26px 26px 12px 12px}
.sheet h3{margin:0 0 4px;font-family:var(--font-d);font-size:26px;letter-spacing:1px}
.sheet .sub{margin:0 0 18px;font-size:13px;color:var(--mute)}
.x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--rim);background:rgba(255,255,255,.06);cursor:pointer;display:grid;place-items:center;z-index:2}
.x:hover{border-color:var(--gold-lt);background:rgba(255,255,255,.12)}
.x svg{width:14px;height:14px;stroke:var(--bone);stroke-width:2}

/* city finder */
.search{width:100%;height:50px;padding:0 18px;border-radius:18px 18px 8px 8px;border:1px solid var(--rim);background:rgba(255,255,255,.05);color:var(--bone);font-size:15px;outline:none;font-family:var(--font-b);box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.search:focus{border-color:var(--gold-lt)}
.cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:16px}
.city{min-height:48px;padding:6px 12px;border-radius:14px 14px 6px 6px;border:1px solid var(--rim);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));cursor:pointer;text-align:left;font-size:13px;font-weight:600;transition:.12s;display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.city small{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mute);font-weight:700}
.city.soon{opacity:.55;border-style:dashed}
.city.soon small{color:var(--gold-lt)}
.city:hover,.city:focus-visible{border-color:var(--gold-lt);background:rgba(201,162,39,.16);opacity:1}
.city-filter{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.city-filter button{height:30px;padding:0 13px;border-radius:12px 12px 5px 5px;border:1px solid var(--rim);background:none;cursor:pointer;font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase}
.city-filter button[aria-pressed="true"]{background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-color:var(--gold);color:#1a1405}
.no-city{margin-top:16px;font-size:13px;color:var(--mute)}

#toast{position:fixed;z-index:850;top:calc(68px + env(safe-area-inset-top,0px));left:50%;max-width:calc(100% - 32px);width:340px;
  display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px 18px 9px 9px;border:1px solid var(--rim);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),rgba(6,6,10,.7);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 40px rgba(0,0,0,.6);transform:translate(-50%,calc(-100% - 120px));transition:transform .45s cubic-bezier(.2,.9,.3,1.2)}
#toast.show{transform:translate(-50%,0)}
#toast .ti{font-family:var(--font-d);font-weight:700;color:var(--gold-lt);font-size:13px;letter-spacing:.5px}
#toast .ts{font-size:12px;color:var(--mute);margin-top:2px}
#toast .tdot{width:10px;height:10px;margin-top:5px;flex:none;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* door placer (open a room with #place) */
#placer{position:fixed;z-index:880;right:14px;top:70px;width:min(330px,calc(100vw - 28px));max-height:calc(100svh - 90px);overflow:auto;padding:14px;border-radius:20px 20px 10px 10px;--glass-tint:rgba(6,6,10,.8);font-size:12.5px}
#placer h5{margin:0 0 6px;font-family:var(--font-d);font-size:15px;color:var(--gold-lt)}
#placer ol{margin:6px 0;padding-left:18px}
#placer code{color:var(--gold-lt)}
#placer .pl-list{display:flex;flex-direction:column;gap:4px;margin:8px 0}
#placer .pl-list div{display:flex;justify-content:space-between;gap:6px;font-variant-numeric:tabular-nums;padding:4px 6px;border-radius:6px;background:rgba(255,255,255,.04)}
#placer .pl-act{display:flex;flex-wrap:wrap;gap:6px}
#placer select{background:var(--ink-3);color:var(--bone);border:1px solid var(--rim);border-radius:8px;height:32px}
body.placing .s-scene{cursor:crosshair}
body.placing .door{outline:1.5px dashed rgba(255,90,90,.95);outline-offset:0;cursor:move}
body.placing .door .glow{border-color:rgba(255,90,90,.6)!important}
body.placing .door .rs{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;border-radius:3px;background:#ff5a5a;cursor:nwse-resize}
body.placing .scene-wrap{z-index:3}

/* preview-only stand-in for server parts */
.preview-slot{padding:18px;border:1px dashed var(--rim);border-radius:16px 16px 8px 8px;background:rgba(255,255,255,.03)}
.preview-slot .tag{display:inline-block;margin-bottom:10px;font-size:9px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;color:#1a1405;background:var(--gold-lt);padding:2px 8px;border-radius:3px}

/* =====================================================================
   WOOCOMMERCE inside the house
   ===================================================================== */
.woocommerce,.woocommerce-page{color:var(--bone)}
.woocommerce a{color:var(--gold-lt)}
.woocommerce table.shop_table{border:1px solid var(--rim);border-radius:18px 18px 9px 9px;border-collapse:separate;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(6,6,10,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--line-soft)!important;padding:12px}
.woocommerce table.shop_table th{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-lt)}
.woocommerce input.input-text,.woocommerce textarea,.woocommerce select,.woocommerce .select2-selection{background:rgba(255,255,255,.05)!important;color:var(--bone)!important;border:1px solid var(--rim)!important;border-radius:12px 12px 6px 6px!important;padding:10px 12px!important;min-height:44px}
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button,.woocommerce #place_order{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lt) 35%,var(--gold))!important;color:#1a1405!important;border-radius:16px 16px 7px 7px!important;font-weight:800!important;letter-spacing:1.6px!important;text-transform:uppercase!important;font-size:11px!important;padding:13px 22px!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important}
.woocommerce #place_order,.woocommerce .checkout-button{background:linear-gradient(180deg,#e0574d,var(--red) 55%,var(--red-deep))!important;color:var(--bone)!important}
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:rgba(255,255,255,.06)!important;color:var(--bone)!important;border-top-color:var(--gold)!important;border-radius:14px}
.woocommerce-error{border-top-color:var(--red)!important}
.woocommerce form .form-row label{font-size:12px;color:var(--mute)}
#payment,.woocommerce-checkout #payment{background:rgba(255,255,255,.05)!important;border-radius:16px!important}
#payment .payment_box{background:rgba(255,255,255,.06)!important;color:var(--bone)!important}

/* =====================================================================
   PLAIN PAGES (posts, archives, product pages)
   ===================================================================== */
.sh-plain .h-big{margin-top:6px}
.sh-list{display:grid;gap:14px;margin-top:24px}
.sh-item{display:flex;flex-direction:column;gap:4px;text-decoration:none;transition:.15s}
.sh-item:hover{border-color:var(--gold-lt)}
.sh-pager .nav-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.sh-pager .page-numbers{padding:6px 12px;border:1px solid var(--rim);border-radius:10px 10px 5px 5px;text-decoration:none}
.sh-pager .current{background:var(--gold);color:var(--ink)}
.sh-thumb img{width:100%;height:auto;border-radius:16px;margin:8px 0 22px;display:block}
.sh-content{font-size:16px;line-height:1.75}
.sh-content h2,.sh-content h3{font-family:var(--font-d);line-height:1.2;margin:1.6em 0 .5em}
.sh-content a{color:var(--gold-lt)}
.sh-content img{height:auto;border-radius:12px}
.sh-content blockquote{margin:1.4em 0;padding:4px 0 4px 18px;border-left:3px solid var(--red);font-style:italic}
.sh-woo div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.sh-woo div.product > *{min-width:0}
.sh-woo div.product .woocommerce-product-gallery{max-width:560px;width:100%!important;float:none!important}
.sh-woo div.product .summary{width:100%!important;float:none!important}
.sh-woo div.product .woocommerce-tabs,.sh-woo div.product .related,.sh-woo div.product .upsells{grid-column:1/-1}
.sh-woo .woocommerce-product-gallery__image img{border-radius:16px;width:100%;height:auto}
.sh-woo .product_title{font-family:var(--font-d);font-size:clamp(28px,4vw,44px);line-height:1.1;margin:0 0 10px}
.sh-woo .price{color:var(--gold-lt)!important;font-size:22px!important;font-weight:700}
.sh-woo ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;padding:0;margin:0;list-style:none}
.sh-woo ul.products::before,.sh-woo ul.products::after{display:none}
.sh-woo ul.products li.product{width:auto!important;margin:0!important;float:none!important;border:1px solid var(--rim);border-radius:18px 18px 9px 9px;padding:14px;background:rgba(255,255,255,.05)}
@media (max-width:860px){.sh-woo div.product{grid-template-columns:1fr;gap:20px}}
body:not(.has-scene) #room{padding-top:calc(70px + env(safe-area-inset-top,0px))}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
#room{overflow-x:clip}
body.admin-bar #mark,body.admin-bar #modesw{top:calc(44px + env(safe-area-inset-top,0px))}@media (max-width:782px){body.admin-bar #mark,body.admin-bar #modesw{top:58px}}