/* Small hand-written layer on top of Tailwind: animations and a few
   components that would be noisy as utility soup. */

:root { color-scheme: dark; }

.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { scrollbar-width: none; }

/* ---------------------------------------------------------- celebrations */
@keyframes pet-pop   { 0%{transform:scale(.7);opacity:0} 60%{transform:scale(1.06);opacity:1} 100%{transform:scale(1)} }
@keyframes pet-rise  { from{transform:translateY(14px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes pet-float { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(-46px);opacity:0} }
@keyframes pet-flame { 0%,100%{transform:scale(1) rotate(-2deg)} 50%{transform:scale(1.14) rotate(3deg)} }
@keyframes pet-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes pet-ring  { from{stroke-dashoffset:var(--from)} to{stroke-dashoffset:var(--to)} }
@keyframes pet-shine { from{background-position:-200% 0} to{background-position:200% 0} }

.pop         { animation: pet-pop .32s cubic-bezier(.2,.9,.3,1.3) both; }
.rise        { animation: pet-rise .35s ease-out both; }
.shake       { animation: pet-shake .3s ease-in-out; }
.streak-flame{ animation: pet-flame 2.2s ease-in-out infinite; display:inline-block; }
.xp-float    { animation: pet-float 1.1s ease-out forwards; }

.shimmer {
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.14) 40%, transparent 60%);
  background-size: 200% 100%;
  animation: pet-shine 2.4s linear infinite;
}

/* --------------------------------------------------------------- keyboard */
.piano { --white-w: 40px; --white-h: 150px; }
.piano-keys { position: relative; display: flex; user-select: none; touch-action: manipulation; }

.pkey {
  position: relative; border: 0; padding: 0; cursor: pointer;
  transition: background-color .08s linear, transform .06s linear;
}
.pkey-white {
  width: var(--white-w); height: var(--white-h);
  background: linear-gradient(180deg,#f8fafc,#e2e8f0);
  border-radius: 0 0 6px 6px;
  box-shadow: inset -1px 0 0 rgba(0,0,0,.18), 0 3px 0 rgba(0,0,0,.35);
  color:#475569;
}
.pkey-black {
  position: absolute; top: 0; z-index: 2;
  width: calc(var(--white-w) * .62); height: calc(var(--white-h) * .62);
  background: linear-gradient(180deg,#334155,#0f172a);
  border-radius: 0 0 5px 5px;
  box-shadow: 0 3px 0 rgba(0,0,0,.6);
  color:#cbd5e1;
}
.pkey:active, .pkey.is-down { transform: translateY(2px); }
.pkey-white.is-down { background: linear-gradient(180deg,#c7d2fe,#a5b4fc); }
.pkey-black.is-down { background: linear-gradient(180deg,#6366f1,#4338ca); }
.pkey-white.is-hint { background: linear-gradient(180deg,#bbf7d0,#86efac); }
.pkey-black.is-hint { background: linear-gradient(180deg,#16a34a,#166534); }
.pkey-white.is-wrong{ background: linear-gradient(180deg,#fecaca,#fca5a5); }
.pkey-black.is-wrong{ background: linear-gradient(180deg,#dc2626,#7f1d1d); }
.pkey-label {
  position: absolute; bottom: 6px; left: 0; right: 0;
  font-size: 9px; font-weight: 600; text-align: center; letter-spacing: .02em;
  pointer-events: none;
}
.pkey-black .pkey-label { bottom: 4px; }

/* ------------------------------------------------------------- heatmap */
.heat-cell { width: 11px; height: 11px; border-radius: 2px; }
.heat-0 { background:#111a2e; }
.heat-1 { background:#1e3a5f; }
.heat-2 { background:#2f5fa8; }
.heat-3 { background:#4d86e6; }
.heat-4 { background:#7ba8ff; }

/* --------------------------------------------------------------- markdown */
.md h1,.md h2,.md h3 { font-weight:700; color:#fff; margin:1.1em 0 .4em; }
.md h1 { font-size:1.25rem } .md h2 { font-size:1.1rem } .md h3 { font-size:1rem }
.md p { margin:.55em 0; }
.md ul { margin:.55em 0; padding-left:1.15em; list-style: disc; }
.md ol { margin:.55em 0; padding-left:1.35em; list-style: decimal; }
.md li { margin:.22em 0; }
.md strong { color:#fff; font-weight:600; }
.md code { background:rgba(255,255,255,.08); padding:.1em .35em; border-radius:4px; font-size:.9em; }
.md hr { border-color: rgba(255,255,255,.1); margin: 1em 0; }

/* -------------------------------------------------------------- utilities */
.card { background: rgba(17,26,46,.72); border:1px solid rgba(255,255,255,.06); border-radius: 1rem; }
.card-hover:hover { border-color: rgba(127,149,255,.35); background: rgba(22,33,58,.85); }

input[type="range"] { accent-color: #5b73f0; }

.tap-pad:active { transform: scale(.98); }

/* ---------------------------------------------- blurred question labels */
.veil.is-veiled > * {
  filter: blur(5px);
  user-select: none;
  transition: filter .18s ease;
}
.veil.is-veiled:hover > * { filter: blur(3.5px); }
.veil { cursor: pointer; }
.veil:not(.is-veiled) { cursor: default; }

/* ------------------------------------------------------------- notation */
.stave { display: block; margin: 0 auto; }
.answer-btn .stave { pointer-events: none; }