/* ═══════════════════════════════════════════════════════════════
   VIOLIN VISUALIZER — Tamil Bookshelf MIDI Player
   v1.0.0 (2026-05-16)
   Full replacement stylesheet for the violin fingerboard UI.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES  (extend the player's existing tokens)
────────────────────────────────────────────────────────────── */
:root {
  --vv-amber:      #d4882a;
  --vv-amber-hi:   #f0a840;
  --vv-amber-lo:   #a86010;
  --vv-cream:      #f5f0e4;
  --vv-cream-dim:  #c8b898;
  --vv-rosin:      #e8c060;
  --vv-wood-dark:  #1e0d04;
  --vv-wood-mid:   #3b1a08;
  --vv-glow-soft:  rgba(212, 136, 42, 0.18);
}

/* ─────────────────────────────────────────────────────────────
   VISUALIZER CONTAINER
────────────────────────────────────────────────────────────── */
#staff-visualizer {
  background:
    radial-gradient(ellipse 80% 60% at 30% 50%, rgba(58, 26, 8, 0.7) 0%, transparent 70%),
    linear-gradient(170deg, #0e0905 0%, #1a1008 45%, #120c06 100%);
  border: 1px solid rgba(180, 100, 30, 0.2);
  border-radius: 16px;
  margin: 14px 0;
  overflow: hidden;
  height: 268px;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 100, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 6px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(180, 100, 30, 0.1);
  transition: box-shadow 0.4s ease;
}

#staff-visualizer:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 100, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 8px 40px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(212, 136, 42, 0.18);
}

/* ─────────────────────────────────────────────────────────────
   CANVAS STACK
────────────────────────────────────────────────────────────── */
#keyboard-container {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* All three canvas layers fill the container absolutely */
#particle-canvas,
#glow-canvas,
#fret-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  pointer-events: none;
}

#particle-canvas { z-index: 2;  opacity: 0.85; }
#glow-canvas     { z-index: 6;  opacity: 0.7;  mix-blend-mode: screen; }
#fret-canvas     { z-index: 10; }

/* ─────────────────────────────────────────────────────────────
   BADGE BASE  (shared between tuning / fret / position badges)
────────────────────────────────────────────────────────────── */
.fret-badge {
  position: absolute;
  background: rgba(8, 5, 2, 0.72);
  border: 1px solid rgba(212, 136, 42, 0.22);
  border-radius: 20px;
  padding: 4px 13px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.6px;
  color: var(--vv-cream-dim);
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

/* Instrument name badge — top right */
#fret-badge {
  top: 10px;
  right: 14px;
  color: var(--vv-amber);
  font-weight: 600;
  border-color: rgba(212, 136, 42, 0.35);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.62rem;
}

/* Tuning badge — top left */
#tuning-badge {
  top: 10px;
  left: 60px;
  background: rgba(10, 6, 2, 0.75);
  font-size: 0.64rem;
}
#tuning-badge span {
  color: var(--vv-amber);
  font-weight: 600;
}

/* Position badge — bottom right */
#pos-badge {
  bottom: 32px;
  right: 14px;
  font-size: 0.58rem;
  letter-spacing: 0.8px;
  color: var(--vv-rosin);
  border-color: rgba(232, 192, 96, 0.25);
  opacity: 0;
  transition: opacity 0.25s ease;
  padding: 3px 10px;
}

/* ─────────────────────────────────────────────────────────────
   STRING LABEL GUTTER  (drawn by canvas, but these classes
   are available for HTML-fallback rendering if needed)
────────────────────────────────────────────────────────────── */
.vv-string-label {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 10px rgba(212, 136, 42, 0.4);
}
.vv-string-label.wound  { color: #d4945a; font-size: 1.05rem; }
.vv-string-label.plain  { color: #f0e0c0; font-size: 0.95rem; }

/* ─────────────────────────────────────────────────────────────
   ACTIVE NOTE DOT  (HTML fallback — primary rendering is canvas)
────────────────────────────────────────────────────────────── */
.vv-note-dot {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(255, 255, 255, 0.18),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
  animation: vv-note-appear 0.06s ease-out forwards;
}

@keyframes vv-note-appear {
  from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   PULSE RING  (HTML fallback for birth pulse)
────────────────────────────────────────────────────────────── */
.vv-pulse-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--vv-amber);
  pointer-events: none;
  z-index: 14;
  animation: vv-pulse-expand 0.55s ease-out forwards;
}

@keyframes vv-pulse-expand {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   GHOST NOTE  (upcoming notes preview)
────────────────────────────────────────────────────────────── */
.vv-ghost-dot {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed var(--vv-amber-lo);
  pointer-events: none;
  z-index: 11;
  animation: vv-ghost-breathe 1.1s ease-in-out infinite;
}

@keyframes vv-ghost-breathe {
  0%, 100% { opacity: 0.2;  border-color: var(--vv-amber-lo); }
  50%       { opacity: 0.45; border-color: var(--vv-amber);    }
}

/* ─────────────────────────────────────────────────────────────
   ROSIN DUST PARTICLES  (HTML fallback; canvas is primary)
────────────────────────────────────────────────────────────── */
.vv-rosin-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  background: var(--vv-rosin);
  animation: vv-rosin-float 0.7s ease-out forwards;
}

@keyframes vv-rosin-float {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.7; }
  60%  { transform: translate(-50%, -160%) scale(0.6); opacity: 0.35; }
  100% { transform: translate(-50%, -260%) scale(0.2); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   OPEN-STRING INDICATOR  (O marker)
────────────────────────────────────────────────────────────── */
.vv-open-ring {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--vv-amber);
  background: rgba(212, 136, 42, 0.1);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--vv-amber);
  box-shadow: 0 0 8px rgba(212, 136, 42, 0.35);
  animation: vv-open-pulse 0.4s ease-out;
}

@keyframes vv-open-pulse {
  0%   { box-shadow: 0 0 0   rgba(212, 136, 42, 0.6); }
  50%  { box-shadow: 0 0 18px rgba(212, 136, 42, 0.5); }
  100% { box-shadow: 0 0 8px  rgba(212, 136, 42, 0.35); }
}

/* ─────────────────────────────────────────────────────────────
   SCALE + TUNING CONTROLS
────────────────────────────────────────────────────────────── */
.scale-toggle-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px 2px;
  flex-wrap: wrap;
}

.scale-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  color: var(--text-muted, rgba(255,255,255,0.35));
  text-transform: uppercase;
  letter-spacing: 1.1px;
  white-space: nowrap;
}

.scale-pill {
  padding: 4px 11px;
  border: 1px solid rgba(180, 100, 30, 0.28);
  border-radius: 20px;
  background: rgba(12, 7, 2, 0.85);
  color: rgba(200, 175, 140, 0.75);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s, box-shadow 0.18s;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  white-space: nowrap;
}

.scale-pill:hover {
  border-color: var(--vv-amber);
  color: var(--vv-amber-hi);
  background: rgba(212, 136, 42, 0.08);
  box-shadow: 0 0 8px rgba(212, 136, 42, 0.15);
}

.scale-pill.active {
  background: linear-gradient(135deg, var(--vv-amber) 0%, var(--vv-amber-lo) 100%);
  color: #1a0e04;
  border-color: var(--vv-amber);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(212, 136, 42, 0.35);
}

/* Select arrow override */
select.scale-pill {
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(180,120,40,0.6)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 8px;
}

select.scale-pill option {
  background: #1a0e04;
  color: #c8b080;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #staff-visualizer {
    height: 210px;
    border-radius: 12px;
  }
  #fret-badge  { font-size: 0.58rem; padding: 3px 9px; }
  #tuning-badge { display: none; }
  #pos-badge   { font-size: 0.52rem; bottom: 28px; }
  .scale-toggle-row  { padding: 7px 14px 0; gap: 5px; }
  .scale-pill        { font-size: 0.6rem; padding: 3px 8px; }
  .scale-label       { font-size: 0.58rem; }
}

@media (max-width: 480px) {
  #staff-visualizer { height: 178px; }
  .scale-toggle-row { padding: 6px 10px 0; }
  .scale-pill       { font-size: 0.56rem; padding: 3px 6px; }
}

/* ─────────────────────────────────────────────────────────────
   NICE-TO-HAVE: scrollbar hiding on the control row
────────────────────────────────────────────────────────────── */
.scale-toggle-row::-webkit-scrollbar { display: none; }
.scale-toggle-row { -ms-overflow-style: none; scrollbar-width: none; }