@import '_content/Owlion.GitIssueReporting/Owlion.GitIssueReporting.0l35g6avjd.bundle.scp.css';

/* /Components/AlgorithmVisualizers/AlgorithmVisualizer.razor.rz.scp.css */
/* CSS for AlgorithmVisualizer component */
.algorithm-container[b-7qekte5kkz] {
    padding: 40px;
    max-width: 1200px;
    margin: auto;
}

    .algorithm-container h1[b-7qekte5kkz] {
        text-align: center;
        font-size: 42px;
        color: #26458a;
        margin-bottom: 10px;
    }

.subtitle[b-7qekte5kkz] {
    text-align: center;
    font-size: 20px;
    margin-bottom: 40px;
}

.algorithm-grid[b-7qekte5kkz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.algorithm-card[b-7qekte5kkz] {
    background: white;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border: 2px solid #e6e6e6;
}

.algorithm-icon[b-7qekte5kkz] {
    font-size: 40px;
    margin-bottom: 15px;
}

.algorithm-card h2[b-7qekte5kkz] {
    color: #26458a;
    margin-bottom: 15px;
}

.algorithm-card p[b-7qekte5kkz] {
    min-height: 60px;
    line-height: 1.5;
}

.preview-box[b-7qekte5kkz] {
    background: #f4f7ff;
    border-radius: 12px;
    padding: 15px;
    margin: 20px 0;
    text-align: center;
    font-family: monospace;
    font-size: 18px;
}

.open-button[b-7qekte5kkz] {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: #008080;
    font-size: 18px;
    cursor: pointer;
}

    .open-button:hover[b-7qekte5kkz] {
        transform: translateY(-2px);
    }

.disabled[b-7qekte5kkz] {
    opacity: 0.6;
}
/* /Components/AlgorithmVisualizers/BinarySearch/BinarySearch.razor.rz.scp.css */
/* ============================================================
   BINARY SEARCH QUEST
   ============================================================ */
.level-container[b-677xf02zy1] {
    min-height: 100vh;
    background: linear-gradient(180deg,#eef5ff,#ffffff);
    padding: 25px;
}
/* HEADER */
.binary-header-card[b-677xf02zy1] {
    background: white;
    border-radius: 24px;
    padding: 18px 25px;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
}

.header-content[b-677xf02zy1] {
    display: flex;
    align-items: center;
    gap: 25px;
}

.lion-container[b-677xf02zy1] {
    width: 110px;
}

.binary-header-card h1[b-677xf02zy1] {
    margin: 0 0 8px;
    color: #6366f1;
    font-size: 32px;
}

.binary-header-card p[b-677xf02zy1] {
    margin: 0;
    color: #555;
    font-size: 17px;
}
/* VISUAL CARD */
.visual-card[b-677xf02zy1] {
    background: white;
    border-radius: 24px;
    padding: 22px;
    margin-top: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    text-align: center;
}
/* TARGET */
.target-card[b-677xf02zy1] {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 18px;
    background: #fff7cc;
    font-size: 20px;
    font-weight: 700;
}
/* ARRAY */
.array-container[b-677xf02zy1] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 70px 20px 30px;
}

.stone[b-677xf02zy1] {
    width: 90px;
    height: 90px;
    background: #dbeafe;
    border-radius: 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: .4s ease;
}

.number[b-677xf02zy1] {
    font-size: 34px;
    font-weight: 800;
}

.index[b-677xf02zy1] {
    font-size: 12px;
    opacity: .55;
}
/* POINTERS */
.pointer[b-677xf02zy1] {
    position: absolute;
    top: -65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    font-weight: 800;
}

    .pointer span[b-677xf02zy1] {
        font-size: 22px;
    }

.low[b-677xf02zy1] {
    color: #22c55e;
}

.mid[b-677xf02zy1] {
    color: #a855f7;
}

.high[b-677xf02zy1] {
    color: #f97316;
}
/* STATES */
.stone.middle[b-677xf02zy1] {
    background: #ede9fe;
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(168,85,247,.15), 0 0 25px rgba(168,85,247,.45);
}

.stone.found[b-677xf02zy1] {
    background: #facc15;
    transform: scale(1.2);
}

.stone.removed[b-677xf02zy1] {
    opacity: .25;
    transform: scale(.9);
}
/* SEARCH AREA */
.search-range[b-677xf02zy1] {
    display: inline-block;
    padding: 12px 25px;
    background: #eef2ff;
    border-radius: 18px;
    font-size: 18px;
}
/* BOTTOM */
.bottom-section[b-677xf02zy1] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 25px;
    margin-top: 20px;
}

.steps-card[b-677xf02zy1],
.lesson-card[b-677xf02zy1] {
    background: white;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
}

    .steps-card h3[b-677xf02zy1],
    .lesson-card h3[b-677xf02zy1] {
        color: #6366f1;
        margin-top: 0;
    }

    .lesson-card p[b-677xf02zy1],
    .steps-card p[b-677xf02zy1] {
        white-space: pre-line;
        line-height: 1.6;
    }

.right-column[b-677xf02zy1] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* BUTTONS */
.buttons[b-677xf02zy1] {
    text-align: center;
    margin-top: 20px;
}

.quest-button[b-677xf02zy1] {
    margin: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 15px;
    background: #6366f1;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

    .quest-button:hover[b-677xf02zy1] {
        transform: translateY(-2px);
    }
.bold-letter[b-677xf02zy1] {
    font-weight: 800;
}
.remember-content p[b-677xf02zy1] {
    margin: 12px 0;
}

.rule[b-677xf02zy1] {
    margin: 10px 0;
    padding-left: 10px;
}

.mnemonic[b-677xf02zy1] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quest-header[b-677xf02zy1] {
    text-align: center;
}

    .quest-header h2[b-677xf02zy1],
    .quest-header p[b-677xf02zy1] {
        text-align: center;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-ctem9tgau2] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ctem9tgau2] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-t7tmdu3hnv],
.components-reconnect-repeated-attempt-visible[b-t7tmdu3hnv],
.components-reconnect-failed-visible[b-t7tmdu3hnv],
.components-pause-visible[b-t7tmdu3hnv],
.components-resume-failed-visible[b-t7tmdu3hnv],
.components-rejoining-animation[b-t7tmdu3hnv] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-t7tmdu3hnv],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-t7tmdu3hnv],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-t7tmdu3hnv],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-t7tmdu3hnv],
#components-reconnect-modal.components-reconnect-retrying[b-t7tmdu3hnv],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-t7tmdu3hnv],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-t7tmdu3hnv],
#components-reconnect-modal.components-reconnect-failed[b-t7tmdu3hnv],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-t7tmdu3hnv] {
    display: block;
}


#components-reconnect-modal[b-t7tmdu3hnv] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-t7tmdu3hnv 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-t7tmdu3hnv 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-t7tmdu3hnv 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-t7tmdu3hnv]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-t7tmdu3hnv 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-t7tmdu3hnv {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

@keyframes components-reconnect-modal-fadeInOpacity-b-t7tmdu3hnv {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-t7tmdu3hnv {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-t7tmdu3hnv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-t7tmdu3hnv] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-t7tmdu3hnv] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-t7tmdu3hnv] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-t7tmdu3hnv] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-t7tmdu3hnv] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-t7tmdu3hnv] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-t7tmdu3hnv 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-t7tmdu3hnv] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-t7tmdu3hnv {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Gamification/Leaderboard.razor.rz.scp.css */
/* =========================================================
   Leaderboard Page
   OwlionQuest — Colorful Game UI
   ========================================================= */

.leaderboard-page[b-07s2qjsqa3] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    background: radial-gradient(circle at 10% 5%, rgba(94, 171, 255, .28), transparent 28%), radial-gradient(circle at 90% 15%, rgba(139, 92, 246, .22), transparent 30%), radial-gradient(circle at 50% 100%, rgba(32, 184, 166, .18), transparent 35%), linear-gradient(145deg, #eef7ff 0%, #f1edff 52%, #e9fbf8 100%);
    border-radius: 28px;
    border: 2px solid #d9e6f7;
    box-shadow: 0 16px 40px rgba(54, 79, 120, .15);
}

/* =========================================================
   Hero
   ========================================================= */

.leaderboard-hero[b-07s2qjsqa3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    text-align: left;
}

    .leaderboard-hero h1[b-07s2qjsqa3] {
        margin: 0;
        color: #183f78;
        font-size: 2.35rem;
        font-weight: 900;
        letter-spacing: -.02em;
    }

    .leaderboard-hero p[b-07s2qjsqa3] {
        margin: .45rem 0 0;
        color: #526783;
        font-size: 1.05rem;
    }

/* =========================================================
   Podium
   ========================================================= */

.leaderboard-podium[b-07s2qjsqa3] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    margin: 0 auto 2.75rem;
    max-width: 720px;
}

.podium-player[b-07s2qjsqa3] {
    width: 190px;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: transform .2s ease;
}

    .podium-player:hover[b-07s2qjsqa3] {
        transform: translateY(-6px);
    }

    .podium-player strong[b-07s2qjsqa3] {
        display: block;
        margin-top: .65rem;
        color: #173f7a;
        font-size: 1.05rem;
        font-weight: 900;
    }

    .podium-player span[b-07s2qjsqa3] {
        display: block;
        margin-top: .25rem;
        color: #476687;
        font-weight: 800;
    }

.podium-medal[b-07s2qjsqa3] {
    font-size: 2.4rem;
    line-height: 1;
    filter: drop-shadow(0 3px 4px rgba(60, 70, 100, .2));
}

.podium-avatar[b-07s2qjsqa3] {
    width: 68px;
    height: 68px;
    margin: .5rem auto 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(145deg, #438ff0, #2461b5);
    border: 4px solid #fff;
    box-shadow: 0 5px 14px rgba(40, 88, 150, .25), 0 0 0 3px rgba(67, 143, 240, .12);
}

.podium-block[b-07s2qjsqa3] {
    margin-top: .9rem;
    padding-top: 1rem;
    border-radius: 20px 20px 0 0;
    font-size: 1.8rem;
    font-weight: 900;
    box-shadow: 0 -4px 14px rgba(50, 70, 100, .12), inset 0 2px 0 rgba(255, 255, 255, .6);
}

/* =========================================================
   1st Place — Gold ONLY here
   ========================================================= */

.first[b-07s2qjsqa3] {
    z-index: 2;
}

    .first .podium-medal[b-07s2qjsqa3] {
        font-size: 2.8rem;
    }

    .first .podium-avatar[b-07s2qjsqa3] {
        width: 78px;
        height: 78px;
        background: linear-gradient(145deg, #ffd84a, #e9a928);
        border-color: #fff;
        box-shadow: 0 6px 18px rgba(190, 145, 35, .25), 0 0 0 4px rgba(255, 216, 74, .18);
    }

    .first .podium-player strong[b-07s2qjsqa3] {
        font-size: 1.15rem;
    }

    .first .podium-block[b-07s2qjsqa3] {
        height: 155px;
        background: linear-gradient(180deg, #ffe37a, #f2b735);
        color: #654700;
        border: 2px solid #f8d36a;
    }

/* =========================================================
   2nd Place — Cool Silver / Blue
   ========================================================= */

.second .podium-block[b-07s2qjsqa3] {
    height: 110px;
    background: linear-gradient(180deg, #dfeaff, #aebfd8);
    color: #405673;
    border: 2px solid #cbdcf2;
}

.second .podium-avatar[b-07s2qjsqa3] {
    background: linear-gradient(145deg, #8da7c7, #617a9b);
    border-color: #e8f1fc;
}

/* =========================================================
   3rd Place — Teal / Coral
   ========================================================= */

.third .podium-block[b-07s2qjsqa3] {
    height: 85px;
    background: linear-gradient(180deg, #ffbd91, #ef8660);
    color: #6b3928;
    border: 2px solid #ffc7a5;
}

.third .podium-avatar[b-07s2qjsqa3] {
    background: linear-gradient(145deg, #e38a67, #b96042);
    border-color: #ffe0d1;
}

/* =========================================================
   Empty Podium
   ========================================================= */

.podium-empty[b-07s2qjsqa3] {
    height: 68px;
    width: 68px;
    margin: .5rem auto 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7b8ca5;
    background: #e3ebf5;
    border: 3px dashed #b7c8dd;
    font-size: 1.4rem;
    font-weight: 800;
}

/* =========================================================
   Leaderboard Board
   ========================================================= */

.leaderboard-list[b-07s2qjsqa3] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: .75rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, .72);
    border: 2px solid #d6e3f2;
    box-shadow: 0 12px 28px rgba(50, 80, 120, .13), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* =========================================================
   Ranking Row
   ========================================================= */

.leaderboard-row[b-07s2qjsqa3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 68px;
    margin: .5rem 0;
    padding: .75rem 1rem;
    border-radius: 17px;
    background: linear-gradient(100deg, #ffffff, #f6f9ff);
    border: 1px solid #dce7f4;
    box-shadow: 0 3px 9px rgba(60, 85, 120, .08);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .leaderboard-row:hover[b-07s2qjsqa3] {
        transform: translateY(-3px);
        border-color: #73a9e8;
        box-shadow: 0 8px 18px rgba(60, 100, 160, .14), 0 0 0 3px rgba(67, 143, 240, .07);
    }

/* =========================================================
   Rank
   ========================================================= */

.leaderboard-rank[b-07s2qjsqa3] {
    width: 38px;
    text-align: center;
    color: #54708f;
    font-size: 1.1rem;
    font-weight: 900;
}

/* =========================================================
   Player
   ========================================================= */

.leaderboard-player[b-07s2qjsqa3] {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex: 1;
    color: #203d63;
    font-weight: 800;
}

.leaderboard-avatar[b-07s2qjsqa3] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #438ff0, #2461b5);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    border: 2px solid #7fb4f4;
    box-shadow: 0 3px 8px rgba(50, 95, 160, .2);
}

/* =========================================================
   XP
   Gold remains an achievement accent only
   ========================================================= */

.leaderboard-xp[b-07s2qjsqa3] {
    color: #bd7100;
    font-size: 1.08rem;
    font-weight: 900;
    white-space: nowrap;
}

/* =========================================================
   Loading / Empty
   ========================================================= */

.leaderboard-loading[b-07s2qjsqa3],
.leaderboard-empty[b-07s2qjsqa3] {
    text-align: center;
    padding: 3rem;
    color: #61758f;
}

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

@media (max-width: 600px) {

    .leaderboard-page[b-07s2qjsqa3] {
        padding: 1.5rem .75rem 3rem;
        border-radius: 20px;
    }

    .leaderboard-hero[b-07s2qjsqa3] {
        flex-direction: column;
        text-align: center;
        gap: .75rem;
    }

        .leaderboard-hero h1[b-07s2qjsqa3] {
            font-size: 1.9rem;
        }

    .leaderboard-podium[b-07s2qjsqa3] {
        gap: .35rem;
    }

    .podium-player[b-07s2qjsqa3] {
        width: 32%;
    }

    .podium-avatar[b-07s2qjsqa3],
    .podium-empty[b-07s2qjsqa3] {
        width: 54px;
        height: 54px;
    }

    .first .podium-avatar[b-07s2qjsqa3] {
        width: 62px;
        height: 62px;
    }

    .podium-player strong[b-07s2qjsqa3] {
        font-size: .9rem;
    }

    .first .podium-player strong[b-07s2qjsqa3] {
        font-size: .98rem;
    }

    .podium-player span[b-07s2qjsqa3] {
        font-size: .85rem;
    }

    .podium-medal[b-07s2qjsqa3] {
        font-size: 2rem;
    }

    .first .podium-medal[b-07s2qjsqa3] {
        font-size: 2.35rem;
    }

    .leaderboard-row[b-07s2qjsqa3] {
        gap: .65rem;
        padding: .65rem .7rem;
    }

    .leaderboard-player[b-07s2qjsqa3] {
        gap: .55rem;
        font-size: .9rem;
    }

    .leaderboard-avatar[b-07s2qjsqa3] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .leaderboard-xp[b-07s2qjsqa3] {
        font-size: .9rem;
    }
}
/* /Components/Pages/Gamification/Profile.razor.rz.scp.css */
/* =========================================================
   Player Profile Page
   OwlionQuest — Colorful Game UI
   ========================================================= */

.profile-page[b-kek2jb76iz] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    background: radial-gradient(circle at 10% 5%, rgba(94, 171, 255, .28), transparent 28%), radial-gradient(circle at 90% 15%, rgba(139, 92, 246, .22), transparent 30%), radial-gradient(circle at 50% 100%, rgba(32, 184, 166, .18), transparent 35%), linear-gradient(145deg, #eef7ff 0%, #f1edff 52%, #e9fbf8 100%);
    border-radius: 28px;
    border: 2px solid #d9e6f7;
    box-shadow: 0 16px 40px rgba(54, 79, 120, .15);
}

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

    .profile-page h1[b-kek2jb76iz] {
        margin: 0 0 2rem;
        color: #183f78;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 2.35rem;
        font-weight: 900;
        letter-spacing: -.02em;
    }

/* =========================================================
   Profile Card
   ========================================================= */

.profile-card[b-kek2jb76iz] {
    overflow: hidden;
    max-width: 720px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .76);
    border: 2px solid #d6e3f2;
    border-radius: 24px;
    box-shadow: 0 12px 30px rgba(50, 80, 120, .13);
}

/* =========================================================
   Player Header
   ========================================================= */

.profile-player[b-kek2jb76iz] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(67, 143, 240, .14), rgba(139, 92, 246, .10));
    border-bottom: 2px solid #dce7f4;
}

.player-avatar[b-kek2jb76iz] {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #438ff0, #2461b5);
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(40, 88, 150, .25), 0 0 0 3px rgba(67, 143, 240, .12);
    font-size: 2rem;
}

.player-info[b-kek2jb76iz] {
    flex: 1;
    min-width: 0;
}

.player-label[b-kek2jb76iz] {
    display: block;
    margin-bottom: .15rem;
    color: #6b82a0;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.player-info h2[b-kek2jb76iz] {
    margin: 0;
    overflow: hidden;
    color: #173f7a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.7rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-level[b-kek2jb76iz] {
    display: block;
    margin-top: .2rem;
    color: #bd7100;
    font-size: .9rem;
    font-weight: 900;
}

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

.level-badge[b-kek2jb76iz] {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #ffd84a, #e9a928);
    border: 4px solid #fff;
    border-radius: 18px;
    box-shadow: 0 5px 14px rgba(190, 145, 35, .22);
}

    .level-badge span[b-kek2jb76iz] {
        color: #765300;
        font-size: .62rem;
        font-weight: 900;
        letter-spacing: 1px;
    }

    .level-badge strong[b-kek2jb76iz] {
        margin-top: .1rem;
        color: #654700;
        font-size: 1.8rem;
        line-height: 1;
    }

/* =========================================================
   Stats
   ========================================================= */

.profile-stats[b-kek2jb76iz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    padding: 1.25rem;
}

.profile-stat[b-kek2jb76iz] {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 100px;
    padding: 1rem;
    background: linear-gradient(100deg, #ffffff, #f6f9ff);
    border: 1px solid #dce7f4;
    border-radius: 17px;
    box-shadow: 0 3px 9px rgba(60, 85, 120, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .profile-stat:hover[b-kek2jb76iz] {
        transform: translateY(-3px);
        box-shadow: 0 8px 18px rgba(60, 100, 160, .14);
    }

.stat-icon[b-kek2jb76iz] {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf3ff;
    border: 2px solid #cfe1f7;
    border-radius: 13px;
    font-size: 1.35rem;
}

.stat-label[b-kek2jb76iz] {
    display: block;
    color: #6b82a0;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.profile-stat strong[b-kek2jb76iz] {
    display: block;
    margin-top: .15rem;
    color: #183f78;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.1;
}

.stat-description[b-kek2jb76iz] {
    display: block;
    margin-top: .2rem;
    color: #71839a;
    font-size: .7rem;
}

/* =========================================================
   Loading
   ========================================================= */

.profile-loading[b-kek2jb76iz] {
    padding: 3rem;
    color: #61758f;
    text-align: center;
}

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

@media (max-width: 600px) {

    .profile-page[b-kek2jb76iz] {
        padding: 1.5rem .75rem 3rem;
        border-radius: 20px;
    }

        .profile-page h1[b-kek2jb76iz] {
            margin-bottom: 1.5rem;
            font-size: 1.9rem;
            text-align: center;
        }

    .profile-player[b-kek2jb76iz] {
        padding: 1.2rem;
    }

    .player-avatar[b-kek2jb76iz] {
        width: 60px;
        height: 60px;
        font-size: 1.7rem;
    }

    .player-info h2[b-kek2jb76iz] {
        font-size: 1.35rem;
    }

    .level-badge[b-kek2jb76iz] {
        width: 60px;
        height: 60px;
        border-radius: 15px;
    }

        .level-badge strong[b-kek2jb76iz] {
            font-size: 1.5rem;
        }

    .profile-stats[b-kek2jb76iz] {
        grid-template-columns: 1fr;
        padding: .9rem;
    }

    .profile-stat[b-kek2jb76iz] {
        min-height: 76px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* CSS for Home component */
/* Homepage specific container to prevent touching other pages */
.home-quests-container[b-nj1jovekb5] {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Homepage specific card styling */
.home-quest-card[b-nj1jovekb5] {
    flex: 1;
    min-width: 320px;
    max-width: 420px;
    background: white;
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

    .home-quest-card .quest-number[b-nj1jovekb5] {
        color: #666;
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .home-quest-card h2[b-nj1jovekb5] {
        margin: 0;
        color: #2d5be3;
        font-size: 1.5rem;
    }

    .home-quest-card .difficulty[b-nj1jovekb5] {
        margin: 16px 0;
        color: #ff9800;
        font-weight: 600;
    }

    .home-quest-card p[b-nj1jovekb5] {
        color: #555;
        line-height: 1.6;
        margin: 20px 0;
        flex-grow: 1; /* Ensures text area absorbs extra space evenly, forcing buttons to align */
    }

    .home-quest-card .reward[b-nj1jovekb5] {
        margin: 24px 0;
        font-size: 1.1rem;
    }
    /* Home - Login wall */
.quest-login-wall[b-nj1jovekb5] {
    width: 100%;
    max-width: 700px;
    margin: 40px auto;
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

    .quest-login-wall h2[b-nj1jovekb5] {
        color: #2d5be3;
        margin-bottom: 15px;
    }

    .quest-login-wall p[b-nj1jovekb5] {
        color: #555;
        line-height: 1.6;
    }
/* /Components/Pages/OwlionQuestMascot.razor.rz.scp.css */
/* CSS for OwlionMascot component */
.owlion img[b-u5hf3unfta] {
    width: 160px;
    height: 160px;
    object-fit: contain;
}
/* /Components/Pages/Quests/ArrayStringFoundations/ArrayStringFoundations.razor.rz.scp.css */
/* CSS for ArrayStringFoundations component */
/* /Components/Pages/Quests/ArrayStringFoundations/GroupAnagrams/QuestGroupAnagramsL2.razor.rz.scp.css */
/* CSS for QuestGroupAnagramsL2 component */
.stones .anagram-letter-wrapper[b-s33zd379up] {
    min-height: 70px;
}

.visual-card .stones[b-s33zd379up] {
    margin: 15px 0;
}
/* =====================================================================
   CURRENT GROUP - GROUP ANAGRAMS L2
   ===================================================================== */

.current-group[b-s33zd379up] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    min-height: 70px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

    .current-group .anagram-letter-stone[b-s33zd379up] {
        transform: scale(1.05);
    }
.stone-tracker-column[b-s33zd379up] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pointer-hidden[b-s33zd379up] {
    visibility: hidden;
}

.used-tracker-badge[b-s33zd379up] {
    font-family: 'Fira Code', Consolas, Monaco, monospace;
    font-size: 13px;
    font-weight: 700;
    padding: 2px 4px;
    text-align: center;
    letter-spacing: 0.3px;
    background: transparent !important; /* No background box */
    border: none !important; /* No borders */
    box-shadow: none !important; /* No shadows */
    margin-top: 4px;
}

.used-true[b-s33zd379up] {
    color: #22c55e !important; /* Vivid solid green for true */
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.4); /* Slight glowing pop */
}

.used-false[b-s33zd379up] {
    color: #94a3b8 !important; /* Clear, high-contrast slate-gray for false */
}

.list-row-container[b-s33zd379up] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px;
}

.group-stone-item[b-s33zd379up] {
    margin: 0 !important;
}

.result-list-container[b-s33zd379up] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-row-item[b-s33zd379up] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.result-index-label[b-s33zd379up] {
    color: #00f2fe;
    min-width: 60px;
}
/* /Components/Pages/Quests/ArrayStringFoundations/GroupAnagrams/QuestGroupAnagramsL3.razor.rz.scp.css */
/* =====================================================
   Fix L3 Overlapping Stones & Flex Alignment
   ===================================================== */

.visual-card .stones[b-baasrfppl6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    position: relative;
    width: 100%;
}

.visual-card .anagram-letter-wrapper[b-baasrfppl6] {
    position: relative !important;
    display: inline-flex;
    transform: none !important;
    left: auto !important;
    top: auto !important;
}

.alchemy-preparation-deck[b-baasrfppl6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(210, 225, 245, 0.8);
    border-radius: 16px;
    padding: 12px 16px; /* Reduced vertical padding to fix spacing */
    margin: 10px 0; /* Reduced vertical margin */
}

.alchemy-source-zone[b-baasrfppl6] {
    display: flex;
    flex-direction: column;
    align-items: center; /* FIXED: Centered contents to stop left/right misalignment */
    flex: 1;
}

    .alchemy-source-zone .stones[b-baasrfppl6] {
        display: flex !important;
        justify-content: center !important; /* FIXED: Centers stones inside source zones */
        position: relative !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
    }

.anagram-letter-stone[b-baasrfppl6] {
    position: relative !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px; /* Optimized size */
    height: 46px;
    padding: 0 10px;
    background: #3b82f6;
    color: white;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
}

    .anagram-letter-stone.active[b-baasrfppl6] {
        background: #2563eb;
        transform: scale(1.08);
        box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3);
    }

    .anagram-letter-stone.processed[b-baasrfppl6] {
        background: #93c5fd;
        color: #1e3a8a;
    }

.right-column[b-baasrfppl6] {
    position: sticky;
    top: 20px;
    align-self: start;
    height: fit-content;
}

@media (max-width: 1100px) {
    .word-key-row[b-baasrfppl6] {
        flex-direction: column;
    }

        .word-key-row > .compare-arrow[b-baasrfppl6] {
            margin-top: 0;
        }

            .word-key-row > .compare-arrow[b-baasrfppl6]::after {
                content: "↓";
            }
}

/* =====================================================
   Additional Spacing Corrections for Squished Layout
   ===================================================== */

/* Fix input words queue container layout spacing */
.alchemy-preparation-deck .alchemy-source-zone[style*="width:100%"][b-baasrfppl6] {
    align-items: center;
}

    .alchemy-preparation-deck .alchemy-source-zone[style*="width:100%"] h3[b-baasrfppl6] {
        align-self: flex-start;
    }

    .alchemy-preparation-deck .alchemy-source-zone[style*="width:100%"] .stones[b-baasrfppl6] {
        justify-content: center !important;
    }

.visual-card h1[b-baasrfppl6] {
    margin: 2px 0 0 0 !important;
}

.visual-card h2[b-baasrfppl6] {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

.dictionary-blueprint-title[b-baasrfppl6] {
    font-size: 14px !important;
    margin: 10px 0 4px 0 !important;
}

.animation-message[b-baasrfppl6] {
    margin-top: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
}
/* =====================================================
   Dictionary Entry Animations
   ===================================================== */

@keyframes rowPopIn-b-baasrfppl6 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

@keyframes stonePopIn-b-baasrfppl6 {
    from {
        opacity: 0;
        transform: scale(.4);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
.visual-card .stones[b-baasrfppl6] {
    margin: 0 !important; /* override shared CSS */
}
    /* Ensure classes that use these animations reference them properly */
    .dictionary-blueprint-row[b-baasrfppl6] {
        animation: rowPopIn-b-baasrfppl6 .35s ease both;
    }

    .dictionary-blueprint-item[b-baasrfppl6] {
        animation: stonePopIn-b-baasrfppl6 .3s ease both;
    }
.decision-diamond[b-baasrfppl6] {
    width: 70px;
    height: 70px;
    background: #cbd5e1;
    transform: rotate(45deg);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    transition: .25s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

    .decision-diamond span[b-baasrfppl6] {
        transform: rotate(-45deg);
        font-size: 28px;
        font-weight: bold;
        color: white;
    }

    .decision-diamond.found[b-baasrfppl6] {
        background: #10b981;
    }

    .decision-diamond.missing[b-baasrfppl6] {
        background: #f59e0b;
    }
/* =====================================================
   Input Words Deck
   ===================================================== */

.input-words-deck[b-baasrfppl6] {
    flex-direction: column;
    align-items: stretch;
}

.input-words-title[b-baasrfppl6] {
    font-size: 22px; /* Much larger than dictionary title */
    font-weight: 700;
    color: #23408e;
    text-align: left;
    margin: 0 0 12px 0;
}

.input-words-deck .stones[b-baasrfppl6] {
    justify-content: center;
}
.alchemy-distiller-beam[b-baasrfppl6] {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    transform: translateY(-10px);
}

    .alchemy-distiller-beam span[b-baasrfppl6] {
        font-size: 26px;
    }
.dictionary-variable-name[b-baasrfppl6] {
    font-family: Consolas, monospace;
    color: #2d5be3;
    background: rgba(45,91,227,.08);
    padding: 2px 6px;
    border-radius: 5px;
    font-weight: 700;
}
/* /Components/Pages/Quests/ArrayStringFoundations/GroupAnagrams/QuestGroupAnagramsL4.razor.rz.scp.css */
.right-column[b-u9heeznfm5] {
    flex: 0 0 420px;
}

.level-container[b-u9heeznfm5] {
    padding-left: 16px;
    padding-right: 16px;
}

/* =====================================================================
   SHARED UTILITIES
   ===================================================================== */

.count-container[b-u9heeznfm5] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.count-item[b-u9heeznfm5] {
    width: 55px;
    height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f1f5ff;
    border: 2px solid #c9dcff;
    border-radius: 14px;
    transition: .3s ease;
}

    .count-item.used[b-u9heeznfm5] {
        background: #e8f4ff;
        border-color: #2d5be3;
        transform: translateY(-5px);
    }

.count-letter[b-u9heeznfm5] {
    font-size: 22px;
    font-weight: 900;
    color: #23408e;
}

.count-value[b-u9heeznfm5] {
    font-size: 18px;
    font-weight: bold;
    color: #2d5be3;
}

.fingerprint-key[b-u9heeznfm5] {
    max-width: 700px;
    margin: 15px auto;
    padding: 15px 20px;
    background: #eef5ff;
    border: 2px solid #2d5be3;
    border-radius: 16px;
    color: #23408e;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    word-break: break-word;
}

.placeholder-key[b-u9heeznfm5] {
    background: #f7f9fc;
    border: 2px dashed #b9c9ec;
    color: #8aa7d6;
}

/* =====================================================================
   VISUAL LAYOUT FIXES
   ===================================================================== */

.visual-card .anagram-letter-wrapper[b-u9heeznfm5] {
    min-height: 0;
    height: auto;
}

.visual-card .stones[b-u9heeznfm5] {
    min-height: 0;
    height: auto;
    margin: 8px 0;
}

.visual-card .stone-wrapper[b-u9heeznfm5] {
    min-height: 0;
}

.visual-card h3[b-u9heeznfm5] {
    margin: 10px 0;
}

.visual-card .compare-arrow.static-arrow[b-u9heeznfm5] {
    height: auto;
    margin: 5px 0;
}

/* =====================================================================
   PREPARATION DECK
   ===================================================================== */

.alchemy-preparation-deck[b-u9heeznfm5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
    padding: 20px;
    background: #fafbfc;
    border: 2px dashed #b9c9ec;
    border-radius: 20px;
}

.alchemy-source-zone[b-u9heeznfm5] {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .alchemy-source-zone h3[b-u9heeznfm5] {
        margin-bottom: 20px !important;
    }

    .alchemy-source-zone .anagram-letter-wrapper[b-u9heeznfm5] {
        min-height: 85px !important;
        height: auto !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.alchemy-distiller-beam[b-u9heeznfm5] {
    font-size: 22px;
    font-weight: 900;
    color: #ffb300;
    letter-spacing: 1px;
    user-select: none;
}

.alchemy-array-zone[b-u9heeznfm5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
/* =====================================================================
   MINI ALCHEMY GRID
   ===================================================================== */

.bucket-grid.mini-alchemy-grid[b-u9heeznfm5] {
    grid-template-columns: repeat(13, minmax(0, 44px)) !important;
    gap: 10px 4px !important;
    width: 100%;
    max-width: 100%;
    padding: 8px 4px !important;
    background: #f4f8ff;
    border: 1px solid #c9dcff;
    border-radius: 14px;
}

.mini-alchemy-grid .bucket[b-u9heeznfm5] {
    width: 38px !important;
    height: 58px !important;
}

.mini-alchemy-grid .bucket-jar[b-u9heeznfm5]::after {
    top: 10px !important;
    left: 4px !important;
    width: 30px !important;
    height: 44px !important;
    border-radius: 8px 8px 12px 12px !important;
}

.mini-alchemy-grid .bucket-jar[b-u9heeznfm5]::before {
    top: 4px !important;
    left: 8px !important;
    width: 22px !important;
    height: 6px !important;
}

.mini-alchemy-grid .bucket[b-u9heeznfm5]::after {
    top: 16px !important;
    left: 10px !important;
    width: 4px !important;
    height: 24px !important;
}

.mini-alchemy-grid .bucket-letter[b-u9heeznfm5] {
    top: 22px !important;
    font-size: 11px !important;
}

.mini-alchemy-grid .bucket-value[b-u9heeznfm5] {
    top: 35px !important;
    font-size: 13px !important;
}

/* =====================================================================
   RECIPE SCROLL
   ===================================================================== */

.vault-scroll-station[b-u9heeznfm5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 25px 0;
}

.recipe-scroll[b-u9heeznfm5] {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 24px;
    background: #fff9e6;
    border: 2px solid #d4af37;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0,0,0,.06);
}

.scroll-seal[b-u9heeznfm5] {
    font-size: 24px;
    flex-shrink: 0;
}

.recipe-scroll .fingerprint-key[b-u9heeznfm5] {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    font-size: 14px !important;
}

.scroll-placeholder[b-u9heeznfm5] {
    background: #fdfefe;
    border-style: dashed;
    opacity: .6;
}

/* =====================================================================
   VISUAL CARD
   ===================================================================== */

.visual-card[b-u9heeznfm5] {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 992px) {
    .bucket-grid.mini-alchemy-grid[b-u9heeznfm5] {
        grid-template-columns: repeat(7, minmax(0, 44px)) !important;
    }
}

@media (max-width: 768px) {
    .alchemy-preparation-deck[b-u9heeznfm5] {
        flex-direction: column;
    }

    .count-container[b-u9heeznfm5] {
        gap: 8px;
    }

    .count-item[b-u9heeznfm5] {
        width: 48px;
        height: 58px;
    }
}
/* /Components/Pages/Quests/ArrayStringFoundations/IsSubsequence/QuestIsSubsequenceL2.razor.rz.scp.css */
/* =====================================================================
   IS SUBSEQUENCE L2: VIEWPORT OPTIMIZATION & COMPRESSION MODIFIERS
   ==================================================================== */

/* --- 1. Central Directional Connectors --- */
.arrow[b-xe85y89fzz] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 8px 0 !important; /* Tightly squashes structural page gaps */
    font-size: 20px !important;
    color: #2d5be3 !important;
}

/* --- 2. Element Grids & Padding --- */
.visual-panel .stones[b-xe85y89fzz] {
    margin-top: 10px !important; /* Cuts massive void air space below section text titles */
    margin-bottom: 10px !important; /* Standardizes row boundary distances */
    gap: 16px !important;
}

/* --- 3. Multi-Pointer Tracking Nodes & Rails --- */
.visual-panel .stone-wrapper[b-xe85y89fzz] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 105px !important; /* Locks standard safe tracking clearance height */
    height: auto !important;
}

.visual-panel .pointer[b-xe85y89fzz] {
    height: 32px !important; /* Balanced height tracking room */
    line-height: 1.2 !important;
    margin-bottom: 12px !important; /* Cushion space prevents diamond overlapping clips */
    z-index: 10 !important; /* Forces text layers to sit cleanly over active graphic glows */
}

/* --- 4. Dynamic Animations & Status Banners --- */
.visual-panel .stone.active[b-xe85y89fzz] {
    transform: translateY(-8px) scale(1.12) !important; /* Tames jumping travel vector distance */
}

.animation-message[b-xe85y89fzz] {
    margin-top: 12px !important;
    padding: 12px 20px !important; /* Slimmer, context-close execution notifications */
    font-size: 16px !important;
}
/* --- 5. Final Verification Output Badges --- */
.final-answer-panel[b-xe85y89fzz] {
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    width: 100%;
}

.answer-row-container[b-xe85y89fzz] {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
    margin: 12px 0 !important;
}

.answer-text-badge[b-xe85y89fzz] {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* Premium Purple Marker Highlight Pill capsule */
.result-boolean.success-true[b-xe85y89fzz] {
    color: #ffffff !important;
    background-color: #7c3aed !important;
    border: 2px solid #6d28d9 !important;
    padding: 2px 14px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}

/* Fallback Error Condition matching your theme */
.result-boolean.error-false[b-xe85y89fzz] {
    color: #ffffff !important;
    background-color: #dc2626 !important;
    border: 2px solid #b91c1c !important;
    padding: 2px 14px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}

.result-desc[b-xe85y89fzz] {
    color: #23408e;
    font-weight: 700;
}

/* ============================================================
   IS SUBSEQUENCE LEVEL 2
   Two Pointers - Return Condition Visualization (UPDATED OVERRIDES)
   ============================================================ */

.pointer-hidden[b-xe85y89fzz] {
    visibility: hidden;
}

/* Return Condition Evaluation Panel (Glassmorphic Blueprint Card) */
/* ============================================================
   IS SUBSEQUENCE LEVEL 2
   Two Pointers - Return Condition Visualization (COMPACT INLINE)
   ============================================================ */

.pointer-hidden[b-xe85y89fzz] {
    visibility: hidden;
}

/* Return Condition Evaluation Panel (Flat, Clean, Low-Profile Card) */
.return-evaluation-panel[b-xe85y89fzz] {
    margin-top: 12px !important;
    padding: 12px 16px !important;
    background: #fcfdfe !important;
    border: 1px solid #dbeafe !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01) !important;
}

    /* Small, punchy technical subtitle */
    .return-evaluation-panel h3[b-xe85y89fzz] {
        color: #23408e !important;
        text-align: center !important;
        margin: 0 0 8px 0 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
    }

/* Tighter matched letter checklist spacing */
.matched-checklist[b-xe85y89fzz] {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 4px 0 10px 0 !important;
}

.character-box[b-xe85y89fzz] {
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

/* Consolidated Single-Line Condition Badge */
.return-result[b-xe85y89fzz] {
    text-align: center !important;
    margin-top: 4px !important;
}

.success-result[b-xe85y89fzz],
.failure-result[b-xe85y89fzz] {
    display: inline-block !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border: 1px solid !important;
}

.success-result[b-xe85y89fzz] {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    border-color: #a7f3d0 !important;
}

.failure-result[b-xe85y89fzz] {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #fca5a5 !important;
}

/* Subtle inline code tags for variables inside the badge */
.return-result code[b-xe85y89fzz] {
    background: rgba(0, 0, 0, 0.04);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    color: inherit;
}
/* /Components/Pages/Quests/ArrayStringFoundations/IsSubsequence/QuestIsSubsequenceL3.razor.rz.scp.css */
/* =====================================================================
   IS SUBSEQUENCE L3: LOCAL COMPONENT MODIFIERS
   ===================================================================== */

.arrow[b-4hetzi7u2z] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 6px 0 !important;
    font-size: 18px !important;
    color: #2d5be3 !important;
}

.visual-panel .stones[b-4hetzi7u2z] {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    gap: 12px !important;
}

.visual-panel .stone-wrapper[b-4hetzi7u2z] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 85px !important;
    height: auto !important;
}

.visual-panel .pointer[b-4hetzi7u2z] {
    height: 24px !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
    z-index: 10 !important;
}

.visual-panel .stone.active[b-4hetzi7u2z] {
    transform: translateY(-4px) scale(1.1) !important;
}

/* =====================================================================
   LOCAL BINARY SEARCH CORE ARRAY LAYOUT
   ===================================================================== */

.binary-array[b-4hetzi7u2z] {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.binary-column[b-4hetzi7u2z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 62px;
}

.pointer-area[b-4hetzi7u2z] {
    min-height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
    margin-bottom: 6px;
}

.binary-pointer[b-4hetzi7u2z] {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    text-align: center;
    line-height: 1;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

    .binary-pointer.low[b-4hetzi7u2z] {
        background: #e0f2fe;
        color: #0369a1;
        border: 1px solid #bae6fd;
    }

    .binary-pointer.mid[b-4hetzi7u2z] {
        background: #f3e8ff;
        color: #6b21a8;
        border: 1px solid #e9d5ff;
    }

    .binary-pointer.high[b-4hetzi7u2z] {
        background: #fee2e2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }

.pointer-arrow[b-4hetzi7u2z] {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1;
    margin-top: 1px;
}

.binary-box[b-4hetzi7u2z] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    background: white;
    color: #1e293b;
    transition: all 0.2s ease;
}

    .binary-box.mid-active[b-4hetzi7u2z] {
        background: #f3e8ff !important;
        border-color: #9333ea !important;
        color: #581c87 !important;
        box-shadow: 0 0 12px rgba(147, 51, 234, 0.4) !important;
    }

.binary-index[b-4hetzi7u2z] {
    margin-top: 6px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}

/* =====================================================================
   PREMIUM RESULT CAPSULES
   ===================================================================== */

.result-boolean.success-true[b-4hetzi7u2z] {
    color: #fff !important;
    background: #7c3aed !important;
    padding: 2px 14px;
    border-radius: 8px;
    border: 2px solid #6d28d9;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.result-boolean.error-false[b-4hetzi7u2z] {
    color: #fff !important;
    background: #dc2626 !important;
    padding: 2px 14px;
    border-radius: 8px;
    border: 2px solid #b91c1c;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

.mid-compare-row[b-4hetzi7u2z] {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin: 8px 0;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.prev-matched-panel[b-4hetzi7u2z] {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin: 10px 0;
}

.prev-matched-badge[b-4hetzi7u2z] {
    min-width: 46px;
    padding: 6px 14px;
    border-radius: 10px;
    background: #eef2ff;
    border: 2px solid #6366f1;
    color: #3730a3;
    font-weight: 800;
    font-size: 18px;
    text-align: center;
    animation: stonePopIn .3s ease both;
}

.alchemy-preparation-deck[b-4hetzi7u2z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(210, 225, 245, 0.8);
    border-radius: 16px;
    padding: 12px 16px;
    margin: 10px 0;
}

.alchemy-source-zone[b-4hetzi7u2z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

    .alchemy-source-zone .stones[b-4hetzi7u2z] {
        display: flex !important;
        justify-content: center !important;
        position: relative !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
    }

.alchemy-distiller-beam[b-4hetzi7u2z] {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    transform: translateY(-10px);
}

    .alchemy-distiller-beam span[b-4hetzi7u2z] {
        font-size: 26px;
    }

.anagram-letter-stone[b-4hetzi7u2z] {
    position: relative !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 10px;
    background: #3b82f6;
    color: white;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
}

    .anagram-letter-stone.active[b-4hetzi7u2z] {
        background: #2563eb;
        transform: scale(1.08);
        box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3);
    }

    .anagram-letter-stone.sorted[b-4hetzi7u2z] {
        background: #7c3aed;
    }

    .anagram-letter-stone.placeholder[b-4hetzi7u2z] {
        background: #cbd5e1;
        color: #475569;
    }

.anagram-letter-wrapper[b-4hetzi7u2z] {
    position: relative !important;
    display: inline-flex;
    transform: none !important;
    left: auto !important;
    top: auto !important;
}

.decision-diamond[b-4hetzi7u2z] {
    width: 70px;
    height: 70px;
    background: #cbd5e1;
    transform: rotate(45deg);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    transition: .25s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

    .decision-diamond span[b-4hetzi7u2z] {
        transform: rotate(-45deg);
        font-size: 28px;
        font-weight: bold;
        color: white;
    }

    .decision-diamond.found[b-4hetzi7u2z] {
        background: #10b981;
    }

    .decision-diamond.missing[b-4hetzi7u2z] {
        background: #f59e0b;
    }

    .decision-diamond.small[b-4hetzi7u2z] {
        width: 44px;
        height: 44px;
    }

        .decision-diamond.small span[b-4hetzi7u2z] {
            font-size: 18px;
        }
.binary-yes[b-4hetzi7u2z] {
    background: #1e3a8a;
    color: white;
    border-color: #1e3a8a;
}

.binary-no[b-4hetzi7u2z] {
    background: #0f766e;
    color: white;
    border-color: #0f766e;
}

.binary-decision-text[b-4hetzi7u2z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.binary-decision-subtitle[b-4hetzi7u2z] {
    font-size: 0.8rem;
    color: #64748b;
}

.binary-decision-result[b-4hetzi7u2z] {
    font-weight: 700;
    min-width: 150px;
}
/* /Components/Pages/Quests/ArrayStringFoundations/LongestConsecutiveSequence/QuestLongestConsecutiveSequenceL2.razor.rz.scp.css */
/* CSS for QuestLongestConsecutiveSequenceL2 component */

.array-pointer[b-o8v1b2rqjv] {
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
}

.pointer-label[b-o8v1b2rqjv] {
    color: #2d7cff;
    font-size: 1.2rem;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(45, 124, 255, 0.8);
}

.arrow[b-o8v1b2rqjv] {
    color: #2d7cff;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 0 8px rgba(45, 124, 255, 0.9), 0 0 15px rgba(45, 124, 255, 0.7);
    text-align: center;
}
.pointer-i[b-o8v1b2rqjv] {
    position: relative;
    z-index: 20;
    transform: translateY(-8px);
}
/* /Components/Pages/Quests/ArrayStringFoundations/LongestConsecutiveSequence/QuestLongestConsecutiveSequenceL3.razor.rz.scp.css */
/* CSS for QuestLongestConsecutiveSequenceL3 component */
.arrow[b-eus803htw5] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 2px 0 !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 18px !important;
    color: #2d5be3 !important;
}
.visual-panel[b-eus803htw5] {
    margin-bottom: 10px;
}
/* /Components/Pages/Quests/ArrayStringFoundations/ProductOfArrayExceptSelf/QuestProductOfArrayExceptSelfL2.razor.rz.scp.css */
/* CSS for QuestProductOfArrayExceptSelfL2 component */
.arrow[b-zhhf8da1cc] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 2px 0 !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 18px !important;
    color: #2d5be3 !important;
}
.multiply-sign[b-zhhf8da1cc] {
    font-size: 22px;
    font-weight: bold;
    color: #2d5be3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
}
.coin-wrapper[b-zhhf8da1cc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 110px;
}
.pointer[b-zhhf8da1cc] {
    height: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    font-size: 22px;
    font-weight: bold;
    z-index: 2;
}
.stored-glow[b-zhhf8da1cc] {
    animation: storedPulse-b-zhhf8da1cc 0.8s ease-in-out;
    box-shadow: 0 0 20px 8px #2196f3;
    border-color: #2196f3;
}

@keyframes storedPulse-b-zhhf8da1cc {
    0% {
        box-shadow: 0 0 0 0 #2196f3;
    }

    50% {
        box-shadow: 0 0 25px 10px #2196f3;
    }

    100% {
        box-shadow: 0 0 20px 8px #2196f3;
    }
}
.pointer-area[b-zhhf8da1cc] {
    height: 45px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    overflow: visible;
}

.pointer[b-zhhf8da1cc] {
    position: absolute;
    text-align: center;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 22px;
    z-index: 2;
    white-space: nowrap;
}

.pointer-i[b-zhhf8da1cc] {
    left: 50%;
    transform: translateX(-18px);
}

.pointer-j[b-zhhf8da1cc] {
    left: 50%;
    transform: translateX(5px);
}
/* /Components/Pages/Quests/ArrayStringFoundations/ProductOfArrayExceptSelf/QuestProductOfArrayExceptSelfL3.razor.rz.scp.css */
/* CSS for QuestProductOfArrayExceptSelfL3 component */
.arrow[b-fo2y88xosu] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 2px 0 !important;
    height: 20px !important;
    line-height: 20px !important;
    font-size: 18px !important;
    color: #2d5be3 !important;
}
.pointer-host[b-fo2y88xosu] {
    position: relative;
    display: inline-block;
}
.array-pointer[b-fo2y88xosu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 0;
    position: relative;
    top: -35px;
    font-weight: bold;
    font-size: 18px;
    line-height: 18px;
    z-index: 20;
}
.multiply-sign[b-fo2y88xosu] {
    font-size: 22px;
    font-weight: bold;
    color: #2d5be3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
}
/* /Components/Pages/Quests/ArrayStringFoundations/TopKFrequentElements/QuestTopKFrequentElementsL2.razor.rz.scp.css */
/* =====================================================================
   LOCAL COMPONENT COMPONENTS (SORTING & DECK PHASES)
   ===================================================================== */

.empty-vault-message[b-40noios3u2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8a7261;
    font-weight: 600;
    padding: 32px 0 !important;
    text-align: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.05);
}

.vault-icon[b-40noios3u2] {
    font-size: 38px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.sorting-phase-deck[b-40noios3u2] {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 4px solid #4a3525;
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

    .sorting-phase-deck h3[b-40noios3u2] {
        color: #f59e0b !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        margin-top: 0 !important;
        margin-bottom: 16px !important;
        letter-spacing: 0.5px;
        text-transform: none !important;
    }

.sorted-items-lane[b-40noios3u2] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.sorted-item-pill[b-40noios3u2] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

    .sorted-item-pill .pill-number[b-40noios3u2] {
        font-weight: 700;
        color: #f8fafc;
        font-family: monospace;
    }

    .sorted-item-pill .pill-freq[b-40noios3u2] {
        font-size: 12px;
        color: #64748b;
    }

.result-selected[b-40noios3u2] {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

    .result-selected .pill-number[b-40noios3u2] {
        color: #10b981 !important;
    }

    .result-selected .pill-freq[b-40noios3u2] {
        color: #a7f3d0 !important;
    }

.frequency-count-badge[b-40noios3u2] {
    font-size: 18px;
    font-weight: 700;
    color: #cbd5e1;
    font-family: 'Fira Code', Consolas, Monaco, monospace;
}

.text-processing[b-40noios3u2] {
    color: #ffb300 !important;
    font-weight: 800;
    animation: pulseProcessingText-b-40noios3u2 1.2s infinite alternate ease-in-out;
}

@keyframes pulseProcessingText-b-40noios3u2 {
    0% {
        opacity: 0.5;
        transform: scale(0.98);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* /Components/Pages/Quests/ArrayStringFoundations/TopKFrequentElements/QuestTopKFrequentElementsL3.razor.rz.scp.css */
/* =====================================================================
   TOP K FREQUENT ELEMENTS L3 - COMPACT LAYOUT & PIPELINE (SQUISHED)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Card & Mascot Compression
   --------------------------------------------------------------------- */
.visual-card[b-z7x3wymw4t] {
    padding: 8px 16px !important; /* Reduced padding */
}

.lion-container[b-z7x3wymw4t] {
    margin-bottom: 1px !important;
}

.lion[b-z7x3wymw4t] {
    font-size: 32px !important; /* Down from 45px */
}

h1[b-z7x3wymw4t] {
    font-size: 22px !important; /* Increased for readability (Up from 18px) */
    margin: 4px 0 !important;
}

h2[b-z7x3wymw4t] {
    font-size: 15px !important; /* Increased for readability (Up from 13px) */
    margin-bottom: 6px !important;
}

/* ---------------------------------------------------------------------
   2. Visual Panels & Array Stones
   --------------------------------------------------------------------- */
.visual-panel[b-z7x3wymw4t] {
    margin-top: 4px !important; /* Forcefully overrides inline margin-top: 20px */
    padding: 6px 12px !important; /* Down from 10px 14px */
    min-height: auto !important; /* Prevents container from stretching vertically */
    height: auto !important;
}

    .visual-panel h3[b-z7x3wymw4t] {
        font-size: 16px !important; /* Increased for readability (Up from 14px) */
        font-weight: 700 !important;
        color: #23408e !important;
        margin-top: 0 !important;
        margin-bottom: 4px !important;
    }

/* General scoped H3 styles within the visual card */
.visual-card h3[b-z7x3wymw4t] {
    font-size: 16px !important; /* Increased for readability (Up from 14px) */
    margin-top: 6px !important;
    margin-bottom: 4px !important;
}

.visual-panel .stones[b-z7x3wymw4t],
.target .stones[b-z7x3wymw4t],
.stones[b-z7x3wymw4t] {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important; /* Down from 16px */
    margin: 4px 0 !important; /* Down from 6px */
    flex-wrap: wrap !important;
    min-height: auto !important;
    height: auto !important;
}

/* Standalone crystal stones */
.visual-panel .stone[b-z7x3wymw4t],
.target .stone[b-z7x3wymw4t],
.stone[b-z7x3wymw4t] {
    position: relative !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-width: auto !important;
    height: auto !important;
    font-size: 45px !important; /* Down from 65px */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2)) !important;
    transition: all 0.3s ease !important;
}

    /* Stone labels (For list panels, target outputs, etc.) */
    .visual-panel .stone span[b-z7x3wymw4t],
    .target .stone span[b-z7x3wymw4t],
    .stone span[b-z7x3wymw4t] {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: auto !important;
        text-align: center !important;
        color: #23408e !important;
        font-size: 18px !important; /* Increased for readability (Up from 16px) */
        font-weight: 900 !important;
        margin-top: 4px !important; /* Down from 10px */
        line-height: 1.1 !important;
    }

        /* List member count labels */
        .visual-panel .stone span small[b-z7x3wymw4t],
        .stone span small[b-z7x3wymw4t] {
            font-size: 13px !important; /* Increased for readability (Up from 10px) */
            font-weight: 700 !important; /* Slightly bolder for better visibility */
            color: #333 !important; /* Darker grey to improve contrast */
            margin-top: 4px !important;
        }

/* Input Queue Diamond Numbers (Positions digits back inside the diamond shapes) */
.input-stones .stone span[b-z7x3wymw4t] {
    position: absolute !important;
    top: 52% !important; /* Aligned vertically over the wide part of the diamond */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1e3a8a !important; /* Dark blue contrast inside the light blue emoji */
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    z-index: 2 !important;
}

/* Active Top-K stones (EXCLUDES the square number tile so it doesn't turn transparent) */
.visual-panel .stone.top-frequency[b-z7x3wymw4t],
.visual-panel .stone.active[b-z7x3wymw4t],
.stone.active:not(.number-tile)[b-z7x3wymw4t] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: translateY(-4px) scale(1.05) !important;
    filter: drop-shadow(0 0 10px gold) !important;
}

/* Active state specifically for the square number tile (Retains its blue gradient/border) */
.number-tile.active[b-z7x3wymw4t] {
    transform: translateY(-4px) scale(1.05) !important;
    filter: drop-shadow(0 0 10px gold) !important;
}

/* Final answer glow - Preserved */
.target .stone.active[b-z7x3wymw4t] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    animation: answerGlow-b-z7x3wymw4t 1.2s infinite alternate ease-in-out !important;
}

/* Stone wrappers */
.stone-wrapper[b-z7x3wymw4t],
.visual-panel .stone-wrapper[b-z7x3wymw4t],
.target .stone-wrapper[b-z7x3wymw4t] {
    min-height: auto !important;
    height: auto !important;
}

/* Pointer area */
.visual-panel .pointer[b-z7x3wymw4t],
.pointer[b-z7x3wymw4t] {
    height: 20px !important; /* Down from 30px */
    line-height: 1 !important;
    margin-bottom: 2px !important;
    font-size: 12px !important;
}

/* Arrows */
.arrow[b-z7x3wymw4t] {
    margin: 1px 0 !important;
    font-size: 12px !important; /* Down from 16px */
    line-height: 1 !important;
    text-align: center !important;
}

/* Target answer */
.target[b-z7x3wymw4t] {
    font-size: 16px !important; /* Slightly increased for readability (Up from 15px) */
    margin-top: 4px !important; /* Forcefully overrides inline margin-top: 20px */
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
}

/* Message banner */
.animation-message[b-z7x3wymw4t] {
    margin-top: 4px !important; /* Down from 10px */
    padding: 6px 10px !important; /* Down from 10px */
    font-size: 13px !important; /* Down from 15px */
}

/* ---------------------------------------------------------------------
   3. Pipeline Processing Deck (Number + Beam + ContainsKey)
   --------------------------------------------------------------------- */
.alchemy-preparation-deck[b-z7x3wymw4t] {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 16px !important; /* Down from 24px */
    max-width: 360px !important; /* Down from 420px */
    margin: 8px auto !important; /* Down from 16px */
    width: 100% !important;
}

/* Number Column */
.alchemy-source-zone[b-z7x3wymw4t],
.alchemy-decision-zone[b-z7x3wymw4t] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 90px !important; /* Down from 110px */
}

    .alchemy-source-zone h3[b-z7x3wymw4t],
    .alchemy-decision-zone h3[b-z7x3wymw4t] {
        height: 18px !important;
        margin: 0 0 6px 0 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #23408e !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Keep both objects starting at same level */
    .alchemy-source-zone .stones[b-z7x3wymw4t],
    .alchemy-decision-zone .decision-container[b-z7x3wymw4t] {
        height: 72px !important; /* Down from 100px */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

/* Arrow Beam */
.alchemy-distiller-beam[b-z7x3wymw4t] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 50px !important; /* Down from 75px */
    flex-shrink: 0 !important;
    padding: 0 2px !important;
}

    .alchemy-distiller-beam span[b-z7x3wymw4t] {
        font-size: 20px !important; /* Down from 26px */
    }

/* ---------------------------------------------------------------------
   4. ContainsKey Flowchart Decision Diamond
   --------------------------------------------------------------------- */
.decision-container[b-z7x3wymw4t] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.decision-diamond[b-z7x3wymw4t] {
    width: 50px !important; /* Down from 65px */
    height: 50px !important; /* Down from 65px */
    background: #cbd5e1 !important;
    transform: rotate(45deg);
    border-radius: 6px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    transition: 0.25s ease;
}

    .decision-diamond span[b-z7x3wymw4t] {
        transform: rotate(-45deg);
        font-size: 24px !important; /* Down from 30px */
        font-weight: bold;
        color: white;
    }

    .decision-diamond.found[b-z7x3wymw4t] {
        background: #10b981 !important;
    }

    .decision-diamond.missing[b-z7x3wymw4t] {
        background: #f59e0b !important;
    }

/* Tile for single number from nums */
.number-tile[b-z7x3wymw4t] {
    width: 64px !important; /* Down from 82px */
    height: 64px !important; /* Down from 82px */
    min-width: 64px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: linear-gradient(180deg,#60a5fa,#2563eb) !important;
    border: 2px solid #93c5fd !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 12px rgba(37,99,235,.25) !important;
    padding: 0 !important;
    position: relative !important;
}

    .number-tile span[b-z7x3wymw4t],
    .alchemy-source-zone .stone.number-tile span[b-z7x3wymw4t] {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%,-50%) !important;
        margin: 0 !important;
        margin-top: 0 !important; /* Prevents inherit margin displacement */
        padding: 0 !important;
        color: #fff !important;
        font-size: 32px !important; /* Down from 40px */
        font-weight: 900 !important;
        line-height: 1 !important;
    }

/* ---------------------------------------------------------------------
   5. Dictionary Blueprint / Blueprint-Row Squishing
   --------------------------------------------------------------------- */
.dictionary-squished[b-z7x3wymw4t] {
    margin: 2px 0 !important;
}

.dictionary-blueprint-header[b-z7x3wymw4t] {
    padding: 3px 6px !important;
    font-size: 11px !important;
}

.dictionary-blueprint-row[b-z7x3wymw4t] {
    padding: 3px 6px !important;
    min-height: auto !important;
}

.dictionary-blueprint-key-value[b-z7x3wymw4t],
.dictionary-blueprint-item-label[b-z7x3wymw4t] {
    font-size: 13px !important;
}

.dictionary-blueprint-empty[b-z7x3wymw4t] {
    padding: 10px !important;
    margin: 2px 0 !important;
}

/* ---------------------------------------------------------------------
   6. Keyframe Animations - Preserved
   --------------------------------------------------------------------- */
@keyframes answerGlow-b-z7x3wymw4t {
    from {
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
        transform: scale(1);
    }

    to {
        filter: drop-shadow(0 0 20px orange) drop-shadow(0 0 5px gold);
        transform: scale(1.1);
    }
}
/* /Components/Pages/Quests/ArrayStringFoundations/TopKFrequentElements/QuestTopKFrequentElementsL4.razor.rz.scp.css */
/* =====================================================================
   QuestTopKFrequentElementsL4 - LOCALIZED COMPACT OVERRIDES
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Layout Compression
   --------------------------------------------------------------------- */

.level-container[b-wehblicdtm] {
    padding: 15px !important;
    gap: 12px !important;
    min-height: auto !important;
}

.bottom-section[b-wehblicdtm] {
    gap: 15px !important;
}

.visual-card[b-wehblicdtm] {
    padding: 12px 20px !important;
}


/* ---------------------------------------------------------------------
   2. Mascot & Headers
   --------------------------------------------------------------------- */

.lion-container[b-wehblicdtm] {
    margin-bottom: 2px !important;
}

.lion[b-wehblicdtm] {
    font-size: 36px !important;
}

h1[b-wehblicdtm] {
    font-size: 22px !important;
    margin: 4px 0 !important;
}

h2[b-wehblicdtm] {
    font-size: 14px !important;
    margin: 0 0 6px !important;
}


/* ---------------------------------------------------------------------
   3. Visual Panels
   --------------------------------------------------------------------- */

.visual-panel[b-wehblicdtm] {
    margin-top: 4px !important;
    padding: 6px 12px !important;
    min-height: auto !important;
    height: auto !important;
}

    .visual-panel h3[b-wehblicdtm] {
        font-size: 14px !important;
        margin: 2px 0 4px !important;
    }


/* ---------------------------------------------------------------------
   4. Input Array
   --------------------------------------------------------------------- */

.stones[b-wehblicdtm] {
    margin: 4px 0 !important;
    gap: 12px !important;
    min-height: auto !important;
    height: auto !important;
}

.stone-wrapper[b-wehblicdtm] {
    min-height: auto !important;
    height: auto !important;
    padding-top: 14px !important;
    margin: 0 !important;
    justify-content: center !important;
}

.pointer[b-wehblicdtm] {
    height: auto !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.stone[b-wehblicdtm] {
    font-size: 45px !important;
}

    .stone span[b-wehblicdtm] {
        top: 20px !important;
        font-size: 16px !important;
    }

    .stone.active[b-wehblicdtm] {
        transform: translateY(-8px) scale(1.05) !important;
    }


/* ---------------------------------------------------------------------
   5. Arrows / Messages / Answer
   --------------------------------------------------------------------- */

.arrow[b-wehblicdtm] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 2px 0 !important;
    font-size: 12px !important;
    color: #2d5be3 !important;
    text-align: center !important;
}

.animation-message[b-wehblicdtm] {
    margin-top: 6px !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
}

.target[b-wehblicdtm] {
    font-size: 16px !important;
}


/* ---------------------------------------------------------------------
   6. Bucket Values
   --------------------------------------------------------------------- */

.bucket-value[b-wehblicdtm] {
    top: 52px;
    display: flex;
    justify-content: center;
    gap: 4px;
    font-family: monospace;
    font-size: 14px;
}

.bucket-item-active[b-wehblicdtm] {
    color: #f59e0b;
    font-weight: 900;
    border-bottom: 2px dashed #f59e0b;
    padding: 0 2px;
}


/* ---------------------------------------------------------------------
   7. Result List
   --------------------------------------------------------------------- */

.result-list-container[b-wehblicdtm] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    min-height: 44px;
}

.result-list-empty[b-wehblicdtm] {
    color: rgba(0,0,0,.4);
    font-size: 13px;
    font-style: italic;
}

.result-list[b-wehblicdtm] {
    display: flex;
    gap: 8px;
}

.result-tile[b-wehblicdtm] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 38px;
    height: 34px;
    padding: 4px 10px;
    border: 2px solid #93c5fd;
    border-radius: 8px;
    background: linear-gradient(180deg, #60a5fa, #2563eb);
    color: white;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 4px 8px rgba(37,99,235,.2);
}

.result-count[b-wehblicdtm] {
    margin-top: 2px;
    color: #555;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}
/* /Components/Pages/Quests/ArrayStringTwoPointers/ValidPalindrome/QuestValidPalindromeL1.razor.rz.scp.css */
/* CSS for QuestValidPalindromeL1 component */
.button-row[b-9r8fl7dde5] {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}
/* /Components/Pages/Quests/ArrayStringTwoPointers/ValidPalindrome/QuestValidPalindromeL2.razor.rz.scp.css */
/* CSS for QuestValidPalindromeL2 component */
.stone-wrapper[b-snpt6yw9sb] {
    position: relative;
}


.pointer[b-snpt6yw9sb] {
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 50;
}


.pointer-i[b-snpt6yw9sb] {
    color: #006064;
    font-size: 18px;
    font-weight: 900;
    line-height: 18px;
    text-shadow: 0 0 4px rgba(0, 96, 100, 0.4);
}

.pointer-arrow[b-snpt6yw9sb] {
    position: static;
    color: #006064;
    font-size: 28px;
    font-weight: 900;
    line-height: 18px;
    margin-top: 6px;
    margin-bottom: 2px;
    text-shadow: 0 0 5px rgba(0, 96, 100, 0.5);
}
.array-container[b-snpt6yw9sb] {
    position: relative;
    overflow: visible;
}
/* /Components/Pages/Quests/ArrayStringTwoPointers/ValidPalindrome/QuestValidPalindromeL3.razor.rz.scp.css */
/* CSS for QuestValidPalindromeL3 component */
.stone-wrapper[b-ifj5alzmh5] {
    position: relative;
    overflow: visible;
    z-index: 1;
}

.pointer[b-ifj5alzmh5] {
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
}
.pointer-arrow[b-ifj5alzmh5] {
    position: static;
    color: #006064;
    font-size: 28px;
    font-weight: 900;
    line-height: 18px;
    margin-top: 6px;
    margin-bottom: 2px;
    text-shadow: 0 0 5px rgba(0, 96, 100, 0.5);
}

.pointer-left[b-ifj5alzmh5],
.pointer-right[b-ifj5alzmh5],
.pointer-both[b-ifj5alzmh5] {
    color: #1565c0;
}
.pointer-left[b-ifj5alzmh5],
.pointer-right[b-ifj5alzmh5] {
    z-index: 100;
}
.pointer-left[b-ifj5alzmh5],
.pointer-right[b-ifj5alzmh5],
.pointer-both[b-ifj5alzmh5] {
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
}
/* /Components/Pages/QuestVisuals/BuySell.razor.rz.scp.css */
/* ==========================================
   BUY / SELL CARDS
========================================== */

.buy-sell-card[b-tjzkj98fpp] {
    background: #1a1a2e;
    border: 2px solid #2a2a40;
    border-radius: 16px;
    padding: 15px 20px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    user-select: none;
    min-width: 120px;
}

    .buy-sell-card:hover[b-tjzkj98fpp] {
        transform: translateY(-4px);
        border-color: #4a4e69;
    }

.buy-sell-label[b-tjzkj98fpp] {
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #a0a0c0;
    letter-spacing: 0.5px;
}


/* ==========================================
   CHART CONTAINER
========================================== */

.buy-sell-chart[b-tjzkj98fpp] {
    width: 60px;
    height: 45px;
    position: relative;
    margin: 5px;
}

.buy-sell-axis-y[b-tjzkj98fpp] {
    position: absolute;
    left: 2px;
    bottom: 2px;
    width: 2px;
    height: 38px;
    background: #4a4e69;
}

.buy-sell-axis-x[b-tjzkj98fpp] {
    position: absolute;
    left: 2px;
    bottom: 2px;
    width: 55px;
    height: 2px;
    background: #4a4e69;
}


/* ==========================================
   BUY CHART
========================================== */

.buy .buy-sell-node[b-tjzkj98fpp],
.buy .buy-sell-line[b-tjzkj98fpp] {
    background-color: #ff5252;
}

.buy .node-1[b-tjzkj98fpp] {
    left: 8px;
    top: 6px;
}

.buy .node-2[b-tjzkj98fpp] {
    left: 28px;
    top: 18px;
}

.buy .node-3[b-tjzkj98fpp] {
    left: 48px;
    top: 32px;
}

.buy .line-down-1[b-tjzkj98fpp] {
    position: absolute;
    left: 10px;
    top: 13px;
    width: 23px;
    height: 2px;
    transform: rotate(30deg);
}

.buy .line-down-2[b-tjzkj98fpp] {
    position: absolute;
    left: 30px;
    top: 25px;
    width: 22px;
    height: 2px;
    transform: rotate(35deg);
}


/* ==========================================
   SELL CHART
========================================== */

.sell .buy-sell-node[b-tjzkj98fpp],
.sell .buy-sell-line[b-tjzkj98fpp] {
    background-color: #00e676;
}

.sell .node-4[b-tjzkj98fpp] {
    left: 8px;
    top: 32px;
}

.sell .node-5[b-tjzkj98fpp] {
    left: 28px;
    top: 20px;
}

.sell .node-6[b-tjzkj98fpp] {
    left: 48px;
    top: 6px;
}

.sell .line-up-1[b-tjzkj98fpp] {
    position: absolute;
    left: 10px;
    top: 26px;
    width: 22px;
    height: 2px;
    transform: rotate(-30deg);
}

.sell .line-up-2[b-tjzkj98fpp] {
    position: absolute;
    left: 30px;
    top: 13px;
    width: 23px;
    height: 2px;
    transform: rotate(-35deg);
}

.buy-sell-node[b-tjzkj98fpp] {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    z-index: 2;
}


/* ==========================================
   BUY SELECTED
========================================== */

.buy-sell-card.buy.selected[b-tjzkj98fpp] {
    border-color: #ff5252;
    background: linear-gradient(135deg, #2c1212, #4a1f1f);
    box-shadow: 0 0 25px #ff5252, 0 0 50px rgba(255, 82, 82, 0.4);
}

    .buy-sell-card.buy.selected .buy-sell-node[b-tjzkj98fpp],
    .buy-sell-card.buy.selected .buy-sell-line[b-tjzkj98fpp] {
        box-shadow: 0 0 8px #ff5252;
    }

    .buy-sell-card.buy.selected .buy-sell-label[b-tjzkj98fpp] {
        color: #ff5252;
    }


/* ==========================================
   SELL SELECTED
========================================== */

.buy-sell-card.sell.selected[b-tjzkj98fpp] {
    border-color: #00e676;
    background: linear-gradient(135deg, #0f281e, #1b4332);
    box-shadow: 0 0 25px #00e676, 0 0 50px rgba(0, 230, 118, 0.4);
}

    .buy-sell-card.sell.selected .buy-sell-node[b-tjzkj98fpp],
    .buy-sell-card.sell.selected .buy-sell-line[b-tjzkj98fpp] {
        box-shadow: 0 0 8px #00e676;
    }

    .buy-sell-card.sell.selected .buy-sell-label[b-tjzkj98fpp] {
        color: #00e676;
    }


/* ==========================================
   STOCK PRICE BOARD
========================================== */

.stock-prices[b-tjzkj98fpp] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin: 30px 0;
}

.stock-price-card[b-tjzkj98fpp] {
    width: 90px;
    min-height: 125px;
    padding: 15px 10px;
    box-sizing: border-box;
    background: #1a1a2e;
    border: 2px solid #2a2a40;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    position: relative;
}

    .stock-price-card:hover[b-tjzkj98fpp] {
        transform: translateY(-4px);
        border-color: #4a4e69;
    }

.stock-day[b-tjzkj98fpp] {
    font-size: 0.8rem;
    font-weight: bold;
    color: #a0a0c0;
    margin-bottom: 8px;
}

.stock-price[b-tjzkj98fpp] {
    font-size: 1.8rem;
    font-weight: bold;
    color: white;
}


/* ==========================================
   BUY STATE
========================================== */

.stock-price-card.buy-selected[b-tjzkj98fpp] {
    border-color: #ff5252;
    background: linear-gradient(135deg, #2c1212, #4a1f1f);
    box-shadow: 0 0 20px #ff5252, 0 0 40px rgba(255, 82, 82, 0.35);
}

.buy-selected .stock-day[b-tjzkj98fpp] {
    color: #ff8a8a;
}

.buy-selected .stock-price[b-tjzkj98fpp] {
    color: #ff5252;
}


/* ==========================================
   SELL STATE
========================================== */

.stock-price-card.sell-selected[b-tjzkj98fpp] {
    border-color: #00e676;
    background: linear-gradient(135deg, #0f281e, #1b4332);
    box-shadow: 0 0 20px #00e676, 0 0 40px rgba(0, 230, 118, 0.35);
}

.sell-selected .stock-day[b-tjzkj98fpp] {
    color: #69f0ae;
}

.sell-selected .stock-price[b-tjzkj98fpp] {
    color: #00e676;
}


/* ==========================================
   STOCK ACTIONS
========================================== */

.stock-action[b-tjzkj98fpp],
.stock-badge[b-tjzkj98fpp] {
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.buy-action[b-tjzkj98fpp],
.buy-badge[b-tjzkj98fpp] {
    color: #ff5252;
}

.sell-action[b-tjzkj98fpp],
.sell-badge[b-tjzkj98fpp] {
    color: #00e676;
}
/* ==========================================
   COMPACT BUY / SELL CHART
   Used inside stock price cards
   ========================================== */

.stock-price-card .buy-sell-chart[b-tjzkj98fpp] {
    width: 40px;
    height: 30px;
    margin: 4px auto;
}

.stock-price-card .buy-sell-axis-y[b-tjzkj98fpp] {
    height: 25px;
}

.stock-price-card .buy-sell-axis-x[b-tjzkj98fpp] {
    width: 36px;
}

.stock-price-card .buy-sell-node[b-tjzkj98fpp] {
    width: 5px;
    height: 5px;
}

.stock-price-card .buy .node-1[b-tjzkj98fpp] {
    left: 5px;
    top: 3px;
}

.stock-price-card .buy .node-2[b-tjzkj98fpp] {
    left: 18px;
    top: 11px;
}

.stock-price-card .buy .node-3[b-tjzkj98fpp] {
    left: 31px;
    top: 21px;
}

.stock-price-card .buy .line-down-1[b-tjzkj98fpp] {
    left: 7px;
    top: 7px;
    width: 15px;
    height: 2px;
    transform: rotate(30deg);
}

.stock-price-card .buy .line-down-2[b-tjzkj98fpp] {
    left: 20px;
    top: 15px;
    width: 15px;
    height: 2px;
    transform: rotate(35deg);
}


.stock-price-card .sell .node-4[b-tjzkj98fpp] {
    left: 5px;
    top: 21px;
}

.stock-price-card .sell .node-5[b-tjzkj98fpp] {
    left: 18px;
    top: 13px;
}

.stock-price-card .sell .node-6[b-tjzkj98fpp] {
    left: 31px;
    top: 3px;
}

.stock-price-card .sell .line-up-1[b-tjzkj98fpp] {
    left: 7px;
    top: 17px;
    width: 15px;
    height: 2px;
    transform: rotate(-30deg);
}

.stock-price-card .sell .line-up-2[b-tjzkj98fpp] {
    left: 20px;
    top: 9px;
    width: 15px;
    height: 2px;
    transform: rotate(-35deg);
}

/* =========================================================
BUY / SELL POINTERS
========================================================= */

.buy-sell-pointer[b-tjzkj98fpp] {
    position: absolute;
    left: 50%;
    top: -55px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 30;
    pointer-events: none;
}

.buy-sell-pointer-label[b-tjzkj98fpp] {
    min-width: 28px;
    padding: 3px 8px;
    background: #40407a;
    color: white;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
}

.buy-sell-pointer-arrow[b-tjzkj98fpp] {
    color: #40407a;
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 18px;
    height: 18px;
    margin-top: 2px;
}
/* /Components/Pages/QuestVisuals/Chain.razor.rz.scp.css */
/* Container layout */
.chain-container[b-93sl2yoka1] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 60px auto 30px auto;
    padding: 20px;
    overflow-x: visible; /* Prevents pointers from clipping at the top */
    transform: translateY(-38px); /* moves the entire visual as one unit upwards */
}

/* Wrapper for node + its floating pointers */
.node-wrapper[b-93sl2yoka1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Floating pointer container centered precisely above the node */
.pointer-container[b-93sl2yoka1] {
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    align-items: flex-end;
    justify-content: center;
    white-space: nowrap;
    z-index: 10;
}

.custom-pointer[b-93sl2yoka1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInScale-b-93sl2yoka1 0.2s ease-in-out;
}

.pointer-label[b-93sl2yoka1] {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 3px;
    margin-top: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* --- CRISP PURE CSS LIGHTNING ⚡ --- */
.css-lightning[b-93sl2yoka1] {
    width: 12px;
    height: 18px;
    background-color: #ecc94b;
    clip-path: polygon(50% 0%, 0% 55%, 45% 55%, 15% 100%, 100% 45%, 55% 45%);
    border: 1px solid #b7791f;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.lightning-marker .pointer-label[b-93sl2yoka1] {
    background-color: #d69e2e;
    color: #fff;
}

/* --- NODES & SELECTION GLOW --- */
.chain-node[b-93sl2yoka1] {
    min-width: 68px;
    height: 52px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #1e293b 0%, #475569 25%, #f1f5f9 50%, #64748b 75%, #0f172a 100%);
    border: 2px solid #0f172a;
    box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.7), inset 0 -3px 6px rgba(0, 0, 0, 0.8), 0 6px 12px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    padding: 0 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .chain-node.interactive[b-93sl2yoka1] {
        cursor: pointer;
    }

    /* Selected chain stays silver with a soft purple aura */
    .chain-node.selected[b-93sl2yoka1] {
        background: linear-gradient( 180deg, #334155 0%, #94a3b8 22%, #ffffff 48%, #cbd5e1 70%, #475569 100% ) !important;
        border-color: #a855f7;
        animation: purpleAura-b-93sl2yoka1 1.6s ease-in-out infinite;
    }

/* --- STRONG PURPLE MAGIC AURA ✨💜 --- */
@keyframes purpleAura-b-93sl2yoka1 {
    0%, 100% {
        box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.95), inset 0 -3px 6px rgba(0, 0, 0, 0.45), 0 0 8px rgba(168, 85, 247, 0.75), 0 0 18px rgba(168, 85, 247, 0.9), 0 0 32px rgba(139, 92, 246, 0.75), 0 0 48px rgba(124, 58, 237, 0.5);
    }

    50% {
        box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.95), inset 0 -3px 6px rgba(0, 0, 0, 0.45), 0 0 12px rgba(192, 132, 252, 1), 0 0 28px rgba(168, 85, 247, 1), 0 0 50px rgba(139, 92, 246, 0.95), 0 0 75px rgba(124, 58, 237, 0.75);
    }
}

.chain-node-value[b-93sl2yoka1] {
    font-size: 1.25rem;
    font-weight: 900;
    color: #0f172a;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.chain-link[b-93sl2yoka1] {
    width: 44px;
    height: 32px;
    background: linear-gradient(180deg, #334155 0%, #94a3b8 20%, #f8fafc 50%, #64748b 80%, #1e293b 100%);
    border: 2px solid #0f172a;
    border-radius: 16px;
    position: relative;
    margin: 0 -14px;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.7);
}

.chain-ring[b-93sl2yoka1] {
    width: 22px;
    height: 14px;
    background-color: #0b0f19;
    border-radius: 7px;
    border: 1px solid #475569;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

@keyframes fadeInScale-b-93sl2yoka1 {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

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

/* --- CRISP PURE CSS SNAIL 🐌 --- */
.css-snail[b-93sl2yoka1] {
    width: 44px;
    height: 32px;
    position: relative;
}

/* Long creeping foot */
.snail-body[b-93sl2yoka1] {
    position: absolute;
    left: 16px;
    bottom: 2px;
    width: 27px;
    height: 7px;
    background: #9b6a3a;
    border: 1px solid #5d3a1f;
    border-radius: 3px 12px 5px 3px;
    box-shadow: inset 0 2px 2px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.25);
    z-index: 1;
}

/* Large shell sitting directly on the body */
.css-snail .shell[b-93sl2yoka1] {
    position: absolute;
    left: 6px;
    bottom: 5px;
    width: 23px;
    height: 23px;
    background: radial-gradient( circle at 35% 30%, #f6ad55, #c87525 55%, #8b4513 );
    border: 1px solid #633f0c;
    border-radius: 50%;
    z-index: 3;
    box-shadow: inset 2px 2px 3px rgba(255,255,255,0.4), 0 2px 3px rgba(0,0,0,0.3);
}

    /* Shell spiral */
    .css-snail .shell[b-93sl2yoka1]::before {
        content: "";
        position: absolute;
        width: 13px;
        height: 13px;
        left: 4px;
        top: 4px;
        border: 2px solid #8b4513;
        border-radius: 50%;
    }

    /* Inner spiral */
    .css-snail .shell[b-93sl2yoka1]::after {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        left: 8px;
        top: 8px;
        border: 1px solid #8b4513;
        border-radius: 50%;
    }

/* Small head extending clearly beyond shell */
.snail-head[b-93sl2yoka1] {
    position: absolute;
    right: 0;
    bottom: 4px;
    width: 10px;
    height: 9px;
    background: #9b6a3a;
    border: 1px solid #5d3a1f;
    border-radius: 60% 65% 45% 45%;
    z-index: 5;
}

/* Eye stalks */
.snail-eye-stalk[b-93sl2yoka1] {
    position: absolute;
    bottom: 6px;
    width: 1.5px;
    height: 10px;
    background: #5d3a1f;
    border-radius: 2px;
    transform-origin: bottom center;
}

    /* Left stalk */
    .snail-eye-stalk.left[b-93sl2yoka1] {
        left: 1px;
        transform: rotate(-13deg);
    }

    /* Right stalk */
    .snail-eye-stalk.right[b-93sl2yoka1] {
        right: 1px;
        transform: rotate(13deg);
    }

/* Black eyes */
.snail-eye[b-93sl2yoka1] {
    position: absolute;
    width: 4px;
    height: 4px;
    left: -1px;
    top: -3px;
    background: #17120d;
    border-radius: 50%;
    box-shadow: 0 0 1px rgba(255,255,255,0.5);
}

/* Snail label */
.snail-marker .pointer-label[b-93sl2yoka1] {
    background-color: #6b4426;
    color: #fff;
}
/* Added for Linked List Cycle */
/* --- CYCLIC LINK (curved return connection) --- */
.cycle-connector[b-93sl2yoka1] {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 90px;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

    .cycle-connector svg[b-93sl2yoka1] {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

.cycle-path[b-93sl2yoka1] {
    fill: none;
    stroke: #a855f7;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 8 6;
    animation: cycleFlow-b-93sl2yoka1 1.2s linear infinite, cycleGlow-b-93sl2yoka1 1.6s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.8));
}

.cycle-arrowhead[b-93sl2yoka1] {
    fill: #a855f7;
    filter: drop-shadow(0 0 3px rgba(168, 85, 247, 0.9));
}

.cycle-label[b-93sl2yoka1] {
    font-size: 0.6rem;
    font-weight: 800;
    fill: #fff;
}

.cycle-label-bg[b-93sl2yoka1] {
    fill: #7c3aed;
    rx: 4;
}

@keyframes cycleFlow-b-93sl2yoka1 {
    to {
        stroke-dashoffset: -28;
    }
}

@keyframes cycleGlow-b-93sl2yoka1 {
    0%, 100% {
        stroke: #a855f7;
    }

    50% {
        stroke: #c084fc;
    }
}
/* --- CYCLIC TRIANGLE LINKS (down to -4 and back up) --- */
/* =========================================================
   LINKED LIST MAIN ROW
   ========================================================= */

.chain-container[b-93sl2yoka1] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: 60px auto 30px;
    padding: 20px;
    box-sizing: border-box;
    overflow: visible;
}

.chain-main[b-93sl2yoka1] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    position: relative;
    z-index: 3;
}


/* =========================================================
   CYCLE LAYER
   Completely removed from the flex row.
   ========================================================= */

.cycle-layer[b-93sl2yoka1] {
    position: absolute;
    top: 55px;
    left: calc(50% + 60px); /* Shifted to the right to align under 0 */
    width: 260px;
    height: 100px;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
}


/* =========================================================
   CYCLE NODE
   ========================================================= */

.cycle-node-wrapper[b-93sl2yoka1] {
    position: absolute;
    left: 50%;
    bottom: 0; /* Pin it to the bottom of the layer */
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: auto;
}

    .cycle-node-wrapper .chain-node[b-93sl2yoka1] {
        min-width: 68px;
        height: 52px;
        padding: 0 12px;
        border-radius: 26px;
    }


/* =========================================================
   LEFT DIAGONAL LINK
   ========================================================= */

.cycle-left-link[b-93sl2yoka1] {
    position: absolute;
    left: 65px; /* Adjust horizontal start under node 2 */
    top: 10px; /* Adjust vertical start touching node 2 */
    width: 24px;
    height: 52px; /* Slightly shorter to bridge tightly */
    background: linear-gradient( 180deg, #334155 0%, #94a3b8 20%, #f8fafc 50%, #64748b 80%, #1e293b 100% );
    border: 2px solid #0f172a;
    border-radius: 12px;
    transform: rotate(-38px); /* Adjust angle to point right at the node */
    transform-origin: top center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.7);
}

    .cycle-left-link .chain-ring[b-93sl2yoka1] {
        width: 14px;
        height: 22px;
        border-radius: 7px;
    }


/* =========================================================
   RIGHT DIAGONAL LINK
   ========================================================= */

.cycle-right-link[b-93sl2yoka1] {
    position: absolute;
    right: 65px; /* Adjust horizontal start under node 0 */
    top: 10px; /* Adjust vertical start touching node 0 */
    width: 24px;
    height: 52px;
    background: linear-gradient( 180deg, #334155 0%, #94a3b8 20%, #f8fafc 50%, #64748b 80%, #1e293b 100% );
    border: 2px solid #0f172a;
    border-radius: 12px;
    transform: rotate(38px); /* Adjust angle symmetrically */
    transform-origin: top center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.7);
}

    .cycle-right-link .chain-ring[b-93sl2yoka1] {
        width: 14px;
        height: 22px;
        border-radius: 7px;
    }

/* Placing the slow fast pointers for a cyclic node */
.cycle-node-wrapper .pointer-container[b-93sl2yoka1] {
    top: -30px;
}
/* /Components/Pages/QuestVisuals/ContainerWithWater.razor.rz.scp.css */
.container-water-list[b-qjv4uxjcge] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 24px;
    padding: 35px 20px 20px;
}

.container-water-item[b-qjv4uxjcge] {
    position: relative;
    width: 90px;
    height: 110px;
    background: linear-gradient( 180deg, #a8754d 0%, #805333 45%, #633d26 100% );
    border: 3px solid #4a2d1b;
    border-radius: 8px 8px 14px 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    cursor: pointer;
    box-shadow: inset 0 4px 8px rgba(255, 220, 180, .18), inset 0 -8px 12px rgba(0, 0, 0, .2), 0 5px 14px rgba(0, 0, 0, .25);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

    /* Slight glass highlight */
    .container-water-item[b-qjv4uxjcge]::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 7px;
        width: 4px;
        height: 75%;
        border-radius: 4px;
        background: rgba(255, 255, 255, .35);
        opacity: .7;
        z-index: 4;
    }

    .container-water-item[b-qjv4uxjcge]::after {
        content: "";
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 86px;
        height: 22px;
        background: radial-gradient( ellipse at center, #241208 0%, #32190d 48%, #4f2b17 52%, #754528 72%, #9a6a45 100% );
        border: 3px solid #4a2d1b;
        border-radius: 50%;
        box-sizing: border-box;
        z-index: 7;
        box-shadow: inset 0 3px 5px rgba(255, 190, 130, .18), inset 0 -4px 6px rgba(0, 0, 0, .55), 0 3px 5px rgba(0, 0, 0, .3);
    }

    /* Hover */
    .container-water-item:hover[b-qjv4uxjcge] {
        transform: translateY(-4px);
        border-color: rgba(70, 110, 150, .85);
        box-shadow: inset 0 0 14px rgba(80, 120, 160, .22), inset 0 0 3px rgba(255, 255, 255, .9), 0 8px 18px rgba(0, 0, 0, .22);
    }

/* Selected container */

.container-water-item-selected[b-qjv4uxjcge] {
    transform: translateY(-8px);
    background: rgba(35, 90, 150, .13);
    border-color: #00cfff;
    box-shadow: 0 0 8px rgba(0, 210, 255, .7), 0 0 24px rgba(0, 170, 255, .5), inset 0 0 16px rgba(0, 180, 255, .14), inset 0 0 3px rgba(255, 255, 255, .9);
}
/* Water */

.container-water-item-fill[b-qjv4uxjcge] {
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 3px;
    top: 50%;
    background: linear-gradient( 180deg, #315fe0 0%, #2145ad 55%, #183687 100% );
    border-radius: 0 0 10px 10px;
    opacity: .94;
    box-shadow: inset 0 3px 6px rgba(255, 255, 255, .18), inset 0 -5px 10px rgba(0, 0, 0, .18), 0 -2px 7px rgba(40, 90, 220, .35);
    z-index: 1;
}

/* Height value */

.container-water-item-label[b-qjv4uxjcge] {
    position: relative;
    z-index: 5;
    color: #fff;
    font-size: 27px;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .95), 0 0 4px rgba(0, 0, 0, .5);
}

/* Array index */

.container-water-item-cap[b-qjv4uxjcge] {
    position: absolute;
    top: -25px;
    z-index: 5;
    color: #9b7b61;
    font-size: 13px;
    font-weight: bold;
}

/* Bubbles */

.container-water-bubble[b-qjv4uxjcge] {
    position: absolute;
    z-index: 6;
    width: 7px;
    height: 7px;
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
    background: rgba(164, 221, 255, .2);
    opacity: 0;
    box-shadow: 0 0 4px rgba(130, 220, 255, .6);
    animation: containerBubbleRise-b-qjv4uxjcge 1.4s ease-out infinite;
}

.container-water-bubble-1[b-qjv4uxjcge] {
    left: 25px;
    bottom: 35px;
}

.container-water-bubble-2[b-qjv4uxjcge] {
    left: 45px;
    bottom: 30px;
    width: 5px;
    height: 5px;
    animation-delay: .35s;
}

.container-water-bubble-3[b-qjv4uxjcge] {
    left: 60px;
    bottom: 40px;
    width: 4px;
    height: 4px;
    animation-delay: .7s;
}

@keyframes containerBubbleRise-b-qjv4uxjcge {

    0% {
        opacity: 0;
        transform: translateY(15px) scale(.6);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-45px) scale(1);
    }
}

/* Empty state */

.container-water-empty[b-qjv4uxjcge] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    padding: 20px;
    color: #a1836f;
    font-weight: bold;
}

/* Squished variant */

.container-water-squished .container-water-list[b-qjv4uxjcge] {
    gap: 10px;
    padding: 20px 10px 10px;
}

.container-water-squished .container-water-item[b-qjv4uxjcge] {
    width: 65px;
    height: 75px;
    border-width: 2px;
    border-radius: 6px 6px 10px 10px;
}

    .container-water-squished .container-water-item[b-qjv4uxjcge]::after {
        top: -8px;
        width: 63px;
        height: 18px;
        border-width: 2px;
    }

.container-water-squished .container-water-item-label[b-qjv4uxjcge] {
    font-size: 27px;
    color: #ffe0b2;
}

.container-water-squished .container-water-item-cap[b-qjv4uxjcge] {
    top: -19px;
    font-size: 11px;
}

.container-water-squished .container-water-item-fill[b-qjv4uxjcge] {
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 0 0 7px 7px;
}

.container-water-squished .container-water-bubble[b-qjv4uxjcge] {
    transform: scale(.75);
}
/* /Components/Pages/QuestVisuals/Contains.razor.rz.scp.css */
.contains-visual[b-yfocrrvc62] {
    display: flex;
    align-items: center; /* Centers everything vertically as a whole */
    justify-content: center;
    gap: 34px;
    margin: 20px auto;
    min-height: 150px;
}

/* Each column stacks its label on top and shape below, aligned to the top together */
.contains-column[b-yfocrrvc62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start; /* Forces both columns to align their tops together */
}

.contains-label[b-yfocrrvc62] {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    color: #183b8c;
    white-space: nowrap;
    margin-bottom: 8px; /* Space between the label and the tile/diamond */
}

.contains-source-tile[b-yfocrrvc62] {
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #4a90e2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

    .contains-source-tile span[b-yfocrrvc62] {
        font-size: 42px;
        font-family: Georgia, serif;
        color: white;
    }

.contains-arrow[b-yfocrrvc62] {
    font-size: 26px;
    line-height: 1;
    /* Offset downwards slightly so it aligns with the middle of the tiles rather than the labels */
    margin-top: 26px;
}

.contains-diamond[b-yfocrrvc62] {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e98282;
    transform: rotate(45deg);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    margin-top: 12px; /* Extra offset to account for rotated diamond geometry */
}

    .contains-diamond span[b-yfocrrvc62] {
        font-size: 34px;
        color: white;
        transform: rotate(-45deg);
    }

    .contains-diamond.found[b-yfocrrvc62] {
        background: #63b87a;
    }

    .contains-diamond.missing[b-yfocrrvc62] {
        background: #e98282;
    }
    .contains-diamond.checking[b-yfocrrvc62] {
        background: #e89a70;
    }
/* /Components/Pages/QuestVisuals/CutePlanter.razor.rz.scp.css */
/* Outer wrapper matches exact 320x280 box */
.pot-wrapper[b-4v1uf0dnqi] {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

/* Stage internally pads top & bottom so rim & feet are fully enclosed */
.pot-stage[b-4v1uf0dnqi] {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 25px;
    transform-origin: top left;
    box-sizing: border-box;
}

/* ======================================================== */
/* POT BODY & RIM                                           */
/* ======================================================== */
.floor-shadow[b-4v1uf0dnqi] {
    position: absolute;
    bottom: -5px;
    width: 270px;
    height: 35px;
    background: radial-gradient(ellipse at center, rgba(60, 35, 15, 0.45) 0%, rgba(60, 35, 15, 0.15) 50%, transparent 75%);
    border-radius: 50%;
    z-index: 1;
}

.pot-body[b-4v1uf0dnqi] {
    position: relative;
    width: 260px;
    height: 240px;
    background: radial-gradient(circle at 35% 25%, #ffffff 0%, #f2f2f7 45%, #d5d5e2 80%, #b0b0c2 100%);
    border-radius: 48% 48% 44% 44% / 42% 42% 48% 48%;
    box-shadow: inset -12px -12px 25px rgba(140, 140, 165, 0.35), inset 10px 10px 20px rgba(255, 255, 255, 0.9), 0 20px 30px rgba(45, 25, 10, 0.2);
    z-index: 2;
}

.pot-opening[b-4v1uf0dnqi] {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 44px;
    background: #1c120c;
    border-radius: 50%;
    border: 5px solid #f4f4f8;
    box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.85), 0 2px 5px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 3;
}

.soil[b-4v1uf0dnqi] {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #422d1f 20%, #20140c 80%);
    border-radius: 50%;
}

/* Face Features */
.face[b-4v1uf0dnqi] {
    position: absolute;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
}

.eye[b-4v1uf0dnqi] {
    width: 26px;
    height: 13px;
    border-top: 4px solid #757585;
    border-radius: 50% 50% 0 0;
    filter: drop-shadow(0 1px 0px #ffffff);
}

.smile[b-4v1uf0dnqi] {
    width: 22px;
    height: 11px;
    border-bottom: 4px solid #757585;
    border-radius: 0 0 50% 50%;
    margin-top: 8px;
    filter: drop-shadow(0 -1px 0px #ffffff);
}

/* 3D Red Heart */
.heart-wrapper[b-4v1uf0dnqi] {
    position: absolute;
    top: 82px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 120px;
    z-index: 6;
}

.heart[b-4v1uf0dnqi] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 15px auto 0;
    background: radial-gradient(circle at 35% 35%, #ff6b81 0%, #ee5253 55%, #c82333 100%);
    transform: rotate(-45deg);
    border-radius: 8px;
    box-shadow: -8px 8px 18px rgba(200, 35, 51, 0.35), inset 3px -3px 8px rgba(0, 0, 0, 0.2), inset -3px 3px 8px rgba(255, 255, 255, 0.4);
}

    .heart[b-4v1uf0dnqi]::before,
    .heart[b-4v1uf0dnqi]::after {
        content: "";
        position: absolute;
        width: 80px;
        height: 80px;
        background: radial-gradient(circle at 35% 35%, #ff6b81 0%, #ee5253 55%, #c82333 100%);
        border-radius: 50%;
    }

    .heart[b-4v1uf0dnqi]::before {
        top: -40px;
        left: 0;
    }

    .heart[b-4v1uf0dnqi]::after {
        top: 0;
        left: 40px;
    }

.heart-text[b-4v1uf0dnqi] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(45deg) translate(-3px, -3px);
    font-size: 38px;
    font-weight: 900;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(120, 0, 0, 0.5);
    user-select: none;
    z-index: 10;
}

/* Arms */
.arm[b-4v1uf0dnqi] {
    position: absolute;
    top: 105px;
    width: 75px;
    height: 52px;
    background: radial-gradient(circle at 40% 30%, #ffffff 0%, #ebebf2 60%, #c4c4d5 100%);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.15), inset -2px -2px 6px rgba(0, 0, 0, 0.08);
    z-index: 7;
}

    .arm.left[b-4v1uf0dnqi] {
        left: 20px;
        border-radius: 30px 12px 12px 30px;
        transform: rotate(18deg);
    }

    .arm.right[b-4v1uf0dnqi] {
        right: 20px;
        border-radius: 12px 30px 30px 12px;
        transform: rotate(-18deg);
    }

.hand[b-4v1uf0dnqi] {
    position: absolute;
    top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.arm.left .hand[b-4v1uf0dnqi] {
    right: -3px;
}

.arm.right .hand[b-4v1uf0dnqi] {
    left: -3px;
}

.finger[b-4v1uf0dnqi] {
    width: 14px;
    height: 8px;
    background: linear-gradient(to bottom, #ffffff, #e3e3ed);
    border-radius: 10px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
}

/* Feet */
.feet-container[b-4v1uf0dnqi] {
    position: absolute;
    bottom: 22px;
    width: 230px;
    display: flex;
    justify-content: space-between;
    z-index: 8;
}

.foot[b-4v1uf0dnqi] {
    width: 82px;
    height: 52px;
    background: radial-gradient(circle at 45% 25%, #ffffff 0%, #ececf3 50%, #c2c2d4 100%);
    border-radius: 40px 40px 22px 22px / 35px 35px 20px 20px;
    box-shadow: 0 12px 16px rgba(45, 25, 10, 0.22), inset 0 3px 6px rgba(255, 255, 255, 0.95), inset 0 -4px 8px rgba(0, 0, 0, 0.1);
}

    .foot.left[b-4v1uf0dnqi] {
        transform: rotate(-6deg);
    }

    .foot.right[b-4v1uf0dnqi] {
        transform: rotate(6deg);
    }
/* /Components/Pages/QuestVisuals/Diamond.razor.rz.scp.css */
/* The Gemstone Body */
.gem-stone[b-eew1ua5jch] {
    position: relative;
    width: calc(100px * var(--gem-scale));
    height: calc(90px * var(--gem-scale));
    background-image: url('images/diamond.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Centered Number styling */
.gem-number[b-eew1ua5jch] {
    position: absolute;
    color: #ffffff;
    font-family: monospace;
    font-size: calc(32px * var(--gem-scale));
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-shadow: -1px -1px 0 #002244, 1px -1px 0 #002244, -1px 1px 0 #002244, 1px 1px 0 #002244, 0 2px 4px rgba(0, 0, 0, 0.9);
    z-index: 2;
}

/* Active & Glow States */
.gem-stone.active[b-eew1ua5jch] {
    transform: translateY(-10px) scale(1.15);
    animation: gemGlow-b-eew1ua5jch 1s infinite alternate;
}

.gem-stone.duplicate-match[b-eew1ua5jch] {
    transform: scale(1.25);
    animation: duplicateGemGlow-b-eew1ua5jch 0.5s infinite alternate;
}

@keyframes gemGlow-b-eew1ua5jch {
    from {
        filter: drop-shadow(0 0 6px #00d2ff) drop-shadow(0 0 12px #0077ff);
    }

    to {
        filter: drop-shadow(0 0 14px #00ffff) drop-shadow(0 0 28px #0044ff);
    }
}

@keyframes duplicateGemGlow-b-eew1ua5jch {
    from {
        filter: drop-shadow(0 0 8px #00ffff) drop-shadow(0 0 16px #0055ff);
    }

    to {
        filter: drop-shadow(0 0 18px #ffffff) drop-shadow(0 0 35px #0022bb);
    }
}

/* Ensures index label stays strictly at the bottom every time */
.index-label[b-eew1ua5jch] {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
/* Classes for Pointers - Starts */
.diamond-pointer-1[b-eew1ua5jch],
.diamond-pointer-2[b-eew1ua5jch],
.diamond-pointer-3[b-eew1ua5jch] {
    position: absolute;
    top: -52px; /* Balanced height: sits cleanly above the gem without merging */
    left: 50%;
    transform: translateX(-50%);
    font-weight: 800;
    z-index: 10;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Colors for each pointer */
.diamond-pointer-1[b-eew1ua5jch] {
    color: #16a34a;
}

.diamond-pointer-2[b-eew1ua5jch] {
    color: #2563eb;
}

.diamond-pointer-3[b-eew1ua5jch] {
    color: #9333ea;
}

/* Huge, clean label badges */
.diamond-pointer-label-1[b-eew1ua5jch],
.diamond-pointer-label-2[b-eew1ua5jch],
.diamond-pointer-label-3[b-eew1ua5jch] {
    text-align: center;
    font-size: 1.05rem; /* Makes the text much larger and bolder */
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    line-height: 1.2;
}

.diamond-pointer-arrow-1[b-eew1ua5jch],
.diamond-pointer-arrow-2[b-eew1ua5jch],
.diamond-pointer-arrow-3[b-eew1ua5jch] {
    text-align: center;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 900;
}
/* Classes for Pointers - Ends */
/* /Components/Pages/QuestVisuals/Dictionary.razor.rz.scp.css */
/* CSS for Dictionary component */
/* Dictionary container */

.dictionary-blueprint[b-omzq5u9q84] {
    width: 100%;
    max-width: 100%;
    margin-top: 15px;
    background: linear-gradient(180deg, #3d2b1f 0%, #2b1e15 100%);
    border: 4px solid #1a120c;
    border-radius: 16px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    box-shadow: inset 0 10px 30px rgba(0, 0, 0, .5), 0 10px 20px rgba(0, 0, 0, .15);
}

.dictionary-blueprint-header[b-omzq5u9q84] {
    display: flex;
    align-items: center;
    padding: 5px 20px 10px;
    border-bottom: 2px solid rgba(255, 255, 255, .1);
}

.dictionary-blueprint-header-key[b-omzq5u9q84] {
    width: 35%;
    flex-shrink: 0;
    font-size: 13px;
    color: #ffcc00;
    font-weight: 800;
}

.dictionary-blueprint-header-divider[b-omzq5u9q84] {
    width: 4px;
    margin: 0 25px;
    flex-shrink: 0;
}

.dictionary-blueprint-header-values[b-omzq5u9q84] {
    flex: 1;
    color: #a4bdfd;
    font-size: 13px;
    font-weight: 700;
}

.dictionary-blueprint-row[b-omzq5u9q84] {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, .04);
    border-bottom: 6px solid #4a3525;
    padding: 8px 16px;
}

.dictionary-blueprint-row-active[b-omzq5u9q84] {
    background: rgba(45, 91, 227, .12);
    border-bottom-color: #2d5be3;
}

.dictionary-blueprint-key[b-omzq5u9q84] {
    width: 35%;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 0;
}

.dictionary-blueprint-key-info[b-omzq5u9q84] {
    flex: 1;
    min-width: 0;
}

.dictionary-blueprint-key-value[b-omzq5u9q84] {
    color: #fff;
    font: 12px Consolas, monospace;
    word-break: break-all;
}

.dictionary-blueprint-divider[b-omzq5u9q84] {
    width: 4px;
    margin: 0 25px;
    border-radius: 2px;
    background: linear-gradient(180deg, #4a3525, #2b1e15);
}

.dictionary-blueprint-row-active .dictionary-blueprint-divider[b-omzq5u9q84] {
    background: linear-gradient(180deg, #2d5be3, #00d2ff);
    box-shadow: 0 0 10px rgba(45, 91, 227, .6);
}

.dictionary-blueprint-values[b-omzq5u9q84] {
    flex: 1;
    display: flex;
    align-items: center;
}

.dictionary-blueprint-value-list[b-omzq5u9q84] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.dictionary-blueprint-item[b-omzq5u9q84] {
    position: relative;
    width: 90px;
    height: 62px;
    border-radius: 10px 10px 16px 16px;
    border: 2px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .12);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .3), inset 0 2px 4px rgba(255, 255, 255, .15);
}

.dictionary-blueprint-empty[b-omzq5u9q84] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    padding: 20px;
    text-align: center;
    color: #a1836f;
    font-weight: bold;
    gap: 8px;
}

.dictionary-blueprint-item-fill[b-omzq5u9q84] {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    top: 35%;
    background: linear-gradient(180deg, #2d5be3, #1a3a9c);
    border-radius: 0 0 12px 12px;
    opacity: .85;
}

.dictionary-blueprint-item-cap[b-omzq5u9q84] {
    position: absolute;
    top: -12px;
    font-size: 14px;
    z-index: 2;
}

.dictionary-blueprint-item-label[b-omzq5u9q84] {
    position: absolute;
    z-index: 3;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .95);
}

.dictionary-blueprint-row-active .dictionary-blueprint-item:last-child[b-omzq5u9q84] {
    animation: bottleDropImpact-b-omzq5u9q84 .45s cubic-bezier(.175, .885, .32, 1.25) forwards;
}

    .dictionary-blueprint-row-active .dictionary-blueprint-item:last-child .dictionary-blueprint-item-fill[b-omzq5u9q84] {
        animation: elixirPourFilling-b-omzq5u9q84 1.2s cubic-bezier(.4, 0, .2, 1) forwards;
    }

        .dictionary-blueprint-row-active .dictionary-blueprint-item:last-child .dictionary-blueprint-item-fill[b-omzq5u9q84]::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle at 25% 75%, rgba(255, 255, 255, .45) 1.5px, transparent 2px), radial-gradient(circle at 60% 40%, rgba(255, 255, 255, .55) 2.5px, transparent 3px), radial-gradient(circle at 75% 65%, rgba(255, 255, 255, .35) 1.5px, transparent 2px);
            animation: particleBubblesUp-b-omzq5u9q84 .8s linear infinite;
        }

@keyframes bottleDropImpact-b-omzq5u9q84 {
    0% {
        transform: scale(.4) translateY(-25px);
        filter: brightness(2);
    }

    75% {
        transform: scale(1.08) translateY(2px);
    }

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

@keyframes elixirPourFilling-b-omzq5u9q84 {
    0% {
        top: 100%;
        opacity: .3;
    }

    30% {
        opacity: 1;
    }

    100% {
        top: 35%;
    }
}

@keyframes particleBubblesUp-b-omzq5u9q84 {
    0% {
        background-position: 0 24px;
    }

    100% {
        background-position: 0 -24px;
    }
}


/* Squished Dictionary
   Used when vertical space is tight. */

.dictionary-squished .dictionary-blueprint[b-omzq5u9q84] {
    margin-top: 6px;
    padding: 6px 10px;
    gap: 4px;
}

.dictionary-squished .dictionary-blueprint-header[b-omzq5u9q84] {
    padding: 2px 16px 6px;
}

.dictionary-squished .dictionary-blueprint-row[b-omzq5u9q84] {
    padding: 3px 12px;
    border-bottom-width: 3px;
}

.dictionary-squished .dictionary-blueprint-key[b-omzq5u9q84] {
    padding: 4px 8px;
}

.dictionary-squished .dictionary-blueprint-item[b-omzq5u9q84] {
    width: 65px;
    height: 38px;
    border-radius: 6px 6px 10px 10px;
}

.dictionary-squished .dictionary-blueprint-item-label[b-omzq5u9q84] {
    font-size: 14px;
}

.dictionary-squished .dictionary-blueprint-item-fill[b-omzq5u9q84] {
    top: 20%;
}

.dictionary-squished .dictionary-blueprint-value-list[b-omzq5u9q84] {
    gap: 8px;
}

.dictionary-squished .dictionary-blueprint-empty[b-omzq5u9q84] {
    min-height: 40px;
    padding: 8px;
}
/* /Components/Pages/QuestVisuals/FastAndSlowPointer.razor.rz.scp.css */
/* CSS for FastAndSlowPointer component */
/* =========================================================
   OWLION QUEST — CHEATSHEET SNAIL + LIGHTNING
   Slow pointer 🐌 + Fast pointer ⚡
   Reusable pointer visuals
   ========================================================= */


/* =========================================================
   POINTER CONTAINER
   ========================================================= */

.pointer-container[b-57jk9uq4fi] {
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    align-items: flex-end;
    justify-content: center;
    white-space: nowrap;
    z-index: 10;
}


/* =========================================================
   POINTER BASE
   ========================================================= */

.custom-pointer[b-57jk9uq4fi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInScale-b-57jk9uq4fi 0.2s ease-in-out;
}

.pointer-label[b-57jk9uq4fi] {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 3px;
    margin-top: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}


/* =========================================================
   FAST POINTER — LIGHTNING ⚡
   ========================================================= */

.css-lightning[b-57jk9uq4fi] {
    width: 12px;
    height: 18px;
    background-color: #ecc94b;
    clip-path: polygon( 50% 0%, 0% 55%, 45% 55%, 15% 100%, 100% 45%, 55% 45% );
    border: 1px solid #b7791f;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.lightning-marker .pointer-label[b-57jk9uq4fi] {
    background-color: #d69e2e;
    color: #fff;
}


/* =========================================================
   SLOW POINTER — SNAIL 🐌
   ========================================================= */

.css-snail[b-57jk9uq4fi] {
    width: 44px;
    height: 32px;
    position: relative;
}


/* Long creeping foot */

.snail-body[b-57jk9uq4fi] {
    position: absolute;
    left: 16px;
    bottom: 2px;
    width: 27px;
    height: 7px;
    background: #9b6a3a;
    border: 1px solid #5d3a1f;
    border-radius: 3px 12px 5px 3px;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);
    z-index: 1;
}


/* Large shell */

.css-snail .shell[b-57jk9uq4fi] {
    position: absolute;
    left: 6px;
    bottom: 5px;
    width: 23px;
    height: 23px;
    background: radial-gradient( circle at 35% 30%, #f6ad55, #c87525 55%, #8b4513 );
    border: 1px solid #633f0c;
    border-radius: 50%;
    z-index: 3;
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.4), 0 2px 3px rgba(0, 0, 0, 0.3);
}


    /* Shell spiral */

    .css-snail .shell[b-57jk9uq4fi]::before {
        content: "";
        position: absolute;
        width: 13px;
        height: 13px;
        left: 4px;
        top: 4px;
        border: 2px solid #8b4513;
        border-radius: 50%;
    }


    /* Inner spiral */

    .css-snail .shell[b-57jk9uq4fi]::after {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        left: 8px;
        top: 8px;
        border: 1px solid #8b4513;
        border-radius: 50%;
    }


/* Head */

.snail-head[b-57jk9uq4fi] {
    position: absolute;
    right: 0;
    bottom: 4px;
    width: 10px;
    height: 9px;
    background: #9b6a3a;
    border: 1px solid #5d3a1f;
    border-radius: 60% 65% 45% 45%;
    z-index: 5;
}


/* Eye stalks */

.snail-eye-stalk[b-57jk9uq4fi] {
    position: absolute;
    bottom: 6px;
    width: 1.5px;
    height: 10px;
    background: #5d3a1f;
    border-radius: 2px;
    transform-origin: bottom center;
}


    /* Left stalk */

    .snail-eye-stalk.left[b-57jk9uq4fi] {
        left: 1px;
        transform: rotate(-13deg);
    }


    /* Right stalk */

    .snail-eye-stalk.right[b-57jk9uq4fi] {
        right: 1px;
        transform: rotate(13deg);
    }


/* Eyes */

.snail-eye[b-57jk9uq4fi] {
    position: absolute;
    width: 4px;
    height: 4px;
    left: -1px;
    top: -3px;
    background: #17120d;
    border-radius: 50%;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}


/* Slow label */

.snail-marker .pointer-label[b-57jk9uq4fi] {
    background-color: #6b4426;
    color: #fff;
}

/* =========================================================
   POINTER APPEARANCE
   ========================================================= */

@keyframes fadeInScale-b-57jk9uq4fi {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* /Components/Pages/QuestVisuals/HashSet.razor.rz.scp.css */
.hashset-blueprint-board[b-lb54y1sgv4] {
    width: 100%;
    padding: 6px 10px;
    margin: 8px 0;
    box-sizing: border-box;
    background-color: #13112e;
    background-image: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.12), transparent 70%), linear-gradient(rgba(129, 140, 248, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(129, 140, 248, 0.06) 1px, transparent 1px);
    background-size: 100% 100%, 16px 16px, 16px 16px;
    border: 1px solid rgba(129, 140, 248, 0.3);
    border-left: 5px solid #6366f1;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    min-height: 0;
    height: fit-content;
}

.hashset-storage[b-lb54y1sgv4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    padding: 10px;
    min-height: 60px;
}

.hashset-item[b-lb54y1sgv4] {
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #4338ca, #1e1b4b);
    border: 3px solid #818cf8;
    color: white;
    font-size: 1.3rem;
    font-weight: 900;
    box-shadow: inset 0 3px 8px rgba(255,255,255,0.25), 0 6px 16px rgba(0,0,0,0.6);
    transition: all 0.3s ease;
}

    .hashset-item.active[b-lb54y1sgv4] {
        border-color: #f59e0b;
        box-shadow: 0 0 20px rgba(245,158,11,0.85), inset 0 3px 8px rgba(255,255,255,0.35);
        transform: translateY(-5px);
    }

    .hashset-item.exists[b-lb54y1sgv4] {
        border-color: #6366f1;
        box-shadow: 0 0 18px rgba(99,102,241,0.8);
    }

    .hashset-item.missing[b-lb54y1sgv4] {
        opacity: 0.35;
        border-color: #ef4444;
        box-shadow: 0 0 15px rgba(239,68,68,0.7);
    }

.hashset-template-item[b-lb54y1sgv4] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hashset-lookup[b-lb54y1sgv4] {
    margin-top: 14px;
    padding: 12px;
    background: rgba(19, 17, 46, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(129, 140, 248, 0.15);
    border-radius: 8px;
}

.hashset-lookup-row[b-lb54y1sgv4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-family: 'Fira Code', Consolas, monospace;
}

.hashset-label[b-lb54y1sgv4] {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
}

.hashset-value[b-lb54y1sgv4] {
    color: #fbbf24;
    font-weight: 800;
}

.hashset-result[b-lb54y1sgv4] {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    font-size: 1.1rem;
    font-weight: 900;
    text-align: center;
    border: 1px solid rgba(129, 140, 248, 0.2);
}

@media(max-width:768px) {
    .hashset-item[b-lb54y1sgv4] {
        width: 55px;
        height: 55px;
    }
}
/* /Components/Pages/QuestVisuals/ItemTile.razor.rz.scp.css */
.item-tile[b-2llqulzhhq] {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(145deg, #2563eb, #1e3a8a);
    border: 2px solid #60a5fa;
    color: white;
    font-size: 1.4rem;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* /Components/Pages/QuestVisuals/Lookup.razor.rz.scp.css */
/* CSS for Lookup component */
.lookup[b-cc2qmaaedz] {
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background: linear-gradient(180deg, #172554 0%, #0f172a 100%);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-left: 4px solid #38bdf8;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.lookup-title[b-cc2qmaaedz] {
    padding: 4px 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #7dd3fc;
    font-size: 1rem;
    font-weight: 800;
}

.lookup-fields[b-cc2qmaaedz] {
    display: flex;
    flex-direction: column;
}

/* Blue */
.lookup-blue[b-cc2qmaaedz] {
    background: linear-gradient(180deg, #172554 0%, #0f172a 100%);
    border-color: rgba(56, 189, 248, 0.35);
    border-left-color: #38bdf8;
}

/* Green */
.lookup-green[b-cc2qmaaedz] {
    background: linear-gradient(180deg, #0b2b24 0%, #071c18 100%);
    border-color: rgba(74, 222, 128, 0.35);
    border-left-color: #22c55e;
}

/* Purple */
.lookup-purple[b-cc2qmaaedz] {
    background: linear-gradient(180deg, #2e1065 0%, #170b35 100%);
    border-color: rgba(192, 132, 252, 0.35);
    border-left-color: #a855f7;
}
/* /Components/Pages/QuestVisuals/LookupField.razor.rz.scp.css */
.lookup-field-row[b-j3679dvqho] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-family: 'Fira Code', Consolas, monospace;
}

.lookup-field-label[b-j3679dvqho] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.lookup-field-value[b-j3679dvqho] {
    color: #f59e0b;
    font-weight: 800;
}
/* /Components/Pages/QuestVisuals/PebbleTile.razor.rz.scp.css */
.pebble-scene[b-2spa31vf7l] {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 70px;
    box-sizing: border-box;
}

/* Individual Pebble Tile Card */
.pebble-tile[b-2spa31vf7l] {
    position: relative;
    width: 100px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin: 0 16px;
    transition: transform 0.25s ease;
}

    .pebble-tile:hover[b-2spa31vf7l] {
        transform: translateY(-4px);
    }

/* Main Box Structure using tiles.png */
.pebble-box[b-2spa31vf7l] {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('images/tiles.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid #4c566a;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Selected State with a striking, highly-visible Lavender/Purple Glow */
.pebble-tile-selected .pebble-box[b-2spa31vf7l] {
    border-color: #b48ead; /* Lavender border */
    filter: brightness(1.15);
    box-shadow: 0 0 15px 4px rgba(180, 142, 173, 0.9), 0 0 30px 8px rgba(180, 142, 173, 0.6), 0 8px 16px rgba(0, 0, 0, 0.35);
}

/* --- DARK CONTRAST DUAL BUST SILHOUETTES BADGE --- */
.pebble-badge-icon[b-2spa31vf7l] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 24px;
    z-index: 5;
    opacity: 0.95;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

    .pebble-badge-icon .person[b-2spa31vf7l] {
        position: absolute;
        background-color: #2e3440;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

        .pebble-badge-icon .person[b-2spa31vf7l]::before {
            content: "";
            position: absolute;
            background-color: #2e3440;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
        }

        .pebble-badge-icon .person[b-2spa31vf7l]::after {
            content: "";
            position: absolute;
            background-color: #2e3440;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 50% 50% 0 0;
        }

    .pebble-badge-icon .person-back[b-2spa31vf7l] {
        top: 3px;
        left: 14px;
        opacity: 0.7;
        z-index: 1;
    }

        .pebble-badge-icon .person-back[b-2spa31vf7l]::before {
            width: 8px;
            height: 8px;
            top: -6px;
            left: 1px;
        }

        .pebble-badge-icon .person-back[b-2spa31vf7l]::after {
            width: 12px;
            height: 9px;
            top: 1px;
            left: 0px;
        }

    .pebble-badge-icon .person-front[b-2spa31vf7l] {
        top: 3px;
        left: 4px;
        z-index: 2;
    }

        .pebble-badge-icon .person-front[b-2spa31vf7l]::before {
            width: 9px;
            height: 9px;
            top: -7px;
            left: 2px;
        }

        .pebble-badge-icon .person-front[b-2spa31vf7l]::after {
            width: 14px;
            height: 10px;
            top: 1px;
            left: 0px;
        }

/* Value Text Label */
.pebble-value-label[b-2spa31vf7l] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    color: #111111;
    font-size: 65px;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* Array Index Label */
.pebble-cap-label[b-2spa31vf7l] {
    position: absolute;
    top: -26px;
    z-index: 3;
    color: #99aab5;
    font-size: 20px;
    font-weight: bold;
    left: 50%;
    transform: translateX(-50%);
}

/* --- POINTER STYLING --- */
.pebble-pointer[b-2spa31vf7l] {
    position: absolute;
    top: -62px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    white-space: nowrap;
    animation: pointerFloat-b-2spa31vf7l 1s ease-in-out infinite alternate;
}

.pebble-pointer-label[b-2spa31vf7l] {
    background-color: #b48ead; /* Matching lavender pointer label */
    color: #2e3440;
    font-size: 18px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.pebble-pointer-arrow[b-2spa31vf7l] {
    font-size: 16px;
    font-weight: 900;
    color: #b48ead; /* Matching lavender arrow */
    line-height: 1;
    margin-top: -1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

@keyframes pointerFloat-b-2spa31vf7l {
    0% {
        transform: translateX(-50%) translateY(0);
    }

    100% {
        transform: translateX(-50%) translateY(-4px);
    }
}

/* --- SQUISHED VARIANT --- */
.pebble-squished .pebble-tile[b-2spa31vf7l] {
    width: 70px;
    height: 100px;
    margin: 0 8px;
}

.pebble-squished .pebble-value-label[b-2spa31vf7l] {
    font-size: 65px;
}

.pebble-squished .pebble-cap-label[b-2spa31vf7l] {
    top: -20px;
    font-size: 14px;
}

.pebble-squished .pebble-pointer[b-2spa31vf7l] {
    top: -50px;
}
/* /Components/Pages/QuestVisuals/QuestMap/LionGamified.razor.rz.scp.css */
.realm-node-icon.icon-lion-image-container[b-oy9yi0oka7] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #2b4c6f 0%, #112233 100%);
}

/* Larger variant for the character speech stage */
.realm-node-icon.icon-lion-image-container.mascot-large-size[b-oy9yi0oka7] {
    width: 140px;
    height: 140px;
    border: 4px solid #e09f3e;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    background: radial-gradient(circle, #2b4c6f 0%, #112233 100%);
}

.realm-lion-img[b-oy9yi0oka7] {
    width: 130%; /* Scales the image larger than the container so the face is big */
    height: 130%;
    object-fit: contain;
    object-position: center 55%; /* Shifts it slightly down if needed so ears/brows stay centered */
}
/* /Components/Pages/QuestVisuals/QuestMap/QuestMap.razor.rz.scp.css */
/* =========================================================
   OWLION REALM — FULLSCREEN IMMERSIVE MODAL & PATHWAY CSS
   ========================================================= */

.owlion-quest-page[b-kfr4234i7z] {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px 90px;
    font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
    color: #26324a;
}

/* Unit Banner Header */
.realm-unit-banner[b-kfr4234i7z] {
    background: radial-gradient(circle at 90% 20%, rgba(255, 211, 92, 0.3), transparent 30%), linear-gradient(135deg, #6d5bdd 0%, #5444bf 100%);
    border-radius: 24px;
    padding: 32px 40px;
    color: white;
    box-shadow: 0 12px 30px rgba(109, 91, 221, 0.25);
    margin-bottom: 50px;
    border: 2px solid #8e7bea;
}

.realm-banner-eyebrow[b-kfr4234i7z] {
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 1.8px;
    color: #ffd35c;
    display: block;
    margin-bottom: 6px;
}

.realm-unit-banner h1[b-kfr4234i7z] {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.5px;
}

/* Path Wrapper & Stage
   Mascot stage sits fixed-width on the right; path gets the remaining room
   on the left so Level 1 (top, center) is never crowded out. */
.realm-path-wrapper[b-kfr4234i7z] {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 40px 300px 40px 20px;
    min-height: 520px;
    max-width: 900px;
    margin: 0 auto;
}

/* Character stage pinned to the right, clear of the path */
.realm-character-stage[b-kfr4234i7z] {
    position: absolute;
    right: 20px;
    top: 60px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 170px;
}

.realm-speech-bubble[b-kfr4234i7z] {
    position: relative;
    background: #ffffff;
    border: 2px solid #e2dbff;
    padding: 15px 18px;
    border-radius: 18px;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 850;
    color: #5548a9;
    box-shadow: 0 8px 20px rgba(84, 68, 191, 0.08);
    text-align: center;
    margin-bottom: 15px;
    box-sizing: border-box;
    width: 180px;
}

    .realm-speech-bubble[b-kfr4234i7z]::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 14px;
        height: 14px;
        background: #ffffff;
        border-right: 2px solid #e2dbff;
        border-bottom: 2px solid #e2dbff;
    }

.realm-mascot-large[b-kfr4234i7z] {
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Path Nodes & ZigZag Layout */
.realm-path[b-kfr4234i7z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.realm-node-container[b-kfr4234i7z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

/* Horizontal Snake / ZigZag Offsets — tuned for .realm-path max-width: 400px */
.pos-center[b-kfr4234i7z] {
    transform: translateX(0);
}

.pos-right[b-kfr4234i7z] {
    transform: translateX(95px);
}

.pos-left[b-kfr4234i7z] {
    transform: translateX(-95px);
}

.realm-node-bubble[b-kfr4234i7z] {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(84, 68, 191, 0.18);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

    .realm-node-bubble.active[b-kfr4234i7z] {
        background: linear-gradient(135deg, #765ee4 0%, #5444bf 100%);
        border: 4px solid #fffdf8;
        color: white;
    }

    .realm-node-bubble.unlocked[b-kfr4234i7z] {
        background: linear-gradient(135deg, #b9dce9 0%, #91c5d8 100%);
        border: 4px solid #fffdf8;
        color: white;
        box-shadow: 0 8px 20px rgba(76, 151, 177, 0.14);
    }

        .realm-node-bubble.unlocked:hover[b-kfr4234i7z] {
            transform: scale(1.12);
            box-shadow: 0 12px 25px rgba(76, 151, 177, 0.22);
        }

.realm-node-label[b-kfr4234i7z] {
    margin-top: 8px;
    background: #ffffff;
    border: 2px solid #e8ddff;
    padding: 4px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(74, 58, 135, 0.05);
}

.realm-label-text[b-kfr4234i7z] {
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1.2px;
    color: #7561d8;
}

/* Curved Path Connectors
   Actual S-curve swooshes (not straight rotated bars), drawn via an SVG
   mask so the fill stays a normal CSS gradient. curve-left reuses the
   same path mirrored with scaleX(-1) rather than a separate SVG. */
.realm-connector-curve[b-kfr4234i7z] {
    width: 90px;
    height: 55px;
    margin: 0 auto;
    background: linear-gradient(180deg, #7fc9e8, #3ba9db);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 55'%3E%3Cpath d='M14 0 C14 28 76 28 76 55' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 55'%3E%3Cpath d='M14 0 C14 28 76 28 76 55' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /*-webkit-mask-size: 100% 100%;*//* TODO: Observe. Commented as it was giving warning*/
    mask-size: 100% 100%;
}

.curve-right[b-kfr4234i7z] {
    transform: translateX(28px);
}

.curve-left[b-kfr4234i7z] {
    transform: translateX(15px) scaleX(-1);
}

.curve-center[b-kfr4234i7z] {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 55'%3E%3Cpath d='M45 0 C45 22 45 33 45 55' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 55'%3E%3Cpath d='M45 0 C45 22 45 33 45 55' stroke='black' stroke-width='10' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    transform: translateX(0);
}


/* =========================================================
   LOCKED LEVEL STATE
   ========================================================= */

.realm-node-bubble.locked[b-kfr4234i7z] {
    background: linear-gradient(135deg, #55c7e8 0%, #299bc9 100%);
    border: 4px solid #fffdf8;
    color: white;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(41, 155, 201, 0.20);
}

    .realm-node-bubble.locked:hover[b-kfr4234i7z] {
        transform: scale(1.08);
        box-shadow: 0 12px 25px rgba(41, 155, 201, 0.30);
    }


/* =========================================================
   LOCKED LEVEL POPOVER
   ========================================================= */

.realm-locked-popover[b-kfr4234i7z] {
    position: absolute;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    padding: 19px 20px;
    background: #ffffff;
    border: 2px solid #e2dbff;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(60, 50, 110, 0.16);
    z-index: 20;
    text-align: center;
}

    .realm-locked-popover[b-kfr4234i7z]::before {
        content: '';
        position: absolute;
        top: -8px;
        left: 50%;
        width: 14px;
        height: 14px;
        background: #ffffff;
        border-left: 2px solid #e2dbff;
        border-top: 2px solid #e2dbff;
        transform: translateX(-50%) rotate(45deg);
    }

    .realm-locked-popover strong[b-kfr4234i7z] {
        display: block;
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 950;
        color: #5548a9;
    }

    .realm-locked-popover p[b-kfr4234i7z] {
        margin: 0;
        font-size: 13px;
        line-height: 1.55;
        font-weight: 650;
        color: #687087;
    }


/* =========================================================
   LOCKED POPOVER ACTIONS
   ========================================================= */

.realm-locked-actions[b-kfr4234i7z] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

    .realm-locked-actions button[b-kfr4234i7z] {
        border: none;
        border-radius: 11px;
        padding: 9px 14px;
        min-height: 36px;
        font-family: inherit;
        font-size: 12px;
        font-weight: 850;
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

        .realm-locked-actions button:hover[b-kfr4234i7z] {
            transform: translateY(-1px);
        }

.realm-locked-dismiss[b-kfr4234i7z] {
    background: #765ee4;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(84, 68, 191, 0.18);
}

    .realm-locked-dismiss:hover[b-kfr4234i7z] {
        box-shadow: 0 6px 14px rgba(84, 68, 191, 0.25);
    }

.realm-locked-skip[b-kfr4234i7z] {
    background: #f5f2ff;
    color: #7561d8;
    border: 1px solid #ddd5fb !important;
}

    .realm-locked-skip:hover[b-kfr4234i7z] {
        background: #eeeafc;
        box-shadow: 0 4px 10px rgba(84, 68, 191, 0.12);
    }

/* =========================================================
   LOCKED LEVEL LABEL
   ========================================================= */

.realm-node-bubble.locked + .realm-locked-popover + .realm-node-label[b-kfr4234i7z] {
    border-color: #dedee7;
}

    .realm-node-bubble.locked + .realm-locked-popover + .realm-node-label .realm-label-text[b-kfr4234i7z] {
        color: #9293a3;
    }

/* Make active node bubbles grow on hover just like unlocked/locked nodes */
.realm-node-bubble.active:hover[b-kfr4234i7z] {
    transform: scale(1.12);
    box-shadow: 0 12px 25px rgba(118, 94, 228, 0.3);
}

.realm-label-title[b-kfr4234i7z] {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
    color: #4f5870;
    text-align: center;
}
/* =========================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================= */

@media (max-width: 900px) {
    .realm-path-wrapper[b-kfr4234i7z] {
        padding-right: 20px;
    }

    .realm-character-stage[b-kfr4234i7z] {
        display: none;
    }
}
/* /Components/Pages/QuestVisuals/QuestMap/ScrollGamified.razor.rz.scp.css */
/* CSS for ScrollGamified component */
.realm-node-icon.icon-scroll-image-container[b-0e1a6xafwr] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #2b4c6f 0%, #112233 100%);
}

.realm-scroll-img[b-0e1a6xafwr] {
    width: 75%;
    height: 75%;
    object-fit: contain;
}
/* /Components/Pages/QuestVisuals/QuestMap/ThunderboltGamified.razor.rz.scp.css */
/* CSS for ThunderboltGamified component */
.realm-node-icon.icon-thunderbolt-image-container[b-fffd0xt7dq] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #2b4c6f 0%, #112233 100%);
}

.realm-thunderbolt-img[b-fffd0xt7dq] {
    width: 75%; /* Adjust percentage so the lightning bolt fits nicely inside the circle */
    height: 75%;
    object-fit: contain;
}
/* /Components/Pages/QuestVisuals/QuestMap/TrophyGamified.razor.rz.scp.css */
/* CSS for TrophyGamified component */
.realm-node-icon.icon-trophy-image-container[b-opnklcr6u6] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #2b4c6f 0%, #112233 100%);
}

.realm-trophy-img[b-opnklcr6u6] {
    width: 75%; /* Scales the trophy nicely inside the circle without getting cut off */
    height: 75%;
    object-fit: contain;
}
/* /Components/Pages/QuestVisuals/QuestNoteCard.razor.rz.scp.css */
/* CSS for QuestNoteCard component */
/* ==========================================================
   Quest Note Card
   ========================================================== */

.notes-card[b-30f2yar93a] {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notes-header[b-30f2yar93a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .notes-header h3[b-30f2yar93a] {
        margin: 0;
        font-size: 1.25rem;
        color: #1f2937;
    }

.quest-name[b-30f2yar93a] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    background: #eef5ff;
    padding: 4px 10px;
    border-radius: 999px;
}

.notes-input[b-30f2yar93a] {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    padding: 14px;
    box-sizing: border-box;
    border: 2px solid #dbeafe;
    border-radius: 14px;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.6;
    background: #fcfdff;
    color: #374151;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .notes-input:focus[b-30f2yar93a] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    }

    .notes-input[b-30f2yar93a]::placeholder {
        color: #9ca3af;
    }

.notes-actions[b-30f2yar93a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.save-status[b-30f2yar93a] {
    color: #16a34a;
    font-size: 0.9rem;
    font-weight: 600;
}

.action-button[b-30f2yar93a] {
    padding: 10px 22px;
    border: none;
    border-radius: 12px;
    background: #2563eb;
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

    .action-button:hover[b-30f2yar93a] {
        background: #1d4ed8;
        transform: translateY(-1px);
    }

    .action-button:active[b-30f2yar93a] {
        transform: translateY(0);
    }
/* /Components/Pages/QuestVisuals/RichQuillTextEditor.razor.rz.scp.css */
/* CSS for RichQuillTextEditor component */
.rich-quill-editor[b-algzys1tag] {
    background: white;
    border-radius: 12px;
}

    .rich-quill-editor .ql-editor[b-algzys1tag] {
        min-height: 180px;
        font-size: 1rem;
    }
/* /Components/Pages/QuestVisuals/SlidingWindow.razor.rz.scp.css */
/* =========================================================
   OUTER FRAME & SCENE
   ========================================================= */
.sliding-window-outer-frame[b-t4tyu65tx7] {
    display: flex;
    justify-content: center;
    margin: 40px 0 20px 0;
    width: 100%;
    overflow-x: auto;
    padding: 10px 0;
}

/* Scene handles the shared alignment layer and gives headroom for pointers */
.sliding-window-scene[b-t4tyu65tx7] {
    position: relative;
    height: 110px;
    margin: 25px 0 0;
    width: 100%;
}
    /* =========================================================
   DATA VALUES & TILES
   ========================================================= */
.data-values[b-t4tyu65tx7] {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 1;
}
    /* 3. Ensure number tiles have text perfectly centered */
    .data-tile[b-t4tyu65tx7] {
        position: relative;
        width: 70px;
        height: 64px;
        background: #f8f9fa;
        border: 2px solid #cbd5e1;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.25rem;
        color: #1e293b;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        box-sizing: border-box;
        cursor: pointer;
        pointer-events: auto;
        transition: transform 0.2s ease; /* smooth transition for scaling */
    }
        /* 2. Enlarge the data tile when a pointer is on it */
        /* We can style this using a class or check how the tile behaves. 
   Since the tile contains the pointer directly, we can scale it up 
   when it has a child pointer element! */
        .data-tile:has(.sliding-window-pointer)[b-t4tyu65tx7] {
            transform: scale(1.08); /* Slightly enlarges the tile */
            border-color: #574b90; /* Highlights the border color */
            background-color: #f1f2f6;
            box-shadow: 0 8px 15px rgba(87, 75, 144, 0.2);
            z-index: 5; /* Bring the active tile to the front */
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
    /* =========================================================
   SLIDING WINDOW FRAME
   ========================================================= */
.sliding-window-container-wrapper[b-t4tyu65tx7] {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 10;
    pointer-events: none;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slidingWindowFloatAnimation-b-t4tyu65tx7 1.5s ease-in-out infinite alternate;
}

    .sliding-window-blueprint[b-t4tyu65tx7] {
        position: relative;
        box-sizing: border-box;
        background-color: rgba(112, 161, 255, 0.15);
        border: 4px solid #574b90;
        border-radius: 8px;
        height: 64px;
        box-shadow: inset 0 0 10px rgba(87, 75, 144, 0.25), 0 6px 12px rgba(0, 0, 0, 0.15);
        padding: 3px;
        display: flex;
        align-items: center;
    }

    .window-pane-grid-2[b-t4tyu65tx7] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
        height: 100%;
        align-items: center;
    }

    .glass-pane[b-t4tyu65tx7] {
        background: rgba(255, 255, 255, 0.35);
        border: 1px solid rgba(87, 75, 144, 0.3);
        border-radius: 4px;
        height: 100%;
        box-sizing: border-box;
    }

    .sliding-window-sill[b-t4tyu65tx7] {
        position: absolute;
        bottom: -6px;
        left: -4px;
        right: -4px;
        height: 5px;
        background-color: #40407a;
        border-radius: 2px;
    }

    .sliding-window-reflection[b-t4tyu65tx7] {
        position: absolute;
        top: 4px;
        left: 6px;
        width: 10px;
        height: 14px;
        background: rgba(255, 255, 255, 0.6);
        transform: skewX(-20deg);
        border-radius: 2px;
        z-index: 2;
    }
    /* =========================================================
   POINTERS
   ========================================================= */
    /* 1. Move the pointer higher up */
    .sliding-window-pointer[b-t4tyu65tx7] {
        position: absolute;
        left: 50%;
        top: -55px; /* Increased from -42px to lift it higher */
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 30;
        pointer-events: none;
    }

    .sliding-window-pointer-label[b-t4tyu65tx7] {
        min-width: 28px;
        padding: 3px 8px;
        background: #40407a;
        color: white;
        border-radius: 6px;
        font-size: 0.9rem;
        font-weight: 800;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
    }

    .sliding-window-pointer-arrow[b-t4tyu65tx7] {
        color: #40407a;
        font-size: 1.4rem;
        font-weight: 900;
        line-height: 18px;
        height: 18px;
        margin-top: 2px;
    }

    .pointer-multiple .sliding-window-pointer-label[b-t4tyu65tx7] {
        padding-left: 10px;
        padding-right: 10px;
    }
    /* =========================================================
   ANIMATIONS
   ========================================================= */
    @keyframes slidingWindowFloatAnimation-b-t4tyu65tx7 {
        0% {
            transform: translateY(0px);
        }

        100% {
            transform: translateY(-3px);
        }
    }
/* Changes for LongestSubstringWithoutRepeatingCharacters - Starts */
.sliding-window-boundary-controls[b-t4tyu65tx7] {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 40;
}

.sliding-window-boundary-button[b-t4tyu65tx7] {
    padding: 5px 12px;
    border: 2px solid #574b90;
    border-radius: 7px;
    background: white;
    color: #40407a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .sliding-window-boundary-button.active[b-t4tyu65tx7] {
        background: #40407a;
        color: white;
    }
/* Changes for LongestSubstringWithoutRepeatingCharacters - Ends */
/* /Components/Pages/QuestVisuals/WaterFlowWalls.razor.rz.scp.css */
.water-flow-walls-scene[b-iincf0tfv7] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    padding-top: 45px;
    box-sizing: border-box;
}

/* --- THE SHARED BACKGROUND WATER POOL --- */
.shared-water-pool[b-iincf0tfv7] {
    position: absolute;
    bottom: 0;
    /* Rich glass-like blue gradient */
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.7) 0%, rgba(29, 78, 216, 0.85) 60%, rgba(30, 58, 138, 0.95) 100%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3; /* Sits cleanly between background and foreground elements */
    border-top: 2px solid rgba(191, 219, 254, 0.9);
    box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.water-surface-wave[b-iincf0tfv7] {
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 4px;
    background: #93c5fd;
    box-shadow: 0 0 10px #3b82f6;
}

/* --- WATER FLOW / STREAM BRIDGE BETWEEN WALLS --- */
.water-flowing-bridge[b-iincf0tfv7] {
    position: absolute;
    height: 12px;
    z-index: 5; /* Clearly visible over the gaps between walls */
    overflow: hidden;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.flowing-stream-wave[b-iincf0tfv7] {
    width: 200%;
    height: 100%;
    background: linear-gradient( 90deg, rgba(59, 130, 246, 0.4) 0%, rgba(147, 197, 253, 0.95) 25%, rgba(59, 130, 246, 0.4) 50%, rgba(147, 197, 253, 0.95) 75%, rgba(59, 130, 246, 0.4) 100% );
    background-size: 200px 100%;
    animation: streamFlow-b-iincf0tfv7 1.5s linear infinite;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.9);
}

@keyframes streamFlow-b-iincf0tfv7 {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -200px 0;
    }
}

/* --- WALL LIST GRID --- */
.water-wall-list[b-iincf0tfv7] {
    position: relative;
    z-index: 2; /* Base pillars sit behind the primary water level line */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 28px;
}

/* Individual Wall Item */
.water-wall-item[b-iincf0tfv7] {
    position: relative;
    width: 70px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.25s ease;
}

    .water-wall-item:hover[b-iincf0tfv7] {
        transform: translateY(-6px);
    }

/* Hollow Pillar Structure */
.water-wall-pillar[b-iincf0tfv7] {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #8b5a3c 0%, #70452f 50%, #5a3827 100%);
    border-left: 3px solid #a87552;
    border-right: 3px solid #43291d;
    border-bottom: 3px solid #43291d;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
}

    /* Glass Container Sheen Effect so water looks integrated */
    .water-wall-pillar[b-iincf0tfv7]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(59, 130, 246, 0.2) 100%);
        pointer-events: none;
        z-index: 4;
    }

    /* Stone Brick Pattern Overlay */
    .water-wall-pillar[b-iincf0tfv7]::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(0deg, transparent, transparent 18px, rgba(0, 0, 0, 0.2) 18px, rgba(0, 0, 0, 0.2) 20px);
        pointer-events: none;
        z-index: 5;
    }

/* Top Wall Crown */
.water-wall-crown[b-iincf0tfv7] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 86px;
    height: 16px;
    background: linear-gradient(180deg, #a87552 0%, #70452f 100%);
    border: 2px solid #43291d;
    border-radius: 4px;
    box-sizing: border-box;
    z-index: 6;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Labels */
/* Height Number Label (Centered inside the wall) */
/* Height Number Label (Centered horizontally and vertically) */
.water-wall-item-label[b-iincf0tfv7] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    color: #ffffff;
    font-size: 32px !important;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    text-align: center;
    line-height: 1;
}

/* Array Index Identifier (Centered above the wall) */
.water-wall-cap-label[b-iincf0tfv7] {
    position: absolute;
    top: -30px;
    left: 50%; /* Move to center horizontally */
    transform: translateX(-50%); /* Pull back by half its width for exact centering */
    z-index: 6;
    color: black;
    font-size: 14px !important; /* Force apply */
    font-weight: bold;
    text-align: center;
}

/* Highlight States */
.water-wall-item-max .water-wall-pillar[b-iincf0tfv7] {
    border-color: #f59e0b;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5), 0 10px 20px rgba(0,0,0,0.4);
}

.water-wall-item-max .water-wall-crown[b-iincf0tfv7] {
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
    border-color: #78350f;
}

.water-wall-item-max .water-wall-cap-label[b-iincf0tfv7] {
    color: #fbbf24;
    font-weight: 900;
}

.water-wall-item-selected .water-wall-pillar[b-iincf0tfv7] {
    border-color: #38bdf8;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
}

/* Bubbles */
.water-wall-bubble[b-iincf0tfv7] {
    position: absolute;
    z-index: 5;
    width: 5px;
    height: 5px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(147, 197, 253, 0.3);
    opacity: 0;
    animation: wallBubbleRise-b-iincf0tfv7 1.6s ease-out infinite;
}

.water-wall-bubble-1[b-iincf0tfv7] {
    left: 15px;
    bottom: 20px;
}

.water-wall-bubble-2[b-iincf0tfv7] {
    left: 40px;
    bottom: 15px;
    animation-delay: 0.6s;
}

@keyframes wallBubbleRise-b-iincf0tfv7 {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.5);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-40px) scale(1.2);
    }
}

/* --- SQUISHED VARIANT --- */
.water-flow-walls-squished .water-wall-list[b-iincf0tfv7] {
    gap: 12px;
}

.water-flow-walls-squished .water-wall-item[b-iincf0tfv7] {
    width: 50px;
    height: 100px;
}

.water-flow-walls-squished .water-wall-crown[b-iincf0tfv7] {
    top: -10px;
    width: 64px;
    height: 12px;
}

.water-flow-walls-squished .water-wall-item-label[b-iincf0tfv7] {
    font-size: 18px;
    bottom: 8px;
}

.water-flow-walls-squished .water-wall-cap-label[b-iincf0tfv7] {
    top: -24px;
    font-size: 10px;
}

.water-flow-walls-empty[b-iincf0tfv7] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    color: #8c8275;
    font-weight: bold;
}
.water-wall-pointer[b-iincf0tfv7] {
    position: absolute;
    top: -58px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
/* Pointers for walls - Starts */
.water-wall-pointer[b-iincf0tfv7] {
    position: absolute;
    top: -82px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.water-wall-pointer-label[b-iincf0tfv7] {
    font-size: 20px;
    font-weight: 900;
}

.water-wall-pointer-arrow[b-iincf0tfv7] {
    font-size: 22px;
    font-weight: 900;
    margin-top: 5px;
}

.pointer-one[b-iincf0tfv7] {
    color: #2d5be3;
}

.pointer-two[b-iincf0tfv7] {
    color: #8e44ad;
}

.pointer-both[b-iincf0tfv7] {
    color: #23408e;
}
/* Pointers for walls - Ends */
/* /Components/QuestHeader.razor.rz.scp.css */
/* =========================================================
   Quest Header
   ========================================================= */

.quest-header[b-kv3n2a2ovn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 30px;
    background: linear-gradient(90deg, #30366f, #4b427f);
    border-bottom: 2px solid #7777b8;
}

.quest-header-actions a[b-kv3n2a2ovn] {
    color: white;
    text-decoration: none;
}

.quest-header-title[b-kv3n2a2ovn] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: bold;
    color: #ffffff;
}

.quest-header-actions a:hover[b-kv3n2a2ovn] {
    text-decoration: underline;
}

/* Added for User login - Starts */

.quest-header-auth[b-kv3n2a2ovn] {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

    .quest-header-auth a[b-kv3n2a2ovn],
    .quest-header-auth span[b-kv3n2a2ovn] {
        color: white;
        text-decoration: none;
        font-size: 18px;
        font-weight: 600;
        line-height: 1;
    }

        .quest-header-auth a:hover[b-kv3n2a2ovn] {
            text-decoration: underline;
        }

/* Added for User login - Ends */