@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans+SC:ital,wght@0,100..900;1,100..900&family=Anton&family=Bebas+Neue&family=Charm:wght@400;700&family=Dancing+Script:wght@400..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Pacifico&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik+80s+Fade&family=Rubik:ital,wght@0,300..900;1,300..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


:root {
    --bg0: #05030b;
    --bg1: #0b0618;
    --bg2: #120a27;

    /* deeper pastel pink */
    --pinkA: #ff66c4;
    --pinkB: #ff9ad8;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Oswald", sans-serif;
    color: rgba(255, 255, 255, .88);
    user-select: none;
}

.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;

    /* base */
    background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg0) 100%);
}

/* big glow (no hard edge) */
.bg::after {
    content: "";
    position: absolute;
    inset: -25%;
    pointer-events: none;

    /* ซ้อนหลายชั้นเพื่อให้ “กลางชัด แต่ขอบนุ่ม” */
    background:
        radial-gradient(1100px 1100px at 50% 45%,
            rgba(255, 102, 196, .22) 0%,
            rgba(255, 154, 216, .18) 28%,
            rgba(255, 154, 216, .10) 50%,
            rgba(255, 154, 216, .05) 68%,
            transparent 82%),
        radial-gradient(700px 700px at 50% 45%,
            rgba(255, 102, 196, .18) 0%,
            rgba(255, 154, 216, .10) 45%,
            transparent 78%);

    filter: blur(14px);
    opacity: 1;
}

/* subtle stars/dust + vignette */
.bg::before {
    content: "";
    position: absolute;
    inset: -30%;
    pointer-events: none;

    background:
        /* stars */
        radial-gradient(1px 1px at 12% 20%, rgba(255, 255, 255, .55) 50%, transparent 51%),
        radial-gradient(1px 1px at 38% 14%, rgba(255, 255, 255, .35) 50%, transparent 51%),
        radial-gradient(1px 1px at 64% 18%, rgba(255, 255, 255, .45) 50%, transparent 51%),
        radial-gradient(1px 1px at 82% 28%, rgba(255, 255, 255, .35) 50%, transparent 51%),
        radial-gradient(1px 1px at 22% 58%, rgba(255, 255, 255, .40) 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 66%, rgba(255, 255, 255, .30) 50%, transparent 51%),
        radial-gradient(1px 1px at 78% 74%, rgba(255, 255, 255, .35) 50%, transparent 51%),
        radial-gradient(1px 1px at 90% 60%, rgba(255, 255, 255, .25) 50%, transparent 51%),
        radial-gradient(1px 1px at 10% 80%, rgba(255, 255, 255, .25) 50%, transparent 51%),

        /* vignette */
        radial-gradient(1200px 900px at 50% 50%, rgba(0, 0, 0, 0), rgba(0, 0, 0, .62) 72%);

    background-size: 520px 520px, 520px 520px, 520px 520px, 520px 520px,
        520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px,
        cover;
    opacity: .55;
    filter: blur(.2px);
}


/* ===== Topbar segmented (balanced) ===== */
.topbar {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.topbar__seg {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* ทุกช่องเท่ากัน */
    gap: 6px;

    padding: 10px;
    border-radius: 18px;

    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .06));
    border: 1px solid rgba(255, 255, 255, .14);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 -18px 38px rgba(0, 0, 0, .34),
        0 22px 60px rgba(0, 0, 0, .55);

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

.topbar__seg::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 6px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
    opacity: .9;
    pointer-events: none;
}

.topbar__pill {
    position: absolute;
    top: 8px;
    left: 8px;
    height: calc(100% - 16px);
    width: 10px;
    border-radius: 14px;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.073), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 10px 30px rgba(0, 0, 0, .35);

    transform: translateX(0);
    transition: transform .28s cubic-bezier(.2, .9, .2, 1), width .28s cubic-bezier(.2, .9, .2, 1);
    will-change: transform, width;
    pointer-events: none;
    -webkit-backdrop-filter: blur(12px);
    -webkit-user-drag: none;
}

.topbar__btn {
    position: relative;
    z-index: 1;
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: "roboto", sans-serif;
    font-size: 12.5px;
    font-weight: bold;

    color: rgba(255, 255, 255, .72);
    padding: 10px 14px;
    border-radius: 14px;

    transition: transform .12s ease, color .18s ease;
}

.topbar__btn:hover {
    color: rgba(255, 255, 255, .92);
    transform: translateY(-1px);
}

.topbar__btn.is-active {
    color: rgba(255, 255, 255, .96);
}

/* mobile: ยืดเต็ม */
@media (max-width: 640px) {
    .topbar {
        left: 12px;
        right: 12px;
        transform: none;
    }

    .topbar__seg {
        width: 100%;
    }
}