/* ==========================================================
   Brain Pop-Up Design System v1.0
   TABE Campus
========================================================== */

:root{

    --brain-primary:#5B3DF5;
    --brain-secondary:#2F80ED;

    --brain-success:#27AE60;
    --brain-warning:#F2C94C;
    --brain-danger:#EB5757;

    --brain-dark:#1F2937;
    --brain-light:#F8FAFC;

    --brain-radius:18px;

    --brain-shadow:
        0 10px 30px rgba(0,0,0,.18);

    --brain-gradient:
        linear-gradient(135deg,
        #5B3DF5,
        #2F80ED);

}


/* ==========================================================
   Cards
========================================================== */

.brain-card{

    background:#fff;

    border-radius:var(--brain-radius);

    box-shadow:var(--brain-shadow);

    padding:24px;

}


/* ==========================================================
   Headers
========================================================== */

.brain-header{

    background:var(--brain-gradient);

    color:white;

    border-radius:18px 18px 0 0;

    padding:18px;

    text-align:center;

    font-size:28px;

    font-weight:700;

}


/* ==========================================================
   Buttons
========================================================== */

.brain-btn{

    background:var(--brain-gradient);

    color:white;

    border:none;

    border-radius:14px;

    padding:12px 26px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.brain-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.20);

}


/* ==========================================================
   Progress Bar
========================================================== */

.brain-progress{

    width:100%;

    height:14px;

    background:#E8ECF3;

    border-radius:999px;

    overflow:hidden;

}

.brain-progress-fill{

    height:100%;

    width:0;

    background:var(--brain-gradient);

    transition:width .6s ease;

}


/* ==========================================================
   Success
========================================================== */

.brain-success{

    color:var(--brain-success);

    font-weight:bold;

}


/* ==========================================================
   Error
========================================================== */

.brain-error{

    color:var(--brain-danger);

    font-weight:bold;

}


/* ==========================================================
   Level Badge
========================================================== */

.brain-level{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:var(--brain-gradient);

    color:white;

    font-weight:700;

}


/* ==========================================================
   Achievement Badge
========================================================== */

.brain-achievement{

    display:inline-block;

    background:#FFF5D8;

    border:2px solid #F2C94C;

    border-radius:999px;

    padding:8px 18px;

    font-weight:bold;

}


/* ==========================================================
   Mobile
========================================================== */

@media(max-width:768px){

    .brain-card{

        padding:18px;

    }

    .brain-header{

        font-size:22px;

    }

    .brain-btn{

        width:100%;

    }

}
/* ==========================================================
   Brain Pop-Up Overlay
========================================================== */

.brainpopup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
    box-sizing: border-box;

    background: rgba(17, 24, 39, 0.78);
    backdrop-filter: blur(5px);

    animation: brain-overlay-in 0.25s ease-out;
}


/* ==========================================================
   Main Popup
========================================================== */

.brainpopup-modal {
    position: relative;

    width: 440px;
    max-width: 100%;
    max-height: calc(100vh - 32px);

    overflow-y: auto;
    overflow-x: hidden;

    background: #ffffff;
    border-radius: 24px;

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.12);

    font-family: "Segoe UI", Arial, sans-serif;

    animation: brain-popup-in 0.32s cubic-bezier(.2, .8, .2, 1);
}


/* ==========================================================
   Popup Header
========================================================== */

.brainpopup-top {
    position: relative;

    padding: 24px 24px 22px;

    color: #ffffff;
    text-align: center;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, 0.25),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #6d28d9 0%,
            #7c3aed 42%,
            #2563eb 100%
        );

    border-radius: 24px 24px 0 0;
}

.brainpopup-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin: 0 auto 10px;

    font-size: 34px;

    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    box-shadow: 0 8px 22px rgba(30, 41, 59, 0.2);
}

.brainpopup-main-title {
    margin: 0;

    color: #ffffff;

    font-size: 27px;
    font-weight: 800;
    line-height: 1.15;
}

.brainpopup-subtitle {
    margin: 7px 0 0;

    color: rgba(255, 255, 255, 0.9);

    font-size: 14px;
    font-weight: 600;
}


/* ==========================================================
   Popup Content
========================================================== */

.brainpopup-content {
    padding: 25px;
}

.brainpopup-puzzle-title {
    margin: 0 0 12px;

    color: #5b21b6;

    font-size: 19px;
    font-weight: 800;
    text-align: center;
    line-height: 1.3;

    overflow-wrap: anywhere;
}

.brainpopup-question {
    margin-bottom: 22px;
    padding: 17px;

    color: #1f2937;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;

    background: linear-gradient(135deg, #f5f3ff, #eff6ff);

    border: 1px solid #ddd6fe;
    border-radius: 16px;

    overflow-wrap: anywhere;
}


/* ==========================================================
   Answer Buttons
========================================================== */

.brainpopup-answers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
}

.brainanswer {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 54px;

    padding: 11px 14px;

    color: #312e81;
    text-align: left;

    background: #ffffff;

    border: 2px solid #ddd6fe;
    border-radius: 14px;

    cursor: pointer;

    font-family: inherit;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.35;

    box-shadow: 0 4px 12px rgba(91, 61, 245, 0.07);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;

    overflow-wrap: anywhere;
}

.brainanswer:hover:not(:disabled),
.brainanswer:focus-visible:not(:disabled) {
    transform: translateY(-2px);

    color: #4c1d95;

    background: #faf8ff;
    border-color: #7c3aed;

    box-shadow: 0 8px 20px rgba(91, 61, 245, 0.16);

    outline: none;
}

.brainanswer:disabled {
    cursor: default;
    opacity: 0.72;
}

.brainanswer-letter {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-right: 12px;

    color: #ffffff;

    background: linear-gradient(135deg, #7c3aed, #2563eb);
    border-radius: 10px;

    font-size: 15px;
    font-weight: 800;
}

.brainanswer-text {
    flex: 1;
    min-width: 0;

    overflow-wrap: anywhere;
}

.brainanswer.is-correct {
    color: #166534;

    background: #f0fdf4;
    border-color: #22c55e;

    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.15);
}

.brainanswer.is-wrong {
    color: #991b1b;

    background: #fef2f2;
    border-color: #ef4444;

    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.13);
}

.brainanswer.is-muted {
    opacity: 0.5;
}


/* ==========================================================
   Feedback
========================================================== */

.brainpopup-feedback {
    display: none;

    margin-top: 19px;
    padding: 16px;

    text-align: center;

    border-radius: 15px;

    animation: brain-feedback-in 0.25s ease-out;
}

.brainpopup-feedback.is-visible {
    display: block;
}

.brainpopup-feedback.is-success {
    color: #166534;

    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border: 1px solid #86efac;
}

.brainpopup-feedback.is-error {
    color: #991b1b;

    background: linear-gradient(135deg, #fff1f2, #fef2f2);
    border: 1px solid #fca5a5;
}

.brainpopup-feedback-title {
    margin: 0;

    font-size: 21px;
    font-weight: 850;
}

.brainpopup-feedback-points {
    margin-top: 5px;

    font-size: 17px;
    font-weight: 750;
}

.brainpopup-feedback-note {
    margin-top: 5px;

    font-size: 14px;
    font-weight: 600;
}


/* ==========================================================
   Loading / Saving Indicator
========================================================== */

.brainpopup-saving {
    display: none;

    margin-top: 14px;

    color: #6b7280;

    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.brainpopup-saving.is-visible {
    display: block;
}


/* ==========================================================
   Animations
========================================================== */

@keyframes brain-overlay-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes brain-popup-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes brain-feedback-in {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width: 520px) {
    .brainpopup-overlay {
        align-items: center;
        padding: 10px;
    }

    .brainpopup-modal {
        max-height: calc(100vh - 20px);
        border-radius: 20px;
    }

    .brainpopup-top {
        padding: 19px 16px 17px;
        border-radius: 20px 20px 0 0;
    }

    .brainpopup-icon {
        width: 52px;
        height: 52px;

        margin-bottom: 8px;

        font-size: 28px;
    }

    .brainpopup-main-title {
        font-size: 23px;
    }

    .brainpopup-content {
        padding: 18px 15px 19px;
    }

    .brainpopup-puzzle-title {
        font-size: 17px;
    }

    .brainpopup-question {
        margin-bottom: 16px;
        padding: 14px 11px;

        font-size: 17px;
    }

    .brainanswer {
        min-height: 48px;

        padding: 9px 10px;

        font-size: 15px;
    }

    .brainanswer-letter {
        width: 30px;
        height: 30px;

        margin-right: 9px;

        border-radius: 9px;

        font-size: 14px;
    }

    .brainpopup-feedback {
        margin-top: 15px;
        padding: 13px;
    }

    .brainpopup-feedback-title {
        font-size: 19px;
    }
}


/* Respect reduced-motion accessibility settings. */

@media (prefers-reduced-motion: reduce) {
    .brainpopup-overlay,
    .brainpopup-modal,
    .brainpopup-feedback,
    .brainanswer {
        animation: none;
        transition: none;
    }
}
/* ==========================================================
   TAB Brain Mania – Playful Premium Theme
   ========================================================== */

/* Warmer overlay */
.brainpopup-overlay {
    background:
        radial-gradient(
            circle at top,
            rgba(124, 58, 237, 0.22),
            transparent 42%
        ),
        rgba(22, 12, 38, 0.82);

    backdrop-filter: blur(7px);
}

/* Main game card */
.brainpopup-modal {
    width: 500px;

    background: #fffafc;

    border: 3px solid rgba(255, 255, 255, 0.75);
    border-radius: 28px;

    box-shadow:
        0 30px 80px rgba(36, 13, 64, 0.46),
        0 0 35px rgba(236, 72, 153, 0.18);
}

/* TAB Brain Mania header */
.brainpopup-top {
    padding: 25px 24px 23px;

    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(255, 255, 255, 0.35),
            transparent 25%
        ),
        radial-gradient(
            circle at 12% 85%,
            rgba(255, 209, 102, 0.28),
            transparent 32%
        ),
        linear-gradient(
            125deg,
            #5b21b6 0%,
            #9333ea 30%,
            #db2777 62%,
            #f97316 100%
        );

    border-radius: 25px 25px 0 0;
}

/* Brain logo */
.brainpopup-icon {
    width: 68px;
    height: 68px;

    margin-bottom: 10px;

    font-size: 38px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.34),
            rgba(255, 255, 255, 0.13)
        );

    border: 2px solid rgba(255, 255, 255, 0.48);

    box-shadow:
        0 10px 25px rgba(76, 29, 149, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);

    transform: rotate(-3deg);
}

/* Main title */
.brainpopup-main-title {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.5px;

    text-shadow: 0 3px 12px rgba(76, 29, 149, 0.32);
}

/* Subtitle */
.brainpopup-subtitle {
    display: inline-block;

    margin-top: 9px;
    padding: 5px 13px;

    color: #ffffff;

    background: rgba(55, 18, 93, 0.25);

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;

    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0.2px;
}

/* Content */
.brainpopup-content {
    padding: 24px;
}

/* Puzzle title */
.brainpopup-puzzle-title {
    margin-bottom: 10px;

    color: #7e22ce;

    font-size: 20px;
    font-weight: 900;
}

/* Question card */
.brainpopup-question {
    margin-bottom: 18px;
    padding: 18px 16px;

    color: #32164f;

    background:
        radial-gradient(
            circle at top right,
            rgba(251, 146, 60, 0.13),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #faf5ff,
            #fff1f7
        );

    border: 2px solid #e9d5ff;
    border-radius: 18px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 18px rgba(126, 34, 206, 0.08);
}

/* 2 x 2 answer grid */
.brainpopup-answers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Shared answer tile style */
.brainanswer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 92px;
    padding: 12px 10px;

    color: #ffffff;
    text-align: center;

    border: 0;
    border-radius: 17px;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 8px 18px rgba(31, 41, 55, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

/* Four game colors */
.brainanswer:nth-child(1) {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.brainanswer:nth-child(2) {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.brainanswer:nth-child(3) {
    background: linear-gradient(135deg, #ea580c, #f97316);
}

.brainanswer:nth-child(4) {
    background: linear-gradient(135deg, #db2777, #ef4444);
}

/* Hover and keyboard focus */
.brainanswer:hover:not(:disabled),
.brainanswer:focus-visible:not(:disabled) {
    color: #ffffff;

    transform: translateY(-3px) scale(1.015);

    border-color: transparent;

    filter: brightness(1.07);

    outline: 2px solid #FFD54A;
    outline-offset: -6px;

    box-shadow:
        0 0 0 3px rgba(255,213,74,.35),
        0 14px 25px rgba(31,41,55,.25),
        inset 0 1px 0 rgba(255,255,255,.35);
}

/* A, B, C and D circles */
.brainanswer-letter {
    width: 32px;
    height: 32px;

    margin: 0 0 7px;

    color: #3b175d;

    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;

    box-shadow: 0 3px 9px rgba(31, 41, 55, 0.18);

    font-size: 14px;
    font-weight: 900;
}

/* Answer text */
.brainanswer-text {
    flex: none;

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

/* Results remain clearly visible */
.brainanswer.is-correct {
    color: #ffffff;

    background: linear-gradient(135deg, #15803d, #22c55e);
    border: 3px solid #bbf7d0;

    opacity: 1;
    filter: none;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.18),
        0 12px 24px rgba(22, 163, 74, 0.28);
}

.brainanswer.is-wrong {
    color: #ffffff;

    background: linear-gradient(135deg, #b91c1c, #ef4444);
    border: 3px solid #fecaca;

    opacity: 1;
    filter: none;
}

.brainanswer.is-muted {
    opacity: 0.35;
    filter: grayscale(0.35);
}

/* Keep answer text white after checking */
.brainanswer.is-correct .brainanswer-text,
.brainanswer.is-wrong .brainanswer-text {
    color: #ffffff;
}

/* Mobile */
@media (max-width: 520px) {
    .brainpopup-modal {
        width: 100%;
        border-radius: 18px;
    }

    .brainpopup-top {
        padding: 18px 14px 16px;
        border-radius: 19px 19px 0 0;
    }

    .brainpopup-icon {
        width: 50px;
        height: 50px;

        font-size: 28px;
    }

    .brainpopup-main-title {
        font-size: 24px;
    }

    .brainpopup-subtitle {
        margin-top: 6px;
        padding: 4px 10px;

        font-size: 12px;
    }

    .brainpopup-content {
        padding: 15px 12px 17px;
    }

    .brainpopup-question {
        padding: 13px 10px;

        font-size: 16px;
    }

    .brainpopup-answers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .brainanswer {
        min-height: 78px;
        padding: 9px 6px;

        border-radius: 13px;
    }

    .brainanswer-letter {
        width: 27px;
        height: 27px;

        margin-bottom: 5px;

        font-size: 12px;
    }

    .brainanswer-text {
        font-size: 13px;
        line-height: 1.18;
    }
}
/* ==========================================================
   TAB Brain Mania – Final Answer Button Fix
   ========================================================== */

.brainpopup-modal button.brainanswer {
    color: #ffffff !important;
    border: 0 !important;
    background-image: none !important;
}

/* A – Blue */
.brainpopup-modal button.brainanswer:nth-child(1),
.brainpopup-modal button.brainanswer:nth-child(1):hover,
.brainpopup-modal button.brainanswer:nth-child(1):focus {
    background: linear-gradient(135deg, #2563eb, #60a5fa) !important;
}

/* B – Green */
.brainpopup-modal button.brainanswer:nth-child(2),
.brainpopup-modal button.brainanswer:nth-child(2):hover,
.brainpopup-modal button.brainanswer:nth-child(2):focus {
    background: linear-gradient(135deg, #16a34a, #4ade80) !important;
}

/* C – Orange */
.brainpopup-modal button.brainanswer:nth-child(3),
.brainpopup-modal button.brainanswer:nth-child(3):hover,
.brainpopup-modal button.brainanswer:nth-child(3):focus {
    background: linear-gradient(135deg, #ea580c, #fb923c) !important;
}

/* D – Red/pink */
.brainpopup-modal button.brainanswer:nth-child(4),
.brainpopup-modal button.brainanswer:nth-child(4):hover,
.brainpopup-modal button.brainanswer:nth-child(4):focus {
    background: linear-gradient(135deg, #db2777, #f43f5e) !important;
}

/* Hover: keep the original color */
.brainpopup-modal button.brainanswer:hover:not(:disabled),
.brainpopup-modal button.brainanswer:focus-visible:not(:disabled) {
    color: #ffffff !important;

    transform: translateY(-3px) scale(1.02);

    border: 0 !important;

    filter: brightness(1.08);

    box-shadow:
        0 14px 25px rgba(31, 41, 55, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);

    outline: 3px solid rgba(255, 255, 255, 0.75);
    outline-offset: -6px;
}

/* Answer text always white */
.brainpopup-modal .brainanswer-text {
    color: #ffffff !important;
}

/* A, B, C and D circles */
.brainpopup-modal .brainanswer-letter {
    color: #42145f !important;

    background: rgba(255, 255, 255, 0.94) !important;
    border: 0 !important;
}

/* Disabled buttons must retain their game color */
.brainpopup-modal button.brainanswer:disabled {
    color: #ffffff !important;
}

/* Correct answer */
.brainpopup-modal button.brainanswer.is-correct {
    background: linear-gradient(135deg, #15803d, #22c55e) !important;
    border: 3px solid #bbf7d0 !important;
    opacity: 1 !important;
}

/* Selected wrong answer */
.brainpopup-modal button.brainanswer.is-wrong {
    background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
    border: 3px solid #fecaca !important;
    opacity: 1 !important;
}

/* Other answers after selection */
.brainpopup-modal button.brainanswer.is-muted {
    opacity: 0.35 !important;
}
/* ==========================================================
   TAB Brain Mania – Header Badges
   ========================================================== */

.brainpopup-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;

    margin-top: 12px;
}

.brainpopup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 10px;

    color: #ffffff;

    background: rgba(49, 15, 83, 0.24);

    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 10px rgba(49, 15, 83, 0.12);

    backdrop-filter: blur(4px);
}

.brainpopup-badge-difficulty {
    background: rgba(22, 163, 74, 0.33);
}

.brainpopup-badge-level {
    background: rgba(91, 33, 182, 0.34);
}

.brainpopup-badge-reward {
    background: rgba(234, 88, 12, 0.36);
}

@media (max-width: 520px) {
    .brainpopup-badges {
        gap: 5px;
        margin-top: 9px;
    }

    .brainpopup-badge {
        padding: 5px 8px;
        font-size: 10px;
    }
}
/* ==========================================================
   TAB Brain Mania – Final Focus Ring Override
   ========================================================== */

.brainpopup-modal button.brainanswer:focus,
.brainpopup-modal button.brainanswer:focus-visible,
.brainpopup-modal button.brainanswer:hover:not(:disabled) {
    outline: 2px solid #FFD54A !important;
    outline-offset: -6px !important;

    box-shadow:
        0 0 0 3px rgba(255, 213, 74, 0.35),
        0 14px 25px rgba(31, 41, 55, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
/* ==========================================================
   TAB Brain Mania – Timer Layout Fix
   ========================================================== */

.brainpopup-timer {
    display: block;

    width: calc(100% - 28px);
    max-width: 390px;

    margin: 11px auto 0;
    padding: 9px 11px 10px;

    background: rgba(48, 15, 82, 0.24);

    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 13px;

    box-sizing: border-box;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 5px 14px rgba(48, 15, 82, 0.14);
}

.brainpopup-timer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-bottom: 7px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

#brainpopup-timer-seconds {
    flex: 0 0 auto;

    min-width: 48px;

    color: #ffffff;
    text-align: right;
}

.brainpopup-timer-track {
    display: block;

    width: 100%;
    height: 11px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.23);

    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;

    box-sizing: border-box;

    box-shadow:
        inset 0 2px 4px rgba(48, 15, 82, 0.18);
}

.brainpopup-timer-fill {
    display: block;

    width: 100%;
    height: 100%;

    background: linear-gradient(
        90deg,
        #16a34a,
        #4ade80
    );

    border-radius: inherit;

    box-shadow:
        0 0 10px rgba(74, 222, 128, 0.48);
}

@media (max-width: 520px) {
    .brainpopup-timer {
        width: calc(100% - 16px);

        margin-top: 9px;
        padding: 7px 9px 8px;
    }

    .brainpopup-timer-heading {
        margin-bottom: 5px;

        font-size: 10px;
    }

    .brainpopup-timer-track {
        height: 9px;
    }
}
/* ==========================================================
   TAB Brain Mania – Timer Colour States
   ========================================================== */

/* Green: more than 30 seconds */
.brainpopup-modal .brainpopup-timer-fill {
    background: linear-gradient(
        90deg,
        #16a34a,
        #4ade80
    ) !important;

    box-shadow:
        0 0 10px rgba(74, 222, 128, 0.48) !important;

    transition:
        width 1s linear,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

/* Yellow: 30 seconds or less */
.brainpopup-modal .brainpopup-timer-fill.is-warning {
    background: linear-gradient(
        90deg,
        #eab308,
        #fde047
    ) !important;

    box-shadow:
        0 0 12px rgba(253, 224, 71, 0.58) !important;
}

/* Red: 10 seconds or less */
.brainpopup-modal .brainpopup-timer-fill.is-danger {
    background: linear-gradient(
        90deg,
        #dc2626,
        #fb7185
    ) !important;

    box-shadow:
        0 0 14px rgba(251, 113, 133, 0.68) !important;
}

/* Timer text colours */
.brainpopup-modal #brainpopup-timer-seconds.is-warning {
    color: #fde047 !important;
}

.brainpopup-modal #brainpopup-timer-seconds.is-danger {
    color: #ffffff !important;
    transform: scale(1.1);
}

/* Subtle pulse during the final 10 seconds */
.brainpopup-modal .brainpopup-timer-fill.is-pulsing {
    animation: brainmania-timer-pulse 0.75s ease-in-out infinite;
}

@keyframes brainmania-timer-pulse {
    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.45);
    }
}
/* ==========================================================
   TAB Brain Mania – XP Result Panel
   ========================================================== */

.brainpopup-result-panel {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(126, 34, 206, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(245, 243, 255, 0.98),
            rgba(255, 241, 242, 0.98)
        );
    box-shadow:
        0 12px 28px rgba(76, 29, 149, 0.12);
    text-align: center;
}

.brainpopup-result-panel[hidden] {
    display: none;
}

.brainpopup-result-title {
    margin-bottom: 7px;
    color: #6d28d9;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.25;
}

.brainpopup-points-earned {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #f97316
        );
    color: #ffffff;
    box-shadow:
        0 7px 15px rgba(249, 115, 22, 0.25);
    font-size: 14px;
    font-weight: 900;
}

.brainpopup-xp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: #4c1d95;
    font-size: 13px;
    font-weight: 800;
}

.brainpopup-xp-track {
    width: 100%;
    height: 13px;
    overflow: hidden;
    border: 2px solid rgba(109, 40, 217, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow:
        inset 0 2px 5px rgba(76, 29, 149, 0.1);
}

.brainpopup-xp-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #ec4899,
            #f97316
        );
    box-shadow:
        0 0 12px rgba(236, 72, 153, 0.35);
    transition: width 0.8s ease;
}

.brainpopup-xp-message {
    margin-top: 8px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 520px) {
    .brainpopup-result-panel {
        margin-top: 12px;
        padding: 13px;
        border-radius: 15px;
    }

    .brainpopup-result-title {
        font-size: 17px;
    }

    .brainpopup-points-earned {
        margin-bottom: 11px;
        font-size: 12px;
    }

    .brainpopup-xp-header {
        font-size: 11px;
    }

    .brainpopup-xp-track {
        height: 11px;
    }

    .brainpopup-xp-message {
        font-size: 11px;
    }
}
/* ==========================================================
   TAB Brain Mania – Viewport Safety
   Keeps the full popup usable on mobile, tablet and laptop
   ========================================================== */

#brainpopup-overlay {
    overflow-y: auto;
    align-items: flex-start !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.brainpopup-modal {
    width: min(470px, calc(100vw - 24px));
    max-height: calc(100vh - 40px);
    margin: auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 520px) {
    #brainpopup-overlay {
        padding: 8px !important;
    }

    .brainpopup-modal {
        width: 100%;
        max-height: calc(100vh - 16px);
        border-radius: 22px;
    }

    .brainpopup-content {
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 14px;
    }
}

@media (max-height: 760px) {
    .brainpopup-modal {
        max-height: calc(100vh - 12px);
    }

    .brainpopup-top {
        padding-top: 16px;
        padding-bottom: 14px;
    }

    .brainpopup-content {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .brainpopup-result-panel {
        margin-top: 10px;
        padding: 12px;
    }
}
/* ==========================================================
   LEVEL UP
   ========================================================== */

.brainpopup-levelup-star{
    font-size:24px;
    margin-bottom:4px;
    animation:brainpopupLevelGlow 1s infinite alternate;
}

.brainpopup-levelup-title{
    font-size:24px;
    font-weight:900;
    color:#F59E0B;
    letter-spacing:2px;
    text-shadow:
        0 0 10px rgba(245,158,11,.35);
}

.brainpopup-levelup-text{
    margin-top:6px;
    font-size:16px;
    font-weight:700;
    color:#6D28D9;
}

@keyframes brainpopupLevelGlow{

    from{
        transform:scale(1);
        opacity:.9;
    }

    to{
        transform:scale(1.08);
        opacity:1;
    }

}
/* Prevent hover/focus effects after an activity has finished */

#brainpopup-overlay button:hover,
#brainpopup-overlay input:hover,
#brainpopup-overlay textarea:hover,
#brainpopup-overlay select:hover {
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    outline: none !important;
}

#brainpopup-overlay button:disabled:hover,
#brainpopup-overlay input:disabled:hover,
#brainpopup-overlay textarea:disabled:hover,
#brainpopup-overlay select:disabled:hover {
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    outline: none !important;
}


/* ==========================================================
   Brain Mania Hub, Achievement Gallery and Hall of Fame
   ========================================================== */

.brainmania-hub {
    width: min(1050px, calc(100% - 24px));
    margin: 0 auto 40px;
    font-family: "Segoe UI", Arial, sans-serif;
}

.brainmania-hero,
.brainmania-page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 22px;
    border-radius: 24px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(255,255,255,.30),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            #6d28d9 0%,
            #a21caf 36%,
            #e11d75 68%,
            #f97316 100%
        );
    box-shadow: 0 18px 45px rgba(76,29,149,.23);
}

.brainmania-hero-icon,
.brainmania-page-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 22px;
    background: rgba(255,255,255,.18);
    font-size: 32px;
}

.brainmania-eyebrow {
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.brainmania-hero h1,
.brainmania-page-header h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(27px, 4.4vw, 36px);
    font-weight: 900;
    line-height: 1.08;
}

.brainmania-hero p,
.brainmania-page-header p {
    max-width: 700px;
    margin: 5px 0 0;
    color: rgba(255,255,255,.93);
    font-size: 16px;
    font-weight: 650;
}

.brainmania-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.brainmania-stat-card {
    padding: 18px 14px;
    border: 1px solid #ede9fe;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 9px 24px rgba(76,29,149,.09);
    text-align: center;
}

.brainmania-stat-card span {
    display: block;
    font-size: 24px;
}

.brainmania-stat-card strong {
    display: block;
    margin-top: 4px;
    color: #4c1d95;
    font-size: 28px;
    font-weight: 900;
}

.brainmania-stat-card small {
    display: block;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
}

.brainmania-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.brainmania-link-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 105px;
    padding: 18px;
    border: 2px solid transparent;
    border-radius: 20px;
    color: #2e1065;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(76,29,149,.10);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.brainmania-link-card:hover {
    color: #2e1065;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(76,29,149,.17);
}

.brainmania-link-card.is-gold {
    background: linear-gradient(135deg,#fff7d6,#ffedd5);
    border-color: #facc15;
}

.brainmania-link-card.is-purple {
    background: linear-gradient(135deg,#f5f3ff,#fae8ff);
    border-color: #c084fc;
}

.brainmania-link-card.is-blue {
    background: linear-gradient(135deg,#eff6ff,#ecfeff);
    border-color: #60a5fa;
}

.brainmania-link-card.is-pink {
    background: linear-gradient(135deg,#fdf2f8,#fff1f2);
    border-color: #f472b6;
}

.brainmania-link-card.is-orange {
    background: linear-gradient(135deg,#fff7ed,#ffedd5);
    border-color: #fb923c;
}

.brainmania-link-card.is-green {
    background: linear-gradient(135deg,#f0fdf4,#ecfdf5);
    border-color: #4ade80;
}

.brainmania-link-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 17px;
    background: rgba(255,255,255,.78);
    font-size: 29px;
    box-shadow: 0 6px 16px rgba(31,41,55,.10);
}

.brainmania-link-card strong,
.brainmania-link-card small {
    display: block;
}

.brainmania-link-card strong {
    font-size: 19px;
    font-weight: 900;
}

.brainmania-link-card small {
    margin-top: 4px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
}

.brainmania-system-card {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
}

.brainmania-system-card h2 {
    margin: 0 0 10px;
    color: #4c1d95;
    font-size: 19px;
    font-weight: 900;
}

.brainmania-system-card div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: #4b5563;
    font-weight: 750;
}

.brainmania-page-actions {
    margin-bottom: 12px;
}

.brainmania-page-actions a {
    color: #6d28d9;
    font-weight: 800;
}

.brainmania-achievement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.brainmania-achievement-card {
    position: relative;
    min-height: 245px;
    padding: 22px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(31,41,55,.09);
    text-align: center;
}

.brainmania-achievement-card.is-unlocked {
    border-color: #facc15;
    background:
        radial-gradient(
            circle at top right,
            rgba(250,204,21,.24),
            transparent 40%
        ),
        linear-gradient(135deg,#fffbeb,#fff7ed);
}

.brainmania-achievement-card.is-locked {
    filter: grayscale(.88);
    opacity: .64;
}

.brainmania-achievement-icon {
    font-size: 52px;
    line-height: 1;
}

.brainmania-achievement-state {
    display: inline-block;
    margin-top: 13px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.brainmania-achievement-card.is-unlocked
.brainmania-achievement-state {
    background: #fef3c7;
    color: #92400e;
}

.brainmania-achievement-card h2 {
    margin: 12px 0 7px;
    color: #3b0764;
    font-size: 20px;
    font-weight: 900;
}

.brainmania-achievement-card p {
    min-height: 44px;
    margin: 0;
    color: #6b7280;
    font-weight: 650;
}

.brainmania-achievement-card small {
    display: block;
    margin-top: 14px;
    color: #7c3aed;
    font-weight: 800;
}

.brainmania-leaderboard {
    display: grid;
    gap: 11px;
    margin-top: 20px;
}

.brainmania-leader-row {
    display: grid;
    grid-template-columns: 62px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 7px 20px rgba(31,41,55,.07);
}

.brainmania-leader-row.is-podium {
    border-color: #fbbf24;
    background: linear-gradient(135deg,#fffbeb,#fff7ed);
}

.brainmania-leader-position {
    font-size: 25px;
    font-weight: 900;
    text-align: center;
}

.brainmania-leader-person strong,
.brainmania-leader-person small {
    display: block;
}

.brainmania-leader-person strong {
    color: #3b0764;
    font-size: 17px;
    font-weight: 900;
}

.brainmania-leader-person small {
    margin-top: 3px;
    color: #6b7280;
    font-weight: 700;
}

.brainmania-leader-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.brainmania-leader-metrics span {
    padding: 6px 9px;
    border-radius: 999px;
    background: #f5f3ff;
    color: #4c1d95;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.brainmania-empty-state {
    margin-top: 20px;
    padding: 30px;
    border: 2px dashed #c4b5fd;
    border-radius: 20px;
    color: #6d28d9;
    background: #faf5ff;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 760px) {
    .brainmania-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brainmania-link-grid,
    .brainmania-achievement-grid {
        grid-template-columns: 1fr;
    }

    .brainmania-leader-row {
        grid-template-columns: 48px minmax(0,1fr);
    }

    .brainmania-leader-metrics {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 62px;
    }
}

@media (max-width: 520px) {
    .brainmania-hub {
        width: calc(100% - 16px);
    }

    .brainmania-hero,
    .brainmania-page-header {
        align-items: flex-start;
        gap: 11px;
        padding: 15px 13px;
        border-radius: 20px;
    }

    .brainmania-hero-icon,
    .brainmania-page-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 24px;
    }

    .brainmania-hero h1,
    .brainmania-page-header h1 {
        font-size: 23px;
    }

    .brainmania-hero p,
    .brainmania-page-header p {
        font-size: 13px;
    }

    .brainmania-stat-card {
        padding: 14px 9px;
    }

    .brainmania-stat-card strong {
        font-size: 23px;
    }

    .brainmania-link-card {
        min-height: 90px;
        padding: 14px;
    }

    .brainmania-link-icon {
        width: 48px;
        height: 48px;
        font-size: 25px;
    }

    .brainmania-link-card strong {
        font-size: 17px;
    }

    .brainmania-achievement-card {
        min-height: 220px;
    }

    .brainmania-leader-row {
        padding: 13px 11px;
    }

    .brainmania-leader-metrics {
        padding-left: 0;
    }
}


/* ==========================================================
   Brain Mania Dynamic Player Card
   ========================================================== */

.brainmania-player-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.brainmania-player-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.brainmania-player-welcome {
    margin-bottom: 2px;
    color: rgba(255,255,255,.96);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.2;
}

.brainmania-player-hero h1 {
    font-size: clamp(27px, 4.4vw, 36px);
}

.brainmania-player-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 8px;
}

.brainmania-player-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.29);
    border-radius: 999px;
    color: #ffffff;
    background: rgba(67,20,91,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 4px 12px rgba(67,20,91,.11);
    backdrop-filter: blur(4px);
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.brainmania-level-art {
    position: absolute;
    right: 22px;
    top: 50%;
    z-index: 1;
    color: #ffffff;
    font-size: clamp(82px, 11vw, 132px);
    line-height: 1;
    opacity: .15;
    pointer-events: none;
    transform: translateY(-50%) rotate(-7deg);
    filter:
        grayscale(1)
        brightness(3)
        drop-shadow(0 8px 18px rgba(76,29,149,.18));
    animation:
        brainmania-level-art-in 1.25s
        cubic-bezier(.2,.8,.2,1) both;
}

@keyframes brainmania-level-art-in {
    from {
        opacity: 0;
        transform:
            translateY(-45%)
            translateX(24px)
            rotate(-2deg)
            scale(.88);
    }

    to {
        opacity: .15;
        transform:
            translateY(-50%)
            translateX(0)
            rotate(-7deg)
            scale(1);
    }
}

@media (max-width: 700px) {
    .brainmania-player-copy {
        max-width: calc(100% - 78px);
    }

    .brainmania-level-art {
        right: 8px;
        font-size: 84px;
        opacity: .12;
    }

    .brainmania-player-meta {
        gap: 5px;
        margin-top: 7px;
    }

    .brainmania-player-meta span {
        min-height: 24px;
        padding: 4px 8px;
        font-size: 10px;
    }
}

@media (max-width: 520px) {
    .brainmania-player-welcome {
        font-size: 13px;
    }

    .brainmania-player-hero h1 {
        font-size: 23px;
    }

    .brainmania-level-art {
        right: 2px;
        font-size: 68px;
        opacity: .10;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brainmania-level-art {
        animation: none;
    }
}
/* ==========================================================
   My Progress
========================================================== */

.brainmania-progress-page{

    max-width:1200px;

    margin:0 auto;

    animation:brainProgressFade 1s ease;

}

.brainmania-progress-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:22px;

    margin-top:28px;

}

.brainmania-progress-card{

    background:#ffffff;

    border-radius:22px;

    padding:26px;

    text-align:center;

    position:relative;

    overflow:hidden;

    box-shadow:
        0 14px 35px rgba(0,0,0,.12);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    animation:
        brainCardIn .9s ease forwards;

}

.brainmania-progress-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 22px 45px rgba(0,0,0,.18);

}

.brainmania-progress-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        rgba(124,58,237,.08),
        rgba(37,99,235,.06)
    );

    opacity:0;

    transition:.35s;

}

.brainmania-progress-card:hover::before{

    opacity:1;

}

.brainmania-progress-card h3{

    margin-bottom:18px;

    font-size:22px;

    color:#5b21b6;

}

.brainmania-progress-value{

    font-size:44px;

    font-weight:800;

    color:#111827;

    margin-bottom:10px;

}

.brainmania-progress-card small{

    display:block;

    color:#6b7280;

    font-size:14px;

    line-height:1.5;

}

/* ---------- Animations ---------- */

@keyframes brainProgressFade{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes brainCardIn{

    from{

        opacity:0;

        transform:translateY(28px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ---------- Mobile ---------- */

@media(max-width:768px){

    .brainmania-progress-card{

        padding:20px;

    }

    .brainmania-progress-value{

        font-size:34px;

    }

}
.brainmania-link-card.is-cyan{

    background:linear-gradient(
        135deg,
        #06b6d4,
        #2563eb
    );

    color:#fff;

} 

/* ==========================================================
   TAB Brain Mania Reward Engine v0.9.2
========================================================== */

#brainreward-container[hidden] {
    display: none !important;
}

.brainreward-card {
    box-sizing: border-box;
    width: 100%;
    margin-top: 16px;
    padding: 19px 16px;

    overflow: hidden;

    text-align: center;

    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 20px;

    box-shadow:
        0 14px 30px rgba(76, 29, 149, .16),
        inset 0 1px 0 rgba(255, 255, 255, .9);

    animation:
        brainreward-card-in
        .42s
        cubic-bezier(.2, .85, .25, 1);
}

.brainreward-icon {
    font-size: 38px;
    line-height: 1;
}

.brainreward-title {
    margin-top: 8px;

    font-size: clamp(24px, 7vw, 31px);
    font-weight: 1000;
    line-height: 1.05;
}

.brainreward-points {
    display: inline-block;

    margin-top: 11px;
    padding: 8px 15px;

    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .94);
    border-radius: 999px;

    font-size: 17px;
    font-weight: 1000;
    line-height: 1;

    box-shadow:
        0 7px 16px rgba(76, 29, 149, .10);
}

.brainreward-subtitle {
    margin-top: 9px;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
}

/* Green */
.brainreward-theme-green {
    color: #166534;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, .85),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #dcfce7 0%,
            #ccfbf1 100%
        );
}

/* Purple */
.brainreward-theme-purple {
    color: #6b21a8;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, .85),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #ede9fe 0%,
            #fce7f3 100%
        );
}

/* Orange */
.brainreward-theme-orange {
    color: #9a3412;

    background:
        linear-gradient(
            135deg,
            #ffedd5 0%,
            #fed7aa 100%
        );
}

/* Blue */
.brainreward-theme-blue {
    color: #1e40af;

    background:
        linear-gradient(
            135deg,
            #dbeafe 0%,
            #cffafe 100%
        );
}

/* Pink */
.brainreward-theme-pink {
    color: #9d174d;

    background:
        linear-gradient(
            135deg,
            #fce7f3 0%,
            #ffe4e6 100%
        );
}

/* Gold */
.brainreward-theme-gold {
    color: #854d0e;

    background:
        linear-gradient(
            135deg,
            #fef9c3 0%,
            #fde68a 100%
        );
}

/* Cyan */
.brainreward-theme-cyan {
    color: #155e75;

    background:
        linear-gradient(
            135deg,
            #cffafe 0%,
            #ccfbf1 100%
        );
}

/* Violet */
.brainreward-theme-violet {
    color: #5b21b6;

    background:
        linear-gradient(
            135deg,
            #ede9fe 0%,
            #ddd6fe 100%
        );
}

/* Red */
.brainreward-theme-red {
    color: #991b1b;

    background:
        linear-gradient(
            135deg,
            #fee2e2 0%,
            #fecaca 100%
        );
}

/* Indigo */
.brainreward-theme-indigo {
    color: #3730a3;

    background:
        linear-gradient(
            135deg,
            #e0e7ff 0%,
            #ddd6fe 100%
        );
}

/* Wrong answer */
.brainreward-theme-error {
    color: #991b1b;

    background:
        linear-gradient(
            135deg,
            #fff1f2 0%,
            #fee2e2 100%
        );
}

@keyframes brainreward-card-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.94);
    }

    65% {
        opacity: 1;
        transform: translateY(-2px) scale(1.025);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 520px) {
    .brainreward-card {
        margin-top: 14px;
        padding: 16px 13px;
        border-radius: 18px;
    }

    .brainreward-icon {
        font-size: 34px;
    }

    .brainreward-subtitle {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brainreward-card {
        animation: none !important;
    }
}