:root{--ink:#353349;--purple:#665498;--cream:#fff9e9;--gold:#f3c862}*{box-sizing:border-box}body{margin:0;background:#e8dfcd;color:var(--ink);font-family:'Microsoft JhengHei',sans-serif}button{font:inherit;cursor:pointer;border:0;border-radius:14px;padding:13px 22px;background:var(--purple);color:white;transition:.2s}button:hover{filter:brightness(1.1);transform:translateY(-2px)}button:focus-visible{outline:4px solid #ffb900;outline-offset:3px}header{height:76px;padding:16px 4%;display:flex;align-items:center;gap:20px;background:var(--cream);border-bottom:2px solid #cbbd9d}header b{font-size:25px;letter-spacing:1px}em{font-size:15px;font-style:normal;color:var(--purple)}header span{flex:1;font-size:13px}header button{padding:9px 15px;font-size:13px;background:#e8e1d4;color:var(--ink)}main{max-width:1440px;margin:auto;min-height:calc(100vh - 76px);position:relative}.stage{position:relative;min-height:710px;height:calc(100vh - 76px);overflow:hidden;background:#f3eedc}.scene{position:absolute;inset:0;background:center/cover no-repeat;opacity:.55;filter:saturate(.85)}.scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#ede4d1 2%,transparent 70%)}.chapter{position:absolute;top:25px;left:30px;background:var(--cream);padding:12px 22px;border-radius:30px;font-size:14px;box-shadow:0 4px 20px #31224320}.portrait{position:absolute;bottom:230px;width:23%;height:43%;object-fit:contain;object-position:bottom;animation:rise .55s ease-out;transition:opacity .35s,filter .35s}.portrait.left{left:7%}.portrait.right{right:7%}.silent{opacity:.3;filter:saturate(.4)}@keyframes rise{from{transform:translateY(60px);opacity:0}to{transform:translateY(0)}}.speech{position:absolute;bottom:24px;left:6%;width:88%;border:3px solid #81709c;border-radius:24px;background:#fffaf0f5;padding:30px 36px 24px;box-shadow:0 12px 30px #44315920;min-height:210px}.speaker{position:absolute;top:-20px;left:25px;background:var(--purple);color:#fff;padding:9px 30px;border-radius:12px}.english{font-size:clamp(22px,3vw,34px);font-weight:700;margin:5px 0 8px}.translation{color:#817562;line-height:1.8}.actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}.choice{background:white;color:var(--ink);border:2px solid #d8cee4;flex:1;min-width:170px}.next{margin-left:auto}.intro{position:relative;display:flex;align-items:center;gap:5%;padding:8%;min-height:680px;background:radial-gradient(ellipse at 75% 30%,#f7dc94,transparent 50%)}.intro h1{font-size:clamp(42px,6vw,78px);line-height:1.2;margin:20px 0}.intro p{font-size:19px;line-height:1.9}.intro>div{flex:1}.intro img{width:42%;max-height:490px;object-fit:contain}.eyebrow{color:var(--purple);font-weight:700;letter-spacing:3px}.primary{background:var(--purple);padding:17px 35px;font-weight:bold}.search{padding:25px;display:grid;grid-template-columns:230px 1fr 230px;gap:22px;min-height:720px;align-items:start}.panel{background:var(--cream);border-radius:22px;padding:24px;line-height:1.8;box-shadow:0 7px 20px #46324612}.panel img{width:100%;max-height:170px;object-fit:contain}.mapWrap{position:relative;width:100%;max-width:630px;margin:auto}.map{display:block;width:100%;border-radius:18px;box-shadow:0 10px 35px #3f352d30}.hotspot{position:absolute;width:8%;height:6%;padding:0;background:transparent;border:0;border-radius:50%;transform:translate(-50%,-50%)}.hotspot:hover{background:#f9d15b50;outline:2px dashed white;transform:translate(-50%,-50%)}.hotspot:focus-visible{outline:3px solid #f0bb31}.hintRing{outline:4px solid #ffcf48!important;box-shadow:0 0 0 12px #ffcf4840}.small{font-size:13px;color:#837462}.search h2{margin-top:0}.hint{background:#ece2ca;color:#584979;width:100%;margin-top:16px}.callArea{padding:5%;text-align:center}.callArea h1{font-size:34px}.lawn{height:300px;background:linear-gradient(#edf3ca,#cedc9c);border-radius:90px 90px 30px 30px;margin:30px auto;position:relative;max-width:950px;overflow:hidden}.ken{position:absolute;height:85%;bottom:0;left:3%}.dog{position:absolute;width:19%;bottom:22px;left:76%;transition:left .15s linear}.progress{height:14px;border-radius:20px;background:#dfd8c9;overflow:hidden;max-width:500px;margin:20px auto}.progress div{height:100%;width:0;background:#67a383}.hold{touch-action:none;user-select:none;background:#e5b949;color:#463e2e;min-width:260px;font-size:23px}.hold.active{animation:shake .15s infinite}@keyframes shake{50%{transform:rotate(3deg)}}.reward{text-align:center;padding:60px 20px}.reward img{height:190px}.card{max-width:570px;margin:20px auto;background:var(--cream);border:3px solid #d3b36c;border-radius:25px;padding:30px;box-shadow:0 20px 40px #54422b18}.card h1{font-size:35px}.phrases{line-height:2.2;color:var(--purple)}#toast{position:fixed;top:88px;left:50%;transform:translateX(-50%);background:#3d354deb;color:white;border-radius:15px;padding:16px 28px;z-index:10;max-width:90%;pointer-events:none;opacity:0;transition:.2s}#toast.show{opacity:1}dialog{border:2px solid #d7bd83;border-radius:25px;background:var(--cream);max-width:600px;width:90%;padding:30px}dialog::backdrop{background:#26203499}#closeAlbum{float:right}.clue{max-width:1050px;margin:30px auto;padding:25px}.clue img{max-height:400px;width:100%;object-fit:contain}.clue .actions button{flex:1}.muteNote{font-size:12px;color:#8c806e;margin-top:20px}@media(max-width:850px){header span{display:none}header{gap:8px;padding:12px;height:auto}header b{font-size:18px}.search{grid-template-columns:1fr;padding:15px}.search .panel{padding:15px}.search .panel img{max-height:90px}.search .panel:first-child{display:flex;gap:15px;align-items:center}.search .panel:first-child img{width:80px}.mapWrap{max-width:570px}.portrait{bottom:300px;width:32%;height:35%}.portrait.left{left:1%}.portrait.right{right:1%}.speech{left:3%;width:94%;padding:28px 20px;min-height:270px}.stage{min-height:740px}.intro{flex-direction:column;padding:8%;min-height:0}.intro img{width:65%;margin:35px}.choice{min-width:100%;padding:10px}.intro h1{font-size:45px}}
/* Keep image and hit targets together at the top of the search layout. */
.mapWrap{margin:0 auto;align-self:start;min-width:0}.search{grid-template-columns:230px minmax(0,1fr) 230px}.map{height:auto;min-height:200px}.portrait{max-height:360px}@media(max-width:850px){.search{grid-template-columns:minmax(0,1fr)}}