/* /Components/ComboCameraView.razor.rz.scp.css */
.combo-view[b-m71bcawb0b] {
    text-align: center;
}

/* Set by start-lock.js when Continue was pressed without a photo. */
.combo.combo-attn .combo-frame[b-m71bcawb0b] {
    border-color: var(--magenta);
    box-shadow: 0 0 22px rgba(255, 43, 214, 0.45), inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.combo[b-m71bcawb0b] {
    display: block;
}

/* ---- Viewfinder (3:4, portrait: the lockbox is taller than wide) ---- */

.combo-frame[b-m71bcawb0b] {
    position: relative;
    aspect-ratio: 3 / 4;
    width: min(100%, 62vh);
    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);
}

/* The real video never shows: it only feeds the canvas, which carries the mosaic. */
.combo-video[b-m71bcawb0b] {
    display: none;
}

.combo-canvas[b-m71bcawb0b] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.combo[data-state="live"] .combo-canvas[b-m71bcawb0b],
.combo[data-state="preview"] .combo-canvas[b-m71bcawb0b],
.combo[data-state="done"] .combo-canvas[b-m71bcawb0b] {
    display: block;
}

.combo-off[b-m71bcawb0b] {
    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-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.combo[data-state="idle"] .combo-off[b-m71bcawb0b],
.combo[data-state="starting"] .combo-off[b-m71bcawb0b],
.combo[data-state="error"] .combo-off[b-m71bcawb0b] {
    display: flex;
}

.combo-off svg[b-m71bcawb0b] {
    width: 60px;
    height: 60px;
    color: var(--cyan);
    opacity: 0.6;
    filter: drop-shadow(0 0 8px var(--cyan));
}

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

/* ---- Outline of the lockbox and the hidden number window ---- */

.combo-guide[b-m71bcawb0b],
.combo-hidden-note[b-m71bcawb0b] {
    display: none;
    pointer-events: none;
}

.combo[data-state="live"] .combo-guide[b-m71bcawb0b],
.combo[data-state="live"] .combo-hidden-note[b-m71bcawb0b],
.combo[data-state="preview"] .combo-hidden-note[b-m71bcawb0b] {
    display: block;
}

.combo-guide[b-m71bcawb0b] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.combo-dim[b-m71bcawb0b] {
    fill: rgba(5, 5, 10, 0.55);
}

.combo-box[b-m71bcawb0b] {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2;
    stroke-dasharray: 10 6;
    filter: drop-shadow(0 0 4px var(--cyan));
}

.combo-window[b-m71bcawb0b] {
    fill: none;
    stroke: var(--magenta);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 3px var(--magenta));
}

.combo-hidden-note[b-m71bcawb0b] {
    position: absolute;
    transform: translate(-50%, 6px);
    padding: 2px 10px;
    border-radius: 10px;
    background: rgba(5, 5, 10, 0.7);
    color: var(--magenta);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

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

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

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

.combo-status[b-m71bcawb0b] {
    min-height: 22px;
    margin: 16px auto 6px;
    max-width: 440px;
    font-size: 15px;
    color: var(--text-dim);
}

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

.combo[data-state="done"] .combo-status[b-m71bcawb0b] {
    color: var(--green);
    font-weight: 600;
}

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

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

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

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

.combo[data-state="live"] .combo-controls-live[b-m71bcawb0b] {
    display: flex;
    justify-content: center;
}

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

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

/* Retake and Use this photo are the same size: full cell width, no page margin (the start form gives .btn-primary a top margin). */
.combo-controls-preview button[b-m71bcawb0b],
.combo-controls-done button[b-m71bcawb0b] {
    width: 100%;
    margin: 0;
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
}

.combo-shutter[b-m71bcawb0b] {
    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;
    -webkit-tap-highlight-color: transparent;
}

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

.combo-shutter-core[b-m71bcawb0b] {
    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);
}

.combo-rules[b-m71bcawb0b] {
    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 combo-pulse-b-m71bcawb0b {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@keyframes combo-flash-b-m71bcawb0b {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
}

/* The photo is used: the whole picture is hidden (pixelated by the script, blurred here), like on the start confirmation. */
.combo[data-state="done"] .combo-canvas[b-m71bcawb0b] {
    filter: blur(8px) saturate(0.8);
    transform: scale(1.06); /* the blur would otherwise show soft edges inside the frame */
}

.combo-done-note[b-m71bcawb0b] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--green);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.combo-done-note svg[b-m71bcawb0b] {
    width: 18px;
    height: 18px;
}

.combo[data-state="done"] .combo-done-note[b-m71bcawb0b] {
    display: flex;
}

.combo-shutter-core[b-m71bcawb0b] {
    display: grid;
    place-items: center;
    color: #fff;
}

.combo-shutter-core svg[b-m71bcawb0b] {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.35));
}

/* The camera-off picture is a button: tapping it turns the camera on. */
.combo-off[b-m71bcawb0b] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.combo-off:focus-visible[b-m71bcawb0b] {
    outline: 1px solid rgba(35, 242, 255, 0.6);
    outline-offset: -6px;
    border-radius: 16px;
}
/* /Components/Layout/ActiveTaskBar.razor.rz.scp.css */
.atb[b-5f6s82trjh] {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 640px;
    margin: 10px auto 0;
    padding: 10px 16px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    border: 1px solid rgba(35, 242, 255, 0.85);
    background: rgba(35, 242, 255, 0.08);
    animation: atb-pulse-b-5f6s82trjh 1.6s ease-in-out infinite;
}

.atb-icon[b-5f6s82trjh] {
    flex: none;
    width: 26px;
    height: 26px;
    color: #7ff6ff;
    filter: drop-shadow(0 0 4px rgba(35, 242, 255, 0.7));
}

.atb-label[b-5f6s82trjh] {
    flex: none;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7ff6ff;
}

.atb-title[b-5f6s82trjh] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atb-left[b-5f6s82trjh] {
    flex: none;
    font-family: var(--font-mono);
    font-size: 14px;
    color: #bff3ff;
}

@keyframes atb-pulse-b-5f6s82trjh {
    0%, 100% { box-shadow: 0 0 8px rgba(35, 242, 255, 0.25); }
    50% { box-shadow: 0 0 22px rgba(35, 242, 255, 0.7); }
}

@media (max-width: 480px) {
    .atb[b-5f6s82trjh] { margin: 8px 12px 0; flex-wrap: wrap; gap: 4px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .atb[b-5f6s82trjh] { animation: none; }
}
/* /Components/Layout/BreakBar.razor.rz.scp.css */
.brb[b-j0xeqao2sc] {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 640px;
    margin: 10px auto 0;
    padding: 12px 16px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    border: 2px solid var(--amber);
    background: linear-gradient(90deg, rgba(255, 178, 62, 0.18), rgba(255, 43, 214, 0.08));
    animation: brb-pulse-b-j0xeqao2sc 1.4s ease-in-out infinite;
}

.brb.late[b-j0xeqao2sc] {
    border-color: var(--red);
    background: linear-gradient(90deg, rgba(255, 59, 74, 0.22), rgba(255, 43, 214, 0.08));
    animation-name: brb-pulse-late-b-j0xeqao2sc;
}

.brb-icon[b-j0xeqao2sc] {
    flex: none;
    width: 28px;
    height: 28px;
    color: var(--amber);
    filter: drop-shadow(0 0 5px rgba(255, 178, 62, 0.8));
}

.brb.late .brb-icon[b-j0xeqao2sc],
.brb.late .brb-label[b-j0xeqao2sc] {
    color: var(--red);
}

.brb-label[b-j0xeqao2sc] {
    flex: none;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amber);
}

.brb-text[b-j0xeqao2sc] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brb-left[b-j0xeqao2sc] {
    flex: none;
    font-family: var(--font-mono);
    font-size: 16px;
    color: #ffe2a8;
}

.brb.late .brb-left[b-j0xeqao2sc] {
    color: #ffb3b9;
}

@keyframes brb-pulse-b-j0xeqao2sc {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 178, 62, 0.3); }
    50% { box-shadow: 0 0 26px rgba(255, 178, 62, 0.8); }
}

@keyframes brb-pulse-late-b-j0xeqao2sc {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 59, 74, 0.35); }
    50% { box-shadow: 0 0 28px rgba(255, 59, 74, 0.9); }
}

@media (max-width: 480px) {
    .brb[b-j0xeqao2sc] { margin: 8px 12px 0; flex-wrap: wrap; gap: 4px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .brb[b-j0xeqao2sc] { animation: none; }
}
/* /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/Break.razor.rz.scp.css */
.brk-page[b-k27q224kuk] {
    max-width: 640px;
    margin: 0 auto;
}

.brk-none[b-k27q224kuk] {
    margin: 0 0 16px;
    color: var(--text-dim);
}

.brk-start[b-k27q224kuk] {
    border-color: rgba(255, 178, 62, 0.7);
    background: rgba(255, 178, 62, 0.12);
    color: var(--amber);
}

.brk-message[b-k27q224kuk] {
    margin: 14px 0 0;
    color: var(--amber);
    text-align: center;
}

/* After the last step: the outcome (a task-card-box too, so .brk-page keeps these above the shared task look). */
.brk-page .brk-result[b-k27q224kuk] {
    margin: 16px 0;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(57, 255, 176, 0.5);
    background: rgba(57, 255, 176, 0.06);
}

.brk-page .brk-result.late[b-k27q224kuk] {
    border-color: rgba(255, 59, 74, 0.6);
    background: rgba(255, 59, 74, 0.08);
}

.brk-page .brk-result-title[b-k27q224kuk] {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: var(--green);
}

.brk-page .brk-result.late .brk-result-title[b-k27q224kuk] {
    color: var(--red);
}

.brk-page .brk-result p[b-k27q224kuk] {
    margin: 0 0 6px;
    font-size: 14.5px;
}

.brk-page .brk-result p:last-child[b-k27q224kuk] {
    margin-bottom: 0;
}

/* Before Start: the member confirms the steps, then the big button. */
.brk-understood[b-k27q224kuk] {
    margin: 0 0 16px;
}

.brk-go[b-k27q224kuk] {
    padding-top: 24px;
    padding-bottom: 24px;
    font-size: 22px;
    letter-spacing: 3px;
    border-width: 2px;
    border-color: var(--green);
    background: rgba(57, 255, 176, 0.14);
    color: var(--green);
    text-shadow: 0 0 10px rgba(57, 255, 176, 0.5);
}

.brk-go:not(:disabled):hover[b-k27q224kuk] {
    box-shadow: 0 0 20px rgba(57, 255, 176, 0.5);
}

/* Leave the break for now: it waits (the bar above every page leads back here). */
.brk-later[b-k27q224kuk] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 12px;
    padding: 14px 20px;
    text-align: center;
    text-decoration: none;
}

/* Before Start the page uses the task look (wwwroot/task-ui.css, loaded after this file): these red variants start with .brk-page so
   they weigh one class more than the shared rules they change. */
.brk-page .brk-chip-late[b-k27q224kuk] {
    color: #ffb3b9;
    border-color: rgba(255, 59, 74, 0.55);
}

.brk-page .brk-late-plate[b-k27q224kuk] {
    border-color: rgba(255, 59, 74, 0.45);
    background: rgba(255, 59, 74, 0.06);
}

.brk-page .brk-late-plate .task-plate-head[b-k27q224kuk] {
    color: #ffb3b9;
}

/* After Start: the task's "running" card (task-ui.css) with a line under the clock; red once the break is late. */
.brk-page .brk-running-note[b-k27q224kuk] {
    margin: 4px 0 14px;
    font-size: 13.5px;
    color: var(--text-dim);
}

.brk-page .task-running.late[b-k27q224kuk] {
    border-color: rgba(255, 59, 74, 0.6);
    background: rgba(255, 59, 74, 0.07);
}

.brk-page .task-running.late .task-running-title[b-k27q224kuk],
.brk-page .task-running.late .task-running-left[b-k27q224kuk] {
    color: #ffb3b9;
}

/* The old combination's thumbnail on the rail is a button: it opens the picture large. */
.brk-page .brk-combo-thumb[b-k27q224kuk] {
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.brk-combo-view[b-k27q224kuk] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px;
    background: rgba(5, 5, 8, 0.92);
}

.brk-combo-view figure[b-k27q224kuk] {
    margin: 0;
    width: min(100%, 520px);
}

.brk-combo-view figcaption[b-k27q224kuk] {
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber);
    text-align: center;
}

.brk-combo-view img[b-k27q224kuk] {
    display: block;
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 12px;
}

.brk-combo-close[b-k27q224kuk] {
    width: min(100%, 520px);
    padding: 14px 20px;
}

/* The review card (app.css) after the photos of a finished break. */
.brk-page .review-card[b-k27q224kuk] {
    margin-top: 16px;
}

/* The plan's step squares get a fixed size here: the shared rule (task-ui.css) stretches them to the card's height with
   aspect-ratio 1, and with the break's longer hints iPhone Safari let square and text push each other until the square
   took the whole width. */
.brk-page .plan-ico[b-k27q224kuk] {
    align-self: flex-start;
    width: 84px;
    height: 84px;
    min-height: 0;
    aspect-ratio: auto;
}
/* /Components/Pages/BreakStepPage.razor.rz.scp.css */
.brk-none[b-v1gyjk91ti] {
    margin: 0 0 16px;
    color: var(--text-dim);
}

.brk-start[b-v1gyjk91ti] {
    border-color: rgba(255, 178, 62, 0.7);
    background: rgba(255, 178, 62, 0.12);
    color: var(--amber);
}

.brk-message[b-v1gyjk91ti] {
    margin: 14px 0 0;
    color: var(--amber);
    text-align: center;
}

/* The step to do now: a card above its camera or button, in plain words. */
.brk-what[b-v1gyjk91ti] {
    margin: 0 0 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--amber);
    background: rgba(255, 178, 62, 0.1);
}

.brk-what-label[b-v1gyjk91ti] {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber);
}

.brk-what-text[b-v1gyjk91ti] {
    display: block;
    margin-top: 4px;
    font-size: 18px;
    line-height: 1.35;
}

.brk-reveal-note[b-v1gyjk91ti] {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text-dim);
}

.brk-combo[b-v1gyjk91ti] {
    margin: 0 0 14px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 178, 62, 0.4);
    background: rgba(0, 0, 0, 0.25);
}

.brk-combo figcaption[b-v1gyjk91ti] {
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber);
}

.brk-combo img[b-v1gyjk91ti] {
    display: block;
    width: 100%;
    border-radius: 10px;
}

.brk-finish[b-v1gyjk91ti] {
    margin: 0;
}

.brk-finish .brk-start[b-v1gyjk91ti] {
    margin-top: 12px;
}

/* Before Start: the member confirms the steps, then the big button. */
/* Step 2: the one button of the step, impossible to miss. */
.brk-reveal[b-v1gyjk91ti] {
    padding-top: 22px;
    padding-bottom: 22px;
    font-size: 20px;
    letter-spacing: 2px;
    border: 2px solid var(--cyan);
    background: linear-gradient(90deg, rgba(35, 242, 255, 0.24), rgba(35, 120, 255, 0.16));
    color: #bff8ff;
    text-shadow: 0 0 10px rgba(35, 242, 255, 0.8);
    animation: brk-reveal-pulse-b-v1gyjk91ti 1.6s ease-in-out infinite;
}

.brk-reveal:not(:disabled):hover[b-v1gyjk91ti] {
    box-shadow: 0 0 28px rgba(35, 242, 255, 0.8);
}

@keyframes brk-reveal-pulse-b-v1gyjk91ti {
    0%, 100% { box-shadow: 0 0 10px rgba(35, 242, 255, 0.35); }
    50% { box-shadow: 0 0 28px rgba(35, 242, 255, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
    .brk-reveal[b-v1gyjk91ti] { animation: none; }
}

/* "Back to the break" after the combination (step 2) and "Finish the break" (step 5), in the cyan of "Show my combination". */
.brk-continue[b-v1gyjk91ti] {
    padding-top: 22px;
    padding-bottom: 22px;
    font-size: 20px;
    letter-spacing: 2px;
    border: 2px solid var(--cyan);
    background: linear-gradient(90deg, rgba(35, 242, 255, 0.24), rgba(35, 120, 255, 0.16));
    color: #bff8ff;
    text-shadow: 0 0 10px rgba(35, 242, 255, 0.8);
}

.brk-continue:not(:disabled):hover[b-v1gyjk91ti] {
    box-shadow: 0 0 28px rgba(35, 242, 255, 0.8);
}

.brk-step-page[b-v1gyjk91ti] {
    max-width: 640px;
    margin: 0 auto;
}

/* The step's name with the break's clock on the right, like a task's photo page. */
.brk-step-head[b-v1gyjk91ti] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.brk-step-head .page-title[b-v1gyjk91ti] {
    margin-bottom: 0;
}

.brk-step-left[b-v1gyjk91ti] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.brk-step-left-label[b-v1gyjk91ti] {
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.brk-step-left-time[b-v1gyjk91ti] {
    font-family: var(--font-mono);
    font-size: 22px;
    color: var(--amber);
}

.brk-step-left.late .brk-step-left-label[b-v1gyjk91ti],
.brk-step-left.late .brk-step-left-time[b-v1gyjk91ti] {
    color: var(--red);
}

.brk-back[b-v1gyjk91ti] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 16px;
    padding: 14px 20px;
    text-align: center;
    text-decoration: none;
}

/* Step 2 done: the way back to the rail is the page's main button (an <a>, so as a block). */
.brk-back-main[b-v1gyjk91ti] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    text-decoration: none;
}
/* /Components/Pages/Calendar.razor.rz.scp.css */
/* ---- Totals ---- */

.cal-stats[b-ms7nak91ak] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.cal-stat[b-ms7nak91ak] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.7rem 0.4rem;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    text-align: center;
}

/* "Locked now" spans the whole first row. */
.cal-stat-main[b-ms7nak91ak] {
    grid-column: 1 / -1;
    border-color: rgba(255, 43, 214, 0.35);
    box-shadow: 0 0 18px rgba(255, 43, 214, 0.15);
}

.cal-stat-value[b-ms7nak91ak] {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--text);
}

.cal-stat-main .cal-stat-value[b-ms7nak91ak] {
    font-size: 1.8rem;
    color: var(--magenta);
    text-shadow: 0 0 12px rgba(255, 43, 214, 0.55);
}

.cal-stat-label[b-ms7nak91ak] {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---- Month ---- */

.cal[b-ms7nak91ak] {
    padding: 1rem 0.8rem 0.9rem;
    border-radius: 18px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
}

.cal-head[b-ms7nak91ak] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cal-month[b-ms7nak91ak] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.cal-month-name[b-ms7nak91ak] {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text);
}

.cal-month-year[b-ms7nak91ak] {
    color: var(--text-dim);
    font-family: var(--font-mono);
}

.cal-nav[b-ms7nak91ak] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(35, 242, 255, 0.3);
    background: rgba(35, 242, 255, 0.06);
    color: var(--cyan);
    cursor: pointer;
}

.cal-nav svg[b-ms7nak91ak] {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cal-nav:disabled[b-ms7nak91ak] {
    color: var(--text-dim);
    border-color: var(--panel-border);
    background: transparent;
    opacity: 0.35;
    cursor: default;
}

.cal-count[b-ms7nak91ak] {
    margin: 0.3rem 0 0.8rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.cal-grid[b-ms7nak91ak] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 6px;
}

.cal-wd[b-ms7nak91ak] {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    padding-bottom: 0.2rem;
}

.cal-day[b-ms7nak91ak] {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0;
    cursor: pointer;
}

.cal-day-empty[b-ms7nak91ak] {
    cursor: default;
}

.cal-day.is-future[b-ms7nak91ak] {
    color: rgba(255, 255, 255, 0.2);
    cursor: default;
}

/* A lock is one neon tube across the days it covers, drawn by ::after a little thinner than the cell. Week edges cut it square;
   it rounds only where it really starts or ends in this month: the lock's start and open days, today for a running lock, and where
   the month cuts it. */
.cal-day.is-locked[b-ms7nak91ak] {
    color: #fff;
    text-shadow: 0 0 6px rgba(35, 242, 255, 0.8);
}

.cal-day.is-locked[b-ms7nak91ak]::after {
    content: "";
    position: absolute;
    top: 13%;
    bottom: 13%;
    left: 0;
    /* -1px covers the hairline seams fractional cell widths leave between neighbours. */
    right: -1px;
    /* Opaque: a translucent fill doubles up on the 1px overlap and shows a seam. */
    background: linear-gradient(180deg, #13809c, #0b5a74);
    border-top: 2px solid var(--cyan);
    border-bottom: 2px solid var(--cyan);
    /* Glow up and down only: each shadow shrinks by its blur, so it never reaches sideways over the neighbour's tube (that left
       bright seams between days). */
    box-shadow:
        0 -9px 10px -10px var(--cyan),
        0 9px 10px -10px var(--cyan),
        inset 0 7px 8px -7px rgba(35, 242, 255, 0.7),
        inset 0 -7px 8px -7px rgba(35, 242, 255, 0.7);
    z-index: 0;
}

.cal-day.is-locked.band-start[b-ms7nak91ak]::after {
    left: 4%;
    border-left: 2px solid var(--cyan);
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    /* The usual up/down glow plus one to the left only: a glow to the right would brighten the next day's tube. */
    box-shadow:
        0 -9px 10px -10px var(--cyan),
        0 9px 10px -10px var(--cyan),
        -8px 0 10px -8px var(--cyan),
        inset 0 7px 8px -7px rgba(35, 242, 255, 0.7),
        inset 0 -7px 8px -7px rgba(35, 242, 255, 0.7),
        inset 7px 0 8px -7px rgba(35, 242, 255, 0.7);
}

.cal-day.is-locked.band-end[b-ms7nak91ak]::after {
    right: 4%;
    border-right: 2px solid var(--cyan);
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    box-shadow:
        0 -9px 10px -10px var(--cyan),
        0 9px 10px -10px var(--cyan),
        8px 0 10px -8px var(--cyan),
        inset 0 7px 8px -7px rgba(35, 242, 255, 0.7),
        inset 0 -7px 8px -7px rgba(35, 242, 255, 0.7),
        inset -7px 0 8px -7px rgba(35, 242, 255, 0.7);
}

/* A one-day lock is rounded on both sides, so it may glow all round. */
.cal-day.is-locked.band-start.band-end[b-ms7nak91ak]::after {
    box-shadow: 0 0 10px rgba(35, 242, 255, 0.6), inset 0 0 8px rgba(35, 242, 255, 0.6);
}

.cal-num[b-ms7nak91ak] {
    position: relative;
    z-index: 1;
}

.cal-day.is-selected[b-ms7nak91ak]::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
    z-index: 3;
}

/* ---- Selected day ---- */

.cal-detail[b-ms7nak91ak] {
    margin-top: 0.8rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid rgba(35, 242, 255, 0.25);
}

.cal-detail-date[b-ms7nak91ak] {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--cyan);
}

.cal-detail-text[b-ms7nak91ak] {
    margin-top: 0.25rem;
    font-size: 1.05rem;
    color: var(--text);
}

.cal-detail-sub[b-ms7nak91ak] {
    margin-top: 0.1rem;
    font-size: 0.9rem;
    color: var(--text-dim);
}
/* /Components/Pages/Confirm.razor.rz.scp.css */
/* The confirm page: a header with a shield, then the application form in cards (or one card per state). */

.cf-head[b-1e40xxcoih] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    text-align: center;
}

.cf-head .page-title[b-1e40xxcoih] {
    margin: 0;
}

.cf-badge[b-1e40xxcoih] {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    color: var(--amber);
    background: rgba(255, 178, 62, 0.08);
    border: 1px solid rgba(255, 178, 62, 0.45);
    box-shadow: 0 0 22px rgba(255, 178, 62, 0.22);
}

.cf-badge svg[b-1e40xxcoih] {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 0 5px currentColor);
}

.cf-badge-ok[b-1e40xxcoih] {
    color: var(--green);
    background: rgba(57, 255, 176, 0.08);
    border-color: rgba(57, 255, 176, 0.45);
    box-shadow: 0 0 22px rgba(57, 255, 176, 0.22);
}

/* Card */
.cf-card[b-1e40xxcoih] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 440px;
    margin: 0 auto;
    padding: 22px 20px;
    border-radius: 18px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(6px);
}

.cf-card-center[b-1e40xxcoih] {
    align-items: center;
    text-align: center;
}

.cf-card-title[b-1e40xxcoih] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text);
}

.cf-card-ok[b-1e40xxcoih] {
    border-color: rgba(57, 255, 176, 0.35);
}

.cf-card-wait[b-1e40xxcoih] {
    border-color: rgba(255, 178, 62, 0.35);
}

.cf-text[b-1e40xxcoih] {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dim);
}

.cf-pulse[b-1e40xxcoih] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 0 0 rgba(255, 178, 62, 0.6);
    animation: cf-pulse-b-1e40xxcoih 1.6s ease-out infinite;
}

@keyframes cf-pulse-b-1e40xxcoih {
    to { box-shadow: 0 0 0 14px rgba(255, 178, 62, 0); }
}

.cf-btn[b-1e40xxcoih] {
    width: 100%;
    text-align: center;
    text-decoration: none;
}

.cf-error[b-1e40xxcoih] {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 59, 74, 0.45);
    background: rgba(255, 59, 74, 0.1);
    color: var(--red);
    font-size: 14px;
    text-align: center;
}

/* The site's switch inside the card: the card's gap does the spacing, and the label reads like the other lines of the card. */
.cf-card .switch[b-1e40xxcoih] {
    margin-bottom: 0;
}

.cf-card .switch-left .switch-label[b-1e40xxcoih] {
    padding-top: 3px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text);
}

.cf-card .switch-left .switch-label a[b-1e40xxcoih] {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(35, 242, 255, 0.35);
}

/* The form: one card per section, stacked. */
.cf-intro[b-1e40xxcoih] {
    max-width: 440px;
    margin: 0 auto 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dim);
    text-align: center;
}

.cf-form[b-1e40xxcoih] {
    margin-bottom: 14px;
}

.cf-section[b-1e40xxcoih] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cyan);
}

.cf-q[b-1e40xxcoih] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.cf-q-text[b-1e40xxcoih] {
    font-size: 15px;
    line-height: 1.4;
    color: var(--text);
}

.cf-q-hint[b-1e40xxcoih] {
    margin-top: -4px;
    font-size: 12.5px;
    color: var(--text-dim);
}

.cf-chips[b-1e40xxcoih] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cf-chip[b-1e40xxcoih] {
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.cf-chip:hover[b-1e40xxcoih] {
    border-color: rgba(35, 242, 255, 0.35);
}

.cf-chip.on[b-1e40xxcoih] {
    color: #fff;
    border-color: var(--cyan);
    background: rgba(35, 242, 255, 0.14);
    box-shadow: 0 0 12px rgba(35, 242, 255, 0.35);
}

/* Dropdown for questions with more than three choices: a field-like button, and a glass list under it. The card holding the open
   list is raised above the cards after it (each card's backdrop-filter makes its own stacking context), and a transparent
   backdrop under it closes the list on a tap outside. */
.cf-card-raised[b-1e40xxcoih] {
    position: relative;
    z-index: 30;
}

.cf-dd-backdrop[b-1e40xxcoih] {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.cf-dd[b-1e40xxcoih] {
    position: relative;
}

.cf-dd-btn[b-1e40xxcoih] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.cf-dd-btn:hover[b-1e40xxcoih] {
    border-color: color-mix(in srgb, var(--cyan) 35%, transparent);
}

.cf-dd-btn.set[b-1e40xxcoih] {
    color: #fff;
    border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
    background: color-mix(in srgb, var(--cyan) 6%, transparent);
}

.cf-dd.open .cf-dd-btn[b-1e40xxcoih] {
    border-color: var(--cyan);
    box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 35%, transparent);
}

.cf-dd-value[b-1e40xxcoih] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cf-dd-caret[b-1e40xxcoih] {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--cyan);
    transition: transform 0.2s ease;
}

.cf-dd.open .cf-dd-caret[b-1e40xxcoih] {
    transform: rotate(180deg);
}

.cf-dd-list[b-1e40xxcoih] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
    background: var(--bg-soft);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 18px color-mix(in srgb, var(--cyan) 15%, transparent);
    animation: cf-dd-in-b-1e40xxcoih 0.14s ease-out;
}

@keyframes cf-dd-in-b-1e40xxcoih {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.cf-dd-opt[b-1e40xxcoih] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.cf-dd-opt:hover[b-1e40xxcoih],
.cf-dd-opt:focus-visible[b-1e40xxcoih] {
    background: color-mix(in srgb, var(--cyan) 8%, transparent);
    outline: none;
}

.cf-dd-opt.on[b-1e40xxcoih] {
    color: #fff;
    background: color-mix(in srgb, var(--cyan) 14%, transparent);
}

/* Single choice: the check appears only on the picked row. Several choices: every row has a box, ticked when picked. */
.cf-dd-mark[b-1e40xxcoih] {
    display: grid;
    place-items: center;
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--cyan);
}

.cf-dd-mark svg[b-1e40xxcoih] {
    width: 16px;
    height: 16px;
    opacity: 0;
}

.cf-dd-opt.on .cf-dd-mark svg[b-1e40xxcoih] {
    opacity: 1;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cyan) 70%, transparent));
}

.cf-dd-list.multi .cf-dd-mark[b-1e40xxcoih] {
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 5px;
}

.cf-dd-list.multi .cf-dd-mark svg[b-1e40xxcoih] {
    width: 12px;
    height: 12px;
}

.cf-dd-list.multi .cf-dd-opt.on .cf-dd-mark[b-1e40xxcoih] {
    border-color: var(--cyan);
    background: color-mix(in srgb, var(--cyan) 15%, transparent);
}

/* The box for the member's own words after "Other". */
.cf-other[b-1e40xxcoih] {
    margin: 0;
}

/* Strictness 1-5: five equal round buttons in one row. */
.cf-chips-scale[b-1e40xxcoih] {
    flex-wrap: nowrap;
}

.cf-chips-scale .cf-chip[b-1e40xxcoih] {
    flex: 1;
    padding: 10px 0;
    font-family: var(--font-display);
    font-weight: 700;
}

.cf-count[b-1e40xxcoih] {
    align-self: flex-end;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-dim);
}

.cf-count.ok[b-1e40xxcoih] {
    color: var(--green);
}

/* The last rejection, above the form or alone while the member waits to send again. */
.cf-card-reject[b-1e40xxcoih] {
    margin-bottom: 14px;
    border-color: rgba(255, 59, 74, 0.4);
}

.cf-card-reject .cf-card-title[b-1e40xxcoih] {
    color: var(--red);
}

.cf-reason[b-1e40xxcoih] {
    padding: 12px 14px;
    border-radius: 12px;
    border-left: 3px solid var(--red);
    background: rgba(255, 59, 74, 0.08);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Games/Games.razor.rz.scp.css */
.games-list[b-rhl92rbzyk] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.game-card[b-rhl92rbzyk] {
    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-rhl92rbzyk] {
    box-shadow: 0 0 28px color-mix(in srgb, var(--c) 50%, transparent);
    transform: translateY(-2px);
}

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

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

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

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

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

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

.game-art-ring[b-rhl92rbzyk] {
    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-rhl92rbzyk] {
    fill: rgba(255, 59, 74, 0.35);
    stroke: var(--red);
    stroke-width: 2;
}

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

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

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

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

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

.game-title[b-rhl92rbzyk] {
    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-rhl92rbzyk] {
    font-size: 15px;
    line-height: 1.35;
    color: var(--text);
}

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

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

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

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

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

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

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

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

.game-art-label[b-rhl92rbzyk] {
    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-rhl92rbzyk] {
    fill: #0c0a16;
    stroke: var(--purple);
    stroke-width: 2.5;
}

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

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

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

/* Overload */
.game-art-safe-door[b-rhl92rbzyk] {
    fill: #15161d;
    stroke: var(--amber);
    stroke-width: 2.5;
}

.game-art-safe-window[b-rhl92rbzyk] {
    fill: #050507;
    stroke: var(--amber);
    stroke-width: 1.5;
    opacity: 0.8;
}

.game-art-safe-wheel[b-rhl92rbzyk] {
    fill: none;
    stroke: #9da1b4;
    stroke-width: 4;
    stroke-linecap: round;
}

.game-art-safe-hub[b-rhl92rbzyk] {
    fill: var(--amber);
}

.game-art-word[b-rhl92rbzyk] {
    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-rhl92rbzyk] {
    border-style: dashed;
}

.game-test-badge[b-rhl92rbzyk] {
    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-rhl92rbzyk] {
    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-rhl92rbzyk] {
    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-rhl92rbzyk] {
    fill: #0c0a16;
    stroke: var(--purple);
    stroke-width: 1.5;
    opacity: 0.8;
}

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

.game-art-mine-cell[b-rhl92rbzyk] {
    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-rhl92rbzyk] {
    fill: var(--red);
}

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

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

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

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

.hilo-ladder li[b-c9hykc4l0d] {
    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-c9hykc4l0d] {
    font-family: var(--font-display);
    font-weight: 700;
}

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

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

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

.hilo-ladder li.current[b-c9hykc4l0d] {
    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-c9hykc4l0d] {
    text-shadow: 0 0 8px var(--green);
}

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

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

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

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

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

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

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

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

.hilo-slot[b-c9hykc4l0d] {
    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-c9hykc4l0d]  .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-c9hykc4l0d]  .hl-card.down {
    transform: rotateY(180deg);
}

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

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

.hilo-page[b-c9hykc4l0d]  .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-c9hykc4l0d]  .hl-front.red {
    --s: var(--magenta);
}

.hilo-page[b-c9hykc4l0d]  .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-c9hykc4l0d]  .hl-corner-br {
    left: auto;
    top: auto;
    right: 10px;
    bottom: 8px;
    transform: rotate(180deg);
}

.hilo-page[b-c9hykc4l0d]  .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-c9hykc4l0d]  .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-c9hykc4l0d]  .hl-face.hl-back {
    transform: rotateY(180deg);
}

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

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

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

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

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

.hilo-page[b-c9hykc4l0d]  .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-c9hykc4l0d]  .hl-chip.red {
    color: var(--magenta);
}

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

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

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

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

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

.hilo-btn[b-c9hykc4l0d] {
    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-c9hykc4l0d] {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 13px;
    color: var(--text-dim);
    text-shadow: none;
}

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

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

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

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

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

.hilo-cash[b-c9hykc4l0d] {
    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-c9hykc4l0d] {
    margin-top: 18px;
}

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

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

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

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

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

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

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

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

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

.hilo-page[b-c9hykc4l0d]  .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-c9hykc4l0d] {
    display: flex;
    justify-content: center;
}
/* /Components/Pages/Games/Hold.razor.rz.scp.css */
.hold-page[b-5vqezuez8l] {
    text-align: center;
}

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

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

.hold-stake[b-5vqezuez8l] {
    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-5vqezuez8l] {
    box-shadow: 0 0 26px color-mix(in srgb, var(--c) 55%, transparent);
}

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

.hold-stake-amount[b-5vqezuez8l] {
    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-5vqezuez8l] {
    font-size: 18px;
    margin-left: 2px;
}

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

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

.hold-rules[b-5vqezuez8l] {
    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-5vqezuez8l] {
    color: var(--red);
    text-shadow: 0 0 6px var(--red);
}

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

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

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

.hold-hud-clock[b-5vqezuez8l] {
    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-5vqezuez8l] {
    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-5vqezuez8l] {
    height: 100%;
    width: 0;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}

.hold-hud-status[b-5vqezuez8l] {
    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-5vqezuez8l] {
    color: var(--amber);
    text-shadow: 0 0 8px var(--amber);
}

.hold-hud-status.bad[b-5vqezuez8l] {
    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-5vqezuez8l] {
    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-5vqezuez8l] {
    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-5vqezuez8l] {
    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-5vqezuez8l] {
    fill: none;
    stroke: rgba(35, 242, 255, 0.25);
    stroke-width: 3;
}

.hold-pad-ring[b-5vqezuez8l] {
    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-5vqezuez8l] {
    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-5vqezuez8l] {
    animation: hold-pulse-b-5vqezuez8l 1.4s ease-in-out infinite;
}

@keyframes hold-pulse-b-5vqezuez8l {
    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-5vqezuez8l] {
    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-5vqezuez8l] {
    stroke: var(--amber);
    filter: drop-shadow(0 0 5px var(--amber));
}

.hold-pad.failed[b-5vqezuez8l] {
    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-5vqezuez8l] {
    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-5vqezuez8l 0.18s ease-out, hold-trap-blink-b-5vqezuez8l 0.5s ease-in-out 0.18s infinite alternate;
    z-index: 1;
}

.hold-trap[b-5vqezuez8l]::before,
.hold-trap[b-5vqezuez8l]::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-5vqezuez8l]::after {
    transform: rotate(-45deg);
}

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

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

.hold-giveup[b-5vqezuez8l] {
    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-5vqezuez8l] {
    margin-top: 40px;
}

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

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

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

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

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

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

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

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

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

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

.hold-page[b-5vqezuez8l]  .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/Games/Memory.razor.rz.scp.css */
.memory-page[b-fujkex7di8] {
    text-align: center;
}

.mem-board[b-fujkex7di8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 24px auto 0;
    width: min(100%, 460px);
    user-select: none;
}

.mem-card[b-fujkex7di8] {
    position: relative;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    perspective: 700px;
    -webkit-tap-highlight-color: transparent;
}

.mem-card:disabled[b-fujkex7di8] {
    cursor: default;
}

.mem-face[b-fujkex7di8] {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    overflow: hidden;
    backface-visibility: hidden;
    transition: transform 0.4s ease;
}

.mem-back[b-fujkex7di8] {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--magenta) 30%, transparent), transparent 70%),
        #0d0b16;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--magenta) 45%, transparent);
}

.mem-back svg[b-fujkex7di8] {
    width: 38%;
    fill: none;
    stroke: var(--magenta);
    stroke-width: 1.4;
    stroke-linejoin: round;
    opacity: 0.8;
}

.mem-card:not(:disabled):hover .mem-back[b-fujkex7di8] {
    box-shadow: inset 0 0 0 2px var(--magenta);
}

.mem-front[b-fujkex7di8] {
    transform: rotateY(180deg);
    background: #07070d;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 40%, transparent);
}

.mem-front img[b-fujkex7di8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.mem-card.up .mem-back[b-fujkex7di8] {
    transform: rotateY(180deg);
}

.mem-card.up .mem-front[b-fujkex7di8] {
    transform: rotateY(360deg);
}

.mem-card.matched .mem-front[b-fujkex7di8] {
    box-shadow: 0 0 0 2px var(--green), 0 0 14px color-mix(in srgb, var(--green) 50%, transparent);
}

.mem-status[b-fujkex7di8] {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 14px;
    opacity: 0.9;
}

.mem-status .bad[b-fujkex7di8] {
    color: var(--magenta);
}

.mem-result[b-fujkex7di8] {
    margin-top: 18px;
}

.mem-result-amount[b-fujkex7di8] {
    font-size: 1.8rem;
    font-weight: 700;
}

.mem-result-text[b-fujkex7di8] {
    margin: 6px auto 14px;
    max-width: 420px;
    opacity: 0.8;
}

.win[b-fujkex7di8] {
    color: var(--green);
}

.lose[b-fujkex7di8] {
    color: var(--magenta);
}

.mem-ladder[b-fujkex7di8] {
    margin: 22px auto 0;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 240px;
}

.mem-ladder th[b-fujkex7di8] {
    font-weight: 500;
    opacity: 0.6;
    padding: 4px 14px;
}

.mem-ladder td[b-fujkex7di8] {
    padding: 5px 14px;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.mem-ladder tr.now td[b-fujkex7di8] {
    background: color-mix(in srgb, var(--cyan) 14%, transparent);
    font-weight: 700;
}

.mem-controls[b-fujkex7di8] {
    width: min(100%, 340px);
    margin: 16px auto 0;
}

.mem-controls .btn-primary[b-fujkex7di8] {
    width: 100%;
}

.mem-coins[b-fujkex7di8] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    color: var(--amber);
}

.memory-page[b-fujkex7di8]  .mem-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));
}

.mem-empty[b-fujkex7di8] {
    margin-top: 22px;
    opacity: 0.6;
    font-size: 0.9rem;
}
/* /Components/Pages/Games/Mines.razor.rz.scp.css */
.mines-page[b-oxbz6t3kq9] {
    text-align: center;
}

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

.mines-board[b-oxbz6t3kq9] {
    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-oxbz6t3kq9] {
    animation: mines-shake-b-oxbz6t3kq9 0.45s ease-in-out;
    border-color: var(--red);
    box-shadow: 0 0 26px rgba(255, 59, 74, 0.35);
}

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

.mines-cell[b-oxbz6t3kq9] {
    --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-oxbz6t3kq9] {
    cursor: default;
}

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

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

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

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

.mines-cell.safe[b-oxbz6t3kq9] {
    --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-oxbz6t3kq9 0.35s cubic-bezier(0.2, 1.5, 0.4, 1);
}

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

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

.mines-cell.exploded[b-oxbz6t3kq9] {
    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-oxbz6t3kq9 0.5s ease-out;
}

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

/* The coin cell: found (bright, amber) or, once the game is over, where it was. */
.mines-cell.coin[b-oxbz6t3kq9] {
    --b: var(--amber);
    background: radial-gradient(circle, rgba(255, 178, 62, 0.22), #06060b 75%);
    filter: drop-shadow(0 0 8px rgba(255, 178, 62, 0.6));
}

.mines-cell.coin.spent[b-oxbz6t3kq9] {
    opacity: 0.45;
    filter: none;
}

.mines-page[b-oxbz6t3kq9]  .mines-cell-coin {
    width: 52%;
    height: 52%;
    color: var(--amber);
}

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

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

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

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

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

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

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

.mines-cash[b-oxbz6t3kq9] {
    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-oxbz6t3kq9] {
    opacity: 0.4;
    cursor: default;
}

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

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

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

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

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

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

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

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

.mines-ladder li[b-oxbz6t3kq9] {
    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-oxbz6t3kq9] {
    font-family: var(--font-display);
    font-weight: 700;
}

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

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

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

.mines-ladder li.current[b-oxbz6t3kq9] {
    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-oxbz6t3kq9] {
    text-shadow: 0 0 8px var(--green);
}

.mines-ladder li.next[b-oxbz6t3kq9] {
    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-oxbz6t3kq9] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    color: var(--amber);
}

.mines-page[b-oxbz6t3kq9]  .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/Games/Overload.razor.rz.scp.css */
.overload-page[b-t0p2irfknv] {
    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-t0p2irfknv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 26px;
}

.ov-level[b-t0p2irfknv] {
    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-t0p2irfknv] {
    box-shadow: 0 0 26px color-mix(in srgb, var(--c) 55%, transparent);
}

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

.ov-level-amount[b-t0p2irfknv] {
    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-t0p2irfknv] {
    font-size: 18px;
    margin-left: 2px;
}

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

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

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

.ov-rules[b-t0p2irfknv] {
    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-t0p2irfknv] {
    color: var(--text);
}

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

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

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

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

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

.ov-clock[b-t0p2irfknv] {
    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-t0p2irfknv] {
    color: var(--red);
    text-shadow: 0 0 10px var(--red);
    animation: ov-blink-b-t0p2irfknv 0.6s steps(2) infinite;
}

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

.ov-progress[b-t0p2irfknv] {
    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-t0p2irfknv] {
    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-t0p2irfknv] {
    height: 6px;
    margin-top: 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

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

.ov-stage[b-t0p2irfknv] {
    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-t0p2irfknv] {
    animation: ov-shake-b-t0p2irfknv 0.35s;
}

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

.ov-word[b-t0p2irfknv] {
    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-t0p2irfknv] {
    animation: ov-word-in-b-t0p2irfknv 0.18s ease-out;
}

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

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

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

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

.ov-stage[b-t0p2irfknv]  .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-t0p2irfknv 0.9s ease-out forwards;
}

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

.ov-buttons[b-t0p2irfknv] {
    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-t0p2irfknv]  .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-t0p2irfknv]  .ov-btn:active:not(:disabled) {
    transform: scale(0.95);
}

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

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

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

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

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

.ov-giveup[b-t0p2irfknv] {
    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-t0p2irfknv] {
    margin-top: 40px;
}

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

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

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

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

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

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

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

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

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

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

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

.ov-switches[b-t0p2irfknv] {
    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-t0p2irfknv] {
    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-t0p2irfknv] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

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

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

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

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

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

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

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

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

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

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

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

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

.ov-buttons.six[b-t0p2irfknv]  .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-t0p2irfknv]  .ov-btn {
    background: #1a1a26;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: none;
}

.ov-test-badge[b-t0p2irfknv] {
    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/Games/Puzzle.razor.rz.scp.css */
.puzzle-page[b-m9w297s4io] {
    text-align: center;
    /* A finger sliding over the game must not start selecting words or open the iOS callout. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.pz-test-badge[b-m9w297s4io] {
    font-size: 0.5em;
    letter-spacing: 0.12em;
    padding: 2px 8px;
    border: 1px solid var(--amber);
    border-radius: 999px;
    color: var(--amber);
    vertical-align: middle;
}

.pz-board[b-m9w297s4io] {
    position: relative;
    margin: 16px auto 0;
    /* A tall photo is capped by the screen height (--pz-ar = width / height, set by puzzle.js), so the tray stays in view.
       Nothing is dragged on the board itself, so a finger on it scrolls the page as usual. */
    width: min(100%, 460px, calc(50svh * var(--pz-ar, 0.75)));
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: #07070d;
    user-select: none;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 40%, transparent);
}

/* Pieces are built by wwwroot/puzzle.js, hence ::deep. */
.pz-board[b-m9w297s4io]  .pz-slots {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: color-mix(in srgb, var(--cyan) 22%, transparent);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
    transition: opacity 0.6s;
}

.pz-board[b-m9w297s4io]  .pz-slots path {
    vector-effect: non-scaling-stroke;
}

.pz-board[b-m9w297s4io]  .pz-placed {
    position: absolute;
    display: block;
    pointer-events: none;
}

.pz-board[b-m9w297s4io]  .pz-placed .pz-edge {
    stroke: rgba(7, 7, 13, 0.7);
    stroke-width: 1;
    animation: pz-snap-b-m9w297s4io 0.6s ease-out;
    transition: opacity 0.8s;
}

@keyframes pz-snap-b-m9w297s4io {
    from { stroke: var(--cyan); stroke-width: 4; }
}

.pz-board.pz-solved[b-m9w297s4io]  .pz-edge,
.pz-board.pz-solved[b-m9w297s4io]  .pz-slots {
    opacity: 0;
}

.pz-board[b-m9w297s4io]  .pz-whole {
    position: absolute;
    inset: 0;
    z-index: 5;
    background-size: 100% 100%;
    animation: pz-whole-b-m9w297s4io 0.8s ease-in;
}

@keyframes pz-whole-b-m9w297s4io {
    from { opacity: 0; }
}

/* The tray sits in a neon card like the ones on /games. */
.pz-card[b-m9w297s4io] {
    position: relative;
    margin: 12px auto 0;
    padding: 8px 10px 2px;
    width: min(100%, 460px);
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--cyan) 55%, transparent);
    background: color-mix(in srgb, var(--cyan) 7%, #07070d);
    box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 20%, transparent);
    text-align: left;
}

.pz-card:has(.pz-tray:empty)[b-m9w297s4io] {
    display: none;
}

.pz-card-head[b-m9w297s4io] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 0 4px 2px;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.pz-card-title[b-m9w297s4io] {
    margin-right: auto;
}

.pz-time[b-m9w297s4io] {
    font-family: var(--font-mono);
    color: var(--text);
}

.pz-card-title[b-m9w297s4io] {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cyan);
}

.pz-tray[b-m9w297s4io] {
    display: flex;
    align-items: center;
    padding: 0 0 8px;
    min-height: 60px;
    overflow-x: auto;
    /* puzzle.js handles every touch here itself (scroll sideways or lift a piece), so the browser can't cancel a drag. */
    touch-action: none;
    cursor: grab;
}

/* A neon scrollbar for the tray (same @supports split as the site-wide one in app.css). */
@supports selector(::-webkit-scrollbar) {
    .pz-tray[b-m9w297s4io]::-webkit-scrollbar {
        height: 8px;
    }

    .pz-tray[b-m9w297s4io]::-webkit-scrollbar-track {
        background: color-mix(in srgb, var(--cyan) 10%, transparent);
        border-radius: 999px;
    }

    .pz-tray[b-m9w297s4io]::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, var(--cyan), var(--magenta));
        border: 0;
        border-radius: 999px;
        box-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 60%, transparent);
    }
}

@supports not selector(::-webkit-scrollbar) {
    .pz-tray[b-m9w297s4io] {
        scrollbar-width: thin;
        scrollbar-color: var(--cyan) color-mix(in srgb, var(--cyan) 10%, transparent);
    }
}

/* Tray pieces overlap their empty knob margins (puzzle.js sets negative margins); the tray picks the nearest piece itself. */
.pz-tray[b-m9w297s4io]  .pz-piece {
    flex: none;
    display: block;
    pointer-events: none;
}

/* Until Start: the photo and the tray blurred; the Start button sits over the middle of the tray. */
.pz-board[b-m9w297s4io]  .pz-cover {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: opacity 0.45s;
}

.pz-board[b-m9w297s4io]  .pz-cover.pz-gone {
    opacity: 0;
    pointer-events: none;
}

.pz-board[b-m9w297s4io]  .pz-cover-photo {
    position: absolute;
    inset: -8%;
    background-size: cover;
    background-position: center;
    filter: blur(18px) brightness(0.7);
}

.pz-board.pz-waiting + .pz-card .pz-tray[b-m9w297s4io] {
    filter: blur(8px) brightness(0.7);
}

.pz-start[b-m9w297s4io] {
    position: absolute;
    left: 50%;
    top: 55%;
    z-index: 2;
    transform: translate(-50%, -50%);
    min-width: 170px;
    padding: 14px 34px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    animation: pz-start-pulse-b-m9w297s4io 1.6s ease-in-out infinite;
}

.pz-start:active[b-m9w297s4io] {
    transform: translate(-50%, -50%) scale(0.96);
}

@keyframes pz-start-pulse-b-m9w297s4io {
    0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--magenta) 60%, transparent), 0 0 0 0 color-mix(in srgb, var(--magenta) 50%, transparent); }
    50% { box-shadow: 0 0 28px color-mix(in srgb, var(--magenta) 90%, transparent), 0 0 0 10px transparent; }
}

.pz-start[hidden][b-m9w297s4io] {
    display: none;
}

.pz-tray[b-m9w297s4io]  .pz-miss {
    animation: pz-shake-b-m9w297s4io 0.35s;
}

@keyframes pz-shake-b-m9w297s4io {
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.pz-done[b-m9w297s4io] {
    margin-top: 18px;
}

.pz-done-label[b-m9w297s4io] {
    margin: 0;
    opacity: 0.8;
}

.pz-done-name[b-m9w297s4io] {
    margin: 6px 0 14px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cyan);
}

.pz-empty[b-m9w297s4io],
.pz-preview[b-m9w297s4io] {
    margin-top: 22px;
    opacity: 0.6;
    font-size: 0.9rem;
}

/* Who solved which photo, newest first (shared, in memory; see PuzzleRoom). */
.pz-history[b-m9w297s4io] {
    margin: 30px auto 0;
    width: min(100%, 460px);
    text-align: left;
}

.pz-history h2[b-m9w297s4io] {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--text);
}

.pz-history-empty[b-m9w297s4io] {
    font-size: 13px;
    color: var(--text-dim);
}

.pz-history-list[b-m9w297s4io] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pz-solve[b-m9w297s4io] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border-radius: 10px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    animation: pz-solve-in-b-m9w297s4io 0.35s ease-out;
}

@keyframes pz-solve-in-b-m9w297s4io {
    from { opacity: 0; transform: translateY(-6px); }
}

.pz-solve.mine[b-m9w297s4io] {
    border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
}

.pz-solve-photo[b-m9w297s4io] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: #07070d;
}

.pz-solve-who[b-m9w297s4io],
.pz-solve-result[b-m9w297s4io] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pz-solve-result[b-m9w297s4io] {
    align-items: flex-end;
}

.pz-solve-name[b-m9w297s4io],
.pz-solve-gallery[b-m9w297s4io] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pz-solve-name[b-m9w297s4io] {
    color: var(--text);
}

.pz-solve-gallery[b-m9w297s4io],
.pz-solve-moves[b-m9w297s4io] {
    font-size: 12px;
    color: var(--text-dim);
    white-space: nowrap;
}

.pz-solve-time[b-m9w297s4io] {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--cyan);
}
/* /Components/Pages/Games/Safe.razor.rz.scp.css */
.safe-page[b-zyyctkuq70] {
    text-align: center;
}

/* Title on the left, the prize on the right: one row instead of three. */
.safe-head[b-zyyctkuq70] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    text-align: left;
}

.safe-sub[b-zyyctkuq70] {
    margin: 0;
}

.safe-test-badge[b-zyyctkuq70] {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 8px;
    border: 1px dashed var(--amber);
    border-radius: 6px;
    color: var(--amber);
    font-size: 11px;
    letter-spacing: 2px;
}

/* ---- jackpot ---- */

.safe-jackpot[b-zyyctkuq70] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.safe-jackpot-label[b-zyyctkuq70] {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.safe-jackpot-amount[b-zyyctkuq70] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--amber);
    text-shadow: 0 0 14px rgba(255, 178, 62, 0.55);
}

.safe-jackpot-amount[b-zyyctkuq70]  .safe-jackpot-coin {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 0 8px var(--amber));
}

/* ---- the safe ---- */

/* --lamp is every light on the safe: dim amber at rest, bright while it works, red / green on the answer (set by safe.js). */
.safe-stage[b-zyyctkuq70] {
    --lamp: #7a5a1e;
    --lamp-glow: rgba(255, 178, 62, 0.12);
    /* Capped by the screen height too (the safe is ~1.3x taller than wide), so on a phone the whole safe and the answer
       line fit on one screen. */
    width: min(100%, 380px, calc((100svh - 200px) / 1.3));
    margin: 0 auto;
}

.safe-stage.is-working[b-zyyctkuq70] {
    --lamp: var(--amber);
    --lamp-glow: rgba(255, 178, 62, 0.3);
}

.safe-stage.is-wrong[b-zyyctkuq70] {
    --lamp: var(--red);
    --lamp-glow: rgba(255, 59, 74, 0.55);
}

.safe-stage.is-right[b-zyyctkuq70] {
    --lamp: var(--green);
    --lamp-glow: rgba(57, 255, 176, 0.55);
}

.safe-body[b-zyyctkuq70] {
    position: relative;
    padding: 34px 18px 18px;
    border-radius: 22px;
    background: linear-gradient(160deg, #1d1f28, #0c0d12 70%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 46px var(--lamp-glow),
        0 22px 40px rgba(0, 0, 0, 0.6);
    transition: box-shadow 0.35s;
}

.safe-stage.is-shake .safe-body[b-zyyctkuq70] {
    animation: safe-shake-b-zyyctkuq70 0.5s cubic-bezier(.36, .07, .19, .97);
}

@keyframes safe-shake-b-zyyctkuq70 {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}

/* The row stays clear of the rounded corners; on a narrow (short-screen) safe the gaps shrink instead of the row spilling out. */
.safe-lights[b-zyyctkuq70] {
    position: absolute;
    top: 12px;
    left: 28px;
    right: 28px;
    max-width: 202px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.safe-light[b-zyyctkuq70] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lamp);
    box-shadow: 0 0 8px var(--lamp);
    transition: background 0.3s, box-shadow 0.3s;
}

/* While it "thinks" the lamps run like a chaser; on the answer they all blink together. */
.safe-stage.is-thinking .safe-light[b-zyyctkuq70] {
    animation: safe-chase-b-zyyctkuq70 0.9s linear infinite;
}

.safe-light:nth-child(2)[b-zyyctkuq70] { animation-delay: 0.1s !important; }
.safe-light:nth-child(3)[b-zyyctkuq70] { animation-delay: 0.2s !important; }
.safe-light:nth-child(4)[b-zyyctkuq70] { animation-delay: 0.3s !important; }
.safe-light:nth-child(5)[b-zyyctkuq70] { animation-delay: 0.4s !important; }
.safe-light:nth-child(6)[b-zyyctkuq70] { animation-delay: 0.5s !important; }
.safe-light:nth-child(7)[b-zyyctkuq70] { animation-delay: 0.6s !important; }
.safe-light:nth-child(8)[b-zyyctkuq70] { animation-delay: 0.7s !important; }
.safe-light:nth-child(9)[b-zyyctkuq70] { animation-delay: 0.8s !important; }

@keyframes safe-chase-b-zyyctkuq70 {
    0%, 100% { opacity: 0.25; }
    15% { opacity: 1; }
}

.safe-stage.is-wrong .safe-light[b-zyyctkuq70],
.safe-stage.is-right .safe-light[b-zyyctkuq70] {
    animation: safe-blink-b-zyyctkuq70 0.32s steps(1) 4;
}

@keyframes safe-blink-b-zyyctkuq70 {
    50% { opacity: 0.2; }
}

/* The opening the door sits in; the niche with the prize is behind it. */
.safe-vault[b-zyyctkuq70] {
    position: relative;
    aspect-ratio: 300 / 360;
    perspective: 1100px;
    border-radius: 16px;
    background: #040406;
    box-shadow: inset 0 0 0 3px #08090d, inset 0 0 0 5px rgba(255, 255, 255, 0.05);
}

.safe-niche[b-zyyctkuq70] {
    position: absolute;
    inset: 10px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 70%, rgba(57, 255, 176, 0.18), transparent 60%),
        linear-gradient(#0b0d0c, #050606);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
}

.safe-prize[b-zyyctkuq70] {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s 0.6s, transform 0.6s 0.6s cubic-bezier(.2, 1.6, .4, 1);
}

.safe-stage.is-open .safe-prize[b-zyyctkuq70] {
    opacity: 1;
    transform: scale(1);
}

.safe-pile[b-zyyctkuq70] {
    position: relative;
    width: 150px;
    height: 92px;
    margin: 0 auto;
}

.safe-pile[b-zyyctkuq70]  .safe-pile-coin {
    position: absolute;
    width: 54px;
    height: 54px;
    color: var(--amber);
    filter: drop-shadow(0 0 8px rgba(255, 178, 62, 0.7));
}

.safe-pile[b-zyyctkuq70]  .safe-pile-coin:nth-child(1) { left: 0; bottom: 0; }
.safe-pile[b-zyyctkuq70]  .safe-pile-coin:nth-child(2) { left: 32px; bottom: 0; }
.safe-pile[b-zyyctkuq70]  .safe-pile-coin:nth-child(3) { left: 64px; bottom: 0; }
.safe-pile[b-zyyctkuq70]  .safe-pile-coin:nth-child(4) { left: 96px; bottom: 0; }
.safe-pile[b-zyyctkuq70]  .safe-pile-coin:nth-child(5) { left: 16px; bottom: 22px; }
.safe-pile[b-zyyctkuq70]  .safe-pile-coin:nth-child(6) { left: 78px; bottom: 22px; }
.safe-pile[b-zyyctkuq70]  .safe-pile-coin:nth-child(7) { left: 47px; bottom: 40px; }

.safe-prize-amount[b-zyyctkuq70] {
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 900;
    color: var(--amber);
    text-shadow: 0 0 18px rgba(255, 178, 62, 0.8);
}

/* The door swings out on its hinges (left edge), towards the viewer. */
.safe-door[b-zyyctkuq70] {
    position: absolute;
    inset: 0;
    transform-origin: 0 50%;
    transform-style: preserve-3d;
    transition: transform 1.6s cubic-bezier(.45, .05, .25, 1);
    z-index: 1;
}

.safe-stage.is-open .safe-door[b-zyyctkuq70] {
    transform: rotateY(-108deg);
}

/* Two faces: the front (wheel, window, bolts) hides its back side, the back face is turned around behind it. */
.safe-door-front[b-zyyctkuq70],
.safe-door-back[b-zyyctkuq70] {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.safe-door-back[b-zyyctkuq70] {
    transform: rotateY(180deg);
}

.safe-door-back svg[b-zyyctkuq70] {
    width: 100%;
    height: 100%;
}

.safe-back-plate[b-zyyctkuq70] {
    fill: #17181f;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1.5;
}

.safe-back-panel[b-zyyctkuq70] {
    fill: #101117;
    stroke: #262833;
    stroke-width: 2;
}

.safe-back-rod[b-zyyctkuq70] {
    fill: #3a3d4a;
}

.safe-back-box[b-zyyctkuq70] {
    fill: #22242e;
    stroke: #3a3d4a;
    stroke-width: 2;
}

.safe-door-art[b-zyyctkuq70] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}

.safe-door-plate[b-zyyctkuq70] {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1.5;
}

.safe-door-led[b-zyyctkuq70] {
    fill: none;
    stroke: var(--lamp);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 5px var(--lamp));
    transition: stroke 0.3s;
}

.safe-rivet[b-zyyctkuq70] {
    fill: #4a4d5c;
    stroke: #101117;
    stroke-width: 1;
}

.safe-hinge[b-zyyctkuq70] {
    fill: #2c2f3a;
    stroke: #0a0b0f;
    stroke-width: 1.5;
}

.safe-bolts[b-zyyctkuq70] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -14px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 18% 0;
    z-index: -1;
}

.safe-bolt[b-zyyctkuq70] {
    display: block;
    width: 34px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(#8b8fa3, #4a4d5c 60%, #2a2c35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    transition: transform 0.45s cubic-bezier(.6, -0.3, .4, 1.3);
}

.safe-stage.is-unbolted .safe-bolt[b-zyyctkuq70] {
    transform: translateX(-26px);
}

/* ---- on the door: code dial, wheel and the OPEN hub ----
   Sizes are in container units (the door is the container, 1cqw = 1% of its width) so everything scales with the safe.
   The door is 300 x 360: the dial takes ~13%-36% of its height, the wheel 56% of its width centred at 63%. */
.safe-door-front[b-zyyctkuq70] {
    container-type: inline-size;
}

/* A steel bezel holding three recessed number barrels. */
.safe-dial[b-zyyctkuq70] {
    position: absolute;
    top: 12.5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2.2cqw;
    padding: 2.2cqw 2.8cqw;
    border-radius: 3.4cqw;
    background: linear-gradient(#0a0b10, #050507);
    box-shadow:
        0 0 0 0.8cqw #2e313d,
        0 0 0 1.1cqw #0b0c11,
        0 0 0 1.4cqw rgba(255, 255, 255, 0.08),
        inset 0 2px 8px rgba(0, 0, 0, 0.95);
}

.safe-drum[b-zyyctkuq70] {
    width: 15cqw;
    display: flex;
    flex-direction: column;
    border-radius: 1.8cqw;
    overflow: hidden;
    /* A barrel: dark at the top and bottom edges, lit in the middle. */
    background: linear-gradient(#030304, #1c1d26 30%, #22232d 50%, #1c1d26 70%, #030304);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.safe-drum-btn[b-zyyctkuq70] {
    height: 6cqw;
    padding: 0;
    border: 0;
    background: none;
    color: #6e7186;
    font-size: 3cqw;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    transition: color 0.15s;
}

.safe-drum-btn:hover:not(:disabled)[b-zyyctkuq70],
.safe-drum-btn:active:not(:disabled)[b-zyyctkuq70] {
    color: var(--amber);
}

.safe-drum-btn:disabled[b-zyyctkuq70] {
    opacity: 0.25;
    cursor: default;
}

/* The digit window: thin lamp-coloured lines above and below, like a reading mark. */
.safe-drum-digit[b-zyyctkuq70] {
    font-family: var(--font-mono);
    font-size: 9.5cqw;
    line-height: 11.5cqw;
    color: var(--lamp);
    text-shadow: 0 0 8px var(--lamp);
    border-top: 1px solid color-mix(in srgb, var(--lamp) 35%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--lamp) 35%, transparent);
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
    transition: color 0.3s, transform 0.15s;
}

/* At rest the digits are bright amber, not the dim resting lamp, so they read as something to set. */
.safe-stage:not(.is-working):not(.is-wrong):not(.is-right) .safe-drum-digit[b-zyyctkuq70] {
    color: var(--amber);
    text-shadow: 0 0 8px rgba(255, 178, 62, 0.6);
    border-color: rgba(255, 178, 62, 0.3);
}

.safe-drum-digit.scan[b-zyyctkuq70] {
    color: #fff;
    transform: scale(1.15);
}

/* The recess drawn on the door art (circle r 76 at 150, 226.8) sits exactly under the wheel. */
.safe-wheel-well[b-zyyctkuq70] {
    fill: rgba(0, 0, 0, 0.35);
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1.5;
}

.safe-wheel[b-zyyctkuq70] {
    position: absolute;
    left: 50%;
    top: 63%;
    width: 56%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

/* display: block - an inline svg sits on the text baseline and ends up a few px above the box's centre, which is
   where the OPEN button is centred. */
.safe-wheel svg[b-zyyctkuq70] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    will-change: transform;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7));
}

.safe-wheel-ring[b-zyyctkuq70] {
    fill: none;
    stroke: #6c7084;
    stroke-width: 10;
}

.safe-wheel-notch[b-zyyctkuq70] {
    fill: #3b3e4c;
}

.safe-wheel-ring-inner[b-zyyctkuq70] {
    fill: none;
    stroke: var(--lamp);
    stroke-width: 1.5;
    opacity: 0.7;
    transition: stroke 0.3s;
}

.safe-spoke[b-zyyctkuq70] {
    fill: #585c6e;
    stroke: #1b1c24;
    stroke-width: 1.5;
}

.safe-spoke-knob[b-zyyctkuq70] {
    fill: #9da1b4;
    stroke: #1b1c24;
    stroke-width: 2;
}

/* The round OPEN button is the wheel's hub (34% of the wheel's width, covering the spokes' inner ends): a domed steel cap
   inside a lamp-coloured ring. */
.safe-open[b-zyyctkuq70] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34%;
    aspect-ratio: 1;
    padding: 0;
    margin: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 0.7cqw solid var(--lamp);
    background: radial-gradient(circle at 38% 30%, #6a6e82, #34363f 55%, #1e2027);
    box-shadow:
        0 0 12px var(--lamp-glow),
        inset 0 0 0 0.9cqw #1a1b22,
        inset 0 0 0 1.2cqw rgba(255, 255, 255, 0.12),
        inset 0 -1.2cqw 2cqw rgba(0, 0, 0, 0.5);
    color: var(--amber);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 3.6cqw;
    letter-spacing: 0.3cqw;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.1s;
}

.safe-open span[b-zyyctkuq70] {
    display: block;
    text-shadow: 0 0 8px rgba(255, 178, 62, 0.7);
}

.safe-open:hover:not(:disabled)[b-zyyctkuq70] {
    box-shadow:
        0 0 22px rgba(255, 178, 62, 0.5),
        inset 0 0 0 0.9cqw #1a1b22,
        inset 0 0 0 1.2cqw rgba(255, 255, 255, 0.12),
        inset 0 -1.2cqw 2cqw rgba(0, 0, 0, 0.5);
}

.safe-open:active:not(:disabled)[b-zyyctkuq70] {
    transform: translate(-50%, -50%) scale(0.94);
}

.safe-open:disabled[b-zyyctkuq70] {
    cursor: default;
}

.safe-stage:not(.is-working):not(.is-wrong):not(.is-right) .safe-open:not(:disabled)[b-zyyctkuq70] {
    border-color: var(--amber);
    animation: safe-open-pulse-b-zyyctkuq70 2.4s ease-in-out infinite;
}

@keyframes safe-open-pulse-b-zyyctkuq70 {
    50% {
        box-shadow:
            0 0 24px rgba(255, 178, 62, 0.45),
            inset 0 0 0 0.9cqw #1a1b22,
            inset 0 0 0 1.2cqw rgba(255, 255, 255, 0.12),
            inset 0 -1.2cqw 2cqw rgba(0, 0, 0, 0.5);
    }
}

/* While the mechanism thinks, a lamp glows inside the empty cap. */
.safe-stage.is-thinking .safe-open[b-zyyctkuq70] {
    background:
        radial-gradient(circle, color-mix(in srgb, var(--lamp) 55%, transparent) 0 18%, transparent 45%),
        radial-gradient(circle at 38% 30%, #6a6e82, #34363f 55%, #1e2027);
    animation: safe-think-b-zyyctkuq70 0.9s ease-in-out infinite;
}

@keyframes safe-think-b-zyyctkuq70 {
    50% { filter: brightness(1.35); }
}

.safe-feet[b-zyyctkuq70] {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: -10px;
    display: flex;
    justify-content: space-between;
}

.safe-feet span[b-zyyctkuq70] {
    width: 40px;
    height: 10px;
    border-radius: 0 0 6px 6px;
    background: #0d0e13;
}

/* Coins flying out of the open safe (made by safe.js). */
.safe-stage[b-zyyctkuq70]  .safe-fly {
    position: fixed;
    width: 26px;
    height: 26px;
    pointer-events: none;
    color: var(--amber);
    z-index: 50;
    filter: drop-shadow(0 0 6px rgba(255, 178, 62, 0.8));
}

.safe-result[b-zyyctkuq70] {
    min-height: 26px;
    margin: 16px 0 8px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}

.safe-result.wrong[b-zyyctkuq70] {
    color: var(--red);
    text-shadow: 0 0 10px rgba(255, 59, 74, 0.6);
}

.safe-result.right[b-zyyctkuq70] {
    color: var(--green);
    text-shadow: 0 0 10px rgba(57, 255, 176, 0.6);
}

/* ---- under the safe ---- */

.safe-controls[b-zyyctkuq70] {
    width: min(100%, 380px);
    margin: 0 auto;
}

.safe-close[b-zyyctkuq70] {
    width: auto;
    padding: 10px 26px;
}

.safe-tried[b-zyyctkuq70] {
    margin: 0;
    font-size: 14px;
    color: var(--amber);
}

.safe-sound[b-zyyctkuq70] {
    border: 0;
    padding: 0;
    background: none;
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
}

/* ---- shared history ---- */

.safe-history[b-zyyctkuq70] {
    margin-top: 34px;
    text-align: left;
}

.safe-history-head[b-zyyctkuq70] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.safe-history-head h2[b-zyyctkuq70] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--text);
}

.safe-history-head span[b-zyyctkuq70] {
    margin-left: auto;
}

.safe-history-head span[b-zyyctkuq70],
.safe-history-empty[b-zyyctkuq70] {
    font-size: 13px;
    color: var(--text-dim);
}

.safe-history-list[b-zyyctkuq70] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.safe-try[b-zyyctkuq70] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    animation: safe-try-in-b-zyyctkuq70 0.35s ease-out;
}

@keyframes safe-try-in-b-zyyctkuq70 {
    from { opacity: 0; transform: translateY(-6px); }
}

.safe-try.mine[b-zyyctkuq70] {
    border-color: rgba(35, 242, 255, 0.3);
}

.safe-try-code[b-zyyctkuq70] {
    font-family: var(--font-mono);
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--text);
}

.safe-try-name[b-zyyctkuq70] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dim);
}

.safe-try-state[b-zyyctkuq70] {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.safe-try.checking .safe-try-state[b-zyyctkuq70] {
    color: var(--amber);
    animation: safe-blink-b-zyyctkuq70 0.9s steps(1) infinite;
}

.safe-try.wrong .safe-try-state[b-zyyctkuq70] {
    color: var(--red);
}

.safe-try.opened[b-zyyctkuq70] {
    border-color: rgba(57, 255, 176, 0.5);
    box-shadow: 0 0 14px rgba(57, 255, 176, 0.2);
}

.safe-try.opened .safe-try-state[b-zyyctkuq70] {
    color: var(--green);
}

.safe-try-time[b-zyyctkuq70] {
    font-size: 12px;
    color: var(--text-dim);
    white-space: nowrap;
}

@media (max-width: 420px) {
    .safe-page[b-zyyctkuq70] {
        padding-top: 16px;
    }

    .safe-sub[b-zyyctkuq70] {
        display: none;
    }

    .safe-body[b-zyyctkuq70] {
        padding: 28px 12px 12px;
    }

    .safe-try[b-zyyctkuq70] {
        grid-template-columns: auto 1fr auto;
    }

    .safe-try-time[b-zyyctkuq70] {
        display: none;
    }
}
/* /Components/Pages/Games/ScratchCard.razor.rz.scp.css */
.scratch-page[b-uahj79gosx] {
    text-align: center;
}

.scratch-card[b-uahj79gosx] {
    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-uahj79gosx] {
    box-shadow: 0 0 34px rgba(255, 178, 62, 0.7), inset 0 0 30px rgba(255, 178, 62, 0.14);
}

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

.scratch-brand[b-uahj79gosx] {
    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-uahj79gosx] {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--amber);
}

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

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

.scratch-cell[b-uahj79gosx] {
    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-uahj79gosx] {
    color: var(--magenta);
    text-shadow: 0 0 8px var(--magenta);
}

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

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

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

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

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

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

@keyframes scratch-win-b-uahj79gosx {
    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-uahj79gosx],
.scratch-dust[b-uahj79gosx] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

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

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

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

.scratch-result[b-uahj79gosx] {
    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-uahj79gosx] {
    opacity: 1;
    transform: scale(1);
}

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

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

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

.scratch-btn[b-uahj79gosx] {
    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-uahj79gosx] {
    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-uahj79gosx] {
    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-uahj79gosx] {
    color: var(--amber);
    text-shadow: 0 0 8px var(--amber);
}

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

.scratch-cell[b-uahj79gosx]  .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-uahj79gosx] {
    color: var(--amber);
    text-shadow: 0 0 8px var(--amber), 0 0 22px var(--amber);
}
/* /Components/Pages/Games/SlotMachine.razor.rz.scp.css */
.slot-page[b-a6vbdaz7ru] {
    text-align: center;
}

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

.slot-machine[b-a6vbdaz7ru] {
    --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-a6vbdaz7ru] {
    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-a6vbdaz7ru] {
    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-a6vbdaz7ru] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

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

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

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

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

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

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

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

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

.slot-window[b-a6vbdaz7ru] {
    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-a6vbdaz7ru]::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-a6vbdaz7ru] {
    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-a6vbdaz7ru] {
    will-change: transform;
}

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

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

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

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

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

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

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

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

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

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

.slot-payline[b-a6vbdaz7ru] {
    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-a6vbdaz7ru] {
    position: relative;
    width: 26px;
    height: calc(var(--cell) * 2.4);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.slot-lever-arm[b-a6vbdaz7ru] {
    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-a6vbdaz7ru] {
    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-a6vbdaz7ru] {
    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-a6vbdaz7ru] {
    animation: slot-pull-b-a6vbdaz7ru 0.6s ease-in-out;
}

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

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

.slot-result[b-a6vbdaz7ru] {
    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-a6vbdaz7ru] {
    opacity: 1;
    transform: scale(1);
}

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

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

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

@keyframes slot-cabinet-b-a6vbdaz7ru {
    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-a6vbdaz7ru] {
    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-a6vbdaz7ru] {
    box-shadow: 0 0 26px rgba(35, 242, 255, 0.85);
}

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

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

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

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

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

.slot-pay-row[b-a6vbdaz7ru] {
    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-a6vbdaz7ru] {
    display: flex;
    justify-content: flex-start;
    gap: 2px;
    font-size: 14px;
}

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

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

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

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

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

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

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

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

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

.slot-result.none[b-a6vbdaz7ru],
.slot-pay-amount.none[b-a6vbdaz7ru] {
    color: var(--text-dim);
}

.slot-pay-amount.coin[b-a6vbdaz7ru] {
    color: var(--amber);
}
/* /Components/Pages/Games/Wheel.razor.rz.scp.css */
.wheel-page[b-n0sn2hb2zb] {
    text-align: center;
}

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

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

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

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

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

.wheel-sector text[b-n0sn2hb2zb] {
    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-n0sn2hb2zb] {
    fill: color-mix(in srgb, var(--c) 55%, #07070d);
    animation: wheel-win-b-n0sn2hb2zb 0.9s ease-in-out infinite alternate;
}

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

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

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

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

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

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

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

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

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

.wheel-pointer[b-n0sn2hb2zb] {
    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-n0sn2hb2zb] {
    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-n0sn2hb2zb] {
    fill: #fff;
}

.wheel-hub[b-n0sn2hb2zb] {
    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-n0sn2hb2zb] {
    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-n0sn2hb2zb] {
    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-n0sn2hb2zb] {
    cursor: default;
    color: rgba(255, 255, 255, 0.45);
    text-shadow: none;
}

.wheel-result[b-n0sn2hb2zb] {
    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-n0sn2hb2zb] {
    opacity: 1;
    transform: scale(1);
}

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

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

.wheel-result.special[b-n0sn2hb2zb] {
    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-n0sn2hb2zb]  .wheel-coin {
    color: var(--c);
    filter: drop-shadow(0 0 4px var(--c));
}
/* /Components/Pages/TaskPhoto.razor.rz.scp.css */
.tp-page[b-bxuec5sixx] {
    max-width: 640px;
}

.tp-back-btn[b-bxuec5sixx] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    text-align: center;
    text-decoration: none;
}

.tp-head[b-bxuec5sixx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.tp-head .tp-title[b-bxuec5sixx] {
    margin-bottom: 0;
}

.tp-left[b-bxuec5sixx] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.tp-left-label[b-bxuec5sixx] {
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.tp-left-time[b-bxuec5sixx] {
    font-family: var(--font-mono);
    font-size: 22px;
    color: var(--amber);
}

.tp-title[b-bxuec5sixx] {
    margin-bottom: 6px;
}

.tp-hint-old[b-bxuec5sixx] {
    margin: 0 0 6px;
    font-size: 15px;
}

.tp-state[b-bxuec5sixx] {
    text-align: center;
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--text-dim);
}

.tp-state.open[b-bxuec5sixx] {
    color: var(--green);
}

.tp-gate[b-bxuec5sixx] {
    margin: 8px 0 22px;
    padding: 22px 20px;
    border-radius: 18px;
    text-align: center;
    border: 1px solid rgba(35, 242, 255, 0.35);
    background: rgba(35, 242, 255, 0.05);
}

.tp-gate-title[b-bxuec5sixx] {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.tp-gate p[b-bxuec5sixx] {
    margin: 0 0 14px;
    color: var(--text-dim);
    font-size: 14px;
}

.tp-gate a[b-bxuec5sixx] {
    display: inline-block;
    text-decoration: none;
}


/* What to photograph: a card above the camera, in plain words. */
.tp-what[b-bxuec5sixx] {
    margin: 0 0 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 43, 214, 0.6);
    background: rgba(255, 43, 214, 0.08);
    text-align: left;
}

.tp-what-label[b-bxuec5sixx] {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd6f6;
}

.tp-what-text[b-bxuec5sixx] {
    display: block;
    margin-top: 4px;
    font-size: 18px;
    line-height: 1.35;
}
/* /Components/Pages/Tasks.razor.rz.scp.css */
.tasks-page[b-i25dazmgeu] {
    max-width: 640px;
}

/* ---- Gate cards: not locked / not approved / closed ---- */

.tasks-gate[b-i25dazmgeu] {
    margin: 8px 0 22px;
    padding: 22px 20px;
    border-radius: 18px;
    text-align: center;
    border: 1px solid rgba(35, 242, 255, 0.35);
    background: rgba(35, 242, 255, 0.05);
    box-shadow: 0 0 18px rgba(35, 242, 255, 0.12);
}

.tasks-gate-title[b-i25dazmgeu] {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--text);
    margin-bottom: 8px;
}

.tasks-gate p[b-i25dazmgeu] {
    margin: 0 0 14px;
    color: var(--text-dim);
    font-size: 14px;
}

.tasks-gate-btn[b-i25dazmgeu] {
    display: inline-block;
    text-decoration: none;
}

/* ---- Category chips ---- */

.tasks-cats[b-i25dazmgeu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.tasks-cat[b-i25dazmgeu] {
    --hue: 190;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    color: var(--text-dim);
    background: var(--panel);
    border: 1px solid var(--panel-border);
}

.tasks-cat.on[b-i25dazmgeu] {
    color: var(--text);
    border-color: hsl(var(--hue) 100% 65% / 0.7);
    background: hsl(var(--hue) 80% 40% / 0.28);
    box-shadow: 0 0 12px hsl(var(--hue) 100% 55% / 0.3);
}

.tasks-cat .n[b-i25dazmgeu] {
    margin-left: 8px;
    font-size: 11.5px;
    opacity: 0.7;
}

.cdot[b-i25dazmgeu] {
    display: inline-block;
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: hsl(var(--hue, 320) 95% 62%);
    box-shadow: 0 0 7px hsl(var(--hue, 320) 100% 60% / 0.9);
}

/* A category without a colour: black with a white glow. */
.cdot.none[b-i25dazmgeu] {
    background: #000;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
}

/* ---- Task cards ---- */

.tasks-list[b-i25dazmgeu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-card[b-i25dazmgeu] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    text-align: left;
    font: inherit;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(168, 85, 255, 0.4);
    background: rgba(168, 85, 255, 0.06);
    box-shadow: 0 0 12px rgba(168, 85, 255, 0.14);
    transition: transform 0.15s, box-shadow 0.2s;
}

.task-card:hover[b-i25dazmgeu] {
    transform: translateY(-1px);
    box-shadow: 0 0 22px rgba(168, 85, 255, 0.35);
}

/* Can't be started right now: the reason is written on the card, the card still opens. */
.task-card.off[b-i25dazmgeu] {
    opacity: 0.55;
    border-color: var(--panel-border);
    background: var(--panel);
    box-shadow: none;
}

/* The task that is running: a pulsing cyan glow. */
.task-card.active[b-i25dazmgeu] {
    border-color: rgba(35, 242, 255, 0.85);
    background: rgba(35, 242, 255, 0.08);
    animation: task-pulse-b-i25dazmgeu 1.6s ease-in-out infinite;
}

.task-card.active .task-reason[b-i25dazmgeu] {
    color: #7ff6ff;
    font-weight: 600;
}

@keyframes task-pulse-b-i25dazmgeu {
    0%, 100% { box-shadow: 0 0 8px rgba(35, 242, 255, 0.25); }
    50% { box-shadow: 0 0 26px rgba(35, 242, 255, 0.75); }
}

/* Sent, waiting for Glorija. */
.task-card.waiting[b-i25dazmgeu] {
    border-color: rgba(255, 178, 62, 0.65);
    background: rgba(255, 178, 62, 0.06);
    box-shadow: 0 0 12px rgba(255, 178, 62, 0.18);
}

/* Not accepted / time ran out. */
.task-card.failed[b-i25dazmgeu] {
    border-color: rgba(255, 70, 90, 0.7);
    background: rgba(255, 70, 90, 0.07);
    box-shadow: 0 0 12px rgba(255, 70, 90, 0.2);
}

.task-card.failed .task-reason[b-i25dazmgeu] {
    color: #ff8795;
    font-weight: 600;
}

.task-done-count[b-i25dazmgeu] {
    color: #b8ffd9;
    border-color: rgba(80, 255, 160, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .task-card.active[b-i25dazmgeu] { animation: none; box-shadow: 0 0 18px rgba(35, 242, 255, 0.5); }
}

.task-main[b-i25dazmgeu] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-title[b-i25dazmgeu] {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.task-title-blur[b-i25dazmgeu] {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    user-select: none;
}

.task-chips[b-i25dazmgeu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.task-chip[b-i25dazmgeu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    border: 1px solid var(--panel-border);
}

/* a task Glorija added in the last 7 days (TaskCatalog.NewDays): a filled, glowing capsule in front of the others */
.task-new[b-i25dazmgeu] {
    color: #fff;
    font-weight: 600;
    background: linear-gradient(135deg, #ff2bd6, #9b5cff);
    border-color: rgba(255, 120, 230, 0.75);
    box-shadow: 0 0 10px rgba(255, 43, 214, 0.55);
}

.task-time[b-i25dazmgeu] {
    color: #bff3ff;
    border-color: rgba(35, 242, 255, 0.35);
}

.task-time svg[b-i25dazmgeu] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.task-diff[b-i25dazmgeu] {
    --d: 150;
    color: hsl(var(--d) 100% 78%);
    border-color: hsl(var(--d) 80% 60% / 0.5);
}

.task-diff.d1[b-i25dazmgeu] {
    --d: 45;
}

.task-diff.d2[b-i25dazmgeu] {
    --d: 350;
}

.task-reason[b-i25dazmgeu] {
    font-size: 12.5px;
    color: var(--amber);
}

/* Right column: the reward at the top, the done count at the bottom. */
.task-side[b-i25dazmgeu] {
    flex: none;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
}

.task-reward[b-i25dazmgeu] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 18px;
    color: #ffd98a;
    text-shadow: 0 0 8px rgba(255, 178, 62, 0.5);
}

/* The coin is its own component, so the scoped style needs ::deep to reach it. */
.task-reward[b-i25dazmgeu]  .task-coin {
    width: 22px;
    height: 22px;
    color: var(--amber);
    filter: drop-shadow(0 0 5px rgba(255, 178, 62, 0.55));
}

/* ---- Under the list: suggest a task ---- */

.tasks-suggest[b-i25dazmgeu] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 24px;
    padding: 16px;
    border-radius: 16px;
    border: 1.5px dashed rgba(255, 43, 214, 0.55);
    background: linear-gradient(90deg, rgba(255, 43, 214, 0.1), rgba(168, 85, 255, 0.04));
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.tasks-suggest:hover[b-i25dazmgeu],
.tasks-suggest:focus-visible[b-i25dazmgeu] {
    border-color: #ff8deb;
    background: linear-gradient(90deg, rgba(255, 43, 214, 0.18), rgba(168, 85, 255, 0.07));
    box-shadow: 0 0 18px rgba(255, 43, 214, 0.3);
}

.tasks-suggest-ico[b-i25dazmgeu] {
    flex: none;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1.5px solid rgba(255, 43, 214, 0.65);
    background: radial-gradient(circle at 40% 35%, rgba(255, 141, 235, 0.3), rgba(255, 43, 214, 0.08) 70%), #0b0b14;
    color: #ff8deb;
    box-shadow: 0 0 12px rgba(255, 43, 214, 0.3);
}

.tasks-suggest-ico svg[b-i25dazmgeu] {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 6px rgba(255, 43, 214, 0.8));
}

.tasks-suggest-main[b-i25dazmgeu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tasks-suggest-main b[b-i25dazmgeu] {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #ffd6f6;
}

.tasks-suggest-main span[b-i25dazmgeu] {
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--text-dim);
}

.tasks-suggest-go[b-i25dazmgeu] {
    flex: none;
    width: 22px;
    height: 22px;
    color: #ff8deb;
}
/* /Components/Pages/TaskSuggest.razor.rz.scp.css */
/* ---- What kind of idea: two big switches ---- */

.ts-modes[b-o9s5bgp6qn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.ts-mode[b-o9s5bgp6qn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 10px 14px;
    border-radius: 16px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-dim);
    font-family: var(--font-body);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
}

.ts-mode svg[b-o9s5bgp6qn] {
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
}

.ts-mode b[b-o9s5bgp6qn] {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ts-mode span[b-o9s5bgp6qn] {
    font-size: 12.5px;
}

.ts-mode.on[b-o9s5bgp6qn] {
    color: #fff;
    border-color: rgba(255, 43, 214, 0.75);
    background: linear-gradient(180deg, rgba(255, 43, 214, 0.18), rgba(255, 43, 214, 0.05));
    box-shadow: 0 0 16px rgba(255, 43, 214, 0.3);
}

.ts-mode.on svg[b-o9s5bgp6qn] {
    color: #ff8deb;
    filter: drop-shadow(0 0 6px rgba(255, 43, 214, 0.8));
}

.ts-mode:disabled[b-o9s5bgp6qn] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- The form ---- */

.ts-card[b-o9s5bgp6qn] {
    margin-bottom: 16px;
    padding: 18px 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(168, 85, 255, 0.35);
    background: rgba(168, 85, 255, 0.05);
}

.ts-card .field span i[b-o9s5bgp6qn],
.ts-group-title i[b-o9s5bgp6qn] {
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.35);
    margin-left: 6px;
}

.ts-select[b-o9s5bgp6qn] {
    appearance: none;
    -webkit-appearance: none;
    padding: 11px 38px 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323f2ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    outline: none;
}

.ts-select:focus[b-o9s5bgp6qn] {
    border-color: rgba(35, 242, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(35, 242, 255, 0.12);
}

.ts-select option[b-o9s5bgp6qn] {
    background: #11111c;
    color: var(--text);
}

.ts-group-title[b-o9s5bgp6qn] {
    margin: 4px 0 10px;
    font-size: 12.5px;
    color: var(--text-dim);
}

/* The three photos: a numbered badge in front of each label, as on the task page. */
.ts-photos .field[b-o9s5bgp6qn] {
    margin-bottom: 10px;
}

.ts-photos[b-o9s5bgp6qn] {
    margin-bottom: 16px;
}

.ts-photo span[b-o9s5bgp6qn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-photo em[b-o9s5bgp6qn] {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--magenta);
    color: #fff;
    font-style: normal;
    font-family: var(--font-display);
    font-size: 11px;
    box-shadow: 0 0 6px rgba(255, 43, 214, 0.6);
}

.ts-chips[b-o9s5bgp6qn] {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.ts-chip[b-o9s5bgp6qn] {
    --c: 57, 255, 176;
    flex: 1;
    padding: 10px 6px;
    border-radius: 999px;
    border: 1px solid rgba(var(--c), 0.35);
    background: transparent;
    color: rgba(var(--c), 0.8);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

.ts-chip.d-medium[b-o9s5bgp6qn] { --c: 255, 178, 62; }
.ts-chip.d-hard[b-o9s5bgp6qn] { --c: 255, 70, 90; }

.ts-chip.on[b-o9s5bgp6qn] {
    color: #fff;
    border-color: rgb(var(--c));
    background: rgba(var(--c), 0.18);
    box-shadow: 0 0 12px rgba(var(--c), 0.4);
}

.ts-error[b-o9s5bgp6qn] {
    margin-bottom: 14px;
}

.ts-send[b-o9s5bgp6qn] {
    padding: 15px 20px;
    font-size: 16px;
}

.ts-back[b-o9s5bgp6qn] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 24px;
    padding: 14px 20px;
    text-align: center;
    text-decoration: none;
}

/* ---- After sending ---- */

.ts-done[b-o9s5bgp6qn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px 22px;
    border-radius: 16px;
    border: 1px solid rgba(57, 255, 176, 0.5);
    background: rgba(57, 255, 176, 0.06);
}

.ts-done > svg[b-o9s5bgp6qn] {
    width: 52px;
    height: 52px;
    padding: 10px;
    border-radius: 50%;
    color: var(--green);
    border: 2px solid var(--green);
    box-shadow: 0 0 16px rgba(57, 255, 176, 0.45);
}

.ts-done-title[b-o9s5bgp6qn] {
    margin: 14px 0 6px;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--green);
}

.ts-done p[b-o9s5bgp6qn] {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--text-dim);
}

.ts-done-actions[b-o9s5bgp6qn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.ts-done-actions a[b-o9s5bgp6qn] {
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

.ts-done-actions .btn-ghost[b-o9s5bgp6qn] {
    padding: 13px 16px;
}

.ts-gate[b-o9s5bgp6qn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}
/* /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);
}

/* Turn the taken photo: a glass pill over the bottom of the picture (between the corners), only while it is looked at. */
.verify-rotate[b-o4kw6m0836] {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(35, 242, 255, 0.6);
    background: rgba(5, 5, 10, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 0 14px rgba(35, 242, 255, 0.3);
    cursor: pointer;
}

.verify-rotate svg[b-o4kw6m0836] {
    width: 20px;
    height: 20px;
}

.verify-rotate:active[b-o4kw6m0836] {
    background: rgba(35, 242, 255, 0.2);
}

.verify[data-state="preview"] .verify-rotate[b-o4kw6m0836] {
    display: inline-flex;
}

.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));
}

.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);
    display: grid;
    place-items: center;
    color: #fff;
}

.verify-shutter-core svg[b-o4kw6m0836] {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.35));
}

.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; }
}

/* The camera-off picture can be tapped as well as the button below it. */
.verify[data-state="idle"] .verify-off[b-o4kw6m0836],
.verify[data-state="error"] .verify-off[b-o4kw6m0836] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.verify[data-state="idle"] .verify-off:active[b-o4kw6m0836],
.verify[data-state="error"] .verify-off:active[b-o4kw6m0836] {
    background: rgba(35, 242, 255, 0.06);
}

.verify-off:focus-visible[b-o4kw6m0836] {
    outline: 1px solid rgba(35, 242, 255, 0.6);
    outline-offset: -6px;
    border-radius: 16px;
}
/* /Components/RatingStars.razor.rz.scp.css */
.stars[b-v3tqmxjti4] {
    display: flex;
    gap: 6px;
    justify-content: center;
    --star-gold: #ffc53d;
}

.stars.input[b-v3tqmxjti4] {
    flex-direction: row-reverse;
}

.star[b-v3tqmxjti4] {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--star-gold);
    line-height: 0;
}

.star svg[b-v3tqmxjti4] {
    width: 100%;
    height: 100%;
    fill: rgba(255, 197, 61, 0.06);
    stroke: rgba(255, 197, 61, 0.5);
    stroke-width: 1.4;
    transition: fill 0.15s, stroke 0.15s, filter 0.15s, transform 0.15s;
}

/* ---- Input: big targets, the star under the finger and the ones before it light up ---- */

.stars.input .star[b-v3tqmxjti4] {
    width: 52px;
    height: 52px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.stars.input .star:hover svg[b-v3tqmxjti4],
.stars.input .star:hover ~ .star svg[b-v3tqmxjti4],
.stars.input .star:focus-visible svg[b-v3tqmxjti4],
.stars.input .star:focus-visible ~ .star svg[b-v3tqmxjti4] {
    fill: var(--star-gold);
    stroke: #ffd877;
    filter: drop-shadow(0 0 7px rgba(255, 190, 50, 0.6));
}

.stars.input .star:hover svg[b-v3tqmxjti4] {
    transform: scale(1.12);
}

.stars.input .star:disabled[b-v3tqmxjti4] {
    cursor: default;
    opacity: 0.6;
}

/* ---- Show: the saved rating, pops in once ---- */

.stars.show .star[b-v3tqmxjti4] {
    width: 34px;
    height: 34px;
}

.stars.show .star.on svg[b-v3tqmxjti4] {
    fill: var(--star-gold);
    stroke: #ffd877;
    filter: drop-shadow(0 0 6px rgba(255, 190, 50, 0.55));
    animation: star-pop-b-v3tqmxjti4 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both;
    animation-delay: calc(var(--i) * 70ms);
}

.stars.show.none .star svg[b-v3tqmxjti4] {
    fill: rgba(255, 255, 255, 0.03);
    stroke: rgba(255, 255, 255, 0.22);
}

@keyframes star-pop-b-v3tqmxjti4 {
    0% { transform: scale(0.4) rotate(-25deg); }
    100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .stars.show .star.on svg[b-v3tqmxjti4] { animation: none; }
}
/* /Components/TaskCamera.razor.rz.scp.css */
.tc[b-v3rm2hjkgo] {
    display: block;
    margin-bottom: 16px;
    text-align: center;
}

.tc-frame[b-v3rm2hjkgo] {
    position: relative;
    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);
}

.tc-video[b-v3rm2hjkgo],
.tc-shot[b-v3rm2hjkgo] {
    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. */
.tc[data-mirror] .tc-video[b-v3rm2hjkgo] {
    transform: scaleX(-1);
}

.tc[data-state="live"] .tc-video[b-v3rm2hjkgo],
.tc[data-state="countdown"] .tc-video[b-v3rm2hjkgo],
.tc[data-state="preview"] .tc-shot[b-v3rm2hjkgo],
.tc[data-state="sending"] .tc-shot[b-v3rm2hjkgo] {
    display: block;
}

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

/* Turn the taken photo: a glass pill over the bottom of the picture, only while it is looked at. */
.tc-rotate[b-v3rm2hjkgo] {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(35, 242, 255, 0.6);
    background: rgba(5, 5, 10, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--cyan);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 0 14px rgba(35, 242, 255, 0.3);
    cursor: pointer;
}

.tc-rotate svg[b-v3rm2hjkgo] {
    width: 20px;
    height: 20px;
}

.tc-rotate:active[b-v3rm2hjkgo] {
    background: rgba(35, 242, 255, 0.2);
}

.tc[data-state="preview"] .tc-rotate[b-v3rm2hjkgo] {
    display: inline-flex;
}

.tc-off[b-v3rm2hjkgo] {
    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;
}

.tc-off[b-v3rm2hjkgo] {
    cursor: pointer;
}

.tc-off:focus-visible[b-v3rm2hjkgo] {
    outline: 1px solid rgba(35, 242, 255, 0.6);
    outline-offset: -6px;
    border-radius: 16px;
}

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

.tc[data-state="live"] .tc-off[b-v3rm2hjkgo],
.tc[data-state="countdown"] .tc-off[b-v3rm2hjkgo],
.tc[data-state="preview"] .tc-off[b-v3rm2hjkgo],
.tc[data-state="sending"] .tc-off[b-v3rm2hjkgo] {
    display: none;
}

/* The self-timer number over the picture. */
.tc-count[b-v3rm2hjkgo] {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 96px;
    color: #fff;
    text-shadow: 0 0 22px var(--magenta), 0 0 6px #000;
    pointer-events: none;
}

.tc[data-state="countdown"] .tc-count[b-v3rm2hjkgo] {
    display: flex;
}

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

.tc-flash.is-firing[b-v3rm2hjkgo] {
    animation: tc-flash-b-v3rm2hjkgo 0.35s ease-out;
}

@keyframes tc-flash-b-v3rm2hjkgo {
    from { opacity: 0.85; }
    to { opacity: 0; }
}

.tc-status[b-v3rm2hjkgo] {
    min-height: 20px;
    margin: 12px 0 0;
    font-size: 13.5px;
    color: var(--text-dim);
}

.tc[data-state="error"] .tc-status[b-v3rm2hjkgo],
.tc[data-state="refused"] .tc-status[b-v3rm2hjkgo] {
    color: var(--amber);
}

.tc[data-state="done"] .tc-status[b-v3rm2hjkgo] {
    color: var(--green);
}

.tc-controls[b-v3rm2hjkgo] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}

.tc[data-state="idle"] .tc-controls-start[b-v3rm2hjkgo],
.tc[data-state="starting"] .tc-controls-start[b-v3rm2hjkgo],
.tc[data-state="error"] .tc-controls-start[b-v3rm2hjkgo],
.tc[data-state="refused"] .tc-controls-start[b-v3rm2hjkgo],
.tc[data-state="live"] .tc-controls-live[b-v3rm2hjkgo],
.tc[data-state="countdown"] .tc-controls-countdown[b-v3rm2hjkgo],
.tc[data-state="preview"] .tc-controls-preview[b-v3rm2hjkgo],
.tc[data-state="sending"] .tc-controls-preview[b-v3rm2hjkgo] {
    display: flex;
}

.tc[data-state="starting"] .tc-controls-start button[b-v3rm2hjkgo],
.tc[data-state="sending"] .tc-controls-preview button[b-v3rm2hjkgo] {
    opacity: 0.5;
    pointer-events: none;
}

/* Three equal-width slots around the shutter: the timer pill (wider) and the flip button (narrower) can't push it off centre. */
.tc[data-state="live"] .tc-controls-live[b-v3rm2hjkgo] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.tc-controls-live .tc-timer[b-v3rm2hjkgo] {
    justify-self: start;
}

.tc-controls-live .tc-flip[b-v3rm2hjkgo] {
    justify-self: end;
}

.tc-controls-live[b-v3rm2hjkgo] {
    justify-content: space-between;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.tc-shutter[b-v3rm2hjkgo] {
    position: relative;
    width: 84px;
    height: 84px;
    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);
    -webkit-tap-highlight-color: transparent;
}

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

.tc-shutter-core[b-v3rm2hjkgo] {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #ff8deb, var(--magenta) 60%, #b0108f);
    box-shadow: 0 0 14px var(--magenta);
    display: grid;
    place-items: center;
    color: #fff;
}

.tc-shutter-core svg[b-v3rm2hjkgo] {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.35));
}

/* The photo is not allowed at the moment: the shutter stays, but dim. */
.tc[data-open="0"] .tc-shutter[b-v3rm2hjkgo] {
    opacity: 0.4;
}

.tc-timer[b-v3rm2hjkgo] {
    min-width: 92px;
    padding: 8px 12px;
    border-radius: 999px;
    font: inherit;
    font-size: 12.5px;
    color: var(--text-dim);
    cursor: pointer;
    border: 1px solid var(--panel-border);
    background: var(--panel);
}

.tc[data-timer] .tc-timer[b-v3rm2hjkgo] {
    color: var(--cyan);
    border-color: rgba(35, 242, 255, 0.6);
    background: rgba(35, 242, 255, 0.1);
}

.tc-flip[b-v3rm2hjkgo] {
    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;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tc-flip svg[b-v3rm2hjkgo] {
    width: 26px;
    height: 26px;
}

/* A hidden flip button still takes its place, so the shutter stays in the middle. */
.tc-flip[hidden][b-v3rm2hjkgo] {
    display: inline-flex;
    visibility: hidden;
}

.tc[data-state="done"] .tc-controls-done[b-v3rm2hjkgo] {
    display: flex;
}


/* Viewfinder corners (only when the page asks for them), the same as on /verify. */
.tc-corner[b-v3rm2hjkgo] {
    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;
}

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

.tc[data-state="done"] .tc-corner[b-v3rm2hjkgo] {
    border-color: var(--green);
    filter: drop-shadow(0 0 4px var(--green));
}
/* /Shop/Break/BreakView.razor.rz.scp.css */
.shop-rules[b-h32upbz3fn] {
    margin: 0 0 14px;
    padding-left: 20px;
}

.shop-rules li[b-h32upbz3fn] {
    margin-bottom: 4px;
}

.shop-hint[b-h32upbz3fn] {
    margin: 0;
    font-size: 13.5px;
    color: var(--amber);
}
/* /Shop/Core/ShopGate.razor.rz.scp.css */
.shop-gate[b-pvgiyua6x3] {
    margin: 8px 0 22px;
    padding: 22px 20px;
    border-radius: 18px;
    text-align: center;
    border: 1px solid rgba(35, 242, 255, 0.35);
    background: rgba(35, 242, 255, 0.05);
    box-shadow: 0 0 18px rgba(35, 242, 255, 0.12);
}

.shop-gate-title[b-pvgiyua6x3] {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--text);
    margin-bottom: 8px;
}

.shop-gate p[b-pvgiyua6x3] {
    margin: 0 0 14px;
    color: var(--text-dim);
    font-size: 14px;
}

.shop-gate-btn[b-pvgiyua6x3] {
    display: inline-block;
    text-decoration: none;
}
/* /Shop/Core/ShopTag.razor.rz.scp.css */
.shop-tag[b-t7z9v8tui0] {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    background: #0b0a14;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}

/* Same lift and purple glow as a card in the task list, plus a cyan neon edge. */
.shop-tag-link:hover[b-t7z9v8tui0] {
    transform: translateY(-1px);
    border-color: rgba(35, 242, 255, 0.6);
    box-shadow: 0 0 22px rgba(168, 85, 255, 0.35), 0 0 8px rgba(35, 242, 255, 0.3);
}

/* Business-card proportions, 7:4. Pictures: 1400 x 800 px recommended; other sizes are cropped. */
.shop-tag-img[b-t7z9v8tui0] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 7 / 4;
    overflow: hidden;
    background: linear-gradient(135deg, #2a1050, #0d3a4a);
}

.shop-tag-img img[b-t7z9v8tui0] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
}

.shop-tag-img-empty[b-t7z9v8tui0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-display);
    font-size: 44px;
    color: rgba(255, 255, 255, 0.35);
}

/* The dark label strip under the picture, with an amber edge on top like a shelf label. */
.shop-tag-label[b-t7z9v8tui0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #0b0a14;
    border-top: 3px solid var(--amber);
}

.shop-tag-title[b-t7z9v8tui0] {
    min-width: 0;
    font-family: var(--font-display);
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.6px;
    color: var(--text);
}

.shop-tag-price[b-t7z9v8tui0] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: baseline;
    gap: 7px;
}

.shop-tag-now[b-t7z9v8tui0] {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--amber);
}

.shop-tag[b-t7z9v8tui0]  .shop-tag-coin {
    width: 17px;
    height: 17px;
    align-self: center;
    color: var(--amber);
}

.shop-tag-state[b-t7z9v8tui0] {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--green);
    border: 1px solid rgba(57, 255, 176, 0.5);
    background: rgba(57, 255, 176, 0.07);
}

.shop-tag-state-wait[b-t7z9v8tui0] {
    color: var(--amber);
    border-color: rgba(255, 178, 62, 0.5);
    background: rgba(255, 178, 62, 0.07);
    text-transform: none;
    letter-spacing: 0.5px;
}

.shop-tag-owned .shop-tag-label[b-t7z9v8tui0] {
    border-top-color: var(--green);
}

/* The bigger tag at the top of an item's page. */
.shop-tag-large[b-t7z9v8tui0] {
    margin-bottom: 20px;
}

.shop-tag-large .shop-tag-label[b-t7z9v8tui0] {
    padding: 16px 20px;
}

.shop-tag-large .shop-tag-title[b-t7z9v8tui0] {
    font-size: 16px;
}

.shop-tag-large .shop-tag-now[b-t7z9v8tui0] {
    font-size: 30px;
}
/* /Shop/RandomTimeCut/RandomTimeCutView.razor.rz.scp.css */
.shop-rules[b-pcauwmusmq] {
    margin: 0 0 14px;
    padding-left: 20px;
}

.shop-rules li[b-pcauwmusmq] {
    margin-bottom: 4px;
}

.shop-hint[b-pcauwmusmq] {
    margin: 0;
    font-size: 13.5px;
    color: var(--amber);
}
/* /Shop/Shop.razor.rz.scp.css */
.shop-page[b-gkcevlvha0] {
    max-width: 640px;
}

.shop-grid[b-gkcevlvha0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 26px 20px;
    padding-top: 14px;
}

.shop-soon[b-gkcevlvha0] {
    margin-top: 30px;
    text-align: center;
    font-style: italic;
    color: var(--text-dim);
}
/* /Shop/ShopItem.razor.rz.scp.css */
.shop-page[b-txvp07boag] {
    max-width: 560px;
}

.shop-message[b-txvp07boag] {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    color: var(--text);
    border: 1px solid rgba(35, 242, 255, 0.35);
    background: rgba(35, 242, 255, 0.06);
}

.shop-message-error[b-txvp07boag] {
    border-color: rgba(255, 80, 120, 0.5);
    background: rgba(255, 80, 120, 0.08);
}

.shop-about[b-txvp07boag] {
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 16px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dim);
}

.shop-about[b-txvp07boag]  p {
    margin: 0 0 12px;
}

.shop-about[b-txvp07boag]  p:last-child {
    margin-bottom: 0;
}

/* The Buy / Open button sits at the bottom of the description card, in the coin yellow. */
.shop-action[b-txvp07boag] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
    padding: 13px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 178, 62, 0.65);
    background: rgba(255, 178, 62, 0.12);
    color: var(--amber);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 178, 62, 0.25);
    transition: box-shadow 0.2s ease, background 0.2s ease;
}

.shop-action:hover:not(:disabled)[b-txvp07boag] {
    background: rgba(255, 178, 62, 0.2);
    box-shadow: 0 0 20px rgba(255, 178, 62, 0.45);
}

.shop-action:disabled[b-txvp07boag] {
    opacity: 0.55;
    cursor: default;
}

.shop-back[b-txvp07boag] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
}

.shop-action[b-txvp07boag]  .shop-coin {
    width: 18px;
    height: 18px;
}
/* /Shop/ShowTimer/ShowTimerView.razor.rz.scp.css */
.shop-rules[b-23l8mxfhgb] {
    margin: 0 0 14px;
    padding-left: 20px;
}

.shop-rules li[b-23l8mxfhgb] {
    margin-bottom: 4px;
}

.shop-hint[b-23l8mxfhgb] {
    margin: 0;
    font-size: 13.5px;
    color: var(--amber);
}
/* /Shop/UnfreezeTimer/UnfreezeTimerView.razor.rz.scp.css */
.shop-rules[b-0pup06gxs0] {
    margin: 0 0 14px;
    padding-left: 20px;
}

.shop-rules li[b-0pup06gxs0] {
    margin-bottom: 4px;
}

.shop-hint[b-0pup06gxs0] {
    margin: 0;
    font-size: 13.5px;
    color: var(--amber);
}