/* The Prize Wheel reveal skin (tmc-reveal-wheel-skin.js). The look is the standalone wheel game's (tmc-wheel-runtime.css), flattened:
   where that file layers and overrides a rule, only the effective value is written here, once. Everything is scoped to the wheel's
   root wrap class (.tmcrv-skin-wheel) and the .tmrw-* classes. The board is a square container: every size is in container units
   (cqw) or percentages of the board, so the same wheel scales from a 320 px phone to a 640 px desktop board. --u is one pixel of
   the original 610 px wheel at a shell of 86cqw (86 / 610 = .141); it is only ever used inside the board, never on it. */

/* ---- stage panel: tmc-wheel-runtime.css 117-135, 1241-1250, 1940-1950 ---- */
.tmcrv-skin-wheel .tmcrv-board.tmrw-board {
  --u: .141cqw;
  --tmrw-gold: #f8c957;
  --tmrw-gold-2: #fff1a8;
  position: relative; display: block; box-sizing: border-box;
  width: 100%; max-width: 640px; margin: 0 auto; padding: 0;
  aspect-ratio: 1; container-type: inline-size; overflow: hidden; isolation: isolate;
  border-radius: 26px;
  border: 1px solid rgba(255, 215, 106, .20);
  background:
    radial-gradient(circle at 50% 50%, rgba(248, 201, 87, .09), transparent 44%),
    linear-gradient(180deg, rgba(4, 9, 19, .88), rgba(0, 3, 8, .96)),
    #02050b;
  box-shadow: 0 0 0 1px rgba(255, 215, 106, .05), 0 28px 90px rgba(0, 0, 0, .48), 0 0 34px rgba(255, 193, 67, .08);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}

/* ---- shell: 147-153, 2573-2582 ---- */
.tmcrv-skin-wheel .tmrw-shell {
  position: absolute; inset: 7%; border-radius: 50%; isolation: isolate;
  box-shadow: 0 calc(var(--u) * 28) calc(var(--u) * 64) rgba(0, 0, 0, .58), 0 0 calc(var(--u) * 24) rgba(248, 201, 87, .22);
}
/* rim: 154-164, 1956-1966, 2583-2594 */
.tmcrv-skin-wheel .tmrw-shell::before {
  content: ""; position: absolute; inset: calc(var(--u) * -18); z-index: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .34), transparent 28%),
    radial-gradient(circle at 50% 50%, #fff0a2 0%, #f8c957 46%, #8d520d 71%, #311906 100%);
  box-shadow:
    0 0 0 calc(var(--u) * 7) rgba(255, 255, 255, .06),
    0 0 0 calc(var(--u) * 15) rgba(52, 31, 5, .72),
    0 0 calc(var(--u) * 34) rgba(248, 201, 87, .22),
    inset 0 0 calc(var(--u) * 26) rgba(0, 0, 0, .48);
}
/* inner ring: 165-173, 1967-1976, 2595-2602 */
.tmcrv-skin-wheel .tmrw-shell::after {
  content: ""; position: absolute; inset: calc(var(--u) * -4); z-index: 2; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 62%, rgba(255, 238, 173, .24) 63%, transparent 68%),
    radial-gradient(circle at 50% 50%, transparent 0 69%, rgba(255, 225, 123, .12) 70%, transparent 75%);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 9) rgba(255, 247, 200, .16),
    inset 0 0 0 calc(var(--u) * 21) rgba(0, 0, 0, .38),
    0 0 calc(var(--u) * 18) rgba(248, 201, 87, .18);
}

/* ---- disc and canvas: 174-182, 1977-1999. The script sets the rotation inline; there is no CSS transition on it. ---- */
.tmcrv-skin-wheel .tmrw-disc {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0b111c, #02050b 70%);
  filter: saturate(.92) contrast(1.08) brightness(.96);
  will-change: transform; transform: rotate(0deg);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 10) rgba(255, 243, 191, .20),
    inset 0 0 0 calc(var(--u) * 25) rgba(0, 0, 0, .21),
    inset 0 0 calc(var(--u) * 92) rgba(0, 0, 0, .50);
}
.tmcrv-skin-wheel .tmrw-canvas {
  display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  border-radius: 50%; transform: translateZ(0); backface-visibility: hidden;
}
/* gloss: 183-193, 2000-2004. Kept off the spinning disc so the light stays put while the wheel turns. */
.tmcrv-skin-wheel .tmrw-gloss {
  position: absolute; inset: 0; z-index: 3; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 21%, rgba(255, 255, 255, .26), transparent 22%),
    radial-gradient(circle at center, transparent 0 40%, rgba(255, 236, 158, .13) 41%, transparent 47%);
}

/* ---- landed segment: a pulsing wedge at the pointer, as wide as one segment (--tmrw-w is set by the script) ---- */
.tmcrv-skin-wheel .tmrw-hit {
  --tmrw-w: 45deg;
  position: absolute; inset: 0; z-index: 4; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(from calc(var(--tmrw-w) / -2), rgba(255, 241, 168, .55) 0 var(--tmrw-w), transparent 0);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 33%, #000 34% 94%, transparent 95%);
  mask: radial-gradient(circle closest-side, transparent 0 33%, #000 34% 94%, transparent 95%);
}
.tmcrv-skin-wheel .tmrw-board.is-landed .tmrw-hit { opacity: .9; animation: tmrwHit 760ms ease-in-out 4; }
.tmcrv-skin-wheel .tmrw-board.is-lose .tmrw-hit { background: conic-gradient(from calc(var(--tmrw-w) / -2), rgba(190, 205, 235, .34) 0 var(--tmrw-w), transparent 0); }

/* ---- pointer: 194-217, 2015-2032, 2603-2605, 2771-2782 (the later keyframes) ---- */
.tmcrv-skin-wheel .tmrw-pointer {
  position: absolute; left: 50%; top: calc(var(--u) * 16); z-index: 8; width: 0; height: 0; pointer-events: none;
  border-left: calc(var(--u) * 19) solid transparent;
  border-right: calc(var(--u) * 19) solid transparent;
  border-top: calc(var(--u) * 45) solid var(--tmrw-gold-2);
  transform: translateX(-50%); transform-origin: 50% calc(var(--u) * 7);
}
.tmcrv-skin-wheel .tmrw-pointer::after {
  content: ""; position: absolute; left: calc(var(--u) * -12); top: calc(var(--u) * -51);
  width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 999px;
  background: radial-gradient(circle at 30% 28%, #fff7cd, #f83b60 58%, #6d0d2a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.tmcrv-skin-wheel .tmrw-pointer.is-tick { animation: tmrwPointerFlick 150ms cubic-bezier(.12, .84, .18, 1); }

/* ---- hub ring: 2470-2501 ---- */
.tmcrv-skin-wheel .tmrw-hub { position: absolute; inset: 33.5%; z-index: 6; border-radius: 50%; pointer-events: none; }
.tmcrv-skin-wheel .tmrw-hub::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, .88), rgba(255, 255, 255, 0) 20%),
    conic-gradient(from 14deg, #ffeaa2, #34f5b2, #f8c957, #fff7c2, #16c784, #c58b2a, #ffeaa2);
  -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 63% 100%);
  mask: radial-gradient(circle, transparent 0 62%, #000 63% 100%);
  box-shadow: 0 0 0 2px rgba(255, 248, 190, .38), 0 0 18px rgba(48, 255, 180, .18), 0 0 22px rgba(248, 201, 87, .18);
}
.tmcrv-skin-wheel .tmrw-hub::after {
  content: ""; position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(222, 255, 235, .38); box-shadow: inset 0 0 18px rgba(37, 244, 238, .12);
}

/* ---- centre SPIN button: base 257-279, 2049-2070, 2502-2543, 2617-2632 (the final cascade is static: no animation) ---- */
.tmcrv-skin-wheel .tmrw-spin {
  position: absolute; left: 50%; top: 50%; z-index: 7;
  width: 30.5%; height: 30.5%; min-width: 64px; min-height: 64px;
  max-width: calc(var(--u) * 190); max-height: calc(var(--u) * 190);
  margin: 0; padding: 0; display: grid; place-items: center; isolation: isolate; overflow: hidden;
  border: 0; border-radius: 999px; -webkit-appearance: none; appearance: none;
  background:
    radial-gradient(circle at 30% 18%, #ffffff 0 8%, #d9fff0 16%, rgba(217, 255, 240, 0) 31%),
    linear-gradient(125deg, #00b979 0%, #7dffd2 24%, #0bd98b 44%, #02a96e 62%, #41ffd0 82%, #02714f 100%),
    radial-gradient(circle at 50% 72%, #00835e 0%, #022e22 100%);
  background-size: 100% 100%, 220% 220%, 100% 100%; background-position: center, 42% 50%, center;
  color: #022316; font-family: inherit; font-size: clamp(11px, 3.7cqw, 24px); font-weight: 950;
  line-height: 1.05; letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .42), 0 0 14px rgba(204, 255, 225, .50);
  box-shadow:
    0 calc(var(--u) * 18) calc(var(--u) * 38) rgba(0, 0, 0, .48),
    0 0 0 calc(var(--u) * 4) rgba(225, 255, 234, .72),
    0 0 0 calc(var(--u) * 10) rgba(37, 244, 238, .14),
    0 0 0 calc(var(--u) * 15) rgba(248, 201, 87, .22),
    0 0 calc(var(--u) * 22) rgba(45, 255, 181, .28),
    inset 0 2px 2px rgba(255, 255, 255, .62),
    inset 0 calc(var(--u) * -16) calc(var(--u) * 24) rgba(0, 58, 38, .30);
  transform: translate(-50%, -50%); cursor: pointer; touch-action: manipulation;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), filter 180ms ease-out;
}
.tmcrv-skin-wheel .tmrw-spin::before {
  content: ""; position: absolute; inset: calc(var(--u) * 8); z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 70% 80%, rgba(0, 74, 48, .20), rgba(0, 0, 0, 0) 46%);
}
.tmcrv-skin-wheel .tmrw-spin:hover { filter: saturate(1.12) brightness(1.04); }
.tmcrv-skin-wheel .tmrw-spin:active { transform: translate(-50%, -50%) scale(.98); }
.tmcrv-skin-wheel .tmrw-spin:focus-visible { outline: 3px solid #f8c957; outline-offset: max(5px, calc(var(--u) * 17)); }
/* the OPEN/DROP control behind it is disabled: say so instead of being a silent dead tap */
.tmcrv-skin-wheel .tmrw-spin[aria-disabled="true"] { opacity: .55; filter: saturate(.7); cursor: not-allowed; }

/* ---- result plaque under the pointer ---- */
.tmcrv-skin-wheel .tmrw-plaque {
  position: absolute; left: 50%; top: 13%; z-index: 9; box-sizing: border-box; max-width: 64%;
  padding: 1cqw 3.4cqw; overflow: hidden; border-radius: 999px; pointer-events: none;
  border: 2px solid var(--tmrw-gold);
  background: linear-gradient(180deg, rgba(24, 16, 5, .94), rgba(5, 3, 1, .96));
  color: var(--tmrw-gold-2); font-size: clamp(12px, 4.6cqw, 28px); font-weight: 950; line-height: 1.1;
  letter-spacing: .03em; text-align: center; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .8), 0 0 10px rgba(248, 201, 87, .35);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(0, 0, 0, .6), 0 0 calc(var(--u) * 18) rgba(248, 201, 87, .28);
  opacity: 0; transform: translate(-50%, 0) scale(.9);
  transition: opacity 200ms ease-out, transform 240ms cubic-bezier(.2, .9, .3, 1.2);
}
.tmcrv-skin-wheel .tmrw-board.is-landed .tmrw-plaque { opacity: 1; transform: translate(-50%, 0) scale(1); }
.tmcrv-skin-wheel .tmrw-board.is-big .tmrw-plaque { box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(0, 0, 0, .6), 0 0 calc(var(--u) * 34) rgba(255, 214, 89, .6); }
.tmcrv-skin-wheel .tmrw-board.is-win .tmrw-plaque { border-color: var(--tmrw-gold-2); }
.tmcrv-skin-wheel .tmrw-board.is-spinning .tmrw-spin { cursor: progress; }
.tmcrv-skin-wheel .tmrw-board.is-lose .tmrw-plaque {
  border-color: rgba(190, 205, 235, .5); color: #d6deee; text-shadow: 0 2px 3px rgba(0, 0, 0, .8);
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(0, 0, 0, .6);
}

/* ---- win burst, inside the board: 1544-1608 and keyframes 1628-1647 (sizes in cqw of the board) ---- */
.tmcrv-skin-wheel .tmrw-fx-layer {
  position: absolute; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 180ms ease;
}
.tmcrv-skin-wheel .tmrw-fx-layer.is-active { opacity: 1; }
.tmcrv-skin-wheel .tmrw-fx-boom {
  position: absolute; left: 50%; top: 50%; width: 56cqw; height: 56cqw; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, .96) 0 7%, rgba(255, 218, 84, .92) 8% 18%, rgba(254, 44, 85, .38) 28%, rgba(37, 244, 238, .16) 44%, transparent 68%);
  box-shadow: 0 0 10cqw rgba(255, 214, 89, .80), 0 0 20cqw rgba(254, 44, 85, .42);
  animation: tmrwFxBoom 950ms cubic-bezier(.12, .74, .12, 1) forwards;
}
.tmcrv-skin-wheel .tmrw-fx-boom::after {
  content: ""; position: absolute; inset: -10%; border-radius: 50%;
  border: 4px solid rgba(255, 230, 129, .70);
  box-shadow: 0 0 34px rgba(255, 212, 87, .82), inset 0 0 40px rgba(255, 255, 255, .20);
  animation: tmrwFxRing 850ms ease-out forwards;
}
.tmcrv-skin-wheel .tmrw-fx-spark {
  position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 999px;
  background: var(--c);
  box-shadow: 0 0 calc(var(--u) * 16) var(--c), 0 0 calc(var(--u) * 34) var(--c);
  animation: tmrwFxSpark 1280ms cubic-bezier(.12, .74, .18, 1) var(--d) forwards;
}
.tmcrv-skin-wheel .tmrw-fx-confetti {
  position: absolute; top: -3cqw; width: calc(var(--u) * 8); height: calc(var(--u) * 14); border-radius: 3px;
  background: var(--c); box-shadow: 0 0 calc(var(--u) * 10) var(--c);
  animation: tmrwFxConfetti 1550ms cubic-bezier(.12, .76, .22, 1) var(--d) forwards;
}

@keyframes tmrwPointerFlick {
  0% { transform: translateX(-50%) rotate(0deg); }
  24% { transform: translateX(-50%) rotate(18deg); }
  58% { transform: translateX(-50%) rotate(-7deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}
@keyframes tmrwHit {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes tmrwFxBoom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); filter: blur(8px); }
  18% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.7); filter: blur(15px); }
}
@keyframes tmrwFxRing { to { opacity: 0; transform: scale(2.9); } }
@keyframes tmrwFxSpark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.12); }
}
@keyframes tmrwFxConfetti {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--x), 112cqw, 0) rotate(var(--r)); }
}

/* reduced motion: no animation or transition at all; the landed wedge and the plaque are simply shown */
@media (prefers-reduced-motion: reduce) {
  .tmcrv-skin-wheel .tmrw-pointer,
  .tmcrv-skin-wheel .tmrw-hit,
  .tmcrv-skin-wheel .tmrw-plaque,
  .tmcrv-skin-wheel .tmrw-spin,
  .tmcrv-skin-wheel .tmrw-fx-layer,
  .tmcrv-skin-wheel .tmrw-fx-boom,
  .tmcrv-skin-wheel .tmrw-fx-boom::after,
  .tmcrv-skin-wheel .tmrw-fx-spark,
  .tmcrv-skin-wheel .tmrw-fx-confetti { animation: none !important; transition: none !important; }
  .tmcrv-skin-wheel .tmrw-fx-layer { display: none; }
}

/* ---- the showcase look (owner 2026-10-17: a better-looking, cooler wheel): a casino-stage backdrop, a photoreal gold rim, a
   jewelled pointer and hub, all art by Codex in reveal-wheel/. The live prize sectors show through the rim's hole (--rim-gap is
   the rim's width on each side, as a share of the shell). The rim is clean: the ring of blinking lamps is gone (owner 2026-10-18,
   "not pretty"); a win is shown by the landed wedge, the plaque and the burst. ---- */
.tmcrv-skin-wheel .tmcrv-board.tmrw-board { --rim-gap: 11%; background: #05040c url('reveal-wheel/wheel-stage.webp') center / cover no-repeat; }
.tmcrv-skin-wheel .tmrw-shell { inset: 5%; box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, .6); }
.tmcrv-skin-wheel .tmrw-shell::before,
.tmcrv-skin-wheel .tmrw-shell::after,
.tmcrv-skin-wheel .tmrw-pointer::after,
.tmcrv-skin-wheel .tmrw-hub::before,
.tmcrv-skin-wheel .tmrw-hub::after,
.tmcrv-skin-wheel .tmrw-spin::before { display: none; }
.tmcrv-skin-wheel .tmrw-disc,
.tmcrv-skin-wheel .tmrw-gloss,
.tmcrv-skin-wheel .tmrw-hit { inset: var(--rim-gap); }
.tmcrv-skin-wheel .tmrw-rim { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: url('reveal-wheel/wheel-rim.webp') center / 100% 100% no-repeat; }
.tmcrv-skin-wheel .tmrw-pointer {
  top: 0; width: 13cqw; height: 17.4cqw; border: 0;
  background: url('reveal-wheel/wheel-pointer.webp') center top / contain no-repeat; transform-origin: 50% 18%;
  filter: drop-shadow(0 1.2cqw 1.2cqw rgba(0, 0, 0, .55)); /* static: the flick only turns it */
}
.tmcrv-skin-wheel .tmrw-hub { inset: 34.5%; background: url('reveal-wheel/wheel-hub.webp') center / contain no-repeat; }
.tmcrv-skin-wheel .tmrw-spin {
  width: 21%; height: 21%; min-width: 56px; min-height: 56px; background: transparent; box-shadow: none;
  color: #fff1a8; font-size: clamp(13px, 5cqw, 30px); letter-spacing: .08em;
  text-shadow: 0 2px 0 #3a2604, 0 0 1.4cqw rgba(255, 214, 89, .95), 0 0 3cqw rgba(255, 190, 60, .55);
}
.tmcrv-skin-wheel .tmrw-plaque { top: 15%; }
.tmcrv-skin-wheel .tmrw-fx-coin {
  position: absolute; left: 50%; top: 50%; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; opacity: 0;
  animation: tmrwFxCoin 1300ms cubic-bezier(.12, .74, .2, 1) var(--d) forwards;
}
@keyframes tmrwFxCoin {
  0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 30cqw)) scale(1) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
  .tmcrv-skin-wheel .tmrw-fx-coin { display: none; }
}

/* ---- owner 2026-10-26: no gold rim. The prize wheel itself fills the rim's place, so --rim-gap is 0 and the rim art is hidden;
   the wheel's own outer band with the sector numbers, the frets and the pegs is its edge now. The shell keeps the rim's size
   (90% of the board) but sits 2% lower, so the pointer can stand higher and its tail rides over the pegs like a real ratchet.
   The hub is smaller (33% of the shell) and SPIN with it. The board is never taller than the screen (a phone turned sideways
   sees the whole wheel). Everything is in % and cqw, so every screen scales the same way. ---- */
.tmcrv-skin-wheel .tmcrv-board.tmrw-board { --rim-gap: 0%; width: min(100%, 640px, calc(100vh - 32px)); }
@supports (height: 100svh) { .tmcrv-skin-wheel .tmcrv-board.tmrw-board { width: min(100%, 640px, calc(100svh - 32px)); } }
.tmcrv-skin-wheel .tmrw-shell { inset: 7% 5% 3% 5%; }
.tmcrv-skin-wheel .tmrw-rim { display: none; }
.tmcrv-skin-wheel .tmrw-hub { inset: 33.5%; }
.tmcrv-skin-wheel .tmrw-spin { width: 22.4%; height: 22.4%; font-size: clamp(13px, 5.4cqw, 32px); }
.tmcrv-skin-wheel .tmrw-pointer { top: -5.2%; width: 9cqw; height: 12cqw; }