:root{--night:#0b2549;--cream:#fff6d9;--lav:#ddd5ff;--aqua:#9beae3;--gold:#ffe8a4}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#fff;background:radial-gradient(ellipse at 19% -8%,#55418d 0%,transparent 42%),radial-gradient(ellipse at 90% 67%,#175f79 0%,transparent 50%),linear-gradient(140deg,#0a1538,#15143f 55%,#0a2e43);min-height:100svh;overflow-x:hidden}button{font:inherit;cursor:pointer}a{text-decoration:none;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ffebae;outline-offset:4px}
.nav{max-width:1210px;margin:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:17px 20px;position:relative;z-index:5}.nav a{color:#fff2c9;font-size:14px;font-weight:850}.nav a:hover{text-decoration:underline}.nav .brand{font:900 21px Georgia,serif;letter-spacing:.045em;color:#ffe9b6}
main{max-width:1210px;margin:auto;padding:0 clamp(12px,2.6vw,28px) 34px}.intro{text-align:center;margin:3px auto 23px}.eyebrow{display:inline-block;font-size:11px;letter-spacing:.14em;color:#ffeac5;padding:7px 17px;border-radius:100px;border:1px solid #ffe7b26e;background:#a299ef33;font-weight:900}.intro h1{font:900 clamp(29px,5.1vw,57px)/1.12 Georgia,serif;color:#ffe8ae;letter-spacing:-.025em;margin:12px 0 9px;text-shadow:0 9px 22px #07153694}.intro h1 em{font-style:normal;background:linear-gradient(115deg,#b0ffec,#d2c3ff 60%,#fef0bc);color:transparent;background-clip:text;-webkit-background-clip:text}.intro p{max-width:690px;color:#e3e5fa;font-size:clamp(13px,1.5vw,16px);line-height:1.6;margin:0 auto}
.world{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(250px,.82fr) minmax(395px,1.26fr);align-items:stretch;gap:clamp(14px,2.6vw,32px);padding:clamp(15px,2.5vw,28px);border-radius:37px;overflow:hidden;border:2px solid #b9e4d3a1;background:radial-gradient(circle at 11% 11%,#97f5d861,transparent 34%),radial-gradient(circle at 84% 5%,#9074de55,transparent 38%),linear-gradient(149deg,#2e5684,#182e6d 54%,#133b59);box-shadow:0 23px 67px #041333c9,inset 0 2px #fff4}.world:after{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;bottom:-185px;height:330px;border-radius:50%;background:radial-gradient(ellipse at 14% 20%,#497e77,transparent 47%),radial-gradient(ellipse at 71% 35%,#346c6e,transparent 43%),linear-gradient(#28596b,#143a57)}.starfield{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 15% 23%,#ffe8a6 0 1.5px,transparent 2.5px),radial-gradient(circle at 71% 64%,#e4fffa 0 1px,transparent 2px),radial-gradient(circle at 35% 69%,#fff 0 2px,transparent 3px),radial-gradient(circle at 91% 16%,#ffffe9 0 1px,transparent 2px);background-size:163px 181px,122px 151px,241px 231px,186px 210px;opacity:.68}.rays{position:absolute;z-index:-1;inset:0;pointer-events:none;background:repeating-conic-gradient(from 190deg at 32% -34%,transparent 0deg 10deg,#c0f5da11 12deg 14deg,transparent 16deg 29deg)}
.story-side{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:0}.portrait{position:relative;width:min(100%,400px);aspect-ratio:9/11;max-height:525px;overflow:hidden;border:2px solid #ffefcbb8;border-radius:47% 47% 25% 25% / 35% 35% 20% 20%;background:#386ba0;box-shadow:0 0 0 9px #fff6d212,0 17px 40px #051d477d}.portrait:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#113d5970,transparent 36%),radial-gradient(circle at 50% 15%,#fff4ce1f,transparent 37%)}.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 49%;animation:breathing 8s ease-in-out infinite alternate}@keyframes breathing{to{transform:scale(1.035) translateY(-3px)}}.glimmer{position:absolute;font-size:40px;z-index:3;color:#ffebb6;filter:drop-shadow(0 0 12px #ffe7a5);animation:shimmer 3s ease-in-out infinite alternate}.glimmer.one{top:10%;left:12%}.glimmer.two{right:8%;bottom:25%;font-size:27px;animation-delay:1.1s}@keyframes shimmer{to{transform:rotate(26deg) scale(1.15);opacity:.45}}
.story-bubble{width:min(100%,390px);padding:14px 20px;background:linear-gradient(145deg,#fffbeffa,#e5fff3f4);border:2px solid #ffffff;border-radius:19px 26px 19px 16px;color:#386978;box-shadow:0 10px 22px #031c4a7a;transform:rotate(-1deg)}.story-bubble strong{color:#447b7f;font-size:12px;letter-spacing:.04em}.story-bubble p{font-size:clamp(13px,1.4vw,15px);font-weight:750;line-height:1.4;margin:5px 0 0}.sound-bottles{display:flex;gap:12px;justify-content:center}.sound-bottles span{display:grid;place-items:center;width:27px;height:39px;border-radius:10px 10px 13px 13px;border:1px solid #ffeab5a1;box-shadow:inset 0 0 9px #dfffe677,0 0 9px #dbf7bb4d;color:#ffebb1;background:linear-gradient(135deg,#8fe7d466,#dfb5fc52);font-size:21px;transform:rotate(var(--rot,0deg))}.sound-bottles span:nth-child(1){--rot:-9deg}.sound-bottles span:nth-child(2){--rot:5deg}.sound-bottles span:nth-child(3){--rot:-3deg}.sound-bottles span:nth-child(4){--rot:10deg}
.game{position:relative;z-index:2;align-self:center;min-width:0;width:100%;padding:clamp(15px,2.5vw,25px);background:linear-gradient(146deg,#f9fcf6fa,#eaf9f6fc 58%,#f2e9fffc);color:#425b6e;border:3px solid #f7fff8;border-radius:29px;box-shadow:0 20px 48px #091f5299,inset 0 0 0 2px #d9f3e4}.game-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.level-label{font-size:11px;letter-spacing:.13em;font-weight:950;color:#65999b}.progress{display:flex;gap:7px}.medal{display:grid;place-items:center;width:25px;height:25px;border:1px solid #b2d4ca;border-radius:50%;color:#c1b8d3;background:#e8f1ed;font-size:15px}.medal.done{color:#fff2b7;background:#5aa99c;border-color:#fff9c7;box-shadow:0 0 14px #7cddd0}.game h2{font:900 clamp(24px,3vw,34px)/1.1 Georgia,serif;text-align:center;color:#44767a;margin:13px 0 5px}.instruction{text-align:center;color:#718d90;font-size:13px;line-height:1.45;margin:0 0 10px}
.score{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;margin:0 auto 9px;min-height:65px;border-radius:17px;border:1.5px solid #cee4e4;background:repeating-linear-gradient(0deg,transparent 0 10px,#d7e1e5a2 11px,#d7e1e5a2 12px,transparent 13px 17px),linear-gradient(145deg,#fffbef,#e7f4f2);max-width:530px}.clef,.score-tail{font:900 26px Georgia,serif;color:#88aca2}.score-tail{font-size:25px;color:#c3a5db}.notes{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:nowrap;min-width:0}.note-dot{width:clamp(28px,4.6vw,42px);height:clamp(28px,4.6vw,42px);display:grid;place-items:center;border:2px dashed #b9ccca;border-radius:50%;background:#fffefb;color:#bdc7c9;font-size:18px;transition:background .2s,color .2s,transform .2s}.note-dot.done{color:#fff;background:linear-gradient(135deg,#84ccc1,#a89ed6);border:2px solid #fff;box-shadow:0 0 0 2px #b7d6d0,0 0 13px #a3d6d3}.note-dot.incoming{animation:noteBop .5s both}@keyframes noteBop{50%{transform:scale(1.2)}}.status{text-align:center;min-height:28px;color:#587e85;font-size:13px;font-weight:850;margin:6px 0 10px}
.stage{position:relative;isolation:isolate;overflow:hidden;padding:clamp(10px,2vw,22px);border-radius:25px;border:2px solid #a7d3c6;background:radial-gradient(ellipse at 50% 30%,#dafff598,transparent 54%),radial-gradient(circle at 15% 93%,#9d97df80,transparent 45%),linear-gradient(155deg,#acdee0,#96c9dc 53%,#b6a9e2);box-shadow:inset 0 0 30px #e9ffff5a,0 7px 17px #33627e37}.stage:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.6;background:radial-gradient(circle at 6% 18%,#fff 0 1px,transparent 2px),radial-gradient(circle at 93% 70%,#fff8d1 0 2px,transparent 3px);background-size:83px 102px,129px 112px}.stage-halo{position:absolute;inset:20% 12%;border:2px solid #f7ffee2f;border-radius:50%;pointer-events:none;box-shadow:0 0 70px #fff9cb35}
.pads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(9px,1.6vw,16px);max-width:455px;margin:auto}.instrument{position:relative;min-width:0;min-height:clamp(112px,12vw,147px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border:2px solid #fffee5e3;border-radius:25px;background:linear-gradient(151deg,#fffdf8fa,#fbf6fbfa 46%,var(--pad-bg,#e4f1e9));box-shadow:0 6px 0 var(--pad-edge,#b8d4d6),0 12px 24px #34576b47,inset 0 2px 0 #fff;transition:transform .14s,box-shadow .16s,filter .16s;color:#48697f;touch-action:manipulation}.instrument:disabled{cursor:default;opacity:.88}.instrument svg{width:clamp(55px,7.7vw,75px);height:clamp(55px,7.7vw,75px);overflow:visible;filter:drop-shadow(0 6px 7px #3e597043);transition:transform .2s}.instrument strong{font-size:clamp(12px,1.5vw,15px);font-weight:950;color:#435b70;margin-top:-1px}.instrument small{font-size:10px;color:#80959d;font-weight:750;margin-top:1px}.instrument .ornament{position:absolute;left:13px;top:9px;font-size:18px;color:var(--spark,#d0bb8e)}.instrument.bell{--pad-bg:#f9e3b9;--pad-edge:#deb67d;--spark:#d6a05f}.instrument.drop{--pad-bg:#d1f5fa;--pad-edge:#8fd1d8;--spark:#80c9dc}.instrument.leaf{--pad-bg:#dbefca;--pad-edge:#a2cca5;--spark:#77b79a}.instrument.star{--pad-bg:#f7d8ef;--pad-edge:#d6abd2;--spark:#c793c2}
.instrument:hover:not(:disabled),.instrument:focus-visible:not(:disabled){transform:translateY(-3px);box-shadow:0 9px 0 var(--pad-edge),0 18px 29px #34576b59}.instrument:active:not(:disabled){transform:translateY(3px);box-shadow:0 3px 0 var(--pad-edge),0 6px 15px #34576b59}
.instrument.glowing,.instrument.pressed{transform:translateY(-3px) scale(1.025)!important;filter:brightness(1.13);border-color:#fff6b6;box-shadow:0 0 0 6px #fff4b83c,0 0 30px #fff1b6,0 7px 0 var(--pad-edge),0 12px 23px #34576b50!important}.instrument.glowing svg,.instrument.pressed svg{transform:rotate(-7deg) scale(1.1)}.instrument.wrong{animation:gentleShake .35s ease-out}@keyframes gentleShake{20%,65%{transform:rotate(-3deg)}45%,80%{transform:rotate(3deg)}}.flashes{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}.floating-note{position:absolute;left:var(--fx);top:var(--fy);font-size:24px;opacity:0;color:#fff9bd;filter:drop-shadow(0 0 8px #fff);animation:floatNote 1.25s ease-out forwards}@keyframes floatNote{0%{opacity:0;transform:translateY(0) scale(.2)}22%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-90px) rotate(21deg) scale(1.2)}}
.button-row{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:17px}.button{display:inline-grid;place-items:center;min-height:39px;border:0;border-radius:100px;font-size:12px;font-weight:900;padding:11px 15px;box-shadow:0 5px 0 #8aacaa,0 8px 16px #34637640;transition:transform .13s,box-shadow .13s}.button.primary{background:linear-gradient(150deg,#ffe8aa,#ffd39c);color:#645a6b;box-shadow:0 5px 0 #c7a474,0 8px 17px #996c8b30}.button.secondary{background:linear-gradient(140deg,#e7fcf7,#d2e6f0);color:#507b83}.button:hover:not(:disabled){transform:translateY(-2px)}.button:disabled{opacity:.58;cursor:default}.button:active:not(:disabled){transform:translateY(2px)}
.finish{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border-radius:26px;border:2px solid #fff;padding:clamp(12px,2vw,22px);background:radial-gradient(circle at 53% 0%,#fff7ce,transparent 48%),linear-gradient(145deg,#e1fff5fb,#d9f1f7fd 55%,#e8dcfffd);box-shadow:inset 0 0 0 5px #ffffff81}.finish-sparkles{font-size:21px;color:#d3a26d;letter-spacing:.35em;animation:shimmer 3s alternate infinite}.finish img{width:min(100%,318px);height:clamp(90px,16vh,165px);object-fit:cover;object-position:center 45%;border:3px solid #fff;border-radius:19px;box-shadow:0 9px 22px #587c9961}.finish-kicker{color:#68a09e;font-weight:950;font-size:11px;letter-spacing:.12em}.finish h2{font:900 clamp(24px,3vw,36px)/1.1 Georgia,serif;color:#527981;margin:3px 0}.finish p{font-size:13px;color:#577884;line-height:1.5;font-weight:750;max-width:380px;margin:0 0 12px}.finish-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}[hidden]{display:none!important}.footer-note{text-align:center;color:#dbdafa;font-size:12px;line-height:1.6;margin:17px auto 0}
@media(max-width:900px){.world{grid-template-columns:1fr}.story-side{display:grid;grid-template-columns:150px minmax(0,1fr);gap:13px}.portrait{width:150px;height:155px;aspect-ratio:auto;border-radius:28px}.portrait img{animation:none}.story-bubble{width:100%;transform:none}.sound-bottles{display:none}.game{max-width:700px;margin:auto}}
@media(max-width:500px){.nav{padding:12px 8px;justify-content:center;gap:9px}.nav a{font-size:12px}.nav .brand{font-size:18px}.intro{margin-bottom:13px}.intro h1{font-size:29px}.intro p{font-size:13px}.world{padding:11px;border-radius:23px;gap:12px}.story-side{grid-template-columns:100px minmax(0,1fr);min-height:118px}.portrait{width:100px;height:117px;border-radius:19px}.story-bubble{padding:10px 12px}.story-bubble strong{font-size:11px}.story-bubble p{font-size:12px}.game{border-radius:22px;padding:13px 11px}.game h2{font-size:24px;margin:10px 0 4px}.instruction{font-size:12px}.score{padding:7px 9px;min-height:53px}.notes{gap:7px}.note-dot{width:30px;height:30px}.status{font-size:12px;min-height:30px}.stage{padding:10px;border-radius:18px}.pads{gap:9px}.instrument{min-height:110px;border-radius:18px}.instrument svg{width:59px;height:59px}.instrument strong{font-size:13px}.instrument small{font-size:10px}.button-row{gap:7px;margin-top:11px}.button{font-size:11px;padding:10px 11px}.finish img{height:90px}.finish h2{font-size:25px}.finish p{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* v139.1 — patru partituri, mini-scenă magică și butoane-instrument mai expresive */
.world{border-color:#d2f8deac;box-shadow:0 24px 75px #041333d9,inset 0 2px #ffffff66}
.story-bubble{border-color:#fff5c6;box-shadow:0 12px 28px #031c4a88,0 0 28px #d7ffe623}
.portrait{box-shadow:0 0 0 6px #fff6d221,0 0 0 11px #91dec629,0 17px 45px #051d47aa}
.game{background:linear-gradient(147deg,#fffdf6fa,#eafcf3fd 57%,#efe6fffd);border-color:#ffffe8;box-shadow:0 20px 54px #091f529e,inset 0 0 0 3px #daf4e6}
.progress{gap:6px}.medal{width:27px;height:27px;font-size:16px;border:1.5px solid #d0e4c9;background:linear-gradient(150deg,#fefbec,#e9ebe6);box-shadow:inset 0 0 7px #fff,0 3px 7px #a3c2b74d;transition:background .25s,color .25s,transform .25s}.medal.done{background:linear-gradient(150deg,#ffeaa4,#9fd7b4);color:#786e8a;box-shadow:0 0 0 2px #fef7c8,0 0 18px #d5e8a3;transform:scale(1.08)}
.rhythm-badge{display:flex;align-items:center;justify-content:center;gap:7px;margin:-2px auto 13px;width:max-content;max-width:100%;padding:5px 13px;border:1px solid #b6dbd2;border-radius:30px;background:linear-gradient(120deg,#f3f9ed,#deeffd);color:#5d8b8c;font-size:11px;letter-spacing:.03em;font-weight:950;box-shadow:0 3px 10px #75b1a31c}.rhythm-icon{color:#ca9e69;font-size:16px;line-height:1}
.score{border:2px solid #d8eadf;background:repeating-linear-gradient(0deg,transparent 0 10px,#cfddd3a8 11px,#cfddd3a8 12px,transparent 13px 17px),linear-gradient(120deg,#fff9ed,#f7fff4 48%,#f2eaff);box-shadow:inset 0 2px #fff,0 5px 12px #8cae9e2e}
.notes{gap:clamp(5px,1.2vw,10px);flex:0 1 auto}.note-dot{width:clamp(27px,3.75vw,39px);height:clamp(27px,3.75vw,39px);flex:0 0 auto;font-size:17px;background:radial-gradient(circle at 31% 25%,#fff,#f3f0ff);border-color:#b8cfc6}.note-dot.done{background:linear-gradient(135deg,#8adcc3,#b5a5e7);border-color:#fff;box-shadow:0 0 0 2px #d2e5d7,0 0 12px #8fded1}
.stage{border-color:#c8ecda;border-width:3px;box-shadow:inset 0 0 0 4px #e7ffef38,inset 0 0 45px #e9ffff75,0 9px 18px #33627e43;
background:radial-gradient(ellipse at 51% 3%,#ffffffbc,transparent 48%),radial-gradient(circle at 14% 90%,#d7b3ee93,transparent 45%),radial-gradient(circle at 96% 71%,#6fe0c466,transparent 38%),linear-gradient(152deg,#b9e7d5,#a4d8d9 55%,#b2b4e7)}
.stage:after{content:"";position:absolute;left:-5%;right:-5%;bottom:-26%;height:38%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse at 52% 14%,#e9ffd4ad,transparent 66%),linear-gradient(0deg,#69b5a078,#86d7bb65);border-top:2px solid #effedb69;pointer-events:none}
.stage-halo{inset:10% 4%;border-color:#fff5bb7a;box-shadow:0 0 35px #fff9cbbb,0 0 80px #fff9cb5a;opacity:.7}
.forest-notes{position:absolute;inset:0;pointer-events:none;z-index:0}
.forest-notes span{position:absolute;color:#fff8d8;font-size:clamp(12px,2vw,20px);text-shadow:0 0 14px #fff9ce;opacity:.72;animation:forestTwinkle 3.5s ease-in-out infinite alternate}
.forest-notes span:nth-child(1){top:9%;left:8%;animation-delay:.4s}
.forest-notes span:nth-child(2){top:28%;right:9%;animation-delay:1s}
.forest-notes span:nth-child(3){bottom:12%;left:10%;animation-delay:1.7s}
.forest-notes span:nth-child(4){bottom:13%;right:10%;animation-delay:2.2s}
.forest-notes span:nth-child(5){top:8%;right:39%;animation-delay:.8s}
@keyframes forestTwinkle{0%{opacity:.34;transform:translateY(4px) rotate(-11deg) scale(.8)}100%{opacity:1;transform:translateY(-5px) rotate(9deg) scale(1.16)}}
.pads{position:relative;z-index:1}
.instrument{border:2px solid #fffffffa;box-shadow:0 6px 0 var(--pad-edge,#b8d4d6),0 12px 25px #34576b5b,inset 0 2px 0 #fff,inset 0 -8px 24px #fff9}
.instrument:before{content:"";position:absolute;inset:7px 8px auto;height:32%;border-radius:20px 20px 45% 45%;background:linear-gradient(170deg,#fff7,transparent);pointer-events:none}
.instrument svg{position:relative;z-index:1;filter:drop-shadow(0 7px 8px #3e59704f)}
.instrument strong{position:relative;z-index:1;color:#415f73;text-shadow:0 1px #fff}
.instrument .ornament{color:var(--spark,#d0bb8e);font-size:20px;text-shadow:0 0 8px #fff}
.instrument.glowing,.instrument.pressed{border-color:#fff7b6;box-shadow:0 0 0 5px #fff4b85c,0 0 34px #fff1b6,0 7px 0 var(--pad-edge),0 12px 23px #34576b50!important}
.stage.performing .instrument:not(.glowing){filter:saturate(.78);opacity:.75}
.stage.success{box-shadow:inset 0 0 0 4px #fffce4a6,0 0 40px #fff8c8ab}
.stage.success .forest-notes span{color:#fffef6;text-shadow:0 0 25px #fff4b4}
.finish{background:radial-gradient(circle at 50% -5%,#fff8cd,transparent 46%),radial-gradient(circle at 12% 90%,#b9ffdd78,transparent 45%),linear-gradient(145deg,#e7fff3,#daf5f5 55%,#ebe5ff)}
.finish-ribbon{color:#9b8ac9;letter-spacing:.65em;font-size:15px;max-width:100%;white-space:nowrap;opacity:.82}
@media(max-width:500px){.progress{gap:4px}.medal{width:23px;height:23px;font-size:14px}.game h2{font-size:23px}.rhythm-badge{margin:0 auto 8px;font-size:10px}.score{gap:5px;padding:7px 5px}.clef{font-size:20px}.score-tail{font-size:19px}.notes{gap:5px}.note-dot{width:clamp(24px,6.5vw,31px);height:clamp(24px,6.5vw,31px);font-size:14px}.stage{padding:9px}.forest-notes span{font-size:13px}.instrument{min-height:111px}}
@media(max-width:360px){.note-dot{width:23px;height:23px}.notes{gap:3px}.score{gap:4px}.medal{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.forest-notes span{animation:none!important}}