body{margin:0;overflow:hidden;background-color:#cce0da;font-family:Segoe UI,sans-serif}canvas{display:block}#ui-layer{position:absolute;width:100%;height:100%;pointer-events:none}#music-toggle{position:absolute;top:20px;left:20px;width:40px;height:40px;background:#ffffffe6;border:none;border-radius:50%;font-size:1.2rem;cursor:pointer;pointer-events:auto;box-shadow:0 4px 10px #0000001a;display:flex;align-items:center;justify-content:center;transition:transform .1s;z-index:10}#music-toggle:hover{transform:scale(1.05)}#music-toggle:active{transform:scale(.95)}#instructions{position:absolute;top:70px;left:20px;color:#2c3e50;background:#ffffffe6;padding:20px;border-radius:12px;box-shadow:0 10px 20px #0000001a;transition:opacity 2s ease-out}.key{background:#eee;padding:2px 6px;border-radius:4px;border:1px solid #ccc;font-size:.8rem}#interaction-hint{position:absolute;bottom:100px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;padding:10px 20px;border-radius:20px;font-weight:700;opacity:0;transition:opacity .2s}#modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}#modal-content{background:#fffaf0;padding:40px;border-radius:8px;min-width:300px;text-align:center;border:4px solid #5c4d3c;box-shadow:0 20px 50px #0000004d;transform:scale(.9);transition:transform .3s}#modal-content h1{color:#2d4c1e;margin:0;font-size:3rem}#modal-content p{color:#888;font-size:.9rem;margin-top:10px}.float-text{position:absolute;color:#fff;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.5);font-size:1.2rem;animation:floatUp 1.5s ease-out forwards;pointer-events:none}@keyframes floatUp{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}