/* Keep legacy zoom handlers available without leaving a visible/focusable box. */
.map-controls{display:none!important}
#dragon-navigation.touch-navigation #focus-dragon{margin-bottom:4px}
#dragon-navigation #dragon-joystick{position:relative;display:grid;place-items:center;width:calc(var(--touch-wheel-size,204px)*.7);height:calc(var(--touch-wheel-size,204px)*.7);box-sizing:border-box;min-width:0;min-height:0;padding:0;border:2px solid #ae9c70;border-radius:50%;background:radial-gradient(circle,#314b3ee8 0 48%,#172e26d9 50%);box-shadow:0 3px 10px #0005,inset 0 0 0 5px #203c2e99;color:#f0dbab;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
#dragon-navigation #dragon-joystick[hidden]{display:none}
#dragon-joystick::before{content:"";position:absolute;inset:7px;border:1px dashed #dac08a77;border-radius:50%;pointer-events:none}
#dragon-joystick-thumb{position:relative;display:grid;place-items:center;width:32%;height:32%;border:1px solid #f0dbab;border-radius:50%;background:#516344;box-shadow:0 2px 4px #0008;pointer-events:none;will-change:transform}
#dragon-joystick-thumb svg{width:55%;height:55%;pointer-events:none}
#dragon-navigation #dragon-joystick.steering{border-color:#f3d690;cursor:grabbing}
#dragon-navigation #dragon-joystick:focus-visible{outline:3px solid #ffe4a3;outline-offset:3px}
#dragon-navigation.touch-navigation{gap:5px;right:max(12px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom))}
#dragon-navigation.touch-navigation #lair-compass{max-width:82px;min-height:24px;font-size:10px}

/* Match the raised wheel on narrow screens, clearing the learned-ability bar. */
@media(max-width:600px){#dragon-navigation.touch-navigation{bottom:max(82px,calc(env(safe-area-inset-bottom) + 70px))}}

/* A second thumb owns its button gesture, independently of the held stick. */
#dragon-action-dock.joystick-actions button,#learned-abilities.joystick-actions button{touch-action:none}
/* The joystick is 70% of the wheel; both retain their narrow-screen scaling. */
@media(max-width:440px){
  .world{--touch-wheel-size:163.2px}
  .world:has(.touch-navigation) #dragon-action-dock{transform:scale(.8);transform-origin:bottom left}
}
@media(max-width:360px){
  .world{--touch-wheel-size:142.8px}
  .world:has(.touch-navigation) #dragon-action-dock{transform:scale(.7)}
}