body {
    background: #18181b;
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans SC', '微软雅黑', 'Arial', sans-serif;
    color: #fff;
    min-height: 100vh;
    overflow: hidden;
}

#container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    background: #232328cc;
    border-radius: 18px;
    box-shadow: 0 4px 32px #000a, 0 0 0 2px #b6000033;
    padding: 40px 32px 28px 32px;
    min-width: 310px;
    max-width: 94vw;
    z-index: 2;
    position: relative;
}

.card h1 {
    margin-bottom: 10px;
    font-weight: 900;
    letter-spacing: 4px;
    color: #ff2222;
    text-shadow: 0 0 14px #b6000044;
}

input {
    display: block;
    width: 90%;
    margin: 18px auto 12px auto;
    padding: 10px 14px;
    border-radius: 8px;
    border: none;
    background: #28292e;
    color: #fff;
    font-size: 19px;
    outline: none;
    box-shadow: 0 1px 6px #0002;
}

input:focus {
    background: #19191d;
    box-shadow: 0 2px 10px #b6000022;
}

button {
    background: #b60000;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 34px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.18s;
    margin: 18px auto 0 auto;
    display: block;
    box-shadow: 0 2px 18px #0002;
}

button:hover, button:focus {
    background: #ff2222;
}

.tip {
    color: #ff2222;
    font-size: 15px;
    margin-top: 18px;
    height: 1.2em;
    letter-spacing: 2px;
}

.desc {
    color: #eeb6b6;
    font-size: 15px;
    margin-bottom: 0;
    letter-spacing: 1px;
    line-height: 1.5;
}

#game {
    background: #151518cc;
    border-radius: 18px;
    box-shadow: 0 4px 32px #000a;
    min-width: 330px;
    max-width: 97vw;
    min-height: 220px;
    padding: 36px 20px 24px 20px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hidden {
    display: none !important;
}

.story {
    font-size: 23px;
    color: #fff;
    margin-bottom: 32px;
    line-height: 1.7;
    letter-spacing: 2px;
    text-align: left;
    min-height: 80px;
}

.options {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.opt-btn {
    background: #2a2a2d;
    border: 2px solid #ff2222cc;
    color: #fff;
    font-size: 18px;
    padding: 11px 12px;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 2px;
    box-shadow: 0 1px 7px #b6000035;
    transition: all 0.13s;
}

.opt-btn:hover, .opt-btn:focus {
    background: #ff2222;
    color: #fff;
    border-color: #b60000;
}

@media (max-width: 700px) {
    #container, .card, #game { min-width: 90vw !important; padding-left: 8px !important; padding-right: 8px !important;}
    .story { font-size: 17px; }
    .opt-btn { font-size: 15px; padding: 10px 5px;}
}

#mask {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 99;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #fff;
    flex-direction: column;
    transition: opacity 1.3s;
    opacity: 1;
}

.findyou-red {
    color: #ff2222;
    font-family: 'Ma Shan Zheng', 'ZCOOL KuaiLe', '微软雅黑', cursive, sans-serif;
    font-size: 2.2em;
    font-weight: bold;
    position: absolute;
    left: 0; top: 0;
    pointer-events: none;
    text-shadow: 0 0 22px #ff2222, 0 0 8px #b60000;
    user-select: none;
    animation: shake 0.19s infinite;
    z-index: 200;
}
@keyframes shake {
    0% { transform: translate(0px, 0px);}
    15% { transform: translate(-2px, 4px);}
    30% { transform: translate(4px, -3px);}
    55% { transform: translate(-4px, 2px);}
    80% { transform: translate(2px, 1px);}
    100% { transform: translate(0px, 0px);}
}
.big-black {
    color: #101010;
    font-family: 'Ma Shan Zheng', 'ZCOOL KuaiLe', '微软雅黑', cursive, sans-serif;
    font-weight: 900;
    font-size: 3em;
    text-shadow: 0 0 30px #fff7, 0 0 9px #ff222288;
    z-index: 110;
    letter-spacing: 0.15em;
    writing-mode: vertical-rl;
    text-align: center;
    line-height: 1.2;
    margin: 0 auto;
    animation: verticalfade 1.2s;
    /* 加点病态扭曲感 */
    transform: rotate(-2deg) skewY(-4deg);
    filter: blur(0.2px) contrast(120%);
}

.bloodline {
    color: #ff2222;
    font-size: 2.3em;
    margin: 12px 0 12px 0;
    font-weight: bold;
    text-shadow: 0 0 22px #b60000, 0 0 3px #fff6;
    letter-spacing: 2px;
    animation: shake 1.5s infinite;
}

.bloody-splash {
    position: absolute;
    left: 0; top: 0; width: 100vw; height: 100vh; z-index: 102;
    pointer-events: none;
    background: transparent;
    animation: bloodsplash 1.2s linear;
}
@keyframes bloodsplash {
    0% { background: transparent;}
    50% { background: #b6000055;}
    90% { background: #ff222255;}
    100% { background: #b6000000;}
}
.crowd {
    color: #b60000;
    font-size: 3.3em;
    font-weight: 900;
    text-shadow: 0 0 16px #b60000, 0 0 4px #fff5;
    margin: 34px 0 12px 0;
    letter-spacing: 4px;
}
}
/* 让mask能切换红色背景 */
.mask-red {
    background: #ff2222 !important; /* 血红色 */
    transition: background 1.1s;
}
.music-btn {
    position: fixed;
    bottom: 28px;
    right: 22px;
    z-index: 199;
    background: #b60000;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 13px 26px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 2px 8px #0005;
    cursor: pointer;
    opacity: 0.87;
    transition: background 0.18s;
}
.music-btn.playing {
    background: #101010;
    color: #ff2222;
}