/* _content/DataTalks.GameZone.UI/Play/GamePlayer.razor.rz.scp.css */
/* Static rendering: every state is in the markup and the engine toggles the hidden attribute —
   it must win over every display rule below, and the step wrappers must not change the layout. */
[hidden][b-ewinrhrz2v] {
    display: none !important;
}

.pl-step[b-ewinrhrz2v],
[data-scratch="win"][b-ewinrhrz2v],
[data-scratch="lose"][b-ewinrhrz2v] {
    display: contents;
}

/* Participant runtime — themed by inline styles from the game's resolved theme.
   Fixed illustrative values mirror the approved participant mockups. */

.pl-restart-control[b-ewinrhrz2v] {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 24px);
}

.pl-restart-control__button[b-ewinrhrz2v] {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid currentColor;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.pl-restart-control__button:disabled[b-ewinrhrz2v] {
    cursor: wait;
    opacity: .6;
}

.pl-restart-control__error[b-ewinrhrz2v] {
    max-width: 240px;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    color: #a92323;
    font-size: 13px;
}

.pl-screen[b-ewinrhrz2v] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    /* Top-aligned, not stretched: the column below sizes itself to the visible viewport. */
    align-items: flex-start;
    text-align: center;
}

.pl-content[b-ewinrhrz2v] {
    width: 100%;
    max-width: 460px;
    /* The visible viewport on phones (100svh excludes the collapsing address bar; 100vh is the
       fallback), padding included, so the footer sits at the bottom of the first screen and the
       fan sees the sponsor without scrolling. */
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: 36px 20px 18px;
    /* Query container: header/footer image heights are expressed in cqw so they scale with this column. */
    container-type: inline-size;
}

/* An embed fills the CMS column. Its height must never depend on the iframe height:
   the parent follows this content as forms, errors, images and result pages change. */
.pl-screen--embedded[b-ewinrhrz2v],
.pl-screen--embedded .pl-content[b-ewinrhrz2v] {
    min-height: 0;
    max-width: none;
}

/* Opted in from the Template step: the website's own background, images and gradients show through. */
.pl-screen--embedded.pl-screen--see-through[b-ewinrhrz2v],
.pl-screen--embedded.pl-screen--see-through .pl-content[b-ewinrhrz2v],
.pl-screen--embedded.pl-screen--see-through .pl-boot[b-ewinrhrz2v] {
    background: transparent !important;
}

.pl-screen--embedded .pl-content[b-ewinrhrz2v] {
    padding-top: 20px;
}

.pl-screen--embedded .pl-body[b-ewinrhrz2v],
.pl-screen--embedded .pl-center[b-ewinrhrz2v] {
    flex: none;
}

.pl-screen--embedded .pl-header-img[b-ewinrhrz2v],
.pl-screen--embedded .pl-sponsor img[b-ewinrhrz2v] {
    max-height: 200px;
}

.pl-card[b-ewinrhrz2v],
.pl-card__input[b-ewinrhrz2v],
.pl-card__select[b-ewinrhrz2v] {
    box-sizing: border-box;
    min-width: 0;
}

.pl-top[b-ewinrhrz2v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pl-body[b-ewinrhrz2v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 14px;
    width: 100%;
}

.pl-bottom[b-ewinrhrz2v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
}

.pl-header-img[b-ewinrhrz2v] {
    max-width: 80%;
    object-fit: contain;
}

.pl-crest-chip[b-ewinrhrz2v] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
}

.pl-header-text[b-ewinrhrz2v] {
    font-size: 15px;
    font-weight: 600;
}

/* Only a theme color of its own: without one, an organizer's custom CSS keeps styling the header text and headlines. */
.pl-screen--header-text .pl-header-text[b-ewinrhrz2v] {
    color: var(--pl-header-text);
}

.pl-screen--headline .pl-headline[b-ewinrhrz2v] {
    color: var(--pl-headline);
}

.pl-countdown[b-ewinrhrz2v] {
    font-size: 11px;
    letter-spacing: .1em;
    padding: 5px 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .12);
}

.pl-kickoff[b-ewinrhrz2v] {
    font-size: 11px;
    letter-spacing: .06em;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
}

.pl-headline[b-ewinrhrz2v] {
    font-size: 24px;
    font-weight: 700;
}

.pl-message[b-ewinrhrz2v] {
    font-size: 14px;
    opacity: .8;
    max-width: 280px;
    /* The builder's message fields are text areas: keep the organizer's line breaks. */
    white-space: pre-line;
}

.pl-teams[b-ewinrhrz2v] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    width: 100%;
}

.pl-team[b-ewinrhrz2v] {
    display: grid;
    grid-template-rows: 76px auto;
    justify-items: center;
    align-items: center;
    row-gap: 8px;
    width: 110px;
}

.pl-team__name[b-ewinrhrz2v] {
    font-size: 13px;
    opacity: .85;
    align-self: start;
}

.pl-crest-img[b-ewinrhrz2v] {
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.pl-crest[b-ewinrhrz2v] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.pl-vs[b-ewinrhrz2v] {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    align-self: flex-start;
    margin-top: 21px;
    white-space: nowrap;
}

.pl-vs-img[b-ewinrhrz2v] {
    width: 36px;
    height: 36px;
    object-fit: contain;
    align-self: flex-start;
    margin-top: 20px;
}

.pl-steppers[b-ewinrhrz2v] {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.pl-stepper[b-ewinrhrz2v] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    padding: 6px 8px;
}

.pl-stepper b[b-ewinrhrz2v] {
    font-size: 24px;
    min-width: 34px;
}

.pl-stepper button[b-ewinrhrz2v] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: inherit;
    font-size: 18px;
    cursor: pointer;
}

.pl-stepper button:hover[b-ewinrhrz2v] {
    background: rgba(255, 255, 255, .18);
}

.pl-action[b-ewinrhrz2v] {
    margin-top: auto;
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 16px 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
}

.pl-action:disabled[b-ewinrhrz2v] {
    opacity: .5;
    cursor: not-allowed;
}

/* The --pl-form-* fallbacks are the stock white form; a form with its own colors defines them (.pl-card--themed). */
.pl-card[b-ewinrhrz2v] {
    background: var(--pl-form-bg, #FFFFFF);
    color: var(--pl-form-text, #3F4254);
    border-radius: 16px;
    padding: 22px 18px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

/* --pl-form-bg and --pl-form-text come inline from the theme; every other part is mixed from those two. */
.pl-card--themed[b-ewinrhrz2v] {
    --pl-form-muted: color-mix(in srgb, var(--pl-form-text) 65%, var(--pl-form-bg));
    --pl-form-border: color-mix(in srgb, var(--pl-form-text) 20%, var(--pl-form-bg));
    --pl-form-field: color-mix(in srgb, var(--pl-form-text) 4%, var(--pl-form-bg));
    --pl-form-sold-out: color-mix(in srgb, var(--pl-form-text) 8%, var(--pl-form-bg));
}

.pl-card--themed .pl-card__input[b-ewinrhrz2v] {
    background: var(--pl-form-field);
}

.pl-card--themed .pl-card__input[b-ewinrhrz2v]::placeholder {
    color: var(--pl-form-muted);
}

.pl-card__input[b-ewinrhrz2v] {
    border: 1px solid var(--pl-form-border, #D7DAE7);
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 14px;
    color: var(--pl-form-text, #3F4254);
}

.pl-card__select[b-ewinrhrz2v] {
    border: 1px solid var(--pl-form-border, #D7DAE7);
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 14px;
    color: var(--pl-form-text, #3F4254);
    background: var(--pl-form-field, #FFFFFF);
    width: 100%;
}

.pl-card__help[b-ewinrhrz2v] {
    margin-top: -6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--pl-form-muted, #7E8299);
}

.pl-card__phone[b-ewinrhrz2v] {
    display: flex;
    gap: 8px;
}

.pl-card__dob[b-ewinrhrz2v] {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.pl-card__dob legend[b-ewinrhrz2v] {
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.pl-card__dob-parts[b-ewinrhrz2v] {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 6px;
}

.pl-card__dob-parts select[b-ewinrhrz2v] {
    min-width: 0;
    padding: 13px 6px;
}

.pl-card__date[b-ewinrhrz2v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.pl-card__phone-code[b-ewinrhrz2v] {
    width: 124px;
    flex-shrink: 0;
    /* Native selects clip vertically padded content (the flag emoji is taller than the text line);
       no vertical padding + stretched height lets the browser center the "🇬🇷 +30" itself. */
    padding: 0 8px;
    line-height: normal;
    align-self: stretch;
}

.pl-card__phone-number[b-ewinrhrz2v] {
    flex: 1 1 0%;
    min-width: 0;
}

.pl-card__input--invalid[b-ewinrhrz2v] {
    border-color: #F95540;
}

/* Choice: one pick shown as tick boxes; the ticked box takes the theme's button colour (--pl-choice-accent, set inline). */
.pl-card__choice[b-ewinrhrz2v] {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pl-card__choice legend[b-ewinrhrz2v] {
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.pl-card__choice-option[b-ewinrhrz2v] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--pl-form-border, #D7DAE7);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    cursor: pointer;
}

.pl-card__choice-option:has(input:checked)[b-ewinrhrz2v] {
    border-color: var(--pl-choice-accent, #3F4254);
}

.pl-card__choice--invalid .pl-card__choice-option[b-ewinrhrz2v] {
    border-color: #F95540;
}

/* The radio stays focusable and announced; the square beside it is what the fan sees. */
.pl-card__choice-option input[b-ewinrhrz2v] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.pl-card__choice-box[b-ewinrhrz2v] {
    flex-shrink: 0;
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid var(--pl-form-border, #D7DAE7);
    border-radius: 5px;
    box-sizing: border-box;
    background: var(--pl-form-field, #FFFFFF);
}

.pl-card__choice-option input:checked + .pl-card__choice-box[b-ewinrhrz2v] {
    background: var(--pl-choice-accent, #3F4254);
    border-color: var(--pl-choice-accent, #3F4254);
}

.pl-card__choice-option input:checked + .pl-card__choice-box[b-ewinrhrz2v]::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--pl-choice-tick, #FFFFFF);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pl-card__choice-option input:focus-visible + .pl-card__choice-box[b-ewinrhrz2v] {
    outline: 2px solid var(--pl-choice-accent, #3F4254);
    outline-offset: 2px;
}

.pl-card__choice-label[b-ewinrhrz2v] {
    flex: 1;
    min-width: 0;
}

.pl-card__choice-note[b-ewinrhrz2v] {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--pl-form-muted, #7E8299);
}

.pl-card__choice-option--sold-out[b-ewinrhrz2v] {
    cursor: not-allowed;
    background: var(--pl-form-sold-out, #F5F6FA);
}

.pl-card__choice-option--sold-out .pl-card__choice-box[b-ewinrhrz2v],
.pl-card__choice-option--sold-out .pl-card__choice-label[b-ewinrhrz2v] {
    opacity: .45;
}

.pl-card__consent[b-ewinrhrz2v] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--pl-form-muted, #7E8299);
    cursor: pointer;
}

.pl-card .pl-action[b-ewinrhrz2v] {
    margin-top: 8px;
}

.pl-center[b-ewinrhrz2v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.pl-result-icon[b-ewinrhrz2v] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: rgba(255, 255, 255, .1);
}

.pl-result-icon--success[b-ewinrhrz2v] {
    background: #D2FED7;
    color: #256652;
}

.pl-footer-text[b-ewinrhrz2v] {
    font-size: 11px;
    opacity: .6;
}

.pl-sponsor[b-ewinrhrz2v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.pl-sponsor img[b-ewinrhrz2v] {
    max-width: 80%;
    object-fit: contain;
}

/* Organizer preview (opened via the preview token) — a fixed ribbon so test sessions are never mistaken for the live game. */
.pl-preview-badge[b-ewinrhrz2v] {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    background: rgba(0, 0, 0, .65);
    color: #fff;
}

.pl-card__consent a[b-ewinrhrz2v] {
    color: inherit;
    text-decoration: underline;
    margin-left: 4px;
}

.pl-card__consent a.pl-card__consent-label[b-ewinrhrz2v] {
    margin-left: 0;
}

/* Boot screen: the organization/template logo fades from minimum to full opacity on the themed
   background for a second, then the overlay lifts and the game underneath is already there. All
   on CSS timers, so a slow or broken logo never holds the fan. */
.pl-boot[b-ewinrhrz2v] {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pl-boot-out-b-ewinrhrz2v .45s ease-out 1.04s both;
    pointer-events: none;
}

.pl-boot__logo[b-ewinrhrz2v] {
    width: 112px;
    height: 112px;
    object-fit: contain;
    animation: pl-boot-logo-b-ewinrhrz2v .9s ease-out both;
}

@keyframes pl-boot-logo-b-ewinrhrz2v {
    from { opacity: .12; transform: scale(.94); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pl-boot-out-b-ewinrhrz2v {
    to { opacity: 0; visibility: hidden; }
}

.pl-screen[b-ewinrhrz2v] {
    animation: pl-fade-in-b-ewinrhrz2v .45s ease-out both;
}

@keyframes pl-fade-in-b-ewinrhrz2v {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pl-boot[b-ewinrhrz2v] { animation-duration: 0s; animation-delay: .6s; }
    .pl-boot__logo[b-ewinrhrz2v] { animation: none; }
    .pl-screen[b-ewinrhrz2v] { animation: none; }
    .pl-scratch__pending i[b-ewinrhrz2v] { animation: none; }
    [data-scratch="win"][b-ewinrhrz2v], [data-scratch="lose"][b-ewinrhrz2v] { animation: none; }
}

/* Desktop: the phone layout stretches to the viewport and pins the button to the bottom,
   which scatters a compact game across a tall monitor. Let the column keep its natural
   height, sit vertically centered, and keep the button and footer close to the game. */
@media (min-width: 768px) {
    .pl-screen[b-ewinrhrz2v] {
        align-items: center;
    }

    .pl-content[b-ewinrhrz2v] {
        min-height: 0;
        padding: 40px 20px 28px;
    }

    .pl-body[b-ewinrhrz2v] {
        flex: 0 0 auto;
    }

    .pl-action[b-ewinrhrz2v] {
        margin-top: 10px;
    }
}

/* Big screens: play.js (fitToViewport) measures the column and sets an inline zoom so it
   fills the viewport height without scrolling (layout, type, crests and the cqw-based
   images all grow together). */

.pl-card__error[b-ewinrhrz2v] {
    color: #F95540;
    font-size: 12px;
    text-align: left;
    margin-top: -6px;
}

.pl-restart[b-ewinrhrz2v] {
    font-size: 12px;
    opacity: .6;
    letter-spacing: .06em;
}

/* Arcade: the Lose page's "you scored 7, you needed 10" line, above the organizer's message. */
.pl-message--strong[b-ewinrhrz2v] {
    font-weight: 700;
    opacity: 1;
}

/* Thank-you page: the organizer's rich text arrives as markup, outside this component's scope. */
.pl-message--rich[b-ewinrhrz2v] {
    white-space: normal;
}

.pl-message--rich[b-ewinrhrz2v]  p {
    margin: 0;
}

.pl-message--rich[b-ewinrhrz2v]  a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.pl-banners[b-ewinrhrz2v] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
}

.pl-banner[b-ewinrhrz2v] {
    display: block;
    overflow: hidden;
    border-radius: 12px;
}

.pl-banner img[b-ewinrhrz2v] {
    display: block;
    width: 100%;
    height: auto;
}

.pl-redirect-now[b-ewinrhrz2v] {
    font-size: 13px;
    color: inherit;
    text-decoration: underline;
}

/* Wheel of Fortune */
.pl-wheel[b-ewinrhrz2v] {
    width: min(80%, 300px);
    margin: 6px auto 0;
}

.pl-result-icon--win[b-ewinrhrz2v] {
    background: #FFE9A8;
    color: #7A5300;
}

/* The prize: a big framed square block in the theme's text color, like a badge you show at the counter. */
.pl-prize[b-ewinrhrz2v] {
    width: 220px;
    height: 220px;
    border: 3px solid currentColor;
    border-radius: 22px;
    padding: 14px;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl-prize__img[b-ewinrhrz2v] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.pl-prize-label[b-ewinrhrz2v] {
    font-size: 22px;
    font-weight: 700;
}

/* Top ranks win: the fan's rank above the board, the board as a compact list with their own row picked out. Colors inherit
   the page (or, in full screen, the glass card), so the board reads the same in both layouts. */
.pl-ranks__rank[b-ewinrhrz2v] {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
}

.pl-ranks__best[b-ewinrhrz2v],
.pl-ranks__final[b-ewinrhrz2v] {
    font-size: 14px;
    opacity: .75;
}

.pl-ranks__board[b-ewinrhrz2v] {
    width: 100%;
    max-width: 360px;
    margin: 4px auto;
    text-align: left;
}

.pl-ranks__title[b-ewinrhrz2v] {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
}

.pl-ranks__list[b-ewinrhrz2v] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pl-ranks__list[b-ewinrhrz2v]  .pl-ranks__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.pl-ranks__list[b-ewinrhrz2v]  .pl-ranks__row:nth-child(odd) {
    background: rgba(127, 127, 127, .08);
}

.pl-ranks__list[b-ewinrhrz2v]  .pl-ranks__row--you {
    background: rgba(127, 127, 127, .22);
    font-weight: 700;
}

.pl-ranks__list[b-ewinrhrz2v]  .pl-ranks__place {
    flex: 0 0 28px;
    opacity: .7;
}

.pl-ranks__list[b-ewinrhrz2v]  .pl-ranks__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-ranks__list[b-ewinrhrz2v]  .pl-ranks__score {
    flex: 0 0 auto;
    font-weight: 700;
}

.pl-prize--unframed[b-ewinrhrz2v] {
    border: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.pl-prize--unframed .pl-prize__img[b-ewinrhrz2v] {
    border-radius: 0;
}

.pl-spin-error[b-ewinrhrz2v] {
    font-size: 12px;
    color: #FFB4A8;
}

.pl-result-img[b-ewinrhrz2v] {
    width: 110px;
    height: 110px;
    object-fit: contain;
}

/* Quiz — one question at a time. */
.pl-quiz[b-ewinrhrz2v] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pl-quiz__meta[b-ewinrhrz2v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .75;
}

.pl-quiz__seconds[b-ewinrhrz2v] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 13px;
}

.pl-quiz__seconds--low[b-ewinrhrz2v] {
    color: #FFB4A8;
}

/* The clock: a bar that drains linearly over the question's seconds (CSS keeps it smooth; the page only ticks the number). */
.pl-timer[b-ewinrhrz2v] {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    overflow: hidden;
}

.pl-timer__fill[b-ewinrhrz2v] {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 999px;
    transform-origin: left center;
    animation: pl-timer-drain-b-ewinrhrz2v linear forwards;
}

.pl-timer__fill--paused[b-ewinrhrz2v] {
    animation-play-state: paused;
}

@keyframes pl-timer-drain-b-ewinrhrz2v {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.pl-quiz__headline[b-ewinrhrz2v] {
    font-size: 13px;
    opacity: .7;
}

.pl-quiz__image[b-ewinrhrz2v] {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 14px;
}

.pl-quiz__question[b-ewinrhrz2v] {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.pl-quiz__answers[b-ewinrhrz2v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.pl-quiz__answer[b-ewinrhrz2v] {
    width: 100%;
    border: 1.5px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    color: inherit;
    border-radius: 12px;
    padding: 13px 14px;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s, opacity .15s;
}

.pl-quiz__answer:hover:not(:disabled)[b-ewinrhrz2v] {
    background: rgba(255, 255, 255, .16);
}

.pl-quiz__answer:disabled[b-ewinrhrz2v],
.pl-quiz__tile:disabled[b-ewinrhrz2v] {
    cursor: default;
}

.pl-quiz__grid[b-ewinrhrz2v] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.pl-quiz__tile[b-ewinrhrz2v] {
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    padding: 0;
    cursor: pointer;
    transition: border-color .15s, opacity .15s, transform .15s;
}

.pl-quiz__tile:hover:not(:disabled)[b-ewinrhrz2v] {
    transform: scale(1.02);
}

.pl-quiz__tile img[b-ewinrhrz2v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Pick and reveal states — shared by text answers and picture tiles. */
.pl-quiz__answer--picked[b-ewinrhrz2v] {
    border-color: currentColor;
    background: rgba(255, 255, 255, .2);
}

.pl-quiz__answer--correct[b-ewinrhrz2v] {
    border-color: #4ADE80;
    background: rgba(74, 222, 128, .22);
}

.pl-quiz__answer--wrong[b-ewinrhrz2v] {
    border-color: #F87171;
    background: rgba(248, 113, 113, .22);
}

.pl-quiz__answer--dim[b-ewinrhrz2v] {
    opacity: .45;
}

.pl-quiz__verdict[b-ewinrhrz2v] {
    font-size: 15px;
    font-weight: 700;
}

.pl-quiz__verdict--correct[b-ewinrhrz2v] {
    color: #4ADE80;
}

.pl-quiz__error[b-ewinrhrz2v] {
    font-size: 12px;
    color: #FFB4A8;
}

/* Score page: the number, then the "average vs you" slider over a small histogram of everyone's scores. */
.pl-score[b-ewinrhrz2v] {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
}

.pl-score__total[b-ewinrhrz2v] {
    font-size: 24px;
    font-weight: 600;
    opacity: .6;
}

.pl-score__text[b-ewinrhrz2v] {
    font-size: 14px;
    opacity: .8;
}

.pl-slicer[b-ewinrhrz2v] {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 22px;
}

.pl-slicer__bars[b-ewinrhrz2v] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 34px;
    padding: 0 2px;
}

.pl-slicer__bars span[b-ewinrhrz2v] {
    flex: 1;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: rgba(255, 255, 255, .28);
}

.pl-slicer__track[b-ewinrhrz2v] {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
}

.pl-slicer__fill[b-ewinrhrz2v] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 999px;
}

.pl-slicer__marker[b-ewinrhrz2v] {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border: 3px solid rgba(255, 255, 255, .7);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.pl-slicer__marker i[b-ewinrhrz2v] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-style: normal;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .85;
}

.pl-slicer__marker--avg[b-ewinrhrz2v] {
    background: rgba(255, 255, 255, .35);
    border-color: rgba(255, 255, 255, .9);
}

.pl-slicer__marker--avg i[b-ewinrhrz2v] {
    top: -22px;
}

.pl-slicer__marker--you i[b-ewinrhrz2v] {
    top: 20px;
    font-weight: 700;
    opacity: 1;
}

.pl-slicer__scale[b-ewinrhrz2v] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    opacity: .6;
    padding-top: 16px;
}

.pl-beat[b-ewinrhrz2v] {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}
/* Scratch Card — what the foil hides (the prize, the losing mark, a placeholder until the server has decided). */
/* Under the foil until the server's answer lands: a quiet pulse rather than a question mark. */
.pl-scratch__pending[b-ewinrhrz2v] {
    display: inline-flex;
    gap: 10px;
    opacity: .35;
}

.pl-scratch__pending i[b-ewinrhrz2v] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    animation: pl-scratch-pulse-b-ewinrhrz2v 1.2s ease-in-out infinite;
}

.pl-scratch__pending i:nth-child(2)[b-ewinrhrz2v] {
    animation-delay: .2s;
}

.pl-scratch__pending i:nth-child(3)[b-ewinrhrz2v] {
    animation-delay: .4s;
}

@keyframes pl-scratch-pulse-b-ewinrhrz2v {
    0%, 100% { transform: scale(.7); opacity: .4; }
    50% { transform: scale(1); opacity: 1; }
}

/* The answer often arrives while the fan is still scratching: it fades in under the foil instead of popping. */
[data-scratch="win"][b-ewinrhrz2v], [data-scratch="lose"][b-ewinrhrz2v] {
    animation: pl-fade-in-b-ewinrhrz2v .45s ease-out both;
}

.pl-scratch__gift[b-ewinrhrz2v] {
    max-width: 70%;
    max-height: 62%;
    object-fit: contain;
    border-radius: 10px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .25));
}

.pl-scratch__mark[b-ewinrhrz2v] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    background: rgba(127, 127, 127, .18);
}

.pl-scratch__mark--win[b-ewinrhrz2v] {
    background: #FFE9A8;
    color: #7A5300;
}

.pl-scratch__label[b-ewinrhrz2v] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
}

/* Full-screen card: the foil bleeds to the edges of the game column and takes the remaining height. */
.pl-body[b-ewinrhrz2v]  .sc--full {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
}

/* Privacy notice pop-up opened from the consent text or its link: a bottom sheet on phones,
   centred on wider screens. Same white-card palette as the registration card. */
.pl-sheet[b-ewinrhrz2v] {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .55);
}

.pl-sheet__panel[b-ewinrhrz2v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    padding: 18px;
    border-radius: 16px;
    background: #FFFFFF;
    color: #3F4254;
}

.pl-sheet__head[b-ewinrhrz2v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pl-sheet__title[b-ewinrhrz2v] {
    font-size: 16px;
    font-weight: 700;
    color: #181C32;
}

.pl-sheet__close[b-ewinrhrz2v] {
    border: none;
    background: none;
    padding: 0 4px;
    font-size: 26px;
    line-height: 1;
    color: #7E8299;
    cursor: pointer;
}

.pl-sheet__body[b-ewinrhrz2v] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
    line-height: 1.55;
}

.pl-sheet__h[b-ewinrhrz2v] {
    margin: 14px 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #181C32;
}

.pl-sheet__h:first-child[b-ewinrhrz2v] {
    margin-top: 0;
}

.pl-sheet__p[b-ewinrhrz2v] {
    margin: 0 0 8px;
}

.pl-sheet__li[b-ewinrhrz2v] {
    position: relative;
    margin: 0 0 6px;
    padding-left: 14px;
}

.pl-sheet__li[b-ewinrhrz2v]::before {
    content: "•";
    position: absolute;
    left: 2px;
}

.pl-sheet__action[b-ewinrhrz2v] {
    margin-top: 0;
}

@media (min-width: 600px) {
    .pl-sheet[b-ewinrhrz2v] {
        align-items: center;
    }
}

/* Untimed survey responses share the quiz typography and theme. */
.pl-survey-progress[b-ewinrhrz2v] {
    display: block;
    appearance: none;
    width: 100%;
    height: 8px;
    margin-bottom: 16px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, .2);
    accent-color: var(--pl-progress-color);
}

.pl-survey-progress[b-ewinrhrz2v]::-webkit-progress-bar {
    background: rgba(255, 255, 255, .2);
    border-radius: 999px;
}

.pl-survey-progress[b-ewinrhrz2v]::-webkit-progress-value {
    background: var(--pl-progress-color);
    border-radius: 999px;
}

.pl-survey-progress[b-ewinrhrz2v]::-moz-progress-bar {
    background: var(--pl-progress-color);
    border-radius: 999px;
}

.pl-survey-rating[b-ewinrhrz2v] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pl-survey-rating .pl-quiz__answer[b-ewinrhrz2v] { width: auto; min-width: 48px; overflow-wrap: anywhere; }
.pl-survey-rating small[b-ewinrhrz2v] { display: block; font-size: 12px; opacity: .7; }
.pl-survey-table[b-ewinrhrz2v] { max-width: 100%; overflow-x: auto; margin: 16px 0; }
.pl-survey-table table[b-ewinrhrz2v] { border-collapse: collapse; width: 100%; }
.pl-survey-table th[b-ewinrhrz2v], .pl-survey-table td[b-ewinrhrz2v] { padding: 10px; text-align: center; border-bottom: 1px solid #ddd; }
.pl-survey-table th[scope="row"][b-ewinrhrz2v] { text-align: start; min-width: 100px; }
.pl-survey-table input[b-ewinrhrz2v] { width: 22px; height: 22px; cursor: pointer; }
.pl-survey-ranks[b-ewinrhrz2v] { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.pl-survey-rank[b-ewinrhrz2v] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pl-survey-rank select[b-ewinrhrz2v] { width: 80px; }
.pl-quiz textarea.pl-card__input[b-ewinrhrz2v] { width: 100%; resize: vertical; box-sizing: border-box; margin: 12px 0; }

/* Full screen: on an arcade game's own screen the page drops its bars and padding, and the stage fills the screen
   (ArcadeStage.razor.css); its notices sit over the stage's bottom edge. */
.pl-screen--arcade-full .pl-top[b-ewinrhrz2v],
.pl-screen--arcade-full .pl-bottom[b-ewinrhrz2v] {
    display: none;
}

.pl-screen--arcade-full .pl-content[b-ewinrhrz2v] {
    padding: 0;
}

.pl-screen--arcade-full .pl-body[b-ewinrhrz2v] {
    position: relative;
    padding-top: 0;
    gap: 0;
}

.pl-screen--arcade-full .pl-spin-error[b-ewinrhrz2v] {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 2;
}

@media (min-width: 768px) {
    .pl-screen--arcade-full .pl-content[b-ewinrhrz2v] {
        max-width: none;
        padding: 16px 0;
    }
}

/* An arcade game's way back from the registration to one more run, in both layouts. */
.pl-back-link[b-ewinrhrz2v] {
    align-self: center;
    padding: 6px 12px;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    opacity: .8;
    cursor: pointer;
}

.pl-back-link:hover[b-ewinrhrz2v] {
    opacity: 1;
    text-decoration: underline;
}

.pl-back-link:focus-visible[b-ewinrhrz2v] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Full screen, every page but the game: the game-over panel's dark glass over the game's sky (readable on light skies too),
   the club's logo above it and the sponsor's strip under it on every page, and the game's accent on the buttons. */
.pl-arcade-club[b-ewinrhrz2v],
.pl-arcade-strip[b-ewinrhrz2v],
.pl-arcade-result-score[b-ewinrhrz2v],
.pl-arcade-progress[b-ewinrhrz2v] {
    display: none;
}

.pl-screen--arcade-cards[b-ewinrhrz2v] {
    background: var(--pl-arcade-backdrop) !important;
    color: #FFFFFF;
}

.pl-screen--arcade-cards .pl-top[b-ewinrhrz2v],
.pl-screen--arcade-cards .pl-bottom[b-ewinrhrz2v] {
    display: none;
}

.pl-screen--arcade-cards .pl-content[b-ewinrhrz2v] {
    justify-content: flex-start;
    gap: 16px;
    padding: max(28px, env(safe-area-inset-top, 0px)) 16px max(18px, env(safe-area-inset-bottom, 0px));
}

.pl-screen--arcade-cards .pl-arcade-club[b-ewinrhrz2v] {
    display: inline-flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    max-width: 60%;
}

.pl-arcade-club img[b-ewinrhrz2v] {
    display: block;
    max-width: 100%;
    max-height: 36px;
    object-fit: contain;
}

/* The organizer's plate behind the club's logo (its color, with any opacity, comes inline). */
.pl-arcade-club--plate[b-ewinrhrz2v] {
    padding: 6px 12px;
    border-radius: 10px;
}

/* The panel: centred between the logo and the strip; a long form scrolls inside it instead of under the phone's notch. */
.pl-screen--arcade-cards .pl-body[b-ewinrhrz2v] {
    flex: 0 1 auto;
    margin: auto 0;
    max-height: calc(100vh - 200px);
    max-height: calc(100svh - 200px);
    overflow-y: auto;
    padding: 20px 18px 18px;
    gap: 12px;
    box-sizing: border-box;
    border-radius: 24px;
    background: rgba(10, 10, 30, .55);
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    color: #FFFFFF;
}

.pl-screen--arcade-cards.pl-screen--embedded .pl-body[b-ewinrhrz2v] {
    max-height: none;
    overflow: visible;
}

.pl-screen--arcade-cards .pl-body .pl-card[b-ewinrhrz2v] {
    background: transparent;
    padding: 0;
}

.pl-screen--arcade-cards .pl-body .pl-headline[b-ewinrhrz2v] {
    color: #FFFFFF;
}

.pl-screen--arcade-cards .pl-body .pl-message[b-ewinrhrz2v] {
    color: rgba(255, 255, 255, .78);
    opacity: 1;
}

.pl-screen--arcade-cards .pl-body .pl-center[b-ewinrhrz2v] {
    width: 100%;
    gap: 12px;
}

.pl-screen--arcade-cards .pl-result-icon[b-ewinrhrz2v] {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #FFFFFF;
}

/* Lose: the score and its way to the first prize replace the default flag. */
.pl-screen--arcade-cards [data-result="lose"] .pl-result-icon[b-ewinrhrz2v] {
    display: none;
}

.pl-screen--arcade-cards .pl-arcade-result-score[b-ewinrhrz2v] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pl-arcade-result-score__value[b-ewinrhrz2v] {
    font-size: 66px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pl-arcade-result-score__unit[b-ewinrhrz2v] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .66);
}

.pl-screen--arcade-cards .pl-arcade-progress:not([hidden])[b-ewinrhrz2v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    text-align: left;
}

.pl-screen--arcade-cards .pl-arcade-progress:not([hidden]) ~ [data-slot="arcade-below"][b-ewinrhrz2v] {
    display: none;
}

.pl-arcade-progress__text[b-ewinrhrz2v] {
    font-size: 12px;
    color: rgba(255, 255, 255, .78);
}

.pl-arcade-progress__bar[b-ewinrhrz2v] {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.pl-arcade-progress__bar > span[b-ewinrhrz2v] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--pl-arcade-accent, #D9A93A);
}

/* Win: the prize in a glowing ring, and the run's score under its name. */
.pl-screen--arcade-cards [data-result="win"] .pl-prize[b-ewinrhrz2v],
.pl-screen--arcade-cards [data-result="win"] .pl-result-icon[b-ewinrhrz2v] {
    width: 116px;
    height: 116px;
    padding: 14px;
    border: none;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--pl-arcade-accent, #D9A93A) 35%, transparent), transparent 70%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pl-arcade-accent, #D9A93A) 50%, transparent), 0 0 40px color-mix(in srgb, var(--pl-arcade-accent, #D9A93A) 35%, transparent);
}

.pl-screen--arcade-cards [data-result="win"] .pl-prize-label[b-ewinrhrz2v] {
    font-size: 28px;
    font-weight: 700;
}

.pl-arcade-chip[b-ewinrhrz2v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
}

.pl-arcade-chip[hidden][b-ewinrhrz2v] {
    display: none;
}

.pl-screen--arcade-cards .pl-back-link[b-ewinrhrz2v]::before {
    content: "← ";
}

/* The sponsor's strip, under the panel on every page. */
.pl-screen--arcade-cards .pl-arcade-strip[b-ewinrhrz2v] {
    display: flex;
    justify-content: center;
}

.pl-arcade-strip__mark[b-ewinrhrz2v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
}

/* The organizer's plate behind the sponsor's logo, as for the club's (its color, with any opacity, comes inline). */
.pl-arcade-strip__mark--plate[b-ewinrhrz2v] {
    padding: 4px 14px;
    border-radius: 10px;
}

/* A white focus ring with a dark halo, so it shows on a light sky as well as a dark one. */
.pl-screen--arcade-cards .pl-back-link:focus-visible[b-ewinrhrz2v] {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
    box-shadow: 0 0 0 7px rgba(10, 10, 30, .55);
}

.pl-arcade-strip__logo[b-ewinrhrz2v] {
    max-width: 140px;
    max-height: 26px;
    object-fit: contain;
}
/* _content/DataTalks.GameZone.UI/Shared/ArcadeStage.razor.rz.scp.css */
/* The game takes the space between the page's header and footer bars on phones, bleeding to the column's
   edges; on desktop and when embedded the column has no height to share, so the stage keeps a phone's shape. */
.arcade-stage[b-6yhmhky5e1] {
    position: relative;
    container-type: size;
    box-sizing: border-box;
    width: calc(100% + 40px);
    margin: 0 -20px;
    flex: 1 1 auto;
    min-height: 360px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.arcade-stage:focus-visible[b-6yhmhky5e1] {
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7);
}

.arcade-stage__fallback[b-6yhmhky5e1] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.arcade-stage__fallback[hidden][b-6yhmhky5e1] {
    display: none;
}

.arcade-stage__title[b-6yhmhky5e1] {
    font-size: 44px;
    font-weight: 900;
    line-height: 1.05;
}

.arcade-stage__tagline[b-6yhmhky5e1] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .85;
}

@media (min-width: 768px) {
    .arcade-stage[b-6yhmhky5e1] {
        flex: none;
        width: 100%;
        margin: 0;
        min-height: 0;
        aspect-ratio: 9 / 16;
        border-radius: 18px;
    }
}

.pl-screen--embedded .arcade-stage[b-6yhmhky5e1] {
    flex: none;
    width: min(100%, 420px);
    margin: 0 auto;
    min-height: 0;
    aspect-ratio: 9 / 16;
    border-radius: 18px;
}

/* Full screen: the whole width on phones, and on desktop a phone-shaped card as tall as the window (play.js leaves it unzoomed). */
.pl-screen--arcade-full .arcade-stage[b-6yhmhky5e1] {
    width: 100%;
    margin: 0;
    border-radius: 0;
}

@media (min-width: 768px) {
    .pl-screen--arcade-full .arcade-stage[b-6yhmhky5e1] {
        width: auto;
        max-width: 100%;
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
        margin: 0 auto;
        border-radius: 18px;
    }
}

/* An embed has no window to fill: the card keeps its width and the frame follows its height. */
.pl-screen--embedded.pl-screen--arcade-full .arcade-stage[b-6yhmhky5e1] {
    width: min(100%, 420px);
    height: auto;
    margin: 0 auto;
    border-radius: 18px;
}
/* _content/DataTalks.GameZone.UI/Shared/ScratchSurface.razor.rz.scp.css */
/* The scratch card (fan page and builder preview). Participant-facing: themed inline by the game's
   resolved theme, so fixed illustrative values are deliberate here (no admin design tokens). */

.sc[b-f7ulr5c9nk] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Framed: a lottery ticket — artwork, title, the scratch panel and a note on a card. */
.sc--framed[b-f7ulr5c9nk] {
    border-radius: 18px;
    padding: 16px 16px 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
    text-align: center;
}

/* Full screen: the panel alone; the page stretches it to the edges and the remaining height. */
.sc--full[b-f7ulr5c9nk] {
    flex: 1;
    align-self: stretch;
    gap: 0;
}

.sc__art[b-f7ulr5c9nk] {
    max-width: 78%;
    max-height: 96px;
    object-fit: contain;
}

.sc__title[b-f7ulr5c9nk] {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.15;
}

.sc__note[b-f7ulr5c9nk] {
    font-size: 12px;
    opacity: .75;
}

.sc__panel[b-f7ulr5c9nk] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(127, 127, 127, .14);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.sc--full .sc__panel[b-f7ulr5c9nk] {
    flex: 1;
    aspect-ratio: auto;
    min-height: 340px;
    border-radius: 0;
}

.sc__under[b-f7ulr5c9nk] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    text-align: center;
}

/* The foil: a canvas on the fan page (scraped away stroke by stroke), a styled div in the preview.
   On a mouse the script draws a coin at the pointer and hides the cursor (.sc--coin); on touch
   screens the finger holds the coin. */
.sc__foil[b-f7ulr5c9nk] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: opacity .7s ease;
    cursor: pointer;
}

.sc--coin .sc__foil[b-f7ulr5c9nk] {
    cursor: none;
}

.sc--revealed .sc__foil[b-f7ulr5c9nk] {
    opacity: 0;
    pointer-events: none;
}

.sc__flakes[b-f7ulr5c9nk] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sc__foil--static[b-f7ulr5c9nk] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc__cover-text[b-f7ulr5c9nk] {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .14em;
    opacity: .75;
    transform: rotate(-8deg);
}

/* The hint coin scratches short back-and-forth strokes down the foil until the first real one. */
.sc__hint[b-f7ulr5c9nk] {
    position: absolute;
    width: 52px;
    height: 52px;
    left: 20%;
    top: 24%;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
    animation: sc-hint-b-f7ulr5c9nk 3.8s ease-in-out infinite;
}

.sc__hint svg[b-f7ulr5c9nk] {
    width: 100%;
    height: 100%;
}

.sc--started .sc__hint[b-f7ulr5c9nk],
.sc--revealed .sc__hint[b-f7ulr5c9nk] {
    display: none;
}

@keyframes sc-hint-b-f7ulr5c9nk {
    0% { left: 20%; top: 24%; transform: rotate(-18deg) scale(.96); opacity: 0; }
    6% { opacity: 1; }
    16% { left: 48%; top: 32%; transform: rotate(-26deg) scale(1); }
    24% { left: 28%; top: 38%; transform: rotate(-14deg) scale(.97); }
    34% { left: 56%; top: 46%; transform: rotate(-26deg) scale(1); }
    44% { left: 34%; top: 52%; transform: rotate(-14deg) scale(.97); }
    56% { left: 62%; top: 60%; transform: rotate(-26deg) scale(1); }
    66% { left: 40%; top: 66%; transform: rotate(-14deg) scale(.97); }
    78% { left: 66%; top: 72%; transform: rotate(-22deg) scale(1); opacity: 1; }
    90% { opacity: 0; }
    100% { left: 66%; top: 72%; transform: rotate(-22deg) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sc__hint[b-f7ulr5c9nk] { animation: none; }
    .sc__foil[b-f7ulr5c9nk] { transition: none; }
}
/* _content/DataTalks.GameZone.UI/Shared/SlotMachine.razor.rz.scp.css */
/* The slot machine (fan page and builder preview). Participant-facing: themed inline by the game's
   resolved theme, so fixed illustrative values are deliberate here (no admin design tokens). */

.sm[b-w9cyg5xnjl] {
    --sm-cell: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.sm [hidden][b-w9cyg5xnjl] {
    display: none !important;
}

/* The drawn machine: a rounded body in the machine color with a top cap and a bottom lip. */
.sm__machine[b-w9cyg5xnjl] {
    position: relative;
    width: min(100%, 320px);
    padding: 26px 18px 20px;
    border-radius: 22px;
    background: var(--sm-machine, #F35625);
    box-shadow: inset 0 -10px 0 color-mix(in srgb, var(--sm-machine, #F35625) 70%, #000), 0 12px 26px rgba(0, 0, 0, .28);
}

.sm__machine[b-w9cyg5xnjl]::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 56%;
    height: 8px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sm-machine, #F35625) 40%, #FFF);
    opacity: .55;
}

/* The uploaded artwork replaces the drawn body and sits behind the window. */
.sm__art[b-w9cyg5xnjl] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sm--artwork .sm__machine[b-w9cyg5xnjl] {
    background: none;
    box-shadow: none;
}

.sm--artwork .sm__machine[b-w9cyg5xnjl]::before {
    display: none;
}

/* The window: three reel columns under glass, inked by the reel color; the payline row with half a row above and below. */
.sm__window[b-w9cyg5xnjl] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: calc(var(--sm-cell) * 2);
    overflow: hidden;
    border-radius: 12px;
    background: var(--sm-reel, #FFFFFF);
    color: var(--sm-ink, #141414);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--sm-reel, #FFF) 55%, #000);
}

/* The glass: a soft shadow at the top and bottom rows, so the strips read as behind it. */
.sm__window[b-w9cyg5xnjl]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, .3));
}

.sm__reel[b-w9cyg5xnjl] {
    position: relative;
    overflow: hidden;
}

.sm__reel + .sm__reel[b-w9cyg5xnjl] {
    border-left: 1px solid color-mix(in srgb, var(--sm-ink, #141414) 16%, transparent);
}

/* --sm-pos names the cell on the payline, half a cell down the window; play.js moves the strip the same way while it rolls. */
.sm__strip[b-w9cyg5xnjl] {
    transform: translateY(calc((0.5 - var(--sm-pos, 1)) * var(--sm-cell)));
    will-change: transform;
}

/* The symbol inside is SlotSymbolArt's (sized by its own stylesheet); it inks itself in the window's color. */
.sm__cell[b-w9cyg5xnjl] {
    height: var(--sm-cell);
    display: grid;
    place-items: center;
}

/* A reel at full speed is a blur; it sharpens as it slows down onto its symbol. */
.sm__reel--rolling .sm__strip[b-w9cyg5xnjl] {
    filter: blur(1px);
}

/* The payline over the middle row; it glows in the accent color when three of a kind land. */
.sm__line[b-w9cyg5xnjl] {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: calc(var(--sm-cell) / 2);
    height: var(--sm-cell);
    pointer-events: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sm-ink, #141414) 10%, transparent);
}

.sm--won .sm__line[b-w9cyg5xnjl] {
    animation: sm-line-glow-b-w9cyg5xnjl .9s ease-in-out infinite alternate;
    box-shadow: inset 0 0 0 2px var(--sm-accent, #F35625), 0 0 10px var(--sm-accent, #F35625);
}

@keyframes sm-line-glow-b-w9cyg5xnjl {
    from { box-shadow: inset 0 0 0 2px var(--sm-accent, #F35625), 0 0 6px var(--sm-accent, #F35625); }
    to { box-shadow: inset 0 0 0 3px var(--sm-accent, #F35625), 0 0 20px var(--sm-accent, #F35625); }
}

.sm--won .sm__cell--hit[b-w9cyg5xnjl]  .ss {
    animation: sm-hit-b-w9cyg5xnjl .7s ease-in-out infinite;
}

@keyframes sm-hit-b-w9cyg5xnjl {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.14); }
}

/* The lower panel under the reels, a shade darker than the body, holding the spin key. */
.sm__panel[b-w9cyg5xnjl] {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    padding: 8px 8px 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--sm-machine, #F35625) 78%, #000);
}

.sm--artwork .sm__panel[b-w9cyg5xnjl] {
    background: none;
}

/* The spin key: wide, in the key color with a darker edge under it; it presses in when tapped and stays down while the reels roll. */
.sm__spin[b-w9cyg5xnjl] {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--sm-spin, #F9AB92);
    color: var(--sm-spin-text, #141414);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--sm-spin, #F9AB92) 55%, #000);
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
}

.sm__spin:active[b-w9cyg5xnjl],
.sm__spin:disabled[b-w9cyg5xnjl] {
    transform: translateY(3px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--sm-spin, #F9AB92) 55%, #000);
}

.sm__spin:disabled[b-w9cyg5xnjl] {
    cursor: default;
}

.sm__spin:focus-visible[b-w9cyg5xnjl] {
    outline: 3px solid var(--sm-spin-text, #141414);
    outline-offset: 2px;
}

/* The "No prize" line under the machine: it sits on the page, so it keeps the page's text color. */
.sm__nope[b-w9cyg5xnjl] {
    min-height: 1.4em;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (max-width: 360px) {
    .sm[b-w9cyg5xnjl] {
        --sm-cell: 72px;
    }
}

/* Reduced motion: the reels don't move (play.js knows) — a rolling reel just dims, and stopping it fades it back in
   at its landed position. */
@media (prefers-reduced-motion: reduce) {
    .sm[b-w9cyg5xnjl]  *,
    .sm[b-w9cyg5xnjl]  *::before,
    .sm[b-w9cyg5xnjl]  *::after {
        animation: none !important;
    }

    .sm__reel--rolling .sm__strip[b-w9cyg5xnjl] {
        opacity: .35;
        filter: none;
    }

    .sm__strip[b-w9cyg5xnjl] {
        transition: opacity .2s ease;
    }
}
/* _content/DataTalks.GameZone.UI/Shared/SlotSymbolArt.razor.rz.scp.css */
/* One reel symbol, sized to its box: a reel cell, or the Win page's icon circle when the engine
   copies it there. The built-in icons draw in currentColor, so they take the color around them. */

.ss[b-t9c0d6p3zc] {
    display: block;
    width: 62%;
    height: 62%;
}

.ss--img[b-t9c0d6p3zc] {
    object-fit: contain;
}
/* _content/DataTalks.GameZone.UI/Shared/TreasureChests.razor.rz.scp.css */
/* The treasure chests (fan page and builder preview). Participant-facing: themed inline by the game's
   resolved theme, so fixed illustrative values are deliberate here (no admin design tokens). */

.tc[b-vlfkco81qn] {
    display: grid;
    grid-template-columns: repeat(var(--tc-cols, 3), minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 28px;
    width: 100%;
    justify-items: center;
    /* Room above the top row for the prize rising out of a chest. */
    padding-top: var(--tc-reveal-space, 34px);
}

.tc--rows[b-vlfkco81qn] {
    row-gap: max(44px, var(--tc-reveal-space, 34px));
}

.tc [hidden][b-vlfkco81qn] {
    display: none !important;
}

/* One chest: a button that lifts and shakes when tapped. */
.tc__chest[b-vlfkco81qn] {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    width: 100%;
    max-width: var(--tc-max, 104px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.tc__chest:focus-visible[b-vlfkco81qn] {
    outline: 2px solid currentColor;
    outline-offset: 6px;
    border-radius: 14px;
}

.tc__chest:disabled[b-vlfkco81qn] {
    cursor: default;
}

.tc__lift[b-vlfkco81qn] {
    display: block;
    width: 100%;
    transition: transform .25s ease, opacity .4s ease, filter .4s ease;
}

.tc--idle .tc__lift[b-vlfkco81qn] {
    animation: tc-bob-b-vlfkco81qn 2.6s ease-in-out infinite;
    animation-delay: calc(var(--tc-i, 0) * -.45s);
}

.tc__chest--picked .tc__lift[b-vlfkco81qn] {
    transform: translateY(-8px) scale(1.07);
}

.tc--playing .tc__chest:not(.tc__chest--picked):not(.tc__chest--open) .tc__lift[b-vlfkco81qn] {
    opacity: .72;
}

.tc__chest--other .tc__lift[b-vlfkco81qn] {
    opacity: .58;
    filter: saturate(.55);
}

.tc__stage[b-vlfkco81qn] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 120 / 104;
    transform-origin: 50% 90%;
}

@media (hover: hover) {
    .tc--idle .tc__chest:hover .tc__stage[b-vlfkco81qn] {
        animation: tc-wiggle-b-vlfkco81qn .6s ease-in-out;
    }
}

.tc__chest--shaking .tc__stage[b-vlfkco81qn] {
    animation: tc-shake-b-vlfkco81qn .5s ease-in-out infinite;
}

/* The chest art: the built-in chest (its lid swings open) or the template's closed and open images (they swap). */
.tc__art[b-vlfkco81qn] {
    position: absolute;
    inset: 0;
    z-index: 1;
    transform-origin: 50% 100%;
}

.tc__chest--open .tc__art[b-vlfkco81qn] {
    animation: tc-squash-b-vlfkco81qn .5s cubic-bezier(.3, 1.4, .5, 1);
}

.tc__closed[b-vlfkco81qn],
.tc__open[b-vlfkco81qn] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .12s linear;
}

.tc__open[b-vlfkco81qn],
.tc__chest--open .tc__closed[b-vlfkco81qn] {
    opacity: 0;
}

.tc__chest--open .tc__open[b-vlfkco81qn] {
    opacity: 1;
}

.tc__svg[b-vlfkco81qn] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tc__shadow[b-vlfkco81qn] { fill: rgba(0, 0, 0, .3); }
.tc__wood[b-vlfkco81qn] { fill: var(--tc-color, #8B5A2B); }
.tc__wood-dark[b-vlfkco81qn] { fill: color-mix(in srgb, var(--tc-color, #8B5A2B) 58%, #000); }
.tc__wood-light[b-vlfkco81qn] { fill: color-mix(in srgb, var(--tc-color, #8B5A2B) 50%, #FFF); opacity: .35; }
.tc__seam[b-vlfkco81qn] { fill: none; stroke: color-mix(in srgb, var(--tc-color, #8B5A2B) 55%, #000); stroke-width: 2; }
.tc__metal[b-vlfkco81qn] { fill: #E2B341; }
.tc__metal-dark[b-vlfkco81qn] { fill: #6B4E12; }
.tc__void[b-vlfkco81qn] { fill: #1A0E05; }
.tc__glow[b-vlfkco81qn] { fill: #FFD36B; opacity: .55; }

.tc__lid[b-vlfkco81qn] {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    transition: transform .45s cubic-bezier(.3, 1.5, .5, 1);
}

.tc__chest--open .tc__lid[b-vlfkco81qn] {
    transform: translate(-2px, -10px) rotate(-24deg);
}

.tc__inside[b-vlfkco81qn] {
    opacity: 0;
    transition: opacity .25s ease .08s;
}

.tc__chest--open .tc__inside[b-vlfkco81qn] {
    opacity: 1;
}

/* A burst of light behind a chest that holds a prize. */
.tc__burst[b-vlfkco81qn] {
    position: absolute;
    left: 50%;
    top: 40%;
    z-index: 0;
    width: 200%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .55s cubic-bezier(.2, 1.3, .4, 1);
}

.tc__burst[b-vlfkco81qn]::before,
.tc__burst[b-vlfkco81qn]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.tc__burst[b-vlfkco81qn]::before {
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 102, .55) 0deg 9deg, rgba(255, 214, 102, 0) 9deg 24deg);
    -webkit-mask: radial-gradient(circle, #000 16%, transparent 62%);
    mask: radial-gradient(circle, #000 16%, transparent 62%);
    animation: tc-spin-b-vlfkco81qn 9s linear infinite;
}

.tc__burst[b-vlfkco81qn]::after {
    background: radial-gradient(circle, rgba(255, 214, 102, .6), rgba(255, 214, 102, 0) 45%);
}

.tc__chest--win.tc__chest--open .tc__burst[b-vlfkco81qn] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.tc__chest--other.tc__chest--win.tc__chest--open .tc__burst[b-vlfkco81qn] {
    opacity: .3;
}

/* What the chest holds: the prize (its image, else a trophy) or the empty mark, rising out of the open chest. */
.tc__prize[b-vlfkco81qn] {
    position: absolute;
    left: 50%;
    top: 38%;
    z-index: 2;
    width: var(--tc-prize-size, 62%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #FFFFFF;
    color: #7A5300;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 3px #FFD166;
    font-size: calc(var(--tc-max, 104px) * .3);
    line-height: 1;
    overflow: hidden;
    transform: translate(-50%, -10%) scale(.2);
    opacity: 0;
    transition: transform .6s cubic-bezier(.2, 1.5, .4, 1), opacity .2s ease;
}

.tc__prize--empty[b-vlfkco81qn] {
    background: rgba(127, 127, 127, .35);
    color: inherit;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .3);
}

.tc__chest--revealed .tc__prize[b-vlfkco81qn] {
    transform: translate(-50%, -95%) scale(1);
    opacity: 1;
}

.tc__chest--other.tc__chest--revealed .tc__prize[b-vlfkco81qn] {
    transform: translate(-50%, -80%) scale(.8);
}

.tc__gift[b-vlfkco81qn] {
    max-width: 82%;
    max-height: 82%;
    object-fit: contain;
}

.tc__mark[b-vlfkco81qn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9em;
}

.tc__mark--win[b-vlfkco81qn] {
    width: 100%;
    height: 100%;
    background: #FFE9A8;
}

/* Supplied creative can appear without the built-in badge or light effects. */
.tc--unframed .tc__prize[b-vlfkco81qn] {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.tc--unframed .tc__gift[b-vlfkco81qn] {
    max-width: 100%;
    max-height: 100%;
}

.tc--unframed .tc__mark--win[b-vlfkco81qn] {
    background: transparent;
}

.tc--no-glow .tc__burst[b-vlfkco81qn],
.tc--no-glow .tc__glow[b-vlfkco81qn] {
    display: none;
}

/* The prize's name (or the losing text) under the chest. */
.tc__label[b-vlfkco81qn] {
    display: block;
    min-height: 2.6em;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .3s ease, transform .3s ease;
}

.tc__chest--revealed .tc__label[b-vlfkco81qn] {
    opacity: 1;
    transform: none;
}

.tc__chest--picked .tc__label:not(:empty)[b-vlfkco81qn] {
    min-height: 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(127, 127, 127, .25);
    font-size: 13px;
    font-weight: 600;
}

.tc__chest--picked.tc__chest--win .tc__label[b-vlfkco81qn] {
    background: var(--tc-accent, #F35625);
    color: var(--tc-accent-text, #FFFFFF);
}

.tc__chest--other .tc__label[b-vlfkco81qn] {
    opacity: .72;
}

@keyframes tc-bob-b-vlfkco81qn {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes tc-wiggle-b-vlfkco81qn {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-4deg); }
    75% { transform: rotate(4deg); }
}

@keyframes tc-shake-b-vlfkco81qn {
    0%, 100% { transform: rotate(0) translateX(0); }
    20% { transform: rotate(-7deg) translateX(-2px); }
    40% { transform: rotate(6deg) translateX(2px); }
    60% { transform: rotate(-5deg) translateX(-1px); }
    80% { transform: rotate(4deg) translateX(1px); }
}

@keyframes tc-squash-b-vlfkco81qn {
    0% { transform: scale(1); }
    30% { transform: scale(1.12, .86); }
    60% { transform: scale(.96, 1.06); }
    100% { transform: scale(1); }
}

@keyframes tc-spin-b-vlfkco81qn {
    to { transform: rotate(360deg); }
}

/* Reduced motion: no bob, shake or bounce; the chests, the prize and the names only fade. */
@media (prefers-reduced-motion: reduce) {
    .tc *[b-vlfkco81qn],
    .tc *[b-vlfkco81qn]::before,
    .tc *[b-vlfkco81qn]::after {
        animation: none !important;
    }

    .tc__lift[b-vlfkco81qn],
    .tc__prize[b-vlfkco81qn],
    .tc__lid[b-vlfkco81qn],
    .tc__burst[b-vlfkco81qn],
    .tc__label[b-vlfkco81qn] {
        transition-property: opacity !important;
    }
}
/* _content/DataTalks.GameZone.UI/Shared/WheelGraphic.razor.rz.scp.css */
.wh[b-qghwnhf1tg] {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1;
    margin: 0 auto;
}

.wh__disc[b-qghwnhf1tg] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .16), 0 12px 32px rgba(0, 0, 0, .35);
    transform-origin: 50% 50%;
    will-change: transform;
}

/* The spin itself is animated frame by frame by play.js (startSpin). */

.wh__pointer-img[b-qghwnhf1tg] {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 15%;
    max-width: 48px;
    height: auto;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}

.wh__pointer[b-qghwnhf1tg] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 28px solid #F35625;
    z-index: 2;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}