/* Default layout + visuals for <virtual-joystick>. Loaded separately from the
   JS module so the element is fully styled even before the module upgrades
   it. Games can override any rule in their own stylesheet — they cascade
   later and win on equal specificity. */

virtual-joystick {
  position: fixed;
  bottom: 24px;
  width: 168px;
  height: 168px;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 30;
  display: block;
}
virtual-joystick[side="left"]  { left: 16px; }
virtual-joystick[side="right"] { right: 16px; }

@media (orientation: portrait) {
  virtual-joystick                { width: 148px; height: 148px; bottom: 20px; }
  virtual-joystick[side="left"]   { left: 10px; }
  virtual-joystick[side="right"]  { right: 10px; }
}

virtual-joystick .vj-base {
  position: absolute;
  left: 50%; top: 50%;
  width: 120px; height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid oklch(0.22 0.02 60 / 0.35);
  background: oklch(0.98 0.005 70 / 0.12);
  transition: opacity .2s, border-color .2s;
  opacity: 0.9;
}
@media (orientation: portrait) {
  virtual-joystick .vj-base { width: 108px; height: 108px; }
}

virtual-joystick .vj-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin-left: -27px; margin-top: -27px;
  border-radius: 50%;
  background: oklch(0.22 0.02 60);
  box-shadow: 0 2px 10px oklch(0 0 0 / 0.25);
  transition: background .15s;
  will-change: transform;
}
@media (orientation: portrait) {
  virtual-joystick .vj-knob {
    width: 48px; height: 48px;
    margin-left: -24px; margin-top: -24px;
  }
}

virtual-joystick.active .vj-base {
  border-color: oklch(0.22 0.02 60 / 0.7);
  opacity: 1;
}