*,::after,::before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#061428;--accent:#ffd43b;--accent-rgb:255,212,59;--text:#fff;--die-size:clamp(100px, 22vw, 180px);--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) * 0.145);--dot-inner:calc(var(--die-size) * 0.222);--dot-center:calc(var(--die-size) * 0.427);--dot-outer:calc(var(--die-size) * 0.632);--die-corner:0px;--die-body-color:#e4ddcf;--die-face-color:#f4eee3;--die-border-color:#fdf8ee;--die-pip-color:#141311}body,html{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}.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 0 rgba(255,255,255,.55),inset 0 -7px 12px rgba(0,0,0,.12);backface-visibility:visible;-webkit-backface-visibility:visible;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 rgba(255,212,59,.2)}.des-roll-btn:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 6px 28px rgba(255,212,59,.35)}.des-roll-btn:active:not(:disabled){transform:scale(.97)}.des-roll-btn:disabled{opacity:.38;cursor:not-allowed}.des-options-overlay{display:none;position:fixed;inset:0;z-index:450;background:rgba(2,2,8,.88);align-items:center;justify-content:center;backdrop-filter:blur(20px)}.des-options-overlay.visible{display:flex;animation:doFadeIn .18s ease}.des-options-modal{background:#0a0a14;border:1px solid rgba(255,255,255,.08);border-radius:clamp(12px,2vw,16px);width:clamp(300px,90vw,360px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03);animation:doPop .3s cubic-bezier(.34,1.4,.64,1);max-height:92dvh;overflow-y:auto}.do-header{display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,2vh,16px) clamp(14px,2vw,18px);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;background:#0a0a14;z-index:1}.do-title{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.45em;text-transform:uppercase;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:8px}.do-close{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:50%;color:rgba(255,255,255,.35);width:44px;height:44px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;touch-action:manipulation}.do-close:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}.do-section{padding:clamp(14px,2vh,18px) clamp(14px,2vw,18px);border-bottom:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:14px}.do-section-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.45em;text-transform:uppercase;color:rgba(255,255,255,.2)}.do-count-row{display:flex;align-items:center;justify-content:center;gap:16px}.do-count-btn{width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .13s;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.do-count-btn:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.2)}.do-count-btn:active{transform:scale(.92)}.do-count-input{font-family:'Bebas Neue',sans-serif;font-size:42px;width:72px;text-align:center;background:0 0;border:none;color:var(--accent);outline:0;pointer-events:none}.do-info-row{display:flex;align-items:center;justify-content:space-between;padding:12px clamp(14px,2vw,18px);border-bottom:1px solid rgba(255,255,255,.05)}.do-info-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.15)}.do-info-value{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:.1em;color:rgba(255,255,255,.25)}.do-footer{display:flex;gap:10px;padding:clamp(12px,1.8vh,14px) clamp(14px,2vw,18px)}.do-btn-done{flex:1;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:12px 10px;border-radius:8px;cursor:pointer;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.do-btn-done:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.9)}.do-btn-done:active{transform:scale(.97)}@media (min-width:1920px){.des-options-modal{width:clamp(360px,22vw,480px)}.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{from{opacity:0}to{opacity:1}}@keyframes doPop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.footer-inner{margin:0 auto;padding:10px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:#0d1f3c;border-top:1px solid rgba(255,255,255,.07)}.footer-brand{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:.06em;color:var(--muted,rgba(255,255,255,.55))}.footer-brand em{color:var(--accent);font-style:normal}.footer-copy{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted,rgba(255,255,255,.55))}footer{margin-top:auto;width:100%}