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