:root{--dice-size: 120px;--dice-color: #f59e0b;--bg-color: #1e293b;--text-color: #f8fafc}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,system-ui,sans-serif;background:var(--bg-color);color:var(--text-color);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}main{text-align:center;max-width:500px;width:100%}h1{font-size:2.5rem;margin-bottom:.5rem}h1 span{background:linear-gradient(135deg,#f59e0b,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:#94a3b8;font-size:1.1rem;margin-bottom:2rem}.dice-container{width:200px;height:200px;margin:2rem auto;perspective:600px}.d20{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1s ease-out}.face{position:absolute;width:0;height:0;border-left:55px solid transparent;border-right:55px solid transparent;border-bottom:95px solid;transform-origin:center;left:50%;top:50%;margin-left:-55px;margin-top:-47px}.face span{position:absolute;top:30px;left:-15px;width:30px;text-align:center;font-weight:700;font-size:1.1rem;color:#1e293b;text-shadow:0 1px 1px rgba(255,255,255,.3)}.face-1{border-bottom-color:#f59e0b;transform:rotateY(0) rotateX(37.38deg) translateZ(70px)}.face-2{border-bottom-color:#f5a623;transform:rotateY(72deg) rotateX(37.38deg) translateZ(70px)}.face-3{border-bottom-color:#f5af3d;transform:rotateY(144deg) rotateX(37.38deg) translateZ(70px)}.face-4{border-bottom-color:#f5b957;transform:rotateY(216deg) rotateX(37.38deg) translateZ(70px)}.face-5{border-bottom-color:#f5c270;transform:rotateY(288deg) rotateX(37.38deg) translateZ(70px)}.face-6{border-bottom-color:#e8940a;transform:rotateY(36deg) rotateX(79.19deg) translateZ(70px)}.face-7{border-bottom-color:#db8a09;transform:rotateY(108deg) rotateX(79.19deg) translateZ(70px)}.face-8{border-bottom-color:#ce8108;transform:rotateY(180deg) rotateX(79.19deg) translateZ(70px)}.face-9{border-bottom-color:#c17707;transform:rotateY(252deg) rotateX(79.19deg) translateZ(70px)}.face-10{border-bottom-color:#b46e06;transform:rotateY(324deg) rotateX(79.19deg) translateZ(70px)}.face-11{border-bottom-color:#fbbf24;transform:rotateY(0) rotateX(-37.38deg) rotate(180deg) translateZ(70px)}.face-12{border-bottom-color:#fbc63e;transform:rotateY(72deg) rotateX(-37.38deg) rotate(180deg) translateZ(70px)}.face-13{border-bottom-color:#fbcd58;transform:rotateY(144deg) rotateX(-37.38deg) rotate(180deg) translateZ(70px)}.face-14{border-bottom-color:#fbd472;transform:rotateY(216deg) rotateX(-37.38deg) rotate(180deg) translateZ(70px)}.face-15{border-bottom-color:#fbdb8c;transform:rotateY(288deg) rotateX(-37.38deg) rotate(180deg) translateZ(70px)}.face-16{border-bottom-color:#d97706;transform:rotateY(36deg) rotateX(-79.19deg) rotate(180deg) translateZ(70px)}.face-17{border-bottom-color:#cc7005;transform:rotateY(108deg) rotateX(-79.19deg) rotate(180deg) translateZ(70px)}.face-18{border-bottom-color:#bf6904;transform:rotateY(180deg) rotateX(-79.19deg) rotate(180deg) translateZ(70px)}.face-19{border-bottom-color:#b26203;transform:rotateY(252deg) rotateX(-79.19deg) rotate(180deg) translateZ(70px)}.face-20{border-bottom-color:#a55b02;transform:rotateY(324deg) rotateX(-79.19deg) rotate(180deg) translateZ(70px)}.show-1{transform:rotateX(-37.38deg) rotateY(0)}.show-2{transform:rotateX(-37.38deg) rotateY(-72deg)}.show-3{transform:rotateX(-37.38deg) rotateY(-144deg)}.show-4{transform:rotateX(-37.38deg) rotateY(-216deg)}.show-5{transform:rotateX(-37.38deg) rotateY(-288deg)}.show-6{transform:rotateX(-79.19deg) rotateY(-36deg)}.show-7{transform:rotateX(-79.19deg) rotateY(-108deg)}.show-8{transform:rotateX(-79.19deg) rotateY(-180deg)}.show-9{transform:rotateX(-79.19deg) rotateY(-252deg)}.show-10{transform:rotateX(-79.19deg) rotateY(-324deg)}.show-11{transform:rotateX(37.38deg) rotateY(0) rotate(180deg)}.show-12{transform:rotateX(37.38deg) rotateY(-72deg) rotate(180deg)}.show-13{transform:rotateX(37.38deg) rotateY(-144deg) rotate(180deg)}.show-14{transform:rotateX(37.38deg) rotateY(-216deg) rotate(180deg)}.show-15{transform:rotateX(37.38deg) rotateY(-288deg) rotate(180deg)}.show-16{transform:rotateX(79.19deg) rotateY(-36deg) rotate(180deg)}.show-17{transform:rotateX(79.19deg) rotateY(-108deg) rotate(180deg)}.show-18{transform:rotateX(79.19deg) rotateY(-180deg) rotate(180deg)}.show-19{transform:rotateX(79.19deg) rotateY(-252deg) rotate(180deg)}.show-20{transform:rotateX(79.19deg) rotateY(-324deg) rotate(180deg)}.rolling{animation:roll 2s ease-in-out}@keyframes roll{0%{transform:rotateX(0) rotateY(0) rotate(0)}20%{transform:rotateX(360deg) rotateY(180deg) rotate(90deg)}40%{transform:rotateX(720deg) rotateY(360deg) rotate(180deg)}60%{transform:rotateX(1080deg) rotateY(540deg) rotate(270deg)}80%{transform:rotateX(1440deg) rotateY(720deg) rotate(360deg)}to{transform:rotateX(1800deg) rotateY(900deg) rotate(450deg)}}button{padding:1rem 2.5rem;font-size:1.25rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#8b5cf6,#ec4899);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 20px #8b5cf666}button:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 8px 25px #8b5cf680}button:active:not(.disabled){transform:translateY(0)}button.disabled{opacity:.6;cursor:not-allowed;transform:none}.result-message{margin-top:2rem;padding:1.5rem;background:#f59e0b1a;border-radius:12px;animation:fadeSlide .5s ease}.result-message p{font-size:1.5rem;color:#f59e0b}@keyframes shake{0%,to{transform:rotate(0) translate(0)}10%{transform:rotate(-5deg) translate(-5px,-5px)}20%{transform:rotate(5deg) translate(5px,-5px)}30%{transform:rotate(-3deg) translate(-3px,5px)}40%{transform:rotate(3deg) translate(3px,5px)}50%{transform:rotate(-5deg) translate(-5px,5px)}60%{transform:rotate(5deg) translate(5px,-5px)}70%{transform:rotate(-3deg) translate(-3px,-5px)}80%{transform:rotate(3deg) translate(3px,-5px)}90%{transform:rotate(-1deg) translate(-1px)}}@keyframes pop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes fadeSlide{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.shake{animation:shake .5s ease-in-out}