* { box-sizing: border-box; }

:root {
  color-scheme: dark;
  --bg: #0b1020;
  --panel: #151c2f;
  --panel2: #1b243a;
  --text: #f2f5ff;
  --muted: #a9b4cf;
  --border: #2e3a58;
  --accent: #8db5ff;
  --good: #60d797;
  --warn: #f3c969;
  --bad: #ff8181;
}

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  padding: 10px 15px;
  cursor: pointer;
}
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); color: #07101d; border-color: transparent; font-weight: 800; }
button.ghost { background: transparent; }
button.wide { width: 100%; margin-top: 16px; }
.small-btn { min-height: 38px; padding: 7px 10px; font-size: .85rem; }

.app { width: min(760px, 100%); margin: 0 auto; padding: 18px 14px 50px; }
.topbar { display: flex; justify-content: space-between; align-items: start; gap: 14px; margin-bottom: 8px; }
.topbar h1 { font-size: clamp(1.55rem, 6vw, 2.4rem); margin: 4px 0 0; }
.eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; font-weight: 800; margin: 0; }
.hidden { display: none !important; }

.panel {
  margin-top: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
}
.panel h2 { margin: 6px 0 8px; font-size: 1.35rem; }
.panel p { color: var(--muted); line-height: 1.5; }

.lesson-list { display: grid; gap: 10px; margin-top: 18px; }
.lesson-card {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--panel2);
}
.lesson-number {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900;
  border: 1px solid var(--border);
}
.lesson-card.complete .lesson-number { background: rgba(96,215,151,.14); color: var(--good); }
.lesson-title { font-weight: 800; }
.lesson-sub { color: var(--muted); font-size: .83rem; margin-top: 2px; }
.lesson-status { color: var(--muted); font-size: .82rem; text-align: right; }

.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sound-card {
  margin-top: 18px; padding: 20px; border-radius: 16px;
  background: var(--panel2); text-align: center;
}
.live-note { font-size: 5.4rem; font-weight: 900; line-height: 1; }
.status { margin: 12px 0 14px; color: var(--muted); }
.meter { height: 12px; border-radius: 999px; overflow: hidden; background: #0d1323; }
.meter-fill { height: 100%; width: 0%; background: var(--accent); transition: width 80ms linear; }

.learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.learn-card {
  border: 1px solid var(--border); background: var(--panel2);
  border-radius: 16px; padding: 12px 8px; text-align: center;
}
.learn-note { font-size: 1.65rem; font-weight: 900; margin-top: 5px; }
.learn-detail { color: var(--muted); font-size: .82rem; }

.practice-head { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.score-chip { border: 1px solid var(--border); border-radius: 999px; padding: 7px 11px; font-size: .85rem; color: var(--muted); }
.question-card { text-align: center; }
.prompt-label { color: var(--muted); font-size: .9rem; margin-bottom: 8px; }
.feedback {
  min-height: 54px; display: grid; place-items: center;
  border-radius: 12px; background: var(--panel2); padding: 12px;
  margin-top: 12px; font-weight: 700;
}
.feedback.good { color: var(--good); }
.feedback.bad { color: var(--bad); }
.feedback.hint { color: var(--warn); }
.feedback-actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }

.mic-status-panel { padding: 13px 15px; }
.mic-line { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--muted); font-size: .88rem; }
.mic-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(96,215,151,.12); }

.staff-svg { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto; }
.big-staff .staff-svg { max-width: 430px; }

.results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.result-card { border-radius: 14px; background: var(--panel2); border: 1px solid var(--border); padding: 14px; }
.result-card span { display: block; color: var(--muted); font-size: .8rem; }
.result-card strong { display: block; margin-top: 4px; font-size: 1.4rem; }
.panel-lite { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--panel2); }
.breakdown { display: grid; gap: 8px; margin-top: 10px; }
.breakdown-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.breakdown-row strong { color: var(--text); }

.diagnostics { margin-top: 14px; border: 1px solid var(--border); background: #10172a; border-radius: 16px; padding: 14px; }
.diag-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.diag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.diag-grid > div { background: var(--panel2); border-radius: 10px; padding: 10px; }
.diag-grid span { display: block; color: var(--muted); font-size: .72rem; }
.diag-grid strong { display: block; margin-top: 3px; font-size: .95rem; }

@media (max-width: 560px) {
  .learn-grid { grid-template-columns: 1fr; }
  .learn-card { display: grid; grid-template-columns: 1fr 70px 90px; align-items: center; text-align: left; }
  .learn-note { margin: 0; text-align: center; }
  .learn-detail { text-align: right; }
  .diag-grid { grid-template-columns: repeat(2, 1fr); }
}

.build-stamp {
  margin-top: 14px;
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
}


.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.settings-panel {
  margin-top: 14px;
  border: 1px solid var(--border);
  background: #10172a;
  border-radius: 16px;
  padding: 14px;
}

.setting-row {
  min-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: 0; }
.setting-row span { min-width: 0; }
.setting-row strong { display: block; }
.setting-row small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.35;
}
.setting-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}
.setting-column {
  flex-direction: column;
  align-items: stretch;
}
.setting-column select {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  padding: 8px 10px;
}

@media (max-width: 560px) {
  .topbar { align-items: flex-start; }
  .top-actions { max-width: 190px; }
}


.review-card {
  margin-top: 14px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--accent);
  background: rgba(141,181,255,.08);
  padding: 16px;
}
.review-card strong { display: block; font-size: 1rem; }
.review-card small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
}

.string-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 18px;
}
.string-choice {
  min-height: 66px;
  border: 1px solid var(--border);
  background: var(--panel2);
  border-radius: 14px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}
.string-choice input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.string-choice:has(input:checked) {
  border-color: var(--accent);
  background: rgba(141,181,255,.1);
}
.string-choice strong { display: block; }
.string-choice small { display: block; color: var(--muted); margin-top: 2px; }

.review-options { margin-top: 14px; }
.review-options label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.review-options select {
  min-height: 44px;
  min-width: 100px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  padding: 8px 10px;
}


.review-summary {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--panel2);
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 560px) {
  .string-selector { grid-template-columns: 1fr; }
}


/* v0.5 sections */
.section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.section-card {
  min-height: 150px;
  text-align: left;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 5px;
  background: var(--panel);
}
.section-card strong { font-size: 1.18rem; }
.section-card small { color: var(--muted); line-height: 1.4; }
.section-kicker {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .7rem;
  font-weight: 800;
  margin-bottom: auto;
}

.control-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-top: 16px;
}
.control-grid label { display: grid; gap: 5px; color: var(--muted); font-size: .82rem; }
.control-grid select {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  padding: 8px 10px;
  min-width: 150px;
}

.video-panel {
  margin-top: 16px;
  background: var(--panel2);
  border-radius: 16px;
  padding: 12px;
}
.video-panel video {
  display: block;
  width: 100%;
  border-radius: 12px;
  background: #050814;
}
.status-line { font-weight: 800; margin-bottom: 10px; }
.live-detected { margin-top: 10px; color: var(--muted); }

.reference-details { margin-top: 16px; }
.reference-details summary { cursor: pointer; min-height: 44px; display:flex; align-items:center; font-weight:800; }
.wide-image-wrap, .reference-image-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #070d19;
}
.wide-image-wrap img {
  display: block;
  width: max(100%, 760px);
  height: auto;
}
.reference-image-wrap img { display:block; width:100%; height:auto; }

/* fretboard overlay */
.fretboard-support {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #070d19;
}
.fretboard-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  font-size: .82rem;
  color: var(--muted);
}
.fretboard-scroll { overflow-x: auto; }
.fretboard-stage {
  position: relative;
  width: max(100%, 760px);
  line-height: 0;
}
.fretboard-stage img { width: 100%; height: auto; display:block; }
.fretboard-highlight {
  position: absolute;
  width: 3.8%;
  aspect-ratio: 1;
  border: 4px solid var(--good);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 4px rgba(96,215,151,.22);
  pointer-events: none;
}

/* Alphabet explorer */
.alphabet-layout {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(180px, .6fr);
  gap: 18px;
  align-items: center;
  margin-top: 18px;
}
.alphabet-wheel {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
  margin: 0 auto;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--panel2);
}
.alphabet-node {
  position: absolute;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 900;
  background: var(--panel);
}
.alphabet-node.active {
  border-color: var(--good);
  background: rgba(96,215,151,.13);
  transform: scale(1.1);
}
.alphabet-node .origin-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: var(--accent);
  color:#07101d;
  font-size:.7rem;
  font-weight:900;
}
.alphabet-info { text-align: center; }
.alphabet-current { font-size: 4.5rem; font-weight: 900; line-height: 1; }
.location-line { margin-top: 8px; font-weight: 800; }
.step-line { margin-top: 6px; color: var(--muted); }

/* Rhythm Zoo */
.subheading {
  margin-top: 20px;
  margin-bottom: 9px;
  font-weight: 900;
}
.rhythm-palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}
.rhythm-palette-card {
  padding: 7px;
  min-height: 126px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  text-align:left;
}
.rhythm-palette-card img {
  width:100%;
  aspect-ratio: 1;
  object-fit:cover;
  border-radius:9px;
}
.rhythm-palette-card strong { font-size:.78rem; line-height:1.15; }
.rhythm-palette-card small { color:var(--muted); font-size:.7rem; }

.rhythm-bars { display:grid; gap:10px; }
.rhythm-bar {
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 9px;
  background: var(--panel2);
}
.rhythm-bar-label { font-size:.72rem; color:var(--muted); margin-bottom:7px; }
.measure-grid {
  min-height: 88px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:5px;
}
.measure-slot-bg {
  grid-row: 1;
  border-left:1px dashed rgba(170,180,207,.25);
  pointer-events:none;
}
.rhythm-token {
  grid-row: 1;
  position:relative;
  border-radius:10px;
  background:var(--panel);
  border:1px solid var(--accent);
  padding:7px 22px 7px 8px;
  min-width:0;
  overflow:hidden;
}
.rhythm-token strong { display:block; font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rhythm-token small { color:var(--muted); font-size:.68rem; }
.rhythm-remove {
  position:absolute;
  right:4px;
  top:4px;
  min-height:24px;
  min-width:24px;
  padding:0;
  border-radius:50%;
}
.tap-practice {
  margin-top:18px;
  border-top:1px solid var(--border);
  padding-top:2px;
}
.tap-pad {
  min-width: 140px;
  min-height: 82px;
  font-size: 1.4rem;
  font-weight: 900;
}
.flashcard-reference {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.flashcard-reference img { width:100%; height:auto; border-radius:10px; }

@media (max-width: 680px) {
  .section-grid { grid-template-columns:1fr; }
  .alphabet-layout { grid-template-columns:1fr; }
  .rhythm-palette { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


.inline-check {
  min-height: 44px;
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:8px !important;
  color:var(--text) !important;
}
.inline-check input { width:20px; height:20px; }

.number-input {
  width: 110px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  padding: 8px 10px;
  font-size: 1rem;
}

.micro-copy {
  margin-top:8px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.4;
}
.playalong-readout {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px 18px;
  margin-top:10px;
  color:var(--muted);
}
.playalong-readout strong { color:var(--text); }

/* Flip cards */
.rhythm-palette-card {
  position:relative;
  perspective:900px;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  overflow:visible;
}
.rhythm-card-inner {
  position:relative;
  width:100%;
  min-height:170px;
  transform-style:preserve-3d;
  transition:transform .28s ease;
}
.rhythm-palette-card.flipped .rhythm-card-inner { transform:rotateY(180deg); }
.rhythm-card-face {
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:13px;
  padding:7px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rhythm-card-back { transform:rotateY(180deg); }
.rhythm-card-face img {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:9px;
}
.rhythm-card-label {
  font-size:.72rem;
  color:var(--muted);
  line-height:1.2;
}
.rhythm-add-btn {
  position:absolute;
  right:6px;
  bottom:6px;
  z-index:5;
  width:34px;
  min-width:34px;
  height:34px;
  min-height:34px;
  border-radius:50%;
  padding:0;
  font-size:1.2rem;
  font-weight:900;
  background:var(--accent);
  color:#07101d;
}
.rhythm-flip-hint {
  position:absolute;
  left:8px;
  bottom:8px;
  z-index:4;
  font-size:.65rem;
  color:var(--muted);
  background:rgba(11,16,32,.72);
  border-radius:999px;
  padding:3px 7px;
}

/* Notation in placed rhythm tokens */
.rhythm-token {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 22px 4px 4px !important;
  min-height:84px;
}
.rhythm-token img {
  width:100%;
  height:76px;
  object-fit:contain;
  border-radius:8px;
  background:white;
}
.rhythm-token .token-meta {
  position:absolute;
  left:6px;
  bottom:4px;
  padding:2px 5px;
  border-radius:6px;
  background:rgba(11,16,32,.8);
  color:var(--muted);
  font-size:.62rem;
}

/* Invalid drop feedback */
.rhythm-bar {
  position:relative;
  transition:border-color .16s ease, background .16s ease;
}
.rhythm-bar.invalid-drop {
  border-color:var(--bad) !important;
  background:rgba(255,129,129,.08);
}
.rhythm-bar.invalid-drop::after {
  content:"×";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:5rem;
  line-height:1;
  font-weight:900;
  color:var(--bad);
  background:rgba(11,16,32,.38);
  border-radius:12px;
  pointer-events:none;
}
.rhythm-toast {
  margin-top:10px;
  border:1px solid var(--bad);
  background:rgba(255,129,129,.1);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  font-size:.86rem;
}


.rhythm-bar {
  cursor: pointer;
}
.rhythm-bar.active-bar {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.rhythm-bar.active-bar .rhythm-bar-label::after {
  content: " · selected";
  color: var(--accent);
  font-weight: 800;
}
.rhythm-toast {
  position: relative;
  z-index: 20;
}


/* Guided Tap Practice */
.tap-practice-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

.tap-count-display {
  margin-top:16px;
  min-height:52px;
  display:grid;
  place-items:center;
  font-size:1.8rem;
  font-weight:900;
  letter-spacing:.04em;
  color:var(--muted);
}

.tap-pad-large {
  width:100%;
  min-height:210px;
  margin-top:10px;
  border-radius:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:linear-gradient(180deg, #152238, #0f1828);
  border:2px solid var(--border);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  transition:
    transform 70ms ease,
    box-shadow 90ms ease,
    background 90ms ease,
    border-color 90ms ease;
}
.tap-pad-large:disabled { opacity:.6; }
.tap-pad-main {
  font-size:clamp(3rem, 12vw, 6.5rem);
  line-height:.9;
  font-weight:1000;
  letter-spacing:.02em;
}
.tap-pad-sub {
  color:var(--muted);
  font-size:.95rem;
  font-weight:700;
}

.tap-pad-large.beat-pulse {
  border-color:#78d79a;
  box-shadow:
    0 0 0 6px rgba(96,215,151,.14),
    0 0 36px rgba(96,215,151,.34),
    inset 0 0 30px rgba(96,215,151,.10);
}
.tap-pad-large.target-pulse {
  background:linear-gradient(180deg, rgba(55,190,105,.55), rgba(20,95,58,.60));
  border-color:#7bf0a6;
  box-shadow:
    0 0 0 8px rgba(96,215,151,.23),
    0 0 55px rgba(96,215,151,.72),
    inset 0 0 55px rgba(120,240,166,.24);
  transform:scale(1.012);
}
.tap-pad-large.user-tap { transform:scale(.985); }

.tap-count-display.count-in { color:var(--accent); }
.tap-count-display.go { color:#78e59d; }

.tap-legend {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:10px;
  color:var(--muted);
  font-size:.78rem;
}
.tap-legend span {
  display:flex;
  align-items:center;
  gap:6px;
}
.tap-legend i {
  width:13px;
  height:13px;
  border-radius:50%;
  display:inline-block;
}
.legend-beat {
  background:#376a4b;
  box-shadow:0 0 8px rgba(96,215,151,.35);
}
.legend-target {
  background:#73efa1;
  box-shadow:0 0 10px rgba(96,215,151,.8);
}

@media (max-width:560px) {
  .tap-pad-large { min-height:240px; }
}


/* v0.6 native play-along */
.native-playalong {
  margin-top:16px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--panel2);
  text-align:center;
}
.playalong-count {
  min-height:34px;
  color:var(--muted);
  font-weight:900;
  letter-spacing:.05em;
}
.playalong-note {
  font-size:clamp(4.5rem, 18vw, 8rem);
  line-height:.95;
  font-weight:1000;
  margin-top:6px;
}
.playalong-pulse {
  width:28px;
  height:28px;
  margin:16px auto 12px;
  border-radius:50%;
  background:#2e465b;
  transition:transform 70ms ease, box-shadow 70ms ease, background 70ms ease;
}
.playalong-pulse.active {
  transform:scale(1.35);
  background:#7ce6a2;
  box-shadow:0 0 28px rgba(124,230,162,.72);
}
.playalong-sequence {
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:8px 2px 12px;
}
.playalong-chip {
  flex:0 0 auto;
  min-width:42px;
  min-height:42px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--muted);
  font-weight:800;
}
.playalong-chip.active {
  color:#07101d;
  background:var(--accent);
  border-color:transparent;
  transform:scale(1.06);
}
.playalong-chip.done {
  color:var(--good);
  border-color:rgba(96,215,151,.5);
}

/* Bigger note-reading feedback */
.feedback {
  min-height:76px !important;
  font-size:1.22rem !important;
  border:2px solid transparent;
}
.feedback.good {
  background:rgba(96,215,151,.12) !important;
  border-color:rgba(96,215,151,.55);
  font-size:1.45rem !important;
}
.feedback.bad {
  background:rgba(255,129,129,.11) !important;
  border-color:rgba(255,129,129,.55);
  font-size:1.35rem !important;
}

/* Fingering */
.fingering-number {
  font-family:ui-sans-serif, system-ui, sans-serif;
  font-size:15px;
  font-weight:900;
  fill:currentColor;
}

/* Rhythm invalid source card */
.rhythm-palette-card.invalid-source .rhythm-card-inner {
  outline:5px solid var(--bad);
  border-radius:15px;
}
.rhythm-palette-card.invalid-source::after {
  content:"×";
  position:absolute;
  inset:0 0 38px 0;
  z-index:20;
  display:grid;
  place-items:center;
  font-size:7rem;
  line-height:1;
  font-weight:1000;
  color:var(--bad);
  background:rgba(11,16,32,.36);
  border-radius:15px;
  pointer-events:none;
}
.rhythm-toast-near-palette {
  margin:10px 0 2px;
}

/* Rhythm playback tracker */
.rhythm-transport-visual {
  margin-top:10px;
  padding:10px 12px 14px;
  background:var(--panel2);
  border-radius:14px;
}
.beat-tracker {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:4px;
  padding-top:18px;
}
.beat-tracker span {
  min-height:42px;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid var(--border);
  color:var(--muted);
  font-weight:900;
  transition:.08s ease;
}
.beat-tracker span.active {
  color:#07101d;
  background:#79e49f;
  border-color:transparent;
  box-shadow:0 0 20px rgba(96,215,151,.45);
}
.beat-ball {
  position:absolute;
  top:0;
  left:12.5%;
  width:16px;
  height:16px;
  margin-left:-8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px rgba(141,181,255,.55);
  transition:left .08s ease, transform .08s ease;
}
.rhythm-bar.playing-bar {
  border-color:#79e49f;
  box-shadow:0 0 0 3px rgba(96,215,151,.12);
}

/* Tap practice tighter + cue emphasis */
.tap-practice {
  margin-top:10px !important;
}
.tap-practice .subheading {
  margin-top:12px;
}
.tap-practice-controls label:not(.inline-check) {
  display:grid;
  gap:4px;
  color:var(--muted);
  font-size:.82rem;
}
.tap-practice-controls select {
  min-height:44px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  padding:8px 10px;
}
.tap-pad-main {
  max-width:95%;
  text-align:center;
  overflow-wrap:anywhere;
}
.tap-pad-sub {
  min-height:1.2em;
}

/* Generic sound-check fallback */
.sound-card .status.connected {
  color:var(--good);
}


/* v0.6.1 — play-along wheel with written notation */
.playalong-wheel-layout{display:grid;grid-template-columns:minmax(260px,1fr) minmax(170px,.62fr);gap:20px;align-items:center}
.playalong-wheel{position:relative;width:min(100%,390px)}
.playalong-center-staff{position:absolute;inset:25% 18%;z-index:3;display:grid;place-items:center;border-radius:50%;background:rgba(11,16,32,.95);border:1px solid var(--border);overflow:hidden}
.playalong-center-staff .staff-svg{width:100%;max-width:190px}
.playalong-side{text-align:center}
.settings-panel select{min-height:44px;border-radius:10px;border:1px solid var(--border);background:var(--panel2);color:var(--text);padding:8px 10px}

/* Persistent error attached to rhythm source card */
.rhythm-card-message{position:absolute;z-index:80;right:-8px;bottom:44px;width:min(300px,82vw);padding:12px;border:2px solid var(--bad);border-radius:14px;background:#29151c;color:var(--text);box-shadow:0 12px 34px rgba(0,0,0,.42);font-size:.84rem;line-height:1.4}
.rhythm-card-message::after{content:"";position:absolute;right:20px;bottom:-10px;width:18px;height:18px;background:#29151c;border-right:2px solid var(--bad);border-bottom:2px solid var(--bad);transform:rotate(45deg)}
.rhythm-card-message strong{display:block;color:var(--bad);margin-bottom:4px}
.rhythm-card-message button{margin-top:10px;min-height:36px;padding:5px 14px}
.rhythm-toast-near-palette{display:none!important}

.measure-heading-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.measure-heading-row .subheading{margin:0}
.measure-actions{display:flex;gap:8px;flex-wrap:wrap}
.rhythm-timeline{padding-top:34px}
.ball-track{position:absolute;left:12.5%;right:12.5%;top:15px;height:2px;background:rgba(141,181,255,.28)}
.beat-ball{top:7px!important;transition:left .06s linear,transform .08s ease,opacity .08s ease!important}
.beat-ball.bounce{transform:translateY(-14px) scale(1.15)}
.beat-ball.rest{opacity:.45}
@media(max-width:680px){.playalong-wheel-layout{grid-template-columns:1fr}}


/* v0.6.2 — staff notation directly in the center of the alphabet wheel */
.alphabet-center-staff {
  position:absolute;
  z-index:4;
  left:18%;
  right:18%;
  top:31%;
  bottom:31%;
  display:grid;
  place-items:center;
  pointer-events:none;
  background:transparent;
  border:0;
}
.alphabet-center-staff .staff-svg {
  width:100%;
  max-width:190px;
  margin:0;
}
.alphabet-center-staff .staff-svg line,
.alphabet-center-staff .staff-svg ellipse,
.alphabet-center-staff .staff-svg text {
  color:#fff;
}

.alphabet-wheel {
  overflow:visible;
}

.section-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

@media (max-width:760px) {
  .section-grid { grid-template-columns:1fr; }
}


/* v0.6.3 — staff note + mic feedback */
.alphabet-center-staff {
  color:#fff;
}
.alphabet-center-staff.hidden-staff {
  visibility:hidden;
}
.alphabet-center-staff .staff-svg {
  width:100%;
  max-width:215px;
  color:#fff;
}
.alphabet-wheel.wrong-note {
  border-color:var(--bad);
  box-shadow:0 0 0 5px rgba(255,129,129,.12), 0 0 30px rgba(255,129,129,.18);
}
.alphabet-wheel.wrong-note .alphabet-node.active {
  border-color:var(--bad);
  background:rgba(255,129,129,.18);
  color:var(--bad);
}
.alphabet-wheel.wrong-note .alphabet-center-staff {
  color:var(--bad);
}
.alphabet-wheel.correct-note {
  box-shadow:0 0 0 5px rgba(96,215,151,.11), 0 0 28px rgba(96,215,151,.16);
}
.alphabet-audio-wrong {
  color:var(--bad) !important;
  border-color:rgba(255,129,129,.45) !important;
  background:rgba(255,129,129,.08) !important;
}
.alphabet-audio-correct {
  color:var(--good) !important;
  border-color:rgba(96,215,151,.45) !important;
  background:rgba(96,215,151,.08) !important;
}


/* v0.6.4 */
.tap-controls-below {
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.tap-practice > p {
  margin-bottom:4px;
}
.tap-practice .tap-count-display {
  margin-top:8px;
}
.tap-practice .review-summary {
  margin-top:8px;
}


/* v0.6.5 — proportional 4/4 transport */
.rhythm-timeline {
  gap:4px;
}
.rhythm-timeline .ball-track {
  left:0;
  right:0;
}
.rhythm-timeline .beat-ball {
  left:0;
  margin-left:-8px;
}
.rhythm-cue-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.cue-label {
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.cue-toggle-group {
  display:flex;
  gap:4px;
}
.cue-toggle {
  min-height:36px;
  padding:5px 11px;
  border-radius:999px;
}
.cue-toggle.active {
  background:var(--accent);
  color:#07101d;
  border-color:transparent;
}
.rhythm-cue-strip {
  position:relative;
  min-height:48px;
  margin-top:8px;
  border-top:1px solid var(--border);
}
.rhythm-animal-cue {
  position:absolute;
  top:8px;
  min-height:30px;
  display:grid;
  place-items:center;
  padding:4px 6px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--muted);
  font-size:.72rem;
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.rhythm-count-cue {
  position:absolute;
  top:8px;
  transform:translateX(-50%);
  min-width:24px;
  min-height:30px;
  display:grid;
  place-items:center;
  padding:3px 5px;
  border-radius:8px;
  color:var(--muted);
  font-size:.74rem;
  font-weight:900;
}
.rhythm-count-cue.downbeat {
  color:var(--text);
}
.rhythm-cue-active {
  color:#07101d !important;
  background:#79e49f !important;
  border-color:transparent !important;
  box-shadow:0 0 14px rgba(96,215,151,.35);
}

/* Tap Practice — falling note lane */
.tap-heading-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}
.tap-heading-row .subheading {
  margin:0 0 4px;
}
.tap-heading-row p {
  margin:0;
  color:var(--muted);
}
.tap-heading-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tap-count-display:empty {
  display:none;
}
.tap-lane {
  position:relative;
  min-height:340px;
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.025), transparent 45%),
    var(--panel2);
  touch-action:manipulation;
}
.tap-lane-center {
  position:absolute;
  top:0;
  bottom:74px;
  left:50%;
  width:1px;
  background:rgba(141,181,255,.09);
}
.tap-falling-layer {
  position:absolute;
  inset:0 0 74px 0;
  pointer-events:none;
}
.falling-rhythm-note {
  position:absolute;
  left:50%;
  width:68px;
  height:22px;
  margin-left:-34px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 18px rgba(141,181,255,.36);
  transform:translateY(-50%);
  opacity:0;
  will-change:top,opacity,transform;
}
.falling-rhythm-note.near-hit {
  background:#79e49f;
  box-shadow:0 0 22px rgba(96,215,151,.65);
}
.tap-hit-line {
  position:absolute;
  left:8%;
  right:8%;
  bottom:77px;
  height:3px;
  background:#79e49f;
  box-shadow:0 0 18px rgba(96,215,151,.52);
}
.tap-hit-line span {
  position:absolute;
  right:0;
  bottom:7px;
  color:var(--muted);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.08em;
}
.tap-strike-pad {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  min-height:74px;
  border-radius:0;
  border:0;
  border-top:1px solid var(--border);
  font-size:2rem;
  font-weight:1000;
  background:#101c2f;
}
.tap-strike-pad:not(:disabled):active,
.tap-strike-pad.user-tap {
  background:#173d2a;
  color:#8df3ad;
}
.tap-strike-pad:disabled {
  opacity:.55;
}
.tap-practice .review-summary:empty {
  display:none;
}
.tap-controls-below {
  justify-content:flex-end;
}

@media (max-width:560px) {
  .tap-lane { min-height:390px; }
}


/* v0.6.6 — selected-bar capacity */
.rhythm-capacity-status {
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.capacity-copy {
  display:flex;
  align-items:baseline;
  gap:9px;
}
.capacity-copy strong { color:var(--text); }
.capacity-copy span {
  color:var(--muted);
  font-weight:800;
}
.rhythm-capacity-status.capacity-full .capacity-copy span {
  color:var(--good);
}
.capacity-meter {
  width:min(220px,100%);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
}
.capacity-meter i {
  display:block;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid var(--border);
}
.capacity-meter i.filled {
  background:var(--accent);
  border-color:transparent;
}
.rhythm-capacity-status.capacity-punch {
  animation:capacityPunch .22s ease-out;
}
@keyframes capacityPunch {
  0% { transform:scale(1); }
  45% { transform:scale(1.025); }
  100% { transform:scale(1); }
}

/* Make Animals / Counting visually "speak" */
.rhythm-animal-cue.cue-punch {
  animation:cuePunch .19s ease-out;
}
.rhythm-count-cue.cue-punch {
  animation:cuePunchCount .19s ease-out;
}
@keyframes cuePunch {
  0% { transform:scale(1); }
  42% { transform:scale(1.16); }
  100% { transform:scale(1); }
}
@keyframes cuePunchCount {
  0% { transform:translateX(-50%) scale(1); }
  42% { transform:translateX(-50%) scale(1.24); }
  100% { transform:translateX(-50%) scale(1); }
}
.rhythm-loop-check {
  min-height:40px !important;
  padding:0 4px;
}


/* v0.6.7 — Rhythm Highway */
.tap-highway {
  min-height:430px;
  background:
    radial-gradient(circle at 50% 0%, rgba(141,181,255,.09), transparent 35%),
    linear-gradient(to bottom, #0d1727, #0a1220);
  border-color:rgba(141,181,255,.18);
}

.tap-road-surface {
  position:absolute;
  inset:0 0 74px 0;
  clip-path:polygon(38% 0%, 62% 0%, 94% 100%, 6% 100%);
  background:
    linear-gradient(to right,
      rgba(255,255,255,.018) 0%,
      rgba(141,181,255,.06) 49.6%,
      rgba(141,181,255,.06) 50.4%,
      rgba(255,255,255,.018) 100%);
  border-bottom:0;
  pointer-events:none;
}
.tap-road-surface::before,
.tap-road-surface::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(to bottom,
    rgba(141,181,255,.18),
    rgba(141,181,255,.65));
  box-shadow:0 0 12px rgba(141,181,255,.24);
}
.tap-road-surface::before {
  left:0;
}
.tap-road-surface::after {
  right:0;
}

.tap-road-centerline {
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,.035),
    rgba(255,255,255,.12));
}

.tap-grid-layer,
.tap-falling-layer {
  position:absolute;
  inset:0 0 74px 0;
  pointer-events:none;
  overflow:hidden;
}

.tap-grid-line {
  position:absolute;
  height:1px;
  background:rgba(141,181,255,.11);
  transform:translateY(-50%);
  transform-origin:center;
  will-change:top,left,width,opacity;
}
.tap-grid-line.major {
  height:2px;
  background:rgba(141,181,255,.33);
  box-shadow:0 0 7px rgba(141,181,255,.12);
}
.tap-grid-line.major::before {
  content:attr(data-beat);
  position:absolute;
  left:-24px;
  top:-9px;
  color:rgba(199,214,239,.58);
  font-size:.67rem;
  font-weight:900;
}
.tap-grid-line.triplet {
  background:rgba(215,184,255,.12);
}

.falling-rhythm-note {
  position:absolute;
  left:50%;
  width:120px;
  height:28px;
  margin-left:-60px;
  border-radius:8px;
  background:linear-gradient(180deg, #172231, #090f18);
  border:2px solid rgba(255,101,101,.76);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 0 16px rgba(255,82,82,.18);
  transform:translate(-0%,-50%) scale(.52);
  opacity:0;
  will-change:top,opacity,transform;
}
.falling-rhythm-note::after {
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  top:50%;
  height:3px;
  margin-top:-1.5px;
  border-radius:999px;
  background:#ff6666;
  box-shadow:0 0 12px rgba(255,102,102,.82);
}
.falling-rhythm-note.near-hit {
  border-color:#8af0aa;
  box-shadow:
    0 0 0 3px rgba(96,215,151,.12),
    0 0 24px rgba(96,215,151,.46);
}
.falling-rhythm-note.near-hit::after {
  background:#8af0aa;
  box-shadow:0 0 14px rgba(96,215,151,.82);
}

.tap-hit-zone {
  position:absolute;
  left:7%;
  right:7%;
  bottom:76px;
  height:58px;
  border:2px solid rgba(96,215,151,.46);
  border-radius:10px 10px 4px 4px;
  background:rgba(96,215,151,.07);
  box-shadow:inset 0 0 24px rgba(96,215,151,.06);
  display:grid;
  place-items:center;
  transition:
    background .06s ease,
    border-color .06s ease,
    box-shadow .06s ease,
    transform .06s ease;
  pointer-events:none;
}
.tap-hit-zone span {
  color:rgba(145,239,177,.53);
  font-size:.73rem;
  font-weight:1000;
  letter-spacing:.13em;
}
.tap-hit-zone.target-now {
  border-color:#8af0aa;
  background:rgba(96,215,151,.20);
  box-shadow:
    inset 0 0 30px rgba(96,215,151,.15),
    0 0 22px rgba(96,215,151,.38);
  transform:scaleY(1.04);
}
.tap-hit-zone.user-hit {
  background:rgba(96,215,151,.34);
  box-shadow:
    inset 0 0 34px rgba(96,215,151,.22),
    0 0 28px rgba(96,215,151,.48);
}
.tap-hit-zone.user-miss {
  border-color:rgba(255,129,129,.75);
  background:rgba(255,129,129,.18);
  box-shadow:0 0 22px rgba(255,129,129,.28);
}

.tap-strike-pad {
  background:linear-gradient(180deg,#111e31,#0d1728);
}
.tap-strike-pad:not(:disabled):active,
.tap-strike-pad.user-tap {
  background:#153a28;
  color:#92f3b1;
}

@media (max-width:560px) {
  .tap-highway { min-height:470px; }
}


/* v0.6.8 — sticky current measure */
.rhythm-sticky-measure {
  position:sticky;
  top:8px;
  z-index:35;
  margin:12px 0;
  padding:9px 10px 10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(10,18,32,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.sticky-measure-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.sticky-measure-head strong {
  color:var(--text);
  font-size:.82rem;
}
.sticky-measure-strip {
  display:flex;
  width:100%;
  min-height:62px;
  gap:4px;
  align-items:stretch;
}
.sticky-measure-token {
  min-width:0;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--panel2);
}
.sticky-measure-token img {
  width:100%;
  height:56px;
  object-fit:contain;
  background:white;
  border-radius:7px;
}
.sticky-measure-token.current-token {
  border-color:#79e49f;
  box-shadow:0 0 0 3px rgba(96,215,151,.12);
}

/* One-beat Tap Practice focus */
.tap-beat-cue {
  min-height:58px;
  margin:8px 0 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  color:var(--text);
}
.tap-beat-cue .beat-name {
  font-size:clamp(1.55rem,5vw,2.55rem);
  line-height:1;
  font-weight:1000;
  letter-spacing:.015em;
}
.tap-beat-cue .beat-number {
  color:var(--muted);
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.tap-beat-cue .count-sequence {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.tap-beat-cue .count-syllable {
  min-width:38px;
  min-height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--muted);
  font-size:1.05rem;
  font-weight:1000;
}
.tap-beat-cue .count-syllable.active {
  background:#79e49f;
  border-color:transparent;
  color:#07101d;
  transform:scale(1.10);
}

/* Larger highway content: one beat at a time */
.tap-highway {
  min-height:440px;
}
.falling-rhythm-note {
  width:190px;
  height:42px;
  margin-left:-95px;
  border-radius:11px;
  border-width:3px;
}
.falling-rhythm-note::after {
  left:10%;
  right:10%;
  height:4px;
  margin-top:-2px;
}
.falling-rhythm-note .falling-label {
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:.82rem;
  font-weight:1000;
  text-shadow:0 1px 3px rgba(0,0,0,.75);
}
.tap-grid-line.minor {
  opacity:.32 !important;
}
.tap-road-surface {
  clip-path:polygon(34% 0%, 66% 0%, 96% 100%, 4% 100%);
}

@media (max-width:560px) {
  .rhythm-sticky-measure { top:4px; }
  .sticky-measure-strip { min-height:56px; }
  .sticky-measure-token img { height:50px; }
  .falling-rhythm-note {
    width:160px;
    margin-left:-80px;
  }
}


/* v0.6.9 — full-road Tap tiles */
.tap-road-surface {
  clip-path:polygon(33% 0%, 67% 0%, 96% 100%, 4% 100%);
}

.tap-hit-zone {
  left:4%;
  right:4%;
  height:68px;
}

.falling-rhythm-note {
  left:50%;
  width:34%;
  height:34px;
  margin-left:0;
  border-radius:10px;
  transform:translate(-50%,-50%);
  border-width:3px;
}

.falling-rhythm-note::after {
  left:4%;
  right:4%;
  height:5px;
  margin-top:-2.5px;
}

.falling-rhythm-note .falling-label {
  padding:0 12px;
  font-size:clamp(.85rem,2.4vw,1.15rem);
  letter-spacing:.015em;
}

.tap-highway {
  min-height:470px;
}

@media (max-width:560px) {
  .tap-highway { min-height:500px; }
}


/* ==========================================================
   v0.6.10 — simpler transport + fixed measure dock
   ========================================================== */

.transport-actions {
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
}
.transport-btn {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 13px;
  font-weight:900;
  border-radius:11px;
}
.transport-btn[aria-pressed="true"] {
  background:#79e49f;
  border-color:transparent;
  color:#07101d;
  box-shadow:0 0 16px rgba(96,215,151,.28);
}

/* The measure is now part of the app chrome while Rhythm Zoo is open. */
#rhythmView {
  padding-bottom:112px;
  scroll-padding-bottom:118px;
}
#rhythmView:not(.hidden) .rhythm-sticky-measure {
  position:fixed;
  z-index:120;
  left:50%;
  bottom:max(8px, env(safe-area-inset-bottom));
  top:auto;
  width:min(calc(100vw - 18px), 960px);
  transform:translateX(-50%);
  margin:0;
  padding:7px 9px 8px;
  background:rgba(8,15,27,.97);
  border:1px solid rgba(141,181,255,.25);
  box-shadow:0 -8px 30px rgba(0,0,0,.38);
  backdrop-filter:blur(12px);
}
#rhythmView:not(.hidden) .sticky-measure-head {
  margin-bottom:5px;
}
#rhythmView:not(.hidden) .sticky-measure-strip {
  min-height:54px;
}
#rhythmView:not(.hidden) .sticky-measure-token img {
  height:48px;
}

/* Actual attack flash: re-triggers every single animal/count attack. */
.rhythm-animal-cue.cue-punch {
  animation:rhythmAttackAnimal .18s ease-out;
}
.rhythm-count-cue.cue-punch {
  animation:rhythmAttackCount .18s ease-out;
}
@keyframes rhythmAttackAnimal {
  0% {
    transform:scale(1);
    background:var(--panel);
    color:var(--muted);
    box-shadow:none;
  }
  38% {
    transform:scale(1.18);
    background:#79e49f;
    color:#07101d;
    box-shadow:0 0 18px rgba(96,215,151,.52);
  }
  100% {
    transform:scale(1);
    background:var(--panel);
    color:var(--muted);
    box-shadow:none;
  }
}
@keyframes rhythmAttackCount {
  0% {
    transform:translateX(-50%) scale(1);
    background:transparent;
    color:var(--muted);
    box-shadow:none;
  }
  38% {
    transform:translateX(-50%) scale(1.28);
    background:#79e49f;
    color:#07101d;
    box-shadow:0 0 16px rgba(96,215,151,.48);
  }
  100% {
    transform:translateX(-50%) scale(1);
    background:transparent;
    color:var(--muted);
    box-shadow:none;
  }
}

/* Keep the dense builder readable on phones. */
@media (max-width:620px) {
  .measure-heading-row {
    align-items:flex-start;
  }
  .measure-actions {
    width:100%;
  }
  .measure-actions .transport-btn {
    flex:1 1 calc(50% - 7px);
  }
  .tap-heading-actions {
    width:100%;
  }
  .tap-heading-actions .transport-btn {
    flex:1 1 auto;
  }
  #rhythmView {
    padding-bottom:104px;
  }
  #rhythmView:not(.hidden) .rhythm-sticky-measure {
    width:calc(100vw - 10px);
    bottom:max(4px, env(safe-area-inset-bottom));
    border-radius:12px;
  }
}


/* ==========================================================
   v0.6.11 — notation tiles riding the runway
   ========================================================== */

.rhythm-road-tile {
  position:absolute;
  left:50%;
  top:5%;
  z-index:8;
  width:34%;
  min-height:82px;
  padding:8px 12px 7px;
  border-radius:12px;
  border:2px solid rgba(141,181,255,.58);
  background:linear-gradient(180deg,#fdfdfd,#eceff5);
  box-shadow:
    0 8px 24px rgba(0,0,0,.22),
    0 0 16px rgba(141,181,255,.18);
  transform-origin:center center;
  opacity:0;
  will-change:top,width,transform,opacity;
  overflow:hidden;
}

.rhythm-road-tile img {
  display:block;
  width:100%;
  height:68px;
  object-fit:contain;
  border-radius:7px;
  background:#fff;
}

.rhythm-road-tile .road-tile-name {
  margin-top:3px;
  text-align:center;
  color:#344158;
  font-size:.66rem;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.rhythm-road-tile.approaching {
  border-color:rgba(141,181,255,.72);
}

.rhythm-road-tile.active-rhythm {
  border-color:#79e49f;
  box-shadow:
    0 0 0 4px rgba(96,215,151,.12),
    0 0 30px rgba(96,215,151,.36),
    0 10px 28px rgba(0,0,0,.28);
}

.rhythm-road-tile.rest-rhythm {
  border-style:dashed;
  border-color:rgba(199,214,239,.42);
}

.tap-hit-zone {
  height:74px;
}

/* Individual attack bars from the previous version are no longer visible. */
.falling-rhythm-note {
  display:none !important;
}

/* Give the slide a longer "over the hill" feeling. */
.tap-road-surface {
  top:-7%;
  bottom:74px;
  clip-path:polygon(40% 0%,60% 0%,97% 100%,3% 100%);
  border-radius:48% 48% 0 0 / 8% 8% 0 0;
}

.tap-grid-layer,
.tap-falling-layer {
  top:-7%;
}

/* Slightly enlarge the bottom notation dock. */
#rhythmView:not(.hidden) .sticky-measure-strip {
  min-height:62px;
}
#rhythmView:not(.hidden) .sticky-measure-token img {
  height:56px;
}

@media (max-width:560px) {
  .rhythm-road-tile {
    min-height:88px;
    padding:7px 9px 6px;
  }
  .rhythm-road-tile img {
    height:72px;
  }
  .rhythm-road-tile .road-tile-name {
    font-size:.62rem;
  }
}


/* ==========================================================
   v0.6.12 — Rhythm Zoo navigation
   ========================================================== */

.rhythm-shell {
  min-height:520px;
}
.rhythm-menu-intro {
  max-width:620px;
  color:var(--muted);
}
.rhythm-mode-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:20px;
}
.rhythm-mode-card {
  min-width:0;
  padding:0;
  overflow:hidden;
  text-align:left;
  border-radius:18px;
  background:var(--panel2);
  border:1px solid var(--border);
}
.rhythm-mode-card:hover {
  border-color:rgba(141,181,255,.52);
}
.rhythm-mode-thumb {
  height:190px;
  overflow:hidden;
  background:#101a2c;
  border-bottom:1px solid var(--border);
}
.rhythm-mode-thumb > img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.rhythm-mode-copy {
  display:grid;
  gap:7px;
  padding:16px;
}
.rhythm-mode-copy strong {
  font-size:1.3rem;
}
.rhythm-mode-copy span,
.rhythm-mode-copy small {
  color:var(--muted);
  line-height:1.35;
}
.rhythm-mode-copy small {
  font-weight:800;
}

.beat-master-thumb {
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#172b48,#0c1627);
}
.mini-road {
  position:relative;
  width:72%;
  height:90%;
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,#d8e7f4,#799fbd);
}
.mini-road > i {
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(29,57,78,.32);
}
.mini-road > i:nth-child(1){left:33%}
.mini-road > i:nth-child(2){left:50%}
.mini-road > i:nth-child(3){left:67%}
.mini-tile {
  position:absolute;
  width:22%;
  height:28px;
  border-radius:5px;
  background:#111923;
  border:2px solid #ff6464;
  box-shadow:0 0 9px rgba(255,100,100,.4);
}
.mini-tile::after {
  content:"";
  position:absolute;
  left:15%;
  right:15%;
  top:50%;
  height:3px;
  background:#ff6464;
  box-shadow:0 0 8px #ff6464;
}
.mini-tile.t1{left:11%;top:58%}
.mini-tile.t2{left:39%;top:33%}
.mini-tile.t3{right:10%;top:13%}

.subscreen-head {
  display:flex;
  align-items:flex-start;
  gap:14px;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.subscreen-head > div:nth-child(2) {
  flex:1 1 300px;
}
.subscreen-head h2,
.subscreen-head p {
  margin-top:0;
}
.back-pill {
  white-space:nowrap;
}
.rhythm-setup-card,
.game-gate {
  max-width:720px;
  margin:22px auto 0;
  padding:20px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel2);
}
.big-continue {
  width:100%;
  min-height:52px;
  margin-top:16px;
  font-size:1.05rem;
}
.builder-head-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.game-gate {
  display:grid;
  gap:10px;
  text-align:center;
}
.game-gate strong {
  font-size:1.35rem;
}
.game-gate span {
  color:var(--muted);
}
.game-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.game-transport {
  margin-bottom:8px;
}
.tap-live-count {
  min-height:34px;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-weight:900;
}

/* Swipeable animal library */
.rhythm-palette-swipe {
  display:flex !important;
  grid-template-columns:none !important;
  gap:12px;
  overflow-x:auto;
  overflow-y:visible;
  padding:4px 2px 14px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rhythm-palette-swipe::-webkit-scrollbar {
  display:none;
}
.rhythm-palette-swipe .rhythm-palette-card {
  flex:0 0 178px;
  width:178px;
  scroll-snap-align:start;
}

/* ==========================================================
   Beat Master — 3-lane Superstar-style runway
   ========================================================== */

.beat-master-road {
  min-height:560px;
  cursor:pointer;
  touch-action:manipulation;
  background:
    radial-gradient(circle at 50% 0%,rgba(184,224,255,.16),transparent 35%),
    linear-gradient(180deg,#162c49,#0b1626);
}
.beat-master-road .tap-road-surface {
  inset:-3% 2% 74px;
  clip-path:polygon(39% 0%,61% 0%,98% 100%,2% 100%);
  border-radius:50% 50% 0 0 / 5% 5% 0 0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.025) 0 33.1%,
      rgba(20,48,70,.11) 33.1% 33.6%,
      rgba(255,255,255,.025) 33.6% 66.4%,
      rgba(20,48,70,.11) 66.4% 66.9%,
      rgba(255,255,255,.025) 66.9% 100%),
    linear-gradient(180deg,#d7e6f1 0%,#91afc4 50%,#64849e 100%);
}
.road-lane-divider {
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(31,62,84,.34);
  transform-origin:50% 0;
}
.road-lane-divider.divider-left {
  left:46%;
  transform:rotate(7.8deg);
}
.road-lane-divider.divider-right {
  right:46%;
  transform:rotate(-7.8deg);
}

.beat-game-tile {
  position:absolute;
  z-index:9;
  width:14%;
  height:48px;
  border-radius:7px;
  background:linear-gradient(180deg,#1b2633,#080c12);
  border:2px solid rgba(255,91,91,.9);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 5px 12px rgba(0,0,0,.27),
    0 0 13px rgba(255,91,91,.24);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:.78rem;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.02em;
  opacity:0;
  will-change:left,top,width,height,opacity;
  pointer-events:none;
}
.beat-game-tile::after {
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:7px;
  height:3px;
  border-radius:999px;
  background:#ff6262;
  box-shadow:0 0 8px rgba(255,98,98,.9);
}
.beat-game-tile.near-hit {
  border-color:#79e49f;
  box-shadow:
    0 0 0 3px rgba(96,215,151,.14),
    0 0 20px rgba(96,215,151,.48);
}
.beat-game-tile.near-hit::after {
  background:#79e49f;
  box-shadow:0 0 10px rgba(96,215,151,.9);
}
.beat-game-tile.count-mode {
  font-size:1.05rem;
}

.beat-master-road .tap-hit-zone {
  left:3%;
  right:3%;
  height:78px;
  z-index:11;
}
.beat-master-road .tap-strike-pad {
  z-index:12;
  font-size:1.35rem;
}

/* v0.6.11 notation-card visuals are intentionally retired in Beat Master. */
.rhythm-road-tile {
  display:none !important;
}

/* Bigger bottom notation dock */
#rhythmView:not(.hidden) .rhythm-sticky-measure {
  padding:9px 10px 10px;
}
#rhythmView:not(.hidden) .sticky-measure-strip {
  min-height:72px;
}
#rhythmView:not(.hidden) .sticky-measure-token img {
  height:66px;
}

@media (max-width:700px) {
  .rhythm-mode-grid {
    grid-template-columns:1fr;
  }
  .rhythm-mode-thumb {
    height:160px;
  }
  .rhythm-palette-swipe .rhythm-palette-card {
    flex-basis:155px;
    width:155px;
  }
  .beat-master-road {
    min-height:600px;
  }
}


/* v0.6.13 — Beat Master slide runway refinements */
.game-helper-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(12,22,39,.78);
}
.game-helper-copy {
  display:grid;
  gap:4px;
}
.game-helper-copy span {
  color:var(--muted);
}
.game-topbar-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.game-transport #startTapPracticeBtn {
  display:none !important;
}
.tap-live-count {
  margin-top:4px;
}
.beat-master-road {
  min-height:620px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(184,224,255,.14),transparent 28%),
    linear-gradient(180deg,#2b3f59 0%, #203149 22%, #162538 56%, #0f1a28 100%);
}
.beat-master-road .tap-road-surface {
  inset:2% 11% 82px;
  clip-path:polygon(36% 0%,64% 0%,84% 100%,16% 100%);
  border-radius:48% 48% 8% 8% / 8% 8% 3% 3%;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.06) 0 32.7%,
      rgba(86,108,126,.46) 32.7% 33.4%,
      rgba(255,255,255,.05) 33.4% 49.4%,
      rgba(86,108,126,.46) 49.4% 50.1%,
      rgba(255,255,255,.05) 50.1% 66.1%,
      rgba(86,108,126,.46) 66.1% 66.8%,
      rgba(255,255,255,.06) 66.8% 100%),
    linear-gradient(180deg,#d9e8f6 0%,#c3d7ea 20%,#bed4e8 48%,#a8bfd5 74%,#95adc5 100%);
  box-shadow:
    inset 0 22px 28px rgba(255,255,255,.10),
    inset 0 -20px 34px rgba(26,44,64,.14),
    0 12px 30px rgba(0,0,0,.18);
}
.beat-master-road .tap-road-surface::before,
.beat-master-road .tap-road-surface::after {
  content:"";
  position:absolute;
  top:-2%;
  bottom:-2%;
  width:8px;
  background:repeating-linear-gradient(180deg,#fff 0 9px, transparent 9px 15px);
  opacity:.95;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.35));
}
.beat-master-road .tap-road-surface::before {
  left:-12px;
  transform:skewY(8deg);
}
.beat-master-road .tap-road-surface::after {
  right:-12px;
  transform:skewY(-8deg);
}
.road-lane-divider {
  top:4%;
  bottom:3%;
  width:2px;
  background:linear-gradient(180deg, rgba(85,105,124,.15), rgba(72,90,108,.42));
}
.road-lane-divider.divider-left {
  left:40.5%;
  transform:skewY(5deg);
}
.road-lane-divider.divider-right {
  right:40.5%;
  transform:skewY(-5deg);
}
.beat-master-road .tap-hit-zone {
  left:14%;
  right:14%;
  height:92px;
  border-radius:18px;
  background:rgba(24,20,27,.83);
  border:2px solid rgba(198,92,255,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.04), inset 0 0 20px rgba(0,0,0,.2);
}
.beat-master-road .tap-hit-zone span {
  font-size:1.02rem;
  letter-spacing:.18em;
}
.beat-master-road .tap-strike-pad {
  left:14%;
  right:14%;
  bottom:20px;
  height:92px;
  border-radius:18px;
  font-size:1.3rem;
  letter-spacing:.18em;
  background:transparent;
  border:0;
  box-shadow:none;
}
.beat-game-tile {
  width:12.8%;
  height:44px;
  border-radius:9px;
  background:linear-gradient(180deg,#0b0d17,#121626);
  border:2px solid rgba(140,133,255,.88);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 7px 16px rgba(0,0,0,.34),
    0 0 18px rgba(86,79,255,.26);
}
.beat-game-tile::after {
  left:14%;
  right:14%;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  height:5px;
  border-radius:999px;
  background:#7b74ff;
  box-shadow:0 0 12px rgba(123,116,255,.9);
}
.beat-game-tile.near-hit {
  border-color:#79e49f;
}
.beat-game-tile.near-hit::after {
  background:#79e49f;
}
@media (max-width:700px) {
  .game-helper-card {
    flex-direction:column;
    align-items:stretch;
  }
  .beat-master-road {
    min-height:650px;
  }
  .beat-master-road .tap-road-surface {
    inset:3% 6% 86px;
    clip-path:polygon(35% 0%,65% 0%,86% 100%,14% 100%);
  }
  .beat-master-road .tap-hit-zone,
  .beat-master-road .tap-strike-pad {
    left:9%;
    right:9%;
  }
}


/* ==========================================================
   v0.6.14 — curved, lane-locked Beat Master slide
   ========================================================== */

.beat-master-road {
  min-height:650px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 2%,rgba(181,218,246,.16),transparent 29%),
    linear-gradient(180deg,#31465f 0%,#263a52 20%,#192b40 58%,#101b2b 100%);
}

.beat-master-road .tap-road-surface,
.beat-master-road .road-lane-divider {
  display:none !important;
}

.beat-track-svg {
  position:absolute;
  z-index:1;
  left:5%;
  right:5%;
  top:2%;
  bottom:82px;
  width:90%;
  height:calc(100% - 84px);
  overflow:visible;
  pointer-events:none;
}

.beat-track-road {
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.20));
}

.beat-track-shine {
  opacity:.72;
}

.beat-track-divider {
  fill:none;
  stroke:rgba(79,101,121,.47);
  stroke-width:.42;
  vector-effect:non-scaling-stroke;
}

.beat-track-edge {
  fill:none;
  stroke:#fff;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-dasharray:2.4 1.9;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.42));
}

.beat-track-crest {
  fill:none;
  stroke:rgba(255,255,255,.30);
  stroke-width:.7;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 2px 2px rgba(255,255,255,.16));
}

.beat-game-tile {
  z-index:9;
  border-radius:10px;
  background:linear-gradient(180deg,#10131e,#080a10);
  border:2px solid rgba(119,112,255,.92);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 6px 13px rgba(0,0,0,.30),
    0 0 16px rgba(100,94,255,.27);
}

.beat-game-tile::after {
  left:12%;
  right:12%;
  top:50%;
  bottom:auto;
  height:5px;
  transform:translateY(-50%);
  background:#817aff;
  box-shadow:0 0 12px rgba(129,122,255,.92);
}

.beat-game-tile.near-hit {
  border-color:#79e49f;
}

.beat-game-tile.near-hit::after {
  background:#79e49f;
  box-shadow:0 0 12px rgba(96,215,151,.92);
}

/* The target sits across the same slide, not outside it. */
.beat-master-road .tap-hit-zone {
  left:11%;
  right:11%;
  bottom:79px;
  height:94px;
  border-radius:18px;
  background:rgba(20,17,25,.86);
  border:2px solid rgba(194,87,255,.58);
  box-shadow:
    inset 0 0 26px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.035);
}

.beat-master-road .tap-strike-pad {
  left:11%;
  right:11%;
  bottom:79px;
  height:94px;
  min-height:0;
  border:0;
  border-radius:18px;
  background:transparent;
  z-index:12;
  font-size:1.28rem;
  letter-spacing:.16em;
}

@media (max-width:700px) {
  .beat-master-road {
    min-height:690px;
  }

  .beat-track-svg {
    left:1.5%;
    right:1.5%;
    width:97%;
  }

  .beat-master-road .tap-hit-zone,
  .beat-master-road .tap-strike-pad {
    left:5%;
    right:5%;
  }
}


/* ==========================================================
   v0.6.15 — Setup → Game and a true convex/globe track
   ========================================================== */

.engine-only-measures {
  display:none !important;
}

.compact-builder-head {
  margin-bottom:10px;
}

.builder-settings-strip {
  display:grid;
  grid-template-columns:minmax(90px,120px) minmax(110px,150px) minmax(150px,1fr);
  gap:10px;
  align-items:end;
  margin:0 0 14px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--panel2);
}
.builder-settings-strip label {
  min-width:0;
}
.builder-settings-strip label > span {
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:.74rem;
  font-weight:800;
}
.builder-settings-strip select,
.builder-settings-strip input {
  width:100%;
}

.beat-master-continue {
  width:100%;
  min-height:52px;
  margin:12px 0 0;
  font-size:1.02rem;
}

.rhythm-subscreen.game-setup-mode .builder-playback-area {
  display:none;
}

.dock-bar-tabs {
  display:flex;
  gap:5px;
  align-items:center;
  flex:1;
  justify-content:center;
}
.dock-bar-tab {
  width:32px;
  min-height:28px;
  padding:2px;
  border-radius:8px;
  font-size:.75rem;
  font-weight:900;
}
.dock-bar-tab.active {
  background:var(--accent);
  color:#07101d;
  border-color:transparent;
}

.sticky-measure-token {
  overflow:visible;
}
.sticky-token-remove {
  position:absolute;
  top:-7px;
  right:-6px;
  z-index:4;
  width:24px;
  height:24px;
  min-height:24px;
  padding:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#151d2a;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:.76rem;
  line-height:1;
}
.sticky-token-remove:hover {
  background:#6f2730;
}

.beat-master-screen {
  padding-bottom:0;
}
#rhythmView:not(.hidden) .beat-master-screen ~ .rhythm-sticky-measure,
#rhythmView:not(.hidden) .rhythm-sticky-measure.hidden {
  display:none !important;
}

.beat-master-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.beat-master-header > strong {
  font-size:1.12rem;
}
.beat-master-header-actions {
  display:flex;
  gap:6px;
}
.compact-game-options {
  margin-bottom:6px;
}
.beat-master-live-row {
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.beat-master-live-row .tap-count-display,
.beat-master-live-row .tap-live-count {
  min-height:0;
  margin:0;
}
.beat-master-score {
  margin-top:7px;
}
.beat-master-game-only {
  max-width:760px;
  margin:0 auto;
}

/* The road and tile SVGs occupy the exact same coordinate system. */
.beat-master-road {
  min-height:590px;
  max-height:690px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% -5%,rgba(187,224,250,.18),transparent 31%),
    linear-gradient(180deg,#334b65 0%,#263b53 25%,#182a3f 62%,#101b2a 100%);
}

.beat-track-svg,
.beat-tile-svg {
  position:absolute;
  z-index:2;
  left:3%;
  top:1%;
  width:94%;
  height:88%;
  overflow:visible;
  pointer-events:none;
}

.beat-tile-svg {
  z-index:8;
}

.beat-track-road {
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.21));
}

.beat-track-divider {
  fill:none;
  stroke:rgba(70,92,111,.48);
  stroke-width:.48;
  vector-effect:non-scaling-stroke;
}

.beat-track-edge {
  fill:none;
  stroke:#fff;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-dasharray:2.6 2;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.45));
}

.beat-track-crest {
  fill:none;
  stroke:rgba(255,255,255,.35);
  stroke-width:.8;
  vector-effect:non-scaling-stroke;
}

/* SVG tiles lie ON the surface: no rotateX, no billboard transform. */
.beat-tile-shape {
  fill:#0b0e16;
  stroke:#8079ff;
  stroke-width:.55;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.38));
}
.beat-tile-line {
  stroke:#857dff;
  stroke-width:1.2;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 2px rgba(133,125,255,.75));
}
.beat-tile-label {
  fill:#fff;
  font-size:3px;
  font-weight:900;
  text-anchor:middle;
  dominant-baseline:middle;
  pointer-events:none;
}
.beat-tile-group.near-hit .beat-tile-shape {
  stroke:#79e49f;
}
.beat-tile-group.near-hit .beat-tile-line {
  stroke:#79e49f;
  filter:drop-shadow(0 0 2px rgba(96,215,151,.82));
}

.beat-master-road .tap-hit-zone {
  left:9%;
  right:9%;
  bottom:64px;
  height:84px;
  z-index:10;
  border-radius:15px;
  background:rgba(18,14,22,.83);
  border:2px solid rgba(198,90,255,.58);
}
.beat-master-road .tap-strike-pad {
  left:9%;
  right:9%;
  bottom:64px;
  height:84px;
  min-height:0;
  z-index:12;
  border:0;
  border-radius:15px;
  background:transparent;
  font-size:1.2rem;
  letter-spacing:.16em;
}

@media (max-width:650px) {
  .builder-settings-strip {
    grid-template-columns:90px 105px 1fr;
    gap:7px;
  }

  .beat-master-road {
    min-height:560px;
    max-height:none;
  }

  .beat-master-header {
    align-items:flex-start;
  }

  .beat-master-header-actions {
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .beat-track-svg,
  .beat-tile-svg {
    left:0;
    width:100%;
  }

  .beat-master-road .tap-hit-zone,
  .beat-master-road .tap-strike-pad {
    left:5%;
    right:5%;
  }
}


/* ==========================================================
   v0.6.16 — readable rhythm phrases
   ========================================================== */

.beat-master-road .tap-hit-zone span:empty {
  display:none;
}

.beat-master-road .tap-hit-zone span {
  font-size:1.06rem;
  font-weight:1000;
  letter-spacing:.15em;
  color:#9af2b5;
  text-shadow:0 0 10px rgba(96,215,151,.45);
}

.beat-master-road .tap-hit-zone.user-miss span {
  color:#ff9898;
  text-shadow:0 0 10px rgba(255,129,129,.42);
}

.beat-master-road .tap-strike-pad {
  color:#fff;
  font-weight:1000;
}

/* Larger, earlier-readable syllables on the falling tiles. */
.beat-tile-label {
  font-weight:1000;
  paint-order:stroke;
  stroke:rgba(0,0,0,.68);
  stroke-width:.35;
  stroke-linejoin:round;
}


/* ==========================================================
   v0.6.17 — clearer builder + desktop controls
   ========================================================== */

/* One measure display only: the visible overview below the picker. */
#rhythmView .rhythm-sticky-measure {
  display:none !important;
}

.rhythm-carousel-shell {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  gap:8px;
  align-items:center;
}
.carousel-arrow {
  width:44px;
  min-width:44px;
  height:72px;
  min-height:72px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:13px;
  font-size:2rem;
  line-height:1;
  font-weight:900;
  background:var(--panel2);
}
.carousel-arrow:disabled {
  opacity:.28;
}

.rhythm-palette-swipe {
  min-width:0;
  padding-bottom:8px;
}

.builder-measures-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin:12px 0 7px;
  flex-wrap:wrap;
}

.engine-only-measures {
  display:grid !important;
}

.builder-measure-overview {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.builder-measure-overview .rhythm-bar {
  min-width:0;
  margin:0;
}
.builder-measure-overview .measure-grid {
  min-height:104px;
  position:relative;
  padding-bottom:22px;
}
.builder-measure-overview .measure-slot-bg {
  position:relative;
  border-left:1px dashed rgba(170,180,207,.32);
}
.builder-measure-overview .measure-slot-bg::after {
  content:attr(data-beat-label);
  position:absolute;
  left:5px;
  bottom:-19px;
  color:var(--muted);
  font-size:.68rem;
  font-weight:900;
}
.builder-measure-overview .rhythm-bar-label {
  font-size:.77rem;
  font-weight:800;
}

/* START/TAP is a real centered target, not a 100%-wide base button fighting left/right offsets. */
.beat-master-road .tap-strike-pad {
  width:auto !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  font-size:1.48rem !important;
  font-weight:1000 !important;
}

/* Bigger Beat Master tiles while remaining inside their lane boundaries. */
.beat-tile-label {
  font-weight:1000;
}

@media (max-width:760px) {
  .rhythm-carousel-shell {
    grid-template-columns:minmax(0,1fr);
  }
  .carousel-arrow {
    display:none;
  }
  .builder-measure-overview {
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   v0.6.18
   ========================================================== */

.string-presets {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:12px 0 2px;
}
.string-presets button {
  min-height:40px;
  padding:7px 12px;
  border-radius:999px;
  font-weight:850;
}

.rhythm-category-tabs {
  display:flex;
  gap:6px;
  margin:8px 0 10px;
  overflow-x:auto;
  scrollbar-width:none;
}
.rhythm-category-tabs::-webkit-scrollbar { display:none; }
.rhythm-category-btn {
  flex:0 0 auto;
  min-height:36px;
  padding:5px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
}
.rhythm-category-btn.active {
  background:var(--accent);
  border-color:transparent;
  color:#07101d;
}

/* Bigger, centered + target so adding never feels like accidental flipping. */
.rhythm-add-btn {
  left:50% !important;
  right:auto !important;
  bottom:5px !important;
  transform:translateX(-50%);
  width:50px !important;
  min-width:50px !important;
  height:50px !important;
  min-height:50px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  line-height:1 !important;
  font-size:1.8rem !important;
  font-weight:1000 !important;
  border-radius:999px !important;
  box-shadow:0 5px 16px rgba(0,0,0,.24);
}
.rhythm-flip-hint {
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  top:7px !important;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:4px 8px !important;
  background:rgba(8,13,24,.88) !important;
  border:1px solid rgba(255,255,255,.16);
  color:#fff !important;
  font-weight:850;
}

/* Measure layout responds to the number of bars. */
.builder-measure-overview.bars-1 {
  grid-template-columns:1fr !important;
}
.builder-measure-overview.bars-2,
.builder-measure-overview.bars-3,
.builder-measure-overview.bars-4 {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.builder-measure-overview.bars-3 .rhythm-bar:last-child {
  grid-column:1 / -1;
}
.builder-measure-overview.bars-1 .measure-grid {
  min-height:136px;
}

/* Bigger Beat Master tiles while still staying within lane boundaries. */
.beat-tile-shape {
  filter:
    drop-shadow(0 3px 4px rgba(0,0,0,.38))
    drop-shadow(0 0 3px rgba(129,122,255,.26));
}
.beat-tile-group.incoming .beat-tile-shape {
  stroke:#c0bdff;
  filter:
    drop-shadow(0 3px 4px rgba(0,0,0,.38))
    drop-shadow(0 0 5px rgba(192,189,255,.62));
}
.beat-tile-group.incoming .beat-tile-line {
  stroke:#c8c4ff;
  filter:drop-shadow(0 0 4px rgba(200,196,255,.95));
}
.beat-tile-group.near-hit .beat-tile-shape {
  stroke-width:.85;
}
.beat-tile-group.near-hit .beat-tile-line {
  stroke-width:1.6;
}

@media (max-width:760px) {
  .builder-measure-overview.bars-1,
  .builder-measure-overview.bars-2,
  .builder-measure-overview.bars-3,
  .builder-measure-overview.bars-4 {
    grid-template-columns:1fr !important;
  }
  .builder-measure-overview.bars-3 .rhythm-bar:last-child {
    grid-column:auto;
  }
}


/* ==========================================================
   v0.6.19 — meter controls + Beat Master timing graphics
   ========================================================== */

.builder-settings-strip {
  grid-template-columns:minmax(74px,95px) minmax(105px,135px) minmax(100px,135px) minmax(140px,1fr);
}

.builder-measure-overview.bars-5,
.builder-measure-overview.bars-6,
.builder-measure-overview.bars-7,
.builder-measure-overview.bars-8 {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

#rhythmCountInBtn[aria-pressed="true"],
#tapCountInBtn[aria-pressed="true"] {
  background:rgba(121,228,159,.16);
  border-color:rgba(121,228,159,.46);
}

.beat-lane-glow {
  fill:rgba(83,255,144,0);
  pointer-events:none;
  transition:fill .055s linear, filter .055s linear;
}
.beat-lane-glow.hit {
  fill:rgba(83,255,144,.34);
  filter:drop-shadow(0 0 6px rgba(83,255,144,.9));
}

.beat-tile-shape {
  fill:#090c12;
  stroke:#ff4057 !important;
  stroke-width:.62;
  filter:
    drop-shadow(0 3px 4px rgba(0,0,0,.38))
    drop-shadow(0 0 4px rgba(255,64,87,.34));
}

.beat-tile-line {
  stroke:#ff4057 !important;
  stroke-width:1.6 !important;
  filter:drop-shadow(0 0 3px rgba(255,64,87,.98)) !important;
}

.beat-tile-group.incoming .beat-tile-shape {
  stroke:#ff6678 !important;
  filter:
    drop-shadow(0 3px 4px rgba(0,0,0,.38))
    drop-shadow(0 0 7px rgba(255,64,87,.72));
}
.beat-tile-group.incoming .beat-tile-line {
  stroke:#ff6a7b !important;
}

.beat-tile-group.near-hit .beat-tile-shape,
.beat-tile-group.holding .beat-tile-shape {
  stroke:#ffffff !important;
  fill:#173723;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.92))
    drop-shadow(0 0 13px rgba(83,255,144,.86));
}
.beat-tile-group.near-hit .beat-tile-line,
.beat-tile-group.holding .beat-tile-line,
.beat-tile-group.holding .beat-hold-spine,
.beat-tile-group.holding .beat-hold-cap {
  stroke:#ffffff !important;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.95))
    drop-shadow(0 0 8px rgba(83,255,144,.92));
}

.beat-hold-spine,
.beat-hold-cap {
  stroke:#ff4057;
  stroke-width:1.05;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px rgba(255,64,87,.86));
}

.beat-tile-label {
  display:none !important;
}

/* Strong full-track hit reaction. */
.beat-master-road.track-hit {
  box-shadow:
    inset 0 0 38px rgba(83,255,144,.24),
    0 0 20px rgba(83,255,144,.20);
}
.beat-master-road.track-miss {
  box-shadow:
    inset 0 0 28px rgba(255,70,83,.17);
}

@media (max-width:650px) {
  .builder-settings-strip {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .builder-measure-overview.bars-5,
  .builder-measure-overview.bars-6,
  .builder-measure-overview.bars-7,
  .builder-measure-overview.bars-8 {
    grid-template-columns:1fr !important;
  }
}


/* ==========================================================
   v0.6.20 — measure stays visible in Beat Master
   ========================================================== */

.beat-master-measure-panel {
  margin:0 0 7px;
  padding:8px 10px 9px;
  border:1px solid var(--border);
  border-radius:13px;
  background:rgba(9,16,29,.94);
}
.beat-master-measure-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:5px;
  color:var(--muted);
  font-size:.76rem;
  font-weight:850;
}
.beat-master-measure-head strong {
  color:var(--text);
}
.beat-master-measure-strip {
  display:flex;
  align-items:stretch;
  gap:4px;
  min-height:66px;
  overflow:hidden;
}
.beat-master-measure-token {
  position:relative;
  min-width:0;
  display:grid;
  place-items:center;
  padding:3px 5px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  transition:
    background .08s ease,
    box-shadow .08s ease,
    transform .08s ease;
}
.beat-master-measure-token img {
  width:100%;
  height:56px;
  object-fit:contain;
  background:#fff;
  border-radius:5px;
}
.beat-master-measure-token.current {
  background:rgba(121,228,159,.14);
  box-shadow:
    inset 0 0 0 2px rgba(121,228,159,.52),
    0 0 13px rgba(121,228,159,.20);
  transform:translateY(-1px);
}

.beat-master-cue {
  min-height:38px;
  margin:4px 0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.beat-master-cue .beat-number {
  color:var(--muted);
  font-size:.78rem;
  font-weight:850;
  margin-right:8px;
}
.beat-master-cue .beat-name {
  font-size:1.08rem;
  font-weight:1000;
}
.beat-master-cue .count-sequence {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.beat-master-cue .count-syllable {
  min-width:30px;
  min-height:30px;
  display:grid;
  place-items:center;
  padding:3px 7px;
  border-radius:8px;
  font-size:1rem;
  font-weight:1000;
  background:rgba(255,255,255,.045);
}
.beat-master-cue .count-syllable.active {
  background:#79e49f;
  color:#07101d;
  box-shadow:0 0 13px rgba(96,215,151,.35);
}

@media (max-width:650px) {
  .beat-master-measure-strip {
    min-height:58px;
  }
  .beat-master-measure-token img {
    height:49px;
  }
}