/* Piano Pad: blocky, Minecraft-inspired look. One fixed theme (it's a game). */
:root {
  --ui: #c6c6c6;
  --ui-light: #ffffff;
  --ui-dark: #555555;
  --ink: #2b2b2b;
  --paper: #f6ecd2;
  --paper-line: #b89f72;
  --green: #5d9e36;
  --green-dark: #3b6b1f;
  --red: #c0392b;
  --gold: #ffd84a;
  --sky: #7ec8f5;
  --pixel: 'Press Start 2P', monospace;
  --small: 'Silkscreen', monospace;
}

* { box-sizing: border-box; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #3d2b1d;
  color: var(--ink);
  font: 16px var(--small);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#app { height: 100%; }
img { image-rendering: pixelated; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.screen {
  height: 100%; display: flex; flex-direction: column;
  background: linear-gradient(rgba(20, 12, 6, 0.55), rgba(20, 12, 6, 0.55)), var(--dirt);
  background-size: auto, 64px 64px; image-rendering: pixelated;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  gap: 10px;
}
.spacer { flex: 1; }
.row { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ---------- Minecraft-style buttons ---------- */
.btn, .tool, .seg, .card, .member, .swatch-btn {
  border: 3px solid #000;
  background: var(--ui);
  box-shadow: inset 3px 3px 0 var(--ui-light), inset -3px -3px 0 var(--ui-dark);
  cursor: pointer;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; min-width: 48px; padding: 6px 14px; font-size: 18px; font-family: var(--small); font-weight: 700;
}
.btn:active, .tool:active, .seg:active, .card:active { box-shadow: inset -3px -3px 0 var(--ui-light), inset 3px 3px 0 var(--ui-dark); }
.btn.primary { background: var(--green); color: #fff; box-shadow: inset 3px 3px 0 #8fd463, inset -3px -3px 0 var(--green-dark); text-shadow: 2px 2px 0 #2a4d15; }
.btn.danger { background: #d9665b; color: #fff; }
.btn.big { font-size: 22px; min-height: 56px; padding: 6px 20px; }
.btn.huge { font-family: var(--pixel); font-size: 28px; padding: 22px 40px; }
.btn.small { min-height: 40px; min-width: 40px; padding: 4px 8px; font-size: 18px; }
.btn:disabled { opacity: 0.5; }

.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.song-title, .title-input {
  font-family: var(--pixel); font-size: 18px; color: #fff; text-shadow: 3px 3px 0 #000;
}
.title-input { background: rgba(0, 0, 0, 0.3); border: 3px solid transparent; padding: 8px 10px; flex: 1 1 auto; min-width: 6ch; max-width: 22ch; -webkit-user-select: text; user-select: text; }
.song-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-input:focus { outline: none; border-color: var(--gold); }

.panel {
  background: var(--ui); border: 3px solid #000; padding: 22px 28px;
  box-shadow: inset 3px 3px 0 var(--ui-light), inset -3px -3px 0 var(--ui-dark), 0 10px 0 rgba(0, 0, 0, 0.3);
  text-align: center; font-size: 20px;
}

/* ---------- Home ---------- */
.home { position: relative; }
.home-head { display: flex; align-items: center; gap: 16px; }
.home h1 {
  font-family: var(--pixel); font-size: clamp(26px, 5vw, 44px); color: var(--gold); margin: 6px 0; flex: 1;
  text-shadow: 4px 4px 0 #8a5a00, 7px 7px 0 #000;
}
.me-btn { display: flex; flex-direction: column; align-items: center; color: #fff; font-family: var(--pixel); font-size: 12px; text-shadow: 2px 2px 0 #000; }
.me-sprite { width: 50px; height: 70px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; overflow-y: auto; padding: 4px 4px 80px; align-content: start; flex: 1; }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; min-height: 150px; text-align: left; font-family: var(--small); }
.card.teacher { background: var(--paper); box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--paper-line); }
.card-title { font-family: var(--pixel); font-size: 14px; line-height: 1.5; }
.card .badge { position: absolute; top: 8px; right: 10px; font-size: 22px; }
.mini-strip { display: flex; gap: 2px; min-height: 26px; flex-wrap: wrap; }
.mini-block { width: 24px; height: 24px; background-size: cover; image-rendering: pixelated; border: 2px solid rgba(0, 0, 0, 0.5); }
.mini-band { display: flex; gap: 4px; align-items: flex-end; margin-top: auto; }
.mini-sprite { height: 32px; }
.card.add { align-items: center; justify-content: center; background: rgba(198, 198, 198, 0.7); }
.card.add .plus { font-family: var(--pixel); font-size: 48px; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background-size: 48px 48px; image-rendering: pixelated; border-top: 3px solid #000; pointer-events: none; }
.parent { position: relative; color: #fff; }
.parent summary { list-style: none; cursor: pointer; font-size: 22px; opacity: 0.5; padding: 8px; }
.parent summary::-webkit-details-marker { display: none; }
.parent-menu { position: absolute; right: 0; top: 44px; z-index: 5; background: var(--ui); color: var(--ink); border: 3px solid #000; padding: 12px; display: flex; flex-direction: column; gap: 10px; width: 260px; font-size: 14px; }
.parent-menu a { text-decoration: underline; }
.parent-menu button { text-align: left; padding: 6px; }
.hint { color: #555; font-size: 12px; }

/* ---------- Track ---------- */
.track-box { flex: 1; min-height: 0; display: flex; align-items: center; }
.track-wrap { display: flex; width: 100%; background: var(--paper); border: 3px solid #000; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35); }
.labels { position: relative; flex: 0 0 64px; border-right: 3px solid var(--paper-line); height: calc(78px + var(--rows-h)); }
.label-rhythm { display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--paper-line); }
.label { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--pixel); font-size: 16px; }
.label .swatch { width: 20px; height: 20px; background-size: cover; image-rendering: pixelated; border: 2px solid #000; }
.track { flex: 1; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.track-inner { position: relative; }
.rhythm-line { display: block; }
.rhythm-line .head { fill: var(--ink); }
.rhythm-line .head.hollow { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.rhythm-line .stem, .rhythm-line .flag { stroke: var(--ink); stroke-width: 2.4; fill: none; }
.rhythm-line .beam { stroke: var(--ink); stroke-width: 6; }
.rhythm-line .rest { stroke: var(--ink); stroke-width: 3.5; fill: none; stroke-linejoin: round; }
.rhythm-line .dot { fill: var(--ink); }
.rhythm-line .bar { stroke: var(--paper-line); stroke-width: 3; }
.rhythm-line .staffline { stroke: var(--paper-line); stroke-width: 1.5; opacity: 0.5; }
.rhythm-line .syl { font-family: var(--small); font-size: 15px; fill: #6b5433; text-anchor: middle; }
.rows { position: relative; }
.row-bg { position: absolute; left: 0; right: 0; background: rgba(126, 200, 245, 0.28); }
.row-bg.alt { background: rgba(126, 200, 245, 0.16); }
.beat-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0, 0, 0, 0.08); }
.beat-line.bar { width: 3px; background: var(--paper-line); opacity: 0.6; }
.block {
  position: absolute; background-size: 48px 48px; image-rendering: pixelated; border: 3px solid rgba(0, 0, 0, 0.75);
  display: flex; align-items: center; justify-content: flex-start; padding-left: 8px;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.35), inset -3px -3px 0 rgba(0, 0, 0, 0.3);
  transition: filter 0.2s, opacity 0.2s;
}
.block .letter { font-family: var(--pixel); font-size: 18px; color: #fff; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.block.rest { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.06) 0 6px, transparent 6px 12px); border: 3px dashed rgba(0, 0, 0, 0.3); box-shadow: none; color: #6b5433; font-size: 16px; justify-content: center; padding: 0; }
.append-hint { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; border: 3px dashed rgba(107, 84, 51, 0.35); font-family: var(--pixel); font-size: 28px; color: rgba(107, 84, 51, 0.45); pointer-events: none; }

.pop { animation: pop 0.35s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18) translateY(-6px); } 100% { transform: scale(1); } }
.shake { animation: shake 0.35s; }
@keyframes shake { 0%, 100% { translate: 0; } 20% { translate: -7px; } 40% { translate: 7px; } 60% { translate: -5px; } 80% { translate: 5px; } }
.particle { position: absolute; width: 8px; height: 8px; pointer-events: none; z-index: 4; animation: burst 0.65s ease-out forwards; }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* ---------- Editor ---------- */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar.note { color: #fff; font-size: 18px; text-shadow: 2px 2px 0 #000; justify-content: center; padding: 16px; }
.tool { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; padding: 0; background: var(--paper); box-shadow: inset 3px 3px 0 #fffaf0, inset -3px -3px 0 var(--paper-line); }
.tool.on { outline: 4px solid var(--gold); outline-offset: 0; background: #fff6d8; }
.tool:disabled { opacity: 0.4; }
.tool .icon { width: 56px; height: 64px; }
.erase-icon { font-size: 34px; }
.clef-btn { font-family: var(--small), 'Noto Music'; font-size: 20px; min-width: 64px; }
.btn.write { font-size: 20px; min-height: 64px; }
.btn.write.recording { background: #e8433a; color: #fff; animation: glow-red 1s infinite alternate; }
@keyframes glow-red { to { box-shadow: 0 0 18px #e8433a; } }
.is-writing .track-wrap { outline: 4px solid #e8433a; }

/* ---------- Play ---------- */
.stage { position: relative; flex: 1; display: flex; min-height: 0; }
.segs { display: flex; }
.seg { min-height: 48px; padding: 6px 12px; font-size: 16px; font-family: var(--small); font-weight: 700; }
.seg.on { background: var(--gold); box-shadow: inset 3px 3px 0 #fff6a8, inset -3px -3px 0 #c99a16; }
.speed { display: flex; align-items: center; gap: 6px; color: #fff; font-family: var(--pixel); font-size: 12px; }
.ear { display: flex; align-items: center; gap: 4px; font-size: 24px; }
.meter { width: 50px; height: 12px; background: #222; border: 2px solid #000; }
.meter-fill { height: 100%; width: 0; background: var(--green); transition: width 60ms linear; }
.hop { animation: hop 0.35s ease-out; }
@keyframes hop { 0% { transform: translateY(0); } 45% { transform: translateY(-22px); } 100% { transform: translateY(0); } }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); z-index: 10; }
.countin { position: absolute; top: 50%; left: 50%; translate: -50% -50%; font-family: var(--pixel); font-size: 120px; color: #fff; text-shadow: 8px 8px 0 #000; z-index: 11; pointer-events: none; display: none; }
.pulse { animation: pulse 0.3s ease-out; }
@keyframes pulse { from { transform: scale(1.4); } to { transform: scale(1); } }
.stars { font-size: 72px; letter-spacing: 8px; }
.star { color: #777; text-shadow: 4px 4px 0 #000; }
.star.on { color: var(--gold); animation: pop 0.5s ease-out; }
.joined { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--pixel); font-size: 14px; }
.join-sprite { width: 80px; }

/* ---------- Band ---------- */
.band-stage { display: flex; gap: 18px; justify-content: center; align-items: flex-end; flex: 1; min-height: 0; padding-top: 10px; }
.member { display: flex; flex-direction: column; align-items: center; background: none; border: none; box-shadow: none; padding: 0; gap: 4px; }
.member-sprite { height: 110px; width: auto; transform-origin: bottom center; }
.member-sprite.locked { filter: brightness(0); opacity: 0.45; }
.member.muted .member-sprite { opacity: 0.35; }
.member.muted .member-name::after { content: ' 💤'; }
.member-name { font-family: var(--pixel); font-size: 12px; color: #fff; text-shadow: 2px 2px 0 #000; min-height: 16px; }
.member-block { width: 96px; height: 40px; background-size: 48px 48px; image-rendering: pixelated; border: 3px solid #000; }
.band-hint { text-align: center; color: #fff; font-size: 18px; text-shadow: 2px 2px 0 #000; }
.row.center { justify-content: center; }

/* ---------- Me ---------- */
.me-body { flex: 1; display: flex; gap: 24px; min-height: 0; align-items: center; justify-content: center; }
.board { height: 100%; max-height: 640px; display: grid; gap: 0; border: 4px solid #000; touch-action: none;
  background: repeating-conic-gradient(#ddd 0 25%, #f4f4f4 0 50%) 0 0 / 24px 24px; }
.cell { border: 1px solid rgba(0, 0, 0, 0.12); }
.me-side { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.palette { display: grid; grid-template-columns: repeat(4, 56px); gap: 8px; }
.swatch-btn { width: 56px; height: 56px; padding: 0; font-size: 24px; }
.swatch-btn.on { outline: 4px solid var(--gold); outline-offset: 2px; }
.me-stand { display: flex; flex-direction: column; align-items: center; }
.me-preview { width: 80px; height: 112px; }

@media (max-width: 800px) {
  .seg { font-size: 13px; padding: 4px 8px; }
  .song-title, .title-input { font-size: 14px; }
  .me-body { flex-direction: column; }
  .board { height: auto; width: min(100%, 360px); }
}

/* ---------- Test keyboard ---------- */
.test-kb { display: flex; gap: 8px; align-items: stretch; flex: 0 0 auto; height: 96px; }
.kb-label { color: #fff; font-size: 13px; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; opacity: 0.7; }
.kb-keys { position: relative; flex: 1; max-width: 720px; margin: 0 auto; }
.kb-keys button { position: absolute; top: 0; padding: 0; border: 2px solid #000; touch-action: none; }
.kb-keys .wk { width: calc(100% / var(--n)); height: 100%; background: #fafaf7; border-radius: 0 0 6px 6px; color: #666; font-family: var(--pixel); font-size: 11px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.kb-keys .bk { width: calc(100% / var(--n) * 0.6); height: 60%; background: #1b1b1b; border-radius: 0 0 4px 4px; z-index: 1; }
.kb-keys .wk.down { background: #ffe98a; }
.kb-keys .bk.down { background: #6b5a1a; }
.parent-menu .check { display: flex; gap: 8px; align-items: flex-start; }

/* ---------- Practice: tower scene + staff ---------- */
.play .stage { flex-direction: column; gap: 10px; }
.scene-box { flex: 1; min-height: 150px; display: flex; }
.build { position: relative; flex: 1; overflow: hidden; border: 3px solid #000;
  background: linear-gradient(#7ec8f5, #b9e3fb); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35); }
.build .cloud { position: absolute; background: #fff; height: 18px; box-shadow: 18px -10px 0 #fff, 36px 0 0 #fff; width: 36px; opacity: 0.9; }
.build .cloud.c1 { top: 22px; left: 12%; }
.build .cloud.c2 { top: 50px; right: 18%; transform: scale(0.7); }
.build-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background-size: 40px 40px; image-rendering: pixelated; border-top: 3px solid #000; }
.tower { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); }
.tblock { position: absolute; image-rendering: pixelated; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55); }
.tblock.cracked { filter: brightness(0.9); }
.drop { animation: drop 0.28s ease-in; }
@keyframes drop { from { transform: translateY(-60px); opacity: 0.2; } to { transform: none; opacity: 1; } }
.climber { position: absolute; left: 0; top: 0; z-index: 3; transition: transform 0.25s ease-out; pointer-events: none; }
.climber img { display: block; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.35)); }

.staff-box { flex: 0 0 auto; }
.staff-page { background: var(--paper); border: 3px solid #000; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35); overflow: hidden; box-sizing: content-box; }
.staff-systems { transition: transform 0.3s ease-out; }
.staff { display: block; }
.staff .sl { stroke: #3b3226; stroke-width: 1.6; }
.staff .bl { stroke: #3b3226; stroke-width: 2.4; }
.staff .bl.thin { stroke-width: 2; }
.staff .ledger { stroke: #3b3226; stroke-width: 1.8; }
.staff .head { fill: var(--ink); }
.staff .head.hollow { fill: var(--paper); stroke: var(--ink); stroke-width: 2.6; }
.staff .stem, .staff .flag { stroke: var(--ink); stroke-width: 2.2; fill: none; }
.staff .beam { stroke: var(--ink); }
.staff .dot { fill: var(--ink); }
.staff .acc { font-family: 'Noto Music', serif; fill: var(--ink); text-anchor: middle; }
.staff .clef-glyph, .staff .rest-glyph { font-family: 'Noto Music', serif; fill: var(--ink); }
.staff .rest-glyph { dominant-baseline: middle; }
.staff .letter { font-family: var(--pixel); font-size: 17px; fill: #3b3226; text-anchor: middle; }
.staff .halo { fill: none; }
.staff .n.current .halo { fill: rgba(255, 216, 74, 0.55); stroke: #e0a800; stroke-width: 3; animation: halo 0.9s ease-in-out infinite alternate; }
@keyframes halo { to { fill: rgba(255, 216, 74, 0.2); } }
.staff .n.current .letter { fill: #b07a00; }
.staff .n.hit .head, .staff .n.fixed .head { fill: #2e8b3a; }
.staff .n.hit .head.hollow, .staff .n.fixed .head.hollow { fill: #bfe8c3; stroke: #2e8b3a; }
.staff .n.hit .letter { fill: #2e8b3a; }
.staff .n.perfect .halo { fill: rgba(255, 216, 74, 0.35); }
.staff .n.wrong .head { fill: #d9822b; }
.staff .n.wrong .head.hollow { fill: #f7d6b5; stroke: #d9822b; }
.staff .n.wrong .letter { fill: #d9822b; }
.staff .n.fixed .letter { fill: #2e8b3a; }
.staff .n.miss { opacity: 0.35; }
.staff .ghost { opacity: 0.45; animation: ghost 1.2s ease-out forwards; }
.staff .ghost .head { fill: #d94a3b; }
.staff .ghost .letter { fill: #d94a3b; font-size: 14px; }
@keyframes ghost { 0% { opacity: 0.75; } 70% { opacity: 0.55; } 100% { opacity: 0; } }

/* ---------- Results bar (over the scene; the staff stays visible) ---------- */
.results-bar { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 6; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--ui); border: 3px solid #000; padding: 10px 16px;
  box-shadow: inset 3px 3px 0 var(--ui-light), inset -3px -3px 0 var(--ui-dark), 0 8px 0 rgba(0, 0, 0, 0.3); animation: slide-in 0.3s ease-out; }
@keyframes slide-in { from { transform: translateY(-30px); opacity: 0; } }
.results-bar .stars { font-size: 48px; letter-spacing: 4px; line-height: 1; }
.results-bar .chips { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; }
.results-bar .chip { font-size: 16px; }
.results-bar .legend { font-size: 12px; color: #555; margin-top: 2px; }
.results-bar .joined { flex-direction: row; font-size: 12px; }
.results-bar .join-sprite { width: 56px; }
.results-bar .row { flex-wrap: nowrap; }

/* ---------- Review marks on the staff ---------- */
.staff .review rect { fill: #e8433a; }
.staff .review text { fill: #d9822b; font-family: -apple-system, system-ui, sans-serif; font-weight: 700; text-anchor: middle; }
.staff .review { animation: pop 0.4s ease-out; }

/* ---------- Scene variety ---------- */
.build .moon { position: absolute; top: 18px; right: 12%; width: 34px; height: 34px; background: #f4f1d8; box-shadow: inset -8px -6px 0 #d9d4a8; }
.build .star-px { position: absolute; width: 4px; height: 4px; background: #fff; opacity: 0.85; }
.biome-sunset .cloud { background: #ffe1c9; box-shadow: 18px -10px 0 #ffe1c9, 36px 0 0 #ffe1c9; }

/* ---------- Narrow screens (portrait iPad) ---------- */
@media (max-width: 900px) {
  .seg-label { display: none; }
  .seg { font-size: 22px; min-width: 56px; }
  .bar .btn.big { font-size: 18px; padding: 6px 12px; }
}

/* ---------- Homework / home extras ---------- */
.card-stars { font-size: 20px; color: #777; letter-spacing: 2px; }
.card-stars .on { color: var(--gold); text-shadow: 2px 2px 0 #8a5a00; }
.parent-menu .menu-btn { font-weight: 700; }
.btn.faint { opacity: 0.45; }
.grownup-note { color: #fff; font-size: 14px; text-shadow: 1px 1px 0 #000; background: rgba(0, 0, 0, 0.35); padding: 8px 12px; }