html,body{margin:0;padding:0;width:100%;height:100dvh;overflow:hidden;background:#222;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}canvas{display:block;position:absolute;top:0;left:0;z-index:0}#ui-layer{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:10px;box-sizing:border-box}.hud-top{display:flex;justify-content:center;gap:10px;pointer-events:auto}.pill{background:#ffffffe6;padding:8px 16px;border-radius:20px;border:2px solid #f3d9e6;color:#8e4a6a;font-weight:700;display:flex;flex-direction:column;align-items:center;min-width:60px;box-shadow:0 4px 6px #0000001a}.pill span{font-size:.75rem;text-transform:uppercase;opacity:.8}.pill strong{font-size:1.2rem}.controls-bottom{display:flex;justify-content:center;gap:15px;position:absolute;bottom:20px;bottom:calc(20px + env(safe-area-inset-bottom));left:0;width:100%;pointer-events:auto;z-index:20;padding-bottom:0;margin-bottom:0}.btn-icon{width:60px;height:60px;border-radius:50%;border:none;background:#fff;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 10px #0003;transition:transform .1s;display:grid;place-items:center}.btn-icon:active{transform:scale(.95)}.btn-clear{background:#fff0f7;border:2px solid #ff6aa6;color:#ff6aa6}.btn-restart{background:#8e4a6a;color:#fff}:root{--accent: #ff6aa6;--accent2: #ff9fc4;--text: #5a2941;--muted: #8e4a6a;--bg2: #fff0f7}.tutorial-dialog{width:min(400px,90vw);background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid #fff;box-shadow:0 10px 40px #9d245a26;border-radius:20px;padding:24px;overflow:hidden;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5000;display:none;color:var(--text);font-family:Segoe UI,sans-serif;flex-direction:column}.tutorial-dialog.open{display:flex;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}.tutorial-slide{display:none;flex-direction:column;align-items:center;gap:12px;text-align:center;animation:slideIn .3s ease-out;width:100%}.tutorial-slide.active{display:flex}@keyframes slideIn{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.tutorial-slide h2{margin:0;color:var(--text);font-size:1.5rem}.tutorial-slide p{margin:0;color:var(--muted);font-size:1.05rem;line-height:1.4}.tutorial-visual{margin:16px 0;display:flex;align-items:center;justify-content:center;gap:16px;min-height:80px;width:100%;background:var(--bg2);border-radius:12px;padding:16px;box-sizing:border-box}.tutorial-visual.row{flex-direction:row;gap:24px}.tutorial-group{display:flex;flex-direction:column;align-items:center;gap:8px}.t-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}.tutorial-visual .arrow{font-size:1.5rem;color:var(--accent);animation:slideRight 1s infinite alternate}@keyframes slideRight{0%{transform:translate(-3px)}to{transform:translate(3px)}}.tutorial-visual .emoji{font-size:3rem;margin:0}.tutorial-visual .card{width:50px;height:50px;background:#fff;border:1px solid #f3d9e6;border-radius:12px;display:grid;place-items:center;font-size:2rem;box-shadow:0 4px 6px #0000000d}.tutorial-visual .selected{transform:scale(1.05);border-color:var(--accent);box-shadow:0 0 0 4px #ff6aa633}.tutorial-nav{margin-top:24px;display:flex;flex-direction:column;gap:16px;align-items:center;width:100%}.dots{display:flex;gap:8px}.dot{width:8px;height:8px;border-radius:50%;background:#e0c5d3;transition:all .2s}.dot.active{background:var(--accent);transform:scale(1.2)}.tutorial-buttons{display:flex;gap:12px;width:100%;justify-content:center}.tutorial-buttons button{padding:10px 20px;border-radius:10px;border:none;font-weight:700;cursor:pointer;font-size:1rem;transition:transform .1s}.tutorial-buttons button:active{transform:scale(.95)}.btn-secondary{background:transparent;color:var(--muted);border:1px solid #e0c5d3!important}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 10px #ff6aa64d}.bounce{animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.shake{animation:shake 3s infinite}@keyframes shake{0%,to{transform:rotate(0)}92%{transform:rotate(-5deg)}94%{transform:rotate(5deg)}96%{transform:rotate(-5deg)}98%{transform:rotate(5deg)}}.spin{animation:spin 3s infinite linear}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}