/* ============================================
   HI69 — Page-Specific Styles
   ============================================ */

/* ---- Home Page ---- */
.banner-carousel {
    position: relative; margin: var(--space-md);
    border-radius: var(--radius-lg); overflow: hidden;
    height: 160px;
}
.banner-track {
    display: flex; transition: transform 0.5s ease;
    height: 100%;
}
.banner-slide {
    min-width: 100%; height: 100%;
    background-size: cover; background-position: center;
    border-radius: var(--radius-lg);
    display: flex; align-items: flex-end;
    padding: var(--space-lg);
}
.banner-slide-content {
    background: rgba(0,0,0,0.5); backdrop-filter: blur(5px);
    padding: 8px 16px; border-radius: var(--radius-sm);
}
.banner-slide-content h3 { font-size: var(--font-size-sm); color: var(--gold); }
.banner-slide-content p { font-size: var(--font-size-xs); color: var(--text-secondary); }

.banner-dots {
    position: absolute; bottom: 8px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 6px;
}
.banner-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transition: all var(--transition-normal);
}
.banner-dot.active {
    width: 18px; border-radius: 3px;
    background: var(--green);
}

/* Game Category Tabs */
.game-categories {
    display: flex; gap: var(--space-sm);
    padding: 0 var(--space-md);
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.game-categories::-webkit-scrollbar { display: none; }
.game-cat-item {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    padding: 8px 14px; border-radius: var(--radius-md);
    background: var(--bg-card);
    min-width: fit-content; scroll-snap-align: start;
    transition: all var(--transition-normal);
    cursor: pointer; color: var(--text-muted);
    font-size: var(--font-size-xs); font-weight: 500;
    border: 1px solid transparent;
}
.game-cat-item.active {
    background: rgba(0,200,150,0.1);
    border-color: var(--green);
    color: var(--green);
}
.game-cat-item .cat-icon { font-size: 22px; }

/* Game Section */
.game-section {
    padding: var(--space-md);
}
.section-header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}
.section-title {
    font-size: var(--font-size-md); font-weight: 700;
    display: flex; align-items: center; gap: var(--space-sm);
}
.section-title::before {
    content: ''; width: 3px; height: 18px;
    background: var(--gradient-green); border-radius: 2px;
}
.section-more {
    font-size: var(--font-size-xs); color: var(--text-muted);
    display: flex; align-items: center; gap: 4px;
}

.game-grid {
    display: grid; gap: var(--space-sm);
    grid-template-columns: repeat(3, 1fr);
}
.game-grid-4 { grid-template-columns: repeat(4, 1fr); }

.game-scroll {
    display: flex; gap: var(--space-sm);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: 4px;
}
.game-scroll::-webkit-scrollbar { display: none; }
.game-scroll .card-game {
    min-width: 110px; scroll-snap-align: start;
}

/* ---- Auth Pages (Login/Register) ---- */
.auth-page {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: var(--space-xl);
    background: var(--gradient-dark);
}
.auth-logo { height: 60px; margin-bottom: var(--space-xl); }
.auth-card {
    width: 100%; max-width: 400px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    animation: fadeInUp 0.5s ease;
}
.auth-title {
    font-size: var(--font-size-xl); font-weight: 700;
    text-align: center; margin-bottom: 4px;
}
.auth-subtitle {
    text-align: center; color: var(--text-muted);
    font-size: var(--font-size-sm); margin-bottom: var(--space-xl);
}
.auth-footer {
    text-align: center; margin-top: var(--space-lg);
    font-size: var(--font-size-sm); color: var(--text-muted);
}
.auth-footer a { color: var(--green); font-weight: 600; }

/* ---- Wallet Page ---- */
.wallet-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
    margin-top: var(--space-lg);
}
.wallet-action-btn {
    display: flex; flex-direction: column;
    align-items: center; gap: var(--space-sm);
    padding: var(--space-lg); border-radius: var(--radius-lg);
    background: var(--bg-card); border: 1px solid var(--border-color);
    color: var(--text-primary); transition: all var(--transition-normal);
}
.wallet-action-btn:active { transform: scale(0.97); }
.wallet-action-icon { font-size: 28px; }
.wallet-action-label { font-size: var(--font-size-sm); font-weight: 500; }

/* Transaction list */
.transaction-list { padding: var(--space-md); }
.transaction-item {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: var(--space-md); border-radius: var(--radius-md);
    background: var(--bg-card); margin-bottom: var(--space-sm);
    border: 1px solid var(--border-light);
}
.transaction-info { display: flex; flex-direction: column; gap: 2px; }
.transaction-type { font-size: var(--font-size-sm); font-weight: 600; }
.transaction-time { font-size: var(--font-size-xs); color: var(--text-muted); }
.transaction-amount { font-weight: 700; font-size: var(--font-size-base); }
.transaction-amount.credit { color: var(--green); }
.transaction-amount.debit { color: var(--red); }

/* ---- Profile Page ---- */
.profile-header {
    text-align: center; padding: var(--space-2xl);
    background: linear-gradient(135deg, #1e3a4f, #0f2636);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.profile-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--gradient-green); margin: 0 auto var(--space-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800; color: #fff;
    border: 3px solid rgba(0,200,150,0.3);
}
.profile-name { font-size: var(--font-size-lg); font-weight: 700; }
.profile-uid { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 4px; }

.profile-menu { padding: var(--space-md); }
.profile-menu-item {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 14px var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xs);
    transition: background var(--transition-normal);
}
.profile-menu-item:active { background: var(--bg-card); }
.profile-menu-left { display: flex; align-items: center; gap: var(--space-md); }
.profile-menu-icon { font-size: 20px; color: var(--text-muted); width: 24px; text-align: center; }
.profile-menu-label { font-size: var(--font-size-base); }
.profile-menu-arrow { color: var(--text-muted); font-size: 16px; }

/* ---- Promotion Page ---- */
.promo-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm); margin: var(--space-lg) var(--space-md);
}
.promo-stat-card {
    background: var(--bg-card); border-radius: var(--radius-md);
    padding: var(--space-md); text-align: center;
    border: 1px solid var(--border-light);
}
.promo-stat-value { font-size: var(--font-size-lg); font-weight: 800; color: var(--gold); }
.promo-stat-label { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 2px; }

.referral-code-box {
    margin: var(--space-md);
    background: linear-gradient(135deg, rgba(0,200,150,0.1), rgba(0,200,150,0.02));
    border: 1px dashed var(--green);
    border-radius: var(--radius-lg);
    padding: var(--space-lg); text-align: center;
}
.referral-code {
    font-size: var(--font-size-xl); font-weight: 800;
    color: var(--green); letter-spacing: 2px;
    margin: var(--space-sm) 0;
}

/* ---- VIP Page ---- */
.vip-card {
    margin: var(--space-md);
    background: linear-gradient(135deg, #2d1b4e, #1a0f30);
    border: 1px solid rgba(155,89,182,0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-xl); text-align: center;
}
.vip-level { font-size: 48px; margin-bottom: var(--space-sm); }
.vip-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--gold); }

/* ---- Check-in Page ---- */
.checkin-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm); padding: var(--space-md);
}
.checkin-day {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: var(--space-md);
    text-align: center; transition: all var(--transition-normal);
}
.checkin-day.checked {
    background: rgba(0,200,150,0.1);
    border-color: var(--green);
}
.checkin-day.today {
    border-color: var(--gold);
    animation: glow 2s ease-in-out infinite;
}
.checkin-day-num { font-size: var(--font-size-xs); color: var(--text-muted); }
.checkin-day-reward { font-size: var(--font-size-sm); font-weight: 700; color: var(--gold); margin-top: 4px; }