.app-container{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.app-container canvas{display:block;width:100%;height:100%}.ui-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;justify-content:space-between;padding:20px;box-sizing:border-box;z-index:100}.ui-left-panel,.ui-right-panel{pointer-events:auto}.dice-controls{background:rgba(20,20,30,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:20px;width:280px;color:#fff;font-family:Segoe UI,system-ui,sans-serif;box-shadow:0 8px 32px #0006;border:1px solid rgba(255,255,255,.1)}.controls-header h2{margin:0 0 16px;font-size:1.4rem;font-weight:600;color:gold;text-align:center}.control-section{margin-bottom:20px}.section-label{display:block;font-size:.85rem;font-weight:500;color:#aaa;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}.dice-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.dice-type-btn{padding:12px 8px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.dice-type-btn:hover:not(:disabled){background:rgba(255,255,255,.15);border-color:#fff6}.dice-type-btn.selected{background:rgba(255,215,0,.2);border-color:gold;color:gold}.dice-type-btn:disabled{opacity:.5;cursor:not-allowed}.material-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.material-btn{display:flex;align-items:center;gap:8px;padding:10px 12px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;border-radius:8px;font-size:.85rem;cursor:pointer;transition:all .2s ease}.material-btn:hover:not(:disabled){background:rgba(255,255,255,.15);border-color:#fff6}.material-btn.selected{background:rgba(var(--material-color),.2);border-color:var(--material-color)}.material-btn:disabled{opacity:.5;cursor:not-allowed}.material-swatch{width:18px;height:18px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 -2px 4px #0000004d}.material-name{font-weight:500}.roll-section{padding-top:8px}.roll-btn{width:100%;padding:16px 24px;border:none;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#1a1a2e;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 16px #ffd7004d}.roll-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ffd70066}.roll-btn:active:not(:disabled){transform:translateY(0)}.roll-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.result-display{background:rgba(0,0,0,.3);border-radius:12px;padding:16px;text-align:center}.result-label{font-size:.8rem;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.result-value{font-size:3rem;font-weight:700;color:gold;line-height:1;transition:all .3s ease}.result-value.rolling{animation:pulse .5s ease-in-out infinite;color:#aaa}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.dice-breakdown{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap}.dice-result{font-size:.8rem;color:#aaa;background:rgba(255,255,255,.1);padding:4px 8px;border-radius:4px}.roll-history{background:rgba(20,20,30,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:16px;width:200px;max-height:60vh;color:#fff;font-family:Segoe UI,system-ui,sans-serif;box-shadow:0 8px 32px #0006;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}.history-header h3{margin:0;font-size:1rem;font-weight:600;color:gold}.clear-history-btn{padding:4px 10px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#888;border-radius:4px;font-size:.75rem;cursor:pointer;transition:all .2s ease}.clear-history-btn:hover{background:rgba(255,255,255,.1);color:#fff}.history-list{overflow-y:auto;flex:1}.history-empty{color:#666;text-align:center;padding:20px 0;font-style:italic}.history-entry{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}.history-entry:last-child{border-bottom:none}.history-dice-info{display:flex;align-items:center;gap:6px;flex:1}.history-dice-type{font-size:.85rem;font-weight:600;color:#ccc}.history-material-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.history-result{font-size:1.1rem;font-weight:700;color:gold;min-width:30px;text-align:right}.history-time{font-size:.7rem;color:#666;min-width:60px;text-align:right}.history-list::-webkit-scrollbar{width:6px}.history-list::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:3px}.history-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}.history-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh}#root{width:100%;height:100%}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}