:root {
  color-scheme: dark;
  --ink: #f8fafc;
  --muted: #94a9ba;
  --blue: #8fd9ff;
  --gold: #e1bd7c;
  --green: #76e7a4;
  --panel: rgba(7, 23, 35, .78);
  --keyboard-dock-space: 214px;
}

@font-face {
  font-family: "Bravura";
  src: url("assets/fonts/Bravura.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 5%, rgba(44, 111, 146, .26), transparent 27rem),
    radial-gradient(circle at 85% 0%, rgba(147, 101, 45, .17), transparent 30rem),
    linear-gradient(155deg, #06111c 0%, #091c2b 50%, #07131f 100%);
}

button { font: inherit; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.game-shell { position: relative; width: 100%; height: 100dvh; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
.topbar, .hud, .now-playing { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar { position: absolute; z-index: 20; top: 7px; left: clamp(10px,1.5vw,24px); right: clamp(10px,1.5vw,24px); min-height: 46px; padding: 3px 12px; border: 1px solid rgba(143,217,255,.13); border-radius: 15px; background: rgba(5,17,27,.62); backdrop-filter: blur(12px); }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.keyboard-toggle { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid rgba(143,217,255,.2); border-radius: 999px; color: #a9bdca; background: rgba(5,16,25,.5); font-size: .7rem; font-weight: 800; cursor: pointer; }
.keyboard-toggle:hover { color: #dff6ff; border-color: rgba(143,217,255,.38); }
.keyboard-toggle input { width: 15px; height: 15px; margin: 0; accent-color: #72c8ed; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(143, 217, 255, .45);
  border-radius: 50%; color: var(--blue); font: 700 1.8rem Georgia, serif;
  background: radial-gradient(circle at 35% 24%, rgba(255,255,255,.32), rgba(58,139,181,.13) 45%, rgba(5,17,27,.3));
  box-shadow: inset 2px 3px 7px rgba(255,255,255,.1), 0 0 20px rgba(125,211,252,.13);
}
.brand strong { display: block; font: 800 clamp(1.05rem, 2vw, 1.35rem) Georgia, serif; letter-spacing: .02em; }
.brand small { color: var(--muted); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.midi-pill { display: flex; align-items: center; gap: 8px; min-width: 150px; padding: 8px 13px; border: 1px solid rgba(148,169,186,.28); border-radius: 999px; color: #bbcad5; background: rgba(5,16,25,.58); font-size: .75rem; font-weight: 750; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #657786; box-shadow: 0 0 0 4px rgba(101,119,134,.12); }
.midi-pill.connected { color: #aaf2c5; border-color: rgba(118,231,164,.38); }
.midi-pill.connected .status-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(118,231,164,.12), 0 0 12px rgba(118,231,164,.5); }
.player-pill { display: grid; gap: 0; min-width: 92px; padding: 5px 11px; border: 1px solid rgba(225,189,124,.28); border-radius: 999px; background: rgba(5,16,25,.58); }
.player-pill[hidden] { display: none; }
.player-pill span { color: #9baebb; font-size: .48rem; font-weight: 900; letter-spacing: .14em; }
.player-pill strong { max-width: 130px; overflow: hidden; color: #ffe0a2; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }

.hud { position: absolute; z-index: 20; top: 59px; left: clamp(10px,1.5vw,24px); right: clamp(10px,1.5vw,24px); min-height: 70px; margin: 0; padding: 5px 12px; border: 1px solid rgba(148,169,186,.13); border-radius: 17px; background: rgba(5,17,27,.56); backdrop-filter: blur(12px); }
.eyebrow { margin: 0; color: var(--gold); font-size: .69rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.level-copy h1 { margin: 2px 0 1px; font: 800 clamp(1.35rem, 2.5vw, 2rem)/1.05 Georgia, serif; }
.level-copy > p:last-child { margin: 0; color: var(--muted); font-size: .88rem; }
.scoreboard { display: flex; gap: clamp(16px, 2.5vw, 36px); padding: 7px 15px; border: 1px solid rgba(148,169,186,.16); border-radius: 16px; background: rgba(5,17,27,.4); box-shadow: inset 0 1px rgba(255,255,255,.03); }
.scoreboard div { display: grid; gap: 2px; min-width: 54px; }
.scoreboard span { color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.scoreboard strong { font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.scoreboard b { font-weight: inherit; }
.scoreboard .lives-stat { min-width: 116px; }
.lives { display: flex; align-items: center; gap: 5px; min-height: 22px; }
.life-heart { display: inline-block; color: #ff6378; font: normal 900 1.15rem/1 system-ui,sans-serif; filter: drop-shadow(0 0 5px rgba(255,74,105,.55)); transform-origin: center; }
.life-heart.lost { color: #60717d; opacity: .22; filter: none; transform: scale(.72); }
.life-heart.losing { z-index: 2; animation: heartPop .62s cubic-bezier(.18,.78,.18,1) forwards; }
.lives-stat.hit { animation: livesHit .52s ease-out; }
.life-loss-toast { position: fixed; z-index: 60; left: var(--life-x); top: var(--life-y); pointer-events: none; color: #ff8a99; font-size: .68rem; font-weight: 950; letter-spacing: .14em; text-shadow: 0 0 13px rgba(255,69,99,.7); transform: translate(-50%,-50%); animation: lifeToast .85s ease-out forwards; }
.life-break-effect { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; background: radial-gradient(circle,rgba(255,45,76,.13),transparent 32%); animation: lifeFlash .92s ease-out forwards; }
.broken-heart { position: relative; z-index: 2; font-size: clamp(5.5rem,13vw,10rem); filter: drop-shadow(0 0 25px rgba(255,40,72,.75)); animation: brokenHeartPop .92s cubic-bezier(.18,.78,.2,1) forwards; }
.heart-shard { position: absolute; left: 50%; top: 50%; width: 13px; height: 20px; border-radius: 70% 30% 65% 35%; background: linear-gradient(145deg,#ff9aaa,#e9234b); box-shadow: 0 0 12px rgba(255,41,77,.7); animation: heartShardFly .84s ease-out forwards; }
.heart-shard:nth-child(2) { --shard-x:-128px; --shard-y:-74px; --shard-r:-65deg; }
.heart-shard:nth-child(3) { --shard-x:116px; --shard-y:-92px; --shard-r:72deg; }
.heart-shard:nth-child(4) { --shard-x:-154px; --shard-y:38px; --shard-r:-112deg; }
.heart-shard:nth-child(5) { --shard-x:146px; --shard-y:44px; --shard-r:128deg; }
.heart-shard:nth-child(6) { --shard-x:-72px; --shard-y:128px; --shard-r:-155deg; }
.heart-shard:nth-child(7) { --shard-x:84px; --shard-y:132px; --shard-r:164deg; }

.level-track { position: absolute; z-index: 21; top: 154px; left: clamp(20px,2.5vw,42px); right: clamp(20px,2.5vw,42px); display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; margin: 0; }
.level-node { --level-progress: 0%; position: relative; height: 6px; border: 0; border-radius: 999px; background: rgba(148,169,186,.18); overflow: visible; box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.level-node::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--level-progress); min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #ffe0a2); box-shadow: 0 0 10px rgba(225,189,124,.38); transition: width .42s cubic-bezier(.2,.8,.2,1); }
.level-node::after { content: attr(data-level); position: absolute; top: 9px; left: 50%; transform: translateX(-50%); color: rgba(148,169,186,.48); font-size: .55rem; font-weight: 850; }
.level-node.done::before { background: linear-gradient(90deg, #77dca0, #72c8ed); box-shadow: 0 0 8px rgba(118,231,164,.25); }
.level-node.active::after { color: #ffe0a2; }

.playfield {
  position: absolute; isolation: isolate; inset: 0; width: 100%; height: 100%; min-height: 0; overflow: hidden;
  border: 0; border-radius: 0;
  background:
    linear-gradient(180deg, rgba(19,57,78,.2), rgba(5,17,27,.28) 48%, rgba(3,12,20,.66)),
    repeating-linear-gradient(90deg, transparent 0 99px, rgba(151,193,218,.025) 100px);
  box-shadow: inset 0 1px rgba(255,255,255,.05), inset 0 -50px 90px rgba(0,0,0,.2), 0 22px 70px rgba(0,0,0,.28);
}
.playfield::before { content: ""; position: absolute; inset: 0; z-index: -3; opacity: .35; background-image: radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.5px); background-size: 61px 61px; background-position: 12px 18px; }
.aurora { position: absolute; z-index: -2; width: 60%; height: 60%; border-radius: 50%; filter: blur(80px); opacity: .15; pointer-events: none; }
.aurora-one { left: -18%; bottom: -25%; background: #1d9bcc; }
.aurora-two { right: -23%; top: -27%; background: #c58f4a; }
.staff-cloud { position: absolute; z-index: -1; color: rgba(164,206,230,.055); font: 700 clamp(5rem, 13vw, 11rem) Georgia, serif; letter-spacing: .18em; white-space: nowrap; user-select: none; }
.staff-cloud-one { left: 4%; top: 8%; transform: rotate(-8deg); }
.staff-cloud-two { right: 2%; bottom: 4%; transform: rotate(8deg); }
.finish-line { position: absolute; top: 177px; left: 0; right: 0; height: 1px; border-top: 1px dashed rgba(143,217,255,.16); }
.finish-line span { position: absolute; right: 16px; top: -10px; padding: 2px 7px; color: rgba(143,217,255,.32); border: 1px solid rgba(143,217,255,.11); border-radius: 999px; background: #0b2030; font-size: .49rem; letter-spacing: .16em; }
.bubble-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.grand-staff-panel {
  position: absolute; z-index: 7; top: 180px; right: clamp(12px,1.7vw,28px); width: clamp(238px,19vw,300px);
  padding: 12px 12px 10px; border: 1px solid rgba(167,201,219,.25); border-radius: 14px;
  background: linear-gradient(160deg,rgba(10,30,43,.94),rgba(5,17,27,.9));
  box-shadow: inset 0 1px rgba(255,255,255,.055),0 15px 40px rgba(0,0,0,.29);
  backdrop-filter: blur(12px); pointer-events: none;
}
.grand-staff-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.grand-staff-head div { display: grid; gap: 1px; }
.grand-staff-head span { color: var(--gold); font-size: .55rem; font-weight: 950; letter-spacing: .18em; }
.grand-staff-head strong { font: 800 clamp(.96rem,1.15vw,1.12rem) Georgia,serif; letter-spacing: .02em; }
.grand-staff-led { width: 9px; height: 9px; border-radius: 50%; background: #526878; box-shadow: 0 0 0 4px rgba(82,104,120,.12); transition: background .12s,box-shadow .12s; }
.grand-staff-panel.playing .grand-staff-led { background: var(--green); box-shadow: 0 0 0 4px rgba(118,231,164,.12),0 0 14px rgba(118,231,164,.72); }
.grand-staff-display { overflow: hidden; border: 1px solid #c7ad52; border-radius: 3px; background: #fff0a8; box-shadow: inset 0 1px rgba(255,255,255,.7),0 7px 20px rgba(0,0,0,.18); }
.grand-staff-svg { display: block; width: 100%; height: auto; }
.grand-staff-svg .gs-line,.grand-staff-svg .gs-ledger,.grand-staff-svg .gs-bar { stroke: #26343c; stroke-linecap: round; }
.grand-staff-svg .gs-line { stroke: #8795a3; stroke-width: 1.05; opacity: 1; }
.grand-staff-svg .gs-ledger { stroke-width: 1.05; }
.grand-staff-svg .gs-bar,.grand-staff-svg .gs-system { stroke: #26343c; stroke-width: 1.15; }
.grand-staff-svg .gs-brace-path { fill: none; stroke: #111; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.grand-staff-svg .gs-music-glyph { fill: #17262e; font-family: "Bravura"; font-weight: 400; }
.grand-staff-svg .gs-note { fill: #090c0e; stroke: #090c0e; stroke-width: .8; }
.grand-staff-svg .gs-stem { stroke: #090c0e; stroke-width: 2; stroke-linecap: round; }
.grand-staff-svg .gs-reference-note { fill: rgba(225,189,124,.16); stroke: #a56d1f; stroke-width: 1.35; filter: drop-shadow(0 0 3px rgba(225,189,124,.35)); }
.grand-staff-svg .gs-first-label { fill: #7b5119; font: 950 9px Inter,system-ui,sans-serif; letter-spacing: .08em; }
.grand-staff-svg .gs-accidental { fill: #123b4d; font: 400 18px "Segoe UI Symbol","Times New Roman",serif; }
.grand-staff-svg .gs-empty { fill: #778891; font: 800 10px Inter,system-ui,sans-serif; letter-spacing: .12em; }
#grand-staff-notes { min-height: 1.1em; margin: 7px 2px 0; overflow: hidden; color: #9cb3c2; font-size: .64rem; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.grand-staff-panel.playing #grand-staff-notes { color: #bcebd0; }
.grand-staff-option { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(143,217,255,.12); color: #b7c9d4; cursor: pointer; pointer-events: auto; }
.grand-staff-option input { width: 15px; height: 15px; margin: 0; accent-color: #d5a652; }
.grand-staff-option span { display: grid; gap: 0; }
.grand-staff-option strong { font-size: .61rem; line-height: 1.15; }
.grand-staff-option small { color: #7893a5; font-size: .53rem; line-height: 1.15; }

.note-bubble {
  --bubble-size: clamp(112px, 12vw, 150px);
  position: absolute; left: var(--bubble-left); bottom: calc(var(--bubble-size) * -.88); width: var(--bubble-size); height: var(--bubble-size);
  display: grid; place-items: center; border: 2px solid hsla(var(--bubble-hue),88%,78%,.88); border-radius: 50%;
  background: radial-gradient(circle at 30% 24%,rgba(255,255,255,.58) 0 5%,hsla(var(--bubble-hue),92%,65%,.36) 20%,hsla(var(--bubble-hue-two),82%,48%,.24) 62%,hsla(var(--bubble-hue),90%,60%,.2) 100%);
  box-shadow: inset 7px 9px 20px rgba(255,255,255,.2), inset -10px -13px 25px rgba(15,23,42,.25), 0 0 30px hsla(var(--bubble-hue),95%,65%,.42), 0 16px 30px rgba(0,0,0,.25);
  color: #f8fafc; opacity: 0; backdrop-filter: blur(2px); will-change: transform, opacity;
  animation: bubbleRise var(--bubble-duration) linear forwards;
}
.note-bubble::before { content: ""; position: absolute; left: 20%; top: 13%; width: 25%; height: 14%; border-radius: 50%; border-top: 4px solid rgba(255,255,255,.68); transform: rotate(-26deg); filter: blur(.1px); }
.note-bubble::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1px solid rgba(255,255,255,.055); }
.note-bubble.chord { border-width: 3px; box-shadow: inset 7px 9px 20px rgba(255,255,255,.22), inset -10px -13px 25px rgba(15,23,42,.25), 0 0 38px hsla(var(--bubble-hue),95%,67%,.52), 0 16px 32px rgba(0,0,0,.28); }
.note-bubble.bonus { --bubble-size: clamp(96px,9.6vw,122px); z-index: 5; border: 2px solid rgba(255,232,125,.96); background: radial-gradient(circle at 30% 22%,#fff 0 4%,rgba(255,232,121,.66) 13%,rgba(255,162,44,.45) 48%,rgba(125,73,236,.3) 78%,rgba(255,222,100,.28)); box-shadow: inset 6px 7px 15px rgba(255,255,255,.35),inset -8px -10px 20px rgba(83,32,113,.25),0 0 36px rgba(255,207,73,.75),0 13px 26px rgba(0,0,0,.28); }
.note-bubble.bonus::before { border-top-color: rgba(255,255,255,.92); }
.note-bubble.bonus .note-sheet { width: 72%; padding: 1px 2px 0; border-color: rgba(255,239,159,.88); }
.note-bubble.bonus .note-caption { display: none; }
.bonus-badge { position: absolute; z-index: 3; left: 50%; bottom: -9px; min-width: 50px; padding: 4px 7px; border: 1px solid rgba(255,245,190,.85); border-radius: 999px; color: #2b1803; background: linear-gradient(180deg,#fff2a6,#ffbe3e); box-shadow: 0 4px 12px rgba(0,0,0,.25),0 0 15px rgba(255,207,69,.62); font-size: .52rem; font-weight: 950; letter-spacing: .08em; text-align: center; transform: translateX(-50%); white-space: nowrap; }
.note-bubble.bonus.life .bonus-badge::before { content: "♥ "; color: #db2448; }
.note-bubble.bonus.points .bonus-badge::before { content: "★ "; color: #815000; }
.note-bubble.wrong { animation-play-state: paused; border-color: rgba(255,112,112,.95); box-shadow: inset 7px 9px 20px rgba(255,255,255,.14), inset -10px -13px 25px rgba(15,23,42,.3), 0 0 35px rgba(255,80,80,.42); }
.note-bubble.correct { animation: bubblePop .42s cubic-bezier(.2,.75,.2,1) forwards; }
.note-sheet { position: relative; width: 79%; padding: 3px 4px 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.54); border-radius: 10px; background: linear-gradient(145deg, rgba(255,255,250,.97), rgba(223,232,231,.94)); box-shadow: 0 8px 24px rgba(0,0,0,.27), inset 0 1px #fff; transform: rotate(var(--sheet-tilt)); }
.note-sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(72,56,39,.08) 8px); }
.notation { display: block; width: 100%; height: auto; overflow: visible; }
.notation .staff-line, .notation .ledger { stroke: #26343c; stroke-width: 2.1; stroke-linecap: round; }
.notation .bar { stroke: #26343c; stroke-width: 2.6; }
.notation .clef { fill: #17242c; font-family: "Times New Roman", Georgia, serif; }
.notation .notehead { fill: #12212a; stroke: #12212a; stroke-width: 1.2; }
.notation .stem { stroke: #12212a; stroke-width: 3; stroke-linecap: round; }
.notation .accidental { fill: #12212a; font-family: "Times New Roman", Georgia, serif; font-weight: 700; }
.note-caption { display: block; margin: -4px 0 2px; color: #42545f; text-align: center; font-size: clamp(.42rem, .55vw, .55rem); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.satellite { position: absolute; left: var(--sat-left); bottom: -30px; width: var(--sat-size); height: var(--sat-size); border: 1px solid rgba(226,232,240,.42); border-radius: 50%; background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.42),rgba(125,211,252,.07) 45%,transparent 72%); box-shadow: inset 2px 2px 5px rgba(255,255,255,.15),0 0 8px rgba(125,211,252,.12); opacity: 0; animation: satelliteRise var(--sat-duration) ease-out var(--sat-delay) forwards; }
.pop-particle { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: var(--particle-color); box-shadow: 0 0 9px currentColor; animation: particleBurst .55s ease-out forwards; }
.success-feedback { position: absolute; z-index: 8; left: var(--x); top: var(--y); color: hsl(var(--praise-hue) 92% 74%); font-size: clamp(1.15rem,2.2vw,2rem); font-weight: 950; letter-spacing: .08em; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.45),0 0 8px hsl(var(--praise-hue) 95% 65%),0 0 22px hsl(var(--praise-hue) 90% 55% / .72); transform: translate(-50%,-50%); animation: successPraise .9s cubic-bezier(.16,.8,.25,1) forwards; }

@keyframes bubbleRise {
  0% { opacity: 0; transform: translate(-50%, 14px) rotate(var(--bubble-tilt)) scale(.72); }
  6% { opacity: .14; transform: translate(calc(-50% + var(--bubble-drift-mid)), -2vh) rotate(var(--bubble-tilt)) scale(.82); }
  12% { opacity: .58; transform: translate(calc(-50% + var(--bubble-drift-mid)), -7vh) rotate(0) scale(.94); }
  18% { opacity: .98; transform: translate(calc(-50% + var(--bubble-drift-mid)), -13vh) rotate(0) scale(1); }
  82% { opacity: .96; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--bubble-drift)), var(--bubble-rise)) rotate(var(--bubble-end-tilt)) scale(.9); }
}
@keyframes bubblePop { 0% { opacity: 1; transform: translate(var(--current-x), var(--current-y)) scale(1); } 42% { opacity: 1; transform: translate(var(--current-x), var(--current-y)) scale(1.13); } 100% { opacity: 0; transform: translate(var(--current-x), var(--current-y)) scale(1.52); filter: blur(8px); } }
@keyframes heartPop { 0% { opacity: 1; transform: scale(1); } 32% { opacity: 1; color: #ffb0ba; transform: scale(1.75) rotate(-12deg); filter: drop-shadow(0 0 13px #ff405f); } 68% { opacity: .75; transform: scale(1.35) rotate(16deg); } 100% { opacity: 0; transform: translateY(-16px) scale(.15) rotate(42deg); filter: blur(3px); } }
@keyframes livesHit { 0%,100% { transform: translateX(0); } 22% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 68% { transform: translateX(-3px); } }
@keyframes lifeToast { 0% { opacity: 0; transform: translate(-50%,-30%) scale(.7); } 18% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%,-135%) scale(.9); } }
@keyframes lifeFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes brokenHeartPop { 0% { opacity: 0; transform: scale(.2) rotate(-18deg); } 26% { opacity: 1; transform: scale(1.18) rotate(8deg); } 58% { opacity: 1; transform: scale(.94) rotate(-4deg); } 100% { opacity: 0; transform: translateY(-38px) scale(1.35) rotate(12deg); filter: blur(5px) drop-shadow(0 0 30px rgba(255,40,72,.7)); } }
@keyframes heartShardFly { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.3) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--shard-x)),calc(-50% + var(--shard-y))) scale(1.1) rotate(var(--shard-r)); } }
@keyframes satelliteRise { 0% { opacity: 0; transform: translate(-50%,0) scale(.5); } 18% { opacity: .58; } 100% { opacity: 0; transform: translate(calc(-50% + var(--sat-drift)),var(--sat-rise)) scale(.92); } }
@keyframes particleBurst { to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.15); } }
@keyframes successPraise { 0% { opacity: 0; transform: translate(-50%,-35%) scale(.55) rotate(-4deg); } 18% { opacity: 1; transform: translate(-50%,-65%) scale(1.16) rotate(2deg); } 62% { opacity: 1; transform: translate(-50%,-105%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-180%) scale(.82); filter: blur(2px); } }

.player-overlay { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at 50% 42%,rgba(31,104,142,.2),rgba(2,9,15,.84) 52%,rgba(2,8,13,.96)); backdrop-filter: blur(11px); }
.player-overlay[hidden] { display: none; }
.player-card { width: min(520px,calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; padding: 27px 30px 25px; text-align: center; border: 1px solid rgba(143,217,255,.3); border-radius: 25px; background: linear-gradient(155deg,rgba(9,31,45,.98),rgba(4,16,25,.98)); box-shadow: inset 0 1px rgba(255,255,255,.08),0 30px 90px rgba(0,0,0,.56),0 0 45px rgba(86,183,227,.1); }
.player-bubble { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 14px; border: 1px solid rgba(226,232,240,.65); border-radius: 50%; color: var(--blue); font: 700 2.2rem Georgia,serif; background: radial-gradient(circle at 30% 24%,rgba(255,255,255,.42),rgba(148,201,232,.16) 28%,rgba(20,38,58,.25) 68%); box-shadow: inset 4px 5px 10px rgba(255,255,255,.13),0 0 25px rgba(125,211,252,.2); }
.player-card h2 { margin: 6px 0 8px; font: 800 clamp(1.55rem,3vw,2rem) Georgia,serif; }
.player-card p:not(.eyebrow) { margin: 0 auto 15px; color: #afc0cb; line-height: 1.45; }
#player-name-form { display: grid; gap: 10px; }
#player-name-form[hidden] { display: none; }
#player-name-form label { color: #9eb3c1; text-align: left; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
#player-name { width: 100%; padding: 12px 14px; border: 1px solid rgba(143,217,255,.3); border-radius: 12px; outline: none; color: #f8fafc; background: rgba(2,12,20,.72); font: inherit; font-size: 1rem; font-weight: 750; }
#player-name:focus { border-color: #8fd9ff; box-shadow: 0 0 0 3px rgba(143,217,255,.12); }
#player-name-form > button, #player-start-level { margin-top: 3px; padding: 12px 20px; border: 1px solid #b8e4fa; border-radius: 999px; color: #071521; background: linear-gradient(180deg,#d7f4ff,#82ccec); font-weight: 950; cursor: pointer; box-shadow: 0 8px 25px rgba(92,190,232,.22); }
#player-name-form > button:hover, #player-start-level:hover { filter: brightness(1.08); transform: translateY(-1px); }
#player-name-error { min-height: 1.2em; color: #ff9a90; }
.player-level-step[hidden] { display: none; }
.player-level-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin: 18px 0; }
.player-level-grid button { min-height: 50px; padding: 7px 4px; border: 1px solid rgba(143,217,255,.22); border-radius: 11px; color: #cce7f5; background: rgba(18,54,75,.66); cursor: pointer; }
.player-level-grid button span { display: block; font-size: .56rem; opacity: .68; }
.player-level-grid button.selected { border-color: #ffe0a2; color: #1b1e23; background: linear-gradient(145deg,#ffe8ad,#d4a85e); box-shadow: 0 0 18px rgba(225,189,124,.2); }
.player-level-grid button:disabled { cursor: not-allowed; color: #647985; border-color: rgba(103,124,137,.14); background: rgba(12,28,39,.5); opacity: .52; }
.change-player { display: block; margin: 12px auto 0; padding: 5px 10px; border: 0; color: #8ea9ba; background: transparent; font-size: .72rem; text-decoration: underline; cursor: pointer; }

.waiting-card, .level-card, .game-complete { position: absolute; z-index: 8; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(430px, calc(100% - 34px)); padding: 30px; text-align: center; border: 1px solid rgba(177,213,233,.26); border-radius: 24px; background: rgba(5,18,29,.88); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 25px 80px rgba(0,0,0,.46); backdrop-filter: blur(14px); }
.waiting-card.hidden, .level-card, .game-complete { display: none; }
.waiting-bubble { width: 74px; height: 74px; display: grid; place-items: center; margin: -4px auto 18px; border: 1px solid rgba(226,232,240,.68); border-radius: 50%; color: var(--blue); font: 700 2.5rem Georgia,serif; background: radial-gradient(circle at 30% 24%,rgba(255,255,255,.4),rgba(148,201,232,.16) 25%,rgba(20,38,58,.24) 65%); box-shadow: inset 4px 5px 10px rgba(255,255,255,.13), 0 0 23px rgba(125,211,252,.2); }
.waiting-card h2, .game-complete h2 { margin: 5px 0 8px; font: 800 1.75rem Georgia,serif; }
.waiting-card > p:not(.eyebrow), .game-complete > p:not(.eyebrow) { color: #b5c4cf; line-height: 1.55; }
#connect-midi { margin: 9px 0 13px; padding: 12px 20px; border: 1px solid #b8e4fa; border-radius: 999px; color: #071521; background: linear-gradient(180deg,#c8efff,#82ccec); font-weight: 900; cursor: pointer; box-shadow: 0 8px 25px rgba(92,190,232,.22); }
#connect-midi:hover { filter: brightness(1.08); transform: translateY(-1px); }
#connect-midi:disabled { opacity: .6; cursor: wait; }
#midi-help { display: block; min-height: 1.2em; color: #7893a5; }
.level-card.visible, .game-complete.visible { display: block; animation: cardArrive .35s ease-out; }
.level-card-kicker { color: var(--green); font-size: .66rem; font-weight: 900; letter-spacing: .2em; }
.level-card.failed { border-color: rgba(255,142,132,.48); box-shadow: inset 0 1px rgba(255,255,255,.06),0 25px 80px rgba(0,0,0,.46),0 0 34px rgba(240,95,84,.11); }
.level-card.failed .level-card-kicker { color: #ff9a90; }
.level-card.failed .countdown { border-color: rgba(255,142,132,.55); color: #ffc1bb; box-shadow: 0 0 22px rgba(240,95,84,.14); }
.level-card strong { display: block; margin: 8px 0; font: 800 2rem Georgia,serif; }
.level-card p { color: #b7c8d3; }
.countdown { width: 54px; height: 54px; display: grid; place-items: center; margin: 16px auto 0; border: 1px solid rgba(225,189,124,.58); border-radius: 50%; color: #ffe0a2; font-size: 1.5rem; font-weight: 900; box-shadow: 0 0 22px rgba(225,189,124,.15); }
.trophy { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 50%; color: #152131; background: linear-gradient(145deg,#ffe8ad,#c99145); font-size: 2rem; box-shadow: 0 0 35px rgba(225,189,124,.3); }
.final-score { margin: 18px auto; padding: 10px; border: 1px solid rgba(225,189,124,.2); border-radius: 13px; color: #c9d4db; background: rgba(225,189,124,.06); }
.final-score strong { margin-left: 8px; color: #ffe0a2; font-size: 1.25rem; }
@keyframes cardArrive { from { opacity: 0; transform: translate(-50%,-46%) scale(.94); } }

.now-playing { position: absolute; z-index: 20; left: clamp(10px,1.5vw,24px); right: clamp(10px,1.5vw,24px); bottom: 7px; min-height: 44px; padding: 5px 12px; border: 1px solid rgba(143,217,255,.13); border-radius: 15px; background: rgba(5,17,27,.68); backdrop-filter: blur(12px); }
.now-playing p { display: flex; align-items: center; gap: 10px; margin: 0; color: #dce8ee; font-size: .85rem; }
#instruction-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(143,217,255,.22); border-radius: 50%; color: var(--blue); font: 700 1.2rem Georgia,serif; }
.midi-device { max-width: 40%; overflow: hidden; color: #7893a5; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.audio-info { display: flex; align-items: flex-end; gap: 3px; min-width: 0; flex-direction: column; }
.sound-status { color: #8099aa; font-size: .61rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.sound-status.active { color: #b9ddf2; text-shadow: 0 0 10px rgba(143,217,255,.35); }
.key-activity { display: flex; align-items: end; gap: 3px; height: 22px; }
.key-light { width: 5px; border-radius: 4px; background: var(--blue); animation: keyPulse .4s ease-out forwards; }
@keyframes keyPulse { from { height: 20px; opacity: 1; } to { height: 4px; opacity: 0; } }

.computer-keyboard-panel { position: fixed; z-index: 35; left: 12px; right: auto; bottom: 58px; width: min(470px,calc(100vw - 24px)); height: 148px; display: block; padding: 7px 9px 8px; overflow: hidden; border: 1px solid rgba(143,217,255,.28); border-radius: 14px; background: linear-gradient(180deg,rgba(9,31,45,.97),rgba(4,16,25,.98)); box-shadow: inset 0 1px rgba(255,255,255,.07),0 12px 34px rgba(0,0,0,.4); backdrop-filter: blur(14px); }
.computer-keyboard-panel[hidden] { display: none !important; }
.computer-keyboard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.computer-keyboard-head > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.computer-keyboard-head strong { font: 800 .84rem Georgia,serif; }
.computer-keyboard-head > div:first-child span { display: none; }
.octave-controls { display: flex; align-items: center; gap: 5px; }
.octave-controls button { width: 25px; height: 23px; padding: 0; border: 1px solid rgba(143,217,255,.28); border-radius: 7px; color: #dff6ff; background: #0d2a3e; font-weight: 900; cursor: pointer; }
.octave-controls button:hover:not(:disabled) { background: #17425e; }
.octave-controls button:disabled { opacity: .35; cursor: default; }
#keyboard-octave { min-width: 61px; color: #b9ddf2; text-align: center; font-size: .64rem; letter-spacing: .02em; }
.piano-keys { position: relative; display: flex; width: 100%; height: 108px; margin: 0; overflow: hidden; border: 3px solid #06121c; border-radius: 10px; background: #06121c; box-shadow: 0 9px 22px rgba(0,0,0,.3); touch-action: none; user-select: none; }
.piano-key { appearance: none; position: relative; border-radius: 0 0 7px 7px; cursor: pointer; touch-action: none; transition: background .07s,transform .07s,box-shadow .07s; }
.piano-key.white { z-index: 1; flex: 1; height: 100%; border: 1px solid #8f9ba2; border-top: 0; color: #1d2b34; background: linear-gradient(180deg,#fff 0%,#eef2f1 76%,#cad4d6 100%); box-shadow: inset 0 -8px 12px rgba(35,51,61,.13); }
.piano-key.black { position: absolute; z-index: 3; left: var(--black-left); top: 0; width: 4.7%; height: 62%; transform: translateX(-50%); border: 1px solid #02070b; color: #e8f5fb; background: linear-gradient(145deg,#233642,#071018 65%); box-shadow: inset 0 -8px 10px rgba(0,0,0,.65),0 6px 7px rgba(0,0,0,.45); }
.piano-key.active,.piano-key:active { transform: translateY(3px); }
.piano-key.black.active,.piano-key.black:active { transform: translate(-50%,3px); background: linear-gradient(145deg,#4f91af,#0d3044 70%); box-shadow: inset 0 -3px 6px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.38),0 0 16px rgba(143,217,255,.35); }
.piano-key.white.active,.piano-key.white:active { background: linear-gradient(180deg,#d8f4ff,#9dd9ef); box-shadow: inset 0 -3px 7px rgba(23,73,98,.2),0 0 15px rgba(143,217,255,.3); }
.piano-key .keycap { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); min-width: 18px; padding: 2px 3px; border: 1px solid rgba(25,45,56,.2); border-radius: 5px; color: inherit; background: rgba(143,164,175,.14); font-size: .58rem; font-weight: 950; }
.piano-key.black .keycap { bottom: 20px; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.07); }
.piano-key .note-name { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); font-size: .48rem; font-weight: 850; white-space: nowrap; }
.computer-keyboard-panel > small { display: none; }

.admin-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(1,8,13,.76); backdrop-filter: blur(10px); }
.admin-overlay[hidden] { display: none; }
.admin-panel { width: min(560px,100%); max-height: min(760px,calc(100vh - 30px)); overflow: auto; padding: 24px; border: 1px solid rgba(225,189,124,.42); border-radius: 24px; background: linear-gradient(155deg,rgba(13,36,51,.98),rgba(5,17,27,.99)); box-shadow: inset 0 1px rgba(255,255,255,.07),0 30px 100px rgba(0,0,0,.58),0 0 40px rgba(225,189,124,.08); }
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.admin-head h2 { margin: 4px 0 0; font: 800 2rem Georgia,serif; }
#admin-close { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #dce8ee; background: rgba(255,255,255,.05); font-size: 1.45rem; line-height: 1; cursor: pointer; }
#admin-close:hover { color: #fff; background: rgba(255,255,255,.12); }
.admin-section { margin-top: 19px; padding: 16px; border: 1px solid rgba(143,217,255,.14); border-radius: 16px; background: rgba(4,15,24,.4); }
.admin-section h3 { margin: 0 0 12px; color: #b9ddf2; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.admin-section label { display: flex; align-items: center; gap: 10px; padding: 7px 2px; color: #c6d5de; font-size: .82rem; font-weight: 700; cursor: pointer; }
.admin-section label input { width: 17px; height: 17px; accent-color: #72c8ed; }
.admin-speed-control { margin-top: 10px; padding: 11px 12px; border: 1px solid rgba(143,217,255,.13); border-radius: 11px; background: rgba(2,11,18,.35); }
.admin-speed-control > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #c6d5de; font-size: .78rem; font-weight: 800; }
.admin-speed-control output { min-width: 50px; color: #ffe0a2; text-align: right; font-variant-numeric: tabular-nums; }
.admin-speed-control input[type="range"] { width: 100%; height: 20px; margin: 8px 0 0; accent-color: #72c8ed; cursor: pointer; }
.admin-level-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.admin-level-grid button { min-height: 42px; border: 1px solid rgba(143,217,255,.2); border-radius: 10px; color: #cce5f1; background: #0b2639; font-weight: 900; cursor: pointer; }
.admin-level-grid button:hover,.admin-level-grid button.current { border-color: rgba(225,189,124,.65); color: #ffe0a2; background: #3d3021; }
.admin-actions { display: flex; gap: 9px; margin-top: 18px; }
.admin-actions button { flex: 1; min-height: 42px; border: 1px solid rgba(143,217,255,.28); border-radius: 11px; color: #e3f1f7; background: #11354b; font-weight: 850; cursor: pointer; }
.admin-actions button:hover { background: #1a4c68; }
.admin-panel > small { display: block; margin-top: 15px; color: #6f899a; text-align: center; }
.admin-midi-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-midi-title h3 { margin-bottom: 0; }
.admin-midi-title button,.admin-midi-controls button { min-height: 34px; padding: 0 12px; border: 1px solid rgba(143,217,255,.28); border-radius: 9px; color: #dff3fc; background: #11354b; font-weight: 800; cursor: pointer; }
.admin-midi-title button:hover,.admin-midi-controls button:hover { background: #1a4c68; }
.admin-midi-path { margin: 7px 0 10px; color: #7592a3; font: 700 .72rem Consolas,monospace; }
.admin-midi-list { max-height: 190px; overflow: auto; border: 1px solid rgba(143,217,255,.12); border-radius: 11px; background: rgba(0,8,14,.4); }
.admin-midi-empty { margin: 0; padding: 18px 14px; color: #ffca82; font-size: .82rem; font-weight: 800; text-align: center; }
.admin-midi-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid rgba(143,217,255,.1); }
.admin-midi-row:last-child { border-bottom: 0; }
.admin-midi-info { min-width: 0; flex: 1; display: grid; gap: 3px; }
.admin-midi-info strong { overflow: hidden; color: #e7f5fb; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-midi-info span { color: #7793a4; font-size: .68rem; }
.admin-midi-row.error .admin-midi-info span { color: #f29c98; }
.admin-midi-row button { min-width: 66px; min-height: 32px; border: 1px solid rgba(225,189,124,.42); border-radius: 9px; color: #ffe0a2; background: #3d3021; font-weight: 900; cursor: pointer; }
.admin-midi-row button.playing { color: #0c2a37; background: #80ddc2; border-color: #80ddc2; }
.admin-midi-row button:disabled { cursor: default; opacity: .78; }
.admin-midi-controls { display: flex; align-items: stretch; gap: 9px; margin-top: 10px; }
.admin-section label.admin-midi-picker { flex: 1; display: grid; place-items: center; min-height: 38px; padding: 0 12px; border: 1px solid rgba(225,189,124,.45); border-radius: 9px; color: #ffe0a2; background: #3d3021; text-align: center; }
.admin-section label.admin-midi-picker:hover { background: #55422c; }
.admin-section label.admin-midi-picker input { display: none; }
#admin-midi-message { display: block; margin-top: 9px; color: #7592a3; font-size: .68rem; line-height: 1.45; }

@media (max-width: 700px) {
  .game-shell { padding-inline: 10px; }
  .hud { align-items: flex-end; }
  .level-copy > p:last-child { max-width: 230px; }
  .scoreboard { gap: 13px; padding: 8px 10px; }
  .scoreboard div { min-width: 42px; }
  .scoreboard span { font-size: .55rem; }
  .playfield { height: 100%; min-height: 0; border-radius: 0; }
  .note-bubble { --bubble-size: clamp(100px, 29vw, 128px); }
  .midi-device { display: none; }
  .sound-status { font-size: .56rem; }
  .topbar { align-items: flex-start; }
  .top-actions { max-width: 58%; }
  .keyboard-toggle { padding: 6px 8px; font-size: .61rem; }
  .computer-keyboard-head > div:first-child span { display: none; }
  .piano-key .keycap { min-width: 20px; padding-inline: 3px; font-size: .62rem; }
  .computer-keyboard-panel { left: 8px; right: auto; bottom: 57px; width: min(430px,calc(100vw - 16px)); height: 140px; max-height: none; padding: 6px 7px 7px; }
  .piano-keys { height: 101px; }
  .player-card { padding: 22px 18px 20px; }
  .player-level-grid { gap: 6px; }
  .player-level-grid button { min-height: 45px; font-size: .78rem; }
  .player-pill { display: none; }
  .grand-staff-panel { top: 190px; right: 8px; width: 178px; padding: 9px 10px 8px; border-radius: 14px; }
  .grand-staff-head { margin-bottom: 3px; }
  .grand-staff-head strong { font-size: .9rem; }
  .grand-staff-head span { font-size: .46rem; }
  #grand-staff-notes { margin-top: 4px; font-size: .54rem; }
  .grand-staff-option { gap: 5px; margin-top: 5px; padding-top: 5px; }
  .grand-staff-option strong { font-size: .53rem; }
  .grand-staff-option small { font-size: .47rem; }
}

@media (max-width: 500px) {
  .midi-pill { min-width: 0; }
  #midi-pill-text { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions { max-width: 62%; gap: 6px; }
  .keyboard-toggle span { max-width: 105px; line-height: 1.05; }
  .hud { display: flex; top: 55px; min-height: 68px; }
  .level-copy > p:last-child { display: none; }
  .level-copy h1 { font-size: 1.12rem; }
  .scoreboard { margin-top: 0; justify-content: space-between; }
  .scoreboard strong { font-size: .9rem; }
  .level-track { top: 133px; }
  .finish-line { top: 153px; }
  .level-node::after { display: none; }
  .waiting-card { padding: 24px 19px; }
}