/* HORO-BEAT sim theme: TOKENS. Identity 3, NIGHT PARADE (百鬼夜行): "after dark, the city belongs to the Horobito".
   The owner's choice (reports/polish/BRIEF.md "Owner decision"); the reference is reports/polish/identity-3/ and the spec
   reports/polish/DESIGN.md. Every colour literal of the site lives in this file.
   Four materials and one light:
   - 墨 SUMI   warm ink black from the card frame (#1b0c0a), never navy: the app chrome;
   - 金 KIN    the frame gold: structure, selection, focus, numbers;
   - 朱 SHU    lantern vermilion: THE one primary action of a view, the active nav crest, the hanko check;
   - 和紙 WASHI card content only: the card-text box and its flavor;
   - 人魂 TAMA spirit-light cyan: "your move", a legal target, a switch that is on.
   赤 / 緑 / 青 belong to the cards (cost discs, the text box's tint and pattern, keylines, per-card FX). Danger is 臙脂
   crimson, kept apart from 赤's orange-red.
   LAYER ORDER (keep it the first statement of the first stylesheet; later wins):
     hb-reset < hb-base < hb-components < hb-screens < hb-phone < hb-fx
   theme/perf.css is deliberately UNLAYERED (it beats every layered rule), so Performance mode always wins.
   NAMES: the identity-3 names (--hb-ink-*, --hb-kin*, --hb-shu*, --hb-washi*, --hb-tama*) are canonical. The block
   "legacy aliases" at the end maps the older names (--hb-s1, --hb-gold-*, --hb-bg-*) still used by the moved screen CSS;
   new code uses the canonical names. */
@layer hb-reset, hb-base, hb-components, hb-screens, hb-phone, hb-type, hb-fx;

@layer hb-base {
  :root {
    color-scheme: dark;

    /* ---- 墨 sumi: warm ink, lifted from the card frame black ---- */
    --hb-ink-0: #0a0605;   /* app bar, docks, tab bar, keyline black (card edges, tag ground, disc rims) */
    --hb-ink-1: #120c0a;   /* page */
    --hb-ink-2: #1b130f;   /* panel */
    --hb-ink-3: #261b15;   /* raised: secondary button, menu, toast, window head */
    --hb-ink-4: #33251c;   /* hover */
    --hb-ink-5: #433024;   /* pressed / selected */
    --hb-well:  #0d0907;   /* inputs, tracks, segmented slot */
    --hb-lacquer: #0e0806; /* the black of plates on a card: power plate, compare, foot strip, trigger disc */
    --hb-line:   #3b2c22;  /* hairline inside panels */
    --hb-line-2: #5b4534;  /* control border */
    --hb-line-3: #80623f;  /* hover border */

    /* ---- text on sumi (contrast on --hb-ink-2) ---- */
    --hb-text:   #f4ede1;  /* 15.7:1 */
    --hb-text-2: #d4c8b6;  /* 11.1:1 */
    --hb-text-3: #a99a88;  /*  6.7:1 (6.1 on ink-3, 5.4 on ink-4): the lowest step for readable text */
    --hb-text-4: #6f6256;  /* disabled only */

    /* ---- 金 kin: the frame gold (cards #af8528, official site #b5861c) ---- */
    --hb-kin:       #c99a3a;
    --hb-kin-hi:    #f1d48a;
    --hb-kin-lo:    #8a641c;
    --hb-kin-text:  #e5c26a;   /* gold words on ink: 10.7:1 */
    --hb-kin-line:  rgba(201,154,58,.45);
    --hb-kin-faint: rgba(201,154,58,.16);
    --hb-kin-deep:  #241b0d;   /* gold-tinted surface */
    --hb-kin-deep-2:#34270f;
    --hb-kin-pale:  #efe0bb;
    --hb-on-kin:    #1b0f08;   /* text on gold: 7.3:1 */

    /* ---- 朱 shu: lantern vermilion, the ONE primary action ---- */
    --hb-shu:       #c93a22;   /* #fff7ec on it 4.8:1 */
    --hb-shu-hover: #cd3d23;   /* hover is signalled by glow + sheen, not by lightening */
    --hb-shu-press: #a92e19;
    --hb-shu-hi:    #ff8a52;   /* accent words on ink: 7.9:1 */
    --hb-shu-lo:    #7c1a0c;
    --hb-shu-glow:  rgba(255,128,64,.45);
    --hb-on-shu:    #fff7ec;

    /* ---- 和紙 washi: card content (the text box, flavor) ---- */
    --hb-washi:       #f6f0e4;
    --hb-washi-2:     #ece3d1;
    --hb-washi-ink:   #1d130e;   /* 16.1:1 (13.5-14.4 on the colour tints) */
    --hb-washi-ink-2: #5a4636;   /* reminder text, flavor: 7.8:1 (6.6 on the red tint) */
    --hb-washi-rule:  rgba(90,70,54,.35);

    /* ---- 人魂 tama: spirit light = your move, a legal target, "on" ---- */
    --hb-tama:      #9ef0de;     /* 13.9:1 */
    --hb-tama-deep: #10302a;
    --hb-tama-glow: rgba(120,236,214,.5);

    /* ---- the three colours, from the card frames (cost disc light / base / dark; deep = tinted surface;
           pale = the text-box tint; text = readable on ink) ---- */
    --hb-red-base:   #e2401c; --hb-red-hi:   #f57d4a; --hb-red-lo:   #9a1d09; --hb-red-deep:   #2c140d; --hb-red-deep-2:   #431b10; --hb-red-pale:   #fbd7bf; --hb-red-text:   #ff9270;
    --hb-green-base: #6db82c; --hb-green-hi: #a9d968; --hb-green-lo: #3a7a16; --hb-green-deep: #162310; --hb-green-deep-2: #22371a; --hb-green-pale: #d8ebc2; --hb-green-text: #a6de6e;
    --hb-blue-base:  #0d9bdc; --hb-blue-hi:  #5cc6f1; --hb-blue-lo:  #0a5d92; --hb-blue-deep:  #0c1b26; --hb-blue-deep-2:  #12304a; --hb-blue-pale:  #cbe5f6; --hb-blue-text:  #6fcdf5;

    /* ---- meaning (one meaning per colour) ---- */
    --hb-danger:      #e5476a;   /* 臙脂 crimson: destructive only; an outline (4.7:1 as a border) */
    --hb-danger-text: #ff8fa5;   /* 8.5:1 */
    --hb-danger-deep: #3a111c;
    --hb-danger-fill: #b8274a;   /* only the OK of a destructive confirm */
    --hb-danger-line: rgba(229,71,106,.5);
    --hb-on-danger:   #fff3f5;
    --hb-ok:       #8ad7a6;      /* legal / success (with a word, never colour alone); never 緑 */
    --hb-ok-deep:  #10261b;
    --hb-ok-line:  rgba(138,215,166,.5);
    --hb-warn:      #ffb45c;     /* lantern amber: "not yet", a changed value */
    --hb-warn-deep: #33200c;
    --hb-warn-line: rgba(255,180,92,.5);
    --hb-info:  var(--hb-blue-text);
    --hb-focus: var(--hb-kin-hi);
    --hb-seat-me:  var(--hb-tama);
    --hb-seat-opp: #ffb07a;

    /* ---- the card-text box: washi, as printed (the same box in EN and 日本語) ---- */
    --hb-ci-bg:     var(--hb-washi);
    --hb-ci-text:   var(--hb-washi-ink);
    --hb-ci-text-2: var(--hb-washi-ink-2);
    --hb-ci-sep:    var(--hb-washi-rule);
    --hb-ci-link:   #7a2a0c;     /* a card name inside card text (8.9:1 on washi) */
    --hb-cardtext-lh: 1.72;
    --hb-cardtext-ls: .01em;

    /* ---- the night playmat ---- */
    --hb-mat-bg:        #19110d;
    --hb-mat-edge:      var(--hb-line-2);
    --hb-mat-rule:      var(--hb-kin-faint);          /* the faint gold rule between lines */
    --hb-mat-hearts:    rgba(109,184,44,.09);         /* は〜とぞ〜ん green wash */
    --hb-mat-waza:      rgba(240,140,90,.10);         /* わざぞ〜ん peach */
    --hb-mat-waza-line: rgba(240,140,90,.24);
    --hb-mat-ena:       rgba(13,155,220,.10);         /* えなぞ〜ん blue */
    --hb-mat-ena-line:  rgba(13,155,220,.26);
    --hb-mat-side:      rgba(246,240,228,.04);        /* やまふだ / ぼち */
    --hb-mat-side-line: rgba(246,240,228,.12);
    --hb-mat-battle:    rgba(255,138,64,.12);         /* lantern light on the battle line */
    --hb-mat-tag-bg:    #0b0604;                      /* zone tag: black hex inside a gold one */
    --hb-mat-tag-edge:  var(--hb-kin);
    --hb-mat-tag-ink:   #ffffff;
    --hb-mat-dama:      var(--hb-text-3);             /* a line's 人魂 mark, unlit (lit = tama) */

    /* ---- small alpha steps (light over ink, shade under it) ---- */
    --hb-hi-1: rgba(255,236,200,.04);
    --hb-hi-2: rgba(255,236,200,.08);
    --hb-hi-3: rgba(255,236,200,.18);
    --hb-hi-4: rgba(255,236,200,.24);
    --hb-hi-5: rgba(255,236,200,.4);
    --hb-hi-6: rgba(255,236,200,.6);
    --hb-shade-1: rgba(0,0,0,.25);
    --hb-shade-2: rgba(0,0,0,.35);
    --hb-shade-3: rgba(0,0,0,.4);
    --hb-shade-4: rgba(0,0,0,.45);
    --hb-shade-5: rgba(0,0,0,.5);
    --hb-shade-6: rgba(0,0,0,.6);
    --hb-scrim:   rgba(5,3,2,.72);
    --hb-scroll-thumb: #4a3a2b; --hb-scroll-thumb-hover: #6b5540; --hb-scroll-track: transparent;
    --hb-glyph-fill: #fff;      /* numerals on a cost disc and on power plates */
    --hb-glyph-edge: #140a06;   /* their ink stroke */

    /* ---- 色玉 the printed gems (theme/gems.css; measured from the scans: reports/polish2/gem-study.md) ---- */
    /* the gold ring: a metallic sweep with three highlights (3, 7, 11 o'clock), measured every 15deg at the brightest
       part of its width on the averaged scans (cost; the boost and Ena rings are their own, a little paler) */
    --hb-gem-ring: conic-gradient(from 0deg, #cba03d 0deg, #bd8e26 15deg, #cea33b 30deg, #ddb955 45deg, #eed27a 60deg, #f9e69d 75deg, #faeba9 90deg, #f7e298 105deg, #eace75 120deg, #d9b554 135deg, #cba13d 150deg, #bd8f2b 165deg, #c9a041 180deg, #e1c474 195deg, #f3e09b 210deg, #f2d680 225deg, #efc859 240deg, #edc23f 255deg, #eebf34 270deg, #f1c53d 285deg, #f4cd5a 300deg, #f8db80 315deg, #f9e9a4 330deg, #e6ca79 345deg, #cba03d 360deg);
    --hb-gem-ring-boost: conic-gradient(from 0deg, #c5a86d 0deg, #c39b52 15deg, #d2b067 30deg, #e0c77c 45deg, #f0d896 60deg, #f6e6a9 75deg, #eee5b2 90deg, #f4e3a8 105deg, #ecd697 120deg, #dcc27b 135deg, #caac64 150deg, #b8984c 165deg, #bca56c 180deg, #dfc98d 195deg, #f2e7ad 210deg, #f3e09d 225deg, #eacd7b 240deg, #dfbe66 255deg, #d7bd6a 270deg, #dcbd6a 285deg, #efd07d 300deg, #f8e79d 315deg, #faf1b5 330deg, #e9d195 345deg, #c5a86d 360deg);
    --hb-gem-ring-ena: conic-gradient(from 0deg, #c19d5b 0deg, #b28d49 15deg, #c09e59 30deg, #d0b26b 45deg, #e0c58b 60deg, #e9d297 75deg, #e1d098 90deg, #dfcc8f 105deg, #d6c081 120deg, #cbac6a 135deg, #b39650 150deg, #9c8142 165deg, #a0864f 180deg, #b39e6c 195deg, #c3b280 210deg, #bea96e 225deg, #bca45b 240deg, #bc9f44 255deg, #c5a954 270deg, #d6b758 285deg, #dfc375 300deg, #ecd291 315deg, #f2dea8 330deg, #ddc388 345deg, #c19d5b 360deg);
    /* the colour spheres: ONE linear gradient at 135deg (light upper-left, dark lower-right); the "gloss" is the knee
       at 59-61 %. Positions: the sphere's diameter (offsets 0-1 of the print) mapped onto the gem box's diagonal. */
    --hb-gem-red:   linear-gradient(315deg, #841415 18.8%, #871316 31.3%, #9e1b18 35.7%, #b52515 40.6%, #cb2d13 45.6%, #d83210 50%, #de350c 53.7%, #e23d12 59.4%, #e5491b 61.2%, #e9622e 65%, #ec7744 68.7%, #f08e5f 73.1%, #f4a276 77.4%, #f2a276 81.2%);
    --hb-gem-green: linear-gradient(315deg, #0f7d37 18.8%, #137f38 31.3%, #348e39 35.7%, #4e9b34 40.6%, #5ba82f 45.6%, #65b02e 50%, #6cb429 53.7%, #73b730 59.4%, #7abd3b 61.2%, #90c552 65%, #a1cc6a 68.7%, #b3d684 73.1%, #c2dd9c 77.4%, #c2dc9c 81.2%);
    --hb-gem-blue:  linear-gradient(315deg, #0475bd 18.8%, #0176c2 31.3%, #027dc8 35.7%, #0285cc 40.6%, #028cd2 45.6%, #0291d6 50%, #0294d8 53.7%, #0296d8 59.4%, #029cdb 61.2%, #0da7df 65%, #52b5e9 68.7%, #7ec1ec 73.1%, #9bcfee 77.4%, #9ccfec 81.2%);
    --hb-gem-none:  linear-gradient(315deg, #0b0605 18.8%, #0d0806 31.3%, #140c08 35.7%, #1c120d 40.6%, #241812 45.6%, #2a1d15 50%, #2e2017 53.7%, #33241a 59.4%, #3a2a1e 61.2%, #4a3726 65%, #5a4532 68.7%, #6b543e 73.1%, #7a614a 77.4%, #7a614a 81.2%);
    /* the Ena Read gem: a FLAT sphere (crimson red, not the cost gem's orange-red), darkening slightly at the ring;
       its digit's shadow is a dark shade of the sphere */
    --hb-gem-ena-red:   #e30422; --hb-gem-ena-red-lo:   #c8031c; --hb-gem-ena-red-ink:   #8a020e;
    --hb-gem-ena-green: #70ba2d; --hb-gem-ena-green-lo: #61a326; --hb-gem-ena-green-ink: #335e12;
    --hb-gem-ena-blue:  #0496dc; --hb-gem-ena-blue-lo:  #0383c2; --hb-gem-ena-blue-ink:  #044b74;
    --hb-gem-ena-none:  #2a1d15; --hb-gem-ena-none-lo:  #1c130e; --hb-gem-ena-none-ink:  #000000;
    --hb-gem-face:      #ffffff;              /* the numeral */
    --hb-gem-face-gold: #d9ae41;              /* DR / SEC printings */
    --hb-gem-ink:       rgba(12,0,0,.9);      /* the numeral's hard drop (an extrusion straight down) */
    --hb-gem-drop:      rgba(26,10,2,.95);    /* the gem's own drop: a near-black disc under it, shifted down */
    --hb-gem-hollow:    rgba(20,6,0,.9);      /* the ring's shadow across its inner edge at the top (boost / Ena: softer) */
    --hb-gem-hollow-boost: rgba(20,6,0,.55);
    --hb-gem-hollow-ena:   rgba(20,6,0,.5);
    --hb-gem-ring-flat: #c99c3b;              /* under the ring's gradients (never seen unless they fail) */

    /* ---- elevation (Performance mode flattens these to a 1px ink ring) ---- */
    --hb-frame: 0 0 0 1px var(--hb-line);
    --hb-e1: inset 0 1px 0 rgba(255,236,200,.04), 0 2px 8px rgba(0,0,0,.4);
    --hb-e2: 0 10px 28px rgba(0,0,0,.55);
    --hb-e3: 0 18px 44px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.5);

    /* ---- type (every size multiplies by --hb-font-scale) ---- */
    --hb-font-scale: 1;
    /* EVERY NUMBER the site shows is drawn with the card numerals (owner, 2026-11-11). "HB Num" is HB Power limited by
       unicode-range to the figures and the signs only a number uses (0-9 + − × ½), and it is the FIRST family of the
       UI and the title fonts: a count in a sentence, a round in a title or a log line needs no markup. A number with a
       separator ("50 / 50", "1,500") or in a badge takes its numeral font by class (.hb-n, the --hb-font-*num tokens).
       --hb-font-text is the same text font WITHOUT the numerals: card rules text and flavor (printed text stays plain,
       owner rule), typed text, the wordmark's Playfair has its own token. */
    --hb-font-text:    "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
    --hb-font-ui:      "HB Num", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif;  /* UI text, EN and JA */
    --hb-font-card:    var(--hb-font-text);   /* card rules text, flavor, the trigger line */
    --hb-font-display: "HB Num", "Kaisei Tokumin", "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif; /* titles, banners, windows, flavor, crests */
    --hb-font-headtext: "Kaisei Tokumin", "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;   /* the title font WITHOUT the numerals: a typed name set as a title */
    --hb-font-wordmark: "Playfair Display", Georgia, "Times New Roman", serif;   /* the HORO-BEAT wordmark only */
    --hb-font-num:     "HB Power", "Playfair Display", Georgia, serif;   /* a free-standing number: power, totals, counts, the round (= --hb-font-pownum) */
    --hb-font-neon:    "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;     /* the hero's neon signs only */
    --hb-font-mono:    ui-monospace, "Cascadia Mono", Consolas, monospace;
    /* the card numerals: replicas traced from the card scans (site/fonts/, @font-face at the end of this file; digits,
       + − , . and, drawn in each font's own hand for the UI, / × ½). Which numeral where: a number in a gem or a round
       badge = HB Cost (upright serif); a free-standing number = HB Power (the 10deg slant is in the outlines:
       font-synthesis none, and an italic face of the same file so `italic` adds no fake slant); a boost value and a
       power change "+2000" = HB Boost (condensed serif); エナ詠み = HB Ena (bold gothic) */
    --hb-font-gemtext:  "HB Cost", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif;   /* a small badge with a letter beside its number ("1B") */
    --hb-font-gemnum:   "HB Cost", "Playfair Display", Georgia, serif;
    --hb-font-pownum:   "HB Power", "Playfair Display", Georgia, serif;
    --hb-font-boostnum: "HB Boost", "HB Cost", Georgia, serif;
    --hb-font-enanum:   "HB Ena", "Zen Kaku Gothic New", sans-serif;
    --hb-fs-8:  8px;   /* only overlays drawn on a card face (unscaled) */
    --hb-fs-10: calc(10px * var(--hb-font-scale));
    --hb-fs-11: calc(11px * var(--hb-font-scale));
    --hb-fs-12: calc(12px * var(--hb-font-scale));
    --hb-fs-13: calc(13px * var(--hb-font-scale));
    --hb-fs-14: calc(14px * var(--hb-font-scale));
    --hb-fs-16: calc(16px * var(--hb-font-scale));
    --hb-fs-18: calc(18px * var(--hb-font-scale));
    --hb-fs-20: calc(20px * var(--hb-font-scale));
    --hb-fs-22: calc(22px * var(--hb-font-scale));
    --hb-fs-24: calc(24px * var(--hb-font-scale));
    --hb-fs-28: calc(28px * var(--hb-font-scale));
    --hb-fs-36: calc(36px * var(--hb-font-scale));
    --hb-fs-46: calc(46px * var(--hb-font-scale));
    --hb-fs-48: calc(48px * var(--hb-font-scale));
    --hb-fs-input: var(--hb-fs-14);   /* 16px on touch: iOS zooms into a focused input under 16px */
    --hb-lh: 1.55;

    /* ---- space / shape: lacquer boards, not pills ---- */
    --hb-1: 2px; --hb-2: 4px; --hb-3: 6px; --hb-4: 8px; --hb-5: 12px; --hb-6: 16px; --hb-7: 20px; --hb-8: 24px; --hb-9: 32px; --hb-10: 48px;
    --hb-gutter: 16px;
    --hb-r-xs: 1px;      /* rarity tags, type tab */
    --hb-r-ctl: 3px;     /* buttons, inputs, dropdowns, segments, switches */
    --hb-r-item: 2px;    /* menu rows, deck rows */
    --hb-r-thumb: 2px;   /* printing thumbnails */
    --hb-r-panel: 6px;   /* panels */
    --hb-r-zone: 10px;   /* mat zones */
    --hb-r-mat: 12px;    /* the playmat */
    --hb-r-sheet: 16px;  /* phone sheets (top corners) */
    --hb-r-bar: 1px;     /* curve bars, colour bar */
    --hb-r-pill: 999px;  /* count badges and discs only */
    --hb-r-print: 4.6% / 3.3%;   /* the printed card corner */
    --hb-h-sm: 28px; --hb-h-md: 36px; --hb-h-lg: 46px;
    --hb-appbar-h: 60px;
    --hb-tabbar-h: 62px;
    --hb-safe-t: env(safe-area-inset-top, 0px);
    --hb-safe-b: env(safe-area-inset-bottom, 0px);
    --hb-safe-l: env(safe-area-inset-left, 0px);
    --hb-safe-r: env(safe-area-inset-right, 0px);

    /* ---- motion: "paper and flame". Paper (cards, plaques, scrolls) is slapped down and settles; flame (lanterns,
           人魂, neon) flickers and drifts. Performance mode sets the durations to 0. ---- */
    --hb-dur-press:  90ms;
    --hb-dur-hover:  160ms;
    --hb-dur-move:   280ms;
    --hb-dur-land:   480ms;
    --hb-dur-banner: 1600ms;
    --hb-ease-out:   cubic-bezier(.2,.8,.2,1);
    --hb-ease-stamp: cubic-bezier(.22,1.5,.42,1);   /* overshoot then settle: card land, switch knob, + button, deal */
    --hb-ease-brush: cubic-bezier(.75,0,.2,1);      /* slow-fast-soft: banner wipe, menu unfold, scroll unroll, sheen */
    --hb-ease-sway:  cubic-bezier(.45,0,.55,1);     /* lanterns, 人魂, mist */
    --hb-ease-fly:   cubic-bezier(.2,.85,.2,1);     /* card flights */
    --hb-ease-turn:  cubic-bezier(.34,1.1,.5,1);    /* down / recover turn */

    /* ---- marks (SVG masks painted with background-color: currentColor) ----
       人魂 tama: the UI mark (a flame, ball low-left, tip high-right) for line numbers, "your move", nav bullets */
    --hb-dama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.2 1.2C17 6.6 9.6 6.9 4.4 10.8A7 7 0 1 0 16.06 11.5C17.5 8.4 17.8 5 19.2 1.2Z'/%3E%3C/svg%3E");
    --hb-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.3 8.3 12 15l6.7-6.7 1.4 1.4L12 17.8 3.9 9.7Z'/%3E%3C/svg%3E");
    --hb-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19.5 7' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* ---- DECORATIVE tokens: textures + the traditional patterns. Performance mode (perf.css) sets every one to none;
           a component that uses one must first set a flat background-color, so nothing is ever left transparent. ---- */
    --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* the mat's sumi wash REPEATS: a tile of noise only repeats without a seam when the noise is stitched to the tile
       (stitchTiles) and the filter covers exactly the tile (x/y 0, 100%); 1111 x 625 px = 2 x 10 whole noise cells at
       .0018 x .016, so the stitching leaves the frequencies as they were (scripts/seam-check.mjs) */
    --tex-sumi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1111' height='625'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0018 .016' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .40 0 0 0 .32 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
    --tex-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .5 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
    /* the three printed text-box patterns, measured on the scans (reports/polish2/fixes.md) and scaled to our box (x .636).
       Seamless tiles: whole px divisible by 4 (an integer device-pixel tile at DPR 1-3), every shape that crosses an
       edge drawn again on the other side. 赤 雷文: rhombi, each a white square spiral on peach, and two lightning
       zigzags (one composition per 600 px; the fade mask ends it long before) · 緑 霞: green and white mist bands with
       round ends, staggered · 青 市松: checks in fading shades */
    --pat-aka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='56'%3E%3Cdefs%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='-1' y='-1' width='602' height='58'%3E%3Cpath d='M95.99 -8 60.15 14.72 24.32 -8 60.15 -30.72ZM51.84 20 16 42.72 -19.84 20 16 -2.72ZM95.99 48 60.15 70.72 24.32 48 60.15 25.28ZM651.84 20 616 42.72 580.16 20 616 -2.72ZM51.84 76 16 98.72 -19.84 76 16 53.28ZM651.84 76 616 98.72 580.16 76 616 53.28Z' fill='%23fff'/%3E%3Cpath d='M60.15 -8 66.55 -12.06 72.95 -8 60.15 0.12 47.36 -8 66.55 -20.17 85.75 -8 60.15 8.23 34.56 -8 66.55 -28.29 98.55 -8 60.15 16.35M16 20 22.4 15.94 28.8 20 16 28.12 3.2 20 22.4 7.83 41.6 20 16 36.23 -9.6 20 22.4 -0.29 54.39 20 16 44.35M60.15 48 66.55 43.94 72.95 48 60.15 56.12 47.36 48 66.55 35.83 85.75 48 60.15 64.23 34.56 48 66.55 27.71 98.55 48 60.15 72.35M616 20 622.4 15.94 628.8 20 616 28.12 603.2 20 622.4 7.83 641.6 20 616 36.23 590.4 20 622.4 -0.29 654.39 20 616 44.35M16 76 22.4 71.94 28.8 76 16 84.12 3.2 76 22.4 63.83 41.6 76 16 92.23 -9.6 76 22.4 55.71 54.39 76 16 100.35M616 76 622.4 71.94 628.8 76 616 84.12 603.2 76 622.4 63.83 641.6 76 616 92.23 590.4 76 622.4 55.71 654.39 76 616 100.35' fill='none' stroke='%23000' stroke-width='3.3' stroke-linejoin='miter' stroke-miterlimit='8'/%3E%3Cpath d='M73.85 -92 89.59 -82.02 85.62 -76.99 106.1 -64 85.62 -51.01 89.59 -45.98 73.85 -36 89.59 -26.02 85.62 -20.99 106.1 -8 85.62 4.99 89.59 10.02 73.85 20 89.59 29.98 85.62 35.01 106.1 48 85.62 60.99 89.59 66.02 73.85 76 84.34 76 100.09 66.02 96.12 60.99 116.6 48 96.12 35.01 100.09 29.98 84.34 20 100.09 10.02 96.12 4.99 116.6 -8 96.12 -20.99 100.09 -26.02 84.34 -36 100.09 -45.98 96.12 -51.01 116.6 -64 96.12 -76.99 100.09 -82.02 84.34 -92ZM100.47 -92 116.21 -82.02 112.24 -76.99 132.72 -64 112.24 -51.01 116.21 -45.98 100.47 -36 116.21 -26.02 112.24 -20.99 132.72 -8 112.24 4.99 116.21 10.02 100.47 20 116.21 29.98 112.24 35.01 132.72 48 112.24 60.99 116.21 66.02 100.47 76 115.31 76 131.05 66.02 127.09 60.99 147.56 48 127.09 35.01 131.05 29.98 115.31 20 131.05 10.02 127.09 4.99 147.56 -8 127.09 -20.99 131.05 -26.02 115.31 -36 131.05 -45.98 127.09 -51.01 147.56 -64 127.09 -76.99 131.05 -82.02 115.31 -92ZM73.85 -36 89.59 -26.02 85.62 -20.99 106.1 -8 85.62 4.99 89.59 10.02 73.85 20 89.59 29.98 85.62 35.01 106.1 48 85.62 60.99 89.59 66.02 73.85 76 89.59 85.98 85.62 91.01 106.1 104 85.62 116.99 89.59 122.02 73.85 132 84.34 132 100.09 122.02 96.12 116.99 116.6 104 96.12 91.01 100.09 85.98 84.34 76 100.09 66.02 96.12 60.99 116.6 48 96.12 35.01 100.09 29.98 84.34 20 100.09 10.02 96.12 4.99 116.6 -8 96.12 -20.99 100.09 -26.02 84.34 -36ZM100.47 -36 116.21 -26.02 112.24 -20.99 132.72 -8 112.24 4.99 116.21 10.02 100.47 20 116.21 29.98 112.24 35.01 132.72 48 112.24 60.99 116.21 66.02 100.47 76 116.21 85.98 112.24 91.01 132.72 104 112.24 116.99 116.21 122.02 100.47 132 115.31 132 131.05 122.02 127.09 116.99 147.56 104 127.09 91.01 131.05 85.98 115.31 76 131.05 66.02 127.09 60.99 147.56 48 127.09 35.01 131.05 29.98 115.31 20 131.05 10.02 127.09 4.99 147.56 -8 127.09 -20.99 131.05 -26.02 115.31 -36ZM73.85 20 89.59 29.98 85.62 35.01 106.1 48 85.62 60.99 89.59 66.02 73.85 76 89.59 85.98 85.62 91.01 106.1 104 85.62 116.99 89.59 122.02 73.85 132 89.59 141.98 85.62 147.01 106.1 160 85.62 172.99 89.59 178.02 73.85 188 84.34 188 100.09 178.02 96.12 172.99 116.6 160 96.12 147.01 100.09 141.98 84.34 132 100.09 122.02 96.12 116.99 116.6 104 96.12 91.01 100.09 85.98 84.34 76 100.09 66.02 96.12 60.99 116.6 48 96.12 35.01 100.09 29.98 84.34 20ZM100.47 20 116.21 29.98 112.24 35.01 132.72 48 112.24 60.99 116.21 66.02 100.47 76 116.21 85.98 112.24 91.01 132.72 104 112.24 116.99 116.21 122.02 100.47 132 116.21 141.98 112.24 147.01 132.72 160 112.24 172.99 116.21 178.02 100.47 188 115.31 188 131.05 178.02 127.09 172.99 147.56 160 127.09 147.01 131.05 141.98 115.31 132 131.05 122.02 127.09 116.99 147.56 104 127.09 91.01 131.05 85.98 115.31 76 131.05 66.02 127.09 60.99 147.56 48 127.09 35.01 131.05 29.98 115.31 20Z' fill='%23fff'/%3E%3C/mask%3E%3C/defs%3E%3Crect x='-1' y='-1' width='602' height='58' fill='%23ef9a72' fill-opacity='.42' mask='url(%23m)'/%3E%3C/svg%3E");
    --pat-midori: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64'%3E%3Cg fill='%23a9d17f' opacity='.5'%3E%3Crect x='-50' y='0' width='170' height='16' rx='8'/%3E%3Crect x='-50' y='64' width='170' height='16' rx='8'/%3E%3Crect x='190' y='0' width='170' height='16' rx='8'/%3E%3Crect x='190' y='64' width='170' height='16' rx='8'/%3E%3Crect x='140' y='0' width='32' height='16' rx='8'/%3E%3Crect x='140' y='64' width='32' height='16' rx='8'/%3E%3Crect x='20' y='32' width='176' height='16' rx='8'/%3E%3Crect x='-26' y='32' width='30' height='16' rx='8'/%3E%3Crect x='214' y='32' width='30' height='16' rx='8'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='.75'%3E%3Crect x='64' y='16' width='132' height='16' rx='8'/%3E%3Crect x='-26' y='16' width='56' height='16' rx='8'/%3E%3Crect x='214' y='16' width='56' height='16' rx='8'/%3E%3Crect x='116' y='-16' width='104' height='16' rx='8'/%3E%3Crect x='116' y='48' width='104' height='16' rx='8'/%3E%3Crect x='-6' y='-16' width='70' height='16' rx='8'/%3E%3Crect x='-6' y='48' width='70' height='16' rx='8'/%3E%3Crect x='234' y='-16' width='70' height='16' rx='8'/%3E%3Crect x='234' y='48' width='70' height='16' rx='8'/%3E%3C/g%3E%3C/svg%3E");
    --pat-ao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='%2399c9ec'%3E%3Crect x='0' y='0' width='20' height='20' fill-opacity='0.55'/%3E%3Crect x='40' y='0' width='20' height='20' fill-opacity='0.3'/%3E%3Crect x='20' y='20' width='20' height='20' fill-opacity='0.45'/%3E%3Crect x='60' y='20' width='20' height='20' fill-opacity='0.2'/%3E%3Crect x='0' y='40' width='20' height='20' fill-opacity='0.35'/%3E%3Crect x='40' y='40' width='20' height='20' fill-opacity='0.5'/%3E%3Crect x='20' y='60' width='20' height='20' fill-opacity='0.25'/%3E%3C/g%3E%3C/svg%3E");
    /* 菱 diamonds (the playmat's red corner) and 青海波 waves (the brocade, the type-tab cap, the app-bar strip); the waves overlap
       row over row as woven, so no ring is cut at a tile edge */
    --pat-hishi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23e2401c' stroke-opacity='.32' stroke-width='1.6'%3E%3Cpath d='M22 2 42 22 22 42 2 22Z'/%3E%3Cpath d='M22 9 35 22 22 35 9 22Z'/%3E%3Cpath d='M22 16 28 22 22 28 16 22Z'/%3E%3C/g%3E%3C/svg%3E");
    --pat-seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Cdefs%3E%3Cmask id='m2' maskUnits='userSpaceOnUse' x='-1' y='-1' width='34' height='18'%3E%3Crect x='-1' y='-1' width='34' height='18' fill='%23fff'/%3E%3Ccircle cx='0' cy='-8' r='16'/%3E%3Ccircle cx='32' cy='-8' r='16'/%3E%3Ccircle cx='-16' cy='0' r='16'/%3E%3Ccircle cx='16' cy='0' r='16'/%3E%3Ccircle cx='48' cy='0' r='16'/%3E%3Ccircle cx='0' cy='8' r='16'/%3E%3Ccircle cx='32' cy='8' r='16'/%3E%3Ccircle cx='-16' cy='16' r='16'/%3E%3Ccircle cx='16' cy='16' r='16'/%3E%3Ccircle cx='48' cy='16' r='16'/%3E%3C/mask%3E%3Cmask id='m3' maskUnits='userSpaceOnUse' x='-1' y='-1' width='34' height='18'%3E%3Crect x='-1' y='-1' width='34' height='18' fill='%23fff'/%3E%3Ccircle cx='-16' cy='0' r='16'/%3E%3Ccircle cx='16' cy='0' r='16'/%3E%3Ccircle cx='48' cy='0' r='16'/%3E%3Ccircle cx='0' cy='8' r='16'/%3E%3Ccircle cx='32' cy='8' r='16'/%3E%3Ccircle cx='-16' cy='16' r='16'/%3E%3Ccircle cx='16' cy='16' r='16'/%3E%3Ccircle cx='48' cy='16' r='16'/%3E%3Ccircle cx='0' cy='24' r='16'/%3E%3Ccircle cx='32' cy='24' r='16'/%3E%3C/mask%3E%3Cmask id='m4' maskUnits='userSpaceOnUse' x='-1' y='-1' width='34' height='18'%3E%3Crect x='-1' y='-1' width='34' height='18' fill='%23fff'/%3E%3Ccircle cx='0' cy='8' r='16'/%3E%3Ccircle cx='32' cy='8' r='16'/%3E%3Ccircle cx='-16' cy='16' r='16'/%3E%3Ccircle cx='16' cy='16' r='16'/%3E%3Ccircle cx='48' cy='16' r='16'/%3E%3Ccircle cx='0' cy='24' r='16'/%3E%3Ccircle cx='32' cy='24' r='16'/%3E%3C/mask%3E%3Cmask id='m5' maskUnits='userSpaceOnUse' x='-1' y='-1' width='34' height='18'%3E%3Crect x='-1' y='-1' width='34' height='18' fill='%23fff'/%3E%3Ccircle cx='-16' cy='16' r='16'/%3E%3Ccircle cx='16' cy='16' r='16'/%3E%3Ccircle cx='48' cy='16' r='16'/%3E%3Ccircle cx='0' cy='24' r='16'/%3E%3Ccircle cx='32' cy='24' r='16'/%3E%3C/mask%3E%3Cmask id='m6' maskUnits='userSpaceOnUse' x='-1' y='-1' width='34' height='18'%3E%3Crect x='-1' y='-1' width='34' height='18' fill='%23fff'/%3E%3Ccircle cx='0' cy='24' r='16'/%3E%3Ccircle cx='32' cy='24' r='16'/%3E%3C/mask%3E%3Cmask id='m7' maskUnits='userSpaceOnUse' x='-1' y='-1' width='34' height='18'%3E%3Crect x='-1' y='-1' width='34' height='18' fill='%23fff'/%3E%3C/mask%3E%3Cmask id='m8' maskUnits='userSpaceOnUse' x='-1' y='-1' width='34' height='18'%3E%3Crect x='-1' y='-1' width='34' height='18' fill='%23fff'/%3E%3C/mask%3E%3C/defs%3E%3Cg fill='none' stroke='%23c99a3a' stroke-opacity='.32'%3E%3Cg mask='url(%23m2)'%3E%3Ccircle cx='-16' cy='-16' r='15.5'/%3E%3Ccircle cx='-16' cy='-16' r='10.5'/%3E%3Ccircle cx='-16' cy='-16' r='5.5'/%3E%3Ccircle cx='16' cy='-16' r='15.5'/%3E%3Ccircle cx='16' cy='-16' r='10.5'/%3E%3Ccircle cx='16' cy='-16' r='5.5'/%3E%3Ccircle cx='48' cy='-16' r='15.5'/%3E%3Ccircle cx='48' cy='-16' r='10.5'/%3E%3Ccircle cx='48' cy='-16' r='5.5'/%3E%3C/g%3E%3Cg mask='url(%23m3)'%3E%3Ccircle cx='0' cy='-8' r='15.5'/%3E%3Ccircle cx='0' cy='-8' r='10.5'/%3E%3Ccircle cx='0' cy='-8' r='5.5'/%3E%3Ccircle cx='32' cy='-8' r='15.5'/%3E%3Ccircle cx='32' cy='-8' r='10.5'/%3E%3Ccircle cx='32' cy='-8' r='5.5'/%3E%3C/g%3E%3Cg mask='url(%23m4)'%3E%3Ccircle cx='-16' cy='0' r='15.5'/%3E%3Ccircle cx='-16' cy='0' r='10.5'/%3E%3Ccircle cx='-16' cy='0' r='5.5'/%3E%3Ccircle cx='16' cy='0' r='15.5'/%3E%3Ccircle cx='16' cy='0' r='10.5'/%3E%3Ccircle cx='16' cy='0' r='5.5'/%3E%3Ccircle cx='48' cy='0' r='15.5'/%3E%3Ccircle cx='48' cy='0' r='10.5'/%3E%3Ccircle cx='48' cy='0' r='5.5'/%3E%3C/g%3E%3Cg mask='url(%23m5)'%3E%3Ccircle cx='0' cy='8' r='15.5'/%3E%3Ccircle cx='0' cy='8' r='10.5'/%3E%3Ccircle cx='0' cy='8' r='5.5'/%3E%3Ccircle cx='32' cy='8' r='15.5'/%3E%3Ccircle cx='32' cy='8' r='10.5'/%3E%3Ccircle cx='32' cy='8' r='5.5'/%3E%3C/g%3E%3Cg mask='url(%23m6)'%3E%3Ccircle cx='-16' cy='16' r='15.5'/%3E%3Ccircle cx='-16' cy='16' r='10.5'/%3E%3Ccircle cx='-16' cy='16' r='5.5'/%3E%3Ccircle cx='16' cy='16' r='15.5'/%3E%3Ccircle cx='16' cy='16' r='10.5'/%3E%3Ccircle cx='16' cy='16' r='5.5'/%3E%3Ccircle cx='48' cy='16' r='15.5'/%3E%3Ccircle cx='48' cy='16' r='10.5'/%3E%3Ccircle cx='48' cy='16' r='5.5'/%3E%3C/g%3E%3Cg mask='url(%23m7)'%3E%3Ccircle cx='0' cy='24' r='15.5'/%3E%3Ccircle cx='0' cy='24' r='10.5'/%3E%3Ccircle cx='0' cy='24' r='5.5'/%3E%3Ccircle cx='32' cy='24' r='15.5'/%3E%3Ccircle cx='32' cy='24' r='10.5'/%3E%3Ccircle cx='32' cy='24' r='5.5'/%3E%3C/g%3E%3Cg mask='url(%23m8)'%3E%3Ccircle cx='-16' cy='32' r='15.5'/%3E%3Ccircle cx='-16' cy='32' r='10.5'/%3E%3Ccircle cx='-16' cy='32' r='5.5'/%3E%3Ccircle cx='16' cy='32' r='15.5'/%3E%3Ccircle cx='16' cy='32' r='10.5'/%3E%3Ccircle cx='16' cy='32' r='5.5'/%3E%3Ccircle cx='48' cy='32' r='15.5'/%3E%3Ccircle cx='48' cy='32' r='10.5'/%3E%3Ccircle cx='48' cy='32' r='5.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --glow-lantern: 0 10px 34px -6px rgba(255,120,48,.42);

    /* ---- card size (Settings > Card size stamps body[data-cardsize]) ---- */
    --hb-tile: 124px;    /* builder pool tile width */
    --hb-hand: 84px;     /* my hand card width in game */

    /* ---- legacy aliases (the older names still used by the moved screen CSS; new code uses the names above) ---- */
    --hb-bg-0: var(--hb-ink-0);  --hb-bg-1: var(--hb-ink-1);
    --hb-s1: var(--hb-ink-2);    --hb-s2: var(--hb-ink-3);   --hb-s3: var(--hb-ink-4);   --hb-s4: var(--hb-ink-5);
    --hb-text-1: var(--hb-text);
    --hb-gold: var(--hb-kin);    --hb-gold-base: var(--hb-kin);  --hb-gold-hi: var(--hb-kin-hi);  --hb-gold-lo: var(--hb-kin-lo);
    --hb-gold-deep: var(--hb-kin-deep);  --hb-gold-deep-2: var(--hb-kin-deep-2);  --hb-gold-pale: var(--hb-kin-pale);
    --hb-gold-text: var(--hb-kin-text);  --hb-gold-line: var(--hb-kin-line);  --hb-gold-faint: var(--hb-kin-faint);  --hb-on-gold: var(--hb-on-kin);
    --hb-on-washi: var(--hb-washi-ink);
    --hb-online: var(--hb-tama);  --hb-online-halo: rgba(120,236,214,.2);
    --hb-parch: var(--hb-kin);    --hb-parch-ink: var(--hb-on-kin);  --hb-parch-ink-2: var(--hb-text-3);
    --hb-chochin: #ff9a3c;        --hb-chochin-glow: rgba(255,154,60,.30);
    --hb-r-card: var(--hb-r-panel);  --hb-r-plate: var(--hb-r-panel);  --hb-r-win: var(--hb-r-panel);  --hb-r-menu: var(--hb-r-panel);
    --hb-tip: 7px;
    --hb-dur-1: var(--hb-dur-press);  --hb-dur-2: var(--hb-dur-hover);  --hb-dur-3: var(--hb-dur-move);  --hb-dur-4: 700ms;
    --hb-ease: var(--hb-ease-out);  --hb-ease-pop: var(--hb-ease-stamp);
    --hb-font-head: var(--hb-font-display);  --hb-font-voice: var(--hb-font-display);  --hb-font-mark: var(--hb-font-gemnum);  --hb-font-gem: var(--hb-font-gemnum);
    --hb-display-weight: 800;  --hb-display-style: normal;  --hb-gem-stretch: normal;
    --hb-pat-hishi: var(--pat-hishi);  --hb-washi-noise: var(--tex-grain);
  }
  body[data-cardsize="s"] { --hb-tile: 100px; --hb-hand: 72px; }
  body[data-cardsize="l"] { --hb-tile: 156px; --hb-hand: 96px; }
  @media (pointer: coarse) { :root { --hb-fs-input: 16px; --hb-h-md: 40px; } }
  @media (max-width: 760px) { :root { --hb-appbar-h: 52px; } }

  /* colour scope: any element says which card colour it belongs to (class c-red / c-green / c-blue / c-none, or the
     mockup's data-color="red|green|blue|kin"); components read only --c* (--c and --c-base are the same colour) */
  :root, .c-none, [data-color="kin"] { --c: var(--hb-kin); --c-base: var(--hb-kin); --c-hi: var(--hb-kin-hi); --c-lo: var(--hb-kin-lo); --c-deep: var(--hb-kin-deep); --c-deep-2: var(--hb-kin-deep-2); --c-pale: var(--hb-kin-pale); --c-text: var(--hb-kin-text); --c-gem: var(--hb-kin); --c-pat: none; --c-link: #7a4d0c; }
  .c-red,   [data-color="red"]   { --c: var(--hb-red-base);   --c-base: var(--hb-red-base);   --c-hi: var(--hb-red-hi);   --c-lo: var(--hb-red-lo);   --c-deep: var(--hb-red-deep);   --c-deep-2: var(--hb-red-deep-2);   --c-pale: var(--hb-red-pale);   --c-text: var(--hb-red-text);   --c-gem: var(--hb-red-base);   --c-pat: var(--pat-aka);    --c-link: #8a1f07; }
  .c-green, [data-color="green"] { --c: var(--hb-green-base); --c-base: var(--hb-green-base); --c-hi: var(--hb-green-hi); --c-lo: var(--hb-green-lo); --c-deep: var(--hb-green-deep); --c-deep-2: var(--hb-green-deep-2); --c-pale: var(--hb-green-pale); --c-text: var(--hb-green-text); --c-gem: var(--hb-green-base); --c-pat: var(--pat-midori); --c-link: #2d5e10; }
  .c-blue,  [data-color="blue"]  { --c: var(--hb-blue-base);  --c-base: var(--hb-blue-base);  --c-hi: var(--hb-blue-hi);  --c-lo: var(--hb-blue-lo);  --c-deep: var(--hb-blue-deep);  --c-deep-2: var(--hb-blue-deep-2);  --c-pale: var(--hb-blue-pale);  --c-text: var(--hb-blue-text);  --c-gem: var(--hb-blue-base);  --c-pat: var(--pat-ao);     --c-link: #0a4f7c; }
}

/* the card numerals (tokens --hb-font-gemnum / -pownum / -boostnum / -enanum above): four small replica fonts traced
   from the card scans (reports/polish2/numerals.md; provenance and terms: site/fonts/hb-numerals-LICENSE.txt). The
   weight range keeps Chrome from synthesising bold; the elements that use them also set font-synthesis: none. */
@font-face { font-family: "HB Cost";  src: url("../../fonts/hb-cost.woff2")  format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "HB Power"; src: url("../../fonts/hb-power.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "HB Boost"; src: url("../../fonts/hb-boost.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "HB Ena";   src: url("../../fonts/hb-ena.woff2")   format("woff2"); font-weight: 100 900; font-display: swap; }
/* the same files as the italic faces: an element set in italics (the old Playfair rules, an <i>) gets the numerals as
   they are, never a synthesized slant on top of HB Power's own */
@font-face { font-family: "HB Cost";  src: url("../../fonts/hb-cost.woff2")  format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "HB Power"; src: url("../../fonts/hb-power.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "HB Boost"; src: url("../../fonts/hb-boost.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "HB Ena";   src: url("../../fonts/hb-ena.woff2")   format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
/* "HB Num": HB Power for the figures inside UI text (0-9 + − × ½; never a letter, a space or punctuation: the text
   font's metrics stay the line's) */
@font-face { font-family: "HB Num"; src: url("../../fonts/hb-power.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+30-39, U+2B, U+2212, U+D7, U+BD; }
@font-face { font-family: "HB Num"; src: url("../../fonts/hb-power.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+30-39, U+2B, U+2212, U+D7, U+BD; }