body.mobile-mode #page-flex{position:fixed;inset:0;display:block;height:100%;width:100%}
body.mobile-mode #game-container{position:absolute;inset:0;display:block;overflow:hidden}
body.mobile-mode #game-container canvas{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important}
body.mobile-mode #mobile-controls{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;display:block!important;pointer-events:none;z-index:100010}
body.mobile-mode #mobile-controls .mc-col,body.mobile-mode #mobile-controls .mc-row{display:contents!important}
body.mobile-mode #mobile-controls .mc-btn{position:absolute;box-sizing:border-box;pointer-events:auto;background:rgba(12,25,21,.28);border:2px solid #fff7;color:#fff;opacity:.65;font: bold 11px sans-serif;touch-action:none;box-shadow:0 2px 8px #0005;grid-area:auto}
body.mobile-mode #mobile-controls .mc-btn.pressed{opacity:1;background:#d4b66b66}
#touch-tools{position:fixed;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));z-index:100020;display:flex;gap:8px}
#touch-tools button,#touch-editor button{background:#10251ddd;color:#ffe7a3;border:1px solid #bda461;padding:10px;min-height:40px;font:12px sans-serif}
#touch-editor{position:fixed;z-index:100030;left:50%;top:8px;transform:translateX(-50%);max-width:90vw;width:460px;box-sizing:border-box;background:#07120ff2;border:1px solid #bda461;padding:12px;color:#fff;font:13px sans-serif;text-align:center}
#touch-editor p{margin:4px 0 10px}#touch-editor input{width:130px;vertical-align:middle}
body.editing-touch #mobile-controls{z-index:100025;background:#0003}
body.editing-touch #mobile-controls .mc-btn{opacity:1;border-style:dashed}
body.editing-touch #mobile-controls .mc-btn.selected-control{border-color:#ffd45d;box-shadow:0 0 16px #ffd45d88}

#touch-editor select{background:#13271e;color:#fff;padding:5px;max-width:150px;border:1px solid #bda461}
#touch-editor label{display:inline-block;margin:4px 8px}
body.mobile-mode #game-pause{z-index:100021}
body.editing-touch #touch-tools,body.editing-touch #pause-touch-controls{visibility:hidden}

#touch-tools{left:50%;transform:translateX(-50%)}

/* The game surface never pans or zooms through native browser gestures. */
html,body.mobile-mode{overscroll-behavior:none}
body.mobile-mode,body.mobile-mode #page-flex,body.mobile-mode #game-container,
body.mobile-mode #game-container canvas,body.mobile-mode #mobile-controls{
 touch-action:none!important;-webkit-text-size-adjust:100%;overscroll-behavior:none;
}
body.mobile-mode button,body.mobile-mode a,body.mobile-mode input,
body.mobile-mode select,body.mobile-mode label{touch-action:manipulation}
body.mobile-mode #mobile-controls .mc-btn{touch-action:none!important}

/* Controls use the entire visible viewport, independently of the canvas. */
body.mobile-mode>#mobile-controls{
 position:fixed!important;right:auto!important;bottom:auto!important;margin:0!important;padding:0!important;
 max-width:none!important;max-height:none!important;overflow:visible!important;
 contain:none!important;clip:auto!important;clip-path:none!important;transform:none!important;
}
body.mobile-mode>#mobile-controls>.mc-btn{margin:0!important;overflow:visible}
body.editing-touch>#mobile-controls{background:transparent}

/* Beta UX: touch controls only during play, plus a portrait hint. */
body.mobile-mode:not(.playing):not(.editing-touch) #mobile-controls{display:none!important}
#rotate-hint{display:none}
body.portrait:not(.playing) #rotate-hint{display:flex}
#rotate-hint{position:fixed;left:12px;right:12px;bottom:12px;z-index:100050;background:rgba(11,21,17,.96);border:1px solid #d5b76e;color:#f4eddb;padding:12px 14px;font:13px/1.4 Arial,Helvetica,sans-serif;align-items:center;gap:12px;box-shadow:0 8px 30px rgba(0,0,0,.6)}
#rotate-hint span{flex:1}
#rotate-hint button{margin-left:auto;background:#d5b76e;color:#09120f;border:0;padding:9px 14px;font:12px Arial,Helvetica,sans-serif;cursor:pointer;white-space:nowrap}
@media(min-width:801px){#rotate-hint{display:none!important}}