/* ============ 大屏展示页样式(蓝色政务风) ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
    font-family: "Microsoft YaHei", "PingFang SC", "SimHei", sans-serif;
    background: #061633;
    color: #fff;
}

/* ---------- 背景层 ---------- */
.bg-layer {
    position: fixed; inset: 0; z-index: 0;
    background: radial-gradient(ellipse at 50% -20%, #1a4fa0 0%, #0b2b5e 45%, #061633 100%);
    background-size: cover; background-position: center;
}

/* ---------- 视图切换 ---------- */
.view { position: fixed; inset: 0; z-index: 1; display: none; }
.view.active { display: block; }

/* ============ 排名榜 ============ */
/* 顶部多留白,避免榜单遮挡背景图中的标题/副标题 */
.rank-view { padding: 30vh 5vw 0; }

/* 榜单: 低边界深蓝玻璃层压住背景高光,不切断主题画面的连续感 */
.rank-list {
    position: relative; height: 58vh;
    isolation: isolate;
}
.rank-list::before {
    content: "";
    position: absolute;
    top: -2.2vh; right: -2vw; bottom: -.2vh;
    left: calc(7.2vh + 1.2vw);
    z-index: -1; pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(4, 24, 62, .34) 0%,
        rgba(6, 36, 84, .23) 70%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(ellipse at center, #000 72%, rgba(0, 0, 0, .78) 86%, transparent 100%);
    mask-image: radial-gradient(ellipse at center, #000 72%, rgba(0, 0, 0, .78) 86%, transparent 100%);
    -webkit-backdrop-filter: blur(14px) saturate(118%);
    backdrop-filter: blur(14px) saturate(118%);
    filter: blur(3px);
}
.rank-row {
    position: absolute; left: 0; right: 0;
    display: flex; align-items: center; gap: 1.2vw;
    transition: top 1s cubic-bezier(.22, .82, .28, 1);
    will-change: top;
}
/* 名次上升:上滑时短暂高亮,突出「追上来」 */
.rank-row.rank-rise {
    animation: rankRiseFlash 1.05s ease;
}
@keyframes rankRiseFlash {
    0% {
        filter: brightness(1);
        transform: scale(1);
    }
    25% {
        filter: brightness(1.28) drop-shadow(0 0 1.4vh rgba(255, 220, 120, .75));
        transform: scale(1.03);
    }
    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}
/* 固定宽度槽位:奖牌与序号水平居中对齐,选手名称左缘齐平 */
.rank-badge-slot {
    width: 7.2vh; height: 7.2vh; flex: none;
    display: flex; align-items: center; justify-content: center;
}
/* 4名及以后序号圆圈缩小;数字字体贴近奖牌粗体无衬线风格 */
.rank-badge {
    width: 4.4vh; height: 4.4vh; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: "Arial", "Microsoft YaHei", sans-serif;
    font-size: 2.35vh; font-weight: 900; font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    background: linear-gradient(145deg, rgba(82, 137, 205, .46), rgba(7, 35, 80, .58));
    border: 1px solid rgba(184, 220, 255, .34);
    color: #ffffff;
    text-shadow: none;
    box-shadow:
        inset 0 1px 0 rgba(236, 248, 255, .24),
        inset 0 -1px 0 rgba(2, 18, 48, .26),
        0 5px 14px rgba(0, 12, 40, .26);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
    backdrop-filter: blur(10px) saturate(135%);
    overflow: hidden;
}
.rank-row.top1 .rank-badge { background: linear-gradient(160deg, #ffd873, #e09310); border-color: #ffe9ad; color: #5c3b00; text-shadow: none; }
.rank-row.top2 .rank-badge { background: linear-gradient(160deg, #e8eef8, #97a7bf); border-color: #f4f8ff; color: #33404f; text-shadow: none; }
.rank-row.top3 .rank-badge { background: linear-gradient(160deg, #f0b384, #b35f1d); border-color: #ffd7b3; color: #4d2600; text-shadow: none; }
.rank-badge.has-medal {
    width: 7.2vh; height: 7.2vh;
    background: transparent !important;
    border: none !important;
    box-shadow: none;
    border-radius: 0;
    text-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.rank-badge.has-medal img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}

.rank-name {
    width: 24vw; flex: none; font-size: 3.1vh; font-weight: 700; letter-spacing: .3vh;
    color: #fbfdff; text-shadow: 0 2px 10px rgba(0, 9, 36, .9);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
.rank-track {
    flex: 1; height: 3.6vh; border-radius: 3vh; position: relative;
    background: linear-gradient(180deg, rgba(84, 159, 222, .34), rgba(38, 112, 184, .26));
    border: 1px solid rgba(190, 225, 255, .32);
    box-shadow:
        inset 0 1px 0 rgba(238, 248, 255, .22),
        inset 0 -1px 0 rgba(74, 152, 220, .16),
        0 5px 16px rgba(0, 24, 70, .10);
    -webkit-backdrop-filter: blur(9px) saturate(120%);
    backdrop-filter: blur(9px) saturate(120%);
    overflow: hidden;
}
/* 前进发光时允许光晕溢出一点,更明显 */
.rank-track:has(.bar-grow) {
    overflow: visible;
}
.rank-bar {
    position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3vh;
    background: linear-gradient(90deg, #1e6fd8, #35a2ff 60%, #7cd0ff);
    box-shadow: 0 0 14px rgba(70, 160, 255, .75);
    transition: width 1s cubic-bezier(.6, .05, .27, 1), box-shadow 1s ease;
    min-width: 0;
    overflow: hidden;
}
.rank-row.top1 .rank-bar { background: linear-gradient(90deg, #d89a12, #ffc93c 60%, #ffe9a3); box-shadow: 0 0 16px rgba(255, 200, 60, .7); }
.rank-bar::after {
    content: ""; position: absolute; inset: 0; border-radius: 3vh;
    background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 55%);
}
/* 进度前进:条身加亮 + 高光前扫 + 前端光晕 */
.rank-bar.bar-grow {
    animation: barGrowGlow 1s ease;
}
.rank-bar.bar-grow::before {
    content: "";
    position: absolute; top: -20%; bottom: -20%;
    width: 36%;
    left: -20%;
    border-radius: 3vh;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, .15) 35%,
        rgba(220, 245, 255, .85) 50%,
        rgba(255, 255, 255, .15) 65%,
        transparent 100%);
    filter: blur(.2vh);
    animation: barShineSweep 1s cubic-bezier(.22, .82, .28, 1) forwards;
    pointer-events: none;
    z-index: 2;
}
.rank-row.top1 .rank-bar.bar-grow { animation-name: barGrowGlowGold; }
.rank-row.top1 .rank-bar.bar-grow::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 240, 180, .2) 35%,
        rgba(255, 255, 230, .95) 50%,
        rgba(255, 240, 180, .2) 65%,
        transparent 100%);
}
@keyframes barGrowGlow {
    0%   { box-shadow: 0 0 14px rgba(70, 160, 255, .75); filter: brightness(1); }
    35%  { box-shadow: 0 0 22px rgba(120, 210, 255, 1), 0 0 36px rgba(70, 180, 255, .65); filter: brightness(1.22); }
    100% { box-shadow: 0 0 14px rgba(70, 160, 255, .75); filter: brightness(1); }
}
@keyframes barGrowGlowGold {
    0%   { box-shadow: 0 0 16px rgba(255, 200, 60, .7); filter: brightness(1); }
    35%  { box-shadow: 0 0 24px rgba(255, 230, 120, 1), 0 0 40px rgba(255, 190, 40, .7); filter: brightness(1.25); }
    100% { box-shadow: 0 0 16px rgba(255, 200, 60, .7); filter: brightness(1); }
}
@keyframes barShineSweep {
    0%   { left: -30%; opacity: 0; }
    15%  { opacity: 1; }
    100% { left: 78%; opacity: 0; }
}
.rank-score {
    width: 9vw; flex: none; text-align: right;
    font-size: 3.4vh; font-weight: 800; font-family: "Arial", "Microsoft YaHei", sans-serif;
    color: #ffe9a3; text-shadow: 0 2px 10px rgba(0, 10, 40, .8);
}
.rank-score small { font-size: 1.9vh; font-weight: 400; color: #a8c6f0; margin-left: .3vw; }

/* 答题进度角标 */
.progress-corner {
    position: fixed; right: 2.4vw; bottom: 3vh; z-index: 3;
    display: flex; align-items: baseline; gap: .6vw;
    padding: 1.2vh 1.6vw;
    background: linear-gradient(145deg, rgba(10, 37, 82, .62), rgba(4, 21, 54, .72));
    border: 1px solid rgba(176, 215, 255, .28);
    border-radius: 1.4vh;
    box-shadow:
        inset 0 1px 0 rgba(235, 247, 255, .16),
        0 10px 28px rgba(0, 12, 38, .24);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
}
.pc-label { font-size: 1.9vh; color: #a8c6f0; letter-spacing: .3vh; }
.pc-num { font-size: 3.6vh; font-weight: 800; color: #ffd97a; font-family: Arial, sans-serif; }
.pc-total { font-size: 2vh; color: #cfe2ff; }
.progress-corner.finished .pc-label { color: #7ce8a8; }

/* ============ 抢答成功 ============ */
/* 提示/成功文案已做到背景图中,页面只渲染抢答单位名称 */
/* 单位名上移,落在背景「抢答提示」与「抢答成功」之间的垂直中部 */
.buzz-view { display: none; }
.buzz-view.active { display: block; }
.buzz-inner {
    position: absolute; left: 0; right: 0; top: 30vh;
    text-align: center;
    animation: buzzIn .55s cubic-bezier(.2, 1.4, .4, 1) both;
}

@keyframes buzzIn {
    0% { transform: scale(.55); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.buzz-rings { position: absolute; left: 50%; top: 50%; z-index: -1; }
.buzz-rings i {
    position: absolute; left: 0; top: 0; width: 40vh; height: 40vh;
    margin: -20vh 0 0 -20vh; border-radius: 50%;
    border: 2px solid rgba(255, 217, 122, .55);
    animation: ringPulse 2.6s ease-out infinite;
}
.buzz-rings i:nth-child(2) { animation-delay: .85s; }
.buzz-rings i:nth-child(3) { animation-delay: 1.7s; }
@keyframes ringPulse {
    0% { transform: scale(.5); opacity: .9; }
    100% { transform: scale(2.4); opacity: 0; }
}

.buzz-unit {
    font-size: 11vh; font-weight: 800; letter-spacing: 1vh; line-height: 1.25;
    padding: 0 4vw;
    background: linear-gradient(180deg, #ffffff 25%, #cfe4ff 70%, #8fbdf5 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 6px 24px rgba(20, 80, 200, .55));
}