body:fullscreen{
background:#111;
}

.artdose-shell{
width:100%;
background:#111;
padding:20px;
box-sizing:border-box;
overflow:hidden;
}

.artdose-shell:fullscreen{
width:100vw;
height:100vh;
padding:10px;
}

.artdose-topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
color:#fff;
flex-wrap:wrap;
gap:20px;
}

.artdose-controls{
display:flex;
gap:10px;
align-items:center;
}

.artdose-controls button{
background:transparent;
border:1px solid #444;
color:#fff;
padding:8px 14px;
cursor:pointer;
transition:background 0.15s ease;
}

.artdose-controls button:hover{
background:rgba(255,255,255,0.06);
}

.artdose-reader{
position:relative;
width:100%;
min-height:82vh;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}

.artdose-spread{
position:absolute;
display:flex;
justify-content:center;
align-items:center;
gap:0;
width:100%;
transition:
transform 0.16s cubic-bezier(0.22,1,0.36,1),
opacity 0.16s ease;
}

.incoming-right{
transform:translateX(24px);
opacity:0;
}

.incoming-left{
transform:translateX(-24px);
opacity:0;
}

.incoming-right.visible,
.incoming-left.visible{
transform:translateX(0);
opacity:1;
}

.outgoing-left{
transform:translateX(-24px);
opacity:0;
}

.outgoing-right{
transform:translateX(24px);
opacity:0;
}

.artdose-spread.single .artdose-canvas{
max-width:52vw;
}

.artdose-page{
position:relative;
}

.artdose-page::after{
content:"";
position:absolute;
top:0;
right:0;
width:8px;
height:100%;
background:linear-gradient(to left, rgba(0,0,0,0.08), transparent);
pointer-events:none;
}

.artdose-canvas{
display:block;
background:#fff;
max-width:45vw;
max-height:88vh;
height:auto;
width:auto;
box-shadow:0 0 18px rgba(0,0,0,0.18);
}

.artdose-counter{
color:#fff;
min-width:90px;
text-align:center;
font-size:14px;
}

@media (max-width:899px){

.artdose-shell{
padding:10px;
}

.artdose-reader{
min-height:72vh;
}

.artdose-canvas{
max-width:92vw;
max-height:82vh;
}

.artdose-controls{
flex-wrap:wrap;
justify-content:center;
}

}