/* HORO-BEAT sim theme: COMPONENTS (shared by every screen), identity 3 NIGHT PARADE. Flat paint only: textures,
   patterns, glows, gradients over big areas and every animation live in fx.css (scoped to body:not(.hb-perf)), so
   Performance mode can never leave a hole. Spec + markup: reports/polish/DESIGN.md §3 (it also maps the identity-3
   mockup's class names to these).
   Shapes: lacquer boards with 3 px corners (buttons, inputs, dropdowns, segments, switches), the playmat's pointed hex
   (zone tags, keyword chips), circles only for discs, crests and count badges, the printed card corner for card images. */

@layer hb-components {
  /* ------------------------------------------------------------------ icons + small text */
  .hb-icon { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
  /* 人魂 tama: the UI mark (flame, ball low-left); currentColor */
  .hb-dama { display: inline-block; flex: none; width: 1em; height: 1em; background-color: currentColor;
    -webkit-mask: var(--hb-dama) center / contain no-repeat; mask: var(--hb-dama) center / contain no-repeat; }
  .hb-muted { color: var(--hb-text-3); }
  .hb-label { display: block; margin: 0 0 4px; color: var(--hb-text-3); font: 700 var(--hb-fs-11)/1.3 var(--hb-font-ui); letter-spacing: .14em; text-transform: uppercase; }
  :lang(ja) .hb-label, .hb-label:lang(ja) { letter-spacing: .06em; text-transform: none; }
  .hb-kicker { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--hb-kin-text); font: 700 var(--hb-fs-12)/1.2 var(--hb-font-ui); letter-spacing: .24em; text-transform: uppercase; }
  .hb-h { margin: 0; color: var(--hb-text); font: 800 var(--hb-fs-16)/1.2 var(--hb-font-display); letter-spacing: .04em; }
  .hb-spacer { flex: 1 1 auto; }
  .hb-errors { margin: 0; padding: 0 0 0 18px; color: var(--hb-warn); font-size: var(--hb-fs-12); }
  .hb-errors:empty { display: none; }
  .hb-io { font-family: var(--hb-font-mono); font-size: var(--hb-fs-13); }
  .hb-confirm-msg { margin: 0; }
  .hb-dot { display: inline-block; width: 9px; height: 9px; margin-right: 3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--hb-ink-0); vertical-align: -1px; }
  .hb-spin { display: inline-block; flex: none; width: 14px; height: 14px; border: 2px solid var(--hb-line-3); border-top-color: var(--hb-kin-hi); border-radius: 50%; animation: hb-spin .8s linear infinite; }
  @keyframes hb-spin { to { transform: rotate(360deg); } }
  .hb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 16px; color: var(--hb-text-3); font-size: var(--hb-fs-13); text-align: center; }
  .hb-empty > .hb-icon, .hb-empty > .hb-dama { width: 24px; height: 24px; color: var(--hb-mat-dama); }
  .hb-btn kbd { display: inline-block; min-width: 18px; padding: 3px 5px; border-radius: 2px; background: rgba(0,0,0,.28); color: inherit; font: 700 var(--hb-fs-10)/1 var(--hb-font-ui); text-align: center; }

  /* ------------------------------------------------------------------ card image (the real printing) */
  .hb-cimg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 838; object-fit: cover; border-radius: var(--hb-r-print); background: var(--hb-ink-0); user-select: none; -webkit-user-drag: none; }

  /* ------------------------------------------------------------------ BUTTONS: lacquer boards. Custom properties
     --edge (border) --fill (background) --ink (text) let a lane make a variant without a one-off style.
     ONE --primary (vermilion lantern) per view; the default button is the secondary (lacquer + gold hairline). */
  .hb-btn { --edge: var(--hb-kin-line); --fill: var(--hb-ink-3); --ink: var(--hb-text);
    position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
    height: var(--hb-h-md); margin: 0; padding: 0 16px; border: 1px solid var(--edge); border-radius: var(--hb-r-ctl); background-color: var(--fill); color: var(--ink); cursor: pointer;
    font: 700 var(--hb-fs-14)/1 var(--hb-font-ui); letter-spacing: .02em; white-space: nowrap; text-decoration: none; user-select: none;
    transition: transform var(--hb-dur-press) var(--hb-ease-out), background-color var(--hb-dur-hover), border-color var(--hb-dur-hover), box-shadow var(--hb-dur-hover), color var(--hb-dur-hover); }
  .hb-btn:hover { --edge: var(--hb-kin); --fill: var(--hb-ink-4); color: var(--ink); }
  .hb-btn:active, .hb-btn.is-press { transform: translateY(1px) scale(.97); --fill: var(--hb-ink-5); }
  .hb-btn:focus-visible { outline: 2px solid var(--hb-focus); outline-offset: 2px; }
  .hb-btn[disabled], .hb-btn[aria-disabled="true"] { opacity: .42; filter: saturate(.4); cursor: not-allowed; transform: none; }
  .hb-btn[disabled]:hover { --edge: var(--hb-kin-line); --fill: var(--hb-ink-3); }
  .hb-btn .hb-icon { width: 1.15em; height: 1.15em; vertical-align: 0; }
  .hb-btn--secondary { }
  .hb-btn--primary { --edge: var(--hb-shu-lo); --fill: var(--hb-shu); --ink: var(--hb-on-shu); box-shadow: inset 0 1px 0 rgba(255,214,170,.35), 0 2px 0 var(--hb-shu-lo); }
  .hb-btn--primary:hover { --edge: var(--hb-shu-lo); --fill: var(--hb-shu-hover); }
  .hb-btn--primary:active, .hb-btn--primary.is-press { --fill: var(--hb-shu-press); box-shadow: inset 0 2px 5px rgba(50,6,0,.55); }
  .hb-btn--primary[disabled]:hover { --edge: var(--hb-shu-lo); --fill: var(--hb-shu); }
  .hb-btn--ghost { --edge: transparent; --fill: transparent; --ink: var(--hb-text-2); }
  .hb-btn--ghost:hover { --edge: transparent; --fill: var(--hb-ink-3); --ink: var(--hb-kin-text); }
  .hb-btn--ghost:active { --fill: var(--hb-ink-4); }
  .hb-btn--ghost[disabled]:hover { --edge: transparent; --fill: transparent; }
  .hb-btn--danger { --edge: var(--hb-danger); --fill: transparent; --ink: var(--hb-danger-text); }
  .hb-btn--danger:hover { --edge: var(--hb-danger); --fill: var(--hb-danger-deep); }
  .hb-btn--danger-solid { --edge: #7d1630; --fill: var(--hb-danger-fill); --ink: var(--hb-on-danger); }
  .hb-btn--danger-solid:hover { --edge: #7d1630; --fill: #c92a4b; }
  .hb-btn--tama { --edge: var(--hb-tama); --fill: var(--hb-tama-deep); --ink: var(--hb-tama); }
  .hb-btn--tama:hover { --edge: #d6fff5; --fill: #154238; }
  .hb-btn--sm { height: var(--hb-h-sm); padding: 0 10px; font-size: var(--hb-fs-12); gap: 6px; }
  .hb-btn--lg { height: var(--hb-h-lg); padding: 0 22px; font-size: var(--hb-fs-16); }
  .hb-btn--icon { width: var(--hb-h-md); min-width: 0; padding: 0; }
  .hb-btn--icon.hb-btn--sm { width: var(--hb-h-sm); }
  .hb-btn--block { display: flex; width: 100%; }
  /* a toggle button (aria-pressed) with a dot that lights tama */
  .hb-btn[aria-pressed="true"]:not(.hb-btn--icon) { --edge: var(--hb-kin); box-shadow: inset 0 0 0 1px var(--hb-kin-line); }
  .hb-btn > .hb-dot { width: 8px; height: 8px; margin: 0; background: var(--hb-text-4); box-shadow: none; }
  .hb-btn[aria-pressed="true"] > .hb-dot { background: var(--hb-tama); box-shadow: 0 0 8px var(--hb-tama-glow); }
  .hb-btn--icon[aria-pressed="true"] { --ink: var(--hb-warn); }

  /* ------------------------------------------------------------------ segmented control (EN | 日本語, speed, view) */
  .hb-seg { display: inline-flex; align-items: center; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--hb-line-2); border-radius: var(--hb-r-ctl); background: var(--hb-well); }
  .hb-seg > button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 34px; height: 28px; margin: 0; padding: 0 10px; border: 0; border-radius: 2px;
    background: transparent; color: var(--hb-text-3); cursor: pointer; font: 700 var(--hb-fs-12)/1 var(--hb-font-ui); white-space: nowrap;
    transition: background-color var(--hb-dur-hover), color var(--hb-dur-hover); }
  .hb-seg > button:hover { background-color: var(--hb-ink-3); color: var(--hb-text); }
  .hb-seg > button[aria-pressed="true"], .hb-seg > button.is-on, .hb-seg > button[aria-selected="true"] { background-color: var(--hb-kin); color: var(--hb-on-kin); box-shadow: inset 0 1px 0 rgba(255,240,200,.5), 0 1px 0 rgba(0,0,0,.4); }
  .hb-seg > button .hb-icon { width: 15px; height: 15px; }
  .hb-seg--block { display: flex; width: 100%; }
  .hb-seg--block > button { flex: 1 1 0; height: 34px; }

  /* ------------------------------------------------------------------ page tabs (gold underline) */
  .hb-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hb-line); }
  .hb-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; margin: 0; padding: 0 14px; border: 0; background: none; color: var(--hb-text-3); cursor: pointer; font: 700 var(--hb-fs-13)/1 var(--hb-font-ui); }
  .hb-tab:hover { color: var(--hb-text); }
  .hb-tab[aria-selected="true"], .hb-tab.is-on { color: var(--hb-text); }
  .hb-tab[aria-selected="true"]::after, .hb-tab.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--hb-kin); }


  /* ------------------------------------------------------------------ ZONE TAG: the playmat's black pointed tag in a
     gold one, white hiragana (は〜とぞ〜ん わざぞ〜ん えなぞ〜ん やまふだ ぼち; EN: HEARTS WAZA ENA DECK GRAVE).
     .hb-tag (horizontal), .hb-tag--v (vertical, the board), --sm, --gold. Edge = ::before, fill = ::after. */
  .hb-tag { --tip: 8px; --tag-bg: var(--hb-mat-tag-bg); --tag-edge: var(--hb-mat-tag-edge); --tag-ink: var(--hb-mat-tag-ink);
    position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: none;
    height: 24px; padding: 0 calc(var(--tip) + 8px); color: var(--tag-ink); font: 700 var(--hb-fs-12)/1 var(--hb-font-ui); letter-spacing: .12em; white-space: nowrap; }
  .hb-tag::before, .hb-tag::after { content: ""; position: absolute; pointer-events: none;
    clip-path: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%); }
  .hb-tag::before { inset: 0; z-index: -2; background-color: var(--tag-edge); }
  .hb-tag::after { inset: 1.5px 1.8px; z-index: -1; background-color: var(--tag-bg); }
  .hb-tag--v { --tip: 9px; writing-mode: vertical-rl; text-orientation: mixed; width: 26px; height: auto; padding: calc(var(--tip) + 6px) 0; letter-spacing: .12em; }
  .hb-tag--v::before, .hb-tag--v::after { clip-path: polygon(50% 0, 100% var(--tip), 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip)), 0 var(--tip)); }
  .hb-tag--v::after { inset: 1.8px 1.5px; }
  html[lang="en"] .hb-tag { font-size: var(--hb-fs-11); letter-spacing: .14em; text-transform: uppercase; }
  .hb-tag--sm { --tip: 6px; height: 19px; padding: 0 calc(var(--tip) + 5px); font-size: var(--hb-fs-10); }
  .hb-tag--v.hb-tag--sm { width: 18px; height: auto; padding: calc(var(--tip) + 3px) 0; }

  /* ------------------------------------------------------------------ PILL: the hex chip (keywords, small states).
     State, not instructions. --civ (+ .c-*), --gold, --tama, --ok, --warn, --danger, --muted, --live, --lg */
  .hb-pill { --pill-bg: var(--hb-ink-4); --pill-ink: var(--hb-text-2);
    display: inline-flex; align-items: center; gap: 5px; flex: none; height: 22px; padding: 0 12px; background-color: var(--pill-bg); color: var(--pill-ink);
    font: 700 var(--hb-fs-11)/1 var(--hb-font-ui); letter-spacing: .02em; white-space: nowrap; vertical-align: middle;
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%); }
  .hb-pill .hb-icon { width: 12px; height: 12px; }
  .hb-pill--civ { --pill-bg: var(--c-deep-2); --pill-ink: var(--c-text); }
  .hb-pill--gold { --pill-bg: var(--hb-kin); --pill-ink: var(--hb-on-kin); }
  .hb-pill--warn { --pill-bg: var(--hb-warn-deep); --pill-ink: var(--hb-warn); }
  .hb-pill--muted { --pill-bg: var(--hb-ink-3); --pill-ink: var(--hb-text-3); }

  /* ------------------------------------------------------------------ HANKO: the vermilion seal (the deck's LEGAL
     stamp, a confirmed state). Tilted like a stamp; --muted for a seal that is not earned yet. */
  .hb-seal { display: inline-grid; place-items: center; flex: none; height: 20px; padding: 0 6px; border: 1.5px solid var(--hb-shu-hi); border-radius: 2px; color: var(--hb-shu-hi);
    font: 800 var(--hb-fs-11)/1 var(--hb-font-display); letter-spacing: .06em; transform: rotate(-4deg); white-space: nowrap; }

  /* ------------------------------------------------------------------ card furniture, recreated from the printed card */
  /* 色玉 the printed gem (cost, boost, Ena Read): theme/gems.css, linked right after this file. Here only the default size
     and the size steps (--s = the gold ring's outer diameter; screen CSS sets --s directly). UI.gem(cost, color, cls, label). */
  .hb-gem { --s: 24px; }
  .hb-gem > .hb-icon { width: 55%; height: 55%; -webkit-text-stroke: 0; filter: drop-shadow(0 1px 0 var(--hb-glyph-edge)); }
  .hb-gem--xs { --s: 18px; } .hb-gem--sm { --s: 22px; } .hb-gem--md { --s: 30px; } .hb-gem--xl { --s: 34px; }
  /* power numerals: the card's slanted serif (HB Power, traced from the print; the slant is in the outlines, so no
     italic and no synthesis), white with an ink stroke; gold when raised; dim when lowered. --edge: a Waza's "+N000",
     printed in the card edge's condensed upright serif (HB Boost) */
  .hb-num { display: inline-block; padding: .04em .14em .04em .18em; margin: -.04em -.06em -.04em -.12em; color: var(--hb-glyph-fill);
    font: 400 var(--hb-fs-20)/1 var(--hb-font-pownum); font-synthesis: none; font-kerning: normal; letter-spacing: 0;
    -webkit-text-stroke: .17em var(--hb-glyph-edge); paint-order: stroke fill; }
  .hb-num--edge { font-family: var(--hb-font-boostnum); }
  .hb-num small { margin-left: 2px; color: var(--hb-kin-hi); font-size: .5em; }
  .hb-num--up { color: var(--hb-kin-hi); }
  .hb-num--down { color: var(--hb-text-3); }
  .hb-count { color: var(--hb-text); font: italic 900 var(--hb-fs-22)/1 var(--hb-font-num); font-variant-numeric: lining-nums; }
  .hb-count small { margin-left: 2px; color: var(--hb-text-3); font: 400 var(--hb-fs-12)/1 var(--hb-font-num); }
  /* a number set inside running text that has a separator the text font would draw ("50 / 50", "1,500") */
  .hb-n { font-family: var(--hb-font-num); font-style: normal; font-synthesis: none; letter-spacing: 0; }
  /* trigger mark: the printed black disc with the kanji (出 entry, 上 over, 札 draw, 終 last over) + the slanted tag */
  .hb-trig { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #120a07; color: #fff;
    font: 800 14px/1 var(--hb-font-display); box-shadow: inset 0 0 0 1.5px currentColor, 0 0 0 1px #120a07; }
  .hb-trig--sm { width: 20px; height: 20px; font-size: 12px; }
  .hb-trigtag { display: inline-flex; align-items: center; flex: none; height: 18px; padding: 0 12px 0 8px; background: #120a07; color: #fff;
    font: 700 var(--hb-fs-11)/1 var(--hb-font-ui); white-space: nowrap; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
  /* rarity tag: the gold box of the card's foot (C UC R); SR / DR foil (animated in fx.css); SEC black with gold */
  .hb-rar { display: inline-grid; place-items: center; flex: none; min-width: 22px; height: 16px; padding: 0 4px; border-radius: var(--hb-r-xs); background: #b8892a; color: var(--hb-on-kin);
    font: 900 10px/1 var(--hb-font-ui); letter-spacing: .03em; }
  .hb-rar--sr, .hb-rar--dr { background: linear-gradient(115deg, #a87a1e, #f6dc92 45%, #c99a3a 60%, #8a641c); }
  .hb-rar--sec { background: #120a07; color: var(--hb-kin-hi); box-shadow: inset 0 0 0 1px var(--hb-kin); }
  /* type tab: the black, gold-framed ホロビト / ワザ tag */
  .hb-typetab { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 8px; border: 1px solid var(--hb-kin); border-radius: var(--hb-r-xs); background-color: #120a07; color: var(--hb-kin-hi);
    font: 700 var(--hb-fs-11)/1 var(--hb-font-ui); letter-spacing: .08em; white-space: nowrap; }
  html[lang="en"] .hb-typetab { text-transform: uppercase; }
  /* 家紋 crest: a race's affiliation (家 Family 血 Blood 組 Gang 里 Commune 部 Club 律 Order 流 Nagaremono), in the race's
     card colour (流 gold: all three colours). UI.kamon(race) */
  .hb-kamon { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; color: var(--c-text);
    font: 800 11px/1 var(--hb-font-display); }
  /* nav crest (家 札 戦 掟): lit vermilion when its screen is on (.is-on, or inside [aria-current="page"]) */
  .hb-crest { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--hb-line-3); color: var(--hb-kin-text);
    font: 800 13px/1 var(--hb-font-display); transition: border-color var(--hb-dur-hover), background-color var(--hb-dur-hover), color var(--hb-dur-hover); }
  .hb-crest.is-on, [aria-current="page"] > .hb-crest { background-color: var(--hb-shu); border-color: var(--hb-shu-hi); color: #fff; }
  /* count badge pinned on a tile / pile / stack ("2", "31") */
  .hb-badge { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: var(--hb-r-pill); background: #140a06; color: #fff;
    box-shadow: 0 0 0 2px var(--hb-kin), 0 2px 6px rgba(0,0,0,.6); font: 400 var(--hb-fs-14)/1 var(--hb-font-gemnum); font-synthesis: none; white-space: nowrap; }
  .hb-badge--sm { min-width: 18px; height: 18px; font-size: var(--hb-fs-11); box-shadow: 0 0 0 1.5px var(--hb-kin), 0 2px 4px rgba(0,0,0,.6); }
  .hb-badge--max { box-shadow: 0 0 0 2px var(--hb-text-4); color: var(--hb-text-3); }
  /* the card back: the official HORO-BEAT back (reference/card-back-official.webp, as ui/img/card-back.webp 600 x 838,
     the card images' size). It is card art, so it stays in Performance mode; the fallback colour is its own red. */
  .hb-cardback { position: relative; display: block; aspect-ratio: 600 / 838; border-radius: var(--hb-r-print);
    background: #e70013 url("../img/card-back.webp") center / 100% 100% no-repeat; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.5); }
  /* line mark: a 人魂 carrying the line number (board, log). UI.lmark(n, lit); --s sets the size */
  .hb-lmark { --s: 28px; position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); color: var(--hb-mat-dama); }
  .hb-lmark > .hb-dama { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hb-lmark > b { position: absolute; left: calc(var(--s) * 10 / 24); top: calc(var(--s) * 15 / 24); transform: translate(-50%, -50%); color: #140a06; font: 400 calc(var(--s) * .44)/1 var(--hb-font-gemnum); font-synthesis: none; }
  /* at 100 % zoom a glyph's baseline and a box's edge each snap to a whole px: the numeral's BASELINE sits a whole
     number of px under the mark's top (0.779 s = its centre 15/24 s + half the 0.7 em digit; the font's ascent is
     0.85 em), so the numeral and the flame round the same way wherever the mark lands (a log row at a fractional y:
     the numeral used to sit 1 px low in some rows) */
  @supports (top: round(1.5px, 1px)) { .hb-lmark > b { top: round(calc(var(--s) * .779), 1px); transform: translate(-50%, -.85em); } }
  .hb-lmark.is-lit { color: var(--hb-tama); }
  /* a circle's own text, wrapped by ui/ink.js so it can be moved onto the circle's centre (its ink, measured with the font) */
  hb-ink { display: inline-block; }
  hb-probe { display: inline-block; width: 0; height: 0; vertical-align: baseline; }   /* ui/ink.js reads the baseline with it, for a moment */

  /* ------------------------------------------------------------------ THE card-text box: washi, as printed, the SAME box in
     EN and 日本語 (BRIEF 1). Colour scope .c-red / .c-green / .c-blue: the keyline, the left tint + the colour's pattern
     (fx.css; flat: a colour edge on the left). Markup (DESIGN.md §3.14):
     .hb-cardtext.c-red > p.hb-cardtext__p (b / .hb-cardtext__kw keywords, .hb-cardtext__rem reminders, .hb-cn names),
     .hb-cardtext__flavor (> .hb-cardtext__by), .hb-cardtext__trig (.hb-trig + .hb-trigtag + text), .hb-cardtext__foot */
  .hb-cardtext { position: relative; isolation: isolate; overflow: hidden; padding: 12px 14px 10px; border-radius: 4px; background-color: var(--hb-ci-bg); color: var(--hb-ci-text);
    box-shadow: inset 5px 0 0 var(--c), 0 0 0 1.5px var(--c), 0 0 0 3.5px #140a06;
    font: 500 var(--hb-fs-14)/var(--hb-cardtext-lh) var(--hb-font-card); letter-spacing: var(--hb-cardtext-ls); }
  .hb-cardtext__p { margin: 0 0 3px; }
  .hb-cardtext__p:last-child { margin-bottom: 0; }
  .hb-cardtext b, .hb-cardtext__kw { color: var(--hb-ci-text); font-weight: 900; }
  .hb-cardtext__rem { color: var(--hb-ci-text-2); font-size: .88em; }
  .hb-cardtext__bullet::before { content: "●"; margin-right: .25em; }
  .hb-cardtext ruby rt { color: var(--hb-ci-text-2); font-weight: 500; }
  .hb-cardtext .hb-cn { color: var(--c-link); font-weight: 700; }
  .hb-cardtext__flavor { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--hb-ci-sep); color: var(--hb-ci-text-2); font: 500 var(--hb-fs-13)/1.75 var(--hb-font-display); }
  .hb-cardtext__by { display: block; text-align: right; }
  .hb-cardtext__by::before { content: "— "; }
  .hb-cardtext__trig { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1.5px solid var(--c); font-size: var(--hb-fs-12); line-height: 1.45; }
  .hb-cardtext__foot { display: flex; align-items: center; gap: 8px; height: 24px; margin: 10px -14px -10px; padding: 0 10px; background: #140a06; color: #c9bba8;
    font: 600 var(--hb-fs-10)/1 var(--hb-font-ui); letter-spacing: .02em; }
  .hb-cardtext__foot > :last-child { margin-left: auto; }
  /* a card name inside ink text (log, prompts): the card's colour */
  .hb-cn { color: var(--c-text); font-weight: 700; }
  /* the card's name: heavy gothic as printed, ruby above in JA, the race under it */
  .hb-cardname { margin: 0; color: var(--hb-text); font: 900 var(--hb-fs-18)/1.25 var(--hb-font-ui); letter-spacing: .01em; word-break: auto-phrase; }
  .hb-cardname rt { font: 700 .5em var(--hb-font-ui); color: var(--hb-text-3); }
  .hb-cardname__race { display: flex; align-items: center; gap: 7px; color: var(--c-text); font: 700 var(--hb-fs-12)/1.3 var(--hb-font-ui); }


  /* ------------------------------------------------------------------ panels (lacquer) */
  .hb-panel { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--hb-r-panel); background-color: var(--hb-ink-2); box-shadow: inset 0 0 0 1px var(--hb-line), var(--hb-e1); color: var(--hb-text); }
  .hb-panel--flat { box-shadow: inset 0 0 0 1px var(--hb-line); }

  /* ------------------------------------------------------------------ inputs */
  .hb-input, .hb-select { display: block; width: 100%; height: var(--hb-h-md); margin: 0; padding: 0 12px; border: 1px solid var(--hb-line-2); border-radius: var(--hb-r-ctl); background-color: var(--hb-well); color: var(--hb-text);
    font: 500 var(--hb-fs-input)/1.3 var(--hb-font-ui); outline: 0; transition: border-color var(--hb-dur-hover), box-shadow var(--hb-dur-hover); }
  textarea.hb-input { height: auto; padding: 8px 12px; resize: vertical; line-height: 1.5; }
  .hb-input:hover, .hb-select:hover { border-color: var(--hb-line-3); }
  .hb-input:focus, .hb-select:focus, .hb-search:focus-within { border-color: var(--hb-kin); box-shadow: 0 0 0 1px var(--hb-kin-line); }
  .hb-select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--hb-kin) 50%), linear-gradient(135deg, var(--hb-kin) 50%, transparent 50%);
    background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
  .hb-select option { background: var(--hb-ink-3); color: var(--hb-text); }
  .hb-search { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; height: var(--hb-h-md); padding: 0 12px; border: 1px solid var(--hb-line-2); border-radius: var(--hb-r-ctl); background-color: var(--hb-well); color: var(--hb-text-3); }
  .hb-search > .hb-icon { width: 16px; height: 16px; }
  .hb-search > .hb-input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: none; box-shadow: none; }
  .hb-search__count { flex: none; color: var(--hb-text-3); font: 400 var(--hb-fs-12)/1 var(--hb-font-num); white-space: nowrap; }
  .hb-search__count b { margin-right: 2px; color: var(--hb-text); font: italic 900 var(--hb-fs-16)/1 var(--hb-font-num); }
  /* switch (button role=switch aria-checked): a lacquer slot; the knob is a spirit flame that lights tama */
  .hb-switch { position: relative; flex: none; width: 44px; height: 24px; margin: 0; padding: 0; border: 1px solid var(--hb-line-2); border-radius: var(--hb-r-ctl); background: var(--hb-well); cursor: pointer;
    transition: background-color var(--hb-dur-hover), border-color var(--hb-dur-hover); }
  .hb-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50% 50% 50% 8%; transform: rotate(45deg); background: var(--hb-text-4);
    transition: transform var(--hb-dur-move) var(--hb-ease-stamp), background-color var(--hb-dur-hover), box-shadow var(--hb-dur-hover); }
  .hb-switch[aria-checked="true"] { border-color: var(--hb-tama); background: var(--hb-tama-deep); }
  .hb-switch[aria-checked="true"]::after { transform: translateX(20px) rotate(45deg); background: var(--hb-tama); box-shadow: 0 0 10px var(--hb-tama-glow); }
  /* range slider (native input; set style="--v:72%" for the fill) */
  .hb-range { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 80px; height: 22px; margin: 0; background: none; cursor: pointer; }
  .hb-range::-webkit-slider-runnable-track { height: 6px; border-radius: 1px; background: linear-gradient(90deg, var(--hb-kin) var(--v, 50%), var(--hb-well) var(--v, 50%)); box-shadow: 0 0 0 1px var(--hb-line-2); }
  .hb-range::-moz-range-track { height: 6px; border-radius: 1px; background: var(--hb-well); box-shadow: 0 0 0 1px var(--hb-line-2); }
  .hb-range::-moz-range-progress { height: 6px; background: var(--hb-kin); }
  .hb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: var(--hb-kin-hi); border: 3px solid var(--hb-ink-0); box-shadow: 0 0 0 1px var(--hb-kin); }
  .hb-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--hb-kin-hi); border: 3px solid var(--hb-ink-0); }
  /* stepper: [−] n [+]  (+ is the vermilion action, − the lacquer one) */
  .hb-step { display: inline-flex; align-items: center; flex: none; gap: 0; }
  .hb-step > button { display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 1px solid var(--hb-kin-line); border-radius: var(--hb-r-ctl); background: var(--hb-ink-3); color: var(--hb-text); cursor: pointer;
    transition: background-color var(--hb-dur-hover), border-color var(--hb-dur-hover), transform var(--hb-dur-press); }
  .hb-step > button:hover { border-color: var(--hb-kin); background: var(--hb-ink-4); }
  .hb-step > button[data-inc] { border-color: var(--hb-shu-lo); background: var(--hb-shu); color: var(--hb-on-shu); box-shadow: inset 0 1px 0 rgba(255,214,170,.35); }
  .hb-step > button[data-inc]:hover { background: var(--hb-shu-hover); }
  .hb-step > button:active { transform: scale(.92); }
  .hb-step > button[disabled] { opacity: .42; filter: saturate(.4); cursor: not-allowed; transform: none; }
  .hb-step > button .hb-icon { width: 14px; height: 14px; }
  .hb-step > output { min-width: 36px; color: var(--hb-text); font: italic 900 var(--hb-fs-18)/1 var(--hb-font-num); text-align: center; }
  .hb-step--lg > button { width: 32px; height: 32px; }
  .hb-step--lg > output { min-width: 40px; font-size: var(--hb-fs-22); }

  /* ------------------------------------------------------------------ the multi-select dropdown (components/select.js) */
  .hb-dd { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; min-width: 96px; max-width: 220px; height: var(--hb-h-md); margin: 0; padding: 0 10px 0 12px;
    border: 1px solid var(--hb-line-2); border-radius: var(--hb-r-ctl); background: var(--hb-well); color: var(--hb-text-2); cursor: pointer;
    font: 700 var(--hb-fs-13)/1 var(--hb-font-ui); white-space: nowrap; transition: border-color var(--hb-dur-hover), background-color var(--hb-dur-hover); }
  .hb-dd:hover { border-color: var(--hb-line-3); color: var(--hb-text); }
  .hb-dd__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }   /* room for g / y / p under the clip */
  .hb-dd__more { flex: none; margin-left: -4px; font-family: var(--hb-font-num); font-style: italic; color: var(--hb-kin-hi, var(--hb-kin)); }
  .hb-dd__more[hidden] { display: none; }
  /* a toolbar dropdown that shrinks (ellipsis) instead of wrapping its row */
  .hb-dd--fluid { flex: 0 1 auto; min-width: 0; }
  .hb-dd__caret { flex: none; width: 14px; height: 14px; margin-left: auto; background-color: var(--hb-kin); -webkit-mask: var(--hb-chev) center / contain no-repeat; mask: var(--hb-chev) center / contain no-repeat; transition: transform var(--hb-dur-hover) var(--hb-ease-out); }
  .hb-dd__clear { display: none; flex: none; place-items: center; width: 18px; height: 18px; margin: 0 -3px 0 auto; border-radius: 50%; background: var(--hb-kin); color: var(--hb-on-kin); font: 900 11px/1 var(--hb-font-ui); }
  .hb-dd.is-set { border-color: var(--hb-kin); background: var(--hb-kin-deep); color: var(--hb-text); }
  .hb-dd.is-set .hb-dd__caret { display: none; }
  .hb-dd.is-set .hb-dd__clear { display: inline-grid; }
  .hb-dd.is-open { border-color: var(--hb-kin); box-shadow: 0 0 0 1px var(--hb-kin-line); }
  .hb-dd.is-open .hb-dd__caret { transform: rotate(180deg); }
  .hb-ddmenu { position: fixed; z-index: 900; display: flex; flex-direction: column; width: 292px; max-height: min(420px, 70vh); padding: 8px; transform-origin: 50% 0;
    border: 1px solid var(--hb-kin-line); border-radius: var(--hb-r-panel); background-color: var(--hb-ink-3); box-shadow: var(--hb-e3); color: var(--hb-text-2); }
  .hb-ddmenu__head { display: none; }
  .hb-ddmenu__search { flex: none; height: 32px; margin-bottom: 6px; }
  .hb-ddmenu__list { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .hb-ddopt { display: grid; grid-template-columns: 18px auto 1fr auto; align-items: center; gap: 10px; min-height: 34px; padding: 3px 8px; border-radius: var(--hb-r-item); cursor: pointer; font-size: var(--hb-fs-13); }
  .hb-ddopt__icon:empty { display: none; }
  .hb-ddopt__icon { display: inline-flex; }
  .hb-ddopt__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hb-ddopt__count { color: var(--hb-text-3); font: italic 700 13px/1 var(--hb-font-num); }
  /* the tick is a hanko: an empty square; on = a vermilion seal stamped at -5° with a white tick */
  .hb-ddopt__tick { display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--hb-text-3); border-radius: 2px; }
  .hb-ddopt:hover, .hb-ddopt.is-hi { background: var(--hb-ink-4); color: var(--hb-text); }
  .hb-ddopt.is-on { color: var(--hb-text); font-weight: 700; }
  .hb-ddopt.is-on .hb-ddopt__tick { border-color: var(--hb-shu-hi); background-color: var(--hb-shu); transform: rotate(-5deg); box-shadow: 0 0 0 1px var(--hb-shu-lo); }
  .hb-ddopt.is-on .hb-ddopt__tick::after { content: ""; width: 12px; height: 12px; background-color: #fff; -webkit-mask: var(--hb-tick) center / contain no-repeat; mask: var(--hb-tick) center / contain no-repeat; }
  .hb-ddopt--any { grid-template-columns: 18px 1fr; color: var(--hb-text-3); }
  .hb-ddopt--any.is-on { color: var(--hb-kin-text); }
  .hb-ddopt--use { grid-template-columns: 18px 1fr; color: var(--hb-kin-text); }
  .hb-ddmenu__group { padding: 8px 8px 2px; color: var(--hb-kin-text); font: 800 var(--hb-fs-11)/1.2 var(--hb-font-ui); letter-spacing: .14em; text-transform: uppercase; }
  .hb-ddmenu__rule { height: 1px; margin: 4px 2px; background: var(--hb-line); }
  .hb-ddmenu__empty { padding: 12px 8px; color: var(--hb-text-3); font-size: var(--hb-fs-12); }
  /* phone: the popup becomes a full-screen page (BZ's dropdown page) */
  .hb-ddmenu.is-page { inset: 0; width: auto; max-height: none; padding: 0 0 var(--hb-safe-b); border: 0; border-radius: 0; background-color: var(--hb-ink-1); box-shadow: none; }
  .hb-ddmenu.is-page .hb-ddmenu__head { display: flex; align-items: center; gap: 8px; height: var(--hb-appbar-h); padding: 0 8px; background: var(--hb-ink-0); border-bottom: 1px solid var(--hb-kin-line); color: var(--hb-text); font: 800 var(--hb-fs-16)/1 var(--hb-font-display); }
  .hb-ddmenu.is-page .hb-ddmenu__search { margin: 10px 12px 6px; height: 40px; }
  .hb-ddmenu.is-page .hb-ddmenu__list { padding: 0 8px 16px; }
  .hb-ddmenu.is-page .hb-ddopt { min-height: 44px; font-size: var(--hb-fs-14); }

  /* ------------------------------------------------------------------ WINDOWS: a 掛け軸 hanging scroll (a rod on top, a
     brocade border, the lacquer page, a rod at the bottom) centred on desktop; a bottom sheet on phones (no rods).
     Markup from components/modal.js: .hb-scrim > .hb-window > .hb-window__rod + .hb-window__brocade > .hb-window__page
     > (.hb-window__head > .hb-window__title + ✕) + .hb-window__body + .hb-window__foot ; + .hb-window__rod--bottom */
  .hb-scrim { position: fixed; inset: 0; z-index: 800; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px; background: var(--hb-scrim); }
  .hb-window { position: relative; display: flex; flex-direction: column; min-width: 0; width: min(560px, calc(100% - 28px)); max-height: min(88dvh, 860px); color: var(--hb-text); }
  .hb-window--sm { width: min(440px, calc(100% - 28px)); }
  .hb-window--lg { width: min(760px, calc(100% - 28px)); }
  .hb-window--xl { width: min(980px, calc(100% - 28px)); }
  .hb-window__rod { position: relative; z-index: 1; flex: none; height: 12px; margin: 0 -14px; border-radius: 6px; background: #0b0604; box-shadow: inset 0 1px 0 rgba(255,220,170,.12), 0 3px 6px rgba(0,0,0,.6); }
  .hb-window__rod::before, .hb-window__rod::after { content: ""; position: absolute; top: -2px; width: 14px; height: 16px; border-radius: 3px; background: var(--hb-kin); }
  .hb-window__rod::before { left: -6px; }
  .hb-window__rod::after { right: -6px; }
  .hb-window__brocade { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; padding: 10px; background-color: var(--hb-ink-3); border-left: 1px solid var(--hb-kin-line); border-right: 1px solid var(--hb-kin-line); box-shadow: var(--hb-e3); }
  .hb-window__page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; background-color: var(--hb-ink-2); border: 1px solid var(--hb-kin-line); }
  .hb-window__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 14px 12px 10px 16px; }
  .hb-window__title { flex: 1 1 auto; min-width: 0; margin: -.15em 0; padding: .15em 0; overflow: hidden; font: 800 var(--hb-fs-22)/1.2 var(--hb-font-display); letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
  .hb-window__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 16px 10px; display: flex; flex-direction: column; gap: 10px; }
  .hb-window__foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; flex: none; gap: 8px; padding: 12px 16px 16px; }
  .hb-sheet__grab { display: none; }
  .hb-scrim.is-closing { pointer-events: none; }
  /* a sheet (UI.openSheet, and every window on a phone): no rods, the page slides up from the bottom edge */
  .hb-scrim.is-sheet { place-items: end center; padding: 0 16px; }
  .hb-window--sheet { width: min(640px, 100%); }
  .hb-window--sheet > .hb-window__rod { display: none; }
  .hb-window--sheet > .hb-window__brocade { padding: 0; border: 0; background: none; box-shadow: var(--hb-e3); }
  .hb-window--sheet .hb-window__page { border-radius: var(--hb-r-sheet) var(--hb-r-sheet) 0 0; border-bottom: 0; }

  /* ------------------------------------------------------------------ Settings panel rows (settings.js): the name (+ one
     grey line) on the left, ONE control on the right */
  .hb-settings .hb-window__body { gap: 0; }
  .hb-setgroup { margin: 14px 0 2px; color: var(--hb-kin-text); font: 800 var(--hb-fs-11)/1.2 var(--hb-font-ui); letter-spacing: .14em; text-transform: uppercase; }
  .hb-setgroup:first-child { margin-top: 2px; }
  .hb-setrow { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 0; border-top: 1px solid var(--hb-line); }
  .hb-setrow__text { flex: 1 1 auto; min-width: 0; }
  .hb-setrow__name { color: var(--hb-text); font-weight: 700; }
  .hb-setrow__desc { color: var(--hb-text-3); font-size: var(--hb-fs-12); line-height: 1.4; }
  .hb-setrow__ctl { flex: none; display: flex; align-items: center; gap: 8px; }
  .hb-setrow__ctl .hb-range { width: 150px; }
  .hb-setrow__val { min-width: 30px; color: var(--hb-kin-text); font: italic 900 var(--hb-fs-14)/1 var(--hb-font-num); text-align: right; }
  .hb-setrow--sub { min-height: 42px; padding-left: 14px; }
  .hb-setrow--sub .hb-setrow__name { color: var(--hb-text-2); font-weight: 500; }

  /* ------------------------------------------------------------------ deck colour bar + mana curve */
  .hb-comp { display: flex; height: 6px; border-radius: var(--hb-r-bar); overflow: hidden; background: var(--hb-well); }
  .hb-comp > i { display: block; flex: 1; background: var(--c); }
  .hb-curve { display: flex; align-items: flex-end; gap: 4px; height: 76px; padding: 0 2px; }
  .hb-curve__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; }
  .hb-curve__bar { width: 100%; max-width: 30px; border-top: 2px solid var(--hb-kin-hi); border-radius: var(--hb-r-bar) var(--hb-r-bar) 0 0; background: var(--hb-kin-lo); }
  .hb-curve__n { color: var(--hb-text-3); font: italic 700 var(--hb-fs-10)/1 var(--hb-font-num); }

  /* ------------------------------------------------------------------ TOASTS: an 絵馬 votive plaque hanging on a cord
     (gold edge; crimson for an error, amber for a warning). Desktop bottom-left, phones above the tab bar; a screen
     with a bottom bar lifts them with --hb-toast-b on <body>. Markup (components/toast.js): .hb-toast > .hb-toast__cord
     + .hb-toast__plate > .hb-toast__in > svg.hb-toast__icon + .hb-toast__text (b + .hb-toast__sub) + .hb-toast__act */
  .hb-toasts { position: fixed; z-index: 950; left: max(20px, var(--hb-safe-l)); bottom: calc(var(--hb-toast-b, 18px) + var(--hb-safe-b)); display: flex; flex-direction: column; gap: 30px; width: min(330px, calc(100vw - 32px)); pointer-events: none; }
  .hb-toast { --plate: var(--hb-kin); position: relative; padding-top: 22px; pointer-events: auto; transform-origin: 50% 0; filter: drop-shadow(0 12px 18px rgba(0,0,0,.55)); }
  .hb-toast__cord { position: absolute; left: 50%; top: 0; width: 2px; height: 24px; margin-left: -1px; background: var(--plate); }
  .hb-toast__cord::before { content: ""; position: absolute; left: -4px; top: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--plate); background: var(--hb-ink-1); }
  .hb-toast__plate { padding: 1.5px; background-color: var(--plate); clip-path: polygon(0 14px, 50% 0, 100% 14px, 100% 100%, 0 100%); }
  .hb-toast__in { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 20px 12px 12px 14px; background-color: var(--hb-ink-3); clip-path: polygon(0 13px, 50% 0, 100% 13px, 100% 100%, 0 100%); }
  .hb-toast__icon { flex: none; width: 28px; height: 28px; color: var(--plate); }
  .hb-toast__text { flex: 1 1 auto; min-width: 0; color: var(--hb-text); font: 800 var(--hb-fs-14)/1.35 var(--hb-font-display); }
  .hb-toast__sub { display: block; color: var(--hb-text-3); font: 500 var(--hb-fs-12)/1.4 var(--hb-font-ui); }
  .hb-toast__act { flex: none; }
  .hb-toast--ok { --plate: var(--hb-kin); }
  .hb-toast--warn { --plate: var(--hb-warn); }
  .hb-toast--error { --plate: var(--hb-danger); }
  .hb-toast--error .hb-toast__icon { color: var(--hb-danger-text); }
  .hb-toast.is-out { opacity: 0; }

  /* ------------------------------------------------------------------ tooltip (components/tip.js; desktop hover) */
  .hb-tip { position: fixed; z-index: 1000; max-width: 300px; padding: 6px 10px; border: 1px solid var(--hb-kin-line); border-radius: var(--hb-r-ctl); background: var(--hb-ink-0); box-shadow: var(--hb-e2);
    color: var(--hb-text-2); font: 500 var(--hb-fs-12)/1.45 var(--hb-font-ui); pointer-events: none; }

  /* ------------------------------------------------------------------ deck tile (the load list) */
  .hb-deck { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--hb-r-panel); background: var(--hb-ink-2); box-shadow: inset 0 0 0 1px var(--hb-line); cursor: pointer; transition: box-shadow var(--hb-dur-hover); }
  .hb-deck:hover { box-shadow: inset 0 0 0 1px var(--hb-kin); }
  .hb-deck__art { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px var(--hb-kin), 0 0 0 3px var(--hb-ink-0); }
  .hb-deck__name { font-weight: 700; }
  .hb-deck__meta { color: var(--hb-text-3); font-size: var(--hb-fs-12); }

  /* ------------------------------------------------------------------ the DR title cartouche (題箋): vermilion, a gold
     double rule, vertical ink mincho. The home hero's ホロビート; big moments. */
  .hb-cartouche { position: relative; flex: none; display: flex; justify-content: center; width: 76px; padding: 16px 0; background-color: var(--hb-shu);
    box-shadow: inset 0 0 0 2px var(--hb-kin), inset 0 0 0 5px var(--hb-shu), inset 0 0 0 6px var(--hb-kin-hi), 0 14px 30px rgba(0,0,0,.6); }
  .hb-cartouche__jp { writing-mode: vertical-rl; color: #fff8ec; font: 800 40px/1 var(--hb-font-display); letter-spacing: .08em; text-shadow: 0 2px 0 rgba(80,10,0,.45); }
  .hb-cartouche__en { position: absolute; right: -20px; top: 18px; writing-mode: vertical-rl; color: var(--hb-kin-text); font: 700 10px/1 var(--hb-font-ui); letter-spacing: .5em; }
}

@layer hb-phone {
  @media (pointer: coarse) {
    .hb-btn { height: 40px; }
    .hb-btn--sm { height: 34px; }
    .hb-btn--icon { width: 40px; }
    .hb-btn--icon.hb-btn--sm { width: 34px; }
    .hb-dd { height: 40px; }
  }
  @media (max-width: 600px) {
    .hb-toasts { left: 12px; right: 12px; width: auto; align-items: center; bottom: calc(var(--hb-toast-b, var(--hb-tabbar-h)) + 10px + var(--hb-safe-b)); }
    .hb-toast { width: 100%; max-width: 340px; }
    /* windows become bottom sheets: no rods, no brocade, the page slides up */
    .hb-scrim { place-items: end stretch; padding: 0; }
    .hb-window, .hb-window--sm, .hb-window--lg, .hb-window--xl { width: 100%; max-height: 92dvh; }
    .hb-window__rod { display: none; }
    .hb-window__brocade { padding: 0; border: 0; background: none; }
    .hb-window__page { border-radius: var(--hb-r-sheet) var(--hb-r-sheet) 0 0; border-width: 1px 0 0; padding-bottom: var(--hb-safe-b); }
    .hb-window__head { padding-top: 18px; }
    .hb-sheet__grab { display: block; position: absolute; top: 6px; left: 50%; z-index: 2; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--hb-line-3); }
    .hb-window__foot > .hb-btn { flex: 1 1 auto; }
    .hb-window__foot > .hb-spacer { display: none; }
    .hb-scrim.is-sheet { padding: 0; }
    .hb-setrow { flex-wrap: wrap; gap: 6px 12px; }
    .hb-setrow__ctl .hb-range { width: auto; flex: 1 1 120px; }
    .hb-setrow__ctl:has(.hb-range) { flex: 1 1 100%; }
    .hb-setrow__ctl:not(:has(.hb-range)) { margin-left: auto; }
    .hb-cartouche { width: 50px; padding: 12px 0; }
    .hb-cartouche__jp { font-size: 26px; }
    .hb-cartouche__en { display: none; }
  }
}

/* A NAME's figures are card numerals too (owner, 2026-11-11: "names should use card numerals too"): card names, deck
   names, player names ("AI 1"), printing codes and the rules' version are drawn in their own font, whose first family
   is HB Num. Only the line that sits INSIDE the card text box has to say so: the box's own font is the plain text font
   (printed rules text and flavor stay plain). */
@layer hb-type {
  .hb-cardtext__foot, .hb-cardtext__foot > * { font-family: var(--hb-font-ui); }
}