/*
 * The collectible cards (assets/js/card.js draws them).
 *
 * A card is sized by one number, --w; everything inside is in em, with the
 * font size set from --w, so a card scales from a thumbnail to full screen.
 * Cards keep their own colours whatever theme the site wears, like real
 * cards. Two things set the look:
 *   type (data-type)    tints the card: --t1 light, --t2 strong
 *   rarity              the frame (--r1/--r2) and the finish:
 *     common     silver frame, no foil
 *     rare       blue frame, holographic photo window
 *     epic       purple frame, reverse holo (the card sparkles, not the photo)
 *     legendary  gold frame, full-art photo, rainbow foil that drifts
 *     shiny      any rarity: rainbow frame and sparkles
 * Calm mode and reduced motion keep every finish but stop anything moving.
 */

.gj-card {
  --w: 240px;
  --r1: #e3e7ec;
  --r2: #98a3b0;
  --glow: rgba(142, 153, 166, 0.55);
  --t1: #f3eadb;
  --t2: #b59a72;
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 30%;
  position: relative;
  width: var(--w);
  aspect-ratio: 63 / 88;
  flex: none;
  font-size: calc(var(--w) / 15);
  line-height: 1.2;
  border-radius: calc(var(--w) * 0.05);
  padding: calc(var(--w) * 0.03);
  background: linear-gradient(150deg, var(--r1) 0%, var(--r2) 45%, var(--r1) 70%, var(--r2) 100%);
  box-shadow:
    inset 0 0 0 calc(var(--w) * 0.004) rgba(255, 255, 255, 0.6),
    0 calc(var(--w) * 0.02) calc(var(--w) * 0.05) rgba(20, 16, 10, 0.25),
    0 calc(var(--w) * 0.07) calc(var(--w) * 0.16) -0.05em rgba(20, 16, 10, 0.3);
  color: #2b2620;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  text-align: left;
  transition: transform 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  overflow-wrap: normal;
  isolation: isolate;
}

/* Rarity frames */
.gj-card[data-rarity="rare"] { --r1: #cfe6ff; --r2: #3a83dc; --glow: rgba(58, 131, 220, 0.6); }
.gj-card[data-rarity="epic"] { --r1: #ecd8ff; --r2: #8a3ff0; --glow: rgba(138, 63, 240, 0.6); }
.gj-card[data-rarity="legendary"] { --r1: #fff3c4; --r2: #d79a00; --glow: rgba(240, 175, 0, 0.75); }
.gj-card[data-shiny="1"] {
  background: conic-gradient(from 210deg, #ff9aa2, #ffd36e, #b5f5a0, #8fd8ff, #c9a6ff, #ff9ad8, #ff9aa2);
}

/* Types */
.gj-card[data-type="snuggle"] { --t1: #fbd9e4; --t2: #e0789d; }
.gj-card[data-type="zoomies"] { --t1: #fdeeb2; --t2: #dda816; }
.gj-card[data-type="snack"] { --t1: #fbd9bd; --t2: #df8243; }
.gj-card[data-type="nap"] { --t1: #dfe2fb; --t2: #7c86dc; }
.gj-card[data-type="splash"] { --t1: #d3ecfb; --t2: #3f99d4; }
.gj-card[data-type="mischief"] { --t1: #e8dbf7; --t2: #9a62d6; }
.gj-card[data-type="outdoors"] { --t1: #dcefd3; --t2: #5aa64b; }
.gj-card[data-type="sunbeam"] { --t1: #fdf0c4; --t2: #e3a21f; }

.gj-card.tilt { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.08s linear; }

.gj-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: calc(var(--w) * 0.032);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    linear-gradient(175deg, var(--t1) 0%, #fffaf0 45%, var(--t1) 100%);
  box-shadow: inset 0 0 0 0.08em color-mix(in srgb, var(--t2) 45%, transparent);
  overflow: hidden;
}

/* Reverse holo: epic cards sparkle all over, apart from the photo. */
.gj-card[data-rarity="epic"] .gj-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 0.06em, transparent 0.09em),
    radial-gradient(circle, rgba(255, 240, 200, 0.9) 0 0.05em, transparent 0.08em),
    linear-gradient(115deg, rgba(255, 170, 220, 0.35), rgba(170, 220, 255, 0.35), rgba(200, 255, 190, 0.35), rgba(255, 220, 160, 0.35));
  background-size: 1.1em 1.1em, 1.7em 1.7em, 100% 100%;
  background-position: 0 0, 0.5em 0.8em, 0 0;
  mix-blend-mode: soft-light;
  opacity: 0.9;
}

/* --- top row ------------------------------------------------------------ */

.gj-card-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.5em 0.45em 0.28em 0.55em;
}
.gj-card-stage {
  position: absolute;
  left: 0.6em;
  top: 0.16em;
  font-size: 0.34em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--r2) 75%, #333);
}
.gj-card-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.92em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gj-card-hp { display: inline-flex; align-items: baseline; gap: 0.08em; font-weight: 700; font-size: 0.8em; color: #c2322b; white-space: nowrap; }
.gj-card-hp small { font-size: 0.55em; letter-spacing: 0.05em; }
.gj-type-coin {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  font-size: 0.85em;
  line-height: 1;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--t1) 45%, var(--t2) 100%);
  box-shadow: 0 0 0 0.07em rgba(255, 255, 255, 0.9), 0 0.05em 0.14em rgba(0, 0, 0, 0.35);
}
.gj-type-coin.small { width: 1.05em; height: 1.05em; font-size: 0.7em; }

/* --- the photo ---------------------------------------------------------- */

.gj-card-art {
  position: relative;
  z-index: 1;
  margin: 0 0.42em;
  aspect-ratio: 4 / 3;
  flex: none;
  border-radius: 0.18em;
  overflow: hidden;
  background: #e9dfcc;
  /* a bevelled metal frame, like the window on a real card */
  box-shadow:
    0 0 0 0.12em #f6f1e6,
    0 0 0 0.2em color-mix(in srgb, var(--r2) 70%, #fff),
    0 0.12em 0.25em 0.2em rgba(0, 0, 0, 0.18);
}
.gj-card-art img, .gj-card-fullart img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }
.gj-card-noart { display: grid; place-items: center; height: 100%; font-size: 2.6em; opacity: 0.35; }

/* Rare and shiny: the photo itself is holographic. */
.gj-art-holo { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.gj-card[data-rarity="rare"] .gj-art-holo,
.gj-card[data-shiny="1"] .gj-art-holo {
  opacity: 0.55;
  mix-blend-mode: color-dodge;
  background:
    repeating-linear-gradient(115deg, rgba(255, 120, 160, 0.35) 0 4%, rgba(120, 200, 255, 0.35) 8%, rgba(150, 255, 170, 0.35) 12%, rgba(255, 230, 120, 0.35) 16%, rgba(255, 120, 160, 0.35) 20%),
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.45), transparent 50%);
  background-size: 300% 300%, 100% 100%;
  background-position: var(--mx) var(--my), center;
}
.gj-card[data-rarity="rare"]:not(.touched) .gj-art-holo { opacity: 0.32; }
.gj-card[data-shiny="1"] .gj-art-holo { opacity: 0.22; }
.gj-card[data-shiny="1"].touched .gj-art-holo { opacity: 0.4; }

/* Legendary: the photo fills the whole card, with the text on glass panels. */
.gj-card-fullart { position: absolute; inset: 0; z-index: 0; }
.gj-card-fullart::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, transparent 18%, transparent 48%, rgba(255, 250, 240, 0.0) 52%);
}
.gj-card.full .gj-card-spacer { flex: 1; min-height: 6em; }
.gj-card.full .gj-card-body { flex: none; }
.gj-card.full .gj-card-head,
.gj-card.full .gj-card-body,
.gj-card.full .gj-card-foot,
.gj-card.full .gj-card-strip {
  /* (No backdrop blur: inside the 3D card flip, browsers stop drawing the photo.) */
  background: rgba(255, 251, 242, 0.88);
}
.gj-card.full .gj-card-head { margin: 0.35em 0.35em 0; border-radius: 0.5em; padding-top: 0.55em; }
.gj-card.full .gj-card-strip { margin: 0 0.35em; border-radius: 0.5em 0.5em 0 0; }
.gj-card.full .gj-card-body { margin: 0 0.35em; padding-top: 0.15em; }
.gj-card.full .gj-card-foot { margin: 0 0.35em 0.35em; border-radius: 0 0 0.5em 0.5em; }

.gj-card-shinytag {
  position: absolute;
  z-index: 3;
  left: 0.6em;
  bottom: 0.6em;
  padding: 0.08em 0.5em;
  border-radius: 1em;
  font-size: 0.42em;
  font-weight: 700;
  color: #5a3d00;
  background: linear-gradient(90deg, #fff6c9, #ffd86b, #fff6c9);
  box-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.3);
}
.gj-card-shinytag.top { top: 4.1em; bottom: auto; left: 1.1em; }

/* --- under the photo ---------------------------------------------------- */

.gj-card-strip {
  position: relative;
  z-index: 1;
  margin: 0.38em 0.9em 0.12em;
  padding: 0.12em 0.4em;
  font-size: 0.4em;
  font-style: italic;
  font-weight: 600;
  text-align: center;
  color: #6b5a3e;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t2) 22%, #fff3d6) 15%, color-mix(in srgb, var(--t2) 22%, #fff3d6) 85%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gj-card-body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0 0.55em; }

.gj-card-move {
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.22em 0 0.24em;
  border-bottom: 0.04em solid color-mix(in srgb, var(--t2) 40%, transparent);
}
.gj-move-cost { display: inline-flex; gap: 0.08em; flex: none; }
.gj-move-name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.66em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gj-move-power { font-weight: 700; font-size: 0.78em; font-variant-numeric: tabular-nums; }

.gj-card-stats { display: grid; gap: 0.14em; padding: 0.22em 0 0.18em; font-size: 0.5em; }
.gj-stat { display: grid; grid-template-columns: 6.2em 1fr 1.4em; align-items: center; gap: 0.5em; }
.gj-stat-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gj-stat-bar { height: 0.55em; border-radius: 1em; background: rgba(120, 100, 70, 0.16); overflow: hidden; }
.gj-stat-bar i { display: block; height: 100%; border-radius: 1em; background: linear-gradient(90deg, color-mix(in srgb, var(--t2) 55%, #fff), var(--t2)); }
.gj-stat-num { text-align: right; font-weight: 700; }

.gj-card-wr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
  padding: 0.22em 0.1em;
  font-size: 0.4em;
  border-top: 0.08em solid rgba(120, 100, 70, 0.18);
}
.gj-card-wr span { display: grid; gap: 0.05em; min-width: 0; color: #4d4234; }
.gj-card-wr b { font-size: 0.85em; letter-spacing: 0.08em; text-transform: uppercase; color: #8a7556; }
.gj-card-wr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gj-card-flavour {
  margin: 0.1em 0 0.15em;
  padding: 0.28em 0.45em;
  border-radius: 0.25em;
  border: 0.05em solid color-mix(in srgb, var(--r2) 45%, transparent);
  background: rgba(255, 255, 255, 0.45);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 0.46em;
  font-style: italic;
  line-height: 1.3;
  color: #5c5040;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gj-card-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: auto;
  padding: 0.18em 0.6em 0.38em;
  font-size: 0.42em;
  font-weight: 700;
  color: #7d6c55;
}
.gj-set-mark {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.35em;
  background: #fffaf0;
  box-shadow: 0 0 0 0.1em color-mix(in srgb, var(--r2) 70%, #555);
  font-size: 0.9em;
}
.gj-card-num { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.04em; }
.gj-card-gem { font-size: 1.5em; line-height: 1; color: var(--r2); text-shadow: 0 0.04em 0 rgba(255, 255, 255, 0.8); }
.gj-card[data-rarity="common"] .gj-card-gem { color: #2b2620; }

/* Thumbnails: just the name, photo, move and number. */
.gj-card.mini .gj-card-stage, .gj-card.mini .gj-card-strip, .gj-card.mini .gj-card-shinytag { display: none; }
.gj-card.mini .gj-card-head { padding-top: 0.4em; }
.gj-card.mini .gj-card-art { aspect-ratio: auto; flex: 1; min-height: 0; margin-top: 0.1em; }
.gj-card.mini .gj-card-body { flex: none; }
.gj-card.mini .gj-card-foot { margin-top: 0; }
.gj-card.mini .gj-card-move { border-bottom: 0; padding-top: 0.4em; }
.gj-card.mini .gj-move-name { font-size: 0.72em; }
.gj-card.mini .gj-card-foot { font-size: 0.55em; }
.gj-card.mini.full .gj-card-spacer { min-height: 0; }
.gj-card.mini.full .gj-card-body { border-radius: 0; }

/* --- light and foil ----------------------------------------------------- */

.gj-card-shine {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.4) 48%, transparent 66%);
  background-size: 100% 100%, 250% 250%;
  background-position: center, var(--mx) var(--my);
  transition: opacity 0.3s;
}
.gj-card.touched .gj-card-shine { opacity: 0.7; }
.gj-card[data-rarity="legendary"] .gj-card-shine,
.gj-card[data-shiny="1"] .gj-card-shine {
  opacity: 0.32;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(115deg, #ff9a9e 0%, #fad0c4 15%, #a1ffce 30%, #a0c4ff 45%, #e0aaff 60%, #ffe29f 75%, #ff9a9e 90%);
  background-size: 100% 100%, 300% 300%;
  background-position: center, var(--mx) var(--my);
}
.gj-card[data-rarity="legendary"].touched .gj-card-shine,
.gj-card[data-shiny="1"].touched .gj-card-shine { opacity: 0.7; }

/* A band of light that drifts across legendary and shiny cards by itself. */
.gj-card-glint {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 47%, rgba(255, 255, 255, 0.0) 56%);
  background-size: 260% 100%;
  background-position: 120% 0;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .gj-card-glint { animation: glint 5.5s ease-in-out infinite; }
}
@keyframes glint { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -40% 0; } }

.gj-card-sparkles {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    radial-gradient(circle, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle, #fff7c2 0 1px, transparent 1.8px);
  background-size: 18% 13%, 23% 17%;
  background-position: 7% 11%, 63% 41%;
  opacity: 0.7;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .gj-card-sparkles { animation: twinkle 3.5s ease-in-out infinite; }
}
@keyframes twinkle { 50% { opacity: 0.25; background-position: 12% 16%, 58% 36%; } }

/* --- the back of a card ------------------------------------------------- */

.gj-back { background: linear-gradient(150deg, #43528a 0%, #1d2547 100%); padding: calc(var(--w) * 0.04); }
.gj-back-inner {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5em;
  height: 100%;
  border-radius: calc(var(--w) * 0.035);
  border: 0.12em solid rgba(255, 220, 140, 0.55);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.16), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 0.4em, transparent 0.4em 0.8em),
    #26305c;
  color: #fff;
  overflow: hidden;
}
.gj-back-rays {
  position: absolute;
  inset: -30%;
  background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 220, 140, 0.12) 0 6deg, transparent 6deg 18deg);
}
.gj-back-coin {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.2em;
  height: 5.2em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8, #f2c14e 55%, #b07d12);
  box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.2), 0 0 0 0.45em rgba(242, 193, 78, 0.35), 0 0.3em 0.8em rgba(0, 0, 0, 0.45);
}
.gj-back-coin span { font-size: 2.6em; line-height: 1; filter: drop-shadow(0 0.04em 0.06em rgba(0, 0, 0, 0.4)); }
.gj-back-word { position: relative; font-weight: 700; letter-spacing: 0.24em; font-size: 0.85em; opacity: 0.9; text-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.5); }
.gj-back[data-glow="1"] { box-shadow: 0 0 calc(var(--w) * 0.12) var(--glow), 0 0 calc(var(--w) * 0.04) var(--glow); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .gj-back[data-glow="1"] { animation: glow 2.2s ease-in-out infinite; }
  html:not(.calm) .gj-flip:not(.flipped) .gj-back[data-rarity="legendary"] { animation: glow 1.4s ease-in-out infinite, shake 2.8s ease-in-out infinite; }
}
@keyframes glow { 50% { box-shadow: 0 0 calc(var(--w) * 0.2) var(--glow), 0 0 calc(var(--w) * 0.06) var(--glow); } }
@keyframes shake { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-2deg); } 88% { transform: rotate(2deg); } 92% { transform: rotate(-1deg); } }

/* --- turning a card over ------------------------------------------------ */

.gj-flip {
  --w: 260px;
  position: relative;
  width: var(--w);
  aspect-ratio: 63 / 88;
  border: 0;
  padding: 0;
  background: none;
  perspective: 1200px;
  -webkit-tap-highlight-color: transparent;
}
.gj-flip-inner { position: relative; z-index: 1; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(.3, .7, .2, 1.1); }
.gj-flip.flipped .gj-flip-inner { transform: rotateY(180deg); }
.gj-flip-back, .gj-flip-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gj-flip-front { transform: rotateY(180deg); }
.gj-flip:not(.flipped):hover .gj-back { transform: translateY(-4px) rotate(-1deg); }
/* Calm: no turning, the front simply fades in. */
.gj-flip.calm .gj-flip-inner { transition: none; transform: none !important; }
.gj-flip.calm .gj-flip-front { transform: none; opacity: 0; transition: opacity 0.3s; }
.gj-flip.calm .gj-flip-back { transition: opacity 0.3s; }
.gj-flip.calm.flipped .gj-flip-front { opacity: 1; }
.gj-flip.calm.flipped .gj-flip-back { opacity: 0; }

/* Light rays behind a rare (or better) card once it's turned over. */
.gj-rays {
  --ray: rgba(58, 131, 220, 0.35);
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: calc(var(--w) * 2.4);
  height: calc(var(--w) * 2.4);
  margin: calc(var(--w) * -1.2) 0 0 calc(var(--w) * -1.2);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--ray) 0%, transparent 62%),
    repeating-conic-gradient(var(--ray) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%);
  mask: radial-gradient(circle, #000 25%, transparent 68%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.6s 0.35s, transform 0.8s 0.35s;
  pointer-events: none;
}
.gj-rays[data-rarity="epic"] { --ray: rgba(150, 80, 240, 0.38); }
.gj-rays[data-rarity="legendary"] { --ray: rgba(255, 190, 40, 0.5); }
.gj-rays[data-shiny="1"] { --ray: rgba(255, 140, 210, 0.42); }
.gj-flip.flipped .gj-rays { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .gj-flip.flipped .gj-rays { animation: spin-rays 24s linear infinite; }
}
@keyframes spin-rays { from { rotate: 0deg; } to { rotate: 360deg; } }

/* --- a card she hasn't found yet ---------------------------------------- */

.gj-slot {
  --w: 120px;
  width: var(--w);
  aspect-ratio: 63 / 88;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.2em;
  font-size: calc(var(--w) / 10);
  border-radius: calc(var(--w) * 0.05);
  border: 2px dashed color-mix(in srgb, var(--muted) 45%, transparent);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  color: var(--muted);
  text-align: center;
}
.gj-slot-num { font-weight: 800; font-size: 0.85em; font-variant-numeric: tabular-nums; }
.gj-slot-q { font-size: 2.2em; font-weight: 800; line-height: 1; opacity: 0.6; }
.gj-slot-r { font-size: 0.7em; font-weight: 700; padding: 0 0.4em; }
.gj-slot[data-rarity="rare"] { border-color: color-mix(in srgb, #3a83dc 45%, transparent); }
.gj-slot[data-rarity="epic"] { border-color: color-mix(in srgb, #8a3ff0 45%, transparent); }
.gj-slot[data-rarity="legendary"] { border-color: color-mix(in srgb, #d79a00 60%, transparent); }

.rarity-pill { display: inline-flex; align-items: center; gap: 0.3em; padding: 0.1em 0.7em; border-radius: 999px; font-weight: 800; font-size: 0.85rem; color: #fff; background: #8e99a6; }
.rarity-pill[data-rarity="rare"] { background: #3a83dc; }
.rarity-pill[data-rarity="epic"] { background: #8a3ff0; }
.rarity-pill[data-rarity="legendary"] { background: #c98d00; }