/* /Components/Layout/Footer.razor.rz.scp.css */
/* No custom CSS — footer uses MudBlazor components exclusively */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Blazor error UI — displayed when an unhandled exception occurs */
#blazor-error-ui[b-nyvw5ab3il] {
    background: var(--brand-warning, lightyellow);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-nyvw5ab3il] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* NavMenu scoped styles — MudBlazor handles drawer navigation styling */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-85hfo8qvdn],
.components-reconnect-repeated-attempt-visible[b-85hfo8qvdn],
.components-reconnect-failed-visible[b-85hfo8qvdn],
.components-pause-visible[b-85hfo8qvdn],
.components-resume-failed-visible[b-85hfo8qvdn],
.components-rejoining-animation[b-85hfo8qvdn] {
    display: none;
}

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


#components-reconnect-modal[b-85hfo8qvdn] {
    background-color: var(--brand-midnight-violet);
    color: var(--brand-almost-white);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-85hfo8qvdn 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-85hfo8qvdn 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-85hfo8qvdn 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-85hfo8qvdn]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-85hfo8qvdn 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-85hfo8qvdn {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-85hfo8qvdn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-85hfo8qvdn] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-85hfo8qvdn] {
    border: 0;
    background-color: var(--brand-nebula-violet);
    color: var(--brand-almost-white);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-85hfo8qvdn] {
        background-color: var(--brand-galaxy-purple);
    }

    #components-reconnect-modal button:active[b-85hfo8qvdn] {
        background-color: var(--brand-nebula-violet);
    }

.components-rejoining-animation[b-85hfo8qvdn] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-85hfo8qvdn] {
        position: absolute;
        border: 3px solid var(--brand-aqua-pulse);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-85hfo8qvdn 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-85hfo8qvdn] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-85hfo8qvdn {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SectionContainer.razor.rz.scp.css */
.section-container[b-afu74b8jvx] {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (max-width: 599px) {
    .section-container[b-afu74b8jvx] {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}
/* /Components/Pages/Signage.razor.rz.scp.css */
.signage[b-xv9e3x4l9o] {
    position: relative;
    width: 540px;
    height: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--gradient-cosmic-cosmos);
    color: var(--brand-almost-white);
    font-family: var(--brand-font);
    overflow: hidden;
}

/* Dim overlay for the overnight window. */
.signage--dim[b-xv9e3x4l9o]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: calc((100 - var(--dim-percent)) / 100);
    pointer-events: none;
    z-index: 50;
}

/* Banner */
.signage__banner[b-xv9e3x4l9o] {
    border-bottom: 2px solid color-mix(in srgb, var(--brand-nebula-violet) 35%, transparent);
    padding: 14px 28px 12px;
}
.signage__brandrow[b-xv9e3x4l9o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.signage__wordmark[b-xv9e3x4l9o] { font-size: 44px; font-weight: 700; letter-spacing: 0.5px; }
.signage__avail[b-xv9e3x4l9o] { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.signage__tagline[b-xv9e3x4l9o] {
    margin-top: 6px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    color: var(--brand-light-alloy);
}
.signage__aware[b-xv9e3x4l9o] {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    --orb-size: 96px;
}
.signage__quip[b-xv9e3x4l9o] { display: flex; flex-direction: column; }
.signage__quip-who[b-xv9e3x4l9o] {
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--brand-aqua-pulse);
}
.signage__quip-line[b-xv9e3x4l9o] { font-size: 16px; font-weight: 600; }

/* Content tier */
.signage__content[b-xv9e3x4l9o] {
    flex: 1;
    position: relative;   /* containing block for the game takeover, so it fills only this tier (not the banner) */
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 28px;
    padding: 40px 36px;
}
.signage__chip[b-xv9e3x4l9o] {
    font-size: 18px; letter-spacing: 3px; font-weight: 700;
    color: var(--brand-almost-white);
    background: var(--brand-nebula-violet);
    border-radius: 24px; padding: 8px 22px;
}
.signage__hook[b-xv9e3x4l9o] { font-size: 64px; font-weight: 700; line-height: 1.05; }
.signage__ctx[b-xv9e3x4l9o] { font-size: 24px; color: var(--brand-light-alloy); line-height: 1.4; max-width: 420px; }
.signage__action[b-xv9e3x4l9o] { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.signage__cta[b-xv9e3x4l9o] {
    font-size: 22px; letter-spacing: 4px; font-weight: 700;
    color: var(--brand-aqua-pulse); font-family: ui-monospace, monospace;
}
.signage__action[b-xv9e3x4l9o]  .signage-qr {
    box-sizing: border-box;
    width: 140px; height: 140px;
    padding: 8px;
    background: #fff;
    border-radius: 18px;
    filter: drop-shadow(0 0 22px rgba(34, 211, 238, 0.4));
}
.signage__action[b-xv9e3x4l9o]  .signage-qr svg { width: 100%; height: 100%; display: block; }

/* Active mode: emphasise the hook + a "noticed you" cue. */
.signage__hook--active[b-xv9e3x4l9o] {
    transform: scale(1.03);
    transition: transform 300ms ease;
    text-shadow: 0 0 24px color-mix(in srgb, var(--brand-aqua-pulse) 60%, transparent);
}
.signage--active .signage__action[b-xv9e3x4l9o]  .signage-qr {
    filter: drop-shadow(0 0 34px rgba(34, 211, 238, 0.7));
    transition: filter 300ms ease;
}
.signage__cue[b-xv9e3x4l9o] {
    align-self: center;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--brand-aqua-pulse);
    animation: signage-cue-pulse-b-xv9e3x4l9o 1.2s ease-out;
}
@keyframes signage-cue-pulse-b-xv9e3x4l9o {
    0% { opacity: 0; transform: translateY(6px); }
    30% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
    .signage__hook--active[b-xv9e3x4l9o] { transition: none; transform: none; }
    .signage__cue[b-xv9e3x4l9o] { animation: none; }
    .signage--active .signage__action[b-xv9e3x4l9o]  .signage-qr { transition: none; }
}

/* Game takeover panel — a dark backdrop over the rotation tier. The plasma-pink frame lives on the
   actual game board (.m3 / .tetris__well) so it hugs the playfield, not this whole tall panel. */
.signage__game[b-xv9e3x4l9o] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    z-index: 51;
    background: #0B0018;
    overflow: hidden;
}

/* Companion QR — in the awareness row (where ASK ME used to sit), pushed to the right */
.signage__companioncta[b-xv9e3x4l9o] {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.signage__companioncta[b-xv9e3x4l9o]  .signage-qr {
    box-sizing: border-box;
    width: 100px; height: 100px;
    padding: 6px;
    background: #fff;
    border-radius: 12px;
    filter: drop-shadow(0 0 8px rgba(60, 230, 220, 0.35));
}
.signage__companioncta[b-xv9e3x4l9o]  .signage-qr svg { width: 100%; height: 100%; display: block; }
.signage__companioncta-label[b-xv9e3x4l9o] {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #3ce6dc;
}
.signage__companioncta-busy[b-xv9e3x4l9o] {
    box-sizing: border-box;
    width: 100px;
    padding: 10px 6px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #3ce6dc;
    border: 1px solid rgba(60, 230, 220, 0.35);
    border-radius: 12px;
    background: rgba(60, 230, 220, 0.08);
}

/* TAI chat takeover tile */
.signage__chat[b-xv9e3x4l9o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 100%;                 /* fill the content tier so the log can flex + clip cleanly */
    justify-content: flex-start;
    padding: 0 8px;
    box-sizing: border-box;
}
.signage__chat-head[b-xv9e3x4l9o] {
    display: flex;
    align-items: center;
    gap: 18px;
    --orb-size: 72px;
}
.signage__chat-status[b-xv9e3x4l9o] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-aqua-pulse);
}
.signage__chat-log[b-xv9e3x4l9o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 460px;
    flex: 1 1 auto;               /* take the leftover height */
    min-height: 0;
    overflow: hidden;            /* older messages scroll off the top */
    justify-content: flex-end;   /* newest message anchored at the bottom, always visible */
}
.signage__chat-bubble[b-xv9e3x4l9o] {
    padding: 12px 18px;
    border-radius: 18px;
    font-size: 19px;
    line-height: 1.35;
    max-width: 92%;
    word-break: break-word;
}
.signage__chat-bubble--visitor[b-xv9e3x4l9o] {
    align-self: flex-end;
    background: color-mix(in srgb, var(--brand-nebula-violet) 60%, transparent);
    border-bottom-right-radius: 6px;
    color: var(--brand-almost-white);
}
.signage__chat-bubble--tai[b-xv9e3x4l9o] {
    align-self: flex-start;
    background: color-mix(in srgb, var(--brand-aqua-pulse) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-aqua-pulse) 40%, transparent);
    border-bottom-left-radius: 6px;
    color: var(--brand-almost-white);
}
/* /Components/Pages/SignageCompanion.razor.rz.scp.css */
.hub[b-zyarprdyhj] { height: 100dvh; overflow: hidden; background: #0B0018; color: #cfe9ff; font-family: 'Space Grotesk', system-ui, sans-serif; display: flex; flex-direction: column; }
.hub__brand[b-zyarprdyhj] { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem .4rem; }
/* Live connection pip — driven by ReconnectModal.razor.js via the Blazor circuit state. Colours match the
   display's #signage-conn-dot exactly for coherence: calm green connected, amber reconnecting, red dropped.
   Literal colours so it renders even if theme variables fail to load in the disconnected state. */
.hub__orb[b-zyarprdyhj] { width: 11px; height: 11px; border-radius: 50%; background: #34D399; box-shadow: 0 0 6px rgba(52,211,153,.55); transition: background 200ms ease, box-shadow 200ms ease; }
.hub__orb[data-state="reconnecting"][b-zyarprdyhj] { background: #FBBF24; box-shadow: 0 0 8px rgba(251,191,36,.7); animation: signage-conn-pulse 1s ease-in-out infinite; }
.hub__orb[data-state="disconnected"][b-zyarprdyhj] { background: #EF4444; box-shadow: 0 0 9px rgba(239,68,68,.8); animation: signage-conn-pulse .8s ease-in-out infinite; }
.hub__wm[b-zyarprdyhj] { font-weight: 700; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .hub__orb[b-zyarprdyhj] { animation: none !important; } }
.hub__pills[b-zyarprdyhj] { display: flex; gap: .4rem; padding: 0 .8rem .6rem; }
.hub__pill[b-zyarprdyhj] { flex: 1; padding: .55rem 0; border-radius: 999px; background: #150c33; border: 1px solid #241c4d; color: #9fb6d8; font-size: .85rem; }
.hub__pill.on[b-zyarprdyhj] { background: linear-gradient(160deg,#5ffbef,#1aa6a0); color: #04121a; font-weight: 700; border-color: transparent; }
.hub__body[b-zyarprdyhj] { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Busy (409) / expired (410, missing nonce) claim outcomes — replaces the pills + tab body entirely,
   so there's nothing to interact with until the visitor rescans a live QR. */
.hub__msg[b-zyarprdyhj] { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
            padding: 0 1.4rem; font-size: 1.1rem; color: #9fb6d8; }

/* The tab components (chat / control / game controllers) hardcode height:100dvh so they fill the screen
   on their standalone /signage/* pages. Nested in the hub they sit BELOW the brand + pills, so 100dvh
   overflows the viewport and the page scrolls. Scope an override to the hub so each fills the body
   instead; the standalone pages keep their 100dvh. */
.hub__body[b-zyarprdyhj]  .ask,
.hub__body[b-zyarprdyhj]  .ctrl,
.hub__body[b-zyarprdyhj]  .cpv,
.hub__body[b-zyarprdyhj]  .cc,
.hub__body[b-zyarprdyhj]  .m3c,
.hub__body[b-zyarprdyhj]  .gt,
.hub__body[b-zyarprdyhj]  .play { flex: 1 1 0; min-height: 0; height: auto; }
.hub__body[b-zyarprdyhj]  .ctrl { display: flex; flex-direction: column; }   /* so .cpv can fill it */
/* /Components/Pages/SignageVote.razor.rz.scp.css */
.vote[b-o6a1xnub99] { min-height: 100vh; display:flex; flex-direction:column; justify-content:center; gap:20px; padding:28px; background: var(--gradient-cosmic-cosmos); color: var(--brand-almost-white); font-family: var(--brand-font); }
.vote__q[b-o6a1xnub99] { font-size: 26px; font-weight: 700; line-height: 1.15; }
.vote__opts[b-o6a1xnub99] { display:flex; flex-direction:column; gap:12px; }
.vote__opt[b-o6a1xnub99] { padding:16px; border-radius:12px; border:1px solid color-mix(in srgb, var(--brand-nebula-violet) 50%, transparent); background: color-mix(in srgb, var(--brand-night-violet) 60%, transparent); color: var(--brand-almost-white); font-size:18px; font-family: var(--brand-font); }
.vote__thanks[b-o6a1xnub99] { color: var(--brand-neo-turquoise); font-weight:600; }
.vote__bars[b-o6a1xnub99] { display:flex; flex-direction:column; gap:10px; }
.vote__bar[b-o6a1xnub99] { display:grid; grid-template-columns: 1fr 2fr auto; gap:10px; align-items:center; font-size:14px; }
.vote__track[b-o6a1xnub99] { background: rgba(255,255,255,.08); border-radius:6px; overflow:hidden; height:12px; }
.vote__fill[b-o6a1xnub99] { height:100%; background: linear-gradient(90deg, var(--brand-nebula-violet), var(--brand-aqua-pulse)); }
/* /Components/Shared/ServiceCard.razor.rz.scp.css */
/* Scoped styles handled by global .hover-lift class */
/* /Components/Showcases/SignageDisplayShowcase.razor.rz.scp.css */
/* Full-height card deck in normal document flow (the page itself scrolls, no nested scroller). Cards
   subtract the fixed MudAppBar height (64px) so the first card fits the viewport under the bar. */
.sds[b-mczs2xlwpo] { background: #070011; color: #e8f0ff; font-family: 'Space Grotesk', system-ui, sans-serif; }
.sds-card[b-mczs2xlwpo] { min-height: calc(100dvh - 64px); display: grid; grid-template-columns: 1fr 1fr;
    gap: 3rem; align-items: center; max-width: 1100px; margin: 0 auto; padding: 1.75rem 2rem; }
/* Alternating section bg like the home page's .section-alt: every other card gets a lifted surface
   (hero card 1 stays on the base #070011). Full-bleed via the viewport-wide box-shadow trick so the
   tint spans the whole row, not just the max-width:1100px content column. */
.sds-card:nth-child(even)[b-mczs2xlwpo] { background-color: #0f0626;
    box-shadow: 0 0 0 100vmax #0f0626; clip-path: inset(0 -100vmax); }
.sds-eyebrow[b-mczs2xlwpo] { text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; color: #3ce6dc; margin: 0 0 .6rem; }
.sds-h[b-mczs2xlwpo] { font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.1; margin: 0 0 1rem; }
.sds-body[b-mczs2xlwpo] { font-size: 1.05rem; line-height: 1.6; color: #b9c7e6; max-width: 46ch; }
.sds-cta[b-mczs2xlwpo] { display: inline-block; margin-top: 1.5rem; padding: .7rem 1.4rem; border-radius: 999px;
    background: linear-gradient(160deg,#5ffbef,#1aa6a0); color: #04121a; font-weight: 700; text-decoration: none; }
.sds-art[b-mczs2xlwpo] { display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.sds-art--pair[b-mczs2xlwpo] { flex-wrap: wrap; }
.sds-wake[b-mczs2xlwpo] { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }   /* sensor stacked above the display, matching the Ambient card */
.sds-art--annotated[b-mczs2xlwpo] { padding-right: 8rem; }   /* room for the right-side annotation labels */
.sds-print[b-mczs2xlwpo] { position: fixed; top: 14px; right: 14px; z-index: 20; padding: .5rem 1rem; border-radius: 999px;
    border: 1px solid #3ce6dc; background: rgba(10,3,32,.8); color: #3ce6dc; cursor: pointer; }

/* ---- reveal-on-scroll (JS adds .sds-anim to the deck + .in-view per card; no JS = final state) ---- */
.sds-anim .sds-copy > *[b-mczs2xlwpo],
.sds-anim .sds-art[b-mczs2xlwpo] { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.sds-anim .sds-copy > *:nth-child(2)[b-mczs2xlwpo] { transition-delay: .07s; }
.sds-anim .sds-copy > *:nth-child(3)[b-mczs2xlwpo] { transition-delay: .14s; }
.sds-anim .sds-copy > *:nth-child(4)[b-mczs2xlwpo] { transition-delay: .21s; }
.sds-anim .sds-card.in-view .sds-copy > *[b-mczs2xlwpo],
.sds-anim .sds-card.in-view .sds-art[b-mczs2xlwpo] { opacity: 1; transform: none; }
.sds-anim .reveal[b-mczs2xlwpo] { opacity: 0; transform: translateY(12px);
    transition: opacity .5s ease var(--d, 0s), transform .5s ease var(--d, 0s); }
.sds-anim .sds-card.in-view .reveal[b-mczs2xlwpo] { opacity: 1; transform: none; }

/* ---- a mock rotating-content tile shown on the display (cards 1 & 2). cqw = scales with the screen ---- */
.sds-tile[b-mczs2xlwpo] { display: flex; flex-direction: column; align-items: center; gap: 2.5cqw; text-align: center; padding: 2cqw; width: 100%; }
.sds-tile__kind[b-mczs2xlwpo] { font-size: 3cqw; letter-spacing: .6cqw; text-transform: uppercase; color: #3ce6dc; }
.sds-tile__title[b-mczs2xlwpo] { font-size: 5.4cqw; font-weight: 700; line-height: 1.12; color: #eafeff; }
.sds-tile__qr[b-mczs2xlwpo] { width: 24cqw; height: 24cqw; border-radius: 2cqw; margin-top: 1cqw; box-sizing: border-box; border: 1.4cqw solid #fff;
    background: repeating-conic-gradient(#0a0320 0 25%, #fff 0 50%) 50% / 5cqw 5cqw, #fff; box-shadow: 0 0 3cqw rgba(60,230,220,.35); }
.sds-tile__cta[b-mczs2xlwpo] { font-size: 2.8cqw; letter-spacing: .3cqw; text-transform: uppercase; color: #3ce6dc; }

/* ---- a mock "control" view in the phone body (card 1) ---- */
.sds-ctrl[b-mczs2xlwpo] { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.sds-ctrl__btn[b-mczs2xlwpo] { text-align: center; padding: 6px; border-radius: 8px; font-size: .55rem; background: #150c33; border: 1px solid #241c4d; color: #cfe9ff; }
.sds-ctrl__btn.on[b-mczs2xlwpo] { background: linear-gradient(160deg,#5ffbef,#1aa6a0); color: #04121a; font-weight: 700; border-color: transparent; }

/* ---- card 3: phone scans the code, an arrow carries it to the wall, the game appears ---- */
.sds-scan[b-mczs2xlwpo] { align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.sds-reveal-board[b-mczs2xlwpo] { width: 100%; display: flex; justify-content: center; }   /* let the board fill the display */
.sds-scan__phone[b-mczs2xlwpo], .sds-scan__display[b-mczs2xlwpo] { flex: 0 0 auto; }
.sds-scanui[b-mczs2xlwpo] { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.sds-scanui__view[b-mczs2xlwpo] { position: relative; padding: 7px; border: 2px solid #3ce6dc; border-radius: 10px;
    box-shadow: 0 0 10px rgba(60,230,220,.5); overflow: hidden; }
.sds-anim .sds-card--scan.in-view .sds-scanui__view[b-mczs2xlwpo] { animation: sds-scanframe-b-mczs2xlwpo 1.6s ease-in-out infinite; }
@keyframes sds-scanframe-b-mczs2xlwpo { 0%,100% { box-shadow: 0 0 6px rgba(60,230,220,.4); } 50% { box-shadow: 0 0 16px rgba(60,230,220,.95); } }
.sds-scanui__code[b-mczs2xlwpo] { display: block; width: 52px; height: 52px; border-radius: 5px; background:
    repeating-conic-gradient(#0a0320 0 25%, #cfe9ff 0 50%) 50% / 13px 13px; border: 1px solid #cfe9ff; }
.sds-scanui__line[b-mczs2xlwpo] { position: absolute; left: 7px; right: 7px; top: 8px; height: 2px; background: #eafeff; box-shadow: 0 0 8px 2px #3ce6dc; }
.sds-anim .sds-card--scan.in-view .sds-scanui__line[b-mczs2xlwpo] { animation: sds-scanline-b-mczs2xlwpo 1.8s ease-in-out infinite; }
@keyframes sds-scanline-b-mczs2xlwpo { 0%,100% { top: 8px; } 50% { top: calc(100% - 10px); } }
.sds-scanui__hint[b-mczs2xlwpo] { font-size: .5rem; letter-spacing: .3px; color: #9fb6d8; text-align: center; }
/* connector: a labelled arrow from phone to display */
.sds-scan__link[b-mczs2xlwpo] { display: flex; flex-direction: column; align-items: center; gap: 5px; align-self: center; flex: 0 0 clamp(56px, 9vw, 100px); }
.sds-scan__linklabel[b-mczs2xlwpo] { font-size: .55rem; letter-spacing: .3px; color: #3ce6dc; white-space: nowrap; }
.sds-scan__beam[b-mczs2xlwpo] { position: relative; width: 100%; height: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, #3ce6dc 50%, transparent), color-mix(in srgb, #3ce6dc 50%, transparent)); opacity: .45; }
.sds-scan__beam[b-mczs2xlwpo]::after { content: "\25B6"; position: absolute; top: 50%; right: -3px; transform: translateY(-50%); color: #3ce6dc; font-size: .55rem; }
.sds-scan__beam[b-mczs2xlwpo]::before { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%;
    background: #eafeff; box-shadow: 0 0 10px 3px #3ce6dc; opacity: 0; }
.sds-anim .sds-card--scan.in-view .sds-scan__beam[b-mczs2xlwpo]::before { animation: sds-beam-b-mczs2xlwpo 1.2s ease-in-out .3s infinite; }
@keyframes sds-beam-b-mczs2xlwpo { 0% { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
/* the game revealing on the display after the beam lands */
.sds-anim .sds-card--scan .sds-reveal-board[b-mczs2xlwpo] { opacity: 0; transform: scale(.9); transition: opacity .6s ease 1.1s, transform .6s ease 1.1s; }
.sds-anim .sds-card--scan.in-view .sds-reveal-board[b-mczs2xlwpo] { opacity: 1; transform: none; }

/* ---- card 3b: scan to read — the scanned insight opens as an article page on the phone ---- */
.sds-read[b-mczs2xlwpo] { display: flex; flex-direction: column; gap: 5px; padding: 2px 2px 4px; }
.sds-read__kind[b-mczs2xlwpo] { font-size: .5rem; letter-spacing: .5px; text-transform: uppercase; color: #3ce6dc; }
.sds-read__title[b-mczs2xlwpo] { font-size: .72rem; font-weight: 700; line-height: 1.15; color: #eafeff; }
.sds-read__meta[b-mczs2xlwpo] { font-size: .45rem; color: #8fa3c8; margin-bottom: 2px; }
.sds-read__line[b-mczs2xlwpo] { height: 3px; border-radius: 2px; background: #241c4d; }
.sds-read__line--short[b-mczs2xlwpo] { width: 62%; }

/* ---- card 4: availability, statuses reveal in sequence, pointer at the badge ---- */
.sds-avail[b-mczs2xlwpo] { align-items: center; gap: 1.8rem; }
.sds-avail__hero[b-mczs2xlwpo] { position: relative; }
.sds-avail__ptr[b-mczs2xlwpo] { position: absolute; top: 5%; left: calc(100% + 8px); display: flex; align-items: center;
    white-space: nowrap; font-size: .6rem; color: #3ce6dc; }
.sds-avail__ptrline[b-mczs2xlwpo] { display: inline-block; width: 18px; height: 1px; background: #3ce6dc; margin-right: 5px; }
.sds-status[b-mczs2xlwpo] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.sds-status__row[b-mczs2xlwpo] { display: flex; align-items: center; gap: .6rem; font-size: 1rem; }
.sds-status__row b[b-mczs2xlwpo] { color: #eafeff; } .sds-status__row span[b-mczs2xlwpo] { color: #8fa3c8; font-size: .85rem; }
.sds-loc[b-mczs2xlwpo] { color: #3ce6dc; }   /* work-location modifier on the status rows (Away has none) */
.sds-dot[b-mczs2xlwpo] { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.sds-dot--available[b-mczs2xlwpo] { background: #6BB700; box-shadow: 0 0 7px rgba(107,183,0,.8); }
.sds-dot--busy[b-mczs2xlwpo] { background: #C4314B; box-shadow: 0 0 7px rgba(196,49,75,.8); }
.sds-dot--away[b-mczs2xlwpo] { background: #FFAA44; box-shadow: 0 0 7px rgba(255,170,68,.75); }

/* ---- card 5: TAI chat ---- */
.sds-tai[b-mczs2xlwpo] { align-items: center; gap: 1.6rem; }
.sds-chatui[b-mczs2xlwpo] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sds-chatui__log[b-mczs2xlwpo] { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.sds-msg[b-mczs2xlwpo] { font-size: .52rem; padding: 4px 8px; border-radius: 10px; max-width: 90%; }
.sds-msg--me[b-mczs2xlwpo] { align-self: flex-end; background: color-mix(in srgb, #6f29c9 60%, transparent); color: #fff; border-bottom-right-radius: 3px; }
.sds-chatui__field[b-mczs2xlwpo] { margin-top: 6px; font-size: .5rem; color: #8fa3c8; background: #150c33; border: 1px solid #241c4d;
    border-radius: 999px; padding: 5px 10px; }
.sds-wall[b-mczs2xlwpo] { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sds-wall__head[b-mczs2xlwpo] { font-size: .5rem; font-weight: 700; letter-spacing: 2px; color: #3ce6dc; }
.sds-wall__log[b-mczs2xlwpo] { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.sds-wb[b-mczs2xlwpo] { font-size: .5rem; line-height: 1.3; padding: 5px 8px; border-radius: 10px; max-width: 92%; }
.sds-wb--visitor[b-mczs2xlwpo] { align-self: flex-end; background: color-mix(in srgb, #6f29c9 60%, transparent); color: #fff; border-bottom-right-radius: 3px; }
.sds-wb--tai[b-mczs2xlwpo] { align-self: flex-start; background: color-mix(in srgb, #3ce6dc 18%, transparent);
    border: 1px solid color-mix(in srgb, #3ce6dc 40%, transparent); color: #eafeff; border-bottom-left-radius: 3px; }

/* ---- card 6: games. Drop the board/content framing so the boards fill more of each display ---- */
.sds-games[b-mczs2xlwpo] { gap: 1rem; flex-wrap: wrap; }
.sds-games__one[b-mczs2xlwpo] { display: flex; }
.sds-games[b-mczs2xlwpo]  .md__content { border: none; padding: 0; margin-top: 0; }
.sds-games[b-mczs2xlwpo]  .cb, .sds-games[b-mczs2xlwpo]  .m3, .sds-games[b-mczs2xlwpo]  .mb__well { border: none; box-shadow: none; }

/* ---- card 7: ambient, sensor + breathing wake + rotating greeting ---- */
.sds-ambient[b-mczs2xlwpo] { flex-direction: column; gap: 1.2rem; }
.sds-sensor[b-mczs2xlwpo] { position: relative; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.sds-sensor__icon[b-mczs2xlwpo] { width: 12px; height: 12px; border-radius: 50%; background: #3ce6dc; box-shadow: 0 0 10px 2px #3ce6dc; }
.sds-sensor__wave[b-mczs2xlwpo] { position: absolute; inset: 0; border: 2px solid #3ce6dc; border-radius: 50%; opacity: 0; animation: sds-sonar-b-mczs2xlwpo 2.4s ease-out infinite; }
.sds-sensor__wave:nth-child(2)[b-mczs2xlwpo] { animation-delay: 1.2s; }
@keyframes sds-sonar-b-mczs2xlwpo { 0% { transform: scale(.25); opacity: .8; } 100% { transform: scale(1); opacity: 0; } }
.sds-ambient__screen[b-mczs2xlwpo] { position: relative; }
/* the display breathes (dims up and down) while the card is in view; static-dim otherwise; bright with no JS */
.sds-anim .sds-card--ambient[b-mczs2xlwpo]  .md__screen,
.sds-anim .sds-wake[b-mczs2xlwpo]  .md__screen { filter: brightness(.34) saturate(.75); transition: filter .8s ease; }
.sds-anim .sds-card--ambient.in-view[b-mczs2xlwpo]  .md__screen,
.sds-anim .sds-card.in-view .sds-wake[b-mczs2xlwpo]  .md__screen { animation: sds-breathe-b-mczs2xlwpo 4.5s ease-in-out infinite; }
@keyframes sds-breathe-b-mczs2xlwpo { 0%,100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(.3) saturate(.7); } }
/* rotating greeting overlay (card-owned, cross-fades three messages) */
.sds-greet[b-mczs2xlwpo] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
    background: radial-gradient(60% 32% at 50% 42%, rgba(60,230,220,.16), transparent 70%); }
.sds-greet span[b-mczs2xlwpo] { position: absolute; font-size: 1rem; font-weight: 700; color: #eafeff; letter-spacing: .5px;
    text-shadow: 0 0 10px rgba(60,230,220,.8); opacity: 0; }
.sds-greet span:first-child[b-mczs2xlwpo] { opacity: 1; }              /* no-JS fallback: show one greeting (no overlap) */
.sds-anim .sds-greet span[b-mczs2xlwpo] { opacity: 0; }                /* JS gates; the animation reveals them in turn */
.sds-anim .sds-card.in-view .sds-greet span[b-mczs2xlwpo] { animation: sds-greet-b-mczs2xlwpo 9s ease-in-out infinite; }
.sds-anim .sds-card.in-view .sds-greet span:nth-child(2)[b-mczs2xlwpo] { animation-delay: 3s; }
.sds-anim .sds-card.in-view .sds-greet span:nth-child(3)[b-mczs2xlwpo] { animation-delay: 6s; }
@keyframes sds-greet-b-mczs2xlwpo { 0% { opacity: 0; } 6% { opacity: 1; } 28% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } }

/* ---- per-card mini sizing (::deep crosses into the child components) ---- */
.sds-scan[b-mczs2xlwpo]  .md__screen, .sds-tai[b-mczs2xlwpo]  .md__screen { height: min(46vh, 360px); }
.sds-avail__hero[b-mczs2xlwpo]  .md__screen { height: min(44vh, 340px); }
.sds-games[b-mczs2xlwpo]  .md__screen { height: min(52vh, 400px); }
.sds-scan[b-mczs2xlwpo]  .mp, .sds-tai[b-mczs2xlwpo]  .mp { max-width: 148px; }

@media (max-width: 820px) {
    .sds-card[b-mczs2xlwpo] { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; text-align: center; }
    .sds-body[b-mczs2xlwpo] { margin: 0 auto; }
    .sds-status[b-mczs2xlwpo] { align-items: center; }
    .sds-avail__ptr[b-mczs2xlwpo] { display: none; }   /* no room to project on a narrow single column */
    .sds-art--annotated[b-mczs2xlwpo] { padding-right: 0; justify-content: flex-start; }
    .sds-art--annotated[b-mczs2xlwpo]  .md { max-width: 150px; margin: 0; }   /* ::deep to cross into MiniDisplay */
    .sds-games[b-mczs2xlwpo] { gap: .6rem; }
    .sds-games[b-mczs2xlwpo]  .md__screen { height: min(34vh, 260px); }
}

/* Print-to-PDF: one card per page, drop scroll behaviour, keep the dark theme colours. */
@media print {
    .sds-print[b-mczs2xlwpo] { display: none; }
    .sds-anim .sds-copy > *[b-mczs2xlwpo], .sds-anim .sds-art[b-mczs2xlwpo], .sds-anim .reveal[b-mczs2xlwpo] { opacity: 1; transform: none; }   /* show everything */
    .sds-anim .sds-card--scan .sds-reveal-board[b-mczs2xlwpo] { opacity: 1; transform: none; }
    .sds-anim .sds-card--ambient[b-mczs2xlwpo]  .md__screen,
    .sds-anim .sds-wake[b-mczs2xlwpo]  .md__screen { filter: none; animation: none; }
    .sds-anim .sds-greet span[b-mczs2xlwpo] { opacity: 0; animation: none; }
    .sds-anim .sds-greet span:first-child[b-mczs2xlwpo] { opacity: 1; }
    .sds-card[b-mczs2xlwpo] { min-height: auto; break-inside: avoid; break-after: page; page-break-after: always; }
    .sds-card:last-child[b-mczs2xlwpo] { break-after: auto; page-break-after: auto; }
    html[b-mczs2xlwpo], body[b-mczs2xlwpo] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
    .sds-anim .sds-copy > *[b-mczs2xlwpo], .sds-anim .sds-art[b-mczs2xlwpo], .sds-anim .reveal[b-mczs2xlwpo] { opacity: 1; transform: none; transition: none; }
    .sds-anim .sds-card--scan .sds-reveal-board[b-mczs2xlwpo] { opacity: 1; transform: none; transition: none; }
    .sds-anim .sds-card--ambient[b-mczs2xlwpo]  .md__screen,
    .sds-anim .sds-wake[b-mczs2xlwpo]  .md__screen { filter: none; transition: none; animation: none; }
    .sds-anim .sds-greet span[b-mczs2xlwpo] { opacity: 0; animation: none; }
    .sds-anim .sds-greet span:first-child[b-mczs2xlwpo] { opacity: 1; }
    .sds-scan__beam[b-mczs2xlwpo]::before, .sds-sensor__wave[b-mczs2xlwpo], .sds-scanui__view[b-mczs2xlwpo], .sds-scanui__line[b-mczs2xlwpo] { animation: none; }
}
/* /Components/Showcases/Signage/MiniBoard.razor.rz.scp.css */
/* Chess and Match-3 render the real board components (their own scoped CSS sizes them to the container).
   Tetris uses a compact well mirroring the real renderer's cell colours. */
.mb[b-16uj8l80xx] { width: 100%; display: flex; justify-content: center; }
.mb--chess[b-16uj8l80xx], .mb--match3[b-16uj8l80xx] { width: 100%; }
/* The real board components size to their container; give them the full width (::deep crosses in). */
.mb--chess[b-16uj8l80xx]  .cb, .mb--match3[b-16uj8l80xx]  .m3 { width: 100%; height: auto; }

.mb__well[b-16uj8l80xx] { display: grid; grid-auto-rows: 1fr; gap: 2px; background: #070011; padding: 5px; border-radius: .5rem;
    border: 2px solid var(--brand-plasma-pink, #D942DB);
    box-shadow: 0 0 14px color-mix(in srgb, var(--brand-plasma-pink, #D942DB) 40%, transparent);
    aspect-ratio: 10 / 20; width: 100%; }
.mb__cell.empty[b-16uj8l80xx] { background: #0a0320; border: 1px solid #160c34; }
.mb__cell.I[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #8ffff2, #149990 72%); }
.mb__cell.O[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #ffeaa0, #d9971a 72%); }
.mb__cell.T[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #ddb6ff, #6f29c9 72%); }
.mb__cell.S[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #a4ffce, #149955 72%); }
.mb__cell.Z[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #ffaec5, #c92f57 72%); }
.mb__cell.J[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #b0c6ff, #2f52c9 72%); }
.mb__cell.L[b-16uj8l80xx] { background: radial-gradient(125% 125% at 30% 22%, #ffc79a, #d9701a 72%); }
/* /Components/Showcases/Signage/MiniDisplay.razor.rz.scp.css */
/* Faithful tall kiosk proportions (540:1920), sized by height so it fits a card. The screen is a
   container: everything inside is sized in cqw/cqh (relative to the screen), so the tall narrow layout
   scales proportionally and never crushes, whatever height the card gives it. */
.md[b-db1n7vke69] { display: flex; justify-content: center; }
/* container-type makes the screen the query container for its DESCENDANTS' cqw units. The screen's OWN box
   properties must stay in px (an element is not its own container, so cqw here would resolve against the
   viewport). */
.md__screen[b-db1n7vke69] { container-type: inline-size; aspect-ratio: 540 / 1920; height: min(56vh, 440px); position: relative;
    border-radius: 10px; overflow: hidden; border: 2px solid #D942DB;
    background: radial-gradient(135% 130% at 50% 0%, #160a32 0%, #070011 72%);
    box-shadow: inset 0 0 14px rgba(0,0,0,.55), 0 0 12px rgba(217,66,219,.35);
    display: flex; flex-direction: column; gap: 4px; padding: 5px; transition: filter .6s ease; }
.md--annotated .md__screen[b-db1n7vke69] { overflow: visible; }

/* Banner: wordmark left, availability + status text right (mirrors .signage__brandrow). */
.md__banner[b-db1n7vke69] { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; position: relative;
    padding-bottom: 2.5cqw; border-bottom: .8cqw solid color-mix(in srgb, #6f29c9 40%, transparent); }
.md__wm[b-db1n7vke69] { font-weight: 700; font-size: 7cqw; color: #cfe9ff; letter-spacing: .2cqw; } .md__ai[b-db1n7vke69] { color: #22D3EE; }
.md__avail[b-db1n7vke69] { display: flex; align-items: center; gap: 2cqw; }
.md__badge[b-db1n7vke69] { width: 5cqw; height: 5cqw; border-radius: 50%; flex-shrink: 0; }
.md__availtext[b-db1n7vke69] { font-size: 4cqw; color: #cfe9ff; white-space: nowrap; }
.md__loc[b-db1n7vke69] { color: #3ce6dc; }   /* work-location suffix, e.g. " · Remote" */
.md__badge--available[b-db1n7vke69] { background: #6BB700; box-shadow: 0 0 3cqw rgba(107,183,0,.8); }
.md__badge--busy[b-db1n7vke69] { background: #C4314B; box-shadow: 0 0 3cqw rgba(196,49,75,.8); }
.md__badge--away[b-db1n7vke69] { background: #FFAA44; box-shadow: 0 0 3cqw rgba(255,170,68,.75); }

.md__tagline[b-db1n7vke69] { text-align: center; font-size: 4cqw; letter-spacing: .3cqw; color: #9fb6d8; position: relative; }
.md__accent[b-db1n7vke69] { color: #D942DB; }

/* Aware row: orb + TAI quip on the left, the scan-QR pushed to the right (mirrors .signage__aware). */
.md__aware[b-db1n7vke69] { display: flex; align-items: center; gap: 3cqw; position: relative; margin-top: 1cqw; }
.md__orb[b-db1n7vke69] { width: 12cqw; height: 12cqw; border-radius: 50%; border: 1.4cqw solid #22D3EE; box-shadow: 0 0 4cqw #22D3EE; flex-shrink: 0; }
.md__quip[b-db1n7vke69] { display: flex; flex-direction: column; min-width: 0; }
.md__quip-who[b-db1n7vke69] { font-size: 3cqw; letter-spacing: .6cqw; text-transform: uppercase; color: #22D3EE; }
.md__quip-line[b-db1n7vke69] { font-size: 4cqw; font-weight: 600; color: #cfe9ff; white-space: nowrap; }
.md__cta[b-db1n7vke69] { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 1cqw; flex-shrink: 0; }
.md__qrglyph[b-db1n7vke69] { width: 17cqw; height: 17cqw; border-radius: 2.5cqw; padding: 1.5cqw; background:
    repeating-conic-gradient(#0a0320 0 25%, #fff 0 50%) 50% / 5cqw 5cqw, #fff; border: 1.2cqw solid #fff;
    box-shadow: 0 0 3cqw rgba(60,230,220,.35); box-sizing: border-box; }
.md__qrlabel[b-db1n7vke69] { font-size: 2.6cqw; letter-spacing: .2cqw; text-transform: uppercase; color: #3ce6dc; }

/* Content tier: the star of a portrait display. Fills the remaining height. */
.md__content[b-db1n7vke69] { flex: 1; min-height: 0; border-radius: 3cqw; border: .8cqw dashed #2a1e52; margin-top: 1cqw;
    display: flex; align-items: center; justify-content: center; position: relative; padding: 2cqw; overflow: hidden; }
/* In the anatomy view, make the content region's extent obvious: brighter outline + faint tint. */
.md--annotated .md__content[b-db1n7vke69] { border: 2px dashed #3ce6dc; box-shadow: inset 0 0 12px rgba(60,230,220,.2); background: rgba(60,230,220,.06);
    overflow: visible; }   /* let the "Rotating content" callout escape to the right instead of being clipped */
.md__content > *[b-db1n7vke69] { max-width: 100%; }
.md__chip[b-db1n7vke69] { font-size: 4cqw; letter-spacing: .4cqw; color: #04121a; background: #3ce6dc; padding: 1.5cqw 4cqw; border-radius: 3cqw; }

/* Dim (asleep) state. */
.md--dim .md__screen[b-db1n7vke69] { filter: brightness(.32) saturate(.7); }

/* Annotation callouts: pointer labels to the right of each zone. Fixed size for legibility (they sit
   outside the tiny screen), shown only in md--annotated. */
.md__note[b-db1n7vke69] { position: absolute; right: -32px; top: 50%; transform: translateX(100%) translateY(-50%); white-space: nowrap;
    font-size: .62rem; color: #3ce6dc; background: #0a0320; border: 1px solid #2a1e52; border-radius: 4px; padding: 2px 6px; }
.md__note[b-db1n7vke69]::before { content: ""; position: absolute; left: -11px; top: 50%; width: 11px; height: 1px; background: #3ce6dc; }

@media (prefers-reduced-motion: reduce) { .md__screen[b-db1n7vke69] { transition: none; } }
/* /Components/Showcases/Signage/MiniPhone.razor.rz.scp.css */
/* Phone device frame: thick bezel, notch, home indicator. The companion hub lives on the screen. */
.mp[b-pk552birn4] { position: relative; width: 100%; max-width: 180px; margin: 0 auto; aspect-ratio: 9 / 19;
    border-radius: 26px; background: #05000d; border: 3px solid #2b2350;
    box-shadow: 0 10px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
    padding: 10px 7px; display: flex; flex-direction: column; }
.mp__notch[b-pk552birn4] { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 34%; height: 9px;
    background: #05000d; border-radius: 0 0 9px 9px; z-index: 2; }
.mp__notch[b-pk552birn4]::after { content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 2px; background: #241c4d; }
.mp__home[b-pk552birn4] { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 34%; height: 3px;
    border-radius: 2px; background: #3a3170; }
.mp__screen[b-pk552birn4] { flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; background: #0B0018;
    display: flex; flex-direction: column; padding: 12px 8px 8px; }
.mp__brand[b-pk552birn4] { display: flex; align-items: center; gap: 5px; padding: 2px 2px 6px; }
.mp__dot[b-pk552birn4] { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 5px #34D399; flex-shrink: 0; }
.mp__wm[b-pk552birn4] { font-weight: 700; font-size: .78rem; color: #cfe9ff; } .mp__ai[b-pk552birn4] { color: #22D3EE; }
.mp__pills[b-pk552birn4] { display: flex; gap: 4px; padding-bottom: 6px; }
.mp__pill[b-pk552birn4] { flex: 1; text-align: center; padding: 4px 0; border-radius: 999px; font-size: .55rem; background: #150c33; color: #9fb6d8; border: 1px solid #241c4d; }
.mp__pill.on[b-pk552birn4] { background: linear-gradient(160deg,#5ffbef,#1aa6a0); color: #04121a; font-weight: 700; border-color: transparent; }
.mp__body[b-pk552birn4] { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
/* /Components/Signage/AskController.razor.rz.scp.css */
.ask[b-0ufp1gff56] { height: 100dvh; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 24px 20px; background: var(--gradient-cosmic-cosmos); color: var(--brand-almost-white); font-family: var(--brand-font); }

.ask__head[b-0ufp1gff56] { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--brand-neo-turquoise) 30%, transparent); }

.ask__who[b-0ufp1gff56] { font-size: 22px; font-weight: 700; letter-spacing: .05em; color: var(--brand-neo-turquoise); }

.ask__live[b-0ufp1gff56] { font-size: 13px; color: var(--brand-neo-turquoise); opacity: .85; }

.ask__busy[b-0ufp1gff56] { font-size: 13px; color: var(--brand-light-alloy, #b0bec5); opacity: .8; }

.ask__log[b-0ufp1gff56] { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding-bottom: 8px; }

.ask__msg[b-0ufp1gff56] { max-width: 82%; padding: 12px 16px; border-radius: 14px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

.ask__msg--visitor[b-0ufp1gff56] { align-self: flex-end; background: var(--brand-nebula-violet); color: var(--brand-almost-white); border-bottom-right-radius: 4px; }

.ask__msg--tai[b-0ufp1gff56] { align-self: flex-start; background: color-mix(in srgb, var(--brand-deep-cosmos) 80%, transparent); border: 1px solid color-mix(in srgb, var(--brand-plasma-pink) 60%, transparent); border-bottom-left-radius: 4px; }

.ask__cursor[b-0ufp1gff56] { display: inline-block; width: 2px; height: 1em; background: var(--brand-plasma-pink); margin-left: 2px; vertical-align: text-bottom; animation: ask-blink-b-0ufp1gff56 1s step-end infinite; }

@keyframes ask-blink-b-0ufp1gff56 { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.ask__input[b-0ufp1gff56] { display: flex; gap: 8px; }

.ask__input input[b-0ufp1gff56] { flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--brand-nebula-violet) 60%, transparent); background: color-mix(in srgb, var(--brand-night-violet) 70%, transparent); color: var(--brand-almost-white); font-size: 15px; font-family: var(--brand-font); outline: none; }

.ask__input input:focus[b-0ufp1gff56] { border-color: var(--brand-neo-turquoise); }

.ask__input input:disabled[b-0ufp1gff56] { opacity: .5; }

.ask__input button[b-0ufp1gff56] { padding: 12px 20px; border-radius: 10px; border: none; background: var(--brand-neo-turquoise); color: var(--brand-deep-cosmos); font-weight: 700; font-family: var(--brand-font); font-size: 15px; cursor: pointer; }

.ask__input button:disabled[b-0ufp1gff56] { opacity: .4; cursor: not-allowed; }

.ask__close[b-0ufp1gff56] { align-self: center; padding: 8px 20px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--brand-light-alloy, #b0bec5) 40%, transparent); background: transparent; color: var(--brand-light-alloy, #b0bec5); font-size: 13px; font-family: var(--brand-font); cursor: pointer; }

.ask__close:hover[b-0ufp1gff56] { border-color: var(--brand-plasma-pink); color: var(--brand-plasma-pink); }
/* /Components/Signage/ChessBoard.razor.rz.scp.css */
/* Positioning surface only — outer width is owned by each consumer (phone / display) via ::deep.
   Pieces are sculpted standout tokens (no disc): a large silhouette that lifts off the board. */
.cb[b-l7gmsnilwb] {
    position: relative;
    aspect-ratio: 1;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 16px;
    border: 3px solid var(--brand-plasma-pink, #D942DB);
    background: radial-gradient(135% 130% at 50% 0%, #160a32 0%, #070011 72%);
    box-shadow: inset 0 0 26px rgba(0, 0, 0, .55), 0 0 24px color-mix(in srgb, var(--brand-plasma-pink, #D942DB) 45%, transparent);
    overflow: hidden;
}

.cb__pc[b-l7gmsnilwb], .cb__pop[b-l7gmsnilwb], .cb__hole[b-l7gmsnilwb] {
    position: absolute;
    top: 6px; left: 6px;
    width: calc((100% - 12px) / var(--n));
    height: calc((100% - 12px) / var(--n));
    box-sizing: border-box;
    transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
}

/* Removed tile — a recessed cut-out so the board reads as having a hole there. */
.cb__hole[b-l7gmsnilwb] {
    border-radius: 18%;
    background: #05000d;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .8), inset 0 -1px 1px rgba(255, 255, 255, .04);
    z-index: 0;
}

.cb__pc[b-l7gmsnilwb] {
    --s: 1;
    transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)) scale(var(--s));
    transition: transform .24s ease-in;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 2;
}

/* The token IS the piece: a crisp SVG silhouette filling the cell. Army colour comes from the SVG fill;
   the drop-shadow lifts it off the board. No disc behind it. */
.cb__gl[b-l7gmsnilwb] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.cb__gl svg[b-l7gmsnilwb] {
    width: 86%;
    height: 86%;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}

/* selected: bump + glow. reachable target: plasma ring on the cell. */
.cb__pc--sel[b-l7gmsnilwb] { --s: 1.12; z-index: 3; }
.cb__pc--sel .cb__gl[b-l7gmsnilwb] { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.cb__pc--tgt[b-l7gmsnilwb] { box-shadow: inset 0 0 0 3px var(--brand-plasma-pink, #D942DB), inset 0 0 14px 2px color-mix(in srgb, var(--brand-plasma-pink, #D942DB) 55%, transparent); border-radius: 18%; }

/* charged (a match-4+ power piece): a pulsing energy aura in the army colour, so it reads as "loaded". */
.cb__pc--charged[b-l7gmsnilwb] { z-index: 4; }
.cb__pc--charged .cb__gl svg[b-l7gmsnilwb] { filter: drop-shadow(0 0 2px #fff); }
.cb__pc--charged[b-l7gmsnilwb]::after {
    content: ""; position: absolute; inset: 8%; border-radius: 30%; pointer-events: none;
    box-shadow: 0 0 10px 2px var(--charge, var(--brand-plasma-pink, #D942DB)), inset 0 0 8px 1px var(--charge, var(--brand-plasma-pink, #D942DB));
    animation: cb-charge-b-l7gmsnilwb 1.1s ease-in-out infinite;
}
.cb__pc--charged.cb--white[b-l7gmsnilwb] { --charge: var(--brand-aqua-pulse, #3ce6dc); }
.cb__pc--charged.cb--black[b-l7gmsnilwb] { --charge: var(--brand-plasma-pink, #D942DB); }
@keyframes cb-charge-b-l7gmsnilwb {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .cb__pc--charged[b-l7gmsnilwb]::after { animation: none; opacity: .8; } }

/* Attack explosion — when a piece is cleared, at its last cell. Three layers: the piece flashes + swells
   (core), a shockwave ring expands, and brand-tinted shards fly outward. The box stays put (base translate);
   only the inner layers animate. */
.cb__pop[b-l7gmsnilwb] {
    pointer-events: none; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    /* set per-cell by the renderer (ms): distance-from-blast-origin, so the explosion ripples outward. */
    --pop-delay: 0;
}
/* All three layers share the ripple delay; `both` fill holds frame-0 (piece resting, bright) during the
   wait so a cell sits loaded until the shockwave reaches it, then pops. */
.cb__pop .cb__gl[b-l7gmsnilwb],
.cb__pop[b-l7gmsnilwb]::before,
.cb__pop[b-l7gmsnilwb]::after { animation-delay: calc(var(--pop-delay, 0) * 1ms); }
.cb__pop .cb__gl[b-l7gmsnilwb] { animation: cb-core-b-l7gmsnilwb .36s ease-out both; }
.cb__pop .cb__gl svg[b-l7gmsnilwb] { filter: none; }   /* drop the resting drop-shadow during the flash */
@keyframes cb-core-b-l7gmsnilwb {
    0%   { transform: scale(1);    filter: brightness(1.6) drop-shadow(0 0 6px #fff); }
    28%  { transform: scale(1.55); filter: brightness(calc(4.2 + var(--combo,0) * 0.4)) drop-shadow(0 0 calc(20px + var(--combo,0)*6px) #fff); }
    100% { transform: scale(0);    opacity: 0; filter: brightness(6); }
}
/* shockwave ring */
.cb__pop[b-l7gmsnilwb]::before {
    content: ""; position: absolute; inset: 10%; border-radius: 50%; pointer-events: none;
    border: 3px solid #ffffff;
    box-shadow: 0 0 16px 2px var(--brand-plasma-pink, #D942DB), inset 0 0 12px var(--brand-aqua-pulse, #3ce6dc);
    animation: cb-wave-b-l7gmsnilwb .42s ease-out both;
}
@keyframes cb-wave-b-l7gmsnilwb {
    0%   { transform: scale(.25); opacity: 1; }
    70%  { opacity: .8; }
    100% { transform: scale(calc(2.3 + var(--combo, 0) * 0.3)); opacity: 0; }
}
/* radiating shards — 8 sparks flung outward, brand-tinted (aqua + plasma-pink + white core) */
.cb__pop[b-l7gmsnilwb]::after {
    content: ""; position: absolute; inset: -12%; border-radius: 50%; pointer-events: none;
    background:
        radial-gradient(circle, #fff 0, transparent 42%) 50% 0 / 24% 24% no-repeat,
        radial-gradient(circle, #fff 0, transparent 42%) 50% 100% / 24% 24% no-repeat,
        radial-gradient(circle, var(--brand-aqua-pulse, #3ce6dc) 0, transparent 44%) 0 50% / 24% 24% no-repeat,
        radial-gradient(circle, var(--brand-aqua-pulse, #3ce6dc) 0, transparent 44%) 100% 50% / 24% 24% no-repeat,
        radial-gradient(circle, var(--brand-plasma-pink, #D942DB) 0, transparent 44%) 14% 14% / 22% 22% no-repeat,
        radial-gradient(circle, var(--brand-plasma-pink, #D942DB) 0, transparent 44%) 86% 14% / 22% 22% no-repeat,
        radial-gradient(circle, var(--brand-plasma-pink, #D942DB) 0, transparent 44%) 14% 86% / 22% 22% no-repeat,
        radial-gradient(circle, var(--brand-plasma-pink, #D942DB) 0, transparent 44%) 86% 86% / 22% 22% no-repeat;
    animation: cb-shards-b-l7gmsnilwb .46s ease-out both;
}
@keyframes cb-shards-b-l7gmsnilwb {
    0%   { transform: scale(.2) rotate(0deg); opacity: 1; }
    100% { transform: scale(calc(2.7 + var(--combo, 0) * 0.4)) rotate(35deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cb__pc[b-l7gmsnilwb] { transition: none; }
    .cb__pop .cb__gl[b-l7gmsnilwb] { animation: cb-core-fade-b-l7gmsnilwb .2s ease-out forwards; animation-delay: 0s; }
    .cb__pop[b-l7gmsnilwb]::before, .cb__pop[b-l7gmsnilwb]::after { display: none; }
    @keyframes cb-core-fade-b-l7gmsnilwb { to { opacity: 0; } }
}
/* /Components/Signage/ChessController.razor.rz.scp.css */
.cc[b-zz808nzrgl] { height: 100dvh; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: #0B0018; color: #cfe9ff; font-family: 'Space Grotesk', system-ui, sans-serif; padding: 1rem; }
.cc__msg[b-zz808nzrgl] { color: #9fb6d8; text-align: center; }
.cc__h[b-zz808nzrgl] { color: #cfe9ff; margin: 0 0 .4rem; font-weight: 700; }
.cc__pick[b-zz808nzrgl] { display: flex; flex-direction: column; gap: .8rem; width: 100%; max-width: 360px; }
.cc__lvl[b-zz808nzrgl] { display: flex; flex-direction: column; align-items: flex-start; padding: .9rem 1.2rem; border: none; border-radius: .8rem; font-size: 1.3rem; font-weight: 700; color: #0B0018; cursor: pointer; }
.cc__lvl span[b-zz808nzrgl] { font-size: .75rem; font-weight: 500; opacity: .8; }
.cc__lvl--easy[b-zz808nzrgl] { background: #4be3a0; }
.cc__lvl--med[b-zz808nzrgl] { background: #3ce6dc; }
.cc__lvl--hard[b-zz808nzrgl] { background: #ff7da8; }
.cc__hud[b-zz808nzrgl] { width: 100%; max-width: 460px; display: flex; justify-content: space-between; font-weight: 700; }
/* ::deep so the rule reaches the .cb board inside the child ChessBoard component (scoped CSS doesn't
   cross component boundaries). A definite width lets aspect-ratio:1 give the board a real height. */
.cc[b-zz808nzrgl]  .cb { width: min(100%, 60dvh, 460px); margin: 0 auto; }
.cc__hint[b-zz808nzrgl] { font-size: .8rem; color: #8a86b8; text-align: center; }
.cc__over[b-zz808nzrgl] { text-align: center; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.cc__score[b-zz808nzrgl] { font-size: 3rem; color: #3ce6dc; margin: 0; } .cc__sub[b-zz808nzrgl] { color: #9fb6d8; margin: 0; }
.cc__handle[b-zz808nzrgl] { font-size: 1.6rem; text-align: center; text-transform: uppercase; width: 7rem; padding: .4rem; background: #11082e; border: 1px solid #241c4d; border-radius: .5rem; color: #cfe9ff; }
.cc__submit[b-zz808nzrgl], .cc__retry[b-zz808nzrgl] { padding: .8rem 1.6rem; border: none; border-radius: .6rem; background: #3ce6dc; color: #0B0018; font-weight: 700; } .cc__submit[disabled][b-zz808nzrgl] { opacity: .5; }
/* /Components/Signage/ContactPanel.razor.rz.scp.css */
/* "Get in touch" tab: centred intro + teal CTA, on the companion's dark hub theme. */
.gt[b-5ilvzgnesg] { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.5rem; text-align: center; padding: 1.5rem 1.6rem; }
.gt__lead[b-5ilvzgnesg] { font-size: 1.35rem; font-weight: 700; color: #eafeff; margin: 0 0 .5rem; }
.gt__sub[b-5ilvzgnesg] { font-size: .95rem; line-height: 1.55; color: #9fb6d8; margin: 0 auto; max-width: 30ch; }
.gt__cta[b-5ilvzgnesg] { display: inline-block; padding: .8rem 1.9rem; border-radius: 999px; text-decoration: none; font-weight: 700;
    color: #04121a; background: linear-gradient(160deg,#5ffbef,#1aa6a0); box-shadow: 0 0 18px rgba(60,230,220,.35); }
/* /Components/Signage/ControlPanel.razor.rz.scp.css */
/* Wrapper only — the control UI (and its styling) lives in ControlPanelView.
   Scoped rules here can't reach ControlPanelView's elements without ::deep, so its
   own scoped stylesheet (ControlPanelView.razor.css) owns the look. */
.ctrl[b-l98lt27slt] { color: #cfe9ff; background: #0B0018; min-height: 100dvh; }
/* /Components/Signage/ControlPanelView.razor.rz.scp.css */
.cpv[b-xmxlsihqtd] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem;
    color: #cfe9ff;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    height: 100dvh;            /* fill the screen exactly — no page scroll */
    box-sizing: border-box;
    overflow: hidden;
}

.cpv__msg[b-xmxlsihqtd] { color: #9fb6d8; text-align: center; padding: 2rem 1rem; }

.cpv__label[b-xmxlsihqtd] {
    font-size: .62rem;
    color: #8a86b8;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cpv__title[b-xmxlsihqtd] {
    font-size: 1.6rem;
    color: #3ce6dc;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .2rem;
}

/* The swipe surface — the primary control. Swipe left/right to advance/rewind the display. */
.cpv__surface[b-xmxlsihqtd] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;           /* take the leftover height so the whole view fits without scrolling */
    min-height: 0;
    border-radius: 1.3rem;
    padding: 1rem;
    background: radial-gradient(130% 90% at 50% 0%, #1a1140 0%, #0c0420 72%);
    border: 1px solid #3ce6dc33;
    box-shadow: inset 0 0 50px #3ce6dc14, 0 8px 30px #00000055;
    touch-action: pan-y;           /* let the page scroll vertically; we own horizontal swipes */
    user-select: none;
    -webkit-user-select: none;
    transition: border-color .2s ease, background .2s ease;
}
.cpv__surface.is-held[b-xmxlsihqtd] {
    border-color: #ffd16655;
    background: radial-gradient(130% 90% at 50% 0%, #2a1f12 0%, #0c0420 72%);
}

.cpv__hint[b-xmxlsihqtd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    color: #b6b2dd;
    font-size: 1.05rem;
    letter-spacing: .5px;
    pointer-events: none;          /* taps fall through to the surface/edge buttons */
}
.cpv__sub[b-xmxlsihqtd] { font-size: .72rem; color: #6f6b97; letter-spacing: 1px; text-transform: uppercase; }
.cpv__held[b-xmxlsihqtd] { color: #ffd166; font-weight: 700; font-size: 1.2rem; }

.cpv__edge[b-xmxlsihqtd] {
    background: none;
    border: none;
    color: #3ce6dc;
    font-size: 3rem;
    line-height: 1;
    padding: .6rem 1.1rem;
    opacity: .55;
    cursor: pointer;
    transition: opacity .12s ease, transform .12s ease;
}
.cpv__edge:active[b-xmxlsihqtd] { opacity: 1; transform: scale(.86); }

.cpv__pause[b-xmxlsihqtd] {
    padding: 1.15rem;
    border-radius: 1rem;
    border: 1px solid #3ce6dc55;
    background: #11082e;
    color: #cfe9ff;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cpv__pause.is-held[b-xmxlsihqtd] {
    background: #3ce6dc;
    color: #0B0018;
    border-color: #3ce6dc;
}
/* /Components/Signage/GameChooser.razor.rz.scp.css */
.chooser[b-r2vpn0mjl8] { display: flex; flex-direction: column; gap: .7rem; padding: .8rem; }
.chooser__hd[b-r2vpn0mjl8] { font-size: .7rem; color: #8a86b8; text-transform: uppercase; letter-spacing: 1px; }
.chooser__card[b-r2vpn0mjl8] { display: flex; align-items: center; gap: .7rem; background: #11082e; border: 1px solid #241c4d; border-radius: .8rem; padding: .9rem; color: #cfe9ff; }
.chooser__ico[b-r2vpn0mjl8] { font-size: 1.8rem; }
.chooser__t[b-r2vpn0mjl8] { font-size: 1rem; font-weight: 700; }
.chooser__back[b-r2vpn0mjl8] { padding: .4rem .6rem; }
.chooser__back button[b-r2vpn0mjl8] { background: none; border: none; color: #3ce6dc; font-size: .9rem; }
/* /Components/Signage/Match3Board.razor.rz.scp.css */
/* The board is a positioning surface: gems are absolutely placed by --r/--c and glide via a transform
   transition when they move (fall/swap). Outer width is owned by each consumer (phone / display) via
   ::deep. Plasma frame lives here so it hugs the actual board. */
.m3[b-ohehli34vz] {
    position: relative;
    aspect-ratio: 1;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 16px;
    border: 3px solid var(--brand-plasma-pink, #D942DB);
    background: radial-gradient(135% 130% at 50% 0%, #160a32 0%, #070011 72%);
    box-shadow: inset 0 0 26px rgba(0, 0, 0, .55), 0 0 24px color-mix(in srgb, var(--brand-plasma-pink, #D942DB) 45%, transparent);
    overflow: hidden;
}

/* The playfield (inside the padding) is the positioning context for gems. */
.m3__gem[b-ohehli34vz], .m3__pop[b-ohehli34vz] {
    position: absolute;
    top: 6px; left: 6px;
    width: calc((100% - 12px) / var(--n));
    height: calc((100% - 12px) / var(--n));
    box-sizing: border-box;
}

.m3__gem[b-ohehli34vz] {
    --s: .9;                                 /* shrink-to-cell gap; bumped on select */
    transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)) scale(var(--s));
    transition: transform .24s ease-in;       /* the glide — gravity-like accelerate */
    border-radius: 24%;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, .5),
        inset 0 -5px 7px rgba(0, 0, 0, .42),
        0 2px 4px rgba(0, 0, 0, .4);
    cursor: pointer;
}
.m3__gem[b-ohehli34vz]::before {                            /* glossy top-left shine */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(56% 42% at 32% 24%, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 62%);
}
.m3__gem--sel[b-ohehli34vz] {
    --s: 1.0;
    z-index: 3;
    box-shadow: 0 0 0 3px #fff, 0 0 16px 3px rgba(255, 255, 255, .85), inset 0 2px 3px rgba(255, 255, 255, .5);
}

/* glossy candy gems — light from the top-left */
.c1[b-ohehli34vz] { background: radial-gradient(125% 125% at 30% 24%, #9ffff5, #149990 72%); }
.c2[b-ohehli34vz] { background: radial-gradient(125% 125% at 30% 24%, #ffaec5, #c92f57 72%); }
.c3[b-ohehli34vz] { background: radial-gradient(125% 125% at 30% 24%, #ddb6ff, #6f29c9 72%); }
.c4[b-ohehli34vz] { background: radial-gradient(125% 125% at 30% 24%, #b0c6ff, #2f52c9 72%); }
.c5[b-ohehli34vz] { background: radial-gradient(125% 125% at 30% 24%, #ffeaa0, #d9971a 72%); }
.c6[b-ohehli34vz] { background: radial-gradient(125% 125% at 30% 24%, #a4ffce, #149955 72%); }

/* explosion tint per gem colour — read by the pop layers (ring + shards) below */
.c1[b-ohehli34vz] { --pop: #3ff5e6; } .c2[b-ohehli34vz] { --pop: #ff5c8a; } .c3[b-ohehli34vz] { --pop: #b26bff; }
.c4[b-ohehli34vz] { --pop: #5c86ff; } .c5[b-ohehli34vz] { --pop: #ffcf5c; } .c6[b-ohehli34vz] { --pop: #3fe88a; }

/* striped power-up — a shimmer travelling along the stripe direction */
.sp-h[b-ohehli34vz]::after, .sp-v[b-ohehli34vz]::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    mix-blend-mode: soft-light;
}
.sp-h[b-ohehli34vz]::after { background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 9px); animation: m3-stripe-x-b-ohehli34vz 1.1s linear infinite; }
.sp-v[b-ohehli34vz]::after { background: repeating-linear-gradient(0deg, #fff 0 3px, transparent 3px 9px); animation: m3-stripe-y-b-ohehli34vz 1.1s linear infinite; }
@keyframes m3-stripe-x-b-ohehli34vz { to { background-position-x: 12px; } }
@keyframes m3-stripe-y-b-ohehli34vz { to { background-position-y: 12px; } }

/* wrapped — a pulsing energy ring */
.sp-w[b-ohehli34vz] { animation: m3-wrap-b-ohehli34vz 1.2s ease-in-out infinite; }
@keyframes m3-wrap-b-ohehli34vz {
    0%, 100% { box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), 0 0 9px #ff5c8a, inset 0 2px 3px rgba(255,255,255,.5); }
    50%      { box-shadow: inset 0 0 0 3px rgba(255,255,255,.9), 0 0 18px #ff5c8a, inset 0 2px 3px rgba(255,255,255,.5); }
}

/* colour bomb — a glossy prism orb */
.sp-b[b-ohehli34vz] { background: radial-gradient(circle at 50% 38%, #fff 0%, #ffd166 16%, #5ffbef 38%, #8c42db 68%, #1a0633 92%); }

/* Attack explosion — at the cleared gem's last cell, colorised by the matched gem (--pop): a bright core
   flash, an expanding shockwave ring, and shards radiating out. The box stays put (no scale) so the ring +
   shards fly out independently rather than collapsing with the core. */
.m3__pop[b-ohehli34vz] {
    transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
    border-radius: 24%;
    pointer-events: none;
    z-index: 5;
    animation: m3-core-b-ohehli34vz .32s ease-out forwards;
}
@keyframes m3-core-b-ohehli34vz {
    0%   { filter: brightness(1.5) saturate(1.6); box-shadow: 0 0 6px 1px var(--pop, #fff); opacity: 1; }
    30%  { filter: brightness(calc(3.4 + var(--combo,0) * 0.35)) saturate(2);   box-shadow: 0 0 calc(24px + var(--combo,0)*7px) calc(7px + var(--combo,0)*2px) var(--pop, #fff); }
    100% { filter: brightness(4);                 box-shadow: 0 0 34px 12px transparent; opacity: 0; }
}
/* shockwave ring — tinted by the gem colour */
.m3__pop[b-ohehli34vz]::before {
    content: ""; position: absolute; inset: 4%; border-radius: 50%; pointer-events: none;
    border: 3px solid #fff;
    box-shadow: 0 0 16px 2px var(--pop, #fff), inset 0 0 10px var(--pop, #fff);
    animation: m3-wave-b-ohehli34vz .44s ease-out forwards;
}
@keyframes m3-wave-b-ohehli34vz {
    0%   { transform: scale(.3); opacity: 1; }
    70%  { opacity: .75; }
    100% { transform: scale(calc(2.3 + var(--combo, 0) * 0.3)); opacity: 0; }
}
/* radiating shards — white core sparks + gem-coloured ones */
.m3__pop[b-ohehli34vz]::after {
    content: ""; position: absolute; inset: -14%; border-radius: 50%; pointer-events: none;
    background:
        radial-gradient(circle, #fff 0, transparent 42%) 50% 0 / 26% 26% no-repeat,
        radial-gradient(circle, #fff 0, transparent 42%) 50% 100% / 26% 26% no-repeat,
        radial-gradient(circle, var(--pop, #fff) 0, transparent 44%) 0 50% / 26% 26% no-repeat,
        radial-gradient(circle, var(--pop, #fff) 0, transparent 44%) 100% 50% / 26% 26% no-repeat,
        radial-gradient(circle, var(--pop, #fff) 0, transparent 44%) 14% 14% / 24% 24% no-repeat,
        radial-gradient(circle, var(--pop, #fff) 0, transparent 44%) 86% 14% / 24% 24% no-repeat,
        radial-gradient(circle, var(--pop, #fff) 0, transparent 44%) 14% 86% / 24% 24% no-repeat,
        radial-gradient(circle, var(--pop, #fff) 0, transparent 44%) 86% 86% / 24% 24% no-repeat;
    animation: m3-shards-b-ohehli34vz .48s ease-out forwards;
}
@keyframes m3-shards-b-ohehli34vz {
    0%   { transform: scale(.2) rotate(0deg); opacity: 1; }
    100% { transform: scale(calc(2.7 + var(--combo, 0) * 0.4)) rotate(30deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .m3__gem[b-ohehli34vz] { transition: none; }
    .sp-h[b-ohehli34vz]::after, .sp-v[b-ohehli34vz]::after, .sp-w[b-ohehli34vz], .sp-b[b-ohehli34vz] { animation: none; }
    .m3__pop[b-ohehli34vz] { animation: m3-pop-fade-b-ohehli34vz .2s ease-out forwards; }
    .m3__pop[b-ohehli34vz]::before, .m3__pop[b-ohehli34vz]::after { display: none; }
    @keyframes m3-pop-fade-b-ohehli34vz { to { opacity: 0; } }
}
/* /Components/Signage/Match3Controller.razor.rz.scp.css */
.m3c[b-r6ldxfa5wr] { height: 100dvh; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: #0B0018; color: #cfe9ff; font-family: 'Space Grotesk', system-ui, sans-serif; padding: 1rem; }
.m3c__msg[b-r6ldxfa5wr] { color: #9fb6d8; text-align: center; }
.m3c__hud[b-r6ldxfa5wr] { width: 100%; max-width: 460px; display: flex; justify-content: space-between; font-weight: 700; }
/* ::deep so the rule reaches the .m3 board inside the child Match3Board component (scoped CSS
   doesn't cross component boundaries otherwise). A definite width is what lets aspect-ratio:1
   give the board a real height for grid-auto-rows to fill. */
.m3c[b-r6ldxfa5wr]  .m3 { width: min(100%, 60dvh, 460px); margin: 0 auto; }
.m3c__hint[b-r6ldxfa5wr] { font-size: .8rem; color: #8a86b8; }
.m3c__over[b-r6ldxfa5wr] { text-align: center; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.m3c__score[b-r6ldxfa5wr] { font-size: 3rem; color: #3ce6dc; margin: 0; } .m3c__sub[b-r6ldxfa5wr] { color: #9fb6d8; margin: 0; }
.m3c__handle[b-r6ldxfa5wr] { font-size: 1.6rem; text-align: center; text-transform: uppercase; width: 7rem; padding: .4rem; background: #11082e; border: 1px solid #241c4d; border-radius: .5rem; color: #cfe9ff; }
.m3c__submit[b-r6ldxfa5wr], .m3c__retry[b-r6ldxfa5wr] { padding: .8rem 1.6rem; border: none; border-radius: .6rem; background: #3ce6dc; color: #0B0018; font-weight: 700; } .m3c__submit[disabled][b-r6ldxfa5wr] { opacity: .5; }
/* /Components/Signage/PresenceBadge.razor.rz.scp.css */
.presence-badge[b-7l71knbx6t] { width: 16px; height: 16px; display: block; flex-shrink: 0; }

/* Subtle status-coloured glow around the dot (matches each status' fill). */
.presence-badge--available[b-7l71knbx6t] { filter: drop-shadow(0 0 4px rgba(107, 183, 0, .8)); }
.presence-badge--busy[b-7l71knbx6t],
.presence-badge--inmeeting[b-7l71knbx6t],
.presence-badge--donotdisturb[b-7l71knbx6t] { filter: drop-shadow(0 0 4px rgba(196, 49, 75, .8)); }
.presence-badge--away[b-7l71knbx6t] { filter: drop-shadow(0 0 4px rgba(255, 170, 68, .75)); }
.presence-badge--outofoffice[b-7l71knbx6t] { filter: drop-shadow(0 0 4px rgba(180, 0, 158, .75)); }
.presence-badge--offline[b-7l71knbx6t] { filter: drop-shadow(0 0 3px rgba(138, 136, 134, .5)); }
/* /Components/Signage/SignageChess.razor.rz.scp.css */
.sch[b-38qft2euah] { display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: .5rem; }

/* HUD + board are a single centred group, so the score/time sit directly above the board rather than
   pinned to the top of the content tier. The leaderboard stays at the bottom. */
.sch__stage[b-38qft2euah] { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; }

/* The board is sized by container WIDTH (inline-size), so its height is deterministic and the wrap hugs
   it with no vertical slack — that's what lets the HUD sit right above the board. cqw is zoom-stable on
   the fixed-width signage strip. ::deep reaches the board inside the ChessBoard component. */
.sch__boardwrap[b-38qft2euah] { width: 100%; container-type: inline-size; display: flex; justify-content: center; }
.sch__boardwrap[b-38qft2euah]  .cb { width: min(100cqw, 100%); }

/* Score / time: larger, full board width, directly above the board. */
.sch__hud[b-38qft2euah] { display: flex; gap: .6rem; width: 100%; }
.sch__stat[b-38qft2euah], .sch__time[b-38qft2euah] { flex: 1; background: #11082e; border: 1px solid #241c4d; border-radius: .7rem; padding: .5rem .8rem; text-align: center; }
.sch__stat .k[b-38qft2euah], .sch__time .k[b-38qft2euah] { display: block; font-size: .72rem; color: #8a86b8; text-transform: uppercase; letter-spacing: 1px; }
.sch__stat .v[b-38qft2euah], .sch__time .v[b-38qft2euah] { font-size: 1.9rem; font-weight: 700; color: #cfe9ff; line-height: 1.1; }

.sch__over[b-38qft2euah] { text-align: center; color: #3ce6dc; padding: .3rem; }
.sch__over .s[b-38qft2euah] { display: block; font-size: 2rem; font-weight: 700; }
.sch__over .t[b-38qft2euah] { font-size: .8rem; color: #9fb6d8; }
.sch__lb[b-38qft2euah] { display: flex; flex-wrap: wrap; gap: .6rem; border-top: 1px solid #241c4d; padding-top: .4rem; align-items: baseline; }
.sch__lb .t[b-38qft2euah] { font-size: .6rem; color: #8a86b8; text-transform: uppercase; letter-spacing: 1px; }
.sch__lb .e[b-38qft2euah] { font-size: .8rem; color: #b9c7e6; } .sch__lb b[b-38qft2euah] { color: #3ce6dc; }
/* /Components/Signage/SignageFeatureTile.razor.rz.scp.css */
/* Poll tile */
.ft-poll__q[b-lpyhbw8r1o] {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    max-width: 460px;
}
.ft-poll__bars[b-lpyhbw8r1o] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 460px;
}
.ft-poll__row[b-lpyhbw8r1o] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
    align-items: center;
    font-size: 22px;
}
.ft-poll__track[b-lpyhbw8r1o] {
    background: rgba(255,255,255,.1);
    border-radius: 8px;
    overflow: hidden;
    height: 18px;
}
.ft-poll__fill[b-lpyhbw8r1o] {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-nebula-violet), var(--brand-aqua-pulse));
    border-radius: 8px;
    transition: width 600ms ease;
}

/* Quiz histogram tile */
.ft-quiz[b-lpyhbw8r1o] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
    height: 90px;
    padding: 0 8px;
}
.ft-quiz__bar[b-lpyhbw8r1o] {
    flex: 1;
    background: linear-gradient(180deg, var(--brand-aqua-pulse), var(--brand-nebula-violet));
    border-radius: 6px 6px 0 0;
    min-height: 4px;
    transition: height 600ms ease;
}

/* Shipping ticker tile */
.ft-ship[b-lpyhbw8r1o] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    width: 100%;
    max-width: 460px;
}
.ft-ship li[b-lpyhbw8r1o] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-nebula-violet) 30%, transparent);
    padding-bottom: 10px;
}
.ft-ship li em[b-lpyhbw8r1o] {
    font-style: normal;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ft-ship li small[b-lpyhbw8r1o] {
    font-size: 15px;
    color: var(--brand-light-alloy);
    white-space: nowrap;
    flex-shrink: 0;
}
/* /Components/Signage/SignageMatch3.razor.rz.scp.css */
.sm3[b-kes9cnw3ty] { display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: .5rem; }

/* HUD + board are a single centred group, so the score/time sit directly above the board rather than
   pinned to the top of the content tier. The leaderboard stays at the bottom. */
.sm3__stage[b-kes9cnw3ty] { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; }

/* The board is sized by container WIDTH (inline-size), so its height is deterministic and the wrap hugs
   it with no vertical slack — that's what lets the HUD sit right above the board. cqw is zoom-stable on
   the fixed-width signage strip. ::deep reaches the board inside the Match3Board component. */
.sm3__boardwrap[b-kes9cnw3ty] { width: 100%; container-type: inline-size; display: flex; justify-content: center; }
.sm3__boardwrap[b-kes9cnw3ty]  .m3 { width: min(100cqw, 100%); }

/* Score / time: larger, full board width, directly above the board. */
.sm3__hud[b-kes9cnw3ty] { display: flex; gap: .6rem; width: 100%; }
.sm3__stat[b-kes9cnw3ty], .sm3__time[b-kes9cnw3ty] { flex: 1; background: #11082e; border: 1px solid #241c4d; border-radius: .7rem; padding: .5rem .8rem; text-align: center; }
.sm3__stat .k[b-kes9cnw3ty], .sm3__time .k[b-kes9cnw3ty] { display: block; font-size: .72rem; color: #8a86b8; text-transform: uppercase; letter-spacing: 1px; }
.sm3__stat .v[b-kes9cnw3ty], .sm3__time .v[b-kes9cnw3ty] { font-size: 1.9rem; font-weight: 700; color: #cfe9ff; line-height: 1.1; }

.sm3__over[b-kes9cnw3ty] { text-align: center; color: #3ce6dc; padding: .3rem; }
.sm3__over .s[b-kes9cnw3ty] { display: block; font-size: 2rem; font-weight: 700; }
.sm3__over .t[b-kes9cnw3ty] { font-size: .8rem; color: #9fb6d8; }
.sm3__lb[b-kes9cnw3ty] { display: flex; flex-wrap: wrap; gap: .6rem; border-top: 1px solid #241c4d; padding-top: .4rem; align-items: baseline; }
.sm3__lb .t[b-kes9cnw3ty] { font-size: .6rem; color: #8a86b8; text-transform: uppercase; letter-spacing: 1px; }
.sm3__lb .e[b-kes9cnw3ty] { font-size: .8rem; color: #b9c7e6; } .sm3__lb b[b-kes9cnw3ty] { color: #3ce6dc; }
/* /Components/Signage/SignageOrb.razor.rz.scp.css */
.signage-orb[b-95t8hx1tiw] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--orb-size, 50px);
    height: var(--orb-size, 50px);
    flex: 0 0 auto;
}

.signage-orb__blob[b-95t8hx1tiw] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.55));
}

/* Brain mark in its native brand colours inside the ring. */
.signage-orb__brain[b-95t8hx1tiw] {
    position: relative;
    z-index: 2;
    width: 42%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .signage-orb__blob animate[b-95t8hx1tiw] { display: none; }
}
/* /Components/Signage/SignageTetris.razor.rz.scp.css */
.tetris[b-u2bdeip444] { display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: .5rem; }
/* Larger score/level/lines, full board width, directly above the well (the HUD now lives inside the
   centred well-wrap rather than pinned to the top of the content tier). */
.tetris__hud[b-u2bdeip444] { display: flex; gap: .6rem; align-items: stretch; width: 100%; }
.tetris__stat[b-u2bdeip444] { flex: 1; background: #11082e; border: 1px solid #241c4d; border-radius: .7rem; padding: .5rem .6rem; text-align: center; }
.tetris__stat .k[b-u2bdeip444], .tetris__next .k[b-u2bdeip444] { display: block; font-size: .68rem; color: #8a86b8; letter-spacing: 1px; text-transform: uppercase; }
.tetris__stat .v[b-u2bdeip444] { font-size: 1.6rem; font-weight: 700; color: #cfe9ff; line-height: 1.1; }
.tetris__next[b-u2bdeip444] { background: #11082e; border: 1px solid #241c4d; border-radius: .5rem; padding: .3rem; display: flex; flex-direction: column; align-items: center; }
.tetris__nextgrid[b-u2bdeip444] { display: grid; grid-template-columns: repeat(4, .7rem); grid-auto-rows: .7rem; gap: 1px; margin-top: 2px; }
/* The wrap is the size container: it takes the leftover column space (below the HUD, above the
   leaderboard) and the well is sized in container-query units, so it fits the fixed signage content
   tier and DOESN'T rescale with browser zoom (vh would). */
.tetris__wellwrap[b-u2bdeip444] { flex: 1 1 0; min-height: 0; min-width: 0; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; }

/* A true 10:20 box with square cells, sized to the container:
   - width: min(100cqw, 44cqh) -> the largest 1:2 box that fits beneath the HUD (the well now shares the
     wrap with the HUD above it; the 44cqh height cap leaves headroom so the two never overflow);
   - height:auto + aspect-ratio:10/20 -> height follows the width;
   - grid-auto-rows:1fr -> the 20 rows divide the height evenly, so each cell is width/10 == height/20 == square. */
.tetris__well[b-u2bdeip444] { display: grid; grid-auto-rows: 1fr; gap: 2px; background: #070011; padding: 5px; border-radius: .7rem; border: 3px solid var(--brand-plasma-pink, #D942DB); box-shadow: 0 0 22px color-mix(in srgb, var(--brand-plasma-pink, #D942DB) 45%, transparent); aspect-ratio: 10 / 20; width: min(100cqw, 44cqh); height: auto; min-height: 0; position: relative; }
/* line-clear flash — the renderer adds --flash the frame the line count goes up. */
.tetris__well--flash[b-u2bdeip444]::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: rgba(120, 255, 240, .8);
    mix-blend-mode: screen;
    animation: tetris-flash-b-u2bdeip444 .35s ease-out forwards;
}
@keyframes tetris-flash-b-u2bdeip444 { from { opacity: .8; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tetris__well--flash[b-u2bdeip444]::after { animation-duration: .15s; } }
/* Glossy beveled blocks: a top-left highlight (::before) + bright inner-top / dark inner-bottom for
   depth. Static (no per-frame animation) so the gravity loop stays cheap to paint on the display. */
.cell[b-u2bdeip444] { border-radius: 4px; position: relative; }
.cell.empty[b-u2bdeip444] { background: #0a0320; border: 1px solid #160c34; }
.cell:not(.empty)[b-u2bdeip444] {
    border: none;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .45), inset 0 -4px 5px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .4);
}
.cell:not(.empty)[b-u2bdeip444]::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(72% 52% at 32% 22%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%);
}
.cell.I[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #8ffff2, #149990 72%); }
.cell.O[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #ffeaa0, #d9971a 72%); }
.cell.T[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #ddb6ff, #6f29c9 72%); }
.cell.S[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #a4ffce, #149955 72%); }
.cell.Z[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #ffaec5, #c92f57 72%); }
.cell.J[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #b0c6ff, #2f52c9 72%); }
.cell.L[b-u2bdeip444] { background: radial-gradient(125% 125% at 30% 22%, #ffc79a, #d9701a 72%); }
.tetris__over[b-u2bdeip444] { text-align: center; color: #3ce6dc; padding: .4rem; }
.tetris__overscore[b-u2bdeip444] { display: block; font-size: 2rem; font-weight: 700; }
.tetris__oversub[b-u2bdeip444] { font-size: .8rem; color: #9fb6d8; }
.tetris__lb[b-u2bdeip444] { display: flex; flex-wrap: wrap; gap: .6rem; border-top: 1px solid #241c4d; padding-top: .4rem; align-items: baseline; }
.tetris__lb .t[b-u2bdeip444] { font-size: .6rem; color: #8a86b8; letter-spacing: 1px; text-transform: uppercase; }
.tetris__lb .e[b-u2bdeip444] { font-size: .8rem; color: #b9c7e6; }
.tetris__lb b[b-u2bdeip444] { color: #3ce6dc; }
/* /Components/Signage/TetrisController.razor.rz.scp.css */
.play[b-4l4tdm8o95] { height: 100dvh; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 1.5rem; background: #0B0018; color: #cfe9ff; font-family: 'Space Grotesk', system-ui, sans-serif; padding: 1.5rem; }
.play__msg[b-4l4tdm8o95] { font-size: 1.1rem; text-align: center; color: #9fb6d8; }
.pad[b-4l4tdm8o95] { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 0.9rem; }
.pad__row[b-4l4tdm8o95] { display: flex; gap: 0.9rem; }
.pad__btn[b-4l4tdm8o95] { flex: 1; height: 5rem; font-size: 2rem; color: #cfe9ff; background: #1a1140;
            border: 1px solid rgba(60,230,220,.33); border-radius: 1rem; }
.pad__btn:active[b-4l4tdm8o95] { background: #241a55; }
.pad__btn--act[b-4l4tdm8o95] { color: #3ce6dc; box-shadow: 0 0 14px rgba(60,230,220,.27); }
.pad__drop[b-4l4tdm8o95] { height: 4.5rem; font-size: 1.3rem; letter-spacing: 2px; color: #0B0018; font-weight: 700;
             background: linear-gradient(160deg,#5ffbef,#1aa6a0); border: none; border-radius: 1rem; }
.play__over[b-4l4tdm8o95] { text-align: center; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
.play__score[b-4l4tdm8o95] { font-size: 3rem; color: #3ce6dc; margin: 0; }
.play__sub[b-4l4tdm8o95] { color: #9fb6d8; margin: 0; }
.play__label[b-4l4tdm8o95] { font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: #8a86b8; margin-top: .5rem; }
.play__handle[b-4l4tdm8o95] { font-size: 1.6rem; text-align: center; text-transform: uppercase; width: 7rem; padding: .4rem;
                background: #11082e; border: 1px solid #241c4d; border-radius: .5rem; color: #cfe9ff; }
.play__submit[b-4l4tdm8o95], .play__retry[b-4l4tdm8o95] { padding: .8rem 1.6rem; font-size: 1rem; border-radius: .6rem; border: none;
                background: #3ce6dc; color: #0B0018; font-weight: 700; }
.play__submit[disabled][b-4l4tdm8o95] { opacity: .5; }