.roulette-prize { margin: 12px 0; border: 1px solid #dce0d3; border-radius: 8px; }
#roulette-launch { position: fixed; right: 16px; bottom: 16px; z-index: 19; margin: 0; border-radius: 30px; }
#roulette-dialog { width: min(92vw,460px); padding: 24px; border-radius: 18px; border: 1px solid #dce0d3; background: #faf8f1; color: #293223; }
#roulette-dialog h2 { margin: 0 0 12px; font: 28px Georgia,serif; }
#roulette-dialog label { display: block; margin: 14px 0; }
#roulette-dialog input { width: 100%; padding: 10px; border: 1px solid #a9b79d; border-radius: 6px; font: inherit; }
#roulette-dialog button, #roulette-launch { background: #465f25; color: white; padding: 9px 13px; border: 0; cursor: pointer; font: inherit; }
#roulette-dialog button:disabled { opacity: .55; cursor: wait; }
#roulette-dialog [hidden] { display: none !important; }
.roulette-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.roulette-wheel-wrap { position: relative; width: min(100%,300px); margin: 14px auto; }
.roulette-wheel-wrap::before { content: ''; position: absolute; z-index: 1; top: -2px; left: calc(50% - 9px); border: 9px solid transparent; border-top: 16px solid #293223; }
#roulette-wheel { display: block; width: 100%; height: auto; transition: transform 3s cubic-bezier(.12,.62,.18,1); }
#roulette-rewards { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { #roulette-wheel { transition: none; } }

#roulette-dialog {
  background: radial-gradient(ellipse at 50% 45%, #fffdf6, #faf8f1 63%, #eee5d1);
  border-color: #cfbe92;
  box-shadow: 0 20px 65px #26381f35;
}
#roulette-dialog::backdrop { background: #1b2919b3; }
.roulette-wheel-wrap {
  isolation: isolate;
  width: min(100%, 330px);
  padding-bottom: 43px;
}
.roulette-wheel-wrap::before {
  top: -2px;
  left: calc(50% - 14px);
  width: 28px;
  height: 42px;
  border: 0;
  background: linear-gradient(110deg, #fff0c5 0%, #be8f47 49%, #e9cb86 52%, #936933 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 2px 3px #26381f88);
}
.roulette-wheel-wrap::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 1px;
  left: 19%;
  width: 62%;
  height: 76px;
  background: linear-gradient(to bottom, #26381f, #5c7440 75%, #c5a067 76%, #ebd6a1 79%, #3c5122 80%, #26381f);
  clip-path: polygon(32% 0, 68% 0, 84% 74%, 96% 76%, 100% 100%, 0 100%, 4% 76%, 16% 74%);
}
#roulette-wheel {
  border-radius: 50%;
  filter: drop-shadow(0 7px 9px #26381f48);
}