/* ═══════════════════════════════════════════════════════════════
   FLUTE PLAYER  flute-player.css  v1.0
   Theme: Bamboo Mist — breath-blue on deep forest
═══════════════════════════════════════════════════════════════ */

body.inst-flute, body.inst-bansuri, body.inst-bagpipe, body.inst-shanai {
  --player-accent:      #7ecfb8;
  --player-accent-dim:  rgba(126,207,184,.13);
  --player-accent-glow: rgba(126,207,184,.22);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% -8%, rgba(80,180,140,.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 5% 70%, rgba(212,168,74,.04) 0%, transparent 55%);
}
body.inst-flute #loading-overlay::before   { content: '🌬️'; font-size: 30vw; }
body.inst-bansuri #loading-overlay::before { content: '🪈'; font-size: 30vw; }

#staff-visualizer {
  position: relative; width: 100%; height: 300px; margin: 12px 0;
  border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(ellipse 75% 60% at 18% 50%, rgba(44,26,6,.80) 0%, transparent 68%),
    radial-gradient(ellipse 55% 70% at 82% 38%, rgba(126,207,184,.04) 0%, transparent 72%),
    linear-gradient(155deg, #070e0c 0%, #121808 48%, #0a1008 100%);
  border: 1px solid rgba(126,207,184,.15);
  box-shadow: inset 0 1px 0 rgba(126,207,184,.06), 0 10px 40px rgba(0,0,0,.65);
  transition: box-shadow .45s ease;
}
#staff-visualizer:hover {
  box-shadow: inset 0 1px 0 rgba(126,207,184,.09), 0 14px 50px rgba(0,0,0,.70),
              0 0 0 1px rgba(126,207,184,.18);
}
#keyboard-container { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* Canvas layers from flute-visualizer.js */
#fv-part, #fv-breath, #fv-glow, #fv-main {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
#fv-part   { z-index:2;  opacity:.85; mix-blend-mode:screen; }
#fv-breath { z-index:4;  opacity:.90; mix-blend-mode:screen; }
#fv-glow   { z-index:7;  opacity:.75; mix-blend-mode:screen; }
#fv-main   { z-index:10; }

/* Badges */
.fv-badge {
  position: absolute; z-index: 20; padding: 4px 13px; border-radius: 22px;
  border: 1px solid rgba(126,207,184,.2); background: rgba(4,8,10,.82);
  backdrop-filter: blur(12px); font-family: var(--font-body); font-size: .64rem;
  letter-spacing: .6px; color: rgba(200,240,230,.7); pointer-events: none; white-space: nowrap;
}
#fv-badge-inst  { top:11px; left:14px; color:#d4a84a; font-weight:700; font-size:.62rem; text-transform:uppercase; }
#fv-badge-note  { top:11px; right:14px; font-family:var(--font-display); font-size:.88rem; font-weight:700; color:#c8fff0; }
#fv-badge-raaga { bottom:30px; left:14px; font-size:.58rem; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
#fv-badge-reg   { bottom:30px; right:14px; font-size:.56rem; letter-spacing:1.1px; text-transform:uppercase; color:#7ecfb8; }

/* Control rows */
.fv-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 9px 22px 4px; border-top: 1px solid rgba(126,207,184,.06);
  background: rgba(11,18,20,.6);
}
.fv-lbl {
  font-family: var(--font-body); font-size: .68rem; font-weight: 600;
  color: #7ecfb8; text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap;
}
.fv-pill {
  display: inline-flex; align-items: center; padding: 4px 11px;
  border: 1px solid rgba(126,207,184,.2); border-radius: 22px;
  background: rgba(4,8,10,.9); color: rgba(200,240,230,.6);
  font-family: var(--font-body); font-size: .72rem; cursor: pointer;
  outline: none; appearance: none; transition: all .16s;
}
.fv-pill:hover { border-color: #7ecfb8; color: #c8fff0; background: rgba(126,207,184,.07); }
.fv-pill.active {
  background: linear-gradient(135deg, #d4a84a, #7a5010);
  color: #04080a; border-color: #d4a84a; font-weight: 700;
}
.fv-sel {
  padding-right: 24px; max-width: 210px;
  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(126,207,184,0.5)'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 8px;
  background-color: rgba(4,8,10,.9); cursor: pointer;
}
.fv-sel option, .fv-sel optgroup { background: #080e0c; color: var(--cream-dim); font-size: .68rem; }

/* Player color overrides */
body.inst-flute .now-info .now-title, body.inst-bansuri .now-info .now-title {
  background: linear-gradient(135deg, #3a9a80, #7ecfb8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.inst-flute .ctrl-btn.primary, body.inst-bansuri .ctrl-btn.primary {
  background: linear-gradient(135deg, #3a9a80, #7ecfb8); color: #04080a;
}
body.inst-flute .seek-fill, body.inst-bansuri .seek-fill {
  background: linear-gradient(90deg, #3a9a80, #7ecfb8);
}

@media (max-width: 768px) {
  #staff-visualizer { height: 230px; border-radius: 14px; }
  .fv-row { padding: 6px 14px 3px; gap: 5px; }
  .fv-pill { font-size: .62rem; padding: 3px 8px; }
  #fv-badge-inst, #fv-badge-raaga { display: none; }
}
@media (max-width: 480px) { #staff-visualizer { height: 188px; } }