/* XMCoin: shiny 3D achievement coins. Pairs with coin.js. Size a coin with --xc-size (set by XMCoin.make). */
@font-face { font-family: "Anton"; src: url(/fonts/Anton-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

.xcoin {
  --xc-size: 160px;
  --xc-t: calc(var(--xc-size) * .076);            /* thickness */
  --xc-segw: calc(var(--xc-size) * .0832);        /* edge facet width: pi * D / 40, plus a hair of overlap */
  --xc-shadow: rgba(92, 22, 58, .42);
  --xc-shadow-mid: rgba(92, 22, 58, .16);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  flex: none;
  width: var(--xc-size);
  height: var(--xc-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 0;
  overflow: visible;
  isolation: isolate;
  perspective: calc(var(--xc-size) * 4);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
button.xcoin { cursor: pointer; }
.xcoin:focus-visible { outline-offset: 4px; }
:root[data-theme="dark"] .xcoin { --xc-shadow: rgba(0, 0, 0, .78); --xc-shadow-mid: rgba(0, 0, 0, .32); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xcoin { --xc-shadow: rgba(0, 0, 0, .78); --xc-shadow-mid: rgba(0, 0, 0, .32); }
}

.xcoin > .xc-shadow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--xc-shadow) 0, var(--xc-shadow) 52%, var(--xc-shadow-mid) 78%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.xc-sway, .xc-body, .xc-edge {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.xc-sway { z-index: 1; }
.xc-body { will-change: transform; }

/* faces: front at +T/2, back flipped at -T/2 */
.xc-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.xc-front { transform: translateZ(calc(var(--xc-t) / 2)); }
.xc-back { transform: rotateY(180deg) translateZ(calc(var(--xc-t) / 2)); }
/* the face pointing away: backface-visibility already hides it in 3D. Only a flattened resting mini needs the class
   (toggling visibility on spinning 3D faces forced a re-raster every half turn and showed blank faces mid-spin) */
.xc-flat .xc-face.xc-off { visibility: hidden; }
.xc-art { display: block; width: 100%; height: 100%; overflow: hidden; }

/* light: specular hot spot + glint band (moved by transforms), dimming (opacity), all per frame from coin.js */
.xc-spec, .xc-glint, .xc-dim { position: absolute; pointer-events: none; }
.xc-spec {
  left: -50%; top: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 253, 236, .7) 0, rgba(255, 244, 205, .4) 7%, rgba(255, 232, 170, .16) 16%, rgba(255, 225, 150, .05) 26%, transparent 36%);
  mix-blend-mode: screen;
}
.xc-glint {
  left: -100%; top: -100%; width: 300%; height: 300%;
  background:
    linear-gradient(90deg, transparent 49.1%, rgba(255, 255, 250, .5) 49.75%, rgba(255, 255, 250, .5) 50.05%, transparent 50.7%),
    linear-gradient(90deg, transparent 44%, rgba(255, 250, 225, .1) 46.5%, rgba(255, 248, 215, .3) 49.9%, rgba(255, 250, 225, .1) 53.2%, transparent 56%),
    linear-gradient(90deg, transparent 54.6%, rgba(255, 250, 225, .22) 55.4%, transparent 56.4%);
  mix-blend-mode: screen;
}
.xcoin--big .xc-spec, .xcoin--big .xc-glint { will-change: transform, opacity; }
.xc-dim { inset: 0; border-radius: 50%; background: #1e1102; opacity: 0; }

/* reeded edge: 40 facets around the rim, outward normals, shaded from the light vector coin.js sets on .xc-edge */
.xc-edge { --lx: -.45; --ly: -.68; --hx: -.25; --hy: -.37; }
.xc-seg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--xc-segw);
  height: var(--xc-t);
  margin-left: calc(var(--xc-segw) / -2);
  margin-top: calc(var(--xc-t) / -2);
  transform: rotateZ(var(--a)) translateY(calc(var(--xc-size) / -2 + .6px)) rotateX(90deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-color: #c99632;
  background-image:
    linear-gradient(to bottom, rgba(255, 240, 190, .75), rgba(255, 240, 190, 0) 24%, rgba(255, 240, 190, 0) 76%, rgba(255, 240, 190, .75)),
    linear-gradient(90deg, #fde7a0 0 22%, #e2b14a 22% 46%, #9a6719 46% 76%, #c58f2c 76%);
  background-size: 100% 100%, calc(var(--xc-size) / 66) 100%;
}
.xc-seg::before, .xc-seg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.xc-seg::before { /* diffuse: darker the further the facet faces from the light */
  background: #2a1700;
  opacity: clamp(0, calc(.74 - 1.02 * (var(--s) * var(--lx) - var(--c) * var(--ly))), .82);
}
.xc-seg::after { /* specular glint on facets facing the half-vector */
  background: #fff7d6;
  opacity: clamp(0, calc((var(--s) * var(--hx) - var(--c) * var(--hy) - .8) * 4.2), .9);
}
.xcoin--silver .xc-seg {
  background-color: #b4bcc6;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, .75)),
    linear-gradient(90deg, #ffffff 0 22%, #cfd5dc 22% 46%, #7e8792 46% 76%, #aab2bc 76%);
}
.xcoin--silver .xc-seg::before { background: #12161b; }
.xcoin--silver .xc-seg::after { background: #ffffff; }

/* idle sway on big coins: pure CSS (compositor), so the JS loop can sleep */
.xcoin--big .xc-sway { animation: xc-sway 7.5s ease-in-out infinite alternate; }
@keyframes xc-sway {
  0% { transform: rotateX(2.2deg) rotateY(-3.2deg); }
  50% { transform: rotateX(-1.4deg) rotateY(.6deg); }
  100% { transform: rotateX(1.2deg) rotateY(3.4deg); }
}
.xcoin--calm .xc-sway, .xcoin--posed .xc-sway { animation: none; }
@media (prefers-reduced-motion: reduce) { .xcoin .xc-sway { animation: none; } }

/* minis: front + back + 3 stacked discs for thickness; no rim text, no edge facets, no glint */
.xcoin--mini {
  --xc-t: calc(var(--xc-size) * .13);
  perspective: calc(var(--xc-size) * 5);
}
.xc-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #d9a543 0 55%, #9a6719 80%, #5e3b09 100%);
}
.xc-d1 { transform: translateZ(calc(var(--xc-t) * .25)); }
.xc-d2 { transform: translateZ(0); }
.xc-d3 { transform: translateZ(calc(var(--xc-t) * -.25)); }
.xcoin--silver .xc-disc { background: radial-gradient(circle, #c9d0d8 0 55%, #7e8792 80%, #4b525b 100%); }
/* resting minis are flattened to 2D by coin.js (.xc-flat): same picture, no 3D layers while a list just sits there */
.xcoin--mini.xc-flat .xc-body { transform: none !important; transform-style: flat; will-change: auto; }
.xcoin--mini.xc-flat .xc-disc { display: none; }
.xcoin--mini.xc-flat .xc-face { transform: scale(1.013); }
.xcoin--mini.xc-flat .xc-face.xc-r180 { transform: rotate(180deg) scale(1.013); }
.xcoin--mini.xc-flat .xc-sway { transform-style: flat; }
.xcoin--mini .xc-spec {
  background: radial-gradient(circle at 50% 50%, rgba(255, 253, 236, .9) 0, rgba(255, 240, 195, .5) 10%, rgba(255, 230, 160, .14) 24%, transparent 38%);
}

/* ---------- blackened iron (The Final Straw) ---------- */
.xcoin--iron .xc-seg {
  background-color: #4a3b39;
  background-image:
    linear-gradient(to bottom, rgba(255, 228, 220, .55), rgba(255, 228, 220, 0) 24%, rgba(255, 228, 220, 0) 76%, rgba(255, 228, 220, .55)),
    linear-gradient(90deg, #b9a29c 0 22%, #6e5955 22% 46%, #2a1f1e 46% 76%, #554340 76%);
}
.xcoin--iron .xc-seg::before { background: #050202; }
.xcoin--iron .xc-seg::after { background: #ffe6de; }
.xcoin--iron .xc-disc { background: radial-gradient(circle, #6e5955 0 55%, #3a2c2a 80%, #130c0c 100%); }
.xcoin--iron .xc-dim { background: #050202; }

/* ---------- blood: only with the gore setting on (coin.js toggles .xcoin--gore from configure({ gore })) ---------- */
.xcoin:not(.xcoin--gore) .xc-blood, .xcoin--gore .xc-stain { display: none; }
.xcoin--gore .xc-seg.xc-bloody {
  background-image:
    linear-gradient(90deg, rgba(255, 190, 190, .0) 0 40%, rgba(255, 190, 190, .35) 46%, rgba(255, 190, 190, 0) 54%),
    linear-gradient(to bottom, #4a0006, #96101b 45%, #6a0009);
  background-size: 100% 100%, 100% 100%;
}

/* drops hanging off the bottom rim: swell, stretch, let go, start again */
.xc-hang { position: absolute; inset: 0; display: none; pointer-events: none; }
.xcoin--gore .xc-hang { display: block; }
.xcoin.xc-flung .xc-hang { display: none; }
.xcoin.xc-tilted .xc-hang { visibility: hidden; }
.xc-hdrop { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); width: 0; height: 0; }
.xc-hstem {
  position: absolute;
  left: calc(var(--w) / -2);
  top: 0;
  width: var(--w);
  height: var(--len);
  border-radius: 0 0 40% 40% / 0 0 18% 18%;
  background: linear-gradient(90deg, #3a0004, #860912 26%, #c7343f 40%, #9a0d18 52%, #5a0007 78%, #2c0003);
  transform-origin: 50% 0;
  transform: scaleY(.85);
  animation: xc-stem var(--dur) linear var(--delay) infinite;
}
.xc-hbulb {
  position: absolute;
  left: calc(var(--w) * -.68);
  top: calc(var(--w) * -.68);
  width: calc(var(--w) * 1.36);
  height: calc(var(--w) * 1.36);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe0e0 0 8%, #d6303c 16%, #8e0a14 50%, #3c0004 100%);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, .35);
  transform: translateY(calc(var(--len) * .85));
  animation: xc-bulb var(--dur) linear var(--delay) infinite;
}
@keyframes xc-stem {
  0% { transform: scaleY(.16); animation-timing-function: cubic-bezier(.45, 0, .8, .7); }
  76% { transform: scaleY(1); animation-timing-function: ease-out; }
  80% { transform: scaleY(.5); animation-timing-function: ease-in-out; }
  100% { transform: scaleY(.16); }
}
@keyframes xc-bulb {
  0% { transform: translateY(calc(var(--len) * .16)) scale(.55); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .8, .7); }
  76% { transform: translateY(var(--len)) scale(1, 1.08); opacity: 1; animation-timing-function: linear; }
  78% { transform: translateY(calc(var(--len) * 1.1)) scale(.9, 1.2); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  92% { transform: translateY(calc(var(--len) + var(--fall))) scale(.75, 1.35); opacity: 0; }
  93% { transform: translateY(calc(var(--len) * .16)) scale(.2); opacity: 0; animation-timing-function: ease-out; }
  100% { transform: translateY(calc(var(--len) * .16)) scale(.55); opacity: 1; }
}
.xcoin--calm .xc-hstem, .xcoin--calm .xc-hbulb, .xcoin--posed .xc-hstem, .xcoin--posed .xc-hbulb { animation: none; }
@media (prefers-reduced-motion: reduce) { .xc-hstem, .xc-hbulb { animation: none; } }

/* the page-wide splatter layer (one per page, removed when the last splat has dried) */
.xc-splat-layer { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; pointer-events: none; contain: strict; }
.xc-sp { position: absolute; will-change: transform; }
.xc-sp > * { display: block; width: 100%; height: 100%; will-change: opacity, filter, transform; }
.xc-splat { object-fit: contain; }
.xc-drips-run {
  object-fit: cover;
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
.xc-drop { /* a drop that has hit the "glass": flat, dark at the rim, one wet highlight */
  background:
    radial-gradient(ellipse at 36% 30%, rgba(255, 214, 214, .75) 0 7%, rgba(255, 214, 214, 0) 15%),
    radial-gradient(ellipse at 50% 50%, #a3101d 0 50%, #7a0711 78%, #4c0008 100%);
  box-shadow: .5px 1px 1.2px rgba(40, 0, 0, .35);
}
.xc-drop--dark {
  background:
    radial-gradient(ellipse at 36% 30%, rgba(255, 190, 190, .55) 0 6%, rgba(255, 190, 190, 0) 13%),
    radial-gradient(ellipse at 50% 50%, #7c0812 0 55%, #55040c 80%, #320005 100%);
}
.xcoin--iron .xc-glint {
  background:
    linear-gradient(90deg, transparent 49.1%, rgba(255, 240, 236, .26) 49.75%, rgba(255, 240, 236, .26) 50.05%, transparent 50.7%),
    linear-gradient(90deg, transparent 44%, rgba(255, 236, 230, .05) 46.5%, rgba(255, 236, 230, .15) 49.9%, rgba(255, 236, 230, .05) 53.2%, transparent 56%);
}

/* ---------- black metal + bronze (Halloween 2026), bronze (First Meme), platinum-rimmed gold (Meme Lord) ---------- */
.xcoin--black .xc-seg {
  background-color: #2a2421;
  background-image:
    linear-gradient(to bottom, rgba(255, 220, 180, .5), rgba(255, 220, 180, 0) 24%, rgba(255, 220, 180, 0) 76%, rgba(255, 220, 180, .5)),
    linear-gradient(90deg, #a07a5a 0 22%, #4a3b33 22% 46%, #151110 46% 76%, #3a2e28 76%);
}
.xcoin--black .xc-seg::before, .xcoin--black .xc-dim { background: #000; }
.xcoin--black .xc-seg::after { background: #ffd9a8; }
.xcoin--black .xc-disc { background: radial-gradient(circle, #4a3b33 0 55%, #241d1a 80%, #060505 100%); }
.xcoin--bronze .xc-seg {
  background-color: #ad6c3b;
  background-image:
    linear-gradient(to bottom, rgba(255, 236, 214, .7), rgba(255, 236, 214, 0) 24%, rgba(255, 236, 214, 0) 76%, rgba(255, 236, 214, .7)),
    linear-gradient(90deg, #f6cfa4 0 22%, #c9864e 22% 46%, #7a4419 46% 76%, #a8673a 76%);
}
.xcoin--bronze .xc-seg::before { background: #1e0d03; }
.xcoin--bronze .xc-seg::after { background: #fff1e0; }
.xcoin--bronze .xc-disc { background: radial-gradient(circle, #c9864e 0 55%, #7a4419 80%, #43230c 100%); }
.xcoin--goldplat .xc-seg {
  background-color: #bcc3cc;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, .8)),
    linear-gradient(90deg, #ffffff 0 22%, #d8dee5 22% 46%, #858e99 46% 76%, #b0b8c2 76%);
}
.xcoin--goldplat .xc-seg::before { background: #14181d; }
.xcoin--goldplat .xc-seg::after { background: #ffffff; }
.xcoin--goldplat .xc-disc { background: radial-gradient(circle, #d8dee5 0 55%, #858e99 80%, #4f565f 100%); }

/* Meme Lord: a slow extra sheen across the faces */
.xc-shimmer {
  position: absolute; left: -60%; top: -60%; width: 220%; height: 220%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 41%, rgba(255, 248, 215, .12) 45%, rgba(255, 252, 230, .6) 49.4%, rgba(255, 255, 242, .8) 50%, rgba(255, 248, 215, .12) 55%, transparent 59%);
  transform: translateX(-62%);
  animation: xc-shimmer 7s ease-in-out infinite;
  will-change: transform;
}
.xc-back .xc-shimmer { animation-delay: -3.5s; }
@keyframes xc-shimmer { 0%, 60% { transform: translateX(-62%); } 88%, 100% { transform: translateX(62%); } }
.xcoin--calm .xc-shimmer, .xcoin--posed .xc-shimmer { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .xc-shimmer { animation: none; opacity: 0; } }

/* ---------- spin effects (Halloween bats + candy corn + sparks, Meme Machine papers, Meme Lord confetti) ---------- */
.xc-sp > svg { overflow: visible; }
.xc-bat { transform-origin: 50% 45%; animation: xc-flap .17s ease-in-out infinite alternate; }
.xc-bat path { fill: #2b1020; }
@keyframes xc-flap { to { transform: scaleY(.4); } }
:root[data-theme="dark"] .xc-bat path { fill: #050505; stroke: #ff8a1c; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xc-bat path { fill: #050505; stroke: #ff8a1c; stroke-width: 1.2px; vector-effect: non-scaling-stroke; } }
.xc-candy {
  border-radius: 50% 50% 42% 42% / 72% 72% 28% 28%;
  background: linear-gradient(to top, #ffd23f 0 36%, #ff8a1c 36% 72%, #fffaf0 72%);
  box-shadow: .5px 1px 1px rgba(60, 20, 0, .3);
}
.xc-spark {
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  background: radial-gradient(circle, #fff3c4 0 18%, #ffb347 45%, #ff7a1a 100%);
}
.xc-spark--white { background: radial-gradient(circle, #fff 0 25%, #fff6e0 55%, #ffd6a8 100%); }
.xc-spark--gold { background: radial-gradient(circle, #fffbe6 0 20%, #ffe38a 50%, #d9a443 100%); }
.xc-paper { /* a tiny meme: white card, a picture, a caption line */
  border-radius: 1.5px;
  background:
    linear-gradient(#2b1020, #2b1020) 18% 82% / 64% 9% no-repeat,
    linear-gradient(135deg, #a9dcff, #ff9ccf) 50% 22% / 76% 50% no-repeat,
    #fffdf8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.xc-confetti { border-radius: 1px; }
.xc-confetti.xc-cf--dot { border-radius: 50%; }
.xc-cf1 { background: linear-gradient(135deg, #fff6cc, #f2c14e); }
.xc-cf2 { background: linear-gradient(135deg, #ffe38a, #c9922f); }
.xc-cf3 { background: linear-gradient(135deg, #fffdf0, #d9a443); }
.xc-cf4 { background: linear-gradient(135deg, #f7f9fc, #aab3bd); }