* { -webkit-tap-highlight-color: transparent; }
body, html { 
    margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; background-color: #38200f; touch-action: manipulation;
    -webkit-user-select: none; -ms-user-select: none; user-select: none;
}
.logo, .cta-image, .cup-prize { pointer-events: none; }
#loading-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 99999;
    display: flex; justify-content: center; align-items: flex-end; transition: opacity 0.5s ease-out, visibility 0.5s;
}
#loading-video {
    position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto;
    transform: translate(-50%, -50%); z-index: 1;
}
.loading-content { position: relative; z-index: 2; width: 80%; max-width: 400px; margin-bottom: 15vh; text-align: center; }
.loading-text { color: white; font-size: 1rem; font-weight: 600; margin-bottom: 10px; text-shadow: 0 0 8px rgba(0,0,0,0.7); }
.progress-bar-container { width: 100%; height: 8px; background-color: rgba(255, 255, 255, 0.2); border-radius: 4px; overflow: hidden; }
.progress-bar { width: 0; height: 100%; background-color: #f7a23b; border-radius: 4px; animation: loading-progress 6s linear forwards; }
@keyframes loading-progress { from { width: 0%; } to { width: 100%; } }
.game-screen { width: 100%; height: 100%; max-width: 420px; margin: 0 auto; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; box-sizing: border-box; }
#game-container { background-image: url('images/assets/bg5.webp'); display: flex; flex-direction: column; align-items: center; }
.bg-overlay-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.7s ease-in-out; z-index: 1; }
.logo { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); width: 50%; max-width: 160px; height: auto; z-index: 5; }
.game-header { position: absolute; top: 4%; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 20; background: linear-gradient(to bottom, #7a3a0d, #4a2a10); border: 2px solid #f7a23b; border-radius: 20px; padding: 5px 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.3); }
.user-info { display: flex; align-items: center; gap: 8px; color: white; cursor: pointer; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: #f7941d; color: #38200f; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; border: 1px solid #fff; }
.user-details span { display: block; font-size: 0.8rem; opacity: 0.8; color: #f0e6d2; line-height: 1; }
.user-details strong { font-size: 0.9rem; font-weight: 700; color: #ffffff; line-height: 1; }
.header-buttons { display: flex; align-items: center; gap: 5px; }
.withdraw-header-btn, .deposit-header-btn { width: 80px; height: auto; cursor: pointer; }
.deposit-header-btn { width: 80px; }
.cta-image { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); width: 90%; max-width: 350px; height: auto; z-index: 5; }
.play-button { position: absolute; bottom: 25%; left: 50%; transform: translateX(-50%); width: 45%; max-width: 160px; height: auto; cursor: pointer; transition: transform 0.2s ease; z-index: 10; }
.play-button:active { transform: translateX(-50%) scale(0.95); }
.game-buttons-container { position: absolute; bottom: 25%; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; align-items: center; justify-content: center; width: 100%; z-index: 10; padding: 0 15px; box-sizing: border-box; }
.play-game-button, .deposit-button { width: 180px; max-width: 48%; height: auto; cursor: pointer; transition: transform 0.2s ease; }
.play-game-button:active, .deposit-button:active { transform: scale(0.95); }
.how-to-play { position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; padding: 6px 14px; background-color: rgba(200, 200, 200, 0.7); border-radius: 20px; font-size: 0.8rem; font-weight: 600; color: #1a1a1a; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease; z-index: 10; }
.how-to-play:active { background-color: rgba(200, 200, 200, 0.9); }
.how-to-play svg { margin-right: 6px; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity .3s ease; }
.modal-overlay.show { display: flex; opacity: 1; }
#rules-modal-overlay { z-index: 1000; }
.rules-modal-content { background-color: #38200f; width: 90%; max-width: 380px; padding: 20px; border-radius: 16px; border: 2px solid #a46628; position: relative; color: #f0e6d2; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.rules-modal-close { position: absolute; top: 15px; right: 15px; background: none; border: none; color: #f7a23b; font-size: 2rem; font-weight: bold; cursor: pointer; line-height: 1; width: 24px; height: 24px; }
.rules-modal-content h2 { text-align: center; color: #f7a23b; font-size: 1.5rem; font-weight: 700; margin-bottom: 15px; }
.rules-modal-content .description { text-align: center; font-size: 0.9rem; margin-bottom: 20px; }
.rules-modal-content h3 { text-align: center; color: #f7a23b; font-weight: 600; margin-bottom: 10px; font-size: 1.1rem; }
.prize-item, .bonus-box { display: flex; align-items: center; gap: 15px; background-color: rgba(0, 0, 0, 0.2); padding: 12px; border-radius: 8px; margin-bottom: 10px; border: 1px solid #a46628; }
.prize-item img, .prize-item svg { width: 40px; height: 40px; flex-shrink: 0; }
.prize-item strong { display: block; color: #f7a23b; font-weight: 600; }
.prize-item span { font-size: 0.8rem; }
.bonus-box { background-color: #4a2a10; border: 1px solid #f7a23b; margin-top: 20px; flex-direction: column; align-items: center; text-align: center; gap: 5px; }
.bonus-box strong { color: #f7a23b; font-size: 1.1rem; font-weight: 700; }
.bonus-box span { font-size: 0.8rem; }
#rules-modal-close-btn { width: 100%; padding: 12px; margin-top: 20px; background-color: #f7941d; border: none; border-radius: 8px; color: #38200f; font-weight: 700; font-size: 1rem; cursor: pointer; transition: transform 0.2s ease; }
#rules-modal-close-btn:active { transform: scale(0.98); }
#auth-modal-overlay { z-index: 1010; }
.auth-modal-content { width: 90%; max-width: 380px; min-height: 660px; height: auto; background-image: url('images/assets/bg-login.webp'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; position: relative; display: flex; flex-direction: column; align-items: center; padding: 55px 40px 40px; box-sizing: border-box; }
.auth-modal-close { position: absolute; top: 40px; right: 30px; background: none; border: none; color: #fff; font-size: 2.5rem; font-weight: bold; cursor: pointer; line-height: 1; opacity: 0.7; width: 28px; height: 28px; }
.auth-modal-close:hover { opacity: 1; }
.auth-tabs { display: flex; width: 100%; max-width: 280px; margin-bottom: 20px; }
.auth-tab { flex: 1; padding: 10px; background-color: #5a2d0c; color: #f0e6d2; border: none; font-weight: 600; cursor: pointer; opacity: 0.7; border-bottom: 3px solid #5a2d0c; }
.auth-tab:first-child { border-top-left-radius: 8px; }
.auth-tab:last-child { border-top-right-radius: 8px; }
.auth-tab.active { background-color: #f7941d; color: #38200f; opacity: 1; border-bottom: 3px solid #f7941d; }
.auth-form-container { display: none; width: 100%; max-width: 280px; }
.auth-form-container.active { display: block; }
.auth-form { display: flex; flex-direction: column; gap: 15px; }
.input-group { position: relative; }
.input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #a46628; }
.auth-input { width: 100%; padding: 12px; background-color: #38200f; border: 2px solid #a46628; border-radius: 8px; color: #f0e6d2; font-size: 0.9rem; box-sizing: border-box; }
.input-with-icon { padding-left: 42px !important; }
.auth-input::placeholder { color: #a46628; }
#history-container { background-image: url('images/assets/h1.webp'); display: none; }
#history-container-2 { background-image: url('images/assets/h2.webp'); display: none; }
#history-container-3 { background-image: url('images/assets/h3.webp'); display: none; }
.history-continue-btn { width: 90%; max-width: 350px; padding: 14px; background-color: #f7941d; border: none; border-radius: 8px; color: #38200f; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: transform 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); }
.history-continue-btn:active { transform: translateX(-50%) scale(0.98); }
@keyframes gentleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
#game-message { position: absolute; top: 31%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.6); color: white; padding: 6px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; z-index: 10; display: none; white-space: nowrap; transition: opacity 0.3s ease; }
#cups-container { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); width: 90%; max-width: 350px; display: none; justify-content: space-around; align-items: center; z-index: 5; }
.cup-wrapper { position: relative; width: 100px; height: 120px; display: flex; justify-content: center; align-items: center; transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1); }
.cup-img { width: 100%; height: auto; position: absolute; bottom: 0; z-index: 2; transition: transform 0.4s ease-out; cursor: pointer; }
.cup-prize { width: 50px; height: 50px; position: absolute; bottom: 10px; z-index: 1; opacity: 0; transition: opacity 0.3s ease; animation: gentleBob 1.5s ease-in-out infinite; }
.cup-wrapper.reveal .cup-img { transform: translateY(-65px); }
.cup-wrapper.reveal .cup-prize { opacity: 1; }
.cup-wrapper.chosen .cup-img { transform: translateY(-65px); }
.cup-wrapper.chosen .cup-prize { opacity: 1; }
#game-controls-bar { position: absolute; bottom: 18%; left: 0; width: 100%; display: none; justify-content: space-around; align-items: center; padding: 0 10px; box-sizing: border-box; z-index: 10; }
.control-box { width: 30%; max-width: 110px; height: 60px; background-size: contain; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; position: relative; }
.control-box-value { color: white; font-size: 0.75rem; font-weight: 700; position: absolute; top: 55%; left: 60%; transform: translate(-50%, -50%); text-shadow: 1px 1px 2px rgba(0,0,0,0.5); white-space: nowrap; }
#no-balance-warning { display: none; position: absolute; bottom: 28%; text-align: center; background: rgba(255, 0, 0, 0.7); color: white; padding: 8px; border-radius: 8px; font-size: 0.8rem; z-index: 11; font-weight: 600; width: 90%; max-width: 350px; }
#saldo-box { background-image: url('images/assets/saldo.webp'); }
#aposta-box { background-image: url('images/assets/aposta.webp'); }
#ganhos-box { background-image: url('images/assets/ganhos.webp'); }
#game-spin-controls { position: absolute; bottom: 5%; left: 0; width: 100%; display: none; justify-content: center; align-items: center; gap: 20px; z-index: 10; }
.spin-btn-img { width: 75px; height: auto; cursor: pointer; transition: transform 0.2s ease; }
.spin-btn-img.spin { width: 105px; height: auto; }
.spin-btn-img:active { transform: scale(0.95); }
.spin-btn-img[disabled] { filter: grayscale(0.7); cursor: not-allowed; }
#win-modal-overlay { z-index: 2000; }
.win-modal-content { position: relative; width: 90%; max-width: 380px; }
.win-modal-content img { width: 100%; height: auto; }
#win-value-animation { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); color: #4ade80; font-size: 2.5rem; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.6); white-space: nowrap; font-family: 'Fredoka One', cursive; }
.win-modal-btn { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); width: 60%; padding: 14px; background-color: #f7941d; border: none; border-radius: 8px; color: #38200f; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: transform 0.2s ease; }
.win-modal-btn:active { transform: translateX(-50%) scale(0.98); }
.profile-modal-content { background-color: #412805; width: 90%; max-width: 380px; padding: 15px; border-radius: 20px; position: relative; color: white; box-shadow: 0 5px 25px rgba(0,0,0,0.5); font-family: 'Inter', sans-serif; border: 2px solid #e77728; }
.profile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background-color: rgba(0,0,0,0.15); padding: 10px; border-radius: 15px; }
.profile-user-info { display: flex; align-items: center; gap: 12px; }
.profile-avatar { background-color: #f7941d; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border: 2px solid white; flex-shrink: 0; }
.profile-avatar svg { width: 24px; height: 24px; color: white; }
.profile-user-details { display: flex; flex-direction: column; }
.profile-username { font-size: 1rem; font-weight: 700; }
.profile-welcome { font-size: 0.8rem; opacity: 0.9; line-height: 1; }
.profile-close-btn { background: rgba(0,0,0,0.2); border: none; color: white; font-size: 1.5rem; cursor: pointer; line-height: 1; width: 30px; height: 30px; border-radius: 50%; }
.profile-menu { display: flex; flex-direction: column; gap: 10px; }
.profile-menu-item { display: flex; align-items: center; gap: 15px; background-color: #a54f0f; border: 1px solid #e77728; padding: 10px 15px; border-radius: 10px; color: white; text-decoration: none; cursor: pointer; width: 100%; text-align: left; transition: background-color 0.2s ease; }
.profile-menu-item:active { background-color: #8c430d; }
.profile-icon { color: white; flex-shrink: 0; }
.profile-menu-text { flex-grow: 1; }
.profile-menu-text strong { display: block; font-size: 0.9rem; font-weight: 600; }
.profile-menu-text span { font-size: 0.75rem; opacity: 0.8; }
.arrow-right { font-size: 1.2rem; color: rgba(255,255,255,0.5); }
.profile-menu-item.logout { background-color: #c0392b; border-color: #c0392b; }
.profile-menu-item.logout:active { background-color: #a93226; }
.profile-footer { text-align: center; margin-top: 20px; font-size: 0.8rem; opacity: 0.9; padding: 10px; background-color: rgba(0,0,0,0.15); border-radius: 10px; }
#back-to-home-btn { display: none; position: absolute; top: 105px; left: 15px; z-index: 25; width: 36px; height: 36px; background-color: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 50%; align-items: center; justify-content: center; backdrop-filter: blur(5px); cursor: pointer; }
#back-to-home-btn:active { background-color: rgba(0,0,0,0.6); }
#back-to-home-btn svg { width: 20px; height: 20px; }
#game-utility-buttons { display: flex; position: absolute; top: 105px; right: 15px; z-index: 25; gap: 10px; }
.utility-btn { width: 36px; height: 36px; background-color: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); cursor: pointer; }
.utility-btn:active { background-color: rgba(0,0,0,0.6); }
#dynamic-winner-popup { position: absolute; top: 49%; left: 50%; transform: translateX(-50%); z-index: 6; color: #7b3306; font-size: 0.85rem; font-weight: 600; display: none; opacity: 0; transition: opacity 0.5s ease-in-out; white-space: nowrap; pointer-events: none; }
#dynamic-winner-popup strong { font-weight: 800; }
#carteira-modal-overlay { z-index: 1020; }
.carteira-modal-content { background-color: #38200f; width: 90%; max-width: 380px; padding: 20px 25px 20px 20px; border-radius: 16px; border: 2px solid #a46628; position: relative; color: #f0e6d2; box-shadow: 0 4px 20px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 15px; box-sizing: border-box; max-height: 95vh; overflow-y: auto; }
.carteira-modal-content::-webkit-scrollbar { width: 4px; }
.carteira-modal-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 4px; }
.carteira-modal-content::-webkit-scrollbar-thumb { background: #a46628; border-radius: 4px; }
.carteira-modal-content::-webkit-scrollbar-thumb:hover { background: #f7a23b; }
.carteira-header { background-color: #7a3a0d; border: 2px solid #f7a23b; border-radius: 12px; padding: 15px 10px; text-align: center; box-shadow: inset 0 1px 3px rgba(255,255,255,0.2), 0 2px 5px rgba(0,0,0,0.4); }
.carteira-icon-wrapper { background-color: #f7a23b; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin: -45px auto 10px; border: 3px solid #7a3a0d; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.balance-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.balance-card { background-color: #4a2a10; border: 1px solid #a46628; border-radius: 10px; padding: 12px; text-align: center; }
.balance-card .title { color: #f0e6d2; font-size: .85rem; }
.balance-card .amount { color: #f7a23b; font-weight: 700; margin-top: 4px; }
.balance-card .description { color: rgba(240,230,210,.7); font-size: .75rem; }
.carteira-actions { display: flex; gap: 10px; }
.carteira-btn { flex: 1; background-color: #7a3a0d; color: #f0e6d2; border: 1px solid #f7a23b; border-radius: 10px; padding: 12px; font-weight: 700; cursor: pointer; }
.carteira-btn.deposit-btn { background-color: #f7941d; color: #38200f; }
.history-section { background-color: rgba(0,0,0,0.15); border: 1px solid #a46628; border-radius: 10px; padding: 12px; }
.history-header h3 { color: #f0e6d2; margin: 0 0 4px 0; }
.history-header p { color: rgba(240,230,210,.7); margin: 0 0 8px 0; font-size: .85rem; }
.history-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.history-tab { flex: 1; background: #4a2a10; color: #f0e6d2; border: 1px solid #a46628; border-radius: 8px; padding: 8px; cursor: pointer; }
.history-tab.active { background-color: #f7941d; color: #38200f; border-color: #f7941d; }
.transaction-list { max-height: 300px; overflow-y: auto; overflow-x: hidden; padding-right: 5px; }
.transaction-list::-webkit-scrollbar { width: 4px; }
.transaction-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 4px; }
.transaction-list::-webkit-scrollbar-thumb { background: #a46628; border-radius: 4px; }
.transaction-list::-webkit-scrollbar-thumb:hover { background: #f7a23b; }
.modal-close-bottom { background: rgba(0,0,0,0.2); color: #fff; width: 32px; height: 32px; border: none; border-radius: 50%; align-self: center; cursor: pointer; }
#toast-notification { position: fixed; top: 20px; right: 20px; background-color: #22c55e; color: white; padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 9999; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(-20px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
#toast-notification.show { opacity: 1; transform: translateY(0); }
@media (min-height: 800px) { #dynamic-winner-popup { top: 48%; } }
@media (max-height: 740px) { #dynamic-winner-popup { top: 48%; } .play-button, .game-buttons-container { bottom: 22%; } .how-to-play { bottom: 15%; } }
@media (max-height: 660px) { #dynamic-winner-popup { top: 51%; } .play-button, .game-buttons-container { bottom: 20%; } .how-to-play { bottom: 12%; } }