@font-face {
    font-family: 'DingTalk JinBuTi';
    src: url('fonts/DingTalk-JinBuTi.woff2') format('woff2'),
         url('fonts/DingTalk-JinBuTi.woff') format('woff'),
         url('fonts/DingTalk-JinBuTi.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'DingTalk JinBuTi', 'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', 'Arial', sans-serif;
}

body {
    transform: rotate(180deg);
    font-family: 'DingTalk JinBuTi', 'Microsoft YaHei', 'Arial', sans-serif;
    min-height: 100vh;
    color: #f8f4e6;
    position: relative;
    overflow-x: hidden;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px 20px;padding-right: 0;
}

header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.title {
    font-size: 6em;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

.title-char {
    display: inline-block;
    color: #ff9500;
    animation: titleColor 2s linear infinite;
    text-shadow: 0 0 20px rgba(255, 149, 0, 0.8), 0 0 40px rgba(255, 149, 0, 0.4);
}

@keyframes titleColor {
    0% {
        color: #ff9500;
        text-shadow: 0 0 20px rgba(255, 149, 0, 0.8), 0 0 40px rgba(255, 149, 0, 0.4);
    }
    20% {
        color: #ff7800;
        text-shadow: 0 0 25px rgba(255, 120, 0, 0.9), 0 0 45px rgba(255, 120, 0, 0.5);
    }
    40% {
        color: #ff5a00;
        text-shadow: 0 0 30px rgba(255, 90, 0, 1), 0 0 50px rgba(255, 90, 0, 0.6);
    }
    60% {
        color: #ff3d00;
        text-shadow: 0 0 25px rgba(255, 61, 0, 0.9), 0 0 45px rgba(255, 61, 0, 0.5);
    }
    80% {
        color: #ff2000;
        text-shadow: 0 0 20px rgba(255, 32, 0, 0.8), 0 0 40px rgba(255, 32, 0, 0.4);
    }
    100% {
        color: #ff9500;
        text-shadow: 0 0 20px rgba(255, 149, 0, 0.8), 0 0 40px rgba(255, 149, 0, 0.4);
    }
}

.subtitle {
    font-size: 2.2em;
    color: #ff9500;
    letter-spacing: 8px;
    font-weight: 300;
    text-transform: uppercase;
    opacity: 1;
    margin-top: 10px;
    animation: subtitleColor 2.5s linear infinite;
    text-shadow: 0 0 20px rgba(255, 222, 175, 0.989), 0 0 40px rgba(255, 237, 212, 0.699);

}

@keyframes subtitleColor {
    0% {
        color: #ff9500;
        opacity: 0.9;
        text-shadow: 0 0 10px rgba(255, 230, 194, 0.8);
    }
    25% {
        color: #ff7800;
        opacity: 1;
        text-shadow: 0 0 15px rgba(255, 120, 0, 0.8);
    }
    50% {
        color: #ff5a00;
        opacity: 1;
        text-shadow: 0 0 20px rgba(255, 90, 0, 0.8);
    }
    75% {
        color: #ff3d00;
        opacity: 1;
        text-shadow: 0 0 15px rgba(255, 61, 0, 0.8);
    }
    100% {
        color: #ff9500;
        opacity: 0.9;
        text-shadow: 0 0 10px rgba(255, 230, 194, 0.8);
    }
}

.title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -100px;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 149, 0, 0.8));
    animation: leftLineColor 0.6s ease-in-out infinite;
}

.title::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -100px;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 149, 0, 0.8), transparent);
    animation: rightLineColor 0.6s ease-in-out infinite;
}

@keyframes leftLineColor {
    0%, 100% {
        opacity: 0.5;
        background: linear-gradient(90deg, transparent, rgba(255, 149, 0, 0.6));
    }
    50% {
        opacity: 0.8;
        background: linear-gradient(90deg, transparent, rgba(255, 149, 0, 0.8));
    }
}

@keyframes rightLineColor {
    0%, 100% {
        opacity: 0.5;
        background: linear-gradient(90deg, rgba(255, 149, 0, 0.6), transparent);
    }
    50% {
        opacity: 0.8;
        background: linear-gradient(90deg, rgba(255, 149, 0, 0.8), transparent);
    }
}

.two-columns {
    width: 100%;
    overflow: hidden;
}

.column {
    float: left;
    width: calc(50% - 15px);
    margin-right: 30px;
}

.column:last-child {
    margin-right: 0;
}

.person-card {
    background: linear-gradient(135deg, rgba(20, 30, 50, 0.85), rgba(25, 35, 60, 0.8));
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    width:calc(50% - 20px);
    margin-bottom: 20px;
    float: left;
    margin-right: 20px;
    align-items: center;
    gap: 25px;
    border: 2px solid rgba(74, 158, 255, 0.6);
    box-shadow: 0 8px 32px rgba(74, 158, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    animation: cardBorderColor 0.5s ease-in-out infinite;
}

.person-card:nth-child(1) .avatar { animation-delay: 0s; }
.person-card:nth-child(1) .avatar-section h3 { animation-delay: 0.3s; }
.person-card:nth-child(1) .drink-progress { animation-delay: 0.6s; }
.person-card:nth-child(1) .drink-progress::before { animation-delay: 0.8s; }
.person-card:nth-child(1) .stat-value { animation-delay: 1s; }

.person-card:nth-child(2) .avatar { animation-delay: 0.2s; }
.person-card:nth-child(2) .avatar-section h3 { animation-delay: 0.5s; }
.person-card:nth-child(2) .drink-progress { animation-delay: 0.8s; }
.person-card:nth-child(2) .drink-progress::before { animation-delay: 1s; }
.person-card:nth-child(2) .stat-value { animation-delay: 1.2s; }

.person-card:nth-child(3) .avatar { animation-delay: 0.4s; }
.person-card:nth-child(3) .avatar-section h3 { animation-delay: 0.7s; }
.person-card:nth-child(3) .drink-progress { animation-delay: 1s; }
.person-card:nth-child(3) .drink-progress::before { animation-delay: 1.2s; }
.person-card:nth-child(3) .stat-value { animation-delay: 1.4s; }

@keyframes cardBorderColor {
    0%, 100% {
        border-color: rgba(74, 158, 255, 0.6);
        box-shadow: 0 8px 32px rgba(74, 158, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        border-color: rgba(107, 179, 255, 0.7);
        box-shadow: 0 8px 32px rgba(107, 179, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
}

.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
}

.avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid rgba(255, 149, 0, 0.8);
    object-fit: cover;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
    animation: avatarBorderColor 1.5s linear infinite;
}

@keyframes avatarBorderColor {
    0% {
        border-color: rgba(255, 149, 0, 0.8);
        box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
    }
    20% {
        border-color: rgba(255, 120, 0, 0.85);
        box-shadow: 0 4px 12px rgba(255, 120, 0, 0.35);
    }
    40% {
        border-color: rgba(255, 90, 0, 0.9);
        box-shadow: 0 4px 12px rgba(255, 90, 0, 0.4);
    }
    60% {
        border-color: rgba(255, 61, 0, 0.85);
        box-shadow: 0 4px 12px rgba(255, 61, 0, 0.35);
    }
    80% {
        border-color: rgba(255, 32, 0, 0.8);
        box-shadow: 0 4px 12px rgba(255, 32, 0, 0.3);
    }
    100% {
        border-color: rgba(255, 149, 0, 0.8);
        box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
    }
}

.avatar-section h3 {
    font-size: 1.8em;
    color: #ff9500;
    font-weight: 700;
    margin: 0;
    animation: nameColor 1.8s linear infinite;
    text-shadow: 0 0 10px rgba(255, 149, 0, 0.5);
}

@keyframes nameColor {
    0% {
        color: #ff9500;
        text-shadow: 0 0 10px rgba(255, 149, 0, 0.5);
    }
    25% {
        color: #ff7800;
        text-shadow: 0 0 12px rgba(255, 120, 0, 0.6);
    }
    50% {
        color: #ff5a00;
        text-shadow: 0 0 15px rgba(255, 90, 0, 0.7);
    }
    75% {
        color: #ff3d00;
        text-shadow: 0 0 12px rgba(255, 61, 0, 0.6);
    }
    100% {
        color: #ff9500;
        text-shadow: 0 0 10px rgba(255, 149, 0, 0.5);
    }
}

.info {
    flex: 1;
    min-width: 0;
}

.stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.progress-section {
    flex: 1;
    display: flex;
}

.progress-bar {
    width: calc(100% - 80px);
    padding: 8px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.drink-progress {
    border: 2px solid transparent;
    background: rgba(50, 20, 10, 0.6);
    background-image: linear-gradient(rgba(50, 20, 10, 0.6), rgba(50, 20, 10, 0.6)), 
                      linear-gradient(45deg, 
                        rgba(255, 149, 0, 0.9) 0%, 
                        rgba(255, 120, 0, 0.8) 20%, 
                        rgba(255, 90, 0, 0.95) 40%, 
                        rgb(255, 200, 123) 60%, 
                        rgba(255, 149, 0, 0.9) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 400% 100%;
    background-position: 0% 0%, 0% 0%;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 15px rgba(255, 149, 0, 0.4);
    animation: drinkProgressBorderScroll 6s linear infinite;
}

.vomit-progress {


    border: 2px solid transparent;
    background: rgba(50, 20, 10, 0.6);
    background-image: linear-gradient(rgba(23, 0, 19, 0.6), rgba(27, 7, 0, 0.6)), 
                      linear-gradient(45deg, 
                      rgba(255, 105, 180, 0.8) 0%, 
                        rgba(160, 85, 122, 0.8) 20%, 
                        rgba(255, 103, 179, 0.95) 40%, 
                        rgb(155, 74, 115) 60%, 
                        rgba(255, 105, 180, 0.8) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 400% 100%;
    background-position: 0% 0%, 0% 0%;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1),  0 0 10px rgba(255, 105, 180, 0.3);
   
    animation: vomitProgressBorderScroll 6s ease-in-out infinite;

}

@keyframes drinkProgressBorderScroll {
    0% {
        background-position: 0% 0%, 400% 0%;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 15px rgba(255, 149, 0, 0.4);
    }
    100% {
        background-position: 0% 0%, 0% 0%;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 25px rgba(255, 255, 255, 0.6);
    }
}

@keyframes vomitProgressBorder {
    0%, 100% {
        border-color: rgba(255, 105, 180, 0.8);
    }
    50% {
        border-color: rgba(255, 182, 193, 0.9);
    }
}
@keyframes vomitProgressBorderScroll {
    0% {
        background-position: 0% 0%, 400% 0%;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 15px rgba(255, 149, 0, 0.4);
    }
    100% {
        background-position: 0% 0%, 0% 0%;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 25px rgba(255, 255, 255, 0.6);
    }
}

/* 进度条背景效果 */
.drink-progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    height: 100%;
    background: linear-gradient(45deg, 
        rgba(255, 149, 0, 0.9) 0%, 
        rgba(255, 120, 0, 0.85) 15%, 
        rgba(255, 90, 0, 0.95) 35%, 
        rgb(255, 216, 117) 50%, 
        rgba(255, 90, 0, 0.95) 65%, 
        rgba(255, 120, 0, 0.85) 85%, 
        rgba(255, 149, 0, 0.9) 100%);
    transition: width 0.8s ease;
    box-shadow: 0 0 15px rgba(255, 149, 0, 0.6);
    animation: drinkProgressScroll 3s linear infinite;
    background-size: 300% 100%;
    transform: skewX(15deg);
}

.vomit-progress::before {
  
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    height: 100%;
    background: linear-gradient(45deg, 
        rgba(255, 105, 180, 0.9) 0%, 
        rgba(255, 120, 180, 0.85) 15%, 
        rgba(255, 90, 180, 0.95) 35%, 
        rgb(255, 216, 217) 50%, 
        rgba(255, 90, 180, 0.95) 65%, 
        rgba(255, 120, 180, 0.85) 85%, 
        rgba(255, 105, 180, 0.9) 100%);
    transition: width 0.8s ease;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.6);
    animation: vomitProgressScroll 3s linear infinite;
    background-size: 300% 100%;
    transform: skewX(15deg);
}

@keyframes drinkProgressScroll {
    0% {
        background-position: 300% 0%;
        box-shadow: 0 0 15px rgba(255, 149, 0, 0.6);
    }
    100% {
        background-position: 0% 0%;
        box-shadow: 0 0 20px rgba(255, 181, 79, 0.6);
    }
}

@keyframes vomitProgressScroll {
    0% {
        background-position: 300% 0%;
        box-shadow: 0 0 15px rgba(255, 105, 180, 0.6);
    }
    100% {
        background-position: 0% 0%;
        box-shadow: 0 0 20px rgba(255, 181, 217, 0.6);
    }
}

@keyframes vomitProgressColor {
    0%, 100% {
        background: linear-gradient(90deg, rgba(255, 105, 180, 0.8), rgba(255, 182, 193, 0.85));
        box-shadow: 0 0 8px rgba(255, 105, 180, 0.3);
    }
    50% {
        background: linear-gradient(90deg, rgba(255, 120, 180, 0.81), rgba(255, 172, 193, 0.86));
        box-shadow: 0 0 8px rgba(255, 120, 180, 0.32);
    }
}

/* 使用 data-progress 属性设置宽度 - 包含0-100的每个整数 */
/* 喝进度条 */
.drink-progress[data-progress="0"]::before { width: 0%; }
.drink-progress[data-progress="1"]::before { width: 1%; }
.drink-progress[data-progress="2"]::before { width: 2%; }
.drink-progress[data-progress="3"]::before { width: 3%; }
.drink-progress[data-progress="4"]::before { width: 4%; }
.drink-progress[data-progress="5"]::before { width: 5%; }
.drink-progress[data-progress="6"]::before { width: 6%; }
.drink-progress[data-progress="7"]::before { width: 7%; }
.drink-progress[data-progress="8"]::before { width: 8%; }
.drink-progress[data-progress="9"]::before { width: 9%; }
.drink-progress[data-progress="10"]::before { width: 10%; }
.drink-progress[data-progress="11"]::before { width: 11%; }
.drink-progress[data-progress="12"]::before { width: 12%; }
.drink-progress[data-progress="13"]::before { width: 13%; }
.drink-progress[data-progress="14"]::before { width: 14%; }
.drink-progress[data-progress="15"]::before { width: 15%; }
.drink-progress[data-progress="16"]::before { width: 16%; }
.drink-progress[data-progress="17"]::before { width: 17%; }
.drink-progress[data-progress="18"]::before { width: 18%; }
.drink-progress[data-progress="19"]::before { width: 19%; }
.drink-progress[data-progress="20"]::before { width: 20%; }
.drink-progress[data-progress="21"]::before { width: 21%; }
.drink-progress[data-progress="22"]::before { width: 22%; }
.drink-progress[data-progress="23"]::before { width: 23%; }
.drink-progress[data-progress="24"]::before { width: 24%; }
.drink-progress[data-progress="25"]::before { width: 25%; }
.drink-progress[data-progress="26"]::before { width: 26%; }
.drink-progress[data-progress="27"]::before { width: 27%; }
.drink-progress[data-progress="28"]::before { width: 28%; }
.drink-progress[data-progress="29"]::before { width: 29%; }
.drink-progress[data-progress="30"]::before { width: 30%; }
.drink-progress[data-progress="31"]::before { width: 31%; }
.drink-progress[data-progress="32"]::before { width: 32%; }
.drink-progress[data-progress="33"]::before { width: 33%; }
.drink-progress[data-progress="34"]::before { width: 34%; }
.drink-progress[data-progress="35"]::before { width: 35%; }
.drink-progress[data-progress="36"]::before { width: 36%; }
.drink-progress[data-progress="37"]::before { width: 37%; }
.drink-progress[data-progress="38"]::before { width: 38%; }
.drink-progress[data-progress="39"]::before { width: 39%; }
.drink-progress[data-progress="40"]::before { width: 40%; }
.drink-progress[data-progress="41"]::before { width: 41%; }
.drink-progress[data-progress="42"]::before { width: 42%; }
.drink-progress[data-progress="43"]::before { width: 43%; }
.drink-progress[data-progress="44"]::before { width: 44%; }
.drink-progress[data-progress="45"]::before { width: 45%; }
.drink-progress[data-progress="46"]::before { width: 46%; }
.drink-progress[data-progress="47"]::before { width: 47%; }
.drink-progress[data-progress="48"]::before { width: 48%; }
.drink-progress[data-progress="49"]::before { width: 49%; }
.drink-progress[data-progress="50"]::before { width: 50%; }
.drink-progress[data-progress="51"]::before { width: 51%; }
.drink-progress[data-progress="52"]::before { width: 52%; }
.drink-progress[data-progress="53"]::before { width: 53%; }
.drink-progress[data-progress="54"]::before { width: 54%; }
.drink-progress[data-progress="55"]::before { width: 55%; }
.drink-progress[data-progress="56"]::before { width: 56%; }
.drink-progress[data-progress="57"]::before { width: 57%; }
.drink-progress[data-progress="58"]::before { width: 58%; }
.drink-progress[data-progress="59"]::before { width: 59%; }
.drink-progress[data-progress="60"]::before { width: 60%; }
.drink-progress[data-progress="61"]::before { width: 61%; }
.drink-progress[data-progress="62"]::before { width: 62%; }
.drink-progress[data-progress="63"]::before { width: 63%; }
.drink-progress[data-progress="64"]::before { width: 64%; }
.drink-progress[data-progress="65"]::before { width: 65%; }
.drink-progress[data-progress="66"]::before { width: 66%; }
.drink-progress[data-progress="67"]::before { width: 67%; }
.drink-progress[data-progress="68"]::before { width: 68%; }
.drink-progress[data-progress="69"]::before { width: 69%; }
.drink-progress[data-progress="70"]::before { width: 70%; }
.drink-progress[data-progress="71"]::before { width: 71%; }
.drink-progress[data-progress="72"]::before { width: 72%; }
.drink-progress[data-progress="73"]::before { width: 73%; }
.drink-progress[data-progress="74"]::before { width: 74%; }
.drink-progress[data-progress="75"]::before { width: 75%; }
.drink-progress[data-progress="76"]::before { width: 76%; }
.drink-progress[data-progress="77"]::before { width: 77%; }
.drink-progress[data-progress="78"]::before { width: 78%; }
.drink-progress[data-progress="79"]::before { width: 79%; }
.drink-progress[data-progress="80"]::before { width: 80%; }
.drink-progress[data-progress="81"]::before { width: 81%; }
.drink-progress[data-progress="82"]::before { width: 82%; }
.drink-progress[data-progress="83"]::before { width: 83%; }
.drink-progress[data-progress="84"]::before { width: 84%; }
.drink-progress[data-progress="85"]::before { width: 85%; }
.drink-progress[data-progress="86"]::before { width: 86%; }
.drink-progress[data-progress="87"]::before { width: 87%; }
.drink-progress[data-progress="88"]::before { width: 88%; }
.drink-progress[data-progress="89"]::before { width: 89%; }
.drink-progress[data-progress="90"]::before { width: 90%; }
.drink-progress[data-progress="91"]::before { width: 91%; }
.drink-progress[data-progress="92"]::before { width: 92%; }
.drink-progress[data-progress="93"]::before { width: 93%; }
.drink-progress[data-progress="94"]::before { width: 94%; }
.drink-progress[data-progress="95"]::before { width: 95%; }
.drink-progress[data-progress="96"]::before { width: 96%; }
.drink-progress[data-progress="97"]::before { width: 97%; }
.drink-progress[data-progress="98"]::before { width: 98%; }
.drink-progress[data-progress="99"]::before { width: 99%; }
.drink-progress[data-progress="100"]::before { width: 100%; }

/* 吐进度条 */
.vomit-progress[data-progress="0"]::before { width: 0%; }
.vomit-progress[data-progress="1"]::before { width: 1%; }
.vomit-progress[data-progress="2"]::before { width: 2%; }
.vomit-progress[data-progress="3"]::before { width: 3%; }
.vomit-progress[data-progress="4"]::before { width: 4%; }
.vomit-progress[data-progress="5"]::before { width: 5%; }
.vomit-progress[data-progress="6"]::before { width: 6%; }
.vomit-progress[data-progress="7"]::before { width: 7%; }
.vomit-progress[data-progress="8"]::before { width: 8%; }
.vomit-progress[data-progress="9"]::before { width: 9%; }
.vomit-progress[data-progress="10"]::before { width: 10%; }
.vomit-progress[data-progress="11"]::before { width: 11%; }
.vomit-progress[data-progress="12"]::before { width: 12%; }
.vomit-progress[data-progress="13"]::before { width: 13%; }
.vomit-progress[data-progress="14"]::before { width: 14%; }
.vomit-progress[data-progress="15"]::before { width: 15%; }
.vomit-progress[data-progress="16"]::before { width: 16%; }
.vomit-progress[data-progress="17"]::before { width: 17%; }
.vomit-progress[data-progress="18"]::before { width: 18%; }
.vomit-progress[data-progress="19"]::before { width: 19%; }
.vomit-progress[data-progress="20"]::before { width: 20%; }
.vomit-progress[data-progress="21"]::before { width: 21%; }
.vomit-progress[data-progress="22"]::before { width: 22%; }
.vomit-progress[data-progress="23"]::before { width: 23%; }
.vomit-progress[data-progress="24"]::before { width: 24%; }
.vomit-progress[data-progress="25"]::before { width: 25%; }
.vomit-progress[data-progress="26"]::before { width: 26%; }
.vomit-progress[data-progress="27"]::before { width: 27%; }
.vomit-progress[data-progress="28"]::before { width: 28%; }
.vomit-progress[data-progress="29"]::before { width: 29%; }
.vomit-progress[data-progress="30"]::before { width: 30%; }
.vomit-progress[data-progress="31"]::before { width: 31%; }
.vomit-progress[data-progress="32"]::before { width: 32%; }
.vomit-progress[data-progress="33"]::before { width: 33%; }
.vomit-progress[data-progress="34"]::before { width: 34%; }
.vomit-progress[data-progress="35"]::before { width: 35%; }
.vomit-progress[data-progress="36"]::before { width: 36%; }
.vomit-progress[data-progress="37"]::before { width: 37%; }
.vomit-progress[data-progress="38"]::before { width: 38%; }
.vomit-progress[data-progress="39"]::before { width: 39%; }
.vomit-progress[data-progress="40"]::before { width: 40%; }
.vomit-progress[data-progress="41"]::before { width: 41%; }
.vomit-progress[data-progress="42"]::before { width: 42%; }
.vomit-progress[data-progress="43"]::before { width: 43%; }
.vomit-progress[data-progress="44"]::before { width: 44%; }
.vomit-progress[data-progress="45"]::before { width: 45%; }
.vomit-progress[data-progress="46"]::before { width: 46%; }
.vomit-progress[data-progress="47"]::before { width: 47%; }
.vomit-progress[data-progress="48"]::before { width: 48%; }
.vomit-progress[data-progress="49"]::before { width: 49%; }
.vomit-progress[data-progress="50"]::before { width: 50%; }
.vomit-progress[data-progress="51"]::before { width: 51%; }
.vomit-progress[data-progress="52"]::before { width: 52%; }
.vomit-progress[data-progress="53"]::before { width: 53%; }
.vomit-progress[data-progress="54"]::before { width: 54%; }
.vomit-progress[data-progress="55"]::before { width: 55%; }
.vomit-progress[data-progress="56"]::before { width: 56%; }
.vomit-progress[data-progress="57"]::before { width: 57%; }
.vomit-progress[data-progress="58"]::before { width: 58%; }
.vomit-progress[data-progress="59"]::before { width: 59%; }
.vomit-progress[data-progress="60"]::before { width: 60%; }
.vomit-progress[data-progress="61"]::before { width: 61%; }
.vomit-progress[data-progress="62"]::before { width: 62%; }
.vomit-progress[data-progress="63"]::before { width: 63%; }
.vomit-progress[data-progress="64"]::before { width: 64%; }
.vomit-progress[data-progress="65"]::before { width: 65%; }
.vomit-progress[data-progress="66"]::before { width: 66%; }
.vomit-progress[data-progress="67"]::before { width: 67%; }
.vomit-progress[data-progress="68"]::before { width: 68%; }
.vomit-progress[data-progress="69"]::before { width: 69%; }
.vomit-progress[data-progress="70"]::before { width: 70%; }
.vomit-progress[data-progress="71"]::before { width: 71%; }
.vomit-progress[data-progress="72"]::before { width: 72%; }
.vomit-progress[data-progress="73"]::before { width: 73%; }
.vomit-progress[data-progress="74"]::before { width: 74%; }
.vomit-progress[data-progress="75"]::before { width: 75%; }
.vomit-progress[data-progress="76"]::before { width: 76%; }
.vomit-progress[data-progress="77"]::before { width: 77%; }
.vomit-progress[data-progress="78"]::before { width: 78%; }
.vomit-progress[data-progress="79"]::before { width: 79%; }
.vomit-progress[data-progress="80"]::before { width: 80%; }
.vomit-progress[data-progress="81"]::before { width: 81%; }
.vomit-progress[data-progress="82"]::before { width: 82%; }
.vomit-progress[data-progress="83"]::before { width: 83%; }
.vomit-progress[data-progress="84"]::before { width: 84%; }
.vomit-progress[data-progress="85"]::before { width: 85%; }
.vomit-progress[data-progress="86"]::before { width: 86%; }
.vomit-progress[data-progress="87"]::before { width: 87%; }
.vomit-progress[data-progress="88"]::before { width: 88%; }
.vomit-progress[data-progress="89"]::before { width: 89%; }
.vomit-progress[data-progress="90"]::before { width: 90%; }
.vomit-progress[data-progress="91"]::before { width: 91%; }
.vomit-progress[data-progress="92"]::before { width: 92%; }
.vomit-progress[data-progress="93"]::before { width: 93%; }
.vomit-progress[data-progress="94"]::before { width: 94%; }
.vomit-progress[data-progress="95"]::before { width: 95%; }
.vomit-progress[data-progress="96"]::before { width: 96%; }
.vomit-progress[data-progress="97"]::before { width: 97%; }
.vomit-progress[data-progress="98"]::before { width: 98%; }
.vomit-progress[data-progress="99"]::before { width: 99%; }
.vomit-progress[data-progress="100"]::before { width: 100%; }

.stat-label {
    font-size: 2em;
    color: #ffffff;
    font-weight: 600;
    z-index: 2;
    position: relative;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    animation: labelColor 0.6s ease-in-out infinite;
}

@keyframes labelColor {
    0%, 100% {
        color: #ffffff;
        opacity: 0.95;
    }
    50% {
        color: #fff8d3;
        opacity: 1;
    }
}

.stat-value {
    font-size: 3em;
    font-weight: 900;
    position: relative;
    min-width: fit-content;
    width:130px;
    text-align: right;    
    line-height: 62px;
    animation: valueColor 0.5s ease-in-out infinite;
}

@keyframes valueColor {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
}

.drink-progress .stat-label {
    color: #ffffff;
}

.drink-progress ~ .stat-value {
    color: #ff9500;
    text-shadow: 0 0 10px rgba(255, 149, 0, 0.6);
    font-weight: 900;
    animation: drinkValueColor 1.6s linear infinite;
}

.vomit-progress .stat-label {
    color: #ffffff;
}

.vomit-progress ~ .stat-value {
    color: #ff69b4;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.6);
    font-weight: 900;
    animation: vomitValueColor 0.4s ease-in-out infinite;
}

@keyframes drinkValueColor {
    0% {
        color: #ff9500;
        text-shadow: 0 0 6px rgba(255, 149, 0, 0.4);
    }
    25% {
        color: #ff7800;
        text-shadow: 0 0 7px rgba(255, 120, 0, 0.45);
    }
    50% {
        color: #ff5a00;
        text-shadow: 0 0 8px rgba(255, 90, 0, 0.5);
    }
    75% {
        color: #ff3d00;
        text-shadow: 0 0 7px rgba(255, 61, 0, 0.45);
    }
    100% {
        color: #ff9500;
        text-shadow: 0 0 6px rgba(255, 149, 0, 0.4);
    }
}

@keyframes vomitValueColor {
    0%, 100% {
        color: #ff69b4;
        text-shadow: 0 0 6px rgba(255, 105, 180, 0.4);
    }
    50% {
        color: #ff78b8;
        text-shadow: 0 0 6px rgba(255, 120, 184, 0.42);
    }
}

/* 视频背景样式 */
#backgroundVideo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.9) contrast(1.2) saturate(1.3);
}

/* 音频频谱样式 */
#spectrum {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
    border-top: 1px solid rgba(255, 149, 0, 0.3);
    box-shadow: 0 -10px 30px rgba(255, 149, 0, 0.2);
}

/* 频谱动画效果 */
@keyframes spectrumGlow {
    0%, 100% {
        box-shadow: 0 -10px 30px rgba(255, 149, 0, 0.2);
        border-color: rgba(255, 149, 0, 0.3);
    }
    50% {
        box-shadow: 0 -15px 40px rgba(255, 149, 0, 0.4);
        border-color: rgba(255, 200, 123, 0.5);
    }
}

#spectrum {
    animation: spectrumGlow 2s ease-in-out infinite;
}

/* 视频遮罩层 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(0, 0, 0, 0.2), 
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.15)
    );
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}



/* 添加额外的小酒馆氛围效果 */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(74, 158, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: overlay;
    animation: ambientColor 1.2s ease-in-out infinite;
}

@keyframes ambientColor {
    0%, 100% {
        background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(74, 158, 255, 0.05) 100%);
    }
    50% {
        background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(107, 179, 255, 0.1) 100%);
    }
}



/* 确保前景元素正确层级 */
.container {
    position: relative;
    z-index: 10;
}





/* 响应式设计 */
@media (max-width: 768px) {
    .two-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .container {
        padding: 20px 15px;
    }
    
    header {
        margin-bottom: 40px;
    }
    
    .title {
        font-size: 3em;
    }
    
    .title::before,
    .title::after {
        display: none;
    }
    
    .subtitle {
        font-size: 1em;
        letter-spacing: 4px;
    }
    
    .person-card {
        padding: 20px;
        gap: 20px;
    }
    
    .avatar {
        width: 70px;
        height: 70px;
    }
    
    .avatar-section h3 {
        font-size: 1.5em;
    }
    
    .progress-bar {
        padding: 10px;
    }
    
    .stat-label {
        font-size: 1em;
    }
    
    .stat-value {
        font-size: 1.3em;
    }
}

@media (max-width: 480px) {
    .column {
        gap: 15px;
    }
    
    .person-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 25px 20px;
        gap: 20px;
    }
    
    .avatar-section {
        width: 100%;
    }
    
    .info {
        width: 100%;
    }
    
    .stat-item {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}