/*
 * 一千个人抛硬币的舞台. 颜色全部用站点 token, 明暗主题自动跟随.
 * 视觉落点是计数器: 比开始时少的人数, 大号斜体数字; 每抛完一批轻轻落定一下.
 */

.coin-canvas {
  display: block;
  width: 100%;
  height: 300px;
  cursor: crosshair;
  touch-action: manipulation;
}

.coin-counter {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 0.6rem;
  margin-top: 1.25rem;
}

.coin-count {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(3.25rem, 13vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.coin-unit { color: var(--ink-faint); font-size: 0.9375rem; }

.coin-exact {
  grid-column: 1 / -1;
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.coin-counter.is-done .coin-count { animation: coin-settle 0.7s var(--ease); }
@keyframes coin-settle {
  0% { transform: translateY(-4px); }
  100% { transform: none; }
}

/* 读数: 两列, 名字淡, 数值正文色. 窄屏时自然换行. */
.coin-readout {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 1.4rem 0 0;
  font-size: 0.9375rem;
}
.coin-readout dt { color: var(--ink-faint); }
.coin-readout dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.coin-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.coin-btn {
  padding: 0.4rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.coin-btn:hover { border-color: var(--accent); color: var(--accent); }
.coin-btn.is-primary { border-color: var(--accent); background: var(--accent-soft); }
.coin-btn:disabled { opacity: 0.4; cursor: default; }
.coin-btn:disabled:hover { border-color: var(--rule); color: var(--ink); }

.coin-hint { flex: 1 1 12rem; color: var(--ink-faint); font-size: 0.8125rem; }

@media (prefers-reduced-motion: reduce) {
  .coin-counter.is-done .coin-count { animation: none; }
}