[data-screen="play"] { padding: 130px 24px 24px; }

.stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 5vmin;
}
@media (orientation: portrait) {
  .stage { flex-direction: column; align-items: center; }
  .meter { width: min(34vw, 180px) !important; flex: 1; }
}

.slogan-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.slogan-label { font-family: var(--font-mono); color: var(--brand); text-transform: uppercase; letter-spacing: .2em; }
.slogan {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 7vmin, 84px);
  line-height: 1.05;
  color: var(--heading);
  transform-origin: center;
  transition: transform .06s linear, color .2s;
}
.slogan.loud {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.meter {
  position: relative;
  width: min(18vw, 180px);
  border-radius: 90px;
  background: var(--surface);
  border: 1px solid var(--glow);
  box-shadow: 0 0 40px rgba(56, 189, 248, .2), var(--shadow);
  overflow: visible;
  margin-top: 60px;
  margin-right: 120px;
}
.meter-track {
  position: absolute;
  inset: 12px;
  border-radius: 80px;
  overflow: hidden;
  background: var(--bg);
}
.meter-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: linear-gradient(to top, var(--brand) 0, var(--purple) 60%, var(--pink) 90%);
  background-size: 100% var(--track-h, 600px);
  background-position: bottom;
  transition: height .05s linear;
}
.meter-peak {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  margin-bottom: -3px;
  background: var(--ink);
  box-shadow: 0 0 10px #fff;
  bottom: 0;
}
.mark {
  position: absolute;
  left: 100%;
  margin-left: 10px;
  transform: translateY(50%);
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  font-size: clamp(13px, 2vmin, 18px);
}
.mark::before {
  content: "";
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  width: 24px;
  border-top: 3px dashed var(--muted);
  opacity: .5;
}
.meter-top {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  border-radius: 50%;
  background: var(--surface-solid);
  border: 2px solid var(--brand);
  box-shadow: 0 0 20px rgba(56, 189, 248, .6);
  object-fit: cover;
  transition: bottom .05s linear;
}

.board {
  text-align: left;
  margin: 0 auto 20px;
  padding: 0;
  max-width: 260px;
  counter-reset: r;
  list-style: none;
}
.board li {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 700;
}
.board li::before { counter-increment: r; content: counter(r) "."; width: 2em; color: var(--muted); }
.board li span { flex: 1; }
.board li.me { background: var(--bg-2); color: var(--brand); border: 1px solid var(--glow); }