/* Solaria mobile refinement v2.22.5 — only mobile screens. */
@media (max-width:820px){
  /* HOME: search first, categories second, media shortcuts remain visible. */
  body[data-page="home"] .filter-area{display:flex !important;flex-direction:column !important;gap:10px !important;align-items:stretch !important}
  body[data-page="home"] .search-tools{display:contents !important}
  body[data-page="home"] .search-row{order:1 !important;width:100% !important}
  body[data-page="home"] .search-row .search{width:100% !important;max-width:none !important}
  body[data-page="home"] #categoryButtons{order:2 !important;display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:center !important;justify-content:flex-start !important;gap:7px !important;width:100% !important}
  body[data-page="home"] #categoryButtons button{width:auto !important;max-width:100% !important;flex:0 0 auto !important;min-height:32px !important;padding:6px 10px !important;white-space:normal !important;line-height:1.2 !important}
  body[data-page="home"] #mediaButtons{order:3 !important;display:flex !important;visibility:visible !important;flex-wrap:wrap !important;justify-content:center !important;gap:9px !important;width:100% !important;margin:2px 0 4px !important}
  body[data-page="home"] #mediaButtons a{display:inline-flex !important;visibility:visible !important;flex:1 1 130px !important;max-width:220px !important;min-height:38px !important;align-items:center !important;justify-content:center !important;text-align:center !important;padding:8px 10px !important;border:1px solid #d7ac59 !important;border-radius:13px !important;color:#f5d88d !important;background:#102449 !important;text-decoration:none !important;font-size:13px !important}
  /* TALE: enforce contrast only where the mobile inherited styles failed. */
  body[data-page="tale"] .papyrus-scroll .paper,
  body[data-page="tale"] .papyrus-scroll .story-text,
  body[data-page="tale"] .papyrus-scroll .story-text p,
  body[data-page="tale"] .papyrus-scroll .story-text span,
  body[data-page="tale"] .papyrus-scroll .story-text li,
  body[data-page="tale"] .papyrus-scroll .story-text blockquote{color:#392514 !important;text-shadow:none !important}
  body[data-page="tale"] #taleIntro{color:#f3e6cf !important;text-shadow:0 1px 2px rgba(0,0,0,.32) !important}
  /* TALE: play and clef, flexible visualizer; seek/time/volume on clean rows. */
  body[data-page="tale"] #listenBox.listen-box-v2{grid-template-columns:52px 26px minmax(0,1fr) !important;gap:6px 7px !important;align-items:center !important;padding:12px !important;min-width:0 !important}
  body[data-page="tale"] #listenBox .audio-play-cell{grid-column:1;grid-row:1;min-width:0}
  body[data-page="tale"] #listenBox .audio-medallion-btn{max-width:52px !important}
  body[data-page="tale"] #listenBox .audio-clef{grid-column:2;grid-row:1;font-size:30px !important;line-height:1 !important;margin:0 !important;padding:0 !important}
  body[data-page="tale"] #listenBox .audio-stack-v2{grid-column:3;grid-row:1;min-width:0 !important;margin:0 !important;width:100% !important}
  body[data-page="tale"] #listenBox .audio-label{margin:0 0 4px !important;white-space:normal !important;font-size:12px !important;line-height:1.2 !important}
  body[data-page="tale"] #listenBox .audio-viz-slot{width:100% !important;min-width:0 !important;height:34px !important}
  body[data-page="tale"] #listenBox .audio-ui-v2{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:7px 9px !important;align-items:center !important;min-width:0 !important;margin-top:6px !important}
  body[data-page="tale"] #listenBox #audioSeek{grid-column:1/-1;grid-row:1;width:100% !important;min-width:0 !important;margin:0 !important}
  body[data-page="tale"] #listenBox #audioTime{grid-column:1;grid-row:2;white-space:nowrap !important;font-size:12px !important}
  body[data-page="tale"] #listenBox .volume-control{grid-column:2;grid-row:2;display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:4px !important;min-width:0 !important;margin:0 !important}
  body[data-page="tale"] #listenBox #volumeRange{width:clamp(58px,15vw,96px) !important;min-width:58px !important}
  body[data-page="tale"] #listenBox .listen-actions{grid-column:1/-1 !important;grid-row:2 !important;display:flex !important;justify-content:center !important;flex-wrap:wrap !important;gap:8px !important;margin-top:3px !important;padding:0 !important;border:0 !important}
  body[data-page="tale"] #listenBox > audio{display:none !important}
}
@media(max-width:420px){
  body[data-page="tale"] #listenBox.listen-box-v2{grid-template-columns:46px 23px minmax(0,1fr) !important;gap:5px !important;padding:9px !important}
  body[data-page="tale"] #listenBox .audio-medallion-btn{max-width:46px !important}
  body[data-page="tale"] #listenBox .audio-clef{font-size:26px !important}
  body[data-page="tale"] #listenBox .audio-viz-slot{height:30px !important}
  body[data-page="tale"] #listenBox #volumeRange{width:58px !important}
}

/* v2.22.5 – Samsung Internet dark-mode workaround.
   Tested approach: sample B / monochrome gradient clipped to glyphs.
   IMPORTANT: this sets NO paper/papyrus background. The existing scroll
   cap and textured body are preserved exactly as in v2.22.4. */
@media (max-width:820px){
  body[data-page="tale"] .papyrus-scroll #storyText,
  body[data-page="tale"] .papyrus-scroll #storyText p,
  body[data-page="tale"] .papyrus-scroll #storyText span,
  body[data-page="tale"] .papyrus-scroll #storyText strong,
  body[data-page="tale"] .papyrus-scroll #storyText b,
  body[data-page="tale"] .papyrus-scroll #storyText em,
  body[data-page="tale"] .papyrus-scroll #storyText i,
  body[data-page="tale"] .papyrus-scroll #storyText li,
  body[data-page="tale"] .papyrus-scroll #storyText blockquote,
  body[data-page="tale"] .papyrus-scroll #storyText a {
    color:#392514 !important;
    background-image:linear-gradient(#392514,#392514) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    text-shadow:none !important;
  }
  /* Preserve figures/media and avoid applying the glyph effect to controls. */
  body[data-page="tale"] .papyrus-scroll #storyText img,
  body[data-page="tale"] .papyrus-scroll #storyText video {
    -webkit-text-fill-color:initial !important;
    background-image:none !important;
  }
}