/**
 * The Boom Daily Quiz — public styles.
 *
 * Brand palette (used with restraint):
 *   --bdq-amber   #F5A623  primary
 *   --bdq-red     #E8320A  accent
 *   --bdq-dark    #1A1A1A  text / dark surfaces
 *   --bdq-grey    #F4F4F4  soft background
 *   --bdq-green   #27AE60  correct / success
 */

.bdq-wrap {
        --bdq-amber: #f5a623;
        --bdq-amber-dark: #d98c07;
        --bdq-red: #e8320a;
        --bdq-dark: #1a1a1a;
        --bdq-grey: #f4f4f4;
        --bdq-mid: #6b6b6b;
        --bdq-line: #e4e4e4;
        --bdq-white: #ffffff;
        --bdq-green: #27ae60;
        --bdq-green-soft: #e7f7ee;
        --bdq-red-soft: #fdece8;
        --bdq-radius: 16px;
        --bdq-radius-sm: 10px;
        --bdq-shadow: 0 6px 24px rgba(26, 26, 26, 0.08);
        --bdq-shadow-lg: 0 12px 40px rgba(26, 26, 26, 0.14);

        max-width: 900px;
        margin: 0 auto;
        padding: 8px;
        box-sizing: border-box;
        color: var(--bdq-dark);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        line-height: 1.5;
}

.bdq-wrap *,
.bdq-wrap *::before,
.bdq-wrap *::after {
        box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * Card / panel
 * ------------------------------------------------------------------ */
.bdq-card {
        background: var(--bdq-white);
        border: 1px solid var(--bdq-line);
        border-radius: var(--bdq-radius);
        box-shadow: var(--bdq-shadow);
        padding: 24px;
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */
.bdq-header {
        text-align: center;
        margin-bottom: 18px;
}

.bdq-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--bdq-dark);
        color: var(--bdq-white);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 6px 12px;
        border-radius: 999px;
}

.bdq-badge .bdq-badge-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--bdq-amber);
}

.bdq-title {
        font-size: 1.7rem;
        font-weight: 800;
        margin: 12px 0 4px;
        line-height: 1.15;
}

.bdq-title .bdq-boom {
        color: var(--bdq-red);
}

.bdq-date {
        color: var(--bdq-mid);
        font-size: 0.95rem;
        margin: 0;
}

.bdq-special-ribbon {
        display: inline-block;
        margin-top: 10px;
        background: var(--bdq-amber);
        color: var(--bdq-dark);
        font-weight: 700;
        font-size: 0.85rem;
        padding: 4px 14px;
        border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * Progress bar
 * ------------------------------------------------------------------ */
.bdq-progress {
        margin: 18px 0 20px;
}

.bdq-progress-meta {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: 0.85rem;
        color: var(--bdq-mid);
        margin-bottom: 8px;
        font-weight: 600;
}

.bdq-progress-track {
        height: 8px;
        border-radius: 999px;
        background: var(--bdq-grey);
        overflow: hidden;
}

.bdq-progress-fill {
        height: 100%;
        width: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--bdq-amber), var(--bdq-red));
        transition: width 0.4s ease;
}

/* ------------------------------------------------------------------ *
 * Question
 * ------------------------------------------------------------------ */
.bdq-question {
        animation: bdq-fade-in 0.3s ease;
}

.bdq-q-category {
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--bdq-amber-dark);
        background: #fdf3e1;
        padding: 4px 10px;
        border-radius: 999px;
        margin-bottom: 12px;
}

.bdq-q-text {
        font-size: 1.28rem;
        font-weight: 700;
        margin: 0 0 18px;
        line-height: 1.35;
}

.bdq-q-image {
        width: 100%;
        max-height: 320px;
        object-fit: cover;
        border-radius: var(--bdq-radius-sm);
        margin-bottom: 18px;
        border: 1px solid var(--bdq-line);
}

.bdq-q-image-desc {
        background: var(--bdq-grey);
        border: 1px dashed var(--bdq-line);
        border-radius: var(--bdq-radius-sm);
        padding: 16px;
        font-style: italic;
        color: var(--bdq-mid);
        margin-bottom: 18px;
}

/* ------------------------------------------------------------------ *
 * Answer buttons
 * ------------------------------------------------------------------ */
.bdq-answers {
        display: flex;
        flex-direction: column;
        gap: 12px;
}

.bdq-answer {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-height: 56px;
        padding: 14px 18px;
        text-align: left;
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--bdq-dark);
        background: var(--bdq-white);
        border: 2px solid var(--bdq-line);
        border-radius: var(--bdq-radius-sm);
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}

.bdq-answer:hover:not([disabled]) {
        border-color: var(--bdq-amber);
        background: #fffaf1;
}

.bdq-answer:active:not([disabled]) {
        transform: scale(0.99);
}

.bdq-answer .bdq-answer-key {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--bdq-grey);
        color: var(--bdq-dark);
        font-weight: 800;
        font-size: 0.9rem;
        text-transform: uppercase;
        transition: background 0.15s ease, color 0.15s ease;
}

.bdq-answer .bdq-answer-text {
        flex: 1 1 auto;
}

.bdq-answer.is-selected {
        border-color: var(--bdq-amber);
        background: #fff5e4;
}

.bdq-answer.is-selected .bdq-answer-key {
        background: var(--bdq-amber);
        color: var(--bdq-dark);
}

.bdq-answer.is-correct {
        border-color: var(--bdq-green);
        background: var(--bdq-green-soft);
}

.bdq-answer.is-correct .bdq-answer-key {
        background: var(--bdq-green);
        color: var(--bdq-white);
}

.bdq-answer.is-wrong {
        border-color: var(--bdq-red);
        background: var(--bdq-red-soft);
}

.bdq-answer.is-wrong .bdq-answer-key {
        background: var(--bdq-red);
        color: var(--bdq-white);
}

.bdq-answer[disabled] {
        cursor: default;
}

.bdq-answer .bdq-answer-mark {
        margin-left: auto;
        font-weight: 800;
        opacity: 0;
        transition: opacity 0.15s ease;
}

.bdq-answer.is-correct .bdq-answer-mark,
.bdq-answer.is-wrong .bdq-answer-mark {
        opacity: 1;
}

/* Standard (typed) answer */
.bdq-standard-input {
        width: 100%;
        min-height: 56px;
        padding: 14px 18px;
        font-size: 1.02rem;
        border: 2px solid var(--bdq-line);
        border-radius: var(--bdq-radius-sm);
        outline: none;
        transition: border-color 0.15s ease;
}

.bdq-standard-input:focus {
        border-color: var(--bdq-amber);
}

.bdq-reveal-box {
        margin-top: 14px;
        padding: 16px;
        border-radius: var(--bdq-radius-sm);
        background: var(--bdq-green-soft);
        border: 1px solid var(--bdq-green);
        font-weight: 600;
}

.bdq-reveal-box.is-hidden {
        display: none;
}

/* ------------------------------------------------------------------ *
 * Explanation feedback (shown after answering in review)
 * ------------------------------------------------------------------ */
.bdq-explanation {
        margin-top: 14px;
        padding: 14px 16px;
        background: var(--bdq-grey);
        border-left: 4px solid var(--bdq-amber);
        border-radius: 0 var(--bdq-radius-sm) var(--bdq-radius-sm) 0;
        font-size: 0.95rem;
}

.bdq-explanation strong {
        color: var(--bdq-dark);
}

.bdq-explanation a {
        color: var(--bdq-red);
}

/* ------------------------------------------------------------------ *
 * Controls
 * ------------------------------------------------------------------ */
.bdq-controls {
        display: flex;
        gap: 12px;
        margin-top: 22px;
}

.bdq-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 52px;
        padding: 12px 26px;
        font-size: 1.02rem;
        font-weight: 700;
        border: none;
        border-radius: var(--bdq-radius-sm);
        cursor: pointer;
        transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.bdq-btn:active {
        transform: translateY(1px);
}

.bdq-btn-primary {
        background: var(--bdq-amber);
        color: var(--bdq-dark);
        flex: 1 1 auto;
        box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35);
}

.bdq-btn-primary:hover {
        background: var(--bdq-amber-dark);
}

.bdq-btn-primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
}

.bdq-btn-dark {
        background: var(--bdq-dark);
        color: var(--bdq-white);
}

.bdq-btn-dark:hover {
        background: #000;
}

.bdq-btn-ghost {
        background: transparent;
        color: var(--bdq-dark);
        border: 2px solid var(--bdq-line);
}

.bdq-btn-ghost:hover {
        border-color: var(--bdq-dark);
}

/* ------------------------------------------------------------------ *
 * States: loading / message
 * ------------------------------------------------------------------ */
.bdq-loading,
.bdq-message {
        text-align: center;
        padding: 40px 20px;
        color: var(--bdq-mid);
}

.bdq-spinner {
        width: 40px;
        height: 40px;
        margin: 0 auto 16px;
        border: 4px solid var(--bdq-grey);
        border-top-color: var(--bdq-amber);
        border-radius: 50%;
        animation: bdq-spin 0.8s linear infinite;
}

.bdq-already-played {
        text-align: center;
        padding: 30px 20px;
}

.bdq-already-played .bdq-ap-emoji {
        font-size: 3rem;
        display: block;
        margin-bottom: 10px;
}

/* ------------------------------------------------------------------ *
 * Results screen
 * ------------------------------------------------------------------ */
.bdq-results {
        text-align: center;
        position: relative;
        animation: bdq-fade-in 0.4s ease;
}

.bdq-results-score {
        font-size: 5rem;
        font-weight: 900;
        line-height: 1;
        margin: 8px 0 0;
        color: var(--bdq-dark);
}

.bdq-results-score .bdq-score-total {
        font-size: 2.2rem;
        color: var(--bdq-mid);
        font-weight: 700;
}

.bdq-results-fire {
        font-size: 1.6rem;
        letter-spacing: 4px;
        margin: 8px 0;
        min-height: 1.6rem;
}

.bdq-results-label {
        font-size: 1.4rem;
        font-weight: 800;
        margin: 6px 0 4px;
}

.bdq-results-sub {
        color: var(--bdq-mid);
        margin: 0 0 20px;
}

.bdq-results-streak {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #fdf3e1;
        color: var(--bdq-amber-dark);
        font-weight: 700;
        padding: 8px 16px;
        border-radius: 999px;
        margin-bottom: 20px;
}

/* Team / name entry */
.bdq-name-entry {
        margin: 0 auto 20px;
        max-width: 360px;
}

.bdq-name-entry label {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--bdq-mid);
        margin-bottom: 6px;
}

.bdq-name-entry input {
        width: 100%;
        min-height: 48px;
        padding: 12px 16px;
        border: 2px solid var(--bdq-line);
        border-radius: var(--bdq-radius-sm);
        font-size: 1rem;
        outline: none;
        text-align: center;
}

.bdq-name-entry input:focus {
        border-color: var(--bdq-amber);
}

/* ------------------------------------------------------------------ *
 * Share buttons
 * ------------------------------------------------------------------ */
.bdq-share {
        margin-top: 8px;
}

.bdq-share-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--bdq-mid);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 12px;
}

.bdq-share-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
}

.bdq-share-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px;
        padding: 10px 18px;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--bdq-white);
        border: none;
        border-radius: var(--bdq-radius-sm);
        cursor: pointer;
        transition: opacity 0.15s ease, transform 0.08s ease;
}

.bdq-share-btn:hover {
        opacity: 0.9;
}

.bdq-share-btn:active {
        transform: translateY(1px);
}

.bdq-share-btn svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
}

.bdq-share-whatsapp { background: #25d366; }
.bdq-share-facebook { background: #1877f2; }
.bdq-share-x        { background: #000000; }
.bdq-share-linkedin { background: #0a66c2; }
.bdq-share-copy     { background: var(--bdq-mid); }

/* Results answer review */
.bdq-review {
        margin-top: 26px;
        text-align: left;
}

.bdq-review-title {
        font-size: 1.1rem;
        font-weight: 800;
        margin-bottom: 14px;
        text-align: center;
}

.bdq-review-item {
        padding: 16px;
        border: 1px solid var(--bdq-line);
        border-radius: var(--bdq-radius-sm);
        margin-bottom: 12px;
}

.bdq-review-item.is-correct { border-left: 4px solid var(--bdq-green); }
.bdq-review-item.is-wrong { border-left: 4px solid var(--bdq-red); }

.bdq-review-q {
        font-weight: 700;
        margin: 0 0 8px;
}

.bdq-review-a {
        font-size: 0.92rem;
        margin: 4px 0;
}

.bdq-review-a .bdq-tag {
        font-weight: 700;
}

.bdq-review-a.correct .bdq-tag { color: var(--bdq-green); }
.bdq-review-a.wrong .bdq-tag { color: var(--bdq-red); }

.bdq-review-exp {
        font-size: 0.9rem;
        color: var(--bdq-mid);
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px dashed var(--bdq-line);
}

/* ------------------------------------------------------------------ *
 * Player stats cards
 * ------------------------------------------------------------------ */
.bdq-player-stats {
        max-width: 700px;
        margin: 0 auto;
}

.bdq-stat-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
}

.bdq-stat-card {
        background: var(--bdq-white);
        border: 1px solid var(--bdq-line);
        border-radius: var(--bdq-radius-sm);
        padding: 18px 12px;
        text-align: center;
        box-shadow: var(--bdq-shadow);
}

.bdq-stat-value {
        display: block;
        font-size: 2rem;
        font-weight: 900;
        color: var(--bdq-amber-dark);
        line-height: 1;
}

.bdq-stat-label {
        display: block;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--bdq-mid);
        margin-top: 6px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
}

/* ------------------------------------------------------------------ *
 * Archive
 * ------------------------------------------------------------------ */
.bdq-archive {
        max-width: 700px;
        margin: 0 auto;
        padding: 8px;
}

.bdq-archive-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        list-style: none;
        margin: 0;
        padding: 0;
}

.bdq-archive-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 18px;
        background: var(--bdq-white);
        border: 1px solid var(--bdq-line);
        border-radius: var(--bdq-radius-sm);
        text-decoration: none;
        color: var(--bdq-dark);
        transition: border-color 0.15s ease, transform 0.08s ease;
}

.bdq-archive-item:hover {
        border-color: var(--bdq-amber);
        transform: translateX(2px);
}

.bdq-archive-item .bdq-archive-date {
        font-weight: 700;
}

.bdq-archive-item .bdq-archive-meta {
        font-size: 0.85rem;
        color: var(--bdq-mid);
}

.bdq-archive-item .bdq-archive-special {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--bdq-amber-dark);
}

.bdq-archive-cta {
        color: var(--bdq-red);
        font-weight: 700;
}

.bdq-archive-more {
        text-align: center;
        margin-top: 18px;
}

/* ------------------------------------------------------------------ *
 * BOOM confetti overlay
 * ------------------------------------------------------------------ */
.bdq-boom-overlay {
        position: fixed;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 99999;
}

.bdq-boom-flash {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.4);
        font-size: 5rem;
        font-weight: 900;
        color: var(--bdq-red);
        text-shadow: 3px 3px 0 var(--bdq-amber);
        opacity: 0;
        animation: bdq-boom-pop 1.1s ease forwards;
}

.bdq-confetti {
        position: absolute;
        top: -20px;
        width: 10px;
        height: 14px;
        opacity: 0;
        animation: bdq-confetti-fall linear forwards;
}

@keyframes bdq-boom-pop {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); }
        40% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(4deg); }
        70% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes bdq-confetti-fall {
        0% { opacity: 1; transform: translateY(0) rotateZ(0); }
        100% { opacity: 1; transform: translateY(105vh) rotateZ(600deg); }
}

@keyframes bdq-spin {
        to { transform: rotate(360deg); }
}

@keyframes bdq-fade-in {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------ *
 * Utility
 * ------------------------------------------------------------------ */
.bdq-hidden {
        display: none !important;
}

.bdq-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
}

/* ------------------------------------------------------------------ *
 * Mobile
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {
        .bdq-card {
                padding: 18px 16px;
                border-radius: var(--bdq-radius);
        }

        .bdq-title {
                font-size: 1.4rem;
        }

        .bdq-q-text {
                font-size: 1.15rem;
        }

        .bdq-results-score {
                font-size: 4rem;
        }

        .bdq-stat-cards {
                grid-template-columns: repeat(2, 1fr);
        }

        .bdq-controls {
                flex-direction: column;
        }

        .bdq-share-buttons {
                flex-direction: column;
        }

        .bdq-share-btn {
                width: 100%;
        }
}


/* -----------------------------------------------------------------------
 * Ad slots
 * ----------------------------------------------------------------------- */
.bdq-ad-slot {
        width: 100%;
        max-width: 1200px;
        margin: 24px auto;
        text-align: center;
        line-height: 0; /* collapse whitespace gaps around media */
}

.bdq-ad-slot img,
.bdq-ad-slot video {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: 8px;
}

/* Results-specific ad: no top-radius, flush with the review section */
.bdq-ad-results {
        margin: 28px 0 16px;
}

/* -----------------------------------------------------------------------
 * Results streak — make it more prominent (overrides base rule above)
 * ----------------------------------------------------------------------- */
.bdq-results-streak {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #fff8ea;
        color: #b86a00;
        font-size: 1.15rem;
        font-weight: 800;
        padding: 12px 24px;
        border-radius: 999px;
        border: 2px solid #F5A623;
        margin-bottom: 24px;
        box-shadow: 0 2px 8px rgba(245,166,35,0.18);
}