/* Shared viewport coordinates for Safari tabs and iPhone home-screen windows. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--ui-top:calc(var(--safe-top) + 10px);--ui-right:calc(var(--safe-right) + 12px);--ui-bottom:calc(var(--safe-bottom) + 14px);--ui-left:calc(var(--safe-left) + 12px)}
html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%}#app{position:relative;height:var(--app-height,100vh);height:100dvh}
#toast{display:flex;align-items:flex-start;gap:10px}#toast-copy{min-width:0}#toast-dismiss{flex-shrink:0;border:0;background:transparent;color:inherit;font-size:21px;padding:0 4px;line-height:24px;pointer-events:auto}
#hint-button.has-note::after{content:'';position:absolute;right:3px;top:3px;width:7px;height:7px;background:#e4a24e;border:1px solid #fff3d1;border-radius:50%}#hint-button{position:relative}
.recent-notices{border-bottom:1px solid #d6d5bf;padding:12px 0;color:#567565}.recent-notices summary{cursor:pointer;font-size:13px}.recent-notices p{font-size:12px!important;line-height:1.65!important;margin:12px 0!important}
body[data-notice="event"] #toast,body[data-notice="event"] #achievement-toast,body[data-notice="achievement"] #toast,body[data-notice="toast"] #achievement-toast,body[data-notice="none"] #toast,body[data-notice="none"] #achievement-toast{visibility:hidden}
body.touch{--notice-top:calc(var(--ui-top) + 116px)}
body.touch #rotate-notice{display:none!important}
body.touch button:hover{transform:none}body.touch .icon-button{backdrop-filter:none}
body.touch .objective{top:var(--ui-top);left:var(--ui-left);right:calc(var(--ui-right) + 123px);width:auto;min-height:54px;max-width:none;padding:7px 10px;gap:0;border-radius:13px;box-shadow:none}
body.touch .objective>div{padding:0;min-width:0}body.touch .objective-icon,body.touch #sub-objective{display:none}
body.touch .objective small{display:block;font-size:9px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.touch .objective strong{font-size:12px;line-height:1.45;letter-spacing:0;margin:2px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.touch .hud-right{top:var(--ui-top);left:auto;right:var(--ui-right);gap:6px;align-items:center}
body.touch .hud-right #secret-count{display:none}body.touch .hud-right #timer{display:block;font-size:12px;letter-spacing:0;padding:0 9px;min-width:57px;height:44px;line-height:44px;border-radius:12px}
body.touch .hud-right #pause-button{width:44px;height:44px;border-radius:12px;font-size:21px;box-shadow:none}
body.touch .case-actions{top:calc(var(--ui-top) + 62px);left:var(--ui-left);right:var(--ui-right);justify-content:flex-end;gap:6px;align-items:center}
body.touch .case-actions button{height:44px;min-height:44px;padding:6px 9px;border-radius:12px;font-size:10px;gap:5px;box-shadow:0 2px 0 #244b3230;white-space:nowrap}
body.touch .case-actions .ui-icon{height:17px;width:17px}
body.touch .case-actions #camera-toggle{position:static;min-width:94px;padding:6px 10px;justify-content:center}
body.touch .case-actions #recover-button{width:44px;font-size:0;padding:10px;justify-content:center}
body.touch .case-actions #camera-toggle .camera-swap{font-size:13px}body.touch #camera-toggle kbd{display:none}
body.touch #toast,body.touch #achievement-toast,body.touch #event-banner{top:var(--notice-top);left:50%;right:auto;bottom:auto;width:max-content;max-width:calc(100% - var(--safe-left) - var(--safe-right) - 30px);transform:translateX(-50%);border-radius:12px;box-shadow:0 3px 12px #24493624}
body.touch #toast{font-size:11px;line-height:1.6;letter-spacing:0;padding:8px 10px;text-align:left;max-width:min(350px,calc(100% - var(--safe-left) - var(--safe-right) - 30px));gap:5px}
body.touch #toast:not([data-manual="true"]) #toast-copy{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.touch #toast[data-manual="true"]{width:350px;max-height:calc(var(--app-height,100dvh)*.32);overflow:auto;touch-action:pan-y;pointer-events:auto}
body.touch #toast-dismiss{min-width:30px;min-height:30px;line-height:30px;margin:-3px -5px -3px 0}
body.touch #achievement-toast{padding:7px 12px 7px 8px;gap:8px;border-width:1px;max-width:min(300px,calc(100% - var(--safe-left) - var(--safe-right) - 24px));transition:opacity .2s}
body.touch .achievement-medallion{height:30px;width:30px;font-size:18px;border-width:2px;box-shadow:none}
body.touch .achievement-copy{gap:2px}body.touch .achievement-copy strong{font-size:12px;letter-spacing:.3px}body.touch .achievement-copy small{font-size:8px;letter-spacing:1px}
body.touch .achievement-copy span{display:none}body.touch #achievement-toast .spark{left:22px;top:25px}
body.touch #event-banner{padding:7px 12px;text-align:left;font-size:11px;max-width:min(340px,calc(100% - var(--safe-left) - var(--safe-right) - 24px))}
body.touch #event-detail{font-size:10px;letter-spacing:0;line-height:1.45}
body.touch #chapter-arrival{display:none}body.touch .fx-wind{animation:none}body.touch #screen-fx{contain:strict}
body.touch #look-zone{top:0;left:39%;right:0;bottom:0;width:auto;touch-action:none}
body.touch #joystick{left:calc(var(--ui-left) + 8px);bottom:calc(var(--ui-bottom) + 14px);width:102px;height:102px;touch-action:none;box-shadow:inset 0 0 0 5px #fff2d30c}
body.touch #joystick-knob{left:26px;top:26px;width:46px;height:46px;will-change:transform}body.touch #joystick::before{display:none}
body.touch #touch-run{left:calc(var(--ui-left) + 13px);right:auto;bottom:calc(var(--ui-bottom) + 128px);height:44px;min-height:44px;padding:8px 13px;border-radius:14px;font-size:11px;box-shadow:none;touch-action:none}
body.touch .touch-actions{right:var(--ui-right);bottom:calc(var(--ui-bottom) + 14px);gap:10px;touch-action:none}
body.touch .touch-actions button{width:54px;height:56px;border-radius:18px;box-shadow:0 3px 0 #1d534336;touch-action:none}
body.touch .touch-actions #touch-jump{height:68px;width:68px;border-radius:23px;touch-action:none}
body.touch .touch-actions button .ui-icon{height:24px;width:24px}body.touch .touch-actions button small{font-size:10px}
body.touch #touch-wave,body.touch #touch-throw{right:var(--ui-right);left:auto;bottom:calc(var(--ui-bottom) + 97px);height:44px;min-height:44px;min-width:54px;padding:8px 12px;border-radius:14px;box-shadow:none;touch-action:none}
body.touch #interaction-prompt{top:auto;left:auto;right:var(--ui-right);bottom:calc(var(--ui-bottom) + 152px);transform:none;padding:6px 9px;font-size:10px;line-height:1.5;letter-spacing:0;max-width:180px;white-space:normal;border-radius:10px;box-shadow:none}
body.touch #interaction-prompt kbd{display:none}body.touch #held-item,body.touch #checkpoint-note,body.touch #glider-indicator,body.touch #context-controls{display:none!important}
body.touch #route-compass{left:50%;right:auto;bottom:var(--ui-bottom);transform:translateX(-50%);gap:5px;opacity:.8}body.touch #route-compass small{display:none}body.touch #route-compass span{font-size:9px;letter-spacing:0}body.touch #route-compass b{font-size:22px}
body.touch #vehicle-indicator{right:calc(var(--ui-right) + 75px);bottom:calc(var(--ui-bottom) + 99px);font-size:9px}body.touch #vehicle-indicator b{font-size:18px}
body.touch #modal{max-width:calc(100% - var(--safe-left) - var(--safe-right) - 24px);max-height:calc(var(--app-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 24px);margin:auto;padding:28px 21px;overscroll-behavior:contain}
body.touch #modal .close-button{min-height:44px;min-width:44px;top:8px;right:8px}
body.touch #story-panel{bottom:var(--ui-bottom);width:calc(100% - var(--safe-left) - var(--safe-right) - 24px);max-width:760px;max-height:calc(var(--app-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 126px);padding:16px;overflow:auto;touch-action:pan-y;box-shadow:0 6px 22px #183b2e30}
body.touch #story-text{max-height:calc(var(--app-height,100dvh)*.32);overscroll-behavior:contain}body.touch #story-next{min-height:44px}
body.touch .menu-top{top:var(--ui-top);left:var(--ui-left);right:var(--ui-right)}body.touch .menu-bottom{bottom:var(--ui-bottom);left:var(--ui-left);right:var(--ui-right)}
body.touch .complete-card{max-height:calc(var(--app-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 24px);overflow:auto;touch-action:pan-y}
@media(orientation:landscape) and (min-width:700px){body.touch{--notice-top:calc(var(--ui-top) + 62px)}body.touch .objective{width:calc((100% - var(--safe-left) - var(--safe-right))* .34);right:auto;min-height:44px;padding:5px 9px}body.touch .objective strong{font-size:11px;-webkit-line-clamp:1}body.touch .objective small{font-size:8px}body.touch .case-actions{top:var(--ui-top);left:auto;right:calc(var(--ui-right) + 116px);gap:5px}body.touch .case-actions button{padding:6px;gap:4px;font-size:0;min-width:44px}body.touch .case-actions #camera-toggle{font-size:10px;min-width:90px}body.touch .case-actions .ui-icon{width:18px;height:18px}body.touch .hud-right{gap:5px}}
@media(max-height:430px){body.touch #joystick{width:94px;height:94px;bottom:calc(var(--ui-bottom) + 4px)}body.touch #joystick-knob{left:22px;top:22px}body.touch #touch-run{bottom:calc(var(--ui-bottom) + 108px)}body.touch .touch-actions{bottom:calc(var(--ui-bottom) + 4px)}body.touch #touch-wave,body.touch #touch-throw{bottom:calc(var(--ui-bottom) + 84px)}body.touch #interaction-prompt{bottom:calc(var(--ui-bottom) + 135px);max-width:170px}body.touch #story-panel{grid-template-columns:68px minmax(0,1fr);gap:0 12px;padding:12px;max-height:calc(var(--app-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 70px)}body.touch #story-portrait{width:68px;height:83px}body.touch #story-portrait .portrait-sprite{transform:scale(.55)}body.touch #story-portrait img{width:68px;height:83px}body.touch #story-text{font-size:13px;line-height:1.65;margin:6px 0 10px;max-height:calc(var(--app-height,100dvh)*.28)}}

/* Right-thumb action cluster; the left thumb only owns the movement stick. */
body.touch .touch-actions{display:block;right:var(--ui-right);bottom:calc(var(--ui-bottom) + 14px);width:144px;height:144px;pointer-events:none}
body.touch .touch-actions #touch-jump{position:absolute;right:64px;bottom:64px}
body.touch .touch-actions #touch-interact{position:absolute;right:78px;bottom:0}
body.touch #touch-run{left:auto;right:var(--ui-right);bottom:calc(var(--ui-bottom) + 14px);height:52px;width:64px;min-height:52px;justify-content:center;flex-direction:column;gap:3px;padding:5px;border-radius:18px;font-size:10px}
body.touch #touch-run .ui-icon{width:21px;height:21px}
body.touch #touch-wave,body.touch #touch-throw{right:var(--ui-right);bottom:calc(var(--ui-bottom) + 112px);width:54px;min-width:54px;padding:6px;justify-content:center}
body.touch #interaction-prompt{bottom:calc(var(--ui-bottom) + 174px)}
body.touch #vehicle-indicator{right:calc(var(--ui-right) + 144px);bottom:calc(var(--ui-bottom) + 24px)}