/* =======================
   Default variables
   ======================= */
:root {
  --gradient-color-main: linear-gradient(355deg, rgba(255, 255, 255, 0.356) 0%, rgba(0, 0, 0, 0.445) 56%, rgba(255, 255, 255, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 255, 255, 0.63) 0%, rgba(0, 0, 0, 0.767) 56%, rgba(255, 255, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 255, 255, 0.527) 0%, rgba(129, 129, 129, 0.555) 56%, rgba(255, 255, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(190, 190, 190, 0.329);
  --border-color-inactive: rgba(255, 255, 255, 0.267);
  --svg-icons-active: rgb(255, 255, 255);
  --accent-colors: rgb(221, 255, 99);
  --navbar-color: rgb(36, 36, 36);
}

/* =======================
   Themes
   ======================= */

/* Classic Titanium (default) */
:root[data-theme="classic-titanium"] {
  --gradient-color-main: linear-gradient(355deg, rgba(255, 255, 255, 0.356) 0%, rgba(0, 0, 0, 0.445) 56%, rgba(255, 255, 255, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 255, 255, 0.63) 0%, rgba(0, 0, 0, 0.767) 56%, rgba(255, 255, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 255, 255, 0.527) 0%, rgba(129, 129, 129, 0.555) 56%, rgba(255, 255, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(190, 190, 190, 0.329);
  --border-color-inactive: rgba(255, 255, 255, 0.267);
  --svg-icons-active: rgb(255, 255, 255);
  --accent-colors: rgb(221, 255, 99);
  --navbar-color: rgb(36, 36, 36);
}

/* Aqua Jelly */
:root[data-theme="aqua-jelly"] {
  --gradient-color-main: linear-gradient(355deg, rgba(73, 188, 255, 0.356) 0%, rgba(2, 100, 145, 0.445) 56%, rgba(157, 255, 214, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(0, 135, 145, 0.63) 0%, rgba(15, 206, 181, 0.233) 56%, rgba(40, 248, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(118, 200, 255, 0.527) 0%, rgba(4, 161, 209, 0.555) 56%, rgba(60, 232, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(13, 88, 65, 0.329);
  --border-color-inactive: rgba(255, 255, 255, 0.267);
  --svg-icons-active: rgb(158, 255, 234);
  --accent-colors: rgb(97, 255, 221);
  --navbar-color: rgb(0, 150, 170);
}

/* Crimson Love */
:root[data-theme="crimson-love"] {
  --gradient-color-main: linear-gradient(355deg, rgba(224, 0, 0, 0.356) 0%, rgba(255, 29, 29, 0.664) 56%, rgba(255, 27, 27, 0.753) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 80, 80, 0.63) 0%, rgba(179, 10, 10, 0.767) 56%, rgba(255, 83, 83, 0.459) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 0, 0, 0.527) 0%, rgba(255, 59, 59, 0.555) 56%, rgba(255, 136, 136, 0.61) 100%);
  --svg-icons-inactive: rgba(49, 28, 28, 0.329);
  --border-color-inactive: rgba(99, 19, 19, 0.267);
  --svg-icons-active: rgb(255, 223, 223);
  --accent-colors: rgb(255, 121, 104);
  --navbar-color: rgb(114, 20, 20);
}

/* Sunset Kiss */
:root[data-theme="sunset-kiss"] {
  --gradient-color-main: linear-gradient(355deg, rgba(255, 227, 68, 0.356) 0%, rgba(255, 130, 28, 0.445) 56%, rgba(241, 255, 112, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 189, 114, 0.63) 0%, rgba(175, 140, 43, 0.945) 56%, rgb(255, 187, 147) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 204, 64, 0.527) 0%, rgba(255, 121, 44, 0.836) 56%, rgba(252, 255, 55, 0.61) 100%);
  --svg-icons-inactive: rgba(151, 72, 19, 0.329);
  --border-color-inactive: rgba(104, 50, 14, 0.267);
  --svg-icons-active: rgb(255, 223, 41);
  --accent-colors: rgb(255, 187, 86);
  --navbar-color: rgb(201, 99, 40);
}

/* Midnight Sky */
:root[data-theme="midnight-sky"] {
  --gradient-color-main: linear-gradient(355deg, rgba(21, 14, 112, 0.815) 0%, rgba(26, 52, 92, 0.815) 56%, rgba(31, 15, 172, 0.884) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(16, 25, 153, 0.63) 0%, rgba(47, 41, 100, 0.788) 56%, rgba(71, 58, 252, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(19, 1, 43, 0.527) 0%, rgba(53, 67, 131, 0.555) 56%, rgba(79, 82, 231, 0.61) 100%);
  --svg-icons-inactive: rgba(84, 85, 177, 0.329);
  --border-color-inactive: rgba(73, 41, 190, 0.267);
  --svg-icons-active: rgb(144, 167, 230);
  --accent-colors: rgb(140, 76, 224);
  --navbar-color: rgb(9, 8, 88);
}

/* Bubblegum Flavor */
:root[data-theme="bubblegum-flavor"] {
  --gradient-color-main: linear-gradient(355deg, rgba(212, 78, 172, 0.356) 0%, rgba(185, 40, 120, 0.445) 56%, rgba(255, 133, 235, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(166, 215, 255, 0.63) 0%, rgba(15, 97, 129, 0.801) 56%, rgba(176, 243, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(88, 222, 255, 0.747) 0%, rgba(255, 171, 251, 0.836) 56%, rgba(134, 255, 249, 0.808) 100%);
  --svg-icons-inactive: rgba(190, 107, 158, 0.329);
  --border-color-inactive: rgba(172, 104, 166, 0.267);
  --svg-icons-active: rgb(255, 211, 226);
  --accent-colors: rgb(156, 255, 250);
  --navbar-color: rgb(61, 116, 189);
}

/* Serene Woods */
:root[data-theme="serene-woods"] {
  --gradient-color-main: linear-gradient(355deg, rgba(2, 77, 2, 0.685) 0%, rgba(42, 158, 67, 0.795) 56%, rgba(173, 247, 151, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(241, 197, 139, 0.63) 0%, rgba(119, 86, 24, 0.863) 56%, rgba(233, 186, 132, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(26, 202, 35, 0.527) 0%, rgba(22, 122, 22, 0.555) 56%, rgba(119, 255, 153, 0.61) 100%);
  --svg-icons-inactive: rgba(131, 161, 118, 0.445);
  --border-color-inactive: rgba(102, 138, 93, 0.753);
  --svg-icons-active: rgb(238, 184, 134);
  --accent-colors: rgb(162, 190, 125);
  --navbar-color: rgb(82, 72, 53);
}

/* Royal Genesis */
:root[data-theme="royal-genesis"] {
  --gradient-color-main: linear-gradient(355deg, rgba(187, 101, 148, 0.356) 0%, rgba(69, 10, 83, 0.445) 56%, rgba(255, 242, 250, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(242, 188, 255, 0.63) 0%, rgba(63, 15, 55, 0.349) 56%, rgba(255, 255, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(189, 69, 219, 0.527) 0%, rgba(199, 134, 185, 0.555) 56%, rgba(233, 152, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(100, 33, 95, 0.329);
  --border-color-inactive: rgba(121, 31, 106, 0.267);
  --svg-icons-active: rgb(226, 182, 255);
  --accent-colors: rgb(252, 216, 255);
  --navbar-color: rgb(84, 38, 88);
}

* {
  margin: 0;
  padding: 0;
  font-family: Oxanium;
  -webkit-tap-highlight-color: transparent;
  font-weight: 300;
}

body {
    background: transparent;
}

section {
  height: 100vh;
  position: relative;
  overflow: hidden;
}


/*anime styles*/

.anime-nest {
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, 0.467rem + 0.6868vw, 1.25rem);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100dvh;
  padding: clamp(0.5rem, 0.2313rem + 1.1681vw, 1.563rem);
  box-sizing: border-box;
  overflow: hidden;
}

.anime-catalogue {
    width: 100%;
    height: 75%;
    background-color: var(--border-color-inactive);
    border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    border: 2px solid var(--border-color-inactive);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


.anime-slider {
    display: flex;
    gap: 1rem;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

.slider-items {
  background-color: var(--accent-colors);
  border-radius: clamp(0rem, -0.5055rem + 2.1978vw, 2rem);
  overflow: hidden;
  cursor: pointer;
  filter: grayscale(1);
}

.slider-items.active {
  filter: grayscale(0);  
}

.image-content {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

.image-content img:nth-child(1) {
    height: clamp(7rem, 6.2418rem + 3.2967vw, 10rem);
    z-index: 2;
}

.color-overlay {
    height: 40%;
    width: 100%;
    position: absolute;
    background-image: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.74) 70%);
    z-index: 1;
}

.image-content img:nth-child(3) {
    height: 100%;
    width: 100%;
    position: absolute;
    object-fit: cover;
}

.nav-slider {
    height: 5rem;
    width: 100%;
    background-color: var(--navbar-color);
    display: flex;
    padding: 1rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
}

.nav-slider button {
    height: 3rem;
    width: 3rem;
    border-radius: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: var(--accent-colors);
    cursor: pointer;
    transition: .2s ease-in;
}

.nav-slider button:hover {
    transform: scale(1.08);
}

.nav-slider button svg{
    height: 2rem;
    fill: var(--navbar-color);
}

.nav-slider h1 {
    color: var(--svg-icons-active);
    font-weight: bold;
}

.nav-btns {
    display: flex;
    gap: 1rem;
}

.nav-btns button{
    height: 3rem;
    width: 3rem;
    color: var(--navbar-color);
    background-color: var(--accent-colors);
    border: none;
    border-radius: 10%;
    cursor: pointer;
    transition: .2s ease-in;
}

.nav-btns button:hover {
    transform: scale(1.08);
}

/* Override Swiper’s default positioning */
.nav-btns .swiper-button-next,
.nav-btns .swiper-button-prev {
  position: static !important; 
  margin: 0;  
  display: flex;                  
}

.swiper-button-next svg {
    transform: scale(-1);
}

/* Hide Swiper’s built-in arrows */
.swiper-button-next::after,
.swiper-button-prev::after {
  display: none !important;
  content: none !important;
}


.anime-stats {
    width: 100%;
    height: 25%;
    background-color: var(--border-color-inactive);
    border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    border: 2px solid var(--border-color-inactive);
    padding: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
    box-sizing: border-box;
    display: flex;
    gap: 1rem;
}

.stats-title {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 25rem;
    background-color: var(--accent-colors);
    padding: 1rem;
    box-sizing: border-box;
    border-radius: 1rem;
}

.stats-title h1 {
    font-weight: bold;
    color: var(--navbar-color);
}

.stats-title svg {
    height: 4rem;
    fill: var(--navbar-color);
}

.stats-items-nest {
    display: flex;
    gap: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
    height: 100%;
    width: 100%;
    overflow-x: auto;
}

.stats-items-nest::-webkit-scrollbar {
  width: 1px;             
}

.stats-items-nest::-webkit-scrollbar-track {
  background: transparent;   
   
}

.stats-items-nest::-webkit-scrollbar-thumb {
  background: var(--accent-colors);
  border-radius: 10px;
  border: 5px solid transparent;
  background-clip: content-box;
  cursor: grab;
}

.stats-items {
    display: flex;
    width: 100%;
    height: 100%;
    background-image: var(--gradient-color-main);
    border-radius: 1rem;
    padding: 1rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.stats-items svg {
    fill: var(--accent-colors);
    height: clamp(3rem, 2.7473rem + 1.0989vw, 4rem);
    mix-blend-mode: multiply;
}

.stats-items h1:nth-child(1){
    font-size: clamp(1rem, 0.8736rem + 0.5495vw, 1.5rem);
    color: var(--accent-colors);
    font-weight: bold;
}

.stats-items h1:nth-child(2){
    color: var(--svg-icons-active);
    font-weight: 500;
    font-size: 1.2rem;
}

/* slide-modal: hidden to the left via transform for consistent animation */
.slide-modal {
  position: fixed;              /* fixed to viewport */
  top: 0;
  left: 0;
  height: 100vh;                /* full height */
  width: clamp(20rem, 16.2088rem + 16.4835vw, 35rem);
  transform: translateX(-110%); /* off-screen to the left */
  transition: transform 360ms cubic-bezier(.2,.9,.2,1);
  background-color: color-mix(in srgb, var(--navbar-color) 45%, transparent);
  border-radius: 
  0 
  clamp(1rem, 0.7473rem + 1.0989vw, 2rem) 
  clamp(1rem, 0.7473rem + 1.0989vw, 2rem) 
  0;
  backdrop-filter: blur(20px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 
  clamp(2rem, 1.4945rem + 2.1978vw, 4rem)
  clamp(1rem, 0.7473rem + 1.0989vw, 2rem)
  clamp(1rem, 0.7473rem + 1.0989vw, 2rem)
  clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
  box-sizing: border-box;
  gap: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
  overflow-y: auto;
  will-change: transform;
}

.slide-modal h1 {
    color: var(--accent-colors);
    font-weight: 500;
    font-size: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
}

/* visible state */
.slide-modal.active {
  transform: translateX(0);
}



.slide-modal svg {
    position: absolute;
    height: clamp(3.5rem, 3.1209rem + 1.6484vw, 5rem);
    top: 0;
    right: 0;
    fill: var(--accent-colors);
    cursor: pointer;
}

.slide-modal-activities {
    width: 100%;
    height: 7rem;
    background-color: var(--navbar-color);
    padding-right: 1rem;
    box-sizing: border-box;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow: hidden;
}

.slide-modal-activities h1:nth-child(1) {
    font-size: clamp(0.9rem, 0.7989rem + 0.4396vw, 1.3rem);
    font-weight: bold;
    color: var(--accent-colors);
}

.slide-modal-activities h1:nth-child(2) {
    font-size: 1rem;
    font-weight: 300;
    color: var(--svg-icons-active);
}


.activity-image {
    width: clamp(5rem, 4.7473rem + 1.0989vw, 6rem);
    height: 100%;
    background-color: var(--accent-colors);
}

.activity-image img {
    width: clamp(5rem, 4.7473rem + 1.0989vw, 6rem);
    height: 100%;
    object-fit: cover;
}

.popup-modal {
   position: absolute;
   height: 100dvh;
   width: 100%; 
   z-index: 1;
   bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   backdrop-filter: blur(45px);
   padding: clamp(0rem, -0.8846rem + 3.8462vw, 3.5rem);
   box-sizing: border-box;
   display: none;
}

.popup-modal.active {
    display: flex;
}

.popup-modal svg {
    height: clamp(2.5rem, 1.8681rem + 2.7473vw, 5rem);
    position: absolute;
    top: 0;
    right: 0;
    fill: var(--accent-colors);
    cursor: pointer;
}

.modal-content {
    height: 100%;
    width: 100%;
    background-color: color-mix(in srgb, var(--navbar-color) 65%, transparent);
    border: 2px var(--border-color-inactive) solid;
    border-radius: clamp(0rem, -0.5055rem + 2.1978vw, 2rem);
    padding: 
    2rem
    clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem)
    clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem)
    clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem);
    box-sizing: border-box;
    display: flex;
    gap: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
}

.video-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 50%;
    height: 100%;
    position: relative;
}

.video-content {
    background-color: var(--navbar-color);
    height: 30rem;
    width: 100%;
    border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    overflow: hidden;
}

.vid-desc {
    display: flex;
    flex-direction: column;
}

.vid-desc h1:nth-child(1) {
    font-size: 2rem;
    font-weight: bold;
    color: var(--accent-colors);
}

.vid-desc h1:nth-child(3), .vid-desc h1:nth-child(2) {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--svg-icons-active);
}

.video-content img {
    height: 30rem;
    width: 100%;
    object-fit: cover;
}

.desc-right {
    background-color: var(bo);
    border: 2px var(--border-color-inactive) solid;
    width: 50%;
    height: 100%;
    border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    padding: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--accent-colors);
}

.desc-right p {
    font-weight: 300;
    font-size: clamp(1rem, 0.8736rem + 0.5495vw, 1.5rem);
    overflow-y: auto;
    height: 30rem;
    padding-right: clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem);
    line-height: clamp(1.5rem, 1.1209rem + 1.6484vw, 3rem);
}

.desc-right p::-webkit-scrollbar {
    width: 12px;
}

.desc-right p::-webkit-scrollbar-track {
    border-radius: 10px;
}
    
.desc-right p::-webkit-scrollbar-thumb {
    background: var(--svg-icons-active);
    border-radius: 10px;
    border: 4px solid transparent;
    background-clip: content-box;
}

.desc-right h1 {
    color: var(--svg-icons-active);
    font-weight: bold;
    font-size: clamp(0.8rem, 0.4967rem + 1.3187vw, 2rem);
}




/*manga styles*/

.manga-nest {
  display: flex;
  gap: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100dvh;
  padding: clamp(0.5rem, 0.2313rem + 1.1681vw, 1.563rem);
  box-sizing: border-box;
  overflow: hidden;  
}

.manga-content-nest {
    width: 50%;
    height: 100%;
    gap: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
    display: flex;
    flex-direction: column;
}

.manga-title {
    height: 20%;
    background-color: var(--accent-colors);
    border-radius: clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem);
    justify-content: space-between;
    display: flex;
    align-items: center;
    padding: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.manga-title h1{
    font-weight: bold;
    color: var(--navbar-color);
    font-size: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    z-index: 2;
}

.manga-title img:nth-child(2) {
    height: clamp(2rem, 0.7363rem + 5.4945vw, 7rem);
    z-index: 2;
}

.title-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--accent-colors) 85%, transparent);
    left: 0;
    z-index: 1;
}

.manga-title img:nth-child(4) {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
}

.manga-activity {
    height: 80%;
    background-color: color-mix(in srgb, var(--navbar-color) 65%, transparent);
    border: 2px solid var(--border-color-inactive);
    border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem);
    box-sizing: border-box;
    overflow-y: scroll;
}

.manga-activity::-webkit-scrollbar {
    width: 15px;
}

.manga-activity::-webkit-scrollbar-track {
    border-radius: 10px;
    margin: 30px;
}
    
.manga-activity::-webkit-scrollbar-thumb {
    background: var(--svg-icons-active);
    border-radius: 10px;
    border: 4px solid transparent;
    background-clip: content-box;
}

.manga-divider {
    height: 100%;
    width: 10%;
    background-color: var(--border-color-inactive);
    border: 2px solid var(--border-color-inactive);
    border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    display: flex;
    justify-content: center;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;
    position: relative;
}

.lib-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
    background-color: color-mix(in srgb, var(--accent-colors) 75%, transparent);
}

.manga-divider h1 {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2.5rem;
    position: absolute;
    color: var(--navbar-color);
    z-index: 2;
    padding: 2rem;
    box-sizing: border-box;
}

.manga-divider img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


.activity-items {
    height: clamp(6rem, 4.2308rem + 7.6923vw, 13rem);
    width: 100%;
    background-color: color-mix(in srgb, var(--navbar-color) 65%, transparent);
    border: 2px solid var(--navbar-color);
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

.manga-image {
    width: clamp(4.5rem, 3.1099rem + 6.044vw, 10rem);
    height: 100%;
    background-color: var(--navbar-color);
}

.manga-image img {
    width: clamp(4.5rem, 3.1099rem + 6.044vw, 10rem);
    height: 100%;
    object-fit: cover;
}

.manga-desc h1 {
    font-size: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    color: var(--accent-colors);
    font-weight: bold;
}

.manga-desc h2 {
    font-size: clamp(0.8rem, 0.6231rem + 0.7692vw, 1.5rem);
    color: var(--svg-icons-active);
}


.manga-library {
    height: 100%;
    width: 50%;
    background-color: color-mix(in srgb, var(--navbar-color) 65%, transparent);
    border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
    padding: clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem);
    box-sizing: border-box;
    border: 2px solid var(--border-color-inactive);
}

.manga-selector {
    width: 100%;
    height: 35%;
    background-color: var(--navbar-color);
    border-radius: 
    clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem)
    clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem)
    0
    0;
    overflow-x: scroll;
    display: flex;
    padding: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
    box-sizing: border-box;
    gap: .5rem;
}

.manga-selector::-webkit-scrollbar {
    width: 10px;
}

.manga-selector::-webkit-scrollbar-track {
    background-color: var(--accent-colors);
    border-radius: 1rem;
}
    
.manga-selector::-webkit-scrollbar-thumb {
    background: var(--navbar-color);
    border-radius: 10px;
    border: 3.5px solid transparent;
    background-clip: content-box;
}

.manga-selector {
  cursor: grab;
}
.manga-selector.dragging {
  cursor: grabbing;
}

.manga-viewer {
    height: 75%;
    width: 100%;
    background-color: var(--navbar-color);
    border-radius: clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: .5rem;
    padding: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
    box-sizing: border-box;
}

.manga-items {
    background-color: var(--accent-colors);
    height: 80%;
    width: clamp(5rem, 4.2418rem + 3.2967vw, 8rem);
    border-radius: 1rem;
    flex-shrink: 0;
    transition: .2s ease-in;
    overflow: hidden;
}

.manga-items img{
    height: 100%;
    width: clamp(5rem, 4.2418rem + 3.2967vw, 8rem);
    object-fit: cover;
    user-drag: none;      /* Safari/WebKit */
    -webkit-user-drag: none;
}

.manga-items.active {
    height: 100%;
}

.manga-cover-viewer {
    height: clamp(13rem, 9.967rem + 13.1868vw, 25rem);
    width: clamp(10rem, 8.2308rem + 7.6923vw, 17rem);
    background-color: var(--accent-colors);
    border-radius: .5rem;
    overflow: hidden;
}

.manga-cover-viewer img {
    height: 100%;
    width: clamp(10rem, 8.2308rem + 7.6923vw, 17rem);
    object-fit: cover;
}

.manga-texts {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
    padding: clamp(0rem, -0.2527rem + 1.0989vw, 1rem);
    width: clamp(10rem, 4.9451rem + 21.978vw, 30rem);
    box-sizing: border-box;
    justify-content: center;
}

.manga-texts h1 {
    color: var(--accent-colors);
    font-weight: bold;
    font-size: clamp(0.8rem, 0.6231rem + 0.7692vw, 1.5rem);

}

.manga-texts h2 {
    color: var(--svg-icons-active);
    font-weight: 500;
    font-size: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
}

.manga-texts p {
    height: clamp(5.3rem, 4.1121rem + 5.1648vw, 10rem);
    overflow-y: auto;
    color: var(--accent-colors);
    font-size: clamp(0.8rem, 0.6231rem + 0.7692vw, 1.5rem);
    padding-right: clamp(0.5rem, 0.2473rem + 1.0989vw, 1.5rem);
}

.manga-texts p::-webkit-scrollbar {
    width: 12px;
}

.manga-texts p::-webkit-scrollbar-track {
    border-radius: 10px;
}
    
.manga-texts p::-webkit-scrollbar-thumb {
    background: var(--svg-icons-active);
    border-radius: 10px;
    border: 4px solid transparent;
    background-clip: content-box;
}


















@media (max-width: 1000px) {
    .stats-title, .manga-divider, .manga-activity::-webkit-scrollbar, .manga-selector::-webkit-scrollbar  {
        display: none;
    }

    .manga-selector {
        border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    }

    .modal-content {
        flex-direction: column;
    }

    .manga-nest {
        flex-direction: column;
        flex-direction: column-reverse;
    }

    .video-left, .desc-right {
        height: 50%;
        width: 100%;
    }

    .manga-library {
        width: 100%;
        height: 65%;
    }

    .manga-content-nest {
        width: 100%;
        height: 35%;
    }

    .vid-desc {
        padding: .5rem;
        box-sizing: border-box;
        position: absolute;
        bottom: 0rem;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 1rem;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.411);
        backdrop-filter: blur(10px);
        overflow-x: hidden;
        white-space: nowrap;      /* keep everything on one line */
    }

    .vid-desc h1 {
        flex: 0 0 auto;         /* ✅ keeps each <h1> at its natural width */
        margin: 0;
    }

    .vid-desc .marquee-content {
    display: inline-flex;
    gap: 1rem;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    }

    .vid-desc.marquee .marquee-content {
    animation: marquee 15s linear infinite;
    }

    @keyframes marquee {
        0% { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
    }

    .vid-desc h1:nth-child(1), .vid-desc h1:nth-child(2), .vid-desc h1:nth-child(3) {
        font-size: .8rem;
        font-weight: bold;
        color: var(--accent-colors);
    }

    .video-content {
        border-radius: 
        clamp(1rem, 0.7473rem + 1.0989vw, 2rem) 
        clamp(1rem, 0.7473rem + 1.0989vw, 2rem) 
        0 
        0;
    }

    .desc-right {
        border-radius: 
        0 
        0
        clamp(1rem, 0.7473rem + 1.0989vw, 2rem)  
        clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
    }

    .video-content img {
        object-position: bottom;
    }

    .desc-right p {
    height: 10rem;
    overflow-y: auto;
    }

    .desc-right p::-webkit-scrollbar {
    width: 10px;
    }

    .manga-title {
        height: 5%;
    }

    .manga-activity {
        height: 95%;
    }
}

@media (max-width: 500px) {
    .anime-stats {
        height: 25%;
    }

    .anime-catalogue {
        height: 85%;
    }

.nav-slider h1 {
    display: none;
}
}