/* The medal and its tones, wherever one hangs (badge-cabinet.js, `medalSvg` and `ribbonSvg`): the cabinet, a
   profile card, a binder, the badge's page, and the ceremony a badge gets on any page (badge-ceremony.js, #906).
   The navbar loads this everywhere; a page framed in the inspector loads it itself. */
.badge-display { --metal: #e5b75c; --shine: #fff1b3; --edge: #8c5b23; text-align: center; min-width: 0; }
.badge-tone-common { --metal: #b7c2ce; --shine: #eff6ff; --edge: #566276; }
.badge-tone-uncommon { --metal: #68bd94; --shine: #cbffe0; --edge: #28614a; }
.badge-tone-rare { --metal: #6e9de2; --shine: #d4eaff; --edge: #304e89; }
.badge-tone-epic { --metal: #ba89e4; --shine: #f3dcff; --edge: #6a3989; }
.badge-tone-legendary { --metal: #e5b75c; --shine: #fff1b3; --edge: #8c5b23; }
.badge-tone-unique { --metal: #ef86b7; --shine: #ffe0f0; --edge: #962b64; }
.badge-tone-mythical { --metal: #bd243b; --shine: #ffb08f; --edge: #26070c; }
.badge-tone-celestial { --metal: #776de8; --shine: #e9f7ff; --edge: #32266f; }
.badge-tone-gilded { --metal: #d9a93c; --shine: #fff1c4; --edge: #6b4a0c; }
.badge-tone-abyssal { --metal: #0e6377; --shine: #9ff3e6; --edge: #021824; }
.badge-tone-overgrown { --metal: #5aa83a; --shine: #e6ffc9; --edge: #1f4d1c; }
.badge-tone-inkbound { --metal: #2b2a30; --shine: #e9e4d6; --edge: #0d0c10; }
.badge-tone-stormforged { --metal: #3b7dff; --shine: #e2f3ff; --edge: #0b1640; }
.badge-tone-blueprint { --metal: #1f56a8; --shine: #eaf5ff; --edge: #0b2a5c; }
.badge-tone-glitched { --metal: #1a1a1e; --shine: #d6d6cc; --edge: #000000; }
.badge-tone-counterfeit { --metal: #9ba360; --shine: #eef0d8; --edge: #596033; }
.badge-tone-special { --metal: #0f9f96; --shine: #c8fff6; --edge: #0b4642; }
/* A badge is a decoration drawn in SVG (badge-cabinet.js, `medalSvg` and `ribbonSvg`): the mount
   is the ribbon over the medal, the same object wherever it hangs and scaled by `zoom`: the rack,
   the card, the pins, the close-up. It is a button where a press opens the medal up close; a plain
   box everywhere else. */
.badge-mount { position: relative; display: flow-root; box-sizing: content-box; margin: 0 auto; padding: 0; border: 0; border-radius: 12px; background: none; box-shadow: none; color: inherit; font: inherit; transition: transform 160ms ease-out; --mount-shadow: drop-shadow(0 4px 4px #30223e40); }
/* The shadow falls from the ribbon and the medal, not from the mount: a filter on the mount would hold the animated
   effect canvas inside it and redraw it through the filter every frame (#1135). */
.badge-mount > .badge-ribbon, .badge-mount .badge-medal { filter: var(--mount-shadow); transition: filter 160ms ease-out; }
.badge-mount.is-hung { width: 90px; height: 124px; }
/* The theme's button is a pastel box with a hard shadow (neobrutalist.css); a mount is none of that. */
button.badge-mount, button.badge-mount:is(:hover, :active) { background: none; box-shadow: none; cursor: pointer; }
button.badge-mount:is(:hover, :focus-visible) { transform: translateY(-3px); --mount-shadow: drop-shadow(0 8px 8px #30223e4d); }
button.badge-mount:active { transform: translateY(0); transition-duration: 60ms; }
button.badge-mount:focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
.motion-reduced button.badge-mount { transition: none; }
.motion-reduced button.badge-mount:is(:hover, :focus-visible) { transform: none; }
.badge-ribbon { position: absolute; left: 50%; top: 0; width: 60px; height: 50px; transform: translateX(-50%); }
.badge-ribbon > svg { display: block; width: 100%; height: 100%; }
.badge-medal { position: relative; display: block; width: 84px; height: 84px; margin: 0 auto; }
.badge-medal > svg { display: block; width: 100%; height: 100%; }
/* On its mount the medal hangs from the ribbon's clip; a binder or a notification takes it bare. The mount keeps that
   margin inside itself (`flow-root`): on a mount that is not a button it used to collapse through its top, and the
   medal sat on the ribbon while the whole mount moved down. */
.badge-mount > .badge-medal { margin-top: 40px; }
/* A medal wearing a rarity effect hangs by the host that carries both, so the host's box is the medal's. */
.badge-mount > .badge-effect-host { display: block; width: 84px; margin: 40px auto 0; }
.badge-medal[data-badge-effect="negative"] { filter: invert(1); }
/* A whole set held again in foil or misprinted (#933): its completion medal shines, or is printed off register. A foil
   struck in a material wears that material's sheet instead (card-foil.css). */
.badge-medal[data-badge-effect="foil"]:not([data-card-foil]) { filter: saturate(1.6) brightness(1.08) drop-shadow(0 0 3px rgb(170 220 255 / .9)) drop-shadow(0 0 6px rgb(255 180 240 / .55)); }
.badge-medal[data-badge-effect="misprint"] { filter: hue-rotate(150deg) saturate(1.3) drop-shadow(2px 0 0 rgb(255 0 90 / .55)) drop-shadow(-2px 0 0 rgb(0 190 255 / .55)); }
/* The light that crosses a medal as it tilts (card-inspector.css) keeps to the decoration: its ribbon and its body (`badgeMedalSilhouette`). */
.badge-mount > .card-inspector-glare { mask: var(--glare-mask) center / 100% 100% no-repeat; -webkit-mask: var(--glare-mask) center / 100% 100% no-repeat; }
/* A ribbon bar (#1109, badge-cabinet.js `renderRibbonBar`): its stripes, its symbol in the middle and its count, ×2 in the
   medals' gold, on its lower right corner. The rack it hangs in is social.css; the booster's opening lists them too. */
.ribbon { position: relative; display: block; width: 72px; height: 24px; line-height: 0; }
.ribbon-stripes { display: block; width: 100%; height: 100%; }
.ribbon-symbol { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1px #000); }
.ribbon-count { position: absolute; right: -4px; bottom: -9px; z-index: 1; color: #f5e2b0; font-size: .72rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 0 #0a0611, 0 0 3px #0a0611, 0 0 1px #0a0611; }