@ntmats/hc-ui 0.3.0 → 0.4.0

package/dist/styles.css

@@ -1441,3 +1441,1202 @@
   font-size: var(--hc-font-size-2xs);
 }
 [data-hc-ds] .hc-ui-command-palette__footer .hc-ui-command-palette__kbd { margin-right: 2px; }
+
+/* ==========================================================================
+   HeroClix game pieces — HCUI's src/heroclix-ui, as it is. Colors that stay the
+   same in both themes (the dial paper, the dark outlines, the translucent rings
+   of the symbols) are HeroClix tokens; black symbols turn white or gray through
+   the `filter-symbol-*` tokens.
+   ========================================================================== */
+
+/* Border-box sizing, as HCUI's global rule, inside every piece. */
+[data-hc-ds] :is(.hc-ui-mini-dial, .hc-ui-power-icon, .hc-ui-special-icon, .hc-ui-equipment-icon, .hc-ui-combat-dial),
+[data-hc-ds] :is(.hc-ui-mini-dial, .hc-ui-power-icon, .hc-ui-special-icon, .hc-ui-equipment-icon, .hc-ui-combat-dial) :is(*, ::before, ::after),
+[data-hc-ds] .hc-ui-combat-dial::before,
+[data-hc-ds] .hc-ui-combat-dial::after { box-sizing: border-box; }
+
+/* MiniDialView — HCUI `.mini-dial`. The cell size is `--hc-mini-dial-cell` (7px),
+   set on the dial or any ancestor; the top margin has zero specificity. */
+:where([data-hc-ds] .hc-ui-mini-dial) { margin-top: 5px; }
+[data-hc-ds] .hc-ui-mini-dial {
+  display: grid;
+  grid-auto-rows: var(--hc-mini-dial-cell, 7px);
+  gap: 1px;
+  width: fit-content;
+  max-width: 100%;
+  padding: 2px;
+  overflow: hidden;
+  border-radius: 3px;
+  background-color: var(--hc-color-bg-muted);
+}
+[data-hc-ds] .hc-ui-mini-dial__cell { display: block; border-radius: 1.5px; }
+/* In play: past clicks fade and the current one is outlined. */
+[data-hc-ds] .hc-ui-mini-dial__cell[data-past] { opacity: .22; }
+[data-hc-ds] .hc-ui-mini-dial__cell[data-round] { border-radius: 50%; }
+[data-hc-ds] .hc-ui-mini-dial__cell[data-now] { outline: 1.5px solid var(--hc-color-danger); }
+/* No power: the paper. Special power: the paper with a dark 1px ring (thicker
+   rings swallow the paper in 5–7px cells). Both themes. */
+[data-hc-ds] .hc-ui-mini-dial__cell[data-empty] { background-color: var(--hc-color-dial-paper); }
+[data-hc-ds] .hc-ui-mini-dial__cell[data-special] {
+  background-color: var(--hc-color-dial-paper);
+  box-shadow: inset 0 0 0 1px var(--hc-color-dial-outline);
+}
+
+/* PowerIconView and StatGlyphView — HCUI `.power-icon` and `.stat-glyph`. */
+[data-hc-ds] .hc-ui-power-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--hc-radius-full);
+  box-shadow: inset 0 0 0 1px var(--hc-color-symbol-outline);
+}
+[data-hc-ds] .hc-ui-power-icon__glyph {
+  display: block;
+  width: 60%;
+  height: 60%;
+  object-fit: contain;
+}
+/* The symbol is black; inverted it turns white, for contrast on dark colors. */
+[data-hc-ds] .hc-ui-power-icon__glyph[data-invert] { filter: var(--hc-filter-symbol-light); }
+/* The black symbol turns neutral gray (dial legend). */
+[data-hc-ds] .hc-ui-stat-glyph {
+  display: inline-block;
+  flex-shrink: 0;
+  object-fit: contain;
+  filter: var(--hc-filter-symbol-muted);
+}
+
+/* SpecialIconView — HCUI `.sp-icon`. */
+[data-hc-ds] .hc-ui-special-icon {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1px solid var(--hc-color-symbol-outline-strong);
+}
+[data-hc-ds] :is(.hc-ui-special-icon__bg, .hc-ui-special-icon__glyph) {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+/* Keeps the circle's edge visible even on white. */
+[data-hc-ds] .hc-ui-special-icon__bg {
+  border-radius: var(--hc-radius-full);
+  box-shadow: inset 0 0 0 1.5px var(--hc-color-symbol-outline-soft);
+}
+[data-hc-ds] .hc-ui-special-icon__glyph { padding: 22%; }
+
+/* EquipmentIcon — HCUI `.equip-icon`: a white diamond on the purple power. */
+[data-hc-ds] .hc-ui-equipment-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--hc-radius-full);
+  background-color: var(--hc-power-purple);
+  box-shadow: inset 0 0 0 1px var(--hc-color-symbol-outline);
+}
+[data-hc-ds] .hc-ui-equipment-icon path { fill: var(--hc-color-symbol-light); }
+
+/* AvatarView — HCUI `img.avatar-os`, `img.avatar-sq`, `img.avatar-sq--fit` and
+   `img.default-avatar--fallback`. Without `size` the caller's class sizes and crops
+   it (the defaults below have zero specificity); the shapes win over that class. */
+:where([data-hc-ds] .hc-ui-avatar) { display: block; box-sizing: border-box; max-width: 100%; }
+[data-hc-ds] .hc-ui-avatar[data-sized] {
+  width: var(--hc-avatar-size);
+  height: var(--hc-avatar-size);
+  object-fit: cover;
+}
+[data-hc-ds] .hc-ui-avatar[data-sized][data-shape='round'] { border-radius: 50%; }
+/* One-shot: the landscape proportion of the search (avatar width, height ÷ 1.42, proportional corners). */
+[data-hc-ds] .hc-ui-avatar[data-shape='card'] {
+  height: auto;
+  aspect-ratio: 1.42 / 1;
+  border-radius: 13.6% / 19.4%;
+  object-fit: cover;
+}
+/* Maps fill the square; terrain markers show whole, fitted by width or height. */
+[data-hc-ds] .hc-ui-avatar:is([data-shape='square'], [data-shape='square-fit']) {
+  aspect-ratio: 1 / 1;
+  border-radius: 21%;
+  object-fit: cover;
+}
+[data-hc-ds] .hc-ui-avatar[data-shape='square-fit'] { object-fit: contain; background-color: var(--hc-color-bg-muted); }
+[data-hc-ds] .hc-ui-avatar[data-fallback] { background-color: var(--hc-color-bg-muted); }
+
+/* CombatDialView — HCUI `.combat-dial`. `--hc-dial-bleed` (and `--hc-dial-bleed-end`)
+   is the container's padding, so the tracks run to the panel's edge;
+   `--hc-dial-surface` is the fill behind the sticky legend. */
+[data-hc-ds] .hc-ui-combat-dial,
+[data-hc-ds] .hc-ui-combat-dial * { font-variation-settings: 'ROND' var(--hc-rond); }
+[data-hc-ds] .hc-ui-combat-dial__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hc-space-3);
+}
+[data-hc-ds] .hc-ui-combat-dial__header-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--hc-space-3);
+}
+/* HCUI's `eyebrow`. */
+[data-hc-ds] :is(.hc-ui-combat-dial__label, .hc-ui-combat-dial__status) {
+  font-family: var(--hc-font-display);
+  font-weight: 620;
+  font-stretch: 125%;
+  font-size: var(--hc-font-size-2xs);
+  line-height: var(--hc-line-height-xs);
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+[data-hc-ds] .hc-ui-combat-dial__label { color: var(--hc-color-text-muted); letter-spacing: var(--hc-letter-spacing-wide); }
+[data-hc-ds] .hc-ui-combat-dial__status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hc-space-2);
+  font-weight: var(--hc-font-weight-semibold);
+  color: var(--hc-color-text-secondary);
+}
+[data-hc-ds] .hc-ui-combat-dial__status-ko { color: var(--hc-color-danger); }
+
+/* Point value chips, on one line that scrolls sideways. */
+[data-hc-ds] .hc-ui-combat-dial__points {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--hc-space-2);
+  margin-inline: calc(var(--hc-dial-bleed, 0px) * -1) calc(var(--hc-dial-bleed-end, var(--hc-dial-bleed, 0px)) * -1);
+  padding: var(--hc-space-2) 0;
+  /* Condensed as HCUI's numbers (its `__points` rule); the chips inherit it. */
+  font-stretch: 86%;
+  -webkit-overflow-scrolling: touch;
+}
+[data-hc-ds] .hc-ui-combat-dial__points > .hc-ui-combat-dial__chip:first-child { margin-left: var(--hc-dial-bleed, 0px); }
+[data-hc-ds] .hc-ui-combat-dial__points > .hc-ui-combat-dial__chip:last-child { margin-right: var(--hc-dial-bleed-end, var(--hc-dial-bleed, 0px)); }
+[data-hc-ds] .hc-ui-combat-dial__chip {
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hc-space-2);
+  min-height: var(--hc-control-height-chip);
+  margin: 0;
+  padding: 0 14px;
+  border: none;
+  border-radius: var(--hc-radius-full);
+  background-color: var(--hc-color-bg-surface);
+  color: var(--hc-color-text-primary);
+  font: inherit;
+  font-family: var(--hc-font-body);
+  font-weight: var(--hc-font-weight-semibold);
+  font-size: var(--hc-font-size-sm);
+  font-variation-settings: 'ROND' var(--hc-rond);
+  white-space: nowrap;
+  box-shadow: inset 0 0 0 1px var(--hc-color-border-strong);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition-property: transform, background-color, box-shadow, color, opacity;
+  transition-duration: var(--hc-dur-short);
+  transition-timing-function: var(--hc-ease-standard);
+}
+/* HCUI's state layer: a veil of the text color on hover (with a mouse) and press. */
+[data-hc-ds] .hc-ui-combat-dial__chip::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--hc-dur-short) var(--hc-ease-standard);
+}
+@media (hover: hover) {
+  [data-hc-ds] .hc-ui-combat-dial__chip:hover:not(:disabled)::after { opacity: 0.05; }
+}
+[data-hc-ds] .hc-ui-combat-dial__chip:active:not(:disabled)::after { opacity: 0.09; }
+[data-hc-ds] .hc-ui-combat-dial__chip:hover:not(:disabled) { background-color: var(--hc-color-bg-muted); }
+[data-hc-ds] .hc-ui-combat-dial__chip:active:not(:disabled) { transform: scale(0.97); }
+[data-hc-ds] .hc-ui-combat-dial__chip:disabled { cursor: default; opacity: 0.75; }
+[data-hc-ds] .hc-ui-combat-dial__chip[aria-pressed='true'] {
+  background-color: var(--hc-color-bg-muted);
+  box-shadow: inset 0 0 0 1.5px var(--hc-dial-chip-color, var(--hc-color-success));
+}
+[data-hc-ds] .hc-ui-combat-dial__chip-bar {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 2px;
+  height: 16px;
+  border-radius: var(--hc-radius-full);
+  background-color: var(--hc-dial-chip-color, var(--hc-color-success));
+}
+[data-hc-ds] :is(.hc-ui-combat-dial__chip-value, .hc-ui-combat-dial__chip-clicks) { color: inherit; font-size: var(--hc-font-size-sm); }
+[data-hc-ds] .hc-ui-combat-dial__chip-clicks { opacity: 0.8; }
+[data-hc-ds] .hc-ui-combat-dial__chip[aria-pressed='true'] .hc-ui-combat-dial__chip-clicks { opacity: 0.92; }
+[data-hc-ds] .hc-ui-combat-dial__chip[aria-pressed='true'] .hc-ui-combat-dial__chip-value { color: var(--hc-color-text-primary); }
+
+/* The dial track: one row that scrolls sideways (hidden scrollbar). */
+[data-hc-ds] .hc-ui-combat-dial__grid-wrap {
+  position: relative;
+  margin-inline: calc(var(--hc-dial-bleed, 0px) * -1) calc(var(--hc-dial-bleed-end, var(--hc-dial-bleed, 0px)) * -1);
+  padding: var(--hc-space-4) 0;
+}
+[data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap) { overflow-x: auto; scrollbar-width: none; }
+[data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap)::-webkit-scrollbar { display: none; }
+/* With a mouse on HCUI's desktop (960px and up) the tracks show a thin 8px bar,
+   whose thumb appears while the pointer is over the track or focus is inside it;
+   the negative margin gives the bar's height back to the layout. */
+@media (min-width: 960px) and (hover: hover) and (forced-colors: none) {
+  [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap) {
+    overflow: scroll hidden;
+    margin-block-end: -8px;
+    scrollbar-width: auto;
+  }
+  [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap)::-webkit-scrollbar { display: block; width: 8px; height: 8px; }
+  [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap)::-webkit-scrollbar-track { margin: var(--hc-space-3); background: transparent; }
+  [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap)::-webkit-scrollbar-thumb {
+    min-width: var(--hc-space-8);
+    border: 2px solid transparent;
+    border-radius: var(--hc-radius-full);
+    background: transparent padding-box;
+  }
+  [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap):is(:hover, :has(:focus-visible))::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, var(--hc-color-text-primary) 26%, transparent);
+  }
+  [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap)::-webkit-scrollbar-thumb:is(:hover, :active) {
+    border-width: 1px;
+    background-color: color-mix(in srgb, var(--hc-color-text-primary) 46%, transparent);
+  }
+  /* Without ::-webkit-scrollbar (Firefox) the system's thin bar takes no room to give back. */
+  @supports not selector(::-webkit-scrollbar) {
+    [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap) {
+      margin-block-end: 0;
+      scrollbar-width: thin;
+      scrollbar-color: transparent transparent;
+    }
+    [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap):is(:hover, :has(:focus-visible)) {
+      scrollbar-color: color-mix(in srgb, var(--hc-color-text-primary) 26%, transparent) transparent;
+    }
+  }
+}
+[data-hc-ds] .hc-ui-combat-dial__grid {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  min-width: max-content;
+  padding-right: var(--hc-dial-bleed-end, var(--hc-dial-bleed, 0px));
+}
+[data-hc-ds] .hc-ui-combat-dial__col {
+  position: relative;
+  display: grid;
+  grid-template-rows: repeat(5, 40px);
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition: transform var(--hc-transition-fast), box-shadow var(--hc-transition-fast);
+}
+/* The legend stays put and covers the bleed: nothing shows to its left. */
+[data-hc-ds] .hc-ui-combat-dial__col[data-kind='legend'] {
+  position: sticky;
+  left: 0;
+  z-index: 4;
+  padding-left: var(--hc-dial-bleed, 0px);
+  padding-right: var(--hc-space-2);
+  color: var(--hc-color-text-secondary);
+  background: var(--hc-dial-surface, var(--hc-color-bg-surface));
+}
+[data-hc-ds] .hc-ui-combat-dial__col[data-kind='click']:hover { background-color: var(--hc-color-bg-muted-2); }
+/* Clicks outside the selected point value fade. */
+[data-hc-ds] .hc-ui-combat-dial__col[data-dimmed] { opacity: 0.32; filter: saturate(0.7); }
+/* Starting line: a colored bar at the left edge of the point value's first click. */
+[data-hc-ds] .hc-ui-combat-dial__col[data-start]::before {
+  content: '';
+  position: absolute;
+  top: 48px;
+  bottom: 0;
+  left: -5px;
+  width: 2px;
+  border-radius: 2px;
+  background-color: var(--hc-dial-start-color, var(--hc-color-success));
+}
+[data-hc-ds] .hc-ui-combat-dial__col[data-current] {
+  background-color: var(--hc-color-bg-muted-2);
+  box-shadow: inset 0 3px 0 0 var(--hc-color-accent);
+}
+[data-hc-ds] .hc-ui-combat-dial__col[data-kind='ko'] { color: var(--hc-color-danger); }
+[data-hc-ds] .hc-ui-combat-dial[data-static] .hc-ui-combat-dial__col[data-kind='click'] { cursor: default; }
+[data-hc-ds] .hc-ui-combat-dial__cell {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 2px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+[data-hc-ds] .hc-ui-combat-dial__cell:focus-visible {
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, 2px);
+}
+[data-hc-ds] .hc-ui-combat-dial__cell[data-round] { border-radius: 50%; }
+[data-hc-ds] .hc-ui-combat-dial__cell[data-kind='legend'] { color: var(--hc-color-text-secondary); }
+/* HCUI's `mono-value`. */
+[data-hc-ds] :is(.hc-ui-combat-dial__cell:is([data-kind='number'], [data-kind='value']), .hc-ui-combat-dial__range) {
+  font-family: var(--hc-font-display);
+  font-weight: 640;
+  font-stretch: 86%;
+  font-variant-numeric: tabular-nums;
+}
+[data-hc-ds] .hc-ui-combat-dial__cell[data-kind='number'] { font-size: var(--hc-font-size-sm); color: var(--hc-color-text-muted); }
+[data-hc-ds] .hc-ui-combat-dial__col[data-current] .hc-ui-combat-dial__cell[data-kind='number'] { color: var(--hc-color-text-primary); font-weight: var(--hc-font-weight-bold); }
+[data-hc-ds] .hc-ui-combat-dial__cell[data-kind='value'] {
+  font-size: var(--hc-font-size-md);
+  font-weight: var(--hc-font-weight-bold);
+  color: var(--hc-color-text-primary);
+  background-color: transparent;
+}
+/* Special powers: a dark outline, as on the printed card. The cell is the paper in
+   both themes, so the fixed outline shows in light and dark. */
+[data-hc-ds] .hc-ui-combat-dial__cell[data-outlined] { box-shadow: inset 0 0 0 2px var(--hc-color-dial-outline); }
+[data-hc-ds] .hc-ui-combat-dial__cell[data-kind='ko'] {
+  font-family: var(--hc-font-display);
+  font-weight: 620;
+  font-stretch: 125%;
+  font-size: var(--hc-font-size-sm);
+  line-height: var(--hc-line-height-xs);
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--hc-color-danger);
+}
+/* Cells with a tip grow their hit area by half the gap on each side (about 48px),
+   without changing their 40px look; neighbors split the gap. */
+[data-hc-ds] .hc-ui-combat-dial__cell[data-tip] { position: relative; cursor: pointer; }
+[data-hc-ds] .hc-ui-combat-dial__cell[data-tip]::after { content: ''; position: absolute; inset: -4px; }
+[data-hc-ds] .hc-ui-combat-dial__special-icon { width: 20px; height: 20px; object-fit: contain; }
+/* Range (number) and targets (bolts) in the top legend cell. */
+[data-hc-ds] .hc-ui-combat-dial__rangebox { flex-direction: column; gap: 1px; }
+[data-hc-ds] .hc-ui-combat-dial__range { font-size: var(--hc-font-size-md); line-height: 1; color: var(--hc-color-text-primary); }
+[data-hc-ds] .hc-ui-combat-dial__bolts { display: inline-flex; align-items: center; gap: 2px; }
+/* `max-width` lets the bolts squeeze into the printed card's 28px legend, as in HCUI. */
+[data-hc-ds] .hc-ui-combat-dial__bolt { width: auto; max-width: 100%; height: 16px; object-fit: contain; filter: var(--hc-filter-symbol-muted); }
+
+/* `presentation="printed"`: the physical card's dial, at HCUnits' measures (20px
+   cells, 23px between clicks, 24px between rows); the white legend sits on the
+   card's dark window. Its numbers keep HCUI's `font` shorthand, without ROND. */
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__grid-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-block-end: 0;
+  padding: 0;
+  overflow: visible;
+}
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__grid { gap: 3px; min-width: 0; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col { grid-template-rows: repeat(5, 20px); gap: 4px; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-kind='click']:hover { background: none; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-kind='legend'] {
+  position: static;
+  width: 28px;
+  padding: 0;
+  background: none;
+  color: var(--hc-color-dial-legend-printed);
+}
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-start]::before { top: 22px; bottom: -2px; left: -2px; width: 2px; border-radius: 0; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-current] { background: none; box-shadow: none; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-dimmed] { opacity: .45; filter: none; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell { width: 20px; height: 20px; border-radius: 0; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-round] { border-radius: 50%; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-kind='legend'] .hc-ui-combat-dial__cell { width: 28px; color: var(--hc-color-dial-legend-printed); }
+/* Condensed, so two digits fit the 20px cell; no tracking, so they stay centered. */
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-kind='value'] {
+  font: 600 17px/1 var(--hc-font-body);
+  font-stretch: 50%;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-outlined] { box-shadow: inset 0 0 0 2px var(--hc-color-dial-outline-printed); }
+/* Top numbers and KO in red with a paper outline, as on the card. */
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell:is([data-kind='number'], [data-kind='ko']) {
+  color: var(--hc-color-dial-number-printed);
+  background: none;
+  -webkit-text-stroke: 3px var(--hc-color-dial-paper);
+  paint-order: stroke fill;
+  font-family: var(--hc-font-body);
+  font-stretch: 75%;
+}
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-kind='number'] { font-size: 16px; font-weight: 800; font-stretch: 62%; letter-spacing: 0; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-kind='ko'] { font-size: 15px; font-weight: 800; letter-spacing: -1px; text-transform: uppercase; }
+/* Only play marks the click: a red circle over the number, like a pen on the card. */
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-current] .hc-ui-combat-dial__cell[data-kind='number'] {
+  color: var(--hc-color-dial-number-printed);
+  background: var(--hc-color-dial-paper);
+  -webkit-text-stroke: 0;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--hc-color-dial-number-printed);
+}
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-tip]::after { inset: -2px -1.5px; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__rangebox { flex-direction: row; gap: 0; align-items: center; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__range { margin-right: 2px; color: var(--hc-color-dial-legend-printed); font: 300 14px/1 var(--hc-font-body); }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__bolt { height: 14px; margin-right: -1px; filter: var(--hc-filter-symbol-light); }
+/* The legend symbols are 18px tall at their own width, at most 26px, and white. */
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-kind='legend'] .hc-ui-stat-glyph {
+  width: auto;
+  max-width: 26px;
+  height: 18px;
+  filter: var(--hc-filter-symbol-light);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-hc-ds] :is(.hc-ui-combat-dial__chip, .hc-ui-combat-dial__chip::after, .hc-ui-combat-dial__col) { transition: none; }
+  [data-hc-ds] .hc-ui-combat-dial__chip:active:not(:disabled) { transform: none; }
+}
+
+/* PhysicalCardView — HCUI `.physical-cards`: the printed card in HCUnits' format,
+   375×525 px with absolute positions, scaled to the panel's width. HCUI's fonts
+   (Google Sans Flex, condensed in the titles) with the original card's sizes and
+   positions. The paper and ink follow the theme (`color-card-*`, `filter-card-*`,
+   `blend-card-*`, `opacity-card-*`); seals, dial cells and symbols keep their
+   official colors; the black and white printed parts are the same in both themes. */
+[data-hc-ds] .hc-ui-physical-cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  width: 100%;
+  min-width: 0;
+  grid-column: 1 / -1;
+}
+/* HCUI's global rules the card counts on, inside the card only and at zero
+   specificity: border-box, block images and SVGs that never pass their box, no
+   heading or paragraph margin, words that break only when they overflow, the
+   slightly condensed titles. Upright letters, as on the printed card: the card
+   sets `--hc-rond` to 0, so the printed dial inside reads it too. */
+[data-hc-ds] :is(.hc-ui-physical-cards, .hc-ui-card-focus),
+[data-hc-ds] :is(.hc-ui-physical-cards, .hc-ui-card-focus) *,
+[data-hc-ds] :is(.hc-ui-physical-cards, .hc-ui-card-focus) *::before,
+[data-hc-ds] :is(.hc-ui-physical-cards, .hc-ui-card-focus) *::after { box-sizing: border-box; }
+:where([data-hc-ds] .hc-ui-physical-card) :is(img, svg) { display: block; max-width: 100%; }
+:where([data-hc-ds] .hc-ui-physical-card) :is(h2, h3, p) { margin: 0; }
+:where([data-hc-ds] .hc-ui-physical-card) :is(p, span, h2, h3) { overflow-wrap: break-word; }
+:where([data-hc-ds] .hc-ui-physical-card) :is(h2, h3, .hc-ui-physical-card__title, .hc-ui-physical-card__bystander-name) { font-stretch: 92%; }
+[data-hc-ds] .hc-ui-physical-card { --hc-rond: 0; }
+[data-hc-ds] .hc-ui-physical-card,
+[data-hc-ds] .hc-ui-physical-card * { font-variation-settings: 'ROND' var(--hc-rond); }
+
+[data-hc-ds] .hc-ui-physical-card-slot {
+  flex: none;
+  width: calc(var(--hc-card-width) * var(--hc-card-scale));
+  height: calc(var(--hc-card-height) * var(--hc-card-scale));
+}
+[data-hc-ds] .hc-ui-physical-card-tilt { width: 100%; height: 100%; }
+[data-hc-ds] .hc-ui-physical-card {
+  position: relative;
+  width: var(--hc-card-width);
+  height: var(--hc-card-height);
+  overflow: hidden;
+  transform: scale(var(--hc-card-scale));
+  transform-origin: top left;
+  border-radius: 15px;
+  background: var(--hc-color-card-paper);
+  box-shadow: var(--hc-color-card-edge) 0 0 2px;
+  color: var(--hc-color-card-ink);
+  font-family: var(--hc-font-body);
+  text-align: left;
+  user-select: text;
+}
+[data-hc-ds] .hc-ui-physical-card img { user-select: none; }
+/* Paper grain: gray noise in tiles, static, no blur. Under the dial (z-index 2),
+   so the official cell colors do not change. The SVG namespace is percent-encoded:
+   the package source carries no web address. */
+[data-hc-ds] .hc-ui-physical-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
+  opacity: var(--hc-opacity-card-grain);
+  mix-blend-mode: var(--hc-blend-card-grain);
+}
+/* The backgrounds come from the app, as gray images: the filter takes them to the
+   paper's tone in each theme, with no seam where the image ends. */
+[data-hc-ds] :is(.hc-ui-physical-card__bg, .hc-ui-physical-card__legacy, .hc-ui-physical-card__rarity, .hc-ui-physical-card__dial-bg) { position: absolute; left: 0; pointer-events: none; }
+[data-hc-ds] .hc-ui-physical-card__bg[data-side='front'] { top: 0; width: 375px; filter: var(--hc-filter-card-background); }
+[data-hc-ds] .hc-ui-physical-card__bg[data-side='back'] { bottom: 75px; width: 375px; filter: var(--hc-filter-card-background); }
+[data-hc-ds] .hc-ui-physical-card__legacy { top: 0; width: 375px; opacity: 0.2; filter: saturate(0.6); }
+[data-hc-ds] .hc-ui-physical-card__rarity { left: auto; right: 0; top: 0; width: 80px; }
+[data-hc-ds] .hc-ui-physical-card__dial-bg { bottom: 0; width: 100%; filter: var(--hc-filter-card-background); }
+[data-hc-ds] .hc-ui-physical-card__team-up { position: absolute; inset: 0 0 auto; height: 70px; background: var(--hc-color-card-team-up); }
+
+/* Header: name and team abilities, with the keywords or the object's type below. */
+[data-hc-ds] .hc-ui-physical-card__header { position: absolute; left: 10px; top: 2px; width: 305px; }
+[data-hc-ds] .hc-ui-physical-card__header[data-team-up] { --hc-color-card-ink: var(--hc-color-card-print-white); }
+[data-hc-ds] .hc-ui-physical-card__title { display: flex; align-items: center; height: 30px; overflow: hidden; white-space: nowrap; color: var(--hc-color-card-ink); }
+[data-hc-ds] .hc-ui-physical-card h2 {
+  margin: 0 5px 0 0;
+  font-family: var(--hc-font-display);
+  font-weight: 900;
+  font-stretch: 40%;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: 0.2px;
+  color: inherit;
+  white-space: nowrap;
+}
+[data-hc-ds] .hc-ui-physical-card__ability {
+  appearance: none;
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  margin: 0 0 0 1px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--hc-color-card-print-black);
+  color: var(--hc-color-card-print-white);
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+/* A hit area larger than the 20px symbol. */
+[data-hc-ds] .hc-ui-physical-card__ability::after { content: ''; position: absolute; inset: -6px -1px; }
+[data-hc-ds] .hc-ui-physical-card__ability img { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; }
+[data-hc-ds] .hc-ui-physical-card__gear { width: 20px; height: 20px; margin-left: 1px; }
+[data-hc-ds] .hc-ui-physical-card__header-line {
+  position: absolute;
+  top: 26px;
+  left: 0;
+  display: flex;
+  align-items: center;
+  width: 305px;
+  height: 32px;
+  margin: 0;
+  color: var(--hc-color-card-ink);
+  line-height: 1;
+  /* Slanted by the font's axis: less than the italic the browser would fake. */
+  font-variation-settings: 'ROND' var(--hc-rond), 'slnt' -7;
+  font-weight: 600;
+}
+[data-hc-ds] .hc-ui-physical-card__header-line[data-kind='keywords'] { font-size: 12px; font-weight: 500; font-stretch: 80%; }
+[data-hc-ds] .hc-ui-physical-card__header-line[data-kind='type'] { font-size: 16px; font-stretch: 70%; }
+
+/* Collection number and set symbol over the rarity seal. */
+[data-hc-ds] .hc-ui-physical-card__collection {
+  position: absolute;
+  top: 15px;
+  right: 3px;
+  width: 65px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+[data-hc-ds] .hc-ui-physical-card__collection strong {
+  font: 800 20px/1 var(--hc-font-display);
+  font-stretch: 62%;
+  min-height: 19px;
+  color: var(--hc-color-card-print-white);
+  -webkit-text-stroke: 3px var(--hc-color-card-print-black);
+  paint-order: stroke fill;
+}
+[data-hc-ds] .hc-ui-physical-card__set { width: 34px; height: 34px; object-fit: contain; }
+[data-hc-ds] .hc-ui-physical-card__dimensions {
+  position: absolute;
+  top: 85px;
+  right: 5px;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background: var(--hc-color-card-print-black);
+  color: var(--hc-color-card-print-white);
+  font-size: 11px;
+}
+[data-hc-ds] .hc-ui-physical-card__dimensions[data-oval] { width: 28px; height: 18px; border-radius: 9px; }
+
+/* Text columns: the front (its height follows the dial) and the back's two. */
+[data-hc-ds] .hc-ui-physical-card__table {
+  position: absolute;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--hc-color-card-ink-soft);
+}
+[data-hc-ds] .hc-ui-physical-card__table[data-column='front'] { left: 5px; right: 5px; top: 75px; height: var(--hc-card-front-table-height); }
+[data-hc-ds] .hc-ui-physical-card__table:is([data-column='left'], [data-column='right']) { top: 10px; width: 49%; height: var(--hc-card-back-table-height); }
+[data-hc-ds] .hc-ui-physical-card__table[data-column='left'] { left: 5px; }
+[data-hc-ds] .hc-ui-physical-card__table[data-column='right'] { right: 3px; }
+
+/* The portrait (the app's image, with this class) or the object's token. */
+[data-hc-ds] .hc-ui-physical-card__token {
+  float: right;
+  display: block;
+  width: 150px;
+  height: 150px;
+  margin: 10px 0 5px 5px;
+  shape-outside: circle();
+  border-radius: 50%;
+  object-fit: cover;
+  overflow: hidden;
+  background: var(--hc-color-card-token-placeholder);
+}
+[data-hc-ds] .hc-ui-physical-card__table[data-small-token] .hc-ui-physical-card__token { width: 134px; height: 134px; }
+[data-hc-ds] .hc-ui-physical-card__token img { width: 100%; height: 100%; object-fit: cover; }
+/* Objects: a ring in the color of the object's size. */
+[data-hc-ds] .hc-ui-physical-card__token[data-object] img { border-radius: 50%; outline: 8px solid var(--hc-card-object-color, transparent); outline-offset: -8px; }
+
+/* Bystander: a replica of the 195px physical token (HCUnits' `largeCardBystander*`
+   and `smallCard*`). The token has its own colors and does not follow the theme. */
+[data-hc-ds] .hc-ui-physical-card__bystander { display: flex; justify-content: center; }
+[data-hc-ds] .hc-ui-physical-card__bystander-token { position: relative; flex: none; width: 195px; height: 195px; color: var(--hc-color-card-print-white); }
+[data-hc-ds] .hc-ui-physical-card__bystander-clip { position: relative; width: 195px; height: 195px; border-radius: 50%; overflow: hidden; }
+[data-hc-ds] .hc-ui-physical-card__bystander-art {
+  position: absolute;
+  inset: 0;
+  border: 7px solid var(--hc-color-card-print-black);
+  border-radius: 50%;
+  background: var(--hc-color-card-print-black);
+  overflow: hidden;
+}
+/* The art's window: a gray cut-out to the right of the dial's stripe. */
+[data-hc-ds] .hc-ui-physical-card__bystander-window {
+  position: absolute;
+  left: 30px;
+  top: 40px;
+  right: 0;
+  bottom: 16px;
+  background: var(--hc-color-card-token-placeholder);
+  overflow: hidden;
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-window img { position: absolute; left: -35px; top: -45px; width: 195px; max-width: none; height: 195px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-stripe {
+  position: absolute;
+  left: 23px;
+  top: 46px;
+  width: 72px;
+  height: 126px;
+  border: 5px solid var(--hc-color-card-print-black);
+  border-left: 0;
+  border-radius: 0 15px 20px 0;
+  background: var(--hc-color-card-print-white);
+  transform: skew(15deg);
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-symbols { position: absolute; left: 7px; top: 47px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab {
+  position: absolute;
+  top: 0;
+  height: 24px;
+  border-radius: 0 10px 12px 0 / 0 12px 12px 0;
+  background: var(--hc-color-card-print-black);
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-tab img { position: absolute; right: 7px; top: 2px; width: 18px; height: 18px; filter: var(--hc-filter-symbol-light); }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='range'] { width: 73px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='speed'] { width: 35px; top: 24px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='attack'] { width: 43px; top: 48px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='defense'] { width: 51px; top: 72px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='damage'] { width: 59px; top: 96px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='range'] span { position: absolute; right: 58px; top: 4px; font: 300 11px/1.2 var(--hc-font-body); }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='range'] img.hc-ui-physical-card__bystander-bolt { right: auto; top: 6px; width: 6px; height: 12px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-name {
+  position: absolute;
+  left: 45px;
+  top: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 105px;
+  height: 45px;
+  font: 500 13px/1 var(--hc-font-body);
+  font-stretch: 80%;
+  text-align: center;
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-abilities {
+  position: absolute;
+  top: 50px;
+  left: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+  width: 48px;
+  height: 20px;
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-abilities .hc-ui-physical-card__ability { width: 14px; height: 14px; margin: 0; background: none; }
+[data-hc-ds] .hc-ui-physical-card__bystander-abilities .hc-ui-physical-card__ability img { top: 0; left: 0; width: 14px; height: 14px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-abilities .hc-ui-physical-card__ability svg { display: none; }
+[data-hc-ds] .hc-ui-physical-card__bystander-trait { width: 18px; height: 18px; margin-top: -3px; filter: var(--hc-filter-symbol-light); }
+[data-hc-ds] .hc-ui-physical-card__bystander-extra {
+  position: absolute;
+  left: 80px;
+  bottom: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  font: 500 14px/1 var(--hc-font-body);
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-extra img { width: 20px; height: 20px; filter: var(--hc-filter-symbol-light); }
+[data-hc-ds] .hc-ui-physical-card__bystander-extra[data-kind='passengers'] img { width: auto; height: auto; margin-right: 5px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-extra[data-kind='construct'] img { width: 18px; height: auto; }
+[data-hc-ds] .hc-ui-physical-card__bystander-improved { position: absolute; left: 97px; top: 97px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-improved > :is(img, button) { position: absolute; width: 18px; height: 18px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-improved-ability {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-improved-ability img { display: block; width: 18px; height: 18px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-dial { position: absolute; left: 48px; top: 72px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-value {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  margin: 2px;
+  padding: 0;
+  /* Without a power color the cell is the white stripe itself (dark theme too). */
+  background-color: var(--hc-color-dial-paper);
+  color: var(--hc-color-card-print-black);
+  /* The card's dial, in proportion to the 18px cell. */
+  font: 600 16px/1 var(--hc-font-body);
+  font-stretch: 50%;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-value[data-special] { box-shadow: inset 0 0 0 2px var(--hc-color-dial-outline-printed); }
+[data-hc-ds] .hc-ui-physical-card__bystander-value[data-tip] {
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+/* A hit area larger than the 18px square. */
+[data-hc-ds] .hc-ui-physical-card__bystander-value[data-tip]::after { content: ''; position: absolute; inset: -3px; }
+[data-hc-ds] :is(.hc-ui-physical-card__ability, .hc-ui-physical-card__bystander-improved-ability, .hc-ui-physical-card__bystander-value[data-tip], .hc-ui-physical-card__improved, .hc-ui-physical-card__point):focus-visible {
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, 2px);
+}
+
+[data-hc-ds] .hc-ui-physical-card__terrain-art { display: block; max-width: min(360px, 100%); max-height: 335px; margin: 5px auto 0; }
+
+/* Rules: tapping the paragraph copies it (`onCopy`). */
+[data-hc-ds] .hc-ui-physical-card__rule { overflow-wrap: anywhere; }
+[data-hc-ds] .hc-ui-physical-card__rule h3 {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  min-height: 22px;
+  margin: 0 0 1px;
+  font: 700 16px/1.1 var(--hc-font-display);
+  font-stretch: 65%;
+  text-transform: uppercase;
+  color: var(--hc-color-card-ink);
+}
+/* As in HCUI's detailed view: without the icon's square border; the symbol's own
+   white circle is the ring, as on HCUnits. */
+[data-hc-ds] .hc-ui-physical-card__rule h3 .hc-ui-special-icon { flex: none; border: none; }
+[data-hc-ds] .hc-ui-physical-card__rule h3 .hc-ui-special-icon__bg { box-shadow: none; }
+[data-hc-ds] .hc-ui-physical-card__rule p { margin: 0 0 2px 5px; white-space: pre-line; }
+/* HCUI's `.copyable`: no selection, a quick fade while pressed. */
+[data-hc-ds] .hc-ui-physical-card__copy {
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity var(--hc-transition-fast);
+}
+[data-hc-ds] .hc-ui-physical-card__copy:active { opacity: 0.6; }
+[data-hc-ds] .hc-ui-physical-card__keyphrase { min-height: 22px; display: flex; align-items: center; font: 700 16px/1.1 var(--hc-font-display); font-stretch: 75%; color: var(--hc-color-card-ink); }
+[data-hc-ds] .hc-ui-physical-card__relic { margin: 0; }
+
+/* Improved abilities right above the dial's window. */
+[data-hc-ds] .hc-ui-physical-card__improved-row { position: absolute; left: 18px; display: flex; gap: 2px; }
+[data-hc-ds] .hc-ui-physical-card__improved-group { display: contents; }
+[data-hc-ds] :is(.hc-ui-physical-card__improved-kind, .hc-ui-physical-card__improved) {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  box-shadow: 0 0 6px 2px var(--hc-color-card-print-white);
+  margin-right: 2px;
+}
+[data-hc-ds] .hc-ui-physical-card__improved {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+[data-hc-ds] .hc-ui-physical-card__improved img { display: block; width: 30px; height: 30px; }
+
+/* Above the shine: the cell colors do not change on hover. */
+[data-hc-ds] .hc-ui-physical-card__dial { position: absolute; left: 10px; bottom: 10px; z-index: 2; }
+[data-hc-ds] .hc-ui-physical-card__shine { display: none; }
+
+/* Points on the black bar right of the dial; pressing one changes the point value. */
+[data-hc-ds] .hc-ui-physical-card__points {
+  position: absolute;
+  right: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-stretch: 86%;
+}
+[data-hc-ds] .hc-ui-physical-card__points[data-table='normal'] { top: 386px; }
+[data-hc-ds] .hc-ui-physical-card__points[data-table='long'] { top: 266px; }
+[data-hc-ds] .hc-ui-physical-card__points[data-table='short'] { bottom: 35px; }
+[data-hc-ds] .hc-ui-physical-card__point {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: 600 18px/23px var(--hc-font-display);
+  font-stretch: 75%;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+[data-hc-ds] .hc-ui-physical-card__point:disabled { cursor: default; opacity: 1; }
+[data-hc-ds] .hc-ui-physical-card__point[data-active] { text-decoration: underline 2px; text-underline-offset: 3px; }
+[data-hc-ds] .hc-ui-physical-card__object-points {
+  position: absolute;
+  left: 15px;
+  bottom: 10px;
+  font: 20px var(--hc-font-mono);
+  color: var(--hc-color-card-print-white);
+  text-shadow: -1px -1px 0 var(--hc-color-card-print-black), 1px -1px 0 var(--hc-color-card-print-black), -1px 1px 0 var(--hc-color-card-print-black), 1px 1px 0 var(--hc-color-card-print-black);
+}
+
+[data-hc-ds] .hc-ui-physical-card__terrain-dial {
+  position: absolute;
+  bottom: 0;
+  left: 94px;
+  display: grid;
+  grid-template-columns: repeat(3, 62px);
+  grid-template-rows: 43px 30px;
+  width: 188px;
+  height: 80px;
+  border-radius: 40px 40px 0 0;
+  background: linear-gradient(to right, var(--hc-color-card-terrain-panel), var(--hc-color-card-terrain-panel) 28%, var(--hc-color-card-terrain-panel-groove) 31%, var(--hc-color-card-terrain-panel) 37%, var(--hc-color-card-terrain-panel) 65%, var(--hc-color-card-terrain-panel-groove) 68%, var(--hc-color-card-terrain-panel) 74%);
+  color: var(--hc-color-card-print-black);
+  text-align: center;
+}
+[data-hc-ds] .hc-ui-physical-card__terrain-dial span { align-self: end; font: 700 24px/1 var(--hc-font-display); }
+[data-hc-ds] .hc-ui-physical-card__terrain-dial img { height: 22px; vertical-align: middle; }
+[data-hc-ds] .hc-ui-physical-card__terrain-dial b { font: 700 24px/30px var(--hc-font-display); font-stretch: 75%; letter-spacing: -1px; }
+
+[data-hc-ds] .hc-ui-physical-card__back-bar {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 375px;
+  height: 75px;
+  padding: 10px 10px 0;
+  background: var(--hc-color-card-print-black);
+  color: var(--hc-color-card-print-white);
+  font-size: 12px;
+  line-height: 19px;
+}
+[data-hc-ds] .hc-ui-physical-card__back-bar p { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+[data-hc-ds] .hc-ui-physical-card__back-bar b { font-size: 10px; font-weight: 700; }
+
+/* 3D effect: by the mouse on the desktop and by the motion sensor only in the
+   phone's focus view. Without a mouse over the card or a sensor reading there is
+   no transform here; `[data-tilt]` is set by the view while it moves. */
+@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+  [data-hc-ds] .hc-ui-physical-card-tilt { transition: transform 0.18s ease-out; }
+  [data-hc-ds] .hc-ui-physical-card { transition: box-shadow 0.18s ease-out; }
+  [data-hc-ds] :is(.hc-ui-physical-card__token, .hc-ui-physical-card__terrain-art, .hc-ui-physical-card__bystander-token, .hc-ui-physical-card__header) { transition: translate 0.18s ease-out; }
+  [data-hc-ds] .hc-ui-physical-card__shine {
+    display: block;
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    opacity: 0;
+    pointer-events: none;
+    background: radial-gradient(circle at var(--hc-card-shine-at, 50% 50%), var(--hc-color-card-shine), transparent 60%);
+    mix-blend-mode: var(--hc-blend-card-shine);
+    transition: opacity 0.18s ease-out;
+  }
+  [data-hc-ds] .hc-ui-physical-card-slot[data-tilt] .hc-ui-physical-card { box-shadow: var(--hc-color-card-edge) 0 0 2px, var(--hc-color-card-lift) 0 14px 28px -10px; }
+  [data-hc-ds] .hc-ui-physical-card-slot[data-tilt] .hc-ui-physical-card__shine { opacity: 1; }
+  /* The front column lets the portrait pass the edge a little instead of cutting it. */
+  [data-hc-ds] .hc-ui-physical-card-slot[data-tilt] .hc-ui-physical-card__table[data-column='front'] { overflow: clip; overflow-clip-margin: 5px; }
+}
+@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
+  [data-hc-ds] .hc-ui-physical-cards[data-focus] .hc-ui-physical-card__shine {
+    display: block;
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    opacity: 0;
+    pointer-events: none;
+    background: radial-gradient(circle at var(--hc-card-shine-at, 50% 50%), var(--hc-color-card-shine), transparent 60%);
+    mix-blend-mode: var(--hc-blend-card-shine);
+    transition: opacity 0.18s ease-out;
+  }
+  /* The sensor is already smoothed and updates every frame: no transition. */
+  [data-hc-ds] .hc-ui-physical-cards[data-focus][data-tilt] .hc-ui-physical-card { box-shadow: var(--hc-color-card-edge) 0 0 2px, var(--hc-color-card-lift) 0 14px 28px -10px; }
+  [data-hc-ds] .hc-ui-physical-cards[data-focus][data-tilt] .hc-ui-physical-card__shine { opacity: 1; }
+  [data-hc-ds] .hc-ui-physical-cards[data-focus][data-tilt] .hc-ui-physical-card__table[data-column='front'] { overflow: clip; overflow-clip-margin: 5px; }
+  [data-hc-ds] .hc-ui-physical-cards[data-focus][data-tilt] .hc-ui-physical-card-tilt { will-change: transform; }
+}
+/* Holding the card opens the focus view: no text selection and no image menu. */
+@media (hover: none) and (pointer: coarse) {
+  [data-hc-ds] .hc-ui-physical-cards {
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+  }
+  [data-hc-ds] .hc-ui-physical-cards img { -webkit-touch-callout: none; }
+  [data-hc-ds] .hc-ui-physical-card { -webkit-user-select: none; user-select: none; }
+  /* Outside the focus view the grain stays without blending, which weighs on
+     phones with several cards mounted. */
+  [data-hc-ds] .hc-ui-physical-cards:not([data-focus]) .hc-ui-physical-card::after {
+    opacity: var(--hc-opacity-card-grain-flat);
+    mix-blend-mode: normal;
+  }
+}
+
+/* PhysicalCardFocusView — HCUI `.card-focus`. The blurred background was asked for
+   by HCUI and applies only here. */
+[data-hc-ds] .hc-ui-card-focus {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  margin: 0;
+  padding: calc(env(safe-area-inset-top, 0px) + 16px) 8px calc(max(env(safe-area-inset-bottom, 0px), var(--hc-space-3)) + 8px);
+  border: 0;
+  background: none;
+  color: var(--hc-color-text-primary);
+  overscroll-behavior: contain;
+  touch-action: none;
+}
+[data-hc-ds] .hc-ui-card-focus[open] { display: flex; align-items: center; justify-content: center; }
+/* Darker than the overlay token, so the card stands out. Above ~24px of blur
+   Chromium shows sharp edges and text behind again. */
+[data-hc-ds] .hc-ui-card-focus::backdrop {
+  background-color: var(--hc-color-card-focus-backdrop);
+  -webkit-backdrop-filter: blur(22px);
+  backdrop-filter: blur(22px);
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  [data-hc-ds] .hc-ui-card-focus::backdrop { background-color: var(--hc-color-bg-elevated); }
+}
+[data-hc-ds] .hc-ui-card-focus__actions {
+  grid-row: 2;
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 24px;
+}
+/* Quiet: the card is what shows. The outline Button keeps its border and only
+   gets the surface fill, which that variant leaves transparent. */
+[data-hc-ds] .hc-ui-card-focus .hc-ui-card-focus__actions .hc-ui-button[data-variant] { background-color: var(--hc-color-bg-surface); }
+[data-hc-ds] .hc-ui-physical-cards[data-focus] {
+  display: grid;
+  justify-items: center;
+  gap: 0;
+  animation: hc-ui-card-focus-in 0.24s ease-out both;
+}
+/* Front and backs in the same place: flipping turns both faces together, swapping
+   halfway, with the card edge-on. `backface-visibility` is not enough: the back
+   face showed mirrored during the first half of the turn. */
+[data-hc-ds] .hc-ui-physical-cards[data-focus] > .hc-ui-physical-card-slot {
+  grid-area: 1 / 1;
+  transform: perspective(1400px) rotateY(0deg);
+  transition: transform 0.5s ease-in-out, visibility 0s 0.25s;
+}
+[data-hc-ds] .hc-ui-physical-cards[data-focus] > .hc-ui-physical-card-slot[data-away] { visibility: hidden; pointer-events: none; }
+[data-hc-ds] .hc-ui-physical-cards[data-focus] > .hc-ui-physical-card-slot[data-side='front'][data-away] { transform: perspective(1400px) rotateY(-180deg); }
+[data-hc-ds] .hc-ui-physical-cards[data-focus] > .hc-ui-physical-card-slot[data-side='back'][data-away] { transform: perspective(1400px) rotateY(180deg); }
+@keyframes hc-ui-card-focus-in {
+  from { opacity: 0; transform: scale(0.94); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-hc-ds] .hc-ui-physical-cards[data-focus] { animation: none; }
+  [data-hc-ds] .hc-ui-physical-cards[data-focus] > .hc-ui-physical-card-slot { transition: none; }
+  [data-hc-ds] .hc-ui-physical-card__copy { transition: none; }
+}
+
+/* Map — HCUI `.map-board`, `.map-tooltip`, `.map-swatch`, `.map-scene__legend` and
+   `.map-environment`. The board's white, the selection's shading and the swatch's
+   text are HeroClix tokens, the same in both themes; the environment's black line
+   icons turn light in the dark theme (`filter-map-environment-icon`). */
+[data-hc-ds] :is(.hc-ui-map-board, .hc-ui-map-tooltip, .hc-ui-map-swatch, .hc-ui-map-legend, .hc-ui-map-environment),
+[data-hc-ds] :is(.hc-ui-map-board, .hc-ui-map-tooltip, .hc-ui-map-legend, .hc-ui-map-environment) *,
+[data-hc-ds] :is(.hc-ui-map-board, .hc-ui-map-tooltip, .hc-ui-map-legend, .hc-ui-map-environment) *::before,
+[data-hc-ds] :is(.hc-ui-map-board, .hc-ui-map-tooltip, .hc-ui-map-legend, .hc-ui-map-environment) *::after { box-sizing: border-box; }
+/* ROND everywhere, and HCUI's long words that break only when they overflow. */
+[data-hc-ds] :is(.hc-ui-map-tooltip, .hc-ui-map-swatch, .hc-ui-map-legend, .hc-ui-map-environment),
+[data-hc-ds] :is(.hc-ui-map-tooltip, .hc-ui-map-legend, .hc-ui-map-environment) * { font-variation-settings: 'ROND' var(--hc-rond); }
+:where([data-hc-ds] :is(.hc-ui-map-tooltip, .hc-ui-map-legend, .hc-ui-map-environment)) span,
+:where([data-hc-ds]) :is(.hc-ui-map-swatch, .hc-ui-map-environment) { overflow-wrap: break-word; }
+/* Square corners: the map is a board with its grid and labels up to the edge. The
+   hcmaps canvas draws on white, in both themes. */
+[data-hc-ds] .hc-ui-map-board {
+  position: relative;
+  width: 100%;
+  box-shadow: var(--hc-shadow-card);
+  background-color: var(--hc-color-map-board);
+  cursor: crosshair;
+}
+[data-hc-ds] .hc-ui-map-board:focus-visible { outline: 2px solid var(--hc-color-outline); outline-offset: 4px; }
+[data-hc-ds] .hc-ui-map-board canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+[data-hc-ds] .hc-ui-map-board[data-loading] {
+  aspect-ratio: 2 / 3;
+  background-color: var(--hc-color-bg-muted-2);
+  background-image: linear-gradient(var(--hc-color-border) 1px, transparent 1px), linear-gradient(90deg, var(--hc-color-border) 1px, transparent 1px);
+  background-size: 12.5% 12.5%;
+}
+/* Read by screen readers only. */
+[data-hc-ds] .hc-ui-map-board__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+[data-hc-ds] .hc-ui-map-board__selection {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+[data-hc-ds] .hc-ui-map-board__selection rect { fill: var(--hc-color-map-selection); stroke: var(--hc-color-map-selection-edge); stroke-width: .07; }
+[data-hc-ds] .hc-ui-map-board__selection line { stroke: var(--hc-color-map-selection-line); stroke-width: .14; stroke-linecap: round; }
+
+/* MapSwatch: the board's square, with the terrain's fill and border, in both themes. */
+[data-hc-ds] .hc-ui-map-swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  border: 2px solid;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: var(--hc-font-weight-bold);
+  line-height: 1;
+  color: var(--hc-color-map-swatch-text);
+}
+[data-hc-ds] .hc-ui-map-swatch[data-light-text] { color: var(--hc-color-map-swatch-text-light); }
+[data-hc-ds] .hc-ui-map-swatch[data-wall] { height: 5px; border-width: 0; border-radius: 1px; outline: 1px solid var(--hc-color-border-strong); }
+
+[data-hc-ds] .hc-ui-map-tooltip {
+  position: fixed;
+  z-index: var(--hc-z-tooltip);
+  pointer-events: none;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 16px));
+  padding: var(--hc-space-3);
+  border: 1px solid var(--hc-color-border-strong);
+  border-radius: var(--hc-radius-md);
+  background: var(--hc-color-bg-elevated);
+  color: var(--hc-color-text-primary);
+  box-shadow: var(--hc-shadow-card);
+  font-size: var(--hc-font-size-xs);
+  line-height: var(--hc-line-height-md);
+}
+/* HCUI's slightly condensed titles, at zero specificity. */
+:where([data-hc-ds] .hc-ui-map-tooltip__title) { font-stretch: 92%; }
+[data-hc-ds] .hc-ui-map-tooltip__title { display: flex; align-items: center; gap: var(--hc-space-2); margin-bottom: var(--hc-space-2); font-size: var(--hc-font-size-sm); font-weight: var(--hc-font-weight-bold); }
+[data-hc-ds] .hc-ui-map-tooltip__squares { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--hc-space-3); }
+[data-hc-ds] .hc-ui-map-tooltip__square { display: flex; flex-direction: column; gap: var(--hc-space-1); min-width: 0; color: var(--hc-color-text-secondary); }
+[data-hc-ds] .hc-ui-map-tooltip__square + .hc-ui-map-tooltip__square { padding-left: var(--hc-space-3); border-left: 1px solid var(--hc-color-border); }
+[data-hc-ds] .hc-ui-map-tooltip__coordinate { color: var(--hc-color-text-primary); font-weight: var(--hc-font-weight-bold); }
+[data-hc-ds] .hc-ui-map-tooltip__row { display: flex; align-items: center; gap: var(--hc-space-2); min-height: 18px; }
+[data-hc-ds] .hc-ui-map-tooltip__row[data-kind='terrain'] { color: var(--hc-color-text-primary); }
+[data-hc-ds] .hc-ui-map-tooltip__note { color: var(--hc-color-text-secondary); }
+[data-hc-ds] .hc-ui-map-tooltip .hc-ui-map-environment__item { gap: var(--hc-space-2); }
+[data-hc-ds] .hc-ui-map-tooltip .hc-ui-map-environment img { width: 16px; height: 16px; }
+
+/* MapLegendView: the icons follow the text's size. */
+[data-hc-ds] .hc-ui-map-legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--hc-space-1) var(--hc-space-3);
+  margin-top: var(--hc-space-2);
+  font-size: var(--hc-font-size-xs);
+  line-height: var(--hc-line-height-md);
+  color: var(--hc-color-text-secondary);
+}
+[data-hc-ds] .hc-ui-map-legend .hc-ui-map-environment img { width: 16px; height: 16px; }
+[data-hc-ds] .hc-ui-map-legend__key { display: inline-flex; align-items: center; gap: var(--hc-space-1); }
+
+[data-hc-ds] .hc-ui-map-environment {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--hc-space-2);
+  color: var(--hc-color-text-secondary);
+  font-size: var(--hc-font-size-xs);
+  line-height: var(--hc-line-height-md);
+}
+[data-hc-ds] .hc-ui-map-environment__item { display: inline-flex; align-items: center; gap: var(--hc-space-1); white-space: nowrap; }
+[data-hc-ds] .hc-ui-map-environment img { display: block; flex-shrink: 0; width: 18px; max-width: 100%; height: 18px; filter: var(--hc-filter-map-environment-icon); }