html,body{width:100%;height:100dvh!important;overflow:hidden;background:#080b12}
body{box-sizing:border-box;padding-top:52px!important;display:flex!important;align-items:center!important;justify-content:center!important}
#wrap{position:fixed!important;inset:52px 0 0!important;height:auto!important;display:flex!important;align-items:center!important;justify-content:center!important}
canvas{box-sizing:border-box;touch-action:none;max-width:100%;display:block}
#hint{display:none}
.game-nav{position:fixed;z-index:100;inset:0 0 auto;box-sizing:border-box;min-height:52px;display:flex;align-items:center;gap:18px;padding:10px 20px;background:#0e1421;border-bottom:1px solid #28354a;color:#ced8e8;font:14px/1.4 system-ui,sans-serif}
.game-nav a{color:#9cebd4;text-decoration:none;white-space:nowrap}
.game-nav a:hover{text-decoration:underline}
.game-nav span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.game-nav button,.game-help button{border:1px solid #3a5068;border-radius:6px;background:#172337;color:#e1eaf6;padding:6px 12px;font:inherit;cursor:pointer}
.game-nav :focus-visible,.game-help :focus-visible{outline:2px solid #9cebd4;outline-offset:3px}
.game-help{max-width:min(560px,calc(100vw - 48px));padding:28px;background:#101a2b;color:#e1eaf6;border:1px solid #486077;border-radius:12px;font:16px/1.7 system-ui,sans-serif}
.game-help::backdrop{background:#000b}
.game-help h2{margin-top:0;font-size:24px}
.game-help p{margin:16px 0}
.game-help form{text-align:right}
.game-mobile-note{position:fixed;bottom:5px;left:12px;right:12px;z-index:90;text-align:center;color:#aebfd4;font:12px/1.3 system-ui,sans-serif;pointer-events:none}
@media(max-width:600px){.game-nav{gap:10px;padding:10px;font-size:12px}.game-nav span{display:none}.game-nav button{padding:5px 8px}.game-nav a{flex:1}}

.mobile-game body{padding:0!important;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
.mobile-game .game-nav{height:calc(48px + env(safe-area-inset-top));min-height:48px;padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));gap:6px;font-size:13px;align-items:center}
.mobile-game .game-nav span{display:none}
.mobile-game .game-nav a{flex:1;padding:12px 4px}
.mobile-game .game-nav button{height:44px;min-width:44px;padding:6px;font-size:19px;touch-action:none}
.mobile-game .game-help{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto;padding:20px;user-select:text;-webkit-user-select:text;font-size:15px;line-height:1.55}
.mobile-game .game-help h2{font-size:20px}
.game-text{box-sizing:border-box;width:min(400px,calc(100vw - 24px));border:1px solid #486077;border-radius:12px;padding:20px;background:#101a2b;color:#e1eaf6;font:16px/1.5 system-ui,sans-serif}
.game-text::backdrop{background:#000c}
.game-text label{display:block;margin-bottom:16px}
.game-text input{box-sizing:border-box;width:100%;height:48px;margin-top:8px;padding:8px;border:1px solid #607993;border-radius:6px;background:#07121f;color:#fff;font:16px system-ui,sans-serif;user-select:text;-webkit-user-select:text}
.game-text button{min-height:44px;margin-right:8px;padding:8px 16px;border:1px solid #3a5068;border-radius:6px;background:#172337;color:#e1eaf6;font:inherit}
.mobile-frame{position:fixed;inset:calc(48px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 180px 24px;grid-template-areas:'stage stage' 'move actions' 'hint hint';gap:6px;background:#080b12;font:13px/1.3 system-ui,sans-serif;isolation:isolate}
.mobile-stage{grid-area:stage;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;touch-action:none;box-sizing:border-box;padding-top:24px}
.mobile-status{position:absolute;top:3px;left:4px;right:4px;z-index:2;min-height:18px;padding:2px 4px;border-radius:4px;background:#080b12dd;color:#dbe9ee;text-align:center;font:12px/1.3 system-ui,sans-serif;pointer-events:none;overflow-wrap:anywhere}
.mobile-stage canvas{max-width:none!important;flex:none;box-shadow:none!important;touch-action:none;will-change:transform}
.mobile-move{grid-area:move;display:flex;align-items:center;justify-content:center;min-width:0}
.mobile-actions{grid-area:actions;min-width:0;overflow-y:auto;padding:4px 6px 8px 0;overscroll-behavior:contain}
.mobile-primary,.mobile-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mobile-extras{margin-top:6px}
.mobile-extras[hidden]{display:none}
.touch-button{min-height:44px;min-width:44px;box-sizing:border-box;border:1px solid #455971;border-radius:12px;background:#172538;color:#e7effb;font:600 12px/1.15 system-ui,sans-serif;padding:7px 4px;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow-wrap:anywhere;hyphens:auto}
.mobile-extras .touch-button{touch-action:pan-y}
.touch-button.touch-active,.touch-button[aria-pressed=true]{background:#30635d;border-color:#a2ecda;color:#fff}
.touch-button:focus-visible{outline:2px solid #a2ecda;outline-offset:2px}
.touch-stick{width:108px;height:108px;position:relative;display:grid;place-items:center;border-radius:50%;border:2px solid #455971;background:#111d2c;touch-action:none;box-sizing:border-box}
.stick-arrows{text-align:center;color:#8197af;font-size:20px;line-height:1.4;pointer-events:none}
.stick-knob{position:absolute;left:30px;top:30px;width:44px;height:44px;border:1px solid #84aeac;border-radius:50%;background:#274e50c9;pointer-events:none}
.mobile-orientation{grid-area:hint;margin:0;text-align:center;color:#8ba0b9;font-size:11px}
.mobile-game:has(.no-stick) .mobile-frame{grid-template-columns:0 minmax(0,1fr)}
.mobile-game:has(.no-stick) .mobile-actions{padding-left:8px}
.mobile-game:has(.no-stick) .mobile-primary,.mobile-game:has(.no-stick) .mobile-extras{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(orientation:landscape){
 .mobile-frame{grid-template-columns:112px minmax(0,1fr) 148px;grid-template-rows:minmax(0,1fr);grid-template-areas:'move stage actions';gap:4px}
 .mobile-actions{padding-top:6px;padding-bottom:6px}
 .mobile-orientation{display:none}
 .mobile-game:has(.no-stick) .mobile-frame{grid-template-columns:0 minmax(0,1fr) 148px}
 .mobile-game:has(.no-stick) .mobile-primary,.mobile-game:has(.no-stick) .mobile-extras{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Readable phone layout: natural scene scale and native text panels. */
.mobile-frame{grid-template-rows:minmax(0,1fr) 156px 22px;font-size:16px}
.mobile-status{font-size:16px;line-height:1.35;top:2px;background:#101a2b;color:#f2f6ff}
.mobile-goal{position:absolute;inset:34px 4px auto;z-index:3;padding:6px 8px;box-sizing:border-box;background:#132433;color:#f2f6ff;font:16px/1.35 system-ui,sans-serif;max-height:48px;overflow-y:auto}
.mobile-goal[hidden]{display:none}.mobile-stage.has-goal{padding-top:84px}
.mobile-stage{padding-top:32px;padding-bottom:36px}
.touch-button{font-size:16px;line-height:1.2}
.mobile-reader{position:absolute;inset:34px 0 36px;z-index:10;overflow:auto;overscroll-behavior:contain;background:#101a2b;color:#f2f6ff;padding:16px;box-sizing:border-box;font:16px/1.5 system-ui,sans-serif;user-select:text;-webkit-user-select:text;touch-action:pan-y}
.mobile-reader[hidden]{display:none}
.mobile-reader h2{margin:0 0 16px;font:700 22px/1.25 system-ui,sans-serif}
.readable-choices{display:grid;gap:10px;margin-bottom:20px}
.readable-choices button,.readable-close{box-sizing:border-box;min-height:48px;width:100%;border:1px solid #7594a5;border-radius:10px;background:#21413f;color:#f2fffb;padding:12px;text-align:left;font:600 16px/1.4 system-ui,sans-serif;white-space:pre-wrap;touch-action:pan-y}
.readable-choices button:disabled{background:#1a2634;color:#a7b5c5}
.readable-copy p{margin:0 0 12px;overflow-wrap:anywhere;white-space:pre-wrap}
.readable-close{margin-top:12px;text-align:center}
.mobile-views{position:absolute;inset:auto 0 0;z-index:11;display:flex;gap:6px;overflow-x:auto;background:#0e1421;height:34px;overscroll-behavior:contain}
.mobile-views button{flex:0 0 auto;padding:4px 12px;background:#193044;border:1px solid #5a748a;border-radius:6px;color:#fff;font:16px/1.3 system-ui,sans-serif}
.mobile-frame:has(.mobile-reader:not([hidden])){grid-template-rows:minmax(0,1fr) 0 0;gap:0}
.mobile-frame:has(.mobile-reader:not([hidden])) .mobile-move,.mobile-frame:has(.mobile-reader:not([hidden])) .mobile-actions,.mobile-frame:has(.mobile-reader:not([hidden])) .mobile-orientation{display:none}
@media(orientation:landscape){
 .mobile-frame{grid-template-columns:112px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 68px;grid-template-areas:'stage stage' 'move actions';gap:4px}
 .mobile-game:has(.no-stick) .mobile-frame{grid-template-columns:0 minmax(0,1fr)}
 .mobile-primary,.mobile-game:has(.no-stick) .mobile-primary{display:flex;gap:6px;overflow-x:auto}
 .mobile-primary .touch-button{flex:0 0 auto;min-width:96px;max-width:140px;min-height:52px}
 .mobile-actions{overflow:visible;position:relative;padding:4px}
 .mobile-extras{position:absolute;bottom:68px;right:0;width:min(500px,calc(100vw - 20px));max-height:65dvh;overflow-y:auto;z-index:20;box-sizing:border-box;padding:12px;background:#101a2bf5;border:1px solid #567083;border-radius:12px}
 .touch-stick{width:62px;height:62px}.stick-arrows{font-size:14px;line-height:1}.stick-knob{width:30px;height:30px;left:14px;top:14px}
}