/* XMWheel: prize wheel. Pairs with wheel.js. Sized by its container: width 100%, max 340px, square. */
@font-face { font-family: "Anton"; src: url(/fonts/Anton-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
.xwheel {
  --xw-ink: #2b1020;
  --xw-rim: #ff3d9a;
  --xw-rim-out: #2b1020;
  --xw-shadow: #2b1020;
  --xw-peg: #fff8fb;
  --xw-hub: #fff27a;
  --xw-hub-star: #ff3d9a;
  --xw-ptr: #ff3d9a;
  --xw-c0: #ff9ccf; --xw-t0: #2b1020;
  --xw-c1: #fff27a; --xw-t1: #2b1020;
  --xw-c2: #a9dcff; --xw-t2: #2b1020;
  --xw-c3: #b6f3cf; --xw-t3: #2b1020;
  --xw-tag: #fff27a;
  --xw-tag-ink: #2b1020;
  --xw-font: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
}
:root[data-theme="dark"] .xwheel {
  --xw-ink: #0b0d0e;
  --xw-rim: #272729;
  --xw-rim-out: #d7dadc;
  --xw-shadow: #ff4500;
  --xw-peg: #d7dadc;
  --xw-hub: #ff4500;
  --xw-hub-star: #1a1a1b;
  --xw-ptr: #ff4500;
  --xw-c0: #ff4500; --xw-t0: #fff;
  --xw-c1: #272729; --xw-t1: #d7dadc;
  --xw-c2: #818384; --xw-t2: #0b0d0e;
  --xw-c3: #3a3a3c; --xw-t3: #ff8b60;
  --xw-tag: #ff4500;
  --xw-tag-ink: #fff;
  --xw-font: Anton, Impact, "Arial Narrow", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xwheel {
    --xw-ink: #0b0d0e;
    --xw-rim: #272729;
    --xw-rim-out: #d7dadc;
    --xw-shadow: #ff4500;
    --xw-peg: #d7dadc;
    --xw-hub: #ff4500;
    --xw-hub-star: #1a1a1b;
    --xw-ptr: #ff4500;
    --xw-c0: #ff4500; --xw-t0: #fff;
    --xw-c1: #272729; --xw-t1: #d7dadc;
    --xw-c2: #818384; --xw-t2: #0b0d0e;
    --xw-c3: #3a3a3c; --xw-t3: #ff8b60;
    --xw-tag: #ff4500;
    --xw-tag-ink: #fff;
    --xw-font: Anton, Impact, "Arial Narrow", sans-serif;
  }
}

.xwheel > svg, .xw-disc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.xw-disc { transform-origin: 50% 50%; will-change: transform; }
.xw-disc > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.xw-fg { pointer-events: none; }

.xw-shadow { fill: var(--xw-shadow); }
.xw-rim-out { fill: var(--xw-rim-out); }
.xw-rim { fill: var(--xw-rim); stroke: var(--xw-ink); stroke-width: 2.5; }
.xw-slice { stroke: var(--xw-ink); stroke-width: 2.2; stroke-linejoin: round; }
.xw-c0 { fill: var(--xw-c0); } .xw-c1 { fill: var(--xw-c1); } .xw-c2 { fill: var(--xw-c2); } .xw-c3 { fill: var(--xw-c3); }
.xw-jack { stroke: #5e3b09; stroke-width: 1.4; }
.xw-glit { pointer-events: none; }
.xw-glit2 { opacity: 0; animation: xw-glit .5s steps(1) infinite; }
@keyframes xw-glit { 50% { opacity: 1; } }

.xw-label { font-family: var(--xw-font); font-weight: 400; stroke: none; pointer-events: none; }
.xw-label.xw-c0 { fill: var(--xw-t0); } .xw-label.xw-c1 { fill: var(--xw-t1); } .xw-label.xw-c2 { fill: var(--xw-t2); } .xw-label.xw-c3 { fill: var(--xw-t3); }

.xw-peg { fill: var(--xw-peg); stroke: var(--xw-ink); stroke-width: 1.8; }

.xw-call { pointer-events: none; }
.xw-lead { fill: none; stroke: var(--xw-rim-out); stroke-width: 2; stroke-dasharray: 3 3; stroke-linecap: round; }
.xw-tag { fill: var(--xw-tag); stroke: var(--xw-rim-out); stroke-width: 2.5; }
.xw-tag-big { font-family: var(--xw-font); font-size: 15px; fill: var(--xw-tag-ink); }
.xw-tag-small { font-family: var(--xw-font); font-size: 9.5px; fill: var(--xw-tag-ink); opacity: .8; }
.xw-spark { fill: #fff6c2; stroke: #b07b25; stroke-width: .8; transform-box: fill-box; transform-origin: center; animation: xw-twinkle 1.6s ease-in-out infinite; }
.xw-sp2 { animation-delay: -.55s; }
.xw-sp3 { animation-delay: -1.1s; }
@keyframes xw-twinkle { 0%, 100% { transform: scale(.35) rotate(0deg); opacity: .35; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }

.xw-hub { fill: var(--xw-hub); stroke: var(--xw-rim-out); stroke-width: 3; }
.xw-hub-star { fill: var(--xw-hub-star); }
.xw-hub-shine { fill: #fff; opacity: .7; }
.xw-ptr { fill: var(--xw-ptr); stroke: var(--xw-rim-out); stroke-width: 3; stroke-linejoin: round; }
.xw-ptr-shine { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; opacity: .75; }
.xw-pivot { fill: var(--xw-rim-out); }
:root[data-theme="dark"] .xw-ptr-shine, :root[data-theme="dark"] .xw-hub-shine { opacity: .35; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xw-ptr-shine, :root:not([data-theme="light"]) .xw-hub-shine { opacity: .35; } }

/* the winning slice gets a pulsing outline once the wheel stops */
.xw-winline { display: none; fill: none; stroke: #fff; stroke-width: 4.5; stroke-linejoin: round; pointer-events: none; }
.xw-done .xw-winline { display: inline; animation: xw-win .9s ease-in-out infinite alternate; }
@keyframes xw-win { to { stroke: var(--xw-hub); } }

.xwheel--calm .xw-glit2, .xwheel--calm .xw-spark, .xwheel--calm .xw-winline { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .xw-glit2, .xw-spark, .xw-done .xw-winline { animation: none; }
}