/* Ensure body does not scroll under fixed header */
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Sidebar (positioned off the left initially) */
#sidebar {
    left: -300px;
    /* Hidden by default on the left */

}

/* Main content (ensure it stays in place) */
main {
    transition: margin-left 0.2s ease-in-out;
    /* Ensure main content stays unaffected */
    margin: 3vh;
}

/* Navigation links with tiny padding */
#sidebar a {
    padding: 12px 20px;
}

#sidebar a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Sidebar hover effect */
#sidebar a.active {
    background-color: rgba(255, 255, 255, 0.2);
}

.nav-link {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    /* Remove underline */
    color: #fff;
    /* White text */
    font-size: 1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth color change */
}

.nav-link:hover {
    background-color: #555;
    /* Darker background on hover */
    color: #fff;
    /* Keep text color white */
}

/* Active Link */
.nav-link.active {
    font-weight: bold;
    /* Highlight active page */
    background-color: #333;
    /* Darker active link background */
}

/* Add padding to links for spacing */
#sidebar a {
    padding: 12px 20px;
}


.custom-table-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
}

.custom-table-link:hover {
    background-color: var(--bg-tertiary);
    text-decoration: none;
}

.intro-box {
    width: 80%;
    max-width: 1400px;
    margin: 3rem auto 0 auto;
    /* Top margin + centered */
    text-align: left;
}

/* Trainer container centering */
#trainer-container,
#pro-trainer-container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* algorithms + categories */
.alg-grid,
.algset-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
}

.alg-grid {
    padding-left: 0.5vw;
    border-left: 1px solid #ccc;
}

.alg-card,
.algset-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 10px var(--shadow-sm);
    text-align: center;
    width: 140px;
    height: 160px;
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.alg-card:hover,
.algset-card:hover {
    background-color: var(--bg-tertiary) !important;
    transform: translateY(-3px);
    border-color: var(--border-light);
}

.algset-card.view:hover {
    transform: translateY(0px) !important;
}

.alg-card img,
.algset-card img {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
}

.alg-card span,
.algset-card span {
    font-weight: 600;
    font-size: 1rem;
}

.algset-card.complete {
    background-color: #d4edda;
    border: 1px solid #28a745;
}

/* Algorithm case */
.case-detail {
    flex: 1;
    min-width: 280px;
    max-width: 300px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 6px var(--shadow-sm);
}

.add-alg-btn {
    border: 2px solid var(--primary-color);
    background-color: var(--bg-secondary);
}

.alg-clickable {
    cursor: pointer;
    transition: background-color 0.2s;
}

.alg-clickable:hover {
    background-color: var(--bg-tertiary) !important;
}

.alg-line {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    border: 1px solid transparent;
}

.alg-line:hover {
    background-color: var(--bg-tertiary);
    transform: scale(1.01);
    border-color: var(--border-color);
}

/* Known/Unknown */
.btn-known {
    background-color: #d4edda !important;
    color: white !important;
    border: 1px solid #28a745 !important;
    border: none;
    margin-left: 5px;
}

.btn-unknown {
    background-color: #f8d7da !important;
    color: white !important;
    border: 1px solid #dc3545 !important;
    border: none;
    margin-left: 5px;
}

.btn-known:hover {
    background-color: #5bcf7a !important;
}

.btn-unknown:hover {
    background-color: #c82333 !important;
}


/* Fixed height and scrollable container for algorithms */
.alg-scroll-container {
    /* Use a max-height so the container shrinks to content when there are few algorithms
       (remove fixed height to avoid reserving unnecessary space). */
    max-height: 40vh;
    /* allow the container to shrink below the max when content is small */
    overflow-y: auto;
}

/* Ensure the left panel is always visible */
.alg-left-panel {
    min-width: 320px;
    /* Prevent collapsing */
    flex: 0 0 auto;
    /* Prevent shrinking */
    width: 320px;
    /* Consistent width */

    position: sticky;
    top: 80px;
    /* Adjust based on your navbar/header height */
    align-self: flex-start;
    /* Align sticky item in flex container */
    z-index: 1;
    /* Ensure it's above other elements if needed */
}


/* Media query for smaller screens. FIX THIS PROPERLY LATER!!! */
@media (max-width: 768px) {
    .alg-left-panel {
        width: 100%;
        /* Make the left panel take full width on smaller screens */
        min-width: 100%;
        /* Prevent the panel from being too narrow */
    }

    /* Make the main intro card wider on phones so content has more space */
    .intro-box {
        width: 95% !important;
        margin: 1.5rem auto;
        /* slightly smaller top margin on mobile */
        padding: 0 0.5rem;
        /* small horizontal padding so content doesn't touch edges */
        flex-direction: column;
        /* Stack the panels vertically on smaller screens */
    }

    /* Trainer containers on mobile */
    #trainer-container,
    #pro-trainer-container {
        width: 100% !important;
        margin-left: auto;
        margin-right: auto;
    }

    .alg-left-panel,
    .flex-fill {
        width: 100%;
        /* Make both sections take full width */
        margin-bottom: 20px;
        /* Add space between panels */
    }
}

/* Profile */
.zbll-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 20px;
}

.zbll-subcards {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 15px;
    background: var(--card-bg);
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow);
    z-index: 10;
    flex-direction: row;
    gap: 10px;
    white-space: nowrap;
}

.zbll-wrapper:hover .zbll-subcards {
    display: flex;
}

.solve-module {
    padding-bottom: 1rem;
}

.solution-box {
    background-color: var(--bg-secondary);
    font-family: monospace;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}




.algset-subcard {
    width: 100px;
    text-align: center;
    padding: 5px;
    border-radius: 8px;
    transition: background 0.2s;
}

.algset-subcard img {
    width: 100%;
    border-radius: 6px;
}

.algset-subcard.complete {
    background: #d4edda;
}



.alg-card-known {
    background-color: #d4edda;
    border: 1px solid #28a745;
}

.alg-card-unknown {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
}

.btn-outline-success {
    border-color: #28a745;
    color: #28a745;
}

.btn-outline-success:hover {
    background-color: #28a745;
    color: white;
}

/* Selected alg in grid */
.selected-card {
    border: 2px solid #007bff;
    /* Blue border for selection */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    /* Glow effect */
    background-color: #f0f8ff;
    /* Light blue background */
}

/* Cube player buttons */
.cube-player-button {
    background-color: #f0f8ff !important;
    border: 1px solid #007bff !important;
    border-radius: 5px;
    margin-left: 5px;
    z-index: 1000;
    position: relative;
}

.cube-player-button:hover {
    background-color: #e0f0ff !important;
    border: 1px solid #0056b3 !important;
    z-index: 1000;
    position: relative;
}

.change-tutorial-preference {
    /* center */
    display: flex;
    justify-content: center;
}

.daily-puzzle-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 10px 25px var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-light);
    color: var(--text-color);
}

.daily-puzzle-title {
    font-weight: 600;
    margin-bottom: 1rem;
}

.daily-puzzle-body p {
    margin-bottom: 1.5rem;
}

.daily-puzzle-actions {
    display: flex;
    justify-content: flex-end;
}

.daily-puzzle-seed {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.95rem;
}

#daily-reset-countdown {
    font-family: 'Roboto Mono', monospace;
}


/* Tutorial section */

/* Steps */
.timeline-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 40px;
    padding-top: 80px;
    /* Add space for header */
}

/* Actual grid */
.timeline {
    display: grid;
    grid-template-columns: repeat(9, 84px);
    /* manually control column count */
}

.step-card {
    position: relative;
    width: 100px;
    /* swapped width and height for rotation */
    height: 100px;
    background: #a18033;
    color: #333;
    text-align: center;
    font-weight: bold;
    clip-path: polygon(25% 7%,
            /* top-left flat edge start */
            75% 7%,
            /* top-right flat edge end */
            100% 50%,
            /* right point */
            75% 93%,
            /* bottom-right flat edge */
            25% 93%,
            /* bottom-left flat edge */
            0% 50%
            /* left point */
        );
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, border 0.2s;
    cursor: pointer;
    box-sizing: border-box;
}

.step-card::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    background-color: #ffb703;
    clip-path: inherit;
    z-index: -1;
    transition: background-color 0.2s ease-in-out;
}

/* Hover effect */
.step-card:hover {
    background: #7a6126;
}

.step-card:hover::before {
    background-color: #c99001;
}

/* Completed state */
.step-card.completed {
    background-color: #000000;
}

/* Current step - darker background */
.step-card.current::before {
    background-color: #c99001;
}

/* Offset every second step to create beehive pattern */
.step-card:nth-child(2n) {
    transform: translateY(45px);
    /* vertical offset to stagger rows */
}

/* Mobile responsive timeline */
@media (max-width: 768px) {
    .timeline {
        grid-template-columns: repeat(9, 35px);
        /* much smaller on mobile to fit in viewport */
        gap: 0;
        justify-content: center;
        max-width: 100%;
        padding: 0 5px;
    }

    .step-card {
        width: 40px;
        height: 40px;
        margin: 3px 0;
    }

    .step-card:nth-child(2n) {
        transform: translateY(18px);
        /* smaller offset for mobile */
    }

    .step-card img {
        width: 25px !important;
        height: 25px !important;
    }

    /* Hide left column cube player on mobile */
    .beginner-sticky-cube-player {
        display: none;
    }

    /* Show floating cube player on mobile */
    .mobile-cube-player {
        display: block !important;
    }

    /* Make main flex container stack on mobile */
    .d-flex {
        flex-direction: column !important;
    }

    /* Adjust right column to use full width */
    .right-column {
        padding: 0.5rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Make explanation containers responsive on mobile */
    .explanation-container {
        justify-content: center;
        padding: 0 1rem;
    }

    .tutorial-explanation {
        width: 95%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* Make ALL content boxes full width on mobile */
    .alert {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
    }

    .bg-light {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
    }

    .border-start {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
    }

    /* Ensure rows and columns are full width on mobile */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .col-md-6,
    .col-md-4 {
        margin-bottom: 1rem;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Section title container full width */
    .section-title-container {
        padding: 0 0.5rem !important;
        width: 100% !important;
    }

    /* Ensure all div containers are full width on mobile */
    .mt-4,
    .mt-5 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Make sure card grids are responsive */
    .card-grid {
        padding: 0 0.5rem !important;
        justify-content: center !important;
    }

    /* Responsive images in cards */
    .interactive-card img {
        max-width: 100% !important;
    }

    /* Responsive text and code elements */
    code {
        font-size: 0.85em !important;
        word-break: break-all !important;
    }
}

/* Mark beginner step as known/unknown */
.toggle-step-form {
    /* center */
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.btn-mark-step-known {
    background-color: #d4edda;
    /* light green */
}

.btn-mark-step-known:hover {
    background-color: #60ff83;
}

.btn-mark-step-unknown {
    background-color: #f8d7da;
    /* light red */
}

.btn-mark-step-unknown:hover {
    background-color: #ff6f6f;
}

/* Cube player on the left */
.beginner-sticky-cube-player {
    width: 300px;
    min-width: 300px;
    padding: 10rem 1rem 1rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    z-index: 1;
    overflow-y: auto;
}

/* Mobile floating cube player */
.mobile-cube-player {
    display: none;
    /* hidden on desktop */
    position: fixed;
    top: 300px;
    right: 10px;
    width: 160px;
    height: 180px;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    z-index: 1;
    /* Lower z-index so it stays behind timeline and content */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: height 0.3s ease-in-out;
}

.mobile-cube-player.minimized {
    height: 40px;
}

.mobile-cube-player-header {
    background-color: var(--primary-color);
    color: white;
    padding: 6px 10px;
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.mobile-cube-player-content {
    padding: 5px;
    text-align: center;
    height: calc(100% - 40px);
    overflow: hidden;
    transition: opacity 0.3s ease-in-out;
}

.mobile-cube-player.minimized .mobile-cube-player-content {
    opacity: 0;
    pointer-events: none;
}

.mobile-cube-display {
    width: 100%;
    height: 120px;
}

.mobile-cube-display cube-player {
    width: 100% !important;
    height: 100% !important;
}

.mobile-cube-display .cube3d-player-container {
    width: 100% !important;
    height: 100% !important;
    max-width: 140px !important;
    max-height: 120px !important;
    margin: 0 auto !important;
}

.mobile-cube-display .cube3d-canvas {
    max-width: 100% !important;
    max-height: 100% !important;
}

.minimize-btn {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.minimize-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* Right column */
.right-column {
    padding: 1rem 2rem;
}

.section-title-container {
    padding: 0rem 1rem;
}

.explanation-container {
    display: flex;
    justify-content: flex-start;
    /* changed from center */
    width: 100%;
    ;
}


.tutorial-explanation {
    width: 700px;
    margin-left: 2rem;
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
}

.explanation-list {
    padding-left: 1.25rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.explanation-list li {
    margin-bottom: 0.4rem;
}

.note {
    display: block;
    margin-top: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.hover-card {
    transition: background-color 0.2s ease;
    border: 2px solid var(--border-color) !important;
    cursor: pointer;
    width: 128px;
    background-color: var(--card-bg);
}

.hover-card-small {
    width: 72px;
}

.hover-card:hover {
    background-color: var(--bg-tertiary);
}

.card-grid {
    display: flex;
    flex-wrap: wrap;
    width: 512px;
    margin: 0 auto;
    gap: 10px;
}

@media (max-width: 768px) {
    .card-grid {
        width: 100%;
        padding: 0 1rem;
    }
}



/* Improvement Guide */

.improvement-side {
    width: 250px;
    display: flex;
    flex-direction: column;
    /* stack children vertically */
    align-items: center;
    /* center them horizontally */
}

.improvement-side.right {
    margin-left: 200px;
}

.improvement-side.left {
    margin-right: 200px;
}

@keyframes fly-bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.cubee-fly {
    width: 150px;
    height: 150px;
    will-change: transform;
}


.tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* center horizontally */
    margin-top: 10px;
}

.node-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: fit-content;
    position: relative;
    margin: -21px 0;
    /* negative vertical margin to overlap nodes */
    z-index: 1;
    /* helps manage stacking context */
}

.node {
    width: 180px;
    height: 180px;
    background: #a18033;
    color: #333;
    text-align: center;
    font-weight: bold;
    clip-path: polygon(50% 0%,
            93% 25%,
            93% 75%,
            50% 100%,
            7% 75%,
            7% 25%);
    display: flex;
    flex-direction: column;
    /* Stack text and image vertically */
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: background 0.2s, transform 0.1s;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    line-height: 1.2;
}

/* Decorative border */
.node::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background-color: #ffb703;
    clip-path: inherit;
    z-index: -1;
}

.node img {
    max-width: 48px;
    margin-top: 4px;
}

/* Hover effects */
.node:hover::before {
    background-color: #c99001;
}

.node:hover {
    background: #7a6126;
}

/* Completed */
.node.completed {
    background-color: #000000;
}

.node.hidden {
    display: none !important;
}

/* set offset variable */

/* Zig-zag offset */
/* .node-link:nth-child(2n-1) .node {
  transform: translateX(calc(-1 * var(--offset)));
} */

.node-link:nth-child(2n) .node {
    transform: translateX(80px);
}

.anchor-wrapper {
    position: relative;
    width: fit-content;
    margin-top: 1px;
    margin-bottom: 1px;
}

.side-node-link {
    position: absolute;
    top: 0;
    text-decoration: none;
    color: inherit;
    z-index: 2;
    /* Ensure it's behind or aligned properly */
    margin-top: -21px;
}

.side-node-link .node {
    transform: none;
    /* prevent zig-zag offset */
    z-index: 3;
}

.side-node-link.left {
    left: -160px;
}

.side-node-link.right {
    left: 160px;
}

.empty-node {
    opacity: 0.8;
    cursor: default;
}

.empty-node:hover {
    background: #a18033;
}

.empty-node:hover::before {
    background-color: #ffb703;
}





/* Trainers */

.display-scramble {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}


/* Uniform card styling */
.trainer-btn {
    height: 120px;
    /* Fixed height for all buttons */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.trainer-btn img {
    max-height: 60px;
    margin-bottom: 8px;
}

.trainer-text {
    font-size: 1rem;
    /* Default size */
    text-align: center;
    line-height: 1.2;
}

/* Smaller text for long labels */
.trainer-text.long-text {
    font-size: 0.85rem;
}

/* Daily Puzzles Specific Styles */
.stat-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.stat-value {
    font-weight: bold;
    color: #333;
    margin-bottom: 0;
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0;
}

.puzzle-card {
    transition: all 0.3s ease;
    border-width: 2px !important;
}

.puzzle-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.points-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.bonus-count {
    font-size: 0.7rem;
    font-weight: bold;
    color: #000;
    background: #fff;
    border-radius: 50%;
    padding: 0.15rem 0.4rem;
    margin-left: 2px;
}

#bonus-indicator {
    cursor: pointer;
    border: 2px solid #ffc107 !important;
}

#bonus-indicator:hover {
    background-color: #ffca2c !important;
    transform: translateY(-3px);
}

.bonus-card {
    border-left: 4px solid #007bff;
    transition: all 0.2s ease;
}

.bonus-card:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cursor-pointer {
    cursor: pointer;
}

/* Color coding for puzzle cards */
.puzzle-card.border-success {
    border-color: #28a745 !important;
}

.puzzle-card.border-warning {
    border-color: #ffc107 !important;
}

.puzzle-card.border-danger {
    border-color: #dc3545 !important;
}

.bg-success.bg-opacity-10 {
    background-color: rgba(40, 167, 69, 0.1) !important;
}

.bg-warning.bg-opacity-10 {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.bg-danger.bg-opacity-10 {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

/* Custom button states */
.btn-warning:disabled,
.btn-danger:disabled,
.btn-success:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
}

.btn-warning:hover:not(:disabled) {
    background-color: #ffca2c;
    border-color: #ffca2c;
    color: #000;
}

/* Animation for new bonus notifications */
@keyframes bounce {

    0%,
    20%,
    53%,
    80%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        transform: translate3d(0, -15px, 0);
    }

    70% {
        transform: translate3d(0, -7px, 0);
    }

    90% {
        transform: translate3d(0, -2px, 0);
    }
}

.bonus-notification {
    animation: bounce 2s ease;
}

/* Responsive improvements for mobile */
@media (max-width: 768px) {
    .stat-card {
        margin-bottom: 1rem;
    }

    .puzzle-card {
        margin-bottom: 1.5rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .points-badge {
        font-size: 0.7rem;
    }
}

/* Modal improvements */
.modal-header {
    background: transparent;
    color: rgb(0, 0, 0);
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

/* Multiplier badge styling */
.multiplier-badge {
    position: relative;
}

.multiplier-badge .badge {
    background: linear-gradient(135deg, #ffc107, #ffca2c) !important;
    color: #000 !important;
    font-weight: bold;
    text-shadow: none;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
    animation: multiplier-glow 2s ease-in-out infinite alternate;
}

@keyframes multiplier-glow {
    0% {
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
    }

    100% {
        box-shadow: 0 6px 20px rgba(255, 193, 7, 0.8);
    }
}

/* Comprehensive mobile container width fixes */
@media (max-width: 768px) {

    /* Main layout containers */
    .d-flex {
        flex-direction: column !important;
    }

    .right-column {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0.5rem !important;
        /* Reduced padding for wider content */
    }

    /* Explanation and content containers */
    .explanation-container,
    .tutorial-explanation,
    .section-title-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Remove padding for more width */
    }

    /* Alert boxes and info containers */
    .alert,
    .bg-light,
    .card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
        /* Ensure internal padding for readability */
    }

    /* Concept cards and grids */
    .concept-cards-grid,
    .card-grid {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Individual cards */
    .concept-card,
    .case-card,
    .tutorial-card {
        width: 100% !important;
        margin: 0.5rem 0 !important;
    }

    /* Container overrides */
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
}