/* /Components/Pages/Help.razor.rz.scp.css */
.help[b-6380d8wmxe] {
    min-height: 100vh;
    box-sizing: border-box;
    padding: 24px 16px 40px;
}

.quiz-corner[b-6380d8wmxe] {
    height: 120px;
}

.help-content[b-6380d8wmxe] {
    position: relative; /* above the corners */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

h1[b-6380d8wmxe] {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
}

.intro[b-6380d8wmxe] {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.share-picture[b-6380d8wmxe] {
    width: 100%;
    max-width: 560px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

.guess[b-6380d8wmxe] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 460px;
}

    .guess label[b-6380d8wmxe] {
        font-weight: 600;
    }

.guess-row[b-6380d8wmxe] {
    display: flex;
    gap: 8px;
}

    .guess-row input[b-6380d8wmxe] {
        flex: 1;
        min-width: 0;
        height: 44px;
        box-sizing: border-box;
        padding: 0 12px;
        border: 1px solid #666;
        border-radius: 4px;
        background: #111;
        color: #fff;
        font: inherit;
        font-size: 16px;
    }

    .guess-row .check[b-6380d8wmxe] {
        height: 44px;
        min-width: 110px;
    }

.result[b-6380d8wmxe] {
    min-height: 1.5em;
}

    .result.correct[b-6380d8wmxe] {
        color: #7CFC7C;
    }

    .result.almost[b-6380d8wmxe] {
        color: #FFD54F;
    }

    .result.wrong[b-6380d8wmxe] {
        color: #FF8A80;
    }

.play[b-6380d8wmxe] {
    height: 64px;
    min-width: 260px;
    margin-top: 6px;
    font-size: 18px;
}

@media (max-width: 479.98px) {
    .quiz-corner[b-6380d8wmxe] {
        height: 70px;
    }

    h1[b-6380d8wmxe] {
        font-size: 22px;
    }

    .intro[b-6380d8wmxe] {
        font-size: 14px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Main menu, modelled on the UWP app's MainPage (SplitView + background + packages). */

.main-page[b-jcxhpexes6] {
    --pane-compact: 50px;
    --pane-open: 250px;
    position: relative;
    min-height: 100vh;
    color: #fff;
}

/* ---------- Side pane (UWP SplitView, CompactOverlay) ---------- */

.pane[b-jcxhpexes6] {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 10;
    width: var(--pane-compact);
    overflow-x: hidden;
    overflow-y: auto;
    background: #222;
    transition: width 0.2s ease;
}

    .pane.open[b-jcxhpexes6] {
        width: var(--pane-open);
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.6);
    }

.pane-row[b-jcxhpexes6] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: var(--pane-open);
    height: 50px;
    margin-bottom: 15px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .pane-row:first-child[b-jcxhpexes6] {
        margin-bottom: 25px;
    }

.pane-icon[b-jcxhpexes6] {
    flex: 0 0 var(--pane-compact);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 18px;
}

.pane-label[b-jcxhpexes6] {
    flex: 0 0 198px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 18px;
}

.pane-row:hover .pane-label[b-jcxhpexes6] {
    background: rgba(255, 255, 255, 0.32);
}

.pane-row:hover .pane-icon[b-jcxhpexes6] {
    background: rgba(255, 255, 255, 0.1);
}

.version[b-jcxhpexes6] {
    width: var(--pane-open);
    padding-right: 2px;
    text-align: right;
    visibility: hidden;
}

.pane.open .version[b-jcxhpexes6] {
    visibility: visible;
}

/* ---------- Stage ---------- */

.stage[b-jcxhpexes6] {
    position: relative;
    min-height: 100vh;
    margin-left: var(--pane-compact);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
}

.quiz-corner[b-jcxhpexes6] {
    height: 150px;
}

.dev-tools[b-jcxhpexes6] {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.page-content[b-jcxhpexes6] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------- Coins / store row ---------- */

.store-row[b-jcxhpexes6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 24px;
}

.coins[b-jcxhpexes6] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 4px;
    font-size: 15px;
}

    .coins img[b-jcxhpexes6] {
        width: 30px;
    }

.store[b-jcxhpexes6] {
    flex-direction: row;
    gap: 10px;
}

    .store img[b-jcxhpexes6] {
        width: 30px;
    }

.reward-line[b-jcxhpexes6] {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .reward-line img[b-jcxhpexes6] {
        height: 18px;
    }

.reward .social[b-jcxhpexes6] {
    height: 22px;
}

/* ---------- Packages ---------- */

.packs[b-jcxhpexes6] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pack[b-jcxhpexes6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 340px;
    margin: 10px;
}

.pack-label[b-jcxhpexes6] {
    width: 100%;
    height: auto;
    cursor: pointer;
}

.play[b-jcxhpexes6] {
    width: 170px;
}

.full-version[b-jcxhpexes6] {
    display: flex;
    flex-direction: column;
    margin: 0 25px;
    padding-left: 10px;
    font-size: 15px;
    line-height: 1.6;
}

.full-version-title[b-jcxhpexes6] {
    margin: 10px 0 20px;
    font-size: 17px;
}

.buy[b-jcxhpexes6] {
    align-self: center;
    width: 208px;
    margin-top: 20px;
}

/* ---------- Responsive (same breakpoints as the UWP visual states) ---------- */

@media (max-width: 1169px) {
    .full-version[b-jcxhpexes6] {
        display: none;
    }
}

@media (max-width: 969px) {
    .pack[b-jcxhpexes6] {
        width: 250px;
    }
}

@media (max-width: 749px) {
    .pack[b-jcxhpexes6] {
        width: 210px;
    }
}

@media (max-width: 499px) {
    .packs[b-jcxhpexes6] {
        flex-direction: column;
    }

    .pack[b-jcxhpexes6] {
        width: 197px;
    }

    .quiz-corner[b-jcxhpexes6] {
        height: 80px;
    }
}

@media (max-height: 499px) {
    .quiz-corner[b-jcxhpexes6] {
        display: none;
    }
}

/* ---------- More games (inside QuizMessageBox, UWP CrossPromotionMsgBox) ---------- */

.promo[b-jcxhpexes6] {
    display: flex;
    gap: 10px;
    height: 100%;
    min-height: 0;
}

.promo-games[b-jcxhpexes6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.promo-icon[b-jcxhpexes6] {
    width: 70px;
    height: 70px;
    padding: 0;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    opacity: 0.7;
}

    .promo-icon img[b-jcxhpexes6] {
        width: 100%;
        height: 100%;
        display: block;
    }

    .promo-icon:hover[b-jcxhpexes6] {
        opacity: 1;
    }

    .promo-icon.selected[b-jcxhpexes6] {
        border-color: #fff;
        opacity: 1;
    }

.promo-banner[b-jcxhpexes6] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .promo-banner img[b-jcxhpexes6] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

@media (max-width: 479.98px) {
    .promo-icon[b-jcxhpexes6] {
        width: 48px;
        height: 48px;
    }
}

/* ---------- Language picker (inside QuizMessageBox) ---------- */

.languages[b-jcxhpexes6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    white-space: normal;
}

.language[b-jcxhpexes6] {
    height: 44px;
    padding: 0 6px;
}

@media (max-width: 479.98px) {
    .languages[b-jcxhpexes6] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/LevelGallery.razor.rz.scp.css */
/* Level gallery, modelled on the UWP app's LevelGallery page: the level's logos on glass shelves. */

.level-gallery[b-sphuvg7rsl] {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.back[b-sphuvg7rsl] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

.quiz-corner[b-sphuvg7rsl] {
    height: 80px;
}

/* Horizontal scroller; the shelves are centered when they fit. */
.shelves[b-sphuvg7rsl] {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}

/* --per-row logos per shelf (set by window height below, like the UWP app). */
.shelf-grid[b-sphuvg7rsl] {
    --per-row: 7;
    /* --cell: width of one logo; every size below is a multiple of it. 100px = the UWP size;
       large windows scale it up (see the min-height: 600px rule at the bottom). */
    --cell: 100px;
    display: grid;
    grid-template-columns: repeat(var(--per-row), var(--cell));
    grid-auto-rows: calc(var(--cell) * 1.2);
    width: max-content;
    margin: 0 auto;
    padding: 0 calc(var(--cell) * 0.24);
    list-style: none;
}

/* One logo (list item): its own piece of glass shelf at the bottom; its link fills it, with the thumbnail and the
   "solved" checkmark stacked inside. */
.logo[b-sphuvg7rsl] {
    position: relative;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: url("Assets/glassmiddle.png") bottom / 100% calc(var(--cell) * 0.65) no-repeat;
}

    .logo > a[b-sphuvg7rsl] {
        place-self: stretch;
        display: grid;
        place-items: center;
    }

        .logo > a > *[b-sphuvg7rsl] {
            grid-area: 1 / 1;
        }

    .logo:hover[b-sphuvg7rsl] {
        background-color: rgba(255, 255, 255, 0.12);
    }

    .logo:active[b-sphuvg7rsl] {
        background-color: rgba(255, 255, 0, 0.12);
    }

    /* Shelf ends: left end on the first logo of a row, right end on the last (content is set per row length below). */
    .logo[b-sphuvg7rsl]::before, .logo[b-sphuvg7rsl]::after {
        position: absolute;
        bottom: 0;
        width: calc(var(--cell) * 0.24);
        height: calc(var(--cell) * 0.65);
        background: bottom / 100% 100% no-repeat;
    }

    .logo[b-sphuvg7rsl]::before {
        left: calc(var(--cell) * -0.24);
        background-image: url("Assets/glassleft.png");
    }

    .logo[b-sphuvg7rsl]::after {
        right: calc(var(--cell) * -0.24);
        background-image: url("Assets/glassright.png");
    }

    .logo:last-child[b-sphuvg7rsl]::after {
        content: "";
    }

.thumb[b-sphuvg7rsl] {
    width: calc(var(--cell) * 1.1);
    max-width: none;
}

.check[b-sphuvg7rsl] {
    width: calc(var(--cell) * 0.5);
    margin-top: calc(var(--cell) * 0.6);
    pointer-events: none;
}

/* Rows per window height, same as the UWP app: 5 rows of 7, 4 of 9, 3 of 12, 2 of 18. */
@media (min-height: 600px) {
    /* 5 shelves of 7 are 7.48 cells wide (with the shelf ends) and 6 cells high: grow them to fill
       up to 90% of the width or 80% of the height, never smaller than the UWP size.
       (The thumbnail's srcset/sizes in LevelGallery.razor use the same formula.) */
    .shelf-grid[b-sphuvg7rsl] {
        /* Whole pixels: a fractional cell width leaves hairline seams between the glass pieces. */
        --cell: round(down, max(100px, min(12vw, 13.3vh)), 1px);
    }

    .logo:nth-child(7n + 1)[b-sphuvg7rsl]::before, .logo:nth-child(7n)[b-sphuvg7rsl]::after {
        content: "";
    }
}

@media (min-height: 500px) and (max-height: 599.98px) {
    .shelf-grid[b-sphuvg7rsl] {
        --per-row: 9;
    }

    .logo:nth-child(9n + 1)[b-sphuvg7rsl]::before, .logo:nth-child(9n)[b-sphuvg7rsl]::after {
        content: "";
    }
}

@media (min-height: 400px) and (max-height: 499.98px) {
    .shelf-grid[b-sphuvg7rsl] {
        --per-row: 12;
    }

    .logo:nth-child(12n + 1)[b-sphuvg7rsl]::before, .logo:nth-child(12n)[b-sphuvg7rsl]::after {
        content: "";
    }
}

@media (max-height: 399.98px) {
    .shelf-grid[b-sphuvg7rsl] {
        --per-row: 18;
    }

    .logo:nth-child(18n + 1)[b-sphuvg7rsl]::before, .logo:nth-child(18n)[b-sphuvg7rsl]::after {
        content: "";
    }
}

@media (max-height: 719.98px) {
    .quiz-corner[b-sphuvg7rsl] {
        height: 50px;
    }
}

@media (max-height: 479.98px) {
    .quiz-corner[b-sphuvg7rsl] {
        height: 45px;
    }
}
/* /Components/Pages/LevelSelect.razor.rz.scp.css */
/* Level select, modelled on the UWP app's LevelSelect page: a horizontal row of safes. */

.level-select[b-jqtm3m2n9j] {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.back[b-jqtm3m2n9j] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

.quiz-corner[b-jqtm3m2n9j] {
    height: 120px;
}

/* Horizontal scroller; the row is centered when it fits and scrolls when it doesn't. */
.levels[b-jqtm3m2n9j] {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}

.levels-row[b-jqtm3m2n9j] {
    display: flex;
    width: max-content;
    margin: 0 auto;
    padding: 0 30px;
    list-style: none;
}

    .levels-row > li[b-jqtm3m2n9j] {
        display: flex;
    }

/* Safe, label and text share one grid cell (like the UWP Grid), so the cell is as wide as the widest of them.
   A link (open level) or a button (locked), looking the same. */
.level[b-jqtm3m2n9j] {
    display: grid;
    text-decoration: none;
    justify-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

    .level > *[b-jqtm3m2n9j] {
        grid-area: 1 / 1;
    }

    .level:hover[b-jqtm3m2n9j] {
        background: rgba(255, 255, 255, 0.12);
    }

    .level:active[b-jqtm3m2n9j] {
        background: rgba(255, 255, 0, 0.12);
    }

.safe[b-jqtm3m2n9j] {
    height: 400px;
    align-self: center;
}

.label[b-jqtm3m2n9j] {
    height: 80px;
    margin-top: 15px;
    align-self: start;
}

.level-text[b-jqtm3m2n9j] {
    margin: 360px 10px 10px;
    align-self: start;
    font-size: 20px;
    white-space: nowrap;
}

/* Same height breakpoints as the UWP visual states. */
@media (max-height: 699px) {
    .quiz-corner[b-jqtm3m2n9j] {
        height: 75px;
    }
}

@media (max-height: 499px) {
    .quiz-corner[b-jqtm3m2n9j] {
        height: 60px;
    }

    .safe[b-jqtm3m2n9j] {
        height: 200px;
    }

    .label[b-jqtm3m2n9j] {
        height: 40px;
        margin-top: 25px;
    }

    .level-text[b-jqtm3m2n9j] {
        margin-top: 200px;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found[b-njgt2w5fcu] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    text-align: center;
}

h1[b-njgt2w5fcu] {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
}

p[b-njgt2w5fcu] {
    margin: 0 0 12px;
    font-size: 18px;
}

.img-btn[b-njgt2w5fcu] {
    padding: 0 28px;
}
/* /Components/Pages/Question.razor.rz.scp.css */
/* Question page, modelled on the UWP app's Question page. Three layouts, like its visual states:
   - wide (>= 1020 x 660): coins menu left of the big logo, hints below it, answer row at the bottom;
   - default: everything stacked with a smaller logo;
   - short (< 500 high): menu | logo | hints in one row, answer row below. */

.question[b-lde5fhd9m0] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 12px 24px;
}

.back[b-lde5fhd9m0] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

.quiz-corner[b-lde5fhd9m0] {
    height: 50px;
}

.page-content[b-lde5fhd9m0] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    min-width: 0; /* lets the answer row shrink on narrow phones instead of overflowing */
}

/* ---------- Menu, logo and hints ---------- */

.main-content[b-lde5fhd9m0] {
    display: grid;
    grid-template-areas: "menu" "logo" "hints";
    justify-items: center;
    align-items: center;
    row-gap: 8px;
}

.menu[b-lde5fhd9m0] {
    grid-area: menu;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 360px;
}

.coins[b-lde5fhd9m0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px;
    font-size: 15px;
}

    .coins img[b-lde5fhd9m0] {
        width: 30px;
    }

.menu-btn[b-lde5fhd9m0] {
    flex-direction: row;
    gap: 10px;
    width: 170px;
    height: 50px;
    font-size: 13px;
}

    .menu-btn img[b-lde5fhd9m0] {
        width: 24px;
    }

.logo-panel[b-lde5fhd9m0] {
    grid-area: logo;
    position: relative;
    width: 274px;
    height: 212px;
}

.glass[b-lde5fhd9m0] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    object-fit: contain;
}

.logo-img[b-lde5fhd9m0] {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 224px;
    height: 198px;
    object-fit: contain;
}

.hints[b-lde5fhd9m0] {
    grid-area: hints;
    display: flex;
    gap: 4px;
}

.hint[b-lde5fhd9m0] {
    width: 100px;
    height: 63px;
    padding: 0 6px;
    font-size: 13px;
}

.cost[b-lde5fhd9m0] {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .cost img[b-lde5fhd9m0] {
        height: 25px;
    }

/* ---------- Answer row ---------- */

.answer-row[b-lde5fhd9m0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%; /* full row; the answer box shrinks to fit on narrow phones */
    margin-top: 12px;
}

.feedback[b-lde5fhd9m0] {
    width: 56px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.answer[b-lde5fhd9m0] {
    width: 260px;
    min-width: 0;
    height: 44px;
    padding: 0 8px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font: inherit;
    font-size: 20px;
    text-align: center;
}

    .answer:hover[b-lde5fhd9m0] {
        border-color: rgba(255, 255, 255, 0.85);
    }

    .answer:focus[b-lde5fhd9m0] {
        outline: none;
        border-color: #fff;
        background: #fff;
        color: #000;
    }

.check[b-lde5fhd9m0] {
    width: 110px;
    height: 50px;
    flex-shrink: 0;
}

/* ---------- Already solved ---------- */

.resolved[b-lde5fhd9m0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

.logo-name[b-lde5fhd9m0] {
    margin: 10px 0 5px;
    font-size: 20px;
}

.description[b-lde5fhd9m0] {
    width: 320px;
    max-width: 100%;
    height: 200px;
    overflow-y: auto;
    padding: 10px;
    font-size: 13px;
    text-align: justify;
    white-space: pre-line;
}

/* ---------- Message box content (rendered by QuizMessageBox, styled here) ---------- */

strong[b-lde5fhd9m0] {
    display: block;
    margin-bottom: 4px;
    text-align: center;
}

.reward-icon[b-lde5fhd9m0] {
    height: 40px;
}

/* ---------- Wide window (UWP state Width1020Height660 = the XAML defaults) ---------- */

@media (min-width: 1020px) and (min-height: 660px) {
    .quiz-corner[b-lde5fhd9m0] {
        height: 150px;
    }

    .main-content[b-lde5fhd9m0] {
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "menu logo ."
            ".    hints .";
        row-gap: 0;
    }

    .menu[b-lde5fhd9m0] {
        flex-direction: column;
        align-items: flex-end;
        justify-self: end;
        max-width: none;
        margin-right: 12px;
    }

    .coins[b-lde5fhd9m0] {
        align-self: center;
    }

        .coins img[b-lde5fhd9m0] {
            width: 40px;
            margin: 10px;
        }

    .logo-panel[b-lde5fhd9m0] {
        width: 663px;
        height: 479px;
    }

    .glass[b-lde5fhd9m0] {
        height: 180px;
    }

    .logo-img[b-lde5fhd9m0] {
        bottom: 29px;
        width: 514px;
        height: 450px;
    }

    .hint[b-lde5fhd9m0] {
        width: 130px;
        height: 80px;
        font-size: 15px;
    }

    .cost img[b-lde5fhd9m0] {
        height: 40px;
    }

    .answer[b-lde5fhd9m0] {
        width: 500px;
    }

    .check[b-lde5fhd9m0] {
        width: 170px;
    }

    .logo-name[b-lde5fhd9m0] {
        height: 30px;
        font-size: 25px;
    }

    .description[b-lde5fhd9m0] {
        width: 720px;
        height: 220px;
    }
}

/* ---------- Short window (UWP state Width0Height0) ---------- */

@media (max-height: 499.98px) {
    .question[b-lde5fhd9m0] {
        padding-top: 48px;
    }

    .main-content[b-lde5fhd9m0] {
        grid-template-columns: auto auto auto;
        grid-template-areas: "menu logo hints";
        column-gap: 10px;
    }

    .menu[b-lde5fhd9m0] {
        flex-direction: column;
        max-width: 190px;
    }

    .logo-panel[b-lde5fhd9m0] {
        width: 215px;
        height: 164px;
    }

    .glass[b-lde5fhd9m0] {
        height: 59px;
    }

    .logo-img[b-lde5fhd9m0] {
        bottom: 9px;
        width: 175px;
        height: 155px;
    }

    .hints[b-lde5fhd9m0] {
        flex-direction: column;
    }

    .hint[b-lde5fhd9m0] {
        height: 60px;
    }

    .description[b-lde5fhd9m0] {
        width: 230px;
        height: 65px;
        font-size: 11px;
    }

    .logo-name[b-lde5fhd9m0] {
        font-size: 13px;
    }
}

/* ---------- Ask a friend: fallback menu (inside QuizMessageBox) ---------- */

.share-menu[b-lde5fhd9m0] {
    display: flex;
    gap: 16px;
    align-items: center;
    text-align: center;
    white-space: normal;
}

.share-preview[b-lde5fhd9m0] {
    width: 280px;
    max-width: 45%;
    aspect-ratio: 8 / 7;
    flex-shrink: 0;
}

.share-actions[b-lde5fhd9m0] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
}

    .share-actions .img-btn[b-lde5fhd9m0] {
        height: 44px;
    }

.share-intro[b-lde5fhd9m0] {
    margin-bottom: 4px;
}

.share-links[b-lde5fhd9m0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

    .share-links .img-btn[b-lde5fhd9m0] {
        padding: 0 6px;
    }

@media (max-width: 599.98px) {
    .share-menu[b-lde5fhd9m0] {
        flex-direction: column;
    }

    .share-preview[b-lde5fhd9m0] {
        width: 160px;
        max-width: none;
    }

    .share-actions[b-lde5fhd9m0] {
        width: 100%;
    }

    .share-links[b-lde5fhd9m0] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Shared/LeaderboardBox.razor.rz.scp.css */
.status[b-uoaac5in2t] {
    text-align: center;
    font-size: 15px;
}

/* UWP: three columns (Position right-aligned, Name, Score) in a 180px scroll area; here the message box body scrolls. */
.scores[b-uoaac5in2t] {
    width: 100%;
    border-collapse: collapse;
    white-space: normal;
    text-align: left;
    font-size: 15px;
}

    .scores th[b-uoaac5in2t] {
        position: sticky;
        top: -5px;
        padding: 0 8px 6px;
        background: #1b2b3a;
        font-weight: 600;
    }

    .scores td[b-uoaac5in2t] {
        padding: 1px 8px;
    }

    .scores .pos[b-uoaac5in2t] {
        text-align: right;
        width: 1%;
        white-space: nowrap;
    }

    .scores .name[b-uoaac5in2t] {
        overflow-wrap: anywhere;
    }

    .scores .score[b-uoaac5in2t] {
        text-align: right;
        width: 1%;
    }

    /* The player's own row: a bright bar that stands out from the dark box, pulsing briefly when it scrolls into view. */
    .scores tr.mine td[b-uoaac5in2t] {
        background: #ffc400;
        color: #1a1a1a;
        font-weight: 700;
        animation: me-pulse-b-uoaac5in2t 0.6s ease-in-out 3;
    }

        .scores tr.mine td:first-child[b-uoaac5in2t] {
            border-radius: 6px 0 0 6px;
        }

        .scores tr.mine td:last-child[b-uoaac5in2t] {
            border-radius: 0 6px 6px 0;
        }

@keyframes me-pulse-b-uoaac5in2t {
    50% {
        background: #ff6d00;
        color: #fff;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scores tr.mine td[b-uoaac5in2t] {
        animation: none;
    }
}

.retry[b-uoaac5in2t] {
    width: 170px;
    flex-shrink: 0;
}

@media (max-width: 479.98px), (max-height: 399.98px) {
    .scores[b-uoaac5in2t], .status[b-uoaac5in2t] {
        font-size: 12px;
    }

    .retry[b-uoaac5in2t] {
        width: 100px;
        height: 41px;
        font-size: 12px;
    }
}
/* /Components/Shared/QuizMessageBox.razor.rz.scp.css */
/* 440 x 330 like the UWP boxes, shrinking on small screens. A modal <dialog>: in front of everything, centered by
   margin: auto (MudBlazor's reset sets every margin to 0); its default border, padding and colors are replaced.
   Display only when open (the browser hides it until dialog.js opens it). */
.box[b-76nuo4pl9d] {
    flex-direction: column;
    width: 440px;
    max-width: calc(100% - 32px);
    height: 330px;
    max-height: calc(100% - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    overflow: visible;
    background: url("Assets/button400x300.png") center / 100% 100% no-repeat;
    color: #fff;
    animation: pop-in-b-76nuo4pl9d 0.2s ease-out;
}

    .box[open][b-76nuo4pl9d] {
        display: flex;
    }

    .box[b-76nuo4pl9d]::backdrop {
        background: rgba(0, 0, 0, 0.7);
    }

    .box.wide[b-76nuo4pl9d] {
        width: 700px;
        height: 470px;
    }

        .box.wide .body[b-76nuo4pl9d] {
            margin: 10px 10px 0;
            padding: 0;
        }

    .box.congrats[b-76nuo4pl9d] {
        width: 600px;
        height: auto;
        aspect-ratio: 4 / 3;
        background-image: url("Assets/messageboxcongrats.png");
        justify-content: flex-end;
    }

.title[b-76nuo4pl9d] {
    margin: 10px 0 0;
    text-align: center;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.3;
}

.body[b-76nuo4pl9d] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 5px 15px 0;
    padding: 5px;
    text-align: justify;
    white-space: pre-line;
    display: flex;
    flex-direction: column;
}

/* Centered vertically while it fits; when it is taller than the box the auto margins become 0, so it scrolls from its top.
   (justify-content: center on .body would push the top out of reach of the scrollbar.) */
.body-content[b-76nuo4pl9d] {
    margin-block: auto;
}

.footer[b-76nuo4pl9d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
}

.close[b-76nuo4pl9d] {
    width: 170px;
    flex-shrink: 0;
}

@keyframes pop-in-b-76nuo4pl9d {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 479.98px), (max-height: 399.98px) {
    .title[b-76nuo4pl9d] {
        font-size: 17px;
    }

    .body[b-76nuo4pl9d] {
        font-size: 12px;
    }

    .close[b-76nuo4pl9d] {
        width: 100px;
        height: 41px;
        font-size: 12px;
    }
}
/* /Components/Shared/SeoShell.razor.rz.scp.css */
/* A splash screen first (the whole window), the rest below it. */

.shell[b-6pm4f6mown] {
    min-height: 100vh;
    padding: 0 16px 48px;
    font-size: 16px;
    line-height: 1.5;
}

.hero[b-6pm4f6mown] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}

.hero-logo[b-6pm4f6mown] {
    width: min(320px, 70vw);
    height: auto;
}

h1[b-6pm4f6mown] {
    margin: 0;
    font-size: clamp(28px, 6vw, 44px);
    font-weight: 600;
}

.tagline[b-6pm4f6mown] {
    max-width: 36em;
    margin: 0;
    font-size: 18px;
}

.play[b-6pm4f6mown] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

    .play .img-btn[b-6pm4f6mown] {
        width: 210px;
    }

.info[b-6pm4f6mown] {
    max-width: 720px;
    margin: 0 auto 32px;
}

h2[b-6pm4f6mown] {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
}

.info ul[b-6pm4f6mown] {
    margin: 0;
    padding-left: 20px;
}

.info .languages[b-6pm4f6mown] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 0;
    list-style: none;
}

    .languages a[b-6pm4f6mown] {
        color: #fff;
    }

        .languages a[aria-current][b-6pm4f6mown] {
            font-weight: 700;
        }