/* Controls are scaled to landscape height; the scene keeps visual priority. */
.game-touch-shell{--hud-ink:#f2eddf;--hud-edge:#b9c4bd8f;--hud-accent:#df8c53;--hud-ground:#152228ba;--hud-side:max(24px,env(safe-area-inset-right));--thumb-line:max(clamp(62px,22dvh,100px),env(safe-area-inset-bottom));--hud-bottom:calc(var(--thumb-line) - var(--primary-size)/2);--stick-size:clamp(68px,21dvh,88px);--primary-size:clamp(62px,19dvh,80px);--secondary-size:clamp(48px,14dvh,58px);position:fixed;inset:0;z-index:9000;pointer-events:none;color:var(--hud-ink);font:14px/1.4 GameWenSans,'Microsoft YaHei',sans-serif;user-select:none;-webkit-user-select:none}
.game-touch-shell[data-kind="zhuyin"]{--hud-ink:#e5d7b9;--hud-edge:#b7a27a99;--hud-accent:#b5c5a0;--hud-ground:#1b201cbd}
.game-touch-shell[hidden],.game-touch-shell [hidden]{display:none!important}
.game-touch-shell button,.game-stick,.game-look{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}
.game-touch-shell button{color:var(--hud-ink);cursor:pointer;font:inherit}
.game-touch-shell button:focus-visible{outline:3px solid #e6efe2;outline-offset:3px}
.game-touch-tools{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));display:flex;gap:8px}
.game-touch-tools button{min-width:48px;min-height:44px;padding:8px 12px;border:1px solid #81969180;border-radius:7px;background:#101b20dc;font-size:12px}
.game-touch-pads,.game-touch-actions{position:absolute;inset:0;pointer-events:none}
.game-stick{position:absolute;left:max(28px,env(safe-area-inset-left));bottom:calc(var(--thumb-line) - var(--stick-size)/2);width:var(--stick-size);height:var(--stick-size);border:1px solid var(--hud-edge);border-radius:50%;background:#17272345;display:grid;place-items:center;box-shadow:inset 0 1px 2px #e5eed128,0 3px 8px #060c1140}
.game-stick:before{content:'';position:absolute;inset:5px;border:1px solid #b7c2b330;border-radius:50%;pointer-events:none}
.game-stick-knob{width:36%;height:36%;border-radius:50%;border:1px solid #c7c8b882;background:#60706eb3;box-shadow:inset 0 1px 3px #e7e9d536,0 2px 4px #060c1140;pointer-events:none;z-index:1}
[data-kind="zhuyin"] .game-stick-knob{background:#444b42be;border-color:#b7a27a99}
.stick-direction{position:absolute;width:0;height:0;opacity:.65;pointer-events:none;border:3px solid transparent}
.stick-n{top:9px;border-bottom-color:var(--hud-ink)}.stick-s{bottom:9px;border-top-color:var(--hud-ink)}.stick-e{right:9px;border-left-color:var(--hud-ink)}.stick-w{left:9px;border-right-color:var(--hud-ink)}
.game-stick-label{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font-size:11px;color:#e5eadbe0;text-shadow:0 1px 3px #071011}
.game-touch-shell .game-action{position:absolute;right:var(--hud-side);bottom:var(--hud-bottom);width:var(--secondary-size);height:var(--secondary-size);min-width:44px;min-height:44px;padding:5px 2px;border:1px solid var(--hud-edge);border-radius:50%;background:var(--hud-ground);box-shadow:inset 0 2px 5px #b3c6c023,0 3px 7px #04090e55;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;text-shadow:0 1px 2px #080d0f}
.game-action:before{content:'';position:absolute;inset:3px;border:1px solid #aebcb838;border-radius:50%;pointer-events:none}
.game-action-icon{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.game-action-icon .icon-solid{fill:currentColor;stroke-width:1}.game-action-icon .icon-surface{fill:#9aa9a21f}.game-action-icon .icon-inset{stroke:#2b342dd4;stroke-width:1.3}.game-action-icon .icon-mesh{stroke-width:.85}.game-action-icon .icon-motion{stroke-width:2;opacity:.7}
.game-action span{font-size:11px;font-weight:600;line-height:1.15}.game-action small{font-size:9px;color:#e7ebdfdc;line-height:1.15;white-space:nowrap}
.game-touch-shell .game-primary-action{width:var(--primary-size);height:var(--primary-size);border-color:#d1d4bcac;background:#233139c7;box-shadow:inset 0 2px 6px #dce8dc28,0 4px 9px #04090e55}
.game-primary-action:before{border-color:#c9d0bb59;inset:4px}
.game-primary-action:after{content:'';position:absolute;inset:0;border:2px solid transparent;border-right-color:var(--hud-accent);border-radius:50%;clip-path:polygon(50% 0,100% 0,100% 36%,50% 36%);pointer-events:none;opacity:.7}
.game-primary-action .game-action-icon{width:34px;height:34px}.game-primary-action span{font-size:13px}
[data-kind="zhuyin"] .game-primary-action{background:#232c22c2;border-color:#c1cbaa9e}
.game-touch-shell .action-soft,.game-touch-shell .action-jump{right:calc(var(--hud-side) + var(--primary-size) + 12px);bottom:var(--hud-bottom)}
.game-touch-shell .action-smash,.game-touch-shell .action-interact{right:calc(var(--hud-side) + 12px);bottom:calc(var(--hud-bottom) + var(--primary-size) + 12px)}
.game-touch-shell .action-run{left:calc(max(28px,env(safe-area-inset-left)) + (var(--stick-size) - var(--secondary-size))/2);right:auto;bottom:calc(var(--thumb-line) + var(--stick-size)/2 + 16px)}
.game-touch-shell button.is-held{background:#647d738e;border-color:#e5ead7;color:#fffdf2;box-shadow:inset 0 3px 7px #08171177,0 1px 3px #03090d33}.game-touch-shell button.is-held:before{border-color:#e0e7d385}
.game-look{position:absolute;right:calc(var(--hud-side) + var(--primary-size) + var(--secondary-size) + 30px);top:23%;bottom:22%;width:28%;display:flex;align-items:flex-start;justify-content:flex-end;touch-action:none}
.game-look span{font-size:11px;color:#f2e6cdf0;text-shadow:0 1px 4px #000;pointer-events:none}.game-look.is-held span{visibility:hidden}
.game-orientation{position:absolute;inset:0;pointer-events:auto;background:#09141bf8;display:grid;place-content:center;justify-items:center;gap:18px;padding:28px;text-align:center;overflow:auto}
.game-orientation svg{width:70px;height:70px;stroke:#b5ddd7;fill:none;stroke-width:1.8}.game-orientation h2{font:600 28px/1.3 GameWenSans,'Microsoft YaHei',sans-serif;margin:0}.game-orientation p{max-width:30ch;font-size:16px;line-height:1.7;color:#c3d9df;margin:0}.game-orientation .game-rotate-status{font-size:13px}.game-orientation button{min-height:48px;padding:12px 22px;border:1px solid #b9d6dc;background:#1a333f;border-radius:8px}
body.game-playing-landscape{overflow:hidden;background:#050a0e}body.game-playing-landscape canvas{touch-action:none}
body.game-playing-landscape header,body.game-playing-landscape footer{display:none}body.game-playing-landscape main{padding:0}
body.game-playing-landscape .stage{position:fixed;inset:0;margin:auto;width:min(100vw,calc(100dvh*16/9));height:min(100dvh,calc(100vw*9/16));max-height:none;aspect-ratio:16/9}
body.game-playing-landscape #canvas{position:fixed;inset:0;margin:auto;width:min(100vw,calc(100dvh*16/9));height:min(100dvh,calc(100vw*9/16))}
/* Desktop navigation sits above the native HUD, outside the 16:9 game canvas. */
body.game-playing-landscape:not(.game-mobile-selected) .stage,body.game-playing-landscape:not(.game-mobile-selected) #canvas{inset:60px 0 0;width:min(100vw,calc((100dvh - 60px)*16/9));height:min(calc(100dvh - 60px),calc(100vw*9/16))}
body.game-playing-landscape .portfolio-return{z-index:10001;left:max(8px,env(safe-area-inset-left));right:auto;bottom:auto;top:max(8px,env(safe-area-inset-top));width:max-content;transform:none;min-height:44px;padding:8px 12px;box-sizing:border-box;font-size:12px}

body[data-game-kind="zhuyin"] .game-touch-tools button,body.game-playing-landscape[data-game-kind="zhuyin"] .portfolio-return,body[data-game-kind="zhuyin"] .quality-toolbar{background:#151e19dd;color:#e7dabe;border:1px solid #a08e6d80;border-radius:3px}
body[data-game-kind="zhuyin"] .quality-toolbar select{background:#151e19;color:#e7dabe;border-color:#a08e6d80}
@media(max-height:340px) and (orientation:landscape){.game-touch-shell{--hud-side:max(18px,env(safe-area-inset-right));--thumb-line:max(clamp(62px,22dvh,100px),env(safe-area-inset-bottom))}.game-action-icon{width:22px;height:22px}.game-primary-action .game-action-icon{width:29px;height:29px}.game-action span{font-size:10px}.game-primary-action span{font-size:12px}.game-action small{font-size:8px}.game-stick-label{font-size:10px}}
@media(prefers-reduced-motion:no-preference){.game-action{transition:background-color 80ms,border-color 80ms}}
@media(forced-colors:active){.game-touch-shell .game-action,.game-stick,.game-stick-knob{border-color:ButtonText;background:Canvas;color:ButtonText}.game-action:before,.game-primary-action:after{display:none}}

/* Keep silhouettes readable at phone resolution, matching the ivory mockup icons. */
.game-action-icon{flex:none;stroke-width:2.2;filter:drop-shadow(0 1px 1px #0008)}
.game-primary-action .game-action-icon{width:36px;height:36px}
.game-touch-shell .game-action{padding:2px;gap:0}
.game-touch-shell .game-action span{font-size:11px;line-height:14px}
.game-touch-shell .game-action small{font-size:9px;line-height:11px}
.game-action-icon .icon-mesh{stroke-width:1.15}

body.game-playing-landscape.game-mobile-selected .stage,body.game-playing-landscape.game-mobile-selected #canvas{inset:0;margin:0;width:100vw;height:100dvh;aspect-ratio:auto}

.game-look{width:18%}