/* Final responsive overrides loaded after all other CSS */

/* ── MINI PLAYER buttons: correct sizes across breakpoints ── */
@media(max-width:768px){
  .mini-btn,.mini-ctrl .tlk{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
  }
  .mini-btn-play{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
  }
}

/* ── FULL PLAYER: better control row on mid mobile ── */
@media(max-width:768px) and (min-width:431px){
  .fp-con{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
  }
  .fp-step-btn{
    width:46px;
    height:46px;
    font-size:18px;
  }
  .fp-pp{
    width:56px;
    height:56px;
    font-size:21px;
  }
  .fp-stop{
    width:42px;
    height:42px;
  }
}

/* ── MINI PLAYER shell: narrow screens ── */
@media(max-width:430px){
  .mini-player{
    width:calc(100% - 16px);
    padding:8px 8px 6px;
    border-radius:16px;
  }
}

/* ── FULL PLAYER: tight control grid on small phones ── */
@media(max-width:430px){
  .fp-con{
    display:grid;
    grid-template-columns:44px 52px 44px 42px;
    gap:8px;
    justify-content:center;
    align-items:center;
  }
  .fp-step-btn{
    width:44px;
    height:44px;
    font-size:16px;
  }
  .fp-pp{
    width:52px;
    height:52px;
    font-size:19px;
  }
  .fp-stop{
    width:42px;
    height:42px;
  }
}

/* ── Very narrow (375px and below) ── */
@media(max-width:375px){
  .fp-con{
    grid-template-columns:40px 48px 40px 38px;
    gap:6px;
  }
  .fp-step-btn{width:40px;height:40px;font-size:15px}
  .fp-pp{width:48px;height:48px;font-size:17px}
  .fp-stop{width:38px;height:38px}
}

/* ── Tiny screens (359px and below): legacy override ── */
@media(max-width:359px){
  .mini-thumb{width:42px;height:42px}
  .mini-btn,.mini-ctrl .tlk,.mini-btn-play{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
  }
  .mini-ctrl{gap:4px}
  .fp-con{
    grid-template-columns:38px 44px 38px 36px;
    gap:5px;
  }
  .fp-step-btn{width:38px;height:38px;font-size:14px}
  .fp-pp{width:44px;height:44px;font-size:15px}
  .fp-stop{width:36px;height:36px}
}

/* ── 320px extreme minimum ── */
@media(max-width:320px){
  .fp-con{
    grid-template-columns:36px 42px 36px 34px;
    gap:4px;
  }
  .fp-step-btn{width:36px;height:36px;font-size:13px}
  .fp-pp{width:42px;height:42px;font-size:14px}
  .fp-stop{width:34px;height:34px}
}