html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Kanit', 'Orbitron', sans-serif;
    background: #ffffff radial-gradient(ellipse at 60% 40%, #614624 0%);
    background-size: cover;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    display: flex;
    
}

/* VIDEO BG */
.casino-bgvid {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: cover;
    z-index: 0;
    opacity: 0.39;
    pointer-events: none;
    will-change: opacity;
    backface-visibility: hidden;
    transition: opacity .12s;
    background: #120c1d;
}

.lux-overlay {
    pointer-events: none;
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:
        linear-gradient(115deg, #ffd7000a 15%, #2d213f99 100%),
        radial-gradient(ellipse at 80% 22%, #ffd70012 0 16%, #fff0 95%);
    mix-blend-mode: lighten;
    opacity: .14;
}



/* CARD, LOGO, INPUT */
.login-card {
    max-width: 410px;
    width: 96vw;
    margin: 7vw auto 0 auto;
    background: rgba(255, 255, 255, 0.379);
    border-radius: 1.65rem;
    box-shadow: 0 3px 16px #ffd70011, 0 0 0 1.5px #ffd70013;
    padding: 2.5rem 2.1rem 2rem 2.1rem;
    text-align: center;
    position: relative;
    z-index: 8;
    overflow: visible;
    border: 1px solid #000000;
    transition: box-shadow .16s;
    
}



.logo {
    width: 240px;
    max-width: 92vw;
    margin-bottom: .7rem;
    border-radius: 1.2rem;
    background: transparent;
    filter: drop-shadow(0 0 3px #000000d3) drop-shadow(0 0 5px #2e325a11);
}

.login-card h3 {
    font-family: 'Orbitron', 'Kanit', sans-serif;
    font-weight: 800;
    font-size: 2.05rem;
    letter-spacing: 2px;
    background: linear-gradient(97deg, #000000 43%, #000000 87%, #fff 97%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 4px #ffd70011;
    margin-bottom: 1.2rem;
}

.glow-accent {
    color: #000000;
    text-shadow: 0 0 9px #ffd70066, 0 0 9px #ff384e33;
}

.alert {
    font-size: 1.03rem;
    margin-bottom: 1.1rem;
    border-radius: .88rem;
    background: #ff384e11;
    border: 1.1px solid #ffd70030;
    color: #000000;
    font-weight: 600;
    box-shadow: 0 0 2px #ffd70006;
    letter-spacing: .11px;
}

.form-label {
    font-weight: 500;
    color: #000000;
    margin-bottom: .14rem;
    letter-spacing: .32px;
    text-shadow: 0 0 3px #00000033;
}

.form-control {
    background: rgba(255, 255, 255, 0.09);
    color: #fff9e5;
    border: 1px solid #00000025;
    border-radius: 1.05rem;
    font-size: 1.05rem;
    margin-bottom: .29rem;
    padding: .66rem 1.02rem;
    transition: all .12s;
    box-shadow: 0 0 2px #ffd70005;
    font-family: 'Kanit', 'Orbitron', sans-serif;
}

.form-control:focus {
    background: rgba(0, 0, 0, 0.13);
    box-shadow: 0 0 0 1.5px #00000011;
    color: #000000;
}

.input-group-text,
.btn-outline-light {
    background: none;
    border: none;
    color: #ff384e;
    transition: color .12s;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.06);
}

.btn-primary {
    background: linear-gradient(95deg, #e2c000 20%, #ffd700 68%, #ff384e 100%);
    color: #120c1d;
    font-weight: 700;
    border: none;
    font-size: 1.11rem;
    border-radius: 0.98rem;
    box-shadow: 0 2px 7px #ffd70045, 0 1.5px 5px #ff384e10;
    margin-top: 0.7rem;
    letter-spacing: .8px;
    transition: all .11s cubic-bezier(.67, .17, .44, 1.03), box-shadow .13s;
    text-shadow: 0 1.5px 4px #ffd7000c;
}

.btn-primary:hover {
    background: linear-gradient(97deg, #ff384e 20%, #ffd700 100%);
    color: #1a192f;
    box-shadow: 0 2px 14px #ffd70087, 0 2px 8px #ff384e19;
}

.g-recaptcha {
    margin: 1.2rem auto .3rem auto;
    transform: scale(0.98);
    border-radius: .7rem;
    overflow: hidden;
    box-shadow: 0 0 2px #ffd70007;
    background: #fff2;
}

/* มือถือแนวตั้ง จอเล็ก */
@media (max-width: 600px) {
    .login-card {
        padding: .7rem 2vw 1rem 2vw;
        margin-top: 16vw;
        max-width: 98vw;
    }

    .logo {
        width: 80px;
    }

    .scan-bar {
        height: 5px;
    }

    .form-control,
    .btn-primary {
        font-size: .96rem;
        padding: .56rem .9rem;
    }

    .g-recaptcha {
        transform: scale(0.88);
    }
}

/* มือถือ/แท็บเล็ตจอสูง, iPad แนวตั้ง */
@media (max-width: 900px) and (max-height: 1200px) {
    .login-card {
        margin-top: 12vw;
        max-width: 98vw;
    }

    .logo {
        width: 95px;
    }
}

/* iPad แนวนอน, แท็บเล็ตจอใหญ่ */
@media (min-width: 600px) and (max-width: 1200px) and (orientation: landscape) {
    .login-card {
        margin-top: 5vw;
        padding: 1.2rem 5vw 1.6rem 5vw;
        max-width: 88vw;
    }

    .logo {
        width: 110px;
    }
}

body,
input,
button,
textarea {
    user-select: none;
}