/* Roulette Wheel CSS - Converted from CodePen LESS */

.main {
  width: 374px;
  margin: 0 auto;
}

.plate {
  background-color: gray;
  width: 350px;
  height: 350px;
  margin: 12px;
  border-radius: 50%;
  position: relative;
  animation: rotate 24s infinite linear;
}

.plate:after, .plate:before {
  content: '';
  display: block;
  position: absolute;
  border-radius: 50%;
}

.plate:after {
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border: 6px solid gold;
  box-shadow: inset 0px 0px 0px 2px #b8860b, 0px 0px 0px 2px #ffd700;
}

.plate:before {
  background: rgba(0,0,0,.65);
  border: 1px solid silver;
  box-shadow: inset 0px 0px 0px 2px #a0a0a0;
  top: 12%;
  left: 12%;
  right: 12%;
  bottom: 12%;
  z-index: 1;
}

.number {
  width: 32px;
  height: 175px;
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 0;
  left: calc(50% - 16px);
  transform-origin: 50% 100%;
  background-color: transparent;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 175px solid black;
  box-sizing: border-box;
}

/* Generate all 37 number positions (0-36) */
.number:nth-child(1) { transform: rotateZ(0deg); }
.number:nth-child(2) { transform: rotateZ(9.73deg); }
.number:nth-child(3) { transform: rotateZ(19.46deg); }
.number:nth-child(4) { transform: rotateZ(29.19deg); }
.number:nth-child(5) { transform: rotateZ(38.92deg); }
.number:nth-child(6) { transform: rotateZ(48.65deg); }
.number:nth-child(7) { transform: rotateZ(58.38deg); }
.number:nth-child(8) { transform: rotateZ(68.11deg); }
.number:nth-child(9) { transform: rotateZ(77.84deg); }
.number:nth-child(10) { transform: rotateZ(87.57deg); }
.number:nth-child(11) { transform: rotateZ(97.3deg); }
.number:nth-child(12) { transform: rotateZ(107.03deg); }
.number:nth-child(13) { transform: rotateZ(116.76deg); }
.number:nth-child(14) { transform: rotateZ(126.49deg); }
.number:nth-child(15) { transform: rotateZ(136.22deg); }
.number:nth-child(16) { transform: rotateZ(145.95deg); }
.number:nth-child(17) { transform: rotateZ(155.68deg); }
.number:nth-child(18) { transform: rotateZ(165.41deg); }
.number:nth-child(19) { transform: rotateZ(175.14deg); }
.number:nth-child(20) { transform: rotateZ(184.87deg); }
.number:nth-child(21) { transform: rotateZ(194.6deg); }
.number:nth-child(22) { transform: rotateZ(204.33deg); }
.number:nth-child(23) { transform: rotateZ(214.06deg); }
.number:nth-child(24) { transform: rotateZ(223.79deg); }
.number:nth-child(25) { transform: rotateZ(233.52deg); }
.number:nth-child(26) { transform: rotateZ(243.25deg); }
.number:nth-child(27) { transform: rotateZ(252.98deg); }
.number:nth-child(28) { transform: rotateZ(262.71deg); }
.number:nth-child(29) { transform: rotateZ(272.44deg); }
.number:nth-child(30) { transform: rotateZ(282.17deg); }
.number:nth-child(31) { transform: rotateZ(291.9deg); }
.number:nth-child(32) { transform: rotateZ(301.63deg); }
.number:nth-child(33) { transform: rotateZ(311.36deg); }
.number:nth-child(34) { transform: rotateZ(321.09deg); }
.number:nth-child(35) { transform: rotateZ(330.82deg); }
.number:nth-child(36) { transform: rotateZ(340.55deg); }
.number:nth-child(37) { transform: rotateZ(350.28deg); }

.number.red {
  border-top-color: var(--roulette-red) !important;
}

.number.black {
  border-top-color: black !important;
}

.number.green {
  border-top-color: green !important;
}

.pit {
  color: #fff;
  padding-top: 12px;
  width: 32px;
  display: inline-block;
  font-size: 12px;
  transform: scale(1,1.8);
  position: absolute;
  top: -175px;
  left: -16px;
}

.inner {
  display: block;
  height: 350px;
  width: 350px;
  position: relative;
}

.inner:after, .inner:before {
  content: '';
  display: block;
  position: absolute;
  border-radius: 50%;
}

.inner:after {
  z-index: 3;
  top: 24%;
  right: 24%;
  bottom: 24%;
  left: 24%;
  background-color: #2c2c2c;
  border: 3px solid #a0a0a0;
}

.inner:before {
  top: 24%;
  bottom: 21%;
  left: 24%;
  right: 22%;
  content: '';
  color: #fff;
  font-size: 60px;
  z-index: 5;
  border-radius: 0;
}

/* Ball positioning for each number (data-spinto values) - EXACT CodePen angles mapped to our array */
.inner[data-spinto='1']:before { transform: rotateZ(-2826deg); transition: transform 9s ease-out; content: '•'; } /* 0 - Position 1 */
.inner[data-spinto='2']:before { transform: rotateZ(-2817deg); transition: transform 9s ease-out; content: '•'; } /* 32 - Position 2 */
.inner[data-spinto='3']:before { transform: rotateZ(-2807deg); transition: transform 9s ease-out; content: '•'; } /* 15 - Position 3 */
.inner[data-spinto='4']:before { transform: rotateZ(-2798deg); transition: transform 9s ease-out; content: '•'; } /* 19 - Position 4 */
.inner[data-spinto='5']:before { transform: rotateZ(-2788deg); transition: transform 9s ease-out; content: '•'; } /* 4 - Position 5 */
.inner[data-spinto='6']:before { transform: rotateZ(-2778deg); transition: transform 9s ease-out; content: '•'; } /* 21 - Position 6 */
.inner[data-spinto='7']:before { transform: rotateZ(-2769deg); transition: transform 9s ease-out; content: '•'; } /* 2 - Position 7 */
.inner[data-spinto='8']:before { transform: rotateZ(-2759deg); transition: transform 9s ease-out; content: '•'; } /* 25 - Position 8 */
.inner[data-spinto='9']:before { transform: rotateZ(-2749deg); transition: transform 9s ease-out; content: '•'; } /* 17 - Position 9 */
.inner[data-spinto='10']:before { transform: rotateZ(-2740deg); transition: transform 9s ease-out; content: '•'; } /* 34 - Position 10 */
.inner[data-spinto='11']:before { transform: rotateZ(-2730deg); transition: transform 9s ease-out; content: '•'; } /* 6 - Position 11 */
.inner[data-spinto='12']:before { transform: rotateZ(-2720deg); transition: transform 9s ease-out; content: '•'; } /* 27 - Position 12 */
.inner[data-spinto='13']:before { transform: rotateZ(-2711deg); transition: transform 9s ease-out; content: '•'; } /* 13 - Position 13 */
.inner[data-spinto='14']:before { transform: rotateZ(-2700deg); transition: transform 9s ease-out; content: '•'; } /* 36 - Position 14 */
.inner[data-spinto='15']:before { transform: rotateZ(-2690deg); transition: transform 9s ease-out; content: '•'; } /* 11 - Position 15 */
.inner[data-spinto='16']:before { transform: rotateZ(-3040deg); transition: transform 9s ease-out; content: '•'; } /* 30 - Position 16 */
.inner[data-spinto='17']:before { transform: rotateZ(-3030deg); transition: transform 9s ease-out; content: '•'; } /* 8 - Position 17 */
.inner[data-spinto='18']:before { transform: rotateZ(-3020deg); transition: transform 9s ease-out; content: '•'; } /* 23 - Position 18 */
.inner[data-spinto='19']:before { transform: rotateZ(-3010deg); transition: transform 9s ease-out; content: '•'; } /* 10 - Position 19 */
.inner[data-spinto='20']:before { transform: rotateZ(-3000deg); transition: transform 9s ease-out; content: '•'; } /* 5 - Position 20 */
.inner[data-spinto='21']:before { transform: rotateZ(-2990deg); transition: transform 9s ease-out; content: '•'; } /* 24 - Position 21 */
.inner[data-spinto='22']:before { transform: rotateZ(-2980deg); transition: transform 9s ease-out; content: '•'; } /* 16 - Position 22 */
.inner[data-spinto='23']:before { transform: rotateZ(-2971deg); transition: transform 9s ease-out; content: '•'; } /* 33 - Position 23 */
.inner[data-spinto='24']:before { transform: rotateZ(-2961deg); transition: transform 9s ease-out; content: '•'; } /* 1 - Position 24 */
.inner[data-spinto='25']:before { transform: rotateZ(-2951deg); transition: transform 9s ease-out; content: '•'; } /* 20 - Position 25 */
.inner[data-spinto='26']:before { transform: rotateZ(-2941deg); transition: transform 9s ease-out; content: '•'; } /* 14 - Position 26 */
.inner[data-spinto='27']:before { transform: rotateZ(-2932deg); transition: transform 9s ease-out; content: '•'; } /* 31 - Position 27 */
.inner[data-spinto='28']:before { transform: rotateZ(-2922deg); transition: transform 9s ease-out; content: '•'; } /* 9 - Position 28 */
.inner[data-spinto='29']:before { transform: rotateZ(-2912deg); transition: transform 9s ease-out; content: '•'; } /* 22 - Position 29 */
.inner[data-spinto='30']:before { transform: rotateZ(-2903deg); transition: transform 9s ease-out; content: '•'; } /* 18 - Position 30 */
.inner[data-spinto='31']:before { transform: rotateZ(-2893deg); transition: transform 9s ease-out; content: '•'; } /* 29 - Position 31 */
.inner[data-spinto='32']:before { transform: rotateZ(-2883deg); transition: transform 9s ease-out; content: '•'; } /* 7 - Position 32 */
.inner[data-spinto='33']:before { transform: rotateZ(-2873deg); transition: transform 9s ease-out; content: '•'; } /* 28 - Position 33 */
.inner[data-spinto='34']:before { transform: rotateZ(-2864deg); transition: transform 9s ease-out; content: '•'; } /* 12 - Position 34 */
.inner[data-spinto='35']:before { transform: rotateZ(-2855deg); transition: transform 9s ease-out; content: '•'; } /* 35 - Position 35 */
.inner[data-spinto='36']:before { transform: rotateZ(-2845deg); transition: transform 9s ease-out; content: '•'; } /* 3 - Position 36 */
.inner[data-spinto='37']:before { transform: rotateZ(-2835deg); transition: transform 9s ease-out; content: '•'; } /* 26 - Position 37 */

.inner.rest:before {
  transition: top .5s ease-in, right .5s ease-in, bottom .5s ease-in, left .5s ease-in;
  top: 25%;
  right: 25%;
  bottom: 24%;
  left: 25%;
}

/* Reset ball position when no data-spinto */
.inner:not([data-spinto]):before {
  transform: none !important;
  transition: none !important;
  top: 24%;
  bottom: 21%;
  left: 24%;
  right: 22%;
  content: '' !important;
}

/* Force reset ball position */
.inner.reset:before {
  transform: none !important;
  transition: none !important;
  top: 24%;
  bottom: 21%;
  left: 24%;
  right: 22%;
  content: '' !important;
}

.data {
  display: block;
  position: absolute;
  top: 30%;
  right: 30%;
  bottom: 30%;
  left: 30%;
  border-radius: 50%;
  animation: rotate 24s reverse linear infinite;
  perspective: 2000px;
  z-index: 100;
}

.data-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.72s;
  transform-style: preserve-3d;
}

.data.reveal .data-inner {
  transform: rotateY(180deg);
}

.mask, .result {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
}

.mask {
  color: #fff;
  font-size: 24px;
  margin: auto;
  line-height: 1.4;
  padding-top: 36px;
}

.result {
  background-color: green;
  color: white;
  transform: rotateY(180deg);
  align-items: center;
  color: #fff;
}

.result-number {
  font-size: 72px;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 12px;
}

.result-color {
  text-transform: uppercase;
  font-size: 21px;
  line-height: 1;
}

.previous-results {
  max-width: 350px;
  margin: 12px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--felt-green);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 10px;
  box-shadow: var(--shadow-medium);
}

.previous-list {
  perspective: 2000;
}

.previous-result {
  display: flex;
  margin: 2px;
  padding: 8px 12px;
  color: var(--white);
  font-size: 14px;
  background: var(--cell-bg);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-weight: bold;
}

.previous-result:first-child {
  animation: flipin .48s ease-out;
}

.previous-number {
  flex: 1;
}

.color-green { 
  background: var(--roulette-green) !important; 
  border-color: #008800 !important;
}
.color-black { 
  background: var(--roulette-black) !important; 
  border-color: #333 !important;
}
.color-red { 
  background: var(--roulette-red) !important; 
  border-color: #dc143c !important;
}

.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

@keyframes rotate {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

@keyframes flipin {
  0% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}