/* Mobile layout only. Loaded after style.css so desktop rules stay untouched. */
@media screen and (max-width: 760px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { min-width: 320px; }
  main, .site { width: 100%; max-width: 100%; }
  .site { min-height: 100svh; overflow: hidden; }
  .content { width: calc(100% - 28px); margin-inline: auto; }
  .intro { min-height: 174px; padding: 36px 0 28px; align-items: center; }
  .intro h1 { margin: 0; font-size: clamp(38px, 11vw, 58px); line-height: 1; letter-spacing: .045em; }
  .profiles-section { padding: 26px 0 20px; }
  .profile-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; perspective: none; }
  .profile-card { width: 100%; min-width: 0; min-height: 278px; transform: none !important; }
  .card-main { width: 100%; min-height: 276px; padding: 15px 12px 11px; grid-template-columns: minmax(92px, 36%) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 10px; }
  .identity-row { min-width: 0; gap: 8px; padding: 3px 8px 11px 2px; }
  .avatar { width: 61px; height: 61px; flex: none; }
  .identity { width: 100%; min-width: 0; }
  .identity-name-row { min-width: 0; flex-wrap: wrap; gap: 4px; }
  .identity-name-row h3 { max-width: 100%; font-size: 18px; }
  .identity-name-row .badges { gap: 0; transform: translate(1px, 2px); }
  .identity-name-row .badge-frame { width: 20px; height: 22px; }
  .identity-name-row .custom-badge { width: 17px; height: 17px; transform: translateY(2px); }
  .identity-name-row .badge-frame:hover .custom-badge { transform: translateY(2px) scale(1.06); }
  .identity small { max-width: 100%; overflow-wrap: anywhere; font-size: 8px; }
  .status { max-width: 100%; padding: 5px 6px; font-size: 7px; }
  .socials { min-width: 0; padding: 4px 0; }
  .social-label { margin-bottom: 8px; font-size: 7px; }
  .social-link { min-width: 0; min-height: 41px; padding: 6px 8px; gap: 7px; font-size: 9px; }
  .social-icon { width: 25px; height: 25px; flex: none; }
  .activity { grid-column: 1 / 3; grid-row: 4; min-width: 0; overflow: hidden; min-height: 48px; margin: 0; padding: 8px; gap: 8px; font-size: 8px; }
  .activity > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .activity .activity-art { width: 27px; height: 27px; flex: none; }
  .invite-card { width: calc(100% - 28px); min-height: 58px; margin: 0 auto 12px; padding: 10px 12px; }
  .player-card { width: calc(100% - 28px); min-width: 0; margin: 0 auto 14px; padding: 12px; align-items: flex-start; gap: 11px; }
  .album-art { width: 54px; height: 54px; }
  .album-art:before { width: 39px; height: 39px; }
  .player-main { min-width: 0; align-items: flex-start; flex-direction: column; gap: 10px; }
  .track-info h2 { font-size: 13px; }
  .player-controls { width: 100%; max-width: none; display: grid; grid-template-columns: 30px 27px minmax(30px, 1fr) 27px; gap: 6px; row-gap: 9px; }
  .play-button { width: 29px; height: 29px; }
  .time { min-width: 27px; font-size: 7px; }
  .volume-control { grid-column: 1 / -1; justify-self: end; gap: 6px; }
  .volume-control input { width: 74px; min-height: 16px; }
  footer { width: calc(100% - 28px); min-height: 60px; margin-inline: auto; }
  .cursor-dot { display: none !important; }
}
@media screen and (max-width: 380px) {
  .content { width: calc(100% - 22px); }
  .card-main { padding-inline: 9px; grid-template-columns: minmax(84px, 35%) minmax(0, 1fr); column-gap: 8px; }
  .avatar { width: 56px; height: 56px; }
  .identity-name-row h3 { font-size: 17px; }
  .social-link { padding-inline: 6px; gap: 5px; font-size: 8px; }
  .invite-card, .player-card { width: calc(100% - 22px); }
  .player-card { gap: 9px; padding: 10px; }
  .album-art { width: 47px; height: 47px; }
  .album-art:before { width: 34px; height: 34px; }
  .player-controls { grid-template-columns: 28px 26px minmax(24px, 1fr) 26px; gap: 5px; }
}
@media screen and (max-width: 760px) and (orientation: landscape) and (max-height: 520px) {
  .entry { min-height: 100svh; }
  .intro { min-height: 138px; padding-block: 22px; }
}