/* Balderdash Daily — feature styles (loaded only on /balderdash-daily).
   Uses the :root tokens from main.css; dark theme inherits via tokens with
   one explicit override for the answer/wrong highlights. */

.tool-layout--balderdash {
    max-width: 46rem;
    margin: 0 auto;
}

.bd-howto ol {
    padding-left: 1.25rem;
}

.bd-fineprint {
    font-size: var(--fs-4);
    color: var(--color-text-muted);
}

.bd-game {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--bg-surface);
}

.bd-date-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.bd-archive-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bd-archive-form label {
    font-size: var(--fs-4);
    color: var(--color-text-secondary);
}

.bd-archive-links {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    font-size: var(--fs-4);
}

.bd-word {
    margin: 1rem 0 0.25rem;
}

.bd-word__orth {
    font-family: var(--font-heading);
    font-size: var(--fs-1);
    letter-spacing: 0.02em;
}

.bd-word__ipa {
    margin-left: 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--fs-4);
    color: var(--color-text-secondary);
}

.bd-options {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: grid;
    gap: 0.625rem;
}

.bd-option,
.bd-option-btn {
    display: flex;
    gap: 0.625rem;
    align-items: baseline;
    text-align: left;
}

.bd-option {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0;
}

/* Static (no-JS) rendering keeps the padding on the list item. */
.bd-option:not(:has(> .bd-option-btn)) {
    padding: 0.75rem 0.875rem;
}

.bd-option-btn {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
}

.bd-option-btn:hover:not(:disabled),
.bd-option-btn:focus-visible {
    background: var(--color-bg-alt);
}

.bd-option-btn:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
}

.bd-option-btn:disabled {
    cursor: default;
}

.bd-option__label {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.bd-option-btn--answer {
    background: var(--color-success-bg);
    box-shadow: inset 0 0 0 2px var(--color-success);
}

.bd-option-btn--answer .bd-option__gloss::after {
    content: " — the real definition";
    font-weight: 600;
    color: var(--color-success);
}

.bd-option-btn--wrong {
    box-shadow: inset 0 0 0 2px var(--color-error);
}

.bd-option-btn--wrong .bd-option__gloss::after {
    content: " — your pick (decoy)";
    font-weight: 600;
    color: var(--color-error);
}

[data-theme="dark"] .bd-option-btn--answer {
    background: transparent;
}

.bd-result {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.bd-result__headline {
    font-weight: 600;
}

.bd-result__headline--win {
    color: var(--color-success);
}

.bd-result__headline--loss {
    color: var(--color-error);
}

.bd-result__notes,
.bd-result__decoys {
    padding-left: 1.25rem;
    font-size: var(--fs-4);
}

.bd-share-btn {
    margin-top: 0.75rem;
}

.bd-stats {
    margin-top: 1.25rem;
}

.bd-stats__heading {
    font-size: var(--fs-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.bd-stats__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
}

.bd-stats__list dt {
    grid-row: 1;
    font-size: var(--fs-5);
    color: var(--color-text-muted);
}

.bd-stats__list dd {
    grid-row: 2;
    margin: 0;
    font-size: var(--fs-2);
    font-weight: 600;
}

.bd-nojs-reveal {
    margin-top: 1.25rem;
    font-size: var(--fs-4);
}

.bd-noscript-note {
    color: var(--color-text-secondary);
    font-size: var(--fs-4);
}

@media (max-width: 480px) {
    .bd-stats__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bd-stats__list dt:nth-of-type(n+3) {
        grid-row: 3;
    }

    .bd-stats__list dd:nth-of-type(n+3) {
        grid-row: 4;
    }
}