
/* V92 — 4 genuinely equal mobile navigation slots, no phantom sound cell */
@media(max-width:850px) and (orientation:portrait){
 html body.studio-app .bottom-nav{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:auto!important;
  justify-content:stretch!important;justify-items:stretch!important;
  align-items:stretch!important;gap:0!important;
  padding-inline:8px!important;
 }
 html body.studio-app .bottom-nav #bottomSound{display:none!important;grid-column:auto!important}
 html body.studio-app .bottom-nav>button:not(#bottomSound){
  display:flex!important;min-width:0!important;width:100%!important;
  max-width:none!important;flex:none!important;grid-column:auto!important;
  margin:0!important;box-sizing:border-box!important;
 }
}
/* Night literature: unified charcoal, no velvet or black image overlay. */
html body.studio-app.night #view-literature,
html body.studio-app.night #view-literature.room-view,
html body.studio-app.night #view-literature .content-shell,
html body.studio-app.night #view-literature .room-hero,
html body.studio-app.night #view-literature .room-hero-inner{
 background:#151922!important;background-color:#151922!important;
 background-image:none!important;box-shadow:none!important;
}
html body.studio-app.night #view-literature .room-hero::before,
html body.studio-app.night #view-literature .room-hero::after,
html body.studio-app.night #view-literature .room-hero-inner::before,
html body.studio-app.night #view-literature .room-hero-inner::after,
html body.studio-app.night #view-literature .room-hero-graphic::before,
html body.studio-app.night #view-literature .room-hero-graphic::after{
 background:none!important;background-image:none!important;
 box-shadow:none!important;
}
html body.studio-app.night #view-literature .room-hero-graphic{
 background:transparent!important;filter:none!important;opacity:.35!important;
}
html body.studio-app.night #view-literature .room-hero h2{
 color:#f5e6d4!important;-webkit-text-fill-color:#f5e6d4!important;
}
html body.studio-app.night #view-literature .room-hero p{
 color:#c6b8b5!important;
}
/* Modern manuscript cards, no medieval double borders. */
html body.studio-app #view-literature .manuscript-grid{
 display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))!important;
 gap:17px!important;align-items:stretch!important;
}
html body.studio-app #view-literature .manuscript-card{
 position:relative!important;min-height:225px!important;
 padding:28px 24px!important;display:flex!important;
 flex-direction:column!important;align-items:flex-start!important;
 text-align:right!important;justify-content:flex-start!important;
 border:1px solid rgba(179,132,85,.27)!important;border-radius:20px!important;
 background:linear-gradient(145deg,#fffaf4,#f0e6dd)!important;
 box-shadow:0 12px 35px rgba(71,37,47,.1)!important;
 color:#443038!important;overflow:hidden!important;
 transition:transform .2s,border-color .2s,box-shadow .2s!important;
}
html body.studio-app.night #view-literature .manuscript-card{
 background:linear-gradient(145deg,#242733,#1c202b)!important;
 border-color:rgba(219,178,119,.23)!important;
 color:#f3e7da!important;
 box-shadow:0 12px 35px rgba(0,0,0,.16)!important;
}
html body.studio-app #view-literature .manuscript-card:hover{
 transform:translateY(-3px)!important;border-color:#c49b65!important;
 box-shadow:0 18px 40px rgba(54,32,40,.18)!important;
}
html body.studio-app #view-literature .manuscript-card .manu-icon{
 display:grid!important;place-items:center!important;
 width:42px!important;height:42px!important;margin:0 0 16px!important;
 background:rgba(189,143,88,.1)!important;border:1px solid rgba(189,143,88,.24)!important;
 border-radius:12px!important;color:#ac7d47!important;font-size:25px!important;
}
html body.studio-app #view-literature .manuscript-card h4{
 color:inherit!important;text-align:right!important;margin:0 0 10px!important;
 font-size:clamp(1.1rem,2vw,1.35rem)!important;
}
html body.studio-app #view-literature .manuscript-card p{
 color:inherit!important;opacity:.78!important;text-align:right!important;
 line-height:1.85!important;
}
html body.studio-app #view-literature .manuscript-card small{
 color:#a67a49!important;margin-top:auto!important;padding-top:16px!important;
 font-weight:700!important;align-self:flex-start!important;
}
html body.studio-app.night #view-literature .manuscript-card small{color:#e1bd87!important}
/* New clean reading overlay: calm, spacious, modern typography */
html body.studio-app #modal{
 width:min(94vw,880px)!important;max-width:880px!important;
 max-height:min(90dvh,900px)!important;
 border:1px solid rgba(202,162,108,.38)!important;
 border-radius:24px!important;
 background:transparent!important;
 padding:0!important;
 box-shadow:0 28px 85px rgba(0,0,0,.3)!important;
 overflow:visible!important;
}
html body.studio-app #modal::backdrop{
 background:rgba(11,13,20,.72)!important;backdrop-filter:blur(9px)!important;
 -webkit-backdrop-filter:blur(9px)!important;
}
html body.studio-app #modal .modal-body{
 position:relative!important;box-sizing:border-box!important;
 min-width:0!important;max-height:min(90dvh,900px)!important;
 padding:clamp(22px,5vw,52px)!important;overflow:auto!important;
 border:0!important;border-radius:23px!important;
 background:#faf5ef!important;background-image:none!important;
 box-shadow:none!important;color:#382b32!important;
 scrollbar-width:thin;scrollbar-color:#c9a16c transparent;
}
html body.studio-app.night #modal .modal-body{
 background:#1e222d!important;color:#f4e8dc!important;
}
html body.studio-app #modal .modal-close{
 position:sticky!important;top:0!important;float:left!important;
 z-index:10!important;display:grid!important;place-items:center!important;
 width:42px!important;height:42px!important;margin:0 0 8px!important;
 border-radius:50%!important;border:1px solid rgba(175,132,83,.3)!important;
 background:#eee3d8!important;color:#563a3e!important;
 box-shadow:none!important;
}
html body.studio-app.night #modal .modal-close{
 background:#30333e!important;color:#f1ddc1!important;
}
html body.studio-app #modal .reading-paper{
 max-width:680px!important;margin:auto!important;
 padding:12px 0 28px!important;border:0!important;
 border-radius:0!important;background:transparent!important;
 background-image:none!important;box-shadow:none!important;
 color:inherit!important;white-space:normal!important;
 text-align:right!important;font-size:clamp(1.05rem,2vw,1.27rem)!important;
 line-height:2.15!important;
}
html body.studio-app #modal .reading-paper .v92-reader-kicker{
 text-align:center!important;color:#a47a4d!important;
 font-size:.78rem!important;font-weight:700!important;
 letter-spacing:.07em!important;margin:0 0 22px!important;
}
html body.studio-app #modal .reading-paper h2{
 font-size:clamp(1.5rem,3.2vw,2.3rem)!important;
 line-height:1.55!important;color:inherit!important;
 text-align:center!important;margin:0 0 30px!important;
}
html body.studio-app #modal .reading-paper .work-prose{
 white-space:pre-wrap!important;overflow-wrap:anywhere!important;
 color:inherit!important;opacity:.95!important;
}
html body.studio-app #modal .reading-paper .actions{
 border-top:1px solid rgba(179,132,85,.23)!important;
 margin-top:34px!important;padding-top:24px!important;
 gap:10px!important;
}
html body.studio-app #modal .reading-paper .actions button{
 border-radius:12px!important;border:1px solid rgba(179,132,85,.3)!important;
 padding:10px 15px!important;
 background:rgba(191,148,95,.1)!important;color:inherit!important;
 box-shadow:none!important;
}
html body.studio-app #modal .reading-paper .actions button:hover{
 border-color:#c59b62!important;background:rgba(191,148,95,.2)!important;
}
html body.studio-app #modal .v92-reader-signature{
 color:#a47a4d!important;text-align:center!important;font-size:.8rem!important;
 margin-top:30px!important;letter-spacing:.08em!important;
}
@media(max-width:600px){
 html body.studio-app #modal{width:calc(100vw - 20px)!important;max-height:90dvh!important}
 html body.studio-app #modal .modal-body{padding:18px!important;max-height:90dvh!important}
 html body.studio-app #modal .reading-paper{padding-inline:5px!important}
}
@media(prefers-reduced-motion:reduce){
 html body.studio-app #view-literature .manuscript-card{transition:none!important}
}
