/* =========================================================================
   EMPIRIUM OS — MOBILE: BINAURAL BEATS
   New rules only — everything reusable (.card, .btn, .btn-primary, .chip,
   .section-head, .scale-input) already lives in app.css.
   ========================================================================= */

.bin-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:14px;
}
.bin-card{
  position:relative; text-align:left;
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:12px;
  cursor:pointer; overflow:hidden;
}
.bin-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--bin-c),var(--bin-c2));
  opacity:.55;
}
.bin-card.is-active{
  border-color:var(--bin-c);
  box-shadow:0 0 0 1px var(--bin-c), 0 10px 24px rgba(0,0,0,.35);
}
.bin-card.is-active::before{ opacity:1; }
.bin-card h3{
  margin:8px 0 4px; font-family:var(--font-display);
  font-size:14.5px; font-weight:600; line-height:1.3;
}
.bin-card p{
  margin:0 0 8px; font-size:12px; color:var(--muted); line-height:1.4;
}
.bin-band{
  display:block; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.4px; color:var(--faint);
}
.bin-ev{
  display:inline-block; padding:2px 7px; border-radius:var(--r-sm);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.6px;
  text-transform:uppercase;
  background:var(--card-subtle); border:1px solid var(--line-soft); color:var(--muted);
}
.bin-ev.ev-strong{ color:var(--good); border-color:rgba(var(--good-rgb),.32); }
.bin-ev.ev-moderate{ color:var(--accent); border-color:rgba(var(--accent-rgb),.3); }
.bin-ev.ev-weak,.bin-ev.ev-mixed{ color:var(--warn); border-color:rgba(var(--warn-rgb),.32); }

/* ---------------- player card ---------------- */
.bin-player{ text-align:center; }

.bin-orb{
  position:relative; width:120px; height:120px; margin:6px auto 16px;
  display:flex; align-items:center; justify-content:center;
}
.bin-orb-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--bin-c); opacity:.3;
}
.bin-orb-core{
  width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%,var(--bin-c2),var(--bin-c));
  box-shadow:0 0 24px rgba(0,0,0,.4);
  transition:transform .3s ease;
}
.bin-orb.is-live .bin-orb-core{
  animation:bin-pulse 2.2s ease-in-out infinite;
}
.bin-orb.is-live .bin-orb-ring{
  animation:bin-ring 2.2s ease-in-out infinite;
}
@keyframes bin-pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.12); }
}
@keyframes bin-ring{
  0%{ transform:scale(1); opacity:.5; }
  100%{ transform:scale(1.5); opacity:0; }
}

.bin-freqs{
  display:flex; justify-content:center; gap:22px; margin-bottom:16px;
}
.bin-freq{ display:flex; flex-direction:column; align-items:center; }
.bin-freq span{
  font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--text);
}
.bin-freq em{
  margin-top:2px; font-style:normal; font-size:10px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--faint);
}
.bin-freq-beat span{ color:var(--bin-c); }

.bin-play{ margin-bottom:16px; }

.bin-timer{ margin-bottom:16px; }
.bin-timer-label{
  display:block; margin-bottom:8px;
  font-family:var(--font-mono); font-size:13px; color:var(--muted);
}
.bin-timer-chips{
  display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
}

.bin-vol{ text-align:left; }
.bin-vol label{
  display:block; margin-bottom:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--muted);
}

.bin-note{
  margin:12px 2px 0; font-size:12px; line-height:1.5; color:var(--faint);
  text-align:center;
}

@media (prefers-reduced-motion:reduce){
  .bin-orb.is-live .bin-orb-core, .bin-orb.is-live .bin-orb-ring{ animation:none; }
}