/* Feature badge icons — achievements and high-score tracking.
 *
 * Concept D2 ("CRT Marquee, no scanlines") from
 * public/store-mocks/tile-badge-icons.html, which is the design record and
 * shows this pair against the alternatives at every size.
 *
 * These replace the emoji trophy / bar chart. Emoji were rendered by the OS
 * font, so they changed shape across platforms and carried their own palette;
 * the bar chart also read as "analytics", not "this game tracks a score".
 *
 * The artwork ships once here as a data URI, so a tile costs one empty
 * <span> rather than an inlined SVG tree per badge. Size is driven by
 * --rp-badge-size so each surface can set its own without new rules.
 */
.rp-badge-icon {
  display: inline-block;
  width: var(--rp-badge-size, 22px);
  height: var(--rp-badge-size, 22px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  flex-shrink: 0;
  vertical-align: middle;
}
.rp-badge-icon--achievements { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%' stop-color='%23241338'/%3E%3Cstop offset='100%' stop-color='%230a0410'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.5' y='2.5' width='21' height='19' rx='2.5' fill='url(%23g)' stroke='%234a2a7a' stroke-width='1'/%3E%3Cpath d='M8,6.5 H16 V9.5 C16,12.4 14.2,13.9 12.9,14.2 V16.4 H15 V18.4 H9 V16.4 H11.1 V14.2 C9.8,13.9 8,12.4 8,9.5 Z' fill='%23ffb028'/%3E%3Cpath d='M8,6.5 H16 V9.5 C16,12.4 14.2,13.9 12.9,14.2 V16.4 H15 V18.4 H9 V16.4 H11.1 V14.2 C9.8,13.9 8,12.4 8,9.5 Z' fill='%23fff6d8' opacity='0.35' transform='translate(-0.4,-0.4) scale(0.97) translate(0.36,0.36)'/%3E%3Cpath d='M3.5,4 H20.5' stroke='%23fff' stroke-width='0.7' opacity='0.16' stroke-linecap='round'/%3E%3C/svg%3E"); }
.rp-badge-icon--score        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%' stop-color='%23241338'/%3E%3Cstop offset='100%' stop-color='%230a0410'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.5' y='2.5' width='21' height='19' rx='2.5' fill='url(%23g)' stroke='%234a2a7a' stroke-width='1'/%3E%3Cg fill='%2300e0ff'%3E%3Crect x='5.6' y='7.5' width='1.7' height='9'/%3E%3Crect x='9.8' y='7.5' width='1.7' height='9'/%3E%3Crect x='5.6' y='11.1' width='5.9' height='1.8'/%3E%3Crect x='13.2' y='7.5' width='5.2' height='1.8'/%3E%3Crect x='14.9' y='7.5' width='1.8' height='9'/%3E%3Crect x='13.2' y='14.7' width='5.2' height='1.8'/%3E%3C/g%3E%3Cpath d='M3.5,4 H20.5' stroke='%23fff' stroke-width='0.7' opacity='0.16' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Forced-colours mode drops background images, which would leave the badge
 * silently blank. Fall back to a short text label carried on the element. */
@media (forced-colors: active) {
  .rp-badge-icon {
    width: auto;
    height: auto;
    background: none;
  }
  .rp-badge-icon::after {
    content: attr(data-label);
    font-size: 0.7em;
  }
}