:root{--color-white:#fff;--color-gray-50:#f7fafc;--color-gray-100:#edf2f7;--color-gray-200:#e2e8f0;--color-gray-300:#cbd5e0;--color-gray-400:#a0aec0;--color-gray-500:#718096;--color-gray-600:#4a5568;--color-gray-700:#2d3748;--color-gray-800:#1a202c;--color-gray-900:#171923;--color-primary-light:#9ae6b4;--color-primary:#38a169;--color-primary-dark:#2f855a;--color-primary-darker:#276749;--bg-app:var(--color-gray-50);--bg-surface:var(--color-white);--bg-input:var(--color-gray-50);--bg-input-hover:var(--color-gray-100);--bg-input-active:var(--color-primary);--bg-button-primary:var(--color-primary);--bg-button-primary-hover:var(--color-primary-dark);--bg-button-primary-active:var(--color-primary-darker);--bg-modal-overlay:#00000080;--text-primary:var(--color-gray-800);--text-secondary:var(--color-gray-600);--text-tertiary:var(--color-gray-500);--text-muted:var(--color-gray-400);--text-on-primary:var(--color-white);--text-accent:var(--color-primary);--border-default:var(--color-gray-200);--border-hover:var(--color-gray-300);--border-active:var(--color-primary);--border-surface:var(--color-white);--spacing-xs:.375rem;--spacing-sm:.5rem;--spacing-md:.75rem;--spacing-lg:1rem;--spacing-xl:1.25rem;--spacing-2xl:1.5rem;--spacing-3xl:2rem;--spacing-4xl:3rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-full:50%;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 2px 8px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--shadow-xl:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:"Courier New",Courier,monospace;--text-xs:.625rem;--text-sm:.8125rem;--text-base:.875rem;--text-md:.9375rem;--text-lg:1rem;--text-xl:1.25rem;--text-2xl:1.5rem;--font-medium:500;--font-semibold:600;--font-bold:700;--transition-fast:.15s ease;--transition-base:.2s ease;--transition-slow:.3s ease;--z-modal:1000;--z-tooltip:1100;--button-height:40px;--button-height-sm:36px;--input-height:40px;--input-height-sm:36px;--icon-size:48px;--icon-size-sm:24px}*{box-sizing:border-box}.app-container{background:var(--bg-app);height:100vh;padding:var(--spacing-sm);gap:var(--spacing-sm);flex-direction:column;display:flex;overflow:hidden}.controls-section{background:var(--bg-surface);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);flex-shrink:0}.header{margin-bottom:var(--spacing-md);justify-content:space-between;align-items:center;display:flex}.title{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);margin:0}.history-button{width:var(--button-height);height:var(--button-height);background:var(--bg-input);border:2px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;padding:0;display:flex;position:relative}.history-button:hover{background:var(--bg-input-hover);border-color:var(--border-hover);color:var(--text-primary)}.history-button.active{color:var(--text-accent);border-color:var(--border-active)}.history-count{background:var(--bg-button-primary);color:var(--text-on-primary);font-size:var(--text-xs);font-weight:var(--font-bold);border-radius:var(--radius-full);border:2px solid var(--border-surface);justify-content:center;align-items:center;width:18px;height:18px;display:flex;position:absolute;top:-6px;right:-6px}.control-group{margin-bottom:var(--spacing-md)}.control-title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-secondary);margin:0 0 var(--spacing-sm)0}.dice-selector{gap:var(--spacing-sm);grid-template-columns:repeat(auto-fit,minmax(60px,1fr));display:grid}.dice-option{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.dice-option input[type=radio]{opacity:0;width:0;height:0;position:absolute}.dice-label{padding:var(--spacing-sm);background:var(--bg-input);border:2px solid var(--border-default);border-radius:var(--radius-md);font-weight:var(--font-semibold);font-size:var(--text-base);color:var(--text-primary);transition:all var(--transition-fast);min-height:var(--input-height);justify-content:center;align-items:center;display:flex}.dice-option:hover .dice-label{background:var(--bg-input-hover);border-color:var(--border-hover)}.dice-option.active .dice-label{background:var(--bg-input-active);color:var(--text-on-primary);border-color:var(--border-active)}.number-selector{gap:var(--spacing-sm);justify-content:center;display:flex}.number-option{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.number-option input[type=radio]{opacity:0;width:0;height:0;position:absolute}.number-label{width:var(--button-height);height:var(--button-height);background:var(--bg-input);border:2px solid var(--border-default);border-radius:var(--radius-md);font-weight:var(--font-semibold);font-size:var(--text-lg);color:var(--text-primary);transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.number-option:hover .number-label{background:var(--bg-input-hover);border-color:var(--border-hover)}.number-option.active .number-label{background:var(--bg-input-active);color:var(--text-on-primary);border-color:var(--border-active)}.roll-button{width:100%;padding:var(--spacing-md);font-size:var(--text-lg);font-weight:var(--font-semibold);background:var(--bg-button-primary);color:var(--text-on-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none}.roll-button:hover:not(:disabled){background:var(--bg-button-primary-hover)}.roll-button:active:not(:disabled){background:var(--bg-button-primary-active)}.roll-button:disabled{opacity:.6;cursor:not-allowed}.results-section{padding:var(--spacing-md);background:var(--bg-surface);border-radius:var(--radius-md);justify-content:center;align-items:center;gap:var(--spacing-md);box-shadow:var(--shadow-md);flex-shrink:0;display:flex}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.results-title{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.results-display{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-accent);font-family:var(--font-mono)}#dice-box{background:var(--bg-surface);border-radius:var(--radius-lg);width:100%;min-height:0;box-shadow:var(--shadow-md);flex:1;overflow:hidden}.modal-overlay{background:var(--bg-modal-overlay);z-index:var(--z-modal);padding:var(--spacing-lg);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);flex-direction:column;width:100%;max-width:500px;max-height:80vh;display:flex;overflow:hidden}.modal-header{padding:var(--spacing-xl);border-bottom:1px solid var(--border-default);justify-content:space-between;align-items:center;display:flex}.modal-title{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);margin:0}.modal-close{width:32px;height:32px;color:var(--text-tertiary);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.modal-close:hover{background:var(--bg-input);color:var(--text-primary)}.modal-enter-active,.modal-leave-active{transition:opacity var(--transition-base)}.modal-enter-active .modal-content,.modal-leave-active .modal-content{transition:transform var(--transition-base)}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-content,.modal-leave-to .modal-content{transform:scale(.95)}.roll-history{padding:var(--spacing-xl);flex-direction:column;flex:1;display:flex;overflow:hidden}.empty-state{padding:var(--spacing-4xl)var(--spacing-2xl);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-icon{width:var(--icon-size);height:var(--icon-size);opacity:.3}.empty-text{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-secondary);margin:var(--spacing-lg)0 var(--spacing-sm)0}.empty-subtext{font-size:var(--text-base);color:var(--text-muted);margin:0}.history-list{gap:var(--spacing-sm);flex-direction:column;max-height:60vh;display:flex;overflow-y:auto}.history-item{padding:var(--spacing-md)var(--spacing-lg);background:var(--bg-input);border-radius:var(--radius-md);border-left:3px solid var(--border-active);transition:all var(--transition-fast);justify-content:space-between;align-items:center;display:flex}.history-item:hover{background:var(--bg-input-hover);transform:translate(2px)}.roll-type{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary);text-transform:uppercase}.roll-result{font-size:var(--text-base);font-weight:var(--font-medium);color:var(--text-accent);font-family:var(--font-mono)}.clear-history-button{margin-top:var(--spacing-lg);padding:var(--spacing-md);font-size:var(--text-base);font-weight:var(--font-semibold);background:var(--bg-input);color:var(--text-secondary);border:2px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);width:100%}.clear-history-button:hover{background:var(--bg-input-hover);border-color:var(--border-hover);color:var(--text-primary)}.clear-history-button:active{transform:scale(.98)}.history-list::-webkit-scrollbar{width:6px}.history-list::-webkit-scrollbar-track{background:var(--color-gray-100);border-radius:3px}.history-list::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:3px}.history-list::-webkit-scrollbar-thumb:hover{background:var(--color-gray-400)}@media (max-width:640px){.app-container{padding:var(--spacing-sm)}.controls-section{padding:var(--spacing-md)}.dice-selector{gap:var(--spacing-xs);grid-template-columns:repeat(auto-fit,minmax(50px,1fr))}.dice-label{padding:var(--spacing-xs);font-size:var(--text-sm);min-height:var(--input-height-sm)}.number-label{width:var(--input-height-sm);height:var(--input-height-sm);font-size:var(--text-base)}.roll-button{padding:var(--spacing-sm);font-size:var(--text-md)}#dice-box{min-height:200px}.roll-history{padding:var(--spacing-lg)}.history-item{padding:var(--spacing-sm)var(--spacing-md)}.roll-type,.roll-result{font-size:var(--text-sm)}.empty-state{padding:var(--spacing-3xl)var(--spacing-lg)}.empty-text{font-size:var(--text-md)}.empty-subtext{font-size:var(--text-sm)}}@media (max-width:900px) and (orientation:landscape){.app-container{flex-direction:row}.controls-section{flex:0 0 250px;max-height:calc(100vh - 1rem);overflow-y:auto}#dice-box{flex:1;height:calc(100vh - 1rem);min-height:auto}}@media (hover:none) and (pointer:coarse){.dice-option:hover .dice-label,.number-option:hover .number-label{transform:none}.dice-option:active .dice-label,.number-option:active .number-label{transform:scale(.95)}}