/* =========================================================
ECDS Quiz v3.0 — Game Show Style
All rules use !important to override theme stylesheets
EC Digital Services
========================================================= */

/* SHELL: dark background */
.ecds-quiz-shell .ecds-game-area {
    background: radial-gradient(ellipse at 50% 0%,#2d1b69 0%,#1a0e3d 40%,#0d0820 100%) !important;
    padding: 28px 24px 36px !important;
    min-height: 400px !important;
}

.ecds-quiz-shell .ecds-shell-header {
    background: linear-gradient(135deg,#1e1154 0%,#2d1b69 100%) !important;
    border-bottom: 1px solid #4c2ea0 !important;
}

.ecds-quiz-shell .ecds-game-title   { color: #e8d5ff !important; }
.ecds-quiz-shell .ecds-label        { color: #b39ddb !important; }
.ecds-quiz-shell .ecds-timer-display { color: #ffd700 !important; font-size: 22px !important; }
.ecds-quiz-shell .ecds-diff-btn     { color: #c4b5fd !important; border-color: #4c2ea0 !important; background: transparent !important; }
.ecds-quiz-shell .ecds-diff-btn:hover { background: rgba(255,255,255,.08) !important; }
.ecds-quiz-shell .ecds-diff-btn[data-level="easy"].active   { background: #14532d !important; border-color: #22c55e !important; color: #86efac !important; }
.ecds-quiz-shell .ecds-diff-btn[data-level="medium"].active { background: #451a03 !important; border-color: #f59e0b !important; color: #fcd34d !important; }
.ecds-quiz-shell .ecds-diff-btn[data-level="hard"].active   { background: #450a0a !important; border-color: #ef4444 !important; color: #fca5a5 !important; }
.ecds-quiz-shell .ecds-btn-primary  { background: linear-gradient(135deg,#7c3aed,#4f46e5) !important; border: none !important; box-shadow: 0 4px 15px rgba(124,58,237,.4) !important; color: #fff !important; }
.ecds-quiz-shell .ecds-btn-primary:hover { background: linear-gradient(135deg,#6d28d9,#4338ca) !important; transform: translateY(-1px) !important; }

/* BOARD */
.ecds-quiz-board {
    max-width: 720px !important;
    margin: 0 auto !important;
    color: #f1f5f9 !important;
    font-family: inherit !important;
}

/* OPTIONS GRID — 2 columns */
.ecds-quiz-board .ecds-qz-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
    list-style: none !important;
    padding: 0 !important;
}

@media (max-width: 560px) {
    .ecds-quiz-board .ecds-qz-options {
        grid-template-columns: 1fr !important;
    }
    .ecds-quiz-shell .ecds-game-area {
        padding: 20px 14px 28px !important;
    }
}

/* OPTION BUTTON — reset all theme styles then apply ours */
.ecds-quiz-board .ecds-qz-opt {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 2px solid #2d1f7a !important;
    background: linear-gradient(180deg,#1e145a 0%,#150e45 100%) !important;
    color: #e0d7ff !important;
    cursor: pointer !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    text-align: left !important;
    width: 100% !important;
    min-height: 64px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
    transition: border-color .15s, transform .12s, box-shadow .15s !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    vertical-align: top !important;
}

/* Letter badge */
.ecds-quiz-board .ecds-qz-key {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    min-width: 56px !important;
    align-self: stretch !important;
    background: linear-gradient(180deg,#b8860b 0%,#8b6914 100%) !important;
    border-right: 2px solid rgba(0,0,0,.25) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #fff8e1 !important;
    flex-shrink: 0 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
    font-family: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    line-height: 1 !important;
}

/* Option text */
.ecds-quiz-board .ecds-qz-txt {
    flex: 1 !important;
    padding: 14px 18px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #ddd6fe !important;
    display: block !important;
    font-family: inherit !important;
}

/* Question box */
.ecds-quiz-board .ecds-qz-question {
    font-size: clamp(18px,3vw,26px) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 22px 24px !important;
    margin: 0 0 28px !important;
    background: linear-gradient(180deg,#1a1060 0%,#110b42 100%) !important;
    border: 2px solid #3d2d8a !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 8px 32px rgba(0,0,0,.5) !important;
    font-family: inherit !important;
}

/* Hint */
.ecds-quiz-board .ecds-qz-hint {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    padding: 13px 18px !important;
    font-size: 15px !important;
    color: #c4b5fd !important;
    line-height: 1.5 !important;
    margin-top: 6px !important;
    font-family: inherit !important;
}