/* Production-only responsive refinements. Desktop rules intentionally stay untouched. */
@media (max-width: 680px) {
  html,
  body {
    max-width: 100%;
  }

  img,
  svg {
    max-width: 100%;
  }

  .map-world {
    min-height: 1890px;
    overflow-x: clip;
  }

  .map-nav {
    right: 8px;
    left: 8px;
    display: grid;
    grid-template-columns: 48px repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 44px);
    box-sizing: border-box;
    gap: 2px 4px;
    min-height: 100px;
    padding: 5px 7px;
    overflow: hidden;
  }

  .map-nav-home {
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
  }

  .map-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: 4px;
    font-size: .74rem;
    text-align: center;
    white-space: nowrap;
  }

  .map-nav-about,
  .map-nav-contact {
    min-width: auto;
  }

  .map-nav-onepiece {
    min-width: auto;
    padding-inline: 2px;
    font-size: .64rem;
  }

  .map-title {
    top: 116px;
    padding: 9px 12px 8px;
  }

  .map-title h1 {
    font-size: clamp(.86rem, 4.3vw, 1.08rem);
    line-height: 1.18;
    white-space: nowrap;
  }

  .map-title .role-line {
    margin-top: 5px;
    font-size: .78rem;
  }

  .map-plane {
    top: 176px;
    height: 1700px;
  }

  .island-silhouette {
    transform: scale(1.015);
  }

  .map-routes {
    display: none;
  }

  .map-plane::after {
    position: absolute;
    top: 52px;
    bottom: 82px;
    left: 50%;
    z-index: 1;
    width: 0;
    border-left: 3px dashed color-mix(in srgb, var(--accent-route) 48%, white);
    content: "";
    opacity: .72;
    pointer-events: none;
    transform: translateX(-50%);
  }

  .map-socials {
    top: 500px;
    gap: 5px;
  }

  .anime-stack {
    width: 228px;
    height: 162px;
  }

  .project-archive-node,
  .little-notes-node,
  .earth-book-node,
  .island-mailbox {
    width: 190px;
    height: 198px;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 12px;
    background: rgba(255, 253, 235, .64);
    box-shadow: 0 18px 38px rgba(78, 126, 92, .12), inset 0 1px 0 rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px) saturate(108%);
    -webkit-backdrop-filter: blur(12px) saturate(108%);
  }

  .project-archive-art {
    inset: 8px 0 18px;
    transform: scale(.98);
  }

  .little-notes-art {
    inset: 16px 12px 28px;
    transform: scale(1);
  }

  .earth-book-node::before {
    width: 190px;
    height: 190px;
  }

  .manga-sticker-set {
    inset: -18px -15px -8px -30px;
    transform: scale(.68);
  }

  .mailbox-unit {
    inset: 5px 12px 14px;
    transform: scale(1.1);
  }

  .island-mailbox:hover .mailbox-unit,
  .island-mailbox:focus-visible .mailbox-unit {
    transform: translateY(-4px) rotate(-1deg) scale(1.1);
  }

  .project-archive-node:hover .project-archive-art,
  .project-archive-node:focus-visible .project-archive-art {
    transform: translateY(-4px) scale(.98);
  }

  .little-notes-node:hover .little-notes-art,
  .little-notes-node:focus-visible .little-notes-art {
    transform: translateY(-4px) scale(1);
  }

  .mailbox-title {
    top: -6px;
  }

  .social-link {
    min-height: 44px;
    padding-inline: 11px;
  }

  .csdn-link {
    min-width: 96px;
  }

  .csdn-brand-logo {
    width: 68px;
  }

  .email-link {
    width: 44px;
    padding: 0;
  }

  .music-controls button {
    width: 44px;
    height: 44px;
  }

  .music-controls .music-play {
    width: 44px;
    height: 44px;
  }

  .music-timeline input {
    min-height: 28px;
  }

  .back-map {
    width: 48px;
    height: 48px;
  }

  .content-page,
  .project-archive-page,
  .little-notes-page,
  .article-notebook-page,
  .about-letter-page {
    overflow-x: clip;
  }

  .project-timeline-content h2 {
    overflow-wrap: anywhere;
  }

  .contact-letter-page {
    padding-inline: 8px;
  }

  .contact-stamps {
    gap: 11px;
  }

  .contact-stamp {
    min-width: 0;
  }

  .about-letter-stage {
    height: auto;
    min-height: 1010px;
  }

  .about-letter-paper {
    min-height: 0;
  }

  .gallery-page-title {
    width: calc(100% - 82px);
    text-align: center;
  }
}

@media (max-width: 380px) {
  .map-nav-link {
    padding-inline: 2px;
    font-size: .68rem;
  }

  .map-title h1 {
    font-size: .86rem;
  }

  .map-title .role-line {
    font-size: .72rem;
  }

  .notebook-intro-page {
    padding-inline: 19px;
  }

  .notebook-directory-page {
    padding-inline: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}