.dice-app-card{max-width:680px;margin:0 auto}.app-divider{border:none;border-top:1px solid var(--border-color);margin:var(--spacing-lg) 0}.die-type-4{--die-stroke: #ef476f;--die-fill: rgba(239,71,111,.12);--die-text: #ef476f}.die-type-6{--die-stroke: #4895ef;--die-fill: rgba(72,149,239,.12);--die-text: #4895ef}.die-type-8{--die-stroke: #9b5de5;--die-fill: rgba(155,93,229,.12);--die-text: #9b5de5}.die-type-10{--die-stroke: #00b4d8;--die-fill: rgba(0,180,216,.12);--die-text: #00b4d8}.die-type-12{--die-stroke: #f4a261;--die-fill: rgba(244,162,97,.12);--die-text: #f4a261}.die-type-20{--die-stroke: #06d6a0;--die-fill: rgba(6,214,160,.12);--die-text: #06d6a0}.die-face{stroke:var(--die-stroke);fill:var(--die-fill);stroke-width:2.5;transition:fill .25s}.die-pip{fill:var(--die-text)}.die-value{fill:var(--die-text);font-size:26px;font-weight:800;font-family:Inter,sans-serif}.die-label{fill:var(--die-text);font-size:20px;font-weight:700;font-family:Inter,sans-serif}.die-svg{width:100%;height:100%;display:block;transform-origin:center}.die-selector-section{text-align:center;margin-bottom:var(--spacing-lg)}.selector-hint{font-size:.82rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:var(--spacing-md)}.die-selector{display:flex;gap:var(--spacing-sm);justify-content:center;flex-wrap:wrap}.die-add-btn{padding:.6rem 1.2rem;border:2px solid;border-radius:8px;background:transparent;font-size:1rem;font-weight:700;cursor:pointer;transition:background .15s ease,box-shadow .15s ease,transform .15s ease;letter-spacing:.04em;font-family:inherit}.die-add-btn[data-type="4"]{border-color:#ef476f;color:#ef476f}.die-add-btn[data-type="6"]{border-color:#4895ef;color:#4895ef}.die-add-btn[data-type="8"]{border-color:#9b5de5;color:#9b5de5}.die-add-btn[data-type="10"]{border-color:#00b4d8;color:#00b4d8}.die-add-btn[data-type="12"]{border-color:#f4a261;color:#f4a261}.die-add-btn[data-type="20"]{border-color:#06d6a0;color:#06d6a0}.die-add-btn[data-type="4"]:hover:not(:disabled){background:#ef476f;color:#fff;box-shadow:0 4px 14px #ef476f73;transform:translateY(-2px)}.die-add-btn[data-type="6"]:hover:not(:disabled){background:#4895ef;color:#fff;box-shadow:0 4px 14px #4895ef73;transform:translateY(-2px)}.die-add-btn[data-type="8"]:hover:not(:disabled){background:#9b5de5;color:#fff;box-shadow:0 4px 14px #9b5de573;transform:translateY(-2px)}.die-add-btn[data-type="10"]:hover:not(:disabled){background:#00b4d8;color:#fff;box-shadow:0 4px 14px #00b4d873;transform:translateY(-2px)}.die-add-btn[data-type="12"]:hover:not(:disabled){background:#f4a261;color:#fff;box-shadow:0 4px 14px #f4a26173;transform:translateY(-2px)}.die-add-btn[data-type="20"]:hover:not(:disabled){background:#06d6a0;color:#fff;box-shadow:0 4px 14px #06d6a073;transform:translateY(-2px)}.die-add-btn:disabled{opacity:.35;cursor:not-allowed}.dice-pool-info{margin-top:var(--spacing-sm);font-size:.78rem;color:var(--text-muted)}.dice-tray{min-height:110px;background:#0000000f;border:2px dashed var(--border-color);border-radius:var(--border-radius-lg);padding:var(--spacing-md);display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-items:center;justify-content:center;margin-bottom:var(--spacing-lg);transition:border-color .2s,background .2s}.dice-tray:has(.tray-die){justify-content:flex-start;border-style:solid;border-color:#4361ee33}.tray-empty-state{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-muted);opacity:.45;user-select:none;padding:var(--spacing-md);font-size:.85rem}.tray-die{width:82px;height:82px;position:relative;flex-shrink:0}.tray-die-remove{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:#ef476f;color:#fff;border:none;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,transform .15s;z-index:2;padding:0}.tray-die:hover .tray-die-remove{opacity:1}.tray-die-remove:hover{transform:scale(1.15)}@keyframes diceShake{0%{transform:rotate(0) scale(1)}12%{transform:rotate(-22deg) scale(.85)}26%{transform:rotate(16deg) scale(1.1)}40%{transform:rotate(-12deg) scale(.92)}54%{transform:rotate(8deg) scale(1.05)}68%{transform:rotate(-4deg) scale(.97)}82%{transform:rotate(2deg) scale(1.02)}to{transform:rotate(0) scale(1)}}.tray-die.rolling .die-svg{animation:diceShake .65s ease-in-out var(--roll-delay, 0ms) both}@keyframes resultPop{0%{transform:scale(.65);opacity:.3}60%{transform:scale(1.15);opacity:1}to{transform:scale(1);opacity:1}}.tray-die.rolled .die-svg{animation:resultPop .28s ease-out both}.roll-controls{display:flex;align-items:stretch;gap:var(--spacing-sm);flex-wrap:wrap;margin-bottom:var(--spacing-lg)}.roll-btn{flex:1;padding:.85rem 2rem;font-size:1.2rem;font-weight:800;background:linear-gradient(135deg,#4361ee,#6a3de8);color:#fff;border:none;border-radius:var(--border-radius);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;letter-spacing:.04em;min-width:130px;font-family:inherit;box-shadow:0 4px 16px #4361ee61;display:inline-flex;align-items:center;justify-content:center;gap:.45rem}.roll-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px #4361ee94;background:linear-gradient(135deg,#5570f8,#7b52f0)}.roll-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #4361ee4d}.roll-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.clear-btn{padding:.85rem 1.4rem;font-size:.95rem;font-weight:600;background:transparent;color:var(--text-muted);border:2px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:border-color .15s,color .15s,background .15s;font-family:inherit}.clear-btn:hover:not(:disabled){border-color:#ef476f;color:#ef476f;background:#ef476f12}.clear-btn:disabled{opacity:.35;cursor:not-allowed}.sort-btn{padding:.85rem 1.2rem;font-size:.9rem;font-weight:600;background:transparent;color:var(--text-muted);border:2px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;transition:border-color .15s,color .15s;display:inline-flex;align-items:center;gap:.35rem;font-family:inherit}.sort-btn:hover{border-color:var(--primary);color:var(--primary)}.results-panel{display:flex;justify-content:center;margin-top:var(--spacing-sm)}@keyframes totalReveal{0%{transform:scale(.8) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.results-total{display:flex;flex-direction:column;align-items:center;padding:1.25rem 3.5rem;background:linear-gradient(135deg,#4361ee12,#6a3de812);border:1px solid rgba(67,97,238,.22);border-radius:var(--border-radius-lg);min-width:180px;animation:totalReveal .3s ease-out both}.total-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:.15rem}.total-value{font-size:3.8rem;font-weight:900;color:var(--primary);line-height:1;letter-spacing:-.02em}dialog{border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-lg);box-shadow:var(--box-shadow-lg);max-width:440px;width:92%;background-color:var(--card-bg);color:var(--text-color)}dialog::backdrop{background-color:#00000080}dialog h3{margin-top:0}.dialog-buttons{margin-top:var(--spacing-lg);display:flex;justify-content:flex-end;gap:var(--spacing-sm)}[data-theme=dark] .dice-tray{background:#ffffff08}[data-theme=dark] .dice-tray:has(.tray-die){border-color:#4361ee4d}[data-theme=dark] .results-total{background:linear-gradient(135deg,#4361ee21,#6a3de821);border-color:#4361ee61}@media (max-width: 600px){.die-selector{gap:6px}.die-add-btn{padding:.5rem .85rem;font-size:.88rem}.tray-die{width:68px;height:68px}.total-value{font-size:3rem}.roll-btn{font-size:1.05rem;padding:.8rem 1.4rem}}@media (max-width: 380px){.tray-die{width:58px;height:58px}.die-add-btn{padding:.45rem .7rem;font-size:.82rem}}