/* ===== 执法视频纠错抢答赛 · 大屏样式（设计基准 1920×1080） ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#01101f}
body{font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body.nocursor{cursor:none}

#stage{
  position:absolute;left:50%;top:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px;
  transform-origin:center center;overflow:hidden;color:#eaf4ff;
  background-color:#03162c;
  background-image:radial-gradient(ellipse at 50% -20%,#12508f 0%,#0a3a70 25%,#062a52 48%,#03162c 76%,#010c18 100%);
}
/* 网格与光晕装饰 */
.bg-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(80,170,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(80,170,255,.055) 1px,transparent 1px);
  background-size:60px 60px}
.bg-glow{position:absolute;left:50%;top:-460px;width:1500px;height:900px;margin-left:-750px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(35,140,255,.32) 0%,rgba(35,140,255,0) 65%)}

/* ---------------- 顶部标题栏 ---------------- */
.s-head{position:relative;height:112px;display:flex;align-items:center;padding:0 34px;z-index:5;
  border-bottom:2px solid rgba(90,180,255,.22);
  background:linear-gradient(180deg,rgba(10,60,120,.55),rgba(10,60,120,0))}
.s-head .h-left,.s-head .h-right{width:340px;display:flex;flex-direction:column;gap:4px}
.s-head .h-right{align-items:flex-end}
.s-head .h-center{flex:1;text-align:center}
.s-head h1{font-size:56px;font-weight:bold;letter-spacing:10px;line-height:1.1;
  background:linear-gradient(180deg,#ffffff 30%,#8fd0ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 34px rgba(70,170,255,.55);filter:drop-shadow(0 4px 10px rgba(0,40,90,.6))}
.s-head .sub{margin-top:4px;font-size:19px;letter-spacing:6px;color:#8ec3f2}
.qno{display:inline-block;padding:9px 22px;font-size:26px;letter-spacing:3px;color:#ffe9a8;
  background:linear-gradient(90deg,rgba(255,180,40,.22),rgba(255,180,40,.04));border:1px solid rgba(255,193,60,.55);border-radius:8px}
.clock{font-size:32px;font-family:Consolas,"Courier New",monospace;color:#a9d8ff;letter-spacing:2px}
.evt{font-size:16px;color:#6f9dc9;letter-spacing:2px}

/* ---------------- 主体 ---------------- */
.s-body{position:relative;height:968px;display:flex;gap:22px;padding:22px 26px;z-index:4}

/* 视频区 */
.s-video{flex:1;min-width:0;display:flex;align-items:center;justify-content:center}
.v-frame{position:relative;width:100%;height:100%;border-radius:14px;overflow:hidden;background:#000;
  border:2px solid rgba(95,185,255,.4);box-shadow:0 0 0 1px rgba(0,0,0,.6) inset,0 14px 50px rgba(0,20,50,.65),0 0 60px rgba(30,120,220,.18)}
#vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.v-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(160deg,#062a52,#03182f);color:#7fb4e6}
.v-empty p{font-size:44px;letter-spacing:12px;color:#bcdcff}
.v-empty span{font-size:19px;letter-spacing:2px;color:#5f8cb8}
.ve-icon{width:120px;height:78px;border:4px solid rgba(120,190,255,.55);border-radius:12px;position:relative}
.ve-icon:after{content:'';position:absolute;left:48px;top:50%;margin-top:-19px;border-left:34px solid rgba(120,190,255,.75);
  border-top:19px solid transparent;border-bottom:19px solid transparent}
.v-empty.hide{display:none}

/* 视频角标倒计时 */
.v-timer{position:absolute;right:26px;top:26px;width:132px;height:132px;border-radius:50%;display:none;
  align-items:center;justify-content:center;background:rgba(3,25,50,.72);border:5px solid #3ea0ff;
  box-shadow:0 0 34px rgba(62,160,255,.7),0 0 0 10px rgba(3,25,50,.35)}
.v-timer.show{display:flex}
.v-timer span{font-size:66px;font-weight:bold;font-family:Consolas,"Arial Black",monospace;color:#eaf6ff;line-height:1}
.v-timer.urgent{border-color:#ff5a4d;box-shadow:0 0 40px rgba(255,90,77,.85),0 0 0 10px rgba(60,5,5,.35);animation:tpulse .6s infinite}
.v-timer.urgent span{color:#ffd9d5}
@keyframes tpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* 视频底部题名 */
.v-caption{position:absolute;left:0;right:0;bottom:0;padding:20px 30px;font-size:30px;letter-spacing:3px;color:#eaf4ff;
  background:linear-gradient(0deg,rgba(2,15,32,.9),rgba(2,15,32,0));display:none}
.v-caption.show{display:block}

/* ---------------- 侧边成绩榜 ---------------- */
.s-rank{width:404px;flex:0 0 404px;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(12,58,112,.72),rgba(6,30,60,.72));border:1px solid rgba(95,185,255,.35);
  box-shadow:0 10px 40px rgba(0,20,50,.5)}
.r-head{height:62px;flex:0 0 62px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;
  background:linear-gradient(90deg,rgba(30,120,220,.85),rgba(20,80,160,.45));border-bottom:1px solid rgba(120,200,255,.3)}
.r-head span{font-size:26px;letter-spacing:6px;font-weight:bold;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.r-head i{font-style:normal;font-size:14px;color:#bfe0ff;letter-spacing:1px}
.r-list{list-style:none;flex:1;display:flex;flex-direction:column;gap:5px;padding:9px}

.ritem{position:relative;flex:1;display:flex;align-items:center;gap:9px;padding:0 10px;border-radius:9px;min-height:0;
  background:linear-gradient(90deg,rgba(255,255,255,.075),rgba(255,255,255,.02));border:1px solid rgba(120,190,255,.16);
  transition:background .3s,box-shadow .3s,border-color .3s}
.ritem .rno{width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;border-radius:8px;
  font-size:19px;font-weight:bold;font-family:Consolas,monospace;background:rgba(120,180,255,.16);color:#cfe6ff}
.ritem.top1 .rno{background:linear-gradient(180deg,#ffd75e,#e8a300);color:#4a2f00;box-shadow:0 0 16px rgba(255,200,60,.6)}
.ritem.top2 .rno{background:linear-gradient(180deg,#e6edf5,#a8b8c8);color:#2b3743}
.ritem.top3 .rno{background:linear-gradient(180deg,#f0b283,#c07a44);color:#3d1f08}
.ritem .rseq{flex:0 0 46px;text-align:center;font-size:16px;font-family:Consolas,monospace;color:#86b8e8;
  border-right:1px solid rgba(120,190,255,.2);padding-right:6px}
.ritem .rseq:empty{display:none}
.ritem .ravatar{flex:0 0 46px;width:46px;height:46px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.1);
  border:2px solid rgba(140,205,255,.45);display:none}
.ritem .ravatar.show{display:block}
.ritem .ravatar img{width:100%;height:100%;object-fit:cover;display:block}
.ritem .rname{flex:1;min-width:0;font-size:27px;font-weight:bold;letter-spacing:1px;color:#f2f8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ritem .rname i{display:block;font-style:normal;font-size:13px;color:#84aed4;font-weight:normal;letter-spacing:0}
.ritem .rscore{flex:0 0 96px;text-align:right;font-size:34px;font-weight:bold;font-family:Consolas,"Arial Black",monospace;
  color:#ffd15c;text-shadow:0 0 18px rgba(255,200,80,.45);line-height:1}
.ritem.hl{background:linear-gradient(90deg,rgba(255,190,60,.34),rgba(255,190,60,.08));border-color:#ffc247;
  box-shadow:0 0 26px rgba(255,190,60,.5),inset 0 0 20px rgba(255,190,60,.14)}
.ritem.hl .rname{color:#fff8e2}
.ritem.bump{animation:bump .8s ease-out}
@keyframes bump{0%{background:rgba(90,255,170,.4)}100%{background:linear-gradient(90deg,rgba(255,255,255,.075),rgba(255,255,255,.02))}}

/* 分数浮动提示 */
.float-delta{position:absolute;right:112px;top:0;font-size:38px;font-weight:bold;font-family:Consolas,"Arial Black",monospace;
  pointer-events:none;animation:floatUp 1.4s ease-out forwards;z-index:30;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.rank-full .float-delta{right:176px;font-size:52px}
.float-delta.up{color:#5cffa8}
.float-delta.down{color:#ff7b6f}
@keyframes floatUp{0%{opacity:0;transform:translateY(6px) scale(.8)}20%{opacity:1;transform:translateY(-4px) scale(1.1)}100%{opacity:0;transform:translateY(-58px) scale(1)}}

/* ---------------- 模式：视频全屏 ---------------- */
#stage.mode-video .s-rank{display:none}
#stage.mode-video .s-body{padding:16px 20px}

/* ---------------- 模式：全屏成绩榜 ---------------- */
.rank-full{position:absolute;left:0;top:112px;width:1920px;height:968px;display:none;flex-direction:column;
  align-items:center;padding:26px 46px 40px;z-index:6}
#stage.mode-rank .rank-full{display:flex}
#stage.mode-rank .s-body{display:none}
.rank-full h2{font-size:44px;letter-spacing:14px;margin-bottom:20px;
  background:linear-gradient(180deg,#fff,#93d2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.rank-full ul{list-style:none;flex:1;width:100%;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px 30px}
.rank-full .ritem{padding:0 22px;gap:16px;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.09),rgba(255,255,255,.025))}
.rank-full .ritem .rno{width:54px;height:54px;flex:0 0 54px;font-size:28px;border-radius:10px}
.rank-full .ritem .rseq{flex:0 0 58px;font-size:22px}
.rank-full .ritem .ravatar{flex:0 0 66px;width:66px;height:66px}
.rank-full .ritem .rname{font-size:40px}
.rank-full .ritem .rname i{font-size:16px}
.rank-full .ritem .rscore{flex:0 0 150px;font-size:52px}

/* ---------------- 模式：封面 ---------------- */
.cover{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:7;
  background:radial-gradient(ellipse at 50% 30%,#0f4c9e 0%,#062247 55%,#02101f 100%)}
#stage.mode-idle .cover{display:flex}
.cover .c-inner{text-align:center}
.cover h1{font-size:96px;letter-spacing:20px;line-height:1.3;
  background:linear-gradient(180deg,#ffffff 25%,#7fc6ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(80,180,255,.5)}
.cover .c-sub{margin-top:18px;font-size:32px;letter-spacing:14px;color:#a8d4ff}
.cover .c-time{margin-top:22px;font-size:26px;letter-spacing:6px;color:#7fb0dd}
.cover .c-line{width:760px;height:2px;margin:26px auto;
  background:linear-gradient(90deg,transparent,rgba(120,200,255,.85),transparent)}

/* ---------------- 进入遮罩 / 断线提示 ---------------- */
.enter-mask{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,#0d3f7d 0%,#04162c 70%)}
.enter-mask.hide{display:none}
.em-box{text-align:center}
.em-box h2{font-size:62px;letter-spacing:14px;color:#eaf4ff;text-shadow:0 0 40px rgba(70,170,255,.6)}
.em-box button{margin-top:44px;padding:24px 76px;font-size:32px;letter-spacing:10px;font-family:inherit;color:#03203f;
  background:linear-gradient(180deg,#8ed0ff,#2f96f0);border:0;border-radius:14px;cursor:pointer;
  box-shadow:0 12px 40px rgba(40,140,240,.5)}
.em-box button:hover{filter:brightness(1.08)}
.em-box p{margin-top:26px;font-size:18px;color:#8bb8e2;letter-spacing:2px}

.offline{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:40;display:none;
  padding:10px 26px;border-radius:24px;font-size:18px;letter-spacing:2px;color:#ffe0dc;
  background:rgba(180,40,30,.85);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.offline.show{display:block}