/* A Ropeak badge page (server/badge-page.js): one earned badge, celebrated.
   The sticker slaps on, floats, tilts toward the pointer and catches the light;
   badge.js drives the tilt, confetti and fanfare. Reads the site tokens from
   styles.css and theme.css, so both themes share these rules. */

/* Each art family's light: accent and a paler second tone (as RGB triplets),
   the headline figure's gradient, the sticker's resting angle and its foil. */
[data-family] {
  --accent-rgb:157 172 196;
  --accent-2-rgb:226 233 243;
  --mark:linear-gradient(100deg,#3d4b64 0%,#7b89a2 46%,#34415a 100%);
  --rest:-4deg;
  --foil-base:.06;
  --foil-gain:.5
}

[data-family=gold] {
  --accent-rgb:255 186 38;
  --accent-2-rgb:255 228 150;
  --mark:linear-gradient(100deg,#c27a00 0%,#f5ad16 42%,#b36400 100%);
  --rest:3deg
}

[data-family=holo] {
  --accent-rgb:150 128 255;
  --accent-2-rgb:120 226 255;
  --mark:linear-gradient(100deg,#5d6bff 0%,#a95cff 34%,#f2559b 66%,#1fb3d8 100%);
  --rest:-2deg;
  --foil-base:.12;
  --foil-gain:.5
}

[data-family=flame] {
  --accent-rgb:251 10 54;
  --accent-2-rgb:255 170 70;
  --mark:linear-gradient(100deg,#fb0a36 0%,#ff4a1f 55%,#ff8a00 100%);
  --rest:4deg
}

[data-family=bronze] {
  --accent-rgb:214 124 66;
  --accent-2-rgb:255 210 168;
  --mark:linear-gradient(100deg,#9b4b19 0%,#d97b3c 50%,#8a4219 100%);
  --rest:-3deg
}

[data-family=royal] {
  --accent-rgb:47 107 255;
  --accent-2-rgb:255 211 74;
  --mark:linear-gradient(100deg,#1846d8 0%,#3d82ff 52%,#2437b8 100%);
  --rest:2deg
}

/* Omega (100B), the rarest: obsidian with prismatic light. */
[data-family=omega] {
  --accent-rgb:124 92 255;
  --accent-2-rgb:255 170 220;
  --prism:linear-gradient(100deg,#6fe0ff 0%,#a98bff 30%,#ff7ac4 62%,#ffcf6e 100%);
  --mark:linear-gradient(100deg,#1b1533 0%,#5338e0 34%,#c93c8f 68%,#d97a06 100%);
  --rest:-3deg;
  --foil-base:.1;
  --foil-gain:.55
}

/* Veteran: evergreen and brass. */
[data-family=evergreen] {
  --accent-rgb:22 163 110;
  --accent-2-rgb:196 240 214;
  --mark:linear-gradient(100deg,#0b6b47 0%,#18a673 50%,#0a5a3c 100%);
  --rest:2deg
}

[data-theme=dark] [data-family] {
  --mark:linear-gradient(100deg,#c9d4e6 0%,#ffffff 46%,#a9b7cd 100%)
}

[data-theme=dark] [data-family=omega] {
  --mark:linear-gradient(100deg,#b9a8ff 0%,#ffffff 34%,#ff9fd0 68%,#ffd27a 100%)
}

[data-theme=dark] [data-family=evergreen] {
  --mark:linear-gradient(100deg,#3fd69a 0%,#b5f2d6 50%,#2fbf86 100%)
}

[data-theme=dark] [data-family=gold] {
  --mark:linear-gradient(100deg,#ffc94a 0%,#ffe9a6 45%,#f0a419 100%)
}

[data-theme=dark] [data-family=holo] {
  --mark:linear-gradient(100deg,#8f9bff 0%,#d08cff 34%,#ff8cc0 66%,#6fe0ff 100%)
}

[data-theme=dark] [data-family=flame] {
  --mark:linear-gradient(100deg,#ff3a5c 0%,#ff7040 55%,#ffad33 100%)
}

[data-theme=dark] [data-family=bronze] {
  --mark:linear-gradient(100deg,#e7955e 0%,#ffc79c 50%,#d47c43 100%)
}

[data-theme=dark] [data-family=royal] {
  --mark:linear-gradient(100deg,#6d9dff 0%,#a9c6ff 52%,#5b86ff 100%)
}

.badge-body {
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden
}

.badge-wrap {
  width:100%;
  max-width:1550px;
  margin:0 auto;
  padding:0 52px
}

.badge-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:clamp(68px,10vh,104px);
  position:relative;
  z-index:5
}

.badge-header-actions {
  display:flex;
  align-items:center;
  gap:10px
}

.sound-toggle,.guide-toggle {
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:42px;
  padding:0 17px 0 14px;
  border:1px solid var(--control-edge);
  border-radius:var(--radius-control);
  background:var(--control-fill);
  color:var(--text-3);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.01em;
  transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)
}

.sound-toggle:hover,.guide-toggle:hover {
  background:var(--control-fill-hover);
  border-color:var(--control-edge-hover);
  color:var(--ink)
}

.sound-toggle:active,.guide-toggle:active {
  transform:scale(.97)
}

.guide-toggle {
  color:var(--ink)
}

.guide-short {
  display:none
}

.sound-toggle[aria-pressed=true] {
  color:var(--ink)
}

.sound-toggle[aria-pressed=true] .sound-off,.sound-toggle[aria-pressed=false] .sound-on {
  display:none
}

/* The page */
.badge-page {
  --sticker:clamp(184px,min(60vw,30vh),300px);
  flex:1;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:0 24px 24px;
  position:relative;
  overflow-x:hidden
}

/* The spotlight is wider than a phone: clip it to the page, not the viewport,
   so a phone never zooms out to fit it. */
@supports (overflow-x:clip) {
  .badge-page {
    overflow-x:clip
  }
}

.badge-hero {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}

/* The stage: a spotlight, soft rays and the impact ring behind the sticker. */
.badge-stage {
  position:relative;
  isolation:isolate;
  width:var(--sticker);
  height:var(--sticker);
  margin:0 auto clamp(20px,3vh,34px)
}

.stage-glow,.stage-rays,.stage-ring {
  position:absolute;
  pointer-events:none;
  border-radius:50%
}

.stage-glow {
  z-index:-3;
  inset:-62%;
  background:radial-gradient(closest-side,rgb(var(--accent-2-rgb)/.62) 0%,rgb(var(--accent-rgb)/.2) 46%,rgb(var(--accent-rgb)/.06) 70%,transparent 100%)
}

.stage-rays {
  z-index:-2;
  inset:-58%;
  background:repeating-conic-gradient(from 4deg,rgb(var(--accent-rgb)/.2) 0deg,transparent 3.5deg 11.5deg,rgb(var(--accent-rgb)/.2) 15deg);
  -webkit-mask:radial-gradient(closest-side,#000 18%,#0000 72%);
  mask:radial-gradient(closest-side,#000 18%,#0000 72%);
  opacity:.5
}

.stage-ring {
  z-index:-1;
  inset:4%;
  border:2px solid rgb(var(--accent-rgb)/.55);
  box-shadow:0 0 22px rgb(var(--accent-rgb)/.35),inset 0 0 22px rgb(var(--accent-rgb)/.25);
  opacity:0
}

[data-theme=dark] .stage-glow {
  background:radial-gradient(closest-side,rgb(var(--accent-rgb)/.42) 0%,rgb(var(--accent-rgb)/.16) 46%,rgb(var(--accent-rgb)/.05) 70%,transparent 100%)
}

[data-theme=dark] .stage-rays {
  opacity:.62
}

/* Omega's stage: a prismatic spotlight, rays in every colour and a second
   impact ring. */
[data-family=omega] .stage-glow {
  background:radial-gradient(closest-side,rgb(255 255 255/.75) 0%,rgb(169 139 255/.34) 30%,rgb(255 122 196/.17) 52%,rgb(111 224 255/.08) 72%,transparent 100%)
}

[data-theme=dark] [data-family=omega] .stage-glow {
  background:radial-gradient(closest-side,rgb(169 139 255/.46) 0%,rgb(255 122 196/.18) 40%,rgb(111 224 255/.07) 70%,transparent 100%)
}

[data-family=omega] .stage-rays {
  background:conic-gradient(from 30deg,rgb(111 224 255/.3),rgb(169 139 255/.3),rgb(255 122 196/.3),rgb(255 207 110/.3),rgb(111 224 255/.3));
  -webkit-mask:repeating-conic-gradient(from 4deg,#000 0deg,#0000 3.5deg 11.5deg,#000 15deg),radial-gradient(closest-side,#000 18%,#0000 72%);
  -webkit-mask-composite:source-in;
  mask:repeating-conic-gradient(from 4deg,#000 0deg,#0000 3.5deg 11.5deg,#000 15deg),radial-gradient(closest-side,#000 18%,#0000 72%);
  mask-composite:intersect
}

[data-family=omega] .stage-ring {
  border:0;
  background:conic-gradient(from 200deg,#6fe0ff,#a98bff,#ff7ac4,#ffcf6e,#6fe0ff);
  box-shadow:none;
  -webkit-mask:radial-gradient(closest-side,#0000 calc(100% - 3px),#000 calc(100% - 2px),#000 calc(100% - 1px),#0000 100%);
  mask:radial-gradient(closest-side,#0000 calc(100% - 3px),#000 calc(100% - 2px),#000 calc(100% - 1px),#0000 100%)
}

/* The shadow on the page below: it lands with the slap (on the element) and
   breathes with the float (on its pseudo), one animation each so both stay on
   the compositor. */
.sticker-shadow {
  position:absolute;
  z-index:-1;
  left:16%;
  right:16%;
  bottom:-9%;
  height:9%;
  pointer-events:none
}

.sticker-shadow::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(closest-side,rgb(15 34 72/.2),transparent)
}

[data-theme=dark] .sticker-shadow::before {
  background:radial-gradient(closest-side,rgb(0 0 0/.5),transparent)
}

/* The sticker. Wrappers keep each motion separate: the slap on entry, the idle
   float, then badge.js's pointer tilt. The art has one set; its foil, glare
   and glint each have a set of their own over it (server/badge-page.js), all
   moving as one, in a group square to the page that they blend in. */
.sticker {
  position:absolute;
  inset:0;
  display:block;
  padding:0;
  border:0;
  border-radius:30%;
  background:none;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none
}

.sticker:focus-visible {
  outline-offset:12px;
  border-radius:34px
}

/* In Safari the art's drop shadow came out a little lighter where the group
   the foil and glare blend in did not reach: a faint seam around the sticker.
   An invisible outline stretches the group over the whole shadow. (On the
   foil's and glare's own sets it did too, but Chrome without a GPU then
   took a tenth longer to put each frame together.) */
.sticker-group {
  position:absolute;
  inset:0;
  isolation:isolate;
  outline:80px solid transparent
}

/* With forced colours on (Windows high contrast) a browser draws an outline in
   the text colour whatever colour it is given, so that one became a solid
   80px frame round the sticker. Safari has no forced colours, so its seam
   stays cured. */
@media (forced-colors:active) {
  .sticker-group {
    outline:none
  }
}

.sticker-group,.sticker-slap,.sticker-float,.sticker-tilt {
  display:block;
  width:100%;
  height:100%
}

.sticker-slap {
  transform:rotate(var(--rest))
}

.sticker-float {
  perspective:900px
}

/* badge.js sets --tilt on the sticker, so every set tilts alike. */
.sticker-tilt {
  position:relative;
  will-change:transform;
  transform-origin:50% 50%;
  transform:var(--tilt,none)
}

.sticker-art {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  -webkit-user-drag:none;
  filter:url(#die-cut) drop-shadow(0 1px 1px rgb(15 34 72/.18)) drop-shadow(0 14px 18px rgb(15 34 72/.2))
}

[data-theme=dark] .sticker-art {
  filter:url(#die-cut) drop-shadow(0 1px 1px rgb(0 0 0/.35)) drop-shadow(0 16px 22px rgb(0 0 0/.42))
}

/* Holographic foil and a specular glare, clipped to the artwork itself.
   Neither is painted with the art: a tilt slides and scales their sheets
   (::before) and fades them, which the browser does without painting. When
   it moved their gradients instead, every frame repainted the art under them
   through its die-cut filter and drop shadows (Safari: about 25 fps under
   the pointer). They
   blend onto the art from sets of their own, not from inside its tilt: a
   blend inside the tilted set makes the browser draw the art through a
   surface of its own first, a little softer (Chrome, about a quarter of a
   CSS pixel); drawn over it from outside, in the sticker's square group,
   it is not. */
.sticker-foil,.sticker-glare,.sticker-shine {
  position:absolute;
  inset:0;
  pointer-events:none
}

/* Each layer's tilt is masked by the art, whose image server/badge-page.js
   sets on it. */
:is(.sticker-foil,.sticker-glare,.sticker-shine) .sticker-tilt {
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat
}

.sticker-foil,.sticker-glare {
  will-change:opacity
}

:is(.sticker-foil,.sticker-glare) .sticker-tilt::before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  will-change:transform
}

.sticker-foil {
  --rainbow:linear-gradient(118deg,transparent 18%,#ff7ad1 30%,#ffe27a 38%,#7dffc8 46%,#6fb6ff 54%,#b98cff 62%,#ff7ad1 70%,transparent 82%);
  mix-blend-mode:overlay;
  opacity:calc(var(--foil-base) + var(--foil,0) * var(--foil-gain))
}

/* The foil's sheet is 280% of the sticker, as its background was, and slides
   as that background's position did: 1.8 sticker widths times --fx back,
   which is 9/14 of the sheet's own width. Untilted it rests where badge.js
   leaves it after a tilt, 50% 50%. */
.sticker-foil .sticker-tilt::before {
  width:280%;
  height:280%;
  background:linear-gradient(118deg,transparent 30%,rgb(255 255 255/.78) 47%,rgb(255 255 255/.78) 51%,transparent 68%),var(--rainbow);
  transform:translate(calc(var(--fx,50%) * -9 / 14),calc(var(--fy,50%) * -9 / 14))
}

/* The holographic coin is all rainbow. */
[data-family=holo] .sticker-foil .sticker-tilt::before {
  background:var(--rainbow)
}

/* Omega's obsidian takes fine prismatic bands, screened on so they light the
   dark face rather than wash it out. Its sheet is 320%: 2.2 widths of travel,
   11/16 of the sheet. */
[data-family=omega] .sticker-foil {
  mix-blend-mode:screen
}

[data-family=omega] .sticker-foil .sticker-tilt::before {
  width:320%;
  height:320%;
  background:repeating-linear-gradient(118deg,rgb(111 224 255/0) 0%,rgb(111 224 255/.5) 2.5%,rgb(169 139 255/.5) 5%,rgb(255 122 196/.5) 7.5%,rgb(255 207 110/.5) 10%,rgb(111 224 255/0) 12.5%);
  transform:translate(calc(var(--fx,50%) * -11 / 16),calc(var(--fy,50%) * -11 / 16))
}

/* The glare is a circle centred on --gx --gy, as wide as from there to the
   sticker's farthest corner, white fading out by 52% of that. Its sheet holds
   that circle once, centred and as wide as the sheet, and the tilt moves it
   there and scales it by --gs (badge.js: 1.04 times the distance to the
   farthest corner, in sticker widths; 1.0606 at rest). */
.sticker-glare {
  mix-blend-mode:soft-light;
  opacity:calc(.45 + var(--foil,0) * .55)
}

.sticker-glare .sticker-tilt::before {
  background:radial-gradient(circle closest-side,rgb(255 255 255/.75) 0%,rgb(255 255 255/.18) 53.846%,transparent 100%);
  transform:translate(calc(var(--gx,32%) - 50%),calc(var(--gy,24%) - 50%)) scale(var(--gs,1.0606))
}

/* A single glint that crosses the art after the slap. At rest it is off
   the artwork, so nothing shows. It sweeps on a layer of its own (its tilt):
   painted in with the art, every frame of the sweep re-ran the art's die-cut
   filter and drop shadows, and the confetti stuttered. It is pure white, so it
   needs no blend mode (white screened is white). It is hidden but while the
   sticker celebrates (badge-shine shows it): shown at rest, its layer kept
   a sticker-sized picture of nothing, its mask and a surface to mask it in. */
.sticker-shine .sticker-tilt {
  visibility:hidden;
  background:linear-gradient(112deg,transparent 43%,rgb(255 255 255/.18) 46%,rgb(255 255 255/.72) 49.5%,rgb(255 255 255/.18) 53%,transparent 56%);
  background-size:300% 100%;
  background-position:100% 0
}

/* Copy */
.badge-kicker {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px 6px 10px;
  border:1px solid var(--control-edge);
  border-radius:var(--radius-control);
  background:var(--control-fill);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.3
}

.badge-kicker img {
  width:18px;
  height:auto
}

/* Omega's kicker: an obsidian chip with a prismatic edge. */
.kicker-tier {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:-3px -10px -3px 4px;
  padding:3px 11px 3px 9px;
  border:1px solid transparent;
  border-radius:var(--radius-control);
  background:linear-gradient(#17112e,#17112e) padding-box,var(--prism) border-box;
  color:#fff;
  font-weight:700
}

.kicker-tier span {
  background:var(--prism);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:13px;
  font-weight:800;
  letter-spacing:0
}

.badge-title {
  margin-top:16px;
  max-width:13ch;
  font-size:clamp(38px,min(6vw,8.5vh),76px);
  line-height:1.02;
  font-weight:800;
  letter-spacing:-.052em;
  text-wrap:balance
}

/* A long genre name ("#2 in Roleplay & Avatar Sim") steps down a size. */
.badge-title.is-long {
  max-width:15ch;
  font-size:clamp(34px,min(4.9vw,7vh),62px)
}

.badge-title-mark {
  background:var(--mark);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-right:.04em;
  margin-right:-.04em
}

.badge-line {
  margin-top:16px;
  max-width:34em;
  color:var(--text-2);
  font-size:clamp(16px,1.45vw,19px);
  line-height:1.5;
  letter-spacing:-.012em;
  text-wrap:balance;
  overflow-wrap:anywhere
}

.badge-line .nowrap {
  white-space:nowrap
}

/* Proof: who it was awarded to and the recorded figures, like a certificate. */
.badge-proof {
  display:grid;
  grid-template-columns:minmax(0,auto);
  grid-auto-flow:column;
  grid-auto-columns:auto;
  max-width:min(100%,800px);
  margin-top:22px;
  border:1px solid var(--glass-edge);
  border-radius:20px;
  background:var(--glass-fill);
  box-shadow:var(--glass-highlight),var(--glass-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  text-align:left
}

.badge-proof>* {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-width:0;
  padding:15px 22px
}

.badge-proof>*+* {
  border-left:1px solid var(--glass-edge-strong)
}

.badge-proof small {
  color:var(--text-3);
  font-size:12px;
  font-weight:500;
  line-height:1.2
}

.badge-proof strong {
  font-size:17px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.25;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.proof-game {
  flex-direction:row!important;
  align-items:center;
  justify-content:flex-start!important;
  gap:13px!important;
  border-radius:19px 0 0 19px;
  transition:background-color var(--t-fast) var(--ease-out)
}

.proof-game:hover {
  background:var(--row-hover)
}

.proof-game img {
  width:46px;
  height:46px;
  flex-shrink:0;
  border-radius:12px;
  object-fit:cover;
  background:var(--surface-raised);
  box-shadow:0 0 0 1px var(--glass-edge)
}

.proof-game>span {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0
}

.proof-game strong {
  font-size:15.5px;
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow-wrap:anywhere
}

.badge-proof .proof-item em {
  color:var(--text-3);
  font-size:12px;
  font-style:normal;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.proof-game em {
  color:var(--text-3);
  font-size:12.5px;
  font-style:normal;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.badge-seal {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  color:var(--text-3);
  font-size:12.5px;
  font-weight:500
}

.badge-seal svg {
  color:var(--blue)
}

.badge-seal>span {
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:6px
}

.seal-dot {
  color:var(--text-4)
}

/* On a lower tier's page: the tier that replaced it, in the seal's voice. */
.badge-upgrade {
  margin-top:6px;
  font-size:12.5px;
  font-weight:500
}

.badge-upgrade a {
  color:var(--text-3);
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:color var(--t-fast) var(--ease-out),text-decoration-color var(--t-fast) var(--ease-out)
}

.badge-upgrade a:hover {
  color:var(--ink);
  text-decoration-color:currentColor
}

/* Actions */
.badge-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:20px
}

.badge-actions .button {
  min-height:50px;
  padding:0 26px;
  font-size:15px
}

.share-button {
  gap:10px
}

.share-button svg {
  margin-left:-3px
}

.stats-button {
  gap:12px;
  max-width:100%
}

.stats-label {
  display:inline-flex;
  align-items:baseline;
  min-width:0;
  overflow:hidden;
  white-space:pre
}

.stats-name {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis
}

.share-fallback {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:min(100%,460px);
  margin-top:18px
}

.share-fallback label {
  color:var(--text-3);
  font-size:12.5px
}

.share-fallback input {
  width:100%;
  height:44px;
  padding:0 18px;
  border:1px solid var(--control-edge-hover);
  border-radius:var(--radius-control);
  background:var(--control-fill-hover);
  color:var(--ink);
  font-size:14px;
  text-align:center;
  font-variant-numeric:tabular-nums
}

/* More badges from this game */
.more-badges {
  margin-top:76px;
  text-align:center
}

.more-badges h2 {
  overflow-wrap:anywhere;
  color:var(--text-2);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em
}

.more-badges h2 span {
  color:var(--ink)
}

.more-badges ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin:20px 0 0;
  padding:0;
  list-style:none
}

.more-badge {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:136px;
  padding:18px 10px 15px;
  border:1px solid var(--glass-edge);
  border-radius:22px;
  background:var(--glass-fill);
  box-shadow:var(--glass-highlight),var(--glass-shadow);
  transition:border-color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)
}

.more-badge:hover {
  border-color:var(--glass-edge-strong)
}

.more-sticker {
  display:block;
  width:76px;
  height:76px;
  transform:rotate(var(--rest));
  transition:transform var(--t-spring) var(--ease-spring)
}

.more-badge:hover .more-sticker,.more-badge:focus-visible .more-sticker {
  transform:rotate(0deg) scale(1.08)
}

.more-sticker img,.capture-stack img {
  display:block;
  width:100%;
  height:100%;
  filter:url(#die-cut-sm) drop-shadow(0 6px 8px rgb(15 34 72/.18))
}

[data-theme=dark] :is(.more-sticker img,.capture-stack img) {
  filter:url(#die-cut-sm) drop-shadow(0 6px 10px rgb(0 0 0/.45))
}

.more-label {
  color:var(--ink);
  font-size:13px;
  font-weight:600;
  letter-spacing:-.01em
}

/* For visitors: the way in. */
.badge-capture {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  width:min(100%,820px);
  margin:64px auto 0;
  padding:22px 24px 22px 26px;
  border:1px solid var(--glass-edge);
  border-radius:24px;
  background:var(--glass-fill);
  box-shadow:var(--glass-highlight),var(--glass-shadow)
}

.capture-stack {
  display:flex;
  padding-left:4px
}

.capture-stack img {
  width:52px;
  height:52px
}

.capture-stack img+img {
  margin-left:-16px
}

.capture-stack img:nth-child(1) {
  transform:rotate(-12deg) translateY(3px)
}

.capture-stack img:nth-child(2) {
  transform:translateY(-3px);
  position:relative;
  z-index:1
}

.capture-stack img:nth-child(3) {
  transform:rotate(11deg) translateY(3px)
}

.capture-copy h2 {
  font-size:18px;
  font-weight:700;
  letter-spacing:-.025em
}

.capture-copy p {
  margin-top:4px;
  color:var(--text-2);
  font-size:14px;
  line-height:1.5
}

.capture-button {
  min-height:46px
}

.capture-guide {
  padding:0;
  border:0;
  background:none;
  color:var(--ink);
  font:inherit;
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--control-edge-hover);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:color var(--t-fast) var(--ease-out),text-decoration-color var(--t-fast) var(--ease-out)
}

.capture-guide:hover {
  color:var(--red);
  text-decoration-color:currentColor
}

.badge-body>.site-footer {
  margin-top:40px
}

/* Every badge: the guide dialog (badge.js opens it). The head stays put and
   the groups scroll beneath it, so the close button is always in reach. */
.badge-guide {
  width:min(800px,calc(100vw - 32px));
  max-width:none;
  max-height:min(880px,calc(100dvh - 32px));
  overflow:hidden;
  overscroll-behavior:contain
}

.badge-guide[open] {
  display:flex;
  flex-direction:column
}

.guide-head {
  position:relative;
  flex-shrink:0;
  padding:28px 32px 20px;
  border-bottom:1px solid var(--glass-edge-strong)
}

.guide-close {
  top:16px;
  right:16px;
  width:44px;
  height:44px;
  border:1px solid transparent;
  color:var(--text-2)
}

.guide-close:hover {
  color:var(--ink)
}

.guide-kicker,.badge-guide h2 {
  padding-right:56px
}

.guide-kicker {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-3);
  font-size:11px;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase
}

.badge-guide h2 {
  margin-top:10px;
  font-size:28px;
  font-weight:780;
  letter-spacing:-.035em;
  line-height:1.15;
  text-wrap:balance
}

.guide-summary {
  margin-top:8px;
  color:var(--text-2);
  font-size:14.5px;
  line-height:1.5;
  overflow-wrap:anywhere
}

.guide-summary strong {
  color:var(--ink);
  font-weight:650
}

.guide-meter {
  display:flex;
  gap:4px;
  max-width:360px;
  margin-top:14px
}

.guide-meter i {
  flex:1;
  height:5px;
  border-radius:3px;
  background:var(--control-edge-hover)
}

.guide-meter i.is-on {
  background:var(--red)
}

.guide-body {
  /* The containing block for its visually hidden labels, so revealing one scrolls the body, not the dialog. */
  position:relative;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:4px 32px 12px
}

.guide-group {
  display:grid;
  grid-template-columns:minmax(0,13.5rem) minmax(0,1fr);
  gap:8px 28px;
  padding:22px 0
}

.guide-group+.guide-group,.guide-singles {
  border-top:1px solid var(--glass-edge-strong)
}

.guide-singles>.guide-group {
  border-top:0
}

/* The single badges (chart, genre, veteran) side by side: the title, the
   badge, then how it is earned. */
.guide-singles {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 28px
}

.guide-singles .guide-group {
  display:flex;
  flex-direction:column;
  gap:12px
}

.guide-singles .guide-copy {
  display:contents
}

.guide-singles .guide-tier {
  display:grid;
  grid-template-columns:60px minmax(0,1fr);
  align-items:center;
  column-gap:12px;
  margin-left:-6px;
  padding:6px 10px 6px 6px;
  text-align:left
}

.guide-singles .guide-tiers li {
  width:auto
}

.guide-singles .guide-sticker {
  grid-row:1/3;
  margin:0
}

.guide-singles .guide-label {
  align-self:end
}

.guide-singles .guide-state {
  align-self:start
}

.guide-copy h3 {
  font-size:16px;
  font-weight:700;
  letter-spacing:-.02em
}

.guide-copy p {
  margin-top:6px;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.5
}

.guide-copy .guide-count {
  color:var(--text-3);
  font-size:12.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums
}

.guide-tiers {
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:6px;
  margin:-4px 0 0;
  padding:0;
  list-style:none
}

.guide-tiers li {
  width:92px
}

.guide-tier {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  height:100%;
  padding:10px 4px 10px;
  border-radius:18px;
  text-align:center;
  transition:background-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)
}

.guide-sticker {
  position:relative;
  display:block;
  width:60px;
  height:60px;
  margin-bottom:7px;
  transform:rotate(var(--rest));
  transition:transform var(--t-spring) var(--ease-spring)
}

.guide-sticker img {
  display:block;
  width:100%;
  height:100%;
  filter:url(#die-cut-sm) drop-shadow(0 5px 7px rgb(15 34 72/.16))
}

[data-theme=dark] .guide-sticker img {
  filter:url(#die-cut-sm) drop-shadow(0 5px 9px rgb(0 0 0/.42))
}

.guide-label {
  color:var(--ink);
  font-size:12.5px;
  font-weight:650;
  letter-spacing:-.01em;
  line-height:1.25;
  overflow-wrap:anywhere
}

.guide-state {
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.3;
  white-space:nowrap
}

/* Earned: a check on the sticker. */
.guide-check {
  position:absolute;
  right:-5px;
  bottom:-3px;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border:2px solid var(--dialog-fill);
  border-radius:50%;
  background:var(--green);
  color:#fff;
  transform:rotate(calc(var(--rest) * -1))
}

.guide-check svg {
  width:11px;
  height:11px;
  stroke-width:3.2
}

a.guide-tier:hover {
  background:var(--row-hover)
}

a.guide-tier:hover .guide-sticker,a.guide-tier:focus-visible .guide-sticker {
  transform:rotate(0deg) scale(1.08)
}

/* The badge this page is about. */
.guide-tier.is-current {
  background:rgb(var(--accent-rgb)/.1);
  box-shadow:inset 0 0 0 1.5px rgb(var(--accent-rgb)/.5)
}

.guide-tier.is-current .guide-state {
  color:var(--ink);
  font-weight:650
}

/* Not yet: the sticker greyed and flattened. */
.guide-tier.is-locked .guide-sticker {
  transform:none
}

.guide-tier.is-locked .guide-sticker img {
  opacity:.42;
  filter:url(#die-cut-sm) grayscale(1) contrast(.9)
}

[data-theme=dark] .guide-tier.is-locked .guide-sticker img {
  opacity:.34;
  filter:url(#die-cut-sm) grayscale(1) brightness(.85)
}

.guide-tier.is-locked .guide-label {
  color:var(--text-3);
  font-weight:600
}

.guide-tier.is-locked .guide-state {
  color:var(--text-4)
}

/* The toast after a link is copied. */
.badge-toast {
  position:fixed;
  z-index:60;
  left:50%;
  bottom:max(24px,env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 18px 11px 15px;
  border-radius:var(--radius-control);
  background:var(--ink);
  color:var(--bg);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  box-shadow:0 12px 30px -10px rgb(8 14 33/.45);
  opacity:0;
  transform:translate(-50%,16px) scale(.96);
  pointer-events:none;
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-spring) var(--ease-spring)
}

.badge-toast:empty {
  visibility:hidden
}

.badge-toast.is-visible {
  opacity:1;
  transform:translate(-50%,0) scale(1)
}

.badge-toast svg {
  color:var(--green)
}

.badge-confetti {
  position:fixed;
  z-index:50;
  inset:0;
  pointer-events:none
}

.badge-filters {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

/* Motion. The entry plays on load (badge.js adds .is-celebrating once the art
   has decoded); a tap on the sticker restarts it. */
@media (prefers-reduced-motion:no-preference) {
  .badge-js .badge-page:not(.is-live) :is(.sticker-group,.sticker-shadow) {
    opacity:0;
    animation:badge-failsafe 1ms linear 2.5s forwards
  }
  /* The fade-in fades the sticker's group, art, foil, glare and glint as one
     (not the button, whose focus ring stays put through a replay), only as
     long as the fade (the slap's first 14%, on the drop's easing), and
     lets go once played: it ends at the sticker's own opacity, so nothing
     changes on screen. An opacity animation in force inside the slap, over the
     art and the glint's layer, makes the browser draw them into a surface of
     their own first, a little softer, so one held after the slap left the
     sticker soft for good. The motion still holds. */
  .badge-page.is-celebrating .sticker-group {
    animation:badge-slap-fade 114.8ms cubic-bezier(.5,0,.85,.4) backwards
  }
  .badge-page.is-celebrating .sticker-slap {
    animation:badge-slap 820ms both
  }
  .badge-page.is-celebrating .sticker-shadow {
    animation:badge-shadow-slap 820ms both
  }
  .badge-page.is-celebrating .sticker-shadow::before {
    animation:badge-shadow-float 6s ease-in-out 1.2s infinite
  }
  .badge-page.is-celebrating .sticker-float {
    animation:badge-float 6s ease-in-out 1.2s infinite
  }
  .badge-page.is-celebrating .stage-ring {
    animation:badge-ring 900ms cubic-bezier(.2,.7,.3,1) 330ms forwards
  }
  .badge-page.is-celebrating .stage-glow {
    animation:badge-glow 1100ms var(--ease-out) 180ms both
  }
  .badge-page.is-celebrating .stage-rays {
    animation:badge-rays 2600ms cubic-bezier(.16,.8,.3,1) 220ms both
  }
  /* Filled backwards only: the glint shows, off the art, from the slap's
     start, so its layer is made with the slap's as it always was (made at
     the sweep, mid-slap, Chrome drew the art's outline a shade apart), and
     it is hidden again once it has crossed. */
  .badge-page.is-celebrating .sticker-shine .sticker-tilt {
    animation:badge-shine 950ms cubic-bezier(.45,0,.25,1) 640ms backwards
  }
  .reveal {
    animation:badge-rise 760ms var(--ease-out) both;
    animation-delay:calc(260ms + var(--i,0) * 70ms)
  }
  /* Omega lands from higher, with a brighter flash and a second ring. */
  .badge-page[data-family=omega].is-celebrating .sticker-slap {
    animation-name:badge-slap-omega
  }
  .badge-page[data-family=omega].is-celebrating .stage-glow {
    animation:badge-glow-omega 1300ms var(--ease-out) 160ms both
  }
  .badge-page.is-celebrating .stage-echo {
    animation:badge-ring 1250ms cubic-bezier(.2,.7,.3,1) 480ms forwards
  }
  /* The guide settles in on the site's dialog spring (motion.css, which badge
     pages do not load). Backwards fill only, so no transform is left behind. */
  .badge-guide[open] {
    animation:badge-guide-in 520ms var(--ease-spring) backwards
  }
  .badge-guide[open]::backdrop {
    animation:badge-backdrop-in 260ms var(--ease-out) backwards
  }
}

@media (prefers-reduced-motion:reduce) {
  .badge-page.is-celebrating .stage-glow {
    animation:badge-glow-pulse 900ms ease-out
  }
}

@keyframes badge-failsafe {
  to {
    opacity:1
  }
}

/* Lifted off the page, then pressed down onto it: a quick drop, a squash on
   impact (42%, about 340ms in) and a settling wobble. The sticker fades in
   with badge-slap-fade meanwhile. */
@keyframes badge-slap {
  0% {
    transform:translate3d(0,-7%,0) scale(1.8) rotate(calc(var(--rest) - 14deg));
    animation-timing-function:cubic-bezier(.5,0,.85,.4)
  }
  42% {
    transform:translate3d(0,0,0) scale(.9) rotate(calc(var(--rest) + 1.5deg));
    animation-timing-function:cubic-bezier(.2,.7,.3,1)
  }
  58% {
    transform:scale(1.045) rotate(calc(var(--rest) - .8deg))
  }
  74% {
    transform:scale(.985) rotate(calc(var(--rest) + .3deg))
  }
  88% {
    transform:scale(1.006) rotate(var(--rest))
  }
  100% {
    transform:scale(1) rotate(var(--rest))
  }
}

@keyframes badge-slap-omega {
  0% {
    transform:translate3d(0,-9%,0) scale(2.05) rotate(calc(var(--rest) - 20deg));
    animation-timing-function:cubic-bezier(.5,0,.85,.4)
  }
  42% {
    transform:translate3d(0,0,0) scale(.88) rotate(calc(var(--rest) + 2deg));
    animation-timing-function:cubic-bezier(.2,.7,.3,1)
  }
  58% {
    transform:scale(1.06) rotate(calc(var(--rest) - 1deg))
  }
  74% {
    transform:scale(.98) rotate(calc(var(--rest) + .4deg))
  }
  88% {
    transform:scale(1.008) rotate(var(--rest))
  }
  100% {
    transform:scale(1) rotate(var(--rest))
  }
}

/* The sticker's fade-in, with either slap, to its own opacity. */
@keyframes badge-slap-fade {
  from {
    opacity:0
  }
}

@keyframes badge-shadow-slap {
  0% {
    opacity:0;
    transform:scale(1.5)
  }
  42% {
    opacity:1;
    transform:scale(.9)
  }
  100% {
    opacity:1;
    transform:scale(1)
  }
}

@keyframes badge-float {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-9px)
  }
}

@keyframes badge-shadow-float {
  0%,100% {
    transform:scale(1);
    opacity:1
  }
  50% {
    transform:scale(.88);
    opacity:.7
  }
}

@keyframes badge-ring {
  0% {
    opacity:.9;
    transform:scale(.78)
  }
  100% {
    opacity:0;
    transform:scale(1.7)
  }
}

@keyframes badge-glow {
  0% {
    opacity:0;
    transform:scale(.55)
  }
  45% {
    opacity:1;
    transform:scale(1.06)
  }
  100% {
    opacity:1;
    transform:scale(1)
  }
}

@keyframes badge-glow-omega {
  0% {
    opacity:0;
    transform:scale(.5)
  }
  34% {
    opacity:1;
    transform:scale(1.16)
  }
  100% {
    opacity:1;
    transform:scale(1)
  }
}

@keyframes badge-glow-pulse {
  0%,100% {
    opacity:1
  }
  40% {
    opacity:.55
  }
}

@keyframes badge-rays {
  0% {
    opacity:0;
    transform:rotate(-40deg) scale(.7)
  }
  25% {
    opacity:.5
  }
  100% {
    opacity:.5;
    transform:rotate(0deg) scale(1)
  }
}

/* One glint across the foil once the sticker has settled. Every keyframe
   shows it: hidden at rest, it is shown only while this plays. */
@keyframes badge-shine {
  0% {
    visibility:visible;
    background-position:100% 0
  }
  100% {
    visibility:visible;
    background-position:0% 0
  }
}

@keyframes badge-rise {
  from {
    opacity:0;
    transform:translateY(12px)
  }
}

@keyframes badge-guide-in {
  from {
    opacity:0;
    transform:translateY(12px) scale(.97)
  }
}

@keyframes badge-backdrop-in {
  from {
    opacity:0
  }
}

/* Widths */
@media (max-width:980px) {
  .badge-wrap {
    padding:0 25px
  }
}

@media (max-width:720px) {
  .badge-header {
    height:clamp(64px,10vh,80px)
  }
  .badge-page {
    --sticker:clamp(184px,min(60vw,30vh),262px);
    padding:0 16px 16px
  }
  .badge-stage {
    margin:4px auto clamp(20px,3vh,30px)
  }
  .badge-title {
    margin-top:14px
  }
  .badge-line {
    margin-top:12px
  }
  .badge-proof {
    grid-template-columns:1fr 1fr;
    grid-auto-flow:row;
    margin-top:22px
  }
  .badge-proof>* {
    padding:13px 16px
  }
  .proof-game {
    grid-column:1/-1;
    border-radius:19px 19px 0 0
  }
  .badge-proof>*+* {
    border-left:0;
    border-top:1px solid var(--glass-edge-strong)
  }
  .badge-proof>*+*+* {
    border-left:1px solid var(--glass-edge-strong)
  }
  /* A third figure gets a row of its own. */
  .badge-proof>:nth-child(4) {
    grid-column:1/-1;
    border-left:0
  }
  .badge-proof strong {
    font-size:16px;
    white-space:normal
  }
  .badge-actions {
    flex-direction:column;
    align-items:stretch;
    width:100%;
    margin-top:20px;
    gap:10px
  }
  .badge-actions .button {
    width:100%
  }
  .more-badges {
    margin-top:56px
  }
  .more-badges ul {
    gap:10px
  }
  .more-badges li {
    width:calc((100% - 20px)/3);
    max-width:136px
  }
  .more-badge {
    width:100%;
    padding:15px 6px 13px
  }
  .more-sticker {
    width:64px;
    height:64px
  }
  .more-label {
    font-size:12px
  }
  .badge-capture {
    grid-template-columns:1fr;
    justify-items:center;
    gap:14px;
    margin-top:48px;
    padding:24px 20px 20px;
    text-align:center
  }
  .capture-button {
    width:100%
  }
}

@media (max-width:370px) {
  .badge-seal {
    align-items:flex-start
  }
  .badge-seal svg {
    margin-top:1px
  }
  .badge-seal .seal-dot {
    display:none
  }
  .badge-seal>span {
    flex-direction:column;
    align-items:flex-start;
    text-align:left
  }
}

/* Phones: the buttons follow the warm line, so Share is on the first screen;
   the proof card and the seal come after them. */
@media (max-width:560px) {
  .badge-wrap {
    padding:0 16px
  }
  .badge-actions {
    order:1;
    --i:3!important
  }
  .share-fallback {
    order:2
  }
  .badge-proof {
    order:3;
    margin-top:28px;
    --i:4!important
  }
  .badge-seal {
    order:4;
    --i:5!important
  }
  .badge-upgrade {
    order:5;
    --i:5!important
  }
  /* Four badges (the common case) make a 2 by 2 grid, never 3 and 1. */
  .more-badges ul:has(>li:nth-child(4):last-child) li {
    width:calc((100% - 10px)/2)
  }
  .sound-toggle,.guide-toggle {
    height:38px;
    padding:0 14px 0 11px;
    font-size:12.5px;
    gap:6px
  }
  /* Room for both: the guide says "Badges" and the fanfare keeps its icon. */
  .guide-long,.sound-toggle span {
    display:none
  }
  .guide-short {
    display:inline
  }
  .sound-toggle {
    width:38px;
    padding:0;
    justify-content:center
  }
  .badge-header-actions {
    gap:6px
  }
  .badge-header .theme-toggle {
    width:38px;
    height:38px
  }
  .badge-body>.site-footer {
    margin-top:28px
  }
}

/* Narrow windows: the guide stacks each group's words above its stickers, so a
   ladder's five never wrap beside a column of text. */
@media (max-width:840px) {
  .guide-head {
    padding:22px 22px 18px
  }
  .guide-kicker,.badge-guide h2 {
    padding-right:48px
  }
  .guide-close {
    top:12px;
    right:12px
  }
  .badge-guide h2 {
    font-size:24px
  }
  .guide-summary {
    font-size:14px
  }
  .guide-body {
    padding:0 22px 8px
  }
  .guide-group {
    grid-template-columns:1fr;
    gap:14px;
    padding:20px 0
  }
  .guide-tiers {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(76px,1fr));
    margin:0
  }
  .guide-tiers li {
    width:auto
  }
  /* A single badge sits beside its words. */
  .guide-singles {
    display:block
  }
  .guide-singles .guide-group {
    display:grid
  }
  .guide-singles .guide-copy {
    display:block
  }
  .guide-singles .guide-copy p {
    margin-top:6px
  }
  .guide-singles .guide-group+.guide-group {
    border-top:1px solid var(--glass-edge-strong)
  }
  .guide-group.is-single {
    grid-template-columns:minmax(0,1fr) 96px;
    align-items:start
  }
  .guide-group.is-single .guide-tiers {
    grid-template-columns:1fr
  }
  .guide-singles .guide-tier {
    display:flex;
    margin-left:0;
    padding:10px 4px;
    text-align:center
  }
  .guide-singles .guide-sticker {
    margin-bottom:7px
  }
  .guide-singles :is(.guide-label,.guide-state) {
    align-self:auto
  }
}

/* Phones: a ladder's five tiers share one row from 360px up, with short labels
   and the state on two lines (28 Sep / 2026), which a date would overflow. */
@media (max-width:500px) {
  .guide-tiers {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px
  }
  .guide-tier {
    padding-inline:2px
  }
  .guide-group:not(.is-single) .guide-sticker {
    width:52px;
    height:52px
  }
  .guide-group:not(.is-single) .guide-tail {
    display:block
  }
  .guide-state {
    font-size:10.5px
  }
}

/* Phones: the guide takes nearly the whole width. */
@media (max-width:420px) {
  .badge-guide {
    width:calc(100vw - 20px)
  }
  .guide-head {
    padding:20px 18px 16px
  }
  .guide-close {
    top:10px;
    right:10px
  }
  .guide-body {
    padding:0 18px 6px
  }
  .guide-label {
    font-size:12px
  }
  .guide-group.is-single {
    grid-template-columns:minmax(0,1fr) 92px;
    gap:12px
  }
}

/* Too narrow for five: the stickers wrap, three a row, and a date fits on one line. */
@media (max-width:359px) {
  .guide-tiers {
    grid-template-columns:repeat(auto-fill,minmax(74px,1fr))
  }
  .guide-group:not(.is-single) .guide-sticker {
    width:60px;
    height:60px
  }
  .guide-group:not(.is-single) .guide-tail {
    display:inline
  }
}

/* Short screens: a tighter head leaves more room for the badges. */
@media (max-height:640px) {
  .guide-head {
    padding-top:16px;
    padding-bottom:14px
  }
  .badge-guide h2 {
    margin-top:6px;
    font-size:22px
  }
  .guide-summary {
    margin-top:4px
  }
  .guide-meter {
    margin-top:10px
  }
}

@media (max-width:360px) {
  .badge-page {
    --sticker:clamp(172px,min(60vw,30vh),196px)
  }
  .badge-title {
    font-size:36px
  }
  .badge-title.is-long {
    font-size:31px
  }
  .badge-proof>* {
    padding:12px 13px
  }
  .badge-proof strong {
    font-size:15px
  }
  .guide-short {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap
  }
  .guide-toggle {
    width:38px;
    padding:0;
    justify-content:center
  }
  .more-badges ul {
    gap:8px
  }
  .more-badges li {
    width:calc((100% - 16px)/3)
  }
  .more-badge {
    padding:13px 4px 12px;
    border-radius:18px
  }
  .more-sticker {
    width:56px;
    height:56px
  }
  .more-label {
    font-size:11.5px;
    text-align:center
  }
}

@media (min-height:1000px) and (min-width:981px) {
  .badge-page {
    --sticker:320px
  }
  .badge-stage {
    margin-top:24px
  }
}