.puzzle-ghost path{fill:#f4f5ee;stroke:#354b3c;stroke-width:3}.puzzle-ghost ellipse{fill:#354b3c}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Yu Gothic','Meiryo',sans-serif;--bg:#171d23;--ink:#e3e8e5;--edge:#69737b;--wall:#303a40;--gate:#242f34;--metal:#5f6d71;--ground:#20282e;--paper:#e7ebe6;--door:#414a4a}body.light{--bg:#e6e8e5;--ink:#303b3b;--edge:#74817e;--wall:#c5cbc6;--gate:#515e5e;--metal:#a9b3ad;--ground:#cdd2cc;--door:#7b8179}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:3px solid #899d97;outline-offset:4px}.review{background:#fff;color:#36403c;padding:12px 20px;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;border-bottom:1px solid #ccc;font-size:12px}.review button{padding:6px 10px;background:#f1f2ef;border:1px solid #adb5af;border-radius:3px}.review button[aria-pressed=true]{background:#34433e;color:#fff}.review strong{margin-right:14px}.shot .review{display:none}main{max-width:760px;margin:auto;padding:35px 28px 20px;text-align:center}h1{font-family:'Yu Mincho','MS PMincho',serif;font-size:42px;font-weight:500;letter-spacing:.22em;margin:0 0 10px;padding-left:.22em}header p{font-size:16px;letter-spacing:.1em;margin:0 0 22px}.scene{position:relative;width:100%;margin:auto}.scene-camera>svg{width:100%;height:auto;display:block}.wall{fill:var(--wall)}.edge{stroke:var(--edge)}.gate{fill:var(--gate);stroke:var(--metal);stroke-width:2}.metal{stroke:var(--metal);fill:none}.ground{fill:var(--ground)}.door{fill:var(--door)}.bell{position:absolute;right:1.8%;top:43%;width:6%;height:17%;padding:0;border:1px solid #99a6a5;background:#475353;border-radius:3px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;min-width:32px}.bell span{width:16px;height:16px;border:1px solid #c4ceca;border-radius:50%;background:#7f8c84;box-shadow:inset 0 0 0 3px #424e4a}.bell i{width:18px;height:8px;border-top:1px solid #bbc6bf;border-bottom:1px solid #bbc6bf}.ghosts{position:absolute;left:12%;right:12%;top:48%;display:flex;justify-content:space-between;gap:8px}.ghost{width:21%;border:0;background:none;padding:0 0 12px;border-bottom:2px solid transparent}.ghost svg{width:100%;display:block;filter:drop-shadow(0 4px 12px #d3e8dc18)}.ghost[aria-pressed=true]{border-color:#c1d1c8}.conversation{min-height:68px;width:90%;margin:0 auto;display:flex;align-items:center;text-align:left;font-size:16px;line-height:1.8;padding:10px 18px;border:1px solid #77867e;background:#26322e}.answer{min-height:68px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px}.answer input{width:230px;min-width:0;padding:12px;border:1px solid #89988e;background:#f7f8f3;border-radius:2px;color:#2d3833}.answer button{border:1px solid #566a60;background:#40594d;color:#fff;padding:12px 18px;border-radius:2px;white-space:nowrap}.vacant{height:68px}.sound{display:flex;align-items:center;gap:16px;max-width:390px;margin:16px auto 0;height:44px}.mute{width:44px;height:44px;flex:none;border:1px solid var(--edge);background:transparent;border-radius:3px}.mute svg{width:23px;vertical-align:middle}.sound label{font-size:12px;white-space:nowrap}.sound input{width:100%;min-width:30px;accent-color:#869e91}.sound output{font-size:15px;min-width:28px;font-variant-numeric:tabular-nums;text-align:right}.restart,.result-link{background:transparent;border:0;border-bottom:1px solid var(--edge);font-size:12px;padding:8px 2px;margin:16px 8px 0}.veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#14201955}.modal{position:relative;width:min(360px,88%);background:#f3f5ef;color:#2a3731;border:1px solid #b1bcb4;padding:36px 20px 26px;box-shadow:0 12px 35px #14201930}.modal h2{font-family:'Yu Mincho',serif;font-weight:500;font-size:25px;margin:0 0 14px}.modal p{font-size:14px;line-height:1.8;margin:0 0 24px}.modal .share{display:block;margin:auto;border:0;background:#40594d;color:white;padding:12px 32px}.modal .back{background:none;border:0;border-bottom:1px solid #97a69c;margin:16px auto 0;padding:5px 12px}.modal nav{font-size:10px;display:flex;justify-content:center;gap:16px;margin-top:28px}.modal .close{position:absolute;top:5px;right:9px;background:none;border:0;font-size:22px}.house-line{stroke:var(--edge);fill:none;stroke-width:2}[hidden]{display:none!important}@media(min-width:900px){main{padding-top:35px;max-width:750px}.scene{max-width:635px}header p{margin-bottom:14px}h1{font-size:40px}}@media(max-width:500px){main{padding:30px 12px 18px}h1{font-size:34px}header p{font-size:15px;margin-bottom:24px}.scene{margin-top:8px}.answer{gap:6px;font-size:14px}.answer input{width:calc(100% - 145px);padding:12px 9px}.answer button{padding:12px 11px}.conversation{font-size:14px;min-height:78px;width:96%;padding:10px 14px}.sound{max-width:310px;gap:10px;margin-top:16px}.vacant{height:78px}.answer{min-height:78px}.modal{padding-top:28px;padding-bottom:20px}.modal h2{font-size:23px}.modal p{font-size:12px}.modal nav{font-size:9px;gap:12px}}

.quoted{white-space:nowrap}
/* B: settings panel, PNG ghosts, speech bubble and residential entry. */
header{position:relative}.settings-toggle{position:absolute;right:0;top:5px;width:44px;height:44px;border:1px solid var(--edge);border-radius:50%;background:transparent;display:grid;place-items:center}.settings-toggle svg{width:22px;height:22px}dialog.settings{width:min(390px,calc(100vw - 36px));color:var(--ink);background:var(--bg);border:1px solid var(--edge);border-radius:10px;padding:24px;max-height:90vh}dialog.settings::backdrop{background:#101b24aa}.settings h2{font-size:20px;margin:0 0 22px;font-weight:500}.settings-close{position:absolute;right:10px;top:8px;background:none;border:0;font-size:25px;width:40px;height:40px}.settings .sound{gap:12px;margin:0 0 24px}.settings .restart{display:block;margin:10px auto 0}.ghost img{width:100%;aspect-ratio:0.94;object-fit:cover;display:block;filter:none}.ghosts{top:52%}.ghost{padding-bottom:5px}.conversation{display:block;align-content:center;position:absolute;bottom:53%;left:8%;width:84%;margin:0;min-height:68px;background:#f4f5ee;color:#25352e;border:1px solid #a3b4a8;border-radius:22px;padding:15px 22px;box-shadow:0 5px 20px #07151133;font-size:16px;line-height:1.8;z-index:2}.conversation:after{content:'';position:absolute;bottom:-11px;left:var(--tail,10%);width:19px;height:19px;background:#f4f5ee;border-right:1px solid #a3b4a8;border-bottom:1px solid #a3b4a8;transform:rotate(45deg);border-radius:0 0 4px 0}.conversation:before{content:'';position:absolute;bottom:0;left:calc(var(--tail,10%) - 3px);height:3px;width:26px;background:#f4f5ee;z-index:1}.puzzle-paper{fill:#fff;stroke:#b8b5a7}.result-link{margin-top:8px}@media(max-width:500px){.conversation{font-size:14px;min-height:72px;width:88%;left:6%;padding:12px 16px;border-radius:19px}.settings-toggle{top:0;right:3px}.settings .sound{max-width:none;gap:10px}.scene{margin-top:8px}}
/* D: dark scene, lamp, ordinary tall door, speaker indicated by bubble only. */
body:not(.light){--bg:#050607;--ink:#d5d8d7;--edge:#343a3c}
body:not(.light) .scene-camera>svg{opacity:.18}
.bell{top:48%;height:15%}
.bell:before{content:'';width:5px;height:5px;border-radius:50%;background:#ba3934;position:absolute;top:8px;right:6px}
body:not(.light) .bell{background:#090a0b;border-color:#111416}
body:not(.light) .bell i{border-color:#141719}
body:not(.light) .bell span{background:#101214;border-color:#191c1d;box-shadow:none}
body:not(.light) .bell:before{background:#c83c34;box-shadow:0 0 5px 1px #ba292955}
.ghost,.ghost[aria-pressed=true]{border:0;padding-bottom:0}
.ghosts{top:59%}
.conversation{bottom:46%;left:var(--bubble-left,6%);width:76%;box-shadow:none}
@media(max-width:500px){.conversation{left:var(--bubble-left,6%);width:88%}}
.final-puzzle{position:absolute;left:11%;top:25%;width:78%;height:auto;display:block}

:root{--accent:#40594d;--on-accent:#fff}header p{line-height:normal}button{min-height:0}.settings-toggle,.mute,.answer button,.settings-close{min-height:44px}.settings-toggle{padding:0}.bell{padding:0}.ghost{padding:0;min-height:44px}.settings .restart{color:var(--ink)}#clear-dialog{color:#2a3731;background:#f3f5ef}#clear-dialog h2{font-family:"Yu Mincho",serif}#clear-dialog .quiet{color:#2a3731}.answer{margin:0}.scene{isolation:isolate}img{pointer-events:none;-webkit-user-drag:none}button:focus-visible{outline-color:#899d97}#result-link{color:var(--ink)}
body{min-height:100svh}html{background:#050607}

/* Match the approved preview without inheriting generic button padding. */
.mute{padding:0;display:grid;place-items:center}.mute svg{display:block}
#clear-dialog{width:min(360px,88%);padding:36px 20px 26px;border:1px solid #b1bcb4;border-radius:0}
#clear-dialog h2{font-size:25px;font-weight:500;margin:0 0 14px;line-height:normal}
#clear-message{font-size:14px;line-height:1.8;margin:0 0 24px}
#clear-dialog .primary{width:180px;margin:0 auto;padding:12px 32px}
#clear-dialog #return{margin:16px auto 0;padding:5px 12px;min-height:0;font-size:14px;display:table}
#clear-dialog .clear-links{font-size:10px;gap:16px;margin-top:28px}
@media(max-width:500px){#clear-dialog{padding-top:28px;padding-bottom:20px}#clear-dialog h2{font-size:23px}#clear-message{font-size:12px}#clear-dialog .clear-links{font-size:9px;gap:12px}}

/* Approved response silhouettes: merge before blur/opacity, no overlap seams. */
body:not(.light) .scene-camera>svg{opacity:.24;filter:grayscale(1)}
body:not(.light) .scene-camera>svg rect:not(.wall){fill:#24292b}
body:not(.light) .scene-camera>svg path:not(.wall):not(.ground):not(.gate):not(.metal):not(.house-line){fill:#24292b}
body:not(.light) .scene-camera>svg circle{fill:#24292b;stroke:#303638}
.shadow-layer{position:absolute;inset:0;pointer-events:none;filter:blur(7px);opacity:.23;overflow:visible}
.presence{position:absolute;background:#798382;border-radius:48% 48% 45% 45%;transform:translate(-50%,-50%)}
.bell{z-index:1}
/* Spirits emerge softly; audio timing and levels stay unchanged. */
@keyframes shadow-appear{from{opacity:0}to{opacity:.23}}
@keyframes ghost-appear{from{opacity:0}to{opacity:1}}
.shadow-layer{animation:shadow-appear 1.1s ease-out both}
.ghosts,.conversation{animation:ghost-appear .9s ease-out both}
@media(prefers-reduced-motion:reduce){.shadow-layer,.ghosts,.conversation{animation:none}}

.mute{font-size:14px;white-space:nowrap}.mute[aria-pressed="true"]{background:#40594d;color:#fff;border-color:#40594d}
/* Keep the intercom proportions independent of scene height. */
.bell{height:auto;aspect-ratio:2/3;max-width:40px}

/* Response silhouettes vanish sooner; audio continues unchanged. */
@keyframes shadow-brief{0%{opacity:0}26%,76%{opacity:.23}100%{opacity:0}}
.shadow-layer{animation:shadow-brief 4.2s ease-in-out both}
#clear-dialog{background:var(--bg);color:var(--ink);border-color:var(--edge)}
#clear-dialog .quiet,#clear-dialog .clear-links a{color:var(--ink)}
@keyframes enter-house{0%{transform:scale(1)}100%{transform:scale(1.32)}}
.scene.entering{overflow:hidden}
.scene.entering>.scene-camera{transform-origin:50% 48%;animation:enter-house 1.3s ease-in-out both}
.scene.entering .bell{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.shadow-layer{animation:none}.scene.entering>.scene-camera{animation:none}}

.settings .sound{margin-bottom:12px}.volume-steps{display:flex;justify-content:center;gap:16px;margin:0 0 18px}.volume-steps button{width:52px;height:44px;padding:0;font-size:22px;background:transparent;border:1px solid var(--edge);color:var(--ink);border-radius:3px}.volume-steps button:disabled{opacity:.3}

.settings .sound{gap:8px;margin-bottom:24px}
.volume-steps{display:inline-flex;align-items:center;gap:0;margin:0;flex:none}
.volume-steps button{width:24px;height:36px;min-height:36px;border:0;background:transparent;padding:0;font-size:15px;color:var(--ink);opacity:.65}
.volume-steps button:hover,.volume-steps button:focus-visible{opacity:1}
.volume-steps output{min-width:25px;text-align:center;font-size:14px}
.volume-steps button:disabled{opacity:.2}
/* Give the compact volume row more of the settings panel width. */
dialog.settings{padding:22px 16px}
.settings .sound{max-width:none;width:100%}

.sound-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 4px;min-height:36px}
.sound-heading label{font-size:14px}
.sound-heading .mute{width:auto;min-width:48px;height:34px;min-height:34px;padding:0 8px;font-size:13px}
.settings .sound{margin:0 0 20px;gap:10px}

/* Reference layout: mute | minus, slider, plus | value. */
.sound-heading{min-height:0;margin-bottom:12px}
.settings .sound{gap:8px}
.settings .sound .mute{width:62px;height:36px;min-height:36px;flex:none;font-size:13px;padding:0 6px}
.volume-adjust{display:flex;align-items:center;gap:4px;min-width:0;flex:1;border:0;padding:0 5px}
.volume-adjust button{flex:none;width:24px;height:36px;min-height:36px;padding:0;border:0;background:transparent;color:var(--ink);font-size:16px;opacity:.7}
.volume-adjust button:disabled{opacity:.2}
.volume-adjust input{flex:1;width:0;min-width:24px;margin:0}
.settings .sound output{min-width:26px;text-align:center;font-size:14px}

.settings-toggle{border-radius:9px}
dialog.settings{padding-top:50px;padding-bottom:22px}
.settings .sound{margin-bottom:0}
footer .restart{display:block;margin:18px auto 0;color:var(--ink)}
/* Compact visual frame, unchanged 44px hit area. */
.settings-toggle{border:0;border-radius:0}
.settings-toggle::before{content:'';position:absolute;inset:5px;border:1px solid var(--edge);border-radius:4px;pointer-events:none}

dialog.settings{padding-top:24px}.settings .sound-title{font-size:17px;font-weight:500;text-align:left;margin:0 36px 20px 0}

.sound-credit{margin:12px 0 0;text-align:center;font-size:11px;color:var(--ink);opacity:.65}.sound-credit a{color:inherit;text-underline-offset:3px}
@keyframes answer-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
@keyframes answer-flash{from,to{border-color:#b34b45}}
.answer input.wrong-answer{border-color:#b34b45;animation:answer-shake .3s ease-in-out}
@media(prefers-reduced-motion:reduce){.answer input.wrong-answer{animation:answer-flash .3s linear}}

/* Suppress mobile tap flash; keyboard focus indicators remain visible. */
button,a,input,textarea{-webkit-tap-highlight-color:transparent}
.scene.approached{overflow:hidden}
.scene.approached>.scene-camera{transform:scale(1.1);transform-origin:50% 48%}
@keyframes enter-house{from{transform:scale(1.1)}to{transform:scale(1.32)}}

.scene-camera{position:relative;width:100%}