/* The four answer identities: coral ▲, amber ◆, teal ●, blue ■.
 *
 * Shared by the live game and by the streak on /categories, which is why this
 * is its own file rather than part of style.css. A page that renders an answer
 * button loads this. The colour and the shape are never separated, because the
 * shape is what makes the four readable to a colour blind player. */
.answer {
  font: inherit; font-weight: 700; font-size: 1.02rem; text-align: left;
  color: oklch(0.98 0.01 85); border: 0; border-radius: var(--r-ctl);
  padding: 16px 14px; min-height: 68px; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), opacity 0.3s, filter 0.3s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  animation: opt-in 0.45s var(--ease) backwards;
}
.answer:nth-child(1) { animation-delay: 0.05s; } .answer:nth-child(2) { animation-delay: 0.12s; }
.answer:nth-child(3) { animation-delay: 0.19s; } .answer:nth-child(4) { animation-delay: 0.26s; }
@keyframes opt-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
.a-shape { font-size: 0.85rem; opacity: 0.9; flex-shrink: 0; width: 1.4em; text-align: center; }
.a-text { flex: 1; overflow-wrap: anywhere; }
.a-coral { background: var(--coral); box-shadow: 0 4px 0 var(--coral-edge); }
.a-amber { background: var(--amber); box-shadow: 0 4px 0 var(--amber-edge); color: oklch(0.22 0.05 75); }
.a-teal  { background: var(--teal);  box-shadow: 0 4px 0 var(--teal-edge); color: oklch(0.16 0.04 200); }
.a-blue  { background: var(--blue);  box-shadow: 0 4px 0 var(--blue-edge); }
.answer:not(:disabled):hover { filter: brightness(1.07); }
.answer:not(:disabled):active { transform: translateY(3px) scale(0.99); box-shadow: 0 1px 0 oklch(0.3 0.03 40); }
.answer:disabled { cursor: default; }
.answer.picked { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Your wrong pick on the daily: outlined in the error colour and pressed into
   the page, so the two outlines on the card say different things rather than
   both saying "look here". The board's grammar, and it only applies where a
   correct answer is being revealed alongside it. */
.hub-answers .answer.picked {
  outline-color: var(--bad); transform: translateY(3px); box-shadow: 0 1px 0 var(--line);
}
.answer.dim { opacity: 0.28; filter: saturate(0.5); }
.answer.correct-reveal { outline: 3px solid var(--good); outline-offset: 3px; animation: correct-bounce 0.6s var(--ease); }
@keyframes correct-bounce { 30% { transform: scale(1.04); } }