/* ImageGen rail and thumb assets reproduce art/joystick-reference-v1.png. */
#joystick{width:clamp(260px,43vw,460px);height:auto;aspect-ratio:3.4;border:0;border-radius:0;background:transparent url('/art/joystick-rail-v1.png') center/100% auto no-repeat;margin:20px 8px;filter:drop-shadow(0 8px 9px #0006);touch-action:none;flex-shrink:1;min-width:240px}
#joystick .stick-ring{display:none}
#stick{width:24%;height:auto;aspect-ratio:1;border:0;border-radius:0;background:transparent url('/art/joystick-thumb-v1.png') center/contain no-repeat;box-shadow:none;transition:filter .1s;will-change:transform;pointer-events:none}
#joystick[data-direction='left'] #stick,#joystick[data-direction='right'] #stick{filter:brightness(1.15) drop-shadow(0 0 6px #73cdb866)}
#joystick small{bottom:-22px;color:#a5c2c9;letter-spacing:3px;font-size:9px}
.keyboard-option{display:flex;align-items:center;gap:10px;font-size:12px;color:#b9cbd1;margin-top:16px;min-height:32px;cursor:pointer}.keyboard-option input{width:18px;height:18px;accent-color:var(--mint)}
@media(max-width:800px) and (orientation:landscape){.pad-body{gap:12px}#joystick{width:43vw;min-width:230px}#actions{grid-template-columns:repeat(2,minmax(72px,115px));grid-template-rows:repeat(2,minmax(64px,82px));gap:10px}}
@media(orientation:portrait){#joystick{width:min(340px,90vw);height:auto;aspect-ratio:3.4;min-width:0}.pad-body{gap:65px}}