#ub-coin-toss,#ub-coin-toss *{box-sizing:border-box}
#ub-coin-toss{--pink:#ff83b7;--purple:#9a86ff;--cyan:#76dbe8;--text:#31313d;--sub:#78788a;max-width:760px;margin:18px auto;color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans",Meiryo,sans-serif;isolation:isolate}
#ub-coin-toss button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#ub-coin-toss button:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
#ub-coin-toss .shell{position:relative;background:#fff;border:1px solid #e0dbe8;border-radius:24px;padding:20px clamp(12px,3vw,24px) 22px;overflow:hidden;box-shadow:0 16px 42px #4d417d18}
#ub-coin-toss .shell:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pink),var(--purple),var(--cyan))}
#ub-coin-toss .heading{text-align:center;color:var(--sub);font-size:12px;font-weight:750;letter-spacing:.10em;margin:0 0 17px}
#ub-coin-toss .settings{display:grid;gap:7px;width:min(100%,420px);margin:0 auto 18px}
#ub-coin-toss .setting-label{text-align:center;color:var(--sub);font-size:12px;font-weight:700}
#ub-coin-toss .choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
#ub-coin-toss .choices button{min-width:0;min-height:42px;padding:6px 2px;border:1px solid #e0dbe8;border-radius:11px;background:#fff;color:var(--sub);font-size:13px;font-weight:650}
#ub-coin-toss .choices button[aria-pressed=true]{border-color:#9a86ff77;background:linear-gradient(135deg,#ff83b740,#9a86ff33 52%,#76dbe83d);color:var(--text)}
#ub-coin-toss .reference{display:flex;justify-content:center;align-items:center;gap:clamp(20px,5vw,45px);margin:0 auto 16px;padding:12px 10px;border:1px solid #eee9f2;border-radius:15px;background:#fdfcff;max-width:420px}
#ub-coin-toss .ref-item{display:flex;align-items:center;gap:9px;color:var(--sub);font-size:12px;font-weight:750}
#ub-coin-toss .ref-img-wrap{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--pink),var(--purple) 52%,var(--cyan)) border-box;box-shadow:0 2px 4px #4d417d1a;overflow:hidden}
#ub-coin-toss .ref-img{width:75%;height:75%;display:block;object-fit:contain}
#ub-coin-toss .stage{position:relative;display:grid;place-items:center;min-width:0;min-height:240px;padding:22px 13px;overflow:hidden;border:1px solid #e9e5ee;border-radius:18px;background:linear-gradient(#fffffff0,#fffffff0),repeating-linear-gradient(0deg,transparent 0,transparent 39px,#7869b40b 40px)}
#ub-coin-toss .stage:after{content:"";position:absolute;bottom:10%;left:10%;width:80%;height:1px;background:linear-gradient(90deg,transparent,#ff83b770,#9a86ff70,#76dbe870,transparent)}
#ub-coin-toss .stage.active{background:linear-gradient(135deg,#ff83b711,#9a86ff0e,#76dbe811),white}
#ub-coin-toss .coins{position:relative;z-index:1;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%,550px);min-width:0;min-height:170px;perspective:750px;perspective-origin:center 50%}
#ub-coin-toss .coin-slot{--depth:clamp(3px,1.0vw,10px);width:100%;max-width:125px;min-width:0;aspect-ratio:1;position:relative;display:grid;place-items:center;transform-style:preserve-3d}
#ub-coin-toss .coin-shadow{position:absolute;width:75%;height:13%;bottom:-9%;border-radius:50%;background:#6252792b;filter:blur(7px);z-index:0}
#ub-coin-toss .coin-motion{position:relative;width:100%;height:100%;transform-origin:50% 75%;transform-style:preserve-3d;z-index:1;will-change:transform}
#ub-coin-toss .coin-rotator{width:100%;height:100%;position:relative;transform-style:preserve-3d;will-change:transform;transform:rotateY(0deg)}
#ub-coin-toss .coin-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:3.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--pink),var(--purple) 52%,var(--cyan)) border-box;box-shadow:inset 0 0 0 1px #f8f5ff,0 1px 2px #58477d30;transform:translateZ(calc(var(--depth) + 0.35px));display:grid;place-items:center}
/* WordPress themes may add margins to images; center coin artwork independent of theme styles. */
#ub-coin-toss .coin-face img{position:absolute!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;display:block!important;width:75%!important;height:75%!important;max-width:75%!important;max-height:75%!important;min-width:0!important;min-height:0!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important}
#ub-coin-toss .ref-img{display:block!important;margin:0!important;padding:0!important;max-width:75%!important;max-height:75%!important;object-fit:contain!important;object-position:center center!important}
#ub-coin-toss .coin-face.reverse{transform:rotateY(180deg) translateZ(calc(var(--depth) + 0.35px))}
#ub-coin-toss .rim{position:absolute;inset:.7%;border-radius:50%;border:1.3px solid #b6a6ce;background:linear-gradient(115deg,#e6d6ef 2%,#bcaddb 44%,#d7cee8 68%,#94bad3 100%);box-shadow:inset 0 0 2px #ffffff4d;transform:translateZ(calc(var(--depth) * var(--layer)));pointer-events:none;backface-visibility:visible}
#ub-coin-toss .coin-slot[data-result="裏"] .coin-rotator{transform:rotateY(180deg)}
#ub-coin-toss .actions{display:flex;flex-direction:column;align-items:center;gap:17px;margin-top:18px}
#ub-coin-toss .toss{min-width:158px;min-height:46px;padding:8px 20px;border:1px solid #9a86ff77;border-radius:999px;background:white;font-size:14px;font-weight:700;letter-spacing:.07em}
#ub-coin-toss .toss:hover:not(:disabled){background:linear-gradient(135deg,#ff83b721,#9a86ff1c,#76dbe824)}
#ub-coin-toss .toss:disabled{opacity:.5;cursor:default}
#ub-coin-toss .sound-row{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:11px;font-weight:700}
#ub-coin-toss .sound{position:relative;width:40px;height:22px;border:1px solid #b8aed8;background:white;border-radius:999px;padding:0}
#ub-coin-toss .sound:before{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;border:1px solid #b8aed8;background:white;transition:transform .15s}
#ub-coin-toss .sound[aria-pressed=true]{background:linear-gradient(135deg,#ff83b733,#76dbe833)}
#ub-coin-toss .sound[aria-pressed=true]:before{transform:translateX(18px)}
#ub-coin-toss .sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
@media(max-width:420px){#ub-coin-toss .shell{padding:15px 10px 18px;border-radius:18px}#ub-coin-toss .choices{gap:6px}#ub-coin-toss .choices button{min-height:40px;font-size:12px}#ub-coin-toss .stage{min-height:180px;padding:14px 10px}#ub-coin-toss .coins{min-height:112px;gap:4px}#ub-coin-toss .reference{padding:9px 6px}#ub-coin-toss .ref-img-wrap{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){#ub-coin-toss .coin-motion,#ub-coin-toss .coin-rotator{will-change:auto}}
