:root{font-family:"Avenir Next","Trebuchet MS",sans-serif;color:#403856;background:#fbf4e5;font-synthesis:none;--ink:#403856;--purple:#696096;--pink:#ef938d}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 4% 4%,#ffe3bd 0,transparent 29%),radial-gradient(circle at 94% 88%,#efd8e9 0,transparent 28%),#fbf4e5}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #654399;outline-offset:4px}button:disabled{cursor:default}button:active{transform:translateY(2px)}.game-shell{max-width:1336px;margin:auto;padding:18px 24px 0}.topbar{margin-bottom:18px;min-height:55px}.brand{display:flex;align-items:center;gap:13px}.brand-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:17px;background:#e4d8ee;font-size:36px;transform:rotate(-8deg);color:#766393}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:850;margin:0 0 3px}.brand h1{font-size:29px;letter-spacing:-1px;line-height:1.08;margin:0}.header-stamp{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:#756780}.header-stamp>span{color:#d29b39;font-size:25px}.concert-layout{display:grid;grid-template-columns:minmax(0,1fr) 278px;gap:20px}.concert{min-width:0;border:1px solid #d8ccd7;border-radius:25px;overflow:hidden;box-shadow:0 7px 0 #e9dfd4;background:#fffaf0}.scene{height:246px;position:relative;background:#d1e9e6;overflow:hidden}.bandstand{width:100%;height:100%;display:block}.scene-label{position:absolute;left:18px;top:16px;font-size:9px;font-weight:850;letter-spacing:1.2px;display:flex;align-items:center;gap:6px;background:#fff9e9df;border-radius:20px;padding:8px 10px;z-index:1}.live-dot{width:6px;height:6px;border-radius:50%;background:#e77a73}.note-bubble{position:absolute;right:20px;top:65px;width:99px;height:95px;background:#fff9e9;border:2px solid #e5ccab;border-radius:28px 28px 28px 6px;transform:rotate(7deg);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 5px 0 #9ebdb631;z-index:1}.note-bubble>span{font-size:39px;font-weight:800;line-height:1.1;color:var(--bubble-color,#9a72ad)}.note-bubble small{font-size:9px;font-weight:900;letter-spacing:1px}.music-ribbon{height:65px;padding:10px 19px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #f5d7ab;border-bottom:1px solid #e1d7e1;background:#fff9eb}.ribbon-title{min-width:190px;display:flex;flex-direction:column;gap:3px}.ribbon-title>span{font-size:8px;letter-spacing:1.4px;font-weight:850;color:#8c7490}.ribbon-title>strong{font-size:15px;line-height:1.15}.note-trail{display:flex;gap:7px;overflow:hidden;align-items:center;justify-content:flex-end;min-width:0}.welcome-trail{font-family:Georgia,serif;font-style:italic;font-size:21px;color:#ae8099;white-space:nowrap}.trail-note{flex-shrink:0;width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--note-color) 24%,#fff);font-size:13px;font-weight:850;border:1px solid #ffffff}.trail-note.next{border:2px solid #736088;box-shadow:0 2px 0 #736088}.instrument{height:210px;background:#645887;padding:0 16px 15px;border-bottom:7px solid #4c416d}.piano-top{height:30px;display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#eee4f0;letter-spacing:1.5px;font-weight:800;padding:0 3px}.piano-top i{font-style:normal;color:#f3c975;margin-left:6px}.piano-top>span:last-child{font-size:8px;letter-spacing:.8px}.piano{height:164px;position:relative;touch-action:none;user-select:none}.white-keys{height:100%;display:flex;gap:4px}.piano-key{border:0;touch-action:none;user-select:none;position:relative;display:flex;align-items:center;flex-direction:column;transition:transform .08s,background .08s}.piano-key.white{flex:1;min-width:0;background:linear-gradient(#fffdf8 35%,color-mix(in srgb,var(--active-color) 19%,#fff));border-radius:4px 4px 11px 11px;border-bottom:7px solid color-mix(in srgb,var(--active-color) 50%,#d8cfde);padding:89px 0 5px;box-shadow:inset 0 0 0 1px #ffffffb8}.white .note-name{font-size:21px;line-height:1.1;color:#655575;font-weight:850}.white .solfege{font-size:10px;font-weight:750;color:#78687e}.key-letter{font-size:9px;font-weight:800;opacity:.65;margin-top:auto}.white:after{position:absolute;content:"";height:5px;left:20%;right:20%;bottom:68px;border-radius:8px;background:var(--active-color)}.black-keys{position:absolute;inset:0;pointer-events:none}.piano-key.black{position:absolute;pointer-events:auto;width:7.6%;height:99px;top:0;border-radius:0 0 7px 7px;background:linear-gradient(105deg,#615570,#352e4a);color:#fff5e6;box-shadow:0 4px 0 #2e263f,inset 0 -9px 0 #736580;padding:53px 0 12px;z-index:2}.black .note-name{font-size:11px;font-weight:800}.black .key-letter{font-size:8px;line-height:1}.piano-key.is-active,.piano-key.is-song{background:var(--active-color);transform:translateY(4px);box-shadow:inset 0 0 0 3px #fff5d3}.piano-key.is-expected{outline:3px solid #7c4ab2;outline-offset:-5px;box-shadow:inset 0 0 0 6px #ffe988}.piano-key.is-expected:before{content:"▼";position:absolute;top:110px;left:8px;font-size:14px;color:#694892}.piano-key.black.is-expected:before{top:30px;left:calc(50% - 6px);color:#ffe988}.keyboard-caption{height:33px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:10px;font-size:9px;color:#827286}.keyboard-caption b{font-size:8px;letter-spacing:.5px}.setlist{border-radius:24px;border:1px solid #e6d9da;background:#fffdf6;padding:20px 16px 15px;box-shadow:0 7px 0 #e9dfd4;display:flex;flex-direction:column}.setlist-heading h2{font-size:26px;letter-spacing:-1px;margin:2px 0 5px;display:flex;align-items:center;justify-content:space-between}.setlist-heading h2 span{font-size:27px;color:#e6b153}.setlist-heading>p:last-child{font-size:11px;margin:0 0 15px;color:#8b7b8e}.mode-switch{display:grid;grid-template-columns:1fr 1fr;border-radius:12px;background:#ede6f0;padding:4px;gap:3px}.mode-switch button{border:0;background:transparent;border-radius:9px;padding:9px 4px;font-size:11px;font-weight:850;color:#8a7993}.mode-switch button.selected{background:#71618f;color:#fff8ef;box-shadow:0 2px 3px #54436824}.mode-hint{font-size:10px;line-height:1.4;margin:10px 2px 13px;color:#877587;min-height:28px}.songs{display:flex;flex-direction:column;gap:8px}.song-button{display:flex;align-items:center;gap:10px;text-align:left;width:100%;border:1px solid #e6dbe1;border-radius:13px;background:#fffdf8;padding:7px 9px;min-height:60px;transition:background .15s,transform .15s}.song-button:hover{background:#f5edf7;transform:translateX(-2px)}.song-button.is-playing{border-color:#9480b4;background:#eee5f5;box-shadow:0 0 0 1px #9480b4}.song-art{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:31px}.song-art svg{width:35px;height:35px}.star-art{color:#bb8439;background:#ffe4a7}.lamb-art{background:#e5d9ed}.joy-art{background:#ffe1c7;color:#d5854b}.scale-art{background:#ceeadc;color:#609987}.song-button strong{font-size:13px;display:block}.song-button small{font-size:9px;color:#8e7b8e;display:block;margin-top:3px;white-space:nowrap}.song-play{font-size:9px;color:#9d8cab;margin-left:auto}.stop-button{border:1px solid #dfd4e0;background:#fffaf0;font-size:10px;font-weight:750;border-radius:11px;padding:11px 4px;margin-top:12px}.stop-button:hover{background:#eee5f5}.tip-card{display:flex;align-items:center;gap:10px;margin-top:auto;padding:12px 0 0;color:#87718d}.tip-card>span{font-size:33px;color:#c597b3}.tip-card p{font-size:9px;line-height:1.6;margin:0}.tip-card strong{font-size:10px}footer{display:flex;justify-content:space-between;font-size:10px;font-weight:650;color:#998891;padding:16px 4px}.sparkle-layer{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}.sparkle{position:absolute;color:var(--sparkle-color);font-size:29px;font-weight:800;animation:float-note 1.05s ease-out forwards}.performer.dance{animation:dance .3s ease-in-out}.note-bubble.pop{animation:pop .25s ease-out}@keyframes dance{0%,100%{transform:rotate(0)}35%{transform:translateY(-8px) rotate(-4deg)}75%{transform:rotate(3deg)}}@keyframes pop{50%{transform:rotate(2deg) scale(1.12)}}@keyframes float-note{0%{transform:translate(0,0) rotate(-15deg);opacity:1}100%{transform:translate(var(--dx),-160px) rotate(20deg);opacity:0}}
@media(min-width:1400px) and (min-height:850px){.game-shell{padding-top:30px}.scene{height:320px}.instrument{height:245px}.piano{height:199px}.piano-key.white{padding-top:122px}.piano-key.black{height:116px;padding-top:64px}}
@media(max-width:1000px){.game-shell{padding:14px}.concert-layout{grid-template-columns:minmax(0,1fr) 245px;gap:14px}.header-stamp{font-size:10px}.setlist{padding:17px 12px}.note-bubble{right:11px;width:74px;height:77px;top:62px}.note-bubble>span{font-size:30px}.note-bubble small{font-size:7px}.scene-label{font-size:7px;left:10px;top:12px}.keyboard-caption{font-size:8px;padding:0 10px}.keyboard-caption>span:last-child{display:none}.ribbon-title{min-width:150px}.ribbon-title>strong{font-size:13px}.trail-note{width:29px;height:32px}.music-ribbon{padding:10px 12px}.note-trail{gap:4px}.welcome-trail{font-size:18px}}
@media(max-width:700px){.game-shell{padding:12px}.topbar{margin-bottom:12px}.brand h1{font-size:25px}.brand-icon{width:41px;height:41px}.header-stamp{display:none}.concert-layout{display:flex;flex-direction:column;gap:16px}.scene{height:225px}.bandstand{width:125%;max-width:none;margin-left:-12.5%}.scene-label{font-size:7px;top:10px}.note-bubble{right:8px;top:75px;width:61px;height:69px}.note-bubble small{font-size:6px}.note-bubble>span{font-size:27px}.instrument{height:202px;padding-left:9px;padding-right:9px}.piano{height:156px}.piano-top{font-size:6px}.piano-top>span:last-child{font-size:6px;max-width:160px;letter-spacing:0;text-align:right}.white-keys{gap:3px}.piano-key.white{padding-top:87px}.white .note-name{font-size:19px}.white .solfege{font-size:9px}.white:after{bottom:63px}.piano-key.black{width:8%;height:94px}.black .note-name{font-size:8px}.music-ribbon{height:62px}.ribbon-title{min-width:140px}.ribbon-title>span{font-size:7px}.note-trail{gap:3px}.trail-note{width:26px;font-size:11px}.welcome-trail{font-size:15px}.setlist{display:block}.setlist-heading h2{font-size:24px}.setlist-heading>p:last-child{margin-bottom:12px}.mode-hint{min-height:0;margin:9px 0}.songs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.song-button{padding:6px;gap:7px}.song-art{width:33px;height:36px;font-size:25px}.song-button strong{font-size:11px}.song-button small{font-size:7px;white-space:normal}.song-play{display:none}.song-art svg{width:29px;height:29px}.stop-button{width:100%}.tip-card{padding-top:9px}.tip-card p{font-size:10px}footer{font-size:8px;padding-top:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.sparkle{display:none}}
/* Keep the complete concert and setlist in a laptop-height viewport. */
@media(min-width:701px){.setlist{padding:15px 15px 12px}.setlist-heading .eyebrow{font-size:9px;line-height:11px;margin-bottom:2px}.setlist-heading h2{font-size:25px;line-height:29px;margin:0 0 4px}.setlist-heading>p:last-child{font-size:10px;line-height:13px;margin:0 0 10px}.mode-switch button{padding:8px 4px;line-height:13px}.mode-hint{font-size:9px;line-height:13px;min-height:0;margin:8px 0 10px}.songs{gap:7px}.song-button{min-height:55px;padding:6px 8px}.song-art{width:39px;height:39px}.stop-button{padding:9px 4px;line-height:13px;margin-top:10px}.tip-card{padding-top:10px}.tip-card p{font-size:9px;line-height:14px}.tip-card strong{font-size:9px}}
@media(min-width:701px){.tip-card{display:none}}