/* Seasonal games (scripts/games-seasonal.mjs): trivia quiz. Tokens from style.css. Right/wrong shown with words and ✓ ✗, not colour alone. */
.tq { max-width: 760px; margin: 0 auto; display: grid; gap: var(--s3); padding: var(--s3) 0; }
.tq-n { margin: 0; font-weight: 700; color: var(--muted); }
.tq-q { margin: 0; font-size: 1.35rem; line-height: 1.35; }
.tq-q:focus { outline: none; }
.tq-q:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.tq-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .tq-opts { grid-template-columns: 1fr 1fr; } }
.tq-a { all: unset; box-sizing: border-box; width: 100%; min-height: 60px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 14px; font: 600 1.1rem / 1.3 var(--font); color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 12px; cursor: pointer; }
.tq-a:hover { background: #f4efe2; }
.tq-a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tq-a[aria-disabled="true"] { cursor: default; }
.tq-a[aria-disabled="true"]:hover { background: #fff; }
.tq-k { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; border: 2px solid var(--ink); border-radius: 50%; background: var(--sun-soft, #fff3c4); }
.tq-t { flex: 1 1 10em; }
.tq-mark { flex: 1 0 100%; font-weight: 800; font-size: .95rem; }
.tq-right { border-width: 4px; background: #e6f4e2; }
.tq-right:hover, .tq-right[aria-disabled="true"]:hover { background: #e6f4e2; }
.tq-wrong { border-style: dashed; background: #fbe9e7; }
.tq-wrong[aria-disabled="true"]:hover { background: #fbe9e7; }
.tq-other { opacity: .75; }
.tq-fb { padding: var(--s3); background: #fffdf6; border: 2px solid var(--ink); border-radius: 12px; }
.tq-fb p { margin: 0 0 var(--s2); }
.tq-fb p:last-child { margin: 0; }
.tq-end { text-align: center; }
.tq-big { font-size: 1.6rem; margin: 0; }
.gm-big .tq-q { font-size: 1.8rem; }
.gm-big .tq-a { font-size: 1.45rem; min-height: 76px; }
.gm-big .tq-k { width: 44px; height: 44px; }
.gm-big .tq-fb { font-size: 1.25rem; }
.gm-big .tq-opts { grid-template-columns: 1fr; }
