* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(100, 10, 30, 0.32) 0%,
            rgba(45, 5, 18, 0.22) 28%,
            rgba(8, 0, 3, 0.92) 72%,
            #050505 100%
        );

    color: white;

    font-family:
        "Microsoft YaHei",
        sans-serif;
}


/* =========================================
   背景氛围光
   ========================================= */

body::before {
    content: "";

    position: fixed;

    left: 50%;
    top: 50%;

    width: 65vw;
    height: 65vw;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(180, 20, 60, 0.12) 0%,
            rgba(120, 10, 35, 0.06) 35%,
            transparent 70%
        );

    pointer-events: none;

    z-index: 0;

    animation:
        backgroundGlow
        5s
        ease-in-out
        infinite
        alternate;
}

@keyframes backgroundGlow {

    from {
        transform:
            translate(-50%, -50%)
            scale(0.95);

        opacity: 0.65;
    }

    to {
        transform:
            translate(-50%, -50%)
            scale(1.08);

        opacity: 1;
    }
}


/* =========================================
   开始界面
   ========================================= */

#startScreen {
    position: fixed;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 10000;
}


/* =========================================
   ANCDA
   ========================================= */

#startScreen .brand {
    margin-bottom: 8px;

    font-size: 20px;

    font-weight: 500;

    letter-spacing: 4px;

    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

    text-shadow:
        0 0 18px
        rgba(
            255,
            40,
            90,
            0.2
        );
}


/* =========================================
   爱心弹窗标题
   ========================================= */

#startScreen h1 {
    margin-top: 0;

    margin-bottom: 30px;

    font-size: 42px;

    font-weight: 400;

    text-shadow:
        0 0 20px
        rgba(
            255,
            40,
            90,
            0.25
        );
}


/* =========================================
   开始按钮
   ========================================= */

#startButton {
    padding: 14px 36px;

    border: none;

    border-radius: 8px;

    background: #e63946;

    color: white;

    font-size: 18px;

    cursor: pointer;

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

#startButton:hover {
    transform: scale(1.05);

    box-shadow:
        0 0 25px
        rgba(
            230,
            57,
            70,
            0.35
        );
}

#startButton:active {
    transform: scale(0.98);
}


/* =========================================
   弹窗舞台
   ========================================= */

#popupContainer {
    position: fixed;

    inset: 0;

    width: 100vw;

    height: 100vh;

    pointer-events: none;

    overflow: hidden;

    z-index: 10;
}


/* =========================================
   单个弹窗
   ========================================= */

.popup {
    position: absolute;

    width: 130px;

    height: 52px;

    padding: 5px 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 6px;

    font-size: 13px;

    line-height: 1.25;

    overflow: hidden;

    transform-origin: center;

    opacity: 0;

    animation:
        popupAppear
        45ms
        ease-out
        forwards;

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

@keyframes popupAppear {

    from {
        opacity: 0;

        transform:
            scale(0.92);
    }

    to {
        opacity: 1;

        transform:
            scale(1);
    }
}


/* =========================================
   最终照片
   ========================================= */

#finalImage {
    position: fixed;

    left: 0;

    top: 0;

    width: 100vw;

    height: 100vh;

    display: none;

    background: black;

    z-index: 20000;

    overflow: hidden;
}

#finalImage img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}