* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
    body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0f172a; font-family: 'Inter', sans-serif; }
    body { min-height: 100vh; min-height: 100dvh; }
    #root { width: 100%; height: 100vh; height: 100dvh; position: relative; top: 0; }
    canvas { display: block; pointer-events: none; }
    .icon { width: 1.25rem; height: 1.25rem; display: inline-block; background: currentColor; mask-size: contain; -webkit-mask-size: contain; }
    .pointer-events-auto { pointer-events: auto; }
    .tabular-nums { font-variant-numeric: tabular-nums; }
    /* animations similar to react framer-motion */
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes zoom-in { from { transform: scale(0.95); } to { transform: scale(1); } }
    @keyframes slide-in-bottom { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .animate-in { animation-duration: 0.3s; animation-fill-mode: forwards; }
    .fade-in { animation-name: fade-in; }
    .zoom-in { animation-name: zoom-in; }
    .slide-in-from-bottom-10 { animation-name: slide-in-bottom; }
    .duration-500 { animation-duration: 0.5s; }
    /* prevent flicker */
    .no-flicker { will-change: transform, opacity; backface-visibility: hidden; }
    
    /* ===== BONUS MODAL ===== */
    #bonus-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bonus-modal-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
    }
    .bonus-modal-content {
      position: relative;
      background: linear-gradient(135deg, #1a1f2e 0%, #0f172a 100%);
      border: 2px solid #4aedc4;
      border-radius: 24px;
      padding: 48px 40px;
      text-align: center;
      max-width: 420px;
      width: 90%;
      box-shadow: 0 0 60px rgba(74, 237, 196, 0.3), 0 0 120px rgba(74, 237, 196, 0.1);
      animation: bonusModalIn 0.5s ease-out;
    }
    @keyframes bonusModalIn {
      from { transform: scale(0.7) translateY(40px); opacity: 0; }
      to { transform: scale(1) translateY(0); opacity: 1; }
    }
    .bonus-modal-icon {
      font-size: 64px;
      margin-bottom: 16px;
      animation: bonusBounce 1s ease infinite;
    }
    @keyframes bonusBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    .bonus-modal-title {
      font-size: 32px;
      font-weight: 900;
      color: #4aedc4;
      margin: 0 0 8px 0;
      text-transform: uppercase;
      letter-spacing: 3px;
    }
    .bonus-modal-text {
      color: #94a3b8;
      font-size: 16px;
      margin: 0 0 20px 0;
    }
    .bonus-modal-amount {
      font-size: 40px;
      font-weight: 900;
      color: #fff;
      margin-bottom: 28px;
      text-shadow: 0 0 20px rgba(74, 237, 196, 0.5);
    }
    .bonus-modal-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #4aedc4;
      color: #0f172a;
      font-size: 18px;
      font-weight: 900;
      padding: 16px 48px;
      border-radius: 16px;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.2s;
      box-shadow: 0 6px 0 #2eb89a, 0 0 30px rgba(74, 237, 196, 0.4);
    }
    .bonus-modal-btn:hover {
      background: #3cd4af;
      transform: translateY(-2px);
      box-shadow: 0 8px 0 #2eb89a, 0 0 40px rgba(74, 237, 196, 0.5);
    }
    .bonus-modal-btn:active {
      transform: translateY(2px);
      box-shadow: 0 3px 0 #2eb89a;
    }