body{margin:0;overflow:hidden;font-family:Arial,sans-serif}canvas{display:block;cursor:pointer}#ui{position:absolute;top:20px;left:20px;color:#fff;font-size:18px;z-index:100;text-shadow:2px 2px 4px rgba(0,0,0,.8)}#controls{position:absolute;top:20px;right:20px;color:#fff;font-size:14px;z-index:100;text-shadow:2px 2px 4px rgba(0,0,0,.8);background:#0000004d;padding:15px;border-radius:10px;min-width:250px;max-height:80vh;overflow-y:auto;transition:transform .3s ease}#controls.collapsed{transform:translate(calc(100% - 40px))}#controls.collapsed .controls-content{opacity:0;pointer-events:none}.controls-content{opacity:1;transition:opacity .3s ease}.toggle-button{font-family:Arial,sans-serif;font-size:18px;line-height:1;background:#0000;border:none;color:#d3d3d3;position:relative;left:-8px;margin-bottom:6px;cursor:pointer}.toggle-button:hover{color:#fff}#controls label{display:block;margin-bottom:5px;font-weight:700}#controls input[type=range],#controls select,#controls textarea{width:100%;margin-bottom:10px;padding:5px;border-radius:5px;border:none;font-size:14px;box-sizing:border-box}#controls textarea{resize:vertical;min-height:60px;font-family:Arial,sans-serif}.color-mode-section{border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:10px;margin-bottom:15px;background:#0003}.color-mode-section h3{margin:0 0 10px;font-size:16px;color:#fff}.individual-dice-colors{display:none}.individual-dice-colors.active{display:block}.dice-color-item{display:flex;align-items:center;margin-bottom:8px;gap:10px}.dice-color-item label{margin:0;min-width:60px;font-size:12px}.dice-color-item select{flex:1;margin:0;font-size:12px}.color-mode-toggle{margin-bottom:15px;text-align:left}.color-mode-toggle input[type=radio]{width:auto;margin-right:8px;margin-bottom:0}.color-mode-toggle label{display:inline;margin-bottom:0;margin-right:15px;font-weight:400;cursor:pointer}#instructions{position:absolute;bottom:20px;left:20px;color:#fff;font-size:16px;z-index:100;text-shadow:2px 2px 4px rgba(0,0,0,.8)}#dicehome{position:absolute;bottom:20px;right:20px;color:#fff;font-size:16px;z-index:100;text-shadow:2px 2px 4px rgba(0,0,0,.8)}#dicehome a{color:#fff;text-decoration:underline}#dicehome a:visited,#dicehome a:hover{color:#fff}#quantityDisplay{display:none}#result{position:absolute;top:10%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:48px;font-weight:700;text-shadow:3px 3px 6px rgba(0,0,0,.8);opacity:0;transition:opacity .5s ease;z-index:100;pointer-events:none;text-align:center}@media (max-width: 768px){#controls{right:10px;top:10px;min-width:220px;font-size:12px;max-height:70vh}#ui{left:10px;top:10px;font-size:16px}#instructions{bottom:10px;left:10px;font-size:14px}#result{font-size:36px}}@media (max-width: 480px){#controls{min-width:200px;padding:10px}#result{font-size:28px}}