html,body{height:100%;overflow:hidden}body{background:#1a1a1a;color:#fff;font-family:system-ui,sans-serif;display:flex;align-items:center;justify-content:center}#root{width:100%;height:100dvh;display:flex;align-items:center;justify-content:center}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.app{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 16px;width:100%;max-width:420px;height:100dvh;overflow:hidden}.title{font-size:1.4rem;font-weight:700;letter-spacing:.1em;color:#fff}.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;width:100%}.control-group{display:flex;align-items:center;gap:8px}.control-group label{font-size:.82rem;color:#aaa;white-space:nowrap;min-width:2.5em;text-align:right}.cue-label{color:#ccc}.obj-label{color:#4d8}.btn-group{display:flex;gap:4px}.btn-group button{width:34px;height:34px;border:1px solid #444;background:#2a2a2a;color:#ccc;font-size:.9rem;border-radius:6px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.btn-group button:hover{background:#3a3a3a;border-color:#666}.btn-group button.active{color:#000;font-weight:700}.btn-group button.cue-active{background:#fff;border-color:#fff}.btn-group button.obj-active{background:#0d7;border-color:#0d7}.btn-group button.active:not(.cue-active):not(.obj-active){background:#0c6;border-color:#0c6}.reset-btn{padding:7px 16px;border:1px solid #555;background:#333;color:#fff;font-size:.82rem;border-radius:6px;cursor:pointer;transition:background .12s}.reset-btn:hover{background:#444}.table-wrapper{width:100%;max-width:360px;border-radius:8px;overflow:hidden;box-shadow:0 4px 24px #0009;flex:1;min-height:0;display:flex;align-items:center}.legend{display:flex;align-items:center;font-size:.76rem;color:#888;gap:4px;flex-wrap:wrap;justify-content:center}.legend-ball{display:inline-block;width:12px;height:12px;border-radius:50%;flex-shrink:0}.legend-ball.cue{background:#fff;border:1px solid #aaa}.legend-ball.obj{background:#111;border:1px solid #555}.legend-line{display:inline-block;width:20px;height:2px;border-radius:1px;flex-shrink:0}.legend-line.cue-line{background:#fff}.legend-line.obj-line{background:#0d7}