/* Light Version - Orange background with dark text */
        .pixel-button-light {
            position: relative;
            padding: 16px 32px;
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--black);
            background: #F1854A;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.1s ease;
            box-shadow: 6px 6px 0 var(--white);;
            transform: translate(0, 0);
text-decoration: none;
  
  -webkit-user-select: none; 
  -moz-user-select: none;   
  -ms-user-select: none;     
  user-select: none;    
        }

        .pixel-button-light:hover {
            background: #FF6B47;
            transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 #eaeaea;
        }

        .pixel-button-light:active {
            background: #D1743D;
            transform: translate(4px, 4px);
            box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
        }

        /* Dark Version - Black background with white text */
        .pixel-button-dark {
            position: relative;
            padding: 16px 32px;
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #eaeaea;
            background: var(--black);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.1s ease;
            box-shadow: 6px 6px 0 #F1854A;
            transform: translate(0, 0);
text-decoration: none;
  
  -webkit-user-select: none; 
  -moz-user-select: none;   
  -ms-user-select: none;     
  user-select: none;    
        }

        .pixel-button-dark:hover {
            background: #1a2332;
            transform: translate(-2px, -2px);
            box-shadow: 8px 8px 0 #FF6B47;
        }

        .pixel-button-dark:active {
            background: #0a0f16;
            transform: translate(4px, 4px);
            box-shadow: 2px 2px 0 rgba(241, 133, 74, 0.5);
        }

        /* Size variations */
        .btn-md {
            padding: 16px 32px;
            font-size: 16px;
        }

        .btn-sm {
            padding: 12px 24px;
            font-size: 14px;
            box-shadow: 4px 4px 0;
        }

        .pixel-button-light.btn-sm {
            box-shadow: 4px 4px 0 #eaeaea;
        }

 

        .pixel-button-light.btn-sm:active {
            box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
        }

        .pixel-button-dark.btn-sm {
            box-shadow: 4px 4px 0 #F1854A;
        }

        .pixel-button-dark.btn-sm:hover {
            box-shadow: 6px 6px 0 #FF6B47;
        }

        .pixel-button-dark.btn-sm:active {
            box-shadow: 1px 1px 0 rgba(241, 133, 74, 0.5);
        }