/* === The rating card ========================================================
   The DOM half of js/rating_card.js. Only tokens.css values are used here —
   no literal colours, no second scale — because the canvas half reads the SAME
   tokens at draw time (rating_card.js readTokens()), and the preview must be
   the same picture as the exported PNG.

   Portrait 3:4, one left-aligned column, generous margins. No shadows, one
   --r-lg radius, --surface on --bg, and exactly one quiet radial vignette at
   the top matching the app ground. Nothing animates: this is a still.
   ========================================================================== */

.rc-card {
  --rc-pad: var(--space-6);
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;
  height: auto;               /* content taller than the ratio grows the box */
  margin: 0 auto;
  padding: var(--rc-pad);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  color: var(--text);
  font-family: var(--font-body);
  background:
    /* The one quiet vignette. Literal rgba, not color-mix(--gold): an engine
       that can't parse the function would drop this whole shorthand — and the
       --surface fill with it — leaving a transparent card. Keep in step with
       --gold (#d9b34f) and with rating_card.js drawPngCard's radial. */
    radial-gradient(120% 60% at 50% 0%,
      rgba(217, 179, 79, .10) 0%, rgba(217, 179, 79, 0) 70%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ---- 1. The rating ------------------------------------------------------ */
.rc-eyebrow {
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rc-rating {
  font-family: var(--font-display);
  font-size: var(--fs-9);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  margin-top: var(--space-1);
}
/* A familiarity band the server calls `low` never gets a sharp gold number —
   the same hedge the Builder readout applies (see rating_card.js ratingText). */
.rc-rating.is-hedged { color: var(--text-dim); }

/* No opponent, no scale: the rating stands alone at display size and the board
   follows it. The scale block's vertical space is NOT left as a hole — the
   board is `flex: 1 1 auto` and simply grows into it; this margin is only the
   breath the block used to provide, so the hero doesn't butt into the hexes.
   (Canvas twin: PNG.soloHeroGap in rating_card.js.) */
.rc-card--solo .rc-rating { margin-bottom: var(--space-3); }

/* ---- The comparison scale ----------------------------------------------- */
/* Present ONLY when the spec carries an `opponent` (rating_card.js render):
   the rating becomes a probability only relative to someone, so a lone marker
   on a sigmoid would assert a win chance against nobody. The stroke itself is
   canvas (one routine shared with the PNG); this is only its box and its two
   axis end-labels. */
.rc-scale { margin-top: var(--space-3); }
.rc-scale-canvas { display: block; width: 100%; height: 34px; }
.rc-scale-ends {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.rc-verdict {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.rc-verdict-strong {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--you);
  font-variant-numeric: tabular-nums;
}
.rc-verdict-rest {
  font-size: var(--fs-2);
  color: var(--text-muted);
}

/* ---- 2. The board ------------------------------------------------------- */
/* The elastic block: it takes whatever height the text blocks leave. The hexes
   are drawn natively to this canvas — CSS clip-path shapes do not survive an
   image export, and a CSS board here would make the preview a different
   picture from the file. */
.rc-board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;   /* the one centred element — it is a graphic */
  overflow: hidden;
  margin: var(--space-5) 0;
}
/* Sized in px by paintDomBoard, which fits the board to this box's width AND
   height so the card keeps its 3:4 ratio. */
.rc-board-canvas { display: block; max-width: 100%; max-height: 100%; }

/* ---- Traits ------------------------------------------------------------- */
.rc-traits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.rc-trait {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1;
  background: var(--surface-2);
  color: var(--text-muted);
}
.rc-trait-icon { width: 13px; height: 13px; filter: brightness(0) saturate(100%) invert(1); opacity: .9; }
.rc-trait-count { font-family: var(--font-mono); font-weight: 700; opacity: .8; }
/* Trait tier colours are game constants, mirrored from the app's trait chips —
   the canvas half carries the same five in TRAIT_TIERS. */
.rc-trait-bronze { background: #7d4a1f; color: #f3d2a8; }
.rc-trait-silver { background: #a8adb8; color: var(--gold-ink); }
.rc-trait-gold   { background: var(--gold); color: var(--gold-ink); }
.rc-trait-prismatic {
  background: linear-gradient(90deg, #ff79c6, #bd93f9, #8be9fd, #50fa7b, #f1fa8c);
  color: var(--gold-ink);
}
.rc-trait-bronze .rc-trait-icon,
.rc-trait-silver .rc-trait-icon,
.rc-trait-gold .rc-trait-icon,
.rc-trait-prismatic .rc-trait-icon { filter: brightness(0) saturate(100%); }

/* ---- 3. Familiarity ----------------------------------------------------- */
.rc-fam-word {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: var(--lh-snug);
  /* colour is set inline from the server's tone — see toneColor() */
}
.rc-fam-reason {
  margin-top: 2px;
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.rc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.rc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--space-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--fs-1);
  line-height: 1;
}
.rc-chip-dot { width: 7px; height: 7px; border-radius: var(--r-pill); flex: none; }
.rc-chip-name { font-weight: 700; color: var(--text); }
.rc-chip-word { color: var(--text-muted); }

/* ---- 4. Footer ---------------------------------------------------------- */
.rc-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
}
.rc-patch {
  color: var(--text-dim);
  padding-right: var(--space-3);
  border-right: 1px solid var(--line);
}
.rc-url { color: var(--gold); font-weight: 700; }
.rc-mark { width: 22px; height: 22px; margin-left: auto; display: block; }

/* Phone width: the card is already fluid; only the inner margin tightens. */
@media (max-width: 460px) {
  .rc-card { --rc-pad: var(--space-5); }
}