/* Transparent ceremony layout with local contrast around the data. */
main {
  grid-template-columns: 30fr 33fr 37fr;
  gap: 1.3vw;
}

.ambient { display: none; }

.header-right { gap: 1.4vh; min-width: 0; }
.qr-box {
  width: 14vh;
  height: 14vh;
  padding: 1.6vh;
  flex-shrink: 0;
}
.qr-box img,
.qr-box canvas {
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated;
}

.colL,
.colR {
  background: linear-gradient(180deg, rgba(47, 8, 13, .32), rgba(30, 4, 9, .46));
  border: 1px solid rgba(242, 207, 139, .25);
  border-radius: 5px;
  padding: 1.1vh .85vw .7vh;
}

.colR {
  background: linear-gradient(90deg, rgba(47, 8, 13, .10), rgba(47, 8, 13, .14) 55%, rgba(30, 4, 9, .38));
}
.orow .orgname {
  width: max-content;
  max-width: 100%;
  background: rgba(40, 5, 10, .30);
  border-radius: 3px;
  padding: 1px 4px;
}
.orow .orgname,
.orow .num,
.orow .rk {
  text-shadow: 0 1px 3px #260308, 0 0 7px #260308;
}

.section-head {
  padding-bottom: 1vh;
  border-bottom-color: rgba(242, 207, 139, .32);
}

.section-head h2 { font-size: 2.35vh; letter-spacing: .1em; }
.section-head small { font-size: 1.1vh; color: #d7bca4; }
.section-index { color: #c39b65; }

.podium { padding: 1.2vh 0 .7vh; }
.pcard { padding: .7vh .3vw; background: rgba(242, 207, 139, .045); }
.pcard.p1 { padding: 1.2vh .3vw; background: linear-gradient(#d6a9572b, #c0963c0a); }
.pname { font-size: 2.1vh; }
.pamt { font-size: 3.35vh; }
.pmeta { font-size: 1.1vh; color: #dfc9b1; }
.crown { width: 3.1vh; height: 3.1vh; }
.crown-1 { width: 3.9vh; height: 3.9vh; }

.list-head,
.lrow {
  grid-template-columns: 3.2vh repeat(3, minmax(0, 1fr)) minmax(0, .6fr);
  gap: .6vh;
}
.with-customers .list-head,
.with-customers .lrow {
  grid-template-columns: 3.2vh repeat(3, minmax(0, 1fr)) repeat(2, minmax(0, .55fr));
}
.list-head { padding: .7vh 5px; font-size: 1.5vh; font-weight: 700; color: #f2d9b5; }
.list-head > span,
.lrow > span { text-align: center; }
.lrow { height: min(3vh, calc(100% / var(--personal-count, 17))); border-bottom-color: #e8c68c16; }
.lrow .rk { font-size: 1.75vh; font-weight: 700; color: #e1bb82; }
.lrow .nm { font-size: 1.85vh; font-weight: 700; color: #fff2dc; }
.lrow .og { font-size: 1.55vh; font-weight: 700; color: #e6ceb0; }
.lrow .num { font-size: 2.4vh; font-weight: 700; color: #ffe1a1; }
.pmeta,
.medal { font-weight: 700; }
.lrow .num.sub { font-size: 1.7vh; color: #e0cbb2; }

.org-columns,
.orow {
  grid-template-columns: 3.2vh minmax(0, 1fr) 11.5vh 6.8vh 6.8vh;
  gap: .8vh;
}
.org-columns { padding: 1vh 8px .9vh; font-size: 1.5vh; font-weight: 700; color: #f2d9b5; }
.orow { border-bottom-color: #e8c68c18; padding-left: 8px; padding-right: 8px; }
.orow .rk,
.orow .orgname,
.orow .num,
.orow small { font-weight: 700; }
.orow .orgname { font-size: 2.05vh; color: #fff0d7; letter-spacing: .05em; }
.orow .rk { font-size: 1.95vh; display: grid; place-items: center; }
.orow .rk .crown { width: 2.9vh; height: 2.9vh; }
.orow .amt { font-size: 3.35vh; color: #ffe1a1; }
.orow .pol { font-size: 2.15vh; color: #ead6bc; }
.orow .ppl { font-size: 1.95vh; color: #ead6bc; }
.orow small { font-size: 1.1vh; }
.track { width: 78%; height: 2px; margin-top: .55vh; background: #f4cd830b; }
.track i { background: linear-gradient(90deg, #bf8c45, #efcf8f); opacity: .7; }
.orow.lead { background: linear-gradient(90deg, #f2cf8b1f, #f2cf8b03); }

.center {
  justify-content: center;
  padding: .4vh .55vw;
  background: linear-gradient(180deg, rgba(58, 8, 12, .10), rgba(39, 6, 11, .20));
  border: none;
}
.summary-heading { padding: 1.1vh 0; border-bottom-color: #edcb8c33; }
.summary-heading > span,
.summary-heading > p { display: none; }
.summary-heading h2 { margin: 0; font-size: 3.05vh; letter-spacing: .15em; }
.center .total { margin: 2.4vh 0 1.6vh; }
.metric-label { font-size: 1.5vh; color: #e2c8ab; }
.total-value { font-size: min(15vh, 28cqw); line-height: 1.12; color: #fff0bd; }
.total-value small { font-size: 1.7vh; color: #e9c783; }
.summary-grid { margin-bottom: 0; }
.summary-grid > div { padding: 1.3vh 3px; }
.summary-grid strong { font-size: 6.4vh; color: #ffe1a1; }
.summary-grid small { font-size: 1.25vh; }
.summary-grid p { font-size: 1.35vh; color: #dfc7a8; margin-top: .7vh; }

.center .live-panel {
  --live-row-height: 4.1vh;
  margin-top: 1.4vh;
  background: rgba(31, 5, 10, .46);
  border-color: #edcb8c3d;
  padding: .8vh .7vw;
}
.live-panel .section-head h2 { font-size: 1.85vh; }
.live-panel .section-head small { font-size: 1.05vh; }
.live-card { font-size: 1.6vh; color: #e0cbb2; }
.live-card .live-who { color: #ffe5b6; }
.live-card .live-action { font-size: 1.3vh; color: #c6a78c; margin: 0 .3em; }
.live-card b { margin-left: .1em; }
.live-card strong { margin-left: .4em; }
.live-card b,
.live-card strong { font-size: 2.05vh; color: #fff1d3; }
.danmaku-empty { font-size: 1.5vh; color: #d9bfa1; }

/* Recognize new submissions in the masthead without covering rankings or totals. */
.fx-banner {
  left: auto;
  right: 13vw;
  top: 2.7vh;
  width: 25vw;
  min-width: 0;
  gap: .8vw;
  padding: .8vh .7vw;
  border-radius: 5px;
  animation: recognitionIn .3s ease-out both, recognitionOut .4s ease-in 3.15s both;
}
.fx-mark { width: 3.8vh; height: 3.8vh; font-size: 1.8vh; }
.fx-kicker { font-size: 1vh; letter-spacing: .12em; }
.fx-who { font-size: 2.1vh; overflow: hidden; text-overflow: ellipsis; }
.fx-who small { display: block; font-size: 1vh; margin: .3vh 0 0; }
.fx-banner .amt { font-size: 4.2vh; flex-shrink: 0; }
.fx-banner .amt small { font-size: 1.3vh; }
@keyframes recognitionIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes recognitionOut { to { opacity: 0; transform: translateY(-6px); } }

@media (max-aspect-ratio: 21/10) {
  main { grid-template-columns: 30fr 33fr 37fr; gap: 1.1vw; }
  .section-head h2 { font-size: 2.05vh; }
  .section-head small { font-size: 1vh; }
  .pname { font-size: 1.85vh; }
  .pamt { font-size: 2.9vh; }
  .pmeta { font-size: .95vh; }
  .pcard,
  .pcard.p1 { padding: .5vh 2px; }
  .crown { width: 2.7vh; height: 2.7vh; }
  .crown-1 { width: 3.4vh; height: 3.4vh; }
  .list-head, .lrow { gap: .45vh; }
  .list-head { font-size: 1.3vh; }
  .lrow .nm { font-size: 1.65vh; }
  .lrow .og { font-size: 1.4vh; }
  .lrow .num { font-size: 2.1vh; }
  .lrow .num.sub { font-size: 1.5vh; }
  .org-columns, .orow { grid-template-columns: 3.2vh minmax(0,1fr) 8.6vh 5.6vh 5.6vh; gap: .5vh; }
  .org-columns { font-size: 1.3vh; }
  .orow .orgname { font-size: 1.65vh; }
  .orow .amt { font-size: 2.8vh; }
  .orow .pol { font-size: 1.75vh; }
  .orow .ppl { font-size: 1.6vh; }
}

@media (max-aspect-ratio: 8/5) {
  .fx-banner { top: auto; bottom: .5vh; right: 6vw; width: 35vw; }
}