#piano-flow{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-image:none;border-radius:0;box-shadow:none;background:#9dbded;overflow:hidden;isolation:isolate;color:#174b70;font-family:Nunito,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
#piano-flow[open]{display:block}#piano-flow:not([open]){display:none!important}#piano-flow::backdrop{background:#9dbded}
#piano-flow .piano-scenery{position:absolute;inset:-3%;z-index:-1;pointer-events:none;background:url('assets/piano-sky-v276.webp') center/cover no-repeat;transform:translateY(var(--climb,0));will-change:transform}
#piano-flow .piano-clouds{position:absolute;inset:0;background:radial-gradient(ellipse at 10% 35%,#ffffff60,transparent 40%),radial-gradient(ellipse at 85% 70%,#c9faff70,transparent 35%);animation:piano-drift 24s ease-in-out infinite alternate}
@keyframes piano-drift{from{transform:translate(-3%,1%)}to{transform:translate(3%,-1%)}}
#piano-flow[data-paused='true'] .piano-clouds{animation-play-state:paused}
#piano-flow .piano-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}
#piano-flow .piano-hud{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));height:98px;z-index:2;pointer-events:none;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:62px 26px;align-items:center;text-shadow:0 2px 4px #1f4671}
#piano-flow .piano-pause-button{width:56px;height:56px;padding:0;border:0;border-radius:50%;box-shadow:none;background:transparent url('assets/pause-v30.webp') center/contain no-repeat;pointer-events:auto;grid-column:1;grid-row:1}
#piano-flow .piano-score{grid-column:2;grid-row:1;font:1000 55px/1 Nunito,sans-serif;text-align:center;color:#fff7db;-webkit-text-stroke:1.5px #365c8b;paint-order:stroke fill}
#piano-flow .piano-best{grid-column:2;grid-row:2;font-weight:1000;font-size:12px;color:white;text-align:center;white-space:nowrap}
#piano-flow .piano-lives{grid-column:3;grid-row:1;display:flex;justify-content:flex-end;gap:3px}
#piano-flow .piano-lives .heart{display:block;flex:0 1 25px;min-width:0;width:25px;height:auto;aspect-ratio:1;background:url('assets/health-boost-v5.webp') left center/200% 100% no-repeat}
#piano-flow .piano-lives .heart.empty{opacity:.25;filter:grayscale(1)}
#piano-flow .piano-coins{grid-column:3;grid-row:2;display:flex;align-items:center;justify-content:flex-end;gap:4px;color:#fff3b8;font-size:18px}#piano-flow .piano-coins img{width:24px;height:24px;object-fit:contain}
#piano-flow .drop-overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;background:#07365c77;backdrop-filter:blur(4px);border-radius:0}
#piano-flow .drop-panel{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(340px,100%);max-height:100%;overflow:auto;border:16px solid transparent;border-image:url('assets/menu-panel-v240.webp') 70 fill / 16px / 0 stretch;border-radius:24px;background:transparent;padding:25px 18px;color:#175773;box-shadow:0 10px 35px #00152766;text-align:center}
#piano-flow .drop-panel h2{margin:0;padding:0;font:1000 28px/1.1 Nunito,sans-serif;color:#145572}#piano-flow .drop-panel p{margin:0;font-size:14px;line-height:1.4;font-weight:800}
#piano-flow .drop-action{min-height:54px;width:220px;max-width:100%;padding:8px 20px;border:0;box-shadow:none;background:transparent url('assets/action-v45.webp') center/contain no-repeat;color:#694800;font:1000 20px Nunito,sans-serif}
#piano-flow .drop-secondary{min-height:46px;width:220px;max-width:100%;padding:8px 15px;border:2px solid #69bed1;border-radius:15px;background:#e1f9ff;color:#145773;font:900 16px Nunito,sans-serif;box-shadow:none}
#piano-flow .drop-result-score{font:1000 64px/1 Nunito,sans-serif;color:#14748f}#piano-flow .drop-reward{padding:8px 14px;border-radius:20px;background:#fff0bc;color:#836118}
#piano-flow button:focus:not(:focus-visible){outline:none}#piano-flow button:focus-visible{outline:2px solid #1f83ae;outline-offset:2px}

#piano-flow{background:#0c1b31;color:#edf8ff}
#piano-flow .piano-scenery{background-image:url('assets/piano-sky-v281.webp');transform:none}
#piano-flow .piano-mist{position:absolute;inset:0;background:radial-gradient(ellipse at 10% 80%,#b7d4ff25,transparent 60%);animation:piano-air 20s ease-in-out infinite alternate}
@keyframes piano-air{from{transform:translate(-2%,1%)}to{transform:translate(2%,-1%)}}
#piano-flow[data-paused='true'] .piano-mist{animation-play-state:paused}
#piano-flow .piano-hud{height:100px;grid-template-rows:62px 26px}
#piano-flow .piano-score{font-size:54px}
#piano-flow .piano-hint{position:absolute;bottom:max(7px,env(safe-area-inset-bottom));left:8px;right:8px;z-index:2;margin:0;pointer-events:none;font-size:11px;line-height:1.2;font-weight:900;text-align:center;color:#f0efff;text-shadow:0 1px 4px #091025}
#piano-flow .drop-panel{gap:14px;max-height:90dvh}
#piano-flow .piano-lives .heart{max-width:25px}
#games-hub .hub-piano{position:relative}#games-hub .hub-piano .hub-cover{object-position:center 78%}
#games-hub .hub-piano-preview{position:absolute;top:12%;left:15%;width:70%;height:40%;display:flex;gap:5px;pointer-events:none}
@media(orientation:portrait){#games-hub .hub-cover{height:clamp(72px,calc((100dvh - 365px)/3),180px);max-height:none;aspect-ratio:auto}#games-hub .hub-games{gap:12px}#games-hub .hub-title{font-size:22px}#games-hub .hub-copy{padding:6px 8px 8px}}
@media(orientation:landscape) and (max-height:600px){#games-hub .hub-games{grid-template-columns:repeat(3,minmax(0,1fr))}#games-hub .hub-title{font-size:19px}#games-hub .hub-description{font-size:12px}#games-hub .hub-cover{height:110px}#piano-flow .piano-hud{height:76px;grid-template-rows:48px 20px}#piano-flow .piano-score{font-size:40px}#piano-flow .piano-pause-button{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){#piano-flow .piano-mist{animation:none}}body.reduce-motion #piano-flow .piano-mist{animation:none}
#games-hub .hub-piano-preview .skin-sprite{width:25%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 5px #08142d99)}
#games-hub .hub-piano-preview .skin-sprite:nth-child(2){transform:translateY(-12px)}

/* Use the shared mini-game result frame and gold action buttons. */
#piano-flow .piano-result-label{margin-top:10px;font-size:12px;font-weight:1000;letter-spacing:1.5px;text-transform:uppercase;color:#366778}
#piano-flow .piano-result-rewards{display:flex;align-items:center;justify-content:center;gap:22px;margin:8px 0 12px;font-size:15px;font-weight:1000}
#piano-flow .piano-result-coins{display:inline-flex;align-items:center;gap:5px}
#piano-flow .piano-result-coins img{width:24px;height:24px;object-fit:contain}
@media(max-height:650px){#piano-flow .piano-result-label{margin-top:2px}#piano-flow .piano-result-rewards{margin:3px 0 5px;font-size:13px}}

#piano-flow .piano-song{position:absolute;top:106px;left:10px;right:10px;text-align:center;margin:0;pointer-events:none;color:#fff3d0;font:900 12px Nunito,sans-serif;text-shadow:0 2px 4px #081629}