/* PHOS mobile presentation overrides — phone-first, scoped and non-destructive. */
@media (max-width: 640px) {
  .phos-shelf.phos-showcase-premium {
    width: calc(100% - 8px) !important;
    margin: 6px auto 10px !important;
    padding: 15px 10px 16px !important;
    border-radius: 15px !important;
  }

  .phos-showcase-head { margin-bottom: 15px !important; }
  .phos-showcase-kicker { font-size: 8px !important; letter-spacing: .18em !important; }
  .phos-shelf.phos-showcase-premium .phos-showcase-head h2 {
    font-size: clamp(30px, 10vw, 38px) !important;
    letter-spacing: .075em !important;
  }
  .phos-shelf.phos-showcase-premium .phos-sub {
    margin-top: 7px !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
    letter-spacing: .09em !important;
  }
  .phos-showcase-rule { margin-top: 11px !important; width: 58vw !important; }

  .phos-showcase-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .phos-collection-card {
    padding: 15px 12px 16px !important;
    border-radius: 14px !important;
  }
  .phos-card-head { margin-bottom: 14px !important; }
  .phos-card-title { font-size: 20px !important; }
  .phos-card-note { font-size: 9px !important; line-height: 1.45 !important; }

  /* The old mobile CSS kept all three trilogy covers in three tiny columns.
     Two generous columns are much easier to see and tap on a phone. */
  .phos-shelf.phos-showcase-premium .phos-books {
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    padding: 2px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
    align-items: start !important;
  }

  .phos-shelf.phos-showcase-premium .phos-book {
    width: 100% !important;
    min-width: 0 !important;
  }
  .phos-shelf.phos-showcase-premium .phos-book:nth-child(3) {
    grid-column: 1 / -1 !important;
    width: calc(50% - 6px) !important;
    justify-self: center !important;
  }

  .phos-shelf.phos-showcase-premium .phos-cover-wrap,
  .phos-shelf.phos-showcase-premium .phos-book:nth-child(1) .phos-cover-wrap,
  .phos-shelf.phos-showcase-premium .phos-book:nth-child(2) .phos-cover-wrap,
  .phos-shelf.phos-showcase-premium .phos-book:nth-child(3) .phos-cover-wrap {
    width: 100% !important;
    max-width: 170px !important;
    transform: none !important;
    transform-origin: center !important;
    border-radius: 3px 6px 6px 3px !important;
    box-shadow: 5px 7px 0 -3px rgba(105,81,32,.38), 7px 14px 25px rgba(0,0,0,.66) !important;
  }
  .phos-shelf.phos-showcase-premium .phos-cover-wrap:before { width: 6px !important; }
  .phos-shelf.phos-showcase-premium .phos-label {
    min-height: 0 !important;
    margin-top: 9px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: .03em !important;
  }
  .phos-shelf.phos-showcase-premium .phos-lock {
    margin-top: 4px !important;
    font-size: 8px !important;
    letter-spacing: .07em !important;
  }

  .phos-novel-card {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
  }
  .phos-novel-slot { padding: 2px 0 3px !important; }
  .phos-novel-slot .phos-book { width: min(58vw, 220px) !important; }
  .phos-novel-slot .phos-cover-wrap {
    width: 100% !important;
    max-width: 220px !important;
    transform: none !important;
  }

  .phos-dialog {
    width: min(420px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 28px) !important;
    overflow: auto !important;
    padding: 19px 16px !important;
    border-radius: 14px !important;
  }
  .phos-dialog h2 { font-size: 23px !important; }
  .phos-dialog input { height: 50px !important; font-size: 16px !important; }
  .phos-actions { gap: 8px !important; }
  .phos-actions button { min-height: 46px !important; }
}

@media (max-width: 340px) {
  .phos-shelf.phos-showcase-premium .phos-books {
    grid-template-columns: 1fr !important;
    max-width: 215px !important;
  }
  .phos-shelf.phos-showcase-premium .phos-book:nth-child(3) {
    grid-column: auto !important;
    width: 100% !important;
  }
  .phos-shelf.phos-showcase-premium .phos-cover-wrap { max-width: 190px !important; }
}