/* Phone fixes (loaded last)
   1. Two-column areas must be allowed to shrink: the hidden A4 preview inside the résumé / portfolio maker is
      794px wide, and a plain "1fr" column grew to fit it, so iPhones zoomed the whole page out.
   2. iPhone Safari repaints slowly with a fixed page background, blurred header and blended layers — that is the
      blank area that appeared for a few seconds when switching to 拜喵神. Phones get lighter versions. */
.findgrid > *, .kitgrid > *, .lettergrid > *, .temple > *, .kitForm, .kitSide { min-width: 0; }
.preview { width: 100%; max-width: 100%; }

@media (max-width: 900px) {
    .findgrid, .kitgrid, .temple, .lettergrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px), (hover: none) {
    body { background-attachment: scroll; }
    .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(243, 236, 226, .98); }
    .wc-bg img { mix-blend-mode: normal; opacity: .13; }
    .wc-bg .wc2 { display: none; }
    .party, .lbox, .aidlg { backdrop-filter: none; -webkit-backdrop-filter: none; }
    /* switching pages: a quick fade only, no sliding (sliding a long page made Safari redraw it all) */
    .pane { animation: fadein .25s ease; }
    @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
    .hero-cat, .pagehead img, .emptycat img { animation: none; }
}

/* never let anything push the page sideways on a phone */
@media (max-width: 760px) {
    html, body { overflow-x: hidden; }
    main { max-width: 100vw; }
    .howto, .gfeat li, .trust li, .reviews { overflow-wrap: anywhere; }
}

/* sub-tabs: a tidy 2 x 2 grid on phones instead of squashed two-line buttons */
@media (max-width: 560px) {
    .segtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .segtabs button { padding: 7px 8px; white-space: nowrap; font-size: .88rem; }
}