.cn {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
  width: 100%;
}

.cn-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  perspective: 800px;
}

/* The coin is a disc that keeps its two sides in one place: the label is on the
   coin itself, so the room reads the answer rather than a colour code. */
.cn-coin {
  display: grid;
  place-items: center;
  width: clamp(9rem, 32vw, 16rem);
  height: clamp(9rem, 32vw, 16rem);
  padding: var(--space-4);
  border-radius: 50%;

  background: var(--c-blue-tint);
  border: 6px solid var(--c-blue);
  color: var(--c-ink);
  box-shadow: var(--shadow-paper);
  transition: background-color 250ms ease, border-color 250ms ease;
}

.cn-coin.is-b {
  background: var(--c-amber-tint);
  border-color: var(--c-amber);
}

.cn-face {
  font-size: clamp(1.5rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.cn-coin.is-flipping {
  animation: coin-spin 700ms cubic-bezier(0.35, 0, 0.3, 1);
}

.cn-coin.is-flipping .cn-face {
  opacity: 0;
}

@keyframes coin-spin {
  0% {
    transform: rotateX(0) translateY(0) scale(1);
  }
  35% {
    transform: rotateX(720deg) translateY(-28%) scale(1.06);
  }
  100% {
    transform: rotateX(1800deg) translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cn-coin.is-flipping {
    animation: none;
  }
  .cn-coin.is-flipping .cn-face {
    opacity: 1;
  }
}

.cn-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--c-ink-muted);
}

.cn-history {
  margin: 0;
  min-height: 1.4em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.cn-setup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  width: 100%;
  border-top: 1px solid var(--c-line);
  padding-top: var(--space-6);
}

.cn-setup input {
  min-width: 10rem;
}

.cn-hint {
  margin: 0;
  color: var(--c-ink-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.cn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* --- Fullscreen ----------------------------------------------------------- */

.toy.is-fullscreen .cn {
  justify-content: center;
  height: 100%;
}

.toy.is-fullscreen .cn-setup,
.toy.is-fullscreen .cn-hint {
  opacity: 0;
  transition: opacity 200ms ease;
}

.toy.is-fullscreen .cn-setup:focus-within,
.toy.is-fullscreen:hover .cn-setup,
.toy.is-fullscreen:hover .cn-hint {
  opacity: 1;
}