/* Piano Tiles Tap: the screens around the canvas. A calm light home; the keys full height in play. */

/* home */
.home{align-items:center;justify-content:center;gap:.75em;padding:1.2em;text-align:center}
.home .title{font-size:clamp(2.3em,10vw,4em)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.15em;max-width:22em}
.song-line{margin:-.2em 0 0;color:var(--ink-soft);font-size:.95em;min-height:1.4em}
.home .links{display:flex;gap:.1em .3em;justify-content:center;flex-wrap:wrap}

/* the little piano on the home screen: four lanes, tiles falling */
.hero{position:relative;width:min(13em,60vw);height:min(30vh,10em);background:var(--paper);border-radius:1em;overflow:hidden;
  display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 10px 30px rgba(22,32,46,.12)}
.hero i{border-right:1px solid #E3E8EF}
.hero i:last-of-type{border-right:0}
.hero b{position:absolute;width:23%;height:34%;border-radius:.35em;background:var(--key);top:-40%;animation:fall 2.4s linear infinite}
.hero .k1{left:1%;animation-delay:0s}
.hero .k2{left:51%;animation-delay:-.6s}
.hero .k3{left:26%;animation-delay:-1.2s}
.hero .k4{left:76%;animation-delay:-1.8s}
@keyframes fall{to{top:110%}}

@media (max-height:480px){.home .hero{display:none}.home{gap:.35em;padding:.6em}.home .title{font-size:2.3em}.tagline{font-size:1em}}
@media (max-height:480px) and (min-width:600px){.home{padding-left:150px;padding-right:150px}}

/* play */
#game{background:var(--bg)}
#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:.5em;pointer-events:none;
  padding:max(.5em,env(safe-area-inset-top)) max(.6em,env(safe-area-inset-right)) .3em max(.6em,env(safe-area-inset-left));z-index:5}
.hud > *{pointer-events:auto}
.hud .song-pill,.hud .count{pointer-events:none}
.song-pill{display:flex;flex-direction:column;align-items:center;gap:.3em;background:rgba(255,255,255,.94);border:1px solid var(--hair);border-radius:999px;
  padding:.4em 1.2em .55em;line-height:1.1;min-width:0;max-width:calc(100% - 9em);box-shadow:0 2px 10px rgba(0,0,0,.1)}
.song-pill span{font-weight:700;font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.prog{display:block;width:7em;max-width:100%;height:5px;border-radius:3px;background:#E3E8EF;overflow:hidden}
.prog b{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.count{min-width:48px;height:48px;padding:0 .7em;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid var(--hair);display:grid;place-items:center;
  font-weight:800;font-size:1.2em;font-variant-numeric:tabular-nums;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.count.bump{animation:bump .22s}
@keyframes bump{40%{transform:scale(1.25);color:var(--accent)}}
@media (max-height:480px){.hud{padding-top:.3em}.song-pill{padding:.25em 1em .4em}.song-pill span{font-size:.9em}}

/* cards */
.how p{text-align:left;margin:.45em 0;color:var(--ink)}
.how b{color:var(--accent)}
.how kbd{display:inline-block;min-width:1.6em;text-align:center;border:1px solid var(--hair);border-bottom-width:3px;border-radius:.35em;padding:0 .3em;font:700 .9em/1.5 var(--sans);background:var(--bg)}
.songs{display:grid;grid-template-columns:1fr;gap:.4em;max-height:52vh;overflow:auto;padding:.2em}
.songs .choice{display:flex;align-items:center;gap:.6em;text-align:left;width:100%}
.songs .choice span{display:inline-grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:#E3E8EF;font-weight:800;font-size:.85em;flex:none}
.songs .choice.done span{background:var(--good);color:#fff}
.songs .choice.next{border:2px solid var(--accent)}
.songs .choice:disabled{opacity:.45}
@media (min-width:560px),(max-height:480px){.songs{grid-template-columns:1fr 1fr}}
@media (max-height:480px){.songs{max-height:58vh}}
.card .sub{font-size:.8em;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)!important;font-weight:800;text-align:center;margin:0 0 .3em}
.result-line{font-size:1.2em;color:var(--ink);font-weight:700;text-align:center;margin:.2em 0}
.card p{text-align:center;color:var(--ink-soft);margin:.3em 0}
body:has(> .veil) .toast{display:none}
body:has(> .veil) .hud{visibility:hidden}