/* Controls share the game screen. The map keeps its existing square, central viewport. */
.touch-joystick{display:none;position:absolute;z-index:4;left:max(14px,var(--safe-left));bottom:max(14px,var(--safe-bottom));width:112px;height:112px;border:1px solid #91c9bc80;border-radius:50%;background:radial-gradient(circle,#24484b9c 0 48%,#102c32c9 49% 66%,#65948a35 67% 69%,#0c2429ab 70%);box-shadow:inset 0 0 18px #020b1077,0 3px 14px #0004;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:auto;contain:layout paint}
.has-touch-controls.touch-capable[data-touch-mode=joystick] .touch-joystick:not([hidden]){display:block}
.joystick-thumb{position:absolute;left:calc(50% - 23px);top:calc(50% - 23px);width:46px;height:46px;border:1px solid #b9e8d5a6;border-radius:50%;background:radial-gradient(circle at 35% 26%,#54827c,#274c50 60%,#19343b);box-shadow:inset 0 1px 3px #e2f4dc36,0 3px 7px #0008;pointer-events:none;will-change:transform}
.joystick-thumb::after{content:'';position:absolute;inset:17px;border:1px solid #cee9d68c;border-radius:50%;background:#b4d8c32e}
.joystick-axis{position:absolute;background:#99cfbb24;pointer-events:none}.axis-horizontal{left:12px;right:12px;top:50%;height:1px}.axis-vertical{top:12px;bottom:12px;left:50%;width:1px}.touch-joystick.held{border-color:#c2ead5bb;background-color:#2d55564d}.touch-joystick.held .joystick-thumb{border-color:#d6f2dd}
.has-touch-controls[data-touch-mode=joystick] #touch,.has-touch-controls[data-touch-mode=swipe] #touch{display:none!important}
#app:has(#modal:not([hidden])) .touch-joystick,#app[data-screen=home] .touch-joystick{display:none!important}
.has-touch-controls #touch button{touch-action:none}
@media(max-height:300px){.touch-joystick{width:96px;height:96px}}
html.compact .touch-joystick{width:96px;height:96px}
@media(prefers-reduced-motion:reduce){.touch-joystick,.joystick-thumb{transition:none!important}}