/* ================= GLOBAL & VARS ================= */
:root {
    --gradient-blue-start: #2e6d84;
    --gradient-blue-end: #002836;
    --gradient-red-start: #a40100;
    --gradient-red-end: #6f0202;

    --primary-main: var(--gradient-red-start);
    --theme-dark: rgba(0, 0, 0, 0.4);
    --theme-darker: rgba(0, 0, 0, 0.6);
    --bg-dark: var(--gradient-blue-end);
    
    --radius-xl: 22px;
    --topbar-h: 72px;
    --text-0: #ffffff;
    --text-1: #e0e0e0;
}

@font-face {
    font-family: 'CustomArialBlack';
    src: url('assets/fonts/ariblk.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap; 
}

body {
    background: linear-gradient(180deg, var(--gradient-blue-start) 10%, var(--gradient-blue-end) 80%);
    background-attachment: fixed;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    margin: 0;
    padding-top: 78px; 
    padding-bottom: 50px;
}

/* ================= BACKGROUNDS ================= */
.bg-fixed {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; 
    z-index: -5;
    background: linear-gradient(180deg, var(--gradient-blue-start) 10%, var(--gradient-blue-end) 80%); /* <--- ဒီနေရာလေး ပြင်လိုက်ပါ */
}
/* ================= LAYOUT ================= */
main.container {
    width: 100%;
    overflow-x: hidden;
    padding-left: 5px;
    padding-right: 5px;
}

@media (min-width: 992px) {
    main.container {
        max-width: 100%; 
        margin: 0; 
        padding-left: 46px; 
        padding-right: 30px;
    }
}

/* ================= TOPBAR ================= */
.topbar {
    height: var(--topbar-h);
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: linear-gradient(180deg, rgba(42, 45, 54, 0.95) 0%, rgba(30, 32, 38, 0.98) 100%);
    backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #ffffff; font-weight: 800; font-size: 20px; }

/* ================= BUTTONS & PILLS ================= */
.pill-btn { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(42, 45, 54, 0.5); color: var(--text-0); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 12px; transition: 0.2s; }
.pill-btn.primary { background: var(--primary-main); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); }

.balance-wrapper { display: flex; align-items: center; gap: 8px; }
.balance-box { display: flex; flex-direction: column; justify-content: center; background: rgba(30, 32, 38, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 4px 12px; min-width: 100px; }
.bal-row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; line-height: 1.4; }
.bal-val-main { color: #ffffff; font-weight: 800; }
.bal-val-safe { color: #a0a5b5; font-weight: 700; }
.logout-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 50, 50, 0.15); border: 1px solid rgba(255, 50, 50, 0.4); color: #ff4d4d; display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ================= HERO SECTION ================= */
.hero-wrap { display: flex; flex-direction: column; }
@media (min-width: 1400px) { .hero-wrap { max-width: 100%; margin: 0 auto; } }

.swiper.main-swiper { width: 100%; aspect-ratio: 1920 / 720; border-radius: 18px; overflow: hidden; background: var(--theme-darker); box-shadow: 0 6px 18px rgba(0,0,0,.55); }
.swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

@media (max-width: 768px) {
    .swiper.main-swiper { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; aspect-ratio: 1920 / 720; }
}
.swiper-pagination-bullet-active { width: 24px; background: #ffffff; }

@media (min-width: 769px) { .marquee-box.marquee-attached { border-radius: 0 0 18px 18px; border-bottom: 0; } .swiper.main-swiper { border-radius: 18px 18px 0 0; } }
@media (max-width: 768px) { .marquee-box.marquee-attached { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; } .swiper.main-swiper { border-radius: 0; } }

/* ================= UTILITIES ================= */
.winners-stack-container { position: relative; height: 220px; overflow: hidden; mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); }
.winner-card { position: absolute; width: 100%; height: 70px; display: flex; align-items: center; padding: 0 12px; background: rgba(42, 45, 54, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 4px solid #ffffff; border-radius: 12px; opacity: 0; transition: 0.5s; }
.winner-card.active { opacity: 1; }
.w-info { flex-grow: 1; padding-left: 10px; } 
.w-game-name { color: #ffffff; font-size: 13px; font-weight: 800; } 
.w-user { color: #e0e0e0; font-size: 11px; } 
.w-amount { color: #ffd700; font-weight: 800; font-size: 15px; }

.d-none { display: none !important; }