/* Word of the Day (public/word-of-the-day.js). Colors come from the day and evening tokens. */
.wd { width: min(100%, 640px); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4, 16px); padding-bottom: var(--space-6, 32px); }
.wd-word { align-items: center; text-align: center; gap: var(--space-2, 8px); }
.wd-date { margin: 0; font-weight: 700; color: var(--ink-muted); font-size: var(--text-sm); }
.wd-the-word { margin: 0; font: 800 clamp(36px, 11vw, 56px) / 1.05 var(--font-display); color: var(--accent-text); overflow-wrap: anywhere; }
.wd-pos { margin: 0; }
.wd-def { margin: 0; font: 700 var(--text-lg) / 1.35 var(--font-body, inherit); color: var(--ink); }
.wd-example { margin: 0; color: var(--ink-muted); font-style: italic; }
.wd-mark { background: var(--accent-soft); color: var(--ink); border-radius: 6px; padding: 0 4px; font-style: normal; font-weight: 800; }

.wd-quiz { gap: var(--space-3, 12px); }
.wd-quiz-title { margin: 0; font: 800 var(--text-lg) var(--font-display); }
.wd-question { margin: 0; font: 700 var(--text-lg) / 1.35 var(--font-body, inherit); }
.wd-choices { display: flex; flex-direction: column; gap: 8px; }
.wd-choice { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 3px 0 var(--line-strong); color: var(--ink); font: 600 var(--text-md, 17px) / 1.3 var(--font-body, inherit); text-align: left; cursor: pointer; touch-action: manipulation; }
.wd-choice:not(:disabled):hover { background: var(--accent-soft); }
.wd-choice:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-strong); }
.wd-choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wd-choice:disabled { cursor: default; }
.wd-choice.is-right { background: var(--success-soft); box-shadow: inset 0 0 0 3px var(--success); }
.wd-choice.is-wrong { background: var(--surface-sunken); color: var(--ink-muted); text-decoration: line-through; }
.wd-choice-key { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-sunken); font: 800 var(--text-sm) var(--font-display); }
.wd-feedback { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 800; min-height: 1.4em; }
.wd-feedback .ui-icon { width: 20px; height: 20px; flex: none; }
.wd-feedback.ok { color: var(--success-text, var(--success)); }
.wd-feedback.no { color: var(--accent-text); }
.wd-next:empty { display: none; }
.wd-score { margin: 0; font: 800 var(--text-xl) var(--font-display); }

.wd-streak { gap: var(--space-2, 8px); }
.wd-streak-title { margin: 0; display: flex; align-items: center; gap: 8px; font: 800 var(--text-lg) var(--font-display); }
.wd-streak-title .ui-icon { width: 24px; height: 24px; color: var(--accent); }
.wd-streak-best { margin: 0; color: var(--ink-muted); }

/* [fixes-b] The word with its Hear it button; the meaning and example hide during the quiz. */
.wd-word-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px) var(--space-3, 12px); }
.wd-word--quiz .wd-def, .wd-word--quiz .wd-example, .wd-word--quiz .wd-pos { display: none; }