*,::after,::before{box-sizing:border-box}:root{font-size:16px;--color-text:#000;--color-bg:#ddd;--color-ui-bg:rgba(255, 255, 255, 0.9);--color-primary:#273e9a;--color-primary-hover:#3737af;--color-secondary:#a0b4ff;--border-radius:20px;--box-shadow:0 4px 15px rgba(0, 0, 0, 0.1);--transition:all 0.3s ease;--color-ui-bg-rgb:255, 255, 255}body{margin:0;color:var(--color-text);background-color:var(--color-bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;transition:var(--transition)}main{display:flex;flex-direction:column;height:100vh}.content,.ui-controls{position:fixed;top:0;width:100%}.content{left:0;height:100%}canvas{position:absolute;top:0;left:0}.ui-controls{left:50%;transform:translateX(-50%);max-width:450px;font-family:inherit;user-select:none;line-height:1.3;padding:15px;pointer-events:auto;background-color:var(--color-ui-bg);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);box-shadow:var(--box-shadow);display:flex;flex-direction:column;align-items:center}.ui-controls #score-result{display:inline-block;min-width:1.5em;color:var(--color-primary);font-weight:700;font-size:2.2em;text-align:center;margin-bottom:10px;text-shadow:1px 1px 1px rgba(0,0,0,.1)}.ui-controls #roll-btn{background-color:var(--color-primary);font-weight:700;color:#fff;border:0;padding:.6em 1.4em;border-radius:var(--border-radius);text-decoration:none;display:inline-block;cursor:pointer;margin:.5em 0;transition:var(--transition);box-shadow:var(--box-shadow);font-size:1em}.ui-controls #roll-btn:hover{background-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 6px rgba(0,0,0,.15)}.ui-controls #roll-btn:active{transform:translateY(1px);box-shadow:0 2px 3px rgba(0,0,0,.1)}.button-container{display:flex;align-items:center;gap:10px;margin-top:10px}#settings-btn,.modal h2{color:var(--color-primary)}#settings-btn{background-color:rgba(39,62,154,.1);border:0;border-radius:50%;font-size:20px;width:35px;height:35px;justify-content:center}#settings-btn:hover{background-color:rgba(39,62,154,.2);transform:rotate(15deg)}.modal{display:none;position:fixed;z-index:1002;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);overflow-y:auto}.modal-content{background-color:#f8f9fa;margin:5%auto;padding:30px;border:0;width:90%;max-width:450px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.2);max-height:90vh;overflow-y:auto}.modal h2{margin-top:0;font-size:28px;margin-bottom:30px;text-align:center}.dice-selection{display:flex;flex-direction:column;gap:20px}#settings-btn,.dice-selection input[type=checkbox],.dice-selection label{display:flex;align-items:center;cursor:pointer;transition:all .3s ease}.dice-selection label{font-size:18px;color:#333}.dice-selection label:hover{color:#273e9a}.dice-selection input[type=checkbox]{appearance:none;-webkit-appearance:none;width:28px;height:28px;border:2px solid var(--color-primary);border-radius:8px;margin-right:15px;justify-content:center}.dice-selection input[type=checkbox]:checked{background-color:var(--color-primary)}.dice-selection input[type=checkbox]:checked::before{content:"✓";color:#fff;font-size:20px;font-weight:700}#close-modal{background-color:var(--color-primary);color:#fff;border:0;padding:14px 28px;border-radius:30px;cursor:pointer;font-size:18px;font-weight:700;transition:all .3s ease;display:block;width:100%;margin-top:30px;box-shadow:0 4px 15px rgba(39,62,154,.3)}#close-modal:hover{background-color:var(--color-primary-hover);transform:translateY(-2px);box-shadow:0 6px 20px rgba(39,62,154,.4)}#close-modal:active{transform:translateY(1px);box-shadow:0 2px 10px rgba(39,62,154,.2)}.night-mode .modal-content{background-color:#2a2a3a;color:#e0e0e0;box-shadow:0 10px 30px rgba(0,0,0,.4)}.night-mode .dice-selection label:hover,.night-mode .modal h2,.night-mode .settings-section h3{color:#a0b4ff}.night-mode .dice-selection label{color:#e0e0e0}.night-mode .dice-selection input[type=checkbox]{border-color:#7a8fd3}.night-mode .dice-selection input[type=checkbox]:checked{background-color:#7a8fd3}.night-mode #close-modal{background-color:#7a8fd3;color:#202030;box-shadow:0 4px 15px rgba(122,143,211,.3)}.night-mode #close-modal:hover{background-color:#8a9fe3;box-shadow:0 6px 20px rgba(122,143,211,.4)}.night-mode{background-color:#202030;color:#e0e0e0}.night-mode button{background-color:#3a3a4a;color:#e0e0e0;border:1px solid #4a4a5a}.night-mode button:hover{background-color:#4a4a5a}.night-mode .ui-controls{background-color:rgba(40,40,60,.9)}.night-mode #score-result{color:#a0b4ff;text-shadow:1px 1px 1px rgba(0,0,0,.2)}.night-mode #roll-btn{background-color:#7a8fd3;color:#202030}.night-mode #roll-btn:hover{background-color:#8a9fe3}.night-mode #settings-btn{background-color:rgba(122,143,211,.1);color:#7a8fd3}.night-mode #settings-btn:hover{background-color:rgba(122,143,211,.2)}.toggle-container{display:flex;flex-direction:column;gap:15px}.toggle{position:relative;display:inline-block;width:60px;height:34px;margin-left:0}.night-mode-toggle input,.toggle input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before,.toggle-slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}.night-mode-toggle input:checked+.toggle-slider,input:checked+.slider{background-color:#2196f3}.night-mode-toggle input:checked+.toggle-slider:before,input:checked+.slider:before{transform:translateX(26px)}.toggle .label{position:absolute;top:50%;transform:translateY(-50%);left:70px;white-space:nowrap}.toggle-container.vertical{width:100%;padding-left:0}.toggle-container.vertical .toggle{display:flex;align-items:center;width:100%;height:auto;margin-left:0}.toggle-container.vertical .slider{position:relative;width:60px;height:34px;margin-right:15px;flex-shrink:0}.toggle-container.vertical .label{position:static;transform:none;left:auto;flex-grow:1}.toggle-container.vertical .toggle input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.toggle-container.vertical .toggle{padding-left:0;margin-bottom:10px}.toggle-container.vertical .slider{left:0}.night-mode-toggle{position:relative;display:inline-block;width:60px;height:34px}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:34px}.toggle-slider .fa-moon,.toggle-slider .fa-sun{position:absolute;top:50%;transform:translateY(-50%);font-size:16px;transition:.4s}.toggle-slider .fa-sun{left:8px;color:gold}.toggle-slider .fa-moon{right:8px;color:#f4f4f4}.night-mode-toggle input:checked+.toggle-slider .fa-sun{opacity:0}.night-mode-toggle input:not(:checked)+.toggle-slider .fa-moon{opacity:0}.night-mode-toggle input:checked+.toggle-slider .fa-moon{opacity:1;color:gold}.settings-section{margin-bottom:30px}.settings-section h3{color:var(--color-primary);font-size:20px;margin-bottom:15px}.night-mode-container{display:flex;align-items:center;justify-content:space-between}.night-mode-container span{font-size:18px}@media (max-height:700px){.modal-content{margin:2%auto;padding:20px;max-height:96vh}.modal h2{font-size:24px}.modal h2,.settings-section{margin-bottom:20px}.settings-section h3{font-size:18px;margin-bottom:10px}.dice-selection{gap:15px}#close-modal,.dice-selection label{font-size:16px}#close-modal{padding:12px 24px;margin-top:20px}}#mobile-shake-modal .modal-content{text-align:center;padding:20px}#mobile-shake-modal .shake-icon{width:100px;height:100px}#mobile-shake-modal h2{font-size:24px;margin-bottom:10px}#mobile-shake-modal p{font-size:16px;margin-bottom:20px}#got-it-btn{background-color:var(--color-primary);color:#fff;border:0;padding:10px 20px;border-radius:5px;font-size:16px;cursor:pointer}#got-it-btn:hover{background-color:var(--color-primary-hover)}.night-mode #got-it-btn{background-color:#7a8fd3;color:#202030}.night-mode #got-it-btn:hover{background-color:#8a9fe3}.night-mode{--color-text:#fff;--color-bg:#202030;--color-ui-bg:rgba(32, 32, 48, 0.9);--color-primary:#7a8fd3;--color-primary-hover:#8a9fe3;--color-secondary:#a0b4ff;--box-shadow:0 4px 15px rgba(0, 0, 0, 0.2);--color-ui-bg-rgb:32, 32, 48}.timer-container{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background-color:rgba(var(--color-ui-bg-rgb),.8);padding:10px;border-radius:var(--border-radius);box-shadow:var(--box-shadow);text-align:center;width:auto;overflow:hidden;min-width:280px}.night-mode .timer-container{background-color:rgba(40,40,60,.9)}.timer-wrapper{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}.timer-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-primary);opacity:.2;transform-origin:left;transition:transform 1s linear;z-index:0}.timer-display{font-size:1.8em;font-weight:700;color:var(--color-primary);margin:0 10px;flex-grow:1;text-align:center}.timer-btn{background-color:var(--color-primary);color:#fff;border:0;width:40px;height:40px;border-radius:50%;cursor:pointer;transition:var(--transition);font-size:1em;display:flex;align-items:center;justify-content:center;margin:0 5px;padding:0}.night-mode .timer-btn:hover:not(:disabled),.timer-btn:hover:not(:disabled){background-color:var(--color-primary-hover)}.timer-btn:disabled{opacity:.5;cursor:not-allowed}.timer-btn i{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.night-mode .timer-progress{background-color:var(--color-secondary)}.night-mode .timer-display{color:var(--color-secondary)}.night-mode .timer-btn{background-color:var(--color-primary);color:var(--color-bg)}