/* Supporter badges (app/src/Supporters.php badge(), public/js/ui/supporter-badge.js). Loaded on
   every page by app/views/layout.php. A small pill: a gem and the tier's name. The look is chosen per
   tier in /admin/supporters and each is finer than the one below it:

     ember     a live coal: red and orange, breathing and flickering
     bronze    warm bronze metal, a slow soft sheen
     silver    bright silver, a sheen that sweeps across
     gold      bright gold, a stronger shine and a warm glow
     amethyst  deep purple: shifting shimmer, a turning gem, sparkles and a strong glow

   Pure CSS. With prefers-reduced-motion (or html.no-anim) nothing moves; each look stays distinct. */

.sb {
  --sb-bg: #1a1310;
  --sb-edge: rgba(255, 255, 255, 0.12);
  --sb-ink: #e8e0d4;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.4em; flex: 0 0 auto;
  max-width: 100%; vertical-align: middle;
  padding: 0.18em 0.62em 0.18em 0.42em;
  border: 1px solid var(--sb-edge); border-radius: 999px;
  background: var(--sb-bg);
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.66rem; font-weight: 600; line-height: 1.35;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--sb-ink);
  cursor: default; user-select: none;
}
.sb-name { position: relative; z-index: 2; overflow: hidden; text-overflow: ellipsis; }
.sb-sr, .sb-compact .sb-name {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sb-compact { padding: 0.28em; gap: 0; }
.sb-gem {
  position: relative; z-index: 2; flex: 0 0 auto;
  width: 0.72em; height: 0.72em; border-radius: 50%;
}
/* The sweep of light (silver and up) and the sparkles (amethyst) are drawn by ::after / ::before. */
.sb::before, .sb::after { content: ""; position: absolute; pointer-events: none; }
.sb::after { inset: -1px; z-index: 1; opacity: 0; }

/* ---- ember: a live coal ---------------------------------------------------------------------- */
.sb-ember {
  --sb-bg: radial-gradient(120% 140% at 12% 50%, #4a1608 0%, #2a0d06 45%, #170906 100%);
  --sb-edge: rgba(255, 110, 40, 0.42);
  color: #ffb07a;
  text-shadow: 0 0 0.35em rgba(255, 96, 24, 0.75);
  box-shadow: 0 0 0.45em rgba(255, 80, 20, 0.28), inset 0 0 0.6em rgba(255, 70, 10, 0.18);
  animation: sb-coal 3.4s ease-in-out infinite;
}
.sb-ember .sb-gem {
  background: radial-gradient(circle at 42% 38%, #fff1c2 0%, #ffb347 22%, #ff5a1a 52%, #a1200a 78%, #3a0b04 100%);
  box-shadow: 0 0 0.35em 0.08em rgba(255, 110, 30, 0.85);
  animation: sb-flicker 2.3s steps(1, end) infinite, sb-glow 3.4s ease-in-out infinite;
}
@keyframes sb-coal {
  0%, 100% { box-shadow: 0 0 0.35em rgba(255, 80, 20, 0.22), inset 0 0 0.5em rgba(255, 70, 10, 0.14); color: #ffa46a; }
  50% { box-shadow: 0 0 0.7em rgba(255, 96, 24, 0.42), inset 0 0 0.8em rgba(255, 90, 20, 0.26); color: #ffc08e; }
}
@keyframes sb-glow {
  0%, 100% { box-shadow: 0 0 0.25em 0.04em rgba(255, 96, 24, 0.7); }
  50% { box-shadow: 0 0 0.55em 0.14em rgba(255, 130, 40, 0.95); }
}
@keyframes sb-flicker {
  0% { filter: brightness(1); } 13% { filter: brightness(1.25); } 21% { filter: brightness(0.85); }
  34% { filter: brightness(1.1); } 52% { filter: brightness(0.92); } 61% { filter: brightness(1.3); }
  74% { filter: brightness(1); } 88% { filter: brightness(0.88); }
}

/* ---- bronze: warm metal, a slow soft sheen ------------------------------------------------ */
.sb-bronze {
  --sb-bg: linear-gradient(180deg, #3a2414 0%, #24160c 55%, #1b1109 100%);
  --sb-edge: rgba(205, 138, 80, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 210, 160, 0.14), 0 0 0.3em rgba(190, 120, 60, 0.18);
}
.sb-bronze .sb-name {
  background: linear-gradient(100deg, #b87333 0%, #e6b17e 30%, #fbe0bf 45%, #d99a5f 60%, #9c5d2a 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sb-text-sheen 7s ease-in-out infinite;
}
.sb-bronze .sb-gem {
  background: radial-gradient(circle at 35% 30%, #ffe2bf 0%, #d9965a 30%, #8f5424 70%, #4a2a10 100%);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.45), 0 0 0.2em rgba(214, 150, 90, 0.5);
}

/* ---- silver: a sheen that sweeps across --------------------------------------------------- */
.sb-silver {
  --sb-bg: linear-gradient(180deg, #2c3136 0%, #1a1e22 60%, #131619 100%);
  --sb-edge: rgba(214, 224, 234, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0.4em rgba(200, 215, 230, 0.2);
}
.sb-silver .sb-name {
  background: linear-gradient(100deg, #9aa4ae 0%, #e9eef3 28%, #ffffff 42%, #c3ccd5 56%, #8b949e 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sb-text-sheen 4.5s ease-in-out infinite;
}
.sb-silver .sb-gem {
  background: conic-gradient(from 20deg, #f4f8fb, #9aa5b0, #e2e8ee, #7d8792, #f4f8fb);
  box-shadow: 0 0 0.25em rgba(230, 240, 250, 0.7);
}
.sb-silver::after {
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.38) 50%, transparent 62%) -150% 0 / 250% 100% no-repeat;
  opacity: 1; animation: sb-sweep 4.5s ease-in-out infinite;
}

/* ---- gold: bright, a stronger shine and a warm glow -------------------------------------- */
.sb-gold {
  --sb-bg: linear-gradient(180deg, #4a3508 0%, #2e2005 55%, #1d1403 100%);
  --sb-edge: rgba(255, 210, 90, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.3), 0 0 0.55em rgba(255, 196, 60, 0.38);
  animation: sb-gold-glow 3s ease-in-out infinite;
}
.sb-gold .sb-name {
  background: linear-gradient(100deg, #c98f16 0%, #ffd766 25%, #fff8d6 42%, #ffcf3f 58%, #b97d0c 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 0.25em rgba(255, 200, 70, 0.45));
  animation: sb-text-sheen 3s ease-in-out infinite;
}
.sb-gold .sb-gem {
  border-radius: 1px; transform: rotate(45deg) scale(0.9);
  background: linear-gradient(135deg, #fffbe6 0%, #ffd34d 35%, #e0a21a 65%, #8a5d05 100%);
  box-shadow: 0 0 0.4em 0.06em rgba(255, 210, 80, 0.9);
}
.sb-gold::after {
  background: linear-gradient(105deg, transparent 36%, rgba(255, 246, 200, 0.55) 48%, rgba(255, 255, 255, 0.75) 50%, transparent 64%) -150% 0 / 250% 100% no-repeat;
  opacity: 1; animation: sb-sweep 3s ease-in-out infinite;
}
@keyframes sb-gold-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.3), 0 0 0.45em rgba(255, 196, 60, 0.3); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.35), 0 0 0.9em rgba(255, 206, 80, 0.55); }
}

/* ---- amethyst: the finest -------------------------------------------------------------------- */
.sb-amethyst {
  --sb-edge: transparent;
  border: 1px solid transparent;
  background:
    linear-gradient(120deg, #2a0f4a, #461a74, #2b0d52, #5a1f7a, #2a0f4a) padding-box,
    linear-gradient(120deg, #c9a4ff, #7b3fe4, #ff9cf3, #9a6bff, #c9a4ff) border-box;
  background-size: 300% 100%, 300% 100%;
  box-shadow: 0 0 0.6em rgba(170, 100, 255, 0.55), 0 0 1.4em rgba(140, 60, 230, 0.25), inset 0 1px 0 rgba(255, 220, 255, 0.25);
  animation: sb-shimmer 5s linear infinite, sb-amethyst-glow 2.6s ease-in-out infinite;
}
.sb-amethyst .sb-name {
  background: linear-gradient(100deg, #cfa8ff 0%, #f3e6ff 22%, #ffffff 36%, #ffb8f4 50%, #b98cff 66%, #f0e0ff 82%, #cfa8ff 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 0.3em rgba(200, 130, 255, 0.6));
  animation: sb-text-sheen 3.2s linear infinite;
}
.sb-amethyst .sb-gem {
  border-radius: 2px; transform: rotate(45deg) scale(0.92);
  background: conic-gradient(from 0deg, #f7e8ff, #a35cff, #5b1fa8, #ff8ef0, #c49bff, #f7e8ff);
  box-shadow: 0 0 0.45em 0.1em rgba(200, 130, 255, 0.95);
  animation: sb-turn 6s linear infinite;
}
/* Sparkles: four points of light along the edges (clear of the letters) that twinkle. */
.sb-amethyst::before {
  inset: 0; z-index: 1;
  background:
    radial-gradient(circle at 22% 10%, #fff 0 0.05em, transparent 0.1em),
    radial-gradient(circle at 48% 92%, #ffd6fb 0 0.05em, transparent 0.1em),
    radial-gradient(circle at 74% 9%, #fff 0 0.05em, transparent 0.1em),
    radial-gradient(circle at 94% 55%, #e8d4ff 0 0.05em, transparent 0.1em);
  animation: sb-twinkle 2.2s ease-in-out infinite;
}
.sb-amethyst::after {
  background: linear-gradient(105deg, transparent 35%, rgba(255, 220, 255, 0.5) 47%, rgba(255, 255, 255, 0.85) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  opacity: 1; animation: sb-sweep 2.6s ease-in-out infinite;
}
@keyframes sb-shimmer { to { background-position: 300% 0, -300% 0; } }
@keyframes sb-amethyst-glow {
  0%, 100% { box-shadow: 0 0 0.5em rgba(170, 100, 255, 0.5), 0 0 1.2em rgba(140, 60, 230, 0.2), inset 0 1px 0 rgba(255, 220, 255, 0.25); }
  50% { box-shadow: 0 0 0.9em rgba(200, 130, 255, 0.8), 0 0 2em rgba(160, 70, 240, 0.4), inset 0 1px 0 rgba(255, 220, 255, 0.35); }
}
@keyframes sb-turn { to { transform: rotate(405deg) scale(0.92); } }
@keyframes sb-twinkle {
  0%, 100% { opacity: 0.25; filter: brightness(1); }
  30% { opacity: 1; filter: brightness(1.6); }
  60% { opacity: 0.5; }
}

/* ---- shared motion ----------------------------------------------------------------------------- */
@keyframes sb-text-sheen {
  0% { background-position: 100% 0; }
  60%, 100% { background-position: 0% 0; }
}
@keyframes sb-sweep {
  0% { background-position: 150% 0; }
  55%, 100% { background-position: -150% 0; }
}

/* ---- where badges sit --------------------------------------------------------------------------- */
/* The game header (game-view.js): beside the wordmark. On the narrowest phones (the same 26rem step
   as game.css, where Save, music, settings and the menu only just fit) the badge is its gem alone;
   the name stays for screen readers and in the title. */
.game-bar .sb { margin-left: 0.15rem; }
/* In the game the badge is a button that opens a thank-you note (game-view.js). */
.sb-btn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; border-radius: 999px; }
.sb-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.sb-pop p { margin: 0; }
.sb-pop .sb-pop-head { margin-bottom: 0.5rem; }
.sb-pop .sb-pop-badge { font-size: 0.8rem; }
.sb-pop-text { font-size: 0.875rem; color: var(--text); line-height: 1.5; }
@media (max-width: 26rem) {
  .game-bar .sb:not(.sb-pop-badge) { padding: 0.3em; gap: 0; margin-left: 0; }
  .game-bar .sb:not(.sb-pop-badge) .sb-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* The site's top bar (layout.php) and the landing page's (landing.php): beside the account link. */
.topbar .sb, .landing-top .sb { font-size: 0.62rem; }

/* An expired assignment in the admin: the badge, dimmed and still. */
.sb.sb-off { filter: grayscale(0.85) brightness(0.7); opacity: 0.75; }
.sb.sb-off, .sb.sb-off *, .sb.sb-off::before, .sb.sb-off::after { animation: none !important; }
.sb.sb-off::after, .sb.sb-off::before { opacity: 0 !important; }

/* Still, but each look distinct: the glows, metals and sparkles stay; the sheen sits mid-way. */
@media (prefers-reduced-motion: reduce) {
  .sb, .sb *, .sb::before, .sb::after { animation: none !important; }
  .sb .sb-name { background-position: 40% 0 !important; }
  .sb::after { opacity: 0 !important; }
  .sb-amethyst::before { opacity: 0.8; }
}
html.no-anim .sb .sb-name { background-position: 40% 0; }
html.no-anim .sb::after { opacity: 0 !important; }
html.no-anim .sb-amethyst::before { opacity: 0.8; }