:root{
  --yellow:#ffd43d;
  --orange:#ee9e10;
  --ink:#173c59;
  --blue:#248fd0;
  --red:#e84550;
  --green:#38a65b;
  --panel-border:#e99a0d;
  --shadow:0 8px 20px rgba(91,55,10,.22);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#72cff3;font-family:"Trebuchet MS",Arial,sans-serif;color:#173c59}
button,a{font:inherit}
button{touch-action:manipulation}
.hidden{display:none!important}

.orientation-hint{display:none;position:fixed;inset:0;z-index:9999;background:#fff9e8;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;padding:28px;color:#1d5d8c}
.orientation-hint .rotate-phone{font-size:56px;font-weight:900;line-height:1}
.orientation-hint strong{font-size:24px}
.orientation-hint span{font-size:16px;color:#5e7485}

.intro-screen{position:fixed;inset:0;z-index:900;background:#fff;display:grid;place-items:center;opacity:1;transition:opacity .35s ease}
.intro-screen.fade-out{opacity:0;pointer-events:none}
.intro-screen video{width:100%;height:100%;object-fit:contain;background:#fff}

.app{position:fixed;inset:0;overflow:hidden;user-select:none;touch-action:none;background:#72cff3;container-type:size}
.scene-bg{position:absolute;inset:0;background:url('assets/season_bg.jpg') center center/cover no-repeat;z-index:0}
.scene-tint{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(113,205,242,.05) 0%,rgba(255,255,255,.04) 35%,rgba(255,231,121,.10) 61%,rgba(255,188,51,.14) 100%);pointer-events:none}

.top-scene{position:absolute;z-index:20;left:1.2%;right:1.2%;top:1.2%;height:28%;pointer-events:none}
.logo-button{pointer-events:auto;position:absolute;left:0;top:0;width:min(13cqw,21cqh);aspect-ratio:1;border:0;background:transparent;padding:0;cursor:pointer;filter:drop-shadow(0 6px 4px rgba(0,0,0,.16));transition:transform .12s ease}
.logo-button:active{transform:scale(.96)}
.logo-button img{width:100%;height:100%;object-fit:contain;display:block}
.top-links{pointer-events:auto;position:absolute;left:50%;top:3.5%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:min(1.1cqw,2.1cqh);white-space:nowrap}
.link-pill{display:flex;align-items:center;justify-content:center;min-width:10.5cqw;padding:min(.68cqw,1.4cqh) min(1.05cqw,2cqh);border:min(.26cqw,.55cqh) solid rgba(255,255,255,.95);border-radius:999px;text-decoration:none;color:#fff;font-size:min(1.45cqw,2.9cqh);font-weight:900;line-height:1;box-shadow:0 min(.28cqw,.55cqh) 0 rgba(0,0,0,.15),inset 0 2px 2px rgba(255,255,255,.25);text-shadow:0 1px 1px rgba(0,0,0,.17)}
.link-pill.red{background:#e4424c}.link-pill.blue{background:#3c7cc8}.link-pill.green{background:#35a55c}
.version-badge{position:absolute;left:.25%;bottom:4%;font-size:min(.82cqw,1.65cqh);font-weight:900;color:rgba(29,78,101,.72);background:rgba(255,255,255,.73);padding:.35em .65em;border-radius:999px;box-shadow:0 2px 5px rgba(0,0,0,.08)}

.decor{position:absolute;z-index:7;pointer-events:none}
.smiling-sun{left:16%;top:7%;width:min(7.4cqw,14.8cqh);filter:drop-shadow(0 5px 5px rgba(147,100,0,.16));animation:sunBob 3.2s ease-in-out infinite alternate}
@keyframes sunBob{to{transform:translateY(.7cqh) rotate(2deg)}}
.cartoon-plane{top:12%;width:min(11cqw,22cqh);filter:drop-shadow(0 4px 4px rgba(20,60,80,.2));animation:planeFly 22s linear infinite}
@keyframes planeFly{from{left:-14%}to{left:104%}}
.balloon{right:17%;top:5.8%;width:min(4.3cqw,8.6cqh);animation:balloonBob 4s ease-in-out infinite alternate;filter:drop-shadow(0 4px 4px rgba(90,50,20,.15))}
@keyframes balloonBob{to{transform:translate(.5cqw,.8cqh) rotate(2deg)}}
.decor-cloud{width:min(7.8cqw,15.6cqh);height:min(2.2cqw,4.4cqh);border-radius:999px;background:rgba(255,255,255,.94);filter:drop-shadow(0 3px 3px rgba(42,97,125,.14))}
.decor-cloud:before,.decor-cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}
.decor-cloud:before{width:42%;aspect-ratio:1;left:16%;top:-58%}
.decor-cloud:after{width:49%;aspect-ratio:1;right:12%;top:-78%}
.cloud-1{top:9%;animation:cloudMove1 45s linear infinite}
.cloud-2{top:20%;transform:scale(.72);animation:cloudMove2 62s linear infinite -24s}
.cloud-3{top:16%;transform:scale(.88);animation:cloudMove3 74s linear infinite -50s}
@keyframes cloudMove1{from{left:-12%}to{left:108%}}
@keyframes cloudMove2{from{left:105%}to{left:-13%}}
@keyframes cloudMove3{from{left:-16%}to{left:109%}}

.instrument-panel{position:absolute;z-index:30;left:3.2%;right:3.2%;top:30%;height:25%;display:grid;grid-template-columns:repeat(7,1fr);gap:.65%;padding:min(1.05cqw,2.1cqh);background:linear-gradient(#ffe56d,#ffc52d);border:min(.42cqw,.84cqh) solid var(--panel-border);border-radius:min(2.4cqw,4.8cqh);box-shadow:var(--shadow)}
.instrument-card{min-width:0;min-height:0;border:0;border-radius:min(1.35cqw,2.7cqh);position:relative;overflow:hidden;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 2px rgba(255,255,255,.34),0 4px 0 rgba(90,80,20,.13);transition:transform .08s ease,filter .12s ease,box-shadow .12s ease}
.instrument-card:nth-child(1){background:#49afe5}.instrument-card:nth-child(2){background:#f3aa2e}.instrument-card:nth-child(3){background:#ee78a1}.instrument-card:nth-child(4){background:#86d34f}.instrument-card:nth-child(5){background:#a768dc}.instrument-card:nth-child(6){background:#4ba9e1}.instrument-card:nth-child(7){background:#4ab99d}
.instrument-card img{position:absolute;top:6%;width:61%;height:59%;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(0,0,0,.16));pointer-events:none}
.instrument-card span{position:absolute;left:8%;right:8%;bottom:6%;height:23%;display:flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(20,100,165,.76);color:#fff;font-size:min(1.18cqw,2.35cqh);font-weight:900;text-shadow:0 1px 1px rgba(0,0,0,.2);pointer-events:none}
.instrument-card:nth-child(2) span{background:#d17b08}.instrument-card:nth-child(3) span{background:#cf4677}.instrument-card:nth-child(4) span{background:#35a641}.instrument-card:nth-child(5) span{background:#7749c0}.instrument-card:nth-child(7) span{background:#248a75}
.instrument-card.active{box-shadow:inset 0 0 0 min(.42cqw,.84cqh) #fff,0 5px 0 rgba(90,80,20,.15);filter:saturate(1.08) brightness(1.04)}
.instrument-card:active{transform:translateY(2px) scale(.985)}

.keyboard-console{position:absolute;z-index:40;left:2.1%;right:2.1%;bottom:1.7%;height:41%;display:grid;grid-template-columns:clamp(92px,8.1%,138px) minmax(0,1fr) clamp(98px,8.6%,146px);gap:.7%;align-items:center;padding:min(.8cqw,1.6cqh);background:linear-gradient(#ffe25a,#ffba20);border:min(.46cqw,.92cqh) solid var(--panel-border);border-radius:min(2.4cqw,4.8cqh);box-shadow:0 min(.48cqw,.96cqh) min(.7cqw,1.4cqh) rgba(88,51,6,.25)}
.control-column{height:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:6.5%}
.left-controls{padding:0 5%}.right-controls{padding:0 2%}
.control-btn{border:0;color:#fff;font-weight:900;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 min(.28cqw,.56cqh) 0 rgba(78,55,15,.23),inset 0 2px 2px rgba(255,255,255,.18);transition:transform .08s ease,filter .15s ease}
.control-btn:active:not(:disabled){transform:translateY(2px)}
.toggle-btn{height:34%;border-radius:min(1.05cqw,2.1cqh);background:linear-gradient(#526671,#2a3944);padding:5% 4% 4%}
.toggle-btn.echo{background:linear-gradient(#3d96d9,#246cad)}
.toggle-btn b{font-size:min(.78cqw,1.55cqh);line-height:1.05;margin-top:2%}
.control-icon{width:min(2.1cqw,4.2cqh);height:min(2.1cqw,4.2cqh);display:grid;place-items:center;line-height:1}
.control-icon svg{width:100%;height:100%;display:block}
.toggle-track{width:64%;height:min(.72cqw,1.44cqh);min-height:8px;margin-top:5%;background:#15212a;border-radius:999px;box-shadow:inset 0 2px 3px rgba(0,0,0,.5);position:relative}
.toggle-track i{position:absolute;top:8%;left:3%;height:84%;aspect-ratio:1;border-radius:50%;background:linear-gradient(#fff,#c4cbd0);box-shadow:0 1px 2px rgba(0,0,0,.35);transition:left .16s ease}
.toggle-btn[aria-pressed="true"] .toggle-track{background:#173d25}
.toggle-btn[aria-pressed="true"] .toggle-track i{left:auto;right:3%}
.toggle-btn[aria-pressed="true"]{filter:brightness(1.12)}

.action-btn{height:26%;border-radius:min(1.0cqw,2cqh);gap:4%;padding:4% 2%}
.action-btn b{font-size:min(.69cqw,1.36cqh);line-height:1.02}
.action-btn.score{background:linear-gradient(#4ca8e7,#277dbb)}
.action-btn.record{background:linear-gradient(#f15a62,#c52132)}
.action-btn.play{background:linear-gradient(#55bd75,#28904a)}
.action-btn:disabled{filter:grayscale(.75);opacity:.54;cursor:default;box-shadow:0 2px 0 rgba(80,60,20,.16)}
.record-dot{width:min(1.7cqw,3.4cqh);height:min(1.7cqw,3.4cqh);border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.action-btn.record.recording .record-dot{border-radius:18%;width:min(1.55cqw,3.1cqh);height:min(1.55cqw,3.1cqh)}
.play-triangle{width:0;height:0;border-top:min(.82cqw,1.64cqh) solid transparent;border-bottom:min(.82cqw,1.64cqh) solid transparent;border-left:min(1.25cqw,2.5cqh) solid #fff;margin-left:8%}
.action-btn.play.playing .play-triangle{width:min(1.35cqw,2.7cqh);height:min(1.35cqw,2.7cqh);border:0;background:#fff;margin:0}

.keyboard-frame{height:100%;min-width:0;background:linear-gradient(#c8891b,#925c0d);border-radius:min(1.25cqw,2.5cqh);padding:min(.65cqw,1.3cqh) min(.55cqw,1.1cqh) min(.9cqw,1.8cqh);box-shadow:inset 0 4px 8px rgba(83,47,5,.28)}
.keyboard{position:relative;width:100%;height:100%;touch-action:none;overflow:hidden;border-radius:0 0 min(.6cqw,1.2cqh) min(.6cqw,1.2cqh);background:#d7d7d7}
.white-key{position:absolute;top:0;height:100%;border:1px solid #9b9b9b;border-top:0;background:linear-gradient(90deg,#f8f8f5 0%,#fff 45%,#f0f0ed 100%);box-shadow:inset -2px 0 0 rgba(0,0,0,.05),0 5px 4px rgba(59,42,22,.2);cursor:pointer;transform-origin:top;transition:transform .045s ease,filter .06s ease;border-radius:0 0 min(.45cqw,.9cqh) min(.45cqw,.9cqh);overflow:hidden}
.white-key.pressed{transform:translateY(min(.42cqw,.84cqh));filter:brightness(.94);box-shadow:0 1px 2px rgba(59,42,22,.18)}
.color-band{position:absolute;left:0;right:0;bottom:0;height:24%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:1000;font-size:min(1.24cqw,2.45cqh);text-shadow:0 1px 2px rgba(0,0,0,.27)}
.black-key{position:absolute;top:0;height:57%;z-index:5;border:1px solid #070809;border-top:0;border-radius:0 0 min(.3cqw,.6cqh) min(.3cqw,.6cqh);background:linear-gradient(90deg,#20252a,#050607 48%,#30363b);box-shadow:0 min(.48cqw,.96cqh) min(.22cqw,.44cqh) rgba(0,0,0,.44),inset 0 -3px 3px rgba(255,255,255,.05);color:#fff;font-size:min(.7cqw,1.4cqh);font-weight:900;padding-top:min(.65cqw,1.3cqh);cursor:pointer;transition:transform .045s ease}
.black-key.pressed{transform:translateY(min(.38cqw,.76cqh))}
.white-key.lesson-target:after{content:"";position:absolute;inset:min(.2cqw,.4cqh);border:min(.4cqw,.8cqh) solid #ef2634;border-radius:min(.42cqw,.84cqh);box-shadow:0 0 min(1.2cqw,2.4cqh) #ff2531,inset 0 0 min(.55cqw,1.1cqh) rgba(255,20,30,.25);pointer-events:none;animation:lessonPulse .6s ease-in-out infinite alternate}
@keyframes lessonPulse{to{box-shadow:0 0 min(1.8cqw,3.6cqh) #ff1425,inset 0 0 min(.9cqw,1.8cqh) rgba(255,20,30,.38)}}

.lesson-panel{position:absolute;z-index:100;left:17%;right:17%;top:7%;min-height:18%;display:grid;grid-template-columns:minmax(150px,1.05fr) 2.2fr auto;align-items:center;gap:min(1.3cqw,2.6cqh);padding:min(.75cqw,1.5cqh) min(3.8cqw,7.6cqh) min(.75cqw,1.5cqh) min(1.1cqw,2.2cqh);background:rgba(255,254,247,.97);border:min(.28cqw,.56cqh) solid #ffbf24;border-radius:min(1.35cqw,2.7cqh);box-shadow:0 8px 24px rgba(0,0,0,.19)}
.lesson-panel.wrong{border-color:#e94248;animation:shake .19s linear 2}
.lesson-label{display:block;font-size:min(.72cqw,1.4cqh);font-weight:1000;letter-spacing:.18em;color:#e18d00}
.lesson-copy h2{font-size:min(1.48cqw,2.95cqh);margin:.12em 0 0;color:#245f92;line-height:1.05}
.lesson-close{position:absolute;right:min(.65cqw,1.3cqh);top:min(.52cqw,1.04cqh);width:min(3.1cqw,6.2cqh);height:min(3.1cqw,6.2cqh);min-width:38px;min-height:38px;border:0;border-radius:50%;background:#e84a50;color:#fff;font-size:min(2cqw,4cqh);font-weight:1000;line-height:1;cursor:pointer;box-shadow:0 3px 0 rgba(130,20,20,.2)}
.lesson-notes{display:flex;align-items:center;justify-content:center;gap:min(.58cqw,1.16cqh);min-width:0}
.note-chip{width:min(2.05cqw,4.1cqh);height:min(2.05cqw,4.1cqh);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:min(.82cqw,1.64cqh);font-weight:1000;box-shadow:0 2px 3px rgba(0,0,0,.17);flex:0 0 auto}
.note-chip.current{transform:scale(1.38);outline:min(.25cqw,.5cqh) solid #ee2633;box-shadow:0 0 min(.8cqw,1.6cqh) #ff2431}
.note-chip.done{opacity:.38}
.lesson-progress{font-size:min(.75cqw,1.5cqh);font-weight:900;color:#516c7d;white-space:nowrap}
.lesson-complete{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,254,247,.98);border-radius:inherit;color:#2b9c55;font-size:min(2.1cqw,4.2cqh);font-weight:1000}
@keyframes shake{25%{transform:translateX(-.35cqw)}75%{transform:translateX(.35cqw)}}

.toast{position:absolute;z-index:150;left:50%;bottom:3.2%;transform:translateX(-50%) translateY(8px);background:rgba(24,42,53,.9);color:#fff;border-radius:999px;padding:.52em 1em;font-size:min(.92cqw,1.85cqh);font-weight:900;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;box-shadow:0 5px 15px rgba(0,0,0,.18)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.modal{position:fixed;inset:0;z-index:1200;background:rgba(10,28,40,.58);display:grid;place-items:center;padding:2.2vmin}
.modal-card{position:relative;background:#fffdf6;border:5px solid #ffc52d;border-radius:28px;box-shadow:0 20px 70px rgba(0,0,0,.34);max-height:93vh;overflow:auto}
.modal-close{position:absolute;right:16px;top:14px;width:52px;height:52px;border:0;border-radius:50%;background:#e84950;color:#fff;font-size:36px;font-weight:1000;line-height:1;cursor:pointer;box-shadow:0 4px 0 rgba(133,20,25,.18)}
.song-modal-card{width:min(760px,82vw);padding:34px 52px 40px;text-align:center}
.song-modal-card h2{font-size:42px;line-height:1.05;margin:4px 50px 8px;color:#2469a3}
.song-modal-card>p{font-size:18px;line-height:1.4;color:#586e7d;margin:0 auto 22px;max-width:580px}
.song-list{display:grid;gap:12px}
.song-list button{border:0;border-radius:18px;padding:16px 20px;color:#fff;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:20px;box-shadow:0 4px 0 rgba(0,0,0,.12)}
.song-list button:nth-child(1){background:#36a1da}.song-list button:nth-child(2){background:#42aa62}.song-list button:nth-child(3){background:#9158ce}
.song-list span{font-size:13px;opacity:.82;font-weight:800}
.about-card{width:min(1280px,92vw);padding:30px 54px 34px}
.about-card h2{text-align:center;color:#2469a3;font-size:46px;line-height:1.05;margin:2px 58px 10px}
.about-lead{text-align:center;font-size:21px;line-height:1.42;color:#526b7c;max-width:1000px;margin:0 auto 24px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px}
.about-grid h3{font-size:28px;color:#2a70a8;margin:5px 0 12px}
.about-grid p{font-size:18px;line-height:1.5;margin:10px 0;color:#445f70}
.about-grid b{color:#d64a3b}
.good-wish{font-weight:1000!important;color:#2c9952!important}
.modal-ok{display:block;margin:22px auto 0;border:0;border-radius:999px;background:#2d8fd0;color:#fff;font-weight:1000;font-size:19px;padding:12px 38px;cursor:pointer;box-shadow:0 4px 0 #17669a}

@media (max-width:1050px){
  .top-links{gap:.7cqw}
  .keyboard-console{grid-template-columns:clamp(82px,8.3%,110px) minmax(0,1fr) clamp(86px,8.7%,116px)}
  .instrument-panel{left:2.3%;right:2.3%}
  .lesson-panel{left:11%;right:11%}
}
@media (max-height:560px) and (orientation:landscape){
  .instrument-panel{top:27.5%;height:26.5%}
  .keyboard-console{height:43%}
  .top-links{top:1%}
  .logo-button{width:min(11cqw,22cqh)}
}
@media (max-aspect-ratio:1/1) and (orientation:portrait){
  .orientation-hint{display:flex}
  .app,.intro-screen,.modal{display:none!important}
}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;gap:10px}
  .about-card{padding:24px 28px 28px}
  .about-card h2{font-size:34px}
  .about-lead{font-size:17px}
  .about-grid p{font-size:16px}
}


/* Mazsola Klub site fullscreen override */
html,body{width:100%!important;height:100%!important;min-height:100%!important;margin:0!important;overflow:hidden!important;background:#75d6ff!important}
#stage{position:relative!important;width:100vw!important;height:100vh!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;top:0!important;transform:none!important;overflow:hidden!important}
#intro{width:100vw!important;height:100vh!important;height:100dvh!important}