/* ============================================================
   bandcraft — design system (shared stylesheet)
   Dark, clean, modern. Tokens + components used by the landing
   (index.html) and the in-game top bar (rocksmith.html).

   Fonts (Hanken Grotesk / Space Grotesk / Space Mono) are loaded
   from Google Fonts via <link> in each page; they degrade to
   system-ui if offline.

   Everything below the divider is the canonical design system,
   kept verbatim from inputhtml/bandcraft-design-system.html.
   The "game integration" block at the very end adapts those
   tokens to the real <canvas> game shell (selects, popovers,
   fullscreen layout). Do not edit the verbatim block — extend
   it in the integration block instead.
   ============================================================ */

.bc-root {
  /* base palette */
  --bg:        #0a0b10;
  --bg-2:      #0d0f15;
  --surface:   #14161f;
  --surface-2: #1a1d28;
  --surface-3: #222533;
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);
  --text:   #f3f4f8;
  --text-2: #a4a9b6;
  --text-3: #6b7180;

  /* string rainbow (matches the in-game fretboard) */
  --s-e1: #f59e0b; /* low E  — orange */
  --s-a:  #facc15; /* A      — yellow */
  --s-d:  #3b82f6; /* D      — blue   */
  --s-g:  #22c55e; /* G      — green  */
  --s-b:  #06b6d4; /* B      — cyan   */
  --s-e2: #a855f7; /* high e — purple */

  /* default accent (overridden per direction) */
  --accent:    #ec4899;
  --accent-2:  #f9a8d4;
  --accent-ink:#ffffff;
  --glow: 236,72,153;

  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}
.bc-root *, .bc-root *::before, .bc-root *::after { box-sizing: border-box; }

.bc-magenta { --accent:#ec4899; --accent-2:#f9a8d4; --accent-ink:#fff; --glow:236,72,153; }
.bc-lime    { --accent:#a3e635; --accent-2:#d9f99d; --accent-ink:#0a0b10; --glow:163,230,53; }
.bc-amber   { --accent:#f59e0b; --accent-2:#fcd34d; --accent-ink:#0a0b10; --glow:245,158,11; }

/* ---------- typography helpers ---------- */
.bc-display { font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:-0.03em; line-height:0.98; }
.bc-mono    { font-family:'Space Mono', monospace; }
.bc-eyebrow {
  font-family:'Space Mono', monospace; font-size:13px; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--accent);
}

/* ---------- nav ---------- */
.bc-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 64px; position:relative; z-index:5;
}
.bc-nav-links { display:flex; align-items:center; gap:34px; }
.bc-nav-links a {
  color:var(--text-2); text-decoration:none; font-size:15px; font-weight:500;
  transition:color .15s; white-space:nowrap;
}
.bc-nav-links a:hover { color:var(--text); }
.bc-nav-right { display:flex; align-items:center; gap:20px; }

/* ---------- logo ---------- */
.bc-logo { display:inline-flex; align-items:center; gap:11px; }
.bc-logo-mark {
  width:30px; height:30px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.bc-logo-word {
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:21px;
  letter-spacing:-0.02em; color:var(--text);
}
.bc-logo-word b { color:var(--accent); font-weight:700; }

/* ---------- buttons ---------- */
.bc-btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Hanken Grotesk', sans-serif; font-weight:600; font-size:15px;
  border-radius:11px; padding:13px 22px; cursor:pointer; border:1px solid transparent;
  transition:transform .12s, box-shadow .2s, background .15s, border-color .15s;
  white-space:nowrap; text-decoration:none;
}
.bc-btn-primary {
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 0 0 1px rgba(var(--glow),0.4), 0 8px 30px -6px rgba(var(--glow),0.55);
}
.bc-btn-primary:hover { transform:translateY(-1px); box-shadow:0 0 0 1px rgba(var(--glow),0.6), 0 12px 38px -6px rgba(var(--glow),0.7); }
.bc-btn-ghost {
  background:rgba(255,255,255,0.04); color:var(--text);
  border-color:var(--border-strong);
}
.bc-btn-ghost:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.28); }
.bc-btn-lg { font-size:17px; padding:16px 30px; border-radius:13px; }

/* ---------- hero ---------- */
.bc-hero { position:relative; overflow:hidden; }
.bc-hero-grain { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:4px 4px; }
.bc-hero-glow {
  position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px);
}

.bc-h1 { font-size:80px; }
.bc-sub {
  font-size:21px; line-height:1.5; color:var(--text-2); font-weight:400; max-width:560px;
}
.bc-sub b { color:var(--text); font-weight:600; }

.bc-pillrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bc-pill {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:rgba(255,255,255,0.04); border:1px solid var(--border); color:var(--text-2);
}
.bc-pill .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }

/* ---------- how it works ---------- */
.bc-section { padding:96px 64px; }
.bc-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bc-step {
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:18px; padding:30px 28px 32px; overflow:hidden;
}
.bc-step-num {
  font-family:'Space Mono',monospace; font-size:13px; font-weight:700;
  color:var(--accent); letter-spacing:0.1em;
}
.bc-step-ico {
  width:52px; height:52px; border-radius:13px; margin:18px 0 20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--glow),0.12); border:1px solid rgba(var(--glow),0.28);
  color:var(--accent);
}
.bc-step h3 { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600; margin:0 0 9px; letter-spacing:-0.01em; }
.bc-step p { margin:0; color:var(--text-2); font-size:15.5px; line-height:1.55; }
.bc-step-line {
  position:absolute; top:30px; right:28px; font-family:'Space Mono',monospace;
  font-size:12px; color:var(--text-3);
}

/* ---------- fretboard (the in-game view, reused) ---------- */
.bc-fret { position:relative; width:100%; height:100%; background:#08090d; overflow:hidden; }
.bc-fret-lane {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:62%; height:64%;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(to bottom, #0e1018, #0a0b11);
  clip-path:polygon(38% 0, 62% 0, 100% 100%, 0% 100%);
}
.bc-fret-spot {
  position:absolute; top:-10%; left:50%; transform:translateX(-50%);
  width:50%; height:70%; pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, rgba(120,140,200,0.12), transparent 70%);
}
.bc-board {
  position:absolute; left:3%; right:3%; bottom:9%;
  display:grid; grid-template-columns:26px 1fr; align-items:stretch;
}
.bc-board-strings { display:grid; }
.bc-strlabel {
  font-family:'Space Mono',monospace; font-weight:700; font-size:13px;
  display:flex; align-items:center; height:100%;
}
.bc-board-grid {
  position:relative; border:1px solid rgba(255,255,255,0.18);
  background:
    repeating-linear-gradient(to right, transparent, transparent calc(100%/15 - 1px), rgba(255,255,255,0.13) calc(100%/15 - 1px), rgba(255,255,255,0.13) calc(100%/15));
}
.bc-string { position:absolute; left:0; right:0; height:1px; background:rgba(255,255,255,0.22); }
.bc-dot { position:absolute; width:11px; height:11px; border-radius:50%; background:#7e8696; transform:translate(-50%,-50%); box-shadow:0 0 8px rgba(0,0,0,.5); }
.bc-frets { display:grid; grid-template-columns:26px 1fr; margin-top:6px; }
.bc-fretnums { display:grid; grid-template-columns:repeat(15,1fr); }
.bc-fretnums span { font-family:'Space Mono',monospace; font-size:12px; color:var(--text-3); text-align:center; }

/* ---------- browser chrome (macOS) ---------- */
.bc-win { background:#1c1d22; border-radius:12px; overflow:hidden; box-shadow:0 30px 90px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); display:flex; flex-direction:column; }
.bc-win-bar { display:flex; align-items:center; gap:14px; padding:11px 14px; background:#26272d; }
.bc-traffic { display:flex; gap:8px; }
.bc-traffic i { width:12px; height:12px; border-radius:50%; display:block; }
.bc-win-controls { display:flex; align-items:center; gap:6px; color:#8a8d96; }
.bc-iconbtn { width:30px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#9498a2; background:transparent; border:none; }
.bc-urlbar { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:#1c1d22; border-radius:7px; height:30px; color:#c2c6cf; font-size:13px; font-family:'Hanken Grotesk',sans-serif; max-width:420px; margin:0 auto; }
.bc-win-tabs { display:flex; align-items:flex-end; gap:2px; padding:0 10px; background:#26272d; }
.bc-tab { display:flex; align-items:center; gap:8px; padding:9px 16px; font-size:13px; color:#c2c6cf; background:transparent; border-radius:9px 9px 0 0; white-space:nowrap; }
.bc-tab.active { background:#1c1d22; color:#fff; }
.bc-tab .fav { width:16px; height:16px; border-radius:4px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:var(--accent-ink); }

/* ---------- game toolbar (the part being redesigned) ---------- */
.bc-toolbar { display:flex; align-items:center; background:#0e0f14; border-bottom:1px solid rgba(255,255,255,0.07); }
.bc-tbtn {
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size:14px;
  border-radius:9px; padding:10px 16px; cursor:pointer; border:1px solid var(--border-strong);
  background:rgba(255,255,255,0.05); color:var(--text); transition:background .15s, border-color .15s, transform .1s;
}
.bc-tbtn:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.28); }
.bc-tbtn-accent { background:var(--accent); color:var(--accent-ink); border-color:transparent; box-shadow:0 4px 18px -4px rgba(var(--glow),0.6); }
.bc-tbtn-accent:hover { filter:brightness(1.06); background:var(--accent); }
.bc-tbtn-ghost { background:transparent; border-color:transparent; color:var(--text-2); }
.bc-tbtn-ghost:hover { background:rgba(255,255,255,0.06); color:var(--text); }

/* ---------- note highway (Direction B hero visual) ---------- */
.bc-highway { position:relative; width:100%; height:100%; overflow:hidden;
  background:radial-gradient(90% 70% at 50% 0%, #12141d, #08090d 80%); perspective:760px; }
.bc-highway-floor {
  position:absolute; left:50%; bottom:-4%; width:78%; height:128%;
  transform:translateX(-50%) rotateX(58deg); transform-origin:bottom center;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.02));
  border-left:1px solid var(--border); border-right:1px solid var(--border);
}
.bc-lane { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.1); }
.bc-rung { position:absolute; left:0; right:0; height:1px; background:rgba(255,255,255,0.06); }
.bc-hwnote { position:absolute; width:13%; height:26px; border-radius:6px; transform:translateX(-50%);
  box-shadow:0 0 18px 1px rgba(var(--glow),0.0); }
.bc-strike { position:absolute; left:8%; right:8%; height:3px; border-radius:3px; bottom:18%;
  background:var(--accent); box-shadow:0 0 22px 2px rgba(var(--glow),0.7); }

/* ---------- hero game frame glow ---------- */
.bc-gameglow { position:relative; }
.bc-gameglow::before { content:''; position:absolute; inset:-8% -4% 12%;
  background:radial-gradient(60% 60% at 50% 30%, rgba(var(--glow),0.4), transparent 70%);
  filter:blur(50px); z-index:0; }
.bc-gameglow > * { position:relative; z-index:1; }

/* ---------- decorative string ruler (Direction C) ---------- */
.bc-strings-deco { display:flex; flex-direction:column; gap:14px; }
.bc-strings-deco i { display:block; height:2px; border-radius:2px; }

/* ---------- advertising ---------- */
.bc-ad-eyebrow {
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--text-3);
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.bc-ad-eyebrow::after { content:''; flex:1; height:1px; background:var(--border); }

/* landing billboard */
.bc-ad {
  position:relative; display:flex; align-items:center; gap:28px;
  padding:26px 30px; border-radius:18px; overflow:hidden;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(var(--glow),0.10), transparent 55%),
    var(--surface);
  border:1px solid rgba(var(--glow),0.26);
  box-shadow:0 0 0 1px rgba(255,255,255,0.02), 0 24px 60px -34px rgba(var(--glow),0.6);
}
.bc-ad-logo {
  width:104px; height:104px; flex:0 0 auto; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.04); border:1px dashed var(--border-strong);
  color:var(--text-3);
}
.bc-ad-body { flex:1; min-width:0; }
.bc-ad-body h3 { font-family:'Space Grotesk',sans-serif; font-size:25px; font-weight:600; letter-spacing:-0.02em; margin:0 0 7px; color:var(--text); }
.bc-ad-body p { margin:0; color:var(--text-2); font-size:15.5px; line-height:1.5; max-width:560px; }
.bc-ad-tag {
  position:absolute; top:13px; right:14px;
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:0.16em;
  padding:3px 8px; border-radius:6px; background:rgba(255,255,255,0.06);
  color:var(--text-3); border:1px solid var(--border);
}

/* in-game dismissible sponsor strip */
.bc-adstrip {
  display:flex; align-items:center; gap:13px; padding:8px 14px;
  background:linear-gradient(90deg, rgba(var(--glow),0.12), rgba(var(--glow),0.03));
  border-bottom:1px solid rgba(var(--glow),0.22);
}
.bc-adstrip .badge {
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:0.14em;
  padding:3px 7px; border-radius:5px; color:var(--accent-ink); background:var(--accent);
}
.bc-adstrip .ad-logo {
  width:26px; height:26px; border-radius:7px; flex:0 0 auto;
  background:rgba(255,255,255,0.08); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-3);
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
}
.bc-adstrip .copy { font-size:13px; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-adstrip .copy b { color:var(--accent); font-weight:700; }
.bc-adstrip .right { margin-left:auto; display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.bc-adstrip .pro { font-size:12.5px; color:var(--text-2); text-decoration:none; white-space:nowrap; }
.bc-adstrip .pro:hover { color:var(--text); }
.bc-ad-close {
  width:22px; height:22px; border-radius:6px; border:none; cursor:pointer;
  background:rgba(255,255,255,0.06); color:var(--text-2);
  display:flex; align-items:center; justify-content:center; transition:background .12s,color .12s;
}
.bc-ad-close:hover { background:rgba(255,255,255,0.14); color:var(--text); }


/* ============================================================
   GAME INTEGRATION — adapts the design system to the real
   canvas game (rocksmith.html). New classes are namespaced
   bc-* / bcg-* so they live alongside the verbatim block above.
   ============================================================ */

/* fullscreen game shell: dark canvas behind a fixed top bar */
html.bc-game, body.bc-game { height:100%; margin:0; overflow:hidden; background:var(--bg); }
body.bc-game { font-family:'Hanken Grotesk', system-ui, sans-serif; color:var(--text); }

/* the in-game top bar = the design's bc-toolbar, pinned on top of the canvas */
.bcg-bar {
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; gap:14px;
  padding:10px 18px;
  background:rgba(14,15,20,0.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.bcg-bar-spacer { flex:1; }
.bcg-bar-actions { display:flex; align-items:center; gap:10px; }

/* brand lockup (logo + dynamic song/title) */
.bcg-brand { display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; text-decoration:none; cursor:pointer; }
.bcg-brand .title {
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:15px;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw;
}
.bcg-brand .title .sub { color:var(--text-3); font-weight:500; }
.bcg-wordmark { font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:19px; letter-spacing:-0.02em; color:var(--text); }
.bcg-wordmark b { color:var(--accent); font-weight:700; }

/* native controls restyled to the design language */
.bc-select {
  appearance:none; -webkit-appearance:none;
  font-family:'Hanken Grotesk', sans-serif; font-size:13.5px; font-weight:600;
  color:var(--text); background:rgba(255,255,255,0.05);
  border:1px solid var(--border-strong); border-radius:9px;
  padding:9px 30px 9px 13px; cursor:pointer; max-width:240px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a4a9b6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center;
}
.bc-select:hover { border-color:rgba(255,255,255,0.28); }
.bc-select:disabled, .bc-tbtn:disabled { opacity:0.45; cursor:not-allowed; }

/* file upload styled like a ghost toolbar button */
.bc-tbtn input[type=file] { display:none; }

/* anticipation slider */
.bcg-range { display:inline-flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-2); white-space:nowrap; }
.bcg-range input[type=range] { width:108px; accent-color:var(--accent); }

/* live "ACTIVO" indicator */
.bcg-live { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-3); white-space:nowrap; }
.bcg-live .dot { width:10px; height:10px; border-radius:50%; background:var(--surface-3); transition:background .12s, box-shadow .12s; }
.bcg-live.on { color:var(--text-2); }
.bcg-live.on .dot { background:#2bbf4f; box-shadow:0 0 10px #2bbf4f; }
.bcg-live b { color:var(--text); font-family:'Space Mono', monospace; font-size:12px; }
/* detected-note readout: fixed BELOW the bar so its (variable) width never shifts the toolbar */
.bcg-livenote { white-space:nowrap; text-align:right;
  font-family:'Space Mono', monospace; font-size:13px; color:var(--text-2);
  background:rgba(20,22,31,0.72); border:1px solid var(--border); border-radius:8px; padding:5px 10px; }
.bcg-livenote:empty { display:none; }

/* tuner (inside the Adjust-guitar panel) */
.bcg-tuner { display:flex; flex-direction:column; align-items:center; gap:9px; padding:4px 0 2px; }
.bcg-tuner-note { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:34px; line-height:1; color:var(--text-2); transition:color .1s; }
.bcg-tuner-note.ok { color:var(--s-g); }
.bcg-tuner-scale { position:relative; width:210px; height:10px; border-radius:5px; background:rgba(255,255,255,0.07); }
.bcg-tuner-scale .mark { position:absolute; left:50%; top:-4px; width:2px; height:18px; background:var(--text-3); transform:translateX(-50%); }
.bcg-tuner-scale i { position:absolute; left:50%; top:-3px; width:6px; height:16px; border-radius:3px; background:var(--accent); transform:translateX(-50%); transition:left .08s ease, background .1s; }
.bcg-tuner-scale i.ok { background:var(--s-g); box-shadow:0 0 12px var(--s-g); }
.bcg-tuner-cents { font-family:'Space Mono',monospace; font-size:12px; color:var(--text-3); }

/* popover panels dropped from the Adjust-guitar / Load-song buttons */
.bcg-pop-wrap { position:relative; }
.bcg-pop {
  position:absolute; top:calc(100% + 10px); right:0; z-index:20;
  min-width:280px; display:none; flex-direction:column; gap:14px;
  padding:18px; border-radius:16px;
  background:var(--surface); border:1px solid var(--border-strong);
  box-shadow:0 24px 70px -24px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.03);
}
.bcg-pop.open { display:flex; }
.bcg-pop .row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bcg-pop .lbl {
  font-family:'Space Mono', monospace; font-size:11px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3);
}
.bcg-pop hr { border:none; border-top:1px solid var(--border); margin:2px 0; }
.bcg-caret { transition:transform .15s; }
.bcg-pop-wrap.open .bcg-caret { transform:rotate(180deg); }

/* status line, restyled */
.bcg-status {
  position:fixed; bottom:12px; left:18px; right:18px; z-index:9;
  font-size:12.5px; color:var(--text-3); pointer-events:none;
  font-family:'Hanken Grotesk', sans-serif;
}

/* loading progress = a thin accent line along the bottom edge of the bar (never overlaps the brand/controls) */
.bcg-bar #prog { position:absolute; left:0; bottom:0; width:100%; height:3px; border:none;
  background:transparent; -webkit-appearance:none; appearance:none; }
.bcg-bar #prog::-webkit-progress-bar { background:transparent; }
.bcg-bar #prog::-webkit-progress-value { background:var(--accent); }
.bcg-bar #prog::-moz-progress-bar { background:var(--accent); }

/* prominent progress toast (esp. while a .zip uploads + transcribes on the server) */
.bcg-loader { position:fixed; left:50%; top:74px; transform:translateX(-50%); z-index:40; display:none;
  min-width:340px; max-width:min(560px,90vw); padding:15px 18px; border-radius:14px;
  background:rgba(20,22,31,0.94); backdrop-filter:blur(10px); border:1px solid var(--border-strong);
  box-shadow:0 22px 60px -24px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.03); }
.bcg-loader.open { display:block; animation:bcg-fade .2s ease; }
.bcg-loader-row { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.bcg-loader-spin { width:16px; height:16px; flex:0 0 auto; border-radius:50%;
  border:2px solid rgba(255,255,255,0.16); border-top-color:var(--accent); animation:bcg-spin .8s linear infinite; }
@keyframes bcg-spin { to { transform:rotate(360deg); } }
.bcg-loader-msg { font-family:'Hanken Grotesk',sans-serif; font-size:13.5px; font-weight:500; color:var(--text); }
.bcg-loader-bar { height:6px; border-radius:4px; background:rgba(255,255,255,0.08); overflow:hidden; position:relative; }
.bcg-loader-bar i { display:block; height:100%; width:0; border-radius:4px; transition:width .2s ease;
  background:linear-gradient(90deg, var(--accent-2), var(--accent)); }
.bcg-loader-bar.indet i { position:absolute; width:38%; transition:none; animation:bcg-slide 1.15s ease-in-out infinite; }
@keyframes bcg-slide { 0% { left:-38%; } 100% { left:100%; } }

/* transport cluster: stop · play/pause · speed slider */
.bcg-transport { display:flex; align-items:center; gap:8px; padding-left:6px; }
.bcg-transport #stop { padding:10px 11px; }
.bcg-transport #play { min-width:104px; justify-content:center; }   /* fixed width: Play ⇄ Pausa never reflows the cluster */
.bcg-speed { display:inline-flex; align-items:center; gap:8px; padding:0 4px 0 8px; }
.bcg-speed input[type=range] { width:92px; accent-color:var(--accent); cursor:pointer; }
.bcg-speed input[type=range]:disabled { opacity:0.45; cursor:not-allowed; }
.bcg-speed b { font-family:'Space Mono', monospace; font-size:12.5px; font-weight:700; color:var(--text-2); min-width:46px; }

/* ---------- Guitar-Hero scoring HUD ---------- */
/* right column: score HUD on top, detected-note readout below it — hidden until a song is loaded */
.bcg-rightcol { position:fixed; top:72px; right:18px; z-index:9; display:none; flex-direction:column; align-items:flex-end; gap:10px; pointer-events:none; }
.bcg-rightcol.on { display:flex; }
.bcg-hud {
  display:flex; flex-direction:column; gap:11px;
  padding:14px 18px; border-radius:16px;
  background:rgba(20,22,31,0.82); backdrop-filter:blur(10px);
  border:1px solid var(--border-strong);
  box-shadow:0 18px 50px -22px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.02);
  user-select:none;
}
.bcg-hud-song { display:flex; align-items:center; gap:10px; }
.bcg-hud-art { width:34px; height:34px; flex:0 0 auto; border-radius:7px; object-fit:cover; border:1px solid var(--border); background:var(--surface-2); }
.bcg-hud-songtxt { min-width:0; }
.bcg-hud-songtxt .t { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; color:var(--text); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; }
.bcg-hud-songtxt .a { font-size:11.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; }
.bcg-hud-row { display:flex; align-items:center; gap:15px; }
.bcg-hud-mult {
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:34px;
  letter-spacing:-0.02em; line-height:1; min-width:64px; text-align:center;
  color:var(--text-3); transition:color .15s, transform .15s, text-shadow .15s;
}
.bcg-hud-mult[data-m="2"] { color:var(--s-a); }
.bcg-hud-mult[data-m="3"] { color:var(--s-g); }
.bcg-hud-mult[data-m="4"] { color:var(--accent); text-shadow:0 0 20px rgba(var(--glow),0.75); transform:scale(1.06); }
.bcg-hud-info { min-width:158px; }
.bcg-hud-score { font-family:'Space Mono', monospace; font-weight:700; font-size:27px; color:var(--text); line-height:1; }
.bcg-hud-meta { display:flex; gap:7px; align-items:center; margin-top:6px;
  font-family:'Space Mono', monospace; font-size:12px; color:var(--text-3); }
.bcg-hud-meta .sep { opacity:0.5; }
.bcg-hud-bar { height:5px; border-radius:3px; margin-top:9px; overflow:hidden; background:rgba(255,255,255,0.08); }
.bcg-hud-bar i { display:block; height:100%; width:0%; border-radius:3px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent)); transition:width .18s ease-out; }

/* ---------- end-of-song results overlay ---------- */
.bcg-results { position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
  background:rgba(6,8,13,0.72); backdrop-filter:blur(8px); }
.bcg-results.open { display:flex; animation:bcg-fade .25s ease; }
@keyframes bcg-fade { from{opacity:0} to{opacity:1} }
.bcg-results-card { width:min(540px,92vw); background:var(--surface); border:1px solid var(--border-strong);
  border-radius:22px; padding:30px; box-shadow:0 40px 120px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.03);
  animation:bcg-pop .3s cubic-bezier(.2,.9,.3,1.2); }
@keyframes bcg-pop { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
.bcg-results-head { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.bcg-results-art { width:72px; height:72px; border-radius:12px; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--border); background:var(--surface-2); }
.bcg-results-eyebrow { font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.bcg-results-song { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:22px; color:var(--text); margin-top:4px; }
.bcg-results-artist { font-size:14px; color:var(--text-2); margin-top:2px; }
.bcg-results-body { display:flex; align-items:center; gap:28px; }
.bcg-results-grade { font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:96px; line-height:1;
  flex:0 0 auto; width:130px; text-align:center; }
.bcg-results-grade[data-g="s"] { color:var(--accent); text-shadow:0 0 30px rgba(var(--glow),.8); }
.bcg-results-grade[data-g="a"] { color:var(--s-g); }
.bcg-results-grade[data-g="b"] { color:var(--s-b); }
.bcg-results-grade[data-g="c"] { color:var(--s-d); }
.bcg-results-grade[data-g="d"] { color:#ef4444; }
.bcg-results-stats { flex:1; min-width:0; }
.bcg-results-score { display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
.bcg-results-score b { font-family:'Space Mono',monospace; font-size:34px; font-weight:700; color:var(--text); }
.bcg-results .lbl { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.bcg-results-bar { height:7px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:16px; }
.bcg-results-bar i { display:block; height:100%; width:0; border-radius:4px; transition:width .6s ease; background:var(--accent); }
.bcg-results-bar i[data-g="s"] { background:linear-gradient(90deg,var(--accent-2),var(--accent)); }
.bcg-results-bar i[data-g="a"] { background:var(--s-g); }
.bcg-results-bar i[data-g="b"] { background:var(--s-b); }
.bcg-results-bar i[data-g="c"] { background:var(--s-d); }
.bcg-results-bar i[data-g="d"] { background:#ef4444; }
.bcg-results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bcg-results-grid > div { display:flex; flex-direction:column; gap:3px; }
.bcg-results-grid b { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; color:var(--text); }
.bcg-results-actions { display:flex; gap:10px; margin-top:26px; }
.bcg-results-actions .bc-tbtn { flex:1; justify-content:center; }