/* /Components/ActionBar.razor.rz.scp.css */
/* W4-A — action/ability hotbar. Scoped; colours from app.css :root tokens. */

.action-bar[b-6kzfr4nkt1] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    box-shadow: var(--shadow);
}

/* budget pips */
.ab-budget[b-6kzfr4nkt1] {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    font-size: .76rem; letter-spacing: .03em; color: var(--muted);
    border-bottom: 1px solid var(--line); padding-bottom: 7px;
}
.pip[b-6kzfr4nkt1] { cursor: help; }
.pip.on[b-6kzfr4nkt1] { color: var(--gold-bright); }
.pip.off[b-6kzfr4nkt1] { color: #5b4f3c; text-decoration: line-through; }

.ab-multiattack[b-6kzfr4nkt1] {
    font-family: var(--font-display); color: var(--gold-bright);
    letter-spacing: .04em; font-size: .92rem;
    padding: 3px 8px; border-radius: 7px;
    background: #2a211455; border: 1px solid var(--gold);
}
.ab-multiattack .ma-left[b-6kzfr4nkt1] { color: var(--muted); font-size: .8rem; }

/* a labelled lane of slots */
.ab-group[b-6kzfr4nkt1] { display: flex; align-items: center; gap: 10px; }
.ab-grouplabel[b-6kzfr4nkt1] {
    flex: 0 0 52px; width: 52px;
    font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.ab-slots[b-6kzfr4nkt1] { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }

/* the hotbar slot — a big tactics-RPG click target */
.ab-slot[b-6kzfr4nkt1] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 78px; min-height: 58px; padding: 6px 10px;
    cursor: pointer; border-radius: 10px;
    border: 1px solid var(--line); background: var(--panel-3); color: var(--ink);
    transition: transform .08s ease, border-color .15s, background .15s, box-shadow .15s;
}
.ab-slot:hover:not(:disabled)[b-6kzfr4nkt1] { border-color: var(--gold); transform: translateY(-2px); }
.ab-slot:active:not(:disabled)[b-6kzfr4nkt1] { transform: translateY(0); }
.ab-slot:disabled[b-6kzfr4nkt1] { opacity: .38; cursor: not-allowed; }

.slot-icon[b-6kzfr4nkt1] { font-size: 1.25rem; line-height: 1; }
.slot-label[b-6kzfr4nkt1] { font-size: .74rem; white-space: nowrap; }

/* cost-coded left edge so the player reads timing at a glance */
.ab-slot.cost-action[b-6kzfr4nkt1] { border-left: 3px solid var(--gold); }
.ab-slot.cost-bonus[b-6kzfr4nkt1]  { border-left: 3px solid var(--ward); }
.ab-slot.cost-free[b-6kzfr4nkt1]   { border-left: 3px solid var(--steel); }

/* armed (awaiting a target) slot glows */
.ab-slot.armed[b-6kzfr4nkt1] {
    border-color: var(--gold-bright);
    box-shadow: 0 0 0 2px var(--gold-bright) inset, 0 0 10px #f0cd7655;
    background: #2f2618;
}

.ab-slot.move .slot-icon[b-6kzfr4nkt1] { filter: saturate(1.2); }
.ab-slot.end[b-6kzfr4nkt1] { border-left: 3px solid var(--blood); }
.ab-slot.auto[b-6kzfr4nkt1] { border-left: 3px solid var(--leather); }
/* /Components/AftermathView.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   AftermathView — F4 DmDirector ceremony + legacy fallback styles.
   Blizzard Polish Director rules: anticipation, multi-channel feedback,
   sequence-not-spam, never-ask-what-happened, kill-the-placeholder.
   All animation via CSS keyframes only (no JS libs). SVG/CSS juice.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Expedition debrief — watched multi-fight delve summary ───────────────── */
.exped-beats[b-0mqxm0iopl] { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.exped-beat[b-0mqxm0iopl] { display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.exped-beat-mark[b-0mqxm0iopl] { flex: 0 0 auto; color: var(--gold-bright, #e8c87a); width: 1.1em; text-align: center; }
.exped-beat-text[b-0mqxm0iopl] { flex: 1 1 auto; }

/* ── 0. Module cover session header ──────────────────────────────────────── */
/* Cover + banner form a paired unit: "the module you ran." Cover appears with
   the banner at step 1; seals at ClosingBeatStep (after ledger, never before fallen). */

.ceremony-session-header[b-0mqxm0iopl] {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    margin-bottom: 14px;
}

/* Hidden / revealed states (mirrors banner timing — same step) */
.session-header-hidden[b-0mqxm0iopl] { opacity: 0; pointer-events: none; }
.session-header-in[b-0mqxm0iopl]     { /* child elements carry their own reveal animations */ }

/* Banner in the session-header becomes flex, fills remaining width */
.ceremony-session-header .ceremony-banner[b-0mqxm0iopl] {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;   /* header owns the block margin */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Cover frame ─────────────────────────────────────────────────── */

.ceremony-cover-wrap[b-0mqxm0iopl] {
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* "Dropping the module on the table" — same easing as DeployView P1-15 */
.ceremony-cover-place[b-0mqxm0iopl] {
    animation: ceremony-cover-place-b-0mqxm0iopl .5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ceremony-cover-place-b-0mqxm0iopl {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.95) rotate(-0.6deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

/* ── Wax-seal close overlay ─────────────────────────────────────── */

.ceremony-cover-seal-overlay[b-0mqxm0iopl] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
}

/* "Thump" stamp animation — anticipation spike then settle (Rule 1 + Rule 3).
   The seal starts invisible, scales up past 1 (overshoot), and snaps into place. */
.ceremony-seal-svg[b-0mqxm0iopl] {
    display: block;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.85));
    animation: seal-stamp-b-0mqxm0iopl .55s cubic-bezier(.15, 1.5, .4, 1) both;
    transform-origin: center;
}
@keyframes seal-stamp-b-0mqxm0iopl {
    0%   { transform: scale(0) rotate(-18deg); opacity: 0; }
    55%  { transform: scale(1.18) rotate(4deg); opacity: 1; }
    78%  { transform: scale(0.96) rotate(-1deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Session label below the cover ─────────────────────────────── */

.ceremony-cover-label[b-0mqxm0iopl] {
    margin-top: 5px;
    font: 600 9px/1 var(--font-display);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .55;
    transition: color .4s ease, opacity .4s ease;
    min-height: 11px;
}
.ceremony-cover-label.label-sealed[b-0mqxm0iopl] {
    color: var(--blood);
    opacity: .72;
    animation: label-seal-in-b-0mqxm0iopl .4s ease-out .25s both;
}
@keyframes label-seal-in-b-0mqxm0iopl {
    from { opacity: 0; letter-spacing: .22em; }
    to   { opacity: .72; letter-spacing: .15em; }
}

/* ── Responsive + PRM ───────────────────────────────────────────── */

@media (max-width: 600px) {
    .ceremony-session-header[b-0mqxm0iopl] {
        flex-direction: column;
        align-items: center;
    }
    .ceremony-session-header .ceremony-banner[b-0mqxm0iopl] {
        width: 100%;
        align-self: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ceremony-cover-place[b-0mqxm0iopl]    { animation: none; }
    .ceremony-seal-svg[b-0mqxm0iopl]       { animation: none; }
    .ceremony-cover-label.label-sealed[b-0mqxm0iopl] { animation: none; }
}

/* ── 1. Outcome Banner ────────────────────────────────────────────────────── */

.ceremony-banner[b-0mqxm0iopl] {
    text-align: center;
    padding: 22px 16px 16px;
    margin-bottom: 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--panel-2) 0%, var(--pit) 100%);
    box-shadow: 0 4px 16px rgba(0,0,0,.45);
    /* isolate so child transforms don't leak */
    contain: layout style;
}

/* Hidden state — starts invisible, slightly scaled up */
.banner-hidden[b-0mqxm0iopl] { opacity: 0; transform: scale(1.06); pointer-events: none; }

/* Revealed — the full overshoot animate-in */
.banner-revealed[b-0mqxm0iopl] {
    animation: banner-reveal-b-0mqxm0iopl 0.32s cubic-bezier(.22,1.6,.4,1) forwards;
}
@keyframes banner-reveal-b-0mqxm0iopl {
    0%   { opacity: 0; transform: scale(1.08); }
    60%  { opacity: 1; transform: scale(0.985); }
    80%  { transform: scale(1.008); }
    100% { opacity: 1; transform: scale(1); }
}

.banner-title[b-0mqxm0iopl] {
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 6px;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.banner-location[b-0mqxm0iopl] {
    font: 600 11px/1 var(--font-display);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .8;
}

/* Colour accents per outcome */
.outcome-costlyvictory  .banner-title[b-0mqxm0iopl] { color: var(--gold-tarnished); }
.outcome-defeat         .banner-title[b-0mqxm0iopl] { color: var(--blood); }
.outcome-withdrawal     .banner-title[b-0mqxm0iopl] { color: var(--muted); }

/* P2-1: VICTORY shimmer — gradient text-clip, plays once on reveal */
.outcome-victory .banner-title[b-0mqxm0iopl] {
    background: linear-gradient(90deg,
        var(--player-line) 0%,
        var(--gold-bright) 30%,
        #ffffff 50%,
        var(--gold-bright) 70%,
        var(--player-line) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: victory-shimmer-b-0mqxm0iopl 1.8s ease-out forwards;
}
@keyframes victory-shimmer-b-0mqxm0iopl {
    0%   { background-position: 100% center; }
    100% { background-position: 0% center; }
}

.outcome-victory[b-0mqxm0iopl]        { border-left: 4px solid var(--player-line); }
.outcome-costlyvictory[b-0mqxm0iopl]  { border-left: 4px solid var(--gold-tarnished); }
.outcome-defeat[b-0mqxm0iopl]         { border-left: 4px solid var(--blood); }
.outcome-withdrawal[b-0mqxm0iopl]     { border-left: 4px solid var(--muted); }

/* ── 1b. Death vignette — screen-level multi-channel response (P1-2) ──────── */

.ceremony-has-fallen[b-0mqxm0iopl] {
    animation: fallen-vignette-b-0mqxm0iopl 2.2s ease-out forwards;
}
@keyframes fallen-vignette-b-0mqxm0iopl {
    0%   { box-shadow: inset 0 0 0 rgba(100,10,10,0); }
    18%  { box-shadow: inset 0 0 80px rgba(100,10,10,.35); }
    55%  { box-shadow: inset 0 0 60px rgba(100,10,10,.18); }
    100% { box-shadow: inset 0 0 0  rgba(100,10,10,0); }
}

/* ── 2. DM Beat (opening + closing) ─────────────────────────────────────── */

.ceremony-dm-beat[b-0mqxm0iopl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--panel) 0%, var(--pit) 100%);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold-tarnished);
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.beat-hidden[b-0mqxm0iopl] { opacity: 0; transform: translateY(6px); pointer-events: none; }
.beat-in[b-0mqxm0iopl]     { animation: beat-reveal-b-0mqxm0iopl 0.38s ease-out forwards; }
@keyframes beat-reveal-b-0mqxm0iopl {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dm-beat-avatar[b-0mqxm0iopl] { flex: 0 0 auto; filter: drop-shadow(0 0 3px var(--gold-tarnished)); }
.dm-beat-avatar-small[b-0mqxm0iopl] { opacity: .7; }
.dm-beat-body[b-0mqxm0iopl]   { flex: 1; min-width: 0; }
.dm-beat-name[b-0mqxm0iopl] {
    display: block;
    font: 600 10px/1 var(--font-display);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold-tarnished);
    margin-bottom: 4px;
}
.dm-beat-text[b-0mqxm0iopl] {
    font: italic 14px/1.45 var(--font-display);
    color: var(--ink);
    margin: 0;
}

/* Closing beat — no avatar, right-aligned narrative */
.close-beat[b-0mqxm0iopl] {
    border-left-color: var(--steel-rim);
    background: linear-gradient(180deg, var(--pit) 0%, var(--panel) 100%);
}
.close-text[b-0mqxm0iopl] { font-size: 13px; }

/* ── 3. Hero Spotlights ──────────────────────────────────────────────────── */

.ceremony-spotlight[b-0mqxm0iopl] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 9px;
    border: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    position: relative;
    overflow: hidden;
}

/* State transitions */
.spotlight-hidden[b-0mqxm0iopl] { opacity: 0; transform: translateX(-12px); pointer-events: none; }
.spotlight-in[b-0mqxm0iopl]     { animation: spotlight-reveal-b-0mqxm0iopl 0.42s cubic-bezier(.22,1.4,.4,1) forwards; }
@keyframes spotlight-reveal-b-0mqxm0iopl {
    0%   { opacity: 0; transform: translateX(-14px) scale(.98); }
    70%  { opacity: 1; transform: translateX(2px) scale(1.005); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Fallen — dramatic, desaturated */
.spotlight-fallen[b-0mqxm0iopl] {
    background: linear-gradient(135deg, #2a141044 0%, #1a0e0c 100%);
    border-left: 4px solid var(--blood);
}
.spotlight-fallen[b-0mqxm0iopl]::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(300px 100px at 30% 50%, #b04030 0%, transparent 70%);
    opacity: .08;
    pointer-events: none;
}
/* Compound selector — card carries BOTH classes simultaneously */
.spotlight-fallen.spotlight-in[b-0mqxm0iopl] {
    animation: spotlight-fallen-reveal-b-0mqxm0iopl 0.65s cubic-bezier(.22,1.4,.4,1) forwards;
}
@keyframes spotlight-fallen-reveal-b-0mqxm0iopl {
    0%   { opacity: 0; transform: translateX(-16px) scale(.96); filter: brightness(.7); }
    55%  { opacity: 1; transform: translateX(3px) scale(1.008); filter: brightness(.85); }
    80%  { transform: translateX(-1px) scale(.998); filter: brightness(.95); }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); }
}

.spotlight-injured[b-0mqxm0iopl] {
    background: linear-gradient(135deg, var(--pit) 0%, var(--panel) 100%);
    border-left: 4px solid #c46a20;
}

.spotlight-standout[b-0mqxm0iopl] {
    background: linear-gradient(135deg, var(--panel) 0%, var(--pit) 100%);
    border-left: 4px solid var(--gold-tarnished);
}

/* Level-up — gold-tinged, bigger entrance than injured (scale overshoot) */
.spotlight-levelup[b-0mqxm0iopl] {
    background: linear-gradient(135deg, #2a1e0444 0%, #1c1608 100%);
    border-left: 4px solid var(--gold-bright);
    box-shadow: 0 2px 12px rgba(200,160,40,.18);
}
.spotlight-levelup.spotlight-in[b-0mqxm0iopl] {
    animation: spotlight-levelup-reveal-b-0mqxm0iopl 0.55s cubic-bezier(.22,1.5,.4,1) forwards;
}
@keyframes spotlight-levelup-reveal-b-0mqxm0iopl {
    0%   { opacity: 0; transform: translateX(-14px) scale(.97); }
    60%  { opacity: 1; transform: translateX(2px) scale(1.03); }
    80%  { transform: translateX(-1px) scale(1.008); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

.spotlight-icon[b-0mqxm0iopl] {
    flex: 0 0 auto;
    font-size: 1.2rem;
    line-height: 1;
    margin-top: 2px;
    opacity: .9;
}
.spotlight-fallen   .spotlight-icon[b-0mqxm0iopl] { color: var(--blood); }
.spotlight-injured  .spotlight-icon[b-0mqxm0iopl] { color: #c46a20; }
.spotlight-standout .spotlight-icon[b-0mqxm0iopl] { color: var(--gold-tarnished); }
.spotlight-levelup  .spotlight-icon[b-0mqxm0iopl] { color: var(--gold-bright); }

.spotlight-body[b-0mqxm0iopl] { flex: 1; min-width: 0; position: relative; z-index: 1; }
.spotlight-header[b-0mqxm0iopl] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.spotlight-name[b-0mqxm0iopl] {
    font: 700 15px/1.2 var(--font-display);
    color: var(--ink);
}
.fallen-name-link[b-0mqxm0iopl] { cursor: pointer; color: var(--blood); text-decoration: underline dotted; text-underline-offset: 3px; }
.fallen-name-link:hover[b-0mqxm0iopl] { color: var(--gold-bright); }

.spotlight-badge[b-0mqxm0iopl] {
    font: 600 9px/1 var(--font-display);
    letter-spacing: .12em; text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}
.badge-fallen[b-0mqxm0iopl]   { background: #5a2020; color: #f0a0a0; }
.badge-injured[b-0mqxm0iopl]  { background: #5a3010; color: #f0c080; }
.badge-standout[b-0mqxm0iopl] { background: #4a3a10; color: var(--gold-bright); }
.badge-levelup[b-0mqxm0iopl]  { background: #3a2e04; color: var(--gold-bright); }

.spotlight-line[b-0mqxm0iopl] {
    font: italic 13px/1.4 var(--font-display);
    color: var(--ink);
    margin: 4px 0 0;
    opacity: .9;
}

.spotlight-memories[b-0mqxm0iopl] {
    margin: 4px 0 2px;
}
.mem-echo[b-0mqxm0iopl] {
    font-style: italic; color: #f0c0b2; font-size: .88rem; line-height: 1.4;
    padding-left: 8px; border-left: 2px solid #5a352c; margin: 2px 0;
}

/* ── 4. Ledger ───────────────────────────────────────────────────────────── */

.ledger-hidden[b-0mqxm0iopl] { opacity: 0; transform: translateY(6px); pointer-events: none; }
.ledger-visible[b-0mqxm0iopl] { animation: ledger-appear-b-0mqxm0iopl .28s ease-out forwards; }
@keyframes ledger-appear-b-0mqxm0iopl {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ceremony-ledger[b-0mqxm0iopl] {
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.ledger-header[b-0mqxm0iopl] {
    background: var(--raised);
    padding: 6px 14px;
    font: 600 10px/1 var(--font-display);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold-tarnished);
    border-bottom: 1px solid var(--line);
}

.ledger-row[b-0mqxm0iopl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 14px;
    border-bottom: 1px solid var(--hairline);
    background: var(--panel);
    gap: 12px;
}
.ledger-row:last-child[b-0mqxm0iopl] { border-bottom: none; }

/* Row tick-in animation */
.row-hidden[b-0mqxm0iopl] { opacity: 0; transform: translateX(-8px); }
.row-in[b-0mqxm0iopl]     { animation: row-tick-b-0mqxm0iopl 0.28s cubic-bezier(.22,1.2,.4,1) forwards; }
@keyframes row-tick-b-0mqxm0iopl {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Kind colour accents */
.kind-loss .ledger-value[b-0mqxm0iopl]  { color: var(--blood); font-weight: 700; }
.kind-warning .ledger-value[b-0mqxm0iopl] { color: #e0a040; font-weight: 700; }

/* P2-2: Gain value resolves from blur — reads as the number "materialising" */
.kind-gain .ledger-value[b-0mqxm0iopl] {
    color: var(--gold-bright);
    font-weight: 700;
}
/* Row div carries both .kind-gain and .row-in simultaneously */
.kind-gain.row-in .ledger-value[b-0mqxm0iopl] {
    animation: gain-resolve-b-0mqxm0iopl 0.45s ease-out forwards;
}
@keyframes gain-resolve-b-0mqxm0iopl {
    from { filter: blur(5px); opacity: .5; }
    to   { filter: blur(0);   opacity: 1; }
}

.ledger-label[b-0mqxm0iopl] {
    font: 600 11px/1 var(--font-display);
    letter-spacing: .10em; text-transform: uppercase;
    color: var(--muted);
    flex: 1;
}
.ledger-value[b-0mqxm0iopl] {
    font: 14px/1 var(--font-display);
    color: var(--ink);
    white-space: nowrap;
}

.battle-plan-recap[b-0mqxm0iopl] {
    display: flex;
    flex-direction: column;
    padding: 10px 14px 12px;
    background: color-mix(in srgb, var(--panel) 88%, var(--gold-tarnished) 12%);
    border-top: 1px solid var(--line);
}
.fallback-plan-recap[b-0mqxm0iopl] {
    margin: 10px 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.plan-recap-top[b-0mqxm0iopl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.plan-recap-kicker[b-0mqxm0iopl] {
    font: 700 9px/1 var(--font-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.plan-recap-state[b-0mqxm0iopl] {
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 7px;
    font: 700 9px/1 var(--font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.plan-recap-state.state-holding[b-0mqxm0iopl] { color: var(--player-line); }
.plan-recap-state.state-contested[b-0mqxm0iopl] { color: var(--gold-bright); }
.plan-recap-state.state-broken[b-0mqxm0iopl] { color: var(--blood); }
.plan-recap-state.state-adapted[b-0mqxm0iopl] { color: #8bd5ff; }
.plan-recap-chips[b-0mqxm0iopl] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.plan-recap-chips span[b-0mqxm0iopl] {
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 3px 7px;
    color: var(--muted);
    font-size: .72rem;
}
/* Bug #5b — "Vis detaljer" toggle: keeps the recap top clean, event log on demand. */
.plan-recap-toggle[b-0mqxm0iopl] {
    margin-top: 8px;
    align-self: flex-start;
    padding: 3px 10px;
    border: 1px solid var(--gold-tarnished);
    border-radius: 999px;
    background: transparent;
    color: var(--gold-bright);
    font: 600 11px/1.2 var(--font-display);
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.plan-recap-toggle:hover[b-0mqxm0iopl] {
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    border-color: var(--gold);
}

.plan-recap-lines[b-0mqxm0iopl] {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    color: var(--ink);
    font-size: .88rem;
    line-height: 1.35;
}

/* ── 5. Next hook ─────────────────────────────────────────────────────────── */

.ceremony-hook[b-0mqxm0iopl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin: 10px 0;
    border: 1px dashed var(--gold-tarnished);
    border-radius: 6px;
    background: var(--pit);
}
.hook-hidden[b-0mqxm0iopl] { opacity: 0; transform: translateY(4px); pointer-events: none; }
.hook-in[b-0mqxm0iopl]     { animation: beat-reveal-b-0mqxm0iopl .38s ease-out forwards; }

.hook-label[b-0mqxm0iopl] {
    font: 600 9px/1 var(--font-display);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold-tarnished);
    flex: 0 0 auto;
}
.hook-text[b-0mqxm0iopl] {
    font: italic 13px/1.35 var(--font-display);
    color: var(--ink);
}

/* ── 6. Featured banter ──────────────────────────────────────────────────── */

.ceremony-banter[b-0mqxm0iopl] {
    padding: 8px 14px;
    margin: 8px 0 12px;
    border-left: 3px solid var(--steel-rim);
    background: var(--pit);
    border-radius: 0 6px 6px 0;
}
.banter-hidden[b-0mqxm0iopl] { opacity: 0; pointer-events: none; }
.banter-in[b-0mqxm0iopl]     { animation: beat-reveal-b-0mqxm0iopl .35s ease-out forwards; }

.banter-featured-speaker[b-0mqxm0iopl] {
    font: 700 12px/1 var(--font-display);
    color: var(--gold-tarnished);
    letter-spacing: .06em;
}
.banter-featured-sep[b-0mqxm0iopl] {
    color: var(--muted);
    font-size: 12px;
}
.banter-aftertaste[b-0mqxm0iopl] {
    font: italic 13px/1.5 var(--font-display);
    color: var(--ink);
}

/* ── 7. Skip button ───────────────────────────────────────────────────────── */

/* Fixed anchor so it never drifts offscreen during the ceremony */
.ceremony-skip-fixed[b-0mqxm0iopl] {
    position: fixed;
    bottom: 18px;
    right: 24px;
    z-index: 100;
}
.ceremony-skip-fixed .skip-btn[b-0mqxm0iopl] {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.55);
    font-size: .8rem;
    opacity: .75;
    letter-spacing: .08em;
}
.ceremony-skip-fixed .skip-btn:hover[b-0mqxm0iopl] { opacity: 1; }

/* In-flow variant shown once ceremony is complete (natural document flow) */
.ceremony-skip-inline[b-0mqxm0iopl] {
    margin: 10px 0 4px;
    text-align: center;
}
.ceremony-skip-inline .skip-btn[b-0mqxm0iopl] {
    font-size: .8rem;
    opacity: .6;
    letter-spacing: .08em;
}
.ceremony-skip-inline .skip-btn:hover[b-0mqxm0iopl] { opacity: 1; }

/* ── Legacy fallback styles (kept intact for the no-DmDirectorReport path) ── */

.dm-debrief[b-0mqxm0iopl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin-bottom: 10px;
    background: linear-gradient(180deg, var(--panel) 0%, var(--pit) 100%);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold-tarnished);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.dm-debrief.tone-triumph[b-0mqxm0iopl] { border-left-color: var(--gold-bright); }
.dm-debrief.tone-grim[b-0mqxm0iopl]    { border-left-color: var(--blood); }
.dm-debrief-head[b-0mqxm0iopl] { flex: 0 0 auto; filter: drop-shadow(0 0 3px var(--gold-tarnished)); }
.dm-debrief-body[b-0mqxm0iopl] { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.debrief-slots[b-0mqxm0iopl] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
@media (max-width: 560px) { .debrief-slots[b-0mqxm0iopl] { grid-template-columns: 1fr; } }
.debrief-slot[b-0mqxm0iopl] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slot-label[b-0mqxm0iopl] { font: 600 9px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.slot-line[b-0mqxm0iopl]  { font: italic 13px/1.35 var(--font-display); color: var(--ink); }
.dm-label[b-0mqxm0iopl]   { font: 600 10px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-tarnished); }

.story-banter-panel[b-0mqxm0iopl] { margin-bottom: 10px; border-left: 4px solid var(--gold-tarnished); }
.story-banter-line[b-0mqxm0iopl] { font: italic 13px/1.5 var(--font-display); color: var(--ink); padding: 4px 0 3px; border-bottom: 1px dotted var(--hairline); }
.story-banter-line:last-child[b-0mqxm0iopl] { border-bottom: none; }
.story-speaker[b-0mqxm0iopl] { font-style: normal; font-weight: 700; color: var(--gold-tarnished); margin-right: 5px; }
.story-banter-line.tone-grim .story-text[b-0mqxm0iopl],
.story-banter-line.tone-panicked .story-text[b-0mqxm0iopl] { color: #e09090; }
.story-banter-line.tone-triumphant .story-text[b-0mqxm0iopl],
.story-banter-line.tone-fierce .story-text[b-0mqxm0iopl]   { color: var(--gold-bright); }

.banter-echo-block[b-0mqxm0iopl] { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--hairline); position: relative; z-index: 1; }
.banter-echo-block .section-title.small[b-0mqxm0iopl] { font-size: .72rem; letter-spacing: .1em; opacity: .7; margin-bottom: 6px; }
.banter-line[b-0mqxm0iopl] { font: 13px/1.5 var(--font-display); color: var(--ink); padding: 2px 0; }
.banter-speaker[b-0mqxm0iopl] { font-weight: 700; font-style: normal; color: var(--gold-tarnished); margin-right: 4px; }
.banter-sep[b-0mqxm0iopl]  { margin: 0 3px; color: var(--muted); }
.banter-text[b-0mqxm0iopl] { font-style: italic; }
.banter-line.tone-grim .banter-text[b-0mqxm0iopl],
.banter-line.tone-panicked .banter-text[b-0mqxm0iopl] { color: #e09090; }
.banter-line.tone-triumphant .banter-text[b-0mqxm0iopl],
.banter-line.tone-fierce .banter-text[b-0mqxm0iopl]   { color: var(--gold-bright); }
.banter-line.tone-wry .banter-text[b-0mqxm0iopl]      { color: var(--steel-rim); }

.reckoning-panel[b-0mqxm0iopl] { position: relative; overflow: hidden; }
.reckoning-panel.has-fallen[b-0mqxm0iopl] {
    border-left: 4px solid var(--blood);
    background: radial-gradient(420px 220px at 50% 18%, #2a141033, transparent 72%), linear-gradient(180deg, var(--panel-2), var(--panel));
}
.reckoning-backdrop[b-0mqxm0iopl] { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.reckoning-backdrop svg[b-0mqxm0iopl] { position: absolute; inset: 0; width: 100%; height: 100%; }
.reckoning-backdrop .aftm-glow[b-0mqxm0iopl]   { animation: aftm-flicker-b-0mqxm0iopl 5.5s ease-in-out infinite alternate; transform-origin: center; }
@keyframes aftm-flicker-b-0mqxm0iopl { from { opacity: .55; } to { opacity: .95; } }
.reckoning-backdrop .aftm-sigil[b-0mqxm0iopl]  { animation: aftm-breathe-b-0mqxm0iopl 14s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes aftm-breathe-b-0mqxm0iopl { from { opacity: .7; } to { opacity: 1; } }
.reckoning-backdrop .aftm-mist[b-0mqxm0iopl]   { animation: aftm-mist-b-0mqxm0iopl 30s linear infinite; }
@keyframes aftm-mist-b-0mqxm0iopl { from { transform: translateX(-50px); } to { transform: translateX(50px); } }
@media (prefers-reduced-motion: reduce) {
    .reckoning-backdrop .aftm-glow[b-0mqxm0iopl], .reckoning-backdrop .aftm-sigil[b-0mqxm0iopl], .reckoning-backdrop .aftm-mist[b-0mqxm0iopl],
    .banner-revealed[b-0mqxm0iopl], .beat-in[b-0mqxm0iopl], .spotlight-in[b-0mqxm0iopl], .row-in[b-0mqxm0iopl], .hook-in[b-0mqxm0iopl], .banter-in[b-0mqxm0iopl],
    .ceremony-has-fallen[b-0mqxm0iopl], .outcome-victory .banner-title[b-0mqxm0iopl], .kind-gain.row-in .ledger-value[b-0mqxm0iopl],
    .ledger-visible[b-0mqxm0iopl] { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; -webkit-text-fill-color: var(--player-line) !important; }
    /* Module-cover lifecycle — also PRM-safe (declared here to avoid duplication with the
       section-0 block above; all PRM guards for this component are collected here). */
    .ceremony-cover-place[b-0mqxm0iopl], .ceremony-seal-svg[b-0mqxm0iopl], .ceremony-cover-label.label-sealed[b-0mqxm0iopl]
    { animation: none !important; opacity: 1 !important; transform: none !important; }
}
.reckoning-panel > .section-title[b-0mqxm0iopl], .reckoning-panel > p[b-0mqxm0iopl], .reckoning-panel > .event-line[b-0mqxm0iopl] { position: relative; z-index: 1; }

.fallen-block[b-0mqxm0iopl] { padding: 12px 0; border-bottom: 1px dotted #2c2316; position: relative; z-index: 1; }
.fallen-block[b-0mqxm0iopl] { padding: 13px 12px; border-radius: 9px; background: linear-gradient(180deg, #2a141026, transparent 80%); box-shadow: inset 0 0 0 1px #5a352c2e; }
.fallen-block + .fallen-block[b-0mqxm0iopl] { margin-top: 6px; }
.fallen-body > div:first-child[b-0mqxm0iopl] { font-size: 1.02rem; line-height: 1.35; }
.fallen-row[b-0mqxm0iopl]   { display: flex; align-items: flex-start; gap: 13px; }
.fallen-body[b-0mqxm0iopl]  { min-width: 0; flex: 1; }
.fallen-crest[b-0mqxm0iopl] { flex: 0 0 auto; padding: 3px; border-radius: 12px; line-height: 0; cursor: pointer; background: linear-gradient(155deg, #6a5040, #3a2a22 60%, var(--pit)); box-shadow: 0 3px 7px #00000080, inset 0 0 0 1px #00000050; transition: transform .08s, box-shadow .15s; }
.fallen-crest:hover[b-0mqxm0iopl] { transform: translateY(-1px); box-shadow: 0 4px 10px #000000a0, 0 0 0 1px var(--blood); }
.fallen-crest[b-0mqxm0iopl]  .hero-portrait svg { display: block; border-radius: 9px; background: var(--ink2); filter: grayscale(.85) brightness(.8) contrast(.95); }
.fallen-name[b-0mqxm0iopl]  { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; color: var(--blood); }
.fallen-name:hover[b-0mqxm0iopl] { color: var(--gold-bright); }
.fallen-mem[b-0mqxm0iopl]   { margin: 6px 0 4px 0; }
.not-forgotten[b-0mqxm0iopl] { font-size: .76rem; font-style: italic; margin-top: 4px; opacity: .85; }
.title-line[b-0mqxm0iopl]    { color: var(--gold-bright); }
.memory-echo-block[b-0mqxm0iopl] { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px dotted var(--hairline); position: relative; z-index: 1; }
.memory-echo-block .section-title.small[b-0mqxm0iopl] { font-size: .72rem; letter-spacing: .1em; opacity: .7; margin-bottom: 4px; }
.ceremony-panel[b-0mqxm0iopl] { margin-top: 12px; text-align: center; border-left: 4px solid var(--blood); background: linear-gradient(180deg, #2a14104d, var(--ink2)); position: relative; z-index: 1; }
.ceremony-line[b-0mqxm0iopl]  { font: italic 15px/1.5 var(--font-display); color: var(--ink); margin: 0 0 12px; }

/* ═══════════════════════════════════════════════════════════════════
   F6 — Table Instinct Death Reprieve Panel
   Blizzard Polish rules: anticipation, multi-channel, sequence not spam.
   The emotional peak — the held breath before fate is committed.
   ═══════════════════════════════════════════════════════════════════ */

/* ── P1-6: World-dim overlay — the world holds its breath ─────────── */
.ti-reprieve-overlay[b-0mqxm0iopl] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 200;
    pointer-events: auto;
    animation: reprieve-dim-in-b-0mqxm0iopl .35s ease-out forwards;
}
@keyframes reprieve-dim-in-b-0mqxm0iopl {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ti-reprieve-overlay[b-0mqxm0iopl] { animation: none !important; } }

/* ── Fate-pending spotlight variant ───────────────────────────── */
.spotlight-fate-pending[b-0mqxm0iopl] {
    border-left: 4px solid var(--gold-bright) !important;
    background: linear-gradient(180deg, rgba(201,162,78,.08) 0%, var(--panel) 100%) !important;
    animation: fate-pulse-b-0mqxm0iopl 2.4s ease-in-out infinite;
}
@keyframes fate-pulse-b-0mqxm0iopl {
    0%, 100% { box-shadow: 0 0 0 rgba(201,162,78,0); }
    50%       { box-shadow: 0 0 14px rgba(201,162,78,.22); }
}
.badge-fate-pending[b-0mqxm0iopl] {
    background: var(--gold-tarnished);
    color: var(--pit);
    font-weight: 800;
    animation: badge-pending-pulse-b-0mqxm0iopl 1.6s ease-in-out infinite;
}
@keyframes badge-pending-pulse-b-0mqxm0iopl {
    0%, 100% { opacity: 1; }
    50%       { opacity: .65; }
}

/* ── The Reprieve Panel itself ─────────────────────────────────── */
.ti-reprieve-panel[b-0mqxm0iopl] {
    margin: 14px 0;
    padding: 16px 18px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--gold-bright);
    background: linear-gradient(180deg, rgba(20,14,6,.85) 0%, rgba(10,8,4,.96) 100%);
    box-shadow:
        0 0 32px rgba(201,162,78,.18),
        0 4px 18px rgba(0,0,0,.6);
    position: relative;
    z-index: 201;
    contain: layout style;
}

/* Entrance: scale-up overshoot (anticipation — Rule 1) */
.reprieve-incoming[b-0mqxm0iopl] {
    animation: reprieve-enter-b-0mqxm0iopl 0.45s cubic-bezier(.18,1.4,.4,1) forwards;
}
@keyframes reprieve-enter-b-0mqxm0iopl {
    0%   { opacity: 0; transform: scale(.94) translateY(6px); }
    60%  { opacity: 1; transform: scale(1.015); }
    100% { opacity: 1; transform: scale(1)  translateY(0); }
}

/* Active (player has interacted): golden glow intensifies */
.reprieve-active[b-0mqxm0iopl] {
    animation: reprieve-enter-b-0mqxm0iopl 0.45s cubic-bezier(.18,1.4,.4,1) forwards,
               reprieve-active-glow-b-0mqxm0iopl 1.8s ease-in-out infinite;
}
@keyframes reprieve-active-glow-b-0mqxm0iopl {
    0%, 100% { box-shadow: 0 0 32px rgba(201,162,78,.18), 0 4px 18px rgba(0,0,0,.6); }
    50%       { box-shadow: 0 0 48px rgba(201,162,78,.38), 0 4px 18px rgba(0,0,0,.6); }
}

/* ── DM head row ───────────────────────────────────────────────── */
.ti-reprieve-dm-head[b-0mqxm0iopl] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.ti-reprieve-dm-icon[b-0mqxm0iopl] {
    flex: 0 0 auto;
    filter: drop-shadow(0 0 6px var(--gold-bright));
    animation: dm-icon-breathe-b-0mqxm0iopl 3s ease-in-out infinite;
}
@keyframes dm-icon-breathe-b-0mqxm0iopl {
    0%, 100% { filter: drop-shadow(0 0 6px var(--gold-bright)); }
    50%       { filter: drop-shadow(0 0 12px var(--gold-bright)); }
}
.ti-reprieve-dm-body[b-0mqxm0iopl]   { flex: 1; min-width: 0; }
.ti-reprieve-dm-name[b-0mqxm0iopl] {
    display: block;
    font: 700 10px/1 var(--font-display);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: 5px;
}
.ti-reprieve-lean[b-0mqxm0iopl] {
    font: italic 15px/1.4 var(--font-display);
    color: var(--ink);
    margin: 0;
    animation: lean-fadeup-b-0mqxm0iopl .5s ease-out forwards;
}
@keyframes lean-fadeup-b-0mqxm0iopl {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero row ──────────────────────────────────────────────────── */
.ti-reprieve-hero-row[b-0mqxm0iopl] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(201,162,78,.06);
    border-left: 3px solid var(--gold-tarnished);
}
.ti-reprieve-hero-label[b-0mqxm0iopl] {
    font: 700 15px/1 var(--font-display);
    color: var(--gold-bright);
}
.ti-reprieve-hero-sub[b-0mqxm0iopl] {
    font: 11px/1 var(--font-display);
    color: var(--muted);
    letter-spacing: .04em;
}

/* ── Flavor text ───────────────────────────────────────────────── */
.ti-reprieve-flavor[b-0mqxm0iopl] {
    font: 13px/1.5 var(--font-display);
    color: var(--muted);
    margin: 0 0 12px;
}
.ti-reprieve-lean-deny[b-0mqxm0iopl] { color: #c06060; }

/* ── Action buttons ────────────────────────────────────────────── */
.ti-reprieve-actions[b-0mqxm0iopl] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ti-btn-spend[b-0mqxm0iopl] {
    flex: 1;
    min-width: 0;
    background: linear-gradient(180deg, rgba(201,162,78,.22) 0%, rgba(130,95,28,.30) 100%);
    border: 1.5px solid var(--gold-bright);
    color: var(--gold-bright);
    font: 700 13px/1 var(--font-display);
    letter-spacing: .08em;
    padding: 11px 16px;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background .18s, box-shadow .18s, transform .12s;
}
.ti-btn-spend:not(:disabled):hover[b-0mqxm0iopl] {
    background: linear-gradient(180deg, rgba(201,162,78,.38) 0%, rgba(130,95,28,.45) 100%);
    box-shadow: 0 0 16px rgba(201,162,78,.28);
    transform: translateY(-1px);
}
.ti-btn-spend:not(:disabled):active[b-0mqxm0iopl] { transform: translateY(0) scale(.98); }
.ti-btn-spend:disabled[b-0mqxm0iopl] { opacity: .38; cursor: not-allowed; }

/* Token icon pulse */
.ti-token-icon[b-0mqxm0iopl] {
    font-size: 1.15em;
    animation: token-pulse-b-0mqxm0iopl 1.8s ease-in-out infinite;
}
@keyframes token-pulse-b-0mqxm0iopl {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .7; transform: scale(.88); }
}
.ti-btn-spend:disabled .ti-token-icon[b-0mqxm0iopl] { animation: none; }

.ti-btn-letfall[b-0mqxm0iopl] {
    flex: 0 0 auto;
    font: 600 12px/1 var(--font-display);
    color: var(--muted);
    border-color: var(--line);
    padding: 11px 14px;
}
.ti-btn-letfall:hover[b-0mqxm0iopl] { color: var(--ink); border-color: var(--muted); }

/* ── Ruling result card ────────────────────────────────────────── */
.ti-reprieve-ruling[b-0mqxm0iopl] {
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: 8px;
    animation: ruling-reveal-b-0mqxm0iopl .4s cubic-bezier(.22,1.4,.38,1) forwards;
}
@keyframes ruling-reveal-b-0mqxm0iopl {
    0%   { opacity: 0; transform: scale(.96) translateY(4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.ruling-granted[b-0mqxm0iopl] {
    border-left: 4px solid #4caf5a;
    background: linear-gradient(180deg, rgba(76,175,90,.09) 0%, rgba(76,175,90,.03) 100%);
}
.ruling-denied[b-0mqxm0iopl] {
    border-left: 4px solid var(--blood);
    background: linear-gradient(180deg, rgba(160,40,20,.09) 0%, rgba(160,40,20,.03) 100%);
}
.ti-ruling-badge[b-0mqxm0iopl] {
    display: inline-block;
    font: 700 11px/1 var(--font-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.ruling-granted .ti-ruling-badge[b-0mqxm0iopl] { color: #4caf5a; background: rgba(76,175,90,.14); }
.ruling-denied  .ti-ruling-badge[b-0mqxm0iopl] { color: #d9534f;  background: rgba(217,83,79,.14); }

.ti-ruling-line[b-0mqxm0iopl] {
    font: italic 14px/1.5 var(--font-display);
    color: var(--ink);
    margin: 0 0 6px;
    animation: ruling-line-in-b-0mqxm0iopl .5s ease-out .12s both;
}
@keyframes ruling-line-in-b-0mqxm0iopl {
    from { opacity: 0; transform: translateX(6px); }
    to   { opacity: 1; transform: translateX(0); }
}
.ti-ruling-burden[b-0mqxm0iopl] {
    font: 12px/1.4 var(--font-display);
    color: var(--gold-tarnished);
    margin: 0 0 6px;
    opacity: .85;
}
.ti-btn-continue[b-0mqxm0iopl] {
    min-width: 120px;
    background: var(--panel-2);
    border-color: var(--line);
}

/* ── P0-2: DM deliberation beat ────────────────────────────────── */
.ti-reprieve-deliberating-line[b-0mqxm0iopl] {
    font-style: italic;
    color: var(--gold-bright) !important;
    animation: deliberate-pulse-b-0mqxm0iopl 0.8s ease-in-out infinite alternate;
}
@keyframes deliberate-pulse-b-0mqxm0iopl {
    from { opacity: .65; }
    to   { opacity: 1; }
}
.ti-reprieve-deliberating[b-0mqxm0iopl] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0 8px;
}
.ti-deliberate-dots[b-0mqxm0iopl] {
    display: inline-flex;
    gap: 6px;
}
.ti-deliberate-dots span[b-0mqxm0iopl] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold-bright);
    animation: deliberate-dot-b-0mqxm0iopl 0.9s ease-in-out infinite;
}
.ti-deliberate-dots span:nth-child(1)[b-0mqxm0iopl] { animation-delay: 0s; }
.ti-deliberate-dots span:nth-child(2)[b-0mqxm0iopl] { animation-delay: 0.18s; }
.ti-deliberate-dots span:nth-child(3)[b-0mqxm0iopl] { animation-delay: 0.36s; }
@keyframes deliberate-dot-b-0mqxm0iopl {
    0%, 100% { opacity: .3; transform: scaleY(.7); }
    50%       { opacity: 1;  transform: scaleY(1.3); }
}
/* DM icon intensifies during deliberation */
.ti-dm-icon-deliberating[b-0mqxm0iopl] {
    animation: dm-icon-deliberate-b-0mqxm0iopl 0.6s ease-in-out infinite alternate !important;
}
@keyframes dm-icon-deliberate-b-0mqxm0iopl {
    from { filter: drop-shadow(0 0 8px var(--gold-bright)); }
    to   { filter: drop-shadow(0 0 20px var(--gold-bright)); }
}

/* ── P0-3: Fallen card transform — portrait un-desaturates, border sweeps green ── */
.spotlight-fallen.spotlight-saved[b-0mqxm0iopl] {
    border-left-color: #4caf5a !important;
    animation: spotlight-saved-transform-b-0mqxm0iopl 0.7s cubic-bezier(.22,1.2,.4,1) forwards !important;
}
@keyframes spotlight-saved-transform-b-0mqxm0iopl {
    0%   { filter: grayscale(.85) brightness(.8);  border-left-color: var(--blood); transform: scale(1); }
    40%  { filter: grayscale(.3)  brightness(.95); transform: scale(1.018); }
    70%  { filter: grayscale(.05) brightness(1.04); border-left-color: #4caf5a; transform: scale(1.02); }
    100% { filter: grayscale(0)   brightness(1);    border-left-color: #4caf5a; transform: scale(1); }
}
/* Portrait within saved card un-desaturates too */
.spotlight-fallen.spotlight-saved[b-0mqxm0iopl]  .hero-portrait svg {
    animation: portrait-unsaturate-b-0mqxm0iopl 0.7s ease-out forwards;
}
@keyframes portrait-unsaturate-b-0mqxm0iopl {
    from { filter: grayscale(.85) brightness(.8) contrast(.95); }
    to   { filter: grayscale(0)   brightness(1)  contrast(1); }
}
/* Badge transforms from Fallen to Survived */
.badge-survived[b-0mqxm0iopl] {
    background: rgba(76,175,90,.2);
    color: #4caf5a;
    animation: badge-survived-in-b-0mqxm0iopl .4s cubic-bezier(.22,1.4,.4,1) .3s both;
}
@keyframes badge-survived-in-b-0mqxm0iopl {
    0%   { opacity: 0; transform: scale(.5); }
    70%  { transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── P1-7: GrantWithBurden — amber/ochre ruling card ──────────── */
.ruling-granted-burden[b-0mqxm0iopl] {
    border-left: 4px solid #c08030;
    background: linear-gradient(180deg, rgba(192,128,48,.12) 0%, rgba(160,100,24,.05) 100%);
    animation: ruling-reveal-b-0mqxm0iopl .4s cubic-bezier(.22,1.4,.38,1) forwards;
}
.ruling-granted-burden .ti-ruling-badge[b-0mqxm0iopl] { color: #e0a040; background: rgba(192,128,48,.18); }
.ruling-granted-burden .ti-ruling-burden[b-0mqxm0iopl] {
    color: #e0a040;
    font-weight: 600;
    font-size: 13px;
    margin-top: 2px;
}

/* ── P1-8: Reprieved hero injured spotlight — gold entrance ────── */
.spotlight-injured.spotlight-reprieved.spotlight-in[b-0mqxm0iopl] {
    animation: spotlight-reprieved-reveal-b-0mqxm0iopl 0.6s cubic-bezier(.22,1.4,.4,1) forwards !important;
}
@keyframes spotlight-reprieved-reveal-b-0mqxm0iopl {
    0%   { opacity: 0; transform: translateX(-14px) scale(.97); filter: brightness(1.6) saturate(1.5); border-left-color: #4caf5a; }
    45%  { opacity: 1; transform: translateX(3px) scale(1.015); filter: brightness(1.2) saturate(1.2); border-left-color: #88d88a; }
    70%  { transform: translateX(-1px) scale(.998); border-left-color: #5abe62; }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1) saturate(1); border-left-color: #c46a20; }
}

/* ── P2-5: Badge icon animations — tick scales in, cross slides in ── */
.ti-ruling-badge-icon[b-0mqxm0iopl] {
    display: inline-block;
}
.badge-icon-tick[b-0mqxm0iopl] {
    animation: badge-tick-in-b-0mqxm0iopl .35s cubic-bezier(.22,1.8,.4,1) .05s both;
}
@keyframes badge-tick-in-b-0mqxm0iopl {
    0%   { opacity: 0; transform: scale(0); }
    70%  { transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}
.badge-icon-cross[b-0mqxm0iopl] {
    animation: badge-cross-in-b-0mqxm0iopl .3s ease-out .05s both;
}
@keyframes badge-cross-in-b-0mqxm0iopl {
    0%   { opacity: 0; transform: translateX(-6px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* ── prefers-reduced-motion guard for all new animations ──────── */
@media (prefers-reduced-motion: reduce) {
    .ti-reprieve-deliberating-line[b-0mqxm0iopl],
    .ti-deliberate-dots span[b-0mqxm0iopl],
    .ti-dm-icon-deliberating[b-0mqxm0iopl],
    .spotlight-fallen.spotlight-saved[b-0mqxm0iopl],
    .spotlight-fallen.spotlight-saved[b-0mqxm0iopl]  .hero-portrait svg,
    .badge-survived[b-0mqxm0iopl],
    .badge-icon-tick[b-0mqxm0iopl],
    .badge-icon-cross[b-0mqxm0iopl],
    .spotlight-injured.spotlight-reprieved.spotlight-in[b-0mqxm0iopl]
    { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---- loot reveal (sequenced rarity flourish) ---- */
.loot-reveal[b-0mqxm0iopl] { margin-top: 12px; }
.loot-row[b-0mqxm0iopl] {
    display: flex; align-items: center; gap: 8px;
    background: var(--panel-2, #1c1a17); border: 1px solid var(--line, #3a352c);
    border-left-width: 3px; border-radius: 6px; padding: 7px 10px; margin-bottom: 5px;
    opacity: 0; transform: translateX(-10px);
    animation: loot-in-b-0mqxm0iopl .42s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes loot-in-b-0mqxm0iopl { to { opacity: 1; transform: translateX(0); } }
.loot-glyph[b-0mqxm0iopl] { font-family: var(--font-mono, monospace); width: 16px; text-align: center; }
.loot-name[b-0mqxm0iopl] { font-weight: 700; }
.loot-rar[b-0mqxm0iopl] { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.loot-from[b-0mqxm0iopl] { margin-left: auto; }
.loot-spark[b-0mqxm0iopl] { color: var(--gold-bright, #e9c87a); animation: loot-pulse-b-0mqxm0iopl 1.4s ease-in-out infinite; }
@keyframes loot-pulse-b-0mqxm0iopl { 0%,100% { opacity:.6; transform:scale(1);} 50% { opacity:1; transform:scale(1.25);} }

.loot-common[b-0mqxm0iopl]  { border-left-color: var(--line, #3a352c); }
.loot-uncommon[b-0mqxm0iopl]{ border-left-color: #5fae5f; }
.loot-rare[b-0mqxm0iopl]    { border-left-color: #5b9bd5; box-shadow: 0 0 14px rgba(91,155,213,.22); }
.loot-name.loot-common[b-0mqxm0iopl]   { color: var(--ink, #d8cdb8); }
.loot-name.loot-uncommon[b-0mqxm0iopl] { color: #7fce7f; }
.loot-name.loot-rare[b-0mqxm0iopl]     { color: #7fb6ec; }

@media (prefers-reduced-motion: reduce) {
    .loot-row[b-0mqxm0iopl] { animation: none; opacity: 1; transform: none; }
    .loot-spark[b-0mqxm0iopl] { animation: none; }
}
/* /Components/ArmoryView.razor.rz.scp.css */
.armory[b-un81rh6s0z] { max-width: 1180px; }

.armory-top[b-un81rh6s0z] {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.armory-title[b-un81rh6s0z] { margin: 0; font-family: var(--font-display, Georgia), serif; }
.armory-top .armory-purse[b-un81rh6s0z] {
    margin-left: auto; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--gold-bright, #e9c87a);
}

.armory-roster[b-un81rh6s0z] {
    display: flex; gap: var(--sp-2); flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.ar-pawn[b-un81rh6s0z] {
    display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--panel-2, #1c1a17); border: 1px solid var(--line, #3a352c);
    border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--ink, #d8cdb8);
    font-size: .72rem; transition: border-color .12s, transform .12s;
}
.ar-pawn:hover[b-un81rh6s0z] { transform: translateY(-2px); }
.ar-pawn.sel[b-un81rh6s0z] { border-color: var(--gold-tarnished, #b89b5e); box-shadow: 0 0 0 1px var(--gold-tarnished, #b89b5e); }

.armory-notice[b-un81rh6s0z] {
    background: color-mix(in srgb, var(--wound, #a4434a) 22%, transparent);
    border: 1px solid var(--wound, #a4434a); border-radius: 6px;
    padding: 6px 10px; margin-bottom: var(--sp-2); font-size: .82rem;
}

.armory-body[b-un81rh6s0z] { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr); gap: var(--sp-3); align-items: start; }
@media (max-width: 860px) { .armory-body[b-un81rh6s0z] { grid-template-columns: 1fr; } }

/* ---- paperdoll ---- */
.paperdoll .pd-head[b-un81rh6s0z] { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); }
.pd-name[b-un81rh6s0z] { font-size: 1.15rem; font-weight: 700; font-family: var(--font-display, Georgia), serif; }
.pd-derived[b-un81rh6s0z] { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: .8rem; }
.pd-derived span[b-un81rh6s0z] { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2, #b7ad97); }

.pd-slots[b-un81rh6s0z] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pd-slot[b-un81rh6s0z] {
    display: flex; align-items: center; gap: 10px;
    background: var(--panel-2, #1c1a17); border: 1px solid var(--line, #3a352c);
    border-radius: 8px; padding: 8px 10px; min-height: 58px;
    border-left-width: 3px;
}
.pd-slot-body[b-un81rh6s0z] { flex: 1; min-width: 0; }
.pd-slot.empty[b-un81rh6s0z] { opacity: .72; border-style: dashed; }
.pd-slot-label[b-un81rh6s0z] { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #8c836f); margin-bottom: 3px; }
.pd-slot-item[b-un81rh6s0z] { display: flex; align-items: center; gap: 6px; }
.pd-slot-item.innate[b-un81rh6s0z] { opacity: .82; }
.pd-glyph[b-un81rh6s0z] { font-family: var(--font-mono, monospace); font-size: 1rem; width: 16px; text-align: center; }
.pd-iname[b-un81rh6s0z] { font-weight: 600; font-size: .86rem; }
.pd-bound[b-un81rh6s0z] { color: var(--gold-bright, #e9c87a); }
.pd-slot-empty[b-un81rh6s0z] { padding-top: 4px; }
.pd-slot-actions[b-un81rh6s0z] { display: flex; gap: 6px; margin-top: 6px; }

/* ---- stash / shop ---- */
.stash-tabs[b-un81rh6s0z] { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-2); flex-wrap: wrap; }
.stash-tabs .tab[b-un81rh6s0z] {
    background: var(--panel-2, #1c1a17); border: 1px solid var(--line, #3a352c);
    border-radius: 6px; padding: 4px 12px; cursor: pointer; color: var(--ink-2, #b7ad97); font-size: .82rem;
}
.stash-tabs .tab.on[b-un81rh6s0z] { background: var(--gold-tarnished, #b89b5e); color: #1a160e; font-weight: 700; }
.stash-spacer[b-un81rh6s0z] { flex: 1; }
.kindtab[b-un81rh6s0z] {
    background: var(--panel-2, #1c1a17); border: 1px solid var(--line, #3a352c);
    border-radius: 6px; width: 30px; height: 28px; cursor: pointer; color: var(--ink-2, #b7ad97);
}
.kindtab.on[b-un81rh6s0z] { border-color: var(--gold-tarnished, #b89b5e); color: var(--gold-bright, #e9c87a); }

.stash-list[b-un81rh6s0z] { display: flex; flex-direction: column; gap: 4px; max-height: 520px; overflow-y: auto; }
.stash-row[b-un81rh6s0z] {
    display: flex; align-items: center; gap: 8px;
    background: var(--panel-2, #1c1a17); border: 1px solid var(--line, #3a352c);
    border-left-width: 3px; border-radius: 6px; padding: 6px 9px;
}
.sr-glyph[b-un81rh6s0z] { font-family: var(--font-mono, monospace); width: 16px; text-align: center; }
.sr-name[b-un81rh6s0z] { font-weight: 600; font-size: .85rem; }
.sr-meta[b-un81rh6s0z] { flex: 0 0 auto; }
.sr-price[b-un81rh6s0z] { margin-left: auto; color: var(--gold-bright, #e9c87a); font-size: .8rem; }
.stash-row .btn:last-child[b-un81rh6s0z] { margin-left: 4px; }
.stash-row .sr-price ~ .btn[b-un81rh6s0z] { margin-left: 8px; }
.stash-row .btn[b-un81rh6s0z] { margin-left: auto; }
.stash-row .btn ~ .btn[b-un81rh6s0z] { margin-left: 6px; }

/* ---- rarity grammar (white → green → blue; purple/gold reserved for future tiers) ---- */
.rar-common[b-un81rh6s0z]  { --rar: #c9c2b2; }
.rar-uncommon[b-un81rh6s0z]{ --rar: #5fae5f; }
.rar-rare[b-un81rh6s0z]    { --rar: #5b9bd5; }
.pd-slot.rar-uncommon[b-un81rh6s0z], .pd-slot.rar-rare[b-un81rh6s0z], .stash-row.rar-uncommon[b-un81rh6s0z], .stash-row.rar-rare[b-un81rh6s0z] { border-left-color: var(--rar); }
.pd-slot.rar-common[b-un81rh6s0z], .stash-row.rar-common[b-un81rh6s0z] { border-left-color: var(--line, #3a352c); }
.rar-common.pd-iname[b-un81rh6s0z], .rar-common.sr-name[b-un81rh6s0z] { color: var(--ink, #d8cdb8); }
.pd-iname.rar-uncommon[b-un81rh6s0z], .sr-name.rar-uncommon[b-un81rh6s0z] { color: #7fce7f; }
.pd-iname.rar-rare[b-un81rh6s0z], .sr-name.rar-rare[b-un81rh6s0z] { color: #7fb6ec; }

.btn-xs[b-un81rh6s0z] { font-size: .72rem; padding: 2px 8px; line-height: 1.4; }
.btn-xs.ghost[b-un81rh6s0z] { background: transparent; border: 1px solid var(--line, #3a352c); color: var(--ink-3, #8c836f); }
.btn-xs.attuned[b-un81rh6s0z] { background: var(--gold-tarnished, #b89b5e); color: #1a160e; }

/* ---- Grid Stash view ---- */
.stash-grid[b-un81rh6s0z] {
    display: grid;
    grid-template-columns: repeat(12, 52px);
    gap: 4px;
    padding: 4px;
    max-height: 520px;
    overflow-y: auto;
    align-content: start;
}

.sg-cell[b-un81rh6s0z] {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 5px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 80ms ease, box-shadow 120ms ease;
}

.sg-cell--empty[b-un81rh6s0z] {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: default;
}

.sg-cell--item[b-un81rh6s0z] {
    border: 1px solid var(--rar-border, rgba(80,70,55,0.7));
    background: var(--rar-bg, rgba(40,35,28,0.9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--rar-glow, none);
}

.sg-cell--item:hover[b-un81rh6s0z] {
    transform: scale(1.08);
    z-index: 2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), var(--rar-glow, none), 0 4px 14px rgba(0,0,0,0.5);
}

.sg-cell.rar-common[b-un81rh6s0z]   { --rar-border: rgba(120,110,90,0.6); --rar-bg: rgba(42,38,30,0.92); --rar-glow: none; }
.sg-cell.rar-uncommon[b-un81rh6s0z] { --rar-border: rgba(60,140,60,0.7);  --rar-bg: rgba(24,44,24,0.92); --rar-glow: 0 0 8px rgba(60,140,60,0.22); }
.sg-cell.rar-rare[b-un81rh6s0z]     { --rar-border: rgba(60,100,180,0.7); --rar-bg: rgba(18,28,52,0.92); --rar-glow: 0 0 8px rgba(60,100,180,0.25); }

.sg-glyph[b-un81rh6s0z] {
    font-family: var(--font-mono, monospace);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--rar-text, var(--ink));
    user-select: none;
}

.sg-cell.rar-common   .sg-glyph[b-un81rh6s0z] { color: var(--ink, #d8cdb8); }
.sg-cell.rar-uncommon .sg-glyph[b-un81rh6s0z] { color: #7fce7f; }
.sg-cell.rar-rare     .sg-glyph[b-un81rh6s0z] { color: #7fb6ec; }

/* Rich tooltip */
.sg-tooltip[b-un81rh6s0z] {
    position: fixed;
    z-index: 800;
    width: 240px;
    pointer-events: none;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background:
        linear-gradient(160deg, rgba(255,255,255,0.04), rgba(0,0,0,0.32)),
        color-mix(in srgb, var(--panel) 97%, black);
    border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
    border-radius: var(--r-sm);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 16%, transparent),
        0 12px 36px rgba(0,0,0,0.62);
}

.sg-tooltip.sg-tooltip--interactable[b-un81rh6s0z] {
    pointer-events: auto;
}

.sg-tip-name[b-un81rh6s0z] {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
}

.sg-tip-name.rar-common[b-un81rh6s0z]   { color: var(--parch, #d8cdb8); }
.sg-tip-name.rar-uncommon[b-un81rh6s0z] { color: #7fce7f; }
.sg-tip-name.rar-rare[b-un81rh6s0z]     { color: #7fb6ec; }

.sg-tip-meta[b-un81rh6s0z] {
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.sg-tip-stats[b-un81rh6s0z] {
    font-size: 0.75rem;
    color: var(--parch-dim, #b7ad97);
    font-weight: 600;
}

.sg-tip-attune[b-un81rh6s0z] {
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--gold) 80%, transparent);
    font-style: italic;
}

.sg-tip-chips[b-un81rh6s0z] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sg-tip-chip[b-un81rh6s0z] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--parch-dim, #b7ad97);
}

.sg-tip-flavor[b-un81rh6s0z] {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--parch-dim, #b7ad97);
    line-height: 1.38;
    border-left: 2px solid color-mix(in srgb, var(--gold) 32%, transparent);
    padding-left: 8px;
    opacity: 0.85;
}

.sg-tip-origin[b-un81rh6s0z] {
    font-size: 0.66rem;
    color: color-mix(in srgb, var(--muted) 70%, transparent);
    font-style: italic;
}

.sg-tip-price[b-un81rh6s0z] {
    font-size: 0.76rem;
    color: var(--gold-bright, #e9c87a);
    font-weight: 700;
}

.sg-tip-actions[b-un81rh6s0z] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: auto;
}

.sg-tip-confirm[b-un81rh6s0z] {
    font-size: 0.68rem;
    color: var(--gold-bright, #e9c87a);
    font-style: italic;
    padding: 4px 0;
    width: 100%;
}

/* Stash view toggle */
.stash-view-toggle[b-un81rh6s0z] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--panel-2, #1c1a17);
    border: 1px solid var(--line, #3a352c);
    border-radius: 6px;
    overflow: hidden;
}

.stash-view-toggle button[b-un81rh6s0z] {
    background: none;
    border: none;
    padding: 4px 9px;
    cursor: pointer;
    color: var(--ink-2, #b7ad97);
    font-size: .76rem;
    transition: background 120ms ease, color 120ms ease;
}

.stash-view-toggle button.on[b-un81rh6s0z] {
    background: var(--gold-tarnished, #b89b5e);
    color: #1a160e;
    font-weight: 700;
}
/* /Components/ArtSystem/AcSlot.razor.rz.scp.css */
/* AcSlot — forged socket. Material = ported iron texture; structure (bevel, studs, rim) procedural.
   Swap the inner content (icon/glyph/ghost) without touching the frame: the slot owns the frame. */
.ac-slot[b-8ighy246lo] {
    position: relative;
    width: var(--ac-slot-size, 56px);
    height: var(--ac-slot-size, 56px);
    flex: 0 0 auto;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .22)),
        url('/art/ui/textures/iron.webp');
    background-size: cover, 120px;
    border: 1px solid #000;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .05),
        inset 0 3px 7px rgba(0, 0, 0, .85),
        inset 0 -1px 0 rgba(255, 255, 255, .05),
        0 2px 4px rgba(0, 0, 0, .5);
}

.ac-slot--round[b-8ighy246lo] { border-radius: 50%; }

.ac-slot[role="button"][b-8ighy246lo] { cursor: pointer; transition: filter 120ms ease; }
.ac-slot[role="button"]:hover[b-8ighy246lo] { filter: brightness(1.13); }
.ac-slot[role="button"]:active[b-8ighy246lo] { filter: brightness(.95); }

.ac-slot__inner[b-8ighy246lo] {
    position: absolute;
    inset: 7px;
    display: grid;
    place-items: center;
    z-index: 2;
    overflow: hidden;
}

.ac-slot__icon[b-8ighy246lo] {
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
}

.ac-slot__glyph[b-8ighy246lo] {
    font-family: var(--font-mono, monospace);
    font-size: calc(var(--ac-slot-size, 56px) * .42);
    line-height: 1;
    color: #d8cca4;
    text-shadow: 0 1px 2px #000;
}

.ac-slot__ghost[b-8ighy246lo] {
    font-family: var(--font-mono, monospace);
    font-size: calc(var(--ac-slot-size, 56px) * .4);
    line-height: 1;
    color: #3a352b;
    opacity: .6;
    text-shadow: inset 0 1px 0 rgba(0, 0, 0, .6);
}

.ac-slot--empty[b-8ighy246lo] {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .6),
        inset 0 3px 9px rgba(0, 0, 0, .85);
    filter: saturate(.7) brightness(.82);
}

/* corner studs (square slots only) */
.ac-slot__stud[b-8ighy246lo] {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    z-index: 3;
    background: radial-gradient(circle at 38% 30%, #83838a, #3c3c40 42%, #0e0e10 78%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .22);
}
.ac-slot__stud--tl[b-8ighy246lo] { top: 3px; left: 3px; }
.ac-slot__stud--tr[b-8ighy246lo] { top: 3px; right: 3px; }
.ac-slot__stud--bl[b-8ighy246lo] { bottom: 3px; left: 3px; }
.ac-slot__stud--br[b-8ighy246lo] { bottom: 3px; right: 3px; }
.ac-slot--round .ac-slot__stud[b-8ighy246lo] { display: none; }

/* rarity rims — tight metal inlay, restrained glow */
.ac-slot--r-uncommon[b-8ighy246lo]  { box-shadow: inset 0 0 0 2px #5f8a4a, inset 0 3px 7px rgba(0,0,0,.85), 0 0 6px rgba(95,138,74,.22); }
.ac-slot--r-rare[b-8ighy246lo]      { box-shadow: inset 0 0 0 2px #4a78a8, inset 0 3px 7px rgba(0,0,0,.85), 0 0 7px rgba(74,120,168,.24); }
.ac-slot--r-epic[b-8ighy246lo]      { box-shadow: inset 0 0 0 2px #7a4fa3, inset 0 3px 7px rgba(0,0,0,.85), 0 0 7px rgba(122,79,163,.24); }
.ac-slot--r-legendary[b-8ighy246lo] { box-shadow: inset 0 0 0 2px #b8862f, inset 0 3px 7px rgba(0,0,0,.85), 0 0 8px rgba(184,134,47,.28); }

/* talent-node states (Shape="round") */
.ac-slot--locked[b-8ighy246lo]    { filter: grayscale(.85) brightness(.5); }
.ac-slot--available[b-8ighy246lo] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 12px rgba(184,134,47,.18), 0 2px 4px rgba(0,0,0,.5); }
.ac-slot--selected[b-8ighy246lo]  { box-shadow: inset 0 0 0 2px #c2a157, inset 0 0 11px rgba(184,134,47,.35), 0 0 8px rgba(184,134,47,.3); }
/* /Components/BattleBackdrop.razor.rz.scp.css */
/* Scoped backdrop styling (ART_BIBLE §7). The clutter layer fills the .board, sits UNDER the grid
   lines and tokens, and is dimmed + vignetted so foreground tokens stay legible. Tokens are z>=2
   (app.css); move-tiles are z1; this backdrop is z0. Colours come from the symbols themselves
   (TerrainSymbols.razor) + app.css :root tokens. */

.battle-backdrop[b-9a3g1rejzl] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 6px;
}

.bd-svg[b-9a3g1rejzl] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.72;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)) saturate(0.82) brightness(0.95);
}

/* Warm vignette — mat centre stays clear, edges deepen like a real table */
.battle-backdrop[b-9a3g1rejzl]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(110% 100% at 50% 40%, transparent 48%, rgba(8, 6, 4, 0.62) 100%),
        linear-gradient(180deg, rgba(20, 16, 12, 0.15) 0%, transparent 25%, transparent 75%, rgba(10, 8, 6, 0.25) 100%);
    pointer-events: none;
    z-index: 0;
}
/* /Components/BattleBoardViewport.razor.rz.scp.css */
.board-viewport-shell[b-2uardfsigo] {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: clamp(360px, 62vh, 780px);
    display: flex;
    flex-direction: column;
}

.board-viewport[b-2uardfsigo] {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    overflow: hidden;
    background: var(--pit);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: grab;
    outline: none;
}
.board-viewport.panning[b-2uardfsigo] { cursor: grabbing; }
.board-viewport.has-pitch[b-2uardfsigo] {
    background: linear-gradient(180deg, #121318 0%, var(--pit) 35%);
}

.board-stage[b-2uardfsigo] {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.board-pitch[b-2uardfsigo] {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.2,.6,.2,1);
}

.board-minimap[b-2uardfsigo] {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 148px;
    height: 96px;
    z-index: 12;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #0a0b0dcc;
    box-shadow: 0 4px 14px #00000080;
    cursor: crosshair;
    overflow: hidden;
    pointer-events: auto;
}
.minimap-svg[b-2uardfsigo] { width: 100%; height: 100%; display: block; }
.minimap-bg[b-2uardfsigo] { fill: #1a1c22; opacity: .85; }
.minimap-terrain[b-2uardfsigo] { stroke: none; opacity: 0.72; }
.minimap-terrain.trn-obstacle[b-2uardfsigo]   { fill: var(--trn-obstacle-bg, #2a261e); }
.minimap-terrain.trn-cover-half[b-2uardfsigo] { fill: var(--trn-cover-half-bg, #6b4c1a); opacity: 0.55; }
.minimap-terrain.trn-cover-full[b-2uardfsigo] { fill: var(--trn-cover-full-bg, #6b3a0e); opacity: 0.62; }
.minimap-terrain.trn-difficult[b-2uardfsigo]  { fill: var(--trn-difficult-bg, #4a3012); opacity: 0.5; }
.minimap-terrain.trn-elevation[b-2uardfsigo]  { fill: var(--trn-elevation-bg, #445566); opacity: 0.55; }
.minimap-dot[b-2uardfsigo] {
    fill: var(--enemy-line);
    opacity: .75;
    stroke: none;
}
.minimap-dot.player[b-2uardfsigo] { fill: var(--player-line); }
.minimap-dot.active[b-2uardfsigo] {
    fill: var(--gold-bright);
    opacity: 1;
    animation: minimap-pulse-b-2uardfsigo 1.1s ease-in-out infinite;
}
@keyframes minimap-pulse-b-2uardfsigo {
    0%, 100% { r: 6; opacity: .85; }
    50% { r: 8; opacity: 1; }
}

.viewport-hud[b-2uardfsigo] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
    opacity: 0.75;
}
.viewport-hud .btn-sm[b-2uardfsigo] {
    padding: 2px 8px;
    font-size: 11px;
    min-height: 0;
}
/* /Components/BattleWatchView.razor.rz.scp.css */
/* BattleWatchView — real-time watched autobattle (#56). Scoped. Tokens positioned by continuous
   ExactX/ExactY; the .token transition (in app.css) smooths the motion for free. */

.watch-wrap[b-obinzyisr5] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 12px 16px;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 48px);
}
.watch-head[b-obinzyisr5] { text-align: center; margin-bottom: 8px; flex: 0 0 auto; }
.watch-head h2[b-obinzyisr5] { margin: 0; color: var(--gold-bright); font-family: var(--font-display); }

/* Expedition leg pill — "this is fight X of Y in a delve" readout during a watched adventure. */
.expedition-leg-pill[b-obinzyisr5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    margin-right: 6px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gold-bright, #e8c87a);
    background: rgba(40, 28, 12, 0.72);
    border: 1px solid rgba(232, 200, 122, 0.45);
    white-space: nowrap;
}

/* Slice E1 — bottom bar layout inside the CombatShell: log + dev tools side by side. */
.watch-bottom-row[b-obinzyisr5] { display: flex; gap: 8px; align-items: stretch; }
.watch-log-panel[b-obinzyisr5] { flex: 1 1 auto; padding: 8px 10px; max-height: 120px; overflow-y: auto; }
.watch-bottom-row .watch-controls[b-obinzyisr5] { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; max-width: 320px; }

.board[b-obinzyisr5] {
    position: relative;
    border-radius: 4px;
}

/* Slice E2 — frozen board during pause-inspect */
.board.frozen[b-obinzyisr5] { filter: saturate(.5) brightness(.7); transition: filter .25s ease; }
.token.inspectable[b-obinzyisr5] { cursor: pointer; }

.inspect-overlay[b-obinzyisr5] {
    position: fixed; inset: 0; z-index: 200;
    background: #06050399; backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 24px; overflow-y: auto;
    animation: inspect-in-b-obinzyisr5 .22s ease-out;
}
.inspect-sheet[b-obinzyisr5] { position: relative; width: 100%; max-width: 920px; }
.inspect-close[b-obinzyisr5] { position: sticky; top: 0; float: right; z-index: 2; margin-bottom: 6px; }
@keyframes inspect-in-b-obinzyisr5 { 0% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .inspect-overlay[b-obinzyisr5] { animation: none; }
}

/* FIX B — the OUTER positioning wrapper. Position is a GPU-composited transform: translate3d (not
   left/top), so a moving token no longer forces a full layout+paint every frame — the compositor just
   re-positions the existing layer. The move TRANSITION lives here (on transform), and the inner .token
   keeps its juice transform animations so the two never collide on one element.
   ease-out (not linear) so the unavoidable mid-flight retargets each render blend into a smooth
   course-correction instead of a velocity kink — the first half of the fix is making --token-transition-ms
   outlast the worst-case frame interval (see MoveTransitionMs). */
.token-pos[b-obinzyisr5] {
    position: absolute;
    top: 0; left: 0;
    transition: transform var(--token-transition-ms, 120ms) ease-out;
    will-change: transform;
    z-index: 2;
}
.token-pos.windup-lock[b-obinzyisr5] {
    transition: transform calc(var(--token-transition-ms, 120ms) * 0.65) ease-out;
    z-index: 4;
}
.token-pos.dying[b-obinzyisr5] { z-index: 4; }

/* the inner token: fills the wrapper at 0,0 and owns the juice transforms (flinch/recoil/hit-react/
   crit-flash/dying/fallen). NOT absolutely positioned — its transform animations are free to run without
   fighting the wrapper's positional translate3d. */
.token[b-obinzyisr5] {
    position: relative;
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.token.fallen[b-obinzyisr5] { opacity: .3; filter: grayscale(.6); transition: opacity .5s; }
.token.moving .token-disc[b-obinzyisr5] { box-shadow: 0 0 8px var(--gold-tarnished); }

/* Fix #9: crit-flash ring on the attacker's token — a brief gold halo rings the figure for ~600ms.
   Purely cosmetic; driven by the existing beat list, not new dice. */
.token.crit-flash[b-obinzyisr5] { animation: token-crit-flash-b-obinzyisr5 .6s ease-out forwards; }
@keyframes token-crit-flash-b-obinzyisr5 {
    0%   { filter: drop-shadow(0 0 0 var(--gold-bright)); }
    20%  { filter: drop-shadow(0 0 10px var(--gold-bright)) brightness(1.35); }
    60%  { filter: drop-shadow(0 0 6px var(--gold-tarnished)) brightness(1.15); }
    100% { filter: none; }
}

/* ---- COMBAT JUICE PASS ---- */

/* Target flinch: hit = quick flash+shake; crit = harder flash+stagger; kill = biggest flash+slump lead. */
.token.token-flinch-hit[b-obinzyisr5]  { animation: token-flinch-hit-b-obinzyisr5  .38s ease-out forwards; }
.token.token-flinch-crit[b-obinzyisr5] { animation: token-flinch-crit-b-obinzyisr5 .55s ease-out forwards; }
.token.token-flinch-kill[b-obinzyisr5] { animation: token-flinch-kill-b-obinzyisr5 .60s ease-out forwards; }

@keyframes token-flinch-hit-b-obinzyisr5 {
    0%   { transform: scale(1);                              filter: brightness(1); }
    12%  { transform: scale(1.05) translateX(3px);           filter: brightness(2.8); }
    38%  { transform: scale(.97) translateX(-2px);           filter: brightness(1); }
    70%  { transform: scale(1)   translateX(.5px); }
    100% { transform: none; }
}
@keyframes token-flinch-crit-b-obinzyisr5 {
    0%   { transform: scale(1);                              filter: brightness(1); }
    10%  { transform: scale(1.08) translateX(5px);           filter: brightness(3.8); }
    30%  { transform: scale(.93) translateX(-4px);           filter: brightness(1.25); }
    55%  { transform: scale(1.02) translateX(2px);           filter: brightness(1); }
    80%  { transform: scale(.99) translateX(-1px); }
    100% { transform: none; }
}
@keyframes token-flinch-kill-b-obinzyisr5 {
    0%   { transform: scale(1);                              filter: brightness(1); }
    8%   { transform: scale(1.1) translateX(6px);            filter: brightness(4.5); }
    25%  { transform: scale(.9)  translateX(-5px);           filter: brightness(1.6); }
    50%  { transform: scale(1.03) translateX(2px);           filter: brightness(1.1); }
    75%  { transform: scale(.98) translateX(-1px);           filter: brightness(1); }
    100% { transform: none; }
}

/* Attacker recoil: quick snap-back after the strike fires. */
.token.attacker-recoil[b-obinzyisr5] { animation: token-recoil-b-obinzyisr5 .3s ease-out forwards; }
@keyframes token-recoil-b-obinzyisr5 {
    0%   { transform: none; }
    20%  { transform: translateX(-4px) scale(.98); }
    60%  { transform: translateX(1px); }
    100% { transform: none; }
}

/* Dying token: flash → slump over 750ms, landing near the fallen state.
   CombatToken gets Fallen=false during this window so the inner figure stays upright
   for the flash beat; the outer wrapper holds the death read. */
.token.dying[b-obinzyisr5] {
    animation: token-dying-settle-b-obinzyisr5 .75s ease-out forwards;
    z-index: 4;
    pointer-events: none;
}
@keyframes token-dying-settle-b-obinzyisr5 {
    0%   { opacity: 1; filter: brightness(1); }
    10%  { opacity: 1; filter: brightness(4.5) saturate(0); }
    25%  { opacity: .85; filter: brightness(1.8) grayscale(.4); }
    55%  { opacity: .65; filter: brightness(.9)  grayscale(.7); }
    100% { opacity: .3;  filter: grayscale(.85)  brightness(.5); }
}

/* Board impulse: tiny shake on the board wrapper for heavy hits. Keep under 4px — subtle beats loud. */
.board.board-impulse-crit[b-obinzyisr5] { animation: board-shake-crit-b-obinzyisr5 .35s ease-out; }
.board.board-impulse-kill[b-obinzyisr5] { animation: board-shake-kill-b-obinzyisr5 .48s ease-out; }
@keyframes board-shake-crit-b-obinzyisr5 {
    0%, 100% { transform: none; }
    20%  { transform: translate(-3px, 1px); }
    50%  { transform: translate(2px, -1px); }
    80%  { transform: translate(-1px, 0); }
}
@keyframes board-shake-kill-b-obinzyisr5 {
    0%, 100% { transform: none; }
    15%  { transform: translate(-3px, 2px); }
    35%  { transform: translate(3px, -2px); }
    60%  { transform: translate(-2px, 1px); }
    80%  { transform: translate(1px, -1px); }
}

/* Kill vignette: screen-edge blood pulse. "enemy" = ambient kill, "hero" = heavier hero death. */
.kill-vignette[b-obinzyisr5] {
    position: absolute; inset: 0; z-index: 11; pointer-events: none; border-radius: 4px;
    animation: kill-vignette-pulse-b-obinzyisr5 .85s ease-out forwards;
}
.kill-vignette.enemy[b-obinzyisr5] { box-shadow: inset 0 0 50px 10px rgba(110, 20, 20, .65); }
.kill-vignette.hero[b-obinzyisr5]  { box-shadow: inset 0 0 70px 16px rgba(80, 10, 10, .90); }
@keyframes kill-vignette-pulse-b-obinzyisr5 {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    65%  { opacity: .75; }
    100% { opacity: 0; }
}

/* PR #101: Target hit-reaction — the STRUCK unit recoils + flashes white for a beat, so every landed blow
   has a felt receiving end (not just a number floating off an unmoved body). Short and punchy; longer/heavier
   on a crit or kill via the 360ms timer. Driven by the beat list, no new dice. */
.token.hit-react[b-obinzyisr5] { animation: token-hit-react-b-obinzyisr5 .24s ease-out; }
@keyframes token-hit-react-b-obinzyisr5 {
    0%   { transform: translateY(0) scale(1); filter: none; }
    18%  { transform: translateY(1px) scale(.965); filter: brightness(1.7) saturate(.4); }
    45%  { transform: translateY(0) scale(1.01); filter: brightness(1.15); }
    100% { transform: translateY(0) scale(1); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    .token.hit-react[b-obinzyisr5] { animation: none; }
}

.token-disc[b-obinzyisr5] {
    position: relative;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    font: 700 1rem var(--font-display); color: var(--pit);
    border: 2px solid var(--ink); box-shadow: 0 2px 5px #00000080;
}
/* a tiny theme-mark on the figure (ties the figure to its bubble's mark glyph) */
.token-mark[b-obinzyisr5] {
    position: absolute; top: -3px; right: -3px;
    font-size: 9px; line-height: 1; font-weight: 700;
    color: var(--gold-bright); text-shadow: 0 1px 2px #000;
    background: var(--pit); border-radius: 50%; width: 12px; height: 12px;
    display: grid; place-items: center;
}

/* themed rings — a thin 2px colored ring matching the bubble's theme accent, so a glance at the board
   matches a glance at a bubble. Subtle: the team color stays, the ring is the identity layer. */
.theme-ring-arcane[b-obinzyisr5] { box-shadow: 0 0 0 1.5px var(--wound), 0 2px 5px #00000080; }
.theme-ring-arcane .token-mark[b-obinzyisr5] { color: var(--wound); }
.theme-ring-divine[b-obinzyisr5] { box-shadow: 0 0 0 1.5px var(--steel-rim), 0 2px 5px #00000080; }
.theme-ring-divine .token-mark[b-obinzyisr5] { color: var(--gold-bright); }
.theme-ring-shadow[b-obinzyisr5] { box-shadow: 0 0 0 1.5px var(--acc-forbidden), 0 2px 5px #00000080; }
.theme-ring-shadow .token-mark[b-obinzyisr5] { color: var(--acc-forbidden); }
.theme-ring-rage[b-obinzyisr5] { box-shadow: 0 0 0 1.5px var(--blood), 0 2px 5px #00000080; }
.theme-ring-rage .token-mark[b-obinzyisr5] { color: var(--blood); }
.theme-ring-steel[b-obinzyisr5] { box-shadow: 0 0 0 1.5px var(--steel-rim), 0 2px 5px #00000080; }
.theme-ring-iron[b-obinzyisr5] { box-shadow: 0 0 0 1.5px var(--steel), 0 2px 5px #00000080; }
.theme-ring-iron .token-mark[b-obinzyisr5] { color: var(--steel-rim); }
.theme-ring-sylvan[b-obinzyisr5] { box-shadow: 0 0 0 1.5px var(--acc-wild), 0 2px 5px #00000080; }
.theme-ring-sylvan .token-mark[b-obinzyisr5] { color: var(--acc-wild); }
.theme-ring-ward[b-obinzyisr5] { box-shadow: 0 0 0 1.5px var(--ward), 0 2px 5px #00000080; }
.theme-ring-ward .token-mark[b-obinzyisr5] { color: var(--ward); }
.theme-ring-blood[b-obinzyisr5] { box-shadow: 0 0 0 1.5px var(--blood), 0 2px 5px #00000080; }
.theme-ring-blood .token-mark[b-obinzyisr5] { color: var(--blood); }
.theme-ring-default[b-obinzyisr5] { /* plain ink ring is the base */ }
.token-hp[b-obinzyisr5] { width: 42px; margin-top: 2px; }

/* WP4 / Fix #12: the Nerve telegraph — wavering (amber !) / broken (red !!).
   Wavering: amber pulsing !. Broken: blood-red flashing !! with CSS shake. Legible at 52px cell.
   Disappears cleanly when Rally restores nerve above 55. */
.nerve-mark[b-obinzyisr5] {
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    min-width: 16px; height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    display: grid; place-items: center;
    font: 900 11px/1 var(--font-display);
    color: var(--pit);
    background: var(--wound);
    box-shadow: 0 0 6px var(--wound), 0 1px 2px #000;
    animation: nerve-pulse-b-obinzyisr5 1.1s ease-in-out infinite;
    white-space: nowrap;
}
.nerve-mark.wavering[b-obinzyisr5] {
    background: var(--wound);
    box-shadow: 0 0 6px var(--wound), 0 1px 2px #000;
}
.nerve-mark.broken[b-obinzyisr5] {
    background: var(--blood);
    box-shadow: 0 0 9px var(--blood), 0 1px 2px #000;
    animation: nerve-broken-flash-b-obinzyisr5 .55s ease-in-out infinite;
}
@keyframes nerve-pulse-b-obinzyisr5 {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translateX(-50%) scale(1.22); }
}
/* Fix #12: broken state flashes + shakes to telegraph a critical morale collapse. */
@keyframes nerve-broken-flash-b-obinzyisr5 {
    0%   { transform: translateX(-50%) scale(1);    opacity: 1; }
    20%  { transform: translateX(calc(-50% - 2px)) scale(1.15); opacity: 1; }
    40%  { transform: translateX(calc(-50% + 2px)) scale(1.2);  opacity: .9; }
    60%  { transform: translateX(calc(-50% - 1px)) scale(1.15); opacity: 1; }
    80%  { transform: translateX(calc(-50% + 1px)) scale(1.1);  opacity: .85; }
    100% { transform: translateX(-50%) scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .nerve-mark[b-obinzyisr5] { animation: none; }
    /* Juice pass — all new animations: replace with instant opacity fade (still readable, no motion). */
    .token.token-flinch-hit[b-obinzyisr5],
    .token.token-flinch-crit[b-obinzyisr5],
    .token.token-flinch-kill[b-obinzyisr5]  { animation: none; }
    .token.attacker-recoil[b-obinzyisr5]    { animation: none; }
    .token.dying[b-obinzyisr5]              { animation: token-dying-prm-b-obinzyisr5 .75s ease-out forwards; }
    .board.board-impulse-crit[b-obinzyisr5],
    .board.board-impulse-kill[b-obinzyisr5] { animation: none; }
    .kill-vignette[b-obinzyisr5]            { animation: none; opacity: 0; }
    .token-hp-critical .hp-fill[b-obinzyisr5] { animation: none; }
    .dmg-float.crit[b-obinzyisr5]           { animation: dmg-float-up-b-obinzyisr5 1.1s ease-out forwards; }
    .dmg-float.kill[b-obinzyisr5]           { animation: dmg-float-up-b-obinzyisr5 1.2s ease-out forwards; }
}
@keyframes token-dying-prm-b-obinzyisr5 {
    0%   { opacity: 1; }
    100% { opacity: .3; filter: grayscale(.85); }
}
/* Juice: HP bar with damage-ghost trailing chunk + low-HP danger pulse. */
.hp-bar[b-obinzyisr5] {
    position: relative; height: 4px; background: var(--pit); border-radius: 2px;
    overflow: hidden; border: 1px solid var(--hairline);
}
.hp-ghost[b-obinzyisr5] {
    position: absolute; left: 0; top: 0; height: 100%; border-radius: inherit;
    background: rgba(210, 70, 50, .68);
    transition: width .65s .15s ease-out;   /* delay so ghost holds briefly, then catches up */
    pointer-events: none;
}
.hp-fill[b-obinzyisr5] {
    display: block; position: relative; z-index: 1;
    height: 100%; background: var(--hp); border-radius: inherit;
    transition: width .22s ease-out;
}

/* Low-HP danger: pulsing glow on the bar + a subtle red rim on the token cell. */
.token-hp-critical .hp-bar[b-obinzyisr5] { box-shadow: 0 0 5px var(--blood), 0 0 2px var(--blood); }
.token-hp-critical .hp-fill[b-obinzyisr5] { animation: hp-crit-pulse-b-obinzyisr5 1.1s ease-in-out infinite; }
@keyframes hp-crit-pulse-b-obinzyisr5 {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; filter: brightness(1.4); }
}

/* Per-attack read: every resolved beat gets an origin cue, a target cue, and a short lane
   between them. This is intentionally quieter than the impact symbol; its job is grammar:
   who acted, where it landed, and whether it hit. */
.strike-path[b-obinzyisr5] {
    position: absolute;
    z-index: 5;
    height: 2px;
    transform-origin: 0 50%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, var(--steel-rim) 22%, var(--steel-rim) 78%, transparent 100%);
    box-shadow: 0 0 5px rgba(230, 218, 185, .35);
    animation: strike-path-reveal-b-obinzyisr5 .7s ease-out forwards;
}
.strike-path.miss[b-obinzyisr5] {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--muted) 25%, transparent 100%);
    box-shadow: none;
}
.strike-path.crit[b-obinzyisr5],
.strike-path.kill[b-obinzyisr5] {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-bright) 20%, var(--blood) 86%, transparent 100%);
    box-shadow: 0 0 8px rgba(213, 165, 74, .45);
}
@keyframes strike-path-reveal-b-obinzyisr5 {
    0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
    18%  { opacity: .85; clip-path: inset(0 0 0 0); }
    62%  { opacity: .7; }
    100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

.actor-cue[b-obinzyisr5] {
    position: absolute;
    z-index: 6;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 2px solid var(--steel-rim);
    box-shadow: 0 0 8px rgba(230, 218, 185, .25);
    animation: actor-cue-pulse-b-obinzyisr5 .7s ease-out forwards;
}
.actor-cue.source[b-obinzyisr5] {
    width: 18px;
    height: 18px;
    border-color: var(--gold-tarnished);
}
.actor-cue.target[b-obinzyisr5] {
    border-color: var(--wound);
}
.actor-cue.miss[b-obinzyisr5] {
    border-color: var(--muted);
    box-shadow: none;
}
.actor-cue.crit[b-obinzyisr5],
.actor-cue.kill[b-obinzyisr5] {
    border-color: var(--gold-bright);
    box-shadow: 0 0 10px rgba(213, 165, 74, .55);
}
@keyframes actor-cue-pulse-b-obinzyisr5 {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
    20%  { opacity: .9; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

/* mini speech-bubble — a lighter-weight bubble than the SpeechBubble component, positioned over the
   speaker each tick. Parchment tokens + tone tint, same language as NarratorPanel.
   SLICE 2.5 (owner brief): each bubble is THEMED to its speaker's identity so you can tell whose voice
   it is at a glance in high-speed chaos. The discipline: a STABLE PARCHMENT BASE (never a color block —
   that would jar), with the identity carried by (1) a 2px tinted ACCENT BORDER — the at-a-glance color,
   (2) a corner MARK GLYPH — the secondary read, (3) a subtle FONT/TEXTURE lean — the flavor. Subtle
   but instantly distinguishable. Themes keyed off class/race/archetype (see ThemeFor in the razor). */
.speech-bubble-mini[b-obinzyisr5] {
    position: absolute;
    transform: translate(-50%, 0);
    z-index: 7;
    max-width: 120px;           /* tighter — was 180; bubbles were crowding the board */
    padding: 3px 7px 4px;
    background: linear-gradient(180deg, var(--page) 0%, var(--page-faded) 100%);  /* stable parchment base */
    color: var(--pit);
    border: 1.5px solid var(--leather);   /* default border; themes override the color */
    border-radius: 7px;
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
    font: italic 11px/1.25 var(--font-display);
    text-align: center;
    pointer-events: none;
    animation: bubble-mini-in-b-obinzyisr5 .25s ease-out;
    display: flex; align-items: baseline; gap: 3px; justify-content: center;
}
.bubble-mark[b-obinzyisr5] { font-style: normal; font-size: 11px; opacity: .85; flex: 0 0 auto; }
.bubble-words[b-obinzyisr5] { flex: 1 1 auto; }

@keyframes bubble-mini-in-b-obinzyisr5 { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- TONE tints (the emotional read — overrides theme border only for the most charged moments) ---- */
.speech-bubble-mini.tone-afraid[b-obinzyisr5], .speech-bubble-mini.tone-panicked[b-obinzyisr5], .speech-bubble-mini.tone-grim[b-obinzyisr5] { border-color: var(--blood); }
.speech-bubble-mini.tone-fierce[b-obinzyisr5], .speech-bubble-mini.tone-wild[b-obinzyisr5], .speech-bubble-mini.tone-triumphant[b-obinzyisr5] { border-color: var(--gold-bright); }
.speech-bubble-mini.tone-wry[b-obinzyisr5], .speech-bubble-mini.tone-smug[b-obinzyisr5] { border-color: var(--steel-rim); }

/* ---- IDENTITY THEMES (the at-a-glance WHO — subtle accents on the parchment base) ----
   Each: an accent border color (the glanceable signal) + a faint corner glow + a font lean. The base
   parchment + ink stay constant so the board never becomes a patchwork of color blocks. */

/* ARCANE — sorcerers/warlocks/wizards (the pyromancer read): ember-gold border, a warm corner glow,
   a slightly serif-italic flourish. Subtle fire, not a flamethrower. */
.speech-bubble-mini.theme-arcane[b-obinzyisr5] {
    border-color: var(--wound);
    box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 3px 0 6px -3px var(--wound);
}
.speech-bubble-mini.theme-arcane .bubble-mark[b-obinzyisr5] { color: var(--wound); text-shadow: 0 0 4px var(--wound); }
.speech-bubble-mini.theme-arcane .bubble-words[b-obinzyisr5] { font-family: "Palatino Linotype", Palatino, var(--font-display); }

/* DIVINE — clerics/paladins/paragons: crisp silver-gold border, a clean readable font, a soft ward glow.
   The "paragon = strong readable font" read. */
.speech-bubble-mini.theme-divine[b-obinzyisr5] {
    border-color: var(--steel-rim);
    box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 0 6px -2px var(--ward);
}
.speech-bubble-mini.theme-divine .bubble-mark[b-obinzyisr5] { color: var(--gold-bright); }
.speech-bubble-mini.theme-divine .bubble-words[b-obinzyisr5] { font-family: "Trajan Pro", "Times New Roman", var(--font-display); font-style: normal; font-weight: 500; letter-spacing: .01em; }

/* SHADOW — rogues/rangers/assassins: a muted steel-violet border, condensed lean, no glow (they slip in). */
.speech-bubble-mini.theme-shadow[b-obinzyisr5] {
    border-color: var(--acc-forbidden);
    box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
.speech-bubble-mini.theme-shadow .bubble-mark[b-obinzyisr5] { color: var(--acc-forbidden); }
.speech-bubble-mini.theme-shadow .bubble-words[b-obinzyisr5] { font-family: "Segoe UI", Tahoma, sans-serif; font-size: 11.5px; }

/* RAGE — barbarians/berserkers: blood-red border, heavy weight, a hard edge. The "about to explode" read. */
.speech-bubble-mini.theme-rage[b-obinzyisr5] {
    border-color: var(--blood);
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 0 5px -2px var(--blood);
}
.speech-bubble-mini.theme-rage .bubble-mark[b-obinzyisr5] { color: var(--blood); }
.speech-bubble-mini.theme-rage .bubble-words[b-obinzyisr5] { font-weight: 700; font-style: normal; }

/* STEEL — fighters/warriors/knights: iron-grey border, even keel, the soldier's voice. */
.speech-bubble-mini.theme-steel[b-obinzyisr5] {
    border-color: var(--steel);
}
.speech-bubble-mini.theme-steel .bubble-mark[b-obinzyisr5] { color: var(--steel-rim); }
.speech-bubble-mini.theme-steel .bubble-words[b-obinzyisr5] { font-style: normal; font-weight: 500; }

/* IRON — dwarves (the "iron studs + runic font" read): a doubled stud-like border + a runic mark.
   Achieved with border + a subtle inset ridge; the runic glyph carries the font lean. */
.speech-bubble-mini.theme-iron[b-obinzyisr5] {
    border-color: var(--steel);
    border-style: solid;
    box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 0 0 1px var(--hairline);
}
.speech-bubble-mini.theme-iron .bubble-mark[b-obinzyisr5] { color: var(--steel-rim); font-size: 13px; }
.speech-bubble-mini.theme-iron .bubble-words[b-obinzyisr5] { font-family: "Cinzel", "Trajan Pro", var(--font-display); font-style: normal; letter-spacing: .03em; }

/* SYLVAN — elves: a green-gold border, airy italic, the fey read. */
.speech-bubble-mini.theme-sylvan[b-obinzyisr5] {
    border-color: var(--acc-wild);
}
.speech-bubble-mini.theme-sylvan .bubble-mark[b-obinzyisr5] { color: var(--acc-wild); }
.speech-bubble-mini.theme-sylvan .bubble-words[b-obinzyisr5] { font-style: italic; letter-spacing: .02em; }

/* WARD — timid/self-preserving (the cowardly knight): a cool blue ward border, thin. */
.speech-bubble-mini.theme-ward[b-obinzyisr5] { border-color: var(--ward); }
.speech-bubble-mini.theme-ward .bubble-mark[b-obinzyisr5] { color: var(--ward); }

/* BLOOD — vicious predators (enemy leaders): a dark blood border, hard. */
.speech-bubble-mini.theme-blood[b-obinzyisr5] { border-color: var(--blood); }
.speech-bubble-mini.theme-blood .bubble-mark[b-obinzyisr5] { color: var(--blood); }

/* DEFAULT — steady/unknown: the plain parchment + leather. */
.speech-bubble-mini.theme-default[b-obinzyisr5] { /* leather border is the base */ }


.watch-controls[b-obinzyisr5] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bias-knob[b-obinzyisr5] { display: flex; flex-direction: column; gap: 2px; margin-left: auto; }
.bias-knob input[type="range"][b-obinzyisr5] { width: 150px; }

.log-line[b-obinzyisr5] { font: 13px/1.4 var(--font-display); color: var(--ink); padding: 1px 0; }

/* WP3 + Juice: damage floats — the -5 / +3 read over a struck unit. Rises + fades; tone by kind.
   Juice: sharper overshoot pop (scale 1.22 at peak), crits get rotation, kills get bigger drift. */
.speed-tiers[b-obinzyisr5] { display: inline-flex; gap: 2px; }
.speed-tiers .btn-sm[b-obinzyisr5] { padding: 3px 8px; font-size: 12px; min-height: 0; }

.dmg-float[b-obinzyisr5] {
    position: absolute;
    z-index: 8;
    transform: translate(-50%, 0);
    font: 700 15px/1 var(--font-display);
    text-shadow: 0 1px 3px #000, 0 0 2px #000;
    pointer-events: none;
    white-space: nowrap;
    animation: dmg-float-up-b-obinzyisr5 .9s ease-out forwards;
}
.dmg-float.hit[b-obinzyisr5]  { color: var(--wound); }
.dmg-float.heal[b-obinzyisr5] { color: var(--ward); }
.dmg-float.potion[b-obinzyisr5] { color: var(--acc-wild, #6fa86a); font-weight: 800; text-shadow: 0 0 7px #2f5a32, 0 1px 3px #000; }
.dmg-float.potion[b-obinzyisr5]::before { content: "\1F9EA "; font-size: 12px; }
.dmg-float.kill[b-obinzyisr5] {
    color: var(--blood); font-size: 17px;
    text-shadow: 0 0 8px var(--blood), 0 1px 4px #000;
    animation: dmg-float-kill-b-obinzyisr5 1.2s ease-out forwards;
}
/* Fix #9 + Juice: crit float — gold, larger, rotation overshoot. */
.dmg-float.crit[b-obinzyisr5] {
    color: var(--gold-bright);
    font-size: 19px;
    text-shadow: 0 0 10px var(--gold-bright), 0 1px 4px #000;
    animation: dmg-float-crit-b-obinzyisr5 1.1s ease-out forwards;
}
.dmg-float.miss[b-obinzyisr5] {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 1px 3px #000;
}

/* WP3: the miss/whiff telegraph — a faded swing arc so a miss is VISIBLE. */
.whiff-arc[b-obinzyisr5] {
    position: absolute;
    z-index: 6;
    width: calc(var(--cell, 58px) * .62); height: calc(var(--cell, 58px) * .62);
    transform: translate(-50%, -50%);
    pointer-events: none;
    border-radius: 50%;
    border-top: 2px solid var(--muted);
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-left: 2px solid transparent;
    opacity: .55;
    animation: whiff-sweep-b-obinzyisr5 .65s ease-out forwards;
}
@keyframes whiff-sweep-b-obinzyisr5 {
    0%   { transform: translate(-50%, -50%) rotate(-40deg) scale(.6); opacity: 0; }
    25%  { opacity: .8; }
    100% { transform: translate(-50%, -50%) rotate(60deg) scale(1.1); opacity: 0; }
}

/* Base float: hard pop-in (scale 1.22 overshoot) then drift up and fade. */
@keyframes dmg-float-up-b-obinzyisr5 {
    0%   { opacity: 0;  transform: translate(-50%, 6px)   scale(.55); }
    11%  { opacity: 1;  transform: translate(-50%, -2px)  scale(1.22); }
    25%  { opacity: 1;  transform: translate(-50%, -4px)  scale(1.0); }
    100% { opacity: 0;  transform: translate(-50%, -30px) scale(.95); }
}

/* Crit float: bigger pop + brief rotation for extra drama. */
@keyframes dmg-float-crit-b-obinzyisr5 {
    0%   { opacity: 0;  transform: translate(-50%, 8px)   scale(.45) rotate(-6deg); }
    10%  { opacity: 1;  transform: translate(-50%, -3px)  scale(1.32) rotate(4deg); }
    26%  { opacity: 1;  transform: translate(-50%, -7px)  scale(1.08) rotate(-1deg); }
    100% { opacity: 0;  transform: translate(-50%, -40px) scale(1)    rotate(0deg); }
}

/* Kill float: slow heavy drift — the finishing blow lingers. */
@keyframes dmg-float-kill-b-obinzyisr5 {
    0%   { opacity: 0;  transform: translate(-50%, 8px)   scale(.5); }
    10%  { opacity: 1;  transform: translate(-50%, -3px)  scale(1.28); }
    30%  { opacity: 1;  transform: translate(-50%, -8px)  scale(1.0); }
    100% { opacity: 0;  transform: translate(-50%, -45px) scale(.95); }
}
/* End-of-battle verdict banner — now the FIRST child of the bottom bar (so the Continue button is never
   clipped). A solid, prominent strip with a clearly visible gold Continue CTA. */
.watch-verdict[b-obinzyisr5] {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px;
    margin-bottom: 8px; padding: 10px 16px;
    font: 17px/1.3 var(--font-display); color: var(--gold-bright);
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--panel-2, #1e1810) 96%, transparent));
    border: 1px solid var(--gold);
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--gold-bright) 30%, transparent);
}
.watch-verdict-line[b-obinzyisr5] { font-size: 18px; }
.watch-verdict .btn[b-obinzyisr5] { font-size: 15px; padding: 8px 18px; }

/* ---- Phase 2 — target tethers (wind-up / first-target / hover only) ---- */
.target-tethers[b-obinzyisr5] {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.target-tether[b-obinzyisr5] {
    stroke: var(--gold-tarnished, #c9a227);
    stroke-width: 1;
    stroke-dasharray: 3 8;
    fill: none;
    transition: opacity .12s ease;
    opacity: 0.12;
}
.target-tether.tether-player[b-obinzyisr5] { stroke: var(--player-line, #6a9e6a); }
.target-tether.tether-enemy[b-obinzyisr5]  { stroke: var(--enemy-line, #b85c5c); }
.target-tether.tether-heal[b-obinzyisr5]   { stroke: #5cb87a; stroke-dasharray: 2 6; }
.target-tether.tether-move[b-obinzyisr5]   { stroke-dasharray: 1 10; opacity: 0.16; }
.target-tether.tether-attack[style*="opacity:0.48"][b-obinzyisr5],
.target-tether.tether-heal[style*="opacity:0.42"][b-obinzyisr5] {
    stroke-width: 1.35;
}
.token-pos.windup-lock ~ .target-tethers .target-tether[b-obinzyisr5],
.target-tether[style*="opacity:0.35"][b-obinzyisr5] {
    stroke-width: 1.25;
}

/* Movement personality — subtle speed/readability accents per archetype. The transition-duration now
   rides on the positioning wrapper (which owns the transform transition); the filter/opacity accents
   filter the whole figure subtree from the wrapper, same look. */
.token-pos.moving.token-move-brash[b-obinzyisr5]    { transition-duration: 0.38s; filter: drop-shadow(0 0 4px rgba(201, 162, 39, 0.35)); }
.token-pos.moving.token-move-coward[b-obinzyisr5]   { transition-duration: 0.62s; opacity: 0.92; }
.token-pos.moving.token-move-scholar[b-obinzyisr5]  { transition-duration: 0.52s; }
.token-pos.moving.token-move-jovial[b-obinzyisr5]   { transition-duration: 0.42s; }
.token-pos.moving.token-move-proud[b-obinzyisr5]    { transition-duration: 0.48s; }
.token-pos.moving.token-move-gruff[b-obinzyisr5]    { transition-duration: 0.55s; }
.token-pos.moving.token-move-mercenary[b-obinzyisr5] { transition-duration: 0.46s; }
.token-pos.moving.token-move-stoic[b-obinzyisr5]    { transition-duration: 0.58s; }

/* ---- Enemy intent chip — shown on hover or windup (the tactical-commitment moment).
   Floats above the name label (which sits at top:-14px) so the two never collide.
   Quiet by default: enemy-palette, small type, no constant clutter. ---- */
.token-intent-chip[b-obinzyisr5] {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(50, 12, 4, 0.92);
    border: 1px solid var(--enemy-line);
    color: #ffcdbf;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px 2px 4px;
    border-radius: 7px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 32;
    display: flex;
    align-items: center;
    gap: 3px;
    letter-spacing: .04em;
    text-transform: uppercase;
    animation: intent-chip-in-b-obinzyisr5 .15s ease forwards;
}
.token-intent-chip .game-icon[b-obinzyisr5] { color: var(--enemy-line); flex: 0 0 auto; }
@keyframes intent-chip-in-b-obinzyisr5 {
    from { opacity: 0; transform: translateX(-50%) translateY(3px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .token-intent-chip[b-obinzyisr5] { animation: none; }
}

/* =====================================================================================
   S-A APPEAL-WINDOW SPIKE — the charged-moment pause ("the table slows").
   A slow-mo dwell (no modal): board-edge vignette + desaturate the non-involved, brighten the
   threatened HERO + the winding-up ENEMY, a pulsing tether between them, and ONE over-unit
   affordance card. Multi-channel: visual (here) + audio (acAudio) + DM line (NarratorPanel).
   ===================================================================================== */

/* The whole board cools + a heavy inset vignette pulls the eye to centre. NOT a freeze (the
   tokens still hold their slide transition) — a slow, grave dwell. */
.board.charged-pause[b-obinzyisr5] {
    filter: saturate(.78) brightness(.82) contrast(1.04);
    transition: filter .32s ease;
}
.board.charged-pause[b-obinzyisr5]::after {
    content: "";
    position: absolute; inset: 0; z-index: 7; pointer-events: none;
    box-shadow: inset 0 0 120px 30px rgba(120, 18, 14, .42),
                inset 0 0 40px 8px rgba(0, 0, 0, .55);
    animation: charged-vignette-in-b-obinzyisr5 .34s ease-out forwards, charged-vignette-breathe-b-obinzyisr5 2.1s ease-in-out .34s infinite;
}
@keyframes charged-vignette-in-b-obinzyisr5 {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes charged-vignette-breathe-b-obinzyisr5 {
    0%, 100% { box-shadow: inset 0 0 120px 30px rgba(120, 18, 14, .42), inset 0 0 40px 8px rgba(0,0,0,.55); }
    50%      { box-shadow: inset 0 0 150px 40px rgba(150, 26, 18, .55), inset 0 0 40px 8px rgba(0,0,0,.55); }
}

/* Focus the eye: desaturate everyone NOT in the moment; brighten the two who are. The focus classes ride
   on the positioning wrapper (.token-pos) so z-index actually takes effect (it is the positioned element)
   and the filter applies to the whole figure subtree. */
.board.charged-pause .token-pos.charged-dim[b-obinzyisr5] {
    filter: saturate(.25) brightness(.6);
    opacity: .72;
    transition: filter .3s ease, opacity .3s ease;
}
.board.charged-pause .token-pos.charged-hero[b-obinzyisr5] {
    z-index: 6;
    filter: drop-shadow(0 0 10px var(--ward, #7fb5c9)) brightness(1.12);
    animation: charged-hero-pulse-b-obinzyisr5 1.5s ease-in-out infinite;
}
.board.charged-pause .token-pos.charged-enemy[b-obinzyisr5] {
    z-index: 6;
    filter: drop-shadow(0 0 12px var(--blood, #b0432f)) brightness(1.16);
    animation: charged-enemy-pulse-b-obinzyisr5 1.1s ease-in-out infinite;
}
@keyframes charged-hero-pulse-b-obinzyisr5 {
    0%, 100% { filter: drop-shadow(0 0 8px var(--ward, #7fb5c9)) brightness(1.1); }
    50%      { filter: drop-shadow(0 0 16px var(--ward, #7fb5c9)) brightness(1.22); }
}
@keyframes charged-enemy-pulse-b-obinzyisr5 {
    0%, 100% { filter: drop-shadow(0 0 10px var(--blood, #b0432f)) brightness(1.14); }
    50%      { filter: drop-shadow(0 0 20px #e0503a) brightness(1.3); }
}

/* The threat tether — a thick, pulsing red line locking enemy → hero. */
.charged-tether[b-obinzyisr5] {
    stroke: #e0503a;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 9 7;
    filter: drop-shadow(0 0 5px rgba(224, 80, 58, .8));
    animation: charged-tether-flow-b-obinzyisr5 .9s linear infinite, charged-tether-glow-b-obinzyisr5 1.1s ease-in-out infinite;
}
@keyframes charged-tether-flow-b-obinzyisr5 { to { stroke-dashoffset: -32; } }
@keyframes charged-tether-glow-b-obinzyisr5 {
    0%, 100% { opacity: .75; }
    50%      { opacity: 1; }
}

/* Post-resolution payoff (POLISH Rule 1): the steadied hero pulses GREEN after a Rally spend. Rides on
   the positioning wrapper so z-index applies and the green pulse filters the whole figure. */
.token-pos.charged-steadied[b-obinzyisr5] {
    z-index: 6;
    animation: charged-steadied-pulse-b-obinzyisr5 1.4s ease-out forwards;
}
@keyframes charged-steadied-pulse-b-obinzyisr5 {
    0%   { filter: drop-shadow(0 0 4px var(--player-line, #8fd06f)) brightness(1.1); }
    25%  { filter: drop-shadow(0 0 18px var(--player-line, #8fd06f)) brightness(1.3); }
    100% { filter: none; }
}

/* Build 0: the screen-space APPEAL surface (.charged-overlay + .ca-* + its ca-stage-in/ca-options-in/
   ca-portrait-breathe keyframes) moved to the shared ChargedMomentOverlay.razor(.css) component so the
   watch view and SiteBattleView render ONE overlay. The board-space cues above (vignette/focus/tether)
   stay here — Blazor CSS isolation scopes them to THIS view's board markup. */

/* the feel-check dev strip */
.charged-devstrip[b-obinzyisr5] {
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--line, #3a3d48);
    flex-wrap: wrap; gap: 6px; align-items: center;
}
.charged-devstrip .dev-toggle[b-obinzyisr5] {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .board.charged-pause[b-obinzyisr5]::after { animation: charged-vignette-in-b-obinzyisr5 .34s ease-out forwards; }
    .board.charged-pause .token-pos.charged-hero[b-obinzyisr5],
    .board.charged-pause .token-pos.charged-enemy[b-obinzyisr5] { animation: none; }
    .charged-tether[b-obinzyisr5] { animation: charged-tether-glow-b-obinzyisr5 1.1s ease-in-out infinite; }
    .token-pos.charged-steadied[b-obinzyisr5] { animation: none; }
}
/* /Components/Book/FrontierSetupMapPanel.razor.rz.scp.css */
/* Fold-out setup map — fills the remaining page-leaf height (the leaf is a flex column; the old
   .tbp-map was flex:1/min-height:0, so we match that), with a compact lore caption pinned beneath. */
.vsmp[b-l6q07vj8qu] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}

/* The map reads as a parchment leaf tipped onto a dark book board: thin rule + inset shadow,
   dark matte so the 16:9 map letterboxes into "mounted" bars rather than stretching. */
.vsmp-frame[b-l6q07vj8qu] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid rgba(20, 17, 11, 0.55);
    border-radius: 2px;
    overflow: hidden;
    background: #2a2017;
    box-shadow:
        inset 0 0 0 2px rgba(139, 26, 26, 0.16),
        inset 0 0 30px rgba(20, 10, 0, 0.5),
        0 2px 7px rgba(20, 10, 0, 0.28);
}

.vsmp-img[b-l6q07vj8qu] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Faint diagonal paper-shine so it reads as a real inserted leaf, not a flat web image. */
.vsmp-shine[b-l6q07vj8qu] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg,
        rgba(255, 246, 214, 0.10) 0%, transparent 30%,
        transparent 70%, rgba(60, 40, 16, 0.16) 100%);
    mix-blend-mode: soft-light;
}

.vsmp-lore[b-l6q07vj8qu] {
    flex-shrink: 0;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.54rem;
    line-height: 1.42;
    color: #4a3a22;
    font-style: italic;
}
.vsmp-lore em[b-l6q07vj8qu] {
    font-style: normal;
    font-weight: 600;
    color: #8b1a1a;
}
/* /Components/Book/TitleBookOverlay.razor.rz.scp.css */
/* Book pages on the tilted PHB — same gameroom, candle-lit parchment */

.title-book-stage[b-nkktgjgxfn] {
    --book-tilt: 2deg;
    position: absolute;
    z-index: 11;
    left: 9%;
    top: 13%;
    width: 82%;
    height: 72%;
    transform: rotate(var(--book-tilt));
    transform-origin: 50% 50%;
    perspective: 1600px;
    pointer-events: none;
    /* Readability pass: lift the dimmed parchment (was 0.78) and add a touch more
       contrast so the dark serif text reads cleanly without washing out the mood. */
    filter: brightness(0.9) saturate(1.04) contrast(1.1);
}

/* ── Leather tome cover (the binding the pages sit inside) ── */
.title-book-cover[b-nkktgjgxfn] {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* asymmetric padding leaves a leather margin around the pages + a deeper spine valley */
    padding: 2.1% 2.4% 2.6%;
    border-radius: 10px / 8px;
    background:
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(0,0,0,0.16) 0%, transparent 70%),
        repeating-linear-gradient(96deg, rgba(0,0,0,0.05) 0 3px, rgba(255,255,255,0.015) 3px 6px),
        linear-gradient(150deg, #4a3322 0%, #5c3f29 30%, #43301f 62%, #38271a 100%);
    border: 1px solid #1a120a;
    box-shadow:
        0 18px 46px rgba(0,0,0,0.55),
        0 4px 12px rgba(0,0,0,0.4),
        inset 0 0 0 1px rgba(255, 220, 160, 0.06),
        inset 0 1px 0 rgba(255, 230, 180, 0.12);
}
/* Tooled gold rule inset into the leather + metal corner bosses */
.title-book-cover[b-nkktgjgxfn]::before {
    content: "";
    position: absolute;
    inset: 1.1%;
    border-radius: 7px / 6px;
    border: 1.5px solid rgba(214, 176, 102, 0.5);
    box-shadow: inset 0 0 0 1px rgba(20, 14, 8, 0.5);
    pointer-events: none;
    z-index: 2;
}
.title-book-cover[b-nkktgjgxfn]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    /* four corner bosses (gold) */
    background:
        radial-gradient(circle at 2.4% 3%, rgba(236,200,115,0.85) 0 6px, transparent 7px),
        radial-gradient(circle at 97.6% 3%, rgba(236,200,115,0.85) 0 6px, transparent 7px),
        radial-gradient(circle at 2.4% 97%, rgba(236,200,115,0.85) 0 6px, transparent 7px),
        radial-gradient(circle at 97.6% 97%, rgba(236,200,115,0.85) 0 6px, transparent 7px);
}

/* Raised spine valley down the centre, with two gold bands */
.title-book-spine[b-nkktgjgxfn] {
    position: absolute;
    top: 2.1%;
    bottom: 2.6%;
    left: 50%;
    width: 3.6%;
    transform: translateX(-50%);
    z-index: 6;
    pointer-events: none;
    border-radius: 2px;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.18) 18%, rgba(255,220,170,0.10) 50%, rgba(0,0,0,0.18) 82%, rgba(0,0,0,0.5) 100%),
        linear-gradient(180deg, #4a3322, #38271a);
    box-shadow: 0 0 6px rgba(0,0,0,0.5);
}
.title-book-spine[b-nkktgjgxfn]::before,
.title-book-spine[b-nkktgjgxfn]::after {
    content: "";
    position: absolute;
    left: -10%;
    width: 120%;
    height: 5px;
    background: linear-gradient(180deg, #ecc873, #a8842e);
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    border-radius: 1px;
}
.title-book-spine[b-nkktgjgxfn]::before { top: 14%; }
.title-book-spine[b-nkktgjgxfn]::after { bottom: 14%; }

/* Candle spill painted onto the open spread — matches room light sources.
   Two animation layers with a 2.1s phase offset so the candles breathe independently. */
.title-book-lit-wash[b-nkktgjgxfn] {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    border-radius: 8px;
    /* Left candle + floor wash */
    background:
        radial-gradient(ellipse 40% 36% at 16% 29%, rgba(255, 210, 140, 0.26) 0%, transparent 56%),
        radial-gradient(ellipse 46% 40% at 67% 62%, rgba(255, 195, 115, 0.28) 0%, transparent 58%);
    mix-blend-mode: soft-light;
    animation: book-candle-flicker-b-nkktgjgxfn 4.2s ease-in-out infinite;
}
/* Right candle on its own layer — desynchronised via animation-delay */
.title-book-lit-wash[b-nkktgjgxfn]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    pointer-events: none;
    background: radial-gradient(ellipse 38% 34% at 84% 31%, rgba(255, 200, 125, 0.22) 0%, transparent 54%);
    animation: book-candle-flicker-b-b-nkktgjgxfn 4.2s ease-in-out infinite;
    animation-delay: 2.1s;
    opacity: 0.78;
}
@keyframes book-candle-flicker-b-nkktgjgxfn {
    0%, 100% { opacity: 0.82; }
    22% { opacity: 0.94; }
    44% { opacity: 0.86; }
    58% { opacity: 0.96; }
    76% { opacity: 0.84; }
}
@keyframes book-candle-flicker-b-b-nkktgjgxfn {
    0%, 100% { opacity: 0.78; }
    22% { opacity: 0.95; }
    44% { opacity: 0.82; }
    58% { opacity: 0.92; }
    76% { opacity: 0.80; }
}

.title-book-pages[b-nkktgjgxfn] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 2.2% 1fr;
    height: 100%;
    pointer-events: auto;
    box-shadow: inset 0 0 18px rgba(20, 10, 0, 0.22);
    border-radius: 3px;
    overflow: hidden;
    contain: layout paint;
    perspective: 1800px;
    perspective-origin: 50% 54%;
}

/* Pages fade in behind the swinging cover so there is no backface-hidden flash */
@keyframes pages-reveal-b-nkktgjgxfn {
    0%   { opacity: 0; }
    25%  { opacity: 0; }
    65%  { opacity: 1; }
    100% { opacity: 1; }
}
.title-book-pages--revealing[b-nkktgjgxfn] {
    animation: pages-reveal-b-nkktgjgxfn 1.0s ease-out both;
}

/* ── Real single-page fold ──
   The stationary pages already show the destination spread; a folding leaf
   carries the outgoing page on its front face and rotates about the spine. */
.title-page-leaf[b-nkktgjgxfn] {
    position: absolute;
    top: 0;
    height: 100%;
    width: 49.4%;
    overflow: visible;
    transform-style: preserve-3d;
    z-index: 25;
    pointer-events: none;
    will-change: transform;
    contain: paint;
    filter: drop-shadow(0 10px 14px rgba(20, 10, 0, 0.24));
}
.title-page-leaf.leaf-forward[b-nkktgjgxfn] {
    right: 0;
    transform-origin: left 88%;
    animation: leaf-fold-forward-b-nkktgjgxfn 0.76s cubic-bezier(0.2, 0.74, 0.18, 1) forwards;
}
.title-page-leaf.leaf-back[b-nkktgjgxfn] {
    left: 0;
    transform-origin: right 88%;
    animation: leaf-fold-back-b-nkktgjgxfn 0.76s cubic-bezier(0.2, 0.74, 0.18, 1) forwards;
}
@keyframes leaf-fold-forward-b-nkktgjgxfn {
    0%   { transform: translateZ(2px) rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
    14%  { transform: translateZ(12px) rotateY(-18deg) rotateX(0.7deg) rotateZ(-0.25deg); }
    58%  { transform: translateZ(26px) rotateY(-104deg) rotateX(1.2deg) rotateZ(-0.45deg); }
    86%  { transform: translateZ(12px) rotateY(-165deg) rotateX(0.25deg) rotateZ(-0.12deg); }
    100% { transform: translateZ(2px) rotateY(-179deg) rotateX(0deg) rotateZ(0deg); }
}
@keyframes leaf-fold-back-b-nkktgjgxfn {
    0%   { transform: translateZ(2px) rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
    14%  { transform: translateZ(12px) rotateY(18deg) rotateX(0.7deg) rotateZ(0.25deg); }
    58%  { transform: translateZ(26px) rotateY(104deg) rotateX(1.2deg) rotateZ(0.45deg); }
    86%  { transform: translateZ(12px) rotateY(165deg) rotateX(0.25deg) rotateZ(0.12deg); }
    100% { transform: translateZ(2px) rotateY(179deg) rotateX(0deg) rotateZ(0deg); }
}
.leaf-face[b-nkktgjgxfn] {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    transform: translateZ(0);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    outline: 1px solid rgba(255, 245, 210, 0.16);
}
.leaf-backface[b-nkktgjgxfn] { transform: rotateY(180deg) translateZ(0.5px); }
/* Moving sheen/shadow that sweeps as the leaf lifts and lands. */
.leaf-shade[b-nkktgjgxfn] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, rgba(20, 10, 0, 0) 38%, rgba(20, 10, 0, 0.28) 62%, rgba(0, 0, 0, 0.12) 100%);
    animation: leaf-shade-b-nkktgjgxfn 0.76s ease-in-out forwards;
}
@keyframes leaf-shade-b-nkktgjgxfn {
    0% { opacity: 0; }
    28% { opacity: 0.78; }
    62% { opacity: 0.48; }
    100% { opacity: 0; }
}

.title-book-page[b-nkktgjgxfn] {
    position: relative;
    border: 2px solid #14110b;
    box-shadow: inset 0 0 0 1px #8b1e28;
    padding: 3.2% 4%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: #14110b;
    font-family: Georgia, "Times New Roman", serif;
    backface-visibility: hidden;
}
/* Leaf faces reuse the page chrome but flatten the radial lighting per side. */
.leaf-front[b-nkktgjgxfn] {
    border-radius: 0 3px 3px 0;
    background:
        radial-gradient(ellipse 75% 58% at 82% 36%, rgba(255, 205, 125, 0.34) 0%, transparent 52%),
        linear-gradient(202deg, #a89060 0%, #c0ae84 40%, #b4a074 100%);
}
.title-page-leaf.leaf-back .leaf-front[b-nkktgjgxfn] {
    border-radius: 3px 0 0 3px;
    background:
        radial-gradient(ellipse 80% 62% at 18% 34%, rgba(255, 200, 120, 0.3) 0%, transparent 54%),
        linear-gradient(158deg, #a89868 0%, #c4b088 38%, #b8a878 100%);
}
.leaf-backface[b-nkktgjgxfn] {
    border-radius: 3px 0 0 3px;
    background:
        radial-gradient(ellipse 80% 62% at 18% 34%, rgba(255, 200, 120, 0.3) 0%, transparent 54%),
        linear-gradient(158deg, #a89868 0%, #c4b088 38%, #b8a878 100%);
}
.title-page-leaf.leaf-back .leaf-backface[b-nkktgjgxfn] {
    border-radius: 0 3px 3px 0;
    background:
        radial-gradient(ellipse 75% 58% at 82% 36%, rgba(255, 205, 125, 0.34) 0%, transparent 52%),
        linear-gradient(202deg, #a89060 0%, #c0ae84 40%, #b4a074 100%);
}
.title-book-page-left[b-nkktgjgxfn] {
    border-radius: 3px 0 0 3px;
    background:
        radial-gradient(ellipse 80% 62% at 18% 34%, rgba(255, 200, 120, 0.3) 0%, transparent 54%),
        radial-gradient(ellipse 50% 42% at 82% 66%, rgba(180, 140, 90, 0.12) 0%, transparent 50%),
        linear-gradient(158deg, #a89868 0%, #c4b088 38%, #b8a878 100%);
    box-shadow: inset -10px 0 22px rgba(20, 10, 0, 0.12), inset 0 0 0 1px #8b1e28;
}
.title-book-page-right[b-nkktgjgxfn] {
    border-radius: 0 3px 3px 0;
    background:
        radial-gradient(ellipse 75% 58% at 82% 36%, rgba(255, 205, 125, 0.34) 0%, transparent 52%),
        radial-gradient(ellipse 48% 40% at 20% 34%, rgba(255, 185, 105, 0.16) 0%, transparent 48%),
        radial-gradient(ellipse 55% 45% at 58% 78%, rgba(255, 175, 95, 0.14) 0%, transparent 50%),
        linear-gradient(202deg, #a89060 0%, #c0ae84 40%, #b4a074 100%);
    box-shadow: inset 10px 0 22px rgba(20, 10, 0, 0.1), inset 0 0 0 1px #8b1e28;
}

.title-book-gutter[b-nkktgjgxfn] {
    background: linear-gradient(180deg, #6b2020, #1a140c 45%, #6b2020);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

/* Corner page-turn affordances: visible enough to discover, quiet enough to feel diegetic. */
.tbp-corner-turn[b-nkktgjgxfn] {
    --corner-size: clamp(54px, 7vw, 92px);
    position: absolute;
    bottom: 0;
    z-index: 33;
    width: var(--corner-size);
    height: var(--corner-size);
    padding: 0;
    border: 0;
    background: transparent;
    color: #6f201a;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.82;
    filter: drop-shadow(0 2px 2px rgba(20, 10, 0, 0.24));
    perspective: 420px;
}
.tbp-corner-turn--forward[b-nkktgjgxfn] { right: 0; }
.tbp-corner-turn--back[b-nkktgjgxfn] { left: 0; }
.tbp-corner-turn[b-nkktgjgxfn]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 74%, rgba(255, 244, 208, 0.62) 0%, rgba(255, 244, 208, 0.22) 34%, transparent 62%),
        linear-gradient(135deg, rgba(255,255,255,0.54), rgba(224, 198, 137,0.28) 44%, rgba(45,25,10,0.20) 100%),
        linear-gradient(135deg, transparent 0 50%, rgba(139, 26, 26, 0.30) 51%, rgba(139, 26, 26, 0.30) 53%, transparent 54%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    transform-origin: 100% 100%;
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.22, 1), opacity 0.18s ease, box-shadow 0.18s ease;
    opacity: 0.72;
    box-shadow: inset -10px -10px 14px rgba(20, 10, 0, 0.14);
}
.tbp-corner-turn--back[b-nkktgjgxfn]::before {
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    transform-origin: 0 100%;
    background:
        radial-gradient(circle at 30% 74%, rgba(255, 244, 208, 0.62) 0%, rgba(255, 244, 208, 0.22) 34%, transparent 62%),
        linear-gradient(225deg, rgba(255,255,255,0.54), rgba(224, 198, 137,0.28) 44%, rgba(45,25,10,0.20) 100%),
        linear-gradient(225deg, transparent 0 50%, rgba(139, 26, 26, 0.30) 51%, rgba(139, 26, 26, 0.30) 53%, transparent 54%);
    box-shadow: inset 10px -10px 14px rgba(20, 10, 0, 0.14);
}
.tbp-corner-turn[b-nkktgjgxfn]::after {
    content: "";
    position: absolute;
    bottom: 8%;
    width: 38%;
    height: 38%;
    border-bottom: 1px solid rgba(139, 26, 26, 0.34);
    opacity: 0.72;
    pointer-events: none;
}
.tbp-corner-turn--forward[b-nkktgjgxfn]::after {
    right: 9%;
    border-right: 1px solid rgba(139, 26, 26, 0.34);
    border-radius: 0 0 4px 0;
}
.tbp-corner-turn--back[b-nkktgjgxfn]::after {
    left: 9%;
    border-left: 1px solid rgba(139, 26, 26, 0.34);
    border-radius: 0 0 0 4px;
}
.tbp-corner-turn:hover[b-nkktgjgxfn],
.tbp-corner-turn:focus-visible[b-nkktgjgxfn] {
    opacity: 1;
    outline: none;
}
.tbp-corner-turn:hover[b-nkktgjgxfn]::before,
.tbp-corner-turn:focus-visible[b-nkktgjgxfn]::before {
    opacity: 0.98;
    transform: translate(-8px, -7px) rotateX(9deg) rotateY(-20deg) rotateZ(-5deg) skew(-3deg, -2deg);
    box-shadow: 10px 12px 18px rgba(20, 10, 0, 0.26), inset -9px -10px 12px rgba(20, 10, 0, 0.12);
}
.tbp-corner-turn--back:hover[b-nkktgjgxfn]::before,
.tbp-corner-turn--back:focus-visible[b-nkktgjgxfn]::before {
    transform: translate(8px, -7px) rotateX(9deg) rotateY(20deg) rotateZ(5deg) skew(3deg, 2deg);
    box-shadow: -10px 12px 18px rgba(20, 10, 0, 0.26), inset 9px -10px 12px rgba(20, 10, 0, 0.12);
}
.tbp-corner-turn-symbol[b-nkktgjgxfn] {
    position: absolute;
    bottom: 13%;
    font-family: "Jost", sans-serif;
    font-size: clamp(0.72rem, 1.15vw, 1.02rem);
    font-weight: 700;
    line-height: 1;
    opacity: 0.5;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.45);
}
.tbp-corner-turn--forward .tbp-corner-turn-symbol[b-nkktgjgxfn] { right: 16%; }
.tbp-corner-turn--back .tbp-corner-turn-symbol[b-nkktgjgxfn] { left: 16%; }
.tbp-corner-turn--commit .tbp-corner-turn-symbol[b-nkktgjgxfn] {
    color: #496424;
    opacity: 0.58;
    font-size: clamp(0.68rem, 1.05vw, 0.96rem);
}

/* In-page back tab — top corner of the left page, illuminated-manuscript feel */
.tbp-corner-back[b-nkktgjgxfn] {
    position: absolute;
    top: 3%;
    left: 4%;
    z-index: 12;
    pointer-events: auto;
    background: transparent;
    border: none;
    color: #8b1a1a;
    font-family: "Jost", sans-serif;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 0;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.tbp-corner-back:hover[b-nkktgjgxfn] { opacity: 1; text-decoration: underline; }

/* In-page footer for the proceed buttons — sits on the parchment, bottom of right page */
.tbp-pagefoot[b-nkktgjgxfn] {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(139, 26, 26, 0.4);
}

/* ── Page-turn / launch buttons — leather tab affordance ── */
.tbp-pagebtn[b-nkktgjgxfn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Jost", sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 5px 12px;
    border: 1px solid #14110b;
    border-radius: 2px;
    background: #dcc99e;
    color: #14110b;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.08s ease, box-shadow 0.08s ease;
    position: relative;
}
.tbp-pagebtn:hover[b-nkktgjgxfn] { filter: brightness(1.08); }
.tbp-pagebtn:active[b-nkktgjgxfn] { transform: translateY(1px); box-shadow: none !important; }
.tbp-pagebtn.primary[b-nkktgjgxfn] {
    background: linear-gradient(180deg, #ecc873, #caa24e);
    font-weight: 700;
    box-shadow: 0 2px 0 #8a6020, 0 1px 0 rgba(255, 240, 200, 0.5) inset, 0 3px 6px rgba(0, 0, 0, 0.3);
}
.tbp-pagebtn.primary:hover[b-nkktgjgxfn] {
    box-shadow: 0 2px 0 #8a6020, 0 1px 0 rgba(255, 240, 200, 0.5) inset, 0 4px 10px rgba(0, 0, 0, 0.35);
    filter: brightness(1.06);
}
.tbp-pagebtn.ghost[b-nkktgjgxfn] {
    background: rgba(220, 201, 158, 0.4);
    border-color: rgba(20, 17, 11, 0.45);
    color: #5c3828;
    padding: 5px 10px;
    box-shadow: none;
}
.tbp-pagebtn.ghost:hover[b-nkktgjgxfn] { background: rgba(220, 201, 158, 0.6); }
.tbp-pagebtn--leather.primary[b-nkktgjgxfn] {
    /* Slight tab-press illusion: deep border-bottom acts as raised edge */
    border-bottom: 2px solid #6a4010;
    padding-bottom: 4px;
}
.tbp-pagebtn--leather.primary:active[b-nkktgjgxfn] {
    border-bottom-width: 1px;
    padding-bottom: 5px;
    transform: translateY(1px);
}
.tbp-pagebtn--launch[b-nkktgjgxfn] {
    letter-spacing: 0.12em;
}
.tbp-pagebtn-ico[b-nkktgjgxfn] { flex-shrink: 0; }
.tbp-pagebtn-arrow[b-nkktgjgxfn] { font-weight: 700; }

/* ── Contents cover / title page (left) — sourcebook flavour ── */
.tbp-cover-band[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: #8b1e28;
    color: #f2e6c8;
    text-align: center;
    padding: 4px 0;
    margin: 0 0 4px;
    border: 1.5px solid #14110b;
    box-shadow: inset 0 0 0 1px rgba(236, 200, 115, 0.3);
}
.tbp-cover-kicker[b-nkktgjgxfn] {
    text-align: center;
    font-family: "Jost", sans-serif;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #7a5a38;
    margin-bottom: 6px;
}
.tbp-cover-rule[b-nkktgjgxfn] {
    display: flex;
    align-items: center;
    text-align: center;
    color: #8b1a1a;
    font-size: 0.7rem;
    margin: 4px 8%;
}
.tbp-cover-rule[b-nkktgjgxfn]::before,
.tbp-cover-rule[b-nkktgjgxfn]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(92, 56, 40, 0.6), transparent);
}
.tbp-cover-rule span[b-nkktgjgxfn] { padding: 0 8px; }
.tbp-cover-rule-fine[b-nkktgjgxfn] { font-size: 0.55rem; color: #a07a40; margin-top: 6px; }

.tbp-cover-title[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-size: clamp(1.15rem, 2.4vw, 1.7rem);
    font-weight: 700;
    text-align: center;
    line-height: 1.02;
    letter-spacing: 0.02em;
    color: #1a140c;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.4);
}
.tbp-cover-tag[b-nkktgjgxfn] {
    text-align: center;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 0.6rem;
    color: #5c3828;
    margin: 5px 4% 6px;
    line-height: 1.3;
}
.tbp-cover-crest[b-nkktgjgxfn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px auto 4px;
}
.tbp-cover-laurel[b-nkktgjgxfn] { color: #8b1a1a; font-size: 1.1rem; opacity: 0.7; }
.tbp-cover-crest-disc[b-nkktgjgxfn] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #a82838, #6b1820);
    border: 2.5px solid #14110b;
    box-shadow: 0 0 0 2px rgba(236, 200, 115, 0.45), inset 0 1px 3px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tbp-cover-crest-inner[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-weight: 700;
    color: #ecc873;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
}
.tbp-cover-epigraph[b-nkktgjgxfn] {
    text-align: center;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 0.56rem;
    color: #6a4f34;
    margin: 4px 6% 0;
    line-height: 1.35;
}
.tbp-cover-badge[b-nkktgjgxfn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 8px auto 0;
    padding: 4px 10px;
    width: fit-content;
    border: 1px solid rgba(92, 56, 40, 0.5);
    border-radius: 3px;
    background: rgba(220, 201, 158, 0.4);
}
.tbp-cover-badge-d20[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-weight: 800;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: #8b1a1a;
    border: 1.5px solid #8b1a1a;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tbp-cover-badge-txt[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.48rem;
    letter-spacing: 0.06em;
    color: #5c4830;
    line-height: 1.25;
    text-align: left;
}
.tbp-cover-imprint[b-nkktgjgxfn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: auto;
    padding-top: 6px;
}
.tbp-cover-press[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #5c3828;
}
.tbp-cover-ed[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a5a38;
}
.tbp-cover-colophon[b-nkktgjgxfn] {
    text-align: center;
    font-family: "Jost", sans-serif;
    font-size: 0.42rem;
    letter-spacing: 0.04em;
    color: #8a7350;
    margin-top: 4px;
    line-height: 1.3;
}

/* ── Contents menu (right page) ── */
.tbp-contents-band[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: #8b1a1a;
    color: #f2e6c8;
    text-align: center;
    padding: 5px 0;
    margin: 0 0 10px;
    border: 1.5px solid #14110b;
}

/* Spread-page header band (used on non-title spreads) */
.tbp-spread-band[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: #8b1a1a;
    color: #f2e6c8;
    text-align: center;
    padding: 4px 0;
    margin: 0 0 6px;
    border: 1.5px solid #14110b;
    box-shadow: inset 0 0 0 1px rgba(236, 200, 115, 0.25);
    flex-shrink: 0;
}

.tbp-menu-row[b-nkktgjgxfn] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px dotted rgba(20, 17, 11, 0.28);
    padding: 5px 2px;
    font-family: "Jost", sans-serif;
    font-size: 0.66rem;
    font-weight: 500;
    color: #241b13;
    cursor: pointer;
    line-height: 1.25;
    transition: background 0.1s ease, color 0.1s ease;
}
.tbp-menu-row:hover[b-nkktgjgxfn] { background: rgba(255, 207, 122, 0.18); color: #1a1008; }
.tbp-menu-row.primary[b-nkktgjgxfn] { font-weight: 600; color: #1a1008; }
.tbp-menu-row.primary:hover[b-nkktgjgxfn] { color: #8b1a1a; }
.tbp-menu-row--resume[b-nkktgjgxfn] { color: #3a6820; font-weight: 600; }
.tbp-menu-row--resume:hover[b-nkktgjgxfn] { color: #2a5010; }
.tbp-menu-row--watch[b-nkktgjgxfn] { font-style: italic; font-weight: 400; margin-top: 2px; color: #574426; }

/* Ghost entries — real-feeling TOC entries not yet playable */
.tbp-menu-ghost[b-nkktgjgxfn] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    padding: 5px 2px;
    font-family: "Jost", sans-serif;
    font-size: 0.66rem;
    font-weight: 400;
    color: #7a6540;
    font-style: italic;
    border-bottom: 1px dotted rgba(20, 17, 11, 0.15);
    opacity: 0.78;
    cursor: default;
}

.tbp-toc-rule[b-nkktgjgxfn] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(92, 56, 40, 0.4), transparent);
    margin: 4px 0;
    flex-shrink: 0;
}
.tbp-toc-spacer[b-nkktgjgxfn] { flex: 1; }

.tbp-pg[b-nkktgjgxfn] {
    font-size: 0.56rem;
    color: #5e4c2c;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-left: 4px;
}
.tbp-pg--resume[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.5rem;
    color: #3a6820;
    font-weight: 600;
    background: rgba(111, 174, 90, 0.18);
    padding: 1px 4px;
    border-radius: 2px;
}

/* ── Common page text styles ── */
.tbp-head[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8b1a1a;
    margin: 0 0 4px;
    padding-bottom: 3px;
    border-bottom: 1.5px solid #14110b;
    flex-shrink: 0;
}
.tbp-head--rules[b-nkktgjgxfn] { margin-top: 6px; }
.tbp-sub[b-nkktgjgxfn] { font-size: 0.56rem; color: #5c4830; font-style: italic; margin: 0 0 5px; flex-shrink: 0; line-height: 1.3; }
.tbp-dim[b-nkktgjgxfn] { color: #5e4c2c; font-size: 0.56rem; }
.tbp-line[b-nkktgjgxfn] { font-size: 0.6rem; line-height: 1.35; margin-bottom: 3px; }

/* ── GM / Persona picker — 2×2 card grid ── */
.tbp-gm-grid[b-nkktgjgxfn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.tbp-gm-card[b-nkktgjgxfn] {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 7px;
    min-height: 62px;
    padding: 5px 7px;
    border: 1.5px solid rgba(20, 17, 11, 0.65);
    background: rgba(220, 201, 158, 0.7);
    cursor: pointer;
    font-family: inherit;
    color: #14110b;
    text-align: left;
    border-radius: 1px;
    transition: background 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.tbp-gm-card:hover[b-nkktgjgxfn] {
    background: rgba(232, 216, 176, 0.85);
    border-color: #14110b;
}
.tbp-gm-card:active[b-nkktgjgxfn] { transform: translateY(1px); }
.tbp-gm-card.on[b-nkktgjgxfn] {
    background: linear-gradient(160deg, #ffe8a0 0%, #f0d878 100%);
    border: 1.5px solid #8b1a1a;
    box-shadow: 0 0 0 1px rgba(139, 26, 26, 0.3), 0 2px 6px rgba(200, 160, 40, 0.25);
}
.tbp-gm-portrait[b-nkktgjgxfn] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 40% 30%, #f3df9c, #8a6020);
    box-shadow:
        0 0 0 2px #14110b,
        0 0 0 3px rgba(236, 200, 115, 0.48),
        inset 0 1px 3px rgba(255,255,255,0.4);
}
.tbp-gm-copy[b-nkktgjgxfn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}
.tbp-gm-name[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.1;
}
.tbp-gm-card.on .tbp-gm-name[b-nkktgjgxfn] { color: #5c1a10; }
.tbp-gm-blurb[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-size: 0.51rem;
    font-style: italic;
    color: #4e3526;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tbp-gm-card.on .tbp-gm-blurb[b-nkktgjgxfn] { color: #4a2818; }

/* ── House rule grouping ── */
.tbp-rule-group-label[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.44rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8b1a1a;
    margin: 4px 0 2px;
    opacity: 0.8;
}
.tbp-rule-group-label:first-child[b-nkktgjgxfn] { margin-top: 0; }

.tbp-scroll[b-nkktgjgxfn] { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 3px; }
.tbp-scroll[b-nkktgjgxfn]::-webkit-scrollbar { width: 4px; }
.tbp-scroll[b-nkktgjgxfn]::-webkit-scrollbar-thumb { background: rgba(20,17,11,0.25); border-radius: 2px; }
.tbp-scroll-tight[b-nkktgjgxfn] { margin-top: 4px; }

.tbp-rule[b-nkktgjgxfn] {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.54rem; line-height: 1.2; margin-bottom: 3px; cursor: pointer;
}
.tbp-rule.locked[b-nkktgjgxfn] { opacity: 0.38; }
.tbp-rule input[b-nkktgjgxfn] { accent-color: #8b1a1a; width: 11px; height: 11px; flex-shrink: 0; }

/* ── Sponsor emblem wax-stamp — fires once when .on is applied ── */
@keyframes emblem-wax-stamp-b-nkktgjgxfn {
    0%   { transform: scale(1);    opacity: 1;   filter: brightness(1); }
    18%  { transform: scale(1.38); opacity: 0.65; filter: brightness(1.55) drop-shadow(0 0 4px var(--s-accent, #ecc873)); }
    45%  { transform: scale(0.88); opacity: 1;   filter: brightness(1.15); }
    68%  { transform: scale(1.10); }
    100% { transform: scale(1);    opacity: 1;   filter: brightness(1); }
}
.tbp-sponsor.on .tbp-emblem[b-nkktgjgxfn] {
    animation: emblem-wax-stamp-b-nkktgjgxfn 0.42s cubic-bezier(0.3, 0.9, 0.3, 1.2) both;
}

/* ── Sponsor grid ──
   Size to content (don't flex-grow) so the bottom row's border is never clipped
   by a scroll edge, and so the locked grid below doesn't open a dead gap. */
.tbp-sponsor-grid[b-nkktgjgxfn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    align-content: start;
    flex: 0 0 auto;
}
.tbp-sponsor-grid--locked[b-nkktgjgxfn] { margin-bottom: 2px; }
.tbp-sponsor[b-nkktgjgxfn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 3px 4px;
    border: 1.5px solid #14110b;
    background: rgba(220, 201, 158, 0.7);
    cursor: pointer;
    font-family: inherit;
    color: #14110b;
    border-radius: 1px;
    transition: background 0.12s ease, box-shadow 0.14s ease;
}
.tbp-sponsor:hover[b-nkktgjgxfn] { background: rgba(232, 216, 176, 0.85); }
.tbp-sponsor:active[b-nkktgjgxfn] { transform: translateY(1px); }
.tbp-sponsor.on[b-nkktgjgxfn] {
    background: linear-gradient(160deg, rgba(255, 232, 160, 0.95), rgba(240, 216, 120, 0.9));
    border: 1.5px solid var(--s-accent, #8b1a1a);
    box-shadow:
        0 0 0 1px var(--s-accent, #8b1a1a),
        0 0 8px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255, 255, 200, 0.4);
}
.tbp-emblem[b-nkktgjgxfn] { width: 26px; height: 26px; display: block; flex-shrink: 0; }
.tbp-sponsor-name[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.54rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
}
.tbp-sponsor-theme[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-size: 0.47rem;
    font-style: italic;
    color: #4e3526;
    text-align: center;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tbp-sponsor.on .tbp-sponsor-theme[b-nkktgjgxfn] { color: #4a2818; }
.tbp-sponsor-footer[b-nkktgjgxfn] {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: center;
}
.tbp-sponsor-gold[b-nkktgjgxfn] { font-size: 0.48rem; color: #5c3828; font-weight: 600; }
.tbp-sponsor-boon[b-nkktgjgxfn] {
    font-size: 0.45rem;
    color: #634524;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 52px;
}
.tbp-sponsor-detail[b-nkktgjgxfn] {
    flex-shrink: 0;
    margin-top: auto;
    padding: 4px 6px;
    background: rgba(220, 201, 158, 0.45);
    border: 1px solid rgba(139, 26, 26, 0.32);
    border-left: 2px solid rgba(139, 26, 26, 0.6);
    border-radius: 1px;
}
.tbp-sponsor-detail-theme[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-size: 0.48rem;
    font-style: italic;
    color: #4a3020;
    line-height: 1.3;
    display: block;
}

/* ── World map ── */
.tbp-map[b-nkktgjgxfn] {
    width: 100%;
    flex: 1;
    min-height: 0;
    margin-top: 4px;
    border: 1px solid rgba(20,17,11,0.48);
    background:
        radial-gradient(ellipse at 50% 40%, rgba(255, 239, 186, 0.34), transparent 62%),
        #c7ad7d;
    box-shadow:
        inset 0 0 0 2px rgba(139, 26, 26, 0.18),
        inset 0 0 28px rgba(45, 25, 10, 0.22),
        0 2px 6px rgba(20, 10, 0, 0.12);
}

/* ── Commander portrait row — layout only; the portrait itself is .tbp-cmdr-portrait (P2 override below) ── */
.tbp-portrait-row[b-nkktgjgxfn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.tbp-commander-sheet[b-nkktgjgxfn] {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    gap: 6px;
    margin: 2px 0 6px;
    padding: 8px 8px 7px;
    flex-shrink: 0;
    border: 1px solid rgba(92, 56, 40, 0.42);
    background:
        radial-gradient(ellipse at 50% 12%, rgba(255, 238, 178, 0.34), transparent 55%),
        rgba(220, 201, 158, 0.25);
}
.tbp-commander-sheet .tbp-portrait-row[b-nkktgjgxfn] {
    grid-row: 1;
    margin: 0;
    gap: 12px;
}
.tbp-commander-sheet .tbp-input[b-nkktgjgxfn] {
    grid-row: 2;
    margin: 0;
    max-width: 88%;
    text-align: center;
}
.tbp-cycle-btn[b-nkktgjgxfn] {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.tbp-input[b-nkktgjgxfn] {
    width: 100%;
    font-family: Georgia, serif;
    font-size: 0.6rem;
    padding: 4px 6px;
    border: 1px solid #14110b;
    background: rgba(255, 250, 240, 0.7);
    color: #14110b;
    margin-bottom: 6px;
    flex-shrink: 0;
    border-radius: 1px;
    transition: box-shadow 0.12s ease;
}
.tbp-input:focus[b-nkktgjgxfn] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(139, 26, 26, 0.3);
}

/* ── Commander origin picker ── */
.tbp-origin[b-nkktgjgxfn] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    text-align: left;
    padding: 4px 5px;
    margin-bottom: 3px;
    border: 1px solid #14110b;
    background: rgba(220, 201, 158, 0.7);
    color: #14110b;
    cursor: pointer;
    font-family: inherit;
    border-radius: 1px;
    transition: background 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}
.tbp-origin:hover[b-nkktgjgxfn] { background: rgba(232, 216, 176, 0.85); }
.tbp-origin.on[b-nkktgjgxfn] {
    background: linear-gradient(160deg, rgba(255, 232, 160, 0.95), rgba(240, 216, 120, 0.9));
    border: 1.5px solid #8b1a1a;
    box-shadow: inset 0 0 0 1px rgba(139, 26, 26, 0.2);
}
.tbp-origin-name[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.54rem;
    font-weight: 700;
    display: block;
}
.tbp-origin-flavor[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-size: 0.51rem;
    font-style: italic;
    color: #3f2414;
    line-height: 1.3;
    display: block;
    margin-top: 1px;
}
.tbp-origin-perk[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.46rem;
    color: #3a6820;
    line-height: 1.2;
    display: block;
}
.tbp-origin-hint[b-nkktgjgxfn] {
    font-size: 0.5rem;
    color: #5e4a2a;
    font-style: italic;
    line-height: 1.2;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Hall of the Fallen ── */
.tbp-hall-frame[b-nkktgjgxfn] {
    flex-shrink: 0;
    margin: 2px 0 4px;
}
.tbp-hall-record[b-nkktgjgxfn] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    border-bottom: 1px dotted rgba(20, 17, 11, 0.2);
    gap: 6px;
}
.tbp-hall-name[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-size: 0.58rem;
    font-weight: 700;
    color: #14110b;
}
.tbp-hall-tier[b-nkktgjgxfn] {
    font-size: 0.5rem;
    font-style: italic;
    color: #5e4c2c;
    white-space: nowrap;
}

/* ── Ledger ── */
.tbp-ledger-stats[b-nkktgjgxfn] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 6px;
}
.tbp-ledger-stat[b-nkktgjgxfn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.tbp-ledger-num[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #14110b;
    line-height: 1;
}
.tbp-ledger-num--gold[b-nkktgjgxfn] { color: #8a5a18; }
.tbp-ledger-hero[b-nkktgjgxfn] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    border-bottom: 1px dotted rgba(20, 17, 11, 0.18);
    gap: 6px;
}
.tbp-ledger-hero-name[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-size: 0.58rem;
    font-weight: 700;
}

/* ── Meta Unlocks ── */
.tbp-meta-legend[b-nkktgjgxfn] {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.tbp-meta-categories[b-nkktgjgxfn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
    margin-bottom: 4px;
}
.tbp-meta-cat[b-nkktgjgxfn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px;
    background: rgba(20, 17, 11, 0.05);
    border-left: 2px solid rgba(139, 26, 26, 0.25);
}
.tbp-meta-cat-label[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.5rem;
    font-weight: 600;
    color: #5c4830;
}
.tbp-meta-cat-lock[b-nkktgjgxfn] { display: flex; align-items: center; }

/* Empty frame (centered state for empty Hall/Meta) */
.tbp-empty-frame[b-nkktgjgxfn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 6px;
    padding: 8px 4px;
    opacity: 0.75;
}
.tbp-meta-empty[b-nkktgjgxfn] {
    gap: 5px;
}
.tbp-meta-grid[b-nkktgjgxfn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.tbp-meta-grid-row[b-nkktgjgxfn] {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.tbp-meta-slot[b-nkktgjgxfn] {
    width: 28px;
    height: 28px;
    border: 1.5px solid rgba(138, 112, 80, 0.4);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 201, 158, 0.3);
}
.tbp-meta-slot--locked[b-nkktgjgxfn] { opacity: 0.6; }

/* ── Table Settings ── */
.tbp-settings-section[b-nkktgjgxfn] {
    margin-bottom: 6px;
    flex-shrink: 0;
}
.tbp-settings-label[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8b1a1a;
    margin-bottom: 3px;
    opacity: 0.95;
}
.tbp-settings-row[b-nkktgjgxfn] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    border-bottom: 1px dotted rgba(20, 17, 11, 0.18);
    font-size: 0.56rem;
    color: #2e2014;
    gap: 8px;
}
.tbp-settings-rule[b-nkktgjgxfn] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.56rem;
    color: #2e2014;
    padding: 3px 0;
    border-bottom: 1px dotted rgba(20, 17, 11, 0.14);
    line-height: 1.3;
}
.tbp-settings-rule.locked[b-nkktgjgxfn] { color: #7a6038; opacity: 0.6; }
.tbp-settings-note[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-size: 0.51rem;
    font-style: italic;
    color: #4e3526;
    line-height: 1.35;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(20, 17, 11, 0.12);
    flex-shrink: 0;
}
.tbp-code[b-nkktgjgxfn] {
    font-family: "Courier New", monospace;
    font-size: 0.46rem;
    background: rgba(20, 17, 11, 0.08);
    padding: 1px 3px;
    border-radius: 2px;
    font-style: normal;
}
.tbp-rule-group-label--sm[b-nkktgjgxfn] {
    font-size: 0.42rem;
    margin-top: 4px;
}

/* shared chip style */
.tbp-chip[b-nkktgjgxfn] {
    font-family: "Jost", sans-serif;
    font-size: 0.56rem;
    padding: 3px 7px;
    border: 1px solid #14110b;
    background: #dcc99e;
    color: #14110b;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.1s ease;
}
.tbp-chip:hover[b-nkktgjgxfn] { background: #e8d8b0; }
.tbp-chip.on[b-nkktgjgxfn] { background: #ecc873; box-shadow: inset 0 0 0 1px #8b1a1a; }

/* ── P1: Closed-cover panel that cracks open on first title entry ── */

/* The front cover sits as a sibling of .title-book-cover inside .title-book-stage,
   which already has perspective: 1600px. transform-origin left center = spine hinge. */
.title-book-front-cover[b-nkktgjgxfn] {
    position: absolute;
    inset: 0;
    z-index: 40;
    border-radius: 10px / 8px;
    /* Same leather gradient as the outer cover */
    background:
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(0,0,0,0.16) 0%, transparent 70%),
        repeating-linear-gradient(96deg, rgba(0,0,0,0.06) 0 3px, rgba(255,255,255,0.018) 3px 6px),
        linear-gradient(150deg, #4a3322 0%, #5c3f29 30%, #43301f 62%, #38271a 100%);
    border: 1px solid #1a120a;
    box-shadow:
        0 18px 46px rgba(0,0,0,0.55),
        0 4px 12px rgba(0,0,0,0.4),
        inset 0 0 0 1px rgba(255, 220, 160, 0.06),
        inset 0 1px 0 rgba(255, 230, 180, 0.12);
    transform-origin: left center;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Gold tooled border rule inset into the leather */
.title-book-front-cover[b-nkktgjgxfn]::before {
    content: "";
    position: absolute;
    inset: 1.1%;
    border-radius: 7px / 6px;
    border: 1.5px solid rgba(214, 176, 102, 0.5);
    box-shadow: inset 0 0 0 1px rgba(20, 14, 8, 0.5);
    pointer-events: none;
    z-index: 1;
}
/* Four gold corner bosses */
.title-book-front-cover[b-nkktgjgxfn]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 2.4% 3%,   rgba(236,200,115,0.85) 0 6px, transparent 7px),
        radial-gradient(circle at 97.6% 3%,  rgba(236,200,115,0.85) 0 6px, transparent 7px),
        radial-gradient(circle at 2.4% 97%,  rgba(236,200,115,0.85) 0 6px, transparent 7px),
        radial-gradient(circle at 97.6% 97%, rgba(236,200,115,0.85) 0 6px, transparent 7px);
}

/* Inner content: title block + AC crest disc */
.title-bcfc-inner[b-nkktgjgxfn] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    pointer-events: none;
}
.title-bcfc-crest[b-nkktgjgxfn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}
/* Larger crest disc for the closed cover (more presence than the page left version) */
.tbp-cover-crest-disc--large[b-nkktgjgxfn] {
    width: 68px;
    height: 68px;
    font-size: 1.2rem;
    box-shadow: 0 0 0 3px rgba(236, 200, 115, 0.45), inset 0 2px 6px rgba(0,0,0,0.45);
}
.title-bcfc-title[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-size: clamp(0.9rem, 1.8vw, 1.5rem);
    font-weight: 700;
    color: #ecc873;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.title-bcfc-tag[b-nkktgjgxfn] {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: clamp(0.42rem, 0.8vw, 0.62rem);
    color: #b9986a;
    letter-spacing: 0.02em;
    max-width: 72%;
    line-height: 1.35;
}

/* ── Opening animation — cover rotates from closed (0°) to wide open (-90° visual hinge) ── */
@keyframes book-cover-open-b-nkktgjgxfn {
    0%   {
        transform: rotateY(0deg) translateZ(0);
        opacity: 1;
        box-shadow:
            0 18px 46px rgba(0,0,0,0.55),
            0 4px 12px rgba(0,0,0,0.4),
            inset 0 0 0 1px rgba(255, 220, 160, 0.06);
    }
    8%   { transform: rotateY(3deg) translateZ(0); opacity: 1; }
    38%  {
        transform: rotateY(-72deg) translateZ(6px);
        box-shadow:
            8px 28px 60px rgba(0,0,0,0.72),
            2px 8px 20px rgba(0,0,0,0.5);
    }
    76%  { transform: rotateY(-112deg) translateZ(2px); opacity: 0.98; }
    100% {
        transform: rotateY(-122deg) translateZ(0);
        opacity: 0;
        box-shadow: 0 4px 8px rgba(0,0,0,0.18);
    }
}

.title-book-front-cover--opening[b-nkktgjgxfn] {
    animation: book-cover-open-b-nkktgjgxfn 1.16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Shadow that sweeps across the pages as the cover lifts ── */
.title-book-open-shadow[b-nkktgjgxfn] {
    position: absolute;
    inset: 0;
    z-index: 38;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        rgba(0,0,0,0.60) 0%,
        rgba(0,0,0,0.45) 20%,
        rgba(0,0,0,0.12) 55%,
        transparent 75%
    );
    opacity: 0;
    border-radius: 10px / 8px;
}
@keyframes book-shadow-sweep-b-nkktgjgxfn {
    0%   { opacity: 0;    transform: scaleX(1)    translateX(0); }
    15%  { opacity: 1;    transform: scaleX(1)    translateX(0); }
    60%  { opacity: 0.55; transform: scaleX(0.9)  translateX(6%); }
    100% { opacity: 0;    transform: scaleX(0.6)  translateX(40%); }
}
.title-book-open-shadow--active[b-nkktgjgxfn] {
    animation: book-shadow-sweep-b-nkktgjgxfn 1.16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── P2: Commander portrait — circular medallion with gold ring ── */
.tbp-cmdr-portrait[b-nkktgjgxfn] {
    width: clamp(88px, 8.8vw, 126px);
    height: clamp(88px, 8.8vw, 126px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 42% 28%, #fff1b8, #8a6020 64%, #27170e 100%);
    box-shadow:
        0 0 0 2px #14110b,
        0 0 0 5px var(--gold-tarnished, #a8842e),
        0 8px 18px rgba(20, 10, 0, 0.28),
        inset 0 1px 5px rgba(255,255,255,0.45);
}

/* Cycle wrapper — remounted via @key on each portrait change, driving mount animation */
@keyframes portrait-cycle-pop-b-nkktgjgxfn {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.tbp-portrait-cycle-wrap[b-nkktgjgxfn] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: portrait-cycle-pop-b-nkktgjgxfn 0.22s ease-out both;
}

@media (max-width: 900px) {
    .title-book-stage[b-nkktgjgxfn] { left: 2%; top: 13%; width: 96%; height: 70%; }
    .title-book-cover[b-nkktgjgxfn] { padding: 2.4% 2.6% 2.8%; }
}

@media (prefers-reduced-motion: reduce) {
    /* Skip cover animation entirely — pages are immediately visible */
    .title-book-front-cover[b-nkktgjgxfn] { display: none !important; }
    .title-book-open-shadow[b-nkktgjgxfn] { display: none !important; }
    .title-page-leaf[b-nkktgjgxfn] { animation: none !important; display: none !important; }
    .leaf-shade[b-nkktgjgxfn] { animation: none !important; }
    .title-book-lit-wash[b-nkktgjgxfn] { animation: none !important; opacity: 0.88 !important; }
    .title-book-lit-wash[b-nkktgjgxfn]::before { animation: none !important; opacity: 0.78 !important; }
    .title-book-pages[b-nkktgjgxfn] { animation: none !important; }
    .tbp-portrait-cycle-wrap[b-nkktgjgxfn] { animation: none !important; }
    .tbp-gm-card[b-nkktgjgxfn], .tbp-sponsor[b-nkktgjgxfn], .tbp-origin[b-nkktgjgxfn], .tbp-pagebtn[b-nkktgjgxfn] { transition: none !important; }
    .tbp-sponsor.on .tbp-emblem[b-nkktgjgxfn] { animation: none !important; }
}

/* ── Appendix C · At the Table — the Table Instincts tree (Build 7) ─────────────────────────────── */
.tbp-ti-balance[b-nkktgjgxfn] {
    display: flex; align-items: baseline; gap: 8px;
    margin-top: 10px; padding: 6px 10px;
    border: 1px solid rgba(120, 92, 40, .5); border-radius: 6px;
    background: rgba(120, 92, 40, .10);
}
.tbp-ti-xp[b-nkktgjgxfn] { font-family: var(--font-display, "Cinzel", serif); font-size: 1.7rem; color: #8a5a12; line-height: 1; }
.tbp-ti-xp-label[b-nkktgjgxfn] { font-size: .8rem; color: #6a5a44; letter-spacing: .02em; }

.tbp-ti-dot[b-nkktgjgxfn] { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.tbp-ti-dot--open[b-nkktgjgxfn] { background: #4a7a3a; box-shadow: 0 0 5px rgba(74, 122, 58, .6); }

.tbp-ti-dev[b-nkktgjgxfn] {
    margin-top: 10px; padding: 3px 10px;
    font-size: .72rem; color: #6a5a44;
    background: none; border: 1px dashed rgba(120, 92, 40, .5); border-radius: 5px;
    cursor: pointer;
}
.tbp-ti-dev:hover[b-nkktgjgxfn] { color: #8a5a12; border-color: rgba(120, 92, 40, .8); }

.tbp-ti-tree[b-nkktgjgxfn] { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 100%; padding-right: 4px; }
.tbp-ti-tier-label[b-nkktgjgxfn] {
    font-family: var(--font-display, "Cinzel", serif);
    font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
    color: #9a7a44; margin-top: 6px;
    border-bottom: 1px solid rgba(120, 92, 40, .3); padding-bottom: 2px;
}
.tbp-ti-tier-label:first-child[b-nkktgjgxfn] { margin-top: 0; }

.tbp-ti-node[b-nkktgjgxfn] {
    border: 1px solid rgba(120, 92, 40, .3); border-radius: 6px;
    padding: 6px 9px; background: rgba(230, 214, 176, .18);
    transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.tbp-ti-node.is-available[b-nkktgjgxfn] { border-color: rgba(74, 122, 58, .6); background: rgba(74, 122, 58, .08); }
.tbp-ti-node.is-unlocked[b-nkktgjgxfn]  { border-color: rgba(120, 92, 40, .55); background: rgba(120, 92, 40, .14); }
.tbp-ti-node.is-locked[b-nkktgjgxfn]    { opacity: .62; }

.tbp-ti-node-head[b-nkktgjgxfn] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tbp-ti-node-title[b-nkktgjgxfn] { font-family: var(--font-display, "Cinzel", serif); font-size: .92rem; color: #3a2c18; }
.tbp-ti-node-effect[b-nkktgjgxfn] { font-size: .78rem; line-height: 1.3; color: #5a4a34; margin-top: 3px; }
.tbp-ti-node-req[b-nkktgjgxfn] { font-size: .72rem; color: #8a5a2a; margin-top: 3px; font-style: italic; }

.tbp-ti-node-badge[b-nkktgjgxfn] {
    font-size: .72rem; color: #6a5a44; white-space: nowrap;
    padding: 1px 7px; border: 1px solid rgba(120, 92, 40, .4); border-radius: 999px;
}
.tbp-ti-node-badge--owned[b-nkktgjgxfn] { color: #3a6a2a; border-color: rgba(74, 122, 58, .6); }

.tbp-ti-node-buy[b-nkktgjgxfn] {
    font-family: var(--font-body, sans-serif); font-size: .74rem; white-space: nowrap;
    color: #23400f; background: linear-gradient(180deg, #a7d08a, #6fae5a);
    border: 1px solid #4a7a3a; border-radius: 999px; padding: 2px 10px; cursor: pointer;
    transition: filter .12s ease, transform .1s ease;
}
.tbp-ti-node-buy:hover[b-nkktgjgxfn] { filter: brightness(1.08); }
.tbp-ti-node-buy:active[b-nkktgjgxfn] { transform: translateY(1px); }
/* /Components/CampaignLoadingView.razor.rz.scp.css */
/* ── CampaignLoadingView — between-scenes ambiance beat ── */

.campaign-loading[b-4y4hmkkx47] {
    position: fixed;
    inset: 0;
    background: #08090a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    animation: cl-fade-in-b-4y4hmkkx47 0.65s ease both;
}

/* ── Guildhall scene SVG ── */
.cl-scene[b-4y4hmkkx47] {
    position: relative;
    display: flex;
    justify-content: center;
}

.cl-svg[b-4y4hmkkx47] {
    width: min(480px, 88vw);
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.75));
    animation: cl-rise-b-4y4hmkkx47 0.95s cubic-bezier(0.2, 0.8, 0.3, 1) 0.15s both;
}

/* Torch flame flicker — three layers: outer glow, bright core, hotspot */
.cl-flame-a[b-4y4hmkkx47] { animation: cl-flicker-a-b-4y4hmkkx47 2.3s ease-in-out 0.3s infinite alternate; }
.cl-flame-b[b-4y4hmkkx47] { animation: cl-flicker-b-b-4y4hmkkx47 1.8s ease-in-out 0.1s infinite alternate; }
.cl-flame-c[b-4y4hmkkx47] { animation: cl-flicker-c-b-4y4hmkkx47 1.1s ease-in-out 0.5s infinite alternate; }

@keyframes cl-flicker-a-b-4y4hmkkx47 {
    0%   { transform: scaleX(1) scaleY(1)     translateY(0); }
    30%  { transform: scaleX(0.92) scaleY(1.06) translateY(-1px); }
    60%  { transform: scaleX(1.05) scaleY(0.97) translateY(0.5px); }
    100% { transform: scaleX(0.96) scaleY(1.04) translateY(-0.5px); }
}
@keyframes cl-flicker-b-b-4y4hmkkx47 {
    0%   { opacity: 0.92; transform: scaleX(1) scaleY(1) translateY(0); }
    40%  { opacity: 1;    transform: scaleX(0.88) scaleY(1.08) translateY(-1.5px); }
    100% { opacity: 0.85; transform: scaleX(1.06) scaleY(0.94) translateY(0.5px); }
}
@keyframes cl-flicker-c-b-4y4hmkkx47 {
    0%   { opacity: 0.4; }
    50%  { opacity: 0.55; }
    100% { opacity: 0.32; }
}

/* ── Ornamental divider ── */
.cl-divider[b-4y4hmkkx47] {
    display: flex;
    justify-content: center;
    opacity: 0.45;
    animation: cl-text-rise-b-4y4hmkkx47 0.6s ease 0.5s both;
}

/* ── Game Master voice block ── */
.cl-gm-block[b-4y4hmkkx47] {
    max-width: 520px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: cl-text-rise-b-4y4hmkkx47 0.7s ease 0.6s both;
}

.cl-gm-byline[b-4y4hmkkx47] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}

.cl-gm-role[b-4y4hmkkx47] {
    font-family: "Jost", "Century Gothic", sans-serif;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9a8050;
    padding: 1px 7px;
    border: 1px solid rgba(154, 128, 80, 0.3);
    border-radius: 2px;
}

.cl-gm-name[b-4y4hmkkx47] {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 0.78rem;
    color: #ecc873;
}

.cl-gm-line[b-4y4hmkkx47] {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #dcc99e;
    margin: 0;
    max-width: 480px;
}

/* ── Progress bar ── */
.cl-progress-wrap[b-4y4hmkkx47] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: cl-text-rise-b-4y4hmkkx47 0.5s ease 0.8s both;
}

.cl-progress[b-4y4hmkkx47] {
    width: min(280px, 60vw);
    height: 2px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 2px;
    overflow: hidden;
}

.cl-progress-fill[b-4y4hmkkx47] {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #5a3c18, #c8a24e 50%, #5a3c18);
    background-size: 200% 100%;
    animation:
        cl-fill-b-4y4hmkkx47    2.15s cubic-bezier(0.25, 0.05, 0.6, 0.98) 0.35s both,
        cl-shimmer-b-4y4hmkkx47 1.6s  linear 0.5s infinite;
}

.cl-caption[b-4y4hmkkx47] {
    font-family: "Jost", "Century Gothic", sans-serif;
    font-size: 0.52rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(180, 160, 120, 0.45);
    margin: 0;
}

/* ── Door-open exit — arch interior expands to warm amber, scene fades ── */
@keyframes cl-door-exit-b-4y4hmkkx47 {
    0%   { opacity: 1;   background-color: #08090a; }
    30%  { opacity: 0.9; background-color: #2a1808; }
    70%  { opacity: 0.5; background-color: #5a3010; }
    100% { opacity: 0;   background-color: #9a5818; }
}
.cl-exiting[b-4y4hmkkx47] {
    animation: cl-door-exit-b-4y4hmkkx47 0.58s cubic-bezier(0.4, 0, 0.8, 1) forwards;
    pointer-events: none;
}
/* Arch glow expands when exiting — reinforce the "walk through" read */
.cl-exiting .cl-scene[b-4y4hmkkx47] {
    animation: cl-arch-bloom-b-4y4hmkkx47 0.58s ease-out forwards;
}
@keyframes cl-arch-bloom-b-4y4hmkkx47 {
    0%   { filter: brightness(1) saturate(1); transform: scale(1); }
    60%  { filter: brightness(2.2) saturate(1.4); transform: scale(1.04); }
    100% { filter: brightness(3.5) saturate(0.6); transform: scale(1.08); opacity: 0; }
}

/* ── Keyframes ── */
@keyframes cl-fade-in-b-4y4hmkkx47 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cl-rise-b-4y4hmkkx47 {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cl-text-rise-b-4y4hmkkx47 {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cl-fill-b-4y4hmkkx47 {
    from { width: 0%; }
    to   { width: 100%; }
}

@keyframes cl-shimmer-b-4y4hmkkx47 {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .campaign-loading[b-4y4hmkkx47],
    .cl-svg[b-4y4hmkkx47],
    .cl-gm-block[b-4y4hmkkx47],
    .cl-divider[b-4y4hmkkx47],
    .cl-progress-wrap[b-4y4hmkkx47] { animation: none !important; opacity: 1 !important; transform: none !important; }

    .cl-flame-a[b-4y4hmkkx47],
    .cl-flame-b[b-4y4hmkkx47],
    .cl-flame-c[b-4y4hmkkx47] { animation: none !important; }

    /* Still fill the bar, just no easing drama */
    .cl-progress-fill[b-4y4hmkkx47] { animation: cl-fill-b-4y4hmkkx47 2.15s linear 0s both !important; }

    /* Exit: skip door animation — advance fires after the same timer, but no visual drama */
    .cl-exiting[b-4y4hmkkx47],
    .cl-exiting .cl-scene[b-4y4hmkkx47] { animation: none !important; opacity: 0 !important; }
}
/* /Components/CastTelegraph.razor.rz.scp.css */
.cast-telegraph[b-2xgnul2iab] {
    position: absolute;
    width: var(--telegraph-size, var(--cell-size, 58px));
    height: var(--telegraph-size, var(--cell-size, 58px));
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 6;
}

.cast-telegraph-aoe .cast-telegraph-ring[b-2xgnul2iab] {
    inset: -10%;
}

.cast-telegraph-aoe .cast-telegraph-core[b-2xgnul2iab] {
    inset: 30%;
}

.cast-telegraph-ring[b-2xgnul2iab] {
    position: absolute;
    inset: -18%;
    border: 2px solid var(--cast-tint, var(--acc-knowledge));
    border-radius: 50%;
    box-shadow: 0 0 12px color-mix(in srgb, var(--cast-tint) 55%, transparent);
    animation: cast-ring-breathe-b-2xgnul2iab 0.45s ease-in-out infinite alternate;
}

.cast-telegraph-core[b-2xgnul2iab] {
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cast-tint) 22%, transparent);
    border: 1px dashed color-mix(in srgb, var(--cast-tint) 45%, transparent);
}

.cast-telegraph.pulse .cast-telegraph-ring[b-2xgnul2iab] {
    animation: cast-ring-pulse-b-2xgnul2iab 0.32s ease-in-out infinite alternate;
}

@keyframes cast-ring-breathe-b-2xgnul2iab {
    0%   { transform: scale(0.92); opacity: 0.65; }
    100% { transform: scale(1.06); opacity: 1; }
}

@keyframes cast-ring-pulse-b-2xgnul2iab {
    0%   { transform: scale(0.88); opacity: 0.55; }
    100% { transform: scale(1.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cast-telegraph-ring[b-2xgnul2iab],
    .cast-telegraph.pulse .cast-telegraph-ring[b-2xgnul2iab] { animation: none; }
}
/* /Components/ChargedMomentOverlay.razor.rz.scp.css */
/* =====================================================================================
   ChargedMomentOverlay — the screen-space appeal surface (DM stage on top, choices on bottom).
   Extracted verbatim from BattleWatchView.razor.css (PR #162) so the watch view and SiteBattleView
   share ONE overlay style. Board-space cues (vignette/focus/tether) live in each view's own CSS
   because Blazor CSS isolation scopes them to that view's board markup, not this component's.

   A full-screen, screen-space overlay (rendered in the shell <Overlay> slot, so it does NOT scale
   with the camera): a LARGE DM portrait drops in from the TOP and speaks, the choices land as BIG
   buttons at the BOTTOM. The board behind is already darkened/dwelling (.charged-pause, per-view).
   ===================================================================================== */
.charged-overlay[b-8ez0qmqtp2] {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none; /* let the darkened board show; only the bands below catch clicks */
    font-family: var(--font-body, "Trebuchet MS", sans-serif);
}

/* TOP band — the DM leans across the table. Slides down from the top edge. */
.ca-dm-stage[b-8ez0qmqtp2] {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 18px;
    padding: 20px clamp(20px, 6vw, 90px) 22px;
    background: linear-gradient(180deg, #16100bf2 0%, #16100be0 62%, #16100b00 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--gold-bright) 35%, transparent);
    pointer-events: auto;
    animation: ca-stage-in-b-8ez0qmqtp2 .34s cubic-bezier(.2,.9,.25,1.15) forwards;
}
.ca-dm-portrait[b-8ez0qmqtp2] {
    flex: 0 0 auto;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.7)) drop-shadow(0 0 14px color-mix(in srgb, var(--gold-bright) 45%, transparent));
    animation: ca-portrait-breathe-b-8ez0qmqtp2 2.4s ease-in-out infinite;
}
.ca-dm-speech[b-8ez0qmqtp2] { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ca-dm-name[b-8ez0qmqtp2] {
    font-family: var(--font-display, "Cinzel", serif);
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: var(--gold-bright);
    letter-spacing: .03em;
}
.ca-dm-line[b-8ez0qmqtp2] {
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    font-style: italic;
    color: var(--parch, #e3d4a8);
    line-height: 1.3;
}
.ca-headline[b-8ez0qmqtp2] {
    font-family: var(--font-display, "Cinzel", serif);
    font-size: clamp(.9rem, 1.7vw, 1.1rem);
    color: var(--enemy-line, #e88a72);
    letter-spacing: .02em;
    margin-top: 4px;
}
.ca-stakes[b-8ez0qmqtp2] {
    font-size: clamp(.82rem, 1.5vw, 1rem);
    color: var(--parch-dim, #b8a988);
    line-height: 1.25;
}

/* BOTTOM band — the choices, as LARGE buttons. Slides up from the bottom edge. */
.ca-options[b-8ez0qmqtp2] {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
    gap: 14px;
    padding: 22px clamp(16px, 5vw, 80px) 26px;
    background: linear-gradient(0deg, #16100bf2 0%, #16100be0 60%, #16100b00 100%);
    pointer-events: auto;
    animation: ca-options-in-b-8ez0qmqtp2 .34s cubic-bezier(.2,.9,.25,1.15) forwards;
}
.ca-opt[b-8ez0qmqtp2] {
    flex: 1 1 300px; max-width: 460px;
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 20px;
    border-radius: 11px;
    border: 1px solid var(--line, #3a3d48);
    background: linear-gradient(180deg, #221b16, #1a1411);
    color: var(--parch, #e3d4a8);
    cursor: pointer;
    text-align: left;
    transition: transform .1s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ca-opt:hover:not(:disabled)[b-8ez0qmqtp2] { transform: translateY(-2px); }
.ca-opt:active:not(:disabled)[b-8ez0qmqtp2] { transform: translateY(0); }
.ca-opt:disabled[b-8ez0qmqtp2] { opacity: .4; cursor: not-allowed; }
.ca-opt-verb[b-8ez0qmqtp2] {
    font-family: var(--font-display, "Cinzel", serif);
    font-size: 1.12rem; letter-spacing: .02em;
}
.ca-opt-line[b-8ez0qmqtp2] { font-size: .92rem; line-height: 1.25; color: var(--parch-dim, #b8a988); }
.ca-steady[b-8ez0qmqtp2] { border-color: var(--player-line, #8fd06f); box-shadow: inset 0 0 0 1px rgba(143,208,111,.2); }
.ca-steady .ca-opt-verb[b-8ez0qmqtp2] { color: var(--player-line, #8fd06f); }
.ca-steady:hover:not(:disabled)[b-8ez0qmqtp2] { background: #1f2a1d; box-shadow: 0 0 16px rgba(143,208,111,.4); }
.ca-protect[b-8ez0qmqtp2] { border-color: var(--ward, #7fb5c9); box-shadow: inset 0 0 0 1px rgba(127,181,201,.2); }
.ca-protect .ca-opt-verb[b-8ez0qmqtp2] { color: var(--ward, #7fb5c9); }
.ca-protect:hover:not(:disabled)[b-8ez0qmqtp2] { background: #18262c; box-shadow: 0 0 16px rgba(127,181,201,.4); }

.ca-let-ride[b-8ez0qmqtp2] {
    flex-basis: 100%;
    margin-top: 2px;
    padding: 4px;
    background: none; border: none;
    color: var(--muted, #8a8298);
    font-size: .92rem; font-style: italic; text-align: center;
    cursor: pointer;
    text-decoration: underline dotted transparent;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.ca-let-ride:hover[b-8ez0qmqtp2] { color: var(--parch-dim, #b8a988); text-decoration-color: var(--muted, #8a8298); }
/* the generous auto-resume countdown bar (timed speed tiers only; Slow is untimed) */
.ca-timer[b-8ez0qmqtp2] {
    flex-basis: 100%;
    height: 4px; margin-top: 4px;
    background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden;
}
.ca-timer-fill[b-8ez0qmqtp2] {
    height: 100%;
    background: linear-gradient(90deg, var(--gold, #c6a15b), var(--enemy-line, #e88a72));
    transition: width .3s linear;
}
@keyframes ca-stage-in-b-8ez0qmqtp2 {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ca-options-in-b-8ez0qmqtp2 {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ca-portrait-breathe-b-8ez0qmqtp2 {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .ca-dm-stage[b-8ez0qmqtp2], .ca-options[b-8ez0qmqtp2] { animation: none; }
    .ca-dm-portrait[b-8ez0qmqtp2] { animation: none; }
}
/* /Components/CombatFx.razor.rz.scp.css */
/* CombatFx — one-shot VFX overlay, scoped. Sits above tokens for the hit beat then self-clears.
   Colours/tint ride on inline `color` (the damage-type var) set by the component; these keyframes
   only animate opacity/transform so the silhouette read of the fx symbol is never distorted away.
   animation-duration is set inline (matches DurationMs) so the visual and the self-clear timer agree. */

.combat-fx[b-mjv785p7cm] {
    position: absolute;
    z-index: 6;                 /* over tokens (z2) + move-tiles (z1), under the inspect overlay */
    pointer-events: none;       /* purely cosmetic — never eats a board click */
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    filter: drop-shadow(0 0 6px currentColor);
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}
.combat-fx svg[b-mjv785p7cm] { display: block; overflow: visible; }

/* a centred burst: snap in big-and-bright, settle, fade */
.fx-burst[b-mjv785p7cm] { animation-name: fx-burst-b-mjv785p7cm; }
@keyframes fx-burst-b-mjv785p7cm {
    0%   { opacity: 0; transform: scale(.35); }
    18%  { opacity: 1; transform: scale(1.12); }
    45%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.06); }
}

/* a swelling aura/zone (heal, ward, frost, fog): breathe up, hold, ebb */
.fx-swell[b-mjv785p7cm] { animation-name: fx-swell-b-mjv785p7cm; filter: drop-shadow(0 0 9px currentColor); }
@keyframes fx-swell-b-mjv785p7cm {
    0%   { opacity: 0; transform: scale(.7); }
    30%  { opacity: 1; transform: scale(1.04); }
    70%  { opacity: .9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.02); }
}

/* a projectile impact. BattleWatch now draws the true origin-to-target lane; this symbol is
   only the arrival/impact so it does not imply a fake lower-left origin. */
.fx-travel[b-mjv785p7cm] { animation-name: fx-travel-b-mjv785p7cm; }
@keyframes fx-travel-b-mjv785p7cm {
    0%   { opacity: 0; transform: scale(.62); }
    28%  { opacity: 1; transform: scale(1); }
    62%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 0; transform: translate(0, 0) scale(1.02); }
}

/* a melee sweep: a quick rotated wipe across the target */
.fx-slash[b-mjv785p7cm] { animation-name: fx-slash-b-mjv785p7cm; filter: drop-shadow(0 0 4px currentColor); }
@keyframes fx-slash-b-mjv785p7cm {
    0%   { opacity: 0; transform: rotate(-22deg) scale(.7); }
    22%  { opacity: 1; transform: rotate(0deg) scale(1.08); }
    50%  { opacity: 1; transform: rotate(6deg) scale(1); }
    100% { opacity: 0; transform: rotate(12deg) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .combat-fx[b-mjv785p7cm] { animation-duration: 240ms !important; }
    .fx-burst[b-mjv785p7cm], .fx-swell[b-mjv785p7cm], .fx-travel[b-mjv785p7cm], .fx-slash[b-mjv785p7cm] { animation-name: fx-fade-b-mjv785p7cm; }
    @keyframes fx-fade-b-mjv785p7cm { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
}
/* /Components/CombatSheet.razor.rz.scp.css */
/* W5-A — in-combat character sheet overlay. Scoped to CombatSheet; colours from app.css :root
   (SVG-simple compatibility). The hero variant is rich; the enemy variant is lean. */

/* full-bleed click-away backdrop, centered card */
.cs-backdrop[b-yenug1p9dj] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(8, 6, 4, .62);
    backdrop-filter: blur(2px);
    animation: cs-fade-b-yenug1p9dj .14s ease;
}
@keyframes cs-fade-b-yenug1p9dj { from { opacity: 0; } to { opacity: 1; } }

.cs-card[b-yenug1p9dj] {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    box-shadow: 0 18px 50px rgba(0,0,0,.6);
    border-top: 3px solid var(--gold);
    outline: none;
    animation: cs-rise-b-yenug1p9dj .16s ease;
}
@keyframes cs-rise-b-yenug1p9dj { from { transform: translateY(10px); opacity: .4; } to { transform: none; opacity: 1; } }
.cs-card.enemy[b-yenug1p9dj] { border-top-color: var(--enemy-line); }
/* enemy sheet is leaner — a touch narrower reads as "simpler" */
.cs-card.enemy-kind[b-yenug1p9dj] { max-width: 380px; }

.cs-close[b-yenug1p9dj] {
    position: absolute;
    top: 9px; right: 10px;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--ink2);
    color: var(--muted);
    font-size: .9rem; line-height: 1;
    cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
}
.cs-close:hover[b-yenug1p9dj] { color: var(--gold-bright); border-color: var(--gold); background: #2a2114; }

/* identity header */
.cs-head[b-yenug1p9dj] { display: flex; align-items: center; gap: 12px; padding-right: 30px; }
.cs-portrait[b-yenug1p9dj] { flex: 0 0 auto; display: grid; place-items: center; }
.cs-ident[b-yenug1p9dj] { min-width: 0; }
.cs-name[b-yenug1p9dj] {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.1;
    color: var(--ink);
}
.cs-card.player .cs-name[b-yenug1p9dj] { color: var(--gold-bright); }
.cs-card.enemy .cs-name[b-yenug1p9dj] { color: var(--enemy-line); }
.cs-epithet[b-yenug1p9dj] { color: var(--gold); font-style: italic; font-size: .82rem; margin-top: 1px; }
.cs-sub[b-yenug1p9dj] { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.cs-tags[b-yenug1p9dj] { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pill.lineage[b-yenug1p9dj] { color: var(--acc-forbidden); border-color: #4a3a5a; }

/* HP bar with inline label */
.cs-hpbar[b-yenug1p9dj] {
    position: relative;
    height: 20px;
    border-radius: 6px;
    background: #2a2014;
    overflow: hidden;
    border: 1px solid #00000050;
}
.cs-hpbar > span[b-yenug1p9dj] {
    display: block; height: 100%;
    background: linear-gradient(90deg, #5da64f, var(--hp));
    transition: width .35s ease;
}
.cs-hpbar.low > span[b-yenug1p9dj] { background: linear-gradient(90deg, #b8482e, var(--hp-low)); }
.cs-hpbar > em[b-yenug1p9dj] {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-style: normal; font-size: .74rem; font-weight: 700;
    color: #fff; text-shadow: 0 1px 2px #000;
    letter-spacing: .03em;
}

/* core stats row */
.cs-stats[b-yenug1p9dj] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cs-stats.enemy[b-yenug1p9dj] { grid-template-columns: repeat(3, 1fr); }
.cs-stat[b-yenug1p9dj] {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 2px; border: 1px solid var(--line); border-radius: 8px; background: #1b160f;
    cursor: help;
}
.cs-stat b[b-yenug1p9dj] { color: var(--gold-bright); font-size: 1.1rem; font-family: var(--font-display); }
.cs-stat span[b-yenug1p9dj] { color: var(--muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 1px; }

/* equipped weapon / attack line */
.cs-weapon[b-yenug1p9dj] {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: #17120b; cursor: help;
}
.wp-icon[b-yenug1p9dj] {
    width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center;
    font-family: var(--font-display); color: var(--steel-rim);
    border: 1px solid var(--line); border-radius: 6px; background: var(--ink2);
}
.wp-name[b-yenug1p9dj] { font-weight: 600; color: var(--ink); }
.wp-dmg[b-yenug1p9dj] { color: var(--wound); font-weight: 700; }
.wp-reach[b-yenug1p9dj] { color: var(--muted); font-size: .74rem; margin-left: auto; text-align: right; }

.cs-tagline[b-yenug1p9dj] { font-size: .8rem; color: var(--gold); font-style: italic; cursor: help; }

/* section heading */
.cs-section[b-yenug1p9dj] {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--gold); margin: 4px 0 -2px;
    border-bottom: 1px solid var(--line); padding-bottom: 3px;
}

/* ability grid (hero only) */
.cs-abilities[b-yenug1p9dj] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ab[b-yenug1p9dj] {
    display: flex; flex-direction: column; align-items: center;
    padding: 5px 0; border-radius: 7px; background: #1b160f; border: 1px solid var(--line);
    cursor: help;
}
.ab-k[b-yenug1p9dj] { font-size: .6rem; letter-spacing: .05em; color: var(--muted); }
.ab-v[b-yenug1p9dj] { font-size: 1rem; font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.ab-save[b-yenug1p9dj] { font-size: .58rem; color: var(--muted); margin-top: 1px; }

/* features */
.cs-features[b-yenug1p9dj] { display: flex; flex-direction: column; gap: 4px; }
.feat[b-yenug1p9dj] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line); background: #1b160f;
    font-size: .84rem; cursor: help;
}
.feat.spent[b-yenug1p9dj] { opacity: .45; }
.feat.ready .feat-name[b-yenug1p9dj] { color: var(--ink); }
.feat-uses[b-yenug1p9dj] {
    font-size: .7rem; font-weight: 700; color: var(--gold-bright);
    border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; background: var(--ink2);
}

/* conditions */
.cs-conditions[b-yenug1p9dj] { display: flex; flex-wrap: wrap; gap: 5px; }
.cond[b-yenug1p9dj] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .72rem; padding: 2px 9px 2px 7px; border-radius: 999px; cursor: help;
    color: var(--wound); border: 1px solid #5a3c2c; background: #2a1c12;
}
/* the condition icon inherits the pill's wound tint via currentColor (::deep crosses the
   GameIcon scope boundary so the child component's <svg> picks up the colour) */
.cond[b-yenug1p9dj]  .game-icon { color: var(--wound); vertical-align: -0.12em; }

/* tiny stat icons in the AC/Speed/Init/Crit labels — muted gold, tucked before the label text */
.cs-stat span[b-yenug1p9dj]  .game-icon { color: var(--gold); margin-right: 3px; vertical-align: -0.1em; }
/* HP bar inline icon sits on the white label text */
.cs-hpbar em[b-yenug1p9dj]  .game-icon { color: #fff; margin-right: 4px; vertical-align: -0.12em; filter: drop-shadow(0 1px 1px #000); }

/* injuries */
.cs-injuries[b-yenug1p9dj] { display: flex; flex-direction: column; gap: 5px; }
.wound[b-yenug1p9dj] {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; border-radius: 7px; border: 1px solid #4a342a; background: #20140e;
    font-size: .82rem; cursor: help;
}
.wound-glyph[b-yenug1p9dj] { color: var(--wound); flex: 0 0 auto; }
.wound-name[b-yenug1p9dj] { color: var(--ink); }
.wound-mods[b-yenug1p9dj] { color: var(--enemy-line); font-size: .74rem; margin-left: auto; }

/* enemy flavor */
.cs-flavor[b-yenug1p9dj] {
    font-style: italic; color: var(--page-muted); font-size: .84rem;
    border-left: 2px solid var(--line); padding-left: 10px; margin-top: 2px;
}

/* spell slots + concentration (spell polish pass) */
.cs-spell-slots[b-yenug1p9dj] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.cs-spell-slots .slot-row[b-yenug1p9dj] { display: flex; align-items: center; gap: 4px; font-size: .78rem; }
.cs-spell-slots .slot-lvl[b-yenug1p9dj] { width: 22px; color: var(--muted); font-weight: 600; }
.cs-spell-slots .slot-pip[b-yenug1p9dj] { width: 8px; height: 8px; border-radius: 50%; background: var(--acc-knowledge); opacity: .3; }
.cs-spell-slots .slot-pip.full[b-yenug1p9dj] { opacity: 1; }
.cs-spell-slots .conc-line[b-yenug1p9dj] { margin-top: 4px; font-size: .76rem; color: var(--gold); font-style: italic; }
/* /Components/CombatShell.razor.rz.scp.css */
/* CombatShell — the FULL-SCREEN battlemap session frame (Battle Brothers / HoMM model).
   The board fills the entire browser window (100vw × 100vh) and every UI layer — the top
   strip, the party rail, the bottom bar, the inspect overlay — floats ABOVE it as a HUD.
   There is no page-box: the shell is position:fixed and owns the viewport.

   z-index lanes:
     0  — board (battlemap), via .cs-board
     30 — HUD chrome (top strip, rail, bottom bar, board overlay)
     60 — inspect/pause overlay (CombatSheet etc., rendered via @Overlay) */

.combat-shell[b-x3u9smagc7] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* honour mobile browser chrome where supported */
    overflow: hidden;
    /* No flex column — the board is the base layer and the chrome is absolutely overlaid. */
}

/* BOARD — the base layer, edge to edge, behind all chrome. */
.cs-board[b-x3u9smagc7] {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Stretch the viewport host to fill the board layer and drop the page-box framing
   (rounded border + min-height clamp) so the battlemap reaches every edge. ::deep
   reaches into the child BattleBoardViewport's scoped markup. */
.cs-board[b-x3u9smagc7]  .board-viewport-shell {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}
.cs-board[b-x3u9smagc7]  .board-viewport {
    border: none;
    border-radius: 0;
}
.cs-board[b-x3u9smagc7]  .viewport-hud { display: none; } /* the drag/scroll hint chrome is page-box furniture */

/* The TerrainLegend rides as a sibling of the viewport inside the board slot. Float it
   into the top-right corner as a quiet HUD chip rather than letting it steal board height. */
.cs-board[b-x3u9smagc7]  .terrain-legend {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    max-width: 260px;
    padding: 6px 8px;
    background: #0d0a07cc;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

/* TOP — thin glass strip floating over the top edge: crest · title · controls */
.cs-top[b-x3u9smagc7] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: linear-gradient(180deg, #120d08e8 0%, #120d08aa 70%, transparent 100%);
    backdrop-filter: blur(3px);
    pointer-events: none; /* let clicks fall through the gradient gutters... */
}
.cs-top > *[b-x3u9smagc7] { pointer-events: auto; } /* ...but keep the actual controls clickable */
.cs-crest[b-x3u9smagc7] { display: flex; align-items: center; gap: 8px; justify-self: start; min-width: 0; }
.cs-emblem[b-x3u9smagc7] { display: block; flex: 0 0 auto; }
.cs-sponsor[b-x3u9smagc7] { font-family: var(--font-display); color: var(--gold); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-title[b-x3u9smagc7] { font-family: var(--font-display); font-size: 18px; color: var(--gold-bright); letter-spacing: .03em; text-align: center; white-space: nowrap; text-shadow: 0 2px 6px #000a; }
.cs-top-right[b-x3u9smagc7] { justify-self: end; display: flex; align-items: center; gap: 8px; }

/* RAIL — party rail floating over the left edge, vertically centred, glass panel. */
.cs-main[b-x3u9smagc7] {
    display: contents; /* the rail/board lay out against the fixed shell, not a flex row */
}
.cs-rail[b-x3u9smagc7] {
    position: absolute;
    left: 10px;
    top: 64px;            /* clear the top strip */
    bottom: 12px;
    z-index: 30;
    width: 150px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
    background: linear-gradient(180deg, #14100ad9, #0d0a07e0);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
}

/* BOARD OVERLAY — enemy intel etc., floats top-right under the top strip. */
.cs-board-overlay[b-x3u9smagc7] {
    position: absolute;
    top: 60px;
    right: 12px;
    z-index: 30;
    pointer-events: none;
}
.cs-board-overlay > *[b-x3u9smagc7] { pointer-events: auto; }

/* TOP-LEFT HUD — the Battle Plan status chip. Fixed screen chrome (NOT inside the scaled board),
   floated just right of the left party rail so it never collides with it and never zooms with the map. */
.cs-topleft[b-x3u9smagc7] {
    position: absolute;
    top: 60px;
    left: 170px;            /* clear the 150px party rail + its 10px gutter */
    z-index: 30;
    pointer-events: none;
}
.cs-topleft > *[b-x3u9smagc7] { pointer-events: auto; }

/* BOTTOM — controls + log floating over the bottom edge, glass panel. */
.cs-bottom[b-x3u9smagc7] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    z-index: 30;
    width: min(960px, calc(100vw - 180px)); /* leave the left rail clear */
    max-height: 34vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg, transparent, #0d0a07cc 22%);
    border-radius: 12px;
    pointer-events: none;
}
.cs-bottom > *[b-x3u9smagc7] { pointer-events: auto; }

@media (max-width: 820px) {
    .cs-rail[b-x3u9smagc7] { width: 104px; }
    .cs-bottom[b-x3u9smagc7] { width: calc(100vw - 124px); }
    .cs-topleft[b-x3u9smagc7] { left: 124px; } /* track the narrower rail */
}
/* /Components/CombatToken.razor.rz.scp.css */
/* CombatToken — cel-shaded full figures on miniature bases (owner lock 2026-06-25).
   Hybrid: hard tone bands + amber rim (style-2) + woodcut-weight contour (style-1/B).
   Board views align tokens to the cell bottom so figures stand ON the tile. */
.combat-token[b-yxj8qzxxyc] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    line-height: 0;
    position: relative;
    transition: transform .18s ease, filter .2s ease;
}

.combat-token svg.mini-fig[b-yxj8qzxxyc] {
    display: block;
    overflow: visible;
    filter: drop-shadow(0 5px 6px rgba(0,0,0,.55));
}

.combat-token .figure-stack[b-yxj8qzxxyc] {
    filter: drop-shadow(0 0 1px rgba(255,207,122,.25));
}

/* active turn — gentle breathe + warm base-rim pulse */
.combat-token.active[b-yxj8qzxxyc] {
    transform: translateY(-4px);
    z-index: 3;
    animation: mini-breathe-b-yxj8qzxxyc 3.2s ease-in-out infinite;
}

.combat-token.active svg.mini-fig[b-yxj8qzxxyc] {
    filter: drop-shadow(0 0 8px rgba(217,180,102,.55)) drop-shadow(0 6px 8px rgba(0,0,0,.55));
}

.combat-token.active .base-rim[b-yxj8qzxxyc] {
    animation: base-rim-pulse-b-yxj8qzxxyc 2.4s ease-in-out infinite;
}

/* fallen — slump + desaturate; z10 slash carries the kill read.
   Juice: when Fallen becomes true (after the dying-flash window), animate the physical slump
   with weight — a quick scale-in pop, then rotate into the fallen lean. */
.combat-token.fallen[b-yxj8qzxxyc] {
    transform: rotate(-12deg) translateY(4px);
    opacity: .55;
    animation: combat-token-fall-settle-b-yxj8qzxxyc .6s cubic-bezier(.2, .6, .35, 1) forwards;
}

.combat-token.fallen svg.mini-fig[b-yxj8qzxxyc] {
    filter: grayscale(.85) brightness(.55) drop-shadow(0 2px 4px rgba(0,0,0,.6));
}

@keyframes combat-token-fall-settle-b-yxj8qzxxyc {
    0%   { transform: scale(1.06) translateX(2px); opacity: .8; }
    35%  { transform: scale(.94)  rotate(-5deg) translateX(-2px); opacity: .65; }
    100% { transform: rotate(-12deg) translateY(4px); opacity: .55; }
}

/* Slice C — class role badge on the base (blade/bow/mace/staff/dagger) */
.combat-token .role-badge-disc[b-yxj8qzxxyc] {
    fill: #12100a;
    stroke: var(--player-line);
    stroke-width: 2;
    opacity: .92;
}
.combat-token .role-badge.enemy .role-badge-disc[b-yxj8qzxxyc] { stroke: var(--enemy-line); }
.combat-token .role-badge-glyph line[b-yxj8qzxxyc],
.combat-token .role-badge-glyph path[b-yxj8qzxxyc],
.combat-token .role-badge-glyph circle[b-yxj8qzxxyc] {
    fill: none;
    stroke: #f2e6c8;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.combat-token .role-badge-glyph .fillw[b-yxj8qzxxyc] { fill: #f2e6c8; }
.combat-token .role-badge-glyph .orb[b-yxj8qzxxyc] { fill: var(--gold-bright); stroke: var(--gold-bright); }
.combat-token.fallen .role-badge[b-yxj8qzxxyc] { display: none; }

/* deploy ghost — semi-transparent preview miniature (Slice B / ART brief) */
.combat-token.ghost[b-yxj8qzxxyc] {
    opacity: .42;
    pointer-events: none;
}
.combat-token.ghost.enemy[b-yxj8qzxxyc] {
    opacity: .38;
    filter: saturate(.55);
}
.combat-token.ghost.enemy svg.mini-fig[b-yxj8qzxxyc] {
    filter: grayscale(.35) drop-shadow(0 4px 5px rgba(0,0,0,.45));
}

/* named leader / elite — steady gold base glow */
.combat-token.leader:not(.fallen) svg.mini-fig[b-yxj8qzxxyc] {
    filter: drop-shadow(0 0 6px rgba(240,205,118,.5)) drop-shadow(0 5px 6px rgba(0,0,0,.55));
}

@keyframes mini-breathe-b-yxj8qzxxyc {
    0%, 100% { transform: translateY(-4px); }
    50%      { transform: translateY(-7px); }
}

/* ---- figure-life: universal "alive" motion (idle breathe/sway + walk-bob) ----
   Pivots at the figure's feet (bottom-centre) so the body sways/steps over its base instead of
   sliding. Per-unit duration + delay (CSS vars from the component) desync the crowd. Amplitudes are
   deliberately small — readable life, never a wobble. Sits INSIDE figure-stack so the windup lunge
   (a transform on figure-stack) and this motion never fight over the same property. */
.combat-token .figure-life[b-yxj8qzxxyc] {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    will-change: transform;
}

.combat-token .figure-life.idle-steady[b-yxj8qzxxyc] {
    animation: life-breathe-b-yxj8qzxxyc var(--life-dur, 3.4s) ease-in-out var(--life-delay, 0s) infinite;
}
.combat-token .figure-life.idle-sway[b-yxj8qzxxyc] {
    animation: life-sway-b-yxj8qzxxyc var(--life-dur, 3.4s) ease-in-out var(--life-delay, 0s) infinite;
}
.combat-token .figure-life.idle-restless[b-yxj8qzxxyc] {
    animation: life-restless-b-yxj8qzxxyc var(--life-dur, 3.4s) ease-in-out var(--life-delay, 0s) infinite;
}
.combat-token .figure-life.walking[b-yxj8qzxxyc] {
    animation: life-walk-b-yxj8qzxxyc var(--walk-dur, 0.44s) linear infinite;
}

@keyframes life-breathe-b-yxj8qzxxyc {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.3%); }
}
@keyframes life-sway-b-yxj8qzxxyc {
    0%, 100% { transform: translateY(0) rotate(-0.5deg); }
    50%      { transform: translateY(-1.1%) rotate(0.6deg); }
}
@keyframes life-restless-b-yxj8qzxxyc {
    0%   { transform: translateY(0) rotate(0deg); }
    22%  { transform: translateY(-0.7%) rotate(-0.7deg); }
    55%  { transform: translateY(-0.3%) rotate(0.5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
/* Walk: a two-step bob with a slight alternating lean — reads as marching weight, not gliding. */
@keyframes life-walk-b-yxj8qzxxyc {
    0%, 100% { transform: translateY(0) rotate(-1.1deg); }
    25%      { transform: translateY(-2.1%) rotate(0deg); }
    50%      { transform: translateY(0) rotate(1.1deg); }
    75%      { transform: translateY(-2.1%) rotate(0deg); }
}

@keyframes base-rim-pulse-b-yxj8qzxxyc {
    0%, 100% { opacity: .72; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .combat-token.active[b-yxj8qzxxyc] { animation: none; }
    .combat-token.active .base-rim[b-yxj8qzxxyc] { animation: none; }
    .combat-token .figure-life[b-yxj8qzxxyc] { animation: none !important; }
    .combat-token.phase-windup[b-yxj8qzxxyc],
    .combat-token.phase-casting[b-yxj8qzxxyc],
    .combat-token.phase-cast-windup[b-yxj8qzxxyc],
    .combat-token.phase-cast-channel[b-yxj8qzxxyc],
    .combat-token.phase-cast-telegraph[b-yxj8qzxxyc],
    .combat-token.phase-cast-release[b-yxj8qzxxyc] { animation: none; }
    .combat-token.fallen[b-yxj8qzxxyc] { animation: none; }
}

/* ---- attack-phase telegraph (mirrors Core windup/backswing — Pakke A) ---- */

.combat-token.phase-windup[b-yxj8qzxxyc] {
    z-index: 4;
    animation: windup-commit-b-yxj8qzxxyc .45s ease-in forwards;
}

.combat-token.phase-windup .weapon-layer[b-yxj8qzxxyc] {
    filter: drop-shadow(0 0 4px rgba(255, 200, 90, .55));
}

.combat-token .bow-arrow[b-yxj8qzxxyc] {
    fill: none;
    stroke: #e8dcc8;
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: .85;
}

.combat-token.phase-windup .base-rim[b-yxj8qzxxyc] {
    stroke: var(--gold-bright);
    stroke-width: 3;
    opacity: 1;
}

.combat-token.phase-backswing .figure-stack[b-yxj8qzxxyc] {
    opacity: .92;
}

.combat-token.phase-casting[b-yxj8qzxxyc],
.combat-token.phase-cast-windup[b-yxj8qzxxyc],
.combat-token.phase-cast-channel[b-yxj8qzxxyc],
.combat-token.phase-cast-telegraph[b-yxj8qzxxyc],
.combat-token.phase-cast-release[b-yxj8qzxxyc] {
    z-index: 4;
}

/* ---- spell cast sub-phases (E3 — UI projection over Core windup) ---- */

.combat-token.phase-cast-windup[b-yxj8qzxxyc] {
    animation: cast-root-still-b-yxj8qzxxyc .45s ease-out forwards;
}

.combat-token.phase-cast-channel[b-yxj8qzxxyc] {
    animation: cast-root-rise-b-yxj8qzxxyc .45s ease-out forwards;
}

.combat-token.phase-cast-telegraph .figure-stack[b-yxj8qzxxyc],
.combat-token.phase-cast-release .figure-stack[b-yxj8qzxxyc] {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc-knowledge) 40%, transparent));
}

.combat-token.phase-cast-release[b-yxj8qzxxyc] {
    animation: cast-root-flare-b-yxj8qzxxyc .12s ease-out forwards;
}

/* Hand-only cast glow — NOT whole-figure (owner fix). Tint rides on parent `color`. */
.combat-token .hand-glow[b-yxj8qzxxyc] {
    fill: color-mix(in srgb, currentColor 85%, white);
    animation: hand-pulse-b-yxj8qzxxyc .35s ease-in-out infinite alternate;
}

.combat-token.phase-cast-windup .hand-glow[b-yxj8qzxxyc] { animation: none; opacity: .45; }

.combat-token .hand-glow.left[b-yxj8qzxxyc]  { fill: color-mix(in srgb, currentColor 90%, #a8d4ff); }
.combat-token .hand-glow.right[b-yxj8qzxxyc] { fill: color-mix(in srgb, currentColor 75%, #d0ecff); }

.combat-token .cast-orb[b-yxj8qzxxyc] {
    fill: color-mix(in srgb, currentColor 35%, white);
    animation: orb-rise-b-yxj8qzxxyc .45s ease-out forwards;
}

.combat-token .cast-orb.flaring[b-yxj8qzxxyc] {
    animation: orb-flare-b-yxj8qzxxyc .18s ease-out forwards;
}

@keyframes cast-root-still-b-yxj8qzxxyc {
    0%, 100% { transform: scale(1); }
}

@keyframes cast-root-rise-b-yxj8qzxxyc {
    0%   { transform: scale(1); }
    100% { transform: scale(1.03) translateY(-2px); }
}

@keyframes cast-root-flare-b-yxj8qzxxyc {
    0%   { transform: scale(1.03) translateY(-2px); filter: brightness(1); }
    50%  { transform: scale(1.05) translateY(-3px); filter: brightness(1.2); }
    100% { transform: scale(1.03) translateY(-2px); filter: brightness(1); }
}

@keyframes orb-flare-b-yxj8qzxxyc {
    0%   { transform: scale(1); opacity: .9; }
    40%  { transform: scale(1.35); opacity: 1; }
    100% { transform: scale(1.1); opacity: .85; }
}

@keyframes hand-pulse-b-yxj8qzxxyc {
    0%   { transform: scale(.85); opacity: .55; }
    100% { transform: scale(1.15); opacity: 1; }
}

@keyframes orb-rise-b-yxj8qzxxyc {
    0%   { transform: translateY(6px) scale(.6); opacity: .3; }
    100% { transform: translateY(-4px) scale(1); opacity: .95; }
}

@keyframes windup-commit-b-yxj8qzxxyc {
    0%   { transform: scale(1); }
    70%  { transform: scale(1.04) translateY(-2px); }
    100% { transform: scale(1.06) translateY(-3px); }
}
/* /Components/CombatWindupOverlay.razor.rz.scp.css */
/* Combat windup overlay — range ring + LoS telegraphs (deploy grammar parity). */

.combat-windup-overlay[b-it0xuoticl] {
    pointer-events: none;
}

.windup-los-line[b-it0xuoticl] {
    stroke-width: 1.2;
    stroke-dasharray: 4 8;
    fill: none;
    opacity: 0;
    animation: windup-los-in-b-it0xuoticl .18s ease-out forwards;
}
.windup-los-line.clear.player[b-it0xuoticl]  { stroke: var(--player-line); opacity: 0.24; }
.windup-los-line.clear.enemy[b-it0xuoticl]   { stroke: var(--enemy-line); opacity: 0.22; }
.windup-los-line.blocked[b-it0xuoticl]       { stroke: var(--blood); opacity: 0.42; stroke-dasharray: 3 6; }

.windup-los-block[b-it0xuoticl] {
    fill: var(--blood);
    fill-opacity: 0.45;
    stroke: var(--blood);
    stroke-width: 1.5;
    opacity: 0;
    animation: windup-block-in-b-it0xuoticl .25s ease-out forwards;
}

@keyframes windup-los-in-b-it0xuoticl {
    from { opacity: 0; stroke-dashoffset: 8; }
    to   { opacity: inherit; stroke-dashoffset: 0; }
}
@keyframes windup-block-in-b-it0xuoticl {
    0%   { opacity: 0; r: 0; }
    60%  { opacity: 1; }
    100% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .windup-los-line[b-it0xuoticl], .windup-los-block[b-it0xuoticl] { animation: none; opacity: inherit; }
}
/* /Components/ContractCard.razor.rz.scp.css */
/* ContractCard — D&D MODULE card chrome. Scoped (Blazor ::deep where children need styling).
   Palette comes only from app.css :root vars; --threat is set inline per-card. */

.contract-card[b-8yhs766vov] {
    position: relative;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px 18px;
    overflow: hidden;
}

/* ---- era: 4E — the encounter-card read: a coloured left stripe + a tinted top edge ---- */
.contract-card.era-4e[b-8yhs766vov] {
    border-left: 4px solid var(--threat);
    padding-left: 22px;
}
.cc-stripe[b-8yhs766vov] {
    position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
    color: var(--threat);
}

/* ---- era: 3E — stone frame on parchment, ornate granite corners ---- */
.contract-card.era-3e[b-8yhs766vov] {
    border: 2px solid #4a4d52;
    background:
        linear-gradient(180deg, rgba(230,218,194,.06), transparent 40%),
        linear-gradient(180deg, var(--panel-2), var(--panel));
}
.cc-granite[b-8yhs766vov] { position: absolute; width: 30px; height: 30px; pointer-events: none; }
.cc-granite.tl[b-8yhs766vov] { left: -2px; top: -2px; }
.cc-granite.tr[b-8yhs766vov] { right: -2px; top: -2px; transform: scaleX(-1); }
.cc-granite.bl[b-8yhs766vov] { left: -2px; bottom: -2px; transform: scaleY(-1); }
.cc-granite.br[b-8yhs766vov] { right: -2px; bottom: -2px; transform: scale(-1, -1); }

/* ---- era: AD&D — leather/woodcut module cover feel ---- */
.contract-card.era-adnd[b-8yhs766vov] {
    border: 2px solid var(--line);
    box-shadow: var(--shadow), inset 0 0 0 4px #00000022;
}

/* ---- era: 5E — modern adventure book: parchment + tarnished gold ---- */
.contract-card.era-5e[b-8yhs766vov] {
    border: 1px solid var(--gold-tarnished);
    box-shadow: var(--shadow), inset 0 0 30px rgba(216,178,90,.05);
}

/* ---- golden-path beacon ---- */
.contract-card.threat-goldpath[b-8yhs766vov] {
    border-color: var(--gold);
    box-shadow: var(--shadow), 0 0 0 1px var(--gold-tarnished), inset 0 0 40px rgba(216,178,90,.07);
}
.cc-beacon[b-8yhs766vov] {
    position: absolute; top: -28px; right: -28px;
    width: 120px; height: 120px; opacity: .55; pointer-events: none;
}

/* ---------------- header ---------------- */
.cc-header[b-8yhs766vov] { display: flex; align-items: flex-start; gap: 14px; position: relative; }

.cc-badge[b-8yhs766vov] { position: relative; flex: 0 0 auto; width: 56px; height: 56px; }
.cc-badge svg[b-8yhs766vov] { width: 56px; height: 56px; display: block; }
.cc-badge-code[b-8yhs766vov] {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.05rem; letter-spacing: .04em; color: var(--gold-bright);
    text-shadow: 0 1px 2px #000; pointer-events: none;
}

.cc-title-wrap[b-8yhs766vov] { position: relative; flex: 1 1 auto; min-width: 0; min-height: 40px; }
.cc-typeband[b-8yhs766vov], .cc-trapezoid[b-8yhs766vov] {
    position: absolute; left: -4px; top: -4px; right: -4px;
    width: calc(100% + 8px); height: 100%; min-height: 56px; pointer-events: none;
    color: var(--threat);
}
.cc-trapezoid[b-8yhs766vov] { color: inherit; }
.cc-title-text[b-8yhs766vov] { position: relative; padding: 6px 8px; }

.cc-title[b-8yhs766vov] {
    font-family: var(--font-display);
    font-size: 1.25rem; line-height: 1.15; color: var(--gold-bright);
    text-shadow: 0 1px 0 #00000080;
}
.contract-card.era-adnd .cc-title[b-8yhs766vov] { letter-spacing: .04em; }
.cc-location[b-8yhs766vov] { color: var(--muted); font-size: .82rem; font-style: italic; margin-top: 1px; }
.cc-keyword[b-8yhs766vov] {
    margin-top: 4px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--threat); font-weight: 700;
}

/* ---------------- rules / divider ---------------- */
.cc-statbar[b-8yhs766vov], .cc-woodcut[b-8yhs766vov] {
    display: block; width: 100%; height: 14px; margin: 10px 0 4px; pointer-events: none;
}
.cc-statbar[b-8yhs766vov] { height: 12px; }

/* ---------------- read-aloud ---------------- */
.cc-readaloud[b-8yhs766vov] {
    position: relative;
    margin: 10px 0 12px;
    padding: 12px 14px;
    background: #14100a;
    border-radius: 6px;
    font-family: var(--font-display);
    font-style: italic; font-size: .9rem; line-height: 1.5; color: #d9c79a;
}
.contract-card.era-3e .cc-readaloud[b-8yhs766vov],
.contract-card.era-5e .cc-readaloud[b-8yhs766vov] {
    background: linear-gradient(180deg, rgba(230,218,194,.07), rgba(230,218,194,.02));
    border: 1px solid var(--line);
}
.contract-card.era-adnd .cc-readaloud[b-8yhs766vov] { background: transparent; padding: 16px 18px; }

.cc-box[b-8yhs766vov] { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.cc-box.tl[b-8yhs766vov] { left: 0; top: 0; }
.cc-box.tr[b-8yhs766vov] { right: 0; top: 0; }
.cc-box.bl[b-8yhs766vov] { left: 0; bottom: 0; }
.cc-box.br[b-8yhs766vov] { right: 0; bottom: 0; }

.cc-dropcap[b-8yhs766vov] { float: left; position: relative; width: 44px; height: 44px; margin: 1px 10px 2px 0; }
.cc-dropcap svg[b-8yhs766vov] { width: 44px; height: 44px; display: block; }
.cc-dropcap-letter[b-8yhs766vov] {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-style: normal;
    font-size: 1.7rem; color: var(--gold-bright); text-shadow: 0 1px 2px #000;
}
.cc-readaloud-text[b-8yhs766vov] { display: block; }

/* ---------------- body (caller content) ---------------- */
.cc-body[b-8yhs766vov] { position: relative; }

@media (max-width: 560px) {
    .cc-beacon[b-8yhs766vov] { width: 90px; height: 90px; top: -22px; right: -22px; }
    .cc-title[b-8yhs766vov] { font-size: 1.12rem; }
}
/* /Components/ContractsView.razor.rz.scp.css */
/* ContractsView — the module-card list. The per-card chrome lives in ContractCard.razor.css;
   this only spaces the stacked cards and keeps the embark button full-width inside a card. */

.stack > .contract-card[b-uouvogh16y] { margin: 0; }

[b-uouvogh16y] .cc-body .btn-gold { width: 100%; margin-top: 4px; }
[b-uouvogh16y] .cc-body .tags { margin: 10px 0; }
/* /Components/DebugMenuOverlay.razor.rz.scp.css */
/* DebugMenuOverlay — dev-tool-plain floating panel. Docked BOTTOM-LEFT so it never overlaps
   the bottom-right DebugOverlay trace panel. Visible only when ?debug is on. */

.dbgmenu-dock[b-gm8fx70gvt] {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 2100;
    font-size: .78rem;
}

.dbgmenu-toggle[b-gm8fx70gvt] {
    cursor: pointer;
    border: 1px solid var(--line);
    background: #0e0f12;
    color: var(--gold-bright);
    border-radius: 6px;
    padding: 7px 10px;
    box-shadow: var(--shadow);
}

.dbgmenu-toggle:hover[b-gm8fx70gvt] {
    border-color: var(--gold-bright);
}

.dbgmenu-panel[b-gm8fx70gvt] {
    width: min(340px, calc(100vw - 24px));
    max-height: min(70vh, calc(100vh - 24px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #101114;
    color: var(--ink);
    box-shadow: 0 14px 40px rgba(0,0,0,.7);
    padding: 10px;
}

.dbgmenu-head[b-gm8fx70gvt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dbgmenu-x[b-gm8fx70gvt] {
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: var(--panel-3);
    color: var(--ink);
}

.dbgmenu-scroll[b-gm8fx70gvt] {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 2px;
}

.dbgmenu-section h4[b-gm8fx70gvt] {
    margin: 0 0 6px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gold-bright);
    font-weight: 600;
}

.dbgmenu-hint[b-gm8fx70gvt] {
    color: var(--muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.dbgmenu-grid[b-gm8fx70gvt] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.dbgmenu-btn[b-gm8fx70gvt] {
    cursor: pointer;
    border: 1px solid #2b2e36;
    background: #07080a;
    color: #d8d0b8;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: .72rem;
    line-height: 1.1;
}

.dbgmenu-btn:hover[b-gm8fx70gvt] {
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}

.dbgmenu-btn.active[b-gm8fx70gvt] {
    border-color: var(--gold-bright);
    background: #1a1c22;
    color: var(--gold-bright);
}

.dbgmenu-btn.preset[b-gm8fx70gvt] {
    background: #12130f;
    border-color: #3a3d2c;
}

.dbgmenu-status[b-gm8fx70gvt] {
    border-top: 1px solid var(--line);
    padding-top: 6px;
    color: var(--player-line);
    word-break: break-word;
    white-space: pre-wrap;
}
/* /Components/DebugOverlay.razor.rz.scp.css */
.debug-dock[b-ujojtgw7q3] {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 2000;
    font-size: .78rem;
}

.debug-tab[b-ujojtgw7q3] {
    cursor: pointer;
    border: 1px solid var(--line);
    background: #0e0f12;
    color: var(--gold-bright);
    border-radius: 6px;
    padding: 7px 10px;
    box-shadow: var(--shadow);
}

.debug-panel[b-ujojtgw7q3] {
    width: min(760px, calc(100vw - 24px));
    max-height: min(620px, calc(100vh - 24px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #101114;
    color: var(--ink);
    box-shadow: 0 14px 40px rgba(0,0,0,.7);
    padding: 10px;
}

.debug-head[b-ujojtgw7q3],
.debug-actions[b-ujojtgw7q3],
.debug-flags[b-ujojtgw7q3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.debug-head[b-ujojtgw7q3] {
    justify-content: space-between;
}

.debug-x[b-ujojtgw7q3] {
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: var(--panel-3);
    color: var(--ink);
}

.debug-flags label[b-ujojtgw7q3] {
    color: var(--muted);
}

.debug-flags input[b-ujojtgw7q3] {
    min-width: 0;
    height: 30px;
    padding: 5px 8px;
    font-size: .78rem;
}

.debug-log[b-ujojtgw7q3] {
    margin: 0;
    min-height: 220px;
    max-height: 430px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: #07080a;
    border: 1px solid #2b2e36;
    border-radius: 6px;
    padding: 8px;
    color: #d8d0b8;
}

.debug-status[b-ujojtgw7q3] {
    color: var(--player-line);
}
/* /Components/DeployPlanOverlay.razor.rz.scp.css */
/* DeployPlanOverlay — per-Battle-Plan ghost overlay (Pakke 3, FEEL only).
   Restrained palette + low opacity so the plan reads at a glance without burying tokens/terrain.
   Sits BELOW the interactive .deploy-overlay (which is z-index:8) so click/hover deploy still works. */

.plan-overlay[b-acn2ellfoq] {
    position: absolute;
    inset: 0;
    z-index: 3;             /* above terrain wash (2), BELOW hero/enemy tokens (4) so it never buries them; under the click overlay (8) */
    pointer-events: none;
    overflow: visible;
}

/* ── Chase-leash reach ring — "how far they pursue" ──────────────────────── */
.plan-leash[b-acn2ellfoq] {
    fill: var(--plan-accent);
    fill-opacity: .05;
    stroke: var(--plan-accent);
    stroke-opacity: .45;
    stroke-width: 2;
    stroke-dasharray: 7 7;
    transform-box: fill-box;
    transform-origin: center;
    animation: plan-leash-breathe-b-acn2ellfoq 4.5s ease-in-out infinite;
}

/* ── Formation / cohesion zone — the shape the company holds ─────────────── */
.plan-zone[b-acn2ellfoq] {
    fill: var(--plan-accent);
    fill-opacity: .10;
    stroke: var(--plan-accent);
    stroke-opacity: .35;
    stroke-width: 1.5;
}

/* ── Advance arrows — direction + reach of the opening movement ──────────── */
.plan-arrow[b-acn2ellfoq] {
    fill: none;
    stroke: var(--plan-accent);
    stroke-opacity: .8;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
    /* Draw-on animation: dash the whole length, then reveal. */
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: plan-arrow-draw-b-acn2ellfoq .55s ease-out forwards;
    animation-delay: var(--arrow-delay, 0ms);
}
.plan-arrow.dashed[b-acn2ellfoq] {
    /* Adapt Freely — visibly broken line = "improvise". Overrides the draw dasharray once drawn. */
    stroke-opacity: .72;
    stroke-dasharray: 9 7;
    stroke-dashoffset: 0;
    animation: plan-arrow-fade-b-acn2ellfoq .5s ease-out forwards;
    animation-delay: var(--arrow-delay, 0ms);
    opacity: 0;
}
.plan-arrowhead[b-acn2ellfoq] {
    fill: var(--plan-accent);
    fill-opacity: .9;
}

/* ── Per-plan accent + intensity ─────────────────────────────────────────── */
/* Measured Advance — calm green baseline. */
.plan-measuredadvance[b-acn2ellfoq] { --plan-accent: var(--player-line); }

/* Force Contact — aggressive red, bolder arrows, hotter leash. */
.plan-forcecontact[b-acn2ellfoq] { --plan-accent: var(--enemy-line); }
.plan-forcecontact .plan-arrow[b-acn2ellfoq] { stroke-width: 4.5; stroke-opacity: .9; }
.plan-forcecontact .plan-leash[b-acn2ellfoq] { stroke-opacity: .55; }

/* Stay Together — cohesive gold, tighter & calmer. */
.plan-staytogether[b-acn2ellfoq] { --plan-accent: var(--gold-bright); }
.plan-staytogether .plan-zone[b-acn2ellfoq] { fill-opacity: .14; }
.plan-staytogether .plan-leash[b-acn2ellfoq] { stroke-dasharray: 4 6; }

/* Adapt Freely — flexible cyan, softer fill, wider zone. */
.plan-adaptfreely[b-acn2ellfoq] { --plan-accent: #8bd5ff; }
.plan-adaptfreely .plan-zone[b-acn2ellfoq] { fill-opacity: .07; stroke-dasharray: 6 6; }

/* ── Motion ──────────────────────────────────────────────────────────────── */
@keyframes plan-arrow-draw-b-acn2ellfoq {
    to { stroke-dashoffset: 0; }
}
@keyframes plan-arrow-fade-b-acn2ellfoq {
    to { opacity: 1; }
}
@keyframes plan-leash-breathe-b-acn2ellfoq {
    0%, 100% { opacity: .85; }
    50%      { opacity: .5; }
}

/* Respect reduced motion (host flag and/or media query). */
.plan-overlay.no-motion .plan-arrow[b-acn2ellfoq],
.plan-overlay.no-motion .plan-arrow.dashed[b-acn2ellfoq],
.plan-overlay.no-motion .plan-leash[b-acn2ellfoq] {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .plan-arrow[b-acn2ellfoq],
    .plan-arrow.dashed[b-acn2ellfoq],
    .plan-leash[b-acn2ellfoq] {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
    }
}
/* /Components/DossierView.razor.rz.scp.css */
/* T6 — Dossier scoped styling. Tag-themed, swappable (#18): colours come from app.css
   CSS variables; the fallen/departed states re-tint the whole sheet so a death READS as grief. */

.dossier[b-felig792bq] { animation: rise-b-felig792bq .25s ease; position: relative; }
@keyframes rise-b-felig792bq { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- SCENE ATMOSPHERE (W4): a subtle case-file backdrop behind the whole sheet ---- */
.dossier-scene[b-felig792bq] {
    position: absolute; inset: -16px -8px auto -8px; height: 540px;
    z-index: 0; pointer-events: none; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
.dossier-scene svg[b-felig792bq] { width: 100%; height: 100%; }
/* every dossier section rides above the backdrop */
.dossier > .panel[b-felig792bq],
.dossier > .dossier-grid[b-felig792bq],
.dossier > .center[b-felig792bq] { position: relative; z-index: 1; }

/* ---- the identity header reframed as a CASE FILE: leather edge + parchment plate ---- */
.dossier-casefile[b-felig792bq] {
    border: 1px solid var(--leather);
    box-shadow: var(--shadow), inset 0 0 0 1px #00000050, inset 0 0 26px #0a080680;
}
/* a stitched parchment label strip across the top of the case file */
.dossier-casefile[b-felig792bq]::before {
    content: "DOSSIER"; position: absolute; top: 10px; right: 16px;
    font-family: var(--font-display); font-size: .6rem; letter-spacing: .34em;
    color: var(--page-muted); opacity: .6;
    border: 1px solid var(--hairline); border-radius: 4px; padding: 3px 9px;
    background: #14100a;
}
.dossier-head[b-felig792bq] { position: relative; }

/* ---- identity header: portrait centerpiece beside the person (§13) ---- */
.dossier-head[b-felig792bq] {
    display: flex; align-items: center; gap: 22px;
    border-left: 4px solid var(--gold-tarnished);
    background:
        radial-gradient(220px 160px at 18% 30%, #2a211433, transparent 70%),
        linear-gradient(180deg, var(--raised), var(--ink2));
}
.dossier.fallen .dossier-head[b-felig792bq] { border-left-color: var(--blood); }
.dossier.departed .dossier-head[b-felig792bq] { border-left-color: var(--page-muted); }

/* steel-rimmed plaque around the dossier portrait; the state re-tints the frame */
.portrait-frame[b-felig792bq] {
    flex: 0 0 auto; padding: 6px; border-radius: 16px;
    background: linear-gradient(160deg, var(--steel-rim), var(--steel) 55%, var(--pit));
    box-shadow: 0 6px 18px #00000070, inset 0 0 0 1px #00000060;
    line-height: 0;
}
.portrait-frame[b-felig792bq]  .hero-portrait svg { display: block; border-radius: 11px; background: var(--ink2); }
.portrait-frame.fallen[b-felig792bq] { background: linear-gradient(160deg, #6a5040, #3a2a22 55%, var(--pit)); }
/* memorial: desaturate the fallen portrait (#43 — a remembered person, not a live one) */
.portrait-frame.fallen[b-felig792bq]  .hero-portrait svg { filter: grayscale(.85) brightness(.82) contrast(.95); }
.portrait-frame.departed[b-felig792bq] { background: linear-gradient(160deg, var(--steel), #2c2620 60%, var(--pit)); }
.portrait-frame.departed[b-felig792bq]  .hero-portrait svg { filter: saturate(.7); }

.ident[b-felig792bq] { min-width: 0; }
.dname[b-felig792bq] {
    font-family: var(--font-display); font-size: 1.85rem; line-height: 1.1; color: var(--gold-bright);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    text-shadow: 0 2px 0 #00000070;
}
.dossier.fallen .dname[b-felig792bq] { color: var(--blood); }
.epithet[b-felig792bq] { font-family: var(--font-display); font-style: italic; color: var(--gold-tarnished); margin-top: 4px; }

@media (max-width: 560px) {
    .dossier-head[b-felig792bq] { flex-direction: column; align-items: flex-start; gap: 14px; }
}

.state-chip[b-felig792bq] {
    font-family: "Trebuchet MS", sans-serif; font-size: .62rem; letter-spacing: .12em;
    text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid;
}
.state-chip.dead[b-felig792bq] { color: var(--enemy-line); border-color: #5a352c; background: #2a1713; }
.state-chip.gone[b-felig792bq] { color: var(--muted); border-color: var(--line); }

.pill.lineage[b-felig792bq] { color: #c8a8e8; border-color: #4b3a5e; }

/* ---- death / departure banners (protect the STING) ---- */
.death-banner[b-felig792bq] {
    border-left: 4px solid var(--blood); text-align: center;
    background: linear-gradient(180deg, #2a14104d, var(--ink2));
}
.death-line[b-felig792bq] { font-family: var(--font-display); font-size: 1.1rem; color: var(--blood); letter-spacing: .02em; }
.depart-banner[b-felig792bq] { border-left: 4px solid var(--page-muted); text-align: center; }
.depart-line[b-felig792bq] { font-family: var(--font-display); color: var(--page); }

/* ---- layout ---- */
.dossier-grid[b-felig792bq] {
    display: grid; grid-template-columns: 1fr 300px; gap: 16px; margin-top: 16px; align-items: start;
}
@media (max-width: 820px) { .dossier-grid[b-felig792bq] { grid-template-columns: 1fr; } }
.col-main[b-felig792bq], .col-side[b-felig792bq] { display: flex; flex-direction: column; gap: 16px; }

/* ---- memories — the emotional payload ---- */
.mem[b-felig792bq] {
    display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dotted #2c2316;
}
.mem:last-child[b-felig792bq] { border-bottom: none; }
.mem-glyph[b-felig792bq] {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
    font-size: .85rem; border: 1px solid var(--line); background: #1b160f;
}
.mem.triumph .mem-glyph[b-felig792bq] { color: var(--gold-bright); border-color: #6a5320; background: #2a2210; }
.mem.bond .mem-glyph[b-felig792bq] { color: #e89ab0; border-color: #5e3a44; background: #2a1318; }
.mem.grief .mem-glyph[b-felig792bq] { color: var(--enemy-line); border-color: #5a352c; background: #2a1713; }
.mem.scar .mem-glyph[b-felig792bq] { color: #e7b07a; border-color: #5a4632; background: #2a2013; }
.mem.milestone .mem-glyph[b-felig792bq] { color: var(--muted); }
.mem-body[b-felig792bq] { min-width: 0; }
.mem-title[b-felig792bq] { font-family: var(--font-display); color: var(--ink); line-height: 1.25; }
.mem.grief .mem-title[b-felig792bq] { color: #f0c0b2; }
.mem-meta[b-felig792bq] { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; align-items: center; }
.mem-kind[b-felig792bq] {
    font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
}
.mem-tag[b-felig792bq] { font-size: .72rem; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); }
.mem-tag.ally[b-felig792bq] { color: var(--player-line); border-color: #3c5a3c; }
.mem-tag.foe[b-felig792bq] { color: var(--enemy-line); border-color: #5a3c34; }
.mem-tag.place[b-felig792bq] { color: #d9c79a; }
.mem-tag.region[b-felig792bq] { color: var(--ward); border-color: #3a4a5e; }
.mem-tag.day[b-felig792bq] { color: var(--muted); }

/* ---- relationships ---- */
.rel[b-felig792bq] {
    display: grid; grid-template-columns: 20px auto 1fr; gap: 8px; align-items: center;
    padding: 7px 0; border-bottom: 1px dotted #2c2316;
}
.rel:last-child[b-felig792bq] { border-bottom: none; }
.rel-glyph[b-felig792bq] { text-align: center; }
.rel.bond .rel-glyph[b-felig792bq] { color: #e89ab0; }
.rel.rival .rel-glyph[b-felig792bq] { color: var(--enemy-line); }
.rel-name[b-felig792bq] { font-family: var(--font-display); color: var(--ink); }
.rel-desc[b-felig792bq] { font-size: .78rem; font-style: italic; }
.rel-bar[b-felig792bq] {
    grid-column: 1 / -1; height: 5px; border-radius: 4px; background: #2a2014; overflow: hidden; margin-top: 2px;
}
.rel-fill[b-felig792bq] { display: block; height: 100%; }
.rel-fill.bond[b-felig792bq] { background: linear-gradient(90deg, #8a4a5a, #e89ab0); }
.rel-fill.rival[b-felig792bq] { background: linear-gradient(90deg, #7a2c22, var(--enemy-line)); }

/* ---- wounds ---- */
.wound[b-felig792bq] { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dotted #2c2316; }
.wound:last-child[b-felig792bq] { border-bottom: none; }
.wound-glyph[b-felig792bq] { color: var(--wound); flex: 0 0 auto; }
.wound-name[b-felig792bq] { color: var(--wound); font-family: var(--font-display); }
.wound-desc[b-felig792bq] { font-size: .78rem; }

/* ---- side: ledger ---- */
.ledger[b-felig792bq] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.led[b-felig792bq] { display: flex; justify-content: space-between; border-bottom: 1px dotted #322819; padding-bottom: 3px; font-size: .85rem; }
.led b[b-felig792bq] { color: var(--gold); font-weight: 600; }

/* Slice N — ability scores grid */
.ability-grid[b-felig792bq] {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.ab-cell[b-felig792bq] {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 8px 6px; border-radius: 8px;
    border: 1px solid var(--hairline); background: #14100a;
}
.ab-cell.key[b-felig792bq] {
    border-color: var(--gold-tarnished);
    background: linear-gradient(180deg, #2a2210, #14100a);
    box-shadow: inset 0 0 0 1px #6a531f44;
}
.ab-k[b-felig792bq] {
    font: 600 9px/1 var(--font-display); letter-spacing: .12em;
    color: var(--muted); text-transform: uppercase;
}
.ab-v[b-felig792bq] {
    font-family: var(--font-display); font-size: 1.1rem;
    color: var(--gold-bright); line-height: 1.1;
}
.ab-m[b-felig792bq] { font-size: .72rem; color: var(--page-muted); }
.ab-cell.key .ab-k[b-felig792bq] { color: var(--gold-tarnished); }

/* ---- faith ---- */
.faith-row[b-felig792bq] { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: .82rem; }
.faith-meter[b-felig792bq] { flex: 1; height: 7px; border-radius: 5px; background: #2a2014; overflow: hidden; }
.faith-fill[b-felig792bq] { display: block; height: 100%; background: linear-gradient(90deg, #7a6420, var(--gold)); }
.faith-word[b-felig792bq] { color: var(--gold); font-family: var(--font-display); white-space: nowrap; }

/* =====================================================================================
   ARMS & ARMAMENTS — the interactive paperdoll (3E character-sheet allusion on parchment).
   A hero figure flanked by equip-slot columns (BG3 layout), a fitted stash below, then the
   battle-draughts strip. Rarity grammar is keyed locally (mirrors the Armory).
   ===================================================================================== */
.gear-panel[b-felig792bq] {
    border-left: 4px solid var(--gold-tarnished);
    background:
        radial-gradient(420px 200px at 50% -10%, #2a211433, transparent 70%),
        linear-gradient(180deg, var(--raised), var(--ink2));
}
.gear-title[b-felig792bq] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gear-subtitle[b-felig792bq] { font-size: .72rem; font-style: italic; letter-spacing: .01em; }
.gear-notice[b-felig792bq] {
    background: color-mix(in srgb, var(--wound) 20%, transparent);
    border: 1px solid var(--wound); border-radius: var(--r-sm);
    padding: 6px 10px; margin: 4px 0 10px; font-size: .82rem; color: var(--page);
}

.gear-body[b-felig792bq] { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .gear-body[b-felig792bq] { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

/* ---- the figure flanked by slot columns ---- */
.paperdoll[b-felig792bq] {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start;
}
@media (max-width: 480px) { .paperdoll[b-felig792bq] { grid-template-columns: 1fr; } }
.pd-col[b-felig792bq] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.pd-figure[b-felig792bq] { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pd-figure-frame[b-felig792bq] {
    padding: 5px; border-radius: 14px; line-height: 0;
    background: linear-gradient(160deg, var(--steel-rim), var(--steel) 55%, var(--pit));
    box-shadow: 0 6px 16px #00000070, inset 0 0 0 1px #00000060;
}
.pd-figure-frame[b-felig792bq]  .hero-portrait svg { display: block; border-radius: 10px; background: var(--ink2); }
.pd-derived[b-felig792bq] {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px;
    font-size: .76rem; color: var(--parch-dim);
}
.pd-derived span[b-felig792bq] { display: inline-flex; align-items: center; gap: 4px; }

/* ---- equip slots: parchment plaques with a rarity edge ---- */
.pd-slot[b-felig792bq] {
    position: relative;
    display: flex; align-items: flex-start; gap: 8px;
    background: #14100a; border: 1px solid var(--hairline);
    border-left: 3px solid var(--hairline);
    border-radius: var(--r-sm); padding: 7px 9px; min-height: 56px;
    transition: border-color .12s;
}
.pd-slot-body[b-felig792bq] { flex: 1; min-width: 0; }
.pd-slot.empty[b-felig792bq] { opacity: .7; border-style: dashed; }

/* ---- character-sheet tabs (unify spine) ---- */
.dossier-tabs[b-felig792bq] { display: flex; gap: 4px; margin: 14px 0 12px; flex-wrap: wrap; }
.dtab[b-felig792bq] {
    font: 700 .72rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); cursor: pointer; padding: 9px 16px;
    background: linear-gradient(180deg, var(--raised), var(--ink2));
    border: 1px solid var(--hairline); border-bottom: none;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.dtab:hover[b-felig792bq] { color: var(--parch); }
.dtab.on[b-felig792bq] {
    color: var(--gold-bright); border-color: var(--gold-tarnished);
    background: linear-gradient(180deg, #2a2114, var(--raised));
    box-shadow: inset 0 2px 0 var(--gold-tarnished);
}
.pd-slot-label[b-felig792bq] {
    font: 600 9px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 4px;
}
.pd-slot-item[b-felig792bq] { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pd-slot-item.innate[b-felig792bq] { opacity: .8; }
.pd-glyph[b-felig792bq] { font-family: var(--font-mono, monospace); font-size: 1rem; width: 16px; text-align: center; flex: 0 0 auto; }
.pd-iname[b-felig792bq] { font-weight: 600; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-bound[b-felig792bq] { color: var(--gold-bright); flex: 0 0 auto; }
.pd-slot-empty[b-felig792bq] { font-size: .78rem; padding-top: 3px; }
.pd-slot-actions[b-felig792bq] { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pd-slot-actions .btn.attuned[b-felig792bq] { background: var(--gold-tarnished); color: #1a160e; }

/* a ghost (outline-only) variant for the unequip / drop-draught buttons inside the gear panel */
.gear-panel .btn.ghost[b-felig792bq] { background: transparent; border: 1px solid var(--hairline); color: var(--muted); }
.gear-panel .btn.ghost:hover:not(:disabled)[b-felig792bq] { border-color: var(--gold); color: var(--parch); }

/* ---- the fitted stash ---- */
.gear-stash[b-felig792bq] { position: relative; display: flex; flex-direction: column; min-width: 0; }
.gs-head[b-felig792bq] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gs-title[b-felig792bq] { font-family: var(--font-display); color: var(--gold); font-size: .92rem; }
.gs-filter[b-felig792bq] { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.gs-kind[b-felig792bq] {
    background: #14100a; border: 1px solid var(--hairline); border-radius: 5px;
    min-width: 28px; height: 26px; padding: 0 7px; cursor: pointer;
    color: var(--parch-dim); font-size: .76rem;
}
.gs-kind.on[b-felig792bq] { border-color: var(--gold-tarnished); color: var(--gold-bright); background: #221a0d; }

.gs-list[b-felig792bq] { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.gs-empty[b-felig792bq] { font-size: .8rem; padding: 6px 2px; line-height: 1.4; }
.gs-row[b-felig792bq] {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    background: #14100a; border: 1px solid var(--hairline);
    border-left: 3px solid var(--hairline); border-radius: var(--r-sm); padding: 6px 9px;
    cursor: default; outline: none;
}
.gs-row:hover[b-felig792bq], .gs-row:focus-within[b-felig792bq] { border-color: var(--gold-tarnished); }
.gs-glyph[b-felig792bq] { font-family: var(--font-mono, monospace); width: 16px; text-align: center; flex: 0 0 auto; }
.gs-name[b-felig792bq] { font-weight: 600; font-size: .83rem; }
.gs-meta[b-felig792bq] { font-size: .72rem; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-row .btn[b-felig792bq] { flex: 0 0 auto; }

/* ---- the stylized ItemCard flyout (replaces native title= tooltips) ---- */
.gear-flyout[b-felig792bq] {
    position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 8px);
    transform: translateX(-50%);
    pointer-events: none; /* the card is informational; clicks pass through to the row */
    animation: ic-pop-b-felig792bq .12s ease;
}
.gear-flyout.slot[b-felig792bq] { left: 0; transform: none; }
@keyframes ic-pop-b-felig792bq { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; } }

/* the stash card is hoisted to the column (the list scrolls), pinned to the right edge, top-aligned */
.gear-flyout.stash-flyout[b-felig792bq] {
    left: auto; right: 0; bottom: auto; top: 40px; transform: none; animation: ic-pop-side-b-felig792bq .12s ease;
}
@keyframes ic-pop-side-b-felig792bq { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
@media (max-width: 480px) { .gear-flyout.stash-flyout[b-felig792bq] { right: auto; left: 0; } }

/* ---- rarity grammar (mirrors the Armory: white → green → blue) ---- */
.rar-uncommon[b-felig792bq] { border-left-color: #5fae5f !important; }
.rar-rare[b-felig792bq] { border-left-color: #5b9bd5 !important; }
.pd-iname.rar-uncommon[b-felig792bq], .gs-name.rar-uncommon[b-felig792bq] { color: #7fce7f; }
.pd-iname.rar-rare[b-felig792bq], .gs-name.rar-rare[b-felig792bq] { color: #7fb6ec; }
.pd-iname.rar-common[b-felig792bq], .gs-name.rar-common[b-felig792bq] { color: var(--ink); }

/* ---- battle draughts (consumables) ---- */
.consumables[b-felig792bq] {
    margin-top: 14px; padding-top: 12px; border-top: 1px dotted #2c2316;
}
.cons-title[b-felig792bq] {
    font: 600 10px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold-tarnished); margin-bottom: 8px;
}
.cons-row[b-felig792bq] { display: flex; align-items: center; gap: 8px; }
.cons-vials[b-felig792bq] { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vial[b-felig792bq] {
    width: 24px; height: 24px; display: grid; place-items: center;
    border: 1px solid #5a4632; border-radius: 6px; background: #2a2013;
    color: #e7b07a; font-size: .9rem;
}
.cons-more[b-felig792bq] { font-size: .8rem; }
.cons-spacer[b-felig792bq] { flex: 1; }
.cons-count[b-felig792bq] { font-family: var(--font-display); color: var(--gold-bright); min-width: 18px; text-align: center; }
.cons-note[b-felig792bq] { font-size: .72rem; margin-top: 8px; line-height: 1.4; }
/* /Components/EnemyIntelPanel.razor.rz.scp.css */
.enemy-intel[b-83qp0b6u8p] {
    width: 210px;
    background: linear-gradient(180deg, #16110bdd, #0c0a07ee);
    border: 1px solid var(--enemy-line);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 6px 18px #00000090;
    backdrop-filter: blur(2px);
    color: var(--ink, #e6dac2);
}
.enemy-intel-head[b-83qp0b6u8p] { display: flex; align-items: center; gap: 8px; }
.enemy-intel-fig[b-83qp0b6u8p] {
    width: 46px; height: 46px; flex: 0 0 auto;
    display: flex; align-items: flex-end; justify-content: center;
    overflow: hidden;
}
.enemy-intel-name[b-83qp0b6u8p] { font-family: var(--font-display); font-weight: 700; color: #ffd9cc; font-size: 15px; }
.enemy-intel-sub[b-83qp0b6u8p] { letter-spacing: .04em; text-transform: uppercase; }
.enemy-intel-stats[b-83qp0b6u8p] { display: flex; gap: 12px; margin: 6px 0; font-size: 13px; }
.intel-stat[b-83qp0b6u8p] { color: var(--parchment, #c3b291); }
.intel-plan[b-83qp0b6u8p] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 5px 0 4px;
    padding: 6px 9px;
    background: rgba(80, 18, 4, 0.60);
    border: 1px solid rgba(232, 138, 114, 0.30);
    border-radius: 5px;
}
.intel-plan-icon[b-83qp0b6u8p] { color: var(--enemy-line); flex: 0 0 auto; }
.intel-plan-label[b-83qp0b6u8p] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: #ffc5b0;
    letter-spacing: .02em;
}
.enemy-intel-traits[b-83qp0b6u8p] { display: flex; flex-wrap: wrap; gap: 4px; }
.intel-trait[b-83qp0b6u8p] {
    font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px;
    background: #3a1f18; border: 1px solid var(--enemy-line); color: #ffcdbf;
}
/* /Components/FallenCard.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   FallenCard — shared memorial card. Matches the Hall's emotional register:
   stone gravitas, candlelight warmth, desaturated portrait, dignified typography.
   Token-driven; no per-screen inline styles.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Card foundation ──────────────────────────────────────────────────────── */

.fc[b-p8pr78tynb] {
    background:
        radial-gradient(220px 120px at 6% 0%, #2a2114 22%, transparent 68%),
        linear-gradient(180deg, #1c1814, #12100c);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--gold-tarnished);
}

/* Hover shifts the left rule to a warmer gold */
.fc.clickable:hover[b-p8pr78tynb] { border-left-color: var(--gold-bright); }

/* ── Portrait wrap — desaturated fallen treatment ─────────────────────────── */

.fc-portrait-wrap[b-p8pr78tynb] {
    flex: 0 0 auto;
    padding: 3px;
    border-radius: 12px;
    line-height: 0;
    /* Funeral gradient frame: muted amber-charcoal */
    background: linear-gradient(155deg, #6a5040, #3a2a22 60%, var(--pit));
    box-shadow: 0 3px 8px #00000080, inset 0 0 0 1px #00000050;
}

/* Desaturate + dim the portrait — applies inside this component's scope */
.fc-portrait-wrap[b-p8pr78tynb]  .hero-portrait svg {
    display: block;
    border-radius: 9px;
    background: var(--ink2);
    filter: grayscale(.75) brightness(.82) contrast(.95);
}

/* ── Identity header ─────────────────────────────────────────────────────── */

.fc-head[b-p8pr78tynb] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.fc-identity[b-p8pr78tynb] { flex: 1; min-width: 0; }

.fc-name[b-p8pr78tynb] {
    font: 700 1.08rem/1.1 var(--font-display);
    color: var(--parch);
    margin-bottom: 2px;
}

.fc-title[b-p8pr78tynb] {
    font: italic var(--ts-xs)/1.3 var(--font-display);
    color: var(--gold-tarnished);
    margin-bottom: 2px;
}

.fc-class[b-p8pr78tynb] {
    font-size: var(--ts-xs);
    color: var(--muted);
}

/* ── Death inscription ────────────────────────────────────────────────────── */

.fc-death[b-p8pr78tynb] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--ts-sm);
    color: var(--blood);
    padding: 5px 0 2px;
    border-top: 1px solid #3a201880;
}

.fc-death-mark[b-p8pr78tynb] {
    flex-shrink: 0;
    font-size: .9em;
    opacity: .85;
}

.fc-death-cause[b-p8pr78tynb] {
    font: 500 var(--ts-sm)/1.2 var(--font-display);
    letter-spacing: .02em;
}

.fc-death-day[b-p8pr78tynb] {
    font-size: var(--ts-xs);
    color: var(--muted);
    opacity: .8;
    white-space: nowrap;
}

/* ── Service record ─────────────────────────────────────────────────────────── */

.fc-service[b-p8pr78tynb] {
    font-size: var(--ts-xs);
    color: var(--muted);
    opacity: .7;
    letter-spacing: .01em;
}

/* ── Defining memories ──────────────────────────────────────────────────────── */

.fc-memories[b-p8pr78tynb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--sp-2) var(--sp-2) var(--sp-1);
    background: #ffffff08;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
}

.fc-mem-label[b-p8pr78tynb] {
    font: 600 var(--ts-xs)/1 var(--font-display);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .7;
    margin-bottom: 3px;
}

.fc-mem[b-p8pr78tynb] {
    font: italic var(--ts-sm)/1.4 var(--font-display);
    color: var(--parch-dim);
}
.fc-mem.fc-grief[b-p8pr78tynb]   { color: #f0c0b2; }
.fc-mem.fc-triumph[b-p8pr78tynb] { color: var(--gold-tarnished); }
.fc-mem.fc-scar[b-p8pr78tynb]    { color: #d09090; }
.fc-mem.muted[b-p8pr78tynb]      { font-style: normal; font-size: var(--ts-xs); }

/* ── Avenged bond ─────────────────────────────────────────────────────────── */

.bond[b-p8pr78tynb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: linear-gradient(90deg, #2a211433, transparent);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    font-size: var(--ts-xs);
    color: #d9c79a;
}
.bond b[b-p8pr78tynb] { color: var(--page-bright); font-family: var(--font-display); }
.bond.avenged[b-p8pr78tynb] { border-color: #6a531f; background: linear-gradient(90deg, #3a2f1f44, transparent); }

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

.fc-inscription[b-p8pr78tynb] {
    font: 500 var(--ts-xs)/1 var(--font-display);
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
    color: var(--muted);
    opacity: .55;
    padding-top: var(--sp-1);
    border-top: 1px solid #3a201840;
}
/* /Components/FieldCampView.razor.rz.scp.css */
.field-camp-wrap[b-1l8y21s5sr] {
    max-width: 1180px;
    padding-bottom: var(--sp-6);
}

.field-camp-empty[b-1l8y21s5sr] {
    margin-top: 12vh;
}

.field-camp-hero[b-1l8y21s5sr] {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--pit);
    box-shadow: 0 18px 52px rgba(0, 0, 0, .42);
}

.field-camp-hero[b-1l8y21s5sr]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.62) 100%),
        linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.54) 100%);
}

.field-camp-hero.outcome-won[b-1l8y21s5sr] {
    border-left: 4px solid var(--player-line);
}

.field-camp-hero.outcome-lost[b-1l8y21s5sr] {
    border-left: 4px solid var(--blood);
}

.field-camp-scene[b-1l8y21s5sr] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.fc-sitter[b-1l8y21s5sr] {
    animation: fc-breathe-b-1l8y21s5sr 5.8s ease-in-out infinite;
    transform-origin: center bottom;
}

.fc-sitter:nth-of-type(2n)[b-1l8y21s5sr] {
    animation-duration: 6.6s;
    animation-delay: -1.8s;
}

@keyframes fc-breathe-b-1l8y21s5sr {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.field-camp-overlay[b-1l8y21s5sr] {
    position: relative;
    z-index: 1;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: clamp(18px, 4vw, 34px);
}

.field-camp-kicker[b-1l8y21s5sr] {
    color: var(--gold-bright);
    font: 800 12px/1 var(--font-display);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.field-camp-overlay h1[b-1l8y21s5sr] {
    margin: 4px 0 6px;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    line-height: .92;
    letter-spacing: 0;
    color: var(--parch);
    text-shadow: 0 4px 22px rgba(0,0,0,.72);
}

.field-camp-overlay p[b-1l8y21s5sr] {
    max-width: 560px;
    margin: 0;
    color: var(--parch-dim);
    font-size: var(--ts-md);
}

.field-camp-ledger[b-1l8y21s5sr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(92px, 1fr));
    gap: 8px;
    min-width: 230px;
}

.field-camp-ledger span[b-1l8y21s5sr] {
    border: 1px solid rgba(220, 190, 120, .26);
    background: rgba(10, 9, 7, .62);
    border-radius: 6px;
    padding: 9px 11px;
    color: var(--parch);
    font: 800 12px/1 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.field-camp-grid[b-1l8y21s5sr] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}

.field-camp-grid-wide[b-1l8y21s5sr] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.field-camp-panel[b-1l8y21s5sr] {
    min-width: 0;
}

.road-options[b-1l8y21s5sr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
}

.road-choice[b-1l8y21s5sr] {
    min-height: 96px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    text-align: left;
    white-space: normal;
}

.road-choice small[b-1l8y21s5sr],
.level-choice-row small[b-1l8y21s5sr],
.spare-row small[b-1l8y21s5sr],
.field-hero-row small[b-1l8y21s5sr],
.loot-chip small[b-1l8y21s5sr] {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.25;
}

.road-icon[b-1l8y21s5sr] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(0,0,0,.24);
    color: currentColor;
}

.road-icon svg[b-1l8y21s5sr] {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-camp-gate[b-1l8y21s5sr] {
    margin-top: var(--sp-2);
    padding: 9px 11px;
    border: 1px solid rgba(220, 190, 120, .22);
    border-radius: 6px;
    background: rgba(0,0,0,.2);
    color: var(--gold-bright);
    font-size: var(--ts-sm);
}

.field-actions[b-1l8y21s5sr],
.level-choice-row[b-1l8y21s5sr],
.field-loot[b-1l8y21s5sr],
.banter-stack[b-1l8y21s5sr] {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.camp-stat-list[b-1l8y21s5sr] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: var(--sp-3);
}

.camp-stat-list div[b-1l8y21s5sr] {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0,0,0,.18);
}

.camp-stat-list b[b-1l8y21s5sr] {
    display: block;
    color: var(--parch);
    font-size: 1.35rem;
    line-height: 1;
}

.camp-stat-list span[b-1l8y21s5sr] {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: var(--ts-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.field-camp-level[b-1l8y21s5sr] {
    margin-top: var(--sp-3);
    border-left: 3px solid var(--gold-bright);
}

.level-choice-row[b-1l8y21s5sr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.level-choice-row .btn[b-1l8y21s5sr] {
    white-space: normal;
    text-align: left;
}

.spare-list[b-1l8y21s5sr],
.field-roster[b-1l8y21s5sr],
.field-notes[b-1l8y21s5sr] {
    display: grid;
    gap: 8px;
}

.spare-row[b-1l8y21s5sr],
.field-hero-row[b-1l8y21s5sr],
.note-row[b-1l8y21s5sr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0,0,0,.16);
}

button.field-hero-row[b-1l8y21s5sr],
button.note-row[b-1l8y21s5sr],
.loot-chip[b-1l8y21s5sr] {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.field-hero-row:hover[b-1l8y21s5sr],
button.note-row:hover[b-1l8y21s5sr],
.loot-chip:hover[b-1l8y21s5sr] {
    border-color: var(--gold-tarnished);
    background: rgba(198, 161, 91, .08);
}

.hero-dot[b-1l8y21s5sr] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--player-line);
    box-shadow: 0 0 12px rgba(76, 175, 122, .55);
}

.hero-dot.hurt[b-1l8y21s5sr] {
    background: var(--blood);
    box-shadow: 0 0 12px rgba(174, 58, 43, .6);
}

.hero-right[b-1l8y21s5sr] {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.note-row[b-1l8y21s5sr] {
    display: grid;
    grid-template-columns: minmax(120px, .36fr) minmax(0, 1fr);
}

.note-row.good[b-1l8y21s5sr] {
    color: var(--player-line);
}

.note-row.fallen[b-1l8y21s5sr] {
    border-color: rgba(174, 58, 43, .35);
}

.note-row.memory[b-1l8y21s5sr] {
    border-color: rgba(198, 161, 91, .22);
}

.field-loot[b-1l8y21s5sr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.loot-chip[b-1l8y21s5sr] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0,0,0,.16);
}

.loot-chip > span[b-1l8y21s5sr] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(0,0,0,.24);
}

.loot-chip.rarity-rare[b-1l8y21s5sr] {
    border-color: rgba(188, 115, 255, .55);
}

.loot-chip.rarity-uncommon[b-1l8y21s5sr] {
    border-color: rgba(77, 197, 120, .42);
}

.banter-row[b-1l8y21s5sr] {
    flex: 1 1 260px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(0,0,0,.16);
}

.banter-row b[b-1l8y21s5sr] {
    display: block;
    color: var(--gold-bright);
    margin-bottom: 4px;
}

@media (max-width: 860px) {
    .field-camp-overlay[b-1l8y21s5sr] {
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-end;
    }

    .field-camp-ledger[b-1l8y21s5sr] {
        width: 100%;
        min-width: 0;
    }

    .field-camp-grid[b-1l8y21s5sr],
    .field-camp-grid-wide[b-1l8y21s5sr],
    .road-options[b-1l8y21s5sr],
    .level-choice-row[b-1l8y21s5sr] {
        grid-template-columns: 1fr;
    }

    .camp-stat-list[b-1l8y21s5sr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .note-row[b-1l8y21s5sr] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fc-sitter[b-1l8y21s5sr] {
        animation: none;
    }
}
/* /Components/Flourish.razor.rz.scp.css */
/* DECOR — <Flourish> scoped styling. The SVG carries the ornament; this just seats it. */
.flourish[b-05q4cyfxp9] {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
    pointer-events: none;
    overflow: visible;
}

/* the wax seal + tome cover read better with a little grounding shadow */
.fl-wax_seal[b-05q4cyfxp9], .fl-tome_cover[b-05q4cyfxp9] {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55));
}

/* dividers / banners centre themselves when dropped into a block */
.fl-divider[b-05q4cyfxp9], .fl-banner[b-05q4cyfxp9], .fl-cartouche[b-05q4cyfxp9], .fl-open_book[b-05q4cyfxp9] {
    display: block;
    margin-inline: auto;
}
/* /Components/GameIcon.razor.rz.scp.css */
/* W-ICONOGRAPHY — scoped css for the GameIcon component. Tint is driven by `currentColor`, so the
   icon inherits whatever `color` its container sets. Defaults to the muted ink so a bare icon reads
   on the parchment/steel UI without any extra styling. */

.game-icon[b-jj1nfp13ev] {
    display: inline-block;
    vertical-align: -0.18em;        /* sit on the text baseline beside a label */
    flex: 0 0 auto;
    color: var(--muted);            /* default tint; callers override via `color` on the parent */
    fill: none;                     /* most glyphs are stroked with currentColor */
    overflow: visible;
}

/* line-stroke icons inherit the tint via currentColor on their strokes (set inline in the symbols);
   nothing else needed here — kept minimal so callers fully control colour/size. */
/* /Components/Guildhall/CaravanYardInterior.razor.rz.scp.css */
.intel-row[b-4h0dz8ithi] { display: flex; justify-content: space-between; padding: var(--sp-1) 0; }
/* /Components/Guildhall/CommonRoomInterior.razor.rz.scp.css */
/* /Components/Guildhall/ForgeRoomInterior.razor.rz.scp.css */
/* /Components/Guildhall/GreatHallInterior.razor.rz.scp.css */
/* /Components/Guildhall/GuildhallOverview.razor.rz.scp.css */
.guildhall-scene[b-pb2fw1hmjm] {
    --gh-focus-x: 50%;
    --gh-focus-y: 48%;
    --travel-x: 0%;
    --travel-y: 0%;
    --travel-scale: 1.055;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    transform-origin: var(--gh-focus-x) var(--gh-focus-y);
}

.guildhall-scene.overview-entering[b-pb2fw1hmjm] {
    animation: gh-overview-return-b-pb2fw1hmjm 1.34s cubic-bezier(.14, .74, .12, 1) both;
}

.guildhall-scene.overview-travel[b-pb2fw1hmjm] {
    animation: gh-overview-travel-b-pb2fw1hmjm 1.32s cubic-bezier(.14, .72, .12, 1) both;
}

.guildhall-scene.overview-return-from[b-pb2fw1hmjm] {
    animation: gh-overview-return-from-room-b-pb2fw1hmjm 1.42s cubic-bezier(.14, .74, .12, 1) both;
}

@keyframes gh-overview-return-b-pb2fw1hmjm {
    0% { opacity: .80; transform: scale(1.055); filter: brightness(.88) blur(.5px); }
    62% { opacity: 1; transform: scale(1.014); filter: brightness(.98) blur(.1px); }
    100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes gh-overview-return-from-room-b-pb2fw1hmjm {
    0% { opacity: .72; transform: scale(var(--travel-scale)) translate(var(--travel-x), var(--travel-y)); filter: brightness(.86) blur(.8px); }
    58% { opacity: 1; transform: scale(1.012) translate(0, 0); filter: brightness(.98) blur(.1px); }
    100% { opacity: 1; transform: scale(1) translate(0, 0); filter: none; }
}

@keyframes gh-overview-travel-b-pb2fw1hmjm {
    0% { opacity: 1; transform: scale(1) translate(0, 0); filter: brightness(1); }
    44% { opacity: 1; transform: scale(1.014) translate(calc(var(--travel-x) * .24), calc(var(--travel-y) * .24)); filter: brightness(.99); }
    100% { opacity: .86; transform: scale(var(--travel-scale)) translate(var(--travel-x), var(--travel-y)); filter: brightness(.90) blur(.25px); }
}

.overview-focus-warroom[b-pb2fw1hmjm] { --gh-focus-x: 15%; --gh-focus-y: 56%; --travel-x: 3.4%; --travel-y: -1.6%; --travel-scale: 1.075; }
.overview-focus-common[b-pb2fw1hmjm] { --gh-focus-x: 18%; --gh-focus-y: 29%; --travel-x: 3.2%; --travel-y: 2.7%; --travel-scale: 1.078; }
.overview-focus-training[b-pb2fw1hmjm] { --gh-focus-x: 59%; --gh-focus-y: 29%; --travel-x: -1.2%; --travel-y: 2.5%; --travel-scale: 1.070; }
.overview-focus-forge[b-pb2fw1hmjm] { --gh-focus-x: 71%; --gh-focus-y: 56%; --travel-x: -2.6%; --travel-y: -1.1%; --travel-scale: 1.072; }
.overview-focus-hall[b-pb2fw1hmjm] { --gh-focus-x: 45%; --gh-focus-y: 56%; --travel-x: -0.4%; --travel-y: -1.1%; --travel-scale: 1.064; }
.overview-focus-armory[b-pb2fw1hmjm] { --gh-focus-x: 38%; --gh-focus-y: 29%; --travel-x: 1.4%; --travel-y: 2.5%; --travel-scale: 1.072; }
.overview-focus-caravanyard[b-pb2fw1hmjm] { --gh-focus-x: 90%; --gh-focus-y: 66%; --travel-x: -4.8%; --travel-y: -3.2%; --travel-scale: 1.082; }
.overview-focus-arcane[b-pb2fw1hmjm] { --gh-focus-x: 76%; --gh-focus-y: 31%; --travel-x: -3.8%; --travel-y: 2.6%; --travel-scale: 1.084; }

@media (prefers-reduced-motion: reduce) {
    .guildhall-scene.overview-entering[b-pb2fw1hmjm],
    .guildhall-scene.overview-travel[b-pb2fw1hmjm],
    .guildhall-scene.overview-return-from[b-pb2fw1hmjm] {
        animation: none !important;
    }
}
/* /Components/Guildhall/GuildhallRoomScene.razor.rz.scp.css */
.gh-scene[b-frnrnr8nwa] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
    overflow: hidden;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(214, 176, 102, 0.08);
    background: #0d0b09;
    user-select: none;
}

/* The plane holds art + fx + vignette + hotspots together, so a zoom/parallax transform keeps the
   hotspots aligned with the art (they pan WITH the room). --gh-px/--gh-py are set by the parallax JS
   on .gh-scene and inherit down here. */
.gh-scene-plane[b-frnrnr8nwa] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100vw, calc((100vh - 114px) * var(--gh-aspect, 1.777)));
    height: max(100%, calc(100vw / var(--gh-aspect, 1.777)));
    transform: translate(-50%, -50%)
        scale(var(--gh-zoom, 1))
        translate(
            var(--gh-base-x, 0px),
            calc(var(--gh-base-y, 0px) + (var(--gh-py, 0) * var(--gh-pan, 0px)))
        )
        translateX(calc(var(--gh-px, 0) * var(--gh-pan, 0px)));
    transition: transform 0.14s ease-out;
    will-change: transform;
}

/* cutaway: less cropped than before, but with stronger parallax so it feels like a real cutout model
   instead of a locked poster. */
.gh-scene-cutaway[b-frnrnr8nwa] { --gh-zoom: 0.996; --gh-pan: 34px; --gh-pan-fx: 40px; --gh-base-y: 0px; }
/* rooms: a subtler, distinct parallax so the two surfaces feel different */
.gh-scene-room[b-frnrnr8nwa] { --gh-zoom: 1.018; --gh-pan: 10px; --gh-pan-fx: 0px; }

.gh-scene-cutaway .gh-scene-plane[b-frnrnr8nwa] {
    width: max(100%, calc(100vh * var(--gh-aspect, 1.777)));
    height: max(100%, calc(100vw / var(--gh-aspect, 1.777)));
}

/* the effects layer drifts a touch more than the art → depth */
.gh-scene-cutaway .gh-scene-fx[b-frnrnr8nwa] {
    transform: translate(calc(var(--gh-px, 0) * var(--gh-pan-fx, 0px)), calc(var(--gh-py, 0) * var(--gh-pan-fx, 0px)));
    transition: transform 0.18s ease-out;
}

.gh-scene-room .gh-scene-fx[b-frnrnr8nwa] {
    transform: none;
    transition: none;
}

.gh-scene-img[b-frnrnr8nwa] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
}

.gh-scene-fx[b-frnrnr8nwa] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

/* keeps hotspot labels + overlays readable over busy art */
.gh-scene-vignette[b-frnrnr8nwa] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background:
        radial-gradient(118% 92% at 50% 42%, transparent 48%, rgba(8, 6, 4, 0.48) 100%),
        linear-gradient(180deg, rgba(8, 6, 4, 0.18), transparent 22%);
}

.gh-hotspots[b-frnrnr8nwa] {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.gh-hot[b-frnrnr8nwa] {
    position: absolute;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: inherit;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* Hover = the object/room LIGHTS UP in a soft glow. No outline, no rectangle — the glow spills past
   the hit-box (inset:-12%) and feathers out, so it reads as warm light on the thing, not a border. */
.gh-hot-rim[b-frnrnr8nwa] {
    position: absolute;
    left: var(--gh-glow-x, 50%);
    top: var(--gh-glow-y, 50%);
    width: max(var(--gh-glow-w, 168%), 74px);
    height: max(var(--gh-glow-h, 168%), 54px);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.15s cubic-bezier(0.2, 0.8, 0.3, 1);
    background: radial-gradient(closest-side,
        rgba(255, 216, 150, 0.40), rgba(255, 198, 116, 0.17) 50%, transparent 76%);
    will-change: opacity;
}

.gh-hot:hover .gh-hot-rim[b-frnrnr8nwa],
.gh-hot:focus-visible .gh-hot-rim[b-frnrnr8nwa] {
    opacity: 1;
}

/* keyboard focus still needs a visible ring (a11y) — mouse hover never shows one */
.gh-hot:focus-visible[b-frnrnr8nwa] {
    outline: 2px solid var(--gold-bright, #ecc873);
    outline-offset: 2px;
}

.gh-hot:active .gh-hot-rim[b-frnrnr8nwa],
.gh-hot-firing .gh-hot-rim[b-frnrnr8nwa] {
    opacity: 1;
}

.gh-hot-label[b-frnrnr8nwa] {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: 6px;
    background: #0d0b09ee;
    border: 1px solid var(--sponsor-accent, var(--gold, #b89255));
    color: var(--gold-bright, #ecc873);
    font-family: var(--font-display, "Cinzel", serif);
    font-size: 12px;
    letter-spacing: 0.04em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 6;
}

.gh-hot:hover .gh-hot-label[b-frnrnr8nwa],
.gh-hot:focus-visible .gh-hot-label[b-frnrnr8nwa] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* room-entry hotspots on the cutaway: a faint idle breath so rooms read as clickable */
.gh-hot-scene .gh-hot-rim[b-frnrnr8nwa] {
    opacity: 0.08;
}

.gh-hot-scene:hover .gh-hot-rim[b-frnrnr8nwa],
.gh-hot-scene:focus-visible .gh-hot-rim[b-frnrnr8nwa] {
    animation: none;
    opacity: 1;
}

.gh-hot-locked[b-frnrnr8nwa] {
    cursor: not-allowed;
}

.gh-hot[aria-disabled="true"][b-frnrnr8nwa] {
    cursor: not-allowed;
}

.gh-hot-locked .gh-hot-rim[b-frnrnr8nwa] {
    opacity: 0.28;
    background: transparent;
    border: 1px solid rgba(174, 191, 218, 0.46);
    border-radius: 16px;
    box-shadow:
        0 0 16px rgba(124, 160, 224, 0.18),
        inset 0 0 18px rgba(124, 160, 224, 0.10);
    filter: none;
}

.gh-hot-locked:hover .gh-hot-rim[b-frnrnr8nwa],
.gh-hot-locked:focus-visible .gh-hot-rim[b-frnrnr8nwa] {
    opacity: 0.44;
}

.gh-hot-locked .gh-hot-label[b-frnrnr8nwa] {
    border-color: rgba(150, 150, 160, 0.6);
    color: #b9b9c2;
}

.gh-hot-lock[b-frnrnr8nwa] {
    position: absolute;
    left: var(--gh-glow-x, 50%);
    top: var(--gh-glow-y, 50%);
    width: 18px;
    height: 14px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(219, 228, 242, 0.74);
    border-radius: 3px;
    background: rgba(7, 10, 16, 0.56);
    box-shadow: 0 0 12px rgba(124, 160, 224, 0.30);
    pointer-events: none;
    opacity: 0.72;
}

.gh-hot-lock[b-frnrnr8nwa]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: -8px;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(219, 228, 242, 0.74);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.gh-hot-lock[b-frnrnr8nwa]::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 2px;
    height: 4px;
    border-radius: 2px;
    background: rgba(219, 228, 242, 0.86);
}

/* dev hotspot debug overlay (?dev=hotspots) */
.gh-scene-debug .gh-hot[b-frnrnr8nwa] {
    background: rgba(120, 220, 255, 0.10);
    outline: 1px dashed rgba(120, 220, 255, 0.85);
}

.gh-hot-debug[b-frnrnr8nwa] {
    position: absolute;
    left: 2px;
    top: 2px;
    font-size: 9px;
    font-family: var(--font-mono, monospace);
    color: #bdecff;
    background: #062430cc;
    padding: 0 3px;
    border-radius: 3px;
    pointer-events: none;
}

/* click-feedback: brief depress before the overlay opens (anticipation); the bright-glow is on the
   merged .gh-hot:active/.gh-hot-firing .gh-hot-rim rule above */
.gh-hot-firing[b-frnrnr8nwa] {
    transform: scale(0.95);
}

/* room effects dim behind an open overlay so overlay text stays readable (handover §3) */
.gh-scene-dimmed .gh-scene-fx[b-frnrnr8nwa] { opacity: 0.35; }
.gh-scene-dimmed .gh-hot-scene .gh-hot-rim[b-frnrnr8nwa] { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .gh-hot-scene .gh-hot-rim[b-frnrnr8nwa] { animation: none; opacity: 0.14; }
    .gh-hot-rim[b-frnrnr8nwa], .gh-hot-label[b-frnrnr8nwa] { transition: none; }
    .gh-hot-firing[b-frnrnr8nwa] { transform: none; }
    /* keep the static zoom, drop the mouse-follow motion */
    .gh-scene-cutaway[b-frnrnr8nwa], .gh-scene-room[b-frnrnr8nwa] { --gh-pan: 0px; --gh-pan-fx: 0px; }
    .gh-scene-plane[b-frnrnr8nwa], .gh-scene-fx[b-frnrnr8nwa] { transition: none; animation: none !important; }
}
/* /Components/Guildhall/ShrineRoomInterior.razor.rz.scp.css */
/* /Components/Guildhall/VaultRoomInterior.razor.rz.scp.css */
/* /Components/Guildhall/WarRoomInterior.razor.rz.scp.css */
.patron-offer[b-iytk73l8l6] {
    display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) 0; border-bottom: 1px dotted var(--line);
}
.patron-offer:last-child[b-iytk73l8l6] { border-bottom: none; }
.intel-row[b-iytk73l8l6] { display: flex; justify-content: space-between; padding: var(--sp-1) 0; }
/* /Components/Guildhall/WarRoomScene.razor.rz.scp.css */
.war-room-wrap[b-hazifjluav] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* The staged dive: the camera leans over the table while vignette hides the 2D image trick. */
.war-dive-veil[b-hazifjluav] {
    position: absolute;
    inset: 0;
    z-index: 50;
    overflow: hidden;
    border-radius: 0;
    perspective: 900px;
    pointer-events: none;
}

.war-dive-veil[b-hazifjluav]::before,
.war-dive-veil[b-hazifjluav]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.war-dive-veil[b-hazifjluav]::before {
    background:
        radial-gradient(ellipse 54% 36% at 50% 61%, transparent 0 38%, rgba(9, 6, 3, .34) 66%, rgba(0, 0, 0, .88) 100%),
        linear-gradient(180deg, rgba(0,0,0,.42), transparent 28%, rgba(0,0,0,.38));
    animation: war-dive-vignette-b-hazifjluav 1350ms cubic-bezier(.4, 0, .22, 1) forwards;
}

.war-dive-veil[b-hazifjluav]::after {
    background: radial-gradient(ellipse 26% 16% at 50% 61%, rgba(236, 200, 115, .18), transparent 72%);
    mix-blend-mode: screen;
    animation: war-table-glimmer-b-hazifjluav 1350ms cubic-bezier(.4, 0, .22, 1) forwards;
}

.war-dive-img[b-hazifjluav] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 61%;
    animation: war-dive-b-hazifjluav 1350ms cubic-bezier(.42, .02, .16, 1) forwards;
}

@keyframes war-dive-b-hazifjluav {
    0%   { transform: translateY(0) scale(1) rotateX(0deg); filter: brightness(.96); opacity: 1; }
    28%  { transform: translateY(10px) scale(1.16) rotateX(3deg); filter: brightness(1.02); opacity: 1; }
    62%  { transform: translateY(26px) scale(1.72) rotateX(9deg); filter: brightness(1.08); opacity: 1; }
    100% { transform: translateY(42px) scale(2.55) rotateX(15deg); filter: brightness(.72) blur(1px); opacity: 0; }
}

.war-dive-fullveil[b-hazifjluav] {
    position: fixed;
    inset: 0;
    z-index: 55;
    pointer-events: none;
    background:
        radial-gradient(ellipse 44% 28% at 50% 58%, rgba(8, 6, 4, 0) 0%, rgba(6, 5, 3, 0.86) 72%, rgba(0, 0, 0, 1) 100%),
        radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(0, 0, 0, .58) 100%);
    opacity: 0;
    animation: war-fullveil-b-hazifjluav 1350ms cubic-bezier(0.48, 0, 0.72, 0.2) forwards;
}

@keyframes war-fullveil-b-hazifjluav {
    0% { opacity: 0; }
    62% { opacity: 0.52; }
    100% { opacity: 1; }
}

.war-dive-flash[b-hazifjluav] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 60%, rgba(245, 208, 112, 0.5), transparent 60%);
    opacity: 0;
    animation: war-dive-flash-b-hazifjluav 1350ms cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

@keyframes war-dive-flash-b-hazifjluav {
    0%, 60% { opacity: 0; }
    78% { opacity: 0.44; }
    100% { opacity: 0; }
}

@keyframes war-dive-vignette-b-hazifjluav {
    0% { opacity: .28; transform: scale(1); }
    45% { opacity: .58; transform: scale(.98); }
    100% { opacity: 1; transform: scale(.92); }
}

@keyframes war-table-glimmer-b-hazifjluav {
    0%, 32% { opacity: 0; transform: scale(.9); }
    62% { opacity: .72; transform: scale(1.18); }
    100% { opacity: 0; transform: scale(1.6); }
}

.war-mounted[b-hazifjluav] {
    width: 100%;
    height: 100%;
    min-height: 0;
    animation: war-mount-in-b-hazifjluav 300ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes war-mount-in-b-hazifjluav {
    from { opacity: 0; transform: scale(1.02); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .war-dive-img[b-hazifjluav] {
        animation: war-dive-fade-b-hazifjluav 850ms ease both;
        transform: none;
    }
    .war-dive-flash[b-hazifjluav],
    .war-dive-veil[b-hazifjluav]::before,
    .war-dive-veil[b-hazifjluav]::after { animation: none; opacity: 0; }
    .war-mounted[b-hazifjluav] { animation: war-mount-fade-b-hazifjluav 250ms ease both; }
}

@keyframes war-dive-fade-b-hazifjluav {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes war-mount-fade-b-hazifjluav {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/GuildhallView.razor.rz.scp.css */
.guildhall-container[b-qtjgjov572] {
    --gh-topbar-h: 44px;
    --gh-bottombar-h: 44px;
    --gh-focus-x: 50%;
    --gh-focus-y: 48%;
    --gh-daylight: 1;
    --gh-night: 0;
    position: relative;
    width: 100vw;
    max-width: none;
    height: 100vh;
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 48%, var(--panel) 0%, var(--bg) 62%, color-mix(in srgb, var(--bg) 62%, black) 100%);
}

.guildhall-atmosphere[b-qtjgjov572] {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        radial-gradient(110% 78% at 50% -12%, color-mix(in srgb, var(--ward) 16%, transparent), transparent 64%),
        radial-gradient(150% 130% at 50% 48%, transparent 42%, rgba(4, 7, 20, 0.52) 100%),
        linear-gradient(180deg, rgba(8, 12, 28, 0.16), rgba(4, 7, 18, 0.34));
    opacity: var(--gh-night);
    transition: opacity 1.2s ease;
}

.guildhall-atmosphere[b-qtjgjov572]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 42% at 46% -16%, color-mix(in srgb, var(--gold-bright) 14%, transparent), transparent 74%),
        radial-gradient(52% 36% at 72% 42%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 68%);
    opacity: calc(var(--gh-daylight) * 0.34);
}

.dm-strip[b-qtjgjov572] {
    position: absolute;
    top: calc(var(--gh-topbar-h) + 8px);
    left: 50%;
    width: min(980px, calc(100vw - 32px));
    transform: translateX(-50%);
    z-index: 35;
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin: 0;
    padding: 8px 12px;
    color: var(--parch-dim);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.22)),
        color-mix(in srgb, var(--panel) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
    border-radius: var(--r-sm);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    font-style: italic;
    font-size: var(--ts-sm);
}

.dm-gm-label[b-qtjgjov572] {
    flex: 0 0 auto;
    padding: 1px 6px;
    color: var(--muted);
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: var(--ts-xs);
    font-style: normal;
    letter-spacing: 0;
    text-transform: uppercase;
}

.dm-name[b-qtjgjov572] {
    flex: 0 0 auto;
    color: var(--gold);
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 700;
}

.dm-line[b-qtjgjov572] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guildhall-main[b-qtjgjov572] {
    position: absolute;
    inset: var(--gh-topbar-h) 0 0;
    z-index: 1;
    min-width: 0;
    min-height: 0;
    transition: opacity 0.28s ease;
}

.guildhall-main.gh-zooming[b-qtjgjov572] {
    opacity: 0.98;
}

.guildhall-main.gh-overview-transit[b-qtjgjov572] {
    animation: gh-cutaway-handoff-b-qtjgjov572 1.18s cubic-bezier(.16, .72, .12, 1) both;
    transform-origin: var(--gh-focus-x) var(--gh-focus-y);
}

@keyframes gh-cutaway-handoff-b-qtjgjov572 {
    0% { opacity: .78; transform: scale(1.045); }
    58% { opacity: 1; transform: scale(1.012); }
    100% { opacity: .90; transform: scale(1.038); }
}

.guildhall-room-view[b-qtjgjov572] {
    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 0;
    transform-origin: var(--gh-focus-x) var(--gh-focus-y);
}

.room-body[b-qtjgjov572] {
    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 0;
}

.guildhall-navbar[b-qtjgjov572] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 42;
    height: var(--gh-bottombar-h);
    display: grid;
    grid-template-columns: repeat(8, minmax(92px, 1fr));
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    overflow: visible;
    scrollbar-width: thin;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.30)),
        linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--bg) 98%, transparent));
    border-top: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 18%, transparent),
        0 -16px 36px rgba(0, 0, 0, 0.36);
}

.gh-nav-slot[b-qtjgjov572] {
    position: relative;
    min-width: 92px;
    min-height: 36px;
}

.gh-nav-slot[b-qtjgjov572]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 10px;
}

.gh-nav-slot .gh-nav-item[b-qtjgjov572] {
    width: 100%;
    height: 100%;
}

.gh-nav-item[b-qtjgjov572] {
    position: relative;
    min-width: 92px;
    min-height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    color: color-mix(in srgb, var(--parch-dim) 74%, transparent);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.26)),
        color-mix(in srgb, var(--panel) 72%, transparent);
    border-color: color-mix(in srgb, var(--gold) 30%, transparent);
    border-radius: var(--r-sm);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 14%, transparent),
        inset 0 -1px 0 rgba(0, 0, 0, 0.40);
    transition: transform 70ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.gh-nav-item:hover[b-qtjgjov572] {
    color: var(--gold-bright);
    border-color: color-mix(in srgb, var(--gold-bright) 58%, transparent);
    filter: brightness(1.06);
}

.gh-nav-item:active[b-qtjgjov572] {
    transform: translateY(1px);
}

.gh-nav-active[b-qtjgjov572],
.gh-nav-active:hover[b-qtjgjov572] {
    color: var(--gold-bright);
    border-color: var(--sponsor-accent, var(--gold));
    background:
        linear-gradient(180deg, rgba(230, 195, 111, 0.10), rgba(0, 0, 0, 0.24)),
        color-mix(in srgb, var(--panel-2) 84%, black);
    box-shadow:
        inset 0 0 0 1px rgba(230, 195, 111, 0.24),
        0 0 16px color-mix(in srgb, var(--sponsor-accent, var(--gold)) 26%, transparent);
}

.gh-nav-glyph[b-qtjgjov572] {
    min-width: 30px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    color: currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1;
}

.gh-nav-label[b-qtjgjov572] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.gh-nav-submenu[b-qtjgjov572] {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 48;
    width: max-content;
    min-width: 190px;
    max-width: min(260px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    color: var(--parch);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.28)),
        color-mix(in srgb, var(--panel) 96%, black);
    border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
    border-radius: var(--r-sm);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 14%, transparent),
        0 16px 34px rgba(0, 0, 0, 0.46);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.gh-nav-submenu[b-qtjgjov572]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: color-mix(in srgb, var(--panel) 96%, black);
    border-right: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}

.gh-nav-slot:hover .gh-nav-submenu[b-qtjgjov572],
.gh-nav-slot:focus-within .gh-nav-submenu[b-qtjgjov572] {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.gh-nav-slot:first-child .gh-nav-submenu[b-qtjgjov572] {
    left: 0;
    transform: translate(0, 8px);
}

.gh-nav-slot:first-child:hover .gh-nav-submenu[b-qtjgjov572],
.gh-nav-slot:first-child:focus-within .gh-nav-submenu[b-qtjgjov572] {
    transform: translate(0, 0);
}

.gh-nav-slot:first-child .gh-nav-submenu[b-qtjgjov572]::after {
    left: 34px;
}

.gh-nav-slot:last-child .gh-nav-submenu[b-qtjgjov572] {
    right: 0;
    left: auto;
    transform: translate(0, 8px);
}

.gh-nav-slot:last-child:hover .gh-nav-submenu[b-qtjgjov572],
.gh-nav-slot:last-child:focus-within .gh-nav-submenu[b-qtjgjov572] {
    transform: translate(0, 0);
}

.gh-nav-slot:last-child .gh-nav-submenu[b-qtjgjov572]::after {
    right: 34px;
    left: auto;
    transform: rotate(45deg);
}

.gh-nav-subitem[b-qtjgjov572] {
    position: relative;
    z-index: 1;
    min-height: 32px;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    color: color-mix(in srgb, var(--parch-dim) 86%, transparent);
    background: color-mix(in srgb, var(--bg) 42%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.05;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 130ms ease, border-color 130ms ease, background 130ms ease, transform 70ms ease;
}

.gh-nav-subitem:hover[b-qtjgjov572],
.gh-nav-subitem:focus-visible[b-qtjgjov572] {
    color: var(--gold-bright);
    background:
        linear-gradient(180deg, rgba(230, 195, 111, 0.08), rgba(0, 0, 0, 0.16)),
        color-mix(in srgb, var(--panel-2) 68%, transparent);
    border-color: color-mix(in srgb, var(--gold-bright) 54%, transparent);
    outline: none;
}

.gh-nav-subitem:active[b-qtjgjov572] {
    transform: translateY(1px);
}

.gh-nav-subitem:disabled[b-qtjgjov572] {
    color: color-mix(in srgb, var(--muted) 70%, transparent);
    cursor: not-allowed;
    filter: grayscale(0.4);
    opacity: 0.62;
}

.gh-nav-subitem:disabled:hover[b-qtjgjov572] {
    background: color-mix(in srgb, var(--bg) 42%, transparent);
    border-color: color-mix(in srgb, var(--gold) 20%, transparent);
}

.gh-nav-submark[b-qtjgjov572] {
    width: 6px;
    height: 6px;
    justify-self: center;
    border-radius: 50%;
    background: var(--sponsor-accent, var(--gold));
    box-shadow: 0 0 10px color-mix(in srgb, var(--sponsor-accent, var(--gold)) 48%, transparent);
}

.gh-nav-subitem:disabled .gh-nav-submark[b-qtjgjov572] {
    background: var(--muted);
    box-shadow: none;
}

.gh-nav-lock[b-qtjgjov572] {
    color: var(--muted);
    font-size: 0.56rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.gh-nav-hint[b-qtjgjov572] {
    position: fixed;
    left: 50%;
    bottom: calc(var(--gh-bottombar-h) + 8px);
    z-index: 30;
    transform: translateX(-50%);
    margin: 0;
    padding: 4px 10px;
    color: color-mix(in srgb, var(--parch-dim) 70%, transparent);
    background: color-mix(in srgb, var(--bg) 48%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
    border-radius: 999px;
    font-size: var(--ts-xs);
    text-align: center;
}

.gh-room-notice[b-qtjgjov572] {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 30;
    transform: translateX(-50%);
    padding: var(--sp-2) var(--sp-3);
    color: var(--gold-bright);
    background: color-mix(in srgb, var(--bg) 94%, black);
    border: 1px solid var(--sponsor-accent, var(--gold));
    border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    font-size: var(--ts-sm);
    cursor: pointer;
    animation: gh-notice-in-b-qtjgjov572 .22s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes gh-notice-in-b-qtjgjov572 {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes room-slide-in-b-qtjgjov572 {
    0% { opacity: .70; transform: scale(.90); }
    48% { opacity: .96; transform: scale(.972); }
    100% { opacity: 1; transform: scale(1); }
}

.room-entering[b-qtjgjov572] {
    animation: room-slide-in-b-qtjgjov572 1.44s cubic-bezier(.15, .74, .10, 1) both;
}

.gh-transition-veil[b-qtjgjov572] {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
    --gh-focus-x: 50%;
    --gh-focus-y: 48%;
    background:
        radial-gradient(circle at var(--gh-focus-x) var(--gh-focus-y), transparent 0 22%, color-mix(in srgb, var(--gold) 16%, transparent) 56%, rgba(0, 0, 0, 0.62) 100%),
        radial-gradient(circle at var(--gh-focus-x) var(--gh-focus-y), color-mix(in srgb, var(--gold-bright) 16%, transparent), transparent 36%);
    transition: opacity 1.05s cubic-bezier(.16, .72, .14, 1);
}

.gh-transition-veil[b-qtjgjov572]::after {
    content: "";
    position: absolute;
    inset: -10%;
    opacity: 0;
    background:
        radial-gradient(ellipse at var(--gh-focus-x) var(--gh-focus-y), transparent 0 30%, color-mix(in srgb, var(--gold-bright) 12%, transparent) 42%, transparent 62%);
    transition: opacity 0.8s ease;
}

.gh-transition-veil.gh-veil-on[b-qtjgjov572] {
    opacity: 0.54;
    transition-duration: 0.42s;
}

.gh-transition-veil.gh-veil-on[b-qtjgjov572]::after {
    opacity: 0.52;
}

.room-focus-warroom[b-qtjgjov572],
.gh-veil-focus-warroom[b-qtjgjov572] { --gh-focus-x: 15%; --gh-focus-y: 56%; }
.room-focus-common[b-qtjgjov572],
.gh-veil-focus-common[b-qtjgjov572] { --gh-focus-x: 18%; --gh-focus-y: 29%; }
.room-focus-training[b-qtjgjov572],
.gh-veil-focus-training[b-qtjgjov572] { --gh-focus-x: 59%; --gh-focus-y: 29%; }
.room-focus-forge[b-qtjgjov572],
.gh-veil-focus-forge[b-qtjgjov572] { --gh-focus-x: 71%; --gh-focus-y: 56%; }
.room-focus-hall[b-qtjgjov572],
.gh-veil-focus-hall[b-qtjgjov572] { --gh-focus-x: 45%; --gh-focus-y: 56%; }
.room-focus-armory[b-qtjgjov572],
.gh-veil-focus-armory[b-qtjgjov572] { --gh-focus-x: 38%; --gh-focus-y: 29%; }
.room-focus-caravanyard[b-qtjgjov572],
.gh-veil-focus-caravanyard[b-qtjgjov572] { --gh-focus-x: 90%; --gh-focus-y: 66%; }
.room-focus-arcane[b-qtjgjov572],
.gh-veil-focus-arcane[b-qtjgjov572] { --gh-focus-x: 76%; --gh-focus-y: 31%; }

@media (max-width: 760px) {
    .guildhall-container[b-qtjgjov572] {
        --gh-bottombar-h: 44px;
    }

    .guildhall-navbar[b-qtjgjov572] {
        grid-template-columns: repeat(8, minmax(78px, 1fr));
        padding-inline: 8px;
        overflow-x: auto;
        overflow-y: visible;
    }

    .gh-nav-slot[b-qtjgjov572] {
        min-width: 78px;
    }

    .gh-nav-item[b-qtjgjov572] {
        min-width: 78px;
        padding-inline: 5px;
    }

    .gh-nav-submenu[b-qtjgjov572] {
        min-width: 174px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .room-entering[b-qtjgjov572],
    .gh-room-notice[b-qtjgjov572],
    .guildhall-main.gh-overview-transit[b-qtjgjov572] {
        animation: none !important;
    }

    .gh-transition-veil[b-qtjgjov572],
    .gh-transition-veil[b-qtjgjov572]::after,
    .guildhall-atmosphere[b-qtjgjov572],
    .guildhall-atmosphere[b-qtjgjov572]::after,
    .gh-nav-item[b-qtjgjov572],
    .gh-nav-submenu[b-qtjgjov572],
    .gh-nav-subitem[b-qtjgjov572] {
        transition: none !important;
    }

    .gh-nav-item:active[b-qtjgjov572] {
        transform: none;
    }
}
/* /Components/HallView.razor.rz.scp.css */
/* T6 — Hall of the Fallen scoped styling. Memorials, not stat rows. The legend tier
   re-tints the left rule so a Legend reads louder than the merely Remembered (#18). */

/* ---- SCENE ATMOSPHERE (W4): hall-of-monuments backdrop behind the memorials ----
   The wrap becomes a positioning context; the backdrop sits behind, content above. */
.hall[b-y6z81rn77w] { position: relative; }
.hall-scene[b-y6z81rn77w] {
    position: absolute; left: 50%; top: -24px; transform: translateX(-50%);
    width: 100vw; max-width: 1280px; height: 100%; min-height: 620px;
    z-index: 0; pointer-events: none; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
    opacity: .7;
}
.hall-scene svg[b-y6z81rn77w] { width: 100%; height: 100%; }
.hall-scene .hall-candle[b-y6z81rn77w] { animation: hall-flicker-b-y6z81rn77w 6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes hall-flicker-b-y6z81rn77w { from { opacity: .6; } to { opacity: 1; } }
.hall-scene .hall-flame[b-y6z81rn77w] { animation: hall-flame-b-y6z81rn77w 2.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: bottom center; }
@keyframes hall-flame-b-y6z81rn77w { from { transform: scaleY(.9) scaleX(1.05); opacity: .85; } to { transform: scaleY(1.12) scaleX(.94); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .hall-scene .hall-candle[b-y6z81rn77w], .hall-scene .hall-flame[b-y6z81rn77w] { animation: none; }
}
/* every real hall element rides above the backdrop */
.hall > .title-banner[b-y6z81rn77w],
.hall > .hall-list[b-y6z81rn77w],
.hall > .cards[b-y6z81rn77w],
.hall > p[b-y6z81rn77w],
.hall > .panel[b-y6z81rn77w],
.hall > .center[b-y6z81rn77w] { position: relative; z-index: 1; }

.hall-list[b-y6z81rn77w] { display: flex; flex-direction: column; gap: 14px; }

.memorial[b-y6z81rn77w] {
    background:
        radial-gradient(260px 140px at 6% 0%, #2a211433, transparent 70%),
        linear-gradient(180deg, var(--raised), var(--ink2));
    border: 1px solid var(--hairline); border-left: 4px solid var(--gold-tarnished);
    border-radius: 12px; box-shadow: var(--shadow), 0 0 22px #00000060;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 8px;
    backdrop-filter: blur(1px);
}
.memorial.legend[b-y6z81rn77w] { border-left-color: var(--gold-bright); box-shadow: var(--shadow), 0 0 0 1px #6a531f inset; }
.memorial.hero[b-y6z81rn77w] { border-left-color: var(--gold-tarnished); }
.memorial.veteran[b-y6z81rn77w] { border-left-color: var(--ward); }
.memorial.remembered[b-y6z81rn77w] { border-left-color: var(--page-muted); }

.mem-head .tier-badge[b-y6z81rn77w] { margin-bottom: 3px; }

.mem-head[b-y6z81rn77w] { display: flex; align-items: center; gap: 14px; }

/* composed portrait crest — layered SVG when race/class data allows (Slice N) */
.memorial-crest[b-y6z81rn77w] {
    flex: 0 0 auto; padding: 3px; border-radius: 12px; line-height: 0;
    background: linear-gradient(155deg, #6a5040, #3a2a22 60%, var(--pit));
    box-shadow: 0 3px 7px #00000080, inset 0 0 0 1px #00000050;
}
.memorial-crest[b-y6z81rn77w]  .hero-portrait svg {
    display: block; border-radius: 9px; background: var(--ink2);
    filter: grayscale(.75) brightness(.82) contrast(.95);
}
.memorial.legend .memorial-crest[b-y6z81rn77w] { box-shadow: 0 3px 7px #00000080, 0 0 0 1px var(--gold-bright); }
.memorial-crest[b-y6z81rn77w]  .hero-portrait svg { filter: grayscale(.55) brightness(.88); }

/* fallback initial-letter medallion */
.memorial-disc[b-y6z81rn77w] {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 38% 32%, var(--skin, var(--steel)), #2a211480 78%);
    border: 2px solid var(--steel-rim);
    box-shadow: 0 3px 8px #00000080, inset 0 0 10px #00000070;
    filter: grayscale(.7) brightness(.86);
}
.memorial.legend .memorial-disc[b-y6z81rn77w] { border-color: var(--gold-bright); filter: grayscale(.45) brightness(.95); }
.memorial.hero .memorial-disc[b-y6z81rn77w] { border-color: var(--gold-tarnished); }
.disc-initial[b-y6z81rn77w] {
    font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
    color: var(--page); text-shadow: 0 1px 3px #000; opacity: .9;
}
.tier-badge[b-y6z81rn77w] {
    display: inline-block;
    font-family: var(--font-display); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); white-space: nowrap;
}
.tier-badge.legend[b-y6z81rn77w] { color: #1f1708; background: linear-gradient(180deg, #e7c570, #b88c30); border-color: #8a6a22; font-weight: 700; }
.tier-badge.hero[b-y6z81rn77w] { color: var(--gold-bright); border-color: #6a531f; }
.tier-badge.veteran[b-y6z81rn77w] { color: #b7c8e0; border-color: #3a4a5e; }
.tier-badge.remembered[b-y6z81rn77w] { color: var(--muted); }

.mem-name[b-y6z81rn77w] { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-bright); line-height: 1.1; }
.memorial.remembered .mem-name[b-y6z81rn77w] { color: var(--ink); }

.death-line[b-y6z81rn77w] { color: var(--enemy-line); font-family: var(--font-display); }
.run-context[b-y6z81rn77w] { color: #c9b994; font-style: italic; font-size: .85rem; }
.ledger-line[b-y6z81rn77w] { font-size: .8rem; }

.rem-label[b-y6z81rn77w] {
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
    margin-top: 4px; margin-bottom: 4px;
}
.rem-line[b-y6z81rn77w] { font-style: italic; color: #e6d09a; font-size: .9rem; line-height: 1.4; padding-left: 6px; border-left: 2px solid #3a2f1f; margin: 3px 0; }
.bonds[b-y6z81rn77w] { margin-top: 4px; }
.bond-line[b-y6z81rn77w] { font-size: .82rem; color: #d9c79a; }

/* Slice N — avenged bond banner + epitaph */
.bond[b-y6z81rn77w] {
    display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 8px 12px;
    background: linear-gradient(90deg, #2a211433, transparent);
    border: 1px solid var(--hairline); border-radius: 8px;
    font-size: .85rem; color: #d9c79a;
}
.bond b[b-y6z81rn77w] { color: var(--page-bright); font-family: var(--font-display); }
.bond.avenged[b-y6z81rn77w] { border-color: #6a531f; background: linear-gradient(90deg, #3a2f1f44, transparent); }
.epitaph[b-y6z81rn77w] {
    margin-top: 10px; font-size: .78rem; color: var(--muted);
    font-style: italic; letter-spacing: .03em;
}

.empty-hall[b-y6z81rn77w] { padding: 36px 18px; }
.empty-glyph[b-y6z81rn77w] { font-size: 2.4rem; color: var(--gold); opacity: .7; }
/* /Components/HeroCard.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   HeroCard — shared roster card. Token-driven: all colours via CSS vars.
   Rarity tiers, wounded/fallen visual states, archetype identity read.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Portrait crest frame (steel-rimmed plaque) ──────────────────────────── */

.crest-frame[b-8xpzv29rah] {
    flex: 0 0 auto;
    padding: 3px;
    border-radius: 12px;
    line-height: 0;
    background: linear-gradient(155deg, var(--steel-rim), var(--steel) 60%, var(--pit));
    box-shadow: 0 3px 7px #00000070, inset 0 0 0 1px #00000050;
    position: relative;
}
.crest-frame[b-8xpzv29rah]  .hero-portrait svg {
    display: block;
    border-radius: 9px;
    background: var(--ink2);
}

/* Fallen hero: desaturate + darken portrait */
.crest-frame.fallen[b-8xpzv29rah] {
    background: linear-gradient(155deg, #6a5040, #3a2a22 60%, var(--pit));
}
.crest-frame.fallen[b-8xpzv29rah]  .hero-portrait svg {
    filter: grayscale(.8) brightness(.82);
}

/* Wounded state: amber-tinted frame */
.hc-wounded .crest-frame[b-8xpzv29rah] {
    background: linear-gradient(155deg, #b06030, #6a3818 60%, var(--pit));
    box-shadow: 0 3px 7px #00000070, 0 0 0 1px #b0603040;
}

/* ── Rarity tiers ─────────────────────────────────────────────────────────── */

/* CSS vars for rarity accent — rarity-* classes set these */
.hc[b-8xpzv29rah] {
    --hc-rarity: transparent;
    --hc-rarity-glow: transparent;
    position: relative;
    overflow: hidden;
}
.rarity-uncommon[b-8xpzv29rah]  { --hc-rarity: #4a9a52;  --hc-rarity-glow: rgba(74,154,82,.14); }
.rarity-rare[b-8xpzv29rah]      { --hc-rarity: #3a72d0;  --hc-rarity-glow: rgba(58,114,208,.18); }
.rarity-epic[b-8xpzv29rah]      { --hc-rarity: #9a46d0;  --hc-rarity-glow: rgba(154,70,208,.18); }
.rarity-legendary[b-8xpzv29rah] { --hc-rarity: #e8b84a;  --hc-rarity-glow: rgba(232,184,74,.22); }

/* Rare+ cards: colored left-rule + outer glow */
.hc.rarity-rare[b-8xpzv29rah],
.hc.rarity-epic[b-8xpzv29rah],
.hc.rarity-legendary[b-8xpzv29rah] {
    border-left: 3px solid var(--hc-rarity);
    box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 18px var(--hc-rarity-glow);
}

/* Legendary: gold shimmer top-edge */
.hc.rarity-legendary[b-8xpzv29rah]::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--hc-rarity) 20%, var(--hc-rarity) 80%, transparent);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    opacity: .7;
    pointer-events: none;
}

/* Rarity ribbon (top-right badge) */
.hc-ribbon[b-8xpzv29rah] {
    position: absolute;
    top: 9px;
    right: -28px;
    z-index: 3;
    transform: rotate(38deg);
    background: var(--hc-rarity);
    color: #0a0806;
    font: 800 .48rem/1 var(--font-display);
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 2px 34px;
    box-shadow: 0 1px 4px rgba(0,0,0,.45);
}

/* ── Identity header ─────────────────────────────────────────────────────── */

.hc-identity[b-8xpzv29rah] { flex: 1; min-width: 0; }

.hc-origin[b-8xpzv29rah] {
    font-size: var(--ts-xs);
    color: var(--muted);
    opacity: .7;
}

/* Exceptional / Named flavor line */
.hc-flavor[b-8xpzv29rah] {
    font: italic var(--ts-xs)/1.4 var(--font-display);
    color: var(--gold-tarnished);
    padding: 3px 0 1px;
    opacity: .85;
}

/* ── Visual states ─────────────────────────────────────────────────────────── */

/* Wounded: amber accent line */
.hc.hc-wounded[b-8xpzv29rah] {
    border-left: 3px solid var(--wound);
}

/* Fallen: gray and dark */
.hc.hc-fallen[b-8xpzv29rah] {
    border-left: 3px solid #5a4030;
    opacity: .8;
    filter: saturate(.45);
}

/* State bar — injured or fallen quick-read */
.hc-state-bar[b-8xpzv29rah] {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--ts-xs);
    border-radius: var(--r-sm);
    padding: 4px var(--sp-2);
    line-height: 1.2;
}
.hc-state-wounded[b-8xpzv29rah] {
    background: #2a160833;
    border: 1px solid #6a381820;
    color: var(--wound);
}
.hc-state-fallen[b-8xpzv29rah] {
    background: #1a0a0633;
    border: 1px solid #5a202020;
    color: var(--blood);
}
.hc-state-icon[b-8xpzv29rah] {
    flex-shrink: 0;
    font-size: 1em;
}

/* ── Stats layout ─────────────────────────────────────────────────────────── */

/* The combat statgrid inherits from app.css .statgrid; override via .hc-stats */
.hc-stats[b-8xpzv29rah] { margin-top: 2px; }

/* Ability row — six cells, no inline styles */
.hc-abilities[b-8xpzv29rah] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    font-size: var(--ts-xs);
    border-top: 1px dotted var(--line);
    padding-top: 4px;
}
.hc-ab[b-8xpzv29rah] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
}
.hc-ab-k[b-8xpzv29rah] { color: var(--muted); font-size: .68rem; }
.hc-ab-v[b-8xpzv29rah] { color: var(--gold); font-weight: 700; }

/* Weapon line */
.hc-weapon[b-8xpzv29rah] { margin-top: 2px; }

/* ── Archetype identity row ─────────────────────────────────────────────── */

.hc-archetype-row[b-8xpzv29rah] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}
.hc-archetype-tag[b-8xpzv29rah] {
    font: 500 var(--ts-xs)/1 var(--font-display);
    letter-spacing: .08em;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 8px;
}
.hc-lineage-pill[b-8xpzv29rah] {
    color: var(--gold-tarnished);
    border-color: #6a531f50;
}

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

.hc-footer[b-8xpzv29rah] { margin-top: auto; padding-top: var(--sp-1); }

/* ── Memoir accent ─────────────────────────────────────────────────────────── */

.memline.grief[b-8xpzv29rah] { color: #f0c0b2; }

/* ── Click affordance ─────────────────────────────────────────────────────── */

/* Base hover: gold-tarnished edge (overrides the plain gold from app.css for thematic match) */
.hero-card.clickable:hover[b-8xpzv29rah] { border-color: var(--gold-tarnished); }

/* Rare+ hover: amplified rarity glow */
.hc.rarity-rare.clickable:hover[b-8xpzv29rah],
.hc.rarity-epic.clickable:hover[b-8xpzv29rah],
.hc.rarity-legendary.clickable:hover[b-8xpzv29rah] {
    box-shadow: 0 4px 18px rgba(0,0,0,.4), 0 0 24px var(--hc-rarity-glow);
}
/* /Components/HeroPanel.razor.rz.scp.css */
/* W4-A — active-combatant panel. Scoped; colours from app.css :root tokens. */

.hero-panel[b-r6fb4uwlmo] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    box-shadow: var(--shadow);
    border-top: 3px solid var(--gold);
}
.hero-panel.enemy[b-r6fb4uwlmo] { border-top-color: var(--enemy-line); }

.hp-head[b-r6fb4uwlmo] { display: flex; align-items: center; gap: 10px; }
.hp-portrait[b-r6fb4uwlmo] { flex: 0 0 auto; display: grid; place-items: center; }
.hp-name[b-r6fb4uwlmo] { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.1; color: var(--ink); }
.hero-panel.player .hp-name[b-r6fb4uwlmo] { color: var(--gold-bright); }
.hp-sub[b-r6fb4uwlmo] { color: var(--muted); font-size: .78rem; }

/* HP bar with inline label */
.hp-bar[b-r6fb4uwlmo] {
    position: relative;
    height: 18px;
    border-radius: 6px;
    background: #2a2014;
    overflow: hidden;
    border: 1px solid #00000050;
}
.hp-bar > span[b-r6fb4uwlmo] {
    display: block; height: 100%;
    background: linear-gradient(90deg, #5da64f, var(--hp));
    transition: width .35s ease;
}
.hp-bar.low > span[b-r6fb4uwlmo] { background: linear-gradient(90deg, #b8482e, var(--hp-low)); }
.hp-bar > em[b-r6fb4uwlmo] {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-style: normal; font-size: .72rem; font-weight: 700;
    color: #fff; text-shadow: 0 1px 2px #000;
    letter-spacing: .03em;
}

/* core stats row */
.hp-stats[b-r6fb4uwlmo] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hp-stat[b-r6fb4uwlmo] {
    display: flex; flex-direction: column; align-items: center;
    padding: 5px 2px; border: 1px solid var(--line); border-radius: 8px; background: #1b160f;
    cursor: help;
}
.hp-stat b[b-r6fb4uwlmo] { color: var(--gold-bright); font-size: 1.05rem; font-family: var(--font-display); }
.hp-stat span[b-r6fb4uwlmo] { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }

/* equipped weapon */
.hp-weapon[b-r6fb4uwlmo] {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: #17120b; cursor: help;
}
.wp-icon[b-r6fb4uwlmo] {
    width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center;
    font-family: var(--font-display); color: var(--steel-rim);
    border: 1px solid var(--line); border-radius: 6px; background: var(--ink2);
}
.wp-name[b-r6fb4uwlmo] { font-weight: 600; color: var(--ink); }
.wp-dmg[b-r6fb4uwlmo] { color: var(--wound); font-weight: 700; }
.wp-reach[b-r6fb4uwlmo] { color: var(--muted); font-size: .74rem; margin-left: auto; }

.hp-tagline[b-r6fb4uwlmo] { font-size: .78rem; color: var(--gold); font-style: italic; cursor: help; }

/* ability grid */
.hp-abilities[b-r6fb4uwlmo] { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.ab[b-r6fb4uwlmo] {
    display: flex; flex-direction: column; align-items: center;
    padding: 3px 0; border-radius: 6px; background: #1b160f; border: 1px solid var(--line);
    cursor: help;
}
.ab-k[b-r6fb4uwlmo] { font-size: .58rem; letter-spacing: .04em; color: var(--muted); }
.ab-v[b-r6fb4uwlmo] { font-size: .82rem; font-weight: 700; color: var(--ink); }

/* features */
.hp-section[b-r6fb4uwlmo] {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--gold); margin-bottom: 4px;
}
.hp-features[b-r6fb4uwlmo] { display: flex; flex-direction: column; gap: 4px; }
.feat[b-r6fb4uwlmo] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line); background: #1b160f;
    font-size: .82rem; cursor: help;
}
.feat.spent[b-r6fb4uwlmo] { opacity: .45; }
.feat.ready .feat-name[b-r6fb4uwlmo] { color: var(--ink); }
.feat-uses[b-r6fb4uwlmo] {
    font-size: .7rem; font-weight: 700; color: var(--gold-bright);
    border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; background: var(--ink2);
}

/* conditions */
.hp-conditions[b-r6fb4uwlmo] { display: flex; flex-wrap: wrap; gap: 5px; }
.cond[b-r6fb4uwlmo] {
    font-size: .7rem; padding: 2px 8px; border-radius: 999px; cursor: help;
    color: var(--wound); border: 1px solid #5a3c2c; background: #2a1c12;
}
/* /Components/HeroPortrait.razor.rz.scp.css */
/* W4-B — HeroPortrait scoped styles. The SVG carries the figure; this frames it (ART_BIBLE §4).
   Conservative improvements only: rim-light on round medallions, dossier frame depth.
   All Size variants + params kept intact; no new mandatory params. */

.hero-portrait[b-d7dnb8glco] {
    display: inline-block;
    line-height: 0;
    position: relative;
}

.hero-portrait svg[b-d7dnb8glco] {
    display: block;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
.hero-portrait svg.round[b-d7dnb8glco] { border-radius: 50%; }

/* ── Token/crest: tight medallion — must identify at 40px (ART_BIBLE §4) ── */
.hero-portrait.sz-token svg[b-d7dnb8glco],
.hero-portrait.sz-crest svg[b-d7dnb8glco] {
    background: transparent;
}

/* Rim-light ring — a thin luminous accent just inside the circle border.
   Applied as a pseudo-element overlay on the portrait span so it renders
   on top of the SVG without touching the SVG itself.
   Gated on a round inner SVG so the square (plaque) variant doesn't get a circular highlight. */
.hero-portrait.sz-crest:has(svg.round)[b-d7dnb8glco]::after,
.hero-portrait.sz-token:has(svg.round)[b-d7dnb8glco]::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    /* inner highlight: a subtle arc of reflected light at top-left */
    background: radial-gradient(ellipse 70% 60% at 30% 20%,
        rgba(200,190,160,.12) 0%,
        transparent 65%);
    pointer-events: none;
    z-index: 1;
}

/* Token size — tightest read; keep any decoration very subtle */
.hero-portrait.sz-token:has(svg.round)[b-d7dnb8glco]::after { inset: 2px; opacity: .6; }

/* Square crest (deploy plaque): a soft top-left highlight matched to the rounded-square frame. */
.hero-portrait.sz-crest:has(svg:not(.round))[b-d7dnb8glco]::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 12px;
    background: radial-gradient(ellipse 70% 60% at 30% 20%,
        rgba(200,190,160,.12) 0%,
        transparent 65%);
    pointer-events: none;
    z-index: 1;
}

/* ── Dossier: framed bust — reads as the centrepiece case-file portrait ── */
.hero-portrait.sz-dossier svg[b-d7dnb8glco] {
    border-radius: 10px;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.65));
}

/* ── Card-art bleed: a frameless bust that dissolves into the host card's parchment ──
   Self-contained here (no cross-component :deep) and specific enough to beat the base svg filter.
   The feathered edge + parchment duotone are pure SVG/CSS — no JS, technology-independent. */
.hero-portrait.sz-bleed[b-d7dnb8glco] {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}
.hero-portrait.sz-bleed .hp-bleed-svg[b-d7dnb8glco],
.hero-portrait.sz-bleed img[b-d7dnb8glco] {
    display: block;
    width: 100%;
    height: 100%;
    /* feather the LEFT + BOTTOM edges so the figure melts into the parchment — no hard frame */
    -webkit-mask-image:
        linear-gradient(to left, #000 50%, transparent 100%),
        linear-gradient(to bottom, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to left, #000 50%, transparent 100%),
        linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-composite: intersect;
    /* parchment duotone — pull the procedural tints toward an aged ink-wash so it sits IN the card */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.32)) saturate(0.6) sepia(0.26) contrast(1.05) brightness(1.02);
    opacity: 0.96;
}

/* Subtle warm vignette on the dossier portrait — deepens the "framed painting" feel */
.hero-portrait.sz-dossier[b-d7dnb8glco]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: radial-gradient(ellipse 90% 75% at 50% 105%,
        rgba(0,0,0,.22) 0%,
        transparent 65%);
    pointer-events: none;
    z-index: 1;
}
/* /Components/InitiativeRibbon.razor.rz.scp.css */
/* W4-A — initiative ribbon (ART_BIBLE §8). Scoped; colours come from app.css :root tokens. */

.ribbon[b-ayhnaiv7nf] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    box-shadow: var(--shadow);
}

.round-pip[b-ayhnaiv7nf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 58px;
    padding: 4px 10px;
    border-right: 1px solid var(--line);
}
.round-word[b-ayhnaiv7nf] {
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.round-num[b-ayhnaiv7nf] {
    font-family: var(--font-display);
    font-size: 1.7rem;
    line-height: 1;
    color: var(--gold-bright);
}

.ribbon-strip[b-ayhnaiv7nf] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 4px;
    flex: 1 1 auto;
}

.ribbon-slot[b-ayhnaiv7nf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    padding: 2px 4px 0;
    border-radius: 10px;
    opacity: .9;
    transition: opacity .2s, transform .2s;
}
.ribbon-slot .slot-token[b-ayhnaiv7nf] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 78px;
    overflow: visible;
}
.ribbon-slot .slot-name[b-ayhnaiv7nf] {
    font-size: .68rem;
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--page-muted);
}
.ribbon-slot.player .slot-name[b-ayhnaiv7nf] { color: var(--player-line); }
.ribbon-slot.enemy .slot-name[b-ayhnaiv7nf] { color: var(--enemy-line); }

/* upcoming actors recede */
.ribbon-slot.upcoming[b-ayhnaiv7nf] { opacity: .55; }
.ribbon-slot.upcoming .slot-token[b-ayhnaiv7nf] { transform: scale(.86); }

/* the active combatant is raised + named, ahead of the strip */
.ribbon-slot.active[b-ayhnaiv7nf] {
    opacity: 1;
    transform: translateY(-4px);
    background: #2a211433;
    box-shadow: 0 0 0 1px var(--gold) inset;
}
.ribbon-slot.active .slot-name[b-ayhnaiv7nf] {
    color: var(--gold-bright);
    font-weight: 700;
}
.slot-now[b-ayhnaiv7nf] {
    font-size: .56rem;
    letter-spacing: .12em;
    color: var(--gold-bright);
    background: #2a2114;
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 0 6px;
    margin-top: 1px;
}

.ribbon-slot.fallen[b-ayhnaiv7nf] { opacity: .3; filter: grayscale(1); }
.ribbon-slot.fallen .slot-name[b-ayhnaiv7nf] { text-decoration: line-through; }

/* W5-A — a ribbon portrait is click-to-inspect (read-only character sheet) */
.ribbon-slot.inspectable[b-ayhnaiv7nf] { cursor: pointer; position: relative; }
.ribbon-slot.inspectable:hover[b-ayhnaiv7nf] { opacity: 1; }
.ribbon-slot.inspectable:hover .slot-token[b-ayhnaiv7nf] { transform: scale(1.06); }
.ribbon-slot.inspectable .slot-info[b-ayhnaiv7nf] {
    position: absolute;
    top: 0; right: 2px;
    font-size: .62rem;
    color: var(--muted);
    opacity: 0;
    transition: opacity .12s, color .12s;
    pointer-events: none;
}
.ribbon-slot.inspectable:hover .slot-info[b-ayhnaiv7nf] { opacity: 1; color: var(--gold-bright); }
/* /Components/ItemCard.razor.rz.scp.css */
/* ItemCard — a 3E "boxed item entry" rendered on the app's parchment grammar. The card is a small
   stat-block: a glyph plaque, a rarity-keyed name header, then the type / stat / attunement / flavor /
   provenance stacked like an old monster-manual entry. Colours come from app.css variables so it stays
   cohesive with the rest of the UI; rarity is keyed locally (mirrors ArmoryView's grammar). */

.item-card[b-e3eclsr2vt] {
    --rar: var(--gold-tarnished);
    width: 250px; max-width: 78vw;
    background:
        linear-gradient(180deg, #1d1810 0%, #16120c 100%);
    border: 1px solid var(--leather);
    border-left: 3px solid var(--rar);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow), inset 0 0 0 1px #00000050, inset 0 0 22px #0a080680;
    padding: 10px 12px 11px;
    font-size: var(--ts-sm);
    color: var(--parch-dim);
    line-height: 1.4;
}

/* rarity grammar — white → green → blue (purple/gold reserved), mirrors the Armory */
.item-card.rar-common[b-e3eclsr2vt]   { --rar: var(--line); }
.item-card.rar-uncommon[b-e3eclsr2vt] { --rar: #5fae5f; }
.item-card.rar-rare[b-e3eclsr2vt]     { --rar: #5b9bd5; }

.ic-head[b-e3eclsr2vt] { display: flex; align-items: center; gap: 9px; }
.ic-glyph[b-e3eclsr2vt] {
    flex: 0 0 auto; width: 30px; height: 30px;
    display: grid; place-items: center;
    font-family: var(--font-mono, "Courier New", monospace); font-size: 1.05rem;
    border: 1px solid var(--rar); border-radius: 5px;
    background: #0e0b07; color: var(--rar);
}
.ic-headtext[b-e3eclsr2vt] { min-width: 0; }
.ic-name[b-e3eclsr2vt] {
    font-family: var(--font-display); font-size: .98rem; line-height: 1.12;
    color: var(--gold-bright);
}
.ic-name.rar-common[b-e3eclsr2vt]   { color: var(--ink); }
.ic-name.rar-uncommon[b-e3eclsr2vt] { color: #7fce7f; }
.ic-name.rar-rare[b-e3eclsr2vt]     { color: #7fb6ec; }
.ic-sub[b-e3eclsr2vt] {
    font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin-top: 2px;
}

/* a thin tarnished rule under the header, then the body lines — the 3E "entry divider" */
.ic-stat[b-e3eclsr2vt] {
    margin-top: 8px; padding-top: 7px;
    border-top: 1px solid var(--hairline);
    color: var(--parch); font-size: var(--ts-sm);
}
.ic-attune[b-e3eclsr2vt] {
    margin-top: 5px; font-size: var(--ts-xs);
    color: var(--gold); font-style: italic;
}
.ic-attune-note[b-e3eclsr2vt] { color: var(--muted); font-style: normal; }
.ic-bound[b-e3eclsr2vt] { margin-top: 5px; font-size: var(--ts-xs); color: var(--gold-bright); font-style: italic; }

.ic-flavor[b-e3eclsr2vt] {
    margin-top: 8px; padding-top: 7px;
    border-top: 1px dotted #2c2316;
    font-style: italic; font-size: var(--ts-xs); color: var(--page-faded);
}
.ic-prov[b-e3eclsr2vt] {
    margin-top: 6px; font-size: var(--ts-xs); color: var(--muted);
    letter-spacing: .01em;
}
/* /Components/MenuView.razor.rz.scp.css */
/* T6 — company ledger / menu scoped styling. */

.ledger-summary[b-dgqsraeu5m] { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.lsum[b-dgqsraeu5m] { display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.lsum .num[b-dgqsraeu5m] { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); line-height: 1; }
.lsum .num.gold[b-dgqsraeu5m] { color: var(--gold-bright); }
.lsum .num.danger[b-dgqsraeu5m] { color: var(--blood); }
.lsum .muted[b-dgqsraeu5m] { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; }

/* departed — remembered, not mourned; portrait crest beside the name */
.leavers[b-dgqsraeu5m] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.leaver[b-dgqsraeu5m] {
    display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
    background: linear-gradient(180deg, var(--raised), var(--ink2));
    border: 1px solid var(--hairline); border-left: 3px solid var(--page-muted);
    border-radius: 9px; padding: 10px 12px; color: var(--ink); font-family: inherit;
    transition: border-color .15s, transform .08s;
}
.leaver:hover[b-dgqsraeu5m] { border-color: var(--gold-tarnished); transform: translateY(-1px); }
.leaver-crest[b-dgqsraeu5m] {
    flex: 0 0 auto; padding: 2px; border-radius: 10px; line-height: 0;
    background: linear-gradient(155deg, var(--steel), #2c2620 60%, var(--pit));
}
.leaver-crest[b-dgqsraeu5m]  .hero-portrait svg { display: block; border-radius: 8px; background: var(--ink2); filter: saturate(.75); }
.leaver-text[b-dgqsraeu5m] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leaver-name[b-dgqsraeu5m] { font-family: var(--font-display); font-size: 1rem; }
.leaver-why[b-dgqsraeu5m] { font-size: .76rem; font-style: italic; margin-top: 3px; }

/* hall call-to-action */
.hall-cta[b-dgqsraeu5m] {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    cursor: pointer; border-left: 4px solid var(--gold-tarnished);
    transition: border-color .15s, transform .08s, filter .15s;
}
.hall-cta:hover[b-dgqsraeu5m] { transform: translateY(-1px); filter: brightness(1.06); border-left-color: var(--gold-bright); }
.hall-cta .section-title[b-dgqsraeu5m] { text-transform: uppercase; }
.hall-glyph[b-dgqsraeu5m] { display: flex; align-items: center; color: var(--gold-tarnished); opacity: .85; }
.charter-cta .btn[b-dgqsraeu5m] { display: inline-flex; align-items: center; gap: 8px; }
.charter-cta .btn-icon[b-dgqsraeu5m] { vertical-align: middle; }

/* =====================================================================
   THE TOME — menu-as-leather-book skin (ART_BIBLE §11). Decorative only;
   sits over the existing ledger layout without changing its behaviour.
   ===================================================================== */

/* the whole view reads as a page on dark leather */
.tome-view[b-dgqsraeu5m] { position: relative; }

/* candle / closed cover / quill dressing flanking the title (large screens only) */
.tome-dressing[b-dgqsraeu5m] {
    display: flex; align-items: flex-end; justify-content: center; gap: 26px;
    margin-bottom: 4px; opacity: .9;
}
.tome-dressing[b-dgqsraeu5m]  .fl-tome_cover { filter: drop-shadow(0 8px 18px rgba(0,0,0,.6)); }
@media (max-width: 720px) { .tome-dressing[b-dgqsraeu5m] { display: none; } }

/* the title banner gets a filigree divider beneath it */
.tome-title[b-dgqsraeu5m] { position: relative; }
.tome-divider[b-dgqsraeu5m] { margin-top: 10px; }
.tome-divider[b-dgqsraeu5m]  .flourish { opacity: .92; }

/* corner flourishes on the roster panel — absolutely placed, mirrored per corner */
.tome-panel[b-dgqsraeu5m] { position: relative; }
.tome-corner[b-dgqsraeu5m] {
    position: absolute; line-height: 0; pointer-events: none; opacity: .7; z-index: 1;
}
.tome-corner[b-dgqsraeu5m]  .flourish { width: 46px; height: 46px; }
.tc-tl[b-dgqsraeu5m] { top: 4px;    left: 4px; }
.tc-tr[b-dgqsraeu5m] { top: 4px;    right: 4px;  transform: scaleX(-1); }
.tc-bl[b-dgqsraeu5m] { bottom: 4px; left: 4px;   transform: scaleY(-1); }
.tc-br[b-dgqsraeu5m] { bottom: 4px; right: 4px;  transform: scale(-1, -1); }

/* the Hall CTA gets a hanging blood-red ribbon bookmark on its leading edge */
.hall-cta[b-dgqsraeu5m] { position: relative; overflow: visible; }
.cta-ribbon[b-dgqsraeu5m] {
    position: absolute; top: -10px; left: 22px; line-height: 0; pointer-events: none;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
}

/* company name heading — display-font, gold ink, measured spacing */
.menu-company-name[b-dgqsraeu5m] {
    font-family: var(--font-display, Georgia, serif);
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--ink, #1a140c);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.08);
    margin: 0;
    line-height: 1.1;
}

/* company status tag — muted italic, inline descriptor */
.menu-company-tag[b-dgqsraeu5m] {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--page-muted, #7a6848);
    letter-spacing: 0.01em;
    margin-top: 3px;
    line-height: 1.3;
}

/* fallen count gets a blood-red ink to mark the weight */
.lsum--fallen .num[b-dgqsraeu5m] { color: var(--blood, #8b1a1a); }
.lsum--fallen .muted[b-dgqsraeu5m] { color: var(--blood, #8b1a1a); opacity: 0.7; }

/* the founding action — a wax seal pressed beside the gold "found a new company" button */
.charter-cta[b-dgqsraeu5m] { position: relative; display: inline-flex; align-items: center; gap: 12px;
    justify-content: center; width: 100%; }
.charter-seal[b-dgqsraeu5m] { line-height: 0; pointer-events: none; }
@media (max-width: 520px) { .charter-seal[b-dgqsraeu5m] { display: none; } }

/* action group — stacks found/return vertically with breathing room */
.charter-cta-actions[b-dgqsraeu5m] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* "Found a new company" — the primary gold CTA */
.charter-btn-found[b-dgqsraeu5m] {
    font-family: var(--font-ui, "Jost", sans-serif);
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 9px 20px;
    border-radius: 3px;
    border: 1.5px solid var(--pit, #14110b);
    background: linear-gradient(180deg, var(--gold-bright, #ecc873), var(--gold-tarnished, #caa24e));
    color: var(--pit, #14110b);
    box-shadow: 0 2px 0 #7a5820, 0 1px 0 rgba(255,240,200,.5) inset, 0 3px 8px rgba(0,0,0,.25);
    transition: filter .12s ease, transform .08s ease, box-shadow .08s ease;
}
.charter-btn-found:hover[b-dgqsraeu5m] { filter: brightness(1.06); }
.charter-btn-found:active[b-dgqsraeu5m] { transform: translateY(1px); box-shadow: 0 1px 0 #7a5820; }

/* "Return to the company" — secondary ghost link */
.charter-btn-return[b-dgqsraeu5m] {
    background: transparent;
    border: none;
    font-family: var(--font-ui, "Jost", sans-serif);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gold-tarnished, #9a7e40);
    cursor: pointer;
    padding: 2px 0;
    transition: color .12s ease;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}
.charter-btn-return:hover[b-dgqsraeu5m] {
    color: var(--gold-bright, #ecc873);
    text-decoration-color: currentColor;
}
/* /Components/ModuleCover.razor.rz.scp.css */
/* ModuleCover — procedural D&D module-cover thumbnail.
   Pure presentation; no layout side-effects outside the component.
   Palette references app.css :root vars; --threat is set inline per-cover.

   DIEGETIC BOUNDARY (owner-locked): these covers are META surfaces.
   They appear on ContractCard, DeployView briefing, and OverlandMap list —
   NEVER scattered on the diegetic overland map terrain. */

/* ── Container ─────────────────────────────────────────────────── */

.module-cover[b-we32oxf1gw] {
    position: relative;
    display: inline-block;
    overflow: hidden;
    flex-shrink: 0;
    vertical-align: top;
    border-radius: 5px;
    box-shadow: 0 4px 16px rgba(0,0,0,.55);
}

/* ── Sizes ──────────────────────────────────────────────────────── */

.mc-size-thumb[b-we32oxf1gw] {
    width: 90px;
    height: 120px;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0,0,0,.5);
}

.mc-size-full[b-we32oxf1gw] {
    width: 210px;
    height: 280px;
    border-radius: 7px;
    box-shadow: 0 6px 24px rgba(0,0,0,.65);
}

/* "card" — full-width landscape strip for ContractCard top zone.
   The portrait SVG crops to show the illustration zone (creature head/shoulders
   in the dark atmospheric background). Title text is shown in the HTML overlay.
   P1-13: Era borders are suppressed so the embedded cover never double-frames
   inside the card (card wrapper provides its own border/rounding). */
.mc-size-card[b-we32oxf1gw] {
    display: block;
    width: 100%;
    height: 130px;
    border-radius: 0;         /* card wrapper provides rounding */
    border: none !important;
    box-shadow: none !important;
}
.mc-size-card .mc-text[b-we32oxf1gw] {
    padding: 6px 10px 8px;
}
/* Show title text in card size (the landscape strip acts as a header with text) */
.mc-size-card .mc-title-str[b-we32oxf1gw] {
    display: block;
    font-size: .92rem;
}
.mc-size-card .mc-threat-label[b-we32oxf1gw] {
    display: block;
    font-size: .62rem;
}

/* ── Artwork SVG ─────────────────────────────────────────────────── */

.mc-art[b-we32oxf1gw] {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Era border treatments (suppressed by !important when card-embedded) ── */

.mc-era-adnd[b-we32oxf1gw] {
    border: 2px solid #2a1c10;
    box-shadow: 0 4px 16px rgba(0,0,0,.55), inset 0 0 0 3px #00000024;
}
.mc-era-3e[b-we32oxf1gw] {
    border: 2px solid #4a4d52;
}
.mc-era-4e[b-we32oxf1gw] {
    border: 2px solid transparent;
    border-left: 4px solid var(--threat);
}
.mc-era-5e[b-we32oxf1gw] {
    border: 1px solid var(--gold-tarnished);
    box-shadow: 0 4px 16px rgba(0,0,0,.55), inset 0 0 20px rgba(216,178,90,.05);
}

/* ── Threat accent pulse (goldpath only) — P1-14 ─────────────────── */
/* Static base: brighter 2px ring + warm glow. PRM fallback below.   */
.mc-threat-goldpath[b-we32oxf1gw] {
    box-shadow: 0 4px 16px rgba(0,0,0,.55),
                0 0 0 2px var(--gold),
                0 0 14px 3px rgba(200,168,64,.38);
    animation: goldpath-pulse-b-we32oxf1gw 3.2s ease-in-out infinite;
}

@keyframes goldpath-pulse-b-we32oxf1gw {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(0,0,0,.55),
                    0 0 0 2px var(--gold),
                    0 0 12px 2px rgba(200,168,64,.32);
    }
    50% {
        box-shadow: 0 4px 16px rgba(0,0,0,.55),
                    0 0 0 3px var(--gold-bright),
                    0 0 24px 8px rgba(200,168,64,.58);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-threat-goldpath[b-we32oxf1gw] {
        animation: none;
        box-shadow: 0 4px 16px rgba(0,0,0,.55),
                    0 0 0 2px var(--gold-bright),
                    0 0 18px 5px rgba(200,168,64,.45);
    }
}

/* ── Text overlay ────────────────────────────────────────────────── */

.mc-text[b-we32oxf1gw] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 7px 8px 6px;
    pointer-events: none;
    user-select: none;
}

/* thumb: compact overlay — code only, title hidden */
.mc-size-thumb .mc-text[b-we32oxf1gw] {
    padding: 4px 5px 4px;
}

/* full: generous padding with legible title */
.mc-size-full .mc-text[b-we32oxf1gw] {
    padding: 10px 14px 12px;
}

.mc-code[b-we32oxf1gw] {
    font-family: var(--font-display);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-tarnished);
    opacity: .9;
    line-height: 1;
    margin-bottom: 2px;
}
.mc-size-full .mc-code[b-we32oxf1gw] {
    font-size: .78rem;
    letter-spacing: .1em;
    margin-bottom: 4px;
}

/* For AD&D era, the code rides above the trapezoid — slightly larger */
.mc-text-adnd .mc-code[b-we32oxf1gw] {
    color: var(--gold-bright);
    opacity: .95;
}

.mc-title-str[b-we32oxf1gw] {
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--gold-bright);
    text-shadow: 0 1px 4px #000, 0 0 8px #00000080;
    letter-spacing: .02em;
}
.mc-size-full .mc-title-str[b-we32oxf1gw] {
    font-size: 1.05rem;
    line-height: 1.22;
    letter-spacing: .03em;
}

.mc-threat-label[b-we32oxf1gw] {
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--threat);
    font-weight: 600;
    margin-top: 3px;
    opacity: .85;
}
.mc-size-full .mc-threat-label[b-we32oxf1gw] {
    font-size: .68rem;
    margin-top: 4px;
}

/* ── Thumb: hide title text (only code visible at small size) ───── */
.mc-size-thumb .mc-title-str[b-we32oxf1gw],
.mc-size-thumb .mc-threat-label[b-we32oxf1gw] {
    display: none;
}

/* ── prefers-reduced-motion: goldpath pulse gated above; grain is static ── */
/* /Components/NarratorPanel.razor.rz.scp.css */
/* NarratorPanel — the Rimworld-style narrator head (ART_BIBLE §8). A persistent frame strip that
   contextualizes the watched fight. Scoped. Reads SVG-simple compatibility tokens; tone drives the edge. */

.narrator-panel[b-hvq62zje8j] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(180deg, var(--panel) 0%, var(--pit) 100%);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold-tarnished);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
    min-height: 56px;
    transition: border-left-color 220ms ease;
}

.narrator-head[b-hvq62zje8j] {
    flex: 0 0 auto;
    filter: drop-shadow(0 0 4px var(--gold-tarnished));
}

.narrator-voice[b-hvq62zje8j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.narrator-label[b-hvq62zje8j] {
    font: 600 11px/1 var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-tarnished);
}

.narrator-line[b-hvq62zje8j] {
    font: italic 15px/1.4 var(--font-display);
    color: var(--ink);
}
.narrator-line.muted[b-hvq62zje8j] { color: var(--muted); }

/* tone tints the left edge — the DM head's mood */
.narrator-panel.tone-default[b-hvq62zje8j] { border-left-color: var(--gold-tarnished); }
.narrator-panel.tone-fierce[b-hvq62zje8j],
.narrator-panel.tone-wild[b-hvq62zje8j],
.narrator-panel.tone-triumphant[b-hvq62zje8j] { border-left-color: var(--gold-bright); }
.narrator-panel.tone-afraid[b-hvq62zje8j],
.narrator-panel.tone-panicked[b-hvq62zje8j],
.narrator-panel.tone-grim[b-hvq62zje8j] { border-left-color: var(--blood); }
.narrator-panel.tone-wry[b-hvq62zje8j],
.narrator-panel.tone-smug[b-hvq62zje8j] { border-left-color: var(--steel-rim); }

/* Fix #3: pivotal-beat border-pulse. Applied for ~900ms when a grave/triumph/nerve-break beat lands.
   A brief outward heartbeat on the left border — the panel "reacts" to the moment. */
.narrator-panel.pivotal[b-hvq62zje8j] {
    animation: narrator-pivot-pulse-b-hvq62zje8j .9s ease-out forwards;
}
@keyframes narrator-pivot-pulse-b-hvq62zje8j {
    0%   { box-shadow: 0 2px 8px rgba(0,0,0,.5); }
    18%  { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 18px 3px var(--gold-tarnished); }
    55%  { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 10px 1px var(--gold-tarnished); }
    100% { box-shadow: 0 2px 8px rgba(0,0,0,.5); }
}
/* For grim/panicked tone: pulse blood-red instead */
.narrator-panel.pivotal.tone-grim[b-hvq62zje8j],
.narrator-panel.pivotal.tone-afraid[b-hvq62zje8j],
.narrator-panel.pivotal.tone-panicked[b-hvq62zje8j] {
    animation: narrator-pivot-pulse-grim-b-hvq62zje8j .9s ease-out forwards;
}
@keyframes narrator-pivot-pulse-grim-b-hvq62zje8j {
    0%   { box-shadow: 0 2px 8px rgba(0,0,0,.5); }
    18%  { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 18px 3px var(--blood); }
    55%  { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 10px 1px var(--blood); }
    100% { box-shadow: 0 2px 8px rgba(0,0,0,.5); }
}
@media (prefers-reduced-motion: reduce) {
    .narrator-panel.pivotal[b-hvq62zje8j] { animation: none; }
}
/* /Components/Overland/OverlandMapSurface.razor.rz.scp.css */
/* The clipped table window. JS (acOverlandViewport) attaches here and writes --zoom / --pan-x /
   --pan-y / --lod1-alpha / --inv-zoom; those custom props inherit down into .ov-camera and the tokens.
   aspect-ratio matches the 16:9 art, so the map fits exactly at zoom 1 (no empty edge can show). */
.ov-viewport[b-6hx3btzb8n] {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 562.5;
    overflow: hidden;
    border-radius: var(--r-lg, 12px);
    border: 1px solid #2a2218;
    box-shadow: var(--shadow, 0 12px 34px rgba(0, 0, 0, 0.45)), inset 0 0 70px rgba(0, 0, 0, 0.55);
    background: #0c0a07;
    cursor: grab;
    touch-action: none;   /* JS owns wheel + drag; stop the browser from scroll/zoom-gesturing */
    user-select: none;
}
.ov-viewport.ov-panning[b-6hx3btzb8n] { cursor: grabbing; }

.ov-camera[b-6hx3btzb8n] {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--zoom, 1));
    will-change: transform;
}

/* LOD0 — the blank parchment map on the wooden table (table + curled edges baked into the image).
   Image is 16:9 == camera, so object-fit:cover is an exact fill. Fades toward (but not to) 0 under LOD1
   so its continuous content keeps showing through the feathered tile seams. */
.ov-lod0[b-6hx3btzb8n] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: calc(1 - var(--lod1-alpha, 0) * 0.82);
}

/* LOD1 grid — inset to the parchment interior (the tiles carry no wood border), crossfaded by zoom. */
.ov-lod1[b-6hx3btzb8n] {
    position: absolute;
    left: var(--parch-x, 4.5%);
    right: var(--parch-x, 4.5%);
    top: var(--parch-y, 7%);
    bottom: var(--parch-y, 7%);
    opacity: var(--lod1-alpha, 0);
    pointer-events: none;
}

/* Each tile slightly overlaps its neighbours and is feathered to transparent on all four edges, so the
   continuous LOD0 below shows through the seam instead of a hard cut. mask-composite intersect (std) /
   source-in (old webkit) ANDs the horizontal + vertical edge fades. */
.ov-tile[b-6hx3btzb8n] {
    position: absolute;
    width: calc(100% / 3 + 1.4%);
    height: calc(100% / 2 + 1.4%);
    object-fit: cover;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 var(--seam, 7%), #000 calc(100% - var(--seam, 7%)), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 var(--seam, 7%), #000 calc(100% - var(--seam, 7%)), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 var(--seam, 7%), #000 calc(100% - var(--seam, 7%)), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 var(--seam, 7%), #000 calc(100% - var(--seam, 7%)), transparent 100%);
    mask-composite: intersect;
}
.ov-tile.c0[b-6hx3btzb8n] { left: -0.7%; }
.ov-tile.c1[b-6hx3btzb8n] { left: calc(100% / 3 - 0.7%); }
.ov-tile.c2[b-6hx3btzb8n] { left: calc(200% / 3 - 0.7%); }
.ov-tile.r0[b-6hx3btzb8n] { top: -0.7%; }
.ov-tile.r1[b-6hx3btzb8n] { top: calc(50% - 0.7%); }

/* Parchment-fibre unifier: one grain shared across both LOD layers (under the tokens). */
.ov-fiber[b-6hx3btzb8n] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.13;
    background-image:
        repeating-linear-gradient(8deg, rgba(70, 52, 26, 0.5) 0 1.5px, transparent 1.5px 5px),
        repeating-linear-gradient(-82deg, rgba(50, 38, 18, 0.45) 0 1px, transparent 1px 4px);
    background-size: 7px 7px, 6px 6px;
}

/* Host overlay layer (routes + tokens). The layer itself ignores pointer input; its tokens opt back in. */
.ov-overlay[b-6hx3btzb8n] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Zoom / fit controls — fixed to the viewport corner, above the map, outside the camera transform. */
.ov-controls[b-6hx3btzb8n] {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 8;
}
.ov-cbtn[b-6hx3btzb8n] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--gold-tarnished, #6b5424);
    background: linear-gradient(180deg, rgba(28, 23, 16, 0.92), rgba(18, 15, 10, 0.94));
    color: var(--gold-bright, #e7c570);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.ov-cbtn:hover[b-6hx3btzb8n] { filter: brightness(1.15); border-color: var(--gold, #c6a15b); }
.ov-cbtn:active[b-6hx3btzb8n] { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    /* JS already snaps instead of lerping; nothing extra needed here, but keep controls from animating. */
    .ov-cbtn[b-6hx3btzb8n] { transition: none; }
}
/* /Components/PartyRail.razor.rz.scp.css */
.party-rail[b-azvo1o96zy] { display: flex; flex-direction: column; gap: 5px; }

.rail-card[b-azvo1o96zy] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 4px 7px;
    background: var(--panel-2, #1e1810);
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
    color: var(--ink, #e6dac2);
    transition: border-color .15s, background .15s, transform .12s;
}
.rail-card:hover[b-azvo1o96zy] { border-color: var(--gold); transform: translateY(-1px); }
.rail-card.active[b-azvo1o96zy] {
    border-color: var(--gold-bright);
    background: var(--panel-3, #2a2114);
    box-shadow: 0 0 0 1px var(--gold-bright), 0 0 10px #e8b54055;
}
.rail-card.fallen[b-azvo1o96zy] { opacity: .6; filter: grayscale(.85); border-color: var(--blood, #b0432f); }
.rail-card.fallen:hover[b-azvo1o96zy] { transform: none; }

/* The downed marker — a hero who hit 0 HP stays on the rail (grayed) with a clear DOWN tag, rather
   than disappearing. Reads as "out of the fight, fate pending" — distinct from a healthy member. */
.rail-down-badge[b-azvo1o96zy] {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    padding: 1px 6px;
    font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .08em;
    color: #f3e2c2;
    background: var(--blood, #b0432f);
    border: 1px solid #f3e2c2aa;
    border-radius: 4px;
    box-shadow: 0 2px 6px #000a;
    pointer-events: none;
}
/* Truly dead (3 death-save failures / massive damage) — darker, skull-marked, distinct from a recoverable DOWN. */
.rail-down-badge.dead[b-azvo1o96zy] {
    background: #1a0d0a;
    color: #c9b8a0;
    border-color: #5a2a22;
}
.rail-down-badge.dead[b-azvo1o96zy]::before { content: "\2620 "; }

.rail-portrait[b-azvo1o96zy] { position: relative; line-height: 0; }
.rail-glyph[b-azvo1o96zy] {
    position: absolute; right: -3px; bottom: -3px;
    width: 17px; height: 17px; border-radius: 50%;
    display: grid; place-items: center;
    background: #0c0a07; border: 1px solid var(--player-line);
    font-size: 11px; color: var(--gold-bright); line-height: 1;
}
.rail-name[b-azvo1o96zy] {
    font-family: var(--font-display); font-size: 12px; font-weight: 600;
    color: var(--gold); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-hp[b-azvo1o96zy] { width: 90%; height: 4px; border-radius: 3px; background: #00000066; overflow: hidden; }
.rail-hp > span[b-azvo1o96zy] { display: block; height: 100%; background: var(--hp, #6a9b5e); transition: width .3s; }

.rail-slots[b-azvo1o96zy] { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; max-width: 100%; padding: 0 2px; }
.slot-pip[b-azvo1o96zy] { width: 6px; height: 6px; border-radius: 50%; background: var(--acc-knowledge); opacity: .35; }
.slot-pip.full[b-azvo1o96zy] { opacity: 1; box-shadow: 0 0 4px var(--acc-knowledge); }
.slot-pip.spent[b-azvo1o96zy] { background: var(--muted); opacity: .25; }

.rail-nerve[b-azvo1o96zy] {
    position: absolute; top: 3px; right: 5px;
    font-family: var(--font-display); font-weight: 800; font-size: 13px;
    color: var(--wound, #d8954a); text-shadow: 0 1px 2px #000;
}
.rail-nerve.broken[b-azvo1o96zy] { color: var(--blood, #b0432f); animation: rail-nerve-flash-b-azvo1o96zy .8s ease-in-out infinite; }
@keyframes rail-nerve-flash-b-azvo1o96zy { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
/* /Components/PlaytestRecorderPanel.razor.rz.scp.css */
/* ── Dock container ──────────────────────────────────────────────────────── */
.playtest-dock[b-mstizo6v6b] {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 80;
    font-family: var(--ui-font, "Jost", system-ui, sans-serif);
    /* cursor shows it is draggable */
    cursor: grab;
    user-select: none;
    touch-action: none; /* required for pointer-capture on touch */
}

.playtest-dock:active[b-mstizo6v6b] {
    cursor: grabbing;
}

/* ── Tab (closed state) ──────────────────────────────────────────────────── */
.playtest-tab[b-mstizo6v6b],
.playtest-panel button[b-mstizo6v6b] {
    border: 1px solid rgba(210, 173, 80, 0.45);
    background: rgba(26, 22, 16, 0.92);
    color: #f0e3c8;
    border-radius: 7px;
    padding: 8px 10px;
    cursor: pointer;
}

.playtest-tab:hover[b-mstizo6v6b],
.playtest-panel button:hover[b-mstizo6v6b] {
    border-color: rgba(210, 173, 80, 0.95);
}

/* ── Panel (open state) ──────────────────────────────────────────────────── */
.playtest-panel[b-mstizo6v6b] {
    position: absolute;
    width: min(340px, calc(100vw - 24px));
    border: 1px solid rgba(210, 173, 80, 0.45);
    background: rgba(18, 15, 11, 0.96);
    color: #f0e3c8;
    border-radius: 8px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
    padding: 12px;
    /* default: open upward + leftward (bottom-right dock corner) */
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
}

/* ── Open-direction variants ─────────────────────────────────────────────── */

/* Vertical */
.playtest-dock.open-up .playtest-panel[b-mstizo6v6b] {
    bottom: 100%;
    top: auto;
    margin-bottom: 8px;
    margin-top: 0;
}

.playtest-dock.open-down .playtest-panel[b-mstizo6v6b] {
    top: 100%;
    bottom: auto;
    margin-top: 8px;
    margin-bottom: 0;
}

/* Horizontal */
.playtest-dock.open-left .playtest-panel[b-mstizo6v6b] {
    right: 0;
    left: auto;
}

.playtest-dock.open-right .playtest-panel[b-mstizo6v6b] {
    left: 0;
    right: auto;
}

/* ── Panel internals ─────────────────────────────────────────────────────── */
.playtest-head[b-mstizo6v6b],
.playtest-meta[b-mstizo6v6b],
.playtest-actions[b-mstizo6v6b],
.playtest-buttons[b-mstizo6v6b],
.playtest-jump-grid[b-mstizo6v6b] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.playtest-head[b-mstizo6v6b] {
    justify-content: space-between;
    margin-bottom: 6px;
    cursor: default; /* header text shouldn't show grab cursor */
}

.playtest-x[b-mstizo6v6b] {
    width: 30px;
    height: 30px;
    padding: 0;
}

.playtest-meta[b-mstizo6v6b] {
    color: rgba(240, 227, 200, 0.68);
    font-size: 12px;
    margin-bottom: 8px;
}

.playtest-shortcuts[b-mstizo6v6b] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    color: rgba(240, 227, 200, 0.78);
    font-size: 12px;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid rgba(210, 173, 80, 0.22);
    border-radius: 7px;
    background: rgba(8, 7, 5, 0.55);
}

.playtest-shortcuts strong[b-mstizo6v6b] {
    color: #d2ad50;
    margin-right: 2px;
}

.playtest-shortcuts kbd[b-mstizo6v6b] {
    display: inline-block;
    min-width: 1.2em;
    padding: 1px 5px;
    border: 1px solid rgba(210, 173, 80, 0.45);
    border-radius: 4px;
    background: rgba(26, 22, 16, 0.92);
    font: 600 11px/1.3 ui-monospace, monospace;
    text-align: center;
}

.playtest-jumps[b-mstizo6v6b] {
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid rgba(116, 169, 189, 0.24);
    border-radius: 7px;
    background: rgba(8, 12, 14, 0.52);
}

.playtest-jumps strong[b-mstizo6v6b] {
    display: block;
    margin-bottom: 6px;
    color: #9fcde0;
    font-size: 12px;
}

.playtest-jump-grid[b-mstizo6v6b] {
    gap: 6px;
}

.playtest-jump-grid button[b-mstizo6v6b] {
    flex: 1 1 92px;
    padding: 6px 8px;
    font-size: 12px;
}

.playtest-buttons button[b-mstizo6v6b] {
    flex: 1 1 86px;
}

.playtest-panel textarea[b-mstizo6v6b] {
    width: 100%;
    min-height: 66px;
    margin: 8px 0;
    border: 1px solid rgba(210, 173, 80, 0.28);
    background: rgba(8, 7, 5, 0.88);
    color: #f0e3c8;
    border-radius: 7px;
    padding: 8px;
    resize: vertical;
}

.playtest-status[b-mstizo6v6b] {
    color: rgba(240, 227, 200, 0.72);
    font-size: 12px;
    margin-top: 8px;
}
/* /Components/RecruitView.razor.rz.scp.css */
/* The Hearth — mid-run caravan pack recruitment (Slice L). */

.recruit-view[b-zpmsl15b25] {
    max-width: 980px;
    margin: 0 auto;
    padding: 2vh 16px 4vh;
}

.caravan-header[b-zpmsl15b25] {
    text-align: center;
    margin-bottom: var(--sp-4);
}

.caravan-sign-svg[b-zpmsl15b25] {
    width: min(360px, 92vw);
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.38));
}

.caravan-tag[b-zpmsl15b25] {
    color: var(--muted);
    font-size: var(--ts-sm);
    font-style: italic;
    margin: var(--sp-2) 0 0;
}

.caravan-rhythm[b-zpmsl15b25] {
    color: var(--muted);
    font-size: var(--ts-xs);
    margin-left: auto;
}

.caravan-panel[b-zpmsl15b25] {
    border-color: rgba(180, 130, 60, 0.35);
    background:
        radial-gradient(ellipse 90% 70% at 50% 0%, rgba(80, 55, 30, 0.22) 0%, transparent 65%),
        var(--panel);
}

/* ── Intro beat: wagon rolls in ── */
.caravan-intro[b-zpmsl15b25] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-2) var(--sp-3);
    text-align: center;
}

.caravan-wagon[b-zpmsl15b25] {
    width: min(420px, 94vw);
    animation: wagon-roll-b-zpmsl15b25 1.4s ease-out both;
}

.wagon-svg[b-zpmsl15b25] {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

@keyframes wagon-roll-b-zpmsl15b25 {
    0% { opacity: 0; transform: translateX(-28%) scale(0.92); }
    55% { opacity: 1; transform: translateX(4%) scale(1.02); }
    100% { transform: translateX(0) scale(1); }
}

.caravan-arrival[b-zpmsl15b25] {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--gold-bright);
    letter-spacing: 0.04em;
    margin: 0;
    animation: arrival-fade-b-zpmsl15b25 0.8s 0.35s ease-out both;
}

@keyframes arrival-fade-b-zpmsl15b25 {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

.caravan-dm[b-zpmsl15b25] {
    max-width: 640px;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: var(--ts-sm);
    line-height: 1.45;
    color: var(--parch-dim);
    animation: arrival-fade-b-zpmsl15b25 0.8s 0.55s ease-out both;
}

.caravan-dm-name[b-zpmsl15b25] {
    font-style: normal;
    font-weight: 700;
    color: var(--gold);
    margin-right: 4px;
}

/* ── Pack frame (themed wagon-board border) ── */
.caravan-frame[b-zpmsl15b25] {
    position: relative;
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
    margin: var(--sp-2) 0;
}

.caravan-frame-rim[b-zpmsl15b25] {
    position: absolute;
    inset: 0;
    border-radius: var(--r-lg);
    border: 2px solid rgba(200, 162, 78, 0.45);
    box-shadow:
        inset 0 0 0 4px rgba(60, 40, 22, 0.55),
        inset 0 0 28px rgba(255, 207, 122, 0.06),
        0 4px 18px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(200, 162, 78, 0.06) 18px 19px),
        repeating-linear-gradient(0deg, transparent 0 18px, rgba(200, 162, 78, 0.04) 18px 19px);
}

.caravan-frame-rim[b-zpmsl15b25]::before,
.caravan-frame-rim[b-zpmsl15b25]::after {
    content: "◆";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(200, 162, 78, 0.35);
    font-size: 0.7rem;
}

.caravan-frame-rim[b-zpmsl15b25]::before { left: 8px; }
.caravan-frame-rim[b-zpmsl15b25]::after { right: 8px; }

.caravan-pack-grid[b-zpmsl15b25] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
}

@media (max-width: 820px) {
    .caravan-pack-grid[b-zpmsl15b25] {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto;
    }
}

/* ── Card slot (mirrors RosterRevealView — mid-run only) ── */
.caravan-slot[b-zpmsl15b25] {
    --rarity: #8a8170;
    position: relative;
    min-height: 300px;
    perspective: 1100px;
}

.caravan-slot.rarity-uncommon[b-zpmsl15b25]  { --rarity: #4a9a52; }
.caravan-slot.rarity-rare[b-zpmsl15b25]      { --rarity: #3a72d0; }
.caravan-slot.rarity-epic[b-zpmsl15b25]      { --rarity: #9a46d0; }
.caravan-slot.rarity-legendary[b-zpmsl15b25] { --rarity: #e8b84a; }

.caravan-back[b-zpmsl15b25] {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    border: 1.5px solid #14110b;
    background:
        repeating-linear-gradient(-45deg, #3a2a1a 0 8px, #34261a 8px 16px),
        linear-gradient(180deg, #4a3828, #2e2218);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: inset 0 0 0 3px rgba(236, 200, 115, 0.15), 0 2px 10px rgba(0, 0, 0, 0.42);
}

.caravan-back-seal[b-zpmsl15b25] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #8a6828, #5c4018);
    color: #ecc873;
    font-size: 1.1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.caravan-back-label[b-zpmsl15b25] {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(220, 201, 158, 0.55);
}

.caravan-slot.shown[b-zpmsl15b25]  .sc4e {
    animation: caravan-flip-b-zpmsl15b25 0.5s cubic-bezier(0.3, 0.9, 0.3, 1.2) both;
    position: relative;
    z-index: 2;
}

@keyframes caravan-flip-b-zpmsl15b25 {
    0% { transform: rotateY(-92deg) scale(0.92); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

/* Rare flourish */
.caravan-slot.is-rare.shown[b-zpmsl15b25]  .sc4e {
    animation: caravan-flip-b-zpmsl15b25 0.5s cubic-bezier(0.3, 0.9, 0.3, 1.2) both,
               caravan-rare-breathe-b-zpmsl15b25 2.4s ease-in-out 0.5s infinite;
}

@keyframes caravan-rare-breathe-b-zpmsl15b25 {
    0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 14px color-mix(in srgb, var(--rarity) 45%, transparent); }
    50% { box-shadow: 0 2px 14px rgba(0,0,0,0.32), 0 0 26px color-mix(in srgb, var(--rarity) 70%, transparent); }
}

.caravan-slot.pop[b-zpmsl15b25] {
    z-index: 20;
    animation: caravan-pop-b-zpmsl15b25 1.05s ease-out both;
}

@keyframes caravan-pop-b-zpmsl15b25 {
    0% { transform: scale(1); }
    22% { transform: scale(1.1); }
    45% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.caravan-beam[b-zpmsl15b25] {
    position: absolute;
    left: 50%;
    top: -22%;
    width: 78%;
    height: 150%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--rarity) 55%, transparent) 0%,
        color-mix(in srgb, var(--rarity) 22%, transparent) 45%,
        transparent 82%);
    filter: blur(8px);
    mix-blend-mode: screen;
    clip-path: polygon(34% 100%, 66% 100%, 92% 0, 8% 0);
    animation: caravan-beam-rise-b-zpmsl15b25 1.05s ease-out both;
}

@keyframes caravan-beam-rise-b-zpmsl15b25 {
    0% { opacity: 0; transform: translateX(-50%) scaleY(0.4); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) scaleY(1.05); }
}

.caravan-flash[b-zpmsl15b25] {
    position: absolute;
    inset: -6%;
    z-index: 5;
    pointer-events: none;
    border-radius: 8px;
    background: radial-gradient(circle at 50% 46%, rgba(255, 248, 224, 0.85) 0%, rgba(255, 220, 150, 0.3) 38%, transparent 66%);
    animation: caravan-rare-flash-b-zpmsl15b25 0.7s ease-out both;
}

@keyframes caravan-rare-flash-b-zpmsl15b25 {
    0% { opacity: 0; transform: scale(0.6); }
    24% { opacity: 0.9; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.1); }
}

.caravan-sparks[b-zpmsl15b25] {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 0;
    height: 0;
    z-index: 6;
    pointer-events: none;
}

.caravan-spark[b-zpmsl15b25] {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 13px;
    border-radius: 40% 40% 50% 50%;
    background: linear-gradient(to top, rgba(255,120,40,0) 0%, color-mix(in srgb, var(--rarity) 70%, #ffcf7a) 55%, #fff4dc 100%);
    box-shadow: 0 0 6px color-mix(in srgb, var(--rarity) 70%, #ffaa46);
    transform-origin: 50% 100%;
    transform: rotate(calc(var(--i) * 30deg));
    animation: caravan-spark-fly-b-zpmsl15b25 0.95s ease-out both;
}

@keyframes caravan-spark-fly-b-zpmsl15b25 {
    0% { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateY(0) scale(0.5); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateY(-130px) scale(0.3); }
}

.caravan-rare-line[b-zpmsl15b25] {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: var(--ts-sm);
    color: var(--gold);
    padding: var(--sp-1) 0 var(--sp-2);
    border-bottom: 1px dotted var(--line);
    margin-bottom: var(--sp-2);
}

.caravan-spares[b-zpmsl15b25] {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px dashed rgba(200, 162, 78, 0.25);
}

.caravan-spares-title[b-zpmsl15b25] {
    font-family: var(--font-display);
    font-size: var(--ts-sm);
    color: var(--gold);
    margin-bottom: var(--sp-2);
}

.caravan-foot[b-zpmsl15b25] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 40px;
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}

.caravan-pick-hint[b-zpmsl15b25] {
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--muted);
    font-size: var(--ts-sm);
    text-align: center;
}

/* ── F13 gamble hire button ── */
.gamble-hire-btn[b-zpmsl15b25] {
    font-style: italic;
    letter-spacing: 0.03em;
}

/* ── F13 DM reveal line (fires after hire-commit, fades in under the cards) ── */
.caravan-gamble-reveal-dm[b-zpmsl15b25] {
    max-width: 540px;
    margin: var(--sp-2) auto 0;
    padding: var(--sp-2) var(--sp-3);
    font-family: Georgia, serif;
    font-style: italic;
    font-size: var(--ts-sm);
    line-height: 1.45;
    color: var(--parch-dim);
    text-align: center;
    border-top: 1px dotted rgba(200, 162, 78, 0.28);
    animation: reveal-dm-fade-b-zpmsl15b25 0.45s ease-out both;
}

@keyframes reveal-dm-fade-b-zpmsl15b25 {
    0% { opacity: 0; transform: translateY(5px); }
    100% { opacity: 1; transform: none; }
}

/* ── F13 gamble-reveal slot: mystery → full card transition ── */

/* The full card flips in with a satisfying "unveil" motion — slightly slower than the
   initial caravan-flip so the player can anticipate it, then a brief overshoot settle. */
.caravan-slot.gamble-reveal[b-zpmsl15b25]  .sc4e {
    animation: gamble-reveal-flip-b-zpmsl15b25 0.68s cubic-bezier(0.22, 1.15, 0.32, 1.08) both;
}

@keyframes gamble-reveal-flip-b-zpmsl15b25 {
    0%   { transform: scale(0.93) rotateY(-18deg); filter: blur(3px) brightness(1.35); opacity: 0.6; }
    30%  { filter: blur(0.8px) brightness(1.18); opacity: 1; }
    65%  { transform: scale(1.028) rotateY(2.5deg); filter: none; }
    100% { transform: scale(1) rotateY(0deg); filter: none; }
}

/* Stats area blurs into focus — staggered after the card flip to sequence the reveal. */
.caravan-slot.gamble-reveal[b-zpmsl15b25]  .sc4e-defs,
.caravan-slot.gamble-reveal[b-zpmsl15b25]  .sc4e-vitals,
.caravan-slot.gamble-reveal[b-zpmsl15b25]  .sc4e-abilities,
.caravan-slot.gamble-reveal[b-zpmsl15b25]  .sc4e-powers {
    animation: stat-focus-in-b-zpmsl15b25 0.52s 0.22s ease-out both;
}

@keyframes stat-focus-in-b-zpmsl15b25 {
    0%   { opacity: 0; filter: blur(5px); transform: translateY(5px); }
    60%  { opacity: 0.85; filter: blur(0.5px); }
    100% { opacity: 1; filter: none; transform: none; }
}

/* Trait/flaw keyword tags pop in a beat after the stats settle. */
.caravan-slot.gamble-reveal[b-zpmsl15b25]  .sc4e-keywords {
    animation: stat-focus-in-b-zpmsl15b25 0.42s 0.52s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .caravan-wagon[b-zpmsl15b25],
    .caravan-arrival[b-zpmsl15b25],
    .caravan-dm[b-zpmsl15b25] { animation: none !important; opacity: 1 !important; transform: none !important; }

    .caravan-slot.shown[b-zpmsl15b25]  .sc4e,
    .caravan-slot.is-rare.shown[b-zpmsl15b25]  .sc4e,
    .caravan-slot.gamble-reveal[b-zpmsl15b25]  .sc4e,
    .caravan-slot.pop[b-zpmsl15b25],
    .caravan-beam[b-zpmsl15b25],
    .caravan-flash[b-zpmsl15b25],
    .caravan-spark[b-zpmsl15b25] { animation: none !important; }

    .caravan-slot.gamble-reveal[b-zpmsl15b25]  .sc4e-defs,
    .caravan-slot.gamble-reveal[b-zpmsl15b25]  .sc4e-vitals,
    .caravan-slot.gamble-reveal[b-zpmsl15b25]  .sc4e-abilities,
    .caravan-slot.gamble-reveal[b-zpmsl15b25]  .sc4e-powers,
    .caravan-slot.gamble-reveal[b-zpmsl15b25]  .sc4e-keywords,
    .caravan-gamble-reveal-dm[b-zpmsl15b25] { animation: none !important; }

    .caravan-beam[b-zpmsl15b25],
    .caravan-flash[b-zpmsl15b25],
    .caravan-spark[b-zpmsl15b25] { display: none !important; }
}
/* /Components/RosterRevealView.razor.rz.scp.css */
/* Founding roster reveal — sequential card flips + rare "walkout" fireworks. */

.reveal-view[b-43mgfdzcdr] {
    min-height: 100vh;
    padding: 18px clamp(12px, 4vw, 48px) 36px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(60, 44, 28, 0.5) 0%, transparent 60%),
        #0b0a08;
    color: #e6dabc;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Header ── */
.reveal-header[b-43mgfdzcdr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.reveal-sign-svg[b-43mgfdzcdr] { width: min(320px, 80vw); height: auto; display: block; }

/* ── Game Master attribution ── */
.reveal-dm[b-43mgfdzcdr] {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.reveal-dm-byline[b-43mgfdzcdr] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.reveal-dm-badge[b-43mgfdzcdr] {
    font-family: "Jost", "Century Gothic", sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #9a8050;
    padding: 1px 6px;
    border: 1px solid rgba(154, 128, 80, 0.3);
    border-radius: 2px;
}

.reveal-dm-name[b-43mgfdzcdr] {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 0.78rem;
    color: #ecc873;
}

.reveal-dm-line[b-43mgfdzcdr] {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #d8c8a0;
    transition: color 0.4s ease;
}

/* Rare caption glows faintly to signal the exceptional pull */
.reveal-dm-line.reveal-dm-rare[b-43mgfdzcdr] {
    color: #f0d880;
    text-shadow: 0 0 12px rgba(240, 216, 128, 0.3);
}

/* ── Card grid ── */
.reveal-grid[b-43mgfdzcdr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 14px;
    align-content: start;
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ── Card slot ── */
.reveal-slot[b-43mgfdzcdr] {
    --rarity: #8a8170;
    position: relative;
    min-height: 300px;
    perspective: 1100px;
}

.reveal-slot.rarity-uncommon[b-43mgfdzcdr]  { --rarity: #4a9a52; }
.reveal-slot.rarity-rare[b-43mgfdzcdr]      { --rarity: #3a72d0; }
.reveal-slot.rarity-epic[b-43mgfdzcdr]      { --rarity: #9a46d0; }
.reveal-slot.rarity-legendary[b-43mgfdzcdr] { --rarity: #e8b84a; }

/* ── Face-down card back — sealed company dossier ── */
/* Deal-in: cards materialise face-down one by one before the flip reveal begins. */
@keyframes reveal-deal-in-b-43mgfdzcdr {
    0%   { opacity: 0; transform: translateY(-22px) scale(0.93); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}

.reveal-back[b-43mgfdzcdr] {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    border: 1.5px solid #3a2818;
    /* Premium dark leather — diamond lattice over deep leather gradient */
    background:
        repeating-linear-gradient( 45deg, transparent, transparent 9px, rgba(200,162,78,0.065) 9px, rgba(200,162,78,0.065) 10px),
        repeating-linear-gradient(-45deg, transparent, transparent 9px, rgba(200,162,78,0.065) 9px, rgba(200,162,78,0.065) 10px),
        linear-gradient(160deg, #2c1f10, #1c1209);
    box-shadow:
        inset 0 0 0 5px rgba(14, 11, 7, 0.65),
        inset 0 0 0 6.5px rgba(200, 162, 78, 0.12),
        0 2px 12px rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: reveal-deal-in-b-43mgfdzcdr 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both;
    animation-delay: calc(var(--slot, 0) * 45ms);
}

.reveal-back-inner[b-43mgfdzcdr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    filter: drop-shadow(0 0 10px rgba(200, 162, 78, 0.35));
}

.reveal-back-label[b-43mgfdzcdr] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.38rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(200, 162, 78, 0.28);
    user-select: none;
}

/* ── Card flip-in animation ── */
.reveal-slot.shown[b-43mgfdzcdr]  .sc4e {
    animation: reveal-flip-b-43mgfdzcdr 0.48s cubic-bezier(0.3, 0.9, 0.3, 1.2) both;
    position: relative;
    z-index: 2;
}
@keyframes reveal-flip-b-43mgfdzcdr {
    0%   { transform: rotateY(-92deg) scale(0.9); opacity: 0; }
    55%  { opacity: 1; }
    100% { transform: rotateY(0deg)   scale(1);   opacity: 1; }
}

/* ── Rare "walkout" treatment ── */
.reveal-slot.is-rare.shown[b-43mgfdzcdr]  .sc4e {
    animation:
        reveal-flip-b-43mgfdzcdr   0.48s cubic-bezier(0.3, 0.9, 0.3, 1.2) both,
        rare-breathe-b-43mgfdzcdr  2.4s  ease-in-out 0.5s infinite;
}
@keyframes rare-breathe-b-43mgfdzcdr {
    0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 14px color-mix(in srgb, var(--rarity) 45%, transparent); }
    50%       { box-shadow: 0 2px 16px rgba(0,0,0,0.35), 0 0 28px color-mix(in srgb, var(--rarity) 72%, transparent); }
}

/* Pop = the brief centre-stage moment as a rare lands. */
.reveal-slot.pop[b-43mgfdzcdr] {
    z-index: 20;
    animation: rare-pop-b-43mgfdzcdr 1.1s ease-out both;
}
@keyframes rare-pop-b-43mgfdzcdr {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.14); }
    45%  { transform: scale(1.07); }
    100% { transform: scale(1); }
}

/* Vertical light beam behind a rare card. */
.reveal-beam[b-43mgfdzcdr] {
    position: absolute;
    left: 50%; top: -24%;
    width: 76%; height: 152%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--rarity) 58%, transparent) 0%,
        color-mix(in srgb, var(--rarity) 22%, transparent) 44%,
        transparent 80%);
    filter: blur(8px);
    mix-blend-mode: screen;
    clip-path: polygon(33% 100%, 67% 100%, 93% 0, 7% 0);
    animation: beam-rise-b-43mgfdzcdr 1.1s ease-out both;
}
@keyframes beam-rise-b-43mgfdzcdr {
    0%   { opacity: 0; transform: translateX(-50%) scaleY(0.35); }
    28%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) scaleY(1.06); }
}

/* Mid-flip radial flash */
.reveal-flash[b-43mgfdzcdr] {
    position: absolute;
    inset: -7%;
    z-index: 5;
    pointer-events: none;
    border-radius: 8px;
    background: radial-gradient(circle at 50% 46%, rgba(255,248,224,0.88) 0%, rgba(255,220,150,0.32) 36%, transparent 64%);
    animation: rare-flash-b-43mgfdzcdr 0.72s ease-out both;
}
@keyframes rare-flash-b-43mgfdzcdr {
    0%   { opacity: 0; transform: scale(0.55); }
    22%  { opacity: 0.95; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.12); }
}

/* Radial spark burst — elongated tallow-spark shapes */
.reveal-sparks[b-43mgfdzcdr] {
    position: absolute;
    left: 50%; top: 42%;
    width: 0; height: 0;
    z-index: 6;
    pointer-events: none;
}
.reveal-spark[b-43mgfdzcdr] {
    position: absolute;
    left: 0; top: 0;
    width: 2px; height: 13px;
    border-radius: 40% 40% 50% 50%;
    background: linear-gradient(to top,
        rgba(255,120,40,0) 0%,
        color-mix(in srgb, var(--rarity) 70%, #ffcf7a) 55%,
        #fff4dc 100%);
    box-shadow: 0 0 6px color-mix(in srgb, var(--rarity) 70%, #ffaa46);
    transform-origin: 50% 100%;
    transform: rotate(calc(var(--i) * 25.7deg));
    animation: spark-fly-b-43mgfdzcdr 1s ease-out both;
}
@keyframes spark-fly-b-43mgfdzcdr {
    0%   { opacity: 0; transform: rotate(calc(var(--i) * 25.7deg)) translateY(0)     scale(0.5); }
    16%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(calc(var(--i) * 25.7deg)) translateY(-140px) scale(0.25); }
}

/* ── Footer ── */
.reveal-foot[b-43mgfdzcdr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 60px;
}

.reveal-summary[b-43mgfdzcdr] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Georgia, serif;
    font-style: italic;
    color: #d8c8a0;
    font-size: 0.92rem;
    animation: reveal-summary-in-b-43mgfdzcdr 0.6s ease both;
}
@keyframes reveal-summary-in-b-43mgfdzcdr {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .reveal-slot.shown[b-43mgfdzcdr]  .sc4e,
    .reveal-slot.is-rare.shown[b-43mgfdzcdr]  .sc4e,
    .reveal-slot.pop[b-43mgfdzcdr],
    .reveal-beam[b-43mgfdzcdr],
    .reveal-flash[b-43mgfdzcdr],
    .reveal-spark[b-43mgfdzcdr],
    .reveal-back[b-43mgfdzcdr],
    .reveal-summary[b-43mgfdzcdr] { animation: none !important; }
    .reveal-spark[b-43mgfdzcdr],
    .reveal-flash[b-43mgfdzcdr],
    .reveal-beam[b-43mgfdzcdr] { display: none !important; }
    .reveal-dm-line[b-43mgfdzcdr] { transition: none !important; }
}
/* /Components/SiteBattleView.razor.rz.scp.css */
.site-controls[b-xlvk3uysg6] {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: var(--sp-3) 0;
}
.site-controls input[type="range"][b-xlvk3uysg6] { width: 140px; }
.speed-tiers[b-xlvk3uysg6] { display: inline-flex; gap: 2px; }
.speed-tiers .btn-sm[b-xlvk3uysg6] { padding: 3px 8px; font-size: 12px; min-height: 0; }

/* Slice E — board + intel dock side by side */
.site-stage[b-xlvk3uysg6] { position: relative; display: flex; gap: 10px; align-items: stretch; }
.site-stage .board-viewport-shell[b-xlvk3uysg6] { flex: 1 1 auto; }
.intel-dock[b-xlvk3uysg6] { flex: 0 0 auto; align-self: flex-start; margin-top: 4px; }

/* Slice E — frozen board during pause-inspect (the "cool freeze" beat) */
.board.frozen[b-xlvk3uysg6] { filter: saturate(.5) brightness(.7); transition: filter .25s ease; }

/* Damage + heal floats (Juice: parity with BattleWatchView — sharp pop + overshoot). */
.dmg-float[b-xlvk3uysg6] {
    position: absolute; z-index: 9; transform: translate(-50%, 0);
    font-family: var(--font-display); font-weight: 700; font-size: 15px;
    pointer-events: none; white-space: nowrap;
    animation: site-dmg-float-up-b-xlvk3uysg6 .9s ease-out forwards;
    text-shadow: 0 1px 3px #000, 0 0 2px #000;
}
.dmg-float.hit[b-xlvk3uysg6]   { color: var(--wound); }
.dmg-float.heal[b-xlvk3uysg6]  { color: var(--ward, #7fb5c9); text-shadow: 0 0 6px #1c3a44, 0 1px 3px #000; }
.dmg-float.potion[b-xlvk3uysg6] { color: var(--acc-wild, #6fa86a); font-weight: 800; text-shadow: 0 0 7px #2f5a32, 0 1px 3px #000; }
.dmg-float.potion[b-xlvk3uysg6]::before { content: "\1F9EA "; font-size: 12px; }
.dmg-float.miss[b-xlvk3uysg6]  { color: var(--muted); font-size: 13px; font-weight: 600; text-shadow: 0 1px 3px #000; }
.dmg-float.kill[b-xlvk3uysg6]  { color: var(--blood); font-size: 17px; text-shadow: 0 0 8px var(--blood), 0 1px 4px #000; animation: site-dmg-float-kill-b-xlvk3uysg6 1.2s ease-out forwards; }
.dmg-float.crit[b-xlvk3uysg6]  { color: var(--gold-bright); font-size: 19px; text-shadow: 0 0 10px var(--gold-bright), 0 1px 4px #000; animation: site-dmg-float-crit-b-xlvk3uysg6 1.1s ease-out forwards; }
@keyframes site-dmg-float-up-b-xlvk3uysg6 {
    0%   { opacity: 0;  transform: translate(-50%, 6px)   scale(.55); }
    11%  { opacity: 1;  transform: translate(-50%, -2px)  scale(1.22); }
    25%  { opacity: 1;  transform: translate(-50%, -4px)  scale(1.0); }
    100% { opacity: 0;  transform: translate(-50%, -30px) scale(.95); }
}
@keyframes site-dmg-float-crit-b-xlvk3uysg6 {
    0%   { opacity: 0;  transform: translate(-50%, 8px)   scale(.45) rotate(-6deg); }
    10%  { opacity: 1;  transform: translate(-50%, -3px)  scale(1.32) rotate(4deg); }
    26%  { opacity: 1;  transform: translate(-50%, -7px)  scale(1.08) rotate(-1deg); }
    100% { opacity: 0;  transform: translate(-50%, -40px) scale(1)    rotate(0deg); }
}
@keyframes site-dmg-float-kill-b-xlvk3uysg6 {
    0%   { opacity: 0;  transform: translate(-50%, 8px)   scale(.5); }
    10%  { opacity: 1;  transform: translate(-50%, -3px)  scale(1.28); }
    30%  { opacity: 1;  transform: translate(-50%, -8px)  scale(1.0); }
    100% { opacity: 0;  transform: translate(-50%, -45px) scale(.95); }
}

/* Slice E — pause-inspect dossier overlay */
.inspect-overlay[b-xlvk3uysg6] {
    position: fixed; inset: 0; z-index: 200;
    background: #06050399; backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 24px; overflow-y: auto;
    animation: inspect-in-b-xlvk3uysg6 .22s ease-out;
}
.inspect-sheet[b-xlvk3uysg6] { position: relative; width: 100%; max-width: 920px; }
.inspect-close[b-xlvk3uysg6] { position: sticky; top: 0; float: right; z-index: 2; margin-bottom: 6px; }
@keyframes inspect-in-b-xlvk3uysg6 { 0% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .inspect-overlay[b-xlvk3uysg6] { animation: none; }
    .dmg-float[b-xlvk3uysg6] { animation-duration: .01ms; }
}

.watch-wrap[b-xlvk3uysg6] {
    width: 100%;
    padding: 0 12px 16px;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 48px);
}
.watch-head[b-xlvk3uysg6] { text-align: center; margin-bottom: 8px; }
.board[b-xlvk3uysg6] {
    position: relative;
    border-radius: 4px;
}
/* FIX B — OUTER positioning wrapper: GPU transform: translate3d (not left/top) so a moving token doesn't
   force a full layout+paint each frame. The move transition rides here on transform; the inner .token keeps
   its juice transform animations so the two never collide on one element. */
.token-pos[b-xlvk3uysg6] {
    position: absolute;
    top: 0; left: 0;
    transition: transform var(--token-transition-ms, 120ms) linear;
    will-change: transform;
    z-index: 2;
}
.token-pos.windup-lock[b-xlvk3uysg6] { transition: transform calc(var(--token-transition-ms, 120ms) * 0.65) linear; z-index: 4; }
.token-pos.dying[b-xlvk3uysg6] { z-index: 4; }

/* inner token: fills the wrapper at 0,0; owns the juice transforms (flinch/recoil/dying). */
.token[b-xlvk3uysg6] {
    position: relative;
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.token-hp[b-xlvk3uysg6] { width: 80%; margin-top: 2px; }
/* Juice: HP ghost + low-HP pulse (parity with BattleWatchView). */
.hp-bar[b-xlvk3uysg6] {
    position: relative; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden;
}
.hp-ghost[b-xlvk3uysg6] {
    position: absolute; left: 0; top: 0; height: 100%; border-radius: inherit;
    background: rgba(210, 70, 50, .68);
    transition: width .65s .15s ease-out;
    pointer-events: none;
}
.hp-fill[b-xlvk3uysg6] {
    display: block; position: relative; z-index: 1;
    height: 100%; background: var(--hp); border-radius: inherit;
    transition: width .22s ease-out;
}
.token-hp-critical .hp-bar[b-xlvk3uysg6] { box-shadow: 0 0 4px var(--blood); }
.token-hp-critical .hp-fill[b-xlvk3uysg6] { animation: hp-crit-pulse-b-xlvk3uysg6 1.1s ease-in-out infinite; }
@keyframes hp-crit-pulse-b-xlvk3uysg6 {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; filter: brightness(1.4); }
}

/* Slice C — Begin Battle ritual: a brief initiative flash as the watched fight opens */
.initiative-flash[b-xlvk3uysg6] {
    position: absolute; top: 14%; left: 50%; transform: translateX(-50%);
    z-index: 40; pointer-events: none;
    font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: .12em;
    color: var(--gold-bright); text-shadow: 0 2px 12px #000, 0 0 24px var(--gold-tarnished);
    animation: initiative-flash-b-xlvk3uysg6 1.4s ease-out forwards;
}
@keyframes initiative-flash-b-xlvk3uysg6 {
    0% { opacity: 0; transform: translateX(-50%) scale(.8); }
    18% { opacity: 1; transform: translateX(-50%) scale(1.05); }
    70% { opacity: 1; transform: translateX(-50%) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .initiative-flash[b-xlvk3uysg6] { animation: none; opacity: 0; }
}

/* ---- COMBAT JUICE (parity with BattleWatchView) ---- */

.token.token-flinch-hit[b-xlvk3uysg6]  { animation: site-flinch-hit-b-xlvk3uysg6  .38s ease-out forwards; }
.token.token-flinch-crit[b-xlvk3uysg6] { animation: site-flinch-crit-b-xlvk3uysg6 .55s ease-out forwards; }
.token.token-flinch-kill[b-xlvk3uysg6] { animation: site-flinch-kill-b-xlvk3uysg6 .60s ease-out forwards; }
@keyframes site-flinch-hit-b-xlvk3uysg6  { 0% { transform:scale(1); filter:brightness(1); } 12% { transform:scale(1.05) translateX(3px); filter:brightness(2.8); } 38% { transform:scale(.97) translateX(-2px); filter:brightness(1); } 100% { transform:none; } }
@keyframes site-flinch-crit-b-xlvk3uysg6 { 0% { transform:scale(1); filter:brightness(1); } 10% { transform:scale(1.08) translateX(5px); filter:brightness(3.8); } 30% { transform:scale(.93) translateX(-4px); filter:brightness(1.25); } 100% { transform:none; } }
@keyframes site-flinch-kill-b-xlvk3uysg6 { 0% { transform:scale(1); filter:brightness(1); }  8% { transform:scale(1.1)  translateX(6px); filter:brightness(4.5); } 25% { transform:scale(.9)  translateX(-5px); filter:brightness(1.6); } 100% { transform:none; } }

.token.attacker-recoil[b-xlvk3uysg6] { animation: site-recoil-b-xlvk3uysg6 .3s ease-out forwards; }
@keyframes site-recoil-b-xlvk3uysg6 { 0% { transform:none; } 20% { transform:translateX(-4px) scale(.98); } 60% { transform:translateX(1px); } 100% { transform:none; } }

.token.dying[b-xlvk3uysg6] { animation: site-token-dying-b-xlvk3uysg6 .75s ease-out forwards; z-index:4; pointer-events:none; }
@keyframes site-token-dying-b-xlvk3uysg6 {
    0%   { opacity:1; filter:brightness(1); }
    10%  { opacity:1; filter:brightness(4.5) saturate(0); }
    25%  { opacity:.85; filter:brightness(1.8) grayscale(.4); }
    55%  { opacity:.65; filter:brightness(.9) grayscale(.7); }
    100% { opacity:.3; filter:grayscale(.85) brightness(.5); }
}

.board.board-impulse-crit[b-xlvk3uysg6] { animation: site-shake-crit-b-xlvk3uysg6 .35s ease-out; }
.board.board-impulse-kill[b-xlvk3uysg6] { animation: site-shake-kill-b-xlvk3uysg6 .48s ease-out; }
@keyframes site-shake-crit-b-xlvk3uysg6 { 0%,100%{transform:none;} 20%{transform:translate(-3px,1px);} 50%{transform:translate(2px,-1px);} 80%{transform:translate(-1px,0);} }
@keyframes site-shake-kill-b-xlvk3uysg6 { 0%,100%{transform:none;} 15%{transform:translate(-3px,2px);} 35%{transform:translate(3px,-2px);} 60%{transform:translate(-2px,1px);} 80%{transform:translate(1px,-1px);} }

.kill-vignette[b-xlvk3uysg6] { position:absolute; inset:0; z-index:11; pointer-events:none; border-radius:4px; animation:site-vignette-b-xlvk3uysg6 .85s ease-out forwards; }
.kill-vignette.enemy[b-xlvk3uysg6] { box-shadow:inset 0 0 50px 10px rgba(110,20,20,.65); }
.kill-vignette.hero[b-xlvk3uysg6]  { box-shadow:inset 0 0 70px 16px rgba(80,10,10,.9); }
@keyframes site-vignette-b-xlvk3uysg6 { 0%{opacity:0;} 15%{opacity:1;} 65%{opacity:.75;} 100%{opacity:0;} }

/* Strike-path + actor-cues (matches BattleWatchView grammar) */
.strike-path[b-xlvk3uysg6] { position:absolute; z-index:5; height:2px; transform-origin:0 50%; pointer-events:none; background:linear-gradient(90deg,transparent 0%,var(--steel-rim) 22%,var(--steel-rim) 78%,transparent 100%); box-shadow:0 0 5px rgba(230,218,185,.35); animation:site-strike-reveal-b-xlvk3uysg6 .7s ease-out forwards; }
.strike-path.miss[b-xlvk3uysg6] { height:1px; background:linear-gradient(90deg,transparent 0%,var(--muted) 25%,transparent 100%); box-shadow:none; }
.strike-path.crit[b-xlvk3uysg6], .strike-path.kill[b-xlvk3uysg6] { height:3px; background:linear-gradient(90deg,transparent 0%,var(--gold-bright) 20%,var(--blood) 86%,transparent 100%); box-shadow:0 0 8px rgba(213,165,74,.45); }
@keyframes site-strike-reveal-b-xlvk3uysg6 { 0%{opacity:0;clip-path:inset(0 100% 0 0);} 18%{opacity:.85;clip-path:inset(0 0 0 0);} 62%{opacity:.7;} 100%{opacity:0;clip-path:inset(0 0 0 0);} }

.actor-cue[b-xlvk3uysg6] { position:absolute; z-index:6; width:22px; height:22px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; border:2px solid var(--steel-rim); box-shadow:0 0 8px rgba(230,218,185,.25); animation:site-cue-pulse-b-xlvk3uysg6 .7s ease-out forwards; }
.actor-cue.source[b-xlvk3uysg6] { width:18px; height:18px; border-color:var(--gold-tarnished); }
.actor-cue.target[b-xlvk3uysg6] { border-color:var(--wound); }
.actor-cue.miss[b-xlvk3uysg6]   { border-color:var(--muted); box-shadow:none; }
.actor-cue.crit[b-xlvk3uysg6], .actor-cue.kill[b-xlvk3uysg6] { border-color:var(--gold-bright); box-shadow:0 0 10px rgba(213,165,74,.55); }
@keyframes site-cue-pulse-b-xlvk3uysg6 { 0%{opacity:0;transform:translate(-50%,-50%) scale(.45);} 20%{opacity:.9;transform:translate(-50%,-50%) scale(1);} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.45);} }

.whiff-arc[b-xlvk3uysg6] { position:absolute; z-index:6; width:calc(var(--cell,58px)*.62); height:calc(var(--cell,58px)*.62); transform:translate(-50%,-50%); pointer-events:none; border-radius:50%; border-top:2px solid var(--muted); border-right:2px solid transparent; border-bottom:2px solid transparent; border-left:2px solid transparent; opacity:.55; animation:site-whiff-sweep-b-xlvk3uysg6 .65s ease-out forwards; }
@keyframes site-whiff-sweep-b-xlvk3uysg6 { 0%{transform:translate(-50%,-50%) rotate(-40deg) scale(.6);opacity:0;} 25%{opacity:.8;} 100%{transform:translate(-50%,-50%) rotate(60deg) scale(1.1);opacity:0;} }

/* Target tethers (parity) */
.target-tethers[b-xlvk3uysg6] { position:absolute; inset:0; pointer-events:none; z-index:1; }
.target-tether[b-xlvk3uysg6]  { stroke:var(--gold-tarnished,#c9a227); stroke-width:1; stroke-dasharray:3 8; fill:none; transition:opacity .12s ease; opacity:0.12; }

@media (prefers-reduced-motion: reduce) {
    .token.token-flinch-hit[b-xlvk3uysg6], .token.token-flinch-crit[b-xlvk3uysg6], .token.token-flinch-kill[b-xlvk3uysg6],
    .token.attacker-recoil[b-xlvk3uysg6] { animation: none; }
    .token.dying[b-xlvk3uysg6] { animation: site-token-dying-prm-b-xlvk3uysg6 .75s ease-out forwards; }
    .board.board-impulse-crit[b-xlvk3uysg6], .board.board-impulse-kill[b-xlvk3uysg6] { animation: none; }
    .kill-vignette[b-xlvk3uysg6] { animation: none; opacity: 0; }
    .token-hp-critical .hp-fill[b-xlvk3uysg6] { animation: none; }
    .dmg-float.crit[b-xlvk3uysg6] { animation: site-dmg-float-up-b-xlvk3uysg6 1.1s ease-out forwards; }
    .dmg-float.kill[b-xlvk3uysg6] { animation: site-dmg-float-up-b-xlvk3uysg6 1.2s ease-out forwards; }
    .dmg-float[b-xlvk3uysg6] { animation: none; }
}
@keyframes site-token-dying-prm-b-xlvk3uysg6 { 0%{opacity:1;} 100%{opacity:.3; filter:grayscale(.85);} }

.site-result[b-xlvk3uysg6] {
    margin-top: var(--sp-4); text-align: center; max-width: 480px; margin-left: auto; margin-right: auto;
}
.site-result h3[b-xlvk3uysg6] { color: var(--gold); margin-bottom: var(--sp-2); }

.site-log[b-xlvk3uysg6] {
    margin-top: var(--sp-3); max-height: 180px; overflow-y: auto;
}
.site-log-line[b-xlvk3uysg6] {
    font-size: var(--ts-sm); color: var(--ink); opacity: .85;
    padding: 3px 0; border-bottom: 1px solid var(--line);
}
.site-log-line.pivotal[b-xlvk3uysg6] { color: var(--gold-bright); font-weight: 600; }
.site-speaker[b-xlvk3uysg6] { color: var(--gold); font-weight: 600; margin-right: 4px; }

/* ---- Enemy intent chip — shown on hover or windup (parity with BattleWatchView). ---- */
.token-intent-chip[b-xlvk3uysg6] {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(50, 12, 4, 0.92);
    border: 1px solid var(--enemy-line);
    color: #ffcdbf;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px 2px 4px;
    border-radius: 7px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 32;
    display: flex;
    align-items: center;
    gap: 3px;
    letter-spacing: .04em;
    text-transform: uppercase;
    animation: intent-chip-in-b-xlvk3uysg6 .15s ease forwards;
}
.token-intent-chip .game-icon[b-xlvk3uysg6] { color: var(--enemy-line); flex: 0 0 auto; }
@keyframes intent-chip-in-b-xlvk3uysg6 {
    from { opacity: 0; transform: translateX(-50%) translateY(3px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .token-intent-chip[b-xlvk3uysg6] { animation: none; }
}

/* =====================================================================================
   Build 0 — the charged-moment board-space cues, mirrored from BattleWatchView.razor.css so the
   campaign site battle dwells the same way the watch view does. These MUST live here (not in the
   shared ChargedMomentOverlay) because Blazor CSS isolation scopes them to THIS view's board markup
   (.board / .token-pos / .charged-tether). The screen-space overlay (DM stage + choices) is the
   shared component. (Duplicated by necessity — a future pass could lift these into a global sheet.)
   ===================================================================================== */
.board.charged-pause[b-xlvk3uysg6] {
    filter: saturate(.78) brightness(.82) contrast(1.04);
    transition: filter .32s ease;
}
.board.charged-pause[b-xlvk3uysg6]::after {
    content: "";
    position: absolute; inset: 0; z-index: 7; pointer-events: none;
    box-shadow: inset 0 0 120px 30px rgba(120, 18, 14, .42),
                inset 0 0 40px 8px rgba(0, 0, 0, .55);
    animation: charged-vignette-in-b-xlvk3uysg6 .34s ease-out forwards, charged-vignette-breathe-b-xlvk3uysg6 2.1s ease-in-out .34s infinite;
}
@keyframes charged-vignette-in-b-xlvk3uysg6 { from { opacity: 0; } to { opacity: 1; } }
@keyframes charged-vignette-breathe-b-xlvk3uysg6 {
    0%, 100% { box-shadow: inset 0 0 120px 30px rgba(120, 18, 14, .42), inset 0 0 40px 8px rgba(0,0,0,.55); }
    50%      { box-shadow: inset 0 0 150px 40px rgba(150, 26, 18, .55), inset 0 0 40px 8px rgba(0,0,0,.55); }
}
.board.charged-pause .token-pos.charged-dim[b-xlvk3uysg6] {
    filter: saturate(.25) brightness(.6);
    opacity: .72;
    transition: filter .3s ease, opacity .3s ease;
}
.board.charged-pause .token-pos.charged-hero[b-xlvk3uysg6] {
    z-index: 6;
    filter: drop-shadow(0 0 10px var(--ward, #7fb5c9)) brightness(1.12);
    animation: charged-hero-pulse-b-xlvk3uysg6 1.5s ease-in-out infinite;
}
.board.charged-pause .token-pos.charged-enemy[b-xlvk3uysg6] {
    z-index: 6;
    filter: drop-shadow(0 0 12px var(--blood, #b0432f)) brightness(1.16);
    animation: charged-enemy-pulse-b-xlvk3uysg6 1.1s ease-in-out infinite;
}
@keyframes charged-hero-pulse-b-xlvk3uysg6 {
    0%, 100% { filter: drop-shadow(0 0 8px var(--ward, #7fb5c9)) brightness(1.1); }
    50%      { filter: drop-shadow(0 0 16px var(--ward, #7fb5c9)) brightness(1.22); }
}
@keyframes charged-enemy-pulse-b-xlvk3uysg6 {
    0%, 100% { filter: drop-shadow(0 0 10px var(--blood, #b0432f)) brightness(1.14); }
    50%      { filter: drop-shadow(0 0 20px #e0503a) brightness(1.3); }
}
.charged-tether[b-xlvk3uysg6] {
    stroke: #e0503a;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 9 7;
    filter: drop-shadow(0 0 5px rgba(224, 80, 58, .8));
    animation: charged-tether-flow-b-xlvk3uysg6 .9s linear infinite, charged-tether-glow-b-xlvk3uysg6 1.1s ease-in-out infinite;
}
@keyframes charged-tether-flow-b-xlvk3uysg6 { to { stroke-dashoffset: -32; } }
@keyframes charged-tether-glow-b-xlvk3uysg6 {
    0%, 100% { opacity: .75; }
    50%      { opacity: 1; }
}
.token-pos.charged-steadied[b-xlvk3uysg6] {
    z-index: 6;
    animation: charged-steadied-pulse-b-xlvk3uysg6 1.4s ease-out forwards;
}
@keyframes charged-steadied-pulse-b-xlvk3uysg6 {
    0%   { filter: drop-shadow(0 0 4px var(--player-line, #8fd06f)) brightness(1.1); }
    25%  { filter: drop-shadow(0 0 18px var(--player-line, #8fd06f)) brightness(1.3); }
    100% { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    .board.charged-pause[b-xlvk3uysg6]::after { animation: charged-vignette-in-b-xlvk3uysg6 .34s ease-out forwards; }
    .board.charged-pause .token-pos.charged-hero[b-xlvk3uysg6],
    .board.charged-pause .token-pos.charged-enemy[b-xlvk3uysg6] { animation: none; }
    .charged-tether[b-xlvk3uysg6] { animation: charged-tether-glow-b-xlvk3uysg6 1.1s ease-in-out infinite; }
    .token-pos.charged-steadied[b-xlvk3uysg6] { animation: none; }
}
/* /Components/SiteDeployView.razor.rz.scp.css */
.site-deploy-wrap[b-cjc0w6evp9] { max-width: 1200px; margin: 0 auto; }
.site-deploy-body[b-cjc0w6evp9] {
    display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-4);
    align-items: start;
}

.deploy-tray[b-cjc0w6evp9] { position: sticky; top: var(--sp-3); }
.deploy-tray-cards[b-cjc0w6evp9] {
    display: flex; flex-direction: column; gap: 6px; margin: var(--sp-2) 0;
}
.deploy-hero-card[b-cjc0w6evp9] {
    text-align: left; background: var(--panel-2); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; color: var(--ink);
    transition: border-color .15s, background .15s;
}
.deploy-hero-card:hover[b-cjc0w6evp9] { border-color: var(--gold); }
.deploy-hero-card.selected[b-cjc0w6evp9] { border-color: var(--gold-bright); background: var(--panel-3); box-shadow: 0 0 0 1px var(--gold-bright); }
.deploy-hero-card.placed[b-cjc0w6evp9] { opacity: .7; }
.deploy-hero-card.placed .deploy-hero-name[b-cjc0w6evp9]::after { content: " ✓"; color: var(--player-line); }
.deploy-hero-name[b-cjc0w6evp9] { font-weight: 600; color: var(--gold); }
.deploy-quick-row[b-cjc0w6evp9] { margin: var(--sp-2) 0; }
.deploy-quick-btns[b-cjc0w6evp9] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.deploy-tray-actions[b-cjc0w6evp9] { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-2); }

.deploy-viewport[b-cjc0w6evp9] { min-height: clamp(380px, 58vh, 720px); }

.deploy-board .token[b-cjc0w6evp9] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    z-index: 4;
    pointer-events: none;
}
.deploy-board .ghost-token[b-cjc0w6evp9] { z-index: 3; }
.deploy-board .cursor-ghost[b-cjc0w6evp9] { z-index: 6; }

.token-settle[b-cjc0w6evp9] {
    animation: token-settle-b-cjc0w6evp9 120ms ease-out;
}
@keyframes token-settle-b-cjc0w6evp9 {
    0% { transform: translateY(-8px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

.deploy-range-ring[b-cjc0w6evp9] {
    position: absolute;
    border: 2px dashed var(--player-line);
    border-radius: 50%;
    opacity: .35;
    pointer-events: none;
    z-index: 2;
}

.deploy-zoc-tile[b-cjc0w6evp9] {
    position: absolute;
    background: var(--enemy);
    opacity: .12;
    box-shadow: inset 0 0 0 1px var(--enemy-line);
    pointer-events: none;
    z-index: 2;
}

.deploy-cover-glyph[b-cjc0w6evp9] {
    position: absolute;
    display: grid;
    place-items: center;
    opacity: .65;
    pointer-events: none;
    z-index: 2;
    animation: cover-glyph-in-b-cjc0w6evp9 .18s ease-out;
}
@keyframes cover-glyph-in-b-cjc0w6evp9 {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: .65; transform: scale(1); }
}

.deploy-overlay[b-cjc0w6evp9] {
    position: absolute; inset: 0; z-index: 8; pointer-events: none;
}
.deploy-zone-tint[b-cjc0w6evp9] { fill: var(--player); opacity: .08; }
.deploy-tile[b-cjc0w6evp9] {
    fill: transparent; stroke: transparent; pointer-events: none; transition: fill .12s;
}
.deploy-tile.clickable[b-cjc0w6evp9] {
    fill: var(--player); fill-opacity: .1; stroke: var(--player-line); stroke-opacity: .28;
    pointer-events: auto; cursor: pointer;
}
.deploy-tile.clickable:hover[b-cjc0w6evp9], .deploy-tile.hot[b-cjc0w6evp9] {
    fill-opacity: .24; stroke-opacity: .55;
}
.deploy-tile.occupied[b-cjc0w6evp9] { fill: var(--gold); fill-opacity: .12; pointer-events: auto; cursor: pointer; }
.deploy-tile.blocked[b-cjc0w6evp9] { fill: var(--enemy); fill-opacity: .06; pointer-events: none; }
.deploy-tile.invalid[b-cjc0w6evp9] {
    fill: var(--blood); fill-opacity: .12; stroke: var(--blood); stroke-opacity: .35;
    pointer-events: auto; cursor: not-allowed;
}

.deploy-los-line[b-cjc0w6evp9] {
    stroke: var(--player-line);
    stroke-opacity: .22;
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
    pointer-events: none;
}

.deploy-legend[b-cjc0w6evp9] { display: flex; gap: 12px; align-items: center; margin-top: 6px; grid-column: 2; }
.legend-swatch[b-cjc0w6evp9] { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 2px; vertical-align: middle; }
.legend-swatch.deploy-zone-tint[b-cjc0w6evp9] { background: var(--player); opacity: .3; }
.legend-swatch.hero-marker[b-cjc0w6evp9] { background: var(--gold); opacity: .5; }
.legend-swatch.enemy-ghost[b-cjc0w6evp9] { background: var(--enemy-line); opacity: .5; }

@media (max-width: 760px) {
    .site-deploy-body[b-cjc0w6evp9] { grid-template-columns: 1fr; }
    .deploy-tray[b-cjc0w6evp9] { position: static; }
    .deploy-legend[b-cjc0w6evp9] { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .token-settle[b-cjc0w6evp9] { animation: none; }
}

/* ── Module cover brief — "opening the module" beat ───────────────────────── */
/* Parity with DeployView: full cover portrait on the left, site intel on the right. */

.site-deploy-cover-brief[b-cjc0w6evp9] { margin-bottom: var(--sp-4); }

.deploy-brief-module-row[b-cjc0w6evp9] {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
}

.deploy-brief-intel[b-cjc0w6evp9] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.deploy-brief-title[b-cjc0w6evp9] {
    font-size: var(--ts-lg);
    color: var(--gold-bright);
    margin-bottom: var(--sp-1);
}

.deploy-brief-chips[b-cjc0w6evp9] { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-start; }
.deploy-brief-enemies[b-cjc0w6evp9] { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--sp-2); }

.site-keystone-tag[b-cjc0w6evp9] {
    color: var(--gold-bright);
    font-weight: 600;
}

/* Cover place animation — "dropping the module on the table" (mirrors DeployView P1-15) */
.deploy-cover-place[b-cjc0w6evp9] {
    flex-shrink: 0;
    animation: site-cover-place-b-cjc0w6evp9 .45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes site-cover-place-b-cjc0w6evp9 {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96) rotate(-0.5deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@media (max-width: 600px) {
    .deploy-brief-module-row[b-cjc0w6evp9] { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
    .deploy-cover-place[b-cjc0w6evp9] { animation: none; }
}
/* /Components/SpeechBubble.razor.rz.scp.css */
/* SpeechBubble — parchment speech-bubble overlay (ART_BIBLE §8 "Banter bubbles"). Scoped.
   Sits above tokens for the beat then self-clears (mirrors CombatFx's lifecycle). Colours ride the
   SVG-simple compatibility parchment tokens; tone drives the tail/edge tint. Reduced-motion = a soft fade. */

.speech-bubble[b-bqqvh70a6d] {
    position: absolute;
    z-index: 7;                  /* over CombatFx (z6), tokens (z2) — the voice must read on top */
    transform: translate(-50%, 0);
    max-width: 220px;
    min-width: 90px;
    padding: 8px 12px 10px;
    background: linear-gradient(180deg, var(--page) 0%, var(--page-faded) 100%);
    color: var(--pit);
    border: 1px solid var(--leather);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 0 1px var(--hairline) inset;
    font: 13px/1.35 var(--font-display);
    text-align: center;
    pointer-events: none;        /* the voice is never a click target */
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-name: bubble-pop-b-bqqvh70a6d;
    will-change: transform, opacity;
}

.bubble-text[b-bqqvh70a6d] { display: block; font-style: italic; }

/* the little tail pointing down at the speaker */
.bubble-tail[b-bqqvh70a6d] {
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--page-faded);
    border-right: 1px solid var(--leather);
    border-bottom: 1px solid var(--leather);
}

/* tone tints the tail + edge so a fierce rally reads differently from a panicked flinch */
.speech-bubble.tone-default[b-bqqvh70a6d]   { border-color: var(--leather); }
.speech-bubble.tone-fierce[b-bqqvh70a6d],
.speech-bubble.tone-wild[b-bqqvh70a6d],
.speech-bubble.tone-triumphant[b-bqqvh70a6d] { border-color: var(--gold-tarnished); }
.speech-bubble.tone-fierce .bubble-tail[b-bqqvh70a6d],
.speech-bubble.tone-wild .bubble-tail[b-bqqvh70a6d],
.speech-bubble.tone-triumphant .bubble-tail[b-bqqvh70a6d] { border-color: var(--gold-tarnished); }
.speech-bubble.tone-afraid[b-bqqvh70a6d],
.speech-bubble.tone-panicked[b-bqqvh70a6d],
.speech-bubble.tense[b-bqqvh70a6d] { border-color: var(--blood); }
.speech-bubble.tone-afraid .bubble-tail[b-bqqvh70a6d],
.speech-bubble.tone-panicked .bubble-tail[b-bqqvh70a6d] { border-color: var(--blood); }
.speech-bubble.tone-wry[b-bqqvh70a6d],
.speech-bubble.tone-smug[b-bqqvh70a6d] { border-color: var(--steel); }
.speech-bubble.tone-wry .bubble-tail[b-bqqvh70a6d],
.speech-bubble.tone-smug .bubble-tail[b-bqqvh70a6d] { border-color: var(--steel); }

@keyframes bubble-pop-b-bqqvh70a6d {
    0%   { opacity: 0; transform: translate(-50%, 6px) scale(.85); }
    14%  { opacity: 1; transform: translate(-50%, 0) scale(1.03); }
    78%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -4px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .speech-bubble[b-bqqvh70a6d] { animation-name: bubble-fade-b-bqqvh70a6d; animation-duration: 400ms !important; }
    @keyframes bubble-fade-b-bqqvh70a6d { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
}
/* /Components/StatCard4E.razor.rz.scp.css */
/* Stat card — class-tinted title bar, a portrait bust that bleeds into the parchment, defense boxes,
   ability row, and a power line that names the attack kind + die. The 5E character data restyled into
   a tabletop stat-card grammar. */

.sc4e[b-7d6lie57xx] {
    --role: var(--gold);
    --sc-parch: color-mix(in srgb, var(--parch) 88%, #ffffff);
    --sc-ink: #21170d;
    position: relative;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(110% 72% at 72% 18%, color-mix(in srgb, var(--role) 12%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--parch) 92%, white), color-mix(in srgb, var(--parch-dim) 86%, white));
    border: 1px solid color-mix(in srgb, var(--gold) 48%, #14110b);
    border-left: 4px solid color-mix(in srgb, var(--role) 74%, var(--gold));
    border-radius: var(--r-sm);
    color: var(--sc-ink);
    font-family: var(--font-body);
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 10px 26px rgba(0, 0, 0, 0.34);
}

/* ── Class-coded band colour (replaces the old 4E role label; the colour stays, the badge is gone) ── */
.sc4e.role-defender[b-7d6lie57xx]   { --role: var(--ward); }
.sc4e.role-striker[b-7d6lie57xx]    { --role: var(--enemy-line); }
.sc4e.role-controller[b-7d6lie57xx] { --role: var(--acc-forbidden); }
.sc4e.role-leader[b-7d6lie57xx]     { --role: var(--acc-faith); }
.sc4e.role-adventurer[b-7d6lie57xx] { --role: var(--gold); }

/* ── Subtle standout: a quiet warm shimmer for genuinely exceptional recruits. No tier, no label. ── */
.sc4e-standout[b-7d6lie57xx] {
    border-color: var(--gold-bright);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--gold-bright) 46%, transparent),
        0 0 18px color-mix(in srgb, var(--gold) 26%, transparent),
        0 12px 28px rgba(0, 0, 0, 0.38);
    animation: sc4e-standout-breathe-b-7d6lie57xx 3.6s ease-in-out infinite;
}
@keyframes sc4e-standout-breathe-b-7d6lie57xx {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--gold-bright) 44%, transparent),
            0 0 14px color-mix(in srgb, var(--gold) 20%, transparent),
            0 12px 28px rgba(0, 0, 0, 0.38);
    }
    50% {
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--gold-bright) 70%, transparent),
            0 0 26px color-mix(in srgb, var(--gold-bright) 34%, transparent),
            0 12px 28px rgba(0, 0, 0, 0.40);
    }
}

/* ── Title bar ── */
.sc4e-band[b-7d6lie57xx] {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.28)),
        color-mix(in srgb, var(--role) 46%, var(--panel));
    color: var(--parch);
    padding: 7px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 34%, #14110b);
}

.sc4e-titleblock[b-7d6lie57xx] { flex: 1; min-width: 0; }

.sc4e-name[b-7d6lie57xx] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.sc4e-sub[b-7d6lie57xx] {
    font-size: 0.56rem;
    letter-spacing: 0;
    opacity: 0.88;
    text-transform: uppercase;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Behaviour icons (temperament) — hover for the full profile via the icon's <title> ── */
.sc4e-behaviors[b-7d6lie57xx] { display: flex; gap: 3px; flex-shrink: 0; align-items: center; }
.sc4e-bhv[b-7d6lie57xx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 0 0 1px rgba(246, 238, 214, 0.22);
    cursor: help;
}
.sc4e-bhv.good[b-7d6lie57xx] { color: #c2e7ab; }
.sc4e-bhv.bad[b-7d6lie57xx]  { color: #f0b489; }

/* ── Art zone: the bust bleeds in from the right; the flavor reads over the parchment at left ── */
.sc4e-art-zone[b-7d6lie57xx] {
    position: relative;
    z-index: 1;
    min-height: 132px;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid rgba(20, 17, 11, 0.14);
    overflow: visible;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--sc-parch) 88%, transparent) 0 42%, transparent 82%),
        radial-gradient(80% 74% at 82% 18%, color-mix(in srgb, var(--role) 18%, transparent), transparent 70%);
}
.sc4e-art[b-7d6lie57xx] {
    position: absolute;
    top: -18px;
    right: -12px;
    bottom: -96px;
    width: 76%;
    z-index: 0;
    opacity: 0.9;
}
/* paper grain over the whole art zone so the figure reads as an ink-and-wash plate, not a flat asset */
.sc4e-art-zone[b-7d6lie57xx]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.09;
    mix-blend-mode: multiply;
}
.sc4e-flavor[b-7d6lie57xx] {
    position: relative;
    z-index: 3;
    width: 60%;
    margin: 8px 0 10px 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.64rem;
    line-height: 1.32;
    color: color-mix(in srgb, var(--sc-ink) 78%, var(--panel));
    padding: 7px 9px;
    background: color-mix(in srgb, var(--sc-parch) 44%, transparent);
    border-left: 2px solid color-mix(in srgb, var(--gold) 38%, transparent);
    border-radius: 4px;
}

/* (The bust feather/duotone treatment lives in HeroPortrait.razor.css under .sz-bleed —
   self-contained there so it doesn't depend on cross-component :deep.) */

/* ── Sponsor affiliation tag ── */
.sc4e-sworn[b-7d6lie57xx] {
    position: relative;
    z-index: 3;
    font-family: var(--font-body);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--gold) 72%, var(--sc-ink));
    background: color-mix(in srgb, var(--gold) 18%, transparent);
    border-bottom: 1px solid rgba(20, 17, 11, 0.1);
    padding: 3px 10px;
}

/* ── Defense boxes (AC / FORT / REF / WILL) ── */
.sc4e-defs[b-7d6lie57xx] {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: color-mix(in srgb, var(--sc-parch) 54%, transparent);
    border-bottom: 1px solid rgba(20, 17, 11, 0.18);
}
.sc4e-def[b-7d6lie57xx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 0;
    border-right: 1px solid rgba(20, 17, 11, 0.13);
}
.sc4e-def:last-child[b-7d6lie57xx] { border-right: none; }
.sc4e-def span[b-7d6lie57xx] {
    font-size: 0.44rem;
    font-weight: 700;
    letter-spacing: 0;
    color: color-mix(in srgb, var(--sc-ink) 55%, var(--muted));
}
.sc4e-def b[b-7d6lie57xx] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1;
    color: var(--sc-ink);
    font-weight: 700;
}
.sc4e-def-ac[b-7d6lie57xx] { background: color-mix(in srgb, var(--role) 16%, transparent); }
.sc4e-def-ac b[b-7d6lie57xx] { color: var(--role); }

/* ── Vitals row (HP / Init / Speed) ── */
.sc4e-vitals[b-7d6lie57xx] {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.6rem;
    color: color-mix(in srgb, var(--sc-ink) 82%, var(--panel));
    background: color-mix(in srgb, var(--sc-parch) 44%, transparent);
    border-bottom: 1px solid rgba(20, 17, 11, 0.12);
}
.sc4e-hp[b-7d6lie57xx] {
    font-weight: 800;
    font-size: 0.64rem;
    color: color-mix(in srgb, var(--enemy-line) 72%, var(--sc-ink));
    background: color-mix(in srgb, var(--enemy-line) 12%, transparent);
    padding: 0px 5px;
    border-radius: 3px;
}

/* ── Ability score row ── */
.sc4e-abilities[b-7d6lie57xx] {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding: 5px 4px;
    background: color-mix(in srgb, var(--sc-parch) 50%, transparent);
    border-bottom: 1px solid rgba(20, 17, 11, 0.12);
}
.sc4e-ab[b-7d6lie57xx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: 38px;
    position: relative;
    border-radius: 3px;
}
.sc4e-ab-k[b-7d6lie57xx] { font-size: 0.44rem; font-weight: 700; letter-spacing: 0; color: color-mix(in srgb, var(--sc-ink) 56%, var(--muted)); }
.sc4e-ab-v[b-7d6lie57xx] { font-family: Georgia, serif; font-size: 0.8rem; line-height: 1.1; font-weight: 700; }
.sc4e-ab-m[b-7d6lie57xx] { font-size: 0.5rem; color: color-mix(in srgb, var(--sc-ink) 68%, var(--muted)); }
.sc4e-ab.notable[b-7d6lie57xx] { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.sc4e-ab.peak[b-7d6lie57xx] {
    background: color-mix(in srgb, var(--enemy-line) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--enemy-line) 26%, transparent);
}
.sc4e-ab-note[b-7d6lie57xx] {
    position: absolute;
    right: 2px;
    top: 1px;
    font-size: 0.42rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--enemy-line) 76%, var(--sc-ink));
}

/* ── Powers ── */
.sc4e-powers[b-7d6lie57xx] {
    position: relative;
    z-index: 3;
    padding: 7px 10px 9px;
    margin-top: auto;
    background: color-mix(in srgb, var(--sc-parch) 42%, transparent);
}
.sc4e-power[b-7d6lie57xx] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 5px 6px;
    padding: 4px 7px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--player-line) 13%, transparent);
    border-left: 3px solid var(--player-line);
}
.sc4e-power.spell[b-7d6lie57xx] {
    background: color-mix(in srgb, var(--acc-forbidden) 14%, transparent);
    border-left-color: var(--acc-forbidden);
}
.sc4e-diamond[b-7d6lie57xx] { color: var(--player-line); font-size: 0.7rem; }
.sc4e-power.spell .sc4e-diamond[b-7d6lie57xx] { color: var(--acc-forbidden); }
.sc4e-power-name[b-7d6lie57xx] { font-weight: 700; font-size: 0.64rem; color: var(--sc-ink); }
.sc4e-power-tag[b-7d6lie57xx] {
    font-size: 0.44rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--player-line) 70%, var(--sc-ink));
}
.sc4e-power.spell .sc4e-power-tag[b-7d6lie57xx] { color: color-mix(in srgb, var(--acc-forbidden) 72%, var(--sc-ink)); }
.sc4e-power-line[b-7d6lie57xx] {
    grid-column: 1 / -1;
    font-size: 0.57rem;
    color: color-mix(in srgb, var(--sc-ink) 78%, var(--panel));
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

/* ── Footer (hire button, rare caption etc.) ── */
.sc4e-foot[b-7d6lie57xx] {
    margin-top: auto;
    padding: 6px 10px 9px;
    position: relative;
    z-index: 4;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--sc-parch) 18%, transparent), color-mix(in srgb, var(--panel) 10%, transparent));
}

/* ── F13 Gamble / mystery mode ─────────────────────────────────────────── */

/* Neutral guild-gold header so the player can't read class from the band colour. */
.sc4e.sc4e-gamble[b-7d6lie57xx] { --role: var(--gold); }

.sc4e-gamble-body[b-7d6lie57xx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 10px 12px;
    flex: 1;
}

.sc4e-gamble-archetype[b-7d6lie57xx] {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--gold) 78%, var(--sc-ink));
    letter-spacing: 0;
    text-align: center;
}

.sc4e-gamble-mystery[b-7d6lie57xx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 18px 0 14px;
    border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
    border-radius: 4px;
    background: radial-gradient(ellipse 80% 60% at 50% 38%, color-mix(in srgb, var(--gold) 11%, transparent) 0%, transparent 72%);
    margin-top: 2px;
}

.sc4e-gamble-qmark[b-7d6lie57xx] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--gold-bright) 68%, transparent);
    text-shadow: 0 0 20px color-mix(in srgb, var(--gold) 38%, transparent), 0 2px 4px rgba(0, 0, 0, 0.35);
    animation: gamble-shimmer-b-7d6lie57xx 2.8s ease-in-out infinite;
}
@keyframes gamble-shimmer-b-7d6lie57xx {
    0%, 100% { opacity: 0.68; text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 38%, transparent), 0 2px 4px rgba(0, 0, 0, 0.35); }
    50% { opacity: 0.94; text-shadow: 0 0 32px color-mix(in srgb, var(--gold-bright) 72%, transparent), 0 0 8px color-mix(in srgb, var(--gold-bright) 48%, transparent), 0 2px 4px rgba(0, 0, 0, 0.3); }
}

.sc4e-gamble-hint[b-7d6lie57xx] {
    font-family: var(--font-body);
    font-size: 0.48rem;
    letter-spacing: 0;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--gold) 42%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .sc4e-gamble-qmark[b-7d6lie57xx] { animation: none !important; opacity: 0.78; }
    .sc4e-standout[b-7d6lie57xx] { animation: none !important; }
}
/* /Components/StrategicResourceBar.razor.rz.scp.css */
.strategic-bar[b-hlgpxrrezh] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 0;
    height: 44px;
    padding: 0 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.26)),
        linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, transparent), color-mix(in srgb, var(--bg) 91%, transparent));
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 18%, transparent),
        inset 0 -1px 0 rgba(0, 0, 0, 0.46),
        0 10px 28px rgba(0, 0, 0, 0.28);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.82rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.strategic-stat[b-hlgpxrrezh] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 12px;
    min-width: 0;
    color: var(--ink);
}

.strategic-stat:first-child[b-hlgpxrrezh] {
    padding-left: 0;
}

.strategic-divider[b-hlgpxrrezh] {
    width: 1px;
    height: 20px;
    flex: 0 0 auto;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gold) 36%, transparent) 50%, transparent);
}

.strategic-ico[b-hlgpxrrezh],
.strategic-stat :deep(.game-icon)[b-hlgpxrrezh] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--sponsor-accent, var(--gold));
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sponsor-accent, var(--gold)) 45%, transparent));
}

.strategic-value[b-hlgpxrrezh] {
    font-weight: 800;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    animation: strategic-pop-b-hlgpxrrezh 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes strategic-pop-b-hlgpxrrezh {
    0% { color: var(--gold-bright); text-shadow: 0 0 10px color-mix(in srgb, var(--gold-bright) 72%, transparent); transform: scale(1.10); }
    45% { color: var(--gold-bright); }
    100% { color: inherit; text-shadow: none; transform: scale(1); }
}

.strategic-label[b-hlgpxrrezh] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--parch-dim) 70%, transparent);
}

.strategic-mandate[b-hlgpxrrezh] {
    max-width: 240px;
}

.strategic-mandate .strategic-label[b-hlgpxrrezh] {
    max-width: 132px;
}

.strategic-context[b-hlgpxrrezh] {
    height: 32px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: min(34vw, 420px);
    padding: 0 12px;
    color: var(--gold-bright);
    background:
        linear-gradient(180deg, rgba(230, 195, 111, 0.07), rgba(0, 0, 0, 0.20)),
        color-mix(in srgb, var(--panel) 56%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 36%, transparent);
    border-radius: var(--r-sm);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 20%, transparent),
        0 4px 16px rgba(0, 0, 0, 0.24);
}

.strategic-context-mark[b-hlgpxrrezh] {
    width: 26px;
    height: 20px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    color: var(--sponsor-accent, var(--gold));
    border: 1px solid color-mix(in srgb, var(--sponsor-accent, var(--gold)) 42%, transparent);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1;
}

.strategic-context-main[b-hlgpxrrezh] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display, Georgia, serif);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0;
}

.strategic-context-sub[b-hlgpxrrezh] {
    flex: 0 0 auto;
    padding-left: 8px;
    border-left: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
    color: color-mix(in srgb, var(--parch-dim) 76%, transparent);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.strategic-clock[b-hlgpxrrezh] {
    height: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px 0 7px;
    color: var(--gold);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.24)),
        color-mix(in srgb, var(--panel) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
    border-radius: 999px;
}

.strategic-clock-dawn[b-hlgpxrrezh] { color: var(--gold); }
.strategic-clock-day[b-hlgpxrrezh] { color: var(--gold-bright); }
.strategic-clock-dusk[b-hlgpxrrezh] { color: var(--gold); }
.strategic-clock-night[b-hlgpxrrezh] { color: var(--ward); }

.strategic-dial[b-hlgpxrrezh] {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

.strategic-clock-label[b-hlgpxrrezh] {
    white-space: nowrap;
    font-family: var(--font-display, Georgia, serif);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--parch);
}

.strategic-day[b-hlgpxrrezh] {
    flex: 0 0 auto;
    padding-right: 0;
}

.strategic-day :deep(.game-icon)[b-hlgpxrrezh] {
    color: var(--muted);
}

@media (max-width: 980px) {
    .strategic-mandate[b-hlgpxrrezh],
    .strategic-context-sub[b-hlgpxrrezh],
    .strategic-label[b-hlgpxrrezh] {
        display: none;
    }

    .strategic-context[b-hlgpxrrezh] {
        max-width: 34vw;
        padding-inline: 9px;
    }
}

@media (max-width: 680px) {
    .strategic-bar[b-hlgpxrrezh] {
        padding-inline: 8px;
    }

    .strategic-stat[b-hlgpxrrezh] {
        padding-inline: 7px;
    }

    .strategic-context[b-hlgpxrrezh] {
        display: none;
    }

    .strategic-clock-label[b-hlgpxrrezh] {
        font-size: 0.68rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .strategic-value[b-hlgpxrrezh] {
        animation: none !important;
    }

    .strategic-bar[b-hlgpxrrezh] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}
/* /Components/TableRulesSettingsFields.razor.rz.scp.css */
.table-rules-fields .table-rules-row[b-fej779csol] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0;
    font-size: 14px;
    line-height: 1.35;
}
.table-rules-fields .table-rules-row.indent[b-fej779csol] { margin-left: 18px; opacity: 0.92; }
.table-rules-fields .table-rules-row input[type="range"][b-fej779csol] { flex: 1; }
/* /Components/TerrainLegend.razor.rz.scp.css */
.terrain-legend[b-sccmq3ds6y] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    padding: 5px 10px;
    margin-top: 6px;
    background: var(--panel-2, #141518);
    border: 1px solid var(--line);
    border-radius: 6px;
    font: 600 11px/1 var(--font-display);
    color: var(--muted);
    opacity: 0.92;
}
.tl-item[b-sccmq3ds6y] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    cursor: help;
    transition: color .15s;
}
.tl-item:hover[b-sccmq3ds6y] { color: var(--ink); }
.tl-swatch[b-sccmq3ds6y] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #00000055;
    flex-shrink: 0;
}
.tl-obstacle[b-sccmq3ds6y] {
    background: var(--trn-obstacle-bg);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, var(--trn-obstacle) 2px, var(--trn-obstacle) 3px);
}
.tl-cover-half[b-sccmq3ds6y] { background: var(--trn-cover-half-bg); box-shadow: inset 0 0 0 2px var(--trn-cover-half); }
.tl-cover-full[b-sccmq3ds6y] { background: var(--trn-cover-full-bg); box-shadow: inset 0 0 0 2px var(--trn-cover-full); }
.tl-difficult[b-sccmq3ds6y] {
    background: var(--trn-difficult-bg);
    background-image: radial-gradient(circle at 30% 30%, var(--trn-difficult) 1px, transparent 1px),
                      radial-gradient(circle at 70% 70%, var(--trn-difficult) 1px, transparent 1px);
    background-size: 5px 5px;
}
.tl-elevation[b-sccmq3ds6y] { background: var(--trn-elevation-bg); box-shadow: inset 0 -3px 0 var(--trn-elevation); }
/* /Components/TerrainOverlay.razor.rz.scp.css */
/* TerrainOverlay — premium battle mat (Issue #7). Colours via app.css --trn-* tokens. */

.terrain-overlay[b-o4yliosxz3] {
    pointer-events: none;
    opacity: 0.92;
}

.terrain-overlay.trn-region-spine[b-o4yliosxz3] {
    --trn-mat-grain: #8ab0c8;
    --trn-open-edge: #6a8090;
}
.terrain-overlay.trn-region-greenmark[b-o4yliosxz3] {
    --trn-mat-grain: #4a6a3a;
    --trn-open-edge: #3a5030;
}
.terrain-overlay.trn-region-reach[b-o4yliosxz3] {
    --trn-mat-grain: #8a7040;
    --trn-open-edge: #6a5530;
}
.terrain-overlay.trn-region-barrens[b-o4yliosxz3] {
    --trn-mat-grain: #5a4a4a;
    --trn-open-edge: #4a3a3a;
}
.terrain-overlay.trn-region-vault[b-o4yliosxz3] {
    --trn-mat-grain: #6a6570;
    --trn-open-edge: #504a55;
}
.terrain-overlay.trn-region-neutral[b-o4yliosxz3] {
    --trn-mat-grain: #5a5040;
    --trn-open-edge: #4a4035;
}

.trn-tile.trn-hovered[b-o4yliosxz3] { filter: brightness(1.12); }

.trn-entry-ripple[b-o4yliosxz3] {
    animation: trn-ripple-pulse-b-o4yliosxz3 .55s ease-out forwards;
}
@keyframes trn-ripple-pulse-b-o4yliosxz3 {
    0%   { opacity: 0.35; transform-origin: center; }
    40%  { opacity: 0.18; }
    100% { opacity: 0; }
}

.trn-hover-ring[b-o4yliosxz3] {
    animation: trn-hover-pulse-b-o4yliosxz3 1.2s ease-in-out infinite;
}
@keyframes trn-hover-pulse-b-o4yliosxz3 {
    0%, 100% { stroke-opacity: 0.45; }
    50%      { stroke-opacity: 0.75; }
}

.terrain-tooltip[b-o4yliosxz3] {
    position: absolute;
    z-index: 15;
    transform: translate(-50%, -100%);
    padding: 3px 8px;
    background: var(--pit);
    border: 1px solid var(--gold-tarnished);
    border-radius: 4px;
    font: 600 11px/1.3 var(--font-display);
    color: var(--gold-bright);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 3px 10px #00000090;
    animation: trn-tip-in-b-o4yliosxz3 .12s ease-out;
}
@keyframes trn-tip-in-b-o4yliosxz3 {
    from { opacity: 0; transform: translate(-50%, calc(-100% + 4px)); }
    to   { opacity: 1; transform: translate(-50%, -100%); }
}

@media (prefers-reduced-motion: reduce) {
    .trn-entry-ripple[b-o4yliosxz3], .trn-hover-ring[b-o4yliosxz3], .terrain-tooltip[b-o4yliosxz3] { animation: none; }
}
/* /Components/TitleOverheadScene.razor.rz.scp.css */
/* Title overhead — cel-shaded table + fixed candlelight (no cursor flashlight) */

.title-overhead[b-5j27hpqg08] {
    --font-toc: "Jost", "Century Gothic", "Futura", "Trebuchet MS", sans-serif;
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #030405;
}

.title-overhead.title-book-open .title-ambient-dim[b-5j27hpqg08] {
    background: rgba(2, 4, 8, 0.28);
}
.title-overhead.title-book-open .title-overhead-scene[b-5j27hpqg08] {
    filter: brightness(0.7) saturate(1.1) contrast(1.1);
}
.title-overhead.title-book-open .title-candle-glow--book[b-5j27hpqg08] {
    opacity: 1;
}
.title-overhead.title-book-open[b-5j27hpqg08]  .title-book-stage {
    filter: brightness(0.86) saturate(1.08) contrast(1.06);
}
.title-overhead.title-book-open[b-5j27hpqg08]  .title-book-lit-wash {
    opacity: 1;
}

/* Fade from black + slight zoom into the game room on first load */
.title-overhead-enter .title-overhead-scene[b-5j27hpqg08] {
    animation: title-room-enter-b-5j27hpqg08 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.title-overhead-enter .title-candle-lights[b-5j27hpqg08] {
    animation: title-candle-enter-b-5j27hpqg08 1.5s ease-out forwards;
}
@keyframes title-room-enter-b-5j27hpqg08 {
    from {
        transform: scale(1.06);
        opacity: 0;
        filter: brightness(0.2) saturate(0.9) contrast(1.05);
    }
    to {
        transform: scale(1);
        opacity: 1;
        filter: brightness(0.58) saturate(1.08) contrast(1.12);
    }
}
@keyframes title-candle-enter-b-5j27hpqg08 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.title-overhead-scene[b-5j27hpqg08] {
    position: absolute;
    inset: 0;
    z-index: 0;
    filter: brightness(0.58) saturate(1.08) contrast(1.12);
}
.title-overhead-scene svg[b-5j27hpqg08] {
    width: 100%;
    height: 100%;
    display: block;
}

/* Uniform room darkness — candle pools provide the warmth */
.title-ambient-dim[b-5j27hpqg08] {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(2, 4, 8, 0.48);
}

/* Fixed candle spill — aligned to SVG flame positions (1600×1000 viewBox) */
.title-candle-lights[b-5j27hpqg08] {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.title-candle-glow[b-5j27hpqg08] {
    position: absolute;
    pointer-events: none;
    filter: blur(32px);
    mix-blend-mode: soft-light;
    animation: candle-flicker-b-5j27hpqg08 4.2s ease-in-out infinite;
}

.title-candle-glow--left[b-5j27hpqg08] {
    left: 16.25%;
    top: 29%;
    width: 50vmin;
    height: 50vmin;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(
            ellipse 38% 34% at 50% 46%,
            rgba(255, 220, 150, 0.26) 0%,
            rgba(255, 185, 100, 0.1) 38%,
            transparent 64%
        );
    animation-delay: 0s;
}

.title-candle-glow--right[b-5j27hpqg08] {
    left: 83.75%;
    top: 31%;
    width: 48vmin;
    height: 48vmin;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(
            ellipse 36% 32% at 50% 44%,
            rgba(255, 215, 140, 0.24) 0%,
            rgba(255, 175, 95, 0.1) 36%,
            transparent 62%
        );
    animation-delay: -1.4s;
}

.title-candle-glow--book[b-5j27hpqg08] {
    left: 67.5%;
    top: 62%;
    width: 52vmin;
    height: 52vmin;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(
            ellipse 44% 38% at 48% 42%,
            rgba(255, 210, 145, 0.28) 0%,
            rgba(255, 175, 100, 0.12) 40%,
            transparent 66%
        );
    animation-delay: -2.6s;
    opacity: 0.94;
}

/* Bright flame cores — makes candles readable as objects */
.title-candle-flare[b-5j27hpqg08] {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(2px);
    mix-blend-mode: screen;
    animation: candle-flare-flicker-b-5j27hpqg08 3.6s ease-in-out infinite;
}
.title-candle-flare--left[b-5j27hpqg08] {
    left: 16.25%;
    top: 29%;
    width: 14px;
    height: 18px;
    transform: translate(-50%, -60%);
    background: radial-gradient(ellipse at 50% 80%, #fff8e8 0%, #ffcf7a 45%, transparent 72%);
    box-shadow: 0 0 18px rgba(255, 190, 90, 0.75), 0 0 36px rgba(255, 150, 60, 0.35);
    animation-delay: 0s;
}
.title-candle-flare--right[b-5j27hpqg08] {
    left: 83.75%;
    top: 31%;
    width: 12px;
    height: 16px;
    transform: translate(-50%, -60%);
    background: radial-gradient(ellipse at 50% 80%, #fff8e8 0%, #ffcf7a 45%, transparent 72%);
    box-shadow: 0 0 16px rgba(255, 190, 90, 0.7), 0 0 32px rgba(255, 150, 60, 0.32);
    animation-delay: -1.1s;
}
.title-candle-flare--book[b-5j27hpqg08] {
    left: 67.5%;
    top: 62%;
    width: 11px;
    height: 15px;
    transform: translate(-50%, -60%);
    background: radial-gradient(ellipse at 50% 80%, #fff8e8 0%, #ffcf7a 45%, transparent 72%);
    box-shadow: 0 0 14px rgba(255, 190, 90, 0.68), 0 0 28px rgba(255, 150, 60, 0.3);
    animation-delay: -2.2s;
}
@keyframes candle-flare-flicker-b-5j27hpqg08 {
    0%, 100% { opacity: 0.82; transform: translate(-50%, -60%) scale(0.96); }
    30% { opacity: 1; transform: translate(-49%, -61%) scale(1.04); }
    55% { opacity: 0.88; transform: translate(-50%, -59%) scale(0.98); }
    78% { opacity: 0.96; transform: translate(-51%, -60%) scale(1.02); }
}

/* Warm spill across the open spread — three balanced pools, no top-left flashlight */
.title-book-candle-spill[b-5j27hpqg08] {
    position: fixed;
    z-index: 8;
    left: 12%;
    top: 17%;
    width: 76%;
    height: 64%;
    transform: rotate(2deg);
    transform-origin: 50% 50%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 38% 34% at 16% 29%, rgba(255, 205, 130, 0.16) 0%, transparent 58%),
        radial-gradient(ellipse 36% 32% at 84% 31%, rgba(255, 195, 120, 0.14) 0%, transparent 56%),
        radial-gradient(ellipse 44% 38% at 67% 62%, rgba(255, 190, 110, 0.18) 0%, transparent 60%);
    mix-blend-mode: soft-light;
    animation: book-spill-flicker-b-5j27hpqg08 4.2s ease-in-out infinite;
    animation-delay: -1.8s;
}
@keyframes book-spill-flicker-b-5j27hpqg08 {
    0%, 100% { opacity: 0.84; }
    25% { opacity: 0.94; }
    50% { opacity: 0.8; }
    75% { opacity: 0.9; }
}

@keyframes candle-flicker-b-5j27hpqg08 {
    0%, 100% {
        opacity: 0.78;
        transform: translate(-50%, -50%) scale(0.97);
    }
    18% {
        opacity: 0.92;
        transform: translate(-49%, -51%) scale(1.01);
    }
    36% {
        opacity: 0.84;
        transform: translate(-50%, -50%) scale(0.99);
    }
    52% {
        opacity: 0.96;
        transform: translate(-51%, -49%) scale(1.02);
    }
    68% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.98);
    }
    84% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1);
    }
}

.title-vignette-overhead[b-5j27hpqg08] {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background: radial-gradient(ellipse 92% 88% at 50% 48%, transparent 38%, rgba(0, 0, 0, 0.48) 100%);
}

/* Tallow candle sparks — elongated with trailing embers */
.title-embers-overhead[b-5j27hpqg08] {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    overflow: hidden;
}
.title-ember-spark[b-5j27hpqg08] {
    position: absolute;
    width: 2px;
    height: 11px;
    border-radius: 40% 40% 50% 50%;
    background: linear-gradient(
        to top,
        rgba(255, 120, 40, 0) 0%,
        rgba(255, 160, 60, 0.45) 28%,
        #ffcf7a 62%,
        #fff4dc 100%
    );
    box-shadow:
        0 0 5px rgba(255, 170, 70, 0.85),
        0 0 10px rgba(255, 130, 50, 0.45);
    transform: rotate(var(--rot, 12deg));
    opacity: 0;
    animation: ember-spark-drift-b-5j27hpqg08 linear infinite;
}
.title-ember-spark[b-5j27hpqg08]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 1px;
    height: 16px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, rgba(255, 150, 60, 0.55), rgba(255, 100, 30, 0));
    border-radius: 1px;
    filter: blur(0.3px);
}
.title-ember-spark--dim[b-5j27hpqg08] {
    width: 1.5px;
    height: 8px;
    opacity: 0;
    box-shadow: 0 0 4px rgba(255, 150, 60, 0.55);
}
@keyframes ember-spark-drift-b-5j27hpqg08 {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(var(--rot, 12deg)) scale(0.5);
    }
    6% { opacity: 0.95; }
    18% { opacity: 1; }
    55% { opacity: 0.75; }
    82% { opacity: 0.35; }
    100% {
        opacity: 0;
        transform: translate(var(--dx, 0), var(--dy, -160px)) rotate(calc(var(--rot, 12deg) + 35deg)) scale(0.25);
    }
}

.toc-row[b-5j27hpqg08] { cursor: pointer; }
.toc-hit[b-5j27hpqg08] { fill: transparent; pointer-events: all; }
.toc-hit:hover[b-5j27hpqg08],
.toc-row:hover .toc-hit[b-5j27hpqg08] { fill: rgba(255, 207, 122, 0.14); }

.title-dev-overhead[b-5j27hpqg08] {
    position: absolute;
    z-index: 12;
    left: 10px;
    bottom: 10px;
    font-size: 0.68rem;
    color: rgba(156, 144, 120, 0.65);
    max-width: 200px;
}
.title-dev-overhead summary[b-5j27hpqg08] { cursor: pointer; }
.title-dev-overhead .title-dev-row[b-5j27hpqg08] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .title-ember-spark[b-5j27hpqg08] { animation: none !important; opacity: 0 !important; }
    .title-candle-glow[b-5j27hpqg08] { animation: none !important; opacity: 0.88 !important; }
    .title-candle-flare[b-5j27hpqg08] { animation: none !important; }
    .title-book-candle-spill[b-5j27hpqg08] { animation: none !important; opacity: 0.88 !important; }
    .title-overhead-enter .title-overhead-scene[b-5j27hpqg08] { animation: none !important; }
    .title-overhead-scene[b-5j27hpqg08] { filter: brightness(0.75) contrast(1.05); }
    .title-ambient-dim[b-5j27hpqg08] { background: rgba(2, 4, 8, 0.42); }
}

@media (max-width: 700px) {
    .title-candle-glow[b-5j27hpqg08] { filter: blur(20px); }
    .title-candle-glow--left[b-5j27hpqg08],
    .title-candle-glow--right[b-5j27hpqg08],
    .title-candle-glow--book[b-5j27hpqg08] {
        width: 58vmin;
        height: 58vmin;
    }
}
/* /Components/TitleView.razor.rz.scp.css */
/* TitleView — styles live in TitleOverheadScene.razor.css (V6 overhead table). */
/* /Components/UnlockSurgeView.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════════
   UnlockSurgeView — the run-end roguelite REVEAL ceremony.
   Polish Director rules: anticipation, multi-channel feedback, sequence-not-spam.
   Win/Wipe/Withdrawal ordered for emotional weight; prefers-reduced-motion safe.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.surge[b-4psa47iona] {
    padding-bottom: 80px;
    position: relative;
}

/* Wipe context: subtle red vignette that fades */
.surge.surge-wipe[b-4psa47iona] {
    animation: surge-wipe-vignette-b-4psa47iona 2.4s ease-out forwards;
}
@keyframes surge-wipe-vignette-b-4psa47iona {
    0%   { box-shadow: inset 0 0 80px rgba(130, 20, 20, .4); }
    40%  { box-shadow: inset 0 0 60px rgba(130, 20, 20, .22); }
    100% { box-shadow: inset 0 0 0   rgba(130, 20, 20, 0); }
}

/* ── 1. Outcome Banner ────────────────────────────────────────────────────── */

.surge-banner[b-4psa47iona] {
    text-align: center;
    padding: 28px 20px 18px;
    margin: 4vh 0 2.5vh;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--panel-2) 0%, var(--pit) 100%);
    box-shadow: 0 4px 18px rgba(0,0,0,.45);
    position: relative;
    overflow: hidden;
}

.surge-banner[b-4psa47iona]::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(180,150,60,.08) 0%, transparent 70%);
    pointer-events: none;
}

.surge-banner-title[b-4psa47iona] {
    font: 900 var(--ts-2xl)/1 var(--font-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0,0,0,.7);
    margin-bottom: 10px;
}

.surge-banner-tag[b-4psa47iona] {
    font-style: italic;
    color: var(--muted);
    font-size: var(--ts-base);
    line-height: 1.45;
    max-width: 480px;
    margin: 8px auto 0;
}

/* Win: shimmer gradient sweep on the title */
.outcome-win .surge-banner-title[b-4psa47iona] {
    background: linear-gradient(90deg,
        var(--player-line) 0%,
        var(--gold-bright) 28%,
        #ffffff 50%,
        var(--gold-bright) 72%,
        var(--player-line) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: surge-win-shimmer-b-4psa47iona 1.8s ease-out .1s both;
}
@keyframes surge-win-shimmer-b-4psa47iona {
    from { background-position: 100% center; }
    to   { background-position: 0% center; }
}

/* Outcome accent borders */
.outcome-win         .surge-banner[b-4psa47iona] { border-left: 5px solid var(--player-line);    }
.outcome-withdrawal  .surge-banner[b-4psa47iona] { border-left: 5px solid var(--gold-tarnished); }
.outcome-wipe        .surge-banner[b-4psa47iona] { border-left: 5px solid var(--blood);           }
.outcome-arcunopposed .surge-banner[b-4psa47iona] { border-left: 5px solid var(--enemy-line);     }

/* Banner visibility states */
.surge-banner-hidden[b-4psa47iona] {
    opacity: 0;
    transform: scale(1.06);
    pointer-events: none;
}
.surge-banner-in[b-4psa47iona] {
    animation: surge-banner-reveal-b-4psa47iona .36s cubic-bezier(.22,1.5,.4,1) forwards;
}
@keyframes surge-banner-reveal-b-4psa47iona {
    0%   { opacity: 0; transform: scale(1.08); }
    58%  { opacity: 1; transform: scale(.984); }
    78%  { transform: scale(1.007); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── 2. Section containers ────────────────────────────────────────────────── */

.surge-section[b-4psa47iona] {
    margin-top: var(--sp-5);
}

.surge-section-head[b-4psa47iona] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font: 700 .88rem/1 var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-3);
    position: relative;
}
.surge-section-head[b-4psa47iona]::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-tarnished), transparent);
    opacity: .4;
}

/* Solemn (fallen) variant — muted tone */
.surge-head-solemn[b-4psa47iona] {
    color: var(--muted);
    letter-spacing: .09em;
}
.surge-head-solemn .surge-head-mark[b-4psa47iona] { color: var(--blood); }
.surge-head-solemn[b-4psa47iona]::after { background: linear-gradient(90deg, var(--blood), transparent); }

.surge-head-mark[b-4psa47iona] { font-size: 1.1em; opacity: .85; flex-shrink: 0; }
.surge-head-mark-gold[b-4psa47iona] { color: var(--gold-bright); }

.surge-section-sub[b-4psa47iona] {
    font-size: var(--ts-sm);
    color: var(--muted);
    font-style: italic;
    margin: 0 0 var(--sp-3);
    line-height: 1.45;
}

/* Section visibility */
.surge-section-hidden[b-4psa47iona] { opacity: 0; pointer-events: none; }
.surge-section-in[b-4psa47iona] { animation: surge-section-fade-b-4psa47iona .3s ease-out forwards; }
@keyframes surge-section-fade-b-4psa47iona {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 3. Unlock cards ──────────────────────────────────────────────────────── */

.surge-unlocks[b-4psa47iona] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.surge-unlock[b-4psa47iona] {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: linear-gradient(135deg, var(--panel-2) 0%, var(--panel) 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,.32);
    position: relative;
    overflow: hidden;
}

/* Subtle inner glow on the left */
.surge-unlock[b-4psa47iona]::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(280px 120px at 0% 50%, var(--gold-tarnished), transparent 70%);
    opacity: .04;
    pointer-events: none;
}

/* Unlock reveal animation */
.unlock-hidden[b-4psa47iona] {
    opacity: 0;
    transform: translateX(-14px) scale(.97);
    pointer-events: none;
}
.unlock-in[b-4psa47iona] {
    animation: unlock-card-in-b-4psa47iona .48s cubic-bezier(.22,1.4,.4,1) forwards;
}
@keyframes unlock-card-in-b-4psa47iona {
    0%   { opacity: 0; transform: translateX(-16px) scale(.96); }
    62%  { opacity: 1; transform: translateX(2px) scale(1.014); }
    80%  { transform: translateX(-1px) scale(.999); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Category badge */
.unlock-cat-badge[b-4psa47iona] {
    flex: 0 0 auto;
    font-size: 1.05rem;
    line-height: 1;
    width: 28px;
    text-align: center;
    margin-top: 3px;
    color: var(--gold-tarnished);
}
.cat-sponsor[b-4psa47iona]   { color: var(--gold-bright); }
.cat-doctrine[b-4psa47iona]  { color: var(--gold-bright); }
.cat-region[b-4psa47iona]    { color: var(--ward); }
.cat-archetype[b-4psa47iona] { color: var(--muted); }
.cat-lore[b-4psa47iona]      { color: var(--muted); }

/* Body */
.unlock-body[b-4psa47iona] { flex: 1; min-width: 0; }

.unlock-name[b-4psa47iona] {
    font: 700 var(--ts-md)/1.25 var(--font-display);
    color: var(--ink);
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}
.unlock-star[b-4psa47iona] {
    color: var(--gold-tarnished);
    font-size: .85em;
    flex-shrink: 0;
}

.unlock-blurb[b-4psa47iona] {
    font-size: var(--ts-sm);
    color: var(--muted);
    line-height: 1.45;
    margin-bottom: var(--sp-1);
}

/* Rare unlock: sponsor / doctrine — extra juice */
.surge-unlock.unlock-rare[b-4psa47iona] {
    border-color: #6a531f;
    background: linear-gradient(135deg, #241a0422 0%, var(--panel) 100%);
    box-shadow: 0 2px 16px rgba(180,140,30,.22), 0 0 0 1px #6a531f30;
}
.surge-unlock.unlock-rare[b-4psa47iona]::before { opacity: .09; }

/* Inner glow orb for rare reveals */
.unlock-rare-glow[b-4psa47iona] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 90% at 0% 50%, rgba(200,160,40,.12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: rare-glow-pulse-b-4psa47iona 1.6s ease-out .1s both;
}
@keyframes rare-glow-pulse-b-4psa47iona {
    0%   { opacity: 0; }
    35%  { opacity: 1; }
    100% { opacity: .55; }
}

.unlock-name-rare[b-4psa47iona] {
    color: var(--gold-bright);
    animation: unlock-name-bloom-b-4psa47iona 1.4s ease-out .15s both;
}
@keyframes unlock-name-bloom-b-4psa47iona {
    0%   { filter: brightness(1); }
    25%  { filter: brightness(1.7); text-shadow: 0 0 16px var(--gold-bright); }
    100% { filter: brightness(1); text-shadow: none; }
}

.unlock-rare-tag[b-4psa47iona] {
    font: 500 var(--ts-xs)/1 var(--font-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-tarnished);
    background: #2a1e0450;
    border: 1px solid #6a531f80;
    border-radius: 4px;
    padding: 2px 8px;
    align-self: center;
}

/* ── 4. Fallen cards in surge ─────────────────────────────────────────────── */

.surge-cards[b-4psa47iona] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--sp-3);
}

.surge-fallen-hidden[b-4psa47iona] {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}
.surge-fallen-in[b-4psa47iona] {
    animation: surge-fallen-card-in-b-4psa47iona .58s ease-out forwards;
}
@keyframes surge-fallen-card-in-b-4psa47iona {
    0%   { opacity: 0; transform: translateY(14px); filter: brightness(.7); }
    55%  { opacity: 1; transform: translateY(-2px); filter: brightness(.9); }
    100% { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

/* ── 5. CTA button ────────────────────────────────────────────────────────── */

.surge-cta[b-4psa47iona] { margin-top: 28px; }
.surge-cta-hidden[b-4psa47iona] { opacity: 0; pointer-events: none; }
.surge-cta-in[b-4psa47iona] { animation: surge-cta-reveal-b-4psa47iona .32s ease-out forwards; }
@keyframes surge-cta-reveal-b-4psa47iona {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 6. Skip anchor (fixed, always reachable) ─────────────────────────────── */

.surge-skip-anchor[b-4psa47iona] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 200;
}
.surge-skip-btn[b-4psa47iona] {
    font-size: var(--ts-sm);
    padding: 7px 16px;
    opacity: .7;
    border-color: transparent;
}
.surge-skip-btn:hover[b-4psa47iona] { opacity: 1; border-color: var(--line); }

/* ── Reduced motion ── ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .surge-banner-hidden[b-4psa47iona], .surge-banner-in[b-4psa47iona],
    .surge-section-hidden[b-4psa47iona], .surge-section-in[b-4psa47iona],
    .unlock-hidden[b-4psa47iona], .unlock-in[b-4psa47iona],
    .surge-fallen-hidden[b-4psa47iona], .surge-fallen-in[b-4psa47iona],
    .surge-cta-hidden[b-4psa47iona], .surge-cta-in[b-4psa47iona],
    .unlock-rare-glow[b-4psa47iona], .surge.surge-wipe[b-4psa47iona] {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        box-shadow: none !important;
    }
}
/* /Components/WorldChart.razor.rz.scp.css */
/* WORLD CHART — scoped styling (ART_BIBLE §10). The chart is a single responsive SVG framed like a
   torn parchment leaf pinned to the table. Palette tokens come from app.css :root; nothing here
   hard-codes the palette hex. Visual prototype pending Phase-12 wiring. */

.world-chart[b-6laa7mffg4] {
    width: 100%;
    max-width: var(--chart-w);
    margin: 0 auto;
    /* the parchment leaf: a leather mat with a soft drop shadow */
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    background:
        linear-gradient(180deg, var(--panel-2), var(--panel));
    box-shadow: var(--shadow), inset 0 0 40px #00000050;
}

.wc-svg[b-6laa7mffg4] {
    display: block;
    width: 100%;
    height: auto;
    /* a faint torn-edge clip feel via a rounded inner radius + ink rule */
    border-radius: 6px;
    border: 1px solid var(--hairline);
    background: transparent;
}

/* node labels — a small serif map hand */
.wc-label[b-6laa7mffg4] {
    font-family: var(--font-display);
    font-size: 11px;
    fill: var(--ink2);
    letter-spacing: .02em;
    paint-order: stroke;
    stroke: #f3ecd8;
    stroke-width: 2.4px;
    stroke-linejoin: round;
    pointer-events: none;
}

/* the cartouche title — a larger inked map title */
.wc-title[b-6laa7mffg4] {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: .12em;
    fill: var(--ink2);
    font-weight: 700;
}

/* scale-bar + legend captions */
.wc-scale[b-6laa7mffg4], .wc-leg[b-6laa7mffg4] {
    font-family: var(--font-display);
    font-size: 10px;
    fill: var(--ink2);
}
.wc-leg[b-6laa7mffg4] { font-size: 10px; }

/* nodes lift slightly on hover (cosmetic only — no game logic in this prototype) */
.wc-node[b-6laa7mffg4] {
    cursor: default;
    transition: transform .12s ease;
    transform-box: fill-box;
}
.wc-node use[b-6laa7mffg4] { transform-box: fill-box; }
.wc-node:hover[b-6laa7mffg4] { filter: drop-shadow(0 2px 3px #00000060); }

/* the golden-path beacon node gets a soft pulse so the objective reads at a glance */
.wc-node.goldpath[b-6laa7mffg4] {
    animation: wc-beacon-b-6laa7mffg4 2.4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
@keyframes wc-beacon-b-6laa7mffg4 {
    0%, 100% { filter: drop-shadow(0 0 2px #f0cd7600); }
    50% { filter: drop-shadow(0 0 7px #f0cd76aa); }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .wc-node.goldpath[b-6laa7mffg4] { animation: none; }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* SVG-simple compatibility - MainLayout scoped styles.
   The dead Blazor-template boilerplate (.sidebar purple, .top-row grey) was removed 2026-06-25.
   The real art direction lives in wwwroot/css/app.css. This file is intentionally minimal. */
.app-shell[b-jwxvqek9s9] { width: 100%; }