/* The transparent surface consumes touch before SDL can synthesize mouse input. */
#jk2-mobile-controls{position:absolute;inset:0;z-index:5;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:none;color:#fff;font:12px/1.2 system-ui,sans-serif}
body.playing #jk2-mobile-controls.jk2-touch-ready{display:block}
.jk2-touch-surface{position:absolute;inset:0;pointer-events:auto;touch-action:none}
.jk2-touch-look-hint{position:absolute;right:20%;top:44%;color:#ffffff70;text-shadow:0 1px 3px #000;pointer-events:none}
#jk2-touch-stick{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));width:136px;height:136px;border:1px solid #ffffff50;border-radius:50%;background:#17202b48;box-shadow:inset 0 0 25px #0004;pointer-events:auto;touch-action:none}
.jk2-touch-thumb{position:absolute;left:calc(50% - 25px);top:calc(50% - 25px);width:50px;height:50px;border:1px solid #ffffff80;border-radius:50%;background:#d4dfed4d;box-shadow:0 2px 9px #0005;pointer-events:none}
.jk2-touch-move-hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:#ffffff80;pointer-events:none}
.jk2-touch-toolbar{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;gap:8px}
.jk2-touch-tool{min-height:44px;padding:8px 12px;border:1px solid #ffffff55;border-radius:7px;background:#101723b8;color:#fff;pointer-events:auto;touch-action:none;font:12px/1.2 system-ui,sans-serif}
.jk2-touch-tool:active,.jk2-touch-action.is-held{background:#b9a472a8;border-color:#f4dca8}
.jk2-touch-actions{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,58px);gap:9px}
.jk2-touch-action{width:58px;height:58px;padding:3px;border:1px solid #ffffff70;border-radius:50%;background:#17202b82;color:#fff;pointer-events:auto;touch-action:none;font:12px/1.2 system-ui,sans-serif;text-shadow:0 1px 2px #000}
.jk2-touch-attack{background:#b9a4726b;border-color:#f4dca8b0;font-weight:600}
.jk2-touch-quick{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:calc(max(28px,env(safe-area-inset-bottom)) + 150px);display:flex;gap:8px}
.jk2-touch-rotate{display:none;position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 55px);left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;padding:8px 12px;border-radius:5px;background:#101723d9;color:#e1d7bf;text-align:center;pointer-events:none}
.jk2-touch-panels #jk2-touch-stick,.jk2-touch-panels .jk2-touch-actions,.jk2-touch-panels .jk2-touch-quick,.jk2-touch-panels .jk2-touch-look-hint{display:none}
body.jk2-touch-controls.playing{overflow:hidden;overscroll-behavior:none}
body.jk2-touch-controls #hint{bottom:auto;top:max(12px,env(safe-area-inset-top));left:12px;transform:none;max-width:calc(100vw - 215px);padding:7px 9px;font-size:11px;white-space:normal}
body.jk2-touch-controls.playing .game-log{bottom:max(4px,env(safe-area-inset-bottom));font-size:10px;z-index:8}
@media(orientation:portrait){.jk2-touch-rotate{display:block}.jk2-touch-look-hint{right:25%;top:48%}#jk2-touch-stick{left:14px;bottom:30px;width:118px;height:118px}.jk2-touch-actions{right:12px;bottom:30px;grid-template-columns:repeat(2,54px);gap:8px}.jk2-touch-action{width:54px;height:54px}.jk2-touch-quick{left:14px;bottom:160px}}
@media(orientation:landscape) and (max-height:390px){#jk2-touch-stick{width:116px;height:116px;bottom:20px}.jk2-touch-quick{bottom:147px}.jk2-touch-actions{grid-template-columns:repeat(3,50px);gap:7px;bottom:18px}.jk2-touch-action{width:50px;height:50px}.jk2-touch-look-hint{top:38%}}

@media(pointer:coarse){body.jk2-touch-controls input,body.jk2-touch-controls textarea{font-size:16px}}