/* ── Particles / Floats ── */
#pcanvas{position:fixed;top:0;left:50%;transform:translateX(-50%);pointer-events:none;z-index:999;width:520px;height:700px}
#floats{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:998}
.xp-float{position:absolute;font-weight:900;font-family:var(--font-body);text-shadow:0 0 16px rgba(245,166,35,.9);animation:floatUp 1s ease forwards;white-space:nowrap}
.coin-float{position:absolute;font-size:1.8rem;animation:coinFloat .9s ease forwards}

/* ── Fretboard Exercise ── */
.fb-wrap{width:100%;max-width:520px;display:flex;justify-content:center;margin-top:.6rem;margin-bottom:4px}
.fb-wrap svg{display:block}
.fb-fc{cursor:pointer;touch-action:manipulation}
.fb-action-row{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:.5rem 0 .25rem;width:100%;max-width:520px}
.fb-confirm-btn{font-family:var(--font-body);font-size:.88rem;font-weight:700;padding:.55rem 1.2rem;border-radius:12px;border:2px solid #111;background:linear-gradient(180deg,#f5aa2a,#d4720a);color:#fff;box-shadow:3px 3px 0 #111;cursor:pointer;touch-action:manipulation;text-shadow:0 1px 0 rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.8)}
.fb-confirm-btn:disabled{opacity:.38;cursor:default}
.fb-confirm-btn:active:not(:disabled){transform:scale(.97);filter:brightness(.88)}

/* ── Sala de Aula ── */
@keyframes sala-vez-point{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.sala-vez-arrow{animation:sala-vez-point .65s ease-in-out infinite;display:inline-flex;align-items:center;flex-shrink:0}
.sala-step-btn{width:100%;text-align:left;background:linear-gradient(180deg,#1a2a1a,#0e1a0e);border:3px solid #2a5a2a;border-radius:12px;color:#7cdd7c;font-family:var(--font-body);font-size:.9rem;font-weight:700;padding:.7rem 1rem;cursor:pointer;box-shadow:3px 3px 0 #051005;margin:.2rem 0;transition:border-color .15s,opacity .15s;display:flex;align-items:center;gap:.5rem}
.sala-step-btn:hover:not(:disabled){border-color:#7cdd7c}
.sala-step-btn:disabled{opacity:.32;cursor:default}
.sala-step-btn.sala-done{border-color:#4ade80;color:#4ade80}
.sala-step-text{background:#0d1a0d;border:1px solid #1a3a1a;border-radius:8px;padding:.7rem .9rem;margin:.15rem 0 .4rem;font-size:.87rem;color:#ccc;line-height:1.65}
.sala-step-text ul{margin:.3rem 0 .3rem 1.1rem;padding:0}
.sala-step-text li{margin:.15rem 0}
.sala-focus-btn{font-family:var(--font-body);font-size:.82rem;font-weight:700;padding:.45rem 1rem;border-radius:10px;border:2px solid #2a5a2a;background:linear-gradient(180deg,#1a2a1a,#0e1a0e);color:#7cdd7c;box-shadow:2px 2px 0 #051005;cursor:pointer;margin-top:.55rem;width:100%;touch-action:manipulation}
.sala-focus-btn:active{transform:scale(.97);filter:brightness(.88)}
.fb-ghost-btn{font-family:var(--font-body);font-size:.82rem;font-weight:700;padding:.5rem .9rem;border-radius:12px;border:2px solid #2a4a6a;background:linear-gradient(180deg,#1a2a3a,#0e1a2a);color:#60dcff;box-shadow:3px 3px 0 #0a1520;cursor:pointer;touch-action:manipulation}
.fb-ghost-btn:active{transform:scale(.97);filter:brightness(.88)}
.fb-note-count{font-size:.7rem;color:#60dcff88;text-align:center;margin-bottom:.25rem;width:100%;max-width:520px;font-weight:600}
.fb-result-hint{font-size:.88rem;font-weight:800;text-align:center;padding:.3rem 0;width:100%}

/* ── Metrônomo ── */
.metro-wrap{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding-top:.5rem}
.metro-bpm-display{font-size:5rem;font-weight:900;font-family:var(--font-title);color:#F5A623;line-height:1;letter-spacing:-.04em}
.metro-bpm-label{font-size:.7rem;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.15em;margin-top:-.5rem}
.metro-beat{width:22px;height:22px;border-radius:50%;background:#2a2a2a;transition:background .05s,box-shadow .05s}
.metro-beat.active{background:#F5A623;box-shadow:0 0 18px #F5A62399}
.metro-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:#2a2a2a;outline:none;cursor:pointer}
.metro-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#F5A623;border:3px solid #111;box-shadow:2px 2px 0 #111;cursor:pointer}
.metro-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#F5A623;border:3px solid #111;box-shadow:2px 2px 0 #111;cursor:pointer}
.metro-adj-btn{width:52px;height:52px;border-radius:14px;border:3px solid #111;box-shadow:3px 3px 0 #111;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);color:#ccc;font-size:1.4rem;font-weight:900;font-family:var(--font-body);cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation}
.metro-adj-btn:active{transform:scale(.94);filter:brightness(.85)}
.metro-play-btn{width:100%;padding:1rem;border-radius:18px;border:3px solid #111;box-shadow:5px 5px 0 #111;font-size:1.1rem;font-weight:900;font-family:var(--font-body);cursor:pointer;letter-spacing:.02em;touch-action:manipulation;transition:filter .1s}
.metro-play-btn:active{filter:brightness(.88);transform:scale(.98)}

/* ── Afinador ── */
@keyframes tunerComplete{0%{opacity:0;transform:scale(.85) translateY(8px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes tunerPerfect{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1.15)}28%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
@keyframes tnPlayGlow{0%,100%{text-shadow:0 0 6px #60dcff44,0 0 14px #60dcff22;opacity:.6}50%{text-shadow:0 0 16px #60dcff,0 0 32px #60dcff88;opacity:1}}
@keyframes salaGlow{0%,100%{text-shadow:0 0 4px #7cdd7c22,0 0 10px #7cdd7c11;opacity:.55}50%{text-shadow:0 0 12px #7cdd7c99,0 0 24px #7cdd7c44;opacity:.95}}
@keyframes tnPulse{0%{opacity:.65;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.38)}}
@keyframes tnStrFlash{0%{background:linear-gradient(180deg,#3dbd3d,#2a8a2a);box-shadow:0 0 14px #7cdd7c88,2px 2px 0 #111;border-color:#7cdd7c}65%{background:linear-gradient(180deg,#3dbd3d,#2a8a2a);box-shadow:0 0 22px #7cdd7c,2px 2px 0 #111;border-color:#7cdd7c}100%{background:linear-gradient(180deg,#2a2a2a,#1a1a1a);box-shadow:2px 2px 0 #111;border-color:#333}}
.tuner-wrap{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:.85rem;padding-bottom:2rem}
.tuner-svg{width:100%;max-width:300px}
.tuner-note-display{display:flex;align-items:baseline;justify-content:center;gap:.15rem;min-height:4.5rem}
.tuner-note-name{font-size:5rem;font-family:var(--font-title);font-weight:700;line-height:1;transition:color .12s}
.tuner-octave{font-size:1.5rem;font-family:var(--font-body);color:#555;font-weight:700;align-self:flex-start;margin-top:.5rem}
.tuner-cents-display{font-size:1.05rem;font-weight:700;font-family:var(--font-body);min-height:1.6rem;letter-spacing:.04em;text-align:center}
.tuner-str-row{display:flex;gap:.45rem;justify-content:center;width:100%;max-width:320px}
.tuner-str-btn{flex:1;max-width:46px;height:48px;border-radius:12px;border:2px solid #333;box-shadow:2px 2px 0 #111;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:default;gap:2px;padding:0;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);color:#ccc}
.tuner-str-btn .str-note-name{font-size:1.1rem;font-weight:900;font-family:var(--font-title);line-height:1}
.tuner-controls-row{display:flex;align-items:center;gap:.5rem;width:100%;max-width:320px}
.tuner-preset-scroll{flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tuner-preset-row{display:flex;gap:.35rem;padding:.1rem .1rem .2rem}
.tuner-preset-btn{padding:.3rem .6rem;border-radius:8px;border:2px solid #333;font-size:.72rem;font-weight:700;font-family:var(--font-body);cursor:pointer;touch-action:manipulation;white-space:nowrap;background:linear-gradient(180deg,#1e1e1e,#151515);color:#666;transition:filter .08s}
.tuner-preset-btn:active{filter:brightness(.85)}
.tuner-mic-btn{width:100%;max-width:320px;padding:1rem;border-radius:18px;border:3px solid #111;box-shadow:5px 5px 0 #111;font-size:1.1rem;font-weight:900;font-family:var(--font-body);cursor:pointer;letter-spacing:.02em;touch-action:manipulation;transition:filter .1s}
.tuner-mic-btn:active{filter:brightness(.88);transform:scale(.98)}
.tn-circle-outer{position:relative;width:190px;height:190px;margin:1.4rem auto .1rem}
.tn-pulse-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid currentColor;pointer-events:none;width:174px;height:174px}
.tn-pulse-ring-1{animation:tnPulse 1.8s ease-out infinite}
.tn-pulse-ring-2{animation:tnPulse 1.8s ease-out .7s infinite}
.tn-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:158px;height:158px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#1c1c1c,#0d0d0d);border:2px solid #2a2a2a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;transition:border-color .25s,box-shadow .25s;z-index:2}
.tn-circle .tuner-note-name{font-size:4.2rem;white-space:nowrap}
.tn-circle-oct{font-size:.58rem;font-weight:800;color:#2a3a3a;letter-spacing:.18em;text-transform:uppercase;min-height:.8rem;transition:color .25s}
.tn-ruler-wrap{width:100%;max-width:320px}
.tn-ruler-labels{display:flex;justify-content:space-between;padding:0 2px}
.tn-ruler-flat,.tn-ruler-sharp{font-size:.85rem;font-family:serif;font-weight:700;color:#2a3a3a}
.tn-ruler-zone-outer{position:relative;height:22px}
.tn-ruler-bg{position:absolute;top:50%;left:0;right:0;height:5px;transform:translateY(-50%);background:#151515;border-radius:99px;border:1px solid #1a1a1a;overflow:hidden}
.tn-rz{position:absolute;top:0;height:100%}
.tn-rz-rl{left:0;width:20%;background:linear-gradient(90deg,#4a0e0e,#802020)}
.tn-rz-al{left:20%;width:13%;background:linear-gradient(90deg,#4a2200,#8a4500)}
.tn-rz-gl{left:33%;width:5%;background:#1a5a1a}
.tn-rz-gc{left:38%;width:24%;background:#226a22}
.tn-rz-perfect{left:44%;width:12%;background:#60dcff;box-shadow:0 0 8px #60dcff,0 0 18px #60dcff99;z-index:2}
.tn-rz-gr{left:62%;width:5%;background:#1a5a1a}
.tn-rz-ar{left:67%;width:13%;background:linear-gradient(90deg,#8a4500,#4a2200)}
.tn-rz-rr{left:80%;width:20%;background:linear-gradient(90deg,#802020,#4a0e0e)}
.tn-ruler-needle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4px;height:18px;border-radius:2px;background:#2a2a2a;transition:left .04s linear,background .2s,box-shadow .2s;pointer-events:none}
.tn-ruler-center-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3px;height:14px;border-radius:2px;background:#60dcff;box-shadow:0 0 5px #60dcff,0 0 12px #60dcff66;pointer-events:none;z-index:3}
.tn-ruler-ticks{display:flex;justify-content:space-between;align-items:flex-start;margin-top:2px}
.tn-rtick-maj{width:1.5px;height:10px;background:#252525;border-radius:1px;margin:0 auto}
.tn-rtick-min{width:1px;height:6px;background:#1a1a1a;border-radius:1px}
.tn-rtick-lbl{font-size:.5rem;font-weight:700;color:#222;font-family:var(--font-body);white-space:nowrap}