:root{
  --paper:#d8cfb5; --ink:#252721; --faint:#aaa28c; --olive:#555a48; --dark:#10120f;
  --panel:rgba(18,20,17,.94); --line:rgba(222,214,190,.18); --text:#e9e2cf; --muted:#aaa28e;
  --top-h:62px; --bottom-h:58px;
}
*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;height:100dvh;margin:0}
html,body{background:#0b0d0b;color:var(--text);font-family:"Noto Sans CJK SC","Microsoft YaHei",sans-serif;overflow:hidden}
button,input{font:inherit} button{color:inherit;background:none;border:0} button:focus-visible{outline:1px solid #d7cfae;outline-offset:3px}
.hidden{display:none!important}.screen{display:none;width:100%;height:100%;min-height:0}.screen.active{display:flex}

/* 标题 */
#titleScreen{align-items:center;justify-content:center;position:relative;background:#090b09;overflow:hidden;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
.title-bg{position:absolute;inset:-3%;background:url('assets/img/classroom.jpg') center/cover no-repeat;filter:brightness(.31) saturate(.55) contrast(1.12);transform:scale(1.025)}
.title-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,9,.88),rgba(8,10,9,.43) 57%,rgba(8,10,9,.78)),linear-gradient(0deg,rgba(7,9,7,.9),transparent 58%)}
.film-grain{position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
.title-card{position:relative;width:min(800px,88vw);padding:clamp(34px,5vw,56px);border-left:1px solid rgba(235,226,199,.34);background:linear-gradient(90deg,rgba(13,15,13,.78),rgba(13,15,13,.26));box-shadow:-30px 0 80px rgba(0,0,0,.24)}
.eyebrow{font-size:13px;letter-spacing:.26em;color:#b9b19a;margin-bottom:22px}.title-card h1{font-family:serif;font-size:clamp(48px,7vw,96px);font-weight:500;letter-spacing:.05em;margin:0 0 24px;line-height:1}.hook{font-family:serif;font-size:clamp(19px,2.25vw,29px);line-height:1.75;color:#e1dac5;margin:0 0 34px}.title-actions{display:flex;gap:12px;flex-wrap:wrap}.title-actions button,.top-actions button,.bottombar button,.modal button{cursor:pointer}
.primary,.secondary,.ghost{min-height:44px;padding:11px 22px;border:1px solid rgba(235,226,199,.36);background:rgba(218,207,177,.08)}.primary{background:#c9bea0;color:#171912;border-color:#c9bea0}.ghost{opacity:.72}.micro{font-size:12px;color:#918a78;margin-top:24px;line-height:1.65;max-width:590px}

/* 游戏骨架 */
#gameScreen{flex-direction:column;background:#090b09;min-width:0;min-height:0}
.topbar,.bottombar{flex:0 0 auto;display:flex;align-items:center;background:#11130f;border-color:var(--line);position:relative;z-index:10}
.topbar{height:var(--top-h);padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));border-bottom:1px solid var(--line);justify-content:space-between;gap:18px}
.bottombar{height:var(--bottom-h);padding:0 max(18px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));border-top:1px solid var(--line);gap:16px}
.brand{display:flex;gap:13px;align-items:baseline;min-width:0}.brand strong{font-family:serif;letter-spacing:.08em;white-space:nowrap}.brand span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;height:100%;min-width:0}.top-actions button{min-width:62px;padding:0 12px;font-size:13px;color:#cfc6ad;border-left:1px solid rgba(255,255,255,.06);white-space:nowrap}.top-actions button:hover{background:rgba(255,255,255,.025)}
#clueCount{display:inline-grid;place-items:center;min-width:19px;height:19px;border:1px solid #77705e;border-radius:10px;margin-left:3px;font-size:11px}

.stage{position:relative;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:#080908;display:flex;align-items:center;justify-content:center}
.scene-image{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;background:#080908}
.scene-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 46%,transparent 22%,rgba(0,0,0,.07) 66%,rgba(0,0,0,.31)),linear-gradient(0deg,rgba(0,0,0,.23),transparent 23%,transparent 76%,rgba(0,0,0,.14))}
.hotspots{position:absolute;left:0;top:0;width:100%;height:100%}.hotspot{position:absolute;border:0;background:transparent;cursor:default;padding:0;margin:0;opacity:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.hotspot:focus-visible{opacity:.08;background:#fff;outline:1px dashed rgba(255,255,255,.45)}
.scene-caption{pointer-events:none;position:absolute;left:22px;bottom:18px;padding:8px 12px;background:rgba(8,10,8,.59);border-left:2px solid rgba(214,204,176,.55);display:flex;gap:14px;backdrop-filter:blur(2px)}.scene-caption span:first-child{font-family:serif;letter-spacing:.08em}.scene-caption span:last-child{font-size:12px;color:#a9a08a;align-self:center}
.toast{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);width:max-content;max-width:min(720px,86vw);padding:12px 18px;background:rgba(12,14,12,.93);border:1px solid rgba(226,216,189,.18);box-shadow:0 12px 42px rgba(0,0,0,.45);font-size:14px;line-height:1.65;opacity:0;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}
.objective{pointer-events:none;position:absolute;right:22px;top:22px;width:min(340px,44vw);padding:11px 14px;background:rgba(13,15,13,.65);border-right:2px solid rgba(214,204,176,.5);font-size:12px;color:#c8c0a8;line-height:1.65;text-align:right}
#ambientText{font-size:12px;color:#8f8876;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.bottombar button{min-height:38px;padding:7px 12px;border:1px solid rgba(225,216,190,.15);color:#bbb39d;white-space:nowrap}.bottombar #phoneBtn{border-color:#9f8d62;color:#e7dbb9;animation:phonePulse 1.1s infinite}@keyframes phonePulse{50%{box-shadow:0 0 0 5px rgba(180,158,99,.08)}}
.tablet-panel{display:none}

/* 弹层 */
.modal-layer{position:fixed;inset:0;z-index:50;background:rgba(4,5,4,.78);display:flex;align-items:center;justify-content:center;padding:clamp(12px,2.5vw,28px);backdrop-filter:blur(4px)}
.modal{width:min(880px,96vw);max-height:min(90dvh,900px);overflow:auto;overscroll-behavior:contain;background:#161814;border:1px solid rgba(224,214,188,.22);box-shadow:0 28px 90px rgba(0,0,0,.68);position:relative}.modal.narrow{width:min(620px,94vw)}.modal.wide{width:min(1160px,97vw)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#161814;z-index:4}.modal-head h2{font:500 clamp(19px,2vw,23px)/1.2 serif;margin:0;letter-spacing:.05em}.close{font-size:20px;min-width:44px;min-height:44px;padding:4px 10px;color:#aaa28d}.modal-body{padding:22px}.modal p{line-height:1.8;color:#d5cdb8}
.prop-img{display:block;max-width:100%;max-height:65dvh;margin:auto;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.paper{background:#d8ceb1;color:#332f28;padding:clamp(20px,3vw,30px);box-shadow:0 10px 40px rgba(0,0,0,.35)}.paper h3{font-family:serif;margin-top:0}.paper p{color:#3e3930}.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.modal-actions button,.choice{min-height:44px;padding:10px 15px;border:1px solid rgba(230,219,188,.24);background:rgba(220,207,172,.06)}.choice:hover,.modal-actions button:hover{background:rgba(220,207,172,.12)}

/* 照片实物 */
.photo-object{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:18px;align-items:start}.photo-object .photo-frame{min-width:0;background:#0d0f0d;padding:12px}.photo-object .photo-frame img{display:block;width:100%;max-height:66dvh;object-fit:contain}.photo-side{font-size:13px;color:#b9b09a;line-height:1.7}.photo-side button{width:100%;min-height:44px;margin-top:10px;border:1px solid rgba(225,213,182,.22);background:#1a1c18}

.notebook{background:#d7ceb2;color:#302d26;padding:clamp(22px,3vw,30px);min-height:520px}.notebook h2{font-family:serif}.notebook-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.notecard{border-top:1px solid #918974;padding:12px 0}.notecard strong{display:block;margin-bottom:5px}.notecard span{font-size:13px;color:#615b4c;line-height:1.65}.unknown{opacity:.5}
.map-wrap{background:#1a1c18;padding:18px}.map-wrap img{width:100%;display:block;max-height:62dvh;object-fit:contain}.location-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.location-buttons button{min-height:42px;padding:8px 11px;border:1px solid rgba(226,215,188,.18);font-size:12px}.location-buttons button[disabled]{opacity:.35;cursor:not-allowed}
.phone{padding:clamp(20px,3vw,30px);background:linear-gradient(#1b1d19,#11130f)}.phone .caller{font-family:serif;font-size:clamp(24px,4vw,31px);margin-bottom:4px}.phone .time{font-size:12px;color:#958d78;margin-bottom:22px}.dialogue{font-size:16px;line-height:1.9;color:#e2dac4;min-height:100px}.dialogue b{color:#cdbd8b}.phone-choices{display:grid;gap:9px;margin-top:20px}.phone-choices button{text-align:left;min-height:48px;padding:11px 13px;border:1px solid rgba(225,213,180,.2);background:#171915}

.compare-workspace{position:relative;height:clamp(330px,62dvh,650px);background:#080908;overflow:hidden;touch-action:none}.compare-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(.72)}.compare-photo{position:absolute;width:58%;max-width:720px;left:21%;top:14%;opacity:.54;cursor:grab;box-shadow:0 5px 30px rgba(0,0,0,.45);touch-action:none;transform-origin:center center}.compare-photo.drag{cursor:grabbing}.compare-tools{display:grid;grid-template-columns:auto minmax(90px,1fr) auto minmax(90px,1fr) auto minmax(90px,1fr) auto auto;gap:10px;align-items:center;padding:14px 18px;background:#131511}.compare-tools input{width:100%;min-width:0}.compare-tools button{min-height:40px;padding:7px 11px;border:1px solid rgba(225,213,182,.18)}.compare-result{padding:11px 18px;color:#c9bea2;font-size:13px;border-top:1px solid var(--line);line-height:1.65}

.darkroom-game{padding:22px;background:#260a09}.darkroom-game h3{font-family:serif;font-weight:500}.tray{height:300px;display:flex;align-items:center;justify-content:center;background:linear-gradient(#40110f,#1b0807);border:1px solid #60302a;position:relative;overflow:hidden}.develop-paper{width:72%;height:75%;background:#e6dfc9;position:relative;overflow:hidden;filter:brightness(.8)}.develop-paper img{width:100%;height:100%;object-fit:cover;opacity:0;filter:sepia(.3) contrast(.9);transition:opacity 7s linear}.develop-paper.processing img{opacity:1}.develop-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;margin-top:16px;align-items:center}.develop-controls label{font-size:13px;color:#d9c4b5}.timer{font-variant-numeric:tabular-nums;font-size:24px;font-family:monospace}.develop-controls button{min-height:42px;border:1px solid rgba(232,205,185,.25);padding:8px 14px}
.ending{min-height:560px;padding:clamp(30px,5vw,52px);background:#11130f;display:flex;flex-direction:column;justify-content:center}.ending .tag{letter-spacing:.25em;font-size:12px;color:#a49a80}.ending h2{font:500 clamp(36px,6vw,68px)/1.1 serif;margin:15px 0 20px}.ending p{max-width:680px}.ending .stats{margin:22px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;color:#aaa18a}.support{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.support-buttons{display:flex;gap:9px;flex-wrap:wrap}.support-buttons button{min-height:44px;padding:10px 16px;border:1px solid rgba(226,214,184,.25)}
.menu-list{display:grid;gap:9px}.menu-list button{text-align:left;min-height:46px;padding:12px 14px;border:1px solid rgba(225,213,182,.18)}

/* 小型电脑 / 平板横屏 */
@media (max-width:1199px){
  :root{--top-h:70px;--bottom-h:58px}
  .topbar{padding:0 12px;gap:10px}.brand{display:block;max-width:240px}.brand span{display:block;margin-top:3px}.top-actions button{min-width:58px;padding:0 9px;font-size:12px}.objective{top:14px;right:14px;width:min(310px,42vw)}
  .modal-body{padding:18px}.compare-tools{grid-template-columns:auto 1fr auto 1fr;}.compare-tools button{min-width:94px}.compare-result{font-size:12px}.photo-object{grid-template-columns:minmax(0,1fr) 200px}
}

/* 平板竖屏：场景保持16:9，额外信息下沉，不让任务卡压在画面上 */
@media (min-width:700px) and (max-width:1100px) and (orientation:portrait){
  :root{--top-h:78px;--bottom-h:62px}
  #gameScreen{overflow:hidden}.topbar{height:var(--top-h);align-items:flex-start;padding:10px 12px 0}.brand{max-width:300px}.top-actions{position:absolute;left:10px;right:10px;bottom:7px;height:34px;justify-content:flex-end}.top-actions button{min-width:76px;height:34px;flex:0 1 auto;padding:0 11px}
  .stage{flex:0 0 auto;width:100%;aspect-ratio:16/9;min-height:0}.scene-image{width:100%;height:100%;object-fit:contain}.objective{display:none}.scene-caption{left:14px;bottom:12px}.toast{bottom:58px;max-width:82vw}
  .tablet-panel{display:grid;flex:1 1 auto;min-height:0;grid-template-columns:1fr 1.35fr;gap:1px;background:rgba(220,210,184,.12);border-top:1px solid var(--line);overflow:auto}.tablet-panel>div{padding:18px 20px;background:#121410}.tablet-panel .panel-label{display:block;font-size:11px;letter-spacing:.16em;color:#8f8874;margin-bottom:8px}.tablet-panel strong{font-family:serif;font-weight:500;font-size:18px}.tablet-panel p{margin:0;color:#bdb49e;line-height:1.75;font-size:13px}
  .bottombar{height:var(--bottom-h);padding:0 14px;gap:12px}.bottombar #ambientText{display:none}.bottombar button{min-height:42px}.bottombar #phoneBtn{margin-left:auto}
  .modal{max-height:88dvh}.modal.wide{width:96vw}.photo-object{grid-template-columns:1fr}.photo-side{display:grid;grid-template-columns:1fr 1fr;gap:8px}.photo-side p{grid-column:1/-1}.notebook-grid{grid-template-columns:1fr 1fr}.compare-workspace{height:min(52dvh,560px)}.compare-photo{width:70%;left:15%}.compare-tools{grid-template-columns:auto 1fr auto 1fr}.develop-controls{grid-template-columns:1fr auto}.develop-controls button{grid-column:1/-1}
}

/* 小屏兜底，虽然本项目主目标为电脑/平板 */
@media (max-width:699px){
  :root{--top-h:92px;--bottom-h:54px}
  .topbar{height:var(--top-h);align-items:flex-start;padding:10px 8px 0}.brand{display:block;max-width:42vw}.brand span{display:block;margin-top:2px}.top-actions{position:absolute;left:6px;right:6px;bottom:6px;height:36px;justify-content:space-between}.top-actions button{flex:1;min-width:0;padding:0 3px;font-size:11px}.bottombar{height:var(--bottom-h);padding:0 9px;gap:8px}.bottombar #ambientText{display:none}.scene-caption{left:10px;bottom:10px}.objective{top:10px;right:10px;width:58vw;font-size:11px}.toast{bottom:64px;font-size:12px}.notebook-grid{grid-template-columns:1fr}.title-card{padding:32px 24px;width:min(94vw,720px)}.title-card h1{font-size:clamp(42px,13vw,68px)}.hook{font-size:17px}.modal-layer{padding:8px}.modal,.modal.narrow,.modal.wide{width:98vw;max-height:92dvh}.modal-body{padding:12px}.photo-object{grid-template-columns:1fr}.compare-workspace{height:48dvh}.compare-photo{width:78%;left:11%}.compare-tools{grid-template-columns:auto 1fr;gap:7px;padding:10px}.compare-tools button{min-width:0}.develop-controls{grid-template-columns:1fr auto}.develop-controls button{grid-column:1/-1}.tray{height:235px}.ending{min-height:0;padding:28px 20px}
}

@media (max-height:720px) and (min-width:900px){
  :root{--top-h:54px;--bottom-h:50px}.top-actions button{font-size:12px}.title-card{padding-top:30px;padding-bottom:30px}.title-card h1{font-size:clamp(42px,8vh,76px)}.hook{font-size:18px;margin-bottom:22px}.modal{max-height:92dvh}.compare-workspace{height:54dvh}.tray{height:230px}.ending{min-height:0;padding:28px 38px}
}
@media (hover:none){.top-actions button:hover,.choice:hover,.modal-actions button:hover{background:transparent}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}