.harp-stage{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;border:7px solid white;border-radius:30px;background:url('assets/david-musico-rey.webp') center/cover no-repeat;box-shadow:0 22px 60px #173d3035}.harp-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#142b2766,#102c2588 28%,#102c2592 72%,#25172255)}
.harp-lanes{position:absolute;z-index:2;left:31%;top:4%;bottom:4%;width:39%;display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:2px solid #ffe2a466;border-radius:24px;background:#102d286e;backdrop-filter:blur(2px)}.harp-lane{position:relative;border:0;border-right:1px solid #ffeac84d;background:transparent;color:white;cursor:pointer}.harp-lane:last-of-type{border-right:0}.harp-lane .string{position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);background:linear-gradient(#fff2c5,#eab94a,#fff2c5);box-shadow:0 0 8px #ffd456}.harp-lane b{position:absolute;z-index:5;left:50%;bottom:2.5%;transform:translateX(-50%);display:grid;place-items:center;width:52px;height:52px;border:3px solid #fff;border-radius:50%;background:#7846a8;color:white;box-shadow:0 5px 18px #0008}.harp-lane.pluck .string{animation:stringPluck .32s}.hit-zone{position:absolute;z-index:3;left:0;right:0;top:73%;height:15%;display:grid;place-items:center;border-top:3px solid #ffd45c;border-bottom:3px solid #ffd45c;background:#ffc84e24;color:#fff8d0;font-size:.72rem;font-weight:900;pointer-events:none;text-transform:uppercase;letter-spacing:.08em}.falling-note{position:absolute;z-index:5;top:-12%;transform:translateX(-50%);display:grid;place-items:center;width:52px;height:52px;border:3px solid white;border-radius:50%;background:#ffcf48;color:#4d2a62;font-size:2rem;font-style:normal;font-weight:900;box-shadow:0 0 20px #ffd557;animation:noteFall 3.2s linear forwards;pointer-events:none}.falling-note.caught{background:#58cf86;box-shadow:0 0 30px #adffc8}
.harp-ready{position:absolute;z-index:8;inset:0;display:grid;place-content:center;justify-items:center;padding:24px;background:#132f2bc7;color:white;text-align:center;transition:.35s}.harp-ready.hidden{opacity:0;visibility:hidden}.harp-ready>span{font-size:4rem}.harp-ready h2{margin:5px;font-size:clamp(1.8rem,4vw,3rem)}.harp-ready p{max-width:520px;margin:5px 0 20px;line-height:1.5}.harp-message{position:absolute;z-index:9;left:50%;top:48%;transform:translate(-50%,-50%) scale(.6);padding:12px 20px;border-radius:999px;background:#173f38e8;color:white;font-size:1.15rem;font-weight:950;opacity:0;pointer-events:none}.harp-message.show{animation:harpPop .42s}.harp-message.hit{background:#278d52}.harp-message.miss{background:#a94738}.harp-status{display:flex;justify-content:space-between;margin-top:14px;padding:15px 20px;border-radius:20px;background:white;box-shadow:0 12px 35px #173d3022}.harp-status span{color:#a94738;font-weight:800}
@keyframes noteFall{to{top:102%}}@keyframes stringPluck{35%{transform:translateX(-50%) skewX(7deg)}70%{transform:translateX(-50%) skewX(-5deg)}}@keyframes harpPop{45%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:700px){.harp-stage{aspect-ratio:10/12;background-position:40% center}.harp-lanes{left:8%;width:84%;top:6%;bottom:5%}.harp-lane b{width:45px;height:45px}.falling-note{width:44px;height:44px;font-size:1.65rem}.harp-ready p{font-size:.9rem}.harp-status{font-size:.88rem}}
.harp-loading{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 34%,#f2d3ff,transparent 30%),#173f38;color:#fff;text-align:center}.harp-loading>div{display:grid;justify-items:center;gap:10px}.harp-loading>div>span{font-size:5rem;animation:harpFloat .65s ease-in-out infinite alternate}.harp-loading strong{font-size:clamp(1.4rem,5vw,2rem)}.harp-loading small{color:#dcefe8}.loading-strings{display:flex;gap:9px;height:38px;align-items:end;margin-top:8px}.loading-strings i{display:block;width:4px;height:24px;border-radius:99px;background:#f6bd4c;transform-origin:bottom;animation:tuneString .55s ease-in-out infinite alternate}.loading-strings i:nth-child(2){height:31px;animation-delay:.12s}.loading-strings i:nth-child(3){height:37px;animation-delay:.24s}.loading-strings i:nth-child(4){height:28px;animation-delay:.36s}@keyframes harpFloat{to{transform:translateY(-8px) rotate(-4deg)}}@keyframes tuneString{to{transform:scaleY(.5);background:#fff0ad}}
.falling-note{animation-duration:2.85s}