/* ================================================================ the design system's stylesheet

   AUTHORITATIVE (D-492). The values and the marked keywords of the interface, read by:
     · docs/design/design-system/design-system.html, which draws every element with them;
     · Tools/Wiki, which shows the game's content in them;
     · the game, whose Assets/UI/Theme.uss must hold the same tokens (DesignSystemTokensTests checks it).
   Change a value here first, then in Theme.uss. ui-style.md says what each one is for. */

@font-face { font-family: "Cormorant"; src: url("../../../Assets/UI/Fonts/CormorantGaramond-Regular.ttf"); }

/* ================================================================ tokens (ui-style.md §2) */
:root {
  --stat: #e6dcc6;
  --dark: 5,5,6;
  --ink: #f1ead8; --ink-dim: #bdb6a4; --ink-faint: #858072;
  --accent: #f0c27a; --accent-2: #fff0cc; --gold: #d9b27a;
  --line: rgba(240,230,205,.14); --line-2: rgba(240,230,205,.4);
  --card: rgba(6,6,7,.9);
  --hp: #c9504c; --hp-text: #e0605c; --hp-enemy: #b23a35; --focus: #7aa7e8; --focus-text: #86b2f0; --shield: #dfe9f3;
  --card-rule: rgba(240,194,122,.6);
  --bleed: #e0605c; --burn: #e48a48; --poison: #8fc06e; --frost: #9fd0ea; --stun: #c9b3ec;
  --rush: #f2c94c; --stall: #6fa8ec; --pressure: #9fae92; --invincible: #fbf6ea; --overflow: #6fd3b0; --count: #d8cfb8; --harm: #e0605c;
  --shadow-text: 0 1px 2px #000, 0 0 12px rgba(0,0,0,.8);
  --title: "Cormorant", serif; --body: Inter, system-ui, sans-serif;
}

/* ================================================================ type (ui-style.md §2.2) */
.t-title { font-family: var(--title); font-weight: 400; text-transform: uppercase; letter-spacing: 3px; }
.t-name { font-family: var(--title); font-weight: 400; }
.t-label { font: 600 11px/1 var(--body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-dim); }
.dim { color: var(--ink-dim); } .faint { color: var(--ink-faint); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.on-paint { text-shadow: var(--shadow-text); }
.row { display: flex; align-items: center; gap: 8px; } .between { justify-content: space-between; }

.icon { width: 16px; height: 16px; display: inline-block; background: currentColor; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; flex-shrink: 0; }

/* marks (§4.3) */
.marks { display: flex; gap: 7px; align-items: center; justify-content: center; min-height: 22px; }
.mk { position: relative; width: 20px; height: 20px; display: grid; place-items: center; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)); }
.mk .icon { width: 13px; height: 13px; position: relative; z-index: 1; }
.mk b { position: absolute; right: -5px; bottom: -5px; z-index: 2; min-width: 11px; height: 11px; padding: 0 2px; box-sizing: border-box;
  background: #0b0b0c; border: 1px solid currentColor; border-radius: 6px; font: 700 9px/9px var(--body); color: var(--ink); text-align: center; }
.mk b.src { position: static; background: none; border: 0; min-width: 0; height: auto; padding: 0; font: 700 8px/1 var(--body); color: currentColor; z-index: 1; }
.mk.ci.pending b.src { opacity: .6; }
.mk b.harm { width: 11px; min-width: 0; padding: 0; border-radius: 50%; border-color: var(--harm); color: var(--harm); font-size: 7px; line-height: 10px; right: -4px; }
.mk.sq { background: rgba(8,8,9,.9); border: 1px solid currentColor; border-radius: 2px; box-sizing: border-box; }
.mk.stun::before { content: ""; position: absolute; inset: 0; background: conic-gradient(rgba(201,179,236,.4) calc(var(--p) * 360deg), transparent 0); }
.mk.ci { border-radius: 50%; background: radial-gradient(circle, rgba(8,8,9,.92) 58%, transparent 60%), conic-gradient(currentColor calc(var(--p) * 360deg), rgba(255,255,255,.14) 0); }
.mk.ci.pending { background: radial-gradient(circle, rgba(8,8,9,.75) 58%, transparent 60%), conic-gradient(currentColor calc(var(--p) * 360deg), transparent 0); }
.mk.ci.pending::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed currentColor; opacity: .7; }
.mk.ci.pending .icon { opacity: .6; }
.mk.ci.glow .icon { filter: drop-shadow(0 0 3px rgba(255,250,235,.9)); }
.mk.dia::before { content: ""; position: absolute; inset: 3px; transform: rotate(45deg); border: 1px solid var(--count);
  background: linear-gradient(315deg, rgba(216,207,184,.78) calc(var(--f) * 100%), rgba(8,8,9,.9) 0); }
.mk.dia { color: var(--count); }
.mk.dia.due::before { border-color: #fff6dc; box-shadow: 0 0 6px rgba(255,246,220,.8); }
.mk.more { width: auto; padding: 0 4px; height: 18px; font: 700 10px var(--body); color: var(--ink); background: rgba(8,8,9,.9); border: 1px solid var(--line-2); border-radius: 9px; }
.pop { display: inline-flex; align-items: center; gap: 3px; font: 700 15px var(--body); text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.8); }
.pop .icon { width: 14px; height: 14px; }

/* keyword chips (§5) */
.kwi { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 500; }
.kwi .w { border-bottom: 1px dotted currentColor; }
.kw { border-bottom: 1px dotted currentColor; }
.kg { display: inline-grid; place-items: center; flex-shrink: 0; box-sizing: border-box; }
.kg .icon { width: 9px; height: 9px; }
.kg.sq { width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 1px; background: rgba(8,8,9,.85); }
.kg.ci { width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 50%; background: rgba(8,8,9,.85); }
.kg.dia { width: 8px; height: 8px; margin: 0 2px; transform: rotate(45deg); border: 1px solid currentColor; background: rgba(8,8,9,.85); }
.kg.bar { width: 10px; height: 3px; border-radius: 1px; background: currentColor; }
.kg.stat { width: 13px; height: 13px; } .kg.stat .icon { width: 13px; height: 13px; }
.scl { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; white-space: nowrap; }
.statglyph .icon { width: var(--s, 28px); height: var(--s, 28px); }
.kg.drop { width: 12px; height: 12px; } .kg.drop .icon { width: 12px; height: 12px; }

/* ================================================================ the card (ui-style.md §4.4, §6) */
.card { width: 320px; padding: 12px 14px; background: var(--card); border-top: 1px solid var(--card-rule); box-shadow: 0 8px 30px rgba(0,0,0,.5); box-sizing: border-box; }
.card h4 { margin: 0 0 2px; font: 400 21px/1.1 var(--title); text-transform: uppercase; letter-spacing: 3px; }
.card .sub { font-size: 11px; color: var(--ink-dim); margin-bottom: 8px; }
.card .ln { font-size: 13px; margin: 4px 0; }
.card .foot { margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-dim); display: flex; gap: 6px; align-items: center; }
.gl .hd { display: flex; justify-content: space-between; font: 400 14px var(--title); letter-spacing: 2px; text-transform: uppercase; color: var(--accent-2); padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.gl .hd span { font: 11px var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-dim); }
.gl .g { font-size: 13px; margin: 5px 0; } .gl .g > b { font: 400 16px var(--title); color: var(--ink); margin-right: 6px; }
.gl .g.sub { margin-left: 16px; padding-left: 8px; border-left: 1px solid var(--line-2); }

/* ================================================================ the glyphs (Assets/UI/Icons, embedded)

   Every icon file as --glyph-<name>, so a mask works where the page is opened from disk.
*/
/* GLYPHS BEGIN: written by glyphs.mjs from Assets/UI/Icons; do not edit by hand */
:root {
  --glyph-ability-buff: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2012l8-8%208%208M4%2020l8-8%208%208%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-ability-control: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%2212%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%2212%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
  --glyph-ability-damage: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202l2.6%206.8L21%2012l-6.4%203.2L12%2022l-2.6-6.8L3%2012l6.4-3.2z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-ability-displace: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2012h13M11%206l6%206-6%206%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M20%204h2v16h-2z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-ability-heal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%203h4v7h7v4h-7v7h-4v-7H3v-4h7z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-bleed: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20transform%3D%22translate(0.1%201.1)%22%3E%3Cpath%20d%3D%22M12%202C9.5%206.5%206%2010%206%2014a6%206%200%200012%200c0-4-3.5-7.5-6-12zm-2.2%2012.4a2.4%202.4%200%20002.2%202.6v1.6a4%204%200%2001-3.8-4.2z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --glyph-burn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20transform%3D%22translate(0.1%201.5)%22%3E%3Cpath%20d%3D%22M12%202c1%204.5%206%205.8%206%2011a6%206%200%2011-12%200c0-3%202-4.2%203-6.5.6%201.4%201.6%202%202.4%202.4C11.6%207%2011.2%204.6%2012%202z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --glyph-doctrine: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202l9%2010-9%2010-9-10z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%207.5l4.5%204.5L12%2016.5%207.5%2012z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-flaw: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%207.5v9M8.5%2013l3.5%203.5L15.5%2013%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-freeze: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202v20M3.3%207l17.4%2010M3.3%2017L20.7%207%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-frozen: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M12%204.5v15M5.5%208.2l13%207.6M5.5%2015.8l13-7.6%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-invincible: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201l2.2%206.6L21%205l-2.6%206.8L23%2015l-6.9.9L15%2023l-3-6.2L9%2023l-1.1-7.1L1%2015l4.6-3.2L3%205l6.8%202.6z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-item: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%208h16v13H4z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.5%208V5.5a3.5%203.5%200%20017%200V8%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-kw-focus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.5c.9%205.4%204.1%208.6%209.5%209.5-5.4.9-8.6%204.1-9.5%209.5-.9-5.4-4.1-8.6-9.5-9.5%205.4-.9%208.6-4.1%209.5-9.5z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-kw-shield: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203.6l7%202.6v4.9c0%204.5-3%208-7%209.4-4-1.4-7-4.9-7-9.4V6.2z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-overflow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20transform%3D%22translate(-1.9%200.6)%22%3E%3Cpath%20d%3D%22M12%203c-3%204.5-6%207.6-6%2011a6%206%200%200012%200c0-3.4-3-6.5-6-11z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M19%204v6M16%207h6%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --glyph-passive: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223.2%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-pause: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%204h4v16H6zM14%204h4v16h-4z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-play: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%204.5l12%207.5-12%207.5z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-poison: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20transform%3D%22translate(0.1%201.8)%22%3E%3Cpath%20d%3D%22M12%202.5c3.5%204.5%205.5%207.4%205.5%2010a5.5%205.5%200%2011-11%200c0-2.6%202-5.5%205.5-10z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --glyph-porter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%208h14v13H5z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%208V4h6v4%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5%2014h14%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
  --glyph-pressure: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%203h4v18H3zM17%203h4v18h-4z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M9%2012l-2-3v6zM15%2012l2-3v6z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M11%204h2v16h-2z%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E");
  --glyph-readout: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%203h11l3%203v15H5z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%209h8M8%2013h8M8%2017h5%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-relic-empty: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202l9%2010-9%2010-9-10z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%20stroke-dasharray%3D%223%203%22%2F%3E%3C%2Fsvg%3E");
  --glyph-relic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202l9%2010-9%2010-9-10z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6.5%2012h11%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E");
  --glyph-rush: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20transform%3D%22translate(0.6%200.1)%22%3E%3Cpath%20d%3D%22M13.5%202L5%2013h5.5L9%2022l9-12h-5.5z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --glyph-speed: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%205l9%207-9%207zM12%205l9%207-9%207z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-stall: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%203h12M6%2021h12M7%203c0%205%205%206.2%205%209s-5%204-5%209M17%203c0%205-5%206.2-5%209s5%204%205%209%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-stat-attack: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21%203l-1.2%205.4-8.7%208.7-4.2-4.2%208.7-8.7z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M3.6%2013.4l1.8-1.8%207%207-1.8%201.8z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M8.6%2017.6l-3.9%203.9-2.2-2.2%203.9-3.9z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-stat-attackspeed: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21%203l-1.2%205.4-8.7%208.7-4.2-4.2%208.7-8.7z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M3.6%2013.4l1.8-1.8%207%207-1.8%201.8z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M8.6%2017.6l-3.9%203.9-2.2-2.2%203.9-3.9z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M1.5%203.4h10.5v2.4H1.5zM1.5%208h7.4v2.4H1.5z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-stat-crit: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226.6%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M12%201.5v5M12%2017.5v5M1.5%2012h5M17.5%2012h5%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.1%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-stat-defense: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.5l8%203v5.6c0%205.1-3.4%209-8%2010.6-4.6-1.6-8-5.5-8-10.6V5.5z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-stat-focusregen: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%207c.5%203.1%201.9%204.5%205%205-3.1.5-4.5%201.9-5%205-.5-3.1-1.9-4.5-5-5%203.1-.5%204.5-1.9%205-5z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M20.6%209.2A9%209%200%201%200%2021%2013.6%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M17.6%209.6l4.6.6.7-4.6z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-stat-hpregen: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12%2021s-8.5-5.4-8.5-11.2A4.8%204.8%200%200%201%2012%206.6a4.8%204.8%200%200%201%208.5%203.2C20.5%2015.6%2012%2021%2012%2021zM10.7%208.6h2.6v2.7H16v2.6h-2.7v2.7h-2.6v-2.7H8v-2.6h2.7z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-stat-maxhp: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2021s-8.5-5.4-8.5-11.2A4.8%204.8%200%200%201%2012%206.6a4.8%204.8%200%200%201%208.5%203.2C20.5%2015.6%2012%2021%2012%2021z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-stat-startingfocus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.5%203h2.6v18H2.5z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M14.5%204c.7%204.7%203.3%207.3%208%208-4.7.7-7.3%203.3-8%208-.7-4.7-3.3-7.3-8-8%204.7-.7%207.3-3.3%208-8z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-stun: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2212%22%20r%3D%224.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.4%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2212%22%20r%3D%224.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.4%22%2F%3E%3C%2Fsvg%3E");
  --glyph-tab-damage: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%204l11%2011M20%204L9%2015%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2021l4-4M18%2021l-4-4%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-tab-healing: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.5%203h5v6.5H21v5h-6.5V21h-5v-6.5H3v-5h6.5z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  --glyph-tab-log: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%206h16M4%2011h16M4%2016h11M4%2021h7%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-tab-taken: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%205-3.5%208.3-8%209.8C7.5%2020.3%204%2017%204%2012V6z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-trait: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2016.5v-9M8.5%2011L12%207.5l3.5%203.5%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-village-blacksmith: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%206h21l-3%204-7%202v4l5%203v2H6v-2l5-3v-4L5%2010z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  --glyph-village-guild: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%203l17%2019M3%208l5-5M3%2022l19-19M3%2017l5%205M19%203l3%205M17%2022l5-5%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%203l2%201%202%204-3-1zM21%203l-2%201-2%204%203-1z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  --glyph-village-harbor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%224%22%20r%3D%222%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%2F%3E%3Cpath%20d%3D%22M12%206v16M7%2010h10M3%2014c0%205%204%207%209%208%205-1%209-3%209-8M1%2016l2-3%203%202M18%2015l3-2%202%203%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%2F%3E%3C%2Fsvg%3E");
  --glyph-village-inn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%208v14M22%208v14M3%2018h19M3%2015h19v-4H10v4M5%2012h3%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
  --glyph-village-memorial: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2021h16%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2217.2%22%20rx%3D%226.4%22%20ry%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2211.8%22%20rx%3D%224.5%22%20ry%3D%222.2%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%227%22%20rx%3D%222.9%22%20ry%3D%221.8%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E");
  --glyph-village-merchant: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%204v16M8%2020h8M4%208h16M12%205l8%203M12%205L4%208%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%208l-2.5%205h5zM20%208l-2.5%205h5z%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --glyph-village-relics: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202l3%205%205%203-1%208-7%205-7-5-1-8%205-3zM12%207l-4%206%204%206%204-6z%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E");
  --glyph-village-shop: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%203h9l-2%205c7%205%209%2014-3%2014S3%2013%2010%208z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M9%208h7M12%2012v5%22%20stroke%3D%22%23222b29%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E");
  --glyph-village-survey: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.5%205.8l6.5-2.3%206%202.3%206.5-2.3v14.7l-6.5%202.3-6-2.3-6.5%202.3z%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%203.5v15M15%205.8v15%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E");
  --glyph-village-tower: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11%202h2l1%205%201%2011%204%205H5l4-5%201-11z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M12%207v14M10%2012h4M9%2018h6%22%20stroke%3D%22%23222b29%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
}
/* GLYPHS END */

/* ================================================================ the marked keywords (ui-style.md §5, D-447, D-448, D-457)

   Which keywords wear a mark, its shape and its colour, and the glyph inside it: the game's own files in
   Assets/UI/Icons (the --glyph-* variables above). A word with a class here is drawn as <span class="kwi kw-…"><i class="kg"><i class="icon"></i></i>
   <span class="w">Word</span></span>; any other keyword is a plain word. */
.kw-bleed { color: var(--bleed); --i: var(--glyph-bleed); }
.kw-burn { color: var(--burn); --i: var(--glyph-burn); }
.kw-poison { color: var(--poison); --i: var(--glyph-poison); }
.kw-frost { color: var(--frost); --i: var(--glyph-freeze); }
.kw-stun { color: var(--stun); --i: var(--glyph-stun); }
.kw-rush { color: var(--rush); --i: var(--glyph-rush); }
.kw-stall { color: var(--stall); --i: var(--glyph-stall); }
.kw-pressure { color: var(--pressure); --i: var(--glyph-pressure); }
.kw-invincible { color: var(--invincible); --i: var(--glyph-invincible); }
.kw-count { color: var(--count); }
.kw-overflow { color: var(--overflow); --i: var(--glyph-overflow); }
.kw-hp { color: var(--hp-text); --i: var(--glyph-stat-maxhp); }
.kw-max-hp { color: var(--hp-text); --i: var(--glyph-stat-maxhp); }
.kw-hp-regen { color: var(--hp-text); --i: var(--glyph-stat-hpregen); }
.kw-attack { color: var(--stat); --i: var(--glyph-stat-attack); }
.kw-defense { color: var(--stat); --i: var(--glyph-stat-defense); }
.kw-attack-speed { color: var(--stat); --i: var(--glyph-stat-attackspeed); }
.kw-crit-chance { color: var(--stat); --i: var(--glyph-stat-crit); }
.kw-focus { color: var(--focus-text); --i: var(--glyph-kw-focus); }
.kw-focus-regen { color: var(--focus-text); --i: var(--glyph-stat-focusregen); }
.kw-starting-focus { color: var(--focus-text); --i: var(--glyph-stat-startingfocus); }
.kw-shield { color: var(--shield); --i: var(--glyph-kw-shield); }
.kwi .kg { display: none; }
.kw-count .kg .icon { display: none; }   /* a Count's diamond is empty */
.kw-bleed .kg, .kw-burn .kg, .kw-poison .kg, .kw-frost .kg, .kw-stun .kg { display: inline-grid; width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 1px; background: rgba(8,8,9,.85); }
.kw-rush .kg, .kw-stall .kg, .kw-pressure .kg, .kw-invincible .kg { display: inline-grid; width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 50%; background: rgba(8,8,9,.85); }
.kw-count .kg { display: inline-grid; width: 8px; height: 8px; margin: 0 2px; transform: rotate(45deg); border: 1px solid currentColor; background: rgba(8,8,9,.85); }
.kw-overflow .kg { display: inline-grid; width: 12px; height: 12px; }
.kw-overflow .kg .icon { width: 12px; height: 12px; }
.kw-hp .kg, .kw-max-hp .kg, .kw-hp-regen .kg, .kw-attack .kg, .kw-defense .kg, .kw-attack-speed .kg, .kw-crit-chance .kg, .kw-focus .kg, .kw-focus-regen .kg, .kw-starting-focus .kg, .kw-shield .kg { display: inline-grid; width: 13px; height: 13px; }
.kw-hp .kg .icon, .kw-max-hp .kg .icon, .kw-hp-regen .kg .icon, .kw-attack .kg .icon, .kw-defense .kg .icon, .kw-attack-speed .kg .icon, .kw-crit-chance .kg .icon, .kw-focus .kg .icon, .kw-focus-regen .kg .icon, .kw-starting-focus .kg .icon, .kw-shield .kg .icon { width: 13px; height: 13px; }
.kwi .kg.sq, .kwi .kg.ci, .kwi .kg.dia, .kwi .kg.stat, .kwi .kg.drop { display: inline-grid; }