/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft Yahei", sans-serif;
}

/*  固定定位元素 (上下左右角)  */
/* 左上角LOGO/登录区 */
.login {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 78px;
    height: 75px;
    cursor: pointer;
}

.login img {
    width: 100%;
    height: 100%;
}

/* 右上角音量按钮区 */
.top {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.top img {
    width: 100%;
    height: 100%;
}

.Voting {
    position: fixed;
    top: 20px;
    right: 60px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.Voting img {
    width: 100%;
    height: 100%;
}

/* 底部右侧跳转按钮 */
.jump-to-result {
    position: fixed;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    bottom: 20px;
    padding: 8px;
    cursor: pointer;
    right: 20px;
    background-color: #409eff;
    color: #fff;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.jump-to-result img {
    width: 100%;
    height: 100%;
}

/*  页面主体基础样式  */
body {
    background-color: #fffbfb;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../img/ssdf5s6d5f6+s5d.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    padding: 20px;
    gap: 20px;
    overflow-x: hidden;
    width: 100vw;
}

/*  标题与辩题样式  */
/* 顶部主标题-第X届辩论赛 */
.page-main-title {
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    letter-spacing: 8px;
    background: -webkit-linear-gradient(left, #ff0000, #0000ff);
    background: linear-gradient(to right, #ff0000, #0000ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 届数数字样式 */
.period-num {
    color: #c0392b;
    font-weight: 900;
    margin: 0 4px;
}

/* 总辩题容器 */
.debate-topic {
    font-size: 1.8rem;
    color: #2c3e50;
    font-weight: 600;
    text-align: center;
    padding: 10px 30px;
    border-radius: 8px;
    max-width: 90%;
    word-wrap: break-word;
}

/* 辩题文字高亮 */
.debate-opinion {
    color: #c0392b;
    font-weight: 700;
    margin-left: 8px;
}

/*  正反方+VS 核心容器  */
.debate-timer-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 1100px;
    padding: 0 20px;
    flex-shrink: 0;
}

/*  正方/反方面板通用样式  */
.timer-panel {
    flex: 1;
    background: rgba(255, 255, 255, 0.85);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 260px;
    max-width: 360px;
    flex-shrink: 0;
}

/* 面板标题-正方/反方 */
.timer-panel h2 {
    text-align: center;
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 20px;
    border-bottom: 2px solid #c0392b;
    padding-bottom: 10px;
}

/* 面板内子项（观点/辩手名单）容器 */
.panel-item {
    margin-bottom: 20px;
}

.panel-item:last-child {
    margin-bottom: 0;
}

/* 子项标题-正方观点/辩手名单等 */
.panel-item h3 {
    font-size: 1.2rem;
    color: #34495e;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 4px solid #c0392b;
}

/* 观点展示框 */
.debater-opinion {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #222;
    padding: 8px 10px;
    border-radius: 4px;
    min-height: 60px;
    word-wrap: break-word;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*  辩手列表及项样式  */
/* 辩手列表容器 */
.debater-list {
    font-size: 1.1rem;
    color: #222;
    padding: 12px 20px;
    border-radius: 4px;
    min-height: 120px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    text-align: center;
}

/* 单个辩手项 */
.debater-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 辩手名字基础样式 */
.debater-name {
    font-weight: bold;
}

/* 正方名字-蓝色 */
.pro-name {
    color: #165DFF;
}

/* 反方名字-红色 */
.con-name {
    color: #F53F3F;
}

/*  VS特效样式 (基础+3D)  */
/* VS外层容器基础样式 */
.vs-box {
    font-size: 6rem;
    font-weight: 900;
    background: linear-gradient(90deg, #c0392b, #2980b9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow:
        0 1px 0 #d45a4f,
        0 2px 0 #c9483c,
        0 3px 0 #4a90c9,
        0 4px 0 #3a80b9,
        0 5px 0 #2a70a9,
        0 6px 1px rgba(0, 0, 0, .2),
        0 0 5px rgba(192, 57, 43, .2),
        0 1px 3px rgba(41, 128, 185, .3),
        0 3px 5px rgba(0, 0, 0, .25),
        0 5px 10px rgba(192, 57, 43, .2),
        0 10px 10px rgba(41, 128, 185, .2),
        0 20px 20px rgba(0, 0, 0, .15);
    padding: 0 15px;
    flex-shrink: 0;
}

/* 3D VS文字核心容器 */
.vs-3d-text {
    font-size: 180px;
    font-family: Consolas, "Microsoft Yahei", monospace;
    font-weight: 900;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: rotate3d(3, -2, 2, 20deg) translateZ(15px);
    transition: all 0.3s cubic-bezier(0.05, 1, 0.2, 1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* 3D-V字-红渐变 */
.v-text {
    background: linear-gradient(120deg, #ff2020 0%, #ff0000 30%, #e60000 60%, #d40000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(255, 80, 80, 0.6);
    text-stroke: 1.2px rgba(255, 80, 80, 0.6);
    text-shadow: 0 4px 0 #f61010, 0 8px 0 #770000, 2px 6px 3px rgba(0, 0, 0, 0.95), -1px -2px 4px rgba(255, 230, 230, 0.9), -4px -6px 8px rgba(255, 190, 190, 0.7), 0 0 12px rgba(255, 40, 40, 0.8), 0 0 25px rgba(255, 0, 0, 0.6), 0 0 40px rgba(220, 0, 0, 0.4), 0 0 60px rgba(180, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.05, 1, 0.2, 1);
    position: relative;
}

/* 3D-S字-蓝渐变 */
.s-text {
    background: linear-gradient(120deg, #b8f0ff 0%, #96e6ff 30%, #73d2ff 60%, #50c8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(120, 220, 255, 0.6);
    text-stroke: 1.2px rgba(120, 220, 255, 0.6);
    text-shadow: 0 4px 0 #66d3f2, 0 8px 0 #005577, 2px 6px 3px rgba(0, 0, 0, 0.95), -1px -2px 4px rgba(230, 245, 255, 0.9), -4px -6px 8px rgba(190, 230, 255, 0.7), 0 0 12px rgba(100, 220, 255, 0.8), 0 0 25px rgba(70, 200, 255, 0.6), 0 0 40px rgba(40, 180, 255, 0.4), 0 0 60px rgba(20, 160, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.05, 1, 0.2, 1);
    position: relative;
}

/* 成功提示弹窗核心样式 - 顶部中间显示，无遮罩层 */
#success {
    position: fixed;
    top: 20px;
    /* 距离顶部的距离，可自行调整 */
    left: 50%;
    transform: translateX(-50%);
    /* 水平居中 */
    z-index: 9999;
    display: none;
}

/* 失败提示弹窗核心样式 - 和成功提示保持完全一致 */
#fail {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: none;
}

/* 弹窗内容容器 - 通用样式（成功+失败） */
#success .successCenter,
#fail .failCenter {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    gap: 12px;
}

/* 成功图标样式 */
#successImg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    /* 防止图标被压缩 */
}

/* 失败图标样式 - 和成功图标保持一致 */
#failImg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}

/* 提示文字样式 - 通用样式（成功+失败） */
.successText,
.failText {
    font-size: 16px;
    color: #303133;
    font-family: "Microsoft YaHei", sans-serif;
}

/* 投票确认弹窗容器 */
#voteConfirmModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

/* 弹窗主体 */
.vote-modal-content {
    width: 360px;
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
}

/* 顶部装饰条 */
.vote-modal-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #409eff);
}

/* 弹窗标题 */
#confirmTitle {
    margin: 0 0 16px;
    font-size: 20px;
    color: #1f2937;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 弹窗内容 */
#confirmContent {
    margin: 0 0 32px;
    font-size: 16px;
    color: #4b5563;
    text-align: center;
    line-height: 1.6;
    padding: 0 16px;
}

/* 按钮容器 */
.vote-modal-btns {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

/* 取消按钮 */
#confirmCancelBtn {
    flex: 1;
    height: 48px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
    color: #374151;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    outline: none;
}

/* 确认按钮 */
#confirmOkBtn {
    flex: 1;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #007bff, #2563eb);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    outline: none;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);
}