/* ====== Base ====== */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

:root{
  --bg:#212121;
  --panel:#0f0f0f;
  --text:#f5f5f5;
  --muted:#9aa3af;
  --accent:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ====== Full-screen layout ====== */
.screen{
  position:fixed; inset:0; /* full window */
  display:flex; flex-direction:column;
  background:#111;
}

/* Top image fills ~55% height, responsive */
.coverImage{
  flex:0 0 55vh;
  background:url('/assets/img/OSTMSharpLogoWhiteBG.png') center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Bottom panel fills the rest */
.bodyPlayer{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  background:#111; /* keep your original dark */
  padding:1.25rem;
}

/* Title / status */
.info{ text-align:center }
.info h4{ margin:0; font-size:1.25rem; font-weight:700 }
.info .muted{ color:var(--muted); margin-top:.25rem; letter-spacing:.08em }

.status{ color:var(--muted); font-size:.95rem; }

/* Controls */
.controls{
  display:flex; align-items:center; gap:1rem; margin-top:.25rem;
}
.btn-icon{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:#1a1a1a; border:1px solid #2a2a2a; color:#fff;
  cursor:pointer; transition:.15s transform ease, .15s opacity ease;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.btn-icon:hover{ transform:translateY(-1px) }
.btn-icon i{ font-size:26px }

/* Volume */
.vol{display:flex; align-items:center; gap:.6rem}
.vol input{
  width:min(44vw, 240px);
  accent-color:#fff;
}

/* Centered volume slider under play button */
.volume-wrap{
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.volume-wrap input{
  width: min(55vw, 260px);
  accent-color: #fff;
}

.vol-label{
  font-size: .85rem;
  color: var(--muted);
  letter-spacing: .06em;
}

/* Utility */
.muted{ color:var(--muted) }

/* Hide legacy bits from old design that we kept for CSS hooks */
#magicButton, .main, .list, .current { display:none }