/* ======================================================
   Sayonara_Alice.exe — Visual Archive mobile pager

   CORE and FRAGMENTS keep their original, single DOM nodes.
   JavaScript only pages those nodes on phone-sized viewports;
   desktop and the five ECHO memories remain untouched.
====================================================== */

.v101-archive-pager {
  display: none;
}

.v101-mobile-page-hidden {
  display: none !important;
}

@media (max-width: 680px), (max-height: 500px) and (max-width: 980px) {
  .v71-fullarchive-grid--core.v101-mobile-paged,
  .v71-fullarchive-grid--fragments.v101-mobile-paged {
    --v101-drag-x: 0px;
    grid-auto-flow: row;
    position: relative;
    transform: translate3d(var(--v101-drag-x), 0, 0);
    transition: transform .28s cubic-bezier(.2, .78, .25, 1), opacity .2s ease;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: contain;
    will-change: transform;
  }

  .v71-fullarchive-grid--core.v101-mobile-paged img,
  .v71-fullarchive-grid--fragments.v101-mobile-paged img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  .v71-fullarchive-grid--core.v101-mobile-paged.is-v101-dragging,
  .v71-fullarchive-grid--fragments.v101-mobile-paged.is-v101-dragging {
    transition: none;
  }

  .v71-fullarchive-grid--core.v101-mobile-paged {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 430px);
    max-width: 430px;
    margin-inline: auto;
    gap: 0;
    isolation: isolate;
  }

  .v71-fullarchive-grid--core.v101-mobile-paged .v71-fullarchive-card,
  .v71-fullarchive-grid--core.v101-mobile-paged .v71-fullarchive-card.is-featured {
    grid-column: auto;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .v71-fullarchive-grid--core.v101-mobile-paged .v71-fullarchive-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .v71-fullarchive-grid--core.v101-mobile-paged::after {
    content: "";
    position: absolute;
    inset: auto 10% -.45rem;
    z-index: -1;
    height: 1.2rem;
    background: radial-gradient(ellipse, rgba(59, 190, 245, .18), transparent 68%);
    filter: blur(8px);
    pointer-events: none;
  }

  .v71-fullarchive-grid--fragments.v101-mobile-paged {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.58rem, 2.8vw, .9rem);
    width: 100%;
    padding: clamp(.36rem, 1.8vw, .58rem);
    border: 1px solid rgba(82, 207, 244, .09);
    background:
      linear-gradient(135deg, rgba(13, 51, 71, .12), transparent 42%),
      linear-gradient(315deg, rgba(77, 63, 145, .08), transparent 48%);
  }

  /* Page 11 contains only memories 41–42. Reserve the second row with a
     non-interactive grid item so 10 → 11 → 01 never moves the document. */
  .v71-fullarchive-grid--fragments.v101-mobile-paged[data-v101-last-page="true"]::after {
    content: "";
    display: block;
    grid-column: 1 / -1;
    inline-size: 100%;
    aspect-ratio: 1.66 / 1;
    visibility: hidden;
    pointer-events: none;
  }

  .v71-fullarchive-grid--fragments.v101-mobile-paged .v71-fullarchive-card,
  .v71-fullarchive-grid--fragments.v101-mobile-paged .v71-fullarchive-card:nth-child(5n+2),
  .v71-fullarchive-grid--fragments.v101-mobile-paged .v71-fullarchive-card:nth-child(7n+4) {
    grid-column: auto;
    margin: 0;
  }

  .v101-archive-pager {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(4.5rem, 1fr);
    align-items: center;
    gap: clamp(.65rem, 3vw, 1rem);
    width: min(100%, 430px);
    margin: clamp(.72rem, 3vw, 1.05rem) auto 0;
    padding: .22rem .1rem;
  }

  .v101-archive-page-label {
    min-width: 0;
    color: rgba(184, 239, 255, .82);
    font: 700 clamp(.59rem, 2.65vw, .7rem)/1.25 "Courier New", Consolas, monospace;
    letter-spacing: clamp(.08em, .45vw, .15em);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .v101-archive-page-progress {
    position: relative;
    display: block;
    min-width: 0;
    height: 1px;
    overflow: hidden;
    background: rgba(105, 213, 246, .13);
  }

  .v101-archive-page-progress > span {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--v101-page-progress, 0%);
    background: linear-gradient(90deg, rgba(82, 217, 255, .72), rgba(141, 112, 237, .76));
    box-shadow: 0 0 8px rgba(78, 205, 255, .48);
    transition: width .34s cubic-bezier(.2, .78, .25, 1);
  }

  .v101-archive-pager[data-v101-pager="core"] {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    width: min(64%, 250px);
    gap: .48rem;
  }

  .v101-archive-pager[data-v101-pager="core"] .v101-archive-page-label {
    color: rgba(196, 243, 255, .76);
    letter-spacing: .16em;
  }

  .v101-archive-pager[data-v101-pager="core"] .v101-archive-page-progress {
    width: min(100%, 7.5rem);
  }

  .v101-archive-pager[data-v101-pager="fragments"] {
    border-bottom: 1px solid rgba(75, 201, 238, .12);
    padding-bottom: .48rem;
  }

  .v101-archive-pager[data-v101-pager="fragments"] .v101-archive-page-label {
    text-align: left;
  }

  .v101-archive-pager[data-v101-pager="fragments"] .v101-archive-page-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(1, 10, 18, .82) 7px 9px);
  }
}

@media (max-height: 500px) and (min-width: 681px) and (max-width: 980px) {
  .v71-fullarchive-grid--core.v101-mobile-paged {
    width: min(56vw, 390px);
  }

  .v101-archive-pager[data-v101-pager="core"] {
    width: min(34vw, 250px);
  }

  .v71-fullarchive-grid--fragments.v101-mobile-paged,
  .v101-archive-pager[data-v101-pager="fragments"] {
    width: min(76vw, 620px);
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v101-archive-page-progress > span,
  .v71-fullarchive-grid--core.v101-mobile-paged,
  .v71-fullarchive-grid--fragments.v101-mobile-paged {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}