/* components.css — plate, cards, buttons, score dots, bars.
   Step 2 gives these working shapes. The full design pass is step 5. */

/* ---- plate (7.6): a cream mat and a caption with the Latin name. The 7.6 ink
   border is gone by the owner's note of 2026-09-12; see .plate-plate below.
   The placeholder sits underneath and the real art lays over it, so nothing
   ever flashes empty. ---- */
.plate { position: relative; margin: 0; perspective: 900px; }
.plate-mat {
  display: block; position: relative;
  background: var(--panel);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .18s ease-out;
  transform-style: preserve-3d;
}
/* The hero plate has no frame at all: the specimen card around it is the frame, and a
   second rectangle inside it read as a mistake (owner's note, 2026-09-12). Busts are
   the same: the round thumb or the tile behind them is the shape, so the mat must not
   paint its own box inside it. */
.plate-plate .plate-mat { background: none; border-radius: 0; }
.plate-bust .plate-mat { background: none; border-radius: inherit; }
/* A tile still needs an edge to read as a tile, but in --line, never in ink. */
.plate-card .plate-mat { border: 1px solid var(--line); }
.plate-placeholder { display: block; width: 100%; height: auto; }
/* the voxel plate (owner's art direction, 2026-09-12). The aspect ratio is set in CSS
   so the box is the right size before mount.js has drawn anything: no layout shift. */
.plate-art {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3;
}
.plate-bust .plate-art { aspect-ratio: 1 / 1; }
.plate-plate .plate-art { aspect-ratio: 3 / 2; }
/* the hero sits on the specimen stage, so it must not paint its own ground over it */
.plate-plate .plate-art { background: none; }
.plate-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  background: var(--panel);
}
.plate-caption {
  font-style: italic; color: var(--muted); font-size: 14px;
  text-align: center; padding-top: var(--space-2);
}
/* 7.6: a slow float on the specimen plate, killed under reduced motion */
.plate-tilt .plate-mat { animation: plate-float 7s ease-in-out infinite; }
@keyframes plate-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}
@media (prefers-reduced-motion: reduce) {
  .plate-tilt .plate-mat { animation: none; transition: none; }
}

/* ---- 7.8: Wild gets a yellow sticky note, Prime a thin programme rule ---- */
.tip {
  display: inline-block; margin: var(--space-3) 0 0;
  background: var(--sticky); color: var(--ink);
  font-family: var(--font-hand); font-size: 20px;
  padding: var(--space-2) var(--space-3);
  rotate: -1.4deg;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
[data-arena="prime"] .tip {
  background: none; rotate: none; box-shadow: none; padding: var(--space-2) 0;
  font-family: var(--font-prime); font-size: 13px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: block;
}

/* 7.2: the header toggles are tap targets like everything else, 56px on every size */
.icon-toggle {
  min-height: var(--tap); min-width: var(--tap);
  display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink);
}
.icon-toggle[aria-pressed="true"] { color: var(--muted); opacity: .7; }

/* ---- buttons ---- */
.big-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 2px 0 rgba(31,27,22,.22);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
@media (hover: hover) {
  .big-go:hover:not([disabled]) { filter: brightness(1.06); }
}
.big-go:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 0 0 rgba(31,27,22,.22); }
.big-go[disabled] { opacity: .4; cursor: not-allowed; }
/* a ghost button still needs an edge, or it reads as loose text on the verdict */
.big-go.ghost { background: transparent; color: inherit; border: 2px solid currentColor; box-shadow: none; }

.unit-toggle {
  min-height: var(--tap); min-width: 60px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); font-size: 14px;
}

/* ---- 11.8: the one way a score is drawn. Ten segments grouped 5 + 5 (a child can
   count five at a glance, not ten) with the numeral beside it. Each segment is filled
   from --p, 0 to 1, so fight.js can run a bar up smoothly during a round's scene.
   .mirror grows toward the left, so two fighters' bars meet in the middle. ---- */
.bar-wrap { display: flex; align-items: center; gap: var(--space-2); }
.sbar { display: inline-flex; gap: 3px; flex: 1 1 auto; min-width: 0; --fill: var(--accent); --track: var(--line); --dir: to right; }
.sbar[data-side="b"] { --fill: var(--accent-2); }
.sbar.mirror { flex-direction: row-reverse; --dir: to left; }
.sbar i {
  flex: 1 1 0; min-width: 4px; height: 18px; border-radius: 4px;
  background: linear-gradient(var(--dir), var(--fill) calc(var(--p, 0) * 100%), var(--track) 0);
}
.sbar i:nth-child(5) { margin-right: 7px; }
.sbar.mirror i:nth-child(5) { margin-right: 0; margin-left: 7px; }
.bar-num { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- the numbers inside a fact (units.js renderTokensHTML): bold, and never
   broken across a line, so "5.5 tons" stays one thing ---- */
.num { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- badges ---- */
.mismatch-badge, .badge {
  display: inline-block; border: 1px solid currentColor; border-radius: 999px;
  padding: 4px 14px; font-size: 14px; letter-spacing: .04em;
}