/* The game surface owns touch gestures; browser selection/scroll must not compete. */
html,body{margin:0;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game-shell,#game-shell *,dialog,dialog *,#rotate-screen,#rotate-screen *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game-shell{touch-action:none;width:min(1480px,calc((100svh - 132px)*16/9 + 60px),100%)}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none}
#stage{max-height:none}.objective{font-size:14px}.ability>span:last-child{font-size:14px}.help-strip{font-size:13px}
#fullscreen-btn,.mobile-setting{display:none}.touch-controls{display:none}
#rotate-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%,#256d65,#092e39 75%);padding:28px;text-align:center;touch-action:none}
.rotate-card{max-width:440px}.rotate-card h2{font-size:26px;line-height:1.5}.rotate-card p{color:#cfecdc;line-height:1.9}.rotate-phone{font-size:80px;line-height:1.1;color:#ceffa8}.rotate-card .primary-btn{min-height:60px;font-size:17px}.rotate-card .muted{font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.form-grid button{min-height:112px;border:1px solid #9bdbc55c;background:#2c635f;border-radius:18px;color:#eaffec;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:10px}
.form-grid button>span{font-size:31px;line-height:1}.form-grid b{font-size:16px}.form-grid small{font-size:11px}.form-grid button.active{background:#cffbb4;color:#153e3e}.form-grid button:disabled,.color-grid button:disabled{opacity:.4}
.color-grid{display:flex;gap:10px;margin-top:14px}.color-grid button{flex:1;min-height:56px;border-radius:14px;background:#caffc4;color:#163e38;font-weight:800}.color-grid [data-color=rose]{background:#ffc2d5}.color-grid [data-color=sun]{background:#ffe59b}.color-grid button.active{outline:3px solid #faffed;outline-offset:3px}
.segmented{display:flex;gap:5px}.segmented button{padding:12px 14px;min-height:48px;border-radius:10px;background:#ffffff12;color:#d2e7df;font-size:13px}.segmented button[aria-pressed=true]{background:#cef7b4;color:#193d3c;font-weight:800}
#form-dialog{width:min(680px,calc(100vw - 32px))}
body.mobile-controls{position:fixed;inset:0;overflow:hidden;touch-action:none;background:#0b3941}
body.mobile-controls #game-shell{position:fixed;inset:0 auto auto 0;margin:0;padding:0;width:var(--view-width,100vw);height:var(--view-height,100dvh);min-height:0;display:block;transform-origin:top left;transform:translate(var(--view-left,0px),var(--view-top,0px)) scale(var(--view-inverse-scale,1))}
body.mobile-controls #stage{width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;border-radius:0;overflow:hidden;box-shadow:none;background:#175754}
body.mobile-controls canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;touch-action:none}
body.mobile-controls .topbar{position:fixed;z-index:9;top:max(8px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));height:48px;pointer-events:none;margin:0;justify-content:flex-end}
body.mobile-controls .topbar .brand{display:none}body.mobile-controls .top-actions{gap:8px}body.mobile-controls .icon-btn{width:48px;min-width:48px;height:48px;border-radius:14px;background:#123e47ba;border:1px solid #daffe447;font-size:23px;pointer-events:auto}
body.mobile-controls #sound-btn{display:inline-flex;font-size:20px}body.mobile-controls #sound-label{font-size:9px}body.mobile-controls #fullscreen-btn{display:inline-flex}
body.mobile-controls .hud{inset:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) auto max(18px,env(safe-area-inset-left));height:45px;display:block}
body.mobile-controls .eyebrow{display:none}body.mobile-controls .room-title{font-size:19px;margin:0;max-width:45%}body.mobile-controls .vitals{position:absolute;top:0;left:44%;text-align:left}body.mobile-controls #hearts{font-size:18px;letter-spacing:1px;white-space:nowrap}body.mobile-controls .collection{font-size:11px;justify-content:start;margin-top:1px;gap:6px}
body.mobile-controls .objective{left:max(18px,env(safe-area-inset-left));top:40px;max-width:45%;font-size:11px;padding:6px 10px;background:#123e47a8;backdrop-filter:none;line-height:1.3}
body.mobile-controls .help-strip,body.mobile-controls .ability-bar{display:none}
body.mobile-controls .screen{border-radius:0}.start-copy{position:relative}
body.mobile-controls .start-copy{padding:18px 5%;max-width:62%;width:62%}body.mobile-controls .chapter-tag{font-size:11px}body.mobile-controls .start-copy h1{font-size:clamp(35px,10vh,65px);margin:12px 0}body.mobile-controls .start-copy p{font-size:14px;margin:12px 0;line-height:1.6}body.mobile-controls .start-note{display:none}
body.mobile-controls .primary-btn{min-height:54px;padding:13px 20px;font-size:16px}body.mobile-controls .text-btn{min-height:44px;padding:10px 4px}body.mobile-controls .title-stamp{right:25px;bottom:25px;font-size:11px}body.mobile-controls .title-stamp b{font-size:15px}
body.mobile-controls .touch-controls{--pad-w:clamp(176px,calc(var(--view-width)*0.25),220px);--pad-h:clamp(94px,calc(var(--view-height)*0.27),112px);--jump:clamp(100px,calc(var(--view-height)*0.29),126px);--action:clamp(86px,calc(var(--view-height)*0.24),104px);--charge:clamp(76px,calc(var(--view-height)*0.21),90px);--edge-l:max(18px,env(safe-area-inset-left));--edge-r:max(18px,env(safe-area-inset-right));--edge-b:max(12px,env(safe-area-inset-bottom));display:block;position:absolute;inset:0;padding:0;z-index:4;pointer-events:none;touch-action:none;background:linear-gradient(0deg,#072f405c,transparent 33%)}
body.mobile-controls[data-control-size=large] .touch-controls{--pad-w:clamp(160px,calc(var(--view-width)*0.22),196px);--pad-h:clamp(84px,calc(var(--view-height)*0.24),96px);--jump:clamp(90px,calc(var(--view-height)*0.26),112px);--action:clamp(78px,calc(var(--view-height)*0.21),92px);--charge:clamp(70px,calc(var(--view-height)*0.19),80px)}
body.mobile-controls .touch-controls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border:2px solid #d6ffe772;background:#133f49aa;color:#efffeb;box-shadow:0 5px 0 #052e485c,0 4px 18px #03293430;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;margin:0;padding:0;font-weight:900;transform:none;filter:none}
body.mobile-controls .touch-move{position:absolute;left:var(--edge-l);bottom:var(--edge-b);width:var(--pad-w);height:var(--pad-h);display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px;border-radius:30px;background:#17445270;pointer-events:auto;touch-action:none;border:1px solid #e5ffe83a}
body.mobile-controls .touch-move button{width:100%;height:100%;border-radius:24px;font-size:32px;border-color:#e6ffe644;background:#8ebdad3b}.touch-move span{pointer-events:none}
body.mobile-controls .touch-act{position:absolute;right:var(--edge-r);bottom:var(--edge-b);width:calc(var(--jump) + var(--action) + 14px);height:calc(var(--jump) + var(--charge) + 12px);display:block;pointer-events:none}
body.mobile-controls .touch-act button span{font-size:27px;line-height:1.1}body.mobile-controls .touch-act button b{font-size:15px}body.mobile-controls .touch-act button small{font-size:9px;font-weight:600;color:#d2eadc}
body.mobile-controls .touch-act .touch-jump{position:absolute;right:0;bottom:0;width:var(--jump);height:var(--jump);border-radius:50%;background:#d2ffb6bd;color:#173e3e;border-color:#ecffcdcc;box-shadow:0 6px 0 #6c956e66,0 4px 18px #03293430}body.mobile-controls .touch-jump span{font-size:36px!important}body.mobile-controls .touch-jump b{font-size:17px!important}
body.mobile-controls .touch-act .touch-action{position:absolute;left:0;bottom:5px;width:var(--action);height:var(--action);border-radius:50%;background:#f2d18f8c;border-color:#fff1c496;color:#173f42}
body.mobile-controls .touch-act .touch-charge{position:absolute;left:14px;bottom:calc(var(--action) + 17px);width:var(--charge);height:var(--charge);border-radius:25px}
body.mobile-controls .touch-controls .touch-form{position:absolute;left:50%;bottom:var(--edge-b);transform:translateX(-50%);width:98px;height:66px;border-radius:20px;font-size:12px;background:#1a4b57bf}body.mobile-controls .touch-form>span:first-child{font-size:28px;line-height:1}
body.mobile-controls .touch-controls .pressed{background:#fff0b8f2!important;color:#153e44!important;border-color:#fff6d5!important;box-shadow:inset 0 3px 12px #866c5038!important}
body.mobile-controls .touch-legend{position:absolute;bottom:84px;left:50%;transform:translateX(-50%);font-size:10px;color:#d2e4d3a1;white-space:nowrap}
body.mobile-controls .context-hint{bottom:110px;max-width:37%;background:#123e47c2;font-size:12px;padding:7px 12px;border-radius:12px;z-index:3}
body.mobile-controls .toast{top:22%;max-width:65%;font-size:14px;padding:12px 20px;border-radius:15px}
body.mobile-controls .mobile-setting{display:flex}body.mobile-controls p.mobile-setting{display:block}
body.mobile-controls dialog{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:20px;max-width:calc(100vw - 32px)}body.mobile-controls dialog h2{font-size:23px;margin:5px 0 12px}body.mobile-controls .dialog-heading{margin-bottom:8px}body.mobile-controls .setting{padding:12px 0}
body.mobile-controls #map-grid{gap:7px;margin:8px 0}.mobile-controls .map-room{min-height:52px;padding:7px;font-size:11px}.mobile-controls .map-room b{font-size:13px}
body.mobile-controls .finish-card{padding:22px;margin:0}.mobile-controls .finish-card h2{font-size:30px}.mobile-controls .finish-card p{font-size:14px}
body.mobile-controls.title-open .touch-controls,body.mobile-controls.ui-paused .touch-controls{visibility:hidden}
body.mobile-controls[data-control-side=left] .touch-move{left:auto;right:var(--edge-r)}body.mobile-controls[data-control-side=left] .touch-act{right:auto;left:var(--edge-l)}
body.portrait-blocked #game-shell,body.portrait-blocked dialog{visibility:hidden}body.portrait-blocked #rotate-screen{visibility:visible}
@media(max-height:350px) and (orientation:landscape){body.mobile-controls .start-copy h1{font-size:33px;margin:8px 0}body.mobile-controls .start-copy p{font-size:12px;margin:8px 0}.form-grid button{min-height:88px}.form-grid small{font-size:10px}.color-grid button{min-height:48px}.mobile-controls #form-dialog .muted{display:none}}

body.mobile-controls .touch-charge.unavailable{opacity:.38}
body.mobile-controls #rotate-screen{inset:0 auto auto 0;width:var(--view-width,100vw);height:var(--view-height,100dvh);transform-origin:top left;transform:translate(var(--view-left,0px),var(--view-top,0px)) scale(var(--view-inverse-scale,1))}
body.mobile-controls dialog,body.mobile-controls #form-dialog{position:fixed;inset:var(--view-center-y) auto auto var(--view-center-x);margin:0;width:min(680px,calc(var(--view-width) - 32px));max-width:calc(var(--view-width) - 32px);max-height:calc(var(--view-height) - 24px);transform:translate(-50%,-50%) scale(var(--view-inverse-scale,1));transform-origin:center}
@media(max-width:740px){body.mobile-controls .vitals{left:0;top:63px;display:flex;align-items:center;gap:9px}body.mobile-controls .collection{margin:0}body.mobile-controls .room-title{font-size:17px;max-width:57%}body.mobile-controls .context-hint{max-width:calc(100vw - 450px);font-size:11px;padding:7px 9px}}
