.dice-container{flex-direction:column;align-items:center;gap:3rem;width:100%;padding:2rem 1rem;display:flex}.dice-controls{align-items:center;gap:1rem;font-size:1rem;font-weight:500;display:flex}.dice-count-buttons{gap:.5rem;display:flex}.count-btn{border:2px solid hsl(var(--border));background:hsl(var(--background));width:2.5rem;height:2.5rem;color:hsl(var(--foreground));cursor:pointer;border-radius:.5rem;font-weight:600;transition:all .2s}.count-btn:hover:not(:disabled){border-color:hsl(var(--primary));background:hsl(var(--primary)/.1);transform:translateY(-2px)}.count-btn.active{border-color:hsl(var(--primary));background:hsl(var(--primary));color:hsl(var(--primary-foreground))}.count-btn:disabled{opacity:.5;cursor:not-allowed}.dice-list{flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem;width:100%;max-width:800px;min-height:200px;padding:2rem;display:flex}.dice-outer{perspective:1000px;justify-content:center;align-items:center;display:flex}.dice-wrap{justify-content:center;align-items:center;width:100px;height:100px;display:flex}.dice{width:80px;height:80px;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.34,1.56,.64,1);position:relative;transform:rotateX(-20deg)rotateY(-20deg)}.dice.rolling{animation:1.2s cubic-bezier(.4,0,.2,1) diceRolling}@keyframes diceRolling{0%{transform:rotateX(0)rotateY(0)}25%{transform:rotateX(180deg)rotateY(180deg)}50%{transform:rotateX(360deg)rotateY(360deg)}75%{transform:rotateX(540deg)rotateY(540deg)}to{transform:rotateX(720deg)rotateY(720deg)}}.dice-face{background:linear-gradient(145deg,#fff,#f0f0f0);border-radius:18px;justify-content:center;align-items:center;width:80px;height:80px;display:flex;position:absolute;box-shadow:inset 2px 2px 5px #fffc,inset -2px -2px 5px #0000001a,0 4px 10px #0000004d}.dice-face.front{transform:rotateY(0)translateZ(40px)}.dice-face.back{transform:rotateY(180deg)translateZ(40px)}.dice-face.right{transform:rotateY(90deg)translateZ(40px)}.dice-face.left{transform:rotateY(-90deg)translateZ(40px)}.dice-face.up{transform:rotateX(90deg)translateZ(40px)}.dice-face.bottom{transform:rotateX(-90deg)translateZ(40px)}.dots{place-content:center;place-items:center;gap:8px;width:100%;height:100%;padding:10px;display:grid}.dots-1{grid-template-areas:"a";place-content:center;place-items:center}.dots-2{grid-template-areas:"a."".b";place-content:center;place-items:center}.dots-3{grid-template-areas:"a. ."".b."". .c";place-content:center;place-items:center}.dots-4{grid-template-areas:"a.b"". . .""c.d";place-content:center;place-items:center}.dots-5{grid-template-areas:"a.b"".c.""d.e";place-content:center;place-items:center}.dots-6{grid-template-areas:"a.b""c.d""e.f";place-content:center;place-items:center}.dots-1 .dot:first-child,.dots-2 .dot:first-child{grid-area:a}.dots-2 .dot:nth-child(2){grid-area:b}.dots-3 .dot:first-child{grid-area:a}.dots-3 .dot:nth-child(2){grid-area:b}.dots-3 .dot:nth-child(3){grid-area:c}.dots-4 .dot:first-child{grid-area:a}.dots-4 .dot:nth-child(2){grid-area:b}.dots-4 .dot:nth-child(3){grid-area:c}.dots-4 .dot:nth-child(4){grid-area:d}.dots-5 .dot:first-child{grid-area:a}.dots-5 .dot:nth-child(2){grid-area:b}.dots-5 .dot:nth-child(3){grid-area:c}.dots-5 .dot:nth-child(4){grid-area:d}.dots-5 .dot:nth-child(5){grid-area:e}.dots-6 .dot:first-child{grid-area:a}.dots-6 .dot:nth-child(2){grid-area:b}.dots-6 .dot:nth-child(3){grid-area:c}.dots-6 .dot:nth-child(4){grid-area:d}.dots-6 .dot:nth-child(5){grid-area:e}.dots-6 .dot:nth-child(6){grid-area:f}.dot{background:#333;border-radius:50%;width:12px;height:12px;box-shadow:inset 1px 1px 2px #0000004d,0 1px 2px #0003}.dots-1 .dot{background:#ff3b30;width:18px;height:18px;box-shadow:inset 1px 1px 2px #0000004d,0 1px 2px #ff3b304d}.dots-4 .dot{background:#ff3b30;box-shadow:inset 1px 1px 2px #0000004d,0 1px 2px #ff3b304d}.dice-actions{flex-direction:column;align-items:center;gap:2rem;display:flex}.roll-button{min-width:200px;padding:1.5rem 3rem;font-size:1.125rem;font-weight:700}.dice-results{background:hsl(var(--card));border:2px solid hsl(var(--border));border-radius:1rem;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem 2rem;display:flex;box-shadow:0 4px 12px #0000001a}.results-label{color:hsl(var(--muted-foreground));font-size:.875rem;font-weight:500}.results-values{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.result-value{width:4rem;height:4rem;color:hsl(var(--primary));background:hsl(var(--primary)/.1);border:2px solid hsl(var(--primary));border-radius:.75rem;justify-content:center;align-items:center;font-size:2rem;font-weight:700;animation:.3s cubic-bezier(.34,1.56,.64,1) popIn;display:flex}@keyframes popIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.results-sum{color:hsl(var(--foreground));border-top:1px solid hsl(var(--border));text-align:center;min-width:200px;padding-top:.5rem;font-size:1.25rem;font-weight:600}@media (max-width:640px){.dice-list{gap:1rem;padding:1.5rem}.dice-wrap{width:80px;height:80px}.dice,.dice-face{width:60px;height:60px}.dice-face.front,.dice-face.back,.dice-face.right,.dice-face.left,.dice-face.up,.dice-face.bottom{transform:rotateY(0)translateZ(30px)}.dice-face.back{transform:rotateY(180deg)translateZ(30px)}.dice-face.right{transform:rotateY(90deg)translateZ(30px)}.dice-face.left{transform:rotateY(-90deg)translateZ(30px)}.dice-face.up{transform:rotateX(90deg)translateZ(30px)}.dice-face.bottom{transform:rotateX(-90deg)translateZ(30px)}.dot{width:8px;height:8px}.result-value{width:3rem;height:3rem;font-size:1.5rem}.roll-button{padding:1rem 2rem;font-size:1rem}}
