/* The Beat Room — furniture only. Colour and type come from THE STANDARD. */

.br-card { margin:var(--s5) 0; }
.br-transport { display:flex; gap:var(--s4); flex-wrap:wrap; align-items:flex-end; }
.br-ctl { display:flex; flex-direction:column; gap:.3rem; min-width:120px; flex:0 0 auto; }
.br-ctl > span { font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); }
.br-ctl input[type=range] { width:140px; }
.br-slots { display:inline-flex; gap:.3rem; margin-left:auto; }
.br-slot { width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text-2); font-family:var(--font-display); font-weight:700;
  cursor:pointer; }
.br-slot.on { background:var(--navy); color:#fff; border-color:var(--navy); }

/* ------------------------------------------------------------------ grid */
.br-grid { display:flex; flex-direction:column; gap:.4rem; }
.br-lane { display:flex; gap:var(--s3); align-items:center; }
.br-lane-head { display:flex; gap:.3rem; align-items:center; flex:0 0 auto; width:330px; }
.br-inst { flex:1; min-width:110px; font-size:.78rem; padding:.35em .5em; }
.br-pen { display:inline-flex; align-items:center; gap:.15rem; }
.br-pen b { min-width:26px; text-align:center; font-family:var(--font-mono); font-size:.76rem;
  color:var(--gold-ink); }
.br-mini { width:26px; height:26px; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text-3); font-size:.68rem; font-weight:700; cursor:pointer;
  padding:0; line-height:1; }
.br-mini:hover { border-color:var(--gold); color:var(--gold-ink); }
.br-mini.on { background:var(--gold); border-color:var(--gold-deep); color:#21190A; }
.br-vol { width:56px; }

.br-steps { display:flex; gap:3px; flex:1; overflow-x:auto; padding-bottom:2px; }
.br-step { flex:1; min-width:26px; height:38px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface-2); cursor:pointer; padding:0;
  font-size:.6rem; font-weight:600; color:var(--text-3); font-family:var(--font-mono);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.br-step.beat { border-color:var(--line-strong); }
.br-step:hover { border-color:var(--gold); }
.br-step.on { background:var(--navy); border-color:var(--navy); color:var(--gold-bright); }
.br-step.now { box-shadow:0 0 0 2px var(--gold) inset; }
.br-step.on.now { background:var(--gold); color:#21190A; }

/* ----------------------------------------------------------------- decks */
.br-decks { display:grid; gap:var(--s5); grid-template-columns:1fr; }
@media (min-width:820px){ .br-decks { grid-template-columns:1fr 1fr; } }
.br-deck { border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4);
  background:var(--surface-2); }
.br-deck.loaded { border-color:var(--gold); }
.br-deck-top { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3);
  margin-bottom:var(--s3); }
.br-deck-top b { font-family:var(--font-display); letter-spacing:.06em; }
.br-deck-name { font-size:.72rem; color:var(--text-3); font-family:var(--font-mono);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
.br-platter-wrap { display:flex; justify-content:center; padding:var(--s3) 0; }
.br-platter { width:180px; height:180px; border-radius:50%; cursor:grab; touch-action:none;
  background:
    repeating-radial-gradient(circle at 50% 50%, #14161c 0 2px, #0d0f14 2px 4px);
  box-shadow:0 0 0 1px var(--line-strong), 0 10px 30px rgba(10,30,68,.25);
  display:grid; place-items:center; position:relative; }
.br-platter:active { cursor:grabbing; }
.br-platter::after { content:""; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(105deg, rgba(255,255,255,.08) 0 12%, transparent 22% 78%,
             rgba(255,255,255,.05) 88% 100%); }
.br-label { width:62px; height:62px; border-radius:50%;
  background:var(--gold-grad); border:2px solid #6b5210; position:relative; z-index:2; }
.br-label::after { content:""; position:absolute; inset:calc(50% - 4px); width:8px; height:8px;
  border-radius:50%; background:var(--bg); }
.br-posbar { height:5px; border-radius:3px; background:var(--line); overflow:hidden; margin:var(--s3) 0; }
.br-posbar i { display:block; height:100%; width:0; background:var(--gold); }
.br-deck-row { display:flex; gap:.4rem; flex-wrap:wrap; margin:var(--s3) 0; align-items:center; }
.br-file { cursor:pointer; }
.br-xf { width:100%; margin-top:var(--s4); }
.br-xf input[type=range] { width:100%; }
.br-bars { min-width:110px; }
.br-bars select { padding:.35em .5em; }

@media (max-width:760px){
  .br-lane { flex-direction:column; align-items:stretch; }
  .br-lane-head { width:auto; }
  .br-step { min-width:30px; }
}