#ub-roulette-v7,#ub-roulette-v7 *{box-sizing:border-box}
#ub-roulette-v7{--ink:#31313d;--muted:#78788a;--line:rgba(104,92,164,.22);--pink:#ff83b7;--purple:#9a86ff;--cyan:#76dbe8;--accent-grad:linear-gradient(135deg,#ff83b7 0%,#9a86ff 52%,#76dbe8 100%);width:min(100%,760px);margin:clamp(10px,2.5vh,24px) auto;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%;isolation:isolate}
#ub-roulette-v7 button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#ub-roulette-v7 button:focus-visible{outline:2px solid #8874d1;outline-offset:3px}
#ub-roulette-v7 .shell{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 16px 42px rgba(77,65,125,.10);padding:21px clamp(12px,3vw,24px) 23px}
#ub-roulette-v7 .shell::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--pink),var(--purple),var(--cyan));opacity:.78;pointer-events:none}
#ub-roulette-v7 .heading{margin:0 0 19px;text-align:center;font-size:12px;letter-spacing:.10em;font-weight:750;color:var(--muted)}
#ub-roulette-v7 .settings{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;width:min(100%,420px);margin:0 auto 22px}
#ub-roulette-v7 .setting-row{display:flex;flex-direction:column;min-width:0;gap:7px}
#ub-roulette-v7 .setting-label{font-size:12px;color:var(--muted);font-weight:700;text-align:center;line-height:1.4}
#ub-roulette-v7 .segments{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:8px;width:100%;min-width:0}
#ub-roulette-v7 .segments button{min-width:0;min-height:42px;padding:7px 3px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:13px;font-weight:650;color:var(--muted);transition:background .14s ease,border-color .14s ease,transform .1s ease}
#ub-roulette-v7 .segments button[aria-pressed="true"]{border-color:rgba(154,134,255,.55);background:linear-gradient(135deg,rgba(255,131,183,.25),rgba(154,134,255,.20) 52%,rgba(118,219,232,.24));color:#333333}
#ub-roulette-v7 .segments button:not([aria-pressed="true"]):hover{border-color:rgba(154,134,255,.50);background:#fff}
#ub-roulette-v7 .segments button:active{transform:scale(.97)}
#ub-roulette-v7 .stage{position:relative;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(104,92,164,.16);border-radius:18px;min-height:302px;padding:22px clamp(9px,2vw,22px);background:linear-gradient(rgba(255,255,255,.89),rgba(255,255,255,.89)),repeating-linear-gradient(0deg,transparent 0,transparent 39px,rgba(120,105,180,.045) 40px)}
#ub-roulette-v7 .stage::after{content:"";position:absolute;bottom:4%;left:9%;width:82%;height:1px;background:linear-gradient(90deg,transparent,#ff83b767,#9a86ff66,#76dbe864,transparent);pointer-events:none}
#ub-roulette-v7 .wheels{display:grid;grid-template-columns:repeat(var(--count),minmax(0,1fr));justify-items:center;align-items:center;gap:clamp(3px,.9vw,13px);width:min(100%,560px);min-width:0}
#ub-roulette-v7 .wheel-unit{display:flex;align-items:center;flex-direction:column;gap:10px;min-width:0;width:100%}
#ub-roulette-v7 .wheel-holder{width:100%;max-width:215px;aspect-ratio:1;position:relative;display:grid;place-items:center;filter:drop-shadow(0 7px 8px rgba(77,65,125,.13))}
#ub-roulette-v7 .wheel{width:100%;height:100%;display:block;transform:rotate(0deg);transform-origin:50% 50%;will-change:transform;overflow:visible}
#ub-roulette-v7 .wheel-frame{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;pointer-events:none;overflow:visible}
#ub-roulette-v7 .wheel-label{height:28px;min-width:32px;display:grid;place-items:center;padding:2px 10px;border:1px solid #ded8e8;border-radius:999px;background:white;font-size:14px;font-weight:750;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.15}
#ub-roulette-v7 .wheel-unit.settled .wheel-label{border-color:#a48efb80;color:var(--ink);background:#fff}
#ub-roulette-v7 .stage.spinning .wheel-label{opacity:.45}
#ub-roulette-v7 .actions{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:18px}
#ub-roulette-v7 .start-btn{min-width:clamp(108px,28vw,160px);min-height:46px;padding:9px 20px;border:1px solid rgba(104,92,164,.34);border-radius:999px;background:rgba(255,255,255,.76);color:var(--muted);font-size:14px;font-weight:650;letter-spacing:.08em;transition:transform .08s ease,border-color .15s ease,background .15s ease}
#ub-roulette-v7 .start-btn:is(:hover,:focus-visible):not(:disabled){border-color:rgba(154,134,255,.42);background:linear-gradient(135deg,rgba(255,131,183,.25),rgba(154,134,255,.20) 52%,rgba(118,219,232,.24));color:var(--muted)}
#ub-roulette-v7 .start-btn:active:not(:disabled){transform:scale(.98);background:linear-gradient(135deg,rgba(255,131,183,.32),rgba(154,134,255,.27) 52%,rgba(118,219,232,.31));color:var(--muted)}
#ub-roulette-v7 .start-btn:disabled{opacity:.48;cursor:default}
#ub-roulette-v7 .sound-row{display:flex;align-items:center;justify-content:center;gap:11px}
#ub-roulette-v7 .sound-label{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--muted)}
#ub-roulette-v7 .sound-toggle{position:relative;width:38px;height:20px;padding:0;border:1px solid rgba(104,92,164,.35);border-radius:999px;background:#fff}
#ub-roulette-v7 .sound-toggle[aria-pressed="true"]{border-color:#9a86ff9b;background:linear-gradient(135deg,#ff83b72c,#76dbe832)}
#ub-roulette-v7 .sound-knob{position:absolute;top:3px;left:3px;width:12px;height:12px;border:1px solid rgba(104,92,164,.35);border-radius:50%;background:white;transition:transform .16s ease}
#ub-roulette-v7 .sound-toggle[aria-pressed="true"] .sound-knob{transform:translateX(18px)}
#ub-roulette-v7 .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:420px){#ub-roulette-v7 .shell{padding:16px 10px 19px;border-radius:18px}#ub-roulette-v7 .settings{gap:12px;margin-bottom:17px}#ub-roulette-v7 .segments{gap:6px}#ub-roulette-v7 .segments button{min-height:40px;font-size:12px}#ub-roulette-v7 .stage{min-height:244px;padding:20px 7px}#ub-roulette-v7 .wheel-unit{gap:9px}#ub-roulette-v7 .wheel-label{height:25px;min-width:26px;padding:2px 5px;font-size:12px}#ub-roulette-v7 .wheels{gap:4px}#ub-roulette-v7 .actions{margin-top:16px;gap:16px}}
@media(prefers-reduced-motion:reduce){#ub-roulette-v7 button,#ub-roulette-v7 .sound-knob{transition:none}}

#ub-roulette-v7 .wheel-unit.settled .wheel-label{transition:background .15s ease}