.stats-card-icon svg [fill]:not([fill="none"]) {
    fill: currentColor;
}

.stats-card-icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor;
}

/* 12/28/25 Sequence Reasoning Deck - Sequence Container Styles */
.sequence-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 1rem 0;
    padding: 0.5rem;
    transform: none !important;
    zoom: 1 !important;
    scale: 1 !important;
}

/* Prevent any parent scaling from affecting sequence items */
.sequence-container * {
    transform: none !important;
    scale: 1 !important;
}

/* Check and override any parent container scaling */
#sentenceContainer_front .sequence-container,
#sentenceContainer_frontc .sequence-container,
#sentenceContainer_back .sequence-container {
    transform: none !important;
    scale: 1 !important;
}

.card-face .sequence-container,
.card-front .sequence-container,
.card-front2 .sequence-container {
    transform: none !important;
    scale: 1 !important;
}

.sequence-item {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: #333333 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: 80px !important;
    transform: none !important;
    scale: 1 !important;
    overflow: hidden !important;
    position: relative !important;
    border: none !important;
    outline: none !important;
}

/* Prevent any parent from scaling sequence items */
.sequence-container .sequence-item,
#sentenceContainer_front .sequence-item,
#sentenceContainer_frontc .sequence-item,
#sentenceContainer_back .sequence-item,
.card-face .sequence-item,
.card-front .sequence-item,
.card-front2 .sequence-item,
.custom-card .sequence-item {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    transform: scale(1) !important;
}

.sequence-item:hover {
    transform: scale(1.05);
}

/* 12/28/25 Sequence Reasoning: 2-column layout for choice buttons */
/* Override Bootstrap row behavior for sequence cards - match progress bar width (270px) */
#multipleChoiceContainerFront.sequence-choice-layout {
    display: flex !important;
    flex-wrap: wrap !important;
    /* gap overridden by sequence-reasoning.css for sequence cards */
    width: 270px !important;
    max-width: 270px !important;
    margin: 1rem auto !important;
    padding: 0 !important;
    justify-content: space-between !important;
}

#multipleChoiceContainerFront.sequence-choice-layout .choice-btn {
    /* width calculation overridden by sequence-reasoning.css for sequence cards */
    margin-bottom: 0 !important;
}

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

body,
html {
    margin: 0;
    padding: 0;
    /* added 12/16/24 */
    height: 100vh;
    /* overflow: hidden;*/
    /* added 12/16/24 */
    width: 100%;
    /* added 12/16/24 */
    height: 100%;
    /* added 12/16/24 */
    /* Prevent shifting caused by scrollbars */
}

body.mathquestions,
body.levelup,
body.diagnostic,
body.challenge-intro,
body.challenge-review,
body.challenge-invalid {
    /* background:
        linear-gradient(rgba(0, 27, 97, 0.75), rgba(0, 27, 97, 0.75)),
        url('../images/math-formula-chalkboard_blur.jpg') no-repeat center center fixed;
    background-size: cover; */
    background-color: #333333;
}

body.home,
body.performance,
body.leaderboard,
body.profile,
body.today {
    /* background:
        url('../images/math-formula-chalkboard_blur.jpg') no-repeat center center fixed; */
    /* Background without the overlay */
    /* background-size: cover; */
    /* this padding is for the fixed-top nav bar */
    padding-top: 75px;
}

/* All Cards / Explore: extra push so tab row is not cut off by fixed navbar */
body.cards {
    padding-top: 95px;
}

/* All Cards deck tiles: solid background from --deck-tile-accent (set inline on /cards and /cards/explore). No borders; use shadow-sm on the element for soft shadow. Padding on anchor, not tile, to avoid ghost overlay. */
.all-cards-deck-tile {
    background-color: var(--deck-tile-accent, #f8f9fa);
    border-radius: 1rem;
    overflow: hidden;
}
/* Padding on anchor, not tile; prevents ghost overlay. Prevent link from painting a background. */
.all-cards-deck-tile > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent !important;
    background-color: transparent !important;
}
/* Deck tile: square image area (top ~75%), text in bottom 1/4, centered */
.all-cards-deck-tile .deck-tile-image-wrap {
    flex: 0 0 75%;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.all-cards-deck-tile .deck-tile-image-wrap .deck-tile-image-square {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    overflow: hidden;
    border-radius: 0.6rem;
}
.all-cards-deck-tile .deck-tile-image-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.all-cards-deck-tile .deck-tile-text {
    flex: 0 0 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 0;
}
.all-cards-deck-tile .deck-tile-text .deck-tile-title {
    font-weight: bold;
}
/* Card Tile Badge: top-left pill; below overflow menu (top-right) in stacking order */
.all-cards-deck-tile .deck-tile-badge {
    position: absolute;
    top: 9px;
    left: 8px;
    z-index: 4;
    max-width: calc(100% - 44px);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
/* Pin overflow menu trigger to top-right; nudged up to align with deck-tile-badge */
.all-cards-deck-tile .deck-overflow-trigger {
    left: auto;
    right: 5px;
    top: 3px;
    z-index: 8;
}

/* All Cards main: horizontal scroll sections — desktop shows 4 tiles, no cut-off; buttons outside content */
.cards-scroll-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.cards-scroll-viewport {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    gap: 12px;
    padding-bottom: 8px;
}
.cards-scroll-container { max-width: 800px; }
@media (min-width: 768px) {
    body.cards main .container {
        padding-left: 44px;
        padding-right: 44px;
    }
    body.cards .container-marketing.cards-scroll-container {
        max-width: 756px; /* content width; centered via margin auto; scroll buttons sit in main's padding */
        width: 100%;
        margin-left: auto;
        margin-right: 20px; /* compensate for scrollbar / visual center so block appears centered under nav */
        padding-left: 0 !important; /* override px-2 so full 756px for 4 category tiles */
        padding-right: 0 !important;
    }
    body.cards .cards-scroll-wrapper {
        margin-left: -44px;
        margin-right: -44px;
        width: calc(100% + 88px);
    }
    body.cards .cards-scroll-wrapper .cards-scroll-viewport {
        flex: 0 0 auto;
        width: 756px; /* 4 tiles: 4*180 + 3*12 */
        margin-left: 44px; /* align left edge with section title and category row; buttons sit in wrapper's negative-margin area */
    }
    body.cards .cards-scroll-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        z-index: 2;
        background: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(0, 0, 0, 0.12);
    }
    body.cards .cards-scroll-btn:hover {
        background: rgba(255, 255, 255, 0.92);
    }
    body.cards .cards-scroll-btn.cards-scroll-left {
        left: 22px; /* center of 44px button on viewport left edge (44 - 22 = 22) so half-in half-out */
    }
    body.cards .cards-scroll-btn.cards-scroll-right {
        right: 22px; /* center of button on viewport right edge so half-in half-out */
    }
    body.cards .cards-scroll-btn i {
        font-weight: bold;
        -webkit-text-stroke: 0.6px currentColor;
    }
    body.cards .cards-scroll-btn.cards-scroll-btn-visible {
        display: inline-flex !important; /* only show when applicable, and only on desktop */
    }
}
@media (max-width: 767.98px) {
    .cards-scroll-viewport {
        overflow-x: auto; /* peek on mobile */
    }
    body.cards .cards-scroll-btn,
    body.cards .cards-scroll-btn.cards-scroll-btn-visible {
        display: none !important; /* hide on mobile; visible rule only in desktop media query */
    }
    body.cards .cards-scroll-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
}
.cards-scroll-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.15);
    background: rgba(255, 255, 255, 0.55);
    display: none !important; /* hidden unless .cards-scroll-btn-visible; overrides Bootstrap */
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cards-scroll-btn:hover { background: rgba(255, 255, 255, 0.92); }
.cards-scroll-btn:focus {
    outline: none;
    box-shadow: none;
}
.cards-scroll-btn i {
    font-weight: bold;
    -webkit-text-stroke: 0.6px currentColor;
}

/* All Cards: category tile (Explore Categories) — ensure title is bold */
.category-tile-name {
    font-weight: bold !important;
}

/* All Cards / Explore: vertical gap between tile rows (match horizontal gap ~12px) */
body.cards .container-marketing .row {
    row-gap: 12px;
    margin-bottom: 12px;
}

body.tos,
body.privacy,
body.aboutus,
body.news {
    /* this padding is for the fixed-top nav bar */
    padding-top: 75px;
}

/* these are to use css to hide nav bar (instead of js) */
body.mathquestions #homenav,
body.mathquestions .footer,
body.levelup #homenav,
body.levelup .footer,
body.challenge-intro #homenav,
body.challenge-intro .footer,
body.challenge-review #homenav,
body.challenge-review .footer,
body.challenge-invalid #homenav,
body.challenge-invalid .footer {
    display: none;
}

/* Challenge Review page - remove game card border and ensure proper styling */
.challenge-review-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    height: 100vh;
}

.challenge-review-card {
    background-color: #ffffff;
    border: none !important;
    border-radius: 15px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

/* this is used to prevent zooming and drag-scrolling*/
body.mathquestions,
body.levelup,
body.diagnostic {
    touch-action: pan-y;
    /* Allow vertical scroll, block pinch zoom & horizontal drag */
    /* change to overscroll-behavior: none to prevents scroll chaining */
    overscroll-behavior: contain;
    /* change to overflow-y: none to prevents scrolling */
    overflow-y: hidden;
    /* Prevent side-drag */
    overflow-x: hidden;
}

@media (max-width: 768px) {
    /* body.home::before {
        content: "";
        background-image: url('../images/math-formula-chalkboard_blur.jpg');
        background-size: cover;
        background-position: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
    } */

    body.home {
        background: none !important;
        /* Remove original background */
    }

    /* Reduce gaps on mobile phones for better card width */
    .container-marketing .row {
        padding-left: 0.125rem !important;
        padding-right: 0.125rem !important;
    }

    .container-marketing .row .col {
        padding-left: 0.125rem !important;
        padding-right: 0.125rem !important;
    }

    /* All Cards / Explore: tile spacing – match horizontal gap to card tiles (12px), add vertical row spacing */
    body.cards .container-marketing .row {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
        margin-bottom: 0.75rem !important;
    }
    body.cards .container-marketing .row .col {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }
}

/*---- Success (and error?) message bar styles ---------------------------------- */

#success-message {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    /* Above the profile card */
    padding: 8px 16px;
    font-size: 0.95rem;
    font-weight: bold;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: none;
    max-width: 90%;
    text-align: center;
}

.custom-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
    background-color: #d4edda;
    /* Bootstrap green */
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 0px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: none;
    transition: opacity 0.4s ease;
}

/*---- Base styles ----------------------------------*/

hr {
    background-color: #000000;
    border: 0 none;
    color: #000000;
    opacity: 1;
    height: 5px;
}

hr.custom1 {
    /*background-color: #AEAEAE;*/
    border: 0 none;
    color: #ba0909;
    opacity: 1;
    height: 1px;
}

.custom-hr {
    border: none;
    height: 1px;
    background-color: rgb(200, 200, 200);
    width: 100%;
    margin: 10px auto;
}

.custom-hr-dark {
    border: none;
    height: 2px !important;
    background-color: #bababa;
    width: 100%;
    margin: 10px auto;
}

.custom-hr-dark-margin {
    border: none;
    height: 1px !important;
    background-color: #bababa;
    width: 100%;
    margin: 10px auto;
}

/* -- this style is removed as original width was unnecessary*/
.container1 {
    width: 100%;
    height: 100vh;
}


/* ----- Nav Bar Styles --------------------------------------------------- */
.navbar .navbar-content {
    width: 350px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.navbar .navbar-custom {
    max-width: 800px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.cardnavbar-custom {
    height: 30px;
}

#card-exit-btn {
    align-self: flex-start;
    margin-bottom: 5px;
}

.exit-btn a {
    padding-top: 5px;
    /* or use margin-top */
}

/* ----- Footer Styles --------------------------------------------------- */

.footer {
    margin-top: auto;
    padding: 20px 0;
    text-align: center;
    position: relative;
    z-index: 1;
    width: 100%;
    clear: both;
    display: block;
    box-sizing: border-box;
}

.footer-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.footer-container {
    color: #6c757d;
    /* Brighter text color (white) */
}

.footer-container a {
    color: #6c757d;
    /* Bright cyan for links */
    text-decoration: none;
    /* Optional: remove underlines */
}

.footer-container a:hover {
    color: rgb(60, 60, 60);
    /* Optional: change color on hover */
}


/* ----- Cookie consent styles ---------------------------------- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f4f4f4;
    border-top: 1px solid #ccc;
    text-align: center;
    padding: 12px;
    font-size: 0.9rem;
    z-index: 9999;
}

.cookie-text {
    margin-bottom: 10px;
}

.cookie-actions button {
    font-size: 0.85rem;
}

/* ----- Loading UX styles ---------------------------------- */

#loadingOverlay {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    flex-direction: column;
}

#loadingOverlay.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.loading-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
}

.dots::after {
    content: '';
    display: inline-block;
    width: 1em;
    text-align: left;
    animation: dots 1.2s steps(3, end) infinite;
}

@keyframes dots {
    0% {
        content: '';
    }

    33% {
        content: '.';
    }

    66% {
        content: '..';
    }

    100% {
        content: '...';
    }
}


/* ----- Signup Field Styles 4/22/25 --------------------------------------------------- */

.signup-field {
    width: 320px;
    font-size: 1.3rem;
    padding: 8px 12px;
}

.signup-button {
    width: 320px;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 8px 12px;
    background-color: #FF8A00;
    border: none !important;
    border-radius: 6px;
}

.signup-skip-button {
    width: 320px;
    font-size: 1.1rem;
    padding: 8px 12px;
    background-color: #BCBCBC;
    border: none !important;
    border-radius: 6px;
}

.signup-skip-link {
    font-size: 1.1rem;
    color: #6c757d;
    text-decoration: underline;
    cursor: pointer;
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 16px;
}

.signup-skip-link:hover {
    color: #5a6268;
    text-decoration: underline;
}

.username-text {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: bold;
    color: rgb(40, 40, 40);
    line-height: 1;
    white-space: nowrap;
    /* 🔒 prevents wrapping */
}

.signup-fake-input {
    display: inline-block;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 4px 6px;
    height: 28px;
    line-height: 1.4;
}

.signup-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    position: relative;
    min-height: 36px;
    cursor: pointer;
}

.signup-item span,
.signup-item .edit-icon {
    pointer-events: none;
}

.signup-item .edit-icon {
    display: none;
}

.signup-item:hover .edit-icon {
    display: inline;
}

.signup-edit-input {
    font-size: 1.4rem;
    font-weight: bold;
    height: 44px;
    padding: 8px 12px;
    line-height: 1.3;
    text-align: center;
    width: 200px;
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    display: flex;
    align-items: center !important;
    vertical-align: middle !important;
}

.signup-edit-group {
    display: flex;
    align-items: center;
    height: 44px;
    gap: 10px;
}

/* ----- Card Styles --------------------------------------------------- */
/* this section uses some of the same names as in basestyle.css, which caused an issue with weird 
stretching behavior when I included both basestyle and appstyle in base.html at one point */

.card {
    margin: 0;
    float: none;
}

.custom-card {
    /* added 03/14/25 for Leveling2.0 */
    display: flex;
    flex-direction: column;
    /* end 03/14/25 add */
    height: 440px;
    position: relative !important;
    width: 360px;
    top: auto !important;
    box-sizing: border-box;
    max-width: 100%;
}

.card-container {
    /* Ensures container width matches child elements */
    width: fit-content;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    perspective: 1000px;
    opacity: 1;
    position: relative !important;
    top: auto;
    /* Prevents overflow issues*/
    /*overflow: hidden;*/
    box-sizing: border-box;
    min-width: 300px;
}

/* Note: the following Loading classes are being replaced by a newer system 5/12/25*/
/* Placeholder for loading state 12/17/24*/
.card-container.loading::after {
    content: "Loading...";
    font-size: 1.8em;
    color: white;
    /* Make the text white */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    pointer-events: none;
    /* Allow clicks to pass through */
}

/* Prevent .custom-card from being hidden */
.card-container.loading .custom-card {
    pointer-events: none;
    /* Prevent interaction */
    visibility: hidden;
    /* Hides the card without disrupting layout or animation */
}

.card-container:not(.loading) .custom-card {
    visibility: visible;
    /* Makes the card visible again */
}

/* Flip Animation - This remains untouched */
.card-flip {
    position: relative;
    /* Prevent overflow issues */
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
}

.card-flip.flipped {
    transform: rotateY(180deg);
}



.card-flip {
    transform-style: preserve-3d;
    transition: transform 0.4s;

}

.card-flip.flipped {
    transition: transform 0.4s;
    transform: rotateY(180deg);
}

/* transitions <div> back to unflipped state without animation */
.card-flip.unflipped {
    transform: none;
    /* Reset state */
    transition: none !important;
    /* No animation */
}

.card-face {
    backface-visibility: hidden;
    position: absolute;
    display: flex;
    width: 100%;
    height: 90%;
    /* added 11/22/24 so that commen properties for cardFront/Back/Front2 are here */
    border-radius: 30px;
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    transition: transform 0.4s ease, opacity 0.4s ease;
    top: 0;
    left: 0;
    /* -----------------------------------------------------------------------------*/
    /* added 2/8/25 to try to fix the hidden tolerance text */
    flex-direction: column;
    /* end 2/8/25 */

}

.card-front {
    background-color: #ffffff;
    border: 5px solid #8484b5;
    z-index: 20;
}

/* added 11/22/24 */
.card-front2 {
    background-color: #ffffff;
    border: 5px solid #8484b5;
    z-index: 20;
}

.card-front2.hidden {
    opacity: 0;
    transform: translateX(-100%) rotateY(180deg);
    pointer-events: none;
}

.card-front2.active {
    opacity: 1;
    transform: translateX(0) rotateY(180deg);
    pointer-events: auto;
}

.card-back {
    background-color: #f8f9ff;
    border: 8px solid rgb(0, 213, 0);
    transform: none;
    opacity: 1;
    transform: rotateY(180deg);
}


/* --- these are for the card-back slide animation --- */
.card-back.hidden {
    /* Off-screen to the right */
    transform: rotateY(180deg) translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.card-back.active {
    transform: rotateY(180deg) translateX(0);
    /* Centered on the screen */
    opacity: 1;
    pointer-events: auto;
}

.card-back.prev-active,
.card-back-wrong.prev-active {
    transform: rotateY(180deg) translateX(-100%);
    /* Off-screen to the left */
    opacity: 0;
    /* Ensure no mirrored side appears */
    backface-visibility: hidden;
}

/* --- end of card-back slide animation styles --- */

/* ----- Dynamic Card Text Styling ---------------------------------------- */
.cardlogo-bg {
    background-image: url('../images/CardLogo_blankbg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* same visual footprint as the image cards */
    position: relative;
    overflow: hidden;
    /* keep rounded corners clipping */
    display: block;
    /* avoid flex "auto-height" surprises */
}

/* Keep the text from changing the container's height - OLD CSS VERSION REMOVED */
/* This styling is now handled by SVG elements with .dynamic-text-svg class */

/* SVG-based emboss effect styling */
.cardlogo-bg .cardlogo-dynamic-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* Ensure SVG can accommodate multiple text lines */
    overflow: visible;
}

.cardlogo-bg .dynamic-text-svg {
    font-family: Tahoma, 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    font-weight: 700;
    font-size: 48px;
    /* Default font size - will be overridden by JavaScript */
    /* Colors removed to allow SVG filter to work properly */
    text-anchor: middle;
    dominant-baseline: middle;
    /* SVG text doesn't support line-height, so we'll handle spacing in JavaScript */
}

/* Responsive adjustments for dynamic text - OLD CSS VERSION REMOVED */
/* SVG text sizing is now handled by JavaScript */

/* Ensure the div version clips like the img version */
.custom-rounded-top {
    overflow: hidden;
}

/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
    .cardlogo-bg {
        height: 0;
        padding-top: 56.25%;
        /* 16:9 "intrinsic ratio" */
    }

    /* SVG text positioning is handled by .cardlogo-dynamic-svg class */
}

.card-back-wrong {
    background-color: #f8f9ff;
    border: 5px solid #ce170b;
    /* border-radius: 30px;
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);*/
    transform: rotateY(180deg);
}

.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* ----- 03/15/25 Leveling 2.0 - new levelup styles--------------------------------------- */
/* Basic levelup card styling ----------------------- */

/*copied from .card-container*/
.card-container-levelup {
    /* Ensures container width matches child elements */
    width: fit-content;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    /*perspective: 1000px;*/
    opacity: 1;
    position: relative !important;
    top: auto;
    /*overflow: hidden;*/
    box-sizing: border-box;
    min-width: 350px;
}

/* copied from .card-flip; needed at all? */
.card-flip-levelup {
    position: relative;
    /*transition: transform 0.4s ease;
    transform-style: preserve-3d;*/
}

/* copied from .card-front */
.card-front-levelup {
    background-color: #ffffff;
    border: 5px solid #8484b5;
    z-index: 20;
}

/* copied from .card-face */
.card-face-levelup {
    backface-visibility: hidden;
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    top: 0;
    left: 0;
    flex-direction: column;
    justify-content: center;
}

.custom-card-levelup {
    /* added 03/14/25 for Leveling2.0 */
    display: flex;
    flex-direction: column;
    /* end 03/14/25 add */
    height: 600px;
    position: relative !important;
    width: 360px;
    top: auto !important;
    box-sizing: border-box;
    max-width: 100%;
}

.levelup_title {
    font-size: 1.9rem;
    font-weight: bold;
    color: #FF8A00;
    text-align: center;
    margin-top: 20px;
}

.levelup_title_text {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1c1c1c;
    text-align: center;
    margin-top: 16px;
}

.levelup_body_text {
    font-size: 1rem;
    color: #555;
    text-align: center;
    margin-top: 6px;
    margin-bottom: 18px;
}

.challenge-card {
    min-height: 420px;
    padding: 12px;
}

.challenge-hero-wrapper {
    width: 100%;
    margin: 12px auto 8px;
    display: flex;
    justify-content: center;
}

.challenge-hero-illustration {
    max-height: 150px;
    width: auto;
    max-width: 220px;
}

.challenge-body-copy {
    font-size: 1.2rem;
    color: #848484;
    text-align: center;
    margin-top: 20px;
    max-width: 250px;
    width: 90%;
}

.challenge-intro-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.challenge-intro-card {
    width: 380px;
    max-width: 100%;
    position: relative;
    min-height: 550px;
    box-sizing: border-box;
    border-radius: 15px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
    background-color: white;
    margin: 0 auto;
}

.challenge-intro-graphic img {
    max-height: 170px;
    width: auto;
}

.challenge-intro-title {
    margin-top: 0;
    color: #FF8A00;
}

.challenge-intro-aka {
    font-size: 1.0rem;
    font-weight: normal;
    color: #FF8A00;
    margin-top: -2px;
}

.challenge-intro-body {
    font-size: 1.2rem;
    color: #848484;
    text-align: center;
    margin-top: 20px;
}

.challenge-intro-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 2px solid #42B085;
    border-radius: 20px;
    padding: 12px 16px;
    margin: 0 auto;
    width: 250px;
    max-width: 100%;
    box-sizing: border-box;
    background: linear-gradient(145deg, #f9fbff 0%, #ffffff 60%);
    box-shadow: 0 12px 30px rgba(17, 79, 150, 0.12);
}

.challenge-intro-tile-with-media {
    padding: 0;
    gap: 0;
    overflow: hidden;
    position: relative;
}

.challenge-intro-icon {
    width: 52px;
    height: 52px;
    border-radius: 20px;
    background: rgba(113, 164, 242, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #3566c7;
}

.challenge-intro-icon svg {
    width: 32px;
    height: 32px;
}

.challenge-intro-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.challenge-intro-media {
    width: 33.333%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: transparent;
    margin: 0;
    padding: 0;
    border-radius: 18px 0 0 18px;
}

.challenge-intro-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.challenge-intro-icon-fallback {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    background: #71A4F2;
}

.challenge-intro-tile-text {
    text-align: center;
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.challenge-intro-tile-with-media .challenge-intro-tile-text {
    padding-left: 14px;
    padding-right: 16px;
}

.challenge-intro-tile-title {
    font-size: 1.2rem;
    color: #848484;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.challenge-intro-tile-title-small {
    font-size: 1.1rem;
}

.challenge-intro-tile-subtitle {
    font-size: 0.9rem;
    color: #42B085;
}

.challenge-intro-metric {
    font-size: 0.9rem;
    color: #5f6c86;
    margin-top: 8px;
    margin-bottom: 0;
}

.challenge-intro-actions {
    max-width: 320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.challenge-intro-button {
    width: 100%;
    max-width: 250px;
    border-radius: 20px;
}

.challenge-intro-alert {
    max-width: 250px;
    width: calc(100% - 40px);
    margin: 0 auto;
    text-align: center;
}

.challenge-intro-footer {
    margin-top: 18px;
}

@media (max-width: 575.98px) {
    .challenge-intro-tile {
        padding: 12px;
        gap: 12px;
    }

    .challenge-intro-icon {
        width: 48px;
        height: 48px;
        border-radius: 20px;
    }
}

body.challenge-intro #signup,
body.challenge-intro #login {
    display: none !important;
}

.challenge-share-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 10001 !important;
}

.challenge-share-overlay.show {
    display: flex;
    pointer-events: auto;
}

.challenge-overlay-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 2rem;
    width: 100%;
    max-width: 420px;
    position: relative;
    box-shadow: 0 24px 48px rgba(15, 30, 60, 0.18);
    color: #1f1f1f;
}

.challenge-overlay-close {
    border: none;
    background: none;
    color: inherit;
}

.challenge-overlay-content {
    text-align: center;
    color: #1f1f1f;
}

#challenge-share-title,
.challenge-overlay-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1.25rem;
}

.challenge-overlay-subtext {
    font-size: 0.95rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.challenge-connections-dropdown-container {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.challenge-connections-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.challenge-connections-dropdown {
    flex: 1;
    min-width: 0;
    padding: 0.75rem;
    font-weight: 600;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
}

.challenge-connections-dropdown option {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.challenge-connections-go-btn {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.challenge-share-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.challenge-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.75rem;
    width: 100%;
}

.challenge-share-icon {
    width: 20px;
    height: 20px;
}

.challenge-share-feedback {
    margin-top: 1rem;
    min-height: 1.2rem;
    font-size: 0.95rem;
    color: #198754;
}

.challenge-share-feedback.text-danger {
    color: #dc3545;
}

.challenge-share-confirmation {
    margin-top: 1.5rem;
    display: none;
}

/* Mobile styles for challenge connections dropdown */
@media (max-width: 768px) {
    .challenge-connections-dropdown-container {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .challenge-connections-row {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .challenge-connections-dropdown {
        min-width: 0;
        flex: 1 1 0;
        font-size: 0.95rem;
        padding: 0.7rem 0.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .challenge-connections-go-btn {
        padding: 0.7rem 1rem;
        font-size: 0.95rem;
        flex-shrink: 0;
        flex-grow: 0;
    }
}

.nav-profile-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Navbar profile name - truncation handled by JavaScript */
.nav-profile-name {
    white-space: nowrap;
}

.nav-profile-name small {
    margin-left: 2px;
    font-size: 0.7em;
}

.nav-notification-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    background: #dc3545;
    color: #fff;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0 4px;
}

.dropdown-badge {
    background: #dc3545;
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
    font-size: 0.7rem;
    padding: 2px 6px;
}

.notifications-page {
    min-height: calc(100vh - 140px);
}

.connections-page {
    min-height: calc(100vh - 140px);
}

/* Constrain width on desktop for better readability */
@media (min-width: 769px) {
    .notifications-page .col-lg-10 {
        max-width: 70%;
        margin: 0 auto;
    }

    .connections-page .col-lg-9 {
        max-width: 70%;
        margin: 0 auto;
    }
}

.notifications-header h1 {
    font-size: 1.4rem;
    color: rgb(40, 40, 40)
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.notification-card {
    border: 1px solid #e3e6ef;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(15, 28, 63, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.notification-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 28, 63, 0.08);
}

.notification-unread {
    border-color: #71A4F2;
    box-shadow: 0 0 0 2px rgba(113, 164, 242, 0.15);
}

/* Blue dot indicator for unread messages (5b2b) */
.notification-unread-dot {
    width: 10px;
    height: 10px;
    background-color: #71A4F2;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 0.75rem;
    margin-top: 0.4rem;
}

.notification-message {
    font-size: 1rem;
    font-weight: 500;
    color: #1c1c1c;
}

.notification-meta {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.notification-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.notification-body {
    flex: 1;
    min-width: 0;
    /* Allow text to wrap */
}

.notification-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.notification-actions .btn {
    font-size: 0.85rem;
    white-space: nowrap;
}

.notification-actions .btn-link {
    text-decoration: none;
}

.notifications-empty h2 {
    font-weight: 600;
    color: #1c1c1c;
}

.notifications-empty p {
    color: #6c757d;
}

.notification-red-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #E53935;
    margin-right: 6px;
    vertical-align: middle;
}

.challenge-result-card {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 2.25rem;
}

.challenge-result-subtext {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.challenge-compare-row .stat-box {
    width: 100%;
    max-width: 260px;
    border-radius: 16px;
    padding: 1.25rem;
}

.challenge-compare-row .challenge-opponent-box {
    border: 3px solid #FF8A00;
    background: #fff3e6;
}

.challenge-opponent-header {
    background-color: #FF8A00;
    color: #FFFFFF;
    font-weight: 600;
}

.challenge-opponent-value {
    color: #c26300;
}

/* Opponent box styling (orange theme) */
.challenge-opponent-box {
    border: 3px solid #FF8A00;
}

.challenge-opponent-box .stat-header {
    background-color: #FF8A00;
    color: #FFFFFF;
}

/* Add spacing between the two stat boxes on result page */
.challenge-result-pair .col-5 {
    margin: 0 10px;
    /* total gap ~20px */
}

/* Ensure secondary button width consistent on result page */
.lvup-page-challenge-result .levelup-action-btn {
    max-width: 250px;
}

.lvup-page-challenge-result .levelup-button-container,
.lvup-page-challenge-shared .levelup-button-container {
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    bottom: 40px;
    /* Raised from default 15px */
}

.lvup-page-challenge-result .levelup-button-container .btn,
.lvup-page-challenge-shared .levelup-button-container .btn {
    min-width: 160px;
}

.challenge-result-secondary {
    margin-top: 1rem;
    text-align: center;
}

.levelup-link-btn {
    font-weight: 600;
    color: #71A4F2;
}

.levelup-link-btn:hover,
.levelup-link-btn:focus {
    color: #4b7fd6;
    text-decoration: underline;
}

.levelup_subtitle_right {
    font-size: 1.0rem;
    font-weight: bold;
    text-align: center;
    color: #71A4F2
}

.levelup_subtitle_neutral {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    color: #71A4F2
}

.chart-safe-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 150px;
}

/* new 2-page levelup design with leaderboard css (added 4/17/25) */
/* --- Slide page visibility --- */
.lvup-page {
    display: none;
}

.lvup-page.active {
    display: block;
}

/* --- XP Earned Message --- */
.levelup_xp_message {
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
    color: #FF8A00;
    margin-top: -10px;
    margin-bottom: 10px;
}

/* Animation for XP burst */
@keyframes xp-pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    40% {
        transform: scale(1.15);
        opacity: 1;
    }

    70% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

.animate-xp {
    animation: xp-pop 0.6s ease-out;
}

.xp-button-container {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    text-align: center;
    z-index: 50;
}

#claim-xp-btn {
    position: relative;
    z-index: 60;
}

/* Specific to Claim XP button */
/*.xp-button-container .xp-button {
    min-width: 70%;
    max-width: 250px;
    max-height: 50px;
    font-size: 1.1rem;
    padding: 10px 0;
}*/

/* Close button on levelup.html*/
.close-inside-card {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 1.5rem;
    color: #888;
    z-index: 50;
    /* higher than content inside */
    text-decoration: none;
}

.close-inside-card:hover {
    color: #FF8A00;
}

#addFriendOverlayClose:hover {
    color: #FF8A00;
}

/* --- News Alert modal overlay (Phase 1) --- */
.news-alert-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.news-alert-modal {
    position: relative;
    background: #fff;
    border-radius: 12px;
    width: min(92vw, 560px);
    max-height: 75vh;
    padding: 3rem 2.25rem 2.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    color: #1c1c1c;
}

.news-alert-header {
    margin-bottom: 1rem;
    text-align: center;
}

.news-alert-thumbnail {
    margin: 0 auto 0.75rem;
    width: 90px;
    height: 90px;
}

.news-alert-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.news-alert-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    padding: 0 2.5rem;
    color: #1c1c1c !important;
}

.news-alert-subtitle {
    font-size: 0.95rem;
    color: #6c757d !important;
}

.news-alert-body {
    max-height: 45vh;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.5;
    color: #1c1c1c !important;
}

.news-alert-body p {
    color: #1c1c1c !important;
}

.news-alert-body li,
.news-alert-body ul,
.news-alert-body ol,
.news-alert-body span {
    color: #1c1c1c !important;
}

.news-alert-close i {
    font-size: 1.5rem;
}

.news-alert-close {
    top: 12px;
    left: 16px;
}

@media (max-width: 576px) {
    .news-alert-modal {
        width: min(92vw, 420px);
        padding: 2.5rem 2rem 2.25rem;
    }

    .news-alert-title {
        font-size: 1.35rem;
        padding: 0 1rem;
    }
}

body.news-alert-open {
    overflow: hidden;
}

/* --- Leaderboard container box --- */
.leaderboard-box {
    border: 2px solid #ccc;
    border-radius: 10px;
    background-color: #fff;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    overflow: hidden;
    /* No scrollbar */
}

/* --- Each leaderboard row --- */
.leaderboard-row {
    font-size: 1.05rem;
    font-weight: 500;
    padding: 4px 0;
    margin: 1px 0;
    line-height: 1.2;
    border-bottom: none;

    /* Match highlight row styling */
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
}

/* Full-width highlight styling */
.leaderboard-row.highlight {
    background-color: #FFD098;
    font-weight: bold;
    border-radius: 0;
}


.leaderboard-main-row {
    font-size: 1.05rem;
    font-weight: 500;
    padding: 4px 0;
    margin: 1px 0;
    line-height: 1.2;
    border-bottom: none;
}

.leaderboard-main-row.highlight {
    background-color: #FFD098;
}


/* --- Rank column --- */
.leaderboard-rank {
    font-weight: 500;
    color: #333;
    font-size: 0.9rem;
}

/* --- Username column --- */
.leaderboard-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- XP column --- */
.leaderboard-xp {
    font-weight: 400;
    white-space: nowrap;
    text-align: right;
}

.leaderboard-ellipsis-row {
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 4px 0;
    color: #888;
}

.leaderboard-link {
    cursor: pointer;
}

.leaderboard-link .leaderboard-row,
.leaderboard-link .section-chevron {
    transition: color 0.2s ease;
}

.leaderboard-link:hover .section-leaderboard-row,
.leaderboard-link:hover .section-chevron i {
    color: #FF8A00;
    /* bright orange or whatever highlight you want */
}



.leaderboard-tab-bar {
    display: flex;
    justify-content: center;
    gap: 2rem;
    align-items: flex-end;
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: 1rem;
}

.leaderboard-tab-bar .tab-label-birn {
    position: relative;
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 400;
    padding-bottom: 0.40rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.tab-label-birn::after {
    content: "";
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -1px;
    height: 3px;
    background-color: transparent;
}

.tab-label-birn.active {
    font-weight: 700;
}

.tab-label-birn.active::after {
    background-color: #FF8A00;
}

.leaderboard-tab-panel {
    display: none;
}

.leaderboard-tab-panel.active {
    display: block;
}

.leaderboard-subject-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.leaderboard-subject-icon-wrapper svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.leaderboard-subject-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.leaderboard-subject-icon svg {
    width: 24px;
    height: 24px;
    display: block;
    fill: currentColor;
}

.leaderboard-subject-icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor;
    stroke-width: inherit;
}

.stats-card-icon {
    display: inline-flex;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transform: translateY(-2px);
}

.stats-card-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.stats-card-icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor;
    stroke-width: inherit;
}

.stats-card-icon-img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    transform: translateY(-2px);
}

.leaderboard-main-row .report-text {
    font-size: 0.9rem;
}

.leaderboard-main-row .performance-value {
    font-size: 0.9rem;
}

/* rotating hero info section (updated 3/21/25) ------------------- */
.round-hero-title-container {
    display: flex;
    align-items: center;
    /* vertical center */
    justify-content: center;
    width: 100%;
    height: 25px;
    margin-top: 5px;
}

.levelup_info_title {
    width: 270px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: #606060;
    z-index: 2;
}

.round-hero-container {
    position: relative;
    width: 100%;
    height: 170px;
    text-align: center;
    margin-top: 2px;
}

.round-hero-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    justify-content: center;
    /* Horizontal center */
    align-items: center;
    /* Vertical center */
}

.round-image-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}


.round-hero-slide img {
    max-height: 90%;
    /* Ensures it doesn't exceed its container */
    width: auto;
    display: block;
    transform: scale(0.8);
    /* Shrinks the image to 80% of its original size */
    text-align: center;
}

.round-hero-slide.active {
    visibility: visible;
    position: relative;
}

.dot-navigation {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.dot {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: gray;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background-color: #71A4F2;
}

#compare-chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 470px;
    margin: 0 auto;
    height: 140px;
    max-height: 140px;
}

#compareChart {
    width: 95% !important;
    height: 140px !important;
    max-height: 140px;
}

/* Ensures the image fits within the card */
.round-img {
    max-width: 50%;
    max-height: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 03/15/25 Leveling 2.0 - new card stat box styles ----------------------- */
/* Base stat box styling */
.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid;
    border-radius: 15px;
    padding: 12px;
    min-width: 125px;
    min-height: 80px;
    background-color: white;
    position: relative;
}

/* Colored header strip (perfect alignment fix) */
.stat-header {
    width: calc(100% + 4px);
    padding: 2px 0;
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-align: center;
    border-radius: 15px 15px 0 0;
    position: absolute;
    top: -5px;
    left: -2px;
}

/* Stat value styling */
.stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-top: 14px;
}

/* Accuracy Box */
.accuracy-box {
    border-color: #0BCE83;
    margin-right: 2px;
    /* ⬅ Reduced spacing between boxes */
}

.accuracy-header {
    background-color: #0BCE83;
}

.accuracy-rightanswer {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0BCE83;
}

/* Answer Time Box */
.time-box {
    border-color: #71A4F2;
    margin-left: 2px;
    /* ⬅ Reduced spacing between boxes */
}

.time-header {
    background-color: #71A4F2;
}

.time-rightanswer {
    font-size: 1.5rem;
    font-weight: bold;
    color: #71A4F2;
}

/* Helper text */
.stat-helper-text {
    font-size: 0.8rem;
    color: #888;
    text-align: center;
    margin-top: 5px;
}

/* Ensure opponent box border color wins over later .stat-box rule (cascade) */
.stat-box.challenge-opponent-box {
    border-color: #FF8A00;
}

/* ----- 05/02/25 Level 2.1 - new XP Meter Styles ----------------------- */

/* XP Level Meter Styles ------------------------------------------- */
.xp-head-container {
    margin-top: 60px;
    margin-bottom: 50px;
}

#xp-head-wrapper {
    position: relative;
    width: 100px;
    height: 120px;
    margin: 0 auto;
    overflow: hidden;

    /* The outline goes here */
    background-image: url('../images/head_profile.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    /* The mask applies here */
    -webkit-mask-image: url('../images/head_profile2.svg');
    mask-image: url('../images/head_profile2.svg');

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: contain;
    mask-size: contain;

    -webkit-mask-position: center;
    mask-position: center;
}

#xp-head-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #FF8A00;
    transition: height 1.4s ease-in-out;
    z-index: 0;
    /* stays under the background-image */
}

#xp-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0%;
    background-color: #FF8A00;
    transition: height 1.4s ease-in-out;
    z-index: 1;
}

/* XP Meter Box */
.xpmeter-box {
    border-color: #FF8A00;
    margin-right: 2px;
    /* ⬅ Reduced spacing between boxes */
}

.xpmeter-header {
    background-color: #FF8A00;
}

.xpmeter-rightanswer {
    margin-top: 14px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #FF8A00;
}

/* Challenge stat box (mirrors XP meter palette but blue) */
.challenge-stat-box {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
    border-color: #71A4F2;
}

.challenge-stat-header {
    background-color: #71A4F2;
}

.challenge-stat-value {
    margin-top: 14px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #71A4F2;
}


/* XP Meter Helper text */
.xpmeter-helper-text {
    font-size: 1.2rem;
    color: #848484;
    text-align: center;
    margin-top: 20px;
    max-width: 250px;
    width: 90%;
    padding: 0 10px;
}

/* XP Meter Overlay Text Effects */
.bonus-flash {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(113, 164, 242, 0.8);
    /* #71A4F2 with 50% opacity */
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

@keyframes flashPop {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
    }

    30% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1);
    }

    60% {
        transform: translateX(-50%) scale(1.0);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) scale(0.95);
    }
}

#xp-bonus-flash.hidden {
    display: none;
}

/* 5/15/25 debug, remove later */
/*#cardAnimate {
    outline: 1px solid red;
}

.card-face {
    outline: 1px solid greenyellow;
}*/

/* device-specific params -----------------------*/
@media (max-width: 768px) {
    .card-container-levelup {
        height: auto !important;
        padding-top: 50px !important;
        padding-bottom: 30px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
        justify-content: center !important;
    }

    .custom-card-levelup {
        margin: auto !important;
    }

    body.levelup {
        padding: 0 !important;
        margin: 0 !important;
    }

    /*5/15/25 added to make the mobile layout better*/
    .custom-card {
        height: 445px !important;
        /* This works well for sentence + columnar */
        max-height: none !important;
    }

    /* Phase 8: Dynamic cards on mobile - keep taller height */
    .custom-card.dynamic-card {
        height: 550px !important;
        /* Match desktop height for dynamic cards */
    }

    .card-container {
        height: auto !important;
        min-height: auto !important;
        align-items: center !important;
    }

    /* Default: card at top for keypad */
    .card-container:not(.no-keypad) {
        justify-content: flex-start !important;
    }

    /* Override: center card when keypad is hidden */
    .card-container.no-keypad {
        justify-content: center !important;
        height: 100vh !important;
    }

    body.mathquestions {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    #keypadContainer {
        position: absolute;
        bottom: -165px;
        left: 0;
        width: 100%;
        z-index: 10;
        /* above background but below overlays */
    }

    /* Remove body padding for challenge pages on mobile since navbar is hidden */
    body.challenge-intro,
    body.challenge-review {
        padding-top: 0 !important;
        margin-top: 0 !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    /* Make main and container work like overlay for vertical centering */
    body.challenge-intro main,
    body.challenge-review main {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.challenge-intro main .container,
    body.challenge-review main .container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Challenge review container - match tip-card-container approach */
    /* Note: When navbar is hidden, we compensate by shifting content up by half navbar height.
       Uses CSS variable for maintainability - update --navbar-height in :root if navbar height changes. */
    .challenge-review-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        padding: 20px !important;
        min-height: auto !important;
        height: auto !important;
        transform: translateY(calc(-1 * var(--navbar-height) / 2)) !important;
    }

    /* Override card-container-levelup padding when inside challenge-review-container */
    .challenge-review-container .card-container-levelup {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* Challenge intro container - match tip-card-container approach */
    /* Note: When navbar is hidden, we compensate by shifting content up by half navbar height.
       Uses CSS variable for maintainability - update --navbar-height in :root if navbar height changes. */
    body.challenge-intro .challenge-intro-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        padding: 20px !important;
        min-height: auto !important;
        height: auto !important;
        transform: translateY(calc(-1 * var(--navbar-height) / 2)) !important;
    }

    /* Ensure notifications-page is top-aligned on mobile */
    body.profile main .container:has(.notifications-page) {
        display: block !important;
        align-items: unset !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    /* Ensure connections-page is top-aligned on mobile */
    body.profile main .container:has(.connections-page) {
        display: block !important;
        align-items: unset !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    body.profile .notifications-page {
        width: 100% !important;
        margin: 0 !important;
    }

    body.profile .connections-page {
        width: 100% !important;
        margin: 0 !important;
    }

}

/* ----- Card Sentence Format Styles added 1/21/25, updated 2/25/25  ---------------------------------- */
#sentenceContainer_front,
#sentenceContainer_back,
#sentenceContainer_frontc {
    position: relative;
    height: auto;
    max-height: 300px;
    /*needs to be 170 or so for temp*/
    min-height: 170px;
    overflow: hidden;
    padding: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* these are used to customize the min-height above for different sentence formats*/
.sentence-default-height {
    min-height: 170px !important;
}

.sentence-tall-height {
    min-height: 190px !important;
}

/* 7/10/25 Multiple choice specific height adjustments.
   Card UX V2 Phase 1 fix (2026-04-28): dropped the 120px max-height cap
   that was clipping the bottom padding on 2- and 3-line MC questions
   (e.g. "Which pamphlet by John Dickinson argued against the Townshend
   Acts?"). With the cap, any question that wrapped past one line ran
   right up against the bottom edge of the purple box because
   `padding: 28px 20px` couldn't expand the container past 120px. Keeping
   min-height: 110px so short MC questions still feel substantial; the
   box now grows to fit the text plus the existing top/bottom padding. */
.sentence-multiple-choice-height {
    min-height: 110px !important;
}


#sentenceQuestion1,
#sentenceQuestion2,
#sentenceQuestion1c {
    width: 85%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


/* Prevents <a> links and <span> elements from breaking into separate lines */
#sentenceQuestion1 a,
#sentenceQuestion2 a,
#sentenceQuestion1c a {
    display: inline !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#sentenceQuestion1 span,
#sentenceQuestion2 span,
#sentenceQuestion1c span {
    display: inline !important;
}



/* ----- Transparent "NoCard" Styles --------------------------------------------------- */

.no-card {
    margin: 0;
    float: none;
}

.no-custom-card {
    height: 550px;
    position: relative;
    width: 350px;
}

.no-card-face {
    background-color: transparent;
    border: none;
    position: absolute;
    display: flex;
    width: 100%;
    height: 90%;
    transition: transform 0.4s ease, opacity 0.4s ease;
    top: 0;
    left: 0;
}

.no-card-face.hidden {
    /* Off-screen to the right */
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.no-card-face.prev-active {
    transform: translateX(-100%);
    opacity: 0;
    backface-visibility: hidden;
}

.no-card-face2 {
    background-color: transparent;
    border: none;
    position: absolute;
    display: flex;
    width: 100%;
    height: 90%;
    transition: transform 0.4s ease, opacity 0.4s ease;
    top: 0;
    left: 0;
}

.no-card-face2.hidden {
    /* Off-screen to the right */
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.no-card-face2.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* ----- All Cards / Performance Styles ------------------------------ */
/* Outer container must fill screen height */
.page-container {
    min-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* This centers content and makes space for footer */
.page-custom {
    width: 410px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Remove chalkboard background and use light gray like navbar */
body.performance,
body.leaderboard,
body.profile {
    background: none !important;
    background-color: #f8f9fa !important;
}

/* All Cards (home route) also needs light gray background */
body.home {
    background: none !important;
    background-color: #f8f9fa !important;
}

/* Ensure light gray background persists on narrow screens */
@media (max-width: 768px) {

    body.home,
    body.performance,
    body.leaderboard,
    body.profile {
        background: none !important;
        background-color: #f8f9fa !important;
    }
}

/* All Cards specific hover: slight lift on main card only */
body.performance .card.page-layout:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

body.home .card.page-layout:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.card-link .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-link .card:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.card-history-link {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.card-history-link:hover {
    color: #666;
}

@media (max-width: 576px) {
    .card-link .card-title {
        overflow: visible;
        white-space: normal;
        line-height: 1.2;
    }

    .card-link .card[data-title-length="medium"] .card-title {
        font-size: 1rem;
    }

    .card-link .card[data-title-length="long"] .card-title {
        font-size: 1.0rem;
    }

    .card-link .card[data-title-length="extra"] .card-title {
        font-size: 0.9rem;
    }
}

/* This handles card styling but no height/position override */
.page-layout {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 0px;
    /* subtle card treatment shared across pages */
    border: 2px solid rgba(221, 223, 229, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    width: 100%;
    flex-grow: 1;
}

.btn-orange {
    background-color: #FF5722;
    color: white;
}

.btn-orange:hover {
    background-color: #fda184;
}

/* 5/14/25 new chart overlay styles */
.empty-chart-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* match the chart container height */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-size: 1.1rem;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 10;
    pointer-events: none;
}



/* ----- Text Styles --------------------------------------------------- */

/* card question styles */
.question {
    font-size: 3rem;
    font-weight: bold;
}

.question-sm {
    font-size: 1.9rem;
    font-weight: bold;
}

.question-sm1 {
    font-size: 1.3rem;
    font-weight: bold;
}

.question-sm2 {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.3;
}

.question-sm3 {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
}

.question-sm4 {
    font-size: 1.0rem;
    font-weight: bold;
    line-height: 1.4;
}

.question-xsm {
    font-size: 0.9rem !important;
    color: rgb(89, 89, 89) !important
}

/* Timer styles */

.timer {
    font-size: 1rem;
}

.rightanswer {
    font-size: 1.5rem;
    font-weight: bold;
    color: green
}

.rightanswer-sm {
    font-size: 0.8rem;
    color: green
}

.wronganswer {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ce170b
}

.rightanswerlg {
    font-size: 2.5rem;
    font-weight: bold;
    color: green
}

.rightanswermd {
    font-size: 2.0rem;
    font-weight: bold;
    color: green
}

.wronganswerlg {
    font-size: 2.5rem;
    font-weight: bold;
    color: ce170b
}

.wronganswermd {
    font-size: 2.0rem;
    font-weight: bold;
    color: #ce170b
}

.neutralanswerlg {
    font-size: 2.5rem;
    font-weight: bold;
    color: rgb(100, 100, 100)
}

.neutralanswermd {
    font-size: 2rem;
    font-weight: bold;
    color: rgb(100, 100, 100)
}

.neutralanswer-sm {
    font-size: 1.0rem;
    color: rgb(100, 100, 100)
}

.neutralanswer-xsm {
    font-size: 0.8rem;
    color: rgb(100, 100, 100)
}

/* Overlay message positioning for progress messages */
.response-overlay {
    position: absolute;
    top: 17px;
    /* Position right below the progress bar */
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 4px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    pointer-events: none;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
    display: none;
    /* Hide by default, show only when there's content */
}

/* Show overlay when it has content */
.response-overlay:not(:empty) {
    display: block;
}

/* Ensure the card container can hold absolutely positioned children */
.card-back {
    position: relative;
}

.normtext {
    font-size: 1.2rem;
    font-weight: normal;
    color: rgb(40, 40, 40)
}

.normtextbold {
    font-size: 1.2rem;
    font-weight: bold;
    color: rgb(40, 40, 40)
}

.normtextlite {
    font-size: 1.2rem;
    font-weight: normal;
    color: rgb(180, 180, 180)
}

.normtextlite2 {
    font-size: 1.2rem;
    font-weight: normal;
    color: rgb(60, 60, 60)
}

.normtextsm {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: nromal;
    color: rgb(40, 40, 40)
}

.normtextsmlite {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: nromal;
    color: rgb(180, 180, 180)
}

.normtextsmlite2 {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: nromal;
    color: rgb(100, 100, 100)
}

.normtextxsm {
    font-size: .85rem;
    font-weight: nromal;
    color: rgb(40, 40, 40)
}


.normtextxxsm {
    font-size: .7rem;
    font-weight: nromal;
    color: rgb(40, 40, 40)
}

.normtextbold {
    font-size: 1rem;
    font-weight: bold;
    color: rgb(40, 40, 40)
}

.normtextlitesm {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    color: rgb(180, 180, 180)
}

.normtextlitexsm {
    font-size: 0.7rem;
    font-weight: normal;
    color: rgb(100, 100, 100)
}

.normtexterrorxsm {
    font-size: 0.7rem;
    font-weight: normal;
    color: rgb(179, 38, 30)
}

.normtextlg {
    font-size: 1.4rem;
    color: rgb(40, 40, 40)
}

/* ----- Progress Bar Styles --------------------------------------------------- */

/* 03/14/25 Leveling 2.0 */
/* Used for timer progress; fix the Timer Progress Bar at the bottom */
.progress-container {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    padding-bottom: 0;
    margin-bottom: 0;
    overflow: hidden;
}

#progressContainer1,
#progressContainer2,
#progressContainer1c {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6px;
}

/* 03/14/25 Leveling 2. Adjust the progress bar styling */
.progress-timer {
    height: 3px;
    width: 100%;
    margin: 0 auto;
    border-radius: 5px;
    background-color: #FF8A00;
}

.progress {
    height: 10px;
    width: 270px;
    border-radius: 5px;
}

.progress-bar {
    min-width: 5px;
    /* Ensures progress bar is visible even if very small */
    transition: width 0.1s linear;
}

/* Answer Progress Bar */

#progressBarAnsTrack1 {
    background-color: #d3d3d3 !important;
}

#progressBarAnsTrackContainer1,
#progressBarAnsTrackContainer2,
#progressBarAnsTrackContainer1c {
    /* 2025-03-13 replaced "none" with "flex" as part of Level 2.0; i.e. always show answer progress bar*/
    /*display: none;*/
    display: flex;
    height: 20px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
}

/* Lighter gray for unanswered */
.progress-bar.bg-secondary {
    background-color: #d3d3d3 !important;
}

/* Custom Progress Bar Colors */
.progress-bar.custom-correct {
    background-color: #6AF79C !important;
}

.progress-bar.custom-wrong {
    background-color: #FF5733 !important;
}

.progress-bar.custom-neutral {
    background-color: #d3d3d3 !important;
}

/* Flashing animation */
.flashing {
    animation: flashing 1s infinite;
}

@keyframes flashing {
    0% {
        background-color: #ce170b;
    }

    50% {
        background-color: #ffcccc;
    }

    100% {
        background-color: #ce170b;
    }
}

/* 8/9/25 Pulse animation for current card progress */
@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}


/* ---------------- Pop and fade effect ------------------*/
.pop-effect {
    animation: popFade 1.5s ease-out forwards;
    /* Increased duration to 2.5s to accommodate 1s hold */
}

/* Specific pop effect for response overlay with background animation */
.response-overlay.pop-effect {
    animation: popFadeWithBackground 3.5s ease-out forwards;
}

@keyframes popFade {
    0% {
        transform: scale(1);
        color: rgb(0, 200, 0);
        text-shadow: 0 0 8px rgba(0, 200, 0, 0.7);
        font-weight: bold;
    }

    10% {
        /* Pop to 140% size */
        transform: scale(1.4);
        color: rgb(0, 200, 0);
        text-shadow: 0 0 12px rgba(0, 200, 0, 0.9);
        font-weight: bold;
    }

    45% {
        /* Keep the popped size */
        transform: scale(1.4);
        color: rgb(0, 200, 0);
        text-shadow: 0 0 12px rgba(0, 200, 0, 0.9);
        font-weight: bold;
    }

    70% {
        /* Start fading back to normal size */
        transform: scale(1);
        color: rgb(0, 150, 0);
        text-shadow: 0 0 8px rgba(0, 150, 0, 0.5);
        font-weight: normal;
    }

    100% {
        /* Back to neutral color */
        transform: scale(1);
        color: rgb(100, 100, 100);
        text-shadow: none;
        font-weight: normal;
    }
}

@keyframes popFadeWithBackground {
    0% {
        transform: scale(1);
        color: rgb(0, 200, 0);
        text-shadow: 0 0 8px rgba(0, 200, 0, 0.7);
        font-weight: bold;
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1;
    }

    10% {
        /* Pop to 140% size */
        transform: scale(1.4);
        color: rgb(0, 200, 0);
        text-shadow: 0 0 12px rgba(0, 200, 0, 0.9);
        font-weight: bold;
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1;
    }

    45% {
        /* Keep the popped size */
        transform: scale(1.4);
        color: rgb(0, 200, 0);
        text-shadow: 0 0 12px rgba(0, 200, 0, 0.9);
        font-weight: bold;
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1;
    }

    70% {
        /* Start fading back to normal size */
        transform: scale(1);
        color: rgb(0, 150, 0);
        text-shadow: 0 0 8px rgba(0, 150, 0, 0.5);
        font-weight: normal;
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1;
    }

    85.7% {
        /* Back to original neutral state (1.5s mark) */
        transform: scale(1);
        color: rgb(100, 100, 100);
        text-shadow: none;
        font-weight: normal;
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1;
    }

    100% {
        /* Fade away completely after 2 more seconds */
        transform: scale(1);
        color: rgb(100, 100, 100);
        text-shadow: none;
        font-weight: normal;
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 0;
    }
}


/* ----- Card Input Styles --------------------------------------------------- */

.custom-input {
    font-size: 2.3rem;
    font-weight: bold;
    color: #606060;
    text-align: right;

    /* Ensures the fake cursor doesn't overlap */
    padding-right: 18px;

    /* Removes the box */
    border: none;
    outline: none;
    background: transparent;

    /* Ensures no extra spacing */
    margin: 0;
    width: 100%;

    /* iOS cleanup */
    -webkit-appearance: none;
    appearance: none;

    /* Ensures padding works as expected */
    box-sizing: border-box;
}


/* Remove focus border (Chrome, Safari) */
.custom-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


.custom-input-sm {
    font-size: 1.5rem;
    font-weight: bold;
    color: #606060;
    text-align: right;

    /* Ensures the fake cursor doesn't overlap */
    padding-right: 14px;

    /* Removes the box */
    border: none;
    outline: none;
    background: transparent;

    /* Ensures no extra spacing */
    margin: 0;
    width: 100%;

    /* iOS cleanup */
    -webkit-appearance: none;
    appearance: none;

    /* Ensures padding works as expected */
    box-sizing: border-box;
}

/* Remove focus border (Chrome, Safari) */
.custom-input-sm:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Removes blue outline in Safari */
input[type="text"]::-webkit-input-placeholder {
    color: #999;
    line-height: normal;
}

input[type="text"]::-moz-placeholder {
    color: #999;
    line-height: normal;
}

input[type="text"]:-ms-input-placeholder {
    color: #999;
    line-height: normal;
}

input[type="text"]::-ms-input-placeholder {
    color: #999;
    line-height: normal;
}

/* Placeholder styling */
.custom-input::placeholder {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    opacity: 1;
    text-align: left;
}

/* Placeholder styling */
.custom-input-sm::placeholder {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    opacity: 1;
    text-align: left;
}

/* new params to fake a flashing cursor on mobile */
.input-wrapper {
    position: relative;
    display: inline-block;
}

/* For large input (2.6rem)*/
.input-wrapper.cursor-fake::after {
    top: 14px;
    height: 2.6rem;
    width: 0;
    border-left: 2px solid #606060;
    content: "";
    animation: blink 1s step-start infinite;
    position: absolute;
    right: 10px;
    pointer-events: none;
}

/* For small input (2.0rem) */
.input-wrapper.cursor-fake-sm::after {
    top: 10px;
    content: "";
    animation: blink 1s step-start infinite;
    position: absolute;
    right: 8px;
    height: 2rem;
    border-left: 2px solid #606060;
    pointer-events: none;
}

@keyframes blink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}




.timer-response-text {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 270px;
    text-align: center;
    font-size: 0.6rem;
    color: #606060;
    z-index: 2;
}

/* ----- Card Multiple Choice Button Styles 7/11/25 --------------------------------------------------- */

/* 10/27/25 Dynamic text sizing for long answers */
.choice-btn.choice-text-sm {
    font-size: 0.8rem;
}

.choice-btn.choice-text-xs {
    font-size: 0.7rem;
}

/* Phase 8: Multiple Choice Button Styling per 5c) */

/* ----- Phase 8: Answer Helper Widget and Overlay Styles (11/16/25) ----- */

/* Answer Helper Widget - small pill-like box in top-right of Question div */
.answer-helper-widget {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background-color: #EAEAEA;
    border: 2px solid #DADADA;
    border-radius: 12px;
    /* pill shape */
    cursor: pointer;
    z-index: 10;
    font-size: 0.7rem;
    color: #DADADA;
    transition: all 0.2s ease;
}

.answer-helper-widget:hover {
    background-color: #E0E0E0;
    border-color: #CACACA;
}

.answer-helper-widget-label {
    font-size: 0.7rem;
    color: #606060;
    font-weight: 500;
}

.answer-helper-widget-icon {
    font-size: 0.8rem;
    color: #606060;
    font-weight: bold;
    line-height: 1;
}

.answer-helper-widget.hidden {
    display: none;
}

/* Answer Helper Overlay - centered lesson overlay */
.answer-helper-overlay {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--lesson-content-width), calc(100vw - 32px));
    max-width: min(560px, calc(100vw - 32px));
    max-height: calc(100dvh - 240px);
    background-color: #EAEAEA;
    opacity: 0.96;
    border: none;
    border-radius: 20px;
    padding: 16px;
    z-index: 45;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent horizontal scrollbar */
}

.answer-helper-overlay.hidden {
    display: none;
}

/* Answer Helper Content */
.answer-helper-content {
    color: #606060;
    font-size: 1.2rem;
    line-height: 1.4;
    flex: 1;
    margin-top: 25px;
    /* Space for collapse button */
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    min-height: 0;
    /* Allow flex item to shrink */
    position: relative;
}

/* Ensure text content wrapper is properly centered */
.answer-helper-content-text {
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    text-align: center;
}

/* Blur question text when overlay is active */
#sentenceQuestion2.answer-helper-blur {
    filter: blur(3px);
    transition: filter 0.2s ease;
}

/* Answer Helper Collapse Button - top-right of overlay */
.answer-helper-collapse-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #606060;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 16;
    transition: color 0.2s ease;
}

.answer-helper-collapse-btn:hover {
    color: #404040;
}

/* Dynamic text sizing for answer helper (matches question sizing logic) */
.answer-helper-content-text.answer-helper-text-sm {
    font-size: 0.9rem;
}

.answer-helper-content-text.answer-helper-text-sm1 {
    font-size: 0.85rem;
}

.answer-helper-content-text.answer-helper-text-sm2 {
    font-size: 0.8rem;
}

.answer-helper-content-text.answer-helper-text-sm3 {
    font-size: 0.75rem;
}

.answer-helper-content-text.answer-helper-text-sm4 {
    font-size: 0.7rem;
}


/* ----- levelup.html styles --------------------------------------------------- */

.levelup-button {
    background-color: #0ACF83 !important;
    border: none !important;
    height: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 10px 20px;
    color: white;
    width: 100%;
    max-width: 250px;
}

.levelup-button-container {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    /* Match stat box row width */
    text-align: center;
    z-index: 2;
}

.levelup-action-btn {
    width: 100%;
    text-align: center;
    vertical-align: middle;
    font-size: 0.9rem;
    height: 40px;
    padding: 0;
    border-radius: 6px;
    color: #000027;
    background-color: #DDDDDD;
    border: none;
    margin-top: 8px;
}

.lvup-page-challenge .levelup-action-btn {
    max-width: 250px;
}

.lvup-page-challenge-shared .levelup-action-btn {
    max-width: 250px;
}

/* Btn styles for Challenge Page */
.challenge-button {
    background-color: #0ACF83 !important;
    border: none !important;
    height: 40px;
    font-size: 1.05rem;
    font-weight: bold;
    padding: 0;
    color: white;
    width: 100%;
    max-width: 250px;
}

/* Style for the smaller Retry button */
.levelup-retry-btn {
    width: 100%;
    height: 40px;
    padding: 0;
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: bold;
    color: #fff;
    /*background-color: #0BCE83;*/
    margin-top: 0px;
    /* Adjust spacing between the two buttons */
}

/* Ensure Performance Container is NOT vertically centered */
.performance-container {
    display: block;
    width: 95%;
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
}

/* Prevent chart from pushing down */
.performance-chart-container {
    /*max-width: 270px;*/
    width: 100%;
    height: 160px;
    padding: 0;
    margin: 0 auto;
    overflow-x: hidden;
    /* Enables horizontal scrolling */
    white-space: nowrap;
    position: relative;
}

#performanceChart {
    width: 100% !important;
    height: 100% !important;
    max-height: 160px;
    display: block;
}

/* Shows Scrollbar on Desktop (Only when Hovering) */
.performance-chart-container::-webkit-scrollbar {
    height: 8px;
}

.performance-chart-container::-webkit-scrollbar-thumb {
    background-color: #888;
    /* Gray scrollbar */
    border-radius: 4px;
}

.performance-chart-container:hover::-webkit-scrollbar-thumb {
    background-color: #555;
    /* Darker on hover */
}

/* Prevents accidental selection while scrolling */
canvas#performanceChart {
    touch-action: pan-x;
    cursor: grab;
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    /* Maintain a good width-to-height proportion */
}

/* Prevents Date Column from Wrapping on Mobile */
.performance-table-container .col-3 {
    white-space: nowrap;
    /* Stops date wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensures Table Structure is Correct */
.performance-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 15px;
}

.performance-table-container .row {
    display: flex;
    flex-wrap: nowrap;
    /* Prevents row wrapping */
    justify-content: space-between;
}

.performance-table {
    width: 100%;
    margin-top: 20px;
}

.performance-table table {
    width: 100%;
    border-collapse: collapse;
}

.performance-table th,
.performance-table td {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.performance-table tr:hover {
    background-color: #f5f5f5;
}

.performance-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
}

.performance-row {
    cursor: pointer;
}

/* reduces the col-1 (circle) width*/
.performance-row>div.col-1 {
    max-width: 20px;
    padding-right: 0;
    margin-right: 0;
}

/* reduce the left padding on the date column */
.performance-row>div.col-3.text-right {
    padding-left: 4px;
    /* tighten space to the left */
}



/* Remove X-Axis and Y-Axis Lines */
.chart-container .chart-grid {
    display: none;
}

/* Gold circle for best time */
.best-time {
    background-color: #E2D114;
    border: 2px solid #FFFCD6;
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

/* Orange circle for selected time */
.selected-time {
    background-color: #FF8A00;
    border: 2px solid #FFEDD7;
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

/* 3/24/25 pulsating effect for orange circle*/
@keyframes pulseGlow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.5);
    }

    50% {
        transform: scale(1.4);
        box-shadow: 0 0 8px 6px rgba(255, 138, 0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 138, 0, 0);
    }
}

.selected-time.pulsing {
    animation: pulseGlow 1.2s ease-in-out infinite;
}


/* ✅ Ensures smooth scrolling on touch devices */
@media (max-width: 768px) {
    .performance-chart-container {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        /* ✅ Smooth scrolling for iOS */
    }
}

/*03/21/25 may need to retire, doesn't seem to work */
/* ✅ Restricts changes to levelup.html only */
.levelup .performance-chart-container {
    max-width: 300px;
    margin: 0 auto;
    height: 150px;
}

.levelup #performanceChart {
    width: 100% !important;
    height: 100% !important;
    max-height: 150px;
}

/* ----- Performance (Levels) Styles --------------------------------------------------- */

.card-row {
    cursor: pointer;
}

.level-row {
    cursor: pointer;
}

/* ----- Schedule Calendar Overlay --------------------------------------------------- */

.calendar-reminder-overlay,
.calendar-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1090;
    /* make sure it's above your LevelUp card */
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}

.calendar-reminder-overlay.show,
.calendar-confirm-overlay.show {
    display: flex;
}

.calendar-reminder-overlay .overlay-card,
.calendar-confirm-overlay .overlay-card {
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    max-width: 400px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.calendar-link {
    text-decoration: none;
    color: #888;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.calendar-link:hover {
    text-decoration: underline;
}

/* Taller overlay */
/* Overlay card sizing (350px height as you tested) */
/* Calendar overlay card container */
.calendar-reminder-card {
    background: white;
    border-radius: 16px;
    max-width: 500px;
    height: 320px;
    margin: auto;
    padding-top: 48px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

/* Title styling */
.calendar-reminder-title {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 45px;
}

/* Form layout with labels on left, inputs on right */
.form-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px 12px;
    row-gap: 20px;
    align-items: center;
    justify-content: center;
}

/* Right-aligned labels */
.form-label {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
    padding-right: 3px;
}

/* Input wrapper for buttons or inputs */
.form-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Calendar buttons (shared base style) */
.calendar-btn {
    padding: 6px 16px;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: 6px;
    background-color: white;
    color: #333;
    min-width: 90px;
    text-align: center;
    transition: all 0.2s ease;
    font-size: 1rem;
}

/* Google button colors */
.google-btn {
    border-color: #4285F4;
    color: #4285F4;
}

.google-btn:hover {
    background-color: rgba(66, 133, 244, 0.1);
    border-color: #4285F4;
}

/* Outlook button colors */
.outlook-btn {
    border-color: #F14F21;
    color: #F14F21;
}

.outlook-btn:hover {
    background-color: rgba(241, 79, 33, 0.1);
    border-color: #F14F21;
}

/* Selected calendar button (persistent fill) */
.calendar-btn.selected.google-btn {
    background-color: #4285F4;
    color: white;
}

.calendar-btn.selected.outlook-btn {
    background-color: #F14F21;
    color: white;
}

/* Time input field */
.time-input {
    width: 195px;
    text-align: center;
}

/* Schedule button */
.schedule-btn {
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 8px;
    min-width: 200px;
    font-size: 1rem;
    height: 42px;
}

/* Skip link */
.skip-link {
    font-size: 0.95rem;
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    margin-bottom: 4px;

}


/* ----- Num Keypad Styles --------------------------------------------------- */

.keypad-container {
    display: none;
    /* position: relative;*/
    /* Position relative to the card */
    bottom: 0;
    left: 0;
    width: 100%;
    /*height: 100%;
    background: #343434;
    border-top: 1px solid #ccc;*/
    z-index: 1000;
    /* top bottom */
    padding: 2px 5px;
    /* top right bottom left */
    /* padding: 20px 5% 30px 5%;*/
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    max-width: 400px;
    margin: 5px auto;
    align-items: center;
    /* Ensure buttons don't stretch vertically */
}

.keypad button {
    padding: 5px;
    font-size: 1.4em;
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    height: auto;
    max-height: 40px;
    opacity: 1 !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    visibility: visible !important;
    /*-webkit-tap-highlight-color: transparent;*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
    /* Instead of fully transparent */
}

.keypad button:active {
    background-color: #b0b0b0 !important;
    /* Light grey instead of white */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: scale(0.95);
    transition: transform 0.1s ease, background-color 0.1s ease;
}

/* ✅ New Fix: Ensure focus does not keep the button invisible */
.keypad button:focus {
    background-color: #f9f9f9 !important;
    outline: none;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ✅ Keep the pressed effect styling */
#keypad .keypad-pressed {
    background-color: #b0b0b0 !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.1s ease;
    border: 1px solid #ccc !important;
    color: black !important;
    opacity: 1 !important;
    visibility: visible !important;
}



.input-group {
    margin: 10px auto;
    max-width: 300px;
}

/* ----- (Overlay Page) --------------------------------------------------- */

/* original overlay before 4/15/25*/
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    /* Changed from flex to none - will be set to flex when showing */
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    z-index: 1050;
    pointer-events: none;
}

.overlay.show {
    display: flex;
    /* Show overlay when .show class is present */
    opacity: 1;
    pointer-events: all;
}

/* Ensure overlay children don't capture events when overlay is hidden */
.overlay:not(.show) * {
    pointer-events: none !important;
}

.overlay.no-transition {
    transition: none !important;
}

#addFriendOverlayClose {
    position: absolute;
    top: 7px;
    left: 10px;
    font-size: 1.5rem;
    color: #888;
    z-index: 50;
    text-decoration: none;
}

#addFriendOverlayClose:hover {
    color: #FF8A00;
}

.challenge-flow-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1030;
    /* below overlay cards (1050) but above page content */
    display: none;
}

.challenge-flow-backdrop.show {
    display: block;
}



/*-----------------------------*/

.overlay-card {
    background: white;
    padding: 5px;
    border-radius: 10px;
    width: 95%;
    max-width: 530px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    flex-shrink: 0;
}

/* Overlay style for diagnostic */

#diagnostic_overlay .card-container {
    height: 600px !important;
    /* Let the overlay adjust the height automatically */
    overflow: hidden;
    top: 30px;
    /* Prevent spillage of elements */
    justify-content: flex-start;
    /* Align content at the top */
}

#diagnostic_overlay .no-custom-card {
    margin: 0 auto;
    /* Center the card */
    position: relative;
    width: 95%;
    /* Use a responsive width */
    max-width: 400px;
}

#diagnostic_overlay .no-card-face,
#diagnostic_overlay .no-card-face2 {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    top: 0;
    left: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

#diagnostic_overlay .no-card-face.hidden,
#diagnostic_overlay .no-card-face2.hidden {
    background-color: transparent;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

#diagnostic_overlay .no-card-face.prev-active {
    transform: translateX(-100%);
    opacity: 0;
}

.overlay-card-diagnostic {
    background: white;
    /* Background for content */
    color: rgb(40, 40, 40);
    /* Text color for contrast */
    padding: 10px;
    border-radius: 15px;
    width: 90%;
    /* Adjust as needed for the content */
    max-width: 500px;
    /* Prevent overlay from being too wide */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

/* this is meant to override the changes boostrap is making to the home.html cards when overlay is active*/
/* to-do: this is a band-aid to fix the most obvious visual issue; need to figure out why .card is getting overriden in the first place.*/
.card {
    --bs-card-border-width: 1px solid rgba(0, 0, 0, .125);
    --bs-card-border-radius: 20px;
}

/* ----- Account Welcome Screen Overlay -------------------------------*/
.welcome-card-container {
    display: flex;
    flex-direction: column;
    /* Stack children vertically */
    align-items: center;
    /* Center horizontally */
    justify-content: center;
    /* Center vertically */
    padding: 20px;
    min-height: 500px;
    /* Ensure enough height for content */
    margin-bottom: 20px;
}

.welcome-card-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center items vertically */
    width: 380px;
    min-height: 400px;
    /* Prevent collapse to height 0 */
    position: relative;
    /* Keep relative positioning */
}

.welcome-card-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 100%;
    box-sizing: border-box;
    border-radius: 15px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
    background-color: white;
    transition: transform 0.5s ease, opacity 0.5s ease;
    position: relative;
    /* Change to relative to prevent overflow */
}

.welcome-button-container {
    text-align: center;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center buttons horizontally */
}


.welcome-card-item.hidden {
    transform: translateX(100%);
    /* Off-screen to the right */
    opacity: 0;
    pointer-events: none;
}

.welcome-card-item.active {
    transform: translateX(0);
    /* Centered on the screen */
    opacity: 1;
    pointer-events: auto;
}

.welcome-card-item.prev-active {
    transform: translateX(-100%);
    /* Off-screen to the left */
    opacity: 0;
}

.welcome-card-body {
    margin: 20px
}

.welcometoaccount-card-item {
    min-width: 100%;
    box-sizing: border-box;
    border-radius: 15px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
}

/* ----- Tip Card CSS --------------------------------------------------- */
/* Phase 3: Changed tip overlay animation from slide-in to fade-in */
.tip-overlay {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.tip-overlay.show {
    opacity: 1;
}

.tip-card-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    min-height: 580px;
    height: auto;
    box-sizing: border-box;
    overflow: visible;
}

.tip-card-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 380px;
    position: relative;
    height: 100%;
    overflow: visible;
}

.tip-card-item {
    width: 100%;
    max-width: 100%;
    min-height: 550px;
    box-sizing: border-box;
    border-radius: 15px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
    background-color: white;
    transition: transform 0.5s ease, opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.tip-card-item.hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.tip-card-item.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.tip-card-item.prev-active {
    transform: translateX(-100%);
    opacity: 0;
}

/* Ensure content scrolls if it overflows */
.tip-card-body {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* width: auto; */
    max-height: 780px;
    padding-bottom: 10px;
    margin: 20px;
}

/* Fix Button Placement at Bottom */
.tip-button-container {
    text-align: center;
    margin-top: auto;
    padding-top: 10px;
    position: sticky;
    bottom: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    background-color: transparent !important;
}

.tip-button-container button {
    width: 45%;
    /* Set button width to 45% to fit two buttons */
    max-width: 180px;
    /* Optional: prevent them from getting too wide */
    margin: 5px 5px;
    /* Add some space between buttons */
    box-sizing: border-box;
    /* Consistent width handling */
}

/* Phase 3: Inside button container for title cards */
.tip-button-container-inside {
    text-align: center;
    margin-top: 30px;
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.tip-button-container-inside.tip-button-stack {
    flex-wrap: wrap;
    row-gap: 13px;
}

.tip-button-container-inside .tip-diagnostic-btn-inside {
    flex-basis: 100%;
}

.tip-button-container-inside button {
    width: 260px;
    max-width: 260px;
    margin: 0;
}

/* ----- Tip System V2 Styles ------------------------------------------ */

/* Tip overlay background image support */
.tip-overlay .tip-card-item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Vertical centering for tip content */
.tip-overlay .tip-card-item.tip-vertical-center {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
}

.tip-overlay .tip-card-item.tip-vertical-center .tip-card-body {
    flex-grow: 0 !important;
    margin: auto 20px !important;
}

/* Text color inversion for dark backgrounds */
.tip-overlay .tip-text-inverted {
    color: #ffffff !important;
}

.tip-overlay .tip-text-inverted .normtextlg,
.tip-overlay .tip-text-inverted .normtextsm {
    color: #ffffff !important;
}

.tip-overlay .tip-text-inverted .tip-card-body {
    color: #ffffff !important;
}

/* Ensure text is readable on background images */
.tip-overlay .tip-card-item[style*="background-image"] {
    position: relative;
}

/* Dark overlay for regular tips (shown during card play) */
.tip-overlay .tip-card-item[style*="background-image"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    z-index: 1;
}

/* Phase 3: Remove overlay for title cards (shown before cards) */
.tip-overlay .tip-card-item[data-is-title-card="true"][style*="background-image"]::before {
    background: none;
}

.tip-overlay .tip-card-item[style*="background-image"] .tip-card-body {
    position: relative;
    z-index: 2;
}

/* ----- Tip System V3 Phase 1 - Visual Redesign (2026-04-25) -----
   Scoped to .tip-card-item.tip-v3 so legacy tips are unaffected. The .tip-v3
   class is applied by renderTips() when the V3 engine is active or when
   title_media / intro_content are present (graceful upgrade for existing tips).
   Tokens come from §5A6 of Tip_System_V3_Phase1.md (subject to Figma confirmation). */
:root {
    --tip-overlay-bg: #E9E8FB;
    --tip-content-box-bg: #D9D7F6;
    --tip-hero-bg: #C9CCF3;
    --tip-accent-teal: #0CAFA0;
    --tip-accent-purple: #6F6AE4;
    --tip-text-primary: #1A1A2E;
    --tip-text-muted: #5C5C7A;
    --tip-cta-bg: #111111;
    --tip-cta-text: #FFFFFF;
    --tip-dot-inactive: #C9CCF3;
    --tip-dot-active: #6F6AE4;
}

.tip-overlay .tip-card-item.tip-v3 {
    background-color: var(--tip-overlay-bg);
    color: var(--tip-text-primary);
}

.tip-overlay .tip-card-item.tip-v3 .tip-card-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 16px 18px;
    padding-bottom: 6px;
}

/* Hero slot (top circular illustration) */
.tip-overlay .tip-card-item.tip-v3 .tip-hero-slot {
    margin: 8px auto 12px auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: var(--tip-hero-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tip-overlay .tip-card-item.tip-v3 .tip-hero-slot img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.tip-overlay .tip-card-item.tip-v3 .tip-title-row {
    text-align: center;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 4px 0 0 0;
    color: var(--tip-text-primary);
}

.tip-overlay .tip-card-item.tip-v3 .tip-intro-row {
    text-align: center;
    font-size: 0.875rem;
    margin: 4px 0 12px 0;
    color: var(--tip-text-muted);
    line-height: 1.4;
}

/* Darker-purple rounded content box wrapping content1/mediasource/content2/mediasource2/content3 */
.tip-overlay .tip-card-item.tip-v3 .tip-content-box {
    background-color: var(--tip-content-box-bg);
    border-radius: 16px;
    padding: 18px 16px;
    margin: 6px 0 14px 0;
    color: var(--tip-text-primary);
}

.tip-overlay .tip-card-item.tip-v3 .tip-content-box .tip-content1,
.tip-overlay .tip-card-item.tip-v3 .tip-content-box .tip-content2,
.tip-overlay .tip-card-item.tip-v3 .tip-content-box .tip-content3 {
    margin: 0;
    line-height: 1.5;
}

.tip-overlay .tip-card-item.tip-v3 .tip-content-box .tip-content2,
.tip-overlay .tip-card-item.tip-v3 .tip-content-box .tip-content3 {
    margin-top: 12px;
}

.tip-overlay .tip-card-item.tip-v3 .tip-content-box .tip-media-block {
    margin: 12px 0;
    text-align: center;
}

.tip-overlay .tip-card-item.tip-v3 .tip-content-box .tip-media-block img {
    max-width: 100%;
    height: auto;
    max-height: 240px;
    border-radius: 10px;
}

/* Page indicator dots */
.tip-overlay .tip-card-item.tip-v3 .tip-page-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 10px 0;
}

.tip-overlay .tip-card-item.tip-v3 .tip-page-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--tip-dot-inactive);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.tip-overlay .tip-card-item.tip-v3 .tip-page-dot.active {
    background-color: var(--tip-dot-active);
    transform: scale(1.2);
}

/* When background_image is set on a V3 tip, keep the content box readable */
.tip-overlay .tip-card-item.tip-v3[style*="background-image"] .tip-content-box {
    background-color: rgba(217, 215, 246, 0.92);
}

/* Inverted text variant */
.tip-overlay .tip-card-item.tip-v3.tip-text-inverted {
    color: #ffffff !important;
}

.tip-overlay .tip-card-item.tip-v3.tip-text-inverted .tip-title-row,
.tip-overlay .tip-card-item.tip-v3.tip-text-inverted .tip-intro-row,
.tip-overlay .tip-card-item.tip-v3.tip-text-inverted .tip-content-box {
    color: #ffffff !important;
}

.tip-overlay .tip-card-item.tip-v3.tip-text-inverted .tip-page-dot {
    background-color: rgba(255, 255, 255, 0.4);
}

.tip-overlay .tip-card-item.tip-v3.tip-text-inverted .tip-page-dot.active {
    background-color: #ffffff;
}

/* Pill-black primary CTA on V3 (applied to tip-button-container buttons inside V3 cards
   and the global tip-nextBtn / pickCardBtn when the active card is V3) */
.tip-overlay.tip-v3-active #tip-nextBtn,
.tip-overlay.tip-v3-active #tip-pickCardBtn,
.tip-overlay .tip-card-item.tip-v3 .tip-next-btn-inside,
.tip-overlay .tip-card-item.tip-v3 .tip-close-btn-inside {
    background-color: var(--tip-cta-bg) !important;
    color: var(--tip-cta-text) !important;
    border-color: var(--tip-cta-bg) !important;
    border-radius: 999px !important;
    font-weight: 600;
}

.tip-overlay.tip-v3-active #tip-prevBtn,
.tip-overlay .tip-card-item.tip-v3 .tip-prev-btn-inside {
    border-radius: 999px !important;
}

/* Mobile responsive (≥360px to desktop) */
@media (max-width: 480px) {
    .tip-overlay .tip-card-item.tip-v3 .tip-card-body {
        margin: 12px 12px;
    }
    .tip-overlay .tip-card-item.tip-v3 .tip-content-box {
        padding: 14px 12px;
    }
    .tip-overlay .tip-card-item.tip-v3 .tip-hero-slot {
        width: 80px;
        height: 80px;
    }
    .tip-overlay .tip-card-item.tip-v3 .tip-title-row {
        font-size: 1.1rem;
    }
}

/* V3 visual parity for welcome cards (#welcome_overlay path).
   Selector mirrors the .tip-card-item.tip-v3 block above but applies to
   .welcome-card-item.tip-v3 so we don't restyle legacy welcome decks. */
.welcome-card-item.tip-v3 {
    background-color: var(--tip-overlay-bg);
    color: var(--tip-text-primary);
}

.welcome-card-item.tip-v3 .welcome-card-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 16px 18px;
    padding-bottom: 6px;
}

.welcome-card-item.tip-v3 .tip-hero-slot {
    margin: 8px auto 12px auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: var(--tip-hero-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.welcome-card-item.tip-v3 .tip-hero-slot img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.welcome-card-item.tip-v3 .tip-title-row {
    text-align: center;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 4px 0 0 0;
    color: var(--tip-text-primary);
}

.welcome-card-item.tip-v3 .tip-intro-row {
    text-align: center;
    font-size: 0.875rem;
    margin: 4px 0 12px 0;
    color: var(--tip-text-muted);
    line-height: 1.4;
}

.welcome-card-item.tip-v3 .tip-content-box {
    background-color: var(--tip-content-box-bg);
    border-radius: 16px;
    padding: 18px 16px;
    margin: 6px 0 14px 0;
    color: var(--tip-text-primary);
}

.welcome-card-item.tip-v3 .tip-content-box .tip-content1,
.welcome-card-item.tip-v3 .tip-content-box .tip-content2,
.welcome-card-item.tip-v3 .tip-content-box .tip-content3 {
    margin: 0;
    line-height: 1.5;
}

.welcome-card-item.tip-v3 .tip-content-box .tip-content2,
.welcome-card-item.tip-v3 .tip-content-box .tip-content3 {
    margin-top: 12px;
}

.welcome-card-item.tip-v3 .tip-content-box .tip-media-block {
    margin: 12px 0;
    text-align: center;
}

.welcome-card-item.tip-v3 .tip-content-box .tip-media-block img {
    max-width: 100%;
    height: auto;
    max-height: 240px;
    border-radius: 10px;
}

.welcome-card-item.tip-v3 .tip-page-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 10px 0;
}

.welcome-card-item.tip-v3 .tip-page-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--tip-dot-inactive);
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.welcome-card-item.tip-v3 .tip-page-dot.active {
    background-color: var(--tip-dot-active);
    transform: scale(1.2);
}

/* ----- Tip System V2 Phase 2 - Hierarchical Admin Styles ----- */

/* Parent rows - white background */
.tip-parent-row {
    background-color: #ffffff !important;
}

.tip-parent-row:hover {
    background-color: #f8f9fa !important;
}

/* Child rows - darker gray background */
.tip-child-row {
    background-color: #d1d5db !important;
}

.tip-child-row:hover {
    background-color: #9ca3af !important;
}

/* More specific selectors for child rows */
table.table tbody.tip-children-container tr.tip-child-row {
    background-color: #d1d5db !important;
}

table.table tbody.tip-children-container tr.tip-child-row:hover {
    background-color: #9ca3af !important;
}

/* Override any potential Bootstrap table styling */
table.table tbody tr.tip-child-row {
    background-color: #d1d5db !important;
}

table.table tbody tr.tip-child-row:hover {
    background-color: #9ca3af !important;
}

/* Even more specific - target the exact structure */
table.table tbody.tip-children-container tr {
    background-color: #d1d5db !important;
}

table.table tbody.tip-children-container tr:hover {
    background-color: #9ca3af !important;
}

/* Debug: Make it very obvious if this works */
tr.tip-child-row {
    background-color: #ff0000 !important;
    /* Red for debugging */
}


/* Child container styling */
.tip-children-container {
    background-color: #f8f9fa;
}

/* Expand/collapse button styling */
.expand-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expand-btn i {
    font-size: 14px;
}

/* Navigation button styling */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Read-only field styling */
.form-control-plaintext {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    padding: 8px !important;
    border-radius: 4px !important;
}

/* Add Next Page button styling */
.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Tip children list styling */
.tip-children-container {
    display: none;
}

/* Page indicator styling */
.page-indicator {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
}

/* ----- Card Welcome Overlay styles ------------------------------------------ */

/* Countdown Overlay Styling */
#countdown_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    /* Dark translucent background */
    display: none;
    /* Hide by default to prevent interference */
    justify-content: center;
    align-items: center;
    z-index: 1200;
    /* Higher than other overlays when active */
    pointer-events: none;
    /* Prevent interaction when not active */
    transition: opacity 0.3s ease-in-out;
}

#countdown_overlay.show {
    display: flex;
    /* Make it visible only when active */
    pointer-events: all;
    /* Enable interaction when active */
}


.countdown-card {
    width: 80%;
    height: 75%;
    /* Cover 75% of the parent height */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    /* No background on the card */
}

.countdown-number {
    font-size: 10rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    /* Glow effect */
    animation: countdown-fade 1s ease-in-out;
}

@keyframes countdown-fade {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0.5;
        transform: scale(0.9);
    }
}

/* ----- Profile Page (Cleaned Up) ----------------------------- */

.profile-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    position: relative;
    min-height: 36px;
    cursor: pointer;
}

.profile-item span,
.profile-item .edit-icon {
    pointer-events: none;
}

.fake-input {
    display: inline-block;
    font-weight: bold;
    font-size: 0.95rem;
    padding: 4px 6px;
    height: 28px;
    line-height: 1.4;
}

/* Always hide edit-icon by default */
.edit-icon {
    display: none;
    cursor: pointer;
    margin-left: 6px;
    font-size: 1rem;
}

.edit-group {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
}

.edit-group input.form-control {
    height: 28px;
    max-width: 180px;
    font-weight: bold;
    font-size: 0.95rem;
    padding: 4px 6px;
    line-height: 1.4;
}

.profile-item button {
    height: 28px;
    padding: 2px 12px;
    font-size: 0.85rem;
    line-height: 1.2;
}

/* Mobile: Show visual field hint */
@media (max-width: 768px) {
    .fake-input {
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.verification-status {
    font-size: 0.9rem;
    line-height: 1.2;
    color: #888;
    padding-left: 2px;
}

/* ----- Leaderboard Page --------------------------------------------------- */

.report-text {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    color: rgb(40, 40, 40)
}

.report-text-bold {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    color: rgb(40, 40, 40)
}

.report-text-lite-bold {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    color: rgb(255, 255, 255)
}

.report-text-sm {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: normal;
    color: rgb(40, 40, 40)
}

.report-text-lite {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    color: rgb(180, 180, 180)
}

.report-text-lite-sm {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: normal;
    color: rgb(180, 180, 180)
}

.report-text-lg-bold {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    color: rgb(40, 40, 40)
}

.report-text-lite-lg-bold {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    color: rgb(255, 255, 255)
}

.report-text-xlg-bold {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    color: rgb(40, 40, 40)
}


/* Chart style added 2024-10-02 */
#myChart {
    max-width: 280px;
    max-height: 130px;
}

/* Media query for mobile devices added 2024-09-24 */
/* Media query for mobile devices */
@media only screen and (max-width: 768px) {
    #homenav {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1030;
        /* Ensures it stays on top of other elements */
    }

    .navbar-custom {
        flex-direction: column;
        text-align: center;
    }

    /* modified to remove drop-up style 12/17/24*/
    #homenav .dropdown-menu {
        top: 100%;
        /* Position dropdown directly below its parent */
        bottom: auto;
        /* Remove upward positioning */
        position: absolute;
    }
}

/* ----- AboutUs, TOS Styles --------------------------------------------------- */

.sidebar-nav-link {
    color: #ffb57d !important;
    font-size: 1.0em;
    padding: 10px 0;
}

.footer-container {
    color: #6c757d;
    /* Brighter text color (white) */
}

.footer-container a {
    color: #6c757d;
    /* Bright cyan for links */
    text-decoration: none;
    /* Optional: remove underlines */
}

.footer-container a:hover {
    color: rgb(60, 60, 60);
    /* Optional: change color on hover */
}

.inline-icon {
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
    margin: 0 3px;
}

/* 8/9/25 AI Generation Progress Bar */
#progressSection .progress {
    height: 25px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

#progressSection .progress-bar {
    min-width: 0;
    border-radius: 0;
    transition: all 0.3s ease;
    display: flex;
}

#progressSection .progress-bar>div {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

#progressSection .progress-bar>div:last-child {
    border-right: none;
}

#progressSection .progress-bar>div:hover {
    filter: brightness(1.1);
    transform: scaleY(1.05);
}

/* Progress bar segment colors */
#progressSection .progress-bar .bg-success {
    background-color: #28a745 !important;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

#progressSection .progress-bar .bg-primary {
    background-color: #007bff !important;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

#progressSection .progress-bar .bg-secondary {
    background-color: #6c757d !important;
}

/* --- Normalize dynamic header height to match static image tiles --- */
:root {
    --card-media-height: 237px;
    /* Desktop: increased by 10% from original 215px */
    --navbar-height: 75px;
    /* Navbar height - used for calculating offsets when navbar is hidden */
}

/* Reduce card image height for phones only (not tablets) */
@media (max-width: 600px) {
    :root {
        --card-media-height: 180px;
    }
}

/* This must be near the end of the file */
.card .card-img-top,
.card .cardlogo-bg {
    width: 100%;
    height: var(--card-media-height) !important;
    /* make it definitive */
    aspect-ratio: auto !important;
    /* don't let ratio fight fixed height */
    display: block;
    object-fit: cover;
}

/* Keep overlayed text from affecting height */
.cardlogo-bg {
    position: relative;
    overflow: hidden;
    background-image: url('../images/CardLogo_blankbg.png');
    /* robust path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* OLD CSS VERSION REMOVED - SVG text styling is now handled by .dynamic-text-svg class */

/* Connections page styles */

.connection-list .connection-item {
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    padding: 1rem 1.25rem;
}

.connection-list .connection-item:last-child {
    border-bottom: 0;
}

.connection-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    margin-right: 0.5rem;
    /* At least 5px spacing between badge and text */
    flex-shrink: 0;
}

.connection-text-wrapper {
    margin-left: 0.5rem;
    /* At least 5px spacing between badge and text */
    min-width: 0;
    /* Allow text to shrink if needed */
}

.connection-name {
    font-weight: 600;
}

.connection-meta {
    font-size: 0.85rem;
}

.connection-menu .btn {
    color: #6c757d;
}

.connection-menu .btn:hover {
    color: #212529;
}

/* Custom toggle switch for Performance Sharing (mobile-style slider) */
.custom-switch-wrapper {
    display: flex;
    align-items: center;
}

.custom-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.custom-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.custom-switch-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.custom-switch input:checked+.custom-switch-slider {
    background-color: #3FDC9A;
}

.custom-switch input:checked+.custom-switch-slider:before {
    transform: translateX(24px);
}

.custom-switch input:focus+.custom-switch-slider {
    box-shadow: 0 0 1px #3FDC9A;
}

/* Align profile dropdown nav item with other tabs */
.navbar-nav.nav-justified .nav-item.dropdown {
    display: flex;
    align-items: center;
    flex: 1 0 0;
}

.navbar-nav.nav-justified .nav-item.dropdown>.nav-link {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0.75rem !important;
    padding-bottom: 0.15rem !important;
    min-height: 4rem;
    margin-top: 0.2rem;
}

.navbar-nav.nav-justified .nav-item:not(.dropdown)>.nav-link>span+span {
    margin-top: -0.05rem !important;
}

/* ---------------------------------------------------------------------------
   Card UX V2 Phase 1
--------------------------------------------------------------------------- */

.lesson-session-shell {
    position: relative;
    --lesson-content-width: 380px;
    width: 100% !important;
    max-width: 560px;
    margin: 0 auto;
    padding: 20px 16px 140px;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh !important;
    height: 100dvh !important;
    background: #FFFFFF;
    perspective: none !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    min-width: 0;
    overflow: visible;
}

.lesson-session-shell:not(.lesson-shell-ready) #card-exit-btn,
.lesson-session-shell:not(.lesson-shell-ready) .lesson-why-row,
.lesson-session-shell:not(.lesson-shell-ready) #cardAnimate,
.lesson-session-shell:not(.lesson-shell-ready) #keypadContainer,
.lesson-session-shell:not(.lesson-shell-ready) #goBtnContainer,
.lesson-session-shell:not(.lesson-shell-ready) #cardBack {
    display: none !important;
}

body.mathquestions main,
body.mathquestions main>.container.justify-content-center.px-0 {
    min-height: 100vh;
    min-height: 100dvh;
    background: #FFFFFF;
}

.lesson-header-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    margin-bottom: 10px;
}

.lesson-header-row .exit-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 48px;
    height: 40px;
}

.lesson-header-row .exit-btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding-top: 0;
    color: #4D4D67;
    text-decoration: none;
}

.lesson-progress-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding-top: 19px;
}

.lesson-progress-track {
    width: calc(100% - 12px);
    max-width: 320px;
}

#progressBarAnsTrack1.progress {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: #E9EBF0;
}

.lesson-progress-text {
    color: #70757F;
    line-height: 1;
}

.lesson-tip-slot {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lesson-why-row {
    display: flex;
    justify-content: flex-end;
    min-height: 44px;
    margin-bottom: 10px;
}

.answer-helper-host {
    position: relative;
    display: none;
    align-items: center;
    justify-content: flex-end;
    min-height: 40px;
    min-width: 72px;
}

#cardAnimate.lesson-stage {
    position: relative;
    width: 100%;
    overflow: visible;
}

#cardAnimate.lesson-stage:has(#cardFront1.lesson-question-surface.lesson-multiple-choice-mode) {
    display: flex;
    align-items: center;
    min-height: calc(100dvh - 250px);
}

#cardAnimate.lesson-stage:has(#cardFront1.lesson-question-surface.lesson-multiple-choice-mode) #cardFront1.lesson-question-surface {
    width: 100%;
}

@media (min-width: 769px) {
    .lesson-progress-column {
        width: min(var(--lesson-content-width), calc(100vw - 114px));
    }

    .lesson-progress-track {
        width: 100%;
        max-width: none;
    }

    #cardAnimate.lesson-stage:has(#cardFront1.lesson-question-surface.lesson-columnar-mode),
    #cardAnimate.lesson-stage:has(#cardFront1.lesson-question-surface.lesson-sentence-mode),
    #cardAnimate.lesson-stage:has(#cardFront1.lesson-question-surface.lesson-multiple-choice-mode) {
        display: flex;
        align-items: center;
        min-height: calc(100dvh - 250px);
        padding-bottom: 170px;
        box-sizing: border-box;
    }

    #cardAnimate.lesson-stage:has(#cardFront1.lesson-question-surface.lesson-columnar-mode) #cardFront1.lesson-question-surface,
    #cardAnimate.lesson-stage:has(#cardFront1.lesson-question-surface.lesson-sentence-mode) #cardFront1.lesson-question-surface,
    #cardAnimate.lesson-stage:has(#cardFront1.lesson-question-surface.lesson-multiple-choice-mode) #cardFront1.lesson-question-surface {
        width: 100%;
    }
}

#cardFront1.lesson-question-surface,
.question-surface-clone {
    position: relative;
    width: 100%;
}

#cardFront1.lesson-question-surface,
#card-parent.lesson-session-shell #card-exit-btn {
    opacity: 1;
    pointer-events: auto;
}

#cardFront1.lesson-question-surface {
    z-index: 2;
}

.question-surface-clone {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: #FFFFFF;
}

#columnarContainer_front,
#sentenceContainer_front {
    background: #E8E6FF;
    border-radius: 24px;
    padding: 28px 20px;
    box-shadow: none;
    width: min(var(--lesson-content-width), calc(100vw - 32px));
    margin-left: auto !important;
    margin-right: auto !important;
}

#columnarContainer_front {
    margin-top: 10px;
}

#cardFront1.lesson-question-surface.lesson-columnar-mode #columnarContainer_front {
    padding-bottom: 138px;
}

#sentenceContainer_front {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cardFront1.lesson-question-surface.lesson-sentence-mode #sentenceContainer_front {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding-bottom: 24px;
}

#sentenceContainer_front.sequence-card {
    padding-top: 20px;
}

.lesson-tolerance {
    margin-top: 12px;
}

#cardFront1.lesson-question-surface.lesson-sentence-mode .lesson-tolerance {
    width: 100%;
    margin-top: 16px;
    margin-bottom: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.lesson-answer-row {
    display: flex;
    justify-content: center;
    width: min(var(--lesson-content-width), calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

#cardFront1.lesson-question-surface.lesson-sentence-mode .lesson-answer-row {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

#cardFront1.lesson-question-surface.lesson-sentence-mode .lesson-answer-input-wrap {
    max-width: 220px;
}

#cardFront1.lesson-question-surface.lesson-sentence-mode .lesson-input-wrapper {
    width: 100%;
    min-height: 60px;
    padding: 0 16px;
    background: #FFFFFF;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

#cardFront1.lesson-question-surface.lesson-sentence-mode .custom-input-sm {
    background: #FFFFFF;
}

#cardFront1.lesson-question-surface.lesson-columnar-mode .lesson-answer-row {
    position: relative;
    z-index: 3;
    margin-top: -110px;
}

.lesson-answer-input-wrap {
    width: 100%;
    max-width: 180px;
}

#cardFront1.lesson-question-surface.lesson-columnar-mode .lesson-answer-input-wrap {
    max-width: 164px;
}

.lesson-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-answer-status {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(38%, -34%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.inline-answer-status.visible {
    display: inline-flex;
}

.inline-answer-status.correct {
    background: #5ED28A;
}

.inline-answer-status.incorrect {
    background: #F05B5B;
}

#input-wrapper.is-correct input,
#input-wrapper.is-incorrect input {
    background: #FFFFFF;
}

#input-wrapper.is-readonly input {
    pointer-events: none;
    caret-color: transparent;
}

#input-wrapper.is-readonly input:focus {
    outline: none;
    box-shadow: none;
}

#multipleChoiceContainerFront {
    display: none;
    gap: 14px;
    margin-top: 24px;
    width: min(var(--lesson-content-width), calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
    pointer-events: auto;
}

#multipleChoiceContainerFront:not(.sequence-choice-layout) {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

#multipleChoiceContainerFront.sequence-choice-layout {
    display: flex !important;
    flex-wrap: wrap;
}

#multipleChoiceContainerFront .choice-btn {
    position: relative;
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #E6E7EC;
    background: #FFFFFF;
    color: #222222;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    pointer-events: auto;
    cursor: pointer;
}

#multipleChoiceContainerFront .choice-btn.mc-selected {
    background: #E8E6FF !important;
    border-color: #E8E6FF !important;
    color: #222222 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

#multipleChoiceContainerFront .choice-btn.mc-selected:hover,
#multipleChoiceContainerFront .choice-btn.mc-selected:focus,
#multipleChoiceContainerFront .choice-btn.mc-selected:active {
    background: #E8E6FF !important;
    border-color: #E8E6FF !important;
    color: #222222 !important;
    outline: none;
}

#multipleChoiceContainerFront .choice-btn.correct-answer,
#multipleChoiceContainerFront .choice-btn.mc-correct-highlight {
    background: #B4FCCE !important;
    border-color: #B4FCCE !important;
    color: #222222 !important;
    opacity: 1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

#multipleChoiceContainerFront .choice-btn.wrong-answer {
    background: #FFDDDC !important;
    border-color: #FFDDDC !important;
    color: #222222 !important;
    opacity: 1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

#multipleChoiceContainerFront .choice-btn.neutral-answer {
    opacity: 0.85;
}

.choice-status-marker {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
}

.choice-status-marker.correct {
    background: #5ED28A;
}

.choice-status-marker.incorrect {
    background: #F05B5B;
}

.lesson-action-bar {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    transform: translateX(-50%);
    width: min(var(--lesson-content-width), calc(100vw - 32px));
    z-index: 30;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
}

.lesson-v2-action-btn {
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: #1F1F1F !important;
    border: 1px solid #1F1F1F !important;
    color: #FFFFFF !important;
    box-shadow: none;
}

#sentenceContainer_front #sentenceQuestion1 {
    width: 100%;
    margin: 0;
    position: static;
    top: auto;
    transform: none;
}

.lesson-v2-action-btn:disabled {
    background-color: #D9D9D9 !important;
    border-color: #D9D9D9 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    box-shadow: none;
}

#cardBack.lesson-result-panel {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    transform: translateY(calc(100% + 24px));
    width: min(560px, 100vw);
    min-height: 170px;
    padding: 24px 16px calc(96px + env(safe-area-inset-bottom, 0px));
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.12);
    z-index: 35;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 280ms ease-out, opacity 180ms ease-out;
}

#cardBack.lesson-result-panel.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#cardBack.lesson-result-panel.is-correct {
    background: #B4FCCE;
}

#cardBack.lesson-result-panel.is-incorrect {
    background: #FFDDDC;
}

.lesson-result-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
    justify-content: space-between;
    padding-top: 6px;
}

.lesson-result-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    width: min(var(--lesson-content-width), calc(100vw - 32px));
    margin: 0 auto;
}

.lesson-result-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1F1F1F;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.lesson-result-icon-btn:focus-visible {
    outline: 2px solid rgba(31, 31, 31, 0.25);
    outline-offset: 2px;
    border-radius: 8px;
}

.lesson-result-icon-btn i {
    pointer-events: none;
}

.lesson-result-message-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    width: min(var(--lesson-content-width), calc(100vw - 32px));
    margin: 0 auto;
    overflow: visible;
    animation: none !important;
    transition: none !important;
}

.lesson-result-character {
    width: 80px;
    height: 80px;
    margin-top: -38px;
    position: relative;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 118%;
    transform: translateX(6px);
    animation: none !important;
    transition: none !important;
}

#cardBack.lesson-result-panel.is-correct .lesson-result-character {
    background-image: url("/static/images/round_perfect_v3.png");
}

#cardBack.lesson-result-panel.is-incorrect .lesson-result-character {
    background-image: url("/static/images/round_empathic_v3.png");
}

.lesson-result-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: calc(100% - 20px);
    justify-self: end;
    margin-top: 8px;
    min-width: 0;
    min-height: 56px;
    padding: 12px 22px;
    background: #FFFFFF;
    border-radius: 999px;
    text-align: center;
    font-size: 1.08rem !important;
    font-weight: 600;
    color: #333333 !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

.lesson-result-bubble::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 18px solid #FFFFFF;
    transform: rotate(30deg);
}

.lesson-result-secondary {
    display: none;
}

.lesson-result-actions {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    transform: translateX(-50%);
    width: min(var(--lesson-content-width), calc(100vw - 32px));
    z-index: 36;
}

#cardFront1.lesson-slide-in {
    animation: lessonCardSlideIn 280ms ease-out;
}

.question-surface-clone.is-sliding-out {
    animation: lessonCardSlideOut 280ms ease-out forwards;
}

@keyframes lessonCardSlideIn {
    from {
        opacity: 0;
        transform: translateX(26px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes lessonCardSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-26px);
    }
}

.legacy-runtime-support {
    display: none !important;
}

.lesson-session-shell #keypadContainer {
    position: fixed;
    left: 50%;
    bottom: 86px;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px));
    z-index: 28;
    background: #FFFFFF;
}

@media (max-width: 768px) {
    .lesson-session-shell {
        padding-bottom: 350px;
    }

    #cardAnimate.lesson-stage:has(#cardFront1.lesson-question-surface.lesson-multiple-choice-mode) {
        min-height: calc(100dvh - 250px);
        padding-bottom: 190px;
        box-sizing: border-box;
    }

    #cardBack.lesson-result-panel {
        width: 100vw;
        max-width: 100vw;
        min-height: 230px;
        padding-top: 16px;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }

    .lesson-result-toolbar {
        gap: 10px;
    }

    .lesson-result-icon-btn {
        width: 22px;
        height: 22px;
        font-size: 0.95rem;
    }

    .lesson-result-message-row {
        gap: 10px;
        grid-template-columns: 72px minmax(0, 1fr);
        width: min(var(--lesson-content-width), calc(100vw - 32px));
    }

    .lesson-result-character {
        width: 72px;
        height: 72px;
        margin-top: -22px;
    }
}

/* =================================================================
   User Feedback Overlay (Phase 1, 2026-04-21)
   Triggered by #resultFlagBtn on the Results panel. Mirrors the
   existing .overlay + .overlay.show toggle pattern used by
   #tip_overlay and #countdown_overlay. Feature logic in
   static/js/lesson_runtime/lesson_session_feedback.js.
   Spec: prompts/End User Features/User Feedback/user_feedback_collection.md
   ================================================================= */
.feedback-overlay {
    /* .overlay already gives us fixed full-viewport + centered flex. */
    padding: 16px;
}

.feedback-overlay .feedback-panel {
    background: #fff;
    border-radius: 14px;
    padding: 22px 20px 18px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    position: relative;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.feedback-overlay .feedback-close {
    /* Card UX V2 Phase 1 fix (2026-04-28): close button anchored to top-RIGHT
       per the user_feedback_collection.md spec (§4b1a "X button top-right").
       Was previously at `left: 10px` which sat directly above and partially
       overlapping the "What's wrong with this question?" title's left edge. */
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: 0;
    font-size: 1.1rem;
    color: #888;
    padding: 6px 8px;
    line-height: 1;
    cursor: pointer;
}
.feedback-overlay .feedback-close:hover { color: #333; }

.feedback-overlay .feedback-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: #222;
}

.feedback-overlay .feedback-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 14px;
}

.feedback-overlay .feedback-reasons {
    border: 0;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feedback-overlay .feedback-reason {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f7f8fa;
    cursor: pointer;
    font-size: 0.95rem;
    color: #222;
}
.feedback-overlay .feedback-reason:hover { background: #eef1f5; }
.feedback-overlay .feedback-reason input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #FF8A00;
    cursor: pointer;
    flex-shrink: 0;
}

.feedback-overlay .feedback-comment-label {
    display: block;
    font-size: 0.9rem;
    color: #444;
    margin: 2px 2px 6px;
}

.feedback-overlay .feedback-comment {
    width: 100%;
    border: 1px solid #d0d4da;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 72px;
    max-height: 180px;
    font-family: inherit;
}
.feedback-overlay .feedback-comment:focus {
    outline: none;
    border-color: #FF8A00;
    box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.15);
}

.feedback-overlay .feedback-comment-meta {
    display: flex;
    justify-content: flex-end;
    margin: 2px 2px 12px;
}
.feedback-overlay .feedback-char-count {
    font-size: 0.78rem;
    color: #888;
}
.feedback-overlay .feedback-char-count.is-near-limit { color: #b36b00; }
.feedback-overlay .feedback-char-count.is-at-limit { color: #c0392b; font-weight: 600; }

.feedback-overlay .feedback-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Comment area is hidden until the learner checks "Something else". */
.feedback-overlay .feedback-comment-region[hidden] { display: none; }
.feedback-overlay .feedback-comment-region {
    margin-top: 4px;
    margin-bottom: 12px;
}

.feedback-overlay .feedback-error {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fdecea;
    color: #842029;
    font-size: 0.85rem;
}

/* Card UX V2 Phase 1 fix (2026-04-28): removed the mobile bottom-sheet
   override (`align-items: flex-end`, top-rounded corners only,
   `max-height: 85vh`, extra `padding-bottom`). The original feedback overlay
   was designed as a vertically-centered modal on all viewports; the
   bottom-sheet treatment had crept in and was visually pinning the panel
   to the bottom edge on mobile (see screenshot 2026-04-28). The base
   `.feedback-overlay` rules above (centered flex layout via `.overlay`,
   `width: 100%; max-width: 440px`, `max-height: calc(100vh - 32px)`,
   `padding: 16px` on the overlay, all-corners `border-radius: 14px` on
   the panel) already give a clean centered modal on small screens. */


/* Active/filled state for the Flag icon when feedback has been submitted.
   The JS flips the <i> element's class via data-icon-default / data-icon-active,
   but we also paint the wrapper button so the state reads well visually. */
#resultFlagBtn[aria-pressed="true"] {
    color: #FF8A00;
}

/* Toast used by the feedback flow (and reusable). */
.feedback-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    background: #222;
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1100;
}
.feedback-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Card UX V2 Phase 2 — scoped under .lvup-shell-v2
   Phase B: Step 0 interstitial (celebration / empathic landing)
   ============================================================ */

/* Step 0 fills the viewport with a celebratory or empathic backdrop.
   When .active, override the inherited .lvup-page { display:block } with flex centering. */
.lvup-shell-v2 .lvup-page0 {
    width: 100%;
    box-sizing: border-box;
}
.lvup-shell-v2 .lvup-page0.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
}
.lvup-shell-v2 .lvup-page0--win {
    background-color: #BAFBCD;
}
.lvup-shell-v2 .lvup-page0--loss {
    background-color: #FFDDDC;
}
.lvup-shell-v2 .lvup-interstitial-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 420px;
    text-align: center;
}
.lvup-shell-v2 .lvup-interstitial-hero {
    width: 100%;
    /* Card UX V2 Phase 2 fix (2026-04-28): reduced 25% (280 → 210 mobile,
       320 → 240 desktop in the @media block below) — the celebratory /
       empathic character was visually dominating the title above the
       Continue CTA at the original size. */
    max-width: 210px;
    height: auto;
    display: block;
}
.lvup-shell-v2 .lvup-interstitial-title {
    margin: 0;
    font-family: inherit;
    font-size: 2.4rem;
    font-weight: 800;
    color: #000000;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

@media (min-width: 768px) {
    .lvup-shell-v2 .lvup-interstitial-hero {
        max-width: 240px;
    }
    .lvup-shell-v2 .lvup-interstitial-title {
        font-size: 2.8rem;
    }
}

/* ============================================================
   Card UX V2 Phase 2 — Phase C: Card chrome neutralizers
   Drops the white card / fixed 360x600 / border / shadow on the
   standard post-round steps only. Challenge step pages sit OUTSIDE
   .lvup-shell-v2, so their existing chrome is preserved.
   ============================================================ */

/* Card UX V2 Phase 2 (Apr 2026): SF-Pro-first font stack for the entire
   V2 post-round shell. Apple devices render real SF Pro via -apple-system /
   BlinkMacSystemFont; non-Apple platforms fall back to Inter (already
   preloaded in levelup.html head <link rel="preconnect" + Google Fonts
   stylesheet>). Inter is the closest cross-platform match to SF Pro at
   matching weights, so this is the closest we can get to the Figma without
   licensing SF Pro itself. Scoped to .lvup-shell-v2 so the legacy
   challenge pages and other templates are untouched. */
.lvup-shell-v2 {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro',
        'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Card-less full-bleed shell when a standard step is active.
   levelup.html extends base.html which wraps content in a Bootstrap .container
   (max-width 1140px). We additionally turn the <body> white and lift its
   overflow lock so the V2 shell visually fills the viewport on desktop and
   scrolls when content overflows on small viewports. The :has() selector
   ensures these only apply when a V2 standard step is active — challenge
   pages live OUTSIDE .lvup-shell-v2, so they keep the dark backdrop. */
.lvup-shell-v2:has(.lvup-page.active) {
    background-color: #FFFFFF;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}
body.levelup:has(.lvup-shell-v2 .lvup-page.active) {
    background-color: #FFFFFF !important;
    overflow-y: auto !important;
}

/* Drop the chrome dimensions on the standard pages.
   - 96px top padding gives the title comfortable breathing room from the
     viewport edge so it reads as a true H1 rather than chrome text.
   - 200px bottom padding clears the fixed CTA stack: secondary at safe+35,
     primary at safe+97 (= safe+35 + 52 + 10), plus a small cushion above. */
.lvup-shell-v2 .lvup-page1 .card-container-levelup,
.lvup-shell-v2 .lvup-page1B .card-container-levelup,
.lvup-shell-v2 .lvup-page2 .card-container-levelup,
.lvup-shell-v2 .lvup-page3 .card-container-levelup,
.lvup-shell-v2 .lvup-page4 .card-container-levelup {
    height: auto !important;
    min-width: 0 !important;
    width: 100%;
    max-width: 480px;
    padding: 96px 16px 200px;
    margin: 0 auto !important;
    box-sizing: border-box;
}

.lvup-shell-v2 .lvup-page1 .custom-card-levelup,
.lvup-shell-v2 .lvup-page1B .custom-card-levelup,
.lvup-shell-v2 .lvup-page2 .custom-card-levelup,
.lvup-shell-v2 .lvup-page3 .custom-card-levelup,
.lvup-shell-v2 .lvup-page4 .custom-card-levelup {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    position: relative !important;
}

.lvup-shell-v2 .lvup-page1 .card-front-levelup,
.lvup-shell-v2 .lvup-page1B .card-front-levelup,
.lvup-shell-v2 .lvup-page2 .card-front-levelup,
.lvup-shell-v2 .lvup-page3 .card-front-levelup,
.lvup-shell-v2 .lvup-page4 .card-front-levelup {
    background-color: transparent;
    border: none;
}

.lvup-shell-v2 .lvup-page1 .card-face-levelup,
.lvup-shell-v2 .lvup-page1B .card-face-levelup,
.lvup-shell-v2 .lvup-page2 .card-face-levelup,
.lvup-shell-v2 .lvup-page3 .card-face-levelup,
.lvup-shell-v2 .lvup-page4 .card-face-levelup {
    box-shadow: none;
    position: relative;
    border-radius: 0;
    height: auto;
    width: 100%;
}

/* ============================================================
   Card UX V2 Phase 2 — Phase D: Palette, typography, stat tiles, CTAs
   Palette source: spec §6h. Active CTA = black pill (#000000 / #FFFFFF),
   primary green = #6AF79C / tint = #BAFBCD. Stat tiles track Phase 1.
   ============================================================ */

/* Titles ----------------------------------------------------------
   Larger and weightier so they balance against the bottom CTA stack. */
.lvup-shell-v2 .levelup_title {
    color: #000000;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.15;
    margin-top: 4px;
    margin-bottom: 12px;
}
@media (min-width: 768px) {
    .lvup-shell-v2 .levelup_title {
        font-size: 2.4rem;
    }
}

.lvup-shell-v2 #levelup_subtitle_txt,
.lvup-shell-v2 .levelup_subtitle_txt {
    color: #444444;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 12px;
}

.lvup-shell-v2 .levelup_xp_message,
.lvup-shell-v2 .levelup_body_text {
    color: #444444;
    font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────
   Card UX V2 Phase 2 (Apr 2026): Round-summary "results" panel.
   Wraps both rotating-hero slides (the 3-bar `compareChart` and the
   `level-performance` history chart) in a soft gray card to match the
   Figma. Scoped tightly to .lvup-shell-v2 .lvup-page1 so the challenge
   pages (which intentionally sit outside the shell) keep their legacy
   full-bleed look. The dot-navigation stays outside the card.
   ───────────────────────────────────────────────────────────────── */

/* Bump container height so the new gray-card padding + larger chart
   canvas don't get clipped (legacy is 170px). Width is constrained to
   380px to match the Claim MPs button (.xp-button-container width:
   min(380px, 100vw - 32px) elsewhere in this file). */
.lvup-shell-v2 .lvup-page1 .round-hero-container {
    height: 215px;
    max-width: 380px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.lvup-shell-v2 .lvup-page1 .round-hero-slide {
    /* Card UX V2 Phase 2 (Apr 2026): gray fill + 10px radius per Figma. */
    background-color: #F6F7F9;
    border-radius: 10px;
    padding: 14px 12px 16px;
    box-sizing: border-box;
}

/* Stat-tile row: same 380px width as the chart card and the Claim MPs
   button, so all three pieces share the same outer left/right edges.
   The Bootstrap .row's gutter padding is neutralized and the two tiles
   flex equally with a tight 8px gap, so each tile is ~50% wide and the
   outer edges align with the Claim MPs button. Scoped via the new
   .lvup-stat-row class on lvup-page1 only — the math-diagnostic and
   challenge-result templates use the same .row + .col-5 markup but
   omit this class, so they keep their legacy column gutters. */
.lvup-shell-v2 .lvup-page1 .lvup-stat-row {
    max-width: 380px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    --bs-gutter-x: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.lvup-shell-v2 .lvup-page1 .lvup-stat-row > .col-5 {
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.lvup-shell-v2 .lvup-page1 .lvup-stat-row > .col-5 > .stat-box {
    width: 100%;
}

.lvup-shell-v2 .lvup-page1 .round-hero-title-container {
    margin: 0 0 4px 0;
    justify-content: center;
}

.lvup-shell-v2 .lvup-page1 .levelup_info_title {
    font-size: 13px;
    font-weight: 600;
    color: #1F1F1F;
    text-align: center;
    margin: 0;
}

/* Tighten the chart canvas inside the gray card so it doesn't fight the
   parent padding. The legacy #compare-chart-container max-width still
   applies on non-V2 templates. */
.lvup-shell-v2 .lvup-page1 #compare-chart-container {
    max-width: none;
    width: 100%;
    height: 150px;
    max-height: 150px;
}

.lvup-shell-v2 .lvup-page1 #compareChart {
    width: 100% !important;
    max-width: 100%;
    height: 150px !important;
    max-height: 150px;
}

/* Stat tiles ------------------------------------------------------
   Card UX V2 Phase 2 (Apr 2026): flat-card layout per Figma.
   Value (with status icon for accuracy) on top in large black text;
   small descriptor label below. The legacy .stat-header was an
   absolutely-positioned colored "header strip" — we override that here
   to act as the bottom label instead. Scoped to .lvup-shell-v2 so
   challenge pages and the math diagnostic keep the legacy strip look.
   Existing JS swap of correct1.png↔incorrect1.png on the accuracy tile
   (driven by status1 / accuracy threshold) is preserved.
   --------------------------------------------------------------- */
.lvup-shell-v2 .stat-box {
    border: none !important;
    border-radius: 16px;
    box-shadow: none !important;
    padding: 14px 16px;
    min-height: 78px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.lvup-shell-v2 .stat-header {
    /* Now functions as the bottom descriptor label (was a colored strip).
       Per Figma: regular weight, near-black #000000, no bolding. */
    order: 2;
    position: static !important;
    background-color: transparent !important;
    width: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 2px 0 0 0 !important;
    top: auto !important;
    left: auto !important;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
    color: #000000;
}

.lvup-shell-v2 .stat-value {
    /* Per Figma: not bold (Medium / 500 keeps the value heavier than the
       label without crossing into bold), color #101010. */
    order: 1;
    margin-top: 0;
    font-size: 26px;
    font-weight: 500;
    color: #101010 !important;
    line-height: 1.05;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Bump the accuracy-tile status icon (correct1.png / incorrect1.png) so
   it reads at the new larger value size. */
.lvup-shell-v2 .stat-value img {
    width: 22px !important;
    height: 22px !important;
    margin-right: 2px;
}

/* Accuracy tile — pale yellow per Figma. */
.lvup-shell-v2 .accuracy-box {
    background-color: #FEF9C2 !important;
}
.lvup-shell-v2 .accuracy-header {
    color: #000000 !important;
}
.lvup-shell-v2 .accuracy-rightanswer {
    color: #101010 !important;
}

/* Answer-time tile — pale mint per Figma. */
.lvup-shell-v2 .time-box {
    background-color: #B4FBCD !important;
}
.lvup-shell-v2 .time-header {
    color: #000000 !important;
}
.lvup-shell-v2 .time-rightanswer {
    color: #101010 !important;
}

/* Wrong-state hooks (spec §6b4): the existing `.wronganswer` class is
   added to the value div by initializePage() when accuracy/timer fail.
   Preserve red value text and match the new (non-bold) weight + size. */
.lvup-shell-v2 .stat-value.wronganswer {
    color: #ce170b !important;
    font-size: 26px;
    font-weight: 500;
}

/* Daily MP meter tile retains its orange identity — still a "header on
   top" tile on lvup-page1B. Restore the stacked layout there so the V2
   stat-box overrides above don't flip the order. */
.lvup-shell-v2 .xpmeter-box {
    background-color: #FFF5E5 !important;
    align-items: center !important;
    padding: 20px 12px 16px !important;
    min-height: 92px;
}
.lvup-shell-v2 .xpmeter-header {
    order: 0 !important;
    position: absolute !important;
    background-color: #FF8A00 !important;
    color: #FFFFFF !important;
    border-radius: 16px 16px 0 0 !important;
    width: calc(100% + 4px) !important;
    left: -2px !important;
    top: -5px !important;
    padding: 2px 0 !important;
    text-align: center !important;
    margin: 0 !important;
}
.lvup-shell-v2 .xpmeter-rightanswer {
    order: 0;
    color: #FF8A00 !important;
    margin-top: 18px;
    font-size: 24px;
}

/* CTAs ------------------------------------------------------------
   Mirror the in-round .lesson-action-bar placement so the primary CTA
   always lands at the same Y position across post-round pages — fixed
   to the bottom of the viewport, with a 35px clearance above the
   safe-area inset (15px more than the in-round 20px so the desktop view
   doesn't read as "stuck to the bottom").

   The primary button sits at safe + 97px:
     - On lvup-page2 standalone, secondary occupies safe + 35px and primary
       lands one button + gap above it (52 + 10 = 62), so 35 + 62 = 97.
     - On lvup-page1 / 1B and on lvup-page2 plan modes there is no secondary,
       so the container itself anchors at 97px to keep the primary aligned.

   - .xp-button-container wraps Claim MPs / Continue on lvup-page1 / 1B
     (single primary CTA).
   - .levelup-button-container wraps the Retry / Go-to-Next / planStreakBtn
     stack on lvup-page2 (and is also used by challenge pages, but those
     sit outside .lvup-shell-v2 so they keep their legacy positioning).

   flex-direction: column keeps the primary visually on top of the secondary
   (HTML order matches visual order). The "Create Practice Reminder" link
   is pulled out of the flex flow and floated above the container so it
   doesn't shift the primary off its target Y. */
.lvup-shell-v2 .levelup-button-container,
.lvup-shell-v2 .xp-button-container {
    position: fixed !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 35px) !important;
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: min(380px, calc(100vw - 32px)) !important;
    max-width: 380px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}

/* Single-primary containers (Page 1 / 1B Claim MPs / Continue, and the plan-mode
   single-primary path on lvup-page2) shift up so the primary's bottom edge lines
   up with the primary on the standalone Page 2 (where the secondary occupies
   the safe + 35px slot). */
.lvup-shell-v2 .xp-button-container,
.lvup-shell-v2 .levelup-button-container:not(:has(.levelup-action-btn:not(.is-primary))) {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 97px) !important;
}

/* Defensive: hide any CTA container whose owning page is not the active one.
   Browsers normally hide descendants of display:none parents, but the fixed
   positioning + V2 :has() shell wrapper has been observed to leak in some cases.
   This guarantees only the active page's CTA stack is visible. */
.lvup-shell-v2 .lvup-page:not(.active) .levelup-button-container,
.lvup-shell-v2 .lvup-page:not(.active) .xp-button-container {
    display: none !important;
}

/* Primary CTAs — full-width black pill matching .lesson-v2-action-btn. */
.lvup-shell-v2 .levelup-button,
.lvup-shell-v2 .levelup-retry-btn,
.lvup-shell-v2 .levelup-action-btn.is-primary {
    background-color: #1F1F1F !important;
    border: 1px solid #1F1F1F !important;
    color: #FFFFFF !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.lvup-shell-v2 .levelup-button:hover,
.lvup-shell-v2 .levelup-button:focus,
.lvup-shell-v2 .levelup-retry-btn:hover,
.lvup-shell-v2 .levelup-retry-btn:focus,
.lvup-shell-v2 .levelup-action-btn.is-primary:hover,
.lvup-shell-v2 .levelup-action-btn.is-primary:focus {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #FFFFFF !important;
}

/* Secondary CTA — white pill with black outline, same height as primary. */
.lvup-shell-v2 .levelup-action-btn {
    background-color: #FFFFFF !important;
    border: 1px solid #1F1F1F !important;
    color: #1F1F1F !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.lvup-shell-v2 .levelup-action-btn:hover,
.lvup-shell-v2 .levelup-action-btn:focus {
    background-color: #F5F5F5 !important;
    color: #1F1F1F !important;
}

/* Calendar reminder helper link is positioned absolutely above the CTA stack so
   it doesn't take part in the flex flow — that way the primary button's Y
   stays consistent regardless of whether the link is rendered. */
.lvup-shell-v2 .levelup-button-container .text-center {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    text-align: center !important;
}
.lvup-shell-v2 .levelup-button-container .calendar-link {
    font-size: 0.85rem;
    color: #666666;
}

/* ============================================================
   Card UX V2 Phase 2 — Phase E: Leaderboard redesign
   Disc avatars replace medal column; lighter rows; soft pill highlight
   for the current user (#BAFBCD per spec §6e3a).
   ============================================================ */

.lvup-shell-v2 .leaderboard-box {
    border: none !important;
    background-color: transparent !important;
    padding: 4px 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.lvup-shell-v2 .leaderboard-row {
    font-size: 1rem;
    font-weight: 500;
    padding: 8px 12px;
    margin: 2px 0;
    line-height: 1.3;
    border-bottom: none;
    border-radius: 12px;
}

.lvup-shell-v2 .leaderboard-row.highlight {
    background-color: #BAFBCD;
    font-weight: 700;
    border-radius: 12px;
}

.lvup-shell-v2 .leaderboard-rank {
    color: #000000;
    font-weight: 600;
    font-size: 0.95rem;
}
.lvup-shell-v2 .leaderboard-name {
    color: #000000;
    font-weight: 500;
}
.lvup-shell-v2 .leaderboard-xp {
    color: #000000;
    font-weight: 600;
}

.lvup-shell-v2 .leaderboard-ellipsis-row {
    color: #BBBBBB;
    font-size: 0.95rem;
    letter-spacing: 4px;
    padding: 4px 0;
}

/* Card UX V2 Phase 2: leaderboard row uses an explicit flex layout instead of
   Bootstrap's col widths. Bootstrap's mobile col-N values are too narrow to hold
   the enlarged avatar disc without overlapping its neighbors, so we override
   width / padding / flex on each cell while keeping the col-* classes for
   backwards compatibility. The ellipsis row keeps its original col-12 layout
   because we only target rows that have an explicit cell helper class. */
.lvup-shell-v2 .leaderboard-row:not(.leaderboard-ellipsis-row) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    column-gap: 10px;
}
.lvup-shell-v2 .leaderboard-row .leaderboard-cell-rank,
.lvup-shell-v2 .leaderboard-row .leaderboard-cell-avatar,
.lvup-shell-v2 .leaderboard-row .leaderboard-name,
.lvup-shell-v2 .leaderboard-row .leaderboard-xp {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
}
.lvup-shell-v2 .leaderboard-row .leaderboard-cell-rank {
    flex: 0 0 38px;
    width: 38px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lvup-shell-v2 .leaderboard-row .leaderboard-cell-avatar {
    /* Card UX V2 Phase 2: avatar cell shrunk from 52->40px (~25% smaller)
       to match the slimmer .lb-disc and reduce per-row height so more
       leaderboard entries fit without scrolling. */
    flex: 0 0 40px;
    width: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lvup-shell-v2 .leaderboard-row .leaderboard-name {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}
.lvup-shell-v2 .leaderboard-row .leaderboard-xp {
    flex: 0 0 auto;
    width: auto !important;
    white-space: nowrap;
}

/* Avatar disc — per-user deterministic color set by discColorForKey() in JS.
   Card UX V2 Phase 2: shrunk 50->38px (~25% reduction) so the leaderboard
   row height drops and more entries fit without scrolling. Font-size
   nudged down proportionally so the letter still reads centered. */
.lvup-shell-v2 .lb-disc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #888888;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    text-transform: uppercase;
}

/* Card UX V2 Phase 2: rank disc — sits to the LEFT of the avatar disc.
   Top 3 use the medal SVGs as background art (numerals are NOT baked into the
   SVGs and are overlaid via .lb-rank-disc__num). Ranks 4+ use a primary-green
   standard disc that is intentionally smaller than the medals to match Figma.
   Numerals nudge slightly downward on medals so they land on the medal face
   rather than the ribbon. */
.lvup-shell-v2 .lb-rank-disc {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 38px;
    vertical-align: middle;
}
.lvup-shell-v2 .lb-rank-disc__num {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    color: #1F1F1F;
    pointer-events: none;
}

/* Standard (rank >= 4) disc is visibly smaller than the medals. */
.lvup-shell-v2 .lb-rank-disc--standard {
    width: 26px;
    height: 26px;
    background-color: #6AF79C;
    border-radius: 50%;
}
.lvup-shell-v2 .lb-rank-disc--standard .lb-rank-disc__num {
    color: #00592C;
    font-size: 0.8rem;
}

/* Medals — SVG painted as background, scaled slightly past the box so the
   medal disc fills more of the container and the overlaid numerals look
   proportionate. The ribbon edges are gently cropped by overflow:hidden. */
.lvup-shell-v2 .lb-rank-disc--gold,
.lvup-shell-v2 .lb-rank-disc--silver,
.lvup-shell-v2 .lb-rank-disc--bronze {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 115%;
    overflow: visible;
}
.lvup-shell-v2 .lb-rank-disc--gold {
    background-image: url('/static/svgs/leaderboard_gold_v1.svg');
}
.lvup-shell-v2 .lb-rank-disc--silver {
    background-image: url('/static/svgs/leaderboard_silver_v1.svg');
}
.lvup-shell-v2 .lb-rank-disc--bronze {
    background-image: url('/static/svgs/leaderboard_bronze_v1.svg');
}
/* Medal disc center sits at ~57% Y in the source SVG (ribbon occupies the top).
   Pull the numeral down so it lands on the medal face. Each numeral picks up
   the medal's stroke color so the digit reads as part of the medal accent. */
.lvup-shell-v2 .lb-rank-disc--gold .lb-rank-disc__num,
.lvup-shell-v2 .lb-rank-disc--silver .lb-rank-disc__num,
.lvup-shell-v2 .lb-rank-disc--bronze .lb-rank-disc__num {
    top: 60%;
}
.lvup-shell-v2 .lb-rank-disc--gold .lb-rank-disc__num {
    color: #F09B38;
}
.lvup-shell-v2 .lb-rank-disc--silver .lb-rank-disc__num {
    color: #7C8D9F;
}
.lvup-shell-v2 .lb-rank-disc--bronze .lb-rank-disc__num {
    color: #B86716;
}

/* Card UX V2 Phase 2: "below top-N" self row — the appended row a user
   sees when their rank is > limit (e.g. 23 or 238). Two- and three-digit
   ranks don't fit comfortably inside the small green standard disc, so
   we drop the disc entirely and present the rank as plain dark text. The
   parent .lb-rank-disc still defines the cell box (38x38) so the rank
   sits in the same spatial slot as the medals/standard discs above it. */
.lvup-shell-v2 .lb-rank-disc--bare {
    background-color: transparent;
    /* width/height inherited from .lb-rank-disc; no border or background. */
}
.lvup-shell-v2 .lb-rank-disc--bare .lb-rank-disc__num {
    color: #1F1F1F;
    font-size: 1rem;
    /* Auto-tighten if the rank somehow grows to 4+ digits. */
    letter-spacing: -0.01em;
}

/* Card UX V2 Phase 2: close (X) button position.
   - Anchored just outside the centered content column on desktop so it
     reads as part of the same visual block (instead of floating in the
     far-left margin where wide-monitor users miss it).
     Content column is min(--lesson-content-width, 100vw - 32px), where
     --lesson-content-width = 380px. Its left edge sits at
     calc(50vw - 190px). We anchor the X 30px further left of that.
   - On narrow viewports the math goes negative, so max() clamps the
     button to a 14px gutter from the screen edge.
   Scoped to the V2 shell so the legacy (non-V2) layout is untouched. */
.lvup-shell-v2 .close-inside-card {
    position: fixed !important;
    top: 18px !important;
    left: max(14px, calc(50vw - 220px)) !important;
    z-index: 60 !important;
}

/* Leaderboard subtitle — refresh from blue (#71A4F2) to neutral on V2 shell. */
.lvup-shell-v2 .levelup_subtitle_neutral {
    color: #555555;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Card UX V2 Phase 2 — page1B "Blow Your Mind!" hero head graphic.
   Scales the XP head ~50% larger (100x120 -> 150x180) to rebalance against
   the new V2 typography and CTA stack. Scoped to the V2 shell + lvup-page1B
   so the legacy template's 100x120 sizing is untouched. */
.lvup-shell-v2 .lvup-page1B #xp-head-wrapper {
    width: 150px;
    height: 180px;
}

/* Card UX V2 Phase 2 — page1 (round summary) padding: shrink top padding so
   the title + chart + stats stack reads more vertically balanced. Without this
   reduction the page looked top-heavy with empty space below the title. */
.lvup-shell-v2 .lvup-page1 .card-container-levelup {
    padding-top: 64px !important;
}

/* Card UX V2 Phase 2 fix (2026-04-28): same desktop-only flex-centering
   treatment applied to the leaderboard page (page2). The "Perfect Round!"
   title + chart + stats stack is shorter than the desktop viewport, so on
   wider/taller screens the inherited justify-content: center distributes the
   free space symmetrically above and below the content. Mobile is
   intentionally unaffected — the existing 64px padding-top is the right call
   there. Same treatment is also applied to page1B ("Blow Your Mind!" XP-meter
   step) for layout consistency across the post-round shell. */
@media (min-width: 768px) {
    .lvup-shell-v2 .lvup-page1 .card-container-levelup,
    .lvup-shell-v2 .lvup-page1B .card-container-levelup {
        min-height: 100vh;
        min-height: 100dvh;
    }
}

/* Card UX V2 Phase 2 — page3 (Daily Training interstitial) vertical centering.
   This page is a brief auto-advancing transition (~3s: ring animation +
   1s delay → window.location.href = nextLessonUrl) with NO CTA, so the
   default 200px bottom padding reserved for the fixed CTA stack pushes the
   title + ring up too high. Flex-center within the viewport using a
   symmetric padding so the title + progress ring sit in the optical
   middle of the screen on both desktop and mobile. */
.lvup-shell-v2 .lvup-page3 .card-container-levelup {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

/* Card UX V2 Phase 2 — page4 (Weekly Streak celebration) layout.
   The shared weekly_streak_component.html doesn't wrap its CTA in
   .xp-button-container / .levelup-button-container, so without the
   targeted overrides below the "Run More Daily Lessons" button:
     - stretches to 100% of the card-container width (visibly wider than
       the in-round Check button or the Claim MPs CTA),
     - sits high on the page (right under the streak message), and
     - leaves the title + day circles bunched against the top.

   Fix:
   1) Vertical-center the title + day circles + helper message in the
      remaining space (mirrors the lvup-page3 pattern). The fixed CTA
      below takes itself out of the flow, so flex-centering the
      card-container puts the upper content in the optical middle.
      Bottom padding (200px) reserves room for the fixed CTA so the
      circles never overlap the button on short viewports.
   2) Fixed-position the button row to land at safe + 97px from the
      bottom (same Y as Claim MPs / Continue) and constrain its width
      to min(380px, calc(100vw - 32px)) so it visually matches the
      in-round Check button and the post-round Claim MPs button.
      We target the button's containing .row via :has(#run-another-btn)
      so the shared component markup stays untouched (the component
      is also used by weekly_streak_overlay.html and
      weekly_streak_celebration.html, both of which sit OUTSIDE
      .lvup-shell-v2 and therefore don't pick up this rule).
   3) Defensive hide: extend the existing "hide non-active page CTAs"
      guard so the streak button row doesn't leak when lvup-page4 is
      inactive — same precaution we already apply to .xp-button-container
      and .levelup-button-container. */
.lvup-shell-v2 .lvup-page4 .card-container-levelup {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 64px !important;
    padding-bottom: 200px !important;
}

.lvup-shell-v2 .lvup-page4 .row:has(#run-another-btn) {
    position: fixed !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 97px) !important;
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: min(380px, calc(100vw - 32px)) !important;
    max-width: 380px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 30 !important;
}

.lvup-shell-v2 .lvup-page4 .row:has(#run-another-btn) > .col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.lvup-shell-v2 .lvup-page:not(.active) .row:has(#run-another-btn) {
    display: none !important;
}

/* Card UX V2 Phase 2 — page2 leaderboard: shrink top padding to gain vertical
   real estate for more list entries, and constrain the leaderboard list to a
   viewport-relative max-height with soft fade-out + scroll affordance. The
   fade is dynamic: bottom-only at top of scroll, both edges when scrolled in
   the middle, top-only at bottom of scroll, and removed entirely when the
   list fits without scrolling. State classes (.is-scrolled-down, .is-at-bottom,
   .is-no-scroll) are toggled by initLeaderboardScroll() on scroll events. The
   CTA stack is fixed at the bottom of the viewport, so the leaderboard's
   bottom edge sits above it. */
/* Card UX V2 Phase 2 fix (2026-04-28): pull "You're Rising!" up onto the
   same horizontal row as the fixed X close button (X sits at top: 18px).
   With the title's own 4px margin-top, padding-top: 14px puts the title's
   top edge at y=18px, visually aligning with the X. The reclaimed ~42px
   feeds back into the leaderboard's max-height budget below so one more
   row of the top-10 fits without triggering a scroll. The X's
   `left: max(14px, calc(50vw - 220px))` keeps it well to the left of the
   centered title text on every viewport — no horizontal collision. */
.lvup-shell-v2 .lvup-page2 .card-container-levelup {
    padding-top: 14px !important;
}

/* Card UX V2 Phase 2 fix (2026-04-28): on desktop, give the card-container a
   viewport-sized min-height so the inherited justify-content: center has room
   to distribute free space, naturally pushing the "You're Rising!" title
   down when the leaderboard is shorter than its max-height (the common
   below-top-N case). Tall content (rank 50+ user with the box at full
   max-height) leaves ~0px of free space, so the title stays near the top
   like it does today.

   Mobile is intentionally unaffected: the title shares a row with the fixed
   X close button at top:18px, which the 14px top padding above is tuned for. */
@media (min-width: 768px) {
    .lvup-shell-v2 .lvup-page2 .card-container-levelup {
        min-height: 100vh;
        min-height: 100dvh;
    }
}

.lvup-shell-v2 .lvup-page2 .leaderboard-box {
    /* Card UX V2 Phase 2: subtitle row was hidden (see rule below), so we
       reclaim its ~36px from the height reservation and the leaderboard
       gets that vertical room.
       Card UX V2 Phase 2 fix (2026-04-28): top padding shrank 56 → 14
       (title pulled up to share a row with the X close button), so
       another 42px is freed and added to the leaderboard list.
       Reserve space for: top padding (14) + title (~64)
       + CTA stack (primary 52 + gap 10 + secondary 52 + safe 35 + buffer ~15 = ~164)
       + the calendar reminder link above the CTAs (~28). Total reserved ≈ 270px. */
    max-height: calc(100vh - 270px);
    min-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Default mask (at top of scroll, more content below): bottom fade only. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent 100%);
    /* Internal padding so the first/last rows can scroll past the fade
       regions into a fully-visible area. */
    padding-top: 24px !important;
    padding-bottom: 64px !important;
}

/* Scrolled away from the top, more content still below: fade both edges. */
.lvup-shell-v2 .lvup-page2 .leaderboard-box.is-scrolled-down:not(.is-at-bottom) {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

/* Scrolled all the way to the bottom: only the top fade remains.
   Card UX V2 Phase 2 fix (2026-04-28): also collapse padding-bottom from 64
   to 8 in this state. The 64px scroll-affordance buffer exists so the last
   row can scroll past the bottom fade gradient into a fully-cleared region.
   Once we're at-bottom, the bottom fade is removed (above) and that buffer
   stops doing useful work — it just renders as empty space below the user's
   own row when below-top-N injection lands them at-bottom on load. */
.lvup-shell-v2 .lvup-page2 .leaderboard-box.is-scrolled-down.is-at-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 100%);
    padding-bottom: 8px !important;
}

/* List shorter than container — no scroll needed, drop the fade entirely
   AND collapse the internal scroll-affordance padding. The 24px top /
   64px bottom padding inside the leaderboard-box is there so the first/
   last rows can scroll past the fade region into a fully-visible area;
   when there's no scroll there's no fade to clear, so that padding just
   becomes dead space and renders as a phantom "extra row" below the
   list (Card UX V2 Phase 2 fix, 2026-04-28 — surfaced after the
   max-height budget was relaxed enough that the top-10 fits without
   scrolling on most viewports). 8px each gives a small visual breathing
   room without re-introducing the empty row. */
.lvup-shell-v2 .lvup-page2 .leaderboard-box.is-no-scroll {
    -webkit-mask-image: none;
    mask-image: none;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Scrollbar treatment: thin / muted on desktop, completely hidden on mobile.
   The fade-mask alone communicates "more content below" on touch devices. */
.lvup-shell-v2 .lvup-page2 .leaderboard-box {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.lvup-shell-v2 .lvup-page2 .leaderboard-box::-webkit-scrollbar {
    width: 6px;
}
.lvup-shell-v2 .lvup-page2 .leaderboard-box::-webkit-scrollbar-track {
    background: transparent;
}
.lvup-shell-v2 .lvup-page2 .leaderboard-box::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
@media (max-width: 768px) {
    .lvup-shell-v2 .lvup-page2 .leaderboard-box {
        scrollbar-width: none;
    }
    .lvup-shell-v2 .lvup-page2 .leaderboard-box::-webkit-scrollbar {
        width: 0;
        display: none;
    }
}

/* Card UX V2 Phase 2 — hide the leaderboard subtitle ("All-time leaderboard"
   / "This week's leaderboard") on V2 page2 to free up vertical space for
   the leaderboard list itself. Markup is left in place so it can be
   restored by removing this rule if we decide to bring the caption back. */
.lvup-shell-v2 .lvup-page2 .levelup_subtitle_neutral {
    display: none !important;
}

/* ============================================================
   Card UX V2 Phase 2 — Phase F: Daily Lesson Progress (lvup-page3)
   Progress ring palette refresh; weekly streak component is untouched.
   ============================================================ */

.lvup-shell-v2 .lvup-page3 .progress-arc {
    stroke: #6AF79C !important;
}
.lvup-shell-v2 .lvup-page3 .progress-track {
    stroke: #EEEEEE;
}
.lvup-shell-v2 .lvup-page3 .progress-text {
    fill: #000000;
    font-weight: 700;
}
.lvup-shell-v2 .lvup-page3 .progress-percentage {
    fill: #000000;
    font-size: 18px;
    font-weight: 800;
}
.lvup-shell-v2 .lvup-page3 .progress-label {
    fill: #555555;
    font-size: 10px;
}