/* ink — a color word in an ink color; color keys in the bottom of the screen */
.ink-stim { flex-direction: column; gap: clamp(16px, 4dvh, 28px); }
.ink-word {
  height: 92px; min-width: 120px; padding: 0 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 54px; font-weight: 600; letter-spacing: 0.04em; line-height: 1;
  border: 1.6px solid transparent; border-radius: 14px;
  user-select: none; -webkit-user-select: none;
}
.ink-word.zh { font-weight: 500; letter-spacing: 0; }
.ink-word.is-framed { border-color: var(--stage-ink); }
.ink-word.is-dim { opacity: 0.3; }
.ink-clock { width: 120px; height: 1px; background: var(--stage-line); overflow: hidden; }
.ink-clock i { display: block; height: 100%; background: var(--stage-dim); transform-origin: left center; }

.ink-controls { flex: none; }
/* never a fixed pad: it shrinks on short phones (iPhone SE, 360 × 600) so every key stays on screen */
.ink-pad {
  display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 10px;
  height: min(330px, 40vh);
  height: clamp(176px, 40dvh, 330px);
}
.ink-key { gap: 12px; padding: 0; user-select: none; -webkit-user-select: none; }
.ink-swatch { width: 44px; height: 44px; border-radius: 50%; display: block; }
.ink-key small { font-size: 13px; color: var(--stage-dim); }