/* _content/LiveEventBingo.Shared/Pages/Common/Pages/HomePage/HeroDeviceBoard.razor.rz.scp.css */
/* Hero phone: the live game screen on a device. Every length is in cqw of the phone's own width
   (.hero-device is the outer size container, .hero-device__screen the inner one the screen-level
   sizes resolve against), so the whole drawing scales with whatever width the homepage hero gives it.
   Colours and type come from governed tokens. Border widths, radii and offset shadows are written in cqw
   on purpose: this is decorative device art that scales as one drawing, which the project rules carve out
   of the no-raw-border/shadow-literals rule (Project-Rules.md, Tokens / visuals; ADO #11014). Do not copy
   the pattern into page UI. */

.hero-device[b-ordsaxw8gg] {
    container-type: inline-size;
    inline-size: 100%;
}

/* Body: black glass inside a navy rim, with the power key (right) and volume rocker (left)
   standing proud of the edge. */
.hero-device__body[b-ordsaxw8gg] {
    position: relative;
    box-sizing: border-box;
    padding: 3cqw;
    background: var(--meb-border-default);
    border-radius: 13cqw;
    box-shadow: 0 0 0 0.9cqw var(--meb-border-pagination-item), var(--meb-shadow-lg);
}

.hero-device__body[b-ordsaxw8gg]::before,
.hero-device__body[b-ordsaxw8gg]::after {
    content: "";
    position: absolute;
    inline-size: 1.4cqw;
    background: var(--meb-border-pagination-item);
}

.hero-device__body[b-ordsaxw8gg]::before {
    inset-inline-end: -2cqw;
    inset-block-start: 30cqw;
    block-size: 12cqw;
    border-radius: 0 0.8cqw 0.8cqw 0;
}

.hero-device__body[b-ordsaxw8gg]::after {
    inset-inline-start: -2cqw;
    inset-block-start: 24cqw;
    block-size: 20cqw;
    border-radius: 0.8cqw 0 0 0.8cqw;
}

/* Screen: 423:800, so the app's own proportions (status bar to browser chrome) hold. */
.hero-device__screen[b-ordsaxw8gg] {
    container-type: inline-size;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    aspect-ratio: 423 / 800;
    padding-inline: 4.7cqw;
    overflow: hidden;
    background: var(--meb-surface-section-startplaying-media);
    border-radius: 10cqw;
    color: var(--meb-text-default);
    font-family: var(--meb-font-family-primary);
}

/* -- Status bar ---------------------------------------------------- */

.hero-device__status[b-ordsaxw8gg] {
    position: absolute;
    inset: 0 0 auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: 8cqw;
    padding-inline: 5cqw;
    background: var(--meb-surface-input-filled);
    color: var(--meb-text-muted);
    font-size: 3.8cqw;
    font-weight: var(--meb-font-weight-semibold);
}

.hero-device__camera[b-ordsaxw8gg] {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inline-size: 3cqw;
    block-size: 3cqw;
    transform: translate(-50%, -50%);
    background: var(--meb-border-default);
    border-radius: var(--meb-border-radius-full);
}

.hero-device__sys[b-ordsaxw8gg] {
    display: flex;
    align-items: center;
    gap: 2cqw;
}

.hero-device__wifi[b-ordsaxw8gg] {
    inline-size: 3.6cqw;
    block-size: 3cqw;
    background: var(--meb-text-muted);
    clip-path: polygon(50% 100%, 0 25%, 50% 0, 100% 25%);
}

.hero-device__signal[b-ordsaxw8gg] {
    inline-size: 3.4cqw;
    block-size: 3.2cqw;
    background: var(--meb-border-muted);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

.hero-device__battery[b-ordsaxw8gg] {
    padding: 0.3cqw 1.6cqw;
    background: var(--meb-text-muted);
    border-radius: 2cqw;
    color: var(--meb-text-inverse);
    font-size: 3.2cqw;
    font-weight: var(--meb-font-weight-bold);
    line-height: 1.3;
}

/* -- App bar ------------------------------------------------------- */

.hero-device__top[b-ordsaxw8gg] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 3.2cqw;
    margin-block-start: 11cqw;
}

.hero-device__avatar[b-ordsaxw8gg] {
    flex: none;
    display: block;
    box-sizing: border-box;
    inline-size: 10.4cqw;
    block-size: 10.4cqw;
    padding: 1cqw;
    background: var(--meb-surface-card);
    border: 0.5cqw solid var(--meb-border-inverse);
    border-radius: var(--meb-border-radius-full);
    object-fit: contain;
}

.hero-device__title[b-ordsaxw8gg] {
    flex: 1;
    font-size: 7.2cqw;
    font-weight: var(--meb-font-weight-bold);
    line-height: 1;
}

.hero-device__share[b-ordsaxw8gg] {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 18cqw;
    block-size: 12cqw;
    background: var(--meb-surface-button-qrprimary);
    border: 0.6cqw solid var(--meb-border-default);
    border-radius: 5cqw;
    box-shadow: 0.9cqw 1cqw 0 0 var(--meb-border-default);
    color: var(--meb-border-default);
}

.hero-device__share svg[b-ordsaxw8gg] {
    inline-size: 6.4cqw;
    block-size: 6.4cqw;
}

/* -- Card ---------------------------------------------------------- */

.hero-device__card[b-ordsaxw8gg] {
    flex: none;
    box-sizing: border-box;
    margin-block-start: 6cqw;
    padding: 2.8cqw;
    background: var(--meb-surface-card);
    border: 0.5cqw solid var(--meb-border-default);
    border-radius: 7.5cqw;
}

.hero-device__letters[b-ordsaxw8gg] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    margin-block-end: 2.4cqw;
    background: var(--meb-surface-disabled);
    border-radius: var(--meb-border-radius-full);
}

.hero-device__letter[b-ordsaxw8gg] {
    display: grid;
    place-items: center;
    block-size: 19.5cqw;
    font-size: 8.8cqw;
    font-weight: var(--meb-font-weight-extrabold);
    line-height: 1;
}

.hero-device__letter--lead[b-ordsaxw8gg] {
    background: var(--meb-surface-section-startplaying-media);
    border-radius: var(--meb-border-radius-full);
    color: var(--meb-text-inverse);
}

/* -- Squares ------------------------------------------------------- */

.hero-device__grid[b-ordsaxw8gg] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hero-device__square[b-ordsaxw8gg] {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    padding: 0.8cqw;
    border-block-end: 0.5cqw solid var(--meb-border-subtle);
    border-inline-end: 0.5cqw solid var(--meb-border-subtle);
}

.hero-device__square:nth-child(5n)[b-ordsaxw8gg] {
    border-inline-end: 0;
}

.hero-device__square:nth-last-child(-n + 5)[b-ordsaxw8gg] {
    border-block-end: 0;
}

.hero-device__square--r1[b-ordsaxw8gg] {
    --mark-rotate: 112deg;
}

.hero-device__square--r2[b-ordsaxw8gg] {
    --mark-rotate: 5deg;
}

/* Taken square: the same two-layer splotch the real board draws -- the artwork at low opacity for
   texture, then a multiplied colour layer masked to the same shape. */
.hero-device__splat[b-ordsaxw8gg],
.hero-device__splat-color[b-ordsaxw8gg] {
    position: absolute;
    inset: -6%;
    inline-size: 112%;
    block-size: 112%;
    transform: rotate(var(--mark-rotate, 0deg));
    pointer-events: none;
}

.hero-device__splat[b-ordsaxw8gg] {
    object-fit: cover;
    opacity: 0.12;
}

.hero-device__splat-color[b-ordsaxw8gg] {
    background: var(--meb-surface-section-startplaying-media);
    -webkit-mask-image: url('/_content/LiveEventBingo.Shared/css/assets/images/logos/G4.png');
    -webkit-mask-size: cover;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url('/_content/LiveEventBingo.Shared/css/assets/images/logos/G4.png');
    mask-size: cover;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-mode: alpha;
    mix-blend-mode: multiply;
    opacity: 0.55;
}

.hero-device__label[b-ordsaxw8gg] {
    position: relative;
    z-index: 1;
    font-size: 3.5cqw;
    font-weight: var(--meb-font-weight-bold);
    line-height: 1.15;
    text-align: center;
    hyphens: manual;
}

/* -- Tab card ------------------------------------------------------ */

.hero-device__tabs[b-ordsaxw8gg] {
    flex: none;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    margin-block-start: 5.5cqw;
    padding: 2cqw;
    background: var(--meb-surface-card);
    border: 0.5cqw solid var(--meb-border-default);
    border-radius: 7.5cqw;
    box-shadow: 1.2cqw 1.2cqw 0 0 var(--meb-border-default);
    font-size: 3.9cqw;
    font-weight: var(--meb-font-weight-medium);
    line-height: 1;
    text-align: center;
}

.hero-device__tab[b-ordsaxw8gg] {
    display: grid;
    place-items: center;
    block-size: 10cqw;
}

.hero-device__tab--active[b-ordsaxw8gg] {
    background: var(--meb-surface-section-startplaying-media);
    border-radius: var(--meb-border-radius-full);
    color: var(--meb-text-inverse);
    font-weight: var(--meb-font-weight-semibold);
}

/* -- Browser chrome and nav bar ------------------------------------ */

.hero-device__chrome[b-ordsaxw8gg] {
    flex: none;
    margin-block-start: auto;
    /* The screen's own 4.7cqw side padding resolves against the OUTER container (the screen is itself a
       container, and a container's own units come from its ancestor), whereas this margin resolves
       against the screen -- about 6% narrower. -5cqw here is the same distance, so the bar meets both edges. */
    margin-inline: -5cqw;
    padding-block: 1.6cqw 1.4cqw;
    background: var(--meb-surface-card);
    color: var(--meb-text-muted);
}

.hero-device__addr[b-ordsaxw8gg] {
    display: flex;
    align-items: center;
    gap: 4cqw;
    margin-inline: 3cqw;
    block-size: 9cqw;
}

.hero-device__pill[b-ordsaxw8gg] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 3cqw;
    block-size: 100%;
    padding-inline: 4cqw;
    overflow: hidden;
    background: var(--meb-surface-disabled);
    border-radius: var(--meb-border-radius-full);
    font-size: 4.2cqw;
    font-weight: var(--meb-font-weight-medium);
    white-space: nowrap;
}

.hero-device__shield[b-ordsaxw8gg] {
    flex: none;
    inline-size: 4.2cqw;
    block-size: 4.8cqw;
    border: 0.5cqw solid currentColor;
    border-radius: 0.6cqw 0.6cqw 2.2cqw 2.2cqw;
}

.hero-device__plus[b-ordsaxw8gg] {
    font-size: 7cqw;
    line-height: 1;
}

.hero-device__count[b-ordsaxw8gg] {
    display: grid;
    place-items: center;
    inline-size: 5.2cqw;
    block-size: 5.2cqw;
    border: 0.5cqw solid currentColor;
    border-radius: 1.1cqw;
    font-size: 2.8cqw;
    font-weight: var(--meb-font-weight-bold);
}

.hero-device__more[b-ordsaxw8gg] {
    font-size: 5.4cqw;
    font-weight: var(--meb-font-weight-bold);
    line-height: 1;
}

.hero-device__nav[b-ordsaxw8gg] {
    display: flex;
    align-items: center;
    justify-content: space-around;
    block-size: 7cqw;
    padding-inline: 14cqw;
}

.hero-device__nav-a[b-ordsaxw8gg] {
    font-size: 4.4cqw;
    font-weight: var(--meb-font-weight-bold);
    letter-spacing: 0.3cqw;
    line-height: 1;
}

.hero-device__nav-b[b-ordsaxw8gg] {
    inline-size: 4.4cqw;
    block-size: 4.4cqw;
    border: 0.5cqw solid currentColor;
    border-radius: var(--meb-border-radius-full);
}

.hero-device__nav-c[b-ordsaxw8gg] {
    inline-size: 3.2cqw;
    block-size: 3.2cqw;
    border-block-end: 0.5cqw solid currentColor;
    border-inline-start: 0.5cqw solid currentColor;
    transform: rotate(45deg);
}
/* _content/LiveEventBingo.Shared/Pages/Common/Pages/HomePage/HomepageDesktop.razor.rz.scp.css */
/* Homepage desktop � scoped composition CSS for the homepage.
   Layout remains primitive-owned.
   Standard visuals and typography consume governed theme variables.
   Only minimal art-stage and decorative composition geometry stays local.
   Shared fade behavior remains owned by DecorativeSvg. */

/* -- Root wrapper ------------------------------------------------ */

[b-3h4f88f3jq] .homepage-desktop {
    width: 100%;
}

/* -- Section vertical rhythm ------------------------------------- */
/* Sections stack flush — no inter-section padding gap.
   A dedicated section-padding token should be added when the
   design system formalises section-level spacing. */

[b-3h4f88f3jq] .hp-section {
    padding-block: var(--meb-space-stack-none);
}
    /* PRIMITIVE GAP: horizontal section padding uses space.container.xl (32px) — space.stack tokens
       govern vertical rhythm only; using the container family here is semantically correct. */
    [b-3h4f88f3jq] .hp-section > .ui-container > * {
        padding-left: var(--meb-space-container-xl);
        padding-right: var(--meb-space-container-xl);
    }
[b-3h4f88f3jq] .hp-hero {
    background: var(--meb-surface-hero-background);
}

[b-3h4f88f3jq] .hp-hero-panel {
    position: relative;
    overflow: hidden;
}

[b-3h4f88f3jq] .hp-hero-copy-shell {
    box-sizing: border-box;
    width: 100%;
    padding-inline: var(--meb-space-container-lg);
}

[b-3h4f88f3jq] .hp-hero-copy-wrap {
    width: 100%;
    max-width: 520px;
}

[b-3h4f88f3jq] .hp-hero-title {
    margin: var(--meb-space-stack-none);
    max-inline-size: 520px;
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-accent);
    font-size: var(--meb-font-size-display-desktop);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-display);
}

[b-3h4f88f3jq] .hp-hero-body {
    margin: var(--meb-space-stack-none);
    max-inline-size: 500px;
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-body);
}

[b-3h4f88f3jq] .hp-hero-art-stage {
    position: relative;
    min-block-size: 38rem;
    overflow: hidden;
}

[b-3h4f88f3jq] .hp-hero-dots-wrap {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 906px;
    height: 827px;
    transform: rotate(12deg);
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

[b-3h4f88f3jq] .hp-hero-dots.decorative-svg {
    inline-size: 100%;
    block-size: auto;
}

/* The hero art is a phone (HeroDeviceBoard), tilted and standing on the stage floor. Its size is
   the wrapper's width: everything inside scales from that. */
[b-3h4f88f3jq] .hp-hero-board-wrap {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 12%;
    inline-size: min(18.75rem, 70%);
    z-index: 1;
    transform: rotate(6deg);
    transform-origin: bottom center;
}

/* -- Hero event rotator (#9649) ----------------------------------- */
/* The whole row is a single anchor to /library, so its horizontal composition
   cannot be an <Inline> primitive -- an anchor is the row. The flex here is the
   rotator's own internal composition (label / animated viewport / affordance),
   not page layout, and it targets only rotator-local classes.
   ROTATOR GEOMETRY: --hp-rotator-row is the single source of truth for the
   window height, the row height AND the keyframe step -- the stops below are
   multiples of it, so the invariant holds by construction rather than by comment. */

[b-3h4f88f3jq] .hp-hero-rotator-link {
    --hp-rotator-row: 56px;
    display: flex;
    /* Wraps for the same reason hp-hero-actions carries Wrap="true". The hero copy
       column is 475px at 1440 but only 350px at 1024, and this row's max-content
       is 453px, so 1024 cannot hold it on one line. Without wrapping it overflowed
       the column and put "see all" behind the bingo board. */
    flex-wrap: wrap;
    align-items: center;
    /* FIT BUDGET: at inline-md gaps + inline-lg item padding the row measured
       485px -- already 10px past the 475px column at 1440, overflowing silently
       because nothing could wrap. inline-sm here plus inline-md item padding
       brings it to 453px, ~22px of slack, so the single desktop line survives the
       wider glyph metrics on WKWebView / Android WebView that cannot be measured
       from here. Do not widen either without re-measuring at 1440. */
    gap: var(--meb-space-inline-sm);
    /* SHADOW ROOM: the rotator is the last child of the hero copy Stack, so once
       it wraps (<=1024) the copy column becomes the taller grid track and this
       row's bottom edge IS .hp-hero-panel's bottom edge -- and the panel clips
       (overflow: hidden). Without this the tile's comic shadow gets sheared off
       while the buttons above keep theirs. stack-xs (4px) is the comic shadow's
       own offset, so the row reserves exactly the room its shadow needs. */
    padding-block-end: var(--meb-space-stack-xs);
    text-decoration: none;
}

[b-3h4f88f3jq] .hp-hero-rotator-label {
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-h3-mobile);
    font-weight: var(--meb-font-weight-semibold);
    white-space: nowrap;
}

[b-3h4f88f3jq] .hp-hero-rotator-window {
    display: block;
    /* APERTURE: box-sizing is border-box app-wide, so the declared height has to
       carry the border or the aperture ends up ~5px SHORT of a row -- every entry
       then renders cropped and sits above optical centre. Aperture == one row. */
    block-size: calc(var(--hp-rotator-row) + 2 * var(--meb-border-width-medium));
    overflow: hidden;
    background: var(--meb-surface-card);
    border: var(--meb-border-width-medium) solid var(--meb-border-default);
    border-radius: var(--meb-border-radius-sm);
    box-shadow: var(--meb-shadow-surface-comic);
    transition: box-shadow var(--meb-motion-fast);
}

[b-3h4f88f3jq] .hp-hero-rotator-link:hover .hp-hero-rotator-window {
    box-shadow: var(--meb-shadow-surface-comic-sm);
}

/* #9650: freeze the reel while the pointer is over it. Each entry is its own link now, so the
   click resolves against whatever is under the cursor AT MOUSEUP -- and mid-deal two entries
   share the aperture, so a click landing in that window would open the neighbouring occasion
   rather than the one the user read. Pausing on hover makes the target the one they see.
   focus-within covers the same hazard for a pointer-less activation. */
[b-3h4f88f3jq] .hp-hero-rotator-link:hover .hp-hero-rotator-track,
[b-3h4f88f3jq] .hp-hero-rotator-link:focus-within .hp-hero-rotator-track {
    animation-play-state: paused;
}

[b-3h4f88f3jq] .hp-hero-rotator-track {
    display: flex;
    flex-direction: column;
    animation: hp-hero-rotator-b-3h4f88f3jq 12.6s cubic-bezier(.5, 0, .15, 1) infinite;
}

[b-3h4f88f3jq] .hp-hero-rotator-item {
    display: flex;
    align-items: center;
    block-size: var(--hp-rotator-row);
    /* inline-md, not inline-lg -- see the fit budget on .hp-hero-rotator-link. */
    padding-inline: var(--meb-space-inline-md);
    color: var(--meb-text-default);
    font-family: var(--meb-font-family-accent);
    font-size: var(--meb-font-size-h3-desktop);
    white-space: nowrap;
    /* #9650: the items are anchors now (one per occasion). Without this they pick up
       the global link underline + colour and the tile stops reading as a tile. */
    text-decoration: none;
}

[b-3h4f88f3jq] .hp-hero-rotator-more {
    color: var(--meb-accent-secondary);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 4px;
    white-space: nowrap;
}

/* 7 entries x 1.8s = 12.6s, so the stop pitch is 1/7 (14.286%): each entry holds
   11.9% (1.5s) then deals the next square in over 2.38% (0.3s). The tilt runs on
   the track, which only ever exposes the neighbouring row's padding -- ink stays
   clear of the window edge at this row height. The final stop lands on the
   duplicated first entry, so the restart is invisible.
   HomepageMobile.razor.css declares the same keyframe name at its own step.
   That is safe: Blazor CSS isolation rewrites @keyframes names AND their
   animation-name references per stylesheet, so this one compiles to
   hp-hero-rotator-b-<desktop scope> and mobile's to its own -- verified in the
   browser, not assumed. Do not rely on that if you move this to global CSS. */
@keyframes hp-hero-rotator-b-3h4f88f3jq {
    0%, 11.9%       { transform: translateY(0)                                rotate(0deg); }
    14.29%, 26.19%  { transform: translateY(calc(var(--hp-rotator-row) * -1))  rotate(-1.5deg); }
    28.57%, 40.48%  { transform: translateY(calc(var(--hp-rotator-row) * -2))  rotate(1.5deg); }
    42.86%, 54.76%  { transform: translateY(calc(var(--hp-rotator-row) * -3))  rotate(-1deg); }
    57.14%, 69.05%  { transform: translateY(calc(var(--hp-rotator-row) * -4))  rotate(1deg); }
    71.43%, 83.33%  { transform: translateY(calc(var(--hp-rotator-row) * -5))  rotate(-1.5deg); }
    85.71%, 97.62%  { transform: translateY(calc(var(--hp-rotator-row) * -6))  rotate(1.5deg); }
    100%            { transform: translateY(calc(var(--hp-rotator-row) * -7))  rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    [b-3h4f88f3jq] .hp-hero-rotator-track {
        animation: none;
    }
}

/* -- Promo surface ----------------------------------------------- */

[b-3h4f88f3jq] .hp-promo {
    background: var(--meb-surface-section-freecta);
    color: var(--meb-text-inverse);
}

/* -- Start Playing section background (white) -------------------- */

[b-3h4f88f3jq] .hp-start-playing-section {
    background: var(--meb-surface-card);
}
/* Inline: force equal halves */
/* FLEX-CHILD GAP: <Inline> has no flex-grow child param — copy column must expand to fill remaining row width. */
[b-3h4f88f3jq] .hp-start-playing-copy {
    flex: 1;
}
/* -- Popular Game Cases surface ----------------------------------- */

[b-3h4f88f3jq] .hp-game-types {
    background: var(--meb-surface-section-popularcases);
}

/* -- FAQ surface -------------------------------------------------- */

[b-3h4f88f3jq] .hp-faq {
    background: var(--meb-surface-section-faq);
}

/* -- How it works ------------------------------------------------ */

[b-3h4f88f3jq] .hp-how-it-works {
    padding-block: var(--meb-space-stack-none);
    background: var(--meb-surface-section-howtoplay);
}

[b-3h4f88f3jq] .hp-how-panel {
    position: relative;
    min-block-size: 25rem;
    overflow: hidden;
}

[b-3h4f88f3jq] .hp-how-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

[b-3h4f88f3jq] .hp-how-steps {
    inline-size: 100%;
}

[b-3h4f88f3jq] .hp-how-step-row {
    inline-size: 100%;
}

[b-3h4f88f3jq] .hp-how-step-badge {
    display: inline-flex;
    /* FLEX-CHILD GAP: <Inline> has no FlexBasis child param — badge must stay fixed-width within the flex row. */
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: var(--meb-border-width-sm) solid var(--meb-border-pagination-item);
    border-radius: var(--meb-radius-pill);
    background-color: var(--meb-surface-card);
    color: var(--meb-border-pagination-item);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-regular);
}

[b-3h4f88f3jq] .hp-how-step-copy {
    /* FLEX-CHILD GAP: <Inline> has no flex-grow child param — copy column must expand to fill remaining row width. */
    flex: 1 1 0;
    min-inline-size: 0;
}

[b-3h4f88f3jq] .hp-how-step-copy .hp-body {
    max-width: none;
}

[b-3h4f88f3jq] .hp-how-dots-wrap {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: clamp(24rem, 34vw, 34rem);
    transform: translate(-28%, 18%) rotate(14deg);
    transform-origin: bottom left;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

[b-3h4f88f3jq] .hp-how-dots.decorative-svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

[b-3h4f88f3jq] .hp-how-it-works .hp-heading {
    color: var(--meb-text-pagination-item);
}

[b-3h4f88f3jq] .hp-how-it-works h2.hp-heading {
    font-size: var(--meb-font-size-h1-desktop);
}

/* -- Value proposition strip ------------------------------------ */

[b-3h4f88f3jq] .hp-value-strip-section {
    padding-block: var(--meb-space-stack-none);
    background: var(--meb-surface-section-valueprops);
}

[b-3h4f88f3jq] .hp-value-strip {
    padding-block: var(--meb-space-stack-md);
}

[b-3h4f88f3jq] .hp-value-strip-item {
    width: 100%;
    margin: var(--meb-space-stack-none);
    padding-block: var(--meb-space-stack-xs);
    text-align: center;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-h3-desktop);
    font-weight: var(--meb-font-weight-bold);
    line-height: var(--meb-font-lineheight-heading);
}

[b-3h4f88f3jq] .hp-value-strip-item--downloads {
    color: var(--meb-text-valueprops-downloads);
}

[b-3h4f88f3jq] .hp-value-strip-item--printing {
    color: var(--meb-text-valueprops-printing);
}

[b-3h4f88f3jq] .hp-value-strip-item--paper {
    color: var(--meb-text-valueprops-paper);
}

[b-3h4f88f3jq] .hp-value-strip-item--mess {
    color: var(--meb-text-valueprops-mess);
}

/* -- Creator / player split ------------------------------------- */

[b-3h4f88f3jq] .hp-split-section {
    /*padding-block-start: var(--meb-space-stack-none);*/
}

[b-3h4f88f3jq] .hp-split-grid {
    overflow: hidden;
}

[b-3h4f88f3jq] .hp-split-panel {
    /* #10547: min, not fixed (as the catalog's .layout-dual-panel__card) -- a fixed height under
       the grid's overflow:hidden clipped the CTA whenever the title wrapped. */
    min-block-size: var(--meb-layout-homepage-split-panel-height);
    color: var(--meb-text-default);
}

.hp-split-panel[b-3h4f88f3jq]  .ui-card-wrapper {
    block-size: 100%;
    padding: var(--meb-space-stack-none);
    border-radius: var(--meb-border-radius-none);
    box-shadow: none;
    color: inherit;
}

.hp-split-panel--creator[b-3h4f88f3jq]  .ui-card-wrapper {
    background: var(--meb-surface-section-creator);
}

.hp-split-panel--player[b-3h4f88f3jq]  .ui-card-wrapper {
    background: var(--meb-surface-section-player);
}

[b-3h4f88f3jq] .hp-split-panel-shell,
[b-3h4f88f3jq] .hp-split-panel-layout,
[b-3h4f88f3jq] .hp-split-content {
    block-size: 100%;
}

[b-3h4f88f3jq] .hp-split-content,
[b-3h4f88f3jq] .hp-split-lines {
    inline-size: min(100%, var(--meb-layout-homepage-split-panel-content-width));
}

[b-3h4f88f3jq] .hp-split-cta {
    inline-size: min(100%, var(--meb-layout-homepage-split-panel-content-width));
    max-inline-size: var(--meb-layout-homepage-split-panel-content-width);
    /* FLEX-CHILD GAP: MebButton renders a flex row internally — justify-content centers the button label
       within the component's own flex container; no Bingo primitive covers internal button layout. */
    justify-content: center;
    --button-background: var(--meb-surface-card);
    --button-foreground: var(--meb-text-pagination-item);
    --button-border: var(--meb-border-default);
    --button-shadow: var(--meb-button-secondary-shadow);
    --meb-button-secondary-hover-background: var(--meb-surface-card);
    --meb-button-secondary-hover-shadow: var(--meb-button-secondary-shadow);
    --meb-button-secondary-active-background: var(--meb-surface-card);
    --meb-button-secondary-active-shadow: var(--meb-button-secondary-shadow);
}

[b-3h4f88f3jq] .hp-split-panel-layout {
    inline-size: 100%;
}

[b-3h4f88f3jq] .hp-split-title {
    margin: var(--meb-space-stack-none);
    color: var(--meb-text-pagination-item);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-h1-desktop);
    font-weight: var(--meb-font-weight-bold);
    line-height: var(--meb-font-lineheight-heading);
    text-align: left;
}

[b-3h4f88f3jq] .hp-split-line {
    margin: var(--meb-space-stack-none);
    color: var(--meb-text-default);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-semibold);
    line-height: var(--meb-font-lineheight-body);
    text-align: left;
}


/* -- Section label ----------------------------------------------- */
/* TOKEN GAP: No font-size token <14px exists (labels want ~12px).
   Using font.size.body.sm.desktop (14px) as the nearest governed value.
   TOKEN GAP: No letter-spacing token exists; property removed. */

[b-3h4f88f3jq] .hp-label {
    display: inline-block;
    font-size: var(--meb-font-size-body-sm-desktop);
    font-weight: var(--meb-font-weight-semibold);
    text-transform: uppercase;
    opacity: var(--meb-opacity-muted);
}

/* -- Headings ---------------------------------------------------- */

[b-3h4f88f3jq] .hp-heading {
    margin: var(--meb-space-stack-none);
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-bold);
    line-height: var(--meb-font-lineheight-heading);
}

[b-3h4f88f3jq] h1.hp-heading {
    font-size: var(--meb-font-size-h1-desktop);
}

[b-3h4f88f3jq] h2.hp-heading {
    font-size: var(--meb-font-size-h2-desktop);
}

/* -- Body text --------------------------------------------------- */
/* TOKEN GAP: No body max-width token exists; 60ch kept as a
   readability constraint that is structural, not visual. */

[b-3h4f88f3jq] .hp-body {
    margin: var(--meb-space-stack-none);
    max-width: 60ch;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-body);
}

/* -- At a glance list (#10841) ------------------------------------- */
/* Plain scoped selectors: the list is authored in this component.   */
/* Markers inherit the text colour, so light, dark and forced-colors */
/* themes follow the text.                                            */
/* #10868: no 60ch cap. #10868 expects the block to use the same     */
/* container width as How to Play, whose step text is not capped     */
/* either. The list box spans the md lg Container; How to Play text   */
/* starts after its badge, so its lines are a little shorter.        */
/* max-width: none is kept on purpose to record that decision.       */

.hp-glance-list[b-3h4f88f3jq] {
    margin: var(--meb-space-stack-none);
    padding-inline-start: 1.25em;
    max-width: none;
    list-style: disc;
    color: var(--meb-text-default);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-desktop);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-body);
}

.hp-glance-list li + li[b-3h4f88f3jq] {
    margin-block-start: var(--meb-space-2);
}

/* -- Game type cards (Layout 1102 — catalog class names, homepage scope) -- */
/* CSS is verbatim from LayoutCatalog.razor.css; Blazor scopes each          */
/* component independently so both pages work without coupling.              */

[b-3h4f88f3jq] .hp-game-card-shell.ui-card-wrapper {
    position: relative;
    min-height: 254px;
    width: 100%;
    padding: var(--meb-space-stack-none);
    overflow: hidden;
    border: var(--meb-border-width-sm) solid var(--meb-border-default);
    border-radius: var(--meb-radius-pagination);
    background: var(--meb-surface-card);
}

.hp-game-card[b-3h4f88f3jq] {
    position: relative;
    min-height: 254px;
    height: 254px;
    max-height: 254px;
    box-sizing: border-box;
    overflow: clip;
}

.hp-game-card__title-region[b-3h4f88f3jq] {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 112px;
    z-index: 2;
}

.hp-game-card__tag-region[b-3h4f88f3jq] {
    position: absolute;
    left: 24px;
    right: 146px;
    bottom: 22px;
    z-index: 2;
}

.hp-game-card__title[b-3h4f88f3jq] {
    margin: var(--meb-space-stack-none);
    color: var(--meb-text-pagination-item);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-h3-desktop);
    font-weight: var(--meb-font-weight-bold);
    line-height: var(--meb-font-lineheight-heading);
}

.hp-game-card__tags[b-3h4f88f3jq] {
    max-width: 100%;
}

.hp-game-card__art[b-3h4f88f3jq] {
    position: absolute;
    right: var(--meb-space-stack-none);
    bottom: var(--meb-space-stack-none);
    z-index: 1;
    overflow: visible;
    isolation: isolate;
    background: transparent;
    pointer-events: none;
}

.hp-game-card__art-stage[b-3h4f88f3jq] {
    position: relative;
    width: 100%;
    height: 100%;
}

[b-3h4f88f3jq] .hp-game-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}

[b-3h4f88f3jq] .hp-game-card__image--gift,
[b-3h4f88f3jq] .hp-game-card__image--baby,
[b-3h4f88f3jq] .hp-game-card__image--park {
    transform-origin: right bottom;
}

.hp-game-card--gift .hp-game-card__art[b-3h4f88f3jq] {
    width: 196px;
    height: 166px;
}

[b-3h4f88f3jq] .hp-game-card__image--gift {
    transform: translate(14px, 10px) rotate(-6deg) scale(1.12);
}

.hp-game-card--baby .hp-game-card__art[b-3h4f88f3jq] {
    width: 178px;
    height: 154px;
}

[b-3h4f88f3jq] .hp-game-card__image--baby {
    transform: translate(12px, 12px) rotate(4deg) scale(1.09);
}

.hp-game-card--park .hp-game-card__art[b-3h4f88f3jq] {
    width: 158px;
    height: 138px;
}

[b-3h4f88f3jq] .hp-game-card__image--park {
    transform: translate(10px, 10px) rotate(-2deg) scale(1.01);
}

[b-3h4f88f3jq] .hp-game-card__link {
    /* FLEX-CHILD GAP: This is an absolutely-positioned circle element; no Bingo primitive can center
       content inside a non-block inline element. display: inline-flex is required to center the '>' glyph. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    width: var(--meb-size-touch-target);
    height: var(--meb-size-touch-target);
    min-width: var(--meb-size-touch-target);
    min-height: var(--meb-size-touch-target);
    border: var(--meb-border-width-sm) solid var(--meb-border-default);
    border-radius: var(--meb-border-radius-full);
    background: var(--meb-surface-card);
    color: var(--meb-text-default);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-h3-desktop);
    font-weight: var(--meb-font-weight-bold);
    line-height: var(--meb-font-lineheight-tight);
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
}

[b-3h4f88f3jq] .hp-game-card__link:hover,
[b-3h4f88f3jq] .hp-game-card__link:focus-visible {
    background: var(--meb-surface-card);
    color: var(--meb-text-default);
}

/* -- Start Playing art stage --------------------------------------- */

/* FLEX-CHILD GAP: <Inline> has no flex-grow child param — art stage must grow to match the copy column height.
   §4.1 allowed: overflow, align-self, and negative margin bleed are composition concerns, not primitive spacing. */
[b-3h4f88f3jq] .hp-start-playing-art {
    flex: 1;
    align-self: stretch;
    overflow: hidden;
    background: var(--meb-surface-section-startplaying-media);
    margin-inline-end: calc(-2.1 * var(--container-padding, var(--meb-space-container-lg)));
    margin-block: calc(-1 * var(--container-padding-block, var(--meb-space-container-lg)));
}

/* §4.1 allowed: object-fit for composition fill; image stretches to fill art stage height */
[b-3h4f88f3jq] .hp-start-playing-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -- Promo title — display-size accent font for the It's Freee!!! band --- */

[b-3h4f88f3jq] .hp-promo-title {
    font-family: var(--meb-font-family-accent);
    font-size: var(--meb-font-size-display-desktop);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-display);
}

/* -- Promo body — fill column width in the 2-col Grid layout ----------- */

[b-3h4f88f3jq] .hp-promo .hp-body {
    max-width: none;
}

/* -- Figma-fidelity polish: section headings use the navy "Bingo Headlines" color.
   The design-of-record heading navy is #1C1E52 == --meb-text-pagination-item.
   NOT --meb-text-heading-brand (#0a0d60), which is a distinct, deeper navy used for
   the site header. Kept for exact Figma fidelity and consistency with the existing
   how-it-works / split-title headings, which share this token. -- */

[b-3h4f88f3jq] .hp-game-types .hp-heading,
[b-3h4f88f3jq] .hp-faq .hp-heading,
[b-3h4f88f3jq] .hp-start-playing-section .hp-heading {
    color: var(--meb-text-pagination-item);
}

/* At a glance (#10841): the section and its h2 are authored in this component, so the
   rule is plain scoped CSS with no ::deep. */

.hp-at-a-glance .hp-heading[b-3h4f88f3jq] {
    color: var(--meb-text-pagination-item);
}

/* -- FAQ accordion: crisp black outline + dividers (design), overriding the */
/*    default pale-gray border via the shared control's CSS-variable hook.    */

[b-3h4f88f3jq] .hp-faq .ui-accordion {
    --accordion-border: var(--meb-border-default);
}
/* _content/LiveEventBingo.Shared/Pages/Common/Pages/HomePage/HomepageMobile.razor.rz.scp.css */
/* Homepage mobile � scoped composition CSS for the homepage.
   Layout remains primitive-owned.
   Standard visuals and typography consume governed theme variables.
   Only minimal art-stage and decorative composition geometry stays local.
   Shared fade behavior remains owned by DecorativeSvg. */

/* -- Root wrapper ------------------------------------------------ */

[b-rrmjohpxpb] .homepage-mobile {
    width: 100%;
}

/* -- Section vertical rhythm ------------------------------------- */
/* Sections stack flush — no inter-section padding gap.
   A dedicated section-padding token should be added when the
   design system formalises section-level spacing. */

[b-rrmjohpxpb] .hp-section {
    padding-block: var(--meb-space-stack-none);
}

    [b-rrmjohpxpb] .hp-section > .ui-container {
        padding-left: var(--meb-space-container-md);
        padding-right: var(--meb-space-container-md);
    }

[b-rrmjohpxpb] .hp-hero {
    padding-block: var(--meb-space-stack-xl);
    background: var(--meb-surface-hero-background);
}

[b-rrmjohpxpb] .hp-hero-panel {
    position: relative;
    overflow: hidden;
}

[b-rrmjohpxpb] .hp-hero-title {
    margin: var(--meb-space-stack-none);
    max-inline-size: 12ch;
    text-align: left;
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-accent);
    font-size: var(--meb-font-size-display-mobile);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-display);
}

[b-rrmjohpxpb] .hp-hero-body {
    margin: var(--meb-space-stack-none);
    max-inline-size: 28ch;
    text-align: left;
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-mobile);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-body);
}

/* The stage is widened to the purple panel's edges and padded back by the same amount, so the dots can
   run edge to edge while the phone stays centred in the same column as the copy. Only the INNER
   Container (Size="full" Padding="md", inside .hp-hero-panel) insets the stage, so one
   space.container.md each side reaches the panel edge; the outer Container sits outside the panel.
   This is coupled to that Container's padding. */
[b-rrmjohpxpb] .hp-hero-art-stage {
    position: relative;
    box-sizing: border-box;
    margin-inline: calc(-1 * var(--meb-space-container-md));
    inline-size: calc(100% + 2 * var(--meb-space-container-md));
    min-block-size: 17rem;
    padding-block-start: var(--meb-space-stack-md);
    padding-inline: var(--meb-space-container-md);
    overflow: hidden;
}

/* Same tilted field as desktop (12deg), tiled so it covers the stage at any mobile width.

   The dots art is 853x640 with a 48-unit tile, drawn here at --hp-dots-art (600px), so dots render at
   about 70% of desktop size. A single sheet only reached all four edges up to roughly 400px wide;
   wider mobile viewports grow the stage past it and left two opposite corners bare. So the field is a
   2x2 grid of sheets. Each sheet is clipped to WHOLE tiles (17 across, 13 down = 816 and 624 of the
   853 and 640 art units), so every sheet starts on the pattern origin and the dots run unbroken
   across the seams, with no overlap to double the opacity. The field is centred on the stage and
   tilted; the stage clips the overrun. The field is about 1148 x 878px, so a stage W x H is covered while
   W*cos12 + H*sin12 <= 1148 and W*sin12 + H*cos12 <= 878; 767 x 700 passes, past any mobile layout.
   The 853, 816, 624 and 48 here are tied to the dots art by HeroDotsTilingContractTests. */
[b-rrmjohpxpb] .hp-hero-dots-wrap {
    --hp-dots-art: 600px;
    --hp-dots-sheet-w: calc(var(--hp-dots-art) * 816 / 853);
    --hp-dots-sheet-h: calc(var(--hp-dots-art) * 624 / 853);
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    grid-template-columns: repeat(2, var(--hp-dots-sheet-w));
    grid-auto-rows: var(--hp-dots-sheet-h);
    transform: translate(-50%, -50%) rotate(12deg);
    z-index: 0;
    pointer-events: none;
}

[b-rrmjohpxpb] .hp-hero-dots-sheet {
    overflow: hidden;
}

[b-rrmjohpxpb] .hp-hero-dots.decorative-svg {
    block-size: auto;
}

/* The hero art is a phone (HeroDeviceBoard). It is taller than the old photo was, so the stage
   grows to hold the card and the phone is centred in it. */
[b-rrmjohpxpb] .hp-hero-board-wrap {
    position: relative;
    inline-size: min(15rem, 70%);
    margin-inline: auto;
    z-index: 2;
    transform: rotate(5deg);
    transform-origin: bottom center;
}

/* -- Hero event rotator (#9649) ----------------------------------- */
/* Mobile twin of the desktop rotator: same markup, 48px tile, wrapping row.
   The whole row is a single anchor to /library, so its horizontal composition
   cannot be an <Inline> primitive -- an anchor is the row. The flex here is the
   rotator's own internal composition, not page layout, and it targets only
   rotator-local classes.
   ROTATOR GEOMETRY: --hp-rotator-row is the single source of truth for the
   window height, the row height AND the keyframe step. */

[b-rrmjohpxpb] .hp-hero-rotator-link {
    --hp-rotator-row: 48px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--meb-space-inline-sm);
    text-decoration: none;
}

[b-rrmjohpxpb] .hp-hero-rotator-label {
    color: var(--meb-text-inverse);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-h3-mobile);
    font-weight: var(--meb-font-weight-semibold);
    white-space: nowrap;
}

[b-rrmjohpxpb] .hp-hero-rotator-window {
    display: block;
    /* APERTURE: box-sizing is border-box app-wide, so the declared height has to
       carry the border or the aperture ends up ~5px SHORT of a row -- every entry
       then renders cropped and sits above optical centre. Aperture == one row. */
    block-size: calc(var(--hp-rotator-row) + 2 * var(--meb-border-width-medium));
    overflow: hidden;
    background: var(--meb-surface-card);
    border: var(--meb-border-width-medium) solid var(--meb-border-default);
    border-radius: var(--meb-border-radius-sm);
    box-shadow: var(--meb-shadow-surface-comic);
    transition: box-shadow var(--meb-motion-fast);
}

[b-rrmjohpxpb] .hp-hero-rotator-link:hover .hp-hero-rotator-window {
    box-shadow: var(--meb-shadow-surface-comic-sm);
}

[b-rrmjohpxpb] .hp-hero-rotator-track {
    display: flex;
    flex-direction: column;
    animation: hp-hero-rotator-b-rrmjohpxpb 12.6s cubic-bezier(.5, 0, .15, 1) infinite;
}

[b-rrmjohpxpb] .hp-hero-rotator-item {
    display: flex;
    align-items: center;
    block-size: var(--hp-rotator-row);
    padding-inline: var(--meb-space-inline-md);
    color: var(--meb-text-default);
    font-family: var(--meb-font-family-accent);
    font-size: var(--meb-font-size-h3-mobile);
    white-space: nowrap;
    /* #9650: the items are anchors now (one per occasion) -- see HomepageDesktop.razor.css. */
    text-decoration: none;
}

/* #9650: freeze the reel while it is being touched/focused, so a tap opens the occasion the
   user actually read rather than the one dealing in behind it. Same rationale as desktop.
   :hover fires on tap on touch devices, which is exactly the moment that matters here. */
[b-rrmjohpxpb] .hp-hero-rotator-link:hover .hp-hero-rotator-track,
[b-rrmjohpxpb] .hp-hero-rotator-link:focus-within .hp-hero-rotator-track {
    animation-play-state: paused;
}

/* At 390 the label takes line 1 and `see all` lands BESIDE the tile on line 2
   (measured, not assumed -- the design draft expected it to wrap below). The
   inline-sm gap alone would leave only 4px of visual clearance because the tile's
   comic shadow overhangs 4px to the right, so this adds a second inline-sm. */
[b-rrmjohpxpb] .hp-hero-rotator-more {
    margin-inline-start: var(--meb-space-inline-sm);
    color: var(--meb-accent-secondary);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-mobile);
    font-weight: var(--meb-font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 4px;
    white-space: nowrap;
}

/* Same 1/7 stop pitch as desktop (see HomepageDesktop.razor.css for the timing
   derivation); only the step differs, and that comes from --hp-rotator-row.
   Sharing the desktop sheet's keyframe name is safe: Blazor CSS isolation
   rewrites @keyframes names AND their animation-name references per stylesheet,
   so this one compiles to hp-hero-rotator-b-<mobile scope>. */
@keyframes hp-hero-rotator-b-rrmjohpxpb {
    0%, 11.9%       { transform: translateY(0)                                rotate(0deg); }
    14.29%, 26.19%  { transform: translateY(calc(var(--hp-rotator-row) * -1))  rotate(-1.5deg); }
    28.57%, 40.48%  { transform: translateY(calc(var(--hp-rotator-row) * -2))  rotate(1.5deg); }
    42.86%, 54.76%  { transform: translateY(calc(var(--hp-rotator-row) * -3))  rotate(-1deg); }
    57.14%, 69.05%  { transform: translateY(calc(var(--hp-rotator-row) * -4))  rotate(1deg); }
    71.43%, 83.33%  { transform: translateY(calc(var(--hp-rotator-row) * -5))  rotate(-1.5deg); }
    85.71%, 97.62%  { transform: translateY(calc(var(--hp-rotator-row) * -6))  rotate(1.5deg); }
    100%            { transform: translateY(calc(var(--hp-rotator-row) * -7))  rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    [b-rrmjohpxpb] .hp-hero-rotator-track {
        animation: none;
    }
}

/* -- Promo surface ----------------------------------------------- */

[b-rrmjohpxpb] .hp-promo {
    background: var(--meb-surface-section-freecta);
    color: var(--meb-text-inverse);
}

/* -- Start Playing section background (white) -------------------- */

[b-rrmjohpxpb] .hp-start-playing-section {
    background: var(--meb-surface-card);
}

/* -- Popular Game Cases surface ----------------------------------- */

[b-rrmjohpxpb] .hp-game-types {
    background: var(--meb-surface-section-popularcases);
}

/* -- Popular Game Cases tag chip ---------------------------------- */

[b-rrmjohpxpb] .hp-game-type-tag {
    background: var(--meb-surface-tag-popularcase);
    border-radius: var(--meb-radius-pill);
    padding-block: var(--meb-space-stack-xs);
    padding-inline: var(--meb-space-stack-sm);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-mobile);
    font-weight: var(--meb-font-weight-medium);
    color: var(--meb-text-default);
}

/* -- FAQ surface -------------------------------------------------- */

[b-rrmjohpxpb] .hp-faq {
    background: var(--meb-surface-section-faq);
}

/* -- How it works ------------------------------------------------ */

[b-rrmjohpxpb] .hp-how-it-works {
    position: relative;
    overflow: hidden;
    padding-block: var(--meb-space-stack-none);
    background: var(--meb-surface-section-howtoplay);
}

[b-rrmjohpxpb] .hp-how-content {
    position: relative;
    z-index: 1;
}

[b-rrmjohpxpb] .hp-how-content .hp-label,
[b-rrmjohpxpb] .hp-how-content .hp-heading,
[b-rrmjohpxpb] .hp-how-content .hp-body {
    text-align: left;
}

[b-rrmjohpxpb] .hp-how-steps {
    inline-size: 100%;
}

[b-rrmjohpxpb] .hp-how-step-row {
    inline-size: 100%;
}

[b-rrmjohpxpb] .hp-how-step-badge {
    display: inline-flex;
    /* FLEX-CHILD GAP: <Inline> has no FlexBasis child param — badge must stay fixed-width within the flex row. */
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: var(--meb-border-width-sm) solid var(--meb-border-pagination-item);
    border-radius: var(--meb-radius-pill);
    background: var(--meb-surface-card);
    color: var(--meb-border-pagination-item);
    font-size: var(--meb-font-size-body-mobile);
    font-weight: var(--meb-font-weight-regular);
}

[b-rrmjohpxpb] .hp-how-step-copy {
    /* FLEX-CHILD GAP: <Inline> has no flex-grow child param — copy column must expand to fill remaining row width. */
    flex: 1 1 0;
    min-inline-size: 0;
}

[b-rrmjohpxpb] .hp-how-dots-wrap {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: clamp(18rem, 82vw, 24rem);
    transform: translate(-34%, 18%);
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

[b-rrmjohpxpb] .hp-how-dots.decorative-svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

[b-rrmjohpxpb] .hp-how-it-works .hp-heading {
    color: var(--meb-text-pagination-item);
}

[b-rrmjohpxpb] .hp-how-it-works h2.hp-heading {
    font-size: var(--meb-font-size-h1-mobile);
}

/* -- Value proposition strip ------------------------------------ */

[b-rrmjohpxpb] .hp-value-strip-section {
    padding-block: var(--meb-space-stack-none);
    background: var(--meb-surface-section-valueprops);
}

[b-rrmjohpxpb] .hp-value-strip {
    padding-block: var(--meb-space-stack-md);
}

[b-rrmjohpxpb] .hp-value-strip-item {
    width: 100%;
    margin: var(--meb-space-stack-none);
    padding-block: var(--meb-space-stack-sm);
    text-align: center;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-h3-mobile);
    font-weight: var(--meb-font-weight-bold);
    line-height: var(--meb-font-lineheight-heading);
}

[b-rrmjohpxpb] .hp-value-strip-item--downloads {
    color: var(--meb-text-valueprops-downloads);
}

[b-rrmjohpxpb] .hp-value-strip-item--printing {
    color: var(--meb-text-valueprops-printing);
}

[b-rrmjohpxpb] .hp-value-strip-item--paper {
    color: var(--meb-text-valueprops-paper);
}

[b-rrmjohpxpb] .hp-value-strip-item--mess {
    color: var(--meb-text-valueprops-mess);
}

/* -- Creator / player split ------------------------------------- */

[b-rrmjohpxpb] .hp-split-section {
    padding-block-start: var(--meb-space-stack-none);
}

[b-rrmjohpxpb] .hp-split-stack {
    inline-size: 100%;
}

[b-rrmjohpxpb] .hp-split-panel {
    color: var(--meb-text-default);
}
[b-rrmjohpxpb] .hp-split-card {
    border-radius: var(--meb-space-stack-none);
}

.hp-split-panel[b-rrmjohpxpb]  .ui-card-wrapper {
    block-size: 100%;
    padding: var(--meb-space-stack-none);
    box-shadow: none;
    color: inherit;
}

.hp-split-panel--creator[b-rrmjohpxpb]  .ui-card-wrapper {
    background: var(--meb-surface-section-creator);
}

.hp-split-panel--player[b-rrmjohpxpb]  .ui-card-wrapper {
    background: var(--meb-surface-section-player);
}

[b-rrmjohpxpb] .hp-split-panel-shell,
[b-rrmjohpxpb] .hp-split-panel-layout,
[b-rrmjohpxpb] .hp-split-content {
    block-size: 100%;
}

[b-rrmjohpxpb] .hp-split-content,
[b-rrmjohpxpb] .hp-split-lines {
    inline-size: min(100%, var(--meb-layout-homepage-split-panel-content-width));
}

/* FLEX-CHILD GAP: MebButton renders a flex row internally — justify-content: center is required to align button label. */
[b-rrmjohpxpb] .hp-split-cta {
    inline-size: min(100%, var(--meb-layout-homepage-split-panel-content-width));
    max-inline-size: var(--meb-layout-homepage-split-panel-content-width);
    justify-content: center;
    --button-background: var(--meb-surface-card);
    --button-foreground: var(--meb-text-pagination-item);
    --button-border: var(--meb-border-default);
    --button-shadow: var(--meb-button-secondary-shadow);
    --meb-button-secondary-hover-background: var(--meb-surface-card);
    --meb-button-secondary-hover-shadow: var(--meb-button-secondary-shadow);
    --meb-button-secondary-active-background: var(--meb-surface-card);
    --meb-button-secondary-active-shadow: var(--meb-button-secondary-shadow);
}

[b-rrmjohpxpb] .hp-split-panel-layout {
    min-block-size: 13rem;
    inline-size: 100%;
}

[b-rrmjohpxpb] .hp-split-title {
    margin: var(--meb-space-stack-none);
    color: var(--meb-text-pagination-item);
    text-align: left;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-h2-mobile);
    font-weight: var(--meb-font-weight-bold);
    line-height: var(--meb-font-lineheight-heading);
}

[b-rrmjohpxpb] .hp-split-line {
    margin: var(--meb-space-stack-none);
    color: var(--meb-text-default);
    text-align: left;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-mobile);
    font-weight: var(--meb-font-weight-semibold);
    line-height: var(--meb-font-lineheight-body);
}

/* -- Section label ----------------------------------------------- */
/* TOKEN GAP: No font-size token <14px exists (labels want ~12px).
   Using font.size.body.sm.mobile (14px) as the nearest governed value.
   TOKEN GAP: No letter-spacing token exists; property removed. */

[b-rrmjohpxpb] .hp-label {
    display: inline-block;
    font-size: var(--meb-font-size-body-sm-mobile);
    font-weight: var(--meb-font-weight-semibold);
    text-transform: uppercase;
    opacity: var(--meb-opacity-muted);
}

/* -- Headings ---------------------------------------------------- */

[b-rrmjohpxpb] .hp-heading {
    margin: var(--meb-space-stack-none);
    text-align: center;
    font-family: var(--meb-font-family-primary);
    font-weight: var(--meb-font-weight-bold);
    line-height: var(--meb-font-lineheight-heading);
}

[b-rrmjohpxpb] h1.hp-heading {
    font-size: var(--meb-font-size-h1-mobile);
}

[b-rrmjohpxpb] h2.hp-heading {
    font-size: var(--meb-font-size-h2-mobile);
}

/* -- At a glance list (#10841) ------------------------------------- */
/* Plain scoped selectors: the list is authored in this component.   */
/* Markers inherit the text colour, so light, dark and forced-colors */
/* themes follow the text. Left aligned on purpose: a centred        */
/* bulleted list detaches the markers from their sentences.          */

.hp-glance-list[b-rrmjohpxpb] {
    margin: var(--meb-space-stack-none);
    padding-inline-start: 1.25em;
    list-style: disc;
    text-align: start;
    color: var(--meb-text-default);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-mobile);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-body);
}

.hp-glance-list li + li[b-rrmjohpxpb] {
    margin-block-start: var(--meb-space-2);
}

/* -- Body text --------------------------------------------------- */

[b-rrmjohpxpb] .hp-body {
    margin: var(--meb-space-stack-none);
    text-align: center;
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-mobile);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-body);
}

/* -- Game type cards — Layout 1102 (image-underlay) on mobile ----- */
/* §4.1 allowed: position/overflow/transform for art composition */
/* Card padding removed so art fills to card edge. */

[b-rrmjohpxpb] .hp-game-card-shell.ui-card-wrapper {
    position: relative;
    min-height: 200px;
    width: 100%;
    padding: var(--meb-space-stack-none);
    overflow: hidden;
    border: var(--meb-border-width-sm) solid var(--meb-border-default);
    border-radius: var(--meb-radius-pagination);
    background: var(--meb-surface-card);
}

.hp-game-card[b-rrmjohpxpb] {
    position: relative;
    min-height: 200px;
    height: 200px;
    max-height: 200px;
    box-sizing: border-box;
    overflow: clip;
}

.hp-game-card__title-region[b-rrmjohpxpb] {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 96px;
    z-index: 2;
}

.hp-game-card__tag-region[b-rrmjohpxpb] {
    position: absolute;
    left: 20px;
    right: 120px;
    bottom: 18px;
    z-index: 2;
}

.hp-game-card__title[b-rrmjohpxpb] {
    margin: var(--meb-space-stack-none);
    color: var(--meb-text-pagination-item);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-mobile);
    font-weight: var(--meb-font-weight-bold);
    line-height: var(--meb-font-lineheight-heading);
}

.hp-game-card__tags[b-rrmjohpxpb] {
    max-width: 100%;
}

.hp-game-card__art[b-rrmjohpxpb] {
    position: absolute;
    right: var(--meb-space-stack-none);
    bottom: var(--meb-space-stack-none);
    z-index: 1;
    overflow: visible;
    isolation: isolate;
    background: transparent;
    pointer-events: none;
}

.hp-game-card__art-stage[b-rrmjohpxpb] {
    position: relative;
    width: 100%;
    height: 100%;
}

[b-rrmjohpxpb] .hp-game-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}

[b-rrmjohpxpb] .hp-game-card__image--gift,
[b-rrmjohpxpb] .hp-game-card__image--baby,
[b-rrmjohpxpb] .hp-game-card__image--park {
    transform-origin: right bottom;
}

.hp-game-card--gift .hp-game-card__art[b-rrmjohpxpb] {
    width: 160px;
    height: 134px;
}

[b-rrmjohpxpb] .hp-game-card__image--gift {
    transform: translate(10px, 8px) rotate(-6deg) scale(1.12);
}

.hp-game-card--baby .hp-game-card__art[b-rrmjohpxpb] {
    width: 144px;
    height: 124px;
}

[b-rrmjohpxpb] .hp-game-card__image--baby {
    transform: translate(8px, 10px) rotate(4deg) scale(1.09);
}

.hp-game-card--park .hp-game-card__art[b-rrmjohpxpb] {
    width: 128px;
    height: 112px;
}

[b-rrmjohpxpb] .hp-game-card__image--park {
    transform: translate(8px, 8px) rotate(-2deg) scale(1.01);
}

[b-rrmjohpxpb] .hp-game-card__link {
    /* FLEX-CHILD GAP: This is an absolutely-positioned circle element; no Bingo primitive can center
       content inside a non-block inline element. display: inline-flex is required to center the '>' glyph. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    width: var(--meb-size-touch-target);
    height: var(--meb-size-touch-target);
    min-width: var(--meb-size-touch-target);
    min-height: var(--meb-size-touch-target);
    border: var(--meb-border-width-sm) solid var(--meb-border-default);
    border-radius: var(--meb-border-radius-full);
    background: var(--meb-surface-card);
    color: var(--meb-text-default);
    font-family: var(--meb-font-family-primary);
    font-size: var(--meb-font-size-body-mobile);
    font-weight: var(--meb-font-weight-bold);
    line-height: var(--meb-font-lineheight-tight);
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
}

[b-rrmjohpxpb] .hp-game-card__link:hover,
[b-rrmjohpxpb] .hp-game-card__link:focus-visible {
    background: var(--meb-surface-card);
    color: var(--meb-text-default);
}

/* -- Start Playing art stage --------------------------------------- */

/* §4.1 allowed: overflow for art clipping, border-radius for composition, aspect-ratio to define container proportions */
[b-rrmjohpxpb] .hp-start-playing-art {
    overflow: hidden;
    border-radius: var(--meb-border-radius-lg);
    width: 100%;
    background: var(--meb-surface-section-startplaying-media);
    aspect-ratio: 4 / 3;
}

/* §4.1 allowed: object-fit for composition fill; image fills art stage */
[b-rrmjohpxpb] .hp-start-playing-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -- Promo title — display-size accent font for the It's Freee!!! band --- */

[b-rrmjohpxpb] .hp-promo-title {
    font-family: var(--meb-font-family-accent);
    font-size: var(--meb-font-size-display-mobile);
    font-weight: var(--meb-font-weight-regular);
    line-height: var(--meb-font-lineheight-display);
}

/* -- Start Playing — left-align text on mobile (CT-13 content-first band) */
/* Stack Align="stretch" makes items full-width; text-align overrides the   */
/* global mobile center rule for heading and body within this section.      */

[b-rrmjohpxpb] .hp-start-playing-section .hp-heading,
[b-rrmjohpxpb] .hp-start-playing-section .hp-body {
    text-align: left;
}

/* -- Section header headings — left-align inside Inline justify-between   */

[b-rrmjohpxpb] .hp-game-types .hp-heading,
[b-rrmjohpxpb] .hp-faq .hp-heading {
    text-align: left;
}

/* -- At a glance heading (#10841): navy like the other section headings and
   left-aligned over its left-aligned list. The section and its h2 are authored in
   this component, so the rule is plain scoped CSS with no ::deep. */

.hp-at-a-glance .hp-heading[b-rrmjohpxpb] {
    text-align: left;
    color: var(--meb-text-pagination-item);
}

/* -- Figma-fidelity polish: section headings use the navy "Bingo Headlines" color
   (#1C1E52 == --meb-text-pagination-item), NOT --meb-text-heading-brand (#0a0d60).
   See HomepageDesktop.razor.css for the full rationale. -- */

[b-rrmjohpxpb] .hp-game-types .hp-heading,
[b-rrmjohpxpb] .hp-faq .hp-heading,
[b-rrmjohpxpb] .hp-start-playing-section .hp-heading {
    color: var(--meb-text-pagination-item);
}

/* -- FAQ accordion: crisp black outline + dividers (design), overriding the */
/*    default pale-gray border via the shared control's CSS-variable hook.    */

[b-rrmjohpxpb] .hp-faq .ui-accordion {
    --accordion-border: var(--meb-border-default);
}
/* _content/LiveEventBingo.Shared/Pages/Common/Pages/HomePage/OldHomePage.razor.rz.scp.css */
/* ============================================================
   OldHomePage.razor.css — Scoped styles for the legacy home page
   ============================================================ */

.step-1[b-5ddclw8nej] {
    background: var(--meb-accent-primary);
}

.warning-banner[b-5ddclw8nej] {
    background: #ff4040;
    color: var(--meb-text-inverse);
    font-weight: bold;
    font-size: 1rem;
    border-radius: 18px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 4px 6px 0 #222;
    font-family: 'Fredoka', 'Arial Rounded MT Bold', Arial, sans-serif;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 0 #b22;
}

@media (max-width: 600px) {
    .warning-banner[b-5ddclw8nej] {
        font-size: .8rem;
        padding: 0.8rem 0.7rem;
    }
}

.button-icon[b-5ddclw8nej] {
    aspect-ratio: 1;
    object-fit: contain;
    width: 36px;
}

.new-game[b-5ddclw8nej] {
    background-color: #FCF340;
    box-shadow: 4px 4px 0 #FFD034;
    color: #433B25;
}

.game-list[b-5ddclw8nej] {
    background-color: #A8FF2E;
    box-shadow: 5px 5px 0 #698E66;
    color: #254335;
}

.responsive-svg[b-5ddclw8nej] {
    width: 100%;
    height: auto;
    max-width: 500px;
}

.hero-section[b-5ddclw8nej] {
    margin-bottom: 1rem;
}

.hero-content[b-5ddclw8nej] {
    max-width: 750px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-radius: var(--meb-border-radius-xxl);
}

.page-container[b-5ddclw8nej] {
    display: flex;
    flex-direction: column; /* Stack sections vertically */
}

/* Telerik SVG icon sizing — ::deep required to pierce Telerik component boundary */
[b-5ddclw8nej] .k-svg-icon {
    width: 36px;
    height: 36px;
}

/* ActionButton renders action-btn on its own <button> element —
   ::deep required to pierce the child component boundary */
[b-5ddclw8nej] .action-btn {
    padding: var(--meb-space-stack-10) 20px;
    font-size: 1.1rem;
    border-radius: var(--meb-radius-md);
    transition: transform 0.3s ease;
    margin: var(--meb-space-stack-none);
    align-items: center;
    gap: 1.5rem;
    justify-content: flex-start;
}

[b-5ddclw8nej] .action-btn:hover {
    transform: translate(2px, 2px);
}

.how-it-works-card[b-5ddclw8nej] {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    background-color: rgba(255, 255, 255, 0.9);
}

.step-icon[b-5ddclw8nej] {
    flex: 0 0 60px; /* don't grow or shrink, fixed at 60px */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    color: var(--meb-text-inverse);
}