/* =====================================================

CHAPTER PAGE GLOBAL

===================================================== */



*{

box-sizing:border-box;

}



html,

body{

margin:0;

padding:0;

}



/* =====================================================

DISABLE SELECTION

===================================================== */



body{



-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;



}



img{



-webkit-user-drag:none;

user-drag:none;



}



a{



text-decoration:none;



}



/* =====================================================

CHAPTER NAVIGATION

===================================================== */



.chapter-controls{



width:100%;



display:flex;



align-items:center;



justify-content:center;



gap:10px;



padding:15px;



border-bottom:1px solid rgba(255,255,255,.10);



flex-wrap:wrap;



}



/* =====================================================

BOTTOM NAVIGATION

===================================================== */



.chapter-controls.bottom-controls{



border-top:1px solid rgba(255,255,255,.10);



border-bottom:none;



}



/* =====================================================

CHAPTER BUTTON

===================================================== */



.chapter-button{



display:flex;



align-items:center;



justify-content:center;



min-width:145px;



height:42px;



padding:9px 14px;



border-radius:7px;



border:1px solid rgba(255,255,255,.12);



background:rgba(255,255,255,.05);



color:inherit;



font-family:inherit;



font-size:13px;



font-weight:700;



cursor:pointer;



transition:.2s ease;



}



.chapter-button:hover{



background:rgba(255,255,255,.10);



border-color:rgba(255,255,255,.25);



}



/* =====================================================

DISABLED BUTTON

===================================================== */



.chapter-button.disabled{



opacity:.35;



cursor:not-allowed;



pointer-events:none;



}



/* =====================================================

CHAPTER SELECT

===================================================== */



.chapter-select{



width:190px;



height:42px;



padding:8px 12px;



border-radius:7px;



border:1px solid rgba(255,255,255,.12);



background:#222;



color:inherit;



font-family:inherit;



font-size:13px;



font-weight:600;



outline:none;



}



/* =====================================================

MANGA PAGES

===================================================== */



.chapter-pages{



width:100%;



margin:0 auto;



padding:0;



display:flex;



flex-direction:column;



align-items:center;



}



.chapter-pages img{

display:block;

width:100%;

max-width:100%;

/* -----------------------------------------------------
   Reserve space before the image has loaded.

   Without this, images with loading="lazy" and no
   width/height attributes collapse to 0 height, so the
   whole .chapter-pages section has no height on first
   paint. That pushes the bottom nav + footer up right
   under the top nav until the images finish loading.

   aspect-ratio: auto 2 / 3 tells the browser to use the
   image's real intrinsic ratio once it's known (auto),
   but reserve a 2:3 placeholder box (typical manga page
   proportions) until then, so the layout never collapses.
   content-visibility doesn't apply to leaf <img> elements
   the way it does to containers, so it wasn't doing anything.
----------------------------------------------------- */

aspect-ratio:auto 2 / 3;

height:auto;

margin:0;

padding:0;

background:#111;

}



/* =====================================================

LOADING / ERROR

===================================================== */



.chapter-loading{



width:100%;



text-align:center;



padding:20px;



opacity:.7;



}



/* =====================================================

MOBILE

===================================================== */



@media(max-width:600px){



.chapter-controls{



padding:12px 10px;



gap:7px;



}



.chapter-button{



flex:1 1 calc(50% - 7px);



min-width:0;



height:40px;



padding:8px 9px;



font-size:12px;



}



.chapter-select{



width:100%;



height:40px;



order:3;



font-size:12px;



}



.chapter-pages img{



width:100%;



max-width:100%;



}



}



/* =====================================================

DESKTOP

===================================================== */



@media(min-width:900px){



.chapter-controls{



padding:18px 25px;



}



.chapter-button{



min-width:160px;



height:44px;



font-size:14px;



}



.chapter-select{



width:210px;



height:44px;



font-size:14px;



}



.chapter-pages img{



max-width:900px;



}



}