/*
  Mobile keeps the desktop composition: decorative assets stay anchored at
  their original absolute coordinates, but are reduced so they remain within
  a small viewport.  The desktop cascade is deliberately untouched.
*/
@media (max-width: 760px) {
  html, body { overflow-x: clip; }

  /* Live2D and video stay enabled; these are purely decorative GPU layers. */
  .section-3d { display: none !important; }

  /* Every CSS animation forces a repaint while the page is moving. Keep the
     interactive Live2D canvas and real videos, but make page decoration static. */
  *, *::before, *::after { animation: none !important; }
  html { scroll-behavior: auto; }

  /* Only the section currently on screen animates on phones. */
  .notes:not(.is-runtime-active)::before,
  .notes:not(.is-runtime-active)::after,
  .about:not(.is-runtime-active)::before,
  .about:not(.is-runtime-active)::after,
  .career:not(.is-runtime-active)::before,
  .career:not(.is-runtime-active)::after,
  .works:not(.is-runtime-active)::before,
  .works:not(.is-runtime-active)::after,
  .reveal-section:not(.is-runtime-active) .section-breeze::before,
  .reveal-section:not(.is-runtime-active) .section-breeze::after,
  .reveal-section:not(.is-runtime-active) .section-3d,
  .reveal-section:not(.is-runtime-active) .section-3d::before,
  .reveal-section:not(.is-runtime-active) .section-3d::after {
    animation-play-state: paused !important;
  }

  /* Preserve each postcard's inline top/right position; only scale its frame. */
  .notes .sky-postcard,
  .about > .sky-postcard,
  .works > .sky-postcard {
    position: absolute !important;
    width: min(36vw, 142px) !important;
    margin: 0 !important;
    transform: rotate(5deg) !important;
  }

  /* The first Notes card has no inline position of its own. */
  .notes > .sky-postcard:not([style]) {
    right: 5% !important;
    top: 65px !important;
    width: min(21vw, 82px) !important;
  }

  /* Onmyoji stays as a small, fixed Polaroid accent in the weather widget. */
  .weather-widget { position: relative; }
  .weather-widget .weather-photo {
    display: block;
    position: absolute;
    z-index: 4;
    right: 60px;
    top: 8px;
    width: min(26vw, 102px);
    margin: 0;
    padding: 5px 5px 18px;
    background: #fff;
    box-shadow: 0 9px 17px rgba(60, 108, 119, .18);
    transform: rotate(5deg);
    pointer-events: none;
  }
  .weather-widget .weather-photo img { display: block; width: 100%; height: auto; }
  .weather-widget .weather-photo span {
    position: absolute;
    bottom: 6px;
    left: 10px;
    color: #537b89;
    font: 9px/1.25 "DM Mono", monospace;
  }

  /* The same image is used as the calendar background on phones, not twice. */
  .notes .onmyoji-source { display: none !important; }

  /* Separate the three diary cards vertically so they read as accents, not a stack. */
  .notes > .sky-postcard[style*="top: 300px"] {
    right: 5% !important;
    top: 550px !important;
    width: min(21vw, 82px) !important;
  }

  .notes > .sky-postcard[style*="top: 900px"] {
    right: 5% !important;
    top: 860px !important;
    width: min(21vw, 82px) !important;
  }

  /* Place the About video beneath the portrait instead of across it. */
  .about > .sky-postcard {
    right: 5% !important;
    top: 75px !important;
    width: min(28vw, 108px) !important;
  }

  .sky-postcard img,
  .sky-postcard video {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
  }

  /* Keep the two About photos in their original layered arrangement. */
  .about-label > .about-mascot {
    position: absolute !important;
    height: auto !important;
    margin: 0 !important;
  }

  .about-label > .about-mascot:first-of-type {
    left: 145px !important;
    top: 280px !important;
    width: min(18vw, 70px) !important;
  }

  .about-label > .about-mascot:last-of-type {
    left: 225px !important;
    top: 150px !important;
    width: min(32vw, 120px) !important;
  }

  .media-slot--about {
    width: min(46vw, 174px) !important;
    height: min(46vw, 174px) !important;
    box-sizing: border-box;
    padding: 8px;
    margin: 18px 0 0 !important;
  }

  .media-slot--about > span {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }

  .media-slot--about .about-img {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }

  .media-slot--about .about-img { object-fit: cover; }

  /* Keep the small work thumbnails in their existing top-right positions. */
  .work-media-slot {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 128px !important;
    margin: 0 0 16px !important;
  }

  .work-media-slot .works-mascot-works {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The fixed companion remains visible, but occupies less of the screen. */
  .live-widget {
    width: 76px !important;
    right: -3px !important;
    bottom: 8px !important;
    opacity: .9;
  }

  .live-widget canvas { width: 76px !important; height: 100px !important; }
  .live-widget img { width: 70px !important; }
  .live-widget span { display: none; }
}