/* 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; }
}

/* -------------------------------------------- decks, made usable (8/5 pass) */
.br-load { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:var(--s3); }
.br-wave { position:relative; height:64px; border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); overflow:hidden; cursor:pointer; margin:var(--s3) 0; touch-action:none; }
.br-wave canvas { display:block; width:100%; height:64px; }
.br-head { position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--red);
  pointer-events:none; box-shadow:0 0 0 1px rgba(255,255,255,.35); }
.br-time { position:absolute; right:6px; bottom:4px; font-family:var(--font-mono); font-size:.66rem;
  color:var(--text-3); background:color-mix(in srgb, var(--surface) 80%, transparent); padding:0 .3em;
  border-radius:3px; pointer-events:none; }
.br-main { align-items:center; }
.br-bigplay { min-width:110px; }
.br-nudge { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin:var(--s3) 0; }
.br-lab { font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); margin-right:.2rem; }
.br-platter-wrap { flex-direction:column; gap:.4rem; }
.br-platter { width:150px; height:150px; }
.br-platter-hint { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.br-deckbar { display:flex; gap:var(--s4); align-items:flex-end; flex-wrap:wrap; margin-top:var(--s5);
  padding-top:var(--s4); border-top:1px solid var(--line); }
.br-deckbar .br-xf { flex:1; min-width:200px; }
.br-deckbar .br-xf input[type=range] { width:100%; }
.br-deck-row .on, .br-nudge .on { background:var(--gold); border-color:var(--gold-deep); color:#21190A; }

/* ---------------------------------------------------- play it: keys & pads */
.ins-bar { display:flex; gap:var(--s4); flex-wrap:wrap; align-items:center; margin-bottom:var(--s4); }
.ins-oct { display:inline-flex; align-items:center; gap:.35rem; }
.ins-oct b { min-width:20px; text-align:center; font-family:var(--font-mono); }

.ins-kb { position:relative; height:132px; user-select:none; touch-action:none;
  border:1px solid var(--line-strong); border-radius:var(--r); overflow:hidden;
  background:var(--surface); }
.ins-key { position:absolute; top:0; bottom:0; border:0; border-right:1px solid var(--line);
  background:linear-gradient(180deg, #fff 0%, #eef1f6 100%); cursor:pointer; padding:0;
  display:flex; align-items:flex-end; justify-content:center; }
.ins-key span { font-size:.6rem; color:#5A6172; padding-bottom:.45rem; font-family:var(--font-mono);
  display:flex; flex-direction:column; align-items:center; gap:.15rem; pointer-events:none; }
.ins-key span i { font-style:normal; font-size:.54rem; color:#93A9D6; }
.ins-key.black { bottom:38%; z-index:2; border:0; border-radius:0 0 3px 3px;
  background:linear-gradient(180deg, #2a2f3c 0%, #0c0e14 100%);
  box-shadow:0 3px 7px rgba(0,0,0,.4); }
.ins-key.black span { color:#C7D3EA; }
.ins-key.black span i { color:#8B92A3; }
.ins-key.down { background:var(--gold-grad); }
.ins-key.black.down { background:linear-gradient(180deg,#c9a227,#8A6A15); }

.ins-pads { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; max-width:620px; }
.ins-pad { height:74px; border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.2rem; padding:.3rem; }
.ins-pad b { font-size:.66rem; font-weight:600; letter-spacing:.06em; color:var(--text-2);
  text-align:center; line-height:1.15; }
.ins-pad i { font-style:normal; font-family:var(--font-mono); font-size:.6rem; color:var(--text-3); }
.ins-pad:hover { border-color:var(--gold); }
.ins-pad.down { background:var(--gold-grad); border-color:var(--gold-deep); }
.ins-pad.down b, .ins-pad.down i { color:#21190A; }
@media (max-width:560px){ .ins-kb { height:104px; } .ins-pad b { font-size:.58rem; } }

/* ===================== 8/6: bigger, brighter, more of it ===================== */

/* generate a beat, where you cannot miss it */
.br-make { display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap;
  padding:var(--s4); margin-bottom:var(--s4); border-radius:var(--r);
  background:var(--gold-wash); border:1px solid var(--gold); }
.br-make .br-big { font-size:.9rem; padding:.9em 1.8em; }
.br-make .st-hint { margin:0; flex:1; min-width:220px; }

/* a step that is accented reads louder */
.br-step.accent { background:var(--gold); border-color:var(--gold-deep); color:#21190A; }
.br-step.accent::after { content:"▲"; font-size:.5rem; display:block; margin-top:-2px; }
.br-step.now { box-shadow:0 0 0 2px var(--red) inset; }
.br-step.on.now { background:var(--red); border-color:var(--red); color:#fff; }

/* pads: four rows of eight, all the way across, and they light up */
.ins-pads { display:grid; grid-template-columns:repeat(8,1fr); gap:.45rem; max-width:none; }
.ins-pad { height:66px; border-radius:var(--r); cursor:pointer; padding:.3rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:0 2px 0 var(--line-strong);
  transition:transform 60ms ease, background 90ms ease, box-shadow 90ms ease; }
.ins-pad b { font-size:.58rem; font-weight:600; letter-spacing:.03em; color:var(--text-2);
  text-align:center; line-height:1.1; }
.ins-pad i { font-style:normal; font-family:var(--font-mono); font-size:.54rem; color:var(--text-3); }
.ins-pad:hover { border-color:var(--gold); }
.ins-pad.down { background:var(--gold-grad); border-color:var(--gold-deep);
  transform:translateY(2px); box-shadow:0 0 0 var(--line-strong); }
.ins-pad.hit { background:var(--gold-grad); border-color:var(--gold-deep);
  transform:translateY(2px); box-shadow:0 0 0 2px var(--red), 0 0 14px rgba(201,162,39,.7); }
.ins-pad.down b, .ins-pad.down i, .ins-pad.hit b, .ins-pad.hit i { color:#21190A; }
.ins-kb.lit { box-shadow:inset 0 0 0 2px var(--gold); }

/* decks you can actually grab */
.br-card--decks .br-decks { grid-template-columns:1fr; gap:var(--s6); }
@media (min-width:1000px){ .br-card--decks .br-decks { grid-template-columns:1fr 1fr; } }
.br-card--decks .br-platter { width:min(320px, 68vw); height:min(320px, 68vw); }
.br-card--decks .br-label { width:110px; height:110px; }
.br-card--decks .br-wave { height:84px; }
.br-card--decks .br-wave canvas { height:84px; }
.br-card--decks .br-bigplay { min-width:130px; font-size:.78rem; padding:.9em 1.4em; }
.br-card--decks .br-platter-hint { font-size:.66rem; letter-spacing:.16em; }

@media (max-width:820px){ .ins-pads { grid-template-columns:repeat(4,1fr); } }