#game-joystick {
  position: fixed;
  left: 28px;
  bottom: 28px;
  z-index: 5000;
  width: 156px;
  height: 156px;
  user-select: none;
  touch-action: none;
}

#game-joystick.is-disabled { opacity: .28; filter: grayscale(1); pointer-events: none; }

.joystick-ring {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(148, 177, 194, .24);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 32, 43, .76), rgba(4, 9, 14, .88));
  box-shadow: 0 18px 55px rgba(0, 0, 0, .58), inset 0 0 30px rgba(108, 230, 243, .05);
  backdrop-filter: blur(14px);
}

#game-joystick button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(143, 180, 196, .24);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(37, 50, 62, .96), rgba(10, 16, 23, .98));
  color: #d9e5ea;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
  font-size: 15px;
  cursor: pointer;
  touch-action: none;
}

#game-joystick button:active { color: #72ecf5; border-color: #57dce9; transform: scale(.94); }
.joy-up { left: 55px; top: 8px; }
.joy-left { left: 8px; top: 55px; }
.joy-right { right: 8px; top: 55px; }
.joy-down { left: 55px; bottom: 8px; }
.joy-center { position: absolute; left: 61px; top: 61px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #40515d, #111a21); box-shadow: 0 0 18px rgba(75, 224, 237, .12); }

@media (max-width: 760px) {
  body { width: 100vw; height: 100dvh; overflow: hidden; }
  #premium-game, canvas#game { max-width: 100vw; max-height: 100dvh; }
  #game-joystick { left: 14px; bottom: max(14px, env(safe-area-inset-bottom)); width: 138px; height: 138px; }
  .joy-up { left: 47px; top: 5px; }.joy-left { left: 5px; top: 47px; }.joy-right { right: 5px; top: 47px; }.joy-down { left: 47px; bottom: 5px; }.joy-center { left: 53px; top: 53px; width: 32px; height: 32px; }
  #premium-hud { top: max(8px, env(safe-area-inset-top)); width: calc(100vw - 16px); min-width: 0; height: auto; padding: 7px 10px; border-radius: 20px; }
  #premium-hud .hud-row { gap: 4px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  #premium-hud .hud-block { flex: 0 0 auto; padding: 0 6px; height: 38px; }
  #premium-hud .hud-icon { font-size: 15px; }
  #premium-hud .hud-block b { font-size: 12px; }
  #premium-hud .hud-actions { flex: 0 0 auto; }
  .game-result { padding: 14px; }
  .game-result__card { max-height: calc(100dvh - 28px); overflow-y: auto; }
}

@media (min-width: 761px) and (pointer: fine) {
  #game-joystick { opacity: .68; transform: scale(.86); transform-origin: left bottom; transition: opacity .2s ease, transform .2s ease; }
  #game-joystick:hover { opacity: 1; transform: scale(1); }
}