.ftc-score {
  --ftc-text: #fff;
  --ftc-text2: hsla(0, 0%, 100%, .64);
  --ftc-line: rgba(255, 255, 255, .15);
  /* the FarangThai house gradient - byte-identical to the one shoescore and
     gamescore already use, so all three cards read as one family */
  --ftc-grad: linear-gradient(135deg,#1a0533 0%,#2d1054 40%,#4a1a8a 70%,#6900ff 100%);
  --ftc-glow: 0 0 0 1px #7a3fd6 inset,0 1px 1px rgba(255,255,255,.25) inset,0 0 12px rgba(126,34,255,.5),0 4px 14px rgba(0,0,0,.4);
  /* Prompt is the face the FarangThai theme loads for Thai
     (index.html line 28, and forced onto content with !important).
     Lora and Merriweather carry no Thai glyphs, so they are not used here. */
  --ftc-disp: "Prompt", sans-serif;
  --ftc-body: "Prompt", sans-serif;
  --ftc-head: "Prompt", sans-serif;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2rem 3.2rem;
  margin: 2.4rem 0 !important;
  padding: 2.4rem 2.8rem;
  border: 1px solid #fff;
  border-radius: 8px;
  background: var(--ftc-grad);
  box-shadow: var(--ftc-glow);
  color: var(--ftc-text);
  font-family: var(--ftc-body);
  line-height: 1.6;
}
.ftc-score:empty { display: none; }
.ftc-score * { box-sizing: border-box; }
/* a div, never an h2 - the theme forces body h2 to 3.2rem !important */
.ftc-score .ftc-title {
  grid-column: 1/-1;
  margin: 0 0 .4rem;
  padding: 0 0 1.2rem;
  border-bottom: 1px solid var(--ftc-line);
  font-family: var(--ftc-head);
  font-size: 3rem;
  font-weight: 550;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ftc-score .ftc-full { grid-column: 1/-1; }
.ftc-score .ftc-scorerow { display: flex; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.ftc-score .ftc-tiles { flex: 1; min-width: 15rem; font-family: var(--ftc-disp); }
.ftc-score .ftc-tile {
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem 0; border-bottom: 1px solid var(--ftc-line);
}
.ftc-score .ftc-tile-label { flex: 1; font-size: 2.5rem; color: var(--ftc-text2); font-weight: 500; }
.ftc-score .ftc-tile-val { font-size: 2.7rem; font-weight: 700; }
.ftc-score .ftc-bar { width: 6rem; height: .5rem; border-radius: 3px; background: var(--ftc-line); overflow: hidden; }
.ftc-score .ftc-bar span { display: block; height: 100%; border-radius: 3px; }
.ftc-score .ftc-scorebox { display: flex; flex-direction: column; align-items: center; gap: .8rem; width: fit-content; }
.ftc-score .ftc-ringwrap { position: relative; width: 12rem; height: 12rem; }
.ftc-score .ftc-ringwrap svg { display: block; width: 100%; height: 100%; }
.ftc-score .ftc-track { fill: none; stroke: var(--ftc-line); stroke-width: 10; }
.ftc-score .ftc-arc {
  fill: none; stroke-width: 10; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 60px 60px;
}
.ftc-score .ftc-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ftc-disp); font-size: 3.6rem; font-weight: 700; line-height: 1;
}
.ftc-score .ftc-label {
  font-family: var(--ftc-disp); font-size: 3.0rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.ftc-score .ftc-verdict { margin-top: 1.8rem; font-size: 2.0rem; line-height: 1.55; }
.ftc-score .ftc-verdict p { margin: 0; }
.ftc-score .ftc-verdict p + p { margin-top: 1em; }
/* The class is repeated deliberately. The theme sets both `body a` and
   `body .gh-content a` to white !important; a single .ftc-score a loses to
   the latter on specificity, so the doubled class outweighs it. */
.ftc-score.ftc-score a { color: #cfadff !important; text-decoration: underline; text-underline-offset: 2px; }
.ftc-score .ftc-h {
  display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem;
  font-family: var(--ftc-disp); font-size: 1.8rem; font-weight: 600; line-height: 1.2;
}
.ftc-score .ftc-list {
  margin: 0 0 2.2rem; padding-left: 2rem; list-style: disc;
  font-size: 1.6rem; line-height: 1.5;
}
.ftc-score .ftc-list:last-child { margin-bottom: 0; }
.ftc-score .ftc-list li + li { margin-top: .6rem; }
.ftc-score .ftc-main, .ftc-score .ftc-side { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 640px) {
  .ftc-score { grid-template-columns: minmax(0, 1fr); padding: 2rem; }
  /* ring above the tiles, so the tiles get the full card width instead of
     the 168px left over beside the ring */
  .ftc-score .ftc-scorerow { flex-direction: column; align-items: stretch; }
  .ftc-score .ftc-scorebox { margin: 0 auto; }
  .ftc-score .ftc-tiles { width: 100%; }
  .ftc-score .ftc-tile-label { font-size: 1.6rem; }
  .ftc-score .ftc-tile-val { font-size: 1.8rem; }
  .ftc-score .ftc-verdict { font-size: 2rem; }
}
.ftc-err {
  padding: 1.6rem;
  border-radius: 10px;
  background: #3a1d1d;
  color: #ffd7d7;
  font-family: Prompt, Arial, sans-serif;
  font-size: 1.4rem;
}

/* ============================================================
   Desktop layout: the score ring takes one third of the card and
   the criteria tiles take two thirds.

   Kept in its own min-width:641px block, below everything above,
   so it overrides the base rules on order alone (no !important)
   and leaves the max-width:640px block above completely alone -
   phones render exactly as they did before this block existed.
   ============================================================ */
@media (min-width: 641px) {

  /* 1 ── Free the score row from the 1.2fr column.
     .ftc-main stops being a box, so .ftc-scorerow and .ftc-verdict
     become real grid items of .ftc-score and can span the card. */
  .ftc-score .ftc-main { display: contents; }
  .ftc-score .ftc-scorerow,
  .ftc-score .ftc-verdict { min-width: 0; overflow-wrap: break-word; }

  /* 2 ── The split: ring one third, tiles two thirds.
     At the 85rem canvas this is a 254px / 508px row. */
  .ftc-score .ftc-scorerow {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: 3.2rem;
  }

  /* 3 ── Ring fills its third: 12rem -> ~25rem. */
  .ftc-score .ftc-scorebox { width: 100%; gap: 1.2rem; }
  .ftc-score .ftc-ringwrap {
    width: min(100%, 26rem);
    height: auto;
    aspect-ratio: 1;
    container-type: inline-size;   /* lets the number size off the ring */
  }

  /* 4 ── The number scales WITH the ring instead of sitting at a fixed
     3.6rem that no longer fits it. 36cqw = 36% of the ring's width,
     which is about the ceiling: much above this a four-character
     score ("10.0") reaches the stroke. A browser without container
     units drops this line and keeps the 3.6rem set above. */
  .ftc-score .ftc-num {
    font-size: 36cqw;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
  }
  .ftc-score .ftc-label { text-align: center; }

  /* 5 ── Tiles: room to breathe, values in a flush-right column. */
  .ftc-score .ftc-tiles { min-width: 0; }
  .ftc-score .ftc-tile  { gap: 1.6rem; padding: .9rem 0; }
  .ftc-score .ftc-bar   { flex: none; width: 7rem; height: .6rem; }
  .ftc-score .ftc-tile-val {
    min-width: 4.5ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* 6 ── Verdict full width, then pros | cons side by side below.
     render() always emits .ftc-h, .ftc-list, .ftc-h, .ftc-list. */
  .ftc-score .ftc-verdict { grid-column: 1 / -1; margin-top: .8rem; font-size: 2.2rem; }
  .ftc-score .ftc-side {
    grid-column: 1 / -1;
    margin-top: 1.2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3.2rem;
    align-items: start;
  }
  .ftc-score .ftc-side > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .ftc-score .ftc-side > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .ftc-score .ftc-side > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .ftc-score .ftc-side > :nth-child(4) { grid-column: 2; grid-row: 2; }
  /* a post with only a Good list (or only a Bad one) gets the full width */
  .ftc-score .ftc-side > :nth-child(1):nth-last-child(2),
  .ftc-score .ftc-side > :nth-child(2):last-child { grid-column: 1 / -1; }
  /* The check/cross icons are hard-coded 20px in carscore.js, so they
     are scaled here too or they look lost beside a 2.2rem heading. */
  .ftc-score .ftc-h     { font-size: 2.2rem; gap: 1rem; }
  .ftc-score .ftc-h svg { flex: none; width: 2.4rem; height: 2.4rem; }
  .ftc-score .ftc-list  { margin-bottom: 0; font-size: 2rem; line-height: 1.55; }
  .ftc-score .ftc-list li + li { margin-top: .8rem; }
}