:root{font-family:system-ui,sans-serif;color:#f5f7fb;background:#20242d;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;background:#20242d}button{font:inherit}main{display:flex;flex-direction:column;width:min(100% - 32px,760px);height:100dvh;margin:auto;padding:clamp(12px,3vh,32px) 0}header{flex:none;margin-bottom:clamp(10px,2vh,18px);text-align:center}h1{margin:0;font-size:clamp(2rem,7vh,3.5rem);line-height:1.05}h2{margin:0;font-size:1rem}.results,.controls{background:#2b303c;border:1px solid #ffffff12}.results{position:relative;display:flex;flex:1 1 0;flex-direction:column;min-height:0;padding:clamp(14px,2.5vh,22px) 24px;border-radius:24px 24px 0 0}.results-heading{display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px}.total{display:flex;align-items:baseline;gap:10px;color:#c8cdd7}.total output{color:#fff;font-size:clamp(2rem,6vh,2.5rem);font-weight:700}#dice-pool{flex:1 1 0;min-height:0;margin:8px 0 0;padding:0;overflow:hidden;gap:clamp(8px,2vh,22px);list-style:none}#dice-pool.individual{display:grid;grid-template-columns:repeat(var(--columns, 1),var(--die-size, 104px));grid-auto-rows:var(--die-size, 104px);place-content:center}.die{--die: #ff6534;display:grid;place-items:center;width:var(--die-size);height:var(--die-size);background:var(--die);filter:drop-shadow(0 7px 0 color-mix(in srgb,var(--die),#000 32%));clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%)}.die strong{font-size:clamp(1.5rem,5vh,2.5rem)}.die.d4{--die: #14863f;clip-path:polygon(50% 4%,96% 92%,4% 92%)}.die.d6{--die: #087f91;clip-path:none}.die.d8{--die: #8037df;clip-path:polygon(50% 0,95% 50%,50% 100%,5% 50%)}.die.d10{--die: #c51e78;clip-path:polygon(50% 0,96% 42%,82% 87%,50% 100%,18% 87%,4% 42%)}.die.d12{--die: #d32920}.die.d20{--die: #c94f00}.rolling{animation:roll .28s ease-out}#dice-pool.grouped{display:flex;flex-direction:column;justify-content:center;gap:clamp(3px,.8vh,7px)}.dice-group{display:grid;grid-template-columns:minmax(68px,auto) 1fr auto;align-items:center;gap:8px;padding:clamp(4px,.8vh,8px) 10px;border-radius:10px;background:#222733}.dice-group>strong,.dice-group>b{white-space:nowrap}.dice-group>b{color:#c8cdd7}.distribution{display:flex;flex-wrap:wrap;gap:3px 8px}.distribution span{min-width:31px;font-size:clamp(.72rem,1.7vh,.85rem);white-space:nowrap}.rolling-group{animation:group-roll .2s ease-out}#empty-state{position:absolute;top:54px;right:16px;bottom:0;left:16px;display:grid;place-items:center;margin:0;color:#aeb5c2;text-align:center}[hidden]{display:none!important}.controls{flex:none;padding:clamp(12px,2vh,18px) 24px clamp(14px,2.5vh,22px);border-top:0;border-radius:0 0 24px 24px}.controls-heading,.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.text-button,.close-button{border:0;background:transparent;color:#aac6ff;cursor:pointer}.text-button{padding:4px;font-weight:700}#dice-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:10px}.die-button{position:relative;--die: #ff6534;min-width:0;height:clamp(44px,7vh,54px);border:0;border-radius:12px;background:var(--die);color:#fff;cursor:pointer;transition:transform .15s,filter .15s}.die-count{position:absolute;top:-7px;right:-5px;min-width:22px;padding:2px 5px;border:2px solid #2b303c;border-radius:100px;background:#f5f7fb;color:#20242d;font-size:.7rem;font-weight:700}.die-button:hover{filter:brightness(1.12);transform:translateY(-2px)}.die-button:active{transform:translateY(1px)}.die-button strong{font-size:1.25rem}.die-button.d4{--die: #14863f}.die-button.d6{--die: #087f91}.die-button.d8{--die: #8037df}.die-button.d10{--die: #c51e78}.die-button.d12{--die: #d32920}.die-button.d20{--die: #c94f00}.actions{display:flex;justify-content:center;gap:12px;margin-top:clamp(10px,2vh,16px)}.actions button{min-width:130px;padding:11px 28px;border:0;border-radius:100px;background:#3a404d;color:#fff;font-weight:700;cursor:pointer}.actions .primary{background:#9fc1ff;color:#15213b}.actions button:disabled{opacity:.42;cursor:not-allowed}dialog{width:min(100% - 32px,440px);padding:0;border:1px solid #ffffff20;border-radius:20px;background:#2b303c;color:#f5f7fb;box-shadow:0 24px 80px #000a}dialog::backdrop{background:#0b0d12c7}#bulk-form{display:grid;gap:12px;padding:22px}.close-button{width:36px;height:36px;color:#f5f7fb;font-size:1.8rem}#bulk-form label{margin-top:4px;font-weight:700}#bulk-input{width:100%;padding:12px 14px;border:1px solid #ffffff30;border-radius:10px;background:#20242d;color:#fff;font:inherit}.hint,.error{margin:-4px 0 0;font-size:.85rem}.hint{color:#aeb5c2}.error{color:#ffaaa3}.dialog-submit{justify-self:end;padding:11px 20px;border:0;border-radius:100px;font-weight:700}.dialog-submit.primary{background:#9fc1ff;color:#15213b}@keyframes roll{0%{transform:scale(.82) rotate(-8deg)}65%{transform:scale(1.06) rotate(3deg)}to{transform:none}}@keyframes group-roll{0%{transform:scale(.98);opacity:.65}to{transform:none;opacity:1}}@media(max-width:560px){main{width:100%;padding:0}header{margin:0;padding:clamp(10px,2.5vh,24px) 16px clamp(8px,2vh,18px)}.results,.controls{padding-right:16px;padding-left:16px;border-radius:0}#dice-buttons{gap:6px}.actions button{min-width:112px}#dice-pool.grouped{gap:3px}.dice-group{grid-template-columns:56px 1fr 44px;gap:4px;padding:2px 5px}.dice-group>strong,.dice-group>b{font-size:.7rem}.distribution{gap:0 4px}.distribution span{min-width:25px;font-size:.64rem;line-height:1.2}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}