/*
 * listen_trivia.css — the trivia card (listen/js/listen_trivia.js): Bible trivia on the home page, sermon trivia on the
 * church listen page. Theme tokens from listener.css (dark and light).
 */
.listen-trivia { display: flex; flex-direction: column; gap: 10px; }
.listen-trivia__q { margin: 0; font-size: 0.9875rem; font-weight: 600; line-height: 1.4; color: var(--listener-text); overflow-wrap: anywhere; }
.listen-trivia__verse {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid var(--listener-accent);
    border-radius: var(--listener-radius-sm);
    background: var(--listener-bg-elevated);
    font-size: var(--listener-font-size-sm);
    font-style: italic;
    line-height: 1.55;
    color: var(--listener-text);
}
.listen-trivia__tr { font-style: normal; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--listener-text-faint); }
.listen-trivia__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.listen-trivia__opt {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: var(--listener-radius-md);
    border: 1px solid var(--listener-border-strong);
    background: var(--listener-bg-elevated);
    color: var(--listener-text);
    font: inherit;
    font-size: var(--listener-font-size-sm);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.listen-trivia__opt:hover:not(:disabled) { border-color: var(--listener-accent); background: var(--listener-accent-subtle); }
.listen-trivia__opt:focus-visible { outline: 2px solid var(--listener-accent); outline-offset: 2px; }
.listen-trivia__opt:disabled { cursor: default; opacity: 0.6; }
.listen-trivia__opt.is-right { opacity: 1; border-color: var(--listener-success); background: rgba(34, 197, 94, 0.14); }
.listen-trivia__opt.is-wrong { opacity: 1; border-color: var(--listener-danger); background: rgba(239, 68, 68, 0.12); }
.listen-trivia__result { margin: 0; font-size: var(--listener-font-size-sm); color: var(--listener-text-muted); }
.listen-trivia__result[hidden] { display: none; }
.listen-trivia__result.is-right { color: var(--listener-success); font-weight: 600; }
[data-bs-theme="light"] .listen-trivia__result.is-right { color: #15803d; }
.listen-trivia__ref { color: var(--listener-accent); font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
a.listen-trivia__ref { cursor: pointer; }
.listen-trivia__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.listen-trivia__actions[hidden] { display: none; }

/* church listen page section */
.listen-trivia-section[hidden] { display: none; }
.listen-trivia-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 18px;
    border-radius: var(--listener-radius-lg);
    background: var(--listener-bg-card);
    border: 1px solid var(--listener-border-strong);
}
.listen-trivia-card .listener-landing-section__title { margin-top: 0; }
.listen-trivia-card__sub { margin: -4px 0 12px; font-size: var(--listener-font-size-sm); color: var(--listener-text-muted); }
.listen-trivia__sep { color: var(--listener-text-faint); }
.listen-trivia__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: var(--listener-font-size-sm);
    font-weight: 600;
    color: var(--listener-accent);
    text-decoration: none;
}
.listen-trivia__link:hover { color: var(--listener-accent); text-decoration: underline; }
.listen-trivia__next {
    min-height: 36px;
    padding: 6px 16px;
    border-radius: var(--listener-radius-full);
    border: 1px solid var(--listener-border-strong);
    background: transparent;
    color: var(--listener-text);
    font: inherit;
    font-size: var(--listener-font-size-xs);
    font-weight: 600;
    cursor: pointer;
}
.listen-trivia__next:hover { border-color: var(--listener-accent); color: var(--listener-accent); }
.listen-trivia__next:focus-visible { outline: 2px solid var(--listener-accent); outline-offset: 2px; }

/* Bible trivia (home): the question's difficulty + the one-line explanation after the answer */
.listen-trivia__level {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: var(--listener-radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--listener-bg-elevated);
    color: var(--listener-text-muted);
    border: 1px solid var(--listener-border);
}
.listen-trivia__level--easy { color: #4ade80; border-color: rgba(34, 197, 94, 0.35); }
.listen-trivia__level--medium { color: var(--listener-accent); border-color: var(--listener-verse-border); }
.listen-trivia__level--hard { color: #f87171; border-color: rgba(239, 68, 68, 0.35); }
[data-bs-theme="light"] .listen-trivia__level--easy { color: #15803d; }
[data-bs-theme="light"] .listen-trivia__level--hard { color: #b91c1c; }
.listen-trivia__explain { margin: -4px 0 0; font-size: var(--listener-font-size-xs); line-height: 1.5; color: var(--listener-text-muted); }
.listen-trivia__explain[hidden] { display: none; }