/* /Components/InstallPrompt.razor.rz.scp.css */
.install-banner[b-am6vuh3tb2] {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    flex-wrap: wrap;
}

.install-banner span[b-am6vuh3tb2] {
    color: var(--md-on-surface);
    font-size: 0.9rem;
}

.install-banner-actions[b-am6vuh3tb2] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* /Components/PlayingCard.razor.rz.scp.css */
.playing-card[b-d1cmi1mug5] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4.75rem;
    height: 6.75rem;
    margin: 0.25rem;
    border-radius: var(--md-radius-sm);
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    font-weight: 700;
    font-size: 1.5rem;
    user-select: none;
    animation: card-reveal-b-d1cmi1mug5 0.25s ease-out var(--fan-delay, 0s) both;
    transform: rotate(var(--fan-rotate, 0deg)) translateY(var(--fan-lift, 0px));
    transform-origin: bottom center;
    transition: transform 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@keyframes card-reveal-b-d1cmi1mug5 {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: rotate(var(--fan-rotate, 0deg)) translateY(var(--fan-lift, 0px)); }
}

.playing-card.red[b-d1cmi1mug5] {
    color: #c0392b;
}

.playing-card.black[b-d1cmi1mug5] {
    color: var(--md-on-surface);
}

.playing-card .rank[b-d1cmi1mug5] {
    line-height: 1;
}

.playing-card .suit[b-d1cmi1mug5] {
    font-size: 2rem;
    line-height: 1;
}

.playing-card.interactive[b-d1cmi1mug5] {
    cursor: pointer;
}

.playing-card.interactive:hover[b-d1cmi1mug5],
.playing-card.selected[b-d1cmi1mug5] {
    z-index: 2;
}

.playing-card.interactive:hover[b-d1cmi1mug5] {
    transform: rotate(var(--fan-rotate, 0deg)) translateY(calc(var(--fan-lift, 0px) - 8px));
}

.playing-card.selected[b-d1cmi1mug5] {
    outline: 2px solid var(--md-primary);
    border-color: var(--md-primary);
    background: var(--md-primary-container);
    transform: rotate(var(--fan-rotate, 0deg)) translateY(calc(var(--fan-lift, 0px) - 6px));
}

/* Highlights the card(s) behind whichever score-breakdown row the user is hovering/tapping
   (see ScoreBreakdownView). Layers on top of .selected rather than replacing it, so a card can
   show both "picked for submission" and "part of this score" at once. */
.playing-card.highlighted[b-d1cmi1mug5] {
    z-index: 3;
    border-color: var(--md-secondary);
    box-shadow: 0 0 0 3px var(--md-secondary), 0 3px 8px rgba(0, 0, 0, 0.2);
    transform: rotate(var(--fan-rotate, 0deg)) translateY(calc(var(--fan-lift, 0px) - 6px));
}

/* A horizontal "coin flip" reveal (used by the Home hero fan's idle animation) -- spins the
   card edge-on via scaleX while keeping its fan rotation/lift, so the caller can swap the
   underlying Card value at the invisible midpoint (50%) for a seamless rank/suit reveal. */
@keyframes card-flip-b-d1cmi1mug5 {
    0% { transform: rotate(var(--fan-rotate, 0deg)) translateY(var(--fan-lift, 0px)) scaleX(1); }
    50% { transform: rotate(var(--fan-rotate, 0deg)) translateY(var(--fan-lift, 0px)) scaleX(0); }
    100% { transform: rotate(var(--fan-rotate, 0deg)) translateY(var(--fan-lift, 0px)) scaleX(1); }
}

.playing-card.flipping[b-d1cmi1mug5] {
    z-index: 4;
    animation: card-flip-b-d1cmi1mug5 0.4s ease-in-out;
}

/* Fanned-hand overlap. The container itself (.card-fan) is rendered by whichever page embeds
   this component, so its own layout rules live in app.css (global, unscoped) -- CSS isolation
   would otherwise scope a container-only rule to this component and it'd never match. This
   descendant rule is scoped to `.playing-card` (rendered here), so it still applies. */
.card-fan .playing-card[b-d1cmi1mug5] {
    margin-left: -1.85rem;
}

.card-fan .playing-card:first-child[b-d1cmi1mug5] {
    margin-left: 0.25rem;
}

/* Smaller fan variant used for the "best possible hand" comparison shown inside a result
   panel (BestHandTrainer). Same scoping note as above -- must live here, not in the page's
   own CSS file, since the target elements carry this component's scope, not the page's. */
.card-fan--sm .playing-card[b-d1cmi1mug5] {
    width: 3.5rem;
    height: 5rem;
    font-size: 1.1rem;
    margin-left: -1.35rem;
}

.card-fan--sm .playing-card:first-child[b-d1cmi1mug5] {
    margin-left: 0.25rem;
}

.card-fan--sm .playing-card .suit[b-d1cmi1mug5] {
    font-size: 1.5rem;
}

/* Large "hero" fan variant used by the Home landing page -- the card fan is the page's main
   visual focus there, so it goes bigger than the in-game default rather than smaller. */
.card-fan--hero .playing-card[b-d1cmi1mug5] {
    width: 6.25rem;
    height: 8.75rem;
    font-size: 1.9rem;
    margin-left: -2.4rem;
}

.card-fan--hero .playing-card:first-child[b-d1cmi1mug5] {
    margin-left: 0.25rem;
}

.card-fan--hero .playing-card .suit[b-d1cmi1mug5] {
    font-size: 2.4rem;
}
/* /Components/ScoreBreakdownView.razor.rz.scp.css */
.score-breakdown[b-rxu4k0ht30] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 14rem;
}

.breakdown-row[b-rxu4k0ht30] {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0.4rem;
    margin: 0 -0.4rem;
    border-radius: var(--md-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.breakdown-row:hover[b-rxu4k0ht30],
.breakdown-row.active[b-rxu4k0ht30] {
    background: color-mix(in srgb, var(--md-secondary) 14%, transparent);
    color: var(--md-secondary);
}

.breakdown-row.total[b-rxu4k0ht30] {
    border-top: 1px solid var(--md-outline-variant);
    margin-top: 0.25rem;
    padding-top: 0.4rem;
    cursor: default;
    font-weight: 700;
}

.breakdown-row.total:hover[b-rxu4k0ht30] {
    background: none;
    color: inherit;
}
/* /Components/SessionSetupPanel.razor.rz.scp.css */
.session-setup[b-9dce0y3b57] {
    max-width: 32rem;
    margin: 0 auto;
    width: 100%;
}

.session-setup h3[b-9dce0y3b57] {
    text-align: center;
    font-weight: 800;
}

.mode-options[b-9dce0y3b57] {
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
    border-top: 1px solid var(--md-outline-variant);
}

.mode-option[b-9dce0y3b57] {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem 0.25rem;
    cursor: pointer;
    border-bottom: 1px solid var(--md-outline-variant);
    border-left: 3px solid transparent;
    padding-left: 0.6rem;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.mode-option:hover[b-9dce0y3b57] {
    background: color-mix(in srgb, var(--md-primary) 5%, transparent);
}

.mode-option:has(input:checked)[b-9dce0y3b57] {
    border-left-color: var(--md-primary);
    background: color-mix(in srgb, var(--md-primary) 6%, transparent);
}

.mode-option-icon[b-9dce0y3b57] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    color: var(--md-on-surface-variant);
}

.mode-option:has(input:checked) .mode-option-icon[b-9dce0y3b57] {
    color: var(--md-primary);
}

.mode-option strong[b-9dce0y3b57] {
    color: var(--md-on-surface);
}

.mode-option:has(input:checked) strong[b-9dce0y3b57] {
    color: var(--md-primary);
}

.mode-option p[b-9dce0y3b57] {
    margin: 0.15rem 0 0;
    color: var(--md-on-surface-variant);
    font-size: 0.85rem;
}

.duration-options[b-9dce0y3b57] {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.table-card-option[b-9dce0y3b57] {
    margin-bottom: 1.25rem;
    text-align: center;
}

.session-setup > .ct-btn[b-9dce0y3b57] {
    display: flex;
    width: 100%;
}
/* /Components/SessionSummaryPanel.razor.rz.scp.css */
.session-summary[b-txk0s4bzq4] {
    max-width: 32rem;
    margin: 0 auto;
    text-align: center;
}

.session-summary h3[b-txk0s4bzq4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800;
}

.session-summary h3[b-txk0s4bzq4]  svg {
    color: var(--md-primary);
}

.new-high-score[b-txk0s4bzq4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: fit-content;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    margin: 0 auto 0.5rem;
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    font-weight: 700;
}

.summary-actions[b-txk0s4bzq4] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.summary-actions .ct-btn[b-txk0s4bzq4] {
    width: 100%;
}

.summary-grid[b-txk0s4bzq4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0 1.5rem;
    text-align: center;
}

.summary-grid > div[b-txk0s4bzq4] {
    display: flex;
    flex-direction: column;
}

.summary-grid-full[b-txk0s4bzq4] {
    grid-column: 1 / -1;
}

.summary-grid .value[b-txk0s4bzq4] {
    font-size: 1.4rem;
    font-weight: 700;
}

.summary-grid .label[b-txk0s4bzq4] {
    color: var(--md-on-surface-variant);
    font-size: 0.8rem;
}
/* /Layout/GameLandingLayout.razor.rz.scp.css */
.landing-shell[b-60c4itgp8g] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-fb65g71pog] {
    min-height: 100vh;
}

.corner-fab[b-fb65g71pog] {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 0.85rem);
    left: 0.85rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--md-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--md-outline-variant);
    box-shadow: var(--md-elevation-1);
    color: var(--md-on-surface-variant);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.corner-fab:hover[b-fb65g71pog] {
    color: var(--md-primary);
    transform: translateY(-1px);
}
/* /Pages/BestHandTrainer.razor.rz.scp.css */
.table-area[b-k8ic8qclu3] {
    max-width: 44rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.session-header[b-k8ic8qclu3] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    width: 100%;
}

.session-header .timer[b-k8ic8qclu3] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}

.guess-form[b-k8ic8qclu3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.result-panel[b-k8ic8qclu3] {
    width: 100%;
    padding-top: 1.25rem;
    text-align: center;
}

.result-headline[b-k8ic8qclu3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 800;
}

.result-exact[b-k8ic8qclu3] {
    color: var(--md-primary);
}

.result-over[b-k8ic8qclu3] {
    color: var(--md-error);
}

.breakdown-columns[b-k8ic8qclu3] {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1.25rem 0;
    text-align: left;
}

.breakdown-columns h4[b-k8ic8qclu3] {
    text-align: center;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.result-panel .ct-btn[b-k8ic8qclu3] {
    margin-top: 0.75rem;
}

.load-error[b-k8ic8qclu3] {
    margin-bottom: 1rem;
    padding-left: 0.9rem;
    border-left: 3px solid var(--md-error);
    color: var(--md-on-surface);
}

.load-error p[b-k8ic8qclu3] {
    margin-bottom: 0;
}

.error-actions[b-k8ic8qclu3] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}
/* /Pages/HandScoreTrainer.razor.rz.scp.css */
.table-area[b-qfwwsormfm] {
    max-width: 40rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.session-header[b-qfwwsormfm] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    width: 100%;
}

.session-header .timer[b-qfwwsormfm] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}

.score-entry[b-qfwwsormfm] {
    width: min(100%, 30rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--md-primary) 20%, var(--md-outline-variant));
    border-radius: 1.25rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--md-primary-container) 30%, var(--md-surface)), var(--md-surface) 42%);
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.09);
}

.score-display[b-qfwwsormfm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 4.25rem;
    padding: 0.55rem 0.7rem 0.55rem 1rem;
    border-radius: 0.9rem;
    background: var(--md-primary);
    color: var(--md-on-primary);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14);
}

.score-total[b-qfwwsormfm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.score-total label[b-qfwwsormfm] {
    color: color-mix(in srgb, var(--md-on-primary) 78%, transparent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.score-value[b-qfwwsormfm] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.score-total input[b-qfwwsormfm] {
    width: 3.4rem;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 2.35rem;
    font-weight: 900;
    line-height: 1;
    text-align: left;
}

.score-value span[b-qfwwsormfm] {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    opacity: 0.72;
}

.score-edit-actions[b-qfwwsormfm] {
    display: flex;
    gap: 0.35rem;
}

.score-categories[b-qfwwsormfm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.score-actions[b-qfwwsormfm] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-category[b-qfwwsormfm],
.score-action[b-qfwwsormfm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface);
    color: var(--md-primary);
    cursor: pointer;
}

.score-category[b-qfwwsormfm] {
    position: relative;
    gap: 0.45rem;
    min-height: 3.65rem;
    padding: 0.55rem 0.65rem;
    border-color: color-mix(in srgb, var(--md-primary) 18%, var(--md-outline-variant));
    border-radius: 0.85rem;
    font-weight: 800;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--md-primary) 18%, transparent);
    transition: transform 80ms ease, background-color 120ms ease, box-shadow 80ms ease;
}

.score-category--wide[b-qfwwsormfm] {
    grid-column: 1 / -1;
}

.score-category .category-name[b-qfwwsormfm] {
    color: var(--md-on-surface);
    font-size: 0.9rem;
}

.score-category strong[b-qfwwsormfm] {
    margin-left: auto;
    padding: 0.2rem 0.42rem;
    border-radius: 999px;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font-size: 0.75rem;
}

.category-count[b-qfwwsormfm] {
    position: absolute;
    top: -0.35rem;
    right: -0.3rem;
    display: grid;
    min-width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    padding: 0 0.25rem;
    border: 2px solid var(--md-surface);
    border-radius: 999px;
    background: var(--md-secondary);
    color: var(--md-on-secondary);
    font-size: 0.68rem;
    font-weight: 900;
}

.score-action[b-qfwwsormfm] {
    flex-direction: column;
    gap: 0.05rem;
    min-width: 3.1rem;
    min-height: 3.1rem;
    padding: 0.25rem 0.45rem;
    border-color: rgba(255, 255, 255, 0.25);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--md-on-primary);
}

.score-action span[b-qfwwsormfm] {
    font-size: 0.61rem;
    font-weight: 700;
}

.score-category:hover:not(:disabled)[b-qfwwsormfm],
.score-category:active:not(:disabled)[b-qfwwsormfm] {
    background: var(--md-primary-container);
}

.score-category:active:not(:disabled)[b-qfwwsormfm] {
    transform: translateY(2px) scale(0.985);
    box-shadow: none;
}

.score-action:hover:not(:disabled)[b-qfwwsormfm] {
    background: rgba(255, 255, 255, 0.2);
}

.score-category:focus-visible[b-qfwwsormfm],
.score-action:focus-visible[b-qfwwsormfm] {
    outline: 2px solid var(--md-primary);
    outline-offset: 2px;
}

.score-category:disabled[b-qfwwsormfm],
.score-action:disabled[b-qfwwsormfm] {
    opacity: 0.4;
    cursor: not-allowed;
}

.score-actions[b-qfwwsormfm] {
    margin-top: 0.05rem;
}

.submit-guess[b-qfwwsormfm] {
    width: 100%;
    min-height: 3.1rem;
    border-radius: 0.85rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--md-primary) 68%, black);
}

.submit-guess:active:not(:disabled)[b-qfwwsormfm] {
    transform: translateY(2px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--md-primary) 68%, black);
}

.result-modal-backdrop[b-qfwwsormfm] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
    background: rgba(16, 24, 20, 0.48);
}

.result-modal[b-qfwwsormfm] {
    width: min(100%, 30rem);
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 1.25rem 1.25rem;
    border-radius: 0.25rem 0.25rem var(--md-radius) var(--md-radius);
    background: var(--md-background);
    color: var(--md-on-surface);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
}

.result-panel[b-qfwwsormfm] {
    width: 100%;
    padding-top: 1.25rem;
    text-align: center;
}

.result-headline[b-qfwwsormfm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 800;
}

.result-exact[b-qfwwsormfm] {
    color: var(--md-primary);
}

.result-under[b-qfwwsormfm] {
    color: var(--md-secondary);
}

.result-over[b-qfwwsormfm] {
    color: var(--md-error);
}

.impossible-note[b-qfwwsormfm] {
    font-style: italic;
    color: var(--md-on-surface-variant);
}

.result-panel[b-qfwwsormfm]  .score-breakdown {
    text-align: left;
    max-width: 16rem;
    margin: 0.75rem auto;
}

.result-panel .ct-btn[b-qfwwsormfm] {
    margin-top: 0.75rem;
}

.load-error[b-qfwwsormfm] {
    margin-bottom: 1rem;
    padding-left: 0.9rem;
    border-left: 3px solid var(--md-error);
    color: var(--md-on-surface);
}

.load-error p[b-qfwwsormfm] {
    margin-bottom: 0;
}

.error-actions[b-qfwwsormfm] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 430px) {
    .session-header[b-qfwwsormfm] {
        margin-bottom: 0.65rem;
    }

    .table-area[b-qfwwsormfm] {
        gap: 0.75rem;
    }

    .score-entry[b-qfwwsormfm] {
        padding: 0.7rem;
    }

    .score-display[b-qfwwsormfm] {
        min-height: 4rem;
        padding-left: 0.8rem;
    }

    .score-category[b-qfwwsormfm] {
        min-height: 3.45rem;
    }

    .result-modal[b-qfwwsormfm] {
        padding-inline: 1rem;
    }

    .result-panel[b-qfwwsormfm] {
        padding-top: 0.9rem;
    }
}
/* /Pages/Help.razor.rz.scp.css */
.help-page[b-v2ea843iw6] {
    max-width: 42rem;
    margin: 0 auto;
}

.help-page section[b-v2ea843iw6] {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--md-outline-variant);
}

.help-page section:last-child[b-v2ea843iw6] {
    border-bottom: none;
    padding-bottom: 0;
}

.help-page h2[b-v2ea843iw6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.6rem;
}

.help-page h2[b-v2ea843iw6]  svg {
    color: var(--md-primary);
}

.help-page p[b-v2ea843iw6] {
    margin: 0 0 0.5rem;
}

.help-page p:last-child[b-v2ea843iw6] {
    margin-bottom: 0;
}

.help-page ul[b-v2ea843iw6] {
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

.help-page ul:last-child[b-v2ea843iw6] {
    margin-bottom: 0;
}

.help-page li[b-v2ea843iw6] {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
/* /Pages/Home.razor.rz.scp.css */
.landing[b-fhmogbbdd6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 1.5rem;
    max-width: 34rem;
    width: 100%;
    margin: 0 auto;
    padding: max(2rem, env(safe-area-inset-top)) 1.25rem calc(1.75rem + env(safe-area-inset-bottom));
}

.landing-utility[b-fhmogbbdd6] {
    margin-top: auto;
}

.landing-hero[b-fhmogbbdd6] {
    text-align: center;
}

.landing-hand-fan[b-fhmogbbdd6] {
    position: relative;
    justify-content: center;
    margin-bottom: 0.6rem;
}

/* A soft "spotlight" under the hero fan -- the cards read as sitting on/above something,
   rather than floating flat against the page. */
.landing-hand-fan[b-fhmogbbdd6]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.25rem;
    width: 65%;
    height: 1.5rem;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--md-primary) 40%, transparent) 0%, transparent 72%);
    filter: blur(6px);
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
}

.landing-hand-title[b-fhmogbbdd6] {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
    margin: 0 0 0.5rem;
}

.landing-hero h1[b-fhmogbbdd6] {
    font-size: 2.35rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
    color: var(--md-on-surface);
}

.landing-tagline[b-fhmogbbdd6] {
    color: var(--md-on-surface-variant);
    font-size: 1rem;
    margin: 0;
}

.landing-modes[b-fhmogbbdd6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mode-card[b-fhmogbbdd6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    text-decoration: none;
    color: inherit;
    border-radius: 999px;
    transition: background-color 0.15s ease-in-out;
}

.mode-card--primary[b-fhmogbbdd6] {
    background: var(--md-primary);
    color: var(--md-on-primary);
}

.mode-card--primary:hover[b-fhmogbbdd6] {
    background: color-mix(in srgb, var(--md-primary) 88%, black);
}

.mode-card-icon[b-fhmogbbdd6] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mode-card-body[b-fhmogbbdd6] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.mode-card-title[b-fhmogbbdd6] {
    font-weight: 700;
    font-size: 1.15rem;
}

.mode-card-desc[b-fhmogbbdd6] {
    font-size: 0.88rem;
    opacity: 0.88;
}

.mode-card-play[b-fhmogbbdd6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--md-on-primary) 20%, transparent);
    animation: play-pulse-b-fhmogbbdd6 2.4s ease-in-out infinite;
}

@keyframes play-pulse-b-fhmogbbdd6 {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--md-on-primary) 45%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--md-on-primary) 0%, transparent); }
}

.landing-utility[b-fhmogbbdd6] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.utility-btn[b-fhmogbbdd6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    max-width: 8rem;
    padding: 0.85rem 0.5rem;
    text-decoration: none;
    color: var(--md-on-surface-variant);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--md-radius-sm);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.utility-btn:hover[b-fhmogbbdd6] {
    color: var(--md-primary);
    background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

@media (min-width: 30rem) {
    .landing-modes[b-fhmogbbdd6] {
        gap: 1.25rem;
    }
}
/* /Pages/Stats.razor.rz.scp.css */
.stats-section[b-jq3mzyaflu] {
    max-width: 60rem;
    margin: 0 auto 1.5rem auto;
}

.stats-section h2[b-jq3mzyaflu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.85rem;
}

.stats-section h3[b-jq3mzyaflu] {
    text-align: center;
}

.stats-section h2[b-jq3mzyaflu]  svg {
    color: var(--md-primary);
}

.empty-state[b-jq3mzyaflu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--md-on-surface-variant);
    border: 1px dashed var(--md-outline-variant);
    border-radius: var(--md-radius-sm);
}

.empty-state[b-jq3mzyaflu]  svg {
    color: var(--md-primary);
    opacity: 0.6;
}

.empty-state p[b-jq3mzyaflu] {
    margin: 0;
    max-width: 26rem;
}

.empty-state-text[b-jq3mzyaflu] {
    color: var(--md-on-surface-variant);
}

.high-score-list[b-jq3mzyaflu] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--md-outline-variant);
}

.high-score-card[b-jq3mzyaflu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    padding: 1rem 0.25rem;
    border-bottom: 1px solid var(--md-outline-variant);
}

.hs-main[b-jq3mzyaflu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 12rem;
}

.hs-title[b-jq3mzyaflu] {
    font-weight: 700;
    font-size: 1.02rem;
    margin-right: 0.15rem;
}

.hs-score[b-jq3mzyaflu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 1rem;
    border-radius: 0.85rem;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

.hs-score-value[b-jq3mzyaflu] {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.1;
}

.hs-score-label[b-jq3mzyaflu] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hs-meta[b-jq3mzyaflu] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem 1rem;
    font-size: 0.82rem;
    color: var(--md-on-surface-variant);
    width: 100%;
    text-align: center;
}

/* Compact 2-up grid so the full Skill Profile fits with far less scrolling on mobile --
   stat-tile normally lays out icon+text in a row (see app.css), but that wastes width in a
   narrow column, so here each tile stacks icon/value/label vertically and centers itself. */
.skill-grid[b-jq3mzyaflu] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 0.75rem;
    margin-bottom: 1.25rem;
}

.skill-grid .stat-tile[b-jq3mzyaflu] {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    padding: 0.75rem 0.25rem;
}

/* Odd tile count -- give the trailing tile the full row instead of leaving it stranded
   in a lone half-width column. */
.skill-grid .stat-tile:last-child[b-jq3mzyaflu] {
    grid-column: 1 / -1;
}

.skill-grid .stat-tile .stat-body[b-jq3mzyaflu] {
    align-items: center;
}

.skill-grid .stat-tile .value[b-jq3mzyaflu] {
    font-size: 1.15rem;
}

.skill-grid .stat-tile .label[b-jq3mzyaflu] {
    font-size: 0.68rem;
    line-height: 1.2;
}

@media (min-width: 30rem) {
    .skill-grid[b-jq3mzyaflu] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stats-section h3[b-jq3mzyaflu] {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.missed-list[b-jq3mzyaflu] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    margin: 0;
}