/* Reset e Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
}

:root {
    --primary-color: #00ff9d;       /* Verde neon principal (mantém da logo) */
    --secondary-color: #ffcc00;     /* Amarelo vibrante para cartões/destaques */
    --tertiary-color: #1affb8;      /* Verde aqua auxiliar (efeitos) */

    --bg-color: #000000;            /* Fundo preto */
    --dark-bg-form: #0d0f14;        /* Fundo cartões */
    --darker-bg-form: #15171e;      /* Fundo mais escuro */

    --text-gray-light: #cccccc;
    --text-green-accent: #00ff9d;   /* Verde neon */
    --text-yellow-accent: #ffcc00;  /* Novo para usar em textos destaque */
}

html, body {
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--dark-bg-form);
    color: white;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 70px;
}

/* Header Styles */
.header-main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    width: 100%;
    background-color: var(--dark-bg-form);
    height: 80px;
    padding: 0 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-content-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo {
    width: 180px;
    border-radius: 8px;
}

.header-rasp-link {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
}

.header-right-section {
    display: flex;
    align-items: center;
    gap: 24px;
}

.register-link {
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 16px;
    transition: opacity 0.3s ease;
}

.register-link:hover {
    opacity: 0.9;
}

.login-button {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.login-button:hover {
    background-color: #2cb27a;
}

/* Logged in header styles */
.header-right-section-logged-in {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    color: white;
}

.balance-display {
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.deposit-button {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.deposit-button:hover {
    background-color: #2cb27a;
}

.user-profile-button-logged-in {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: var(--darker-bg-form);
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
}

.user-profile-button-logged-in:hover {
    background-color: #333333;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: black;
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.user-name-display {
    font-size: 14px;
    font-weight: 600;
}

.view-profile-text {
    font-size: 12px;
    color: var(--text-gray-light);
}

.profile-dropdown-menu-logged-in {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 10px;
    width: 250px;
    background-color: var(--darker-bg-form);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 50;
    font-size: 14px;
    flex-direction: column;
    padding: 8px 0;
    display: none;
}

.profile-dropdown-menu-logged-in.is-open {
    display: flex;
}

.dropdown-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 8px;
}

.dropdown-username {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.dropdown-welcome {
    font-size: 12px;
    color: var(--text-gray-light);
}

.dropdown-menu-item-logged-in {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    transition: background-color 0.3s ease;
    text-align: left;
    color: white;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
}

.dropdown-menu-item-logged-in i {
    margin-right: 12px;
    font-size: 16px;
    color: var(--text-gray-light);
}

.dropdown-menu-item-logged-in:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.logout-button-text-logged-in {
    color: #f87171;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px;
}

.logout-button-text-logged-in i {
    color: #f87171;
}

.logout-button-text-logged-in:hover {
    background-color: rgba(248, 113, 113, 0.1);
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: var(--dark-bg-form);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 60;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    text-decoration: none;
    height: 100%;
    transition: color 0.3s ease;
    text-align: center;
    padding: 0 5px;
    border: none;
    background: none;
    cursor: pointer;
}

.mobile-nav-item:hover {
    color: var(--primary-color);
}

.mobile-nav-item-highlight {
    background-color: var(--primary-color);
    border-radius: 50%;
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    color: var(--dark-bg-form);
    font-size: 24px;
}

.mobile-nav-item-highlight i {
    color: var(--dark-bg-form);
}

.mobile-nav-item-highlight:hover {
    color: var(--dark-bg-form);
    background-color: #2cb27a;
}

/* Main Content */
main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Hero Section */
.hero-section {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, var(--dark-bg-form) 0%, var(--darker-bg-form) 100%);
    border-radius: 20px;
    margin-bottom: 40px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    background: linear-gradient(135deg, white 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-gray-light);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2cb27a 100%);
    color: black;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(52, 211, 153, 0.3);
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 16px;
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: black;
    transform: translateY(-2px);
}

/* Cards Grid */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.card-raspadinha {
    background: linear-gradient(135deg, var(--darker-bg-form) 0%, #1e1e1e 100%);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(52, 211, 153, 0.1);
}

.card-raspadinha:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(52, 211, 153, 0.2);
    border-color: var(--primary-color);
}

.card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-raspadinha:hover .card-image img {
    transform: scale(1.1);
}

.card-price-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #2cb27a 100%);
    color: black;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
}

.card-content {
    padding: 25px;
}

.card-title {
    font-size: 18px;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

.card-prize {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 14px;
}

.card-description {
    color: var(--text-gray-light);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.card-button {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, #2cb27a 100%);
    color: black;
    font-weight: bold;
    padding: 12px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.card-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(52, 211, 153, 0.3);
}

/* Dashboard Styles */
.dashboard-container {
    padding: 20px 0;
}

.welcome-section {
    background: linear-gradient(135deg, var(--dark-bg-form) 0%, var(--darker-bg-form) 100%);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
}

.welcome-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.welcome-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #2cb27a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-weight: bold;
    font-size: 24px;
}

.welcome-text h1 {
    font-size: 28px;
    font-weight: bold;
    color: white;
    margin-bottom: 5px;
}

.welcome-text p {
    color: var(--text-gray-light);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(135deg, var(--darker-bg-form) 0%, #1e1e1e 100%);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.stat-card.primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2cb27a 100%);
    color: black;
}

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

.stat-label {
    font-size: 14px;
    opacity: 0.8;
}

.stat-icon {
    font-size: 24px;
    opacity: 0.3;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.quick-action {
    background: var(--darker-bg-form);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: white;
}

.quick-action:hover {
    border-color: var(--primary-color);
    transform: translateY(-3px);
}

.quick-action i {
    color: var(--primary-color);
    font-size: 24px;
    margin-bottom: 10px;
}

.quick-action span {
    display: block;
    font-weight: 500;
}

/* Recent Activity */
.recent-activity {
    background: var(--darker-bg-form);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 20px;
    padding: 30px;
}

.section-title {
    font-size: 20px;
    font-weight: bold;
    color: white;
    margin-bottom: 20px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: var(--dark-bg-form);
    border-radius: 12px;
}

.activity-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.activity-icon.deposit {
    background: rgba(52, 211, 153, 0.2);
    color: var(--primary-color);
}

.activity-icon.win {
    background: rgba(52, 211, 153, 0.2);
    color: var(--primary-color);
}

.activity-icon.bet {
    background: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.activity-info h4 {
    color: white;
    font-weight: 600;
    margin-bottom: 2px;
}

.activity-info p {
    color: var(--text-gray-light);
    font-size: 12px;
}

.activity-right {
    text-align: right;
}

.activity-amount {
    font-weight: bold;
    margin-bottom: 2px;
}

.activity-amount.positive {
    color: var(--primary-color);
}

.activity-amount.negative {
    color: #EF4444;
}

.activity-status {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(52, 211, 153, 0.2);
    color: var(--primary-color);
}

/* Forms */
.form-container {
    max-width: 450px;
    margin: 0 auto;
    background: var(--darker-bg-form);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.form-header {
    text-align: center;
    margin-bottom: 30px;
}

.form-logo {
    width: 150px;
    height: auto;
    margin-bottom: 20px;
    border-radius: 8px;
}

.form-title {
    font-size: 24px;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

.form-subtitle {
    color: var(--text-gray-light);
    font-size: 14px;
}

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

.form-group label {
    display: block;
    color: white;
    font-weight: 500;
    margin-bottom: 8px;
}

.input-group {
    position: relative;
}

.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-gray-light);
    font-size: 16px;
}

.form-input {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: 2px solid var(--border-color-input);
    border-radius: 12px;
    background: var(--dark-bg-form);
    color: white;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1);
}

.form-input::placeholder {
    color: var(--text-gray-light);
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.checkbox-group label {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 0;
}

.form-button {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, #2cb27a 100%);
    color: black;
    font-weight: bold;
    padding: 15px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.form-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(52, 211, 153, 0.3);
}

.form-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.form-link {
    text-align: center;
    margin-top: 20px;
}

.form-link a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

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

/* Modal Styles */
.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: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    background: var(--darker-bg-form);
    border-radius: 20px;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-color);
    color: black;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
}

.modal-close:hover {
    transform: scale(1.1);
}

.modal-title {
    font-size: 24px;
    font-weight: bold;
    color: white;
    margin-bottom: 20px;
    text-align: center;
}

/* Quick Amount Grid */
.quick-amount-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 20px 0;
}

.quick-amount-btn {
    position: relative;
    padding: 15px;
    border: 2px solid var(--border-color-input);
    border-radius: 12px;
    background: var(--dark-bg-form);
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.quick-amount-btn:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.quick-amount-btn.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--primary-color) 0%, #2cb27a 100%);
    color: black;
}

.bonus-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #F59E0B;
    color: black;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* QR Code Display */
.qr-display {
    text-align: center;
    padding: 20px 0;
}

.qr-code-container {
    background: white;
    padding: 20px;
    border-radius: 15px;
    display: inline-block;
    margin: 20px 0;
    border: 3px solid var(--primary-color);
}

.qr-code-container img {
    width: 200px;
    height: 200px;
}

.pix-code-input {
    position: relative;
    margin: 20px 0;
}

.pix-code-input input {
    width: 100%;
    padding: 15px 60px 15px 15px;
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    background: var(--dark-bg-form);
    color: white;
    font-family: monospace;
    font-size: 12px;
}

.copy-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--primary-color) 0%, #2cb27a 100%);
    color: black;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
}

.payment-status {
    background: var(--dark-bg-form);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 12px;
    padding: 15px;
    margin-top: 20px;
}

.status-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.status-header i {
    color: var(--primary-color);
}

.status-text {
    color: white;
    font-weight: 500;
}

.status-description {
    color: var(--text-gray-light);
    font-size: 12px;
}

/* Admin Styles */
.admin-container {
    padding: 20px;
}

.admin-header {
    background: linear-gradient(135deg, var(--darker-bg-form) 0%, #1e1e1e 100%);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.admin-title {
    font-size: 32px;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

.admin-subtitle {
    color: var(--text-gray-light);
    font-size: 16px;
}

.admin-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.admin-nav-item {
    background: var(--darker-bg-form);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: white;
}

.admin-nav-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(52, 211, 153, 0.2);
}

.admin-nav-item.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2cb27a 100%);
    color: black;
}

.admin-nav-item i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

.admin-content {
    background: var(--darker-bg-form);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 20px;
    padding: 30px;
}

/* Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.data-table th,
.data-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.data-table th {
    background: var(--dark-bg-form);
    color: var(--primary-color);
    font-weight: bold;
}

.data-table td {
    color: white;
}

.data-table tr:hover {
    background: rgba(52, 211, 153, 0.05);
}

/* Status Badges */
.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.status-badge.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.status-badge.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.status-badge.completed {
    background: rgba(52, 211, 153, 0.2);
    color: var(--primary-color);
}

/* Charts Container */
.charts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.chart-card {
    background: var(--dark-bg-form);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 15px;
    padding: 20px;
}

.chart-title {
    color: white;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Loading States */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-gray-light);
}

.loading i {
    font-size: 24px;
    margin-right: 10px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-gray-light);
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state h3 {
    color: white;
    margin-bottom: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-main {
        height: 60px;
        padding: 0 16px;
    }
    
    body {
        padding-top: 60px;
    }

    .mobile-bottom-nav {
        display: flex;
    }

    .header-logo {
        width: 70px;
    }

    .header-rasp-link {
        display: none;
    }

    .header-right-section {
        gap: 12px;
    }

    .register-link,
    .login-button {
        font-size: 13px;
        padding: 6px 10px;
    }

    .balance-display {
        font-size: 16px;
    }

    .deposit-button {
        padding: 6px 10px;
        font-size: 13px;
    }

    .user-avatar {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .user-info {
        display: none;
    }

    .profile-dropdown-menu-logged-in {
        width: 200px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-container {
        padding: 30px 20px;
        margin: 0 10px;
    }

    .modal-content {
        margin: 10px;
        padding: 20px;
    }

    .admin-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-container {
        grid-template-columns: 1fr;
    }

    .data-table {
        font-size: 14px;
    }

    .data-table th,
    .data-table td {
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .welcome-header {
        flex-direction: column;
        text-align: center;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .quick-amount-grid {
        grid-template-columns: 1fr;
    }

    .admin-nav {
        grid-template-columns: 1fr;
    }
}

/* Animations */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }

.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }

.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }

.hidden { display: none; }
.visible { display: block; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.text-primary { color: var(--primary-color); }
.text-white { color: white; }
.text-gray { color: var(--text-gray-light); }
.text-success { color: var(--success-color); }
.text-error { color: var(--error-color); }
.text-warning { color: var(--warning-color); }

.bg-primary { background-color: var(--primary-color); }
.bg-dark { background-color: var(--dark-bg-form); }
.bg-darker { background-color: var(--darker-bg-form); }

.home-main-container {
    max-width: 1020px;
    margin: 0 auto;
    padding: 18px 0 28px 0;
}

.live-ticker-main {
    display: flex; align-items: center; gap: 8px;
    background: #181d23; border-radius: 12px;
    padding: 9px 18px; margin: 14px 0 17px 0;
    overflow: hidden; min-height: 48px;
    box-shadow: 0 2px 10px 0 #00de9333;
}
.live-ticker-title {
    color: #fa0; font-weight: bold; margin-right: 15px;
    font-size: 1.1rem; min-width: 82px;
    display: flex; align-items: center; gap: 4px;
}
.live-ticker-track {
    display: flex; gap: 38px;
    animation: tickerScroll 26s linear infinite;
    white-space: nowrap;
}
@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-55%); }
}
.ticker-win {
    color: #fff; font-size: 1rem; opacity: .85; display: inline-flex; align-items: center; gap: 5px;
}
.ticker-win i { color: #ffe600; margin-right: 3px; }
.ticker-nome { font-weight: 600; margin-right: 7px; }
.ticker-premio { color: #00de93; font-weight: 500; margin-right: 4px; }
.ticker-valor { color: #fff; font-weight: 600; }

.quick-filters {
    display: flex; gap: 14px; margin: 0 0 19px 0; align-items: center;
}
.quick-filter {
    background: #1b222c; color: #00de93; font-weight: bold;
    border: none; border-radius: 8px; padding: 8px 19px;
    cursor: pointer; font-size: 1.05rem; box-shadow: 0 1px 6px 0 #00de9320;
    transition: background .19s, color .19s;
}
.quick-filter.active, .quick-filter:hover { background: #00de93; color: #181d23; }

.prizes-carousel-container {
    position: relative;
    margin: 0 auto 0 auto;
    max-width: 100%;
}
.prizes-carousel {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 9px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.prizes-carousel::-webkit-scrollbar { display: none; }
.prize-card {
    min-width: 250px; max-width: 260px;
    background: #181d23; border-radius: 14px;
    box-shadow: 0 2px 10px 0 #00de9333;
    padding: 0 0 13px 0;
    display: flex; flex-direction: column;
    scroll-snap-align: start;
    margin-bottom: 8px;
    position: relative;
}
/* Mini-banners do carrossel sem corte e sem “pulo” de layout */
.prize-card-img{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;      /* proporção estável */
  overflow: hidden;
  border-top-left-radius: 14px; border-top-right-radius: 14px;
  background: #0f1218;     /* barras laterais discretas quando “contain” */
}
.prize-card-img img{
  width: 100%; height: 100%;
  object-fit: contain;     /* <<< evita cortar a arte */
  object-position: center;
}
.prize-card-price {
    position: absolute; top: 9px; right: 10px;
    background: #00de93; color: #13151b; font-weight: bold;
    padding: 4px 10px; border-radius: 14px; font-size: .97rem; box-shadow: 0 1px 4px #00de9340;
}
.prize-card-content { padding: 12px 15px 0 15px; flex: 1; display: flex; flex-direction: column; }
.prize-card-content h3 {
    margin: 0 0 2px 0; font-size: 1.11rem; font-weight: bold; color: #fff;
}
.prize-max { color: #00de93; font-size: .97rem; font-weight: 500; margin-bottom: 6px; }
.prize-max span { color: #00de93; }
.prize-desc { color: #aaa; font-size: .92rem; margin-bottom: 13px; }
.prize-play-btn {
    background: #00de93; color: #181d23;
    border: none; border-radius: 7px;
    padding: 7px 0; font-weight: bold;
    font-size: 1.01rem; margin-top: auto;
    cursor: pointer; transition: filter .17s;
}
.prize-play-btn:hover { filter: brightness(0.94); }
.prizes-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: #222c; color: #fff; border: none;
    border-radius: 50%; width: 35px; height: 35px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; cursor: pointer; z-index: 10;
    transition: background .16s;
}
.prizes-arrow.left { left: -17px; }
.prizes-arrow.right { right: -17px; }
.prizes-arrow:hover { background: #00de93; color: #13151b; }
@media (max-width: 780px) {
    .banner-slider-container { max-width: 100%; }
    .prizes-carousel { gap: 12px; }
    .prize-card { min-width: 180px; max-width: 195px; }
}

.balance-display {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--primary-color, #00de93);
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

.refresh-balance-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #00de93 60%, #00835c 100%);
    border-radius: 50%;
    border: none;
    margin-left: 2px;
    color: #fff;
    font-size: 1.15em;
    cursor: pointer;
    box-shadow: 0 1px 8px 0 rgba(0,222,147,0.1);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    outline: none;
    position: relative;
    vertical-align: middle;
}

.refresh-balance-btn:hover, .refresh-balance-btn:focus {
    background: linear-gradient(135deg, #00ffa7 60%, #00de93 100%);
    transform: scale(1.11) rotate(10deg);
    box-shadow: 0 2px 12px 0 rgba(0,222,147,0.25);
}

.refresh-balance-btn:active {
    transform: scale(0.97);
    box-shadow: 0 1px 6px 0 rgba(0,222,147,0.15);
}

.refresh-balance-btn i {
    animation: refresh-spin 1s linear infinite paused;
}

.refresh-balance-btn:active i,
.refresh-balance-btn:focus i {
    animation-play-state: running;
}

@keyframes refresh-spin {
    100% { transform: rotate(360deg); }
}
 
/* ---- RASPADINHA SPA (NOVA) ---- */
.scratch-page {
    max-width: 680px;
    margin: 40px auto 0 auto;
    background: linear-gradient(180deg, #24243e 60%, #17151c 100%);
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22), 0 1.5px 4px #0008;
    padding: 24px 28px 36px;
    position: relative;
}

.scratch-header {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 10px;
}
.scratch-header .scratch-banner {
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    background: #232326;
    box-shadow: 0 3px 12px #1117;
}
.scratch-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    text-shadow: 0 3px 15px #0009;
    margin: 0;
    letter-spacing: .5px;
}

.scratch-saldo-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #181c20;
    border-radius: 16px;
    padding: 8px 16px;
    gap: 16px;
    font-size: 1.05rem;
    color: #B5FDD9;
    margin-bottom: 28px;
}
.scratch-saldo-bar .saldo-value {
    color: #00de93;
    font-weight: 700;
}
.scratch-saldo-bar .btn-secondary {
    margin-left: auto;
    padding: 8px 18px;
    border-radius: 10px;
    background: none;
    color: #00de93;
    border: 2px solid #00de93;
    transition: 0.18s;
    font-weight: 700;
}
.scratch-saldo-bar .btn-secondary:hover { background: #00de9333; }

.scratch-area { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* GRID 3x3 — responsivo */
.scratch-grid {
    --cell-w: 124px;
    --cell-h: 100px;
    display: grid;
    grid-template-columns: repeat(3, var(--cell-w));
    grid-auto-rows: var(--cell-h);
    gap: 16px;
    margin-bottom: 26px;
    background: #232326;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 1.5px 10px #0007;
}

/* CÉLULA COM CAPA (scratching) + CONTEÚDO (imagem PNG) */
.scratch-cell {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #15161a;
    border: 2px solid #2a2d34;
    box-shadow: 0 2px 10px #0007;
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, border-color .12s ease;
}
.scratch-cell:active { transform: scale(0.985); }
.scratch-cell:hover { border-color: #00de9366; }

/* CAPA prateada que “sai” quando revela */
.scratch-cover {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: .4px;
    color: #cfd4d8;
    background: repeating-linear-gradient(
        -55deg,
        #9aa3ad 0 8px,
        #b5bcc4 8px 16px
    );
    mix-blend-mode: lighten;
    text-shadow: 0 2px 6px #0008;
    transition: opacity .22s ease, transform .22s ease;
}
.scratch-cell:hover .scratch-cover { filter: brightness(1.05); }

/* CONTEÚDO (imagem + label), inicialmente visível mas coberto pela capa */
.scratch-content {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    padding: 8px;
}
.scratch-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 6px 18px #0005);
    transition: transform .2s ease;
}
.scratch-label {
    margin-top: 6px;
    font-size: .95rem;
    font-weight: 700;
    color: #e9fef6;
    text-shadow: 0 2px 10px #0009;
    background: #0f1418cc;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #00de9322;
}

/* ESTADO REVELADO */
.scratch-cell.revealed { border-color: #00de93; }
.scratch-cell.revealed .scratch-cover {
    opacity: 0;
    transform: scale(1.06);
    pointer-events: none;
}
.scratch-cell.revealed .scratch-img { transform: scale(1.06); }

/* AÇÕES */
.scratch-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 14px;
}
.scratch-actions .btn-primary,
.scratch-actions .btn-secondary {
    min-width: 180px;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 14px 0;
    border-radius: 12px;
    box-shadow: 0 1px 8px #0005;
}
.scratch-actions .btn-primary {
    background: var(--primary-color, #00de93);
    color: #18181b;
    border: none;
    transition: filter .15s;
}
.scratch-actions .btn-primary:hover { filter: brightness(1.1); }

/* NOTIFICAÇÕES DE RESULTADO */
#scratchNotification {
    margin-top: 10px;
    min-height: 36px;
    font-size: 1.06em;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 14px #000a;
    letter-spacing: .3px;
}
.ganhou-msg, .perdeu-msg {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
}
.ganhou-msg {
    background: #00de9326;
    border: 1px solid #00de93;
    color: #b8ffe6;
}
.perdeu-msg {
    background: #ef44441f;
    border: 1px solid #ef4444;
    color: #ffd1d1;
}
.confetti {
    width: 22px; height: 22px; object-fit: contain;
    filter: drop-shadow(0 2px 6px #0007);
}

/* ----------- RESPONSIVO ----------- */
@media (max-width: 820px) {
    .scratch-grid {
        --cell-w: 32vw;
        --cell-h: 22vw;
        padding: 10px;
        gap: 10px;
    }
    .scratch-img { width: 56px; height: 56px; }
}
@media (max-width: 520px) {
    .scratch-page { padding: 14px 10px 20px; }
    .scratch-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .scratch-header .scratch-banner { height: 56px; }
    .scratch-title { font-size: 1.05rem; }
    .scratch-saldo-bar {
        font-size: .95rem;
        padding: 8px 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .scratch-actions { flex-direction: column; }
    .scratch-actions .btn-primary, .scratch-actions .btn-secondary {
        min-width: 100%;
        font-size: 1rem;
        padding: 12px 0;
    }
    .scratch-grid {
        --cell-w: 30vw;
        --cell-h: 19vw;
        gap: 8px;
        margin-bottom: 18px;
    }
    .scratch-img { width: 48px; height: 48px; }
    .scratch-label { font-size: .85rem; padding: 3px 8px; }
}

/* --- Raspadinha: esconder conteúdo até raspar --- */
.scratch-cell {
  position: relative;
  overflow: hidden;
}

.scratch-cover{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  z-index: 2;
  /* Camadas: ouro + granulação + linhas de segurança + brilho interno */
  background:
    /* brilho diagonal suave (shine passará por cima com ::after) */ 
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 50%),
    /* linhas “de segurança” sutis para textura */
    repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 8px, rgba(0,0,0,.05) 8px 16px),
    /* granulação leve do metal */
    radial-gradient(1200px 600px at 50% 50%, rgba(0,0,0,.14), rgba(0,0,0,.00) 50%),
    /* degradê ouro principal */
    linear-gradient(160deg, #e9c46a 0%, #f4d35e 28%, #ffd166 48%, #f1c40f 62%, #cfa20a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 0 rgba(0,0,0,.25),
    0 8px 24px rgba(0,0,0,.35);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, filter .25s ease;
  animation: goldPulse 3.6s ease-in-out infinite;
}

/* Texto “RASPE AQUI” com look em relevo metálico */
.scratch-cover-text{
  position: relative;
  z-index: 1;
  font-weight: 900;
  letter-spacing: .8px;
  font-size: clamp(1rem, 5.2vw, 2.2rem);
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff, #f6e7a8 45%, #caa30a 52%, #8a6b02 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.6),
    0 2px 0 rgba(0,0,0,.35),
    0 8px 24px rgba(0,0,0,.35);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}

/* Brilho que “varre” a placa */
.scratch-cover::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 12%, rgba(255,255,255,.15) 18%, transparent 28%);
  transform: translateX(-140%) skewX(-18deg);
  animation: goldShine 2.6s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Mão indicativa (SVG embutido), discreta, sem emoji */
.scratch-hand{
  position: absolute;
  right: clamp(8px, 2.5vw, 14px);
  bottom: clamp(8px, 2.5vw, 14px);
  width: clamp(32px, 10vw, 44px);
  height: clamp(32px, 10vw, 44px);
  opacity: .9;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  animation: handHint 1.6s ease-in-out infinite;
  /* SVG monocromático (contorno) — você pode trocar a cor no fill/stroke abaixo */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
    <g fill='none' stroke='%230a0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'>\
      <path d='M22 40v-9c0-2 3-3 5-1l2 2v-9c0-2 3-3 5-1l2 2v-8c0-2 3-3 5-1l3 3c1 1 2 3 2 5v14c0 8-5 14-12 14h-9c-4 0-8-3-10-7l-4-9c-1-2 0-4 2-5 2-1 4 0 5 2l2 3z'/>\
      <path d='M11 27c-2-4 0-9 4-11 2-1 4-1 5-1'/>\
    </g>\
  </svg>");
}

/* Efeitos de estado já existentes continuam válidos */
.scratch-cell.revealed .scratch-cover{
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
}

/* Pulse ouro sutil no “metal” */
@keyframes goldPulse{
  0%,100%{ filter: saturate(1) brightness(1); }
  50%    { filter: saturate(1.06) brightness(1.06); }
}

/* Varredura do brilho */
@keyframes goldShine{
  0%   { transform: translateX(-140%) skewX(-18deg); }
  60%  { transform: translateX(140%)  skewX(-18deg); }
  100% { transform: translateX(140%)  skewX(-18deg); }
}

/* Animação da mão (gentil, não intrusiva) */
@keyframes handHint{
  0%   { transform: translate(0,0) scale(1); opacity:.92; }
  45%  { transform: translate(-4px,-3px) scale(1.04); opacity:1; }
  100% { transform: translate(0,0) scale(1); opacity:.92; }
}

.scratch-content {
  position: relative;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: scale(.96);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
}

.scratch-img { width: 54px; height: 54px; object-fit: contain; }
.scratch-label { font-size: .92rem; color: #e8e8e8; }

/* Quando raspa */
.scratch-cell.revealed .scratch-cover {
  opacity: 0; visibility: hidden; transform: scale(1.06);
}
.scratch-cell.revealed .scratch-content {
  opacity: 1; visibility: visible; transform: scale(1);
}

/* --- Botão 'Raspar Tudo' centralizado com efeito --- */
.scratch-actions { justify-content: center; }

.btn-scratch-all {
  margin-inline: auto;
  min-width: clamp(180px, 55vw, 260px);
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  background: linear-gradient(135deg, #00de93, #12f0b0);
  color: #0d1420;
  box-shadow: 0 8px 22px rgba(0,222,147,.25), 0 2px 6px rgba(0,0,0,.35);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  position: relative;
  overflow: hidden;
}

.btn-scratch-all:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-scratch-all:active { transform: translateY(0); filter: brightness(.98); }

.btn-scratch-all::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 120%; height: 100%;
  background: linear-gradient(90deg, transparent, #ffffff40, transparent);
  transform: skewX(-20deg);
  animation: scratch-shine 2.2s linear infinite;
  pointer-events: none;
}

@keyframes scratch-shine {
  0% { left: -120%; }
  60% { left: 120%; }
  100% { left: 120%; }
}

/* Responsivo extra para a grade/imagens */
@media (max-width: 700px) {
  .scratch-img { width: 46px; height: 46px; }
  .scratch-label { font-size: .86rem; }
}

/* Botão Raspar Tudo (já existe, apenas garante o efeito) */
#btnRasparTudo,
.btn-scratch-all {
  background: #00de93;
  color: #000;
  font-weight: 700;
  padding: 12px 22px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#btnRasparTudo:hover,
.btn-scratch-all:hover {
  background: #00ffae;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0,222,147,.25);
}

/* Botão Tentar Novamente (aparece pós-jogo) */
.btn-retry {
  background: #ff5252;
  color: #fff;
  font-weight: 700;
  padding: 11px 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: inline-block;
  margin-top: 8px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-retry:hover {
  background: #ff6b6b;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 8px 20px rgba(255,82,82,.25);
}

.scratch-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0;
    gap: 16px;
    flex-direction: column; /* <— novo: empilha os botões */
}

/* ——— Ações: sempre empilhadas e centralizadas ——— */
.scratch-actions {
  width: 100%;
  display: flex;
  flex-direction: column;      /* empilha os botões */
  align-items: center;          /* centraliza */
  justify-content: center;
  gap: 10px;
  margin-top: 0;
}

/* ——— Botões: mesma largura e estilo base ——— */
.scratch-actions .btn-scratch-all {
  width: min(260px, 90%);       /* responsivo: 260px no desktop, 90% no mobile */
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow: 0 8px 22px rgba(0,222,147,.18), 0 2px 6px rgba(0,0,0,.35);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

/* ——— "Raspar Tudo" (já tinha, só garantindo consistência) ——— */
#btnRasparTudo.btn-scratch-all {
  background: linear-gradient(135deg, #00de93, #12f0b0);
  color: #0d1420;
}
#btnRasparTudo.btn-scratch-all:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* ——— "Tentar Novamente": mesmo visual, com leve destaque ——— */
.btn-retry {
  background: linear-gradient(135deg, #00de93, #00c781); /* igual, só um pouquinho mais escuro */
  color: #0d1420;
  border: 1px solid #00e6a1;
}
.btn-retry:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: 0 10px 26px rgba(0,222,147,.22);
}

/* ——— Ajustes responsivos extras ——— */
@media (max-width: 520px) {
  .scratch-actions .btn-scratch-all { width: 100%; }
}

/* ===== Ajustes do Header (override) ===== */

/* Aumenta o respiro entre logo e o resto */
.header-left-section {
  gap: 20px;               /* era 12px */
  margin-right: 16px;      /* dá um espaço antes do centro */
}

/* Garante que tudo da direita (saldo, refresh, depositar, perfil) vá pro canto direito */
.header-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;        /* espaçamento geral entre grupos */
}

/* Grupo da direita mais organizado e afastado entre si */
.header-right-section-logged-in {
  margin-left: auto;       /* empurra para a direita mesmo */
  gap: 20px;               /* era 16px */
}

/* Saldo não gruda em nada ao redor */
.balance-display {
  margin-left: 8px;        /* respiro à esquerda do saldo */
  letter-spacing: 0.6px;   /* fica mais “premium” */
}

/* Botão de refresh e Depositar um tiquinho mais afastados do saldo */
.refresh-balance-btn { margin-left: 6px; }
.deposit-button { margin-left: 4px; }

/* Logo um pouco menor em telas menores e espaçamento ajustado */
@media (max-width: 1024px) {
  .header-left-section { gap: 16px; margin-right: 12px; }
  .header-right-section-logged-in { gap: 16px; }
}

@media (max-width: 768px) {
  .header-left-section { gap: 12px; margin-right: 8px; }
  .header-right-section-logged-in { gap: 12px; }
}

/* =========================
   HEADER — RESPONSIVO BONITO
   ========================= */

/* Desktop/tablet: um pouco mais de respiro, mas sem exagero */
.header-left-section { gap: 20px; margin-right: 16px; }
.header-right-section-logged-in { gap: 20px; }

/* >= 769px está ok pelas regras acima */

/* --- Mobile geral (≤ 768px) --- */
@media (max-width: 768px) {
  .header-main { padding: 0 12px; }
  .header-left-section { gap: 14px; margin-right: 10px; }
  .header-right-section-logged-in {
    gap: 12px;
    margin-left: auto;           /* garante que fique colado à direita */
    flex-wrap: nowrap;           /* impede quebra que some com o perfil */
  }

  .balance-display {
    font-size: 16px;             /* menorzinho pra caber */
    margin: 0 6px 0 0;
    letter-spacing: .4px;
  }

  .refresh-balance-btn {
    width: 30px; height: 30px;   /* reduz o diâmetro */
    margin-left: 4px;
  }

  .deposit-button {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 10px;
    line-height: 1;
    white-space: nowrap;         /* não quebra o texto */
  }

  .user-profile-button-logged-in {
    padding: 6px 10px;
    border-radius: 10px;
    flex-shrink: 0;              /* não deixa o perfil “apertar” e sumir */
  }
}

/* --- Celulares estreitos (≤ 430px) --- */
@media (max-width: 430px) {
  .header-left-section { gap: 10px; margin-right: 8px; }

  .balance-display {
    font-size: 15px;
    margin-right: 4px;
  }

  .refresh-balance-btn {
    width: 28px; height: 28px;
    margin-left: 2px;
  }

  .deposit-button {
    padding: 6px 8px;
    font-size: 0;                /* truque: some com o texto… */
  }
  .deposit-button i {
    font-size: 16px;             /* …mas mantém o ícone visível */
    margin: 0;
  }
  /* opcional: um rótulo curtinho "Dep." depois do ícone */
  .deposit-button::after {
    content: "Dep.";
    font-size: 12px;
    font-weight: 600;
    margin-left: 6px;
  }

  .user-profile-button-logged-in {
    padding: 6px 8px;
  }
}

/* --- Celulares bem pequenos (≤ 360px): botão Dep. só ícone --- */
@media (max-width: 360px) {
  .deposit-button::after { content: ""; }  /* fica apenas o ícone */
}

/* ===== SCRATCH HERO (banner por raspadinha) ===== */
.scratch-hero{
  width: 100%;
  margin: 0 0 10px 0;
  border-radius: 16px;
  overflow: hidden;
  background: #161a22;            /* cor de fundo nas “barras” laterais */
  display: grid;
  place-items: center;
  /* proporção agradável para banners wide */
  aspect-ratio: 21/6;             /* desktop */
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
@media (max-width: 980px){ .scratch-hero{ aspect-ratio: 16/6; } }
@media (max-width: 640px){ .scratch-hero{ aspect-ratio: 16/7; } }

.scratch-hero img{
  width: 100%;
  height: 100%;
  object-fit: contain;            /* <— garante que a arte não corte */
  object-position: center;
}

/* Título central abaixo do banner */
.scratch-title-center{
  text-align: center;
  margin: 6px 0 12px 0;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: .3px;
  color: #eafcf6;
  text-shadow: 0 2px 10px #0009;
}

/* (opcional) se quiser o título sobreposto no banner:
.scratch-hero{ position: relative; }
.scratch-title-center{
  position: absolute; inset: auto 12px 12px 12px;
  margin: 0; text-align: center;
  background: linear-gradient(180deg, #00000066, #00000022);
  padding: 8px 14px; border-radius: 10px;
}
*/
/* ---- Ajuste banner raspadinha mobile ---- */
.scratch-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.scratch-header .scratch-banner {
  width: 100%;
  max-width: none;      /* remove limite que pode vir de outro CSS */
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .scratch-header .scratch-banner {
    border-radius: 0;   /* opcional: deixa sem borda para colar nas laterais no mobile */
  }
}

/* ===== Ajuste dos rótulos dentro das células ===== */
.scratch-content {
  grid-template-rows: 1fr min-content;
  align-items: center;
  justify-items: center;
  padding: 8px 6px 12px;
}

.scratch-label {
  position: absolute;
  bottom: 0px; /* antes era 6px, agora desce mais */
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 12px);
  padding: 4px 8px;
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #eafef7;
  background: #0e151bcc;
  border: 1px solid #00de9325;
  border-radius: 999px;
  text-shadow: 0 2px 10px #000a;
  z-index: 2;
}

.scratch-cell { overflow: hidden; }

/* ===== Botão de som na barra de saldo ===== */
.sound-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 2px solid #00de93;
  background: #0f1418;
  color: #bafde6;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease, border-color .15s ease;
}
.sound-toggle:hover { filter: brightness(1.08); }
.sound-toggle.is-muted {
  opacity: .75;
  border-color: #3b3f47;
  color: #99a2ad;
}

/* ===== Animações de moedas ===== */
.coin-rain, .coin-burst {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 26px; height: 26px;
  background-image: url('assets/img/premios/moeda.png'); /* usa seu PNG de moeda */
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 6px 12px #0008);
}

/* moedas caindo da parte superior da viewport */
@keyframes coinFall {
  0%   { transform: translate(var(--x, 0px), -60px) scale(.7) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(calc(var(--x, 0px) + var(--dx, 0px)), 105vh) scale(1) rotate(720deg); opacity: 0; }
}
.coin-rain { animation: coinFall var(--t, 1200ms) ease-out forwards; }

/* explosão de moedas perto do grid */
@keyframes coinBurst {
  0%   { transform: translate(0,0) scale(.6); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--bx, 0px), var(--by, 0px)) scale(1.1) rotate(540deg); opacity: 0; }
}
.coin-burst { animation: coinBurst 900ms ease-out forwards; }

@media (max-width: 520px) {
  .scratch-label { font-size: .8rem; }
}

/* --- Ajuste fino do rótulo dos prêmios (descer só um pouco) --- */
.scratch-content {
    padding: 12px 8px 14px;    /* +2px embaixo para respirar */
}
.scratch-label {
    margin-top: 10px;          /* era 6px; deixa o texto um pouco mais baixo */
}

/* --- Botão de som na barra de saldo --- */
.sound-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    border-radius: 10px;
    border: 2px solid #00de93;
    background: #0f1418;
    color: #00de93;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.sound-toggle:hover { filter: brightness(1.1); }
.sound-toggle:active { transform: scale(0.97); }

/* alternância de ícones (mostra só um por vez) */
.sound-toggle i.fa-volume-xmark { display: none; }
.sound-toggle.is-muted i.fa-volume-high { display: none; }
.sound-toggle.is-muted i.fa-volume-xmark { display: inline-block; }

/* === Coin & Bill Rain (ganhou) — base já existente; mantida === */
.coin-rain { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1300; }
.coin {
  position: absolute; top: -60px; width: 28px; height: 28px; border-radius: 50%;
  background:
    radial-gradient(60% 60% at 35% 35%, #fff9 0 45%, transparent 46% 100%),
    radial-gradient(70% 70% at 70% 70%, #946b00 0 55%, #7a5600 56% 100%);
  box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 0 0 2px #d7a300;
  filter: saturate(1.2) brightness(1.05);
  animation: coin-fall var(--dur, 6s) linear var(--delay, 0s) forwards,
             coin-tilt var(--dur, 6s) linear var(--delay, 0s) forwards;
}
.coin::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(80% 80% at 30% 30%, #ffd96655, transparent 60%);
  mix-blend-mode: screen;
}
.bill {
  position: absolute; top: -80px; width: 58px; height: 28px; border-radius: 6px;
  background:
    linear-gradient(90deg, #00e6a0 0 40%, #00c082 40% 100%),
    repeating-linear-gradient(45deg, #ffffff14 0 6px, #ffffff05 6px 12px);
  box-shadow: 0 6px 16px rgba(0,0,0,.24), inset 0 0 0 2px #0e805c;
  animation: bill-fall var(--dur, 6.6s) linear var(--delay, 0s) forwards,
             bill-wiggle var(--dur, 6.6s) ease-in-out var(--delay, 0s) forwards;
  transform-origin: center;
}
@keyframes coin-fall { to { transform: translate(var(--drift, 0vw), 110vh); opacity: 1; } }
@keyframes bill-fall { to { transform: translate(var(--drift, 0vw), 110vh) rotate(var(--rotEnd, 360deg)); opacity: 1; } }
@keyframes coin-tilt { 0% { rotate: 0deg; } 100% { rotate: var(--rotEnd, 720deg); } }
@keyframes bill-wiggle {
  0% { rotate: var(--rotStart, -10deg); } 25% { rotate: calc(var(--rotStart, -10deg) + 14deg); }
  50% { rotate: calc(var(--rotStart, -10deg) - 10deg); } 75% { rotate: calc(var(--rotStart, -10deg) + 12deg); }
  100% { rotate: var(--rotEnd, 360deg); }
}

/* === Confetti === */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1310; overflow: hidden; }
.confetti {
  position: absolute; width: 10px; height: 16px; top: -20px; opacity: .95;
  animation: confetti-fall var(--dur, 5.5s) linear var(--delay, 0s) forwards,
             confetti-tilt var(--dur, 5.5s) ease-in-out var(--delay, 0s) forwards;
  transform-origin: center;
  border-radius: 2px;
}
@keyframes confetti-fall { to { transform: translate(var(--drift, 0vw), 110vh) rotate(var(--rotEnd, 540deg)); } }
@keyframes confetti-tilt {
  0% { rotate: var(--rotStart, 0deg); } 25% { rotate: calc(var(--rotStart, 0deg) + 25deg); }
  50% { rotate: calc(var(--rotStart, 0deg) - 18deg); } 75% { rotate: calc(var(--rotStart, 0deg) + 22deg); }
  100% { rotate: var(--rotEnd, 540deg); }
}

/* === Flash de tela na vitória === */
.win-flash {
  position: fixed; inset: 0; background: radial-gradient(circle at 50% 30%, #ffffffaa, transparent 60%);
  animation: win-flash-fade .45s ease-out forwards; z-index: 1320; pointer-events: none;
}
@keyframes win-flash-fade { from { opacity: 1; } to { opacity: 0; } }

/* === Bump/pulse no saldo e na notificação === */
.win-pulse { animation: win-pulse 900ms cubic-bezier(.2,.9,.15,1.2); }
@keyframes win-pulse {
  0% { transform: scale(1); filter: brightness(1); }
  20% { transform: scale(1.12); filter: brightness(1.25); }
  45% { transform: scale(0.98); }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Acessibilidade: reduz movimento se preferido */
@media (prefers-reduced-motion: reduce) {
  .coin, .bill, .confetti, .win-flash, .win-pulse { animation: none !important; }
}

/* ===== Overrides de celebração (garante que fique por CIMA de tudo) ===== */
.coin-rain,
.confetti-layer,
.win-flash {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
}

/* z-index absurdamente alto pra não ficar atrás de nada */
.coin-rain { z-index: 999990 !important; }
.confetti-layer { z-index: 999991 !important; }
.win-flash { z-index: 999992 !important; }

/* moedas maiores e mais “vivas” no mobile */
@media (max-width: 768px) {
  .coin { width: 34px !important; height: 34px !important; }
  .bill { width: 70px !important; height: 32px !important; }
  .confetti { width: 12px !important; height: 18px !important; }
}

/* FORÇA as animações mesmo se o device tiver “reduzir movimento” ligado */
@media (prefers-reduced-motion: reduce) {
  .coin, .bill, .confetti, .win-flash, .win-pulse {
    animation: unset !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .coin, .bill, .confetti, .win-flash, .win-pulse {
    animation-play-state: running !important;
  }
}

/* Reafirma estilos visuais básicos (caso algo tenha sido sobrescrito) */
.coin {
  background:
    radial-gradient(60% 60% at 35% 35%, #fff9 0 45%, transparent 46% 100%),
    radial-gradient(70% 70% at 70% 70%, #c99600 0 55%, #8a6400 56% 100%) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.3), inset 0 0 0 2px #ffd35a !important;
}
.bill {
  background:
    linear-gradient(90deg, #00f0aa 0 40%, #00c88a 40% 100%),
    repeating-linear-gradient(45deg, #ffffff1f 0 6px, #ffffff08 6px 12px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 0 0 2px #0c7d59 !important;
}

/* === Celebration overlay sempre por cima === */
#celebration-root{
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  z-index: 100000;          /* maior que header, modais etc. */
  pointer-events: none;     /* não bloqueia cliques */
  overflow: visible;
}

.celebration-coin,
.celebration-bill,
.celebration-confetti,
.celebration-flash {
  position: absolute;
  will-change: transform, opacity;
}

/* Flash branco rápido */
.celebration-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, #ffffffcc, #ffffff00 70%);
  animation: flash-pop .45s ease-out forwards;
}
@keyframes flash-pop {
  0%   { opacity: 0; transform: scale(1); }
  10%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.08); }
}

/* pulso na área de jogo (classe aplicada/removida via JS) */
.celebrate-bump { animation: win-bump .45s ease; }
@keyframes win-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* overlay por cima da grade */
.scratch-area { position: relative; }
.scratch-grid { position: relative; z-index: 1; }
.scratch-canvas { z-index: 60; border-radius: 14px; }

/* ===== Footer ===== */
.site-footer{
  background:#111315; 
  color:#cfd3d8;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:40px;
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:28px 20px;
  display:flex;
  gap:24px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.footer-brand{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.footer-logo{
  height:30px; 
  width:auto; 
  display:block;
  filter: drop-shadow(0 0 0 transparent); /* nítida */
}

.footer-brand-text p{
  margin:0 0 6px 0;
  line-height:1.35;
  color:#aeb4bb;
  font-size:14px;
}
.footer-copy{
  color:#8e949b;
  font-size:13px;
}

.footer-links{
  display:flex;
  gap:48px;
  flex-wrap:wrap;
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:140px;
}
.footer-col a{
  color:#dfe4ea;
  text-decoration:none;
  font-size:14px;
  opacity:.9;
  transition:opacity .2s ease, color .2s ease;
}
.footer-col a:hover{
  opacity:1;
  color:#4de2a8; /* verde primário do seu tema */
}

.footer-divider{
  height:1px;
  background:rgba(255,255,255,.06);
  max-width:1100px;
  margin:0 auto 10px;
}

/* Responsivo */
@media (max-width: 720px){
  .footer-inner{ gap:18px; }
  .footer-links{ gap:28px; }
}

/* ===== SEÇÃO DE PRÊMIOS DA RASPADINHA ===== */
.prizes-section {
    margin-top: 20px;
    padding: 15px;
    border-radius: 12px;
    background: #111;
}

.prizes-section h3 {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: #fff;
}

.prizes-section p {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 15px;
}

/* Agrupamentos por categoria */
.prize-category {
    margin-top: 15px;
}

.prize-category h4 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.prize-category h4 span {
    font-size: 1.2rem;
}

.prize-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Cartão do prêmio individual */
.prize-item {
    flex: 1 1 calc(33.333% - 10px);
    background: #1a1a1a;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    color: #fff;
    min-width: 90px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}

.prize-item:hover {
    transform: scale(1.05);
}

.prize-item img {
    max-width: 50px;
    margin-bottom: 8px;
}

.prize-item .prize-title {
    font-size: 0.9rem;
    margin-bottom: 3px;
}

.prize-item .prize-value {
    font-weight: bold;
    font-size: 1rem;
}

/* Cores por categoria */
.prize-category.main .prize-item {
    border: 2px solid gold;
}
.prize-category.special .prize-item {
    border: 2px solid #00de93;
}
.prize-category.other .prize-item {
    border: 2px solid #007bff;
}

/* Responsivo para mobile */
@media (max-width: 600px) {
    .prize-item {
        flex: 1 1 calc(50% - 10px);
    }
}

/* ===== PRÊMIOS DA RASPADINHA ===== */

.scratch-prizes{
  width: 100%;
  max-width: 980px;
  margin: 24px auto 56px;
  padding: 18px 18px 26px;
  border-radius: 18px;
  background: linear-gradient(180deg,#15171b 0%, #0f1115 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}

.scratch-prizes .prizes-title{
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px;
  font-size: clamp(18px, 1.7vw, 22px);
  color:#f5f7fb;
  margin:2px 0 6px;
}
.scratch-prizes .prizes-subtitle{
  margin:0 0 18px; color:#a7b0be; font-size:14px;
}

.scratch-prizes-tier{ margin-top:16px; }
.scratch-prizes-tier + .scratch-prizes-tier{ margin-top:18px; }

.tier-title{
  font-weight:700;
  margin:0 0 12px;
  font-size: clamp(15px, 1.4vw, 18px);
  display:flex; align-items:center; gap:8px;
  color:#dfe6f2;
}

.tier-title::before{
  content:"";
  width:10px; height:10px; border-radius:999px;
  display:inline-block; 
  background: linear-gradient(135deg,#00e8a2,#00b3ff);
  box-shadow: 0 0 0 4px rgba(0, 229, 172, .08);
}

/* grade responsiva */
.scratch-prizes-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}

@media (max-width: 900px){
  .scratch-prizes{ margin: 18px 12px 44px; padding:14px 12px 20px; }
  .scratch-prizes-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
}
@media (max-width: 520px){
  .scratch-prizes-grid{ grid-template-columns: 1fr; }
}

/* card */
.scratch-prize-card{
  display:flex; align-items:center; gap:12px;
  padding:12px;
  border-radius:14px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,255,170,.06) 0%, rgba(0,0,0,.0) 50%) , #0e1116;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.35) inset;
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.scratch-prize-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,255,200,.25);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}

/* thumb */
.scratch-prize-thumb{
  width:66px; height:56px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:12px;
  background: linear-gradient(145deg,#171a20,#0b0e12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 18px rgba(0,0,0,.25);
  overflow:hidden;
}
.scratch-prize-thumb img{
  max-width:100%; max-height:100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

/* textos */
.scratch-prize-info{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.scratch-prize-title{
  font-weight:700; color:#e9effa;
  font-size:15px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.scratch-prize-label{
  align-self:flex-start;
  font-size:12px; line-height:1; font-weight:700; letter-spacing:.2px;
  color:#0b1620;
  padding:8px 10px;
  border-radius:999px;
  background: linear-gradient(135deg,#00f5a5,#60f);
  box-shadow: 0 8px 18px rgba(0,255,170,.18);
}

/* cores por tier */
.scratch-prizes-tier:nth-of-type(1) .scratch-prize-card{ 
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,215,0,.09) 0%, rgba(0,0,0,0) 55%), #0e1116; 
}
.scratch-prizes-tier:nth-of-type(1) .scratch-prize-label{
  background: linear-gradient(135deg,#ffd166,#ffb703);
}
.scratch-prizes-tier:nth-of-type(2) .scratch-prize-card{
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,255,190,.08) 0%, rgba(0,0,0,0) 55%), #0e1116;
}
.scratch-prizes-tier:nth-of-type(2) .scratch-prize-label{
  background: linear-gradient(135deg,#00e8a2,#00b3ff);
}
.scratch-prizes-tier:nth-of-type(3) .scratch-prize-card{
  background: radial-gradient(120% 120% at 0% 0%, rgba(100,120,255,.07) 0%, rgba(0,0,0,0) 55%), #0e1116;
}
.scratch-prizes-tier:nth-of-type(3) .scratch-prize-label{
  background: linear-gradient(135deg,#8ec5ff,#6b8cff);
}

/* ====== RESPONSIVO (mobile-first refinado) ====== */

/* Telefones grandes / 430–480px */
@media (max-width: 480px){
  .scratch-prizes{
    margin: 18px 12px 56px;
    padding: 16px 14px 18px;
    border-radius: 16px;
  }

  .scratch-prizes .prizes-title{
    justify-content: center;
    font-size: 18px;
    gap: 8px;
  }
  .scratch-prizes .prizes-subtitle{
    text-align: center;
    font-size: 13px;
    margin-bottom: 14px;
  }

  .scratch-prizes-tier{ margin-top: 14px; }
  .tier-title{
    justify-content: center;
    font-size: 15px;
    margin-bottom: 10px;
  }
  .tier-title::before{ width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(0, 229, 172, .08); }

  /* 2 colunas no “mobile grande” para ficar como o exemplo */
  .scratch-prizes-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }

  .scratch-prize-card{
    padding: 10px;
    border-radius: 12px;
  }
  .scratch-prize-thumb{
    width: 58px; height: 50px; border-radius: 10px;
  }
  .scratch-prize-title{
    font-size: 14px;
  }
  .scratch-prize-label{
    font-size: 11px;
    padding: 7px 9px;
  }
}

/* Telefones médios / 360–429px */
@media (max-width: 429px){
  .scratch-prizes{
    margin: 16px 10px 48px;
    padding: 14px 12px 16px;
  }
  .scratch-prizes-grid{
    grid-template-columns: 1fr 1fr; /* mantém 2 colunas, mas com mais respiro */
    gap: 8px;
  }
  .scratch-prize-thumb{ width: 54px; height: 46px; }
  .scratch-prize-title{ font-size: 13.5px; }
  .scratch-prize-label{ font-size: 10.5px; padding: 6px 8px; }
}

/* Telefones pequenos / < 340px: cai para 1 coluna para não apertar */
@media (max-width: 339px){
  .scratch-prizes-grid{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tier-title{ font-size: 14px; }
  .scratch-prize-card{ padding: 10px; }
  .scratch-prize-thumb{ width: 52px; height: 44px; }
  .scratch-prize-title{ font-size: 13px; }
  .scratch-prize-label{ font-size: 10px; padding: 6px 8px; }
}

/* Tablet pequeno (481–900): 2 colunas, cards um pouco maiores */
@media (min-width: 481px) and (max-width: 900px){
  .scratch-prizes{
    margin: 20px auto 60px;
    padding: 18px 16px 22px;
    max-width: 720px;
  }
  .scratch-prizes-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
  }
  .scratch-prize-thumb{ width: 62px; height: 54px; }
  .scratch-prize-title{ font-size: 15px; }
}

/* Desktop (≥901): 3 colunas (já definido), só dá um leve respiro */
@media (min-width: 901px){
  .scratch-prizes{ max-width: 980px; }
  .scratch-prizes-grid{ gap: 14px; }
}

/* --- Barra da raspadinha: desktop + mobile --- */
.scratch-saldo-bar{
  display:flex;
  align-items:center;
  justify-content:space-between; /* saldo à esquerda, botões à direita */
  gap:12px;
  flex-wrap:nowrap;
}

.scratch-saldo-bar .saldo-left{
  margin-right:auto;
  display:flex; gap:6px;
}

.scratch-saldo-bar .acoes-right{
  margin-left:auto;
  display:flex; gap:8px; align-items:center;
}

/* ordem: som ao lado do Voltar, e Voltar bem na ponta direita */
.scratch-saldo-bar #soundToggleBtn{ order:1; }
.scratch-saldo-bar .btn-back{ order:2; }

/* --- Override específico para mobile (anula sua regra antiga que fazia coluna) --- */
@media (max-width: 520px){
  .scratch-page .scratch-saldo-bar{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:8px 10px;
    gap:10px;
  }
  .scratch-page .scratch-saldo-bar .saldo-left{ font-size:.95rem; }
  .scratch-page .scratch-saldo-bar #soundToggleBtn{
    width:36px; height:32px; padding:0; border-radius:10px;
  }
  .scratch-page .scratch-saldo-bar .btn-back{
    padding:8px 12px; font-size:14px; white-space:nowrap;
  }
}

/* Caixa roxa que agrupa saldo + grid + ações */
.scratch-card{
  background: linear-gradient(180deg,#23233b 0%, #1a1a28 100%);
  border-radius: 16px;
  padding: 12px 12px 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 28px rgba(0,0,0,.35);
  margin-top: 6px;
}

/* dentro da caixa roxa mantemos os espaçamentos suaves */
.scratch-card .scratch-saldo-bar{ 
  margin-bottom: 10px; 
  background: #181c20;           /* mantém a barra coerente */
  border-radius: 12px;
}

.scratch-card .scratch-area{ 
  padding: 6px 4px 8px; 
}

.scratch-card #scratchNotification{
  margin-top: 10px;
}

/* garante que o overlay siga o raio do grid */
.scratch-canvas{ border-radius: 14px; }

/* ==== SCRATCH CARD – manter a grade 100% dentro do bloco roxo ==== */
.scratch-card{
  position: relative;
  border-radius: 16px;
  overflow: hidden;                   /* corta qualquer sobra (canvas/overlay) */
}

/* A grade passa a obedecer a LARGURA DO CARD (e não da viewport) */
.scratch-card .scratch-grid{
  width: 100%;
  grid-template-columns: repeat(3, 1fr) !important;  /* 3 colunas iguais */
  grid-auto-rows: auto !important;
  padding: 12px !important;
  gap: 12px !important;
}

/* Cada célula ganha altura via proporção (sem depender de vw) */
.scratch-card .scratch-cell{
  aspect-ratio: 4 / 3;   /* ajuste do retângulo da célula */
  height: auto;
}

/* Canvas/overlay segue o raio e fica contido no card */
.scratch-card .scratch-canvas{
  border-radius: 14px;
}

/* Mobile: um respiro menor mantém tudo confortável */
@media (max-width: 520px){
  .scratch-card .scratch-grid{
    padding: 10px !important;
    gap: 10px !important;
  }
  .scratch-card .scratch-cell{
    aspect-ratio: 5 / 4; /* levemente mais “deitado” no celular */
  }
}

/* ==== Raspadinha: mostrar os itens enquanto raspa (overlay em canvas) ==== */
/* Força o conteúdo das células a ficar visível por baixo do canvas */
.scratch-grid .scratch-content{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Mantém a animação de "revelado" se existir, mas sem esconder nada */
.scratch-grid .scratch-cell.revealed .scratch-content{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ---- Caixa roxa que segura o grid dentro (mobile-first) ---- */
.scratch-box{
  background: #1b1f2a;                /* roxinho escuro */
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Grid 100% do contêiner (para não “vazar” do roxo) */
.scratch-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin: 10px 0 14px 0;
  padding: 0;                           /* sem padding extra */
}

/* Cada célula mantém proporção sem usar vw */
.scratch-cell{
  aspect-ratio: 1.15 / 1;               /* levemente retangular como no seu layout */
}

/* Canvas de raspagem continua preso ao grid */
.scratch-canvas{ border-radius: 14px; }

/* Ajustes para telas pequenas */
@media (max-width: 520px){
  .scratch-page{ padding: 14px 12px 20px; }
  .scratch-box{ padding: 10px; }
  .scratch-grid{ gap: 8px; }
}

/* Cobrir o grid por completo com a “tela” de raspagem */
.scratch-grid{
  position: relative;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;                 /* ajuste fino do espaçamento */
  border-radius: 16px;      /* borda do conjunto */
  overflow: hidden;         /* corta cantos das células e garante cobertura total */
}

/* Canvas herda a mesma borda e fica exatamente por cima do grid */
.scratch-canvas{
  border-radius: inherit !important;
  inset: 0 !important;
}

/* Desce um pouco o botão “Raspar Tudo” */
.scratch-actions{
  margin-top: 16px;         /* antes estava 0 */
}

@media (max-width: 480px){
  .scratch-grid{ border-radius: 14px; gap: 8px; }
  .scratch-actions{ margin-top: 18px; }
}

/* Neon verde no quadro dos banners da RASPADINHA */
.scratch-page .banner-slider-container{
  position: relative;
  border-radius: 16px;
  padding: 6px;                                 /* moldura */
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,222,147,.08), transparent 55%) #0e1116;
  box-shadow:
    0 0 0 1px rgba(0,222,147,.45),
    0 0 14px rgba(0,222,147,.35),
    0 0 32px rgba(0,222,147,.25);
}

.scratch-page .banner-slider{
  border-radius: 12px;                          /* segue a moldura */
  overflow: hidden;
}

/* Halo externo animado (neon) */
.scratch-page .banner-slider-container::before{
  content: "";
  position: absolute;
  inset: -2px;                                  /* glow “pra fora” */
  border-radius: 18px;
  pointer-events: none;
  box-shadow:
    0 0 18px #00de93,
    0 0 42px rgba(0,222,147,.40),
    inset 0 0 14px rgba(0,222,147,.25);
  opacity: .95;
}

@media (prefers-reduced-motion: no-preference){
  .scratch-page .banner-slider-container::before{
    animation: neonPulse 2.4s ease-in-out infinite;
  }
}

@keyframes neonPulse{
  0%,100%{
    box-shadow:
      0 0 14px #00de93,
      0 0 34px rgba(0,222,147,.36),
      inset 0 0 10px rgba(0,222,147,.22);
  }
  50%{
    box-shadow:
      0 0 22px #00ffae,
      0 0 56px rgba(0,255,190,.46),
      inset 0 0 16px rgba(0,255,190,.30);
  }
}

/* tira respiro de cima só na home para encostar no header */
.home-main-container{ padding-top: 0 !important; }
main{ padding-top: 0 !important; }

/* ===== BANNER HOME — FULL WIDTH LIMPO ===== */

/* tira o respiro de cima na home e permite “vazar” o banner */
.home-main-container{
    padding: 0 0 28px 0;
    overflow: visible;
}

/* container do slider colado ao header e 100% da tela */
.banner-slider-container{
    width: 100vw;
    max-width: none;
    margin: 0 0 12px 0;                 /* gruda no menu, 12px abaixo */
    margin-left: calc(50% - 50vw);      /* centraliza fora do wrapper */
    margin-right: calc(50% - 50vw);
    position: relative;
}
@supports (width: 100dvw){
    .banner-slider-container{
        width: 100dvw;
        margin-left: calc(50% - 50dvw);
        margin-right: calc(50% - 50dvw);
    }
}

/* faixa do banner: altura responsiva e sem cortes laterais */
.banner-slider{
    position: relative;
    width: 100%;
    height: clamp(150px, 28vw, 360px);  /* celular → desktop */
    overflow: hidden;
}

/* slides em fade */
.banner-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .4s ease;
}
.banner-slide.active{ opacity: 1; }

/* imagem cobre a área toda (pode cortar um pouquinho em cima/baixo) */
.banner-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;                  /* cover = full-bleed bonito */
    object-position: center;
    border-radius: 0;                   /* sem canto arredondado na borda */
}

/* bolinhas de navegação */
.banner-slider-dots{
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.banner-slider-dots .dot{
    width: 10px; height: 10px; border-radius: 50%;
    background: #ffffff33;
    border: 2px solid #00de93;
    cursor: pointer;
    transition: background .2s;
}
.banner-slider-dots .dot.active{ background: #00de93; }

/* ===== AO VIVO – selo com fundo preto e dot vermelho piscando ===== */
.live-ticker-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#000;         /* fundo preto */
  color:#fff;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  line-height:1;
}
.live-ticker-title::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff3030;                /* vermelho */
  box-shadow:0 0 0 0 rgba(255,48,48,0.75);
  animation:live-blink 1.2s ease-in-out infinite;
}
@keyframes live-blink{
  0%,100%{ opacity:.6; box-shadow:0 0 0 0 rgba(255,48,48,0.0); }
  50%    { opacity:1;  box-shadow:0 0 10px 5px rgba(255,48,48,0.45); }
}

/* ===== Ticker mais lento =====
   Se o seu CSS já define animação, isso só muda a duração. */
.live-ticker-track{
  /* aumente esse valor para rolar mais devagar */
  animation-duration: 60s !important;  /* ex: era 25s; agora ~2.4x mais lento */
  will-change: transform;
  white-space: nowrap;
}

/* posiciona o overlay sobre o grid */
.scratch-wrap { position: relative; }

.scratch-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index:200;                    /* acima do #scratchCanvas (60) */
  transition: opacity .25s ease;
}

/* conteúdo central do overlay */
.scratch-overlay .overlay-inner{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-align:center;
}
.scratch-overlay .hint{
  font-size:.85rem; opacity:.9; color:var(--color-text, #e5e7eb);
}

/* efeito “apagado” enquanto bloqueado */
#scratchGrid[aria-disabled="true"]{
  filter: grayscale(.2) brightness(.85);
}

/* depois que iniciar, some o overlay */
.scratch-wrap.started .scratch-overlay{
  opacity:0; pointer-events:none;
}

/* Passo a passo dentro da caixa roxa */
.scratch-box .scratch-steps.in-card{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin: 6px 8px 12px;
  padding:12px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 8px 20px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.05);
}

.scratch-box .scratch-steps.in-card li{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:rgba(0,0,0,.25);
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.scratch-box .scratch-steps.in-card .badge{
  display:grid;
  place-items:center;
  min-width:28px; height:28px;
  border-radius:999px;
  font-weight:800;
  background:var(--primary-color);
  color:#0b0f14;
  box-shadow:0 0 0 3px rgba(0,0,0,.25), 0 0 22px rgba(0, 208, 132, .45);
}

.scratch-box .scratch-steps.in-card b{
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

@media (max-width: 680px){
  .scratch-box .scratch-steps.in-card{ grid-template-columns:1fr; }
}

/* ===========================
   Landing (Não Logados) – Neon Verde
   =========================== */

/* Variáveis de tema (fallbacks – usam as suas se existirem) */
:root{
  --bg: #0f1115;
  --surface: #141922;
  --muted: #a7b2c3;
  --text: #e7f1ef;
  --primary: #00ff9c;
  --primary-50: rgba(0,255,156,.08);
  --primary-100: rgba(0,255,156,.14);
  --primary-200: rgba(0,255,156,.28);
  --accent: #12d6b2;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-soft: 0 8px 28px rgba(0,0,0,.35);
  --shadow-neon: 0 12px 40px rgba(0,255,156,.18), inset 0 0 0 1px rgba(0,255,156,.08);
  --grid-gap: 18px;
}

/* Reset fino para suavidade */
.lp-hero, .lp-featured, .lp-head-min, .lp-ctas, .lp-points,
.btn-primary, .btn-secondary { box-sizing: border-box; }

/* -------- Hero -------- */
.lp-hero{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 76vh;
  padding: clamp(24px, 3vw, 48px) 16px;
  background:
    radial-gradient(1200px 520px at 10% -10%, var(--primary-50), transparent 60%),
    radial-gradient(1200px 520px at 90% 110%, var(--primary-50), transparent 60%),
    var(--bg);
  overflow: hidden;
}
.lp-hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(600px 260px at 15% 20%, var(--primary-100), transparent 60%),
    radial-gradient(700px 320px at 90% 80%, var(--primary-100), transparent 60%);
  filter: blur(24px);
  opacity:.9;
  pointer-events:none;
}

/* contêiner interno (limpo e centrado) */
.lp-hero-min{
  width: min(1080px, 92vw);
  margin-inline:auto;
  text-align:center;
}

/* título + glow */
.lp-title{
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--text);
  margin: 2px 0 10px;
  text-shadow: 0 2px 22px rgba(0,255,156,.08);
}
.lp-title .neon{
  color: var(--primary);
  text-shadow:
    0 0 8px rgba(0,255,156,.55),
    0 0 26px rgba(0,255,156,.35);
}

/* subtítulo */
.lp-sub{
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--muted);
  opacity: .95;
  max-width: 720px;
  margin: 0 auto 18px;
}

/* badges/pontos curtos */
.lp-points{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: 12px;
  margin: 6px 0 18px;
}
.lp-points li{
  list-style:none;
  font-size: 13.5px;
  color: #d9efe6;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px dashed rgba(0,255,156,.35);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

/* CTAs */
.lp-ctas{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: 14px;
  margin: 22px 0 10px;
}

/* botões */
.btn-lg{ padding: 14px 20px; font-size: 16px; border-radius: 14px; }

.btn-primary{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background: linear-gradient(180deg, var(--primary), #07d585);
  color: #05140f;
  font-weight: 800;
  border: 0;
  border-radius: 14px;
  padding: 14px 20px;
  text-decoration:none;
  box-shadow: var(--shadow-neon), 0 10px 24px rgba(0,255,156,.20);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 42px rgba(0,255,156,.26);
  filter: saturate(1.05);
}
.btn-primary:active{ transform: translateY(0); }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color: var(--text);
  font-weight: 700;
  border: 1px solid rgba(0,255,156,.22);
  border-radius: 14px;
  padding: 14px 20px;
  text-decoration:none;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn-secondary:hover{
  transform: translateY(-1px);
  border-color: rgba(0,255,156,.32);
  box-shadow: 0 10px 28px rgba(0,0,0,.38);
}

/* -------- Section Destaques -------- */
.lp-featured{
  background:
    radial-gradient(1100px 400px at 50% -10%, var(--primary-50), transparent 65%),
    var(--bg);
  padding: clamp(22px, 2.4vw, 40px) 0 60px;
}

.lp-featured-min{
  width: min(1200px, 92vw);
  margin-inline:auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(0,255,156,.10);
  border-radius: var(--radius-xl);
  padding: clamp(18px, 2.5vw, 28px);
  box-shadow: var(--shadow-soft);
}

.lp-head-min{
  width: min(1040px, 92vw);
  margin: 0 auto 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.lp-head-min h2{
  color: var(--text);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0;
}
.lp-head-min .hint{
  color: var(--muted);
  font-size: 13px;
  opacity: .9;
}

/* grid de cards já existente (mantemos, só refinamos gaps) */
.cards-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

/* se os seus cards tiverem .card-raspadinha ou .prize-card, damos um refine leve */
.card-raspadinha, .prize-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(0,255,156,.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-raspadinha:hover, .prize-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,255,156,.20);
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
}
.card-raspadinha .card-price-tag, .prize-card .prize-card-price{
  background: linear-gradient(180deg, var(--primary), #0fdc92);
  color: #05140f;
  box-shadow: 0 6px 18px rgba(0,255,156,.25);
}

/* -------- Micro-efeitos -------- */
@keyframes lp-fade-up{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to  { opacity:1; transform: none; }
}
.lp-hero-min, .lp-featured-min, .cards-grid > * { animation: lp-fade-up .5s ease both; }

/* ===========================
   Responsividade
   =========================== */

/* Tablets / Laptops menores */
@media (max-width: 1024px){
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Mobile largo */
@media (max-width: 640px){
  .lp-hero{
    min-height: 68vh;
    padding: 24px 14px;
    background:
      radial-gradient(800px 380px at 20% -10%, var(--primary-50), transparent 60%),
      radial-gradient(800px 380px at 80% 110%, var(--primary-50), transparent 60%),
      var(--bg);
  }
  .lp-hero-min{ width: 94vw; }
  .lp-title{ font-size: clamp(28px, 8vw, 38px); letter-spacing: .2px; margin-bottom: 6px; }
  .lp-sub{ font-size: 14px; line-height: 1.45; margin-bottom: 16px; padding: 0 4px; }
  .lp-ctas{ gap: 10px; margin: 18px 0 10px; }

  .btn-lg{ width: 100%; padding: 12px 16px; font-size: 15px; border-radius: 12px; }

  .lp-points{ gap: 10px; margin-top: 10px; padding: 0 4px; }
  .lp-points li{ font-size: 13px; padding: 7px 10px; }

  .lp-featured-min{ padding: 20px 12px 28px; }
  .lp-head-min{ width: 94vw; margin-bottom: 12px; }
  .lp-head-min h2{ font-size: 18px; }

  .cards-grid{
    grid-template-columns: 1fr 1fr; /* 2 colunas */
    gap: 12px;
  }

  /* carrossel do seu projeto */
  .prizes-carousel-container{ overflow: hidden; }
  .prizes-carousel{ gap: 12px; }
}

/* Mobile médio */
@media (max-width: 480px){
  .lp-hero{ min-height: 64vh; padding: 22px 12px; }
  .lp-title{ font-size: clamp(26px, 8.5vw, 34px); }
  .lp-sub{ font-size: 13.5px; }
  .lp-points li{ font-size: 12.5px; padding: 7px 9px; }

  .cards-grid{ grid-template-columns: 1fr; gap: 12px; }

  .btn-lg{ padding: 13px 16px; font-size: 15px; }
}

/* Mobile pequeno */
@media (max-width: 360px){
  .lp-title{ font-size: 24px; }
  .lp-sub{ font-size: 12.5px; }
  .lp-points{ gap: 8px; }
  .lp-points li{ font-size: 12px; padding: 6px 8px; }
  .btn-lg{ padding: 12px 14px; font-size: 14px; }
}

/* Evita “piscada” em dispositivos touch (hover none) */
@media (hover: none) and (pointer: coarse){
  .btn-primary:hover,
  .btn-secondary:hover{
    transform: none;
    box-shadow: 0 6px 22px rgba(0,255,156,.16);
  }
}

/* Ajuste de layout para a seção de herói */
.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25px;
}

/* Botões principais */
.hero-buttons a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px var(--shadow-color);
}

/* Botão primário (cadastro) */
.hero-buttons .btn-primary {
    background: var(--primary-color);
    color: #000;
    box-shadow: 0 0 15px var(--primary-color), 0 0 30px var(--primary-color);
}

.hero-buttons .btn-primary:hover {
    background: var(--tertiary-color);
    box-shadow: 0 0 20px var(--tertiary-color), 0 0 40px var(--tertiary-color);
}

/* Botão secundário (login) */
.hero-buttons .btn-secondary {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0 15px var(--shadow-color);
}

.hero-buttons .btn-secondary:hover {
    background: var(--primary-color);
    color: #000;
    box-shadow: 0 0 20px var(--primary-color), 0 0 40px var(--primary-color);
}

/* Ícones dentro dos botões */
.hero-buttons i {
    font-size: 1.2rem;
}

/* Responsividade para mobile */
@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .hero-buttons a {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

.hero-buttons a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px; /* 🔹 Reduzi o tamanho da borda interna */
    border-radius: 10px; /* 🔹 Bordas um pouco mais arredondadas */
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 8px var(--shadow-color);
}

.hero-logo {
    text-align: center;
    margin-bottom: 10px;
}

.hero-logo .logo-img {
    max-width: 120px;
    height: auto;
    filter: drop-shadow(0 0 8px var(--primary-color));
}

/* ===== Cadastro — Neon Consistente ===== */
.auth-hero{
    position: relative;
    min-height: calc(100vh - 140px); /* considera header+bottom-nav */
    display: grid;
    place-items: start center;
    padding: clamp(20px, 3vw, 48px) 16px 32px;
    background:
      radial-gradient(1200px 520px at 10% -10%, rgba(0,255,156,.08), transparent 60%),
      radial-gradient(1200px 520px at 90% 110%, rgba(0,255,156,.08), transparent 60%),
      #000; /* fundo principal preto total */
    overflow: hidden;
}

.auth-hero::before{
    content:"";
    position:absolute; inset:-2px;
    background:
      radial-gradient(600px 260px at 15% 20%, rgba(0,255,156,.14), transparent 60%),
      radial-gradient(700px 320px at 90% 80%, rgba(0,255,156,.14), transparent 60%);
    filter: blur(24px);
    pointer-events:none;
    opacity:.85;
}

/* Título + logo (reaproveita seu hero) */
.hero-logo { text-align:center; margin-bottom: 12px; }
.hero-logo .logo-img { max-width: 120px; height:auto; filter: drop-shadow(0 0 10px var(--primary-color)); }

.auth-title{
    text-align:center;
    font-size: clamp(26px, 4.4vw, 42px);
    line-height: 1.08;
    font-weight: 800;
    color: #eaf8f1;
    margin: 2px 0 6px;
    text-shadow: 0 2px 22px rgba(0,255,156,.08);
}
.auth-title span{
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0,255,156,.55), 0 0 26px rgba(0,255,156,.35);
}

.auth-subtitle{
    text-align:center;
    font-size: clamp(13.5px, 1.3vw, 16px);
    color: var(--text-gray-light);
    opacity:.95;
    max-width: 640px;
    margin: 0 auto 16px;
}

/* Card do formulário com vidro + borda neon suave */
.auth-card{
    width: min(520px, 92vw);
    margin: 10px auto 0;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid rgba(0,255,156,.12);
    border-radius: 18px;
    padding: clamp(20px, 2.8vw, 32px);
    box-shadow:
        0 12px 40px rgba(0,0,0,.45),
        0 0 0 1px rgba(0,255,156,.06) inset;
    backdrop-filter: blur(6px);
}

/* Cabeçalho do card */
.auth-card .form-header .form-logo{
    width: 110px;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 8px rgba(0,255,156,.35));
}
.auth-card .form-title{
    margin: 0 0 4px;
    font-size: 22px;
}
.auth-card .form-subtitle{
    font-size: 13px;
    color: var(--text-gray-light);
}

/* Inputs com glow consistente */
.auth-card .form-input{
    background: #0b0f14;
    border: 2px solid #1f2937;
    color: #eefbf5;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-card .form-input::placeholder{ color: #9fb3a8; }

.auth-card .input-group i{
    color: #9fb3a8;
    transition: color .18s ease;
}

.auth-card .form-input:focus{
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,255,156,.12), 0 10px 24px rgba(0,255,156,.10);
    background: #0d141a;
}
.auth-card .form-input:focus + i,
.auth-card .input-group:has(.form-input:focus) i{
    color: var(--primary-color);
}

/* Checkbox / links */
.auth-card .checkbox-group label a{
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px dashed rgba(0,255,156,.25);
}
.auth-card .checkbox-group label a:hover{
    filter: brightness(1.1);
}

/* Botão principal (mesma energia da landing) */
.auth-card .form-button.btn-primary{
    margin-top: 4px;
    border-radius: 12px;       /* borda mais curta como você pediu */
    padding: 14px 18px;        /* compacto e forte */
    background: linear-gradient(180deg, var(--primary-color), #07d585);
    color: #05140f;
    font-weight: 800;
    box-shadow: 0 12px 34px rgba(0,255,156,.22), 0 0 0 1px rgba(0,255,156,.08) inset;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.auth-card .form-button.btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 42px rgba(0,255,156,.28);
    filter: saturate(1.06);
}
.auth-card .form-button.btn-primary:disabled{
    opacity:.6; transform:none; box-shadow:none;
}

/* Link “Entrar” */
.auth-card .form-link{
    margin-top: 14px;
}
.auth-card .form-link a{
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
}
.auth-card .form-link a:hover{
    text-decoration: underline;
}

/* Micro animação “fade-up” */
@keyframes auth-fade-up{
    from{ opacity:0; transform: translateY(10px) scale(.98); }
    to  { opacity:1; transform: none; }
}
.auth-card{ animation: auth-fade-up .45s ease both; }

/* ===== Responsividade — centralizado no mobile ===== */
@media (max-width: 640px){
    .auth-hero{
        min-height: auto;
        padding-top: 18px;
    }
    .hero-logo .logo-img{ max-width: 100px; }
    .auth-title{ font-size: clamp(24px, 8vw, 34px); margin-bottom: 6px; }
    .auth-subtitle{ font-size: 13.5px; margin-bottom: 12px; }
    .auth-card{ width: 94vw; padding: 18px 14px 20px; }
    .auth-card .form-button.btn-primary{
        width: 100%;
        padding: 13px 16px;
        border-radius: 12px;
    }
    .auth-card .checkbox-group{ margin: 16px 0; }
}

/* Muito pequenos */
@media (max-width: 360px){
    .auth-card{ width: 96vw; }
    .auth-title{ font-size: 22px; }
    .auth-subtitle{ font-size: 12.5px; }
}

/* Hero de cadastro */
.auth-hero {
    text-align: center;
    padding: 20px;
}

.auth-hero .hero-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.auth-hero .logo-img {
    max-width: 160px;
    height: auto;
    filter: drop-shadow(0 0 12px #00ff99);
}

.auth-hero .auth-title {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 5px;
    text-shadow: 0 0 15px #00ff99;
}

.auth-hero .auth-title span {
    color: #00ff99;
}

.auth-hero .auth-subtitle {
    color: #aaa;
    margin-bottom: 20px;
}

/* Card de formulário */
.auth-card {
    background: rgba(0,0,0,0.6);
    border-radius: 12px;
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0 0 15px rgba(0,255,153,0.4);
}

/* Responsividade */
@media (max-width: 600px) {
    .auth-hero .logo-img {
        max-width: 120px;
    }
    .auth-hero .auth-title {
        font-size: 1.6rem;
    }
}

.auth-card {
    background: rgba(0,0,0,0.6);
    border-radius: 12px;
    padding: 20px;
    max-width: 400px; /* largura máxima para centralizar */
    width: 100%; /* ocupa o espaço disponível até o limite */
    margin: 0 auto; /* centraliza horizontalmente */
    box-shadow: 0 0 15px rgba(0,255,153,0.4);
}

/* ===== AUTH (Login/Registro) — Consistente com o registro ===== */
.auth-hero{
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(100dvh - 140px); /* cabe sob o header + bottom nav */
    padding: 24px 16px 32px;
    background:
      radial-gradient(900px 360px at 12% -8%, rgba(0,255,156,.08), transparent 60%),
      radial-gradient(900px 360px at 88% 108%, rgba(0,255,156,.08), transparent 60%),
      #000; /* fundo preto que você pediu */
}
.auth-hero-inner{
    width: min(960px, 96vw);
    margin-inline: auto;
    text-align: center;
}
.auth-logo{
    width: clamp(120px, 26vw, 160px);
    height: auto;
    margin: 0 auto 10px;
    display: block;
    filter: drop-shadow(0 0 16px rgba(0,255,156,.22));
}
.auth-title{
    font-size: clamp(26px, 6.5vw, 42px);
    font-weight: 800;
    letter-spacing: .3px;
    color: #e9ffee;
    margin: 4px 0 6px;
    text-shadow: 0 2px 18px rgba(0,255,156,.08);
}
.auth-title .neon{
    color: var(--primary-color, #00de93);
    text-shadow: 0 0 10px rgba(0,255,156,.55), 0 0 26px rgba(0,255,156,.35);
}
.auth-subtitle{
    color: var(--text-gray-light, #b9c4be);
    opacity: .95;
    font-size: clamp(14px, 1.5vw, 16px);
    margin-bottom: 16px;
}

/* Card com glow igual ao cadastro */
.auth-card{
    margin: 0 auto;
    width: min(680px, 94vw);
    background: radial-gradient(120% 120% at 0% 0%, rgba(0,255,156,.06), transparent 55%) #0d1116;
    border: 1px solid rgba(0,255,156,.20);
    border-radius: 18px;
    padding: clamp(18px, 3vw, 26px);
    box-shadow:
      0 0 0 1px rgba(0,255,156,.16) inset,
      0 14px 44px rgba(0,0,0,.45),
      0 0 34px rgba(0,255,156,.18);
}
.auth-card.glow::before{
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    border-radius: 20px;
    filter: blur(18px);
    opacity: .35;
}

/* Botão com glow suave (igual ao registro) */
.btn-glow{
    position: relative;
}
.btn-glow::after{
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    box-shadow: 0 0 24px rgba(0,255,156,.35);
    opacity: .6;
    pointer-events: none;
}

/* Centralização e respiro em mobile */
@media (max-width: 640px){
  .auth-hero{ min-height: calc(100dvh - 120px); padding: 18px 12px 24px; }
  .auth-card{ width: min(560px, 96vw); padding: 18px 14px; }
}

/* Caso exista slider/banners em outras páginas, garante que NÃO interfiram aqui */
.auth-hero .banner-slider-container,
.auth-hero .banner-slider,
.auth-hero .banner-slide{ display: none !important; height: 0 !important; }

.auth-card {
    margin-inline: auto; /* centraliza */
    width: min(680px, 94vw); /* largura máxima */
    background: radial-gradient(120% 120% at 0% 0%, rgba(0,255,156,.06), transparent 55%) #0d1116;
    border: 1px solid rgba(0,255,156,.20);
    border-radius: 18px;
    padding: clamp(18px, 3vw, 26px);
    box-shadow:
      0 0 0 1px rgba(0,255,156,.16) inset,
      0 14px 44px rgba(0,0,0,.45),
      0 0 34px rgba(0,255,156,.18);
}

.auth-logo {
    position: relative;
    width: clamp(120px, 26vw, 160px);
    height: auto;
    margin: 0 auto 10px;
    display: block;
    filter: drop-shadow(0 0 18px rgba(0,255,156,.55));
}

/* =========================
   LOGIN — centralização + neon
   ========================= */

/* garante que o “herói” do login não corte sombras/glows */
.page-login .auth-hero { 
  overflow: visible !important;
  padding-inline: clamp(12px, 4vw, 22px); /* respiro igual dos dois lados */
}

/* container interno sempre centralizado */
.page-login .auth-hero-min{
  width: min(1100px, 94vw);
  margin-inline: auto;            /* centraliza o container */
  display: flex;
  justify-content: center;        /* centraliza o card */
}

/* o card em si fica no meio, com largura fluida */
.page-login .auth-card{
  margin-inline: auto;            /* centraliza o card */
  width: min(680px, 92vw);        /* largura máxima */
  box-sizing: border-box;
}

/* reforço: nada usa 100vw aqui, para não “puxar” pra esquerda/direita */
.page-login .auth-hero,
.page-login .auth-hero-min,
.page-login .auth-card{ width: 100%; max-width: none; }
.page-login .auth-card{ width: min(680px, 92vw); }

/* neon da logo (igual ao cadastro) */
.page-login .auth-logo{
  position: relative;
  width: clamp(120px, 26vw, 160px);
  height: auto;
  margin: 0 auto 10px;
  display: block;
  filter: drop-shadow(0 0 18px rgba(0,255,156,.55));
}
.page-login .auth-logo::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 165%; height: 165%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,255,156,.38) 0%, transparent 65%);
  z-index: -1; border-radius: 50%;
}

/* mobile: respiro simétrico */
@media (max-width: 640px){
  .page-login .auth-hero-min{ padding-inline: 10px; }
  .page-login .auth-card{ width: 94vw; }
}

/* Alias caso use .auth-hero-inner */
.page-login .auth-hero-inner{
  width:min(1100px,94vw);
  margin-inline:auto;
  display:flex;
  justify-content:center;
}

/* ===== LOGIN — CENTRALIZAÇÃO REAL + GLOW SIMÉTRICO ===== */

/* Não deixa o glow ser cortado e mantém padding igual dos dois lados */
.page-login .auth-hero{
  overflow: visible !important;
  display: grid;
  place-items: center;
  padding-inline: clamp(12px, 4vw, 22px);
}

/* Contêiner interno e card sempre centralizados */
.page-login .auth-hero-min{
  width: min(720px, 96vw);
  margin-inline: auto;
  display: block;
}

.page-login .auth-card{
  position: relative;              /* necessário p/ o ::before */
  width: 100%;
  margin-inline: auto;
  border-radius: 18px;
  /* <<< glow do card agora centralizado (antes estava "at 0% 0%") */
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(0,255,156,.10), transparent 60%)
    #0d1116;
  border: 1px solid rgba(0,255,156,.20);
  box-shadow:
    0 0 0 1px rgba(0,255,156,.16) inset,
    0 14px 44px rgba(0,0,0,.45),
    0 0 34px rgba(0,255,156,.18);
}

/* Halo externo suave do card (aparece dos DOIS lados) */
.page-login .auth-card.glow::before{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 26px;
  box-shadow: 0 0 28px rgba(0,255,156,.45);
  z-index: -1;
}

/* Neon por trás da LOGO (img não aceita ::before/::after) — use este wrapper) */
.page-login .logo-wrap{ position: relative; display: inline-block; }
.page-login .logo-wrap::before{
  content:"";
  position:absolute;
  inset:-18%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(0,255,156,.45), transparent 65%);
  filter: blur(14px);
  z-index:-1;
}

/* Alias caso use .auth-hero-inner */
.page-login .auth-hero-inner{
  width:min(1100px,94vw);
  margin-inline:auto;
  display:flex;
  justify-content:center;
}

/* ===== LOGIN — centralização perfeita + sem corte do glow ===== */

/* 1) Herói com respiro simétrico e sem cortes */
.page-login .auth-hero{
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
  /* padding igual nos dois lados + notch */
  --pad-x: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  padding-left: var(--pad-x) !important;
  padding-right: var(--pad-x) !important;
}

/* 2) Contêiner interno realmente centralizado */
.page-login .auth-hero-inner{
  width: 100% !important;
  max-width: 720px !important;     /* limite “bonito” */
  margin-inline: auto !important;  /* centraliza */
  display: flex !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* 3) Card ocupa 100% do contêiner (sem usar vw) e não é clipado */
.page-login .auth-card{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 720px !important;
  margin-inline: auto !important;
  overflow: visible !important;
  border-radius: 18px !important;

  /* glow centralizado (antes estava ancorado à esquerda) */
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(0,255,156,.10), transparent 60%)
    #0d1116 !important;

  border: 1px solid rgba(0,255,156,.20) !important;
  box-shadow:
    0 0 0 1px rgba(0,255,156,.16) inset,
    0 14px 44px rgba(0,0,0,.45),
    0 0 34px rgba(0,255,156,.18) !important;
}

/* 4) Halo extra do card sem ser cortado */
.page-login .auth-card.glow::before{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 26px;
  box-shadow: 0 0 28px rgba(0,255,156,.45);
  pointer-events: none;
  z-index: -1;
}

/* 5) Halo por trás da LOGO (usa um wrapper) */
.page-login .logo-wrap{ position: relative; display: inline-block; }
.page-login .logo-wrap::before{
  content:"";
  position:absolute; inset:-18%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(0,255,156,.42), transparent 65%);
  filter: blur(14px);
  z-index:-1;
}

/* 6) Mobile: garante centralização e respiro equilibrado */
@media (max-width: 640px){
  .page-login .auth-hero-inner{ max-width: 560px !important; }
  .page-login .auth-card{ max-width: 560px !important; }
}

/* ===== AUTH (Login & Registro) — centralização única e sem cortes ===== */

/* 1) Herói: centraliza conteúdo e evita clipping do glow */
.auth-hero{
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  /* respiro simétrico e compatível com notch */
  --pad-x: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  padding-left: var(--pad-x) !important;
  padding-right: var(--pad-x) !important;
}

/* 2) Contêiner interno (login usa .auth-hero-min; registro, não)  */
.auth-hero-min,
.auth-hero-inner{
  width: 100% !important;
  max-width: 720px !important;
  margin-inline: auto !important;
  display: flex !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* 3) Card do formulário (vale para .auth-card e para o do registro .form-container.auth-card) */
.auth-card,
.form-container.auth-card{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 720px !important;
  margin-inline: auto !important;
  border-radius: 18px !important;
  overflow: visible !important;

  /* glow centralizado e simétrico */
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(0,255,156,.10), transparent 60%)
    #0d1116 !important;
  border: 1px solid rgba(0,255,156,.20) !important;
  box-shadow:
    0 0 0 1px rgba(0,255,156,.16) inset,
    0 14px 44px rgba(0,0,0,.45),
    0 0 34px rgba(0,255,156,.18) !important;
  padding: clamp(18px, 3vw, 26px) !important;
  position: relative;
}

/* 4) Halo extra sem ser cortado */
.auth-card.glow::before,
.form-container.auth-card.glow::before{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 26px;
  box-shadow: 0 0 28px rgba(0,255,156,.45);
  pointer-events: none;
  z-index: -1;
}

/* 5) Mobile: mesma largura para ambas páginas */
@media (max-width: 640px){
  .auth-hero-min, .auth-hero-inner{ max-width: 560px !important; }
  .auth-card, .form-container.auth-card{ max-width: 560px !important; }
}

/* ===== FIX: manter LOGO no login mobile ===== */
@media (max-width: 640px){
  /* container em 1 coluna, centralizado */
  .page-login .auth-hero-min,
  .page-login .auth-hero-inner{
    display: block !important;
    max-width: 560px !important;
    margin-inline: auto !important;
    overflow: visible !important;
    text-align: center; /* centraliza logo/títulos */
  }

  /* ESCONDE apenas o bloco lateral (ilustração/coluna da esquerda) */
  .page-login .auth-hero-min > .auth-side,
  .page-login .auth-hero-inner > .auth-side,
  .page-login .auth-hero-min > .auth-illustration,
  .page-login .auth-hero-inner > .auth-illustration{
    display: none !important;
  }

  /* ✅ Se você não tiver essas classes, use o fallback abaixo:
     esconde tudo que não for card NEM tiver “logo” ou for título/subtítulo */
  .page-login .auth-hero-min > *:not(.auth-card):not([class*="logo"]):not(.auth-title):not(.auth-subtitle),
  .page-login .auth-hero-inner > *:not(.auth-card):not([class*="logo"]):not(.auth-title):not(.auth-subtitle){
    display: none !important;
  }

  /* garante que LOGO/título fiquem visíveis mesmo se alguma regra anterior ocultar */
  .page-login .auth-logo,
  .page-login .logo-wrap,
  .page-login .hero-logo,
  .page-login .auth-title,
  .page-login .auth-subtitle{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* card centralizado */
  .page-login .auth-card{
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 560px !important;
    margin-inline: auto !important;
    border-radius: 18px !important;
    background:
      radial-gradient(120% 120% at 50% 50%, rgba(0,255,156,.10), transparent 60%)
      #0d1116 !important;
    border: 1px solid rgba(0,255,156,.20) !important;
    box-shadow:
      0 0 0 1px rgba(0,255,156,.16) inset,
      0 14px 44px rgba(0,0,0,.45),
      0 0 34px rgba(0,255,156,.18) !important;
    padding: clamp(18px, 3vw, 26px) !important;
  }
}

/* container da raspadinha */
.scratch-wrap{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

/* grade 3x3 (já existe, só garantimos stacking) */
.scratch-grid{
  position: relative;
  z-index: 1;
}

/* canvas da capa metálica (fica por cima do grid) */
.scratch-canvas{
  position: absolute;
  inset: 0;
  z-index: 60;
  border-radius: inherit;
  touch-action: none;
  /* leve profundidade nas bordas, igual “placa metálica” */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    inset 0 12px 32px rgba(0,0,0,.45),
    inset 0 -10px 24px rgba(255,255,255,.07);
}

/* overlay "Iniciar agora" (já existe) acima de tudo */
.scratch-overlay{
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  backdrop-filter: none; /* mantém nítido */
}

/* quando começou, some o overlay */
.scratch-wrap.started .scratch-overlay{
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* brilho sutil animado sobre a capa ENQUANTO não começou */
.scratch-wrap:not(.started) .scratch-canvas-shine{
  position: absolute;
  inset: -40% 0;            /* mais largo pra varrer cruzado */
  z-index: 61;              /* acima da capa, mas quase transparente */
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: .28;
  background:
    repeating-linear-gradient(
      110deg,
      rgba(255,255,255,.16) 0 10px,
      rgba(255,255,255,0)   10px 22px
    );
  animation: foilSweep 2.8s linear infinite;
  border-radius: inherit;
}

/* ao iniciar a raspagem, reduz o brilho pra não atrapalhar visualmente */
.scratch-wrap.started .scratch-canvas-shine{
  opacity: .12;
  animation-play-state: paused;
}

@keyframes foilSweep{
  from{ transform: translateX(-60%) }
  to  { transform: translateX(60%) }
}

/* === SCRATCH CANVAS – FIX PACK (colar no fim do CSS) === */
#scratchWrap, .scratch-wrap { position: relative !important; }

#scratchGrid, .scratch-grid {
  position: relative !important;
  isolation: isolate;                 /* garante que o z-index do canvas funcione */
}

/* canvas que cobre TODA a grade */
#scratchCanvas.scratch-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 60 !important;
  pointer-events: auto !important;
  border-radius: inherit !important;
}

/* brilho por cima do canvas */
.scratch-canvas-shine {
  position: absolute !important;
  inset: -40% 0 !important;
  z-index: 61 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

/* overlay de "Iniciar agora" fica acima do canvas, mas some ao iniciar */
.scratch-overlay { z-index: 80 !important; }

/* quando o canvas existe, esconda a capa CSS por célula */
.scratch-grid.has-canvas .scratch-cover { display: none !important; }

/* antes de iniciar, bloqueia a raspagem só por segurança */
.scratch-wrap:not(.started) #scratchCanvas { pointer-events: none; }

/* efeito visual do "desabilitado" até iniciar (se você usa aria-disabled) */
#scratchGrid[aria-disabled="true"] { filter: grayscale(.2) brightness(.85); }

/* === Fix labels das células da raspadinha === */
.scratch-cell {
  position: relative;          /* garante referência pro label absoluto */
  overflow: hidden;
}

.scratch-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;               /* centraliza a imagem */
  align-items: center;
  justify-content: center;
}

.scratch-img {
  max-width: 70%;
  max-height: 62%;
  object-fit: contain;
  pointer-events: none;
}

/* Label sempre visível, centralizado em baixo, sem "..." */
.scratch-label {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .60);
  color: #eafff6;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  max-width: 92%;
  white-space: nowrap;          /* sem quebra */
  overflow: visible;            /* sem corte */
  text-overflow: clip;          /* sem reticências */
  z-index: 3;
  box-shadow: 0 0 0 1px #00e57a33, 0 6px 14px rgba(0,0,0,.25);
}

/* Se preferir permitir quebrar em 2 linhas, troque as 3 linhas acima por:
   white-space: normal;
   text-align: center;
   line-height: 1.05;
*/