.piece,
.unit-pip {
  --pc-fill: var(--p1);
  --pc-fill-2: var(--p1-2);
  --pc-edge: var(--p1-edge);
  --pc-ink: var(--p1-ink);
  position: relative;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--pc-fill-2) 0%, var(--pc-fill) 55%, color-mix(in srgb, var(--pc-fill) 50%, #000) 100%);
  border: 1.5px solid rgba(0,0,0,0.55);
  box-shadow:
    inset 0 0 0 2px var(--pc-edge),
    0 2px 5px rgba(0,0,0,0.55),
    inset 0 2px 3px rgba(255,255,255,0.22),
    inset 0 -2px 3px rgba(0,0,0,0.4);
  overflow: hidden;
}
.piece-p1, .unit-pip-p1 { --pc-fill: var(--p1); --pc-fill-2: var(--p1-2); --pc-edge: var(--p1-edge); --pc-ink: var(--p1-ink); }
.piece-p2, .unit-pip-p2 { --pc-fill: var(--p2); --pc-fill-2: var(--p2-2); --pc-edge: var(--p2-edge); --pc-ink: var(--p2-ink); }
.piece.piece-shape-square,
.unit-pip.piece-shape-square { border-radius: 6px; }

html[data-piece-shape="all-circle"] .piece.piece-shape-square,
html[data-piece-shape="all-circle"] .unit-pip.piece-shape-square { border-radius: 50%; }

html[data-piece-shape="all-square"] .piece,
html[data-piece-shape="all-square"] .unit-pip { border-radius: 6px; }
.piece-stratigos,
.unit-pip-stratigos {
  border-color: var(--gold);
  box-shadow:
    inset 0 0 0 2px var(--pc-edge),
    0 0 0 1.5px var(--gold),
    0 2px 6px rgba(232, 193, 79, 0.45),
    inset 0 2px 3px rgba(255,255,255,0.25),
    inset 0 -2px 3px rgba(0,0,0,0.4);
}

.piece {
  width: calc(var(--cell-size) * 0.82); height: calc(var(--cell-size) * 0.82);
  z-index: 2;
  transition: transform 0.08s;
}
.piece[draggable="true"] { cursor: grab; }
.piece[draggable="true"]:active { cursor: grabbing; transform: rotate(var(--piece-counter-rotate, 0deg)) scale(1.15); }
.piece-pinned { outline: 2px solid var(--porphyry-2); outline-offset: -2px; }
.piece-spent { opacity: 0.55; filter: saturate(0.6) brightness(0.7); }

.unit-pip {
  display: inline-block;
  vertical-align: middle;
  width: 1.4em; height: 1.4em;
  border-width: 1px;
  box-shadow:
    inset 0 0 0 1.5px var(--pc-edge),
    0 1px 2px rgba(0,0,0,0.45),
    inset 0 1px 2px rgba(255,255,255,0.22),
    inset 0 -1px 2px rgba(0,0,0,0.4);
}
.unit-pip-stratigos {
  box-shadow:
    inset 0 0 0 1.5px var(--pc-edge),
    0 0 0 1px var(--gold),
    0 1px 3px rgba(232, 193, 79, 0.45),
    inset 0 1px 2px rgba(255,255,255,0.25),
    inset 0 -1px 2px rgba(0,0,0,0.4);
}

.unit-icon {
  position: absolute; inset: 12%;
  /* Per-seat --pc-ink, not theme --ink, or the glyph goes invisible on the matching army; fallback for .unit-icon outside a piece. */
  background-color: var(--pc-ink, var(--ink));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55));
  pointer-events: none;
}
.unit-icon-general    { -webkit-mask-image: url('/assets/images/general.svg?v=20260512r1');        mask-image: url('/assets/images/general.svg?v=20260512r1'); }
.unit-icon-heavy-cav  { -webkit-mask-image: url('/assets/images/heavy_cavalry.svg?v=20260512r1');  mask-image: url('/assets/images/heavy_cavalry.svg?v=20260512r1'); }
.unit-icon-light-cav  { -webkit-mask-image: url('/assets/images/light_cavalry.svg?v=20260512r1');  mask-image: url('/assets/images/light_cavalry.svg?v=20260512r1'); }
.unit-icon-heavy-inf  { -webkit-mask-image: url('/assets/images/heavy_infantry.svg?v=20260512r1'); mask-image: url('/assets/images/heavy_infantry.svg?v=20260512r1'); }
.unit-icon-light-inf  { -webkit-mask-image: url('/assets/images/light_infantry.svg?v=20260512r1'); mask-image: url('/assets/images/light_infantry.svg?v=20260512r1'); }
.unit-icon-skirmisher { -webkit-mask-image: url('/assets/images/skirmisher.svg?v=20260512r1');     mask-image: url('/assets/images/skirmisher.svg?v=20260512r1'); }


/* Armory sets arrive as inline --pc-fill/--pc-fill-2/--pc-edge/--pc-ink (Cosmetics.colourVars),
   and .piece-p1/.piece-p2 supply the same four from the seat tokens when nothing is equipped.
   These rules only add glyph and finishes — they must name those four and nothing else. */
/* Glyph SVG (js/cosmetics.js _glyphSvg): shared viewBox + textLength normalizes every skin to one footprint. */
.piece-glyph {
  display: block; width: 100%; height: 100%;
  /* --pc-ink, never --ink: the glyph has to invert against ITS OWN army, and a light
     livery (ivory, mint) makes a cream glyph invisible. */
  color: var(--pc-ink, var(--ink));
  pointer-events: none;
  overflow: visible;
}
.piece-glyph text {
  font-family: var(--font-display); font-weight: 600;
  font-size: 58px;                 /* within the 0 0 100 100 viewBox */
  fill: currentColor;
}
/* The fill sits here, above the finishes, so a material equipped over a flat skin wins on BOTH
   the board piece and the pip. Scoped-later copies of this background put the two out of step. */
.piece.piece-skin-flat,
.unit-pip.piece-skin-flat { background: var(--pc-fill); }
.piece.piece-skin-flat {
  /* An unset custom property in a shorthand voids the WHOLE declaration, so a stale name
     here silently removed the border rather than falling back. */
  border: 2px solid var(--pc-edge);
  /* Seat ring is the colourblind fallback — survives every set (some palettes are ~1.4:1 between seats). */
  box-shadow: inset 0 0 0 2px var(--pc-edge);
}

.piece.piece-finish-marble,
.unit-pip.piece-finish-marble {
  background:
    linear-gradient(125deg, rgba(255,255,255,0.35) 0 12%, transparent 12% 26%, rgba(255,255,255,0.22) 26% 32%, transparent 32%),
    radial-gradient(circle at 35% 28%, var(--pc-fill-2), var(--pc-fill));
}
/* A finish is a SURFACE, so every rule below works in --pc-fill and white/black overlays
   only. The moment one hardcodes a hue it stops being a material and becomes a livery
   wearing the wrong slot — which is exactly what `inked` and `gilded` were. */
.piece.piece-finish-metal,
.unit-pip.piece-finish-metal {
  background:
    linear-gradient(150deg, rgba(255,255,255,0.55) 0%, transparent 30%,
                    transparent 66%, rgba(255,255,255,0.42) 100%),
    radial-gradient(circle at 35% 28%, var(--pc-fill-2), var(--pc-fill));
}
/* Sharp: no bloom and a hard rim — the cut edge does the work. */
.piece.piece-finish-sharp,
.unit-pip.piece-finish-sharp { background: linear-gradient(160deg, var(--pc-fill-2) 0%, var(--pc-fill) 100%); }
/* Rim and bloom are sized for a board piece; a pip keeps its own 1.5px ring. */
.piece.piece-finish-sharp { box-shadow: inset 0 0 0 2px var(--pc-edge); }
/* Etched: fine scored lines across the face. */
.piece.piece-finish-etched,
.unit-pip.piece-finish-etched {
  background:
    repeating-linear-gradient(58deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-58deg, rgba(255,255,255,0.14) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 35% 28%, var(--pc-fill-2), var(--pc-fill));
}
/* Polished: one tight specular bloom over the livery. */
.piece.piece-finish-polished,
.unit-pip.piece-finish-polished {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.62) 0 9%, transparent 34%),
    radial-gradient(circle at 35% 28%, var(--pc-fill-2), var(--pc-fill));
}
.piece.piece-finish-polished {
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,0.34),
    inset 0 -3px 6px rgba(0,0,0,0.34);
}

.spec-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 24px; margin-bottom: 8px; width: 100%; }
.spec-label { white-space: nowrap; color: var(--text-secondary); font-size: 1rem; }
.spec-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; width: 100%; }
.spec-card {
  padding: 12px; background: var(--bg-card);
  border: 2px solid transparent; border-radius: 8px; cursor: pointer;
  transition: border-color 0.2s; text-align: center;
}
.spec-card:hover { border-color: var(--bg-hover); }
.spec-card.active { border-color: var(--accent-green); }
.spec-card h4 { color: var(--text-primary); margin-bottom: 6px; }
.spec-abilities { display: flex; flex-direction: column; gap: 3px; }
.spec-ability {
  font-size: 0.8rem; color: var(--accent-gold); font-weight: 500;
  padding: 2px 6px; background: color-mix(in srgb, var(--bronze-2) 8%, transparent); border-radius: 3px;
  white-space: nowrap;
}
.unit-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.unit-table th {
  padding: 6px 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
}
.unit-table th.th-left   { text-align: left; }
.unit-table th.th-right  { text-align: right; }
.unit-table th.th-center { text-align: center; }
.unit-table td { padding: 8px; vertical-align: middle; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent); }
.unit-table tr:last-child td { border-bottom: none; }
.unit-table .u-sym     { font-size: 1.3rem; width: 30px; text-align: center; }
.unit-table .u-name    { font-weight: 500; color: var(--text-primary); text-align: left; }
.unit-table .u-cost    { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; min-width: 5em; text-align: left; }
.unit-table .u-req     { text-align: center; min-width: 5em; padding-right: 12px; }
.unit-table .u-count   { font-weight: 700; min-width: 5em; padding-left: 12px; text-align: center; }
.unit-table .u-actions { text-align: right; white-space: nowrap; min-width: 5em; }
.unit-table .u-actions .btn-sm { margin: 0 2px; }

/* Mobile expansion row; keeps 5 visible cols stable once the Unit header is hidden. */
.unit-table .unit-name-expansion { display: none; }
.unit-table .unit-name-expansion td {
  padding: 4px 12px;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
}

@media (max-width: 640px) {
  .unit-table th:nth-child(2),
  .unit-table .u-name { display: none; }
  .unit-table .u-sym, .unit-table .u-cost { cursor: pointer; }
  .unit-table .unit-name-expansion.is-shown { display: table-row; }
  /* The per-column minimums add up to more than a phone is wide, so the Action column clips.
     Drop them and let the table share out whatever width there is. */
  .unit-table { table-layout: fixed; font-size: 0.82rem; }
  .unit-table th, .unit-table td { padding: 6px 2px; }
  .unit-table .u-cost,
  .unit-table .u-count,
  .unit-table .u-actions { min-width: 0; }
  .unit-table .u-req { width: auto; min-width: 0; padding-right: 0; }
  .unit-table .u-count { padding-left: 0; }
  .unit-table .u-sym { width: 2em; font-size: 1.1rem; }
  .unit-table .u-actions .btn-sm { width: 26px; height: 26px; margin-left: 2px; font-size: 1rem; }
}
.unit-table .unit-row-has  .u-count { color: var(--accent-green); }
.unit-table .unit-row-none .u-count { color: var(--text-muted); }
.unit-table .u-actions .btn-sm {
  width: 30px; height: 30px;
  padding: 0;
  margin-left: 4px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
.unit-table .u-req { text-align: center; width: 60px; }

.req-ok { color: var(--accent-green); font-weight: 700; }
.req-miss { color: var(--accent-red); font-weight: 700; }

.spec-select {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 600;
}

.unit-info-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 10px 12px; flex-shrink: 0; }
/* Viewer-relative stripe (mine/theirs, not seat 0/1) on the eval pair, matching the bar and the
   battle log. That pair is tone-matched, so the "Enemy" tag beside the name is what carries the
   reading for a red-green dichromat — keep it. */
.unit-info-card.unit-info-mine { border-left: 3px solid var(--eval-mine); }
.unit-info-card.unit-info-them { border-left: 3px solid var(--eval-them); }
.unit-info-card .ui-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.unit-info-card .ui-detail { font-size: 0.78rem; color: var(--ink-3); margin-top: 6px; }
.ui-detail-row + .ui-detail-row { margin-top: 2px; }
.ui-pinned { color: var(--porphyry-2); font-size: 0.76rem; margin-top: 6px; }
.ui-disorganized {
  color: var(--accent-red); font-weight: 700; font-size: 0.72rem;
  background: rgba(220,60,60,0.15); border: 1px solid rgba(220,60,60,0.4);
  border-radius: 4px; padding: 1px 5px; cursor: help; white-space: nowrap;
}
.ui-spec { color: var(--accent-gold); font-size: 0.78rem; }
.unit-info-card .ui-name-muted { color: var(--ink-3); }
.ui-enemy-tag {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--porphyry-2); border: 1px solid var(--porphyry);
  border-radius: 100px; padding: 1px 7px;
}

/* Header owns the padding so a collapsed card is just the header strip. */
.rp-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  flex-shrink: 0;
}
.rp-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  cursor: pointer; user-select: none;
}
.rp-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
}
.rp-card-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.rp-card-body { padding: 8px 12px 12px; }
.terrain-rows { display: flex; flex-direction: column; gap: 6px; }

.tl-swatch {
  display: inline-block; vertical-align: middle;
  width: 11px; height: 11px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.25);
  flex: none;
}
/* Fixed label column so the effects column aligns across rows. */
.terrain-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.8rem; }
.terrain-row-label {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 96px;
  color: var(--ink);
}
.terrain-row-effects { flex: 1; color: var(--ink-3); font-size: 0.75rem; text-align: right; }

.sc-spec-table { width: 100%; border-collapse: separate; border-spacing: 0 3px; margin-bottom: 2px; }
.sc-spec-table td { padding: 3px 6px; background: var(--bg-card); vertical-align: middle; }
.sc-spec-table td:first-child { border-radius: 4px 0 0 4px; white-space: nowrap; width: 30px; }
.sc-spec-table td:last-child { border-radius: 0 4px 4px 0; }
.sc-spec-label { font-size: 0.7rem; color: var(--text-light); font-weight: 600; }