:root{--ink:#e7edf1;--muted:#91a0ac;--gold:#d8ad61;--gold2:#f2d08b;--panel:rgba(5,12,17,.91);--line:rgba(216,173,97,.38);--danger:#a8423d;--shadow:0 22px 70px rgba(0,0,0,.6)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#05090d;color:var(--ink);font-family:"Noto Serif TC","Microsoft JhengHei UI","Microsoft JhengHei",serif}button,input{font:inherit}button{color:var(--ink);background:rgba(10,22,30,.86);border:1px solid rgba(173,192,205,.28);border-radius:4px;padding:.72rem 1rem;cursor:pointer;transition:.2s ease}button:hover,button:focus-visible{border-color:var(--gold);color:var(--gold2);transform:translateY(-1px);outline:none;box-shadow:0 0 0 2px rgba(216,173,97,.12)}button:disabled{opacity:.35;cursor:not-allowed;transform:none}.primary{background:linear-gradient(135deg,#8f6b34,#b98a42);color:#071016;border-color:#e2bd77;font-weight:800}.hidden{display:none!important}.screen{position:absolute;inset:0;display:none;overflow:hidden}.screen.active{display:block}.background,.title-bg{position:absolute;inset:-2%;background:center/cover no-repeat;filter:saturate(.76) brightness(.58);transition:background-image .8s ease,filter .8s ease,transform 12s ease}.screen.active .background,.screen.active .title-bg{transform:scale(1.025)}.title-bg{background-image:url('assets/backgrounds/station-rain.png')}.vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,transparent 20%,rgba(0,0,0,.25) 58%,rgba(0,0,0,.88) 100%),linear-gradient(180deg,rgba(2,5,8,.05),rgba(2,5,8,.52))}.rain,.weather{position:absolute;inset:-30%;pointer-events:none;background-image:repeating-linear-gradient(110deg,transparent 0 28px,rgba(185,213,231,.13) 29px 30px,transparent 31px 62px);animation:rain 1.15s linear infinite;mix-blend-mode:screen}.weather.quiet{opacity:.18}.weather.none{display:none}@keyframes rain{to{transform:translate(78px,150px)}}
.title-card{position:absolute;left:9vw;top:50%;transform:translateY(-50%);width:min(680px,86vw);padding:2.6rem 3rem;background:linear-gradient(110deg,rgba(4,10,15,.94),rgba(8,18,24,.72));border-left:3px solid var(--gold);box-shadow:var(--shadow);backdrop-filter:blur(8px)}.eyebrow{letter-spacing:.38em;color:var(--gold);font-size:.78rem}.title-card h1{font-size:clamp(3rem,7vw,5.5rem);font-weight:500;letter-spacing:.1em;white-space:nowrap;margin:.2rem 0;text-shadow:0 5px 30px #000}.tagline{color:#c9d1d6;font-size:1.08rem;letter-spacing:.08em}.title-menu{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:2rem}.title-menu button:first-child{grid-column:1/-1;padding:1rem}.title-progress{min-height:1.4em;color:var(--muted);font-size:.8rem;margin-top:1.5rem}
.scene-header{position:absolute;z-index:6;top:2rem;left:2.5rem;right:2.5rem;display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(3,9,13,.82),transparent 78%);text-shadow:0 2px 8px #000}.scene-header span:first-child{color:var(--gold);font-size:.78rem;letter-spacing:.15em}.scene-header strong{letter-spacing:.08em}.clock{margin-left:auto;color:#b8c4cc;font-family:Consolas,monospace}.stage-caption{position:absolute;z-index:5;top:18%;left:9%;max-width:34rem;padding:.75rem 1rem;color:#c8d2d9;background:linear-gradient(90deg,rgba(4,10,14,.75),transparent);border-left:1px solid rgba(216,173,97,.6);font-size:.88rem;line-height:1.7;opacity:.92}.portrait{position:absolute;z-index:2;bottom:8%;height:min(88vh,920px);max-width:58vw;object-fit:contain;object-position:bottom;filter:drop-shadow(0 15px 28px #000) saturate(.86) brightness(.82);transition:opacity .35s,transform .45s,filter .35s}.portrait.left{left:2%;transform:translateX(-2%)}.portrait.right{right:0;transform:translateX(2%)}.portrait.speaking{filter:drop-shadow(0 18px 35px #000) saturate(1) brightness(1);transform:translateX(0) scale(1.015)}.illustration{position:absolute;z-index:3;left:50%;top:45%;transform:translate(-50%,-50%);max-width:min(68vw,980px);max-height:70vh;border:1px solid rgba(216,173,97,.35);box-shadow:var(--shadow);animation:fadeIn .5s ease}@keyframes fadeIn{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}}
.dialogue{position:absolute;z-index:7;left:4%;right:4%;bottom:4.5rem;min-height:188px;padding:1.2rem 4.5rem 1.2rem 1.5rem;background:linear-gradient(105deg,rgba(4,10,15,.97),rgba(8,18,25,.91));border:1px solid var(--line);border-top:2px solid rgba(216,173,97,.55);box-shadow:var(--shadow);backdrop-filter:blur(10px)}.speaker-row{display:flex;align-items:center;gap:1rem;min-height:1.4rem}.speaker-row strong{color:var(--gold2);letter-spacing:.08em}.speaker-row span{font-size:.72rem;color:var(--muted)}#dialogue-text{font-size:clamp(1rem,1.62vw,1.3rem);line-height:1.85;letter-spacing:.025em;white-space:pre-wrap;margin:.6rem 0 0;min-height:3.7em}.next{position:absolute;right:1rem;bottom:1rem;background:transparent;border:0;color:var(--gold);font-size:.78rem}.next span{display:inline-block;animation:blink 1s ease-in-out infinite}@keyframes blink{50%{transform:translateY(4px);opacity:.45}}.choices{display:grid;gap:.55rem;margin:.9rem 0 .2rem}.choices button{text-align:left;padding:.72rem 1rem;background:linear-gradient(90deg,rgba(24,41,51,.95),rgba(10,20,28,.88));border-left:2px solid var(--gold)}.toolbar{position:absolute;z-index:8;right:4%;bottom:.4rem;display:flex;gap:.35rem;justify-content:flex-end}.toolbar button{font-family:"Microsoft JhengHei UI",sans-serif;font-size:.73rem;padding:.42rem .58rem;background:rgba(3,9,13,.88)}
.floating-panel{position:absolute;z-index:10;left:8%;right:8%;top:14%;bottom:26%;padding:1.5rem;background:rgba(4,11,16,.95);border:1px solid var(--line);box-shadow:var(--shadow);overflow:auto;backdrop-filter:blur(14px)}.panel-heading{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid rgba(216,173,97,.24);padding-bottom:.8rem}.panel-heading span{color:var(--gold);font-size:.72rem;letter-spacing:.2em}.panel-heading h2{margin:.2rem 0}.panel-heading b{font-family:Consolas,monospace;color:var(--gold2)}.spot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem;margin-top:1.2rem}.spot-grid button{min-height:76px;text-align:left;border-left:2px solid #7491a2}.spot-grid button.done{opacity:.4;text-decoration:line-through}.spot-grid small{display:block;color:var(--muted);margin-top:.25rem}
.modal{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:2rem;background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}.modal-card{position:relative;width:min(820px,94vw);max-height:86vh;overflow:auto;padding:2rem;background:#08131a;border:1px solid var(--line);box-shadow:var(--shadow)}.modal-card h2{margin-top:0;color:var(--gold2)}.close{position:absolute;right:.6rem;top:.6rem;border:0;background:transparent;font-size:1.5rem}.save-slot,.log-entry,.clue-card{padding:1rem;border-bottom:1px solid rgba(145,160,172,.17)}.save-slot{display:flex;align-items:center;justify-content:space-between;gap:1rem}.save-slot small,.log-entry small{display:block;color:var(--muted);margin-top:.35rem}.log-entry b{color:var(--gold)}.clue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem}.clue-card{border:1px solid rgba(145,160,172,.18);background:rgba(255,255,255,.025)}.clue-card h3{color:var(--gold);margin:.2rem 0}.setting{display:grid;grid-template-columns:170px 1fr 64px;gap:1rem;align-items:center;margin:1rem 0}.setting input{width:100%}.setting output{font-family:Consolas,monospace;color:var(--gold)}.toggle-setting{display:flex;justify-content:space-between;padding:1rem 0;border-bottom:1px solid rgba(145,160,172,.16)}
.ending-screen{display:none}.ending-screen.active{display:grid;place-items:center}.ending-card{position:relative;z-index:4;width:min(790px,88vw);padding:3rem;text-align:center;background:rgba(4,11,16,.9);border-top:2px solid var(--gold);box-shadow:var(--shadow)}.ending-card>p:first-child{color:var(--gold);letter-spacing:.3em}.ending-card h2{font-size:clamp(3.4rem,9vw,7rem);font-weight:500;letter-spacing:.18em;margin:.1em}.ending-card #ending-text{line-height:2;font-size:1.08rem}.ending-card #ending-meta{color:var(--muted);font-size:.82rem}.ending-actions{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}
@media(max-width:760px){.title-card{left:5vw;padding:2rem}.title-card h1{font-size:clamp(2.7rem,15vw,4.2rem);white-space:normal}.title-menu{grid-template-columns:1fr}.title-menu button:first-child{grid-column:auto}.scene-header{top:.7rem;left:.7rem;right:.7rem}.stage-caption{top:12%;left:4%;width:92%;max-width:92%;white-space:normal}.portrait{height:67vh;max-width:88vw;bottom:22%}.portrait.left{left:-18%}.portrait.right{right:-15%}.dialogue{left:2%;right:2%;bottom:6.8rem;min-height:218px;padding:1rem 3.3rem 1rem 1rem}#dialogue-text{font-size:1rem}.toolbar{left:.35rem;right:.35rem;bottom:.25rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.toolbar button{min-width:0;padding:.42rem .2rem;white-space:nowrap;overflow:hidden}.floating-panel{left:3%;right:3%;top:10%;bottom:34%}.modal{padding:.5rem}.modal-card{padding:1.3rem}.setting{grid-template-columns:120px 1fr 48px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}