/* Beatalator: a dark stage, bright squares, every note its own colour. */
:root {
  --bg: #0d1027;
  --panel: #161a3a;
  --line: rgba(255, 255, 255, .1);
  --text: #f2f4ff;
  --muted: #a3a9cc;
  --gold: #ffc21a;
  --go: #2ee6a6;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
/* No double-tap zoom on iPads (app.js does the rest), and no copy menu on a long press. */
body { background: var(--bg); color: var(--text); font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  display: flex; flex-direction: column; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; overscroll-behavior: none; }
button, select, input { font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

/* ── Top bar ── */
.bar { flex: none; display: flex; align-items: center; gap: 14px; padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top)); flex-wrap: wrap;
  background: linear-gradient(90deg, #1b1446, #10204a); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 900; letter-spacing: 2.5px; font-size: 18px;
  background: linear-gradient(90deg, #ff4d6d, #ffd60a, #2ec27e, #00b4d8, #7b5cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo { width: 30px; height: 30px; background: url(icon.svg) center / contain no-repeat; }
.play { width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--go); color: #062; font-size: 24px; font-weight: 900;
  box-shadow: 0 0 0 4px rgba(46, 230, 166, .25), 0 4px 0 #129c6d; transition: transform .08s; }
.play:active { transform: translateY(2px); }
.play.on { background: #ff4d6d; color: #fff; box-shadow: 0 0 0 4px rgba(255, 77, 109, .3), 0 4px 0 #b3203d; }
.tempo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--muted); }
.tempo input { width: 130px; accent-color: var(--gold); }
.tempo b { color: var(--text); min-width: 32px; }
.insts { display: flex; gap: 4px; background: rgba(255, 255, 255, .06); padding: 3px; border-radius: 999px; }
.insts button { border: 0; background: none; border-radius: 999px; padding: 8px 13px; font-weight: 800; font-size: 14px; }
.insts button.on { background: var(--gold); color: #111; }
.bar-right { margin-left: auto; display: flex; gap: 8px; }
.pill { border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; }

/* ── Learning and grid buttons ── */
.learn { flex: none; display: flex; gap: 8px; padding: 8px 14px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: #0f1331; }
.chip { border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 8px 12px; font-weight: 800; font-size: 14px; }
.chip[aria-pressed="true"] { background: #7b5cff; border-color: #7b5cff; }
.spacer { flex: 1; }
.bars-out { font-weight: 800; color: var(--muted); font-size: 14px; min-width: 52px; text-align: center; }

/* ── The grid ── */
.main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scroller { position: relative; flex: 1; min-height: 0; overflow: auto; }
#grid { display: block; touch-action: none; }
.hint { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); margin: 0; padding: 12px 22px; border-radius: 999px; pointer-events: none;
  background: rgba(13, 16, 39, .85); border: 1.5px solid var(--gold); font-size: 20px; font-weight: 800; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.06); } }

/* ── The tune as music ── */
.music { flex: none; height: 30vh; overflow: auto; background: #fbfaf6; color: #111; border-top: 4px solid #7b5cff; padding: 8px 12px; }
.music-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 15px; }
.music-head .muted { color: #666; font-size: 13px; }
.score svg .sv-note.now path, .score svg .sv-note.now text { fill: #e0218a; stroke: #e0218a; }

/* ── Pop-ups ── */
.sheet { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: grid; place-items: center; z-index: 20; padding: 16px; }
.sheet-card { background: var(--panel); border: 1px solid rgba(255, 255, 255, .15); border-radius: 20px; padding: 20px 22px; width: min(620px, 100%); max-height: 88vh; overflow: auto; border-top: 6px solid var(--gold); }
.sheet-card h2 { margin: 0 0 10px; }
.sheet-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.go { background: var(--gold); color: #111; border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 900; }
.ghost { background: none; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 10px 20px; font-weight: 800; }
.set { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.set b { display: block; }
.set small { color: var(--muted); }
.set select { padding: 8px 10px; border-radius: 10px; background: #0d1027; border: 1px solid rgba(255, 255, 255, .25); font-size: 16px; }
.seg { display: flex; background: rgba(255, 255, 255, .07); border-radius: 999px; padding: 3px; }
.seg { flex: none; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 7px 14px; font-weight: 800; white-space: nowrap; }
.seg button.on { background: var(--gold); color: #111; }
.mission { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); margin-bottom: 8px; }
.mission .tick { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); display: grid; place-items: center; font-weight: 900; }
.mission.done .tick { background: var(--go); border-color: var(--go); color: #063; }
.mission b { display: block; font-size: 16px; }
.mission span { color: var(--muted); font-size: 14px; line-height: 1.35; }
.mission.done b::after { content: '  Done!'; color: var(--go); font-size: 13px; }
.share-link { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: #0d1027; font-size: 13px; -webkit-user-select: text; user-select: text; }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; background: var(--go); color: #042; font-weight: 900; font-size: 18px;
  padding: 12px 22px; border-radius: 999px; box-shadow: 0 8px 30px rgba(46, 230, 166, .5); animation: toast 2.6s ease-out forwards; pointer-events: none; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -12px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 760px) {
  .brand { font-size: 0; gap: 0; }
  .tempo input { width: 90px; }
}

/* ── My voice: the recorder ── */
.rec { display: flex; align-items: center; gap: 16px; margin: 14px 0 6px; }
.rec-btn { flex: none; width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; background: #ff3b5c; color: #fff; font-size: 30px; font-weight: 900;
  box-shadow: 0 0 0 6px rgba(255, 59, 92, .25); }
.rec-btn.on { animation: rec 1s ease-in-out infinite; }
@keyframes rec { 50% { box-shadow: 0 0 0 14px rgba(255, 59, 92, .15); } }
.rec-bar { flex: 1; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.rec-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2ee6a6, #ffd60a, #ff4d6d); transition: width .05s; }
.rec-msg { min-height: 2.6em; font-size: 15px; }