/* Reset & Base Settings */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}

/* D-Pad & Control Buttons Styling with Configurable Distance */
.dpad-grid {
  gap: var(--dpad-gap, 22px);
}

.ctrl-btn {
  width: var(--dpad-btn-size, 54px);
  height: var(--dpad-btn-size, 54px);
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  background-color: #1c2132;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.08s cubic-bezier(0.2, 0, 0, 1), background-color 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}

.ctrl-btn:active,
.ctrl-btn.is-active {
  background-color: #ff2a2a;
  border-color: #ff6b6b;
  transform: scale(0.91);
  box-shadow: 0 0 18px rgba(255, 42, 42, 0.6), inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.center-indicator {
  width: calc(var(--dpad-btn-size, 54px) * 0.7);
  height: calc(var(--dpad-btn-size, 54px) * 0.7);
}

/* Split mode buttons */
.split-btn {
  border-radius: 14px;
}

/* Canvas styling */
#game-canvas {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

/* Custom scrollbar for levels modal */
#levels-grid::-webkit-scrollbar {
  width: 5px;
}
#levels-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
#levels-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

/* Taunt banner animation glow */
.taunt-pulse {
  animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}