/* =====================================================================
   Paladin — arena at dusk

   One committed dark theme: lamplit stone and parchment, iron and gold.
   System font stacks only, so the game renders identically offline on a
   dev machine with no network.
   ===================================================================== */

:root {
    /* Ground */
    --bg:          #14120f;
    --bg-deep:     #0d0c0a;
    --panel:       #1e1b17;
    --panel-lift:  #262219;
    --line:        #3a332a;
    --line-soft:   #2b261f;

    /* Ink */
    --ink:         #e8e0d0;
    --ink-soft:    #a29886;
    --ink-faint:   #6f675b;

    /* Accents */
    --gold:        #c8a45c;
    --gold-dim:    #8a7038;
    --blood:       #b5443c;
    --blood-dim:   #6d2a26;
    --steel:       #7fa3bd;
    --green:       #6fa368;
    --violet:      #9b86c4;

    --radius:      6px;
    --radius-lg:   10px;
    --shadow:      0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1100px 520px at 50% -12%, #241f18 0%, transparent 70%),
        var(--bg);
    color: var(--ink);
    font: 16px/1.6 var(--serif);
    letter-spacing: .005em;
}

a { color: var(--steel); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gold); }

/* ---------------------------------------------------------------- head */

.masthead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .8rem 1.5rem;
    background: linear-gradient(180deg, #1c1913, #16130f);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 20;
}
.masthead .brand {
    color: var(--gold); text-decoration: none;
    font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase;
}
.masthead .brand:hover { color: #e0c07a; }
.masthead nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.masthead .who {
    color: var(--ink-soft); font-family: var(--sans);
    font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
}

/* The version badge, and the release log it opens.
   Rendered as a span; app.js swaps in a button, so the cursor and focus ring
   only appear where the control actually works. */
.masthead .version {
    color: var(--ink-faint); font-family: var(--mono);
    font-size: .72rem; letter-spacing: .04em;
    padding: .15rem .45rem; border: 1px solid var(--line-soft);
    border-radius: var(--radius); background: none;
    white-space: nowrap;
}
button.version {
    cursor: pointer; font-family: var(--mono);
}
button.version:hover {
    color: var(--gold); border-color: var(--gold-dim);
}
button.version:focus-visible {
    outline: 2px solid var(--steel); outline-offset: 2px;
}

.release-log {
    width: min(34rem, calc(100vw - 2rem));
    padding: 0; border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    background: linear-gradient(180deg, var(--panel-lift), var(--panel));
    color: var(--ink);
}
.release-log::backdrop { background: rgba(0, 0, 0, .6); }
.release-log__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line-soft);
}
.release-log__head h2 { margin: 0; font-size: 1.05rem; color: var(--gold); }
.release-log__close {
    background: none; border: 0; cursor: pointer;
    color: var(--ink-faint); font-size: 1.5rem; line-height: 1;
    padding: 0 .25rem;
}
.release-log__close:hover { color: var(--ink); }

.release-log__list {
    list-style: none; margin: 0; padding: .5rem 0;
    max-height: min(60vh, 26rem); overflow-y: auto;
}
.release-log__list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline; gap: .75rem;
    padding: .55rem 1.25rem;
    border-bottom: 1px solid var(--line-soft);
}
.release-log__list li:last-child { border-bottom: 0; }
.release-log__list li.is-current { background: rgba(200, 164, 92, .07); }
.release-log__version {
    font-family: var(--mono); font-size: .78rem; color: var(--gold-dim);
}
.release-log__list li.is-current .release-log__version { color: var(--gold); }
.release-log__title { font-size: .92rem; }
.release-log__date {
    font-family: var(--sans); font-size: .72rem; color: var(--ink-faint);
    white-space: nowrap;
}

@media (max-width: 30rem) {
    .release-log__list li { grid-template-columns: auto 1fr; }
    .release-log__date { grid-column: 2; }
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
.foot {
    text-align: center; color: var(--ink-faint);
    font-family: var(--sans); font-size: .78rem;
    padding: 2rem 1rem 3rem; border-top: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.foot > span { flex: 1; text-align: center; }
.foot__logo { height: 2.8rem; width: auto; opacity: .85; }

/* --------------------------------------------------------------- type */

h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.9rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: .98rem; margin-top: 1.1rem; }

h2, h3 { color: var(--ink); }

.card > h2:first-child {
    display: flex; align-items: center; gap: .5rem;
    padding-bottom: .55rem; margin-bottom: .85rem;
    border-bottom: 1px solid var(--line-soft);
}

.muted  { color: var(--ink-soft); }
.small  { font-size: .85rem; }
.lede   { font-size: 1.12rem; color: var(--ink-soft); max-width: 48ch; }
.warn   { color: var(--blood); }

.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.5rem; padding-bottom: .9rem;
    border-bottom: 1px solid var(--line);
}
.page-head h1 { margin: 0; }
.page-head p  { margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }

/* -------------------------------------------------------------- panels */

.card {
    background: linear-gradient(180deg, var(--panel-lift), var(--panel));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.3rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
}
.card--narrow { max-width: 25rem; margin-inline: auto; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.25rem; align-items: start; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 1.25rem; }

.hero { text-align: center; padding: 5rem 1rem 4rem; }
.hero h1 {
    font-size: clamp(3rem, 9vw, 5rem); color: var(--gold);
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.25rem;
    text-shadow: 0 2px 30px rgba(200,164,92,.15);
}
.hero .lede { margin: 0 auto 2rem; }
.empty {
    text-align: center; padding: 3.5rem 1rem; color: var(--ink-soft);
    border: 1px dashed var(--line); border-radius: var(--radius-lg);
}

/* ------------------------------------------------------------- buttons */

.btn {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    padding: .5rem 1rem; border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #2b2620, #211d18);
    color: var(--ink); text-decoration: none;
    font-family: var(--sans); font-size: .85rem; font-weight: 500;
    letter-spacing: .02em; white-space: nowrap;
    transition: border-color .12s, background .12s, color .12s;
}
.btn:hover { border-color: var(--gold-dim); color: var(--gold); }
.btn--primary {
    background: linear-gradient(180deg, #c8a45c, #a5823f);
    border-color: #d8b775; color: #1b1710; font-weight: 600;
}
.btn--primary:hover { background: linear-gradient(180deg, #d8b775, #b8934c); color: #140f08; }
.btn--danger { border-color: var(--blood-dim); color: #d98079; }
.btn--danger:hover { border-color: var(--blood); color: #f0a49c; background: #241512; }
.btn--small { padding: .3rem .65rem; font-size: .78rem; }
.btn[disabled], .btn:disabled { opacity: .35; cursor: not-allowed; }
.btn[disabled]:hover { border-color: var(--line); color: var(--ink); }

.link {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--ink-soft); font-family: var(--sans); font-size: .8rem;
    text-decoration: underline; text-underline-offset: 3px;
}
.link:hover { color: var(--gold); }
.inline { display: inline; }

/* --------------------------------------------------------------- forms */

label { display: block; margin: .85rem 0 .3rem; font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); }
input, select {
    width: 100%; padding: .55rem .65rem;
    font: inherit; font-size: .95rem;
    color: var(--ink); background: #17140f;
    border: 1px solid var(--line); border-radius: var(--radius);
}
input:focus, select:focus { outline: 2px solid var(--gold-dim); outline-offset: 1px; border-color: var(--gold-dim); }
select { font-family: var(--sans); font-size: .88rem; }
form .btn { margin-top: 1rem; }
.actions-bar form .btn, .inline .btn, td .btn { margin-top: 0; }

.assign { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: .65rem 1rem; }
.assign label { margin-top: 0; }
.assign span { display: block; margin-bottom: .25rem; }

/* -------------------------------------------------------------- flashes */

.flash {
    padding: .7rem 1rem; border-radius: var(--radius);
    margin-bottom: 1rem; border-left: 3px solid;
    font-family: var(--sans); font-size: .88rem;
}
.flash--success { background: #172117; border-color: var(--green);  color: #a8cfa1; }
.flash--error   { background: #241413; border-color: var(--blood);  color: #e0a09a; }
.flash--info    { background: #161d24; border-color: var(--steel);  color: #a8c6db; }

/* ---------------------------------------------------------------- bars */

.bar {
    height: 10px; background: #100e0b; border: 1px solid var(--line-soft);
    border-radius: 99px; overflow: hidden; margin: .6rem 0 .4rem;
}
.bar__fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #4f7a49, var(--green));
    transition: width .3s ease;
}
.bar--foe .bar__fill { background: linear-gradient(90deg, #7d2f29, var(--blood)); }
.bar--thin { height: 6px; width: 84px; display: inline-block; vertical-align: middle; margin: 0 .45rem 0 0; }

.stat-line { margin: .3rem 0; font-family: var(--sans); font-size: .84rem; color: var(--ink-soft); }
.stat-line strong { color: var(--ink); }
.gear { font-family: var(--sans); font-size: .8rem; }
.wear { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); }
.purse {
    font-family: var(--sans); font-size: .9rem; color: var(--ink-soft);
    margin: 0 0 1.5rem; padding: .6rem .9rem;
    background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.purse strong { color: var(--gold); font-size: 1.05rem; }

/* ---------------------------------------------------------------- tags */

.tag {
    display: inline-block; padding: .12rem .5rem; border-radius: 99px;
    font-family: var(--sans); font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em;
    background: #2a251d; color: var(--ink-soft);
    border: 1px solid var(--line); vertical-align: middle;
}
.tag--win, .tag--active   { background: #18251a; color: #8fc487; border-color: #2f4a2c; }
.tag--dead, .tag--death,
.tag--lose                { background: #251413; color: #d98079; border-color: #4a2422; }
.tag--unconscious,
.tag--kneel, .tag--draw   { background: #1e1a29; color: #b0a0d4; border-color: #372f4a; }

/* Matchmaking ratings */
.tag--trivial { background: #211e19; color: var(--ink-faint); border-color: var(--line); }
.tag--easy    { background: #18251a; color: #8fc487; border-color: #2f4a2c; }
.tag--fair    { background: #16212a; color: #8fbcd9; border-color: #2b4353; }
.tag--hard    { background: #2a2016; color: #d9a45f; border-color: #4d3a20; }
.tag--deadly  { background: #251413; color: #e08079; border-color: #4a2422; }

/* -------------------------------------------------------------- tables */

.table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .85rem; }
.table th {
    text-align: left; font-weight: 600; color: var(--ink-faint);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
    padding: .4rem .55rem; border-bottom: 1px solid var(--line);
}
.table td { padding: .45rem .55rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table--full tbody tr:hover td { background: rgba(200,164,92,.035); }

.table-scroll { overflow-x: auto; margin: 0 -.3rem; }

.hit  { color: #8fc487; font-weight: 600; }
.hurt { color: #d98079; font-weight: 600; }
.roll {
    font-family: var(--mono); font-size: .78rem; color: var(--ink-faint);
    background: #17140f; padding: .05rem .3rem; border-radius: 3px;
}

.dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; font-family: var(--sans); font-size: .87rem; }
.dl dt { color: var(--ink-faint); }
.dl dd { margin: 0; color: var(--ink); }

.items { list-style: none; padding: 0; margin: 0 0 .5rem; font-family: var(--sans); font-size: .85rem; }
.items li { padding: .35rem 0; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.items li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------- duel */

.duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1rem; margin-bottom: 1.25rem; }
.fighter-panel { margin: 0; }
.versus {
    align-self: center; color: var(--gold-dim);
    font-family: var(--sans); font-size: .8rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    writing-mode: vertical-rl; padding: 1rem .25rem;
}
.actions-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.result { border-width: 1px; border-left-width: 3px; }
.result--win   { border-left-color: var(--green); }
.result--lose,
.result--death { border-left-color: var(--blood); }
.result--draw,
.result--kneel,
.result--unconscious { border-left-color: var(--violet); }
.result h2 { color: var(--gold); font-size: 1.5rem; }

/* ---------------------------------------------------------------- dice */

.rolled { display: flex; gap: .55rem; margin: 1rem 0 0; flex-wrap: wrap; }
.die {
    display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
    background: linear-gradient(180deg, #2e2820, #201c16);
    border: 1px solid var(--gold-dim); color: var(--gold);
    border-radius: var(--radius); font-size: 1.15rem; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* --------------------------------------------------------- occupations */

.occupations { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.occupations fieldset {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .55rem .8rem .7rem; margin: 0; background: #1a1712;
}
.occupations legend {
    font-family: var(--sans); font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: var(--gold-dim);
    padding: 0 .35rem;
}
.occ {
    display: flex; align-items: center; gap: .45rem; margin: 0;
    padding: .22rem 0; font-family: var(--sans); font-size: .85rem;
}
.occ input { width: auto; accent-color: var(--gold); }
.occ small { color: var(--ink-faint); font-size: .72rem; margin-left: auto; white-space: nowrap; }
.occ--locked { opacity: .4; }
.occ .btn { margin-left: auto; }

/* -------------------------------------------------------------- states */

.fighter.is-dead { opacity: .5; }
.fighter.is-dead h2 a { color: var(--ink-soft); }
.opponent h3 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* -------------------------------------------------------------- mobile */

@media (max-width: 680px) {
    .wrap { padding: 1.25rem .9rem 4rem; }
    .duel { grid-template-columns: 1fr; }
    .versus { writing-mode: horizontal-tb; justify-self: center; padding: .25rem; }
    h1 { font-size: 1.5rem; }
    .page-head { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* -------------------------------------------------------------- guide */

.mast-link {
    font-family: var(--sans); font-size: .8rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
}
.mast-link:hover { color: var(--gold); }

.guide { display: grid; grid-template-columns: 210px 1fr; gap: 2.5rem; align-items: start; }

.guide-nav { position: sticky; top: 5rem; }
.guide-nav h3 {
    margin: 0 0 .6rem; font-family: var(--sans); font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dim);
}
.guide-nav ul { list-style: none; margin: 0; padding: 0; }
.guide-nav li { margin: 0; }
.guide-nav a {
    display: block; padding: .35rem .6rem; margin-left: -.6rem;
    border-left: 2px solid transparent; border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--sans); font-size: .85rem; color: var(--ink-soft); text-decoration: none;
}
.guide-nav a:hover { color: var(--ink); background: rgba(200,164,92,.05); }
.guide-nav a.is-current {
    color: var(--gold); border-left-color: var(--gold); background: rgba(200,164,92,.07);
}

.guide-body { max-width: 68ch; }
.guide-body h1 { margin-bottom: 1rem; }
.guide-body h2 {
    margin: 2rem 0 .7rem; padding-bottom: .4rem;
    border-bottom: 1px solid var(--line-soft); color: var(--gold);
    font-size: 1.05rem; letter-spacing: .01em;
}
.guide-body p  { margin: 0 0 1rem; }
.guide-body ul, .guide-body ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.guide-body li { margin-bottom: .45rem; }
.guide-body code {
    font-family: var(--mono); font-size: .84em; color: var(--gold);
    background: #17140f; padding: .1rem .35rem; border-radius: 3px;
    border: 1px solid var(--line-soft);
}
.guide-body .table { margin-bottom: 1.2rem; }

.steps { counter-reset: step; list-style: none; padding-left: 0; }
.steps li {
    counter-increment: step; position: relative;
    padding-left: 2.1rem; margin-bottom: .7rem;
}
.steps li::before {
    content: counter(step);
    position: absolute; left: 0; top: .05rem;
    width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
    background: #241f18; border: 1px solid var(--gold-dim); color: var(--gold);
    border-radius: 99px; font-family: var(--sans); font-size: .72rem; font-weight: 700;
}

.next {
    margin-top: 2.5rem; padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
    font-family: var(--sans); font-size: .88rem; color: var(--ink-faint);
}

@media (max-width: 780px) {
    .guide { grid-template-columns: 1fr; gap: 1.5rem; }
    .guide-nav { position: static; }
    .guide-nav ul { display: flex; flex-wrap: wrap; gap: .3rem; }
    .guide-nav a { border-left: 0; border-bottom: 2px solid transparent; margin-left: 0; border-radius: var(--radius); }
    .guide-nav a.is-current { border-left: 0; border-bottom-color: var(--gold); }
}

/* --------------------------------------------------- password reveal */

.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 2.9rem; }

.pw-reveal {
    position: absolute; top: 50%; right: .45rem; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 2rem; height: 2rem; padding: 0;
    background: none; border: 1px solid transparent; border-radius: var(--radius);
    color: var(--ink-faint); cursor: pointer;
}
.pw-reveal:hover { color: var(--gold); }
.pw-reveal:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 1px; }
.pw-reveal[aria-pressed="true"] { color: var(--gold); }

.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.label-row label { margin-bottom: .3rem; }
.label-aside { font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); text-decoration: none; }
.label-aside:hover { color: var(--gold); text-decoration: underline; }

.dev-link {
    margin-top: 1.5rem; padding: .9rem 1rem;
    background: #161d24; border: 1px dashed var(--steel); border-radius: var(--radius);
}
.dev-link h3 { margin: 0 0 .35rem; font-size: .85rem; color: var(--steel); }
.dev-link__url {
    display: block; margin-top: .5rem; word-break: break-all;
    font-family: var(--mono); font-size: .74rem; line-height: 1.5; color: var(--gold);
}

/* ================================================================
   Three-column shell
   left  : the character sketch
   middle: the game
   right : advertising (sold space — never game content)
   ================================================================ */

.shell {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 320px;
    gap: 1.75rem;
    max-width: 1500px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 4rem;
    align-items: start;
}
.shell--no-figure { grid-template-columns: minmax(0, 1fr) 320px; }
.shell--no-figure.shell--no-ads { grid-template-columns: minmax(0, 1fr); max-width: 1100px; }

.col { min-width: 0; }

.rail { position: sticky; top: 4.5rem; }

/* ---- the figure ---- */

.figure-panel {
    background: linear-gradient(180deg, #221e18, #1a1713);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: .9rem .7rem .7rem;
    text-align: center;
    box-shadow: var(--shadow);
}
.figure-panel .sketch { width: 100%; height: auto; max-height: 340px; display: block; }
.sketch--down { opacity: .6; }
.sketch__wounds circle { animation: wound-in .35s ease-out; }
@keyframes wound-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); } }

.figure-caption {
    margin: .6rem 0 0; padding-top: .55rem;
    border-top: 1px solid var(--line-soft);
    font-family: var(--sans); font-size: .74rem; line-height: 1.45;
    color: var(--ink-soft);
}
.figure-caption strong { color: var(--ink); }
.figure-caption .hurt-list { color: #d98079; }

/* ---- body status: a bar per body part ---- */
.body-status { display: block; margin-top: .6rem; text-align: left; }
.body-status__row { display: grid; grid-template-columns: 3.7rem minmax(2rem, 1fr) 2.8rem; align-items: center; gap: .3rem; font-size: .74rem; min-height: 1.4rem; }
.body-status__row:first-child { margin-bottom: .35rem; }
.body-status__label { color: var(--ink-soft); }
.body-status__num { text-align: right; font-variant-numeric: tabular-nums; }
.body-status__bar { display: block; height: .55rem; border-radius: .3rem; background: rgba(255,255,255,.1); overflow: hidden; }
.body-status__fill { display: block; height: 100%; border-radius: inherit; }
.body-status__fill--good { background: #5aa469; }
.body-status__fill--hurt { background: #e0892f; }
.body-status__fill--bad  { background: #c4443a; }
.body-status__row--lost .body-status__bar { background: repeating-linear-gradient(45deg, #5b2420, #5b2420 4px, #3a1815 4px, #3a1815 8px); }
.body-status__row--lost .body-status__num { color: #d98079; }
.body-status__row--prosthesis .body-status__bar { background: #6f7f90; }

/* ---- advertising ---- */

.ad-slot { margin-bottom: 1.25rem; }
.ad-slot__label {
    display: block; margin-bottom: .3rem;
    font-family: var(--sans); font-size: .62rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-faint);
}
.ad-slot__box {
    display: grid; place-items: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: repeating-linear-gradient(45deg, #1a1713, #1a1713 8px, #1d1a15 8px, #1d1a15 16px);
    color: var(--ink-faint);
    font-family: var(--mono); font-size: .74rem;
}
.ad-slot--mrec .ad-slot__box { height: 250px; }
.ad-slot--half .ad-slot__box { height: 600px; }

/* ---- narrower screens ---- */

@media (max-width: 1280px) {
    .shell, .shell--no-figure { grid-template-columns: 190px minmax(0, 1fr); }
    .shell--no-figure { grid-template-columns: minmax(0, 1fr); }
    /* The ad rail drops below the game rather than squeezing it. */
    .rail--ads { grid-column: 1 / -1; position: static; display: flex; gap: 1.25rem; flex-wrap: wrap; }
    .rail--ads .ad-slot { margin-bottom: 0; }
    .ad-slot--half { display: none; }
    .ad-slot--mrec .ad-slot__box { width: 300px; }
}

@media (max-width: 820px) {
    .shell, .shell--no-figure { grid-template-columns: minmax(0, 1fr); }
    .rail--figure { position: static; }
    .figure-panel { display: flex; align-items: center; gap: 1rem; text-align: left; }
    .figure-panel .sketch { width: 92px; max-height: 190px; }
    .figure-caption { margin: 0; border-top: 0; padding-top: 0; }
}

/* Mini figure on a dashboard card: the figure beside the card's body, two columns, so the card is as tall as its content */
.fighter { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; align-items: start; }
.fighter__body { min-width: 0; }
/* Everything from the long-action flag down starts at the card's left edge, under the figure, so the space below it is used. */
.fighter__rest { grid-column: 1 / -1; min-width: 0; }
.fighter__rest > :first-child { margin-top: 0; }
.fighter__body > :first-child { margin-top: 0; }
.fighter__figure .sketch { width: 120px; height: auto; display: block; }

/* ---- the strike log (one line per blow) ---- */
.round-head { margin: 1.1rem 0 .4rem; font-size: 1rem; color: var(--gold); }
.round-head:first-of-type { margin-top: .4rem; }
.strikes { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: .88rem; }
.strike {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .6rem; align-items: baseline;
    padding: .4rem .5rem; border-bottom: 1px solid var(--line-soft); border-left: 3px solid transparent;
}
.strike:last-child { border-bottom: 0; }
.strike__time { font-family: var(--mono); color: var(--ink-faint); font-size: .8rem; }
.strike__tag  { color: var(--ink-faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.strike--hit   { border-left-color: var(--green); }
.strike--hurt  { border-left-color: var(--blood); }
.strike--quiet { color: var(--ink-soft); }
.strike--event { border-left-color: var(--gold); font-style: italic; color: var(--gold); background: rgba(200, 160, 80, .06); }

.autopilot summary { cursor: pointer; font-family: var(--sans); font-weight: 600; color: var(--gold); }
.choice { display: flex; gap: .6rem; align-items: flex-start; margin: .5rem 0; font-family: var(--sans); font-size: .9rem; }
.choice input[type="radio"], .choice input[type="checkbox"] { width: auto; flex: none; margin: .2rem 0 0; padding: 0; accent-color: var(--gold); }
.choice > span { flex: 1; min-width: 0; line-height: 1.45; }
/* a number or a choice written into the sentence sits in line with it, not on a row of its own */
.choice select, .choice input[type="number"] { display: inline-block; width: auto; max-width: 6rem; min-width: 4.5rem; padding: .25rem .4rem; margin: 0 .2rem; vertical-align: baseline; font-size: .85rem; }
.choice-group legend { padding: 0; margin-bottom: .2rem; font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); }
.choice--warn { color: #d98079; }

@media (max-width: 640px) {
    .duel { grid-template-columns: 1fr; }
    .versus { display: none; }
    .strike { grid-template-columns: 2.6rem minmax(0, 1fr); }
    .strike__tag { display: none; }
    .actions-bar .btn { min-height: 2.75rem; }
}

/* ---- the day ---- */
.daychip {
    white-space: nowrap;
    font-family: var(--sans); font-size: .78rem; color: var(--ink-soft);
    padding: .15rem .5rem; border: 1px solid var(--line-soft); border-radius: 999px;
}
.daychip strong { color: var(--gold); font-weight: 600; }
.daybanner {
    margin: 0 0 1rem; padding: .6rem .85rem; font-family: var(--sans); font-size: .9rem;
    color: var(--ink-soft); border: 1px solid var(--line-soft); border-left: 3px solid var(--gold-dim);
    border-radius: var(--radius); background: var(--panel);
}
.daybanner strong { color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }
.chip {
    font-family: var(--sans); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--line);
}
.chip--ok   { color: var(--green); border-color: rgba(111,163,104,.45); }
.chip--wait { color: var(--ink-faint); }
.chip--must { color: var(--gold); border-color: var(--gold-dim); }
.chip--rest { color: var(--violet); border-color: rgba(155,134,196,.45); }
@media (max-width: 640px) { .daychip { font-size: .68rem; padding: .1rem .4rem; } }


/* ---- morality compass: a wheel of eight points ---- */
.compass {
    position: relative; width: min(100%, 22rem); aspect-ratio: 1; margin: .75rem auto 1.25rem;
}
.compass::before {              /* the ring */
    content: ""; position: absolute; inset: 10%; border-radius: 50%;
    border: 1px solid var(--line);
    background:
        linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat,
        linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
    opacity: .7;
}
.compass__pt {
    position: absolute; transform: translate(-50%, -50%);
    width: 3.1rem; height: 3.1rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-lift); border: 1px solid var(--gold-dim);
    cursor: pointer; user-select: none;
}
.compass__pt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.compass__pt:hover { border-color: var(--gold); }
.compass__pt:has(input:checked) { background: var(--gold); color: #14110c; border-color: transparent; }
.compass__pt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.compass__code { font-weight: 700; font-size: .85rem; letter-spacing: .04em; pointer-events: none; }
.compass__centre {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 46%; margin: 0; padding: .35rem; text-align: center; font-size: .78rem; line-height: 1.25; color: var(--ink-soft);
    background: var(--panel); border-radius: .5rem;     /* hides the axis lines behind the words */
}
.compass__centre strong { display: block; margin-bottom: .15rem; color: var(--ink); font-size: .9rem; }
.choice-group { border: 0; padding: 0; margin: .6rem 0; }
.choice--locked { opacity: .55; }

/* ---- a nudge towards the shops ---- */
.kit-tip { margin: 0 0 1rem; padding: .7rem .9rem; border: 1px solid var(--gold-dim); border-left-width: 4px; border-radius: .4rem; background: var(--panel-lift); font-size: .9rem; }
.kit-tip--block { border-color: var(--gold); }
.kit-tip a { color: var(--gold); font-weight: 600; }

.stay { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.stay select { min-width: 12rem; }

/* ---- the character card: level beside the name, gold under it ---- */
.figure-level { margin-left: .35rem; padding: .02rem .4rem; border: 1px solid var(--gold-dim); border-radius: 999px; color: var(--gold); font-size: .68rem; white-space: nowrap; }
.figure-gold strong { color: var(--gold); }

/* ---- town: a button for every place ---- */
.places { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; margin: .4rem 0 1.1rem; }
.place {
    display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; min-height: 2.6rem; padding: .5rem .7rem;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink);
    position: relative;
}
.place:hover, .place:focus-within { border-color: var(--gold); background: var(--panel-lift); }
.place__link { flex: 1 1 auto; display: flex; flex-direction: column; gap: .2rem; color: inherit; text-decoration: none; min-width: 0; }
.place__link::after { content: ''; position: absolute; inset: 0; }                  /* the whole tile is the link */
.place__name { font-weight: 600; font-size: .95rem; }
.place__line { flex-basis: 100%; margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.3; }
.place__chip { align-self: flex-start; font-size: .7rem; }
.place__more { position: relative; z-index: 1; width: 1.4rem; height: 1.4rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink-soft); font: italic .75rem Georgia, serif; cursor: pointer; }
.place__more[aria-expanded="true"] { border-color: var(--gold-dim); color: var(--gold); }
@media (hover: hover) and (pointer: fine) {                                           /* a desktop: the description is the tooltip */
    .place__more, .place__line { display: none; }
}
.place--attention { border-color: var(--gold-dim); border-left-width: 4px; }
.place--soon { opacity: .55; cursor: default; border-style: dashed; }
.town-tabs { margin: 0 0 1rem; }
.chip-link.is-current { opacity: 1; border-color: var(--gold-dim); color: var(--gold); }

/* ---- rivals: the arena line and the Hall of the Fallen ---- */
.rival-line { margin: .2rem 0 .4rem; line-height: 1.45; }
.rip { text-align: center; border-color: var(--line); }
.rip__mark { margin: 0 0 .25rem; font: 700 .72rem/1 var(--sans); letter-spacing: .24em; color: var(--ink-faint); }
.rip h2 { margin: 0 0 .25rem; }
.rip__by { margin: .5rem 0 .2rem; }
.rip__by strong { color: var(--blood); }

/* the four poles are named outside the wheel: Good above, Evil below, Self at the left, Community at the right */
.compass-frame {
    display: grid; grid-template-columns: auto minmax(0, 22rem) auto; grid-template-rows: auto auto auto;
    align-items: center; justify-content: center; column-gap: .5rem; row-gap: .15rem; margin: .75rem auto 1.25rem; max-width: 100%;
}
.compass-frame .compass { grid-column: 2; grid-row: 2; width: 100%; margin: 0; }
.compass-label { font: 600 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); text-align: center; }
.compass-label--n { grid-column: 2; grid-row: 1; }
.compass-label--s { grid-column: 2; grid-row: 3; }
.compass-label--w { grid-column: 1; grid-row: 2; writing-mode: vertical-rl; transform: rotate(180deg); }
.compass-label--e { grid-column: 3; grid-row: 2; writing-mode: vertical-rl; }

/* a read-only wheel (a fighter's morality, which never changes): where they stand, and nothing to click */
.compass--locked .compass__pt { cursor: default; opacity: .5; }
.compass--locked .compass__pt:has(input:checked) { opacity: 1; }
.compass--locked .compass__pt:hover { border-color: var(--gold-dim); }
.compass--locked .compass__pt:has(input:checked):hover { border-color: transparent; }

/* A fighter asleep in the tavern: the shops are dimmed, and pressing one asks first. */
.place--locked { opacity: .55; filter: grayscale(.6); }
.place--locked:hover { opacity: .8; }

/* ---- the Live feed: the first section of the character, town, shop and arena pages ---- */
.live { padding: .6rem .9rem; }
.live__title { margin: 0 0 .3rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.live__dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); margin-right: .25rem; }
.live__list { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: .85rem; }
.live__list li { padding: .12rem 0; color: var(--ink-soft); }
.live__list li:first-child { color: var(--ink); }
.live__time { display: inline-block; min-width: 5.2rem; color: var(--ink-soft); font-size: .75rem; }

/* On a phone the Live feed is a single line that opens a modal; the card is for wide screens. */
.live-bar, .live-modal { display: none; }
.live-modal::backdrop { background: rgba(0, 0, 0, .6); }
@media (max-width: 720px) {
    .live { display: none; }
    .live-bar {
        display: flex; align-items: center; gap: .5rem; width: 100%; margin: 0 0 .75rem; padding: .55rem .75rem;
        background: var(--panel, #241f17); color: var(--ink); border: 1px solid var(--line, #3a3123); border-radius: .4rem;
        font: inherit; font-size: .85rem; text-align: left; cursor: pointer;
    }
    .live-bar__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .live-modal[open] {
        display: block; width: min(92vw, 28rem); max-height: 80vh; overflow: auto; padding: 1rem;
        background: var(--panel, #241f17); color: var(--ink); border: 1px solid var(--gold); border-radius: .5rem;
    }
    .live-modal .btn { margin-top: .75rem; }
}

/* The weaponry: a list, a row opens into the weapon's detail with its painted portrait. */
.shop-filters { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin: .25rem 0 .75rem; font-size: .85rem; }
.shop-filters label { display: inline-flex; flex-direction: row; align-items: center; gap: .35rem; margin: 0; white-space: nowrap; }
.shop-filters input[type=checkbox] { width: auto; margin: 0; }
.shop-filters select { width: auto; }
.shop-item .shop-row { cursor: pointer; }
.shop-item .shop-row:focus-visible { outline: 1px solid var(--line); outline-offset: -1px; }
.shop-item .shop-row:hover td { background: rgba(200,164,92,.05); }
.shop-item.is-owned .shop-row td { opacity: .6; }
.shop-item.is-locked .shop-row td:not(:last-child) { opacity: .55; }
.shop-item.is-open .shop-row td { background: rgba(200,164,92,.07); border-bottom-color: transparent; }
.shop-caret { display: inline-block; width: .8rem; margin-right: .25rem; color: var(--muted, #8f8574); }
.shop-caret::before { content: "\25B8"; }
.shop-item.is-open .shop-caret::before { content: "\25BE"; }
.shop-detail td { padding: .25rem .55rem 1rem; background: rgba(200,164,92,.04); }
.detail { display: grid; grid-template-columns: 9rem minmax(9rem, 1fr) minmax(12rem, 1.4fr); gap: 1.25rem; align-items: start; }
.detail__pic { height: 14rem; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(0,0,0,.18); }
.detail__pic img { max-height: 100%; max-width: 100%; object-fit: contain; }
.detail__facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; font-size: .85rem; align-content: start; }
.detail__facts dt { color: var(--muted, #8f8574); }
.detail__facts dd { margin: 0; }
.detail .warn { color: #d98079; }
@media (max-width: 640px) { .detail { grid-template-columns: 1fr; } .detail__pic { height: 11rem; } }
.detail--plain { grid-template-columns: minmax(12rem, 1fr); }
.pawn-note { margin: .1rem 0 .8rem; }

/* The arena's two tabs, and a pager under a list read in batches. */
.tabs { display: flex; gap: .25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--line); }
.tabs__tab { padding: .5rem 1rem; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; color: inherit; text-decoration: none; opacity: .75; }
.tabs__tab:hover { opacity: 1; }
.tabs__tab.is-current { opacity: 1; border-color: var(--line); background: rgba(200,164,92,.07); margin-bottom: -1px; }
.pager { display: flex; gap: .5rem; justify-content: flex-end; margin: .9rem 0 0; }
.care-note { color: var(--gold, #c8a45c); font-size: .85rem; }

/* The journal: filter chips, and entries that open into their detail. */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.chip-link { padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: inherit; text-decoration: none; font-size: .85rem; opacity: .8; }
.chip-link:hover { opacity: 1; }
.chip-link.is-current { opacity: 1; background: rgba(200,164,92,.12); border-color: var(--gold, #c8a45c); }
.live__more { margin-left: .75rem; font-weight: 400; }
.entry { border-bottom: 1px solid var(--line-soft); }
.entry > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; padding: .6rem .2rem; cursor: pointer; list-style: none; }
.entry > summary::-webkit-details-marker { display: none; }
.entry > summary::before { content: "\25B8"; color: var(--muted, #8f8574); }
.entry[open] > summary::before { content: "\25BE"; }
.entry__time { color: var(--muted, #8f8574); font-size: .78rem; min-width: 5.5rem; }
.entry__title { flex: 1 1 18rem; font-size: 1.1rem; }
.entry__body { padding: .2rem .4rem 1rem 1.6rem; }
.beats { margin: .4rem 0 0; padding-left: 1.2rem; }
.beats > li { margin: 0 0 .8rem; }
.beat__title { display: block; font-size: 1.1rem; }
.beat__facts { margin: .2rem 0 0; padding-left: 1rem; font-size: .92rem; }

/* The cinematic replay of a fight: two life bars, the heroic title of the blow on the stage, the numbers under it, and the blows so far. */
.playback__stage { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: .5rem 0 1rem; }
.playback__side { position: relative; }
.playback__name { font-weight: 600; margin-bottom: .25rem; }
.playback .bar__fill { transition: width .6s ease; }
.playback__float { position: absolute; right: .4rem; top: 1.4rem; font-weight: 700; opacity: 0; pointer-events: none; }
.playback__float.is-on { animation: pb-float 1s ease-out forwards; }
.playback__float--hit { color: #8fd18f; }
.playback__float--hurt { color: #d98079; }
@keyframes pb-float { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
.playback__caption { min-height: 3.2rem; margin: .25rem 0; font-size: 1.4rem; padding-left: .75rem; border-left: 3px solid var(--line); }
.playback__caption--hit { border-left-color: #8fd18f; }
.playback__caption--hurt { border-left-color: #d98079; }
.playback__caption.is-in { animation: pb-in .5s ease-out; }
@keyframes pb-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.playback__facts { font-size: .95rem; margin: .3rem 0 .8rem; padding-left: 1.2rem; min-height: 4rem; }
.playback__bar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin: .6rem 0; }
.playback__controls { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.playback__stream { margin: .6rem 0 0; padding-left: 1.4rem; max-height: 14rem; overflow-y: auto; }
.playback__line { margin: 0 0 .3rem; font-size: 1rem; opacity: .9; }
.playback__line--hurt { color: #d98079; }
.playback__line--hit { color: #8fd18f; }
@media (max-width: 640px) { .playback__stage { grid-template-columns: 1fr; gap: .6rem; } }
@media (prefers-reduced-motion: reduce) {
    .playback .bar__fill { transition: none; }
    .playback__caption.is-in, .playback__float.is-on { animation: none; }
}

/* An element that is hidden stays hidden whatever display its class gives it (the replay hides the verdict until it ends). */
[hidden] { display: none !important; }

/* Armour portraits: the painted layer cropped to the torso (the layer is 832x1216, the armour sits in x .28-.72, y .14-.49). */
.armour-pic { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; aspect-ratio: 366 / 426; border-radius: 3px; background: rgba(0,0,0,.18); }
.armour-pic img { position: absolute; width: 227%; height: 286%; left: -63.6%; top: -40%; max-width: none; }
.armour-pic--tiny { width: 2rem; margin-right: .5rem; }
.armour-pic--big { height: 100%; }
.armour-pic--weapon img { position: static; width: 100%; height: 100%; object-fit: contain; }
.pick-pic { display: inline-block; vertical-align: middle; }
.pick-pic .armour-pic--tiny { width: 2.6rem; margin: 0 .5rem 0 0; }
.battle-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; }

/* The figures of a fight stand out from the words around them. */
.num { color: #ffd166; font-weight: 700; font-variant-numeric: tabular-nums; }
.playback__line--hurt .num, .playback__caption--hurt .num { color: #ff9a8f; }
.playback__line--hit .num, .playback__caption--hit .num { color: #b6f2a0; }

/* The strike table of the combat log: attack, defence, outcome, in fixed columns. */
.strike-table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: .4rem 0 .8rem; table-layout: fixed; min-width: 34rem; }
.strike-table th, .strike-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.strike-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #8f8574); font-weight: 600; }
.strike-table tbody th { width: 7rem; font-weight: 600; }
.strike-table thead th:nth-child(2), .strike-table thead th:nth-child(4), .strike-table thead th:nth-child(5) { width: 4.2rem; }
.strike-table td.st__n { text-align: right; font-size: 1.1rem; }
.strike-table thead th:nth-child(2), .strike-table thead th:nth-child(4), .strike-table thead th:nth-child(5) { text-align: right; }
.st__who { display: block; font-weight: 400; font-size: .8rem; color: var(--muted, #8f8574); }
.st__mod { display: flex; justify-content: space-between; gap: .75rem; }
.st__die { font-size: 1.25rem; }
.strike-table { border: 1px solid #0b0a08; }
.strike-table th, .strike-table td { border: 1px solid #0b0a08; background: rgba(255,244,220,.07); }
.strike-table thead th { background: rgba(255,244,220,.12); }
.strike-table .st__die { font-weight: 800; }
.strike-table .st__die--brown { color: #b07a4a; }
.strike-table .st__die--red { color: #ff6b5e; }
.strike-table .st__die--orange { color: #ff9f43; }
.strike-table .st__die--green { color: #6fe08a; }
.strike-table .st__die--gold { color: #ffd700; text-shadow: 0 0 6px rgba(255,215,0,.5); }
.st__total { font-size: 1.3rem !important; }
.st__outcome td { line-height: 1.5; }
.playback__facts .playback__table { list-style: none; margin-left: -1.2rem; }
.beat__head { margin: .2rem 0 0; }
.st__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #8f8574); font-weight: 600; margin-bottom: .15rem; }
.st__outcome td { white-space: normal; overflow-wrap: anywhere; }
.st__damage td { text-align: center; }
.st__damage .st__label { text-align: center; }
.st__amount { font-size: 1.6rem; font-weight: 800; }
.strike-table .st__amount--dealt { color: #6fe08a; }
.strike-table .st__amount--taken { color: #ff6b5e; }
.st__loc { font-size: 1.05rem; font-weight: 600; }

/* The Townhall census: a label, a bar that reads without the number, the number, its share and the change since the founding. */
.census { margin: .2rem 0 .8rem; }
.census { table-layout: fixed; }
.census th { font-weight: 400; text-align: left; white-space: nowrap; padding: .25rem .5rem .25rem 0; width: 9.5rem; overflow: hidden; text-overflow: ellipsis; }
.census td.census__n { width: 2.2rem; }
.census td.census__pct, .census td.census__was { width: 2.6rem; }
.census td { padding: .25rem .4rem; }
.census__bar span { display: block; height: .7rem; border-radius: 2px; background: linear-gradient(90deg, #8a6d2f, #c8a45c); }
.census__n { text-align: right; font-weight: 700; }
.census__pct, .census__was { text-align: right; white-space: nowrap; }
.census__mine th { color: #ffd166; font-weight: 700; }

/* Available to fight: the form to wait in the arena, the panel while waiting, and a player's card among the opponents. */
.wait-form { margin: 0 0 1rem; }
.wait-form > summary { cursor: pointer; }
.wait-form__fields { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: end; margin: .75rem 0 .5rem; }
.wait-form__fields label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.waiting { border-color: var(--gold, #c8a45c); }
.opponent--player { border-left: 3px solid var(--gold, #c8a45c); }

/* On the road: the buttons that lead into town are replaced by the arrival line. */
.btn--static { cursor: default; border-color: transparent; background: none; }
.btn--static:hover { border-color: transparent; color: inherit; }
.travel-banner { border-color: var(--gold-dim); }
.travel-banner p { margin: 0; }
.travel-left { font-variant-numeric: tabular-nums; color: var(--gold); }

/* Travel to: the chosen town's description under the dropdown; "The towns" is a collapsed card. */
.travel-blurb { flex-basis: 100%; margin: 0; font-size: .9rem; }
details.card > summary { cursor: pointer; list-style-position: inside; }
details.card[open] > summary { margin-bottom: .6rem; }

/* The dice of a level. */
.dice { display: flex; gap: .6rem; margin: .4rem 0; }
.die { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-lift); font: 600 1.4rem Georgia, serif; font-variant-numeric: tabular-nums; }
.die--kept { border-color: var(--gold); color: var(--gold); }
.level-banner { border-color: var(--gold); }

/* A fighter with levels waiting for the player's dice: its level flashes. */
.level--pending { color: var(--gold); font-weight: 700; animation: level-flash 1s steps(2, jump-none) infinite; }
.chip--roll { border-color: var(--gold); color: var(--gold); text-decoration: none; }
@keyframes level-flash { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .level--pending { animation: none; text-decoration: underline; } }

/* A long action in progress (retreat, lessons, a shift, a journey): the flag on the dashboard. */
.chip--action { border-color: var(--gold-dim); color: var(--gold); text-decoration: none; }
.chip--action:hover { border-color: var(--gold); }

/* The town a fighter is in, under its feet, in an angular Nordic face (self-hosted: nothing is loaded from outside). */
@font-face { font-family: "Germania One"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/germania-one.woff2") format("woff2"); }
.fighter__town { display: block; margin-top: .3rem; text-align: center; color: var(--town, var(--ink-faint)); font: .8rem/1.15 "Germania One", Georgia, serif; letter-spacing: .07em; text-transform: uppercase; overflow-wrap: anywhere; cursor: default; }

/* A special day in the tavern. */
.festive { border-color: var(--gold-dim); }

/* The dice of a blow, folded under it in the blow by blow (founder, 2026-10-03). */
.strike__detail { grid-column: 2 / -1; margin-top: .2rem; font-style: normal; color: var(--ink-soft); }
.strike__detail > summary { cursor: pointer; font-size: .75rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.strike__detail .table-scroll, .strike__detail { max-width: 100%; }
.strike__detail { overflow-x: auto; }

/* The card of whoever takes the blow flashes red a moment before the damage is announced. */
.is-struck { animation: struck .55s ease-out; }
@keyframes struck {
    0%   { box-shadow: 0 0 0 0 rgba(224, 80, 64, 0); background-color: inherit; }
    25%  { box-shadow: 0 0 .9rem .15rem rgba(224, 80, 64, .85); background-color: rgba(224, 80, 64, .22); }
    100% { box-shadow: 0 0 0 0 rgba(224, 80, 64, 0); background-color: inherit; }
}
@media (prefers-reduced-motion: reduce) { .is-struck { animation: none; } }

/* The replay's header carries the fighters' kit and state; its dice table is folded until asked for. */
.playback__gear { margin: .35rem 0 .2rem; }
.playback__details { margin: .4rem 0; }
.playback__details > summary { cursor: pointer; font-size: .75rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }

/* An attack or defence number that a wound has just changed: it flashes hard, and takes its new value in the middle of the flash. */
.statn { display: inline-block; font-weight: 700; }
.stat-flash { animation: statflash .7s steps(1, end); }
@keyframes statflash {
    0%   { background: #ff3b2f; color: #fff; transform: scale(1.5); }
    16%  { background: transparent; color: #ff3b2f; transform: scale(1.2); }
    33%  { background: #ff3b2f; color: #fff; transform: scale(1.5); }
    50%  { background: transparent; color: #ff3b2f; transform: scale(1.2); }
    66%  { background: #ff3b2f; color: #fff; transform: scale(1.5); }
    100% { background: transparent; color: inherit; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .stat-flash { animation: none; } }


/* ---- the special days: the chip in the top bar and its list ---- */
.specialchip {
    font-family: var(--sans); font-size: .78rem; color: var(--ink-soft); background: none;
    padding: .15rem .5rem; border: 1px solid var(--gold-dim); border-radius: 999px;
}
button.specialchip { cursor: pointer; }
button.specialchip:hover { border-color: var(--gold); color: var(--ink); }
.specialchip strong { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.specialchip__name, .specialchip__now { color: var(--gold); }
.special-days { max-width: 38rem; }
.special-days__effects { margin: 0; padding: .6rem 1rem .6rem 2rem; font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.special-day { border-bottom: 1px solid var(--line-soft); }
.special-day summary {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding: .55rem 1rem; cursor: pointer;
}
.special-day summary:hover { background: rgba(200, 164, 92, .07); }
.special-day__name { color: var(--gold); }
.special-day__date { font-family: var(--sans); font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.special-day__body { padding: 0 1rem .7rem; font-size: .9rem; }
.special-day__body p { margin: .35rem 0; }
@media (max-width: 640px) { .specialchip { font-size: .68rem; padding: .1rem .4rem; white-space: normal; } }

/* ---- the queen's flag on the town screens ---- */
.queenflag { margin: 0 0 1rem; padding: .5rem .85rem; font-family: var(--sans); font-size: .88rem; color: var(--ink-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel); }
.queenflag strong { color: var(--gold); }
.queenflag--away { border-left: 3px solid var(--gold-dim); }
.queenflag--here { border-left: 3px solid var(--green); }

/* ---- Town's news at the foot of the town screen: the Live card's look, entries folded ---- */
.worldfeed { margin: 1.5rem 0 1rem; }
.worldfeed .live__title { display: flex; align-items: center; flex-wrap: wrap; }
.worldfeed__nav { margin-left: auto; display: inline-flex; gap: .6rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.worldfeed__nav .is-disabled { opacity: .4; }
.worldfeed__item summary { cursor: pointer; list-style: none; }
.worldfeed__item summary::-webkit-details-marker { display: none; }
.worldfeed__item[open] summary { color: var(--ink); }
.worldfeed__num { color: var(--gold); font-weight: 600; }
.worldfeed__body { margin: .2rem 0 .3rem 5.2rem; color: var(--ink-soft); }

/* ---- the two weights on the character card ---- */
.figure-weight { font-family: var(--sans); font-size: .78rem; color: var(--ink-soft); }
.figure-weight strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.figure-weight--heavy, .figure-weight--heavy strong { color: var(--gold); }
.weights th { text-align: left; white-space: nowrap; }

/* the blow by blow of a finished fight is folded under its replay */
.blows > summary { cursor: pointer; }
.blows__title { display: inline; margin: 0; }
.blows__head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.blows__tools { margin-left: auto; display: inline-flex; gap: .4rem; }

/* the fight's verdict, in a modal, and the winner crowned on the replay panel */
.verdict { max-width: 30rem; width: calc(100% - 2rem); text-align: center; padding: 1.6rem 1.4rem; border: 2px solid var(--gold-dim); border-radius: var(--radius); background: var(--panel); color: var(--ink); }
.verdict::backdrop { background: rgba(0, 0, 0, .7); }
.verdict__kicker { margin: 0; font-family: var(--sans); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.verdict__title { margin: .3rem 0 .6rem; font-size: 2rem; line-height: 1.15; color: var(--gold); text-wrap: balance; }
.verdict--lose .verdict__title, .verdict--death .verdict__title, .verdict--unconscious .verdict__title, .verdict--kneel .verdict__title { color: #d98079; }
.verdict__loser { margin: 0 0 .5rem; font-size: 1.05rem; }
.verdict__spoils { margin: 0 0 1rem; color: var(--ink-soft); }
.verdict__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1rem 0 0; }
.playback__side.is-winner { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--radius); }
.playback__side.is-winner .playback__name::before { content: "\2655  "; color: var(--gold); }
.playback__side.is-loser { opacity: .8; }

/* a card that folds to its title (the character's sections); the choice is kept per section (app.js) */
.fold > summary { cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "\25BE"; display: inline-block; width: 1.1rem; color: var(--gold); }
.fold:not([open]) > summary::before { content: "\25B8"; }
.fold__title { display: inline; margin: 0; }
.fold[open] > summary { margin-bottom: .5rem; }

/* food and sleep as two thin bars on a card (View\NeedsPanel, templates/partials/needs-mini.php) */
.needmini { display: grid; grid-template-columns: 3.7rem minmax(8rem, 10rem); align-items: center; gap: 0 .4rem; max-width: 100%; margin: .45rem 0 .5rem; font-family: var(--sans); font-size: .72rem; text-align: left; justify-self: start; }
.needmini__row { display: contents; }
.needmini__label { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-size: .62rem; }
.needmini__track { display: block; position: relative; height: .5rem; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.needmini__text { grid-column: 1 / -1; padding-left: 4.1rem; margin: .1rem 0 .4rem; color: var(--ink-soft); text-align: left; }
.needmini .needbar__now { top: -1px; bottom: -1px; width: 2px; margin-left: -1px; }
.needmini__row.needbar--hurt .needmini__text { color: #e0892f; }
.needmini__row.needbar--deep .needmini__text { color: #c9651f; }
.needmini__row.needbar--bad .needmini__text { color: #e06a5f; }
.card-body { font-family: var(--sans); font-size: .85rem; color: var(--ink-soft); }      /* a section's body: the journal's font and size; the heading keeps the serif */
.hl { color: var(--gold); font-weight: 600; }                                                 /* a number that changes: it stands out */
.staybar { margin: .3rem 0 .9rem; font-family: var(--sans); font-size: .85rem; }
.staybar__track { display: block; height: .6rem; max-width: 20rem; margin-bottom: .3rem; }
.staybar__text { color: var(--ink-soft); }
.staybar__text strong { color: var(--gold); font-weight: 600; }
.kit-arena { margin-left: .75rem; font-weight: 400; color: var(--ink-soft); }
.kit-arena--heavy { color: #d98079; }

/* food and sleep along the dawn (templates/partials/needs-bars.php) */
.needbar { margin: .2rem 0 1rem; }
.needbar__head { margin-bottom: .35rem; font-family: var(--sans); }
.needbar__track { position: relative; height: .9rem; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.needbar__seg { position: absolute; top: 0; bottom: 0; }
.needbar__seg--good { background: #5aa469; }
.needbar__seg--hurt { background: #e0892f; }
.needbar__seg--bad { background: #c4443a; }
.needbar__seg--xp { background: var(--gold); }
.needbar__seg--deep { background: #b4551a; }
.needbar__seg--ok { background: var(--green); }
.needbar__seg--ok-soft { background: color-mix(in srgb, var(--green) 35%, transparent); }
.needbar__seg--wait { background: color-mix(in srgb, var(--gold) 55%, transparent); }
.needbar__seg--must { background: var(--gold); }
.needbar__seg--hurt-soft { background: color-mix(in srgb, #d98079 55%, transparent); }
.needbar__seg--rest { background: #6c8fd6; }
.needbar__seg--rest-soft { background: color-mix(in srgb, #6c8fd6 35%, transparent); }
.needbar__seg--idle { background: transparent; }
.needbar__tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink-soft); opacity: .7; }
.needbar__tick--hurt { background: #d98079; opacity: 1; }
.needbar__now { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; }
.needbar__marks { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .25rem; }
.needbar__mark--hurt { color: #d98079; }
.needbar__mark--must { color: var(--gold); }

/* The Town and Tournaments panels read like the journal: serif headings (kept), body text in the journal's sans at its size, the figures that matter in gold. */
.area-town .card > p:not(.warn), .area-town .card > ul, .area-town .card > ol, .area-town .card > form > p:not(.warn),
.area-tournaments .card > p:not(.warn), .area-tournaments .card > ul, .area-tournaments .card > ol { font-family: var(--sans); font-size: .85rem; color: var(--ink-soft); }
.area-town .card > p strong, .area-town .card > ul strong, .area-town .card > form > p strong,
.area-tournaments .card > p strong, .area-tournaments .card > ul strong { color: var(--gold); font-weight: 600; }
.area-town .card > p.small, .area-tournaments .card > p.small { font-size: .8rem; }

/* The Travel page: the world map with the flow of travellers drawn on it; an arrow is as wide as the number it carries. */
.travelmap { position: relative; max-width: 100%; margin: .75rem 0; }
.travelmap img { display: block; width: 100%; height: auto; border-radius: 4px; }
.travelmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.travelmap__arrow { fill: rgba(150, 40, 25, .78); stroke: rgba(60, 15, 10, .9); stroke-width: 1.2; }
.travelmap__arrow:hover { fill: rgba(190, 60, 35, .92); }
.travelmap__count { font: 700 22px var(--sans); fill: #2a0d08; paint-order: stroke; stroke: rgba(255, 250, 235, .9); stroke-width: 5px; }

/* A spell that works plays on a card, in the live fight and in the replay (founder, 2026-10-06): one animation each, the colour in --fx. */
.fx { position: relative; animation: fxglow 1.4s ease-out; }
.fx::after { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: 1.7rem; letter-spacing: .35em; pointer-events: none; opacity: 0; text-shadow: 0 0 .5rem var(--fx); animation: fxrise 1.4s ease-out; }
@keyframes fxglow { 0% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 1.4rem .3rem var(--fx); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes fxrise { 0% { opacity: 0; transform: translateY(1.2rem) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-2.4rem) scale(1.25); } }
@keyframes fxspin { 0% { opacity: 0; transform: rotate(0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(540deg) scale(1.3); } }
@keyframes fxflicker { 0% { opacity: 0; transform: translateY(.8rem) scale(.8); } 15%, 55% { opacity: 1; } 30% { transform: translateY(-.2rem) scale(1.15); } 75% { opacity: .9; transform: translateY(-.8rem) scale(1.05); } 100% { opacity: 0; transform: translateY(-1.8rem) scale(.9); } }
@keyframes fxring { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes fxdim { 0% { filter: none; } 30%, 70% { filter: brightness(.55) saturate(.7); } 100% { filter: none; } }
@keyframes fxstone { 0% { filter: none; } 30%, 70% { filter: grayscale(1) contrast(1.15); } 100% { filter: none; } }
@keyframes fxflash { 0% { background-color: inherit; } 18% { background-color: rgba(255, 255, 255, .55); } 100% { background-color: inherit; } }
.fx-heal   { --fx: #4ade80; } .fx-heal::after   { content: '\271A \271A \271A'; color: #4ade80; }
.fx-shield { --fx: #60a5fa; } .fx-shield::after { content: '\1F6E1'; color: #60a5fa; font-size: 3.4rem; top: 25%; animation-name: fxring; }
.fx-shield::before { content: ''; position: absolute; inset: -4px; border: 4px solid #60a5fa; border-radius: .9rem; pointer-events: none; box-shadow: 0 0 1rem #60a5fa, inset 0 0 1rem rgba(96, 165, 250, .6); opacity: 0; animation: fxring 1.4s ease-out; }
.fx-sleep  { --fx: #818cf8; animation: fxglow 1.4s ease-out, fxdim 1.4s ease-in-out; } .fx-sleep::after { content: 'z Z z'; color: #c7d2fe; font-style: italic; font-weight: 700; animation-duration: 1.8s; }
.fx-dizzy  { --fx: #f0abfc; } .fx-dizzy::after  { content: '\2736 \2737 \2736'; color: #f0abfc; animation-name: fxspin; }
.fx-burn   { --fx: #fb923c; } .fx-burn::after   { content: '\1F525\1F525\1F525'; letter-spacing: .1em; animation-name: fxflicker; }
.fx-stone  { --fx: #9ca3af; animation: fxglow 1.4s ease-out, fxstone 1.4s ease-in-out; } .fx-stone::after { content: '\1FAA8'; color: #d1d5db; animation-name: fxring; font-size: 2.4rem; }
.fx-dispel { --fx: #f8fafc; animation: fxglow 1.4s ease-out, fxflash 1.4s ease-out; } .fx-dispel::after { content: '\2726 \2726 \2726'; color: #fff; animation-name: fxspin; }
.fx-bird   { --fx: #fde047; } .fx-bird::after   { content: '\1FAB6 \1FAB6 \1FAB6'; animation-name: fxrise; }
@media (prefers-reduced-motion: reduce) { .fx, .fx::after, .fx::before { animation: none !important; } }
.fx-lights { --fx: #fde68a; } .fx-lights::after { content: '\2728 \2728 \2728'; animation-name: fxspin; }
.fx-blind  { --fx: #1f2937; animation: fxglow 1.4s ease-out, fxdim 1.4s ease-in-out; } .fx-blind::after { content: '\1F576'; font-size: 2.6rem; animation-name: fxring; }
.fx-invis  { --fx: #a5b4fc; animation: fxglow 1.4s ease-out, fxghost 1.4s ease-in-out; } .fx-invis::after { content: '\1F47B'; font-size: 2.6rem; animation-name: fxring; }
.fx-push   { --fx: #38bdf8; } .fx-push::after   { content: '\1F4A8 \1F4A8'; animation-name: fxring; }
@keyframes fxghost { 0% { opacity: 1; } 35%, 65% { opacity: .25; } 100% { opacity: 1; } }

/* ---- the arena's list view, the NPC card, the track star (founder, 2026-10-06) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.view-toggle { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .5rem 0 .75rem; }
.view-toggle .btn[aria-pressed="true"] { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.arena[data-view="grid"] .opp-list-wrap { display: none; }
.arena[data-view="list"] .opp-grid, .arena[data-view="list"] .arena-players { display: none; }
.opp-list-wrap { overflow-x: auto; }
.opp-list { width: 100%; border-collapse: collapse; min-width: 640px; font-family: var(--sans); font-size: .88rem; }
.opp-list th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
.opp-list td { padding: .45rem .6rem; border-bottom: 1px solid var(--line-soft, var(--line)); vertical-align: middle; }
.opp-list .n { text-align: right; font-variant-numeric: tabular-nums; }
.opp-line { cursor: pointer; }
.opp-line:hover, .opp-line:focus-visible { background: var(--panel-lift); outline: none; }
.opp-line[aria-expanded="true"] { background: var(--panel-lift); }
.opp-detail > td { background: var(--panel); padding: .75rem; }
.track-btn { background: none; border: 0; padding: 0 .2rem; cursor: pointer; color: var(--ink-soft); font-size: 1.15rem; line-height: 1; }
.track-btn[aria-pressed="true"] { color: var(--gold); }
.track-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.npc-card { font-family: var(--sans); font-size: .88rem; }
.npc-card__head { display: grid; grid-template-columns: 192px minmax(0, 1fr) auto; gap: 1.1rem; align-items: start; }
.npc-card__figure { max-height: 440px; overflow: hidden; }
.npc-card__figure svg, .npc-card__figure img { width: 100%; height: auto; max-height: 440px; }
.npc-card__name { margin: 0 0 .15rem; font-family: var(--serif); display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.npc-card__nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .4rem .8rem; margin: .8rem 0 .4rem; }
.npc-card__nums dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.npc-card__nums dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.npc-card__attrs span { margin-right: .7rem; }
.npc-card__h { margin: 1rem 0 .3rem; padding-top: .8rem; border-top: 1px solid var(--line); font: 600 .75rem var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.npc-card__list, .npc-card__kit { margin: 0; padding-left: 1.1rem; }
.npc-card__kit { list-style: none; padding: 0; }
.npc-bar { display: flex; align-items: center; gap: .5rem; }
.npc-bar .bar { flex: 1; max-width: 12rem; }
.npc-track { margin-top: .4rem; }
.npc-wear { display: inline-flex; align-items: center; gap: .3rem; margin-left: .4rem; color: var(--ink-soft); font-size: .78rem; }
.npc-wear__bar { display: inline-block; width: 3.5rem; height: .35rem; background: var(--line); border-radius: 999px; overflow: hidden; }
.npc-wear__bar > span { display: block; height: 100%; background: var(--green); }
.npc-card--compact .npc-card__head { grid-template-columns: 72px minmax(0, 1fr); }
.npc-card--compact .npc-card__figure { max-height: 220px; }
.npc-card--compact .npc-card__figure svg, .npc-card--compact .npc-card__figure img { max-height: 220px; }
@media (max-width: 640px) { .npc-card__head { grid-template-columns: 112px minmax(0, 1fr); } .npc-card__head .npc-card__nums { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); } }

/* The fight page: the opponent's card takes the right rail (the ads keep one slot under it). */
.rail--npc { display: flex; flex-direction: column; gap: 1rem; max-height: calc(100vh - 5.5rem); overflow-y: auto; }
.rail--npc .npc-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .9rem; }
.rail--npc .ad-slot { margin-bottom: 0; }
@media (max-width: 1280px) { .rail--npc { grid-column: 1 / -1; position: static; max-height: none; flex-direction: row; flex-wrap: wrap; align-items: flex-start; } .rail--npc .npc-card { flex: 1 1 22rem; } }

/* The progress of a long action, in the building it belongs to. */
.action-progress { padding: .7rem 1rem; }
.action-progress__text { margin: 0; font-family: var(--sans); }
.bar--action { height: 12px; margin: .5rem 0 0; }
.bar--action .bar__fill { background: linear-gradient(90deg, #8a6d2b, var(--gold, #c9a24a)); }
a.chip--link { text-decoration: none; }
a.chip--link:hover, a.chip--link:focus-visible { filter: brightness(1.25); text-decoration: underline; }

/* The activity of the cities: a half-circle speedometer each. In the masthead on wide screens, a link to the same in a modal on narrow ones. */
.gauge { margin: 0; text-align: center; font-family: var(--sans); }
.gauge svg { display: block; width: 100%; height: auto; }
.gauge__track, .gauge__value { fill: none; stroke-width: 9; stroke-linecap: round; }
.gauge__track { stroke: rgba(255,255,255,.1); }
.gauge__value { stroke: var(--town, var(--green)); transition: stroke-dasharray .4s ease; }
.gauge__needle { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.gauge__hub { fill: var(--ink); }
.gauge figcaption strong { color: var(--town, var(--ink)); }
.gauge figcaption { display: flex; flex-direction: column; line-height: 1.15; }
.gauge figcaption span { color: var(--ink-soft); }
.gauge--mini { width: 3.2rem; }
.gauge--mini figcaption { font-size: .62rem; }
.gauge--mini figcaption strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gauge--big { width: 100%; }
.gauge--big figcaption { font-size: .9rem; margin-top: .2rem; }
.town-activity button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.town-activity__strip { display: none; gap: .6rem; align-items: flex-start; }
.town-activity__link { color: var(--ink-soft); font-family: var(--sans); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line-soft) !important; border-radius: var(--radius); padding: .15rem .5rem !important; }
.town-activity__link:hover { color: var(--gold); border-color: var(--gold-dim) !important; }
@media (min-width: 1300px) {
    .town-activity__link { display: none; }
    .town-activity__strip { display: flex; }
}
.town-activity-modal { max-width: min(34rem, 94vw); background: var(--panel, #1c1913); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); }
.town-activity-modal::backdrop { background: rgba(0, 0, 0, .6); }
.town-activity-modal__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; margin-top: 1rem; }

/* The town's name in the town's colour, small, after the name of a building. */
.town-tag { color: var(--town, var(--ink-faint)); font: .5em/1 "Germania One", Georgia, serif; letter-spacing: .09em; text-transform: uppercase; vertical-align: middle; margin-left: .5rem; }

/* magic items (docs/magic-items-spec.md) */
.magic-list { list-style: none; padding: 0; margin: 0; }
.magic-list li { padding: .6rem 0; border-top: 1px solid var(--line-soft); }
.magic-list li:first-child { border-top: 0; }
.magic-list .inline { margin-left: .5rem; }

/* masthead: natality and mortality since dawn, to the right of the brand */
.vitals { display: inline-flex; flex-wrap: wrap; gap: .2rem .9rem; align-items: baseline; margin-right: auto; margin-left: .9rem; font-family: var(--sans); }
.vitals__item { display: inline-flex; gap: .35rem; align-items: baseline; padding-left: .8rem; border-left: 1px solid var(--line-soft); cursor: default; }
.vitals__label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.vitals__n { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.vitals__n--born { color: #8fcf8a; }
.vitals__n--died { color: #e09088; }


/* ---- the character card's head (founder, 2026-10-08): rune, name as a picker, morality wheel; the level beneath ---- */
.char-head { text-align: center; margin: 0 0 .5rem; }
.char-head__line { display: flex; align-items: center; justify-content: center; gap: .45rem; min-width: 0; }
.char-head__name { font: 1.05rem/1.2 "Germania One", Georgia, serif; color: var(--gold); text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
a.char-head__name:hover { text-decoration: underline; }
.char-head__line .figure-level { margin-left: 0; }
.rune { color: var(--gold-dim); flex: none; }
.moral-wheel { flex: none; }
.char-pick { position: relative; min-width: 0; }
.char-pick > summary { list-style: none; }
.char-pick > summary::-webkit-details-marker { display: none; }
.char-pick > summary::after { content: " \25BE"; font-size: .8em; color: var(--gold-dim); }
.char-pick__list {
    position: absolute; z-index: 30; left: 50%; transform: translateX(-50%); top: calc(100% + .3rem); min-width: 12rem; max-width: 80vw;
    margin: 0; padding: .25rem; list-style: none; text-align: left;
    background: var(--panel-lift); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.char-pick__list a { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; padding: .4rem .55rem; border-radius: 4px; color: var(--ink); text-decoration: none; font-family: var(--sans); font-size: .85rem; }
.char-pick__list a:hover, .char-pick__list a:focus { background: rgba(200,164,92,.14); }
.char-pick__list small { color: var(--ink-faint); white-space: nowrap; }
.is-zoomable { cursor: zoom-in; }
.fighter__head { grid-column: 1 / -1; }
.fighter__head .char-head { margin: 0; }
.figure-pic > .sketch, .figure-pic > img { display: block; }

.dawnbig { text-align: center; font-size: 1.1rem; }
.dawnbig strong { font-size: 2.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* the zoomed card */
.zoom-dialog { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, #221e18, #1a1713); color: var(--ink); padding: 1rem 1.25rem 1.25rem; width: min(30rem, 92vw); max-height: 94vh; }
.zoom-dialog::backdrop { background: rgba(0,0,0,.72); }
.zoom-dialog__back { display: inline-block; margin-bottom: .6rem; font-family: var(--sans); color: var(--gold); text-decoration: none; }
.zoom-dialog__card { text-align: center; }
.zoom-dialog__card .sketch, .zoom-dialog__card .fighter__figure .sketch { width: auto; max-width: 100%; max-height: 62vh; height: auto; margin: 0 auto; }
.zoom-dialog__card .char-head__name { font-size: 1.5rem; }
.zoom-dialog__card .fighter__body, .zoom-dialog__card .figure-caption { text-align: left; font-size: .9rem; }
@media (max-width: 820px) {
    .zoom-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; overflow: auto; }
    .figure-head { flex: 0 0 100%; }
    .figure-panel[data-zoom] { flex-wrap: wrap; }
}
@media (max-width: 820px) { .figure-pic { flex: none; } }

.zoom-dialog__card .fighter__rest { text-align: left; font-size: .9rem; margin-top: .6rem; }
@media (min-width: 821px) { .zoom-dialog { width: min(36rem, 92vw); } }

/* gold and experience on a card: the number in gold, in a ring like the level */
.stat-pill { display: inline-block; margin-right: .25rem; padding: .02rem .45rem; border: 1px solid var(--gold-dim); border-radius: 999px; font-size: .74rem; white-space: nowrap; color: var(--ink-soft); }
.stat-pill strong { color: var(--gold); }
/* the dashboard card's bars: label, bar and legend on one line */
.needmini--compact { grid-template-columns: 3.1rem minmax(2.5rem, 1fr) auto; width: 100%; margin: .3rem 0 .2rem; }
.needmini--compact .needmini__text { grid-column: auto; padding-left: 0; margin: 0 0 0 .1rem; white-space: nowrap; }
.needmini--compact .needmini__row { display: contents; }
.needmini--compact > .needmini__row > * { margin-top: .22rem; margin-bottom: .22rem; }

/* the dashboard's head: name, level, xp, gold, wheel on one line, wrapping to a second when the card is narrow */
.fighter__head .char-head__line { flex-wrap: wrap; row-gap: .3rem; }
.fighter__head .stat-pill { margin-right: 0; }

/* the dashboard card in bands, each set off by a thin rule: head and calling / the figure / the bars / the flags */
.fighter__sub { margin: 0; text-align: center; color: var(--ink-soft); font-family: var(--sans); font-size: .84rem; }
.card-rule { border: 0; border-top: 1px solid var(--line-soft); margin: .1rem 0; width: 100%; }
.fighter__rest > .card-rule { margin: .55rem 0; }
.fighter__figure { justify-self: center; text-align: center; }
.fighter__figure .sketch { margin: 0 auto; }

/* what an event did to gold, life and experience: gold numbers on the Live feed and the journal */
.impact { white-space: nowrap; margin-left: .25rem; color: var(--ink-soft); font-size: .78em; }
.impact b { color: var(--gold); font-weight: 700; }

/* the zoomed figure is sized by its height, so it stays large however the card around it is laid out */
.zoom-dialog__card .sketch, .zoom-dialog__card .fighter__figure .sketch { height: min(66vh, 640px); width: 100%; max-width: 100%; max-height: none; margin: 0 auto; }
@media (max-width: 820px) { .zoom-dialog__card .sketch, .zoom-dialog__card .fighter__figure .sketch { height: 58vh; } }

/* Autopilot (docs/autopilot-spec.md): the care plan picker and the ON/OFF switch at the foot of a character's card.
   The global `form .btn` (a top margin) and `select` (full width) rules are undone here so the two sit on one line, the same height. */
.care-switch-rule { border: 0; border-top: 1px solid var(--line, rgba(201, 168, 92, .35)); margin: .75rem 0 .55rem; width: 100%; }
.care-switch-box { margin: .25rem 0 0; display: flex; flex-direction: column; align-items: stretch; gap: .3rem; }
.care-switch { display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex-wrap: nowrap; margin: 0; width: 100%; }
.care-switch select.care-switch__plan { flex: 1 1 0; width: auto; min-width: 5rem; margin: 0; height: 2rem; box-sizing: border-box; padding: 0 .4rem; font-size: .78rem; }
.care-switch .care-switch__btn { flex: 0 0 auto; margin: 0; height: 2rem; box-sizing: border-box; padding: 0 .65rem; display: inline-flex; align-items: center; white-space: nowrap; }
.care-switch__btn.is-on { background: var(--gold, #c9a85c); color: #1a160f; border-color: var(--gold, #c9a85c); }
.care-switch__btn[disabled] { opacity: .55; cursor: not-allowed; }
.care-switch__note, .care-switch__hint, .care-switch__next { margin: 0; text-align: right; }
.care-switch__next { color: var(--text, inherit); }
.figure-autopilot { padding: 0; }

/* The Combat autopilot page: sections stacked, each option a .choice. */
.combat-setup h2 { margin: 1.1rem 0 .3rem; font-size: 1.05rem; }
.combat-setup h2:first-of-type { margin-top: .4rem; }

/* The Team (docs/team-spec.md): the naming form of the dashboard prompt and of the Team screen. */
.team-name { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.team-name input[type="text"] { flex: 1 1 14rem; width: auto; min-width: 0; }
.team-name .btn { margin: 0; }
.team-pick { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin: .5rem 0; }
.team-pick label { margin: 0; display: flex; flex-direction: column; gap: .2rem; }
.team-pick select { width: auto; min-width: 11rem; }
.team-pick .btn { margin: 0; }
.team-ways { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-direction: column; gap: .4rem; }
.team-ways .btn { margin: 0; }

/* The campaigns (config/ads.php) are sandboxed local iframes at the IAB sizes. */
.ad-slot__frame { display: block; width: 300px; max-width: 100%; border: 0; border-radius: var(--radius); background: var(--panel); }
.ad-slot--mrec .ad-slot__frame { height: 250px; }
.ad-slot--half .ad-slot__frame { height: 600px; }

/* The top bar's buttons: a gauge, a vital, and the list modal (founder, 2026-10-09) */
.gauge-btn { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; }
.gauge-btn:hover figcaption strong, .gauge-btn:focus-visible figcaption strong { text-decoration: underline; }
button.vitals__item { background: none; border-top: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; cursor: pointer; }
button.vitals__item:hover .vitals__label, button.vitals__item:focus-visible .vitals__label { color: var(--gold); }
#fragment-modal { max-width: min(46rem, 94vw); width: 100%; }
.fragment-modal__body { max-height: 70vh; overflow: auto; }
.fragment-modal__body h3 { font-family: var(--serif); margin: 1rem 0 .4rem; }
table.roster th, table.roster td { text-align: left; padding: .2rem .6rem .2rem 0; font-size: .85rem; }
.daychip strong[data-count] { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- landing page */

.landing { position: relative; isolation: isolate; }
.col--backdrop { position: relative; isolation: isolate; }
.col--backdrop::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("../maps/world-map.webp") center top / cover no-repeat;
    opacity: .13;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
            mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.pulse {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem;
    list-style: none; margin: 0 0 2.5rem; padding: 0; color: var(--ink-soft);
}
.pulse strong { color: var(--gold); font-size: 1.25rem; }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.pillar { background: rgba(30,27,23,.78); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; }
.pillar h2 { font-size: 1.05rem; color: var(--gold); margin: 0 0 .5rem; }
.pillar p { margin: 0; color: var(--ink-soft); }
.tale { max-height: 19rem; overflow-y: auto; scrollbar-width: thin; max-width: 40rem; margin: 0 auto 2.5rem; padding: 1.5rem 1.75rem; background: rgba(30,27,23,.78); border: 1px solid var(--line); border-radius: var(--radius-lg); font-family: Georgia, "Times New Roman", serif; line-height: 1.7; }
.tale h2 { text-align: center; color: var(--gold); letter-spacing: .08em; margin-top: 0; }
.tale p { color: var(--ink); margin: 0 0 1rem; }
.tale__first::first-letter { float: left; font-size: 3.2rem; line-height: .9; padding: .15rem .5rem 0 0; color: var(--gold); }
.tale__last { text-align: center; font-style: italic; color: var(--gold) !important; margin-bottom: 0 !important; }
.landing__more { text-align: center; margin-top: 1.5rem; }

/* The landing page fits one desktop screen: the tale takes whatever height is left (founder, 2026-10-09). */
@media (min-width: 900px) {
    .shell--no-ads { padding-top: .75rem; padding-bottom: 1rem; }
    .landing .hero { padding: 1rem 1rem .75rem; }
    .landing .hero h1 { font-size: clamp(2.2rem, 5vh, 3.2rem); margin-bottom: .5rem; }
    .landing .hero .lede { margin-bottom: 1rem; font-size: 1rem; }
    .landing .hero p:last-child { margin: 0; }
    .pulse { margin-bottom: 1rem; }
    .pillars { margin-bottom: 1rem; gap: .75rem; }
    .pillar { padding: .7rem .9rem; }
    .pillar h2 { font-size: .95rem; margin-bottom: .25rem; }
    .pillar p { font-size: .85rem; line-height: 1.4; }
    .landing { display: flex; flex-direction: column; height: calc(100vh - 10.5rem); min-height: 30rem; }
    .landing .hero .lede { max-width: 70ch; }
    .tale { flex: 1 1 0; min-height: 5rem; max-height: none; width: 100%; margin-bottom: 0; padding: 1rem 1.5rem; line-height: 1.55; font-size: .95rem; }
    .tale h2 { margin-bottom: .5rem; }
    .foot { padding: .6rem 1rem; }
    .foot__logo { height: 2.2rem; }
}

/* The sign-in, sign-up and password pages stand on the landing page's map (founder, 2026-10-09). */
.col--backdrop > .card--narrow { margin-top: calc(8.5rem + 50px); background: rgba(30,27,23,.88); }
@media (min-width: 900px) { .col--backdrop { min-height: calc(100vh - 10.5rem); } }

/* First steps on the dashboard (founder, 2026-10-09) */
.first-steps__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.first-steps__head h2 { margin: 0; }

.welcome ul { margin: .5rem 0 .75rem 1.1rem; padding: 0; }
.welcome li { margin-bottom: .4rem; }

/* Legal pages */
.legal-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 0 0 1rem; font-family: var(--sans); font-size: .85rem; }
.legal-nav a[aria-current] { color: var(--gold); text-decoration: none; }
.legal { max-width: 46rem; }
.legal h2 { margin-top: 1.5rem; font-size: 1.1rem; color: var(--gold); }
.legal li { margin-bottom: .3rem; }
.legal-todo { background: rgba(200,164,92,.18); color: var(--gold); padding: 0 .25rem; border-radius: 3px; }
.foot__legal { display: block; margin-top: .3rem; }
.foot__legal a { color: inherit; }
.first-steps__dots { display: flex; gap: .4rem; list-style: none; margin: .6rem 0 1rem; padding: 0; }
.first-steps__dots li { flex: 1; height: .35rem; border-radius: 3px; background: var(--line); }
.first-steps__dots li.is-done { background: var(--green); }
.first-steps__dots li.is-next { background: var(--gold); }
.first-steps__now h3 { margin: 0 0 .3rem; color: var(--gold); }
.first-steps__how { margin: .5rem 0 1rem 1.2rem; padding: 0; }
.first-steps__how li { margin-bottom: .25rem; }
.first-steps__all ul { list-style: none; margin: .5rem 0; padding: 0; }
.first-steps__all li { opacity: .7; }
.first-steps__all li.is-done { opacity: 1; color: var(--green); }

/* The sign-up box that accepts the terms */
label.check { display: flex; gap: .6rem; align-items: flex-start; margin: .75rem 0 1rem; font-size: .85rem; color: var(--ink-soft); }
label.check input { width: auto; margin-top: .2rem; flex: none; }

/* First steps: the surface to click next blinks (founder, 2026-10-09) */
@keyframes onb-blink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,164,92,0), 0 0 0 2px rgba(200,164,92,.35); }
    50%      { box-shadow: 0 0 0 6px rgba(200,164,92,.30), 0 0 0 2px var(--gold); }
}
.onb-blink { animation: onb-blink 1.4s ease-in-out infinite; border-radius: var(--radius); }
tr.onb-blink td { background: rgba(200,164,92,.12); }
@media (prefers-reduced-motion: reduce) { .onb-blink { animation: none; box-shadow: 0 0 0 2px var(--gold); } }

/* A bad outcome in the Live feed (caught looting): red, and blinking while it is fresh (founder, 2026-10-09). The figures inside stay gold. */
.live__list li.live__alert, .live-bar__text.live__alert { color: #ff6a5e; font-weight: 600; }
.live__list li.live__alert .live__time { color: inherit; }
@keyframes live-alert { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.live__alert.is-fresh { animation: live-alert 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live__alert.is-fresh { animation: none; } }

/* An opponent who has left since the page was drawn */
.is-gone { opacity: .45; }
.gone-note { color: #d98079; margin: .3rem 0; }

/* Someone else is looking at, or fighting, this opponent: amber and blinking for a look, red for a fight */
@keyframes arena-busy { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,160,48,0); } 50% { box-shadow: 0 0 0 4px rgba(224,160,48,.45); } }
.is-busy { animation: arena-busy 1.3s ease-in-out infinite; border-radius: var(--radius); }
.is-busy--fight { --busy: #d9534f; box-shadow: 0 0 0 2px #d9534f; animation-name: arena-busy-fight; }
@keyframes arena-busy-fight { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,83,79,0); } 50% { box-shadow: 0 0 0 5px rgba(217,83,79,.55); } }
.busy-note { color: #e0a030; margin: .3rem 0; font-weight: 600; }
.is-busy--fight .busy-note, .is-busy--fight > .busy-note { color: #ff6a5e; }
.arena-new { display: flex; align-items: center; gap: .75rem; }
@media (prefers-reduced-motion: reduce) { .is-busy { animation: none; box-shadow: 0 0 0 2px #e0a030; } }

/* A fighter's name that opens the fighter's card */
a.npc-link { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--gold-dim); text-underline-offset: 3px; }
a.npc-link:hover, a.npc-link:focus { color: var(--gold); text-decoration-style: solid; }

/* The NPC card: the figures stand in a column at the head's right, one under the other; sections are cut by rules */
.npc-card__head .npc-card__nums { display: grid; grid-template-columns: 1fr; gap: .55rem; margin: 0; min-width: 7.5rem; padding-left: 1rem; border-left: 1px solid var(--line); }
.npc-card__attrs { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.npc-card__name .figure-level { font-family: var(--sans); }
.npc-card__name .moral-wheel { flex: none; }

.npc-title-badges { display: inline-flex; align-items: center; gap: .4rem; margin-left: .5rem; font-size: .8rem; vertical-align: middle; }
h1 .npc-title-badges, h2 .npc-title-badges { font-family: var(--sans); }