/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Which line shows in which state: the .NET template's classes, switched by Blazor on #components-reconnect-modal. */
.components-reconnect-first-attempt-visible[b-m3wg5kca5s],
.components-reconnect-repeated-attempt-visible[b-m3wg5kca5s],
.components-reconnect-failed-visible[b-m3wg5kca5s],
.components-pause-visible[b-m3wg5kca5s],
.components-resume-failed-visible[b-m3wg5kca5s] {
    display: none;
}

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

/* Blazor keeps "show" while it retries: then only the countdown line, not both. */
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible[b-m3wg5kca5s] {
    display: none;
}

/* The dialog covers the whole screen: a dark veil with the emblem in the middle. */
#components-reconnect-modal[b-m3wg5kca5s] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 16px;
    border: 0;
    color: #eef0f8;
    background: radial-gradient(ellipse at 50% 45%, rgba(8, 40, 56, 0.85), rgba(5, 5, 8, 0.97) 70%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-m3wg5kca5s 0.4s both;
}

    #components-reconnect-modal[open][b-m3wg5kca5s] {
        display: grid;
        place-items: center;
        animation: components-reconnect-modal-fadeInOpacity-b-m3wg5kca5s 0.4s ease-in-out both;
    }

#components-reconnect-modal[b-m3wg5kca5s]::backdrop {
    background: transparent;
}

.components-reconnect-container[b-m3wg5kca5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The emblem dims and stops once there is nothing left to wait for. */
#components-reconnect-modal.components-reconnect-failed .em-ring[b-m3wg5kca5s],
#components-reconnect-modal.components-reconnect-resume-failed .em-ring[b-m3wg5kca5s],
#components-reconnect-modal.components-reconnect-paused .em-ring[b-m3wg5kca5s] {
    animation-play-state: paused;
    opacity: 0.4;
}

.rc-brand[b-m3wg5kca5s] {
    margin-top: -4px;
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
    font-weight: 900;
    font-size: 34px;
    letter-spacing: 8px;
    padding-left: 8px;
    color: #eef0f8;
    text-shadow: 0 0 6px #23f2ff, 0 0 22px rgba(35, 242, 255, 0.7), 0 0 44px rgba(35, 242, 255, 0.4);
}

.rc-button[b-m3wg5kca5s] {
    margin-top: 6px;
    padding: 14px 34px;
    border-radius: 999px;
    border: 1px solid rgba(35, 242, 255, 0.6);
    cursor: pointer;
    color: #fff;
    font-family: 'Orbitron', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(35, 242, 255, 0.35), rgba(168, 85, 255, 0.35));
    box-shadow: 0 0 14px rgba(35, 242, 255, 0.5), 0 0 34px rgba(35, 242, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 0 6px rgba(35, 242, 255, 0.6);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

    .rc-button:hover[b-m3wg5kca5s] {
        box-shadow: 0 0 20px rgba(35, 242, 255, 0.7), 0 0 44px rgba(35, 242, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    .rc-button:active[b-m3wg5kca5s] {
        transform: scale(0.97);
    }

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

@media (max-width: 560px) {
    .rc-brand[b-m3wg5kca5s] {
        font-size: 28px;
        letter-spacing: 6px;
    }
}
/* /Components/Pages/Games.razor.rz.scp.css */
.games-list[b-bi82btqn3p] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.game-card[b-bi82btqn3p] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
    background: color-mix(in srgb, var(--c) 7%, #07070d);
    box-shadow: 0 0 14px color-mix(in srgb, var(--c) 20%, transparent);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.2s;
}

.game-card:hover[b-bi82btqn3p] {
    box-shadow: 0 0 28px color-mix(in srgb, var(--c) 50%, transparent);
    transform: translateY(-2px);
}

.game-art[b-bi82btqn3p] {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
}

.game-art svg[b-bi82btqn3p] {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent));
}

.game-art path[b-bi82btqn3p] {
    stroke-width: 1.5;
}

.game-art-hub[b-bi82btqn3p] {
    fill: #07070d;
    stroke: var(--cyan);
    stroke-width: 2;
}

.game-art-pointer[b-bi82btqn3p] {
    fill: var(--magenta);
    stroke: #fff !important;
    stroke-width: 1 !important;
}

.game-art-pad[b-bi82btqn3p] {
    fill: rgba(35, 242, 255, 0.25);
}

.game-art-ring[b-bi82btqn3p] {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 70 100;
    transform: rotate(-90deg);
    transform-origin: 38px 58px;
}

.game-art-trap[b-bi82btqn3p] {
    fill: rgba(255, 59, 74, 0.35);
    stroke: var(--red);
    stroke-width: 2;
}

.game-art-cross[b-bi82btqn3p] {
    stroke: #fff !important;
    stroke-width: 3 !important;
    stroke-linecap: round;
}

.game-art-frame[b-bi82btqn3p] {
    fill: #040407;
    stroke: var(--magenta);
    stroke-width: 3;
}

.game-art-line[b-bi82btqn3p] {
    stroke: var(--magenta) !important;
    stroke-width: 3 !important;
}

.game-art-sym[b-bi82btqn3p] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 30px;
    text-anchor: middle;
}

.game-text[b-bi82btqn3p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.game-title[b-bi82btqn3p] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.5px;
    color: var(--c);
    text-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent);
}

.game-desc[b-bi82btqn3p] {
    font-size: 15px;
    line-height: 1.35;
    color: var(--text);
}

.game-meta[b-bi82btqn3p] {
    font-size: 13px;
    color: var(--text-dim);
}

.games-note[b-bi82btqn3p] {
    margin-top: 22px;
    font-size: 13px;
    color: var(--text-dim);
}

@media (max-width: 420px) {
    .game-card[b-bi82btqn3p] {
        gap: 14px;
        padding: 14px;
    }

    .game-art[b-bi82btqn3p] {
        width: 64px;
        height: 64px;
    }
}

.game-art-card[b-bi82btqn3p] {
    fill: #0a0910;
    stroke: var(--amber);
    stroke-width: 3;
}

.game-art-coat[b-bi82btqn3p] {
    fill: #9d9db8;
}

/* A scratched stripe through the coat, with the prize showing in it. */
.game-art-scratch[b-bi82btqn3p] {
    fill: none;
    stroke: #07070d !important;
    stroke-width: 16 !important;
    stroke-linecap: round;
}

.game-art-prize[b-bi82btqn3p] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    text-anchor: middle;
    fill: var(--magenta);
}

.game-art-label[b-bi82btqn3p] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 1px;
    text-anchor: middle;
    fill: var(--amber);
}

.game-art-card-back[b-bi82btqn3p] {
    fill: #0c0a16;
    stroke: var(--purple);
    stroke-width: 2.5;
}

.game-art-card-front[b-bi82btqn3p] {
    fill: #07070d;
    stroke: var(--magenta);
    stroke-width: 2.5;
}

.game-art-rank[b-bi82btqn3p] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 24px;
    text-anchor: middle;
    fill: var(--magenta);
}

.game-art-up[b-bi82btqn3p] {
    fill: var(--green);
    stroke: none !important;
}

/* Overload */
.game-art-word[b-bi82btqn3p] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 26px;
    text-anchor: middle;
}

/* A test game: dashed frame and a TEST badge, so nobody expects it to count. */
.game-card-test[b-bi82btqn3p] {
    border-style: dashed;
}

.game-test-badge[b-bi82btqn3p] {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 6px;
    border: 1px solid var(--amber);
    font-size: 11px;
    letter-spacing: 1.5px;
    vertical-align: 2px;
    color: var(--amber);
    text-shadow: none;
}

/* "Coming soon": test games, kept apart from the real ones. */
.games-soon-title[b-bi82btqn3p] {
    margin: 40px 0 4px;
    padding-top: 26px;
    border-top: 1px dashed var(--panel-border);
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--amber);
    text-shadow: 0 0 8px rgba(255, 178, 62, 0.5);
}

.games-soon-sub[b-bi82btqn3p] {
    margin: 0;
    font-size: 14px;
    color: var(--text-dim);
}

/* Minesweeper card: a 3×3 corner of the board, one mine, two safe cells. */
.game-art-closed-cell[b-bi82btqn3p] {
    fill: #0c0a16;
    stroke: var(--purple);
    stroke-width: 1.5;
    opacity: 0.8;
}

.game-art-safe-cell[b-bi82btqn3p] {
    fill: rgba(57, 255, 176, 0.12);
    stroke: var(--green);
    stroke-width: 1.5;
}

.game-art-mine-cell[b-bi82btqn3p] {
    fill: rgba(255, 59, 74, 0.25);
    stroke: var(--red);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 4px var(--red));
}

.game-art-mine[b-bi82btqn3p] {
    fill: var(--red);
}

.game-art .game-art-mine-spikes[b-bi82btqn3p] {
    stroke: var(--red);
    stroke-width: 2;
    stroke-linecap: round;
}

.game-art .game-art-check[b-bi82btqn3p] {
    fill: none;
    stroke: var(--green);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* /Components/Pages/HiLo.razor.rz.scp.css */
.hilo-page[b-byavravcf5] {
    text-align: center;
    --card-w: 140px;
    --card-h: 196px;
}

/* ---- Ladder ---- */

.hilo-ladder[b-byavravcf5] {
    list-style: none;
    width: min(100%, 360px);
    margin: 22px auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hilo-ladder li[b-byavravcf5] {
    display: grid;
    grid-template-columns: 28px auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-dim);
    font-size: 14px;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.hilo-ladder-n[b-byavravcf5] {
    font-family: var(--font-display);
    font-weight: 700;
}

.hilo-ladder-cash[b-byavravcf5] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    text-align: left;
    min-width: 70px;
    white-space: nowrap;
}

.hilo-ladder-risk[b-byavravcf5] {
    text-align: right;
    font-size: 13px;
}

.hilo-ladder li.reached[b-byavravcf5] {
    color: var(--green);
    border-color: rgba(57, 255, 176, 0.35);
}

.hilo-ladder li.current[b-byavravcf5] {
    background: rgba(57, 255, 176, 0.12);
    border-color: var(--green);
    box-shadow: 0 0 14px rgba(57, 255, 176, 0.4);
}

.hilo-ladder li.current .hilo-ladder-cash[b-byavravcf5] {
    text-shadow: 0 0 8px var(--green);
}

.hilo-ladder li.next[b-byavravcf5] {
    border-color: rgba(255, 178, 62, 0.55);
    color: var(--text);
}

/* ---- Table ---- */

.hilo-table[b-byavravcf5] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
    margin-top: 26px;
    perspective: 900px;
}

.hilo-deck[b-byavravcf5] {
    position: relative;
    width: calc(var(--card-w) * 0.72);
    height: calc(var(--card-h) * 0.72);
}

.hilo-deck .hl-back[b-byavravcf5] {
    position: absolute;
    inset: 0;
    border-radius: 10px;
}

.hilo-deck .hl-back:nth-child(2)[b-byavravcf5] {
    transform: translate(-3px, -3px);
}

.hilo-deck .hl-back:nth-child(3)[b-byavravcf5] {
    transform: translate(-6px, -6px);
}

.hilo-deck-count[b-byavravcf5] {
    position: absolute;
    left: 50%;
    bottom: -24px;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-dim);
}

.hilo-slot[b-byavravcf5] {
    position: relative;
    width: var(--card-w);
    height: var(--card-h);
}

/* Card faces are built by hi-lo.js, so they need ::deep to get these styles. */
.hilo-page[b-byavravcf5]  .hl-card {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.56s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.hilo-page[b-byavravcf5]  .hl-card.down {
    transform: rotateY(180deg);
}

.hilo-page[b-byavravcf5]  .hl-card.enter {
    transform: translateX(calc(var(--card-w) * -1.2)) rotateY(180deg) scale(0.75);
}

.hilo-page[b-byavravcf5]  .hl-face {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hilo-page[b-byavravcf5]  .hl-front {
    --s: var(--cyan);
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--s) 12%, #0b0b14), #06060b 80%);
    border: 2px solid var(--s);
    box-shadow: 0 0 16px color-mix(in srgb, var(--s) 45%, transparent);
    color: var(--s);
    text-shadow: 0 0 8px var(--s);
}

.hilo-page[b-byavravcf5]  .hl-front.red {
    --s: var(--magenta);
}

.hilo-page[b-byavravcf5]  .hl-corner {
    position: absolute;
    left: 10px;
    top: 8px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    line-height: 1.05;
    text-align: center;
}

.hilo-page[b-byavravcf5]  .hl-corner-br {
    left: auto;
    top: auto;
    right: 10px;
    bottom: 8px;
    transform: rotate(180deg);
}

.hilo-page[b-byavravcf5]  .hl-pip {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: calc(var(--card-w) * 0.42);
}

.hilo-page[b-byavravcf5]  .hl-back {
    border: 2px solid var(--purple);
    background:
        repeating-linear-gradient(45deg, rgba(168, 85, 255, 0.22) 0 6px, transparent 6px 12px),
        repeating-linear-gradient(-45deg, rgba(255, 43, 214, 0.14) 0 6px, transparent 6px 12px),
        #0c0a16;
    box-shadow: 0 0 12px rgba(168, 85, 255, 0.45), inset 0 0 0 5px #0c0a16, inset 0 0 0 6px rgba(168, 85, 255, 0.5);
}

/* The back face of a dealt card sits behind its front until the card flips. */
.hilo-page[b-byavravcf5]  .hl-face.hl-back {
    transform: rotateY(180deg);
}

.hilo-page[b-byavravcf5]  .hl-card.good .hl-front {
    animation: hilo-good-b-byavravcf5 0.7s ease-out;
}

.hilo-page[b-byavravcf5]  .hl-card.bad .hl-front {
    border-color: var(--red);
    animation: hilo-bad-b-byavravcf5 0.45s ease-in-out;
}

@keyframes hilo-good-b-byavravcf5 {
    30% { box-shadow: 0 0 40px var(--green); border-color: var(--green); }
}

@keyframes hilo-bad-b-byavravcf5 {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.hilo-history[b-byavravcf5] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 26px;
    margin-top: 34px;
}

.hilo-page[b-byavravcf5]  .hl-chip {
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid currentColor;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--cyan);
    opacity: 0.75;
}

.hilo-page[b-byavravcf5]  .hl-chip.red {
    color: var(--magenta);
}

/* ---- Controls ---- */

.hilo-status[b-byavravcf5] {
    margin-top: 16px;
    min-height: 22px;
    font-size: 15px;
    color: var(--text-dim);
}

.hilo-status.good[b-byavravcf5] {
    color: var(--green);
}

.hilo-status.bad[b-byavravcf5] {
    color: var(--red);
}

.hilo-controls[b-byavravcf5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: min(100%, 360px);
    margin: 14px auto 0;
}

.hilo-btn[b-byavravcf5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border-radius: 14px;
    border: 2px solid var(--b);
    background: color-mix(in srgb, var(--b) 10%, #07070d);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 17px;
    letter-spacing: 1px;
    text-shadow: 0 0 6px var(--b);
    box-shadow: 0 0 12px color-mix(in srgb, var(--b) 40%, transparent);
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s, opacity 0.2s;
}

.hilo-btn small[b-byavravcf5] {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 13px;
    color: var(--text-dim);
    text-shadow: none;
}

.hilo-hi[b-byavravcf5] {
    --b: var(--cyan);
}

.hilo-lo[b-byavravcf5] {
    --b: var(--purple);
}

.hilo-btn:hover:not(:disabled)[b-byavravcf5] {
    box-shadow: 0 0 24px color-mix(in srgb, var(--b) 70%, transparent);
}

.hilo-btn:active:not(:disabled)[b-byavravcf5] {
    transform: scale(0.97);
}

.hilo-btn:disabled[b-byavravcf5],
.hilo-cash:disabled[b-byavravcf5] {
    opacity: 0.4;
    cursor: default;
}

.hilo-cash[b-byavravcf5] {
    grid-column: 1 / -1;
    padding: 12px;
    border-radius: 14px;
    border: 2px solid var(--green);
    background: rgba(57, 255, 176, 0.08);
    color: var(--green);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1px;
    text-shadow: 0 0 6px var(--green);
    cursor: pointer;
}

/* ---- Result ---- */

.hilo-result[b-byavravcf5] {
    margin-top: 18px;
}

.hilo-result-amount[b-byavravcf5] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 56px;
    animation: hilo-result-in-b-byavravcf5 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.hilo-result-amount.win[b-byavravcf5] {
    color: var(--green);
    text-shadow: 0 0 10px var(--green), 0 0 30px var(--green);
}

.hilo-result-amount.lose[b-byavravcf5] {
    color: var(--magenta);
    text-shadow: 0 0 10px var(--magenta), 0 0 30px var(--magenta);
}

@keyframes hilo-result-in-b-byavravcf5 {
    from { transform: scale(0.6); opacity: 0; }
}

.hilo-result-text[b-byavravcf5] {
    margin: 8px 0 18px;
    font-size: 17px;
}

.hilo-note[b-byavravcf5] {
    margin-top: 22px;
    font-size: 13px;
    color: var(--text-dim);
}

@media (max-width: 420px) {
    .hilo-page[b-byavravcf5] {
        --card-w: 116px;
        --card-h: 162px;
    }

    .hilo-table[b-byavravcf5] {
        gap: 24px;
    }
}

/* Coin prizes on the top steps, in the cash-out button and in the result. */
.hilo-ladder-coins[b-byavravcf5],
.hilo-result-coins[b-byavravcf5] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    color: var(--amber);
}

.hilo-page[b-byavravcf5]  .hilo-coin {
    width: 0.9em;
    height: 0.9em;
    color: var(--amber);
    vertical-align: -0.1em;
    filter: drop-shadow(0 0 4px rgba(255, 178, 62, 0.6));
}

/* Only the Deal button: the two-column grid above would push it into the left column. */
.hilo-controls-one[b-byavravcf5] {
    display: flex;
    justify-content: center;
}
/* /Components/Pages/Hold.razor.rz.scp.css */
.hold-page[b-s38ccup97b] {
    text-align: center;
}

/* ---- Stake picker ---- */

.hold-stakes[b-s38ccup97b] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 26px;
}

.hold-stake[b-s38ccup97b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 8px 16px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
    background: color-mix(in srgb, var(--c) 10%, #07070d);
    color: var(--text);
    font-family: var(--font-body);
    cursor: pointer;
    box-shadow: 0 0 14px color-mix(in srgb, var(--c) 25%, transparent);
    transition: transform 0.15s, box-shadow 0.2s;
}

.hold-stake:hover[b-s38ccup97b] {
    box-shadow: 0 0 26px color-mix(in srgb, var(--c) 55%, transparent);
}

.hold-stake:active[b-s38ccup97b] {
    transform: scale(0.97);
}

.hold-stake-amount[b-s38ccup97b] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 30px;
    color: var(--c);
    text-shadow: 0 0 8px var(--c);
}

.hold-stake-amount small[b-s38ccup97b] {
    font-size: 18px;
    margin-left: 2px;
}

.hold-stake-time[b-s38ccup97b] {
    font-size: 16px;
    font-weight: 600;
}

.hold-stake-note[b-s38ccup97b] {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.2;
}

.hold-rules[b-s38ccup97b] {
    margin: 28px auto 0;
    padding: 0 0 0 18px;
    max-width: 440px;
    text-align: left;
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1.6;
}

.hold-red[b-s38ccup97b] {
    color: var(--red);
    text-shadow: 0 0 6px var(--red);
}

/* ---- Game ---- */

.hold-hud[b-s38ccup97b] {
    margin-top: 10px;
}

.hold-hud-stake[b-s38ccup97b] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 1px;
}

.hold-hud-clock[b-s38ccup97b] {
    font-family: var(--font-mono);
    font-size: 46px;
    color: var(--text);
    text-shadow: 0 0 8px var(--cyan), 0 0 22px rgba(35, 242, 255, 0.5);
    line-height: 1.1;
}

.hold-hud-bar[b-s38ccup97b] {
    height: 4px;
    margin: 8px auto 0;
    max-width: 320px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.hold-hud-bar div[b-s38ccup97b] {
    height: 100%;
    width: 0;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}

.hold-hud-status[b-s38ccup97b] {
    margin-top: 10px;
    min-height: 24px;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--text-dim);
}

.hold-hud-status.warn[b-s38ccup97b] {
    color: var(--amber);
    text-shadow: 0 0 8px var(--amber);
}

.hold-hud-status.bad[b-s38ccup97b] {
    color: var(--red);
    text-shadow: 0 0 8px var(--red);
}

/* touch-action/user-select: no scrolling, zooming, text selection or long-press menu while a finger is down. */
.hold-arena[b-s38ccup97b] {
    position: relative;
    height: min(62vh, 560px);
    min-height: 340px;
    margin-top: 14px;
    border-radius: 18px;
    border: 1px solid var(--panel-border);
    background:
        radial-gradient(circle at 50% 50%, rgba(168, 85, 255, 0.08), transparent 70%),
        rgba(255, 255, 255, 0.02);
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.hold-pad[b-s38ccup97b] {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 38%, rgba(35, 242, 255, 0.35), rgba(35, 242, 255, 0.08) 70%);
    box-shadow: 0 0 18px rgba(35, 242, 255, 0.6), inset 0 0 16px rgba(35, 242, 255, 0.35);
    cursor: pointer;
    z-index: 2;
}

.hold-pad svg[b-s38ccup97b] {
    position: absolute;
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    transform: rotate(-90deg);
    pointer-events: none;
    overflow: visible; /* otherwise the ring's glow is clipped to a square */
}

.hold-pad-track[b-s38ccup97b] {
    fill: none;
    stroke: rgba(35, 242, 255, 0.25);
    stroke-width: 3;
}

.hold-pad-ring[b-s38ccup97b] {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 4px var(--cyan));
}

.hold-pad span[b-s38ccup97b] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 17px;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 8px var(--cyan);
    pointer-events: none;
}

.hold-pad.ready[b-s38ccup97b] {
    animation: hold-pulse-b-s38ccup97b 1.4s ease-in-out infinite;
}

@keyframes hold-pulse-b-s38ccup97b {
    50% { box-shadow: 0 0 34px rgba(35, 242, 255, 0.9), inset 0 0 20px rgba(35, 242, 255, 0.5); }
}

.hold-pad.check[b-s38ccup97b] {
    background: radial-gradient(circle at 50% 38%, rgba(255, 178, 62, 0.45), rgba(255, 178, 62, 0.1) 70%);
    box-shadow: 0 0 24px rgba(255, 178, 62, 0.85), inset 0 0 16px rgba(255, 178, 62, 0.4);
}

.hold-pad.check .hold-pad-ring[b-s38ccup97b] {
    stroke: var(--amber);
    filter: drop-shadow(0 0 5px var(--amber));
}

.hold-pad.failed[b-s38ccup97b] {
    background: radial-gradient(circle at 50% 38%, rgba(255, 59, 74, 0.4), rgba(255, 59, 74, 0.08) 70%);
    box-shadow: 0 0 24px rgba(255, 59, 74, 0.8);
}

.hold-trap[b-s38ccup97b] {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 59, 74, 0.55), rgba(255, 59, 74, 0.15) 70%);
    border: 2px solid var(--red);
    box-shadow: 0 0 22px rgba(255, 59, 74, 0.85);
    animation: hold-trap-in-b-s38ccup97b 0.18s ease-out, hold-trap-blink-b-s38ccup97b 0.5s ease-in-out 0.18s infinite alternate;
    z-index: 1;
}

.hold-trap[b-s38ccup97b]::before,
.hold-trap[b-s38ccup97b]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46%;
    height: 4px;
    margin: -2px 0 0 -23%;
    border-radius: 2px;
    background: #fff;
    transform: rotate(45deg);
}

.hold-trap[b-s38ccup97b]::after {
    transform: rotate(-45deg);
}

@keyframes hold-trap-in-b-s38ccup97b {
    from { scale: 0.2; opacity: 0; }
}

@keyframes hold-trap-blink-b-s38ccup97b {
    to { box-shadow: 0 0 36px rgba(255, 59, 74, 1); }
}

.hold-giveup[b-s38ccup97b] {
    margin-top: 16px;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 15px;
    cursor: pointer;
}

/* ---- Result ---- */

.hold-result[b-s38ccup97b] {
    margin-top: 40px;
}

.hold-result-amount[b-s38ccup97b] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 64px;
    animation: hold-result-in-b-s38ccup97b 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.hold-result-amount.win[b-s38ccup97b] {
    color: var(--green);
    text-shadow: 0 0 10px var(--green), 0 0 30px var(--green);
}

.hold-result-amount.lose[b-s38ccup97b] {
    color: var(--magenta);
    text-shadow: 0 0 10px var(--magenta), 0 0 30px var(--magenta);
}

@keyframes hold-result-in-b-s38ccup97b {
    from { transform: scale(0.6); opacity: 0; }
}

.hold-result-text[b-s38ccup97b] {
    margin-top: 10px;
    font-size: 18px;
    color: var(--text);
}

.hold-result-note[b-s38ccup97b] {
    margin: 14px 0 24px;
    font-size: 13px;
    color: var(--text-dim);
}

@media (max-width: 420px) {
    .hold-stakes[b-s38ccup97b] {
        gap: 8px;
    }

    .hold-stake-amount[b-s38ccup97b] {
        font-size: 24px;
    }
}

/* Room for the sticky top bar when the game scrolls into view. */
#hold-game[b-s38ccup97b] {
    scroll-margin-top: 72px;
}

/* Coin prize of a stake (on the pick cards) and of a win (in the result). */
.hold-stake-coins[b-s38ccup97b],
.hold-page[b-s38ccup97b]  .hold-result-coins {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--amber);
    font-weight: 700;
}

.hold-page[b-s38ccup97b]  .hold-coin {
    width: 0.95em;
    height: 0.95em;
    color: var(--amber);
    filter: drop-shadow(0 0 4px rgba(255, 178, 62, 0.6));
}
/* /Components/Pages/Mines.razor.rz.scp.css */
.mines-page[b-3cpq2ozvye] {
    text-align: center;
}

/* ---- Board ---- */

.mines-board[b-3cpq2ozvye] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: min(100%, 340px);
    margin: 24px auto 0;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.02);
}

.mines-board.boom[b-3cpq2ozvye] {
    animation: mines-shake-b-3cpq2ozvye 0.45s ease-in-out;
    border-color: var(--red);
    box-shadow: 0 0 26px rgba(255, 59, 74, 0.35);
}

@keyframes mines-shake-b-3cpq2ozvye {
    20%, 60% { transform: translateX(-7px); }
    40%, 80% { transform: translateX(7px); }
}

.mines-cell[b-3cpq2ozvye] {
    --b: var(--purple);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--b) 70%, transparent);
    background:
        repeating-linear-gradient(45deg, rgba(168, 85, 255, 0.14) 0 5px, transparent 5px 10px),
        #0c0a16;
    box-shadow: 0 0 10px color-mix(in srgb, var(--b) 30%, transparent);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}

.mines-cell:disabled[b-3cpq2ozvye] {
    cursor: default;
}

.mines-cell.hidden:not(:disabled):hover[b-3cpq2ozvye] {
    border-color: var(--cyan);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.45);
}

.mines-cell.hidden:not(:disabled):active[b-3cpq2ozvye] {
    transform: scale(0.94);
}

/* Before the game starts the closed board just waits. */
.mines-cell.hidden:disabled[b-3cpq2ozvye] {
    opacity: 0.55;
}

.mines-cell svg[b-3cpq2ozvye] {
    width: 58%;
    height: 58%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.mines-cell.safe[b-3cpq2ozvye] {
    --b: var(--green);
    color: var(--green);
    background: radial-gradient(circle, rgba(57, 255, 176, 0.16), #06060b 75%);
    filter: drop-shadow(0 0 6px rgba(57, 255, 176, 0.5));
    animation: mines-open-b-3cpq2ozvye 0.35s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.mines-cell.mine[b-3cpq2ozvye] {
    --b: var(--red);
    color: var(--red);
    background: #0c0709;
    opacity: 0.7;
    animation: mines-open-b-3cpq2ozvye 0.35s ease-out;
}

.mines-cell.mine svg circle[b-3cpq2ozvye] {
    fill: currentColor;
}

.mines-cell.exploded[b-3cpq2ozvye] {
    opacity: 1;
    background: radial-gradient(circle, rgba(255, 59, 74, 0.45), #120608 75%);
    box-shadow: 0 0 28px var(--red);
    animation: mines-boom-b-3cpq2ozvye 0.5s ease-out;
}

/* Safe cells nobody opened, once the game is over. */
.mines-cell.spent[b-3cpq2ozvye] {
    opacity: 0.25;
}

@keyframes mines-open-b-3cpq2ozvye {
    from { transform: scale(0.6) rotateY(90deg); }
}

@keyframes mines-boom-b-3cpq2ozvye {
    0% { transform: scale(0.6); }
    40% { transform: scale(1.15); }
}

/* ---- Status, controls, result ---- */

.mines-status[b-3cpq2ozvye] {
    margin-top: 16px;
    min-height: 22px;
    font-size: 15px;
    color: var(--text-dim);
}

.mines-status.good[b-3cpq2ozvye] {
    color: var(--green);
}

.mines-status.bad[b-3cpq2ozvye] {
    color: var(--red);
}

.mines-controls[b-3cpq2ozvye] {
    width: min(100%, 340px);
    margin: 14px auto 0;
}

.mines-cash[b-3cpq2ozvye] {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    border: 2px solid var(--green);
    background: rgba(57, 255, 176, 0.08);
    color: var(--green);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1px;
    text-shadow: 0 0 6px var(--green);
    cursor: pointer;
}

.mines-cash:disabled[b-3cpq2ozvye] {
    opacity: 0.4;
    cursor: default;
}

.mines-result[b-3cpq2ozvye] {
    margin-top: 18px;
}

.mines-result-amount[b-3cpq2ozvye] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 56px;
    animation: mines-result-in-b-3cpq2ozvye 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.mines-result-amount.win[b-3cpq2ozvye] {
    color: var(--green);
    text-shadow: 0 0 10px var(--green), 0 0 30px var(--green);
}

.mines-result-amount.lose[b-3cpq2ozvye] {
    color: var(--magenta);
    text-shadow: 0 0 10px var(--magenta), 0 0 30px var(--magenta);
}

@keyframes mines-result-in-b-3cpq2ozvye {
    from { transform: scale(0.6); opacity: 0; }
}

.mines-result-text[b-3cpq2ozvye] {
    margin: 8px 0 18px;
    font-size: 17px;
}

/* ---- Ladder ---- */

.mines-ladder[b-3cpq2ozvye] {
    list-style: none;
    width: min(100%, 340px);
    margin: 26px auto 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mines-ladder li[b-3cpq2ozvye] {
    display: grid;
    grid-template-columns: 28px auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-dim);
    font-size: 14px;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.mines-ladder-n[b-3cpq2ozvye] {
    font-family: var(--font-display);
    font-weight: 700;
}

.mines-ladder-cash[b-3cpq2ozvye] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    text-align: left;
    min-width: 70px;
    white-space: nowrap;
}

.mines-ladder-risk[b-3cpq2ozvye] {
    text-align: right;
    font-size: 13px;
}

.mines-ladder li.reached[b-3cpq2ozvye] {
    color: var(--green);
    border-color: rgba(57, 255, 176, 0.35);
}

.mines-ladder li.current[b-3cpq2ozvye] {
    background: rgba(57, 255, 176, 0.12);
    border-color: var(--green);
    box-shadow: 0 0 14px rgba(57, 255, 176, 0.4);
}

.mines-ladder li.current .mines-ladder-cash[b-3cpq2ozvye] {
    text-shadow: 0 0 8px var(--green);
}

.mines-ladder li.next[b-3cpq2ozvye] {
    border-color: rgba(255, 178, 62, 0.55);
    color: var(--text);
}

/* Coin prizes on the top steps, in the cash-out button and in the result. */
.mines-coins[b-3cpq2ozvye] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    color: var(--amber);
}

.mines-page[b-3cpq2ozvye]  .mines-coin {
    width: 0.9em;
    height: 0.9em;
    color: var(--amber);
    vertical-align: -0.1em;
    filter: drop-shadow(0 0 4px rgba(255, 178, 62, 0.6));
}
/* /Components/Pages/Overload.razor.rz.scp.css */
.overload-page[b-iub6c1fjka] {
    text-align: center;
    /* The four game colours: plain, easy to tell apart at a glance, close to the site's neon. */
    --ov-red: #ff3b4a;
    --ov-blue: #3d7bff;
    --ov-green: #39ffb0;
    --ov-yellow: #ffe03e;
    --ov-purple: #b15cff;
    --ov-orange: #ff8a2b;
}

/* ---- Level picker (same look as the endurance test's stakes) ---- */

.ov-levels[b-iub6c1fjka] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 26px;
}

.ov-level[b-iub6c1fjka] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 8px 16px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
    background: color-mix(in srgb, var(--c) 10%, #07070d);
    color: var(--text);
    font-family: var(--font-body);
    cursor: pointer;
    box-shadow: 0 0 14px color-mix(in srgb, var(--c) 25%, transparent);
    transition: transform 0.15s, box-shadow 0.2s;
}

.ov-level:hover[b-iub6c1fjka] {
    box-shadow: 0 0 26px color-mix(in srgb, var(--c) 55%, transparent);
}

.ov-level:active[b-iub6c1fjka] {
    transform: scale(0.97);
}

.ov-level-amount[b-iub6c1fjka] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 30px;
    color: var(--c);
    text-shadow: 0 0 8px var(--c);
}

.ov-level-amount small[b-iub6c1fjka] {
    font-size: 18px;
    margin-left: 2px;
}

.ov-level-target[b-iub6c1fjka] {
    font-size: 16px;
    font-weight: 600;
}

.ov-level-bill[b-iub6c1fjka] {
    font-size: 13px;
    color: var(--magenta);
    line-height: 1.25;
}

.ov-level-note[b-iub6c1fjka] {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.2;
}

.ov-rules[b-iub6c1fjka] {
    margin: 28px auto 0;
    padding: 0 0 0 18px;
    max-width: 460px;
    text-align: left;
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1.6;
}

.ov-rules b[b-iub6c1fjka] {
    color: var(--text);
}

.ov-demo[b-iub6c1fjka] {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: 1px;
}

.ov-preview[b-iub6c1fjka] {
    margin-top: 22px;
    font-size: 13px;
    color: var(--text-dim);
}

/* ---- Game ---- */

.ov-hud[b-iub6c1fjka] {
    margin-top: 6px;
}

.ov-hud-row[b-iub6c1fjka] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ov-clock[b-iub6c1fjka] {
    font-family: var(--font-mono);
    font-size: 34px;
    color: var(--cyan);
    text-shadow: 0 0 10px var(--cyan);
    min-width: 90px;
    text-align: left;
}

.ov-clock.low[b-iub6c1fjka] {
    color: var(--red);
    text-shadow: 0 0 10px var(--red);
    animation: ov-blink-b-iub6c1fjka 0.6s steps(2) infinite;
}

@keyframes ov-blink-b-iub6c1fjka {
    50% { opacity: 0.55; }
}

.ov-progress[b-iub6c1fjka] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    color: var(--text);
}

/* The bill that lands on the lock if the target isn't reached. */
.ov-bill[b-iub6c1fjka] {
    font-family: var(--font-mono);
    font-size: 24px;
    color: var(--magenta);
    text-shadow: 0 0 8px var(--magenta);
    min-width: 90px;
    text-align: right;
}

.ov-bar[b-iub6c1fjka] {
    height: 6px;
    margin-top: 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.ov-bar div[b-iub6c1fjka] {
    height: 100%;
    background: linear-gradient(90deg, var(--magenta), var(--cyan));
    box-shadow: 0 0 10px var(--cyan);
}

.ov-stage[b-iub6c1fjka] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    margin: 18px 0;
    border-radius: 18px;
    border: 1px solid var(--panel-border);
    background: rgba(0, 0, 0, 0.35);
    user-select: none;
}

.ov-stage.shake[b-iub6c1fjka] {
    animation: ov-shake-b-iub6c1fjka 0.35s;
}

@keyframes ov-shake-b-iub6c1fjka {
    20% { transform: translateX(-10px); }
    40% { transform: translateX(9px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(4px); }
}

.ov-word[b-iub6c1fjka] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(44px, 14vw, 76px);
    letter-spacing: 3px;
    text-shadow: 0 0 14px currentColor;
}

.ov-word.in[b-iub6c1fjka] {
    animation: ov-word-in-b-iub6c1fjka 0.18s ease-out;
}

@keyframes ov-word-in-b-iub6c1fjka {
    from { transform: scale(0.8); opacity: 0.2; }
}

.ov-count[b-iub6c1fjka] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 80px;
    color: var(--text);
}

.ov-count.pop[b-iub6c1fjka] {
    animation: ov-pop-b-iub6c1fjka 0.6s ease-out;
}

@keyframes ov-pop-b-iub6c1fjka {
    from { transform: scale(1.6); opacity: 0; }
}

.ov-stage[b-iub6c1fjka]  .ov-penalty {
    position: absolute;
    top: 12px;
    right: 16px;
    font-family: var(--font-mono);
    font-size: 22px;
    color: var(--red);
    text-shadow: 0 0 8px var(--red);
    animation: ov-penalty-b-iub6c1fjka 0.9s ease-out forwards;
}

@keyframes ov-penalty-b-iub6c1fjka {
    to { transform: translateY(-18px); opacity: 0; }
}

.ov-buttons[b-iub6c1fjka] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Colour blocks with the name in dark letters: the colour is what counts, the name only helps. */
.ov-buttons[b-iub6c1fjka]  .ov-btn {
    height: 86px;
    border-radius: 16px;
    border: none;
    background: var(--c);
    color: #07070d;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 2px;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 0 16px color-mix(in srgb, var(--c) 55%, transparent);
    transition: transform 0.08s, filter 0.15s;
}

.ov-buttons[b-iub6c1fjka]  .ov-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.ov-buttons[b-iub6c1fjka]  .ov-btn:disabled {
    filter: saturate(0.3) brightness(0.6);
    cursor: default;
}

.ov-buttons[b-iub6c1fjka]  .ov-btn.good {
    animation: ov-good-b-iub6c1fjka 0.25s;
}

.ov-buttons[b-iub6c1fjka]  .ov-btn.bad {
    animation: ov-bad-b-iub6c1fjka 0.35s;
}

@keyframes ov-good-b-iub6c1fjka {
    50% { box-shadow: 0 0 34px #fff, 0 0 18px var(--c); }
}

@keyframes ov-bad-b-iub6c1fjka {
    50% { box-shadow: 0 0 0 4px var(--red), 0 0 30px var(--red); filter: brightness(0.6); }
}

.ov-giveup[b-iub6c1fjka] {
    margin-top: 22px;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: none;
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
}

/* ---- Result ---- */

.ov-result[b-iub6c1fjka] {
    margin-top: 40px;
}

.ov-result-amount[b-iub6c1fjka] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 64px;
    animation: ov-result-in-b-iub6c1fjka 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.ov-result-amount.win[b-iub6c1fjka] {
    color: var(--green);
    text-shadow: 0 0 10px var(--green), 0 0 30px var(--green);
}

.ov-result-amount.lose[b-iub6c1fjka] {
    color: var(--magenta);
    text-shadow: 0 0 10px var(--magenta), 0 0 30px var(--magenta);
}

@keyframes ov-result-in-b-iub6c1fjka {
    from { transform: scale(0.6); opacity: 0; }
}

.ov-result-text[b-iub6c1fjka] {
    margin: 10px 0 24px;
    font-size: 18px;
    color: var(--text);
}

@media (max-width: 420px) {
    .ov-levels[b-iub6c1fjka] {
        gap: 8px;
    }

    .ov-level[b-iub6c1fjka] {
        padding: 16px 4px 12px;
    }

    .ov-level-amount[b-iub6c1fjka] {
        font-size: 24px;
    }

    .ov-buttons[b-iub6c1fjka]  .ov-btn {
        height: 78px;
    }
}

/* ---- Prototype: level selection, rule switches ---- */

.ov-level.selected[b-iub6c1fjka] {
    outline: 2px solid var(--c);
    outline-offset: 3px;
    box-shadow: 0 0 30px color-mix(in srgb, var(--c) 60%, transparent);
}

.ov-switches[b-iub6c1fjka] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px 16px;
    margin: 22px 0 0;
    padding: 14px 16px 16px;
    border-radius: 14px;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    text-align: left;
}

.ov-switches legend[b-iub6c1fjka] {
    padding: 0 6px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.ov-switch[b-iub6c1fjka] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.ov-switch input[b-iub6c1fjka] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: none;
    accent-color: var(--cyan);
}

.ov-switch-text b[b-iub6c1fjka] {
    display: block;
    font-size: 15px;
    color: var(--text);
}

.ov-switch-text small[b-iub6c1fjka] {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    color: var(--text-dim);
}

.ov-start[b-iub6c1fjka] {
    max-width: 320px;
    margin-top: 18px;
}

/* ---- Rules in play ---- */

.ov-stage[b-iub6c1fjka] {
    flex-direction: column;
    gap: 6px;
}

/* Which one counts for this word: its ink, or what it says. */
.ov-rule[b-iub6c1fjka] {
    padding: 3px 14px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 3px;
}

.ov-rule.ink[b-iub6c1fjka] {
    border: 2px solid var(--cyan);
    color: var(--cyan);
    text-shadow: 0 0 6px var(--cyan);
}

.ov-rule.word[b-iub6c1fjka] {
    border: 2px solid #fff;
    background: #fff;
    color: #07070d;
}

.ov-word-timer[b-iub6c1fjka] {
    width: 60%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.ov-word-timer div[b-iub6c1fjka] {
    width: 100%;
    height: 100%;
    background: var(--amber);
    box-shadow: 0 0 8px var(--amber);
}

.ov-buttons.six[b-iub6c1fjka] {
    grid-template-columns: repeat(3, 1fr);
}

.ov-buttons.six[b-iub6c1fjka]  .ov-btn {
    height: 74px;
    font-size: 15px;
    letter-spacing: 1px;
}

/* Word buttons: no colour to match, only the name (in white, or in a lying colour). */
.ov-buttons.words[b-iub6c1fjka]  .ov-btn {
    background: #1a1a26;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: none;
}

.ov-test-badge[b-iub6c1fjka] {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 7px;
    border: 1px solid var(--amber);
    font-size: 13px;
    letter-spacing: 2px;
    vertical-align: 6px;
    color: var(--amber);
    text-shadow: none;
}
/* /Components/Pages/ScratchCard.razor.rz.scp.css */
.scratch-page[b-tcgvx92gku] {
    text-align: center;
}

.scratch-card[b-tcgvx92gku] {
    width: min(100%, 380px);
    margin: 26px auto 0;
    padding: 0 16px 14px;
    border-radius: 22px;
    border: 2px solid var(--amber);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 178, 62, 0.16), transparent 60%),
        #0a0910;
    box-shadow: 0 0 22px rgba(255, 178, 62, 0.4), inset 0 0 26px rgba(255, 178, 62, 0.08);
    transition: box-shadow 0.4s;
}

.scratch-card.done[b-tcgvx92gku] {
    box-shadow: 0 0 34px rgba(255, 178, 62, 0.7), inset 0 0 30px rgba(255, 178, 62, 0.14);
}

.scratch-head[b-tcgvx92gku] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 2px 12px;
}

.scratch-brand[b-tcgvx92gku] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 3px;
    color: #fff;
    text-shadow: 0 0 6px var(--amber), 0 0 18px var(--amber);
}

.scratch-rule[b-tcgvx92gku] {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--amber);
}

.scratch-field[b-tcgvx92gku] {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 178, 62, 0.45);
}

.scratch-grid[b-tcgvx92gku] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 178, 62, 0.25);
}

.scratch-cell[b-tcgvx92gku] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #07070d;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(20px, 7vw, 28px);
    transition: opacity 0.5s, background 0.5s;
}

.scratch-cell.plus[b-tcgvx92gku] {
    color: var(--magenta);
    text-shadow: 0 0 8px var(--magenta);
}

.scratch-cell.minus[b-tcgvx92gku] {
    color: var(--green);
    text-shadow: 0 0 8px var(--green);
}

.scratch-cell.dim[b-tcgvx92gku] {
    opacity: 0.3;
}

.scratch-cell.win[b-tcgvx92gku] {
    animation: scratch-win-b-tcgvx92gku 0.55s ease-in-out infinite alternate;
}

.scratch-cell.win.plus[b-tcgvx92gku] {
    --w: var(--magenta);
}

.scratch-cell.win.minus[b-tcgvx92gku] {
    --w: var(--green);
}

.scratch-cell.win span[b-tcgvx92gku] {
    color: #fff;
}

@keyframes scratch-win-b-tcgvx92gku {
    from { background: #07070d; }
    to { background: color-mix(in srgb, var(--w) 30%, #07070d); }
}

/* The coat sits over the grid; touch-action stops the page scrolling while scratching. */
.scratch-coat[b-tcgvx92gku],
.scratch-dust[b-tcgvx92gku] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.scratch-coat[b-tcgvx92gku] {
    touch-action: none;
    cursor: crosshair;
}

.scratch-dust[b-tcgvx92gku] {
    pointer-events: none;
}

.scratch-foot[b-tcgvx92gku] {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-dim);
}

.scratch-result[b-tcgvx92gku] {
    margin-top: 20px;
    min-height: 36px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 1px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s, transform 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.scratch-result.show[b-tcgvx92gku] {
    opacity: 1;
    transform: scale(1);
}

.scratch-result.plus[b-tcgvx92gku] {
    color: var(--magenta);
    text-shadow: 0 0 8px var(--magenta), 0 0 22px var(--magenta);
}

.scratch-result.minus[b-tcgvx92gku] {
    color: var(--green);
    text-shadow: 0 0 8px var(--green), 0 0 22px var(--green);
}

.scratch-actions[b-tcgvx92gku] {
    margin-top: 10px;
}

.scratch-btn[b-tcgvx92gku] {
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 15px;
    cursor: pointer;
}

.scratch-btn-main[b-tcgvx92gku] {
    border: 2px solid var(--cyan);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 0 6px var(--cyan);
    box-shadow: 0 0 14px rgba(35, 242, 255, 0.5);
}

.scratch-note[b-tcgvx92gku] {
    margin-top: 18px;
    font-size: 13px;
    color: var(--text-dim);
}

/* Coin prizes: gold, with the coin drawn by scratch-card.js next to the number. */
.scratch-cell.coin[b-tcgvx92gku] {
    color: var(--amber);
    text-shadow: 0 0 8px var(--amber);
}

.scratch-cell.win.coin[b-tcgvx92gku] {
    --w: var(--amber);
}

.scratch-cell[b-tcgvx92gku]  .scratch-coin {
    width: 0.8em;
    height: 0.8em;
    margin-left: 3px;
    vertical-align: -0.08em;
    filter: drop-shadow(0 0 4px currentColor);
}

.scratch-result.coin[b-tcgvx92gku] {
    color: var(--amber);
    text-shadow: 0 0 8px var(--amber), 0 0 22px var(--amber);
}
/* /Components/Pages/SlotMachine.razor.rz.scp.css */
.slot-page[b-zkj0snk9yr] {
    text-align: center;
}

/* ---- Cabinet ---- */

.slot-machine[b-zkj0snk9yr] {
    --cell: 84px;
    width: min(100%, 440px);
    margin: 28px auto 0;
    padding: 0 16px 20px;
    border-radius: 26px;
    border: 2px solid var(--magenta);
    background:
        linear-gradient(180deg, rgba(255, 43, 214, 0.08), transparent 30%),
        #08080f;
    box-shadow: 0 0 22px rgba(255, 43, 214, 0.45), inset 0 0 30px rgba(168, 85, 255, 0.15);
}

.slot-marquee[b-zkj0snk9yr] {
    margin: 0 -16px 18px;
    padding: 12px 16px 14px;
    border-bottom: 1px solid rgba(255, 43, 214, 0.35);
    border-radius: 24px 24px 0 0;
    background: linear-gradient(180deg, rgba(168, 85, 255, 0.22), rgba(168, 85, 255, 0.04));
}

.slot-title[b-zkj0snk9yr] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 30px;
    letter-spacing: 8px;
    color: #fff;
    text-shadow: 0 0 6px var(--magenta), 0 0 18px var(--magenta), 0 0 36px var(--purple);
}

.slot-bulbs[b-zkj0snk9yr] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.slot-bulbs i[b-zkj0snk9yr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 6px var(--amber);
    animation: slot-chase-b-zkj0snk9yr 1.4s steps(1) infinite;
}

.slot-bulbs i:nth-child(odd)[b-zkj0snk9yr] {
    animation-delay: 0.7s;
}

.slot-machine.spinning .slot-bulbs i[b-zkj0snk9yr] {
    animation-duration: 0.3s;
}

.slot-machine.spinning .slot-bulbs i:nth-child(odd)[b-zkj0snk9yr] {
    animation-delay: 0.15s;
}

.slot-machine.jackpot .slot-bulbs i[b-zkj0snk9yr] {
    background: #fff;
    animation-duration: 0.16s;
}

@keyframes slot-chase-b-zkj0snk9yr {
    50% { opacity: 0.15; }
}

/* ---- Reels ---- */

.slot-body[b-zkj0snk9yr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slot-window[b-zkj0snk9yr] {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    height: calc(var(--cell) * 3);
    padding: 0 6px;
    border-radius: 14px;
    border: 1px solid rgba(168, 85, 255, 0.6);
    background: #040407;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}

/* Top and bottom rows fade out, so the payline row reads as the one that counts. */
.slot-window[b-zkj0snk9yr]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 4, 7, 0.92), rgba(4, 4, 7, 0.15) 30%, transparent 40%, transparent 60%, rgba(4, 4, 7, 0.15) 70%, rgba(4, 4, 7, 0.92));
}

.slot-reel[b-zkj0snk9yr] {
    position: relative;
    overflow: hidden;
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.slot-strip[b-zkj0snk9yr] {
    will-change: transform;
}

.slot-reel.blur .slot-strip[b-zkj0snk9yr] {
    filter: blur(1.4px);
}

.slot-reel.thunk[b-zkj0snk9yr] {
    animation: slot-thunk-b-zkj0snk9yr 0.28s ease-out;
}

@keyframes slot-thunk-b-zkj0snk9yr {
    35% { transform: translateY(7px); }
}

.slot-reel.suspense[b-zkj0snk9yr] {
    box-shadow: inset 0 0 22px rgba(255, 178, 62, 0.55);
    animation: slot-suspense-b-zkj0snk9yr 0.35s ease-in-out infinite alternate;
}

@keyframes slot-suspense-b-zkj0snk9yr {
    to { box-shadow: inset 0 0 34px rgba(255, 178, 62, 0.9); }
}

.slot-cell[b-zkj0snk9yr] {
    height: var(--cell);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c);
}

.slot-cell[b-zkj0snk9yr]  svg {
    width: 62%;
    height: 62%;
    filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 10px var(--c));
}

.slot-cell.win[b-zkj0snk9yr] {
    animation: slot-win-b-zkj0snk9yr 0.5s ease-in-out infinite alternate;
}

.slot-cell.win[b-zkj0snk9yr]  svg {
    color: #fff;
}

@keyframes slot-win-b-zkj0snk9yr {
    from { background: transparent; }
    to { background: color-mix(in srgb, var(--c) 28%, transparent); }
}

.slot-payline[b-zkj0snk9yr] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--cell) * 1.5);
    height: 2px;
    margin-top: -1px;
    background: linear-gradient(90deg, transparent, rgba(255, 43, 214, 0.75) 8%, rgba(255, 43, 214, 0.75) 92%, transparent);
    box-shadow: 0 0 8px var(--magenta);
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
}

/* ---- Lever ---- */

.slot-lever[b-zkj0snk9yr] {
    position: relative;
    width: 26px;
    height: calc(var(--cell) * 2.4);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.slot-lever-arm[b-zkj0snk9yr] {
    position: absolute;
    left: 50%;
    bottom: 18px;
    width: 6px;
    height: 70%;
    margin-left: -3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #555, #ccc, #555);
    transform-origin: 50% 100%;
}

.slot-lever-ball[b-zkj0snk9yr] {
    position: absolute;
    left: 50%;
    top: -14px;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--magenta) 45%, #7a0d63);
    box-shadow: 0 0 12px var(--magenta);
}

.slot-lever-base[b-zkj0snk9yr] {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 6px;
    background: #22222e;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.slot-lever.pulled .slot-lever-arm[b-zkj0snk9yr] {
    animation: slot-pull-b-zkj0snk9yr 0.6s ease-in-out;
}

@keyframes slot-pull-b-zkj0snk9yr {
    40% { transform: scaleY(-0.55); }
}

/* ---- Spin button and result ---- */

.slot-result[b-zkj0snk9yr] {
    margin-top: 16px;
    min-height: 36px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 1px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.35s, transform 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.slot-result.show[b-zkj0snk9yr] {
    opacity: 1;
    transform: scale(1);
}

.slot-result.plus[b-zkj0snk9yr] {
    color: var(--magenta);
    text-shadow: 0 0 8px var(--magenta), 0 0 22px var(--magenta);
}

.slot-result.minus[b-zkj0snk9yr] {
    color: var(--green);
    text-shadow: 0 0 8px var(--green), 0 0 22px var(--green);
}

.slot-machine.won[b-zkj0snk9yr],
.slot-machine.jackpot[b-zkj0snk9yr] {
    animation: slot-cabinet-b-zkj0snk9yr 0.45s ease-in-out 6 alternate;
}

@keyframes slot-cabinet-b-zkj0snk9yr {
    to { box-shadow: 0 0 46px rgba(255, 43, 214, 0.9), inset 0 0 40px rgba(168, 85, 255, 0.35); }
}

.slot-spin[b-zkj0snk9yr] {
    margin-top: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: 2px solid var(--cyan);
    background: radial-gradient(circle at 50% 0%, rgba(35, 242, 255, 0.25), transparent 70%), #07070d;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 4px;
    text-shadow: 0 0 6px var(--cyan), 0 0 16px var(--cyan);
    box-shadow: 0 0 14px rgba(35, 242, 255, 0.5);
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
}

.slot-spin:hover:not(:disabled)[b-zkj0snk9yr] {
    box-shadow: 0 0 26px rgba(35, 242, 255, 0.85);
}

.slot-spin:active:not(:disabled)[b-zkj0snk9yr] {
    transform: scale(0.98);
}

.slot-spin:disabled[b-zkj0snk9yr] {
    cursor: default;
    color: rgba(255, 255, 255, 0.45);
    text-shadow: none;
}

/* ---- Paytable ---- */

.slot-pay-title[b-zkj0snk9yr] {
    margin: 36px 0 12px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 2px;
    color: var(--text-dim);
}

.slot-paytable[b-zkj0snk9yr] {
    width: min(100%, 440px);
    margin: 0 auto;
}

.slot-pay-row[b-zkj0snk9yr] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--panel-border);
    color: var(--c, var(--text-dim));
}

.slot-pay-icons[b-zkj0snk9yr] {
    display: flex;
    justify-content: flex-start;
    gap: 2px;
    font-size: 14px;
}

.slot-pay-icons[b-zkj0snk9yr]  svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 3px var(--c));
}

.slot-pay-amount[b-zkj0snk9yr] {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    min-width: 64px;
}

.slot-pay-amount.plus[b-zkj0snk9yr] {
    color: var(--magenta);
}

.slot-pay-amount.minus[b-zkj0snk9yr] {
    color: var(--green);
}

.slot-pay-pair[b-zkj0snk9yr] {
    text-align: right;
    font-size: 14px;
    color: var(--text-dim);
}

.slot-note[b-zkj0snk9yr] {
    margin-top: 18px;
    font-size: 13px;
    color: var(--text-dim);
}

@media (max-width: 420px) {
    .slot-machine[b-zkj0snk9yr] {
        --cell: 72px;
        padding: 0 12px 16px;
    }

    .slot-marquee[b-zkj0snk9yr] {
        margin: 0 -12px 14px;
    }
}

/* Coin prizes: gold, like the coin in the header. */
.slot-result.coin[b-zkj0snk9yr] {
    color: var(--amber);
    text-shadow: 0 0 8px var(--amber), 0 0 22px var(--amber);
}

.slot-pay-amount.coin[b-zkj0snk9yr] {
    color: var(--amber);
}
/* /Components/Pages/Verify.razor.rz.scp.css */
.verify-page[b-o4kw6m0836] {
    text-align: center;
}

.verify[b-o4kw6m0836] {
    display: block;
}

/* ---- Viewfinder ---- */

.verify-frame[b-o4kw6m0836] {
    position: relative;
    /* Square, like the photo that is saved; never taller than most of the screen. */
    aspect-ratio: 1 / 1;
    width: min(100%, 70vh);
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(35, 242, 255, 0.35);
    background: radial-gradient(circle at 50% 40%, #0d0d1a, #050508 70%);
    box-shadow: 0 0 22px rgba(35, 242, 255, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.verify-video[b-o4kw6m0836],
.verify-shot[b-o4kw6m0836] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

/* The selfie camera is shown mirrored like a mirror; the saved photo is not. */
.verify[data-mirror] .verify-video[b-o4kw6m0836] {
    transform: scaleX(-1);
}

.verify[data-state="live"] .verify-video[b-o4kw6m0836],
.verify[data-state="preview"] .verify-shot[b-o4kw6m0836],
.verify[data-state="sending"] .verify-shot[b-o4kw6m0836],
.verify[data-state="done"] .verify-shot[b-o4kw6m0836] {
    display: block;
}

.verify[data-state="sending"] .verify-shot[b-o4kw6m0836] {
    filter: brightness(0.6);
}

.verify-off[b-o4kw6m0836] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.verify-off svg[b-o4kw6m0836] {
    width: 64px;
    height: 64px;
    color: var(--cyan);
    opacity: 0.55;
    filter: drop-shadow(0 0 8px var(--cyan));
}

.verify[data-state="starting"] .verify-off svg[b-o4kw6m0836] {
    animation: verify-pulse-b-o4kw6m0836 1s ease-in-out infinite;
}

.verify[data-state="wait"] .verify-off[b-o4kw6m0836],
.verify[data-state="closed"] .verify-off[b-o4kw6m0836],
.verify[data-state="live"] .verify-off[b-o4kw6m0836],
.verify[data-state="preview"] .verify-off[b-o4kw6m0836],
.verify[data-state="sending"] .verify-off[b-o4kw6m0836],
.verify[data-state="done"] .verify-off[b-o4kw6m0836] {
    display: none;
}

/* Too early / not locked: a message in the viewfinder instead of the camera */
.verify-wait[b-o4kw6m0836],
.verify-closed[b-o4kw6m0836] {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 28px;
    color: var(--text-dim);
    font-size: 16px;
}

.verify[data-state="wait"] .verify-wait[b-o4kw6m0836],
.verify[data-state="closed"] .verify-closed[b-o4kw6m0836] {
    display: flex;
}

.verify-wait svg[b-o4kw6m0836],
.verify-closed svg[b-o4kw6m0836] {
    width: 56px;
    height: 56px;
    color: var(--amber);
    filter: drop-shadow(0 0 8px var(--amber));
}

.verify-closed svg[b-o4kw6m0836] {
    color: var(--purple);
    filter: drop-shadow(0 0 8px var(--purple));
}

.verify-wait-label[b-o4kw6m0836] {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.verify-wait-time[b-o4kw6m0836] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    color: var(--amber);
    text-shadow: 0 0 10px rgba(255, 178, 62, 0.6);
}

.verify-closed-link[b-o4kw6m0836] {
    margin-top: 6px;
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 0 6px rgba(35, 242, 255, 0.5);
}

.verify[data-state="wait"] .verify-corner[b-o4kw6m0836] {
    border-color: var(--amber);
    filter: drop-shadow(0 0 4px var(--amber));
}

/* Viewfinder corners */
.verify-corner[b-o4kw6m0836] {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--cyan);
    filter: drop-shadow(0 0 4px var(--cyan));
    opacity: 0.8;
    pointer-events: none;
}

.verify-corner-tl[b-o4kw6m0836] { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.verify-corner-tr[b-o4kw6m0836] { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.verify-corner-bl[b-o4kw6m0836] { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.verify-corner-br[b-o4kw6m0836] { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }

.verify[data-state="done"] .verify-corner[b-o4kw6m0836] {
    border-color: var(--green);
    filter: drop-shadow(0 0 4px var(--green));
}

/* Live badge with a running clock */
.verify-rec[b-o4kw6m0836] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(5, 5, 8, 0.6);
    border: 1px solid rgba(255, 59, 74, 0.5);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 1px;
}

.verify[data-state="live"] .verify-rec[b-o4kw6m0836] {
    display: flex;
}

.verify-rec-dot[b-o4kw6m0836] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 8px var(--red);
    animation: verify-pulse-b-o4kw6m0836 1.2s ease-in-out infinite;
}

.verify-flash[b-o4kw6m0836] {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.verify-flash.is-firing[b-o4kw6m0836] {
    animation: verify-flash-b-o4kw6m0836 0.45s ease-out;
}

/* ---- Status line ---- */

.verify-status[b-o4kw6m0836] {
    min-height: 22px;
    margin: 16px 0 6px;
    font-size: 15px;
    color: var(--text-dim);
}

.verify[data-state="error"] .verify-status[b-o4kw6m0836] {
    color: var(--red);
}

.verify[data-state="done"] .verify-status[b-o4kw6m0836] {
    color: var(--green);
    text-shadow: 0 0 6px rgba(57, 255, 176, 0.5);
    font-weight: 600;
}

/* ---- Controls: one set per state ---- */

.verify-controls[b-o4kw6m0836] {
    display: none;
    margin-top: 10px;
}

.verify[data-state="idle"] .verify-controls-start[b-o4kw6m0836],
.verify[data-state="starting"] .verify-controls-start[b-o4kw6m0836],
.verify[data-state="error"] .verify-controls-start[b-o4kw6m0836] {
    display: block;
}

.verify[data-state="starting"] .verify-controls-start button[b-o4kw6m0836] {
    opacity: 0.5;
    pointer-events: none;
}

.verify[data-state="live"] .verify-controls-live[b-o4kw6m0836] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.verify[data-state="preview"] .verify-controls-preview[b-o4kw6m0836],
.verify[data-state="sending"] .verify-controls-preview[b-o4kw6m0836] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.verify[data-state="sending"] .verify-controls-preview button[b-o4kw6m0836] {
    opacity: 0.5;
    pointer-events: none;
}

.verify[data-state="done"] .verify-controls-done[b-o4kw6m0836] {
    display: block;
}

.verify-home[b-o4kw6m0836] {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

.verify-side[b-o4kw6m0836] {
    display: flex;
    justify-content: center;
}

/* The big shutter */
.verify-shutter[b-o4kw6m0836] {
    position: relative;
    width: 96px;
    height: 96px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid var(--magenta);
    background: rgba(255, 43, 214, 0.06);
    cursor: pointer;
    box-shadow: 0 0 18px rgba(255, 43, 214, 0.55), inset 0 0 14px rgba(255, 43, 214, 0.3);
    transition: transform 0.12s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.verify-shutter:hover[b-o4kw6m0836] {
    box-shadow: 0 0 28px rgba(255, 43, 214, 0.8), inset 0 0 14px rgba(255, 43, 214, 0.4);
}

.verify-shutter:active[b-o4kw6m0836] {
    transform: scale(0.92);
}

.verify-shutter-core[b-o4kw6m0836] {
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #ff8deb, var(--magenta) 60%, #b0108f);
    box-shadow: 0 0 14px var(--magenta);
}

.verify-flip[b-o4kw6m0836] {
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(35, 242, 255, 0.5);
    background: rgba(35, 242, 255, 0.08);
    color: var(--cyan);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(35, 242, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.verify-flip svg[b-o4kw6m0836] {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 0 4px currentColor);
}

.verify-flip[hidden][b-o4kw6m0836] {
    display: none;
}

.verify-rules[b-o4kw6m0836] {
    margin: 28px auto 0;
    padding: 0 0 0 18px;
    max-width: 440px;
    text-align: left;
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1.6;
}

@keyframes verify-pulse-b-o4kw6m0836 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@keyframes verify-flash-b-o4kw6m0836 {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
}
/* /Components/Pages/Wheel.razor.rz.scp.css */
.wheel-page[b-bgvoe22enx] {
    text-align: center;
}

.wheel-stage[b-bgvoe22enx] {
    position: relative;
    width: min(100%, 440px);
    aspect-ratio: 1;
    margin: 60px auto 0;
}

.wheel-rotor[b-bgvoe22enx] {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.wheel-rotor svg[b-bgvoe22enx] {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 18px rgba(168, 85, 255, 0.35));
}

.wheel-rim[b-bgvoe22enx] {
    fill: #0b0b14;
    stroke: var(--purple);
    stroke-width: 2;
    filter: drop-shadow(0 0 6px var(--purple));
}

.wheel-sector path[b-bgvoe22enx] {
    fill: color-mix(in srgb, var(--c) 22%, #07070d);
    stroke: var(--c);
    stroke-width: 1.5;
    transition: fill 0.4s;
}

.wheel-sector text[b-bgvoe22enx] {
    fill: var(--c);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 25px;
    letter-spacing: 1px;
    text-anchor: middle;
    dominant-baseline: central;
    filter: drop-shadow(0 0 4px var(--c));
}

.wheel-sector.win path[b-bgvoe22enx] {
    fill: color-mix(in srgb, var(--c) 55%, #07070d);
    animation: wheel-win-b-bgvoe22enx 0.9s ease-in-out infinite alternate;
}

.wheel-sector.win text[b-bgvoe22enx] {
    fill: #fff;
}

.wheel-sector.dim[b-bgvoe22enx] {
    opacity: 0.35;
    transition: opacity 0.6s;
}

@keyframes wheel-win-b-bgvoe22enx {
    from { filter: drop-shadow(0 0 2px var(--c)); }
    to { filter: drop-shadow(0 0 14px var(--c)); }
}

.wheel-inner-ring[b-bgvoe22enx] {
    fill: none;
    stroke: var(--purple);
    stroke-width: 2;
    opacity: 0.8;
}

.wheel-bulb[b-bgvoe22enx] {
    fill: var(--amber);
    filter: drop-shadow(0 0 3px var(--amber));
}

.wheel-bulb.odd[b-bgvoe22enx] {
    fill: var(--cyan);
    filter: drop-shadow(0 0 3px var(--cyan));
}

.wheel-stage.spinning .wheel-bulb[b-bgvoe22enx] {
    animation: wheel-bulb-b-bgvoe22enx 0.24s steps(1) infinite;
}

.wheel-stage.spinning .wheel-bulb.odd[b-bgvoe22enx] {
    animation-delay: 0.12s;
}

@keyframes wheel-bulb-b-bgvoe22enx {
    50% { opacity: 0.2; }
}

.wheel-pointer[b-bgvoe22enx] {
    position: absolute;
    top: -26px;
    left: 50%;
    width: 40px;
    height: 52px;
    margin-left: -20px;
    z-index: 2;
    transform-origin: 20px 15px;
    overflow: visible;
}

.wheel-pointer path[b-bgvoe22enx] {
    fill: var(--magenta);
    stroke: #fff;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 6px var(--magenta)) drop-shadow(0 0 14px var(--magenta));
}

.wheel-pointer circle[b-bgvoe22enx] {
    fill: #fff;
}

.wheel-hub[b-bgvoe22enx] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 29%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--cyan);
    background: radial-gradient(circle at 50% 35%, #1a1a2e, #050508 70%);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(16px, 5vw, 24px);
    letter-spacing: 2px;
    text-shadow: 0 0 6px var(--cyan), 0 0 18px var(--cyan);
    box-shadow: 0 0 14px rgba(35, 242, 255, 0.55), inset 0 0 18px rgba(35, 242, 255, 0.25);
    cursor: pointer;
    z-index: 2;
    transition: box-shadow 0.2s, transform 0.15s, opacity 0.3s;
}

.wheel-hub:hover:not(:disabled)[b-bgvoe22enx] {
    box-shadow: 0 0 26px rgba(35, 242, 255, 0.85), inset 0 0 22px rgba(35, 242, 255, 0.35);
}

.wheel-hub:active:not(:disabled)[b-bgvoe22enx] {
    transform: translate(-50%, -50%) scale(0.95);
}

/* Stays opaque while spinning (the sector lines meet under it); only the label fades. */
.wheel-hub:disabled[b-bgvoe22enx] {
    cursor: default;
    color: rgba(255, 255, 255, 0.45);
    text-shadow: none;
}

.wheel-result[b-bgvoe22enx] {
    margin-top: 28px;
    min-height: 44px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 1px;
    color: var(--text);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s, transform 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.wheel-result.show[b-bgvoe22enx] {
    opacity: 1;
    transform: scale(1);
}

.wheel-result.plus[b-bgvoe22enx] {
    color: var(--magenta);
    text-shadow: 0 0 8px var(--magenta), 0 0 24px var(--magenta);
}

.wheel-result.minus[b-bgvoe22enx] {
    color: var(--green);
    text-shadow: 0 0 8px var(--green), 0 0 24px var(--green);
}

.wheel-result.special[b-bgvoe22enx] {
    color: var(--amber);
    text-shadow: 0 0 8px var(--amber), 0 0 24px var(--amber);
}

/* The coin drawn on the coin sectors (a CoinIcon child component, hence ::deep). */
.wheel-sector[b-bgvoe22enx]  .wheel-coin {
    color: var(--c);
    filter: drop-shadow(0 0 4px var(--c));
}