/* ============================================================
   WEND — "INK & BONE" DESIGN SYSTEM
   Three-tone folk-horror woodcut UI. Flat ink black, bone
   cream, one blood accent. Race color lives in portrait flesh
   only; class orders read as desaturated tint-rings.
   Dynamic textures (--frame-*, --tex-split, --grain, --ring-mask)
   are baked by ink-engine.js and re-baked by the Tweaks panel.
   ============================================================ */

:root{
  /* THREE TONES + ACCENT */
  --ink:#0d0d0d;        /* flat black — seamless with portrait bg */
  --pitch:#070707;      /* deepest — bar wells, gutters */
  --plate:#141414;      /* raised panel */
  --soot:#1c1b18;       /* hairline raised / chips */
  --bone:#ece2cc;       /* primary cream — text & linework */
  --bone-2:#bdb39a;     /* secondary (AA on plate) */
  --ash:#9b927c;        /* muted (raised to AA ~5:1 for small text) */
  --ash-deco:#6f6857;   /* decorative only — never sole-info text */
  --rule:#2a2823;       /* dividers / hairlines */
  --blood:#9e2b22;      /* THE accent (set by ink-engine) */
  --blood-br:#c2392b;   /* bright / hover */
  --blood-deep:#5e1813; /* shadow */
  --blood-text:#e07564; /* accent AS TEXT — AA on plate */

  /* CLASS ORDERS — six banners. Subclass tints are desaturated
     blends used ONLY as portrait rings / optional chrome. */
  --order-warrior:#d8362b; --order-rogue:#2fa148; --order-cleric:#b8841f;
  --order-archer:#2ba0a8;  --order-occult:#8a3ed0; --order-enter:#e2358c;
  --cc-berserker:#d8362b; --cc-brigand:#846b39; --cc-paladin:#c85d25;
  --cc-ranger:#816b69;    --cc-horseman:#b13a7d; --cc-gladiator:#dd355b;
  --cc-assassin:#2fa148;  --cc-zealot:#739233;   --cc-poacher:#2da078;
  --cc-graverobber:#5c6f8c;--cc-swashbuckler:#886b6a;
  --cc-bishop:#b8841f;    --cc-sentinel:#729263;  --cc-exorcist:#a16177;
  --cc-reveler:#cd5c55;   --cc-marksman:#2ba0a8;  --cc-soulshot:#5a6fbc;
  --cc-bard:#866a9a;      --cc-lich:#8a3ed0;      --cc-bokor:#b639ae;
  --cc-maestro:#e2358c;

  --radius:2px;         /* carved, near-square */

  /* type */
  --display:'Pirata One',Georgia,serif;  /* woodcut letterpress */
  --body:'Spectral',Georgia,serif;           /* literary serif */

  /* dynamic (ink-engine writes these; fallbacks below) */
  --frame-bone:none; --frame-blood:none; --frame-thin:none; --frame-soft:none;
  --ring-mask:none; --tex-split:#0d0d0d; --grain:none;
  --grit-grain:.35; --grit-half:.15;

  /* accent strategy: chrome class-tint mix (0 = blood only) */
  --chrome-class:0;
}

*{box-sizing:border-box}
html,body{margin:0}
/* fluid root so type stays legible from laptop to 4K */
html{font-size:clamp(17px, .34vw + 13.6px, 21px)}
body{
  background-color:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  position:relative;
  background-image:radial-gradient(140% 90% at 50% -10%, #18150f 0%, var(--ink) 60%);
}
/* grit — INK halftone + grain on a real fixed layer. Dark dots,
   multiply blend: reads as printed ink over the lit shapes
   (portraits, bone) rather than washing the blacks. */
.grit{position:fixed;inset:0;pointer-events:none;z-index:9992;mix-blend-mode:multiply;
  background:
    var(--grain),
    radial-gradient(circle at center, rgba(9,8,7,.92) 0 1.1px, transparent 1.6px);
  background-size:170px 170px, 5px 5px;
  opacity:var(--grit-amt);}

/* keyboard focus — visible on every interactive element */
a:focus-visible,button:focus-visible,.card:focus-visible,.tabs button:focus-visible,
.act:focus-visible,.btn:focus-visible{outline:2px solid var(--blood-text);outline-offset:2px;border-radius:1px}

/* ============== TYPE ============== */
h1,h2,h3,.display{font-family:var(--display);font-weight:500;margin:0;letter-spacing:.01em;line-height:1.12}
h1{font-size:2.6rem}
h2{font-size:1.5rem}
h3{font-size:1.05rem}
.eyebrow{display:block;font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blood-text);margin-bottom:7px;line-height:1.35}
.label{font-family:var(--body);font-weight:600;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-2)}
.meta{font-family:var(--body);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ash)}
.sub{color:var(--bone-2);font-style:italic;font-size:.92rem}
.dim{color:var(--ash)}
.lede{font-size:1.08rem;color:var(--bone-2);max-width:62ch}
.quill{font-style:italic;color:var(--bone-2);border-left:2px solid var(--blood-deep);
  padding-left:14px;margin:14px 0;font-size:.98rem;text-wrap:pretty}
a{color:var(--blood-text);text-decoration-thickness:1px;text-underline-offset:3px}
.numeral{font-family:var(--display);font-variant-numeric:lining-nums}

/* ============== LAYOUT ============== */
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.section{padding:42px 0;border-top:1px solid var(--rule)}
.section:first-of-type{border-top:0}
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.sec-head h2{flex:0 0 auto;white-space:nowrap}
.sec-head .rule{flex:1 1 60px;height:1px;background:var(--rule);align-self:center;min-width:24px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ============== PANELS ============== */
.panel{
  position:relative;border-radius:var(--radius);
  border:11px solid transparent;border-image:var(--frame-bone);
  background:var(--plate);padding:16px 16px 18px;
}
.panel--active{border-image:var(--frame-blood)}
.panel--soft{border-image:var(--frame-soft)}
.panel--plain{border:1px solid var(--rule);background:var(--plate);padding:16px}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.panel-head .meta{margin-top:4px}
.panel-head h2,.panel-head h3{line-height:1.05;margin-top:3px}

/* Direction II — WOODBLOCK: corner-cut carved plate */
.block{
  position:relative;background:var(--plate);
  padding:18px;color:var(--bone);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),
    calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  box-shadow:inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--bone), inset 0 0 0 5px var(--ink);
}
.block::after{content:"";position:absolute;inset:9px;border:1px solid var(--rule);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);pointer-events:none}
.block--active{box-shadow:inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--blood), inset 0 0 0 5px var(--ink)}

/* Direction III — TORN LEAF: pinned contract page */
.leaf{
  position:relative;background:var(--plate);color:var(--bone);padding:20px 18px;
  border-radius:1px;
  -webkit-mask:var(--leaf-mask);mask:var(--leaf-mask);
  box-shadow:inset 0 0 0 1px var(--rule);
}
.leaf-wrap{position:relative}
.leaf-wrap::before{content:"";position:absolute;inset:-2px;background:var(--bone);
  -webkit-mask:var(--leaf-mask);mask:var(--leaf-mask);z-index:-1;opacity:.9}
.leaf-pin{position:absolute;top:-7px;left:50%;transform:translateX(-50%);z-index:3;
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,var(--blood-br),var(--blood-deep) 82%);
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.6)}

/* ============== BUTTONS ============== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-size:.95rem;letter-spacing:.02em;
  background:var(--bone);color:var(--ink);border-radius:var(--radius);
  border:7px solid transparent;border-image:var(--frame-thin);
  padding:8px 16px;cursor:pointer;transition:transform .05s, filter .15s;
  text-transform:none;user-select:none;
}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translate(1.5px,1.5px)}
.btn--ghost{background:transparent;color:var(--bone);border-image:var(--frame-bone)}
.btn--ghost:hover{background:rgba(236,226,204,.06)}
.btn--blood{background:var(--blood);color:var(--bone);border-image:var(--frame-blood)}
.btn--blood:hover{background:var(--blood-br)}
.btn--sm{font-size:.8rem;padding:5px 11px;border-width:6px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn .ico{width:14px;height:14px;flex:0 0 auto}

/* ============== STAT CHIPS + GLYPHS ============== */
.stats{display:flex;gap:7px;flex-wrap:wrap}
.stat{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--body);font-weight:600;font-size:.74rem;letter-spacing:.06em;
  color:var(--bone-2);border:1px solid var(--rule);background:var(--soot);
  padding:4px 9px;border-radius:1px;text-transform:uppercase}
.stat b{color:var(--bone);font-weight:700;font-variant-numeric:tabular-nums}
.stat .ico{width:12px;height:12px;color:var(--bone-2)}
.stat--hot{border-color:var(--blood-deep)}
.stat--hot .ico{color:var(--blood-br)}
.ico{display:inline-block;vertical-align:middle}
.ico path,.ico line,.ico polygon,.ico circle,.ico rect,.ico polyline{
  stroke:currentColor;stroke-width:1.6;fill:none;vector-effect:non-scaling-stroke}
.ico .fill{fill:currentColor;stroke:none}

/* ============== GAUGES (printed-ink, notched) ============== */
.gauge{margin-top:14px}
.gauge:first-child{margin-top:0}
/* prominent health gauge */
.gauge--health .bar{height:26px;box-shadow:inset 0 0 0 1px var(--rule),0 0 0 1px #000}
.gauge--health .gauge-label{font-size:.82rem;color:var(--bone);letter-spacing:.08em;margin-bottom:6px}
.gauge--health .gauge-label .v{font-size:1rem}
.gauge-label{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-2);margin:0 0 5px}
.gauge-label>span{white-space:nowrap}
.gauge-label .v{color:var(--bone);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.bar{height:15px;background:var(--pitch);border:1.5px solid #000;
  box-shadow:inset 0 0 0 1px var(--rule);border-radius:1px;overflow:hidden;position:relative}
.bar .fill{height:100%;position:relative;transition:width .5s cubic-bezier(.2,.7,.3,1)}
.fill.blood{background:
  repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 11px),
  linear-gradient(180deg,var(--blood-br),var(--blood-deep))}
.fill.bone{background:
  repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 11px),
  linear-gradient(180deg,#d8cdb2,#9c947c)}
.fill.ash{background:
  repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 11px),
  linear-gradient(180deg,#7d7666,#4d4940)}
.bar.low .fill.blood{background:
  repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 7px),
  repeating-linear-gradient(45deg,var(--blood-br) 0 6px,var(--blood-deep) 6px 12px)}

/* ============== ROSTER CARD ============== */
.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:620px){.roster{grid-template-columns:repeat(2,1fr)}}
.card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:7px solid transparent;border-image:var(--frame-thin);
  background:var(--soot);cursor:pointer;transition:transform .08s;
}
.card:hover{transform:translateY(-2px)}
.card:active{transform:translateY(0)}
.card .plate{position:relative;aspect-ratio:1/1;overflow:hidden;background:#000}
.card img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.04)}
/* clean solid nameplate UNDER the portrait — no gradient over the art,
   class shown as a tidy color strip instead of a busy ring */
.card .name-bar{padding:10px 12px 12px;background:var(--soot);
  border-top:3px solid var(--cc,var(--rule))}
.card .name{font-family:var(--display);font-size:1.2rem;color:var(--bone);line-height:1.05}
.card .cls{font-family:var(--body);font-weight:600;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--bone-2);margin-top:3px}
/* prominent health */
.card .hp{display:flex;align-items:center;gap:8px;margin-top:10px}
.card .hp .bar{flex:1;height:12px}
.card .hp .hp-num{font-family:var(--body);font-weight:700;font-size:.74rem;color:var(--bone);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.card.fallen .name-bar{border-top-color:var(--ash-deco)}
.card.fallen img{filter:grayscale(1) contrast(.9) brightness(.7)}
.card .dead{position:absolute;inset:0;z-index:3;background:rgba(8,7,6,.5);display:grid;place-items:center}
.card .dead span{font-family:var(--display);font-size:1.1rem;letter-spacing:.2em;color:var(--blood-text);
  border:2px solid var(--blood);padding:4px 14px;transform:rotate(-7deg);background:rgba(8,7,6,.6)}

/* WAX SEAL */
.seal{display:grid;place-items:center;border-radius:50%;color:var(--bone);
  font-family:var(--display);line-height:1;
  background:radial-gradient(circle at 38% 32%,var(--blood-br),var(--blood-deep) 82%);
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.5),inset 0 -2px 5px rgba(0,0,0,.5)}
.seal--lvl{position:absolute;top:7px;right:7px;z-index:3;width:30px;height:30px;font-size:.92rem}
.seal--lg{width:54px;height:54px;font-size:1.5rem}
.seal--sm{width:24px;height:24px;font-size:.7rem}

/* ORDER SIGIL — small framed glyph for the six orders */
.sigil{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--bone-2);color:var(--bone)}
.sigil .ico{width:15px;height:15px}

/* ============== TABS / SEGMENTED ============== */
.tabs{display:inline-flex;border:1px solid var(--rule);background:var(--soot);border-radius:2px;padding:2px}
.tabs button{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ash);background:transparent;border:0;cursor:pointer;
  padding:6px 14px;border-radius:1px;transition:color .15s,background .15s}
.tabs button[aria-selected="true"]{color:var(--ink);background:var(--bone)}
.tabs button:hover:not([aria-selected="true"]){color:var(--bone-2)}

/* ============== BADGES / TAGS ============== */
.tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--body);font-weight:600;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-2);
  border:1px solid var(--rule);padding:3px 8px;border-radius:1px;background:var(--soot)}
.tag--blood{color:var(--blood-text);border-color:var(--blood-deep)}
.tag--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ============== DIVIDERS / ORNAMENT ============== */
.orn{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--ash);margin:8px 0}
.orn::before,.orn::after{content:"";height:1px;flex:1;background:var(--rule)}
.orn .mark{color:var(--blood-br);font-size:.8rem}

/* drybrush rule */
.drybrush{height:6px;background:var(--bone);opacity:.85;
  -webkit-mask:var(--brush-rule);mask:var(--brush-rule);-webkit-mask-size:100% 100%;mask-size:100% 100%}

/* ============== SWATCHES (spec) ============== */
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.sw{border:1px solid #000;border-radius:1px;overflow:hidden;background:var(--plate)}
.sw .chip{height:64px;display:block}
.sw .cap{padding:6px 8px;display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  border-top:1px solid var(--rule)}
.sw .nm{font-family:var(--body);font-weight:600;font-size:.74rem;letter-spacing:.03em;color:var(--bone)}
.sw .hex{font-family:var(--body);font-size:.68rem;color:var(--ash);font-variant-numeric:tabular-nums;text-transform:uppercase}

.ccrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0}
.ccrow .lead{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bone-2);width:90px;flex:0 0 90px}
.cc{font-family:var(--body);font-weight:600;font-size:.72rem;padding:4px 11px;border-radius:1px;
  text-transform:capitalize;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.6);border:1px solid rgba(0,0,0,.4)}

/* token rows */
.tok{display:flex;align-items:center;gap:14px;padding:9px 0;border-top:1px solid var(--rule)}
.tok:first-child{border-top:0}
.tok .demo{flex:0 0 auto}
.tok .nm{font-family:var(--body);font-weight:600;font-size:.78rem;color:var(--bone)}
.tok .desc{font-size:.74rem;color:var(--ash)}

/* spec callout note */
.note{font-size:.78rem;color:var(--ash);font-style:italic;margin-top:10px;text-wrap:pretty}

/* direction label tab */
.dirtab{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bone-2);margin-bottom:10px}
.dirtab .n{font-family:var(--display);font-size:1.1rem;color:var(--blood-text)}

/* ============== SCREEN STAGE ============== */
.stage{position:relative;border-radius:3px;overflow:hidden;background:var(--tex-split);
  border:1px solid var(--rule);min-height:620px;padding:18px 16px 22px}
.screen{position:relative;z-index:1;max-width:430px;margin:0 auto}
.screen-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.screen-bar .ttl{font-family:var(--display);font-size:1.6rem;color:var(--bone);line-height:1.04;margin-top:3px}
.screen-bar .eyebrow{white-space:nowrap}

/* combat turn order */
.turnline{display:flex;gap:7px;align-items:center;overflow:hidden}
.turnline .tk{position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:1px;overflow:hidden;
  border:4px solid transparent;border-image:var(--frame-thin);background:#000;opacity:.7;transition:.2s}
.turnline .tk img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05)}
.turnline .tk.now{width:58px;height:58px;opacity:1;border-image:var(--frame-blood)}
.turnline .tk .rg{position:absolute;inset:-3px;background:var(--cc,#0000);
  -webkit-mask:var(--ring-mask) center/100% 100% no-repeat;mask:var(--ring-mask) center/100% 100% no-repeat}

/* combat enemy */
.foe{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0 14px}
.foe-port{position:relative;width:148px;height:148px;border-radius:2px;overflow:hidden;background:#000;
  border:8px solid transparent;border-image:var(--frame-blood)}
.foe-port img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05)}
.foe-name{font-family:var(--display);font-size:1.5rem;color:var(--bone);text-align:center;line-height:1}
.foe-sub{font-family:var(--body);font-weight:700;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blood-text)}

/* action grid */
.acts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.act{display:flex;align-items:center;gap:10px;text-align:left;
  font-family:var(--body);background:var(--plate);color:var(--bone);
  border:6px solid transparent;border-image:var(--frame-thin);border-radius:2px;
  padding:10px 12px;cursor:pointer;transition:transform .06s,background .15s}
.act:hover{background:#1b1a16}
.act:active{transform:translate(1px,1px)}
.act .ico{width:20px;height:20px;flex:0 0 auto;color:var(--bone)}
.act .t{display:block;font-family:var(--display);font-size:1.05rem;line-height:1}
.act .d{display:block;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ash);margin-top:3px}
.act--blood{border-image:var(--frame-blood)}
.act--blood .ico{color:var(--blood-br)}

/* sheet header */
.sheet-top{display:flex;gap:14px;align-items:flex-start}
.sheet-port{flex:0 0 104px;width:104px;height:104px;border-radius:2px;overflow:hidden;background:#000;
  border:6px solid transparent;border-image:var(--frame-thin);position:relative}
.sheet-port img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05)}
.sheet-port .rg{position:absolute;inset:-3px;background:var(--cc,#0000);
  -webkit-mask:var(--ring-mask) center/100% 100% no-repeat;mask:var(--ring-mask) center/100% 100% no-repeat}
.sheet-id .name{font-family:var(--display);font-size:1.7rem;color:var(--bone);line-height:1}
.sheet-id .name{line-height:1.06}
.sheet-id .cls{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--bone-2);margin:6px 0 10px}

/* heirloom row */
.heir{display:flex;align-items:center;gap:12px;padding:11px;background:var(--soot);
  border:1px solid var(--rule);border-radius:1px}
.heir .relic{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--blood-deep);border-radius:1px;background:var(--ink);color:var(--blood-br)}
.heir .relic .ico{width:20px;height:20px}
.heir .h-nm{font-family:var(--display);font-size:1.05rem;color:var(--bone);line-height:1}
.heir .h-d{font-size:.72rem;color:var(--ash);font-style:italic;margin-top:2px}

/* masthead */
.mast{text-align:center;padding:54px 0 38px;position:relative}
.mast .seal{margin:0 auto 18px}
.mast h1{font-size:clamp(2.8rem,8vw,4.6rem);color:var(--bone);line-height:.96}
.mast .eyebrow{margin-bottom:14px}
.mast .lede{margin:16px auto 0;text-align:center}

.foot{text-align:center;padding:30px 0 50px;color:var(--ash);font-family:var(--body);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.foot .wax{color:var(--blood-text)}

/* ============== ACCENT STRATEGY: class-tinted chrome ============== */
body[data-chrome="class"] .sigil{border-color:var(--cc,var(--bone-2));color:var(--cc,var(--bone))}
body[data-chrome="class"] .card .name-plate{border-top:2px solid var(--cc,transparent)}
body[data-chrome="class"] .card .cls{color:var(--cc,var(--bone-2));opacity:.92}
body[data-chrome="class"] .sheet-id .cls{color:var(--cc-bishop)}