@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;700;900&display=swap');
:root{--ink:#182d31;--dark:#112226;--paper:#f2e8d2;--muted:#b9b6a3;--gold:#e9b65c;--red:#b5523e;--teal:#75a99d;--line:#d5c7a3}*{box-sizing:border-box}body{margin:0;background:#09171b;color:var(--ink);font-family:'Noto Serif TC','Microsoft JhengHei',serif;display:grid;place-items:center;min-height:100dvh;overflow:hidden}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,select:focus-visible{outline:3px solid #efb655;outline-offset:3px}button{transition:background .18s,transform .18s}button:hover{filter:brightness(1.1)}button:active{transform:translateY(1px)}#game{width:min(100vw,177.7778dvh);height:min(56.25vw,100dvh);position:relative;background:var(--paper);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 80px #0008}header{height:11%;flex-shrink:0;background:var(--dark);color:var(--paper);display:flex;align-items:center;padding:0 2.2%;gap:2%;border-bottom:1px solid #a8935c55;z-index:2}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:4px;font-size:clamp(14px,1.6vw,24px);white-space:nowrap}.brandmark{font-size:38px;color:var(--gold);font-family:Georgia}.brand small{font:8px Arial;display:block;letter-spacing:3px;margin-top:4px;color:var(--muted)}.date{font-size:clamp(9px,.9vw,14px);letter-spacing:1px;flex:1;color:#c6c7b6}.date span{margin-left:18px;padding-left:18px;border-left:1px solid #68807b}.clock{display:grid;grid-template-columns:12px auto;column-gap:10px;align-items:center;line-height:1.2}.clock b{font:clamp(17px,2.3vw,34px) Georgia;letter-spacing:2px;color:var(--gold);font-variant-numeric:tabular-nums}.clock small{grid-column:2;font-size:9px;color:#b3b8a4;letter-spacing:1px;text-align:center;margin-top:3px}.liveDot{width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 10px #e9b65c66}header button{background:transparent;border:1px solid #536460;color:var(--paper);border-radius:50%;width:33px;height:33px;display:grid;place-items:center;padding:7px}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.play{display:flex;height:77%;min-height:0}.casePanel{width:24%;padding:3% 2.5% 1.5%;position:relative;background:radial-gradient(ellipse at top left,#fff7e7,transparent 80%),var(--paper);border-right:1px solid #e9d5ac;display:flex;flex-direction:column}.eyebrow{font:clamp(8px,.7vw,11px) Arial,sans-serif;letter-spacing:2px;color:#836e4d}.casePanel h1{font-size:clamp(27px,3.6vw,58px);line-height:1.25;letter-spacing:4px;margin:8% 0 9%;font-weight:900}.casePanel h1 em{font-style:normal;color:var(--red)}.rule{height:2px;background:var(--ink);width:36px}.intro{font-size:clamp(10px,.95vw,15px);line-height:1.9;margin:7% 0 12%;color:#796f58}.objective{border-top:1px solid #c5b58d;padding-top:10%}.objective h3{font-size:clamp(11px,1.05vw,16px);margin:10px 0}.objective p{font-size:clamp(9px,.85vw,13px);line-height:1.9;color:#827760;margin:0}.memory{display:flex;align-items:center;gap:12px;margin-top:auto;padding:10% 0 5%}.memory>span{font:clamp(24px,3vw,44px) Georgia;color:var(--red)}.memory>div{font-size:11px}.memory small{display:block;font-size:8px;color:#8c8069;margin-top:3px}.hintBtn{border:0;border-top:1px solid #d4c5a0;background:none;text-align:left;padding:10px 0;display:flex;align-items:center;gap:9px;font-size:10px;color:#88734c}.hintBtn svg{width:17px}.caseFoot{font-size:8px;line-height:1.8;color:#a39478;letter-spacing:1px}.world{width:76%;height:100%;position:relative;overflow:hidden;background:#344942}.town{height:100%;width:100%;object-fit:cover;object-position:50% 50%;display:block}.worldShade{position:absolute;inset:0;background:linear-gradient(#071c2655,transparent 40%,#0d252578)}.mapCaption{position:absolute;top:5%;left:4%;text-shadow:0 2px 8px #0009;color:#fff0cd;pointer-events:none}.mapCaption span{font:8px Arial;letter-spacing:3px;color:#dfcda5}.mapCaption h2{font-size:clamp(17px,2vw,28px);letter-spacing:4px;margin:8px 0}.mapCaption p{font-size:clamp(9px,.8vw,12px);color:#e6d8bc}.weather{position:absolute;right:3%;top:5%;font-size:18px;color:#e3d9bd;text-shadow:0 1px 6px #000}.weather span{font-size:9px;vertical-align:middle}.place{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;transform:translate(-50%,-50%);background:none;border:0;color:#f6eacc;padding:5px;font-size:clamp(9px,.85vw,13px);text-shadow:0 1px 4px #000;white-space:nowrap}.place .pin{display:grid;place-items:center;width:33px;height:33px;background:#142e31e8;border:1px solid var(--gold);transform:rotate(45deg);box-shadow:0 3px 14px #0005}.pin svg{transform:rotate(-45deg);width:18px;color:var(--gold)}.place>span:last-child{background:#152c2bd9;border:1px solid #d5ba7955;border-radius:2px;padding:4px 10px}.place:hover .pin{background:#a9543b}.place:active{transform:translate(-50%,-50%)}.person{position:absolute;width:40px;height:46px;transform:translate(-50%,-50%);border:2px solid #e2b35e;background:#efe2c6;border-radius:50% 50% 5px 5px;box-shadow:0 3px 9px #0009;padding:0;transition:left 1s,top 1s;overflow:visible}.person .face{width:100%;height:100%;background-size:400% auto;background-position:0 12%;border-radius:50% 50% 3px 3px}.person .personName{position:absolute;left:50%;top:100%;transform:translateX(-50%);font-size:9px;white-space:nowrap;background:#14292bdc;color:#f6e5bf;padding:2px 5px;border-radius:3px;pointer-events:none}.person:hover{z-index:4;scale:1.12}.person:active{transform:translate(-50%,-50%)}.timeline{position:absolute;bottom:4%;left:4%;right:4%;display:flex;justify-content:space-between;border-top:2px solid #f0dcb55c;padding-top:7px;color:#e8d9b9;font:9px Arial;letter-spacing:1px}.timeline #progress{position:absolute;top:-2px;left:0;height:2px;background:var(--gold);width:0;box-shadow:0 0 6px #edc075}nav{height:12%;display:flex;background:var(--dark);color:var(--paper);align-items:stretch;padding:0 2%;gap:1%;flex-shrink:0;border-top:1px solid #7a8c6d66}nav button{flex:1;background:none;border:0;border-right:1px solid #5c736442;color:#dedbc1;display:flex;gap:9px;align-items:center;justify-content:center;font-size:clamp(10px,.9vw,14px);position:relative}nav button svg{color:var(--gold);width:22px;height:22px}nav button small{display:block;font:8px Arial;letter-spacing:1px;text-align:left;color:#7c9b93;margin-top:3px}nav button:hover{background:#2c4848}nav button:last-child{border:0}#toast{position:absolute;bottom:15%;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;background:#172e2cf5;color:var(--paper);border:1px solid #d8b16b;padding:12px 20px;max-width:90%;font-size:12px;pointer-events:none;transition:.3s;z-index:9}#toast.show{transform:translateX(-50%) translateY(0);opacity:1}#overlay{position:absolute;inset:0;z-index:10;pointer-events:none}#overlay:empty{display:none}.veil{position:absolute;inset:0;background:#07191dbb;display:grid;place-items:center;pointer-events:auto;backdrop-filter:blur(4px)}.modal{background:var(--paper);color:var(--ink);width:91%;height:86%;position:relative;border:1px solid #b59d6a;box-shadow:0 12px 60px #0009;display:flex;flex-direction:column;overflow:hidden}.modalHead{height:16%;padding:2% 3%;display:flex;align-items:center;border-bottom:1px solid #caba94;gap:15px;flex-shrink:0}.modalHead h2{font-size:clamp(18px,2vw,30px);margin:0;letter-spacing:3px}.modalHead p{font-size:10px;color:#8a7958;margin:0;flex:1}.close{width:32px;height:32px;padding:6px;border:1px solid #b6a887;background:none;display:grid;place-items:center;margin-left:auto}.modalBody{flex:1;min-height:0;padding:2.5% 3%;overflow:hidden}.btn{border:1px solid #b9a77c;padding:10px 16px;background:#fff8e9;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:clamp(10px,1vw,14px);min-height:36px}.btn svg{width:18px;height:18px}.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}.btn.danger{background:var(--red);color:#fff0db;border-color:var(--red)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:hover{background:#e3d5b7}.btn.primary:hover{background:#335350}.btn.danger:hover{background:#c2694b}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.panelBottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #caba94;padding:1.3% 3%;font-size:11px;flex-shrink:0}.panelBottom span{color:#897a5c}.portrait{background-color:#efe5ce;background-repeat:no-repeat;background-size:400% 100%;height:100%;width:100%;background-position-x:0;position:relative}.dialogueBody{display:grid;grid-template-columns:32% 1fr;padding:0}.portraitArea{border-right:1px solid #bfae85;background:#e3d6bb;position:relative;overflow:hidden}.portraitArea:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 80%,#caba9450);pointer-events:none}.talk{padding:4% 5%;display:flex;flex-direction:column;min-height:0}.tag{font:9px Arial;letter-spacing:2px;color:#a5583c}.talk h3{margin:8px 0 14px;font-size:clamp(17px,1.8vw,27px)}.speech{font-size:clamp(12px,1.15vw,17px);line-height:1.9;white-space:pre-line;margin:0}.talk .choices{display:grid;gap:8px;margin-top:auto;padding-top:12px}.choice{text-align:left;justify-content:flex-start;padding:9px 12px;font-size:clamp(10px,.9vw,13px)}.choice .cost{margin-left:auto;white-space:nowrap;color:#a56742;font:9px Arial}.smallNote{font-size:10px;color:#938263;line-height:1.7}.titleScreen{position:absolute;inset:0;pointer-events:auto;display:flex;color:#f3e7cb;background:#10272b}.titleArt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.titleTint{position:absolute;inset:0;background:linear-gradient(90deg,#0a2028f5 0%,#102b2be8 34%,#102b2b42 72%,#102b2b20),linear-gradient(0deg,#0c242acc,transparent 50%)}.titleContent{position:relative;z-index:1;width:55%;padding:6% 6%;display:flex;flex-direction:column;align-items:flex-start}.titleContent .eyebrow{color:#c9a864;font-size:11px;letter-spacing:5px}.titleContent h1{font-size:clamp(35px,5.4vw,85px);line-height:1.3;letter-spacing:7px;margin:6% 0 2%;font-weight:900}.titleContent h1 em{font-style:normal;color:var(--gold)}.titleEnglish{font:10px Georgia;letter-spacing:5px;color:#c9b78d}.titleContent p{font-size:clamp(12px,1.1vw,17px);line-height:2;color:#c7d0bc;margin:7% 0}.titleContent .btn{background:var(--gold);border-color:var(--gold);color:#1d302e;padding:14px 25px;min-width:60%;letter-spacing:3px;font-size:clamp(13px,1.1vw,17px)}.titleContent .titleLinks{display:flex;gap:10px;margin-top:14px}.titleLinks button{background:none;border:0;color:#c7c9b1;font-size:10px;display:flex;align-items:center;gap:5px;padding:5px 0;margin-right:16px}.titleLinks svg{width:15px}.titleMeta{position:absolute;bottom:4%;right:4%;font-size:9px;line-height:1.9;text-align:right;letter-spacing:2px;color:#e3d4ad}.titleSeal{position:absolute;right:7%;top:9%;border:1px solid #e4c98b99;border-radius:50%;width:74px;height:74px;display:grid;place-content:center;text-align:center;transform:rotate(8deg);font:12px Georgia;letter-spacing:3px;color:#f7dfa3}.titleSeal b{font-size:28px;letter-spacing:0}.cards{height:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.clueCard{padding:16px;border:1px solid #c7b58a;background:#faf3e3;display:flex;flex-direction:column;position:relative}.clueCard .num{font:10px Georgia;color:#aa8b52;letter-spacing:2px}.clueCard h3{font-size:clamp(12px,1.2vw,18px);margin:12px 0;color:#744632}.clueCard p{font-size:clamp(10px,.9vw,14px);line-height:1.8;margin:0}.clueCard small{font-size:9px;line-height:1.8;color:#9c8b67;margin-top:auto;padding-top:10px}.clueCard.locked{background:#e4dcc9;border-style:dashed;color:#9c947f}.clueCard.locked h3{color:#9b947f}.tabs{display:flex;gap:7px;margin-bottom:14px}.tabs .btn{padding:6px 12px;font-size:10px;min-height:30px}.tabs .active{background:var(--ink);color:var(--paper)}.roster{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;height:100%}.roster button{background:#fcf5e5;border:1px solid #c9b78c;padding:0;display:flex;flex-direction:column;overflow:hidden}.roster .miniPortrait{width:100%;height:68%;background-size:400% 100%;background-position:0 0}.roster b{font-size:12px;padding-top:7px}.roster small{font-size:9px;color:#97845f;padding:3px}.schedule{width:100%;height:100%;border-collapse:collapse;font-size:clamp(9px,.9vw,13px)}.schedule td,.schedule th{border-bottom:1px solid #cbbc98;text-align:left;padding:5px 10px}.schedule th{font-size:10px;color:#95764d;background:#e5d9bf}.schedule td:first-child{font-weight:bold}.schedule .now{color:#a7573f;background:#e9cba566}.deduce{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;height:100%}.deduceCard{border:1px solid #caba94;padding:20px;background:#fbf4e5;display:flex;flex-direction:column}.deduceCard h3{margin:0 0 10px;font-size:17px}.deduceCard p{font-size:11px;line-height:1.8;color:#817359}.deduceCard select{width:100%;padding:8px;background:#f1e7cf;border:1px solid #c7b58a;color:#213835;font-size:11px;margin:7px 0}.deduceCard label{font-size:9px;color:#927c51;margin-top:4px}.deduceCard .btn{margin-top:auto}.solved{font-size:13px;line-height:1.9;color:#4b796b}.locationText{font-size:clamp(12px,1.2vw,18px);line-height:1.9;max-width:85%;margin:0 0 15px}.locationGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.inspectItem{background:#faf2df;border:1px solid #c8b68d;padding:14px;text-align:left;display:flex;gap:12px;align-items:center;color:var(--ink)}.inspectItem svg{color:#b07143;width:26px;height:26px}.inspectItem strong{display:block;font-size:12px}.inspectItem small{font-size:9px;display:block;margin-top:7px;color:#9b8660}.guideGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.guideGrid article{border:1px solid #c9b78e;padding:16px}.guideGrid h3{font-size:14px;margin:0 0 10px;color:#ab5b3e}.guideGrid p{font-size:11px;line-height:1.9;margin:0}.endingScreen{position:absolute;inset:0;background:#10272c;pointer-events:auto;color:#f4e6c7;display:flex;flex-direction:column}.endingArt{width:100%;height:65%;object-fit:cover;object-position:center 45%}.endingBar{display:flex;gap:4%;padding:2.5% 4%;flex:1;position:relative;border-top:2px solid var(--gold);background:#132c2e}.endingBar>div:first-child{width:35%}.endingBar .eyebrow{color:var(--gold)}.endingBar h2{font-size:clamp(23px,2.6vw,40px);margin:10px 0;letter-spacing:3px}.endingBar p{font-size:clamp(10px,.95vw,14px);line-height:1.9;margin:4px 0}.endingBar .endDetails{flex:1;display:flex;flex-direction:column}.endingBar .actions{margin-top:auto}.endingBar .btn{font-size:11px;padding:8px 13px}.endingThumb{height:60%;width:100%;object-fit:cover}.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;height:100%}.gallery button{border:1px solid #c5b287;background:#e4d8bf;padding:0;text-align:left;color:var(--ink);overflow:hidden}.gallery button b{font-size:13px;display:block;padding:12px 10px 4px}.gallery button small{font-size:9px;display:block;padding:0 10px;line-height:1.8}.gallery .unknown{height:60%;display:grid;place-content:center;background:#233b3d;color:#a89368;font:50px Georgia}.pauseBody{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.pauseBody h3{font-size:28px;letter-spacing:4px;margin:0}.pauseBody p{font-size:12px;color:#827558}.clockDecoration{width:90px;height:90px;border:2px solid #b99a5e;border-radius:50%;display:grid;place-items:center;margin-bottom:15px}.clockDecoration svg{width:50px;height:50px;color:#ae6e42}.notice{border-left:3px solid #b16243;padding:12px 15px;background:#e8d8b9;font-size:11px;line-height:1.9;margin-top:15px}.muted{color:#948362} .badge{display:inline-block;background:#dce1c9;color:#43695c;font-size:9px;padding:4px 7px;letter-spacing:1px;margin-bottom:10px}.empty{display:grid;place-content:center;text-align:center;height:100%;color:#87795d;font-size:13px;line-height:2}.blink{animation:pulse 2s infinite}@keyframes pulse{50%{opacity:.45}}@media(min-width:1600px){#game{font-size:18px}}@media(max-width:700px){body{overflow:auto;display:block;background:#132b2e}#game{width:100%;height:auto;min-height:100dvh;overflow:visible}header{height:76px;padding:0 14px;gap:10px}.brand{font-size:16px;letter-spacing:2px}.brandmark{font-size:30px}.brand small{font-size:6px}.date{display:none}.clock{margin-left:auto}.clock b{font-size:20px}.clock small{font-size:8px}header button{width:28px;height:28px;padding:5px}.play{height:auto;display:flex;flex-direction:column-reverse}.world{width:100%;height:65dvh;min-height:460px}.casePanel{width:100%;padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.casePanel h1{font-size:34px;margin:8px 0;grid-row:2/5}.casePanel h1 br{display:none}.casePanel .rule,.casePanel .intro,.caseFoot{display:none}.casePanel .eyebrow{grid-column:1/3;font-size:9px}.objective{padding:0;border:0;grid-column:2;grid-row:2/5}.objective h3{font-size:13px}.objective p{font-size:11px}.memory{margin:0;padding:0}.memory>span{font-size:27px}.hintBtn{border:0;justify-self:end}.casePanel .memory small{font-size:8px}nav{height:auto;min-height:130px;display:grid;grid-template-columns:repeat(3,1fr);padding:8px;position:relative}nav button{padding:12px 3px;font-size:11px;border:0;gap:5px}nav button small{font-size:6px}nav button svg{width:19px}.place{font-size:11px}.mapCaption h2{font-size:24px}.mapCaption p{font-size:10px}.person{width:34px;height:41px}.person .personName{font-size:8px}#overlay{position:fixed;height:100dvh;overflow:auto}.modal{height:94dvh;width:95%;overflow:auto}.modalHead{height:70px;padding:15px;gap:8px}.modalHead h2{font-size:19px;letter-spacing:1px}.modalHead p{font-size:8px}.modalBody{overflow:auto;padding:15px}.dialogueBody{grid-template-columns:1fr;grid-template-rows:34% 1fr;padding:0}.portraitArea{border:0;border-bottom:1px solid #bfae85}.portrait{width:170px;margin:auto;background-size:400% auto;background-position-y:0}.talk{padding:15px}.talk h3{font-size:22px;margin:5px 0 12px}.speech{font-size:13px}.choice{font-size:11px;padding:10px}.titleContent{width:100%;padding:12% 8%;background:linear-gradient(90deg,#102b2bd9,#102b2b44)}.titleContent h1{font-size:52px;margin:18% 0 3%}.titleContent p{font-size:14px;margin:10% 0}.titleSeal{top:4%;right:7%;width:56px;height:56px;font-size:8px}.titleSeal b{font-size:20px}.titleMeta{bottom:5%;right:8%;font-size:8px}.titleArt{object-position:60%}.cards{grid-template-columns:1fr;height:auto}.clueCard{min-height:170px}.clueCard h3{font-size:17px}.clueCard p{font-size:13px}.roster{grid-template-columns:repeat(2,1fr);height:auto}.roster button{height:240px}.roster b{font-size:15px}.roster small{font-size:11px}.deduce{grid-template-columns:1fr;height:auto}.deduceCard{min-height:280px}.deduceCard p{font-size:12px}.deduceCard select{font-size:12px}.locationText{font-size:14px;max-width:100%}.locationGrid{grid-template-columns:1fr}.inspectItem{min-height:70px}.schedule{font-size:10px;height:auto}.schedule td,.schedule th{padding:9px 5px}.guideGrid{grid-template-columns:1fr}.guideGrid p{font-size:13px}.gallery{grid-template-columns:1fr 1fr;height:auto}.gallery button{height:260px}.endingArt{height:45%;object-position:center}.endingBar{flex-direction:column;padding:22px;overflow:auto}.endingBar>div:first-child{width:100%}.endingBar h2{font-size:30px}.endingBar p{font-size:13px}.endingBar .actions{margin-top:15px}.btn{font-size:12px}.panelBottom{padding:12px;font-size:10px}.locationGrid .inspectItem strong{font-size:13px}.tabs{flex-wrap:wrap}}

#toast{z-index:30;bottom:13%;max-width:72%}.roster{grid-template-rows:repeat(2,minmax(0,1fr))}.titleContent h1{font-size:clamp(35px,4.7vw,76px)}.titleContent{padding-top:5%;padding-bottom:4%}.titleContent p{margin:5% 0}.endingArt{min-height:0;flex-shrink:1}.endingBar{min-height:35%}@media(max-width:700px){.titleContent h1{font-size:48px}.roster{grid-template-rows:none}#toast{bottom:5%}}
.schedule{height:calc(100% - 85px)}.casePanel{padding-top:2.5%}.casePanel h1{margin-top:5%;margin-bottom:6%}.intro{margin-bottom:8%}.caseFoot{font-size:7px}.memory{padding-top:7%}@media(max-width:700px){.schedule{height:auto}.casePanel{padding:22px}.casePanel h1{margin:8px 0}}