.daily-clue-card { --clue-gap: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow-wrap: anywhere; }
.daily-clue-card-body { display: grid; gap: var(--clue-gap); padding: 24px; }
.guide .daily-clue-text { color: var(--ink); font-family: var(--font-sans); font-size: 1.5rem; line-height: 1.5; margin: 0; }
.public-form.daily-clue-form { max-width: none; min-width: 0; margin: 0; gap: var(--clue-gap); }
.letter-entry { border: 0; padding: 0; margin: 0; min-width: 0; }
.letter-entry legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.letter-boxes, .letter-word { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.letter-word { max-width: 100%; }
.letter-separator { min-width: 10px; color: var(--muted); }
.public-form .letter-box { flex: 0 0 40px; width: 40px; height: 44px; padding: 0; text-align: center; font-size: 1.25rem; font-weight: 600; text-transform: uppercase; border-color: var(--line); border-radius: 4px; }
.public-form .letter-box:focus { border-color: var(--accent); background: #edf1e8; outline-offset: 2px; }
.daily-clue-form .field-hint { margin: 0; }
.daily-clue-form input[type=submit] { margin-top: 0; min-height: 48px; }
.daily-clue-result { padding: 16px; margin: 16px 0 0; background: #edf1e8; border: 1px solid var(--line); border-radius: 4px; }
.daily-clue-result h2 { margin-bottom: 8px; }
.daily-clue-result h2:last-child { margin-bottom: 0; }
.daily-clue-result p { margin-bottom: 0; }
@media (max-width: 640px) {
  .daily-clue-card-body { padding: 24px 16px; }
}

.daily-clue-card--shudder { animation: clue-shudder 360ms ease-in-out; }
@keyframes clue-shudder {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.letter-feedback { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .daily-clue-card--shudder { animation: none; }
}

/* Account for the confirmation panel's own inset below its text. */
.daily-clue-card-body:has(.daily-clue-result) { padding-bottom: 8px; }