/* ============================================================
   MOMONCHY STORIES — MOBILE POLISH 2026-08-31
   Purpose: remove mobile off-centering/intrinsic grid overflow and
   make the first visible book in horizontal shelves feel centered.
   Desktop layout is intentionally unchanged.
   ============================================================ */

@media (max-width: 800px){
  html,body{max-width:100%;overflow-x:hidden}

  /* Hero: grid items were forcing a track wider than the viewport. */
  .hero .inner{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:center!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .hero .inner > *{min-width:0!important;width:100%!important;max-width:100%!important}
  .hero .inner > div:first-child{text-align:center!important}
  .hero h1{
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow-wrap:anywhere!important;
    word-break:keep-all!important;
  }
  .hero p{
    width:min(100%,560px)!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .hero-invite{margin-left:auto!important;margin-right:auto!important}
  .hero-art{width:100%!important;min-width:0!important;justify-content:center!important}

  /* First book: stop intrinsic content width from stretching the grid. */
  #first .featured-book-stage{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:center!important;
    overflow:hidden!important;
  }
  #first .featured-book-stage > *{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  #first .featured-book-wrap{
    width:100%!important;
    max-width:100%!important;
    min-height:auto!important;
    justify-content:center!important;
  }
  #first .featured-book-copy{
    width:100%!important;
    max-width:100%!important;
    text-align:center!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  #first .featured-book-copy h3,
  #first .featured-book-copy p{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  /* Character tabs and panels */
  .character-picker,
  .char-panel,
  .char-panel > *{min-width:0!important;max-width:100%!important}
  .char-tab{width:100%!important;min-width:0!important}
  .char-tab > div{min-width:0!important}
  .char-tab span{white-space:normal!important;overflow-wrap:anywhere!important}

  .char-panel{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .char-panel .shelf-arrival,
  .char-panel .shelf-heading,
  .char-panel .bookshelf-ribbon,
  .char-panel .next-layer,
  .char-panel .layer-head,
  .char-panel .bookcase,
  .char-panel .mini-bookcase{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .char-panel .shelf-heading,
  .char-panel .layer-head{
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    text-align:center!important;
  }
  .char-panel .shelf-heading > *,
  .char-panel .layer-head > *{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .char-panel .bookshelf-ribbon{
    display:block!important;
    text-align:center!important;
    white-space:normal!important;
  }

  /* Horizontal book rails: center the first card at rest. */
  .char-panel .bookcase,
  .char-panel .mini-bookcase,
  .forest-bookcase,
  .original-library-grid{
    --m-mobile-card:min(200px,64vw);
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:var(--m-mobile-card)!important;
    grid-template-columns:none!important;
    justify-content:start!important;
    gap:18px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding-top:22px!important;
    padding-bottom:28px!important;
    padding-left:max(16px,calc((100% - var(--m-mobile-card))/2))!important;
    padding-right:max(16px,calc((100% - var(--m-mobile-card))/2))!important;
    scroll-padding-inline:max(16px,calc((100% - var(--m-mobile-card))/2))!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
  }
  .char-panel .bookcase > .book-entry,
  .char-panel .mini-bookcase > .book-entry,
  .forest-bookcase > .book-entry,
  .original-library-grid > .book-entry{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    align-items:center!important;
    text-align:center!important;
    scroll-snap-align:center!important;
    scroll-snap-stop:always;
  }
  .char-panel .bookcase .book-object,
  .char-panel .mini-bookcase .book-object,
  .forest-bookcase .book-object,
  .original-library-grid .book-object{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .book-entry .book-meta{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    align-items:center!important;
    text-align:center!important;
  }
  .book-entry .book-meta b,
  .book-entry .book-meta p{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    text-align:center!important;
    overflow-wrap:anywhere!important;
  }

  /* Archive / coming stories headings */
  .original-library .section-head,
  #original-library .provisional-head{
    text-align:center!important;
  }
  .original-library .section-head > div,
  #original-library .provisional-head > div{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

@media (max-width: 520px){
  main{padding-left:12px!important;padding-right:12px!important}

  .hero .inner{padding-left:16px!important;padding-right:16px!important}
  .hero h1{
    font-size:clamp(34px,10.2vw,42px)!important;
    line-height:1.18!important;
    letter-spacing:.01em!important;
  }
  .hero p{font-size:15px!important;line-height:1.95!important}

  .section-head{text-align:center!important}
  .section-head > div:first-child{width:100%!important;max-width:100%!important;min-width:0!important}
  .section-head h2{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:clamp(27px,8.2vw,32px)!important;
    line-height:1.42!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    line-break:strict!important;
  }
  .section-head p{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  #first .featured-book-stage{padding:24px 16px 28px!important}
  #first .featured-book-wrap{padding-bottom:2px!important}
  #first .featured-book-copy h3{
    font-size:clamp(26px,7.6vw,31px)!important;
    line-height:1.45!important;
  }
  #first .featured-book-copy p{font-size:14px!important;line-height:1.95!important}

  /* The shelf introduction is cleaner stacked on phones. */
  .char-panel .shelf-arrival{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    padding:20px 16px!important;
    text-align:center!important;
  }
  .char-panel .shelf-arrival img{
    width:82px!important;
    height:82px!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }
  .char-panel .shelf-arrival > div{
    width:100%!important;
    min-width:0!important;
    text-align:center!important;
  }
  .char-panel .shelf-arrival h3,
  .char-panel .shelf-arrival p,
  .char-panel .you-are-here{
    width:100%!important;
    max-width:100%!important;
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .char-panel .shelf-heading{margin-top:28px!important}
  .char-panel .shelf-heading h4,
  .char-panel .layer-head h4{
    font-size:clamp(21px,6.2vw,25px)!important;
    line-height:1.45!important;
  }
  .char-panel .layer-head{
    padding:16px 12px!important;
    border-radius:18px!important;
  }

  .char-panel .bookcase,
  .char-panel .mini-bookcase,
  .forest-bookcase,
  .original-library-grid{
    --m-mobile-card:min(196px,64vw);
    gap:16px!important;
  }

  .original-library-grid{
    border-radius:24px!important;
  }

  /* Official footer should also feel centered on narrow phones. */
  .official-footer{text-align:center!important;padding-left:18px!important;padding-right:18px!important}
  .official-footer__brand p{text-align:center!important}
  .official-footer__links{text-align:left!important}
  .official-footer__copy{text-align:center!important}
}

@media (max-width: 350px){
  .hero h1{font-size:33px!important}
  .char-panel{padding-left:10px!important;padding-right:10px!important}
  .char-panel .bookcase,
  .char-panel .mini-bookcase,
  .forest-bookcase,
  .original-library-grid{--m-mobile-card:min(184px,68vw)}
}

/* Reader pages -------------------------------------------------- */
@media (max-width: 720px){
  .book-hero,
  .book-main,
  .current-stories-nav__inner{max-width:100%!important;min-width:0!important}

  .book-hero{
    padding-left:18px!important;
    padding-right:18px!important;
    text-align:center!important;
  }
  .book-hero h1,
  .book-hero p{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow-wrap:anywhere!important;
  }

  .book-main{padding-left:10px!important;padding-right:10px!important}
  .flipbook-stage{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-left:34px!important;
    padding-right:34px!important;
    box-sizing:border-box!important;
  }
  .flipbook{
    width:min(100%, 340px)!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .flipbook > *{min-width:0!important;max-width:100%!important}
  .flip-controls{
    width:100%!important;
    max-width:100%!important;
    justify-content:center!important;
    gap:8px!important;
    flex-wrap:wrap!important;
  }
  .story-transcript,
  .current-stories-nav,
  .current-stories-nav__inner{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  .current-stories-nav__inner{text-align:center!important}
}

@media (max-width: 430px){
  .book-hero h1{font-size:clamp(28px,8.4vw,34px)!important;line-height:1.42!important}
  .book-hero p{font-size:14px!important;line-height:1.85!important}
  .flipbook-stage{padding-left:28px!important;padding-right:28px!important}
  .flip-controls button{padding-left:12px!important;padding-right:12px!important}
  .story-transcript summary{text-align:center!important}
  .current-story-grid{gap:10px!important}
  .current-story-card{min-width:0!important}
}

/* small follow-up: preserve the original scroll cue triangle and Japanese line breaking */
@media (max-width:520px){
  .section-head > div:first-child{width:100%!important;max-width:100%!important;min-width:0!important}
  .section-head > div:not(:first-child){max-width:none!important}
  #first .scroll-cue-triangle{
    width:0!important;
    height:0!important;
    max-width:none!important;
    min-width:0!important;
  }
  .section-head h2,
  #first .featured-book-copy h3,
  .char-panel .shelf-heading h4,
  .char-panel .layer-head h4{
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-break:strict!important;
  }
}
@media(max-width:520px){
  #first .section-head h2,
  #characters > .section-head h2,
  #original-library > .section-head:first-child h2,
  #original-library .provisional-head h2{
    font-size:clamp(27px,8.2vw,32px)!important;
    line-height:1.42!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-break:strict!important;
  }
}
.mobile-keep{white-space:nowrap}