/* ==================================================
   RESET
================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    width: 100%;
    min-height: 100%;
}


body {
    width: 100%;
    min-height: 100%;

    font-family:
        Arial,
        "Tahoma",
        "Noto Sans Thai",
        sans-serif;

    color: #ffffff;

    background: #08000f;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* ==================================================
   PAGE
================================================== */

.site {
    position: relative;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;
}


/* ==================================================
   BACKGROUND
================================================== */

.background {
    position: fixed;

    inset: 0;

    z-index: 0;

    background-image:
        linear-gradient(
            180deg,
            rgba(5, 0, 12, 0.62),
            rgba(6, 0, 15, 0.90)
        ),
        url("../assets/bg.jpg");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    transform: scale(1.02);
}


/* แสงม่วงด้านบน */

.background::before {
    content: "";

    position: absolute;

    top: -180px;
    left: 50%;

    width: 600px;
    height: 400px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(190, 0, 255, 0.20),
            transparent 70%
        );

    pointer-events: none;
}


/* ==================================================
   MAIN CONTAINER
================================================== */

.container {
    position: relative;

    z-index: 2;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    display: flex;

    justify-content: center;
    align-items: center;

    padding:
        25px
        15px;
}


/* ==================================================
   CARD
================================================== */

.card {
    position: relative;

    width: 100%;
    max-width: 430px;

    padding: 7px;

    overflow: hidden;

    border:
        1px solid
        rgba(230, 50, 255, 0.72);

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(24, 0, 40, 0.97),
            rgba(4, 3, 14, 0.98)
        );

    box-shadow:

        0 0 12px
        rgba(230, 0, 255, 0.25),

        0 0 50px
        rgba(140, 0, 255, 0.14);

}


/* แสงใน Card */

.card::before {
    content: "";

    position: absolute;

    top: -170px;
    left: 50%;

    width: 330px;
    height: 330px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(221, 0, 255, 0.10),
            transparent 68%
        );

    pointer-events: none;
}


/* ==================================================
   BANNER
================================================== */

.banner {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 7px;

    background: #13001e;
}


.banner img {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: cover;
}


/* ==================================================
   BRAND
================================================== */

.brand {
    position: relative;

    padding:
        13px
        8px
        9px;

    text-align: center;
}


.brand h1 {
    margin: 0;

    color: #ff35e8;

    font-size: 23px;
    font-weight: 800;

    letter-spacing: 0.5px;

    text-shadow:
        0 0 7px
        rgba(255, 0, 230, 0.70),

        0 0 18px
        rgba(255, 0, 230, 0.25);
}


.brand p {
    margin-top: 7px;

    color: #d4d1d8;

    font-size: 11px;

    line-height: 1.7;
}


/* ==================================================
   BUTTON AREA
================================================== */

.buttons {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding:
        2px
        0
        10px;
}


/* ==================================================
   BUTTON
================================================== */

.button {
    position: relative;

    width: 100%;
    min-height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 6px;

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    overflow: hidden;

    user-select: none;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}


.button:hover {
    filter: brightness(1.10);

    transform:
        translateY(-1px);
}


.button:active {
    transform:
        scale(0.98);
}


.button span {
    position: relative;

    z-index: 2;
}


/* ==================================================
   REGISTER BUTTON
================================================== */

.register {
    background:
        linear-gradient(
            90deg,
            #ff19bf,
            #d000ff,
            #ff19bf
        );

    background-size: 200% 100%;

    box-shadow:
        0 0 12px
        rgba(255, 0, 225, 0.35),

        0 0 28px
        rgba(190, 0, 255, 0.18);

    animation:
        registerPulse 2.1s ease-in-out infinite,
        registerGradient 3.5s linear infinite;
}


/* แสงวิ่ง */

.register::before {
    content: "";

    position: absolute;

    top: 0;
    left: -75%;

    width: 42%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.48),
            transparent
        );

    transform:
        skewX(-22deg);

    animation:
        buttonShine 3s ease-in-out infinite;

    pointer-events: none;
}


/* เส้นขอบเรือง */

.register::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    border:
        1px solid
        rgba(255,255,255,0.15);

    pointer-events: none;
}


@keyframes registerPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }

}


@keyframes registerGradient {

    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }

}


@keyframes buttonShine {

    0% {
        left: -75%;
    }

    42%,
    100% {
        left: 135%;
    }

}


/* ==================================================
   LOGIN
================================================== */

.login {
    background:
        linear-gradient(
            90deg,
            #e400d4,
            #b719ff
        );

    box-shadow:
        0 0 10px
        rgba(215, 0, 255, 0.18);
}


/* ==================================================
   INSTALL
================================================== */

.install {
    background:
        linear-gradient(
            90deg,
            #7122ff,
            #cf1cff
        );

    box-shadow:
        0 0 10px
        rgba(120, 0, 255, 0.25);
}


/* ==================================================
   PANELS
================================================== */

.panel {
    position: relative;

    border:
        1px solid
        rgba(218, 50, 255, 0.48);

    border-radius: 6px;

    background:
        rgba(0, 0, 0, 0.24);

    box-shadow:
        inset 0 0 20px
        rgba(150, 0, 255, 0.035);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


/* ==================================================
   STATS
================================================== */

.stats {
    padding:
        4px
        9px;
}


.stat {
    min-height: 31px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);

    color: #dcd9df;

    font-size: 11px;
}


.stat:last-child {
    border-bottom: 0;
}


.stat strong {
    color: #ffffff;

    font-size: 11px;
}


.stars {
    color: #ffd500 !important;

    letter-spacing: 1px;
}


.green {
    color: #45e889 !important;
}


/* ==================================================
   FEATURES
================================================== */

.features {
    margin-top: 7px;

    padding:
        7px
        9px;
}


/* หัวข้อ */

.panel-title {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-bottom: 3px;

    color: #ff43e9;

    font-size: 13px;
    font-weight: 700;

    text-shadow:
        0 0 8px
        rgba(255, 0, 220, 0.35);
}


.title-line {
    width: 35px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c725ff
        );
}


.title-line:last-child {
    background:
        linear-gradient(
            90deg,
            #c725ff,
            transparent
        );
}


/* Feature row */

.feature {
    min-height: 29px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);

    color: #dcd9df;

    font-size: 11px;
}


.feature:last-child {
    border-bottom: 0;
}


.feature b {
    color: #ffffff;

    font-size: 11px;
}


/* ==================================================
   FOOTER
================================================== */

footer {
    padding:
        10px
        0
        3px;

    text-align: center;

    color: #727078;

    font-size: 9px;
}


.footer-logo {
    margin-bottom: 2px;

    color: #b437d7;

    font-size: 10px;
    font-weight: 700;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .container {

        align-items: flex-start;

        padding:
            8px
            7px
            15px;

    }


    .card {

        max-width: 100%;

        padding: 6px;

    }


    .brand {

        padding-top: 11px;

    }


    .brand h1 {

        font-size: 20px;

    }


    .brand p {

        font-size: 10.5px;

    }


    .button {

        min-height: 42px;

        font-size: 13px;

    }


    .register {

        animation:
            registerPulseMobile 2.2s ease-in-out infinite,
            registerGradient 3.5s linear infinite;

    }


    .stat {

        min-height: 29px;

        font-size: 10.5px;

    }


    .stat strong {

        font-size: 10.5px;

    }


    .feature {

        min-height: 28px;

        font-size: 10.5px;

    }

}


/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width: 380px) {

    .container {

        padding:
            5px
            5px
            12px;

    }


    .card {

        padding: 5px;

    }


    .brand h1 {

        font-size: 19px;

    }


    .brand p {

        font-size: 10px;

    }


    .button {

        min-height: 40px;

        font-size: 12px;

    }


    .stat,
    .feature {

        font-size: 10px;

    }

}


@keyframes registerPulseMobile {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.018);
    }

}


/* ==================================================
   DESKTOP
================================================== */

@media (min-width: 900px) {

    .container {

        padding: 30px;

    }


    .card {

        width: 430px;

    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation: none !important;

        transition: none !important;

    }

}