@keyframes credify-money-in {
    0%   { transform: translate(-50%, -50%) scale(0.3) rotate(-7deg); opacity: 0; }
    60%  { transform: translate(-50%, -50%) scale(1.14) rotate(1.5deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes credify-money-sheen {
    from { background-position: 0% 0%; }
    to   { background-position: 0% 300%; }
}

@keyframes credify-money-bloom-in {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes credify-money-bloom-pulse {
    from { opacity: 0.7; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1.08); }
}

@keyframes credify-money-stamp {
    0% {
        transform: translate(-50%, -50%) scale(1);
        filter: drop-shadow(0 2px 0 rgba(120, 53, 15, 0.9)) drop-shadow(0 0 18px rgba(252, 211, 77, 0.45));
        opacity: 1;
    }
    35% {
        transform: translate(-50%, -50%) scale(1.22);
        filter: drop-shadow(0 2px 0 rgba(120, 53, 15, 0.9)) drop-shadow(0 0 34px rgba(255, 232, 160, 0.95))
                brightness(1.55);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        filter: drop-shadow(0 2px 0 rgba(120, 53, 15, 0.9)) drop-shadow(0 0 18px rgba(252, 211, 77, 0.45));
        opacity: 1;
    }
}

@keyframes credify-money-bloom-out {
    0%   { opacity: 0.9; transform: scale(1); }
    30%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(1.3); }
}

@keyframes credify-money-out {
    from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    to   { transform: translate(-50%, -230%) scale(0.82) rotate(3deg); opacity: 0; }
}
@keyframes credify-livepip {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@keyframes credify-toast {
    0%   { opacity: 0; transform: translateY(-14px) scale(0.92); }
    7%   { opacity: 1; transform: translateY(0) scale(1); }
    11%  { transform: translateY(0) scale(1.04); }
    16%  { transform: translateY(0) scale(1); }
    84%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) scale(0.98); }
}
@keyframes credify-sgraph-pulse {
    0% { r: 3; opacity: 0.9; stroke-width: 2; }
    100% { r: 13; opacity: 0; stroke-width: 0.5; }
}

@keyframes credify-card-deal {
    from { opacity: 0; transform: translateY(-2.4rem) scale(0.85) rotate(-4deg); }
    to   { opacity: 1; transform: none; }
}

@keyframes credify-card-reveal {
    from { transform: rotateY(90deg); opacity: 0.15; }
    to   { transform: rotateY(0deg); opacity: 1; }
}
@keyframes credify-card-win-pulse {
    0%, 100% { box-shadow: 0 0 0 2px #fbbf24, 0 0 14px 1px rgba(251, 191, 36, 0.45), 0 6px 14px rgba(0, 0, 0, 0.4); }
    50%      { box-shadow: 0 0 0 2px #fcd34d, 0 0 22px 4px rgba(251, 191, 36, 0.75), 0 6px 14px rgba(0, 0, 0, 0.4); }
}
@scope ([data-iw4m-plugin="Credify"]) to ([data-iw4m-host]) {
/*
 * Hand-written CSS shipped alongside the Tailwind output, to show both can coexist in one bundle.
 * Bundled as-is (the build does not touch it) and served at /_content/credify/custom.css.
 * References a host design token so it matches the active theme.
 */
.credify-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--color-action-primary, #6366f1) 20%, transparent);
    color: var(--color-action-primary, #818cf8);
}

/* Credify's own sub-navigation (CredifyNav.razor) */
.credify-subnav {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.75rem;
    background: var(--color-surface-alt, rgba(0, 0, 0, 0.28));
    border: 1px solid var(--color-line, rgba(255, 255, 255, 0.08));
}
.credify-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.55rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-subtle, #a1a1aa);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.credify-subnav-link:hover {
    color: var(--color-foreground, #ffffff);
    background: var(--color-surface-hover, rgba(255, 255, 255, 0.06));
}
.credify-subnav-link.active {
    color: #ffffff;
    background: var(--color-action-primary, #6366f1);
}

/* ── money-count popup (GMod-Tower style win effect, spawned by audio.js) ──
   Three phases mirroring the sound's arc, orchestrated by class switches from moneyCounter():
     1. base class        → slam-in (overshoot scale) + molten-gold sheen while the number counts
     2. …-pop-done        → "stamp" on the landed value: scale punch, brightness flare, shock ring
     3. …-pop-out         → drift up and dissolve
   Animations replace each other wholesale per phase (fill: both), so transform/filter never fight a
   transition. transform/opacity/background-position only — compositor-friendly. All keyframes are
   credify- prefixed: the host hoists @keyframes out of the plugin's @scope, so names are global. */
.credify-money-pop {
    position: fixed;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.2rem, 8vw, 4.5rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    /* molten gold: gradient fill clipped to the glyphs, swept by animating background-position */
    background-image: linear-gradient(170deg,
        #fff7d6 0%, #ffe588 16%, #fcd34d 34%, #f59e0b 52%, #b45309 68%, #fcd34d 84%, #fff7d6 100%);
    background-size: 100% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0 rgba(120, 53, 15, 0.9)) drop-shadow(0 0 18px rgba(252, 211, 77, 0.45));
    animation:
        credify-money-in 0.45s cubic-bezier(0.22, 1.6, 0.36, 1) both,
        credify-money-sheen 1.2s linear 0.45s infinite;
}

/* soft glow bloom behind the number, breathing while the count runs — deliberately faint:
   the flare on the glyphs (drop-shadows in the stamp keyframes) carries the impact */
.credify-money-pop::before {
    content: '';
    position: absolute;
    inset: -30% -15%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(252, 211, 77, 0.14), rgba(252, 211, 77, 0));
    animation:
        credify-money-bloom-in 0.45s ease-out both,
        credify-money-bloom-pulse 1.3s ease-in-out 0.45s infinite alternate;
}

/* phase 2 — the landed value stamps: punch + flare; sheen stops so the gold "sets" */
.credify-money-pop.credify-money-pop-done {
    animation: credify-money-stamp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* the bloom flares once with the stamp, then dissolves — nothing lingers behind the number */
.credify-money-pop.credify-money-pop-done::before {
    animation: credify-money-bloom-out 0.5s ease-out both;
}

/* phase 3 — must follow the -done rule in source order so it wins while both classes are present */
.credify-money-pop.credify-money-pop-out {
    animation: credify-money-out 0.55s cubic-bezier(0.4, 0, 1, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .credify-money-pop,
    .credify-money-pop::before,
    .credify-money-pop.credify-money-pop-done,
    .credify-money-pop.credify-money-pop-done::before {
        animation: none;
    }
    .credify-money-pop.credify-money-pop-out {
        animation: none;
        opacity: 0;
        transition: opacity 0.4s ease;
    }
}

/* ── volume control (CredifyAudioControls.razor) ── */
.credify-audio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.credify-audio-btn {
    display: inline-flex;
    align-items: center;
    color: var(--color-subtle, #a1a1aa);
    font-size: 1rem;
    transition: color 0.15s ease;
}
.credify-audio-btn:hover { color: #ffffff; }
.credify-audio-range {
    -webkit-appearance: none;
    appearance: none;
    width: 4.5rem;
    height: 0.3rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.18);
    outline: none;
    cursor: pointer;
}
.credify-audio-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--color-action-primary, #818cf8);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}
.credify-audio-range::-moz-range-thumb {
    width: 0.85rem;
    height: 0.85rem;
    border: none;
    border-radius: 50%;
    background: var(--color-action-primary, #818cf8);
}

/* the right-aligned side nav now comes from WebCommon's shared SideContextMenu/PluginPageShell
   (host-themed), so Credify no longer ships its own .credify-sidenav styles. */

/* neutral felt for non-game Credify pages (Credits) */
.credify-felt {
    background: radial-gradient(130% 110% at 50% -10%, #1d1f29 0%, #141620 45%, #0a0b10 100%);
    border-radius: 1rem;
    box-shadow: inset 0 0 130px rgba(0, 0, 0, 0.5);
}

/* ── home page (Credits.razor) — the casino lobby ── */
.credify-panel {
    padding: 1rem 1.1rem;
    border-radius: 0.9rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.credify-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 800;
}
.credify-panel-title i { color: var(--color-action-primary, #818cf8); }
.credify-panel-foot {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}
.credify-panel code {
    padding: 0.05rem 0.3rem;
    border-radius: 0.3rem;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.85em;
}

.credify-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.credify-muted { color: rgba(255, 255, 255, 0.5); font-weight: 500; }

.credify-me {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background:
        radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--color-action-primary, #6366f1) 12%, transparent), transparent 55%),
        rgba(0, 0, 0, 0.28);
}

.credify-title-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(252, 211, 77, 0.12);
    border: 1px solid rgba(252, 211, 77, 0.3);
    color: #fcd34d;
    white-space: nowrap;
}

/* generic two-sided list row (leaderboard, bounties, purchases) */
.credify-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.875rem;
}
.credify-row-you { border-color: rgba(252, 211, 77, 0.35); background: rgba(252, 211, 77, 0.05); }
a.credify-row { transition: background 0.12s ease, border-color 0.12s ease; }
a.credify-row:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.12); }

/* casino floor rows are links — same skin plus hover lift */
.credify-floor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.875rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.credify-floor-row:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.12); }
.credify-floor-game { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.credify-floor-game i { color: var(--color-action-primary, #818cf8); }
.credify-floor-count { font-size: 0.75rem; color: rgba(255, 255, 255, 0.35); white-space: nowrap; }
.credify-floor-live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #6ee7b7;
    font-weight: 700;
}

.credify-livepip {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
    animation: credify-livepip 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

.credify-raffle-pot { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.6rem; }
.credify-raffle-amount {
    font-size: 1.6rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: #fcd34d;
    text-shadow: 0 0 22px rgba(252, 211, 77, 0.3);
}

.credify-bounty-amount { font-weight: 800; font-variant-numeric: tabular-nums; color: #fda4af; }

/* quest rows: icon | name + progress bar | count + reward */
.credify-quest {
    display: grid;
    grid-template-columns: 1.8rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.875rem;
}
.credify-quest-done { opacity: 0.65; }
.credify-quest-icon { text-align: center; color: var(--color-action-primary, #818cf8); }
.credify-quest-tag {
    padding: 0.05rem 0.4rem;
    border-radius: 9999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}
.credify-quest-reward { margin-left: 0.5rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #6ee7b7; }
.credify-qbar {
    display: block;
    height: 0.25rem;
    margin-top: 0.3rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.credify-qbar-fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--color-action-primary, #6366f1), #34d399);
    transition: width 0.4s ease;
}

/* leaderboard medals */
.credify-rank {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.credify-rank-1 { background: rgba(252, 211, 77, 0.18); color: #fcd34d; box-shadow: 0 0 10px rgba(252, 211, 77, 0.25); }
.credify-rank-2 { background: rgba(212, 212, 216, 0.15); color: #e4e4e7; }
.credify-rank-3 { background: rgba(217, 119, 6, 0.18); color: #fbbf24; }

@media (prefers-reduced-motion: reduce) {
    .credify-livepip { animation: none; }
}

/* ── shared countdown (GameCountdown.razor) ── */
.credify-countdown { width: 100%; max-width: 22rem; margin-inline: auto; }
.credify-countdown-head {
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 700; font-size: 0.9rem; color: #e4e4e7;
    padding: 0.4rem 0.7rem; border-radius: 0.7rem 0.7rem 0 0;
    background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: none;
}
.credify-countdown-label { flex: 1; }
.credify-countdown-secs { font-variant-numeric: tabular-nums; color: #fcd34d; }
.credify-countdown-bar {
    height: 6px; border-radius: 0 0 0.7rem 0.7rem; overflow: hidden;
    background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); border-top: none;
}
.credify-countdown-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-action-primary, #6366f1), #fcd34d);
    transition: width 0.25s linear;
}

/* ── shared table card (JoinTablePanel.razor) — sign-in / join / buy-in ── */
.credify-join {
    text-align: center; border-radius: 1rem; padding: 1.5rem 1.25rem;
    background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.credify-join-icon { font-size: 2.75rem; color: var(--color-action-primary, #818cf8); }
.credify-join-title { margin-top: 0.6rem; font-size: 1.15rem; font-weight: 800; }
.credify-join-desc { margin-top: 0.35rem; font-size: 0.875rem; color: var(--color-subtle, #a1a1aa); }
.credify-join-action { margin-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.credify-join-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.4rem; border-radius: 0.8rem; font-weight: 800; color: #fff;
    background: var(--color-action-primary, #6366f1); transition: filter 0.15s ease, transform 0.05s ease;
}
.credify-join-btn:hover:not(:disabled) { filter: brightness(1.1); }
.credify-join-btn:active:not(:disabled) { transform: translateY(1px); }
.credify-join-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── shared stake selector (BetControl.razor) — identical across every single-bet game ── */
.credify-bet { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.credify-bet-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; }
.credify-bet-chip {
    min-width: 3.2rem; padding: 0.45rem 0.7rem; border-radius: 0.6rem;
    font-weight: 700; font-size: 0.85rem; color: #e4e4e7;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.15s ease, transform 0.05s ease;
}
.credify-bet-chip:hover:not(:disabled) { background: rgba(255, 255, 255, 0.13); }
.credify-bet-chip:active:not(:disabled) { transform: translateY(1px); }
.credify-bet-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.credify-bet-chip--max { color: #fcd34d; }
.credify-bet-chip--clear { color: #fda4af; min-width: 2.4rem; }

.credify-bet-entry { display: flex; align-items: center; gap: 0.55rem; }
.credify-bet-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-subtle, #a1a1aa); }
.credify-bet-input {
    width: 8.5rem; padding: 0.45rem 0.6rem; border-radius: 0.6rem;
    font-size: 1.05rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums;
    color: #fcd34d; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.credify-bet-input:focus {
    outline: none; border-color: var(--color-action-primary, #818cf8);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-action-primary, #818cf8) 30%, transparent);
}
.credify-bet-input:disabled { opacity: 0.5; cursor: not-allowed; }
.credify-bet-cap { font-size: 0.7rem; color: var(--color-subtle, #a1a1aa); }
.credify-bet--disabled { opacity: 0.85; }

/* ── shared win/loss toast (GameResultToast.razor) ── */
/* Fixed, out-of-flow notification so a result never reflows the game page. Pops in, holds, auto-dismisses. */
.credify-toast-host {
    position: fixed;
    top: 4.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none;
    width: max-content;
    max-width: min(92vw, 26rem);
}
.credify-toast {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 1.15rem;
    border-radius: 0.85rem;
    border: 1px solid transparent;
    backdrop-filter: blur(6px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    animation: credify-toast 4.2s cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}
.credify-toast-icon { font-size: 1.6rem; flex: 0 0 auto; }
.credify-toast-text { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.credify-toast-title { font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; }
.credify-toast-amount { font-weight: 800; font-variant-numeric: tabular-nums; opacity: 0.95; white-space: nowrap; }

.credify-toast--win {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.45);
    color: #6ee7b7;
}
.credify-toast--lose {
    background: rgba(244, 63, 94, 0.16);
    border-color: rgba(244, 63, 94, 0.4);
    color: #fda4af;
}
.credify-toast--jackpot {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.55);
    color: #fcd34d;
}

@media (prefers-reduced-motion: reduce) {
    .credify-toast { animation: credify-toast-fade 4.2s ease forwards; }
    @keyframes credify-toast-fade { 0% { opacity: 0; } 6% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }
}

/* ── session history rail (GameHistoryPanel.razor) ── */
/* Anchored with position:absolute so it pins to the host's content area (the <main> element is
   position:relative) instead of the viewport — that keeps it inside the body the page renders in,
   clear of the host top bar and left sidebar nav, without reflowing the centred game content. The
   card slides out over the game content and collapses to a slim tab. */
.credify-history { /* logical wrapper only — children are absolutely-positioned */ }

/* Push the page content aside so the rail never sits over the game (desktop only). The :has() targets
   the host content column (the rail is its grandchild): a slim left gutter reserves room for the
   collapsed tab, a wider one for the open drawer. Canvas games get a JS resize nudge on toggle
   (GameHistoryPanel -> shared/history.js) so their canvas re-measures into the new width. */
@media (min-width: 1024px) {
    *:has(> * > .credify-history) {
        padding-left: 2.75rem;
        transition: padding-left 0.25s cubic-bezier(0.2, 0.9, 0.25, 1);
    }
    *:has(> * > .credify-history--open) {
        padding-left: 15rem;
    }
}

.credify-history-tab,
.credify-history-card {
    position: absolute;
    left: 0;
    top: 4.75rem; /* clear the page title/header row */
}

.credify-history-tab {
    z-index: 9996;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0 0.7rem 0.7rem 0;
    background: rgba(10, 12, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: none;
    color: var(--color-subtle, #a1a1aa);
    font-weight: 700;
    font-size: 0.8rem;
    writing-mode: vertical-rl;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: color 0.15s ease, background 0.15s ease;
}
.credify-history-tab:hover { color: #fff; background: rgba(20, 24, 36, 0.96); }
.credify-history-tab-text { letter-spacing: 0.08em; text-transform: uppercase; }

.credify-history-card {
    z-index: 9997;
    width: 14rem;
    max-height: calc(100% - 6rem);
    overflow-y: auto;
    padding: 0.6rem;
    border-radius: 0 0.85rem 0.85rem 0;
    background: rgba(10, 12, 20, 0.94);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: none;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
    transform: translateX(-110%);
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.credify-history--open .credify-history-card { transform: translateX(0); }

.credify-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.15rem 0.15rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.credify-history-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-subtle, #a1a1aa);
}
.credify-history-close {
    display: inline-flex;
    color: var(--color-subtle, #a1a1aa);
    padding: 0.1rem 0.25rem;
    border-radius: 0.4rem;
    transition: color 0.15s ease, background 0.15s ease;
}
.credify-history-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.credify-history-empty { padding: 0.8rem 0.3rem; font-size: 0.8rem; color: var(--color-subtle, #a1a1aa); text-align: center; }

.credify-history-list { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.4rem; }
.credify-history-row {
    display: grid;
    grid-template-columns: 1.4rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.82rem;
}
.credify-history-game { color: var(--color-subtle, #a1a1aa); text-align: center; }
.credify-history-label { color: #d4d4d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.credify-history-net { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.credify-history-net.pos { color: #6ee7b7; }
.credify-history-net.neg { color: #fda4af; }

/* ── session P/L graph (GameHistoryPanel → SessionGraphPanel → shared/session-graph.js) ── */
/* A live sparkline of the session's cumulative net, sitting at the top of the history rail's card.
   The curve + fill use a hard-split gradient: emerald above the dashed breakeven line, rose below —
   the chart reads at a glance without a legend. Blazor owns the .credify-sgraph slot; the JS module
   owns everything inside it. */
.credify-sgraph {
    margin-top: 0.5rem;
    padding: 0.5rem 0.55rem 0.4rem;
    border-radius: 0.6rem;
    background:
        radial-gradient(120% 90% at 50% -20%, rgba(99, 102, 241, 0.08), transparent 60%),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.credify-sgraph-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.credify-sgraph-time { font-size: 0.68rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.35); }

.credify-sgraph-net {
    font-size: 1.05rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: #a1a1aa;
    transition: color 0.3s ease;
}
.credify-sgraph-net.pos { color: #6ee7b7; text-shadow: 0 0 16px rgba(52, 211, 153, 0.35); }
.credify-sgraph-net.neg { color: #fda4af; text-shadow: 0 0 16px rgba(251, 113, 133, 0.25); }

.credify-sgraph-chartwrap { margin-top: 0.35rem; }
.credify-sgraph-chartwrap svg { display: block; width: 100%; height: 3.75rem; }
.credify-sgraph--empty .credify-sgraph-chartwrap svg { opacity: 0.5; }

/* the live tip of the curve: a solid dot + a pulse ring re-fired on every settled play */
.credify-sgraph-dot { stroke: rgba(10, 12, 20, 0.9); stroke-width: 1.5; }
.credify-sgraph-pulse {
    fill: none;
    stroke: currentColor;
    animation: credify-sgraph-pulse 1.1s ease-out;
    r: 3;
    opacity: 0;
}

.credify-sgraph-foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.4);
}
.credify-sgraph-foot i { vertical-align: -0.08em; }
.credify-sgraph-foot b { font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.6); }
.credify-sgraph-plays { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
    .credify-sgraph-pulse { animation: none; }
}

/* ── shared playing card (PlayingCard.razor) ─────────────────────────────
   One card kit for every card game. Was bj-card* in blackjack.css; promoted here so Poker,
   Hold'em and Three-Card share the exact same look, deal-in, flip-reveal and win glow. */
.credify-card {
    width: 4.25rem;
    height: 6rem;
    flex: 0 0 auto;
    border-radius: 0.5rem;
    transform-style: preserve-3d;
}
.credify-card img { border-radius: 0.5rem; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }

.credify-card-face {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ffffff, #f3f4f6);
    border-radius: 0.5rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.credify-card-red { color: #e11d48; }
.credify-card-black { color: #18181b; }

.credify-card-corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.95;
    font-weight: 800;
}
.credify-card-tl { top: 0.3rem; left: 0.4rem; }
.credify-card-br { bottom: 0.3rem; right: 0.4rem; transform: rotate(180deg); }
.credify-card-rank { font-size: 1rem; }
.credify-card-suit { font-size: 0.8rem; }
.credify-card-pip {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    opacity: 0.92;
}
.credify-card-deal { animation: credify-card-deal 0.38s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
.credify-card-reveal { animation: credify-card-reveal 0.42s ease-out both; }

/* winning card — a warm gold ring + soft pulse so a winning hand reads at a glance */
.credify-card-win .credify-card-face {
    box-shadow: 0 0 0 2px #fbbf24, 0 0 16px 2px rgba(251, 191, 36, 0.55), 0 6px 14px rgba(0, 0, 0, 0.4);
    animation: credify-card-win-pulse 1.4s ease-in-out infinite;
}

@media (min-width: 640px) {
    .credify-card { width: 5rem; height: 7rem; }
    .credify-card-pip { font-size: 2.9rem; }
    .credify-card-rank { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .credify-card-deal,
    .credify-card-reveal { animation: none; }
    .credify-card-win .credify-card-face { animation: none; }
}

/* Compact variant (PlayingCard Compact="true") — for rows that show many cards at once, e.g. the
   five-card video-poker hand. Responsive so they always fit a narrow machine screen. */
.credify-card-sm { width: clamp(2.9rem, 16.5vw, 5rem); height: clamp(4rem, 23vw, 7rem); }

/* ── achievement gallery (Profile.razor) ─────────────────────────────── */
.credify-ach {
    display: flex; gap: 0.6rem; align-items: flex-start;
    padding: 0.7rem 0.8rem; border-radius: 0.7rem;
    background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0.7;
}
.credify-ach-on {
    opacity: 1;
    background:
        radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, #fbbf24 12%, transparent), transparent 60%),
        rgba(0, 0, 0, 0.3);
    border-color: rgba(251, 191, 36, 0.3);
}
.credify-ach-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 0.55rem; font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.06); color: #a1a1aa;
}
.credify-ach-on .credify-ach-icon {
    background: radial-gradient(circle at 50% 35%, #fde68a, #fbbf24);
    color: #1a1022; box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}
.credify-ach-desc { font-size: 0.75rem; color: #a1a1aa; margin-top: 0.1rem; }
.credify-ach-reward { font-size: 0.75rem; font-weight: 700; color: #6ee7b7; margin-top: 0.35rem; }
.credify-ach-bar {
    height: 0.3rem; border-radius: 9999px; overflow: hidden; margin-top: 0.45rem;
    background: rgba(255, 255, 255, 0.1);
}
.credify-ach-fill {
    display: block; height: 100%; border-radius: 9999px;
    background: linear-gradient(90deg, var(--color-action-primary, #6366f1), #fbbf24);
}
.credify-ach-prog { font-size: 0.68rem; color: #71717a; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }

/* ── leaderboard tabs (Leaderboards.razor) ───────────────────────────── */
.credify-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.credify-tab {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.85rem; border-radius: 9999px; font-weight: 600; font-size: 0.85rem;
    color: #a1a1aa; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.credify-tab:hover { color: #e4e4e7; background: rgba(255, 255, 255, 0.08); }
.credify-tab-on {
    color: #fff;
    background: color-mix(in srgb, var(--color-action-primary, #6366f1) 30%, transparent);
    border-color: color-mix(in srgb, var(--color-action-primary, #6366f1) 55%, transparent);
}

}