html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100dvh;

    overflow-x: hidden;
    overflow-y: auto;

    background: black;

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

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
}

/* Stop dragging mah shit */
img {
    -webkit-user-drag: none;
    user-drag: none;

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
}

/* Video */
#background-video {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100dvh;

    object-fit: cover;
    object-position: center;

    background: black;

    z-index: 0;
    pointer-events: none;
}

/* Language */
.language-switch {
    position: fixed;

    top: 15px;
    left: 15px;

    z-index: 10;

    display: flex;
    gap: 8px;
}

.language-switch button {
    padding: 8px 14px;

    border: 1px solid rgba(255, 182, 217, 0.7);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.45);
    color: #fff0f7;

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

    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;

    backdrop-filter: blur(6px);

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.language-switch button:hover {
    background: rgba(255, 158, 207, 0.35);
    transform: translateY(-1px);
}

/* Subtitles */
#thai-subtitles {
    position: fixed;

    left: 50%;
    bottom: 7vh;

    transform: translateX(-50%);

    width: 92%;
    max-width: 1000px;

    z-index: 3;

    text-align: center;

    color: #fff0f7;

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

    font-size: 1.8rem;
    font-weight: 700;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.85);
}

/* Headers */
h1,
h2 {
    position: relative;
    z-index: 2;

    text-align: center;
}

h1 {
    color: #fff4f7;

    margin: 7vh 20px 15px;

    font-family: "Mali", cursive;

    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 700;

    line-height: 1.3;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.95),
        0 0 10px rgba(255, 143, 177, 0.5);
}

h2 {
    color: #ffd9e8;

    margin: 10px 20px 0;

    font-family: "Mali", cursive;

    font-size: clamp(1.05rem, 3vw, 1.4rem);
    font-weight: 500;

    line-height: 1.5;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.9);
}

/* ASCII */
.ascii-wrapper {
    position: relative;
    z-index: 2;

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

    width: 100%;

    margin: 18px 0;
}

.ascii-love {
    margin: 0;

    font-family: monospace;

    font-size: clamp(0.55rem, 2.2vw, 1rem);
    line-height: 1.05;

    white-space: pre;
    text-align: left;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.9);
}

.bird-me {
    color: #8ecbff;
}

.bird-mo {
    color: #ffe27a;
}

.heart {
    color: #ff9ecf;
}

.branch {
    color: #fff0f7;
}

/* Countdown */
.countdown-wrapper {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 600px;

    margin: 12px auto 14px;

    text-align: center;
}

.countdown-title {
    margin-bottom: 8px;

    color: #fff4f8;

    font-family: "Mali", cursive;

    font-size: clamp(0.95rem, 2.5vw, 1.2rem);
    font-weight: 600;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.9),
        0 0 8px rgba(255, 158, 207, 0.35);
}

.countdown {
    display: flex;
    justify-content: center;

    gap: 8px;
}

.countdown-box {
    min-width: 62px;

    padding: 7px 10px;

    color: #fff8fb;

    background: rgba(20, 10, 18, 0.45);

    border: 1px solid rgba(255, 190, 220, 0.6);
    border-radius: 12px;

    backdrop-filter: blur(6px);

    box-shadow:
        0 0 10px rgba(255, 158, 207, 0.08);

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8);
}

.countdown-box span {
    display: block;

    color: #ffd6ea;

    font-family: "Mali", cursive;

    font-size: 1.15rem;
    font-weight: 700;
}

.countdown-box small {
    display: block;

    margin-top: 1px;

    color: #fff0f7;

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

    font-size: 0.7rem;
    font-weight: 500;
}

/* Big Butt-buttons */
.menu {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;

    width: 90%;
    max-width: 900px;

    margin: 22px auto 70px;
}

.love-button {
    text-decoration: none;

    color: #fff8fb;

    border-radius: 999px;

    padding: 11px 18px;

    font-family: "Mali", cursive;

    font-size: 0.95rem;
    font-weight: 600;

    backdrop-filter: blur(7px);

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.65);

    -webkit-user-drag: none;

    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;

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

/* Button coloursssss */
.photos-button {
    background: rgba(110, 185, 255, 0.28);
    border: 1px solid rgba(150, 210, 255, 0.85);
}

.letter-button {
    background: rgba(255, 100, 150, 0.30);
    border: 1px solid rgba(255, 150, 190, 0.85);
}

.reasons-button {
    background: rgba(185, 140, 255, 0.28);
    border: 1px solid rgba(215, 180, 255, 0.85);
}

.story-button {
    background: rgba(205, 90, 105, 0.34);
    border: 1px solid rgba(255, 175, 180, 0.85);
}

.future-button {
    background: rgba(90, 210, 245, 0.28);
    border: 1px solid rgba(145, 230, 255, 0.85);
}

.miss-button {
    background: rgba(255, 165, 135, 0.28);
    border: 1px solid rgba(255, 195, 170, 0.85);
}

.love-button:hover {
    transform: translateY(-2px) scale(1.03);

    filter: brightness(1.15);

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.22);
}

/* Phone Debug */
@media (max-width: 600px) {

    h1 {
        margin-top: 6vh;

        font-size: clamp(1.8rem, 9vw, 2.6rem);
    }

    h2 {
        font-size: clamp(1rem, 5vw, 1.35rem);
    }

    .ascii-love {
        font-size: clamp(0.45rem, 2.7vw, 0.8rem);
    }

    .countdown-wrapper {
        width: 96%;

        margin: 10px auto 12px;
    }

    .countdown-title {
        font-size: 0.95rem;

        margin-bottom: 6px;
    }

    .countdown {
        gap: 5px;
    }

    .countdown-box {
        min-width: 50px;

        padding: 6px 7px;
    }

    .countdown-box span {
        font-size: 1rem;
    }

    .countdown-box small {
        font-size: 0.62rem;
    }

    #thai-subtitles {
        bottom: 6vh;

        width: 94%;

        font-size: 1.35rem;
    }

    .menu {
        flex-direction: column;

        width: 82%;
        gap: 10px;

        margin-bottom: 90px;
    }

    .love-button {
        text-align: center;

        font-size: 0.92rem;
    }
}