body {
        font-family: "Inter", sans-serif;
        background-color: #0c0a15;
        color: #f9fafb;
        overflow: hidden;
        cursor: none;
      }
      canvas {
        background-color: #090a0f;
        background-image: radial-gradient(
          ellipse at bottom,
          #1b2735 0%,
          #090a0f 100%
        );
        display: block;
        border-radius: 0.5rem;
      }
      .overlay {
        background: linear-gradient(135deg, rgba(12, 10, 21, 0.95), rgba(30, 30, 50, 0.9));
        backdrop-filter: blur(12px);
        animation: overlayFadeIn 0.6s ease-out;
      }
      
      .overlay-content {
        animation: contentSlideIn 0.8s ease-out;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      }
      
      .button {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: linear-gradient(45deg, #8b5cf6, #ec4899);
        position: relative;
        overflow: hidden;
      }
      
      .button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s;
      }
      
      .button:hover::before {
        left: 100%;
      }
      
      .button:hover {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(236, 72, 153, 0.6);
      }
      
      .button:active {
        transform: scale(0.98);
      }
      
      @keyframes overlayFadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      
      @keyframes contentSlideIn {
        from {
          opacity: 0;
          transform: translateY(30px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      
      .hidden {
        display: none !important;
      }

      /* === RESPONSIVE DESIGN === */
      
      /* Mobile and Tablet Optimizations */
      @media (max-width: 768px) {
        .overlay-content {
          padding: 1.5rem;
          margin: 0.5rem;
          max-width: calc(100vw - 1rem);
          text-align: left;
        }
        
        /* Keep title and button centered */
        #overlay-title {
          text-align: center;
        }
        
        .button {
          text-align: center;
          margin: 0 auto;
          display: block;
          width: fit-content;
        }
        
        /* Left align only the instructional content */
        #overlay-text {
          text-align: left;
        }
        
        #overlay-title {
          font-size: 2.5rem;
          margin-bottom: 1rem;
        }
        
        .overlay-content .text-lg {
          font-size: 1rem;
        }
        
        .overlay-content .text-xl {
          font-size: 1.125rem;
        }
        
        .button {
          padding: 0.75rem 2rem;
          font-size: 1.125rem;
        }
        
        /* Adjust HUD elements for mobile */
        #hud-score {
          top: 0.5rem;
          left: 0.5rem;
          font-size: 0.875rem;
        }
        
        #combo-display {
          top: 0.5rem;
          right: 0.5rem;
          font-size: 1.5rem;
        }
        
        #difficulty-display,
        #achievement-display,
        #streak-display {
          font-size: 0.875rem;
        }
        
        #difficulty-display {
          top: 2.5rem;
        }
        
        #achievement-display {
          top: 4rem;
        }
        
        #streak-display {
          top: 5.5rem;
        }
      }
      
      /* Small Mobile Devices */
      @media (max-width: 480px) {
        .overlay-content {
          padding: 1rem;
          margin: 0.25rem;
          text-align: left;
        }
        
        /* Keep title and button centered */
        #overlay-title {
          text-align: center;
        }
        
        .button {
          text-align: center;
          margin: 0 auto;
          display: block;
          width: fit-content;
        }
        
        /* Left align only the instructional content */
        #overlay-text {
          text-align: left;
        }
        
        #overlay-title {
          font-size: 2rem;
        }
        
        .overlay-content .text-lg {
          font-size: 0.875rem;
        }
        
        .overlay-content .text-xl {
          font-size: 1rem;
        }
        
        .button {
          padding: 0.625rem 1.5rem;
          font-size: 1rem;
        }
        
        /* Stack HUD elements vertically on very small screens */
        #combo-display {
          top: 2rem;
          right: 0.5rem;
        }
        
        #difficulty-display {
          top: 3.5rem;
        }
        
        #achievement-display {
          top: 5rem;
        }
        
        #streak-display {
          top: 6.5rem;
        }
      }
      
      /* Landscape Mobile */
      @media (max-height: 500px) and (orientation: landscape) {
        .overlay-content {
          padding: 1rem;
          margin: 0.5rem;
          text-align: left;
        }
        
        /* Keep title and button centered */
        #overlay-title {
          text-align: center;
        }
        
        .button {
          text-align: center;
          margin: 0 auto;
          display: block;
          width: fit-content;
        }
        
        /* Left align only the instructional content */
        #overlay-text {
          text-align: left;
        }
        
        #overlay-title {
          font-size: 2rem;
          margin-bottom: 0.5rem;
        }
        
        .overlay-content .mb-8 {
          margin-bottom: 1rem;
        }
        
        .overlay-content .mb-6 {
          margin-bottom: 0.75rem;
        }
        
        .overlay-content .space-y-4 > * + * {
          margin-top: 0.5rem;
        }
        
        .overlay-content .space-y-3 > * + * {
          margin-top: 0.25rem;
        }
      }
      
      /* iPad and Tablet */
      @media (min-width: 769px) and (max-width: 1024px) {
        .overlay-content {
          max-width: 28rem;
        }
        
        #overlay-title {
          font-size: 3.5rem;
        }
      }
      
      /* Touch device optimizations */
      @media (hover: none) and (pointer: coarse) {
        .button:hover {
          transform: none;
          box-shadow: 0 0 30px rgba(236, 72, 153, 0.6);
        }
        
        .button:active {
          transform: scale(0.95);
        }
      }
      
      /* Prevent text selection on game elements */
      canvas, .overlay, .button {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
      }
      
      /* iOS Safari specific fixes */
      @supports (-webkit-touch-callout: none) {
        body {
          -webkit-overflow-scrolling: touch;
        }
        
        canvas {
          touch-action: none;
        }
      }
      
      /* Enhanced mobile touch experience */
      @media (max-width: 768px) {
        canvas {
          touch-action: none;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
        
        /* Improve touch responsiveness */
        body {
          touch-action: manipulation;
          -webkit-tap-highlight-color: transparent;
        }
        
        /* Make sure the game area is fully touchable */
        #canvas-container {
          touch-action: none;
        }
      }
      
      /* Device-specific instruction visibility */
      .desktop-only {
        display: inline;
      }
      
      .mobile-only {
        display: none;
      }
      
      @media (max-width: 768px) {
        .desktop-only {
          display: none;
        }
        
        .mobile-only {
          display: inline;
        }
      }