/* Numbered Piano — look A "Craft Table": cream paper, ink outlines, pink for "press this one". */
:root{
	--paper:#fbf1dc; --ink:#3b2a2a; --pink:#ff8fb8; --yellow:#ffd86b; --mint:#d9f0d0;
	--key:#fffdf6; --plum:#6b4a8a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);overflow:hidden;
	font-family:'Sniglet',system-ui,sans-serif;font-weight:800;touch-action:none;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}

/* The screen corners belong to the shared buttons: home top-left, fullscreen top-right, sound
   bottom-left. So the header keeps 64px clear on the left and 72px on the right, and the keyboard
   stops 68px above the bottom edge. */
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;gap:14px;
	padding:max(20px,env(safe-area-inset-top)) 40px 68px;max-width:1400px;margin:0 auto}
#top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-left:64px;padding-right:32px;min-height:56px;flex-shrink:0}
#title{font-family:'Chewy',sans-serif;font-weight:400;font-size:clamp(26px,4vw,40px);line-height:1;margin:0}
#modes{display:flex;gap:12px}
.pill{min-width:112px;height:48px;padding:0 18px;border:3px solid var(--ink);border-radius:24px;background:#fff;
	font-size:20px;box-shadow:0 4px 0 var(--ink);white-space:nowrap}
.pill.on{background:var(--yellow)}
.pill:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}

#strip{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:104px;justify-content:center}
#chips{display:flex;align-items:center;justify-content:center;gap:12px;height:100px}
.chip{width:64px;height:64px;border:3px solid var(--ink);border-radius:18px;background:#fff;
	display:flex;align-items:center;justify-content:center;font-family:'Chewy',sans-serif;font-size:36px;flex-shrink:0}
.chip.done{background:var(--mint)}
.chip.now{width:96px;height:96px;border-width:4px;border-radius:24px;background:var(--pink);font-size:60px;box-shadow:0 6px 0 var(--ink)}
#bar{width:min(420px,70vw);height:10px;border:2px solid var(--ink);border-radius:6px;background:#fff;overflow:hidden}
#barFill{display:block;height:100%;width:0;background:var(--pink);transition:width .25s}
#hint{margin:0;text-align:center;font-size:22px;min-height:28px;flex-shrink:0}
body.free #strip,body.free #hint{visibility:hidden}

#case{flex:1;min-height:150px;position:relative;border:4px solid var(--ink);border-radius:28px;background:var(--ink);
	padding:14px 14px 0;box-shadow:0 6px 0 var(--ink)}
#keys{position:relative;height:100%}
#white{display:flex;gap:4px;height:100%}
.w{flex:1;min-width:0;border:0;border-radius:0 0 16px 16px;background:var(--key);color:var(--ink);
	display:flex;align-items:flex-end;justify-content:center;padding:0 0 clamp(8px,3vh,20px);
	font-family:'Chewy',sans-serif;font-size:clamp(26px,min(5.2vw,9vh),58px);transition:transform .06s}
.w.down{transform:translateY(5px);background:#ece3cd}
.w.glow{background:var(--pink);animation:glow 1s ease-in-out infinite}
.w.glow.down{background:#ff6fa3}
.w.nudge{animation:nudge .5s ease-in-out infinite}
.b{position:absolute;top:0;width:6.6%;height:58%;border:0;border-radius:0 0 10px 10px;background:var(--plum);transition:transform .06s}
.b.down{transform:translateY(4px);background:#523a6b}
@keyframes glow{50%{box-shadow:inset 0 0 0 5px #fff}}
@keyframes nudge{50%{transform:translateY(-6px)}}

.pop{position:absolute;pointer-events:none;font-family:'Chewy',sans-serif;font-size:30px;color:var(--pink);
	text-shadow:0 2px 0 var(--ink);animation:pop .7s ease-out forwards}
@keyframes pop{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-70px) scale(1.3)}}

#recRow{flex-shrink:0;margin-top:-4px}
#recRow[hidden],#listenBtn[hidden]{display:none}
body.rec #bar{visibility:hidden}
.pill:disabled{opacity:.4;box-shadow:0 4px 0 var(--ink)}
.make{min-height:52px;padding:6px 18px;border:3px dashed var(--ink);border-radius:20px;background:var(--mint);font-size:20px;margin-top:4px}
.make.on{background:var(--yellow)}
#sheet .make{width:100%}
body.rec #strip .chip.now{background:var(--yellow)}
#sheet,#done{position:fixed;inset:0;z-index:50;background:rgba(59,42,42,.45);display:flex;align-items:center;justify-content:center;padding:20px}
#sheet[hidden],#done[hidden]{display:none}
.card{background:var(--paper);border:4px solid var(--ink);border-radius:28px;box-shadow:0 8px 0 var(--ink);padding:24px;
	width:min(560px,100%);max-height:100%;overflow:auto;text-align:center}
.card h2{font-family:'Chewy',sans-serif;font-weight:400;font-size:34px;margin:0 0 16px}
#songs{display:grid;gap:12px}
.song{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 18px;
	border:3px solid var(--ink);border-radius:20px;background:#fff;font-size:22px;box-shadow:0 4px 0 var(--ink);text-align:left}
.song.cur{background:var(--yellow)}
.song:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.song .st{font-size:22px;letter-spacing:2px;white-space:nowrap;color:var(--ink)}
.song .st i{font-style:normal;opacity:.25}
.song .st i.on{opacity:1}
#doneStars{font-size:56px;letter-spacing:8px;margin:0 0 18px}
#doneStars i{font-style:normal;opacity:.25}
#doneStars i.on{opacity:1}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.cf{position:absolute;top:-20px;width:12px;height:18px;border:2px solid var(--ink);border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

/* Short landscape screens (phone on its side): smaller strip so the keys keep their height. */
@media (max-height:560px){
	#app{gap:6px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:62px}
	#top{min-height:48px}
	.pill{height:44px;min-width:96px;font-size:18px}
	#strip{min-height:64px}
	#chips{height:64px;gap:8px}
	.chip{width:44px;height:44px;font-size:24px;border-radius:12px}
	.chip.now{width:60px;height:60px;font-size:38px}
	#bar,#hint{display:none}
}
/* Upright phone: seven chips would not fit across, so show fewer. */
@media (max-width:560px){
	#app{padding-left:14px;padding-right:14px}
	#top{padding-right:60px;padding-left:60px;flex-wrap:wrap}
	#modes{flex:1 1 100%;gap:8px;margin:8px 0 0 -46px}
	#modes .pill{flex:1;min-width:0;padding:0 4px;font-size:15px;height:44px}
	#modes .em{display:none}
	.pill{min-width:0;padding:0 14px;font-size:17px}
	#recRow{gap:8px}
	#recRow .pill{padding:0 10px;font-size:15px}
	#chips{gap:6px}
	.chip{width:44px;height:44px;font-size:24px;border-radius:12px}
	.chip.now{width:68px;height:68px;font-size:42px}
	#case{border-radius:18px;padding:8px 8px 0}
}
@media (prefers-reduced-motion:reduce){.w.glow,.w.nudge,.pop,.cf{animation:none}}