/* ==========================================================
   SAGAXIQ — MIND BARRICADE HOME PAGE
   ========================================================== */

:root {

    --mb-bg: #080d13;
    --mb-bg-alt: #10171e;

    --mb-card: #162129;
    --mb-card-raised: #1c2932;

    --mb-highlight: #5b8cff;
    --mb-purple: #936cff;

    --mb-text: #f4f7fb;
    --mb-muted: #9caab5;

    --mb-border: rgba(255,255,255,.09);

    --mb-blue-soft: rgba(91,140,255,.10);
}


/* ==========================================================
   RESET
   ========================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--mb-bg);
    color: var(--mb-text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ==========================================================
   PAGE
   ========================================================== */

.mb-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(91,140,255,.10),
            transparent 32rem
        ),
        var(--mb-bg);
}


/* ==========================================================
   GAME SECTION
   ========================================================== */

.mb-game-section {

    position: relative;

    padding:
        5px 16px 70px;

    overflow: hidden;
}


/* ==========================================================
   BACK LINK
   ========================================================== */

.mb-back-wrap {

    width: 100%;
    max-width: 1050px;

    margin:
        0 auto 28px;

    position: relative;
    z-index: 5;
}


.mb-back-link {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #58dbe8;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    transition:
        color .18s ease,
        transform .18s ease;
}


.mb-back-link span {
    font-size: 23px;
    line-height: 1;
}


.mb-back-link:hover {

    color: white;

    transform:
        translateX(-3px);
}


/* ==========================================================
   AMBIENT PIECES
   ========================================================== */

.mb-ambient {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;
}


.mb-floating-piece {

    position: absolute;

    color:
        rgba(91,140,255,.08);

    font-size: 30px;

    animation:
        mb-float 10s ease-in-out infinite;
}


.piece-one {
    top: 12%;
    left: 7%;
    font-size: 42px;
}

.piece-two {
    top: 58%;
    left: 5%;
    font-size: 24px;
    animation-delay: 1.5s;
}

.piece-three {
    top: 18%;
    right: 8%;
    font-size: 34px;
    animation-delay: 2.5s;
}

.piece-four {
    top: 72%;
    right: 6%;
    font-size: 40px;
    animation-delay: 1s;
}

.piece-five {
    bottom: 8%;
    left: 46%;
    font-size: 22px;
    animation-delay: 3s;
}


@keyframes mb-float {

    0%, 100% {
        transform:
            translateY(0)
            rotate(0deg);

        opacity: .5;
    }

    50% {
        transform:
            translateY(-18px)
            rotate(8deg);

        opacity: 1;
    }
}


/* ==========================================================
   MAIN CARD
   ========================================================== */

.mb-card {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 800px;

    margin: 0 auto;

    padding:
        42px 32px;

    border:
        1px solid var(--mb-border);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(22,33,41,.98),
            rgba(12,20,27,.98)
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,.42);
}


/* ==========================================================
   HEADER
   ========================================================== */

.mb-header {

    text-align: center;

    margin-bottom: 10px;
}


.mb-category {

    color: #58dbe8;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .12em;

    margin-bottom: 9px;
}


.mb-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin: 0 0 12px;

    font-size:
        clamp(30px, 5vw, 42px);

    line-height: 1.1;

    font-weight: 850;

    letter-spacing: -.04em;
}


.mb-title-icon {

    filter:
        drop-shadow(
            0 0 12px
            rgba(91,140,255,.55)
        );
}


.mb-subtitle {

    max-width: 580px;

    margin: 0 auto;

    color: var(--mb-muted);

    font-size: 15px;

    line-height: 1.6;
}


/* ==========================================================
   BOARD PREVIEW
   ========================================================== */

.mb-preview-wrapper {

    display: flex;

    justify-content: center;

    margin:
        34px 0 38px;
}


.mb-preview-board {

    position: relative;

    width: 260px;
    height: 260px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 22px;

    background:
        rgba(255,255,255,.025);

    box-shadow:
        0 25px 70px rgba(0,0,0,.45),
        inset 0 0 45px
        rgba(91,140,255,.05);
}


.mb-preview-grid {

    position: absolute;

    inset: 16px;

    display: grid;

    grid-template-columns:
        repeat(9, 1fr);

    grid-template-rows:
        repeat(9, 1fr);

    gap: 4px;
}


.mb-preview-cell {

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius: 4px;

    background:
        rgba(255,255,255,.025);

    transition:
        background .3s ease;
}


/* ==========================================================
   PIECES
   ========================================================== */

.mb-preview-piece {

    position: absolute;

    width: 23px;
    height: 23px;

    border-radius: 50%;

    z-index: 5;

    transition:
        transform .35s ease;
}


.mb-preview-piece::after {

    content: "";

    position: absolute;

    inset: 5px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.35);
}


.mb-player-piece {

    left: 50%;
    bottom: 18px;

    transform:
        translateX(-50%);

    background:
        var(--mb-highlight);

    box-shadow:
        0 0 24px
        rgba(91,140,255,.9);
}


.mb-computer-piece {

    left: 50%;
    top: 18px;

    transform:
        translateX(-50%);

    background:
        #ff5f72;

    box-shadow:
        0 0 24px
        rgba(255,95,114,.75);
}


/* ==========================================================
   BARRICADES
   ========================================================== */

.mb-wall {

    position: absolute;

    z-index: 4;

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            #5b8cff,
            #936cff
        );

    box-shadow:
        0 0 12px
        rgba(91,140,255,.4);
}


.mb-wall-one {
    width: 55px;
    height: 5px;

    left: 62px;
    top: 80px;
}


.mb-wall-two {
    width: 5px;
    height: 55px;

    right: 62px;
    top: 103px;
}


.mb-wall-three {
    width: 55px;
    height: 5px;

    left: 104px;
    top: 145px;
}


.mb-wall-four {
    width: 5px;
    height: 55px;

    left: 80px;
    top: 122px;
}


/* ==========================================================
   DIFFICULTY
   ========================================================== */

.mb-difficulty-section {

    padding: 26px;

    border:
        1px solid var(--mb-border);

    border-radius: 20px;

    background:
        rgba(255,255,255,.025);
}


.mb-section-label {

    display: block;

    color: #8e9ba5;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .12em;

    margin-bottom: 7px;
}


.mb-difficulty-section h2 {

    margin:
        0 0 20px;

    font-size: 22px;

    letter-spacing: -.025em;
}


.mb-difficulty-group {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}


/* ==========================================================
   DIFFICULTY BUTTON
   ========================================================== */

.mb-difficulty-btn {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    min-height: 88px;

    padding: 15px;

    border:
        1px solid var(--mb-border);

    border-radius: 15px;

    background:
        rgba(255,255,255,.025);

    color: var(--mb-text);

    text-align: left;

    cursor: pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.mb-difficulty-btn:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(91,140,255,.45);
}


.mb-difficulty-btn.active {

    border-color:
        rgba(91,140,255,.75);

    background:
        rgba(91,140,255,.10);

    box-shadow:
        inset 0 0 25px
        rgba(91,140,255,.04);
}


.mb-difficulty-icon {

    color:
        #77869a;

    font-size: 17px;
}


.mb-difficulty-btn.active
.mb-difficulty-icon {

    color:
        var(--mb-highlight);
}


.mb-difficulty-text {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding-right: 15px;
}


.mb-difficulty-text strong {

    font-size: 14px;
}


.mb-difficulty-text small {

    color:
        var(--mb-muted);

    font-size: 11px;

    line-height: 1.4;
}


.mb-difficulty-check {

    position: absolute;

    top: 10px;
    right: 10px;

    width: 18px;
    height: 18px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--mb-highlight);

    color: white;

    font-size: 10px;

    opacity: 0;

    transform:
        scale(.7);

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.mb-difficulty-btn.active
.mb-difficulty-check {

    opacity: 1;

    transform:
        scale(1);
}


/* ==========================================================
   START BUTTON
   ========================================================== */

.mb-start-btn {

    width: 100%;

    margin-top: 15px;

    padding:
        15px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    border-radius: 14px;

    background:
        linear-gradient(
            100deg,
            var(--mb-highlight),
            var(--mb-purple)
        );

    color: white;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 14px 32px
        rgba(91,140,255,.20);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.mb-start-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 42px
        rgba(91,140,255,.30);
}


.mb-start-btn:active {

    transform:
        translateY(0);
}


.mb-start-btn:disabled {

    opacity: .7;

    cursor: wait;
}


.mb-start-arrow {

    font-size: 20px;
}


/* ==========================================================
   SEO SECTIONS
   ========================================================== */

.mb-seo-section {

    padding:
        82px 20px;

    border-top:
        1px solid
        rgba(255,255,255,.06);
}


.mb-alt-section {

    background:
        #10161c;
}


.mb-content {

    width: 100%;

    max-width: 1050px;

    margin: 0 auto;
}


.mb-section-kicker {

    display: block;

    margin-bottom: 10px;

    color: #58dbe8;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.mb-content h2 {

    margin:
        0 0 22px;

    font-size:
        clamp(28px, 4vw, 42px);

    line-height: 1.15;

    font-weight: 850;

    letter-spacing: -.035em;
}


.mb-content h3 {

    margin:
        0 0 8px;

    font-size: 18px;

    font-weight: 750;
}


.mb-content p {

    max-width: 850px;

    color: #aeb8c0;

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 18px;
}


/* ==========================================================
   STEPS
   ========================================================== */

.mb-steps {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 16px;

    margin-top: 34px;
}


.mb-step {

    display: flex;

    gap: 17px;

    padding: 24px;

    border:
        1px solid var(--mb-border);

    border-radius: 18px;

    background:
        #182128;
}


.mb-step-number {

    width: 40px;
    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(91,140,255,.10);

    border:
        1px solid
        rgba(91,140,255,.35);

    color:
        #6d9cff;

    font-weight: 800;
}


.mb-step p {

    margin: 0;

    font-size: 14px;
}


/* ==========================================================
   FEATURE GRID
   ========================================================== */

.mb-feature-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;

    margin-top: 34px;
}


.mb-feature-card {

    padding: 26px 23px;

    border:
        1px solid var(--mb-border);

    border-radius: 18px;

    background:
        #182128;
}


.mb-feature-icon {

    display: block;

    font-size: 28px;

    margin-bottom: 16px;
}


.mb-feature-card p {

    margin: 0;

    font-size: 14px;
}


/* ==========================================================
   DIFFICULTY INFO
   ========================================================== */

.mb-difficulty-info-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    margin-top: 32px;
}


.mb-info-card {

    padding: 22px;

    border:
        1px solid var(--mb-border);

    border-radius: 16px;

    background:
        #182128;
}


.mb-info-card strong {

    display: block;

    margin-bottom: 7px;

    font-size: 18px;
}


.mb-info-card span {

    color:
        #929fa8;

    font-size: 13px;

    line-height: 1.55;
}


/* ==========================================================
   FEATURE LIST
   ========================================================== */

.mb-feature-list {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;

    margin-top: 34px;
}


.mb-feature-list > div {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 20px;

    border:
        1px solid var(--mb-border);

    border-radius: 15px;

    background:
        #182128;
}


.mb-feature-list > div > span {

    font-size: 24px;

    flex-shrink: 0;
}


.mb-feature-list p {

    margin: 0;

    font-size: 14px;
}


/* ==========================================================
   FAQ
   ========================================================== */

.mb-faq {

    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-top: 34px;
}


.mb-faq details {

    background:
        #151d23;

    border:
        1px solid var(--mb-border);

    border-radius: 15px;

    overflow: hidden;
}


.mb-faq summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        20px 22px;

    cursor: pointer;

    font-size: 16px;

    font-weight: 700;

    list-style: none;
}


.mb-faq summary::-webkit-details-marker {

    display: none;
}


.mb-faq summary span {

    color:
        #58dbe8;

    font-size: 24px;

    font-weight: 400;

    transition:
        transform .2s ease;
}


.mb-faq details[open]
summary span {

    transform:
        rotate(45deg);
}


.mb-faq details p {

    padding:
        0 22px 20px;

    margin: 0;

    font-size: 14px;
}


/* ==========================================================
   FINAL CTA
   ========================================================== */

.mb-final-cta {

    padding:
        90px 20px;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(91,140,255,.10),
            transparent 60%
        ),
        #0c151b;

    border-top:
        1px solid
        rgba(91,140,255,.18);
}


.mb-final-cta p {

    margin-left: auto;

    margin-right: auto;
}


.mb-final-play-btn {

    border: 0;

    border-radius: 30px;

    padding:
        13px 28px;

    background:
        linear-gradient(
            100deg,
            var(--mb-highlight),
            var(--mb-purple)
        );

    color: white;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.mb-final-play-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(91,140,255,.25);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 800px) {

    .mb-difficulty-group {

        grid-template-columns:
            1fr;
    }


    .mb-steps {

        grid-template-columns:
            1fr;
    }


    .mb-feature-grid {

        grid-template-columns:
            1fr;
    }


    .mb-difficulty-info-grid {

        grid-template-columns:
            1fr;
    }


    .mb-feature-list {

        grid-template-columns:
            1fr;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 520px) {

    .mb-game-section {

        padding:
            5px 10px 50px;
    }


    .mb-back-wrap {

        margin-bottom: 20px;

        padding:
            0 6px;
    }


    .mb-back-link {

        font-size: 15px;
    }


    .mb-card {

        padding:
            30px 20px;

        border-radius: 19px;
    }


    .mb-title {

        font-size: 27px;
    }


    .mb-subtitle {

        font-size: 14px;
    }


    .mb-preview-board {

        width: 210px;
        height: 210px;
    }


    .mb-preview-grid {

        inset: 13px;

        gap: 3px;
    }


    .mb-preview-piece {

        width: 20px;
        height: 20px;
    }


    .mb-player-piece {

        bottom: 15px;
    }


    .mb-computer-piece {

        top: 15px;
    }


    .mb-difficulty-section {

        padding: 20px;

        border-radius: 18px;
    }


    .mb-difficulty-section h2 {

        font-size: 20px;
    }


    .mb-seo-section {

        padding:
            58px 16px;
    }


    .mb-content h2 {

        font-size: 28px;
    }


    .mb-content p {

        font-size: 15px;

        line-height: 1.7;
    }


    .mb-step {

        padding:
            20px 17px;
    }


    .mb-feature-card {

        padding:
            22px 19px;
    }


    .mb-faq summary {

        padding:
            18px;

        font-size: 15px;
    }


    .mb-faq details p {

        padding:
            0 18px 18px;
    }


    .mb-final-cta {

        padding:
            65px 18px;
    }


    .mb-final-play-btn {

        width: 100%;

        max-width: 350px;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}

/* ==========================================================
   GAME MODES
========================================================== */

.mb-mode-section {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 15px;
}


/* ==========================================================
   MODE BUTTON
========================================================== */

.mb-mode-btn {

    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    padding:
        14px 18px;

    border:
        1.5px solid var(--mb-border);

    border-radius: 16px;

    background:
        var(--mb-card-raised);

    color:
        var(--mb-text);

    text-align: left;

    cursor: pointer;

    transition:
        transform .15s ease,
        border-color .18s ease,
        box-shadow .2s ease,
        background .18s ease;
}


.mb-mode-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.35);
}


.mb-mode-solo:hover {

    border-color:
        rgba(88,219,232,.55);
}


.mb-mode-invite:hover {

    border-color:
        rgba(147,108,255,.65);
}


.mb-mode-join:hover {

    border-color:
        rgba(91,140,255,.65);
}


/* ==========================================================
   MODE ICON
========================================================== */

.mb-mode-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        rgba(255,255,255,.045);

    font-size: 23px;

    flex-shrink: 0;
}


/* ==========================================================
   MODE TEXT
========================================================== */

.mb-mode-text {

    display: flex;

    flex-direction: column;

    gap: 3px;

    flex: 1;
}


.mb-mode-text strong {

    font-size: 15.5px;

    font-weight: 750;
}


.mb-mode-text small {

    color:
        var(--mb-muted);

    font-size: 12.5px;
}


/* ==========================================================
   MODE ARROW
========================================================== */

.mb-mode-arrow {

    color:
        var(--mb-muted);

    font-size: 19px;

    transition:
        transform .15s ease,
        color .15s ease;
}


.mb-mode-btn:hover
.mb-mode-arrow {

    transform:
        translateX(4px);

    color:
        #58dbe8;
}


/* ==========================================================
   MODALS
========================================================== */

.mb-hidden {

    display: none !important;
}


.mb-modal-content {

    background:
        #162129;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 18px;

    color:
        var(--mb-text);
}


.mb-modal-header {

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.mb-modal-header .modal-title {

    font-weight: 750;
}


.mb-modal-sub {

    color:
        var(--mb-muted);

    font-size: 13px;

    margin-bottom: 18px;
}


.mb-modal-highlight {

    color:
        #6d9cff;

    font-weight: 750;
}


.mb-modal-text {

    color:
        var(--mb-muted);

    font-size: 14px;

    line-height: 1.65;

    margin-bottom: 22px;
}


/* ==========================================================
   MODAL PRIMARY BUTTON
========================================================== */

.mb-modal-primary-btn {

    border: 0;

    border-radius: 30px;

    padding:
        10px 28px;

    background:
        linear-gradient(
            100deg,
            var(--mb-highlight),
            var(--mb-purple)
        );

    color: white;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.mb-modal-primary-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(91,140,255,.25);
}


/* ==========================================================
   ROOM CODE
========================================================== */

.mb-room-code {

    display: block;

    padding:
        14px;

    margin-bottom: 17px;

    border:
        1px dashed
        rgba(91,140,255,.45);

    border-radius: 12px;

    background:
        rgba(255,255,255,.025);

    color:
        #6d9cff;

    font-size: 34px;

    font-weight: 850;

    letter-spacing:
        .12em;
}


/* ==========================================================
   COPY BUTTONS
========================================================== */

.mb-copy-btn-row {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-bottom: 22px;
}


.mb-modal-secondary-btn {

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius: 30px;

    padding:
        8px 20px;

    background:
        transparent;

    color:
        var(--mb-text);

    font-size: 13px;

    font-weight: 650;

    cursor: pointer;

    transition:
        border-color .18s ease,
        background .18s ease;
}


.mb-modal-secondary-btn:hover {

    border-color:
        rgba(91,140,255,.65);

    background:
        rgba(91,140,255,.08);
}


/* ==========================================================
   WAITING
========================================================== */

.mb-waiting-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color:
        var(--mb-muted);

    font-size: 13px;
}


.mb-spinner {

    width: 14px;

    height: 14px;

    border:
        2px solid
        rgba(91,140,255,.20);

    border-top-color:
        var(--mb-highlight);

    border-radius: 50%;

    animation:
        mb-spin .8s linear infinite;
}


@keyframes mb-spin {

    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================
   JOIN INPUT
========================================================== */

.mb-code-input {

    width: 100%;

    padding: 14px;

    margin-bottom: 10px;

    border:
        1.5px solid
        var(--mb-border);

    border-radius: 12px;

    outline: none;

    background:
        rgba(255,255,255,.035);

    color:
        var(--mb-text);

    font-size: 22px;

    font-weight: 750;

    letter-spacing:
        .2em;

    text-align: center;

    text-transform: uppercase;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.mb-code-input:focus {

    border-color:
        var(--mb-highlight);

    box-shadow:
        0 0 0 3px
        rgba(91,140,255,.10);
}


.mb-join-error {

    color:
        #ff6878;

    font-size: 12.5px;

    margin-bottom: 14px;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 520px) {

    .mb-mode-btn {

        padding:
            13px 14px;
    }


    .mb-mode-icon {

        width: 38px;

        height: 38px;

        min-width: 38px;

        font-size: 20px;
    }


    .mb-mode-text strong {

        font-size: 14px;
    }


    .mb-mode-text small {

        font-size: 11.5px;
    }


    .mb-room-code {

        font-size: 27px;
    }


    .mb-copy-btn-row {

        gap: 7px;
    }


    .mb-modal-secondary-btn {

        padding:
            8px 15px;

        font-size: 12px;
    }

}


/* ==========================================================
   MIND BARRICADE — COMPACT FIRST SCREEN
   ========================================================== */

/* Reduce the vertical space above and around the game card */
.mb-game-section {
    padding: 4px 16px 35px;
}

.mb-back-wrap {
    margin-bottom: 12px;
}

/* Wider card with less internal spacing */
.mb-card {
    max-width: 650px;
    padding: 24px 28px;
    border-radius: 22px;
}

/* Compact title area */
.mb-header {
    margin-bottom: 0;
}

.mb-category {
    margin-bottom: 5px;
    font-size: 11px;
}

.mb-title {
    font-size: clamp(28px, 3.5vw, 36px);
    margin-bottom: 6px;
}

.mb-subtitle {
    font-size: 14px;
    line-height: 1.4;
}

/* Reduce board preview spacing and size */
.mb-preview-wrapper {
    margin: 16px 0 20px;
}

.mb-preview-board {
    width: 220px;
    height: 220px;
    border-radius: 18px;
}

.mb-preview-grid {
    inset: 13px;
    gap: 3px;
}

/* Compact difficulty panel */
.mb-difficulty-section {
    padding: 17px;
    border-radius: 17px;
}

.mb-section-label {
    margin-bottom: 4px;
    font-size: 10px;
}

.mb-difficulty-section h2 {
    font-size: 19px;
    margin-bottom: 12px;
}

/* KEEP ALL THREE LEVELS IN ONE ROW */
.mb-difficulty-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mb-difficulty-btn {
    min-width: 0;
    min-height: 66px;
    padding: 12px 10px;
    gap: 7px;
    border-radius: 12px;
}

.mb-difficulty-icon {
    font-size: 14px;
}

.mb-difficulty-text {
    min-width: 0;
    padding-right: 0;
    gap: 4px;
}

.mb-difficulty-text strong {
    font-size: 13px;
}

.mb-difficulty-text small {
    font-size: 10px;
    line-height: 1.3;
}

.mb-difficulty-check {
    width: 16px;
    height: 16px;
    top: 5px;
    right: 5px;
    font-size: 9px;
}

/* Make the three game modes more compact */
.mb-mode-section {
    gap: 8px;
    margin-top: 10px;
}

.mb-mode-btn {
    padding: 10px 13px;
    gap: 11px;
    border-radius: 13px;
}

.mb-mode-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 20px;
}

.mb-mode-text strong {
    font-size: 14px;
}

.mb-mode-text small {
    font-size: 11px;
    line-height: 1.35;
}

.mb-mode-arrow {
    font-size: 17px;
}

/* ==========================================================
   TABLET AND MOBILE — KEEP DIFFICULTY LEVELS HORIZONTAL
   ========================================================== */

@media (max-width: 800px) {
    .mb-difficulty-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .mb-difficulty-btn {
        min-height: 76px;
        padding: 12px 8px;
    }

    .mb-steps,
    .mb-feature-list {
        grid-template-columns: 1fr;
    }

    .mb-feature-grid,
    .mb-difficulty-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mb-card {
        padding: 22px 20px;
    }
}

/* ==========================================================
   SMALL MOBILE SCREENS
   ========================================================== */

@media (max-width: 520px) {
    .mb-game-section {
        padding: 4px 9px 32px;
    }

    .mb-back-wrap {
        margin-bottom: 12px;
        padding: 0 4px;
    }

    .mb-card {
        padding: 19px 12px;
        border-radius: 17px;
    }

    .mb-title {
        font-size: 27px;
        gap: 7px;
    }

    .mb-subtitle {
        font-size: 12px;
    }

    .mb-preview-wrapper {
        margin: 13px 0 16px;
    }

    .mb-preview-board {
        width: 190px;
        height: 190px;
    }

    .mb-preview-grid {
        inset: 11px;
        gap: 3px;
    }

    .mb-difficulty-section {
        padding: 12px 9px;
    }

    .mb-difficulty-section h2 {
        font-size: 17px;
        margin-bottom: 10px;
    }

    .mb-difficulty-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .mb-difficulty-btn {
        min-height: 68px;
        padding: 10px 5px;
        gap: 4px;
        justify-content: center;
    }

    .mb-difficulty-icon {
        display: none;
    }

    .mb-difficulty-text strong {
        font-size: 12px;
    }

    .mb-difficulty-text small {
        font-size: 9px;
        overflow-wrap: anywhere;
    }

    .mb-difficulty-check {
        width: 14px;
        height: 14px;
        top: 4px;
        right: 4px;
    }

    .mb-mode-section {
        gap: 7px;
    }

    .mb-mode-btn {
        padding: 9px;
        gap: 9px;
    }

    .mb-mode-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 18px;
    }

    .mb-mode-text strong {
        font-size: 13px;
    }

    .mb-mode-text small {
        font-size: 10px;
    }

    .mb-feature-grid,
    .mb-difficulty-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Extremely narrow screens */
@media (max-width: 340px) {
    .mb-card {
        padding-right: 8px;
        padding-left: 8px;
    }

    .mb-difficulty-text strong {
        font-size: 11px;
    }

    .mb-difficulty-text small {
        font-size: 8px;
    }
}