/* =====================================================================
   Roulette (upgrade dial) — volumetric version
   ---------------------------------------------------------------------
   Everything is sized in container units (cqw = 1% of the dial width), so
   one set of numbers works from a 150px phone dial to a 340px desktop one.
   Light comes from the top-left. Layers, back to front:
     shadow → bezel (metal) → plate → scale (ticks + labels) → groove
     → win arc (glowing tube) → boundary markers → face (concave dish)
     → glass dome → needle
   JS contract (see app.js): #dial gets .running / .result-win / .result-lose,
   custom props --win-start/--win-end/--win-arc (deg), --hue and [data-idle];
   #arrow-spin is rotated via inline transform; #chance-value, #chance-sub and
   #dial-result are text targets.
   ===================================================================== */

.rl{
  --hue:100;                       /* 25 (risky, red-orange) … 140 (safe, green); set by JS */
  --win-start:90deg; --win-end:270deg; --win-arc:180deg;

  /* colour set derived from --hue. HSL fallback first, OKLCH where supported. */
  --c-hi:   hsl(calc(var(--hue) * .5 + 6) 100% 70%);
  --c-mid:  hsl(calc(var(--hue) * .5 - 6) 98% 56%);
  --c-deep: hsl(calc(var(--hue) * .5 - 16) 95% 42%);
  --c-text: hsl(calc(var(--hue) * .5 + 14) 100% 78%);

  position:relative; width:100%; max-width:340px; aspect-ratio:1/1; margin:0 auto;
  container-type:inline-size; isolation:isolate;
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
}
@supports (color: oklch(0.5 0.1 100)){
  .rl{
    --c-hi:   oklch(.86 .15 var(--hue));
    --c-mid:  oklch(.72 .17 calc(var(--hue) - 24));
    --c-deep: oklch(.52 .17 calc(var(--hue) - 38));
    --c-text: oklch(.9 .14 calc(var(--hue) + 8));
  }
}
.rl *{box-sizing:border-box}
.rl i,.rl span,.rl p{display:block;margin:0}

/* ---- ground shadow: the dial stands on the panel, it is not printed on it ---- */
.rl-shadow{
  position:absolute; left:10%; right:10%; bottom:-5cqw; height:12cqw; z-index:-1;
  background:radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.62) 0, rgba(0,0,0,.28) 45%, transparent 72%);
  filter:blur(1.4cqw);
}

/* ---- tilt container (desktop pointer parallax; flat on touch and while spinning) ---- */
.rl-body{
  position:absolute; inset:0; border-radius:50%;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.rl.running .rl-body{transform:none}

/* ---- bezel: brushed metal ring with a specular sweep ---- */
.rl-bezel{
  position:absolute; inset:0; border-radius:50%;
  background:
    conic-gradient(from 200deg,
      #2b2142 0deg, #75659b 22deg, #2a2040 48deg, #4d3f70 84deg, #1c1531 118deg,
      #57487c 160deg, #2a2040 200deg, #6c5c93 236deg, #241b39 272deg, #4a3c6b 312deg, #2b2142 360deg);
  box-shadow:
    0 3.4cqw 6.5cqw rgba(0,0,0,.65),
    0 .8cqw 1.6cqw rgba(0,0,0,.55),
    inset 0 .35cqw .5cqw rgba(255,255,255,.28),
    inset 0 -.4cqw .7cqw rgba(0,0,0,.65);
}
.rl-bezel::after{                 /* thin bright lip on the outer edge */
  content:""; position:absolute; inset:.5cqw; border-radius:50%;
  border:.18cqw solid rgba(255,255,255,.10);
  border-top-color:rgba(255,255,255,.32); border-bottom-color:rgba(0,0,0,.45);
}

/* ---- plate: the dark body the bezel holds ---- */
.rl-plate{
  position:absolute; inset:3.4cqw; border-radius:50%;
  background:
    radial-gradient(circle at 32% 22%, #2c2142 0%, #1b1430 38%, #100b1d 78%, #0b0715 100%);
  box-shadow:
    inset 0 1.1cqw 2.2cqw rgba(0,0,0,.85),         /* shadow the bezel lip casts onto the plate */
    inset 0 -.5cqw .9cqw rgba(255,255,255,.07),
    inset 0 0 0 .3cqw rgba(0,0,0,.55);
}

/* ---- scale: ticks + labels ---- */
.rl-scale{position:absolute; inset:0; pointer-events:none}
.rl-ticks{
  position:absolute; inset:0; border-radius:50%;
  background:
    repeating-conic-gradient(from -.4deg, rgba(255,255,255,.7) 0 .8deg, transparent .8deg 18deg),
    repeating-conic-gradient(from -.25deg, rgba(255,255,255,.34) 0 .5deg, transparent .5deg 3.6deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 43.2cqw, #000 43.4cqw 46cqw, transparent 46.2cqw);
          -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 43.2cqw, #000 43.4cqw 46cqw, transparent 46.2cqw);mask:radial-gradient(circle at 50% 50%, transparent 0 43.2cqw, #000 43.4cqw 46cqw, transparent 46.2cqw);
  filter:drop-shadow(0 .22cqw 0 rgba(0,0,0,.75));  /* engraved: dark edge below each tick */
}
.rl-lab{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font:700 2.55cqw/1 Inter,Arial,sans-serif; letter-spacing:.04em; color:rgba(205,190,235,.62);
  text-shadow:0 .2cqw 0 rgba(0,0,0,.8);
}
/* label centre radius 39.8cqw; angle measured from the BOTTOM (the win zone is centred there) */
.rl-lab.p100{margin-top:-39.8cqw}
.rl-lab.p75l{margin-left:-28.1cqw; margin-top:-28.1cqw}
.rl-lab.p75r{margin-left: 28.1cqw; margin-top:-28.1cqw}
.rl-lab.p50l{margin-left:-39.8cqw}
.rl-lab.p50r{margin-left: 39.8cqw}
.rl-lab.p25l{margin-left:-28.1cqw; margin-top: 28.1cqw}
.rl-lab.p25r{margin-left: 28.1cqw; margin-top: 28.1cqw}
@container (max-width: 210px){ .rl-lab{display:none} }

/* ---- groove: the channel the arc sits in. Dark above (lip shadow), lit below. ---- */
.rl-groove{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26.3cqw, rgba(255,255,255,.20) 26.3cqw 26.75cqw, transparent 26.75cqw 36.15cqw, rgba(255,255,255,.13) 36.15cqw 36.6cqw, transparent 36.6cqw),
    radial-gradient(circle at 50% 50%, transparent 0 26.75cqw, rgba(0,0,0,.55) 26.75cqw 27.6cqw, transparent 27.6cqw 35.3cqw, rgba(0,0,0,.45) 35.3cqw 36.15cqw, transparent 36.15cqw),
    linear-gradient(180deg,#020106 0%,#0b0716 38%,#1c1331 70%,#33264f 100%);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 26.3cqw, #000 26.6cqw 36.3cqw, transparent 36.6cqw);
          -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 26.3cqw, #000 26.6cqw 36.3cqw, transparent 36.6cqw);mask:radial-gradient(circle at 50% 50%, transparent 0 26.3cqw, #000 26.6cqw 36.3cqw, transparent 36.6cqw);
}
.rl-groove::after{               /* glassy sheen inside the empty part of the groove */
  content:""; position:absolute; inset:0;
  background:conic-gradient(from 0deg, rgba(255,255,255,.05), rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.05));
}

/* ---- win arc: a raised, lit tube. The glow lives on the wrapper because filters run BEFORE masks. ---- */
.rl-arc-wrap{
  position:absolute; inset:0; border-radius:50%;
  filter:drop-shadow(0 0 1.9cqw color-mix(in srgb, var(--c-mid) 42%, transparent));
  transition:opacity .25s;
}
.rl[data-idle="1"] .rl-arc-wrap{opacity:0}
.rl-arc{
  position:absolute; inset:0; border-radius:50%;
  /* ring ∩ angular range */
  -webkit-mask-image:
    radial-gradient(circle at 50% 50%, transparent 0 27.3cqw, #000 27.5cqw 35.4cqw, transparent 35.6cqw),
    conic-gradient(from var(--win-start), #000 0 var(--win-arc), transparent 0);
  -webkit-mask-composite:source-in;
          mask-image:
    radial-gradient(circle at 50% 50%, transparent 0 27.3cqw, #000 27.5cqw 35.4cqw, transparent 35.6cqw),
    conic-gradient(from var(--win-start), #000 0 var(--win-arc), transparent 0);
          mask-composite:intersect;
}
.rl-arc-color{                    /* hot in the middle of the zone, lighter towards its ends */
  position:absolute; inset:0;
  background:conic-gradient(from var(--win-start),
    var(--c-hi) 0deg, var(--c-mid) calc(var(--win-arc) * .32), var(--c-deep) calc(var(--win-arc) * .5),
    var(--c-mid) calc(var(--win-arc) * .68), var(--c-hi) var(--win-arc));
}
.rl-arc-shade{                    /* cylinder shading across the tube: dark edges, bright ridge on the outer third */
  position:absolute; inset:0; mix-blend-mode:overlay;
  background:radial-gradient(circle at 50% 50%,
    rgba(0,0,0,.7) 0 27.4cqw, rgba(0,0,0,.32) 28.6cqw, rgba(255,255,255,.04) 30.2cqw,
    rgba(255,255,255,.5) 32.2cqw, rgba(255,255,255,.14) 34cqw, rgba(0,0,0,.62) 35.5cqw);
}
.rl-arc-shade::after{             /* top-left light falling on the tube */
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,0) 42%);
  mix-blend-mode:soft-light;
}

/* ---- exact edges of the win zone: honest boundary lines ---- */
.rl-edge{
  position:absolute; inset:0; pointer-events:none; transition:opacity .25s;
}
.rl-edge::before{
  content:""; position:absolute; left:50%; top:13.4cqw; width:.42cqw; height:10.2cqw; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.35));
  border-radius:1cqw; box-shadow:0 0 1.4cqw var(--c-hi);
}
.rl-edge.a{transform:rotate(var(--win-start))}
.rl-edge.b{transform:rotate(var(--win-end))}
.rl[data-idle="1"] .rl-edge{opacity:0}

/* ---- face: concave dish under glass ---- */
.rl-face{
  position:absolute; inset:24.2cqw; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:
    radial-gradient(circle at 36% 26%, #3a2c55 0%, #241a3b 34%, #150f26 72%, #0e0a1b 100%);
  box-shadow:
    inset 0 1.8cqw 3.6cqw rgba(0,0,0,.9),
    inset 0 -1cqw 2cqw rgba(255,255,255,.07),
    inset 0 0 0 .35cqw rgba(0,0,0,.6),
    0 .5cqw .7cqw rgba(255,255,255,.07),              /* lit lower lip of the well */
    0 -.4cqw .7cqw rgba(0,0,0,.7);
  overflow:hidden;
}
.rl-mark{                         /* embossed brand chevrons */
  position:absolute; left:50%; top:50%; width:25cqw; height:25cqw; transform:translate(-50%,-52%);
  opacity:.9; pointer-events:none;
  filter:drop-shadow(0 .5cqw .5cqw rgba(0,0,0,.65)) drop-shadow(0 -.25cqw .2cqw rgba(255,255,255,.09));
}
.rl-mark path{fill:none; stroke:rgba(150,125,200,.17); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round}
.rl-value{
  position:relative; z-index:1;
  font:800 11.6cqw/1 Inter,Arial,sans-serif; letter-spacing:-.045em; font-variant-numeric:tabular-nums;
  color:var(--c-text);
  text-shadow:0 .4cqw 0 rgba(0,0,0,.55), 0 0 3cqw color-mix(in srgb, var(--c-mid) 70%, transparent);
  transition:color .3s;
}
.rl-value small{font-size:.5em; font-weight:700; margin-left:.12em; letter-spacing:0; opacity:.85}
.rl-label{
  position:relative; z-index:1; margin-top:1.6cqw!important;
  font:600 2.9cqw/1.1 Inter,Arial,sans-serif; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(190,172,225,.72); text-shadow:0 .25cqw 0 rgba(0,0,0,.7);
}
@container (max-width: 210px){ .rl-label{font-size:3.3cqw} }

/* ---- result text replaces the number once the spin ends ---- */
.rl-result{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:0 3cqw;
  font:800 6.4cqw/1.05 Inter,Arial,sans-serif; letter-spacing:.06em; text-transform:uppercase; text-align:center;
  animation:rl-pop .55s cubic-bezier(.2,1.4,.3,1) both;
}
.rl-result[hidden]{display:none}
.rl-result.win{color:#9bf2cb; text-shadow:0 .4cqw 0 rgba(0,0,0,.5), 0 0 3.2cqw rgba(110,240,180,.85)}
.rl-result.lose{color:#ff9aab; font-size:5.8cqw; text-shadow:0 .4cqw 0 rgba(0,0,0,.5), 0 0 3.2cqw rgba(255,100,130,.7)}
@keyframes rl-pop{0%{opacity:0; transform:scale(.6)} 100%{opacity:1; transform:none}}

/* ---- glass dome: reflection that sells the volume; shifts with tilt ---- */
.rl-glass{
  position:absolute; inset:24.2cqw; border-radius:50%; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(120% 70% at calc(50% + var(--gx,0) * 1%) -6%, rgba(255,255,255,.26) 0, rgba(255,255,255,.08) 42%, rgba(255,255,255,0) 58%),
    radial-gradient(60% 40% at 78% 96%, rgba(255,255,255,.07), transparent 70%);
  box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.08), inset 0 .6cqw 1.2cqw rgba(255,255,255,.10);
}

/* ---- needle: faceted blade riding the rim, pointing at the centre ---- */
.rl-needle{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:5;
  transform:translate3d(0,0,0) rotate(180deg); backface-visibility:hidden; will-change:transform;
}
.rl:not(.running) .rl-needle{will-change:auto}
.rl-pointer{
  position:absolute; left:50%; bottom:4.6cqw; width:7.2cqw; height:17cqw; transform:translateX(-50%);
  filter:drop-shadow(0 1cqw .9cqw rgba(0,0,0,.7)) drop-shadow(0 0 1.6cqw color-mix(in srgb, var(--c-mid) 65%, transparent));
}
.rl-pointer i{
  position:absolute; inset:0;
  clip-path:polygon(50% 0%, 100% 64%, 66% 58%, 58% 100%, 42% 100%, 34% 58%, 0% 64%);
  background:
    linear-gradient(90deg, rgba(255,255,255,.95) 0 50%, rgba(0,0,0,0) 50%),   /* lit left facet */
    linear-gradient(90deg, #f4f0ff 0, #bfb2e3 50%, #7f6fae 50%, #54467f 100%);   /* shaded right facet */
}
.rl-pointer::after{                      /* hot tip */
  content:""; position:absolute; left:50%; top:.3cqw; width:1.7cqw; height:4.6cqw; transform:translateX(-50%);
  clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
  background:linear-gradient(180deg, var(--c-hi), var(--c-mid));
}
.rl-trail{                               /* comet tail behind the needle while spinning */
  position:absolute; inset:0; opacity:0; transition:opacity .3s; border-radius:50%;
  background:conic-gradient(from 138deg, transparent 0deg, color-mix(in srgb, var(--c-mid) 55%, transparent) 40deg, transparent 40.4deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 27cqw, #000 27.4cqw 36cqw, transparent 36.4cqw);
          -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 27cqw, #000 27.4cqw 36cqw, transparent 36.4cqw);mask:radial-gradient(circle at 50% 50%, transparent 0 27cqw, #000 27.4cqw 36cqw, transparent 36.4cqw);
}

/* ===== states ===== */
.rl.running .rl-needle{animation:rl-spin var(--spin-duration,8000ms) cubic-bezier(.28,.05,.08,1) forwards}
.rl.running .rl-trail{opacity:1}
.rl.running .rl-arc-wrap{animation:rl-breathe .9s ease-in-out infinite alternate}
.rl.running .rl-bezel{animation:rl-bezel-glow 1.1s ease-in-out infinite alternate}
@keyframes rl-spin{from{transform:translate3d(0,0,0) rotate(var(--roulette-start,180deg))} to{transform:translate3d(0,0,0) rotate(var(--roulette-end,2160deg))}}
@keyframes rl-breathe{from{filter:drop-shadow(0 0 1.8cqw color-mix(in srgb, var(--c-mid) 40%, transparent))} to{filter:drop-shadow(0 0 3.8cqw color-mix(in srgb, var(--c-hi) 85%, transparent))}}
@keyframes rl-bezel-glow{from{box-shadow:0 3.4cqw 6.5cqw rgba(0,0,0,.65),0 .8cqw 1.6cqw rgba(0,0,0,.55),inset 0 .35cqw .5cqw rgba(255,255,255,.28),inset 0 -.4cqw .7cqw rgba(0,0,0,.65),0 0 0 rgba(0,0,0,0)}
                         to  {box-shadow:0 3.4cqw 6.5cqw rgba(0,0,0,.65),0 .8cqw 1.6cqw rgba(0,0,0,.55),inset 0 .35cqw .5cqw rgba(255,255,255,.28),inset 0 -.4cqw .7cqw rgba(0,0,0,.65),0 0 5cqw color-mix(in srgb, var(--c-mid) 45%, transparent)}}

.rl.result-win .rl-bezel{animation:rl-win 1.4s ease-out both}
.rl.result-lose .rl-body{animation:rl-shake .5s cubic-bezier(.36,.07,.19,.97) both}
.rl.result-lose .rl-arc-wrap{opacity:.45; filter:drop-shadow(0 0 0 transparent) saturate(.5)}
@keyframes rl-win{0%{box-shadow:0 3.4cqw 6.5cqw rgba(0,0,0,.65),0 0 0 rgba(110,240,180,0)} 40%{box-shadow:0 3.4cqw 6.5cqw rgba(0,0,0,.65),0 0 7cqw rgba(110,240,180,.85)} 100%{box-shadow:0 3.4cqw 6.5cqw rgba(0,0,0,.65),0 0 3.4cqw rgba(110,240,180,.45)}}
@keyframes rl-shake{10%,90%{transform:translateX(-.5cqw)} 20%,80%{transform:translateX(.9cqw)} 30%,50%,70%{transform:translateX(-1.4cqw)} 40%,60%{transform:translateX(1.4cqw)}}

/* the spin is the game's core feedback (user-triggered, finite) — never let the blanket
   prefers-reduced-motion rule in style.css freeze it (phones with battery saver hit that constantly) */
@media (prefers-reduced-motion: reduce){
  .rl.running .rl-needle{animation:rl-spin var(--spin-duration,8000ms) cubic-bezier(.28,.05,.08,1) forwards!important}
  .rl.running .rl-arc-wrap{animation:rl-breathe .9s ease-in-out infinite alternate!important}
  .rl-body{transition:none!important}
}