/* dungeoncrawler — Chult. Hot, wet, green, and mostly trying to kill you. */

:root {
    --bg: #0d1410;
    --bg-raised: #141d17;
    --bg-sunken: #0a0f0c;
    --border: #24352a;
    --border-bright: #33513a;
    --text: #d8e4da;
    --text-dim: #8ba393;
    --text-faint: #5e7566;
    --gold: #d9a441;
    --gold-dim: #8a6b2c;
    --blood: #b4453a;
    --blood-dim: #6d2a24;
    --jade: #4f9d69;
    --jade-dim: #2c5a3c;
    --radius: 6px;
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-scribe: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --font-hand: "Segoe Script", "Bradley Hand", "Apple Chancery", "Lucida Handwriting", "Segoe Print", cursive;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background:
        radial-gradient(ellipse at 20% -10%, #16241a 0%, transparent 55%),
        radial-gradient(ellipse at 90% 0%, #131f19 0%, transparent 45%),
        var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--jade); text-decoration: none; }
a:hover { color: var(--gold); text-decoration: underline; }

.shell { max-width: 1040px; margin: 0 auto; padding: 0 20px 80px; }

/* ---- masthead ---- */

.masthead {
    border-bottom: 1px solid var(--border);
    margin-bottom: 32px;
    background: linear-gradient(180deg, rgba(0,0,0,.35), transparent);
}
.masthead .shell { display: flex; align-items: baseline; gap: 24px; padding-block: 18px 16px; }
.masthead h1 { font-family: var(--font-display); font-size: 21px; margin: 0; letter-spacing: .02em; }
.masthead h1 a { color: var(--text); }
.masthead h1 a:hover { text-decoration: none; color: var(--gold); }
.masthead h1 .sub { color: var(--text-faint); font-size: 13px; font-style: italic; margin-left: 8px; }
.masthead nav { margin-left: auto; display: flex; gap: 22px; font-size: 14px; }
.masthead nav a { color: var(--text-dim); }

/* ---- headings ---- */

h2 { font-family: var(--font-display); font-size: 24px; margin: 36px 0 14px; font-weight: 600; }
h3 { font-size: 15px; margin: 26px 0 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim); font-weight: 600; }
.lede { color: var(--text-dim); margin-top: -6px; }

/* ---- panels & grids ---- */

.panel {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: block;
    color: inherit;
    transition: border-color .12s, transform .12s;
}
a.card:hover { border-color: var(--jade-dim); text-decoration: none; transform: translateY(-1px); }
.card h4 { margin: 0 0 4px; font-size: 16px; font-family: var(--font-display); font-weight: 600; }
.card .meta { color: var(--text-faint); font-size: 13px; }

/* ---- stats ---- */

.statline { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.stat {
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    min-width: 74px;
    text-align: center;
}
.stat .k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.stat .v { display: block; font-size: 19px; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.stat .mod { color: var(--text-dim); font-size: 12px; }

/* ---- prose ---- */

.prose { max-width: 68ch; }
.prose p { margin: 0 0 14px; }
.scene {
    border-left: 2px solid var(--jade-dim);
    padding: 2px 0 2px 16px;
    margin: 0 0 16px;
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: 15.5px;
    line-height: 1.7;
}
.scene .label {
    display: block;
    font-family: var(--font);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-faint);
    margin-bottom: 3px;
}

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

.btn {
    display: inline-block;
    background: var(--jade-dim);
    border: 1px solid var(--jade);
    color: #eaf4ec;
    padding: 9px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.btn:hover { background: var(--jade); text-decoration: none; color: #06120a; }
.btn.ghost { background: transparent; border-color: var(--border); color: var(--text-dim); }
.btn.ghost:hover { border-color: var(--jade); color: var(--jade); background: transparent; }
.btn.danger { background: var(--blood-dim); border-color: var(--blood); color: #f6e3e1; }
.btn.danger:hover { background: var(--blood); color: #fff; }

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

form label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 5px; }
form input[type=text], form input[type=password], form select, form textarea {
    width: 100%;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 9px 11px;
    font-family: inherit;
    font-size: 15px;
}
form textarea { resize: vertical; line-height: 1.55; }
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--jade); }
.remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); margin: 0 0 16px; }
.remember input { margin: 0; }
.sign-out { opacity: .7; }
/* Symfony renders `help` as a .help block under the field. */
form .help { font-size: 12.5px; color: var(--text-faint); margin: 6px 0 0; }
form > div { margin-bottom: 16px; }
form ul { color: var(--blood); font-size: 13px; padding-left: 18px; margin: 6px 0 0; }

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

.flash { border-radius: var(--radius); padding: 11px 15px; margin-bottom: 18px; border: 1px solid; font-size: 14px; }
.flash.success { background: rgba(79,157,105,.1); border-color: var(--jade-dim); color: #a9d9ba; }
.flash.error { background: rgba(180,69,58,.1); border-color: var(--blood-dim); color: #e4a9a3; }

/* ---- health bar ---- */

.hp { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 3px; height: 8px; overflow: hidden; }
.hp span { display: block; height: 100%; background: var(--jade); }
.hp.hurt span { background: var(--gold); }
.hp.dire span { background: var(--blood); }

/* ---- combat log ---- */

.log { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.75; }
.log .round {
    margin: 22px 0 8px;
    color: var(--text-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.log .line { padding: 1px 0 1px 14px; border-left: 2px solid transparent; }
.log .line.hit { border-left-color: var(--jade-dim); }
.log .line.miss { color: var(--text-faint); }
.log .line.incoming.hit { border-left-color: var(--blood-dim); }
.log .line .roll { color: var(--text-faint); }
.log .line .crit { color: var(--gold); font-weight: 700; }
.log .line .dmg { color: var(--blood); }
.log .line .kill { color: var(--gold); }

.encounter-head {
    margin: 30px 0 6px;
    padding: 12px 16px;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-dim);
    border-radius: var(--radius);
}
.encounter-head.final { border-left-color: var(--blood); }
.encounter-head .who { font-family: var(--font-display); font-size: 16px; }
.encounter-head .desc { color: var(--text-dim); font-size: 14px; font-family: var(--font); }

.rest, .cleared { color: var(--jade); font-size: 13px; padding-left: 14px; }
.outcome { font-family: var(--font); margin-top: 30px; padding: 20px; border-radius: var(--radius); border: 1px solid; }
.outcome.win { background: rgba(217,164,65,.07); border-color: var(--gold-dim); }
.outcome.loss { background: rgba(180,69,58,.07); border-color: var(--blood-dim); }
.outcome h3 { margin-top: 0; color: inherit; }

/* ---- tables & misc ---- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--text-faint); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; padding: 8px 10px; border-bottom: 1px solid var(--border); }
td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: 0; }

.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); }
.tag.gold { border-color: var(--gold-dim); color: var(--gold); }
.tag.blood { border-color: var(--blood-dim); color: var(--blood); }
.tag.jade { border-color: var(--jade-dim); color: var(--jade); }

.empty { color: var(--text-faint); font-style: italic; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---- live run: standing state and action buttons ---- */

.sticky-status { position: sticky; top: 0; z-index: 5; margin-bottom: 6px; }
.status-hp { font-family: var(--font-display); font-size: 20px; }
.resources { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.progress { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 13px; }

.card.foe.dead { opacity: .4; }
.card.foe.dead h4 { text-decoration: line-through; }

/* ---- the action dock ----
   The combat actions ride the bottom of the window while the log scrolls past
   underneath, so the next attack never needs a scroll back up. `is-stuck` is
   set by the dock controller once the bar has left its place in the flow;
   pinned, it drops the helper lines and tightens up to stay out of the way. */
.dock-spacer { height: 0; }

.action-dock.is-stuck {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    /* Fixed spans the window; keep the buttons on the column's own grid. */
    padding: 0 max(20px, calc((100vw - 1040px) / 2 + 20px)) 10px;
    /* Solid, not a fade: the log ran through the translucent top edge and the
       two sets of words fought each other. */
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -16px 26px -14px #000;
}
.action-dock.is-stuck .turn-of { margin: 8px 0 2px; font-size: 14px; }
.action-dock.is-stuck .actions { margin: 6px 0 0; gap: 7px; }
.action-dock.is-stuck .action-btn { padding: 7px 13px; min-width: 0; }
.action-dock.is-stuck .action-btn .how { display: none; }
.action-dock.is-stuck .potion-form { min-width: 0; flex-direction: row; align-items: center; gap: 6px; }
.action-dock.is-stuck .potion-target { width: auto; }

/* Leave the log somewhere to scroll to behind the pinned bar. The height comes
   from the dock controller, which is the only thing that knows it. */
.action-dock ~ .log.feed { padding-bottom: calc(var(--dock-height, 0px) + 24px); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; align-items: flex-start; }
.actions form { margin: 0; }
.action-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    padding: 10px 16px;
    min-width: 160px;
}
.action-btn .what { font-size: 15px; font-weight: 700; }
.action-btn .how { font-size: 11.5px; font-weight: 400; opacity: .75; }
.action-btn[disabled] { opacity: .35; cursor: not-allowed; }
.action-btn[disabled]:hover { background: transparent; color: var(--text-dim); }

.log .line.action { border-left-color: var(--gold-dim); color: var(--gold); }

/* ============================================================
   The job board — sawn oak, iron straps and a mess of paper
   ============================================================ */

.board-header { margin-bottom: 18px; align-items: flex-end; }
.board-header h2 { margin-bottom: 2px; }

/* ---- the frame: a heavy beam surround ---- */

.jobboard {
    position: relative;
    padding: 13px;
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.32) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, #4b3318 0%, #33220f 42%, #4f3619 100%);
    box-shadow:
        inset 0 0 0 2px rgba(0,0,0,.5),
        inset 0 2px 0 rgba(255,255,255,.07),
        0 18px 44px rgba(0,0,0,.55);
}

/* ---- the boards: vertical planks, grain, knots, seams ---- */

.planks {
    position: relative;
    overflow: hidden;
    padding: 52px 22px 58px;
    background:
        /* knots in the timber */
        radial-gradient(ellipse 9px 17px at 17% 24%, rgba(26,13,3,.78), rgba(58,34,13,.3) 58%, transparent 72%),
        radial-gradient(ellipse 7px 13px at 62% 69%, rgba(26,13,3,.72), transparent 70%),
        radial-gradient(ellipse 11px 19px at 85% 17%, rgba(24,12,3,.62), transparent 72%),
        radial-gradient(ellipse 6px 11px at 40% 88%, rgba(26,13,3,.55), transparent 74%),
        /* seams between planks, each casting a shadow onto its neighbour */
        repeating-linear-gradient(90deg,
            rgba(0,0,0,.82) 0 3px,
            rgba(255,255,255,.07) 3px 5px,
            rgba(0,0,0,.20) 5px 16px,
            transparent 16px 132px,
            rgba(0,0,0,.24) 132px 146px),
        /* fine grain */
        repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(89deg, rgba(255,255,255,.032) 0 2px, transparent 2px 11px),
        repeating-linear-gradient(91deg, rgba(0,0,0,.07) 0 3px, transparent 3px 27px),
        /* the wood itself, plank to plank slightly different */
        linear-gradient(100deg,
            #6b4820 0%, #573a18 21%, #755026 43%,
            #4f3516 64%, #684626 84%, #4a3013 100%);
    box-shadow: inset 0 0 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.45);
}

/* ---- forged straps holding the planks together ---- */

.strap {
    position: absolute;
    left: -10px; right: -10px;
    height: 19px;
    z-index: 0;
    background:
        radial-gradient(circle at 30px 50%, #b4b1a4 0 2px, #6a675d 2px 4px, #17150f 4px 6px, transparent 6px),
        radial-gradient(circle at 30% 50%, #a8a598 0 2px, #14120d 2px 5px, transparent 5px),
        radial-gradient(circle at 70% 50%, #a8a598 0 2px, #14120d 2px 5px, transparent 5px),
        radial-gradient(circle at calc(100% - 30px) 50%, #b4b1a4 0 2px, #6a675d 2px 4px, #17150f 4px 6px, transparent 6px),
        repeating-linear-gradient(84deg, rgba(0,0,0,.22) 0 1px, transparent 1px 6px),
        linear-gradient(180deg,
            #1b1a16 0%, #56534a 14%, #736f63 26%,
            #3a382f 52%, #26241e 72%, #4a473e 88%, #13120e 100%);
    box-shadow: 0 5px 11px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.strap.top { top: 16px; }
.strap.bottom { bottom: 18px; }

/* ---- the clutter: papers overlapping, no grid to speak of ---- */

.notes {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 4px 0 76px;
}

.note {
    --tilt: 0deg;
    --drop: 0px;
    --shift: 0px;
    --lift: 1;
    --w: 262px;
    position: relative;
    display: block;
    width: var(--w);
    margin: 4px -6px 14px;
    padding: 30px 21px 20px;
    color: #2c2113;
    text-decoration: none;
    font-family: var(--font-scribe);
    z-index: var(--lift);
    transform: rotate(var(--tilt)) translate(var(--shift), var(--drop));
    /* clip-path defeats box-shadow, so the cast shadow is a filter. */
    filter: drop-shadow(2px 5px 7px rgba(0,0,0,.5));
    transition: transform .16s ease, filter .16s ease;
}
.note:hover {
    transform: rotate(0deg) translate(var(--shift), calc(var(--drop) - 5px)) scale(1.035);
    filter: drop-shadow(3px 11px 16px rgba(0,0,0,.62));
    text-decoration: none;
    z-index: 60;
}

/* Sheet sizes — a broadsheet next to a torn-off scrap. */
.size-broadsheet { --w: 336px; padding: 34px 26px 22px; }
.size-notice     { --w: 264px; }
.size-scrap      { --w: 206px; padding: 26px 17px 16px; }
.size-strip      { --w: 174px; padding: 26px 15px 15px; }

/* Torn edges. Variant 0 is a clean knife-cut sheet. */
.edge-1 { clip-path: polygon(1% 1%, 24% 0, 51% 2%, 77% 0, 99% 2%, 100% 27%, 98% 54%, 100% 79%, 99% 99%, 74% 100%, 47% 98%, 23% 100%, 2% 98%, 0 73%, 2% 49%, 0 25%); }
.edge-2 { clip-path: polygon(0 3%, 18% 0, 39% 3%, 62% 0, 88% 2%, 100% 6%, 97% 31%, 100% 58%, 98% 84%, 100% 97%, 68% 100%, 41% 97%, 15% 100%, 1% 96%, 3% 66%, 0 38%); }
.edge-3 { clip-path: polygon(2% 0, 30% 2%, 58% 0, 84% 3%, 100% 0, 98% 22%, 100% 47%, 97% 71%, 100% 100%, 70% 97%, 44% 100%, 19% 97%, 0 100%, 2% 78%, 0 52%, 3% 24%); }
.edge-4 { clip-path: polygon(0 0, 100% 2%, 96% 26%, 100% 51%, 95% 76%, 100% 100%, 62% 96%, 28% 100%, 0 96%, 3% 64%, 0 34%); }

/* ============ paper stocks ============ */
/* These have to read as different materials at a glance, so the hues are
   deliberately pushed apart rather than being seven shades of beige. */

/* Old parchment: warm, blotched, foxed. */
.stock-parchment {
    background:
        radial-gradient(ellipse at 78% 12%, rgba(158,104,34,.26), transparent 46%),
        radial-gradient(ellipse at 14% 82%, rgba(148,96,30,.24), transparent 44%),
        radial-gradient(circle at 61% 58%, rgba(126,84,26,.14), transparent 32%),
        linear-gradient(157deg, #f4e3ba 0%, #e6cf9d 60%, #d5bb83 100%);
    box-shadow: inset 0 0 30px rgba(104,66,18,.34), inset 0 0 0 1px rgba(90,58,18,.22);
}

/* Scraped vellum: near-white, smooth, plainly the expensive stuff. */
.stock-vellum {
    color: #1d1a14;
    background:
        radial-gradient(ellipse at 30% 18%, rgba(255,255,255,.7), transparent 58%),
        radial-gradient(ellipse at 86% 92%, rgba(198,180,140,.30), transparent 46%),
        linear-gradient(184deg, #fdfaf1 0%, #f6f1e2 62%, #eae3cd 100%);
    box-shadow: inset 0 0 18px rgba(130,108,64,.14), inset 0 0 0 1px rgba(130,108,64,.22);
}

/* Coarse grey pulp, the sort a fishmonger wraps in. */
.stock-butcher {
    background:
        repeating-linear-gradient(64deg, rgba(52,48,40,.10) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(-51deg, rgba(255,255,255,.06) 0 1px, transparent 1px 4px),
        radial-gradient(circle at 22% 34%, rgba(48,44,36,.16), transparent 32%),
        radial-gradient(circle at 74% 66%, rgba(48,44,36,.12), transparent 30%),
        linear-gradient(168deg, #cbc3ad 0%, #b3ab94 56%, #9d957e 100%);
    box-shadow: inset 0 0 26px rgba(44,40,32,.38), inset 0 0 0 1px rgba(44,40,32,.30);
}

/* Cut hide, stiff and darkened by a season of handling. */
.stock-hide {
    color: #241704;
    background:
        radial-gradient(ellipse at 22% 24%, rgba(255,222,166,.26), transparent 50%),
        radial-gradient(ellipse at 84% 76%, rgba(48,24,4,.42), transparent 52%),
        radial-gradient(ellipse at 58% 46%, rgba(255,214,152,.14), transparent 40%),
        repeating-linear-gradient(41deg, rgba(40,20,2,.07) 0 2px, transparent 2px 6px),
        linear-gradient(150deg, #c39355 0%, #a97a3e 55%, #8d612b 100%);
    box-shadow: inset 0 0 34px rgba(40,20,2,.48), inset 0 0 0 1px rgba(40,20,2,.40);
}

/* Palm-leaf and bark, which is what Chult actually gives you. */
.stock-bark {
    color: #22240f;
    background:
        repeating-linear-gradient(90deg,
            rgba(38,44,16,.20) 0 1px, transparent 1px 3px,
            rgba(248,246,206,.09) 3px 4px, transparent 4px 7px),
        repeating-linear-gradient(90deg, rgba(38,44,16,.12) 0 2px, transparent 2px 19px),
        radial-gradient(ellipse at 62% 30%, rgba(26,36,10,.24), transparent 56%),
        linear-gradient(176deg, #c3c481 0%, #a9ac68 52%, #8d9151 100%);
    box-shadow: inset 0 0 30px rgba(30,38,12,.46), inset 0 0 0 1px rgba(30,38,12,.36);
}

/* Rag paper, cool and woven, brought in by ship. */
.stock-linen {
    color: #1b2024;
    background:
        repeating-linear-gradient(0deg, rgba(74,92,104,.10) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(74,92,104,.10) 0 1px, transparent 1px 4px),
        radial-gradient(ellipse at 72% 80%, rgba(98,112,110,.22), transparent 48%),
        linear-gradient(190deg, #eef3f2 0%, #dde5e4 58%, #c7d2d1 100%);
    box-shadow: inset 0 0 22px rgba(58,74,80,.24), inset 0 0 0 1px rgba(58,74,80,.28);
}

/* Someone pulled this one back out of a fire. */
.stock-scorched {
    background:
        radial-gradient(ellipse at 48% 44%,
            #f4e6c0 0%, #dcc493 40%, #b1834a 66%,
            #6d4318 82%, #2a1806 94%, #170c02 100%),
        linear-gradient(160deg, #e9d9b2, #cbb086);
    box-shadow: inset 0 0 36px rgba(30,14,2,.62), inset 0 0 0 1px rgba(20,10,2,.7);
}
.stock-scorched .note-head,
.stock-scorched .note-foot { border-color: rgba(60,32,8,.5); }

/* ============ what holds them up ============ */

.note .fix {
    position: absolute;
    left: var(--fx, 50%);
    top: var(--fy, 9px);
    width: 14px;
    height: 14px;
    margin-left: -7px;
    z-index: 2;
}

/* Round-headed iron nail, rust bleeding into the paper. */
.fix-nail {
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #a29e94 0 20%, #56534b 56%, #211f1b 100%);
    box-shadow:
        0 2px 3px rgba(0,0,0,.55),
        0 0 0 3px rgba(126,82,30,.14),
        0 0 0 6px rgba(126,82,30,.07),
        inset 0 -1px 1px rgba(0,0,0,.55);
}

/* Square forged tack, hammered flat. */
.fix-tack {
    width: 13px; height: 13px;
    transform: rotate(14deg);
    border-radius: 2px;
    background: linear-gradient(138deg, #8e8b81 0%, #4c4941 46%, #26241f 100%);
    box-shadow:
        0 2px 4px rgba(0,0,0,.6),
        0 0 0 3px rgba(126,82,30,.12),
        inset 1px 1px 0 rgba(255,255,255,.18);
}

/* A blob of sealing wax, stamped and cracked. */
.fix-wax {
    width: 21px; height: 19px;
    margin-left: -10px;
    border-radius: 52% 46% 58% 44% / 48% 56% 44% 54%;
    background: radial-gradient(circle at 38% 32%, #d0554a 0%, #9c2b23 58%, #611711 100%);
    box-shadow:
        0 2px 5px rgba(0,0,0,.5),
        inset 0 0 0 2px rgba(255,255,255,.07),
        inset -2px -3px 4px rgba(0,0,0,.45);
}
.fix-wax::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,225,215,.20), inset 0 1px 2px rgba(0,0,0,.4);
}

/* Twine through a punched hole. */
.fix-twine {
    width: 16px; height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(38,24,10,.85) 0 3px, transparent 3.5px);
}
.fix-twine::before,
.fix-twine::after {
    content: "";
    position: absolute;
    left: 1px; right: 1px; top: 7px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #b39a6f 0%, #8d7448 100%);
}
.fix-twine::before { transform: rotate(31deg); }
.fix-twine::after  { transform: rotate(-24deg); }

/* ============ leftovers on the bare wood ============ */
/* Old nail holes and the corner of a notice somebody tore down in a hurry. */

.debris {
    position: absolute;
    left: var(--dx);
    top: var(--dy);
    z-index: 0;
    pointer-events: none;
}
.nail-bare {
    width: 13px; height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #8b8578 0 20%, #4a4238 56%, #1c1811 100%);
    box-shadow:
        0 2px 4px rgba(0,0,0,.6),
        0 0 0 3px rgba(150,88,30,.20),
        0 0 0 7px rgba(150,88,30,.10);
}
.nail-hole {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,.75) 0 60%, rgba(0,0,0,.25) 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.09);
}
.torn-corner {
    width: 46px; height: 38px;
    clip-path: polygon(0 0, 100% 0, 76% 44%, 100% 100%, 34% 82%, 0 100%);
    background: linear-gradient(146deg, #e9d9b2 0%, #cdb488 68%, #b39c72 100%);
    filter: drop-shadow(2px 4px 5px rgba(0,0,0,.5));
}
.torn-corner::after {
    content: "";
    position: absolute;
    left: 40%; top: 5px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #9a968c 0 20%, #55524b 56%, #211f1b 100%);
    box-shadow: 0 0 0 3px rgba(126,82,30,.16);
}

/* A corner that has lifted off the board and curled back on itself. */
.note.curl::before {
    content: "";
    position: absolute;
    right: 0; bottom: 0;
    width: 32px; height: 32px;
    background: linear-gradient(135deg,
        transparent 48%, rgba(255,250,232,.9) 51%,
        #d3bd93 74%, #a58c60 100%);
    box-shadow: -4px -4px 7px rgba(0,0,0,.22);
}

/* ============ marks the paper has picked up ============ */

.note::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    opacity: .5;
}
.stain-none::after { display: none; }
/* Ring left by a wet tankard. */
.stain-ring::after {
    right: 12%; bottom: 14%;
    width: 54px; height: 42px;
    box-shadow: inset 0 0 0 2px rgba(112,74,26,.34);
    background: radial-gradient(ellipse, rgba(112,74,26,.06), transparent 70%);
}
/* Spilled ink. */
.stain-ink::after {
    left: 9%; bottom: 11%;
    width: 30px; height: 22px;
    border-radius: 58% 42% 48% 52% / 60% 44% 56% 40%;
    background: radial-gradient(circle at 40% 36%, rgba(24,22,46,.55), rgba(24,22,46,.18) 70%, transparent);
}
/* Thumbed grubby corner. */
.stain-thumb::after {
    right: 0; top: 0;
    width: 46px; height: 46px;
    border-radius: 0;
    background: radial-gradient(circle at 100% 0, rgba(58,38,14,.30), transparent 70%);
}

/* ============ the writing on them ============ */

.note-head {
    display: block;
    margin: 0 0 6px;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-align: center;
    color: #6f5426;
    border-bottom: 1px solid rgba(80,56,22,.32);
    padding-bottom: 5px;
}
.note-title {
    margin: 0 0 9px;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.2;
    color: #201708;
    text-transform: none;
    letter-spacing: .01em;
    font-weight: 700;
    text-align: center;
}
.size-broadsheet .note-title { font-size: 21px; }
.size-scrap .note-title,
.size-strip .note-title { font-size: 15.5px; }

.note-body {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #3b2c19;
}
.size-scrap .note-body,
.size-strip .note-body { font-size: 12.5px; }

/* The clerk's hand: a couple of sheets were written out, not printed. */
.hand-scribe .note-body,
.hand-scribe .note-hand { font-family: var(--font-hand); }
.hand-scribe .note-body { font-size: 13px; }

.note-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #563c19;
    border-top: 1px dashed rgba(80,56,22,.38);
    padding-top: 7px;
}
.note-foot .reward {
    font-family: var(--font-display);
    font-size: 14px;
    color: #7a5514;
}
.note-foot .difficulty {
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6a4c22;
}
.note-hand {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    color: #6c5637;
    font-style: italic;
    text-align: right;
}

.notes .empty {
    color: #efe0bd;
    font-family: var(--font-display);
    font-style: italic;
    text-shadow: 0 2px 4px rgba(0,0,0,.7);
}

/* Narrow screens: stop stacking paper on paper, it becomes unreadable. */
@media (max-width: 720px) {
    .planks { padding: 46px 14px 50px; }
    .notes { display: block; }
    .note {
        width: auto;
        margin: 0 0 20px;
        transform: rotate(var(--tilt));
    }
    .note:hover { transform: rotate(0deg) scale(1.01); }

    /* The pinned dock has to share a phone screen with the roster above it, so
       it gives up whatever it can: the turn label, and a row's worth of padding. */
    .action-dock.is-stuck { padding-bottom: 8px; }
    .action-dock.is-stuck .turn-of { margin: 6px 0 0; font-size: 12.5px; }
    .action-dock.is-stuck .actions { gap: 6px; }
    .action-dock.is-stuck .action-btn { padding: 6px 11px; }
    .action-dock.is-stuck .action-btn .what { font-size: 14px; }
}

/* ============================================================
   Turn-based combat: the field, the die, the feed
   ============================================================ */

.field {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 20px 0 6px;
}

.foe-card {
    background: linear-gradient(180deg, var(--bg-raised), var(--bg-sunken));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: opacity .35s ease, filter .35s ease;
}
.foe-card.dead { opacity: .35; filter: grayscale(1); }
.foe-card.dead .foe-name { text-decoration: line-through; }
.foe-name { font-family: var(--font-display); font-size: 15px; }
.foe-meta { color: var(--text-faint); font-size: 12px; margin: 2px 0 8px; }
.foe-cr { color: var(--text-faint); font-size: 11px; margin-top: 6px; letter-spacing: .06em; }

/* ---- the die's caption ---- */

.die-caption {
    color: var(--text-dim);
    font-size: 13px;
    letter-spacing: .04em;
    text-align: center;
    min-height: 18px;
}

/* ---- the feed ---- */

.feed { margin-top: 18px; }
.feed .fresh { animation: land .3s ease-out; }

@keyframes land {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

.actions.is-waiting { opacity: .4; pointer-events: none; }

.checkpoint-panel {
    margin: 22px 0 6px;
    padding: 18px 20px;
    border: 1px solid var(--gold-dim);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    background: rgba(217,164,65,.06);
}
.checkpoint-panel h3 { margin: 0 0 6px; color: var(--gold); }
.checkpoint-panel p { margin: 0; color: var(--text-dim); }

.full-log { margin-top: 34px; border-top: 1px solid var(--border); padding-top: 14px; }
.full-log summary {
    cursor: pointer;
    color: var(--text-faint);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.full-log summary:hover { color: var(--jade); }
.full-log .log { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
}

/* ---- 3D dice: a full-window overlay ---- */

.dice-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 60;
    /* The dice are scenery: every click belongs to the page underneath. */
    pointer-events: none;
    background: transparent;
}
.dice-overlay[hidden] { display: none; }

/* With the dice rolling over everything, the stage itself is just the caption. */
.die-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 18px 0 4px;
    min-height: 0;
}
.die-stage[hidden] { display: none; }

.die-stage.is-crit-3d   .die-caption { color: var(--gold); text-shadow: 0 0 16px rgba(217,164,65,.45); }
.die-stage.is-fumble-3d .die-caption { color: var(--blood); }

/* ============================================================
   The market
   ============================================================ */

.purse { text-align: right; }
.purse-gold {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.panel.slot { padding: 14px 16px; }
.panel.slot h3 { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--text-faint); }
.slot-name { font-family: var(--font-display); font-size: 16px; }

.wares {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    transition: border-color .12s;
}
.wares:hover { border-color: var(--jade-dim); }
.wares.is-equipped { border-color: var(--jade-dim); background: rgba(79,157,105,.06); }
.wares.is-locked { opacity: .55; }

.wares-name { font-family: var(--font-display); font-size: 16.5px; }
.wares-price {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wares-effect {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--jade);
    margin: 4px 0 8px;
}
.wares-flavour {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-dim);
}
.wares form { margin: 0; }

.btn.small { padding: 6px 13px; font-size: 13px; }

/* A heal poured away on someone who did not need it. */
.log .line.action.is-wasted { border-left-color: var(--text-faint); color: var(--text-faint); font-style: italic; }

/* ---- the two ranks ----
   The creatures in the way, and the ones behind them. A sword only reaches the
   first row; a bow does not care. See App\Combat\Reach. */
.rank { margin: 6px 0; }
.rank-label {
    display: block;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 4px;
}
/* Further away, and behind: a smaller card on a tighter grid, so five of them
   do not push the fight you are actually in off the bottom of the screen. */
.rank-back { margin: 6px 0 2px; padding: 0 5%; }
.rank-back .field {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
    margin: 0;
}
.rank-back .foe-card { padding: 9px 10px; }
/* `.creature-art.is-icon` sets its own height further down the file and would
   otherwise win on source order, so both cases are named here. */
.rank-back .creature-art,
.rank-back .creature-art.is-icon { height: 62px; margin: -9px -10px 7px; width: calc(100% + 20px); }
.rank-back .foe-name { font-size: 13.5px; }
.rank-back .foe-meta { font-size: 11px; }
.rank-back .foe-cr { display: none; }
.rank-back .icon-creature { width: 26px; height: 26px; }

.foe-card.is-out-of-reach {
    opacity: .62;
    cursor: default;
    filter: saturate(.6);
}
.foe-card.is-out-of-reach:hover { border-color: var(--border); }
.foe-reach {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-dim);
}

/* ---- the order of play ----
   A strip of who goes next, so a round has a visible shape instead of being a
   heading that changes. */
.order {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
}
.order-step {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-raised);
    color: var(--text-dim);
    font-size: 12.5px;
    opacity: .55;
    transition: opacity .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.order-step .portrait.is-avatar { width: 26px; height: 26px; margin: 0; }

/* Already been. */
.order-step.is-done { opacity: .3; }

/* Up now. */
.order-step.is-now {
    opacity: 1;
    border-color: var(--jade);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px var(--jade-dim), 0 0 18px rgba(79,157,105,.16);
}

/* Down, and not getting a turn. */
.order-step.is-out {
    opacity: .3;
    border-color: var(--blood-dim);
}
.order-step.is-out .order-name { text-decoration: line-through; }

.order-step.is-foes { padding-left: 11px; }
.order-step.is-foes.is-now { border-color: var(--blood); box-shadow: 0 0 0 1px var(--blood-dim); }
.order-mark { display: inline-flex; color: var(--blood); }
.order-mark .icon { width: 17px; height: 17px; }
.order-name { white-space: nowrap; }

@media (max-width: 720px) {
    .order-name { display: none; }
    .order-step { padding: 5px; }
    .order-step.is-foes { padding: 6px 9px; }
    .order-step.is-foes .order-name { display: inline; }
}

/* ============================================================
   Blows landing: the fight happens on the field, not in the log
   ============================================================ */

/* The bars are driven by the field module during a reveal, so they need to
   move rather than jump. */
.hp span { transition: width .42s cubic-bezier(.22,.61,.36,1); }

@keyframes struck {
    0%   { transform: translate(0, 0); }
    22%  { transform: translate(-5px, 2px); }
    45%  { transform: translate(4px, -2px); }
    70%  { transform: translate(-2px, 1px); }
    100% { transform: translate(0, 0); }
}

@keyframes struck-hard {
    0%   { transform: translate(0, 0) scale(1); }
    15%  { transform: translate(-9px, 3px) scale(1.02); }
    35%  { transform: translate(8px, -4px) scale(1.02); }
    60%  { transform: translate(-5px, 2px) scale(1.01); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes grazed {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(3px, 0); }
    100% { transform: translate(0, 0); }
}

.is-struck { animation: struck .42s ease-out; }
.is-grazed { animation: grazed .3s ease-out; }
.is-struck-hard {
    animation: struck-hard .52s ease-out;
    box-shadow: 0 0 0 1px var(--blood), 0 0 26px rgba(180,69,58,.4);
}

/* A creature does not simply stop existing — it goes over. */
.foe-card { transition: opacity .45s ease, filter .45s ease, transform .45s ease; }
.foe-card.dead { transform: rotate(-1.5deg); }

/* The number that lifts off the card. Fixed, because the foe cards are buttons
   and a positioned child inside one is not reliable. */
.damage-float {
    position: fixed;
    z-index: 40;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--blood);
    text-shadow: 0 2px 10px #000, 0 0 3px #000;
    animation: float-off 1s ease-out forwards;
}
.damage-float.is-crit {
    font-size: 44px;
    color: #e8654f;
}
.damage-float.is-heal { color: var(--jade); }
.damage-float.is-miss {
    font-size: 19px;
    font-family: var(--font-mono);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .1em;
}

@keyframes float-off {
    0%   { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
    18%  { opacity: 1; transform: translate(-50%, -60%) scale(1.08); }
    32%  { transform: translate(-50%, -62%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -145%) scale(.95); }
}

/* Somebody who would rather not be shaken about. */
@media (prefers-reduced-motion: reduce) {
    .is-struck, .is-struck-hard, .is-grazed { animation: none; }
    .damage-float { animation: float-off-still 1s ease-out forwards; }
    .hp span { transition: none; }

    @keyframes float-off-still {
        0%   { opacity: 0; }
        20%  { opacity: 1; }
        100% { opacity: 0; }
    }
}

/* ============================================================
   Artwork: portraits where we have them, icons everywhere else
   ============================================================ */

/* ---- party portraits ----
   Three sizes off one partial: an avatar beside a name, a card banner on a
   roster tile, and a hero shot at the top of a character's own page. Anyone
   without a portrait file gets their race's icon in the same footprint, so a
   mixed roster still lines up. */
.portrait {
    display: block;
    object-fit: cover;
    background: linear-gradient(160deg, var(--bg-sunken), rgba(0,0,0,.35));
    border: 1px solid var(--border);
}
.portrait.is-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jade-dim);
}
.icon-portrait { width: 55%; height: 55%; }

.portrait.is-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: none;
    margin-right: 9px;
}

.portrait.is-card {
    width: calc(100% + 28px);
    height: 132px;
    margin: -12px -14px 10px;
    border: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    /* Faces sit high in these plates, so bias the crop upwards. */
    object-position: center 32%;
    filter: saturate(.85) brightness(.82);
    box-shadow: inset 0 -26px 22px -18px var(--bg-raised);
}
.card:hover .portrait.is-card { filter: saturate(1) brightness(.95); }

.portrait.is-hero {
    width: 104px;
    height: 104px;
    border-radius: var(--radius);
    flex: none;
}

.danger-zone { border-color: var(--blood-dim); }
.danger-zone p { margin: 0 0 12px; color: var(--text-dim); font-size: 14px; }
.danger-zone p.empty { margin: 0; }

.character-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
}
.character-head h2 { margin: 0; }
.character-head .lede { margin: 4px 0 0; }

.companion .portrait.is-avatar { width: 24px; height: 24px; margin-right: 6px; }


.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; }

.creature-art {
    display: block;
    height: 152px;
    /* Contain, not cover: the plates are full-body and cropping to fill the
       card cut the head off. The letterboxing either side falls back to the
       same gradient the icon placeholder uses, so it reads as a plate. */
    object-fit: contain;
    object-position: center;
    border-radius: var(--radius) var(--radius) 0 0;
    margin: -12px -14px 10px;
    width: calc(100% + 28px);
    /* The book plates are bright; knock them back into the jungle, and fade the
       bottom edge so the name below is not fighting the art. */
    filter: saturate(.8) contrast(1.04) brightness(.72);
    box-shadow: inset 0 -26px 22px -18px var(--bg-raised);
    background: linear-gradient(160deg, var(--bg-sunken), rgba(0,0,0,.35));
}

.creature-art.is-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 152px;
    color: var(--jade-dim);
    background: linear-gradient(160deg, var(--bg-sunken), rgba(0,0,0,.35));
    filter: none;
    box-shadow: none;
}
.icon-creature { width: 46px; height: 46px; }

.foe-card { padding-top: 12px; overflow: hidden; }
.foe-card.dead .creature-art { filter: grayscale(1) brightness(.45); }

/* Portraits in a table cell stay small. */
td.with-art { white-space: nowrap; }
td.with-art .creature-art {
    display: inline-block;
    width: 34px;
    height: 34px;
    aspect-ratio: 1;
    border-radius: 3px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
td.with-art .creature-art.is-icon { width: 34px; height: 34px; }
td.with-art .icon-creature { width: 22px; height: 22px; }

.wares-icon { color: var(--jade); }
.icon-ware { width: 20px; height: 20px; vertical-align: -0.22em; }

/* ---- colophon ---- */

.colophon {
    border-top: 1px solid var(--border);
    margin-top: 60px;
    /* The credit is a licence condition, so it must not end up stranded behind
       the pinned action dock. */
    padding: 18px 0 calc(28px + var(--dock-height, 0px));
    color: var(--text-faint);
    font-size: 11.5px;
    line-height: 1.7;
}
.colophon a { color: var(--text-dim); }

/* ============================================================
   The party
   ============================================================ */

.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.roster-member {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-sunken);
    transition: border-color .15s, box-shadow .15s;
}
.roster-member.is-active {
    border-color: var(--jade);
    box-shadow: 0 0 0 1px var(--jade-dim), 0 0 18px rgba(79,157,105,.18);
}
.roster-member.is-down { opacity: .45; }
.roster-member.is-down .roster-name { text-decoration: line-through; }

.roster-name { font-family: var(--font-display); font-size: 15px; }
.roster-hp { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 13px; }
.roster-meta { color: var(--text-faint); font-size: 11.5px; margin-top: 5px; }

.roster-member .hp { margin-top: 5px; }

.turn-of {
    margin: 22px 0 8px;
    color: var(--jade);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-display);
    font-size: 19px;
}

/* ---- taking companions ---- */

.companions {
    margin: 10px 0 12px;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
}
.companions-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-faint);
}
.companion { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; margin: 0; cursor: pointer; }
.companion input { accent-color: var(--jade); }
.companion .meta { color: var(--text-faint); font-size: 11.5px; }

/* ---- picking a target ---- */

.foe-card {
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    border: 1px solid var(--border);
}
.foe-card:not([disabled]):hover { border-color: var(--jade-dim); }
.foe-card.is-targeted {
    border-color: var(--blood);
    box-shadow: 0 0 0 1px var(--blood-dim), 0 0 20px rgba(180,69,58,.22);
}
.foe-card.is-targeted .foe-name::after {
    content: ' ◄';
    color: var(--blood);
}
.foe-card[disabled] { cursor: default; }

.potion-form { display: flex; flex-direction: column; gap: 5px; min-width: 172px; }
.potion-form .action-btn { min-width: 0; width: 100%; }
.potion-target {
    width: 100%;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
}

/* ---- signature moves ---- */

.action-btn.signature { border-color: var(--gold-dim); color: var(--gold); }
.action-btn.signature:hover:not([disabled]) { background: rgba(217,164,65,.12); border-color: var(--gold); color: var(--gold); }
.log .line.signature { border-left-color: var(--gold); color: var(--text); }
.sig-name { color: var(--gold); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }

/* ---- bosses ---- */

.foe-card.is-boss { border-color: var(--blood-dim); background: linear-gradient(180deg, rgba(180,69,58,.10), var(--bg-sunken)); }
.foe-card.is-boss .creature-art { height: 150px; }
.boss-warning { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.log .line.boss { border-left-color: var(--blood); color: var(--blood); font-weight: 600; }

/* ---- loot ---- */

.found { margin-top: 5px; color: var(--gold); }
.found strong { color: var(--gold); }
.loot-list { margin: 6px 0 0; padding-left: 18px; }
.loot-list li { margin-bottom: 3px; }

/* ---- the road in ---- */

.guide-blurbs { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.guide-blurbs p {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.55;
}
.guide-blurbs strong { color: var(--text); }

.roster-hp .temp { color: var(--gold); }