body, html {
         margin: 0;
         padding: 0;
         height: 100%;
         width: 100%;
         font-family: sans-serif;
         background-color: #000;
         overflow: hidden;
     }

     body::before {
         content: '';
         position: fixed;
         top: -10px;
         left: -10px;
         right: -10px;
         bottom: -10px;
         z-index: -1;
         background-image: url('/assets/img/fundo.png');
         background-size: cover;
         background-position: center;
         filter: blur(8px);
     }

     #game-container {
         width: 100%;
         height: 100%;
         max-width: 420px;
         margin: 0 auto;
         background-image: url('/assets/img/fundo.png');
         background-size: cover;
         background-position: center;
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
         position: relative;
         overflow: hidden;
     }

     #roulette-indicator {
         width: 100%;
         height: auto;
         margin-top: 0;
         position: relative;
         z-index: 2;
     }

     #roulette-wheel {
         position: absolute;
         top: 40%;
         left: 50%;
         transform: translate(-50%, -50%);
         transform-origin: center center;
         width: 88%;
         height: auto;
         z-index: 1;
     }

     #bonus-wheel {
         position: absolute;
         top: 40%;
         left: 50%;
         transform: translate(-50%, -50%);
         transform-origin: center center;
         width: 35%;
         height: auto;
         z-index: 3;
     }

     #roulette-wheel.swaying, #roleta1-labels.swaying {
         animation: sway-roleta1 8s ease-in-out infinite;
     }

     #bonus-wheel.swaying, #roleta2-labels.swaying {
         animation: sway-roleta2 8s ease-in-out infinite;
     }

     #bonus-indicator {
         position: absolute;
         top: 30%;
         left: 50%;
         transform: translateX(-50%);
         width: 8%;
         height: auto;
         z-index: 4;
     }

     #bottom-bar {
         position: absolute;
         bottom: -40px;
         left: 0;
         width: 100%;
         height: auto;
         z-index: 2;
     }

     .ui-panel {
         position: absolute;
         background-color: rgba(75, 0, 130, 0.85);
         border: 1px solid rgba(138, 43, 226, 0.6);
         border-radius: 12px;
         padding: 5px 15px;
         color: white;
         box-shadow: 0 0 10px rgba(0,0,0,0.3);
         backdrop-filter: blur(4px);
         -webkit-backdrop-filter: blur(4px);
         text-align: left;
         z-index: 3;
         box-sizing: border-box;
     }

     .ui-panel .label {
         font-size: clamp(0.7rem, 2.5vw, 0.8rem);
         margin: 0;
         padding: 0;
         opacity: 0.9;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }

     .ui-panel .value {
         font-size: clamp(0.9rem, 3.5vw, 1.1rem);
         font-weight: bold;
         color: #FFD700;
         margin: 0;
         padding: 0;
         white-space: nowrap;
     }

     #saldo-block {
         bottom: 11%;
         left: 5%;
         width: 25%;
         min-width: 90px;
     }

     #ganho-block {
         bottom: 2%;
         left: 5%;
         width: 25%;
         min-width: 90px;
     }

     .ui-button {
         position: absolute;
         background-color: rgba(75, 0, 130, 0.85);
         border: 1px solid rgba(138, 43, 226, 0.6);
         border-radius: 12px;
         color: #fff;
         font-weight: bold;
         cursor: pointer;
         box-shadow: 0 0 10px rgba(0,0,0,0.3);
         backdrop-filter: blur(4px);
         -webkit-backdrop-filter: blur(4px);
         display: flex;
         justify-content: center;
         align-items: center;
         font-size: 1.5rem;
         z-index: 3;
         box-sizing: border-box;
     }

     .ui-button:disabled {
         cursor: not-allowed;
         opacity: 0.6;
     }

     #normal-button {
         bottom: 20%;
         left: 5%;
         width: 25%;
         min-width: 90px;
         padding: 8px 0;
         font-size: clamp(0.7rem, 2.8vw, 0.9rem);
     }

     #deposit-button {
         position: absolute;
         bottom: 28%;
         left: 5%;
         width: 25%;
         min-width: 90px;
         padding: 12px 0;
         font-size: clamp(0.75rem, 2.8vw, 0.95rem);
         background: linear-gradient(135deg, #FFD700, #FF8C00);
         border: 2px solid #FFA500;
         border-radius: 12px;
         color: #4B0082;
         font-weight: bold;
         cursor: pointer;
         box-shadow: 0 4px 20px rgba(255, 140, 0, 0.6);
         backdrop-filter: blur(4px);
         -webkit-backdrop-filter: blur(4px);
         display: flex;
         justify-content: center;
         align-items: center;
         z-index: 4;
         box-sizing: border-box;
         animation: depositPulse 2s ease-in-out infinite;
         transition: all 0.3s ease;
         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
     }

     #deposit-button:hover {
         transform: translateY(-3px);
         box-shadow: 0 6px 30px rgba(255, 140, 0, 0.8);
         background: linear-gradient(135deg, #FFC700, #FF7C00);
     }

     #deposit-button:active {
         transform: translateY(-1px);
     }

     @keyframes depositPulse {
         0%, 100% {
             box-shadow: 0 4px 20px rgba(255, 140, 0, 0.6);
             transform: scale(1);
         }
         50% {
             box-shadow: 0 6px 30px rgba(255, 215, 0, 0.8);
             transform: scale(1.05);
         }
     }

     #deposit-arrow {
         position: absolute;
         bottom: 34%;
         left: 17%;
         transform: translateX(-50%);
         width: 40px;
         height: 40px;
         z-index: 5;
         animation: arrowBounce 1.5s ease-in-out infinite;
         pointer-events: none;
     }

     @keyframes arrowBounce {
         0%, 100% {
             transform: translateX(-50%) translateY(0);
         }
         50% {
             transform: translateX(-50%) translateY(8px);
         }
     }

     #deposit-arrow svg {
         width: 100%;
         height: 100%;
         fill: #FFD700;
         filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
     }

     #giro-area {
         position: absolute;
         bottom: 5%;
         right: 5%;
         transform: none;
         display: flex;
         flex-direction: column;
         align-items: flex-end;
         gap: 6px;
         z-index: 4;
     }

     #giro-area .ui-button {
         position: static;
         width: 56px;
         height: 38px;
         padding: 0;
     }

     #giro-area #giro-block {
         position: relative;
         width: auto;
         min-width: 80px;
         padding: 6px 10px;
     }

     #giro-block {
         text-align: center;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 2px;
     }

     #play-button {
         position: absolute;
         bottom: 5%;
         left: 50%;
         transform: translateX(-50%);
         width: 25%;
         min-width: 95px;
         height: auto;
         z-index: 5;
         cursor: pointer;
         transition: transform 0.2s;
     }

     #play-button.disabled {
         cursor: not-allowed;
         filter: grayscale(80%);
     }

     #play-button:active:not(.disabled) {
         transform: translateX(-50%) scale(0.95);
     }

     /* Legal Info Button */
     #legal-info-button {
         position: absolute;
         bottom: 5%;
         left: 50%;
         transform: translateX(-50%) translateY(100px);
         width: 30px;
         height: 30px;
         border-radius: 50%;
         background: linear-gradient(135deg, #4B0082, #8A2BE2);
         border: 2px solid #FFD700;
         color: #FFD700;
         font-size: 18px;
         font-weight: bold;
         cursor: pointer;
         z-index: 6;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.3s ease;
         box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
     }

     #legal-info-button:hover {
         transform: translateX(-50%) translateY(100px) scale(1.1);
         box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
     }

     #legal-info-button:active {
         transform: translateX(-50%) translateY(100px) scale(0.95);
     }

     /* Legal Modal */
     #legal-modal-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: transparent !important;
         backdrop-filter: none !important;
         -webkit-backdrop-filter: none !important;
         display: none;
         justify-content: center;
         align-items: flex-end;
         z-index: 8;
         opacity: 0;
         transition: opacity 0.3s ease;
         pointer-events: none;
     }

     #legal-modal-overlay.show {
         display: flex;
         opacity: 1;
     }

     #legal-modal-content {
         position: fixed;
         bottom: 15%;
         left: 50%;
         transform: translateX(-50%) translateY(0);
         background: linear-gradient(135deg, rgba(75, 0, 130, 0.98), rgba(138, 43, 226, 0.98));
         padding: 15px 20px;
         border-radius: 12px;
         width: 90%;
         max-width: 350px;
         max-height: 200px;
         overflow-y: auto;
         border: 2px solid #FFD700;
         box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4);
         pointer-events: auto;
         z-index: 9;
     }

     #legal-modal-overlay.show #legal-modal-content {
         animation: slideUpFade 0.4s ease-out;
     }

     @keyframes slideUpFade {
         from {
             transform: translateX(-50%) translateY(50px);
             opacity: 0;
         }
         to {
             transform: translateX(-50%) translateY(0);
             opacity: 1;
         }
     }

     #legal-modal-content h3 {
         color: #FFD700;
         font-size: 14px;
         margin-top: 0;
         margin-bottom: 10px;
         text-align: center;
         font-weight: bold;
     }

     #legal-modal-content p {
         color: #fff;
         font-size: 10px;
         line-height: 1.4;
         text-align: justify;
         margin: 0;
     }

     .legal-modal-close {
         position: absolute;
         top: 8px;
         right: 8px;
         background: transparent;
         border: none;
         color: #FFD700;
         font-size: 24px;
         cursor: pointer;
         width: 25px;
         height: 25px;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: transform 0.2s;
         line-height: 1;
         z-index: 10;
     }

     .legal-modal-close:hover {
         transform: scale(1.2);
         color: #fff;
     }

     /* Customização da scrollbar para o modal legal */
     #legal-modal-content::-webkit-scrollbar {
         width: 6px;
     }

     #legal-modal-content::-webkit-scrollbar-track {
         background: rgba(255, 255, 255, 0.1);
         border-radius: 3px;
     }

     #legal-modal-content::-webkit-scrollbar-thumb {
         background: #FFD700;
         border-radius: 3px;
     }

     #legal-modal-content::-webkit-scrollbar-thumb:hover {
         background: #FFA500;
     }

     @media (max-width: 768px) {
         #legal-info-button {
             width: 28px;
             height: 28px;
             font-size: 16px;
         }

         #legal-modal-content {
             padding: 12px 15px;
             max-width: 320px;
             max-height: 180px;
             bottom: 12%;
         }

         #legal-modal-content h3 {
             font-size: 12px;
             margin-bottom: 8px;
         }

         #legal-modal-content p {
             font-size: 9px;
         }

         .legal-modal-close {
             font-size: 20px;
             width: 22px;
             height: 22px;
         }
     }

     @media (max-width: 480px) {
         #legal-modal-content {
             padding: 10px 12px;
             max-width: 280px;
             max-height: 160px;
             bottom: 10%;
         }

         #legal-modal-content h3 {
             font-size: 11px;
         }

         #legal-modal-content p {
             font-size: 8px;
             line-height: 1.3;
         }
     }


     .modal-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.6);
         backdrop-filter: blur(5px);
         -webkit-backdrop-filter: blur(5px);
         display: none;
         justify-content: center;
         align-items: center;
         z-index: 10;
         opacity: 0;
         transition: opacity 0.3s ease;
     }

     .modal-overlay.show {
         display: flex;
         opacity: 1;
     }

     #modal-content {
         position: relative;
         width: 80%;
         max-width: 320px;
         background: linear-gradient(135deg, #2E0854, #4B0082);
         padding: 25px 20px;
         border-radius: 20px;
         text-align: center;
         color: white;
         border: 2px solid #FFD700;
         box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
         opacity: 0;
         transition: opacity 0.3s ease, transform 0.3s ease;
         overflow: hidden;
     }

     /* Confetti effect background */
     #modal-content::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-image: 
             radial-gradient(#FFD700 15%, transparent 16%),
             radial-gradient(#FF4500 15%, transparent 16%),
             radial-gradient(#00CED1 15%, transparent 16%);
         background-size: 20px 20px;
         background-position: 0 0, 10px 10px, 5px 15px;
         opacity: 0.1;
         z-index: 0;
         pointer-events: none;
     }

     .modal-overlay.show #modal-content {
         opacity: 1;
         transform: scale(1);
     }

     #modal-title {
         font-size: 1.8rem;
         font-weight: 800;
         color: #FFD700;
         margin: 0 0 10px 0;
         text-shadow: 0 2px 4px rgba(0,0,0,0.5);
         position: relative;
         z-index: 1;
         text-transform: uppercase;
     }

     #modal-title::before {
         content: '🎭 ';
     }
     #modal-title::after {
         content: ' 🎉';
     }

     #modal-ganho {
         font-size: 1.5rem;
         font-weight: 900;
         color: #fff;
         background: linear-gradient(to bottom, #FFD700, #FFA500);
         background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         margin: 0 0 15px 0;
         position: relative;
         z-index: 1;
         filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
     }

     #modal-details {
         font-size: 0.8rem;
         color: #ddd;
         margin: 0;
     }

     #modal-button {
         background: linear-gradient(45deg, #FFD700, #FF8C00, #FFD700);
         background-size: 200% auto;
         border: none;
         border-radius: 25px;
         color: #4B0082;
         padding: 12px 30px;
         font-weight: 800;
         font-size: 1rem;
         cursor: pointer;
         margin-top: 20px;
         text-transform: uppercase;
         box-shadow: 0 4px 15px rgba(255, 140, 0, 0.6);
         transition: all 0.3s ease;
         position: relative;
         z-index: 1;
         animation: shine 3s infinite linear;
     }

     @keyframes shine {
         to {
             background-position: 200% center;
         }
     }

     #modal-button:hover {
         transform: scale(1.05);
         box-shadow: 0 6px 20px rgba(255, 140, 0, 0.8);
     }

     .labels-container {
         position: absolute;
         top: 40%;
         left: 50%;
         transform: translate(-50%, -50%);
         z-index: 5;
         pointer-events: none;
     }

     #roleta1-labels {
         width: 88%;
         padding-bottom: 88%;
     }

     #roleta2-labels {
         width: 35%;
         padding-bottom: 35%;
     }

     .roulette-label {
        position: absolute;
        transform: translate(-50%, -50%);
        color: transparent;
        background-color: transparent;
        padding: 2px 10px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: bold;
    }

     #roleta1-labels .roulette-label {
         padding: 2px 18px;
     }

     @keyframes sway-roleta1 {
         0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
         25% { transform: translate(-50%, -50%) rotate(20deg); }
         75% { transform: translate(-50%, -50%) rotate(-20deg); }
     }

     @keyframes sway-roleta2 {
         0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
         25% { transform: translate(-50%, -50%) rotate(-20deg); }
         75% { transform: translate(-50%, -50%) rotate(20deg); }
     }

     #top-right-icons {
         position: absolute;
         top: 20px;
         right: 15px;
         display: flex;
         flex-direction: column;
         gap: 15px;
         z-index: 5;
     }

     .icon-button {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background-color: rgba(75, 0, 130, 0.8);
         border: 1px solid rgba(138, 43, 226, 0.6);
         color: #fff;
         display: flex;
         justify-content: center;
         align-items: center;
         cursor: pointer;
         padding: 0;
         backdrop-filter: blur(4px);
         -webkit-backdrop-filter: blur(4px);
     }

     .icon-button svg {
         width: 22px;
         height: 22px;
         fill: currentColor;
     }

     #profile-modal-content {
         width: 100%;
         max-width: 420px;
         height: auto;
         border-radius: 16px;
         position: relative;
         background-color: rgba(15, 5, 2, 0.95);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
         color: white;
         padding: 20px;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 15px;
         border: none;
     }

     #profile-header {
         width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding-bottom: 10px;
         border-bottom: 1px solid rgba(255, 108, 47, 0.3);
     }

     #close-profile-button {
         font-size: 2rem;
         color: #FFA500;
         cursor: pointer;
         background: none;
         border: none;
     }

     #username-display {
         font-size: 1.2rem;
         font-weight: bold;
     }

     .profile-button {
         width: 80%;
         padding: 15px;
         background-color: rgba(75, 0, 130, 0.8);
         border: 1px solid rgba(138, 43, 226, 0.6);
         color: #fff;
         font-size: 1rem;
         font-weight: bold;
         border-radius: 10px;
         cursor: pointer;
         transition: background-color 0.2s;
     }

     .profile-button:hover {
         background-color: rgba(100, 20, 150, 0.9);
     }

     .auth-modal-content {
         position: relative;
         max-width: 350px;
         width: 90%;
         background-color: #2a2a2a;
         padding: 1.5rem;
         border-radius: 12px;
         border: 1px solid #3a3a3a;
         text-align: left;
         color: white;
         box-shadow: 0 10px 30px rgba(0,0,0,0.5);
         overflow: hidden;
     }

     .auth-modal-content::before {
         content: '🎭';
         position: absolute;
         top: 10px;
         left: 10px;
         font-size: 16px;
         opacity: 0.3;
         animation: float 3s ease-in-out infinite;
         z-index: 0;
     }

     .auth-modal-content::after {
         content: '⭐';
         position: absolute;
         top: 15px;
         right: 50px;
         font-size: 14px;
         opacity: 0.3;
         animation: twinkle 2s ease-in-out infinite;
         z-index: 0;
     }

     @keyframes float {
         0%, 100% {
             transform: translateY(0) rotate(0deg);
         }
         50% {
             transform: translateY(-10px) rotate(180deg);
         }
     }

     @keyframes twinkle {
         0%, 100% {
             opacity: 0.3;
             transform: scale(1);
         }
         50% {
             opacity: 0.6;
             transform: scale(1.2);
         }
     }

     .christmas-decoration {
         position: absolute;
         pointer-events: none;
         z-index: 0;
         opacity: 0.2;
         filter: blur(0.5px);
     }

     .christmas-decoration.top-left {
         top: 8px;
         left: 8px;
         font-size: 16px;
         animation: float 4s ease-in-out infinite;
     }

     .christmas-decoration.top-right {
         top: 8px;
         right: 45px;
         font-size: 14px;
         animation: twinkle 2.5s ease-in-out infinite;
     }

     .christmas-decoration.bottom-left {
         bottom: 8px;
         left: 8px;
         font-size: 12px;
         animation: float 3.5s ease-in-out infinite;
     }

     .christmas-decoration.bottom-right {
         bottom: 8px;
         right: 8px;
         font-size: 14px;
         animation: twinkle 2s ease-in-out infinite;
     }

     /* Efeito de Neve Caindo - Site Inteiro */
     #global-snow-container {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         overflow: hidden;
         pointer-events: none;
         z-index: 100;
     }

     .snowflake {
         position: absolute;
         color: rgba(255, 255, 255, 0.6);
         font-size: 14px;
         font-family: Arial, sans-serif;
         text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
         animation: snowfall linear infinite;
         top: -20px;
         opacity: 0;
     }

     @keyframes snowfall {
         0% {
             transform: translateY(0) translateX(0) rotate(0deg);
             opacity: 0;
         }
         10% {
             opacity: 0.7;
         }
         90% {
             opacity: 0.7;
         }
         100% {
             transform: translateY(100vh) translateX(50px) rotate(360deg);
             opacity: 0;
         }
     }

     .snowflake:nth-child(1) { left: 5%; animation-duration: 10s; animation-delay: 0s; font-size: 12px; }
     .snowflake:nth-child(2) { left: 10%; animation-duration: 12s; animation-delay: 1s; font-size: 14px; }
     .snowflake:nth-child(3) { left: 15%; animation-duration: 11s; animation-delay: 0.5s; font-size: 13px; }
     .snowflake:nth-child(4) { left: 20%; animation-duration: 13s; animation-delay: 1.5s; font-size: 15px; }
     .snowflake:nth-child(5) { left: 25%; animation-duration: 10.5s; animation-delay: 0.3s; font-size: 12px; }
     .snowflake:nth-child(6) { left: 30%; animation-duration: 11.5s; animation-delay: 0.8s; font-size: 14px; }
     .snowflake:nth-child(7) { left: 35%; animation-duration: 12.5s; animation-delay: 1.2s; font-size: 13px; }
     .snowflake:nth-child(8) { left: 40%; animation-duration: 10s; animation-delay: 0.6s; font-size: 15px; }
     .snowflake:nth-child(9) { left: 45%; animation-duration: 11s; animation-delay: 1.4s; font-size: 12px; }
     .snowflake:nth-child(10) { left: 50%; animation-duration: 12s; animation-delay: 0.2s; font-size: 14px; }
     .snowflake:nth-child(11) { left: 55%; animation-duration: 13s; animation-delay: 0.9s; font-size: 13px; }
     .snowflake:nth-child(12) { left: 60%; animation-duration: 10.5s; animation-delay: 0.4s; font-size: 15px; }
     .snowflake:nth-child(13) { left: 65%; animation-duration: 11.5s; animation-delay: 1.1s; font-size: 12px; }
     .snowflake:nth-child(14) { left: 70%; animation-duration: 12s; animation-delay: 0.7s; font-size: 14px; }
     .snowflake:nth-child(15) { left: 75%; animation-duration: 10s; animation-delay: 1.3s; font-size: 13px; }
     .snowflake:nth-child(16) { left: 80%; animation-duration: 11s; animation-delay: 0.1s; font-size: 15px; }
     .snowflake:nth-child(17) { left: 85%; animation-duration: 12s; animation-delay: 0.6s; font-size: 12px; }
     .snowflake:nth-child(18) { left: 90%; animation-duration: 13s; animation-delay: 1.2s; font-size: 14px; }
     .snowflake:nth-child(19) { left: 95%; animation-duration: 10s; animation-delay: 0.8s; font-size: 13px; }
     .snowflake:nth-child(20) { left: 7%; animation-duration: 11.5s; animation-delay: 0.4s; font-size: 15px; }
     .snowflake:nth-child(21) { left: 17%; animation-duration: 12s; animation-delay: 1s; font-size: 12px; }
     .snowflake:nth-child(22) { left: 27%; animation-duration: 10.5s; animation-delay: 0.3s; font-size: 14px; }
     .snowflake:nth-child(23) { left: 37%; animation-duration: 13s; animation-delay: 1.5s; font-size: 13px; }
     .snowflake:nth-child(24) { left: 47%; animation-duration: 11s; animation-delay: 0.7s; font-size: 15px; }
     .snowflake:nth-child(25) { left: 57%; animation-duration: 12s; animation-delay: 0.2s; font-size: 12px; }
     .snowflake:nth-child(26) { left: 67%; animation-duration: 10s; animation-delay: 1.1s; font-size: 14px; }
     .snowflake:nth-child(27) { left: 77%; animation-duration: 11.5s; animation-delay: 0.5s; font-size: 13px; }
     .snowflake:nth-child(28) { left: 87%; animation-duration: 12.5s; animation-delay: 1.3s; font-size: 15px; }
     .snowflake:nth-child(29) { left: 97%; animation-duration: 10.5s; animation-delay: 0.9s; font-size: 12px; }
     .snowflake:nth-child(30) { left: 3%; animation-duration: 13s; animation-delay: 0.6s; font-size: 14px; }

     @media (max-width: 768px) {
         .christmas-decoration {
             opacity: 0.15;
             font-size: 12px !important;
         }

         .snowflake {
             font-size: 10px;
         }
     }

     @media (max-width: 480px) {
         .snowflake {
             font-size: 8px;
         }
     }

     .auth-modal-close {
         position: absolute;
         top: 12px;
         right: 15px;
         background: none;
         border: none;
         color: #888;
         font-size: 1.5rem;
         cursor: pointer;
         z-index: 100;
     }

     .auth-modal-close:hover {
         color: #fff;
     }

     .auth-tabs {
         display: flex;
         margin-bottom: 1.2rem;
         background-color: #1a1a1a;
         border-radius: 8px;
         padding: 4px;
         gap: 4px;
         position: relative;
         z-index: 1;
     }

     .auth-tab {
         flex: 1;
         padding: 10px 8px;
         border-radius: 6px;
         border: none;
         background-color: #1a1a1a;
         color: #FFD700;
         font-weight: bold;
         cursor: pointer;
         transition: background-color 0.3s, color 0.3s;
         font-size: 0.85rem;
     }

     .auth-tab.active {
         background-color: #4B0082;
         color: #FFD700;
     }

     .auth-tab:not(.active) {
         background-color: #1a1a1a;
         color: #FFD700;
     }

     .auth-tab:not(.active):hover {
         background-color: #252525;
         color: #FFD700;
     }

     .auth-form {
         display: flex;
         flex-direction: column;
         gap: 1rem;
     }

     .auth-form .form-group {
         position: relative;
         z-index: 1;
     }

     .auth-form .form-label {
         display: block;
         color: #fff;
         font-size: 0.8rem;
         font-weight: 500;
         margin-bottom: 0.4rem;
     }

     .auth-form .input-wrapper {
         position: relative;
         display: flex;
         align-items: center;
     }

     .auth-form .form-input {
         width: 100%;
         padding: 10px 10px 10px 35px;
         background-color: #1f1f1f;
         border: 1px solid #3a3a3a;
         border-radius: 6px;
         color: white;
         font-size: 0.9rem;
         box-sizing: border-box;
     }

     .auth-form .form-input:focus {
         outline: none;
         border-color: #ff5722;
     }

     .auth-form .form-input::placeholder {
         color: #666;
     }

     .auth-form .input-icon {
         position: absolute;
         left: 10px;
         color: #888;
         font-size: 1rem;
         pointer-events: none;
     }

     .auth-form .form-group:focus-within .input-icon {
         color: #ff5722;
     }

     .auth-form .form-helper {
         font-size: 0.7rem;
         color: #888;
         margin-top: 0.2rem;
         margin-left: 0;
     }

     .auth-form .submit-btn {
         background-color: #4B0082;
         border: none;
         padding: 12px;
         border-radius: 6px;
         color: #FFD700;
         font-size: 0.9rem;
         font-weight: bold;
         cursor: pointer;
         margin-top: 0.4rem;
         width: 100%;
         transition: background-color 0.3s;
     }

     .auth-form .submit-btn:hover {
         background-color: #6A0DAD;
     }

     .auth-form .form-footer {
         font-size: 0.8rem;
         color: #888;
         text-align: center;
         margin-top: 0.8rem;
     }

     .auth-form .form-footer a,
     .auth-form .footer-link {
         color: #ff5722;
         text-decoration: none;
         cursor: pointer;
     }

     .auth-form .form-footer a:hover,
     .auth-form .footer-link:hover {
         text-decoration: underline;
     }

     .password-toggle {
         position: absolute;
         right: 10px;
         background: none;
         border: none;
         color: #888;
         cursor: pointer;
         padding: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1rem;
     }

     .password-toggle:hover {
         color: #ff5722;
     }

     .password-toggle i {
         pointer-events: none;
     }

     .auth-form-container {
         display: none;
     }

     .auth-form-container.active {
         display: block;
     }

     @media (max-width: 768px) {
         .auth-modal-content {
             max-width: 95%;
             width: 95%;
             padding: 1.5rem;
             border-radius: 12px;
         }

         .auth-modal-close {
             top: 10px;
             right: 15px;
             font-size: 1.5rem;
         }

         .auth-tabs {
             margin-bottom: 1.2rem;
             padding: 4px;
             gap: 4px;
         }

         .auth-tab {
             padding: 10px 8px;
             font-size: 0.85rem;
         }

         .auth-form {
             gap: 1rem;
         }

         .auth-form .form-label {
             font-size: 0.8rem;
             margin-bottom: 0.4rem;
         }

         .auth-form .form-input {
             padding: 10px 10px 10px 35px;
             font-size: 16px;
             border-radius: 6px;
         }

         .auth-form .input-icon {
             left: 10px;
             font-size: 1rem;
         }

         .auth-form .form-helper {
             font-size: 0.7rem;
             margin-top: 0.2rem;
         }

         .auth-form .submit-btn {
             padding: 12px;
             font-size: 0.9rem;
             border-radius: 6px;
         }

         .auth-form .form-footer {
             font-size: 0.8rem;
             margin-top: 0.8rem;
         }

         .password-toggle {
             right: 10px;
             font-size: 1rem;
         }
     }

     @media (max-width: 480px) {
         .auth-modal-content {
             max-width: 98%;
             width: 98%;
             padding: 1.2rem;
             border-radius: 10px;
         }

         .auth-modal-close {
             top: 8px;
             right: 12px;
             font-size: 1.3rem;
         }

         .auth-tabs {
             margin-bottom: 1rem;
             padding: 3px;
             gap: 3px;
         }

         .auth-tab {
             padding: 8px 6px;
             font-size: 0.75rem;
         }

         .auth-form {
             gap: 0.9rem;
         }

         .auth-form .form-label {
             font-size: 0.75rem;
             margin-bottom: 0.35rem;
         }

         .auth-form .form-input {
             padding: 9px 9px 9px 32px;
             font-size: 16px;
             border-radius: 6px;
         }

         .auth-form .input-icon {
             left: 9px;
             font-size: 0.95rem;
         }

         .auth-form .form-helper {
             font-size: 0.65rem;
             margin-top: 0.15rem;
         }

         .auth-form .submit-btn {
             padding: 11px;
             font-size: 0.85rem;
             border-radius: 6px;
         }

         .auth-form .form-footer {
             font-size: 0.75rem;
             margin-top: 0.7rem;
         }

         .password-toggle {
             right: 9px;
             font-size: 0.95rem;
         }
     }

     /* Central de Ajuda */
     .icon-button.help-button {
         font-size: 24px;
         font-weight: bold;
     }

     #help-modal-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.8);
         backdrop-filter: blur(5px);
         z-index: 2000;
         display: none;
         align-items: center;
         justify-content: center;
         padding: 20px;
     }

     #help-modal-overlay.show {
         display: flex;
     }

     #help-modal-content {
         background: #1a1a1a;
         border-radius: 8px;
         max-width: 300px;
         width: 100%;
         max-height: 75vh;
         overflow-y: auto;
         position: relative;
         border: 1px solid #333;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
     }

     #help-modal-content::-webkit-scrollbar {
         width: 5px;
     }

     #help-modal-content::-webkit-scrollbar-track {
         background: #1a1a1a;
     }

     #help-modal-content::-webkit-scrollbar-thumb {
         background: #8B0000;
         border-radius: 4px;
     }

     .help-header {
         background: linear-gradient(135deg, #4B0082, #8A2BE2);
         padding: 6px 10px;
         border-radius: 8px 8px 0 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid #FFD700;
     }

     .help-header h2 {
         color: #FFD700;
         font-size: 12px;
         font-weight: bold;
         margin: 0;
         display: flex;
         align-items: center;
         gap: 4px;
     }

     .help-close {
         background: rgba(0, 0, 0, 0.3);
         border: 1px solid #FFD700;
         color: #FFD700;
         width: 18px;
         height: 18px;
         border-radius: 50%;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 12px;
         font-weight: bold;
         transition: all 0.3s ease;
     }

     .help-close:hover {
         background: rgba(255, 215, 0, 0.2);
         transform: scale(1.1);
     }

     .help-tabs {
         display: flex;
         gap: 3px;
         padding: 4px 8px;
         background: #0f0f0f;
         border-bottom: 1px solid #333;
         flex-wrap: wrap;
     }

     .help-tab {
         padding: 3px 6px;
         background: #1a1a1a;
         border: 1px solid #333;
         border-radius: 3px;
         color: #888;
         cursor: pointer;
         transition: all 0.3s ease;
         font-weight: 600;
         font-size: 8px;
     }

     .help-tab:hover {
         background: #252525;
         color: #fff;
     }

     .help-tab.active {
         background: linear-gradient(135deg, #4B0082, #8A2BE2);
         border-color: #FFD700;
         color: #FFD700;
     }

     .help-content {
         padding: 8px 10px;
         color: #fff;
     }

     .help-section {
         display: none;
     }

     .help-section.active {
         display: block;
     }

     .help-section h3 {
         color: #FFD700;
         font-size: 11px;
         margin-top: 0;
         margin-bottom: 6px;
         display: flex;
         align-items: center;
         gap: 4px;
     }

     .help-section h4 {
         color: #FFD700;
         font-size: 9px;
         margin-top: 10px;
         margin-bottom: 4px;
     }

     .help-section p {
         color: #ccc;
         line-height: 1.3;
         margin-bottom: 6px;
         font-size: 8px;
     }

     .help-section ul {
         color: #ccc;
         line-height: 1.4;
         margin-bottom: 10px;
         padding-left: 14px;
         font-size: 8px;
     }

     .help-section li {
         margin-bottom: 3px;
     }

     .help-section strong {
         color: #FFD700;
         font-size: 8px;
     }

     .help-section code {
         background: #0f0f0f;
         padding: 1px 3px;
         border-radius: 2px;
         color: #FFD700;
         font-family: monospace;
         font-size: 7px;
     }

     @media (max-width: 768px) {
         #help-modal-overlay {
             padding: 10px;
         }

         #help-modal-content {
             max-width: 100%;
             max-height: 95vh;
             border-radius: 12px;
         }

         .help-header {
             padding: 15px 20px;
             border-radius: 12px 12px 0 0;
         }

         .help-header h2 {
             font-size: 18px;
         }

         .help-close {
             width: 32px;
             height: 32px;
             font-size: 20px;
         }

         .help-tabs {
             padding: 8px 12px;
             gap: 6px;
             flex-wrap: wrap;
         }

         .help-tab {
             padding: 6px 12px;
             font-size: 11px;
             flex: 1 1 calc(50% - 3px);
             min-width: calc(50% - 3px);
         }

         .help-content {
             padding: 15px 12px;
         }

         .help-section h3 {
             font-size: 16px;
             margin-bottom: 12px;
         }

         .help-section h4 {
             font-size: 14px;
             margin-top: 20px;
             margin-bottom: 10px;
         }

         .help-section p {
             font-size: 13px;
             line-height: 1.5;
             margin-bottom: 12px;
         }

         .help-section ul {
             font-size: 13px;
             line-height: 1.6;
             margin-bottom: 15px;
             padding-left: 20px;
         }

         .help-section li {
             margin-bottom: 6px;
         }
     }

     @media (max-width: 480px) {
         #help-modal-overlay {
             padding: 5px;
         }

         #help-modal-content {
             max-height: 98vh;
             border-radius: 10px;
         }

         .help-header {
             padding: 12px 15px;
         }

         .help-header h2 {
             font-size: 16px;
         }

         .help-close {
             width: 28px;
             height: 28px;
             font-size: 18px;
         }

         .help-tabs {
             padding: 6px 10px;
             gap: 4px;
         }

         .help-tab {
             padding: 5px 8px;
             font-size: 10px;
             flex: 1 1 calc(50% - 2px);
             min-width: calc(50% - 2px);
         }

         .help-content {
             padding: 12px 10px;
         }

         .help-section h3 {
             font-size: 15px;
             margin-bottom: 10px;
         }

         .help-section h4 {
             font-size: 13px;
             margin-top: 15px;
             margin-bottom: 8px;
         }

         .help-section p {
             font-size: 12px;
             line-height: 1.4;
             margin-bottom: 10px;
         }

         .help-section ul {
             font-size: 12px;
             line-height: 1.5;
             margin-bottom: 12px;
             padding-left: 18px;
         }

         .help-section li {
             margin-bottom: 5px;
         }
     }

     #notification {
         position: fixed;
         top: 20px;
         left: 50%;
         transform: translateX(-50%);
         background-color: #4B0082;
         color: white;
         padding: 10px 20px;
         border-radius: 8px;
         z-index: 1001;
         display: none;
         font-weight: bold;
     }

     #notification.error {
         background-color: #e53e3e;
     }

     /* Notificações de Saque em Tempo Real */
     .withdraw-notification {
         position: fixed;
         top: 20px;
         left: 20px;
         background: linear-gradient(135deg, #4B0082, #800080);
         color: white;
         padding: 8px 12px;
         border-radius: 8px;
         box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
         z-index: 10000;
         max-width: 220px;
         animation: slideInLeft 0.4s ease-out, fadeOut 0.5s ease-in 4.5s;
         opacity: 1;
         transform: translateX(0);
         border: 1px solid rgba(255, 255, 255, 0.2);
         backdrop-filter: blur(10px);
         font-family: 'Inter', sans-serif;
         font-size: 0.75rem;
     }

     .withdraw-notification.hide {
         animation: slideOutLeft 0.4s ease-in forwards;
     }

     .withdraw-notification-header {
         display: flex;
         align-items: center;
         gap: 6px;
         margin-bottom: 4px;
         font-size: 0.65rem;
         color: rgba(255, 255, 255, 0.9);
         text-transform: uppercase;
         letter-spacing: 0.3px;
         font-weight: 600;
     }

     .withdraw-notification-icon {
         width: 12px;
         height: 12px;
         background: rgba(255, 255, 255, 0.2);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 8px;
         flex-shrink: 0;
     }

     .withdraw-notification-content {
         font-size: 0.75rem;
         line-height: 1.3;
     }

     .withdraw-notification-name {
         font-weight: 600;
         color: #fff;
         font-size: 0.7rem;
     }

     .withdraw-notification-amount {
         font-weight: 700;
         color: #fde047;
         font-size: 0.85rem;
         margin-top: 2px;
         display: block;
     }

     @keyframes slideInLeft {
         from {
             transform: translateX(-300px);
             opacity: 0;
         }
         to {
             transform: translateX(0);
             opacity: 1;
         }
     }

     @keyframes slideOutLeft {
         from {
             transform: translateX(0);
             opacity: 1;
         }
         to {
             transform: translateX(-300px);
             opacity: 0;
         }
     }

     @keyframes fadeOut {
         from {
             opacity: 1;
         }
         to {
             opacity: 0.7;
         }
     }

     @media (max-width: 768px) {
         .withdraw-notification {
             top: 10px;
             left: 10px;
             max-width: 180px;
             padding: 6px 10px;
             font-size: 0.7rem;
         }
         
         .withdraw-notification-header {
             font-size: 0.6rem;
         }
         
         .withdraw-notification-content {
             font-size: 0.7rem;
         }
         
         .withdraw-notification-name {
             font-size: 0.65rem;
         }
         
         .withdraw-notification-amount {
             font-size: 0.75rem;
         }
     }
    .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(12px);
        z-index: 1200;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    .modal-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    .modal-container {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        z-index: 1250;
        overflow-y: auto;
        padding-top: 20vh !important;
        padding: 20px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    .modal-container.active {
        opacity: 1;
        visibility: visible;
    }

    .modal-wrapper {
        width: 100%;
        max-width: 420px;
        position: relative;
        margin-top: 50px;
    }

    .modal-card {
        background-color: rgba(20, 5, 30, 0.95);
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        border: 1px solid #4B0082;
        width: 100%;
        background-image: none;
        box-shadow: 0 0 20px rgba(75, 0, 130, 0.5);
    }

    .deposit-card {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .modal-close {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 215, 0, 0.5);
        border-radius: 50%;
        color: #FFD700;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 20px;
        z-index: 100;
        backdrop-filter: blur(10px);
        font-weight: bold;
    }

    .modal-close:hover {
        background: rgba(255, 215, 0, 0.2);
        border-color: #FFD700;
    }

    .deposit-header-img {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
        pointer-events: none;
        border-radius: 16px 16px 0 0;
        display: block;
        height: auto;
        margin: 0;
        padding: 0;
        vertical-align: top;
    }

    .modal-body {
        padding: 20px 25px 25px;
        position: relative;
        transition: min-height 0.2s ease-in-out;
        margin-top: 0;
    }

    .form-title {
        color: #FFD700;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .deposit-title {
        color: #FFD700;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .deposit-title::before {
        content: '💰';
        font-size: 24px;
    }

    .input-group {
        margin-bottom: 20px;
    }

    .input-label {
        display: block;
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .amount-input,
    .text-input {
        width: 100%;
        padding: 16px;
        background: rgba(75, 0, 130, 0.3);
        border: 1px solid #8A2BE2;
        border-radius: 12px;
        color: white;
        font-size: 16px;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

    .amount-input:focus,
    .text-input:focus {
        outline: none;
        border-color: #FFD700;
        box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
    }

    .deposit-form .amount-input {
        border: 1px solid #e5484d;
        font-weight: 600;
    }

    .deposit-form .amount-input:focus {
        border-color: #FFD700;
        box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.3);
    }

    .min-value-notice {
        display: block;
        color: #888;
        font-size: 12px;
        margin-top: 8px;
    }

    .values-grid {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 20px 0;
        width: 100%;
    }

    .value-btn {
        background: rgba(75, 0, 130, 0.5);
        border: 1px solid #8A2BE2;
        color: #ffffff;
        padding: 12px 8px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        font-size: 14px;
        white-space: nowrap;
        text-align: center;
        flex: 1 1 0;
        min-width: 60px;
    }

    .value-btn:hover {
        background: #2a2a2a;
        border-color: #444;
    }

    .value-btn.quente,
    .value-btn.selected {
        background-color: #4B0082;
        border: 1px solid #FFD700;
        color: #FFD700;
        box-shadow: none;
    }

    .quente-tag {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: #FFD700;
        color: #000;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 10px;
        white-space: nowrap;
    }

    .generate-btn {
        width: 100%;
        border: none;
        padding: 16px 24px;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all 0.3s ease;
    }

    .deposit-form .generate-btn {
        background: linear-gradient(135deg, #FFD700, #FF8C00);
        color: #4B0082;
        box-shadow: none;
        margin-top: 10px;
        font-weight: bold;
    }

    .deposit-form .generate-btn:hover {
        background: linear-gradient(135deg, #FFC700, #FF7C00);
        transform: translateY(-2px);
    }

    .withdraw-form .generate-btn {
        background: linear-gradient(135deg, #FFD700, #FF8C00);
        color: #4B0082;
        margin-top: 16px;
    }

    .withdraw-form .generate-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(255, 140, 0, 0.6);
    }

    .pix-input-container {
        display: flex;
        gap: 12px;
    }

    .pix-selector {
        width: 100px;
        background: rgba(75, 0, 130, 0.3);
        border: 1px solid #8A2BE2;
        border-radius: 12px;
        color: white;
        padding: 16px 8px;
        cursor: pointer;
        text-align: center;
        font-size: 14px;
    }

    .pix-input {
        flex: 1;
        padding: 16px 20px;
        background: rgba(75, 0, 130, 0.3);
        border: 1px solid #8A2BE2;
        border-radius: 12px;
        color: white;
        font-size: 16px;
    }

    .pix-selector:focus,
    .pix-input:focus {
        outline: none;
        border-color: #FFD700;
        background: rgba(75, 0, 130, 0.5);
    }

    .dual-inputs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .qr-section {
        text-align: center;
        display: none;
    }

    .qr-section.active {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        height: 100%;
    }

    .qr-title {
        color: white;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 0;
    }

    .qr-description {
        color: #888888;
        margin-bottom: 0;
        font-size: 14px;
    }

    .qr-image-wrapper {
        position: relative;
        width: 250px;
        height: 250px;
        margin: 0;
    }

    .qr-image {
        width: 100%;
        height: 100%;
        background: white;
        padding: 2px;
        border-radius: 16px;
    }

    .qr-paid-overlay {
        position: absolute;
        inset: 0;
        background: rgba(34, 197, 94, 0.9);
        border-radius: 16px;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        font-weight: 800;
        color: white;
        z-index: 10;
    }

    .qr-paid-overlay.active {
        display: flex;
    }

    .qr-code-container {
        display: flex;
        gap: 8px;
        width: 100%;
        max-width: 280px;
    }

    .qr-input {
        flex: 1;
        padding: 12px;
        background: #2a2a2a;
        border: 1px solid #3a3a3a;
        border-radius: 8px;
        color: white;
    }

    .copy-btn {
        background: #dc2626;
        color: white;
        border: none;
        padding: 12px 16px;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
    }

    .input-group.compact {
        margin-bottom: 12px;
    }

    .rollover-notice {
        display: none;
        background-color: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.5);
        color: #ef4444;
        padding: 10px;
        border-radius: 8px;
        font-size: 13px;
        text-align: center;
        margin-top: -5px;
        margin-bottom: 15px;
    }

    .loading-overlay {
        position: absolute;
        inset: 0;
        background: rgba(16, 16, 18, 0.7);
        backdrop-filter: blur(4px);
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .loading-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .loading-overlay .spinner {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 5px solid rgba(255, 255, 255, 0.2);
        border-top-color: #dc2626;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
.history-modal-content {
    position: relative;
    max-width: 420px; /* Mantém o tamanho mobile */
    width: 90%;
    background: linear-gradient(135deg, #1a0b2e 0%, #4b0082 100%);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #FFD700;
    text-align: center;
    color: white;
    box-shadow: 0 0 20px rgba(75, 0, 130, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 80vh; /* Limita a altura para caber na tela */
}
.history-modal-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #FFD700;
    margin-bottom: 15px;
}
.history-modal-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFD700;
}
.history-modal-close {
    font-size: 2rem;
    color: #FFD700;
    cursor: pointer;
    background: none;
    border: none;
}
#history-list {
    overflow-y: auto; /* Adiciona scroll se o conteúdo for grande */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 10px; /* Espaço para o scrollbar */
}
.history-item {
    background-color: rgba(75, 0, 130, 0.3);
    border-radius: 8px;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 5px 15px;
    text-align: left;
    border-left: 4px solid #FFD700;
}
.history-item.loss {
    border-left-color: #e53e3e;
}
.history-item p {
    margin: 0;
    font-size: 0.9rem;
}
.history-item .label {
    color: #aaa;
    font-size: 0.8rem;
}
.history-item .value {
    font-weight: bold;
}
.history-item .result-win {
    color: #48bb78; /* Verde */
}
.history-item .result-loss {
    color: #e53e3e; /* Vermelho */
}
.history-item .timestamp {
    grid-column: 1 / -1; /* Ocupa a linha inteira */
    color: #888;
    font-size: 0.75rem;
    text-align: right;
    margin-top: 5px;
}
#no-history-message {
    color: #888;
    padding: 40px 0;
}
.affiliate-modal-content {
    position: relative;
    max-width: 420px;
    width: 90%;
    background: linear-gradient(135deg, #1a0b2e 0%, #4b0082 100%);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #FFD700;
    color: white;
    box-shadow: 0 0 20px rgba(75, 0, 130, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}
.affiliate-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #FFD700;
    margin-bottom: 15px;
}
.affiliate-modal-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFD700;
}
.affiliate-modal-close {
    font-size: 2rem;
    color: #FFD700;
    cursor: pointer;
    background: none;
    border: none;
}
.affiliate-section {
    background-color: rgba(75, 0, 130, 0.3);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}
.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #FFD700;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.link-container {
    display: flex;
    background: rgba(75, 0, 130, 0.3);
    border: 1px solid #8A2BE2;
    border-radius: 8px;
}
#affiliate-link-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: #ddd;
    padding: 10px;
    font-size: 0.9rem;
    outline: none;
}
#copy-link-btn {
    background: linear-gradient(135deg, #FFD700, #FF8C00);
    border: none;
    color: #4B0082;
    padding: 0 15px;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    font-weight: bold;
}
.stats-grid-affiliate {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
}
.stat-item-affiliate .value {
    font-size: 1.3rem;
    font-weight: bold;
    color: #ffc83d;
}
.stat-item-affiliate .label {
    font-size: 0.8rem;
    color: #aaa;
}
.commission-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.commission-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(75, 0, 130, 0.3);
    padding: 8px 12px;
    border-radius: 6px;
}
.commission-item .label { color: #ddd; }
.commission-item .value { font-weight: bold; color: #ef4444; font-size: 1.1rem; }

#affiliate-history-list {
    overflow-y: auto;
    max-height: 200px; /* Altura máxima para a lista de histórico */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 5px;
}
.history-item-affiliate {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: rgba(75, 0, 130, 0.3);
    padding: 10px;
    border-radius: 6px;
    align-items: center;
    text-align: center;
}
.history-item-affiliate p { margin: 0; font-size: 0.9rem; }
.history-item-affiliate .label { font-size: 0.75rem; color: #aaa; }
.history-item-affiliate .value { font-weight: 600; }
.history-item-affiliate .user-id .value { color: #FFD700; }
.history-item-affiliate .deposit .value { color: #ffffff; }
.history-item-affiliate .commission .value { color: #00FF00; }

#depositos-trazidos-list {
    scrollbar-width: thin;
    scrollbar-color: #444 #2c2c2c;
}
#depositos-trazidos-list::-webkit-scrollbar {
    width: 6px;
}
#depositos-trazidos-list::-webkit-scrollbar-track {
    background: #2c2c2c;
    border-radius: 3px;
}
#depositos-trazidos-list::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}
#depositos-trazidos-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}
#depositos-completo-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

#depositos-completo-modal-overlay.show {
    display: flex !important;
}

.deposito-completo-item {
    background-color: rgba(75, 0, 130, 0.3);
    border-radius: 8px;
    padding: 15px;
    border-left: 3px solid #FFD700;
}

.deposito-completo-item .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.deposito-completo-item .indicado-info {
    flex: 1;
}

.deposito-completo-item .indicado-nome {
    font-weight: 600;
    color: #FFD700;
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.deposito-completo-item .indicado-telefone {
    font-size: 0.8rem;
    color: #aaa;
}

.deposito-completo-item .data {
    font-size: 0.75rem;
    color: #888;
    text-align: right;
}

.deposito-completo-item .valores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #333;
}

.deposito-completo-item .valor-item {
    text-align: center;
}

.deposito-completo-item .valor-label {
    font-size: 0.7rem;
    color: #aaa;
    margin-bottom: 3px;
}

.deposito-completo-item .valor-deposito {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
}

.deposito-completo-item .valor-ganho {
    font-size: 1.1rem;
    font-weight: 600;
    color: #00FF00;
}

/* Estilos para o Checkbox de 18+ */
.checkbox-group {
    margin: 15px 0;
}

.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.4;
    text-align: left;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #FFD700;
}

.checkbox-text {
    user-select: none;
}

.checkbox-wrapper:hover .checkbox-text {
    color: #fff;
}