:root{--primary:#2c3e50;--accent:#e74c3c;--accent-hover:#c0392b;--secondary:#3498db;--success:#27ae60;--success-hover:#219e50;--gray:#95a5a6;--light-gray:#ecf0f1;--text:#2c3e50;--bg-gradient:linear-gradient(135deg, #74ebd5, #9face6);--container-bg:white;--shadow:0 10px 25px rgba(0, 0, 0, 0.25);--border-radius:18px;--transition:all 0.3s ease}body.dark-mode{--primary:#ecf0f1;--text:#ecf0f1;--success:#27ae60;--container-bg:#1E123C;--shadow:0 10px 25px rgba(0, 0, 0, 0.4);--bg-gradient:linear-gradient(135deg, #16213e, #0f3460)}.dice-container{max-width:100%;margin:auto;background:var(--container-bg);border-radius:0;padding:50px 30px;overflow:hidden;position:relative;transition:background 0.5s}.theme-toggle{position:absolute;top:5px;right:35px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--primary);cursor:pointer;z-index:10;background:rgb(255 255 255 / .1);backdrop-filter:blur(5px);padding:8px 12px;border-radius:20px;border:1px solid rgb(255 255 255 / .2);box-shadow:0 2px 10px rgb(0 0 0 / .1)}body.dark-mode .theme-toggle{background:rgb(0 0 0 / .3);border-color:rgb(255 255 255 / .1)}.theme-toggle .sun{opacity:1}.theme-toggle .moon{opacity:.25}body.dark-mode .theme-toggle .sun{opacity:.25}body.dark-mode .theme-toggle .moon{opacity:1}.dice-instructions-wrapper{text-align:center;margin:0 auto 40px;padding:0 15px}.dice-title{font-weight:600;color:var(--text)}.text-primary-red{color:#e74c3ce6}.dice-texte{font-size:16px;line-height:1.7;color:var(--text)}body.dark-mode .dice-title,body.dark-mode .dice-texte{color:#fff;margin:0}.tool-wrapper{width:100%;max-width:82rem;margin-left:auto;margin-right:auto;display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:2rem;align-items:start;padding-bottom:30px}@media (min-width:1024px){.tool-wrapper{grid-template-columns:repeat(12,minmax(0,1fr))}}.controls{color:var(--text);border-radius:1rem;box-shadow:0 20px 25px -5px rgb(0 0 0 / .1),0 10px 10px -5px rgb(0 0 0 / .04);padding:1.5rem;border:1px solid #e5e7eb;padding:10px}@media (min-width:1024px){.controls{grid-column:span 5 / span 5}}body.dark-mode .controls{border-color:rgb(255 255 255 / .1)}.input-group-wrapper{display:grid;gap:20px;margin-bottom:20px}.input-group{display:flex;flex-direction:column;gap:8px;align-items:center}.input-group label{font-size:15px;font-weight:600;color:var(--primary)}.input-group input,.input-group select{padding:10px!important;width:50%!important;border:2px solid #bdc3c7;border-radius:12px;text-align:center;font-size:30px!important;font-weight:700;color:var(--primary);background:#fff;transition:all 0.3s;box-shadow:0 3px 8px rgb(0 0 0 / .05);height:70px!important}body.dark-mode .input-group input,body.dark-mode .input-group select{background:#2c2c3e;border-color:#555;color:#fff;border-radius:10px}.input-group input:focus,.input-group select:focus{outline:none;border-color:var(--accent);transform:translateY(-2px);box-shadow:0 5px 15px rgb(231 76 60 / .2)}.input-group-setup{margin:20px auto;text-align:center}.roll-button{padding:18px 60px;border:none;border-radius:12px;font-size:17px;font-weight:700;cursor:pointer;background:var(--success);color:#fff;box-shadow:0 8px 20px rgb(0 0 0 / .15);transition:all 0.3s ease}.roll-button:hover:not(:disabled){opacity:.9;transform:translateY(-2px)}.roll-button:disabled{opacity:.6;cursor:not-allowed}.steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}.step{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:14px;box-shadow:0 3px 10px rgb(0 0 0 / .06);transition:all 0.3s ease;text-align:left}.step:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgb(0 0 0 / .12)}.step-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#d70932;color:#fff;font-weight:700;border-radius:50%;flex-shrink:0;font-size:15px;box-shadow:0 4px 8px rgb(0 0 0 / .2)}.step p{margin:0;font-size:13px;opacity:1}.steps-grid-mobile{display:none}.dice-display-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}@media (min-width:1024px){.dice-display-container{grid-column:span 7 / span 7}}.dice-area{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:30px;min-height:300px;padding:40px;background:var(--container-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);width:100%;perspective:1500px;perspective-origin:center center}.dice{width:80px;height:80px;background:#fff;border-radius:12px;box-shadow:0 5px 15px rgb(0 0 0 / .3);position:relative;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;perspective:1000px;transition:all 0.1s ease-out}body.dark-mode .dice{background:#f8f9fa}.dice.rolling{animation:dice3DRoll 0.05s linear infinite}.dice.final{animation:diceFinish 0.6s cubic-bezier(.68,-.55,.265,1.55)}@keyframes dice3DRoll{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1)}100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg) scale(1)}}@keyframes diceFinish{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);box-shadow:0 5px 15px rgb(0 0 0 / .3)}50%{transform:rotateX(180deg) rotateY(180deg) rotateZ(90deg) scale(1.15);box-shadow:0 15px 30px rgb(0 0 0 / .4)}100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg) scale(1);box-shadow:0 5px 15px rgb(0 0 0 / .3)}}.dot{position:absolute;width:14px;height:14px;background:#2c3e50;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 3px rgb(0 0 0 / .3)}.dice-number{font-size:36px;font-weight:700;color:#2c3e50;text-shadow:0 2px 4px rgb(0 0 0 / .2)}.result-summary{background:var(--container-bg);padding:30px;border-radius:var(--border-radius);box-shadow:var(--shadow);width:100%;text-align:center}.total-result{margin-bottom:20px;padding-bottom:20px;border-bottom:2px solid rgb(0 0 0 / .1)}body.dark-mode .total-result{border-bottom-color:rgb(255 255 255 / .1)}.total-result .label{font-size:18px;font-weight:600;color:var(--text);margin-right:10px}.total-result .value{font-size:48px;font-weight:700;color:var(--accent)}.individual-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px}.result-item{background:rgb(0 0 0 / .05);padding:12px;border-radius:8px;display:flex;justify-content:space-between;align-items:center}body.dark-mode .result-item{background:rgb(255 255 255 / .05)}.dice-label{font-size:14px;color:var(--text);opacity:.8}.dice-value{font-size:20px;font-weight:700;color:var(--accent)}.copy-container{margin:20px 0;text-align:center}.copy{padding:12px 30px;background:var(--success);color:#fff;border:none;border-radius:12px;font-weight:700;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 12px rgb(0 0 0 / .15)}.copy:hover{opacity:.9;transform:translateY(-2px)}.dice-history{margin-top:30px;padding-top:30px;border-top:2px solid rgb(0 0 0 / .1)}body.dark-mode .dice-history h3{color:#fff}body.dark-mode .dice-history{border-top-color:rgb(255 255 255 / .1)}.dice-history h3{font-size:18px;margin-bottom:15px;color:var(--primary);font-weight:600}#historyList{max-height:300px;overflow-y:auto;margin-bottom:15px}#historyList::-webkit-scrollbar{width:6px}#historyList::-webkit-scrollbar-track{background:rgb(0 0 0 / .05);border-radius:3px}#historyList::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}.no-history{text-align:center;padding:20px;color:var(--text);opacity:.5;font-style:italic}.history-item{background:rgb(0 0 0 / .03);padding:12px;border-radius:8px;margin-bottom:10px;transition:all 0.3s}body.dark-mode .history-item{background:rgb(255 255 255 / .05)}.history-item:hover{background:rgb(0 0 0 / .06);transform:translateX(5px)}body.dark-mode .history-item:hover{background:rgb(255 255 255 / .08)}.history-header{display:flex;justify-content:space-between;margin-bottom:8px;font-size:12px;opacity:.7}.history-time{color:var(--text)}.history-type{color:var(--accent);font-weight:600}.history-details{display:flex;justify-content:space-between;align-items:center;font-size:14px}.history-results{color:var(--text);font-family:monospace}.history-total{font-weight:700;color:var(--accent)}.clear-btn{width:100%;padding:10px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all 0.3s;font-size:14px}.clear-btn:hover{opacity:.9;transform:translateY(-2px)}.volume-control{position:absolute;bottom:-10px;left:10px;transform:translateY(-50%);border-radius:10px;padding:10px;z-index:10}#muteBtn{background:#fff0;color:#333;font-size:30px;line-height:30px;cursor:pointer;margin-top:5px;border:none;padding:0;box-shadow:none}@media (max-width:768px){.dice-title{font-size:1.5rem;margin-top:30px}.dice-texte{padding-bottom:20px}.controls{margin-top:0;border:none!important;box-shadow:none!important}.input-group input,.input-group select{width:100%!important;font-size:20px!important}.tool-wrapper{width:95%;gap:0!important}.steps-grid{display:none}.steps-grid-mobile{display:block!important;padding-bottom:50px}.dice-area{min-height:200px;padding:20px;gap:20px}.dice{width:60px;height:60px}.dot{width:10px;height:10px}.dice-number{font-size:28px}.total-result .value{font-size:36px}.individual-results{grid-template-columns:1fr}.input-group-wrapper{display:flex!important;gap:10px!important;justify-content:center}.roll-button{padding:18px 35px}#muteBtn{font-size:18px!important;line-height:13px!important;padding:6px!important}}@media (max-width:480px){.dice-container{padding:50px 0}.dice-instructions-wrapper{padding:0 10px}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px) rotate(-5deg)}75%{transform:translateX(5px) rotate(5deg)}}body.dark-mode .dice-area{background:#2c2c3e}body.dark-mode .result-summary{background:#2c2c3e}