/* Coin ring badge (Tone Segurado's hero "moedinha", rewritten). A thick coin with a line of text set round its
   rim; the text ring turns once every 45 s, and the whole coin slides with the pointer, mostly sideways. */
.coin {
  --coin-size: 275px;
  --coin-spin: 45s;                 /* one turn of the text ring, linear, forever */
  --coin-ink: #161616;
  --coin-face: #f69b66;
  --coin-edge: #e07a45;
  --coin-inner: #f8c785;
  --coin-line: 3px;
  --coin-thick: 10px;               /* the coin's edge, drawn down-left like the source art */
  --coin-type: 700 19.5px/1 var(--coin-font, inherit);
  position: relative; width: var(--coin-size); height: var(--coin-size); will-change: transform;
}
.coin__body { position: absolute; inset: 0; border-radius: 50%; background: var(--coin-face);
  border: var(--coin-line) solid var(--coin-ink);
  box-shadow: calc(var(--coin-thick) * -.6) var(--coin-thick) 0 calc(var(--coin-line) * -1) var(--coin-edge),
              calc(var(--coin-thick) * -.6) var(--coin-thick) 0 0 var(--coin-ink); }
.coin__inner { position: absolute; inset: 24%; border-radius: 50%; background: var(--coin-inner);
  border: var(--coin-line) solid var(--coin-ink); display: grid; place-items: center; overflow: hidden; }
.coin__inner > * { width: 72%; height: auto; }
.coin__ring { position: absolute; inset: 0; animation: coin-spin var(--coin-spin) linear infinite; }
.coin__ring text { font: var(--coin-type); fill: var(--coin-ink); text-transform: uppercase; }
@keyframes coin-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .coin__ring { animation: none; } }