/* beatbattle — game cartridge styles. Carved from public/index.html (Stage 1 monolith split).
   Loads after platform.css; selectors are game-prefixed. */
  #bb-bank-screen, #bb-build-screen, #bb-showcase-screen, #bb-round-screen { font-family:system-ui,sans-serif; }
  #bb-bank-screen button, #bb-build-screen button, #bb-showcase-screen button, #bb-round-screen button { flex-grow:0; flex-shrink:0; }
  .bb-timer { font-size:1.5em; font-weight:900; }
  .bb-topbar { width:100%; max-width:440px; display:flex; justify-content:space-between; align-items:center; }
  .bb-progress { display:flex; gap:8px; }
  .bb-dot { width:11px; height:11px; border-radius:50%; background:var(--c-border); }
  .bb-dot.cur { background:var(--c-brand); } .bb-dot.done { background:#4caf50; }
  .bb-card { max-width:440px; text-align:center; background:#111827; border:2px solid var(--c-border); border-radius:16px; padding:26px 22px; }
  .bb-card-sub { font-size:0.62em; color:#5d6d8c; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
  .bb-card-main { font-size:1.2em; font-weight:800; line-height:1.4; }
  .bb-rec-btn { padding:18px 34px; border-radius:16px; border:2px solid #ff5252; background:#111827; color:#ff5252; font-weight:800; font-size:1em; cursor:pointer; }
  .bb-rec-btn.recording { background:rgba(255,82,82,.16); }
  .bb-rec-row { display:flex; gap:10px; }
  .bb-mini { padding:12px 16px; border-radius:11px; border:2px solid var(--c-border); background:#111827; color:#dfe7ff; font-weight:700; font-size:0.82em; cursor:pointer; }
  .bb-mini.go { border-color:#4caf50; color:#4caf50; }
  .bb-frame { max-width:440px; width:100%; text-align:center; background:linear-gradient(135deg,#1a1330,#111827); border:2px solid #6a4bff; border-radius:14px; padding:14px 18px; box-sizing:border-box; }
  .bb-sec-lbl { width:100%; max-width:440px; font-size:0.6em; letter-spacing:1.5px; text-transform:uppercase; color:#5d6d8c; }
  .bb-slots { display:flex; gap:10px; width:100%; max-width:440px; }
  .bb-slot { flex:1; min-height:70px; border-radius:12px; border:2px dashed #3a4568; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px; position:relative; box-sizing:border-box; }
  .bb-slot.filled { border-style:solid; border-color:var(--c-brand); background:rgba(255,235,59,.07); }
  .bb-slot-x { position:absolute; top:4px; right:8px; color:#7a9abf; cursor:pointer; font-size:0.9em; }
  .bb-slot-idx { font-size:0.55em; color:#5d6d8c; letter-spacing:1px; }
  .bb-slot-who { font-size:0.58em; color:#7a9abf; margin-top:3px; }
  .bb-slot-cap { font-size:0.78em; font-weight:800; text-align:center; margin-bottom:6px; }
  .bb-slot-empty { font-size:0.7em; color:#48557a; }
  .bb-pitch { width:100%; display:flex; flex-direction:column; align-items:center; gap:2px; }
  .bb-pitch input[type=range] { width:100%; accent-color:#ff9800; }
  .bb-pitch-desc { font-size:0.62em; font-weight:800; color:#ff9800; }
  .bb-hand { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:100%; max-width:440px; }
  .bb-clip { min-width:104px; padding:10px 12px; border-radius:11px; border:2px solid var(--c-border); background:#111827; cursor:pointer; text-align:center; }
  .bb-clip.used { opacity:.35; }
  .bb-clip.connector { border-color:#9d86ff; background:#171430; }
  .bb-glue { font-size:0.82em; color:#b9a9ff; font-weight:800; }
  .bb-clip-who { font-size:0.58em; color:#7a9abf; }
  .bb-clip-cap { font-size:0.8em; font-weight:800; margin-top:2px; }
  .bb-clip-play { font-size:0.55em; color:#5d6d8c; margin-top:3px; }
  .bb-action { padding:15px 22px; border-radius:13px; border:2px solid var(--c-border); background:#111827; color:#dfe7ff; font-weight:800; font-size:0.9em; cursor:pointer; }
  .bb-action.go { border-color:#4caf50; color:#4caf50; }
  .bb-versus { width:100%; max-width:440px; display:flex; align-items:center; gap:10px; }
  .bb-entry { flex:1; background:#111827; border:2px solid var(--c-border); border-radius:14px; padding:16px 12px; display:flex; flex-direction:column; align-items:center; gap:10px; }
  .bb-entry-name { font-weight:900; font-size:0.95em; }
  .bb-hear { width:100%; padding:12px 0; border-radius:10px; border:2px solid #ff9800; background:rgba(255,152,0,.1); color:#ff9800; font-weight:900; font-size:0.82em; cursor:pointer; }
  .bb-hear:disabled { opacity:.55; cursor:default; }
  .bb-vs { font-weight:900; color:#5d6d8c; font-size:0.8em; }
  /* id-level specificity so this beats the `#bb-showcase-screen button{flex-grow:0;flex-shrink:0}` reset above; min-width:0 lets long "Vote {name}" labels shrink instead of overflowing the row */
  #bb-showcase-screen .bb-vote { flex:1 1 0; min-width:0; padding:14px 8px; border-radius:11px; border:none; background:#9c27b0; color:#fff; font-weight:900; font-size:0.8em; line-height:1.15; cursor:pointer; overflow:hidden; text-overflow:ellipsis; }
  .bb-standing { display:flex; justify-content:space-between; background:#111827; border:1.5px solid var(--c-border); border-radius:10px; padding:10px 14px; font-weight:700; font-size:0.85em; }