*{margin:0;padding:0}html,body{overflow:hidden;background:#16213e}.webgl{position:fixed;top:0;left:0;outline:none}#ui{position:fixed;top:28px;left:50%;transform:translate(-50%);text-align:center;pointer-events:none;-webkit-user-select:none;user-select:none}#result{font-family:Georgia,serif;font-size:7rem;font-weight:700;color:#fff;text-shadow:0 0 20px rgba(80,160,255,.9),0 0 60px rgba(80,160,255,.4);line-height:1;opacity:0;transform:scale(.6) translateY(-10px);transition:opacity .35s ease,transform .35s ease}#result.visible{opacity:1;transform:scale(1) translateY(0)}#hint{margin-top:8px;font-family:Arial,sans-serif;font-size:.9rem;color:#ffffff80;letter-spacing:.06em}#dice-controls{position:fixed;left:22px;bottom:28px;display:flex;flex-direction:column;gap:8px;z-index:10}.ctrl-group{display:flex;gap:4px}.type-btn,.count-btn{padding:7px 11px;background:transparent;border:1.5px solid rgba(255,255,255,.15);border-radius:5px;color:#fff6;font-family:Arial,sans-serif;font-size:.78rem;letter-spacing:.04em;cursor:pointer;transition:border-color .2s,color .2s}.type-btn:hover,.count-btn:hover{border-color:#fff6;color:#fffc}.type-btn.active,.count-btn.active{border-color:#48f;color:#48f}#stats.d20 #stats-rows{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}#bottom-controls{position:fixed;bottom:28px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:14px;z-index:10}#speed-controls{display:flex;gap:4px}.speed-btn{padding:7px 11px;background:transparent;border:1.5px solid rgba(255,255,255,.15);border-radius:5px;color:#fff6;font-family:Arial,sans-serif;font-size:.78rem;letter-spacing:.04em;cursor:pointer;transition:border-color .2s,color .2s}.speed-btn:hover{border-color:#fff6;color:#fffc}.speed-btn.active{border-color:#48f;color:#48f}#auto-btn{padding:10px 28px;background:transparent;border:1.5px solid rgba(68,136,255,.5);border-radius:6px;color:#ffffffb3;font-family:Arial,sans-serif;font-size:.88rem;letter-spacing:.08em;cursor:pointer;transition:border-color .2s,color .2s,box-shadow .2s}#auto-btn:hover{border-color:#4488ffe6;color:#fff}#auto-btn.active{border-color:#48f;color:#48f;box-shadow:0 0 14px #4488ff73}#stats{position:fixed;bottom:28px;right:22px;background:#0a1028b8;border:1px solid rgba(68,136,255,.2);border-radius:8px;padding:12px 16px;min-width:148px;-webkit-user-select:none;user-select:none;pointer-events:none}.stats-title{font-family:Arial,sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#48fc;margin-bottom:6px}#stats-total{font-family:Arial,sans-serif;font-size:.75rem;color:#fff6;margin-bottom:10px}.stat-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}.face-num{font-family:Georgia,serif;font-size:.9rem;color:#ffffffbf;width:12px;text-align:right;flex-shrink:0}.bar-wrap{flex:1;height:6px;background:#ffffff12;border-radius:3px;overflow:hidden}.bar{display:block;height:100%;width:0%;background:#48f;border-radius:3px;transition:width .4s ease}.stat-count{font-family:Arial,sans-serif;font-size:.75rem;color:#ffffff80;width:24px;text-align:right;flex-shrink:0}.stat-pct{font-family:Arial,sans-serif;font-size:.72rem;color:#4488ffb3;width:36px;text-align:right;flex-shrink:0}#home-link{position:fixed;top:18px;right:22px}#home-link a{color:#fff9;text-decoration:none;font-family:Arial,sans-serif;font-size:.88rem;letter-spacing:.04em;transition:color .2s}#home-link a:hover{color:#fff}