.rr-wheel{--w: 620px;position:relative;flex:none;width:var(--w);height:var(--w);border-radius:50%;box-shadow:0 40px 80px #0009}.rr-wheel.lobby{box-shadow:0 30px 60px #0000008c}.rr-wheel .rot{position:absolute;inset:0;border-radius:50%;will-change:transform}.rr-wheel.idle .rot{animation:spin 60s linear infinite}.rr-wheel .tread{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#17171a 0 2.5deg,#25252a 2.5deg 5deg)}.rr-wheel .segs{position:absolute;inset:8%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 calc(var(--w) * .012) #cfd0d6}.rr-wheel .lbl{position:absolute;left:50%;top:50%;white-space:nowrap;font:800 calc(var(--w) * .045)/1 var(--display);text-transform:uppercase;letter-spacing:.5px;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--w) * -.42 * .8));transition:opacity .3s}.rr-wheel .hl{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .35s;pointer-events:none;background:conic-gradient(rgba(0,0,0,.4) 0 var(--s, 0deg),rgba(255,255,255,.22) var(--s, 0deg) var(--e, 45deg),rgba(0,0,0,.4) var(--e, 45deg) 360deg)}.rr-wheel.landed .hl{opacity:1}.rr-wheel.landed .lbl:not(.on){opacity:.45}.rr-wheel .hub{position:absolute;left:50%;top:50%;width:calc(var(--w) * .46);height:calc(var(--w) * .46);margin:calc(var(--w) * -.23) 0 0 calc(var(--w) * -.23);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#e9e9ee 0 11%,#6d6d75 12% 14%,transparent 15%),repeating-conic-gradient(#cfd0d6 0deg 15deg,#0e0e10 15deg 72deg);box-shadow:inset 0 0 0 calc(var(--w) * .032) #0009,0 0 0 calc(var(--w) * .006) #6d6d75}.rr-wheel .hub span{font:800 calc(var(--w) * .034)/1 var(--display);color:var(--ink);letter-spacing:.5px}.rr-wheel .pointer{position:absolute;left:50%;top:calc(var(--w) * -.035);width:calc(var(--w) * .085);height:calc(var(--w) * .11);margin-left:calc(var(--w) * -.0425);filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));z-index:2}.rr-wheel .pointer i{transform-origin:50% 0;display:block;width:100%;height:100%;background:var(--yellow);clip-path:polygon(0 0,100% 0,50% 100%)}.rr-disc{--d: 580px;--pw: calc(var(--d) * .655);--ph: calc(var(--d) * .259);position:relative;flex:none;width:var(--d);height:var(--d);border-radius:50%;background:var(--cream);border:calc(var(--d) * .017) dotted var(--ink);box-shadow:0 0 0 calc(var(--d) * .024) var(--cream),0 50px 100px #0000008c;display:grid;place-items:center;color:var(--ink)}.rr-disc.lobby{box-shadow:0 0 0 calc(var(--d) * .027) var(--cream),0 40px 80px #0000008c}.rr-disc .face{width:88%;height:88%;border-radius:50%;border:max(3px,calc(var(--d) * .0086)) solid var(--blue);background:repeating-radial-gradient(circle,var(--cream) 0 7px,rgba(30,79,168,.12) 7px 8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--d) * .016);text-align:center}.rr-disc .brand{font:800 calc(var(--d) * .062)/.9 var(--display);text-transform:uppercase}.rr-disc .kind{font:800 calc(var(--d) * .024)/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:calc(var(--d) * .012)}.rr-disc .panel-s{position:relative;width:var(--pw);height:var(--ph);border-radius:calc(var(--d) * .024);background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px #0e0e101f,0 2px #0e0e1026;display:grid;place-items:center;touch-action:none}.rr-disc .outcome{display:flex;align-items:center;justify-content:center}.rr-disc .outcome .plate{letter-spacing:1.5px}.rr-disc .foil{position:absolute;inset:0;width:100%;height:100%;transition:opacity .4s}.rr-disc .foil.gone{opacity:0;pointer-events:none}.rr-disc canvas.foil{cursor:grab;touch-action:none}.rr-disc .foil-css{display:grid;place-items:center;background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(255,255,255,.25) 16px 18px),linear-gradient(135deg,#a9aab0,#e6e7ec 40%,#9c9da3 60%,#d3d4d9)}.rr-disc .foil-css span{font:800 calc(var(--d) * .03)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#55565c}.rr-disc .valid{margin-top:calc(var(--d) * .012);font:800 calc(var(--d) * .026)/1 var(--body);letter-spacing:.1em;text-transform:uppercase}.rr-disc .serial{min-height:1em;font:700 calc(var(--d) * .022)/1 var(--body);letter-spacing:.08em;color:var(--paper-ink-2)}@media(max-width:1023px){.rr-disc{box-shadow:0 0 0 calc(var(--d) * .026) var(--cream),0 30px 60px #00000080}.rr-disc .face{background:repeating-radial-gradient(circle,var(--cream) 0 5px,rgba(30,79,168,.12) 5px 6px)}}
