/* Load after user.css. Decoration only: the rotor geometry and all controls
   keep their original dimensions, positioning and behavior. */
#raffle-event .rf-wheel-arena {
  background:
    radial-gradient(ellipse at 50% 36%, light-dark(#dce6ed4d, #a5c0cf12), transparent 57%),
    var(--rf-panel);
  border-color: light-dark(#e2e7ea, #34414b);
}

#raffle-event .rf-wheel-arena::before {
  width: min(85%, 390px);
  height: 350px;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  background: light-dark(#a6bac90c, #bed1de0a);
  filter: blur(30px);
}

#raffle-event .rf-wheel-arena .rf-section-head {
  margin-bottom: 16px;
}

#raffle-event .rf-wheel-arena .rf-pool-live {
  padding: 14px 0;
  border-radius: 13px;
  border-color: light-dark(#e4e9ed, #34414b);
  background: light-dark(#fafbf9, #171e25);
  box-shadow: inset 0 1px 0 light-dark(#fff, #ffffff04);
}

#raffle-event .rf-wheel-arena .rf-pool-live > div + div {
  border-color: light-dark(#e1e7eb, #34414b);
}

#raffle-event .rf-wheel-arena .rf-pool-live strong {
  color: light-dark(#4b6171, #dce6ed);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.65px;
  margin-top: 4px;
}

#raffle-event .rf-wheel-arena .rf-pool-live span,
#raffle-event .rf-wheel-arena .rf-pool-live small {
  color: light-dark(#8c9da8, #a4b3bd);
}

#raffle-event .rf-wheel-scene {
  padding-top: 31px;
  padding-bottom: 21px;
  isolation: isolate;
}

#raffle-event .rf-wheel-frame {
  /* Do not add a layout border: 20px padding defines the SVG's true radius. */
  width: min(100%, 384px);
  aspect-ratio: 1;
  padding: 20px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 12%, #ffffffd9, transparent 48%),
    linear-gradient(145deg, #faf9f5 0%, #e2e7ea 48%, #f7f8f7 76%, #d1d9df 100%);
  box-shadow:
    0 5px 0 #b8c5cf,
    0 6px 0 1px #c5aa80,
    0 18px 30px light-dark(#6b80911c, #07131d38),
    0 0 35px light-dark(#e4cba51f, #e4cba512),
    inset 0 1px 1px #fffdf7,
    inset 0 -2px 4px #798e9d2b;
  transition: box-shadow .35s ease;
}

#raffle-event .rf-wheel-frame::before,
#raffle-event .rf-wheel-frame::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

#raffle-event .rf-wheel-frame::before {
  inset: 0;
  padding: 2px;
  background: conic-gradient(from -35deg,
    #c7ab77 0deg, #f3e3c3 45deg, #fff9e9 80deg,
    #d4ba8b 125deg, #b99a63 165deg, #e0c898 210deg,
    #fff1d3 250deg, #d9bb85 300deg, #c7ab77 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

#raffle-event .rf-wheel-frame::after {
  inset: 15px;
  border: 1px solid #b99a6570;
  box-shadow: 0 0 0 1px #fffaf0c9, inset 0 1px 0 #ffffffa6;
}

#raffle-event .rf-wheel-rotor {
  background: #fafbf8;
  box-shadow:
    0 0 0 2px #fff9ee,
    0 0 0 3px #c6a66a9c,
    inset 0 0 18px #8197a718;
}

/* The renderer supplies each engraved mark's angle; major marks are longer. */
#raffle-event .rf-wheel-lights {
  z-index: 4;
  pointer-events: none;
}

#raffle-event .rf-wheel-lights span,
#raffle-event .rf-wheel-lights span:nth-child(even) {
  width: 1.5px;
  height: 6px;
  border-radius: 1px;
  background: #a38146;
  box-shadow: 0 1px 0 #ffffffc9;
  transform: translate(-50%, -50%) rotate(var(--tick-angle, 0deg));
  opacity: .76;
  transition: opacity .3s ease, background-color .3s ease;
}

#raffle-event .rf-wheel-lights span.major-tick {
  width: 2px;
  height: 8px;
  background: #8f6d3a;
  opacity: .94;
}

#raffle-event .rf-wheel-pointer {
  top: -7px;
  left: 50%;
  width: 27px;
  height: 42px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 90% 20%, 100% 43%, 50% 100%, 0 43%, 10% 20%);
  background: conic-gradient(from 0deg at 50% 37%, #d0a15b, #fff0c5 90deg, #a57235 179deg, #e6c58b 181deg, #fff4d4 270deg, #d0a15b);
  filter: drop-shadow(0 3px 3px #89642d3d);
  z-index: 7;
  pointer-events: none;
}

#raffle-event .rf-wheel-pointer::before {
  content: '';
  position: absolute;
  inset: 4px 5px 11px;
  clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%);
  background: linear-gradient(125deg, #fff5d3, #e4ba7c 48%, #ad793e 49%, #f2d09b);
  opacity: .88;
}

#raffle-event .rf-wheel-center {
  width: 25%;
  border: 1px solid #d3b67f;
  color: #385368;
  background:
    radial-gradient(ellipse at 36% 16%, #ffffffd9, transparent 65%),
    linear-gradient(145deg, #fffdf5 0%, #f8efd9 58%, #f5e8cc 100%);
  box-shadow:
    0 0 0 3px #fff9ed,
    0 0 0 4px #c7a668,
    0 5px 15px #647b8c2b,
    inset 0 1px 1px #ffffff,
    inset 0 -3px 8px #c1a36e24;
  z-index: 6;
  gap: 3px;
  transition: box-shadow .2s ease, filter .2s ease;
}

#raffle-event .rf-wheel-center::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid #c8ab7547;
  border-radius: 50%;
  pointer-events: none;
}

#raffle-event .rf-wheel-center:not(:disabled):hover {
  filter: brightness(1.03);
  box-shadow: 0 0 0 3px #fff9ed, 0 0 0 4px #b78f4c, 0 5px 18px #647b8c33, inset 0 1px 3px #ffffff;
}

#raffle-event .rf-wheel-center:not(:disabled):active {
  filter: brightness(.98);
}

#raffle-event .rf-wheel-center:focus-visible {
  outline: 2px solid #6d8ca2;
  outline-offset: 6px;
}

#raffle-event .rf-wheel-center i,
#raffle-event .rf-wheel-center svg,
#raffle-event .rf-wheel-center .rf-center-emblem {
  color: #a47b3e;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  width: 14px;
  height: 14px;
  margin-bottom: 1px;
}

#raffle-event .rf-wheel-center .rf-center-emblem {
  display: inline-grid;
  place-items: center;
}

#raffle-event .rf-wheel-center b {
  color: #304b60;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 2px;
  text-shadow: 0 1px 0 #ffffffbd;
}

#raffle-event .rf-wheel-center small {
  color: #647b8c;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 2px;
}

#raffle-event .rf-wheel-center:disabled {
  opacity: 1;
  color: #637c8d;
}

#raffle-event .rf-wheel-center:disabled b {
  font-size: 14px;
  letter-spacing: 0;
}

#raffle-event .rf-wheel-center:disabled small {
  color: #8396a2;
}

#raffle-event .rf-wheel-plinth {
  width: 61%;
  height: 19px;
  margin: 11px auto -10px;
  background: radial-gradient(ellipse, light-dark(#8496a326, #07131d55), transparent 69%);
  opacity: .55;
}

#raffle-event .rf-wheel-spark {
  color: light-dark(#bd9c6b, #c6a474);
  opacity: .42;
  font-size: 16px;
  pointer-events: none;
}

#raffle-event .rf-wheel-spark.s1 { top: 23%; left: 1%; }
#raffle-event .rf-wheel-spark.s2 { top: 68%; right: 1%; font-size: 13px; }
#raffle-event .rf-wheel-spark.s3 { top: 10%; right: 9%; font-size: 9px; opacity: .35; }

#raffle-event .rf-wheel-arena .rf-wheel-update {
  color: light-dark(#8192a0, #a6b8c7);
}

/* Spinning only raises the steady rim light; no flashing or fake movement. */
#raffle-event .rf-wheel-frame.is-spinning {
  box-shadow:
    0 5px 0 #b8c5cf,
    0 6px 0 1px #c5aa80,
    0 18px 30px light-dark(#6b80911c, #07131d38),
    0 0 31px #e2bd7233,
    inset 0 1px 2px #fffdf7,
    inset 0 -2px 4px #798e9d2b;
}

#raffle-event .rf-wheel-frame.is-spinning .rf-wheel-lights span {
  background: #9d773d;
  opacity: .9;
}

@media (max-width: 480px) {
  #raffle-event .rf-wheel-frame {
    /* Matches the original phone radius exactly. */
    padding: 15px;
    box-shadow: 0 4px 0 #b8c5cf, 0 5px 0 1px #c5aa80, 0 13px 24px light-dark(#6b80911c, #07131d38), inset 0 1px 1px #fffdf7;
  }
  #raffle-event .rf-wheel-frame::before { padding: 1.5px; }
  #raffle-event .rf-wheel-frame::after { inset: 11px; }
  #raffle-event .rf-wheel-lights span,
  #raffle-event .rf-wheel-lights span:nth-child(even) { width: 1px; height: 4px; }
  #raffle-event .rf-wheel-lights span.major-tick { width: 1.5px; height: 6px; }
  #raffle-event .rf-wheel-pointer { width: 23px; height: 35px; top: -6px; }
  #raffle-event .rf-wheel-center { width: 27%; border-width: 1px; gap: 2px; }
  #raffle-event .rf-wheel-center::before { inset: 4px; }
  #raffle-event .rf-wheel-center b { font-size: 17px; letter-spacing: 1px; }
  #raffle-event .rf-wheel-center small { font-size: 9px; letter-spacing: 1.5px; }
  #raffle-event .rf-wheel-center i,
  #raffle-event .rf-wheel-center svg,
  #raffle-event .rf-wheel-center .rf-center-emblem { width: 11px; height: 11px; font-size: 11px; }
  #raffle-event .rf-wheel-center:disabled b { font-size: 11px; }
  #raffle-event .rf-wheel-spark.s1 { font-size: 12px; }
  #raffle-event .rf-wheel-spark.s2 { font-size: 10px; }
  #raffle-event .rf-wheel-arena .rf-pool-live strong { font-size: 23px; }
  #raffle-event .rf-wheel-arena .rf-pool-live span { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #raffle-event .rf-wheel-frame,
  #raffle-event .rf-wheel-center,
  #raffle-event .rf-wheel-lights span { transition: none; }
}