/* Wheel: a fixed cabinet, axle and foot on a continuous photographed table.
   The live SVG disc and its controller-owned rotation are untouched. */
#coModal[data-game="wheel"] {
  --co-scene-rgb: 157, 139, 103;
  --co-surface-rgb: 18, 26, 24;
}
#coModal[data-game="wheel"] .co-playfield::before { background: none; }
#coModal[data-game="wheel"] .co-stage {
  padding-top: 30px;
  padding-bottom: 26px;
  background: #132722;
}
#coModal[data-game="wheel"] .co-stage::before {
  content: "";
  inset: 0 0 -70px;
  z-index: -1;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #101a17a6, #10231c0d 28%, #0a1c1500 78%, #12201cd9),
    linear-gradient(90deg, #12201ca6, transparent 20%, transparent 83%, #12201c99),
    url('/assets/casino-scenes-20261023/wheel-salon.webp') center top / cover no-repeat;
}
#coModal[data-game="wheel"] .co-wheel-cabinet { isolation: isolate; }
/* The long soft shadow falls away from the upper-left key light. */
#coModal[data-game="wheel"] .co-wheel-cabinet::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 20%;
  bottom: 31px;
  width: 74%;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #010d0ab3 0%, #03130c85 25%, #061c1145 50%, transparent 72%);
  transform: rotate(-7deg) skewX(-24deg);
  filter: blur(8px);
  pointer-events: none;
}
#coModal[data-game="wheel"] .co-wheel-cabinet::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 9%;
  bottom: 32px;
  width: 82%;
  height: 39px;
  background: radial-gradient(ellipse, #010907cc 8%, #020c0994 35%, transparent 72%);
  filter: blur(3px);
  pointer-events: none;
}
/* Perspective belongs to the stationary assembly, never to the spinning disc. */
#coModal[data-game="wheel"] .co-wheel {
  z-index: 2;
  transform: perspective(1100px) rotateX(5deg) rotateY(-7deg);
  transform-origin: 50% 100%;
}
#coModal[data-game="wheel"] .co-wheel::before {
  content: "";
  position: absolute;
  inset: 1%;
  z-index: 0;
  border: 9px solid #382519;
  border-right-color: #251a13;
  border-bottom-color: #1c1510;
  border-radius: 50%;
  background: #33271b;
  box-shadow: 2px 2px 0 #94734b, 6px 7px 0 #2c1c12, 10px 11px 0 #181711;
  transform: translate(5px, 4px);
  pointer-events: none;
}
#coModal[data-game="wheel"] .co-wheel-rim {
  z-index: 1;
  border: 9px solid #4f3824;
  border-top-color: #97734b;
  border-left-color: #80603e;
  border-bottom-color: #35261a;
  background: linear-gradient(130deg, #f6d69a32, #fff1c006 40%, #160b0661 82%), url('/assets/casino-materials-20261022/walnut.webp') center / cover;
  box-shadow: inset 0 0 0 2px #c5a46e, inset 0 0 0 4px #35271b, 0 0 0 1px #c3a16b, 0 3px 0 #1a1712;
}
#coModal[data-game="wheel"] .co-wheel-rim::before {
  inset: -6px;
  border: 1px solid #ead3a17a;
  border-right-color: #49362480;
  border-bottom-color: #31271c80;
  box-shadow: inset 1px 2px 2px #fff0c224;
}
#coModal[data-game="wheel"] .co-wheel-rim > i {
  background: radial-gradient(circle at 30% 20%, #f6dfa9, #a38750 48%, #433624 83%);
  border-color: #bea375;
  box-shadow: inset 0 -1px #42311ab3, 0 1px 2px #000b;
}
#coModal[data-game="wheel"] .co-wheel-disc {
  z-index: 2;
  border-color: #ac925d;
  box-shadow: 0 0 0 2px #1d211b, 0 0 0 3px #a88d58;
}
/* A stationary lighting pass gives the enamel depth as sectors rotate beneath it. */
#coModal[data-game="wheel"] .co-wheel::after {
  content: "";
  position: absolute;
  inset: 6.5%;
  z-index: 3;
  border-radius: 50%;
  background: radial-gradient(ellipse at 26% 13%, #fff0ce35, transparent 43%), linear-gradient(140deg, #fff4d70c 15%, transparent 40%, #04100d52 94%);
  box-shadow: inset 0 5px 10px #18201675, inset 0 -2px 3px #e9d39e26;
  pointer-events: none;
}
#coModal[data-game="wheel"] .co-sector > path { stroke: #a99b73a8; }
#coModal[data-game="wheel"] .co-sector[data-value="0.5"] > path { fill: #655568; }
#coModal[data-game="wheel"] .co-sector[data-value="1"] > path { fill: #426e5c; }
#coModal[data-game="wheel"] .co-sector[data-value="2"] > path { fill: #995e48; }
#coModal[data-game="wheel"] .co-sector[data-value="6.36"] > path { fill: #c9ad69; }
#coModal[data-game="wheel"] .co-sector > text { fill: #f3ecda; stroke: #14221c4d; }
#coModal[data-game="wheel"] .co-sector[data-landed="true"] > path { stroke: #fff0be; stroke-width: 2.5; }
#coModal[data-game="wheel"] .co-wheel-hub {
  z-index: 4;
  border-color: #b39863;
  background: radial-gradient(ellipse at 31% 18%, #c3ae7159, transparent 63%), linear-gradient(145deg, #31423a, #192620 65%, #101b16);
  box-shadow: inset 0 0 0 1px #ecd7a3, inset 0 0 0 4px #6e5734, inset 0 2px 5px #fff5ce21, 2px 3px 0 #4a3e29, 4px 7px 9px #0009;
}
#coModal[data-game="wheel"] .co-wheel-pointer {
  z-index: 5;
  top: -.2%;
  left: 47%;
  width: 6%;
  height: 10.7%;
  background: linear-gradient(100deg, #765d35, #f4dca3 31%, #a88a53 52%, #e4ca92 59%, #705a35);
  filter: drop-shadow(2px 4px 2px #000b);
}
/* Visible axle support connects the wheel to a broad, weighted wooden foot. */
#coModal[data-game="wheel"] .co-wheel-base {
  position: relative;
  z-index: 1;
  width: 59%;
  height: 33px;
  margin: 25px auto 0;
  border: 1px solid #ad8f59;
  border-bottom: 8px solid #312116;
  border-radius: 50% 50% 14px 14px / 45% 45% 7px 7px;
  background: linear-gradient(170deg, #ead5a044, #593a1c0d 40%, #170c076b), url('/assets/casino-materials-20261022/walnut.webp') center 70% / cover;
  box-shadow: inset 0 2px #c8ac7959, inset 0 -1px #15110dcc, 0 1px 0 #8e7149, 2px 4px 2px #020905c9, 9px 6px 8px #02100980;
}
#coModal[data-game="wheel"] .co-wheel-base::before {
  content: "";
  position: absolute;
  width: 18%;
  height: 145px;
  left: 41%;
  bottom: 13px;
  border: 1px solid #9d8256;
  border-radius: 7px 7px 9px 9px;
  background: linear-gradient(90deg, #201b13, #a78d5e 10%, #705c36 18%, #384035 40%, #1f2c24 76%, #8d794e 91%, #29251b);
  box-shadow: inset 1px 0 #e2c98d6b, 5px 0 0 #28241a, 8px 4px 8px #0006;
  pointer-events: none;
}
#coModal[data-game="wheel"] .co-wheel-base::after {
  content: "";
  position: absolute;
  left: -3%;
  bottom: -12px;
  width: 108%;
  height: 11px;
  background: radial-gradient(ellipse, #000c 24%, #0008 49%, transparent 72%);
  filter: blur(2px);
  pointer-events: none;
}
#coModal[data-game="wheel"] .co-wheel-legend {
  position: relative;
  z-index: 2;
  margin-top: 23px;
  color: #d0d4c4;
  text-shadow: 0 1px 3px #06160ee6;
}
#coModal[data-game="wheel"] .co-settlement-slot {
  background: linear-gradient(#12201c, rgb(var(--co-surface-rgb)));
}
@media(max-width:760px) {
  #coModal[data-game="wheel"] .co-stage { padding-top: 27px; padding-bottom: 24px; }
  #coModal[data-game="wheel"] .co-wheel { transform: perspective(900px) rotateX(4deg) rotateY(-5deg); }
  #coModal[data-game="wheel"] .co-wheel-base { height: 27px; margin-top: 21px; border-bottom-width: 6px; }
  #coModal[data-game="wheel"] .co-wheel-base::before { height: 115px; }
  #coModal[data-game="wheel"] .co-wheel-cabinet::before { height: 65px; }
  #coModal[data-game="wheel"] .co-wheel-legend { gap: 12px; }
}
@media(forced-colors:active) {
  #coModal[data-game="wheel"] .co-stage::before,
  #coModal[data-game="wheel"] .co-wheel::before,
  #coModal[data-game="wheel"] .co-wheel::after,
  #coModal[data-game="wheel"] .co-wheel-cabinet::before,
  #coModal[data-game="wheel"] .co-wheel-cabinet::after,
  #coModal[data-game="wheel"] .co-wheel-base::before,
  #coModal[data-game="wheel"] .co-wheel-base::after { display: none; }
}