html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #e8f3ff;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
}
.letterbox {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: #000;
}
.stage {
  position: relative;
  width: min(100vw, calc(100vh * 15 / 22));
  height: min(100vh, calc(100vw * 22 / 15));
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(79, 195, 247, .15);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(30, 136, 229, .35), transparent 46%),
    linear-gradient(180deg, #0a1c38 0%, #071428 40%, #050d1c 100%);
}
.bg-grid {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(79,195,247,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,195,247,.05) 1px, transparent 1px);
  background-size: 4.2% 3%;
  opacity: .5;
}
.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.hidden { display: none !important; }
.org {
  letter-spacing: .3em;
  font-size: calc(min(100vw, 100vh * 15 / 22) * .028);
  color: #7ec8ff;
  text-align: center;
}
.live-head, .res-head {
  height: 7%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 4%;
}
.live-head h1, .res-head h1 {
  margin: 0;
  font-size: calc(min(100vw, 100vh * 15 / 22) * .042);
  letter-spacing: .08em;
  text-align: center;
  line-height: 1.2;
}
.etime {
  font-size: calc(min(100vw, 100vh * 15 / 22) * .022);
  color: #8fb8dc;
}
.sec-title {
  font-size: calc(min(100vw, 100vh * 15 / 22) * .026);
  color: #7ec8ff;
  letter-spacing: .2em;
  padding: 0 5% 1.2%;
}
.top3-wrap { height: 33%; display: flex; flex-direction: column; }
.top3 { flex: 1; padding: 0 4%; display: flex; flex-direction: column; gap: 3%; }
.t-item {
  flex: 1;
  display: grid;
  grid-template-columns: 12% 1fr 22%;
  align-items: center;
  background: rgba(12, 48, 92, .55);
  border: 1px solid rgba(79, 195, 247, .22);
  border-radius: 1.2vh;
  padding: 0 3%;
  min-height: 0;
}
.t-item.r1 {
  background: linear-gradient(90deg, rgba(255, 193, 7, .18), rgba(12, 48, 92, .5));
  border-color: rgba(255, 193, 7, .55);
}
.t-item.r2 { border-color: rgba(176, 190, 197, .55); }
.t-item.r3 { border-color: rgba(255, 138, 101, .45); }
.medal {
  font-size: calc(min(100vw, 100vh * 15 / 22) * .045);
  font-weight: 800;
  text-align: center;
}
.t-name {
  font-size: calc(min(100vw, 100vh * 15 / 22) * .032);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-sub {
  font-size: calc(min(100vw, 100vh * 15 / 22) * .02);
  color: #9ec3e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-heat { text-align: right; }
.t-heat b {
  display: block;
  font-size: calc(min(100vw, 100vh * 15 / 22) * .038);
  color: #ffd54f;
}
.t-heat span { font-size: calc(min(100vw, 100vh * 15 / 22) * .018); color: #9ec3e6; }
.now-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.now {
  flex: 1;
  margin: 0 4% 2%;
  border-radius: 1.4vh;
  border: 1px solid rgba(79, 195, 247, .25);
  background: rgba(8, 28, 56, .65);
  display: grid;
  grid-template-columns: 32% 1fr;
  overflow: hidden;
  min-height: 0;
}
.now-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  color: #7ea0c0;
  font-size: calc(min(100vw, 100vh * 15 / 22) * .036);
}
.now-cover {
  background: #0b2a4e center/cover no-repeat;
}
.now-cover.empty {
  display: grid;
  place-items: center;
  font-size: calc(min(100vw, 100vh * 15 / 22) * .12);
  color: rgba(126, 200, 255, .35);
  background: linear-gradient(180deg, #123a6b, #0b2a4e);
}
.now-info { padding: 6% 6%; overflow: hidden; }
.now-info h2 {
  margin: 0 0 3%;
  font-size: calc(min(100vw, 100vh * 15 / 22) * .042);
  line-height: 1.25;
}
.now-who {
  font-size: calc(min(100vw, 100vh * 15 / 22) * .028);
  color: #b3d4f5;
  margin-bottom: 4%;
}
.now-desc {
  font-size: calc(min(100vw, 100vh * 15 / 22) * .024);
  line-height: 1.45;
  color: #c5d8ec;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qr-wrap {
  height: 20%;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.1fr;
  gap: 2%;
  padding: 0 4% 3%;
  align-items: stretch;
}
.qr-item {
  background: rgba(255,255,255,.96);
  color: #0b1f3a;
  border-radius: 1.2vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.qr-box { width: 46%; aspect-ratio: 1; }
.qr-box img, .qr-box canvas, .qr-box table { width: 100% !important; height: 100% !important; }
.qr-cap { font-size: calc(min(100vw, 100vh * 15 / 22) * .024); font-weight: 800; margin-top: 2%; }
.qr-state { font-size: calc(min(100vw, 100vh * 15 / 22) * .018); color: #1b8a4a; }
.qr-item.closed .qr-state { color: #c62828; }
.qr-item.closed::after {
  content: "入口未开启";
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 40, .72);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: calc(min(100vw, 100vh * 15 / 22) * .028);
  font-weight: 700;
}
.timer-board {
  border-radius: 1.2vh;
  border: 1px solid rgba(79, 195, 247, .4);
  background: rgba(8, 28, 56, .8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.timer-phase { font-size: calc(min(100vw, 100vh * 15 / 22) * .022); color: #7ec8ff; letter-spacing: .15em; }
.timer-num {
  font-size: calc(min(100vw, 100vh * 15 / 22) * .09);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.timer-sub { font-size: calc(min(100vw, 100vh * 15 / 22) * .018); color: #8fb8dc; }
.timer-board.warn { border-color: #ff8a65; color: #ffccbc; }
.timer-board.warn .timer-num { color: #ff8a65; }
.timer-board.up { border-color: #ef5350; animation: pulse .6s infinite alternate; }
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(239,83,80,.2); } to { box-shadow: 0 0 4vh 0 rgba(239,83,80,.45); } }
.timeup {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background: rgba(180, 20, 20, .55);
  font-size: calc(min(100vw, 100vh * 15 / 22) * .14);
  font-weight: 800;
  letter-spacing: .3em;
}
.reveal-main { height: 46%; padding: 0 5%; }
.reveal-card {
  height: 100%;
  border-radius: 1.6vh;
  border: 1px solid rgba(79, 195, 247, .35);
  background: linear-gradient(180deg, rgba(21,101,192,.35), rgba(7,20,40,.8));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6%;
  animation: rise .7s ease;
}
.reveal-card.champ {
  border-color: #ffc107;
  background: linear-gradient(180deg, rgba(255,193,7,.28), rgba(7,20,40,.85));
  box-shadow: 0 0 8vh rgba(255, 193, 7, .25);
}
@keyframes rise {
  from { transform: translateY(6%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.place {
  font-size: calc(min(100vw, 100vh * 15 / 22) * .03);
  color: #ffd54f;
  letter-spacing: .2em;
}
.reveal-card h2 {
  margin: 2% 0 4%;
  font-size: calc(min(100vw, 100vh * 15 / 22) * .055);
  line-height: 1.2;
}
.scores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3% 4%;
}
.scores div {
  background: rgba(0,0,0,.2);
  border-radius: 1vh;
  padding: 3% 4%;
}
.scores b {
  display: block;
  font-size: calc(min(100vw, 100vh * 15 / 22) * .048);
}
.scores span { font-size: calc(min(100vw, 100vh * 15 / 22) * .02); color: #9ec3e6; }
.scores .total { grid-column: 1 / -1; border: 1px solid rgba(255,213,79,.5); }
.scores .total b { color: #ffd54f; font-size: calc(min(100vw, 100vh * 15 / 22) * .07); }
.reveal-list {
  flex: 1;
  padding: 1% 5% 4%;
  display: flex;
  flex-direction: column;
  gap: 1.4%;
  overflow: hidden;
}
.mini-row {
  display: grid;
  grid-template-columns: 12% 1fr 18%;
  align-items: center;
  background: rgba(12, 48, 92, .4);
  border-radius: .8vh;
  padding: 1.5% 3%;
  font-size: calc(min(100vw, 100vh * 15 / 22) * .024);
}
.mini-row b { color: #ffd54f; text-align: right; }
.wait {
  height: 100%;
  display: grid;
  place-items: center;
  font-size: calc(min(100vw, 100vh * 15 / 22) * .04);
  color: #7ea0c0;
}