.dice-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}.dice-count-control{position:absolute;left:50%;top:16px;display:grid;grid-template-columns:repeat(3,minmax(58px,1fr));gap:4px;width:min(260px,calc(100vw - 128px));transform:translateX(-50%);border-radius:999px;background:rgba(255,255,255,.08);padding:4px;backdrop-filter:blur(16px)}.dice-count-control button{height:36px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.58);font-size:14px;font-weight:600;cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s ease}.dice-count-control button:hover:not(:disabled){color:#fff;background:rgba(255,255,255,.08)}.dice-count-control button.is-active{background:#20c26a;color:#000}.dice-count-control button:disabled{cursor:default;opacity:.7}.dice-stage{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:nowrap}.dice-stage.count-1 .dice-unit{width:200px;height:200px}.dice-stage.count-2{gap:60px}.dice-stage.count-2 .dice-unit,.dice-stage.count-3 .dice-unit{width:120px;height:120px}.dice-stage.count-3{width:min(100vw,420px);flex-wrap:wrap;gap:60px}.dice-stage.count-3 .dice-unit:first-child{display:flex;flex-basis:100%;justify-content:center}.dice-unit{position:relative;flex-shrink:0;perspective:1200px}.dice-unit.is-hidden{display:none}.dice-stage.count-3 .dice-unit:first-child .dice-platform{width:120px;height:120px}.dice-platform{width:100%;height:100%;transform-style:preserve-3d}.dice-platform.rolling{animation:dice-roll 1.4s ease-out forwards}.dice-platform.settling{transition:transform .6s cubic-bezier(.2,0,.2,1)}.dice-cube{position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d}.dice-cube.rolling.size-large{animation:dice-spin-100 1.4s ease-out forwards}.dice-cube.rolling.size-small{animation:dice-spin-60 1.4s ease-out forwards}.dice-cube.settling{transition:transform .6s cubic-bezier(.2,0,.2,1)}.dice-side{position:absolute;width:100%;height:100%;border-radius:20%;background:linear-gradient(145deg,#fff,#f5f5f5);box-shadow:inset 0 0 40px rgba(0,0,0,.1),0 18px 40px rgba(0,0,0,.32)}.dice-side.inner{background:#f0f0f0;box-shadow:none}.dice-cover{border-radius:0;background:#e8e8e8;box-shadow:none;transform:translateZ(0)}.dice-cover.x{transform:rotateY(90deg)}.dice-cover.z{transform:rotateX(90deg)}.dot{position:absolute;width:20%;height:20%;border-radius:50%;background:radial-gradient(circle at 30% 30%,#e53935 0,#c62828 50%,#b71c1c 100%);box-shadow:inset 0 -2px 4px rgba(0,0,0,.4)}.dot.center{margin:40% 0 0 40%}.dot.dtop{margin-top:12%}.dot.dleft{margin-left:67%}.dot.dright{margin-left:12%}.dot.dbottom{margin-top:67%}.dot.center.dleft{margin:40% 0 0 12%}.dot.center.dright{margin:40% 0 0 67%}.hint-text{left:0;right:0;color:rgba(255,255,255,.42);font-size:16px;text-align:center}.dice-result,.hint-text{position:absolute;bottom:80px;pointer-events:none}.dice-result{left:50%;transform:translateX(-50%);border-radius:999px;background:rgba(255,255,255,.18);padding:8px 16px;color:rgba(255,255,255,.95);font-size:20px;font-weight:700}@keyframes dice-spin-100{0%{transform:translateZ(-100px) rotateX(0deg) rotateY(0deg) rotate(0deg)}20%{transform:translateZ(-100px) rotateX(135deg) rotateY(135deg) rotate(0deg)}40%{transform:translateZ(-100px) rotateX(270deg) rotateY(70deg) rotate(135deg)}60%{transform:translateZ(-100px) rotateX(405deg) rotateY(270deg) rotate(270deg)}80%{transform:translateZ(-100px) rotateX(135deg) rotateY(405deg) rotate(200deg)}to{transform:translateZ(-100px) rotateX(270deg) rotateY(270deg) rotate(270deg)}}@keyframes dice-spin-60{0%{transform:translateZ(-60px) rotateX(0deg) rotateY(0deg) rotate(0deg)}20%{transform:translateZ(-60px) rotateX(135deg) rotateY(135deg) rotate(0deg)}40%{transform:translateZ(-60px) rotateX(270deg) rotateY(70deg) rotate(135deg)}60%{transform:translateZ(-60px) rotateX(405deg) rotateY(270deg) rotate(270deg)}80%{transform:translateZ(-60px) rotateX(135deg) rotateY(405deg) rotate(200deg)}to{transform:translateZ(-60px) rotateX(270deg) rotateY(270deg) rotate(270deg)}}@keyframes dice-roll{0%{transform:translate3d(-37%,-7%,-75%)}12.5%{transform:translateZ(-22%)}25%{transform:translate3d(37%,-7%,-75%)}37.5%{transform:translate3d(0,-15%,-112%)}50%{transform:translate3d(-37%,-7%,-75%)}62.5%{transform:translateZ(-22%)}75%{transform:translate3d(37%,-7%,-75%)}87.5%{transform:translate3d(-22%,-4%,-37%)}95%{transform:translate3d(10%,-2%,-17%)}to{transform:translateZ(0)}}