:root{color-scheme:dark;--paper:#f0e2c4;--ink:#17292b;--gold:#dfb46f;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#253b3e}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #e9d5ae38;background:#17292bd9;border-radius:8px;padding:10px 13px}button:hover{background:#355052}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}#app{height:100%;color:var(--paper)}#scene{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;touch-action:none;outline:0}.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0c25267a,transparent 23%,transparent 70%,#0b1e26a8)}header{position:absolute;top:max(24px,env(safe-area-inset-top));left:30px;right:30px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}.seal{display:block;background:#a64836;padding:7px 9px;font-family:serif;font-size:16px;line-height:17px;border:1px solid #f5d1a15e}.brand small{font-size:9px;letter-spacing:2.5px;display:block;margin-bottom:5px}.brand b{font-weight:600;font-size:24px;letter-spacing:3px}.brand i{font-weight:400;font-style:normal;color:#e2b272}.tools{display:flex;gap:8px;align-items:center}.tools button{width:38px;height:38px;padding:0}.version{font-size:11px;opacity:.65;margin-right:10px}.objective{position:absolute;top:119px;left:30px;width:255px;padding:17px 18px;background:#142a2be6;border:1px solid #c0c4a732;border-radius:3px;box-shadow:0 8px 30px #15282933}.objective small{font-size:9px;letter-spacing:2px;color:var(--gold)}h1{font-family:Georgia,serif;font-size:20px;font-weight:400;margin:11px 0}p{font-size:12px;line-height:1.65;color:#d1d3be}.objective p{margin:0;min-height:39px}.track{height:2px;background:#cfc5a328;margin-top:15px}.track i{display:block;height:100%;background:var(--gold);width:0;transition:width .3s}.place{position:absolute;right:30px;top:122px;text-align:right;text-shadow:0 2px 6px #173535}.place span{font-family:serif;font-size:23px;display:block;letter-spacing:5px;opacity:.65}.place b{font-size:12px;display:block;margin:8px 0}.place small{font-size:10px;opacity:.65}footer{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:9px;letter-spacing:1px}footer>div{display:flex;gap:10px;align-items:center}footer nav{display:flex;gap:6px;align-items:center}footer button{font-size:11px;padding:8px 10px}footer a{color:var(--paper);font-size:10px;text-decoration:none;margin-left:8px}.status{width:5px;height:5px;background:#9bbfa7;border-radius:50%}#fps{opacity:.6}.interaction{position:absolute;bottom:91px;right:30px;display:flex;gap:10px;align-items:center}.interaction>span{font-size:11px;text-shadow:0 2px 5px #000}.interaction button{background:#dbc18e;color:#263939;font-size:12px;font-weight:bold;box-shadow:0 3px 0 #98805a}.interaction button:disabled{opacity:.48;cursor:default}kbd{font:inherit;border:1px solid #26393955;padding:2px 5px;margin-right:4px}#toast{position:absolute;left:50%;bottom:160px;transform:translate(-50%,8px);padding:12px 20px;background:#14292cee;border:1px solid #c9b28c50;border-radius:6px;font-size:12px;opacity:0;transition:.2s;pointer-events:none;text-align:center;max-width:90vw}#toast.visible{opacity:1;transform:translate(-50%,0)}#touch{display:none;position:absolute;left:28px;bottom:90px;text-align:center}#moveStick{position:relative;width:112px;height:112px;border-radius:50%;border:1px solid #f1dfb86b;background:#152f3955;box-shadow:inset 0 0 25px #18293355;touch-action:none}#stickThumb{position:absolute;left:35px;top:35px;width:40px;height:40px;background:#eee2c6b3;border:2px solid #f5ead466;border-radius:50%;box-shadow:0 3px 10px #0b1c2b55;pointer-events:none}.crosshair{position:absolute;inset:15px;border:1px dashed #fff3;border-radius:50%;pointer-events:none}#touch small{display:block;font-size:7px;letter-spacing:1px;margin-top:10px}.overlay{position:absolute;inset:0;display:flex;align-items:center;padding:70px;background:linear-gradient(90deg,#10292bef,#10292bba 36%,transparent 80%)}.intro-card{max-width:410px}.intro-card>small{font-size:9px;letter-spacing:3px;color:var(--gold)}h2{font-family:Georgia,serif;font-weight:400;font-size:58px;line-height:1.06;margin:22px 0;color:#f4e8ce}.intro-card p{max-width:330px;font-size:14px}.intro-card #start{display:flex;width:300px;justify-content:space-between;padding:17px 21px;background:#dfbd82;color:#243c3b;border:0;border-radius:3px;font-size:13px;margin:26px 0}.intro-bottom{display:flex;gap:20px;font-size:7px;letter-spacing:1.2px;opacity:.65}.intro-card .note{font-size:10px;margin-top:25px;opacity:.65}body:not(.playing) .objective,body:not(.playing) .interaction,body:not(.playing) #touch{display:none}body.playing #intro{display:none}dialog{width:min(440px,90vw);max-height:85vh;overflow:auto;border:1px solid #8d9b8377;border-radius:6px;background:#172d30;color:var(--paper);padding:30px}dialog::backdrop{background:#081b25ad}dialog small{font-size:9px;letter-spacing:2px;color:var(--gold)}dialog h2{font-size:35px;margin:22px 0}dialog p{font-size:12px}dialog a{font-size:12px;color:var(--gold)}#close{position:absolute;right:12px;top:12px}#resume{display:block;width:100%;margin-top:24px;background:#d7b478;color:#173232}.note{opacity:.7}.paused #pause{background:#a64836}
@media(any-pointer:coarse){body.playing #touch{display:block}.interaction kbd{display:none}}
@media(max-width:700px){body.playing #touch{display:block}header{top:max(18px,env(safe-area-inset-top));left:18px;right:18px}.brand{gap:9px}.brand b{font-size:17px;letter-spacing:2px}.brand small{font-size:6px;letter-spacing:1.5px}.seal{padding:5px 7px;font-size:13px;line-height:14px}.version{font-size:9px;margin:0}.tools{gap:6px}.tools button{width:32px;height:32px}.objective{top:86px;left:18px;width:225px;padding:12px 14px}.objective h1{font-size:18px;margin:9px 0}.objective p{font-size:10px;min-height:30px}.objective small{font-size:8px}.place{top:95px;right:18px}.place span{font-size:19px;writing-mode:vertical-rl;float:right}.place b,.place small{display:none}footer{left:18px;right:18px;bottom:max(16px,env(safe-area-inset-bottom));align-items:flex-end}footer>div{gap:6px;flex-wrap:wrap;max-width:80px;font-size:6px;line-height:1.7}footer nav{gap:4px}footer button{font-size:10px;padding:8px}footer a{font-size:8px;margin-left:4px}#mode{display:none}.interaction{right:18px;bottom:107px;flex-direction:column;align-items:flex-end;gap:8px}.interaction>span{max-width:150px;text-align:right;font-size:10px}.interaction button{min-height:46px;padding:12px 17px}#touch{left:18px;bottom:99px}.overlay{padding:30px;background:linear-gradient(0deg,#10292bf5,#10292bd6 50%,#10292b20)}.intro-card{margin-top:100px}.intro-card h2{font-size:45px}.intro-card p{font-size:12px;max-width:290px}.intro-card #start{width:280px}.intro-card>small{font-size:8px;letter-spacing:2px}#toast{bottom:235px;width:max-content;font-size:11px}}
@media(max-height:520px){.objective{top:78px;width:220px;padding:10px}.objective p{display:none}.place{display:none}.interaction{bottom:76px}#touch{bottom:65px;left:20px}#moveStick{width:90px;height:90px}#stickThumb{left:24px;top:24px}.overlay{padding:55px}.intro-card{margin-top:0}.intro-card h2{font-size:35px;margin:12px 0}.intro-card p{font-size:11px}.intro-card #start{margin:14px 0;padding:12px}.intro-bottom,.intro-card .note{display:none}footer{bottom:12px}#toast{bottom:160px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}