.tt-clock {
  width: clamp(220px, 45vw, 320px);
  height: auto;
  display: block;
  margin: 0 auto 1rem;
}
.tt-clock .face {
  fill: #f7f3e8;
  stroke: #3b2410;
  stroke-width: 6;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.tt-clock .tick { stroke: #1a2022; stroke-width: 2; }
.tt-clock .tick--hour { stroke-width: 4; }
.tt-clock .num  { fill: #1a2022; font-family: 'Caveat', cursive; font-size: 16px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.tt-clock .hand-h { stroke: #1a2022; stroke-width: 6; stroke-linecap: round; }
.tt-clock .hand-m { stroke: #2e3638; stroke-width: 4; stroke-linecap: round; }
.tt-clock .pivot  { fill: var(--accent); stroke: #1a2022; stroke-width: 2; }

.tt-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  max-width: 420px;
  margin: 0 auto;
}
.tt-choice {
  background: linear-gradient(180deg, #f7f3e8, #e7e0c7);
  color: var(--slate-900);
  border: none;
  font-family: 'Caveat', cursive;
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 700;
  padding: .6rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.35);
  touch-action: manipulation;
}
.tt-choice:hover { transform: translateY(-1px); }
.tt-choice:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.tt-choice.is-good { background: var(--accent-4); }
.tt-choice.is-bad  { background: var(--accent-3); }