c.stupid.cat/css/shared/responsive.css

/* ============================================================
   responsive.css — cross-page responsive overrides (mobile layout reflow, narrow-screen tweaks).
   ============================================================ */

/* ============================================================
   12. RESPONSIVE OVERRIDES
   ============================================================ */

/* Shrink to fit narrow / short screens so the hub never scrolls */
@media (max-width: 420px),
(max-height: 640px) {
  .hub-header {
    margin-bottom: 1.25rem;
  }

  .hub-header h1 {
    font-size: 1.6rem;
  }

  .pfp {
    width: 72px;
    height: 72px;
    margin-bottom: 0.5rem;
  }

  .links {
    grid-template-columns: repeat(auto-fit, 60px);
    gap: 0.6rem;
  }

  .link-card {
    width: 60px;
    height: 60px;
    border-radius: 13px;
  }

  .icon {
    width: 26px;
    height: 26px;
  }
}

/* Cat picker: 2 columns on very narrow screens */
@media (max-width: 420px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile layout — single vertical scroll, stacked widgets */
@media (max-width: 640px) {

  html {
    height: auto;
    /* Single vertical scroll root on mobile; clip horizontal overflow
       so the absolutely-positioned link tooltips can't pan the page. */
    overflow-x: hidden;
    overflow-y: auto;
  }

  body,
  body:has(.dev-info),
  body:has(.project-grid),
  body:has(.friend-grid) {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 1.25rem 1rem 2rem;
  }

  /* 1 — Top bar: the two single-item widgets, side by side */
  .topbar {
    order: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
  }

  /* FIX: the presence card injected by discord.js replaces #discord
     with .presence-card (position:fixed by default in api.css). Inside
     .topbar on mobile it must flow normally. */
  .topbar .presence-card,
  .topbar .beta-bar {
    position: static;
    inset: auto;
  }

  /* FIX: presence-card max-width so it doesn't overflow narrow screens */
  .topbar .presence-card {
    max-width: min(100%, 320px);
    width: 100%;
  }

  /* 2 — Main content */
  .hub,
  body:has(.dev-info) .hub,
  body:has(.project-grid) .hub,
  body:has(.friend-grid) .hub {
    order: 2;
    width: 100%;
    max-width: 100%;
  }

  /* 3 — Page nav as a centered group */
  .nav {
    order: 3;
    position: static;
    inset: auto;
    width: 100%;
  }

  .nav-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  /* The selected-item pointer triangle / offset only makes sense in
     the vertical desktop nav — drop it on mobile */
  .nav-link.selected {
    margin-left: 0;
  }

  .nav-link.selected::before {
    display: none;
  }

  /* 4 — System badges, centered and wrapping */
  .badges {
    order: 4;
    position: static;
    inset: auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* FIX: restore pointer-events on mobile so pokéball and badges are tappable */
    pointer-events: auto;
  }

  /* FIX: hide tooltips on touch (they'd stick on tap) */
  .link-card:hover .link-text {
    opacity: 0;
    pointer-events: none;
  }

  .hub-header {
    margin-bottom: 1.5rem;
  }

  /* Keep the dev-info / projects / friends content from butting up
     against the nav below it */
  .dev-info,
  .project-grid,
  .friend-grid {
    padding-bottom: 1rem;
  }

  /* FIX: bot sections need a bit of breathing room */
  .section+.section {
    margin-top: 1.5rem;
  }

  /* FIX: narrow waka bar label column so bars aren't crushed */
  .waka-bar-row {
    grid-template-columns: 5rem 1fr auto;
  }

  /* FIX: terminal height — respect short landscape viewports */
  .terminal {
    width: 94vw;
    height: clamp(300px, 65dvh, 70vh);
  }
}

/* Very narrow phones — squeeze waka bar name column further */
@media (max-width: 380px) {
  .waka-bar-row {
    grid-template-columns: 4rem 1fr auto;
    gap: 0.4rem;
  }

  .waka-bar-val {
    font-size: 0.66rem;
  }

  /* Single column + slightly smaller avatars on very small screens */
  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-card-img {
    width: 48px;
    height: 48px;
  }
}