/* --- 字体引入 --- */
@import url('https://cdn.jsdelivr.net/gh/HarmonyOS/HarmonyOS-Sans/HarmonyOS_Sans_SC/webfont.css');
@import url('https://gw.alicdn.com/comic/fonts/1.0.0/DingTalk-JinBuTi/font.css');

/* --- 1. 变量定义 --- */
:root {
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* --- 2. 全局样式 --- */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'DingTalk JinBuTi', sans-serif;
    color: white;
    overflow: hidden;
    user-select: none; /* 防止误选文字 */
}

/* 图片背景 */
.image-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    transition: background-image 0.6s var(--ease-smooth);
    /* 稍微暗化背景，突出前景 */
    filter: brightness(0.85); 
}

/* --- 3. 页面容器与切换 --- */
.container {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
}

.page {
    /* 默认隐藏状态 */
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1); /* 放大淡出 */
    filter: blur(10px);
    transition: 
        opacity 0.4s var(--ease-smooth),
        transform 0.4s var(--ease-smooth),
        filter 0.4s var(--ease-smooth),
        visibility 0.4s;
    
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.page.active {
    /* 激活状态 */
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    filter: blur(0);
    z-index: 1;
}

/* --- 4. 组件：按钮 --- */
.menu-btn, .back-btn, .control-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 12px 24px;
    font-size: 1.1rem;
    color: white;
    cursor: pointer;
    margin: 8px;
    transition: all 0.4s var(--ease-elastic);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-family: inherit;
}

.menu-btn:hover, .control-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.menu-btn:active, .control-btn:active {
    transform: translateY(-1px) scale(0.98);
}

.danger-tone { border-color: rgba(255, 100, 100, 0.4); }
.control-btn.danger { background: rgba(255, 50, 50, 0.25); }
.control-btn.danger:hover { background: rgba(255, 50, 50, 0.5); }
.control-btn.warning { background: rgba(255, 165, 0, 0.25); }
.control-btn.warning:hover { background: rgba(255, 165, 0, 0.5); }

.back-btn {
    position: fixed; bottom: 30px; left: 30px; z-index: 10;
}

.control-btn.small {
    padding: 8px 16px; font-size: 0.9rem;
}
/* --- 倒计时页面 (补回) --- */
.countdown-time {
    font-size: 12rem; /* 加大！从10rem加到12rem */
    font-weight: 700;
    letter-spacing: -6px;
    line-height: 1;
    margin-bottom: 10px;
    /* 加一点高级的文字投影 */
    text-shadow: 0 10px 40px rgba(0,0,0,0.3);
    /* 稍微带一点弹性入场动画 */
    animation: elastic-pop 0.8s var(--ease-elastic) backwards;
}

.countdown-date {
    font-size: 3rem;
    opacity: 0.8;
    margin-bottom: 30px;
    font-weight: 300;
    letter-spacing: 2px;
    animation: slideIn 0.8s var(--ease-elastic) 0.1s backwards;
}

.countdown-days {
    font-size: 2.5rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 15px 30px;
    border-radius: 50px; /* 胶囊形状 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    animation: slideIn 0.8s var(--ease-elastic) 0.2s backwards;
}

#days-left {
    font-weight: 800;
    margin: 0 10px;
    font-size: 3rem; /* 数字特大 */
    text-shadow: 0 0 15px rgba(255,255,255,0.6);
}
/* --- 5. 页面：抽人 --- */
.picker-result {
    font-size: 6rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.2);
    /* 动画在JS中控制 */
}

@keyframes elastic-pop {
    0% { opacity: 0; transform: scale(0.5); }
    60% { opacity: 1; transform: scale(1.1); }
    100% { transform: scale(1); }
}

.ten-pull-container {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 900px;
}

.ten-pull-item {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 1.2rem;
    animation: elastic-pop 0.6s var(--ease-elastic) backwards;
}

/* --- 6. 页面：管理员/设置 --- */
.setting-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.theme-section {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    margin: 10px;
    width: 85%;
    max-width: 500px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}
.theme-section.wide { max-width: 700px; }

.theme-label {
    font-size: 1.1rem; opacity: 0.8; margin-bottom: 12px; text-align: left;
}

/* 列表头部 */
.list-header {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    margin-bottom: 5px;
    font-size: 0.9rem;
    opacity: 0.6;
}

/* 列表容器 */
.list-container {
    max-height: 40vh;
    overflow-y: auto;
    padding: 5px;
    display: flex;
    flex-direction: column; /* 改为垂直列表以便管理权重 */
    gap: 8px;
}

.list-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    animation: slideIn 0.4s var(--ease-elastic) backwards;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.list-item:hover { background: rgba(255, 255, 255, 0.2); }

/* 权重输入框 */
.weight-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 6px;
    width: 60px;
    padding: 4px;
    text-align: center;
    font-family: inherit;
}
.weight-input:focus {
    outline: none; border-color: rgba(255, 255, 255, 0.6); background: rgba(0, 0, 0, 0.4);
}

/* 输入框通用 */
.name-input, .lock-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 10px;
    color: white;
    font-family: inherit;
    margin-right: 10px;
    text-align: center;
}

/* 字体类 */
.font-harmonyos { font-family: 'HarmonyOS Sans SC', sans-serif; }
.font-dingtalk { font-family: 'DingTalk JinBuTi', sans-serif; }

/* 抖动动画 */
.shake { animation: shake 0.5s ease-in-out; }
@keyframes shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}