/* /Components/Admin/ModerationQueue.razor.rz.scp.css */
.review-container:focus[b-be811saj8w] {
    outline: none;
}

.review-image-panel[b-be811saj8w] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.review-image[b-be811saj8w] {
    max-width: 100%;
    max-height: 512px;
    border-radius: 8px;
    object-fit: contain;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout Mobile Responsive Styles */
/* Note: MudBlazor component overrides are in wwwroot/app.css (global CSS)
   because scoped CSS cannot effectively target MudBlazor's dynamically rendered elements */

/* Desktop: show drawer and hamburger menu */
.desktop-drawer[b-fr7alhf2i8] {
    display: block;
}

.desktop-menu-toggle[b-fr7alhf2i8] {
    display: flex;
}
/* /Components/Layout/MobileBottomNav.razor.rz.scp.css */
/* Mobile Bottom Navigation - YouTube Style */

.mobile-bottom-nav[b-dzryu3bxfl] {
    display: none; /* Hidden by default on desktop */
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px));
    background: #0F0F1C;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1100;
    justify-content: space-around;
    align-items: center;
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* Support for iOS notch */
    flex-shrink: 0; /* Don't shrink the nav */
}

.mobile-bottom-nav.hidden[b-dzryu3bxfl] {
    display: none !important;
}

.bottom-nav-item[b-dzryu3bxfl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 80px;
    height: 100%;
    text-decoration: none;
    color: #F5E6A8;
    font-size: 0.7rem;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 8px 4px;
    border-radius: 8px;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
}

.bottom-nav-item:hover[b-dzryu3bxfl] {
    background: rgba(255, 215, 0, 0.1);
    color: #FFD700;
}

.bottom-nav-item.active[b-dzryu3bxfl] {
    color: #FFD700;
}

.bottom-nav-item.active[b-dzryu3bxfl]  .mud-icon-root {
    color: #FFD700;
}

.bottom-nav-item[b-dzryu3bxfl]  .mud-icon-root {
    color: inherit;
    font-size: 1.5rem;
}

.bottom-nav-item span[b-dzryu3bxfl] {
    margin-top: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

/* Admin Menu Overlay 
   Note: Using z-index values below MudBlazor's dialog/overlay range (1400+)
   so MudDialogs and MudMenus properly appear above the admin menu */
.admin-menu-overlay[b-dzryu3bxfl] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1150;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.admin-menu-overlay.visible[b-dzryu3bxfl] {
    display: block;
    opacity: 1;
}

/* Admin Menu Panel - Slide up from bottom
   z-index 1200 is above bottom nav (1100) but below MudBlazor overlays (1400+) */
.admin-menu-panel[b-dzryu3bxfl] {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a2d;
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px 16px 0 0;
    z-index: 1200;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-height: 70vh;
    overflow-y: auto;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}

.admin-menu-panel.visible[b-dzryu3bxfl] {
    display: block;
    transform: translateY(0);
}

.admin-menu-header[b-dzryu3bxfl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    color: #FFD700;
    font-weight: 600;
    font-size: 1.1rem;
    position: sticky;
    top: 0;
    background: #1a1a2d;
}

.admin-menu-header[b-dzryu3bxfl]  .mud-icon-button {
    color: #F5E6A8;
}

.admin-menu-items[b-dzryu3bxfl] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.admin-menu-item[b-dzryu3bxfl] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    color: #F5E6A8;
    text-decoration: none;
    transition: background 0.2s ease;
}

.admin-menu-item:hover[b-dzryu3bxfl],
.admin-menu-item:active[b-dzryu3bxfl] {
    background: rgba(255, 215, 0, 0.1);
    color: #FFD700;
}

.admin-menu-item[b-dzryu3bxfl]  .mud-icon-root {
    color: #FFD700;
    font-size: 1.25rem;
}

.admin-menu-item span[b-dzryu3bxfl] {
    font-size: 0.95rem;
}

/* Show bottom nav only on mobile/tablet */
@media (max-width: 960px) {
    .mobile-bottom-nav[b-dzryu3bxfl] {
        display: flex;
    }
    
    .admin-menu-panel[b-dzryu3bxfl] {
        display: block;
    }
}

/* Extra small screens - slightly smaller text */
@media (max-width: 400px) {
    .bottom-nav-item[b-dzryu3bxfl] {
        font-size: 0.65rem;
    }
    
    .bottom-nav-item[b-dzryu3bxfl]  .mud-icon-root {
        font-size: 1.3rem;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-0cpqyuw8ug] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-0cpqyuw8ug] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-0cpqyuw8ug] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-0cpqyuw8ug] {
    font-size: 1.1rem;
}

.bi[b-0cpqyuw8ug] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -0.75rem;
    background-size: cover;
    font-size: large;
}

.nav-item[b-0cpqyuw8ug] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-0cpqyuw8ug] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-0cpqyuw8ug] {
        padding-bottom: 1rem;
    }

    .nav-item[b-0cpqyuw8ug]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-0cpqyuw8ug]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-0cpqyuw8ug]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-0cpqyuw8ug] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-0cpqyuw8ug] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-0cpqyuw8ug] {
        display: none;
    }

    .nav-scrollable[b-0cpqyuw8ug] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/DiscoverShowcase.razor.rz.scp.css */
.discover-alt-container .hero-panel[b-2gt7ln0y56] {
    background: linear-gradient(135deg, rgba(15, 15, 28, 0.95), rgba(33, 22, 59, 0.9));
    border-radius: 24px;
    color: #fff;
}

.detail-list .mud-list-item[b-2gt7ln0y56] {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    background-color: rgba(255, 255, 255, 0.04);
}
/* /Components/Pages/Edit.razor.rz.scp.css */
.tasting-options .mud-expand-panel-header[b-8kgbsgszgj] {
    justify-content: flex-start;
    gap: 0.5rem;
}

.tasting-options .mud-expand-panel-icon[b-8kgbsgszgj] {
    margin-left: 0;
}

.tasting-options-toggle[b-8kgbsgszgj] {
    width: auto;
    align-self: flex-start;
}
/* /Components/Pages/History.razor.rz.scp.css */
.history-table[b-x123m7x14a] {
    overflow-x: auto;
}

.tasting-name[b-x123m7x14a] {
    font-weight: 600;
    font-size: 1rem;
}
/* /Components/Pages/HistoryDetail.razor.rz.scp.css */
.leaderboard-list[b-1mism3ry7f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scoreboard-detail[b-1mism3ry7f] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1.5rem;
    padding: 1.25rem 0 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.scoreboard-detail-info[b-1mism3ry7f] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scoreboard-detail-chart[b-1mism3ry7f] {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .scoreboard-detail[b-1mism3ry7f] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Host.razor.rz.scp.css */
/* Host Controls Grid - responsive layout */
.host-controls-grid[b-fnl4ppp8ud] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
}

/* ============================================================
   Host quiz — quiz-show stage. Question is the star (left of
   hero, oversized). Live "X / Y answered" pill anchors the
   right. Alternatives become large lettered glass chips that
   fill the screen via auto-fit grid (works for 2 - 12+ answers).
   On reveal the same chips stay in place and grow gold fills
   + vote counts inside, so the layout never jumps.
   ============================================================ */
[b-fnl4ppp8ud] .host-quiz {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.5vh, 44px);
    padding: clamp(8px, 1.6vw, 24px) clamp(8px, 1.6vw, 24px) 0;
    width: 100%;
    animation: host-quiz-enter-b-fnl4ppp8ud 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[b-fnl4ppp8ud] .host-quiz__hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-align: left;
    width: 100%;
}

[b-fnl4ppp8ud] .host-quiz__hero--stage {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
}

[b-fnl4ppp8ud] .host-quiz__hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    container-type: inline-size;
    container-name: host-quiz-title;
}

[b-fnl4ppp8ud] .host-quiz__hero-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: clamp(20px, 4vh, 48px);
    min-width: 0;
}

/* Live progress donut anchors the right of the hero — same
   visual treatment as the beverage "voted" glass on Host. */
[b-fnl4ppp8ud] .host-quiz__progress {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: clamp(8px, 2vh, 24px);
}

[b-fnl4ppp8ud] .host-quiz__progress-card {
    margin: 0;
}

[b-fnl4ppp8ud] .host-quiz__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: -0.035em;
    /* Container-aware: scales to the hero text column width, not the viewport.
       cqi = 1% of the container's inline size. */
    font-size: clamp(2.6rem, 11cqi, 6rem);
    line-height: 0.98;
    color: #FFD700;
    margin: clamp(16px, 4vh, 40px) 0 20px;
    text-shadow: 0 0 56px rgba(255, 215, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.5);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* Length-based downshifts \u2014 set in Razor via class modifiers based on
   QuestionText.Length so we never have to measure in JS. Each tier drops
   the clamp ceiling so longer titles get progressively smaller. */
[b-fnl4ppp8ud] .host-quiz__title--long {
    font-size: clamp(2.2rem, 8.5cqi, 4.4rem);
    line-height: 1.02;
}

[b-fnl4ppp8ud] .host-quiz__title--xlong {
    font-size: clamp(1.8rem, 6.5cqi, 3.4rem);
    line-height: 1.08;
}

[b-fnl4ppp8ud] .host-quiz__accent {
    width: 64px;
    height: 4px;
    background: linear-gradient(90deg, #FFD700, rgba(255, 215, 0, 0.3));
    border-radius: 2px;
    margin-bottom: 20px;
}

[b-fnl4ppp8ud] .host-quiz__accent--echo {
    width: 32px;
    height: 2px;
    background: rgba(255, 215, 0, 0.35);
    margin-bottom: 18px;
}

[b-fnl4ppp8ud] .host-quiz__producer {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.4;
    color: rgba(255, 224, 130, 0.85);
    margin: 0 0 14px;
}

[b-fnl4ppp8ud] .host-quiz__eyebrow {
    font-family: 'Inter', sans-serif;
    color: rgba(245, 230, 168, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0;
}

/* ----- Chip grid --------------------------------------------- */
/* Default: 3 chips per row max. Extras wrap naturally below.
   Layout overrides for 2/4 answers create more pleasing arrangements. */
[b-fnl4ppp8ud] .host-quiz__chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
    width: 100%;
}

/* 2 answers: side-by-side, big tiles */
[b-fnl4ppp8ud] .host-quiz__chips[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 4 answers: 2x2 instead of 3+1 */
[b-fnl4ppp8ud] .host-quiz__chips[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

[b-fnl4ppp8ud] .host-quiz__chip {
    position: relative;
    padding: clamp(16px, 1.8vh, 22px) clamp(20px, 2.2vw, 28px);
    min-height: clamp(86px, 10vh, 124px);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(245, 230, 168, 0.18);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 22px 48px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: border-color 240ms ease-out, box-shadow 240ms ease-out, transform 240ms ease-out;
    /* Container query so chip text scales to the chip's own width. */
    container-type: inline-size;
    container-name: host-quiz-chip;
}

[b-fnl4ppp8ud] .host-quiz__chip-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.22) 0%, rgba(255, 215, 0, 0.06) 100%);
    border-right: 1px solid rgba(255, 215, 0, 0.35);
    pointer-events: none;
    z-index: 0;
    transition: width 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

[b-fnl4ppp8ud] .host-quiz__chip--revealed .host-quiz__chip-fill {
    width: var(--chip-pct, 0%);
}

[b-fnl4ppp8ud] .host-quiz__chip--correct {
    border-color: rgba(190, 242, 100, 0.55);
    box-shadow: 0 22px 48px -20px rgba(0, 0, 0, 0.6), 0 0 32px rgba(190, 242, 100, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[b-fnl4ppp8ud] .host-quiz__chip--correct .host-quiz__chip-fill {
    background: linear-gradient(90deg, rgba(190, 242, 100, 0.22) 0%, rgba(190, 242, 100, 0.06) 100%);
    border-right-color: rgba(190, 242, 100, 0.45);
}

[b-fnl4ppp8ud] .host-quiz__chip-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: clamp(56px, 5vw, 88px) 1fr auto;
    column-gap: clamp(18px, 2vw, 28px);
    align-items: center;
    height: 100%;
    width: 100%;
}

[b-fnl4ppp8ud] .host-quiz__chip-letter {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: -0.04em;
    font-size: clamp(3rem, 5vw, 4.4rem);
    line-height: 1;
    color: #FFD700;
    text-shadow: 0 0 24px rgba(255, 215, 0, 0.35);
    font-variant-numeric: tabular-nums;
}

[b-fnl4ppp8ud] .host-quiz__chip--correct .host-quiz__chip-letter {
    color: #BEF264;
    text-shadow: 0 0 24px rgba(190, 242, 100, 0.35);
}

[b-fnl4ppp8ud] .host-quiz__chip-text {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    /* Container-aware: scales to chip width, not viewport. */
    font-size: clamp(1.3rem, 5.6cqi, 2rem);
    line-height: 1.25;
    color: rgba(245, 230, 168, 0.95);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* Length-based downshifts for the whole chip set so a long answer doesn't
   force itself smaller than its neighbours; we drop the size for all chips
   in the row when the longest answer crosses a tier. */
[b-fnl4ppp8ud] .host-quiz__chips--long .host-quiz__chip-text {
    font-size: clamp(1.15rem, 4.6cqi, 1.55rem);
}

[b-fnl4ppp8ud] .host-quiz__chips--xlong .host-quiz__chip-text {
    font-size: clamp(1rem, 3.6cqi, 1.25rem);
    line-height: 1.32;
}

/* Letter shrinks proportionally on long-text rows so it doesn't dominate */
[b-fnl4ppp8ud] .host-quiz__chips--long .host-quiz__chip-letter {
    font-size: clamp(2.2rem, 3.6vw, 3.2rem);
}
[b-fnl4ppp8ud] .host-quiz__chips--xlong .host-quiz__chip-letter {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

[b-fnl4ppp8ud] .host-quiz__chip-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: clamp(12px, 1.5vw, 20px);
    text-align: right;
}

[b-fnl4ppp8ud] .host-quiz__chip-pct {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 2.8vw, 2.8rem);
    line-height: 1;
    color: #FFD700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

[b-fnl4ppp8ud] .host-quiz__chip--correct .host-quiz__chip-pct {
    color: #BEF264;
}

[b-fnl4ppp8ud] .host-quiz__chip-votes {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(245, 230, 168, 0.55);
}

@keyframes host-quiz-enter-b-fnl4ppp8ud {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    [b-fnl4ppp8ud] .host-quiz { animation: none; }
    [b-fnl4ppp8ud] .host-quiz__chip-fill { transition: none; }
}

/* Tablet: meta column drops below the title rather than fighting for space. */
@media (max-width: 1100px) {
    [b-fnl4ppp8ud] .host-quiz__hero--stage {
        grid-template-columns: 1fr;
        align-items: start;
        row-gap: 16px;
    }
    [b-fnl4ppp8ud] .host-quiz__hero-meta {
        padding-top: 0;
    }
    [b-fnl4ppp8ud] .host-quiz__progress {
        justify-content: flex-start;
        padding-top: 0;
    }
    [b-fnl4ppp8ud] .host-quiz__chips[data-count="3"],
    [b-fnl4ppp8ud] .host-quiz__chips[data-count="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    [b-fnl4ppp8ud] .host-quiz__chips,
    [b-fnl4ppp8ud] .host-quiz__chips[data-count="2"],
    [b-fnl4ppp8ud] .host-quiz__chips[data-count="3"],
    [b-fnl4ppp8ud] .host-quiz__chips[data-count="4"] {
        grid-template-columns: 1fr;
    }
    [b-fnl4ppp8ud] .host-quiz__chip {
        min-height: 92px;
    }
}

/* ============================================================
   Depth treatments — atmospheric layers behind the stage.
   Subtle. Each layer adds a small amount of dimension so the
   page feels like a lit room rather than a flat document.
   ============================================================ */

/* Soft, painterly ambient lighting — multiple radial pools
   of warm gold + cool deep blue feeding the dark base. */
.host-stage__ambient[b-fnl4ppp8ud] {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 78% 45%, rgba(255, 215, 0, 0.18) 0%, rgba(255, 215, 0, 0.08) 30%, rgba(255, 215, 0, 0.02) 60%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 18% 25%, rgba(86, 64, 156, 0.28) 0%, rgba(86, 64, 156, 0.12) 35%, rgba(86, 64, 156, 0.03) 65%, transparent 100%),
        radial-gradient(ellipse 65% 50% at 50% 110%, rgba(214, 198, 140, 0.10) 0%, rgba(214, 198, 140, 0.03) 50%, transparent 100%);
    /* Slow drift so the page breathes */
    animation: hostAmbientDrift-b-fnl4ppp8ud 20s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

@keyframes hostAmbientDrift-b-fnl4ppp8ud {
    0%   { transform: translate3d(-15%, -10%, 0) scale(1.1); }
    100% { transform: translate3d(15%, 12%, 0) scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    .host-stage__ambient[b-fnl4ppp8ud] { animation: none; }
}

/* High-frequency noise grain for texture. Scoped opacity so
   it never fights the content. SVG is inlined as data URI. */
.host-stage__noise[b-fnl4ppp8ud] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

/* Corner vignette draws focus toward the center stage. */
.host-stage__vignette[b-fnl4ppp8ud] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* Bottle staging — bigger painterly halo + faint pedestal
   shadow so the bottle reads as standing on a surface. */
.host-bottle__halo[b-fnl4ppp8ud] {
    position: absolute;
    inset: -55% -60% -50% -60%;
    background:
        radial-gradient(ellipse 50% 45% at 50% 45%, rgba(255, 215, 0, 0.22) 0%, rgba(255, 215, 0, 0.14) 22%, rgba(255, 215, 0, 0.06) 45%, rgba(255, 215, 0, 0.015) 70%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 40%, rgba(214, 198, 140, 0.10) 0%, rgba(214, 198, 140, 0.03) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(28px);
}

.host-bottle__pedestal[b-fnl4ppp8ud] {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -4%;
    height: 32px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 45%, transparent 75%);
    pointer-events: none;
    z-index: 1;
    filter: blur(6px);
}

/* Glassmorphism card behind the donut so it feels lifted. */
.host-donut-card[b-fnl4ppp8ud] {
    position: relative;
    padding: 24px;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(245, 230, 168, 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(255, 215, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Painterly halo behind the donut card — visual rhyme with the bottle halo. */
.host-donut-card__halo[b-fnl4ppp8ud] {
    position: absolute;
    inset: -70% -80% -70% -80%;
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(255, 215, 0, 0.16) 0%, rgba(255, 215, 0, 0.08) 25%, rgba(255, 215, 0, 0.025) 55%, transparent 100%);
    pointer-events: none;
    z-index: -1;
    filter: blur(28px);
}

/* Vote-arrived pulse — pure CSS, no JS. A keyed overlay element is mounted
   each time the count changes (Blazor @key); it runs the ring once on mount
   and is layered on top of the card so it doesn't interrupt anything. */
.host-donut-card__pulse-overlay[b-fnl4ppp8ud] {
    position: absolute;
    inset: -2px;
    border-radius: 30px;
    pointer-events: none;
    z-index: 5;
    border: 2px solid rgba(255, 215, 0, 0.85);
    opacity: 0;
    animation: hostDonutPulse-b-fnl4ppp8ud 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.host-donut-card__pulse-overlay[b-fnl4ppp8ud]::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(255, 215, 0, 0.55);
    opacity: 0;
    animation: hostDonutPulseRing-b-fnl4ppp8ud 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}

@keyframes hostDonutPulse-b-fnl4ppp8ud {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(255, 215, 0, 0.55),
            0 0 36px rgba(255, 215, 0, 0.45);
    }
    100% {
        opacity: 0;
        transform: scale(1.12);
        box-shadow:
            0 0 0 24px rgba(255, 215, 0, 0),
            0 0 64px rgba(255, 215, 0, 0);
    }
}

@keyframes hostDonutPulseRing-b-fnl4ppp8ud {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.22); }
}

/* Number bump — keyed span re-mounts on every new count and runs this once. */
.host-vote-count[b-fnl4ppp8ud] {
    display: inline-block;
    animation: hostVoteCountBump-b-fnl4ppp8ud 600ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
    will-change: transform;
}

@keyframes hostVoteCountBump-b-fnl4ppp8ud {
    0%   { transform: scale(0.78); filter: brightness(1.8) drop-shadow(0 0 16px rgba(255, 215, 0, 0.7)); }
    50%  { transform: scale(1.18); filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 215, 0, 0.45)); }
    100% { transform: scale(1);    filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .host-donut-card__pulse-overlay[b-fnl4ppp8ud],
    .host-donut-card__pulse-overlay[b-fnl4ppp8ud]::after,
    .host-vote-count[b-fnl4ppp8ud] { animation: none; opacity: 1; }
}

/* Make the donut ring track visible (faint warm tint instead of fully transparent)
   so the unfilled portion reads as a complete circle that's filling up. */
[b-fnl4ppp8ud] .host-donut .mud-progress-circular-circle.mud-progress-circular-circle-determinate {
    stroke: rgb(214, 198, 140);
}
[b-fnl4ppp8ud] .host-donut svg circle:first-child {
    stroke: rgba(214, 198, 140, 0.14);
}

/* Header gradient divider — soft fade-out edges instead of crisp line */
[b-fnl4ppp8ud] .host-header {
    position: relative;
}
[b-fnl4ppp8ud] .host-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(245, 230, 168, 0.22) 50%, transparent 100%);
    pointer-events: none;
}

/* Subtle accent line above the host controls — visual rhyme with the title accent bar. */
.host-controls-wrapper[b-fnl4ppp8ud] {
    background: linear-gradient(180deg, rgba(11, 11, 22, 0) 0%, rgba(255, 215, 0, 0.025) 55%, rgba(255, 215, 0, 0.05) 100%);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}

.host-controls-wrapper[b-fnl4ppp8ud]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.18) 50%, transparent 100%);
    pointer-events: none;
}

/* Description: subtle drop-cap (producer-tone) so body copy feels designed. */
[b-fnl4ppp8ud] .host-description::first-letter {
    color: rgba(255, 224, 130, 0.85);
    font-weight: 600;
    font-size: 1.15em;
    padding-right: 0.04em;
}

.prev-btn[b-fnl4ppp8ud] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Ensure Previous and Next buttons share the same minimum width */
.prev-btn[b-fnl4ppp8ud]  .nav-btn,
.next-btn[b-fnl4ppp8ud]  .mud-button-root {
    min-width: 130px;
}

.center-btns[b-fnl4ppp8ud] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.next-btn[b-fnl4ppp8ud] {
    margin-left: auto;
}

/* Mobile layout: Previous and Next on first row, action buttons below */
@media (max-width: 959.95px) {
    /* Hide the desktop fullscreen icon — we don't show the fullscreen toggle
       on mobile at all. */
    .fullscreen-desktop-slot[b-fnl4ppp8ud] {
        display: none;
    }

    .host-controls-grid[b-fnl4ppp8ud] {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-areas: "prev center next";
        gap: 12px;
        position: static;
        align-items: center;
        justify-content: space-between;
    }

    .prev-btn[b-fnl4ppp8ud] {
        grid-area: prev;
        justify-self: start;
    }

    .next-btn[b-fnl4ppp8ud] {
        grid-area: next;
        justify-self: end;
        margin-left: 0;
        width: auto;
    }

    .host-controls-grid[b-fnl4ppp8ud]  .nav-btn {
        width: auto;
    }

    .center-btns[b-fnl4ppp8ud] {
        grid-area: center;
        position: static;
        transform: none;
        flex-direction: row;
        width: auto;
        max-width: none;
        justify-self: center;
        gap: 12px;
    }
    
    .center-btns[b-fnl4ppp8ud]  .mud-button {
        width: auto;
        min-width: unset;
    }
}

/* Mobile-only image - shown on mobile, hidden on desktop */
.host-mobile-image[b-fnl4ppp8ud] {
    display: flex;
    justify-content: center;
}

@media (min-width: 960px) {
    .host-mobile-image[b-fnl4ppp8ud] {
        display: none;
    }
}

/* Desktop-only image - hidden on mobile */
@media (max-width: 959.95px) {
    [b-fnl4ppp8ud] .host-desktop-image {
        display: none !important;
    }
}

/* Host control buttons — quiet glass chrome by default. Only the primary
   Reveal action carries warm gold so it reads as the single intended action. */
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn,
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn .mud-button-root {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%) !important;
    color: rgba(245, 230, 168, 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: 12px;
    padding: 8px 18px;
    border: 1px solid rgba(245, 230, 168, 0.14) !important;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: color 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out;
    text-transform: none;
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn:hover {
    color: #FFE082 !important;
    border-color: rgba(245, 230, 168, 0.28) !important;
    background: linear-gradient(145deg, rgba(255, 224, 130, 0.08) 0%, rgba(255, 224, 130, 0.02) 100%) !important;
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn.mud-button-disabled,
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn:disabled {
    color: rgba(245, 230, 168, 0.3) !important;
    border-color: rgba(245, 230, 168, 0.08) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.005) 100%) !important;
}

/* Primary action variant (Reveal Results / Reveal Quiz Results) — quiet by
   default, just slightly warmer cream tint than the nav buttons. Stays calm
   while the room is still voting; transforms into a confident gold CTA with
   expanding rings only once the donut crosses the 80% mark (--ready). */
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--primary {
    color: #FFE082 !important;
    border-color: rgba(245, 230, 168, 0.22) !important;
    background: linear-gradient(145deg, rgba(255, 224, 130, 0.06) 0%, rgba(255, 224, 130, 0.015) 100%) !important;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--primary:hover {
    color: #FFE082 !important;
    border-color: rgba(245, 230, 168, 0.4) !important;
    background: linear-gradient(145deg, rgba(255, 224, 130, 0.12) 0%, rgba(255, 224, 130, 0.04) 100%) !important;
}

/* Ready state — ≥80% have voted. Button blooms into solid gold and the
   warm color animates softly. Two expanding gold rings emanate outward,
   echoing the X/Y voted donut card pulse so the eye understands "go". */
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready {
    position: relative;
    overflow: visible;
    color: #0F0F1C !important;
    border-color: rgba(245, 230, 168, 0.5) !important;
    background: linear-gradient(145deg, #FFD700 0%, #E5B800 100%) !important;
    box-shadow:
        0 8px 18px -10px rgba(0, 0, 0, 0.5),
        0 0 18px rgba(255, 215, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    animation: hostRevealReadyTint-b-fnl4ppp8ud 2200ms ease-in-out infinite;
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready:hover {
    color: #0F0F1C !important;
    background: linear-gradient(145deg, #FFE082 0%, #E5B800 100%) !important;
    box-shadow:
        0 10px 22px -10px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(255, 215, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready::before,
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid rgba(255, 215, 0, 0.7);
    pointer-events: none;
    opacity: 0;
    animation: hostRevealReadyRing-b-fnl4ppp8ud 1800ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready::after {
    animation-delay: 900ms;
}

@keyframes hostRevealReadyTint-b-fnl4ppp8ud {
    0%, 100% {
        box-shadow:
            0 8px 18px -10px rgba(0, 0, 0, 0.5),
            0 0 18px rgba(255, 215, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }
    50% {
        box-shadow:
            0 10px 24px -10px rgba(0, 0, 0, 0.55),
            0 0 40px rgba(255, 215, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.36);
    }
}

@keyframes hostRevealReadyRing-b-fnl4ppp8ud {
    0% {
        transform: scale(1);
        opacity: 0.8;
        border-width: 2px;
    }
    80% {
        opacity: 0;
    }
    100% {
        transform: scale(1.45);
        opacity: 0;
        border-width: 1px;
    }
}

/* Complete variant — quiet outlined treatment with warm amber accent. Stays
   unobtrusive until the host is actually ready to finish. */
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--complete {
    background: linear-gradient(145deg, rgba(255, 210, 125, 0.06) 0%, rgba(201, 122, 43, 0.02) 100%) !important;
    color: #FFD27D !important;
    border: 1px solid rgba(255, 210, 125, 0.32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--complete:hover {
    color: #FFE2A8 !important;
    border-color: rgba(255, 210, 125, 0.5) !important;
    background: linear-gradient(145deg, rgba(255, 210, 125, 0.12) 0%, rgba(201, 122, 43, 0.04) 100%) !important;
}

/* Fullscreen icon button — same glass-chrome recipe as the nav buttons. */
.host-controls-grid[b-fnl4ppp8ud]  .host-fullscreen-btn {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%) !important;
    color: rgba(245, 230, 168, 0.7) !important;
    border: 1px solid rgba(245, 230, 168, 0.14) !important;
    border-radius: 12px;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: color 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out;
}

.host-controls-grid[b-fnl4ppp8ud]  .host-fullscreen-btn:hover {
    color: #FFE082 !important;
    border-color: rgba(245, 230, 168, 0.28) !important;
    background: linear-gradient(145deg, rgba(255, 224, 130, 0.08) 0%, rgba(255, 224, 130, 0.02) 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
    .host-controls-grid[b-fnl4ppp8ud]  .host-control-btn,
    .host-controls-grid[b-fnl4ppp8ud]  .host-fullscreen-btn {
        transition: none;
    }
    .host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready,
    .host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready::before,
    .host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready::after {
        animation: none;
    }
}

/* Beverage entrance animation - keyed on item id via @key so it replays per beverage */
[b-fnl4ppp8ud] .host-item-enter {
    animation: hostItemFadeIn-b-fnl4ppp8ud 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hostItemFadeIn-b-fnl4ppp8ud {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-fnl4ppp8ud] .host-item-enter {
        animation: none;
    }
}

/* ============================================================
   Reveal panel — lives in the LEFT column under the producer/eyebrow
   when the host has revealed results, so the bottle image on the
   right stays visible. Brand-aligned hero score + single radar.
   ============================================================ */

[b-fnl4ppp8ud] .host-reveal-panel {
    position: relative;
    margin-top: clamp(16px, 2vh, 24px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Reserve a bit of room for rim labels (Appearance / Mouthfeel / etc.)
       which render OUTSIDE the SVG bounds via overflow: visible. Kept
       tighter so the polygon fills the right column. */
    padding: 0 clamp(28px, 3.5vw, 56px);
    box-sizing: border-box;
    animation: host-reveal-enter-b-fnl4ppp8ud 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[b-fnl4ppp8ud] .host-reveal-panel__chart {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    max-width: clamp(220px, 50vw, 760px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-fnl4ppp8ud] .host-reveal-panel__chart-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the chart's own SVG fills the inner wrapper. MudChart writes the
   svg with width/height attributes set from MatchBoundsToSize, but only if
   the surrounding div has a measurable size. */
[b-fnl4ppp8ud] .host-reveal-panel__chart-inner .radar-chart-shell,
[b-fnl4ppp8ud] .host-reveal-panel__chart-inner .mud-chart {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
}

[b-fnl4ppp8ud] .host-reveal-panel__chart-inner svg {
    width: 100% !important;
    height: 100% !important;
}

/* Hide the MudChart legend entirely — both the label text and its colored
   dot marker, which would otherwise bleed onto the score readout below. */
[b-fnl4ppp8ud] .host-reveal-panel .mud-chart-legend,
[b-fnl4ppp8ud] .host-reveal-panel .mud-chart-legend-item {
    display: none !important;
}

/* The warm-gold halo that used to sit behind the bottle now backs the
   radar chart — the chart is the new star of the right reveal moment. */
[b-fnl4ppp8ud] .host-reveal-panel__halo {
    position: absolute;
    inset: -18% -18% -18% -18%;
    background:
        radial-gradient(ellipse 50% 45% at 50% 50%, rgba(255, 215, 0, 0.22) 0%, rgba(255, 215, 0, 0.14) 22%, rgba(255, 215, 0, 0.06) 45%, rgba(255, 215, 0, 0.015) 70%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 50%, rgba(214, 198, 140, 0.10) 0%, rgba(214, 198, 140, 0.03) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(36px);
}

/* Override the chart's grid + axis colors so the polygon, gridlines and
   axis labels all share the producer-tone gold. */
[b-fnl4ppp8ud] .host-reveal-panel__chart svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Grid + axis lines */
[b-fnl4ppp8ud] .host-reveal-panel__chart .mud-charts-grid line,
[b-fnl4ppp8ud] .host-reveal-panel__chart .mud-charts-grid path,
[b-fnl4ppp8ud] .host-reveal-panel__chart .mud-charts-grid polygon {
    stroke: rgba(255, 224, 130, 0.85) !important;
    fill: none !important;
}

/* Axis labels (Aroma / Taste / Mouthfeel / etc.) */
[b-fnl4ppp8ud] .host-reveal-panel__chart text {
    fill: rgba(255, 224, 130, 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.6vw, 22px) !important;
    letter-spacing: 0.02em;
}

/* Score readout living under the bottle image. */
[b-fnl4ppp8ud] .host-reveal-score {
    text-align: center;
    margin-top: clamp(20px, 3vh, 32px);
    animation: host-reveal-enter-b-fnl4ppp8ud 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[b-fnl4ppp8ud] .host-reveal-score__eyebrow {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245, 230, 168, 0.55);
    margin-bottom: 6px;
}

[b-fnl4ppp8ud] .host-reveal-score__readout {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    line-height: 0.96;
}

[b-fnl4ppp8ud] .host-reveal-score__value {
    font-weight: 900;
    font-size: clamp(3rem, 5.5vw, 4.6rem);
    letter-spacing: -0.035em;
    color: #FFD700;
    text-shadow: 0 0 56px rgba(255, 215, 0, 0.32);
    animation: host-reveal-pop-b-fnl4ppp8ud 720ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}

[b-fnl4ppp8ud] .host-reveal-score__meta {
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: rgba(245, 230, 168, 0.55);
}

/* Strip the duplicate score caption rendered by LiveFeedbackResults
   (our hero readout under the image owns it now). Handled by the
   .mud-chart-legend rule above. */

@keyframes host-reveal-enter-b-fnl4ppp8ud {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes host-reveal-pop-b-fnl4ppp8ud {
    0%   { opacity: 0; transform: scale(0.7); filter: blur(6px); }
    70%  { opacity: 1; transform: scale(1.04); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    [b-fnl4ppp8ud] .host-reveal-panel,
    [b-fnl4ppp8ud] .host-reveal-panel__value { animation: none; }
}
/* /Components/Pages/Results.razor.rz.scp.css */
/* ============================================================================
   Results page — brand-aligned podium + leaderboard + quiz recap.

   Star of the show: the rank-1 podium card (gold halo + glass surface).
   Visual rhyming: hero accent bar + podium halos + scoreboard borders all
   echo the same gold/cream alpha vocabulary used elsewhere in the app.
   Depth: page-level ambient + noise + vignette stack mirrors Host/Join.

   Overflow rules:
   - Hero wrapper does NOT clip (was previously max-height: 90vh; overflow:hidden
     which clipped the rank-1 elevator translate on shorter laptops).
   - Podium row sizes from content; elevator translate is absorbed by padding-top.
   - All long item names use clamp + balance + overflow-wrap to never escape.
   ============================================================================ */

/* -------- Page depth stage --------------------------------------------- */
.results-stage[b-lzxdkti7e2] {
    position: relative;
    min-height: 100vh;
    background: #0B0B16;
    /* Clip both axes. max-width pins the stage to the viewport on mobile so
       off-stage podium columns at translateX(120%) cannot push horizontal
       page width. */
    overflow: hidden;
    max-width: 100vw;
}

.results-stage__content[b-lzxdkti7e2] {
    position: relative;
    z-index: 1;
}

.results-stage__ambient[b-lzxdkti7e2] {
    /* Fixed (not absolute) so the animated scale/translate is clipped by the
       viewport instead of extending the document height — otherwise the page
       scrollbar thumb oscillates in time with the 22s drift animation. */
    position: fixed;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 78% 25%, rgba(255, 215, 0, 0.18) 0%, rgba(255, 215, 0, 0.08) 30%, rgba(255, 215, 0, 0.02) 60%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 18% 18%, rgba(86, 64, 156, 0.28) 0%, rgba(86, 64, 156, 0.12) 35%, rgba(86, 64, 156, 0.03) 65%, transparent 100%),
        radial-gradient(ellipse 65% 50% at 50% 105%, rgba(214, 198, 140, 0.10) 0%, rgba(214, 198, 140, 0.03) 50%, transparent 100%);
    animation: resultsAmbientDrift-b-lzxdkti7e2 22s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

@keyframes resultsAmbientDrift-b-lzxdkti7e2 {
    0%   { transform: translate3d(-12%, -8%, 0) scale(1.10); }
    100% { transform: translate3d(12%, 10%, 0) scale(1.22); }
}

.results-stage__noise[b-lzxdkti7e2] {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

.results-stage__vignette[b-lzxdkti7e2] {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .results-stage__ambient[b-lzxdkti7e2] { animation: none; }
}

/* -------- Loading -------------------------------------------------------- */
.loading-state[b-lzxdkti7e2] {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: rgba(245, 230, 168, 0.7);
}

/* -------- Hero ---------------------------------------------------------- */
.hero-wrapper[b-lzxdkti7e2] {
    position: relative;
    width: min(1800px, 96vw);
    margin: 0 auto;
    padding: clamp(2.4rem, 5vh, 4.5rem) clamp(1.2rem, 4vw, 4rem) clamp(2.4rem, 4vh, 4rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Explicit starting max-height is required for the collapse transition to
       interpolate. `auto` cannot be animated. 4000px easily fits the podium
       on any viewport without clipping. */
    max-height: 4000px;
    transform-origin: top center;
    /* Two staged transitions:
       • Visual fade (opacity / transform / blur) runs first — 1100ms.
       • Layout collapse (max-height / padding / margin) is delayed so the
         page doesn't snap up while the podium is still visible. */
    transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 1100ms cubic-bezier(0.22, 1, 0.36, 1),
                max-height 900ms cubic-bezier(0.22, 1, 0.36, 1) 700ms,
                padding 900ms cubic-bezier(0.22, 1, 0.36, 1) 700ms,
                margin 900ms cubic-bezier(0.22, 1, 0.36, 1) 700ms;
    will-change: opacity, transform, filter, max-height;
}

.hero-wrapper.hero-hidden[b-lzxdkti7e2] {
    opacity: 0;
    transform: translateY(-32px) scale(0.96);
    filter: blur(6px);
    pointer-events: none;
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0 auto;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .hero-wrapper[b-lzxdkti7e2] { transition: opacity 250ms linear, max-height 250ms linear; }
    .hero-wrapper.hero-hidden[b-lzxdkti7e2] { transform: none; filter: none; }
}

.results-hero[b-lzxdkti7e2] {
    text-align: center;
    container-type: inline-size;
    container-name: results-hero;
    margin-bottom: clamp(1rem, 2vh, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.results-hero__eyebrow[b-lzxdkti7e2] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: clamp(0.78rem, 1cqi, 0.95rem);
    font-weight: 700;
    color: rgba(245, 230, 168, 0.55);
    font-family: 'Inter', 'Montserrat', sans-serif;
    margin-bottom: 14px;
}

.results-hero__eyebrow-dot[b-lzxdkti7e2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFD700;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.7);
    animation: resultsDotPulse-b-lzxdkti7e2 2.4s ease-in-out infinite;
}

@keyframes resultsDotPulse-b-lzxdkti7e2 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.8; }
}

/* MudText emits its own h1; ::deep is required so this scoped rule applies. */
[b-lzxdkti7e2] .tasting-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.035em !important;
    line-height: 0.98 !important;
    color: #FFD700 !important;
    font-size: clamp(2.6rem, 11cqi, 6rem) !important;
    text-shadow: 0 0 60px rgba(255, 215, 0, 0.30), 0 8px 28px rgba(0, 0, 0, 0.55);
    text-wrap: balance;
    overflow-wrap: anywhere;
    max-width: 22ch;
    margin: 0 !important;
    text-transform: none !important;
}

[b-lzxdkti7e2] .tasting-title.tasting-title--mid {
    font-size: clamp(2.2rem, 9.5cqi, 4.4rem) !important;
    line-height: 1.02 !important;
}
[b-lzxdkti7e2] .tasting-title.tasting-title--long {
    font-size: clamp(1.9rem, 8cqi, 3.6rem) !important;
    line-height: 1.06 !important;
}
[b-lzxdkti7e2] .tasting-title.tasting-title--xlong {
    font-size: clamp(1.6rem, 6.5cqi, 2.8rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
}

.results-hero__accent[b-lzxdkti7e2] {
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #FFD700, rgba(255, 215, 0, 0.3));
    margin-top: 22px;
}

@media (prefers-reduced-motion: reduce) {
    .results-hero__eyebrow-dot[b-lzxdkti7e2] { animation: none; }
}

/* -------- Podium -------------------------------------------------------- */
.podium-wrapper[b-lzxdkti7e2] {
    position: relative;
    margin-top: clamp(2.5rem, 5vh, 5rem);
    /* leave room above for the rank-1 elevator translate (-90px) */
    padding-top: clamp(60px, 10vh, 110px);
    width: min(1500px, 94vw);
    margin-left: auto;
    margin-right: auto;
}

.podium-halo[b-lzxdkti7e2] {
    position: absolute;
    left: 50%;
    top: 12%;
    width: clamp(420px, 50%, 720px);
    height: clamp(360px, 60%, 640px);
    transform: translateX(-50%);
    background: radial-gradient(ellipse 50% 45% at 50% 45%, rgba(255, 215, 0, 0.22) 0%, rgba(255, 215, 0, 0.10) 28%, rgba(255, 215, 0, 0.03) 55%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(30px);
    /* Stay hidden until at least one podium column has revealed — otherwise
       a lone gold blob hovers in the middle of the screen during the wait. */
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.podium-wrapper:has(.podium-column.revealed) .podium-halo[b-lzxdkti7e2] {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .podium-halo[b-lzxdkti7e2] { transition: none; }
}

.podium-grid[b-lzxdkti7e2] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: clamp(1rem, 1.8vw, 2.4rem);
    align-items: end;
}

.podium-column[b-lzxdkti7e2] {
    position: relative;
    padding-bottom: clamp(2rem, 4vh, 3.5rem);
    overflow: visible;
    --podium-elevation: 0px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    min-width: 0;
}

.podium-column.revealed[b-lzxdkti7e2] {
    opacity: 1;
    pointer-events: auto;
}

.podium-column.empty-slot[b-lzxdkti7e2] {
    visibility: hidden;
    pointer-events: none;
}

/* Per-rank elevation: rank-1 lifts highest, rank-2 mid, rank-3 lowest. */
.podium-column.rank-1[b-lzxdkti7e2] { --podium-elevation: -56px; }
.podium-column.rank-2[b-lzxdkti7e2] { --podium-elevation: 18px; }
.podium-column.rank-3[b-lzxdkti7e2] { --podium-elevation: 50px; }

.podium-elevator[b-lzxdkti7e2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transform: translateY(140%);
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
    min-width: 0;
}

.podium-column.revealed .podium-elevator[b-lzxdkti7e2] {
    transform: translateY(var(--podium-elevation));
    filter: drop-shadow(0 28px 54px rgba(9, 6, 25, 0.55));
}

@media (prefers-reduced-motion: reduce) {
    .podium-elevator[b-lzxdkti7e2] { transition: opacity 0.4s ease; transform: none; }
    .podium-column.revealed .podium-elevator[b-lzxdkti7e2] { transform: none; }
}

/* Glass card recipe shared with the rest of the app, tinted per rank. */
.podium-stage[b-lzxdkti7e2] {
    position: relative;
    padding: clamp(1.4rem, 2.4vw, 2.4rem) clamp(1.2rem, 2vw, 2rem) clamp(1.4rem, 2vw, 2rem);
    border-radius: 26px 26px 18px 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.018) 100%);
    border: 1px solid rgba(245, 230, 168, 0.18);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.7rem, 1.2vw, 1.1rem);
    text-align: center;
    overflow: hidden;
    min-width: 0;
    width: 100%;
}

.podium-stage__halo[b-lzxdkti7e2] {
    position: absolute;
    inset: -55% -65% -55% -65%;
    pointer-events: none;
    z-index: -1;
    filter: blur(28px);
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(255, 215, 0, 0.16) 0%, rgba(255, 215, 0, 0.06) 30%, transparent 65%);
}

/* Rank tinting — gold for #1, cream for #2, bronze for #3, all in brand alpha. */
.podium-stage.podium-rank-1[b-lzxdkti7e2] {
    border-color: rgba(255, 215, 0, 0.42);
    box-shadow: 0 36px 80px -22px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 80px rgba(255, 215, 0, 0.12);
}
.podium-stage.podium-rank-1 .podium-stage__halo[b-lzxdkti7e2] {
    background: radial-gradient(ellipse 50% 45% at 50% 45%, rgba(255, 215, 0, 0.30) 0%, rgba(255, 215, 0, 0.12) 28%, rgba(255, 215, 0, 0.03) 55%, transparent 100%);
}
/* Silver lighting for rank-2 (cool platinum, brand-tinted). */
.podium-stage.podium-rank-2[b-lzxdkti7e2] {
    border-color: rgba(207, 217, 232, 0.40);
    box-shadow: 0 32px 70px -22px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 60px rgba(207, 217, 232, 0.10);
}
.podium-stage.podium-rank-2 .podium-stage__halo[b-lzxdkti7e2] {
    background:
        radial-gradient(ellipse 50% 45% at 50% 45%, rgba(214, 222, 240, 0.28) 0%, rgba(207, 217, 232, 0.12) 28%, rgba(207, 217, 232, 0.03) 55%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 40%, rgba(180, 195, 220, 0.10) 0%, rgba(180, 195, 220, 0.03) 50%, transparent 100%);
}

/* Bronze lighting for rank-3 (warm copper). */
.podium-stage.podium-rank-3[b-lzxdkti7e2] {
    border-color: rgba(214, 165, 100, 0.40);
    box-shadow: 0 32px 70px -22px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 60px rgba(214, 165, 100, 0.10);
}
.podium-stage.podium-rank-3 .podium-stage__halo[b-lzxdkti7e2] {
    background:
        radial-gradient(ellipse 50% 45% at 50% 45%, rgba(214, 165, 100, 0.28) 0%, rgba(196, 138, 78, 0.12) 28%, rgba(196, 138, 78, 0.03) 55%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 40%, rgba(170, 110, 60, 0.10) 0%, rgba(170, 110, 60, 0.03) 50%, transparent 100%);
}

/* Rank-1 stage is taller than the others to anchor the eye. Heights use min()
   so the cards never get *taller* than the viewport allows, regardless of
   aspect ratio. On 21:9 (short + wide) we collapse to vh; on 4:3 (tall) we
   collapse to vw so the columns stay legible. */
.podium-column.rank-1 .podium-stage[b-lzxdkti7e2] { min-height: min(clamp(340px, 46vh, 480px), 38vw); }
.podium-column.rank-2 .podium-stage[b-lzxdkti7e2] { min-height: min(clamp(300px, 40vh, 420px), 34vw); }
.podium-column.rank-3 .podium-stage[b-lzxdkti7e2] { min-height: min(clamp(280px, 36vh, 380px), 31vw); }

/* -------- Aspect-ratio fitting ------------------------------------------ */
/* Short / wide viewports (21:9 ultrawide laptops) — pull the podium in
   visually instead of letting it stretch all the way to 1500px, and shrink
   the rank-1 elevation so the card doesn't punch into the hero text. */
@media (min-aspect-ratio: 16/9) and (min-width: 1024px) {
    .podium-wrapper[b-lzxdkti7e2] { width: min(1300px, 88vw); }
    .podium-column.rank-1[b-lzxdkti7e2] { --podium-elevation: -36px; }
    .hero-wrapper[b-lzxdkti7e2] { padding-top: clamp(1.6rem, 3vh, 3rem); padding-bottom: clamp(1.6rem, 3vh, 3rem); }
    .results-hero[b-lzxdkti7e2] { margin-bottom: clamp(0.8rem, 1.5vh, 1.6rem); }
    .podium-wrapper[b-lzxdkti7e2] { padding-top: clamp(40px, 6vh, 80px); margin-top: clamp(1.2rem, 3vh, 3rem); }
}

/* Tall viewports (4:3, portrait laptops, scaled tablets) — give cards more
   air at the top and shrink the platform so the layout doesn't look squat. */
@media (max-aspect-ratio: 5/4) and (min-width: 700px) {
    .podium-wrapper[b-lzxdkti7e2] { width: min(960px, 90vw); }
    .podium-column.rank-1 .podium-stage[b-lzxdkti7e2] { min-height: min(420px, 32vh); }
    .podium-column.rank-2 .podium-stage[b-lzxdkti7e2] { min-height: min(360px, 28vh); }
    .podium-column.rank-3 .podium-stage[b-lzxdkti7e2] { min-height: min(340px, 26vh); }
}

/* Subtle slow lift for the empty card (no scale overshoot — sub-elements
   stage in next, so the stage itself stays calm). */
.podium-column.revealed .podium-stage[b-lzxdkti7e2] {
    animation: podium-rise-b-lzxdkti7e2 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes podium-rise-b-lzxdkti7e2 {
    0%   { transform: translateY(36px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .podium-column.revealed .podium-stage[b-lzxdkti7e2] { animation: none; }
}

/* -------- Staged podium sub-reveal -------------------------------------- */
/* Each child of .podium-stage starts hidden and animates in with a delay
   keyed on its position in the reveal sequence. The sequence is:
     0ms       card lifts in (handled by .podium-stage above, ~900ms)
     900ms     points appear + count-up begins (JS-driven via tasteParty.countUpPodium)
     1700ms    image + medal fade in
     2200ms    label fades in
     2500ms    caption fades in
     2800ms    rank-tinted halo blooms
   Total settle: ~3300ms per rank. */

/* MudText labels are scoped behind ::deep because MudText emits its own DOM. */
.podium-image-container[b-lzxdkti7e2],
[b-lzxdkti7e2] .podium-stage .podium-medal,
[b-lzxdkti7e2] .podium-stage .podium-label,
[b-lzxdkti7e2] .podium-stage .podium-caption,
.podium-stage .podium-points[b-lzxdkti7e2] {
    opacity: 0;
    transform: translateY(8px);
    transition: none;
}

/* Halo defaults to hidden so it cannot leak before the label arrives. */
.podium-stage__halo[b-lzxdkti7e2] {
    opacity: 0;
    transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.podium-column.revealed .podium-points[b-lzxdkti7e2] {
    animation: podiumChildIn-b-lzxdkti7e2 600ms cubic-bezier(0.22, 1, 0.36, 1) 900ms both;
}
.podium-column.revealed .podium-image-container[b-lzxdkti7e2] {
    animation: podiumChildIn-b-lzxdkti7e2 700ms cubic-bezier(0.22, 1, 0.36, 1) 1700ms both;
}
.podium-column.revealed[b-lzxdkti7e2]  .podium-stage .podium-medal {
    animation: podiumMedalIn-b-lzxdkti7e2 600ms cubic-bezier(0.22, 1, 0.36, 1) 1900ms both;
}
.podium-column.revealed[b-lzxdkti7e2]  .podium-stage .podium-label {
    animation: podiumChildIn-b-lzxdkti7e2 600ms cubic-bezier(0.22, 1, 0.36, 1) 2200ms both;
}
.podium-column.revealed[b-lzxdkti7e2]  .podium-stage .podium-caption {
    animation: podiumChildIn-b-lzxdkti7e2 600ms cubic-bezier(0.22, 1, 0.36, 1) 2500ms both;
}
.podium-column.revealed .podium-stage__halo[b-lzxdkti7e2] {
    opacity: 1;
    transition-delay: 2800ms;
}
.podium-column.rank-1.revealed .podium-stage__halo[b-lzxdkti7e2] {
    transition-delay: 3000ms;
}

@keyframes podiumChildIn-b-lzxdkti7e2 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes podiumMedalIn-b-lzxdkti7e2 {
    0%   { opacity: 0; transform: scale(0.6) rotate(-12deg); }
    60%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .podium-image-container[b-lzxdkti7e2],
    [b-lzxdkti7e2] .podium-stage .podium-medal,
    [b-lzxdkti7e2] .podium-stage .podium-label,
    [b-lzxdkti7e2] .podium-stage .podium-caption,
    .podium-stage .podium-points[b-lzxdkti7e2] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .podium-stage__halo[b-lzxdkti7e2] { opacity: 1 !important; transition: none !important; }
}

/* -------- Custom podium points readout (replaces MudChip) --------------- */
.podium-points[b-lzxdkti7e2] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.18);
    border: 1px solid rgba(255, 215, 0, 0.35);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    color: #FFD700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.podium-points__value[b-lzxdkti7e2] {
    font-weight: 800;
    font-size: 1.18em;
    color: #FFD700;
    min-width: 2.2ch;
    text-align: right;
}

.podium-points__sep[b-lzxdkti7e2] {
    color: rgba(245, 230, 168, 0.55);
    margin: 0 0.05em;
}

.podium-points__max[b-lzxdkti7e2] {
    color: rgba(255, 224, 130, 0.85);
}

.podium-points__unit[b-lzxdkti7e2] {
    margin-left: 0.25em;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(245, 230, 168, 0.55);
    font-weight: 700;
}

/* Silver tinting for rank-2 chip. */
.podium-stage.podium-rank-2 .podium-points[b-lzxdkti7e2] {
    background: rgba(207, 217, 232, 0.16);
    border-color: rgba(207, 217, 232, 0.40);
    color: rgba(214, 222, 240, 0.95);
}
.podium-stage.podium-rank-2 .podium-points__value[b-lzxdkti7e2] { color: rgba(230, 236, 246, 1); }
.podium-stage.podium-rank-2 .podium-points__max[b-lzxdkti7e2] { color: rgba(214, 222, 240, 0.85); }

/* Bronze tinting for rank-3 chip. */
.podium-stage.podium-rank-3 .podium-points[b-lzxdkti7e2] {
    background: rgba(214, 165, 100, 0.16);
    border-color: rgba(214, 165, 100, 0.40);
    color: rgba(232, 192, 138, 0.95);
}
.podium-stage.podium-rank-3 .podium-points__value[b-lzxdkti7e2] { color: rgba(248, 210, 158, 1); }
.podium-stage.podium-rank-3 .podium-points__max[b-lzxdkti7e2] { color: rgba(232, 192, 138, 0.85); }

.podium-platform[b-lzxdkti7e2] {
    margin-top: -16px;
    width: 88%;
    height: 36px;
    border-radius: 0 0 28px 28px;
    background: linear-gradient(180deg, rgba(11, 11, 22, 0.85) 0%, rgba(11, 11, 22, 0.4) 100%);
    border: 1px solid rgba(245, 230, 168, 0.10);
    border-top: none;
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.45);
    align-self: center;
}

.podium-platform.podium-rank-1[b-lzxdkti7e2] { box-shadow: 0 26px 48px rgba(255, 215, 0, 0.10), 0 22px 40px rgba(0, 0, 0, 0.5); }

.podium-medal[b-lzxdkti7e2] {
    font-size: clamp(2rem, 3.5vw, 3rem);
    filter: drop-shadow(0 8px 16px rgba(255, 215, 0, 0.5));
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 2;
}

.podium-image-container[b-lzxdkti7e2] {
    position: relative;
    display: inline-block;
    width: 78%;
    max-width: clamp(160px, 18vw, 260px);
    aspect-ratio: 1;
    flex-shrink: 0;
}

.podium-beverage-image[b-lzxdkti7e2] {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(245, 230, 168, 0.10);
}

/* Star item label — clamps text and never escapes the card. MudText emits a
   <p> inside its own component scope, so the bare class doesn't reach without
   ::deep. The bare rule is kept too for non-MudText nodes (e.g. placeholder). */
.podium-label[b-lzxdkti7e2],
[b-lzxdkti7e2] .podium-label {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    color: #FFD700 !important;
    letter-spacing: -0.01em !important;
    font-size: clamp(1.2rem, 2vw, 1.9rem) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    max-width: 100%;
    text-wrap: balance;
    overflow-wrap: anywhere;
    hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.podium-stage.podium-rank-2 .podium-label[b-lzxdkti7e2],
.podium-stage.podium-rank-2[b-lzxdkti7e2]  .podium-label,
.podium-stage.podium-rank-3 .podium-label[b-lzxdkti7e2],
.podium-stage.podium-rank-3[b-lzxdkti7e2]  .podium-label {
    color: rgba(255, 224, 130, 0.95) !important;
}

.podium-caption[b-lzxdkti7e2],
[b-lzxdkti7e2] .podium-caption {
    color: rgba(207, 199, 181, 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    max-width: 100%;
    text-wrap: balance;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.podium-stage .mud-chip-root[b-lzxdkti7e2] {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem) !important;
    padding: 0.55rem 1.4rem !important;
    border-radius: 999px !important;
    background: rgba(255, 215, 0, 0.18) !important;
    color: #FFD700 !important;
    border: 1px solid rgba(255, 215, 0, 0.35) !important;
    font-variant-numeric: tabular-nums;
}

.podium-placeholder[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: rgba(245, 230, 168, 0.55);
}

.podium-placeholder .mud-icon-root[b-lzxdkti7e2] {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    color: rgba(245, 230, 168, 0.45);
}

/* -------- Leaderboard -------------------------------------------------- */
.leaderboard-showcase[b-lzxdkti7e2] {
    margin: clamp(3rem, 6vh, 6rem) auto clamp(2rem, 4vh, 4rem);
    max-width: min(1250px, 92vw);
    padding: clamp(2rem, 3.6vw, 3.4rem) clamp(1.4rem, 3.4vw, 3.2rem) clamp(2.4rem, 4vw, 4rem);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.012) 100%);
    border: 1px solid rgba(245, 230, 168, 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.leaderboard-showcase.lb-hidden[b-lzxdkti7e2] {
    /* Take it out of layout entirely so the page only scrolls the podium
       during the reveal. The class flip will trigger lbEnter on becoming visible. */
    display: none;
}

.leaderboard-showcase.lb-visible[b-lzxdkti7e2] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    margin-top: clamp(2rem, 4vh, 3.5rem);
    animation: lbEnter-b-lzxdkti7e2 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lbEnter-b-lzxdkti7e2 {
    from { opacity: 0; transform: translateY(56px) scale(0.985); filter: blur(6px); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .leaderboard-showcase.lb-visible[b-lzxdkti7e2] { animation: none; }
}

.leaderboard-header[b-lzxdkti7e2] {
    text-align: center;
    margin-bottom: clamp(1.6rem, 2.6vh, 2.4rem);
}

[b-lzxdkti7e2] .leaderboard-header .mud-typography {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    color: #FFD700 !important;
    letter-spacing: -0.025em !important;
    font-size: clamp(2rem, 4.6vw, 3.4rem) !important;
    text-shadow: 0 0 56px rgba(255, 215, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.5);
    text-transform: none !important;
}

.leaderboard-header[b-lzxdkti7e2]::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #FFD700, rgba(255, 215, 0, 0.3));
    margin: 14px auto 0;
}

.leaderboard-list[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 1.4vw, 1.4rem);
}

/* Individual scoreboard rows are self-contained glass cards. */
.scoreboard-row[b-lzxdkti7e2] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.9rem);
    padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.8rem);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.018) 100%);
    border: 1px solid rgba(245, 230, 168, 0.14);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    color: rgba(245, 230, 168, 0.92);
}

.scoreboard-row:hover[b-lzxdkti7e2] {
    transform: translateY(-4px);
    box-shadow: 0 28px 58px -22px rgba(0, 0, 0, 0.65);
    border-color: rgba(245, 230, 168, 0.22);
}

.leaderboard-first[b-lzxdkti7e2] {
    border-color: rgba(255, 215, 0, 0.45);
    /* Subtler gradient than before — the earlier 0.10 → 0.02 wash painted the
       whole card amber-on-amber and read as muddy. Pull the warm tint back to
       the left edge only and let the dark base show through on the right. */
    background: linear-gradient(105deg, rgba(255, 215, 0, 0.10) 0%, rgba(255, 215, 0, 0.025) 35%, rgba(255, 255, 255, 0.022) 100%);
    /* Outer warm glow bleeds into the page stage so the row's edges feel
       lit-from-within rather than terminating with a hard rounded rectangle.
       Layer order: deep grounding shadow + wide soft gold spill + tight inner
       highlight. */
    box-shadow:
        0 24px 48px -22px rgba(0, 0, 0, 0.6),
        0 0 80px -10px rgba(255, 215, 0, 0.22),
        0 0 160px -40px rgba(255, 215, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.leaderboard-first[b-lzxdkti7e2]::before {
    /* Gold left-edge accent rhymes with the title accent bar. */
    content: "";
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #FFD700, rgba(255, 215, 0, 0.4));
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}
.leaderboard-second[b-lzxdkti7e2] {
    border-color: rgba(207, 217, 232, 0.32);
    background: linear-gradient(105deg, rgba(207, 217, 232, 0.08) 0%, rgba(207, 217, 232, 0.02) 35%, rgba(255, 255, 255, 0.018) 100%);
}
.leaderboard-second[b-lzxdkti7e2]::before {
    content: "";
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, rgba(214, 222, 240, 0.85), rgba(207, 217, 232, 0.3));
}
.leaderboard-third[b-lzxdkti7e2] {
    border-color: rgba(214, 165, 100, 0.32);
    background: linear-gradient(105deg, rgba(214, 165, 100, 0.08) 0%, rgba(214, 165, 100, 0.02) 35%, rgba(255, 255, 255, 0.018) 100%);
}
.leaderboard-third[b-lzxdkti7e2]::before {
    content: "";
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, rgba(232, 192, 138, 0.85), rgba(214, 165, 100, 0.3));
}

.scoreboard-main[b-lzxdkti7e2] {
    display: grid;
    grid-template-columns: clamp(72px, 9vw, 110px) minmax(0, 1fr) auto;
    gap: clamp(0.8rem, 1.6vw, 1.4rem);
    align-items: center;
    width: 100%;
    min-width: 0;
}

.scoreboard-image-container[b-lzxdkti7e2] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(64px, 8vw, 96px);
    height: clamp(64px, 8vw, 96px);
    flex-shrink: 0;
}

.scoreboard-medal[b-lzxdkti7e2] {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: clamp(1.5rem, 1.8vw, 2rem);
    font-weight: 700;
    z-index: 2;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
    line-height: 1;
}

.scoreboard-beverage-image[b-lzxdkti7e2] {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.scoreboard-body[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.6vw, 0.5rem);
    min-width: 0;
}

.scoreboard-name[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* BeverageScoreboardRow is a child component, so its MudText DOM lives in a
   separate scope — every text rule needs ::deep to reach it. */
[b-lzxdkti7e2] .scoreboard-name .mud-typography:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #FFD700 !important;
    letter-spacing: -0.015em !important;
    font-size: clamp(1.15rem, 1.7vw, 1.6rem) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-shadow: 0 0 24px rgba(255, 215, 0, 0.20);
    overflow-wrap: anywhere;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[b-lzxdkti7e2] .scoreboard-name .mud-typography:last-child {
    color: rgba(255, 224, 130, 0.78) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    opacity: 1 !important;
    overflow-wrap: anywhere;
}

.scoreboard-points[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    min-width: 0;
}

[b-lzxdkti7e2] .scoreboard-points .mud-typography:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    color: #FFD700 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em !important;
    font-size: clamp(1.4rem, 2vw, 2.1rem) !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-shadow: 0 0 24px rgba(255, 215, 0, 0.25);
}

[b-lzxdkti7e2] .scoreboard-points .mud-typography:nth-child(2) {
    color: rgba(245, 230, 168, 0.55) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    font-size: clamp(0.72rem, 0.95vw, 0.88rem) !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* Silver / bronze tinting for runner-up rows so the gold #1 actually pops. */
.leaderboard-second[b-lzxdkti7e2]  .scoreboard-points .mud-typography:first-child,
.leaderboard-second[b-lzxdkti7e2]  .scoreboard-name .mud-typography:first-child {
    color: rgba(230, 236, 246, 1) !important;
    text-shadow: 0 0 20px rgba(207, 217, 232, 0.2);
}
.leaderboard-third[b-lzxdkti7e2]  .scoreboard-points .mud-typography:first-child,
.leaderboard-third[b-lzxdkti7e2]  .scoreboard-name .mud-typography:first-child {
    color: rgba(248, 210, 158, 1) !important;
    text-shadow: 0 0 20px rgba(214, 165, 100, 0.2);
}

[b-lzxdkti7e2] .scoreboard-points .mud-button-root {
    margin-top: 8px;
    color: rgba(245, 230, 168, 0.7) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
}

[b-lzxdkti7e2] .scoreboard-points .mud-button-root:hover {
    color: #FFD700 !important;
    background: rgba(255, 215, 0, 0.06) !important;
}

.scoreboard-detail[b-lzxdkti7e2] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
    margin-top: 0.6rem;
    padding: 1.2rem 0 0.4rem;
    /* No divider — the row's background and the detail's halo should bleed
       into one another. A border line creates a visible seam between the
       row header and the detail strip. */
    color: rgba(207, 199, 181, 0.85);
    box-sizing: border-box;
    min-width: 0;
    /* Don't clip the row-wide halo. */
    overflow: visible;
}

/* Row-wide ambient halo. Spanning the entire .scoreboard-detail (and bleeding
   upward into the row header above) means the lighting fills the whole card
   uniformly — no internal transition between "chart cell" and "description
   cell". The halo is the FIRST child so it sits behind everything.

   `mix-blend-mode: screen` adds the gold pool to whatever the row background
   already paints (the leaderboard-first gradient, glass card noise, etc.)
   instead of laying a separate layer on top. Screen-blended additive light
   never produces a hard edge with what's behind it — it can only brighten
   pixels, so the falloff to "transparent" reads as the halo dissolving into
   the underlying surface. */
.scoreboard-detail__halo[b-lzxdkti7e2] {
    position: absolute;
    inset: -260% -15% -40% -15%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 65% 45% at 50% 70%,
            rgba(255, 215, 0, 0.16) 0%,
            rgba(255, 215, 0, 0.11) 18%,
            rgba(255, 215, 0, 0.07) 36%,
            rgba(255, 215, 0, 0.04) 55%,
            rgba(255, 215, 0, 0.018) 75%,
            rgba(255, 215, 0, 0.006) 90%,
            transparent 100%);
    mix-blend-mode: screen;
    filter: blur(72px);
    will-change: filter;
}

/* Stack content above the halo. */
.scoreboard-detail > .scoreboard-detail-info[b-lzxdkti7e2],
.scoreboard-detail > .scoreboard-detail-chart[b-lzxdkti7e2] {
    position: relative;
    z-index: 1;
}

/* MudCollapse wraps the details and uses overflow:hidden during animation,
   which would clip the halo. Once expanded the wrapper sometimes leaves a
   `mud-collapse-wrapper` whose computed height differs from the content by
   a sub-pixel during the animation tail \u2014 enough to surface a vertical
   scrollbar. Allow visible overflow on every entered/wrapper variant. */
[b-lzxdkti7e2] .scoreboard-row .mud-collapse-container.mud-collapse-entered,
[b-lzxdkti7e2] .scoreboard-row .mud-collapse-container.mud-collapse-entered .mud-collapse-wrapper,
[b-lzxdkti7e2] .scoreboard-row .mud-collapse-container.mud-collapse-entered .mud-collapse-wrapper-inner {
    overflow: visible !important;
}

.scoreboard-detail-info[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* "Description" heading echoes the Final Results title: Montserrat 900 gold +
   gradient accent dash beneath. Smaller scale than the section header so the
   visual rhyming is felt without competing with the row's own name. */
.scoreboard-detail-heading[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}

[b-lzxdkti7e2] .scoreboard-detail-heading__title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    color: #FFD700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    font-size: clamp(1.05rem, 1.6vw, 1.4rem) !important;
    text-transform: none !important;
    text-shadow: 0 0 36px rgba(255, 215, 0, 0.18);
    margin: 0 !important;
}

.scoreboard-detail-heading__accent[b-lzxdkti7e2] {
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #FFD700, rgba(255, 215, 0, 0.3));
}

[b-lzxdkti7e2] .scoreboard-detail-body {
    color: rgba(207, 199, 181, 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
    margin: 0 !important;
}

.scoreboard-detail-chart[b-lzxdkti7e2] {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    /* Single fixed-ish height so the chart never has to negotiate min vs max
       with MudChart's MatchBoundsToSize. With min/max-height the SVG could
       briefly request more space than the cell, surfacing a scrollbar. */
    height: clamp(220px, 30vh, 360px);
    /* Belt + braces against the chart scrollbar: hidden as a universal
       fallback, clip preferred where supported. */
    overflow: hidden;
    overflow: clip;
    contain: paint;
}

.scoreboard-detail-chart canvas[b-lzxdkti7e2] {
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
}

/* -------- Quiz results --------------------------------------------------- */
.quiz-results-showcase[b-lzxdkti7e2] {
    margin: clamp(2rem, 4vh, 4rem) auto clamp(3rem, 5vh, 5rem);
    max-width: min(1100px, 92vw);
    padding: 0 clamp(0.8rem, 2vw, 1.6rem);
}

/* -------- Email section -------------------------------------------------- */
.email-results-section[b-lzxdkti7e2] {
    margin: clamp(2.5rem, 5vh, 4.5rem) auto clamp(2rem, 4vh, 3rem);
    padding: 0 clamp(0.8rem, 2vw, 1.6rem);
    max-width: min(560px, 92vw);
    container-type: inline-size;
    container-name: email-results;
}

.email-results-card[b-lzxdkti7e2] {
    position: relative;
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.012) 100%);
    border: 1px solid rgba(245, 230, 168, 0.18);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    /* Outer warm glow bleeds into the page stage so the card sits in soft
       lit space instead of as a hard-edged rectangle. */
    box-shadow:
        0 26px 60px -20px rgba(0, 0, 0, 0.65),
        0 0 80px -10px rgba(255, 215, 0, 0.16),
        0 0 160px -40px rgba(255, 215, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    isolation: isolate;
}

/* Echo halo behind the card — visual rhyme with the podium halo. */
.email-results-card__halo[b-lzxdkti7e2] {
    position: absolute;
    inset: -45% -55% -45% -55%;
    pointer-events: none;
    z-index: -1;
    filter: blur(34px);
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(255, 215, 0, 0.16) 0%, rgba(255, 215, 0, 0.06) 28%, rgba(255, 215, 0, 0.02) 55%, transparent 100%);
}

.email-results-card__inner[b-lzxdkti7e2] {
    position: relative;
    z-index: 1;
    padding: clamp(1.8rem, 3.2vw, 2.8rem) clamp(1.6rem, 3.2vw, 2.6rem) clamp(1.8rem, 3.2vw, 2.6rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 2.4vh, 1.8rem);
}

.email-results-header[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.email-results-header__eyebrow[b-lzxdkti7e2] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: clamp(0.72rem, 1.1cqi, 0.85rem);
    font-weight: 700;
    color: rgba(245, 230, 168, 0.55);
    font-family: 'Inter', 'Montserrat', sans-serif;
}

.email-results-header__eyebrow-dot[b-lzxdkti7e2] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
    animation: emailDotPulse-b-lzxdkti7e2 2.4s ease-in-out infinite;
}

@keyframes emailDotPulse-b-lzxdkti7e2 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.7; }
}

[b-lzxdkti7e2] .email-results-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    color: #FFD700 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
    font-size: clamp(1.6rem, 6.5cqi, 2.6rem) !important;
    text-shadow: 0 0 36px rgba(255, 215, 0, 0.22), 0 6px 18px rgba(0, 0, 0, 0.5);
    margin: 0 !important;
    text-wrap: balance;
    text-transform: none !important;
}

.email-results-accent[b-lzxdkti7e2] {
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #FFD700, rgba(255, 215, 0, 0.3));
}

[b-lzxdkti7e2] .email-results-subtitle {
    color: rgba(207, 199, 181, 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem) !important;
    margin: 0 !important;
    max-width: 42ch;
}

.email-results-form[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Brand the MudTextField. MudBlazor's outlined input uses these inner classes. */
[b-lzxdkti7e2] .email-results-input .mud-input-control,
[b-lzxdkti7e2] .email-results-input .mud-input {
    background: transparent !important;
}

[b-lzxdkti7e2] .email-results-input .mud-input-outlined-border {
    border-color: rgba(245, 230, 168, 0.22) !important;
    border-radius: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-lzxdkti7e2] .email-results-input:hover .mud-input-outlined-border {
    border-color: rgba(245, 230, 168, 0.40) !important;
}

[b-lzxdkti7e2] .email-results-input .mud-input.mud-input-focused .mud-input-outlined-border,
[b-lzxdkti7e2] .email-results-input .mud-input-control:focus-within .mud-input-outlined-border {
    border-color: #FFD700 !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.14);
}

[b-lzxdkti7e2] .email-results-input input {
    color: rgba(255, 224, 130, 0.95) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    letter-spacing: 0;
}

[b-lzxdkti7e2] .email-results-input input::placeholder {
    color: rgba(245, 230, 168, 0.35) !important;
    opacity: 1;
}

[b-lzxdkti7e2] .email-results-input .mud-input-label {
    color: rgba(245, 230, 168, 0.55) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

[b-lzxdkti7e2] .email-results-input .mud-input-label.mud-input-label-animated.mud-input-label-outlined {
    background: #0F0F1C !important;
    padding: 0 6px !important;
}

/* Brand the newsletter opt-in checkbox so it reads as a piece of the same form
   surface, not a stock MudBlazor purple control. */
[b-lzxdkti7e2] .email-results-checkbox .mud-checkbox-icon,
[b-lzxdkti7e2] .email-results-checkbox svg {
    color: rgba(245, 230, 168, 0.55) !important;
    transition: color 0.2s ease, filter 0.2s ease;
}

[b-lzxdkti7e2] .email-results-checkbox.mud-checkbox-true .mud-checkbox-icon,
[b-lzxdkti7e2] .email-results-checkbox.mud-checkbox-true svg {
    color: #FFD700 !important;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
}

[b-lzxdkti7e2] .email-results-checkbox .mud-typography {
    color: rgba(245, 230, 168, 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.01em;
}

/* Quiet supporting line under the newsletter checkbox \u2014 muted meta tier so it
   reassures without competing with the form label or the Get Results CTA. */
[b-lzxdkti7e2] .email-results-checkbox-hint {
    display: block;
    color: rgba(245, 230, 168, 0.55) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.01em;
    margin: -8px 0 0 34px !important;
}

.email-results-actions[b-lzxdkti7e2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}

@container email-results (max-width: 480px) {
    .email-results-actions[b-lzxdkti7e2] {
        justify-content: center;
    }
}

[b-lzxdkti7e2] .email-results-submit {
    width: 100%;
    background: linear-gradient(145deg, #FFD700 0%, #E5B800 100%) !important;
    color: #0B0B16 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    font-size: 0.9rem !important;
    border-radius: 14px !important;
    padding: 14px 26px !important;
    box-shadow: 0 12px 28px -8px rgba(255, 215, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

[b-lzxdkti7e2] .email-results-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -8px rgba(255, 215, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    filter: brightness(1.05);
}

[b-lzxdkti7e2] .email-results-submit:disabled {
    opacity: 0.55;
    box-shadow: none;
    filter: grayscale(0.3);
}

[b-lzxdkti7e2] .email-results-submit .mud-icon-root {
    color: #0B0B16 !important;
}

/* Validation + alert styling — keep them on-brand instead of MudBlazor defaults. */
[b-lzxdkti7e2] .email-results-alert.mud-alert {
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(245, 230, 168, 0.18) !important;
    color: rgba(245, 230, 168, 0.92) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
}

[b-lzxdkti7e2] .email-results-alert--success.mud-alert {
    background: rgba(190, 242, 100, 0.08) !important;
    border-color: rgba(190, 242, 100, 0.4) !important;
    color: rgba(220, 248, 170, 0.95) !important;
}

[b-lzxdkti7e2] .email-results-alert--error.mud-alert {
    background: rgba(255, 107, 107, 0.06) !important;
    border-color: rgba(255, 107, 107, 0.4) !important;
    color: rgba(255, 188, 188, 0.95) !important;
}

[b-lzxdkti7e2] .email-results-form .validation-message,
[b-lzxdkti7e2] .email-results-form .field-validation-error {
    color: rgba(255, 188, 188, 0.95) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500;
    margin-top: 4px;
}

/* -------- Fullscreen toggle anchor -------------------------------------- */
/* Explicitly cancel the bottom/left defaults from app.css \u2014 otherwise all four
   anchors are set, the div stretches edge-to-edge, and the wrapper's onclick
   intercepts every click on the page (including "Show details"). */
.fullscreen-toggle-anchor[b-lzxdkti7e2] {
    position: fixed;
    /* Sit below the MudAppBar so its SVGs can't intercept the click. */
    top: 80px;
    right: 18px;
    bottom: auto;
    left: auto;
    width: auto;
    height: auto;
    z-index: 1500;
    cursor: pointer;
}

/* -------- Mobile (≤700px): single-stage podium reel ---------------------- */
@media (max-width: 700px) {
    .hero-wrapper[b-lzxdkti7e2] {
        padding: clamp(1.4rem, 3.5vh, 2.4rem) 12px clamp(1rem, 2vh, 1.6rem);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .results-hero[b-lzxdkti7e2] {
        margin-bottom: clamp(0.6rem, 1.2vh, 1.2rem);
    }

    /* Long titles were rendering at 2.8rem and wrapping to two huge lines on a
       phone. Cap the upper bound and reduce side-padding in the hero so the
       text breathes without forcing the page wider. */
    [b-lzxdkti7e2] .tasting-title {
        font-size: clamp(1.8rem, 9vw, 3.2rem) !important;
        max-width: 18ch;
    }
    [b-lzxdkti7e2] .tasting-title.tasting-title--mid { font-size: clamp(1.6rem, 8vw, 2.6rem) !important; }
    [b-lzxdkti7e2] .tasting-title.tasting-title--long { font-size: clamp(1.4rem, 7vw, 2.2rem) !important; }
    [b-lzxdkti7e2] .tasting-title.tasting-title--xlong { font-size: clamp(1.2rem, 6vw, 1.9rem) !important; }

    .results-hero__accent[b-lzxdkti7e2] {
        margin-top: 14px;
        width: 56px;
        height: 3px;
    }

    .podium-wrapper[b-lzxdkti7e2] {
        margin-top: 1rem;
        padding-top: 16px;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .podium-halo[b-lzxdkti7e2] {
        top: 6%;
        height: 70%;
    }

    /* Single-stage swipe reel. Constrain width to viewport so the off-stage
       columns (translateX(120%)) can't push horizontal page width.

       The grid needs an explicit height because every column is absolutely
       positioned (inset: 0). Without it the grid collapses to 0px and you
       see nothing during the staged reveal. Use a content-derived clamp
       sized for one card, NOT 64vh which left a huge dead bay before. */
    .podium-grid[b-lzxdkti7e2] {
        position: relative;
        display: block;
        min-height: clamp(360px, 56vh, 460px);
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border-radius: 22px;
    }

    /* Active card needs an explicit height so absolutely-positioned siblings
       have something to size against. Use the active stage's intrinsic height
       via the column position trick: the visible rank gets a relative wrapper. */
    .podium-stage[b-lzxdkti7e2] {
        max-width: min(380px, 88vw);
        margin: 0 auto;
        padding: 16px 16px 18px;
        gap: 0.55rem;
    }

    .podium-column.rank-1 .podium-stage[b-lzxdkti7e2],
    .podium-column.rank-2 .podium-stage[b-lzxdkti7e2],
    .podium-column.rank-3 .podium-stage[b-lzxdkti7e2] {
        min-height: 0;
    }

    .podium-column[b-lzxdkti7e2] {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        padding-bottom: 0;
        opacity: 0;
        transform: translateX(120%);
        transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
        z-index: 1;
    }

    .podium-column.rank-1[b-lzxdkti7e2],
    .podium-column.rank-2[b-lzxdkti7e2],
    .podium-column.rank-3[b-lzxdkti7e2] {
        --podium-elevation: 0px;
    }

    .podium-column .podium-elevator[b-lzxdkti7e2] {
        transform: none;
    }

    .hero-wrapper.mobile-stage-standby .podium-column[b-lzxdkti7e2] {
        transform: translateX(120%);
        opacity: 0;
    }

    .hero-wrapper.mobile-stage-third .podium-column.rank-3[b-lzxdkti7e2],
    .hero-wrapper.mobile-stage-second .podium-column.rank-2[b-lzxdkti7e2],
    .hero-wrapper.mobile-stage-first .podium-column.rank-1[b-lzxdkti7e2] {
        transform: translateX(0);
        opacity: 1;
        z-index: 3;
    }

    .hero-wrapper.mobile-stage-third .podium-column.rank-2[b-lzxdkti7e2],
    .hero-wrapper.mobile-stage-third .podium-column.rank-1[b-lzxdkti7e2],
    .hero-wrapper.mobile-stage-second .podium-column.rank-3[b-lzxdkti7e2],
    .hero-wrapper.mobile-stage-first .podium-column.rank-2[b-lzxdkti7e2],
    .hero-wrapper.mobile-stage-first .podium-column.rank-3[b-lzxdkti7e2] {
        transform: translateX(-120%);
        opacity: 0;
        z-index: 2;
    }

    .hero-wrapper.mobile-stage-second .podium-column.rank-1[b-lzxdkti7e2] {
        transform: translateX(120%);
        opacity: 0;
    }

    .podium-image-container[b-lzxdkti7e2] {
        width: 56%;
        max-width: 160px;
    }

    .podium-label[b-lzxdkti7e2] {
        font-size: clamp(1.1rem, 5vw, 1.45rem) !important;
    }
    .podium-caption[b-lzxdkti7e2] {
        font-size: clamp(0.85rem, 3.2vw, 1rem) !important;
    }

    /* Mobile glass cards: drop backdrop-filter (Safari unreliable) and lift surface. */
    .podium-stage[b-lzxdkti7e2],
    .scoreboard-row[b-lzxdkti7e2],
    .leaderboard-showcase[b-lzxdkti7e2],
    .email-results-card[b-lzxdkti7e2] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.035) 100%) !important;
        border-color: rgba(245, 230, 168, 0.32) !important;
    }

    .leaderboard-first[b-lzxdkti7e2] {
        background: linear-gradient(145deg, rgba(255, 215, 0, 0.18) 0%, rgba(255, 215, 0, 0.04) 100%) !important;
        border-color: rgba(255, 215, 0, 0.5) !important;
    }

    .leaderboard-showcase[b-lzxdkti7e2] {
        padding: clamp(1.2rem, 4vw, 1.8rem) clamp(0.8rem, 3vw, 1.4rem) clamp(1.6rem, 4vw, 2rem);
        margin: clamp(1.6rem, 3.5vh, 2.4rem) auto clamp(1.5rem, 3vh, 2.4rem);
        max-width: calc(100vw - 24px);
        border-radius: 18px;
        box-sizing: border-box;
    }

    .scoreboard-main[b-lzxdkti7e2] {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        gap: 0.75rem;
    }

    .scoreboard-image-container[b-lzxdkti7e2] {
        margin: 0 auto;
        width: clamp(140px, 50vw, 200px);
        height: clamp(140px, 50vw, 200px);
    }

    .scoreboard-medal[b-lzxdkti7e2] {
        font-size: clamp(2rem, 6vw, 2.6rem);
        top: 8px;
        right: 8px;
    }

    .scoreboard-beverage-image[b-lzxdkti7e2] {
        width: 100%;
        height: 100%;
    }

    .scoreboard-points[b-lzxdkti7e2] {
        align-items: center;
    }

    .scoreboard-detail[b-lzxdkti7e2] {
        grid-template-columns: 1fr;
    }

    .scoreboard-detail-chart[b-lzxdkti7e2] {
        min-height: 220px;
    }

    .scoreboard-row[b-lzxdkti7e2] {
        padding: clamp(0.8rem, 3vw, 1rem);
    }
}

/* -------- Desktop (≥1024px) ---------------------------------------------- */
@media (min-width: 1024px) {
    .scoreboard-detail-chart[b-lzxdkti7e2] {
        min-height: 320px;
        max-height: 420px;
    }

    .scoreboard-main[b-lzxdkti7e2] {
        grid-template-columns: 130px minmax(0, 1fr) minmax(150px, auto);
    }

    .scoreboard-image-container[b-lzxdkti7e2] {
        width: 110px;
        height: 110px;
    }

    .scoreboard-beverage-image[b-lzxdkti7e2] {
        width: 110px;
        height: 110px;
    }
}

/* -------- Ultra-wide (≥1600px) ------------------------------------------- */
@media (min-width: 1600px) {
    .hero-wrapper[b-lzxdkti7e2] {
        max-width: min(2000px, 92vw);
    }

    .leaderboard-showcase[b-lzxdkti7e2] {
        max-width: min(1600px, 86vw);
    }

    .scoreboard-main[b-lzxdkti7e2] {
        grid-template-columns: 150px minmax(0, 1fr) minmax(180px, auto);
    }

    .scoreboard-image-container[b-lzxdkti7e2],
    .scoreboard-beverage-image[b-lzxdkti7e2] {
        width: 130px;
        height: 130px;
    }
}

/* ============================================================================
   Iteration patches: Scoreboard radar chart container — re-skinned to match
   host-reveal-panel with a warm halo, brand-aligned grid lines, and
   producer-tone axis labels.
   (Title tiers + podium halo bloom now live with their canonical rules above.)
   ============================================================================ */

/* Scoreboard radar chart — host-reveal-panel recipe re-applied here. */
.scoreboard-detail-chart[b-lzxdkti7e2] {
    /* Reset the earlier flex layout so the halo positions from the chart wrapper. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Row-wide ambient halo. (Old per-chart halo lived on .scoreboard-detail-chart;
   it's been replaced by .scoreboard-detail__halo above so the lighting fills
   the entire row uniformly.) */

.scoreboard-detail-chart__inner[b-lzxdkti7e2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Cell now provides a strict box; absolute positioning makes the chart
       paint into it without participating in flex height negotiation. */
    overflow: clip;
    /* Hidden until the MudCollapse open animation finishes — otherwise the
       full-height chart shows through the partially-open wrapper, which
       reads as the chart "sliding into view" instead of an organic reveal.
       The .mud-collapse-entered rule below fades it in cleanly. */
    opacity: 0;
    transition: opacity 240ms ease-out 80ms;
}

[b-lzxdkti7e2] .scoreboard-row .mud-collapse-container.mud-collapse-entered .scoreboard-detail-chart__inner {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .scoreboard-detail-chart__inner[b-lzxdkti7e2] { transition: none; opacity: 1; }
}

/* MudChart radar fills its parent. The radar shell + .mud-chart live inside
   a child component, so scoped CSS won't reach them without ::deep. Without
   ::deep the prior rules never matched, which is why MudChart was still able
   to scroll the wrapper. */
.scoreboard-detail-chart__inner[b-lzxdkti7e2]  .radar-chart-shell,
.scoreboard-detail-chart__inner[b-lzxdkti7e2]  .mud-chart {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    /* `clip` suppresses scrollbars without establishing a scroll container. */
    overflow: clip !important;
}

.scoreboard-detail-chart__inner[b-lzxdkti7e2]  svg {
    width: 100% !important;
    height: 100% !important;
}

/* Hide the mud chart legend entirely — its label/dot conflict with our
   description column. ::deep is required because the legend lives inside the
   RadarChart child component. */
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-chart-legend,
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-chart-legend-item {
    display: none !important;
}

[b-lzxdkti7e2] .scoreboard-detail-chart svg {
    overflow: visible;
}

/* Brand grid + axis lines — same producer-tone cream used on the host reveal. */
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-charts-grid line,
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-charts-grid path,
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-charts-grid polygon {
    stroke: rgba(255, 224, 130, 0.85) !important;
    fill: none !important;
}

/* Axis labels — match the host reveal panel exactly: producer-tone gold,
   Inter 600, viewport-clamped size. */
[b-lzxdkti7e2] .scoreboard-detail-chart text {
    fill: rgba(255, 224, 130, 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(14px, 1.6vw, 22px) !important;
    letter-spacing: 0.02em;
}

/* The data polygon itself — gold fill + glow. */
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-chart-serie path {
    stroke: #FFD700 !important;
    stroke-width: 2.5 !important;
    fill: rgba(255, 215, 0, 0.20) !important;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.35));
}

/* Data points */
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-chart-serie circle {
    fill: #FFD700 !important;
    stroke: rgba(11, 11, 22, 0.9) !important;
    stroke-width: 1.5 !important;
}

/* Score count-up entrance — fade + lift the value when leaderboard becomes visible. */
.leaderboard-showcase.lb-visible[b-lzxdkti7e2]  .scoreboard-points .mud-typography:first-child {
    animation: scoreboardScoreEnter-b-lzxdkti7e2 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes scoreboardScoreEnter-b-lzxdkti7e2 {
    from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .leaderboard-showcase.lb-visible[b-lzxdkti7e2]  .scoreboard-points .mud-typography:first-child {
        animation: none;
    }
}
/* /Components/Pages/ShareTasting.razor.rz.scp.css */
.sharing-image-row[b-vhxb8vclrq] {
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.sharing-image-overlay[b-vhxb8vclrq] {
    position: fixed;
    inset: 0;
    background-color: rgba(4, 6, 15, 0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vh 1rem;
    z-index: 1200;
    overflow-y: auto;
    overflow-x: hidden;
}

.sharing-image-modal[b-vhxb8vclrq] {
    width: min(520px, calc(100vw - 2rem));
    max-height: 88vh;
    overflow-y: auto;
    background-color: rgba(22, 20, 39, 0.96);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sharing-image-preview[b-vhxb8vclrq] {
    width: min(240px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
}

.sharing-image-preview img[b-vhxb8vclrq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.share-image-upload-button[b-vhxb8vclrq] {
    position: relative;
    overflow: hidden;
}

.share-image-upload-button .share-image-file-input[b-vhxb8vclrq] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.sharing-image-cropper[b-vhxb8vclrq] {
    background-color: rgba(22, 20, 39, 0.9);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cropper-frame[b-vhxb8vclrq] {
    width: min(420px, 90vw);
    height: min(420px, 90vw);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.3);
}

.cropper-surface[b-vhxb8vclrq],
.cropper-frame .cropper-container[b-vhxb8vclrq],
.cropper-frame .cropper-wrap-box[b-vhxb8vclrq],
.cropper-frame .cropper-canvas[b-vhxb8vclrq],
.cropper-frame .cropper-drag-box[b-vhxb8vclrq] {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}

.cropper-zoom-slider[b-vhxb8vclrq] {
    padding-inline: 0.5rem;
}
/* /Components/Shared/BeverageImageUpload.razor.rz.scp.css */
.biu-row[b-d4ovhvxsjy] {
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.biu-overlay[b-d4ovhvxsjy] {
    position: fixed;
    inset: 0;
    background-color: rgba(4, 6, 15, 0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vh 1rem;
    z-index: 1200;
    overflow-y: auto;
    overflow-x: hidden;
}

.biu-modal[b-d4ovhvxsjy] {
    width: min(520px, calc(100vw - 2rem));
    max-height: 88vh;
    overflow-y: auto;
    background-color: rgba(22, 20, 39, 0.96);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.biu-preview[b-d4ovhvxsjy] {
    width: min(160px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.biu-preview img[b-d4ovhvxsjy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.biu-upload-button[b-d4ovhvxsjy] {
    position: relative;
    overflow: hidden;
}

.biu-upload-button .biu-file-input[b-d4ovhvxsjy] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.biu-cropper-frame[b-d4ovhvxsjy] {
    width: min(420px, 90vw);
    height: min(420px, 90vw);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.3);
}

.biu-cropper-surface[b-d4ovhvxsjy],
.biu-cropper-frame .cropper-container[b-d4ovhvxsjy],
.biu-cropper-frame .cropper-wrap-box[b-d4ovhvxsjy],
.biu-cropper-frame .cropper-canvas[b-d4ovhvxsjy],
.biu-cropper-frame .cropper-drag-box[b-d4ovhvxsjy] {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}

.biu-cropper-zoom-slider[b-d4ovhvxsjy] {
    padding-inline: 0.5rem;
}
/* /Components/Shared/BeverageScoreboardRow.razor.rz.scp.css */
.scoreboard-row[b-vl5t7z9st3] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 1rem);
    padding: clamp(1.2rem, 2vw, 1.75rem) clamp(1.2rem, 2.4vw, 2rem);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 22px 44px rgba(10, 6, 28, 0.28);
    /* overflow:visible so the radar's gold halo can bleed past the card edge
       and blend into the surrounding ambient lighting instead of cutting off
       sharply at the rounded border. The bg + border-radius still clip the
       glass surface itself; only out-of-flow decorative layers escape. */
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: clamp(120px, 18vh, 180px);
}

.scoreboard-row:hover[b-vl5t7z9st3] {
    transform: translateY(-6px);
    box-shadow: 0 28px 58px rgba(10, 6, 28, 0.38);
}

.leaderboard-first[b-vl5t7z9st3] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.35), rgba(123, 31, 162, 0.25));
}

.leaderboard-second[b-vl5t7z9st3] {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.35), rgba(33, 150, 243, 0.28));
}

.leaderboard-third[b-vl5t7z9st3] {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.35), rgba(255, 112, 67, 0.28));
}

.scoreboard-main[b-vl5t7z9st3] {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 110px;
    gap: 1rem;
    align-items: center;
    width: 100%;
}

.scoreboard-image-container[b-vl5t7z9st3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
}

.scoreboard-medal[b-vl5t7z9st3] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 1.6rem;
    font-weight: 700;
    z-index: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.scoreboard-beverage-image[b-vl5t7z9st3] {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.scoreboard-body[b-vl5t7z9st3] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.45rem, 0.8vw, 0.9rem);
}

.scoreboard-name[b-vl5t7z9st3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scoreboard-progress[b-vl5t7z9st3] {
    height: clamp(12px, 1.4vw, 18px);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.scoreboard-progress-fill[b-vl5t7z9st3] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(123, 31, 162, 0.95), rgba(41, 181, 232, 0.95));
    box-shadow: 0 8px 18px rgba(41, 181, 232, 0.40);
    transition: width 0.6s ease;
}

.scoreboard-points[b-vl5t7z9st3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(0.2rem, 0.5vw, 0.45rem);
    min-width: 100px;
}

/* Mobile styles */
@media (max-width: 700px) {
    .scoreboard-main[b-vl5t7z9st3] {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        gap: 0.75rem;
    }

    .scoreboard-image-container[b-vl5t7z9st3] {
        margin: 0 auto;
        width: 210px;
        height: 210px;
    }

    .scoreboard-medal[b-vl5t7z9st3] {
        font-size: 3rem;
        top: -2px;
        right: -2px;
    }

    .scoreboard-beverage-image[b-vl5t7z9st3] {
        width: 200px;
        height: 200px;
    }

    .scoreboard-points[b-vl5t7z9st3] {
        align-items: center;
    }

    .scoreboard-row[b-vl5t7z9st3] {
        padding: 0.6rem 0.4rem;
    }
}

/* Large screens */
@media (min-width: 1024px) {
    .scoreboard-main[b-vl5t7z9st3] {
        grid-template-columns: 130px minmax(0, 1fr) 150px;
    }

    .scoreboard-image-container[b-vl5t7z9st3] {
        width: 110px;
        height: 110px;
    }

    .scoreboard-medal[b-vl5t7z9st3] {
        font-size: 2rem;
        top: 4px;
        right: 4px;
    }

    .scoreboard-beverage-image[b-vl5t7z9st3] {
        width: 95px;
        height: 95px;
    }

    .scoreboard-progress[b-vl5t7z9st3] {
        height: clamp(18px, 2vw, 26px);
    }
}

/* Extra large screens */
@media (min-width: 1600px) {
    .scoreboard-row[b-vl5t7z9st3] {
        padding: 1.25rem 2rem;
    }

    .scoreboard-main[b-vl5t7z9st3] {
        grid-template-columns: 150px minmax(0, 1fr) 180px;
    }

    .scoreboard-image-container[b-vl5t7z9st3] {
        width: 130px;
        height: 130px;
    }

    .scoreboard-medal[b-vl5t7z9st3] {
        font-size: 2.2rem;
        top: 6px;
        right: 6px;
    }

    .scoreboard-beverage-image[b-vl5t7z9st3] {
        width: 115px;
        height: 115px;
    }

    .scoreboard-progress[b-vl5t7z9st3] {
        height: 16px;
    }
}
/* /Components/Shared/DiscoverPlaylistCard.razor.rz.scp.css */
.playlist-card[b-z2ii8t5nfm] {
    border-radius: 18px;
    min-height: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.playlist-card-content[b-z2ii8t5nfm] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.playlist-card-actions[b-z2ii8t5nfm] {
    margin-top: auto;
}

.hero-row[b-z2ii8t5nfm] {
    display: flex;
    gap: 16px;
}

.hero-avatar[b-z2ii8t5nfm] {
    background: linear-gradient(135deg, #ffd700, #f4b942);
    color: #1b1b23;
}

.hero-text .tags-row[b-z2ii8t5nfm] {
    margin-top: 8px;
}

.stat-chip[b-z2ii8t5nfm] {
    background-color: rgba(0, 0, 0, 0.04);
}

.tag-chip[b-z2ii8t5nfm] {
    font-size: 0.75rem;
}
/* /Components/Shared/DiscoverSpotlightCard.razor.rz.scp.css */
.spotlight-card[b-pp0kifozl6] {
    border-radius: 20px;
    background-color: #161427;
    color: #fefefe;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.spotlight-card .mud-grid-item[b-pp0kifozl6] {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
}

.spotlight-content[b-pp0kifozl6] {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1 1 auto;
}

.spotlight-body[b-pp0kifozl6] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.spotlight-actions[b-pp0kifozl6] {
    margin-top: auto;
}

.card-hero[b-pp0kifozl6] {
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
}

.card-hero img[b-pp0kifozl6] {
    width: 100%;
    object-fit: cover;
}

.spotlight-card .stats-small .mud-typography[b-pp0kifozl6] {
    margin-right: 16px;
}
.spotlight-card .mud-grid[b-pp0kifozl6] {
    height: 100%;
}

.spotlight-grid[b-pp0kifozl6] {
    height: 100%;
}

.save-tasting-button[b-pp0kifozl6] {
    border-radius: 12px;
    font-weight: 600;
    padding: 10px 24px;
    color: #ffffff;
}

.spotlight-button-row[b-pp0kifozl6] {
    align-items: center;
}

.give-star-label[b-pp0kifozl6] {
    font-weight: 600;
    font-size: 0.85rem;
}
/* /Components/Shared/LiveFeedbackResults.razor.rz.scp.css */
.radar-chart-container[b-fxg93g0603] {
    width: 100%;
    height: min(35vh, 350px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* For tablets and up - constrain height to prevent scrollbars */
@media (min-width: 768px) {
    .radar-chart-container[b-fxg93g0603] {
        height: min(35vh, 350px);
    }
}

/* For larger screens - account for header/footer taking ~200px */
@media (min-width: 1200px) {
    .radar-chart-container[b-fxg93g0603] {
        height: min(38vh, 380px);
    }
}
/* /Components/Shared/RevealCountdownOverlay.razor.rz.scp.css */
/* Full-screen 3-2-1 countdown shown to host + participants right before the
   reveal lands. Brand-aligned: deep base wash + warm-gold halo + Montserrat
   900 numeral. */

.reveal-countdown[b-78rcw0andp] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(11, 11, 22, 0.78) 0%, rgba(11, 11, 22, 0.92) 100%);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: #FFD700;
    pointer-events: none;
    animation: revealCountdownFade-b-78rcw0andp 220ms ease-out both;
}

.reveal-countdown__halo[b-78rcw0andp] {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse 45% 40% at 50% 50%, rgba(255, 215, 0, 0.22) 0%, rgba(255, 215, 0, 0.08) 35%, rgba(255, 215, 0, 0.02) 65%, transparent 100%),
        radial-gradient(ellipse 55% 50% at 50% 50%, rgba(214, 198, 140, 0.10) 0%, rgba(214, 198, 140, 0.03) 50%, transparent 100%);
    pointer-events: none;
    filter: blur(40px);
}

.reveal-countdown__num[b-78rcw0andp] {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(8rem, 28vw, 22rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: #FFD700;
    text-shadow:
        0 0 56px rgba(255, 215, 0, 0.45),
        0 8px 32px rgba(0, 0, 0, 0.6);
    animation: revealCountdownPop-b-78rcw0andp 1s cubic-bezier(0.22, 1, 0.36, 1);
    font-variant-numeric: tabular-nums;
}

.reveal-countdown__label[b-78rcw0andp] {
    position: relative;
    margin-top: 24px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245, 230, 168, 0.55);
}

@keyframes revealCountdownPop-b-78rcw0andp {
    0%   { transform: scale(0.5); opacity: 0; filter: blur(8px); }
    45%  { transform: scale(1.12); opacity: 1; filter: blur(0); }
    100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

@keyframes revealCountdownFade-b-78rcw0andp {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-countdown[b-78rcw0andp],
    .reveal-countdown__num[b-78rcw0andp] { animation: none; }
}
/* /Components/Shared/TastingJoinPage.razor.rz.scp.css */
/* ============================================================
   Pre-start lobby — projected on a TV while the room fills up.
   Star: tasting NAME (the personality of the night).
   Anchor pair: join CODE + QR (the "how to enter" signal).
   Live signal: joined counter pulse on every new arrival.
   Action: Start Tasting.
   ============================================================ */

.lobby-stage[b-e337s2hj3c] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #0B0B16;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

/* ---- Layer 1: Ambient drift ---- */
.lobby-stage__ambient[b-e337s2hj3c] {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 78% 45%, rgba(255, 215, 0, 0.18) 0%, rgba(255, 215, 0, 0.08) 30%, rgba(255, 215, 0, 0.02) 60%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 18% 25%, rgba(86, 64, 156, 0.28) 0%, rgba(86, 64, 156, 0.12) 35%, rgba(86, 64, 156, 0.03) 65%, transparent 100%),
        radial-gradient(ellipse 65% 50% at 50% 110%, rgba(214, 198, 140, 0.10) 0%, rgba(214, 198, 140, 0.03) 50%, transparent 100%);
    animation: lobbyAmbientDrift-b-e337s2hj3c 20s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

@keyframes lobbyAmbientDrift-b-e337s2hj3c {
    0%   { transform: translate3d(-15%, -10%, 0) scale(1.10); }
    100% { transform: translate3d(15%, 12%, 0) scale(1.25); }
}

/* ---- Layer 2: Noise ---- */
.lobby-stage__noise[b-e337s2hj3c] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

/* ---- Layer 3: Vignette ---- */
.lobby-stage__vignette[b-e337s2hj3c] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* ---- Content shell ---- */
.lobby-shell[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4.5vh, 56px);
    padding: clamp(32px, 6vh, 64px) clamp(20px, 4vw, 64px);
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
}

/* ---- Header — the real anchor: tasting name + accent ---- */
.lobby-header[b-e337s2hj3c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 1100px;
    width: 100%;
}

.lobby-eyebrow[b-e337s2hj3c] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(245, 230, 168, 0.55);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.95rem;
}

.lobby-eyebrow__pulse[b-e337s2hj3c] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
    position: relative;
}

.lobby-eyebrow__pulse[b-e337s2hj3c]::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.4);
    animation: lobbyEyebrowRing-b-e337s2hj3c 1800ms ease-out infinite;
}

@keyframes lobbyEyebrowRing-b-e337s2hj3c {
    0%   { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(2.6); opacity: 0; }
}

.lobby-title[b-e337s2hj3c] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: #FFD700;
    letter-spacing: -0.025em;
    line-height: 0.98;
    margin: 0;
    font-size: clamp(2.6rem, 6.5vw, 5.4rem);
    text-shadow: 0 4px 28px rgba(255, 215, 0, 0.18);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.lobby-title--long[b-e337s2hj3c]  { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.lobby-title--xlong[b-e337s2hj3c] { font-size: clamp(1.9rem, 4vw, 3.4rem); }

.lobby-accent[b-e337s2hj3c] {
    width: 96px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #FFD700, rgba(255, 215, 0, 0.3));
}

/* ---- Hero pair: code + QR side by side, balanced weights ---- */
.lobby-hero[b-e337s2hj3c] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(32px, 5vw, 72px);
    width: 100%;
    flex-wrap: wrap;
}

.lobby-hero__code[b-e337s2hj3c] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    min-width: 0;
}

.lobby-hero__code-card[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    padding: clamp(14px, 1.8vh, 20px) clamp(20px, 3vw, 40px);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(245, 230, 168, 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(255, 215, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: calc(clamp(180px, 16vw, 220px) + 2 * clamp(14px, 1.8vh, 20px));
    box-sizing: border-box;
}

.lobby-hero__code-eyebrow[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    color: rgba(245, 230, 168, 0.55);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.85rem;
}

.lobby-hero__code-halo[b-e337s2hj3c] {
    position: absolute;
    inset: -30% -20% -30% -20%;
    background:
        radial-gradient(ellipse 55% 50% at 50% 50%, rgba(255, 215, 0, 0.22) 0%, rgba(255, 215, 0, 0.10) 30%, rgba(255, 215, 0, 0.025) 60%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 50%, rgba(214, 198, 140, 0.10) 0%, rgba(214, 198, 140, 0.03) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(28px);
}

.lobby-hero__code-value[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: #FFD700;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0;
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 6px 32px rgba(255, 215, 0, 0.32),
        0 2px 12px rgba(0, 0, 0, 0.55);
    word-break: break-all;
}

.lobby-hero__code-url[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    color: rgba(245, 230, 168, 0.65);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    letter-spacing: 0.04em;
}

.lobby-hero__code-url-domain[b-e337s2hj3c] {
    color: rgba(255, 224, 130, 0.85);
    font-weight: 500;
}

/* QR card — supporting glass card with echo halo */
.lobby-hero__qr[b-e337s2hj3c] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.lobby-hero__qr-halo[b-e337s2hj3c] {
    position: absolute;
    inset: -25% -25% -10% -25%;
    background: radial-gradient(ellipse 45% 45% at 50% 50%, rgba(255, 215, 0, 0.14) 0%, rgba(255, 215, 0, 0.06) 30%, rgba(255, 215, 0, 0.02) 60%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(28px);
}

.lobby-hero__qr-card[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    padding: clamp(14px, 1.8vh, 20px);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(245, 230, 168, 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(255, 215, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    line-height: 0;
}

.lobby-hero__qr-card[b-e337s2hj3c]  > * {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: clamp(180px, 16vw, 220px) !important;
    height: clamp(180px, 16vw, 220px) !important;
    line-height: 0;
}

.lobby-hero__qr-card[b-e337s2hj3c]  svg,
.lobby-hero__qr-card[b-e337s2hj3c]  img,
.lobby-hero__qr-card[b-e337s2hj3c]  canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain;
}

.lobby-hero__qr-caption[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    color: rgba(245, 230, 168, 0.55);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ---- Joined counter — live signal, animates per re-key ---- */
.lobby-counter[b-e337s2hj3c] {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(245, 230, 168, 0.18);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.lobby-counter__icon[b-e337s2hj3c] {
    color: rgba(255, 224, 130, 0.85);
    display: inline-flex;
}

.lobby-counter__icon .mud-icon-root[b-e337s2hj3c] {
    font-size: 1.4rem;
}

.lobby-counter__num[b-e337s2hj3c] {
    color: #FFD700;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    display: inline-block;
    transform-origin: center;
    animation: lobbyCounterBump-b-e337s2hj3c 600ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, filter;
}

@keyframes lobbyCounterBump-b-e337s2hj3c {
    0%   { transform: scale(0.78); filter: brightness(1.8) drop-shadow(0 0 16px rgba(255, 215, 0, 0.7)); }
    50%  { transform: scale(1.18); filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 215, 0, 0.45)); }
    100% { transform: scale(1);    filter: none; }
}

.lobby-counter__label[b-e337s2hj3c] {
    color: rgba(245, 230, 168, 0.75);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---- Start button — solid gold CTA, no pulse. Always visible thanks
   to the warm static glow. ::deep is mandatory — MudButton renders its
   own <button> from inside the MudBlazor component, so without ::deep
   the Blazor-scoped attribute selector never matches. ---- */
.lobby-shell[b-e337s2hj3c]  .lobby-start.mud-button-root {
    background: linear-gradient(145deg, #FFD700 0%, #E5B800 100%) !important;
    color: #0F0F1C !important;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 32px !important;
    border-radius: 14px;
    border: 1px solid rgba(245, 230, 168, 0.5) !important;
    box-shadow:
        0 12px 26px -10px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    transition: transform 180ms ease-out, filter 180ms ease-out, box-shadow 180ms ease-out;
}

.lobby-shell[b-e337s2hj3c]  .lobby-start.mud-button-root .mud-icon-root {
    color: #0F0F1C !important;
}

.lobby-shell[b-e337s2hj3c]  .lobby-start.mud-button-root:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    background: linear-gradient(145deg, #FFE082 0%, #E5B800 100%) !important;
    box-shadow:
        0 14px 30px -10px rgba(0, 0, 0, 0.6),
        0 0 32px rgba(255, 215, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.lobby-shell[b-e337s2hj3c]  .lobby-start.mud-button-root:active {
    transform: translateY(0);
}

/* ---- Footer caption ---- */
.lobby-footer[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 16px;
    color: rgba(245, 230, 168, 0.45);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

/* ---- Fullscreen icon — floating top-right, glass chrome.
   The global .fullscreen-toggle-anchor in app.css pins all four edges,
   so we explicitly cancel bottom/left/width/height to stop the wrapper
   stretching across the screen and swallowing every click. ---- */
.lobby-fullscreen[b-e337s2hj3c] {
    position: fixed;
    top: clamp(16px, 2.5vh, 28px);
    right: clamp(16px, 2vw, 28px);
    bottom: auto;
    left: auto;
    width: auto;
    height: auto;
    z-index: 50;
    cursor: pointer;
}

.lobby-fullscreen[b-e337s2hj3c]  .mud-icon-button {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%) !important;
    color: rgba(245, 230, 168, 0.7) !important;
    border: 1px solid rgba(245, 230, 168, 0.14) !important;
    border-radius: 12px;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: color 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out;
}

.lobby-fullscreen[b-e337s2hj3c]  .mud-icon-button:hover {
    color: #FFE082 !important;
    border-color: rgba(245, 230, 168, 0.28) !important;
    background: linear-gradient(145deg, rgba(255, 224, 130, 0.08) 0%, rgba(255, 224, 130, 0.02) 100%) !important;
}

/* ---- Responsive: when stacked, keep things tidy ---- */
@media (max-width: 720px) {
    .lobby-hero__code-value[b-e337s2hj3c] {
        font-size: clamp(2.4rem, 13vw, 4.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lobby-stage__ambient[b-e337s2hj3c],
    .lobby-eyebrow__pulse[b-e337s2hj3c]::before,
    .lobby-counter__num[b-e337s2hj3c],
    .lobby-shell[b-e337s2hj3c]  .lobby-start.mud-button-root { animation: none; transition: none; }
    .lobby-counter__num[b-e337s2hj3c] { transform: none; filter: none; }
}
/* /Components/Shared/TastingSharingSection.razor.rz.scp.css */
.qr-preview[b-e26keq5mt6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Fix MudCollapse overflow issue - ensure content is hidden when collapsed */
[b-e26keq5mt6] .mud-collapse-container {
    overflow: hidden;
}

/* Print Preview */
.print-preview-container[b-e26keq5mt6] {
    position: relative;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
    overflow: hidden;
}

.print-preview-label[b-e26keq5mt6] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.print-preview-frame[b-e26keq5mt6] {
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.print-preview-frame.preview-a4[b-e26keq5mt6] {
    aspect-ratio: 297 / 210;
    max-height: 400px;
}

.preview-image[b-e26keq5mt6] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}

.preview-placeholder[b-e26keq5mt6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--mud-palette-text-secondary);
}