.hold-button {
  --tone: #3b82f6;
  --size: min(56vw, 220px);
  touch-action: none; /* a held finger shouldn't scroll or zoom the page */
  -webkit-touch-callout: none; /* no long-press menu on phones */
}

/* the charge ring: hidden until you hold, then it spins */
.hold-button::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(var(--tone), transparent 70%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  opacity: 0;
  transition: opacity 160ms ease;
}

.hold-button[aria-pressed="true"]::before {
  opacity: 1;
  animation: charge 1.1s linear infinite;
}

@keyframes charge {
  to { transform: rotate(1turn); }
}

.label-holding {
  display: none;
}

.hold-button[aria-pressed="true"] .label-idle {
  display: none;
}

.hold-button[aria-pressed="true"] .hold-button {
  --tone: #3b82f6;
  --size: min(56vw, 220px);
  touch-action: none; /* a held finger shouldn't scroll or zoom the page */
  -webkit-touch-callout: none; /* no long-press menu on phones */
}

/* the charge ring: hidden until you hold, then it spins */
.hold-button::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(var(--tone), transparent 70%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  opacity: 0;
  transition: opacity 160ms ease;
}

.hold-button[aria-pressed="true"]::before {
  opacity: 1;
  animation: charge 1.1s linear infinite;
}

@keyframes charge {
  to { transform: rotate(1turn); }
}

.label-holding {
  display: inline;
}

.timer {
  margin: 36px 0 0;
  font: 600 clamp(2.4rem, 10vw, 3.5rem)/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.instructions {
  max-width: 40ch;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.room {
  width: 100%;
  margin-top: 32px;
  text-align: left;
}

.room h2 {
  font-size: 1rem;
  margin: 0 0 12px;
}

.room-empty,
.record {
  color: var(--muted);
  margin: 0;
}

.record {
  margin-top: 16px;
}

.holds {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
  padding: 2px;
}

.holds li {
  counter-increment: rank;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.holds li::before {
  content: counter(rank) ".";
  min-width: 2ch;
  color: var(--muted);
}

.hold-note {
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.85rem;
}

/* your own row. bold plus the "(you)" note, not just a colour */
.holds li.is-you {
  font-weight: 700;
  background: var(--selection);
  color: var(--selection-text);
}

.holds li.is-you .hold-note,
.holds li.is-you::before {
  color: inherit;
}

/* no inset box at all while nobody is holding */
.holds:not(:has(li:not([hidden]))) {
  display: none;
}

/* medal colours for the podium */
.holds li:nth-child(1)::before { color: #fbbf24; font-weight: 700; }
.holds li:nth-child(2)::before { color: #cbd5e1; font-weight: 700; }
.holds li:nth-child(3)::before { color: #d97706; font-weight: 700; }