/* 场景化交互层：保持网页可访问性的同时，把推理界面做成旧洗衣房里的实体物件。 */
:root{--brass:#a58b57;--brass-dark:#59482f;--night:#181916;--wet:#66736d}
body{background:#b8af9b}
body.scene-drum .scene-filter,body.scene-reverse .scene-filter{background:radial-gradient(circle at 50% 50%,transparent 22%,rgba(13,14,12,.34) 78%),repeating-linear-gradient(0deg,rgba(235,228,204,.025) 0 1px,transparent 1px 4px)}
body.scene-flood .scene-filter{background:linear-gradient(to top,rgba(33,58,55,.28),rgba(36,34,28,.04) 55%,rgba(221,211,187,.03)),repeating-linear-gradient(0deg,rgba(230,226,208,.02) 0 1px,transparent 1px 5px)}
.scene{isolation:isolate}.scene>img{transition:opacity .22s ease,filter .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}.scene.scene-changing>img{opacity:.15;transform:scale(1.012)}
.scene:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;box-shadow:inset 0 0 80px rgba(25,23,18,.26),inset 0 0 2px rgba(242,235,213,.5)}
.scene-wrap:before{content:"现场记录 / 不保证记忆完整";font:10px ui-monospace,monospace;letter-spacing:.16em;color:#625c50;opacity:.7;position:absolute;transform:translate(12px,-7px) rotate(-.4deg);z-index:2;background:#c8c0ad;padding:0 5px}
.hotspot{cursor:crosshair}.hotspot:hover{background:radial-gradient(circle at center,rgba(219,207,170,.08),transparent 65%)}
.scene-title{backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
.side-panel{background-image:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,0)),repeating-linear-gradient(0deg,transparent 0 26px,rgba(73,66,51,.045) 27px)}
.side-panel:before{content:"";position:absolute;top:52px;right:-2px;width:10px;height:70px;background:linear-gradient(90deg,transparent,#b7aa8f);clip-path:polygon(100% 0,42% 8%,78% 20%,36% 34%,82% 47%,34% 61%,70% 78%,18% 92%,100% 100%);opacity:.55}
.person-note{display:block;width:100%;border:0;border-bottom:1px dashed #9b927c;background:rgba(238,232,215,.36);text-align:left;cursor:pointer;color:inherit}.person-note:hover{background:rgba(201,190,161,.38)}.person-note span{display:inline-block;margin-top:7px;font-size:10px;color:#7a6545;border-bottom:1px dotted #8b7551}.person-note:focus-visible{outline:1px dashed #6f6046;outline-offset:-3px}
.machine-panel{margin-top:15px;padding:18px;background:linear-gradient(145deg,#57584f,#31332f);border:5px solid #7e765f;outline:1px solid #2b2d29;box-shadow:inset 0 0 0 2px #a79a79,inset 0 0 35px rgba(0,0,0,.38),4px 5px 0 rgba(54,48,37,.18)}.machine-panel-note{color:#d8ccb0;font:11px/1.6 ui-monospace,monospace;letter-spacing:.05em;border-bottom:1px solid #77705f;padding-bottom:10px;margin-bottom:14px}.dial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.dial{position:relative;min-height:150px!important;display:flex!important;flex-direction:column;align-items:center!important;justify-content:flex-start;gap:7px!important;background:#c9bea5!important;border:1px solid #2f302c!important;box-shadow:inset 0 0 0 4px #8f8264,inset 0 0 24px rgba(47,42,31,.2);color:#30322d!important}.dial span{font:10px ui-monospace,monospace;letter-spacing:.16em;color:#5b564a}.dial b{font-size:13px;min-height:34px;display:grid;place-items:center}.dial i{display:block;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,#786744 0 15%,#b99d65 16% 31%,#4e4738 32% 37%,#9b8659 38% 63%,#3f3c34 64% 69%,#70654e 70%);border:2px solid #2e2e29;position:relative;transform:rotate(calc(var(--turn)*120deg));transition:transform .14s ease}.dial i:after{content:"";position:absolute;width:4px;height:23px;background:#e9dbb3;left:50%;top:5px;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(60,51,37,.45)}
.drain-board{position:relative;width:min(430px,88vw);aspect-ratio:1;margin:16px auto 8px;border-radius:50%;background:radial-gradient(circle,#403f37 0 14%,#7d745e 15% 17%,#343630 18% 100%);border:7px solid #6d6655;box-shadow:inset 0 0 38px #161714,0 4px 0 rgba(51,46,36,.2)}.drain-target{position:absolute;left:50%;top:7%;transform:translateX(-50%);z-index:10;background:#d9cfb7;border:1px solid #716956;padding:5px 8px;font:10px ui-monospace,monospace;color:#514b40;white-space:nowrap}.drain-ring{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%!important;background:transparent!important;border:2px solid rgba(203,184,139,.5)!important;padding:0!important}.drain-ring span{position:absolute;left:50%;top:8px;transform:translateX(-50%);font:9px ui-monospace,monospace;color:#d4c5a4;letter-spacing:.08em;z-index:2}.drain-ring i{position:absolute;inset:7%;border-radius:50%;border:8px double #8e7e5b;transform:rotate(calc(var(--r)*90deg));transition:transform .16s ease}.drain-ring i:before{content:"";position:absolute;width:7px;height:34%;background:#e9dfc4;left:50%;top:-6px;transform:translateX(-50%);box-shadow:0 0 8px rgba(230,219,189,.2)}.ring-0{width:88%;height:88%}.ring-1{width:66%;height:66%}.ring-2{width:44%;height:44%}.drain-ring span,.drain-ring i,.drain-center{pointer-events:none}.drain-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:21%;aspect-ratio:1;border-radius:50%;background:#1f211e;border:3px solid #a18b61;color:#c8b890;display:grid;place-items:center;font:11px ui-monospace,monospace;z-index:3}
.audio-toggle{position:fixed;right:12px;top:70px;z-index:18;border:1px solid #706957;background:rgba(219,210,188,.9);color:#46473f;padding:7px 9px;font:10px ui-monospace,monospace;letter-spacing:.06em;cursor:pointer;box-shadow:2px 2px 0 rgba(55,49,38,.18)}.audio-toggle[aria-pressed="false"]{opacity:.55}.audio-toggle:hover{background:#c9bea5}
body.scene-drum .scene-title,body.scene-reverse .scene-title{background:rgba(44,45,39,.82);color:#ece5d2;border-color:#918467}body.scene-drum .scene-title span,body.scene-reverse .scene-title span{color:#c4bba7}
body.scene-flood .scene-title{background:rgba(212,205,184,.84);border-color:#69736d}
@keyframes lampBreath{0%,100%{opacity:.09}48%{opacity:.19}52%{opacity:.11}}body.scene-drum .scene-filter:after,body.scene-reverse .scene-filter:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 48% 18%,rgba(238,223,178,.18),transparent 35%);animation:lampBreath 4.8s infinite}
@media(max-width:760px){.dial-grid{grid-template-columns:1fr}.dial{min-height:112px!important}.dial i{width:48px;height:48px}.audio-toggle{top:auto;bottom:10px;right:10px}.drain-board{width:min(360px,90vw)}}
@media(prefers-reduced-motion:reduce){.scene>img,.dial i,.drain-ring i{transition:none!important}.scene-filter:after{animation:none!important}}
.drain-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px auto 2px;width:min(430px,88vw)}.drain-controls button{border:1px solid #786f5d;background:#e7deca;color:#34362f;padding:8px;cursor:pointer}.drain-controls button:hover{background:#cfc0a0}@media(max-width:520px){.drain-controls{grid-template-columns:1fr}}

/* 摄影场景统一层：让真实照片与超现实拼贴保持同一夜间质感。 */
body.scene-main .scene-filter{background:linear-gradient(180deg,rgba(11,18,18,.06),rgba(14,18,17,.20)),radial-gradient(circle at 62% 18%,rgba(230,222,196,.08),transparent 34%)}
body.scene-m07 .scene-filter{background:radial-gradient(circle at 40% 50%,transparent 22%,rgba(8,10,9,.42) 72%),linear-gradient(90deg,rgba(18,17,14,.08),rgba(83,70,44,.07))}
body.scene-old .scene-filter,body.scene-flood .scene-filter{mix-blend-mode:normal;background:linear-gradient(180deg,rgba(37,48,45,.10),rgba(13,28,27,.30)),repeating-linear-gradient(101deg,transparent 0 22px,rgba(215,224,218,.025) 23px,transparent 24px)}
body.scene-memory .scene-filter{mix-blend-mode:normal;background:radial-gradient(circle at center,transparent 28%,rgba(8,12,12,.38) 92%),linear-gradient(180deg,rgba(31,40,37,.06),rgba(13,14,13,.17))}
body.scene-reverse .scene-filter{mix-blend-mode:normal;background:linear-gradient(180deg,rgba(96,78,50,.04) 0 49%,rgba(8,12,12,.10) 51% 100%),radial-gradient(circle at center,transparent 18%,rgba(8,10,9,.38) 88%)}
.scene-frame{background:#3f4039;box-shadow:0 12px 30px rgba(35,31,24,.22),4px 5px 0 rgba(66,58,44,.13)}
.scene-title{max-width:min(72%,640px)}
.scene-title strong{letter-spacing:.06em}
.scene-title span{font-size:11.5px}
.note.system-note{position:relative;overflow:hidden}.note.system-note:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#657665}.note.system-note strong{padding-left:5px}
@media(max-width:640px){.scene-title{max-width:86%;left:10px;bottom:10px}.scene-title span{font-size:10.5px}.scene-wrap:before{display:none}}

/* v4：环境音开关归入顶部状态栏，避免遮挡场景/手机底部按钮。 */
.top-state .audio-toggle{position:static;right:auto;top:auto;bottom:auto;z-index:auto;margin:0;border:1px solid #817763;background:#e5dcc6;color:#4c4c43;padding:5px 7px;min-height:28px;font:10px/1.1 ui-monospace,monospace;letter-spacing:.03em;box-shadow:none;white-space:nowrap}
.top-state .audio-toggle[aria-pressed="false"]{opacity:.58}
.top-state .audio-toggle:hover{background:#cec1a4}
@media(max-width:760px){.top-state .audio-toggle{order:5;padding:5px 6px}.audio-toggle{position:static}}