.ws{display:grid;justify-items:center;gap:var(--sp-3);text-align:center}
.wheel{position:relative;width:min(100%,28rem,max(15rem,100svh - 20.5rem));aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wheel svg{position:absolute;inset:0;width:100%;height:100%}
.ptr{pointer-events:none;fill:var(--text-1);stroke:var(--bg-1);stroke-width:2;stroke-linejoin:round}
.ws-res{height:3.5rem;width:100%;display:grid;place-items:center}
.ws-res span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-size:var(--fs-2xl);font-weight:600;line-height:1.1}
.ws-res .is-long{font-size:var(--fs-xl)}
.ws-res .is-longer{font-size:var(--fs-lg)}
.ws-res :not([data-state=won]){font:500 var(--fs-lg)/1.3 var(--font);color:var(--text-3)}
.spin-btn{width:min(100%,20rem)}
.ws-row,.opt,.ws-list li{display:flex;gap:var(--sp-2);align-items:center}
.ws-row input,.opt>input{flex:1}
.opt .select{flex:none;width:4.5rem}
.ws-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-1)}
.ws-list .icon-btn{color:var(--text-2)}
.is-win>input{border-color:var(--accent);background:var(--accent-soft)}
.is-out>input{text-decoration:line-through;color:var(--text-3)}
.ws-dim{color:var(--text-3);font-size:var(--fs-sm);font-weight:400}
.ws-h{font-size:var(--fs-md)}
.ws-load{flex:1;min-width:0;justify-content:space-between}
.ws-load span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-hist{display:grid;grid-template-columns:100%;gap:var(--sp-4)}
.ws-hist>.btn{justify-self:start}
@media (width<48em){.app[data-layout=stage]{padding-top:var(--sp-2)}}
@media (width>=48em){
.wheel{width:min(100%,28rem,max(16rem,100svh - 24rem))}
.ws-res span{font-size:var(--fs-3xl)}
.ws-res .is-long{font-size:var(--fs-2xl)}
}
@media (width>=64em){
.app[data-layout=stage]{grid-template-rows:auto auto 1fr}
.app>.touch{grid-area:1/2/-1}
.app>.rail{grid-area:2/1}
.app>.extras{grid-area:3/1}
}