#ub-dice-v6,#ub-dice-v6 *{box-sizing:border-box}
#ub-dice-v6{--dice-text:#31313d;--dice-sub:#78788a;--dice-line:rgba(104,92,164,.22);--dice-pink:#ff83b7;--dice-purple:#9a86ff;--dice-cyan:#76dbe8;width:min(100%,760px);margin:clamp(10px,2.5vh,24px) auto;color:var(--dice-text);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-dice-v6 button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#ub-dice-v6 button:focus-visible{outline:2px solid rgba(90,82,170,.68);outline-offset:3px}
#ub-dice-v6 .shell{position:relative;overflow:hidden;padding:20px clamp(12px,3vw,24px) 22px;border:1px solid var(--dice-line);border-radius:24px;background:#fff;box-shadow:0 16px 42px rgba(77,65,125,.10)}
#ub-dice-v6 .shell::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--dice-pink),var(--dice-purple),var(--dice-cyan));opacity:.75;pointer-events:none}
#ub-dice-v6 .heading{margin:0 0 17px;color:var(--dice-sub);font-size:12px;letter-spacing:.10em;font-weight:700;text-align:center}
#ub-dice-v6 .settings{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;width:min(100%,420px);margin:0 auto 18px}
#ub-dice-v6 .setting-row{display:flex;flex-direction:column;gap:7px;min-width:0}
#ub-dice-v6 .setting-label{display:block;margin:0;color:var(--dice-sub);font-size:12px;font-weight:700;line-height:1.4;text-align:center}
#ub-dice-v6 .segments{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:8px;min-width:0;width:100%;padding:0;border:0;border-radius:0;background:transparent}
#ub-dice-v6 .segments button{min-width:0;min-height:42px;padding:7px 3px;border:1px solid var(--dice-line);border-radius:11px;background:#fff;color:var(--dice-sub);font-size:13px;font-weight:650;transition:background .17s ease,border-color .17s ease,transform .13s ease}
#ub-dice-v6 .segments button[aria-pressed="true"]{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(--dice-text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.56)}
#ub-dice-v6 .segments button:not([aria-pressed="true"]):hover{background:#fff;border-color:rgba(154,134,255,.40)}
#ub-dice-v6 .segments button:active{transform:scale(.96)}
#ub-dice-v6 .stage{position:relative;display:grid;place-items:center;min-width:0;min-height:236px;padding:20px clamp(8px,2vw,24px);overflow:hidden;border:1px solid rgba(104,92,164,.16);border-radius:18px;background:linear-gradient(rgba(255,255,255,.87),rgba(255,255,255,.87)),repeating-linear-gradient(0deg,transparent 0,transparent 39px,rgba(120,105,180,.045) 40px)}
#ub-dice-v6 .stage::after{content:"";position:absolute;inset:auto 10% 9%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,131,183,.45),rgba(154,134,255,.40),rgba(118,219,232,.45),transparent);pointer-events:none}
#ub-dice-v6 .dice{display:grid;grid-template-columns:repeat(var(--count),minmax(0,1fr));align-items:center;justify-items:center;gap:clamp(3px,1vw,12px);width:min(100%,540px);min-width:0;min-height:145px}
#ub-dice-v6 .die{position:relative;display:grid;place-items:center;width:100%;max-width:122px;min-width:0;aspect-ratio:1;transform-origin:50% 80%;filter:drop-shadow(0 5px 4px rgba(77,65,125,.16));will-change:transform}
#ub-dice-v6 .die::before{content:"";position:absolute;z-index:-1;bottom:-5%;left:9%;width:82%;height:15%;border-radius:50%;background:rgba(77,65,125,.13);filter:blur(6px);pointer-events:none}
#ub-dice-v6 .die svg{display:block;width:100%;height:100%;overflow:visible;shape-rendering:geometricPrecision}
#ub-dice-v6 .die .face-value{font-family:system-ui,-apple-system,sans-serif;font-weight:750;font-size:34px;fill:#373444;dominant-baseline:central;text-anchor:middle;font-variant-numeric:tabular-nums}
#ub-dice-v6 .die[data-faces="12"] .face-value{font-size:29px}
#ub-dice-v6 .die.is-rolling{animation:diceV5Jelly 1.1s both}
#ub-dice-v6 .die.is-rolling:nth-child(2),#ub-dice-v6 .die.is-rolling:nth-child(4){animation-name:diceV5JellyAlt}
#ub-dice-v6 .die.is-rolling::before{animation:diceV5Shadow 1.1s ease-out both}
#ub-dice-v6 .stage.is-rolling{background:linear-gradient(135deg,rgba(255,131,183,.07),rgba(154,134,255,.055) 55%,rgba(118,219,232,.075)),#fff}
@keyframes diceV5Jelly{0%{transform:translate(0,0) rotate(0deg) scale(1,1)}9%{transform:translate(-3%,-18%) rotate(-6deg) scale(.95,1.06)}18%{transform:translate(4%,3%) rotate(4deg) scale(1.12,.88)}30%{transform:translate(-3%,-20%) rotate(-4deg) scale(.96,1.07)}44%{transform:translate(2%,2%) rotate(2deg) scale(1.08,.92)}59%{transform:translate(-1%,-10%) rotate(-1.7deg) scale(.98,1.03)}74%{transform:translate(1%,1%) rotate(1deg) scale(1.04,.96)}88%{transform:translate(0,-3%) rotate(-.4deg) scale(.995,1.01)}100%{transform:translate(0,0) rotate(0deg) scale(1,1)}}
@keyframes diceV5JellyAlt{0%{transform:translate(0,0) rotate(0deg) scale(1,1)}9%{transform:translate(3%,-17%) rotate(5deg) scale(.95,1.06)}18%{transform:translate(-4%,3%) rotate(-4deg) scale(1.11,.89)}30%{transform:translate(3%,-19%) rotate(3.5deg) scale(.96,1.07)}44%{transform:translate(-2%,2%) rotate(-2deg) scale(1.08,.92)}59%{transform:translate(1%,-10%) rotate(1.5deg) scale(.98,1.03)}74%{transform:translate(-1%,1%) rotate(-1deg) scale(1.04,.96)}88%{transform:translate(0,-3%) rotate(.4deg) scale(.995,1.01)}100%{transform:translate(0,0) rotate(0deg) scale(1,1)}}
@keyframes diceV5Shadow{0%,100%{opacity:.75;transform:scale(1)}9%,30%{opacity:.33;transform:scale(1.22)}18%,44%,74%{opacity:.82;transform:scale(.92)}59%,88%{opacity:.52;transform:scale(1.1)}}
#ub-dice-v6 .actions{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:18px}
#ub-dice-v6 .roll-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(--dice-text);font-size:14px;font-weight:650;letter-spacing:.08em;transition:transform .08s ease,border-color .15s ease,background .15s ease}
#ub-dice-v6 .roll-btn:not(:disabled):hover{border-color:rgba(255,131,183,.68);background:linear-gradient(135deg,rgba(255,131,183,.13),rgba(154,134,255,.10),rgba(118,219,232,.14))}
#ub-dice-v6 .roll-btn:not(:disabled):active{transform:scale(.98)}
#ub-dice-v6 .roll-btn:disabled{opacity:.48;cursor:default}
#ub-dice-v6 .sound-row{display:flex;align-items:center;justify-content:center;gap:11px}
#ub-dice-v6 .sound-label{color:var(--dice-sub);font-size:11px;font-weight:700;letter-spacing:.05em}
#ub-dice-v6 .sound-toggle{position:relative;width:38px;height:20px;padding:0;border:1px solid rgba(104,92,164,.28);border-radius:999px;background:transparent;transition:transform .08s ease,border-color .15s ease,background .15s ease}
#ub-dice-v6 .sound-toggle[aria-pressed="true"]{border-color:rgba(154,134,255,.62);background:linear-gradient(135deg,rgba(255,131,183,.10),rgba(118,219,232,.12))}
#ub-dice-v6 .sound-knob{position:absolute;top:3px;left:3px;width:12px;height:12px;border:1px solid rgba(104,92,164,.28);border-radius:50%;background:rgba(255,255,255,.92);transition:transform .16s ease,border-color .15s ease}
#ub-dice-v6 .sound-toggle[aria-pressed="true"] .sound-knob{transform:translateX(18px);border-color:rgba(154,134,255,.62)}
#ub-dice-v6 .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
@media(max-width:420px){#ub-dice-v6 .shell{padding:15px 10px 18px;border-radius:18px}#ub-dice-v6 .settings{gap:12px;margin-bottom:15px}#ub-dice-v6 .segments button{min-height:40px;font-size:12px}#ub-dice-v6 .stage{min-height:184px;padding:12px 7px}#ub-dice-v6 .dice{min-height:110px;gap:4px}#ub-dice-v6 .actions{margin-top:15px;gap:16px}}
@media(prefers-reduced-motion:reduce){#ub-dice-v6 .die.is-rolling,#ub-dice-v6 .die.is-rolling:nth-child(2),#ub-dice-v6 .die.is-rolling:nth-child(4){animation:diceV5Gentle 1.1s ease-in-out both}#ub-dice-v6 .die.is-rolling::before{animation:none}#ub-dice-v6 .sound-knob{transition:none}@keyframes diceV5Gentle{0%,100%{transform:scale(1)}50%{transform:scale(.97)}}}