.mwr-reader{

width:100%;

display:flex;

flex-direction:column;

align-items:center;

}



.mwr-toolbar{

padding:8px 15px 4px;

margin-top:-4px;

display:flex;

gap:10px;

justify-content:center;

}



.mwr-btn{

background:#000;

color:#fff;

border:none;

padding:10px 18px;

border-radius:25px;

cursor:pointer;

font-size:18px;

}



.mwr-btn:hover{

opacity:.8;

}




.mwr-stage{

width:100%;

height:85vh;

display:flex;

align-items:center;

justify-content:center;

overflow:visible;

}



/*
Wrapper isolado só para o zoom (scale). O turn.js
nunca deve ter um transform aplicado por fora dele,
senão o cálculo interno de arrasto/dobra quebra.
*/
.mwr-zoom{

transition:transform .3s ease;

}



.mwr-book{

position:relative;

perspective:3000px;

}



.mwr-page{

background:white;

overflow:hidden;

box-shadow:

0 15px 45px rgba(0,0,0,.5);


transform-style:preserve-3d;


}



.mwr-page canvas{

width:100%;

height:100%;

display:block;

}



.mwr-loading{

color:#333;

font-family:sans-serif;

font-size:20px;

}



@media(max-width:900px){


.mwr-stage{

height:75vh;

}


/* Sem barra de ferramentas no mobile (navegação é por gesto) */
.mwr-toolbar{

display:none;

}


/*
Tamanho do livro resolvido pelo proprio flexbox/CSS,
respeitando a proporcao A4 (210x297) - o JS so le o
resultado final e repassa pro turn.js.
*/
.mwr-book{

width:min(92vw,calc(75vh * 210 / 297));

aspect-ratio:210/297;

height:auto;

}


}



.mwr-reader:fullscreen{

width:100vw;

height:100vh;

}



.mwr-reader:fullscreen .mwr-stage{

height:90vh;

}



/* ======================================== */
/* EFEITO TURN.JS (mobile e desktop)         */
/* ======================================== */

.mwr-turn-book{

background:transparent;

}



/* Classes geradas internamente pelo turn.js */
.mwr-reader .turn-page{

background:#fff !important;

}

.mwr-reader .turn-page-wrapper{

background:transparent !important;

}



.mwr-turn-page{

position:relative;

background:linear-gradient(135deg,#d7bf99 0%,#c6a67d 100%);

box-shadow:
inset 0 0 25px rgba(0,0,0,.08),
0 0 10px rgba(0,0,0,.15);

overflow:hidden;

-webkit-backface-visibility:hidden;

backface-visibility:hidden;

}



.mwr-turn-page::before{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
to right,
rgba(255,255,255,.18),
transparent 12%,
transparent 88%,
rgba(0,0,0,.08)
);

pointer-events:none;

z-index:1;

}



.mwr-turn-loading{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:10px;

z-index:2;

color:#6b4f2c;

font-weight:bold;

font-family:Arial, Helvetica, sans-serif;

user-select:none;

}



.mwr-turn-loading::before{

content:"📖";

font-size:36px;

}



.mwr-turn-page canvas{

position:relative;

z-index:3;

width:100% !important;

height:100% !important;

display:block;

object-fit:contain;

}