/* Body background color */
        body {
            background-color: #312f30;
        }

        /* Circle button styles */
        .btn-circle {
            width: 50px;
            height: 50px;
            font-size: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            overflow: hidden;
            background-color: #2b2a2a;
            color: #cf0000;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
            border: 1px solid #3b363a;
        }

        .btn-circle:hover {
            background-color: #444;
            color: #ff6666;
            transform: scale(1.05);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        }

        /* Image container styles */
        .icon-item {
            width: 60px;
            height: 60px;
            overflow: hidden;
            border-radius: 10px;
        }

        /* Info panel styles */
        .info-container {
            width: 350px;
            flex-shrink: 0;
        }

        .info-panel {
            background-color: #2b2a2a;
            padding: 15px;
            border-radius: 10px;
            margin-top: 10px;
            display: none;
        }

        .info-panel.active {
            display: block;
        }

        /* Hover effect for images */
        .hover-effect {
            position: relative;
            display: inline-block;
            overflow: hidden;
            border-radius: 10px;
            transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
            width: 70px;
            height: 70px;
        }

        .hover-effect:hover {
            transform: scale(1.1);
            filter: grayscale(30%) brightness(1.1);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
        }

        .character-img {
            border-radius: 8px;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: filter 0.3s ease;
        }

        /* Image hover effect for highlighting */
        .icon-item.highlight img {
            transform: scale(1.4);
            filter: none;
            z-index: 2;
            box-shadow: 0 0 10px #ff6666;
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        .icon-item img {
            filter: none;
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        /* Dimmed image effect */
        .icon-item.dimmed img {
            filter: grayscale(100%) brightness(60%);
        }

        /* Card and button styles */
        .card {
            background-color: #312f30;
            color: #faf9f4;
            border: 1px solid #3b363a;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .button {
            background-color: #312f30;
            color: #faf9f4;
        }

        /* Scroll container styles */
        .scroll-container {
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #444 transparent;
        }

        .scroll-container::-webkit-scrollbar {
            width: 6px;
        }

        .scroll-container::-webkit-scrollbar-track {
            background: transparent;
        }

        .scroll-container::-webkit-scrollbar-thumb {
            background-color: #444;
            border-radius: 4px;
            border: 1px solid transparent;
        }

        /* Remove Bootstrap focus/active outline & background from buttons */
        .btn:focus, .btn:active, .btn-outline-primary:focus, .btn-outline-primary:active {
            box-shadow: none !important;
            outline: none !important;
            background-color: transparent !important;
        }

        /* Override Bootstrap's hover/focus effect on these buttons */
        a.btn-outline-primary:hover, a.btn-outline-primary:focus, a.btn-outline-primary:active {
            background-color: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
        }

        /* Gallery button hover effect */
        .gallery-btn {
            background-color: transparent;
            border: none;
            border-radius: .75rem;
            padding: 0;
            transition: transform 0.2s ease;
        }

        .gallery-btn:hover, .gallery-btn:focus {
            transform: scale(1.02);
            background-color: rgba(255, 255, 255, 0.05); /* subtle hover background */
            outline: none;
            box-shadow: none;
        }

        .gallery-btn:active {
            transform: scale(0.98);
        }

        /* Equal height row for layout consistency */
        .equal-height-row {
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
        }

        .equal-height-row > [class*="col-"] {
            display: flex;
            flex-direction: column;
        }

        .equal-height-card {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
        }

        .equal-height-content {
            flex: 1 1 auto;
            overflow-y: auto;
        }

        /* Mobile styles */
        @media (max-width: 768px) {
            .pagedoll-inline-wrapper {
                display: none;
            }

            /* Mobile navigation scale */
            .mobile-nav {
                transform: scale(0.65);
                transform-origin: bottom right;
            }
        }

        /* Modal styles */
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.7) !important;
        }

        .modal-content {
            background-color: transparent;
            border: none;
            box-shadow: none;
        }

        .modal-body {
            padding: 0;
        }

        #modalImage {
            object-fit: contain;
            max-width: 100%;
            max-height: 80vh;
            display: block;
            border-radius: 0.75rem;
        }
        
        
        

        /* Scroll container styles */
        .scroll-container {
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #444 transparent;
        }

        .scroll-container::-webkit-scrollbar {
            width: 6px;
        }

        .scroll-container::-webkit-scrollbar-track {
            background: transparent;
        }

        .scroll-container::-webkit-scrollbar-thumb {
            background-color: #444;
            border-radius: 4px;
            border: 1px solid transparent;
        }

        /* Tab and Pill styles */
        .pill {
            background-color: transparent;
            color: #faf9f4;
            border: 2px solid #3b363a;
            padding: 5px 20px;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        .pill:hover {
            background-color: #444; 
    color: #ff6666; /* Red color on hover */
            transform: scale(1.05);
        }

        .pill.active {
            background-color: #444;
    color: #ff6666; /* Red color when active */
        }

        .pill-container {
            display: flex;
            justify-content: center;
            gap: 50px;
            margin-bottom: 10px;
        }

        .tab-pane {
            display: none; /* Hide content by default */
            padding: 1px;
  
            border-radius: 10px;
        }

        .tab-pane.active {
            display: block; /* Show the active content */
        }

        /* Scroll container styles */
        .scroll-container {
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #444 transparent;
        }

        .scroll-container::-webkit-scrollbar {
            width: 6px;
        }

        .scroll-container::-webkit-scrollbar-track {
            background: transparent;
        }

        .scroll-container::-webkit-scrollbar-thumb {
            background-color: #444;
            border-radius: 4px;
            border: 1px solid transparent;
        }
        
        




/* Tooltip container */
.tooltip-hover {
  position: relative;
  display: inline-block;
}

/* Tooltip box */
.tooltip-hover .tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: fixed;               /* stationary relative to viewport */
  background: rgba(0, 0, 0, 0.85); /* slightly transparent black */
  color: #fff;
  text-align: left;
  padding: 12px 16px;           /* bigger padding for readability */
  border-radius: 8px;
  font-size: 1rem;              /* larger font size */
  line-height: 1.4;
  max-width: 320px;             /* wider tooltip */
  z-index: 9999;
  transition: opacity 0.2s ease;
  pointer-events: none;         /* avoids blocking mouse events */
}

/* Show tooltip on hover */
.tooltip-hover:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Tooltip styling - larger box and text */
#tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 12px 16px;       /* bigger padding */
    border-radius: 8px;       /* slightly rounder corners */
    max-width: 280px;         /* wider tooltip */
    font-size: 1rem;          /* larger text */
    line-height: 1.4;         /* better readability */
    pointer-events: none;     /* does not block mouse */
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 9999;
}



.tooltip-follow {
    position: fixed;       /* follows the mouse */
    pointer-events: none;  /* mouse events pass through */
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    z-index: 9999;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.1s;
}
/* Match tab toggle styling */
.btn-toggle {
  font-size: 0.9rem;       /* same as your original */
  color: #ccc;             /* default color */
  text-decoration: none;   /* remove underline from hover */
  transition: transform 0.2s ease, color 0.2s ease;
}

.btn-toggle:hover {
  transform: scale(1.05);  /* slight expansion on hover */
  color: red;               /* turn red on hover */
  cursor: pointer;
}

/* Link buttons in details section */
.details-column a {
    color: #8ab6d6 !important;               /* default color */
    text-decoration: none;                /* remove underline */
    transition: transform 0.2s ease, color 0.2s ease;
}

.details-column a:hover {
    transform: scale(1.05);               /* slight expansion on hover */
    color: red !important;                /* turn red on hover */
    cursor: pointer;
}




/* ===========================
   RESPONSIVE (MOBILE)
   =========================== */

@media (max-width: 768px) {
    .pagedoll-inline-wrapper {
        display: none;
    }
    .mobile-nav {
        transform: scale(0.65);
        transform-origin: bottom right;
    }
}

    /* Make play icon match hover effects like tabs/buttons/images */
    .voice-claim-play {
        color: #737373;
        cursor: pointer;
        transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
        margin-left: 5px;
    }

    .voice-claim-play:hover {
        transform: scale(1.1);
        color: red;
        filter: brightness(1.2);
    }

    /* Optional: make the text also slightly interactive */
    .voice-claim-text:hover {
        transform: scale(1.05);
        color: red;
        cursor: pointer;
        transition: transform 0.3s ease, color 0.3s ease;
    }
    

.voice-claim-play {
    color: #737373;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
    margin-left: 5px;
}

.voice-claim-play:hover {
    transform: scale(1.1);
    color: red;
    filter: brightness(1.2);
}
 


/* ========================================================
   4. NAVIGATION
   ======================================================== */

/* --- Mobile Navigation Circle --- */
.mobile-nav {
  position: fixed;
  bottom: 15px;
  right: -140px; /* hidden by default */
  height: 250px;
  width: 250px;
  border-radius: 50% 0 0 50%;
  background: rgba(255,255,255,0.02);
  border: 2px solid #9f2a2a;
  z-index: 9999;
  opacity: 0.5;
  backdrop-filter: blur(3px);
  transition: right 0.3s ease, opacity 0.3s ease;
  pointer-events: none; /* Base element not clickable */
}

.mobile-nav.open {
  right: 0 !important;
  opacity: 1;
}

.mobile-nav:hover {
  opacity: 1;
}

/* Make specific nav elements clickable */
.mobile-nav .nav-tab,
.mobile-nav .side-nav,
.mobile-nav .nav-link {
  pointer-events: auto;
}

/* --- Side Navigation Links --- */
.side-nav {
  position: absolute;
  bottom: 15px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  z-index: 10000;
}

.nav-link {
  display: inline-block;
  background: #9f2a2a;
  color: white;
  text-decoration: none;
  padding: 1px 25px;
  border-radius: 20px 0 0 70px;
  transition: all 0.3s ease;
  font-family: monospace;
  letter-spacing: 2px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-link:hover {
  background: #b53333;
  padding-left: 55px;
  color: #ffcccc;
  box-shadow: -6px 6px 16px rgba(0,0,0,0.4);
  transform: scale(1.02);
}

.nav-link .nav-content {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s ease;
}

.nav-link:hover .nav-content {
  transform: translateX(-10px);
}

.nav-link i {
  margin-right: 8px;
  font-size: 14px;
  min-width: 16px;
}

/* Nav link padding lengths (left side extension) */
.nav-link.home { 
  padding-left: 40px;  /* shortest */
}

.nav-link.characters { 
  padding-left: 30px; 
}

.nav-link.locations  { 
  padding-left: 50px;  /* longest */
}

.nav-link.worldinfo { 
  padding-left: 40px;  /* longest */
}

.nav-link.stories { 
  padding-left: 40px; 
}

.nav-link.au { 
  padding-left: 40px;  /* shortest */
}

/* --- Navigation Tab Toggle --- */
.nav-tab {
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 20px;
  height: 60px;
  background: #9f2a2a;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  z-index: 10000;
  transition: background 0.3s ease;
}

.nav-tab:hover {
  background: #b53333;
}



/* --- Mobile Breakpoints --- */
@media (max-width: 768px) {
  /* Navigation adjustments */
  .mobile-nav {
    height: 150px;
    width: 150px;
    right: -125px;
    border-radius: 60% 0 0 60%;
    transform: scale(0.65);
    transform-origin: bottom right;
  }
}

/* === Custom Link Colors ONLY inside main text column === */
.col-lg-6 > .scroll-container a {
  color: #e3acac;          /* deep red for stationary links */
  text-decoration: none;    /* remove underline */
  transition: color 0.2s ease, transform 0.2s ease;
}

.col-lg-6 > .scroll-container a:hover,
.col-lg-6 > .scroll-container a:focus {
  color: #ff4d4d;          /* bright red on hover */
  text-decoration: underline; /* optional: underline on hover */
  transform: scale(1.02);     /* slight hover scale */
}




















/* ============================
   Mamon Page Exclusive Styles START
   ============================ */
body.charaMamon {
  cursor: none; /* hides the default cursor */
}

body.charaMamon #knife-cursor {
  position: fixed;
  pointer-events: none;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  z-index: 10000;
}

body.charaMamon .blood-drop {
  position: fixed;
  pointer-events: none;
  width: 8px;
  height: 8px;
  background: red;
  border-radius: 50%;
  opacity: 0.8;
  animation: fadeOut 1s forwards;
  z-index: 9999;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.5);
  }
}

body.charaMamon #pagedoll-container {
  pointer-events: none;
}

body.charaMamon #pagedoll-container img,
body.charaMamon #pagedoll-container a {
  pointer-events: auto;
}

/* Disable custom cursor on touch devices */
@media (hover: none), (pointer: coarse) {
  body.charaMamon {
    cursor: auto !important;
  }
  body.charaMamon #knife-cursor {
    display: none !important;
  }
}


/* ============================
   Mamon Page Exclusive Styles END
   ============================ */











  /* NSFW ICON STYLES START */


  /* scoped: only affects thumbs inside .blurrable-gallery */
    .blurrable-gallery .blurred-thumb,
    .blurrable-gallery .blurrable-thumb{
      position:relative;
      overflow:hidden;
      width:120px;
      height:130px;
      border-radius:.75rem;
    }

    /* blurred thumbnail image */
    .blurrable-gallery .blurred-thumb .thumb-img,
    .blurrable-gallery .blurrable-thumb .thumb-img{
      display:block;
      width:120px;
      height:120px;
      object-fit:cover;
      border-radius:.5rem;
      filter:blur(6px);
      transition:filter .15s ease;
    }

    /* when JS adds .unblur to the clicked thumbnail remove blur */
    .blurrable-gallery .blurred-thumb.unblur .thumb-img,
    .blurrable-gallery .blurrable-thumb.unblur .thumb-img{
      filter:none;
    }

    /* 18+ badge overlay */
    .blurrable-gallery .blurred-thumb .age-badge,
    .blurrable-gallery .blurrable-thumb .age-badge{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:18px;
      color:#fff;
      background:rgba(0,0,0,0.45);
      border-radius:.5rem;
      pointer-events:none; /* lets the click through to the button */
    }



.blurred {
  filter: blur(5px);
  transition: filter 0.3s ease;
}



  /* NSFW ICON STYLES END */