:root {
    /* SVG-Premium compatibility bridge (formerly the "SVG-simple"/Duskbringers theme; ratified
       2026-06-23, migrated 2026-06-25, bridged to SVG-Premium 2026-06-30).
       These shared legacy tokens + primitives (.panel / .btn / .pill / .section-title / .dm-strip /
       .hero-card / .mini) now render in the SVG-Premium grammar so the routes that still consume them
       read as one product. NEW player-facing UI must still prefer the Ac* primitives — do not author
       new one-off chrome on these classes. SVG-simple compatibility debt: phase out per-surface as the
       Ac* component migration lands. */
    --bg: #0d0f12;
    --bg-grad: radial-gradient(1200px 700px at 50% -10%, #171a20 0%, #0d0f12 60%, #08090b 100%);
    --panel: var(--ac-panel-0, #111318);
    --panel-2: var(--ac-panel-2, #20242b);
    --panel-3: var(--ac-panel-3, #282c34);
    --line: rgba(198, 161, 91, .26);          /* brass hairline (was cold slate #3a3d48) — premium trim */
    --ink: var(--ac-text, #e3d4a8);
    --muted: var(--ac-text-muted, #a89977);
    --gold: var(--ac-gold, #c6a15b);
    --gold-bright: var(--ac-gold-hi, #e6c36f);
    --parch: var(--ac-parch-1, #e3d4a8);
    --parch-dim: var(--ac-parch-2, #c6b694);
    --player: #6fae5a;
    --player-line: #8fd06f;
    --enemy: #c95a4a;
    --enemy-line: #e88a72;
    --hp: #6fae5a;
    --hp-low: #d86a4a;
    --cell: 58px;
    --shadow: 0 8px 24px rgba(0,0,0,.55);

    /* ---- Typography ---- */
    --font-display: "Cinzel", Georgia, "Times New Roman", serif;
    --font-body: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

    /* ---- Type scale ---- */
    --ts-xs: .72rem;
    --ts-sm: .82rem;
    --ts-base: .92rem;
    --ts-md: 1rem;
    --ts-lg: 1.2rem;
    --ts-xl: 1.6rem;
    --ts-2xl: clamp(2rem, 6vw, 3.6rem);

    /* ---- Spacing scale ---- */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;

    /* ---- Radius ---- */
    --r-sm: 6px; --r-md: 9px; --r-lg: 12px;

    /* ---- Legacy material tokens, bridged to the SVG-Premium palette (SVG-simple compatibility debt) ---- */
    --pit: #0c0d0f; --ink2: #171819; --raised: #1c1d22; --hairline: rgba(198, 161, 91, .18); --leather: #6f5c3c;
    --page: var(--ac-parch-1, #e3d4a8); --page-faded: var(--ac-parch-2, #b8a988); --page-muted: #8a8298; --woodcut: #c9b994;
    /* --gold-tarnished aliases SVG-Premium --ac-gold (the legacy "tarnished" tint is retired) */
    --gold-tarnished: var(--ac-gold, #c6a15b); --steel: #5d636b; --steel-rim: #9aa0a8;
    --blood: #b0432f; --wound: #d8954a; --ward: #7fb5c9;
    /* ---- Terrain tile colours (Issue #1) ---- */
    --trn-obstacle-bg: #2a261e;  /* Obstacle base fill (charcoal) */
    --trn-obstacle: #1a1814;     /* Obstacle crosshatch stroke */
    --trn-cover-half-bg: #6b4c1a; /* CoverHalf warm wash */
    --trn-cover-half: #c4872a;   /* CoverHalf shield glyph */
    --trn-cover-full-bg: #6b3a0e; /* CoverFull darker wash */
    --trn-cover-full: #e09030;   /* CoverFull shield glyph */
    --trn-difficult-bg: #4a3012; /* Difficult terrain base */
    --trn-difficult: #6b4c1a;    /* Difficult stipple dots */
    --trn-elevation-bg: #445566; /* Elevation slate wash */
    --trn-elevation: #8ab0c8;    /* Elevation triangle indicator */
    --trn-edge: #c9a227;         /* Terrain edge highlight (top/left) */
    --trn-edge-shadow: #0a0806;  /* Terrain edge shadow (bottom/right) */
    --trn-cell-frame: #e6dac2;   /* Inner cell carved frame */
    --trn-grid-line: #ffffff12;  /* Mat grid hairlines */
    --trn-mat-grain: #5a5040;    /* Subtle mat texture grain */
    --trn-open-edge: #4a4035;    /* Open tile inner bevel */

    /* power-strand accents (applied only by tag) */
    --acc-faith: #d9bd6f; --acc-knowledge: #6f9fc9; --acc-forbidden: #a974c2; --acc-wild: #6fa86a;
    /* race skin tints */
    --skin-human: #a9784f; --skin-dwarf: #b3764a; --skin-elf: #c2b39a;
    --skin-halfling: #bd8d5f; --skin-orc: #6f9e54; --skin-pactborn: #a8544a;
}

/* ═══ Sponsor skin-swap (Same Bones, Different Skin) ═══ */
:root, [data-sponsor] {
    --sponsor-accent: var(--gold);
    --sponsor-glow: var(--gold-bright);
}
[data-sponsor="roads"]    { --sponsor-accent: #6fae5a; --sponsor-glow: #8fd06f; }
[data-sponsor="trade"]    { --sponsor-accent: #c6a15b; --sponsor-glow: #d9b466; }
[data-sponsor="temple"]   { --sponsor-accent: #d9bd6f; --sponsor-glow: #f0d878; }
[data-sponsor="college"]  { --sponsor-accent: #6f9fc9; --sponsor-glow: #8fb8db; }
[data-sponsor="war"]      { --sponsor-accent: #c95a4a; --sponsor-glow: #e88a72; }
[data-sponsor="charter"]  { --sponsor-accent: #a974c2; --sponsor-glow: #c994d8; }
[data-sponsor="free"]     { --sponsor-accent: #8a8298; --sponsor-glow: #aaa2b8; }

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; height: 100%;
    background: var(--bg); color: var(--ink);
    font-family: var(--font-body); -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif, .smallcaps { font-family: var(--font-display); }
.smallcaps { font-variant: small-caps; letter-spacing: .06em; }

.app-shell {
    min-height: 100vh; background: var(--bg-grad);
    display: flex; flex-direction: column; align-items: center;
    padding: var(--sp-6) var(--sp-4) 60px;
}
.app-shell.full-bleed {
    padding: 0;
    background: #000;
}

/* Boot — pure black until title scene fades in */
body.booting { background: #050607; }
#boot-veil {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(13, 15, 18, .98), rgba(5, 6, 7, 1)),
        repeating-linear-gradient(90deg, rgba(198, 161, 91, .08) 0 1px, transparent 1px 120px);
    z-index: 10000;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1.35s ease-out;
}
#boot-veil.fade-out { opacity: 0; }
.boot-card {
    width: min(420px, 100%);
    color: #e7d7ad;
    text-align: center;
    font-family: var(--font-body);
}
.boot-mark {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border: 1px solid rgba(230, 195, 111, .55);
    border-radius: 50%;
    position: relative;
    animation: boot-turn 1.8s linear infinite;
}
.boot-mark::before,
.boot-mark::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-top: 2px solid rgba(230, 195, 111, .85);
    border-radius: 50%;
}
.boot-mark::after {
    inset: 18px;
    border-color: rgba(143, 208, 111, .75);
}
.boot-kicker {
    margin: 0 0 8px;
    color: rgba(230, 195, 111, .82);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}
.boot-card h1 {
    margin: 0;
    color: #f0dfb8;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 0;
}
.boot-copy {
    margin: 12px auto 0;
    max-width: 34ch;
    color: rgba(231, 215, 173, .74);
    font-size: .95rem;
    line-height: 1.45;
}
.boot-bar {
    height: 3px;
    margin: 24px auto 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(198, 161, 91, .18);
}
.boot-bar span {
    display: block;
    width: 46%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #e6c36f, transparent);
    animation: boot-sweep 1.35s ease-in-out infinite;
}
@keyframes boot-turn {
    to { transform: rotate(360deg); }
}
@keyframes boot-sweep {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(245%); }
}
@media (prefers-reduced-motion: reduce) {
    #boot-veil,
    .boot-mark,
    .boot-bar span {
        animation: none;
        transition: none;
    }
}

/* ---------- generic ---------- */
.wrap { width: 100%; max-width: 1100px; }
/* The StrategicResourceBar is an absolute, full-width 44px HUD pinned to the
   viewport top. Camp/guildhall content sits in .app-shell (24px top pad), so its
   first row (the GM narration .dm-strip) was sheared under the bar. Drop the
   content clear of the bar. */
.camp-wrap,
.guildhall-container { padding-top: 30px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.danger { color: var(--enemy-line); }
.good { color: var(--player-line); }
.row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--sp-2); }
/* .pill — bridged to the SVG-Premium AcChip grammar */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: var(--ts-xs); font-weight: 700; border: 1px solid rgba(198, 161, 91, .24); color: var(--muted); background: rgba(10, 11, 13, .58); }
.pill.good { color: #9fc78d; border-color: rgba(85, 126, 69, .70); }
.pill.bad { color: #e49a86; border-color: rgba(196, 77, 61, .70); }

.title-banner { text-align: center; margin: 4vh 0 2vh; }
.title-banner h1 {
    font-size: var(--ts-2xl); letter-spacing: .14em; margin: 0;
    color: var(--gold-bright); text-shadow: 0 2px 0 #00000080;
}
.title-banner .tag { color: var(--muted); font-style: italic; margin-top: var(--sp-1); }

/* .panel — bridged to the SVG-Premium AcFrame grammar: premium material, brass border,
   inner double-hairline, premium shadow. Geometry (radius/padding) preserved. */
.panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .28)),
        linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid rgba(198, 161, 91, .42); border-radius: var(--r-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        inset 0 -1px 0 rgba(0, 0, 0, .55),
        var(--ac-shadow-panel, 0 14px 38px rgba(0, 0, 0, .55));
    padding: var(--sp-4);
}
/* inner brass hairline — the framed-panel feel of AcFrame::before */
.panel::before {
    content: ""; position: absolute; inset: 5px;
    border: 1px solid rgba(198, 161, 91, .20);
    border-radius: calc(var(--r-lg) - 3px); pointer-events: none;
}
/* sponsor-tinted top-edge accent (the Same-Bones skin-swap identity cue) */
.panel::after {
    content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--sponsor-accent, var(--gold)) 15%, var(--sponsor-accent, var(--gold)) 85%, transparent);
    opacity: .5; pointer-events: none;
}
.section-title::after {
    content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, var(--sponsor-accent, var(--gold)), transparent);
    opacity: .25;
}
.panel + .panel { margin-top: var(--sp-4); }

/* .dm-strip — global SVG-Premium narrator/Game-Master frame. Consumers that define their own
   scoped/inline .dm-strip override this locally; this is the default (e.g. Field Camp). */
.dm-strip {
    position: relative;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 12px;
    padding: 10px 14px 11px 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .24)),
        linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid rgba(198, 161, 91, .30);
    border-left: 3px solid var(--sponsor-accent, var(--gold));
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--ac-shadow-tight, 0 2px 3px rgba(0, 0, 0, .55));
}
.dm-gm-label {
    font: 700 .6rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold-bright); padding: 3px 7px; border: 1px solid rgba(198, 161, 91, .40);
    border-radius: 4px; background: rgba(0, 0, 0, .28);
}
.dm-name { font: 700 .82rem/1.1 var(--font-display); color: var(--gold-bright); letter-spacing: .02em; }
.dm-line { flex: 1 1 100%; color: var(--ink); font-style: italic; line-height: 1.45; }

.section-title {
    font-family: var(--font-display); color: var(--gold);
    letter-spacing: .08em; text-transform: uppercase; font-size: .95rem;
    border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); margin: 0 0 var(--sp-3);
    display: flex; justify-content: space-between; align-items: baseline;
}

/* ---------- buttons ---------- */
button { font-family: inherit; }
/* .btn family — bridged to the SVG-Premium AcButton grammar (material + states + visible focus).
   Body font/case kept so existing sentence-length labels do not reflow. */
.btn {
    position: relative;
    cursor: pointer; border-radius: var(--r-md); padding: 10px 16px; font-size: var(--ts-base);
    color: var(--ink); border: 1px solid var(--ac-gold-sh, #6d5326);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .30)),
        linear-gradient(180deg, var(--ac-iron-1, #252a31), var(--ac-iron-0, #17191d));
    box-shadow:
        inset 0 1px 0 rgba(230, 195, 111, .14),
        inset 0 -1px 0 rgba(0, 0, 0, .50),
        0 2px 4px rgba(0, 0, 0, .38);
    transition: transform .05s ease, filter .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover:not(:disabled) {
    filter: brightness(1.06); border-color: var(--gold-bright);
    box-shadow: inset 0 1px 0 rgba(230, 195, 111, .28), inset 0 -1px 0 rgba(0, 0, 0, .50), 0 0 14px rgba(198, 161, 91, .18), 0 2px 4px rgba(0, 0, 0, .38);
}
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.92); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55); }
.btn:focus-visible { outline: none; box-shadow: var(--ac-glow-focus, 0 0 0 2px rgba(91, 127, 178, .82), 0 0 16px rgba(91, 127, 178, .30)), inset 0 1px 0 rgba(230, 195, 111, .20); }
.btn:disabled { opacity: .48; cursor: not-allowed; filter: saturate(.35); }
.btn-gold {
    color: #211909; border-color: #8a6a22; font-weight: 700;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .18)),
        linear-gradient(180deg, var(--ac-gold-hi, #e6c36f), var(--ac-gold, #c6a15b) 45%, var(--ac-gold-sh, #6d5326));
}
.btn-gold:hover:not(:disabled) { filter: brightness(1.07); border-color: var(--gold-bright); }
.btn-ghost { background: rgba(10, 11, 13, .32); box-shadow: none; }
.btn-sm { padding: var(--sp-1) 11px; font-size: var(--ts-sm); }
.btn-danger {
    border-color: #6b2a25;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .30)),
        linear-gradient(180deg, #512018, #1a0d0b);
}
.btn.selected { border-color: var(--ac-selected, #e0bd63); box-shadow: inset 0 0 0 1px rgba(230, 195, 111, .42), var(--ac-glow-gold-soft, 0 0 18px rgba(198, 161, 91, .22)); }

input[type=text] {
    background: #0e0f12; border: 1px solid var(--line); color: var(--ink);
    border-radius: var(--r-md); padding: 9px 12px; font-size: var(--ts-md); font-family: inherit; width: 100%;
}
input[type=text]:focus { outline: none; border-color: var(--gold-bright); box-shadow: var(--ac-glow-focus, 0 0 0 2px rgba(91, 127, 178, .55)); }

/* ---------- hero / stat cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); }
.hero-card {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .26)),
        linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid rgba(198, 161, 91, .34); border-radius: 11px; padding: var(--sp-3);
    display: flex; flex-direction: column; gap: var(--sp-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--ac-shadow-tight, 0 2px 3px rgba(0, 0, 0, .55));
    transition: border-color .15s, transform .08s, box-shadow .12s;
}
.hero-card.clickable { cursor: pointer; }
.hero-card.clickable:hover { border-color: var(--gold-bright); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 14px rgba(198, 161, 91, .16), var(--ac-shadow-tight, 0 2px 3px rgba(0, 0, 0, .55)); }
.hero-head { display: flex; align-items: center; gap: var(--sp-2); }
.crest {
    width: 40px; height: 40px; border-radius: var(--r-md); flex: 0 0 auto;
    display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--ts-lg);
    background: #1f2a35; color: #cfe6ff; border: 1px solid #3b566d;
}
.crest.enemy { background: #321f1a; color: #f2c0b0; border-color: #5a352c; }
.hero-name { font-family: var(--font-display); font-size: 1.06rem; line-height: 1.1; }
.hero-sub { color: var(--muted); font-size: var(--ts-sm); }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1) 10px; font-size: var(--ts-sm); }
.stat { display: flex; justify-content: space-between; border-bottom: 1px dotted #2a2b30; padding-bottom: 2px; }
.stat b { color: var(--gold); font-weight: 600; }
.hpbar { height: 9px; border-radius: var(--sp-1); background: #1a1b1f; overflow: hidden; border: 1px solid #00000040; }
.hpbar > span { display: block; height: 100%; background: linear-gradient(90deg, #5da64f, var(--hp)); transition: width .35s ease; }
.hpbar.low > span { background: linear-gradient(90deg, #b8482e, var(--hp-low)); }
.hp-text { font-size: var(--ts-xs); color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.memline { font-size: .78rem; color: var(--parch-dim); font-style: italic; }
.injline { font-size: .78rem; color: var(--enemy-line); }
.cost { color: var(--gold-bright); font-weight: 700; }
.gold-counter { font-size: var(--ts-lg); color: var(--gold-bright); font-family: var(--font-display); }

/* ---------- battle board ---------- */
.battle-layout { display: grid; grid-template-columns: 1fr 320px; gap: 18px; width: 100%; max-width: 1180px; align-items: start; }
@media (max-width: 980px) { .battle-layout { grid-template-columns: 1fr; } }
.board-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.board {
    position: relative;
    background:
        repeating-linear-gradient(0deg, #00000022 0, #00000022 1px, transparent 1px, transparent var(--cell)),
        repeating-linear-gradient(90deg, #00000022 0, #00000022 1px, transparent 1px, transparent var(--cell)),
        linear-gradient(180deg, #1c1d22, #141518);
    border: 2px solid var(--line); border-radius: var(--sp-2);
    box-shadow: var(--shadow), inset 0 0 60px #00000060;
}
.token {
    position: absolute; width: var(--cell); height: var(--cell);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: left .4s cubic-bezier(.4,.1,.3,1), top .4s cubic-bezier(.4,.1,.3,1); z-index: 2;
}
.token-disc {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: .95rem;
    border: 2px solid; box-shadow: 0 3px 6px #00000070; user-select: none;
}
.token.player .token-disc { background: #21402a; color: #d8f5d8; border-color: var(--player-line); }
.token.enemy .token-disc { background: #3f1f18; color: #ffd9cc; border-color: var(--enemy-line); }
.token.active .token-disc { animation: pulse 1s ease-in-out infinite; }
.token.targetable { cursor: crosshair; }
.token.targetable .token-disc { box-shadow: 0 0 0 3px #e8b54088, 0 3px 6px #00000070; }
.token.targetable:hover .token-disc { box-shadow: 0 0 0 4px var(--gold-bright), 0 3px 6px #00000070; transform: scale(1.08); }
.token.dead { opacity: 0; pointer-events: none; transition: opacity .4s; }
.token.hit .token-disc { animation: shake .35s; background: #6a201a; }
.token-name {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    line-height: 1; white-space: nowrap; padding: 2px 6px; border-radius: 4px;
    background: #0c0a07e0; color: var(--parchment, #e6dac2); border: 1px solid #00000080;
    pointer-events: none; z-index: 30; box-shadow: 0 2px 4px #00000070;
}
.token-name.player { border-color: var(--player-line); }
.token-name.enemy { border-color: var(--enemy-line); color: #ffd9cc; }
.token-hp { width: 38px; height: 4px; border-radius: 3px; background: #00000060; margin-top: 3px; overflow: hidden; }
.token-hp > span { display: block; height: 100%; background: var(--hp); transition: width .3s; }
.token.enemy .token-hp > span { background: #e08a6f; }
.token-float {
    position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
    font-weight: 800; font-size: .95rem; color: #ffd0c2; text-shadow: 0 1px 3px #000;
    animation: floatUp .85s ease-out forwards; pointer-events: none; z-index: 5;
}
.token-float.crit { color: #ffe08a; font-size: var(--ts-lg); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px #e8b54000, 0 3px 6px #00000070; } 50% { box-shadow: 0 0 0 5px #e8b540cc, 0 3px 6px #00000070; } }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 4px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px); } }
.turn-banner { font-family: var(--font-display); letter-spacing: .05em; min-height: 1.6em; }
.turn-banner .who { color: var(--gold-bright); }
.result-banner { font-family: var(--font-display); font-size: var(--ts-xl); letter-spacing: .1em; padding: var(--sp-2) 0; }

/* combat side panel */
.side { display: flex; flex-direction: column; gap: var(--sp-3); }
.roster-block { display: flex; flex-direction: column; gap: var(--sp-2); }
.mini {
    display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center;
    padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-md); background: #171819;
    transition: border-color .15s, background .15s;
}
.mini.active { border-color: var(--gold); background: #1c1d22; }
.mini.dead { opacity: .35; }
.mini.targetable { cursor: crosshair; }
.mini.targetable:hover { border-color: var(--gold-bright); background: #321f1a; }
.mini .badge { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .82rem; }
.mini.player .badge { background: #21402a; color: #d8f5d8; border: 1px solid var(--player-line); }
.mini.enemy .badge { background: #3f1f18; color: #ffd9cc; border: 1px solid var(--enemy-line); }
.mini .nm { font-size: .85rem; line-height: 1.05; }
.mini .nm small { color: var(--muted); }
.mini .hp-num { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.log {
    background: #0e0f12; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3); height: 170px; overflow-y: auto; font-size: .8rem; line-height: 1.5; color: var(--parch-dim);
}
.log .crit { color: #ffe08a; font-weight: 700; }
.log .slain { color: var(--enemy-line); }
.log .down { color: #ffb27a; font-weight: 700; }
.controls { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hint { color: var(--muted); font-size: var(--ts-sm); font-style: italic; }

/* aftermath / hall */
.event-line { padding: var(--sp-1) 0; border-bottom: 1px dotted #2a2b30; }
.event-line.death { color: var(--enemy-line); }
.event-line.injury { color: #e7b07a; }
.event-line.memory { color: var(--parch-dim); font-style: italic; }
.hall-card { border-left: 3px solid var(--gold); }
.hall-card h3 { margin: 0 0 4px; color: var(--gold-bright); }

/* T8 integration — arc / world-ledger / vault / claim / unlock-surge */
.tiny { font-size: var(--ts-xs); }
.arc-panel { border-left: 3px solid var(--gold); }
.ledger {
    background: #0e0f12; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3); margin: var(--sp-1) 0; font-size: .82rem; line-height: 1.6; color: var(--parch-dim); font-style: italic;
}
.ledger-line { padding: 1px 0; }

/* claim */
.claim-panel { border-left: 3px solid var(--enemy-line); }
.claim-options { display: flex; flex-direction: column; gap: var(--sp-2); }
.claim-opt { text-align: left; width: 100%; line-height: 1.4; }
.claim-opt small { font-weight: 400; }

/* unlock-surge */
.surge-panel { border-left: 3px solid var(--gold-bright); }
.surge-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.surge-item { background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.surge-name { color: var(--gold-bright); font-weight: 700; margin-bottom: 2px; }

/* party-info panel — compact hero roster shown below the watch controls */
.party-info { display: flex; flex-direction: column; gap: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); }
.hero-chip { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--ts-sm); }
.hero-chip-glyph { color: var(--gold-bright); font-family: var(--font-display); font-size: var(--ts-md); width: 1.2em; text-align: center; }
.hero-chip-name { color: var(--parch); font-weight: 600; min-width: 6em; }
.hero-chip-meta { color: var(--muted); font-size: var(--ts-xs); }
.hero-chip-traits { color: var(--parch-dim); font-size: var(--ts-xs); font-style: italic; }

#blazor-error-ui {
    position: fixed; bottom: 0; left: 0; right: 0; display: none;
    background: #5a1b14; color: #fff; padding: var(--sp-2) 16px; z-index: 1000;
}
#blazor-error-ui a, #blazor-error-ui .dismiss { color: #fff; cursor: pointer; margin-left: 10px; }