:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --text: #1f1d1a;
  --muted: #6d675e;
  --border: #ddd6ca;
  --chord: #c2410c;
  --accent: #0f766e;
  --accent-text: #ffffff;
  --current-bg: #fde7d4;
  --line-bg: #fff6ec;
  --danger: #b91c1c;
  --font-size: 20px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a;
    --surface: #1f2226;
    --text: #ecebe7;
    --muted: #9a978f;
    --border: #33373d;
    --chord: #fb923c;
    --accent: #2dd4bf;
    --accent-text: #0b1a18;
    --current-bg: #5a2d10;
    --line-bg: #24221f;
    --danger: #f87171;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

button, select, input, textarea { font: inherit; color: inherit; }
button, select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button.big { padding: 9px 16px; }
button.danger { color: var(--danger); }
button.on { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); }

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 1.15rem; }
#songSelect { min-width: 220px; flex: 1 1 220px; max-width: 420px; }
.topbar-actions { display: flex; gap: 8px; margin-left: auto; }

.toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.label { color: var(--muted); font-size: 0.85rem; }
.field { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 0.85rem; }
.field input { width: 110px; }
.pill { min-width: 2.2em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

.monitor { gap: 14px; }
.heard { display: flex; flex-direction: column; line-height: 1.1; min-width: 64px; }
.heard strong { font-size: 1.4rem; color: var(--chord); }
.chroma { display: grid; grid-template-columns: repeat(12, 14px); gap: 3px; align-items: end; height: 46px; }
.chroma .bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.chroma .fill { background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; transition: height 60ms linear; }
.chroma .bar.expected .fill { background: var(--chord); }
.chroma .note { font-size: 9px; text-align: center; color: var(--muted); }
.level { width: 8px; height: 46px; background: var(--border); border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; }
#levelBar { width: 100%; background: var(--muted); height: 0; }
#levelBar.active { background: var(--accent); }

.status { margin: 10px 16px 0; color: var(--muted); font-size: 0.9rem; }

.song { max-width: 900px; margin: 0 auto; padding: 16px; }
.song h1 { margin: 12px 0 2px; }
.artist { margin: 0 0 24px; color: var(--muted); }

.sheet {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: var(--font-size);
  line-height: 1.25;
}
.row { padding: 4px 8px; border-radius: 8px; transition: background 250ms; }
.row.current { background: var(--line-bg); }
.row.past { opacity: 0.55; }
.row.section { font-family: system-ui, sans-serif; font-weight: 700; color: var(--muted); font-size: 0.8em; margin-top: 10px; padding-bottom: 0; }
.row.blank { height: 0.8em; }

.seg { display: inline-flex; flex-direction: column; vertical-align: bottom; }
.ly { white-space: pre; }
.ch {
  color: var(--chord);
  font-weight: 700;
  white-space: pre;
  min-height: 1.25em;
  align-self: flex-start;
  cursor: pointer;
  border-radius: 4px;
  padding-right: 0.4ch;
  transition: background 200ms, transform 200ms;
}
.ch:empty { cursor: default; }
.row.nochords .ch { display: none; }
.row.chords-only .ch { display: inline-block; margin-right: 1.5ch; }
.ch.current { background: var(--chord); color: var(--surface); padding: 0 0.3ch; transform: scale(1.12); }
.ch.next { text-decoration: underline dotted; }

.end-spacer { height: 70vh; }
body.has-dock .end-spacer { height: calc(70vh + 170px); }

/* ---- desenhos dos acordes ---- */
.diagram { display: block; color: var(--text); }
.diagram .dot { fill: var(--text); }
.diagram .finger { fill: var(--surface); font-weight: 700; font-family: system-ui, sans-serif; }

.chords-section h2 { font-size: 1rem; margin: 0 0 8px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.chord-panel { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.chord-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chord-name { font-weight: 700; color: var(--chord); font-family: ui-monospace, Consolas, monospace; }
.diagram-btn { border: none; padding: 0; background: none; }
.variation { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--muted); }
.variation button { padding: 0 8px; line-height: 1.4; }
.variation button:disabled { opacity: 0.3; cursor: default; }

.chord-tip {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
  text-align: center;
}

/* ---- violão virtual ---- */
.settings { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.settings-toggle { display: none; }

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgb(0 0 0 / 0.18);
  padding: 6px 16px calc(10px + env(safe-area-inset-bottom));
}
.dock-head { display: flex; gap: 10px; align-items: center; max-width: 760px; margin: 0 auto; }
.dock-hint { color: var(--text); font-size: 0.95rem; flex: 1; }
.dock-hint .label { font-size: 0.8rem; }
.hint-next { color: var(--accent); }
#dockClose { padding: 2px 10px; }

.guitar { max-width: 760px; margin: 0 auto; touch-action: manipulation; }
.gv { display: block; width: 100%; height: auto; max-height: 24vh; cursor: pointer; user-select: none; }
.gv-peg { fill: #cfc8bc; stroke: #6f675b; }
.gv-shadow { stroke: #000; opacity: 0.35; }
.gv-string.wound { stroke: #cfa560; }
.gv-string.plain { stroke: #ecebe6; }
.gv-string { transform-box: fill-box; transform-origin: center; }
.gv-string.vib { animation: vib 0.7s ease-out; }
@keyframes vib {
  0% { transform: translateY(0); }
  8% { transform: translateY(2.4px); }
  16% { transform: translateY(-2.4px); }
  26% { transform: translateY(1.8px); }
  38% { transform: translateY(-1.3px); }
  52% { transform: translateY(0.8px); }
  70% { transform: translateY(-0.4px); }
  100% { transform: translateY(0); }
}
.gv-dot { fill: var(--accent); stroke: rgb(255 255 255 / 0.9); stroke-width: 2; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.5)); }
.gv-finger { fill: var(--accent-text); font: 800 14px system-ui, sans-serif; pointer-events: none; }
.gv-mute { fill: #f3e9da; font: 700 14px system-ui, sans-serif; }
.gv-open { fill: none; stroke: #f3e9da; stroke-width: 2.2; }
.gv-num { fill: var(--muted); font: 600 12px system-ui, sans-serif; }

/* ---- jogo ---- */
.neck-wrap { position: relative; max-width: 760px; margin: 0 auto; }
.feedback {
  position: absolute; left: 50%; top: 40%;
  transform: translate(-50%, -50%) scale(0.6);
  padding: 6px 18px; border-radius: 999px;
  font: 800 1.5rem system-ui, sans-serif;
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.feedback small { font-size: 0.9rem; font-weight: 600; opacity: 0.9; }
.feedback.ok { background: #16a34a; color: #fff; }
.feedback.bad { background: #dc2626; color: #fff; }
.feedback.show { animation: pop 1.1s ease-out forwards; }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  22% { transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}
.feedback.bad.show { animation: pop 1.1s ease-out forwards, shake 0.35s; }
@keyframes shake { 25% { margin-left: -8px; } 75% { margin-left: 8px; } }

.score { display: flex; gap: 10px; font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.score .ok { color: #16a34a; }
.score .bad { color: #dc2626; }
.score .combo.hot { color: #f97316; animation: glow 1s ease-in-out infinite alternate; }
.score .acc { color: var(--muted); }
@keyframes glow { to { text-shadow: 0 0 10px #f97316; } }

.lane-wrap { max-width: 760px; margin: 4px auto 6px; overflow: hidden; mask-image: linear-gradient(90deg, #000 75%, transparent); }
.lane { display: flex; gap: 8px; align-items: center; }
.lane.advance { animation: laneIn 0.35s ease-out; }
@keyframes laneIn { from { transform: translateX(90px); } to { transform: none; } }
.lane-chip {
  flex: 0 0 auto; min-width: 54px; text-align: center;
  padding: 6px 12px; border-radius: 10px;
  border: 2px solid var(--border); color: var(--muted);
  font: 700 1rem ui-monospace, Consolas, monospace;
}
.lane-chip small { font-size: 0.7rem; margin-left: 4px; opacity: 0.8; }
.lane-chip.playing { border-color: var(--chord); background: var(--chord); color: var(--surface); }
.lane-chip.target { border-color: var(--accent); color: var(--accent); animation: beckon 0.9s ease-in-out infinite alternate; }
.lane-chip.end { border-style: dashed; }
@keyframes beckon { to { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); } }

.dock.mic .dock-chords { display: none; }
.ch.waiting { outline: 2px dashed var(--accent); outline-offset: 2px; }

.dock-chords {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 6px auto 0;
}
.dock-chord {
  position: relative;
  min-width: 64px;
  padding: 10px 14px;
  border-width: 2px;
  border-radius: 12px;
  font-size: 1.15rem;
  touch-action: manipulation;
  user-select: none;
}
.dock-chord kbd { position: absolute; top: 1px; right: 5px; font-size: 0.62rem; color: var(--muted); font-family: inherit; }
.dock-chord.is-current { border-color: var(--chord); }
.dock-chord.is-next { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.dock-chord.struck { animation: struck 250ms ease-out; }
@keyframes struck { from { transform: scale(0.9); } to { transform: scale(1); } }

/* ---- celular ---- */
@media (max-width: 700px) {
  .topbar { padding: 8px 12px; gap: 8px; }
  .brand { font-size: 1rem; }
  #songSelect { order: 3; flex: 1 1 100%; max-width: none; min-width: 0; }
  .topbar-actions { margin-left: auto; gap: 6px; }
  .topbar-actions button { padding: 5px 9px; font-size: 0.85rem; }

  .toolbar { padding: 8px 12px; gap: 8px; }
  .modes { flex-wrap: nowrap; width: 100%; gap: 6px; }
  .modes .big { flex: 1; padding: 9px 6px; font-size: 0.9rem; white-space: nowrap; }
  .modes .settings-toggle { display: inline-block; flex: 0 0 auto; padding: 9px 12px; }
  .settings { display: none; width: 100%; gap: 10px 16px; }
  .toolbar.show-settings .settings { display: flex; }
  .field input { width: 100px; }
  .monitor { width: 100%; justify-content: space-between; }
  .chroma { grid-template-columns: repeat(12, 1fr); flex: 1; height: 36px; }
  .level { height: 36px; }

  .status { margin: 8px 12px 0; font-size: 0.85rem; }
  .song { padding: 8px 12px; }
  .song h1 { font-size: 1.4rem; }
  .artist { margin-bottom: 14px; }
  .chords-section h2 .label { display: none; }
  .chord-panel { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 18px; padding: 0 12px 4px; scroll-snap-type: x proximity; }
  .chord-card { flex: 0 0 auto; scroll-snap-align: start; }
  .sheet { font-size: calc(var(--font-size) * 0.8); }
  .row { padding: 3px 4px; }

  .dock { padding: 4px 8px calc(8px + env(safe-area-inset-bottom)); }
  .dock-hint { font-size: 0.85rem; }
  .dock-hint .label { display: none; }
  .gv { max-height: 20vh; }
  .score { gap: 7px; font-size: 0.8rem; }
  .score .acc { display: none; }
  .feedback { font-size: 1.15rem; }
  .lane-chip { min-width: 46px; padding: 4px 8px; font-size: 0.9rem; }
  .dock-chords { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; }
  .dock-chord { flex: 1 0 64px; padding: 12px 10px; }
  .dock-chord kbd { display: none; }
}

/* rótulos curtos nos botões quando a tela é estreita */
.short { display: none; }
@media (max-width: 700px) {
  .long { display: none; }
  .short { display: inline; }
  .modes .big { min-width: 0; }
}