// ============================================
// ARCADE GAMES LIST PAGE
// Full arcade cabinet with CRT screen, joystick, and buttons
// ============================================

.games-arcade-page {
  min-height: 100vh;
  padding: 2rem;
  background: #1a1a1a;
  position: relative;

  @include media-down(lg) {
    padding: 0;
  }

  .desk {
    z-index: 1;
    position: fixed;
    height: 35%;
  }

  .arcade-neon {
    pointer-events: none;
    .neon-sign {
      right: 0;
      left: auto;
    }
  }

  .arcade-lamp {
    position: absolute;
    bottom: 30%;
    left: 10%;
    z-index: 2;
    pointer-events: none;

    .lava-lamp-container {
      width: 180px;
      height: 400px;

      .lamp-text-shadow,
      .lamp-text {
        display: none;
      }
    }
  }
}

// ============================================
// ARCADE CONTAINER
// ============================================

.arcade-container {
  max-width: 1000px;
  margin: 0 auto;
  perspective: 1500px;
  z-index: 5;
  position: relative;

  @include media-down(lg) {
    perspective: none;
  }

  // ============================================
  // ARCADE CABINET BODY
  // ============================================

  .arcade-cabinet {
    background:
      linear-gradient(
        135deg,
        rgba(255, 0, 255, 0.1) 0%,
        rgba(0, 255, 255, 0.1) 50%,
        rgba(255, 255, 0, 0.1) 100%
      ),
      repeating-linear-gradient(90deg, #1a1a2e 0px, #2a2a4e 2px, #1a1a2e 4px),
      linear-gradient(180deg, #2a2a4e 0%, #1a1a2e 100%);
    border: 6px solid #5a5a8e;
    border-top: none;
    border-bottom: none;
    position: relative;
    padding-top: 30px;
    box-shadow:
      0 0 30px rgba(138, 43, 226, 0.3),
      0 0 60px rgba(0, 255, 255, 0.2),
      inset 0 0 100px rgba(138, 43, 226, 0.1);

    @include media-down(lg) {
      border-left: none;
      border-right: none;
    }
  }

  // ============================================
  // MARQUEE (Top of Cabinet)
  // ============================================

  .arcade-marquee {
    position: relative;
    background:
      linear-gradient(
        135deg,
        #ff00ff 0%,
        #00ffff 25%,
        #ffff00 50%,
        #ff00ff 75%,
        #00ffff 100%
      ),
      linear-gradient(180deg, #1a1a2e 0%, #0f0f1e 100%);
    background-size:
      400% 100%,
      100% 100%;
    background-blend-mode: overlay, normal;
    border: 6px solid #bcffff;
    border-radius: 20px;
    margin-bottom: -20px;
    z-index: 9;
    padding: 30px 20px;
    text-align: center;
    box-shadow:
      0 0 20px rgba(0, 255, 255, 0.9),
      0 0 40px rgba(0, 255, 255, 0.7),
      0 0 60px rgba(255, 0, 255, 0.6),
      0 0 80px rgba(255, 255, 0, 0.5),
      0 0 100px rgba(255, 0, 255, 0.4),
      inset 0 2px 8px rgba(255, 255, 255, 0.3),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5);
    animation: marqueeGradient 8s linear infinite;

    @include media-down(lg) {
      border-radius: 0;
      padding: 20px 10px;
    }

    // Sound toggle in marquee
    .marquee-sound-toggle {
      position: absolute;
      top: 50%;
      right: 80px;
      transform: translateY(-50%);
      text-align: center;
      z-index: 10;

      @include media-down(lg) {
        right: 50px;
      }
    }

    .marquee-content {
      font-family: "Pixelify Sans", monospace;

      @include media-down(lg) {
        font-size: 0.5rem;
      }
    }

    .arcade-title-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .arcade-title {
      margin: 0;
      color: #fff;
      font-weight: bold;
      animation: arcadeTitleGlow 2s ease-in-out infinite alternate;
    }

    .arcade-subtitle {
      font-size: 1rem;
      font-weight: bold;
      letter-spacing: 3px;
      color: #ffff00;
      text-shadow:
        0 0 10px rgba(255, 255, 0, 1),
        0 0 20px rgba(255, 255, 0, 0.8),
        0 0 30px rgba(255, 165, 0, 0.6);
      animation: subtitlePulse 1.5s ease-in-out infinite;

      @include media-down(lg) {
        font-size: 0.7rem;
        letter-spacing: 2px;
      }
    }
  }

  .marquee-light {
    position: absolute;
    top: 50%;
    width: 24px;
    height: 24px;
    background: radial-gradient(circle at 30% 30%, #fff, #ff00ff);
    border-radius: 50%;
    box-shadow:
      0 0 20px rgba(255, 0, 255, 1),
      0 0 40px rgba(255, 0, 255, 0.8),
      0 0 60px rgba(0, 255, 255, 0.6),
      inset 0 0 10px rgba(255, 255, 255, 0.5);
    animation: marqueeLightCycle 2s ease-in-out infinite;

    &.marquee-light-left {
      left: 20px;
    }

    &.marquee-light-right {
      right: 20px;
      animation-delay: 1s;
    }

    @include media-down(lg) {
      width: 16px;
      height: 16px;

      &.marquee-light-left {
        left: 10px;
      }
      &.marquee-light-right {
        right: 10px;
      }
    }
  }

  @keyframes marqueeGradient {
    0% {
      background-position:
        0% 50%,
        0% 0%;
    }
    100% {
      background-position:
        400% 50%,
        0% 0%;
    }
  }

  @keyframes marqueeLightCycle {
    0%,
    100% {
      background: radial-gradient(circle at 30% 30%, #fff, #ff00ff);
      box-shadow:
        0 0 20px rgba(255, 0, 255, 1),
        0 0 40px rgba(255, 0, 255, 0.8),
        0 0 60px rgba(0, 255, 255, 0.6);
    }
    33% {
      background: radial-gradient(circle at 30% 30%, #fff, #00ffff);
      box-shadow:
        0 0 20px rgba(0, 255, 255, 1),
        0 0 40px rgba(0, 255, 255, 0.8),
        0 0 60px rgba(255, 255, 0, 0.6);
    }
    66% {
      background: radial-gradient(circle at 30% 30%, #fff, #ffff00);
      box-shadow:
        0 0 20px rgba(255, 255, 0, 1),
        0 0 40px rgba(255, 255, 0, 0.8),
        0 0 60px rgba(255, 0, 255, 0.6);
    }
  }

  @keyframes subtitlePulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.7;
      transform: scale(1.05);
    }
  }

  @keyframes arcadeTitleGlow {
    0% {
      text-shadow:
        0 0 10px rgba(0, 255, 255, 1),
        0 0 20px rgba(0, 255, 255, 0.8),
        0 0 30px rgba(255, 0, 255, 0.6),
        0 0 40px rgba(255, 0, 255, 0.4),
        2px 2px 0px rgba(255, 0, 255, 0.8),
        -2px -2px 0px rgba(0, 255, 255, 0.8);
      filter: drop-shadow(0 0 20px rgba(255, 255, 0, 0.5));
    }
    100% {
      text-shadow:
        0 0 15px rgba(0, 255, 255, 1),
        0 0 25px rgba(0, 255, 255, 0.9),
        0 0 35px rgba(255, 0, 255, 0.7),
        0 0 50px rgba(255, 0, 255, 0.5),
        2px 2px 0px rgba(255, 0, 255, 0.9),
        -2px -2px 0px rgba(0, 255, 255, 0.9);
      filter: drop-shadow(0 0 30px rgba(255, 255, 0, 0.7));
    }
  }

  // ============================================
  // CRT SCREEN AREA
  // ============================================

  .arcade-screen-bezel {
    background:
      linear-gradient(
        135deg,
        rgba(255, 0, 255, 0.2) 0%,
        rgba(0, 255, 255, 0.2) 100%
      ),
      linear-gradient(145deg, #3a3a5e, #2a2a4e);
    padding: 30px;
    margin: 30px;
    margin-top: 0px;
    border-radius: 12px;
    border: 3px solid #5a5a8e;
    box-shadow:
      0 0 20px rgba(138, 43, 226, 0.3),
      0 0 40px rgba(0, 255, 255, 0.2),
      inset 0 4px 8px rgba(0, 0, 0, 0.6),
      inset 0 -2px 4px rgba(138, 43, 226, 0.3);
    position: relative;

    @include media-down(lg) {
      margin: 15px;
      padding: 20px;
      border: 0;
      padding: 0;
      margin: 0;
    }

    &::before {
      content: "RITUAL ARCADE";
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      color: #7dffff;
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 3px;
      text-shadow:
        0 0 5px rgba(0, 255, 255, 0.8),
        0 0 10px rgba(0, 255, 255, 0.5);

      @include media-down(lg) {
        display: none;
      }
    }
  }

  .arcade-screen {
    width: 100%;
    min-height: 500px;
    background:
      radial-gradient(ellipse at center, rgba(138, 43, 226, 0.05) 0%, #000 60%),
      #000;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    border: 2px solid #1a1a3e;
    box-shadow:
      0 0 30px rgba(138, 43, 226, 0.4),
      0 0 60px rgba(0, 255, 255, 0.2),
      inset 0 0 100px rgba(138, 43, 226, 0.15),
      inset 0 0 80px rgba(0, 255, 255, 0.1),
      inset 0 0 40px rgba(255, 0, 255, 0.08),
      inset 3px 3px 8px rgba(138, 43, 226, 0.2),
      inset -3px -3px 8px rgba(0, 0, 0, 0.8);

    @include media-down(lg) {
      min-height: 400px;
      border-radius: 0;
    }

    &.crt {
      position: relative;
    }

    &::before {
      content: "";
      position: absolute;
      top: -5%;
      left: -5%;
      right: -5%;
      bottom: -5%;
      background:
        radial-gradient(
          ellipse at 30% 30%,
          rgba(255, 255, 255, 0.15) 0%,
          transparent 40%
        ),
        radial-gradient(
          ellipse at center,
          transparent 0%,
          rgba(0, 0, 0, 0.3) 100%
        );
      pointer-events: none;
      z-index: 3;
      border-radius: 8px;
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
      );
      pointer-events: none;
      z-index: 2;
      animation: scanline 8s linear infinite;
    }

    .screen-content {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 30px;
      color: #7dffff;
      z-index: 1;
      font-family: monospace;
      text-shadow:
        0 0 10px rgba(0, 255, 255, 0.8),
        0 0 20px rgba(138, 43, 226, 0.4);

      @include media-down(lg) {
        padding: 20px;
      }

      // ============================================
      // GAMES GRID
      // ============================================

      .games-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;

        @include media-down(lg) {
          padding-top: 10px;
          grid-template-columns: 1fr;
          gap: 15px;
          max-height: auto;
          overflow-y: auto;
          @include scrollbar-custom(#7dffff, 6px);
        }
      }

      .game-card {
        background: linear-gradient(
          135deg,
          rgba(138, 43, 226, 0.08) 0%,
          rgba(0, 255, 255, 0.08) 100%
        );
        border: 2px solid rgba(0, 255, 255, 0.3);
        border-radius: 8px;
        padding: 15px;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        box-shadow: 0 0 10px rgba(138, 43, 226, 0.2);

        @include enhance-3d-transform;

        &:hover,
        &.selected {
          background: linear-gradient(
            135deg,
            rgba(138, 43, 226, 0.15) 0%,
            rgba(0, 255, 255, 0.15) 100%
          );
          border-color: rgba(0, 255, 255, 0.8);
          box-shadow:
            0 0 20px rgba(0, 255, 255, 0.5),
            0 0 40px rgba(138, 43, 226, 0.3),
            inset 0 0 20px rgba(0, 255, 255, 0.1);
          transform: translateY(-2px);

          @include media-down(lg) {
            box-shadow: 0 0;
            animation: none;
          }
        }

        &.selected {
          animation: card-pulse 1s ease-in-out infinite alternate;

          .game-logo {
            filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8))
              drop-shadow(0 0 20px rgba(138, 43, 226, 0.6));
          }

          .game-title {
            color: #ffff00;
            text-shadow:
              0 0 10px rgba(255, 255, 0, 1),
              0 0 20px rgba(255, 0, 255, 0.6);
          }
        }

        // Unreleased games styling
        &.unreleased {
          opacity: 0.5;
          cursor: not-allowed;
          filter: grayscale(0.7);

          &:hover,
          &.selected {
            background: linear-gradient(
              135deg,
              rgba(138, 43, 226, 0.08) 0%,
              rgba(0, 255, 255, 0.08) 100%
            );
            border-color: rgba(0, 255, 255, 0.3);
            box-shadow: 0 0 10px rgba(138, 43, 226, 0.2);
            transform: none;
            animation: none;
          }

          .game-logo {
            opacity: 0.7;
            filter: grayscale(0.7);
          }
        }

        // ============================================
        // GAME SUMMARY CARD
        // ============================================

        .game-summary {
          display: flex;
          flex-direction: column;
          gap: 15px;
          position: relative;

          .game-link {
            display: contents;
            text-decoration: none;
          }

          .coming-soon-label {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: "Pixelify Sans", monospace;
            font-size: 1.2rem;
            font-weight: bold;
            color: #ff0;
            text-shadow:
              0 0 10px rgba(255, 255, 0, 0.8),
              0 0 20px rgba(255, 255, 0, 0.5),
              2px 2px 0px rgba(0, 0, 0, 0.8);
            letter-spacing: 2px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.7);
            padding: 8px 16px;
            border-radius: 4px;
            border: 2px solid rgba(255, 255, 0, 0.6);
            animation: coming-soon-pulse 2s ease-in-out infinite;
          }
        }

        .game-thumbnail {
          flex-shrink: 0;
          width: 80px;
          height: 80px;
          border-radius: 6px;
          overflow: hidden;
          background: rgba(0, 0, 0, 0.5);
          border: 1px solid rgba(0, 255, 255, 0.4);
          box-shadow:
            0 0 10px rgba(138, 43, 226, 0.3),
            inset 0 0 10px rgba(0, 255, 255, 0.1);

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: contrast(1.2) brightness(0.95) saturate(1.2);
          }
        }

        .game-thumbnail-placeholder {
          display: flex;
          align-items: center;
          justify-content: center;

          .placeholder-icon {
            font-size: 2rem;
            opacity: 0.5;
          }
        }

        .game-logo {
          flex-shrink: 0;
          width: 100%;
          border-radius: 6px;
          overflow: visible;
          background: #7dffff;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10px;
          -webkit-mask-size: contain;
          -webkit-mask-repeat: no-repeat;
          -webkit-mask-position: center;
          mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            opacity: 0;
          }
        }

        .game-logo-placeholder {
          display: flex;
          align-items: center;
          justify-content: center;

          .placeholder-icon {
            font-size: 2rem;
            opacity: 0.5;
          }
        }

        .game-info {
          flex: 1;
          min-width: 0;
        }

        .game-title {
          font-size: 1.2rem;
          margin: 0;
          color: #7dffff;
          font-weight: bold;
          text-shadow:
            0 0 5px rgba(0, 255, 255, 0.8),
            0 0 10px rgba(138, 43, 226, 0.4);

          a {
            color: #7dffff;
            text-decoration: none;
            font-weight: bold;
            text-shadow:
              0 0 5px rgba(0, 255, 255, 0.8),
              0 0 10px rgba(138, 43, 226, 0.4);

            &:hover {
              color: #ffff00;
              text-shadow:
                0 0 10px rgba(255, 255, 0, 1),
                0 0 20px rgba(255, 0, 255, 0.6);
            }
          }
        }

        .game-description {
          font-size: 0.85rem;
          margin: 0 0 8px 0;
          line-height: 1.4;
          opacity: 0.9;
        }

        .game-meta {
          font-size: 0.75rem;

          .game-genre {
            display: inline-block;
            padding: 3px 8px;
            background: linear-gradient(
              135deg,
              rgba(138, 43, 226, 0.3) 0%,
              rgba(0, 255, 255, 0.3) 100%
            );
            border: 1px solid rgba(0, 255, 255, 0.6);
            border-radius: 3px;
            box-shadow: 0 0 5px rgba(138, 43, 226, 0.4);
          }
        }
      }

      @keyframes card-pulse {
        0% {
          box-shadow:
            0 0 20px rgba(0, 255, 255, 0.5),
            0 0 40px rgba(138, 43, 226, 0.3);
        }
        100% {
          box-shadow:
            0 0 30px rgba(0, 255, 255, 0.7),
            0 0 60px rgba(138, 43, 226, 0.5),
            0 0 80px rgba(255, 0, 255, 0.3);
        }
      }

      @keyframes coming-soon-pulse {
        0%,
        100% {
          opacity: 0.9;
          transform: translate(-50%, -50%) scale(1);
        }
        50% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.05);
        }
      }
    }
  }
}

// ============================================
// INSERT COIN MESSAGE
// ============================================

.insert-coin-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-family: "Pixelify Sans", monospace;
  color: #ff0;
  text-shadow:
    0 0 10px rgba(255, 255, 0, 0.8),
    0 0 20px rgba(255, 255, 0, 0.5);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;

  &.visible {
    opacity: 1;
  }

  .blinking {
    animation: blink 1.5s ease-in-out infinite;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

// ============================================
// CONTROL PANEL
// ============================================

.control-panel {
  position: relative;

  // 3D perspective transform
  transform-style: preserve-3d;
  perspective: 1250px;

  width: 113%;
  transform: translateX(-50%);
  margin-left: 50.25%;
  margin-top: -50px;

  @include media-down(lg) {
    padding: 30px 20px;
    transform: none;
  }
}

.control-panel-surface {
  background:
    linear-gradient(
      135deg,
      rgba(138, 43, 226, 0.15) 0%,
      rgba(0, 255, 255, 0.15) 50%,
      rgba(255, 0, 255, 0.15) 100%
    ),
    repeating-linear-gradient(
      45deg,
      #2a2a4e 0px,
      #2a2a4e 10px,
      #1a1a3e 10px,
      #1a1a3e 20px
    ),
    linear-gradient(180deg, #2a2a4e 0%, #1a1a3e 100%);
  height: 225px;
  padding: 40px;
  position: relative;
  z-index: 2; // Above the joystick

  // 3D perspective transform - subtle tilt toward viewer
  transform: rotateX(40deg);
  transform-origin: bottom center;
  transform-style: preserve-3d;

  // Enhanced 3D beveled edges with neon glow
  box-shadow:
    // Neon glow
    0 0 20px rgba(138, 43, 226, 0.3),
    0 0 40px rgba(0, 255, 255, 0.2),
    // Stronger outer shadow for lifted appearance
    0 12px 24px rgba(0, 0, 0, 0.6),
    0 8px 16px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.3),
    // Top highlight (raised effect)
    inset 0 3px 0 rgba(0, 255, 255, 0.2),
    inset 0 6px 12px rgba(138, 43, 226, 0.08),
    // Bottom shadow (depth)
    inset 0 -3px 0 rgba(0, 0, 0, 0.7),
    inset 0 -6px 12px rgba(0, 0, 0, 0.5),
    // Left highlight
    inset 3px 0 0 rgba(138, 43, 226, 0.15),
    // Right shadow
    inset -3px 0 0 rgba(0, 0, 0, 0.6);

  // Subtle gradient overlay for 3D effect
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    background:
      radial-gradient(
        ellipse at top left,
        rgba(0, 255, 255, 0.15) 0%,
        transparent 50%
      ),
      radial-gradient(
        ellipse at bottom right,
        rgba(138, 43, 226, 0.2) 0%,
        transparent 50%
      );
    pointer-events: none;
    z-index: 0;
  }

  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 40px;

  // Ensure controls are above the overlay
  > * {
    position: relative;
    z-index: 1;
  }

  @include media-down(lg) {
    flex-direction: column;
    gap: 30px;
    padding: 30px 20px;
    transform: none;
  }
}

.control-label {
  text-align: center;
  margin-top: 10px;
  font-family: "Pixelify Sans", monospace;
  font-size: 0.75rem;
  color: #7dffff;
  letter-spacing: 1px;
  text-shadow:
    0 0 5px rgba(0, 255, 255, 0.6),
    0 0 10px rgba(138, 43, 226, 0.3);
}

// Buttons overlay - positioned absolutely to avoid perspective transform
.buttons-overlay {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%) scaleY(0.85);
  z-index: 10;
  pointer-events: none;

  @include media-down(lg) {
    position: static;
    transform: none;
    pointer-events: auto;
  }
}

// ============================================
// JOYSTICK
// ============================================

.joystick-container {
  text-align: center;

  // Position absolutely to place on control panel without perspective transform
  position: absolute;
  left: 12.5%;
  top: 40%;
  transform: translateY(-50%);
  z-index: 0; // Behind the control panel surface
  pointer-events: none; // Allow clicks to pass through to buttons below

  @include media-down(lg) {
    position: static;
    transform: none;
    pointer-events: auto;
  }
}

.joystick {
  position: relative;
  width: 100px;
  height: 120px;
  user-select: none;

  @include enhance-3d-transform;
}

.joystick-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 30px;
  background: radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.5);

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #2a2a2a;
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  }

  &::before {
    left: 10px;
  }
  &::after {
    right: 10px;
  }
}

.joystick-stick {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 70px;
  background: linear-gradient(90deg, #3a3a3a 0%, #2a2a2a 50%, #1a1a1a 100%);
  border-radius: 10px;
  box-shadow:
    -2px 0 4px rgba(0, 0, 0, 0.5),
    2px 0 4px rgba(255, 255, 255, 0.1);
  transition: transform 0.1s ease;
  transform-origin: bottom center;

  @include enhance-3d-transform;
}

.joystick-ball {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 30% 30%, #00ffff 0%, #00aaaa 100%);
  border-radius: 50%;
  box-shadow:
    0 0 15px rgba(0, 255, 255, 0.6),
    0 0 30px rgba(0, 255, 255, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.6),
    inset -2px -2px 4px rgba(0, 0, 0, 0.4),
    inset 2px 2px 4px rgba(0, 255, 255, 0.6);
}

.joystick.up .joystick-stick {
  transform: translateX(-50%) rotate(-15deg);
}

.joystick.down .joystick-stick {
  transform: translateX(-50%) rotate(15deg);
}

.joystick.left .joystick-stick {
  transform: translateX(-50%) rotate(-10deg) translateX(-5px);
}

.joystick.right .joystick-stick {
  transform: translateX(-50%) rotate(10deg) translateX(5px);
}

// ============================================
// ARCADE BUTTONS
// ============================================

.buttons-container {
  display: flex;
  gap: 30px;
  min-height: auto;
  pointer-events: auto;

  @include media-down(lg) {
    gap: 20px;
  }
}

.arcade-button-wrap {
  text-align: center;
  pointer-events: auto;
}

.arcade-button {
  position: relative;
  width: 70px;
  height: 70px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
  z-index: 10;

  @include enhance-3d-transform;

  &:focus {
    outline: none;
  }

  &::before {
    content: "";
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(
      circle at center,
      #1a1a1a 0%,
      rgba(0, 0, 0, 0.8)
    );
    border-radius: 50%;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6);
  }
}

.button-top {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffff00 0%, #cccc00 100%);
  box-shadow:
    0 0 15px rgba(255, 255, 0, 0.6),
    0 0 30px rgba(255, 255, 0, 0.4),
    0 6px 0 #999900,
    0 8px 12px rgba(0, 0, 0, 0.6),
    inset -2px -2px 4px rgba(0, 0, 0, 0.3),
    inset 2px 2px 4px rgba(255, 255, 150, 0.5);
  transition: all 0.1s ease;
  position: relative;
  top: 0;
}

.arcade-button-select .button-top {
  background: radial-gradient(circle at 30% 30%, #ff00ff 0%, #cc00cc 100%);
  box-shadow:
    0 0 15px rgba(255, 0, 255, 0.6),
    0 0 30px rgba(255, 0, 255, 0.4),
    0 6px 0 #990099,
    0 8px 12px rgba(0, 0, 0, 0.6),
    inset -2px -2px 4px rgba(0, 0, 0, 0.3),
    inset 2px 2px 4px rgba(255, 100, 255, 0.5);
}

.arcade-button-back .button-top {
  background: radial-gradient(circle at 30% 30%, #00ffff 0%, #00cccc 100%);
  box-shadow:
    0 0 15px rgba(0, 255, 255, 0.6),
    0 0 30px rgba(0, 255, 255, 0.4),
    0 6px 0 #009999,
    0 8px 12px rgba(0, 0, 0, 0.6),
    inset -2px -2px 4px rgba(0, 0, 0, 0.3),
    inset 2px 2px 4px rgba(100, 255, 255, 0.5);
}

.arcade-button:active .button-top,
.arcade-button.pressed .button-top {
  top: 4px;
  box-shadow:
    0 0 10px rgba(255, 255, 0, 0.5),
    0 0 20px rgba(255, 255, 0, 0.3),
    0 2px 0 #999900,
    0 4px 8px rgba(0, 0, 0, 0.6),
    inset -2px -2px 4px rgba(0, 0, 0, 0.3),
    inset 2px 2px 4px rgba(255, 255, 150, 0.5);
}

.arcade-button-select:active .button-top,
.arcade-button-select.pressed .button-top {
  box-shadow:
    0 0 10px rgba(255, 0, 255, 0.5),
    0 0 20px rgba(255, 0, 255, 0.3),
    0 2px 0 #990099,
    0 4px 8px rgba(0, 0, 0, 0.6),
    inset -2px -2px 4px rgba(0, 0, 0, 0.3),
    inset 2px 2px 4px rgba(255, 100, 255, 0.5);
}

.arcade-button-back:active .button-top,
.arcade-button-back.pressed .button-top {
  box-shadow:
    0 0 10px rgba(0, 255, 255, 0.5),
    0 0 20px rgba(0, 255, 255, 0.3),
    0 2px 0 #009999,
    0 4px 8px rgba(0, 0, 0, 0.6),
    inset -2px -2px 4px rgba(0, 0, 0, 0.3),
    inset 2px 2px 4px rgba(100, 255, 255, 0.5);
}

// ============================================
// SOUND TOGGLE
// ============================================

.sound-toggle-container {
  text-align: center;
}

.sound-toggle {
  width: 50px;
  height: 50px;
  border: 2px solid #5a5a8e;
  border-radius: 8px;
  background: linear-gradient(145deg, #2a2a4e, #1a1a3e);
  color: #ffff00;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  pointer-events: auto;
  z-index: 10;
  position: relative;
  box-shadow:
    0 0 15px rgba(255, 255, 0, 0.4),
    0 0 30px rgba(255, 255, 0, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.3);

  &:hover {
    background: linear-gradient(145deg, #3a3a5e, #2a2a4e);
    border-color: #7a7aae;
    box-shadow:
      0 0 20px rgba(255, 255, 0, 0.6),
      0 0 40px rgba(255, 255, 0, 0.4),
      inset 0 2px 4px rgba(0, 0, 0, 0.6),
      0 2px 4px rgba(0, 0, 0, 0.3);
  }

  &:active {
    transform: translateY(2px);
  }

  &:focus {
    outline: none;
    box-shadow:
      0 0 20px rgba(255, 255, 0, 0.8),
      0 0 40px rgba(255, 255, 0, 0.6),
      inset 0 2px 4px rgba(0, 0, 0, 0.6),
      0 0 0 2px rgba(255, 255, 0, 0.5);
  }
}

.sound-icon {
  display: inline-block;
}

.sound-label {
  text-align: center;
  margin-top: 8px;
  font-family: "Pixelify Sans", monospace;
  font-size: 0.65rem;
  color: #7dffff;
  letter-spacing: 1px;
  text-shadow:
    0 0 5px rgba(0, 255, 255, 0.6),
    0 0 10px rgba(138, 43, 226, 0.3);
}

// ============================================
// CABINET BASE
// ============================================

.cabinet-base {
  width: 112.5%;
  margin-left: -6%;
  height: 80px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 0, 255, 0.15) 0%,
      rgba(0, 255, 255, 0.15) 50%,
      rgba(255, 255, 0, 0.15) 100%
    ),
    linear-gradient(180deg, #2a2a4e 0%, #1a1a2e 100%);
  border: 6px solid #5a5a8e;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 40px rgba(138, 43, 226, 0.4),
    0 0 80px rgba(0, 255, 255, 0.3),
    0 30px 60px rgba(0, 0, 0, 0.9),
    inset 0 2px 4px rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5);

  @include media-down(lg) {
    height: 60px;
  }
}

.coin-slot {
  width: 60px;
  height: 6px;
  background: #000;
  border-radius: 3px;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;

  &::before {
    content: "INSERT COIN";
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: #7dffff;
    font-family: "Pixelify Sans", monospace;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow:
      0 0 5px rgba(0, 255, 255, 0.8),
      0 0 10px rgba(138, 43, 226, 0.4);
  }
}

// ============================================
// ACCESSIBILITY - REDUCED MOTION
// ============================================

@media (prefers-reduced-motion: reduce) {
  .arcade-container *,
  .arcade-container *::before,
  .arcade-container *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}