@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700&display=swap');
:root{font-family:'Noto Serif TC',serif;color:#efe9d9;background:#25342c;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;min-height:44px;border:1px solid #e2d5b328;background:#233329b8;border-radius:24px;padding:10px 18px;touch-action:manipulation}button:hover{background:#52614b}button:focus-visible,a:focus-visible{outline:2px solid #edcf8a;outline-offset:4px}button:disabled{opacity:.4;cursor:default}#canvas{position:fixed;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}body:after{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#14261b78,transparent 40%),linear-gradient(0deg,#14261bb0,transparent 24%,transparent 80%,#14261b66);z-index:1}header{position:fixed;z-index:3;top:32px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none;font-size:27px;letter-spacing:6px}.seal{border:1px solid #d9bb7c;padding:7px 6px;color:#dcc58f;font-size:15px;line-height:1.25;letter-spacing:0}.brand small{font:9px/2 sans-serif;display:block;letter-spacing:2.4px;color:#c4c7b4}.top-tools{display:flex;gap:8px;font-size:12px}.top-tools button{backdrop-filter:blur(16px)}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a6c392;margin-right:6px}#people{border-left:1px solid #ffffff30;margin-left:8px;padding-left:10px;font-family:system-ui}.place{position:fixed;z-index:2;left:5.2%;top:25%;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:4px;color:#dfc58f}.place h1{font-weight:400;letter-spacing:7px;font-size:48px;line-height:1.5;margin:22px 0}.place p{font-size:13px;line-height:2.2;letter-spacing:2px;color:#d2d3c0}.place-tag{display:block;font-size:10px;letter-spacing:1px;margin-top:30px;color:#bdc5b5}#hint{position:fixed;z-index:2;bottom:162px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:1px;white-space:nowrap;color:#e6dfc0ab;pointer-events:none}.actions{position:fixed;z-index:4;bottom:64px;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:8px 14px;border:1px solid #e7d7ae45;border-radius:22px;background:#1c3025cc;backdrop-filter:blur(20px);box-shadow:0 15px 60px #0003}.actions button{display:flex;flex-direction:column;align-items:center;gap:8px;width:100px;padding:8px;border-radius:15px;background:none;border:none;font-size:11px;letter-spacing:1px}.actions button:hover,.actions button.active{background:#e6d39e19;color:#f3d28d}.action-icon{font:30px/32px Georgia;color:#e6cc8d;height:32px}.actions button.active:after{content:'';width:4px;height:4px;background:#ddbe7f;border-radius:50%;position:absolute;bottom:6px}footer{position:fixed;z-index:3;bottom:15px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center;color:#d9dcc5a8;font-size:10px;letter-spacing:2px}footer button{background:none;border:0;padding:5px;font-size:11px;letter-spacing:1px}#joystick{position:fixed;bottom:90px;left:45px;z-index:5;border:1px solid #e4dabb55;background:#e3d7ac08;width:96px;height:96px;border-radius:50%;touch-action:none;display:grid;place-items:center}#stick{width:40px;height:40px;background:#ddcda638;border:1px solid #e7d6ae66;border-radius:50%;pointer-events:none}#joystick span{position:absolute;bottom:-23px;font-size:10px;color:#e2dbbe99;letter-spacing:3px}dialog{color:#eee9d7;border:1px solid #e4d4a747;background:#20362ef7;border-radius:22px;padding:35px;width:calc(100% - 32px);max-width:460px;max-height:85dvh;box-shadow:0 30px 100px #0007}dialog::backdrop{background:#08150eb0;backdrop-filter:blur(6px)}dialog h2{font-size:25px;font-weight:400;line-height:1.6}dialog p{font-size:12px;line-height:2;color:#c9d0bf}dialog .close{position:absolute;right:12px;top:10px;border:0;background:none;font-size:25px}dialog label{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:23px 0;font-size:12px}input[type=range]{width:52%;accent-color:#c9b27d}.primary,#nextButton{background:#d7c18c;color:#273b2f;border-color:#d7c18c}.quiet{border-color:#d9d7b832;background:transparent}.choice{display:flex;gap:12px;flex-wrap:wrap}.fine{font-size:10px!important}#ritual{position:fixed;z-index:5;top:120px;left:50%;transform:translateX(-50%);width:340px;text-align:center;background:#1b3026d9;backdrop-filter:blur(16px);border:1px solid #e7d7ae44;border-radius:20px;padding:22px}#ritual h2{font-weight:400;margin:12px 0;font-size:23px}#ritual p{min-height:38px;font-size:12px;line-height:1.8;color:#d9decb}progress{width:100%;height:3px;accent-color:#d8bc7c;margin:10px 0 18px}.ritual-buttons{display:flex;justify-content:center;gap:8px;font-size:12px}#toast{position:fixed;bottom:180px;left:50%;transform:translateX(-50%);z-index:8;background:#f0e4c9;color:#2c4536;border-radius:12px;padding:14px 22px;text-align:center;font-size:12px;max-width:90%;width:max-content;box-shadow:0 4px 30px #0003}#loading{position:fixed;inset:0;z-index:20;background:#263a30;display:grid;place-items:center;letter-spacing:5px}.ritual-mode .place{display:none}.ritual-mode #joystick{opacity:.2;pointer-events:none}.ritual-mode #hint{display:none}body.cleanse-mode #ritual{top:auto;bottom:172px;background:#1b3026d9}body.cleanse-mode .actions{opacity:.5}body.cleanse-mode #ritualOverline{display:none}
@media(max-width:700px){header{top:max(16px,env(safe-area-inset-top));left:18px;right:18px}.brand{font-size:21px;gap:9px;letter-spacing:3px}.brand small{font-size:6px;letter-spacing:1.1px}.seal{font-size:12px;padding:5px}.top-tools{gap:5px}.top-tools button{padding:8px 11px;font-size:10px}.top-tools #infoButton{display:none}.place{left:24px;top:19%}.place h1{font-size:30px;letter-spacing:5px;margin:13px 0}.place p{font-size:10px;letter-spacing:1px}.eyebrow{font-size:9px;letter-spacing:2px}.place-tag{font-size:8px;margin-top:15px}.actions{bottom:calc(30px + env(safe-area-inset-bottom));width:calc(100% - 24px);padding:6px 3px;justify-content:space-around;border-radius:18px}.actions button{width:20%;font-size:9px;letter-spacing:0;padding:7px 2px;gap:4px}.action-icon{font-size:25px;height:27px;line-height:27px}footer{bottom:calc(2px + env(safe-area-inset-bottom));left:18px;right:18px;font-size:8px;letter-spacing:1px}footer button{min-height:26px;font-size:9px}#joystick{width:82px;height:82px;left:24px;bottom:142px}#stick{width:34px;height:34px}#hint{bottom:126px;font-size:9px;left:auto;right:22px;transform:none;max-width:200px;white-space:normal;text-align:right}#ritual{top:100px;width:calc(100% - 44px);padding:18px}body.cleanse-mode #ritual{bottom:130px}#toast{bottom:135px}body.cleanse-mode #ritual p{min-height:20px;margin:8px 0}body.cleanse-mode #ritual h2{font-size:18px;margin:6px 0}}
@media(min-width:701px){body.cleanse-mode #ritual{left:auto;right:35px;top:180px;bottom:auto;transform:none;width:300px}body.cleanse-mode .actions{opacity:.35}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* First-person view keeps ceremony prompts outside the main sightline. */
#shrineBar>div{min-width:0}#shrineBar strong{overflow-wrap:anywhere}body.travelling .place{display:none}.ritual-buttons button[hidden]{display:none!important}
.at-shrine .place{display:none}#ritual .ritual-buttons{max-width:100px}#ritual{min-height:82px}#ritual h2{padding-right:90px}.ritual-mode #shrineBar strong{font-size:11px}
.place{top:auto;bottom:235px;opacity:.85}.place h1{font-size:23px;line-height:1.5;margin:10px 0}.place p,.place-tag{display:none}#hint{bottom:148px}
#shrineBar{position:fixed;z-index:4;top:106px;right:35px;display:flex;gap:12px;align-items:center;padding:10px 14px;background:#20352cdd;border:1px solid #d6c89e3d;border-radius:14px;max-width:470px;backdrop-filter:blur(12px)}#shrineBar small{display:block;font-size:10px;color:#c5c8ae;margin-bottom:5px}#shrineBar strong{font-size:13px;font-weight:500}#guideButton{font-size:11px;padding:6px 12px;flex-shrink:0}#shrineGuide h2{margin:10px 0}#shrineGuide p{line-height:1.7}#shrineGuide a{color:#dfc58f}#shrineList{display:grid;gap:8px}.shrine-group-title{color:#d9c18a;font-size:12px;margin:12px 0 4px}.shrine-option{width:100%;text-align:left;border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px}.shrine-option strong{font-size:14px;font-weight:500}.shrine-option small{display:block;color:#bdc7b7;font-size:10px;margin-top:4px}.shrine-option .visit{font-size:11px;color:#dfc58f}.shrine-option[aria-current=true]{border-color:#d6bd80;background:#d2be8922}
#ritual,body.cleanse-mode #ritual{top:auto;bottom:158px;left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100% - 32px));padding:11px 15px;border-radius:14px;background:#193025db;text-align:left}#ritualOverline{display:none}#ritual h2,body.cleanse-mode #ritual h2{font-size:15px;margin:0 0 4px;line-height:1.4}#ritual p,body.cleanse-mode #ritual p{font-size:11px;margin:0;min-height:0;line-height:1.5;padding-right:95px}#ritual progress{display:block;height:2px;margin:8px 0 0;width:calc(100% - 90px)}.ritual-buttons{position:absolute;right:8px;top:9px;display:flex;flex-direction:column;gap:2px}.ritual-buttons button{min-height:30px;font-size:10px;padding:5px 10px}#nextButton{max-width:95px}#cancelButton{border:0;color:#bfc8b6}body.cleanse-mode #joystick,.ritual-mode .place{display:none}body.cleanse-mode .actions{opacity:.8}.ritual-mode #shrineBar{opacity:.75}#cleanseChoice{max-width:370px;padding:24px}#cleanseChoice h2{font-size:20px;margin:10px 0}#cleanseChoice p{margin:10px 0;font-size:11px}.choice{gap:8px}.choice button{font-size:12px;padding:8px 12px}
@media(max-width:700px){.place{bottom:250px;top:auto;left:20px}.place h1{font-size:20px}.place .eyebrow{font-size:8px}#shrineBar{top:78px;left:15px;right:15px;padding:8px 10px;gap:5px}#shrineBar strong{font-size:11px}#shrineBar small{font-size:9px;margin-bottom:3px}#guideButton{font-size:10px;padding:6px 9px;min-height:36px;margin-left:auto}#ritual,body.cleanse-mode #ritual{bottom:calc(119px + env(safe-area-inset-bottom));width:calc(100% - 28px);padding:10px 12px}#ritual h2,body.cleanse-mode #ritual h2{font-size:13px}#ritual p,body.cleanse-mode #ritual p{font-size:10px;padding-right:73px}#ritual progress{width:calc(100% - 70px)}.ritual-buttons button{font-size:9px;padding:4px 7px;min-height:28px}#shrineGuide{padding:26px 20px}#shrineGuide h2{font-size:22px}#shrineGuide p{font-size:11px}}
/* Unobstructed play: descriptions stay available to assistive technology only. */
:root{--music-space:0px}.music-open{--music-space:232px}#canvas{bottom:var(--music-space)}
#musicButton{width:44px;height:44px;min-height:44px;padding:0;font:21px/1 system-ui}
@media(max-width:700px){#roomLabel{display:none}.top-tools #musicButton{width:44px;padding:0}.brand .seal{display:none}.brand{font-size:20px}}
#musicDock{position:fixed;z-index:9;bottom:0;left:0;right:0;height:232px;background:#14291f;display:grid;grid-template-columns:minmax(200px,360px) minmax(0,1fr);gap:16px;padding:16px;border-top:1px solid #d7c58d44}
#chantPlayer,#musicDock iframe{width:100%;height:200px;min-width:200px;min-height:200px;border:0}.music-caption{position:relative;padding:44px 8px 8px;min-width:0}.music-caption strong{font-size:13px;font-weight:500}.music-caption p{font-size:11px;line-height:1.7;color:#c2cab8}.music-caption a{color:#ddc58c;font-size:11px}#musicClose{position:absolute;right:0;top:0;width:44px;height:44px;font:24px/1 sans-serif;padding:0}
.music-open .actions{bottom:calc(64px + var(--music-space))}.music-open footer{bottom:calc(15px + var(--music-space))}.music-open #joystick{bottom:calc(90px + var(--music-space))}
@media(max-width:700px){#musicDock{gap:10px;padding:16px 10px;grid-template-columns:200px minmax(0,1fr)}.music-caption{padding-left:0;padding-right:0}.music-caption strong{font-size:11px}.music-caption p{font-size:10px}.music-open .actions{bottom:calc(30px + env(safe-area-inset-bottom) + var(--music-space))}.music-open footer{bottom:calc(2px + env(safe-area-inset-bottom) + var(--music-space))}.music-open #joystick{bottom:calc(142px + var(--music-space))}}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;pointer-events:none!important}
#shrineBar,.place,#hint,#joystick>span{display:none!important}
#ritual,body.cleanse-mode #ritual{top:102px;right:40px;bottom:auto;left:auto;transform:none;width:auto;min-height:0;padding:0;background:none;border:0;border-radius:0;backdrop-filter:none;box-shadow:none}
#ritual .ritual-buttons{position:static;display:flex;flex-direction:row;gap:7px;max-width:none}
#ritual .ritual-buttons button{min-width:44px;min-height:44px;width:44px;height:44px;padding:0;border:1px solid #d7d6ba38;border-radius:50%;background:#20372c88;backdrop-filter:blur(10px);color:#eee6d1;font:22px/1 system-ui}
#guideButton{width:44px;min-height:44px;padding:0;font:23px/1 system-ui;flex-shrink:0;margin:0}
#shrineGuide{margin:auto 20px 24px auto;width:360px;max-width:calc(100% - 32px);max-height:70dvh;padding:24px 18px;border-radius:20px;overflow-y:auto}
#shrineGuide h2{font-size:19px;margin:0 36px 15px 0}#shrineGuide summary{font-size:11px;color:#c7cbb8;cursor:pointer;padding:16px 0 4px}#shrineGuide .shrine-group-title{font-size:11px;margin:8px 0 2px}#shrineGuide .shrine-option{padding:8px 12px}#shrineGuide .shrine-option strong{font-size:13px}#shrineGuide .shrine-option small{font-size:9px}
@media(max-width:700px){.brand small{display:none}.brand{font-size:19px;gap:7px;letter-spacing:2px}.top-tools{gap:5px}.top-tools #guideButton{width:44px;min-height:44px;font-size:22px;padding:0}.top-tools #roomButton{padding:7px 9px}.top-tools #soundButton{padding:7px 10px}#people{margin-left:5px;padding-left:6px}#ritual,body.cleanse-mode #ritual{top:75px;right:18px;bottom:auto;left:auto;width:auto;padding:0}#shrineGuide{margin:auto 0 0;width:100%;max-width:none;max-height:66dvh;padding:22px 18px max(18px,env(safe-area-inset-bottom));border-radius:22px 22px 0 0}}

/* 擲筊・求籤 */
#lotTube{position:relative;width:70px;height:110px;margin:10px auto;border-radius:10px 10px 6px 6px;background:linear-gradient(90deg,#6e3a1c,#a5652f,#6e3a1c);border:2px solid #d7c18c;display:flex;justify-content:center;gap:4px;align-items:flex-start}
#lotTube i{width:5px;height:56px;margin-top:-40px;background:#d9b46a;border-radius:2px}
#lotTube i:nth-child(2n){height:62px;margin-top:-46px}
#lotTube.shaking{animation:tubeShake .26s ease-in-out 5}
@keyframes tubeShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) translateY(-4px)}75%{transform:rotate(12deg) translateY(-4px)}}
#lotCard{margin:12px 0;padding:16px;border:1px solid #d7c18c80;border-radius:14px;background:#f3e7c8;color:#3a2412}
.lot-number{font-size:12px;letter-spacing:2px;color:#8e1d16;text-align:center;margin-bottom:10px}
.lot-poem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:19px;line-height:1.35;writing-mode:vertical-rl;margin:0 auto 12px}
.lot-poem span{white-space:nowrap}
#lotDetails{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12px;line-height:1.8;margin:0}
#lotDetails dt{color:#8e1d16;font-weight:700}
#lotDetails dd{margin:0}
#lotResult{min-height:24px;color:#f3d28d!important}
@media(max-width:700px){.actions button{width:12.5%;font-size:8px}}
@media(prefers-reduced-motion:reduce){#lotTube.shaking{animation:none}}
.shrine-option .tip{display:block;margin-top:3px;font-size:11px;line-height:1.6;color:#d8c48f;letter-spacing:0}
#tossPanel{position:fixed;z-index:6;left:50%;bottom:calc(140px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 10px 8px 16px;border-radius:18px;background:#1c3025b3;backdrop-filter:blur(10px)}
#tossHint{font-size:11px;color:#e6d39e;opacity:.55;letter-spacing:1px}
#tossPanel button{padding:6px 16px;border-radius:12px}
#lampDialog input,#lampDialog select,#wealthDialog input,#wealthDialog select{flex:1;max-width:220px;padding:8px 10px;border-radius:10px;border:1px solid #e4d4a760;background:#14261d;color:#eee9d7;font-size:14px}
#amuletCanvas{display:block;width:100%;max-width:260px;margin:14px auto;border-radius:16px;box-shadow:0 10px 30px #0005}
#amuletCanvas[hidden],#amuletActions[hidden]{display:none}
#amuletTypes{margin:10px 0}
#queuePanel{position:fixed;z-index:6;left:50%;top:80px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;border-radius:18px;background:#1c3025d9;backdrop-filter:blur(10px);white-space:nowrap}
#queuePanel[hidden]{display:none}
#queueText{font-size:12px;color:#f3d28d;letter-spacing:1px}
#queuePanel button{padding:5px 12px;border-radius:12px;font-size:12px}
/* Compact phone layout: smaller chrome so more of the temple is visible. */
@media(max-width:700px){.top-tools button,.top-tools #guideButton,.top-tools #musicButton{min-height:34px;height:34px;padding:0 9px;font-size:10px}.top-tools #guideButton,.top-tools #musicButton{width:34px;font-size:16px}.brand{font-size:16px}.actions{padding:3px 2px;border-radius:14px;bottom:calc(22px + env(safe-area-inset-bottom))}.actions button{padding:4px 1px;gap:2px;font-size:7.5px}.action-icon{font-size:18px;height:20px;line-height:20px}#joystick{width:66px;height:66px;bottom:112px;left:16px}#stick{width:28px;height:28px}footer{font-size:7px}footer button{min-height:22px;font-size:8px}#shrineBar{top:62px;padding:6px 9px}#hint{bottom:96px}#tossPanel{bottom:calc(100px + env(safe-area-inset-bottom))}}
/* Real phones: browser toolbars and the keyboard eat the bottom, so lift controls and let dialogs scroll. */
@media(max-width:700px){html,body{height:100dvh}footer{display:none}.actions{bottom:calc(8px + env(safe-area-inset-bottom));padding:2px 1px}.actions button{padding:3px 0;font-size:7px}.action-icon{font-size:16px;height:18px;line-height:18px}#joystick{bottom:84px;width:58px;height:58px}#stick{width:24px;height:24px}#tossPanel{bottom:calc(70px + env(safe-area-inset-bottom))}
#lampDialog,#wealthDialog,#amuletDialog,#lotDialog,#cleanseChoice,#settings,#about{margin:12px auto auto;padding:20px 18px;max-height:calc(100dvh - 24px);overflow-y:auto}#lampDialog h2,#wealthDialog h2,#amuletDialog h2,#lotDialog h2{font-size:19px}#lampDialog label,#wealthDialog label{margin:12px 0}}
#inAppTip{position:fixed;z-index:20;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;padding:10px 38px 10px 14px;border-radius:14px;background:#8e1d16f2;color:#fff3d6;font-size:12px;line-height:1.6;box-shadow:0 8px 30px #0006}
#inAppTip[hidden]{display:none}
#inAppTip button{position:absolute;right:6px;top:4px;border:0;background:none;color:#fff3d6;font-size:20px}
/* The page never scrolls or shifts on phones: the 3D view and controls are pinned to the screen. */
html,body{overflow:hidden;overscroll-behavior:none}
@media(max-width:700px){body{position:fixed;inset:0;height:100dvh}}
/* 16px text in fields stops iPhone Safari from zooming the page when a name box is tapped. */
input,select,textarea{font-size:16px!important}
/* 收驚: a clear labelled end button and a visible countdown. */
#ritualHint{margin:0 0 6px;font-size:12px;color:#f3d28d;text-align:right;text-shadow:0 1px 4px #000a}
#ritualHint[hidden]{display:none}
#cancelButton.wide{width:auto;padding:6px 14px;font-size:13px;background:#8e1d16;color:#fff3d6;border-color:#e7c26a}
#cancelButton.wide{width:auto!important;min-width:96px;height:auto!important;min-height:36px;white-space:nowrap;border-radius:18px!important}
#guideSay{position:fixed;z-index:7;left:50%;top:38%;transform:translateX(-50%);padding:10px 18px;border-radius:16px;background:#fff7e3;color:#5a2a14;font-size:15px;box-shadow:0 8px 30px #0005;white-space:nowrap}
#guideSay[hidden]{display:none}
