/* /Components/ApiWaitOverlay.razor.rz.scp.css */
.api-wait[b-aplpf10h13] {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 900;
    width: min(390px, calc(100vw - 32px));
    min-height: 74px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid rgba(183, 144, 72, 0.42);
    border-radius: 8px;
    background: rgba(14, 18, 16, 0.96);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    color: var(--ink);
    backdrop-filter: blur(10px);
    animation: api-wait-in-b-aplpf10h13 170ms ease-out;
}

.api-wait-orbit[b-aplpf10h13] {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: api-wait-spin-b-aplpf10h13 1800ms linear infinite;
}

.api-wait-orbit span[b-aplpf10h13] {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 14px currentColor;
}

.api-wait-orbit span:nth-child(1)[b-aplpf10h13] {
    top: -2px;
    left: 16px;
    color: #f3e6c4;
    background: currentColor;
}

.api-wait-orbit span:nth-child(2)[b-aplpf10h13] {
    top: 11px;
    right: 0;
    color: #6aa6d8;
    background: currentColor;
}

.api-wait-orbit span:nth-child(3)[b-aplpf10h13] {
    right: 5px;
    bottom: 2px;
    color: #6f687a;
    background: currentColor;
}

.api-wait-orbit span:nth-child(4)[b-aplpf10h13] {
    left: 5px;
    bottom: 2px;
    color: #d36a5e;
    background: currentColor;
}

.api-wait-orbit span:nth-child(5)[b-aplpf10h13] {
    top: 11px;
    left: 0;
    color: #69b979;
    background: currentColor;
}

.api-wait-copy[b-aplpf10h13] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.api-wait-copy strong[b-aplpf10h13] {
    font: 800 12px/1 var(--font-ui);
    color: var(--ink);
}

.api-wait-copy span[b-aplpf10h13] {
    color: var(--ink-2);
    font: 650 13px/1.35 var(--font-ui);
    overflow-wrap: anywhere;
}

@keyframes api-wait-in-b-aplpf10h13 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes api-wait-spin-b-aplpf10h13 {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce), (max-width: 640px) {
    .api-wait[b-aplpf10h13],
    .api-wait-orbit[b-aplpf10h13] {
        animation: none;
    }
}
/* /Components/Auth/SignInPrompt.razor.rz.scp.css */
.signin-trigger[b-zjrzqw5931] {
    align-items: center;
    background: var(--jade);
    border: 1px solid var(--jade);
    border-radius: 7px;
    color: #06120c;
    cursor: pointer;
    display: inline-flex;
    font: 800 11px/1 var(--font-ui);
    justify-content: center;
    min-height: 30px;
    padding: 8px 11px;
    text-decoration: none;
    transition: filter 0.15s;
    white-space: nowrap;
}

.signin-trigger:hover[b-zjrzqw5931],
.signin-trigger:focus-visible[b-zjrzqw5931] {
    filter: brightness(1.06);
    outline: none;
}

.signin-trigger.hero[b-zjrzqw5931] {
    font-size: 13px;
    min-height: 40px;
    padding: 12px 16px;
}

.signin-backdrop[b-zjrzqw5931] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(4, 7, 6, 0.72);
    backdrop-filter: blur(8px);
}

.signin-dialog[b-zjrzqw5931] {
    width: min(100%, 420px);
    background: var(--surf);
    border: 1px solid rgba(103, 181, 141, 0.28);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    color: var(--ink);
    padding: 22px;
}

.signin-head[b-zjrzqw5931] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.signin-eyebrow[b-zjrzqw5931] {
    color: var(--ink-3);
    font: 800 10px/1 var(--font-ui);
    letter-spacing: 1.4px;
    margin: 0 0 9px;
    text-transform: uppercase;
}

.signin-head h2[b-zjrzqw5931] {
    color: var(--ink);
    font-family: var(--font-disp);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

.signin-close[b-zjrzqw5931] {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surf-raised);
    color: var(--ink-2);
    cursor: pointer;
    display: grid;
    flex: 0 0 auto;
    font: 800 12px/1 var(--font-ui);
    place-items: center;
}

.signin-close:hover[b-zjrzqw5931],
.signin-close:focus-visible[b-zjrzqw5931] {
    color: var(--ink);
    border-color: rgba(103, 181, 141, 0.4);
    outline: none;
}

.signin-provider-actions[b-zjrzqw5931] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.signin-provider-form[b-zjrzqw5931] {
    margin: 0;
}

.signin-provider[b-zjrzqw5931] {
    align-items: center;
    appearance: none;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font: 800 13px/1 var(--font-ui);
    justify-content: center;
    min-height: 42px;
    padding: 12px 14px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    width: 100%;
}

.signin-provider:hover[b-zjrzqw5931],
.signin-provider:focus-visible[b-zjrzqw5931] {
    background: rgba(103, 181, 141, 0.08);
    border-color: rgba(103, 181, 141, 0.36);
    text-decoration: none;
    outline: none;
}

.signin-provider.primary[b-zjrzqw5931] {
    background: var(--jade);
    border-color: var(--jade);
    color: #06120c;
}

.signin-provider.primary:hover[b-zjrzqw5931],
.signin-provider.primary:focus-visible[b-zjrzqw5931] {
    filter: brightness(1.06);
}
/* /Components/BossfightWaitOverlay.razor.rz.scp.css */
.bossfight-wait[b-wj4s7vtbjw] {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(4, 9, 7, .88), rgba(4, 9, 7, .8)),
        repeating-linear-gradient(90deg, rgba(159, 224, 189, .055) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg, rgba(217, 189, 113, .04) 0 1px, transparent 1px 48px),
        rgba(3, 7, 5, .82);
    cursor: wait;
    display: grid;
    inset: 0;
    justify-items: center;
    padding: 22px;
    pointer-events: auto;
    position: fixed;
    z-index: 940;
}

.bossfight-wait-modal[b-wj4s7vtbjw] {
    background:
        linear-gradient(135deg, rgba(17, 25, 20, .98), rgba(8, 12, 10, .99)),
        var(--surf);
    border: 1px solid rgba(159, 224, 189, .26);
    border-radius: 10px;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, .54),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    display: grid;
    gap: 0;
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
    max-width: min(980px, calc(100vw - 36px));
    min-height: 430px;
    overflow: hidden;
    width: 100%;
}

.bossfight-wait-visual[b-wj4s7vtbjw] {
    --bossfight-runner-art: linear-gradient(135deg, rgba(43, 57, 47, .9), rgba(13, 19, 16, .96));
    align-items: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)),
        rgba(255, 255, 255, .025);
    border-right: 1px solid rgba(255, 255, 255, .08);
    display: grid;
    gap: 18px;
    justify-items: center;
    min-height: 390px;
    overflow: hidden;
    padding: 30px;
    position: relative;
}

.bossfight-wait-art[b-wj4s7vtbjw] {
    background-image:
        linear-gradient(180deg, rgba(4, 9, 7, .06), rgba(4, 9, 7, .72)),
        var(--bossfight-runner-art);
    background-position: center;
    background-size: cover;
    inset: 0;
    opacity: .62;
    position: absolute;
    transform: scale(1.04);
}

.bossfight-wait-visual[b-wj4s7vtbjw]::after {
    background:
        linear-gradient(90deg, rgba(4, 9, 7, .72), rgba(4, 9, 7, .24)),
        radial-gradient(circle at 50% 38%, rgba(159, 224, 189, .2), transparent 45%);
    content: "";
    inset: 0;
    position: absolute;
}

.bossfight-wait-arena[b-wj4s7vtbjw],
.bossfight-wait-active[b-wj4s7vtbjw] {
    position: relative;
    z-index: 1;
}

.bossfight-wait-arena[b-wj4s7vtbjw] {
    aspect-ratio: 1;
    background:
        radial-gradient(circle, rgba(159, 224, 189, .16) 0 7%, transparent 8%),
        radial-gradient(circle, rgba(217, 189, 113, .1), rgba(4, 9, 7, .18) 54%, rgba(4, 9, 7, .74) 55%),
        conic-gradient(from 18deg, rgba(159, 224, 189, .2), rgba(217, 189, 113, .18), rgba(106, 166, 216, .16), rgba(211, 106, 94, .14), rgba(159, 224, 189, .2));
    border: 1px solid rgba(159, 224, 189, .26);
    border-radius: 50%;
    box-shadow:
        inset 0 0 38px rgba(0, 0, 0, .5),
        0 18px 54px rgba(0, 0, 0, .36),
        0 0 44px rgba(159, 224, 189, .1);
    max-width: 292px;
    width: 100%;
}

.bossfight-wait-seat[b-wj4s7vtbjw] {
    background: rgba(247, 250, 244, .74);
    border: 2px solid rgba(4, 9, 7, .82);
    border-radius: 999px;
    box-shadow: 0 0 20px rgba(247, 250, 244, .18);
    height: 18px;
    position: absolute;
    width: 18px;
}

.bossfight-wait-seat.is-active[b-wj4s7vtbjw] {
    background: var(--gold);
    box-shadow:
        0 0 0 6px rgba(217, 189, 113, .18),
        0 0 24px rgba(217, 189, 113, .7);
}

.bossfight-wait-seat.is-you[b-wj4s7vtbjw] {
    background: var(--jade-bright);
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.bossfight-wait-seat.is-left[b-wj4s7vtbjw] {
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
}

.bossfight-wait-seat.is-top[b-wj4s7vtbjw] {
    left: 50%;
    top: 8%;
    transform: translateX(-50%);
}

.bossfight-wait-seat.is-right[b-wj4s7vtbjw] {
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
}

.bossfight-wait-runner[b-wj4s7vtbjw] {
    animation: bossfight-runner-path-b-wj4s7vtbjw 3.4s cubic-bezier(.5, 0, .2, 1) infinite;
    background: var(--gold);
    border-radius: 999px;
    box-shadow: 0 0 26px rgba(217, 189, 113, .76);
    height: 12px;
    left: calc(50% - 6px);
    position: absolute;
    top: calc(50% - 6px);
    width: 12px;
}

.bossfight-wait-action-cards[b-wj4s7vtbjw] {
    height: 86px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    width: 62px;
}

.bossfight-wait-action-cards span[b-wj4s7vtbjw] {
    animation: bossfight-card-resolve-b-wj4s7vtbjw 2.4s ease-in-out infinite;
    background:
        linear-gradient(180deg, rgba(247, 250, 244, .14), rgba(247, 250, 244, .02)),
        rgba(16, 23, 19, .94);
    border: 1px solid rgba(159, 224, 189, .32);
    border-radius: 6px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .28);
    inset: 0;
    position: absolute;
}

.bossfight-wait-action-cards span:nth-child(2)[b-wj4s7vtbjw] {
    animation-delay: .22s;
    transform: translate(7px, -7px);
}

.bossfight-wait-action-cards span:nth-child(3)[b-wj4s7vtbjw] {
    animation-delay: .44s;
    transform: translate(14px, -14px);
}

.bossfight-wait-pulse[b-wj4s7vtbjw] {
    animation: bossfight-table-pulse-b-wj4s7vtbjw 2.2s ease-in-out infinite;
    border: 1px solid rgba(159, 224, 189, .22);
    border-radius: 50%;
    inset: 21%;
    position: absolute;
}

.bossfight-wait-active[b-wj4s7vtbjw] {
    backdrop-filter: blur(12px);
    background: rgba(4, 9, 7, .62);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    display: grid;
    gap: 5px;
    max-width: 300px;
    padding: 11px 12px;
    width: 100%;
}

.bossfight-wait-active span[b-wj4s7vtbjw],
.bossfight-wait-active small[b-wj4s7vtbjw] {
    color: rgba(247, 250, 244, .72);
    font: 850 .72rem/1.2 var(--font-ui);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.bossfight-wait-active strong[b-wj4s7vtbjw] {
    color: var(--ink);
    font: 900 1rem/1.2 var(--font-ui);
    overflow-wrap: anywhere;
}

.bossfight-wait-active small[b-wj4s7vtbjw] {
    color: var(--gold);
    overflow-wrap: anywhere;
    text-transform: none;
}

.bossfight-wait-copy[b-wj4s7vtbjw] {
    align-content: center;
    display: grid;
    gap: 13px;
    min-width: 0;
    padding: 34px;
}

.bossfight-wait-eyebrow[b-wj4s7vtbjw] {
    color: var(--jade-bright);
    font: 900 .76rem/1 var(--font-ui);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bossfight-wait-copy h2[b-wj4s7vtbjw] {
    color: var(--ink);
    font-family: var(--font-disp);
    font-size: 2.45rem;
    line-height: 1.02;
    margin: 0;
    overflow-wrap: anywhere;
}

.bossfight-wait-copy p[b-wj4s7vtbjw] {
    color: var(--ink-2);
    font: 750 1.05rem/1.45 var(--font-ui);
    margin: 0;
}

.bossfight-wait-steps[b-wj4s7vtbjw] {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.bossfight-wait-steps li[b-wj4s7vtbjw] {
    align-items: center;
    color: rgba(247, 250, 244, .76);
    display: grid;
    font: 800 .82rem/1.25 var(--font-ui);
    gap: 8px;
    grid-template-columns: 8px minmax(0, 1fr);
}

.bossfight-wait-steps li[b-wj4s7vtbjw]::before {
    animation: bossfight-step-glow-b-wj4s7vtbjw 1.8s ease-in-out infinite;
    background: var(--jade-bright);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(159, 224, 189, .52);
    content: "";
    height: 8px;
    width: 8px;
}

.bossfight-wait-steps li:nth-child(2)[b-wj4s7vtbjw]::before {
    animation-delay: .24s;
}

.bossfight-wait-steps li:nth-child(3)[b-wj4s7vtbjw]::before {
    animation-delay: .48s;
}

.bossfight-wait-transcript[b-wj4s7vtbjw] {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    margin-top: 4px;
    min-height: 150px;
    min-width: 0;
    padding: 12px;
}

.bossfight-wait-transcript-head[b-wj4s7vtbjw] {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.bossfight-wait-transcript-head span[b-wj4s7vtbjw] {
    color: var(--jade-bright);
    font: 900 .72rem/1 var(--font-ui);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bossfight-wait-transcript-head strong[b-wj4s7vtbjw] {
    color: rgba(247, 250, 244, .7);
    font: 850 .72rem/1 var(--font-ui);
    text-transform: uppercase;
}

.bossfight-wait-transcript ol[b-wj4s7vtbjw] {
    display: grid;
    gap: 9px;
    list-style: none;
    margin: 0;
    max-height: 240px;
    overflow: auto;
    padding: 0;
}

.bossfight-wait-event[b-wj4s7vtbjw] {
    border-left: 2px solid rgba(159, 224, 189, .5);
    display: grid;
    gap: 3px;
    padding-left: 10px;
}

.bossfight-wait-event.is-attack[b-wj4s7vtbjw],
.bossfight-wait-event.is-combat[b-wj4s7vtbjw],
.bossfight-wait-event.is-damage[b-wj4s7vtbjw] {
    border-left-color: #d36a5e;
}

.bossfight-wait-event.is-land[b-wj4s7vtbjw] {
    border-left-color: var(--gold);
}

.bossfight-wait-event.is-spell[b-wj4s7vtbjw],
.bossfight-wait-event.is-resolve[b-wj4s7vtbjw] {
    border-left-color: #6aa6d8;
}

.bossfight-wait-event.is-turn[b-wj4s7vtbjw],
.bossfight-wait-event.is-phase[b-wj4s7vtbjw] {
    border-left-color: #6aa6d8;
}

.bossfight-wait-event.is-pause[b-wj4s7vtbjw],
.bossfight-wait-event.is-finish[b-wj4s7vtbjw] {
    border-left-color: rgba(247, 250, 244, .62);
}

.bossfight-wait-event > span[b-wj4s7vtbjw] {
    color: rgba(159, 224, 189, .78);
    font: 850 .7rem/1.2 var(--font-ui);
    text-transform: uppercase;
}

.bossfight-wait-event strong[b-wj4s7vtbjw] {
    color: var(--ink);
    font: 900 .94rem/1.25 var(--font-ui);
    overflow-wrap: anywhere;
}

.bossfight-wait-event p[b-wj4s7vtbjw] {
    color: rgba(247, 250, 244, .72);
    font: 750 .82rem/1.35 var(--font-ui);
}

.bossfight-wait-transcript-empty[b-wj4s7vtbjw] {
    align-items: center;
    color: var(--ink-2);
    display: grid;
    gap: 10px;
    grid-template-columns: 10px minmax(0, 1fr);
    min-height: 88px;
}

.bossfight-wait-transcript-empty span[b-wj4s7vtbjw] {
    animation: bossfight-step-glow-b-wj4s7vtbjw 1.8s ease-in-out infinite;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(217, 189, 113, .48);
    height: 10px;
    width: 10px;
}

.bossfight-wait-transcript-empty p[b-wj4s7vtbjw] {
    font-size: .92rem;
}

.bossfight-wait-meter[b-wj4s7vtbjw] {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    height: 10px;
    margin-top: 2px;
    overflow: hidden;
}

.bossfight-wait-meter span[b-wj4s7vtbjw] {
    animation: bossfight-meter-b-wj4s7vtbjw 1.65s cubic-bezier(.54, 0, .32, 1) infinite;
    background: linear-gradient(90deg, transparent, var(--jade-bright), var(--gold), transparent);
    display: block;
    height: 100%;
    width: 48%;
}

.bossfight-wait.is-attack .bossfight-wait-runner[b-wj4s7vtbjw],
.bossfight-wait.is-attack .bossfight-wait-meter span[b-wj4s7vtbjw] {
    background: linear-gradient(90deg, transparent, #d36a5e, var(--gold), transparent);
}

.bossfight-wait.is-advance .bossfight-wait-runner[b-wj4s7vtbjw],
.bossfight-wait.is-refresh .bossfight-wait-runner[b-wj4s7vtbjw],
.bossfight-wait.is-start .bossfight-wait-runner[b-wj4s7vtbjw] {
    background: #6aa6d8;
    box-shadow: 0 0 26px rgba(106, 166, 216, .72);
}

@keyframes bossfight-runner-path-b-wj4s7vtbjw {
    0%, 100% {
        transform: translate(-50%, 96px);
    }
    25% {
        transform: translate(-108px, -50%);
    }
    50% {
        transform: translate(-50%, -108px);
    }
    75% {
        transform: translate(96px, -50%);
    }
}

@keyframes bossfight-card-resolve-b-wj4s7vtbjw {
    0%, 100% {
        opacity: .78;
    }
    50% {
        opacity: 1;
        transform: translate(0, -12px) rotate(4deg);
    }
}

@keyframes bossfight-table-pulse-b-wj4s7vtbjw {
    0%, 100% {
        opacity: .25;
        transform: scale(.9);
    }
    50% {
        opacity: .82;
        transform: scale(1.08);
    }
}

@keyframes bossfight-step-glow-b-wj4s7vtbjw {
    0%, 100% {
        opacity: .45;
    }
    50% {
        opacity: 1;
    }
}

@keyframes bossfight-meter-b-wj4s7vtbjw {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(220%);
    }
}

@media (max-width: 760px) {
    .bossfight-wait[b-wj4s7vtbjw] {
        align-items: end;
        padding: 12px;
    }

    .bossfight-wait-modal[b-wj4s7vtbjw] {
        grid-template-columns: 1fr;
        max-height: calc(100vh - 24px);
        min-height: 0;
        overflow: auto;
    }

    .bossfight-wait-visual[b-wj4s7vtbjw] {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        border-right: 0;
        min-height: 260px;
        padding: 20px;
    }

    .bossfight-wait-arena[b-wj4s7vtbjw] {
        max-width: 184px;
    }

    .bossfight-wait-active[b-wj4s7vtbjw] {
        max-width: 260px;
    }

    .bossfight-wait-copy[b-wj4s7vtbjw] {
        padding: 22px;
    }

    .bossfight-wait-copy h2[b-wj4s7vtbjw] {
        font-size: 1.82rem;
    }

    .bossfight-wait-copy p[b-wj4s7vtbjw] {
        font-size: .98rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bossfight-wait-runner[b-wj4s7vtbjw],
    .bossfight-wait-action-cards span[b-wj4s7vtbjw],
    .bossfight-wait-pulse[b-wj4s7vtbjw],
    .bossfight-wait-steps li[b-wj4s7vtbjw]::before,
    .bossfight-wait-transcript-empty span[b-wj4s7vtbjw],
    .bossfight-wait-meter span[b-wj4s7vtbjw] {
        animation: none;
    }
}
/* /Components/Cards/CardModalHost.razor.rz.scp.css */
/* Universal card-detail modal — mirrors mockup .modal */

.ci-backdrop[b-agwh8pvlat] {
    position: fixed;
    inset: 0;
    /* top-most: above the add/swap modal (1300) and toasts (1400) so card
       detail can be inspected from within other surfaces */
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(6, 8, 6, 0.7);
    backdrop-filter: blur(2px);
}

.ci-modal[b-agwh8pvlat] {
    width: min(960px, calc(100vw - 48px));
    max-width: none;
    max-height: 92vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 410px minmax(0, 1fr);
    background: #0e1411;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .7);
}

/* media column */
.ci-media[b-agwh8pvlat] {
    position: relative;
    perspective: 1000px;
    background:
        radial-gradient(80% 60% at 50% 30%, rgba(103, 181, 141, .2), transparent),
        #0a0d0b;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ci-media img[b-agwh8pvlat] {
    width: 100%;
    border-radius: 9px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .6);
    transform-origin: center;
    backface-visibility: hidden;
}

.ci-media img.is-face-flip[b-agwh8pvlat] {
    animation: ci-face-flip-b-agwh8pvlat 380ms cubic-bezier(.2, .8, .2, 1);
}

.ci-flip[b-agwh8pvlat] {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    font: 700 11px/1 var(--font-ui);
    color: var(--jade-bright);
    background: rgba(10, 13, 11, .82);
    border: 1px solid rgba(103, 181, 141, .36);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.ci-flip svg[b-agwh8pvlat] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ci-flip:hover[b-agwh8pvlat] {
    background: rgba(16, 30, 23, .92);
    border-color: var(--jade);
    transform: translateY(-50%) scale(1.06);
}

.ci-flip:focus-visible[b-agwh8pvlat] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}

/* detail column */
.ci-detail[b-agwh8pvlat] {
    padding: 20px;
    min-width: 0;
}

.ci-head[b-agwh8pvlat] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ci-name[b-agwh8pvlat] {
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
    margin: 0;
}

.ci-tl[b-agwh8pvlat] {
    color: var(--ink-2);
    font: 600 12px/1 var(--font-ui);
    margin: 7px 0 0;
}

.ci-cost[b-agwh8pvlat] {
    color: var(--ink-3);
    font: 700 12px/1 var(--font-ui);
    letter-spacing: .3px;
    margin: 6px 0 0;
}

.ci-pips[b-agwh8pvlat] {
    margin: 12px 0 0;
}

.ci-roles[b-agwh8pvlat] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin: 10px 0 0;
}

.ci-why[b-agwh8pvlat] {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 12px 0 0;
}

.ci-abilities[b-agwh8pvlat] {
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 11px;
    margin-top: 12px;
}

.ci-score-components[b-agwh8pvlat] {
    background: rgba(103, 181, 141, .08);
    border: 1px solid rgba(103, 181, 141, .18);
    border-radius: 9px;
    padding: 11px;
    margin-top: 12px;
}

.ci-section-title[b-agwh8pvlat] {
    margin-bottom: 9px;
    color: var(--ink-3);
    font: 800 9px/1 var(--font-ui);
    letter-spacing: .9px;
    text-transform: uppercase;
}

.ci-ability[b-agwh8pvlat] {
    display: grid;
    grid-template-columns: minmax(72px, max-content) minmax(0, 1fr);
    align-items: start;
    gap: 8px;
}

.ci-ability:not(:last-child)[b-agwh8pvlat] {
    margin-bottom: 8px;
}

.ci-ability-name[b-agwh8pvlat] {
    width: max-content;
    max-width: 100%;
    padding: 4px 7px;
    color: var(--jade-bright);
    background: rgba(103, 181, 141, .12);
    border: 1px solid rgba(103, 181, 141, .28);
    border-radius: 999px;
    font: 800 10px/1 var(--font-ui);
    white-space: nowrap;
}

.ci-ability-desc[b-agwh8pvlat] {
    color: var(--ink-2);
    font-size: 11.5px;
    line-height: 1.45;
}

.ci-score-component[b-agwh8pvlat] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
}

.ci-score-component:not(:last-child)[b-agwh8pvlat] {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ci-score-label[b-agwh8pvlat] {
    min-width: 0;
    color: var(--ink);
    font: 800 11px/1.2 var(--font-ui);
}

.ci-score-value[b-agwh8pvlat] {
    color: var(--jade-bright);
    font: 900 11px/1.2 var(--font-ui);
}

.ci-score-value.is-negative[b-agwh8pvlat] {
    color: #f0a2a2;
}

.ci-score-detail[b-agwh8pvlat] {
    grid-column: 1 / -1;
    color: var(--ink-2);
    font-size: 11.5px;
    line-height: 1.45;
}

.ci-stats[b-agwh8pvlat] {
    display: flex;
    gap: 9px;
    margin-top: 12px;
}

.ci-stat[b-agwh8pvlat] {
    flex: 1;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px;
    text-align: center;
}

.ci-stat b[b-agwh8pvlat] {
    display: block;
    font: 800 14px/1 var(--font-ui);
    color: var(--ink);
}

.ci-stat span[b-agwh8pvlat] {
    font: 600 9px/1 var(--font-ui);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .4px;
    display: block;
    margin-top: 5px;
}

.ci-legalities[b-agwh8pvlat] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

.ci-legality-badge[b-agwh8pvlat] {
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
}

.ci-legality-icon[b-agwh8pvlat] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font: 900 12px/1 var(--font-ui);
}

.ci-legality-copy[b-agwh8pvlat] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ci-legality-copy strong[b-agwh8pvlat],
.ci-legality-copy small[b-agwh8pvlat] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-legality-copy strong[b-agwh8pvlat] {
    font: 800 11px/1 var(--font-ui);
    color: var(--ink);
}

.ci-legality-copy small[b-agwh8pvlat] {
    font: 700 8px/1 var(--font-ui);
    color: var(--ink-3);
    letter-spacing: .4px;
    text-transform: uppercase;
}

.ci-legality-badge.is-legal[b-agwh8pvlat] {
    background: rgba(62, 176, 103, .14);
    border-color: rgba(87, 214, 135, .36);
}

.ci-legality-badge.is-legal .ci-legality-icon[b-agwh8pvlat] {
    color: #07110b;
    background: #69d889;
}

.ci-legality-badge.is-not-legal[b-agwh8pvlat] {
    background: rgba(214, 67, 67, .14);
    border-color: rgba(234, 95, 95, .34);
}

.ci-legality-badge.is-not-legal .ci-legality-icon[b-agwh8pvlat] {
    color: #160707;
    background: #f07070;
}

.ci-legality-badge.is-game-changer[b-agwh8pvlat] {
    background: rgba(218, 168, 58, .16);
    border-color: rgba(226, 180, 74, .46);
}

.ci-legality-badge.is-game-changer .ci-legality-icon[b-agwh8pvlat] {
    color: #170f03;
    background: #dca83d;
}

.ci-actions[b-agwh8pvlat] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.ci-ctx[b-agwh8pvlat] {
    flex: 1;
    justify-content: center;
}

/* reduced motion — drop the persistent backdrop blur (vestibular trigger) */
@media (prefers-reduced-motion: reduce) {
    .ci-backdrop[b-agwh8pvlat] {
        backdrop-filter: none;
    }

    .ci-media img.is-face-flip[b-agwh8pvlat] {
        animation: none;
    }
}

@keyframes ci-face-flip-b-agwh8pvlat {
    0% {
        opacity: .35;
        transform: rotateY(86deg) scale(.98);
    }

    58% {
        opacity: 1;
        transform: rotateY(-8deg) scale(1);
    }

    100% {
        transform: rotateY(0) scale(1);
    }
}

/* stack to a single column on narrow viewports */
@media (max-width: 720px) {
    .ci-backdrop[b-agwh8pvlat] {
        align-items: start;
        padding: 12px;
        overflow-y: auto;
    }

    .ci-modal[b-agwh8pvlat] {
        width: 100%;
        max-width: 420px;
        max-height: none;
        grid-template-columns: 1fr;
    }

    .ci-media[b-agwh8pvlat] {
        flex-direction: row;
        justify-content: center;
        padding: 14px;
    }

    .ci-media img[b-agwh8pvlat] {
        width: min(300px, calc(100vw - 56px));
    }

    .ci-media img.is-face-flip[b-agwh8pvlat] {
        animation: none;
    }

    .ci-detail[b-agwh8pvlat] {
        padding: 16px;
    }

    .ci-ability[b-agwh8pvlat] {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .ci-stats[b-agwh8pvlat] {
        flex-direction: column;
    }

    .ci-legalities[b-agwh8pvlat] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Cards/CardName.razor.rz.scp.css */
/* Inline card-name token — looks like text, behaves like a link. (mockup .cardlink) */

.card-link[b-02j7co42y1] {
    display: inline;
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    border-bottom: 1px dashed rgba(159, 224, 189, .55);
}

.card-link:hover[b-02j7co42y1] {
    color: var(--jade-bright);
    border-bottom-color: var(--jade-bright);
}

.card-link:focus-visible[b-02j7co42y1] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
    border-radius: 2px;
}
/* /Components/Cards/CardOwnershipIndicator.razor.rz.scp.css */
/* `color` is inherited, so setting it on .cow cascades into CardGlyph's
   currentColor SVG (child component) and the count — one token per state. */
.cow[b-2hpt0qxlqb] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
}

.cow-count[b-2hpt0qxlqb] {
    font: 700 13px/1 var(--font-ui);
}

.cow--enough[b-2hpt0qxlqb]  { color: var(--jade); }
.cow--partial[b-2hpt0qxlqb] { color: var(--gold); }
.cow--missing[b-2hpt0qxlqb] { color: var(--danger-text); }
.cow--neutral[b-2hpt0qxlqb] { color: var(--ink-2); }
/* /Components/Cards/CardTile.razor.rz.scp.css */
/* Art-forward, clickable card tile. (mockup .card / .bcard) */

.card-tile-frame[b-a3a1qb11p8] {
    position: relative;
    width: 100%;
    perspective: 900px;
}

.card-tile[b-a3a1qb11p8] {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.card-tile img[b-a3a1qb11p8] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-card);
    transform-origin: center;
    backface-visibility: hidden;
}

.card-tile img.is-printing-change[b-a3a1qb11p8] {
    animation: card-printing-change-b-a3a1qb11p8 260ms cubic-bezier(.2, .8, .2, 1);
}

.card-tile img.is-face-flip[b-a3a1qb11p8] {
    animation: card-face-flip-b-a3a1qb11p8 360ms cubic-bezier(.2, .8, .2, 1);
}

.card-tile:hover[b-a3a1qb11p8] {
    transform: translateY(-3px);
    border-color: var(--jade);
    box-shadow: var(--shadow-card);
}

.card-tile:focus-visible[b-a3a1qb11p8] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}

/* score badge — top-right */
.card-tile-score[b-a3a1qb11p8] {
    position: absolute;
    top: 8px;
    right: 8px;
    line-height: 1;
}

/* owned-quantity badge — top-left */
.card-tile-owned[b-a3a1qb11p8] {
    position: absolute;
    top: 8px;
    left: 8px;
    font: 800 11px/1 var(--font-ui);
    color: var(--ink);
    background: rgba(10, 13, 11, 0.82);
    border: 1px solid var(--line);
    padding: 4px 7px;
    border-radius: 6px;
}

.card-tile-deck-actions[b-a3a1qb11p8] {
    position: absolute;
    left: 50%;
    bottom: 9px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.card-tile-frame:hover .card-tile-deck-actions[b-a3a1qb11p8],
.card-tile-frame:focus-within .card-tile-deck-actions[b-a3a1qb11p8] {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.card-tile-deck-action[b-a3a1qb11p8] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(239, 246, 234, 0.34);
    border-radius: 50%;
    color: #06120c;
    background: rgba(239, 246, 234, 0.92);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.card-tile-deck-action:hover[b-a3a1qb11p8],
.card-tile-deck-action:focus-visible[b-a3a1qb11p8] {
    transform: translateY(-2px) scale(1.04);
    background: var(--jade-bright);
    border-color: rgba(159, 224, 189, 0.86);
    outline: none;
}

.card-tile-deck-action:disabled[b-a3a1qb11p8] {
    cursor: wait;
    opacity: 0.66;
    transform: none;
}

.card-tile-deck-icon[b-a3a1qb11p8] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card-tile-controls[b-a3a1qb11p8] {
    position: absolute;
    right: 8px;
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transform: translateY(-50%);
    z-index: 2;
}

.card-tile-action[b-a3a1qb11p8] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(236, 241, 232, 0.28);
    border-radius: 50%;
    color: var(--ink);
    background: rgba(10, 13, 11, 0.82);
    cursor: pointer;
    line-height: 1;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.card-tile-action svg[b-a3a1qb11p8] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card-tile-action:hover[b-a3a1qb11p8] {
    transform: scale(1.06);
    border-color: var(--jade);
    background: rgba(16, 30, 23, 0.92);
}

.card-tile-action:focus-visible[b-a3a1qb11p8] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}

@keyframes card-printing-change-b-a3a1qb11p8 {
    0% {
        opacity: 0;
        transform: translateX(12px) scale(.98);
        filter: saturate(.85);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: saturate(1);
    }
}

@keyframes card-face-flip-b-a3a1qb11p8 {
    0% {
        opacity: .35;
        transform: rotateY(82deg) scale(.98);
    }

    60% {
        opacity: 1;
        transform: rotateY(-8deg) scale(1);
    }

    100% {
        transform: rotateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce), (max-width: 560px) {
    .card-tile img.is-printing-change[b-a3a1qb11p8],
    .card-tile img.is-face-flip[b-a3a1qb11p8] {
        animation: none;
    }

    .card-tile-deck-actions[b-a3a1qb11p8] {
        transition: none;
    }
}
/* /Components/Cards/ManaCostSymbols.razor.rz.scp.css */
.mana-cost[b-214g2qmmv4] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Our own lettered pips — not official WotC mana symbols. */
.mana-pip[b-214g2qmmv4] {
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font: 700 9px/1 var(--font-ui);
    flex: 0 0 auto;
}

.mana-pip--w[b-214g2qmmv4] { background: var(--mana-w); color: #5a4a1e; }
.mana-pip--u[b-214g2qmmv4] { background: var(--mana-u); color: #fff; }
.mana-pip--b[b-214g2qmmv4] { background: var(--mana-b); color: #fff; }
.mana-pip--r[b-214g2qmmv4] { background: var(--mana-r); color: #fff; }
.mana-pip--g[b-214g2qmmv4] { background: var(--mana-g); color: #06120c; }
.mana-pip--c[b-214g2qmmv4] { background: var(--mana-c); color: #1a1a1a; }
.mana-pip--generic[b-214g2qmmv4] { background: var(--mana-c); color: #1a1a1a; }
/* /Components/Collections/AddCardsModal.razor.rz.scp.css */
.acm-backdrop[b-9snikp8uzf] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(5, 7, 6, 0.62);
    backdrop-filter: blur(4px);
}

.acm-modal[b-9snikp8uzf] {
    position: relative;
    width: min(760px, 100%);
    max-height: min(85vh, 760px);
    display: flex;
    flex-direction: column;
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    outline: none;
}

.acm-head[b-9snikp8uzf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--line);
}

.acm-eyebrow[b-9snikp8uzf] {
    display: block;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 700;
}

.acm-title[b-9snikp8uzf] {
    font-family: var(--font-disp);
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    margin: 2px 0 0;
}

.acm-close[b-9snikp8uzf] {
    margin-left: auto;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surf-raised);
    color: var(--ink-2);
    cursor: pointer;
    font-size: 13px;
}

.acm-close:hover[b-9snikp8uzf] {
    color: var(--ink);
    border-color: var(--ink-3);
}

/* ── Tabs ───────────────────────────────────────────────────────── */
.acm-tabs[b-9snikp8uzf] {
    display: flex;
    gap: 4px;
    padding: 10px 16px 0;
    border-bottom: 1px solid var(--line);
}

.acm-tab[b-9snikp8uzf] {
    appearance: none;
    border: 0;
    background: none;
    color: var(--ink-3);
    font: 700 13px var(--font-ui);
    padding: 8px 14px 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.acm-tab:hover[b-9snikp8uzf] {
    color: var(--ink-2);
}

.acm-tab.is-active[b-9snikp8uzf] {
    color: var(--ink);
    border-bottom-color: var(--gold);
}

/* ── Body ───────────────────────────────────────────────────────── */
.acm-body[b-9snikp8uzf] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Search tab ─────────────────────────────────────────────────── */
.acm-search-head[b-9snikp8uzf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.acm-search-sub[b-9snikp8uzf] {
    margin: 0;
    color: var(--ink-2);
    font: 600 12px/1.45 var(--font-ui);
}

.acm-search[b-9snikp8uzf] {
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: var(--surf-raised);
    color: var(--ink);
    font: 650 13px/1 var(--font-ui);
    padding: 0 12px;
}

.acm-search:focus[b-9snikp8uzf],
.acm-qty:focus[b-9snikp8uzf] {
    outline: none;
    border-color: var(--jade);
    box-shadow: 0 0 0 2px rgba(91, 168, 107, 0.18);
}

.acm-state[b-9snikp8uzf] {
    margin: 0;
    color: var(--ink-2);
    font: 600 12px/1.45 var(--font-ui);
}

.acm-results[b-9snikp8uzf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
}

.acm-result[b-9snikp8uzf] {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surf-raised);
    padding: 10px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.acm-result img[b-9snikp8uzf] {
    width: 46px;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    border-radius: 4px;
    background: var(--surf);
}

.acm-card-main[b-9snikp8uzf] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.acm-card-main strong[b-9snikp8uzf],
.acm-card-main span[b-9snikp8uzf],
.acm-card-main small[b-9snikp8uzf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acm-card-main strong[b-9snikp8uzf] {
    color: var(--ink);
    font: 800 13px/1.2 var(--font-ui);
}

.acm-card-main span[b-9snikp8uzf] {
    color: var(--ink-2);
    font: 650 11px/1.2 var(--font-ui);
}

.acm-card-main small[b-9snikp8uzf] {
    color: var(--ink-3);
    font: 700 10px/1.2 var(--font-ui);
}

.acm-controls[b-9snikp8uzf] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 58px minmax(70px, auto) max-content;
    gap: 8px;
    align-items: center;
}

.acm-qty[b-9snikp8uzf] {
    width: 58px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: var(--surf);
    color: var(--ink);
    font: 750 12px/1 var(--font-ui);
    padding: 0 8px;
}

.acm-foil[b-9snikp8uzf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
    font: 750 11px/1 var(--font-ui);
}

/* ── Scan tab launcher (starts the full-screen ScanExperience) ───── */
.acm-scan-placeholder[b-9snikp8uzf] {
    flex: 1 1 auto;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 32px 24px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--surf-raised) 60%, transparent);
}

.acm-scan-icon[b-9snikp8uzf] {
    font-size: 40px;
    line-height: 1;
    opacity: 0.85;
    margin-bottom: 6px;
}

.acm-scan-title[b-9snikp8uzf] {
    margin: 0;
    color: var(--ink);
    font: 600 19px var(--font-disp);
}

.acm-scan-sub[b-9snikp8uzf] {
    margin: 0;
    max-width: 360px;
    color: var(--ink-2);
    font: 600 12.5px/1.5 var(--font-ui);
}

.acm-scan-foil[b-9snikp8uzf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 4px;
    color: var(--ink-2);
    font: 600 12px/1 var(--font-ui);
    cursor: pointer;
}

@media (max-width: 720px) {
    .acm-results[b-9snikp8uzf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Collections/ScanExperience.razor.rz.scp.css */
/* ScanExperience — full-screen Card Stage takeover. */

.se-overlay[b-q4y6afhl1g] {
    position: fixed;
    inset: 0;
    z-index: 1400; /* above the add-cards modal (1300) */
    display: flex;
    flex-direction: column;
    background: radial-gradient(120% 90% at 50% 0%, rgba(20, 24, 22, 0.96), rgba(5, 7, 6, 0.99));
    color: #f5f1e6;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.se-head[b-q4y6afhl1g] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(245, 241, 230, 0.16);
    flex: 0 0 auto;
}

.se-head-main[b-q4y6afhl1g] {
    min-width: 0;
}

.se-eyebrow[b-q4y6afhl1g] {
    display: block;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
}

.se-title[b-q4y6afhl1g] {
    font-family: var(--font-disp);
    font-size: 20px;
    font-weight: 600;
    margin: 2px 0 0;
    color: #f5f1e6;
}

.se-close[b-q4y6afhl1g] {
    margin-left: auto;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid rgba(245, 241, 230, 0.24);
    border-radius: 8px;
    background: rgba(245, 241, 230, 0.1);
    color: #f5f1e6;
    cursor: pointer;
    font-size: 15px;
}

.se-close:hover[b-q4y6afhl1g],
.se-close:focus-visible[b-q4y6afhl1g] {
    color: #fff8df;
    border-color: var(--gold);
    outline: none;
}

/* ── Scanning stage ─────────────────────────────────────────────────── */
.se-stage[b-q4y6afhl1g] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    overflow: hidden;
}

.se-viewfinder[b-q4y6afhl1g] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: #050706;
    display: grid;
    place-items: center;
}

.se-video[b-q4y6afhl1g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gold reticle — corner brackets sized to a card (≈63.5/88.9 ≈ 0.714). */
.se-reticle[b-q4y6afhl1g] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(62%, 320px);
    aspect-ratio: 5 / 7;
    pointer-events: none;
}

.se-corner[b-q4y6afhl1g] {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid var(--gold);
}

.se-corner.tl[b-q4y6afhl1g] { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.se-corner.tr[b-q4y6afhl1g] { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 6px; }
.se-corner.bl[b-q4y6afhl1g] { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 6px; }
.se-corner.br[b-q4y6afhl1g] { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 6px; }

.se-reticle.is-paused .se-corner[b-q4y6afhl1g] {
    border-color: var(--ink-3);
    opacity: 0.6;
}

.se-scanline[b-q4y6afhl1g] {
    position: absolute;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.7;
    animation: se-scan-b-q4y6afhl1g 2.2s ease-in-out infinite;
}

@keyframes se-scan-b-q4y6afhl1g {
    0% { top: 4%; }
    50% { top: 92%; }
    100% { top: 4%; }
}

.se-paused-badge[b-q4y6afhl1g] {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(5, 7, 6, 0.7);
    border: 1px solid var(--line);
    font: 700 11px/1 var(--font-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
}

/* ── Readout (tally + review pill) ──────────────────────────────────── */
.se-readout[b-q4y6afhl1g] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.se-tally[b-q4y6afhl1g] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.se-tally-count[b-q4y6afhl1g] {
    font-family: var(--font-disp);
    font-size: 28px;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}

.se-tally-label[b-q4y6afhl1g] {
    font: 600 12px/1.3 var(--font-ui);
    color: var(--ink-2);
}

.se-review-pill[b-q4y6afhl1g] {
    margin-left: auto;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(220, 160, 60, 0.12);
    border: 1px solid rgba(220, 160, 60, 0.4);
    color: #e3b562;
    font: 700 11px/1 var(--font-ui);
    white-space: nowrap;
}

/* ── Ticker ─────────────────────────────────────────────────────────── */
.se-ticker[b-q4y6afhl1g] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 132px;
    overflow: hidden;
}

.se-ticker-row[b-q4y6afhl1g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    font: 600 12px/1.2 var(--font-ui);
    color: var(--ink);
    animation: se-tick-in-b-q4y6afhl1g 0.2s ease-out;
}

@keyframes se-tick-in-b-q4y6afhl1g {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.se-ticker-dot[b-q4y6afhl1g] {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
}

.se-ticker-row.is-ok .se-ticker-dot[b-q4y6afhl1g] { background: #5bbd7a; }
.se-ticker-row.is-review .se-ticker-dot[b-q4y6afhl1g] { background: #e3b562; }

.se-ticker-name[b-q4y6afhl1g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-ticker-tag[b-q4y6afhl1g] {
    margin-left: auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #e3b562;
}

/* ── Controls bar ───────────────────────────────────────────────────── */
.se-controls[b-q4y6afhl1g] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(245, 241, 230, 0.16);
    flex-wrap: wrap;
}

.se-done-btn[b-q4y6afhl1g] {
    margin-left: auto;
}

.se-scan-controls[b-q4y6afhl1g] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.se-scan-controls-left[b-q4y6afhl1g] {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.se-scan-controls .se-done-btn[b-q4y6afhl1g] {
    grid-column: 2;
    justify-self: center;
    margin-left: 0;
}

.se-foil-toggle[b-q4y6afhl1g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 12px/1 var(--font-ui);
    color: rgba(245, 241, 230, 0.82);
    cursor: pointer;
}

.se-foil-toggle.sm[b-q4y6afhl1g] {
    font-size: 11px;
}

/* ── Fallback ───────────────────────────────────────────────────────── */
.se-fallback[b-q4y6afhl1g] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 24px;
}

.se-fallback-icon[b-q4y6afhl1g] {
    font-size: 40px;
    opacity: 0.7;
}

.se-fallback-title[b-q4y6afhl1g] {
    font-family: var(--font-disp);
    font-size: 18px;
    margin: 0;
    color: #f5f1e6;
}

.se-fallback-sub[b-q4y6afhl1g] {
    margin: 0;
    max-width: 360px;
    color: rgba(245, 241, 230, 0.82);
    font: 600 13px/1.5 var(--font-ui);
}

.se-fallback-actions[b-q4y6afhl1g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.se-snap-btn[b-q4y6afhl1g] {
    position: relative;
    overflow: hidden;
    margin-top: 8px;
    cursor: pointer;
}

.se-file-input[b-q4y6afhl1g] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ── Review ─────────────────────────────────────────────────────────── */
.se-review[b-q4y6afhl1g] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.se-review-summary[b-q4y6afhl1g] {
    margin: 0;
    color: var(--ink-2);
    font: 600 12px/1.4 var(--font-ui);
}

.se-review-list[b-q4y6afhl1g] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.se-empty-review[b-q4y6afhl1g] {
    flex: 1 1 auto;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.se-empty-actions[b-q4y6afhl1g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.se-review-card[b-q4y6afhl1g] {
    display: flex;
    gap: 12px;
    padding: 10px;
    border-radius: var(--radius-card);
    background: var(--surf);
    border: 1px solid var(--line);
}

.se-review-card.is-review[b-q4y6afhl1g] {
    border-color: rgba(220, 160, 60, 0.45);
}

.se-thumb[b-q4y6afhl1g] {
    flex: 0 0 auto;
    width: 56px;
    height: 78px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surf-raised);
    display: grid;
    place-items: center;
}

.se-thumb img[b-q4y6afhl1g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.se-thumb-placeholder[b-q4y6afhl1g] {
    font-size: 24px;
    opacity: 0.5;
}

.se-review-body[b-q4y6afhl1g] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.se-review-title-row[b-q4y6afhl1g] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.se-review-title-row strong[b-q4y6afhl1g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-review-meta[b-q4y6afhl1g] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--ink-2);
    font: 600 11px/1.35 var(--font-ui);
}

.se-review-meta span[b-q4y6afhl1g] {
    min-width: 0;
}

.se-review-meta span:not(:first-child)[b-q4y6afhl1g]::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: 2px;
    background: rgba(245, 241, 230, 0.3);
}

.se-review-badge[b-q4y6afhl1g],
.se-ready-badge[b-q4y6afhl1g] {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    font: 700 10px/1 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.se-review-badge[b-q4y6afhl1g] {
    background: rgba(220, 160, 60, 0.14);
    border: 1px solid rgba(220, 160, 60, 0.4);
    color: #e3b562;
}

.se-ready-badge[b-q4y6afhl1g] {
    background: rgba(91, 189, 122, 0.12);
    border: 1px solid rgba(91, 189, 122, 0.35);
    color: #5bbd7a;
}

.se-candidate-select[b-q4y6afhl1g] {
    width: 100%;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: var(--surf-raised);
    color: var(--ink);
    padding: 0 8px;
    font: 600 12px/1 var(--font-ui);
}

.se-ocr[b-q4y6afhl1g] {
    margin: 0;
    color: var(--ink-3);
    font: italic 500 12px/1.4 var(--font-ui);
}

.se-review-controls[b-q4y6afhl1g] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.se-edit-panel[b-q4y6afhl1g] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    padding: 10px;
    border: 1px solid rgba(245, 241, 230, 0.14);
    border-radius: 8px;
    background: rgba(245, 241, 230, 0.05);
}

.se-edit-fields[b-q4y6afhl1g] {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}

.se-edit-field[b-q4y6afhl1g] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--ink-2);
    font: 700 10px/1 var(--font-ui);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.se-edit-field-wide[b-q4y6afhl1g] {
    width: 100%;
}

.se-edit-search[b-q4y6afhl1g] {
    width: 100%;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: var(--surf-raised);
    color: var(--ink);
    padding: 0 9px;
    font: 600 12px/1 var(--font-ui);
    text-transform: none;
    letter-spacing: 0;
}

.se-selected-printing[b-q4y6afhl1g] {
    color: var(--ink);
    font: 700 12px/1.35 var(--font-ui);
}

.se-edit-results[b-q4y6afhl1g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 2px;
}

.se-printing-option[b-q4y6afhl1g] {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 58px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surf-raised);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.se-printing-option:hover[b-q4y6afhl1g],
.se-printing-option:focus-visible[b-q4y6afhl1g],
.se-printing-option.is-selected[b-q4y6afhl1g] {
    border-color: var(--gold);
    outline: none;
}

.se-printing-option img[b-q4y6afhl1g] {
    width: 38px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--surf);
}

.se-printing-option-main[b-q4y6afhl1g] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.se-printing-option-main strong[b-q4y6afhl1g],
.se-printing-option-main span[b-q4y6afhl1g],
.se-printing-option-main small[b-q4y6afhl1g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.se-printing-option-main strong[b-q4y6afhl1g] {
    font: 800 12px/1.2 var(--font-ui);
}

.se-printing-option-main span[b-q4y6afhl1g],
.se-printing-option-main small[b-q4y6afhl1g] {
    color: var(--ink-2);
    font: 600 11px/1.25 var(--font-ui);
}

.se-row-action-group[b-q4y6afhl1g] {
    width: min(100%, 420px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 4px;
    overflow: hidden;
    border: 1px solid rgba(245, 241, 230, 0.18);
    border-radius: 8px;
}

.se-row-action[b-q4y6afhl1g] {
    min-height: 34px;
    border: 0;
    border-right: 1px solid rgba(5, 7, 6, 0.32);
    color: #07120d;
    font: 800 12px/1 var(--font-ui);
    cursor: pointer;
}

.se-row-action:last-child[b-q4y6afhl1g] {
    border-right: 0;
}

.se-row-action.confirm[b-q4y6afhl1g] {
    background: #68c487;
}

.se-row-action.edit[b-q4y6afhl1g] {
    background: #e3b562;
}

.se-row-action.ignore[b-q4y6afhl1g] {
    background: #e46d61;
}

.se-row-action:hover[b-q4y6afhl1g],
.se-row-action:focus-visible[b-q4y6afhl1g],
.se-row-action.is-selected[b-q4y6afhl1g] {
    filter: brightness(1.08);
    outline: none;
}

.se-row-action:disabled[b-q4y6afhl1g] {
    cursor: progress;
    opacity: 0.68;
    filter: saturate(0.7);
}

.se-qty[b-q4y6afhl1g] {
    width: 58px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: var(--surf-raised);
    color: var(--ink);
    padding: 0 8px;
    text-align: center;
}

/* ── Done ───────────────────────────────────────────────────────────── */
.se-done[b-q4y6afhl1g] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 24px;
}

.se-done-icon[b-q4y6afhl1g] {
    font-size: 40px;
    color: var(--gold);
}

.se-done-title[b-q4y6afhl1g] {
    font-family: var(--font-disp);
    font-size: 20px;
    margin: 0;
}

.se-done-sub[b-q4y6afhl1g] {
    margin: 0 0 8px;
    color: var(--ink-2);
    font: 600 13px/1.5 var(--font-ui);
}

/* ── Generic state line ─────────────────────────────────────────────── */
.se-state[b-q4y6afhl1g] {
    padding: 14px;
    text-align: center;
    color: var(--ink-2);
    font: 600 13px/1.4 var(--font-ui);
}

.se-state.compact[b-q4y6afhl1g] {
    padding: 4px 0;
    text-align: left;
    font-size: 12px;
}

@media (max-width: 720px) {
    .se-scan-controls[b-q4y6afhl1g] {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .se-scan-controls-left[b-q4y6afhl1g] {
        grid-column: 1;
        grid-row: 2;
        justify-content: center;
    }

    .se-scan-controls .se-done-btn[b-q4y6afhl1g] {
        grid-column: 1;
        grid-row: 1;
    }

    .se-review-card[b-q4y6afhl1g] {
        align-items: flex-start;
    }

    .se-row-action-group[b-q4y6afhl1g] {
        width: 100%;
    }

    .se-edit-results[b-q4y6afhl1g] {
        grid-template-columns: 1fr;
        max-height: 220px;
    }
}
/* /Components/Decks/AddSwapModal.razor.rz.scp.css */
.asm-backdrop[b-ggbt9z83t7] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(5, 7, 6, 0.62);
    backdrop-filter: blur(4px);
}

.asm-modal[b-ggbt9z83t7] {
    position: relative;
    width: min(760px, 100%);
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.asm-head[b-ggbt9z83t7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--line);
}

/* gold "Consult the Familiar" CTA, pushed to the right before the close button */
.asm-consult[b-ggbt9z83t7] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-ctrl);
    border: 1px solid var(--gold);
    background: linear-gradient(180deg, #2a2417, #1d1a12);
    color: var(--gold);
    font: 700 12.5px var(--font-ui);
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(217, 189, 113, 0.12);
}

.asm-consult:hover[b-ggbt9z83t7] {
    filter: brightness(1.12);
}

.asm-eyebrow[b-ggbt9z83t7] {
    display: block;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--deck-accent, var(--ink-3));
    font-weight: 700;
}

.asm-title[b-ggbt9z83t7] {
    font-family: var(--font-disp);
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    margin: 2px 0 0;
}

.asm-close[b-ggbt9z83t7] {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surf-raised);
    color: var(--ink-2);
    cursor: pointer;
    font-size: 13px;
}

.asm-close:hover[b-ggbt9z83t7] {
    color: var(--ink);
    border-color: var(--ink-3);
}

.asm-body[b-ggbt9z83t7] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
}

.asm-body.is-swap[b-ggbt9z83t7] {
    grid-template-columns: 1fr 1fr;
}

.asm-col[b-ggbt9z83t7] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* let the 1fr grid columns shrink to their track instead of growing to
       fit content (default min-width:auto), which overflowed the modal */
    min-width: 0;
    padding: 14px 16px;
}

.asm-body.is-swap .asm-col:first-child[b-ggbt9z83t7] {
    border-right: 1px solid var(--line);
}

.asm-col-label[b-ggbt9z83t7] {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    margin-bottom: 8px;
}

.asm-search[b-ggbt9z83t7] {
    width: 100%;
    background: var(--void);
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    color: var(--ink);
    font: 500 13px var(--font-ui);
    padding: 9px 12px;
    margin-bottom: 10px;
}

.asm-search:focus-visible[b-ggbt9z83t7] {
    outline: 2px solid var(--deck-accent, var(--jade));
    outline-offset: 1px;
}

.asm-results[b-ggbt9z83t7] {
    flex: 1 1 auto;
    min-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.asm-row[b-ggbt9z83t7] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: none;
    color: var(--ink);
    cursor: pointer;
}

.asm-row:hover[b-ggbt9z83t7] {
    background: var(--surf-raised);
}

.asm-row.is-selected[b-ggbt9z83t7] {
    border-color: var(--deck-accent, var(--jade));
    background: var(--surf-raised);
}

.asm-thumb-btn[b-ggbt9z83t7] {
    position: relative;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: zoom-in;
    border-radius: 4px;
}

.asm-thumb[b-ggbt9z83t7] {
    width: 30px;
    height: 42px;
    object-fit: cover;
    object-position: center 16%;
    border-radius: 4px;
    display: block;
    background: var(--void);
}

.asm-thumb-zoom[b-ggbt9z83t7] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 4px;
    background: rgba(6, 8, 6, 0.55);
    color: var(--ink);
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.asm-thumb-btn:hover .asm-thumb-zoom[b-ggbt9z83t7],
.asm-thumb-btn:focus-visible .asm-thumb-zoom[b-ggbt9z83t7] {
    opacity: 1;
}

.asm-name[b-ggbt9z83t7] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asm-badge[b-ggbt9z83t7] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 28px;
    border: 1px solid rgba(159, 224, 189, 0.22);
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--ink);
    font: 750 11px/1 var(--font-ui);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.asm-cost[b-ggbt9z83t7] {
    min-width: 38px;
    padding-inline: 7px;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(6, 8, 6, 0.38);
}

.asm-owned[b-ggbt9z83t7] {
    min-width: 70px;
    color: var(--jade);
    border-color: rgba(103, 181, 141, 0.32);
    background: rgba(103, 181, 141, 0.1);
}

.asm-deck-count[b-ggbt9z83t7] {
    min-width: 64px;
    color: var(--gold);
    border-color: rgba(217, 189, 113, 0.32);
    background: rgba(217, 189, 113, 0.1);
}

.asm-badge-label[b-ggbt9z83t7] {
    color: var(--ink-3);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.asm-badge-value[b-ggbt9z83t7] {
    color: currentColor;
    font-weight: 900;
}

.asm-owned.is-zero[b-ggbt9z83t7] {
    color: var(--gold);
}

.asm-deck-count.is-zero[b-ggbt9z83t7] {
    color: var(--ink-3);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
}

.asm-empty[b-ggbt9z83t7] {
    color: var(--ink-3);
    font-size: 13px;
    padding: 16px 4px;
}

.asm-foot[b-ggbt9z83t7] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}

.asm-btn[b-ggbt9z83t7] {
    border-radius: var(--radius-ctrl);
    font: 600 12.5px var(--font-ui);
    padding: 9px 16px;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--surf-raised);
    color: var(--ink);
}

.asm-cancel:hover[b-ggbt9z83t7] {
    border-color: var(--ink-3);
}

.asm-confirm[b-ggbt9z83t7] {
    background: var(--deck-accent, var(--jade));
    color: var(--void);
    border-color: transparent;
    font-weight: 700;
}

.asm-confirm:disabled[b-ggbt9z83t7] {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 620px) {
    .asm-body.is-swap[b-ggbt9z83t7] {
        grid-template-columns: 1fr;
    }

    .asm-body.is-swap .asm-col:first-child[b-ggbt9z83t7] {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

/* ── Consult the Familiar — coming-soon overlay ────────────────── */

.asm-consult-overlay[b-ggbt9z83t7] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    text-align: center;
    background: linear-gradient(180deg, rgba(25, 23, 18, 0.97), rgba(20, 21, 27, 0.98));
    backdrop-filter: blur(3px);
}

.asm-consult-glow[b-ggbt9z83t7] {
    position: absolute;
    top: -30px;
    width: 280px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 189, 113, 0.26), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}

.asm-consult-inner[b-ggbt9z83t7] {
    position: relative;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.asm-consult-spark[b-ggbt9z83t7] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(160deg, var(--gold), #c9912f);
    color: #1a1305;
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 6px 18px -6px rgba(217, 189, 113, 0.5);
    margin-bottom: 12px;
}

.asm-consult-eyebrow[b-ggbt9z83t7] {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
}

.asm-consult-title[b-ggbt9z83t7] {
    font-family: var(--font-disp);
    font-size: 23px;
    font-weight: 600;
    color: var(--ink);
    margin: 2px 0 10px;
}

.asm-consult-lede[b-ggbt9z83t7] {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0 0 14px;
}

.asm-consult-example[b-ggbt9z83t7] {
    font-style: italic;
    color: var(--ink);
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px dashed rgba(217, 189, 113, 0.4);
    background: rgba(217, 189, 113, 0.06);
    margin-bottom: 16px;
}

.asm-consult-points[b-ggbt9z83t7] {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.asm-consult-points li[b-ggbt9z83t7] {
    font-size: 12.5px;
    color: var(--ink-2);
    display: flex;
    gap: 8px;
}

.asm-consult-points li span[b-ggbt9z83t7] {
    color: var(--gold);
}

.asm-consult-points b[b-ggbt9z83t7] {
    color: var(--ink);
    font-weight: 600;
}

.asm-consult-actions[b-ggbt9z83t7] {
    display: flex;
    gap: 10px;
}

.asm-consult-cta[b-ggbt9z83t7] {
    background: linear-gradient(180deg, var(--gold), #c9912f);
    color: #1a1305;
    border-color: transparent;
    font-weight: 700;
}

.asm-consult-cta:hover[b-ggbt9z83t7] {
    filter: brightness(1.06);
}

.asm-add-btn[b-ggbt9z83t7] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surf-raised);
    color: var(--ink);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.asm-add-btn:hover:not(:disabled)[b-ggbt9z83t7] {
    border-color: var(--deck-accent, var(--jade));
    color: var(--jade);
}

.asm-add-btn:disabled[b-ggbt9z83t7] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Jade "Added {card} · Undo" bar, pinned above the footer in Add mode. */
.asm-undo[b-ggbt9z83t7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 16px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--jade);
    font-size: 12.5px;
    color: var(--ink);
}

.asm-undo-text b[b-ggbt9z83t7] {
    font-weight: 700;
}

.asm-undo-btn[b-ggbt9z83t7] {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 2px 4px;
    color: var(--jade);
    font: 700 12.5px var(--font-ui);
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Decks/AiInsightsModal.razor.rz.scp.css */
.aim-backdrop[b-31q4ye3dga] {
    position: fixed;
    inset: 0;
    z-index: 1320;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(5, 7, 6, 0.66);
    backdrop-filter: blur(5px);
}

.aim-modal[b-31q4ye3dga] {
    position: relative;
    width: min(540px, 100%);
    max-height: min(86vh, 760px);
    overflow: hidden auto;
    padding: 26px 26px 20px;
    border-radius: var(--radius-card);
    border: 1px solid rgba(217, 189, 113, 0.34);
    background: linear-gradient(180deg, #191712, #14151b 46%);
    box-shadow: 0 0 0 1px rgba(217, 189, 113, 0.06), 0 30px 80px -28px rgba(217, 189, 113, 0.22);
}

/* warm glow behind the header */
.aim-glow[b-31q4ye3dga] {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 189, 113, 0.28), transparent 68%);
    filter: blur(20px);
    pointer-events: none;
}

.aim-close[b-31q4ye3dga] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--ink-2);
    cursor: pointer;
    z-index: 1;
}

.aim-close:hover[b-31q4ye3dga] {
    color: var(--ink);
    border-color: rgba(217, 189, 113, 0.5);
}

.aim-head[b-31q4ye3dga] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
}

.aim-spark[b-31q4ye3dga] {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(160deg, var(--gold), #c9912f);
    color: #1a1305;
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 6px 18px -6px rgba(217, 189, 113, 0.5);
}

.aim-eyebrow[b-31q4ye3dga] {
    display: block;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
}

.aim-title[b-31q4ye3dga] {
    font-family: var(--font-disp);
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
    margin: 1px 0 0;
}

.aim-lede[b-31q4ye3dga] {
    position: relative;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0 0 16px;
}

.aim-lede em[b-31q4ye3dga] {
    color: var(--ink);
    font-style: italic;
}

.aim-teasers[b-31q4ye3dga] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.aim-teaser[b-31q4ye3dga] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 11px;
    border: 1px solid rgba(217, 189, 113, 0.28);
    background: rgba(217, 189, 113, 0.05);
}

.aim-teaser-spark[b-31q4ye3dga] {
    color: var(--gold);
    font-size: 13px;
    line-height: 1.5;
    flex: 0 0 auto;
}

.aim-teaser-text[b-31q4ye3dga] {
    flex: 1 1 auto;
    min-width: 0;
}

.aim-teaser-title[b-31q4ye3dga] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.aim-teaser-sub[b-31q4ye3dga] {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}

.aim-lock[b-31q4ye3dga] {
    flex: 0 0 auto;
    font-size: 12px;
    opacity: 0.8;
}

.aim-premium[b-31q4ye3dga] {
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-bottom: 18px;
}

.aim-premium-label[b-31q4ye3dga] {
    display: block;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 8px;
}

.aim-feat[b-31q4ye3dga] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--ink-2);
    padding: 4px 0;
}

.aim-feat-ic[b-31q4ye3dga] {
    flex: 0 0 auto;
}

.aim-foot[b-31q4ye3dga] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.aim-btn[b-31q4ye3dga] {
    border-radius: var(--radius-ctrl);
    font: 600 12.5px var(--font-ui);
    padding: 9px 16px;
    cursor: pointer;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-2);
}

.aim-ghost:hover[b-31q4ye3dga] {
    color: var(--ink);
    border-color: var(--ink-3);
}

.aim-cta[b-31q4ye3dga] {
    background: linear-gradient(180deg, var(--gold), #c9912f);
    color: #1a1305;
    border-color: transparent;
    font-weight: 700;
}

.aim-cta:hover[b-31q4ye3dga] {
    filter: brightness(1.06);
}
/* /Components/Decks/CardBoard.razor.rz.scp.css */
/* ============================================================
   CardBoard — container for all category sections
   ============================================================ */

.card-board[b-bau2uwr7gm] {
    display: flex;
    flex-direction: column;
    gap: 0; /* sections handle their own bottom margin */
}
/* /Components/Decks/CategorySection.razor.rz.scp.css */
/* ============================================================
   CategorySection — grouped deck board section
   ============================================================ */

.cat-section[b-jenhsjsnqz] {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surf);
    margin-bottom: 12px;
    overflow: hidden;
}

/* ── Section header ─────────────────────────────────────────── */

.cat-head[b-jenhsjsnqz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--surf-raised), transparent);
}

/* Thin color accent bar on the left edge */
.cat-accent[b-jenhsjsnqz] {
    display: block;
    width: 4px;
    height: 20px;
    border-radius: 3px;
    /* wears the deck's color identity (falls back to jade outside the editor) */
    background: var(--deck-accent-grad, var(--jade));
    flex: 0 0 auto;
    opacity: 0.9;
}

.cat-name[b-jenhsjsnqz] {
    font-family: var(--font-disp);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.cat-count[b-jenhsjsnqz] {
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 400;
}

/* Ownership summary — right-aligned */
.cat-ownership[b-jenhsjsnqz] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.cat-ownership--have[b-jenhsjsnqz] {
    color: var(--jade);
}

.cat-ownership--need[b-jenhsjsnqz] {
    color: var(--gold);
}

/* ── Card grid ──────────────────────────────────────────────── */

.cat-grid[b-jenhsjsnqz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 12px 14px;
}

/* ── List view ──────────────────────────────────────────────── */

.cat-list[b-jenhsjsnqz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2px 18px;
    padding: 8px 10px 12px;
}
/* /Components/Decks/DeckCardRow.razor.rz.scp.css */
.dcr-row[b-2g60yot64n] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
}

.dcr-row:hover[b-2g60yot64n] {
    background: var(--surf);
    border-color: var(--line);
}

.dcr-stepper[b-2g60yot64n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.dcr-step[b-2g60yot64n] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: var(--surf-raised);
    color: var(--ink);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.dcr-step:hover[b-2g60yot64n] {
    border-color: var(--ink-3);
}

.dcr-step:disabled[b-2g60yot64n] {
    opacity: 0.28;
    cursor: not-allowed;
}

.dcr-step:disabled:hover[b-2g60yot64n] {
    border-color: var(--line);
}

.dcr-qty[b-2g60yot64n] {
    min-width: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
}

.dcr-name[b-2g60yot64n] {
    flex: 1 1 auto;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    color: var(--ink);
    font: 500 13.5px var(--font-ui);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dcr-name:hover[b-2g60yot64n] {
    color: var(--jade-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dcr-cmc[b-2g60yot64n] {
    flex: 0 0 auto;
    width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--ink-3);
}
/* /Components/Decks/DeckCardTile.razor.rz.scp.css */
/* ============================================================
   DeckCardTile — art tile with stepper footer and ownership badge
   ============================================================ */

.dct-frame[b-1nd14cfc87] {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--surf);
    border: 1px solid var(--line);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dct-frame:hover[b-1nd14cfc87] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

/* ── Footer ─────────────────────────────────────────────────── */

.dct-footer[b-1nd14cfc87] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    background: var(--surf-raised);
    border-top: 1px solid var(--line);
}

/* ── Quantity stepper ───────────────────────────────────────── */

.dct-stepper[b-1nd14cfc87] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.dct-step-btn[b-1nd14cfc87] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: var(--surf);
    color: var(--ink);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.dct-step-btn:hover[b-1nd14cfc87] {
    background: var(--surf-raised);
    border-color: var(--ink-3);
}

.dct-step-btn:active[b-1nd14cfc87] {
    background: var(--line);
}

.dct-step-btn:disabled[b-1nd14cfc87] {
    opacity: 0.28;
    cursor: not-allowed;
}

.dct-step-btn:disabled:hover[b-1nd14cfc87] {
    background: none;
    border-color: var(--line);
}

.dct-qty[b-1nd14cfc87] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 12px;
    min-width: 14px;
    text-align: center;
    color: var(--ink);
}
/* /Components/Decks/DeckSettingsModal.razor.rz.scp.css */
.dsm-overlay[b-5quwkgaq0l] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px;
    overflow-y: auto;
    background: rgba(4, 7, 6, 0.72);
    backdrop-filter: blur(4px);
}

.dsm-panel[b-5quwkgaq0l] {
    width: min(560px, 100%);
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.dsm-head[b-5quwkgaq0l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.dsm-head h2[b-5quwkgaq0l] { font-size: 20px; margin: 0; }

.dsm-close[b-5quwkgaq0l] {
    background: none;
    border: 0;
    color: var(--ink-2);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.dsm-close:hover[b-5quwkgaq0l] { color: var(--ink); }

.dsm-status[b-5quwkgaq0l] { padding: 32px 20px; text-align: center; color: var(--ink-2); }

.dsm-body[b-5quwkgaq0l] { padding: 18px 20px; display: flex; flex-direction: column; gap: 22px; }

.dsm-section[b-5quwkgaq0l] { display: flex; flex-direction: column; gap: 10px; }

.dsm-label[b-5quwkgaq0l] {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 700;
}

.dsm-input[b-5quwkgaq0l], .dsm-textarea[b-5quwkgaq0l] {
    width: 100%;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 14px;
    padding: 10px 12px;
}
.dsm-textarea[b-5quwkgaq0l] { resize: vertical; }
.dsm-input:focus[b-5quwkgaq0l], .dsm-textarea:focus[b-5quwkgaq0l] { outline: 2px solid var(--jade); outline-offset: 1px; }

.dsm-icons[b-5quwkgaq0l] { display: flex; flex-wrap: wrap; gap: 8px; }
.dsm-icon[b-5quwkgaq0l] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    cursor: pointer;
}
.dsm-icon:hover[b-5quwkgaq0l] { border-color: var(--ink-3); background: var(--surf); }
.dsm-icon.is-selected[b-5quwkgaq0l] { border-color: var(--jade); box-shadow: 0 0 0 1px var(--jade); }
.dsm-icon-glyph[b-5quwkgaq0l] { width: 22px; height: 22px; color: var(--ink); }
.dsm-icon.is-selected .dsm-icon-glyph[b-5quwkgaq0l] { color: var(--jade-bright); }

.dsm-printings[b-5quwkgaq0l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}
.dsm-printing[b-5quwkgaq0l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    color: var(--ink-2);
}
.dsm-printing.is-selected[b-5quwkgaq0l] { border-color: var(--jade); box-shadow: 0 0 0 1px var(--jade); }
.dsm-printing-art[b-5quwkgaq0l] { width: 100%; border-radius: 6px; display: block; }
.dsm-printing-default[b-5quwkgaq0l] {
    display: grid;
    place-items: center;
    aspect-ratio: 5 / 7;
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
}
.dsm-printing-meta[b-5quwkgaq0l] { font-size: 10px; text-align: center; }

.dsm-hint[b-5quwkgaq0l] { font-size: 12px; color: var(--ink-3); margin: 0; }
.dsm-confirm[b-5quwkgaq0l] { font-size: 13px; color: var(--ink); }

.dsm-danger[b-5quwkgaq0l] { border-top: 1px solid var(--line); padding-top: 18px; }
.dsm-danger-row[b-5quwkgaq0l] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.dsm-btn-warning[b-5quwkgaq0l], .dsm-btn-danger[b-5quwkgaq0l], .dsm-btn-danger-ghost[b-5quwkgaq0l] {
    font: 800 0.9rem/1.1 var(--font-ui);
    border-radius: var(--radius-ctrl);
    padding: 12px 16px;
    cursor: pointer;
    border: 1px solid transparent;
}
.dsm-btn-warning[b-5quwkgaq0l] { background: var(--warning); color: #1a1305; border-color: var(--warning); }
.dsm-btn-danger[b-5quwkgaq0l] { background: var(--danger); color: #fff; border-color: var(--danger); }
.dsm-btn-danger-ghost[b-5quwkgaq0l] { background: none; color: var(--danger-text); border-color: var(--danger); }
.dsm-btn-warning:disabled[b-5quwkgaq0l], .dsm-btn-danger:disabled[b-5quwkgaq0l], .dsm-btn-danger-ghost:disabled[b-5quwkgaq0l] { opacity: 0.5; cursor: not-allowed; }

.dsm-foot[b-5quwkgaq0l] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--line);
}
/* /Components/Decks/DeckTuningPanel.razor.rz.scp.css */
.dtp[b-f6l6p9xgu3] {
    margin: 18px 0 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--stage-raised);
    overflow: hidden;
}

.dtp-head[b-f6l6p9xgu3] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: none;
    border: 0;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}
.dtp-glyph[b-f6l6p9xgu3] { display: inline-flex; color: var(--gold); }
.dtp-title[b-f6l6p9xgu3] { font: 600 0.95rem/1 var(--font-ui); }
.dtp-count[b-f6l6p9xgu3] {
    font: 700 0.7rem/1 var(--font-ui);
    color: var(--gold);
    background: rgba(217, 189, 113, 0.16);
    border-radius: 20px;
    padding: 3px 8px;
}
.dtp-chevron[b-f6l6p9xgu3] { margin-left: auto; color: var(--ink-3); }

.dtp-body[b-f6l6p9xgu3] { padding: 4px 14px 14px; }
.dtp-empty[b-f6l6p9xgu3], .dtp-window[b-f6l6p9xgu3] { color: var(--ink-2); font: 400 0.85rem/1.5 var(--font-ui); margin: 6px 0 10px; }
.dtp-window[b-f6l6p9xgu3] { color: var(--ink-3); font-size: 0.78rem; }

.dtp-idea[b-f6l6p9xgu3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.dtp-idea-main[b-f6l6p9xgu3] { min-width: 0; }
.dtp-idea h4[b-f6l6p9xgu3] { font: 600 0.9rem/1.2 var(--font-ui); color: var(--ink); margin: 0 0 3px; }
.dtp-conf[b-f6l6p9xgu3] { font-weight: 400; font-size: 0.72rem; color: var(--ink-3); }
.dtp-idea p[b-f6l6p9xgu3] { font: 400 0.82rem/1.45 var(--font-ui); color: var(--ink-2); margin: 0; }

.dtp-action[b-f6l6p9xgu3] {
    flex: 0 0 auto;
    margin-left: auto;
    background: none;
    border: 1px solid var(--jade);
    color: var(--jade);
    font: 600 0.78rem/1 var(--font-ui);
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.dtp-action:hover[b-f6l6p9xgu3] { background: rgba(103, 181, 141, 0.14); }
/* /Components/Decks/EditorToolbar.razor.rz.scp.css */
.editor-toolbar[b-8mmrhm6zi3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

/* Segmented view toggle */
.tb-seg-group[b-8mmrhm6zi3] {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
}

.tb-seg[b-8mmrhm6zi3] {
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font: 600 12px var(--font-ui);
    padding: 5px 12px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.tb-seg:hover[b-8mmrhm6zi3] {
    color: var(--ink);
}

.tb-seg.is-active[b-8mmrhm6zi3] {
    background: var(--surf-raised);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line);
}

/* Group / Sort selectors */
.tb-field[b-8mmrhm6zi3] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tb-field-label[b-8mmrhm6zi3] {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}

.tb-select[b-8mmrhm6zi3] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23738076' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1px solid var(--line);
    color: var(--ink);
    font: 600 12px var(--font-ui);
    padding: 6px 28px 6px 11px;
    border-radius: var(--radius-ctrl);
    cursor: pointer;
}

.tb-select:hover[b-8mmrhm6zi3] {
    border-color: var(--ink-3);
}

.tb-select:focus-visible[b-8mmrhm6zi3] {
    outline: 2px solid var(--deck-accent, var(--jade));
    outline-offset: 1px;
}

.tb-spacer[b-8mmrhm6zi3] {
    flex: 1 1 auto;
}

/* Action buttons */
.tb-btn[b-8mmrhm6zi3] {
    border-radius: var(--radius-ctrl);
    font: 600 12.5px var(--font-ui);
    padding: 8px 14px;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--surf-raised);
    color: var(--ink);
    transition: transform 0.1s ease, border-color 0.12s ease;
}

.tb-btn:hover[b-8mmrhm6zi3] {
    transform: translateY(-1px);
}

.tb-add[b-8mmrhm6zi3] {
    background: var(--ink);
    color: var(--void);
    border-color: transparent;
}

.tb-ask[b-8mmrhm6zi3] {
    background: linear-gradient(180deg, #2a2417, #1d1a12);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 0 1px rgba(217, 189, 113, 0.12);
}

.tb-play[b-8mmrhm6zi3] {
    color: #06150E;
    background: var(--jade);
    border-color: var(--jade);
    font-weight: 600;
}
.tb-play:hover:not(:disabled)[b-8mmrhm6zi3] { filter: brightness(1.06); }
.tb-play:disabled[b-8mmrhm6zi3] { opacity: 0.6; cursor: default; }

/* Icon-only settings button, sits right of the Familiar/Consult button. */
.tb-edit[b-8mmrhm6zi3] {
    display: grid;
    place-items: center;
    padding: 8px;
    width: 34px;
    color: var(--ink-2);
}
.tb-edit:hover[b-8mmrhm6zi3] {
    border-color: var(--jade);
    color: var(--ink);
}
/* /Components/Home/HomeContrast.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeContrast — the emotional hook (homepage design §6.2).
   "Your deck shouldn't start as a shopping list." A cold meta-site
   buy-list (--mana-r) set against a warm binder→deck (--jade).

   Mobile-first single column (Them above Us with an "instead" pivot
   between); side-by-side at >=720px to match the hero breakpoint.
   Both artifacts are pure-CSS mocks — no external image assets.
   All motion is transform/opacity only and gated behind
   prefers-reduced-motion: no-preference.
   ──────────────────────────────────────────────────────────────── */

.home-contrast[b-071cxd7nck] {
    overflow: hidden;
}

/* A faint cool→warm wash: the section literally crosses from red to jade. */
.home-contrast[b-071cxd7nck]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(70% 80% at 6% 12%, color-mix(in srgb, var(--mana-r) 12%, transparent) 0%, transparent 60%),
        radial-gradient(75% 85% at 96% 96%, color-mix(in srgb, var(--jade-deep) 42%, transparent) 0%, transparent 62%);
}

.home-contrast > .home-shell[b-071cxd7nck] {
    position: relative;
    z-index: 1;
}

.home-contrast .home-section-lede em[b-071cxd7nck] {
    font-style: italic;
    color: var(--jade-bright);
}

/* ── Before/after pair ──────────────────────────────────────────── */
.contrast-pair[b-071cxd7nck] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: clamp(2rem, 5vw, 3rem);
}

.contrast-card[b-071cxd7nck] {
    position: relative;
    border-radius: 16px;
    padding: clamp(1.1rem, 3vw, 1.5rem);
    border: 1px solid var(--line);
    background: var(--surf);
}

.contrast-card-head[b-071cxd7nck] {
    margin-bottom: 1rem;
}

.contrast-tag[b-071cxd7nck] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: 700 0.64rem/1 var(--font-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.contrast-tag[b-071cxd7nck]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}
.contrast-tag-them[b-071cxd7nck] {
    color: color-mix(in srgb, var(--mana-r) 78%, var(--ink));
    background: color-mix(in srgb, var(--mana-r) 12%, transparent);
    border-color: color-mix(in srgb, var(--mana-r) 30%, transparent);
}
.contrast-tag-us[b-071cxd7nck] {
    color: var(--jade-bright);
    background: color-mix(in srgb, var(--jade) 12%, transparent);
    border-color: color-mix(in srgb, var(--jade) 32%, transparent);
}

.contrast-card-note[b-071cxd7nck] {
    margin: 1rem 0 0;
    font: 400 0.84rem/1.5 var(--font-ui);
    color: var(--ink-2); /* AA: --ink-3 fails 4.5:1 on --surf */
}
.contrast-card-note-us[b-071cxd7nck] {
    color: var(--ink-2);
}

/* ── "Them": cold red buy-list — themed as a heartless little artifact ── */
.contrast-them[b-071cxd7nck] {
    border-color: color-mix(in srgb, var(--mana-r) 22%, var(--line));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--mana-r) 6%, var(--surf)) 0%, var(--surf) 70%);
}

.buylist[b-071cxd7nck] {
    border: 1px solid color-mix(in srgb, var(--mana-r) 20%, var(--line));
    border-radius: 12px;
    background: var(--void);
    padding: 0.95rem 1rem 0.85rem;
    /* A thin red seam down the left edge — receipt margin. */
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mana-r) 55%, transparent);
}

.buylist-title[b-071cxd7nck] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 0 0.7rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--mana-r) 28%, var(--line));
}
.buylist-title-main[b-071cxd7nck] {
    font: 600 0.95rem/1.2 var(--font-disp);
    color: var(--ink);
}
.buylist-title-sub[b-071cxd7nck] {
    font: 500 0.68rem/1 var(--font-ui);
    letter-spacing: 0.05em;
    color: var(--ink-3);
    text-transform: uppercase;
}

.buylist-rows[b-071cxd7nck] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.buylist-row[b-071cxd7nck] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-ui);
}
.buylist-name[b-071cxd7nck] {
    font: 400 0.9rem/1.3 var(--font-ui);
    color: var(--ink-2);
}
.buylist-price[b-071cxd7nck] {
    font: 600 0.9rem/1.3 var(--font-ui);
    /* Tabular figures so the rising prices line up like a real receipt. */
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--mana-r) 72%, var(--ink));
    white-space: nowrap;
}
.buylist-row-faded .buylist-name[b-071cxd7nck],
.buylist-row-faded .buylist-price[b-071cxd7nck] {
    color: var(--ink-3);
    font-style: italic;
}

.buylist-foot[b-071cxd7nck] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.7rem;
    padding-top: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--mana-r) 30%, var(--line));
}
.buylist-foot-label[b-071cxd7nck] {
    font: 700 0.66rem/1 var(--font-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.buylist-foot-total[b-071cxd7nck] {
    font: 700 1.15rem/1 var(--font-disp);
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--mana-r) 85%, var(--ink));
}

/* ── Pivot between the two answers ──────────────────────────────── */
.contrast-pivot[b-071cxd7nck] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
}
.contrast-pivot-line[b-071cxd7nck] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--mana-r) 35%, transparent),
        color-mix(in srgb, var(--jade) 35%, transparent));
}
.contrast-pivot-word[b-071cxd7nck] {
    flex: none;
    font: 600 0.72rem/1 var(--font-disp);
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}

/* ── "Us": warm binder fanning into a finished deck ─────────────── */
.contrast-us[b-071cxd7nck] {
    border-color: color-mix(in srgb, var(--jade) 26%, var(--line));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--jade) 7%, var(--surf-raised)) 0%, var(--surf) 78%);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--jade) 10%, transparent);
}

.binder[b-071cxd7nck] {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--jade) 22%, var(--line));
    border-radius: 12px;
    background:
        radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--jade-deep) 38%, transparent) 0%, transparent 60%),
        var(--void);
    padding: 1.3rem 1rem 1.1rem;
    overflow: hidden;
}

.binder-glow[b-071cxd7nck] {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 70%;
    height: 60%;
    transform: translate(-50%, -50%);
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--jade) 30%, transparent) 0%, transparent 70%);
    filter: blur(14px);
    pointer-events: none;
}

/* Fan of owned cards on the left resolving into a tidy deck on the right. */
.binder-fan[b-071cxd7nck] {
    position: relative;
    height: 132px;
    margin-bottom: 1rem;
}

.binder-leaf[b-071cxd7nck] {
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 56px;
    height: 80px;
    border-radius: 7px;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--mc) 38%, var(--surf-raised)) 0%, var(--surf-raised) 70%);
    border: 1px solid color-mix(in srgb, var(--mc) 45%, var(--line));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
    transform-origin: 50% 100%;
}
/* A thin "art window" rule near the top of each mini-card. */
.binder-leaf[b-071cxd7nck]::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 8px;
    height: 30px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--mc) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--mc) 35%, transparent);
}
.bl-1[b-071cxd7nck] { transform: translateX(-50%) rotate(-22deg) translateX(-58px); }
.bl-2[b-071cxd7nck] { transform: translateX(-50%) rotate(-9deg)  translateX(-26px); }
.bl-3[b-071cxd7nck] { transform: translateX(-50%) rotate(4deg)   translateX(4px); }
.bl-4[b-071cxd7nck] { transform: translateX(-50%) rotate(15deg)  translateX(32px); }

/* The finished deck the fan resolves into — bright jade, ticked off. */
.binder-deck[b-071cxd7nck] {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(40px);
    width: 60px;
    height: 88px;
    border-radius: 8px;
    background: linear-gradient(160deg, var(--jade) 0%, var(--jade-deep) 90%);
    border: 1px solid var(--jade-bright);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--jade-bright) 50%, transparent),
        0 10px 30px color-mix(in srgb, var(--jade) 32%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 0 9px;
}
/* "Stacked cards" effect: offset back edges peeking out. */
.binder-deck[b-071cxd7nck]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    box-shadow:
        4px 4px 0 -1px color-mix(in srgb, var(--jade-deep) 90%, var(--void)),
        8px 8px 0 -2px color-mix(in srgb, var(--jade-deep) 75%, var(--void));
    z-index: -1;
}
.binder-deck-tick[b-071cxd7nck] {
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--void) 55%, var(--jade-bright));
}
.binder-deck-tick:nth-child(2)[b-071cxd7nck] { width: 78%; }
.binder-deck-tick:nth-child(3)[b-071cxd7nck] { width: 60%; }

.binder-caption[b-071cxd7nck] {
    position: relative;
    margin: 0;
    text-align: center;
    font: 600 0.92rem/1.3 var(--font-disp);
    font-style: italic;
    color: var(--jade-bright);
}

/* ── Closing qualitative line (placeholder for a real measured stat) ── */
.contrast-stat[b-071cxd7nck] {
    margin: clamp(2rem, 4vw, 2.75rem) 0 0;
    max-width: 30em;
    padding-left: 0.95rem;
    border-left: 2px solid var(--jade);
    font: 500 clamp(1.05rem, 1.6vw, 1.25rem)/1.45 var(--font-disp);
    color: var(--ink);
}

/* ── Motion: fan settles, deck lifts, on first reveal ───────────── */
@media (prefers-reduced-motion: no-preference) {
    .contrast-us .binder-deck[b-071cxd7nck] {
        animation: contrast-deck-lift-b-071cxd7nck 1500ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both;
    }
    .contrast-us .binder-glow[b-071cxd7nck] {
        animation: contrast-glow-bloom-b-071cxd7nck 1600ms ease-out 400ms both;
    }
    .contrast-us .binder-leaf[b-071cxd7nck] {
        animation: contrast-leaf-settle-b-071cxd7nck 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .bl-1[b-071cxd7nck] { animation-delay: 120ms; }
    .bl-2[b-071cxd7nck] { animation-delay: 200ms; }
    .bl-3[b-071cxd7nck] { animation-delay: 280ms; }
    .bl-4[b-071cxd7nck] { animation-delay: 360ms; }

    @keyframes contrast-deck-lift-b-071cxd7nck {
        0%   { transform: translateX(40px) translateY(10px) scale(0.96); filter: brightness(0.8); }
        100% { transform: translateX(40px) translateY(0) scale(1); filter: brightness(1); }
    }
    @keyframes contrast-glow-bloom-b-071cxd7nck {
        0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
        100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    @keyframes contrast-leaf-settle-b-071cxd7nck {
        0%   { opacity: 0; }
        100% { opacity: 1; }
    }
}

/* ── Side-by-side at the hero's 720px breakpoint ────────────────── */
@media (min-width: 720px) {
    .contrast-pair[b-071cxd7nck] {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }
    .contrast-card[b-071cxd7nck] {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    /* Let the buy-list / binder grow so both cards share a baseline footer. */
    .contrast-them .buylist[b-071cxd7nck],
    .contrast-us .binder[b-071cxd7nck] {
        flex: 1;
    }
    .contrast-pivot[b-071cxd7nck] {
        flex-direction: column;
        align-self: stretch;
        padding: 0 clamp(0.6rem, 1.6vw, 1.1rem);
    }
    .contrast-pivot-line[b-071cxd7nck] {
        width: 1px;
        height: auto;
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--mana-r) 35%, transparent),
            color-mix(in srgb, var(--jade) 35%, transparent));
    }
    .contrast-pivot-word[b-071cxd7nck] {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }
}
/* /Components/Home/HomeFamiliars.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeFamiliars — "Your Familiar" (homepage design §6.5).
   The roster of advisors as selectable cards. Selecting one retints
   --section-accent (set inline on .home-familiars) to that Familiar's
   colour, which the shared eyebrow already reads — so the section
   literally takes on the chosen voice's hue.

   Per-card colour rides on --fam (set inline from the canonical roster
   colour). Mobile-first single column; two-up at >=620px. All motion is
   transform/opacity only and gated behind prefers-reduced-motion.
   Marks are FamiliarGlyph (our own shapes) — never WotC mana symbols.
   ──────────────────────────────────────────────────────────────── */

.home-familiars[b-7eybdtiegh] {
    overflow: hidden;
    /* The accent wash retints with the selected Familiar (smooth crossfade). */
    transition: background 0.5s ease;
}

/* Atmospheric pool that picks up the *selected* Familiar's accent. */
.home-familiars[b-7eybdtiegh]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(90% 70% at 82% 8%,
            color-mix(in srgb, var(--section-accent) 18%, transparent) 0%, transparent 60%),
        radial-gradient(80% 80% at 8% 100%,
            color-mix(in srgb, var(--jade-deep) 34%, transparent) 0%, transparent 62%);
    transition: background 0.5s ease;
}

.home-familiars > .home-shell[b-7eybdtiegh] {
    position: relative;
    z-index: 1;
}

/* ── Roster grid ─────────────────────────────────────────────────── */
.familiar-roster[b-7eybdtiegh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

/* ── Advisor card — a real <button> for tap + keyboard a11y ──────── */
.familiar-card[b-7eybdtiegh] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 2.5vw, 1.15rem);
    width: 100%;
    min-height: 64px;            /* tap target well over 44px */
    margin: 0;
    padding: 0.95rem 1.05rem;
    text-align: left;
    cursor: pointer;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surf);
    color: var(--ink);
    font-family: var(--font-ui);
    /* A hairline colour seam down the left edge hints the Familiar's hue. */
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--fam) 32%, transparent);
    transition:
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

/* Soft per-card glow, keyed to that Familiar's colour, hidden until lit. */
.familiar-card-glow[b-7eybdtiegh] {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(70% 120% at 6% 50%,
            color-mix(in srgb, var(--fam) 22%, transparent) 0%, transparent 70%);
    transition: opacity 0.24s ease;
}

/* Hover / focus — the lighter affordance (preview, not commit). */
.familiar-card:hover[b-7eybdtiegh] {
    border-color: color-mix(in srgb, var(--fam) 50%, var(--line));
    background: color-mix(in srgb, var(--fam) 7%, var(--surf));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--fam) 60%, transparent);
}
.familiar-card:hover .familiar-card-glow[b-7eybdtiegh] { opacity: 0.6; }
.familiar-card:hover .familiar-mark[b-7eybdtiegh] { color: var(--fam); }

.familiar-card:focus-visible[b-7eybdtiegh] {
    outline: 2px solid var(--fam);
    outline-offset: 3px;
}
.familiar-card:active[b-7eybdtiegh] { transform: translateY(1px); }

/* Selected — the committed state: brighter seam, glow lit, ring. */
.familiar-card.is-selected[b-7eybdtiegh] {
    border-color: color-mix(in srgb, var(--fam) 70%, var(--line));
    background: color-mix(in srgb, var(--fam) 11%, var(--surf-raised));
    box-shadow:
        inset 4px 0 0 var(--fam),
        0 14px 34px color-mix(in srgb, var(--fam) 16%, transparent),
        0 0 0 1px color-mix(in srgb, var(--fam) 30%, transparent);
}
.familiar-card.is-selected .familiar-card-glow[b-7eybdtiegh] { opacity: 1; }

/* ── The mark (FamiliarGlyph fills currentColor) ─────────────────── */
.familiar-mark[b-7eybdtiegh] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 12px;
    font-size: 1.5rem;
    color: color-mix(in srgb, var(--fam) 72%, var(--ink-2));
    background: color-mix(in srgb, var(--fam) 9%, var(--void));
    border: 1px solid color-mix(in srgb, var(--fam) 26%, var(--line));
    transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.familiar-card.is-selected .familiar-mark[b-7eybdtiegh] {
    color: var(--fam);
    background: color-mix(in srgb, var(--fam) 16%, var(--void));
    border-color: color-mix(in srgb, var(--fam) 48%, transparent);
    transform: scale(1.04);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--fam) 45%, transparent));
}

/* ── Name / alignment / tagline ──────────────────────────────────── */
.familiar-meta[b-7eybdtiegh] {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
    flex: 1;
}

.familiar-name-row[b-7eybdtiegh] {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.familiar-name[b-7eybdtiegh] {
    font: 600 1.02rem/1.15 var(--font-disp);
    color: var(--ink);
    letter-spacing: -0.005em;
}
.familiar-align[b-7eybdtiegh] {
    font: 700 0.6rem/1 var(--font-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--fam) 64%, var(--ink-3));
}
.familiar-tagline[b-7eybdtiegh] {
    font: 400 0.88rem/1.4 var(--font-ui);
    color: var(--ink-2);
    text-wrap: pretty;
}

/* ── Pick / Listening affordance label ───────────────────────────── */
.familiar-pick[b-7eybdtiegh] {
    flex: none;
    align-self: center;
    font: 700 0.6rem/1 var(--font-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.4rem 0.6rem;
    border-radius: 999px;
    color: var(--ink-3);
    border: 1px solid var(--line);
    background: transparent;
    white-space: nowrap;
    transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.familiar-card:hover .familiar-pick[b-7eybdtiegh] {
    color: color-mix(in srgb, var(--fam) 70%, var(--ink));
    border-color: color-mix(in srgb, var(--fam) 40%, var(--line));
}
.familiar-card.is-selected .familiar-pick[b-7eybdtiegh] {
    color: var(--void);
    background: var(--fam);
    border-color: var(--fam);
}

/* ── Closing footnote ────────────────────────────────────────────── */
.familiar-footnote[b-7eybdtiegh] {
    margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
    max-width: 34em;
    padding-left: 0.95rem;
    border-left: 2px solid color-mix(in srgb, var(--section-accent) 55%, var(--line));
    font: 400 0.92rem/1.55 var(--font-ui);
    color: var(--ink-3);
    transition: border-color 0.5s ease;
}

/* ── Reveal stagger per card (transform/opacity only) ────────────── */
@media (prefers-reduced-motion: no-preference) {
    .familiar-card[b-7eybdtiegh] {
        animation: familiar-rise-b-7eybdtiegh 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: var(--fam-stagger, 0ms);
    }
    @keyframes familiar-rise-b-7eybdtiegh {
        0%   { opacity: 0; transform: translateY(10px); }
        100% { opacity: 1; transform: translateY(0); }
    }
}

/* ── Two columns once there's room ───────────────────────────────── */
@media (min-width: 620px) {
    .familiar-roster[b-7eybdtiegh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }
}

@media (min-width: 960px) {
    .familiar-card[b-7eybdtiegh] { padding: 1.05rem 1.2rem; }
    .familiar-mark[b-7eybdtiegh] {
        width: 3.1rem;
        height: 3.1rem;
        font-size: 1.65rem;
    }
    .familiar-name[b-7eybdtiegh] { font-size: 1.08rem; }
}
/* /Components/Home/HomeFaq.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeFaq — the quiet closer (homepage design §6.9).
   An accessible accordion built on native <details>/<summary>, styled
   as a stack of ledger rows on the dark Stage. Accent is --ink-3: this
   section reassures, it doesn't shout. A hairline seam runs down the
   left of each row and warms to jade on hover/open; a custom chevron
   rotates on toggle. All motion is transform/opacity only and gated
   behind prefers-reduced-motion: no-preference.
   ──────────────────────────────────────────────────────────────── */

.home-faq[b-0cu8uw8qbv] {
    overflow: hidden;
}

/* A faint top wash so the section reads as a settled, low-energy footer note. */
.home-faq[b-0cu8uw8qbv]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(80% 60% at 50% -10%,
        color-mix(in srgb, var(--jade-deep) 22%, transparent) 0%, transparent 60%);
}

.home-faq > .home-shell[b-0cu8uw8qbv] {
    position: relative;
    z-index: 1;
}

/* ── The stack ──────────────────────────────────────────────────── */
.faq-list[b-0cu8uw8qbv] {
    margin-top: clamp(1.4rem, 4vw, 2.25rem);
    border-top: 1px solid var(--line);
}

.faq-item[b-0cu8uw8qbv] {
    position: relative;
    border-bottom: 1px solid var(--line);
}

/* Left seam: muted by default, warms to jade when the row is open. */
.faq-item[b-0cu8uw8qbv]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: transparent;
    transition: background 0.3s ease;
}
.faq-item[open][b-0cu8uw8qbv]::before {
    background: linear-gradient(180deg, var(--jade) 0%, var(--jade-deep) 100%);
}

/* ── Summary (the question / clickable header) ──────────────────── */
.faq-summary[b-0cu8uw8qbv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Generous tap target — comfortably over 44px tall. */
    padding: clamp(1.05rem, 2.6vw, 1.35rem) clamp(0.5rem, 2vw, 1rem);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
/* Strip the default disclosure triangle across engines. */
.faq-summary[b-0cu8uw8qbv]::-webkit-details-marker { display: none; }
.faq-summary[b-0cu8uw8qbv]::marker { content: ""; }

.faq-summary:hover[b-0cu8uw8qbv] {
    background: color-mix(in srgb, var(--surf) 60%, transparent);
}

.faq-summary:focus-visible[b-0cu8uw8qbv] {
    outline: 2px solid var(--jade-bright);
    outline-offset: -2px;
    border-radius: 6px;
}

.faq-q[b-0cu8uw8qbv] {
    font: 600 clamp(1.02rem, 1.7vw, 1.18rem)/1.35 var(--font-disp);
    color: var(--ink);
    transition: color 0.25s ease;
}
.faq-summary:hover .faq-q[b-0cu8uw8qbv],
.faq-item[open] .faq-q[b-0cu8uw8qbv] {
    color: var(--jade-bright);
}

/* ── Custom chevron (a clean rotating caret) ────────────────────── */
.faq-chevron[b-0cu8uw8qbv] {
    flex: none;
    position: relative;
    width: 14px;
    height: 14px;
    margin-right: 0.2rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-chevron[b-0cu8uw8qbv]::before,
.faq-chevron[b-0cu8uw8qbv]::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9px;
    height: 2px;
    border-radius: 1px;
    background: var(--ink-3);
    transition: background 0.25s ease;
}
.faq-chevron[b-0cu8uw8qbv]::before { left: 0;  transform: translateY(-50%) rotate(45deg); }
.faq-chevron[b-0cu8uw8qbv]::after  { right: 0; transform: translateY(-50%) rotate(-45deg); }

.faq-item[open] .faq-chevron[b-0cu8uw8qbv] {
    transform: rotate(180deg);
}
.faq-summary:hover .faq-chevron[b-0cu8uw8qbv]::before,
.faq-summary:hover .faq-chevron[b-0cu8uw8qbv]::after,
.faq-item[open] .faq-chevron[b-0cu8uw8qbv]::before,
.faq-item[open] .faq-chevron[b-0cu8uw8qbv]::after {
    background: var(--jade-bright);
}

/* ── Answer body ────────────────────────────────────────────────── */
.faq-answer[b-0cu8uw8qbv] {
    padding: 0 clamp(0.5rem, 2vw, 1rem) clamp(1.1rem, 2.6vw, 1.4rem);
}
.faq-answer p[b-0cu8uw8qbv] {
    margin: 0;
    max-width: 46em;
    font: 400 clamp(0.96rem, 1.3vw, 1.05rem)/1.6 var(--font-ui);
    color: var(--ink-2);
}

/* The open answer fades/slides in (purely a polish — content is present
   the moment the row opens, so this never hides information). */
@media (prefers-reduced-motion: no-preference) {
    .faq-item[open] .faq-answer[b-0cu8uw8qbv] {
        animation: faq-reveal-b-0cu8uw8qbv 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes faq-reveal-b-0cu8uw8qbv {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ── Unconfirmed pricing placeholder — visibly provisional ──────── */
.faq-placeholder[b-0cu8uw8qbv] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0;
    padding: 0.6rem 0.85rem;
    border: 1px dashed color-mix(in srgb, var(--gold) 45%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--gold) 7%, transparent);
    font: 500 clamp(0.92rem, 1.2vw, 1rem)/1.5 var(--font-ui);
    font-style: italic;
    color: var(--ink-2);
}
.faq-placeholder-tag[b-0cu8uw8qbv] {
    flex: none;
    font: 700 0.62rem/1 var(--font-ui);
    font-style: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 0.32rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
    background: color-mix(in srgb, var(--gold) 10%, transparent);
}
/* /Components/Home/HomeFinalCta.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeFinalCta — the closing call-to-action (homepage design §6.8).
   A full-bleed cinematic Stage close: deep void→jade-deep gradient
   backdrop, a soft overhead beam, and drifting CSS "card-art motes"
   that catch the light. The headline is the hero; both import CTAs
   sit centered beneath it, with the Spark Familiar's sign-off last.

   Mobile-first, centered single column. All motion is transform/opacity
   only and gated behind prefers-reduced-motion: no-preference.
   ──────────────────────────────────────────────────────────────── */

.home-finalcta[b-7vjwfthxfd] {
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    /* A richer, taller close than a standard section — this is the curtain. */
    padding-block: clamp(4rem, 11vw, 8rem);
    /* Full-bleed stage floor: void deepening into jade at the horizon. */
    background:
        radial-gradient(140% 120% at 50% 118%, color-mix(in srgb, var(--jade-deep) 70%, transparent) 0%, transparent 60%),
        radial-gradient(90% 70% at 50% -10%, color-mix(in srgb, var(--jade-deep) 32%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, var(--void) 0%, color-mix(in srgb, var(--jade-deep) 22%, var(--void)) 100%);
}

/* A hairline jade horizon line across the top — the stage lip. */
.home-finalcta[b-7vjwfthxfd]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--jade) 55%, transparent) 50%,
        transparent 100%);
    z-index: 1;
}

/* ── Decorative stage atmosphere ─────────────────────────────────── */
.finalcta-stage[b-7vjwfthxfd] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Soft overhead spotlight beam pooling onto the headline. */
.finalcta-beam[b-7vjwfthxfd] {
    position: absolute;
    left: 50%;
    top: -8%;
    width: min(120%, 760px);
    height: 70%;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 0%,
        color-mix(in srgb, var(--jade) 18%, transparent) 0%,
        transparent 70%);
    filter: blur(6px);
}

/* Drifting motes — flecks of card art catching the stage light. */
.finalcta-mote[b-7vjwfthxfd] {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        color-mix(in srgb, var(--jade-bright) 90%, transparent) 0%,
        color-mix(in srgb, var(--jade) 40%, transparent) 55%,
        transparent 75%);
    opacity: 0.5;
    box-shadow: 0 0 10px color-mix(in srgb, var(--jade) 50%, transparent);
}
/* One warm gold mote — the "found" card, echoing the Familiar's spark. */
.fm-3[b-7vjwfthxfd] {
    background: radial-gradient(circle at 35% 30%,
        color-mix(in srgb, var(--gold) 92%, transparent) 0%,
        color-mix(in srgb, var(--gold) 45%, transparent) 55%,
        transparent 75%);
    box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 55%, transparent);
    width: 9px;
    height: 9px;
    opacity: 0.6;
}
.fm-1[b-7vjwfthxfd] { left: 12%; top: 26%; }
.fm-2[b-7vjwfthxfd] { left: 84%; top: 34%; width: 5px; height: 5px; }
.fm-3[b-7vjwfthxfd] { left: 78%; top: 64%; }
.fm-4[b-7vjwfthxfd] { left: 18%; top: 70%; width: 5px; height: 5px; }
.fm-5[b-7vjwfthxfd] { left: 50%; top: 14%; width: 4px; height: 4px; opacity: 0.4; }
.fm-6[b-7vjwfthxfd] { left: 30%; top: 48%; width: 6px; height: 6px; }

/* ── Content column ──────────────────────────────────────────────── */
.finalcta-inner[b-7vjwfthxfd] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Eyebrow centers and reads as a faint stage cue. */
.finalcta-eyebrow[b-7vjwfthxfd] {
    color: color-mix(in srgb, var(--jade-bright) 80%, var(--ink-3));
}

.finalcta-title[b-7vjwfthxfd] {
    font-family: var(--font-disp);
    font-weight: 600;
    font-size: clamp(2rem, 6.2vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.014em;
    color: var(--ink);
    margin: 0 0 1.1rem;
    max-width: 16em;
    text-wrap: balance;
}

/* The closing gem accent — the "second chance" lands in bright jade. */
.finalcta-gem[b-7vjwfthxfd] {
    color: var(--jade-bright);
    font-style: italic;
    text-shadow: 0 0 26px color-mix(in srgb, var(--jade) 45%, transparent);
}

.finalcta-body[b-7vjwfthxfd] {
    font: 400 clamp(1.04rem, 1.5vw, 1.24rem)/1.6 var(--font-ui);
    color: var(--ink-2);
    max-width: 30em;
    margin: 0 0 2rem;
    text-wrap: pretty;
}

/* ── CTAs ────────────────────────────────────────────────────────── */
.finalcta-actions[b-7vjwfthxfd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    max-width: 24rem;
}
.finalcta-cta-wrap[b-7vjwfthxfd] {
    width: 100%;
}

/* Primary CTA — large, prominent solid jade. home-cta-primary has no global
   definition; ::deep reaches the <button> rendered inside SignInPrompt and is
   scoped under .finalcta-cta-wrap so the style cannot leak. */
.finalcta-cta-wrap[b-7vjwfthxfd]  .home-cta-primary {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 1rem 2rem;
    border: 1px solid var(--jade);
    border-radius: 12px;
    background: var(--jade);
    color: var(--void);
    font: 600 1.08rem/1 var(--font-ui);
    letter-spacing: 0.005em;
    cursor: pointer;
    box-shadow:
        0 14px 36px color-mix(in srgb, var(--jade) 36%, transparent),
        0 0 0 4px color-mix(in srgb, var(--jade) 14%, transparent);
    transition: background 0.18s ease, box-shadow 0.2s ease, transform 0.18s ease;
}
.finalcta-cta-wrap[b-7vjwfthxfd]  .home-cta-primary:hover {
    background: var(--jade-bright);
    border-color: var(--jade-bright);
    box-shadow:
        0 18px 44px color-mix(in srgb, var(--jade) 46%, transparent),
        0 0 0 5px color-mix(in srgb, var(--jade) 18%, transparent);
}
.finalcta-cta-wrap[b-7vjwfthxfd]  .home-cta-primary:active {
    transform: translateY(1px);
}
.finalcta-cta-wrap[b-7vjwfthxfd]  .home-cta-primary:focus-visible {
    outline: 2px solid var(--jade-bright);
    outline-offset: 3px;
}

/* Secondary CTA — quieter ghost/outline, also routes to import. */
.finalcta-cta-wrap[b-7vjwfthxfd]  .home-cta-secondary {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 0.8rem 1.6rem;
    border: 1px solid color-mix(in srgb, var(--jade) 38%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--jade) 6%, transparent);
    color: var(--ink);
    font: 600 0.96rem/1 var(--font-ui);
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.finalcta-cta-wrap[b-7vjwfthxfd]  .home-cta-secondary:hover {
    color: var(--jade-bright);
    border-color: color-mix(in srgb, var(--jade) 60%, transparent);
    background: color-mix(in srgb, var(--jade) 12%, transparent);
}
.finalcta-cta-wrap[b-7vjwfthxfd]  .home-cta-secondary:focus-visible {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}

/* ── Closing Familiar sign-off — real content, gold Spark mark ───── */
.finalcta-familiar[b-7vjwfthxfd] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 2.1rem 0 0;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line));
    background: color-mix(in srgb, var(--gold) 6%, transparent);
    font: 400 0.94rem/1.4 var(--font-ui);
    color: var(--ink-2);
    text-wrap: pretty;
}
.finalcta-familiar-mark[b-7vjwfthxfd] {
    flex: none;
    display: inline-flex;
    font-size: 1.15rem;
    color: var(--gold);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 50%, transparent));
}
.finalcta-familiar-name[b-7vjwfthxfd] {
    color: var(--gold);
    font-weight: 600;
    margin-right: 0.3rem;
}

/* ── Motion: spotlight breathes, motes drift, on first reveal ────── */
@media (prefers-reduced-motion: no-preference) {
    .finalcta-beam[b-7vjwfthxfd] {
        animation: finalcta-beam-breathe-b-7vjwfthxfd 7s ease-in-out infinite;
    }
    .finalcta-mote[b-7vjwfthxfd] {
        animation: finalcta-mote-drift-b-7vjwfthxfd 9s ease-in-out infinite;
    }
    .fm-1[b-7vjwfthxfd] { animation-duration: 8.5s;  animation-delay: -1.2s; }
    .fm-2[b-7vjwfthxfd] { animation-duration: 10.5s; animation-delay: -3.4s; }
    .fm-3[b-7vjwfthxfd] { animation-duration: 7.5s;  animation-delay: -0.6s; }
    .fm-4[b-7vjwfthxfd] { animation-duration: 11s;   animation-delay: -5s;   }
    .fm-5[b-7vjwfthxfd] { animation-duration: 9.5s;  animation-delay: -2.1s; }
    .fm-6[b-7vjwfthxfd] { animation-duration: 8s;    animation-delay: -4.2s; }

    .finalcta-familiar-mark[b-7vjwfthxfd] {
        animation: finalcta-spark-pulse-b-7vjwfthxfd 3.2s ease-in-out 1.6s infinite;
    }

    @keyframes finalcta-beam-breathe-b-7vjwfthxfd {
        0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
        50%      { opacity: 1;    transform: translateX(-50%) scale(1.04); }
    }
    @keyframes finalcta-mote-drift-b-7vjwfthxfd {
        0%   { transform: translate(0, 0);        opacity: 0.25; }
        50%  { transform: translate(6px, -14px);  opacity: 0.65; }
        100% { transform: translate(0, 0);        opacity: 0.25; }
    }
    @keyframes finalcta-spark-pulse-b-7vjwfthxfd {
        0%, 100% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 50%, transparent)); }
        50%      { filter: drop-shadow(0 0 13px color-mix(in srgb, var(--gold) 80%, transparent)); }
    }
}

/* ── Roomier composition at the hero's 720px breakpoint ──────────── */
@media (min-width: 720px) {
    .finalcta-actions[b-7vjwfthxfd] {
        flex-direction: row;
        justify-content: center;
        max-width: none;
        gap: 1rem;
    }
    .finalcta-cta-wrap[b-7vjwfthxfd] {
        width: auto;
    }
    .finalcta-cta-wrap[b-7vjwfthxfd]  .home-cta-primary,
    .finalcta-cta-wrap[b-7vjwfthxfd]  .home-cta-secondary {
        width: auto;
    }
}
/* /Components/Home/HomeHero.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeHero — signed-out landing hero (homepage design §6.1).
   Mobile-first single column; two-column hero at >=720px.
   The signature visual is the "gem-lift": a buried, dimmed card
   brightens and rises out of the fan with a soft gold halo.
   All motion is transform/opacity only and gated behind
   prefers-reduced-motion: no-preference.
   ──────────────────────────────────────────────────────────────── */

.home-hero[b-v4x2qgi6kb] {
    overflow: hidden;
}

/* Atmospheric jade pool behind the hero — depth, not a flat fill. */
.home-hero[b-v4x2qgi6kb]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 78% 18%, color-mix(in srgb, var(--jade-deep) 55%, transparent) 0%, transparent 58%),
        radial-gradient(80% 70% at 12% 92%, color-mix(in srgb, var(--jade-deep) 30%, transparent) 0%, transparent 60%);
    z-index: 0;
}

.home-hero-grid[b-v4x2qgi6kb] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.25rem, 5vw, 3.5rem);
    align-items: center;
}

/* ── Copy column ─────────────────────────────────────────────────── */
.home-hero-copy[b-v4x2qgi6kb] {
    max-width: 38rem;
}

.home-hero-title[b-v4x2qgi6kb] {
    font-family: var(--font-disp);
    font-weight: 600;
    font-size: clamp(2.05rem, 6vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 0 0 1.15rem;
    text-wrap: balance;
}

/* Jade "gem" accent on the two load-bearing phrases. */
.home-gem[b-v4x2qgi6kb] {
    color: var(--jade-bright);
    font-style: italic;
}

.home-hero-lede[b-v4x2qgi6kb] {
    font: 400 clamp(1.02rem, 1.4vw, 1.18rem)/1.62 var(--font-ui);
    color: var(--ink-2);
    max-width: 36em;
    margin: 0 0 1.1rem;
}

/* Anti-meta wedge — small, dimmer, punches at the system not players. */
.home-hero-wedge[b-v4x2qgi6kb] {
    font: 400 0.92rem/1.55 var(--font-ui);
    color: var(--ink-3);
    max-width: 34em;
    margin: 0 0 1.6rem;
    padding-left: 0.9rem;
    border-left: 2px solid color-mix(in srgb, var(--jade) 45%, transparent);
}
.home-hero-wedge em[b-v4x2qgi6kb] {
    font-style: italic;
    color: var(--ink-2);
}

/* ── CTAs ────────────────────────────────────────────────────────── */
.home-hero-ctas[b-v4x2qgi6kb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.1rem;
    margin: 0 0 1.4rem;
}

/* Primary CTA — solid jade. Styled here because home-cta-primary has no
   global definition; ::deep reaches the <button> rendered by SignInPrompt. */
.home-hero-ctas[b-v4x2qgi6kb]  .home-cta-primary {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.5rem;
    border: 1px solid var(--jade);
    border-radius: 10px;
    background: var(--jade);
    color: var(--void);
    font: 600 0.98rem/1 var(--font-ui);
    letter-spacing: 0.005em;
    cursor: pointer;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--jade) 30%, transparent);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.home-hero-ctas[b-v4x2qgi6kb]  .home-cta-primary:hover {
    background: var(--jade-bright);
    border-color: var(--jade-bright);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--jade) 40%, transparent);
}
.home-hero-ctas[b-v4x2qgi6kb]  .home-cta-primary:active {
    transform: translateY(1px);
}
.home-hero-ctas[b-v4x2qgi6kb]  .home-cta-primary:focus-visible {
    outline: 2px solid var(--jade-bright);
    outline-offset: 3px;
}

/* Ghost link — quieter alternative, anchors to the how-it-works section. */
.home-cta-ghost[b-v4x2qgi6kb] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    color: var(--ink);
    font: 600 0.95rem/1 var(--font-ui);
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease;
}
.home-cta-ghost:hover[b-v4x2qgi6kb] {
    color: var(--jade-bright);
    background: color-mix(in srgb, var(--jade) 12%, transparent);
}
.home-cta-ghost:focus-visible[b-v4x2qgi6kb] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}
.home-cta-ghost-arrow[b-v4x2qgi6kb] {
    font-size: 0.9em;
    transition: transform 0.2s ease;
}
.home-cta-ghost:hover .home-cta-ghost-arrow[b-v4x2qgi6kb] {
    transform: translateY(2px);
}

/* ── Trust / friction-reducer strip ──────────────────────────────── */
.home-hero-trust[b-v4x2qgi6kb] {
    font: 400 0.86rem/1.55 var(--font-ui);
    color: var(--ink-2); /* AA: --ink-3 fails 4.5:1 at this size on the stage */
    max-width: 34em;
    margin: 0;
}
.home-hero-trust strong[b-v4x2qgi6kb] {
    color: var(--ink-2);
    font-weight: 600;
}
.home-trust-dot[b-v4x2qgi6kb] {
    color: var(--jade);
    padding-inline: 0.1rem;
}

/* ── Stage: card fan + gem-lift + Familiar question ──────────────── */
.home-hero-stage[b-v4x2qgi6kb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}

.home-fan[b-v4x2qgi6kb] {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: clamp(280px, 64vw, 380px);
}

/* Soft jade pool under the whole fan for grounding. */
.home-fan-glow[b-v4x2qgi6kb] {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 78%;
    height: 60%;
    transform: translate(-50%, -50%);
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--jade) 26%, transparent) 0%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}

.home-fan-card[b-v4x2qgi6kb] {
    position: absolute;
    top: 52%;
    left: 50%;
    width: clamp(150px, 40vw, 188px);
    aspect-ratio: 5 / 7;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surf-raised);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.46);
}
.home-fan-card img[b-v4x2qgi6kb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The three buried fan cards — dim, so the lift reads as "rescued". */
.hfc-back[b-v4x2qgi6kb] { transform: translate(-50%, -50%) rotate(-15deg) translateX(-62px); filter: brightness(0.5) saturate(0.8); }
.hfc-mid[b-v4x2qgi6kb]  { transform: translate(-50%, -50%) rotate(-4deg)  translateX(-8px);  filter: brightness(0.6) saturate(0.85); }
.hfc-front[b-v4x2qgi6kb]{ transform: translate(-50%, -50%) rotate(11deg)  translateX(50px);  filter: brightness(0.62) saturate(0.85); }

/* ── Gem-lift card: starts buried/dim, ends lifted/bright/haloed ── */
.hfc-lift[b-v4x2qgi6kb] {
    overflow: visible;
    z-index: 3;
    border-color: var(--gold);
    /* Default (reduced-motion / no-JS) END state: lifted, bright, haloed. */
    transform: translate(-50%, -50%) rotate(-2deg) translateY(-30px) scale(1.04);
    filter: brightness(1.06) saturate(1.05);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent),
        0 12px 40px color-mix(in srgb, var(--gold) 30%, transparent);
}
.hfc-lift img[b-v4x2qgi6kb] {
    border-radius: 11px;
}

/* Gold halo bloom behind the lifted card. */
.home-fan-halo[b-v4x2qgi6kb] {
    position: absolute;
    inset: -14% -14% -10%;
    border-radius: 22px;
    background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--gold) 42%, transparent) 0%, transparent 72%);
    filter: blur(10px);
    z-index: -1;
    pointer-events: none;
}

.home-fan-found[b-v4x2qgi6kb] {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    white-space: nowrap;
    font: 600 10px/1 var(--font-ui);
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 16%, var(--void));
    border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
    border-radius: 20px;
    padding: 4px 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* ── Familiar curiosity line — real content, not aria-hidden ─────── */
.home-familiar-ask[b-v4x2qgi6kb] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 24rem;
    margin: 0;
    padding: 0.8rem 1rem;
    border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--gold) 7%, var(--surf));
    font: 400 0.92rem/1.5 var(--font-ui);
    color: var(--ink-2);
}
.home-familiar-mark[b-v4x2qgi6kb] {
    flex: none;
    font-size: 1.2rem;
    line-height: 1.35;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 45%, transparent));
}
.home-familiar-text[b-v4x2qgi6kb] {
    text-wrap: pretty;
}

/* ── Motion: gem-lift animates from buried → lifted on load ──────── */
@media (prefers-reduced-motion: no-preference) {
    .hfc-lift[b-v4x2qgi6kb] {
        animation: hero-gem-lift-b-v4x2qgi6kb 1700ms cubic-bezier(0.16, 1, 0.3, 1) 350ms both;
    }
    .home-fan-halo[b-v4x2qgi6kb] {
        animation: hero-halo-bloom-b-v4x2qgi6kb 1700ms ease-out 350ms both;
    }
    .home-fan-found[b-v4x2qgi6kb] {
        animation: hero-found-fade-b-v4x2qgi6kb 700ms ease-out 1500ms both;
    }
    .home-familiar-mark[b-v4x2qgi6kb] {
        animation: hero-spark-pulse-b-v4x2qgi6kb 3.2s ease-in-out 2.1s infinite;
    }

    @keyframes hero-gem-lift-b-v4x2qgi6kb {
        0% {
            /* Buried among the fan: dim, low, tucked behind the front card. */
            transform: translate(-50%, -50%) rotate(11deg) translateX(50px) translateY(6px) scale(0.97);
            filter: brightness(0.6) saturate(0.85);
        }
        55% {
            transform: translate(-50%, -50%) rotate(2deg) translateY(-40px) scale(1.06);
            filter: brightness(1.1) saturate(1.08);
        }
        100% {
            transform: translate(-50%, -50%) rotate(-2deg) translateY(-30px) scale(1.04);
            filter: brightness(1.06) saturate(1.05);
        }
    }
    @keyframes hero-halo-bloom-b-v4x2qgi6kb {
        0%   { opacity: 0; transform: scale(0.7); }
        60%  { opacity: 1; transform: scale(1.05); }
        100% { opacity: 1; transform: scale(1); }
    }
    @keyframes hero-found-fade-b-v4x2qgi6kb {
        0%   { opacity: 0; transform: translateX(-50%) translateY(-4px); }
        100% { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    @keyframes hero-spark-pulse-b-v4x2qgi6kb {
        0%, 100% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 45%, transparent)); }
        50%      { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gold) 75%, transparent)); }
    }
}

/* ── Two-column hero at the existing 720px breakpoint ────────────── */
@media (min-width: 720px) {
    .home-hero-grid[b-v4x2qgi6kb] {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: clamp(2rem, 4vw, 4rem);
    }
    .home-fan[b-v4x2qgi6kb] {
        max-width: 460px;
        height: clamp(360px, 30vw, 440px);
    }
    .home-fan-card[b-v4x2qgi6kb] {
        width: clamp(168px, 16vw, 200px);
    }
    .home-familiar-ask[b-v4x2qgi6kb] {
        align-self: stretch;
    }
}
/* /Components/Home/HomeHowItWorks.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeHowItWorks — the "how it works" section (homepage design §6.3).
   Four steps threaded onto one glowing spine. Mobile-first: a vertical
   stepper with a connecting spine line down the numbered medallions.
   At >=720px it becomes a zig-zag — steps alternate sides of a centred
   spine so the per-step accent (U → G → gold → R) travels across the
   four beats "from binder to battlefield".

   Each step exposes --step-accent; the medallion, motif and the spine
   segment leading into it all read from it. All motion is transform/
   opacity only and gated behind prefers-reduced-motion: no-preference.
   Motifs/spine are decorative (aria-hidden in markup).
   ──────────────────────────────────────────────────────────────── */

.how[b-upo9jj3eqn] {
    overflow: hidden;
}

/* A faint green pool — the section's own atmosphere, not a flat fill. */
.how[b-upo9jj3eqn]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(72% 60% at 14% 8%, color-mix(in srgb, var(--mana-g) 12%, transparent) 0%, transparent 58%),
        radial-gradient(80% 70% at 90% 96%, color-mix(in srgb, var(--jade-deep) 34%, transparent) 0%, transparent 60%);
}

.how > .home-shell[b-upo9jj3eqn] {
    position: relative;
    z-index: 1;
}

/* ── The stepper ─────────────────────────────────────────────────── */
.how-steps[b-upo9jj3eqn] {
    list-style: none;
    margin: clamp(2.25rem, 5vw, 3.25rem) 0 0;
    padding: 0;
    counter-reset: how;
}

/* Each step is a grid: [node] [card]. The spine runs through the node
   column, connecting one medallion to the next down the rail. */
.how-step[b-upo9jj3eqn] {
    position: relative;
    display: grid;
    grid-template-columns: clamp(2.6rem, 8vw, 3.1rem) 1fr;
    column-gap: clamp(0.9rem, 3vw, 1.3rem);
    padding-bottom: clamp(1.5rem, 4vw, 2.1rem);
}
.how-step:last-child[b-upo9jj3eqn] {
    padding-bottom: 0;
}

/* ── Spine: a vertical accent line from this node down to the next ── */
.how-spine[b-upo9jj3eqn] {
    position: absolute;
    left: clamp(1.3rem, 4vw, 1.55rem);
    top: clamp(2.6rem, 8vw, 3.1rem);
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--step-accent) 70%, transparent) 0%,
        color-mix(in srgb, var(--step-accent) 22%, transparent) 100%);
    pointer-events: none;
}
/* The last step terminates the rail — no trailing segment. */
.how-step:last-child .how-spine[b-upo9jj3eqn] {
    display: none;
}

/* ── Numbered medallion ──────────────────────────────────────────── */
.how-node[b-upo9jj3eqn] {
    position: relative;
    z-index: 1;
    width: clamp(2.6rem, 8vw, 3.1rem);
    height: clamp(2.6rem, 8vw, 3.1rem);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(120% 120% at 50% 18%, color-mix(in srgb, var(--step-accent) 26%, var(--surf-raised)) 0%, var(--surf-raised) 72%);
    border: 1px solid color-mix(in srgb, var(--step-accent) 55%, var(--line));
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.4),
        0 0 0 5px color-mix(in srgb, var(--step-accent) 9%, transparent),
        inset 0 0 12px color-mix(in srgb, var(--step-accent) 18%, transparent);
}
.how-num[b-upo9jj3eqn] {
    font: 600 clamp(1.15rem, 3.4vw, 1.45rem)/1 var(--font-disp);
    color: color-mix(in srgb, var(--step-accent) 60%, var(--ink));
}

/* ── Step card ───────────────────────────────────────────────────── */
.how-card[b-upo9jj3eqn] {
    position: relative;
    border-radius: 16px;
    padding: clamp(1.05rem, 3.2vw, 1.5rem);
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--step-accent) 6%, var(--surf-raised)) 0%, var(--surf) 80%);
    /* A thin accent seam down the leading edge — the card belongs to its beat. */
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--step-accent) 60%, transparent);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.how-card:hover[b-upo9jj3eqn] {
    border-color: color-mix(in srgb, var(--step-accent) 38%, var(--line));
    box-shadow:
        inset 3px 0 0 color-mix(in srgb, var(--step-accent) 75%, transparent),
        0 16px 36px rgba(0, 0, 0, 0.35);
}

.how-step-title[b-upo9jj3eqn] {
    font: 600 clamp(1.08rem, 2.6vw, 1.32rem)/1.2 var(--font-disp);
    letter-spacing: -0.008em;
    color: var(--ink);
    margin: 0 0 0.5rem;
    text-wrap: balance;
}
.how-step-body[b-upo9jj3eqn] {
    font: 400 clamp(0.92rem, 1.2vw, 1rem)/1.58 var(--font-ui);
    color: var(--ink-2);
    margin: 0;
    max-width: 38em;
    text-wrap: pretty;
}

/* ── Shared motif frame ──────────────────────────────────────────── */
.how-motif[b-upo9jj3eqn] {
    position: relative;
    width: 100%;
    height: 84px;
    margin-bottom: 0.95rem;
    border-radius: 11px;
    overflow: hidden;
    background:
        radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--step-accent) 14%, transparent) 0%, transparent 62%),
        var(--void);
    border: 1px solid color-mix(in srgb, var(--step-accent) 18%, var(--line));
}

/* ════════════════════════════════════════════════════════════════
   Motif 1 · Reveal — dim stack with one gem lifting out, haloed.
   ════════════════════════════════════════════════════════════════ */
.motif-stack[b-upo9jj3eqn] {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
}
.ms-card[b-upo9jj3eqn] {
    position: absolute;
    width: 26px;
    height: 36px;
    border-radius: 4px;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    filter: brightness(0.55) saturate(0.8);
}
.ms-c1[b-upo9jj3eqn] { transform: rotate(-12deg) translate(-12px, 2px); }
.ms-c2[b-upo9jj3eqn] { transform: rotate(-2deg)  translate(2px, 0); }
.ms-c3[b-upo9jj3eqn] { transform: rotate(9deg)   translate(15px, 2px); }

.motif-gem[b-upo9jj3eqn] {
    position: absolute;
    right: 30px;
    top: 50%;
    width: 28px;
    height: 38px;
    border-radius: 4px;
    transform: translateY(-58%) rotate(-3deg);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--mana-u) 55%, var(--surf-raised)) 0%,
        var(--surf-raised) 80%);
    border: 1px solid color-mix(in srgb, var(--mana-u) 70%, var(--line));
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--mana-u) 45%, transparent);
}
.motif-gem-halo[b-upo9jj3eqn] {
    position: absolute;
    inset: -60% -70%;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--mana-u) 38%, transparent) 0%, transparent 70%);
    filter: blur(5px);
    z-index: -1;
}

/* ════════════════════════════════════════════════════════════════
   Motif 2 · Pick — commander medallion above selectable vibe chips.
   ════════════════════════════════════════════════════════════════ */
.how-motif-pick[b-upo9jj3eqn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.motif-crown[b-upo9jj3eqn] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:
        radial-gradient(120% 120% at 50% 20%, color-mix(in srgb, var(--mana-g) 40%, var(--surf-raised)) 0%, var(--surf-raised) 75%);
    border: 1px solid color-mix(in srgb, var(--mana-g) 60%, var(--line));
    box-shadow: 0 0 10px color-mix(in srgb, var(--mana-g) 30%, transparent);
    position: relative;
}
/* A small crown notch on top of the commander medallion. */
.motif-crown[b-upo9jj3eqn]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -4px;
    width: 14px;
    height: 7px;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--mana-g) 70%, var(--gold));
    clip-path: polygon(0 100%, 18% 30%, 36% 100%, 50% 12%, 64% 100%, 82% 30%, 100% 100%);
}
.motif-vibes[b-upo9jj3eqn] {
    display: flex;
    gap: 5px;
}
.motif-chip[b-upo9jj3eqn] {
    font: 600 0.56rem/1 var(--font-ui);
    letter-spacing: 0.04em;
    color: var(--ink-3);
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surf);
}
.motif-chip-on[b-upo9jj3eqn] {
    color: color-mix(in srgb, var(--mana-g) 30%, var(--ink));
    border-color: color-mix(in srgb, var(--mana-g) 55%, transparent);
    background: color-mix(in srgb, var(--mana-g) 14%, transparent);
}

/* ════════════════════════════════════════════════════════════════
   Motif 3 · Build — Familiar spark, reasoning lines, a deck forming.
   ════════════════════════════════════════════════════════════════ */
.how-motif-build[b-upo9jj3eqn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 20px;
}
.motif-spark[b-upo9jj3eqn] {
    flex: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--gold);
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gold) 60%, transparent));
}
.motif-reasons[b-upo9jj3eqn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.motif-line[b-upo9jj3eqn] {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--gold) 55%, transparent),
        color-mix(in srgb, var(--gold) 8%, transparent));
}
.motif-line:nth-child(1)[b-upo9jj3eqn] { width: 100%; }
.motif-line:nth-child(2)[b-upo9jj3eqn] { width: 78%; }
.motif-line:nth-child(3)[b-upo9jj3eqn] { width: 88%; }
.motif-deck[b-upo9jj3eqn] {
    flex: none;
    width: 30px;
    height: 42px;
    border-radius: 5px;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--gold) 30%, var(--surf-raised)) 0%,
        var(--surf-raised) 80%);
    border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line));
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);
    position: relative;
}
/* Stacked back-edges peeking behind the deck. */
.motif-deck[b-upo9jj3eqn]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 5px;
    box-shadow:
        3px 3px 0 -1px color-mix(in srgb, var(--gold) 22%, var(--void)),
        6px 6px 0 -2px color-mix(in srgb, var(--gold) 14%, var(--void));
    z-index: -1;
}

/* ════════════════════════════════════════════════════════════════
   Motif 4 · Playtest — a hand of cards over an evolving board.
   ════════════════════════════════════════════════════════════════ */
.how-motif-play[b-upo9jj3eqn] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.motif-board[b-upo9jj3eqn] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--mana-r) 16%, transparent) 100%);
    border-top: 1px solid color-mix(in srgb, var(--mana-r) 28%, var(--line));
}
.motif-pip[b-upo9jj3eqn] {
    position: absolute;
    bottom: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mana-r) 65%, var(--ink));
    box-shadow: 0 0 8px color-mix(in srgb, var(--mana-r) 55%, transparent);
}
.motif-pip-1[b-upo9jj3eqn] { left: 26%; }
.motif-pip-2[b-upo9jj3eqn] { left: 50%; bottom: 12px; }
.motif-pip-3[b-upo9jj3eqn] { left: 72%; }

.motif-hand[b-upo9jj3eqn] {
    position: relative;
    margin-bottom: 14px;
    width: 70px;
    height: 44px;
}
.mh-card[b-upo9jj3eqn] {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 26px;
    height: 38px;
    border-radius: 4px;
    transform-origin: 50% 100%;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--mana-r) 26%, var(--surf-raised)) 0%,
        var(--surf-raised) 80%);
    border: 1px solid color-mix(in srgb, var(--mana-r) 45%, var(--line));
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.5);
}
.mh-1[b-upo9jj3eqn] { transform: translateX(-50%) rotate(-16deg) translateX(-15px); }
.mh-2[b-upo9jj3eqn] { transform: translateX(-50%) rotate(0deg)   translateY(-3px); }
.mh-3[b-upo9jj3eqn] { transform: translateX(-50%) rotate(16deg)  translateX(15px); }

/* ── Motion: motifs settle in on first reveal ────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    /* The reveal gem lifts and brightens, echoing the hero's gem-lift. */
    .how-motif-reveal .motif-gem[b-upo9jj3eqn] {
        animation: how-gem-lift-b-upo9jj3eqn 1500ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
    }
    .how-motif-reveal .motif-gem-halo[b-upo9jj3eqn] {
        animation: how-halo-bloom-b-upo9jj3eqn 1500ms ease-out 300ms both;
    }
    .how-motif-build .motif-spark[b-upo9jj3eqn] {
        animation: how-spark-pulse-b-upo9jj3eqn 3.4s ease-in-out 1.2s infinite;
    }
    .how-motif-build .motif-line[b-upo9jj3eqn] {
        animation: how-line-draw-b-upo9jj3eqn 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
        transform-origin: left center;
    }
    .how-motif-build .motif-line:nth-child(1)[b-upo9jj3eqn] { animation-delay: 200ms; }
    .how-motif-build .motif-line:nth-child(2)[b-upo9jj3eqn] { animation-delay: 340ms; }
    .how-motif-build .motif-line:nth-child(3)[b-upo9jj3eqn] { animation-delay: 480ms; }

    @keyframes how-gem-lift-b-upo9jj3eqn {
        0%   { transform: translateY(-44%) rotate(4deg) scale(0.95); filter: brightness(0.7); }
        100% { transform: translateY(-58%) rotate(-3deg) scale(1);   filter: brightness(1.05); }
    }
    @keyframes how-halo-bloom-b-upo9jj3eqn {
        0%   { opacity: 0; transform: scale(0.6); }
        100% { opacity: 1; transform: scale(1); }
    }
    @keyframes how-spark-pulse-b-upo9jj3eqn {
        0%, 100% { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gold) 55%, transparent)); }
        50%      { filter: drop-shadow(0 0 13px color-mix(in srgb, var(--gold) 85%, transparent)); }
    }
    @keyframes how-line-draw-b-upo9jj3eqn {
        0%   { transform: scaleX(0); opacity: 0; }
        100% { transform: scaleX(1); opacity: 1; }
    }
}

/* ── Zig-zag at the hero's 720px breakpoint ──────────────────────── */
@media (min-width: 720px) {
    /* Centre the spine; steps alternate to either side of it. */
    .how-steps[b-upo9jj3eqn] {
        position: relative;
        margin-top: clamp(2.75rem, 5vw, 3.75rem);
    }
    /* The continuous central rail behind every step. */
    .how-steps[b-upo9jj3eqn]::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0.6rem;
        bottom: 0.6rem;
        width: 2px;
        transform: translateX(-50%);
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--mana-u) 55%, transparent) 0%,
            color-mix(in srgb, var(--mana-g) 55%, transparent) 34%,
            color-mix(in srgb, var(--gold) 55%, transparent) 66%,
            color-mix(in srgb, var(--mana-r) 55%, transparent) 100%);
        pointer-events: none;
    }

    .how-step[b-upo9jj3eqn] {
        grid-template-columns: 1fr clamp(2.8rem, 4vw, 3.2rem) 1fr;
        column-gap: clamp(1.1rem, 2.4vw, 1.8rem);
        align-items: center;
        padding-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
    }
    /* Node sits in the centre column, on the rail. */
    .how-node[b-upo9jj3eqn] {
        grid-column: 2;
        grid-row: 1;
    }
    /* Per-step spine segments are replaced by the continuous rail. */
    .how-step .how-spine[b-upo9jj3eqn] {
        display: none;
    }

    /* Odd steps: card on the LEFT, pointing right at the rail. */
    .how-step:nth-child(odd) .how-card[b-upo9jj3eqn] {
        grid-column: 1;
        grid-row: 1;
        text-align: right;
    }
    .how-step:nth-child(odd) .how-card[b-upo9jj3eqn] {
        /* Seam moves to the trailing (rail-facing) edge. */
        box-shadow: inset -3px 0 0 color-mix(in srgb, var(--step-accent) 60%, transparent);
    }
    .how-step:nth-child(odd) .how-card:hover[b-upo9jj3eqn] {
        box-shadow:
            inset -3px 0 0 color-mix(in srgb, var(--step-accent) 75%, transparent),
            0 16px 36px rgba(0, 0, 0, 0.35);
    }
    .how-step:nth-child(odd) .how-step-body[b-upo9jj3eqn] {
        margin-left: auto;
    }

    /* Even steps: card on the RIGHT. */
    .how-step:nth-child(even) .how-card[b-upo9jj3eqn] {
        grid-column: 3;
        grid-row: 1;
    }

    /* A little connector tick from each node toward its card. */
    .how-node[b-upo9jj3eqn]::after {
        content: "";
        position: absolute;
        top: 50%;
        width: clamp(1.1rem, 2.4vw, 1.8rem);
        height: 2px;
        transform: translateY(-50%);
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--step-accent) 60%, transparent),
            color-mix(in srgb, var(--step-accent) 15%, transparent));
        pointer-events: none;
    }
    .how-step:nth-child(odd) .how-node[b-upo9jj3eqn]::after {
        right: 100%;
        background: linear-gradient(270deg,
            color-mix(in srgb, var(--step-accent) 60%, transparent),
            color-mix(in srgb, var(--step-accent) 15%, transparent));
    }
    .how-step:nth-child(even) .how-node[b-upo9jj3eqn]::after {
        left: 100%;
    }

    .how-motif[b-upo9jj3eqn] {
        height: 96px;
    }
    /* Keep motif internals visually left-anchored even in right-aligned cards. */
    .how-step:nth-child(odd) .how-motif[b-upo9jj3eqn] {
        direction: ltr;
    }
}

/* Wider gutters and a touch more breathing room on large screens. */
@media (min-width: 1024px) {
    .how-step[b-upo9jj3eqn] {
        column-gap: clamp(1.8rem, 3vw, 2.8rem);
    }
    .how-card[b-upo9jj3eqn] {
        padding: clamp(1.3rem, 2vw, 1.7rem);
    }
}
/* /Components/Home/HomePlaytest.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomePlaytest — the moat (homepage design §6.6).
   "Goldfishing tells you nothing. We let you actually play."
   A pure-CSS pilot's console (--mana-r tension accent): two life totals,
   a WUBRG battlefield that develops across turns, an opening hand with
   flagged dead draws, and a real Keep / Mulligan decision.

   Mobile-first single column; copy + stage side-by-side at >=720px to
   match the hero/contrast breakpoint. No external image assets.

   Turn-progression motion is driven by the shared .home-reveal "in-view"
   class (toggled by js/home-reveal.js when the stage scrolls into view),
   so no extra JS is needed. It is gated behind
   prefers-reduced-motion: no-preference; reduced motion shows the fully
   developed end state immediately.
   ──────────────────────────────────────────────────────────────── */

.home-playtest[b-eimx34ilpf] {
    overflow: hidden;
}

/* Atmospheric ember pool behind the section — combat tension, not flat fill. */
.home-playtest[b-eimx34ilpf]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(95% 80% at 88% 12%, color-mix(in srgb, var(--mana-r) 14%, transparent) 0%, transparent 58%),
        radial-gradient(80% 80% at 6% 96%, color-mix(in srgb, var(--jade-deep) 34%, transparent) 0%, transparent 62%);
}

.home-playtest-grid[b-eimx34ilpf] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.25rem, 5vw, 3.5rem);
    align-items: center;
}

/* ── Copy column ─────────────────────────────────────────────────── */
.home-playtest-copy[b-eimx34ilpf] {
    max-width: 38rem;
}

/* ── Supporting bullets ──────────────────────────────────────────── */
.playtest-points[b-eimx34ilpf] {
    list-style: none;
    margin: 1.5rem 0 1.8rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 34em;
}
.playtest-point[b-eimx34ilpf] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font: 400 clamp(0.96rem, 1.2vw, 1.05rem)/1.5 var(--font-ui);
    color: var(--ink-2);
    text-wrap: pretty;
}
/* A small red "target" tick — these are the things playtesting catches. */
.playtest-point-mark[b-eimx34ilpf] {
    flex: none;
    margin-top: 0.34em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mana-r) 22%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--mana-r) 80%, var(--ink));
    box-shadow: 0 0 8px color-mix(in srgb, var(--mana-r) 45%, transparent);
}

/* ── Repeated primary CTA ────────────────────────────────────────── */
.home-playtest-cta[b-eimx34ilpf] {
    margin-top: 0.2rem;
}

/* Primary CTA — solid jade. home-cta-primary has no global definition;
   ::deep reaches the <button> rendered by SignInPrompt. Scoped under
   .home-playtest-cta so the style cannot leak to other sections. */
.home-playtest-cta[b-eimx34ilpf]  .home-cta-primary {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.5rem;
    border: 1px solid var(--jade);
    border-radius: 10px;
    background: var(--jade);
    color: var(--void);
    font: 600 0.98rem/1 var(--font-ui);
    letter-spacing: 0.005em;
    cursor: pointer;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--jade) 30%, transparent);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.home-playtest-cta[b-eimx34ilpf]  .home-cta-primary:hover {
    background: var(--jade-bright);
    border-color: var(--jade-bright);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--jade) 40%, transparent);
}
.home-playtest-cta[b-eimx34ilpf]  .home-cta-primary:active {
    transform: translateY(1px);
}
.home-playtest-cta[b-eimx34ilpf]  .home-cta-primary:focus-visible {
    outline: 2px solid var(--jade-bright);
    outline-offset: 3px;
}

/* ── Stage: the pilot's console ──────────────────────────────────── */
.home-playtest-stage[b-eimx34ilpf] {
    width: 100%;
}

.board[b-eimx34ilpf] {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--mana-r) 16%, var(--line));
    background:
        radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--jade-deep) 30%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, var(--surf-raised) 0%, var(--surf) 60%, var(--void) 100%);
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
    padding: clamp(0.9rem, 2.5vw, 1.25rem);
    overflow: hidden;
}
/* Subtle stage vignette so the board reads as a lit table, not a flat panel. */
.board-vignette[b-eimx34ilpf] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 38%, transparent 55%, rgba(0, 0, 0, 0.4) 100%);
}

/* ── Top bar: life totals + turn counter ─────────────────────────── */
.board-bar[b-eimx34ilpf] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}
.board-life[b-eimx34ilpf] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--void) 55%, transparent);
}
.board-life-you[b-eimx34ilpf] {
    align-items: flex-end;
    text-align: right;
    border-color: color-mix(in srgb, var(--jade) 30%, var(--line));
}
.board-life-foe[b-eimx34ilpf] {
    border-color: color-mix(in srgb, var(--mana-r) 24%, var(--line));
}
.board-life-who[b-eimx34ilpf] {
    font: 700 0.58rem/1 var(--font-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.board-life-num[b-eimx34ilpf] {
    font: 600 1.45rem/1 var(--font-disp);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.board-life-you .board-life-num[b-eimx34ilpf] { color: var(--jade-bright); }
.board-life-foe .board-life-num[b-eimx34ilpf] { color: color-mix(in srgb, var(--mana-r) 60%, var(--ink)); }

/* Numbers are rendered via ::after content so the SAME mechanism gives the
   developed end value (reduced-motion / no-JS) and the animated tick. */
.board-num-turn[b-eimx34ilpf]::after { content: "4"; }
.board-num-you[b-eimx34ilpf]::after  { content: "36"; }
.board-num-foe[b-eimx34ilpf]::after  { content: "21"; }

.board-turn[b-eimx34ilpf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
    background: color-mix(in srgb, var(--gold) 8%, var(--void));
}
.board-turn-label[b-eimx34ilpf] {
    font: 700 0.5rem/1 var(--font-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.board-turn-num[b-eimx34ilpf] {
    font: 600 1.05rem/1 var(--font-disp);
    font-variant-numeric: tabular-nums;
    color: var(--gold);
}

/* ── Battlefield: five WUBRG lanes ───────────────────────────────── */
.board-field[b-eimx34ilpf] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.45rem;
    height: clamp(86px, 22vw, 104px);
    padding: 0.55rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), color-mix(in srgb, var(--ink) 4%, transparent) calc(20% - 1px) 20%),
        color-mix(in srgb, var(--void) 60%, transparent);
    margin-bottom: 0.85rem;
}
.lane[b-eimx34ilpf] {
    position: relative;
    align-self: end;
    border-radius: 6px 6px 4px 4px;
    /* Default (reduced-motion / no-JS) END state: lanes developed. */
    height: 100%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 60%, var(--surf-raised)) 0%, color-mix(in srgb, var(--mc) 22%, var(--surf)) 100%);
    border: 1px solid color-mix(in srgb, var(--mc) 50%, var(--line));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mc) 22%, transparent);
    transform-origin: 50% 100%;
}
/* A thin "tapped/permanent" rule near the top of each lane card. */
.lane[b-eimx34ilpf]::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 5px;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--mc) 55%, transparent);
}
/* Staggered final heights so the board reads as an uneven, real battlefield. */
.lane-w[b-eimx34ilpf] { height: 64%; }
.lane-u[b-eimx34ilpf] { height: 100%; }
.lane-b[b-eimx34ilpf] { height: 46%; }
.lane-r[b-eimx34ilpf] { height: 82%; }
.lane-g[b-eimx34ilpf] { height: 92%; }

/* ── Opening hand ────────────────────────────────────────────────── */
.hand[b-eimx34ilpf] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: clamp(64px, 16vw, 78px);
    margin-bottom: 0.85rem;
}
.hand-card[b-eimx34ilpf] {
    width: clamp(30px, 8vw, 38px);
    height: clamp(46px, 12vw, 56px);
    margin-inline: -3px;
    border-radius: 5px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 40%, var(--surf-raised)) 0%, var(--surf-raised) 72%);
    border: 1px solid color-mix(in srgb, var(--mc) 42%, var(--line));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
    transform-origin: 50% 120%;
}
/* A little fanned arc so it reads as a hand, not a row. */
.hc-1[b-eimx34ilpf] { transform: rotate(-15deg) translateY(7px); }
.hc-2[b-eimx34ilpf] { transform: rotate(-10deg) translateY(3px); }
.hc-3[b-eimx34ilpf] { transform: rotate(-5deg)  translateY(1px); }
.hc-4[b-eimx34ilpf] { transform: rotate(0deg)   translateY(0); }
.hc-5[b-eimx34ilpf] { transform: rotate(5deg)   translateY(1px); }
.hc-6[b-eimx34ilpf] { transform: rotate(10deg)  translateY(3px); }
.hc-7[b-eimx34ilpf] { transform: rotate(15deg)  translateY(7px); }

/* Dead draws — desaturated and marked with a red corner flag. */
.hand-card-dead[b-eimx34ilpf] {
    filter: grayscale(0.7) brightness(0.7);
    border-color: color-mix(in srgb, var(--mana-r) 50%, var(--line));
}
.hand-card-dead[b-eimx34ilpf]::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mana-r);
    box-shadow: 0 0 7px color-mix(in srgb, var(--mana-r) 80%, transparent);
}

/* ── Decision strip: the real Keep / Mulligan moment ─────────────── */
.board-decision[b-eimx34ilpf] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.7rem;
    border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--mana-r) 22%, var(--line));
    background: color-mix(in srgb, var(--mana-r) 7%, var(--void));
}
.board-decision-prompt[b-eimx34ilpf] {
    font: 500 0.72rem/1.3 var(--font-ui);
    color: var(--ink-3);
}
.board-decision-actions[b-eimx34ilpf] {
    display: inline-flex;
    gap: 0.4rem;
    flex: none;
}
.board-btn[b-eimx34ilpf] {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.7rem;
    border-radius: 8px;
    font: 600 0.74rem/1 var(--font-ui);
    border: 1px solid var(--line);
    color: var(--ink-2);
    background: var(--surf-raised);
}
.board-btn-keep[b-eimx34ilpf] {
    color: var(--ink-3);
    border-color: var(--line);
}
/* Mulligan is the recommended call for this stumbly hand — highlight it. */
.board-btn-mull[b-eimx34ilpf] {
    color: color-mix(in srgb, var(--mana-r) 70%, var(--ink)); /* AA: raw --mana-r text fails 4.5:1 */
    border-color: color-mix(in srgb, var(--mana-r) 55%, transparent);
    background: color-mix(in srgb, var(--mana-r) 12%, var(--void));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mana-r) 22%, transparent);
}

/* ── Verdict — the payoff: anxiety → specific fix ────────────────── */
.board-verdict[b-eimx34ilpf] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.8rem;
    border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line));
    background: color-mix(in srgb, var(--gold) 7%, var(--surf));
    font: 400 0.8rem/1.45 var(--font-ui);
    color: var(--ink-2);
}
.board-verdict-mark[b-eimx34ilpf] {
    flex: none;
    margin-top: 0.18em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 60%, transparent);
}
.board-verdict-text[b-eimx34ilpf] {
    text-wrap: pretty;
}

/* ────────────────────────────────────────────────────────────────
   Turn-progression motion. Default state above is the DEVELOPED board
   (correct for reduced-motion / no-JS). When motion is allowed, we start
   the board UNDEVELOPED and let it develop once .home-reveal.in-view fires.
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

    /* Pre-reveal: collapse the board to its turn-1 state. */
    .home-playtest-stage .lane[b-eimx34ilpf] {
        transform: scaleY(0.06);
        opacity: 0.55;
    }
    .home-playtest-stage .hand-card[b-eimx34ilpf] {
        opacity: 0;
        transform: translateY(14px) rotate(0deg) scale(0.96);
    }
    .home-playtest-stage .board-verdict[b-eimx34ilpf] {
        opacity: 0;
        transform: translateY(6px);
    }

    /* On reveal: lanes grow, hand fans in, counter ticks, verdict resolves. */
    .home-playtest-stage.in-view .lane[b-eimx34ilpf] {
        animation: pt-lane-grow-b-eimx34ilpf 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .home-playtest-stage.in-view .lane-w[b-eimx34ilpf] { animation-delay: 500ms; }
    .home-playtest-stage.in-view .lane-u[b-eimx34ilpf] { animation-delay: 760ms; }
    .home-playtest-stage.in-view .lane-b[b-eimx34ilpf] { animation-delay: 620ms; }
    .home-playtest-stage.in-view .lane-r[b-eimx34ilpf] { animation-delay: 1020ms; }
    .home-playtest-stage.in-view .lane-g[b-eimx34ilpf] { animation-delay: 1180ms; }

    .home-playtest-stage.in-view .hand-card[b-eimx34ilpf] {
        animation-duration: 620ms;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        animation-fill-mode: both;
    }
    .home-playtest-stage.in-view .hc-1[b-eimx34ilpf] { animation-delay: 120ms; }
    .home-playtest-stage.in-view .hc-2[b-eimx34ilpf] { animation-delay: 180ms; }
    .home-playtest-stage.in-view .hc-3[b-eimx34ilpf] { animation-delay: 240ms; }
    .home-playtest-stage.in-view .hc-4[b-eimx34ilpf] { animation-delay: 300ms; }
    .home-playtest-stage.in-view .hc-5[b-eimx34ilpf] { animation-delay: 360ms; }
    .home-playtest-stage.in-view .hc-6[b-eimx34ilpf] { animation-delay: 420ms; }
    .home-playtest-stage.in-view .hc-7[b-eimx34ilpf] { animation-delay: 480ms; }

    /* Each hand card lands at its own fanned angle (overrides the deal end). */
    .home-playtest-stage.in-view .hc-1[b-eimx34ilpf] { animation-name: pt-deal-1-b-eimx34ilpf; }
    .home-playtest-stage.in-view .hc-2[b-eimx34ilpf] { animation-name: pt-deal-2-b-eimx34ilpf; }
    .home-playtest-stage.in-view .hc-3[b-eimx34ilpf] { animation-name: pt-deal-3-b-eimx34ilpf; }
    .home-playtest-stage.in-view .hc-4[b-eimx34ilpf] { animation-name: pt-deal-4-b-eimx34ilpf; }
    .home-playtest-stage.in-view .hc-5[b-eimx34ilpf] { animation-name: pt-deal-5-b-eimx34ilpf; }
    .home-playtest-stage.in-view .hc-6[b-eimx34ilpf] { animation-name: pt-deal-6-b-eimx34ilpf; }
    .home-playtest-stage.in-view .hc-7[b-eimx34ilpf] { animation-name: pt-deal-7-b-eimx34ilpf; }

    /* Turn counter ticks T1 → T4 as the lanes fill in. The digits live on
       ::after, so we start them at the turn-1 values and animate content. */
    .home-playtest-stage .board-num-turn[b-eimx34ilpf]::after { content: "1"; }
    .home-playtest-stage .board-num-you[b-eimx34ilpf]::after  { content: "40"; }
    .home-playtest-stage .board-num-foe[b-eimx34ilpf]::after  { content: "37"; }

    .home-playtest-stage.in-view .board-num-turn[b-eimx34ilpf]::after {
        animation: pt-turn-tick-b-eimx34ilpf 1700ms steps(1, end) 400ms both;
    }
    /* You take a couple of points as the board develops (40 → 36). */
    .home-playtest-stage.in-view .board-num-you[b-eimx34ilpf]::after {
        animation: pt-life-you-b-eimx34ilpf 1700ms steps(1, end) 400ms both;
    }
    /* Opponent drops harder under pressure (37 → 21). */
    .home-playtest-stage.in-view .board-num-foe[b-eimx34ilpf]::after {
        animation: pt-life-foe-b-eimx34ilpf 1700ms steps(1, end) 400ms both;
    }
    /* Mulligan button gets a single attention pulse as the verdict lands. */
    .home-playtest-stage.in-view .board-btn-mull[b-eimx34ilpf] {
        animation: pt-mull-pulse-b-eimx34ilpf 1400ms ease-in-out 1500ms 2;
    }
    .home-playtest-stage.in-view .board-verdict[b-eimx34ilpf] {
        animation: pt-verdict-rise-b-eimx34ilpf 700ms cubic-bezier(0.16, 1, 0.3, 1) 1700ms both;
    }

    @keyframes pt-lane-grow-b-eimx34ilpf {
        0%   { transform: scaleY(0.06); opacity: 0.55; }
        100% { transform: scaleY(1);    opacity: 1; }
    }
    @keyframes pt-deal-1-b-eimx34ilpf { 0% { opacity: 0; transform: translateY(14px) rotate(0deg) scale(0.96); } 100% { opacity: 1; transform: rotate(-15deg) translateY(7px); } }
    @keyframes pt-deal-2-b-eimx34ilpf { 0% { opacity: 0; transform: translateY(14px) rotate(0deg) scale(0.96); } 100% { opacity: 1; transform: rotate(-10deg) translateY(3px); } }
    @keyframes pt-deal-3-b-eimx34ilpf { 0% { opacity: 0; transform: translateY(14px) rotate(0deg) scale(0.96); } 100% { opacity: 1; transform: rotate(-5deg) translateY(1px); } }
    @keyframes pt-deal-4-b-eimx34ilpf { 0% { opacity: 0; transform: translateY(14px) rotate(0deg) scale(0.96); } 100% { opacity: 1; transform: rotate(0deg) translateY(0); } }
    @keyframes pt-deal-5-b-eimx34ilpf { 0% { opacity: 0; transform: translateY(14px) rotate(0deg) scale(0.96); } 100% { opacity: 1; transform: rotate(5deg) translateY(1px); } }
    @keyframes pt-deal-6-b-eimx34ilpf { 0% { opacity: 0; transform: translateY(14px) rotate(0deg) scale(0.96); } 100% { opacity: 1; transform: rotate(10deg) translateY(3px); } }
    @keyframes pt-deal-7-b-eimx34ilpf { 0% { opacity: 0; transform: translateY(14px) rotate(0deg) scale(0.96); } 100% { opacity: 1; transform: rotate(15deg) translateY(7px); } }

    @keyframes pt-turn-tick-b-eimx34ilpf {
        0%   { content: "1"; }
        25%  { content: "2"; }
        55%  { content: "3"; }
        100% { content: "4"; }
    }
    @keyframes pt-life-you-b-eimx34ilpf {
        0%   { content: "40"; }
        55%  { content: "38"; }
        100% { content: "36"; }
    }
    @keyframes pt-life-foe-b-eimx34ilpf {
        0%   { content: "37"; }
        25%  { content: "33"; }
        55%  { content: "28"; }
        100% { content: "21"; }
    }

    @keyframes pt-mull-pulse-b-eimx34ilpf {
        0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mana-r) 22%, transparent); }
        50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mana-r) 55%, transparent), 0 0 16px color-mix(in srgb, var(--mana-r) 45%, transparent); }
    }
    @keyframes pt-verdict-rise-b-eimx34ilpf {
        0%   { opacity: 0; transform: translateY(6px); }
        100% { opacity: 1; transform: translateY(0); }
    }
}

/* ── Two-column at the hero/contrast 720px breakpoint ────────────── */
@media (min-width: 720px) {
    .home-playtest-grid[b-eimx34ilpf] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
        gap: clamp(2rem, 4vw, 4rem);
    }
    .board[b-eimx34ilpf] {
        max-width: 460px;
    }
}
/* /Components/Home/HomeProductPeek.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeProductPeek — the decision room (homepage design §6.4).
   The "hard decisions" beat: three contenders stand trial for ONE
   open slot, each with a plain-language Keep / Cut / Maybe verdict.

   Gold is the deliberation accent; verdicts borrow the WUBRG palette
   (jade = keep, --mana-r = cut, --gold = maybe). All card artifacts
   are pure CSS — no external image assets.

   Mobile-first single column; the trial lays out as a row at >=720px
   to match the hero/contrast breakpoint. All motion is transform/
   opacity only and gated behind prefers-reduced-motion: no-preference.
   ──────────────────────────────────────────────────────────────── */

.home-room[b-ef2oe6ybac] {
    overflow: hidden;
}

/* A pooled gold deliberation light — a lamp over the table, not a flat fill. */
.home-room[b-ef2oe6ybac]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(80% 60% at 50% -8%, color-mix(in srgb, var(--gold) 12%, transparent) 0%, transparent 60%),
        radial-gradient(70% 80% at 90% 100%, color-mix(in srgb, var(--jade-deep) 30%, transparent) 0%, transparent 64%);
}

.home-room > .home-shell[b-ef2oe6ybac] {
    position: relative;
    z-index: 1;
}

.home-room .home-section-lede em[b-ef2oe6ybac] {
    font-style: italic;
    color: var(--gold);
}

/* ── The trial: contested slot + the three-case docket ──────────── */
.room-trial[b-ef2oe6ybac] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.4rem, 4vw, 2rem);
    margin-top: clamp(2rem, 5vw, 3rem);
}

/* The single open slot the three cards are competing to fill. */
.room-slot[b-ef2oe6ybac] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: 120px;
    aspect-ratio: 5 / 7;
    border-radius: 12px;
    background:
        radial-gradient(70% 70% at 50% 35%, color-mix(in srgb, var(--gold) 14%, transparent) 0%, transparent 70%),
        var(--void);
    isolation: isolate;
}
/* Dashed "vacant" frame — an empty seat at the table. */
.room-slot-frame[b-ef2oe6ybac] {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1.5px dashed color-mix(in srgb, var(--gold) 50%, var(--line));
    pointer-events: none;
}
.room-slot-count[b-ef2oe6ybac] {
    position: relative;
    font: 600 1.1rem/1 var(--font-disp);
    color: var(--gold);
}
.room-slot-sub[b-ef2oe6ybac] {
    position: relative;
    font: 600 0.6rem/1 var(--font-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ── The docket of three cases ──────────────────────────────────── */
.room-docket[b-ef2oe6ybac] {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(0.85rem, 2.5vw, 1.1rem);
}

.room-case[b-ef2oe6ybac] {
    min-width: 0;
}

/* Each case = the stylised card mini + its verdict + reason. */
.room-card[b-ef2oe6ybac] {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding: clamp(0.9rem, 2.4vw, 1.1rem);
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--surf);
    /* A coloured verdict seam down the leading edge. */
    box-shadow: inset 4px 0 0 var(--seam, var(--line));
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.room-card:hover[b-ef2oe6ybac] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--vc) 40%, var(--line));
}

/* Per-verdict accent vars consumed by chip, seam and art glow. */
.room-case-keep[b-ef2oe6ybac]  { --vc: var(--jade);   --seam: color-mix(in srgb, var(--jade) 55%, transparent); }
.room-case-cut[b-ef2oe6ybac]   { --vc: var(--mana-r); --seam: color-mix(in srgb, var(--mana-r) 50%, transparent); }
.room-case-maybe[b-ef2oe6ybac] { --vc: var(--gold);   --seam: color-mix(in srgb, var(--gold) 55%, transparent); }

/* ── The stylised card "mini" — pure CSS, no image assets ───────── */
.room-mini[b-ef2oe6ybac] {
    position: relative;
    flex: none;
    width: 92px;
    aspect-ratio: 5 / 7;
    border-radius: 9px;
    padding: 7px 7px 8px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, var(--surf-raised) 0%, var(--void) 92%);
    border: 1px solid color-mix(in srgb, var(--vc) 30%, var(--line));
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* Mana cost — lettered pips, top-right. No official mana symbols. */
.room-mini-cost[b-ef2oe6ybac] {
    display: flex;
    justify-content: flex-end;
    gap: 3px;
    margin-bottom: 5px;
}
.room-pip[b-ef2oe6ybac] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font: 700 8px/1 var(--font-ui);
    color: var(--void);
    background: var(--pc, var(--mana-c));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.room-pip-num[b-ef2oe6ybac] {
    color: var(--ink);
    background: color-mix(in srgb, var(--mana-c) 35%, var(--surf-raised));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mana-c) 45%, transparent);
}

/* Art window — a coloured pane standing in for card art. */
.room-mini-art[b-ef2oe6ybac] {
    flex: 1;
    border-radius: 5px;
    border: 1px solid color-mix(in srgb, var(--vc) 28%, var(--line));
    background:
        radial-gradient(120% 90% at 50% 12%, color-mix(in srgb, var(--vc) 38%, transparent) 0%, transparent 68%),
        linear-gradient(180deg, color-mix(in srgb, var(--vc) 18%, var(--void)) 0%, var(--void) 100%);
}
/* A faint horizon line inside the art so it reads as a scene, not a swatch. */
.room-mini-art[b-ef2oe6ybac]::after {
    content: "";
    display: block;
    margin: 62% 14% 0;
    height: 1px;
    background: color-mix(in srgb, var(--vc) 30%, transparent);
}

.room-mini-name[b-ef2oe6ybac] {
    margin-top: 6px;
    font: 600 8.5px/1.2 var(--font-disp);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.room-mini-type[b-ef2oe6ybac] {
    margin-top: 2px;
    font: 500 6.5px/1.2 var(--font-ui);
    letter-spacing: 0.02em;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── The verdict + plain-language reason ────────────────────────── */
.room-verdict[b-ef2oe6ybac] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-self: center;
    min-width: 0;
}

.room-chip[b-ef2oe6ybac] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: 700 0.66rem/1 var(--font-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.room-chip[b-ef2oe6ybac]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}
.room-chip-keep[b-ef2oe6ybac] {
    color: var(--jade-bright);
    background: color-mix(in srgb, var(--jade) 14%, transparent);
    border-color: color-mix(in srgb, var(--jade) 34%, transparent);
}
.room-chip-cut[b-ef2oe6ybac] {
    color: color-mix(in srgb, var(--mana-r) 80%, var(--ink));
    background: color-mix(in srgb, var(--mana-r) 13%, transparent);
    border-color: color-mix(in srgb, var(--mana-r) 32%, transparent);
}
.room-chip-maybe[b-ef2oe6ybac] {
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 13%, transparent);
    border-color: color-mix(in srgb, var(--gold) 34%, transparent);
}

.room-reason[b-ef2oe6ybac] {
    margin: 0;
    font: 400 0.9rem/1.5 var(--font-ui);
    color: var(--ink-2);
    text-wrap: pretty;
}

/* ── Reasoning vocabulary — the questions answered for every card ── */
.room-vocab[b-ef2oe6ybac] {
    margin-top: clamp(2.25rem, 5vw, 3rem);
}
.room-vocab-label[b-ef2oe6ybac] {
    margin: 0 0 0.9rem;
    font: 500 0.82rem/1.5 var(--font-ui);
    color: var(--ink-3);
}
.room-vocab-tags[b-ef2oe6ybac] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.room-tag[b-ef2oe6ybac] {
    font: 500 0.82rem/1 var(--font-ui);
    color: var(--ink-2);
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--gold) 5%, var(--surf));
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.room-tag:hover[b-ef2oe6ybac] {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--gold) 40%, var(--line));
    background: color-mix(in srgb, var(--gold) 10%, var(--surf));
}

/* ── Conviction-peak CTA ────────────────────────────────────────── */
.room-cta[b-ef2oe6ybac] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: clamp(2.25rem, 5vw, 3rem);
    padding-top: clamp(1.75rem, 4vw, 2.25rem);
    border-top: 1px solid var(--line);
}
.room-cta-line[b-ef2oe6ybac] {
    margin: 0;
    max-width: 26em;
    font: 500 clamp(1.05rem, 1.7vw, 1.3rem)/1.4 var(--font-disp);
    color: var(--ink);
    text-wrap: balance;
}

/* Primary CTA — gold conviction button. home-cta-primary has no global
   style; ::deep reaches the <button> rendered by SignInPrompt, scoped under
   .room-cta so it never leaks past this section. */
.room-cta[b-ef2oe6ybac]  .home-cta-primary {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.5rem;
    border: 1px solid var(--gold);
    border-radius: 10px;
    background: var(--gold);
    color: var(--void);
    font: 600 0.98rem/1 var(--font-ui);
    letter-spacing: 0.005em;
    cursor: pointer;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--gold) 28%, transparent);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.room-cta[b-ef2oe6ybac]  .home-cta-primary:hover {
    background: color-mix(in srgb, var(--gold) 88%, var(--ink));
    border-color: color-mix(in srgb, var(--gold) 88%, var(--ink));
    box-shadow: 0 14px 34px color-mix(in srgb, var(--gold) 38%, transparent);
}
.room-cta[b-ef2oe6ybac]  .home-cta-primary:active {
    transform: translateY(1px);
}
.room-cta[b-ef2oe6ybac]  .home-cta-primary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ── Motion: the slot count and verdict seams settle on reveal ──── */
@media (prefers-reduced-motion: no-preference) {
    .room-slot-count[b-ef2oe6ybac] {
        animation: room-slot-pulse-b-ef2oe6ybac 3.4s ease-in-out 1.2s infinite;
    }
    .room-card[b-ef2oe6ybac] {
        animation: room-card-settle-b-ef2oe6ybac 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .room-case-keep  .room-card[b-ef2oe6ybac] { animation-delay: 260ms; }
    .room-case-cut   .room-card[b-ef2oe6ybac] { animation-delay: 340ms; }
    .room-case-maybe .room-card[b-ef2oe6ybac] { animation-delay: 420ms; }

    @keyframes room-slot-pulse-b-ef2oe6ybac {
        0%, 100% { text-shadow: 0 0 0 transparent; }
        50%      { text-shadow: 0 0 14px color-mix(in srgb, var(--gold) 60%, transparent); }
    }
    @keyframes room-card-settle-b-ef2oe6ybac {
        0%   { box-shadow: inset 0 0 0 var(--seam, var(--line)); }
        100% { box-shadow: inset 4px 0 0 var(--seam, var(--line)); }
    }
}

/* ── Wider layout: trial becomes a row, cards stack art over verdict ─ */
@media (min-width: 720px) {
    .room-trial[b-ef2oe6ybac] {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: clamp(0.9rem, 2vw, 1.4rem);
    }

    /* The slot sits in the centre of the row as the shared prize. */
    .room-slot[b-ef2oe6ybac] {
        order: 2;
        align-self: center;
        flex: none;
    }

    .room-docket[b-ef2oe6ybac] {
        order: 1;
        flex: 1;
        flex-direction: row;
        align-items: stretch;
    }
    /* Split the three cases: KEEP + CUT on the left of the slot, MAYBE right.
       Simpler + robust: keep all three in one row, the slot leads. */
    .room-case[b-ef2oe6ybac] {
        flex: 1 1 0;
    }

    /* Stack art above verdict so three cards fit comfortably side by side. */
    .room-card[b-ef2oe6ybac] {
        flex-direction: column;
        height: 100%;
        gap: 0.85rem;
    }
    .room-mini[b-ef2oe6ybac] {
        width: 100%;
        max-width: 116px;
        align-self: center;
    }
    .room-verdict[b-ef2oe6ybac] {
        align-self: stretch;
        align-items: center;
        text-align: center;
        gap: 0.65rem;
    }
    .room-chip[b-ef2oe6ybac] {
        align-self: center;
    }
}

/* At desktop width, pull the slot out of the docket flow so it reads as a
   distinct, central prize between the contenders. */
@media (min-width: 920px) {
    .room-trial[b-ef2oe6ybac] {
        align-items: center;
    }
    .room-slot[b-ef2oe6ybac] {
        width: 132px;
    }
}
/* /Components/Home/HomeProof.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeProof — trust without fabricating it (homepage design §6.7).
   Four pure-CSS "exhibit" cards, each a genuine demonstration of a
   real capability, badged "Example" so nothing reads as customer data.

   Mobile-first single column; a 2-col exhibit grid at >=720px with the
   before/after curve spanning the full width (it carries the most
   visual weight). The optional social-proof block is flag-gated and
   off by default.

   All artifacts are CSS only — no external image assets. All motion is
   transform/opacity only and gated behind prefers-reduced-motion.
   ──────────────────────────────────────────────────────────────── */

.home-proof[b-uobaqtezac] {
    overflow: hidden;
}

/* A quiet jade depth-pool so the section breathes rather than sits flat. */
.home-proof[b-uobaqtezac]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(85% 70% at 88% 6%, color-mix(in srgb, var(--jade-deep) 44%, transparent) 0%, transparent 60%),
        radial-gradient(70% 60% at 4% 100%, color-mix(in srgb, var(--jade-deep) 26%, transparent) 0%, transparent 62%);
}

.home-proof > .home-shell[b-uobaqtezac] {
    position: relative;
    z-index: 1;
}

/* ── Exhibit grid ───────────────────────────────────────────────── */
.proof-grid[b-uobaqtezac] {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.9rem, 2.5vw, 1.25rem);
    margin-top: clamp(2rem, 5vw, 3rem);
}

.proof-card[b-uobaqtezac] {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    padding: clamp(1.1rem, 3vw, 1.5rem);
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, var(--surf-raised) 0%, var(--surf) 70%);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.proof-card:hover[b-uobaqtezac] {
    border-color: color-mix(in srgb, var(--jade) 32%, var(--line));
    transform: translateY(-3px);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--jade) 12%, transparent);
}
/* A faint top-edge accent rule — a hairline of jade per exhibit. */
.proof-card[b-uobaqtezac]::before {
    content: "";
    position: absolute;
    top: -1px;
    left: clamp(1.1rem, 3vw, 1.5rem);
    width: 38px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--jade), transparent);
}

/* ── Card header: kicker + "Example" badge ──────────────────────── */
.proof-card-head[b-uobaqtezac] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.proof-kicker[b-uobaqtezac] {
    font: 700 0.66rem/1.2 var(--font-ui);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--jade-bright);
}
.proof-kicker-gold[b-uobaqtezac] {
    color: var(--gold);
}
/* The honesty marker — every artifact is explicitly illustrative. */
.proof-example[b-uobaqtezac] {
    flex: none;
    font: 600 0.6rem/1 var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 0.32rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--void) 40%, transparent);
}

.proof-card-note[b-uobaqtezac] {
    margin: 1rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    font: 400 0.82rem/1.5 var(--font-ui);
    color: var(--ink-2); /* AA: --ink-3 fails 4.5:1 on the surf-raised card */
}

/* ════════════════════════════════════════════════════════════════
   1 · Sample binder insight
   ════════════════════════════════════════════════════════════════ */
.insight[b-uobaqtezac] {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: stretch;
    padding: 0.5rem 0;
}
.insight-glow[b-uobaqtezac] {
    position: absolute;
    left: 6%;
    top: 50%;
    width: 46%;
    height: 90%;
    transform: translateY(-50%);
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--gold) 26%, transparent) 0%, transparent 72%);
    filter: blur(12px);
    pointer-events: none;
}

/* The rescued mini-card — gold-edged, lifted out of the dim pile. */
.insight-card[b-uobaqtezac] {
    position: relative;
    flex: none;
    width: 72px;
    aspect-ratio: 5 / 7;
    border-radius: 9px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 30%, var(--surf-raised)) 0%, var(--surf-raised) 72%);
    border: 1px solid var(--gold);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent),
        0 8px 26px color-mix(in srgb, var(--gold) 24%, transparent);
}
.insight-card-art[b-uobaqtezac] {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 7px;
    height: 38%;
    border-radius: 4px;
    background: color-mix(in srgb, var(--mc) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--mc) 50%, transparent);
}
.insight-card-line[b-uobaqtezac] {
    position: absolute;
    left: 7px;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ink-3) 70%, transparent);
}
.insight-card-line-1[b-uobaqtezac] { top: 56%; width: 70%; }
.insight-card-line-2[b-uobaqtezac] { top: 66%; width: 50%; }

.insight-body[b-uobaqtezac] {
    position: relative;
    min-width: 0;
}
.insight-found[b-uobaqtezac] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.4rem;
    font: 600 0.7rem/1.2 var(--font-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold);
}
.insight-spark[b-uobaqtezac] {
    font-size: 0.95rem;
    line-height: 1;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 50%, transparent));
}
.insight-name[b-uobaqtezac] {
    margin: 0 0 0.35rem;
    font: 600 1.08rem/1.2 var(--font-disp);
    color: var(--ink);
}
.insight-why[b-uobaqtezac] {
    margin: 0;
    font: 400 0.86rem/1.5 var(--font-ui);
    color: var(--ink-2);
    text-wrap: pretty;
}

/* ════════════════════════════════════════════════════════════════
   2 · Example cut decision — Keep / Cut / Maybe
   ════════════════════════════════════════════════════════════════ */
.cut-list[b-uobaqtezac] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}
.cut-row[b-uobaqtezac] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.4rem 0.75rem;
    padding: 0.65rem 0.8rem;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: var(--void);
    /* A coloured seam down the left edge encodes the verdict. */
    box-shadow: inset 3px 0 0 var(--seam, var(--line));
}
.cut-verdict[b-uobaqtezac] {
    grid-row: 1;
    font: 700 0.62rem/1 var(--font-ui);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--seam);
    background: color-mix(in srgb, var(--seam) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--seam) 34%, transparent);
}
.cut-card[b-uobaqtezac] {
    grid-row: 1;
    align-self: center;
    font: 600 0.92rem/1.2 var(--font-disp);
    color: var(--ink);
}
.cut-reason[b-uobaqtezac] {
    grid-column: 1 / -1;
    grid-row: 2;
    font: 400 0.82rem/1.45 var(--font-ui);
    color: var(--ink-2);
}
.cut-reason em[b-uobaqtezac] {
    font-style: italic;
    color: var(--jade-bright);
}
.cut-row-keep[b-uobaqtezac]  { --seam: var(--jade-bright); }
.cut-row-cut[b-uobaqtezac]   { --seam: var(--mana-r); }
.cut-row-maybe[b-uobaqtezac] { --seam: var(--gold); }

/* ════════════════════════════════════════════════════════════════
   3 · Before & after curve
   ════════════════════════════════════════════════════════════════ */
.curve-pair[b-uobaqtezac] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    align-items: stretch;
    flex: 1;
}

.curve[b-uobaqtezac] {
    margin: 0;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    padding: 0.9rem 0.9rem 0.7rem;
    border: 1px solid var(--line);
    background: var(--void);
}
.curve-cap[b-uobaqtezac] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}
.curve-cap-tag[b-uobaqtezac] {
    font: 700 0.62rem/1 var(--font-ui);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
}
.curve-cap-before[b-uobaqtezac] {
    color: color-mix(in srgb, var(--mana-r) 78%, var(--ink));
    background: color-mix(in srgb, var(--mana-r) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mana-r) 30%, transparent);
}
.curve-cap-after[b-uobaqtezac] {
    color: var(--jade-bright);
    background: color-mix(in srgb, var(--jade) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--jade) 32%, transparent);
}
.curve-cap-note[b-uobaqtezac] {
    font: 400 0.78rem/1.3 var(--font-ui);
    color: var(--ink-3);
}
.curve-before[b-uobaqtezac] { border-color: color-mix(in srgb, var(--mana-r) 20%, var(--line)); }
.curve-after[b-uobaqtezac]  { border-color: color-mix(in srgb, var(--jade) 24%, var(--line)); }

/* The little bar chart. Bars grow from a shared baseline. */
.curve-bars[b-uobaqtezac] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.45rem;
    height: 92px;
    padding-top: 0.4rem;
    border-bottom: 1px solid var(--line);
}
.curve-bar[b-uobaqtezac] {
    position: relative;
    flex: 1;
    height: var(--h);
    min-width: 0;
    border-radius: 4px 4px 0 0;
    transform-origin: 50% 100%;
}
/* The "mana number" label under each bar. */
.curve-bar b[b-uobaqtezac] {
    position: absolute;
    left: 50%;
    bottom: -1.35rem;
    transform: translateX(-50%);
    font: 600 0.66rem/1 var(--font-ui);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}
.curve-before .curve-bar[b-uobaqtezac] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mana-r) 60%, var(--surf-raised)) 0%, color-mix(in srgb, var(--mana-r) 24%, var(--surf-raised)) 100%);
    border: 1px solid color-mix(in srgb, var(--mana-r) 38%, transparent);
    border-bottom: none;
}
.curve-before .curve-bar-spike[b-uobaqtezac] {
    background: linear-gradient(180deg, var(--mana-r) 0%, color-mix(in srgb, var(--mana-r) 45%, var(--surf-raised)) 100%);
    box-shadow: 0 0 14px color-mix(in srgb, var(--mana-r) 35%, transparent);
}
.curve-after .curve-bar[b-uobaqtezac] {
    background: linear-gradient(180deg, var(--jade-bright) 0%, color-mix(in srgb, var(--jade) 55%, var(--jade-deep)) 100%);
    border: 1px solid color-mix(in srgb, var(--jade) 50%, transparent);
    border-bottom: none;
}
/* Spare room under the bars for the numeric labels. */
.curve-bars[b-uobaqtezac] { margin-bottom: 1.5rem; }

/* The transition marker between the two charts. */
.curve-arrow[b-uobaqtezac] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.1rem 0;
    color: var(--ink-3);
}
.curve-arrow-label[b-uobaqtezac] {
    font: 600 0.66rem/1 var(--font-disp);
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--jade);
}
.curve-arrow-glyph[b-uobaqtezac] {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--jade);
    transform: rotate(90deg);
}

/* ════════════════════════════════════════════════════════════════
   4 · One collection, three deck directions
   ════════════════════════════════════════════════════════════════ */
.directions-from[b-uobaqtezac] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.85rem;
    font: 600 0.72rem/1.2 var(--font-ui);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
}
/* A tiny binder-spine glyph as the shared origin. */
.directions-binder[b-uobaqtezac] {
    flex: none;
    width: 16px;
    height: 20px;
    border-radius: 3px;
    background: linear-gradient(150deg, var(--jade) 0%, var(--jade-deep) 90%);
    border: 1px solid var(--jade-bright);
    box-shadow: inset -3px 0 0 color-mix(in srgb, var(--void) 45%, transparent);
}

.directions-list[b-uobaqtezac] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.direction[b-uobaqtezac] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: var(--void);
    /* A left arm in the direction's colour — the binder "pointing" this way. */
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mc) 60%, transparent);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.direction:hover[b-uobaqtezac] {
    border-color: color-mix(in srgb, var(--mc) 40%, var(--line));
    transform: translateX(2px);
}
.direction-pip[b-uobaqtezac] {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mc);
    box-shadow: 0 0 9px color-mix(in srgb, var(--mc) 60%, transparent);
}
.direction-text[b-uobaqtezac] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}
.direction-name[b-uobaqtezac] {
    font: 600 0.95rem/1.2 var(--font-disp);
    color: var(--ink);
}
.direction-vibe[b-uobaqtezac] {
    font: 400 0.78rem/1.3 var(--font-ui);
    color: var(--ink-2);
}

/* ════════════════════════════════════════════════════════════════
   Social proof — flag-gated, off by default. Styles ship so that when
   REAL data is provided the block renders cleanly; nothing fabricated
   is shown while ShowSocialProof is false.
   ════════════════════════════════════════════════════════════════ */
.proof-social[b-uobaqtezac] {
    margin-top: clamp(2rem, 4vw, 2.75rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--line);
}
.proof-stats[b-uobaqtezac] {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 5vw, 3rem);
}
.proof-stat[b-uobaqtezac] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.proof-stat-num[b-uobaqtezac] {
    font: 600 clamp(1.8rem, 4vw, 2.6rem)/1 var(--font-disp);
    font-variant-numeric: tabular-nums;
    color: var(--jade-bright);
}
.proof-stat-label[b-uobaqtezac] {
    font: 400 0.85rem/1.4 var(--font-ui);
    color: var(--ink-2);
    max-width: 16em;
}
.proof-quote[b-uobaqtezac] {
    margin: 0;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surf);
    border-left: 3px solid var(--jade);
}
.proof-quote blockquote[b-uobaqtezac] {
    margin: 0 0 0.6rem;
    font: 400 1.02rem/1.5 var(--font-disp);
    font-style: italic;
    color: var(--ink);
}
.proof-quote figcaption[b-uobaqtezac] {
    font: 600 0.8rem/1.3 var(--font-ui);
    color: var(--ink-3);
}

/* ── Motion: bars rise, the rescued card lifts, on first reveal ──── */
@media (prefers-reduced-motion: no-preference) {
    .proof-card .curve-bar[b-uobaqtezac] {
        animation: proof-bar-rise-b-uobaqtezac 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .curve-before .curve-bar:nth-child(1)[b-uobaqtezac] { animation-delay: 120ms; }
    .curve-before .curve-bar:nth-child(2)[b-uobaqtezac] { animation-delay: 180ms; }
    .curve-before .curve-bar:nth-child(3)[b-uobaqtezac] { animation-delay: 240ms; }
    .curve-before .curve-bar:nth-child(4)[b-uobaqtezac] { animation-delay: 300ms; }
    .curve-before .curve-bar:nth-child(5)[b-uobaqtezac] { animation-delay: 360ms; }
    .curve-before .curve-bar:nth-child(6)[b-uobaqtezac] { animation-delay: 420ms; }
    .curve-after  .curve-bar:nth-child(1)[b-uobaqtezac] { animation-delay: 460ms; }
    .curve-after  .curve-bar:nth-child(2)[b-uobaqtezac] { animation-delay: 520ms; }
    .curve-after  .curve-bar:nth-child(3)[b-uobaqtezac] { animation-delay: 580ms; }
    .curve-after  .curve-bar:nth-child(4)[b-uobaqtezac] { animation-delay: 640ms; }
    .curve-after  .curve-bar:nth-child(5)[b-uobaqtezac] { animation-delay: 700ms; }
    .curve-after  .curve-bar:nth-child(6)[b-uobaqtezac] { animation-delay: 760ms; }

    .insight-card[b-uobaqtezac] {
        animation: proof-gem-lift-b-uobaqtezac 1300ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
    }
    .insight-spark[b-uobaqtezac] {
        animation: proof-spark-pulse-b-uobaqtezac 3.2s ease-in-out 1.6s infinite;
    }

    @keyframes proof-bar-rise-b-uobaqtezac {
        0%   { transform: scaleY(0.04); opacity: 0; }
        100% { transform: scaleY(1); opacity: 1; }
    }
    @keyframes proof-gem-lift-b-uobaqtezac {
        0%   { transform: translateY(10px) rotate(-3deg) scale(0.96); filter: brightness(0.7); }
        60%  { transform: translateY(-4px) rotate(1deg) scale(1.03); filter: brightness(1.08); }
        100% { transform: translateY(0) rotate(0) scale(1); filter: brightness(1); }
    }
    @keyframes proof-spark-pulse-b-uobaqtezac {
        0%, 100% { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 50%, transparent)); }
        50%      { filter: drop-shadow(0 0 11px color-mix(in srgb, var(--gold) 78%, transparent)); }
    }
}

/* ── Two-column exhibit grid at the hero's 720px breakpoint ──────── */
@media (min-width: 720px) {
    .proof-grid[b-uobaqtezac] {
        grid-template-columns: 1fr 1fr;
    }
    /* The before/after curve carries the most weight — span both columns. */
    .proof-card-curve[b-uobaqtezac] {
        grid-column: 1 / -1;
        order: 3;
    }
    .proof-card-insight[b-uobaqtezac]   { order: 1; }
    .proof-card-cut[b-uobaqtezac]       { order: 2; }
    .proof-card-directions[b-uobaqtezac]{ order: 4; }

    /* Side-by-side charts with the arrow between them. */
    .curve-pair[b-uobaqtezac] {
        grid-template-columns: 1fr auto 1fr;
        gap: 0.6rem;
        align-items: center;
    }
    .curve-arrow[b-uobaqtezac] {
        flex-direction: column;
    }
    .curve-arrow-glyph[b-uobaqtezac] {
        transform: none;
    }

    .proof-social[b-uobaqtezac] {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}
/* /Components/Home/HomeSignedIn.razor.rz.scp.css */
/* HomeSignedIn — the cockpit greeting. The .home-si container and the shared
   .si-module / .si-eyebrow / .si-title classes live in wwwroot/css/home.css
   (modules are separate components, so those classes must be global). Each
   cockpit module ships its own scoped CSS. */

.home-greet[b-1i7oinz5u9] {
    padding: clamp(0.5rem, 2vw, 1.25rem) 0 0.25rem;
}

.home-greet .stage-eyebrow[b-1i7oinz5u9] {
    color: var(--deck-accent, var(--gold));
    margin: 0 0 10px;
}

.home-si-h1[b-1i7oinz5u9] {
    font-family: var(--font-disp);
    font-weight: 600;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.12;
    margin: 0 0 8px;
    color: var(--ink);
}

.home-si-sub[b-1i7oinz5u9] {
    color: var(--ink-2);
    font: 400 clamp(0.95rem, 1.3vw, 1.08rem)/1.55 var(--font-ui);
    margin: 0;
    max-width: 34em;
}
/* /Components/Home/HomeSignedOut.razor.rz.scp.css */
/* HomeSignedOut now only composes section components (HomeHero, HomeContrast, …)
   and owns no markup of its own. Shared landing scaffolding lives in
   wwwroot/css/home.css; each section ships its own scoped *.razor.css. */
/* /Components/Home/SignedIn/HomeActivationPath.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeActivationPath — the signed-in cockpit's activation track
   (signed-in-design.md §6.3). Five player-native stations on one rail:
   Binder · Seed · First 99 · Hard cuts · Game night.

   The Stage marks one station "current" (lit with --deck-accent); earlier
   stations read as complete (filled rail + checked node), later stations
   sit muted. Mobile-first: a compact vertical rail. At >=720px the rail
   turns horizontal and the labels drop beneath their nodes.

   At Established the component renders a quiet one-line momentum strip
   (+ optional milestone) instead — styled at the foot of this file.

   Steps convey state by label, icon and a check — not colour alone.
   All motion is transform/opacity only and reduced-motion safe.
   ──────────────────────────────────────────────────────────────── */

.sip[b-fmo9kzd74o] {
    /* The track reads from --deck-accent (themed per-deck on the wrapper),
       falling back to jade. A single var keeps "current"/"done" cohesive. */
    --sip-accent: var(--deck-accent, var(--jade));
}

/* ════════════════════════════════════════════════════════════════
   The track — mobile-first vertical rail.
   ════════════════════════════════════════════════════════════════ */
.sip-track[b-fmo9kzd74o] {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
}

.sip-step[b-fmo9kzd74o] {
    position: relative;
    display: grid;
    grid-template-columns: 1.85rem 1fr;
    column-gap: 0.85rem;
    align-items: center;
    min-height: 2.5rem;
    padding-block: 0.2rem;
}

/* ── Rail segments: a "lead" above each node and a "trail" below it.
   Together, consecutive segments form one continuous vertical line.
   A segment reads as "travelled" (accent) when the path has passed it. */
.sip-rail[b-fmo9kzd74o] {
    position: absolute;
    left: calc(0.925rem - 1px); /* centre of the 1.85rem node column */
    width: 2px;
    background: var(--line);
    pointer-events: none;
}
.sip-rail--lead[b-fmo9kzd74o] {
    top: 0;
    height: 50%;
}
.sip-rail--trail[b-fmo9kzd74o] {
    bottom: 0;
    height: 50%;
}
/* Terminate the rail cleanly at the ends of the track. */
.sip-step:first-child .sip-rail--lead[b-fmo9kzd74o] { display: none; }
.sip-step:last-child  .sip-rail--trail[b-fmo9kzd74o] { display: none; }

/* Completed and current stations have travelled rail leading IN to them. */
.sip-step--done .sip-rail--lead[b-fmo9kzd74o],
.sip-step--current .sip-rail--lead[b-fmo9kzd74o] {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--sip-accent) 60%, transparent),
        color-mix(in srgb, var(--sip-accent) 70%, transparent));
}
/* Completed stations also have travelled rail leading OUT (to the next). */
.sip-step--done .sip-rail--trail[b-fmo9kzd74o] {
    background: color-mix(in srgb, var(--sip-accent) 60%, transparent);
}

/* ── Station node ────────────────────────────────────────────────── */
.sip-node[b-fmo9kzd74o] {
    position: relative;
    z-index: 1;
    grid-column: 1;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surf);
    border: 1px solid var(--line);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Completed — filled, checked. */
.sip-step--done .sip-node[b-fmo9kzd74o] {
    background: color-mix(in srgb, var(--sip-accent) 22%, var(--surf));
    border-color: color-mix(in srgb, var(--sip-accent) 55%, var(--line));
}
/* Current — lit, with a soft accent ring. */
.sip-step--current .sip-node[b-fmo9kzd74o] {
    background:
        radial-gradient(120% 120% at 50% 20%, color-mix(in srgb, var(--sip-accent) 30%, var(--surf-raised)) 0%, var(--surf-raised) 75%);
    border-color: var(--sip-accent);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--sip-accent) 14%, transparent),
        0 4px 14px color-mix(in srgb, var(--sip-accent) 24%, transparent);
}
/* Future — muted. */
.sip-step--future .sip-node[b-fmo9kzd74o] {
    background: var(--surf);
    border-color: var(--line);
}

/* ── Check mark (shown only when complete) ──────────────────────── */
.sip-check[b-fmo9kzd74o] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 700 0.82rem/1 var(--font-ui);
    color: color-mix(in srgb, var(--sip-accent) 60%, var(--ink));
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sip-step--done .sip-check[b-fmo9kzd74o] {
    opacity: 1;
    transform: scale(1);
}
/* When checked, hide the glyph so the node reads cleanly as "done". */
.sip-step--done .sip-glyph[b-fmo9kzd74o] {
    opacity: 0;
}

/* ════════════════════════════════════════════════════════════════
   Glyphs — tiny pure-CSS motifs, one per station. Decorative; the
   label carries the meaning. Sized to sit inside the 1.85rem node.
   Colour follows state: muted by default, accented when current.
   ════════════════════════════════════════════════════════════════ */
.sip-glyph[b-fmo9kzd74o] {
    position: relative;
    width: 0.95rem;
    height: 0.95rem;
    color: var(--ink-3);
    transition: color 0.2s ease, opacity 0.2s ease;
}
.sip-step--current .sip-glyph[b-fmo9kzd74o] {
    color: color-mix(in srgb, var(--sip-accent) 55%, var(--ink));
}

/* 1 · Binder — a small stacked-cards / folder mark. */
.sip-glyph--binder[b-fmo9kzd74o] {
    border: 1.5px solid currentColor;
    border-radius: 2px;
    width: 0.78rem;
    height: 0.95rem;
}
.sip-glyph--binder[b-fmo9kzd74o]::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 3px;
    height: 1.5px;
    background: currentColor;
    box-shadow: 0 3px 0 currentColor;
    opacity: 0.7;
}

/* 2 · Seed — a sprout: a dot with a rising shoot. */
.sip-glyph--seed[b-fmo9kzd74o]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1.5px;
    height: 0.6rem;
    transform: translateX(-50%);
    background: currentColor;
}
.sip-glyph--seed[b-fmo9kzd74o]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0.05rem;
    width: 0.42rem;
    height: 0.42rem;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 60% 0 60% 0;
    background: currentColor;
}

/* 3 · First 99 — a small grid (the 99 taking shape). */
.sip-glyph--first99[b-fmo9kzd74o] {
    width: 0.85rem;
    height: 0.85rem;
    background-image:
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0);
    background-repeat: no-repeat;
    background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 100%;
    background-position: 0 33%, 33% 0, 0 67%, 67% 0;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

/* 4 · Hard cuts — scissors-ish: an X of two strokes (a cut). */
.sip-glyph--hardcuts[b-fmo9kzd74o]::before,
.sip-glyph--hardcuts[b-fmo9kzd74o]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.9rem;
    height: 1.6px;
    background: currentColor;
    border-radius: 1px;
}
.sip-glyph--hardcuts[b-fmo9kzd74o]::before { transform: translate(-50%, -50%) rotate(45deg); }
.sip-glyph--hardcuts[b-fmo9kzd74o]::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* 5 · Game night — a die face (three pips on the diagonal). */
.sip-glyph--gamenight[b-fmo9kzd74o] {
    width: 0.9rem;
    height: 0.9rem;
    border: 1.5px solid currentColor;
    border-radius: 3px;
}
.sip-glyph--gamenight[b-fmo9kzd74o]::before,
.sip-glyph--gamenight[b-fmo9kzd74o]::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: currentColor;
}
.sip-glyph--gamenight[b-fmo9kzd74o]::before { left: 2px;  top: 2px; }
.sip-glyph--gamenight[b-fmo9kzd74o]::after {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        0.18rem 0.18rem 0 0 currentColor,
        -0.18rem -0.18rem 0 0 currentColor;
}

/* ── Label ───────────────────────────────────────────────────────── */
.sip-label[b-fmo9kzd74o] {
    grid-column: 2;
    font: 600 0.92rem/1.2 var(--font-ui);
    letter-spacing: 0.005em;
    color: var(--ink-3);
    transition: color 0.2s ease;
}
.sip-step--done .sip-label[b-fmo9kzd74o] {
    color: var(--ink-2);
}
.sip-step--current .sip-label[b-fmo9kzd74o] {
    color: var(--ink);
    font-weight: 700;
}

/* Visually-hidden status text for screen readers. */
.sr-only[b-fmo9kzd74o] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Current-node pulse (settles, doesn't loop forever harshly) ──── */
@media (prefers-reduced-motion: no-preference) {
    .sip-step--current .sip-node[b-fmo9kzd74o] {
        animation: sip-pulse-b-fmo9kzd74o 3.6s ease-in-out 0.8s infinite;
    }
    @keyframes sip-pulse-b-fmo9kzd74o {
        0%, 100% {
            box-shadow:
                0 0 0 4px color-mix(in srgb, var(--sip-accent) 14%, transparent),
                0 4px 14px color-mix(in srgb, var(--sip-accent) 24%, transparent);
        }
        50% {
            box-shadow:
                0 0 0 6px color-mix(in srgb, var(--sip-accent) 8%, transparent),
                0 4px 18px color-mix(in srgb, var(--sip-accent) 34%, transparent);
        }
    }
}

/* ════════════════════════════════════════════════════════════════
   Horizontal track at >=720px — nodes in a row on one rail, labels
   beneath. The rail becomes horizontal; lead/trail flank each node.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 720px) {
    .sip-track[b-fmo9kzd74o] {
        display: flex;
        margin-top: 0.6rem;
    }
    .sip-step[b-fmo9kzd74o] {
        flex: 1 1 0;
        grid-template-columns: none;
        grid-template-rows: 1.85rem auto;
        justify-items: center;
        row-gap: 0.55rem;
        min-height: 0;
        padding-block: 0;
    }

    /* Rail runs across the node's vertical centre (top row, 0.925rem down). */
    .sip-rail[b-fmo9kzd74o] {
        left: auto;
        top: calc(0.925rem - 1px);
        width: 50%;
        height: 2px;
    }
    .sip-rail--lead[b-fmo9kzd74o]  { left: 0;  right: auto; }
    .sip-rail--trail[b-fmo9kzd74o] { right: 0; left: auto; bottom: auto; height: 2px; }
    .sip-step:first-child .sip-rail--lead[b-fmo9kzd74o] { display: none; }
    .sip-step:last-child  .sip-rail--trail[b-fmo9kzd74o] { display: none; }

    .sip-step--done .sip-rail--lead[b-fmo9kzd74o],
    .sip-step--current .sip-rail--lead[b-fmo9kzd74o] {
        background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--sip-accent) 70%, transparent),
            color-mix(in srgb, var(--sip-accent) 60%, transparent));
    }
    .sip-step--done .sip-rail--trail[b-fmo9kzd74o] {
        background: color-mix(in srgb, var(--sip-accent) 60%, transparent);
    }

    .sip-node[b-fmo9kzd74o] { grid-column: auto; grid-row: 1; }

    .sip-label[b-fmo9kzd74o] {
        grid-column: auto;
        grid-row: 2;
        text-align: center;
        max-width: 7rem;
        text-wrap: balance;
    }
}

/* ════════════════════════════════════════════════════════════════
   Established (S5) — condensed momentum strip + optional milestone.
   ════════════════════════════════════════════════════════════════ */
.sip-momentum[b-fmo9kzd74o] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.65rem;
    margin: 0.1rem 0 0;
    font: 400 0.95rem/1.4 var(--font-ui);
    color: var(--ink-2);
}
.sip-momentum-num[b-fmo9kzd74o] {
    font-family: var(--font-disp);
    font-weight: 600;
    font-size: 1.12em;
    color: var(--ink);
}
.sip-momentum-sep[b-fmo9kzd74o] {
    color: var(--ink-3);
}

.sip-milestone[b-fmo9kzd74o] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--gold) 7%, var(--surf));
    font: 400 0.9rem/1.5 var(--font-ui);
    color: var(--ink-2);
}
.sip-milestone-mark[b-fmo9kzd74o] {
    flex: none;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--gold);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 45%, transparent));
}
.sip-milestone-earned[b-fmo9kzd74o] {
    color: var(--ink);
    font-weight: 600;
}
.sip-milestone-soft[b-fmo9kzd74o] {
    color: var(--ink-3);
}

@media (prefers-reduced-motion: no-preference) {
    .sip-milestone-mark[b-fmo9kzd74o] {
        animation: sip-spark-b-fmo9kzd74o 3.4s ease-in-out 1.2s infinite;
    }
    @keyframes sip-spark-b-fmo9kzd74o {
        0%, 100% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 45%, transparent)); }
        50%      { filter: drop-shadow(0 0 11px color-mix(in srgb, var(--gold) 75%, transparent)); }
    }
}
/* /Components/Home/SignedIn/HomeCollectionMomentum.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeCollectionMomentum — signed-in-design.md §6.7 (momentum half).
   A quiet "living ledger": the binder state read back as a stat-pair
   over a faint jade shelf, with a collection-first nudge. Jade is the
   functional accent here (the collection is the owned foundation).
   Mobile-first; all interactive targets clear 44px; motion is
   transform/opacity only and gated behind prefers-reduced-motion.
   ──────────────────────────────────────────────────────────────── */

.cm[b-x36vlqo9s6] {
    position: relative;
    overflow: hidden;
}

/* Faint jade pool in the corner — depth under the numbers, not a fill. */
.cm[b-x36vlqo9s6]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        90% 80% at 100% 0%,
        color-mix(in srgb, var(--jade) 9%, transparent) 0%,
        transparent 60%
    );
    z-index: 0;
}

.cm > *[b-x36vlqo9s6] {
    position: relative;
    z-index: 1;
}

.cm .si-title[b-x36vlqo9s6] {
    margin-bottom: clamp(0.85rem, 2vw, 1.1rem);
}

/* ── Stat-pair: the binder readout ───────────────────────────────── */
.cm-stats[b-x36vlqo9s6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0 0 0.95rem;
    padding: clamp(0.85rem, 2.4vw, 1.1rem) clamp(0.9rem, 2.6vw, 1.2rem);
    border: 1px solid color-mix(in srgb, var(--jade) 24%, var(--line));
    border-radius: 12px;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--jade) 7%, var(--surf)) 0%,
            var(--surf) 100%
        );
}

.cm-stat[b-x36vlqo9s6] {
    margin: 0;
    min-width: 0;
}

/* Hairline divider between the two stats. */
.cm-stat + .cm-stat[b-x36vlqo9s6] {
    padding-left: clamp(0.9rem, 2.6vw, 1.2rem);
    border-left: 1px solid color-mix(in srgb, var(--jade) 18%, var(--line));
}

.cm-stat-label[b-x36vlqo9s6] {
    font: 700 0.62rem/1.2 var(--font-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 0.3rem;
}

.cm-stat-value[b-x36vlqo9s6] {
    font-family: var(--font-disp);
    font-weight: 600;
    font-size: clamp(1.7rem, 6vw, 2.35rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--jade-bright);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Provenance line — quiet, dimmer than the body ───────────────── */
.cm-prov[b-x36vlqo9s6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.15rem;
    /* --ink-2, not --ink-3: AA at this small size on the raised surface. */
    color: var(--ink-2);
    font: 400 0.86rem/1.5 var(--font-ui);
}
.cm-prov strong[b-x36vlqo9s6] {
    color: var(--ink);
    font-weight: 600;
}
.cm-prov-dot[b-x36vlqo9s6] {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--jade);
    box-shadow: 0 0 8px color-mix(in srgb, var(--jade) 55%, transparent);
}

/* ── Collection-first nudge (present state) ──────────────────────── */
.cm-nudge[b-x36vlqo9s6] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--jade) 30%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--jade) 6%, transparent);
    color: var(--ink);
    text-decoration: none;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}
.cm-nudge-text[b-x36vlqo9s6] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
    font: 600 0.98rem/1.2 var(--font-ui);
}
.cm-nudge-sub[b-x36vlqo9s6] {
    font: 400 0.82rem/1.4 var(--font-ui);
    color: var(--ink-2);
    text-wrap: pretty;
}
.cm-nudge-arrow[b-x36vlqo9s6] {
    flex: none;
    color: var(--jade-bright);
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.cm-nudge:hover[b-x36vlqo9s6] {
    background: color-mix(in srgb, var(--jade) 12%, transparent);
    border-color: color-mix(in srgb, var(--jade) 50%, transparent);
}
.cm-nudge:hover .cm-nudge-arrow[b-x36vlqo9s6] {
    transform: translateX(3px);
}
.cm-nudge:active[b-x36vlqo9s6] {
    transform: translateY(1px);
}
.cm-nudge:focus-visible[b-x36vlqo9s6] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 3px;
}

/* ── Empty state — the invitation ────────────────────────────────── */
.cm-empty-lede[b-x36vlqo9s6] {
    color: var(--ink-2);
    font: 400 0.95rem/1.55 var(--font-ui);
    margin: 0 0 1.1rem;
    max-width: 34em;
    text-wrap: pretty;
}

.cm-connect[b-x36vlqo9s6] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 48px;
    padding: 0.8rem 1rem;
    border: 1px dashed color-mix(in srgb, var(--jade) 42%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--jade) 8%, var(--surf));
    color: var(--ink);
    text-decoration: none;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}
.cm-connect-mark[b-x36vlqo9s6] {
    flex: none;
    color: var(--gold);
    font-size: 1.05rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 45%, transparent));
}
.cm-connect-text[b-x36vlqo9s6] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
    font: 600 0.98rem/1.2 var(--font-ui);
}
.cm-connect-sub[b-x36vlqo9s6] {
    font: 400 0.82rem/1.4 var(--font-ui);
    color: var(--ink-2);
    letter-spacing: 0.01em;
}

.cm-connect:hover[b-x36vlqo9s6] {
    background: color-mix(in srgb, var(--jade) 14%, var(--surf));
    border-color: var(--jade);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--jade) 18%, transparent);
}
.cm-connect:hover .cm-nudge-arrow[b-x36vlqo9s6] {
    transform: translateX(3px);
}
.cm-connect:active[b-x36vlqo9s6] {
    transform: translateY(1px);
}
.cm-connect:focus-visible[b-x36vlqo9s6] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 3px;
}

/* ── Reduced motion: hold transforms, keep the focus ring crisp ──── */
@media (prefers-reduced-motion: reduce) {
    .cm-nudge[b-x36vlqo9s6],
    .cm-nudge-arrow[b-x36vlqo9s6],
    .cm-connect[b-x36vlqo9s6] {
        transition: none;
    }
    .cm-nudge:hover .cm-nudge-arrow[b-x36vlqo9s6],
    .cm-connect:hover .cm-nudge-arrow[b-x36vlqo9s6],
    .cm-nudge:active[b-x36vlqo9s6],
    .cm-connect:active[b-x36vlqo9s6] {
        transform: none;
    }
}

/* ── Roomier stat numerals once there's width ────────────────────── */
@media (min-width: 560px) {
    .cm-stat-value[b-x36vlqo9s6] {
        font-size: clamp(2rem, 3.4vw, 2.5rem);
    }
}
/* /Components/Home/SignedIn/HomeDeckHealth.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeDeckHealth — signed-in cockpit "vitals panel" (signed-in-design.md §6.5).
   Each deck is a row: name + a triad of status chips (Built / Legal / Tested),
   a thin binder-fill meter, and an optional Familiar nudge for the most-urgent
   failing check. State always reads from icon + label — never colour alone —
   so the panel works for colour-blind and high-contrast users. Mobile-first;
   all motion is opacity/transform only and gated behind prefers-reduced-motion.
   ──────────────────────────────────────────────────────────────── */

.sidh-list[b-gcja818e70] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* One deck's vitals card. A hairline left rail in jade gives the panel a
   clinical "chart" feel without inventing a new colour. */
.sidh-row[b-gcja818e70] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 0.95rem 0.85rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--surf) 60%, transparent);
}
.sidh-row[b-gcja818e70]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65rem;
    bottom: 0.65rem;
    width: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--jade) 55%, transparent);
}

.sidh-name[b-gcja818e70] {
    margin: 0;
    font: 600 0.96rem/1.25 var(--font-ui);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── The three status chips ──────────────────────────────────────── */
.sidh-checks[b-gcja818e70] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.45rem;
}

.sidh-chip[b-gcja818e70] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 30px;
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surf-raised) 70%, transparent);
    font: 600 0.78rem/1 var(--font-ui);
    text-decoration: none;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

/* The status icon sits in a small disc so it carries the state at a glance,
   while the label carries it in text for anyone who can't use colour. */
.sidh-ico[b-gcja818e70] {
    display: inline-grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    flex: none;
}
.sidh-chip-label[b-gcja818e70] {
    color: var(--ink-2);
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidh-chip-cta[b-gcja818e70] {
    color: var(--ink);
    padding-left: 0.45rem;
    margin-left: 0.05rem;
    border-left: 1px solid var(--line);
    font-weight: 700;
}

/* Pass — jade. */
.sidh-chip--ok[b-gcja818e70] {
    border-color: color-mix(in srgb, var(--jade) 38%, var(--line));
    background: color-mix(in srgb, var(--jade) 10%, transparent);
}
.sidh-chip--ok .sidh-ico[b-gcja818e70] {
    background: color-mix(in srgb, var(--jade) 22%, transparent);
    color: var(--jade-bright);
}
.sidh-chip--ok .sidh-chip-label[b-gcja818e70] {
    color: var(--jade-bright);
    font-weight: 600;
}

/* Hard fail — needs a fix. Red mark, but the word "Not built" / "Fix the list"
   is what actually conveys the failure. Chips are links. */
.sidh-chip--fix[b-gcja818e70] {
    border-color: color-mix(in srgb, var(--mana-r) 42%, var(--line));
    background: color-mix(in srgb, var(--mana-r) 10%, transparent);
}
.sidh-chip--fix .sidh-ico[b-gcja818e70] {
    background: color-mix(in srgb, var(--mana-r) 26%, transparent);
    color: color-mix(in srgb, var(--mana-r) 55%, #ffffff); /* lifted red tint — AA on the chip ground */
}
.sidh-chip--fix .sidh-chip-cta[b-gcja818e70] {
    color: color-mix(in srgb, var(--mana-r) 45%, #ffffff);
    border-left-color: color-mix(in srgb, var(--mana-r) 40%, transparent);
}

/* Soft state — gold dash. "Looks untested" / "No recent test": a nudge, not a verdict. */
.sidh-chip--soft[b-gcja818e70] {
    border-color: color-mix(in srgb, var(--gold) 36%, var(--line));
    background: color-mix(in srgb, var(--gold) 9%, transparent);
}
.sidh-chip--soft .sidh-ico[b-gcja818e70] {
    background: color-mix(in srgb, var(--gold) 20%, transparent);
    color: var(--gold);
}
.sidh-chip--soft .sidh-chip-cta[b-gcja818e70] {
    color: var(--gold);
    border-left-color: color-mix(in srgb, var(--gold) 36%, transparent);
}

/* Idle — check not yet applicable (deck isn't built). Quiet, non-actionable. */
.sidh-chip--idle[b-gcja818e70] {
    opacity: 0.72;
}
.sidh-chip--idle .sidh-ico[b-gcja818e70] {
    background: color-mix(in srgb, var(--ink-3) 24%, transparent);
    color: var(--ink-3);
}
.sidh-chip--idle .sidh-chip-label[b-gcja818e70] {
    color: var(--ink-3);
}

/* Hover / focus for the actionable (link) chips. */
a.sidh-chip:hover[b-gcja818e70] {
    transform: translateY(-1px);
}
a.sidh-chip--fix:hover[b-gcja818e70] {
    border-color: color-mix(in srgb, var(--mana-r) 62%, transparent);
    background: color-mix(in srgb, var(--mana-r) 16%, transparent);
}
a.sidh-chip--soft:hover[b-gcja818e70] {
    border-color: color-mix(in srgb, var(--gold) 56%, transparent);
    background: color-mix(in srgb, var(--gold) 15%, transparent);
}
a.sidh-chip:focus-visible[b-gcja818e70] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}

/* ── "% from your binder" meter ──────────────────────────────────── */
.sidh-binder[b-gcja818e70] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font: 400 0.82rem/1.4 var(--font-ui);
    color: var(--ink-2);
}
.sidh-meter[b-gcja818e70] {
    position: relative;
    flex: 1 1 auto;
    max-width: 9rem;
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ink-3) 22%, transparent);
    overflow: hidden;
}
.sidh-meter-fill[b-gcja818e70] {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 3px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--jade) 75%, transparent),
        var(--jade-bright));
}
.sidh-binder-text[b-gcja818e70] {
    flex: none;
}
.sidh-binder-text strong[b-gcja818e70] {
    color: var(--jade-bright);
    font-weight: 700;
}

/* ── Familiar nudge — the most-urgent failing check, voiced ──────── */
.sidh-nudge[b-gcja818e70] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.1rem 0 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
    border-radius: 9px;
    background: color-mix(in srgb, var(--gold) 6%, transparent);
    font: 400 0.84rem/1.45 var(--font-ui);
    color: var(--ink-2);
}
.sidh-nudge-mark[b-gcja818e70] {
    flex: none;
    display: inline-flex;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--fam-color, var(--gold));
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--fam-color, var(--gold)) 38%, transparent));
}
.sidh-nudge-text[b-gcja818e70] {
    text-wrap: pretty;
}

/* ── Wider viewports: name + checks share a row, meter sits inline ─ */
@media (min-width: 540px) {
    .sidh-row[b-gcja818e70] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 0.9rem;
        row-gap: 0.55rem;
    }
    .sidh-checks[b-gcja818e70] {
        justify-content: flex-end;
    }
    .sidh-binder[b-gcja818e70],
    .sidh-nudge[b-gcja818e70] {
        grid-column: 1 / -1;
    }
}

/* ── Motion: chips stagger in on reveal; meter grows from zero ────── */
@media (prefers-reduced-motion: no-preference) {
    .sidh-chip[b-gcja818e70] {
        animation: sidh-chip-in-b-gcja818e70 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .sidh-checks .sidh-chip:nth-child(2)[b-gcja818e70] { animation-delay: 70ms; }
    .sidh-checks .sidh-chip:nth-child(3)[b-gcja818e70] { animation-delay: 140ms; }

    .sidh-meter-fill[b-gcja818e70] {
        animation: sidh-meter-grow-b-gcja818e70 720ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
        transform-origin: left center;
    }

    @keyframes sidh-chip-in-b-gcja818e70 {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes sidh-meter-grow-b-gcja818e70 {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}
/* /Components/Home/SignedIn/HomeNextMove.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeNextMove — the signed-in cockpit hero (signed-in-design.md §6.2).

   This is THE centerpiece: it must visibly dominate the supporting
   .si-module cards. It earns that with a deeper surface, a layered
   commander-art panel, an accent rail, display-scale Fraunces title,
   and a large primary CTA.

   --deck-accent (set by StageTheme on the .home-si wrapper) can be
   dark or bright depending on colour identity, so it is NEVER used as
   a text-on-accent surface directly. A contrast-safe pair is derived:
     --acc       : the themed accent, jade fallback
     --acc-soft  : the accent lifted toward white — used for accent TEXT
                   on the dark stage so it reads at any identity
     --cta-fill  : the accent lifted toward white — a guaranteed-light
                   CTA surface; CTA ink is --void (near-black) → AA holds
   Motion is transform/opacity only, gated behind prefers-reduced-motion.
   ──────────────────────────────────────────────────────────────── */

.si-hero[b-vsj93myd31] {
    --acc: var(--deck-accent, var(--jade));
    --acc-soft: color-mix(in srgb, var(--acc) 62%, #ffffff);
    --cta-fill: color-mix(in srgb, var(--acc) 58%, #ffffff);

    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--acc) 30%, var(--line));
    background:
        radial-gradient(120% 140% at 88% 0%, color-mix(in srgb, var(--acc) 16%, transparent) 0%, transparent 56%),
        linear-gradient(180deg, color-mix(in srgb, var(--surf-raised) 92%, var(--acc)) 0%, var(--surf-raised) 60%);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--acc) 12%, transparent);
}

/* Accent rail — a thin lit edge that reads as "this is the live move". */
.si-hero[b-vsj93myd31]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg,
        var(--acc-soft) 0%,
        color-mix(in srgb, var(--acc) 55%, transparent) 100%);
    box-shadow: 0 0 22px color-mix(in srgb, var(--acc) 45%, transparent);
    z-index: 2;
}

/* ── Body (copy column) ──────────────────────────────────────────── */
.si-hero__body[b-vsj93myd31] {
    position: relative;
    z-index: 1;
    padding: clamp(1.5rem, 4.5vw, 2.75rem);
    padding-left: clamp(1.6rem, 4.5vw, 3rem);
}

.si-hero__eyebrow[b-vsj93myd31] {
    color: var(--acc-soft);
    margin-bottom: 0.85rem;
}

/* Display-scale title — markedly larger than .si-title on the cards. */
.si-hero__title[b-vsj93myd31] {
    font-family: var(--font-disp);
    font-weight: 600;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1.04;
    letter-spacing: -0.014em;
    color: var(--ink);
    margin: 0 0 1.1rem;
    text-wrap: balance;
}

/* ── Familiar reason — real content, glyph + name in the Familiar hue ── */
.si-hero__reason[b-vsj93myd31] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.7rem;
    max-width: 40rem;
    font: 400 clamp(1.02rem, 1.5vw, 1.2rem)/1.5 var(--font-ui);
    color: var(--ink);
    text-wrap: pretty;
}
.si-hero__fam-mark[b-vsj93myd31] {
    flex: none;
    position: relative;
    top: 0.12em;
    font-size: 1.32em;
    line-height: 1;
    color: var(--fam-color);
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--fam-color) 50%, transparent));
}
.si-hero__fam-name[b-vsj93myd31] {
    font-weight: 600;
    color: var(--fam-color);
}
.si-hero__reason-sep[b-vsj93myd31] {
    color: var(--ink-3);
}

/* ── Payoff — the quieter "why it's worth it" beat ───────────────── */
.si-hero__payoff[b-vsj93myd31] {
    margin: 0 0 1.6rem;
    max-width: 38rem;
    padding-left: calc(1.32em + 0.6rem); /* align under the reason text, past the glyph */
    font: 400 0.98rem/1.55 var(--font-ui);
    color: var(--ink-2);
    text-wrap: pretty;
}

/* ── CTA row ─────────────────────────────────────────────────────── */
.si-hero__cta-row[b-vsj93myd31] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem 1rem;
}

/* Primary CTA — large, accent-filled (light surface), --void ink → AA. */
.si-hero__cta[b-vsj93myd31] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 52px;
    padding: 0.9rem 1.6rem;
    border: 1px solid color-mix(in srgb, var(--acc) 70%, #ffffff);
    border-radius: 12px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cta-fill) 100%, transparent) 0%,
        color-mix(in srgb, var(--acc) 78%, #ffffff) 100%);
    color: var(--void);
    font: 700 1.02rem/1 var(--font-ui);
    letter-spacing: 0.004em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--acc) 34%, transparent);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.si-hero__cta:hover[b-vsj93myd31] {
    filter: brightness(1.06);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--acc) 46%, transparent);
}
.si-hero__cta:active[b-vsj93myd31] {
    transform: translateY(1px);
}
.si-hero__cta:focus-visible[b-vsj93myd31] {
    outline: 2px solid var(--acc-soft);
    outline-offset: 3px;
}
.si-hero__cta:disabled[b-vsj93myd31] {
    cursor: progress;
    filter: saturate(0.85) brightness(0.96);
    box-shadow: none;
}
.si-hero__cta-arrow[b-vsj93myd31] {
    font-size: 1.05em;
    transition: transform 0.2s ease;
}
.si-hero__cta:hover .si-hero__cta-arrow[b-vsj93myd31] {
    transform: translateX(3px);
}

/* Starting… spinner — pure CSS, --void ink so it sits on the accent fill. */
.si-hero__cta-spin[b-vsj93myd31] {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--void) 35%, transparent);
    border-top-color: var(--void);
    animation: si-hero-spin-b-vsj93myd31 0.7s linear infinite;
}
@keyframes si-hero-spin-b-vsj93myd31 {
    to { transform: rotate(360deg); }
}

/* Secondary ghost link — quiet, the "or…" affordance. */
.si-hero__ghost[b-vsj93myd31] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    color: var(--ink-2);
    font: 600 0.94rem/1 var(--font-ui);
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease;
}
.si-hero__ghost:hover[b-vsj93myd31] {
    color: var(--acc-soft);
    background: color-mix(in srgb, var(--acc) 12%, transparent);
}
.si-hero__ghost:focus-visible[b-vsj93myd31] {
    outline: 2px solid var(--acc-soft);
    outline-offset: 2px;
}

/* ── Deck-art panel ──────────────────────────────────────────────── */
.si-hero__art[b-vsj93myd31] {
    position: relative;
    overflow: hidden;
    min-height: clamp(150px, 38vw, 210px);
    order: 2; /* mobile: art sits under the copy */
    background:
        radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 60%),
        var(--surf);
    border-top: 1px solid color-mix(in srgb, var(--acc) 22%, var(--line));
}
.si-hero__art-img[b-vsj93myd31] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%; /* commander faces sit high on the card crop */
    display: block;
}
/* Scrim so the deck label reads and the panel blends into the stage. */
.si-hero__art-scrim[b-vsj93myd31] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--void) 78%, transparent) 100%),
        linear-gradient(90deg, color-mix(in srgb, var(--surf-raised) 60%, transparent) 0%, transparent 36%);
}
.si-hero__art-deck[b-vsj93myd31] {
    position: absolute;
    left: clamp(1.1rem, 3.5vw, 1.6rem);
    right: 1rem;
    bottom: clamp(0.9rem, 2.5vw, 1.2rem);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    z-index: 1;
}
.si-hero__art-name[b-vsj93myd31] {
    font-family: var(--font-disp);
    font-weight: 600;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.1;
    color: var(--ink);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
    text-wrap: balance;
}
.si-hero__art-meta[b-vsj93myd31] {
    font: 600 0.74rem/1.3 var(--font-ui);
    letter-spacing: 0.02em;
    color: var(--ink-2);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* ── Reveal motion (root carries .home-reveal; this is the inner lift) ── */
@media (prefers-reduced-motion: no-preference) {
    .si-hero__eyebrow[b-vsj93myd31],
    .si-hero__title[b-vsj93myd31],
    .si-hero__reason[b-vsj93myd31],
    .si-hero__payoff[b-vsj93myd31],
    .si-hero__cta-row[b-vsj93myd31] {
        animation: si-hero-rise-b-vsj93myd31 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .si-hero__title[b-vsj93myd31]    { animation-delay: 60ms; }
    .si-hero__reason[b-vsj93myd31]   { animation-delay: 130ms; }
    .si-hero__payoff[b-vsj93myd31]   { animation-delay: 190ms; }
    .si-hero__cta-row[b-vsj93myd31]  { animation-delay: 250ms; }

    .si-hero__art-img[b-vsj93myd31] {
        animation: si-hero-art-settle-b-vsj93myd31 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes si-hero-rise-b-vsj93myd31 {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes si-hero-art-settle-b-vsj93myd31 {
        from { opacity: 0; transform: scale(1.06); }
        to   { opacity: 1; transform: scale(1); }
    }
}

/* ── Two-column hero at >=720px: art becomes a side panel ────────── */
@media (min-width: 720px) {
    .si-hero--anchored[b-vsj93myd31] {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
        align-items: stretch;
    }
    .si-hero--anchored .si-hero__body[b-vsj93myd31] {
        grid-column: 1;
    }
    .si-hero__art[b-vsj93myd31] {
        order: 0;
        grid-column: 2;
        min-height: 100%;
        border-top: none;
        border-left: 1px solid color-mix(in srgb, var(--acc) 22%, var(--line));
    }
    /* Left-to-right scrim on wide layouts so copy edge stays legible. */
    .si-hero__art-scrim[b-vsj93myd31] {
        background:
            linear-gradient(90deg, color-mix(in srgb, var(--surf-raised) 92%, transparent) 0%, transparent 42%),
            linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--void) 70%, transparent) 100%);
    }
}
/* /Components/Home/SignedIn/HomeQuickStart.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeQuickStart — "Start something new" cockpit module (§6.7).
   Two starts stacked: a commander rail (art-topped cards, owned-first,
   gold "You own this" badge) and a vibe rack (preset chips + free text).
   Mobile-first; the rail scrolls horizontally and snaps. All motion is
   transform/opacity and gated behind prefers-reduced-motion.
   --deck-accent themes the module (set on the .home-si wrapper).
   ──────────────────────────────────────────────────────────────── */

.qs[b-c6k837o1a6] {
    display: flex;
    flex-direction: column;
    gap: clamp(1.1rem, 2.6vw, 1.5rem);
}

.qs__head[b-c6k837o1a6] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.qs__sub[b-c6k837o1a6] {
    margin: 0;
    font: 400 0.92rem/1.5 var(--font-ui);
    color: var(--ink-2);
    max-width: 36em;
    text-wrap: pretty;
}

/* The tighter variant for the in-between stages: less air, no sub-line. */
.qs--tight[b-c6k837o1a6] {
    gap: clamp(0.85rem, 2vw, 1.1rem);
}

/* ── A start block (commander / vibe) ────────────────────────────── */
.qs__start[b-c6k837o1a6] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.qs__start--vibe[b-c6k837o1a6] {
    padding-top: clamp(0.85rem, 2vw, 1.1rem);
    border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.qs__start-label[b-c6k837o1a6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.qs__start-kicker[b-c6k837o1a6] {
    font: 600 0.9rem/1.2 var(--font-ui);
    color: var(--ink);
}
.qs__owned-tally[b-c6k837o1a6] {
    font: 600 0.72rem/1 var(--font-ui);
    letter-spacing: 0.03em;
    color: var(--gold);
}

/* ── Commander rail ──────────────────────────────────────────────── */
.qs__rail[b-c6k837o1a6] {
    list-style: none;
    margin: 0;
    padding: 0.2rem 0.1rem 0.6rem;
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink-3) 55%, transparent) transparent;
    -webkit-overflow-scrolling: touch;
}
.qs__rail[b-c6k837o1a6]::-webkit-scrollbar { height: 7px; }
.qs__rail[b-c6k837o1a6]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink-3) 45%, transparent);
    border-radius: 99px;
}
.qs__cmd-wrap[b-c6k837o1a6] {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.qs__cmd[b-c6k837o1a6] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    width: 116px;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card, 12px);
    background: color-mix(in srgb, var(--surf) 70%, var(--surf-raised));
    color: var(--ink);
    text-align: left;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.qs__cmd:hover:not(:disabled)[b-c6k837o1a6] {
    border-color: color-mix(in srgb, var(--deck-accent, var(--jade)) 55%, var(--line));
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
}
.qs__cmd:focus-visible[b-c6k837o1a6] {
    outline: 2px solid var(--deck-accent, var(--jade-bright));
    outline-offset: 2px;
}
.qs__cmd:disabled[b-c6k837o1a6] {
    cursor: default;
    opacity: 0.55;
}
.qs__cmd--owned[b-c6k837o1a6] {
    border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
}
.qs__cmd--owned:hover:not(:disabled)[b-c6k837o1a6] {
    border-color: color-mix(in srgb, var(--gold) 70%, var(--line));
}

.qs__cmd-art[b-c6k837o1a6] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 5 / 7;
    border-radius: calc(var(--radius-card, 12px) - 4px);
    overflow: hidden;
    background:
        radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--deck-accent, var(--jade)) 16%, transparent), transparent 70%),
        var(--surf);
}
.qs__cmd-art img[b-c6k837o1a6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gold "You own this" — a small, legible binder badge. */
.qs__cmd-badge[b-c6k837o1a6] {
    position: absolute;
    left: 4px;
    bottom: 4px;
    right: 4px;
    text-align: center;
    font: 700 0.62rem/1 var(--font-ui);
    letter-spacing: 0.02em;
    color: var(--void);
    background: var(--gold);
    border-radius: 99px;
    padding: 4px 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.qs__cmd-busy[b-c6k837o1a6] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--void) 55%, transparent);
}

.qs__cmd-name[b-c6k837o1a6] {
    font: 600 0.78rem/1.25 var(--font-ui);
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

/* ── Colour-identity pips (lettered — our own marks) ─────────────── */
.qs__pips[b-c6k837o1a6] {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}
.qs__pip[b-c6k837o1a6] {
    width: 16px;
    height: 16px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    font: 700 0.6rem/1 var(--font-ui);
    color: var(--void);
    border: 1px solid color-mix(in srgb, var(--void) 25%, transparent);
}
.qs__pip--w[b-c6k837o1a6] { background: var(--mana-w); }
.qs__pip--u[b-c6k837o1a6] { background: var(--mana-u); color: #fff; }
.qs__pip--b[b-c6k837o1a6] { background: var(--mana-b); color: #fff; }
.qs__pip--r[b-c6k837o1a6] { background: var(--mana-r); color: #fff; }
.qs__pip--g[b-c6k837o1a6] { background: var(--mana-g); }

/* ── Skeleton commanders ─────────────────────────────────────────── */
.qs__cmd--ghost[b-c6k837o1a6] {
    width: 116px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card, 12px);
    background: var(--surf-raised);
}
.qs__cmd--ghost .qs__cmd-art[b-c6k837o1a6] {
    background: color-mix(in srgb, var(--ink-3) 14%, var(--surf));
}
.qs__cmd-line[b-c6k837o1a6] {
    height: 0.7rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--ink-3) 18%, var(--surf));
}

/* ── Vibe rack ───────────────────────────────────────────────────── */
.qs__vibes[b-c6k837o1a6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.qs__vibe[b-c6k837o1a6] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--deck-accent, var(--jade)) 30%, var(--line));
    border-radius: 99px;
    background: color-mix(in srgb, var(--deck-accent, var(--jade)) 8%, var(--surf));
    color: var(--ink);
    font: 600 0.86rem/1 var(--font-ui);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.qs__vibe:hover:not(:disabled)[b-c6k837o1a6] {
    border-color: color-mix(in srgb, var(--deck-accent, var(--jade)) 60%, var(--line));
    background: color-mix(in srgb, var(--deck-accent, var(--jade)) 16%, var(--surf));
}
.qs__vibe:focus-visible[b-c6k837o1a6] {
    outline: 2px solid var(--deck-accent, var(--jade-bright));
    outline-offset: 2px;
}
.qs__vibe:disabled[b-c6k837o1a6] { cursor: default; opacity: 0.55; }

/* ── Free-text vibe ──────────────────────────────────────────────── */
.qs__free[b-c6k837o1a6] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.qs__free-input[b-c6k837o1a6] {
    flex: 1 1 14rem;
    min-width: 0;
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl, 10px);
    background: var(--surf);
    color: var(--ink);
    font: 400 0.92rem/1.4 var(--font-ui);
}
.qs__free-input[b-c6k837o1a6]::placeholder { color: var(--ink-3); }
.qs__free-input:focus-visible[b-c6k837o1a6] {
    outline: 2px solid var(--deck-accent, var(--jade-bright));
    outline-offset: 1px;
    border-color: var(--deck-accent, var(--jade));
}
.qs__free-input:disabled[b-c6k837o1a6] { opacity: 0.6; }

.qs__free-go[b-c6k837o1a6] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--deck-accent, var(--jade));
    border-radius: var(--radius-ctrl, 10px);
    background: var(--deck-accent, var(--jade));
    color: var(--void);
    font: 700 0.9rem/1 var(--font-ui);
    transition: filter 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.qs__free-go:hover:not(:disabled)[b-c6k837o1a6] { filter: brightness(1.08); }
.qs__free-go:active:not(:disabled)[b-c6k837o1a6] { transform: translateY(1px); }
.qs__free-go:focus-visible[b-c6k837o1a6] {
    outline: 2px solid var(--deck-accent, var(--jade-bright));
    outline-offset: 2px;
}
.qs__free-go:disabled[b-c6k837o1a6] { cursor: default; opacity: 0.5; }
.qs__free-arrow[b-c6k837o1a6] { font-size: 0.95em; }

/* ── Soft fallbacks ──────────────────────────────────────────────── */
.qs__soft[b-c6k837o1a6] {
    margin: 0;
    font: 400 0.86rem/1.5 var(--font-ui);
    color: var(--ink-2);
}
.qs__soft--err[b-c6k837o1a6] { color: color-mix(in srgb, var(--mana-r) 70%, var(--ink-2)); }
.qs__retry[b-c6k837o1a6] {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 0 0.15rem;
    cursor: pointer;
    color: var(--deck-accent, var(--jade-bright));
    font: 600 0.86rem/1.5 var(--font-ui);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.qs__retry:disabled[b-c6k837o1a6] { cursor: default; opacity: 0.6; }
.qs__retry:focus-visible[b-c6k837o1a6] {
    outline: 2px solid var(--deck-accent, var(--jade-bright));
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Spinner ─────────────────────────────────────────────────────── */
.qs__spin[b-c6k837o1a6] {
    width: 16px;
    height: 16px;
    border-radius: 99px;
    border: 2px solid color-mix(in srgb, var(--void) 35%, transparent);
    border-top-color: var(--void);
    animation: qs-spin-b-c6k837o1a6 0.7s linear infinite;
}
.qs__cmd-busy .qs__spin[b-c6k837o1a6] {
    border-color: color-mix(in srgb, var(--ink) 30%, transparent);
    border-top-color: var(--ink);
}
.qs__spin--inline[b-c6k837o1a6] {
    width: 13px;
    height: 13px;
    border-color: color-mix(in srgb, var(--ink-3) 45%, transparent);
    border-top-color: var(--ink);
}

@keyframes qs-spin-b-c6k837o1a6 { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .qs__cmd[b-c6k837o1a6],
    .qs__vibe[b-c6k837o1a6],
    .qs__free-go[b-c6k837o1a6] { transition: none; }
    .qs__cmd:hover:not(:disabled)[b-c6k837o1a6] { transform: none; }
    .qs__spin[b-c6k837o1a6] { animation: none; }
}

/* ── A little more room from small-tablet up ─────────────────────── */
@media (min-width: 560px) {
    .qs__cmd[b-c6k837o1a6],
    .qs__cmd--ghost[b-c6k837o1a6] { width: 128px; }
}
/* /Components/Home/SignedIn/HomeRecentPlay.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeRecentPlay — signed-in-design.md §6.6. A "verdict ledger" of the
   last few playtests. Each row is a left-railed entry: the outcome reads
   in TEXT first (ResultLabel + Won/Lost), with jade/mana-r only as a
   reinforcing tint on the rail + pip — never colour-only. The takeaway
   is the human hook, set apart as a quoted display line.

   Mobile-first: row content + CTAs stack in one column; at >=560px the
   CTAs move to the right of the body. Tap targets are >=44px. All motion
   (a gentle staggered settle) is gated behind prefers-reduced-motion.
   ──────────────────────────────────────────────────────────────── */

.rp-head[b-5h1t8ephk1] {
    margin: 0 0 0.95rem;
}
.rp-head .si-title[b-5h1t8ephk1] {
    margin-top: 0.4rem;
}

.rp-list[b-5h1t8ephk1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* ── Row ─────────────────────────────────────────────────────────── */
.rp-row[b-5h1t8ephk1] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.95rem 1rem 0.95rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surf) 60%, transparent);
    /* Left verdict rail — the at-a-glance tint, reinforcing the text. */
    border-left: 3px solid var(--rp-rail, var(--ink-3));
}
.rp-row--win[b-5h1t8ephk1]  { --rp-rail: var(--jade); }
.rp-row--loss[b-5h1t8ephk1] { --rp-rail: var(--mana-r); }
.rp-row--draw[b-5h1t8ephk1] { --rp-rail: var(--ink-3); }

/* ── Verdict line: pip + result label + relative time ────────────── */
.rp-verdict[b-5h1t8ephk1] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
}
.rp-pip[b-5h1t8ephk1] {
    align-self: center;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--rp-rail, var(--ink-3));
}
.rp-result[b-5h1t8ephk1] {
    font: 700 0.7rem/1 var(--font-ui);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--rp-result-ink, var(--ink-2));
}
.rp-row--win  .rp-result[b-5h1t8ephk1] { color: var(--jade-bright); }
.rp-row--loss .rp-result[b-5h1t8ephk1] { color: color-mix(in srgb, var(--mana-r) 55%, var(--ink)); }
.rp-when[b-5h1t8ephk1] {
    font: 400 0.78rem/1 var(--font-ui);
    color: var(--ink-3);
}

/* ── Deck + commander ────────────────────────────────────────────── */
.rp-deck[b-5h1t8ephk1] {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.55rem;
}
.rp-deck-name[b-5h1t8ephk1] {
    font-family: var(--font-disp);
    font-weight: 600;
    font-size: clamp(1.02rem, 1.6vw, 1.18rem);
    line-height: 1.2;
    color: var(--ink);
}
.rp-commander[b-5h1t8ephk1] {
    font: 400 0.86rem/1.3 var(--font-ui);
    color: var(--ink-2);
}
.rp-commander[b-5h1t8ephk1]::before {
    content: "✦";
    margin-right: 0.35rem;
    color: var(--deck-accent, var(--jade));
    font-size: 0.7em;
    vertical-align: 0.12em;
}

/* ── Takeaway — the human hook, a quiet quoted display line ──────── */
.rp-takeaway[b-5h1t8ephk1] {
    margin: 0;
    padding-left: 0.85rem;
    border-left: 2px solid color-mix(in srgb, var(--deck-accent, var(--jade)) 40%, transparent);
    font: italic 400 0.95rem/1.5 var(--font-disp);
    color: var(--ink-2);
    text-wrap: pretty;
}

/* ── CTAs — quiet ghost actions, >=44px tap targets ─────────────── */
.rp-ctas[b-5h1t8ephk1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.rp-cta[b-5h1t8ephk1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 1rem;
    border-radius: 9px;
    border: 1px solid var(--line);
    font: 600 0.88rem/1 var(--font-ui);
    text-decoration: none;
    color: var(--ink-2);
    background: transparent;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.rp-cta:hover[b-5h1t8ephk1] {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink-3) 70%, transparent);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.rp-cta:focus-visible[b-5h1t8ephk1] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}
/* "Tune from this" is the lead action — jade-tinted ghost. */
.rp-cta--tune[b-5h1t8ephk1] {
    color: var(--jade-bright);
    border-color: color-mix(in srgb, var(--jade) 45%, var(--line));
}
.rp-cta--tune:hover[b-5h1t8ephk1] {
    color: var(--void);
    background: var(--jade);
    border-color: var(--jade);
}

/* ── Layout: CTAs alongside the body once there's room ──────────── */
@media (min-width: 560px) {
    .rp-row[b-5h1t8ephk1] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
    }
    .rp-main[b-5h1t8ephk1] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        min-width: 0;
    }
    .rp-ctas[b-5h1t8ephk1] {
        flex: none;
        flex-direction: column;
        align-items: stretch;
    }
    .rp-cta[b-5h1t8ephk1] {
        white-space: nowrap;
    }
}

.rp-main[b-5h1t8ephk1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* ── Motion: rows settle in with a short stagger on reveal ───────── */
@media (prefers-reduced-motion: no-preference) {
    .rp-row[b-5h1t8ephk1] {
        opacity: 0;
        transform: translateY(8px);
    }
    .home-reveal.in-view .rp-row[b-5h1t8ephk1] {
        animation: rp-settle-b-5h1t8ephk1 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(var(--rp-i, 0) * 70ms);
    }
    @keyframes rp-settle-b-5h1t8ephk1 {
        to { opacity: 1; transform: translateY(0); }
    }
}
/* /Components/Home/SignedIn/HomeResume.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   HomeResume — signed-in cockpit "Resume" rail (signed-in-design §6.4).
   Each tile is a mini card-stage: commander art bleeds under a scrim,
   metadata sits on the dark base, a state chip carries a colored pip.
   Mobile-first: horizontal scroll-snap filmstrip. ≥720px: a grid of
   up to three tiles. Motion is opacity/transform only and reduced-
   motion safe.
   ──────────────────────────────────────────────────────────────── */

.hr-head[b-g9lp9xe1nt] {
    margin: 0 0 clamp(0.85rem, 2vw, 1.15rem);
}
.hr-head .si-eyebrow[b-g9lp9xe1nt] {
    /* Resume uses the deck accent set on the cockpit wrapper. */
    color: var(--deck-accent, var(--jade));
}

/* ── Rail: horizontal scroll-snap filmstrip on small screens ─────── */
.hr-rail[b-g9lp9xe1nt] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 78%);
    gap: clamp(0.7rem, 2vw, 1rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 2px;
    /* Bleed the scroll edges to the module padding so tiles can run off. */
    margin-inline: calc(-1 * clamp(1rem, 2.5vw, 1.5rem));
    padding-inline: clamp(1rem, 2.5vw, 1.5rem);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink-3) 50%, transparent) transparent;
}
.hr-rail[b-g9lp9xe1nt]::-webkit-scrollbar {
    height: 6px;
}
.hr-rail[b-g9lp9xe1nt]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink-3) 50%, transparent);
    border-radius: 6px;
}

.hr-item[b-g9lp9xe1nt] {
    scroll-snap-align: start;
    min-width: 0;
}

/* ── Tile: art-hero card with a scrim and a metadata base ────────── */
.hr-tile[b-g9lp9xe1nt] {
    display: flex;
    flex-direction: column;
    min-height: 44px;
    border-radius: 13px;
    overflow: hidden;
    text-decoration: none;
    background: var(--surf);
    border: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.hr-tile:hover[b-g9lp9xe1nt] {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--deck-accent, var(--jade)) 55%, var(--line));
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.42),
        0 0 0 1px color-mix(in srgb, var(--deck-accent, var(--jade)) 28%, transparent);
}
.hr-tile:focus-visible[b-g9lp9xe1nt] {
    outline: 2px solid var(--deck-accent, var(--jade-bright, var(--jade)));
    outline-offset: 3px;
}

/* ── Art stage ───────────────────────────────────────────────────── */
.hr-art[b-g9lp9xe1nt] {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 70% 10%, color-mix(in srgb, var(--deck-accent, var(--jade)) 22%, var(--surf-raised)) 0%, var(--surf-raised) 70%);
}
.hr-art img[b-g9lp9xe1nt] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* MTG art's focal point sits high; bias the crop upward. */
    object-position: 50% 22%;
    display: block;
    transform: scale(1.02);
    transition: transform 0.4s ease;
}
.hr-tile:hover .hr-art img[b-g9lp9xe1nt] {
    transform: scale(1.06);
}
.hr-art-blank[b-g9lp9xe1nt] {
    position: absolute;
    inset: 0;
}
/* Scrim bridges the art into the metadata base for legibility + depth. */
.hr-scrim[b-g9lp9xe1nt] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 38%,
        color-mix(in srgb, var(--surf) 55%, transparent) 78%,
        var(--surf) 100%);
}

/* ── Metadata base ───────────────────────────────────────────────── */
.hr-body[b-g9lp9xe1nt] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem 0.95rem;
}
.hr-name[b-g9lp9xe1nt] {
    font: 600 1rem/1.25 var(--font-ui);
    color: var(--ink);
    /* Two-line clamp keeps tile heights even across long deck names. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hr-meta[b-g9lp9xe1nt] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem;
    font: 500 0.8rem/1.3 var(--font-ui);
    color: var(--ink-2);
}
.hr-dot[b-g9lp9xe1nt] {
    color: var(--ink-3);
}
.hr-time[b-g9lp9xe1nt] {
    color: var(--ink-3);
}

/* ── State chip — colored pip + text (never color-only) ──────────── */
.hr-chip[b-g9lp9xe1nt] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
    padding: 0.28rem 0.6rem 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--hr-c) 40%, var(--line));
    background: color-mix(in srgb, var(--hr-c) 12%, var(--surf-raised));
    font: 600 0.72rem/1 var(--font-ui);
    letter-spacing: 0.02em;
    color: var(--hr-c-text);
}
.hr-pip[b-g9lp9xe1nt] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: none;
    background: var(--hr-c);
    box-shadow: 0 0 7px color-mix(in srgb, var(--hr-c) 60%, transparent);
}

/* Chip palettes — kept AA-legible by lightening the text vs the dot. */
.hr-chip--drafted[b-g9lp9xe1nt] {
    --hr-c: var(--ink-3);
    --hr-c-text: var(--ink-2);
}
.hr-chip--fix[b-g9lp9xe1nt] {
    --hr-c: var(--mana-r);
    --hr-c-text: color-mix(in srgb, var(--mana-r) 72%, var(--ink));
}
.hr-chip--tested[b-g9lp9xe1nt] {
    --hr-c: var(--jade);
    --hr-c-text: color-mix(in srgb, var(--jade) 70%, var(--ink));
}
.hr-chip--built[b-g9lp9xe1nt] {
    --hr-c: var(--gold);
    --hr-c-text: color-mix(in srgb, var(--gold) 74%, var(--ink));
}

/* ── Staggered reveal for the tiles (gated to the parent reveal) ──── */
@media (prefers-reduced-motion: no-preference) {
    .hr.in-view .hr-item[b-g9lp9xe1nt] {
        animation: hr-rise-b-g9lp9xe1nt 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(120ms + var(--hr-i, 0) * 90ms);
    }
    @keyframes hr-rise-b-g9lp9xe1nt {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }
}

/* ── Grid layout from 720px — up to three side-by-side tiles ─────── */
@media (min-width: 720px) {
    .hr-rail[b-g9lp9xe1nt] {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.85rem, 1.6vw, 1.15rem);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
    }
    .hr-art[b-g9lp9xe1nt] {
        aspect-ratio: 4 / 3;
    }
}
/* /Components/Inspector.razor.rz.scp.css */
.inspector[b-l6vl75ik5d] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* /Components/InspectorCard.razor.rz.scp.css */
.icard[b-aq4tyajqco] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
}

/* Heading label */
.h[b-aq4tyajqco] {
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 11px;
}

/* Next-best-action accent variant */
.nba[b-aq4tyajqco] {
    border: 1px solid rgba(103, 181, 141, .3);
    background: rgba(103, 181, 141, .07);
}

.h-accent[b-aq4tyajqco] {
    color: var(--jade-bright);
}
/* /Components/ManaCurve.razor.rz.scp.css */
.curve[b-jaknovn38p] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 74px; /* bar area + label */
}

.bucket[b-jaknovn38p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.c[b-jaknovn38p] {
    width: 100%;
    background: linear-gradient(180deg, var(--jade), #2f5f48);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: height 0.25s ease;
}

.bucket small[b-jaknovn38p] {
    display: block;
    text-align: center;
    color: var(--ink-3);
    font: 600 9px/1 var(--font-ui);
    margin-top: 5px;
    white-space: nowrap;
}
/* /Components/ManaPips.razor.rz.scp.css */
.pips[b-c7ggkkrmt8] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.pip[b-c7ggkkrmt8] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 800 11px/1 var(--font-ui);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
    flex-shrink: 0;
}

/* Small variant — used in bands, tight layouts */
.pips-sm .pip[b-c7ggkkrmt8] {
    width: 18px;
    height: 18px;
    font-size: 8px;
}
/* /Components/Play/ActionControl.razor.rz.scp.css */
.action-control[b-468m6gz1tb] { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.ac-life[b-468m6gz1tb] { display: flex; align-items: center; gap: 5px; font: 700 15px/1 var(--font-ui); }
.ac-life .heart[b-468m6gz1tb] { color: var(--jade); }
.ac-hint[b-468m6gz1tb] { font: 400 10.5px/1 var(--font-ui); color: var(--jade); }
.ac-actions[b-468m6gz1tb] { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.ac-primary[b-468m6gz1tb] {
    background: var(--jade); color: #06150E;
    font: 600 12px/1 var(--font-ui); padding: 9px 18px; border: 0; border-radius: 9px; cursor: pointer;
}
.ac-primary:disabled[b-468m6gz1tb] { opacity: 0.6; cursor: default; }
.ac-secondary[b-468m6gz1tb] {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink-2);
    cursor: pointer;
    font: 600 12px/1 var(--font-ui);
    padding: 9px 14px;
}
.ac-secondary:hover:not(:disabled)[b-468m6gz1tb] { border-color: var(--ink-3); color: var(--ink); }
.ac-secondary:disabled[b-468m6gz1tb] { opacity: 0.6; cursor: default; }
.ac-speed[b-468m6gz1tb] { display: inline-flex; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.ac-speed-btn[b-468m6gz1tb] { background: none; border: 0; color: var(--ink-3); font: 600 10px/1 var(--font-ui); padding: 5px 9px; border-radius: 6px; cursor: pointer; }
.ac-speed-btn.is-active[b-468m6gz1tb] { background: var(--stage-raised); color: var(--ink); }
/* /Components/Play/BattlefieldCard.razor.rz.scp.css */
.bfc[b-di7yw2cfra] {
    position: relative;
    width: 56px;
    aspect-ratio: 5 / 7;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--stage-raised);
    padding: 0;
    overflow: hidden;
    cursor: default;
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.bfc:not(:disabled)[b-di7yw2cfra] { cursor: pointer; }
.bfc--tapped[b-di7yw2cfra] { transform: rotate(18deg); }
.bfc--sick[b-di7yw2cfra] { filter: brightness(0.72); }
.bfc--selected[b-di7yw2cfra] { border-color: var(--jade); box-shadow: 0 0 0 2px rgba(103, 181, 141, 0.4); }
.bfc:not(:disabled):hover[b-di7yw2cfra] { border-color: var(--ink-3); }

.bfc-art[b-di7yw2cfra] { display: block; width: 100%; height: 62%; object-fit: cover; border-bottom: 1px solid var(--line); }
.bfc-art--blank[b-di7yw2cfra] { background: #0f1512; }
.bfc-name[b-di7yw2cfra] { display: block; font: 600 7px/1.1 var(--font-ui); color: var(--ink-2); padding: 2px 3px; text-align: left; }
.bfc-cmd[b-di7yw2cfra] { position: absolute; top: 2px; left: 3px; color: var(--gold); font-size: 8px; }
.bfc-pt[b-di7yw2cfra] {
    position: absolute; right: 2px; bottom: 2px;
    font: 700 8px/1 var(--font-ui); color: var(--ink);
    background: rgba(10, 13, 11, 0.85); border: 1px solid var(--line);
    border-radius: 3px; padding: 0 3px;
}
/* /Components/Play/BattlefieldLanes.razor.rz.scp.css */
.lanes[b-mh5rce37r4] { display: flex; flex-direction: column; gap: 8px; }
.lane-label[b-mh5rce37r4] {
    display: block;
    font: 700 9px/1 var(--font-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.lane-row[b-mh5rce37r4] { display: flex; gap: 5px; flex-wrap: wrap; min-height: 30px; align-items: flex-start; }
.lane-empty[b-mh5rce37r4] { font: 400 10px/1 var(--font-ui); color: var(--ink-3); align-self: center; }
/* /Components/Play/DeckStartCoveragePanel.razor.rz.scp.css */
.dscp[b-wc8iid0ioi] {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surf) 88%, transparent);
}

.dscp-head[b-wc8iid0ioi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dscp-kicker[b-wc8iid0ioi] {
    display: block;
    color: var(--ink-3);
    font: 700 10px var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dscp-title[b-wc8iid0ioi] {
    margin: 2px 0 0;
    color: var(--ink);
    font: 700 18px var(--font-display);
    letter-spacing: 0;
}

.dscp-gauge[b-wc8iid0ioi] {
    display: grid;
    place-items: center;
    width: 68px;
    min-width: 68px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: conic-gradient(var(--jade) var(--pct, 0%), rgba(255,255,255,0.08) 0);
}

.dscp-gauge-value[b-wc8iid0ioi] {
    color: var(--ink);
    font: 800 15px var(--font-ui);
    line-height: 1;
}

.dscp-gauge-label[b-wc8iid0ioi] {
    color: var(--ink-3);
    font: 700 9px var(--font-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dscp-meta[b-wc8iid0ioi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dscp-meta span[b-wc8iid0ioi] {
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-2);
    font: 650 11px var(--font-ui);
}

.dscp-consent[b-wc8iid0ioi] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font: 650 12px var(--font-ui);
}

.dscp-consent input[b-wc8iid0ioi] {
    accent-color: var(--gold);
}

.dscp-lists[b-wc8iid0ioi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.dscp-list[b-wc8iid0ioi] {
    display: grid;
    gap: 7px;
}

.dscp-list-title[b-wc8iid0ioi] {
    color: var(--ink-3);
    font: 750 10px var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dscp-card[b-wc8iid0ioi] {
    display: grid;
    gap: 2px;
    min-height: 42px;
    padding: 8px 10px;
    border-left: 2px solid var(--gold);
    background: rgba(255,255,255,0.04);
    color: var(--ink-2);
    font: 600 12px var(--font-ui);
}

.dscp-card-name[b-wc8iid0ioi] {
    color: var(--ink);
    font-weight: 750;
}

.dscp-card-reason[b-wc8iid0ioi] {
    color: var(--ink-3);
    overflow-wrap: anywhere;
}

.dscp-paidsupported[b-wc8iid0ioi] {
    border-color: color-mix(in srgb, var(--jade) 55%, var(--line));
}

.dscp-paidsupportedwithvisiblesimplifications[b-wc8iid0ioi] {
    border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
}

.dscp-adjudicatedalpha[b-wc8iid0ioi],
.dscp-unsupportedforpaidplay[b-wc8iid0ioi] {
    border-color: color-mix(in srgb, #d36d5c 58%, var(--line));
}

@media (max-width: 640px) {
    .dscp-head[b-wc8iid0ioi] {
        align-items: start;
    }

    .dscp-gauge[b-wc8iid0ioi] {
        width: 58px;
        min-width: 58px;
    }
}
/* /Components/Play/EventLogModal.razor.rz.scp.css */
.elog-backdrop[b-a78y63xlo1] { position: fixed; inset: 0; background: rgba(5, 7, 6, 0.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.elog-modal[b-a78y63xlo1] { width: min(92vw, 520px); max-height: 80vh; display: flex; flex-direction: column; background: var(--stage); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.elog-head[b-a78y63xlo1] { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 0.95rem/1 var(--font-ui); }
.elog-seq[b-a78y63xlo1] { color: var(--ink-3); font-size: 0.8rem; }
.elog-close[b-a78y63xlo1] { margin-left: auto; background: none; border: 0; color: var(--ink-3); font-size: 15px; cursor: pointer; }
.elog-list[b-a78y63xlo1] { margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.elog-item[b-a78y63xlo1] { border-top: 1px solid var(--line); padding: 8px 0; }
.elog-item-head[b-a78y63xlo1] { display: flex; align-items: center; gap: 8px; font: 600 0.75rem/1 var(--font-ui); color: var(--ink-3); }
.elog-flag[b-a78y63xlo1] { margin-left: auto; background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 13px; }
.elog-flag:hover:not(:disabled)[b-a78y63xlo1] { color: var(--danger-text); }
.elog-flag:disabled[b-a78y63xlo1] { opacity: 0.4; cursor: default; }
.elog-item p[b-a78y63xlo1] { margin: 4px 0 0; font: 400 0.85rem/1.4 var(--font-ui); color: var(--ink-2); }
.elog-empty[b-a78y63xlo1] { color: var(--ink-3); padding: 12px 0; }
/* /Components/Play/HandFan.razor.rz.scp.css */
.hand[b-g0bkn23eys] { display: flex; justify-content: center; align-items: flex-end; gap: 10px; padding: 12px 0 6px; min-height: 210px; flex-wrap: wrap; }
.hand-card[b-g0bkn23eys] {
    position: relative; width: 150px; aspect-ratio: 5 / 7;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--stage-raised); padding: 0; overflow: hidden;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
    cursor: pointer; transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.hand-card:hover[b-g0bkn23eys] { transform: translateY(-6px); }
.hand-art[b-g0bkn23eys] { display: block; width: 100%; height: 100%; object-fit: cover; }
.hand-art--blank[b-g0bkn23eys] { display: flex; align-items: center; justify-content: center; background: #101713; color: var(--ink-3); font: 600 11px/1.2 var(--font-ui); text-align: center; padding: 6px; }
.hand-empty[b-g0bkn23eys] { color: var(--ink-3); font: 400 13px/1 var(--font-ui); align-self: center; }

/* Playable: gold border + a radiating outer glow that gently pulses. */
.hand-card--play[b-g0bkn23eys] { border-color: var(--gold); cursor: grab; animation: hand-glow-b-g0bkn23eys 1.8s ease-in-out infinite; }
.hand-card--play:hover[b-g0bkn23eys] { transform: translateY(-10px); }
.hand-card--play:active[b-g0bkn23eys] { cursor: grabbing; }
@keyframes hand-glow-b-g0bkn23eys {
    0%, 100% { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--gold), 0 0 10px 2px rgba(217, 189, 113, 0.35); }
    50%      { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--gold), 0 0 20px 6px rgba(217, 189, 113, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
    .hand-card--play[b-g0bkn23eys] { animation: none; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--gold), 0 0 14px 3px rgba(217, 189, 113, 0.45); }
    .hand-card[b-g0bkn23eys], .hand-card:hover[b-g0bkn23eys], .hand-card--play:hover[b-g0bkn23eys] { transition: none; transform: none; }
}
/* /Components/Play/HowToPlayModal.razor.rz.scp.css */
.htp-backdrop[b-jbawcdgtqj] { position: fixed; inset: 0; background: rgba(5, 7, 6, 0.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.htp-modal[b-jbawcdgtqj] { position: relative; width: min(92vw, 460px); max-height: 84vh; overflow-y: auto; background: var(--stage); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.htp-close[b-jbawcdgtqj] { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--ink-3); font-size: 15px; cursor: pointer; }
.htp-title[b-jbawcdgtqj] { font-size: 1.3rem; margin: 0 0 14px; }
.htp-block[b-jbawcdgtqj] { margin-bottom: 14px; }
.htp-label[b-jbawcdgtqj] { font: 700 9px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.htp-phase[b-jbawcdgtqj] { margin: 6px 0 0; font: 400 0.95rem/1.5 var(--font-ui); color: var(--ink); }
.htp-phase strong[b-jbawcdgtqj] { color: var(--jade); }
.htp-actions[b-jbawcdgtqj], .htp-basics[b-jbawcdgtqj] { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font: 400 0.88rem/1.6 var(--font-ui); }
.htp-muted[b-jbawcdgtqj] { margin: 6px 0 0; color: var(--ink-3); font: 400 0.88rem/1.5 var(--font-ui); }
.htp-foot[b-jbawcdgtqj] { display: flex; justify-content: flex-end; margin-top: 8px; }
.htp-btn[b-jbawcdgtqj] { background: var(--jade); color: #06150E; border: 0; border-radius: 9px; padding: 9px 18px; font: 600 0.9rem/1 var(--font-ui); cursor: pointer; }
/* /Components/Play/ManaBar.razor.rz.scp.css */
.manabar[b-56slbnllw3] { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.manabar-label[b-56slbnllw3] { font: 700 9px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.manabar-pips[b-56slbnllw3] { display: flex; gap: 4px; flex-wrap: wrap; }
.manapip[b-56slbnllw3] {
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font: 800 10px/1 var(--font-ui); border: 1px solid rgba(0,0,0,0.25);
}
.manapip.is-tapped[b-56slbnllw3] { opacity: 0.32; filter: grayscale(0.5); }
.manabar-none[b-56slbnllw3] { font: 400 10px/1 var(--font-ui); color: var(--ink-3); }
.manabar-count[b-56slbnllw3] { font: 600 10px/1 var(--font-ui); color: var(--ink-2); margin-left: auto; }
/* /Components/Play/OpponentPanel.razor.rz.scp.css */
.opnl[b-ow5h6sxikk] {
    background: var(--stage-raised);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px;
    min-width: 0;
}
.opnl--active[b-ow5h6sxikk] {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(217, 189, 113, 0.06), transparent);
}
.opnl-head[b-ow5h6sxikk] { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.opnl-cmd[b-ow5h6sxikk] { width: 22px; height: 30px; border-radius: 3px; background: #1a160e; border: 1px solid var(--gold); flex: 0 0 auto; }
.opnl-cmd.has-art[b-ow5h6sxikk] { background-size: 172%; background-position: center 16%; background-repeat: no-repeat; }
.opnl-name[b-ow5h6sxikk] { font: 600 11.5px/1.1 var(--font-ui); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opnl-name small[b-ow5h6sxikk] { display: block; font-size: 9.5px; color: var(--ink-3); }
.opnl-tag[b-ow5h6sxikk] { font: 600 9px/1 var(--font-ui); color: var(--gold); background: rgba(217, 189, 113, 0.14); border: 1px solid rgba(217, 189, 113, 0.3); border-radius: 20px; padding: 2px 7px; flex: 0 0 auto; }
.opnl-life[b-ow5h6sxikk] { margin-left: auto; display: flex; align-items: center; gap: 4px; font: 700 14px/1 var(--font-ui); flex: 0 0 auto; }
.heart[b-ow5h6sxikk] { color: var(--danger-text); }
.opnl-meta[b-ow5h6sxikk] { font: 400 10px/1 var(--font-ui); color: var(--ink-3); margin-bottom: 6px; }
/* /Components/Play/PlayerSeat.razor.rz.scp.css */
.seat[b-j7p6i2cusp] {
    background: linear-gradient(0deg, rgba(103, 181, 141, 0.06), transparent);
    border: 1px solid var(--jade);
    border-radius: 12px;
    padding: 10px;
}
.seat-head[b-j7p6i2cusp] { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.seat-cmd[b-j7p6i2cusp] { width: 26px; height: 36px; border-radius: 4px; background: #13251c; border: 1px solid var(--jade); flex: 0 0 auto; }
button.seat-cmd[b-j7p6i2cusp] {
    appearance: none;
    cursor: pointer;
    padding: 0;
}
button.seat-cmd:hover[b-j7p6i2cusp],
button.seat-cmd:focus-visible[b-j7p6i2cusp] {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(217, 189, 113, 0.24);
    outline: none;
}
.seat-cmd.has-art[b-j7p6i2cusp] { background-size: 172%; background-position: center 16%; background-repeat: no-repeat; }
.seat-name[b-j7p6i2cusp] { font: 600 12.5px/1.1 var(--font-ui); }
.seat-name small[b-j7p6i2cusp] { display: block; font-size: 10px; color: var(--ink-3); }
.seat-life[b-j7p6i2cusp] { margin-left: auto; display: flex; align-items: center; gap: 5px; font: 700 15px/1 var(--font-ui); }
.seat-life .heart[b-j7p6i2cusp] { color: var(--jade); }
.heart[b-j7p6i2cusp] { color: var(--jade); }
.seat-lands[b-j7p6i2cusp] { margin-left: auto; font: 500 11px/1 var(--font-ui); color: var(--ink-3); }
/* /Components/Play/PlayTable.razor.rz.scp.css */
.playtable[b-va9t2h1vv0] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px clamp(12px, 3vw, 32px) 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Fill the window without overflowing: nav (54) + masthead (100) + the
       page gaps and the strip below the table come to ~285px of chrome. */
    min-height: calc(100vh - 285px);
}
.pt-opponents[b-va9t2h1vv0] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* The shared battlefield — the centre of the table. It absorbs the leftover
   height so your seat sits at the bottom and the opponents at the top, but it
   reads as a defined play zone (where permanents land) rather than a void. */
.pt-field[b-va9t2h1vv0] {
    flex: 1 1 auto;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: radial-gradient(ellipse at center, rgba(103, 181, 141, 0.05), transparent 70%);
}
.pt-field.is-decision[b-va9t2h1vv0] {
    align-items: stretch;
    min-height: 190px;
}
.pt-field-label[b-va9t2h1vv0] {
    font: 600 10px/1 var(--font-ui);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    opacity: 0.5;
}

.pt-you[b-va9t2h1vv0] { flex: 0 0 auto; }

@media (max-width: 900px) {
    .pt-opponents[b-va9t2h1vv0] { grid-template-columns: 1fr; }
    .playtable[b-va9t2h1vv0] { min-height: auto; }
    .pt-field[b-va9t2h1vv0] { min-height: 48px; }
}

.pt-field.is-drop[b-va9t2h1vv0],
.pt-seat.is-drop[b-va9t2h1vv0] {
    border: 1px dashed var(--gold);
    border-radius: 14px;
    background: radial-gradient(ellipse at center, rgba(217, 189, 113, 0.10), transparent 70%);
}
.pt-field.is-drop .pt-field-label[b-va9t2h1vv0] { color: var(--gold); opacity: 0.9; }
.pt-seat[b-va9t2h1vv0] { border: 1px solid transparent; border-radius: 14px; transition: border-color 0.12s ease; }

.pt-combat[b-va9t2h1vv0] {
    width: 100%;
    display: grid;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}
.pt-combat-head[b-va9t2h1vv0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.pt-combat-head div[b-va9t2h1vv0] {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.pt-combat-head span[b-va9t2h1vv0],
.pt-combat-k[b-va9t2h1vv0] {
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jade-bright);
}
.pt-combat-head strong[b-va9t2h1vv0] {
    color: var(--ink);
    font: 800 16px/1.1 var(--font-ui);
}
.pt-combat-actions[b-va9t2h1vv0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.pt-combat-actions button[b-va9t2h1vv0],
.pt-assign[b-va9t2h1vv0],
.pt-assigned-row button[b-va9t2h1vv0] {
    appearance: none;
    background: rgba(159, 224, 189, 0.12);
    border: 1px solid rgba(159, 224, 189, 0.34);
    border-radius: 6px;
    color: var(--ink);
    cursor: pointer;
    font: 800 10px/1 var(--font-ui);
    min-height: 28px;
    padding: 7px 9px;
}
.pt-combat-actions button:hover:not(:disabled)[b-va9t2h1vv0],
.pt-assign:hover:not(:disabled)[b-va9t2h1vv0],
.pt-assigned-row button:hover:not(:disabled)[b-va9t2h1vv0] {
    border-color: var(--jade-bright);
}
.pt-combat-actions button:disabled[b-va9t2h1vv0],
.pt-assign:disabled[b-va9t2h1vv0],
.pt-assigned-row button:disabled[b-va9t2h1vv0] {
    cursor: default;
    opacity: 0.55;
}
.pt-combat-grid[b-va9t2h1vv0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}
.pt-combat-column[b-va9t2h1vv0] {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}
.pt-mini-row[b-va9t2h1vv0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 7px;
    min-width: 0;
}
.pt-mini-card[b-va9t2h1vv0] {
    background: rgba(4, 9, 7, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--ink);
    display: grid;
    gap: 4px;
    min-height: 116px;
    min-width: 0;
    overflow: hidden;
    padding: 5px;
    text-align: left;
}
.pt-mini-inspect[b-va9t2h1vv0] {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 0;
    text-align: left;
}
.pt-mini-inspect:disabled[b-va9t2h1vv0] {
    cursor: default;
}
.pt-mini-action[b-va9t2h1vv0] {
    appearance: none;
    align-self: end;
    background: rgba(159, 224, 189, 0.12);
    border: 1px solid rgba(159, 224, 189, 0.34);
    border-radius: 6px;
    color: var(--ink);
    cursor: pointer;
    font: 800 9px/1 var(--font-ui);
    min-height: 24px;
    padding: 6px 7px;
}
.pt-mini-action:hover:not(:disabled)[b-va9t2h1vv0] {
    border-color: var(--jade-bright);
}
.pt-mini-action:disabled[b-va9t2h1vv0] {
    cursor: default;
    opacity: 0.55;
}
.pt-mini-card.is-selected[b-va9t2h1vv0] {
    border-color: var(--jade-bright);
    box-shadow: 0 0 0 2px rgba(159, 224, 189, 0.14);
}
.pt-mini-card.is-tapped[b-va9t2h1vv0] { opacity: 0.72; }
.pt-mini-card span:not(.pt-mini-art)[b-va9t2h1vv0] {
    font: 800 10px/1.1 var(--font-ui);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-mini-card b[b-va9t2h1vv0] {
    justify-self: end;
    color: #f0dfa9;
    font: 800 11px/1 var(--font-ui);
}
.pt-mini-art[b-va9t2h1vv0] {
    aspect-ratio: 5 / 7;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    display: block;
    overflow: hidden;
}
.pt-mini-art img[b-va9t2h1vv0] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.pt-target-row[b-va9t2h1vv0],
.pt-incoming[b-va9t2h1vv0] {
    background: rgba(4, 9, 7, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 7px;
}
.pt-target-row span[b-va9t2h1vv0] {
    color: var(--ink);
    font: 800 11px/1.1 var(--font-ui);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-target-row select[b-va9t2h1vv0] {
    width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    font: 800 11px/1 var(--font-ui);
    padding: 6px;
}
.pt-incoming.is-blocked[b-va9t2h1vv0] {
    border-color: rgba(159, 224, 189, 0.48);
    background: rgba(159, 224, 189, 0.08);
}
.pt-incoming-main[b-va9t2h1vv0] {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}
.pt-incoming-main:disabled[b-va9t2h1vv0] {
    cursor: default;
}
.pt-incoming-main .pt-mini-art[b-va9t2h1vv0] {
    width: 42px;
}
.pt-incoming-main strong[b-va9t2h1vv0],
.pt-incoming-main span[b-va9t2h1vv0] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-incoming-main strong[b-va9t2h1vv0] {
    color: var(--ink);
    font: 800 12px/1.1 var(--font-ui);
}
.pt-incoming-main span[b-va9t2h1vv0] {
    color: var(--ink-3);
    font: 700 10px/1.1 var(--font-ui);
}
.pt-assigned-row[b-va9t2h1vv0] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.pt-assigned-row button[b-va9t2h1vv0] {
    min-height: 24px;
    padding: 5px 7px;
}
.pt-combat-empty[b-va9t2h1vv0] {
    align-items: center;
    background: rgba(4, 9, 7, 0.35);
    border: 1px dashed rgba(199, 210, 201, 0.22);
    border-radius: 8px;
    color: var(--ink-2);
    display: flex;
    font: 800 11px/1.2 var(--font-ui);
    justify-content: center;
    min-height: 72px;
    padding: 10px;
    text-align: center;
}

/* ---- Combat drag-and-drop ---------------------------------------------------- */
.pt-combat-hint[b-va9t2h1vv0] {
    margin: 0;
    color: var(--ink-3);
    font: 700 10px/1.3 var(--font-ui);
    letter-spacing: 0.01em;
}

/* Anything you can pick up shows a grab cursor and lifts slightly while dragging. */
.pt-draggable[b-va9t2h1vv0] { cursor: grab; }
.pt-draggable:active[b-va9t2h1vv0] { cursor: grabbing; }

/* Drop targets: the per-opponent zones, the incoming attackers, and the two
   "unassigned" pools. They light up jade when a compatible card is over them. */
.pt-defender-zone[b-va9t2h1vv0] {
    background: rgba(4, 9, 7, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 7px;
}
.pt-defender-name[b-va9t2h1vv0] {
    color: var(--ink);
    font: 800 11px/1.1 var(--font-ui);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-defender-attackers[b-va9t2h1vv0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 7px;
    min-width: 0;
}

.pt-drop-hint[b-va9t2h1vv0] {
    align-items: center;
    border: 1px dashed rgba(199, 210, 201, 0.22);
    border-radius: 8px;
    color: var(--ink-3);
    display: flex;
    font: 800 10px/1.2 var(--font-ui);
    justify-content: center;
    min-height: 56px;
    padding: 8px;
    text-align: center;
}

/* The unassigned pools read as dashed targets while a drag is in flight. */
.pt-drop-pool.is-droppable[b-va9t2h1vv0] {
    border-style: dashed;
    border-color: rgba(159, 224, 189, 0.42);
}

/* Active highlight when a compatible card is hovering a legal drop zone. */
.pt-defender-zone.is-droppable[b-va9t2h1vv0],
.pt-incoming.is-droppable[b-va9t2h1vv0] {
    border-color: rgba(159, 224, 189, 0.42);
}
.pt-defender-zone.is-dragover[b-va9t2h1vv0],
.pt-incoming.is-dragover[b-va9t2h1vv0],
.pt-drop-pool.is-dragover[b-va9t2h1vv0] {
    border-color: var(--jade-bright);
    box-shadow: 0 0 0 2px rgba(159, 224, 189, 0.22);
    background: rgba(159, 224, 189, 0.10);
}
.pt-defender-zone.is-dragover .pt-drop-hint[b-va9t2h1vv0],
.pt-incoming.is-dragover .pt-drop-hint[b-va9t2h1vv0] {
    border-color: var(--jade-bright);
    color: var(--jade-bright);
}

@media (max-width: 900px) {
    .pt-combat-grid[b-va9t2h1vv0] { grid-template-columns: 1fr; }
    .pt-combat-head[b-va9t2h1vv0] { align-items: stretch; flex-direction: column; }
    .pt-combat-actions[b-va9t2h1vv0] { justify-content: flex-start; }
}
/* /Components/Play/PlayTools.razor.rz.scp.css */
.ptools[b-fl8ozc606c] { display: flex; justify-content: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ptool[b-fl8ozc606c] {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--stage-raised); border: 1px solid var(--line); border-radius: 9px;
    padding: 8px 14px; font: 600 11.5px/1 var(--font-ui); color: var(--ink-2); cursor: pointer;
}
.ptool:hover[b-fl8ozc606c] { border-color: var(--ink-3); color: var(--ink); }
.ptool--fam[b-fl8ozc606c] { color: var(--gold); border-color: rgba(217, 189, 113, 0.3); }
.ptool-ic[b-fl8ozc606c] { font-size: 13px; }
/* /Components/Play/SeatZones.razor.rz.scp.css */
.seatzones[b-hnuki2w4mr] { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.sz-chip[b-hnuki2w4mr] {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--stage-raised); border: 1px solid var(--line); border-radius: 7px;
    padding: 4px 9px; font: 500 11px/1 var(--font-ui); color: var(--ink-2);
}
.sz-chip b[b-hnuki2w4mr] { color: var(--ink); font-weight: 700; }
.sz-k[b-hnuki2w4mr] { font: 700 8.5px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.sz-chip--btn[b-hnuki2w4mr] { cursor: pointer; }
.sz-chip--btn:hover[b-hnuki2w4mr] { border-color: var(--ink-3); color: var(--ink); }
.sz-cmd.is-present[b-hnuki2w4mr] { border-color: rgba(217, 189, 113, 0.45); }
.sz-cmd.is-playable[b-hnuki2w4mr] { box-shadow: inset 0 0 0 1px rgba(217, 189, 113, 0.28); }
.sz-cmd.is-present .sz-cmd-mark[b-hnuki2w4mr] { color: var(--gold); }
.sz-cmd.has-art[b-hnuki2w4mr] { background-size: cover; background-position: center 22%; background-repeat: no-repeat; border-color: var(--gold); }
.sz-cmd.has-art .sz-k[b-hnuki2w4mr] { color: #f3ead2; }
.sz-cmd.has-art .sz-cmd-mark[b-hnuki2w4mr] { color: var(--gold); }
.sz-cmd.is-out[b-hnuki2w4mr] { opacity: 0.6; }
.sz-cmd.is-out .sz-cmd-mark[b-hnuki2w4mr] { color: var(--ink-3); }
.sz-cmd small[b-hnuki2w4mr] { color: var(--ink-3); }

/* Segmented command control: COMMAND (info) | cast (icon only), visually flush */
.sz-cmd-seg[b-hnuki2w4mr] { display: inline-flex; align-items: stretch; border-radius: 7px; }
/* When the cast segment is present, the two buttons share one rounded container. */
.sz-cmd-seg.has-cast .sz-cmd-seg__main[b-hnuki2w4mr] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.sz-cmd-seg.has-cast .sz-cmd-seg__cast[b-hnuki2w4mr] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}
.sz-cmd-seg__cast[b-hnuki2w4mr] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(217, 189, 113, 0.14);
    border: 1px solid rgba(217, 189, 113, 0.5);
    border-radius: 7px;
    color: var(--gold);
    cursor: pointer;
    font: 700 12px/1 var(--font-ui);
    padding: 0 9px;
    white-space: nowrap;
}
.sz-cmd-seg__cast .sz-cmd-cast-glyph[b-hnuki2w4mr] { line-height: 1; }
.sz-cmd-seg__cast:hover:not(:disabled)[b-hnuki2w4mr] { border-color: var(--gold); background: rgba(217, 189, 113, 0.22); color: var(--ink); }
.sz-cmd-seg__cast:disabled[b-hnuki2w4mr] { cursor: default; opacity: 0.55; }
.seatzones--compact .sz-chip[b-hnuki2w4mr] { padding: 3px 7px; font-size: 10px; }
.seatzones--compact .sz-k[b-hnuki2w4mr] { font-size: 7.5px; }
.seatzones--compact .sz-cmd-seg__cast[b-hnuki2w4mr] { padding: 0 7px; font-size: 11px; }
/* /Components/Play/SparkModal.razor.rz.scp.css */
.spk-backdrop[b-zm189okk8i] { position: fixed; inset: 0; background: rgba(5, 7, 6, 0.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.spk-modal[b-zm189okk8i] { position: relative; width: min(92vw, 460px); background: var(--stage); border: 1px solid var(--gold); border-radius: 14px; padding: 20px; }
.spk-close[b-zm189okk8i] { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--ink-3); font-size: 15px; cursor: pointer; }
.spk-head[b-zm189okk8i] { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.spk-glyph[b-zm189okk8i] { color: var(--gold); font-size: 20px; }
.spk-eyebrow[b-zm189okk8i] { font: 700 10px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.spk-title[b-zm189okk8i] { font-size: 1.4rem; margin: 2px 0 0; }
.spk-advisor[b-zm189okk8i] { background: rgba(103, 181, 141, 0.08); border: 1px solid rgba(103, 181, 141, 0.28); border-radius: 10px; padding: 12px; margin-bottom: 14px; }
.spk-advisor-label[b-zm189okk8i] { font: 700 9px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--jade); }
.spk-advisor p[b-zm189okk8i] { margin: 6px 0 0; font: 400 0.95rem/1.5 var(--font-ui); color: var(--ink); }
.spk-soon-label[b-zm189okk8i] { font: 700 10px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.spk-soon[b-zm189okk8i] { margin: 0; padding-left: 18px; color: var(--ink-2); font: 400 0.9rem/1.7 var(--font-ui); }
.spk-foot[b-zm189okk8i] { display: flex; justify-content: flex-end; margin-top: 16px; }
.spk-btn[b-zm189okk8i] { background: var(--gold); color: #1a1407; border: 0; border-radius: 9px; padding: 9px 18px; font: 600 0.9rem/1 var(--font-ui); cursor: pointer; }
/* /Components/Play/SpeedModal.razor.rz.scp.css */
.spd-backdrop[b-8drhl8nban] { position: fixed; inset: 0; background: rgba(5, 7, 6, 0.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.spd-modal[b-8drhl8nban] { position: relative; width: min(92vw, 400px); background: var(--stage); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.spd-close[b-8drhl8nban] { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--ink-3); font-size: 15px; cursor: pointer; }
.spd-title[b-8drhl8nban] { font-size: 1.25rem; margin: 0 0 4px; }
.spd-lede[b-8drhl8nban] { color: var(--ink-2); font: 400 0.88rem/1.5 var(--font-ui); margin: 0 0 14px; }
.spd-options[b-8drhl8nban] { display: flex; flex-direction: column; gap: 8px; }
.spd-opt[b-8drhl8nban] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--stage-raised); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: left; color: var(--ink); }
.spd-opt.is-active[b-8drhl8nban] { border-color: var(--jade); }
.spd-opt strong[b-8drhl8nban] { font: 600 0.95rem/1 var(--font-ui); }
.spd-opt span[b-8drhl8nban] { font: 400 0.8rem/1.3 var(--font-ui); color: var(--ink-3); }
/* /Components/Play/TurnRibbon.razor.rz.scp.css */
.ribbon[b-9bbgd3yr03] {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 18px; margin: 10px 0;
    border: 1px solid var(--line); border-radius: 11px;
    border-left-width: 4px;
}
.ribbon--yours[b-9bbgd3yr03] {
    background: linear-gradient(90deg, rgba(103, 181, 141, 0.18), transparent);
    border-color: var(--jade);
    border-left-color: var(--jade);
}
.ribbon--theirs[b-9bbgd3yr03] {
    background: linear-gradient(90deg, rgba(217, 189, 113, 0.14), transparent);
    border-color: rgba(217, 189, 113, 0.4);
    border-left-color: var(--gold);
}
.ribbon-whose[b-9bbgd3yr03] {
    font: 700 1.05rem/1 var(--font-disp);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.ribbon--yours .ribbon-whose[b-9bbgd3yr03] { color: var(--jade-bright); }
.ribbon--theirs .ribbon-whose[b-9bbgd3yr03] { color: var(--gold); }
.ribbon-sub[b-9bbgd3yr03] { font: 500 12px/1 var(--font-ui); color: var(--ink-2); }
.ribbon-phases[b-9bbgd3yr03] { display: flex; gap: 5px; }
.ribbon-pip[b-9bbgd3yr03] { font: 500 10px/1 var(--font-ui); color: var(--ink-3); padding: 4px 9px; border: 1px solid var(--line); border-radius: 12px; }
.ribbon-pip--on[b-9bbgd3yr03] { color: #06150E; background: var(--jade); border-color: var(--jade); font-weight: 600; }
.ribbon-stack[b-9bbgd3yr03] { margin-left: auto; font: 500 11px/1 var(--font-ui); color: var(--ink-3); }
.ribbon-stack--active[b-9bbgd3yr03] { color: var(--gold); }
/* /Components/PlayerDecision.razor.rz.scp.css */
.player-decision-backdrop[b-t66b94m3en] {
    align-items: center;
    background: rgba(4, 9, 7, .74);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 30;
}

.player-decision[b-t66b94m3en] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr);
    max-height: calc(100vh - 48px);
    max-width: min(980px, calc(100vw - 48px));
    overflow: auto;
    padding: 18px;
    width: 100%;
}

.player-decision-card[b-t66b94m3en] {
    align-items: center;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    min-height: 520px;
    padding: 14px;
}

.player-decision-card img[b-t66b94m3en] {
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .38);
    max-height: min(70vh, 640px);
    max-width: 100%;
}

.player-decision-card-fallback[b-t66b94m3en] {
    aspect-ratio: 5 / 7;
    background: #E8DFC8;
    border: 10px solid #1D1A15;
    border-radius: 18px;
    color: #14120F;
    display: grid;
    font-family: var(--font-ui);
    gap: 12px;
    grid-template-rows: auto auto 1fr auto;
    max-width: 360px;
    padding: 18px;
    width: 100%;
}

.player-decision-card-fallback header[b-t66b94m3en] {
    align-items: start;
    border-bottom: 2px solid rgba(20, 18, 15, .22);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-bottom: 8px;
}

.player-decision-card-fallback strong[b-t66b94m3en] {
    font-size: 1.15rem;
    line-height: 1.2;
}

.player-decision-card-fallback p[b-t66b94m3en],
.player-decision-card-fallback div[b-t66b94m3en],
.player-decision-card-fallback footer[b-t66b94m3en] {
    margin: 0;
}

.player-decision-card-fallback p[b-t66b94m3en] {
    border-bottom: 1px solid rgba(20, 18, 15, .18);
    font-weight: 800;
    padding-bottom: 8px;
}

.player-decision-card-fallback div[b-t66b94m3en] {
    font-size: .98rem;
    line-height: 1.45;
    white-space: pre-line;
}

.player-decision-card-fallback footer[b-t66b94m3en] {
    justify-self: end;
    border: 2px solid rgba(20, 18, 15, .42);
    border-radius: 6px;
    font-weight: 900;
    padding: 4px 8px;
}

.player-decision-body[b-t66b94m3en] {
    display: grid;
    gap: 18px;
    grid-template-rows: auto auto minmax(130px, 1fr);
    min-width: 0;
}

.player-decision-copy[b-t66b94m3en] {
    display: grid;
    gap: 8px;
}

.player-decision-copy span[b-t66b94m3en],
.player-decision-insights > span[b-t66b94m3en] {
    color: var(--jade-bright);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.player-decision-copy h2[b-t66b94m3en] {
    color: var(--ink);
    font-family: var(--font-disp);
    font-size: 1.8rem;
    line-height: 1.1;
    margin: 0;
    overflow-wrap: anywhere;
}

.player-decision-copy p[b-t66b94m3en] {
    color: var(--ink-2);
    line-height: 1.5;
    margin: 0;
}

.player-decision-choices[b-t66b94m3en] {
    display: grid;
    gap: 10px;
}

.player-decision-choice-heading[b-t66b94m3en] {
    color: var(--jade-bright);
    font: 900 .72rem/1 var(--font-ui);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.player-decision-choice[b-t66b94m3en] {
    appearance: none;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    display: grid;
    font-family: var(--font-ui);
    gap: 5px;
    padding: 12px;
    text-align: left;
}

.player-decision-sectioned-choice[b-t66b94m3en] {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(159, 224, 189, .28);
    border-radius: 8px;
    display: flex;
    min-height: 58px;
    min-width: 0;
    overflow: hidden;
}

.player-decision-section-label[b-t66b94m3en] {
    align-items: center;
    background: rgba(103, 181, 141, .16);
    border-right: 1px solid rgba(159, 224, 189, .28);
    color: var(--jade-bright);
    display: flex;
    flex: 0 0 72px;
    font: 900 .72rem/1 var(--font-ui);
    justify-content: center;
    letter-spacing: .04em;
    padding: 8px;
    text-transform: uppercase;
}

.player-decision-choice.is-sectioned[b-t66b94m3en] {
    --player-choice-bg: linear-gradient(135deg, rgba(38, 53, 44, .92), rgba(13, 19, 16, .96));
    background-image:
        linear-gradient(180deg, rgba(4, 9, 7, .18), rgba(4, 9, 7, .82)),
        var(--player-choice-bg);
    background-position: center 18%;
    background-size: cover;
    border: 0;
    border-radius: 0;
    border-right: 1px solid rgba(255, 255, 255, .14);
    flex: 1 1 0;
    gap: 3px;
    justify-content: center;
    min-height: 58px;
    min-width: 0;
    padding: 7px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

.player-decision-choice.is-sectioned:last-child[b-t66b94m3en] {
    border-right: 0;
}

.player-decision-choice.is-sectioned.is-primary[b-t66b94m3en] {
    box-shadow: inset 0 0 0 2px rgba(159, 224, 189, .72);
}

.player-decision-choice.is-sectioned strong[b-t66b94m3en] {
    font-size: clamp(.68rem, 1.25vw, .82rem);
    line-height: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-decision-choice.is-sectioned span[b-t66b94m3en] {
    color: rgba(247, 250, 244, .9);
    display: -webkit-box;
    font-size: clamp(.52rem, 1.05vw, .62rem);
    font-weight: 850;
    line-height: 1.12;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: normal;
}

.player-decision-choice.is-primary[b-t66b94m3en] {
    background: rgba(103, 181, 141, .18);
    border-color: rgba(159, 224, 189, .58);
}

.player-decision-choice.is-sectioned.is-primary[b-t66b94m3en] {
    background-image:
        linear-gradient(180deg, rgba(4, 9, 7, .12), rgba(4, 9, 7, .76)),
        var(--player-choice-bg);
}

.player-decision-choice:not(:disabled):hover[b-t66b94m3en] {
    border-color: var(--jade-bright);
}

.player-decision-choice:disabled[b-t66b94m3en] {
    cursor: wait;
    opacity: .6;
}

.player-decision-choice strong[b-t66b94m3en] {
    font-size: .96rem;
}

.player-decision-choice span[b-t66b94m3en] {
    color: var(--ink-2);
    font-size: .82rem;
    line-height: 1.35;
}

.player-decision-insights[b-t66b94m3en] {
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    min-height: 130px;
    padding: 12px;
}

@media (max-width: 820px) {
    .player-decision[b-t66b94m3en] {
        grid-template-columns: 1fr;
    }

    .player-decision-card[b-t66b94m3en] {
        min-height: 360px;
    }

    .player-decision-sectioned-choice[b-t66b94m3en] {
        overflow-x: auto;
    }

    .player-decision-choice.is-sectioned[b-t66b94m3en] {
        flex-basis: 112px;
    }
}
/* /Components/ProgressSpine.razor.rz.scp.css */
.progress[b-ydes26c3ve] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 11px 18px;
    background: #0b110e;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}

.progress[b-ydes26c3ve]::-webkit-scrollbar {
    display: none;
}

.pstep[b-ydes26c3ve] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-3);
    font: 700 11px/1 var(--font-ui);
    white-space: nowrap;
}

.dot[b-ydes26c3ve] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(159, 224, 189, 0.45);
    display: grid;
    place-items: center;
    font: 800 10px/1 var(--font-ui);
    color: var(--jade-bright);
    flex-shrink: 0;
}

/* Done state */
.pstep.done[b-ydes26c3ve] {
    color: var(--ink-2);
}

.pstep.done .dot[b-ydes26c3ve] {
    background: var(--jade);
    border-color: var(--jade);
    color: #06120c;
}

/* Active state */
.pstep.on[b-ydes26c3ve] {
    color: var(--ink);
}

.pstep.on .dot[b-ydes26c3ve] {
    background: transparent;
    border-color: var(--jade-bright);
    color: var(--jade-bright);
    box-shadow: 0 0 0 4px rgba(103, 181, 141, 0.2);
}

/* Available: button reset */
.step-btn[b-ydes26c3ve] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}

.step-btn:hover .dot[b-ydes26c3ve] {
    background: rgba(159, 224, 189, 0.12);
    border-color: var(--jade-bright);
    color: var(--jade-bright);
}

.pstep.done .step-btn:hover .dot[b-ydes26c3ve] {
    background: var(--jade-bright);
    border-color: var(--jade-bright);
    color: #06120c;
}

.step-btn:hover .step-title[b-ydes26c3ve] {
    color: var(--ink-2);
}

.step-btn:focus-visible[b-ydes26c3ve] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Connector */
.pconn[b-ydes26c3ve] {
    flex: 1;
    height: 2px;
    background: #1c241f;
    margin: 0 10px;
    min-width: 14px;
}

.pconn.done[b-ydes26c3ve] {
    background: var(--jade-deep);
}
/* /Components/RoleMeter.razor.rz.scp.css */
.role-meter[b-ukh52e5tu6] {
    width: 100%;
}

.mrow[b-ukh52e5tu6] {
    display: flex;
    justify-content: space-between;
    font: 700 10px/1 var(--font-ui);
    color: var(--ink-2);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.role-label[b-ukh52e5tu6] {
    color: var(--ink-2);
}

.role-count[b-ukh52e5tu6] {
    color: var(--ink-2);
}

.track[b-ukh52e5tu6] {
    height: 7px;
    background: #1d2420;
    border-radius: 99px;
    overflow: hidden;
}

.fill[b-ukh52e5tu6] {
    height: 100%;
    border-radius: 99px;
    transition: width 0.3s ease;
}
/* /Components/RoleTag.razor.rz.scp.css */
.rtag[b-jpsbi6j9e6] {
    font: 700 8.5px/1 var(--font-ui);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--jade-bright);
    background: rgba(103, 181, 141, 0.1);
    border: 1px solid rgba(103, 181, 141, 0.2);
    padding: 4px 6px;
    border-radius: 5px;
    display: inline-block;
    white-space: nowrap;
}
/* /Components/ScoreChip.razor.rz.scp.css */
.scorechip[b-lng9uozuqr] {
    display: inline-grid;
    place-items: center;
    min-width: 46px;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    font: 800 14px/1 var(--font-ui);
}

.s-elite[b-lng9uozuqr] {
    background: var(--jade);
    color: #06120c;
}

.s-good[b-lng9uozuqr] {
    background: #2f5f48;
    color: #dff4e8;
}

.s-ok[b-lng9uozuqr] {
    background: #2a2f33;
    color: #cdd6cf;
}

.s-low[b-lng9uozuqr] {
    background: #2a2226;
    color: #caa9ad;
}
/* /Components/ToastHost.razor.rz.scp.css */
.toast-region[b-lpn0a0d0db] {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1400;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.toast-message[b-lpn0a0d0db] {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 12px 12px 12px 14px;
    border: 1px solid rgba(159, 224, 189, 0.3);
    border-radius: 8px;
    background: rgba(18, 23, 20, 0.96);
    color: var(--ink);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    font: 800 12px/1.35 var(--font-ui);
}

.toast-message.is-success[b-lpn0a0d0db] {
    border-color: rgba(103, 181, 141, 0.46);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), inset 3px 0 0 var(--jade);
}

.toast-message button[b-lpn0a0d0db] {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--ink-2);
    cursor: pointer;
    font: 900 12px/1 var(--font-ui);
}

.toast-message button:hover[b-lpn0a0d0db],
.toast-message button:focus-visible[b-lpn0a0d0db] {
    color: var(--ink);
    border-color: rgba(103, 181, 141, 0.36);
    outline: none;
}

.toast-message > span[b-lpn0a0d0db] {
    flex: 1 1 auto;
}

/* Action button (e.g. Undo) — wider than the square dismiss button */
.toast-message button.toast-action[b-lpn0a0d0db] {
    width: auto;
    height: 26px;
    padding: 0 11px;
    color: var(--jade-bright);
    border-color: rgba(103, 181, 141, 0.4);
    white-space: nowrap;
    font-weight: 800;
}

.toast-message button.toast-action:hover[b-lpn0a0d0db] {
    background: rgba(103, 181, 141, 0.16);
    color: var(--jade-bright);
}

@media (max-width: 520px) {
    .toast-region[b-lpn0a0d0db] {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ── App bar ─────────────────────────────────────────────────── */

.app-bar[b-wtcskxa0jj] {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 54px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: linear-gradient(180deg, #0c1310, #0a0d0b);
    border-bottom: 1px solid var(--line);
}

/* ── Brand (mark + wordmark) ─────────────────────────────────── */

.brand[b-wtcskxa0jj] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-right: 14px;
    border-right: 1px solid var(--line);
    flex-shrink: 0;
}

.brand-link[b-wtcskxa0jj] {
    color: var(--ink);
    text-decoration: none;
    transition: opacity 0.15s;
}

.brand-link:hover[b-wtcskxa0jj] {
    opacity: 0.86;
    text-decoration: none;
}

.brand img[b-wtcskxa0jj] {
    width: 28px;
    height: 28px;
    display: block;
}

.brand-copy[b-wtcskxa0jj] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.wordmark[b-wtcskxa0jj] {
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;
}

.brand-version[b-wtcskxa0jj] {
    color: var(--ink-3);
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 0;
    white-space: nowrap;
}

/* ── Primary nav links ───────────────────────────────────────── */

.primary-nav[b-wtcskxa0jj] {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.primary-nav[b-wtcskxa0jj]  a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: var(--ink-2);
    padding: 8px 11px;
    border-radius: 7px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.primary-nav[b-wtcskxa0jj]  a:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.07);
}

/* Active / current page — jade pill */
.primary-nav[b-wtcskxa0jj]  a.active {
    color: var(--ink);
    background: rgba(103, 181, 141, 0.14);
    box-shadow: inset 0 0 0 1px rgba(103, 181, 141, 0.26);
}

.primary-nav[b-wtcskxa0jj]  .nav-link-label {
    line-height: 1;
}

/* ── Spacer pushes account controls to the right ────────────── */

.nav-spacer[b-wtcskxa0jj] {
    flex: 1;
    min-width: 12px;
}

/* ── Active deck peek cards ─────────────────────────────────── */

.header-deck-peek[b-wtcskxa0jj] {
    position: relative;
    align-self: stretch;
    flex: 0 0 324px;
    height: 54px;
    margin-right: 14px;
    overflow: hidden;
    pointer-events: none;
}

.header-peek-card[b-wtcskxa0jj] {
    position: absolute;
    bottom: -99px;
    display: block;
    width: 112px;
    height: 153px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    border: 1px solid rgba(239, 246, 234, 0.72);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.58);
    background-image:
        linear-gradient(180deg, rgba(239, 246, 234, 0.13), transparent 24%),
        radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.14), transparent 24%),
        var(--peek-image, var(--peek-gradient));
    background-size: cover;
    background-position: top center;
    transition: filter 0.15s, box-shadow 0.15s;
}

.header-peek-card:hover[b-wtcskxa0jj],
.header-peek-card:focus-visible[b-wtcskxa0jj] {
    filter: brightness(1.08);
    text-decoration: none;
    outline: none;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.58),
        0 0 0 2px rgba(159, 224, 189, 0.42);
}

.header-peek-card[b-wtcskxa0jj]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent 34%),
        linear-gradient(180deg, transparent 36%, rgba(0, 0, 0, 0.64));
}

.header-peek-card:nth-child(1)[b-wtcskxa0jj] {
    left: 0;
    transform: rotate(-5deg);
}

.header-peek-card:nth-child(2)[b-wtcskxa0jj] {
    left: 82px;
    bottom: -96px;
    transform: rotate(1deg);
}

.header-peek-card:nth-child(3)[b-wtcskxa0jj] {
    left: 164px;
    transform: rotate(6deg);
}

.header-peek-badge[b-wtcskxa0jj] {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 18px;
    padding: 0 7px 1px;
    border-radius: 999px;
    border: 1px solid rgba(5, 8, 6, 0.64);
    background: rgba(239, 246, 234, 0.94);
    color: #07110c;
    font: 950 10px/1 var(--font-ui);
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.header-peek-icon[b-wtcskxa0jj] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── App version update prompt ───────────────────────────────── */

.app-update-prompt[b-wtcskxa0jj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 34px;
    margin-right: 10px;
    padding: 4px 5px 4px 10px;
    border: 1px solid rgba(228, 195, 92, 0.34);
    border-radius: 8px;
    background: rgba(228, 195, 92, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-update-copy[b-wtcskxa0jj] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.app-update-title[b-wtcskxa0jj] {
    color: var(--ink);
    font: 900 10px/1 var(--font-ui);
    white-space: nowrap;
}

.app-update-version[b-wtcskxa0jj] {
    color: var(--gold);
    font: 800 9px/1 var(--font-ui);
    white-space: nowrap;
}

.app-update-button[b-wtcskxa0jj] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(228, 195, 92, 0.4);
    border-radius: 6px;
    background: rgba(228, 195, 92, 0.18);
    color: var(--ink);
    cursor: pointer;
    font: 900 10px/1 var(--font-ui);
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.app-update-button:hover[b-wtcskxa0jj],
.app-update-button:focus-visible[b-wtcskxa0jj] {
    color: #06120c;
    background: var(--gold);
    border-color: var(--gold);
    outline: none;
}

/* ── Auth controls ─────────────────────────────────────────────── */

.auth-menu[b-wtcskxa0jj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
    min-width: 0;
    position: relative;
}

.auth-loading[b-wtcskxa0jj] {
    color: var(--ink-3);
    font: 700 11px/1 var(--font-ui);
    white-space: nowrap;
}

.account-shell[b-wtcskxa0jj] {
    position: relative;
    min-width: 0;
}

.account-trigger[b-wtcskxa0jj] {
    appearance: none;
    border: 1px solid rgba(103, 181, 141, 0.2);
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    min-width: 0;
    max-width: min(320px, 34vw);
    color: var(--ink-2);
    text-decoration: none;
    border-radius: 8px;
    padding: 4px 9px 4px 4px;
    transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.account-trigger:hover[b-wtcskxa0jj],
.account-trigger:focus-visible[b-wtcskxa0jj],
.account-trigger[aria-expanded="true"][b-wtcskxa0jj] {
    color: var(--ink);
    background: rgba(103, 181, 141, 0.1);
    border-color: rgba(103, 181, 141, 0.36);
    outline: none;
}

.account-trigger:focus-visible[b-wtcskxa0jj] {
    box-shadow: 0 0 0 3px rgba(159, 224, 189, 0.18);
}

.auth-avatar[b-wtcskxa0jj] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(103, 181, 141, 0.16);
    color: var(--jade-bright);
    border: 1px solid rgba(103, 181, 141, 0.28);
    font: 800 10px/1 var(--font-ui);
}

.account-labels[b-wtcskxa0jj] {
    display: grid;
    gap: 3px;
    min-width: 0;
    text-align: left;
}

.auth-name[b-wtcskxa0jj] {
    display: block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 800 12px/1 var(--font-ui);
}

.account-role[b-wtcskxa0jj] {
    color: var(--ink-3);
    font: 800 9px/1 var(--font-ui);
    text-transform: uppercase;
}

.account-chevron[b-wtcskxa0jj] {
    color: var(--ink-3);
    flex: 0 0 auto;
    font: 900 11px/1 var(--font-ui);
    transform: translateY(-1px);
}

.account-dropdown[b-wtcskxa0jj] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 300;
    width: 196px;
    display: grid;
    gap: 3px;
    padding: 6px;
    border: 1px solid rgba(103, 181, 141, 0.24);
    border-radius: 8px;
    background: rgba(18, 23, 20, 0.98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48);
}

.account-dropdown a[b-wtcskxa0jj] {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 9px 10px;
    border-radius: 6px;
    color: var(--ink-2);
    font: 800 12px/1 var(--font-ui);
    text-decoration: none;
}

.account-dropdown a:hover[b-wtcskxa0jj],
.account-dropdown a:focus-visible[b-wtcskxa0jj] {
    color: var(--ink);
    background: rgba(103, 181, 141, 0.11);
    outline: none;
}

.auth-action[b-wtcskxa0jj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    color: var(--ink-2);
    font: 800 11px/1 var(--font-ui);
    padding: 8px 11px;
    border-radius: 7px;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.auth-action:hover[b-wtcskxa0jj] {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.07);
    text-decoration: none;
}

.auth-action.primary[b-wtcskxa0jj] {
    color: #06120c;
    background: var(--jade);
    border-color: var(--jade);
}

.auth-action.primary:hover[b-wtcskxa0jj] {
    filter: brightness(1.06);
}

/* ── Page content ────────────────────────────────────────────── */

main[b-wtcskxa0jj] {
    min-height: calc(100vh - 54px);
    min-width: 0;
}

@media (max-width: 1120px) {
    .header-deck-peek[b-wtcskxa0jj] {
        display: none;
    }
}

@media (max-width: 760px) {
    .app-bar[b-wtcskxa0jj] {
        gap: 6px;
        padding: 0 10px;
    }

    .brand[b-wtcskxa0jj] {
        padding-right: 8px;
    }

    .brand-copy[b-wtcskxa0jj],
    .account-labels[b-wtcskxa0jj] {
        display: none;
    }

    .primary-nav[b-wtcskxa0jj]  a,
    .auth-action[b-wtcskxa0jj] {
        padding-inline: 8px;
    }

    .header-deck-peek[b-wtcskxa0jj] {
        display: none;
    }

    .app-update-prompt[b-wtcskxa0jj] {
        display: none;
    }

    .account-trigger[b-wtcskxa0jj] {
        gap: 5px;
        padding-right: 7px;
        max-width: none;
    }
}

@media (max-width: 520px) {
    .app-bar[b-wtcskxa0jj] {
        gap: 5px;
    }

    .brand[b-wtcskxa0jj] {
        border-right: 0;
        padding-right: 2px;
    }

    .primary-nav[b-wtcskxa0jj]  a {
        padding-inline: 7px;
        gap: 5px;
    }

    .auth-menu[b-wtcskxa0jj]  .signin-trigger {
        min-height: 30px;
        padding-inline: 9px;
    }

    .account-chevron[b-wtcskxa0jj] {
        display: none;
    }

    .account-trigger[b-wtcskxa0jj] {
        width: 34px;
        height: 34px;
        min-height: 34px;
        justify-content: center;
        padding: 3px;
    }

    .account-dropdown[b-wtcskxa0jj] {
        right: -4px;
    }
}
/* /Pages/ApplyWindowSmoke.razor.rz.scp.css */
.smoke-page[b-1p9a8h9ju1] {
    max-width: 880px;
    position: relative;
    z-index: 1;
}

.smoke-panel[b-1p9a8h9ju1] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 22px;
    margin-bottom: 16px;
}

.smoke-panel-head[b-1p9a8h9ju1] {
    margin-bottom: 18px;
}

.smoke-panel-title[b-1p9a8h9ju1] {
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: 18px;
    margin: 0 0 5px;
    color: var(--ink);
}

.smoke-panel-desc[b-1p9a8h9ju1],
.smoke-note[b-1p9a8h9ju1] {
    color: var(--ink-2);
    font: 500 12px/1.5 var(--font-ui);
    margin: 0;
}

.smoke-toolbar[b-1p9a8h9ju1] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.smoke-form-grid[b-1p9a8h9ju1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.smoke-field[b-1p9a8h9ju1] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.smoke-field-wide[b-1p9a8h9ju1] {
    margin-top: 12px;
}

.smoke-field span[b-1p9a8h9ju1] {
    font: 800 10px/1 var(--font-ui);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.smoke-input[b-1p9a8h9ju1],
.smoke-textarea[b-1p9a8h9ju1] {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf-2) 72%, transparent);
    color: var(--ink);
    font: 600 13px/1.4 var(--font-ui);
    padding: 10px 12px;
    outline: none;
}

.smoke-textarea[b-1p9a8h9ju1] {
    min-height: 74px;
    resize: vertical;
}

.smoke-input:focus-visible[b-1p9a8h9ju1],
.smoke-textarea:focus-visible[b-1p9a8h9ju1] {
    border-color: color-mix(in srgb, var(--jade-bright) 74%, var(--line));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jade-bright) 18%, transparent);
}

.smoke-run-grid[b-1p9a8h9ju1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.smoke-run-button[b-1p9a8h9ju1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 86px;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf-2) 70%, transparent);
    color: var(--ink);
    padding: 14px;
    text-align: left;
    cursor: pointer;
}

.smoke-run-button span[b-1p9a8h9ju1] {
    font: 800 11px/1 var(--font-ui);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.smoke-run-button strong[b-1p9a8h9ju1] {
    font: 800 19px/1.1 var(--font-disp);
    color: var(--jade-bright);
}

.smoke-run-button-danger strong[b-1p9a8h9ju1] {
    color: #ef7676;
}

.smoke-run-button:hover:not(:disabled)[b-1p9a8h9ju1],
.smoke-run-button:focus-visible[b-1p9a8h9ju1] {
    border-color: color-mix(in srgb, var(--jade-bright) 64%, var(--line));
    transform: translateY(-1px);
}

.smoke-run-button:disabled[b-1p9a8h9ju1] {
    opacity: 0.58;
    cursor: not-allowed;
}

.smoke-check-list[b-1p9a8h9ju1] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    overflow: hidden;
}

.smoke-check[b-1p9a8h9ju1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surf-2) 50%, transparent);
}

.smoke-check:last-child[b-1p9a8h9ju1] {
    border-bottom: 0;
}

.smoke-check span[b-1p9a8h9ju1] {
    font: 800 12px/1.25 var(--font-ui);
    color: var(--ink);
    overflow-wrap: anywhere;
}

.smoke-check strong[b-1p9a8h9ju1] {
    font: 800 10px/1 var(--font-ui);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.smoke-check p[b-1p9a8h9ju1] {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--ink-2);
    font: 500 11px/1.45 var(--font-ui);
    overflow-wrap: anywhere;
}

.smoke-check-pass strong[b-1p9a8h9ju1] {
    color: var(--jade-bright);
}

.smoke-check-fail strong[b-1p9a8h9ju1] {
    color: #ef7676;
}

.smoke-json[b-1p9a8h9ju1] {
    max-height: 460px;
    overflow: auto;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf-2) 82%, black 6%);
    color: var(--ink);
    font: 600 11px/1.5 ui-monospace, 'SF Mono', monospace;
    padding: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .smoke-form-grid[b-1p9a8h9ju1],
    .smoke-run-grid[b-1p9a8h9ju1] {
        grid-template-columns: 1fr;
    }

    .smoke-toolbar .btn[b-1p9a8h9ju1] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/AutoPromotionOperator.razor.rz.scp.css */
.operator-page[b-5suxb51brx] {
    max-width: 980px;
    position: relative;
    z-index: 1;
}

.operator-panel[b-5suxb51brx] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 22px;
    margin-bottom: 16px;
}

.operator-panel-head[b-5suxb51brx] {
    margin-bottom: 18px;
}

.operator-panel-title[b-5suxb51brx] {
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: 18px;
    margin: 0 0 5px;
    color: var(--ink);
}

.operator-panel-desc[b-5suxb51brx],
.operator-note[b-5suxb51brx] {
    color: var(--ink-2);
    font: 500 12px/1.5 var(--font-ui);
    margin: 0;
}

.operator-toolbar[b-5suxb51brx] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.operator-form-grid[b-5suxb51brx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.operator-form-grid-spaced[b-5suxb51brx] {
    margin-top: 12px;
}

.operator-field[b-5suxb51brx] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.operator-field-wide[b-5suxb51brx] {
    grid-column: 1 / -1;
}

.operator-field span[b-5suxb51brx],
.operator-check-field span[b-5suxb51brx] {
    font: 800 10px/1 var(--font-ui);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.operator-input[b-5suxb51brx],
.operator-textarea[b-5suxb51brx] {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf-2) 72%, transparent);
    color: var(--ink);
    font: 600 13px/1.4 var(--font-ui);
    padding: 10px 12px;
    outline: none;
}

.operator-textarea[b-5suxb51brx] {
    min-height: 78px;
    resize: vertical;
}

.operator-textarea-short[b-5suxb51brx] {
    min-height: 92px;
}

.operator-input:focus-visible[b-5suxb51brx],
.operator-textarea:focus-visible[b-5suxb51brx] {
    border-color: color-mix(in srgb, var(--jade-bright) 74%, var(--line));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jade-bright) 18%, transparent);
}

.operator-check-field[b-5suxb51brx] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf-2) 58%, transparent);
    padding: 10px 12px;
}

.operator-check-field input[b-5suxb51brx] {
    width: 16px;
    height: 16px;
    accent-color: var(--jade-bright);
}

.operator-run-grid[b-5suxb51brx] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.operator-run-button[b-5suxb51brx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 86px;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf-2) 70%, transparent);
    color: var(--ink);
    padding: 14px;
    text-align: left;
    cursor: pointer;
}

.operator-run-button span[b-5suxb51brx] {
    font: 800 11px/1 var(--font-ui);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.operator-run-button strong[b-5suxb51brx] {
    font: 800 19px/1.1 var(--font-disp);
    color: var(--jade-bright);
    overflow-wrap: anywhere;
}

.operator-run-button:hover:not(:disabled)[b-5suxb51brx],
.operator-run-button:focus-visible[b-5suxb51brx] {
    border-color: color-mix(in srgb, var(--jade-bright) 64%, var(--line));
    transform: translateY(-1px);
}

.operator-run-button:disabled[b-5suxb51brx] {
    opacity: 0.58;
    cursor: not-allowed;
}

.operator-summary[b-5suxb51brx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    overflow: hidden;
}

.operator-summary-item[b-5suxb51brx] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 14px;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--surf-2) 54%, transparent);
}

.operator-summary-item:last-child[b-5suxb51brx] {
    border-right: 0;
}

.operator-summary-item dt[b-5suxb51brx] {
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.operator-summary-item dd[b-5suxb51brx] {
    font: 800 20px/1 var(--font-disp);
    color: var(--jade-bright);
    margin: 0;
}

.operator-row-list[b-5suxb51brx] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    overflow: hidden;
}

.operator-row[b-5suxb51brx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surf-2) 50%, transparent);
}

.operator-row:last-child[b-5suxb51brx] {
    border-bottom: 0;
}

.operator-row-main[b-5suxb51brx],
.operator-row-status[b-5suxb51brx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.operator-row-status[b-5suxb51brx] {
    align-items: flex-end;
}

.operator-row-main strong[b-5suxb51brx],
.operator-row-status strong[b-5suxb51brx] {
    color: var(--ink);
    font: 800 12px/1.25 var(--font-ui);
    overflow-wrap: anywhere;
}

.operator-row-main span[b-5suxb51brx],
.operator-row-status span[b-5suxb51brx] {
    color: var(--ink-3);
    font: 700 10px/1.25 var(--font-ui);
    overflow-wrap: anywhere;
}

.operator-row p[b-5suxb51brx] {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--ink-2);
    font: 500 11px/1.45 var(--font-ui);
    overflow-wrap: anywhere;
}

.operator-row-pass .operator-row-status strong[b-5suxb51brx] {
    color: var(--jade-bright);
}

.operator-row-fail .operator-row-status strong[b-5suxb51brx] {
    color: #ef7676;
}

.operator-json[b-5suxb51brx] {
    max-height: 460px;
    overflow: auto;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf-2) 82%, black 6%);
    color: var(--ink);
    font: 600 11px/1.5 ui-monospace, 'SF Mono', monospace;
    padding: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 860px) {
    .operator-run-grid[b-5suxb51brx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operator-summary[b-5suxb51brx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operator-summary-item:nth-child(2)[b-5suxb51brx] {
        border-right: 0;
    }

    .operator-summary-item:nth-child(-n+2)[b-5suxb51brx] {
        border-bottom: 1px solid var(--line);
    }
}

@media (max-width: 640px) {
    .operator-form-grid[b-5suxb51brx],
    .operator-run-grid[b-5suxb51brx],
    .operator-summary[b-5suxb51brx] {
        grid-template-columns: 1fr;
    }

    .operator-toolbar .btn[b-5suxb51brx] {
        width: 100%;
        justify-content: center;
    }

    .operator-summary-item[b-5suxb51brx],
    .operator-summary-item:nth-child(2)[b-5suxb51brx] {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .operator-summary-item:last-child[b-5suxb51brx] {
        border-bottom: 0;
    }

    .operator-row[b-5suxb51brx] {
        grid-template-columns: 1fr;
    }

    .operator-row-status[b-5suxb51brx] {
        align-items: flex-start;
    }
}
/* /Pages/Bossfight.razor.rz.scp.css */
.bossfight-page[b-uuow7i05pn] {
    display: grid;
    gap: 16px;
    /* Positioned ancestor for the contained Stage ambient; z-index:0 keeps the
       grid (and the sticky action rail) layered above the absolute backdrop.
       No overflow is set here, so the sticky rail still scrolls with the page. */
    position: relative;
    z-index: 0;
}

/* Page content sits above the contained ambient (which is z-index:0/behind). */
.bossfight-page > :not(.stage-ambient)[b-uuow7i05pn] {
    position: relative;
    z-index: 1;
}

.bf-empty[b-uuow7i05pn],
.bf-muted[b-uuow7i05pn] {
    color: var(--ink-2);
    margin: 0;
}

.bf-header-meta p[b-uuow7i05pn] {
    color: var(--ink-2);
    margin: 0 0 8px;
}

.bf-header-actions[b-uuow7i05pn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.bf-section-head span[b-uuow7i05pn] {
    color: var(--jade-bright);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bf-panel[b-uuow7i05pn],
.bf-playmat[b-uuow7i05pn] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.bf-panel[b-uuow7i05pn] {
    padding: 14px;
}

.bf-shell[b-uuow7i05pn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.bf-actions-strip[b-uuow7i05pn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.bf-action-btn[b-uuow7i05pn] {
    background: var(--stage-raised);
    border: 1px solid var(--line);
    color: var(--ink);
    font: 600 12px/1 var(--font-ui);
    padding: 9px 14px;
    border-radius: 9px;
    cursor: pointer;
}
.bf-action-btn:hover:not(:disabled)[b-uuow7i05pn] { border-color: var(--jade); }
.bf-action-btn.is-primary[b-uuow7i05pn] { background: var(--jade); color: #06150E; border-color: var(--jade); }
.bf-action-btn:disabled[b-uuow7i05pn] { opacity: 0.5; cursor: default; }
.bf-action-rail[b-uuow7i05pn] { display: flex; flex-direction: column; gap: 10px; }


.bf-land-drawer[b-uuow7i05pn] {
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: grid;
    gap: 8px;
    min-width: 0;
    padding-top: 8px;
}

.bf-land-drawer.is-compact[b-uuow7i05pn] {
    border-top-color: var(--line);
    margin-top: 2px;
}

.bf-land-toggle[b-uuow7i05pn] {
    appearance: none;
    align-items: center;
    background: rgba(217, 189, 113, .08);
    border: 1px solid rgba(217, 189, 113, .24);
    border-radius: 8px;
    color: #F0DFA9;
    cursor: pointer;
    display: grid;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    min-height: 34px;
    min-width: 0;
    padding: 7px 9px;
    text-align: left;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
    width: 100%;
}

.bf-land-label[b-uuow7i05pn] {
    font: 900 .68rem/1 var(--font-ui);
    letter-spacing: .02em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.bf-land-mana-strip[b-uuow7i05pn] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
    min-width: 0;
}

.bf-mana-pip[b-uuow7i05pn] {
    --bf-mana-pip-bg: rgba(199, 210, 201, .2);
    --bf-mana-pip-fg: #08110D;
    align-items: center;
    background: var(--bf-mana-pip-bg);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 1px 2px rgba(0, 0, 0, .28);
    color: var(--bf-mana-pip-fg);
    display: inline-flex;
    flex: 0 0 auto;
    font: 950 .56rem/1 var(--font-ui);
    height: 18px;
    justify-content: center;
    min-width: 18px;
    padding: 0 4px;
    text-align: center;
    text-shadow: none;
}

.bf-mana-pip.is-multi[b-uuow7i05pn],
.bf-mana-pip.is-any[b-uuow7i05pn] {
    color: transparent;
}

.bf-mana-pip.is-any[b-uuow7i05pn] {
    color: rgba(8, 17, 13, .92);
}

.bf-mana-pip.is-tapped[b-uuow7i05pn] {
    filter: grayscale(.55);
    opacity: .42;
}

.bf-mana-pip.is-muted[b-uuow7i05pn] {
    border-style: dashed;
}

.bf-mana-pip.is-overflow[b-uuow7i05pn] {
    background: rgba(4, 9, 7, .48);
    border-color: rgba(217, 189, 113, .38);
    color: #F0DFA9;
    font-size: .5rem;
    min-width: 22px;
}

.bf-land-toggle strong[b-uuow7i05pn] {
    color: var(--ink);
    font: 900 .9rem/1 var(--font-ui);
}

.bf-land-toggle small[b-uuow7i05pn] {
    color: rgba(240, 223, 169, .78);
    font: 800 .68rem/1 var(--font-ui);
    text-transform: uppercase;
}

.bf-land-toggle:hover[b-uuow7i05pn],
.bf-land-toggle:focus-visible[b-uuow7i05pn] {
    background: rgba(217, 189, 113, .13);
    border-color: rgba(217, 189, 113, .58);
    outline: none;
    transform: translateY(-1px);
}

.bf-land-cards[b-uuow7i05pn],
.bf-land-mini-cards[b-uuow7i05pn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.bf-playmat[b-uuow7i05pn] {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 14px;
}


.bf-combat-surface[b-uuow7i05pn] {
    background:
        linear-gradient(180deg, rgba(159, 224, 189, .08), rgba(255, 255, 255, .03)),
        rgba(4, 9, 7, .38);
    border: 1px solid rgba(159, 224, 189, .22);
    border-radius: 10px;
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 12px;
}

.bf-combat-head[b-uuow7i05pn],
.bf-combat-actions[b-uuow7i05pn] {
    align-items: center;
    display: flex;
    gap: 8px;
}

.bf-combat-head[b-uuow7i05pn] {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    justify-content: space-between;
    min-width: 0;
    padding-bottom: 10px;
}

.bf-combat-head div:first-child[b-uuow7i05pn] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.bf-combat-head span[b-uuow7i05pn],
.bf-combat-target span[b-uuow7i05pn],
.bf-combat-notes span[b-uuow7i05pn] {
    color: var(--jade-bright);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bf-combat-head strong[b-uuow7i05pn] {
    color: var(--ink);
    font-size: 1.05rem;
}

.bf-combat-actions[b-uuow7i05pn] {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bf-combat-notes[b-uuow7i05pn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bf-combat-notes span[b-uuow7i05pn] {
    background: rgba(217, 189, 113, .12);
    border: 1px solid rgba(217, 189, 113, .32);
    border-radius: 999px;
    color: #F0DFA9;
    padding: 5px 8px;
}

.bf-combat-lanes[b-uuow7i05pn] {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    min-width: 0;
}

.bf-combat-lane[b-uuow7i05pn] {
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 9px;
    min-height: 244px;
    min-width: 0;
    padding: 9px;
}

.bf-combat-lane.is-drop-target[b-uuow7i05pn] {
    border-color: rgba(159, 224, 189, .38);
}

.bf-combat-lane.is-drop-target:hover[b-uuow7i05pn],
.bf-combat-lane.is-blocked[b-uuow7i05pn] {
    background: rgba(159, 224, 189, .08);
    border-color: rgba(159, 224, 189, .58);
}

.bf-combat-lane.is-attacking[b-uuow7i05pn] {
    border-color: rgba(217, 189, 113, .36);
}

.bf-combat-lane-card[b-uuow7i05pn],
.bf-combat-assigned-card[b-uuow7i05pn],
.bf-combat-card-shell[b-uuow7i05pn] {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.bf-combat-target[b-uuow7i05pn] {
    background: rgba(4, 9, 7, .48);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 7px;
}

.bf-combat-target strong[b-uuow7i05pn] {
    color: var(--ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bf-combat-target select[b-uuow7i05pn] {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    font: 800 .8rem/1 var(--font-ui);
    min-width: 0;
    padding: 6px;
    width: 100%;
}

.bf-combat-block-slots[b-uuow7i05pn] {
    align-content: start;
    display: grid;
    gap: 8px;
    min-height: 106px;
}

.bf-combat-drop-hint[b-uuow7i05pn],
.bf-combat-empty[b-uuow7i05pn] {
    align-items: center;
    background: rgba(4, 9, 7, .35);
    border: 1px dashed rgba(199, 210, 201, .22);
    border-radius: 8px;
    color: var(--ink-2);
    display: flex;
    font-weight: 800;
    justify-content: center;
    margin: 0;
    min-height: 68px;
    padding: 10px;
    text-align: center;
}

.bf-combat-pool[b-uuow7i05pn] {
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
}

.bf-combat-card-grid[b-uuow7i05pn] {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

.bf-combat-card-shell[b-uuow7i05pn] {
    background: rgba(4, 9, 7, .42);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    padding: 6px;
}

.bf-combat-card-shell.is-selected[b-uuow7i05pn] {
    border-color: var(--jade-bright);
    box-shadow: 0 0 0 2px rgba(159, 224, 189, .14);
}

.bf-card.bf-combat-card[b-uuow7i05pn] {
    min-height: 138px;
    width: 100%;
}

.bf-card.bf-combat-card .bf-card-header[b-uuow7i05pn] {
    padding: 7px 8px;
}

.bf-card.bf-combat-card .bf-card-name[b-uuow7i05pn] {
    font-size: .8rem;
}

.bf-card.bf-combat-card .bf-card-type[b-uuow7i05pn] {
    font-size: .63rem;
}

.bf-combat-card-meta[b-uuow7i05pn] {
    align-self: end;
    align-items: center;
    background: rgba(4, 9, 7, .66);
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    gap: 7px;
    justify-content: space-between;
    min-width: 0;
    padding: 6px 8px;
}

.bf-combat-card-meta span[b-uuow7i05pn] {
    color: rgba(247, 250, 244, .82);
    font-size: .62rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.bf-combat-card-meta strong[b-uuow7i05pn] {
    color: #F0DFA9;
    font-size: .78rem;
}

.bf-combat-card-tool[b-uuow7i05pn],
.bf-combat-remove[b-uuow7i05pn],
.bf-combat-assign-selected[b-uuow7i05pn] {
    appearance: none;
    background: rgba(159, 224, 189, .12);
    border: 1px solid rgba(159, 224, 189, .34);
    border-radius: 6px;
    color: var(--ink);
    cursor: pointer;
    font: 900 .68rem/1 var(--font-ui);
    min-height: 28px;
    padding: 7px 8px;
    text-transform: uppercase;
}

.bf-combat-card-tool:hover:not(:disabled)[b-uuow7i05pn],
.bf-combat-remove:hover:not(:disabled)[b-uuow7i05pn],
.bf-combat-assign-selected:hover:not(:disabled)[b-uuow7i05pn] {
    border-color: var(--jade-bright);
}

.bf-combat-card-tool:disabled[b-uuow7i05pn],
.bf-combat-remove:disabled[b-uuow7i05pn],
.bf-combat-assign-selected:disabled[b-uuow7i05pn] {
    cursor: default;
    opacity: .6;
}

.bf-damage-prompt[b-uuow7i05pn] {
    background: rgba(4, 9, 7, .38);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 10px;
}

.bf-damage-prompt > div[b-uuow7i05pn] {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.bf-damage-prompt strong[b-uuow7i05pn] {
    color: var(--ink);
}

.bf-damage-prompt span[b-uuow7i05pn] {
    color: var(--ink-2);
    font-size: .76rem;
    font-weight: 850;
}

.bf-damage-target[b-uuow7i05pn] {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 70px;
}

.bf-damage-target span[b-uuow7i05pn] {
    color: var(--ink);
    font-size: .82rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bf-damage-target input[b-uuow7i05pn] {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    font: 900 .84rem/1 var(--font-ui);
    padding: 7px;
    width: 100%;
}

.bf-damage-target input:focus[b-uuow7i05pn] {
    border-color: var(--jade-bright);
    outline: none;
}


.bf-section-head[b-uuow7i05pn] {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bf-section-head strong[b-uuow7i05pn] {
    color: var(--ink);
    font-size: .86rem;
}


.bf-card[b-uuow7i05pn] {
    --bf-card-art: linear-gradient(135deg, #26352C, #111714);
    appearance: none;
    background-color: #1B211D;
    background-image:
        linear-gradient(180deg, rgba(8, 13, 10, .04), rgba(8, 13, 10, .58)),
        var(--bf-card-art);
    background-position: center;
    background-size: cover;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: inset 0 -52px 58px rgba(0, 0, 0, .36);
    color: #F7FAF4;
    cursor: pointer;
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-family: var(--font-ui);
    min-height: 164px;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: left;
}

.bf-card.is-actionable[b-uuow7i05pn] {
    border-color: rgba(159, 224, 189, .45);
    cursor: pointer;
}

.bf-card.is-actionable:not(:disabled):hover[b-uuow7i05pn] {
    border-color: var(--jade-bright);
    box-shadow:
        inset 0 -52px 58px rgba(0, 0, 0, .36),
        0 0 0 2px rgba(159, 224, 189, .16);
}

.bf-card.is-land[b-uuow7i05pn] {
    border-color: rgba(217, 189, 113, .48);
}

.bf-card:disabled[b-uuow7i05pn] {
    opacity: .76;
}

.bf-card-header[b-uuow7i05pn] {
    background: rgba(4, 9, 7, .5);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    gap: 2px;
    padding: 8px 9px;
    width: 100%;
}

.bf-card-name[b-uuow7i05pn] {
    color: #F7FAF4;
    font-size: .88rem;
    font-weight: 900;
    line-height: 1.2;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

.bf-card-type[b-uuow7i05pn],
.bf-card-action[b-uuow7i05pn],
.bf-card small[b-uuow7i05pn] {
    color: rgba(247, 250, 244, .84);
    font-size: .74rem;
    font-weight: 800;
}

.bf-card-type[b-uuow7i05pn] {
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bf-card-action[b-uuow7i05pn] {
    align-self: end;
    background: rgba(4, 9, 7, .66);
    border: 1px solid rgba(159, 224, 189, .32);
    border-radius: 6px;
    color: var(--jade-bright);
    justify-self: end;
    margin: 0 8px 8px;
    padding: 4px 7px;
    text-transform: uppercase;
}

.bf-card.on-board[b-uuow7i05pn] {
    min-height: 86px;
    min-width: 132px;
    width: min(166px, 100%);
}

.bf-card.on-board .bf-card-header[b-uuow7i05pn] {
    padding: 6px 7px;
}

.bf-card.on-board .bf-card-name[b-uuow7i05pn] {
    font-size: .78rem;
}

.bf-card.on-board .bf-card-type[b-uuow7i05pn] {
    font-size: .63rem;
}

.bf-land-cards .bf-card.on-board[b-uuow7i05pn] {
    min-height: 74px;
    min-width: 116px;
    width: min(146px, 100%);
}

.bf-card small[b-uuow7i05pn] {
    align-self: end;
    background: rgba(4, 9, 7, .66);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    justify-self: start;
    margin: 0 8px 8px;
    padding: 4px 7px;
}

.bf-card.is-tapped[b-uuow7i05pn] {
    transform: rotate(2deg);
}

.bf-card.in-zone[b-uuow7i05pn] {
    min-height: 148px;
}


.bf-zone-modal-backdrop[b-uuow7i05pn] {
    align-items: center;
    background: rgba(4, 9, 7, .74);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 29;
}

.bf-zone-modal[b-uuow7i05pn] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
    display: grid;
    gap: 14px;
    max-height: calc(100vh - 48px);
    max-width: min(980px, calc(100vw - 48px));
    overflow: auto;
    padding: 16px;
    width: 100%;
}

.bf-zone-modal-head[b-uuow7i05pn] {
    align-items: start;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-bottom: 12px;
}

.bf-zone-modal-head div[b-uuow7i05pn] {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.bf-zone-modal-head span[b-uuow7i05pn] {
    color: var(--jade-bright);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bf-zone-modal-head h2[b-uuow7i05pn] {
    color: var(--ink);
    font-family: var(--font-disp);
    font-size: 1.8rem;
    line-height: 1.1;
    margin: 0;
    overflow-wrap: anywhere;
}

.bf-zone-modal-empty[b-uuow7i05pn] {
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-2);
    margin: 0;
    padding: 18px;
}

.bf-zone-modal-grid[b-uuow7i05pn] {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
}

.bf-broken-report-backdrop[b-uuow7i05pn] {
    align-items: center;
    background: rgba(4, 9, 7, .74);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 31;
}

.bf-broken-report[b-uuow7i05pn] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr);
    max-height: calc(100vh - 48px);
    max-width: min(980px, calc(100vw - 48px));
    overflow: auto;
    padding: 18px;
    width: 100%;
}

.bf-broken-report-card[b-uuow7i05pn] {
    align-items: center;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    min-height: 520px;
    padding: 14px;
}

.bf-broken-report-card img[b-uuow7i05pn] {
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .38);
    max-height: min(70vh, 640px);
    max-width: 100%;
}

.bf-broken-report-card-fallback[b-uuow7i05pn] {
    aspect-ratio: 5 / 7;
    background: #E8DFC8;
    border: 10px solid #1D1A15;
    border-radius: 18px;
    color: #14120F;
    display: grid;
    font-family: var(--font-ui);
    gap: 12px;
    grid-template-rows: auto auto 1fr;
    max-width: 360px;
    padding: 18px;
    width: 100%;
}

.bf-broken-report-card-fallback header[b-uuow7i05pn] {
    align-items: start;
    border-bottom: 2px solid rgba(20, 18, 15, .22);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-bottom: 8px;
}

.bf-broken-report-card-fallback strong[b-uuow7i05pn] {
    font-size: 1.15rem;
    line-height: 1.2;
}

.bf-broken-report-card-fallback header span[b-uuow7i05pn] {
    font-weight: 900;
}

.bf-broken-report-card-fallback p[b-uuow7i05pn],
.bf-broken-report-card-fallback div[b-uuow7i05pn] {
    margin: 0;
}

.bf-broken-report-card-fallback p[b-uuow7i05pn] {
    border-bottom: 1px solid rgba(20, 18, 15, .18);
    font-weight: 800;
    padding-bottom: 8px;
}

.bf-broken-report-card-fallback div[b-uuow7i05pn] {
    font-size: .98rem;
    line-height: 1.45;
}

.bf-broken-report-body[b-uuow7i05pn] {
    display: grid;
    gap: 18px;
    grid-template-rows: auto minmax(180px, 1fr) auto;
    min-width: 0;
}

.bf-broken-report-copy[b-uuow7i05pn] {
    display: grid;
    gap: 8px;
}

.bf-broken-report-copy span[b-uuow7i05pn],
.bf-broken-report-field span[b-uuow7i05pn] {
    color: var(--jade-bright);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bf-broken-report-copy h2[b-uuow7i05pn] {
    color: var(--ink);
    font-family: var(--font-disp);
    font-size: 1.8rem;
    line-height: 1.1;
    margin: 0;
}

.bf-broken-report-copy p[b-uuow7i05pn] {
    color: var(--ink-2);
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
}

.bf-broken-report-field[b-uuow7i05pn] {
    display: grid;
    gap: 8px;
}

.bf-broken-report-field textarea[b-uuow7i05pn] {
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font: 800 .95rem/1.45 var(--font-ui);
    min-height: 180px;
    padding: 12px;
    resize: vertical;
    width: 100%;
}

.bf-broken-report-field textarea:focus[b-uuow7i05pn] {
    border-color: var(--jade-bright);
    outline: none;
}

.bf-broken-report-field textarea[b-uuow7i05pn]::placeholder {
    color: rgba(199, 210, 201, .62);
}

.bf-broken-report-actions[b-uuow7i05pn] {
    display: grid;
    gap: 10px;
}

.bf-broken-report-action[b-uuow7i05pn] {
    appearance: none;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    display: grid;
    font-family: var(--font-ui);
    gap: 5px;
    padding: 12px;
    text-align: left;
}

.bf-broken-report-action.is-primary[b-uuow7i05pn] {
    background: rgba(103, 181, 141, .18);
    border-color: rgba(159, 224, 189, .58);
}

.bf-broken-report-action:not(:disabled):hover[b-uuow7i05pn],
.bf-broken-report-action:not(:disabled):focus-visible[b-uuow7i05pn] {
    border-color: var(--jade-bright);
    outline: none;
}

.bf-broken-report-action:disabled[b-uuow7i05pn] {
    cursor: wait;
    opacity: .6;
}

.bf-knockout-backdrop[b-uuow7i05pn] {
    align-items: center;
    background: rgba(4, 9, 7, .78);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 34;
}

.bf-knockout-modal[b-uuow7i05pn] {
    background:
        linear-gradient(135deg, rgba(24, 35, 29, .98), rgba(8, 12, 10, .99)),
        var(--surf);
    border: 1px solid rgba(159, 224, 189, .28);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: min(720px, calc(100vw - 48px));
    padding: 20px;
    width: 100%;
}

.bf-knockout-copy[b-uuow7i05pn] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.bf-knockout-copy span[b-uuow7i05pn] {
    color: var(--jade-bright);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bf-knockout-copy h2[b-uuow7i05pn] {
    color: var(--ink);
    font-family: var(--font-disp);
    font-size: clamp(2rem, 7vw, 3.2rem);
    line-height: .98;
    margin: 0;
}

.bf-knockout-copy p[b-uuow7i05pn] {
    color: var(--ink-2);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.5;
    margin: 0;
}

.bf-knockout-status[b-uuow7i05pn] {
    align-items: center;
    align-self: start;
    background: rgba(211, 106, 94, .18);
    border: 1px solid rgba(211, 106, 94, .44);
    border-radius: 8px;
    color: var(--ink);
    display: grid;
    justify-items: center;
    min-width: 94px;
    padding: 10px 12px;
}

.bf-knockout-status span[b-uuow7i05pn] {
    color: rgba(247, 250, 244, .72);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.bf-knockout-status strong[b-uuow7i05pn] {
    font-family: var(--font-disp);
    font-size: 2.35rem;
    line-height: 1;
}

.bf-knockout-actions[b-uuow7i05pn] {
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bf-knockout-action[b-uuow7i05pn] {
    appearance: none;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    display: grid;
    font-family: var(--font-ui);
    gap: 5px;
    min-height: 76px;
    padding: 12px;
    text-align: left;
}

.bf-knockout-action strong[b-uuow7i05pn] {
    font-size: 1rem;
}

.bf-knockout-action span[b-uuow7i05pn] {
    color: var(--ink-2);
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.35;
}

.bf-knockout-action.is-primary[b-uuow7i05pn] {
    background: rgba(103, 181, 141, .18);
    border-color: rgba(159, 224, 189, .58);
}

.bf-knockout-action:not(:disabled):hover[b-uuow7i05pn],
.bf-knockout-action:not(:disabled):focus-visible[b-uuow7i05pn] {
    border-color: var(--jade-bright);
    outline: none;
}

.bf-knockout-action:disabled[b-uuow7i05pn] {
    cursor: wait;
    opacity: .6;
}

.bf-action-rail[b-uuow7i05pn] {
    display: grid;
    gap: 12px;
    position: sticky;
    top: 70px;
}


.bf-advisor p[b-uuow7i05pn] {
    color: var(--ink);
    line-height: 1.5;
    margin: 0;
}

.bf-log ol[b-uuow7i05pn] {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    max-height: 460px;
    overflow: auto;
    padding: 0;
}

.bf-log li[b-uuow7i05pn] {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 4px;
    padding-top: 9px;
}

.bf-log li.is-reported[b-uuow7i05pn] {
    border-color: rgba(217, 189, 113, .34);
}

.bf-log li:first-child[b-uuow7i05pn] {
    border-top: 0;
    padding-top: 0;
}

.bf-log-entry-head[b-uuow7i05pn] {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.bf-log-entry-head > span[b-uuow7i05pn] {
    color: var(--jade-bright);
    font-size: .72rem;
    font-weight: 900;
}

.bf-log-report[b-uuow7i05pn] {
    appearance: none;
    align-items: center;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(217, 189, 113, .36);
    border-radius: 999px;
    color: #F0DFA9;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: 900 .72rem/1 var(--font-ui);
    height: 24px;
    justify-content: center;
    padding: 0;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
    width: 24px;
}

.bf-log-report:hover:not(:disabled)[b-uuow7i05pn],
.bf-log-report:focus-visible:not(:disabled)[b-uuow7i05pn] {
    background: rgba(217, 189, 113, .16);
    border-color: rgba(217, 189, 113, .68);
    transform: translateY(-1px);
}

.bf-log-report.is-reporting[b-uuow7i05pn],
.bf-log-report:disabled[b-uuow7i05pn] {
    cursor: wait;
    opacity: .66;
}

.bf-log-report.is-reported[b-uuow7i05pn] {
    background: rgba(159, 224, 189, .12);
    border-color: rgba(159, 224, 189, .42);
    color: var(--jade-bright);
    cursor: default;
    opacity: 1;
}

.bf-log li p[b-uuow7i05pn] {
    color: var(--ink-2);
    line-height: 1.45;
    margin: 0;
}

.notice.warning[b-uuow7i05pn] {
    background: rgba(217, 189, 113, .12);
    border-color: rgba(217, 189, 113, .48);
    color: #F0DFA9;
}

.bf-blocked[b-uuow7i05pn] {
    display: grid;
    gap: 8px;
    margin: 0;
}

.bf-blocked ul[b-uuow7i05pn] {
    display: grid;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.bf-blocked li[b-uuow7i05pn] {
    border-top: 1px solid rgba(217, 189, 113, .28);
    padding-top: 8px;
}

.bf-blocked li span[b-uuow7i05pn],
.bf-blocked li small[b-uuow7i05pn] {
    display: block;
}

.bf-blocked li span[b-uuow7i05pn] {
    color: var(--ink);
    font-weight: 800;
}

.bf-blocked li small[b-uuow7i05pn] {
    color: var(--ink-3);
    font: 700 11px/1.4 var(--font-ui);
}

.bf-blocked li p[b-uuow7i05pn] {
    margin: 4px 0 0;
}

@media (max-width: 1100px) {
    .bf-shell[b-uuow7i05pn] {
        grid-template-columns: 1fr;
    }

    .bf-action-rail[b-uuow7i05pn] {
        position: static;
    }
}

@media (max-width: 860px) {
    .bf-header-actions[b-uuow7i05pn] {
        align-items: stretch;
        flex-direction: column;
    }

.bf-broken-report[b-uuow7i05pn] {
        grid-template-columns: 1fr;
    }

    .bf-broken-report-card[b-uuow7i05pn] {
        min-height: 300px;
    }

    .bf-broken-report-card img[b-uuow7i05pn] {
        max-height: min(48vh, 460px);
    }

    .bf-knockout-modal[b-uuow7i05pn],
    .bf-knockout-actions[b-uuow7i05pn] {
        grid-template-columns: 1fr;
    }

    .bf-knockout-status[b-uuow7i05pn] {
        justify-self: start;
    }

    .bf-combat-head[b-uuow7i05pn],
    .bf-combat-actions[b-uuow7i05pn] {
        align-items: stretch;
        flex-direction: column;
    }

    .bf-combat-actions .btn[b-uuow7i05pn] {
        justify-content: center;
        width: 100%;
    }
}
/* /Pages/Build.razor.rz.scp.css */
/* ============================================================
   Build journey — Hybrid Card Stage scoped styles
   Persistent hero band + jumpable spine + card-stage work surfaces.
   Reusable primitives (HeroBand, ProgressSpine, Inspector, CardTile,
   ScoreChip, RoleTag, RoleMeter, ManaCurve, ManaPips) own their own CSS.
   ============================================================ */

.build-journey[b-gzr1flja9o] {
    --build-rail-max: 1200px;
    --build-rail-pad: 20px;
    --build-rail-gutter: max(var(--build-rail-pad), calc((100% - var(--build-rail-max)) / 2 + var(--build-rail-pad)));
    width: 100%;
    margin: 0;
    position: relative;
    z-index: 0;
}

/* Lift page content above the fixed Stage ambient (which sits at z-index 0). */
.build-journey > :not(.stage-ambient)[b-gzr1flja9o] {
    position: relative;
    z-index: 1;
}

.build-notice[b-gzr1flja9o] {
    box-sizing: border-box;
    max-width: var(--build-rail-max);
    margin: 16px 20px 0;
    margin-inline: auto;
}

.build-stage[b-gzr1flja9o] {
    box-sizing: border-box;
    max-width: var(--build-rail-max);
    margin-inline: auto;
    padding: 20px;
}

.deck-masthead[b-gzr1flja9o] {
    position: relative;
    overflow: hidden;
    background: #050906;
}

/* The Stage masthead now provides the hero band; its trailing slot hosts the
   pinned ProgressSpine. Reserve room at the masthead bottom for that spine. */
.deck-masthead[b-gzr1flja9o]  .stage-masthead {
    padding-bottom: 70px;
}

.deck-masthead[b-gzr1flja9o]  .stage-masthead--tall {
    min-height: 300px;
}

/* The trailing slot stretches full-width so the absolutely-pinned spine spans
   the masthead, rather than hugging the right edge as a normal flex item. */
.deck-masthead[b-gzr1flja9o]  .stage-masthead-trailing {
    position: static;
    margin-left: 0;
}

/* Commander thumbnail in the masthead Thumbs slot (was HeroBand .thumb). */
.deck-masthead[b-gzr1flja9o]  .hero-thumb-button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 7px;
    display: block;
    flex-shrink: 0;
}

.deck-masthead[b-gzr1flja9o]  .hero-thumb-button:focus-visible {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}

.deck-masthead[b-gzr1flja9o]  .hero-thumb {
    width: 46px;
    height: 64px;
    border-radius: 7px;
    object-fit: cover;
    border: 1px solid rgba(159, 224, 189, 0.4);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.deck-masthead[b-gzr1flja9o]  .hero-thumb-button:hover .hero-thumb {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6);
}

/* Pin the jumpable progress spine to the masthead bottom, full bleed. */
.deck-masthead[b-gzr1flja9o]  .progress {
    box-sizing: border-box;
    position: absolute;
    left: var(--build-rail-gutter);
    right: var(--build-rail-gutter);
    width: auto;
    bottom: 16px;
    z-index: 3;
    min-height: 42px;
    padding-inline: 18px;
    border: 1px solid rgba(159, 224, 189, 0.16);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(6px);
}

.sr-only[b-gzr1flja9o] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Deck manager ───────────────────────────────────────────── */

.deck-manager[b-gzr1flja9o],
.deck-manager-loading[b-gzr1flja9o] {
    box-sizing: border-box;
    max-width: var(--build-rail-max);
    margin-inline: auto;
    padding: 28px 20px;
}

.deck-manager-head[b-gzr1flja9o],
.active-deck-bar[b-gzr1flja9o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.active-deck-bar[b-gzr1flja9o] {
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 16px var(--build-rail-gutter);
    background:
        linear-gradient(90deg, rgba(103, 181, 141, 0.08), transparent 44%),
        rgba(255, 255, 255, 0.025);
    border-block: 1px solid var(--line);
    border-inline: 0;
    border-radius: 0;
}

.active-deck-bar > div[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.active-deck-bar strong[b-gzr1flja9o] {
    color: var(--ink);
    font: 800 14px/1.2 var(--font-ui);
}

.active-deck-bar small[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 600 11px/1.2 var(--font-ui);
}

.subscription-card[b-gzr1flja9o] {
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px;
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.subscription-tier[b-gzr1flja9o],
.deck-count-pill[b-gzr1flja9o],
.format-badge[b-gzr1flja9o] {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(238, 202, 104, 0.38);
    color: var(--gold);
    background: rgba(238, 202, 104, 0.1);
    font: 800 10px/1 var(--font-ui);
    padding: 6px 9px;
}

.subscription-card strong[b-gzr1flja9o] {
    color: var(--ink);
    font: 900 18px/1.1 var(--font-disp);
}

.subscription-card span:last-child[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 600 11px/1.4 var(--font-ui);
}

.deck-slot-layout[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 18px;
    align-items: start;
}

.deck-slot-shelf[b-gzr1flja9o],
.deck-slot-config[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.deck-slot-config[b-gzr1flja9o] {
    position: sticky;
    top: 72px;
}

.deck-list-head[b-gzr1flja9o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.deck-slot-grid[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
}

.deck-slot-card[b-gzr1flja9o] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 14px;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 8px;
    min-width: 0;
}

.deck-slot-card.is-filled[b-gzr1flja9o] {
    gap: 8px;
    padding: 8px;
}

.deck-slot-card.is-empty[b-gzr1flja9o] {
    border-style: dashed;
    background:
        linear-gradient(145deg, rgba(103, 181, 141, 0.07), rgba(255, 255, 255, 0.025)),
        var(--surf-raised);
}

.deck-slot-card.is-upgrade[b-gzr1flja9o] {
    background:
        linear-gradient(145deg, rgba(228, 195, 92, 0.12), rgba(255, 255, 255, 0.025)),
        var(--surf-raised);
    border-color: rgba(228, 195, 92, 0.25);
}

.deck-slot-card.is-archived[b-gzr1flja9o] {
    background:
        linear-gradient(145deg, rgba(145, 154, 149, 0.09), rgba(255, 255, 255, 0.02)),
        var(--surf-raised);
}

.deck-slot-card.is-archived .deck-cover-stack[b-gzr1flja9o] {
    border-color: rgba(239, 246, 234, 0.34);
}

.deck-slot-card.is-archived .deck-key-card-image[b-gzr1flja9o],
.deck-slot-card.is-archived .deck-key-card-placeholder[b-gzr1flja9o] {
    filter: grayscale(0.28) saturate(0.74) brightness(0.72);
}

.deck-cover-stack[b-gzr1flja9o] {
    position: relative;
    display: block;
    width: min(100%, 178px);
    aspect-ratio: 5 / 7;
    margin: 2px auto 0;
    padding: 0;
    border: 1px solid rgba(239, 246, 234, 0.68);
    border-radius: 9px;
    background: #050706;
    box-shadow: 0 18px 26px rgba(0, 0, 0, 0.32);
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.deck-slot-card.is-filled .deck-cover-stack[b-gzr1flja9o] {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 10px;
}

.deck-cover-stack:hover[b-gzr1flja9o],
.deck-cover-stack:focus-visible[b-gzr1flja9o] {
    transform: translateY(-3px);
    border-color: var(--jade-bright);
    box-shadow: 0 20px 34px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(103, 181, 141, 0.28);
    outline: 0;
}

.deck-stack-shadow[b-gzr1flja9o] {
    position: absolute;
    inset: 10px -8px -7px 12px;
    z-index: -1;
    border: 1px solid rgba(239, 246, 234, 0.25);
    border-radius: 9px;
    background: rgba(5, 7, 6, 0.82);
    transform: rotate(4deg);
}

.deck-stack-shadow.second[b-gzr1flja9o] {
    inset: 18px -14px -12px 22px;
    opacity: 0.6;
    transform: rotate(8deg);
}

.deck-key-card-image[b-gzr1flja9o],
.deck-key-card-placeholder[b-gzr1flja9o],
.empty-slot-frame[b-gzr1flja9o] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.deck-slot-card.is-filled .deck-key-card-image[b-gzr1flja9o],
.deck-slot-card.is-filled .deck-key-card-placeholder[b-gzr1flja9o] {
    border-radius: 9px;
}

.deck-key-card-placeholder[b-gzr1flja9o],
.empty-slot-frame[b-gzr1flja9o] {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(145deg, #080d0a, #020302);
}

.empty-slot-frame[b-gzr1flja9o] {
    border: 2px solid rgba(239, 246, 234, 0.72);
    background:
        radial-gradient(circle at 50% 50%, rgba(103, 181, 141, 0.18), transparent 30%),
        #020302;
}

.empty-slot-plus[b-gzr1flja9o],
.upgrade-slot-mark[b-gzr1flja9o] {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #06120c;
    background: var(--jade);
    font: 900 25px/1 var(--font-ui);
    box-shadow: 0 0 0 4px rgba(103, 181, 141, 0.12);
}

.upgrade-slot-mark[b-gzr1flja9o] {
    background: var(--gold);
}

.mini-stack-symbol[b-gzr1flja9o] {
    position: relative;
    width: 58px;
    height: 50px;
    transform: rotate(-7deg);
}

.mini-stack-symbol span[b-gzr1flja9o] {
    position: absolute;
    width: 26px;
    height: 34px;
    border-radius: 4px;
    background: rgba(239, 246, 234, 0.94);
    box-shadow: 0 0 0 1px rgba(239, 246, 234, 0.34);
}

.mini-stack-symbol span:nth-child(1)[b-gzr1flja9o] {
    left: 24px;
    top: 10px;
    transform: rotate(13deg);
    opacity: 0.75;
}

.mini-stack-symbol span:nth-child(2)[b-gzr1flja9o] {
    left: 16px;
    top: 6px;
    transform: rotate(5deg);
    opacity: 0.88;
}

.mini-stack-symbol span:nth-child(3)[b-gzr1flja9o] {
    left: 5px;
    top: 2px;
}

.deck-cover-gradient[b-gzr1flja9o] {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 8px;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0) 26%,
            rgba(0, 0, 0, 0.28) 52%,
            rgba(0, 0, 0, 0.88) 78%,
            #000 100%);
    pointer-events: none;
}

.deck-title-overlay[b-gzr1flja9o] {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.deck-title-overlay strong[b-gzr1flja9o] {
    width: 100%;
    min-width: 0;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
    font: 950 22px/1.05 var(--font-ui);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deck-title-overlay > span:last-child[b-gzr1flja9o] {
    color: rgba(239, 246, 234, 0.72);
    font: 800 10px/1.2 var(--font-ui);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.deck-slot-copy[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.deck-slot-copy strong[b-gzr1flja9o] {
    color: var(--ink);
    font: 900 14px/1.2 var(--font-ui);
}

.deck-slot-copy > span[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 600 11px/1.45 var(--font-ui);
}

.filled-deck-controls[b-gzr1flja9o] {
    padding: 4px 4px 2px;
}

.deck-inline-edit-input[b-gzr1flja9o] {
    font-weight: 850;
}

.deck-rename-input[b-gzr1flja9o] {
    min-width: 0;
    font-weight: 800;
}

.managed-deck-meta[b-gzr1flja9o] {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--ink-3);
    font: 600 11px/1.3 var(--font-ui);
}

.managed-deck-actions[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.deck-split-action[b-gzr1flja9o] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: stretch;
    gap: 0;
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 12px 28px rgba(103, 181, 141, 0.16);
}

.deck-split-action .btn[b-gzr1flja9o] {
    min-height: 42px;
    border-radius: 0;
    box-shadow: none;
}

.deck-split-action .deck-split-main.btn[b-gzr1flja9o] {
    justify-content: flex-start;
    padding-inline: 15px;
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.deck-split-action .deck-split-toggle.btn[b-gzr1flja9o] {
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 42px;
    border-left-color: rgba(4, 10, 7, 0.3);
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    padding: 0;
}

.deck-split-toggle:hover[b-gzr1flja9o],
.deck-split-toggle:focus-visible[b-gzr1flja9o] {
    filter: brightness(1.04);
}

.deck-split-caret[b-gzr1flja9o] {
    display: inline-block;
    width: 0;
    height: 0;
    transform: translateY(1px);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid currentColor;
}

.deck-action-menu-host[b-gzr1flja9o] {
    position: relative;
}

.deck-action-menu[b-gzr1flja9o] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 8;
    min-width: 132px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #0c1210;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48);
}

.deck-action-menu-item[b-gzr1flja9o] {
    width: 100%;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    padding: 9px 10px;
    text-align: left;
    font: 850 12px/1 var(--font-ui);
    cursor: pointer;
}

.deck-action-menu-item:hover[b-gzr1flja9o],
.deck-action-menu-item:focus-visible[b-gzr1flja9o] {
    outline: 0;
    background: rgba(255, 255, 255, 0.07);
}

.deck-action-menu-item:disabled[b-gzr1flja9o] {
    cursor: not-allowed;
    color: var(--ink-3);
    opacity: 0.58;
}

.deck-action-menu-item.danger[b-gzr1flja9o] {
    color: var(--danger-text);
}

.deck-action-menu-item.danger:hover[b-gzr1flja9o],
.deck-action-menu-item.danger:focus-visible[b-gzr1flja9o] {
    background: rgba(204, 75, 63, 0.14);
}

.btn.danger[b-gzr1flja9o] {
    color: var(--danger-text);
    background: rgba(204, 75, 63, 0.1);
    border-color: rgba(204, 75, 63, 0.38);
}

.btn.danger:not(:disabled):hover[b-gzr1flja9o] {
    color: #fff;
    background: rgba(204, 75, 63, 0.24);
    border-color: rgba(204, 75, 63, 0.58);
}

.deck-delete-summary[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px;
    border: 1px solid rgba(238, 202, 104, 0.24);
    border-radius: 12px;
    background: rgba(238, 202, 104, 0.08);
}

.deck-delete-summary strong[b-gzr1flja9o] {
    color: var(--gold);
    font: 900 12px/1.2 var(--font-ui);
}

.deck-delete-summary span[b-gzr1flja9o] {
    color: var(--ink-2);
    font: 600 12px/1.5 var(--font-ui);
}

.deck-delete-actions[b-gzr1flja9o] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.commander-printing-modal[b-gzr1flja9o] {
    width: min(920px, 94vw);
}

.commander-printing-grid[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.commander-printing-option[b-gzr1flja9o] {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 108px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
    text-align: left;
}

.commander-printing-option:not(:disabled):hover[b-gzr1flja9o],
.commander-printing-option:not(:disabled):focus-visible[b-gzr1flja9o] {
    outline: 0;
    border-color: rgba(103, 181, 141, 0.56);
    background: rgba(103, 181, 141, 0.08);
}

.commander-printing-option.is-selected[b-gzr1flja9o] {
    border-color: var(--jade-bright);
    box-shadow: 0 0 0 1px rgba(103, 181, 141, 0.22);
}

.commander-printing-option:disabled[b-gzr1flja9o] {
    cursor: wait;
    opacity: 0.72;
}

.commander-printing-image[b-gzr1flja9o] {
    display: block;
    width: 72px;
    aspect-ratio: 5 / 7;
    border-radius: 7px;
    overflow: hidden;
    background: #050706;
}

.commander-printing-image img[b-gzr1flja9o] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.commander-printing-copy[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.commander-printing-copy strong[b-gzr1flja9o] {
    color: var(--ink);
    font: 900 13px/1.15 var(--font-ui);
}

.commander-printing-copy span[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 600 11px/1.3 var(--font-ui);
}

.commander-printing-current[b-gzr1flja9o] {
    position: absolute;
    right: 8px;
    top: 8px;
    border-radius: 999px;
    color: #06120c;
    background: var(--jade);
    padding: 4px 7px;
    font: 900 9px/1 var(--font-ui);
}

/* ── Stage card (each step's work surface) ───────────────────── */

.build-card[b-gzr1flja9o] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 22px;
}

.build-head[b-gzr1flja9o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.strategy-layout.has-commander[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 20px;
    align-items: start;
}

.strategy-main[b-gzr1flja9o] {
    min-width: 0;
}

.commander-showcase[b-gzr1flja9o] {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.commander-showcase[b-gzr1flja9o]  .card-tile {
    max-width: 100%;
}

.commander-showcase-copy[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.commander-showcase-meta-row[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 10px;
    align-items: center;
}

.commander-showcase-meta-row > div[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.commander-showcase-copy strong[b-gzr1flja9o] {
    color: var(--ink);
    font: 800 13px/1.25 var(--font-ui);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.commander-showcase-copy span[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 500 11px/1.35 var(--font-ui);
}

.printing-picker-button[b-gzr1flja9o] {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(103, 181, 141, 0.38);
    border-radius: 10px;
    color: var(--jade-bright);
    background: rgba(103, 181, 141, 0.1);
    font: 900 18px/1 var(--font-ui);
    cursor: pointer;
}

.printing-picker-button:not(:disabled):hover[b-gzr1flja9o],
.printing-picker-button:not(:disabled):focus-visible[b-gzr1flja9o] {
    outline: 0;
    border-color: var(--jade-bright);
    background: rgba(103, 181, 141, 0.18);
}

.printing-picker-button:disabled[b-gzr1flja9o] {
    cursor: not-allowed;
    color: var(--ink-3);
    opacity: 0.6;
}

.build-eyebrow[b-gzr1flja9o] {
    display: block;
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 8px;
}

.build-eyebrow.jade[b-gzr1flja9o] {
    color: var(--jade-bright);
}

.build-eyebrow.gold[b-gzr1flja9o] {
    color: var(--gold);
}

.build-title[b-gzr1flja9o] {
    font-weight: 800;
    font-size: 24px;
    margin: 0 0 6px;
    line-height: 1.05;
}

.build-sub[b-gzr1flja9o] {
    margin: 0;
    color: var(--ink-2);
    font: 500 13px/1.5 var(--font-ui);
    max-width: 64ch;
}

.build-actions[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.binder-head-actions[b-gzr1flja9o] {
    justify-content: flex-end;
    margin-top: 0;
}

.strategy-actions[b-gzr1flja9o] {
    align-items: flex-start;
}

.action-with-tooltip[b-gzr1flja9o] {
    display: inline-flex;
}

.helper-text[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 500 11px/1.5 var(--font-ui);
    margin: 8px 0 0;
}

.empty-state[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 500 13px/1.6 var(--font-ui);
    background: var(--surf-raised);
    border: 1px dashed var(--line);
    border-radius: var(--radius-ctrl);
    padding: 22px;
    text-align: center;
    margin: 0;
}

.hero-kick-eyebrow[b-gzr1flja9o] {
    display: inline-flex;
    align-items: center;
    font: 700 11px/1 var(--font-ui);
    color: var(--ink);
    background: rgba(8, 11, 9, 0.6);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 8px 12px;
}

/* ── Form controls (shared within the page) ──────────────────── */

.field-label[b-gzr1flja9o] {
    display: block;
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}

.ctrl-input[b-gzr1flja9o] {
    width: 100%;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px 12px;
    color: var(--ink);
    font: 600 13px/1.4 var(--font-ui);
}

.ctrl-input[b-gzr1flja9o]::placeholder {
    color: var(--ink-3);
}

.ctrl-input:focus-visible[b-gzr1flja9o] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 1px;
    border-color: var(--jade);
}

textarea.ctrl-input[b-gzr1flja9o] {
    resize: vertical;
    min-height: 56px;
}

/* ── Step 1 setup grid ───────────────────────────────────────── */

.setup-grid[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.setup-wide[b-gzr1flja9o] {
    grid-column: 1 / -1;
}

.format-control-row[b-gzr1flja9o] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.info-icon-button[b-gzr1flja9o] {
    flex: 0 0 auto;
    width: 40px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surf-raised);
    color: var(--jade-bright);
    font: 800 14px/1 var(--font-disp);
    cursor: pointer;
}

.info-icon-button:hover[b-gzr1flja9o] {
    border-color: var(--jade);
}

.deck-icon-field[b-gzr1flja9o] {
    min-width: 0;
}

.deck-icon-picker[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
}

.deck-icon-option[b-gzr1flja9o] {
    min-width: 0;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surf-raised);
    color: var(--ink-2);
    cursor: pointer;
    font: 800 11px/1 var(--font-ui);
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.deck-icon-option:hover[b-gzr1flja9o],
.deck-icon-option:focus-visible[b-gzr1flja9o] {
    color: var(--ink);
    border-color: rgba(103, 181, 141, 0.42);
    background: rgba(103, 181, 141, 0.1);
    outline: none;
}

.deck-icon-option.is-selected[b-gzr1flja9o] {
    color: var(--ink);
    border-color: rgba(159, 224, 189, 0.58);
    background: rgba(103, 181, 141, 0.15);
    box-shadow: inset 0 0 0 1px rgba(159, 224, 189, 0.16);
}

.deck-icon-option.is-saving[b-gzr1flja9o] {
    opacity: 0.74;
}

.deck-icon-option:disabled[b-gzr1flja9o] {
    cursor: wait;
}

.deck-icon-option-glyph[b-gzr1flja9o] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.segmented-control[b-gzr1flja9o] {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
}

.segmented-control button[b-gzr1flja9o] {
    border: 0;
    background: var(--surf-raised);
    color: var(--ink-3);
    font: 700 12px/1 var(--font-ui);
    padding: 10px 14px;
    cursor: pointer;
}

.segmented-control button.active[b-gzr1flja9o] {
    background: rgba(103, 181, 141, 0.14);
    color: var(--ink);
}

/* commander search */
.commander-search[b-gzr1flja9o] {
    position: relative;
}

.commander-options[b-gzr1flja9o] {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.commander-option[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: 9px 11px;
    cursor: pointer;
    color: var(--ink);
}

.commander-option:last-child[b-gzr1flja9o] {
    border-bottom: 0;
}

.commander-option:hover[b-gzr1flja9o] {
    background: rgba(103, 181, 141, 0.1);
}

.commander-option.muted[b-gzr1flja9o] {
    color: var(--ink-3);
    cursor: default;
    font: 500 12px/1.4 var(--font-ui);
}

.commander-option img[b-gzr1flja9o] {
    width: 32px;
    height: 44px;
    border-radius: 5px;
    object-fit: cover;
    flex: 0 0 auto;
}

.commander-option-copy[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.commander-option-copy strong[b-gzr1flja9o] {
    font: 700 12px/1.2 var(--font-ui);
}

.commander-option-copy small[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 500 10px/1.2 var(--font-ui);
}

.commander-option.is-unowned[b-gzr1flja9o] {
    box-shadow: inset 3px 0 0 rgba(216, 159, 86, 0.9);
}

.commander-option-meta[b-gzr1flja9o] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    min-width: 74px;
}

.color-identity-badge[b-gzr1flja9o] {
    font: 700 11px/1 var(--font-ui);
    color: var(--ink-2);
    white-space: nowrap;
}

.commander-ownership-badge[b-gzr1flja9o] {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px 6px;
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.commander-ownership-badge.owned[b-gzr1flja9o] {
    color: var(--jade-bright);
    background: rgba(103, 181, 141, 0.12);
}

.commander-ownership-badge.unowned[b-gzr1flja9o] {
    color: #f0bd78;
    background: rgba(216, 159, 86, 0.12);
    border-color: rgba(216, 159, 86, 0.4);
}

/* color buttons */
.color-filter-row[b-gzr1flja9o] {
    display: flex;
    gap: 8px;
}

.color-button[b-gzr1flja9o] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surf-raised);
    color: var(--ink-2);
    font: 800 13px/1 var(--font-ui);
    cursor: pointer;
}

.color-button.active[b-gzr1flja9o] {
    color: #06120c;
    border-color: transparent;
}

.color-button.color-w.active[b-gzr1flja9o] { background: var(--mana-w); color: #7a5f25; }
.color-button.color-u.active[b-gzr1flja9o] { background: var(--mana-u); color: #fff; }
.color-button.color-b.active[b-gzr1flja9o] { background: var(--mana-b); color: #fff; }
.color-button.color-r.active[b-gzr1flja9o] { background: var(--mana-r); color: #fff; }
.color-button.color-g.active[b-gzr1flja9o] { background: var(--mana-g); color: #06120c; }

/* ── Strategy brief ──────────────────────────────────────────── */

.strategy-brief[b-gzr1flja9o] {
    margin-top: 22px;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 18px;
}

.brief-head[b-gzr1flja9o] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.brief-head .build-eyebrow[b-gzr1flja9o] {
    margin: 0;
}

.strategy-state-badge[b-gzr1flja9o],
.strategy-tuning-status[b-gzr1flja9o] {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: var(--ink-2);
    background: rgba(255, 255, 255, 0.04);
    font: 800 10px/1 var(--font-ui);
    padding: 6px 9px;
}

.strategy-state-badge.tuned[b-gzr1flja9o],
.strategy-tuning-status.tuned[b-gzr1flja9o] {
    color: #06120c;
    border-color: transparent;
    background: var(--jade);
}

.strategy-state-badge.stale[b-gzr1flja9o],
.strategy-tuning-status.stale[b-gzr1flja9o] {
    color: #2c2206;
    border-color: transparent;
    background: var(--gold);
}

.strategy-tuning-status.busy[b-gzr1flja9o] {
    color: var(--jade-bright);
    border-color: rgba(103, 181, 141, 0.34);
    background: rgba(103, 181, 141, 0.12);
}

.brief-grid[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
}

.brief-cell[b-gzr1flja9o] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 14px;
}

.brief-cell .k[b-gzr1flja9o] {
    display: block;
    font: 700 10px/1 var(--font-ui);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.brief-cell .v[b-gzr1flja9o] {
    display: block;
    font: 600 13px/1.45 var(--font-ui);
    color: var(--ink);
    margin-top: 7px;
}

.brief-sub[b-gzr1flja9o] {
    margin: 18px 0 8px;
}

.pill-row[b-gzr1flja9o] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pill[b-gzr1flja9o] {
    font: 700 11px/1 var(--font-ui);
    color: var(--ink);
    background: rgba(103, 181, 141, 0.1);
    border: 1px solid rgba(103, 181, 141, 0.26);
    padding: 7px 10px;
    border-radius: 99px;
}

.package-list[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.package[b-gzr1flja9o] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
}

.package strong[b-gzr1flja9o] {
    font: 700 12px/1.2 var(--font-ui);
}

.package span[b-gzr1flja9o] {
    display: block;
    color: var(--ink-2);
    font: 500 11px/1.45 var(--font-ui);
    margin-top: 5px;
}

.strategy-tuning-panel[b-gzr1flja9o] {
    margin-top: 16px;
    padding: 18px;
    border-radius: var(--radius-card);
    border: 1px solid rgba(238, 202, 104, 0.34);
    background:
        linear-gradient(135deg, rgba(238, 202, 104, 0.12), rgba(103, 181, 141, 0.07)),
        var(--surf-raised);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.strategy-tuning-head[b-gzr1flja9o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.strategy-tuning-head h3[b-gzr1flja9o] {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.1;
}

.strategy-tuning-head p:not(.build-eyebrow)[b-gzr1flja9o] {
    max-width: 62ch;
    margin: 7px 0 0;
    color: var(--ink-2);
    font: 500 13px/1.5 var(--font-ui);
}

.strategy-tuning-textarea[b-gzr1flja9o] {
    min-height: 142px;
    resize: vertical;
    border-color: rgba(238, 202, 104, 0.34);
    background: rgba(0, 0, 0, 0.22);
}

.strategy-tuning-textarea:focus[b-gzr1flja9o] {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(238, 202, 104, 0.12);
}

.strategy-tuning-examples[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.strategy-tuning-examples span[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 800 10px/1 var(--font-ui);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.strategy-tuning-examples button[b-gzr1flja9o] {
    border: 1px solid rgba(238, 202, 104, 0.25);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(238, 202, 104, 0.08);
    font: 800 11px/1 var(--font-ui);
    padding: 8px 10px;
    cursor: pointer;
}

.strategy-tuning-examples button:hover[b-gzr1flja9o],
.strategy-tuning-examples button:focus-visible[b-gzr1flja9o] {
    outline: 0;
    border-color: var(--gold);
    background: rgba(238, 202, 104, 0.16);
}

.strategy-tuning-actions[b-gzr1flja9o] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.strategy-tuning-actions .helper-text[b-gzr1flja9o] {
    max-width: 64ch;
    margin-top: 2px;
}

/* ── Step 2 cockpit ──────────────────────────────────────────── */

.cockpit[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 16px;
    align-items: start;
}

.cockpit-main[b-gzr1flja9o] {
    min-width: 0;
}

.binder-controls[b-gzr1flja9o] {
    display: grid;
    gap: 9px;
    margin-bottom: 14px;
}

.binder-control-row[b-gzr1flja9o] {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
}

.binder-control-row-primary[b-gzr1flja9o] {
    align-items: stretch;
}

.binder-control-row-filters[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: minmax(170px, 230px) minmax(240px, 1fr);
}

.binder-controls .toolbar-search[b-gzr1flja9o],
.binder-controls .binder-role-filter[b-gzr1flja9o] {
    width: 100%;
    min-width: 0;
}

.binder-review-tabs[b-gzr1flja9o] {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
    background: var(--surf-raised);
}

.binder-review-tabs button[b-gzr1flja9o] {
    border: 0;
    border-right: 1px solid var(--line);
    background: transparent;
    color: var(--ink-3);
    font: 800 11px/1 var(--font-ui);
    padding: 10px 11px;
    cursor: pointer;
    white-space: nowrap;
}

.binder-review-tabs button:last-child[b-gzr1flja9o] {
    border-right: 0;
}

.binder-review-tabs button.active[b-gzr1flja9o] {
    color: #06120c;
    background: var(--jade);
}

.view-toggle[b-gzr1flja9o] {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
}

.view-toggle button[b-gzr1flja9o] {
    border: 0;
    background: var(--surf-raised);
    color: var(--ink-3);
    font: 700 11px/1 var(--font-ui);
    padding: 10px 11px;
    cursor: pointer;
}

.view-toggle button.active[b-gzr1flja9o] {
    background: rgba(103, 181, 141, 0.14);
    color: var(--ink);
}

.swipe-review-shell[b-gzr1flja9o] {
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(103, 181, 141, 0.12), transparent 34%),
        rgba(0, 0, 0, 0.14);
    padding: 16px;
    overflow: hidden;
}

.swipe-review-topline[b-gzr1flja9o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.swipe-review-topline .block-title[b-gzr1flja9o] {
    margin-bottom: 0;
}

.swipe-review-topline > span[b-gzr1flja9o] {
    color: var(--gold);
    font: 900 11px/1 var(--font-ui);
    text-transform: uppercase;
}

.swipe-review-progress[b-gzr1flja9o] {
    display: flex;
    width: 100%;
    height: 5px;
    margin: -4px 0 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
}

.swipe-review-progress-segment[b-gzr1flja9o] {
    flex-basis: 0;
    min-width: 0;
}

.swipe-review-progress-segment.approve[b-gzr1flja9o] {
    background: linear-gradient(90deg, rgba(103, 181, 141, 0.95), rgba(150, 224, 183, 0.95));
}

.swipe-review-progress-segment.pending[b-gzr1flja9o] {
    background: rgba(154, 166, 157, 0.34);
}

.swipe-review-progress-segment.reject[b-gzr1flja9o] {
    background: linear-gradient(90deg, rgba(147, 50, 43, 0.86), rgba(204, 75, 63, 0.9));
}

.swipe-review-undo[b-gzr1flja9o] {
    --swipe-review-undo-accent: rgba(150, 224, 183, 0.8);
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 20px);
    min-height: 58px;
    margin: 10px 10px 0;
    padding: 9px 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(5, 9, 7, 0.96), rgba(5, 9, 7, 0.74) 46%, rgba(5, 9, 7, 0.28)),
        var(--swipe-review-undo-art, linear-gradient(135deg, rgba(103, 181, 141, 0.18), rgba(255, 255, 255, 0.03)));
    background-position: center;
    background-size: cover;
    color: var(--ink-1);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-align: left;
    transition:
        border-color 140ms ease,
        transform 140ms ease,
        color 140ms ease;
}

.swipe-review-undo[b-gzr1flja9o]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, var(--swipe-review-undo-accent), transparent 38%),
        rgba(0, 0, 0, 0.18);
    opacity: 0.24;
}

.swipe-review-undo:hover[b-gzr1flja9o],
.swipe-review-undo:focus-visible[b-gzr1flja9o] {
    border-color: var(--swipe-review-undo-accent);
    color: #fff;
    transform: translateY(-1px);
}

.swipe-review-undo:disabled[b-gzr1flja9o] {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.swipe-review-undo.approve[b-gzr1flja9o] {
    --swipe-review-undo-accent: rgba(150, 224, 183, 0.82);
}

.swipe-review-undo.reject[b-gzr1flja9o] {
    --swipe-review-undo-accent: rgba(240, 163, 154, 0.82);
}

.swipe-review-undo-icon[b-gzr1flja9o] {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.46);
    color: var(--swipe-review-undo-accent);
}

.swipe-review-undo-icon svg[b-gzr1flja9o] {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.swipe-review-undo-copy[b-gzr1flja9o] {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.swipe-review-undo-copy strong[b-gzr1flja9o],
.swipe-review-undo-copy span[b-gzr1flja9o] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swipe-review-undo-copy strong[b-gzr1flja9o] {
    font: 900 14px/1.1 var(--font-ui);
}

.swipe-review-undo-copy span[b-gzr1flja9o] {
    color: var(--ink-2);
    font: 800 10px/1.1 var(--font-ui);
    text-transform: uppercase;
}

.swipe-review-stage[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: minmax(78px, 0.6fr) minmax(270px, 390px) minmax(78px, 0.6fr);
    gap: 16px;
    align-items: center;
    justify-content: center;
}

.swipe-review-preload[b-gzr1flja9o] {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.swipe-review-preload img[b-gzr1flja9o] {
    display: block;
    width: 1px;
    height: 1px;
}

.swipe-review-decision[b-gzr1flja9o] {
    position: relative;
    z-index: 0;
    isolation: isolate;
    min-height: 360px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--ink-3);
    cursor: pointer;
    overflow: hidden;
    transition:
        border-color 140ms ease,
        background-color 140ms ease,
        color 140ms ease,
        transform 140ms ease;
}

.swipe-review-decision[b-gzr1flja9o]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    opacity: 0;
    transform: scaleX(0);
}

.swipe-review-decision.reject[b-gzr1flja9o]::before {
    transform-origin: right center;
    background:
        linear-gradient(90deg, rgba(147, 50, 43, 0) 0%, rgba(204, 75, 63, 0.12) 38%, rgba(204, 75, 63, 0.36) 74%, rgba(240, 163, 154, 0.48) 100%);
}

.swipe-review-decision.approve[b-gzr1flja9o]::before {
    transform-origin: left center;
    background:
        linear-gradient(90deg, rgba(181, 241, 205, 0.5) 0%, rgba(103, 181, 141, 0.38) 26%, rgba(103, 181, 141, 0.12) 62%, rgba(62, 132, 96, 0) 100%);
}

.swipe-review-decision svg[b-gzr1flja9o] {
    position: relative;
    z-index: 1;
    width: clamp(34px, 5vw, 56px);
    height: clamp(34px, 5vw, 56px);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.swipe-review-key-hint[b-gzr1flja9o] {
    position: relative;
    z-index: 1;
    color: var(--ink-3);
    font: 800 10px/1 var(--font-ui);
    text-transform: uppercase;
}

.swipe-review-decision.reject:hover .swipe-review-key-hint[b-gzr1flja9o],
.swipe-review-decision.reject:focus-visible .swipe-review-key-hint[b-gzr1flja9o] {
    color: #f0a39a;
}

.swipe-review-decision.approve:hover .swipe-review-key-hint[b-gzr1flja9o],
.swipe-review-decision.approve:focus-visible .swipe-review-key-hint[b-gzr1flja9o] {
    color: var(--jade-bright);
}

.swipe-review-decision.reject:hover[b-gzr1flja9o],
.swipe-review-decision.reject:focus-visible[b-gzr1flja9o] {
    border-color: rgba(204, 75, 63, 0.45);
    background: rgba(204, 75, 63, 0.12);
    color: #f0a39a;
    transform: translateX(-2px);
}

.swipe-review-decision.approve:hover[b-gzr1flja9o],
.swipe-review-decision.approve:focus-visible[b-gzr1flja9o] {
    border-color: rgba(150, 224, 183, 0.48);
    background: rgba(103, 181, 141, 0.14);
    color: var(--jade-bright);
    transform: translateX(2px);
}

.swipe-review-decision:disabled[b-gzr1flja9o] {
    cursor: default;
    opacity: 0.56;
    transform: none;
}

.swipe-review-decision.is-pending[b-gzr1flja9o] {
    cursor: wait;
}

.swipe-review-decision.is-pending[b-gzr1flja9o]::before,
.swipe-review-decision.is-native-press[b-gzr1flja9o]::before {
    animation: swipe-review-decision-fill-b-gzr1flja9o 680ms cubic-bezier(.18, .88, .28, 1) forwards;
}

.swipe-review-decision.reject.is-pending[b-gzr1flja9o],
.swipe-review-decision.reject.is-native-press[b-gzr1flja9o] {
    border-color: rgba(204, 75, 63, 0.58);
    color: #f5b4ad;
}

.swipe-review-decision.approve.is-pending[b-gzr1flja9o],
.swipe-review-decision.approve.is-native-press[b-gzr1flja9o] {
    border-color: rgba(150, 224, 183, 0.6);
    color: var(--jade-bright);
}

.swipe-review-decision.is-pending:disabled[b-gzr1flja9o] {
    opacity: 1;
}

.swipe-review-decision.is-subdued:disabled[b-gzr1flja9o] {
    opacity: 0.34;
}

.swipe-review-card[b-gzr1flja9o] {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(150, 224, 183, 0.2);
    border-radius: 8px;
    overflow: hidden;
    background: #0c120f;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35);
    transform: translateX(var(--swipe-x, 0)) rotate(var(--swipe-rotation, 0deg));
    transition:
        transform 160ms ease,
        border-color 160ms ease;
    touch-action: pan-y;
    user-select: none;
}

.swipe-review-card.is-dragging[b-gzr1flja9o] {
    transition: none;
    cursor: grabbing;
}

.swipe-review-art[b-gzr1flja9o] {
    position: relative;
    display: grid;
    place-items: center;
    padding: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
        #060907;
}

.swipe-review-art img[b-gzr1flja9o] {
    display: block;
    width: min(100%, 310px);
    max-height: min(58vh, 440px);
    aspect-ratio: 488 / 680;
    object-fit: contain;
    border-radius: 8px;
    transform-origin: center;
    backface-visibility: hidden;
}

.swipe-review-art img.is-face-flip[b-gzr1flja9o] {
    animation: swipe-review-face-flip-b-gzr1flja9o 360ms cubic-bezier(.2, .8, .2, 1);
}

.swipe-review-flip[b-gzr1flja9o] {
    position: absolute;
    right: 8px;
    top: 50%;
    z-index: 4;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(150, 224, 183, 0.42);
    border-radius: 50%;
    color: var(--jade-bright);
    background: rgba(10, 13, 11, 0.84);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transform: translateY(-50%);
    touch-action: manipulation;
    transition:
        border-color 120ms ease,
        background-color 120ms ease,
        color 120ms ease,
        transform 120ms ease;
}

.swipe-review-flip svg[b-gzr1flja9o] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.swipe-review-flip:hover[b-gzr1flja9o],
.swipe-review-flip:focus-visible[b-gzr1flja9o] {
    border-color: var(--jade);
    background: rgba(16, 30, 23, 0.94);
    transform: translateY(-50%) scale(1.06);
}

.swipe-review-flip.is-showing-back[b-gzr1flja9o] {
    border-color: rgba(217, 189, 113, 0.5);
    color: var(--gold);
    background: rgba(36, 31, 17, 0.9);
}

.swipe-review-flip:focus-visible[b-gzr1flja9o] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}

.swipe-review-art-empty[b-gzr1flja9o] {
    min-height: 360px;
    display: grid;
    place-items: center;
    padding: 20px;
    color: var(--ink-3);
    font: 900 18px/1.2 var(--font-ui);
    text-align: center;
}

.swipe-review-copy[b-gzr1flja9o] {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.swipe-review-title-row[b-gzr1flja9o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.swipe-review-title-row > div[b-gzr1flja9o] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.swipe-review-title-row strong[b-gzr1flja9o] {
    color: var(--ink);
    font: 900 17px/1.08 var(--font-ui);
}

.swipe-review-title-row span[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 800 12px/1 var(--font-ui);
}

.swipe-review-copy p[b-gzr1flja9o] {
    margin: 2px 0 0;
    color: var(--ink-2);
    font: 600 12px/1.45 var(--font-ui);
}

.swipe-review-details[b-gzr1flja9o] {
    width: fit-content;
}

.swipe-review-verdict[b-gzr1flja9o] {
    position: absolute;
    inset: 10px;
    z-index: 2;
    display: grid;
    place-items: start;
    pointer-events: none;
    opacity: 0;
}

.swipe-review-verdict svg[b-gzr1flja9o] {
    width: 72px;
    height: 72px;
    padding: 14px;
    border-radius: 999px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    background: rgba(0, 0, 0, 0.72);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
}

.swipe-review-verdict.approve[b-gzr1flja9o] {
    justify-items: end;
    color: var(--jade-bright);
    opacity: var(--swipe-approve, 0);
}

.swipe-review-verdict.reject[b-gzr1flja9o] {
    justify-items: start;
    color: #f0a39a;
    opacity: var(--swipe-reject, 0);
}

.swipe-review-complete[b-gzr1flja9o] {
    display: grid;
    gap: 8px;
    min-height: 260px;
    place-content: center;
    padding: 28px;
    border: 1px dashed rgba(150, 224, 183, 0.24);
    border-radius: 8px;
    color: var(--ink-2);
    text-align: center;
}

.swipe-review-complete strong[b-gzr1flja9o] {
    color: var(--ink);
    font: 900 18px/1.2 var(--font-ui);
}

.swipe-review-complete span[b-gzr1flja9o] {
    font: 600 12px/1.45 var(--font-ui);
}

.binder-grid[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.binder-cell[b-gzr1flja9o] {
    border: 1px solid var(--line);
    border-radius: 11px;
    overflow: hidden;
    background: var(--surf-raised);
    display: flex;
    flex-direction: column;
}

.binder-cell.is-excluded[b-gzr1flja9o] {
    opacity: 0.55;
}

.binder-cell.is-in-deck[b-gzr1flja9o] {
    border-color: rgba(150, 224, 183, 0.42);
    box-shadow: inset 0 0 0 1px rgba(150, 224, 183, 0.08);
}

.binder-cell.is-shortlisted[b-gzr1flja9o] {
    border-color: rgba(217, 189, 113, 0.38);
}

.binder-cell-info[b-gzr1flja9o] {
    padding: 9px 10px 4px;
}

.binder-card-title-button[b-gzr1flja9o] {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font: 700 12px/1.15 var(--font-ui);
    cursor: pointer;
}

.binder-card-title-button:hover[b-gzr1flja9o],
.binder-card-title-button:focus-visible[b-gzr1flja9o] {
    color: var(--jade-bright);
    outline: 0;
}

.binder-quadrant-mini[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    color: var(--ink-3);
    font: 800 9px/1.2 var(--font-ui);
    text-transform: uppercase;
}

.binder-quadrant-mini span:first-child[b-gzr1flja9o] {
    color: var(--gold);
}

.binder-quadrant-mini span:last-child[b-gzr1flja9o] {
    text-transform: none;
    letter-spacing: 0;
}

.role-chip-row[b-gzr1flja9o] {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.deck-status-pill[b-gzr1flja9o] {
    display: inline-flex;
    width: fit-content;
    margin-top: 7px;
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-3);
    background: rgba(255, 255, 255, 0.04);
    font: 900 9px/1 var(--font-ui);
    text-transform: uppercase;
}

.deck-status-pill.in-deck[b-gzr1flja9o] {
    border-color: rgba(150, 224, 183, 0.42);
    color: var(--jade-bright);
    background: rgba(103, 181, 141, 0.12);
}

.deck-status-pill.shortlisted[b-gzr1flja9o] {
    border-color: rgba(217, 189, 113, 0.42);
    color: var(--gold);
    background: rgba(217, 189, 113, 0.12);
}

.deck-status-pill.removed[b-gzr1flja9o] {
    border-color: rgba(204, 75, 63, 0.34);
    color: #f2ada4;
    background: rgba(204, 75, 63, 0.08);
}

.binder-cell-act[b-gzr1flja9o] {
    display: flex;
    gap: 6px;
    padding: 8px 10px 10px;
    margin-top: auto;
}

.binder-cell-act button[b-gzr1flja9o] {
    flex: 1;
    text-align: center;
    font: 700 10px/1 var(--font-ui);
    padding: 7px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
}

.binder-cell-act button:hover[b-gzr1flja9o] {
    border-color: var(--ink-3);
}

.binder-cell-act button.active[b-gzr1flja9o] {
    background: rgba(217, 189, 113, 0.12);
    border-color: rgba(217, 189, 113, 0.3);
    color: var(--gold);
}

.binder-cell-act button.pin.active[b-gzr1flja9o] {
    background: rgba(217, 189, 113, 0.16);
}

.binder-cell-act button.swap[b-gzr1flja9o] {
    border-color: rgba(150, 224, 183, 0.3);
    color: var(--jade-bright);
    background: rgba(103, 181, 141, 0.08);
}

.binder-cell-act button.locked[b-gzr1flja9o],
.binder-cell-act button:disabled[b-gzr1flja9o] {
    cursor: default;
    opacity: 0.68;
}

/* ── Inspector next-best-action specifics ────────────────────── */

.signal-row[b-gzr1flja9o] {
    display: flex;
    justify-content: space-between;
    font: 600 12px/1.9 var(--font-ui);
    color: var(--ink-2);
}

.signal-row strong[b-gzr1flja9o] {
    color: var(--ink);
}

.nba-title[b-gzr1flja9o] {
    display: block;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 5px;
    color: var(--ink);
}

.nba-detail[b-gzr1flja9o] {
    font: 500 11px/1.45 var(--font-ui);
    color: var(--ink-2);
    margin: 0 0 12px;
}

.nba-cta[b-gzr1flja9o] {
    width: 100%;
    justify-content: center;
}

/* ── Data table (binder table view + general) ────────────────── */

.table-wrap[b-gzr1flja9o] {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
}

.data-table[b-gzr1flja9o] {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font: 500 12px/1.4 var(--font-ui);
}

.data-table th[b-gzr1flja9o] {
    text-align: left;
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surf-raised);
    white-space: nowrap;
}

.data-table th:nth-child(1)[b-gzr1flja9o] {
    width: 60%;
}

.data-table th:nth-child(2)[b-gzr1flja9o] {
    width: 8%;
}

.data-table th:nth-child(3)[b-gzr1flja9o] {
    width: 7%;
}

.data-table th:nth-child(4)[b-gzr1flja9o],
.data-table th:nth-child(5)[b-gzr1flja9o] {
    width: 12.5%;
}

.table-sort-button[b-gzr1flja9o] {
    width: 100%;
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 11px 12px;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}

.table-sort-button:hover[b-gzr1flja9o],
.table-sort-button:focus-visible[b-gzr1flja9o],
.table-sort-button.active[b-gzr1flja9o] {
    color: var(--ink);
}

.table-sort-button:focus-visible[b-gzr1flja9o] {
    outline: 2px solid rgba(150, 224, 183, 0.45);
    outline-offset: -2px;
}

.table-sort-indicator[b-gzr1flja9o] {
    width: 1ch;
    color: var(--jade-bright);
    font-size: 10px;
}

.data-table td[b-gzr1flja9o] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    vertical-align: top;
}

.data-table tr:last-child td[b-gzr1flja9o] {
    border-bottom: 0;
}

.data-table tr.excluded-row[b-gzr1flja9o] {
    opacity: 0.5;
}

.cell-card[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.table-card-layout[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    text-align: left;
}

.table-card-image-button[b-gzr1flja9o],
.table-card-copy-button[b-gzr1flja9o] {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.table-card-image-button:hover + .table-card-content strong[b-gzr1flja9o],
.table-card-image-button:focus-visible + .table-card-content strong[b-gzr1flja9o],
.table-card-copy-button:hover strong[b-gzr1flja9o],
.table-card-copy-button:focus-visible strong[b-gzr1flja9o] {
    color: var(--jade-bright);
}

.table-card-image-button:focus-visible[b-gzr1flja9o],
.table-card-copy-button:focus-visible[b-gzr1flja9o],
.table-card-review-actions button:focus-visible[b-gzr1flja9o] {
    outline: 2px solid rgba(150, 224, 183, 0.45);
    outline-offset: 3px;
    border-radius: 6px;
}

.table-card-image-button img[b-gzr1flja9o],
.table-card-thumb-placeholder[b-gzr1flja9o] {
    display: block;
    width: 210px;
    height: 292px;
    border-radius: 9px;
    object-fit: contain;
    object-position: top;
    background: #050805;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 16px 28px rgba(0, 0, 0, 0.28);
}

.table-card-content[b-gzr1flja9o] {
    min-height: 292px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.table-card-copy[b-gzr1flja9o] {
    min-width: 0;
    display: grid;
    gap: 7px;
    padding-top: 22px;
}

.table-card-copy-button[b-gzr1flja9o] {
    width: 100%;
}

.table-card-copy-button strong[b-gzr1flja9o] {
    overflow: hidden;
    color: var(--ink);
    font: 900 19px/1.1 var(--font-ui);
    text-overflow: ellipsis;
}

.table-card-copy-button small[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 700 13px/1.35 var(--font-ui);
}

.table-card-roles[b-gzr1flja9o] {
    margin-top: 8px;
}

.table-card-reason[b-gzr1flja9o] {
    display: block;
    max-width: 58ch;
    font: 600 12px/1.45 var(--font-ui);
}

.table-card-review-actions[b-gzr1flja9o] {
    margin-top: auto;
    padding-top: 14px;
    flex-wrap: wrap;
}

.cell-type[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 500 10px/1.4 var(--font-ui);
}

.review-actions[b-gzr1flja9o] {
    display: flex;
    gap: 6px;
}

.review-button[b-gzr1flja9o] {
    font: 700 10px/1 var(--font-ui);
    padding: 6px 9px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
}

.review-button:hover[b-gzr1flja9o] {
    border-color: var(--ink-3);
}

.review-button.active[b-gzr1flja9o] {
    background: rgba(217, 189, 113, 0.12);
    border-color: rgba(217, 189, 113, 0.3);
    color: var(--gold);
}

/* ── Step 3 deck reveal ──────────────────────────────────────── */

.deck-reveal[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border-radius: var(--radius-card);
    background: linear-gradient(90deg, rgba(103, 181, 141, 0.12), transparent);
    border: 1px solid var(--line);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.deck-reveal.needs-review[b-gzr1flja9o] {
    background: linear-gradient(90deg, rgba(217, 189, 113, 0.12), transparent);
}

.reveal-seal[b-gzr1flja9o] {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(103, 181, 141, 0.16);
    border: 1px solid rgba(103, 181, 141, 0.4);
    display: grid;
    place-items: center;
    color: var(--jade-bright);
    font-size: 22px;
    font-weight: 800;
}

.deck-reveal.needs-review .reveal-seal[b-gzr1flja9o] {
    background: rgba(217, 189, 113, 0.16);
    border-color: rgba(217, 189, 113, 0.4);
    color: var(--gold);
}

.reveal-copy[b-gzr1flja9o] {
    min-width: 0;
}

.reveal-copy h2[b-gzr1flja9o] {
    font-weight: 800;
    font-size: 21px;
    margin: 0;
}

.reveal-copy p[b-gzr1flja9o] {
    margin: 3px 0 0;
    color: var(--ink-2);
    font: 500 12px/1.45 var(--font-ui);
}

.reveal-stats[b-gzr1flja9o] {
    display: flex;
    gap: 22px;
    margin-left: auto;
}

.reveal-stat strong[b-gzr1flja9o] {
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: 24px;
    display: block;
    line-height: 1;
}

.reveal-stat span[b-gzr1flja9o] {
    font: 600 10px/1 var(--font-ui);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reveal-cta[b-gzr1flja9o] {
    flex: 0 0 auto;
}

.deck-grid[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 16px;
    align-items: start;
}

.deck-main[b-gzr1flja9o] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.deck-board-block[b-gzr1flja9o] {
    overflow: hidden;
}

.deck-board-head[b-gzr1flja9o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.deck-board-head .block-title[b-gzr1flja9o] {
    margin-bottom: 0;
}

.deck-board-head > span[b-gzr1flja9o] {
    color: var(--jade-bright);
    font: 900 12px/1 var(--font-ui);
}

.deck-board-columns[b-gzr1flja9o] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 1fr);
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.deck-board-column[b-gzr1flja9o] {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.deck-board-column-head[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 11px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--line);
}

.deck-board-column-head strong[b-gzr1flja9o] {
    color: var(--ink);
    font: 900 12px/1.1 var(--font-ui);
}

.deck-board-column-head span[b-gzr1flja9o] {
    color: var(--gold);
    font: 900 11px/1 var(--font-ui);
}

.deck-board-card-list[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 460px;
    overflow-y: auto;
}

.deck-board-card-shell[b-gzr1flja9o] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.deck-board-card[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 6px 8px;
    border: 0;
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.deck-board-card:hover[b-gzr1flja9o] {
    background: rgba(103, 181, 141, 0.09);
}

.deck-board-card img[b-gzr1flja9o] {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    object-position: top;
    background: #050805;
}

.deck-board-card-copy[b-gzr1flja9o] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.deck-board-card-copy strong[b-gzr1flja9o] {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink);
    font: 800 11px/1.15 var(--font-ui);
    white-space: nowrap;
}

.deck-board-card-copy small[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 700 10px/1 var(--font-ui);
}

.deck-board-qty[b-gzr1flja9o] {
    min-width: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    padding: 4px 6px;
    color: #06120c;
    background: var(--jade);
    font: 900 10px/1 var(--font-ui);
}

.deck-board-card-meta[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.deck-board-edit-actions[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100% - 16px);
    height: 30px;
    margin: 0 8px 6px;
    overflow: hidden;
    border: 1px solid rgba(150, 224, 183, 0.18);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.16);
}

.deck-board-edit-actions button[b-gzr1flja9o],
.row-edit-actions button[b-gzr1flja9o] {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(150, 224, 183, 0.15);
    border-radius: 0;
    color: var(--ink-2);
    background: transparent;
    cursor: pointer;
    transition:
        background-color 120ms ease,
        color 120ms ease;
}

.deck-board-edit-actions button:first-child[b-gzr1flja9o],
.row-edit-actions button:first-child[b-gzr1flja9o] {
    border-left: 0;
}

.deck-board-edit-actions button[b-gzr1flja9o] {
    height: 100%;
    min-height: 0;
}

.deck-board-edit-actions button:hover[b-gzr1flja9o],
.row-edit-actions button:hover[b-gzr1flja9o] {
    color: var(--jade-bright);
    background: rgba(103, 181, 141, 0.12);
}

.deck-board-edit-actions button.shortlist:hover[b-gzr1flja9o],
.row-edit-actions button.shortlist:hover[b-gzr1flja9o] {
    color: var(--gold);
    background: rgba(217, 189, 113, 0.12);
}

.deck-board-edit-actions button.binder:hover[b-gzr1flja9o],
.row-edit-actions button.binder:hover[b-gzr1flja9o] {
    color: #f0c7a2;
    background: rgba(217, 158, 96, 0.11);
}

.deck-board-edit-actions button:focus-visible[b-gzr1flja9o],
.row-edit-actions button:focus-visible[b-gzr1flja9o] {
    z-index: 1;
    outline: 2px solid rgba(150, 224, 183, 0.55);
    outline-offset: -2px;
}

.deck-board-edit-actions button:disabled[b-gzr1flja9o],
.row-edit-actions button:disabled[b-gzr1flja9o] {
    cursor: default;
    opacity: 0.58;
}

.deck-edit-action-icon[b-gzr1flja9o] {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.review-block[b-gzr1flja9o] {
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 16px;
}

.block-title[b-gzr1flja9o] {
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: 16px;
    margin: 0 0 12px;
}

.validation-grid[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.validation-check[b-gzr1flja9o] {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 12px;
    background: var(--surf);
}

.validation-check strong[b-gzr1flja9o] {
    display: block;
    font: 700 12px/1.2 var(--font-ui);
}

.validation-check span[b-gzr1flja9o] {
    display: block;
    color: var(--ink-3);
    font: 500 10px/1.4 var(--font-ui);
    margin-top: 4px;
}

.validation-check.passing strong[b-gzr1flja9o] {
    color: var(--jade-bright);
}

.validation-check.failing[b-gzr1flja9o] {
    border-color: rgba(204, 75, 63, 0.45);
}

.validation-check.failing strong[b-gzr1flja9o] {
    color: var(--danger-text);
}

.validation-issue-list[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.validation-issue-list > div[b-gzr1flja9o] {
    border-left: 2px solid var(--danger);
    padding: 2px 0 2px 11px;
}

.validation-issue-list strong[b-gzr1flja9o] {
    font: 700 11px/1.2 var(--font-ui);
    color: var(--danger-text);
}

.validation-issue-list span[b-gzr1flja9o] {
    display: block;
    color: var(--ink-2);
    font: 500 11px/1.45 var(--font-ui);
    margin-top: 3px;
}

/* grouped deck list */
.deck-group-list[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.deck-group[b-gzr1flja9o] {
    border: 1px solid var(--line);
    border-radius: 11px;
    overflow: hidden;
    background: var(--surf);
}

.deck-group summary[b-gzr1flja9o] {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    background: var(--surf-raised);
}

.deck-group summary[b-gzr1flja9o]::-webkit-details-marker {
    display: none;
}

.group-id[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.group-id strong[b-gzr1flja9o] {
    font: 700 13px/1.1 var(--font-ui);
}

.group-id small[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 500 11px/1.1 var(--font-ui);
}

.group-ct[b-gzr1flja9o] {
    margin-left: auto;
    font: 800 13px/1 var(--font-ui);
    color: var(--jade-bright);
}

.deck-row[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid var(--line);
}

.row-q[b-gzr1flja9o] {
    font: 800 12px/1 var(--font-ui);
    color: var(--ink-3);
    width: 20px;
    flex: 0 0 20px;
}

.row-thumb[b-gzr1flja9o] {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 4px;
    line-height: 0;
}

.row-thumb img[b-gzr1flja9o] {
    width: 30px;
    height: 42px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}

.row-thumb:hover img[b-gzr1flja9o] {
    outline: 1px solid var(--jade);
}

.row-name[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.row-name small[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 500 10px/1.2 var(--font-ui);
}

.row-score[b-gzr1flja9o] {
    margin-left: auto;
    flex: 0 0 auto;
}

.row-ownership[b-gzr1flja9o] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.row-edit-actions[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: repeat(3, 28px);
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(150, 224, 183, 0.18);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.16);
}

.row-edit-actions button[b-gzr1flja9o] {
    min-width: 28px;
    min-height: 28px;
}

.insight-list[b-gzr1flja9o] {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--ink-2);
    font: 500 12px/1.55 var(--font-ui);
}

/* collection coverage */
.coverage-tabs[b-gzr1flja9o] {
    margin-bottom: 12px;
}

.coverage-tabs button[b-gzr1flja9o] {
    font-size: 10px;
}

.coverage-meter[b-gzr1flja9o] {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(150, 224, 183, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

.coverage-meter span[b-gzr1flja9o] {
    display: block;
    width: var(--coverage-pct);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--jade), var(--gold));
}

.coverage-kpis[b-gzr1flja9o],
.coverage-zone-list[b-gzr1flja9o],
.missing-card-list[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.coverage-kpis span[b-gzr1flja9o],
.coverage-zone-list > div[b-gzr1flja9o],
.missing-card-list > div[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--ink-2);
    font: 700 11px/1.25 var(--font-ui);
}

.coverage-kpis strong[b-gzr1flja9o],
.coverage-zone-list strong[b-gzr1flja9o],
.missing-card-list strong[b-gzr1flja9o] {
    color: var(--ink);
}

.coverage-zone-list span[b-gzr1flja9o],
.missing-card-list span[b-gzr1flja9o] {
    color: var(--ink-3);
}

.missing-export[b-gzr1flja9o] {
    margin-top: 12px;
}

/* deck export inspector card */
.deck-export[b-gzr1flja9o] {
    font: 500 10px/1.6 ui-monospace, monospace;
    color: var(--ink-2);
    white-space: pre;
    min-height: 120px;
}

.deck-export-cta[b-gzr1flja9o] {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}

.deck-export-next[b-gzr1flja9o] {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

.bossfight-alpha-copy[b-gzr1flja9o] {
    color: var(--ink-2);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0 0 12px;
}

/* ── Step 4 pilot guide ──────────────────────────────────────── */

.guide-grid[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.insight-lane-grid[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.insight-lane[b-gzr1flja9o] {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surf-raised);
}

.insight-lane h3[b-gzr1flja9o] {
    margin: 4px 0 10px;
    color: var(--ink);
    font-weight: 850;
    font-size: 17px;
}

.insight-lane p[b-gzr1flja9o] {
    margin: 0;
    color: var(--ink-2);
    font: 600 12px/1.5 var(--font-ui);
}

.insight-card-row[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.insight-card-row:first-of-type[b-gzr1flja9o] {
    border-top: 0;
}

.insight-card-row span[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 800 10px/1.2 var(--font-ui);
    text-align: right;
    white-space: nowrap;
}

.gcard[b-gzr1flja9o] {
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 18px;
}

.gcard h3[b-gzr1flja9o] {
    font-weight: 800;
    font-size: 17px;
    margin: 0 0 4px;
}

.gcard-d[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 600 11px/1.4 var(--font-ui);
    margin: 0 0 14px;
}

.prio[b-gzr1flja9o] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px dashed var(--line);
}

.prio:last-child[b-gzr1flja9o] {
    border-bottom: 0;
}

.prio-n[b-gzr1flja9o] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 6px;
    background: rgba(103, 181, 141, 0.13);
    color: var(--jade-bright);
    display: grid;
    place-items: center;
    font: 800 11px/1 var(--font-ui);
}

.prio strong[b-gzr1flja9o] {
    font: 700 12px/1.2 var(--font-ui);
}

.prio p[b-gzr1flja9o] {
    margin: 4px 0 0;
    font: 500 11.5px/1.5 var(--font-ui);
    color: var(--ink-2);
}

.phase[b-gzr1flja9o] {
    border-left: 2px solid var(--jade-deep);
    padding: 2px 0 2px 13px;
    margin-bottom: 14px;
}

.phase-l[b-gzr1flja9o] {
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 1px;
    color: var(--gold);
    text-transform: uppercase;
}

.phase strong[b-gzr1flja9o] {
    display: block;
    font: 700 13px/1.2 var(--font-ui);
    margin: 6px 0 5px;
}

.phase p[b-gzr1flja9o] {
    margin: 0;
    font: 500 12px/1.55 var(--font-ui);
    color: var(--ink-2);
}

.keyrole[b-gzr1flja9o] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 12px;
}

.keyrole:last-child[b-gzr1flja9o] {
    border-bottom: 0;
}

.keyrole-rl[b-gzr1flja9o] {
    font: 800 9px/1.6 var(--font-ui);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--jade-bright);
    padding-top: 2px;
    flex: 0 0 auto;
}

.keyrole-cs[b-gzr1flja9o] {
    text-align: right;
    color: var(--ink-2);
    line-height: 1.8;
}

.guide-risks[b-gzr1flja9o] {
    margin-top: 16px;
}

.ai-guide-placeholder[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-card);
    background: var(--surf-raised);
    flex-wrap: wrap;
}

.ai-guide-placeholder strong[b-gzr1flja9o] {
    display: block;
    font: 700 13px/1.2 var(--font-ui);
    color: var(--jade-bright);
}

.ai-guide-placeholder span[b-gzr1flja9o] {
    color: var(--ink-2);
    font: 500 12px/1.5 var(--font-ui);
}

.ai-guide-placeholder > span[b-gzr1flja9o] {
    text-align: right;
}

/* ── Step 5 shopping ─────────────────────────────────────────── */

.shop-grid[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 16px;
    align-items: start;
}

.budget-card[b-gzr1flja9o] {
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 16px;
}

.budget-card .build-eyebrow[b-gzr1flja9o] {
    margin-bottom: 10px;
}

.budget-amt[b-gzr1flja9o] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 4px 0 2px;
}

.budget-amt strong[b-gzr1flja9o] {
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
}

.budget-amt span[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 600 13px/1 var(--font-ui);
}

.budget-presets[b-gzr1flja9o] {
    display: flex;
    gap: 6px;
    margin: 14px 0 12px;
}

.budget-presets span[b-gzr1flja9o] {
    flex: 1;
    text-align: center;
    font: 700 11px/1 var(--font-ui);
    padding: 8px 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-2);
}

.budget-presets span.on[b-gzr1flja9o] {
    background: rgba(103, 181, 141, 0.14);
    color: var(--ink);
    border-color: rgba(103, 181, 141, 0.3);
}

.budget-card input[type="range"][b-gzr1flja9o] {
    width: 100%;
    accent-color: var(--jade);
}

.shop-swaps[b-gzr1flja9o] {
    min-width: 0;
}

.swap[b-gzr1flja9o] {
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.swap.is-placeholder[b-gzr1flja9o] {
    opacity: 0.6;
}

.swap-impact[b-gzr1flja9o] {
    width: 64px;
    text-align: center;
    flex: 0 0 auto;
}

.swap-impact strong[b-gzr1flja9o] {
    color: var(--jade-bright);
    font: 800 13px/1 var(--font-ui);
}

.swap-impact small[b-gzr1flja9o] {
    display: block;
    color: var(--ink-3);
    font: 600 9px/1 var(--font-ui);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-top: 3px;
}

.swap-pair[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.swap-out[b-gzr1flja9o] {
    color: var(--ink-2);
    text-decoration: line-through;
    font: 600 12px/1.2 var(--font-ui);
}

.swap-arrow[b-gzr1flja9o] {
    color: var(--jade);
    font-size: 18px;
}

.swap-in strong[b-gzr1flja9o] {
    font: 700 13px/1.2 var(--font-ui);
}

.swap-in small[b-gzr1flja9o] {
    display: block;
    color: var(--jade-bright);
    font: 700 10px/1 var(--font-ui);
    margin-top: 4px;
}

.swap-price[b-gzr1flja9o] {
    text-align: right;
    flex: 0 0 auto;
}

.swap-price strong[b-gzr1flja9o] {
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: 17px;
}

.swap-price small[b-gzr1flja9o] {
    display: block;
    color: var(--ink-3);
    font: 600 10px/1 var(--font-ui);
}

.shop-context[b-gzr1flja9o] {
    margin-top: 4px;
}

.shop-signal-list[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-signal-list strong[b-gzr1flja9o] {
    display: block;
    font: 700 12px/1.2 var(--font-ui);
}

.shop-signal-list span[b-gzr1flja9o] {
    display: block;
    color: var(--ink-2);
    font: 500 11px/1.5 var(--font-ui);
    margin-top: 4px;
}

/* ── Format-info modal (kept; restyled) ──────────────────────── */

.format-modal-backdrop[b-gzr1flja9o] {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(6, 8, 6, 0.7);
    backdrop-filter: blur(2px);
}

.format-info-modal[b-gzr1flja9o] {
    width: 640px;
    max-width: 94%;
    max-height: 90vh;
    overflow-y: auto;
    background: #0e1411;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
}

.format-modal-head[b-gzr1flja9o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.format-modal-head h2[b-gzr1flja9o] {
    font-weight: 800;
    font-size: 22px;
    margin: 0 0 6px;
}

.format-modal-head p[b-gzr1flja9o] {
    margin: 0;
    color: var(--ink-2);
    font: 500 12px/1.5 var(--font-ui);
}

.build-flow-backdrop[b-gzr1flja9o] {
    z-index: 70;
}

.deck-edit-backdrop[b-gzr1flja9o] {
    z-index: 75;
}

.build-flow-modal[b-gzr1flja9o] {
    width: min(720px, 94vw);
}

.deck-edit-modal[b-gzr1flja9o] {
    width: min(880px, 94vw);
}

.deck-edit-layout[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.deck-edit-preview[b-gzr1flja9o] {
    min-height: 320px;
    border: 1px solid rgba(150, 224, 183, 0.22);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.deck-edit-preview img[b-gzr1flja9o] {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    object-position: top;
}

.deck-edit-preview-placeholder[b-gzr1flja9o] {
    min-height: 320px;
    display: grid;
    place-items: center;
    padding: 20px;
    color: var(--ink-3);
    font: 900 12px/1.3 var(--font-ui);
    text-align: center;
    text-transform: uppercase;
}

.deck-edit-form[b-gzr1flja9o] {
    display: grid;
    gap: 13px;
}

.deck-edit-form label[b-gzr1flja9o] {
    display: grid;
    gap: 6px;
    color: var(--ink-2);
    font: 900 10px/1 var(--font-ui);
    text-transform: uppercase;
}

.deck-edit-summary[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid rgba(217, 189, 113, 0.25);
    border-radius: 8px;
    background: rgba(217, 189, 113, 0.08);
    color: var(--ink-2);
    font: 700 12px/1.3 var(--font-ui);
}

.deck-edit-summary strong[b-gzr1flja9o] {
    color: var(--ink);
}

.deck-edit-actions[b-gzr1flja9o] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.build-flow-choice-list[b-gzr1flja9o] {
    display: grid;
    gap: 10px;
}

.build-flow-choice[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(103, 181, 141, 0.22);
    border-radius: 12px;
    color: var(--ink);
    background: rgba(103, 181, 141, 0.07);
    text-align: left;
    cursor: pointer;
}

.build-flow-choice:hover[b-gzr1flja9o] {
    border-color: rgba(103, 181, 141, 0.48);
    background: rgba(103, 181, 141, 0.12);
}

.build-flow-choice.danger[b-gzr1flja9o] {
    border-color: rgba(204, 75, 63, 0.32);
    background: rgba(204, 75, 63, 0.08);
}

.build-flow-choice.danger:hover[b-gzr1flja9o] {
    border-color: rgba(204, 75, 63, 0.52);
    background: rgba(204, 75, 63, 0.13);
}

.build-flow-choice strong[b-gzr1flja9o] {
    font: 900 14px/1.2 var(--font-ui);
}

.build-flow-choice span[b-gzr1flja9o] {
    color: var(--ink-2);
    font: 600 12px/1.45 var(--font-ui);
}

.build-flow-progress[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(217, 189, 113, 0.26);
    border-radius: 14px;
    background:
        radial-gradient(circle at 20% 10%, rgba(217, 189, 113, 0.18), transparent 30%),
        rgba(0, 0, 0, 0.16);
}

.build-flow-rune[b-gzr1flja9o] {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(239, 246, 234, 0.12);
    animation: build-flow-spin-b-gzr1flja9o 1700ms linear infinite;
}

.build-flow-rune span[b-gzr1flja9o] {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 14px currentColor;
}

.build-flow-rune span:nth-child(1)[b-gzr1flja9o] { top: -3px; left: 18px; color: #f3e6c4; }
.build-flow-rune span:nth-child(2)[b-gzr1flja9o] { top: 14px; right: 0; color: #6aa6d8; }
.build-flow-rune span:nth-child(3)[b-gzr1flja9o] { right: 6px; bottom: 4px; color: #6f687a; }
.build-flow-rune span:nth-child(4)[b-gzr1flja9o] { left: 6px; bottom: 4px; color: #d36a5e; }
.build-flow-rune span:nth-child(5)[b-gzr1flja9o] { top: 14px; left: 0; color: #69b979; }

.build-flow-progress strong[b-gzr1flja9o] {
    display: block;
    color: var(--ink);
    font: 900 14px/1.2 var(--font-ui);
}

.build-flow-progress span[b-gzr1flja9o] {
    display: block;
    margin-top: 5px;
    color: var(--ink-2);
    font: 650 13px/1.45 var(--font-ui);
}

.build-flow-meter[b-gzr1flja9o] {
    grid-column: 1 / -1;
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.build-flow-meter span[b-gzr1flja9o] {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--jade), var(--gold));
    animation: build-flow-meter-b-gzr1flja9o 1300ms ease-in-out infinite alternate;
}

@keyframes build-flow-spin-b-gzr1flja9o {
    to {
        transform: rotate(360deg);
    }
}

@keyframes build-flow-meter-b-gzr1flja9o {
    from {
        transform: translateX(-38%);
    }
    to {
        transform: translateX(176%);
    }
}

@keyframes swipe-review-face-flip-b-gzr1flja9o {
    0% {
        opacity: 0.36;
        transform: rotateY(82deg) scale(0.98);
    }

    60% {
        opacity: 1;
        transform: rotateY(-8deg) scale(1);
    }

    100% {
        transform: rotateY(0) scale(1);
    }
}

@keyframes swipe-review-decision-fill-b-gzr1flja9o {
    0% {
        opacity: 1;
        transform: scaleX(0.18);
    }

    18% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

.binder-review-modal[b-gzr1flja9o] {
    width: min(1080px, 96vw);
    padding: 0;
}

.binder-review-layout[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    min-height: min(760px, 88vh);
}

.binder-review-media[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background:
        radial-gradient(circle at 50% 24%, rgba(103, 181, 141, 0.18), transparent 34%),
        #080d0a;
}

.binder-review-media img[b-gzr1flja9o] {
    width: 100%;
    max-height: 620px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.58);
}

.binder-review-status-row[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ink-3);
    font: 800 11px/1 var(--font-ui);
}

.binder-review-status[b-gzr1flja9o] {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: var(--ink-2);
    background: rgba(255, 255, 255, 0.05);
    padding: 7px 10px;
}

.binder-review-status.is-kept[b-gzr1flja9o] {
    color: #06120c;
    border-color: transparent;
    background: var(--jade);
}

.binder-review-status.is-in-deck[b-gzr1flja9o] {
    color: var(--jade-bright);
    border-color: rgba(150, 224, 183, 0.44);
    background: rgba(103, 181, 141, 0.12);
}

.binder-review-status.is-removed[b-gzr1flja9o] {
    color: var(--danger-text);
    border-color: rgba(204, 75, 63, 0.38);
    background: rgba(204, 75, 63, 0.1);
}

.binder-review-detail[b-gzr1flja9o] {
    min-width: 0;
    padding: 20px;
    overflow-y: auto;
}

.binder-review-head[b-gzr1flja9o] {
    margin-bottom: 14px;
}

.binder-review-head h2[b-gzr1flja9o] {
    font-size: 26px;
}

.binder-quadrant-card[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    padding: 14px;
    border: 1px solid rgba(103, 181, 141, 0.24);
    border-radius: 12px;
    background: rgba(103, 181, 141, 0.07);
}

.binder-quadrant-chart[b-gzr1flja9o] {
    position: relative;
    min-height: 260px;
    border: 1px solid rgba(239, 246, 234, 0.18);
    border-radius: 10px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(238, 202, 104, 0.09) 0 50%, rgba(103, 181, 141, 0.12) 50% 100%),
        linear-gradient(0deg, rgba(204, 75, 63, 0.08) 0 50%, rgba(103, 181, 141, 0.09) 50% 100%),
        #0a100d;
}

.quadrant-line[b-gzr1flja9o] {
    position: absolute;
    background: rgba(239, 246, 234, 0.16);
}

.quadrant-line.vertical[b-gzr1flja9o] {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
}

.quadrant-line.horizontal[b-gzr1flja9o] {
    left: 0;
    right: 0;
    bottom: 50%;
    height: 1px;
}

.quadrant-label[b-gzr1flja9o],
.quadrant-axis[b-gzr1flja9o] {
    position: absolute;
    z-index: 1;
    color: rgba(239, 246, 234, 0.68);
    font: 900 9px/1 var(--font-ui);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.quadrant-label.top-left[b-gzr1flja9o] { left: 10px; top: 10px; }
.quadrant-label.top-right[b-gzr1flja9o] { right: 10px; top: 10px; color: var(--jade-bright); }
.quadrant-label.bottom-left[b-gzr1flja9o] { left: 10px; bottom: 10px; color: var(--danger-text); }
.quadrant-label.bottom-right[b-gzr1flja9o] { right: 10px; bottom: 10px; color: var(--gold); }

.quadrant-axis.x[b-gzr1flja9o] {
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
}

.quadrant-axis.y[b-gzr1flja9o] {
    top: 50%;
    left: 6px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
}

.quadrant-dot[b-gzr1flja9o] {
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 18px;
    border: 3px solid #06120c;
    border-radius: 50%;
    background: var(--jade-bright);
    box-shadow: 0 0 0 5px rgba(103, 181, 141, 0.2), 0 8px 18px rgba(0, 0, 0, 0.4);
    transform: translate(-50%, 50%);
}

.binder-quadrant-summary[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.binder-quadrant-summary strong[b-gzr1flja9o] {
    color: var(--ink);
    font: 900 22px/1.1 var(--font-disp);
}

.binder-quadrant-summary span[b-gzr1flja9o] {
    color: var(--gold);
    font: 900 11px/1.2 var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.binder-quadrant-summary p[b-gzr1flja9o],
.binder-review-reason[b-gzr1flja9o] {
    color: var(--ink-2);
    font: 500 13px/1.55 var(--font-ui);
    margin: 0;
}

.binder-review-section[b-gzr1flja9o] {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.binder-score-breakdown[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 9px;
    margin-top: 12px;
}

.binder-score-row[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.16);
}

.binder-score-row span[b-gzr1flja9o] {
    color: var(--ink);
    font: 850 11px/1.2 var(--font-ui);
}

.binder-score-row strong[b-gzr1flja9o] {
    color: var(--jade-bright);
    font: 900 11px/1.2 var(--font-ui);
}

.binder-score-row small[b-gzr1flja9o] {
    grid-column: 1 / -1;
    color: var(--ink-3);
    font: 500 11px/1.4 var(--font-ui);
}

.binder-review-note[b-gzr1flja9o] {
    min-height: 106px;
    resize: vertical;
}

.binder-review-note-actions[b-gzr1flja9o],
.binder-review-actions[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    flex-wrap: wrap;
}

.binder-review-note-actions span[b-gzr1flja9o] {
    color: var(--ink-3);
    font: 600 11px/1.4 var(--font-ui);
}

.binder-review-actions[b-gzr1flja9o] {
    justify-content: flex-end;
}

.format-concept-grid[b-gzr1flja9o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.format-concept-card[b-gzr1flja9o] {
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 13px;
}

.format-concept-card strong[b-gzr1flja9o] {
    display: block;
    font: 700 12px/1.2 var(--font-ui);
}

.format-concept-card span[b-gzr1flja9o] {
    display: block;
    color: var(--ink-2);
    font: 500 11px/1.5 var(--font-ui);
    margin-top: 5px;
}

.format-guardrails .build-eyebrow[b-gzr1flja9o] {
    margin-bottom: 6px;
}

.format-rule-list[b-gzr1flja9o] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 12px;
}

.format-rule-list > div[b-gzr1flja9o] {
    border-left: 2px solid var(--jade-deep);
    padding: 2px 0 2px 12px;
}

.format-rule-list strong[b-gzr1flja9o] {
    font: 700 12px/1.2 var(--font-ui);
}

.format-rule-list span[b-gzr1flja9o] {
    display: block;
    color: var(--ink-2);
    font: 500 11px/1.5 var(--font-ui);
    margin-top: 3px;
}

/* ── Focus-visible outlines for page-specific interactive controls ── */

.review-button:focus-visible[b-gzr1flja9o],
.binder-cell-act button:focus-visible[b-gzr1flja9o],
.info-icon-button:focus-visible[b-gzr1flja9o],
.color-button:focus-visible[b-gzr1flja9o],
.view-toggle button:focus-visible[b-gzr1flja9o],
.commander-option:focus-visible[b-gzr1flja9o],
.deck-cover-stack:focus-visible[b-gzr1flja9o] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}

/* ── Responsive collapse of the cockpit/deck/guide/shop grids ── */

@media (max-width: 920px) {
    .deck-manager-head[b-gzr1flja9o],
    .active-deck-bar[b-gzr1flja9o] {
        flex-direction: column;
        align-items: stretch;
    }

    .active-deck-bar[b-gzr1flja9o] {
        align-items: flex-start;
    }

    .subscription-card[b-gzr1flja9o] {
        min-width: 0;
    }

    .deck-slot-layout[b-gzr1flja9o],
    .strategy-layout.has-commander[b-gzr1flja9o],
    .cockpit[b-gzr1flja9o],
    .deck-grid[b-gzr1flja9o],
    .guide-grid[b-gzr1flja9o],
    .insight-lane-grid[b-gzr1flja9o],
    .shop-grid[b-gzr1flja9o] {
        grid-template-columns: 1fr;
    }

    .setup-grid[b-gzr1flja9o],
    .brief-grid[b-gzr1flja9o] {
        grid-template-columns: 1fr;
    }

    .reveal-stats[b-gzr1flja9o] {
        margin-left: 0;
    }

    .commander-showcase[b-gzr1flja9o] {
        position: static;
        max-width: 280px;
    }

    .binder-review-layout[b-gzr1flja9o],
    .deck-edit-layout[b-gzr1flja9o],
    .binder-quadrant-card[b-gzr1flja9o] {
        grid-template-columns: minmax(0, 1fr);
    }

    .binder-review-layout[b-gzr1flja9o] {
        min-height: 0;
    }

    .binder-review-media[b-gzr1flja9o] {
        max-height: none;
    }

    .binder-review-media img[b-gzr1flja9o] {
        max-height: 420px;
    }

    .swipe-review-progress[b-gzr1flja9o] {
        display: none;
    }

    .deck-edit-preview[b-gzr1flja9o],
    .deck-edit-preview img[b-gzr1flja9o],
    .deck-edit-preview-placeholder[b-gzr1flja9o] {
        min-height: 260px;
    }
}

@media (max-width: 700px) {
    .binder-control-row-filters[b-gzr1flja9o] {
        grid-template-columns: minmax(0, 1fr);
    }

    .deck-board-columns[b-gzr1flja9o] {
        grid-auto-columns: minmax(220px, 82vw);
    }

    .swipe-review-shell[b-gzr1flja9o] {
        padding: 12px;
    }

    .swipe-review-progress[b-gzr1flja9o] {
        display: none;
    }

    .swipe-review-stage[b-gzr1flja9o] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .swipe-review-card[b-gzr1flja9o] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .swipe-review-decision[b-gzr1flja9o] {
        grid-row: 2;
        min-height: 62px;
    }

    .swipe-review-decision.reject[b-gzr1flja9o] {
        grid-column: 1;
    }

    .swipe-review-decision.approve[b-gzr1flja9o] {
        grid-column: 2;
    }

    .swipe-review-decision svg[b-gzr1flja9o] {
        width: 30px;
        height: 30px;
    }

    .swipe-review-art img[b-gzr1flja9o] {
        max-height: 54vh;
    }

    .swipe-review-copy[b-gzr1flja9o] {
        padding: 12px;
    }

    .build-flow-rune[b-gzr1flja9o],
    .build-flow-meter span[b-gzr1flja9o] {
        animation: none;
    }
}

@media (max-width: 620px) {
    .deck-manager[b-gzr1flja9o] {
        padding-inline: 12px;
    }

    .deck-slot-shelf[b-gzr1flja9o],
    .deck-slot-config[b-gzr1flja9o],
    .deck-slot-card[b-gzr1flja9o] {
        padding: 14px;
    }

    .deck-slot-config[b-gzr1flja9o] {
        position: static;
    }

    .deck-slot-grid[b-gzr1flja9o] {
        grid-template-columns: minmax(0, 1fr);
    }

    .deck-title-overlay strong[b-gzr1flja9o] {
        font-size: 18px;
    }

    .commander-printing-grid[b-gzr1flja9o] {
        grid-template-columns: minmax(0, 1fr);
    }

    .deck-delete-actions .btn[b-gzr1flja9o] {
        flex: 1 1 130px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .build-flow-rune[b-gzr1flja9o],
    .build-flow-meter span[b-gzr1flja9o],
    .swipe-review-art img.is-face-flip[b-gzr1flja9o],
    .swipe-review-decision.is-pending[b-gzr1flja9o]::before,
    .swipe-review-decision.is-native-press[b-gzr1flja9o]::before {
        animation: none;
    }

    .swipe-review-decision.is-pending[b-gzr1flja9o]::before,
    .swipe-review-decision.is-native-press[b-gzr1flja9o]::before {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Familiar upsell button (replaces the workspace badge in the deck-slots header). */
.familiar-upsell-btn[b-gzr1flja9o] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--radius-ctrl);
    padding: 8px 14px;
    font: 700 12.5px var(--font-ui);
    cursor: pointer;
    background: linear-gradient(180deg, #2a2417, #1d1a12);
    border: 1px solid var(--gold);
    color: var(--gold);
    box-shadow: 0 0 0 1px rgba(217, 189, 113, 0.12);
    transition: filter 0.12s ease;
}
.familiar-upsell-btn:hover[b-gzr1flja9o] { filter: brightness(1.1); }

.deck-slot-layout--single[b-gzr1flja9o] { grid-template-columns: minmax(0, 1fr); }

/* Edit affordance: a full-bleed bottom strip carrying the "Last Updated"
   meta on the left and a tiny pencil on the right. The whole strip opens
   the deck settings modal, freeing the card cover to fill the tile above. */
.deck-edit-bar[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: calc(100% + 16px);
    min-height: 26px;
    padding: 5px 10px;
    margin: 0 -8px -8px;          /* full-bleed past the card's 8px padding */
    border-top: 1px solid var(--line);
    border-radius: 0 0 7px 7px;   /* match the card's bottom corners */
    background: rgba(255, 255, 255, 0.035);
    color: var(--ink-3);
}

.deck-edit-acts[b-gzr1flja9o] { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.deck-edit-act[b-gzr1flja9o] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--ink-3);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.deck-edit-act:hover:not(:disabled)[b-gzr1flja9o] { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.deck-edit-act--play:hover:not(:disabled)[b-gzr1flja9o] { color: var(--jade); }
.deck-edit-act:disabled[b-gzr1flja9o] { opacity: 0.5; cursor: default; }

.deck-edit-bar-meta[b-gzr1flja9o] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font: 600 11px/1.3 var(--font-ui);
}
.deck-edit-bar svg[b-gzr1flja9o] { display: block; flex-shrink: 0; }

/* Shelf: table of inactive decks below the active slots. */
.deck-shelf[b-gzr1flja9o] { margin-top: 26px; }
.shelf-table[b-gzr1flja9o] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13px;
}
.shelf-table th[b-gzr1flja9o] {
    text-align: left;
    font: 700 10px var(--font-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
}
.shelf-table td[b-gzr1flja9o] {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    vertical-align: middle;
}
.shelf-name[b-gzr1flja9o] { color: var(--ink); font-weight: 700; }
.shelf-meta[b-gzr1flja9o] { white-space: nowrap; color: var(--ink-3); }
.shelf-actions[b-gzr1flja9o] { display: flex; gap: 8px; justify-content: flex-end; }
.shelf-delete[b-gzr1flja9o] {
    font: 800 0.82rem/1.1 var(--font-ui);
    border-radius: var(--radius-ctrl);
    padding: 8px 12px;
    cursor: pointer;
    background: none;
    color: var(--danger-text);
    border: 1px solid var(--danger);
}
.shelf-delete:disabled[b-gzr1flja9o] { opacity: 0.5; cursor: not-allowed; }
/* /Pages/Collection.razor.rz.scp.css */
/* ============================================================
   Collection page — scoped styles
   ============================================================ */

/* ── Auth gate ─────────────────────────────────────────────────── */

.col-auth-gate[b-hja8uda08o] {
    width: min(620px, calc(100% - 32px));
    margin: 56px auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surf-raised);
    padding: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.col-auth-kicker[b-hja8uda08o] {
    margin: 0 0 7px;
    color: var(--ink-3);
    font: 800 10px/1 var(--font-ui);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.col-auth-copy[b-hja8uda08o] {
    margin: 9px 0 0;
    color: var(--ink-2);
    font: 500 13px/1.5 var(--font-ui);
}

@media (max-width: 640px) {
    .col-auth-gate[b-hja8uda08o] {
        flex-direction: column;
    }
}

/* ── Stage wrapper ───────────────────────────────────────────── */

.col-stage[b-hja8uda08o] {
    position: relative;
    z-index: 1;
}

/* ── Page header ─────────────────────────────────────────────── */

/* .col-title is used by the signed-out auth gate (the page masthead now
   comes from StageMasthead). */
.col-title[b-hja8uda08o] {
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: 26px;
    margin: 0;
    line-height: 1.1;
}

/* Count chips + source controls live in the masthead's Trailing slot. */
.col-head-trailing[b-hja8uda08o] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.col-chip[b-hja8uda08o] {
    font: 700 11px/1 var(--font-ui);
    color: var(--ink-2);
    background: var(--surf-raised);
    border: 1px solid var(--line);
    padding: 7px 11px;
    border-radius: 99px;
    white-space: nowrap;
}

/* ── Import panel ─────────────────────────────────────────────── */

.col-import-panel[b-hja8uda08o] {
    background: var(--surf-raised);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.col-import-inner[b-hja8uda08o] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.col-import-hd[b-hja8uda08o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.col-import-title[b-hja8uda08o] {
    font-family: var(--font-disp);
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 4px;
}

.col-import-sub[b-hja8uda08o] {
    font-size: 0.83rem;
    color: var(--ink-2);
    margin: 0;
}

.col-import-row[b-hja8uda08o] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.col-import-options[b-hja8uda08o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.col-import-option[b-hja8uda08o] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.col-import-option-wide[b-hja8uda08o] {
    max-width: 920px;
}

.col-import-option-title[b-hja8uda08o] {
    font: 800 13px/1.2 var(--font-ui);
    color: var(--ink);
    margin: 0 0 5px;
}

.col-import-option-sub[b-hja8uda08o] {
    font: 500 11px/1.45 var(--font-ui);
    color: var(--ink-2);
    margin: 0;
}

.col-source-current[b-hja8uda08o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
}

.col-source-current > div[b-hja8uda08o] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.col-source-current strong[b-hja8uda08o] {
    color: var(--ink);
    font: 800 13px/1 var(--font-ui);
}

.col-source-current small[b-hja8uda08o],
.col-source-label[b-hja8uda08o] {
    color: var(--ink-3);
    font: 700 10px/1.2 var(--font-ui);
}

.col-source-label[b-hja8uda08o] {
    letter-spacing: 1px;
    text-transform: uppercase;
}

.col-source-current a[b-hja8uda08o] {
    color: var(--jade-bright);
    flex: 0 0 auto;
    font: 800 11px/1 var(--font-ui);
    text-decoration: none;
}

.col-source-current a:hover[b-hja8uda08o] {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .col-source-current[b-hja8uda08o] {
        align-items: flex-start;
        flex-direction: column;
    }
}

.col-import-input[b-hja8uda08o] {
    flex: 1 1 280px;
    min-width: 0;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: var(--surf-raised);
    color: var(--ink);
    font: 600 12px/1 var(--font-ui);
    padding: 0 12px;
}

.col-import-input:focus[b-hja8uda08o] {
    outline: none;
    border-color: var(--jade);
    box-shadow: 0 0 0 2px rgba(91, 168, 107, 0.18);
}

/* Moxfield import wait state */
.col-moxfield-wait[b-hja8uda08o] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4, 7, 6, 0.72);
    backdrop-filter: blur(8px);
}

.col-moxfield-dialog[b-hja8uda08o] {
    width: min(420px, 100%);
    border: 1px solid rgba(103, 181, 141, 0.32);
    border-radius: 8px;
    background: var(--surf);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.col-moxfield-mark[b-hja8uda08o] {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(103, 181, 141, 0.32);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.col-moxfield-mark span[b-hja8uda08o] {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(103, 181, 141, 0.24);
    border-top-color: var(--jade-bright);
    border-radius: 50%;
    animation: col-spin-b-hja8uda08o 0.9s linear infinite;
}

.col-moxfield-title[b-hja8uda08o] {
    color: var(--ink);
    font-family: var(--font-disp);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 6px;
}

.col-moxfield-status[b-hja8uda08o] {
    color: var(--ink-2);
    font: 600 13px/1.45 var(--font-ui);
    margin: 0;
}

.col-moxfield-progress[b-hja8uda08o] {
    height: 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surf-raised);
}

.col-moxfield-progress span[b-hja8uda08o] {
    display: block;
    height: 100%;
    min-width: 8px;
    border-radius: inherit;
    background: var(--jade-bright);
    transition: width 0.35s ease;
}

.col-moxfield-foot[b-hja8uda08o] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: var(--ink-3);
    font: 700 11px/1.3 var(--font-ui);
}

@keyframes col-spin-b-hja8uda08o {
    to {
        transform: rotate(360deg);
    }
}

/* File picker */
.col-file-picker[b-hja8uda08o] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    cursor: pointer;
    transition: border-color 0.12s;
}

.col-file-picker:hover[b-hja8uda08o] {
    border-color: var(--jade);
}

.col-file-label[b-hja8uda08o] {
    font: 600 12px/1 var(--font-ui);
    color: var(--ink-2);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-file-picker input[type="file"][b-hja8uda08o] {
    /* Show the native file input but keep it tiny */
    font-size: 0.8rem;
    color: var(--ink-3);
}

/* ── Import result block ─────────────────────────────────────── */

.col-import-result[b-hja8uda08o] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.col-import-res-hd[b-hja8uda08o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.col-import-res-hd strong[b-hja8uda08o] {
    font: 700 13px/1 var(--font-ui);
    color: var(--ink);
}

.col-import-metrics[b-hja8uda08o] {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.col-import-actions[b-hja8uda08o] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.col-metric[b-hja8uda08o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.col-metric span[b-hja8uda08o] {
    font: 600 10px/1 var(--font-ui);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.col-metric strong[b-hja8uda08o] {
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
}

/* ── Status badges ───────────────────────────────────────────── */

.col-status[b-hja8uda08o] {
    font: 700 10px/1 var(--font-ui);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.col-status.applied[b-hja8uda08o],
.col-status.legal[b-hja8uda08o] {
    color: var(--jade-bright);
    background: rgba(91, 168, 107, 0.15);
    border: 1px solid rgba(91, 168, 107, 0.3);
}

.col-status.failed[b-hja8uda08o] {
    color: var(--danger-text);
    background: rgba(204, 75, 63, 0.12);
    border: 1px solid rgba(204, 75, 63, 0.3);
}

.col-status.needsreview[b-hja8uda08o] {
    color: var(--gold);
    background: rgba(217, 189, 113, 0.12);
    border: 1px solid rgba(217, 189, 113, 0.3);
}

.col-status.running[b-hja8uda08o],
.col-status.created[b-hja8uda08o] {
    color: var(--ink-2);
    background: var(--surf-raised);
    border: 1px solid var(--line);
}

.col-status.prepared[b-hja8uda08o] {
    color: var(--gold);
    background: rgba(217, 189, 113, 0.12);
    border: 1px solid rgba(217, 189, 113, 0.3);
}

.col-status.canceled[b-hja8uda08o] {
    color: var(--ink-2);
    background: var(--surf-raised);
    border: 1px solid var(--line);
}

/* Delta badges */
.col-delta[b-hja8uda08o] {
    font: 800 12px/1 var(--font-ui);
    padding: 3px 7px;
    border-radius: 5px;
}

.col-delta.added[b-hja8uda08o] {
    color: var(--jade-bright);
    background: rgba(91, 168, 107, 0.15);
}

.col-delta.removed[b-hja8uda08o] {
    color: var(--danger-text);
    background: rgba(204, 75, 63, 0.12);
}

.col-delta.quantitychanged[b-hja8uda08o] {
    color: var(--gold);
    background: rgba(217, 189, 113, 0.12);
}

/* ── Review grid (rows + deltas) ─────────────────────────────── */

.col-review-grid[b-hja8uda08o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.col-table-panel[b-hja8uda08o] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.col-table-hd[b-hja8uda08o] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.col-table-hd h3[b-hja8uda08o] {
    font: 700 13px/1 var(--font-ui);
    margin: 0;
    color: var(--ink);
}

.col-table-wrap[b-hja8uda08o] {
    overflow-x: auto;
}

.col-table-wrap table[b-hja8uda08o] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.col-table-wrap th[b-hja8uda08o] {
    font: 700 10px/1 var(--font-ui);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 8px 12px;
    text-align: left;
    background: var(--surf-raised);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.col-table-wrap td[b-hja8uda08o] {
    padding: 8px 12px;
    color: var(--ink-2);
    border-bottom: 1px solid rgba(38, 48, 42, 0.6);
    vertical-align: top;
}

.col-table-wrap tr:last-child td[b-hja8uda08o] {
    border-bottom: none;
}

.col-table-wrap td strong[b-hja8uda08o] {
    display: block;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.83rem;
}

.col-sub[b-hja8uda08o] {
    display: block;
    font-size: 0.75rem;
    color: var(--ink-3);
    margin-top: 2px;
}

.col-msg[b-hja8uda08o] {
    font-size: 0.78rem;
    color: var(--ink-3);
    max-width: 240px;
}

.col-unknown[b-hja8uda08o] {
    color: var(--ink-3);
    font-style: italic;
}

/* ── Two-column body ─────────────────────────────────────────── */

.col-body[b-hja8uda08o] {
    display: grid;
    grid-template-columns: 188px 1fr;
    border-top: 1px solid var(--line);
    min-height: 60vh;
}

/* ── Filter rail ─────────────────────────────────────────────── */

.col-rail[b-hja8uda08o] {
    border-right: 1px solid var(--line);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.col-rail-section[b-hja8uda08o] {
    margin-bottom: 18px;
}

.col-rail-section:last-child[b-hja8uda08o] {
    margin-bottom: 0;
}

.col-rail-h[b-hja8uda08o] {
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 9px;
}

.col-rail-filt[b-hja8uda08o] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.col-rail-filt-col[b-hja8uda08o] {
    flex-direction: column;
    align-items: stretch;
}

/* Color pip buttons */
.col-filt-pip[b-hja8uda08o] {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 800 10px/1 var(--font-ui);
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--pip-bg, #ccc);
    color: var(--pip-fg, #000);
    opacity: 0.45;
    transition: opacity 0.12s, border-color 0.12s, transform 0.12s;
}

.col-filt-pip.include[b-hja8uda08o],
.col-filt-pip.exclude[b-hja8uda08o] {
    opacity: 1;
    transform: scale(1.1);
}

.col-filt-pip.colorless[b-hja8uda08o] {
    font-size: 11px;
}

.col-filt-pip.include[b-hja8uda08o] {
    border-color: var(--ink);
}

.col-filt-pip.exclude[b-hja8uda08o] {
    border-color: var(--danger-text);
    box-shadow: 0 0 0 2px rgba(204, 75, 63, 0.14);
}

.col-filt-pip.exclude[b-hja8uda08o]::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: var(--danger-text);
    transform: rotate(-38deg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.col-filt-pip:focus-visible[b-hja8uda08o] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}

.col-filt-pip:disabled[b-hja8uda08o] {
    cursor: not-allowed;
    filter: grayscale(0.9);
    opacity: 0.18;
    transform: none;
}

/* Type / legality filter options */
.col-filt-o[b-hja8uda08o] {
    font: 600 11px/1 var(--font-ui);
    color: var(--ink-2);
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surf-raised);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.col-filt-o:hover[b-hja8uda08o] {
    background: rgba(103, 181, 141, 0.07);
    border-color: rgba(103, 181, 141, 0.3);
}

.col-filt-o.on[b-hja8uda08o] {
    color: var(--ink);
    border-color: rgba(103, 181, 141, 0.4);
    background: rgba(103, 181, 141, 0.12);
}

.col-filt-o:focus-visible[b-hja8uda08o] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}

/* Ability selector */
.col-ability-picker[b-hja8uda08o] {
    position: relative;
}

.col-ability-input[b-hja8uda08o] {
    width: 100%;
    min-width: 0;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    font: 600 11px/1 var(--font-ui);
    outline: none;
    padding: 8px 9px;
    transition: border-color 0.12s, background 0.12s;
}

.col-ability-input[b-hja8uda08o]::placeholder {
    color: var(--ink-3);
}

.col-ability-input:focus[b-hja8uda08o] {
    border-color: rgba(103, 181, 141, 0.55);
    background: color-mix(in srgb, var(--surf-raised) 88%, var(--jade) 12%);
}

.col-ability-menu[b-hja8uda08o] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    max-height: 248px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surf);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    padding: 4px;
}

.col-ability-option[b-hja8uda08o] {
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    display: block;
    font: 600 11px/1.2 var(--font-ui);
    overflow: hidden;
    padding: 8px 7px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-ability-option:hover[b-hja8uda08o],
.col-ability-option:focus-visible[b-hja8uda08o] {
    background: rgba(103, 181, 141, 0.12);
    color: var(--ink);
    outline: none;
}

.col-ability-empty[b-hja8uda08o] {
    display: block;
    color: var(--ink-3);
    font: 600 11px/1.3 var(--font-ui);
    padding: 8px 7px;
}

.col-ability-badges[b-hja8uda08o] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.col-ability-badge[b-hja8uda08o] {
    align-items: center;
    background: rgba(103, 181, 141, 0.12);
    border: 1px solid rgba(103, 181, 141, 0.35);
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    font: 700 10px/1 var(--font-ui);
    gap: 5px;
    max-width: 100%;
    min-width: 0;
    padding: 5px 5px 5px 8px;
}

.col-ability-remove[b-hja8uda08o] {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink-2);
    cursor: pointer;
    display: grid;
    flex: 0 0 auto;
    font: 900 11px/1 var(--font-ui);
    place-items: center;
}

.col-ability-remove:hover[b-hja8uda08o],
.col-ability-remove:focus-visible[b-hja8uda08o] {
    background: rgba(204, 75, 63, 0.18);
    color: var(--danger-text);
    outline: none;
}

/* Clear filters button */
.col-clear-btn[b-hja8uda08o] {
    font-size: 0.78rem;
    padding: 6px 10px;
    margin-top: 4px;
}

/* ── Grid wrap ───────────────────────────────────────────────── */

.col-gridwrap[b-hja8uda08o] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Toolbar */
.col-toolbar[b-hja8uda08o] {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.col-search[b-hja8uda08o] {
    flex: 1;
    min-width: 160px;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px 12px;
    color: var(--ink);
    font: 600 12px/1 var(--font-ui);
    outline: none;
    transition: border-color 0.12s;
}

.col-search[b-hja8uda08o]::placeholder {
    color: var(--ink-3);
}

.col-search:focus[b-hja8uda08o] {
    border-color: var(--jade);
}

.col-select[b-hja8uda08o] {
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px 12px;
    color: var(--ink-2);
    font: 600 12px/1 var(--font-ui);
    outline: none;
    cursor: pointer;
}

.col-select:focus[b-hja8uda08o] {
    border-color: var(--jade);
}

/* Result count + paging */
.col-pagebar[b-hja8uda08o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.col-result-count[b-hja8uda08o] {
    font: 600 11px/1 var(--font-ui);
    color: var(--ink-3);
    margin: 0;
}

.col-pager[b-hja8uda08o] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.col-page-btn[b-hja8uda08o] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surf-raised);
    color: var(--ink-2);
    font: 800 13px/1 var(--font-ui);
    cursor: pointer;
}

.col-page-btn:hover:not(:disabled)[b-hja8uda08o] {
    color: var(--ink);
    border-color: rgba(103, 181, 141, 0.4);
    background: rgba(103, 181, 141, 0.12);
}

.col-page-btn:disabled[b-hja8uda08o] {
    cursor: not-allowed;
    opacity: 0.45;
}

.col-page-btn:focus-visible[b-hja8uda08o] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 2px;
}

.col-page-label[b-hja8uda08o] {
    min-width: 94px;
    text-align: center;
    font: 700 11px/1 var(--font-ui);
    color: var(--ink-2);
}

/* Card grid */
.col-cards[b-hja8uda08o] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

/* ── Empty / loading states ──────────────────────────────────── */

.col-empty-sm[b-hja8uda08o] {
    color: var(--ink-3);
    font-size: 0.85rem;
    padding: 16px 0;
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .col-cards[b-hja8uda08o] {
        grid-template-columns: repeat(4, 1fr);
    }

    .col-review-grid[b-hja8uda08o] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .col-import-options[b-hja8uda08o] {
        grid-template-columns: 1fr;
    }

    .col-body[b-hja8uda08o] {
        grid-template-columns: 1fr;
    }

    .col-rail[b-hja8uda08o] {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .col-rail-filt-col[b-hja8uda08o] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .col-cards[b-hja8uda08o] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 540px) {
    .col-moxfield-wait[b-hja8uda08o] {
        align-items: end;
        padding: 14px;
    }

    .col-moxfield-dialog[b-hja8uda08o] {
        padding: 20px;
    }

    .col-moxfield-foot[b-hja8uda08o] {
        flex-direction: column;
        gap: 5px;
    }

    .col-cards[b-hja8uda08o] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .col-moxfield-mark span[b-hja8uda08o] {
        animation: none;
    }

    .col-moxfield-progress span[b-hja8uda08o] {
        transition: none;
    }
}
/* /Pages/DeckEditor.razor.rz.scp.css */
/* ============================================================
   DeckEditor page — scoped styles
   Minimal page shell: header + constrained board container.
   The cinematic frame (ambient, masthead, loader, state classes)
   now lives in the global stage-kit.css as stage-* classes.
   ============================================================ */

.de-page[b-i8q0ir7mca] {
    position: relative;
}

.de-shell[b-i8q0ir7mca] {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin-inline: auto;
    padding: 20px 20px 40px;
}

/* ── Board wrapper ──────────────────────────────────────────── */

.de-board[b-i8q0ir7mca] {
    /* no extra treatment needed — CategorySection handles its own spacing */
}
/* /Pages/Home.razor.rz.scp.css */
.home-page[b-gchi376ogm] {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem) 4rem;
}

.home-booting[b-gchi376ogm] {
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Pages/HouseDecks.razor.rz.scp.css */
/* ============================================================
   House Decks admin page
   ============================================================ */

.house-decks-page[b-ufqgqzsewu] {
    max-width: 920px;
    position: relative;
    z-index: 1;
}

.house-toolbar[b-ufqgqzsewu] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.house-panel[b-ufqgqzsewu] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 22px;
    margin-bottom: 16px;
}

.house-panel-head[b-ufqgqzsewu] {
    margin-bottom: 18px;
}

.house-panel-head-inline[b-ufqgqzsewu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.house-panel-title[b-ufqgqzsewu] {
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: 18px;
    margin: 0 0 5px;
    color: var(--ink);
}

.house-panel-desc[b-ufqgqzsewu],
.house-note[b-ufqgqzsewu] {
    color: var(--ink-2);
    font: 500 12px/1.5 var(--font-ui);
    margin: 0;
}

.house-note[b-ufqgqzsewu] {
    color: var(--ink-3);
}

.house-import-row[b-ufqgqzsewu] {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.house-input[b-ufqgqzsewu] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf-2) 72%, transparent);
    color: var(--ink);
    font: 600 13px/1.4 var(--font-ui);
    padding: 10px 12px;
    outline: none;
}

.house-input[b-ufqgqzsewu]::placeholder {
    color: var(--ink-3);
}

.house-input:focus-visible[b-ufqgqzsewu] {
    border-color: color-mix(in srgb, var(--jade-bright) 74%, var(--line));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jade-bright) 18%, transparent);
}

.house-result[b-ufqgqzsewu] {
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    overflow: hidden;
}

.house-result-row[b-ufqgqzsewu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-right: 1px solid var(--line);
    min-width: 0;
}

.house-result-row:last-child[b-ufqgqzsewu] {
    border-right: 0;
}

.house-result-row dt[b-ufqgqzsewu] {
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.house-result-row dd[b-ufqgqzsewu] {
    font: 700 18px/1 var(--font-disp);
    color: var(--jade-bright);
    margin: 0;
}

.house-result-row dd.house-result-text[b-ufqgqzsewu] {
    font: 700 12px/1.35 var(--font-ui);
    color: var(--ink);
    overflow-wrap: anywhere;
}

.house-deck-list[b-ufqgqzsewu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.house-deck-row[b-ufqgqzsewu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf-2) 54%, transparent);
    padding: 14px;
}

.house-deck-main[b-ufqgqzsewu] {
    min-width: 0;
}

.house-deck-title[b-ufqgqzsewu] {
    color: var(--ink);
    font: 800 15px/1.25 var(--font-ui);
    margin: 0;
    overflow-wrap: anywhere;
}

.house-deck-commander[b-ufqgqzsewu] {
    color: var(--jade-bright);
    font: 700 12px/1.4 var(--font-ui);
    margin: 5px 0 0;
    overflow-wrap: anywhere;
}

.house-deck-meta[b-ufqgqzsewu] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.house-deck-meta span[b-ufqgqzsewu] {
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-2);
    font: 800 10px/1 var(--font-ui);
    padding: 7px 8px;
    white-space: nowrap;
}

.house-deck-actions[b-ufqgqzsewu] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.house-link[b-ufqgqzsewu] {
    min-width: 92px;
    justify-content: center;
}

.btn.secondary.danger[b-ufqgqzsewu] {
    color: #ffb3b0;
    border-color: color-mix(in srgb, #ff706b 44%, var(--line));
}

.btn.secondary.danger:not(:disabled):hover[b-ufqgqzsewu] {
    background: color-mix(in srgb, #ff706b 15%, rgba(255, 255, 255, 0.06));
    border-color: color-mix(in srgb, #ff706b 70%, var(--line));
}

@media (max-width: 720px) {
    .house-toolbar[b-ufqgqzsewu],
    .house-import-row[b-ufqgqzsewu] {
        flex-direction: column;
    }

    .house-toolbar .btn[b-ufqgqzsewu],
    .house-import-row .btn[b-ufqgqzsewu] {
        width: 100%;
        justify-content: center;
    }

    .house-result[b-ufqgqzsewu] {
        flex-wrap: wrap;
    }

    .house-result-row[b-ufqgqzsewu] {
        flex: 0 0 50%;
        border-bottom: 1px solid var(--line);
    }

    .house-result-row:nth-last-child(-n+2)[b-ufqgqzsewu] {
        border-bottom: 0;
    }

    .house-result-row:nth-child(even)[b-ufqgqzsewu] {
        border-right: 0;
    }

    .house-deck-row[b-ufqgqzsewu] {
        grid-template-columns: 1fr;
    }

    .house-deck-actions[b-ufqgqzsewu] {
        justify-content: stretch;
    }

    .house-deck-actions .btn[b-ufqgqzsewu] {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 460px) {
    .house-panel[b-ufqgqzsewu] {
        padding: 18px;
    }

    .house-result-row[b-ufqgqzsewu] {
        flex-basis: 100%;
        border-right: 0;
    }

    .house-result-row:nth-last-child(-n+2)[b-ufqgqzsewu] {
        border-bottom: 1px solid var(--line);
    }

    .house-result-row:last-child[b-ufqgqzsewu] {
        border-bottom: 0;
    }

    .house-deck-actions[b-ufqgqzsewu] {
        flex-direction: column;
    }

    .house-deck-actions .btn[b-ufqgqzsewu] {
        width: 100%;
    }
}
/* /Pages/Login.razor.rz.scp.css */
.login-page[b-uwvun5obt2] {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 54px);
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-panel[b-uwvun5obt2] {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
}

/* Layout spacing only — type comes from the kit's stage-eyebrow/stage-title. */
.login-eyebrow[b-uwvun5obt2] {
    margin: 0 0 10px;
}

.login-panel h1[b-uwvun5obt2] {
    margin: 0 0 18px;
}

.login-actions[b-uwvun5obt2] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* /Pages/NotFound.razor.rz.scp.css */
/* ── Not-found page ──────────────────────────────────────────── */

.not-found-stage[b-gff8a9jwxc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem 1.5rem;
}

.not-found-eyebrow[b-gff8a9jwxc] {
    font: 800 11px/1 var(--font-ui);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 14px;
}

.not-found-heading[b-gff8a9jwxc] {
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 16px;
    letter-spacing: -0.03em;
}

.not-found-body[b-gff8a9jwxc] {
    color: var(--ink-2);
    font: 500 14px/1.6 var(--font-ui);
    margin: 0 0 28px;
    max-width: 36ch;
}
/* /Pages/Play.razor.rz.scp.css */
.play-page[b-bsswoj60gl] {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 42px 0 64px;
}

.play-section-head[b-bsswoj60gl],
.play-modal-head[b-bsswoj60gl],
.play-insight-title-row[b-bsswoj60gl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.play-section-kicker[b-bsswoj60gl],
.play-deck-format[b-bsswoj60gl] {
    margin: 0 0 8px;
    color: var(--jade-bright);
    font: 800 11px/1 var(--font-ui);
    letter-spacing: 0;
    text-transform: uppercase;
}

.play-section-head p[b-bsswoj60gl],
.play-deck p[b-bsswoj60gl],
.play-history-game p[b-bsswoj60gl],
.play-modal-head p[b-bsswoj60gl],
.play-upsell p[b-bsswoj60gl] {
    color: var(--ink-2);
}

.play-section-head p[b-bsswoj60gl] {
    max-width: 680px;
    margin: 10px 0 0;
}

.play-refresh[b-bsswoj60gl] {
    min-height: 38px;
    border: 1px solid rgba(103, 181, 141, 0.36);
    border-radius: 7px;
    padding: 10px 14px;
    color: var(--ink);
    background: rgba(103, 181, 141, 0.12);
    font: 900 12px/1 var(--font-ui);
}

.play-refresh:disabled[b-bsswoj60gl] {
    color: var(--ink-3);
    cursor: wait;
}

.play-section[b-bsswoj60gl] {
    padding: 28px 0 0;
}

.play-section-head h2[b-bsswoj60gl] {
    margin: 0;
    font: 800 26px/1.1 var(--font-disp);
    letter-spacing: 0;
}

.play-history-meta[b-bsswoj60gl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: 180px;
}

.play-history-meta span[b-bsswoj60gl],
.play-insight-title-row span[b-bsswoj60gl] {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border: 1px solid rgba(217, 189, 113, 0.34);
    border-radius: 999px;
    padding: 6px 10px;
    color: #ead79a;
    background: rgba(217, 189, 113, 0.1);
    font: 850 11px/1 var(--font-ui);
}

.play-history-list[b-bsswoj60gl] {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.play-history-game[b-bsswoj60gl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 42px;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.032);
    cursor: pointer;
}

.play-history-game:hover[b-bsswoj60gl],
.play-history-game:focus-visible[b-bsswoj60gl] {
    border-color: rgba(159, 224, 189, 0.4);
    background: rgba(103, 181, 141, 0.07);
    outline: none;
}

.play-history-main[b-bsswoj60gl] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.play-history-main h3[b-bsswoj60gl],
.play-deck h2[b-bsswoj60gl],
.stage-empty h2[b-bsswoj60gl],
.play-modal-head h2[b-bsswoj60gl],
.play-insight-block h3[b-bsswoj60gl],
.play-upsell h4[b-bsswoj60gl] {
    margin: 0;
    color: var(--ink);
    letter-spacing: 0;
}

.play-history-main h3[b-bsswoj60gl] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 800 17px/1.15 var(--font-disp);
}

.play-history-main p[b-bsswoj60gl] {
    margin: 5px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.play-result-chip[b-bsswoj60gl] {
    display: inline-flex;
    min-width: 94px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.06);
    font: 900 11px/1 var(--font-ui);
    text-align: center;
}

.play-result-chip.is-win[b-bsswoj60gl] {
    color: #dbffe8;
    border-color: rgba(91, 168, 107, 0.56);
    background: rgba(91, 168, 107, 0.18);
}

.play-result-chip.is-loss[b-bsswoj60gl] {
    color: #ffc9c4;
    border-color: rgba(204, 75, 63, 0.48);
    background: rgba(204, 75, 63, 0.14);
}

.play-result-chip.is-goldfish[b-bsswoj60gl] {
    color: #d3e8ff;
    border-color: rgba(59, 130, 196, 0.48);
    background: rgba(59, 130, 196, 0.14);
}

.play-result-chip.is-opening[b-bsswoj60gl] {
    color: #f4dfad;
    border-color: rgba(217, 189, 113, 0.5);
    background: rgba(217, 189, 113, 0.12);
}

.play-result-chip.is-blocked[b-bsswoj60gl] {
    color: #ffc9c4;
    border-color: rgba(204, 75, 63, 0.48);
    background: rgba(204, 75, 63, 0.14);
}

.play-history-stats[b-bsswoj60gl] {
    display: grid;
    justify-items: end;
    gap: 5px;
    color: var(--ink-2);
    font: 800 12px/1.1 var(--font-ui);
    white-space: nowrap;
}

.play-history-stats span:last-child[b-bsswoj60gl] {
    color: var(--ink-3);
    font-weight: 700;
}

.play-save-button[b-bsswoj60gl] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(159, 224, 189, 0.28);
    border-radius: 999px;
    color: var(--ink-2);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    font: 900 20px/1 var(--font-ui);
}

.play-save-button:hover[b-bsswoj60gl],
.play-save-button:focus-visible[b-bsswoj60gl],
.play-save-button.is-saved[b-bsswoj60gl] {
    color: #f0d889;
    border-color: rgba(217, 189, 113, 0.58);
    background: rgba(217, 189, 113, 0.14);
    outline: none;
}

.play-save-button:disabled[b-bsswoj60gl] {
    opacity: 0.45;
    cursor: not-allowed;
}

.play-deck-grid[b-bsswoj60gl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.play-deck[b-bsswoj60gl] {
    --play-deck-art: linear-gradient(135deg, #26352c, #111714);
    position: relative;
    overflow: hidden;
    min-height: 236px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(159, 224, 189, 0.18);
    border-radius: 8px;
    padding: 16px;
    background-image:
        linear-gradient(180deg, rgba(4, 7, 5, 0.22) 0%, rgba(4, 7, 5, 0.62) 54%, rgba(4, 7, 5, 0.92) 100%),
        linear-gradient(90deg, rgba(6, 18, 12, 0.88) 0%, rgba(6, 18, 12, 0.42) 58%, rgba(6, 18, 12, 0.2) 100%),
        var(--play-deck-art);
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.play-deck:hover[b-bsswoj60gl],
.play-deck:focus-within[b-bsswoj60gl] {
    border-color: rgba(159, 224, 189, 0.42);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.play-deck-copy[b-bsswoj60gl],
.play-deck-actions[b-bsswoj60gl] {
    position: relative;
    z-index: 1;
}

.play-deck h2[b-bsswoj60gl],
.stage-empty h2[b-bsswoj60gl] {
    font: 800 18px/1.15 var(--font-disp);
}

.play-deck h2[b-bsswoj60gl] {
    max-width: 16rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
}

.play-deck p[b-bsswoj60gl] {
    margin: 8px 0 0;
}

.play-deck p[b-bsswoj60gl] {
    max-width: 18rem;
    color: rgba(242, 245, 238, 0.86);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.72);
}

.play-deck .play-deck-warning[b-bsswoj60gl] {
    color: #ffd9a3;
    font: 800 12px/1.35 var(--font-ui);
}

.play-deck-format[b-bsswoj60gl] {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    border: 1px solid rgba(159, 224, 189, 0.34);
    border-radius: 999px;
    padding: 6px 9px;
    color: #dff8e9;
    background: rgba(6, 18, 12, 0.56);
    backdrop-filter: blur(8px);
}

.play-deck-actions[b-bsswoj60gl] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.play-deck-actions .btn.secondary[b-bsswoj60gl] {
    border-color: rgba(242, 245, 238, 0.22);
    background: rgba(6, 18, 12, 0.58);
    backdrop-filter: blur(8px);
}

.play-modal-backdrop[b-bsswoj60gl] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(2, 5, 4, 0.72);
    backdrop-filter: blur(8px);
}

.play-insights-modal[b-bsswoj60gl] {
    width: min(860px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 48px));
    overflow: auto;
    border: 1px solid rgba(159, 224, 189, 0.24);
    border-radius: 8px;
    background: #101511;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.62);
    padding: 22px;
}

.play-modal-head[b-bsswoj60gl] {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.play-modal-head h2[b-bsswoj60gl] {
    font: 800 30px/1.08 var(--font-disp);
}

.play-modal-head p[b-bsswoj60gl] {
    margin: 8px 0 0;
}

.play-modal-close[b-bsswoj60gl] {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    color: var(--ink-2);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    font: 900 13px/1 var(--font-ui);
}

.play-modal-close:hover[b-bsswoj60gl],
.play-modal-close:focus-visible[b-bsswoj60gl] {
    color: var(--ink);
    border-color: rgba(159, 224, 189, 0.42);
    outline: none;
}

.play-modal-summary[b-bsswoj60gl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.play-modal-summary div[b-bsswoj60gl] {
    min-height: 74px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.032);
}

.play-modal-summary span[b-bsswoj60gl] {
    display: block;
    margin-bottom: 7px;
    color: var(--ink-3);
    font: 800 11px/1 var(--font-ui);
    text-transform: uppercase;
}

.play-modal-summary strong[b-bsswoj60gl] {
    color: var(--ink);
    font: 850 15px/1.2 var(--font-ui);
}

.play-insight-block[b-bsswoj60gl] {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.play-insight-block h3[b-bsswoj60gl] {
    font: 800 18px/1.1 var(--font-disp);
}

.play-insight-block ul[b-bsswoj60gl] {
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 18px;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.45;
}

.play-upsell[b-bsswoj60gl] {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(217, 189, 113, 0.34);
    border-radius: 8px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(217, 189, 113, 0.13), rgba(59, 130, 196, 0.08));
}

.play-upsell h4[b-bsswoj60gl] {
    font: 850 17px/1.2 var(--font-ui);
}

.play-upsell p[b-bsswoj60gl] {
    margin: 0;
    max-width: 620px;
}

.play-upsell .btn[b-bsswoj60gl] {
    justify-self: start;
}

@media (max-width: 900px) {
    .play-deck-grid[b-bsswoj60gl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .play-history-game[b-bsswoj60gl] {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    .play-history-stats[b-bsswoj60gl] {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-items: start;
        display: flex;
        flex-wrap: wrap;
    }

    .play-modal-summary[b-bsswoj60gl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .play-page[b-bsswoj60gl] {
        width: min(100vw - 24px, 1180px);
        padding-top: 28px;
    }

    .play-section-head[b-bsswoj60gl],
    .play-modal-head[b-bsswoj60gl],
    .play-insight-title-row[b-bsswoj60gl],
    .play-deck-grid[b-bsswoj60gl] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .play-history-meta[b-bsswoj60gl] {
        justify-content: start;
    }

    .play-history-game[b-bsswoj60gl],
    .play-history-main[b-bsswoj60gl],
    .play-modal-summary[b-bsswoj60gl] {
        grid-template-columns: 1fr;
    }

    .play-save-button[b-bsswoj60gl] {
        position: absolute;
        right: 12px;
        top: 12px;
    }

    .play-history-game[b-bsswoj60gl] {
        position: relative;
        padding-right: 62px;
    }

    .play-history-main h3[b-bsswoj60gl],
    .play-history-main p[b-bsswoj60gl] {
        white-space: normal;
    }

    .play-insights-modal[b-bsswoj60gl] {
        padding: 18px;
    }
}

.play-tune-row[b-bsswoj60gl] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}
.play-tune-hint[b-bsswoj60gl] { color: var(--ink-2); font: 400 0.82rem/1.4 var(--font-ui); }
/* /Pages/Profile.razor.rz.scp.css */
.profile-page[b-6wlea8jmnh] {
    width: min(1120px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 34px 0 64px;
    position: relative;
    z-index: 1;
}

.profile-avatar-preview[b-6wlea8jmnh] {
    flex: 0 0 auto;
}

.profile-initial-avatar[b-6wlea8jmnh],
.profile-art-avatar[b-6wlea8jmnh] {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(103, 181, 141, 0.34);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

.profile-initial-avatar[b-6wlea8jmnh] {
    background: rgba(103, 181, 141, 0.16);
    color: var(--jade-bright);
    font: 900 22px/1 var(--font-ui);
}

.profile-art-avatar[b-6wlea8jmnh] {
    background-position: center;
    background-size: cover;
    background-color: var(--surf-raised);
}

.profile-grid[b-6wlea8jmnh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.profile-panel[b-6wlea8jmnh] {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    padding: 20px;
}

.profile-panel-wide[b-6wlea8jmnh] {
    grid-column: 1 / -1;
}

.profile-panel-head[b-6wlea8jmnh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.profile-panel h2[b-6wlea8jmnh] {
    margin: 0 0 6px;
    color: var(--ink);
    font: 800 18px/1.15 var(--font-disp);
}

.profile-panel p[b-6wlea8jmnh],
.profile-empty[b-6wlea8jmnh] {
    margin: 0;
    color: var(--ink-2);
}

.profile-empty.compact[b-6wlea8jmnh] {
    padding: 12px;
    font: 700 12px/1.3 var(--font-ui);
}

.profile-pill[b-6wlea8jmnh] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    max-width: 220px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(103, 181, 141, 0.12);
    border: 1px solid rgba(103, 181, 141, 0.24);
    color: var(--jade-bright);
    font: 800 10px/1 var(--font-ui);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-form-grid[b-6wlea8jmnh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.profile-field[b-6wlea8jmnh] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.profile-field span[b-6wlea8jmnh] {
    color: var(--ink-3);
    font: 800 11px/1 var(--font-ui);
    text-transform: uppercase;
}

.profile-input[b-6wlea8jmnh] {
    width: 100%;
    min-height: 42px;
    background: var(--surf-raised);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--ink);
    font: 700 13px/1.3 var(--font-ui);
}

.profile-input[readonly][b-6wlea8jmnh] {
    color: var(--ink-2);
}

.profile-input:focus-visible[b-6wlea8jmnh] {
    outline: 2px solid var(--jade-bright);
    outline-offset: 1px;
    border-color: rgba(103, 181, 141, 0.72);
}

.avatar-settings[b-6wlea8jmnh] {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.avatar-large[b-6wlea8jmnh] {
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
}

.avatar-large .profile-initial-avatar[b-6wlea8jmnh],
.avatar-large .profile-art-avatar[b-6wlea8jmnh] {
    width: 94px;
    height: 94px;
    font-size: 26px;
}

.avatar-printing-button[b-6wlea8jmnh] {
    appearance: none;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(103, 181, 141, 0.52);
    border-radius: 8px;
    background: rgba(5, 12, 8, 0.86);
    color: var(--jade-bright);
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
}

.avatar-printing-button:hover[b-6wlea8jmnh],
.avatar-printing-button:focus-visible[b-6wlea8jmnh] {
    outline: 0;
    border-color: var(--jade-bright);
    background: rgba(103, 181, 141, 0.18);
}

.avatar-printing-icon[b-6wlea8jmnh] {
    position: relative;
    display: block;
    width: 17px;
    height: 17px;
}

.avatar-printing-icon[b-6wlea8jmnh]::before,
.avatar-printing-icon[b-6wlea8jmnh]::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 3px;
    background: rgba(5, 12, 8, 0.92);
}

.avatar-printing-icon[b-6wlea8jmnh]::before {
    left: 1px;
    top: 3px;
}

.avatar-printing-icon[b-6wlea8jmnh]::after {
    right: 1px;
    top: 0;
    background: rgba(103, 181, 141, 0.18);
}

.avatar-printing-popover[b-6wlea8jmnh] {
    position: absolute;
    z-index: 20;
    left: calc(100% + 12px);
    top: 0;
    width: min(330px, calc(100vw - 48px));
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(103, 181, 141, 0.34);
    border-radius: 8px;
    background: rgba(5, 12, 8, 0.98);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.46);
}

.avatar-printing-option[b-6wlea8jmnh] {
    appearance: none;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 72px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}

.avatar-printing-option:hover[b-6wlea8jmnh],
.avatar-printing-option:focus-visible[b-6wlea8jmnh] {
    outline: 0;
    border-color: rgba(103, 181, 141, 0.52);
    background: rgba(103, 181, 141, 0.1);
}

.avatar-printing-option.is-selected[b-6wlea8jmnh] {
    border-color: var(--jade-bright);
    box-shadow: 0 0 0 1px rgba(103, 181, 141, 0.2);
}

.avatar-printing-image[b-6wlea8jmnh] {
    width: 48px;
    aspect-ratio: 5 / 7;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: #050706;
}

.avatar-printing-image img[b-6wlea8jmnh] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.avatar-printing-copy[b-6wlea8jmnh] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.avatar-printing-copy strong[b-6wlea8jmnh],
.avatar-printing-copy span[b-6wlea8jmnh] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-printing-copy strong[b-6wlea8jmnh] {
    color: var(--ink);
    font: 900 12px/1.1 var(--font-ui);
}

.avatar-printing-copy span[b-6wlea8jmnh] {
    color: var(--ink-3);
    font: 700 10px/1.2 var(--font-ui);
}

.avatar-search[b-6wlea8jmnh] {
    min-width: 0;
}

.avatar-results[b-6wlea8jmnh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.avatar-result[b-6wlea8jmnh] {
    appearance: none;
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 66px;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--ink);
    cursor: pointer;
    padding: 8px;
}

.avatar-result:hover[b-6wlea8jmnh],
.avatar-result:focus-visible[b-6wlea8jmnh] {
    background: rgba(103, 181, 141, 0.1);
    border-color: rgba(103, 181, 141, 0.34);
    outline: none;
}

.avatar-result img[b-6wlea8jmnh] {
    width: 44px;
    height: 52px;
    object-fit: cover;
    border-radius: 5px;
}

.avatar-result span[b-6wlea8jmnh] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.avatar-result strong[b-6wlea8jmnh],
.avatar-result small[b-6wlea8jmnh] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-result strong[b-6wlea8jmnh] {
    font: 800 12px/1.1 var(--font-ui);
}

.avatar-result small[b-6wlea8jmnh] {
    color: var(--ink-3);
    font: 700 10px/1.1 var(--font-ui);
}

.profile-fields[b-6wlea8jmnh] {
    display: grid;
    gap: 14px;
    margin: 16px 0 0;
}

.profile-fields div[b-6wlea8jmnh] {
    display: grid;
    gap: 5px;
}

.profile-fields dt[b-6wlea8jmnh] {
    color: var(--ink-3);
    font: 800 11px/1 var(--font-ui);
    text-transform: uppercase;
}

.profile-fields dd[b-6wlea8jmnh] {
    margin: 0;
    color: var(--ink);
    font: 700 14px/1.3 var(--font-ui);
}

.profile-check[b-6wlea8jmnh] {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    color: var(--ink);
    cursor: pointer;
}

.profile-check + .profile-check[b-6wlea8jmnh] {
    margin-top: 14px;
}

.profile-check input[b-6wlea8jmnh] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--jade);
}

.profile-check span[b-6wlea8jmnh] {
    display: grid;
    gap: 5px;
}

.profile-check strong[b-6wlea8jmnh] {
    font: 800 13px/1.2 var(--font-ui);
}

.profile-check small[b-6wlea8jmnh] {
    color: var(--ink-3);
    font: 700 12px/1.35 var(--font-ui);
}

.profile-preferences[b-6wlea8jmnh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.profile-actions[b-6wlea8jmnh] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 720px) {
    .profile-form-grid[b-6wlea8jmnh],
    .avatar-settings[b-6wlea8jmnh],
    .profile-preferences[b-6wlea8jmnh],
    .profile-grid[b-6wlea8jmnh] {
        grid-template-columns: 1fr;
    }

    .profile-initial-avatar[b-6wlea8jmnh],
    .profile-art-avatar[b-6wlea8jmnh] {
        width: 58px;
        height: 58px;
        font-size: 18px;
    }

    .avatar-large[b-6wlea8jmnh] {
        width: 100%;
        height: 116px;
        justify-items: start;
        padding-left: 14px;
    }

    .avatar-printing-popover[b-6wlea8jmnh] {
        left: 0;
        top: calc(100% + 10px);
        width: min(330px, calc(100vw - 64px));
    }

    .profile-actions[b-6wlea8jmnh] {
        justify-content: stretch;
        flex-direction: column;
    }
}
/* /Pages/Setup.razor.rz.scp.css */
/* ============================================================
   Setup page — utilitarian admin panel styles.
   Uses .scroll-stage from app.css as the outer container.
   ============================================================ */

/* ── Page shell ──────────────────────────────────────────────── */

.setup-page[b-uhnxwmcpgt] {
    max-width: 720px;
    position: relative;
    z-index: 1;
}

/* ── Panel ───────────────────────────────────────────────────── */

.setup-panel[b-uhnxwmcpgt] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 22px;
    margin-bottom: 16px;
}

.setup-panel-head[b-uhnxwmcpgt] {
    margin-bottom: 18px;
}

.setup-panel-title[b-uhnxwmcpgt] {
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: 18px;
    margin: 0 0 5px;
    color: var(--ink);
}

.setup-panel-desc[b-uhnxwmcpgt] {
    color: var(--ink-2);
    font: 500 12px/1.5 var(--font-ui);
    margin: 0;
}

/* ── Fields (read-only key/value pairs) ──────────────────────── */

.setup-fields[b-uhnxwmcpgt] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    overflow: hidden;
    margin-bottom: 18px;
}

.setup-fields-compact[b-uhnxwmcpgt] {
    margin-top: -4px;
}

.setup-field[b-uhnxwmcpgt] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
}

.setup-field:last-child[b-uhnxwmcpgt] {
    border-bottom: 0;
}

.setup-field-label[b-uhnxwmcpgt] {
    font: 800 10px/1 var(--font-ui);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ink-3);
    flex: 0 0 100px;
    white-space: nowrap;
}

.setup-field-value[b-uhnxwmcpgt] {
    font: 600 13px/1.4 var(--font-ui);
    color: var(--ink);
}

.setup-field-mono[b-uhnxwmcpgt] {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 12px;
    color: var(--jade-bright);
}

/* ── Footnote note ───────────────────────────────────────────── */

.setup-note[b-uhnxwmcpgt] {
    color: var(--ink-3);
    font: 500 11px/1.55 var(--font-ui);
    margin: 0;
}

.setup-note-spaced[b-uhnxwmcpgt] {
    margin: -4px 0 18px;
}

/* ── Glossary gap list ───────────────────────────────────────── */

.setup-gap-list[b-uhnxwmcpgt] {
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    overflow: hidden;
    margin: -4px 0 18px;
    background: color-mix(in srgb, var(--surf-2) 54%, transparent);
}

.setup-gap-row[b-uhnxwmcpgt] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.setup-gap-row:last-child[b-uhnxwmcpgt] {
    border-bottom: 0;
}

.setup-gap-main[b-uhnxwmcpgt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.setup-gap-keyword[b-uhnxwmcpgt] {
    font: 800 13px/1.2 var(--font-ui);
    color: var(--ink);
}

.setup-gap-meta[b-uhnxwmcpgt] {
    font: 800 10px/1 var(--font-ui);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}

.setup-gap-examples[b-uhnxwmcpgt],
.setup-gap-query[b-uhnxwmcpgt] {
    margin: 7px 0 0;
    color: var(--ink-2);
    font: 500 11px/1.45 var(--font-ui);
}

.setup-gap-query[b-uhnxwmcpgt] {
    color: var(--jade-bright);
    font-family: ui-monospace, 'SF Mono', monospace;
    overflow-wrap: anywhere;
}

/* ── Action button row ───────────────────────────────────────── */

.setup-actions[b-uhnxwmcpgt] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* ── Import controls ─────────────────────────────────────────── */

.setup-import-row[b-uhnxwmcpgt] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 18px;
}

.setup-input[b-uhnxwmcpgt] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf-2) 72%, transparent);
    color: var(--ink);
    font: 600 13px/1.4 var(--font-ui);
    padding: 10px 12px;
    outline: none;
}

.setup-input[b-uhnxwmcpgt]::placeholder {
    color: var(--ink-3);
}

.setup-input:focus-visible[b-uhnxwmcpgt] {
    border-color: color-mix(in srgb, var(--jade-bright) 74%, var(--line));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--jade-bright) 18%, transparent);
}

/* ── Import result ───────────────────────────────────────────── */

.setup-result[b-uhnxwmcpgt] {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    overflow: hidden;
}

.setup-result-spaced[b-uhnxwmcpgt] {
    margin-top: 14px;
}

.setup-result-row[b-uhnxwmcpgt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-right: 1px solid var(--line);
    min-width: 0;
}

.setup-result-row:last-child[b-uhnxwmcpgt] {
    border-right: 0;
}

.setup-result-row dt[b-uhnxwmcpgt] {
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.setup-result-row dd[b-uhnxwmcpgt] {
    font: 700 18px/1 var(--font-disp);
    color: var(--jade-bright);
    margin: 0;
}

.setup-result-row dd.setup-result-text[b-uhnxwmcpgt] {
    font: 700 12px/1.35 var(--font-ui);
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 600px) {
    .setup-import-row[b-uhnxwmcpgt] {
        flex-direction: column;
    }

    .setup-actions[b-uhnxwmcpgt] {
        flex-direction: column;
    }

    .setup-import-row .btn[b-uhnxwmcpgt],
    .setup-actions .btn[b-uhnxwmcpgt] {
        width: 100%;
        justify-content: center;
    }

    .setup-result[b-uhnxwmcpgt] {
        flex-wrap: wrap;
    }

    .setup-result-row[b-uhnxwmcpgt] {
        flex: 0 0 50%;
        border-bottom: 1px solid var(--line);
    }

    .setup-result-row:nth-last-child(-n+2)[b-uhnxwmcpgt] {
        border-bottom: 0;
    }

    .setup-result-row:nth-child(even)[b-uhnxwmcpgt] {
        border-right: 0;
    }
}
/* /Pages/SetupEventFlags.razor.rz.scp.css */
/* ============================================================
   Event Flags admin page
   ============================================================ */

.event-flags-page[b-hl8htaxanq] {
    max-width: 1120px;
    position: relative;
    z-index: 1;
}

.flag-toolbar[b-hl8htaxanq] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.flag-panel[b-hl8htaxanq] {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 22px;
}

.flag-panel-head[b-hl8htaxanq] {
    margin-bottom: 18px;
}

.flag-panel-head-inline[b-hl8htaxanq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.flag-panel-title[b-hl8htaxanq] {
    font-family: var(--font-disp);
    font-weight: 800;
    font-size: 18px;
    margin: 0 0 5px;
    color: var(--ink);
}

.flag-panel-desc[b-hl8htaxanq],
.flag-note[b-hl8htaxanq] {
    color: var(--ink-2);
    font: 500 12px/1.5 var(--font-ui);
    margin: 0;
}

.flag-note[b-hl8htaxanq] {
    color: var(--ink-3);
}

.flag-summary[b-hl8htaxanq] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.flag-summary-cell[b-hl8htaxanq] {
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf) 90%, transparent);
    padding: 14px;
}

.flag-summary-cell span[b-hl8htaxanq] {
    display: block;
    color: var(--ink-3);
    font: 800 9px/1 var(--font-ui);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.flag-summary-cell strong[b-hl8htaxanq] {
    display: block;
    margin-top: 8px;
    color: var(--jade-bright);
    font: 800 24px/1 var(--font-disp);
}

.flag-layout[b-hl8htaxanq] {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.flag-games-panel[b-hl8htaxanq],
.flag-detail-panel[b-hl8htaxanq] {
    min-width: 0;
}

.flag-game-list[b-hl8htaxanq],
.flag-event-list[b-hl8htaxanq],
.flag-diagnostics[b-hl8htaxanq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flag-game-row[b-hl8htaxanq] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    border-left: 4px solid transparent;
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf-2) 52%, transparent);
    color: var(--ink);
    padding: 12px;
    cursor: pointer;
}

.flag-game-row:hover[b-hl8htaxanq],
.flag-game-row.is-selected[b-hl8htaxanq] {
    border-color: color-mix(in srgb, var(--jade-bright) 50%, var(--line));
    background: color-mix(in srgb, var(--jade-bright) 10%, var(--surf-2));
}

.flag-game-row.has-diagnostics[b-hl8htaxanq] {
    border-left-color: #f7c948;
}

.flag-game-title[b-hl8htaxanq] {
    font: 800 13px/1.25 var(--font-ui);
    overflow-wrap: anywhere;
}

.flag-game-meta[b-hl8htaxanq] {
    color: var(--ink-2);
    font: 600 11px/1.45 var(--font-ui);
}

.flag-status[b-hl8htaxanq] {
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    color: var(--jade-bright);
    font: 800 10px/1 var(--font-ui);
    padding: 7px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.flag-diagnostics[b-hl8htaxanq] {
    margin-bottom: 16px;
}

.flag-diagnostic-row[b-hl8htaxanq] {
    border: 1px solid color-mix(in srgb, #f7c948 38%, var(--line));
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, #f7c948 8%, var(--surf-2));
    padding: 12px;
}

.flag-diagnostic-row div[b-hl8htaxanq] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.flag-diagnostic-row strong[b-hl8htaxanq] {
    color: var(--ink);
    font: 800 12px/1.25 var(--font-ui);
}

.flag-diagnostic-row span[b-hl8htaxanq] {
    color: var(--ink-3);
    font: 800 10px/1.25 var(--font-ui);
    white-space: nowrap;
}

.flag-diagnostic-row p[b-hl8htaxanq] {
    margin: 8px 0 0;
    color: var(--ink-2);
    font: 500 12px/1.45 var(--font-ui);
}

.flag-event-row[b-hl8htaxanq] {
    border: 1px solid var(--line);
    border-left: 4px solid transparent;
    border-radius: var(--radius-ctrl);
    background: color-mix(in srgb, var(--surf-2) 48%, transparent);
    padding: 12px;
}

.flag-event-row--user-action[b-hl8htaxanq] {
    border-left-color: #36d676;
}

.flag-event-row--opponent-pressure[b-hl8htaxanq] {
    border-left-color: #ff6961;
}

.flag-event-row.is-reported[b-hl8htaxanq],
.flag-event-row.is-issue[b-hl8htaxanq] {
    background: color-mix(in srgb, #f7c948 7%, var(--surf-2));
}

.flag-event-head[b-hl8htaxanq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ink-3);
    font: 800 10px/1.2 var(--font-ui);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.flag-event-head span:last-child[b-hl8htaxanq] {
    text-align: right;
}

.flag-event-row p[b-hl8htaxanq] {
    margin: 8px 0 10px;
    color: var(--ink-2);
    font: 500 13px/1.45 var(--font-ui);
    overflow-wrap: anywhere;
}

.flag-badges[b-hl8htaxanq] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.flag-badge[b-hl8htaxanq] {
    border: 1px solid var(--line);
    border-radius: var(--radius-ctrl);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-2);
    font: 800 9px/1 var(--font-ui);
    padding: 6px 7px;
    text-transform: uppercase;
}

.flag-badge--good[b-hl8htaxanq] {
    color: #a6f3c1;
    border-color: color-mix(in srgb, #36d676 45%, var(--line));
}

.flag-badge--danger[b-hl8htaxanq] {
    color: #ffc1bd;
    border-color: color-mix(in srgb, #ff6961 55%, var(--line));
}

.flag-badge--warning[b-hl8htaxanq] {
    color: #ffe39a;
    border-color: color-mix(in srgb, #f7c948 55%, var(--line));
}

@media (max-width: 880px) {
    .flag-summary[b-hl8htaxanq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flag-layout[b-hl8htaxanq] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .flag-toolbar[b-hl8htaxanq] {
        flex-direction: column;
    }

    .flag-toolbar .btn[b-hl8htaxanq] {
        width: 100%;
        justify-content: center;
    }

    .flag-summary[b-hl8htaxanq] {
        grid-template-columns: 1fr;
    }

    .flag-panel[b-hl8htaxanq] {
        padding: 18px;
    }

    .flag-panel-head-inline[b-hl8htaxanq],
    .flag-diagnostic-row div[b-hl8htaxanq],
    .flag-event-head[b-hl8htaxanq] {
        flex-direction: column;
        align-items: flex-start;
    }

    .flag-event-head span:last-child[b-hl8htaxanq] {
        text-align: left;
    }
}