* {
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
      box-sizing: border-box;
    }

    body {
      background-color: #06070b;
      font-family: 'Outfit', sans-serif;
      touch-action: manipulation;
      overflow: hidden;
      height: 100dvh;
      width: 100vw;
    }

    .font-pixel {
      font-family: 'Press Start 2P', monospace;
    }

    canvas {
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }

    .dpad-btn {
      background: linear-gradient(145deg, #1e2232, #11131c);
      box-shadow: 0 4px 0 #08090e, inset 0 1px 0 rgba(255, 255, 255, 0.12);
      transition: all 0.05s ease;
      touch-action: none;
    }
    .dpad-btn:active, .dpad-btn.active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #08090e, inset 0 2px 4px rgba(0, 0, 0, 0.6);
      background: linear-gradient(145deg, #141620, #0a0b12);
    }

    .btn-action-ok {
      background: linear-gradient(145deg, #10b981, #059669);
      box-shadow: 0 6px 0 #064e3b, 0 10px 20px -4px rgba(16, 185, 129, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.35);
      transition: all 0.05s ease;
      touch-action: none;
    }
    .btn-action-ok:active, .btn-action-ok.active {
      transform: translateY(4px);
      box-shadow: 0 2px 0 #064e3b, inset 0 3px 6px rgba(0, 0, 0, 0.5);
      background: linear-gradient(145deg, #059669, #047857);
    }

    .screen-bezel {
      box-shadow: 0 0 0 3px #1a1e2d, 0 14px 28px rgba(0, 0, 0, 0.85);
    }

    .mini-white-popup {
      background-color: #ffffff;
      border: 2px solid #0f172a;
      box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
    }

    .mini-gold-popup {
      background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
      border: 2.5px solid #d97706;
      box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.4), 3px 3px 0px #b45309;
    }

    .popup-white-btn {
      background-color: #ffffff;
      border: 1.5px solid #0f172a;
      box-shadow: 1px 1px 0px #0f172a;
      transition: all 0.06s ease;
    }
    .popup-white-btn:active {
      transform: translate(1px, 1px);
      box-shadow: 0px 0px 0px #0f172a;
      background-color: #f1f5f9;
    }

    .slot-pixel {
      background: #1f2537;
      border: 2px solid #475569;
      box-shadow: inset 2px 2px 0px #0b0e17, inset -1px -1px 0px rgba(255, 255, 255, 0.12), 0 3px 6px rgba(0,0,0,0.4);
      transition: all 0.1s ease;
      cursor: pointer;
    }
    .slot-pixel.selected {
      border: 2.5px solid #ffffff !important;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.7), inset 0 0 6px rgba(255, 255, 255, 0.3) !important;
      transform: scale(1.04);
    }

    .retro-box-modal {
      background: #ffffff;
      border: 2px solid #000000;
      box-shadow: 4px 4px 0px #000000;
    }

    @keyframes alertPop {
      0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
      15% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
      30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
      85% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
    }
    .animate-alert-pop {
      animation: alertPop 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .hate-comment-badge {
      animation: pulseHate 1s infinite alternate;
    }
    @keyframes pulseHate {
      from { background-color: rgba(245, 158, 11, 0.12); }
      to { background-color: rgba(245, 158, 11, 0.28); }
    }

    ::-webkit-scrollbar {
      width: 4px;
    }
    ::-webkit-scrollbar-thumb {
      background: #334155;
      border-radius: 4px;
    }