/* The badge a share link names (?b=ID), on every page a share can land on —
   badge-chip.js fills it. Reads the poster palette variables (--gold,
   --porcelain, --porcelain-dim) each page already declares. The crop numbers
   below are tool/media/og_image/og.html's badge layout, which nothing here
   could notice moving — test/mirrored_constants_test.dart recomputes them
   from it. */
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  margin: 18px 0 0;
  padding: 9px 22px 9px 9px;
  border: 1px solid rgba(227, 196, 109, .45);
  border-radius: 999px;
  background: rgba(246, 242, 233, .06);
}
/* The `display` above outranks a plain `[hidden]` rule declared at equal
   specificity, so hidden has to be said again here. */
.badge-chip[hidden] { display: none; }
.medal {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  /* The app's own medallion gradient, so a card that fails to load leaves a
     gold disc rather than a hole. */
  background: linear-gradient(135deg, #F3E2B4 0%, #E3C46D 100%);
}
.medal img {
  position: absolute;
  width: 1200px;
  height: 630px;
  transform-origin: 0 0;
  /* The medallion is 132px across at (76, 152) of the 1200x630 card, so its
     centre is (142, 218): at half scale that lands dead centre of this 64px
     window when the origin is pulled to (78, 154). Half scale rather than
     64/132 leaves a pixel of overscan all round, which is deliberate — the
     card is a downscaled capture, so the disc's edge is soft, and an exact fit
     leaves a sliver of the card's sea inside the circle. */
  transform: scale(0.5) translate(-78px, -154px);
}
.badge-label {
  display: block;
  font-size: 12.5px;
  letter-spacing: 1.2px;
  color: var(--porcelain-dim);
}
.badge-name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--gold);
}