:root{--gold:#c99535;--gold-light:#efd17f;--black:#030303}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--black)}
body{display:grid;place-items:center;overflow:auto;color:var(--gold-light);font-family:Georgia,"Times New Roman",serif}
.page{width:100%;min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(129,82,18,.08),transparent 42%),#030303}
.scene{position:relative;width:min(100%,1536px);aspect-ratio:3/2;overflow:hidden;isolation:isolate;background:#050403}
.scene-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}


.conversation-hotspot{position:absolute;z-index:25;left:35.42%;top:96.68%;width:21.81%;height:2.93%;display:block;cursor:pointer;border:1px solid transparent;text-decoration:none;outline:none}
.conversation-hotspot:hover,.conversation-hotspot:focus-visible{border-color:rgba(239,209,127,.78);background:rgba(201,149,53,.06);box-shadow:0 0 22px rgba(201,149,53,.18),inset 0 0 12px rgba(239,209,127,.06)}

.tree-hotspot{position:absolute;z-index:8;left:35.5%;top:50.5%;width:14.5%;height:20%;border-radius:50%;cursor:default}
.tree-hotspot::before,.tree-hotspot::after{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity 1.1s ease,transform 1.1s ease}
.tree-hotspot::before{inset:-15%;border-radius:50%;background:radial-gradient(circle,rgba(244,197,92,.23) 0%,rgba(211,151,42,.10) 38%,rgba(151,96,18,.04) 56%,transparent 72%);filter:blur(7px);transform:scale(.88);mix-blend-mode:screen}
.tree-hotspot::after{left:44%;top:6%;width:3px;height:88%;border-radius:50%;background:linear-gradient(to bottom,transparent,rgba(245,207,121,.7) 35%,rgba(202,146,45,.35) 73%,transparent);filter:blur(4px);box-shadow:-35px 25px 16px rgba(216,161,62,.16),34px 20px 18px rgba(216,161,62,.14);transform:scaleY(.82)}
.tree-hotspot:hover::before,.tree-hotspot:hover::after{opacity:1;transform:scale(1)}

.door-zone{position:absolute;z-index:12;left:85.45%;top:27.2%;width:10.25%;height:36.8%;perspective:1100px;cursor:pointer}
.door-interior{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(164,107,31,.45);background:radial-gradient(ellipse at 65% 44%,rgba(188,124,35,.22),transparent 27%),linear-gradient(100deg,#050301 0%,#120b04 48%,#020201 100%);box-shadow:inset 16px 0 27px rgba(0,0,0,.92),inset -8px 0 18px rgba(191,125,32,.06)}
.door-interior::after{content:"";position:absolute;left:53%;top:30%;width:1px;height:42%;background:rgba(232,180,79,.24);box-shadow:0 0 17px rgba(232,180,79,.22)}
.door-panel{position:absolute;inset:0;transform-origin:100% 50%;transform-style:preserve-3d;transition:transform 1.35s cubic-bezier(.22,.72,.12,1),filter 1.2s ease,box-shadow 1.2s ease;border:2px solid rgba(137,84,24,.78);background:linear-gradient(90deg,rgba(255,255,255,.025),transparent 13%,transparent 86%,rgba(255,255,255,.025)),linear-gradient(105deg,#130b04 0%,#211207 32%,#160c05 63%,#0b0603 100%);box-shadow:inset 0 0 0 7px rgba(4,3,2,.44),inset 0 0 0 9px rgba(145,91,25,.36),0 5px 16px rgba(0,0,0,.7)}
.door-panel::before{content:"";position:absolute;left:16%;right:15%;top:9%;bottom:9%;border:1px solid rgba(130,83,30,.62);box-shadow:inset 0 0 0 6px rgba(5,3,2,.34),inset 0 0 0 8px rgba(124,78,26,.32)}
.door-panel::after{content:"";position:absolute;left:9%;top:51%;width:9%;height:3%;border-radius:60% 25% 25% 60%;background:linear-gradient(90deg,#5d360c,#d29a37 48%,#7c470f);box-shadow:-2px 0 0 #241305,0 0 8px rgba(210,154,55,.22)}
.door-zone:hover .door-panel,.door-zone:focus-within .door-panel{transform:rotateY(72deg);filter:brightness(1.12);box-shadow:-17px 8px 28px rgba(0,0,0,.9)}
.door-zone:hover .door-interior{box-shadow:inset 12px 0 22px rgba(0,0,0,.94),inset -4px 0 26px rgba(213,150,50,.13),0 0 18px rgba(185,121,28,.10)}
.door-label{position:absolute;left:50%;bottom:-29px;transform:translateX(-50%);white-space:nowrap;color:rgba(239,209,127,.72);font:10px/1.2 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:0;transition:opacity .65s ease;pointer-events:none}
.door-zone:hover .door-label{opacity:1}

@media(max-width:760px){.door-label{display:none}}
@media(prefers-reduced-motion:reduce){.door-panel,.tree-hotspot::before,.tree-hotspot::after{transition-duration:.01ms}}

/* Keep the title baked into the artwork below the fixed menu. */
.page{padding-top:102px;min-height:calc(100vh + 102px);place-items:start center}
.scene{margin:0 auto}
@media(max-width:760px){.page{padding-top:86px;min-height:calc(100vh + 86px)}}