/* MOONRIL MOBILE V2 */
@media screen and (max-width:768px) {

  html {
    -webkit-text-size-adjust:100%;
    overflow-x:clip;
  }

  body {
    min-width:0;
    overflow-x:clip;
  }

  .shell {
    width:calc(100% - 32px) !important;
    max-width:540px !important;
    margin-inline:auto !important;
  }

  /* Header */
  .nav {
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    margin:14px 0 0 !important;
    padding:12px 16px !important;
    min-height:64px !important;
    border-radius:22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  .navlinks a {
    display:none !important;
  }

  .nav .brand {
    font-size:15px !important;
    letter-spacing:.22em !important;
  }

  .crumbs {
    padding-top:22px !important;
    font-size:11px !important;
  }

  /* Hero */
  .hero {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:28px !important;
    padding:38px 0 28px !important;
    min-height:0 !important;
  }

  .hero > * {
    min-width:0 !important;
  }

  .hero h1 {
    font-size:clamp(48px,14vw,74px) !important;
    line-height:1 !important;
    letter-spacing:-.06em !important;
  }

  .hero p {
    font-size:15px !important;
    line-height:1.65 !important;
  }

  .hero .actions {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }

  .hero .btn {
    min-height:46px !important;
    padding:12px 15px !important;
    font-size:13px !important;
  }

  /* BMW image */
  .hero-art.moonril-bmw-hero {
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:4/3 !important;
    overflow:hidden !important;
    padding:0 !important;
    border-radius:20px !important;
    background:#101015 !important;
  }

  .hero-art.moonril-bmw-hero .moonril-bmw-image {
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
    margin:0 !important;
    border-radius:0 !important;
  }

  .hero-art.moonril-bmw-hero::before,
  .hero-art.moonril-bmw-hero::after {
    display:none !important;
  }

  /* Sections */
  section {
    padding:42px 0 !important;
  }

  .section-head {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
    margin-bottom:22px !important;
  }

  .section-head h2 {
    font-size:clamp(32px,9vw,44px) !important;
    line-height:1.08 !important;
  }

  .section-head p {
    font-size:14px !important;
    line-height:1.6 !important;
  }

  /* Discography */
  .track-grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .track-card {
    min-width:0 !important;
    padding:9px !important;
    border-radius:18px !important;
  }

  .track-art {
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1/1 !important;
    overflow:hidden !important;
    padding:0 !important;
    border-radius:13px !important;
  }

  .track-art .moonril-real-cover {
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .track-info {
    padding:12px 3px 5px !important;
  }

  .track-info h3 {
    font-size:15px !important;
    line-height:1.25 !important;
    overflow-wrap:anywhere !important;
  }

  .track-info p {
    font-size:11px !important;
    line-height:1.5 !important;
  }

  /* Music player */
  #moonril-player {
    width:100% !important;
    min-width:0 !important;
    padding:16px !important;
    border-radius:22px !important;
    overflow:hidden !important;
  }

  #moonril-player .mp-layout {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:22px !important;
  }

  #moonril-player .mp-now {
    min-width:0 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    padding:16px 12px !important;
    border-radius:18px !important;
  }

  #mp-cover {
    display:block !important;
    width:min(100%,260px) !important;
    height:auto !important;
    aspect-ratio:1/1 !important;
    object-fit:cover !important;
    border-radius:16px !important;
    margin:0 auto !important;
  }

  .mp-song {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    margin:15px 0 12px !important;
    gap:5px !important;
  }

  #mp-title {
    font-size:23px !important;
  }

  .mp-controls {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:16px !important;
    width:100% !important;
    margin:12px 0 !important;
  }

  .mp-controls button {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 48px !important;
    width:48px !important;
    height:48px !important;
    padding:0 !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.15) !important;
    background:#29292f !important;
    color:#fff !important;
    font-size:19px !important;
    appearance:none !important;
  }

  .mp-controls #mp-play {
    flex-basis:64px !important;
    width:64px !important;
    height:64px !important;
    background:#f3f3f5 !important;
    color:#101015 !important;
    font-size:27px !important;
  }

  .mp-progress {
    display:grid !important;
    grid-template-columns:35px minmax(0,1fr) 35px !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    margin-top:16px !important;
    font-size:11px !important;
  }

  .mp-progress span {
    white-space:nowrap !important;
  }

  #mp-seek {
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    accent-color:#b7a9ff !important;
  }

  .mp-bottom {
    display:grid !important;
    grid-template-columns:auto minmax(55px,1fr) auto !important;
    align-items:center !important;
    gap:9px !important;
    width:100% !important;
    margin-top:16px !important;
  }

  .mp-bottom label {
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    font-size:10px !important;
    white-space:nowrap !important;
  }

  #mp-volume {
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    accent-color:#b7a9ff !important;
  }

  #mp-spotify {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    min-width:38px !important;
    min-height:38px !important;
  }

  #mp-spotify svg {
    width:30px !important;
    height:30px !important;
  }

  .mp-list {
    display:flex !important;
    flex-direction:column !important;
    gap:9px !important;
    min-width:0 !important;
  }

  .mp-track {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:11px !important;
    width:100% !important;
    min-height:70px !important;
    padding:9px !important;
    border-radius:14px !important;
    text-align:left !important;
    background:#1d1d22 !important;
    color:#fff !important;
    border:1px solid #36363f !important;
    appearance:none !important;
  }

  .mp-track.active {
    background:#292536 !important;
    border-color:#a89bda !important;
  }

  .mp-track img {
    display:block !important;
    flex:0 0 52px !important;
    width:52px !important;
    height:52px !important;
    max-width:52px !important;
    object-fit:cover !important;
    border-radius:9px !important;
  }

  .mp-track-title {
    flex:1 !important;
    min-width:0 !important;
    font-size:14px !important;
    line-height:1.3 !important;
  }

  .mp-track-symbol {
    flex:none !important;
    font-size:13px !important;
  }

  /* Other blocks */
  .moonril-youtube-heading,
  .moonril-youtube-tracks,
  .moonril-platform-grid,
  .moonril-album-list,
  .about-grid,
  .contact {
    grid-template-columns:minmax(0,1fr) !important;
  }

  .moonril-youtube-heading {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
  }

  .moonril-yt-track {
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    overflow:hidden !important;
  }

  .moonril-yt-track img {
    flex:0 0 64px !important;
    width:64px !important;
    height:64px !important;
    object-fit:cover !important;
  }

  .moonril-yt-track span {
    min-width:0 !important;
  }

  input,textarea,button {
    max-width:100%;
  }

  .footer-row {
    flex-direction:column !important;
    gap:12px !important;
  }
}

@media screen and (max-width:380px) {
  .shell {
    width:calc(100% - 24px) !important;
  }

  .track-grid {
    gap:8px !important;
  }

  #moonril-player {
    padding:12px !important;
  }

  .mp-bottom label {
    font-size:9px !important;
  }
}