:root{color-scheme:dark;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#f0e7ee;background:#10101d}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #ffffff18;background:#242137a8;border-radius:8px;min-width:40px;min-height:40px;transition:background .2s,border-color .2s}button:hover{background:#4d3d62;border-color:#d5b1e466}button:focus-visible,a:focus-visible{outline:2px solid #efc68f;outline-offset:4px}#room,canvas{width:100vw;height:100dvh;display:block}header{position:absolute;top:34px;left:40px;right:36px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.eyebrow{font-size:11px;font-weight:600;letter-spacing:2.6px;color:#b9a9ca}h1{font-family:Georgia,serif;font-size:34px;font-weight:400;margin:8px 0;color:#f4e8ed;letter-spacing:-.8px}.dot{color:#d49bdd}.subtitle{font-size:13px;letter-spacing:2px;color:#9f93b0}.top-right{display:flex;gap:10px;align-items:center;pointer-events:auto}#time{font:14px monospace;color:#b5a6c4;margin-right:10px}#sound{padding:0 12px;font-size:19px}#sound span{font-size:12px;margin-left:8px}.top-right button{background:#24213775;backdrop-filter:blur(12px)}footer{position:absolute;bottom:26px;left:40px;right:36px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;color:#b3a7c2;font-size:12px;letter-spacing:1px}.divider{padding:0 12px;color:#645b75}.mouse{color:#d5b1e4;margin-right:7px}.zoom{display:flex;gap:4px;pointer-events:auto;position:absolute;left:50%;transform:translateX(-50%)}.zoom button{min-width:34px;min-height:34px;font-size:18px;background:#22203399}.footnote{letter-spacing:2px;font-size:11px}.footnote span{margin:0 10px;color:#dba86f}#loading{position:absolute;inset:0;background:#10101d;display:grid;place-content:center;text-align:center;transition:opacity .5s;z-index:10;font-size:14px;color:#c6b0d5}.loading-ring{width:32px;height:32px;border:1px solid #b39bc333;border-top-color:#dfbaea;border-radius:100%;animation:spin 1s linear infinite;margin:auto}@keyframes spin{to{transform:rotate(360deg)}}#tooltip{position:absolute;pointer-events:none;opacity:0;background:#151322e8;border:1px solid #bea2d333;color:#f6e8ee;padding:9px 13px;border-radius:6px;font-size:13px;backdrop-filter:blur(8px);white-space:nowrap;transition:opacity .15s;z-index:2}#notice{position:absolute;left:50%;bottom:88px;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#1c192cef;border:1px solid #bb9ac02e;box-shadow:0 10px 50px #0004;border-radius:12px;padding:16px 22px;min-width:280px;max-width:calc(100vw - 32px);transition:.25s;backdrop-filter:blur(15px);text-align:center}#notice.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}#noticeName{font-size:12px;letter-spacing:2px;color:#d7b3dc}#noticeText{font-size:14px;line-height:1.6;margin:7px 0 0;color:#e1d8e5}#contextActions:empty{display:none}#contextActions{display:flex;justify-content:center;gap:8px;margin-top:12px}#contextActions button{min-height:32px;font-size:12px;padding:5px 12px}#menu{position:absolute;right:36px;top:92px;width:280px;max-height:calc(100dvh - 180px);overflow:auto;background:#1b182aed;border:1px solid #bca3d233;border-radius:12px;padding:20px;backdrop-filter:blur(20px);box-shadow:0 20px 60px #0006;z-index:4}.menu-title{font-size:16px;display:flex;align-items:center;justify-content:space-between}.menu-title button{background:transparent;border:0;font-size:24px;min-height:28px;min-width:28px}#menu p{font-size:12px;color:#a798b8}#objectList{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:16px}#objectList button{font-size:13px;min-height:38px;text-align:left;padding:7px 12px}.menu-foot{border-top:1px solid #ffffff12;margin-top:18px;padding-top:16px;display:flex;gap:14px;flex-direction:column;font-size:12px;color:#b7a6c9}.menu-foot label{display:flex;gap:6px;align-items:center}.menu-foot button{font-size:12px}.menu-foot a{color:#baa4ce;text-decoration:none}input{accent-color:#b98bc8}@media(max-width:700px){header{top:22px;left:22px;right:18px}h1{font-size:28px}.eyebrow{font-size:10px;letter-spacing:1.3px}.top-right{gap:5px}#time{display:none}#sound span{display:none}footer{left:20px;right:20px;bottom:22px}.footnote{display:none}.zoom{position:static;transform:none}.hint{font-size:11px}.divider{padding:0 5px}#menu{right:18px;top:77px}#notice{bottom:76px;width:max-content}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.loading-ring{animation:none}}
/* Phone visual mode retains the same live canvas and scene. */
#room{position:fixed;left:0;top:0;width:100%;height:100dvh;transition:left .42s ease-in-out,width .42s ease-in-out}#scene{width:100%;height:100%;touch-action:none;outline:none}.phone-mode #room{left:30%;width:70%}
#phoneButton{position:fixed;z-index:7;left:40px;top:155px;display:flex;align-items:center;gap:9px;padding:7px 11px;min-height:34px;font:12px monospace;letter-spacing:1.8px;background:#141321d9;border-radius:2px;color:#c4b7d0}#phoneButton svg{width:12px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;shape-rendering:crispEdges}
#phonePanel{position:fixed;z-index:3;left:2.2%;top:215px;bottom:88px;width:29%;display:flex;align-items:center;justify-content:center;transform:translateX(-120%);opacity:0;visibility:hidden;transition:transform .42s ease-in-out,opacity .42s ease-in-out,visibility .42s;pointer-events:none}.phone-mode #phonePanel{transform:translateX(0);opacity:1;visibility:visible}
.phone-device{width:100%;max-width:440px;max-height:100%;aspect-ratio: .705;border:3px solid #e1d9df;background:#000;padding:5px;box-shadow:0 0 0 2px #716c77,inset 0 0 0 1px #7b737b,7px 8px 0 #080910;overflow:hidden;container-type:inline-size}.phone-screen{height:100%;position:relative;display:flex;flex-direction:column;background:#000;border:1px solid #b8b0b6;overflow:hidden}.phone-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0002 0px,#0002 1px,transparent 1px,transparent 3px)}.phone-header{position:relative;z-index:1;padding:5.5% 5% 3%;font:clamp(13px,5.1cqw,25px)/1.65 monospace;letter-spacing:1px;color:#eee9e6;white-space:nowrap}.phone-art{flex:1;min-height:0;overflow:hidden}.phone-art img{width:100%;height:100%;object-fit:cover;object-position:center bottom;image-rendering:pixelated;display:block}.phone-nav{display:flex;justify-content:space-around;padding:3% 4%;height:10%;min-height:35px;background:#000}.phone-nav svg{height:100%;width:24%;fill:none;stroke:#eee9e6;stroke-width:3;stroke-linejoin:miter;shape-rendering:crispEdges}
@media(max-width:700px){#phoneButton{left:22px;top:125px}.phone-mode #room{left:0;width:100%}#phonePanel{left:0;top:170px;bottom:24px;width:100%;padding:16px 30px;background:#10101df5;z-index:5}.phone-device{width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:.705}.phone-mode footer{visibility:hidden}}
@media(max-height:740px) and (min-width:701px){#phonePanel{top:175px;bottom:65px}.phone-device{width:auto;height:100%;max-width:100%}#phoneButton{top:139px}}
.phone-header{font-size:6.3cqw;line-height:1.35;letter-spacing:0}.pixel-char{position:relative;display:inline-block;width:.64em;height:.95em;color:transparent}.pixel-char:after{content:'';position:absolute;left:0;top:.12em;width:.1em;height:.1em;color:#e7e2e3;box-shadow:var(--pixels);background:transparent}
.phone-mode #phonePanel{pointer-events:auto}
/* Only the visible device intercepts input; the right scene stays interactive. */
.phone-mode #phonePanel{pointer-events:none}.phone-mode .phone-device{pointer-events:auto}
#posterHandles{position:fixed;inset:0;pointer-events:none;z-index:5}#posterHandles[hidden]{display:none}.poster-handle{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);padding:0;min-width:12px;min-height:12px;width:12px;height:12px;border:1px solid #f1d3ed;background:#5f4468;border-radius:50%;touch-action:none;box-shadow:0 0 0 3px #17132044}.poster-handle:hover{background:#d4a6cd}@media(pointer:coarse){.poster-handle{width:19px;height:19px}}@media(max-width:430px){}
/* Crisp game panels retain full-resolution text and pointer behavior. */
:root{font-family:Consolas,'Microsoft YaHei',monospace;color:#d4e3ef}
h1{font-family:Consolas,monospace;font-weight:700;letter-spacing:1px;text-shadow:3px 3px 0 #302947}
.subtitle{color:#9dc3de}.dot{color:#ed7ed6}
button,.top-right button,.zoom button,#phoneButton{border-radius:0;background:#111525;border:1px solid #65558c;box-shadow:inset 0 0 0 1px #26243f,2px 2px 0 #080b17;backdrop-filter:none;color:#c5d9ef}
button:hover{background:#303153;border-color:#bca3df}
#menu,#notice,#tooltip{border-radius:0;background:#101626f5;border:2px solid #65558c;backdrop-filter:none;box-shadow:4px 4px 0 #080b17}
.poster-handle{border-radius:50%;background:#5f4468;box-shadow:0 0 0 3px #17132044}