/* Reward/account card shown after a solve. */
.engagement-win-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px 10px;
    width: min(100%, 430px);
    margin: 14px auto 12px;
    padding: 14px;
    text-align: left;
    color: var(--text-primary, #f5f5f0);
    background: linear-gradient(145deg, rgba(24, 73, 115, 0.96), rgba(14, 48, 82, 0.96));
    border: 1px solid rgba(74, 222, 128, 0.48);
    border-radius: 14px;
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.05);
}

.engagement-win-card[hidden] { display: none; }

.engagement-win-eyebrow {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #052e16;
    background: #4ade80;
    font-weight: 900;
}

.engagement-win-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.engagement-win-copy strong { font-size: 0.98rem; }
.engagement-win-copy span,
.engagement-win-status {
    color: rgba(245, 245, 240, 0.76);
    font-size: 0.8rem;
    line-height: 1.4;
}

.engagement-win-status {
    grid-column: 2;
    min-height: 1.15em;
}

.engagement-win-status.is-loading { color: #93c5fd; }
.engagement-win-status.is-error { color: #fca5a5; }

.engagement-win-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
}

.engagement-btn {
    flex: 1 1 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}

.engagement-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.engagement-btn:focus-visible { outline: 3px solid rgba(147, 197, 253, 0.72); outline-offset: 2px; }
.engagement-btn-primary { color: #052e16; background: #4ade80; }
.engagement-btn-secondary { color: #f5f5f0; background: rgba(91, 164, 212, 0.15); border-color: rgba(91, 164, 212, 0.5); }
.engagement-btn-google { color: #1f2937; background: #fff; }
.engagement-btn-apple { color: #fff; background: #050505; border-color: rgba(255, 255, 255, 0.25); }

/* A launcher replaces the below-the-SEO leaderboard on constrained layouts. */
.lb-launcher,
.lb-drawer-backdrop,
.lb-drawer-close { display: none; }

@media (max-width: 1539px) {
    .lb-launcher {
        position: fixed;
        right: 14px;
        bottom: max(78px, calc(env(safe-area-inset-bottom) + 70px));
        z-index: 1160;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 44px;
        padding: 9px 14px;
        color: #f5f5f0;
        background: rgba(20, 60, 100, 0.97);
        border: 1px solid rgba(91, 164, 212, 0.7);
        border-radius: 999px;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.38);
        font: inherit;
        font-size: 0.86rem;
        font-weight: 800;
        cursor: pointer;
    }

    .lb-launcher:focus-visible,
    .lb-drawer-close:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }

    .leaderboard-slot {
        position: fixed !important;
        inset: auto 0 0 auto !important;
        z-index: 10001;
        width: min(390px, 94vw) !important;
        max-width: none !important;
        max-height: min(78vh, 720px);
        margin: 0 !important;
        padding: 10px 10px max(10px, env(safe-area-inset-bottom)) !important;
        transform: translateX(105%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.22s ease, opacity 0.18s ease;
    }

    .leaderboard-slot.lb-drawer-open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .leaderboard-slot .lb-panel {
        max-height: min(72vh, 650px);
        border-color: rgba(91, 164, 212, 0.58);
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    }

    .lb-drawer-close {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        padding: 0;
        color: #f5f5f0;
        background: rgba(0, 0, 0, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 50%;
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
        flex: 0 0 32px;
    }

    .lb-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        background: rgba(3, 16, 29, 0.64);
        border: 0;
        backdrop-filter: blur(2px);
        cursor: default;
    }

    .lb-drawer-backdrop[hidden] { display: none; }
    html.lb-drawer-active { overflow: hidden; }
}

@media (max-width: 600px) {
    .engagement-win-card { padding: 12px; }
    .engagement-win-actions { flex-direction: column; }
    .engagement-btn { flex-basis: auto; width: 100%; }
    .lb-launcher { right: 10px; font-size: 0.8rem; }
    .leaderboard-slot { width: 100vw !important; max-height: 82vh; }
}

@media (prefers-reduced-motion: reduce) {
    .leaderboard-slot,
    .engagement-btn { transition: none !important; }
}