/* Mobile fixes */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw;
  }
  .wrap {
    padding: 1.5rem 4vw !important; /* Adjust padding so it doesn't overflow */
  }
  
  /* Header items wrap and center */
  .nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  
  /* Smaller buttons and fonts on mobile */
  .logo span { font-size: 1.2rem; }
  .btn { padding: 8px 12px; font-size: 0.85rem; }
  
  /* Menu logic */
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(10,10,10,0.95); backdrop-filter: blur(20px); flex-direction: column; padding: 1rem; border-bottom: 1px solid var(--line); }
  .menu.open { display: flex; }
  .menu a { padding: 10px; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
  #mb { display: block; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; }
  
  /* Hero and Search */
  .sf { display: none; }
  .hero { padding: 4rem 1.5rem; text-align: center; align-items: center; }
  
  /* Bottom Navigation */
  #tb {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(20px);
    border-top: 1px solid var(--line); z-index: 1000;
    justify-content: space-around; padding: 10px 5px;
    padding-bottom: env(safe-area-inset-bottom, 10px);
  }
  #tb a {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 0.7rem; color: var(--mut); font-weight: 600;
  }
  #tb a span { font-size: 1.3rem; }
  #tb a.on { color: var(--gold); }
  
  /* Grid and Body */
  body { padding-bottom: 70px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .card h3 { font-size: 0.9rem; padding: 8px 8px 4px; }
  .card p { font-size: 0.75rem; padding: 0 8px 8px; }
}

@media (min-width: 901px) {
  #mb { display: none; }
  #tb { display: none; }
}

@media (min-width: 1400px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}