/* ═══════════════════════════════════════════
   TapaBoom — Responsive / Mobile
   Mobile-first: 2 columns, edge-to-edge
   ═══════════════════════════════════════════ */

/* ─── Tablet (≤768px) ─── */
@media(max-width:768px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:14px 14px 160px}
  .kb-hints{display:none}
}

/* ─── Phone (≤640px) — основной мобильный ─── */
@media(max-width:640px){
  /* Header compact */
  .header{padding:0 10px}
  .header-top{height:46px;gap:6px}
  .logo{font-size:17px;gap:6px}
  .logo-btn{width:30px;height:30px}
  .search input{font-size:13px;height:36px;border-radius:10px;padding:0 12px 0 32px}
  .search .ico{left:10px;font-size:12px}

  /* Filters compact */
  .filter-bar{padding:6px 10px;gap:4px}
  .filter-tag{height:28px;padding:0 12px;font-size:11px}

  /* Toolbar: горизонтальный скролл вместо переноса */
  .toolbar{padding:4px 10px;font-size:10px;gap:6px;flex-wrap:nowrap;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
  .toolbar::-webkit-scrollbar{display:none}
  .toolbar .count{margin-right:0;flex-shrink:0}

  /* Grid: 2 columns, minmax(0,1fr) убирает content-based sizing */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 8px 140px}

  /* Cards: tight but readable */
  .sound-btn{padding:8px 5px 5px;border-radius:12px}
  a.btn-label{font-size:11px}
  .btn-bottom{padding:1px 2px 0}
  .btn-views{font-size:9px}
  .btn-like{width:28px;height:28px;font-size:14px;border-radius:6px}

  /* Skeleton matches card */
  .skeleton{padding:8px 5px 5px;border-radius:12px}
  .skel-label{height:10px}
  .skel-heart{width:28px;height:28px;border-radius:6px}
  .skel-views{width:28px;height:9px}

  /* Player compact */
  .player-bottom{padding:8px 12px 12px;gap:8px}
  .player .p-thumb{width:42px;height:42px;border-radius:10px}
  .player .p-btn{width:40px;height:40px;font-size:20px}
  .player .p-name{font-size:13px}
  .player .p-info{max-width:140px}
  .vol-wrap{display:none}
  .kb-hints{display:none}
  .random-btn{width:32px;height:32px;font-size:15px}
}

/* ─── Small phone (≤400px) ─── */
@media(max-width:400px){
  .grid{gap:6px;padding:6px 6px 140px}
  .sound-btn{padding:6px 4px 4px}
  a.btn-label{font-size:10px}
  .header-top{gap:4px}
  .logo{font-size:15px;gap:4px}
  .logo-btn{width:26px;height:26px}
  .search input{height:32px;font-size:12px}
  .player .p-info{max-width:100px}
  .player .p-time{display:none}
}

/* ─── Ultra-narrow (≤320px) — Galaxy Fold etc ─── */
@media(max-width:320px){
  .grid{grid-template-columns:1fr}
  .sound-btn .wrap{width:60%}
}