:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#000}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overflow:hidden}canvas{position:fixed;top:0;left:0;z-index:1}#ui-container{position:fixed;top:20px;right:20px;z-index:10;display:flex;flex-direction:column;gap:15px;width:250px}.panel{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;padding:20px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 30px #0000001a}h2{margin:0 0 15px;font-size:1.2rem;font-weight:600;color:#fff}.btn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:.9rem}button:hover{background:#fff3;transform:translateY(-2px)}button.active{background:#ffffffe6;color:#000}input[type=color]{width:100%;height:40px;border:none;border-radius:8px;cursor:pointer;background:none}#hand-status{position:fixed;bottom:20px;left:20px;z-index:10;color:#ffffff80;font-size:.9rem}.debug-item{display:flex;justify-content:space-between;margin-bottom:8px;font-family:monospace;font-size:.9rem;color:#ffffffb3}@media(max-width:600px){#ui-container{width:100%;inset:auto 0 0;padding:10px;box-sizing:border-box;flex-direction:row;flex-wrap:wrap;justify-content:space-between;background:transparent;gap:10px;pointer-events:none}.panel{width:48%;margin:0;padding:10px;font-size:.8rem;pointer-events:auto;background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}h2{font-size:1rem;margin-bottom:8px}.btn-grid{grid-template-columns:repeat(3,1fr);gap:5px}button{padding:5px;font-size:.75rem}#hand-status{top:10px;left:10px;bottom:auto}#debug-panel{display:none}}