.fretboard-wrapper{padding:20px 40px;width:100%;max-width:none;margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;--base-unit:80px;--nut-width:38px;--string-height:42px;--fret-width:6px}@media (max-width:1024px){.fretboard-wrapper{--base-unit:52px;--nut-width:34px;--string-height:36px;--fret-width:5px;padding:20px}}@media (max-width:768px){.fretboard-wrapper{--base-unit:45px;--nut-width:30px;--string-height:32px;--fret-width:4px;padding:10px}.btn{padding:6px 12px;font-size:.8rem}}@media (max-width:480px){.fretboard-wrapper{--base-unit:24px;--nut-width:24px;--string-height:28px;--fret-width:3px;padding:15px 12px}.controls{gap:4px}.btn{padding:6px 10px;font-size:.75rem;width:100%}.fret-numbers{margin-top:4px}}.controls{margin-bottom:20px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.btn{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--accent);padding:8px 16px;border-radius:6px;font-weight:600;cursor:pointer;font-size:.9rem;transition:all .2s;box-shadow:0 4px 6px -1px rgba(0,0,0,.2)}.btn:hover{background-color:var(--accent);color:#0f172a;box-shadow:0 0 10px var(--accent-glow)}.btn:active{transform:translateY(1px)}.fretboard-scroll-container{width:100%;margin:0 auto;overflow-x:auto;padding-bottom:10px}.fretboard{display:grid;width:fit-content;grid-template-columns:50px minmax(0,1.431fr) minmax(0,1.351fr) minmax(0,1.275fr) minmax(0,1.203fr) minmax(0,1.136fr) minmax(0,1.072fr) minmax(0,1.012fr) minmax(0,.955fr) minmax(0,.902fr) minmax(0,.851fr) minmax(0,.803fr) minmax(0,.758fr) minmax(0,.716fr) minmax(0,.675fr) minmax(0,.638fr) minmax(0,.602fr) minmax(0,.568fr) minmax(0,.536fr) minmax(0,.506fr) minmax(0,.478fr) minmax(0,.451fr) minmax(0,.425fr);grid-template-rows:repeat(6,var(--string-height));position:relative;background-color:transparent;box-shadow:none;box-shadow:0 20px 25px -5px rgba(0,0,0,.5),0 8px 10px -6px rgba(0,0,0,.5);border-radius:0;border-radius:4px;overflow:hidden}.fretboard:before{content:"";position:absolute;top:50%;left:50%;width:200vw;height:200vw;transform:translate(-50%,-50%) rotate(90deg);background-image:url(/fretboard-wood-pale.webp);background-repeat:repeat;z-index:0;pointer-events:none}.marker{position:relative;border-radius:50%;background-image:url(/pearl.webp);background-size:1500%;background-position:50%;border:1px solid rgba(255,255,255,.4);box-shadow:0 0 4px rgba(0,0,0,.3),inset 0 0 5px rgba(255,255,255,.2);aspect-ratio:1/1;pointer-events:none;z-index:1}.marker.double,.marker.single{width:calc(var(--string-height) * .7);height:auto}.string-line{position:absolute;left:0;right:0;background:var(--string-color);box-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none;z-index:5}.fret-line{background:linear-gradient(90deg,#8a6000,#fddb92 35%,#fddb92 65%,#8a6000);z-index:2;box-shadow:-1px 0 2px rgba(0,0,0,.8),4px 0 8px rgba(0,0,0,.9)}.fret-line,.nut-line{position:absolute;top:0;bottom:0;width:var(--fret-width)}.nut-line{background:#cbd5e1;z-index:3;left:50px;box-shadow:2px 0 4px rgba(0,0,0,.4)}.note-cell{position:relative;z-index:10;cursor:pointer;width:100%;height:100%}.note-cell,.note-circle{display:flex;align-items:center;justify-content:center}.note-circle{width:min(26px,85%);height:auto;aspect-ratio:1/1;border-radius:50%;background:rgba(255,255,255,.1);opacity:0;transform:scale(.5);transition:all .2s cubic-bezier(.175,.885,.32,1.275);font-weight:700;font-size:clamp(10px,1.5vw,14px);color:transparent;border:2px solid transparent}.note-cell:hover .note-circle:not(.revealed){opacity:.5;transform:scale(.8);background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2)}.note-circle.revealed{opacity:1;transform:scale(1) rotateY(1turn);background:var(--note-revealed-bg);color:var(--note-revealed-text);border-color:var(--accent);box-shadow:0 0 15px var(--accent-glow)}.note-circle.success{background-color:#22c55e;border-color:#22c55e;box-shadow:0 0 20px rgba(34,197,94,.6)}.note-circle.error{background-color:#ef4444;border-color:#ef4444;box-shadow:0 0 20px rgba(239,68,68,.6);animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}.note-circle.memory-target{opacity:1;transform:scale(1);background-color:#60a5fa;border-color:#93c5fd;box-shadow:0 0 15px rgba(96,165,250,.8);color:transparent}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.game-hud{display:flex;gap:30px;margin-bottom:20px;align-items:center;background:rgba(30,41,59,.8);padding:15px 30px;border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 15px -3px rgba(0,0,0,.3)}.target-note{font-size:2rem;font-weight:800;color:#f8fafc;text-shadow:0 0 20px rgba(255,255,255,.2)}.score-board{display:flex;flex-direction:column;align-items:flex-start}.score-stats{font-size:.9rem;color:#94a3b8;font-weight:600}.fret-numbers{display:grid;grid-template-columns:50px minmax(0,1.431fr) minmax(0,1.351fr) minmax(0,1.275fr) minmax(0,1.203fr) minmax(0,1.136fr) minmax(0,1.072fr) minmax(0,1.012fr) minmax(0,.955fr) minmax(0,.902fr) minmax(0,.851fr) minmax(0,.803fr) minmax(0,.758fr) minmax(0,.716fr) minmax(0,.675fr) minmax(0,.638fr) minmax(0,.602fr) minmax(0,.568fr) minmax(0,.536fr) minmax(0,.506fr) minmax(0,.478fr) minmax(0,.451fr) minmax(0,.425fr);margin-top:15px}.fret-number-cell{text-align:center;color:var(--text-secondary);font-size:.85rem;font-weight:600;user-select:none}@keyframes flyToTarget{0%{transform:translate(0) scale(.5);opacity:0}10%{opacity:1;transform:translate(0) scale(1.5)}90%{opacity:1}to{transform:translate(var(--target-x),var(--target-y)) scale(.5);opacity:0}}@keyframes fallDown{0%{transform:translate(0) rotate(0deg);opacity:1}20%{opacity:1}to{transform:translate(var(--drift-x),300px) rotate(180deg);opacity:0}}