:root {
  --design-width: 3840;
  --design-height: 2160;
  --u: min(calc(100vw / var(--design-width)), calc(100vh / var(--design-height)));

  --bg-top: #1f2632;
  --bg-bottom: #171d27;
  --panel-green: #31ec5d;
  --panel-green-2: #1fc84a;
  --panel-green-shadow: rgba(49, 236, 93, 0.24);
  --panel-green-line: rgba(49, 236, 93, 0.42);
  --text-main: #eef3f5;
  --text-soft: rgba(238, 243, 245, 0.94);
  --text-dim: rgba(238, 243, 245, 0.86);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 16%, rgba(49, 236, 93, 0.07), transparent 28%),
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.025), transparent 52%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  color: var(--text-main);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 50%, transparent 50%),
    radial-gradient(circle, rgba(255, 255, 255, 0.09) 0 calc(0.65 * var(--u)), transparent calc(0.85 * var(--u)));
  background-size: 100% calc(4 * var(--u)), calc(14 * var(--u)) calc(14 * var(--u));
  mix-blend-mode: soft-light;
}

.screen {
  min-height: 100%;
  display: grid;
  place-items: center;
}

.scoreboard {
  position: relative;
  width: calc(var(--design-width) * var(--u));
  height: calc(var(--design-height) * var(--u));
  padding: calc(142 * var(--u)) calc(320 * var(--u)) calc(180 * var(--u));
  display: flex;
  flex-direction: column;
}

.counter-wrap {
  display: flex;
  justify-content: center;
}

.counter {
  display: flex;
  align-items: flex-start;
  gap: calc(76 * var(--u));
  user-select: none;
}

.counter-group {
  display: flex;
  gap: calc(76 * var(--u));
}

.counter-group + .counter-group {
  margin-left: calc(242 * var(--u));
}

.digit {
  position: relative;
  width: calc(492 * var(--u));
  height: calc(774 * var(--u));
  filter: drop-shadow(0 0 calc(18 * var(--u)) rgba(49, 236, 93, 0.1));
}

.digit__segment {
  position: absolute;
  opacity: 0;
  background: linear-gradient(180deg, #59ff7f 0%, var(--panel-green) 52%, var(--panel-green-2) 100%);
  box-shadow:
    inset 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.2),
    0 0 calc(1.5 * var(--u)) rgba(97, 255, 132, 0.18);
  transition: opacity 160ms ease;
}

.digit__segment::after {
  content: "";
  position: absolute;
  inset: 10% 14%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 60%);
  opacity: 0.72;
  pointer-events: none;
}

.digit__segment.is-on {
  opacity: 1;
}

.segment--a,
.segment--g,
.segment--d {
  left: 9.2%;
  width: 68.6%;
  height: 9.1%;
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
}

.segment--a {
  top: 0;
}

.segment--g {
  top: 45.25%;
}

.segment--d {
  bottom: 0;
}

.segment--f,
.segment--b,
.segment--e,
.segment--c {
  width: 17.2%;
  height: 37.85%;
  clip-path: polygon(0 12%, 48% 0, 100% 12%, 100% 88%, 48% 100%, 0 88%);
}

.segment--f,
.segment--b {
  top: 6.7%;
}

.segment--e,
.segment--c {
  bottom: 6.7%;
}

.segment--f,
.segment--e {
  left: 0;
}

.segment--b,
.segment--c {
  right: 0;
}

.leaders {
  width: calc(3080 * var(--u));
  align-self: center;
  margin-top: calc(160 * var(--u));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(250 * var(--u));
}

.people-column {
  display: flex;
  flex-direction: column;
}

.people-separator {
  height: calc(12 * var(--u));
  opacity: 0.48;
  background: radial-gradient(circle, var(--panel-green-line) 0 34%, transparent 35%) center / calc(18 * var(--u)) 100% repeat-x;
}

.people-list {
  padding: calc(54 * var(--u)) 0;
  display: flex;
  flex-direction: column;
  gap: calc(42 * var(--u));
}

.person-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(72 * var(--u));
}

.person-row__name,
.person-row__dash,
.person-row__count {
  font-family: "Handjet", "Russo One", system-ui, sans-serif;
  font-weight: 700;
  font-size: calc(128 * var(--u));
  line-height: 0.82;
  letter-spacing: 0.035em;
  color: var(--text-soft);
  text-shadow: 0 0 calc(8 * var(--u)) rgba(255, 255, 255, 0.04);
  font-variant-numeric: tabular-nums;
}

.person-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-row__meta {
  min-width: calc(400 * var(--u));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(18 * var(--u));
}

.person-row__dash {
  color: var(--text-dim);
}

.person-row__count {
  min-width: calc(116 * var(--u));
  text-align: right;
}

.tree-icon {
  width: calc(74 * var(--u));
  height: calc(74 * var(--u));
  flex: 0 0 auto;
  fill: var(--panel-green);
  filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(49, 236, 93, 0.15));
}

@media (max-aspect-ratio: 16/9) {
  .counter-group + .counter-group {
    margin-left: calc(178 * var(--u));
  }

  .leaders {
    gap: calc(180 * var(--u));
  }
}