.dial{width:320px;height:404px;user-select:none;overflow:hidden;background:var(--dial-bg);border:1px solid var(--line)}.dial .rollzone{position:absolute;inset:0;z-index:1;appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}.dial .rollzone:focus-visible{outline:2px solid var(--em);outline-offset:-4px}.dial .rollzone[aria-disabled=true]{cursor:progress}.dial .breakdown,.dial .numring,.dial .pointer,.dial .wheel,.dial:before{pointer-events:none}.dial:before{content:"";position:absolute;inset:0;opacity:var(--grid-opacity);background:linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0 /100% 28px,linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0 /28px 100%;mask:radial-gradient(circle at 50% 45%,transparent 30%,#000 78%)}.dial .topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;z-index:4}.dial .topbar input{font-size:12px;padding:4px 8px;width:96px}.dial .breakdown,.dial .hint{position:absolute;left:0;right:0;bottom:38px;text-align:center;z-index:2}.dial .hint{display:block}.dial.rolling .ring-a{animation:dial-pulse 1.1s ease-in-out infinite}.dial.rolling .num{opacity:.18}.dial.rolling .pointer{opacity:.5}@keyframes dial-pulse{0%,to{opacity:.45}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.dial.rolling .ring-a{animation:none;opacity:1}}.dial .wheel{position:absolute;left:50%;top:46%;width:0;height:0}.dial .rings{position:absolute;left:-150px;top:-150px;width:300px;height:300px;overflow:visible}.dial .ring-a{stroke:var(--ring-a)}.dial .ring-b{stroke:var(--ring-b)}.dial .die-well{position:absolute;left:-52px;top:-52px;opacity:var(--die-opacity)}.dial .numring{transition:transform var(--spin-ms,1.95s) cubic-bezier(.16,.86,.22,1)}.dial .numral,.dial .numring{position:absolute;left:0;top:0}.dial .numral span{position:absolute;left:-16px;top:-127px;width:32px;text-align:center;font-size:10.5px;color:var(--numeral);transition:color .4s,text-shadow .4s}.dial .numral span.hit{color:var(--em);text-shadow:var(--glow-em)}.hud[data-theme=light] .numral span.hit:before{content:"";position:absolute;inset:-3px 6px -2px;border:1px solid color-mix(in srgb,var(--em) 42%,transparent)}.dial .numral span.hit:after{content:attr(data-x);font-size:7px;color:var(--gold);position:absolute;top:-7px;right:0}.dial .pointer{position:absolute;left:50%;top:calc(46% - 146px);transform:translateX(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--em);filter:var(--glow-pointer)}.dial .readout{position:absolute;left:-110px;top:-38px;width:220px;text-align:center;pointer-events:none;z-index:2}.dial .num{font-size:76px;height:76px;color:var(--fg);opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s cubic-bezier(.2,.9,.3,1.15),color .3s;text-shadow:var(--num-knockout)}.dial.settled .num{opacity:1;transform:translateY(0)}.dial.crit .num{color:var(--gold)}.dial.fumble .num{color:var(--red)}.dial .flag{position:absolute;top:82px;left:0;right:0;font-size:9px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:transparent;transition:color .5s .1s}.dial.settled .flag{color:var(--dim)}.dial.crit .flag{color:var(--gold)}.dial.fumble .flag{color:var(--red)}.dial .breakdown{font-size:10.5px;color:var(--dim);letter-spacing:.08em;opacity:0;transition:opacity .5s .2s}.dial.settled .breakdown{opacity:1}.dial .breakdown .kv{color:var(--em)}.dial .breakdown .mx{color:var(--gold)}.dial .breakdown .mn{color:var(--red)}.dial .breakdown .dropped{opacity:.4;text-decoration:line-through}.dial .bottombar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:11px 14px;z-index:4;gap:10px}.dial .bottombar .brandlink{flex:none}.dial .status{flex:1;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dial .status.bad{color:var(--red)}.dial.failed .num{opacity:1;color:var(--red)}.dial[data-spin-motion=reduced] .numring{transition-timing-function:linear}