/* Mobile controls v3 - Virtual Joystick */
#mobile-controls {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  padding: 0 24px;
  z-index: 1000;
  justify-content: space-between;
  align-items: flex-end;
}

/* Joystick */
.joystick-zone {
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.joystick-base {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid rgba(242, 180, 0, 0.5);
  background: rgba(242, 180, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.joystick-thumb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(242, 180, 0, 0.6);
  border: 3px solid #F2B400;
  box-shadow: 0 0 12px #F2B400aa;
  transition: none;
  will-change: transform;
}

/* Action buttons */
.action-btns {
  display: flex;
  align-items: center;
  gap: 14px;
}

#mobile-controls .btn {
  border-radius: 50%;
  border: 3px solid;
  font-family: "Press Start 2P", monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  outline: none;
}

.btn-jump {
  width: 90px;
  height: 90px;
  font-size: 11px;
  background: rgba(46, 204, 113, 0.3);
  border-color: #2ECC71 !important;
  color: #2ECC71;
}

.btn-run {
  width: 68px;
  height: 68px;
  font-size: 11px;
  background: rgba(78, 201, 240, 0.3);
  border-color: #4EC9F0 !important;
  color: #4EC9F0;
}

.btn-jump.active {
  background: rgba(46, 204, 113, 0.7) !important;
  transform: scale(0.92);
  box-shadow: 0 0 20px #2ECC71;
}

.btn-run.active {
  background: rgba(78, 201, 240, 0.7) !important;
  transform: scale(0.92);
  box-shadow: 0 0 20px #4EC9F0;
}

/* Show on touch devices */
@media (hover: none) and (pointer: coarse) {
  #mobile-controls {
    display: flex !important;
  }
  
  canvas {
    width: calc(100vw - 10px) !important;
    height: auto !important;
    border-width: 2px !important;
  }
  
  #promeck-header {
    padding: 3px 0 1px 0 !important;
  }
  
  #promeck-logo {
    max-width: 220px !important;
  }
  
  #promeck-header .tagline {
    font-size: 7px !important;
    margin: 1px 0 !important;
  }
  
  body {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }
}