*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #061428;--accent: #ffd43b;--accent-rgb: 255, 212, 59;--text: #fff;--die-size: clamp(72px, 16vw, 140px);--die-half: calc(var(--die-size) / 2);--btn-fs: clamp(12px, 1.8vw, 16px);--btn-pad-v: clamp(10px, 1.4vh, 14px);--btn-pad-h: clamp(20px, 3vw, 48px);--btn-radius: 8px;--actions-bar-h: clamp(54px, 9vh, 80px);--info-slot-h: clamp(60px, 10vh, 100px);--die-gap: clamp(12px, 1.8vw, 36px);--dot-size: calc(var(--die-size) * .145);--dot-inner: calc(var(--die-size) * .222);--dot-center: calc(var(--die-size) * .427);--dot-outer: calc(var(--die-size) * .632);--die-corner: 0px;--die-body-color: #e4ddcf;--die-face-color: #f4eee3;--die-border-color: #fdf8ee;--die-pip-color: #141311}html,body{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:Barlow Condensed,sans-serif;height:100dvh}.app{position:relative;z-index:2;width:100%;height:100dvh;display:flex;flex-direction:column;opacity:0;transition:opacity .15s ease}.app.ready{opacity:1}.stage{flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;overflow:hidden}.des-layout{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:0;overflow:hidden;gap:0;padding:clamp(8px,1.5vh,18px) clamp(10px,2vw,24px)}#desDisplayZone{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;align-items:center;gap:var(--die-gap);width:100%;overflow:visible;flex-shrink:0}.des-actions{height:var(--actions-bar-h);flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.5vw,18px);margin-top:var(--info-slot-h);padding:0 clamp(12px,2vw,32px);width:100%}.die-wrapper{flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;width:calc(var(--die-size) * 1.24);height:calc(var(--die-size) * 1.24)}.die-scene{width:var(--die-size);height:var(--die-size);perspective:calc(var(--die-size) * 6)}.die-cube{width:var(--die-size);height:var(--die-size);position:relative;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.22,.68,.2,1);will-change:transform}.die-body{position:absolute;width:var(--die-size);height:var(--die-size);top:0;left:0;background:linear-gradient(155deg,#efe8da 0%,var(--die-body-color) 60%,#d9d1c2 100%);backface-visibility:visible;-webkit-backface-visibility:visible}.die-body.front{transform:translateZ(var(--die-half))}.die-body.back{transform:rotateX(180deg) translateZ(var(--die-half))}.die-body.right{transform:rotateY(90deg) translateZ(var(--die-half))}.die-body.left{transform:rotateY(-90deg) translateZ(var(--die-half))}.die-body.top{transform:rotateX(90deg) translateZ(var(--die-half))}.die-body.bottom{transform:rotateX(-90deg) translateZ(var(--die-half))}.die-face{position:absolute;width:var(--die-size);height:var(--die-size);top:0;left:0;background-color:var(--die-face-color);border:2px solid var(--die-border-color);border-radius:0;transform-style:preserve-3d;box-shadow:inset 0 1px #ffffff8c,inset 0 -7px 12px #0000001f;backface-visibility:visible;-webkit-backface-visibility:visible;-webkit-user-select:none;user-select:none}.dot{display:block;position:absolute;width:var(--dot-size);height:var(--dot-size);background:var(--die-pip-color);border-radius:50%}.front .dot1{top:var(--dot-center);left:var(--dot-center)}.back .dot1{top:var(--dot-inner);left:var(--dot-inner)}.back .dot2{top:var(--dot-outer);left:var(--dot-outer)}.right .dot1{top:var(--dot-inner);left:var(--dot-inner)}.right .dot2{top:var(--dot-center);left:var(--dot-center)}.right .dot3{top:var(--dot-outer);left:var(--dot-outer)}.left .dot1{top:var(--dot-inner);left:var(--dot-inner)}.left .dot2{top:var(--dot-inner);left:var(--dot-outer)}.left .dot3{top:var(--dot-outer);left:var(--dot-inner)}.left .dot4{top:var(--dot-outer);left:var(--dot-outer)}.top .dot1{top:var(--dot-inner);left:var(--dot-inner)}.top .dot2{top:var(--dot-inner);left:var(--dot-outer)}.top .dot3{top:var(--dot-center);left:var(--dot-center)}.top .dot4{top:var(--dot-outer);left:var(--dot-inner)}.top .dot5{top:var(--dot-outer);left:var(--dot-outer)}.bottom .dot1{top:var(--dot-inner);left:var(--dot-inner)}.bottom .dot2{top:var(--dot-inner);left:var(--dot-center)}.bottom .dot3{top:var(--dot-inner);left:var(--dot-outer)}.bottom .dot4{top:var(--dot-outer);left:var(--dot-inner)}.bottom .dot5{top:var(--dot-outer);left:var(--dot-center)}.bottom .dot6{top:var(--dot-outer);left:var(--dot-outer)}.die-face.front{transform:translateZ(calc(var(--die-half) + .5px))}.die-face.back{transform:rotateX(180deg) translateZ(calc(var(--die-half) + .5px))}.die-face.right{transform:rotateY(90deg) translateZ(calc(var(--die-half) + .5px))}.die-face.left{transform:rotateY(-90deg) translateZ(calc(var(--die-half) + .5px))}.die-face.top{transform:rotateX(90deg) translateZ(calc(var(--die-half) + .5px))}.die-face.bottom{transform:rotateX(-90deg) translateZ(calc(var(--die-half) + .5px))}.die-cube.show-1{transform:rotateX(0) rotateY(0)}.die-cube.show-2{transform:rotateX(0) rotateY(180deg)}.die-cube.show-3{transform:rotateX(0) rotateY(-90deg)}.die-cube.show-4{transform:rotateX(0) rotateY(90deg)}.die-cube.show-5{transform:rotateX(-90deg) rotateY(0)}.die-cube.show-6{transform:rotateX(90deg) rotateY(0)}.des-roll-btn{font-family:Barlow Condensed,sans-serif;font-size:var(--btn-fs);font-weight:700;letter-spacing:.25em;text-transform:uppercase;padding:var(--btn-pad-v) var(--btn-pad-h);border-radius:var(--btn-radius);cursor:pointer;border:1px solid rgba(255,255,255,.12);transition:all .15s;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.des-roll-btn{background:var(--accent);color:#000;border-color:transparent;box-shadow:0 4px 20px #ffd43b33}.des-roll-btn:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 6px 28px #ffd43b59}.des-roll-btn:active:not(:disabled){transform:scale(.97)}.des-roll-btn:disabled{opacity:.38;cursor:not-allowed}.co-count-row{display:flex;align-items:center;background:#0d1b2e;border:1px solid rgba(255,255,255,.08);border-radius:11px;overflow:hidden}.co-count-btn{width:40px;height:40px;border:none;background:transparent;color:#ffffff61;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .13s;-webkit-user-select:none;user-select:none;flex-shrink:0}.co-count-btn:first-child{border-right:1px solid rgba(255,255,255,.06)}.co-count-btn:last-child{border-left:1px solid rgba(255,255,255,.06)}.co-count-btn:hover{color:var(--accent);background:#ffd43b0d}.co-count-btn:active{transform:scale(.9)}.co-count-input{flex:1;min-width:0;font-family:Barlow Condensed,sans-serif;font-size:clamp(22px,3vw,28px);font-weight:600;text-align:center;color:#eaf0fa;line-height:1;background:transparent;border:none;padding:0;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:textfield}.co-count-input::-webkit-outer-spin-button,.co-count-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}@media(min-width:1920px){.do-count-input{font-size:52px}.do-count-btn{width:52px;height:52px;font-size:26px}}@media(max-height:500px){:root{--actions-bar-h: 48px;--info-slot-h: 28px}.des-layout{padding:4px 8px}}@media(hover:none)and (pointer:coarse){.des-roll-btn{min-height:48px}.do-count-btn{min-width:48px;min-height:48px}.do-close{min-width:44px;min-height:44px}.des-roll-btn:active:not(:disabled){transform:scale(.95);filter:brightness(.95)}}@media(prefers-reduced-motion:reduce){.die-cube{transition:none!important}.des-options-modal{animation:none!important}}@keyframes doFadeIn{0%{opacity:0}to{opacity:1}}@keyframes doPop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}