@import url('./style.css');
:root{--cream:#fffaf0;--ink:#365b62;--coral:#c67e5e;--muted:#78877a}
body{font:400 18px 'Noto Sans TC',sans-serif;background:#b4d8d5}button{font:inherit;min-height:44px}button:focus-visible,a:focus-visible{outline:3px solid #bc6449;outline-offset:3px}
header.topbar{position:fixed;z-index:6;inset:0 0 auto;pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:96px;padding:14px 26px;background:#fffaf2f5;border-bottom:1px solid #e4deca;box-shadow:0 2px 15px #4764630c}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);flex-shrink:0}.brand img{width:59px;height:59px;object-fit:cover;object-position:center 22%;border-radius:50%;border:3px solid #edd6bd}.brand strong{display:block;font-size:21px;font-weight:500;letter-spacing:1px}.brand small{display:block;font-size:13px;color:#849281;margin-top:5px;letter-spacing:1px}
.area-nav{display:flex;gap:3px;padding:5px;border-radius:30px;background:#f0eddd;overflow:auto;scrollbar-width:none}.area-nav button{flex-shrink:0;background:none;border:0;border-radius:25px;padding:10px 15px;font-size:16px;white-space:nowrap}.area-nav button[aria-pressed=true]{background:#e69b72;color:#fff}.area-nav button:hover{background:#f6d9bd;color:#365b62}
#toggle-list{background:none;border:0;white-space:nowrap;font-size:16px;padding:8px}
#hint{top:110px;left:25px;transform:none;font-size:15px;padding:10px 17px;background:#fffaf0e8;border-radius:22px;letter-spacing:.5px}
.island-label,.region-label,.monster-label{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);white-space:nowrap;border:1px solid #fffaf0;background:#fffaf0f2;color:#3e5e60;box-shadow:0 4px 20px #355b5420;padding:10px 16px;border-radius:8px;font-size:17px;min-height:44px;line-height:1.4}
.island-label{border-bottom:3px solid #d3b38e;font-weight:500}.island-label:hover,.region-label:hover{background:#ffece0}.monster-label{background:#e6efd9;font-size:14px;border-radius:22px;width:max-content;max-width:260px}
#intro,#intro:has(.with-film){position:fixed;z-index:5;left:auto;right:20px;top:112px;bottom:106px;width:min(540px,43vw);max-width:none;max-height:none;margin:0;padding:20px 26px 28px;background:#fffaf2fa;border:1px solid #fff;border-radius:24px;overflow:auto;scrollbar-color:#c4c6ae transparent;box-shadow:0 10px 45px #355b5425;overscroll-behavior:contain}
#close-intro{position:sticky;top:0;float:right;width:44px;height:44px;margin:-7px -10px 0 8px;background:#f2eddf;color:#667869;border:1px solid #ddd7c3;z-index:4;font-size:30px}
#intro .intro-heading{position:sticky;top:0;background:#fffaf2;z-index:2;padding:6px 0 16px;border-bottom:1px solid #e5dfcd;align-items:flex-start;gap:10px}.intro-heading span{font-size:27px;padding-top:3px}h2{font:500 27px/1.6 'Noto Serif TC',serif;letter-spacing:1px;margin:0 6px 0 0}#intro-summary{font-size:20px;line-height:1.85;margin:22px 0;color:#47695f}
#intro-body,#intro-body.with-film,#intro-body.text-only{display:flex;flex-direction:column;gap:20px}#intro-content{font-size:18px;line-height:1.95;color:#647467;display:block}#intro-content p{margin:0 0 18px}#intro-content p+p{margin-top:0}
#intro-link,#entry-link{display:block;font-size:17px;line-height:1.8;color:#b56d50;margin-top:22px;text-decoration:underline;text-underline-offset:5px}#intro-body.text-only .intro-copy{max-width:none}
#artwork-open{border-radius:12px;overflow:hidden;background:#f1ebdd}#gallery #artwork-photo{height:285px;max-height:38vh;width:100%;object-fit:contain;background:#f4ecde}#artwork-title{padding:12px;font-size:16px;line-height:1.6}#thumbnails{gap:9px;flex-wrap:wrap}#thumbnails img{width:65px;height:65px;object-fit:cover}#thumbnails button{border-radius:7px;overflow:hidden}
#journal-list{gap:8px;margin:20px 0}#journal-list button{font-size:16px;line-height:1.6;padding:8px 12px;border-radius:12px}#entry-title{font:500 23px/1.6 'Noto Serif TC',serif;margin:16px 0}#entry-summary{font-size:18px;line-height:1.9}#film-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}#film-list button{display:flex;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;border:2px solid #e5ddca;border-radius:10px;background:#fff9ed;text-align:left;font-size:16px;line-height:1.6}#film-list button img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}#film-list button span{padding:8px 10px}#film-list button[aria-pressed=true]{border-color:#699baa;background:#e6eef0}#play-film{padding:12px 16px;font-size:17px;width:100%}#film-preview{order:-1;width:100%}#film-thumbnail{max-height:none;width:100%;aspect-ratio:16/9;object-fit:cover}#film-thumbnail-title{font-size:17px;padding:12px}.film-play-icon{font-size:25px}#film-note{display:none}
#temple-draw{width:100%;border:0;border-radius:14px;background:#36799e;color:#fffaf0;padding:15px 18px;font-size:18px;margin-top:20px}
nav{bottom:17px;padding:7px 10px;gap:1px;max-width:calc(100vw - 24px);border-radius:35px;background:#fffaf3f5;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}nav button{font-size:16px;padding:11px 13px;letter-spacing:0;flex-shrink:0}nav .oracle-btn{background:#36799e}nav .zoom-controls{display:flex;border:1px solid #dfdfc5;border-radius:23px;margin:2px 6px}nav .zoom-controls button{font-size:24px;line-height:1;padding:5px 12px}#drag-mode{font-size:14px}
footer{bottom:102px;left:27px;right:25px;font-size:11px;letter-spacing:1px}footer p{display:none}
#sound-panel{top:auto;left:25px;right:auto;bottom:137px;max-width:290px;padding:11px 16px;background:#fffaf2f5}#sound-panel summary{font-size:15px}#sound-panel[open]{z-index:8}#sound-status,.sound-credit{font-size:13px;line-height:1.8}.sound-row{font-size:15px;gap:15px;margin:14px 0}#enable-sound{font-size:16px}#sound-panel input[type=checkbox]{width:18px;height:18px}.sound-row input[type=range]{height:25px}
#place-list{position:fixed;z-index:7;top:112px;left:22px;bottom:105px;width:360px;max-width:calc(100vw - 30px);padding:24px;background:#fffaf2fa;border:1px solid #fff;border-radius:24px;overflow:auto;box-shadow:0 10px 50px #31546330}#place-list .list-heading{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-24px;background:#fffaf2;padding:12px 0}#close-list{background:#f0eddd;border:0;border-radius:50%;font-size:28px;width:44px}#place-list p{font-size:17px;color:#7c8b7b}#place-list h3{font-size:15px;color:#9b986e;margin:27px 0 10px}#place-list-items button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #e8e0cb;padding:14px 4px;font-size:19px}#place-list-items button:hover{background:#f4e5d1}
#oracle{width:min(450px,94vw)}#oracle-line{font-size:19px}.oracle-task p{font-size:17px}.oracle-task span,.oracle-sign,.oracle-tip{font-size:13px}#oracle-again{font-size:17px;padding:12px 24px}.oracle-kicker{font-size:18px}#oracle-no{font-size:14px}dialog button{min-height:44px}#large-caption{font-size:18px;line-height:1.6}#lightbox>div{gap:20px}
@media(max-width:1190px){header.topbar{gap:12px;padding:10px 20px;flex-wrap:wrap}.brand strong{font-size:20px}.brand img{width:49px;height:49px}.area-nav{order:3;width:100%;justify-content:center;padding:2px;border-radius:0;background:none;gap:8px}.area-nav button{padding:7px 14px;font-size:16px}header.topbar{min-height:128px}#hint{top:141px}#intro,#intro:has(.with-film),#place-list{top:144px}.region-label,.island-label{font-size:16px}.brand small{font-size:12px}#sound-panel{left:20px}nav button{padding:10px 11px;font-size:15px}}
@media(max-width:899px){#intro,#intro:has(.with-film){left:12px;right:12px;top:auto;bottom:88px;width:auto;max-height:46vh;border-radius:24px;padding:15px 23px 25px}#intro .intro-heading{padding-bottom:10px}#intro-summary{font-size:19px;margin:15px 0}#intro-content,#entry-summary{font-size:17px}h2{font-size:25px}#intro-body{gap:16px}nav{bottom:10px}nav button{font-size:14px;padding:9px 10px}#drag-mode{display:none}#sound-panel{bottom:101px;left:15px}body.reading-open #sound-panel{display:none}footer{display:none}#hint{font-size:13px;padding:8px 12px;left:16px}#place-list{bottom:88px}#gallery #artwork-photo{height:260px;max-height:none}.island-label,.region-label{font-size:15px;padding:8px 12px}.monster-label{font-size:12px;padding:7px 10px}#thumbnails img{width:58px;height:58px}}
@media(max-width:550px){header.topbar{padding:10px 14px 6px;gap:5px;min-height:128px}.brand{gap:9px}.brand strong{font-size:18px;letter-spacing:0}.brand small{font-size:11px;margin-top:3px;letter-spacing:0}.brand img{width:43px;height:43px}.area-nav{justify-content:flex-start;gap:2px}.area-nav button{font-size:14px;padding:7px 12px}#toggle-list{font-size:0;padding:5px;width:44px}#toggle-list::before{content:'☰';font-size:24px}nav{width:calc(100vw - 18px);border-radius:24px;padding:5px 7px;gap:2px}nav button{font-size:13px;padding:8px 10px}nav .zoom-controls{margin:0 2px}nav .zoom-controls button{font-size:21px;padding:4px 10px}#monster{font-size:0;width:44px;padding:8px}#monster::before{content:'♧';font-size:23px}#hint{max-width:calc(100vw - 30px);font-size:12px;top:137px;margin:0}#intro,#intro:has(.with-film){max-height:49vh;bottom:78px;padding:15px 19px 22px}#intro-summary{font-size:18px}#intro-content,#entry-summary{font-size:16px;line-height:1.95}h2{font-size:24px}#entry-title{font-size:22px}#journal-list button{font-size:15px}#entry-link,#intro-link{font-size:16px}#film-list button{font-size:15px}#sound-panel{bottom:87px;max-width:270px}#sound-panel summary{font-size:14px}#place-list{left:12px;top:140px;bottom:78px}.island-label{font-size:13px;padding:8px 9px}.region-label{font-size:14px}.monster-label{font-size:11px;max-width:160px;white-space:normal;text-align:center}#oracle-name{font-size:36px}#oracle-line{font-size:18px}.oracle-task p{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
#mobile-zoom{display:none}@media(max-width:899px){nav .zoom-controls{display:none}#mobile-zoom{position:fixed;z-index:6;display:flex;bottom:91px;right:15px;background:#fffaf2ed;border:1px solid #fff;border-radius:23px;box-shadow:0 3px 15px #31546320}#mobile-zoom button{border:0;background:none;padding:8px 13px;font-size:24px}body.reading-open #mobile-zoom{bottom:auto;top:144px}}
#intro .reading-heading{position:sticky;top:0;z-index:4;background:#fffaf2;margin:-20px -26px 0;padding:20px 26px 15px;border-bottom:1px solid #e5dfcd}#intro .reading-heading .intro-heading{position:static;padding:0 48px 0 0;border:0;background:none}#intro .reading-heading #close-intro{position:absolute;float:none;top:18px;right:18px;margin:0}#intro .reading-heading h2{margin:0;font-size:26px}@media(max-width:899px){#intro .reading-heading{margin:-15px -23px 0;padding:15px 23px 12px}#intro .reading-heading #close-intro{top:12px;right:14px}}@media(max-width:550px){#intro .reading-heading{margin:-15px -19px 0;padding:15px 19px 12px}#intro .reading-heading h2{font-size:24px}}