/*
 * screen.css — 大屏（设计稿「大屏画面16-9」：左排行榜，右总倒计时）
 *
 * 基准 1920×1080，但现场经常遇到 720p 投影或平板临时顶上去，所以尺寸全用 vh/vw 与 clamp，
 * 不用媒体查询堆叠——16 行必须在任何分辨率下都完整落在画面里，字号小了也比裁掉强。
 * 颜色只取 base.css 的 token。
 */

body.board {
  height: 100vh;
  overflow: hidden;
  background: var(--c-board);
  color: #fff;
}
.board-root { height: 100%; display: flex; flex-direction: column; }
.board-root .scene { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 2vh 2.2vw; gap: 1.6vh; }
.board-root .scene[hidden] { display: none !important; }   /* 带 !important：场景修饰类以后写了 display 也不会把隐藏顶掉 */

/* ------------------------------------ 待机 ------------------------------------ */
.scene--idle { align-items: center; justify-content: center; text-align: center; }
.idle__brand { display: flex; flex-direction: column; align-items: center; gap: 1vh; }
/* 待机页 logo 与标题字号等高（原 4.2vh 只有标题的六成，现场投影距离下几乎看不见）；
   大屏底色是 --c-board 深色，所以 invert 成白色剪影，与答题端的处理方向相反。 */
.idle__logo { height: 7vh; filter: brightness(0) invert(1); }
.idle__title { font-size: clamp(2rem, 7vh, 5rem); margin: 0; letter-spacing: .02em; }
.idle__line { width: min(34vw, 620px); opacity: .7; }
.idle__hint { color: rgba(255, 255, 255, .6); font-size: clamp(.9rem, 2.1vh, 1.5rem); max-width: 60ch; }

.roster {
  list-style: none; margin: 2vh 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2vh 1.4vw;
  width: min(92vw, 1500px);
}
.roster__item {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .4vh .8vw;
  padding: 1.1vh 1vw; border: 1px solid var(--c-line-dark); border-radius: 10px;
  background: rgba(255, 255, 255, .04);
}
.roster__no { font-size: clamp(1rem, 2.6vh, 1.9rem); font-weight: 700; color: var(--c-orange); }
.roster__name { font-size: clamp(.85rem, 2.1vh, 1.4rem); font-weight: 700; letter-spacing: .04em; }
.roster__sc { grid-column: 2; font-size: clamp(.65rem, 1.5vh, 1rem); color: rgba(255, 255, 255, .5); }
.roster__item--empty { grid-column: 1 / -1; text-align: center; color: rgba(255, 255, 255, .4); }

.idle__wait { margin-top: 2.4vh; color: rgba(255, 255, 255, .55); font-size: clamp(.85rem, 2vh, 1.3rem); }
.dots { display: inline-flex; gap: 4px; margin-left: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-orange); animation: blink 1.4s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------------------------------- 实时排行 ---------------------------------- */
/* 顶栏：ascentium logo + RACE TO REVENUE（左）· ROUND X OF 2 胶囊（中）· LIVE 绿点（右） */
.live__brand {
  flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1vw;
  padding: 1.4vh 2.2vw; margin: -2vh -2.2vw 0; background: rgba(255, 255, 255, .06);
}
.brand__left { display: flex; align-items: center; gap: 1vw; min-width: 0; }
.brand__logo { height: 3.2vh; filter: brightness(0) invert(1); }
.brand__title { font-size: clamp(.95rem, 2.2vh, 1.75rem); margin: 0; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.round-pill {
  justify-self: center; background: var(--c-orange-pill); color: #fff; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 8px; padding: 1vh 2vw;
  font-size: clamp(.8rem, 2vh, 1.4rem); white-space: nowrap;
}
.live-dot { justify-self: end; display: inline-flex; align-items: center; gap: .6vw; color: var(--c-live-green); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: clamp(.75rem, 1.9vh, 1.2rem); }
.live-dot i { width: .9vh; height: .9vh; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--c-live-green); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
/* phase 变体：idle 隐藏，finished 灰点 FINISHED */
.live-dot.is-idle { display: none; }
.live-dot.is-finished { color: var(--c-muted); }
.live-dot.is-finished i { background: var(--c-muted); animation: none; }

/* 顶条与榜单之间按设计稿留出明显空隙（设计稿实测 7.3vh，场景 gap 1.6vh + 这里 5.7vh） */
.live__body { flex: 1 1 auto; min-height: 0; margin-top: 5.7vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 32vw); gap: 1.6vw; }

/* 左栏容器：表头 + 榜单要竖着排，不能直接做 .live__body 的 grid 子项，
   否则表头会跟 16 行抢同一列轨道（min-width 必须给 0，不然长桌名会把网格撑宽） */
.rankcol { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.rank {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;   /* 行间 1px 缝，露出页面底色当分隔线（设计稿无描边） */
  flex: 1 1 auto;                 /* 关键：撑满 .rankcol 剩余高度，否则行 flex:1 1 0 会把容器压成 0 高而重叠 */
  min-height: 0;
}
/* 底部占位：与 16 行一起等分容器，占 4 份（≈空出 1/5 高度），使每行降为原来的 4/5 */
.rank::after { content: ''; flex: 4 1 0; order: 100; }
.rank__row {
  flex: 1 1 0; min-height: 0;
  display: grid; grid-template-columns: 3.6vw minmax(0, 1fr) 5.5vw 5.5vw 5.5vw 8vw;
  align-items: center; gap: .8vw;
  padding: 0;                     /* 行本身不内缩：序号块才能贴住行的左边缘 */
  border: none; border-radius: 0;
  background: transparent;
  font-size: clamp(.72rem, 2vh, 1.5rem);
  transition: order .5s ease, background .3s ease, transform .3s ease;
}
.rank__row.zebra-even { background: #15171d; }
.rank__row.zebra-odd { background: #1b1e25; }
.rank__row.is-empty { opacity: .3; }
/* POS 单元格占满整行高度：前三名橙块、其余默认深灰块，均为直角贴行左边缘 */
.rank__pos { align-self: stretch; display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; background: #2a2e37; }
.rank__label { font-weight: 700; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 1.1vw; }
.rank__r1, .rank__r2 { text-align: right; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .66); padding-right: 1.1vw; }
.rank__gap { text-align: right; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .4); font-size: .9em; padding-right: 1.1vw; }
.rank__total { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.25em; padding-right: 1.1vw; }
/* 榜首：仅 GAP 列 LEADER 橙色，行背景不特殊 */
.rank__row.is-up { transform: translateX(6px); }
/* 设计稿：前三名 POS 为橙色实心直角块白字，行背景与其它行一致（走斑马纹，不额外高亮） */
.rank__row.is-top3 .rank__pos { color: #fff; background: var(--c-orange); border-radius: 0; }
.rank__gap.is-leader-tag { color: var(--c-orange); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* 表头行：与 .rank__row 同列宽同内缩，否则会错位 */
.rank__head {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 3.6vw minmax(0, 1fr) 5.5vw 5.5vw 5.5vw 8vw; gap: .8vw;
  padding: 0 0 .4vh;
  font-size: clamp(.6rem, 1.5vh, 1rem); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}
.rank__head span:nth-child(1) { text-align: center; }
.rank__head span:nth-child(2) { padding-left: 1.1vw; }
.rank__head span:nth-child(n+3) { text-align: right; padding-right: 1.1vw; }

.clockbox {
  align-self: stretch; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between;
  padding: 3vh 0 0;
  border: none; border-radius: 0;
  background: transparent;
}
/* 底部占位：与左栏 .rank::after 同比例（≈ 1/5 高度），把格旗/备注上提到与第 16 行底边对齐，
   使右侧面板与左侧榜单同高（左栏不动，只缩短右侧）。 */
.clockbox::after { content: ''; flex: 0 0 20%; }
.clockbox__k { margin: 0; text-align: left; font-size: clamp(.8rem, 2.2vh, 1.4rem); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); font-weight: 700; }
.clockbox__v { margin: 0; text-align: left; color: #fff; font-size: clamp(3.2rem, 18vh, 12rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.clockbox__round { margin: 0; font-size: clamp(.75rem, 2vh, 1.3rem); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.clockbox__logo { height: 3.4vh; opacity: .55; filter: brightness(0) invert(1); }
/* 提示卡：无描边、宽度 100%、固定高度至少两行（文案长短变化时不跳版） */
.clockbox__hint {
  margin: 0; padding: 2vh 1.6vw; width: 100%; min-height: 9vh;
  border: none; border-radius: 10px; background: rgba(255, 255, 255, .04);
  text-align: left; color: rgba(255, 255, 255, .72);
  font-size: clamp(.75rem, 2vh, 1.2rem); line-height: 1.5;
}
/* 底部一组：格旗（line.png 单行、宽 100%）与备注贴在一起 */
.clockbox__foot { display: flex; flex-direction: column; gap: .8vh; }
/* line.png 自身就是白格 + #0B0C10 暗格，暗格与大屏底色一致，直接显示即可（不加 filter，否则整条会被刷成白块） */
.clockbox__flag { display: block; width: 100%; height: auto; }
.clockbox__note { margin: 0; text-align: left; font-style: italic; color: rgba(255, 255, 255, .35); font-size: clamp(.6rem, 1.4vh, .85rem); line-height: 1.4; }

.live__foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2vw; color: rgba(255, 255, 255, .35); font-size: clamp(.65rem, 1.6vh, 1rem); }
.live__hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------- 最终排名 ---------------------------------- */
.final__head { text-align: center; }
.final__kicker { margin: 0; font-size: clamp(.75rem, 2vh, 1.3rem); letter-spacing: .2em; text-transform: uppercase; color: var(--c-orange); }
.final__title { font-size: clamp(1.4rem, 4.4vh, 3.2rem); margin: 0; }

.podium { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; gap: 1.2vw; margin: 1vh 0 1.4vh; }
.podium__slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6vh;
  width: min(22vw, 420px); padding: 1.6vh 1vw;
  border: 1px solid var(--c-line-dark); border-radius: 12px; background: rgba(255, 255, 255, .05);
}
.podium__slot--first { border-color: var(--c-orange); background: rgba(242, 101, 34, .16); min-height: 16vh; }
.podium__slot--second, .podium__slot--third { min-height: 11vh; }
.podium__pos { font-size: clamp(1.2rem, 3.4vh, 2.4rem); font-weight: 700; color: var(--c-orange); }
.podium__label { font-size: clamp(.9rem, 2.6vh, 1.8rem); font-weight: 700; text-align: center; }
.podium__total { font-size: clamp(1.1rem, 3.2vh, 2.2rem); font-weight: 700; }

.rank--final { flex: 1 1 auto; }

/* 4:3 投影与窄屏：右栏挤到下面，榜单继续占满，16 行不裁 */
@media (max-aspect-ratio: 4/3) {
  .live__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; margin-top: 2.4vh; }
  .clockbox { flex-direction: row; align-items: center; gap: 2vw; justify-content: space-between; padding: 1vh 0; }
  .clockbox::after { display: none; }
  .clockbox__hint { width: auto; flex: 1 1 auto; min-height: 0; }
  .clockbox__foot { flex: 0 0 auto; }
  .clockbox__flag { width: 16vw; }
  .clockbox__logo { display: none; }
  .rank__row { font-size: clamp(.62rem, 2.4vh, 1.2rem); }
}

.board-root .netbar { background: var(--c-red); }