/* Keep the section heading clear of the sticky/fixed nav when jumped to via #scenarios.
   Mobile stacks two stickies (top header 56px + section tabs ~47px); desktop has the page-level nav. */
#scenarios {
    scroll-margin-top: 120px;
}
@media (min-width: 1024px) {
    #scenarios {
        scroll-margin-top: 80px;
    }
}

.prediction-card {
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

/* Right-padding on the title row is only there to clear the absolute
   status badge in the top-right. Apply it only when a badge is showing
   so open cards reclaim the width for longer titles. */
.prediction-card[data-state="my-pick"] .prediction-card__title-row,
.prediction-card[data-state="locked-other"] .prediction-card__title-row,
.prediction-card[data-state="resolved-yes"] .prediction-card__title-row,
.prediction-card[data-state="resolved-no"] .prediction-card__title-row,
.prediction-card[data-state="ambiguous"] .prediction-card__title-row {
    padding-right: 5rem;
}
@media (min-width: 640px) {
    .prediction-card[data-state="my-pick"] .prediction-card__title-row,
    .prediction-card[data-state="locked-other"] .prediction-card__title-row,
    .prediction-card[data-state="resolved-yes"] .prediction-card__title-row,
    .prediction-card[data-state="resolved-no"] .prediction-card__title-row,
    .prediction-card[data-state="ambiguous"] .prediction-card__title-row {
        padding-right: 6rem;
    }
}

/* Only "open" cards (no pick locked, no resolution yet) advertise as pickable. */
.prediction-card:not([data-state]):hover,
.prediction-card[data-state="open"]:hover {
    border-color: rgba(55, 142, 234, 0.55);
    box-shadow: 0 4px 16px -8px rgba(55, 142, 234, 0.35);
}

.prediction-card[data-state="my-pick"] {
    border-color: #378EEA;
    box-shadow: 0 0 0 1px rgba(55, 142, 234, 0.4) inset;
}

.prediction-card[data-state="my-pick"] .prediction-status {
    display: inline-block;
    background: rgba(55, 142, 234, 0.2);
    color: #93c5fd;
}

.prediction-card[data-state="locked-other"] {
    opacity: 0.65;
}

.prediction-card[data-state="locked-other"] .prediction-pick-btn,
.prediction-card[data-state="my-pick"] .prediction-pick-btn,
.prediction-card[data-state="resolved-yes"] .prediction-pick-btn,
.prediction-card[data-state="resolved-no"] .prediction-pick-btn,
.prediction-card[data-state="ambiguous"] .prediction-pick-btn {
    display: none;
}

.prediction-card[data-state="resolved-yes"] {
    border-color: #10b981;
}
.prediction-card[data-state="resolved-yes"] .prediction-status {
    display: inline-block;
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}
.prediction-card[data-state="resolved-yes"] [data-consensus-bar] {
    background: #10b981;
}

.prediction-card[data-state="resolved-no"] {
    opacity: 0.6;
}
.prediction-card[data-state="resolved-no"] .prediction-status {
    display: inline-block;
    background: rgba(107, 114, 128, 0.2);
    color: #d1d5db;
}

.prediction-card[data-state="ambiguous"] {
    border-color: rgba(245, 158, 11, 0.4);
    opacity: 0.85;
}
.prediction-card[data-state="ambiguous"] .prediction-status {
    display: inline-block;
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.prediction-result-banner {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    background: rgba(55, 142, 234, 0.1);
    color: #93c5fd;
    border: 1px solid rgba(55, 142, 234, 0.3);
}
.prediction-result-banner__sub {
    margin-top: 0.25rem;
    color: #94a3b8;
    font-size: 0.7rem;
    line-height: 1.3;
}
.prediction-result-banner__link {
    margin-top: 0.5rem;
    font-size: 0.7rem;
}
.prediction-result-banner__link a {
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.15s ease-out;
}
.prediction-result-banner__link a:hover,
.prediction-result-banner__link a:focus-visible {
    color: inherit;
}
.prediction-result-banner.is-win {
    background: rgba(16, 185, 129, 0.1);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}
.prediction-result-banner.is-loss {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border-color: rgba(107, 114, 128, 0.3);
}