:root {
  --ink: #FFF7EC;
  --muted: #EBD6BE;
  --faint: #A88E74;
  --red: #FF9A1F;
  --red-mid: #F26B00;
  --red-deep: #8A3A00;
  --bg: #0A0603;
}

.scrim {
  background:
    linear-gradient(90deg, rgba(12, 6, 2, .31) 0%, rgba(12, 6, 2, .25) 32%, rgba(12, 6, 2, .05) 58%, rgba(12, 6, 2, 0) 100%),
    linear-gradient(0deg, rgba(12, 6, 2, .5) 0%, rgba(12, 6, 2, 0) 25%),
    linear-gradient(rgba(0, 0, 0, var(--bg-dim)), rgba(0, 0, 0, var(--bg-dim)));
}
@media (max-width: 900px) and (orientation: portrait) {
  .scrim {
    background:
      linear-gradient(180deg, rgba(12, 6, 2, .31) 0%, rgba(12, 6, 2, .16) 40%, rgba(12, 6, 2, .07) 100%),
      linear-gradient(rgba(0, 0, 0, var(--bg-dim)), rgba(0, 0, 0, var(--bg-dim)));
  }
}

.eyebrow { border-color: rgba(255, 154, 31, .55); background: rgba(255, 154, 31, .1); }

.wheel-shadow { box-shadow: 0 40px 70px rgba(0, 0, 0, .75), 0 0 80px rgba(242, 107, 0, .3); }

#metal stop:nth-of-type(1) { stop-color: #8A4A10; }
#metal stop:nth-of-type(2) { stop-color: #2E1404; }
#metal stop:nth-of-type(3) { stop-color: #120700; }
#metal stop:nth-of-type(4) { stop-color: #6A3208; }
#metal stop:nth-of-type(5) { stop-color: #1C0C02; }
#metal stop:nth-of-type(6) { stop-color: #43200A; }

#redMetal stop:nth-of-type(1), #redMetal3 stop:nth-of-type(1), #redMetal4 stop:nth-of-type(1) { stop-color: #FFEBB0; }
#redMetal stop:nth-of-type(2), #redMetal3 stop:nth-of-type(2), #redMetal4 stop:nth-of-type(2) { stop-color: #FFA800; }
#redMetal stop:nth-of-type(3), #redMetal3 stop:nth-of-type(3), #redMetal4 stop:nth-of-type(3) { stop-color: #8A4300; }
#redMetal stop:nth-of-type(4), #redMetal3 stop:nth-of-type(4), #redMetal4 stop:nth-of-type(4) { stop-color: #FFC233; }
#redMetal stop:nth-of-type(5), #redMetal3 stop:nth-of-type(5), #redMetal4 stop:nth-of-type(5) { stop-color: #6A3000; }

#track stop:nth-of-type(1) { stop-color: #241002; }
#track stop:nth-of-type(2) { stop-color: #080301; }

.rim circle:nth-of-type(2) { stroke: #FF9A1F; }

#hubFace2 stop:nth-of-type(1) { stop-color: #4A3018; }
#hubFace2 stop:nth-of-type(2) { stop-color: #160B03; }
#hubFace2 stop:nth-of-type(3) { stop-color: #060301; }

.pointer path:nth-of-type(2) { stroke: #3A1A00; }
.pointer circle { fill: #1A0C02; stroke: #FFD27A; }

#segWin stop:nth-of-type(1) { stop-color: #06286A; }
#segWin stop:nth-of-type(2) { stop-color: #2E8BFF; }
#segWin stop:nth-of-type(3) { stop-color: #0F4FB8; }
#segBlack stop:nth-of-type(1) { stop-color: #7A2600; }
#segBlack stop:nth-of-type(2) { stop-color: #EE6200; }
#segBlack stop:nth-of-type(3) { stop-color: #9A3600; }
#segRed stop:nth-of-type(1) { stop-color: #A85400; }
#segRed stop:nth-of-type(2) { stop-color: #FF9A0D; }
#segRed stop:nth-of-type(3) { stop-color: #C46A00; }

.disc text:nth-of-type(odd) { fill: #3A1800; }
.disc text:nth-of-type(even) { fill: #FFF3E0; }
.disc text:nth-of-type(1) { fill: #FFFFFF; }
.disc path[fill="none"] { stroke: #CFE6FF; }
.disc line { stroke: #FFE2B0; }
.disc circle[r="5"] { fill: #FFF1D6; stroke: #3A1A00; }
.disc circle[r="214"] { stroke: #1A0C02; }

.hub-orbit {
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 0) 0deg, rgba(255, 160, 40, 0) 170deg,
    rgba(255, 180, 60, .4) 290deg, rgba(255, 246, 220, .85) 352deg, rgba(255, 255, 255, 0) 360deg);
}

.bulb { background: radial-gradient(circle at 35% 35%, #6A3A0A, #2A1503); }
.bulb.on {
  background: radial-gradient(circle at 40% 35%, #FFFFFF, #FFD27A 40%, #FF9500);
  box-shadow: 0 0 8px 3px rgba(255, 170, 40, .9), 0 0 20px 7px rgba(242, 107, 0, .45);
}
.wheel.is-won .bulb.on {
  background: radial-gradient(circle at 40% 35%, #FFFFFF, #FFFFFF 40%, #FFE3A8);
  box-shadow: 0 0 10px 4px rgba(255, 255, 255, .85), 0 0 22px 8px rgba(255, 154, 31, .55);
}

.timer {
  background: linear-gradient(180deg, rgba(34, 17, 4, .94), rgba(10, 6, 2, .94));
  border-color: rgba(255, 154, 31, .55);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 200, 120, .15);
}
.num {
  background: linear-gradient(180deg, #2E1806 0%, #170B02 50%, #0C0601 51%, #1E0F03 100%);
  border-color: rgba(255, 154, 31, .4);
}

.modal { background: rgba(8, 4, 1, .82); }
.modal-card {
  background: linear-gradient(180deg, #2C1706, #0D0703);
  border-color: rgba(255, 154, 31, .6);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 80px rgba(242, 107, 0, .35);
}
.claim {
  color: #2A1200;
  background: linear-gradient(180deg, #FFD45C, #FFA41B 55%, #E87800);
  box-shadow: 0 10px 30px rgba(242, 107, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.spark.red   { background: radial-gradient(circle, #FFFFFF 0 12%, #FFC85A 22%, #FF8A00 34%, rgba(255, 138, 0, .45) 50%, rgba(255, 138, 0, 0) 70%); }
.spark.white { background: radial-gradient(circle, #FFFFFF 0 20%, rgba(255, 246, 220, .85) 32%, rgba(255, 210, 120, .35) 50%, rgba(255, 255, 255, 0) 70%); }
.spark-flash { background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 10%, rgba(255, 154, 31, .55) 30%, rgba(255, 154, 31, 0) 68%); }